@dxos/react-ui-pickers 0.7.5-labs.8a82073 → 0.7.5-labs.c0e040f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +42 -29
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +96 -83
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +42 -29
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/EmojiPicker.d.ts.map +1 -1
- package/dist/types/src/components/HuePicker.d.ts.map +1 -1
- package/package.json +8 -10
- package/src/components/EmojiPicker.tsx +4 -5
- package/src/components/HuePicker.tsx +41 -34
|
@@ -3,11 +3,9 @@ import { createRequire } from 'node:module';const require = createRequire(import
|
|
|
3
3
|
// packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx
|
|
4
4
|
import emojiData from "@emoji-mart/data";
|
|
5
5
|
import EmojiMart from "@emoji-mart/react";
|
|
6
|
-
import { ArrowCounterClockwise, CaretDown, UserCircle } from "@phosphor-icons/react";
|
|
7
6
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
8
7
|
import React, { useRef, useState } from "react";
|
|
9
|
-
import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
|
|
10
|
-
import { getSize } from "@dxos/react-ui-theme";
|
|
8
|
+
import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation, Icon } from "@dxos/react-ui";
|
|
11
9
|
var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames }) => {
|
|
12
10
|
const { t } = useTranslation("os");
|
|
13
11
|
const { themeMode } = useThemeContext();
|
|
@@ -47,8 +45,9 @@ var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji,
|
|
|
47
45
|
disabled
|
|
48
46
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
49
47
|
className: "sr-only"
|
|
50
|
-
}, t("select emoji label")), /* @__PURE__ */ React.createElement(
|
|
51
|
-
|
|
48
|
+
}, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
49
|
+
icon: "ph--user-circle--regular",
|
|
50
|
+
size: 5
|
|
52
51
|
})))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
53
52
|
side: "bottom"
|
|
54
53
|
}, t("select emoji label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
@@ -98,8 +97,9 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
98
97
|
className: "sr-only"
|
|
99
98
|
}, t("select emoji label")), /* @__PURE__ */ React.createElement("span", {
|
|
100
99
|
className: "grow pis-14"
|
|
101
|
-
}, emojiValue), /* @__PURE__ */ React.createElement(
|
|
102
|
-
|
|
100
|
+
}, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
|
|
101
|
+
icon: "ph--caret-down--regular",
|
|
102
|
+
size: 4
|
|
103
103
|
}))), /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
104
104
|
side: "right",
|
|
105
105
|
sideOffset: isMd ? 0 : -310,
|
|
@@ -128,19 +128,20 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
128
128
|
disabled
|
|
129
129
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
130
130
|
className: "sr-only"
|
|
131
|
-
}, t("clear label")), /* @__PURE__ */ React.createElement(
|
|
131
|
+
}, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
132
|
+
icon: "ph--arrow-counter-clockwise--regular",
|
|
133
|
+
size: 5
|
|
134
|
+
}))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
132
135
|
side: "right"
|
|
133
136
|
}, t("clear label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))));
|
|
134
137
|
};
|
|
135
138
|
|
|
136
139
|
// packages/ui/react-ui-pickers/src/components/HuePicker.tsx
|
|
137
|
-
import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check, Palette } from "@phosphor-icons/react";
|
|
138
140
|
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
139
141
|
import React2, { useRef as useRef2, useState as useState2 } from "react";
|
|
140
|
-
import { Button as Button2, DropdownMenu,
|
|
141
|
-
import {
|
|
142
|
+
import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip as Tooltip2, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
143
|
+
import { hues, mx } from "@dxos/react-ui-theme";
|
|
142
144
|
var HuePreview = ({ hue }) => {
|
|
143
|
-
const { tx } = useThemeContext2();
|
|
144
145
|
const size = 20;
|
|
145
146
|
return /* @__PURE__ */ React2.createElement("svg", {
|
|
146
147
|
width: size,
|
|
@@ -151,12 +152,16 @@ var HuePreview = ({ hue }) => {
|
|
|
151
152
|
y: 0,
|
|
152
153
|
width: size,
|
|
153
154
|
height: size,
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
fill: `var(--dx-${hue}Surface)`
|
|
156
|
+
}), /* @__PURE__ */ React2.createElement("text", {
|
|
157
|
+
x: "10",
|
|
158
|
+
y: "15",
|
|
159
|
+
textAnchor: "middle",
|
|
160
|
+
fontSize: "14",
|
|
161
|
+
fontWeight: "bold",
|
|
162
|
+
fill: `var(--dx-${hue}SurfaceText)`
|
|
163
|
+
}, "T"));
|
|
158
164
|
};
|
|
159
|
-
var hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
|
|
160
165
|
var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
|
|
161
166
|
const { t } = useTranslation2("os");
|
|
162
167
|
const [hueValue, setHueValue] = useControllableState2({
|
|
@@ -193,16 +198,17 @@ var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultH
|
|
|
193
198
|
disabled
|
|
194
199
|
}, /* @__PURE__ */ React2.createElement("span", {
|
|
195
200
|
className: "sr-only"
|
|
196
|
-
}, t("select hue label")), /* @__PURE__ */ React2.createElement(
|
|
197
|
-
|
|
201
|
+
}, t("select hue label")), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
202
|
+
icon: "ph--palette--regular",
|
|
203
|
+
size: 5
|
|
198
204
|
})))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
|
|
199
205
|
side: "bottom"
|
|
200
206
|
}, t("select hue label"), /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
201
207
|
side: "bottom",
|
|
202
208
|
classNames: "!w-40"
|
|
203
209
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
204
|
-
classNames: "grid grid-cols-
|
|
205
|
-
},
|
|
210
|
+
classNames: "grid grid-cols-6"
|
|
211
|
+
}, hues.map((hue2) => {
|
|
206
212
|
return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
207
213
|
key: hue2,
|
|
208
214
|
checked: hue2 === hueValue,
|
|
@@ -233,13 +239,14 @@ var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear })
|
|
|
233
239
|
}, t("select hue label")), /* @__PURE__ */ React2.createElement("div", {
|
|
234
240
|
role: "none",
|
|
235
241
|
className: "pis-14 grow flex items-center justify-center gap-2"
|
|
236
|
-
}, /* @__PURE__ */ React2.createElement(HuePreview, {
|
|
242
|
+
}, hue ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(HuePreview, {
|
|
237
243
|
hue: hueValue
|
|
238
|
-
}), /* @__PURE__ */ React2.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React2.createElement(
|
|
239
|
-
|
|
240
|
-
|
|
244
|
+
}), /* @__PURE__ */ React2.createElement("span", null, t(`${hueValue} label`))) : /* @__PURE__ */ React2.createElement("span", null, t("select a hue label"))), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
245
|
+
icon: "ph--caret-down--regular",
|
|
246
|
+
size: 4
|
|
247
|
+
}))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
241
248
|
side: "right"
|
|
242
|
-
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null,
|
|
249
|
+
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, hues.map((hue2) => {
|
|
243
250
|
return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
244
251
|
key: hue2,
|
|
245
252
|
checked: hue2 === hueValue,
|
|
@@ -248,8 +255,11 @@ var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear })
|
|
|
248
255
|
hue: hue2
|
|
249
256
|
}), /* @__PURE__ */ React2.createElement("span", {
|
|
250
257
|
className: "grow"
|
|
251
|
-
}, t(`${hue2} label`)), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React2.createElement(
|
|
252
|
-
|
|
258
|
+
}, t(`${hue2} label`)), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React2.createElement(Icon2, {
|
|
259
|
+
icon: "ph--check--regular",
|
|
260
|
+
size: 4
|
|
261
|
+
})));
|
|
262
|
+
})), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip2.Root, null, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
|
|
253
263
|
asChild: true
|
|
254
264
|
}, /* @__PURE__ */ React2.createElement(Button2, {
|
|
255
265
|
variant: "ghost",
|
|
@@ -257,7 +267,10 @@ var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear })
|
|
|
257
267
|
disabled
|
|
258
268
|
}, /* @__PURE__ */ React2.createElement("span", {
|
|
259
269
|
className: "sr-only"
|
|
260
|
-
}, t("clear label")), /* @__PURE__ */ React2.createElement(
|
|
270
|
+
}, t("clear label")), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
271
|
+
icon: "ph--arrow-counter-clockwise--regular",
|
|
272
|
+
size: 5
|
|
273
|
+
}))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
|
|
261
274
|
side: "right"
|
|
262
275
|
}, t("clear label"), /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null)))));
|
|
263
276
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { ArrowCounterClockwise, CaretDown, UserCircle } from '@phosphor-icons/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n} from '@dxos/react-ui';\nimport { getSize } from '@dxos/react-ui-theme';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n classNames,\n}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <UserCircle className={getSize(5)} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span className='grow pis-14'>{emojiValue}</span>\n <CaretDown className={getSize(4)} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <ArrowCounterClockwise />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n DropdownMenu,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useThemeContext,\n useTranslation,\n} from '@dxos/react-ui';\nimport { getSize, hueTokenThemes, mx } from '@dxos/react-ui-theme';\n\nconst HuePreview = ({ hue }: { hue: string }) => {\n const { tx } = useThemeContext();\n const size = 20;\n return (\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <rect x={0} y={0} width={size} height={size} className={tx('hue.fill', 'select--hue__preview', { hue })} />\n </svg>\n );\n};\n\nconst hueTokens = Object.keys(hueTokenThemes).slice(0, 16);\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultHue?: string;\n hue?: string;\n onChangeHue?: (nextHue: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const HuePickerToolbarButton = ({\n disabled,\n hue,\n onChangeHue,\n classNames,\n defaultHue,\n}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={huePickerOpen}\n onOpenChange={(nextOpen) => {\n setHuePickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <Palette className={getSize(5)} />\n </Toolbar.Button>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select hue label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!w-40'>\n <DropdownMenu.Viewport classNames='grid grid-cols-4'>\n {hueTokens.map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n classNames={'px-0 py-2 items-center justify-center'}\n >\n <HuePreview hue={hue} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking hue alongside a button for unsetting it.\n */\nexport const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n return (\n <>\n <DropdownMenu.Root modal={false}>\n <DropdownMenu.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>\n <HuePreview hue={hueValue!} />\n <span>{t(`${hueValue} label`)}</span>\n </div>\n <CaretDown className={getSize(4)} />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content side='right'>\n <DropdownMenu.Viewport>\n {Object.keys(hueTokenThemes).map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n >\n <HuePreview hue={hue} />\n <span className='grow'>{t(`${hue} label`)}</span>\n <DropdownMenu.ItemIndicator>\n <Check />\n </DropdownMenu.ItemIndicator>\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <ArrowCounterClockwise />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;AAIA,OAAOA,eAAe;AACtB,OAAOC,eAAe;AACtB,SAASC,
|
|
6
|
-
"names": ["emojiData", "EmojiMart", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n classNames,\n}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span className='grow pis-14'>{emojiValue}</span>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n DropdownMenu,\n Icon,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useTranslation,\n} from '@dxos/react-ui';\nimport { hues, mx } from '@dxos/react-ui-theme';\n\nconst HuePreview = ({ hue }: { hue: string }) => {\n const size = 20;\n return (\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${hue}Surface)`} />\n <text x='10' y='15' textAnchor='middle' fontSize='14' fontWeight='bold' fill={`var(--dx-${hue}SurfaceText)`}>\n T\n </text>\n </svg>\n );\n};\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultHue?: string;\n hue?: string;\n onChangeHue?: (nextHue: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const HuePickerToolbarButton = ({\n disabled,\n hue,\n onChangeHue,\n classNames,\n defaultHue,\n}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={huePickerOpen}\n onOpenChange={(nextOpen) => {\n setHuePickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <Icon icon='ph--palette--regular' size={5} />\n </Toolbar.Button>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select hue label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!w-40'>\n <DropdownMenu.Viewport classNames='grid grid-cols-6'>\n {hues.map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n classNames={'px-0 py-2 items-center justify-center'}\n >\n <HuePreview hue={hue} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking hue alongside a button for unsetting it.\n */\nexport const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n return (\n <>\n <DropdownMenu.Root modal={false}>\n <DropdownMenu.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>\n {hue ? (\n <>\n <HuePreview hue={hueValue!} />\n <span>{t(`${hueValue} label`)}</span>\n </>\n ) : (\n <span>{t('select a hue label')}</span>\n )}\n </div>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='right'>\n <DropdownMenu.Viewport>\n {hues.map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n >\n <HuePreview hue={hue} />\n <span className='grow'>{t(`${hue} label`)}</span>\n <DropdownMenu.ItemIndicator>\n <Icon icon='ph--check--regular' size={4} />\n </DropdownMenu.ItemIndicator>\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "EmojiPickerToolbarButton", "disabled", "defaultEmoji", "emoji", "onChangeEmoji", "classNames", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "Popover", "Trigger", "asChild", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "side", "Arrow", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "EmojiPickerBlock", "onClickClear", "isMd", "useMediaQuery", "ssr", "emojiValue", "variant", "sideOffset", "onClick", "useControllableState", "React", "useRef", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "useTranslation", "hues", "mx", "HuePreview", "hue", "size", "React", "svg", "width", "height", "viewBox", "rect", "x", "y", "fill", "text", "textAnchor", "fontSize", "fontWeight", "HuePickerToolbarButton", "disabled", "onChangeHue", "classNames", "defaultHue", "t", "useTranslation", "hueValue", "setHueValue", "useControllableState", "prop", "onChange", "defaultProp", "huePickerOpen", "setHuePickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "DropdownMenu", "modal", "Trigger", "asChild", "Toolbar", "Button", "mx", "span", "className", "Icon", "icon", "Portal", "Content", "side", "Arrow", "Viewport", "hues", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "HuePickerBlock", "onClickClear", "variant", "div", "role", "ItemIndicator", "onClick"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":19156,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytes":20630,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":611,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-pickers/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":21215},"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":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePickerBlock","HuePickerToolbarButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytesInOutput":5170},"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytesInOutput":6083},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":11609},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1017},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":146}},"bytes":244}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EAOrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,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;CACvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,kEAMlC,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,sBA8EzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,mEAAoE,gBAAgB,sBA+DhH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAGhB,KAAK,eAAe,EAIrB,MAAM,gBAAgB,CAAC;AAexB,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,4DAMhC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,sBAsEvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6DAA8D,cAAc,sBAmEtG,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-pickers",
|
|
3
|
-
"version": "0.7.5-labs.
|
|
3
|
+
"version": "0.7.5-labs.c0e040f",
|
|
4
4
|
"description": "A collection of picker components.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -25,26 +25,24 @@
|
|
|
25
25
|
"@emoji-mart/data": "^1.1.2",
|
|
26
26
|
"@emoji-mart/react": "^1.1.1",
|
|
27
27
|
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
28
|
-
"@dxos/
|
|
29
|
-
"@dxos/
|
|
28
|
+
"@dxos/util": "0.7.5-labs.c0e040f",
|
|
29
|
+
"@dxos/react-ui-types": "0.7.5-labs.c0e040f"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@phosphor-icons/react": "^2.1.5",
|
|
33
32
|
"@types/react": "~18.2.0",
|
|
34
33
|
"@types/react-dom": "~18.2.0",
|
|
35
34
|
"react": "~18.2.0",
|
|
36
35
|
"react-dom": "~18.2.0",
|
|
37
36
|
"vite": "5.4.7",
|
|
38
|
-
"@dxos/react-ui": "0.7.5-labs.
|
|
39
|
-
"@dxos/react-ui-theme": "0.7.5-labs.
|
|
40
|
-
"@dxos/storybook-utils": "0.7.5-labs.
|
|
37
|
+
"@dxos/react-ui": "0.7.5-labs.c0e040f",
|
|
38
|
+
"@dxos/react-ui-theme": "0.7.5-labs.c0e040f",
|
|
39
|
+
"@dxos/storybook-utils": "0.7.5-labs.c0e040f"
|
|
41
40
|
},
|
|
42
41
|
"peerDependencies": {
|
|
43
|
-
"@phosphor-icons/react": "^2.1.5",
|
|
44
42
|
"react": "~18.2.0",
|
|
45
43
|
"react-dom": "~18.2.0",
|
|
46
|
-
"@dxos/react-ui": "0.7.5-labs.
|
|
47
|
-
"@dxos/react-ui-theme": "0.7.5-labs.
|
|
44
|
+
"@dxos/react-ui": "0.7.5-labs.c0e040f",
|
|
45
|
+
"@dxos/react-ui-theme": "0.7.5-labs.c0e040f"
|
|
48
46
|
},
|
|
49
47
|
"publishConfig": {
|
|
50
48
|
"access": "public"
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
import emojiData from '@emoji-mart/data';
|
|
6
6
|
import EmojiMart from '@emoji-mart/react';
|
|
7
|
-
import { ArrowCounterClockwise, CaretDown, UserCircle } from '@phosphor-icons/react';
|
|
8
7
|
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
9
8
|
import React, { useRef, useState } from 'react';
|
|
10
9
|
|
|
@@ -18,8 +17,8 @@ import {
|
|
|
18
17
|
useMediaQuery,
|
|
19
18
|
useThemeContext,
|
|
20
19
|
useTranslation,
|
|
20
|
+
Icon,
|
|
21
21
|
} from '@dxos/react-ui';
|
|
22
|
-
import { getSize } from '@dxos/react-ui-theme';
|
|
23
22
|
|
|
24
23
|
import './emoji.css';
|
|
25
24
|
|
|
@@ -77,7 +76,7 @@ export const EmojiPickerToolbarButton = ({
|
|
|
77
76
|
<Popover.Trigger asChild>
|
|
78
77
|
<Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>
|
|
79
78
|
<span className='sr-only'>{t('select emoji label')}</span>
|
|
80
|
-
<
|
|
79
|
+
<Icon icon='ph--user-circle--regular' size={5} />
|
|
81
80
|
</Toolbar.Button>
|
|
82
81
|
</Popover.Trigger>
|
|
83
82
|
</Tooltip.Trigger>
|
|
@@ -142,7 +141,7 @@ export const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji,
|
|
|
142
141
|
<Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>
|
|
143
142
|
<span className='sr-only'>{t('select emoji label')}</span>
|
|
144
143
|
<span className='grow pis-14'>{emojiValue}</span>
|
|
145
|
-
<
|
|
144
|
+
<Icon icon='ph--caret-down--regular' size={4} />
|
|
146
145
|
</Button>
|
|
147
146
|
</Popover.Trigger>
|
|
148
147
|
<Popover.Content
|
|
@@ -174,7 +173,7 @@ export const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji,
|
|
|
174
173
|
<Tooltip.Trigger asChild>
|
|
175
174
|
<Button variant='ghost' onClick={onClickClear} disabled={disabled}>
|
|
176
175
|
<span className='sr-only'>{t('clear label')}</span>
|
|
177
|
-
<
|
|
176
|
+
<Icon icon='ph--arrow-counter-clockwise--regular' size={5} />
|
|
178
177
|
</Button>
|
|
179
178
|
</Tooltip.Trigger>
|
|
180
179
|
<Tooltip.Portal>
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';
|
|
6
5
|
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
7
6
|
import React, { useRef, useState } from 'react';
|
|
8
7
|
|
|
@@ -10,26 +9,26 @@ import {
|
|
|
10
9
|
Button,
|
|
11
10
|
type ButtonProps,
|
|
12
11
|
DropdownMenu,
|
|
12
|
+
Icon,
|
|
13
13
|
type ThemedClassName,
|
|
14
14
|
Toolbar,
|
|
15
15
|
Tooltip,
|
|
16
|
-
useThemeContext,
|
|
17
16
|
useTranslation,
|
|
18
17
|
} from '@dxos/react-ui';
|
|
19
|
-
import {
|
|
18
|
+
import { hues, mx } from '@dxos/react-ui-theme';
|
|
20
19
|
|
|
21
20
|
const HuePreview = ({ hue }: { hue: string }) => {
|
|
22
|
-
const { tx } = useThemeContext();
|
|
23
21
|
const size = 20;
|
|
24
22
|
return (
|
|
25
23
|
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
|
|
26
|
-
<rect x={0} y={0} width={size} height={size}
|
|
24
|
+
<rect x={0} y={0} width={size} height={size} fill={`var(--dx-${hue}Surface)`} />
|
|
25
|
+
<text x='10' y='15' textAnchor='middle' fontSize='14' fontWeight='bold' fill={`var(--dx-${hue}SurfaceText)`}>
|
|
26
|
+
T
|
|
27
|
+
</text>
|
|
27
28
|
</svg>
|
|
28
29
|
);
|
|
29
30
|
};
|
|
30
31
|
|
|
31
|
-
const hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
|
|
32
|
-
|
|
33
32
|
export type HuePickerProps = {
|
|
34
33
|
disabled?: boolean;
|
|
35
34
|
defaultHue?: string;
|
|
@@ -85,7 +84,7 @@ export const HuePickerToolbarButton = ({
|
|
|
85
84
|
<DropdownMenu.Trigger asChild>
|
|
86
85
|
<Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>
|
|
87
86
|
<span className='sr-only'>{t('select hue label')}</span>
|
|
88
|
-
<
|
|
87
|
+
<Icon icon='ph--palette--regular' size={5} />
|
|
89
88
|
</Toolbar.Button>
|
|
90
89
|
</DropdownMenu.Trigger>
|
|
91
90
|
</Tooltip.Trigger>
|
|
@@ -97,8 +96,8 @@ export const HuePickerToolbarButton = ({
|
|
|
97
96
|
</Tooltip.Portal>
|
|
98
97
|
<DropdownMenu.Portal>
|
|
99
98
|
<DropdownMenu.Content side='bottom' classNames='!w-40'>
|
|
100
|
-
<DropdownMenu.Viewport classNames='grid grid-cols-
|
|
101
|
-
{
|
|
99
|
+
<DropdownMenu.Viewport classNames='grid grid-cols-6'>
|
|
100
|
+
{hues.map((hue) => {
|
|
102
101
|
return (
|
|
103
102
|
<DropdownMenu.CheckboxItem
|
|
104
103
|
key={hue}
|
|
@@ -138,38 +137,46 @@ export const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClick
|
|
|
138
137
|
<Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>
|
|
139
138
|
<span className='sr-only'>{t('select hue label')}</span>
|
|
140
139
|
<div role='none' className='pis-14 grow flex items-center justify-center gap-2'>
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
{hue ? (
|
|
141
|
+
<>
|
|
142
|
+
<HuePreview hue={hueValue!} />
|
|
143
|
+
<span>{t(`${hueValue} label`)}</span>
|
|
144
|
+
</>
|
|
145
|
+
) : (
|
|
146
|
+
<span>{t('select a hue label')}</span>
|
|
147
|
+
)}
|
|
143
148
|
</div>
|
|
144
|
-
<
|
|
149
|
+
<Icon icon='ph--caret-down--regular' size={4} />
|
|
145
150
|
</Button>
|
|
146
151
|
</DropdownMenu.Trigger>
|
|
147
|
-
<DropdownMenu.
|
|
148
|
-
<DropdownMenu.
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
152
|
+
<DropdownMenu.Portal>
|
|
153
|
+
<DropdownMenu.Content side='right'>
|
|
154
|
+
<DropdownMenu.Viewport>
|
|
155
|
+
{hues.map((hue) => {
|
|
156
|
+
return (
|
|
157
|
+
<DropdownMenu.CheckboxItem
|
|
158
|
+
key={hue}
|
|
159
|
+
checked={hue === hueValue}
|
|
160
|
+
onCheckedChange={() => setHueValue(hue)}
|
|
161
|
+
>
|
|
162
|
+
<HuePreview hue={hue} />
|
|
163
|
+
<span className='grow'>{t(`${hue} label`)}</span>
|
|
164
|
+
<DropdownMenu.ItemIndicator>
|
|
165
|
+
<Icon icon='ph--check--regular' size={4} />
|
|
166
|
+
</DropdownMenu.ItemIndicator>
|
|
167
|
+
</DropdownMenu.CheckboxItem>
|
|
168
|
+
);
|
|
169
|
+
})}
|
|
170
|
+
</DropdownMenu.Viewport>
|
|
171
|
+
<DropdownMenu.Arrow />
|
|
172
|
+
</DropdownMenu.Content>
|
|
173
|
+
</DropdownMenu.Portal>
|
|
167
174
|
</DropdownMenu.Root>
|
|
168
175
|
<Tooltip.Root>
|
|
169
176
|
<Tooltip.Trigger asChild>
|
|
170
177
|
<Button variant='ghost' onClick={onClickClear} disabled={disabled}>
|
|
171
178
|
<span className='sr-only'>{t('clear label')}</span>
|
|
172
|
-
<
|
|
179
|
+
<Icon icon='ph--arrow-counter-clockwise--regular' size={5} />
|
|
173
180
|
</Button>
|
|
174
181
|
</Tooltip.Trigger>
|
|
175
182
|
<Tooltip.Portal>
|