@liveblocks/react-ui/dist/components/internal/EmojiPicker.js

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as PopoverPrimitive from '@radix-ui/react-popover';
export { PopoverTrigger as EmojiPickerTrigger } from '@radix-ui/react-popover';
import { EmojiPicker as EmojiPicker$1 } from 'frimousse';
import { forwardRef, useState, useCallback } from 'react';
import { useLiveblocksUIConfig } from '../../config.js';
import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.js';
import { SearchIcon } from '../../icons/Search.js';
import { SpinnerIcon } from '../../icons/Spinner.js';
import { useOverrides } from '../../overrides.js';
import { classNames } from '../../utils/class-names.js';
import { Emoji } from './Emoji.js';
import { Tooltip } from './Tooltip.js';

function EmojiPickerListEmoji({
  emoji,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx("button", {
    className: classNames("lb-emoji-picker-emoji", className),
    ...props,
    children: /* @__PURE__ */ jsx(Emoji, {
      emoji: emoji.emoji
    })
  });
}
function EmojiPickerListRow({
  children,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx("div", {
    className: classNames("lb-emoji-picker-row", className),
    ...props,
    children
  });
}
function EmojiPickerListCategoryHeader({
  category,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx("div", {
    className: classNames("lb-emoji-picker-category-header", className),
    ...props,
    children: /* @__PURE__ */ jsx("span", {
      className: "lb-emoji-picker-category-header-title",
      children: category.label
    })
  });
}
const EmojiPicker = forwardRef(
  ({ onEmojiSelect, onOpenChange, children, className, ...props }, forwardedRef) => {
    const [isOpen, setOpen] = useState(false);
    const { portalContainer, emojibaseUrl } = useLiveblocksUIConfig();
    const $ = useOverrides();
    const handleOpenChange = useCallback(
      (isOpen2) => {
        setOpen(isOpen2);
        onOpenChange?.(isOpen2);
      },
      [onOpenChange]
    );
    const handleEmojiSelect = useCallback(
      ({ emoji }) => {
        setOpen(false);
        onEmojiSelect?.(emoji);
      },
      [onEmojiSelect]
    );
    const stopPropagation = useCallback((event) => {
      event.stopPropagation();
    }, []);
    return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
      open: isOpen,
      onOpenChange: handleOpenChange,
      children: [
        children,
        /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
          container: portalContainer,
          children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
            side: "top",
            align: "center",
            sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
            collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
            className: classNames(
              "lb-root lb-portal lb-elevation lb-emoji-picker",
              className
            ),
            ...props,
            ref: forwardedRef,
            asChild: true,
            children: /* @__PURE__ */ jsxs(EmojiPicker$1.Root, {
              onEmojiSelect: handleEmojiSelect,
              locale: $.locale,
              columns: 10,
              emojiVersion: 15.1,
              emojibaseUrl,
              onClick: stopPropagation,
              children: [
                /* @__PURE__ */ jsx("div", {
                  className: "lb-emoji-picker-header",
                  children: /* @__PURE__ */ jsxs("div", {
                    className: "lb-emoji-picker-search-container",
                    children: [
                      /* @__PURE__ */ jsx(EmojiPicker$1.Search, {
                        className: "lb-emoji-picker-search",
                        placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
                        autoFocus: true
                      }),
                      /* @__PURE__ */ jsx(SearchIcon, {})
                    ]
                  })
                }),
                /* @__PURE__ */ jsxs(EmojiPicker$1.Viewport, {
                  className: "lb-emoji-picker-content",
                  children: [
                    /* @__PURE__ */ jsx(EmojiPicker$1.Loading, {
                      className: "lb-loading lb-emoji-picker-loading",
                      children: /* @__PURE__ */ jsx(SpinnerIcon, {})
                    }),
                    /* @__PURE__ */ jsx(EmojiPicker$1.Empty, {
                      className: "lb-empty lb-emoji-picker-empty",
                      children: $.EMOJI_PICKER_EMPTY
                    }),
                    /* @__PURE__ */ jsx(EmojiPicker$1.List, {
                      className: "lb-emoji-picker-list",
                      components: {
                        CategoryHeader: EmojiPickerListCategoryHeader,
                        Row: EmojiPickerListRow,
                        Emoji: EmojiPickerListEmoji
                      }
                    })
                  ]
                }),
                /* @__PURE__ */ jsxs("div", {
                  className: "lb-emoji-picker-footer",
                  children: [
                    /* @__PURE__ */ jsx(EmojiPicker$1.ActiveEmoji, {
                      children: ({ emoji }) => emoji ? /* @__PURE__ */ jsxs(Fragment, {
                        children: [
                          /* @__PURE__ */ jsx("div", {
                            className: "lb-emoji-picker-active-emoji",
                            children: emoji.emoji
                          }),
                          /* @__PURE__ */ jsx("span", {
                            className: "lb-emoji-picker-active-emoji-label",
                            children: emoji.label
                          })
                        ]
                      }) : /* @__PURE__ */ jsx("span", {
                        className: "lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder",
                        children: "Select an emoji\u2026"
                      })
                    }),
                    /* @__PURE__ */ jsx(Tooltip, {
                      content: $.EMOJI_PICKER_CHANGE_SKIN_TONE,
                      children: /* @__PURE__ */ jsx(EmojiPicker$1.SkinToneSelector, {
                        className: "lb-button lb-emoji-picker-skin-tone-selector"
                      })
                    })
                  ]
                })
              ]
            })
          })
        })
      ]
    });
  }
);

export { EmojiPicker };
//# sourceMappingURL=EmojiPicker.js.map