@liveblocks/react-ui 3.15.0-feeds2 → 3.15.0-rc1
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 +3 -5
- package/dist/_private/index.cjs.map +1 -1
- package/dist/_private/index.d.cts +10 -4
- package/dist/_private/index.d.ts +10 -4
- package/dist/_private/index.js +2 -2
- package/dist/components/AiChat.cjs +10 -2
- package/dist/components/AiChat.cjs.map +1 -1
- package/dist/components/AiChat.js +10 -2
- package/dist/components/AiChat.js.map +1 -1
- package/dist/components/AvatarStack.cjs +117 -0
- package/dist/components/AvatarStack.cjs.map +1 -0
- package/dist/components/AvatarStack.js +115 -0
- package/dist/components/AvatarStack.js.map +1 -0
- package/dist/components/Comment.cjs +259 -250
- package/dist/components/Comment.cjs.map +1 -1
- package/dist/components/Comment.js +264 -236
- package/dist/components/Comment.js.map +1 -1
- package/dist/components/CommentPin.cjs +36 -0
- package/dist/components/CommentPin.cjs.map +1 -0
- package/dist/components/CommentPin.js +34 -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 +256 -0
- package/dist/components/Cursors.cjs.map +1 -0
- package/dist/components/Cursors.js +254 -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 +61 -51
- package/dist/components/Thread.cjs.map +1 -1
- package/dist/components/Thread.js +66 -37
- 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/Avatar.cjs +10 -13
- package/dist/components/internal/Avatar.cjs.map +1 -1
- package/dist/components/internal/Avatar.js +11 -14
- package/dist/components/internal/Avatar.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 +298 -130
- package/dist/index.d.ts +298 -130
- 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/utils/use-stable-component.cjs +32 -0
- package/dist/utils/use-stable-component.cjs.map +1 -0
- package/dist/utils/use-stable-component.js +30 -0
- package/dist/utils/use-stable-component.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 +6 -10
- 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":"Avatar.cjs","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/get-initials\";\nimport { useUserOrGroupInfo } from \"../../utils/use-user-or-group-info\";\n\ninterface AvatarLayoutProps extends ComponentProps<\"div\"> {\n src?: string;\n name?: string;\n fallback?: string;\n isLoading: boolean;\n}\n\nexport type AvatarProps = ComponentProps<\"div\"> & {\n icon?: ReactNode;\n} & Relax<\n | {\n /**\n * The user ID to display the avatar for.\n */\n userId: string;\n }\n | {\n /**\n * The group ID to display the avatar for.\n */\n groupId: string;\n }\n >;\n\nfunction AvatarLayout({\n src,\n name,\n fallback,\n isLoading,\n className,\n ...props\n}: AvatarLayoutProps) {\n const nameInitials = useMemo(\n () => (name ? getInitials(name) : undefined),\n [name]\n );\n const fallbackInitials = useMemo(\n () => (!isLoading && fallback && !name ? getInitials(fallback) : undefined),\n [isLoading, fallback, name]\n );\n\n return (\n <div\n className={cn(\"lb-avatar\", className)}\n data-loading={isLoading ? \"\" : undefined}\n {...props}\n >\n {src
|
|
1
|
+
{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/get-initials\";\nimport { useUserOrGroupInfo } from \"../../utils/use-user-or-group-info\";\n\ninterface AvatarLayoutProps extends ComponentProps<\"div\"> {\n src?: string;\n name?: string;\n fallback?: string;\n isLoading: boolean;\n}\n\nexport type AvatarProps = ComponentProps<\"div\"> & {\n icon?: ReactNode;\n} & Relax<\n | {\n /**\n * The user ID to display the avatar for.\n */\n userId: string;\n }\n | {\n /**\n * The group ID to display the avatar for.\n */\n groupId: string;\n }\n >;\n\nfunction AvatarLayout({\n src,\n name,\n fallback,\n isLoading,\n className,\n ...props\n}: AvatarLayoutProps) {\n const nameInitials = useMemo(\n () => (name ? getInitials(name) : undefined),\n [name]\n );\n const fallbackInitials = useMemo(\n () => (!isLoading && fallback && !name ? getInitials(fallback) : undefined),\n [isLoading, fallback, name]\n );\n\n return (\n <div\n className={cn(\"lb-avatar\", className)}\n data-loading={isLoading ? \"\" : undefined}\n {...props}\n >\n {src ? (\n <img className=\"lb-avatar-image\" src={src} alt={name} />\n ) : nameInitials ? (\n <span className=\"lb-avatar-fallback\" aria-hidden>\n {nameInitials}\n </span>\n ) : fallbackInitials ? (\n <span\n className=\"lb-avatar-fallback\"\n aria-label={fallback}\n title={fallback}\n >\n {fallbackInitials}\n </span>\n ) : null}\n </div>\n );\n}\n\nexport function Avatar({ userId, groupId, icon, ...props }: AvatarProps) {\n const { info, isLoading } = useUserOrGroupInfo(\n userId ? \"user\" : \"group\",\n userId ?? groupId\n );\n\n return icon && (isLoading || !info?.avatar) ? (\n <div {...props}>{icon}</div>\n ) : (\n <AvatarLayout\n src={info?.avatar}\n name={info?.name}\n fallback={userId ?? groupId}\n isLoading={isLoading}\n {...props}\n />\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAkCA;AAAsB;AACpB;AACA;AACA;AACA;AACA;AAEF;AACE;AAAqB;AACe;AAC7B;AAEP;AAAyB;AAC0C;AACvC;AAG5B;AACE;AAAC;AAAA;AACqC;AACL;AAC3B;AASF;AAAC;AAAA;AACW;AACE;AACL;AAEN;AAAA;AAED;AAAA;AAGV;AAEO;AACL;AAA4B;AACR;AACR;AAGZ;AAGE;AAAC;AAAA;AACY;AACC;AACQ;AACpB;AACI;AAAA;AAGV;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { cn } from '../../utils/cn.js';
|
|
5
5
|
import { getInitials } from '../../utils/get-initials.js';
|
|
@@ -22,24 +22,21 @@ function AvatarLayout({
|
|
|
22
22
|
() => !isLoading && fallback && !name ? getInitials(fallback) : void 0,
|
|
23
23
|
[isLoading, fallback, name]
|
|
24
24
|
);
|
|
25
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ jsx(
|
|
26
26
|
"div",
|
|
27
27
|
{
|
|
28
28
|
className: cn("lb-avatar", className),
|
|
29
29
|
"data-loading": isLoading ? "" : void 0,
|
|
30
30
|
...props,
|
|
31
|
-
children:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
) : null
|
|
42
|
-
]
|
|
31
|
+
children: src ? /* @__PURE__ */ jsx("img", { className: "lb-avatar-image", src, alt: name }) : nameInitials ? /* @__PURE__ */ jsx("span", { className: "lb-avatar-fallback", "aria-hidden": true, children: nameInitials }) : fallbackInitials ? /* @__PURE__ */ jsx(
|
|
32
|
+
"span",
|
|
33
|
+
{
|
|
34
|
+
className: "lb-avatar-fallback",
|
|
35
|
+
"aria-label": fallback,
|
|
36
|
+
title: fallback,
|
|
37
|
+
children: fallbackInitials
|
|
38
|
+
}
|
|
39
|
+
) : null
|
|
43
40
|
}
|
|
44
41
|
);
|
|
45
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/get-initials\";\nimport { useUserOrGroupInfo } from \"../../utils/use-user-or-group-info\";\n\ninterface AvatarLayoutProps extends ComponentProps<\"div\"> {\n src?: string;\n name?: string;\n fallback?: string;\n isLoading: boolean;\n}\n\nexport type AvatarProps = ComponentProps<\"div\"> & {\n icon?: ReactNode;\n} & Relax<\n | {\n /**\n * The user ID to display the avatar for.\n */\n userId: string;\n }\n | {\n /**\n * The group ID to display the avatar for.\n */\n groupId: string;\n }\n >;\n\nfunction AvatarLayout({\n src,\n name,\n fallback,\n isLoading,\n className,\n ...props\n}: AvatarLayoutProps) {\n const nameInitials = useMemo(\n () => (name ? getInitials(name) : undefined),\n [name]\n );\n const fallbackInitials = useMemo(\n () => (!isLoading && fallback && !name ? getInitials(fallback) : undefined),\n [isLoading, fallback, name]\n );\n\n return (\n <div\n className={cn(\"lb-avatar\", className)}\n data-loading={isLoading ? \"\" : undefined}\n {...props}\n >\n {src
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/get-initials\";\nimport { useUserOrGroupInfo } from \"../../utils/use-user-or-group-info\";\n\ninterface AvatarLayoutProps extends ComponentProps<\"div\"> {\n src?: string;\n name?: string;\n fallback?: string;\n isLoading: boolean;\n}\n\nexport type AvatarProps = ComponentProps<\"div\"> & {\n icon?: ReactNode;\n} & Relax<\n | {\n /**\n * The user ID to display the avatar for.\n */\n userId: string;\n }\n | {\n /**\n * The group ID to display the avatar for.\n */\n groupId: string;\n }\n >;\n\nfunction AvatarLayout({\n src,\n name,\n fallback,\n isLoading,\n className,\n ...props\n}: AvatarLayoutProps) {\n const nameInitials = useMemo(\n () => (name ? getInitials(name) : undefined),\n [name]\n );\n const fallbackInitials = useMemo(\n () => (!isLoading && fallback && !name ? getInitials(fallback) : undefined),\n [isLoading, fallback, name]\n );\n\n return (\n <div\n className={cn(\"lb-avatar\", className)}\n data-loading={isLoading ? \"\" : undefined}\n {...props}\n >\n {src ? (\n <img className=\"lb-avatar-image\" src={src} alt={name} />\n ) : nameInitials ? (\n <span className=\"lb-avatar-fallback\" aria-hidden>\n {nameInitials}\n </span>\n ) : fallbackInitials ? (\n <span\n className=\"lb-avatar-fallback\"\n aria-label={fallback}\n title={fallback}\n >\n {fallbackInitials}\n </span>\n ) : null}\n </div>\n );\n}\n\nexport function Avatar({ userId, groupId, icon, ...props }: AvatarProps) {\n const { info, isLoading } = useUserOrGroupInfo(\n userId ? \"user\" : \"group\",\n userId ?? groupId\n );\n\n return icon && (isLoading || !info?.avatar) ? (\n <div {...props}>{icon}</div>\n ) : (\n <AvatarLayout\n src={info?.avatar}\n name={info?.name}\n fallback={userId ?? groupId}\n isLoading={isLoading}\n {...props}\n />\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAkCA;AAAsB;AACpB;AACA;AACA;AACA;AACA;AAEF;AACE;AAAqB;AACe;AAC7B;AAEP;AAAyB;AAC0C;AACvC;AAG5B;AACE;AAAC;AAAA;AACqC;AACL;AAC3B;AASF;AAAC;AAAA;AACW;AACE;AACL;AAEN;AAAA;AAED;AAAA;AAGV;AAEO;AACL;AAA4B;AACR;AACR;AAGZ;AAGE;AAAC;AAAA;AACY;AACC;AACQ;AACpB;AACI;AAAA;AAGV;;"}
|
|
@@ -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(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot } from \"
|
|
1
|
+
{"version":3,"file":"List.js","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":["SlotPrimitive"],"mappings":";;;;;;;AAgBO,MAAM,IAAO,GAAA,UAAA;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,GAAAA,IAAA,CAAc,IAAO,GAAA,MAAA,CAAA;AACjD,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AACvB,IAAM,MAAA,0BAAA,GAA6B,mBAAmB,CAAE,CAAA,cAAA,CAAA;AACxD,IAAM,MAAA,aAAA,GAAgB,QAAQ,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,GAAA,UAAA,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,uBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAG,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;;;;"}
|