@liveblocks/react-ui 2.14.0 → 2.15.0

package/dist/components/internal/EmojiPicker.js

@@ -1,7 +1,8 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var PopoverPrimitive = require('@radix-ui/react-popover');
-var React = require('react');
+var react = require('react');
 var config = require('../../config.js');
 var constants = require('../../constants.js');
 var Search = require('../../icons/Search.js');
@@ -34,20 +35,22 @@ function EmojiPickerLoading({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-loading lb-emoji-picker-loading", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {})
+  });
 }
 function EmojiPickerEmpty({
   className,
   ...props
 }) {
   const $ = overrides.useOverrides();
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-empty lb-emoji-picker-empty", className),
-    ...props
-  }, $.EMOJI_PICKER_EMPTY);
+    ...props,
+    children: $.EMOJI_PICKER_EMPTY
+  });
 }
 function EmojiPickerError({
   error,
@@ -55,32 +58,36 @@ function EmojiPickerError({
   ...props
 }) {
   const $ = overrides.useOverrides();
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-error lb-emoji-picker-error", className),
-    ...props
-  }, $.EMOJI_PICKER_ERROR(error));
+    ...props,
+    children: $.EMOJI_PICKER_ERROR(error)
+  });
 }
 function EmojiPickerCategoryHeader({
   category,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-emoji-picker-category-header", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "lb-emoji-picker-category-header-title"
-  }, category));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+      className: "lb-emoji-picker-category-header-title",
+      children: category
+    })
+  });
 }
 function EmojiPickerGrid({
   children,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-emoji-picker-grid", className),
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
 function EmojiPickerRow({
   attributes,
@@ -88,93 +95,110 @@ function EmojiPickerRow({
   className,
   ...props
 }) {
-  const isFirstRow = React.useMemo(
+  const isFirstRow = react.useMemo(
     () => attributes.categoryRowIndex === 0,
     [attributes.categoryRowIndex]
   );
-  const isLastRow = React.useMemo(
+  const isLastRow = react.useMemo(
     () => attributes.categoryRowIndex === attributes.categoryRowsCount - 1,
     [attributes.categoryRowIndex, attributes.categoryRowsCount]
   );
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-emoji-picker-row", className),
     "data-first": isFirstRow ? "" : void 0,
     "data-last": isLastRow ? "" : void 0,
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
 function EmojiPickerEmoji({
   emoji,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement("button", {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
     className: classNames.classNames("lb-emoji-picker-emoji", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement(Emoji.Emoji, {
-    emoji
-  }));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
+      emoji
+    })
+  });
 }
-const EmojiPicker = React.forwardRef(
+const EmojiPicker = react.forwardRef(
   ({ onEmojiSelect, onOpenChange, children, className, ...props }, forwardedRef) => {
-    const [isOpen, setOpen] = React.useState(false);
+    const [isOpen, setOpen] = react.useState(false);
     const { portalContainer } = config.useLiveblocksUIConfig();
     const $ = overrides.useOverrides();
-    const handleOpenChange = React.useCallback(
+    const handleOpenChange = react.useCallback(
       (isOpen2) => {
         setOpen(isOpen2);
         onOpenChange?.(isOpen2);
       },
       [onOpenChange]
     );
-    const handleEmojiSelect = React.useCallback(
+    const handleEmojiSelect = react.useCallback(
       (emoji) => {
         setOpen(false);
         onEmojiSelect?.(emoji);
       },
       [onEmojiSelect]
     );
-    return /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Root, {
+    return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, {
       open: isOpen,
-      onOpenChange: handleOpenChange
-    }, children, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Portal, {
-      container: portalContainer
-    }, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Content, {
-      side: "top",
-      align: "center",
-      sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
-      collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
-      className: classNames.classNames(
-        "lb-root lb-portal lb-elevation lb-emoji-picker",
-        className
-      ),
-      ...props,
-      ref: forwardedRef
-    }, /* @__PURE__ */ React.createElement(index.Root, {
-      onEmojiSelect: handleEmojiSelect,
-      locale: $.locale
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-emoji-picker-header"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-emoji-picker-search-container"
-    }, /* @__PURE__ */ React.createElement(index.Search, {
-      className: "lb-emoji-picker-search",
-      placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
-      autoFocus: true
-    }), /* @__PURE__ */ React.createElement(Search.SearchIcon, {
-      className: "lb-emoji-picker-search-icon"
-    }))), /* @__PURE__ */ React.createElement(index.Content, {
-      className: "lb-emoji-picker-content",
-      components: {
-        Loading: EmojiPickerLoading,
-        Empty: EmojiPickerEmpty,
-        Error: EmojiPickerError,
-        CategoryHeader: EmojiPickerCategoryHeader,
-        Grid: EmojiPickerGrid,
-        Row: EmojiPickerRow,
-        Emoji: EmojiPickerEmoji
-      }
-    })))));
+      onOpenChange: handleOpenChange,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, {
+          container: portalContainer,
+          children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, {
+            side: "top",
+            align: "center",
+            sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+            collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+            className: classNames.classNames(
+              "lb-root lb-portal lb-elevation lb-emoji-picker",
+              className
+            ),
+            ...props,
+            ref: forwardedRef,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(index.Root, {
+              onEmojiSelect: handleEmojiSelect,
+              locale: $.locale,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  className: "lb-emoji-picker-header",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    className: "lb-emoji-picker-search-container",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(index.Search, {
+                        className: "lb-emoji-picker-search",
+                        placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
+                        autoFocus: true
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {
+                        className: "lb-emoji-picker-search-icon"
+                      })
+                    ]
+                  })
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx(index.Content, {
+                  className: "lb-emoji-picker-content",
+                  components: {
+                    Loading: EmojiPickerLoading,
+                    Empty: EmojiPickerEmpty,
+                    Error: EmojiPickerError,
+                    CategoryHeader: EmojiPickerCategoryHeader,
+                    Grid: EmojiPickerGrid,
+                    Row: EmojiPickerRow,
+                    Emoji: EmojiPickerEmoji
+                  }
+                })
+              ]
+            })
+          })
+        })
+      ]
+    });
   }
 );
 

package/dist/components/internal/EmojiPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport * as EmojiPickerPrimitive from \"../../primitives/EmojiPicker\";\nimport type {\n  EmojiPickerContentCategoryHeaderProps,\n  EmojiPickerContentEmojiProps,\n  EmojiPickerContentEmptyProps,\n  EmojiPickerContentErrorProps,\n  EmojiPickerContentGridProps,\n  EmojiPickerContentLoadingProps,\n  EmojiPickerContentRowProps,\n} from \"../../primitives/EmojiPicker/types\";\nimport { classNames } from \"../../utils/class-names\";\nimport { Emoji } from \"./Emoji\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n  onOpenChange?: (open: boolean) => void;\n  onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerLoading({\n  className,\n  ...props\n}: EmojiPickerContentLoadingProps) {\n  return (\n    <div\n      className={classNames(\"lb-loading lb-emoji-picker-loading\", className)}\n      {...props}\n    >\n      <SpinnerIcon />\n    </div>\n  );\n}\n\nfunction EmojiPickerEmpty({\n  className,\n  ...props\n}: EmojiPickerContentEmptyProps) {\n  const $ = useOverrides();\n\n  return (\n    <div\n      className={classNames(\"lb-empty lb-emoji-picker-empty\", className)}\n      {...props}\n    >\n      {$.EMOJI_PICKER_EMPTY}\n    </div>\n  );\n}\n\nfunction EmojiPickerError({\n  error,\n  className,\n  ...props\n}: EmojiPickerContentErrorProps) {\n  const $ = useOverrides();\n\n  return (\n    <div\n      className={classNames(\"lb-error lb-emoji-picker-error\", className)}\n      {...props}\n    >\n      {$.EMOJI_PICKER_ERROR(error)}\n    </div>\n  );\n}\n\nfunction EmojiPickerCategoryHeader({\n  category,\n  className,\n  ...props\n}: EmojiPickerContentCategoryHeaderProps) {\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-category-header\", className)}\n      {...props}\n    >\n      <span className=\"lb-emoji-picker-category-header-title\">{category}</span>\n    </div>\n  );\n}\n\nfunction EmojiPickerGrid({\n  children,\n  className,\n  ...props\n}: EmojiPickerContentGridProps) {\n  return (\n    <div className={classNames(\"lb-emoji-picker-grid\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerRow({\n  attributes,\n  children,\n  className,\n  ...props\n}: EmojiPickerContentRowProps) {\n  const isFirstRow = useMemo(\n    () => attributes.categoryRowIndex === 0,\n    [attributes.categoryRowIndex]\n  );\n  const isLastRow = useMemo(\n    () => attributes.categoryRowIndex === attributes.categoryRowsCount - 1,\n    [attributes.categoryRowIndex, attributes.categoryRowsCount]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-row\", className)}\n      data-first={isFirstRow ? \"\" : undefined}\n      data-last={isLastRow ? \"\" : undefined}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerEmoji({\n  emoji,\n  className,\n  ...props\n}: EmojiPickerContentEmojiProps) {\n  return (\n    <button\n      className={classNames(\"lb-emoji-picker-emoji\", className)}\n      {...props}\n    >\n      <Emoji emoji={emoji} />\n    </button>\n  );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n  (\n    { onEmojiSelect, onOpenChange, children, className, ...props },\n    forwardedRef\n  ) => {\n    const [isOpen, setOpen] = useState(false);\n    const { portalContainer } = useLiveblocksUIConfig();\n    const $ = useOverrides();\n\n    const handleOpenChange = useCallback(\n      (isOpen: boolean) => {\n        setOpen(isOpen);\n        onOpenChange?.(isOpen);\n      },\n      [onOpenChange]\n    );\n\n    const handleEmojiSelect = useCallback(\n      (emoji: string) => {\n        setOpen(false);\n        onEmojiSelect?.(emoji);\n      },\n      [onEmojiSelect]\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            className={classNames(\n              \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n              className\n            )}\n            {...props}\n            ref={forwardedRef}\n          >\n            <EmojiPickerPrimitive.Root\n              onEmojiSelect={handleEmojiSelect}\n              locale={$.locale}\n            >\n              <div className=\"lb-emoji-picker-header\">\n                <div className=\"lb-emoji-picker-search-container\">\n                  <EmojiPickerPrimitive.Search\n                    className=\"lb-emoji-picker-search\"\n                    placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n                    autoFocus\n                  />\n                  <SearchIcon className=\"lb-emoji-picker-search-icon\" />\n                </div>\n              </div>\n              <EmojiPickerPrimitive.Content\n                className=\"lb-emoji-picker-content\"\n                components={{\n                  Loading: EmojiPickerLoading,\n                  Empty: EmojiPickerEmpty,\n                  Error: EmojiPickerError,\n                  CategoryHeader: EmojiPickerCategoryHeader,\n                  Grid: EmojiPickerGrid,\n                  Row: EmojiPickerRow,\n                  Emoji: EmojiPickerEmoji,\n                }}\n              />\n            </EmojiPickerPrimitive.Root>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["classNames","SpinnerIcon","useOverrides","useMemo","Emoji","forwardRef","useState","useLiveblocksUIConfig","useCallback","isOpen","PopoverPrimitive","FLOATING_ELEMENT_SIDE_OFFSET","FLOATING_ELEMENT_COLLISION_PADDING","EmojiPickerPrimitive.Root","EmojiPickerPrimitive.Search","SearchIcon","EmojiPickerPrimitive.Content"],"mappings":"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"}
+{"version":3,"file":"EmojiPicker.js","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport * as EmojiPickerPrimitive from \"../../primitives/EmojiPicker\";\nimport type {\n  EmojiPickerContentCategoryHeaderProps,\n  EmojiPickerContentEmojiProps,\n  EmojiPickerContentEmptyProps,\n  EmojiPickerContentErrorProps,\n  EmojiPickerContentGridProps,\n  EmojiPickerContentLoadingProps,\n  EmojiPickerContentRowProps,\n} from \"../../primitives/EmojiPicker/types\";\nimport { classNames } from \"../../utils/class-names\";\nimport { Emoji } from \"./Emoji\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n  onOpenChange?: (open: boolean) => void;\n  onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerLoading({\n  className,\n  ...props\n}: EmojiPickerContentLoadingProps) {\n  return (\n    <div\n      className={classNames(\"lb-loading lb-emoji-picker-loading\", className)}\n      {...props}\n    >\n      <SpinnerIcon />\n    </div>\n  );\n}\n\nfunction EmojiPickerEmpty({\n  className,\n  ...props\n}: EmojiPickerContentEmptyProps) {\n  const $ = useOverrides();\n\n  return (\n    <div\n      className={classNames(\"lb-empty lb-emoji-picker-empty\", className)}\n      {...props}\n    >\n      {$.EMOJI_PICKER_EMPTY}\n    </div>\n  );\n}\n\nfunction EmojiPickerError({\n  error,\n  className,\n  ...props\n}: EmojiPickerContentErrorProps) {\n  const $ = useOverrides();\n\n  return (\n    <div\n      className={classNames(\"lb-error lb-emoji-picker-error\", className)}\n      {...props}\n    >\n      {$.EMOJI_PICKER_ERROR(error)}\n    </div>\n  );\n}\n\nfunction EmojiPickerCategoryHeader({\n  category,\n  className,\n  ...props\n}: EmojiPickerContentCategoryHeaderProps) {\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-category-header\", className)}\n      {...props}\n    >\n      <span className=\"lb-emoji-picker-category-header-title\">{category}</span>\n    </div>\n  );\n}\n\nfunction EmojiPickerGrid({\n  children,\n  className,\n  ...props\n}: EmojiPickerContentGridProps) {\n  return (\n    <div className={classNames(\"lb-emoji-picker-grid\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerRow({\n  attributes,\n  children,\n  className,\n  ...props\n}: EmojiPickerContentRowProps) {\n  const isFirstRow = useMemo(\n    () => attributes.categoryRowIndex === 0,\n    [attributes.categoryRowIndex]\n  );\n  const isLastRow = useMemo(\n    () => attributes.categoryRowIndex === attributes.categoryRowsCount - 1,\n    [attributes.categoryRowIndex, attributes.categoryRowsCount]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-row\", className)}\n      data-first={isFirstRow ? \"\" : undefined}\n      data-last={isLastRow ? \"\" : undefined}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerEmoji({\n  emoji,\n  className,\n  ...props\n}: EmojiPickerContentEmojiProps) {\n  return (\n    <button\n      className={classNames(\"lb-emoji-picker-emoji\", className)}\n      {...props}\n    >\n      <Emoji emoji={emoji} />\n    </button>\n  );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n  (\n    { onEmojiSelect, onOpenChange, children, className, ...props },\n    forwardedRef\n  ) => {\n    const [isOpen, setOpen] = useState(false);\n    const { portalContainer } = useLiveblocksUIConfig();\n    const $ = useOverrides();\n\n    const handleOpenChange = useCallback(\n      (isOpen: boolean) => {\n        setOpen(isOpen);\n        onOpenChange?.(isOpen);\n      },\n      [onOpenChange]\n    );\n\n    const handleEmojiSelect = useCallback(\n      (emoji: string) => {\n        setOpen(false);\n        onEmojiSelect?.(emoji);\n      },\n      [onEmojiSelect]\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            className={classNames(\n              \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n              className\n            )}\n            {...props}\n            ref={forwardedRef}\n          >\n            <EmojiPickerPrimitive.Root\n              onEmojiSelect={handleEmojiSelect}\n              locale={$.locale}\n            >\n              <div className=\"lb-emoji-picker-header\">\n                <div className=\"lb-emoji-picker-search-container\">\n                  <EmojiPickerPrimitive.Search\n                    className=\"lb-emoji-picker-search\"\n                    placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n                    autoFocus\n                  />\n                  <SearchIcon className=\"lb-emoji-picker-search-icon\" />\n                </div>\n              </div>\n              <EmojiPickerPrimitive.Content\n                className=\"lb-emoji-picker-content\"\n                components={{\n                  Loading: EmojiPickerLoading,\n                  Empty: EmojiPickerEmpty,\n                  Error: EmojiPickerError,\n                  CategoryHeader: EmojiPickerCategoryHeader,\n                  Grid: EmojiPickerGrid,\n                  Row: EmojiPickerRow,\n                  Emoji: EmojiPickerEmoji,\n                }}\n              />\n            </EmojiPickerPrimitive.Root>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["jsx","classNames","SpinnerIcon","useOverrides","useMemo","Emoji","forwardRef","useState","useLiveblocksUIConfig","useCallback","isOpen","jsxs","PopoverPrimitive","FLOATING_ELEMENT_SIDE_OFFSET","FLOATING_ELEMENT_COLLISION_PADDING","EmojiPickerPrimitive.Root","EmojiPickerPrimitive.Search","SearchIcon","EmojiPickerPrimitive.Content"],"mappings":"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"}

package/dist/components/internal/EmojiPicker.mjs

@@ -1,6 +1,7 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 export { PopoverTrigger as EmojiPickerTrigger } from '@radix-ui/react-popover';
-import React__default, { forwardRef, useState, useCallback, useMemo } from 'react';
+import { useMemo, forwardRef, useState, useCallback } from 'react';
 import { useLiveblocksUIConfig } from '../../config.mjs';
 import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.mjs';
 import { SearchIcon } from '../../icons/Search.mjs';
@@ -14,20 +15,22 @@ function EmojiPickerLoading({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: classNames("lb-loading lb-emoji-picker-loading", className),
-    ...props
-  }, /* @__PURE__ */ React__default.createElement(SpinnerIcon, null));
+    ...props,
+    children: /* @__PURE__ */ jsx(SpinnerIcon, {})
+  });
 }
 function EmojiPickerEmpty({
   className,
   ...props
 }) {
   const $ = useOverrides();
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: classNames("lb-empty lb-emoji-picker-empty", className),
-    ...props
-  }, $.EMOJI_PICKER_EMPTY);
+    ...props,
+    children: $.EMOJI_PICKER_EMPTY
+  });
 }
 function EmojiPickerError({
   error,
@@ -35,32 +38,36 @@ function EmojiPickerError({
   ...props
 }) {
   const $ = useOverrides();
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: classNames("lb-error lb-emoji-picker-error", className),
-    ...props
-  }, $.EMOJI_PICKER_ERROR(error));
+    ...props,
+    children: $.EMOJI_PICKER_ERROR(error)
+  });
 }
 function EmojiPickerCategoryHeader({
   category,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: classNames("lb-emoji-picker-category-header", className),
-    ...props
-  }, /* @__PURE__ */ React__default.createElement("span", {
-    className: "lb-emoji-picker-category-header-title"
-  }, category));
+    ...props,
+    children: /* @__PURE__ */ jsx("span", {
+      className: "lb-emoji-picker-category-header-title",
+      children: category
+    })
+  });
 }
 function EmojiPickerGrid({
   children,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: classNames("lb-emoji-picker-grid", className),
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
 function EmojiPickerRow({
   attributes,
@@ -76,24 +83,26 @@ function EmojiPickerRow({
     () => attributes.categoryRowIndex === attributes.categoryRowsCount - 1,
     [attributes.categoryRowIndex, attributes.categoryRowsCount]
   );
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: classNames("lb-emoji-picker-row", className),
     "data-first": isFirstRow ? "" : void 0,
     "data-last": isLastRow ? "" : void 0,
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
 function EmojiPickerEmoji({
   emoji,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React__default.createElement("button", {
+  return /* @__PURE__ */ jsx("button", {
     className: classNames("lb-emoji-picker-emoji", className),
-    ...props
-  }, /* @__PURE__ */ React__default.createElement(Emoji, {
-    emoji
-  }));
+    ...props,
+    children: /* @__PURE__ */ jsx(Emoji, {
+      emoji
+    })
+  });
 }
 const EmojiPicker = forwardRef(
   ({ onEmojiSelect, onOpenChange, children, className, ...props }, forwardedRef) => {
@@ -114,47 +123,62 @@ const EmojiPicker = forwardRef(
       },
       [onEmojiSelect]
     );
-    return /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Root, {
+    return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
       open: isOpen,
-      onOpenChange: handleOpenChange
-    }, children, /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Portal, {
-      container: portalContainer
-    }, /* @__PURE__ */ React__default.createElement(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
-    }, /* @__PURE__ */ React__default.createElement(EmojiPickerRoot, {
-      onEmojiSelect: handleEmojiSelect,
-      locale: $.locale
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-emoji-picker-header"
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-emoji-picker-search-container"
-    }, /* @__PURE__ */ React__default.createElement(EmojiPickerSearch, {
-      className: "lb-emoji-picker-search",
-      placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
-      autoFocus: true
-    }), /* @__PURE__ */ React__default.createElement(SearchIcon, {
-      className: "lb-emoji-picker-search-icon"
-    }))), /* @__PURE__ */ React__default.createElement(EmojiPickerContent, {
-      className: "lb-emoji-picker-content",
-      components: {
-        Loading: EmojiPickerLoading,
-        Empty: EmojiPickerEmpty,
-        Error: EmojiPickerError,
-        CategoryHeader: EmojiPickerCategoryHeader,
-        Grid: EmojiPickerGrid,
-        Row: EmojiPickerRow,
-        Emoji: EmojiPickerEmoji
-      }
-    })))));
+      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,
+            children: /* @__PURE__ */ jsxs(EmojiPickerRoot, {
+              onEmojiSelect: handleEmojiSelect,
+              locale: $.locale,
+              children: [
+                /* @__PURE__ */ jsx("div", {
+                  className: "lb-emoji-picker-header",
+                  children: /* @__PURE__ */ jsxs("div", {
+                    className: "lb-emoji-picker-search-container",
+                    children: [
+                      /* @__PURE__ */ jsx(EmojiPickerSearch, {
+                        className: "lb-emoji-picker-search",
+                        placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
+                        autoFocus: true
+                      }),
+                      /* @__PURE__ */ jsx(SearchIcon, {
+                        className: "lb-emoji-picker-search-icon"
+                      })
+                    ]
+                  })
+                }),
+                /* @__PURE__ */ jsx(EmojiPickerContent, {
+                  className: "lb-emoji-picker-content",
+                  components: {
+                    Loading: EmojiPickerLoading,
+                    Empty: EmojiPickerEmpty,
+                    Error: EmojiPickerError,
+                    CategoryHeader: EmojiPickerCategoryHeader,
+                    Grid: EmojiPickerGrid,
+                    Row: EmojiPickerRow,
+                    Emoji: EmojiPickerEmoji
+                  }
+                })
+              ]
+            })
+          })
+        })
+      ]
+    });
   }
 );
 

package/dist/components/internal/EmojiPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.mjs","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport * as EmojiPickerPrimitive from \"../../primitives/EmojiPicker\";\nimport type {\n  EmojiPickerContentCategoryHeaderProps,\n  EmojiPickerContentEmojiProps,\n  EmojiPickerContentEmptyProps,\n  EmojiPickerContentErrorProps,\n  EmojiPickerContentGridProps,\n  EmojiPickerContentLoadingProps,\n  EmojiPickerContentRowProps,\n} from \"../../primitives/EmojiPicker/types\";\nimport { classNames } from \"../../utils/class-names\";\nimport { Emoji } from \"./Emoji\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n  onOpenChange?: (open: boolean) => void;\n  onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerLoading({\n  className,\n  ...props\n}: EmojiPickerContentLoadingProps) {\n  return (\n    <div\n      className={classNames(\"lb-loading lb-emoji-picker-loading\", className)}\n      {...props}\n    >\n      <SpinnerIcon />\n    </div>\n  );\n}\n\nfunction EmojiPickerEmpty({\n  className,\n  ...props\n}: EmojiPickerContentEmptyProps) {\n  const $ = useOverrides();\n\n  return (\n    <div\n      className={classNames(\"lb-empty lb-emoji-picker-empty\", className)}\n      {...props}\n    >\n      {$.EMOJI_PICKER_EMPTY}\n    </div>\n  );\n}\n\nfunction EmojiPickerError({\n  error,\n  className,\n  ...props\n}: EmojiPickerContentErrorProps) {\n  const $ = useOverrides();\n\n  return (\n    <div\n      className={classNames(\"lb-error lb-emoji-picker-error\", className)}\n      {...props}\n    >\n      {$.EMOJI_PICKER_ERROR(error)}\n    </div>\n  );\n}\n\nfunction EmojiPickerCategoryHeader({\n  category,\n  className,\n  ...props\n}: EmojiPickerContentCategoryHeaderProps) {\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-category-header\", className)}\n      {...props}\n    >\n      <span className=\"lb-emoji-picker-category-header-title\">{category}</span>\n    </div>\n  );\n}\n\nfunction EmojiPickerGrid({\n  children,\n  className,\n  ...props\n}: EmojiPickerContentGridProps) {\n  return (\n    <div className={classNames(\"lb-emoji-picker-grid\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerRow({\n  attributes,\n  children,\n  className,\n  ...props\n}: EmojiPickerContentRowProps) {\n  const isFirstRow = useMemo(\n    () => attributes.categoryRowIndex === 0,\n    [attributes.categoryRowIndex]\n  );\n  const isLastRow = useMemo(\n    () => attributes.categoryRowIndex === attributes.categoryRowsCount - 1,\n    [attributes.categoryRowIndex, attributes.categoryRowsCount]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-row\", className)}\n      data-first={isFirstRow ? \"\" : undefined}\n      data-last={isLastRow ? \"\" : undefined}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerEmoji({\n  emoji,\n  className,\n  ...props\n}: EmojiPickerContentEmojiProps) {\n  return (\n    <button\n      className={classNames(\"lb-emoji-picker-emoji\", className)}\n      {...props}\n    >\n      <Emoji emoji={emoji} />\n    </button>\n  );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n  (\n    { onEmojiSelect, onOpenChange, children, className, ...props },\n    forwardedRef\n  ) => {\n    const [isOpen, setOpen] = useState(false);\n    const { portalContainer } = useLiveblocksUIConfig();\n    const $ = useOverrides();\n\n    const handleOpenChange = useCallback(\n      (isOpen: boolean) => {\n        setOpen(isOpen);\n        onOpenChange?.(isOpen);\n      },\n      [onOpenChange]\n    );\n\n    const handleEmojiSelect = useCallback(\n      (emoji: string) => {\n        setOpen(false);\n        onEmojiSelect?.(emoji);\n      },\n      [onEmojiSelect]\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            className={classNames(\n              \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n              className\n            )}\n            {...props}\n            ref={forwardedRef}\n          >\n            <EmojiPickerPrimitive.Root\n              onEmojiSelect={handleEmojiSelect}\n              locale={$.locale}\n            >\n              <div className=\"lb-emoji-picker-header\">\n                <div className=\"lb-emoji-picker-search-container\">\n                  <EmojiPickerPrimitive.Search\n                    className=\"lb-emoji-picker-search\"\n                    placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n                    autoFocus\n                  />\n                  <SearchIcon className=\"lb-emoji-picker-search-icon\" />\n                </div>\n              </div>\n              <EmojiPickerPrimitive.Content\n                className=\"lb-emoji-picker-content\"\n                components={{\n                  Loading: EmojiPickerLoading,\n                  Empty: EmojiPickerEmpty,\n                  Error: EmojiPickerError,\n                  CategoryHeader: EmojiPickerCategoryHeader,\n                  Grid: EmojiPickerGrid,\n                  Row: EmojiPickerRow,\n                  Emoji: EmojiPickerEmoji,\n                }}\n              />\n            </EmojiPickerPrimitive.Root>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["React","isOpen","EmojiPickerPrimitive.Root","EmojiPickerPrimitive.Search","EmojiPickerPrimitive.Content"],"mappings":";;;;;;;;;;;;AA8BA,SAAS,kBAAmB,CAAA;AAAA,EAC1B,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAmC,EAAA;AACjC,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,UAAW,CAAA,oCAAA,EAAsC,SAAS,CAAA;AAAA,IACpE,GAAG,KAAA;AAAA,GAEJ,kBAAAA,cAAA,CAAA,aAAA,CAAC,iBAAY,CACf,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,gBAAiB,CAAA;AAAA,EACxB,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAiC,EAAA;AAC/B,EAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AAEvB,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,UAAW,CAAA,gCAAA,EAAkC,SAAS,CAAA;AAAA,IAChE,GAAG,KAAA;AAAA,GAAA,EAEH,EAAE,kBACL,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,gBAAiB,CAAA;AAAA,EACxB,KAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAiC,EAAA;AAC/B,EAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AAEvB,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,UAAW,CAAA,gCAAA,EAAkC,SAAS,CAAA;AAAA,IAChE,GAAG,KAAA;AAAA,GAEH,EAAA,CAAA,CAAE,kBAAmB,CAAA,KAAK,CAC7B,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,yBAA0B,CAAA;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA0C,EAAA;AACxC,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,UAAW,CAAA,iCAAA,EAAmC,SAAS,CAAA;AAAA,IACjE,GAAG,KAAA;AAAA,GAAA,kBAEHA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAU,EAAA,uCAAA;AAAA,GAAA,EAAyC,QAAS,CACpE,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,eAAgB,CAAA;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAgC,EAAA;AAC9B,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,UAAW,CAAA,sBAAA,EAAwB,SAAS,CAAA;AAAA,IAAI,GAAG,KAAA;AAAA,GAAA,EAChE,QACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,cAAe,CAAA;AAAA,EACtB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA+B,EAAA;AAC7B,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,WAAW,gBAAqB,KAAA,CAAA;AAAA,IACtC,CAAC,WAAW,gBAAgB,CAAA;AAAA,GAC9B,CAAA;AACA,EAAA,MAAM,SAAY,GAAA,OAAA;AAAA,IAChB,MAAM,UAAA,CAAW,gBAAqB,KAAA,UAAA,CAAW,iBAAoB,GAAA,CAAA;AAAA,IACrE,CAAC,UAAA,CAAW,gBAAkB,EAAA,UAAA,CAAW,iBAAiB,CAAA;AAAA,GAC5D,CAAA;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,UAAW,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAAA,IACtD,YAAA,EAAY,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IAC9B,WAAA,EAAW,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,IAC3B,GAAG,KAAA;AAAA,GAAA,EAEH,QACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,gBAAiB,CAAA;AAAA,EACxB,KAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAiC,EAAA;AAC/B,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACC,SAAA,EAAW,UAAW,CAAA,uBAAA,EAAyB,SAAS,CAAA;AAAA,IACvD,GAAG,KAAA;AAAA,GAAA,kBAEHA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,KAAA;AAAA,GAAc,CACvB,CAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,CACE,EAAE,aAAe,EAAA,YAAA,EAAc,UAAU,SAAc,EAAA,GAAA,KAAA,IACvD,YACG,KAAA;AACH,IAAA,MAAM,CAAC,MAAA,EAAQ,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACxC,IAAM,MAAA,EAAE,eAAgB,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAClD,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,MACvB,CAACC,OAAoB,KAAA;AACnB,QAAA,OAAA,CAAQA,OAAM,CAAA,CAAA;AACd,QAAA,YAAA,GAAeA,OAAM,CAAA,CAAA;AAAA,OACvB;AAAA,MACA,CAAC,YAAY,CAAA;AAAA,KACf,CAAA;AAEA,IAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,MACxB,CAAC,KAAkB,KAAA;AACjB,QAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACb,QAAA,aAAA,GAAgB,KAAK,CAAA,CAAA;AAAA,OACvB;AAAA,MACA,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IACE,uBAAAD,cAAA,CAAA,aAAA,CAAC,iBAAiB,IAAjB,EAAA;AAAA,MAAsB,IAAM,EAAA,MAAA;AAAA,MAAQ,YAAc,EAAA,gBAAA;AAAA,KAChD,EAAA,QAAA,kBACAA,cAAA,CAAA,aAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAA;AAAA,MAAwB,SAAW,EAAA,eAAA;AAAA,KAClC,kBAAAA,cAAA,CAAA,aAAA,CAAC,iBAAiB,OAAjB,EAAA;AAAA,MACC,IAAK,EAAA,KAAA;AAAA,MACL,KAAM,EAAA,QAAA;AAAA,MACN,UAAY,EAAA,4BAAA;AAAA,MACZ,gBAAkB,EAAA,kCAAA;AAAA,MAClB,SAAW,EAAA,UAAA;AAAA,QACT,gDAAA;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KAEL,kBAAAA,cAAA,CAAA,aAAA,CAACE,eAAA,EAAA;AAAA,MACC,aAAe,EAAA,iBAAA;AAAA,MACf,QAAQ,CAAE,CAAA,MAAA;AAAA,KAAA,kBAETF,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,wBAAA;AAAA,KAAA,kBACZA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,kCAAA;AAAA,KACb,kBAAAA,cAAA,CAAA,aAAA,CAACG,iBAAA,EAAA;AAAA,MACC,SAAU,EAAA,wBAAA;AAAA,MACV,aAAa,CAAE,CAAA,+BAAA;AAAA,MACf,SAAS,EAAA,IAAA;AAAA,KACX,mBACCH,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MAAW,SAAU,EAAA,6BAAA;AAAA,KAA8B,CACtD,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA,CAACI,kBAAA,EAAA;AAAA,MACC,SAAU,EAAA,yBAAA;AAAA,MACV,UAAY,EAAA;AAAA,QACV,OAAS,EAAA,kBAAA;AAAA,QACT,KAAO,EAAA,gBAAA;AAAA,QACP,KAAO,EAAA,gBAAA;AAAA,QACP,cAAgB,EAAA,yBAAA;AAAA,QAChB,IAAM,EAAA,eAAA;AAAA,QACN,GAAK,EAAA,cAAA;AAAA,QACL,KAAO,EAAA,gBAAA;AAAA,OACT;AAAA,KACF,CACF,CACF,CACF,CACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"EmojiPicker.mjs","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport * as EmojiPickerPrimitive from \"../../primitives/EmojiPicker\";\nimport type {\n  EmojiPickerContentCategoryHeaderProps,\n  EmojiPickerContentEmojiProps,\n  EmojiPickerContentEmptyProps,\n  EmojiPickerContentErrorProps,\n  EmojiPickerContentGridProps,\n  EmojiPickerContentLoadingProps,\n  EmojiPickerContentRowProps,\n} from \"../../primitives/EmojiPicker/types\";\nimport { classNames } from \"../../utils/class-names\";\nimport { Emoji } from \"./Emoji\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n  onOpenChange?: (open: boolean) => void;\n  onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerLoading({\n  className,\n  ...props\n}: EmojiPickerContentLoadingProps) {\n  return (\n    <div\n      className={classNames(\"lb-loading lb-emoji-picker-loading\", className)}\n      {...props}\n    >\n      <SpinnerIcon />\n    </div>\n  );\n}\n\nfunction EmojiPickerEmpty({\n  className,\n  ...props\n}: EmojiPickerContentEmptyProps) {\n  const $ = useOverrides();\n\n  return (\n    <div\n      className={classNames(\"lb-empty lb-emoji-picker-empty\", className)}\n      {...props}\n    >\n      {$.EMOJI_PICKER_EMPTY}\n    </div>\n  );\n}\n\nfunction EmojiPickerError({\n  error,\n  className,\n  ...props\n}: EmojiPickerContentErrorProps) {\n  const $ = useOverrides();\n\n  return (\n    <div\n      className={classNames(\"lb-error lb-emoji-picker-error\", className)}\n      {...props}\n    >\n      {$.EMOJI_PICKER_ERROR(error)}\n    </div>\n  );\n}\n\nfunction EmojiPickerCategoryHeader({\n  category,\n  className,\n  ...props\n}: EmojiPickerContentCategoryHeaderProps) {\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-category-header\", className)}\n      {...props}\n    >\n      <span className=\"lb-emoji-picker-category-header-title\">{category}</span>\n    </div>\n  );\n}\n\nfunction EmojiPickerGrid({\n  children,\n  className,\n  ...props\n}: EmojiPickerContentGridProps) {\n  return (\n    <div className={classNames(\"lb-emoji-picker-grid\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerRow({\n  attributes,\n  children,\n  className,\n  ...props\n}: EmojiPickerContentRowProps) {\n  const isFirstRow = useMemo(\n    () => attributes.categoryRowIndex === 0,\n    [attributes.categoryRowIndex]\n  );\n  const isLastRow = useMemo(\n    () => attributes.categoryRowIndex === attributes.categoryRowsCount - 1,\n    [attributes.categoryRowIndex, attributes.categoryRowsCount]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-row\", className)}\n      data-first={isFirstRow ? \"\" : undefined}\n      data-last={isLastRow ? \"\" : undefined}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerEmoji({\n  emoji,\n  className,\n  ...props\n}: EmojiPickerContentEmojiProps) {\n  return (\n    <button\n      className={classNames(\"lb-emoji-picker-emoji\", className)}\n      {...props}\n    >\n      <Emoji emoji={emoji} />\n    </button>\n  );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n  (\n    { onEmojiSelect, onOpenChange, children, className, ...props },\n    forwardedRef\n  ) => {\n    const [isOpen, setOpen] = useState(false);\n    const { portalContainer } = useLiveblocksUIConfig();\n    const $ = useOverrides();\n\n    const handleOpenChange = useCallback(\n      (isOpen: boolean) => {\n        setOpen(isOpen);\n        onOpenChange?.(isOpen);\n      },\n      [onOpenChange]\n    );\n\n    const handleEmojiSelect = useCallback(\n      (emoji: string) => {\n        setOpen(false);\n        onEmojiSelect?.(emoji);\n      },\n      [onEmojiSelect]\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            className={classNames(\n              \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n              className\n            )}\n            {...props}\n            ref={forwardedRef}\n          >\n            <EmojiPickerPrimitive.Root\n              onEmojiSelect={handleEmojiSelect}\n              locale={$.locale}\n            >\n              <div className=\"lb-emoji-picker-header\">\n                <div className=\"lb-emoji-picker-search-container\">\n                  <EmojiPickerPrimitive.Search\n                    className=\"lb-emoji-picker-search\"\n                    placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n                    autoFocus\n                  />\n                  <SearchIcon className=\"lb-emoji-picker-search-icon\" />\n                </div>\n              </div>\n              <EmojiPickerPrimitive.Content\n                className=\"lb-emoji-picker-content\"\n                components={{\n                  Loading: EmojiPickerLoading,\n                  Empty: EmojiPickerEmpty,\n                  Error: EmojiPickerError,\n                  CategoryHeader: EmojiPickerCategoryHeader,\n                  Grid: EmojiPickerGrid,\n                  Row: EmojiPickerRow,\n                  Emoji: EmojiPickerEmoji,\n                }}\n              />\n            </EmojiPickerPrimitive.Root>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["isOpen","EmojiPickerPrimitive.Root","EmojiPickerPrimitive.Search","EmojiPickerPrimitive.Content"],"mappings":"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"}

package/dist/components/internal/Icon.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/class-names.js');
 
 const ICON_WIDTH = 20;
 const ICON_HEIGHT = 20;
 function Icon({ children, className, ...props }) {
-  return /* @__PURE__ */ React.createElement("svg", {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: ICON_WIDTH,
     height: ICON_HEIGHT,
@@ -18,8 +18,9 @@ function Icon({ children, className, ...props }) {
     strokeLinejoin: "round",
     role: "presentation",
     className: classNames.classNames("lb-icon", className),
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
 
 exports.ICON_HEIGHT = ICON_HEIGHT;

package/dist/components/internal/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/internal/Icon.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport const ICON_WIDTH = 20;\nexport const ICON_HEIGHT = 20;\n\nexport function Icon({ children, className, ...props }: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={ICON_WIDTH}\n      height={ICON_HEIGHT}\n      viewBox={`0 0 ${ICON_WIDTH} ${ICON_HEIGHT}`}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role=\"presentation\"\n      className={classNames(\"lb-icon\", className)}\n      {...props}\n    >\n      {children}\n    </svg>\n  );\n}\n"],"names":["classNames"],"mappings":";;;;;AAKO,MAAM,UAAa,GAAA,GAAA;AACnB,MAAM,WAAc,GAAA,GAAA;AAEpB,SAAS,IAAK,CAAA,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,OAAgC,EAAA;AAC7E,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAM,EAAA,4BAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,IACP,MAAQ,EAAA,WAAA;AAAA,IACR,OAAA,EAAS,OAAO,UAAc,CAAA,CAAA,EAAA,WAAA,CAAA,CAAA;AAAA,IAC9B,IAAK,EAAA,MAAA;AAAA,IACL,MAAO,EAAA,cAAA;AAAA,IACP,WAAa,EAAA,GAAA;AAAA,IACb,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,IACf,IAAK,EAAA,cAAA;AAAA,IACL,SAAA,EAAWA,qBAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,IACzC,GAAG,KAAA;AAAA,GAAA,EAEH,QACH,CAAA,CAAA;AAEJ;;;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/internal/Icon.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport const ICON_WIDTH = 20;\nexport const ICON_HEIGHT = 20;\n\nexport function Icon({ children, className, ...props }: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={ICON_WIDTH}\n      height={ICON_HEIGHT}\n      viewBox={`0 0 ${ICON_WIDTH} ${ICON_HEIGHT}`}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role=\"presentation\"\n      className={classNames(\"lb-icon\", className)}\n      {...props}\n    >\n      {children}\n    </svg>\n  );\n}\n"],"names":["jsx","classNames"],"mappings":";;;;;AAIO,MAAM,UAAa,GAAA,GAAA;AACnB,MAAM,WAAc,GAAA,GAAA;AAEpB,SAAS,IAAK,CAAA,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,OAAgC,EAAA;AAC7E,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAM,EAAA,4BAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,IACP,MAAQ,EAAA,WAAA;AAAA,IACR,OAAA,EAAS,OAAO,UAAc,CAAA,CAAA,EAAA,WAAA,CAAA,CAAA;AAAA,IAC9B,IAAK,EAAA,MAAA;AAAA,IACL,MAAO,EAAA,cAAA;AAAA,IACP,WAAa,EAAA,GAAA;AAAA,IACb,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,IACf,IAAK,EAAA,cAAA;AAAA,IACL,SAAA,EAAWC,qBAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,IACzC,GAAG,KAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;;;"}