@liveblocks/react-ui 2.15.1 → 2.16.0-rc1

package/dist/primitives/EmojiPicker/contexts.js.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.js","sources":["../../../src/primitives/EmojiPicker/contexts.ts"],"sourcesContent":["import type { Resolve } from \"@liveblocks/core\";\nimport { nn } from \"@liveblocks/core\";\nimport type { Dispatch, KeyboardEvent, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\n\nimport type {\n  EmojiPickerData,\n  EmojiPickerInteraction,\n  EmojiPickerSelectionDirection,\n} from \"./types\";\n\ntype EmojiPickerContextData =\n  | {\n      data?: never;\n      error?: never;\n      isLoading: true;\n    }\n  | {\n      data: EmojiPickerData;\n      error?: never;\n      isLoading: false;\n    }\n  | {\n      data?: never;\n      error: Error;\n      isLoading: false;\n    };\n\nexport type EmojiPickerContext = Resolve<\n  EmojiPickerContextData & {\n    columns: number;\n    onSearch: (search: string) => void;\n    selectCurrentEmoji: () => void;\n    onEmojiSelect?: (emoji: string) => void;\n    selectedColumnIndex: number;\n    selectedRowIndex: number;\n    moveSelection: (\n      direction: EmojiPickerSelectionDirection,\n      event: KeyboardEvent<HTMLInputElement>\n    ) => void;\n    setPointerSelection: (columnIndex: number, rowIndex: number) => void;\n    interaction: EmojiPickerInteraction;\n    setInteraction: Dispatch<SetStateAction<EmojiPickerInteraction>>;\n  }\n>;\n\nexport const EmojiPickerContext = createContext<EmojiPickerContext | null>(\n  null\n);\n\nexport function useEmojiPicker(): EmojiPickerContext {\n  const emojiPickerContext = useContext(EmojiPickerContext);\n\n  return nn(\n    emojiPickerContext,\n    \"EmojiPicker.Root is missing from the React tree.\"\n  );\n}\n"],"names":["createContext","useContext","nn"],"mappings":";;;;;AA8CO,MAAM,kBAAqB,GAAAA,mBAAA;AAAA,EAChC,IAAA;AACF,EAAA;AAEO,SAAS,cAAqC,GAAA;AACnD,EAAM,MAAA,kBAAA,GAAqBC,iBAAW,kBAAkB,CAAA,CAAA;AAExD,EAAO,OAAAC,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,kDAAA;AAAA,GACF,CAAA;AACF;;;;;"}
+{"version":3,"file":"contexts.js","sources":["../../../src/primitives/EmojiPicker/contexts.ts"],"sourcesContent":["import type { Relax, Resolve } from \"@liveblocks/core\";\nimport { nn } from \"@liveblocks/core\";\nimport type { Dispatch, KeyboardEvent, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\n\nimport type {\n  EmojiPickerData,\n  EmojiPickerInteraction,\n  EmojiPickerSelectionDirection,\n} from \"./types\";\n\ntype EmojiPickerContextData = Relax<\n  | { isLoading: true }\n  | {\n      data: EmojiPickerData;\n      isLoading: false;\n    }\n  | {\n      error: Error;\n      isLoading: false;\n    }\n>;\n\nexport type EmojiPickerContext = Resolve<\n  EmojiPickerContextData & {\n    columns: number;\n    onSearch: (search: string) => void;\n    selectCurrentEmoji: () => void;\n    onEmojiSelect?: (emoji: string) => void;\n    selectedColumnIndex: number;\n    selectedRowIndex: number;\n    moveSelection: (\n      direction: EmojiPickerSelectionDirection,\n      event: KeyboardEvent<HTMLInputElement>\n    ) => void;\n    setPointerSelection: (columnIndex: number, rowIndex: number) => void;\n    interaction: EmojiPickerInteraction;\n    setInteraction: Dispatch<SetStateAction<EmojiPickerInteraction>>;\n  }\n>;\n\nexport const EmojiPickerContext = createContext<EmojiPickerContext | null>(\n  null\n);\n\nexport function useEmojiPicker(): EmojiPickerContext {\n  const emojiPickerContext = useContext(EmojiPickerContext);\n\n  return nn(\n    emojiPickerContext,\n    \"EmojiPicker.Root is missing from the React tree.\"\n  );\n}\n"],"names":["createContext","useContext","nn"],"mappings":";;;;;AAyCO,MAAM,kBAAqB,GAAAA,mBAAA;AAAA,EAChC,IAAA;AACF,EAAA;AAEO,SAAS,cAAqC,GAAA;AACnD,EAAM,MAAA,kBAAA,GAAqBC,iBAAW,kBAAkB,CAAA,CAAA;AAExD,EAAO,OAAAC,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,kDAAA;AAAA,GACF,CAAA;AACF;;;;;"}

package/dist/primitives/EmojiPicker/contexts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.mjs","sources":["../../../src/primitives/EmojiPicker/contexts.ts"],"sourcesContent":["import type { Resolve } from \"@liveblocks/core\";\nimport { nn } from \"@liveblocks/core\";\nimport type { Dispatch, KeyboardEvent, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\n\nimport type {\n  EmojiPickerData,\n  EmojiPickerInteraction,\n  EmojiPickerSelectionDirection,\n} from \"./types\";\n\ntype EmojiPickerContextData =\n  | {\n      data?: never;\n      error?: never;\n      isLoading: true;\n    }\n  | {\n      data: EmojiPickerData;\n      error?: never;\n      isLoading: false;\n    }\n  | {\n      data?: never;\n      error: Error;\n      isLoading: false;\n    };\n\nexport type EmojiPickerContext = Resolve<\n  EmojiPickerContextData & {\n    columns: number;\n    onSearch: (search: string) => void;\n    selectCurrentEmoji: () => void;\n    onEmojiSelect?: (emoji: string) => void;\n    selectedColumnIndex: number;\n    selectedRowIndex: number;\n    moveSelection: (\n      direction: EmojiPickerSelectionDirection,\n      event: KeyboardEvent<HTMLInputElement>\n    ) => void;\n    setPointerSelection: (columnIndex: number, rowIndex: number) => void;\n    interaction: EmojiPickerInteraction;\n    setInteraction: Dispatch<SetStateAction<EmojiPickerInteraction>>;\n  }\n>;\n\nexport const EmojiPickerContext = createContext<EmojiPickerContext | null>(\n  null\n);\n\nexport function useEmojiPicker(): EmojiPickerContext {\n  const emojiPickerContext = useContext(EmojiPickerContext);\n\n  return nn(\n    emojiPickerContext,\n    \"EmojiPicker.Root is missing from the React tree.\"\n  );\n}\n"],"names":[],"mappings":";;;AA8CO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,IAAA;AACF,EAAA;AAEO,SAAS,cAAqC,GAAA;AACnD,EAAM,MAAA,kBAAA,GAAqB,WAAW,kBAAkB,CAAA,CAAA;AAExD,EAAO,OAAA,EAAA;AAAA,IACL,kBAAA;AAAA,IACA,kDAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"contexts.mjs","sources":["../../../src/primitives/EmojiPicker/contexts.ts"],"sourcesContent":["import type { Relax, Resolve } from \"@liveblocks/core\";\nimport { nn } from \"@liveblocks/core\";\nimport type { Dispatch, KeyboardEvent, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\n\nimport type {\n  EmojiPickerData,\n  EmojiPickerInteraction,\n  EmojiPickerSelectionDirection,\n} from \"./types\";\n\ntype EmojiPickerContextData = Relax<\n  | { isLoading: true }\n  | {\n      data: EmojiPickerData;\n      isLoading: false;\n    }\n  | {\n      error: Error;\n      isLoading: false;\n    }\n>;\n\nexport type EmojiPickerContext = Resolve<\n  EmojiPickerContextData & {\n    columns: number;\n    onSearch: (search: string) => void;\n    selectCurrentEmoji: () => void;\n    onEmojiSelect?: (emoji: string) => void;\n    selectedColumnIndex: number;\n    selectedRowIndex: number;\n    moveSelection: (\n      direction: EmojiPickerSelectionDirection,\n      event: KeyboardEvent<HTMLInputElement>\n    ) => void;\n    setPointerSelection: (columnIndex: number, rowIndex: number) => void;\n    interaction: EmojiPickerInteraction;\n    setInteraction: Dispatch<SetStateAction<EmojiPickerInteraction>>;\n  }\n>;\n\nexport const EmojiPickerContext = createContext<EmojiPickerContext | null>(\n  null\n);\n\nexport function useEmojiPicker(): EmojiPickerContext {\n  const emojiPickerContext = useContext(EmojiPickerContext);\n\n  return nn(\n    emojiPickerContext,\n    \"EmojiPicker.Root is missing from the React tree.\"\n  );\n}\n"],"names":[],"mappings":";;;AAyCO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,IAAA;AACF,EAAA;AAEO,SAAS,cAAqC,GAAA;AACnD,EAAM,MAAA,kBAAA,GAAqB,WAAW,kBAAkB,CAAA,CAAA;AAExD,EAAO,OAAA,EAAA;AAAA,IACL,kBAAA;AAAA,IACA,kDAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/primitives/EmojiPicker/index.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var _private = require('@liveblocks/react/_private');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var reactVirtuoso = require('react-virtuoso');
@@ -364,7 +365,7 @@ const EmojiPickerContent = react.forwardRef(
         setInteraction("none");
       }
     }, [interaction, setInteraction]);
-    react.useLayoutEffect(() => {
+    _private.useLayoutEffect(() => {
       if (!placeholderContainerRef.current) {
         return;
       }

package/dist/primitives/EmojiPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/primitives/EmojiPicker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ChangeEvent, KeyboardEvent, SyntheticEvent } from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  useTransition,\n} from \"react\";\nimport type {\n  CalculateViewLocationParams,\n  GroupedVirtuosoHandle,\n  ListProps as VirtuosoListProps,\n  ScrollerProps,\n  TopItemListProps,\n} from \"react-virtuoso\";\nimport { GroupedVirtuoso } from \"react-virtuoso\";\n\nimport { isKey } from \"../../utils/is-key\";\nimport {\n  cancelIdleCallback,\n  requestIdleCallback,\n} from \"../../utils/request-idle-callback\";\nimport { visuallyHidden } from \"../../utils/visually-hidden\";\nimport { Emoji as EmojiPrimitive } from \"../internal/Emoji\";\nimport { EmojiPickerContext, useEmojiPicker } from \"./contexts\";\nimport type {\n  EmojiData,\n  EmojiPickerContentComponents,\n  EmojiPickerContentEmojiRowAttributes,\n  EmojiPickerContentProps,\n  EmojiPickerData,\n  EmojiPickerRootProps,\n  EmojiPickerSearchProps,\n  EmojiPickerSelectionDirection,\n} from \"./types\";\nimport { filterEmojis, generateEmojiPickerData, getEmojiData } from \"./utils\";\n\nconst DEFAULT_COLUMNS = 10;\nconst DEFAULT_LOCALE = \"en\";\nconst LOADING_MINIMUM_TIMEOUT = 100;\n\nconst EMOJIPICKER_ROOT_NAME = \"EmojiPickerRoot\";\nconst EMOJIPICKER_CONTENT_NAME = \"EmojiPickerContent\";\nconst EMOJIPICKER_SEARCH_NAME = \"EmojiPickerSearch\";\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * Surrounds the emoji picker, it handles emoji data and coordinates\n * `EmojiPicker.Search` and `EmojiPicker.Content`.\n *\n * @example\n * <EmojiPicker.Root>\n *   <EmojiPicker.Search />\n *   <EmojiPicker.Content />\n * </EmojiPicker.Root>\n */\nfunction EmojiPickerRoot({\n  columns = DEFAULT_COLUMNS,\n  locale = DEFAULT_LOCALE,\n  onEmojiSelect,\n  children,\n}: EmojiPickerRootProps) {\n  const emojiData = useRef<EmojiData>();\n  const search = useRef(\"\");\n  const [, startEmojisTransition] = useTransition();\n  const [data, setData] = useState<EmojiPickerData>();\n  const [error, setError] = useState<Error>();\n  const [selectedColumnIndex, setSelectedColumnIndex] = useState(0);\n  const [selectedRowIndex, setSelectedRowIndex] = useState(0);\n  const [interaction, setInteraction] = useState<\n    \"keyboard\" | \"pointer\" | \"none\"\n  >(\"none\");\n\n  const selectCurrentEmoji = useCallback(() => {\n    if (onEmojiSelect) {\n      const emoji = data?.rows[selectedRowIndex]?.[selectedColumnIndex];\n\n      if (emoji) {\n        onEmojiSelect(emoji.emoji);\n      }\n    }\n  }, [data?.rows, onEmojiSelect, selectedColumnIndex, selectedRowIndex]);\n\n  const resetSelection = useCallback(() => {\n    setSelectedColumnIndex(0);\n    setSelectedRowIndex(0);\n  }, []);\n\n  const setPointerSelection = useCallback(\n    (columnIndex: number, rowIndex: number) => {\n      setInteraction(\"pointer\");\n      setSelectedColumnIndex(columnIndex);\n      setSelectedRowIndex(rowIndex);\n    },\n    []\n  );\n\n  const moveSelection = useCallback(\n    (\n      direction: EmojiPickerSelectionDirection,\n      event: KeyboardEvent<HTMLInputElement>\n    ) => {\n      if (!data) {\n        return;\n      }\n\n      event.preventDefault();\n\n      if (interaction === \"none\") {\n        setInteraction(\"keyboard\");\n        return;\n      }\n\n      setInteraction(\"keyboard\");\n\n      switch (direction) {\n        // If first column, move to last column of previous row (if available)\n        // Otherwise, move to previous column\n        case \"left\": {\n          if (selectedColumnIndex === 0) {\n            const previousRowIndex = selectedRowIndex - 1;\n            const previousRow = data.rows[previousRowIndex];\n\n            if (previousRow) {\n              setSelectedRowIndex(previousRowIndex);\n              setSelectedColumnIndex(previousRow.length - 1);\n            }\n          } else {\n            setSelectedColumnIndex(selectedColumnIndex - 1);\n          }\n\n          break;\n        }\n\n        // If last column, move to first column of next row (if available)\n        // Otherwise, move to next column\n        case \"right\": {\n          const currentRow = data.rows[selectedRowIndex];\n\n          if (!currentRow) {\n            return;\n          }\n\n          if (selectedColumnIndex === currentRow.length - 1) {\n            const nextRowIndex = selectedRowIndex + 1;\n            const nextRow = data.rows[nextRowIndex];\n\n            if (nextRow) {\n              setSelectedRowIndex(nextRowIndex);\n              setSelectedColumnIndex(0);\n            }\n          } else {\n            setSelectedColumnIndex(selectedColumnIndex + 1);\n          }\n\n          break;\n        }\n\n        // Move to same column of previous row\n        // If same column is not available, move to last column of previous row\n        case \"up\": {\n          const previousRow = data.rows[selectedRowIndex - 1];\n\n          if (previousRow) {\n            setSelectedRowIndex(selectedRowIndex - 1);\n\n            if (!previousRow[selectedColumnIndex]) {\n              setSelectedColumnIndex(previousRow.length - 1);\n            }\n          }\n\n          break;\n        }\n\n        // Move to same column of next row\n        // If same column is not available, move to last column of next row\n        case \"down\": {\n          const nextRow = data.rows[selectedRowIndex + 1];\n\n          if (nextRow) {\n            setSelectedRowIndex(selectedRowIndex + 1);\n\n            if (!nextRow[selectedColumnIndex]) {\n              setSelectedColumnIndex(nextRow.length - 1);\n            }\n          }\n\n          break;\n        }\n      }\n    },\n    [data, interaction, selectedColumnIndex, selectedRowIndex]\n  );\n\n  const updateEmojis = useCallback(() => {\n    if (!emojiData.current) {\n      return;\n    }\n\n    startEmojisTransition(() => {\n      setData(() => {\n        if (!emojiData.current) {\n          return;\n        }\n\n        const filteredEmojis = filterEmojis(\n          emojiData.current.emojis,\n          search.current\n        );\n\n        return generateEmojiPickerData(\n          filteredEmojis,\n          emojiData.current.categories,\n          columns\n        );\n      });\n      resetSelection();\n    });\n  }, [columns, resetSelection]);\n\n  const handleSearch = useCallback(\n    (value: string) => {\n      search.current = value;\n      updateEmojis();\n    },\n    [updateEmojis]\n  );\n\n  const initializeEmojiData = useCallback(\n    async (locale: string) => {\n      try {\n        emojiData.current = await getEmojiData(locale);\n        updateEmojis();\n      } catch (error) {\n        setError(error as Error);\n      }\n    },\n    [updateEmojis]\n  );\n\n  useEffect(() => {\n    let idleCallbackId: number;\n    const timeoutId = setTimeout(() => {\n      idleCallbackId = requestIdleCallback(() => {\n        initializeEmojiData(locale);\n      });\n    }, LOADING_MINIMUM_TIMEOUT);\n\n    return () => {\n      clearTimeout(timeoutId);\n      cancelIdleCallback(idleCallbackId);\n    };\n  }, [locale]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (interaction === \"none\") {\n      resetSelection();\n    }\n  }, [interaction]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <EmojiPickerContext.Provider\n      value={{\n        data: data as EmojiPickerData,\n        error: error as undefined,\n        isLoading: (!data && !error) as false,\n        columns,\n        onSearch: handleSearch,\n        onEmojiSelect,\n        selectCurrentEmoji,\n        selectedRowIndex,\n        selectedColumnIndex,\n        moveSelection,\n        setPointerSelection,\n        interaction,\n        setInteraction,\n      }}\n    >\n      {children}\n    </EmojiPickerContext.Provider>\n  );\n}\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * The search input of the emoji picker. It also affects the focus and selection\n * within `EmojiPicker.Content`.\n *\n * @example\n * <EmojiPicker.Search />\n */\nconst EmojiPickerSearch = forwardRef<HTMLInputElement, EmojiPickerSearchProps>(\n  ({ asChild, value, defaultValue, onChange, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"input\";\n    const {\n      onSearch,\n      selectCurrentEmoji,\n      moveSelection,\n      interaction,\n      setInteraction,\n    } = useEmojiPicker();\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const value = event.target.value;\n        setInteraction(value ? \"keyboard\" : \"none\");\n        onSearch(value);\n      },\n      [onChange, onSearch, setInteraction]\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isKey(event, \"ArrowLeft\")) {\n          moveSelection(\"left\", event);\n        } else if (isKey(event, \"ArrowRight\")) {\n          moveSelection(\"right\", event);\n        } else if (isKey(event, \"ArrowUp\")) {\n          moveSelection(\"up\", event);\n        } else if (isKey(event, \"ArrowDown\")) {\n          moveSelection(\"down\", event);\n        } else if (isKey(event, \"Enter\")) {\n          if (interaction !== \"none\") {\n            event.preventDefault();\n            selectCurrentEmoji();\n          }\n        }\n      },\n      [interaction, moveSelection, selectCurrentEmoji]\n    );\n\n    useEffect(() => {\n      onSearch(\n        value ? String(value) : defaultValue ? String(defaultValue) : \"\"\n      );\n    }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <Component\n        type=\"search\"\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\nconst defaultContentComponents: EmojiPickerContentComponents = {\n  CategoryHeader: ({ category, ...props }) => <div {...props}>{category}</div>,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Row: ({ children, attributes, ...props }) => <div {...props}>{children}</div>,\n  Emoji: ({ emoji, ...props }) => (\n    <button {...props}>\n      <EmojiPrimitive emoji={emoji} />\n    </button>\n  ),\n  Loading: (props) => <div {...props} />,\n  Empty: (props) => <div {...props} />,\n  Grid: (props) => <div {...props} />,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Error: ({ error, ...props }) => <div {...props} />,\n};\n\nconst placeholderRowAttributes: EmojiPickerContentEmojiRowAttributes = {\n  rowIndex: -1,\n  categoryRowIndex: -1,\n  categoryRowsCount: 0,\n};\n\n// About `data-testid={undefined}`: Virtuoso bakes test IDs into the components we pass\n// to it, so we manually remove them.\n\nconst VirtuosoScroller = forwardRef<HTMLDivElement, ScrollerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} tabIndex={-1} data-testid={undefined} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  }\n);\n\nconst VirtuosoTopList = forwardRef<HTMLDivElement, TopItemListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} data-testid={undefined} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  }\n);\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * The main content of the emoji picker, either displaying the emoji grid or various\n * alternative states (loading, empty, and error).\n *\n * @example\n * <EmojiPicker.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 */\nconst EmojiPickerContent = forwardRef<HTMLDivElement, EmojiPickerContentProps>(\n  ({ components, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n    const virtuosoRef = useRef<GroupedVirtuosoHandle>(null);\n    const placeholderContainerRef = useRef<HTMLDivElement>(null);\n    const rowScrollMarginTopRef = useRef<number>(0);\n    const rowScrollMarginBottomRef = useRef<number>(0);\n    const categoryHeaderHeightRef = useRef<number>(0);\n    const {\n      data,\n      error,\n      isLoading,\n      columns,\n      onEmojiSelect,\n      selectedColumnIndex,\n      selectedRowIndex,\n      setPointerSelection,\n      interaction,\n      setInteraction,\n    } = useEmojiPicker();\n    const selectedEmoji = useMemo(\n      () => data?.rows[selectedRowIndex]?.[selectedColumnIndex],\n      [data?.rows, selectedColumnIndex, selectedRowIndex]\n    );\n    const { Loading, Empty, Error, CategoryHeader, Grid, Row, Emoji } = useMemo(\n      () => ({ ...defaultContentComponents, ...components }),\n      [components]\n    );\n    const VirtuosoList = useMemo(\n      () =>\n        forwardRef<HTMLDivElement, VirtuosoListProps>(\n          ({ children, ...props }, forwardedRef) => {\n            return (\n              <div\n                role=\"grid\"\n                aria-colcount={columns}\n                {...props}\n                data-testid={undefined}\n                ref={forwardedRef}\n              >\n                {children}\n              </div>\n            );\n          }\n        ),\n      [columns]\n    );\n    const placeholderColumns = useMemo(\n      () => Array<string>(columns).fill(\"🌫️\"),\n      [columns]\n    );\n\n    const preventDefault = useCallback((event: SyntheticEvent) => {\n      event.preventDefault();\n    }, []);\n\n    const handleEmojiPointerLeave = useCallback(() => {\n      if (interaction === \"pointer\") {\n        setInteraction(\"none\");\n      }\n    }, [interaction, setInteraction]);\n\n    useLayoutEffect(() => {\n      if (!placeholderContainerRef.current) {\n        return;\n      }\n\n      const row = placeholderContainerRef.current.childNodes[0];\n      const categoryHeader = placeholderContainerRef.current.childNodes[1];\n\n      if (row instanceof HTMLElement) {\n        const style = window.getComputedStyle(row);\n\n        rowScrollMarginTopRef.current = parseFloat(style.scrollMarginTop);\n        rowScrollMarginBottomRef.current = parseFloat(style.scrollMarginBottom);\n      }\n\n      if (categoryHeader instanceof HTMLElement) {\n        categoryHeaderHeightRef.current = categoryHeader.offsetHeight;\n      }\n    }, []);\n\n    // Customize `scrollIntoView` behavior to take into account category headers and margins\n    const calculateViewLocation = useCallback(\n      ({\n        itemTop,\n        itemBottom,\n        viewportTop,\n        viewportBottom,\n        locationParams: { behavior, align, ...params },\n      }: CalculateViewLocationParams) => {\n        if (\n          itemTop -\n            (categoryHeaderHeightRef.current + rowScrollMarginTopRef.current) <\n          viewportTop\n        ) {\n          return {\n            ...params,\n            behavior,\n            align: align ?? \"start\",\n          };\n        }\n\n        if (itemBottom > viewportBottom) {\n          return {\n            ...params,\n            behavior,\n            align: align ?? \"end\",\n            offset: rowScrollMarginBottomRef.current,\n          };\n        }\n\n        return null;\n      },\n      []\n    );\n\n    useEffect(() => {\n      if (interaction === \"keyboard\") {\n        virtuosoRef.current?.scrollIntoView({\n          index: selectedRowIndex,\n          behavior: \"auto\",\n          calculateViewLocation,\n        });\n      }\n    }, [interaction, selectedRowIndex, calculateViewLocation]);\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        <div\n          style={{\n            visibility: \"hidden\",\n            height: 0,\n          }}\n          ref={placeholderContainerRef}\n        >\n          {/* Virtualized rows are absolutely positioned so they won't make\n            the container automatically pick up their width. To achieve\n            an automatic width, we add a relative (but hidden) full row. */}\n          <Row attributes={placeholderRowAttributes}>\n            {placeholderColumns.map((placeholder, index) => (\n              <Emoji emoji={placeholder} key={index} />\n            ))}\n          </Row>\n          {/* We also add a hidden category header to get its computed height. */}\n          <CategoryHeader category=\"Category\" />\n        </div>\n        {isLoading ? (\n          <Loading />\n        ) : error ? (\n          <Error error={error} />\n        ) : data.count === 0 ? (\n          <Empty />\n        ) : (\n          <Grid>\n            <GroupedVirtuoso\n              ref={virtuosoRef}\n              components={{\n                Scroller: VirtuosoScroller,\n                List: VirtuosoList,\n                TopItemList: VirtuosoTopList,\n              }}\n              groupCounts={data.categoriesRowCounts}\n              groupContent={(groupIndex) => {\n                const category = data.categories[groupIndex];\n\n                if (!category) {\n                  return null;\n                }\n\n                return <CategoryHeader category={category} />;\n              }}\n              itemContent={(rowIndex, groupIndex) => {\n                const categoryRow = data.rows[rowIndex];\n                const categoryRowIndex =\n                  data.categoriesRowIndices[groupIndex]?.indexOf(rowIndex);\n                const categoryRowsCount = data.categoriesRowCounts[groupIndex];\n\n                if (\n                  categoryRow === undefined ||\n                  categoryRowIndex === undefined ||\n                  categoryRowsCount === undefined\n                ) {\n                  return null;\n                }\n\n                return (\n                  <Row\n                    attributes={{\n                      rowIndex,\n                      categoryRowIndex,\n                      categoryRowsCount,\n                    }}\n                  >\n                    {categoryRow.map((emoji, columnIndex) => {\n                      const isSelected =\n                        interaction !== \"none\" &&\n                        selectedColumnIndex === columnIndex &&\n                        selectedRowIndex === rowIndex;\n\n                      return (\n                        <Emoji\n                          key={emoji.emoji}\n                          role=\"gridcell\"\n                          aria-colindex={columnIndex}\n                          aria-selected={isSelected || undefined}\n                          data-selected={isSelected || undefined}\n                          onMouseDown={preventDefault}\n                          tabIndex={-1}\n                          onPointerEnter={() => {\n                            setPointerSelection(columnIndex, rowIndex);\n                          }}\n                          onPointerLeave={handleEmojiPointerLeave}\n                          onClick={(event) => {\n                            onEmojiSelect?.(emoji.emoji);\n                            event.stopPropagation();\n                          }}\n                          emoji={emoji.emoji}\n                        />\n                      );\n                    })}\n                  </Row>\n                );\n              }}\n            />\n          </Grid>\n        )}\n        {selectedEmoji && interaction !== \"none\" && (\n          <div aria-live=\"polite\" style={visuallyHidden}>\n            {selectedEmoji.name}\n          </div>\n        )}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  EmojiPickerRoot.displayName = EMOJIPICKER_ROOT_NAME;\n  EmojiPickerContent.displayName = EMOJIPICKER_CONTENT_NAME;\n  EmojiPickerSearch.displayName = EMOJIPICKER_SEARCH_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as EmojiPicker.*\nexport {\n  EmojiPickerContent as Content,\n  EmojiPickerRoot as Root,\n  EmojiPickerSearch as Search,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;AA2CA;AACA;AACA;AAEA;AACA;AACA;AAkBA;AAAyB;AACb;AACD;AACT;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACE;AACE;AAEA;AACE;AAAyB;AAC3B;AACF;AAGF;AACE;AACA;AAAqB;AAGvB;AAA4B;AAExB;AACA;AACA;AAA4B;AAC9B;AACC;AAGH;AAAsB;AAKlB;AACE;AAAA;AAGF;AAEA;AACE;AACA;AAAA;AAGF;AAEA;AAAmB;AAIf;AACE;AACA;AAEA;AACE;AACA;AAA6C;AAC/C;AAEA;AAA8C;AAGhD;AAAA;AACF;AAKE;AAEA;AACE;AAAA;AAGF;AACE;AACA;AAEA;AACE;AACA;AAAwB;AAC1B;AAEA;AAA8C;AAGhD;AAAA;AACF;AAKE;AAEA;AACE;AAEA;AACE;AAA6C;AAC/C;AAGF;AAAA;AACF;AAKE;AAEA;AACE;AAEA;AACE;AAAyC;AAC3C;AAGF;AAAA;AACF;AACF;AACF;AACyD;AAG3D;AACE;AACE;AAAA;AAGF;AACE;AACE;AACE;AAAA;AAGF;AAAuB;AACH;AACX;AAGT;AAAO;AACL;AACkB;AAClB;AACF;AAEF;AAAe;AAChB;AAGH;AAAqB;AAEjB;AACA;AAAa;AACf;AACa;AAGf;AAA4B;AAExB;AACE;AACA;AAAa;AAEb;AAAuB;AACzB;AACF;AACa;AAGf;AACE;AACA;AACE;AACE;AAA0B;AAC3B;AAGH;AACE;AACA;AAAiC;AACnC;AAGF;AACE;AACE;AAAe;AACjB;AAGF;AACG;AACQ;AACL;AACA;AACsB;AACtB;AACU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEC;AAGP;AAeA;AAA0B;AAEtB;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AAGF;AAAqB;AAEjB;AAEA;AACE;AAAA;AAGF;AACA;AACA;AAAc;AAChB;AACmC;AAGrC;AAAsB;AAElB;AACE;AAAA;AAGF;AACE;AAA2B;AAE3B;AAA4B;AAE5B;AAAyB;AAEzB;AAA2B;AAE3B;AACE;AACA;AAAmB;AACrB;AACF;AACF;AAC+C;AAGjD;AACE;AAAA;AACgE;AAChE;AAGF;AACG;AACM;AACL;AACA;AACU;AACC;AACP;AACC;AACP;AAGN;AAEA;AAA+D;AAChB;AAAQ;AAAQ;AAAS;AAExB;AAAQ;AAAQ;AAAS;AAEpE;AAAW;AACT;AAAe;AAAc;AAChC;AAEmB;AAAQ;AAAO;AACjB;AAAQ;AAAO;AAChB;AAAQ;AAAO;AAEA;AAAQ;AAC3C;AAEA;AAAuE;AAC3D;AACQ;AAEpB;AAKA;AAAyB;AAErB;AACG;AAAQ;AAAiB;AAAiB;AAAgB;AACxD;AACH;AAGN;AAEA;AAAwB;AAEpB;AACG;AAAQ;AAAoB;AAAgB;AAC1C;AACH;AAGN;AAyBA;AAA2B;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AAAsB;AACiB;AACa;AAEpD;AAAoE;AACd;AACzC;AAEb;AAAqB;AAEjB;AAEI;AACG;AACM;AACU;AACX;AACS;AACR;AAEJ;AACH;AAEJ;AACF;AACM;AAEV;AAA2B;AACc;AAC/B;AAGV;AACE;AAAqB;AAGvB;AACE;AACE;AAAqB;AACvB;AAGF;AACE;AACE;AAAA;AAGF;AACA;AAEA;AACE;AAEA;AACA;AAAsE;AAGxE;AACE;AAAiD;AACnD;AAIF;AAA8B;AAC3B;AACC;AACA;AACA;AACA;AAC6C;AAE7C;AAKE;AAAO;AACF;AACH;AACgB;AAClB;AAGF;AACE;AAAO;AACF;AACH;AACgB;AACiB;AACnC;AAGF;AAAO;AACT;AACC;AAGH;AACE;AACE;AAAoC;AAC3B;AACG;AACV;AACD;AACH;AAGF;AACG;AAAc;AAAY;AACzB;AAAC;AACQ;AACO;AACJ;AACV;AACK;AAKL;AAAC;AAAgB;AAEZ;AAAa;AACf;AACH;AAEC;AAAwB;AAAW;AAAA;AACtC;AAIG;AAAM;AAIN;AACE;AACM;AACO;AACA;AACJ;AACO;AACf;AACkB;AAEhB;AAEA;AACE;AAAO;AAGT;AAAQ;AAAe;AAAoB;AAC7C;AAEE;AACA;AAEA;AAEA;AAKE;AAAO;AAGT;AACG;AACa;AACV;AACA;AACA;AACF;AAGE;AAKA;AACG;AAEM;AACU;AACc;AACA;AAChB;AACH;AAER;AAAyC;AAC3C;AACgB;AAEd;AACA;AAAsB;AACxB;AACa;AACf;AAEH;AACH;AAEJ;AACF;AACF;AAGC;AAAc;AAAgB;AACd;AACjB;AAAA;AAEJ;AAGN;AAEA;AACE;AACA;AACA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/primitives/EmojiPicker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ChangeEvent, KeyboardEvent, SyntheticEvent } from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useTransition,\n} from \"react\";\nimport type {\n  CalculateViewLocationParams,\n  GroupedVirtuosoHandle,\n  ListProps as VirtuosoListProps,\n  ScrollerProps,\n  TopItemListProps,\n} from \"react-virtuoso\";\nimport { GroupedVirtuoso } from \"react-virtuoso\";\n\nimport { isKey } from \"../../utils/is-key\";\nimport {\n  cancelIdleCallback,\n  requestIdleCallback,\n} from \"../../utils/request-idle-callback\";\nimport { visuallyHidden } from \"../../utils/visually-hidden\";\nimport { Emoji as EmojiPrimitive } from \"../internal/Emoji\";\nimport { EmojiPickerContext, useEmojiPicker } from \"./contexts\";\nimport type {\n  EmojiData,\n  EmojiPickerContentComponents,\n  EmojiPickerContentEmojiRowAttributes,\n  EmojiPickerContentProps,\n  EmojiPickerData,\n  EmojiPickerRootProps,\n  EmojiPickerSearchProps,\n  EmojiPickerSelectionDirection,\n} from \"./types\";\nimport { filterEmojis, generateEmojiPickerData, getEmojiData } from \"./utils\";\n\nconst DEFAULT_COLUMNS = 10;\nconst DEFAULT_LOCALE = \"en\";\nconst LOADING_MINIMUM_TIMEOUT = 100;\n\nconst EMOJIPICKER_ROOT_NAME = \"EmojiPickerRoot\";\nconst EMOJIPICKER_CONTENT_NAME = \"EmojiPickerContent\";\nconst EMOJIPICKER_SEARCH_NAME = \"EmojiPickerSearch\";\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * Surrounds the emoji picker, it handles emoji data and coordinates\n * `EmojiPicker.Search` and `EmojiPicker.Content`.\n *\n * @example\n * <EmojiPicker.Root>\n *   <EmojiPicker.Search />\n *   <EmojiPicker.Content />\n * </EmojiPicker.Root>\n */\nfunction EmojiPickerRoot({\n  columns = DEFAULT_COLUMNS,\n  locale = DEFAULT_LOCALE,\n  onEmojiSelect,\n  children,\n}: EmojiPickerRootProps) {\n  const emojiData = useRef<EmojiData>();\n  const search = useRef(\"\");\n  const [, startEmojisTransition] = useTransition();\n  const [data, setData] = useState<EmojiPickerData>();\n  const [error, setError] = useState<Error>();\n  const [selectedColumnIndex, setSelectedColumnIndex] = useState(0);\n  const [selectedRowIndex, setSelectedRowIndex] = useState(0);\n  const [interaction, setInteraction] = useState<\n    \"keyboard\" | \"pointer\" | \"none\"\n  >(\"none\");\n\n  const selectCurrentEmoji = useCallback(() => {\n    if (onEmojiSelect) {\n      const emoji = data?.rows[selectedRowIndex]?.[selectedColumnIndex];\n\n      if (emoji) {\n        onEmojiSelect(emoji.emoji);\n      }\n    }\n  }, [data?.rows, onEmojiSelect, selectedColumnIndex, selectedRowIndex]);\n\n  const resetSelection = useCallback(() => {\n    setSelectedColumnIndex(0);\n    setSelectedRowIndex(0);\n  }, []);\n\n  const setPointerSelection = useCallback(\n    (columnIndex: number, rowIndex: number) => {\n      setInteraction(\"pointer\");\n      setSelectedColumnIndex(columnIndex);\n      setSelectedRowIndex(rowIndex);\n    },\n    []\n  );\n\n  const moveSelection = useCallback(\n    (\n      direction: EmojiPickerSelectionDirection,\n      event: KeyboardEvent<HTMLInputElement>\n    ) => {\n      if (!data) {\n        return;\n      }\n\n      event.preventDefault();\n\n      if (interaction === \"none\") {\n        setInteraction(\"keyboard\");\n        return;\n      }\n\n      setInteraction(\"keyboard\");\n\n      switch (direction) {\n        // If first column, move to last column of previous row (if available)\n        // Otherwise, move to previous column\n        case \"left\": {\n          if (selectedColumnIndex === 0) {\n            const previousRowIndex = selectedRowIndex - 1;\n            const previousRow = data.rows[previousRowIndex];\n\n            if (previousRow) {\n              setSelectedRowIndex(previousRowIndex);\n              setSelectedColumnIndex(previousRow.length - 1);\n            }\n          } else {\n            setSelectedColumnIndex(selectedColumnIndex - 1);\n          }\n\n          break;\n        }\n\n        // If last column, move to first column of next row (if available)\n        // Otherwise, move to next column\n        case \"right\": {\n          const currentRow = data.rows[selectedRowIndex];\n\n          if (!currentRow) {\n            return;\n          }\n\n          if (selectedColumnIndex === currentRow.length - 1) {\n            const nextRowIndex = selectedRowIndex + 1;\n            const nextRow = data.rows[nextRowIndex];\n\n            if (nextRow) {\n              setSelectedRowIndex(nextRowIndex);\n              setSelectedColumnIndex(0);\n            }\n          } else {\n            setSelectedColumnIndex(selectedColumnIndex + 1);\n          }\n\n          break;\n        }\n\n        // Move to same column of previous row\n        // If same column is not available, move to last column of previous row\n        case \"up\": {\n          const previousRow = data.rows[selectedRowIndex - 1];\n\n          if (previousRow) {\n            setSelectedRowIndex(selectedRowIndex - 1);\n\n            if (!previousRow[selectedColumnIndex]) {\n              setSelectedColumnIndex(previousRow.length - 1);\n            }\n          }\n\n          break;\n        }\n\n        // Move to same column of next row\n        // If same column is not available, move to last column of next row\n        case \"down\": {\n          const nextRow = data.rows[selectedRowIndex + 1];\n\n          if (nextRow) {\n            setSelectedRowIndex(selectedRowIndex + 1);\n\n            if (!nextRow[selectedColumnIndex]) {\n              setSelectedColumnIndex(nextRow.length - 1);\n            }\n          }\n\n          break;\n        }\n      }\n    },\n    [data, interaction, selectedColumnIndex, selectedRowIndex]\n  );\n\n  const updateEmojis = useCallback(() => {\n    if (!emojiData.current) {\n      return;\n    }\n\n    startEmojisTransition(() => {\n      setData(() => {\n        if (!emojiData.current) {\n          return;\n        }\n\n        const filteredEmojis = filterEmojis(\n          emojiData.current.emojis,\n          search.current\n        );\n\n        return generateEmojiPickerData(\n          filteredEmojis,\n          emojiData.current.categories,\n          columns\n        );\n      });\n      resetSelection();\n    });\n  }, [columns, resetSelection]);\n\n  const handleSearch = useCallback(\n    (value: string) => {\n      search.current = value;\n      updateEmojis();\n    },\n    [updateEmojis]\n  );\n\n  const initializeEmojiData = useCallback(\n    async (locale: string) => {\n      try {\n        emojiData.current = await getEmojiData(locale);\n        updateEmojis();\n      } catch (error) {\n        setError(error as Error);\n      }\n    },\n    [updateEmojis]\n  );\n\n  useEffect(() => {\n    let idleCallbackId: number;\n    const timeoutId = setTimeout(() => {\n      idleCallbackId = requestIdleCallback(() => {\n        initializeEmojiData(locale);\n      });\n    }, LOADING_MINIMUM_TIMEOUT);\n\n    return () => {\n      clearTimeout(timeoutId);\n      cancelIdleCallback(idleCallbackId);\n    };\n  }, [locale]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (interaction === \"none\") {\n      resetSelection();\n    }\n  }, [interaction]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <EmojiPickerContext.Provider\n      value={{\n        data: data as EmojiPickerData,\n        error: error as undefined,\n        isLoading: (!data && !error) as false,\n        columns,\n        onSearch: handleSearch,\n        onEmojiSelect,\n        selectCurrentEmoji,\n        selectedRowIndex,\n        selectedColumnIndex,\n        moveSelection,\n        setPointerSelection,\n        interaction,\n        setInteraction,\n      }}\n    >\n      {children}\n    </EmojiPickerContext.Provider>\n  );\n}\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * The search input of the emoji picker. It also affects the focus and selection\n * within `EmojiPicker.Content`.\n *\n * @example\n * <EmojiPicker.Search />\n */\nconst EmojiPickerSearch = forwardRef<HTMLInputElement, EmojiPickerSearchProps>(\n  ({ asChild, value, defaultValue, onChange, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"input\";\n    const {\n      onSearch,\n      selectCurrentEmoji,\n      moveSelection,\n      interaction,\n      setInteraction,\n    } = useEmojiPicker();\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const value = event.target.value;\n        setInteraction(value ? \"keyboard\" : \"none\");\n        onSearch(value);\n      },\n      [onChange, onSearch, setInteraction]\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isKey(event, \"ArrowLeft\")) {\n          moveSelection(\"left\", event);\n        } else if (isKey(event, \"ArrowRight\")) {\n          moveSelection(\"right\", event);\n        } else if (isKey(event, \"ArrowUp\")) {\n          moveSelection(\"up\", event);\n        } else if (isKey(event, \"ArrowDown\")) {\n          moveSelection(\"down\", event);\n        } else if (isKey(event, \"Enter\")) {\n          if (interaction !== \"none\") {\n            event.preventDefault();\n            selectCurrentEmoji();\n          }\n        }\n      },\n      [interaction, moveSelection, selectCurrentEmoji]\n    );\n\n    useEffect(() => {\n      onSearch(\n        value ? String(value) : defaultValue ? String(defaultValue) : \"\"\n      );\n    }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <Component\n        type=\"search\"\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\nconst defaultContentComponents: EmojiPickerContentComponents = {\n  CategoryHeader: ({ category, ...props }) => <div {...props}>{category}</div>,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Row: ({ children, attributes, ...props }) => <div {...props}>{children}</div>,\n  Emoji: ({ emoji, ...props }) => (\n    <button {...props}>\n      <EmojiPrimitive emoji={emoji} />\n    </button>\n  ),\n  Loading: (props) => <div {...props} />,\n  Empty: (props) => <div {...props} />,\n  Grid: (props) => <div {...props} />,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Error: ({ error, ...props }) => <div {...props} />,\n};\n\nconst placeholderRowAttributes: EmojiPickerContentEmojiRowAttributes = {\n  rowIndex: -1,\n  categoryRowIndex: -1,\n  categoryRowsCount: 0,\n};\n\n// About `data-testid={undefined}`: Virtuoso bakes test IDs into the components we pass\n// to it, so we manually remove them.\n\nconst VirtuosoScroller = forwardRef<HTMLDivElement, ScrollerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} tabIndex={-1} data-testid={undefined} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  }\n);\n\nconst VirtuosoTopList = forwardRef<HTMLDivElement, TopItemListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} data-testid={undefined} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  }\n);\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * The main content of the emoji picker, either displaying the emoji grid or various\n * alternative states (loading, empty, and error).\n *\n * @example\n * <EmojiPicker.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 */\nconst EmojiPickerContent = forwardRef<HTMLDivElement, EmojiPickerContentProps>(\n  ({ components, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n    const virtuosoRef = useRef<GroupedVirtuosoHandle>(null);\n    const placeholderContainerRef = useRef<HTMLDivElement>(null);\n    const rowScrollMarginTopRef = useRef<number>(0);\n    const rowScrollMarginBottomRef = useRef<number>(0);\n    const categoryHeaderHeightRef = useRef<number>(0);\n    const {\n      data,\n      error,\n      isLoading,\n      columns,\n      onEmojiSelect,\n      selectedColumnIndex,\n      selectedRowIndex,\n      setPointerSelection,\n      interaction,\n      setInteraction,\n    } = useEmojiPicker();\n    const selectedEmoji = useMemo(\n      () => data?.rows[selectedRowIndex]?.[selectedColumnIndex],\n      [data?.rows, selectedColumnIndex, selectedRowIndex]\n    );\n    const { Loading, Empty, Error, CategoryHeader, Grid, Row, Emoji } = useMemo(\n      () => ({ ...defaultContentComponents, ...components }),\n      [components]\n    );\n    const VirtuosoList = useMemo(\n      () =>\n        forwardRef<HTMLDivElement, VirtuosoListProps>(\n          ({ children, ...props }, forwardedRef) => {\n            return (\n              <div\n                role=\"grid\"\n                aria-colcount={columns}\n                {...props}\n                data-testid={undefined}\n                ref={forwardedRef}\n              >\n                {children}\n              </div>\n            );\n          }\n        ),\n      [columns]\n    );\n    const placeholderColumns = useMemo(\n      () => Array<string>(columns).fill(\"🌫️\"),\n      [columns]\n    );\n\n    const preventDefault = useCallback((event: SyntheticEvent) => {\n      event.preventDefault();\n    }, []);\n\n    const handleEmojiPointerLeave = useCallback(() => {\n      if (interaction === \"pointer\") {\n        setInteraction(\"none\");\n      }\n    }, [interaction, setInteraction]);\n\n    useLayoutEffect(() => {\n      if (!placeholderContainerRef.current) {\n        return;\n      }\n\n      const row = placeholderContainerRef.current.childNodes[0];\n      const categoryHeader = placeholderContainerRef.current.childNodes[1];\n\n      if (row instanceof HTMLElement) {\n        const style = window.getComputedStyle(row);\n\n        rowScrollMarginTopRef.current = parseFloat(style.scrollMarginTop);\n        rowScrollMarginBottomRef.current = parseFloat(style.scrollMarginBottom);\n      }\n\n      if (categoryHeader instanceof HTMLElement) {\n        categoryHeaderHeightRef.current = categoryHeader.offsetHeight;\n      }\n    }, []);\n\n    // Customize `scrollIntoView` behavior to take into account category headers and margins\n    const calculateViewLocation = useCallback(\n      ({\n        itemTop,\n        itemBottom,\n        viewportTop,\n        viewportBottom,\n        locationParams: { behavior, align, ...params },\n      }: CalculateViewLocationParams) => {\n        if (\n          itemTop -\n            (categoryHeaderHeightRef.current + rowScrollMarginTopRef.current) <\n          viewportTop\n        ) {\n          return {\n            ...params,\n            behavior,\n            align: align ?? \"start\",\n          };\n        }\n\n        if (itemBottom > viewportBottom) {\n          return {\n            ...params,\n            behavior,\n            align: align ?? \"end\",\n            offset: rowScrollMarginBottomRef.current,\n          };\n        }\n\n        return null;\n      },\n      []\n    );\n\n    useEffect(() => {\n      if (interaction === \"keyboard\") {\n        virtuosoRef.current?.scrollIntoView({\n          index: selectedRowIndex,\n          behavior: \"auto\",\n          calculateViewLocation,\n        });\n      }\n    }, [interaction, selectedRowIndex, calculateViewLocation]);\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        <div\n          style={{\n            visibility: \"hidden\",\n            height: 0,\n          }}\n          ref={placeholderContainerRef}\n        >\n          {/* Virtualized rows are absolutely positioned so they won't make\n            the container automatically pick up their width. To achieve\n            an automatic width, we add a relative (but hidden) full row. */}\n          <Row attributes={placeholderRowAttributes}>\n            {placeholderColumns.map((placeholder, index) => (\n              <Emoji emoji={placeholder} key={index} />\n            ))}\n          </Row>\n          {/* We also add a hidden category header to get its computed height. */}\n          <CategoryHeader category=\"Category\" />\n        </div>\n        {isLoading ? (\n          <Loading />\n        ) : error ? (\n          <Error error={error} />\n        ) : data.count === 0 ? (\n          <Empty />\n        ) : (\n          <Grid>\n            <GroupedVirtuoso\n              ref={virtuosoRef}\n              components={{\n                Scroller: VirtuosoScroller,\n                List: VirtuosoList,\n                TopItemList: VirtuosoTopList,\n              }}\n              groupCounts={data.categoriesRowCounts}\n              groupContent={(groupIndex) => {\n                const category = data.categories[groupIndex];\n\n                if (!category) {\n                  return null;\n                }\n\n                return <CategoryHeader category={category} />;\n              }}\n              itemContent={(rowIndex, groupIndex) => {\n                const categoryRow = data.rows[rowIndex];\n                const categoryRowIndex =\n                  data.categoriesRowIndices[groupIndex]?.indexOf(rowIndex);\n                const categoryRowsCount = data.categoriesRowCounts[groupIndex];\n\n                if (\n                  categoryRow === undefined ||\n                  categoryRowIndex === undefined ||\n                  categoryRowsCount === undefined\n                ) {\n                  return null;\n                }\n\n                return (\n                  <Row\n                    attributes={{\n                      rowIndex,\n                      categoryRowIndex,\n                      categoryRowsCount,\n                    }}\n                  >\n                    {categoryRow.map((emoji, columnIndex) => {\n                      const isSelected =\n                        interaction !== \"none\" &&\n                        selectedColumnIndex === columnIndex &&\n                        selectedRowIndex === rowIndex;\n\n                      return (\n                        <Emoji\n                          key={emoji.emoji}\n                          role=\"gridcell\"\n                          aria-colindex={columnIndex}\n                          aria-selected={isSelected || undefined}\n                          data-selected={isSelected || undefined}\n                          onMouseDown={preventDefault}\n                          tabIndex={-1}\n                          onPointerEnter={() => {\n                            setPointerSelection(columnIndex, rowIndex);\n                          }}\n                          onPointerLeave={handleEmojiPointerLeave}\n                          onClick={(event) => {\n                            onEmojiSelect?.(emoji.emoji);\n                            event.stopPropagation();\n                          }}\n                          emoji={emoji.emoji}\n                        />\n                      );\n                    })}\n                  </Row>\n                );\n              }}\n            />\n          </Grid>\n        )}\n        {selectedEmoji && interaction !== \"none\" && (\n          <div aria-live=\"polite\" style={visuallyHidden}>\n            {selectedEmoji.name}\n          </div>\n        )}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  EmojiPickerRoot.displayName = EMOJIPICKER_ROOT_NAME;\n  EmojiPickerContent.displayName = EMOJIPICKER_CONTENT_NAME;\n  EmojiPickerSearch.displayName = EMOJIPICKER_SEARCH_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as EmojiPicker.*\nexport {\n  EmojiPickerContent as Content,\n  EmojiPickerRoot as Root,\n  EmojiPickerSearch as Search,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;AA2CA;AACA;AACA;AAEA;AACA;AACA;AAkBA;AAAyB;AACb;AACD;AACT;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACE;AACE;AAEA;AACE;AAAyB;AAC3B;AACF;AAGF;AACE;AACA;AAAqB;AAGvB;AAA4B;AAExB;AACA;AACA;AAA4B;AAC9B;AACC;AAGH;AAAsB;AAKlB;AACE;AAAA;AAGF;AAEA;AACE;AACA;AAAA;AAGF;AAEA;AAAmB;AAIf;AACE;AACA;AAEA;AACE;AACA;AAA6C;AAC/C;AAEA;AAA8C;AAGhD;AAAA;AACF;AAKE;AAEA;AACE;AAAA;AAGF;AACE;AACA;AAEA;AACE;AACA;AAAwB;AAC1B;AAEA;AAA8C;AAGhD;AAAA;AACF;AAKE;AAEA;AACE;AAEA;AACE;AAA6C;AAC/C;AAGF;AAAA;AACF;AAKE;AAEA;AACE;AAEA;AACE;AAAyC;AAC3C;AAGF;AAAA;AACF;AACF;AACF;AACyD;AAG3D;AACE;AACE;AAAA;AAGF;AACE;AACE;AACE;AAAA;AAGF;AAAuB;AACH;AACX;AAGT;AAAO;AACL;AACkB;AAClB;AACF;AAEF;AAAe;AAChB;AAGH;AAAqB;AAEjB;AACA;AAAa;AACf;AACa;AAGf;AAA4B;AAExB;AACE;AACA;AAAa;AAEb;AAAuB;AACzB;AACF;AACa;AAGf;AACE;AACA;AACE;AACE;AAA0B;AAC3B;AAGH;AACE;AACA;AAAiC;AACnC;AAGF;AACE;AACE;AAAe;AACjB;AAGF;AACG;AACQ;AACL;AACA;AACsB;AACtB;AACU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEC;AAGP;AAeA;AAA0B;AAEtB;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AAGF;AAAqB;AAEjB;AAEA;AACE;AAAA;AAGF;AACA;AACA;AAAc;AAChB;AACmC;AAGrC;AAAsB;AAElB;AACE;AAAA;AAGF;AACE;AAA2B;AAE3B;AAA4B;AAE5B;AAAyB;AAEzB;AAA2B;AAE3B;AACE;AACA;AAAmB;AACrB;AACF;AACF;AAC+C;AAGjD;AACE;AAAA;AACgE;AAChE;AAGF;AACG;AACM;AACL;AACA;AACU;AACC;AACP;AACC;AACP;AAGN;AAEA;AAA+D;AAChB;AAAQ;AAAQ;AAAS;AAExB;AAAQ;AAAQ;AAAS;AAEpE;AAAW;AACT;AAAe;AAAc;AAChC;AAEmB;AAAQ;AAAO;AACjB;AAAQ;AAAO;AAChB;AAAQ;AAAO;AAEA;AAAQ;AAC3C;AAEA;AAAuE;AAC3D;AACQ;AAEpB;AAKA;AAAyB;AAErB;AACG;AAAQ;AAAiB;AAAiB;AAAgB;AACxD;AACH;AAGN;AAEA;AAAwB;AAEpB;AACG;AAAQ;AAAoB;AAAgB;AAC1C;AACH;AAGN;AAyBA;AAA2B;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AAAsB;AACiB;AACa;AAEpD;AAAoE;AACd;AACzC;AAEb;AAAqB;AAEjB;AAEI;AACG;AACM;AACU;AACX;AACS;AACR;AAEJ;AACH;AAEJ;AACF;AACM;AAEV;AAA2B;AACc;AAC/B;AAGV;AACE;AAAqB;AAGvB;AACE;AACE;AAAqB;AACvB;AAGF;AACE;AACE;AAAA;AAGF;AACA;AAEA;AACE;AAEA;AACA;AAAsE;AAGxE;AACE;AAAiD;AACnD;AAIF;AAA8B;AAC3B;AACC;AACA;AACA;AACA;AAC6C;AAE7C;AAKE;AAAO;AACF;AACH;AACgB;AAClB;AAGF;AACE;AAAO;AACF;AACH;AACgB;AACiB;AACnC;AAGF;AAAO;AACT;AACC;AAGH;AACE;AACE;AAAoC;AAC3B;AACG;AACV;AACD;AACH;AAGF;AACG;AAAc;AAAY;AACzB;AAAC;AACQ;AACO;AACJ;AACV;AACK;AAKL;AAAC;AAAgB;AAEZ;AAAa;AACf;AACH;AAEC;AAAwB;AAAW;AAAA;AACtC;AAIG;AAAM;AAIN;AACE;AACM;AACO;AACA;AACJ;AACO;AACf;AACkB;AAEhB;AAEA;AACE;AAAO;AAGT;AAAQ;AAAe;AAAoB;AAC7C;AAEE;AACA;AAEA;AAEA;AAKE;AAAO;AAGT;AACG;AACa;AACV;AACA;AACA;AACF;AAGE;AAKA;AACG;AAEM;AACU;AACc;AACA;AAChB;AACH;AAER;AAAyC;AAC3C;AACgB;AAEd;AACA;AAAsB;AACxB;AACa;AACf;AAEH;AACH;AAEJ;AACF;AACF;AAGC;AAAc;AAAgB;AACd;AACjB;AAAA;AAEJ;AAGN;AAEA;AACE;AACA;AACA;AACF;;;;"}

package/dist/primitives/EmojiPicker/index.mjs

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useLayoutEffect } from '@liveblocks/react/_private';
 import { Slot } from '@radix-ui/react-slot';
-import { useRef, useTransition, useState, useCallback, useEffect, forwardRef, useMemo, useLayoutEffect } from 'react';
+import { useRef, useTransition, useState, useCallback, useEffect, forwardRef, useMemo } from 'react';
 import { GroupedVirtuoso } from 'react-virtuoso';
 import { isKey } from '../../utils/is-key.mjs';
 import { requestIdleCallback, cancelIdleCallback } from '../../utils/request-idle-callback.mjs';

package/dist/primitives/EmojiPicker/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/primitives/EmojiPicker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ChangeEvent, KeyboardEvent, SyntheticEvent } from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  useTransition,\n} from \"react\";\nimport type {\n  CalculateViewLocationParams,\n  GroupedVirtuosoHandle,\n  ListProps as VirtuosoListProps,\n  ScrollerProps,\n  TopItemListProps,\n} from \"react-virtuoso\";\nimport { GroupedVirtuoso } from \"react-virtuoso\";\n\nimport { isKey } from \"../../utils/is-key\";\nimport {\n  cancelIdleCallback,\n  requestIdleCallback,\n} from \"../../utils/request-idle-callback\";\nimport { visuallyHidden } from \"../../utils/visually-hidden\";\nimport { Emoji as EmojiPrimitive } from \"../internal/Emoji\";\nimport { EmojiPickerContext, useEmojiPicker } from \"./contexts\";\nimport type {\n  EmojiData,\n  EmojiPickerContentComponents,\n  EmojiPickerContentEmojiRowAttributes,\n  EmojiPickerContentProps,\n  EmojiPickerData,\n  EmojiPickerRootProps,\n  EmojiPickerSearchProps,\n  EmojiPickerSelectionDirection,\n} from \"./types\";\nimport { filterEmojis, generateEmojiPickerData, getEmojiData } from \"./utils\";\n\nconst DEFAULT_COLUMNS = 10;\nconst DEFAULT_LOCALE = \"en\";\nconst LOADING_MINIMUM_TIMEOUT = 100;\n\nconst EMOJIPICKER_ROOT_NAME = \"EmojiPickerRoot\";\nconst EMOJIPICKER_CONTENT_NAME = \"EmojiPickerContent\";\nconst EMOJIPICKER_SEARCH_NAME = \"EmojiPickerSearch\";\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * Surrounds the emoji picker, it handles emoji data and coordinates\n * `EmojiPicker.Search` and `EmojiPicker.Content`.\n *\n * @example\n * <EmojiPicker.Root>\n *   <EmojiPicker.Search />\n *   <EmojiPicker.Content />\n * </EmojiPicker.Root>\n */\nfunction EmojiPickerRoot({\n  columns = DEFAULT_COLUMNS,\n  locale = DEFAULT_LOCALE,\n  onEmojiSelect,\n  children,\n}: EmojiPickerRootProps) {\n  const emojiData = useRef<EmojiData>();\n  const search = useRef(\"\");\n  const [, startEmojisTransition] = useTransition();\n  const [data, setData] = useState<EmojiPickerData>();\n  const [error, setError] = useState<Error>();\n  const [selectedColumnIndex, setSelectedColumnIndex] = useState(0);\n  const [selectedRowIndex, setSelectedRowIndex] = useState(0);\n  const [interaction, setInteraction] = useState<\n    \"keyboard\" | \"pointer\" | \"none\"\n  >(\"none\");\n\n  const selectCurrentEmoji = useCallback(() => {\n    if (onEmojiSelect) {\n      const emoji = data?.rows[selectedRowIndex]?.[selectedColumnIndex];\n\n      if (emoji) {\n        onEmojiSelect(emoji.emoji);\n      }\n    }\n  }, [data?.rows, onEmojiSelect, selectedColumnIndex, selectedRowIndex]);\n\n  const resetSelection = useCallback(() => {\n    setSelectedColumnIndex(0);\n    setSelectedRowIndex(0);\n  }, []);\n\n  const setPointerSelection = useCallback(\n    (columnIndex: number, rowIndex: number) => {\n      setInteraction(\"pointer\");\n      setSelectedColumnIndex(columnIndex);\n      setSelectedRowIndex(rowIndex);\n    },\n    []\n  );\n\n  const moveSelection = useCallback(\n    (\n      direction: EmojiPickerSelectionDirection,\n      event: KeyboardEvent<HTMLInputElement>\n    ) => {\n      if (!data) {\n        return;\n      }\n\n      event.preventDefault();\n\n      if (interaction === \"none\") {\n        setInteraction(\"keyboard\");\n        return;\n      }\n\n      setInteraction(\"keyboard\");\n\n      switch (direction) {\n        // If first column, move to last column of previous row (if available)\n        // Otherwise, move to previous column\n        case \"left\": {\n          if (selectedColumnIndex === 0) {\n            const previousRowIndex = selectedRowIndex - 1;\n            const previousRow = data.rows[previousRowIndex];\n\n            if (previousRow) {\n              setSelectedRowIndex(previousRowIndex);\n              setSelectedColumnIndex(previousRow.length - 1);\n            }\n          } else {\n            setSelectedColumnIndex(selectedColumnIndex - 1);\n          }\n\n          break;\n        }\n\n        // If last column, move to first column of next row (if available)\n        // Otherwise, move to next column\n        case \"right\": {\n          const currentRow = data.rows[selectedRowIndex];\n\n          if (!currentRow) {\n            return;\n          }\n\n          if (selectedColumnIndex === currentRow.length - 1) {\n            const nextRowIndex = selectedRowIndex + 1;\n            const nextRow = data.rows[nextRowIndex];\n\n            if (nextRow) {\n              setSelectedRowIndex(nextRowIndex);\n              setSelectedColumnIndex(0);\n            }\n          } else {\n            setSelectedColumnIndex(selectedColumnIndex + 1);\n          }\n\n          break;\n        }\n\n        // Move to same column of previous row\n        // If same column is not available, move to last column of previous row\n        case \"up\": {\n          const previousRow = data.rows[selectedRowIndex - 1];\n\n          if (previousRow) {\n            setSelectedRowIndex(selectedRowIndex - 1);\n\n            if (!previousRow[selectedColumnIndex]) {\n              setSelectedColumnIndex(previousRow.length - 1);\n            }\n          }\n\n          break;\n        }\n\n        // Move to same column of next row\n        // If same column is not available, move to last column of next row\n        case \"down\": {\n          const nextRow = data.rows[selectedRowIndex + 1];\n\n          if (nextRow) {\n            setSelectedRowIndex(selectedRowIndex + 1);\n\n            if (!nextRow[selectedColumnIndex]) {\n              setSelectedColumnIndex(nextRow.length - 1);\n            }\n          }\n\n          break;\n        }\n      }\n    },\n    [data, interaction, selectedColumnIndex, selectedRowIndex]\n  );\n\n  const updateEmojis = useCallback(() => {\n    if (!emojiData.current) {\n      return;\n    }\n\n    startEmojisTransition(() => {\n      setData(() => {\n        if (!emojiData.current) {\n          return;\n        }\n\n        const filteredEmojis = filterEmojis(\n          emojiData.current.emojis,\n          search.current\n        );\n\n        return generateEmojiPickerData(\n          filteredEmojis,\n          emojiData.current.categories,\n          columns\n        );\n      });\n      resetSelection();\n    });\n  }, [columns, resetSelection]);\n\n  const handleSearch = useCallback(\n    (value: string) => {\n      search.current = value;\n      updateEmojis();\n    },\n    [updateEmojis]\n  );\n\n  const initializeEmojiData = useCallback(\n    async (locale: string) => {\n      try {\n        emojiData.current = await getEmojiData(locale);\n        updateEmojis();\n      } catch (error) {\n        setError(error as Error);\n      }\n    },\n    [updateEmojis]\n  );\n\n  useEffect(() => {\n    let idleCallbackId: number;\n    const timeoutId = setTimeout(() => {\n      idleCallbackId = requestIdleCallback(() => {\n        initializeEmojiData(locale);\n      });\n    }, LOADING_MINIMUM_TIMEOUT);\n\n    return () => {\n      clearTimeout(timeoutId);\n      cancelIdleCallback(idleCallbackId);\n    };\n  }, [locale]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (interaction === \"none\") {\n      resetSelection();\n    }\n  }, [interaction]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <EmojiPickerContext.Provider\n      value={{\n        data: data as EmojiPickerData,\n        error: error as undefined,\n        isLoading: (!data && !error) as false,\n        columns,\n        onSearch: handleSearch,\n        onEmojiSelect,\n        selectCurrentEmoji,\n        selectedRowIndex,\n        selectedColumnIndex,\n        moveSelection,\n        setPointerSelection,\n        interaction,\n        setInteraction,\n      }}\n    >\n      {children}\n    </EmojiPickerContext.Provider>\n  );\n}\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * The search input of the emoji picker. It also affects the focus and selection\n * within `EmojiPicker.Content`.\n *\n * @example\n * <EmojiPicker.Search />\n */\nconst EmojiPickerSearch = forwardRef<HTMLInputElement, EmojiPickerSearchProps>(\n  ({ asChild, value, defaultValue, onChange, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"input\";\n    const {\n      onSearch,\n      selectCurrentEmoji,\n      moveSelection,\n      interaction,\n      setInteraction,\n    } = useEmojiPicker();\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const value = event.target.value;\n        setInteraction(value ? \"keyboard\" : \"none\");\n        onSearch(value);\n      },\n      [onChange, onSearch, setInteraction]\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isKey(event, \"ArrowLeft\")) {\n          moveSelection(\"left\", event);\n        } else if (isKey(event, \"ArrowRight\")) {\n          moveSelection(\"right\", event);\n        } else if (isKey(event, \"ArrowUp\")) {\n          moveSelection(\"up\", event);\n        } else if (isKey(event, \"ArrowDown\")) {\n          moveSelection(\"down\", event);\n        } else if (isKey(event, \"Enter\")) {\n          if (interaction !== \"none\") {\n            event.preventDefault();\n            selectCurrentEmoji();\n          }\n        }\n      },\n      [interaction, moveSelection, selectCurrentEmoji]\n    );\n\n    useEffect(() => {\n      onSearch(\n        value ? String(value) : defaultValue ? String(defaultValue) : \"\"\n      );\n    }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <Component\n        type=\"search\"\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\nconst defaultContentComponents: EmojiPickerContentComponents = {\n  CategoryHeader: ({ category, ...props }) => <div {...props}>{category}</div>,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Row: ({ children, attributes, ...props }) => <div {...props}>{children}</div>,\n  Emoji: ({ emoji, ...props }) => (\n    <button {...props}>\n      <EmojiPrimitive emoji={emoji} />\n    </button>\n  ),\n  Loading: (props) => <div {...props} />,\n  Empty: (props) => <div {...props} />,\n  Grid: (props) => <div {...props} />,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Error: ({ error, ...props }) => <div {...props} />,\n};\n\nconst placeholderRowAttributes: EmojiPickerContentEmojiRowAttributes = {\n  rowIndex: -1,\n  categoryRowIndex: -1,\n  categoryRowsCount: 0,\n};\n\n// About `data-testid={undefined}`: Virtuoso bakes test IDs into the components we pass\n// to it, so we manually remove them.\n\nconst VirtuosoScroller = forwardRef<HTMLDivElement, ScrollerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} tabIndex={-1} data-testid={undefined} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  }\n);\n\nconst VirtuosoTopList = forwardRef<HTMLDivElement, TopItemListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} data-testid={undefined} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  }\n);\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * The main content of the emoji picker, either displaying the emoji grid or various\n * alternative states (loading, empty, and error).\n *\n * @example\n * <EmojiPicker.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 */\nconst EmojiPickerContent = forwardRef<HTMLDivElement, EmojiPickerContentProps>(\n  ({ components, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n    const virtuosoRef = useRef<GroupedVirtuosoHandle>(null);\n    const placeholderContainerRef = useRef<HTMLDivElement>(null);\n    const rowScrollMarginTopRef = useRef<number>(0);\n    const rowScrollMarginBottomRef = useRef<number>(0);\n    const categoryHeaderHeightRef = useRef<number>(0);\n    const {\n      data,\n      error,\n      isLoading,\n      columns,\n      onEmojiSelect,\n      selectedColumnIndex,\n      selectedRowIndex,\n      setPointerSelection,\n      interaction,\n      setInteraction,\n    } = useEmojiPicker();\n    const selectedEmoji = useMemo(\n      () => data?.rows[selectedRowIndex]?.[selectedColumnIndex],\n      [data?.rows, selectedColumnIndex, selectedRowIndex]\n    );\n    const { Loading, Empty, Error, CategoryHeader, Grid, Row, Emoji } = useMemo(\n      () => ({ ...defaultContentComponents, ...components }),\n      [components]\n    );\n    const VirtuosoList = useMemo(\n      () =>\n        forwardRef<HTMLDivElement, VirtuosoListProps>(\n          ({ children, ...props }, forwardedRef) => {\n            return (\n              <div\n                role=\"grid\"\n                aria-colcount={columns}\n                {...props}\n                data-testid={undefined}\n                ref={forwardedRef}\n              >\n                {children}\n              </div>\n            );\n          }\n        ),\n      [columns]\n    );\n    const placeholderColumns = useMemo(\n      () => Array<string>(columns).fill(\"🌫️\"),\n      [columns]\n    );\n\n    const preventDefault = useCallback((event: SyntheticEvent) => {\n      event.preventDefault();\n    }, []);\n\n    const handleEmojiPointerLeave = useCallback(() => {\n      if (interaction === \"pointer\") {\n        setInteraction(\"none\");\n      }\n    }, [interaction, setInteraction]);\n\n    useLayoutEffect(() => {\n      if (!placeholderContainerRef.current) {\n        return;\n      }\n\n      const row = placeholderContainerRef.current.childNodes[0];\n      const categoryHeader = placeholderContainerRef.current.childNodes[1];\n\n      if (row instanceof HTMLElement) {\n        const style = window.getComputedStyle(row);\n\n        rowScrollMarginTopRef.current = parseFloat(style.scrollMarginTop);\n        rowScrollMarginBottomRef.current = parseFloat(style.scrollMarginBottom);\n      }\n\n      if (categoryHeader instanceof HTMLElement) {\n        categoryHeaderHeightRef.current = categoryHeader.offsetHeight;\n      }\n    }, []);\n\n    // Customize `scrollIntoView` behavior to take into account category headers and margins\n    const calculateViewLocation = useCallback(\n      ({\n        itemTop,\n        itemBottom,\n        viewportTop,\n        viewportBottom,\n        locationParams: { behavior, align, ...params },\n      }: CalculateViewLocationParams) => {\n        if (\n          itemTop -\n            (categoryHeaderHeightRef.current + rowScrollMarginTopRef.current) <\n          viewportTop\n        ) {\n          return {\n            ...params,\n            behavior,\n            align: align ?? \"start\",\n          };\n        }\n\n        if (itemBottom > viewportBottom) {\n          return {\n            ...params,\n            behavior,\n            align: align ?? \"end\",\n            offset: rowScrollMarginBottomRef.current,\n          };\n        }\n\n        return null;\n      },\n      []\n    );\n\n    useEffect(() => {\n      if (interaction === \"keyboard\") {\n        virtuosoRef.current?.scrollIntoView({\n          index: selectedRowIndex,\n          behavior: \"auto\",\n          calculateViewLocation,\n        });\n      }\n    }, [interaction, selectedRowIndex, calculateViewLocation]);\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        <div\n          style={{\n            visibility: \"hidden\",\n            height: 0,\n          }}\n          ref={placeholderContainerRef}\n        >\n          {/* Virtualized rows are absolutely positioned so they won't make\n            the container automatically pick up their width. To achieve\n            an automatic width, we add a relative (but hidden) full row. */}\n          <Row attributes={placeholderRowAttributes}>\n            {placeholderColumns.map((placeholder, index) => (\n              <Emoji emoji={placeholder} key={index} />\n            ))}\n          </Row>\n          {/* We also add a hidden category header to get its computed height. */}\n          <CategoryHeader category=\"Category\" />\n        </div>\n        {isLoading ? (\n          <Loading />\n        ) : error ? (\n          <Error error={error} />\n        ) : data.count === 0 ? (\n          <Empty />\n        ) : (\n          <Grid>\n            <GroupedVirtuoso\n              ref={virtuosoRef}\n              components={{\n                Scroller: VirtuosoScroller,\n                List: VirtuosoList,\n                TopItemList: VirtuosoTopList,\n              }}\n              groupCounts={data.categoriesRowCounts}\n              groupContent={(groupIndex) => {\n                const category = data.categories[groupIndex];\n\n                if (!category) {\n                  return null;\n                }\n\n                return <CategoryHeader category={category} />;\n              }}\n              itemContent={(rowIndex, groupIndex) => {\n                const categoryRow = data.rows[rowIndex];\n                const categoryRowIndex =\n                  data.categoriesRowIndices[groupIndex]?.indexOf(rowIndex);\n                const categoryRowsCount = data.categoriesRowCounts[groupIndex];\n\n                if (\n                  categoryRow === undefined ||\n                  categoryRowIndex === undefined ||\n                  categoryRowsCount === undefined\n                ) {\n                  return null;\n                }\n\n                return (\n                  <Row\n                    attributes={{\n                      rowIndex,\n                      categoryRowIndex,\n                      categoryRowsCount,\n                    }}\n                  >\n                    {categoryRow.map((emoji, columnIndex) => {\n                      const isSelected =\n                        interaction !== \"none\" &&\n                        selectedColumnIndex === columnIndex &&\n                        selectedRowIndex === rowIndex;\n\n                      return (\n                        <Emoji\n                          key={emoji.emoji}\n                          role=\"gridcell\"\n                          aria-colindex={columnIndex}\n                          aria-selected={isSelected || undefined}\n                          data-selected={isSelected || undefined}\n                          onMouseDown={preventDefault}\n                          tabIndex={-1}\n                          onPointerEnter={() => {\n                            setPointerSelection(columnIndex, rowIndex);\n                          }}\n                          onPointerLeave={handleEmojiPointerLeave}\n                          onClick={(event) => {\n                            onEmojiSelect?.(emoji.emoji);\n                            event.stopPropagation();\n                          }}\n                          emoji={emoji.emoji}\n                        />\n                      );\n                    })}\n                  </Row>\n                );\n              }}\n            />\n          </Grid>\n        )}\n        {selectedEmoji && interaction !== \"none\" && (\n          <div aria-live=\"polite\" style={visuallyHidden}>\n            {selectedEmoji.name}\n          </div>\n        )}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  EmojiPickerRoot.displayName = EMOJIPICKER_ROOT_NAME;\n  EmojiPickerContent.displayName = EMOJIPICKER_CONTENT_NAME;\n  EmojiPickerSearch.displayName = EMOJIPICKER_SEARCH_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as EmojiPicker.*\nexport {\n  EmojiPickerContent as Content,\n  EmojiPickerRoot as Root,\n  EmojiPickerSearch as Search,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AA2CA;AACA;AACA;AAEA;AACA;AACA;AAkBA;AAAyB;AACb;AACD;AACT;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACE;AACE;AAEA;AACE;AAAyB;AAC3B;AACF;AAGF;AACE;AACA;AAAqB;AAGvB;AAA4B;AAExB;AACA;AACA;AAA4B;AAC9B;AACC;AAGH;AAAsB;AAKlB;AACE;AAAA;AAGF;AAEA;AACE;AACA;AAAA;AAGF;AAEA;AAAmB;AAIf;AACE;AACA;AAEA;AACE;AACA;AAA6C;AAC/C;AAEA;AAA8C;AAGhD;AAAA;AACF;AAKE;AAEA;AACE;AAAA;AAGF;AACE;AACA;AAEA;AACE;AACA;AAAwB;AAC1B;AAEA;AAA8C;AAGhD;AAAA;AACF;AAKE;AAEA;AACE;AAEA;AACE;AAA6C;AAC/C;AAGF;AAAA;AACF;AAKE;AAEA;AACE;AAEA;AACE;AAAyC;AAC3C;AAGF;AAAA;AACF;AACF;AACF;AACyD;AAG3D;AACE;AACE;AAAA;AAGF;AACE;AACE;AACE;AAAA;AAGF;AAAuB;AACH;AACX;AAGT;AAAO;AACL;AACkB;AAClB;AACF;AAEF;AAAe;AAChB;AAGH;AAAqB;AAEjB;AACA;AAAa;AACf;AACa;AAGf;AAA4B;AAExB;AACE;AACA;AAAa;AAEb;AAAuB;AACzB;AACF;AACa;AAGf;AACE;AACA;AACE;AACE;AAA0B;AAC3B;AAGH;AACE;AACA;AAAiC;AACnC;AAGF;AACE;AACE;AAAe;AACjB;AAGF;AACG;AACQ;AACL;AACA;AACsB;AACtB;AACU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEC;AAGP;AAeA;AAA0B;AAEtB;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AAGF;AAAqB;AAEjB;AAEA;AACE;AAAA;AAGF;AACA;AACA;AAAc;AAChB;AACmC;AAGrC;AAAsB;AAElB;AACE;AAAA;AAGF;AACE;AAA2B;AAE3B;AAA4B;AAE5B;AAAyB;AAEzB;AAA2B;AAE3B;AACE;AACA;AAAmB;AACrB;AACF;AACF;AAC+C;AAGjD;AACE;AAAA;AACgE;AAChE;AAGF;AACG;AACM;AACL;AACA;AACU;AACC;AACP;AACC;AACP;AAGN;AAEA;AAA+D;AAChB;AAAQ;AAAQ;AAAS;AAExB;AAAQ;AAAQ;AAAS;AAEpE;AAAW;AACT;AAAe;AAAc;AAChC;AAEmB;AAAQ;AAAO;AACjB;AAAQ;AAAO;AAChB;AAAQ;AAAO;AAEA;AAAQ;AAC3C;AAEA;AAAuE;AAC3D;AACQ;AAEpB;AAKA;AAAyB;AAErB;AACG;AAAQ;AAAiB;AAAiB;AAAgB;AACxD;AACH;AAGN;AAEA;AAAwB;AAEpB;AACG;AAAQ;AAAoB;AAAgB;AAC1C;AACH;AAGN;AAyBA;AAA2B;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AAAsB;AACiB;AACa;AAEpD;AAAoE;AACd;AACzC;AAEb;AAAqB;AAEjB;AAEI;AACG;AACM;AACU;AACX;AACS;AACR;AAEJ;AACH;AAEJ;AACF;AACM;AAEV;AAA2B;AACc;AAC/B;AAGV;AACE;AAAqB;AAGvB;AACE;AACE;AAAqB;AACvB;AAGF;AACE;AACE;AAAA;AAGF;AACA;AAEA;AACE;AAEA;AACA;AAAsE;AAGxE;AACE;AAAiD;AACnD;AAIF;AAA8B;AAC3B;AACC;AACA;AACA;AACA;AAC6C;AAE7C;AAKE;AAAO;AACF;AACH;AACgB;AAClB;AAGF;AACE;AAAO;AACF;AACH;AACgB;AACiB;AACnC;AAGF;AAAO;AACT;AACC;AAGH;AACE;AACE;AAAoC;AAC3B;AACG;AACV;AACD;AACH;AAGF;AACG;AAAc;AAAY;AACzB;AAAC;AACQ;AACO;AACJ;AACV;AACK;AAKL;AAAC;AAAgB;AAEZ;AAAa;AACf;AACH;AAEC;AAAwB;AAAW;AAAA;AACtC;AAIG;AAAM;AAIN;AACE;AACM;AACO;AACA;AACJ;AACO;AACf;AACkB;AAEhB;AAEA;AACE;AAAO;AAGT;AAAQ;AAAe;AAAoB;AAC7C;AAEE;AACA;AAEA;AAEA;AAKE;AAAO;AAGT;AACG;AACa;AACV;AACA;AACA;AACF;AAGE;AAKA;AACG;AAEM;AACU;AACc;AACA;AAChB;AACH;AAER;AAAyC;AAC3C;AACgB;AAEd;AACA;AAAsB;AACxB;AACa;AACf;AAEH;AACH;AAEJ;AACF;AACF;AAGC;AAAc;AAAgB;AACd;AACjB;AAAA;AAEJ;AAGN;AAEA;AACE;AACA;AACA;AACF;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/primitives/EmojiPicker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ChangeEvent, KeyboardEvent, SyntheticEvent } from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useTransition,\n} from \"react\";\nimport type {\n  CalculateViewLocationParams,\n  GroupedVirtuosoHandle,\n  ListProps as VirtuosoListProps,\n  ScrollerProps,\n  TopItemListProps,\n} from \"react-virtuoso\";\nimport { GroupedVirtuoso } from \"react-virtuoso\";\n\nimport { isKey } from \"../../utils/is-key\";\nimport {\n  cancelIdleCallback,\n  requestIdleCallback,\n} from \"../../utils/request-idle-callback\";\nimport { visuallyHidden } from \"../../utils/visually-hidden\";\nimport { Emoji as EmojiPrimitive } from \"../internal/Emoji\";\nimport { EmojiPickerContext, useEmojiPicker } from \"./contexts\";\nimport type {\n  EmojiData,\n  EmojiPickerContentComponents,\n  EmojiPickerContentEmojiRowAttributes,\n  EmojiPickerContentProps,\n  EmojiPickerData,\n  EmojiPickerRootProps,\n  EmojiPickerSearchProps,\n  EmojiPickerSelectionDirection,\n} from \"./types\";\nimport { filterEmojis, generateEmojiPickerData, getEmojiData } from \"./utils\";\n\nconst DEFAULT_COLUMNS = 10;\nconst DEFAULT_LOCALE = \"en\";\nconst LOADING_MINIMUM_TIMEOUT = 100;\n\nconst EMOJIPICKER_ROOT_NAME = \"EmojiPickerRoot\";\nconst EMOJIPICKER_CONTENT_NAME = \"EmojiPickerContent\";\nconst EMOJIPICKER_SEARCH_NAME = \"EmojiPickerSearch\";\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * Surrounds the emoji picker, it handles emoji data and coordinates\n * `EmojiPicker.Search` and `EmojiPicker.Content`.\n *\n * @example\n * <EmojiPicker.Root>\n *   <EmojiPicker.Search />\n *   <EmojiPicker.Content />\n * </EmojiPicker.Root>\n */\nfunction EmojiPickerRoot({\n  columns = DEFAULT_COLUMNS,\n  locale = DEFAULT_LOCALE,\n  onEmojiSelect,\n  children,\n}: EmojiPickerRootProps) {\n  const emojiData = useRef<EmojiData>();\n  const search = useRef(\"\");\n  const [, startEmojisTransition] = useTransition();\n  const [data, setData] = useState<EmojiPickerData>();\n  const [error, setError] = useState<Error>();\n  const [selectedColumnIndex, setSelectedColumnIndex] = useState(0);\n  const [selectedRowIndex, setSelectedRowIndex] = useState(0);\n  const [interaction, setInteraction] = useState<\n    \"keyboard\" | \"pointer\" | \"none\"\n  >(\"none\");\n\n  const selectCurrentEmoji = useCallback(() => {\n    if (onEmojiSelect) {\n      const emoji = data?.rows[selectedRowIndex]?.[selectedColumnIndex];\n\n      if (emoji) {\n        onEmojiSelect(emoji.emoji);\n      }\n    }\n  }, [data?.rows, onEmojiSelect, selectedColumnIndex, selectedRowIndex]);\n\n  const resetSelection = useCallback(() => {\n    setSelectedColumnIndex(0);\n    setSelectedRowIndex(0);\n  }, []);\n\n  const setPointerSelection = useCallback(\n    (columnIndex: number, rowIndex: number) => {\n      setInteraction(\"pointer\");\n      setSelectedColumnIndex(columnIndex);\n      setSelectedRowIndex(rowIndex);\n    },\n    []\n  );\n\n  const moveSelection = useCallback(\n    (\n      direction: EmojiPickerSelectionDirection,\n      event: KeyboardEvent<HTMLInputElement>\n    ) => {\n      if (!data) {\n        return;\n      }\n\n      event.preventDefault();\n\n      if (interaction === \"none\") {\n        setInteraction(\"keyboard\");\n        return;\n      }\n\n      setInteraction(\"keyboard\");\n\n      switch (direction) {\n        // If first column, move to last column of previous row (if available)\n        // Otherwise, move to previous column\n        case \"left\": {\n          if (selectedColumnIndex === 0) {\n            const previousRowIndex = selectedRowIndex - 1;\n            const previousRow = data.rows[previousRowIndex];\n\n            if (previousRow) {\n              setSelectedRowIndex(previousRowIndex);\n              setSelectedColumnIndex(previousRow.length - 1);\n            }\n          } else {\n            setSelectedColumnIndex(selectedColumnIndex - 1);\n          }\n\n          break;\n        }\n\n        // If last column, move to first column of next row (if available)\n        // Otherwise, move to next column\n        case \"right\": {\n          const currentRow = data.rows[selectedRowIndex];\n\n          if (!currentRow) {\n            return;\n          }\n\n          if (selectedColumnIndex === currentRow.length - 1) {\n            const nextRowIndex = selectedRowIndex + 1;\n            const nextRow = data.rows[nextRowIndex];\n\n            if (nextRow) {\n              setSelectedRowIndex(nextRowIndex);\n              setSelectedColumnIndex(0);\n            }\n          } else {\n            setSelectedColumnIndex(selectedColumnIndex + 1);\n          }\n\n          break;\n        }\n\n        // Move to same column of previous row\n        // If same column is not available, move to last column of previous row\n        case \"up\": {\n          const previousRow = data.rows[selectedRowIndex - 1];\n\n          if (previousRow) {\n            setSelectedRowIndex(selectedRowIndex - 1);\n\n            if (!previousRow[selectedColumnIndex]) {\n              setSelectedColumnIndex(previousRow.length - 1);\n            }\n          }\n\n          break;\n        }\n\n        // Move to same column of next row\n        // If same column is not available, move to last column of next row\n        case \"down\": {\n          const nextRow = data.rows[selectedRowIndex + 1];\n\n          if (nextRow) {\n            setSelectedRowIndex(selectedRowIndex + 1);\n\n            if (!nextRow[selectedColumnIndex]) {\n              setSelectedColumnIndex(nextRow.length - 1);\n            }\n          }\n\n          break;\n        }\n      }\n    },\n    [data, interaction, selectedColumnIndex, selectedRowIndex]\n  );\n\n  const updateEmojis = useCallback(() => {\n    if (!emojiData.current) {\n      return;\n    }\n\n    startEmojisTransition(() => {\n      setData(() => {\n        if (!emojiData.current) {\n          return;\n        }\n\n        const filteredEmojis = filterEmojis(\n          emojiData.current.emojis,\n          search.current\n        );\n\n        return generateEmojiPickerData(\n          filteredEmojis,\n          emojiData.current.categories,\n          columns\n        );\n      });\n      resetSelection();\n    });\n  }, [columns, resetSelection]);\n\n  const handleSearch = useCallback(\n    (value: string) => {\n      search.current = value;\n      updateEmojis();\n    },\n    [updateEmojis]\n  );\n\n  const initializeEmojiData = useCallback(\n    async (locale: string) => {\n      try {\n        emojiData.current = await getEmojiData(locale);\n        updateEmojis();\n      } catch (error) {\n        setError(error as Error);\n      }\n    },\n    [updateEmojis]\n  );\n\n  useEffect(() => {\n    let idleCallbackId: number;\n    const timeoutId = setTimeout(() => {\n      idleCallbackId = requestIdleCallback(() => {\n        initializeEmojiData(locale);\n      });\n    }, LOADING_MINIMUM_TIMEOUT);\n\n    return () => {\n      clearTimeout(timeoutId);\n      cancelIdleCallback(idleCallbackId);\n    };\n  }, [locale]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (interaction === \"none\") {\n      resetSelection();\n    }\n  }, [interaction]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <EmojiPickerContext.Provider\n      value={{\n        data: data as EmojiPickerData,\n        error: error as undefined,\n        isLoading: (!data && !error) as false,\n        columns,\n        onSearch: handleSearch,\n        onEmojiSelect,\n        selectCurrentEmoji,\n        selectedRowIndex,\n        selectedColumnIndex,\n        moveSelection,\n        setPointerSelection,\n        interaction,\n        setInteraction,\n      }}\n    >\n      {children}\n    </EmojiPickerContext.Provider>\n  );\n}\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * The search input of the emoji picker. It also affects the focus and selection\n * within `EmojiPicker.Content`.\n *\n * @example\n * <EmojiPicker.Search />\n */\nconst EmojiPickerSearch = forwardRef<HTMLInputElement, EmojiPickerSearchProps>(\n  ({ asChild, value, defaultValue, onChange, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"input\";\n    const {\n      onSearch,\n      selectCurrentEmoji,\n      moveSelection,\n      interaction,\n      setInteraction,\n    } = useEmojiPicker();\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const value = event.target.value;\n        setInteraction(value ? \"keyboard\" : \"none\");\n        onSearch(value);\n      },\n      [onChange, onSearch, setInteraction]\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isKey(event, \"ArrowLeft\")) {\n          moveSelection(\"left\", event);\n        } else if (isKey(event, \"ArrowRight\")) {\n          moveSelection(\"right\", event);\n        } else if (isKey(event, \"ArrowUp\")) {\n          moveSelection(\"up\", event);\n        } else if (isKey(event, \"ArrowDown\")) {\n          moveSelection(\"down\", event);\n        } else if (isKey(event, \"Enter\")) {\n          if (interaction !== \"none\") {\n            event.preventDefault();\n            selectCurrentEmoji();\n          }\n        }\n      },\n      [interaction, moveSelection, selectCurrentEmoji]\n    );\n\n    useEffect(() => {\n      onSearch(\n        value ? String(value) : defaultValue ? String(defaultValue) : \"\"\n      );\n    }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <Component\n        type=\"search\"\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\nconst defaultContentComponents: EmojiPickerContentComponents = {\n  CategoryHeader: ({ category, ...props }) => <div {...props}>{category}</div>,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Row: ({ children, attributes, ...props }) => <div {...props}>{children}</div>,\n  Emoji: ({ emoji, ...props }) => (\n    <button {...props}>\n      <EmojiPrimitive emoji={emoji} />\n    </button>\n  ),\n  Loading: (props) => <div {...props} />,\n  Empty: (props) => <div {...props} />,\n  Grid: (props) => <div {...props} />,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Error: ({ error, ...props }) => <div {...props} />,\n};\n\nconst placeholderRowAttributes: EmojiPickerContentEmojiRowAttributes = {\n  rowIndex: -1,\n  categoryRowIndex: -1,\n  categoryRowsCount: 0,\n};\n\n// About `data-testid={undefined}`: Virtuoso bakes test IDs into the components we pass\n// to it, so we manually remove them.\n\nconst VirtuosoScroller = forwardRef<HTMLDivElement, ScrollerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} tabIndex={-1} data-testid={undefined} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  }\n);\n\nconst VirtuosoTopList = forwardRef<HTMLDivElement, TopItemListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} data-testid={undefined} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  }\n);\n\n/**\n * @private\n * The EmojiPicker primitive is undocumented for now and subject to change,\n * use at your own risk. If you have any feedback on it, please let us know!\n * See how we use it in the default components to learn how to use it:\n * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.\n *\n * The main content of the emoji picker, either displaying the emoji grid or various\n * alternative states (loading, empty, and error).\n *\n * @example\n * <EmojiPicker.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 */\nconst EmojiPickerContent = forwardRef<HTMLDivElement, EmojiPickerContentProps>(\n  ({ components, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n    const virtuosoRef = useRef<GroupedVirtuosoHandle>(null);\n    const placeholderContainerRef = useRef<HTMLDivElement>(null);\n    const rowScrollMarginTopRef = useRef<number>(0);\n    const rowScrollMarginBottomRef = useRef<number>(0);\n    const categoryHeaderHeightRef = useRef<number>(0);\n    const {\n      data,\n      error,\n      isLoading,\n      columns,\n      onEmojiSelect,\n      selectedColumnIndex,\n      selectedRowIndex,\n      setPointerSelection,\n      interaction,\n      setInteraction,\n    } = useEmojiPicker();\n    const selectedEmoji = useMemo(\n      () => data?.rows[selectedRowIndex]?.[selectedColumnIndex],\n      [data?.rows, selectedColumnIndex, selectedRowIndex]\n    );\n    const { Loading, Empty, Error, CategoryHeader, Grid, Row, Emoji } = useMemo(\n      () => ({ ...defaultContentComponents, ...components }),\n      [components]\n    );\n    const VirtuosoList = useMemo(\n      () =>\n        forwardRef<HTMLDivElement, VirtuosoListProps>(\n          ({ children, ...props }, forwardedRef) => {\n            return (\n              <div\n                role=\"grid\"\n                aria-colcount={columns}\n                {...props}\n                data-testid={undefined}\n                ref={forwardedRef}\n              >\n                {children}\n              </div>\n            );\n          }\n        ),\n      [columns]\n    );\n    const placeholderColumns = useMemo(\n      () => Array<string>(columns).fill(\"🌫️\"),\n      [columns]\n    );\n\n    const preventDefault = useCallback((event: SyntheticEvent) => {\n      event.preventDefault();\n    }, []);\n\n    const handleEmojiPointerLeave = useCallback(() => {\n      if (interaction === \"pointer\") {\n        setInteraction(\"none\");\n      }\n    }, [interaction, setInteraction]);\n\n    useLayoutEffect(() => {\n      if (!placeholderContainerRef.current) {\n        return;\n      }\n\n      const row = placeholderContainerRef.current.childNodes[0];\n      const categoryHeader = placeholderContainerRef.current.childNodes[1];\n\n      if (row instanceof HTMLElement) {\n        const style = window.getComputedStyle(row);\n\n        rowScrollMarginTopRef.current = parseFloat(style.scrollMarginTop);\n        rowScrollMarginBottomRef.current = parseFloat(style.scrollMarginBottom);\n      }\n\n      if (categoryHeader instanceof HTMLElement) {\n        categoryHeaderHeightRef.current = categoryHeader.offsetHeight;\n      }\n    }, []);\n\n    // Customize `scrollIntoView` behavior to take into account category headers and margins\n    const calculateViewLocation = useCallback(\n      ({\n        itemTop,\n        itemBottom,\n        viewportTop,\n        viewportBottom,\n        locationParams: { behavior, align, ...params },\n      }: CalculateViewLocationParams) => {\n        if (\n          itemTop -\n            (categoryHeaderHeightRef.current + rowScrollMarginTopRef.current) <\n          viewportTop\n        ) {\n          return {\n            ...params,\n            behavior,\n            align: align ?? \"start\",\n          };\n        }\n\n        if (itemBottom > viewportBottom) {\n          return {\n            ...params,\n            behavior,\n            align: align ?? \"end\",\n            offset: rowScrollMarginBottomRef.current,\n          };\n        }\n\n        return null;\n      },\n      []\n    );\n\n    useEffect(() => {\n      if (interaction === \"keyboard\") {\n        virtuosoRef.current?.scrollIntoView({\n          index: selectedRowIndex,\n          behavior: \"auto\",\n          calculateViewLocation,\n        });\n      }\n    }, [interaction, selectedRowIndex, calculateViewLocation]);\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        <div\n          style={{\n            visibility: \"hidden\",\n            height: 0,\n          }}\n          ref={placeholderContainerRef}\n        >\n          {/* Virtualized rows are absolutely positioned so they won't make\n            the container automatically pick up their width. To achieve\n            an automatic width, we add a relative (but hidden) full row. */}\n          <Row attributes={placeholderRowAttributes}>\n            {placeholderColumns.map((placeholder, index) => (\n              <Emoji emoji={placeholder} key={index} />\n            ))}\n          </Row>\n          {/* We also add a hidden category header to get its computed height. */}\n          <CategoryHeader category=\"Category\" />\n        </div>\n        {isLoading ? (\n          <Loading />\n        ) : error ? (\n          <Error error={error} />\n        ) : data.count === 0 ? (\n          <Empty />\n        ) : (\n          <Grid>\n            <GroupedVirtuoso\n              ref={virtuosoRef}\n              components={{\n                Scroller: VirtuosoScroller,\n                List: VirtuosoList,\n                TopItemList: VirtuosoTopList,\n              }}\n              groupCounts={data.categoriesRowCounts}\n              groupContent={(groupIndex) => {\n                const category = data.categories[groupIndex];\n\n                if (!category) {\n                  return null;\n                }\n\n                return <CategoryHeader category={category} />;\n              }}\n              itemContent={(rowIndex, groupIndex) => {\n                const categoryRow = data.rows[rowIndex];\n                const categoryRowIndex =\n                  data.categoriesRowIndices[groupIndex]?.indexOf(rowIndex);\n                const categoryRowsCount = data.categoriesRowCounts[groupIndex];\n\n                if (\n                  categoryRow === undefined ||\n                  categoryRowIndex === undefined ||\n                  categoryRowsCount === undefined\n                ) {\n                  return null;\n                }\n\n                return (\n                  <Row\n                    attributes={{\n                      rowIndex,\n                      categoryRowIndex,\n                      categoryRowsCount,\n                    }}\n                  >\n                    {categoryRow.map((emoji, columnIndex) => {\n                      const isSelected =\n                        interaction !== \"none\" &&\n                        selectedColumnIndex === columnIndex &&\n                        selectedRowIndex === rowIndex;\n\n                      return (\n                        <Emoji\n                          key={emoji.emoji}\n                          role=\"gridcell\"\n                          aria-colindex={columnIndex}\n                          aria-selected={isSelected || undefined}\n                          data-selected={isSelected || undefined}\n                          onMouseDown={preventDefault}\n                          tabIndex={-1}\n                          onPointerEnter={() => {\n                            setPointerSelection(columnIndex, rowIndex);\n                          }}\n                          onPointerLeave={handleEmojiPointerLeave}\n                          onClick={(event) => {\n                            onEmojiSelect?.(emoji.emoji);\n                            event.stopPropagation();\n                          }}\n                          emoji={emoji.emoji}\n                        />\n                      );\n                    })}\n                  </Row>\n                );\n              }}\n            />\n          </Grid>\n        )}\n        {selectedEmoji && interaction !== \"none\" && (\n          <div aria-live=\"polite\" style={visuallyHidden}>\n            {selectedEmoji.name}\n          </div>\n        )}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  EmojiPickerRoot.displayName = EMOJIPICKER_ROOT_NAME;\n  EmojiPickerContent.displayName = EMOJIPICKER_CONTENT_NAME;\n  EmojiPickerSearch.displayName = EMOJIPICKER_SEARCH_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as EmojiPicker.*\nexport {\n  EmojiPickerContent as Content,\n  EmojiPickerRoot as Root,\n  EmojiPickerSearch as Search,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;AA2CA;AACA;AACA;AAEA;AACA;AACA;AAkBA;AAAyB;AACb;AACD;AACT;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACE;AACE;AAEA;AACE;AAAyB;AAC3B;AACF;AAGF;AACE;AACA;AAAqB;AAGvB;AAA4B;AAExB;AACA;AACA;AAA4B;AAC9B;AACC;AAGH;AAAsB;AAKlB;AACE;AAAA;AAGF;AAEA;AACE;AACA;AAAA;AAGF;AAEA;AAAmB;AAIf;AACE;AACA;AAEA;AACE;AACA;AAA6C;AAC/C;AAEA;AAA8C;AAGhD;AAAA;AACF;AAKE;AAEA;AACE;AAAA;AAGF;AACE;AACA;AAEA;AACE;AACA;AAAwB;AAC1B;AAEA;AAA8C;AAGhD;AAAA;AACF;AAKE;AAEA;AACE;AAEA;AACE;AAA6C;AAC/C;AAGF;AAAA;AACF;AAKE;AAEA;AACE;AAEA;AACE;AAAyC;AAC3C;AAGF;AAAA;AACF;AACF;AACF;AACyD;AAG3D;AACE;AACE;AAAA;AAGF;AACE;AACE;AACE;AAAA;AAGF;AAAuB;AACH;AACX;AAGT;AAAO;AACL;AACkB;AAClB;AACF;AAEF;AAAe;AAChB;AAGH;AAAqB;AAEjB;AACA;AAAa;AACf;AACa;AAGf;AAA4B;AAExB;AACE;AACA;AAAa;AAEb;AAAuB;AACzB;AACF;AACa;AAGf;AACE;AACA;AACE;AACE;AAA0B;AAC3B;AAGH;AACE;AACA;AAAiC;AACnC;AAGF;AACE;AACE;AAAe;AACjB;AAGF;AACG;AACQ;AACL;AACA;AACsB;AACtB;AACU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEC;AAGP;AAeA;AAA0B;AAEtB;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AAGF;AAAqB;AAEjB;AAEA;AACE;AAAA;AAGF;AACA;AACA;AAAc;AAChB;AACmC;AAGrC;AAAsB;AAElB;AACE;AAAA;AAGF;AACE;AAA2B;AAE3B;AAA4B;AAE5B;AAAyB;AAEzB;AAA2B;AAE3B;AACE;AACA;AAAmB;AACrB;AACF;AACF;AAC+C;AAGjD;AACE;AAAA;AACgE;AAChE;AAGF;AACG;AACM;AACL;AACA;AACU;AACC;AACP;AACC;AACP;AAGN;AAEA;AAA+D;AAChB;AAAQ;AAAQ;AAAS;AAExB;AAAQ;AAAQ;AAAS;AAEpE;AAAW;AACT;AAAe;AAAc;AAChC;AAEmB;AAAQ;AAAO;AACjB;AAAQ;AAAO;AAChB;AAAQ;AAAO;AAEA;AAAQ;AAC3C;AAEA;AAAuE;AAC3D;AACQ;AAEpB;AAKA;AAAyB;AAErB;AACG;AAAQ;AAAiB;AAAiB;AAAgB;AACxD;AACH;AAGN;AAEA;AAAwB;AAEpB;AACG;AAAQ;AAAoB;AAAgB;AAC1C;AACH;AAGN;AAyBA;AAA2B;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AAAsB;AACiB;AACa;AAEpD;AAAoE;AACd;AACzC;AAEb;AAAqB;AAEjB;AAEI;AACG;AACM;AACU;AACX;AACS;AACR;AAEJ;AACH;AAEJ;AACF;AACM;AAEV;AAA2B;AACc;AAC/B;AAGV;AACE;AAAqB;AAGvB;AACE;AACE;AAAqB;AACvB;AAGF;AACE;AACE;AAAA;AAGF;AACA;AAEA;AACE;AAEA;AACA;AAAsE;AAGxE;AACE;AAAiD;AACnD;AAIF;AAA8B;AAC3B;AACC;AACA;AACA;AACA;AAC6C;AAE7C;AAKE;AAAO;AACF;AACH;AACgB;AAClB;AAGF;AACE;AAAO;AACF;AACH;AACgB;AACiB;AACnC;AAGF;AAAO;AACT;AACC;AAGH;AACE;AACE;AAAoC;AAC3B;AACG;AACV;AACD;AACH;AAGF;AACG;AAAc;AAAY;AACzB;AAAC;AACQ;AACO;AACJ;AACV;AACK;AAKL;AAAC;AAAgB;AAEZ;AAAa;AACf;AACH;AAEC;AAAwB;AAAW;AAAA;AACtC;AAIG;AAAM;AAIN;AACE;AACM;AACO;AACA;AACJ;AACO;AACf;AACkB;AAEhB;AAEA;AACE;AAAO;AAGT;AAAQ;AAAe;AAAoB;AAC7C;AAEE;AACA;AAEA;AAEA;AAKE;AAAO;AAGT;AACG;AACa;AACV;AACA;AACA;AACF;AAGE;AAKA;AACG;AAEM;AACU;AACc;AACA;AAChB;AACH;AAER;AAAyC;AAC3C;AACgB;AAEd;AACA;AAAsB;AACxB;AACa;AACf;AAEH;AACH;AAEJ;AACF;AACF;AAGC;AAAc;AAAgB;AACd;AACjB;AAAA;AAEJ;AAGN;AAEA;AACE;AACA;AACA;AACF;;"}

package/dist/primitives/index.d.mts

@@ -3,34 +3,34 @@ import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEv
 import { CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare type Direction = "ltr" | "rtl";
-declare type SlotProp = {
+type Direction = "ltr" | "rtl";
+type SlotProp = {
     /**
      * Replace the rendered element by the one passed as a child.
      */
     asChild?: boolean;
 };
-declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
-declare type ComposerBodyText = {
+type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+type ComposerBodyText = {
     bold?: boolean;
     italic?: boolean;
     strikethrough?: boolean;
     code?: boolean;
     text: string;
 };
-declare type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
-declare type ComposerBodyMarks = {
+type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
+type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
 };
 
-declare type CommentMentionProps = ComponentPropsWithSlot<"span">;
-declare type CommentBodyMentionProps = {
+type CommentMentionProps = ComponentPropsWithSlot<"span">;
+type CommentBodyMentionProps = {
     /**
      * The mention's user ID.
      */
     userId: string;
 };
-declare type CommentLinkProps = ComponentPropsWithSlot<"a">;
+type CommentLinkProps = ComponentPropsWithSlot<"a">;
 interface CommentBodyLinkProps {
     /**
      * The link's absolute URL.
@@ -121,7 +121,7 @@ interface ComposerEditorLinkProps {
      */
     children: ReactNode;
 }
-declare type ComposerEditorMentionSuggestionsProps = {
+type ComposerEditorMentionSuggestionsProps = {
     /**
      * The list of suggested user IDs.
      */
@@ -131,11 +131,11 @@ declare type ComposerEditorMentionSuggestionsProps = {
      */
     selectedUserId?: string;
 };
-declare type ComposerEditorFloatingToolbarProps = Record<string, never>;
-declare type ComposerMentionProps = ComponentPropsWithSlot<"span">;
-declare type ComposerLinkProps = ComponentPropsWithSlot<"a">;
-declare type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
-declare type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
+type ComposerEditorFloatingToolbarProps = Record<string, never>;
+type ComposerMentionProps = ComponentPropsWithSlot<"span">;
+type ComposerLinkProps = ComponentPropsWithSlot<"a">;
+type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
+type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
 interface ComposerSuggestionsListItemProps extends ComponentPropsWithSlot<"li"> {
     /**
      * The suggestion's value.
@@ -217,8 +217,8 @@ interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
      */
     preventUnsavedChanges?: boolean;
 }
-declare type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
-declare type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
+type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
+type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
 interface ComposerMarkToggleProps extends ComponentPropsWithSlot<"button"> {
     /**
      * The text mark to toggle.
@@ -360,7 +360,7 @@ declare namespace index$1 {
   };
 }
 
-declare type ComposerContext = {
+type ComposerContext = {
     /**
      * Whether the composer is currently disabled.
      */
@@ -435,9 +435,9 @@ declare class AttachmentTooLargeError extends Error {
     constructor(message: string, origin?: "client" | "server");
 }
 
-declare type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
 interface EmojiPickerContentErrorProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The error.
@@ -450,7 +450,7 @@ interface EmojiPickerContentCategoryHeaderProps extends ComponentPropsWithoutRef
      */
     category: string;
 }
-declare type EmojiPickerContentEmojiRowAttributes = {
+type EmojiPickerContentEmojiRowAttributes = {
     /**
      * The current row's index.
      */
@@ -526,7 +526,7 @@ interface EmojiPickerContentProps extends ComponentPropsWithSlot<"div"> {
      */
     components?: Partial<EmojiPickerContentComponents>;
 }
-declare type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
+type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
 
 /**
  * @private

package/dist/primitives/index.d.ts

@@ -3,34 +3,34 @@ import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEv
 import { CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare type Direction = "ltr" | "rtl";
-declare type SlotProp = {
+type Direction = "ltr" | "rtl";
+type SlotProp = {
     /**
      * Replace the rendered element by the one passed as a child.
      */
     asChild?: boolean;
 };
-declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
-declare type ComposerBodyText = {
+type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+type ComposerBodyText = {
     bold?: boolean;
     italic?: boolean;
     strikethrough?: boolean;
     code?: boolean;
     text: string;
 };
-declare type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
-declare type ComposerBodyMarks = {
+type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
+type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
 };
 
-declare type CommentMentionProps = ComponentPropsWithSlot<"span">;
-declare type CommentBodyMentionProps = {
+type CommentMentionProps = ComponentPropsWithSlot<"span">;
+type CommentBodyMentionProps = {
     /**
      * The mention's user ID.
      */
     userId: string;
 };
-declare type CommentLinkProps = ComponentPropsWithSlot<"a">;
+type CommentLinkProps = ComponentPropsWithSlot<"a">;
 interface CommentBodyLinkProps {
     /**
      * The link's absolute URL.
@@ -121,7 +121,7 @@ interface ComposerEditorLinkProps {
      */
     children: ReactNode;
 }
-declare type ComposerEditorMentionSuggestionsProps = {
+type ComposerEditorMentionSuggestionsProps = {
     /**
      * The list of suggested user IDs.
      */
@@ -131,11 +131,11 @@ declare type ComposerEditorMentionSuggestionsProps = {
      */
     selectedUserId?: string;
 };
-declare type ComposerEditorFloatingToolbarProps = Record<string, never>;
-declare type ComposerMentionProps = ComponentPropsWithSlot<"span">;
-declare type ComposerLinkProps = ComponentPropsWithSlot<"a">;
-declare type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
-declare type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
+type ComposerEditorFloatingToolbarProps = Record<string, never>;
+type ComposerMentionProps = ComponentPropsWithSlot<"span">;
+type ComposerLinkProps = ComponentPropsWithSlot<"a">;
+type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
+type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
 interface ComposerSuggestionsListItemProps extends ComponentPropsWithSlot<"li"> {
     /**
      * The suggestion's value.
@@ -217,8 +217,8 @@ interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
      */
     preventUnsavedChanges?: boolean;
 }
-declare type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
-declare type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
+type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
+type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
 interface ComposerMarkToggleProps extends ComponentPropsWithSlot<"button"> {
     /**
      * The text mark to toggle.
@@ -360,7 +360,7 @@ declare namespace index$1 {
   };
 }
 
-declare type ComposerContext = {
+type ComposerContext = {
     /**
      * Whether the composer is currently disabled.
      */
@@ -435,9 +435,9 @@ declare class AttachmentTooLargeError extends Error {
     constructor(message: string, origin?: "client" | "server");
 }
 
-declare type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
 interface EmojiPickerContentErrorProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The error.
@@ -450,7 +450,7 @@ interface EmojiPickerContentCategoryHeaderProps extends ComponentPropsWithoutRef
      */
     category: string;
 }
-declare type EmojiPickerContentEmojiRowAttributes = {
+type EmojiPickerContentEmojiRowAttributes = {
     /**
      * The current row's index.
      */
@@ -526,7 +526,7 @@ interface EmojiPickerContentProps extends ComponentPropsWithSlot<"div"> {
      */
     components?: Partial<EmojiPickerContentComponents>;
 }
-declare type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
+type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
 
 /**
  * @private

package/dist/utils/Persist.js

@@ -3,8 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
+var _private = require('@liveblocks/react/_private');
 var react = require('react');
-var flushSync = require('./flush-sync.js');
+var reactDom = require('react-dom');
 
 
 const PERSIST_NAME = "Persist";
@@ -21,7 +22,7 @@ function useAnimationPersist(ref) {
   const [isPresent, unmount] = usePersist();
   const previousAnimationName = react.useRef(null);
   const unmountAnimationName = react.useRef(null);
-  react.useLayoutEffect(() => {
+  _private.useLayoutEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -39,7 +40,7 @@ function useAnimationPersist(ref) {
       element.removeEventListener("animationend", handleAnimationEnd);
     };
   }, [ref, unmount]);
-  react.useLayoutEffect(() => {
+  _private.useLayoutEffect(() => {
     const element = ref.current;
     let animationFrameId;
     if (!element) {
@@ -64,9 +65,9 @@ function Persist({ children }) {
   const lastPresentChild = react.useRef(null);
   const child = getChild(children);
   const unmount = react.useCallback(() => {
-    flushSync.flushSync(() => setPersisting(false));
+    reactDom.flushSync(() => setPersisting(false));
   }, []);
-  react.useLayoutEffect(() => {
+  _private.useLayoutEffect(() => {
     if (child) {
       setPersisting(true);
       lastPresentChild.current = child;

package/dist/utils/Persist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Persist.js","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { flushSync } from \"./flush-sync\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;AAAA;AAoBA;AAQA;AAEO;AACL;AAEA;AACF;AAEA;AACE;AAIA;AACF;AAEO;AACL;AACA;AACA;AAEA;AACE;AAEA;AACE;AAAA;AAWF;AACE;AACE;AAAQ;AAGV;AAAsC;AAGxC;AACA;AAEA;AACE;AACA;AAA8D;AAChE;AAGF;AACE;AACA;AAEA;AACE;AAAA;AAGF;AAGE;AACE;AACA;AAEA;AAKE;AAAQ;AACV;AACD;AAGH;AACE;AAAqC;AACvC;AAEJ;AAMgB;AACd;AACA;AACA;AAEA;AACE;AAAoC;AAGtC;AACE;AACE;AACA;AAA2B;AAC7B;AAGF;AACG;AAAuD;AACD;AAG3D;AAEA;AACE;AACF;;;;"}
+{"version":3,"file":"Persist.js","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAAA;AAmBA;AAQA;AAEO;AACL;AAEA;AACF;AAEA;AACE;AAIA;AACF;AAEO;AACL;AACA;AACA;AAEA;AACE;AAEA;AACE;AAAA;AAWF;AACE;AACE;AAAQ;AAGV;AAAsC;AAGxC;AACA;AAEA;AACE;AACA;AAA8D;AAChE;AAGF;AACE;AACA;AAEA;AACE;AAAA;AAGF;AAGE;AACE;AACA;AAEA;AAKE;AAAQ;AACV;AACD;AAGH;AACE;AAAqC;AACvC;AAEJ;AAMgB;AACd;AACA;AACA;AAEA;AACE;AAAoC;AAGtC;AACE;AACE;AACA;AAA2B;AAC7B;AAGF;AACG;AAAuD;AACD;AAG3D;AAEA;AACE;AACF;;;;"}

package/dist/utils/Persist.mjs

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { nn } from '@liveblocks/core';
-import { createContext, useContext, Children, isValidElement, useRef, useLayoutEffect, useState, useCallback } from 'react';
-import { flushSync } from './flush-sync.mjs';
+import { useLayoutEffect } from '@liveblocks/react/_private';
+import { createContext, useContext, Children, isValidElement, useRef, useState, useCallback } from 'react';
+import { flushSync } from 'react-dom';
 
 
 const PERSIST_NAME = "Persist";