@liveblocks/react-ui 2.15.0 → 2.15.1

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":["locale","error","value","EmojiPrimitive","props","forwardedRef"],"mappings":"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"}
+{"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;;"}

package/dist/primitives/FileSize.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -5,7 +6,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var formatFileSize = require('../utils/format-file-size.js');
 
-"use client";
+
 const FILE_SIZE_NAME = "FileSize";
 const FileSize = react.forwardRef(
   ({

package/dist/primitives/FileSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileSize.js","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":["forwardRef","formatFileSize","Slot","useMemo","jsx"],"mappings":";;;;;;;AAAA,YAAA,CAAA;AASA,MAAM,cAAiB,GAAA,UAAA,CAAA;AA0BhB,MAAM,QAAW,GAAAA,gBAAA;AAAA,EACtB,CACE;AAAA,IACE,IAAA;AAAA,IACA,MAAA;AAAA,IACA,UAAU,cAAiB,GAAAC,6BAAA;AAAA,IAC3B,OAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,QAAW,GAAAC,aAAA;AAAA,MACf,MACE,OAAO,cAAA,KAAmB,aACtB,cAAe,CAAA,IAAA,EAAM,MAAM,CAC3B,GAAA,cAAA;AAAA,MAEN,CAAC,gBAAgB,IAAI,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MAAW,GAAG,KAAA;AAAA,MAAO,GAAK,EAAA,YAAA;AAAA,MACxB,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,QAAA,CAAS,WAAc,GAAA,cAAA,CAAA;AACzB;;;;"}
+{"version":3,"file":"FileSize.js","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;AAAA;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAEe;AAGvB;AACG;AAAc;AAAY;AACxB;AACH;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/FileSize.mjs

@@ -1,9 +1,10 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useMemo } from 'react';
 import { formatFileSize } from '../utils/format-file-size.mjs';
 
-"use client";
+
 const FILE_SIZE_NAME = "FileSize";
 const FileSize = forwardRef(
   ({

package/dist/primitives/FileSize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileSize.mjs","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;AAAA,YAAA,CAAA;AASA,MAAM,cAAiB,GAAA,UAAA,CAAA;AA0BhB,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,CACE;AAAA,IACE,IAAA;AAAA,IACA,MAAA;AAAA,IACA,UAAU,cAAiB,GAAA,cAAA;AAAA,IAC3B,OAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,QAAW,GAAA,OAAA;AAAA,MACf,MACE,OAAO,cAAA,KAAmB,aACtB,cAAe,CAAA,IAAA,EAAM,MAAM,CAC3B,GAAA,cAAA;AAAA,MAEN,CAAC,gBAAgB,IAAI,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MAAW,GAAG,KAAA;AAAA,MAAO,GAAK,EAAA,YAAA;AAAA,MACxB,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,QAAA,CAAS,WAAc,GAAA,cAAA,CAAA;AACzB;;;;"}
+{"version":3,"file":"FileSize.mjs","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;;AAAA;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAEe;AAGvB;AACG;AAAc;AAAY;AACxB;AACH;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/Timestamp.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -8,7 +9,7 @@ var intl = require('../utils/intl.js');
 var useInterval = require('../utils/use-interval.js');
 var useRerender = require('../utils/use-rerender.js');
 
-"use client";
+
 const DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1e3;
 const RENDER_INTERVAL = 30 * 1e3;
 const TIMESTAMP_NAME = "Timestamp";

package/dist/primitives/Timestamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.js","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":["dateTimeFormat","capitalize","formatter","relativeTimeFormat","locale","forwardRef","Slot","useRerender","useMemo","useInterval","jsx"],"mappings":"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"}
+{"version":3,"file":"Timestamp.js","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAAA;AAYA;AACA;AAEA;AA+BA;AAAsB;AACX;AACA;AACF;AACD;AACC;AAET;AAKA;AACE;AAAyC;AACjC;AACC;AACF;AACC;AACE;AAGV;AACF;AAKA;AACE;AAAyC;AAChC;AACF;AAGP;AACF;AAGA;AAAkD;AAChD;AACA;AACA;AACA;AACA;AACA;AAEF;AAKA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AAAqE;AAEE;AAGvE;AAAqD;AACb;AAC7B;AAGX;AAEA;AAIE;AAAoC;AAGtC;AACE;AACE;AAAiB;AACM;AACrB;AACF;AAGF;AAAc;AAGhB;AACF;AAMA;AACE;AAGF;AAeO;AAAkB;AAErB;AACE;AACA;AAC2B;AACN;AACrB;AACW;AACX;AACG;AAIL;AACA;AACA;AACA;AAAuB;AACQ;AAClB;AAEb;AAAc;AAIN;AAEuB;AAE/B;AAAiB;AAIT;AAE0B;AAGlC;AAEA;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/Timestamp.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useMemo } from 'react';
@@ -6,7 +7,7 @@ import { dateTimeFormat, relativeTimeFormat } from '../utils/intl.mjs';
 import { useInterval } from '../utils/use-interval.mjs';
 import { useRerender } from '../utils/use-rerender.mjs';
 
-"use client";
+
 const DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1e3;
 const RENDER_INTERVAL = 30 * 1e3;
 const TIMESTAMP_NAME = "Timestamp";

package/dist/primitives/Timestamp.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.mjs","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":["formatter","locale"],"mappings":"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"}
+{"version":3,"file":"Timestamp.mjs","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAAA;AAYA;AACA;AAEA;AA+BA;AAAsB;AACX;AACA;AACF;AACD;AACC;AAET;AAKA;AACE;AAAyC;AACjC;AACC;AACF;AACC;AACE;AAGV;AACF;AAKA;AACE;AAAyC;AAChC;AACF;AAGP;AACF;AAGA;AAAkD;AAChD;AACA;AACA;AACA;AACA;AACA;AAEF;AAKA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AAAqE;AAEE;AAGvE;AAAqD;AACb;AAC7B;AAGX;AAEA;AAIE;AAAoC;AAGtC;AACE;AACE;AAAiB;AACM;AACrB;AACF;AAGF;AAAc;AAGhB;AACF;AAMA;AACE;AAGF;AAeO;AAAkB;AAErB;AACE;AACA;AAC2B;AACN;AACrB;AACW;AACX;AACG;AAIL;AACA;AACA;AACA;AAAuB;AACQ;AAClB;AAEb;AAAc;AAIN;AAEuB;AAE/B;AAAiB;AAIT;AAE0B;AAGlC;AAEA;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}

package/dist/utils/Persist.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -5,7 +6,7 @@ var core = require('@liveblocks/core');
 var react = require('react');
 var flushSync = require('./flush-sync.js');
 
-"use client";
+
 const PERSIST_NAME = "Persist";
 const PersistContext = react.createContext(null);
 function usePersist() {

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":["createContext","useContext","nn","Children","isValidElement","useRef","useLayoutEffect","useState","useCallback","flushSync","jsx"],"mappings":";;;;;;;AAAA,YAAA,CAAA;AAoBA,MAAM,YAAe,GAAA,SAAA,CAAA;AAQrB,MAAM,cAAA,GAAiBA,oBAAqC,IAAI,CAAA,CAAA;AAEzD,SAAS,UAAa,GAAA;AAC3B,EAAM,MAAA,cAAA,GAAiBC,iBAAW,cAAc,CAAA,CAAA;AAEhD,EAAO,OAAAC,OAAA,CAAG,gBAAgB,yCAAyC,CAAA,CAAA;AACrE,CAAA;AAEA,SAAS,SAAS,QAAqB,EAAA;AACrC,EAAM,MAAA,KAAA,GAAmB,MAAM,OAAQ,CAAA,QAAQ,IAC3CC,cAAS,CAAA,IAAA,CAAK,QAAQ,CACtB,GAAA,QAAA,CAAA;AAEJ,EAAO,OAAAC,oBAAA,CAAe,KAAK,CAAA,GAAI,KAAQ,GAAA,KAAA,CAAA,CAAA;AACzC,CAAA;AAEO,SAAS,oBAAoB,GAA6B,EAAA;AAC/D,EAAA,MAAM,CAAC,SAAA,EAAW,OAAO,CAAA,GAAI,UAAW,EAAA,CAAA;AACxC,EAAM,MAAA,qBAAA,GAAwBC,aAAsB,IAAI,CAAA,CAAA;AACxD,EAAM,MAAA,oBAAA,GAAuBA,aAAsB,IAAI,CAAA,CAAA;AAEvD,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAUA,IAAM,MAAA,kBAAA,GAAqB,CAAC,KAA0B,KAAA;AACpD,MAAI,IAAA,KAAA,CAAM,aAAkB,KAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,QAAQ,OAAA,EAAA,CAAA;AAAA,OACV;AAEA,MAAA,qBAAA,CAAsB,UAAU,KAAM,CAAA,aAAA,CAAA;AAAA,KACxC,CAAA;AAEA,IAAQ,OAAA,CAAA,gBAAA,CAAiB,mBAAmB,kBAAkB,CAAA,CAAA;AAC9D,IAAQ,OAAA,CAAA,gBAAA,CAAiB,gBAAgB,kBAAkB,CAAA,CAAA;AAE3D,IAAA,OAAO,MAAM;AACX,MAAQ,OAAA,CAAA,mBAAA,CAAoB,mBAAmB,kBAAkB,CAAA,CAAA;AACjE,MAAQ,OAAA,CAAA,mBAAA,CAAoB,gBAAgB,kBAAkB,CAAA,CAAA;AAAA,KAChE,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,OAAO,CAAC,CAAA,CAAA;AAEjB,EAAAA,qBAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AACpB,IAAI,IAAA,gBAAA,CAAA;AAEJ,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,CAAC,SAAW,EAAA;AAGd,MAAA,gBAAA,GAAmB,sBAAsB,MAAM;AAC7C,QAAM,MAAA,MAAA,GAAS,iBAAiB,OAAO,CAAA,CAAA;AACvC,QAAA,oBAAA,CAAqB,UAAU,MAAO,CAAA,aAAA,CAAA;AAEtC,QACE,IAAA,MAAA,CAAO,kBAAkB,MACzB,IAAA,MAAA,CAAO,kBAAkB,qBAAsB,CAAA,OAAA,IAC/C,MAAO,CAAA,OAAA,KAAY,MACnB,EAAA;AACA,UAAQ,OAAA,EAAA,CAAA;AAAA,SACV;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,oBAAA,CAAqB,gBAAgB,CAAA,CAAA;AAAA,KACvC,CAAA;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,GAAA,EAAK,OAAO,CAAC,CAAA,CAAA;AAC9B,CAAA;AAMgB,SAAA,OAAA,CAAQ,EAAE,QAAA,EAA0B,EAAA;AAClD,EAAA,MAAM,CAAC,YAAA,EAAc,aAAa,CAAA,GAAIC,eAAS,IAAI,CAAA,CAAA;AACnD,EAAM,MAAA,gBAAA,GAAmBF,aAAkB,IAAI,CAAA,CAAA;AAC/C,EAAM,MAAA,KAAA,GAAQ,SAAS,QAAQ,CAAA,CAAA;AAE/B,EAAM,MAAA,OAAA,GAAUG,kBAAY,MAAM;AAChC,IAAUC,mBAAA,CAAA,MAAM,aAAc,CAAA,KAAK,CAAC,CAAA,CAAA;AAAA,GACtC,EAAG,EAAE,CAAA,CAAA;AAEL,EAAAH,qBAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAClB,MAAA,gBAAA,CAAiB,OAAU,GAAA,KAAA,CAAA;AAAA,KAC7B;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EACE,uBAAAI,cAAA,CAAC,eAAe,QAAf,EAAA;AAAA,IAAwB,KAAO,EAAA,CAAC,OAAQ,CAAA,KAAK,GAAG,OAAO,CAAA;AAAA,IACrD,QAAA,EAAA,KAAA,KAAU,YAAe,GAAA,gBAAA,CAAiB,OAAU,GAAA,IAAA,CAAA;AAAA,GACvD,CAAA,CAAA;AAEJ,CAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,OAAA,CAAQ,WAAc,GAAA,YAAA,CAAA;AACxB;;;;;;"}
+{"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;;;;"}

package/dist/utils/Persist.mjs

@@ -1,9 +1,10 @@
+"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';
 
-"use client";
+
 const PERSIST_NAME = "Persist";
 const PersistContext = createContext(null);
 function usePersist() {

package/dist/utils/Persist.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Persist.mjs","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":"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"}
+{"version":3,"file":"Persist.mjs","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;;"}

package/dist/utils/Portal.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -5,7 +6,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var ReactDOM = require('react-dom');
 
-"use client";
+
 const PORTAL_NAME = "Portal";
 const Portal = react.forwardRef(
   ({ container = document?.body, asChild, ...props }, forwardedRef) => {

package/dist/utils/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sources":["../../src/utils/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\n\nconst PORTAL_NAME = \"Portal\";\n\ninterface PortalProps extends ComponentPropsWithSlot<\"div\"> {\n  /**\n   * The container to render the portal into.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = forwardRef<HTMLDivElement, PortalProps>(\n  ({ container = document?.body, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n\n    return container\n      ? createPortal(\n          <Component data-liveblocks-portal=\"\" {...props} ref={forwardedRef} />,\n          container\n        )\n      : null;\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Portal.displayName = PORTAL_NAME;\n}\n\nexport { Portal };\n"],"names":["forwardRef","Slot","createPortal","jsx"],"mappings":";;;;;;;AAAA,YAAA,CAAA;AAQA,MAAM,WAAc,GAAA,QAAA,CAAA;AASpB,MAAM,MAAS,GAAAA,gBAAA;AAAA,EACb,CAAC,EAAE,SAAY,GAAA,QAAA,EAAU,MAAM,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACnE,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,KAAA,CAAA;AAEnC,IAAA,OAAO,SACH,GAAAC,qBAAA;AAAA,sBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,QAAU,wBAAuB,EAAA,EAAA;AAAA,QAAI,GAAG,KAAA;AAAA,QAAO,GAAK,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,MACnE,SAAA;AAAA,KAEF,GAAA,IAAA,CAAA;AAAA,GACN;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,MAAA,CAAO,WAAc,GAAA,WAAA,CAAA;AACvB;;;;"}
+{"version":3,"file":"Portal.js","sources":["../../src/utils/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\n\nconst PORTAL_NAME = \"Portal\";\n\ninterface PortalProps extends ComponentPropsWithSlot<\"div\"> {\n  /**\n   * The container to render the portal into.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = forwardRef<HTMLDivElement, PortalProps>(\n  ({ container = document?.body, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n\n    return container\n      ? createPortal(\n          <Component data-liveblocks-portal=\"\" {...props} ref={forwardedRef} />,\n          container\n        )\n      : null;\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Portal.displayName = PORTAL_NAME;\n}\n\nexport { Portal };\n"],"names":[],"mappings":";;;;;;;;AAAA;AAQA;AASA;AAAe;AAEX;AAEA;AACI;AACG;AAAiC;AAAO;AAAY;AAAc;AACnE;AAEF;AAER;AAEA;AACE;AACF;;"}

package/dist/utils/Portal.mjs

@@ -1,9 +1,10 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 
-"use client";
+
 const PORTAL_NAME = "Portal";
 const Portal = forwardRef(
   ({ container = document?.body, asChild, ...props }, forwardedRef) => {

package/dist/utils/Portal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.mjs","sources":["../../src/utils/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\n\nconst PORTAL_NAME = \"Portal\";\n\ninterface PortalProps extends ComponentPropsWithSlot<\"div\"> {\n  /**\n   * The container to render the portal into.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = forwardRef<HTMLDivElement, PortalProps>(\n  ({ container = document?.body, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n\n    return container\n      ? createPortal(\n          <Component data-liveblocks-portal=\"\" {...props} ref={forwardedRef} />,\n          container\n        )\n      : null;\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Portal.displayName = PORTAL_NAME;\n}\n\nexport { Portal };\n"],"names":[],"mappings":";;;;;AAAA,YAAA,CAAA;AAQA,MAAM,WAAc,GAAA,QAAA,CAAA;AASpB,MAAM,MAAS,GAAA,UAAA;AAAA,EACb,CAAC,EAAE,SAAY,GAAA,QAAA,EAAU,MAAM,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACnE,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,KAAA,CAAA;AAEnC,IAAA,OAAO,SACH,GAAA,YAAA;AAAA,sBACG,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,wBAAuB,EAAA,EAAA;AAAA,QAAI,GAAG,KAAA;AAAA,QAAO,GAAK,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,MACnE,SAAA;AAAA,KAEF,GAAA,IAAA,CAAA;AAAA,GACN;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,MAAA,CAAO,WAAc,GAAA,WAAA,CAAA;AACvB;;;;"}
+{"version":3,"file":"Portal.mjs","sources":["../../src/utils/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\n\nconst PORTAL_NAME = \"Portal\";\n\ninterface PortalProps extends ComponentPropsWithSlot<\"div\"> {\n  /**\n   * The container to render the portal into.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = forwardRef<HTMLDivElement, PortalProps>(\n  ({ container = document?.body, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n\n    return container\n      ? createPortal(\n          <Component data-liveblocks-portal=\"\" {...props} ref={forwardedRef} />,\n          container\n        )\n      : null;\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Portal.displayName = PORTAL_NAME;\n}\n\nexport { Portal };\n"],"names":[],"mappings":";;;;;;AAAA;AAQA;AASA;AAAe;AAEX;AAEA;AACI;AACG;AAAiC;AAAO;AAAY;AAAc;AACnE;AAEF;AAER;AAEA;AACE;AACF;;"}

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "2.15.0" === "string" && "2.15.0";
+const PKG_VERSION = typeof "2.15.1" === "string" && "2.15.1";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "2.15.0" === "string" && "2.15.0";
+const PKG_VERSION = typeof "2.15.1" === "string" && "2.15.1";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -75,9 +75,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.15.0",
-    "@liveblocks/core": "2.15.0",
-    "@liveblocks/react": "2.15.0",
+    "@liveblocks/client": "2.15.1",
+    "@liveblocks/core": "2.15.1",
+    "@liveblocks/react": "2.15.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",