@liveblocks/react-ui 3.14.0 → 3.15.0-components1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_private/index.cjs +1 -5
- package/dist/_private/index.cjs.map +1 -1
- package/dist/_private/index.d.cts +4 -4
- package/dist/_private/index.d.ts +4 -4
- package/dist/_private/index.js +1 -2
- package/dist/_private/index.js.map +1 -1
- package/dist/components/AvatarStack.cjs +115 -0
- package/dist/components/AvatarStack.cjs.map +1 -0
- package/dist/components/AvatarStack.js +113 -0
- package/dist/components/AvatarStack.js.map +1 -0
- package/dist/components/Comment.cjs +10 -28
- package/dist/components/Comment.cjs.map +1 -1
- package/dist/components/Comment.js +12 -11
- package/dist/components/Comment.js.map +1 -1
- package/dist/components/CommentPin.cjs +27 -0
- package/dist/components/CommentPin.cjs.map +1 -0
- package/dist/components/CommentPin.js +25 -0
- package/dist/components/CommentPin.js.map +1 -0
- package/dist/components/Composer.cjs +2 -4
- package/dist/components/Composer.cjs.map +1 -1
- package/dist/components/Composer.js +3 -5
- package/dist/components/Composer.js.map +1 -1
- package/dist/components/Cursor.cjs +40 -0
- package/dist/components/Cursor.cjs.map +1 -0
- package/dist/components/Cursor.js +38 -0
- package/dist/components/Cursor.js.map +1 -0
- package/dist/components/Cursors.cjs +252 -0
- package/dist/components/Cursors.cjs.map +1 -0
- package/dist/components/Cursors.js +250 -0
- package/dist/components/Cursors.js.map +1 -0
- package/dist/components/FloatingComposer.cjs +82 -0
- package/dist/components/FloatingComposer.cjs.map +1 -0
- package/dist/components/FloatingComposer.js +80 -0
- package/dist/components/FloatingComposer.js.map +1 -0
- package/dist/components/FloatingThread.cjs +82 -0
- package/dist/components/FloatingThread.cjs.map +1 -0
- package/dist/components/FloatingThread.js +80 -0
- package/dist/components/FloatingThread.js.map +1 -0
- package/dist/components/InboxNotification.cjs +4 -6
- package/dist/components/InboxNotification.cjs.map +1 -1
- package/dist/components/InboxNotification.js +5 -7
- package/dist/components/InboxNotification.js.map +1 -1
- package/dist/components/Thread.cjs +19 -26
- package/dist/components/Thread.cjs.map +1 -1
- package/dist/components/Thread.js +19 -7
- package/dist/components/Thread.js.map +1 -1
- package/dist/components/internal/AiComposer.cjs +1 -2
- package/dist/components/internal/AiComposer.cjs.map +1 -1
- package/dist/components/internal/AiComposer.js +1 -2
- package/dist/components/internal/AiComposer.js.map +1 -1
- package/dist/components/internal/CodeBlock.cjs +1 -2
- package/dist/components/internal/CodeBlock.cjs.map +1 -1
- package/dist/components/internal/CodeBlock.js +1 -2
- package/dist/components/internal/CodeBlock.js.map +1 -1
- package/dist/components/internal/Dropdown.cjs +7 -28
- package/dist/components/internal/Dropdown.cjs.map +1 -1
- package/dist/components/internal/Dropdown.js +7 -7
- package/dist/components/internal/Dropdown.js.map +1 -1
- package/dist/components/internal/EmojiPicker.cjs +6 -27
- package/dist/components/internal/EmojiPicker.cjs.map +1 -1
- package/dist/components/internal/EmojiPicker.js +6 -6
- package/dist/components/internal/EmojiPicker.js.map +1 -1
- package/dist/components/internal/List.cjs +2 -2
- package/dist/components/internal/List.cjs.map +1 -1
- package/dist/components/internal/List.js +2 -2
- package/dist/components/internal/List.js.map +1 -1
- package/dist/components/internal/Tooltip.cjs +7 -28
- package/dist/components/internal/Tooltip.cjs.map +1 -1
- package/dist/components/internal/Tooltip.js +7 -7
- package/dist/components/internal/Tooltip.js.map +1 -1
- package/dist/index.cjs +12 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +214 -125
- package/dist/index.d.ts +214 -125
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/primitives/AiComposer/index.cjs +5 -4
- package/dist/primitives/AiComposer/index.cjs.map +1 -1
- package/dist/primitives/AiComposer/index.js +5 -4
- package/dist/primitives/AiComposer/index.js.map +1 -1
- package/dist/primitives/AiMessage/index.cjs +2 -2
- package/dist/primitives/AiMessage/index.cjs.map +1 -1
- package/dist/primitives/AiMessage/index.js +2 -2
- package/dist/primitives/AiMessage/index.js.map +1 -1
- package/dist/primitives/Collapsible/index.cjs +4 -4
- package/dist/primitives/Collapsible/index.cjs.map +1 -1
- package/dist/primitives/Collapsible/index.js +4 -4
- package/dist/primitives/Collapsible/index.js.map +1 -1
- package/dist/primitives/Comment/index.cjs +4 -4
- package/dist/primitives/Comment/index.cjs.map +1 -1
- package/dist/primitives/Comment/index.js +4 -4
- package/dist/primitives/Comment/index.js.map +1 -1
- package/dist/primitives/Composer/index.cjs +23 -35
- package/dist/primitives/Composer/index.cjs.map +1 -1
- package/dist/primitives/Composer/index.js +23 -16
- package/dist/primitives/Composer/index.js.map +1 -1
- package/dist/primitives/Duration.cjs +2 -2
- package/dist/primitives/Duration.cjs.map +1 -1
- package/dist/primitives/Duration.js +2 -2
- package/dist/primitives/Duration.js.map +1 -1
- package/dist/primitives/FileSize.cjs +2 -2
- package/dist/primitives/FileSize.cjs.map +1 -1
- package/dist/primitives/FileSize.js +2 -2
- package/dist/primitives/FileSize.js.map +1 -1
- package/dist/primitives/Markdown.cjs +2 -2
- package/dist/primitives/Markdown.cjs.map +1 -1
- package/dist/primitives/Markdown.js +2 -2
- package/dist/primitives/Markdown.js.map +1 -1
- package/dist/primitives/Timestamp.cjs +2 -2
- package/dist/primitives/Timestamp.cjs.map +1 -1
- package/dist/primitives/Timestamp.js +2 -2
- package/dist/primitives/Timestamp.js.map +1 -1
- package/dist/utils/Portal.cjs +2 -2
- package/dist/utils/Portal.cjs.map +1 -1
- package/dist/utils/Portal.js +2 -2
- package/dist/utils/Portal.js.map +1 -1
- package/dist/utils/animation-loop.cjs +44 -0
- package/dist/utils/animation-loop.cjs.map +1 -0
- package/dist/utils/animation-loop.js +42 -0
- package/dist/utils/animation-loop.js.map +1 -0
- package/dist/utils/use-pre-resolve-user.cjs +18 -0
- package/dist/utils/use-pre-resolve-user.cjs.map +1 -0
- package/dist/utils/use-pre-resolve-user.js +16 -0
- package/dist/utils/use-pre-resolve-user.js.map +1 -0
- package/dist/version.cjs +1 -1
- package/dist/version.cjs.map +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/package.json +9 -13
- package/src/styles/dark/index.css +1 -1
- package/src/styles/index.css +252 -4
- package/styles/dark/attributes.css +1 -1
- package/styles/dark/attributes.css.map +1 -1
- package/styles/dark/media-query.css +1 -1
- package/styles/dark/media-query.css.map +1 -1
- package/styles.css +1 -1
- package/styles.css.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiComposer.cjs","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n type AiChatMessage,\n type CopilotId,\n type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n type ComponentProps,\n type FormEvent,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n type AiComposerOverrides,\n type GlobalOverrides,\n useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n AiComposerEditorProps,\n AiComposerFormProps,\n AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n /**\n * The composer's initial value.\n */\n defaultValue?: string;\n\n /**\n * The event handler called when the composer is submitted.\n */\n onComposerSubmit?: (\n message: AiComposerSubmitMessage,\n event: FormEvent<HTMLFormElement>\n ) => void;\n\n /**\n * The event handler called after the composer is submitted.\n *\n * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n */\n onComposerSubmitted?: (message: AiChatMessage) => void;\n\n /**\n * Whether the composer is disabled.\n */\n disabled?: AiComposerFormProps[\"disabled\"];\n\n /**\n * Whether to focus the composer on mount.\n */\n autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n /**\n * Override the component's strings.\n */\n overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n /**\n * The ID of the chat the composer belongs to.\n */\n chatId: string;\n\n /**\n * The ID of the copilot to use to send the message.\n */\n copilotId?: CopilotId;\n\n /**\n * The time, in milliseconds, before an AI response will timeout.\n */\n responseTimeout?: number;\n\n /**\n * @internal\n */\n branchId?: MessageId;\n\n /**\n * @internal\n */\n stream?: boolean;\n}\n\nfunction AiComposerAction({\n overrides,\n}: {\n overrides?: AiComposerProps[\"overrides\"];\n}) {\n const { canAbort } = useAiComposer();\n const $ = useOverrides(overrides);\n\n const preventDefault = useCallback((event: SyntheticEvent) => {\n event.preventDefault();\n }, []);\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return canAbort ? (\n <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n <AiComposerPrimitive.Abort asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"secondary\"\n aria-label={$.AI_COMPOSER_ABORT}\n icon={<StopIcon />}\n />\n </AiComposerPrimitive.Abort>\n </ShortcutTooltip>\n ) : (\n <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n <AiComposerPrimitive.Submit asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"primary\"\n aria-label={$.AI_COMPOSER_SEND}\n icon={<SendIcon />}\n />\n </AiComposerPrimitive.Submit>\n </ShortcutTooltip>\n );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n (\n {\n defaultValue,\n onComposerSubmit,\n disabled,\n autoFocus,\n overrides,\n className,\n chatId,\n branchId,\n copilotId,\n responseTimeout,\n stream = true,\n onComposerSubmitted,\n ...props\n },\n forwardedRef\n ) => {\n const $ = useOverrides(overrides);\n const sendAiMessage = useSendAiMessage(chatId, {\n stream,\n copilotId,\n timeout: responseTimeout,\n });\n\n const handleComposerSubmit = useCallback(\n (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n onComposerSubmit?.(message, event);\n\n if (event.isDefaultPrevented()) return;\n\n const newMessage = sendAiMessage(message.text);\n\n onComposerSubmitted?.(newMessage);\n },\n [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n );\n\n return (\n <TooltipProvider>\n <AiComposerPrimitive.Form\n className={cn(\n \"lb-root lb-ai-composer lb-ai-composer-form\",\n className\n )}\n dir={$.dir}\n {...props}\n disabled={disabled}\n ref={forwardedRef}\n onComposerSubmit={handleComposerSubmit}\n chatId={chatId}\n branchId={branchId}\n >\n <div className=\"lb-ai-composer-editor-container\">\n <AiComposerPrimitive.Editor\n autoFocus={autoFocus}\n className=\"lb-ai-composer-editor\"\n placeholder={$.AI_COMPOSER_PLACEHOLDER}\n defaultValue={defaultValue}\n />\n\n <div className=\"lb-ai-composer-footer\">\n <div className=\"lb-ai-composer-editor-actions\">\n {/* No actions for now but it makes sense to keep the DOM structure */}\n </div>\n\n <div className=\"lb-ai-composer-actions\">\n <AiComposerAction overrides={overrides} />\n </div>\n </div>\n </div>\n </AiComposerPrimitive.Form>\n </TooltipProvider>\n );\n }\n);\n"],"names":["overrides","useAiComposer","useOverrides","useCallback","jsx","ShortcutTooltip","AiComposerPrimitive.Abort","Button","StopIcon","AiComposerPrimitive.Submit","SendIcon","forwardRef","useSendAiMessage","TooltipProvider","AiComposerPrimitive.Form","cn","jsxs","AiComposerPrimitive.Editor"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AiComposer.cjs","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n type AiChatMessage,\n type CopilotId,\n type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n type ComponentProps,\n type FormEvent,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n type AiComposerOverrides,\n type GlobalOverrides,\n useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n AiComposerEditorProps,\n AiComposerFormProps,\n AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n /**\n * The composer's initial value.\n */\n defaultValue?: string;\n\n /**\n * The event handler called when the composer is submitted.\n */\n onComposerSubmit?: (\n message: AiComposerSubmitMessage,\n event: FormEvent<HTMLFormElement>\n ) => void;\n\n /**\n * The event handler called after the composer is submitted.\n *\n * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n */\n onComposerSubmitted?: (message: AiChatMessage) => void;\n\n /**\n * Whether the composer is disabled.\n */\n disabled?: AiComposerFormProps[\"disabled\"];\n\n /**\n * Whether to focus the composer on mount.\n */\n autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n /**\n * Override the component's strings.\n */\n overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n /**\n * The ID of the chat the composer belongs to.\n */\n chatId: string;\n\n /**\n * The ID of the copilot to use to send the message.\n */\n copilotId?: CopilotId;\n\n /**\n * The time, in milliseconds, before an AI response will timeout.\n */\n responseTimeout?: number;\n\n /**\n * @internal\n */\n branchId?: MessageId;\n\n /**\n * @internal\n */\n stream?: boolean;\n}\n\nfunction AiComposerAction({\n overrides,\n}: {\n overrides?: AiComposerProps[\"overrides\"];\n}) {\n const { canAbort } = useAiComposer();\n const $ = useOverrides(overrides);\n\n const preventDefault = useCallback((event: SyntheticEvent) => {\n event.preventDefault();\n }, []);\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return canAbort ? (\n <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n <AiComposerPrimitive.Abort asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"secondary\"\n aria-label={$.AI_COMPOSER_ABORT}\n icon={<StopIcon />}\n />\n </AiComposerPrimitive.Abort>\n </ShortcutTooltip>\n ) : (\n <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n <AiComposerPrimitive.Submit asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"primary\"\n aria-label={$.AI_COMPOSER_SEND}\n icon={<SendIcon />}\n />\n </AiComposerPrimitive.Submit>\n </ShortcutTooltip>\n );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n (\n {\n defaultValue,\n onComposerSubmit,\n disabled,\n autoFocus,\n overrides,\n className,\n chatId,\n branchId,\n copilotId,\n responseTimeout,\n stream = true,\n onComposerSubmitted,\n ...props\n },\n forwardedRef\n ) => {\n const $ = useOverrides(overrides);\n const sendAiMessage = useSendAiMessage(chatId, {\n stream,\n copilotId,\n timeout: responseTimeout,\n });\n\n const handleComposerSubmit = useCallback(\n (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n onComposerSubmit?.(message, event);\n\n if (event.isDefaultPrevented()) return;\n\n const newMessage = sendAiMessage(message.text);\n\n onComposerSubmitted?.(newMessage);\n },\n [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n );\n\n return (\n <TooltipProvider>\n <AiComposerPrimitive.Form\n className={cn(\n \"lb-root lb-ai-composer lb-ai-composer-form\",\n className\n )}\n dir={$.dir}\n {...props}\n disabled={disabled}\n ref={forwardedRef}\n onComposerSubmit={handleComposerSubmit}\n chatId={chatId}\n branchId={branchId}\n >\n <div className=\"lb-ai-composer-editor-container\">\n <AiComposerPrimitive.Editor\n autoFocus={autoFocus}\n className=\"lb-ai-composer-editor\"\n placeholder={$.AI_COMPOSER_PLACEHOLDER}\n defaultValue={defaultValue}\n />\n\n <div className=\"lb-ai-composer-footer\">\n <div className=\"lb-ai-composer-editor-actions\">\n {/* No actions for now but it makes sense to keep the DOM structure */}\n </div>\n\n <div className=\"lb-ai-composer-actions\">\n <AiComposerAction overrides={overrides} />\n </div>\n </div>\n </div>\n </AiComposerPrimitive.Form>\n </TooltipProvider>\n );\n }\n);\n"],"names":["overrides","useAiComposer","useOverrides","useCallback","jsx","ShortcutTooltip","AiComposerPrimitive.Abort","Button","StopIcon","AiComposerPrimitive.Submit","SendIcon","forwardRef","useSendAiMessage","TooltipProvider","AiComposerPrimitive.Form","cn","jsxs","AiComposerPrimitive.Editor"],"mappings":"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"}
|
|
@@ -8,8 +8,7 @@ import { AiComposerAbort, AiComposerSubmit, AiComposerForm, Editor as AiComposer
|
|
|
8
8
|
import { useAiComposer } from '../../primitives/AiComposer/contexts.js';
|
|
9
9
|
import { cn } from '../../utils/cn.js';
|
|
10
10
|
import { Button } from './Button.js';
|
|
11
|
-
import { ShortcutTooltip } from './Tooltip.js';
|
|
12
|
-
import { TooltipProvider } from '@radix-ui/react-tooltip';
|
|
11
|
+
import { ShortcutTooltip, TooltipProvider } from './Tooltip.js';
|
|
13
12
|
|
|
14
13
|
function AiComposerAction({
|
|
15
14
|
overrides
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiComposer.js","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n type AiChatMessage,\n type CopilotId,\n type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n type ComponentProps,\n type FormEvent,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n type AiComposerOverrides,\n type GlobalOverrides,\n useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n AiComposerEditorProps,\n AiComposerFormProps,\n AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n /**\n * The composer's initial value.\n */\n defaultValue?: string;\n\n /**\n * The event handler called when the composer is submitted.\n */\n onComposerSubmit?: (\n message: AiComposerSubmitMessage,\n event: FormEvent<HTMLFormElement>\n ) => void;\n\n /**\n * The event handler called after the composer is submitted.\n *\n * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n */\n onComposerSubmitted?: (message: AiChatMessage) => void;\n\n /**\n * Whether the composer is disabled.\n */\n disabled?: AiComposerFormProps[\"disabled\"];\n\n /**\n * Whether to focus the composer on mount.\n */\n autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n /**\n * Override the component's strings.\n */\n overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n /**\n * The ID of the chat the composer belongs to.\n */\n chatId: string;\n\n /**\n * The ID of the copilot to use to send the message.\n */\n copilotId?: CopilotId;\n\n /**\n * The time, in milliseconds, before an AI response will timeout.\n */\n responseTimeout?: number;\n\n /**\n * @internal\n */\n branchId?: MessageId;\n\n /**\n * @internal\n */\n stream?: boolean;\n}\n\nfunction AiComposerAction({\n overrides,\n}: {\n overrides?: AiComposerProps[\"overrides\"];\n}) {\n const { canAbort } = useAiComposer();\n const $ = useOverrides(overrides);\n\n const preventDefault = useCallback((event: SyntheticEvent) => {\n event.preventDefault();\n }, []);\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return canAbort ? (\n <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n <AiComposerPrimitive.Abort asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"secondary\"\n aria-label={$.AI_COMPOSER_ABORT}\n icon={<StopIcon />}\n />\n </AiComposerPrimitive.Abort>\n </ShortcutTooltip>\n ) : (\n <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n <AiComposerPrimitive.Submit asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"primary\"\n aria-label={$.AI_COMPOSER_SEND}\n icon={<SendIcon />}\n />\n </AiComposerPrimitive.Submit>\n </ShortcutTooltip>\n );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n (\n {\n defaultValue,\n onComposerSubmit,\n disabled,\n autoFocus,\n overrides,\n className,\n chatId,\n branchId,\n copilotId,\n responseTimeout,\n stream = true,\n onComposerSubmitted,\n ...props\n },\n forwardedRef\n ) => {\n const $ = useOverrides(overrides);\n const sendAiMessage = useSendAiMessage(chatId, {\n stream,\n copilotId,\n timeout: responseTimeout,\n });\n\n const handleComposerSubmit = useCallback(\n (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n onComposerSubmit?.(message, event);\n\n if (event.isDefaultPrevented()) return;\n\n const newMessage = sendAiMessage(message.text);\n\n onComposerSubmitted?.(newMessage);\n },\n [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n );\n\n return (\n <TooltipProvider>\n <AiComposerPrimitive.Form\n className={cn(\n \"lb-root lb-ai-composer lb-ai-composer-form\",\n className\n )}\n dir={$.dir}\n {...props}\n disabled={disabled}\n ref={forwardedRef}\n onComposerSubmit={handleComposerSubmit}\n chatId={chatId}\n branchId={branchId}\n >\n <div className=\"lb-ai-composer-editor-container\">\n <AiComposerPrimitive.Editor\n autoFocus={autoFocus}\n className=\"lb-ai-composer-editor\"\n placeholder={$.AI_COMPOSER_PLACEHOLDER}\n defaultValue={defaultValue}\n />\n\n <div className=\"lb-ai-composer-footer\">\n <div className=\"lb-ai-composer-editor-actions\">\n {/* No actions for now but it makes sense to keep the DOM structure */}\n </div>\n\n <div className=\"lb-ai-composer-actions\">\n <AiComposerAction overrides={overrides} />\n </div>\n </div>\n </div>\n </AiComposerPrimitive.Form>\n </TooltipProvider>\n );\n }\n);\n"],"names":["AiComposerPrimitive.Abort","AiComposerPrimitive.Submit","AiComposerPrimitive.Form","AiComposerPrimitive.Editor"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AiComposer.js","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n type AiChatMessage,\n type CopilotId,\n type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n type ComponentProps,\n type FormEvent,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n type AiComposerOverrides,\n type GlobalOverrides,\n useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n AiComposerEditorProps,\n AiComposerFormProps,\n AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n /**\n * The composer's initial value.\n */\n defaultValue?: string;\n\n /**\n * The event handler called when the composer is submitted.\n */\n onComposerSubmit?: (\n message: AiComposerSubmitMessage,\n event: FormEvent<HTMLFormElement>\n ) => void;\n\n /**\n * The event handler called after the composer is submitted.\n *\n * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n */\n onComposerSubmitted?: (message: AiChatMessage) => void;\n\n /**\n * Whether the composer is disabled.\n */\n disabled?: AiComposerFormProps[\"disabled\"];\n\n /**\n * Whether to focus the composer on mount.\n */\n autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n /**\n * Override the component's strings.\n */\n overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n /**\n * The ID of the chat the composer belongs to.\n */\n chatId: string;\n\n /**\n * The ID of the copilot to use to send the message.\n */\n copilotId?: CopilotId;\n\n /**\n * The time, in milliseconds, before an AI response will timeout.\n */\n responseTimeout?: number;\n\n /**\n * @internal\n */\n branchId?: MessageId;\n\n /**\n * @internal\n */\n stream?: boolean;\n}\n\nfunction AiComposerAction({\n overrides,\n}: {\n overrides?: AiComposerProps[\"overrides\"];\n}) {\n const { canAbort } = useAiComposer();\n const $ = useOverrides(overrides);\n\n const preventDefault = useCallback((event: SyntheticEvent) => {\n event.preventDefault();\n }, []);\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return canAbort ? (\n <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n <AiComposerPrimitive.Abort asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"secondary\"\n aria-label={$.AI_COMPOSER_ABORT}\n icon={<StopIcon />}\n />\n </AiComposerPrimitive.Abort>\n </ShortcutTooltip>\n ) : (\n <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n <AiComposerPrimitive.Submit asChild>\n <Button\n onPointerDown={preventDefault}\n onClick={stopPropagation}\n className=\"lb-ai-composer-action\"\n variant=\"primary\"\n aria-label={$.AI_COMPOSER_SEND}\n icon={<SendIcon />}\n />\n </AiComposerPrimitive.Submit>\n </ShortcutTooltip>\n );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n (\n {\n defaultValue,\n onComposerSubmit,\n disabled,\n autoFocus,\n overrides,\n className,\n chatId,\n branchId,\n copilotId,\n responseTimeout,\n stream = true,\n onComposerSubmitted,\n ...props\n },\n forwardedRef\n ) => {\n const $ = useOverrides(overrides);\n const sendAiMessage = useSendAiMessage(chatId, {\n stream,\n copilotId,\n timeout: responseTimeout,\n });\n\n const handleComposerSubmit = useCallback(\n (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n onComposerSubmit?.(message, event);\n\n if (event.isDefaultPrevented()) return;\n\n const newMessage = sendAiMessage(message.text);\n\n onComposerSubmitted?.(newMessage);\n },\n [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n );\n\n return (\n <TooltipProvider>\n <AiComposerPrimitive.Form\n className={cn(\n \"lb-root lb-ai-composer lb-ai-composer-form\",\n className\n )}\n dir={$.dir}\n {...props}\n disabled={disabled}\n ref={forwardedRef}\n onComposerSubmit={handleComposerSubmit}\n chatId={chatId}\n branchId={branchId}\n >\n <div className=\"lb-ai-composer-editor-container\">\n <AiComposerPrimitive.Editor\n autoFocus={autoFocus}\n className=\"lb-ai-composer-editor\"\n placeholder={$.AI_COMPOSER_PLACEHOLDER}\n defaultValue={defaultValue}\n />\n\n <div className=\"lb-ai-composer-footer\">\n <div className=\"lb-ai-composer-editor-actions\">\n {/* No actions for now but it makes sense to keep the DOM structure */}\n </div>\n\n <div className=\"lb-ai-composer-actions\">\n <AiComposerAction overrides={overrides} />\n </div>\n </div>\n </div>\n </AiComposerPrimitive.Form>\n </TooltipProvider>\n );\n }\n);\n"],"names":["AiComposerPrimitive.Abort","AiComposerPrimitive.Submit","AiComposerPrimitive.Form","AiComposerPrimitive.Editor"],"mappings":"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"}
|
|
@@ -6,7 +6,6 @@ require('../../icons/index.cjs');
|
|
|
6
6
|
var overrides = require('../../overrides.cjs');
|
|
7
7
|
var Button = require('./Button.cjs');
|
|
8
8
|
var Tooltip = require('./Tooltip.cjs');
|
|
9
|
-
var TooltipPrimitive = require('@radix-ui/react-tooltip');
|
|
10
9
|
var Check = require('../../icons/Check.cjs');
|
|
11
10
|
var Copy = require('../../icons/Copy.cjs');
|
|
12
11
|
|
|
@@ -35,7 +34,7 @@ function CodeBlock({ title, code, overrides: overrides$1 }) {
|
|
|
35
34
|
console.error(error);
|
|
36
35
|
}
|
|
37
36
|
}, [code]);
|
|
38
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
37
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-root lb-code-block", children: [
|
|
39
38
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-code-block-header", children: [
|
|
40
39
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-code-block-title", children: title }),
|
|
41
40
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-code-block-header-actions", children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: isCopied ? null : $.COPY_TO_CLIPBOARD, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.cjs","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n title: string;\n code: string;\n overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n const $ = useOverrides(overrides);\n const [isCopied, setCopied] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (isCopied) {\n timeoutRef.current = setTimeout(() => {\n setCopied(false);\n }, COPY_DELAY);\n }\n\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [isCopied]);\n\n const handleCopy = useCallback(() => {\n try {\n navigator.clipboard.writeText(code);\n setCopied(true);\n } catch (error) {\n console.error(error);\n }\n }, [code]);\n\n return (\n <TooltipProvider>\n <div className=\"lb-root lb-code-block\">\n <div className=\"lb-code-block-header\">\n <span className=\"lb-code-block-title\">{title}</span>\n <div className=\"lb-code-block-header-actions\">\n <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n <Button\n className=\"lb-code-block-header-action\"\n icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n onClick={handleCopy}\n aria-label={$.COPY_TO_CLIPBOARD}\n />\n </Tooltip>\n </div>\n </div>\n <pre className=\"lb-code-block-content\">\n <code>{code}</code>\n </pre>\n </div>\n </TooltipProvider>\n );\n}\n"],"names":["overrides","useOverrides","useState","useRef","useEffect","useCallback","jsx","TooltipProvider","jsxs","Tooltip","Button","CheckIcon","CopyIcon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeBlock.cjs","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n title: string;\n code: string;\n overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n const $ = useOverrides(overrides);\n const [isCopied, setCopied] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (isCopied) {\n timeoutRef.current = setTimeout(() => {\n setCopied(false);\n }, COPY_DELAY);\n }\n\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [isCopied]);\n\n const handleCopy = useCallback(() => {\n try {\n navigator.clipboard.writeText(code);\n setCopied(true);\n } catch (error) {\n console.error(error);\n }\n }, [code]);\n\n return (\n <TooltipProvider>\n <div className=\"lb-root lb-code-block\">\n <div className=\"lb-code-block-header\">\n <span className=\"lb-code-block-title\">{title}</span>\n <div className=\"lb-code-block-header-actions\">\n <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n <Button\n className=\"lb-code-block-header-action\"\n icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n onClick={handleCopy}\n aria-label={$.COPY_TO_CLIPBOARD}\n />\n </Tooltip>\n </div>\n </div>\n <pre className=\"lb-code-block-content\">\n <code>{code}</code>\n </pre>\n </div>\n </TooltipProvider>\n );\n}\n"],"names":["overrides","useOverrides","useState","useRef","useEffect","useCallback","jsx","TooltipProvider","jsxs","Tooltip","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,aAAMA,aAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAIC,uBAAaD,WAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAIE,eAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAaC,aAA6C,IAAI,CAAA,CAAA;AAEpE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAaC,kBAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAO,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACGC,cAAA,CAAAC,uBAAA,EAAA,EACC,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,uBACb,EAAA,QAAA,EAAA;AAAA,oBAACA,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,sBACb,EAAA,QAAA,EAAA;AAAA,sBAACF,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,qBAAA,EAAuB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAC7CA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,8BACb,EAAA,QAAA,kBAAAA,cAAA,CAACG,mBAAQ,OAAS,EAAA,QAAA,GAAW,IAAO,GAAA,CAAA,CAAE,iBACpC,EAAA,QAAA,kBAAAH,cAAA;AAAA,QAACI,aAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,6BAAA;AAAA,UACV,MAAM,QAAW,mBAAAJ,cAAA,CAACK,eAAU,EAAA,EAAA,CAAA,kCAAMC,aAAS,EAAA,EAAA,CAAA;AAAA,UAC3C,OAAS,EAAA,UAAA;AAAA,UACT,cAAY,CAAE,CAAA,iBAAA;AAAA,SAAA;AAAA,SAElB,CACF,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,mCACC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,QAAC,kBAAAN,cAAA,CAAA,MAAA,EAAA,EAAM,gBAAK,CACd,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -3,8 +3,7 @@ import { useState, useRef, useEffect, useCallback } from 'react';
|
|
|
3
3
|
import '../../icons/index.js';
|
|
4
4
|
import { useOverrides } from '../../overrides.js';
|
|
5
5
|
import { Button } from './Button.js';
|
|
6
|
-
import { Tooltip } from './Tooltip.js';
|
|
7
|
-
import { TooltipProvider } from '@radix-ui/react-tooltip';
|
|
6
|
+
import { TooltipProvider, Tooltip } from './Tooltip.js';
|
|
8
7
|
import { CheckIcon } from '../../icons/Check.js';
|
|
9
8
|
import { CopyIcon } from '../../icons/Copy.js';
|
|
10
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n title: string;\n code: string;\n overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n const $ = useOverrides(overrides);\n const [isCopied, setCopied] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (isCopied) {\n timeoutRef.current = setTimeout(() => {\n setCopied(false);\n }, COPY_DELAY);\n }\n\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [isCopied]);\n\n const handleCopy = useCallback(() => {\n try {\n navigator.clipboard.writeText(code);\n setCopied(true);\n } catch (error) {\n console.error(error);\n }\n }, [code]);\n\n return (\n <TooltipProvider>\n <div className=\"lb-root lb-code-block\">\n <div className=\"lb-code-block-header\">\n <span className=\"lb-code-block-title\">{title}</span>\n <div className=\"lb-code-block-header-actions\">\n <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n <Button\n className=\"lb-code-block-header-action\"\n icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n onClick={handleCopy}\n aria-label={$.COPY_TO_CLIPBOARD}\n />\n </Tooltip>\n </div>\n </div>\n <pre className=\"lb-code-block-content\">\n <code>{code}</code>\n </pre>\n </div>\n </TooltipProvider>\n );\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n title: string;\n code: string;\n overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n const $ = useOverrides(overrides);\n const [isCopied, setCopied] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (isCopied) {\n timeoutRef.current = setTimeout(() => {\n setCopied(false);\n }, COPY_DELAY);\n }\n\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [isCopied]);\n\n const handleCopy = useCallback(() => {\n try {\n navigator.clipboard.writeText(code);\n setCopied(true);\n } catch (error) {\n console.error(error);\n }\n }, [code]);\n\n return (\n <TooltipProvider>\n <div className=\"lb-root lb-code-block\">\n <div className=\"lb-code-block-header\">\n <span className=\"lb-code-block-title\">{title}</span>\n <div className=\"lb-code-block-header-actions\">\n <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n <Button\n className=\"lb-code-block-header-action\"\n icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n onClick={handleCopy}\n aria-label={$.COPY_TO_CLIPBOARD}\n />\n </Tooltip>\n </div>\n </div>\n <pre className=\"lb-code-block-content\">\n <code>{code}</code>\n </pre>\n </div>\n </TooltipProvider>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,EAAM,WAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAa,OAA6C,IAAI,CAAA,CAAA;AAEpE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAO,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACG,GAAA,CAAA,eAAA,EAAA,EACC,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,uBACb,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,sBACb,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,qBAAA,EAAuB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAC7C,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,8BACb,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,OAAS,EAAA,QAAA,GAAW,IAAO,GAAA,CAAA,CAAE,iBACpC,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,6BAAA;AAAA,UACV,MAAM,QAAW,mBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA,uBAAM,QAAS,EAAA,EAAA,CAAA;AAAA,UAC3C,OAAS,EAAA,UAAA;AAAA,UACT,cAAY,CAAE,CAAA,iBAAA;AAAA,SAAA;AAAA,SAElB,CACF,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,wBACC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAM,gBAAK,CACd,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,32 +2,13 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
5
|
+
var radixUi = require('radix-ui');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var config = require('../../config.cjs');
|
|
8
8
|
var constants = require('../../constants.cjs');
|
|
9
9
|
var overrides = require('../../overrides.cjs');
|
|
10
10
|
var cn = require('../../utils/cn.cjs');
|
|
11
11
|
|
|
12
|
-
function _interopNamespaceDefault(e) {
|
|
13
|
-
var n = Object.create(null);
|
|
14
|
-
if (e) {
|
|
15
|
-
Object.keys(e).forEach(function (k) {
|
|
16
|
-
if (k !== 'default') {
|
|
17
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function () { return e[k]; }
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
n.default = e;
|
|
26
|
-
return Object.freeze(n);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
|
|
30
|
-
|
|
31
12
|
|
|
32
13
|
function Dropdown({
|
|
33
14
|
children,
|
|
@@ -41,7 +22,7 @@ function Dropdown({
|
|
|
41
22
|
const $ = overrides.useOverrides();
|
|
42
23
|
const { portalContainer } = config.useLiveblocksUiConfig();
|
|
43
24
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
44
|
-
|
|
25
|
+
radixUi.DropdownMenu.Root,
|
|
45
26
|
{
|
|
46
27
|
defaultOpen,
|
|
47
28
|
open,
|
|
@@ -49,8 +30,8 @@ function Dropdown({
|
|
|
49
30
|
dir: $.dir,
|
|
50
31
|
children: [
|
|
51
32
|
children,
|
|
52
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
-
|
|
33
|
+
/* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
34
|
+
radixUi.DropdownMenu.Content,
|
|
54
35
|
{
|
|
55
36
|
className: cn.cn(
|
|
56
37
|
"lb-root lb-portal lb-elevation lb-dropdown",
|
|
@@ -69,7 +50,7 @@ function Dropdown({
|
|
|
69
50
|
const DropdownItem = react.forwardRef(
|
|
70
51
|
({ children, className, icon, ...props }, forwardedRef) => {
|
|
71
52
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
72
|
-
|
|
53
|
+
radixUi.DropdownMenu.DropdownMenuItem,
|
|
73
54
|
{
|
|
74
55
|
className: cn.cn("lb-dropdown-item", className),
|
|
75
56
|
...props,
|
|
@@ -82,11 +63,9 @@ const DropdownItem = react.forwardRef(
|
|
|
82
63
|
);
|
|
83
64
|
}
|
|
84
65
|
);
|
|
66
|
+
const DropdownTrigger = radixUi.DropdownMenu.Trigger;
|
|
85
67
|
|
|
86
|
-
Object.defineProperty(exports, 'DropdownTrigger', {
|
|
87
|
-
enumerable: true,
|
|
88
|
-
get: function () { return DropdownMenuPrimitive.DropdownMenuTrigger; }
|
|
89
|
-
});
|
|
90
68
|
exports.Dropdown = Dropdown;
|
|
91
69
|
exports.DropdownItem = DropdownItem;
|
|
70
|
+
exports.DropdownTrigger = DropdownTrigger;
|
|
92
71
|
//# sourceMappingURL=Dropdown.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n FLOATING_ELEMENT_COLLISION_PADDING,\n FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DropdownProps\n extends Pick<\n DropdownMenuPrimitive.DropdownMenuProps,\n \"defaultOpen\" | \"open\" | \"onOpenChange\"\n >,\n Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n content: ReactNode;\n}\n\ninterface DropdownItemProps\n extends DropdownMenuPrimitive.DropdownMenuItemProps {\n icon?: ReactNode;\n}\n\nexport function Dropdown({\n children,\n content,\n defaultOpen,\n open,\n onOpenChange,\n className,\n ...props\n}: DropdownProps) {\n const $ = useOverrides();\n const { portalContainer } = useLiveblocksUiConfig();\n\n return (\n <DropdownMenuPrimitive.Root\n defaultOpen={defaultOpen}\n open={open}\n onOpenChange={onOpenChange}\n dir={$.dir}\n >\n {children}\n <DropdownMenuPrimitive.Portal container={portalContainer}>\n <DropdownMenuPrimitive.Content\n className={cn(\n \"lb-root lb-portal lb-elevation lb-dropdown\",\n className\n )}\n sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n {...props}\n >\n {content}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </DropdownMenuPrimitive.Root>\n );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n ({ children, className, icon, ...props }, forwardedRef) => {\n return (\n <DropdownMenuPrimitive.DropdownMenuItem\n className={cn(\"lb-dropdown-item\", className)}\n {...props}\n ref={forwardedRef}\n >\n {icon ? (\n <span className=\"lb-dropdown-item-icon lb-icon-container\">\n {icon}\n </span>\n ) : null}\n {children ? (\n <span className=\"lb-dropdown-item-label\">{children}</span>\n ) : null}\n </DropdownMenuPrimitive.DropdownMenuItem>\n );\n }\n);\n\nexport const DropdownTrigger = DropdownMenuPrimitive.Trigger;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAAuB;AAAtB;AACC;AACA;AACA;AACO;AAEN;AAAA;AAEC;AAAuB;AAAtB;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AAAA;AAEL;AAAA;AAAA;AAGN;AAEO;AAAqB;AAExB;AACE;AAAuB;AAAtB;AAC4C;AACvC;AACC;AAEJ;AAIG;AAGA;AAAA;AAAA;AACN;AAGN;AAEO;;;;"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import
|
|
4
|
-
export { DropdownMenuTrigger as DropdownTrigger } from '@radix-ui/react-dropdown-menu';
|
|
3
|
+
import { DropdownMenu } from 'radix-ui';
|
|
5
4
|
import { forwardRef } from 'react';
|
|
6
5
|
import { useLiveblocksUiConfig } from '../../config.js';
|
|
7
6
|
import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.js';
|
|
@@ -21,7 +20,7 @@ function Dropdown({
|
|
|
21
20
|
const $ = useOverrides();
|
|
22
21
|
const { portalContainer } = useLiveblocksUiConfig();
|
|
23
22
|
return /* @__PURE__ */ jsxs(
|
|
24
|
-
|
|
23
|
+
DropdownMenu.Root,
|
|
25
24
|
{
|
|
26
25
|
defaultOpen,
|
|
27
26
|
open,
|
|
@@ -29,8 +28,8 @@ function Dropdown({
|
|
|
29
28
|
dir: $.dir,
|
|
30
29
|
children: [
|
|
31
30
|
children,
|
|
32
|
-
/* @__PURE__ */ jsx(
|
|
33
|
-
|
|
31
|
+
/* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
|
|
32
|
+
DropdownMenu.Content,
|
|
34
33
|
{
|
|
35
34
|
className: cn(
|
|
36
35
|
"lb-root lb-portal lb-elevation lb-dropdown",
|
|
@@ -49,7 +48,7 @@ function Dropdown({
|
|
|
49
48
|
const DropdownItem = forwardRef(
|
|
50
49
|
({ children, className, icon, ...props }, forwardedRef) => {
|
|
51
50
|
return /* @__PURE__ */ jsxs(
|
|
52
|
-
|
|
51
|
+
DropdownMenu.DropdownMenuItem,
|
|
53
52
|
{
|
|
54
53
|
className: cn("lb-dropdown-item", className),
|
|
55
54
|
...props,
|
|
@@ -62,6 +61,7 @@ const DropdownItem = forwardRef(
|
|
|
62
61
|
);
|
|
63
62
|
}
|
|
64
63
|
);
|
|
64
|
+
const DropdownTrigger = DropdownMenu.Trigger;
|
|
65
65
|
|
|
66
|
-
export { Dropdown, DropdownItem };
|
|
66
|
+
export { Dropdown, DropdownItem, DropdownTrigger };
|
|
67
67
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n FLOATING_ELEMENT_COLLISION_PADDING,\n FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DropdownProps\n extends Pick<\n DropdownMenuPrimitive.DropdownMenuProps,\n \"defaultOpen\" | \"open\" | \"onOpenChange\"\n >,\n Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n content: ReactNode;\n}\n\ninterface DropdownItemProps\n extends DropdownMenuPrimitive.DropdownMenuItemProps {\n icon?: ReactNode;\n}\n\nexport function Dropdown({\n children,\n content,\n defaultOpen,\n open,\n onOpenChange,\n className,\n ...props\n}: DropdownProps) {\n const $ = useOverrides();\n const { portalContainer } = useLiveblocksUiConfig();\n\n return (\n <DropdownMenuPrimitive.Root\n defaultOpen={defaultOpen}\n open={open}\n onOpenChange={onOpenChange}\n dir={$.dir}\n >\n {children}\n <DropdownMenuPrimitive.Portal container={portalContainer}>\n <DropdownMenuPrimitive.Content\n className={cn(\n \"lb-root lb-portal lb-elevation lb-dropdown\",\n className\n )}\n sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n {...props}\n >\n {content}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </DropdownMenuPrimitive.Root>\n );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n ({ children, className, icon, ...props }, forwardedRef) => {\n return (\n <DropdownMenuPrimitive.DropdownMenuItem\n className={cn(\"lb-dropdown-item\", className)}\n {...props}\n ref={forwardedRef}\n >\n {icon ? (\n <span className=\"lb-dropdown-item-icon lb-icon-container\">\n {icon}\n </span>\n ) : null}\n {children ? (\n <span className=\"lb-dropdown-item-label\">{children}</span>\n ) : null}\n </DropdownMenuPrimitive.DropdownMenuItem>\n );\n }\n);\n\nexport const DropdownTrigger = DropdownMenuPrimitive.Trigger;\n"],"names":[],"mappings":";;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAAuB;AAAtB;AACC;AACA;AACA;AACO;AAEN;AAAA;AAEC;AAAuB;AAAtB;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AAAA;AAEL;AAAA;AAAA;AAGN;AAEO;AAAqB;AAExB;AACE;AAAuB;AAAtB;AAC4C;AACvC;AACC;AAEJ;AAIG;AAGA;AAAA;AAAA;AACN;AAGN;AAEO;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var PopoverPrimitive = require('@radix-ui/react-popover');
|
|
5
4
|
var frimousse = require('frimousse');
|
|
5
|
+
var radixUi = require('radix-ui');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var config = require('../../config.cjs');
|
|
8
8
|
var constants = require('../../constants.cjs');
|
|
@@ -13,25 +13,6 @@ var cn = require('../../utils/cn.cjs');
|
|
|
13
13
|
var Emoji = require('./Emoji.cjs');
|
|
14
14
|
var Tooltip = require('./Tooltip.cjs');
|
|
15
15
|
|
|
16
|
-
function _interopNamespaceDefault(e) {
|
|
17
|
-
var n = Object.create(null);
|
|
18
|
-
if (e) {
|
|
19
|
-
Object.keys(e).forEach(function (k) {
|
|
20
|
-
if (k !== 'default') {
|
|
21
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
22
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function () { return e[k]; }
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
n.default = e;
|
|
30
|
-
return Object.freeze(n);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
|
|
34
|
-
|
|
35
16
|
function EmojiPickerListEmoji({
|
|
36
17
|
emoji,
|
|
37
18
|
className,
|
|
@@ -82,10 +63,10 @@ const EmojiPicker = react.forwardRef(
|
|
|
82
63
|
const stopPropagation = react.useCallback((event) => {
|
|
83
64
|
event.stopPropagation();
|
|
84
65
|
}, []);
|
|
85
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
66
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Popover.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
|
|
86
67
|
children,
|
|
87
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
88
|
-
|
|
68
|
+
/* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
69
|
+
radixUi.Popover.Content,
|
|
89
70
|
{
|
|
90
71
|
side: "top",
|
|
91
72
|
align: "center",
|
|
@@ -149,10 +130,8 @@ const EmojiPicker = react.forwardRef(
|
|
|
149
130
|
] });
|
|
150
131
|
}
|
|
151
132
|
);
|
|
133
|
+
const EmojiPickerTrigger = radixUi.Popover.Trigger;
|
|
152
134
|
|
|
153
|
-
Object.defineProperty(exports, 'EmojiPickerTrigger', {
|
|
154
|
-
enumerable: true,
|
|
155
|
-
get: function () { return PopoverPrimitive.PopoverTrigger; }
|
|
156
|
-
});
|
|
157
135
|
exports.EmojiPicker = EmojiPicker;
|
|
136
|
+
exports.EmojiPickerTrigger = EmojiPickerTrigger;
|
|
158
137
|
//# sourceMappingURL=EmojiPicker.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPicker.cjs","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport {\n type Emoji as FrimousseEmoji,\n EmojiPicker as EmojiPickerPrimitive,\n type EmojiPickerListCategoryHeaderProps,\n type EmojiPickerListEmojiProps,\n type EmojiPickerListRowProps,\n type Locale,\n} from \"frimousse\";\nimport type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { forwardRef, useCallback, useState } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n FLOATING_ELEMENT_COLLISION_PADDING,\n FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport { cn } from \"../../utils/cn\";\nimport { Emoji } from \"./Emoji\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n onOpenChange?: (open: boolean) => void;\n onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerListEmoji({\n emoji,\n className,\n ...props\n}: EmojiPickerListEmojiProps) {\n return (\n <button className={cn(\"lb-emoji-picker-emoji\", className)} {...props}>\n <Emoji emoji={emoji.emoji} />\n </button>\n );\n}\n\nfunction EmojiPickerListRow({\n children,\n className,\n ...props\n}: EmojiPickerListRowProps) {\n return (\n <div className={cn(\"lb-emoji-picker-row\", className)} {...props}>\n {children}\n </div>\n );\n}\n\nfunction EmojiPickerListCategoryHeader({\n category,\n className,\n ...props\n}: EmojiPickerListCategoryHeaderProps) {\n return (\n <div\n className={cn(\"lb-emoji-picker-category-header\", className)}\n {...props}\n >\n <span className=\"lb-emoji-picker-category-header-title\">\n {category.label}\n </span>\n </div>\n );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n (\n { onEmojiSelect, onOpenChange, children, className, ...props },\n forwardedRef\n ) => {\n const [isOpen, setOpen] = useState(false);\n const { portalContainer, emojibaseUrl } = useLiveblocksUiConfig();\n const $ = useOverrides();\n\n const handleOpenChange = useCallback(\n (isOpen: boolean) => {\n setOpen(isOpen);\n onOpenChange?.(isOpen);\n },\n [onOpenChange]\n );\n\n const handleEmojiSelect = useCallback(\n ({ emoji }: FrimousseEmoji) => {\n setOpen(false);\n onEmojiSelect?.(emoji);\n },\n [onEmojiSelect]\n );\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return (\n <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n {children}\n <PopoverPrimitive.Portal container={portalContainer}>\n <PopoverPrimitive.Content\n side=\"top\"\n align=\"center\"\n sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n className={cn(\n \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n className\n )}\n {...props}\n ref={forwardedRef}\n asChild\n >\n <EmojiPickerPrimitive.Root\n onEmojiSelect={handleEmojiSelect}\n locale={$.locale as Locale}\n columns={10}\n emojiVersion={15.1}\n emojibaseUrl={emojibaseUrl}\n onClick={stopPropagation}\n >\n <div className=\"lb-emoji-picker-header\">\n <div className=\"lb-emoji-picker-search-container\">\n <EmojiPickerPrimitive.Search\n className=\"lb-emoji-picker-search\"\n placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n autoFocus\n />\n <SearchIcon />\n </div>\n </div>\n <EmojiPickerPrimitive.Viewport className=\"lb-emoji-picker-content\">\n <EmojiPickerPrimitive.Loading className=\"lb-loading lb-emoji-picker-loading\">\n <SpinnerIcon />\n </EmojiPickerPrimitive.Loading>\n <EmojiPickerPrimitive.Empty className=\"lb-empty lb-emoji-picker-empty\">\n {$.EMOJI_PICKER_EMPTY}\n </EmojiPickerPrimitive.Empty>\n <EmojiPickerPrimitive.List\n className=\"lb-emoji-picker-list\"\n components={{\n CategoryHeader: EmojiPickerListCategoryHeader,\n Row: EmojiPickerListRow,\n Emoji: EmojiPickerListEmoji,\n }}\n />\n </EmojiPickerPrimitive.Viewport>\n <div className=\"lb-emoji-picker-footer\">\n <EmojiPickerPrimitive.ActiveEmoji>\n {({ emoji }) =>\n emoji ? (\n <>\n <div className=\"lb-emoji-picker-active-emoji\">\n {emoji.emoji}\n </div>\n <span className=\"lb-emoji-picker-active-emoji-label\">\n {emoji.label}\n </span>\n </>\n ) : (\n <span className=\"lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder\">\n Select an emoji…\n </span>\n )\n }\n </EmojiPickerPrimitive.ActiveEmoji>\n <Tooltip content={$.EMOJI_PICKER_CHANGE_SKIN_TONE}>\n <EmojiPickerPrimitive.SkinToneSelector className=\"lb-button lb-emoji-picker-skin-tone-selector\" />\n </Tooltip>\n </div>\n </EmojiPickerPrimitive.Root>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n );\n }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["jsx","cn","Emoji","forwardRef","useState","useLiveblocksUiConfig","useOverrides","useCallback","isOpen","PopoverPrimitive","FLOATING_ELEMENT_SIDE_OFFSET","FLOATING_ELEMENT_COLLISION_PADDING","jsxs","EmojiPickerPrimitive","SearchIcon","SpinnerIcon","Fragment","Tooltip"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EmojiPicker.cjs","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import {\n type Emoji as FrimousseEmoji,\n EmojiPicker as EmojiPickerPrimitive,\n type EmojiPickerListCategoryHeaderProps,\n type EmojiPickerListEmojiProps,\n type EmojiPickerListRowProps,\n type Locale,\n} from \"frimousse\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { forwardRef, useCallback, useState } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n FLOATING_ELEMENT_COLLISION_PADDING,\n FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport { cn } from \"../../utils/cn\";\nimport { Emoji } from \"./Emoji\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n onOpenChange?: (open: boolean) => void;\n onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerListEmoji({\n emoji,\n className,\n ...props\n}: EmojiPickerListEmojiProps) {\n return (\n <button className={cn(\"lb-emoji-picker-emoji\", className)} {...props}>\n <Emoji emoji={emoji.emoji} />\n </button>\n );\n}\n\nfunction EmojiPickerListRow({\n children,\n className,\n ...props\n}: EmojiPickerListRowProps) {\n return (\n <div className={cn(\"lb-emoji-picker-row\", className)} {...props}>\n {children}\n </div>\n );\n}\n\nfunction EmojiPickerListCategoryHeader({\n category,\n className,\n ...props\n}: EmojiPickerListCategoryHeaderProps) {\n return (\n <div\n className={cn(\"lb-emoji-picker-category-header\", className)}\n {...props}\n >\n <span className=\"lb-emoji-picker-category-header-title\">\n {category.label}\n </span>\n </div>\n );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n (\n { onEmojiSelect, onOpenChange, children, className, ...props },\n forwardedRef\n ) => {\n const [isOpen, setOpen] = useState(false);\n const { portalContainer, emojibaseUrl } = useLiveblocksUiConfig();\n const $ = useOverrides();\n\n const handleOpenChange = useCallback(\n (isOpen: boolean) => {\n setOpen(isOpen);\n onOpenChange?.(isOpen);\n },\n [onOpenChange]\n );\n\n const handleEmojiSelect = useCallback(\n ({ emoji }: FrimousseEmoji) => {\n setOpen(false);\n onEmojiSelect?.(emoji);\n },\n [onEmojiSelect]\n );\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return (\n <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n {children}\n <PopoverPrimitive.Portal container={portalContainer}>\n <PopoverPrimitive.Content\n side=\"top\"\n align=\"center\"\n sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n className={cn(\n \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n className\n )}\n {...props}\n ref={forwardedRef}\n asChild\n >\n <EmojiPickerPrimitive.Root\n onEmojiSelect={handleEmojiSelect}\n locale={$.locale as Locale}\n columns={10}\n emojiVersion={15.1}\n emojibaseUrl={emojibaseUrl}\n onClick={stopPropagation}\n >\n <div className=\"lb-emoji-picker-header\">\n <div className=\"lb-emoji-picker-search-container\">\n <EmojiPickerPrimitive.Search\n className=\"lb-emoji-picker-search\"\n placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n autoFocus\n />\n <SearchIcon />\n </div>\n </div>\n <EmojiPickerPrimitive.Viewport className=\"lb-emoji-picker-content\">\n <EmojiPickerPrimitive.Loading className=\"lb-loading lb-emoji-picker-loading\">\n <SpinnerIcon />\n </EmojiPickerPrimitive.Loading>\n <EmojiPickerPrimitive.Empty className=\"lb-empty lb-emoji-picker-empty\">\n {$.EMOJI_PICKER_EMPTY}\n </EmojiPickerPrimitive.Empty>\n <EmojiPickerPrimitive.List\n className=\"lb-emoji-picker-list\"\n components={{\n CategoryHeader: EmojiPickerListCategoryHeader,\n Row: EmojiPickerListRow,\n Emoji: EmojiPickerListEmoji,\n }}\n />\n </EmojiPickerPrimitive.Viewport>\n <div className=\"lb-emoji-picker-footer\">\n <EmojiPickerPrimitive.ActiveEmoji>\n {({ emoji }) =>\n emoji ? (\n <>\n <div className=\"lb-emoji-picker-active-emoji\">\n {emoji.emoji}\n </div>\n <span className=\"lb-emoji-picker-active-emoji-label\">\n {emoji.label}\n </span>\n </>\n ) : (\n <span className=\"lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder\">\n Select an emoji…\n </span>\n )\n }\n </EmojiPickerPrimitive.ActiveEmoji>\n <Tooltip content={$.EMOJI_PICKER_CHANGE_SKIN_TONE}>\n <EmojiPickerPrimitive.SkinToneSelector className=\"lb-button lb-emoji-picker-skin-tone-selector\" />\n </Tooltip>\n </div>\n </EmojiPickerPrimitive.Root>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n );\n }\n);\n\nexport const EmojiPickerTrigger = PopoverPrimitive.Trigger;\n"],"names":["jsx","cn","Emoji","forwardRef","useState","useLiveblocksUiConfig","useOverrides","useCallback","isOpen","PopoverPrimitive","FLOATING_ELEMENT_SIDE_OFFSET","FLOATING_ELEMENT_COLLISION_PADDING","jsxs","EmojiPickerPrimitive","SearchIcon","SpinnerIcon","Fragment","Tooltip"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
3
|
-
export { PopoverTrigger as EmojiPickerTrigger } from '@radix-ui/react-popover';
|
|
4
2
|
import { EmojiPicker as EmojiPicker$1 } from 'frimousse';
|
|
3
|
+
import { Popover } from 'radix-ui';
|
|
5
4
|
import { forwardRef, useState, useCallback } from 'react';
|
|
6
5
|
import { useLiveblocksUiConfig } from '../../config.js';
|
|
7
6
|
import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.js';
|
|
@@ -62,10 +61,10 @@ const EmojiPicker = forwardRef(
|
|
|
62
61
|
const stopPropagation = useCallback((event) => {
|
|
63
62
|
event.stopPropagation();
|
|
64
63
|
}, []);
|
|
65
|
-
return /* @__PURE__ */ jsxs(
|
|
64
|
+
return /* @__PURE__ */ jsxs(Popover.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
|
|
66
65
|
children,
|
|
67
|
-
/* @__PURE__ */ jsx(
|
|
68
|
-
|
|
66
|
+
/* @__PURE__ */ jsx(Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
|
|
67
|
+
Popover.Content,
|
|
69
68
|
{
|
|
70
69
|
side: "top",
|
|
71
70
|
align: "center",
|
|
@@ -129,6 +128,7 @@ const EmojiPicker = forwardRef(
|
|
|
129
128
|
] });
|
|
130
129
|
}
|
|
131
130
|
);
|
|
131
|
+
const EmojiPickerTrigger = Popover.Trigger;
|
|
132
132
|
|
|
133
|
-
export { EmojiPicker };
|
|
133
|
+
export { EmojiPicker, EmojiPickerTrigger };
|
|
134
134
|
//# sourceMappingURL=EmojiPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPicker.js","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport {\n type Emoji as FrimousseEmoji,\n EmojiPicker as EmojiPickerPrimitive,\n type EmojiPickerListCategoryHeaderProps,\n type EmojiPickerListEmojiProps,\n type EmojiPickerListRowProps,\n type Locale,\n} from \"frimousse\";\nimport type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { forwardRef, useCallback, useState } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n FLOATING_ELEMENT_COLLISION_PADDING,\n FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport { cn } from \"../../utils/cn\";\nimport { Emoji } from \"./Emoji\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n onOpenChange?: (open: boolean) => void;\n onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerListEmoji({\n emoji,\n className,\n ...props\n}: EmojiPickerListEmojiProps) {\n return (\n <button className={cn(\"lb-emoji-picker-emoji\", className)} {...props}>\n <Emoji emoji={emoji.emoji} />\n </button>\n );\n}\n\nfunction EmojiPickerListRow({\n children,\n className,\n ...props\n}: EmojiPickerListRowProps) {\n return (\n <div className={cn(\"lb-emoji-picker-row\", className)} {...props}>\n {children}\n </div>\n );\n}\n\nfunction EmojiPickerListCategoryHeader({\n category,\n className,\n ...props\n}: EmojiPickerListCategoryHeaderProps) {\n return (\n <div\n className={cn(\"lb-emoji-picker-category-header\", className)}\n {...props}\n >\n <span className=\"lb-emoji-picker-category-header-title\">\n {category.label}\n </span>\n </div>\n );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n (\n { onEmojiSelect, onOpenChange, children, className, ...props },\n forwardedRef\n ) => {\n const [isOpen, setOpen] = useState(false);\n const { portalContainer, emojibaseUrl } = useLiveblocksUiConfig();\n const $ = useOverrides();\n\n const handleOpenChange = useCallback(\n (isOpen: boolean) => {\n setOpen(isOpen);\n onOpenChange?.(isOpen);\n },\n [onOpenChange]\n );\n\n const handleEmojiSelect = useCallback(\n ({ emoji }: FrimousseEmoji) => {\n setOpen(false);\n onEmojiSelect?.(emoji);\n },\n [onEmojiSelect]\n );\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return (\n <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n {children}\n <PopoverPrimitive.Portal container={portalContainer}>\n <PopoverPrimitive.Content\n side=\"top\"\n align=\"center\"\n sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n className={cn(\n \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n className\n )}\n {...props}\n ref={forwardedRef}\n asChild\n >\n <EmojiPickerPrimitive.Root\n onEmojiSelect={handleEmojiSelect}\n locale={$.locale as Locale}\n columns={10}\n emojiVersion={15.1}\n emojibaseUrl={emojibaseUrl}\n onClick={stopPropagation}\n >\n <div className=\"lb-emoji-picker-header\">\n <div className=\"lb-emoji-picker-search-container\">\n <EmojiPickerPrimitive.Search\n className=\"lb-emoji-picker-search\"\n placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n autoFocus\n />\n <SearchIcon />\n </div>\n </div>\n <EmojiPickerPrimitive.Viewport className=\"lb-emoji-picker-content\">\n <EmojiPickerPrimitive.Loading className=\"lb-loading lb-emoji-picker-loading\">\n <SpinnerIcon />\n </EmojiPickerPrimitive.Loading>\n <EmojiPickerPrimitive.Empty className=\"lb-empty lb-emoji-picker-empty\">\n {$.EMOJI_PICKER_EMPTY}\n </EmojiPickerPrimitive.Empty>\n <EmojiPickerPrimitive.List\n className=\"lb-emoji-picker-list\"\n components={{\n CategoryHeader: EmojiPickerListCategoryHeader,\n Row: EmojiPickerListRow,\n Emoji: EmojiPickerListEmoji,\n }}\n />\n </EmojiPickerPrimitive.Viewport>\n <div className=\"lb-emoji-picker-footer\">\n <EmojiPickerPrimitive.ActiveEmoji>\n {({ emoji }) =>\n emoji ? (\n <>\n <div className=\"lb-emoji-picker-active-emoji\">\n {emoji.emoji}\n </div>\n <span className=\"lb-emoji-picker-active-emoji-label\">\n {emoji.label}\n </span>\n </>\n ) : (\n <span className=\"lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder\">\n Select an emoji…\n </span>\n )\n }\n </EmojiPickerPrimitive.ActiveEmoji>\n <Tooltip content={$.EMOJI_PICKER_CHANGE_SKIN_TONE}>\n <EmojiPickerPrimitive.SkinToneSelector className=\"lb-button lb-emoji-picker-skin-tone-selector\" />\n </Tooltip>\n </div>\n </EmojiPickerPrimitive.Root>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n );\n }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["isOpen","EmojiPickerPrimitive"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EmojiPicker.js","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import {\n type Emoji as FrimousseEmoji,\n EmojiPicker as EmojiPickerPrimitive,\n type EmojiPickerListCategoryHeaderProps,\n type EmojiPickerListEmojiProps,\n type EmojiPickerListRowProps,\n type Locale,\n} from \"frimousse\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { forwardRef, useCallback, useState } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n FLOATING_ELEMENT_COLLISION_PADDING,\n FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport { cn } from \"../../utils/cn\";\nimport { Emoji } from \"./Emoji\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n onOpenChange?: (open: boolean) => void;\n onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerListEmoji({\n emoji,\n className,\n ...props\n}: EmojiPickerListEmojiProps) {\n return (\n <button className={cn(\"lb-emoji-picker-emoji\", className)} {...props}>\n <Emoji emoji={emoji.emoji} />\n </button>\n );\n}\n\nfunction EmojiPickerListRow({\n children,\n className,\n ...props\n}: EmojiPickerListRowProps) {\n return (\n <div className={cn(\"lb-emoji-picker-row\", className)} {...props}>\n {children}\n </div>\n );\n}\n\nfunction EmojiPickerListCategoryHeader({\n category,\n className,\n ...props\n}: EmojiPickerListCategoryHeaderProps) {\n return (\n <div\n className={cn(\"lb-emoji-picker-category-header\", className)}\n {...props}\n >\n <span className=\"lb-emoji-picker-category-header-title\">\n {category.label}\n </span>\n </div>\n );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n (\n { onEmojiSelect, onOpenChange, children, className, ...props },\n forwardedRef\n ) => {\n const [isOpen, setOpen] = useState(false);\n const { portalContainer, emojibaseUrl } = useLiveblocksUiConfig();\n const $ = useOverrides();\n\n const handleOpenChange = useCallback(\n (isOpen: boolean) => {\n setOpen(isOpen);\n onOpenChange?.(isOpen);\n },\n [onOpenChange]\n );\n\n const handleEmojiSelect = useCallback(\n ({ emoji }: FrimousseEmoji) => {\n setOpen(false);\n onEmojiSelect?.(emoji);\n },\n [onEmojiSelect]\n );\n\n const stopPropagation = useCallback((event: SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return (\n <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n {children}\n <PopoverPrimitive.Portal container={portalContainer}>\n <PopoverPrimitive.Content\n side=\"top\"\n align=\"center\"\n sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n className={cn(\n \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n className\n )}\n {...props}\n ref={forwardedRef}\n asChild\n >\n <EmojiPickerPrimitive.Root\n onEmojiSelect={handleEmojiSelect}\n locale={$.locale as Locale}\n columns={10}\n emojiVersion={15.1}\n emojibaseUrl={emojibaseUrl}\n onClick={stopPropagation}\n >\n <div className=\"lb-emoji-picker-header\">\n <div className=\"lb-emoji-picker-search-container\">\n <EmojiPickerPrimitive.Search\n className=\"lb-emoji-picker-search\"\n placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n autoFocus\n />\n <SearchIcon />\n </div>\n </div>\n <EmojiPickerPrimitive.Viewport className=\"lb-emoji-picker-content\">\n <EmojiPickerPrimitive.Loading className=\"lb-loading lb-emoji-picker-loading\">\n <SpinnerIcon />\n </EmojiPickerPrimitive.Loading>\n <EmojiPickerPrimitive.Empty className=\"lb-empty lb-emoji-picker-empty\">\n {$.EMOJI_PICKER_EMPTY}\n </EmojiPickerPrimitive.Empty>\n <EmojiPickerPrimitive.List\n className=\"lb-emoji-picker-list\"\n components={{\n CategoryHeader: EmojiPickerListCategoryHeader,\n Row: EmojiPickerListRow,\n Emoji: EmojiPickerListEmoji,\n }}\n />\n </EmojiPickerPrimitive.Viewport>\n <div className=\"lb-emoji-picker-footer\">\n <EmojiPickerPrimitive.ActiveEmoji>\n {({ emoji }) =>\n emoji ? (\n <>\n <div className=\"lb-emoji-picker-active-emoji\">\n {emoji.emoji}\n </div>\n <span className=\"lb-emoji-picker-active-emoji-label\">\n {emoji.label}\n </span>\n </>\n ) : (\n <span className=\"lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder\">\n Select an emoji…\n </span>\n )\n }\n </EmojiPickerPrimitive.ActiveEmoji>\n <Tooltip content={$.EMOJI_PICKER_CHANGE_SKIN_TONE}>\n <EmojiPickerPrimitive.SkinToneSelector className=\"lb-button lb-emoji-picker-skin-tone-selector\" />\n </Tooltip>\n </div>\n </EmojiPickerPrimitive.Root>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n );\n }\n);\n\nexport const EmojiPickerTrigger = PopoverPrimitive.Trigger;\n"],"names":["isOpen","PopoverPrimitive","EmojiPickerPrimitive"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var
|
|
4
|
+
var radixUi = require('radix-ui');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var overrides = require('../../overrides.cjs');
|
|
7
7
|
var cn = require('../../utils/cn.cjs');
|
|
@@ -9,7 +9,7 @@ var intl = require('../../utils/intl.cjs');
|
|
|
9
9
|
|
|
10
10
|
const List = react.forwardRef(
|
|
11
11
|
({ values, formatRemaining, truncate, locale, className, asChild, ...props }, forwardedRef) => {
|
|
12
|
-
const Component = asChild ?
|
|
12
|
+
const Component = asChild ? radixUi.Slot.Slot : "span";
|
|
13
13
|
const $ = overrides.useOverrides();
|
|
14
14
|
const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;
|
|
15
15
|
const formattedList = react.useMemo(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.cjs","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot } from \"
|
|
1
|
+
{"version":3,"file":"List.cjs","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\nimport { cn } from \"../../utils/cn\";\nimport { listFormat } from \"../../utils/intl\";\n\nexport interface ListProps extends ComponentPropsWithSlot<\"span\"> {\n values: ReactNode[];\n formatRemaining?: (amount: number) => string;\n truncate?: number;\n locale?: string;\n}\n\nexport const List = forwardRef<HTMLSpanElement, ListProps>(\n (\n { values, formatRemaining, truncate, locale, className, asChild, ...props },\n forwardedRef\n ) => {\n const Component = asChild ? SlotPrimitive.Slot : \"span\";\n const $ = useOverrides();\n const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;\n const formattedList = useMemo(() => {\n const elements =\n truncate && truncate < values.length - 1\n ? [\n ...values.slice(0, truncate),\n formatRemainingWithDefault(values.length - truncate),\n ]\n : [...values];\n const placeholders = Array(elements.length).fill(\".\");\n const parts = listFormat(locale).formatToParts(placeholders);\n\n return parts.map((part) =>\n part.type === \"element\" ? elements.shift() : part.value\n );\n }, [formatRemainingWithDefault, locale, truncate, values]);\n\n return (\n <Component\n className={cn(\"lb-list\", className)}\n {...props}\n ref={forwardedRef}\n >\n {formattedList}\n </Component>\n );\n }\n);\n"],"names":["forwardRef","SlotPrimitive","useOverrides","useMemo","listFormat","jsx","cn"],"mappings":";;;;;;;;;AAgBO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,CACE,EAAE,MAAA,EAAQ,eAAiB,EAAA,QAAA,EAAU,MAAQ,EAAA,SAAA,EAAW,OAAS,EAAA,GAAG,KAAM,EAAA,EAC1E,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,OAAU,GAAAC,YAAA,CAAc,IAAO,GAAA,MAAA,CAAA;AACjD,IAAA,MAAM,IAAIC,sBAAa,EAAA,CAAA;AACvB,IAAM,MAAA,0BAAA,GAA6B,mBAAmB,CAAE,CAAA,cAAA,CAAA;AACxD,IAAM,MAAA,aAAA,GAAgBC,cAAQ,MAAM;AAClC,MAAA,MAAM,QACJ,GAAA,QAAA,IAAY,QAAW,GAAA,MAAA,CAAO,SAAS,CACnC,GAAA;AAAA,QACE,GAAG,MAAA,CAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA;AAAA,QAC3B,0BAAA,CAA2B,MAAO,CAAA,MAAA,GAAS,QAAQ,CAAA;AAAA,OACrD,GACA,CAAC,GAAG,MAAM,CAAA,CAAA;AAChB,MAAA,MAAM,eAAe,KAAM,CAAA,QAAA,CAAS,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAA;AACpD,MAAA,MAAM,KAAQ,GAAAC,eAAA,CAAW,MAAM,CAAA,CAAE,cAAc,YAAY,CAAA,CAAA;AAE3D,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA,QAAI,CAAC,SAChB,IAAK,CAAA,IAAA,KAAS,YAAY,QAAS,CAAA,KAAA,KAAU,IAAK,CAAA,KAAA;AAAA,OACpD,CAAA;AAAA,OACC,CAAC,0BAAA,EAA4B,MAAQ,EAAA,QAAA,EAAU,MAAM,CAAC,CAAA,CAAA;AAEzD,IACE,uBAAAC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,KAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QACjC,GAAG,KAAA;AAAA,QACJ,GAAK,EAAA,YAAA;AAAA,QAEJ,QAAA,EAAA,aAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { Slot } from '
|
|
2
|
+
import { Slot } from 'radix-ui';
|
|
3
3
|
import { forwardRef, useMemo } from 'react';
|
|
4
4
|
import { useOverrides } from '../../overrides.js';
|
|
5
5
|
import { cn } from '../../utils/cn.js';
|
|
@@ -7,7 +7,7 @@ import { listFormat } from '../../utils/intl.js';
|
|
|
7
7
|
|
|
8
8
|
const List = forwardRef(
|
|
9
9
|
({ values, formatRemaining, truncate, locale, className, asChild, ...props }, forwardedRef) => {
|
|
10
|
-
const Component = asChild ? Slot : "span";
|
|
10
|
+
const Component = asChild ? Slot.Slot : "span";
|
|
11
11
|
const $ = useOverrides();
|
|
12
12
|
const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;
|
|
13
13
|
const formattedList = useMemo(() => {
|