@dxos/react-ui-pickers 0.8.2-main.5ca3450 → 0.8.2-main.600d381
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 +19 -39
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +19 -39
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +19 -39
- 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/EmojiPicker.d.ts.map +1 -1
- package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -1
- package/package.json +9 -9
- package/src/components/EmojiPicker/EmojiPicker.stories.tsx +1 -1
- package/src/components/EmojiPicker/EmojiPicker.tsx +48 -70
- package/src/components/HuePicker/HuePicker.stories.tsx +1 -1
- package/src/components/IconPicker/IconPicker.stories.tsx +1 -1
- package/src/components/PickerButton/PickerButton.tsx +38 -57
|
@@ -14,25 +14,17 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
14
14
|
});
|
|
15
15
|
const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
|
|
16
16
|
const suppressNextTooltip = useRef(false);
|
|
17
|
-
|
|
18
|
-
return /* @__PURE__ */ React.createElement(Tooltip.Root, {
|
|
19
|
-
open: triggerTooltipOpen,
|
|
20
|
-
onOpenChange: (nextOpen) => {
|
|
21
|
-
if (suppressNextTooltip.current) {
|
|
22
|
-
setTriggerTooltipOpen(false);
|
|
23
|
-
suppressNextTooltip.current = false;
|
|
24
|
-
} else {
|
|
25
|
-
setTriggerTooltipOpen(nextOpen);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}, /* @__PURE__ */ React.createElement(Popover.Root, {
|
|
17
|
+
return /* @__PURE__ */ React.createElement(Popover.Root, {
|
|
29
18
|
open: emojiPickerOpen,
|
|
30
19
|
onOpenChange: (nextOpen) => {
|
|
31
20
|
setEmojiPickerOpen(nextOpen);
|
|
32
21
|
suppressNextTooltip.current = true;
|
|
33
22
|
}
|
|
34
23
|
}, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
35
|
-
asChild: true
|
|
24
|
+
asChild: true,
|
|
25
|
+
content: t("select emoji label"),
|
|
26
|
+
side: "bottom",
|
|
27
|
+
suppressNextTooltip
|
|
36
28
|
}, /* @__PURE__ */ React.createElement(Popover.Trigger, {
|
|
37
29
|
asChild: true
|
|
38
30
|
}, /* @__PURE__ */ React.createElement(Toolbar.Button, {
|
|
@@ -46,9 +38,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
46
38
|
}, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
47
39
|
icon: "ph--user-circle--regular",
|
|
48
40
|
size: 5
|
|
49
|
-
})))), /* @__PURE__ */ React.createElement(
|
|
50
|
-
side: "bottom"
|
|
51
|
-
}, t("select emoji label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
41
|
+
})))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
52
42
|
side: "bottom",
|
|
53
43
|
onKeyDownCapture: (event) => {
|
|
54
44
|
if (event.key === "Escape") {
|
|
@@ -69,7 +59,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
69
59
|
maxFrequentRows: 0,
|
|
70
60
|
noCountryFlags: true,
|
|
71
61
|
theme: themeMode
|
|
72
|
-
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))))
|
|
62
|
+
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
|
|
73
63
|
};
|
|
74
64
|
var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
|
|
75
65
|
const { t } = useTranslation("os");
|
|
@@ -118,8 +108,10 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
118
108
|
autoFocus: true,
|
|
119
109
|
maxFrequentRows: 0,
|
|
120
110
|
noCountryFlags: true
|
|
121
|
-
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.
|
|
122
|
-
asChild: true
|
|
111
|
+
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
112
|
+
asChild: true,
|
|
113
|
+
content: t("clear label"),
|
|
114
|
+
side: "right"
|
|
123
115
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
124
116
|
variant: triggerVariant,
|
|
125
117
|
onClick: onClickClear,
|
|
@@ -129,9 +121,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
129
121
|
}, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
130
122
|
icon: "ph--arrow-counter-clockwise--regular",
|
|
131
123
|
size: 5
|
|
132
|
-
})))
|
|
133
|
-
side: "right"
|
|
134
|
-
}, t("clear label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))));
|
|
124
|
+
}))));
|
|
135
125
|
};
|
|
136
126
|
|
|
137
127
|
// packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx
|
|
@@ -154,19 +144,8 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
154
144
|
]);
|
|
155
145
|
const [open, setOpen] = useState2(false);
|
|
156
146
|
const suppressNextTooltip = useRef2(false);
|
|
157
|
-
const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
|
|
158
147
|
const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
|
|
159
|
-
return /* @__PURE__ */ React2.createElement(
|
|
160
|
-
open: triggerTooltipOpen,
|
|
161
|
-
onOpenChange: (nextOpen) => {
|
|
162
|
-
if (suppressNextTooltip.current) {
|
|
163
|
-
setTriggerTooltipOpen(false);
|
|
164
|
-
suppressNextTooltip.current = false;
|
|
165
|
-
} else {
|
|
166
|
-
setTriggerTooltipOpen(nextOpen);
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
|
|
148
|
+
return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
|
|
170
149
|
modal: false,
|
|
171
150
|
open,
|
|
172
151
|
onOpenChange: (nextOpen) => {
|
|
@@ -174,7 +153,10 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
174
153
|
suppressNextTooltip.current = true;
|
|
175
154
|
}
|
|
176
155
|
}, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
|
|
177
|
-
asChild: true
|
|
156
|
+
asChild: true,
|
|
157
|
+
content: label,
|
|
158
|
+
side: "bottom",
|
|
159
|
+
suppressNextTooltip
|
|
178
160
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
|
|
179
161
|
asChild: true
|
|
180
162
|
}, /* @__PURE__ */ React2.createElement(TriggerRoot, {
|
|
@@ -194,9 +176,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
194
176
|
}), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
195
177
|
icon: "ph--caret-down--bold",
|
|
196
178
|
size: 3
|
|
197
|
-
})))), /* @__PURE__ */ React2.createElement(
|
|
198
|
-
side: "bottom"
|
|
199
|
-
}, label, /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
179
|
+
})))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
200
180
|
side: "bottom",
|
|
201
181
|
classNames: "!is-min"
|
|
202
182
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
@@ -217,7 +197,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
217
197
|
}, /* @__PURE__ */ React2.createElement(Icon2, {
|
|
218
198
|
icon: "ph--x--regular",
|
|
219
199
|
size: iconSize
|
|
220
|
-
}))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))))
|
|
200
|
+
}))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
|
|
221
201
|
};
|
|
222
202
|
|
|
223
203
|
// packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/EmojiPicker.tsx", "../../../src/components/HuePicker/HuePicker.tsx", "../../../src/components/PickerButton/PickerButton.tsx", "../../../src/components/IconPicker/IconPicker.tsx"],
|
|
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 ButtonGroup,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\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 classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: 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 = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: 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 <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\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={triggerVariant} 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 </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg\n viewBox={`0 0 ${size} ${size}`}\n className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n >\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\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={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {label}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} iconSize={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\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,MACAC,mBACK;AAgBA,IAAMC,2BAA2B,CAAC,EACvCC,YACAC,OACAC,UACAC,cACAC,cAAa,MAC0B;AACvC,QAAM,EAAEC,EAAC,IAAKC,eAAe,IAAA;AAC7B,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,QAAM,CAACC,aAAaC,aAAAA,IAAiBC,qBAA6B;IAChEC,MAAMX;IACNY,UAAUT;IACVU,aAAaX;EACf,CAAA;AAEA,QAAM,CAACY,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAChE,QAAMC,sBAAsBC,OAAgB,KAAA;
|
|
6
|
-
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "ButtonGroup", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "
|
|
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 ButtonGroup,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\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 classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: 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\n return (\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger\n asChild\n content={t('select emoji label')}\n side='bottom'\n suppressNextTooltip={suppressNextTooltip}\n >\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 <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 );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: 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 <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\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.Trigger asChild content={t('clear label')} side='right'>\n <Button variant={triggerVariant} 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 </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg\n viewBox={`0 0 ${size} ${size}`}\n className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n >\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <DropdownMenu.Root\n modal={false}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild content={label} side='bottom' suppressNextTooltip={suppressNextTooltip}>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} iconSize={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\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,MACAC,mBACK;AAgBA,IAAMC,2BAA2B,CAAC,EACvCC,YACAC,OACAC,UACAC,cACAC,cAAa,MAC0B;AACvC,QAAM,EAAEC,EAAC,IAAKC,eAAe,IAAA;AAC7B,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,QAAM,CAACC,aAAaC,aAAAA,IAAiBC,qBAA6B;IAChEC,MAAMX;IACNY,UAAUT;IACVU,aAAaX;EACf,CAAA;AAEA,QAAM,CAACY,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAChE,QAAMC,sBAAsBC,OAAgB,KAAA;AAE5C,SACE,sBAAA,cAACC,QAAQC,MAAI;IACXC,MAAMP;IACNQ,cAAc,CAACC,aAAAA;AACbR,yBAAmBQ,QAAAA;AACnBN,0BAAoBO,UAAU;IAChC;KAEA,sBAAA,cAACC,QAAQC,SAAO;IACdC,SAAAA;IACAC,SAASxB,EAAE,oBAAA;IACXyB,MAAK;IACLZ;KAEA,sBAAA,cAACE,QAAQO,SAAO;IAACC,SAAAA;KACf,sBAAA,cAACG,QAAQC,QAAM;IAAChC,YAAY;MAAC;MAAwBA;;IAAaE;KAChE,sBAAA,cAAC+B,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,oBAAA,CAAA,GAC7B,sBAAA,cAAC8B,MAAAA;IAAKC,MAAK;IAA2BC,MAAM;SAIlD,sBAAA,cAACjB,QAAQkB,QAAM,MACb,sBAAA,cAAClB,QAAQmB,SAAO;IACdT,MAAK;IACLU,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrB3B,2BAAmB,KAAA;AACnBE,4BAAoBO,UAAU;MAChC;IACF;KAGA,sBAAA,cAACmB,WAAAA;IACCC,MAAMC;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVtC,sBAAcsC,MAAAA;AACdhC,2BAAmB,KAAA;MACrB;IACF;IACAiC,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;IAChBC,OAAO7C;MAET,sBAAA,cAACa,QAAQiC,OAAK,IAAA,CAAA,CAAA,CAAA;AAKxB;AAKO,IAAMC,mBAAmB,CAAC,EAC/BpD,UACAC,cACAF,OACAG,eACAmD,cACAC,iBAAiB,SACjBxD,WAAU,MACO;AACjB,QAAM,EAAEK,EAAC,IAAKC,eAAe,IAAA;AAC7B,QAAM,CAACmD,IAAAA,IAAQC,cAAc,MAAM;IAAEC,KAAK;EAAM,CAAA;AAEhD,QAAM,CAACC,YAAYlD,aAAAA,IAAiBC,qBAA6B;IAC/DC,MAAMX;IACNY,UAAUT;IACVU,aAAaX;EACf,CAAA;AAEA,QAAM,CAACY,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAEhE,SACE,sBAAA,cAAC4C,aAAAA;IAAY7D;KACX,sBAAA,cAACoB,QAAQC,MAAI;IAACC,MAAMP;IAAiBQ,cAAcP;KACjD,sBAAA,cAACI,QAAQO,SAAO;IAACC,SAAAA;KACf,sBAAA,cAACI,QAAAA;IAAO8B,SAASN;IAAgBxD,YAAW;IAA4BE;KACtE,sBAAA,cAAC+B,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,oBAAA,CAAA,GAC7B,sBAAA,cAAC4B,QAAAA,MAAM2B,UAAAA,GACP,sBAAA,cAACzB,MAAAA;IAAKC,MAAK;IAAuBC,MAAM;QAG5C,sBAAA,cAACjB,QAAQmB,SAAO;IACdT,MAAK;IACLiC,YAAYN,OAAO,IAAI;IACvBjB,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrB3B,2BAAmB,KAAA;MACrB;IACF;KAEA,sBAAA,cAAC4B,WAAAA;IACCC,MAAMC;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVtC,sBAAcsC,MAAAA;AACdhC,2BAAmB,KAAA;MACrB;IACF;IACAiC,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;MAElB,sBAAA,cAAC/B,QAAQiC,OAAK,IAAA,CAAA,CAAA,GAGlB,sBAAA,cAAC3B,QAAQC,SAAO;IAACC,SAAAA;IAAQC,SAASxB,EAAE,aAAA;IAAgByB,MAAK;KACvD,sBAAA,cAACE,QAAAA;IAAO8B,SAASN;IAAgBQ,SAAST;IAAcrD;KACtD,sBAAA,cAAC+B,QAAAA;IAAKC,WAAU;KAAW7B,EAAE,aAAA,CAAA,GAC7B,sBAAA,cAAC8B,MAAAA;IAAKC,MAAK;IAAuCC,MAAM;;AAKlE;;;AC3KA,OAAO4B,YAAW;AAElB,SAAiDC,kBAAAA,uBAAsB;AACvE,SAASC,YAAY;;;ACHrB,SAASC,wBAAAA,6BAA4B;AACrC,OAAOC,UAAkBC,WAAWC,UAAAA,SAAQC,YAAAA,iBAAgB;AAE5D,SAASC,UAAAA,SAAQC,cAAcC,QAAAA,OAA4CC,WAAAA,UAASC,WAAAA,gBAAe;AAgB5F,IAAMC,eAAe,CAAC,EAC3BC,WACAC,UACAC,YACAC,cAAcC,eACdC,OAAOC,QACPC,QACAC,OACAC,MACAC,UACAC,SACAC,cAAc,UACdC,WAAW,EAAC,MACM;AAClB,QAAM,CAACR,OAAOS,QAAAA,IAAYC,sBAA6B;IACrDC,MAAMV;IACNW,aAAab;IACbM;EACF,CAAA;AAEAQ,YAAU,MAAMJ,SAASR,MAAAA,GAAS;IAACA;GAAO;AAE1C,QAAM,CAACa,MAAMC,OAAAA,IAAWC,UAAkB,KAAA;AAE1C,QAAMC,sBAAsBC,QAAgB,KAAA;AAE5C,QAAMC,cAAcZ,gBAAgB,mBAAmBa,SAAQC,SAASA;AAExE,SACE,gBAAAC,OAAA,cAACC,aAAaC,MAAI;IAChBC,OAAO;IACPX;IACAY,cAAc,CAACC,aAAAA;AACbZ,cAAQY,QAAAA;AACRV,0BAAoBW,UAAU;IAChC;KAEA,gBAAAN,OAAA,cAACO,SAAQC,SAAO;IAACC,SAAAA;IAAQC,SAAS7B;IAAO8B,MAAK;IAAShB;KACrD,gBAAAK,OAAA,cAACC,aAAaO,SAAO;IAACC,SAAAA;KACpB,gBAAAT,OAAA,cAACH,aAAAA;IAAYtB,YAAY;MAAC;MAAeA;;IAAaD;KACpD,gBAAA0B,OAAA,cAACY,QAAAA;IAAKC,WAAU;KAAWhC,KAAAA,GACzBH,SAAS,gBAAAsB,OAAA,cAAC3B,WAAAA;IAAUK;IAAcQ;QAA2B,gBAAAc,OAAA,cAACc,OAAAA;IAAKhC;IAAYiC,MAAM7B;MACvF,gBAAAc,OAAA,cAACc,OAAAA;IAAKhC,MAAK;IAAuBiC,MAAM;SAI9C,gBAAAf,OAAA,cAACC,aAAae,QAAM,MAClB,gBAAAhB,OAAA,cAACC,aAAagB,SAAO;IAACN,MAAK;IAASpC,YAAW;KAC7C,gBAAAyB,OAAA,cAACC,aAAaiB,UAAQ;IAAC3C,YAAW;KAC/BK,OAAOuC,IAAI,CAACxC,YAAAA;AACX,WACE,gBAAAqB,OAAA,cAACC,aAAamB,cAAY;MACxBC,KAAK1C;MACL2C,SAAS3C,YAAWD;MACpB6C,iBAAiB,MAAMpC,SAASR,OAAAA;MAChCJ,YAAY;OAEZ,gBAAAyB,OAAA,cAAC3B,WAAAA;MAAUK,OAAOC;MAAQO;;EAGhC,CAAA,GACCF,WACC,gBAAAgB,OAAA,cAACC,aAAamB,cAAY;IACxBG,iBAAiB,MAAMvC,QAAAA;IACvBT,YAAY;KAEZ,gBAAAyB,OAAA,cAACc,OAAAA;IAAKhC,MAAK;IAAiBiC,MAAM7B;QAIxC,gBAAAc,OAAA,cAACC,aAAauB,OAAK,IAAA,CAAA,CAAA,CAAA;AAK7B;;;AD/EO,IAAMC,YAAY,CAACC,UAAAA;AACxB,QAAM,EAAEC,EAAC,IAAKC,gBAAe,IAAA;AAE7B,SACE,gBAAAC,OAAA,cAACC,cAAAA;IACCC,WAAWC;IACXC,OAAON,EAAE,kBAAA;IACTO,MAAK;IACLC,QAAQC;IACP,GAAGV;;AAGV;AAEA,IAAMM,aAAa,CAAC,EAAEK,MAAK,MAAqB;AAC9C,QAAMC,OAAO;AACb,SACE,gBAAAT,OAAA,cAACU,OAAAA;IAAIC,WAAU;KACb,gBAAAX,OAAA,cAACY,OAAAA;IACCC,SAAS,OAAOJ,IAAAA,IAAQA,IAAAA;IACxBE,WAAU;KAEV,gBAAAX,OAAA,cAACc,QAAAA;IAAKC,GAAG;IAAGC,GAAG;IAAGC,OAAOR;IAAMS,QAAQT;IAAMU,MAAM,YAAYX,KAAAA;IAAcY,aAAa;;AAIlG;;;AEzCA,OAAOC,YAAW;AAElB,SAA2BC,QAAAA,OAA4CC,kBAAAA,uBAAsB;AAetF,IAAMC,aAAa,CAAC,EAAE,GAAGC,MAAAA,MAAyC;AACvE,QAAM,EAAEC,EAAC,IAAKC,gBAAe,IAAA;AAE7B,SACE,gBAAAC,OAAA,cAACC,cAAAA;IACCC,WAAWC;IACXC,OAAON,EAAE,mBAAA;IACTO,MAAK;IACLC,QAAQC;IACP,GAAGV;;AAGV;AAEA,IAAMM,cAAc,CAAC,EAAEK,OAAOC,WAAW,EAAC,MAAmD;AAC3F,SAAO,gBAAAT,OAAA,cAACU,OAAAA;IAAKL,MAAM,OAAOG,KAAAA;IAAkBG,MAAMF;;AACpD;AAMA,IAAMG,QAAQ;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF,IAAML,aAAaK,MAAMC,IAAI,CAACR,SAASA,KAAKS,MAAM,mBAAA,IAAuB,CAAA,KAAMT,IAAAA;",
|
|
6
|
+
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "ButtonGroup", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "Popover", "Root", "open", "onOpenChange", "nextOpen", "current", "Tooltip", "Trigger", "asChild", "content", "side", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "Arrow", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "ssr", "emojiValue", "ButtonGroup", "variant", "sideOffset", "onClick", "React", "useTranslation", "hues", "useControllableState", "React", "useEffect", "useRef", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "PickerButton", "Component", "disabled", "classNames", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "icon", "onChange", "onReset", "rootVariant", "iconSize", "setValue", "useControllableState", "prop", "defaultProp", "useEffect", "open", "setOpen", "useState", "suppressNextTooltip", "useRef", "TriggerRoot", "Toolbar", "Button", "React", "DropdownMenu", "Root", "modal", "onOpenChange", "nextOpen", "current", "Tooltip", "Trigger", "asChild", "content", "side", "span", "className", "Icon", "size", "Portal", "Content", "Viewport", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "Arrow", "HuePicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "className", "svg", "viewBox", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "React", "Icon", "useTranslation", "IconPicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "iconSize", "Icon", "size", "icons", "map", "match"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":17252,"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/EmojiPicker/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts":{"bytes":534,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytes":10790,"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}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytes":536,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx":{"bytes":4241,"imports":[{"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},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts":{"bytes":522,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx":{"bytes":7605,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytes":528,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":809,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts","kind":"import-statement","original":"./HuePicker"},{"path":"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts","kind":"import-statement","original":"./IconPicker"},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"./PickerButton"}],"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":20776},"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":"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},{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","PickerButton"],"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/EmojiPicker.tsx":{"bytesInOutput":4473},"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx":{"bytesInOutput":917},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":2808},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx":{"bytesInOutput":2016},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":10722},"packages/ui/react-ui-pickers/dist/lib/browser/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1029},"packages/ui/react-ui-pickers/dist/lib/browser/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":256}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -58,25 +58,17 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
58
58
|
});
|
|
59
59
|
const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react2.useState)(false);
|
|
60
60
|
const suppressNextTooltip = (0, import_react2.useRef)(false);
|
|
61
|
-
|
|
62
|
-
return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Root, {
|
|
63
|
-
open: triggerTooltipOpen,
|
|
64
|
-
onOpenChange: (nextOpen) => {
|
|
65
|
-
if (suppressNextTooltip.current) {
|
|
66
|
-
setTriggerTooltipOpen(false);
|
|
67
|
-
suppressNextTooltip.current = false;
|
|
68
|
-
} else {
|
|
69
|
-
setTriggerTooltipOpen(nextOpen);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
|
|
61
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
|
|
73
62
|
open: emojiPickerOpen,
|
|
74
63
|
onOpenChange: (nextOpen) => {
|
|
75
64
|
setEmojiPickerOpen(nextOpen);
|
|
76
65
|
suppressNextTooltip.current = true;
|
|
77
66
|
}
|
|
78
67
|
}, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
|
|
79
|
-
asChild: true
|
|
68
|
+
asChild: true,
|
|
69
|
+
content: t("select emoji label"),
|
|
70
|
+
side: "bottom",
|
|
71
|
+
suppressNextTooltip
|
|
80
72
|
}, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Trigger, {
|
|
81
73
|
asChild: true
|
|
82
74
|
}, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Toolbar.Button, {
|
|
@@ -90,9 +82,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
90
82
|
}, t("select emoji label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
|
|
91
83
|
icon: "ph--user-circle--regular",
|
|
92
84
|
size: 5
|
|
93
|
-
})))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.
|
|
94
|
-
side: "bottom"
|
|
95
|
-
}, t("select emoji label"), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Arrow, null))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Content, {
|
|
85
|
+
})))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Content, {
|
|
96
86
|
side: "bottom",
|
|
97
87
|
onKeyDownCapture: (event) => {
|
|
98
88
|
if (event.key === "Escape") {
|
|
@@ -113,7 +103,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
113
103
|
maxFrequentRows: 0,
|
|
114
104
|
noCountryFlags: true,
|
|
115
105
|
theme: themeMode
|
|
116
|
-
}), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))))
|
|
106
|
+
}), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))));
|
|
117
107
|
};
|
|
118
108
|
var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
|
|
119
109
|
const { t } = (0, import_react_ui.useTranslation)("os");
|
|
@@ -162,8 +152,10 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
162
152
|
autoFocus: true,
|
|
163
153
|
maxFrequentRows: 0,
|
|
164
154
|
noCountryFlags: true
|
|
165
|
-
}), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.
|
|
166
|
-
asChild: true
|
|
155
|
+
}), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
|
|
156
|
+
asChild: true,
|
|
157
|
+
content: t("clear label"),
|
|
158
|
+
side: "right"
|
|
167
159
|
}, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
|
|
168
160
|
variant: triggerVariant,
|
|
169
161
|
onClick: onClickClear,
|
|
@@ -173,9 +165,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
173
165
|
}, t("clear label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
|
|
174
166
|
icon: "ph--arrow-counter-clockwise--regular",
|
|
175
167
|
size: 5
|
|
176
|
-
})))
|
|
177
|
-
side: "right"
|
|
178
|
-
}, t("clear label"), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Arrow, null)))));
|
|
168
|
+
}))));
|
|
179
169
|
};
|
|
180
170
|
var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
|
|
181
171
|
const [value, setValue] = (0, import_react_use_controllable_state2.useControllableState)({
|
|
@@ -188,19 +178,8 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
188
178
|
]);
|
|
189
179
|
const [open, setOpen] = (0, import_react4.useState)(false);
|
|
190
180
|
const suppressNextTooltip = (0, import_react4.useRef)(false);
|
|
191
|
-
const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react4.useState)(false);
|
|
192
181
|
const TriggerRoot = rootVariant === "toolbar-button" ? import_react_ui3.Toolbar.Button : import_react_ui3.Button;
|
|
193
|
-
return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.
|
|
194
|
-
open: triggerTooltipOpen,
|
|
195
|
-
onOpenChange: (nextOpen) => {
|
|
196
|
-
if (suppressNextTooltip.current) {
|
|
197
|
-
setTriggerTooltipOpen(false);
|
|
198
|
-
suppressNextTooltip.current = false;
|
|
199
|
-
} else {
|
|
200
|
-
setTriggerTooltipOpen(nextOpen);
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
|
|
182
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
|
|
204
183
|
modal: false,
|
|
205
184
|
open,
|
|
206
185
|
onOpenChange: (nextOpen) => {
|
|
@@ -208,7 +187,10 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
208
187
|
suppressNextTooltip.current = true;
|
|
209
188
|
}
|
|
210
189
|
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Trigger, {
|
|
211
|
-
asChild: true
|
|
190
|
+
asChild: true,
|
|
191
|
+
content: label,
|
|
192
|
+
side: "bottom",
|
|
193
|
+
suppressNextTooltip
|
|
212
194
|
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
|
|
213
195
|
asChild: true
|
|
214
196
|
}, /* @__PURE__ */ import_react4.default.createElement(TriggerRoot, {
|
|
@@ -228,9 +210,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
228
210
|
}), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
|
|
229
211
|
icon: "ph--caret-down--bold",
|
|
230
212
|
size: 3
|
|
231
|
-
})))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.
|
|
232
|
-
side: "bottom"
|
|
233
|
-
}, label, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Arrow, null))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Content, {
|
|
213
|
+
})))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Content, {
|
|
234
214
|
side: "bottom",
|
|
235
215
|
classNames: "!is-min"
|
|
236
216
|
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Viewport, {
|
|
@@ -251,7 +231,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
251
231
|
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
|
|
252
232
|
icon: "ph--x--regular",
|
|
253
233
|
size: iconSize
|
|
254
|
-
}))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))))
|
|
234
|
+
}))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
|
|
255
235
|
};
|
|
256
236
|
var HuePicker = (props) => {
|
|
257
237
|
const { t } = (0, import_react_ui2.useTranslation)("os");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/EmojiPicker.tsx", "../../../src/components/HuePicker/HuePicker.tsx", "../../../src/components/PickerButton/PickerButton.tsx", "../../../src/components/IconPicker/IconPicker.tsx"],
|
|
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 ButtonGroup,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\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 classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: 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 = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: 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 <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\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={triggerVariant} 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 </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg\n viewBox={`0 0 ${size} ${size}`}\n className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n >\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\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={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {label}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} iconSize={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,kBAAsB;AACtB,mBAAsB;AACtB,0CAAqC;AACrC,IAAAA,gBAAwC;AAExC,sBAYO;ACjBP,IAAAA,gBAAkB;AAElB,IAAAC,mBAAuE;AACvE,4BAAqB;ACHrB,IAAAC,uCAAqC;AACrC,IAAAF,gBAA4D;AAE5D,IAAAC,mBAAmG;ACHnG,IAAAD,gBAAkB;AAElB,IAAAC,mBAA6F;AH+BtF,IAAME,2BAA2B,CAAC,EACvCC,YACAC,OACAC,UACAC,cACAC,cAAa,MAC0B;AACvC,QAAM,EAAEC,EAAC,QAAKC,gCAAe,IAAA;AAC7B,QAAM,EAAEC,UAAS,QAAKC,iCAAAA;AAEtB,QAAM,CAACC,aAAaC,aAAAA,QAAiBC,0DAA6B;IAChEC,MAAMX;IACNY,UAAUT;IACVU,aAAaX;EACf,CAAA;AAEA,QAAM,CAACY,iBAAiBC,kBAAAA,QAAsBC,wBAAkB,KAAA;AAChE,QAAMC,0BAAsBC,sBAAgB,KAAA;
|
|
6
|
-
"names": ["import_react", "import_react_ui", "import_react_use_controllable_state", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "
|
|
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 ButtonGroup,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\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 classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: 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\n return (\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger\n asChild\n content={t('select emoji label')}\n side='bottom'\n suppressNextTooltip={suppressNextTooltip}\n >\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 <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 );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: 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 <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\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.Trigger asChild content={t('clear label')} side='right'>\n <Button variant={triggerVariant} 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 </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg\n viewBox={`0 0 ${size} ${size}`}\n className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n >\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <DropdownMenu.Root\n modal={false}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild content={label} side='bottom' suppressNextTooltip={suppressNextTooltip}>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} iconSize={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_react", "import_react_ui", "import_react_use_controllable_state", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "React", "Popover", "Root", "open", "onOpenChange", "nextOpen", "current", "Tooltip", "Trigger", "asChild", "content", "side", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "Arrow", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "ssr", "emojiValue", "ButtonGroup", "variant", "sideOffset", "onClick", "PickerButton", "Component", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "onReset", "rootVariant", "iconSize", "setValue", "useEffect", "setOpen", "TriggerRoot", "DropdownMenu", "modal", "Viewport", "map", "CheckboxItem", "checked", "onCheckedChange", "HuePicker", "props", "HuePreview", "hues", "div", "svg", "viewBox", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "IconPicker", "IconPreview", "iconValues", "icons", "match"]
|
|
7
7
|
}
|