@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 { cn } from '../../utils/cn.js';
import { Emoji } from './Emoji.js';
import { Tooltip } from './Tooltip.js';

function EmojiPickerListEmoji({
  emoji,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx("button", { className: cn("lb-emoji-picker-emoji", className), ...props, children: /* @__PURE__ */ jsx(Emoji, { emoji: emoji.emoji }) });
}
function EmojiPickerListRow({
  children,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx("div", { className: cn("lb-emoji-picker-row", className), ...props, children });
}
function EmojiPickerListCategoryHeader({
  category,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn("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: cn(
            "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