# EmojiPickerPopover
Package: @mantine/emoji
Import: import { EmojiPickerPopover } from '@mantine/emoji';
Description: EmojiPicker in a popover dropdown

## Usage

`EmojiPickerPopover` combines `EmojiPicker` with Mantine `Popover`.
The child element is used as the popover target – the popover is toggled when it is clicked.

```tsx
import { useState } from 'react';
import { ActionIcon } from '@mantine/core';
import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerPopover } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  const [emoji, setEmoji] = useState<string | null>(null);

  return (
    <EmojiPickerPopover
      data={emojiData}
      onEmojiSelect={(e) => setEmoji(e.emoji)}
    >
      <ActionIcon variant="default" size="lg">
        {emoji || '☺'}
      </ActionIcon>
    </EmojiPickerPopover>
  );
}
```


## Close on select

By default, the popover closes when an emoji is selected. Set `closeOnSelect={false}` to keep it open:

```tsx
import { useState } from 'react';
import { ActionIcon } from '@mantine/core';
import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerPopover } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  const [emoji, setEmoji] = useState<string | null>(null);

  return (
    <EmojiPickerPopover
      data={emojiData}
      onEmojiSelect={(e) => setEmoji(e.emoji)}
      closeOnSelect={false}
    >
      <ActionIcon variant="default" size="lg">
        {emoji || '☺'}
      </ActionIcon>
    </EmojiPickerPopover>
  );
}
```


## EmojiPicker props

All `EmojiPicker` props are supported directly on `EmojiPickerPopover`.
For example, you can change the number of columns and hide the preview and category navigation:

```tsx
import { useState } from 'react';
import { ActionIcon } from '@mantine/core';
import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerPopover } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  const [emoji, setEmoji] = useState<string | null>(null);

  return (
    <EmojiPickerPopover
      data={emojiData}
      onEmojiSelect={(e) => setEmoji(e.emoji)}
      columns={6}
      withPreview={false}
      withCategoryNav={false}
    >
      <ActionIcon variant="default" size="lg">
        {emoji || '☺'}
      </ActionIcon>
    </EmojiPickerPopover>
  );
}
```


## onEmojiSelect

`onEmojiSelect` is called with the full emoji object when an emoji is selected:

```tsx
import { useState } from 'react';
import { ActionIcon } from '@mantine/core';
import { EmojiPickerPopover } from '@mantine/emoji';
import { emojiData } from './emoji-data';

function Demo() {
  const [emoji, setEmoji] = useState<string | null>(null);

  return (
    <EmojiPickerPopover data={emojiData} onEmojiSelect={(e) => setEmoji(e.emoji)}>
      <ActionIcon variant="default" size="lg">
        {emoji || '☺'}
      </ActionIcon>
    </EmojiPickerPopover>
  );
}
```

## Controlled state

Use `opened` and `onOpenedChange` props to control the popover state. A controlled popover
is not toggled when the target is clicked, add an `onClick` handler to the target element:

```tsx
import { useState } from 'react';
import { ActionIcon } from '@mantine/core';
import { EmojiPickerPopover } from '@mantine/emoji';
import { emojiData } from './emoji-data';

function Demo() {
  const [opened, setOpened] = useState(false);

  return (
    <EmojiPickerPopover
      data={emojiData}
      opened={opened}
      onOpenedChange={setOpened}
    >
      <ActionIcon variant="default" size="lg" onClick={() => setOpened((o) => !o)}>
        ☺
      </ActionIcon>
    </EmojiPickerPopover>
  );
}
```

## Popover props

Use the `popoverProps` prop to pass props to the underlying `Popover` component:

```tsx
import { ActionIcon } from '@mantine/core';
import { EmojiPickerPopover } from '@mantine/emoji';
import { emojiData } from './emoji-data';

function Demo() {
  return (
    <EmojiPickerPopover
      data={emojiData}
      popoverProps={{ position: 'bottom-end', shadow: 'md', offset: 8 }}
    >
      <ActionIcon variant="default" size="lg">☺</ActionIcon>
    </EmojiPickerPopover>
  );
}
```


#### Props

**EmojiPickerPopover props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autoFocus | boolean | - | Determines whether the search input is focused on mount |
| categoryLabels | Record<string, string> | - | Override category labels by category id |
| children | React.ReactNode | required | Popover target element |
| closeOnSelect | boolean | - | Determines whether the popover closes after emoji is selected |
| columns | number | - | Number of emoji columns |
| data | EmojiPickerData | required | Emoji data object, use `emojiMartAdapter` or `emojibaseAdapter` to convert data |
| defaultOpened | boolean | - | Default popover opened state for uncontrolled mode |
| defaultSkinTone | number | - | Default skin tone value for uncontrolled state |
| emojiSize | number | - | Custom emoji button size in px, overrides size-based value |
| emptySearchContent | React.ReactNode | - | Content displayed when search yields no results |
| labels | EmojiPickerLabels | - | Override UI labels (search placeholder, no results text, etc.) |
| onEmojiSelect | (emoji: EmojiPickerEmoji) => void | - | Called when an emoji is selected |
| onOpenedChange | (opened: boolean) => void | - | Called when popover opened state changes |
| onSearchChange | (value: string) => void | - | Called when search value changes |
| onSkinToneChange | (skinTone: number) => void | - | Called when skin tone changes |
| opened | boolean | - | Controlled popover opened state |
| popoverProps | Omit<PopoverProps, "onChange" \| "children" \| "opened" \| "defaultOpened"> | - | Props passed to the `Popover` component, use `opened`, `defaultOpened` and `onOpenedChange` props to control opened state |
| scrollAreaProps | ScrollAreaProps | - | Props passed to the internal `ScrollArea` component |
| searchInputProps | InputProps | - | Props passed to the search `Input` component |
| searchPlaceholder | string | - | Search input placeholder |
| searchValue | string | - | Controlled search input value |
| size | MantineSize | - | Controls size of all inner elements |
| skinTone | number | - | Controlled skin tone value (0–5) |
| withCategoryNav | boolean | - | Determines whether the category navigation bar is displayed |
| withPreview | boolean | - | Determines whether the emoji preview area is displayed |
| withSearch | boolean | - | Determines whether the search input is displayed |
| withSkinToneSelector | boolean | - | Determines whether the skin tone selector is displayed |
| withUnsupportedDetection | boolean | - | Determines whether unsupported emojis are filtered out |