@dxos/react-ui-pickers 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0
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/HuePicker/HuePicker.d.ts.map +1 -1
- package/dist/types/src/components/IconPicker/IconPicker.d.ts.map +1 -1
- package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +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
package/dist/lib/node/meta.json
CHANGED
|
@@ -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/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":20776},"packages/ui/react-ui-pickers/dist/lib/node/index.cjs":{"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/node/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/node/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1029},"packages/ui/react-ui-pickers/dist/lib/node/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":256}}}
|
|
@@ -16,25 +16,17 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
16
16
|
});
|
|
17
17
|
const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
|
|
18
18
|
const suppressNextTooltip = useRef(false);
|
|
19
|
-
|
|
20
|
-
return /* @__PURE__ */ React.createElement(Tooltip.Root, {
|
|
21
|
-
open: triggerTooltipOpen,
|
|
22
|
-
onOpenChange: (nextOpen) => {
|
|
23
|
-
if (suppressNextTooltip.current) {
|
|
24
|
-
setTriggerTooltipOpen(false);
|
|
25
|
-
suppressNextTooltip.current = false;
|
|
26
|
-
} else {
|
|
27
|
-
setTriggerTooltipOpen(nextOpen);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}, /* @__PURE__ */ React.createElement(Popover.Root, {
|
|
19
|
+
return /* @__PURE__ */ React.createElement(Popover.Root, {
|
|
31
20
|
open: emojiPickerOpen,
|
|
32
21
|
onOpenChange: (nextOpen) => {
|
|
33
22
|
setEmojiPickerOpen(nextOpen);
|
|
34
23
|
suppressNextTooltip.current = true;
|
|
35
24
|
}
|
|
36
25
|
}, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
37
|
-
asChild: true
|
|
26
|
+
asChild: true,
|
|
27
|
+
content: t("select emoji label"),
|
|
28
|
+
side: "bottom",
|
|
29
|
+
suppressNextTooltip
|
|
38
30
|
}, /* @__PURE__ */ React.createElement(Popover.Trigger, {
|
|
39
31
|
asChild: true
|
|
40
32
|
}, /* @__PURE__ */ React.createElement(Toolbar.Button, {
|
|
@@ -48,9 +40,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
48
40
|
}, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
49
41
|
icon: "ph--user-circle--regular",
|
|
50
42
|
size: 5
|
|
51
|
-
})))), /* @__PURE__ */ React.createElement(
|
|
52
|
-
side: "bottom"
|
|
53
|
-
}, t("select emoji label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
43
|
+
})))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
54
44
|
side: "bottom",
|
|
55
45
|
onKeyDownCapture: (event) => {
|
|
56
46
|
if (event.key === "Escape") {
|
|
@@ -71,7 +61,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
71
61
|
maxFrequentRows: 0,
|
|
72
62
|
noCountryFlags: true,
|
|
73
63
|
theme: themeMode
|
|
74
|
-
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))))
|
|
64
|
+
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
|
|
75
65
|
};
|
|
76
66
|
var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
|
|
77
67
|
const { t } = useTranslation("os");
|
|
@@ -120,8 +110,10 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
120
110
|
autoFocus: true,
|
|
121
111
|
maxFrequentRows: 0,
|
|
122
112
|
noCountryFlags: true
|
|
123
|
-
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.
|
|
124
|
-
asChild: true
|
|
113
|
+
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
114
|
+
asChild: true,
|
|
115
|
+
content: t("clear label"),
|
|
116
|
+
side: "right"
|
|
125
117
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
126
118
|
variant: triggerVariant,
|
|
127
119
|
onClick: onClickClear,
|
|
@@ -131,9 +123,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
131
123
|
}, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
132
124
|
icon: "ph--arrow-counter-clockwise--regular",
|
|
133
125
|
size: 5
|
|
134
|
-
})))
|
|
135
|
-
side: "right"
|
|
136
|
-
}, t("clear label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))));
|
|
126
|
+
}))));
|
|
137
127
|
};
|
|
138
128
|
|
|
139
129
|
// packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx
|
|
@@ -156,19 +146,8 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
156
146
|
]);
|
|
157
147
|
const [open, setOpen] = useState2(false);
|
|
158
148
|
const suppressNextTooltip = useRef2(false);
|
|
159
|
-
const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
|
|
160
149
|
const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
|
|
161
|
-
return /* @__PURE__ */ React2.createElement(
|
|
162
|
-
open: triggerTooltipOpen,
|
|
163
|
-
onOpenChange: (nextOpen) => {
|
|
164
|
-
if (suppressNextTooltip.current) {
|
|
165
|
-
setTriggerTooltipOpen(false);
|
|
166
|
-
suppressNextTooltip.current = false;
|
|
167
|
-
} else {
|
|
168
|
-
setTriggerTooltipOpen(nextOpen);
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
|
|
150
|
+
return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
|
|
172
151
|
modal: false,
|
|
173
152
|
open,
|
|
174
153
|
onOpenChange: (nextOpen) => {
|
|
@@ -176,7 +155,10 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
176
155
|
suppressNextTooltip.current = true;
|
|
177
156
|
}
|
|
178
157
|
}, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
|
|
179
|
-
asChild: true
|
|
158
|
+
asChild: true,
|
|
159
|
+
content: label,
|
|
160
|
+
side: "bottom",
|
|
161
|
+
suppressNextTooltip
|
|
180
162
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
|
|
181
163
|
asChild: true
|
|
182
164
|
}, /* @__PURE__ */ React2.createElement(TriggerRoot, {
|
|
@@ -196,9 +178,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
196
178
|
}), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
197
179
|
icon: "ph--caret-down--bold",
|
|
198
180
|
size: 3
|
|
199
|
-
})))), /* @__PURE__ */ React2.createElement(
|
|
200
|
-
side: "bottom"
|
|
201
|
-
}, label, /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
181
|
+
})))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
202
182
|
side: "bottom",
|
|
203
183
|
classNames: "!is-min"
|
|
204
184
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
@@ -219,7 +199,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
219
199
|
}, /* @__PURE__ */ React2.createElement(Icon2, {
|
|
220
200
|
icon: "ph--x--regular",
|
|
221
201
|
size: iconSize
|
|
222
|
-
}))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))))
|
|
202
|
+
}))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
|
|
223
203
|
};
|
|
224
204
|
|
|
225
205
|
// 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": "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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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":20778},"packages/ui/react-ui-pickers/dist/lib/node-esm/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/node-esm/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":10815},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1029},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":256}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EAQrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACzC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB,
|
|
1
|
+
{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EAQrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACzC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB,GAAI,+DAMtC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,sBAgExC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,6FAQ9B,gBAAgB,sBAuDlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/HuePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGxF,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC,CAAC;AAE5G,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/HuePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGxF,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC,CAAC;AAE5G,eAAO,MAAM,SAAS,GAAI,OAAO,eAAe,CAAC,cAAc,CAAC,sBAY/D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/IconPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAwB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAE9G,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAC5F,CAAC;AAEF,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/IconPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAwB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAE9G,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAC5F,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,cAAc,eAAe,CAAC,eAAe,CAAC,sBAYxE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickerButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/PickerButton/PickerButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,eAAe,EAAoB,MAAM,gBAAgB,CAAC;AAEpH,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC9C,SAAS,EAAE,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC9B,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"PickerButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/PickerButton/PickerButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,eAAe,EAAoB,MAAM,gBAAgB,CAAC;AAEpH,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC9C,SAAS,EAAE,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC9B,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY,GAAI,iJAa1B,iBAAiB,sBA8DnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.8.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-pickers",
|
|
3
|
-
"version": "0.8.2-main.
|
|
3
|
+
"version": "0.8.2-main.fbd8ed0",
|
|
4
4
|
"description": "A collection of picker components.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"@emoji-mart/react": "^1.1.1",
|
|
28
28
|
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
29
29
|
"react-resize-detector": "^11.0.1",
|
|
30
|
-
"@dxos/
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/
|
|
30
|
+
"@dxos/util": "0.8.2-main.fbd8ed0",
|
|
31
|
+
"@dxos/log": "0.8.2-main.fbd8ed0",
|
|
32
|
+
"@dxos/react-ui-types": "0.8.2-main.fbd8ed0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/react": "~18.2.0",
|
|
@@ -37,15 +37,15 @@
|
|
|
37
37
|
"react": "~18.2.0",
|
|
38
38
|
"react-dom": "~18.2.0",
|
|
39
39
|
"vite": "5.4.7",
|
|
40
|
-
"@dxos/react-ui": "0.8.2-main.
|
|
41
|
-
"@dxos/react-ui-theme": "0.8.2-main.
|
|
42
|
-
"@dxos/storybook-utils": "0.8.2-main.
|
|
40
|
+
"@dxos/react-ui": "0.8.2-main.fbd8ed0",
|
|
41
|
+
"@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
|
|
42
|
+
"@dxos/storybook-utils": "0.8.2-main.fbd8ed0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "~18.2.0",
|
|
46
46
|
"react-dom": "~18.2.0",
|
|
47
|
-
"@dxos/react-ui": "0.8.2-main.
|
|
48
|
-
"@dxos/react-ui-theme": "0.8.2-main.
|
|
47
|
+
"@dxos/react-ui": "0.8.2-main.fbd8ed0",
|
|
48
|
+
"@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
|
|
49
49
|
},
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"access": "public"
|
|
@@ -53,7 +53,7 @@ export const Block: StoryObj<EmojiPickerProps> = {
|
|
|
53
53
|
|
|
54
54
|
const meta: Meta = {
|
|
55
55
|
title: 'ui/react-ui-pickers/EmojiPicker',
|
|
56
|
-
decorators: [withTheme, withLayout(
|
|
56
|
+
decorators: [withTheme, withLayout()],
|
|
57
57
|
parameters: {
|
|
58
58
|
layout: 'centered',
|
|
59
59
|
},
|
|
@@ -53,71 +53,57 @@ export const EmojiPickerToolbarButton = ({
|
|
|
53
53
|
|
|
54
54
|
const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);
|
|
55
55
|
const suppressNextTooltip = useRef<boolean>(false);
|
|
56
|
-
const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
|
|
57
56
|
|
|
58
57
|
return (
|
|
59
|
-
<
|
|
60
|
-
open={
|
|
58
|
+
<Popover.Root
|
|
59
|
+
open={emojiPickerOpen}
|
|
61
60
|
onOpenChange={(nextOpen) => {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
suppressNextTooltip.current = false;
|
|
65
|
-
} else {
|
|
66
|
-
setTriggerTooltipOpen(nextOpen);
|
|
67
|
-
}
|
|
61
|
+
setEmojiPickerOpen(nextOpen);
|
|
62
|
+
suppressNextTooltip.current = true;
|
|
68
63
|
}}
|
|
69
64
|
>
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}}
|
|
65
|
+
<Tooltip.Trigger
|
|
66
|
+
asChild
|
|
67
|
+
content={t('select emoji label')}
|
|
68
|
+
side='bottom'
|
|
69
|
+
suppressNextTooltip={suppressNextTooltip}
|
|
76
70
|
>
|
|
77
|
-
<
|
|
78
|
-
<
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
71
|
+
<Popover.Trigger asChild>
|
|
72
|
+
<Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>
|
|
73
|
+
<span className='sr-only'>{t('select emoji label')}</span>
|
|
74
|
+
<Icon icon='ph--user-circle--regular' size={5} />
|
|
75
|
+
</Toolbar.Button>
|
|
76
|
+
</Popover.Trigger>
|
|
77
|
+
</Tooltip.Trigger>
|
|
78
|
+
<Popover.Portal>
|
|
79
|
+
<Popover.Content
|
|
80
|
+
side='bottom'
|
|
81
|
+
onKeyDownCapture={(event) => {
|
|
82
|
+
if (event.key === 'Escape') {
|
|
83
|
+
event.stopPropagation();
|
|
84
|
+
setEmojiPickerOpen(false);
|
|
85
|
+
suppressNextTooltip.current = true;
|
|
86
|
+
}
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
89
|
+
{/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}
|
|
90
|
+
<EmojiMart
|
|
91
|
+
data={emojiData}
|
|
92
|
+
onEmojiSelect={({ native }: { native?: string }) => {
|
|
93
|
+
if (native) {
|
|
94
|
+
setEmojiValue(native);
|
|
97
95
|
setEmojiPickerOpen(false);
|
|
98
|
-
suppressNextTooltip.current = true;
|
|
99
96
|
}
|
|
100
97
|
}}
|
|
101
|
-
|
|
102
|
-
{
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}}
|
|
111
|
-
autoFocus={true}
|
|
112
|
-
maxFrequentRows={0}
|
|
113
|
-
noCountryFlags={true}
|
|
114
|
-
theme={themeMode}
|
|
115
|
-
/>
|
|
116
|
-
<Popover.Arrow />
|
|
117
|
-
</Popover.Content>
|
|
118
|
-
</Popover.Portal>
|
|
119
|
-
</Popover.Root>
|
|
120
|
-
</Tooltip.Root>
|
|
98
|
+
autoFocus={true}
|
|
99
|
+
maxFrequentRows={0}
|
|
100
|
+
noCountryFlags={true}
|
|
101
|
+
theme={themeMode}
|
|
102
|
+
/>
|
|
103
|
+
<Popover.Arrow />
|
|
104
|
+
</Popover.Content>
|
|
105
|
+
</Popover.Portal>
|
|
106
|
+
</Popover.Root>
|
|
121
107
|
);
|
|
122
108
|
};
|
|
123
109
|
|
|
@@ -179,20 +165,12 @@ export const EmojiPickerBlock = ({
|
|
|
179
165
|
<Popover.Arrow />
|
|
180
166
|
</Popover.Content>
|
|
181
167
|
</Popover.Root>
|
|
182
|
-
<Tooltip.
|
|
183
|
-
<
|
|
184
|
-
<
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
</Tooltip.Trigger>
|
|
189
|
-
<Tooltip.Portal>
|
|
190
|
-
<Tooltip.Content side='right'>
|
|
191
|
-
{t('clear label')}
|
|
192
|
-
<Tooltip.Arrow />
|
|
193
|
-
</Tooltip.Content>
|
|
194
|
-
</Tooltip.Portal>
|
|
195
|
-
</Tooltip.Root>
|
|
168
|
+
<Tooltip.Trigger asChild content={t('clear label')} side='right'>
|
|
169
|
+
<Button variant={triggerVariant} onClick={onClickClear} disabled={disabled}>
|
|
170
|
+
<span className='sr-only'>{t('clear label')}</span>
|
|
171
|
+
<Icon icon='ph--arrow-counter-clockwise--regular' size={5} />
|
|
172
|
+
</Button>
|
|
173
|
+
</Tooltip.Trigger>
|
|
196
174
|
</ButtonGroup>
|
|
197
175
|
);
|
|
198
176
|
};
|
|
@@ -30,7 +30,7 @@ const ToolbarStory = (props: HuePickerProps) => {
|
|
|
30
30
|
|
|
31
31
|
const meta: Meta = {
|
|
32
32
|
title: 'ui/react-ui-pickers/HuePicker',
|
|
33
|
-
decorators: [withTheme, withLayout(
|
|
33
|
+
decorators: [withTheme, withLayout()],
|
|
34
34
|
parameters: {
|
|
35
35
|
layout: 'centered',
|
|
36
36
|
},
|
|
@@ -25,7 +25,7 @@ const ToolbarStory = (props: IconPickerProps) => {
|
|
|
25
25
|
|
|
26
26
|
const meta: Meta = {
|
|
27
27
|
title: 'ui/react-ui-pickers/IconPicker',
|
|
28
|
-
decorators: [withTheme, withLayout(
|
|
28
|
+
decorators: [withTheme, withLayout()],
|
|
29
29
|
parameters: {
|
|
30
30
|
layout: 'centered',
|
|
31
31
|
},
|