@dxos/react-ui-pickers 0.7.5-labs.8a82073 → 0.7.5-labs.c0e040f
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/lib/browser/index.mjs +42 -29
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +96 -83
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +42 -29
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/EmojiPicker.d.ts.map +1 -1
- package/dist/types/src/components/HuePicker.d.ts.map +1 -1
- package/package.json +8 -10
- package/src/components/EmojiPicker.tsx +4 -5
- package/src/components/HuePicker.tsx +41 -34
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
// packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx
|
|
2
2
|
import emojiData from "@emoji-mart/data";
|
|
3
3
|
import EmojiMart from "@emoji-mart/react";
|
|
4
|
-
import { ArrowCounterClockwise, CaretDown, UserCircle } from "@phosphor-icons/react";
|
|
5
4
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
6
5
|
import React, { useRef, useState } from "react";
|
|
7
|
-
import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
|
|
8
|
-
import { getSize } from "@dxos/react-ui-theme";
|
|
6
|
+
import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation, Icon } from "@dxos/react-ui";
|
|
9
7
|
var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames }) => {
|
|
10
8
|
const { t } = useTranslation("os");
|
|
11
9
|
const { themeMode } = useThemeContext();
|
|
@@ -45,8 +43,9 @@ var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji,
|
|
|
45
43
|
disabled
|
|
46
44
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
47
45
|
className: "sr-only"
|
|
48
|
-
}, t("select emoji label")), /* @__PURE__ */ React.createElement(
|
|
49
|
-
|
|
46
|
+
}, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
47
|
+
icon: "ph--user-circle--regular",
|
|
48
|
+
size: 5
|
|
50
49
|
})))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
51
50
|
side: "bottom"
|
|
52
51
|
}, t("select emoji label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
@@ -96,8 +95,9 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
96
95
|
className: "sr-only"
|
|
97
96
|
}, t("select emoji label")), /* @__PURE__ */ React.createElement("span", {
|
|
98
97
|
className: "grow pis-14"
|
|
99
|
-
}, emojiValue), /* @__PURE__ */ React.createElement(
|
|
100
|
-
|
|
98
|
+
}, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
|
|
99
|
+
icon: "ph--caret-down--regular",
|
|
100
|
+
size: 4
|
|
101
101
|
}))), /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
102
102
|
side: "right",
|
|
103
103
|
sideOffset: isMd ? 0 : -310,
|
|
@@ -126,19 +126,20 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
126
126
|
disabled
|
|
127
127
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
128
128
|
className: "sr-only"
|
|
129
|
-
}, t("clear label")), /* @__PURE__ */ React.createElement(
|
|
129
|
+
}, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
130
|
+
icon: "ph--arrow-counter-clockwise--regular",
|
|
131
|
+
size: 5
|
|
132
|
+
}))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
130
133
|
side: "right"
|
|
131
134
|
}, t("clear label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))));
|
|
132
135
|
};
|
|
133
136
|
|
|
134
137
|
// packages/ui/react-ui-pickers/src/components/HuePicker.tsx
|
|
135
|
-
import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check, Palette } from "@phosphor-icons/react";
|
|
136
138
|
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
137
139
|
import React2, { useRef as useRef2, useState as useState2 } from "react";
|
|
138
|
-
import { Button as Button2, DropdownMenu,
|
|
139
|
-
import {
|
|
140
|
+
import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip as Tooltip2, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
141
|
+
import { hues, mx } from "@dxos/react-ui-theme";
|
|
140
142
|
var HuePreview = ({ hue }) => {
|
|
141
|
-
const { tx } = useThemeContext2();
|
|
142
143
|
const size = 20;
|
|
143
144
|
return /* @__PURE__ */ React2.createElement("svg", {
|
|
144
145
|
width: size,
|
|
@@ -149,12 +150,16 @@ var HuePreview = ({ hue }) => {
|
|
|
149
150
|
y: 0,
|
|
150
151
|
width: size,
|
|
151
152
|
height: size,
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
153
|
+
fill: `var(--dx-${hue}Surface)`
|
|
154
|
+
}), /* @__PURE__ */ React2.createElement("text", {
|
|
155
|
+
x: "10",
|
|
156
|
+
y: "15",
|
|
157
|
+
textAnchor: "middle",
|
|
158
|
+
fontSize: "14",
|
|
159
|
+
fontWeight: "bold",
|
|
160
|
+
fill: `var(--dx-${hue}SurfaceText)`
|
|
161
|
+
}, "T"));
|
|
156
162
|
};
|
|
157
|
-
var hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
|
|
158
163
|
var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
|
|
159
164
|
const { t } = useTranslation2("os");
|
|
160
165
|
const [hueValue, setHueValue] = useControllableState2({
|
|
@@ -191,16 +196,17 @@ var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultH
|
|
|
191
196
|
disabled
|
|
192
197
|
}, /* @__PURE__ */ React2.createElement("span", {
|
|
193
198
|
className: "sr-only"
|
|
194
|
-
}, t("select hue label")), /* @__PURE__ */ React2.createElement(
|
|
195
|
-
|
|
199
|
+
}, t("select hue label")), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
200
|
+
icon: "ph--palette--regular",
|
|
201
|
+
size: 5
|
|
196
202
|
})))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
|
|
197
203
|
side: "bottom"
|
|
198
204
|
}, t("select hue label"), /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
199
205
|
side: "bottom",
|
|
200
206
|
classNames: "!w-40"
|
|
201
207
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
202
|
-
classNames: "grid grid-cols-
|
|
203
|
-
},
|
|
208
|
+
classNames: "grid grid-cols-6"
|
|
209
|
+
}, hues.map((hue2) => {
|
|
204
210
|
return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
205
211
|
key: hue2,
|
|
206
212
|
checked: hue2 === hueValue,
|
|
@@ -231,13 +237,14 @@ var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear })
|
|
|
231
237
|
}, t("select hue label")), /* @__PURE__ */ React2.createElement("div", {
|
|
232
238
|
role: "none",
|
|
233
239
|
className: "pis-14 grow flex items-center justify-center gap-2"
|
|
234
|
-
}, /* @__PURE__ */ React2.createElement(HuePreview, {
|
|
240
|
+
}, hue ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(HuePreview, {
|
|
235
241
|
hue: hueValue
|
|
236
|
-
}), /* @__PURE__ */ React2.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React2.createElement(
|
|
237
|
-
|
|
238
|
-
|
|
242
|
+
}), /* @__PURE__ */ React2.createElement("span", null, t(`${hueValue} label`))) : /* @__PURE__ */ React2.createElement("span", null, t("select a hue label"))), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
243
|
+
icon: "ph--caret-down--regular",
|
|
244
|
+
size: 4
|
|
245
|
+
}))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
239
246
|
side: "right"
|
|
240
|
-
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null,
|
|
247
|
+
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, hues.map((hue2) => {
|
|
241
248
|
return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
242
249
|
key: hue2,
|
|
243
250
|
checked: hue2 === hueValue,
|
|
@@ -246,8 +253,11 @@ var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear })
|
|
|
246
253
|
hue: hue2
|
|
247
254
|
}), /* @__PURE__ */ React2.createElement("span", {
|
|
248
255
|
className: "grow"
|
|
249
|
-
}, t(`${hue2} label`)), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React2.createElement(
|
|
250
|
-
|
|
256
|
+
}, t(`${hue2} label`)), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React2.createElement(Icon2, {
|
|
257
|
+
icon: "ph--check--regular",
|
|
258
|
+
size: 4
|
|
259
|
+
})));
|
|
260
|
+
})), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip2.Root, null, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
|
|
251
261
|
asChild: true
|
|
252
262
|
}, /* @__PURE__ */ React2.createElement(Button2, {
|
|
253
263
|
variant: "ghost",
|
|
@@ -255,7 +265,10 @@ var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear })
|
|
|
255
265
|
disabled
|
|
256
266
|
}, /* @__PURE__ */ React2.createElement("span", {
|
|
257
267
|
className: "sr-only"
|
|
258
|
-
}, t("clear label")), /* @__PURE__ */ React2.createElement(
|
|
268
|
+
}, t("clear label")), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
269
|
+
icon: "ph--arrow-counter-clockwise--regular",
|
|
270
|
+
size: 5
|
|
271
|
+
}))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
|
|
259
272
|
side: "right"
|
|
260
273
|
}, t("clear label"), /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null)))));
|
|
261
274
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { ArrowCounterClockwise, CaretDown, UserCircle } from '@phosphor-icons/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n} from '@dxos/react-ui';\nimport { getSize } from '@dxos/react-ui-theme';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n classNames,\n}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <UserCircle className={getSize(5)} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span className='grow pis-14'>{emojiValue}</span>\n <CaretDown className={getSize(4)} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <ArrowCounterClockwise />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n DropdownMenu,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useThemeContext,\n useTranslation,\n} from '@dxos/react-ui';\nimport { getSize, hueTokenThemes, mx } from '@dxos/react-ui-theme';\n\nconst HuePreview = ({ hue }: { hue: string }) => {\n const { tx } = useThemeContext();\n const size = 20;\n return (\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <rect x={0} y={0} width={size} height={size} className={tx('hue.fill', 'select--hue__preview', { hue })} />\n </svg>\n );\n};\n\nconst hueTokens = Object.keys(hueTokenThemes).slice(0, 16);\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultHue?: string;\n hue?: string;\n onChangeHue?: (nextHue: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const HuePickerToolbarButton = ({\n disabled,\n hue,\n onChangeHue,\n classNames,\n defaultHue,\n}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={huePickerOpen}\n onOpenChange={(nextOpen) => {\n setHuePickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <Palette className={getSize(5)} />\n </Toolbar.Button>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select hue label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!w-40'>\n <DropdownMenu.Viewport classNames='grid grid-cols-4'>\n {hueTokens.map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n classNames={'px-0 py-2 items-center justify-center'}\n >\n <HuePreview hue={hue} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking hue alongside a button for unsetting it.\n */\nexport const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n return (\n <>\n <DropdownMenu.Root modal={false}>\n <DropdownMenu.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>\n <HuePreview hue={hueValue!} />\n <span>{t(`${hueValue} label`)}</span>\n </div>\n <CaretDown className={getSize(4)} />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content side='right'>\n <DropdownMenu.Viewport>\n {Object.keys(hueTokenThemes).map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n >\n <HuePreview hue={hue} />\n <span className='grow'>{t(`${hue} label`)}</span>\n <DropdownMenu.ItemIndicator>\n <Check />\n </DropdownMenu.ItemIndicator>\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <ArrowCounterClockwise />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,OAAOA,eAAe;AACtB,OAAOC,eAAe;AACtB,SAASC,
|
|
6
|
-
"names": ["emojiData", "EmojiMart", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n classNames,\n}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span className='grow pis-14'>{emojiValue}</span>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n DropdownMenu,\n Icon,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useTranslation,\n} from '@dxos/react-ui';\nimport { hues, mx } from '@dxos/react-ui-theme';\n\nconst HuePreview = ({ hue }: { hue: string }) => {\n const size = 20;\n return (\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${hue}Surface)`} />\n <text x='10' y='15' textAnchor='middle' fontSize='14' fontWeight='bold' fill={`var(--dx-${hue}SurfaceText)`}>\n T\n </text>\n </svg>\n );\n};\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultHue?: string;\n hue?: string;\n onChangeHue?: (nextHue: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const HuePickerToolbarButton = ({\n disabled,\n hue,\n onChangeHue,\n classNames,\n defaultHue,\n}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={huePickerOpen}\n onOpenChange={(nextOpen) => {\n setHuePickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <Icon icon='ph--palette--regular' size={5} />\n </Toolbar.Button>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select hue label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!w-40'>\n <DropdownMenu.Viewport classNames='grid grid-cols-6'>\n {hues.map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n classNames={'px-0 py-2 items-center justify-center'}\n >\n <HuePreview hue={hue} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking hue alongside a button for unsetting it.\n */\nexport const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n return (\n <>\n <DropdownMenu.Root modal={false}>\n <DropdownMenu.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>\n {hue ? (\n <>\n <HuePreview hue={hueValue!} />\n <span>{t(`${hueValue} label`)}</span>\n </>\n ) : (\n <span>{t('select a hue label')}</span>\n )}\n </div>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='right'>\n <DropdownMenu.Viewport>\n {hues.map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n >\n <HuePreview hue={hue} />\n <span className='grow'>{t(`${hue} label`)}</span>\n <DropdownMenu.ItemIndicator>\n <Icon icon='ph--check--regular' size={4} />\n </DropdownMenu.ItemIndicator>\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": ";AAIA,OAAOA,eAAe;AACtB,OAAOC,eAAe;AACtB,SAASC,4BAA4B;AACrC,OAAOC,SAASC,QAAQC,gBAAgB;AAExC,SACEC,QAEAC,SAEAC,SACAC,SACAC,eACAC,iBACAC,gBACAC,YACK;AAeA,IAAMC,2BAA2B,CAAC,EACvCC,UACAC,cACAC,OACAC,eACAC,WAAU,MAC8C;AACxD,QAAM,EAAEC,EAAC,IAAKC,eAAe,IAAA;AAC7B,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,QAAM,CAACC,aAAaC,aAAAA,IAAiBC,qBAA6B;IAChEC,MAAMV;IACNW,UAAUV;IACVW,aAAab;EACf,CAAA;AAEA,QAAM,CAACc,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAChE,QAAMC,sBAAsBC,OAAgB,KAAA;AAC5C,QAAM,CAACC,oBAAoBC,qBAAAA,IAAyBJ,SAAS,KAAA;AAE7D,SACE,sBAAA,cAACK,QAAQC,MAAI;IACXC,MAAMJ;IACNK,cAAc,CAACC,aAAAA;AACb,UAAIR,oBAAoBS,SAAS;AAC/BN,8BAAsB,KAAA;AACtBH,4BAAoBS,UAAU;MAChC,OAAO;AACLN,8BAAsBK,QAAAA;MACxB;IACF;KAEA,sBAAA,cAACE,QAAQL,MAAI;IACXC,MAAMT;IACNU,cAAc,CAACC,aAAAA;AACbV,yBAAmBU,QAAAA;AACnBR,0BAAoBS,UAAU;IAChC;KAEA,sBAAA,cAACL,QAAQO,SAAO;IAACC,SAAAA;KACf,sBAAA,cAACF,QAAQC,SAAO;IAACC,SAAAA;KACf,sBAAA,cAACC,QAAQC,QAAM;IAAC5B,YAAY;MAAC;MAAwBA;;IAAaJ;KAChE,sBAAA,cAACiC,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,oBAAA,CAAA,GAC7B,sBAAA,cAAC8B,MAAAA;IAAKC,MAAK;IAA2BC,MAAM;SAIlD,sBAAA,cAACf,QAAQgB,QAAM,MACb,sBAAA,cAAChB,QAAQiB,SAAO;IAACC,MAAK;KACnBnC,EAAE,oBAAA,GACH,sBAAA,cAACiB,QAAQmB,OAAK,IAAA,CAAA,CAAA,GAGlB,sBAAA,cAACb,QAAQU,QAAM,MACb,sBAAA,cAACV,QAAQW,SAAO;IACdC,MAAK;IACLE,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrB7B,2BAAmB,KAAA;AACnBE,4BAAoBS,UAAU;MAChC;IACF;KAGA,sBAAA,cAACmB,WAAAA;IACCC,MAAMC;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVxC,sBAAcwC,MAAAA;AACdlC,2BAAmB,KAAA;MACrB;IACF;IACAmC,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;IAChBC,OAAO/C;MAET,sBAAA,cAACqB,QAAQa,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM1B;AAKO,IAAMc,mBAAmB,CAAC,EAAEvD,UAAUC,cAAcC,OAAOC,eAAeqD,aAAY,MAAoB;AAC/G,QAAM,EAAEnD,EAAC,IAAKC,eAAe,IAAA;AAC7B,QAAM,CAACmD,IAAAA,IAAQC,cAAc,MAAM;IAAEC,KAAK;EAAM,CAAA;AAEhD,QAAM,CAACC,YAAYlD,aAAAA,IAAiBC,qBAA6B;IAC/DC,MAAMV;IACNW,UAAUV;IACVW,aAAab;EACf,CAAA;AAEA,QAAM,CAACc,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAEhE,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACW,QAAQL,MAAI;IAACC,MAAMT;IAAiBU,cAAcT;KACjD,sBAAA,cAACY,QAAQC,SAAO;IAACC,SAAAA;KACf,sBAAA,cAACE,QAAAA;IAAO6B,SAAQ;IAAQzD,YAAW;IAAuBJ;KACxD,sBAAA,cAACiC,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,oBAAA,CAAA,GAC7B,sBAAA,cAAC4B,QAAAA;IAAKC,WAAU;KAAe0B,UAAAA,GAC/B,sBAAA,cAACzB,MAAAA;IAAKC,MAAK;IAA0BC,MAAM;QAG/C,sBAAA,cAACT,QAAQW,SAAO;IACdC,MAAK;IACLsB,YAAYL,OAAO,IAAI;IACvBf,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrB7B,2BAAmB,KAAA;MACrB;IACF;KAEA,sBAAA,cAAC8B,WAAAA;IACCC,MAAMC;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVxC,sBAAcwC,MAAAA;AACdlC,2BAAmB,KAAA;MACrB;IACF;IACAmC,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;MAElB,sBAAA,cAACzB,QAAQa,OAAK,IAAA,CAAA,CAAA,GAGlB,sBAAA,cAACnB,QAAQC,MAAI,MACX,sBAAA,cAACD,QAAQO,SAAO;IAACC,SAAAA;KACf,sBAAA,cAACE,QAAAA;IAAO6B,SAAQ;IAAQE,SAASP;IAAcxD;KAC7C,sBAAA,cAACiC,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,aAAA,CAAA,GAC7B,sBAAA,cAAC8B,MAAAA;IAAKC,MAAK;IAAuCC,MAAM;QAG5D,sBAAA,cAACf,QAAQgB,QAAM,MACb,sBAAA,cAAChB,QAAQiB,SAAO;IAACC,MAAK;KACnBnC,EAAE,aAAA,GACH,sBAAA,cAACiB,QAAQmB,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM1B;;;ACvLA,SAASuB,wBAAAA,6BAA4B;AACrC,OAAOC,UAASC,UAAAA,SAAQC,YAAAA,iBAAgB;AAExC,SACEC,UAAAA,SAEAC,cACAC,QAAAA,OAEAC,WAAAA,UACAC,WAAAA,UACAC,kBAAAA,uBACK;AACP,SAASC,MAAMC,UAAU;AAEzB,IAAMC,aAAa,CAAC,EAAEC,IAAG,MAAmB;AAC1C,QAAMC,OAAO;AACb,SACE,gBAAAC,OAAA,cAACC,OAAAA;IAAIC,OAAOH;IAAMI,QAAQJ;IAAMK,SAAS,OAAOL,IAAAA,IAAQA,IAAAA;KACtD,gBAAAC,OAAA,cAACK,QAAAA;IAAKC,GAAG;IAAGC,GAAG;IAAGL,OAAOH;IAAMI,QAAQJ;IAAMS,MAAM,YAAYV,GAAAA;MAC/D,gBAAAE,OAAA,cAACS,QAAAA;IAAKH,GAAE;IAAKC,GAAE;IAAKG,YAAW;IAASC,UAAS;IAAKC,YAAW;IAAOJ,MAAM,YAAYV,GAAAA;KAAmB,GAAA,CAAA;AAKnH;AAaO,IAAMe,yBAAyB,CAAC,EACrCC,UACAhB,KACAiB,aACAC,YACAC,WAAU,MAC4C;AACtD,QAAM,EAAEC,EAAC,IAAKC,gBAAe,IAAA;AAE7B,QAAM,CAACC,UAAUC,WAAAA,IAAeC,sBAA6B;IAC3DC,MAAMzB;IACN0B,UAAUT;IACVU,aAAaR;EACf,CAAA;AAEA,QAAM,CAACS,eAAeC,gBAAAA,IAAoBC,UAAkB,KAAA;AAE5D,QAAMC,sBAAsBC,QAAgB,KAAA;AAC5C,QAAM,CAACC,oBAAoBC,qBAAAA,IAAyBJ,UAAS,KAAA;AAE7D,SACE,gBAAA5B,OAAA,cAACiC,SAAQC,MAAI;IACXC,MAAMJ;IACNK,cAAc,CAACC,aAAAA;AACb,UAAIR,oBAAoBS,SAAS;AAC/BN,8BAAsB,KAAA;AACtBH,4BAAoBS,UAAU;MAChC,OAAO;AACLN,8BAAsBK,QAAAA;MACxB;IACF;KAEA,gBAAArC,OAAA,cAACuC,aAAaL,MAAI;IAChBM,OAAO;IACPL,MAAMT;IACNU,cAAc,CAACC,aAAAA;AACbV,uBAAiBU,QAAAA;AACjBR,0BAAoBS,UAAU;IAChC;KAEA,gBAAAtC,OAAA,cAACiC,SAAQQ,SAAO;IAACC,SAAAA;KACf,gBAAA1C,OAAA,cAACuC,aAAaE,SAAO;IAACC,SAAAA;KACpB,gBAAA1C,OAAA,cAAC2C,SAAQC,QAAM;IAAC5B,YAAY6B,GAAG,eAAe7B,UAAAA;IAAaF;KACzD,gBAAAd,OAAA,cAAC8C,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,kBAAA,CAAA,GAC7B,gBAAAlB,OAAA,cAACgD,OAAAA;IAAKC,MAAK;IAAuBlD,MAAM;SAI9C,gBAAAC,OAAA,cAACiC,SAAQiB,QAAM,MACb,gBAAAlD,OAAA,cAACiC,SAAQkB,SAAO;IAACC,MAAK;KACnBlC,EAAE,kBAAA,GACH,gBAAAlB,OAAA,cAACiC,SAAQoB,OAAK,IAAA,CAAA,CAAA,GAGlB,gBAAArD,OAAA,cAACuC,aAAaW,QAAM,MAClB,gBAAAlD,OAAA,cAACuC,aAAaY,SAAO;IAACC,MAAK;IAASpC,YAAW;KAC7C,gBAAAhB,OAAA,cAACuC,aAAae,UAAQ;IAACtC,YAAW;KAC/BuC,KAAKC,IAAI,CAAC1D,SAAAA;AACT,WACE,gBAAAE,OAAA,cAACuC,aAAakB,cAAY;MACxBC,KAAK5D;MACL6D,SAAS7D,SAAQsB;MACjBwC,iBAAiB,MAAMvC,YAAYvB,IAAAA;MACnCkB,YAAY;OAEZ,gBAAAhB,OAAA,cAACH,YAAAA;MAAWC,KAAKA;;EAGvB,CAAA,CAAA,GAEF,gBAAAE,OAAA,cAACuC,aAAac,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM/B;AAKO,IAAMQ,iBAAiB,CAAC,EAAE/C,UAAUhB,KAAKiB,aAAaE,YAAY6C,aAAY,MAAkB;AACrG,QAAM,EAAE5C,EAAC,IAAKC,gBAAe,IAAA;AAE7B,QAAM,CAACC,UAAUC,WAAAA,IAAeC,sBAA6B;IAC3DC,MAAMzB;IACN0B,UAAUT;IACVU,aAAaR;EACf,CAAA;AAEA,SACE,gBAAAjB,OAAA,cAAAA,OAAA,UAAA,MACE,gBAAAA,OAAA,cAACuC,aAAaL,MAAI;IAACM,OAAO;KACxB,gBAAAxC,OAAA,cAACuC,aAAaE,SAAO;IAACC,SAAAA;KACpB,gBAAA1C,OAAA,cAAC4C,SAAAA;IAAOmB,SAAQ;IAAQ/C,YAAW;IAAcF;KAC/C,gBAAAd,OAAA,cAAC8C,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,kBAAA,CAAA,GAC7B,gBAAAlB,OAAA,cAACgE,OAAAA;IAAIC,MAAK;IAAOlB,WAAU;KACxBjD,MACC,gBAAAE,OAAA,cAAAA,OAAA,UAAA,MACE,gBAAAA,OAAA,cAACH,YAAAA;IAAWC,KAAKsB;MACjB,gBAAApB,OAAA,cAAC8C,QAAAA,MAAM5B,EAAE,GAAGE,QAAAA,QAAgB,CAAA,CAAA,IAG9B,gBAAApB,OAAA,cAAC8C,QAAAA,MAAM5B,EAAE,oBAAA,CAAA,CAAA,GAGb,gBAAAlB,OAAA,cAACgD,OAAAA;IAAKC,MAAK;IAA0BlD,MAAM;QAG/C,gBAAAC,OAAA,cAACuC,aAAaW,QAAM,MAClB,gBAAAlD,OAAA,cAACuC,aAAaY,SAAO;IAACC,MAAK;KACzB,gBAAApD,OAAA,cAACuC,aAAae,UAAQ,MACnBC,KAAKC,IAAI,CAAC1D,SAAAA;AACT,WACE,gBAAAE,OAAA,cAACuC,aAAakB,cAAY;MACxBC,KAAK5D;MACL6D,SAAS7D,SAAQsB;MACjBwC,iBAAiB,MAAMvC,YAAYvB,IAAAA;OAEnC,gBAAAE,OAAA,cAACH,YAAAA;MAAWC,KAAKA;QACjB,gBAAAE,OAAA,cAAC8C,QAAAA;MAAKC,WAAU;OAAQ7B,EAAE,GAAGpB,IAAAA,QAAW,CAAA,GACxC,gBAAAE,OAAA,cAACuC,aAAa2B,eAAa,MACzB,gBAAAlE,OAAA,cAACgD,OAAAA;MAAKC,MAAK;MAAqBlD,MAAM;;EAI9C,CAAA,CAAA,GAEF,gBAAAC,OAAA,cAACuC,aAAac,OAAK,IAAA,CAAA,CAAA,CAAA,GAIzB,gBAAArD,OAAA,cAACiC,SAAQC,MAAI,MACX,gBAAAlC,OAAA,cAACiC,SAAQQ,SAAO;IAACC,SAAAA;KACf,gBAAA1C,OAAA,cAAC4C,SAAAA;IAAOmB,SAAQ;IAAQI,SAASL;IAAchD;KAC7C,gBAAAd,OAAA,cAAC8C,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,aAAA,CAAA,GAC7B,gBAAAlB,OAAA,cAACgD,OAAAA;IAAKC,MAAK;IAAuClD,MAAM;QAG5D,gBAAAC,OAAA,cAACiC,SAAQiB,QAAM,MACb,gBAAAlD,OAAA,cAACiC,SAAQkB,SAAO;IAACC,MAAK;KACnBlC,EAAE,aAAA,GACH,gBAAAlB,OAAA,cAACiC,SAAQoB,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM1B;",
|
|
6
|
+
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "EmojiPickerToolbarButton", "disabled", "defaultEmoji", "emoji", "onChangeEmoji", "classNames", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "Popover", "Trigger", "asChild", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "side", "Arrow", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "EmojiPickerBlock", "onClickClear", "isMd", "useMediaQuery", "ssr", "emojiValue", "variant", "sideOffset", "onClick", "useControllableState", "React", "useRef", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "useTranslation", "hues", "mx", "HuePreview", "hue", "size", "React", "svg", "width", "height", "viewBox", "rect", "x", "y", "fill", "text", "textAnchor", "fontSize", "fontWeight", "HuePickerToolbarButton", "disabled", "onChangeHue", "classNames", "defaultHue", "t", "useTranslation", "hueValue", "setHueValue", "useControllableState", "prop", "onChange", "defaultProp", "huePickerOpen", "setHuePickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "DropdownMenu", "modal", "Trigger", "asChild", "Toolbar", "Button", "mx", "span", "className", "Icon", "icon", "Portal", "Content", "side", "Arrow", "Viewport", "hues", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "HuePickerBlock", "onClickClear", "variant", "div", "role", "ItemIndicator", "onClick"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":19156,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytes":20630,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":611,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-pickers/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":21213},"packages/ui/react-ui-pickers/dist/lib/browser/index.mjs":{"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePickerBlock","HuePickerToolbarButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/browser/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytesInOutput":5170},"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytesInOutput":6083},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":11516},"packages/ui/react-ui-pickers/dist/lib/browser/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1017},"packages/ui/react-ui-pickers/dist/lib/browser/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":146}},"bytes":244}}}
|