@dxos/react-ui-pickers 0.8.4-main.406dc2a → 0.8.4-main.548089c
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 +38 -50
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +38 -50
- 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/EmojiPicker/EmojiPicker.stories.d.ts +0 -3
- package/dist/types/src/components/EmojiPicker/EmojiPicker.stories.d.ts.map +1 -1
- package/dist/types/src/components/HuePicker/HuePicker.d.ts.map +1 -1
- package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts +0 -3
- package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts.map +1 -1
- package/dist/types/src/components/IconPicker/IconPicker.d.ts +7 -1
- package/dist/types/src/components/IconPicker/IconPicker.d.ts.map +1 -1
- package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts +0 -3
- package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts.map +1 -1
- package/dist/types/src/components/PickerButton/PickerButton.d.ts +2 -2
- package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +10 -10
- package/src/components/EmojiPicker/EmojiPicker.stories.tsx +2 -5
- package/src/components/EmojiPicker/EmojiPicker.tsx +19 -15
- package/src/components/HuePicker/HuePicker.stories.tsx +2 -5
- package/src/components/HuePicker/HuePicker.tsx +5 -9
- package/src/components/IconPicker/IconPicker.stories.tsx +2 -5
- package/src/components/IconPicker/IconPicker.tsx +6 -6
- package/src/components/PickerButton/PickerButton.tsx +8 -9
|
@@ -4,7 +4,7 @@ import emojiData from "@emoji-mart/data";
|
|
|
4
4
|
import EmojiMart from "@emoji-mart/react";
|
|
5
5
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
6
6
|
import React, { useState } from "react";
|
|
7
|
-
import { Button, ButtonGroup, Icon, Popover, Toolbar,
|
|
7
|
+
import { Button, ButtonGroup, Icon, IconButton, Popover, Toolbar, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
|
|
8
8
|
var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
|
|
9
9
|
var _effect = _useSignals();
|
|
10
10
|
try {
|
|
@@ -21,24 +21,15 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
21
21
|
onOpenChange: (nextOpen) => {
|
|
22
22
|
setEmojiPickerOpen(nextOpen);
|
|
23
23
|
}
|
|
24
|
-
}, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
25
|
-
asChild: true,
|
|
26
|
-
content: t("select emoji label"),
|
|
27
|
-
side: "bottom"
|
|
28
24
|
}, /* @__PURE__ */ React.createElement(Popover.Trigger, {
|
|
29
25
|
asChild: true
|
|
30
|
-
}, /* @__PURE__ */ React.createElement(Toolbar.
|
|
31
|
-
classNames: [
|
|
32
|
-
"gap-2 text-2xl plb-1",
|
|
33
|
-
classNames
|
|
34
|
-
],
|
|
35
|
-
disabled
|
|
36
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
37
|
-
className: "sr-only"
|
|
38
|
-
}, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
26
|
+
}, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
|
|
39
27
|
icon: "ph--user-circle--regular",
|
|
40
|
-
|
|
41
|
-
|
|
28
|
+
label: t("select emoji label"),
|
|
29
|
+
iconOnly: true,
|
|
30
|
+
tooltipSide: "bottom",
|
|
31
|
+
disabled
|
|
32
|
+
})), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
42
33
|
side: "bottom",
|
|
43
34
|
onKeyDownCapture: (event) => {
|
|
44
35
|
if (event.key === "Escape") {
|
|
@@ -110,20 +101,15 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
110
101
|
autoFocus: true,
|
|
111
102
|
maxFrequentRows: 0,
|
|
112
103
|
noCountryFlags: true
|
|
113
|
-
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
104
|
+
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(IconButton, {
|
|
105
|
+
icon: "ph--arrow-counter-clockwise--regular",
|
|
106
|
+
iconOnly: true,
|
|
107
|
+
label: t("clear label"),
|
|
108
|
+
tooltipSide: "right",
|
|
118
109
|
variant: triggerVariant,
|
|
119
110
|
onClick: onClickClear,
|
|
120
111
|
disabled
|
|
121
|
-
}
|
|
122
|
-
className: "sr-only"
|
|
123
|
-
}, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
124
|
-
icon: "ph--arrow-counter-clockwise--regular",
|
|
125
|
-
size: 5
|
|
126
|
-
}))));
|
|
112
|
+
}));
|
|
127
113
|
} finally {
|
|
128
114
|
_effect.f();
|
|
129
115
|
}
|
|
@@ -133,23 +119,23 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
133
119
|
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
134
120
|
import React3 from "react";
|
|
135
121
|
import { useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
136
|
-
import { hues } from "@dxos/react-ui-theme";
|
|
122
|
+
import { getSize, hues } from "@dxos/react-ui-theme";
|
|
137
123
|
|
|
138
124
|
// src/components/PickerButton/PickerButton.tsx
|
|
139
125
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
140
126
|
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
141
127
|
import React2, { useEffect, useState as useState2 } from "react";
|
|
142
|
-
import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip
|
|
143
|
-
var PickerButton = ({ Component, disabled, classNames, defaultValue:
|
|
128
|
+
import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip } from "@dxos/react-ui";
|
|
129
|
+
var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValueParam, value: valueParam, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
|
|
144
130
|
var _effect = _useSignals2();
|
|
145
131
|
try {
|
|
146
132
|
const [value, setValue] = useControllableState2({
|
|
147
|
-
prop:
|
|
148
|
-
defaultProp:
|
|
133
|
+
prop: valueParam,
|
|
134
|
+
defaultProp: defaultValueParam,
|
|
149
135
|
onChange
|
|
150
136
|
});
|
|
151
|
-
useEffect(() => setValue(
|
|
152
|
-
|
|
137
|
+
useEffect(() => setValue(valueParam), [
|
|
138
|
+
valueParam
|
|
153
139
|
]);
|
|
154
140
|
const [open, setOpen] = useState2(false);
|
|
155
141
|
const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
|
|
@@ -157,7 +143,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
157
143
|
modal: false,
|
|
158
144
|
open,
|
|
159
145
|
onOpenChange: setOpen
|
|
160
|
-
}, /* @__PURE__ */ React2.createElement(
|
|
146
|
+
}, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
|
|
161
147
|
asChild: true,
|
|
162
148
|
content: label,
|
|
163
149
|
side: "bottom"
|
|
@@ -173,7 +159,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
173
159
|
className: "sr-only"
|
|
174
160
|
}, label), value && /* @__PURE__ */ React2.createElement(Component, {
|
|
175
161
|
value,
|
|
176
|
-
iconSize
|
|
162
|
+
size: iconSize
|
|
177
163
|
}) || /* @__PURE__ */ React2.createElement(Icon2, {
|
|
178
164
|
icon,
|
|
179
165
|
size: iconSize
|
|
@@ -185,15 +171,15 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
185
171
|
classNames: "!is-min"
|
|
186
172
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
187
173
|
classNames: "grid grid-cols-[repeat(6,min-content)]"
|
|
188
|
-
}, values.map((
|
|
174
|
+
}, values.map((_value) => {
|
|
189
175
|
return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
190
|
-
key:
|
|
191
|
-
checked:
|
|
192
|
-
onCheckedChange: () => setValue(
|
|
176
|
+
key: _value,
|
|
177
|
+
checked: _value === value,
|
|
178
|
+
onCheckedChange: () => setValue(_value),
|
|
193
179
|
classNames: "p-1 items-center justify-center aspect-square"
|
|
194
180
|
}, /* @__PURE__ */ React2.createElement(Component, {
|
|
195
|
-
value:
|
|
196
|
-
iconSize
|
|
181
|
+
value: _value,
|
|
182
|
+
size: iconSize
|
|
197
183
|
}));
|
|
198
184
|
}), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
199
185
|
onCheckedChange: () => onReset(),
|
|
@@ -223,15 +209,15 @@ var HuePicker = (props) => {
|
|
|
223
209
|
_effect.f();
|
|
224
210
|
}
|
|
225
211
|
};
|
|
226
|
-
var HuePreview = ({ value }) => {
|
|
212
|
+
var HuePreview = ({ value, size = 5 }) => {
|
|
227
213
|
var _effect = _useSignals3();
|
|
228
214
|
try {
|
|
229
|
-
const size = 16;
|
|
230
215
|
return /* @__PURE__ */ React3.createElement("div", {
|
|
231
|
-
|
|
216
|
+
role: "none",
|
|
217
|
+
className: "flex justify-center items-center"
|
|
232
218
|
}, /* @__PURE__ */ React3.createElement("svg", {
|
|
233
219
|
viewBox: `0 0 ${size} ${size}`,
|
|
234
|
-
className:
|
|
220
|
+
className: getSize(size)
|
|
235
221
|
}, /* @__PURE__ */ React3.createElement("rect", {
|
|
236
222
|
x: 0,
|
|
237
223
|
y: 0,
|
|
@@ -264,12 +250,12 @@ var IconPicker = ({ ...props }) => {
|
|
|
264
250
|
_effect.f();
|
|
265
251
|
}
|
|
266
252
|
};
|
|
267
|
-
var IconPreview = ({ value,
|
|
253
|
+
var IconPreview = ({ value, size }) => {
|
|
268
254
|
var _effect = _useSignals4();
|
|
269
255
|
try {
|
|
270
256
|
return /* @__PURE__ */ React4.createElement(Icon3, {
|
|
271
257
|
icon: `ph--${value}--regular`,
|
|
272
|
-
size
|
|
258
|
+
size
|
|
273
259
|
});
|
|
274
260
|
} finally {
|
|
275
261
|
_effect.f();
|
|
@@ -278,7 +264,7 @@ var IconPreview = ({ value, iconSize = 5 }) => {
|
|
|
278
264
|
var icons = [
|
|
279
265
|
"ph--house-line--regular",
|
|
280
266
|
"ph--planet--regular",
|
|
281
|
-
"ph--
|
|
267
|
+
"ph--castle-turret--regular",
|
|
282
268
|
"ph--snowflake--regular",
|
|
283
269
|
"ph--virus--regular",
|
|
284
270
|
"ph--graph--regular",
|
|
@@ -337,6 +323,8 @@ export {
|
|
|
337
323
|
EmojiPickerToolbarButton,
|
|
338
324
|
HuePicker,
|
|
339
325
|
IconPicker,
|
|
340
|
-
PickerButton
|
|
326
|
+
PickerButton,
|
|
327
|
+
iconValues,
|
|
328
|
+
icons
|
|
341
329
|
};
|
|
342
330
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -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, { useState } from 'react';\n\nimport {\n Button,\n ButtonGroup,\n type ButtonProps,\n Icon,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\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\n return (\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n }}\n >\n <Tooltip.Trigger asChild content={t('select emoji label')} side='bottom'>\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 }\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');\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, 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 TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <DropdownMenu.Root modal={false} open={open} onOpenChange={setOpen}>\n <Tooltip.Trigger asChild content={label} side='bottom'>\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--house-line--regular',\n 'ph--planet--regular',\n 'ph--piggy-bank--regular',\n 'ph--snowflake--regular',\n 'ph--virus--regular',\n 'ph--graph--regular',\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,gBAAgB;AAEhC,SACEC,QACAC,aAEAC,MACAC,SAEAC,SACAC,
|
|
6
|
-
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useState", "Button", "ButtonGroup", "Icon", "
|
|
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, { useState } from 'react';\n\nimport {\n Button,\n ButtonGroup,\n type ButtonProps,\n Icon,\n IconButton,\n Popover,\n type ThemedClassName,\n Toolbar,\n useMediaQuery,\n useThemeContext,\n useTranslation,\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\n return (\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n }}\n >\n <Popover.Trigger asChild>\n <Toolbar.IconButton\n icon='ph--user-circle--regular'\n label={t('select emoji label')}\n iconOnly\n tooltipSide='bottom'\n disabled={disabled}\n />\n </Popover.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 }\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');\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 <IconButton\n icon='ph--arrow-counter-clockwise--regular'\n iconOnly\n label={t('clear label')}\n tooltipSide='right'\n variant={triggerVariant}\n onClick={onClickClear}\n disabled={disabled}\n />\n </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { getSize, 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, size = 5 }: { value: string; size?: IconProps['size'] }) => {\n return (\n <div role='none' className='flex justify-center items-center'>\n <svg viewBox={`0 0 ${size} ${size}`} className={getSize(size)}>\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, 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; size?: 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: defaultValueParam,\n value: valueParam,\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: valueParam,\n defaultProp: defaultValueParam,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(valueParam), [valueParam]);\n\n const [open, setOpen] = useState<boolean>(false);\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <DropdownMenu.Root modal={false} open={open} onOpenChange={setOpen}>\n <Tooltip.Trigger asChild content={label} side='bottom'>\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} size={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} size={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' | 'rootVariant' | 'iconSize' | 'defaultValue' | 'value' | 'onChange' | 'onReset'\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, size }: { value: string; size?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={size} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nexport const icons = [\n 'ph--house-line--regular',\n 'ph--planet--regular',\n 'ph--castle-turret--regular',\n 'ph--snowflake--regular',\n 'ph--virus--regular',\n 'ph--graph--regular',\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\nexport const iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useState", "Button", "ButtonGroup", "Icon", "IconButton", "Popover", "Toolbar", "useMediaQuery", "useThemeContext", "useTranslation", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "Popover", "Root", "open", "onOpenChange", "nextOpen", "Trigger", "asChild", "Toolbar", "IconButton", "icon", "label", "iconOnly", "tooltipSide", "Portal", "Content", "side", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "Arrow", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "emojiValue", "ButtonGroup", "Button", "variant", "span", "className", "Icon", "size", "sideOffset", "onClick", "React", "useTranslation", "getSize", "hues", "useControllableState", "React", "useEffect", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "PickerButton", "Component", "disabled", "classNames", "defaultValue", "defaultValueParam", "value", "valueParam", "values", "label", "icon", "onChange", "onReset", "rootVariant", "iconSize", "setValue", "useControllableState", "prop", "defaultProp", "useEffect", "open", "setOpen", "useState", "TriggerRoot", "Toolbar", "Button", "React", "DropdownMenu", "Root", "modal", "onOpenChange", "Tooltip", "Trigger", "asChild", "content", "side", "span", "className", "size", "Icon", "Portal", "Content", "Viewport", "map", "_value", "CheckboxItem", "key", "checked", "onCheckedChange", "Arrow", "HuePicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "role", "className", "svg", "viewBox", "getSize", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "React", "Icon", "useTranslation", "IconPicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "size", "Icon", "icons", "map", "match"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":15787,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"src/components/EmojiPicker/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"src/components/EmojiPicker/index.ts":{"bytes":489,"imports":[{"path":"src/components/EmojiPicker/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"}],"format":"esm"},"src/components/PickerButton/PickerButton.tsx":{"bytes":10439,"imports":[{"path":"@preact-signals/safe-react/tracking","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}],"format":"esm"},"src/components/PickerButton/index.ts":{"bytes":491,"imports":[{"path":"src/components/PickerButton/PickerButton.tsx","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"src/components/HuePicker/HuePicker.tsx":{"bytes":4475,"imports":[{"path":"@preact-signals/safe-react/tracking","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":"src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"src/components/HuePicker/index.ts":{"bytes":481,"imports":[{"path":"src/components/HuePicker/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"src/components/IconPicker/IconPicker.tsx":{"bytes":8223,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"src/components/IconPicker/index.ts":{"bytes":483,"imports":[{"path":"src/components/IconPicker/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"}],"format":"esm"},"src/components/index.ts":{"bytes":760,"imports":[{"path":"src/components/EmojiPicker/index.ts","kind":"import-statement","original":"./EmojiPicker"},{"path":"src/components/HuePicker/index.ts","kind":"import-statement","original":"./HuePicker"},{"path":"src/components/IconPicker/index.ts","kind":"import-statement","original":"./IconPicker"},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"src/index.ts":{"bytes":461,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":19735},"dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"@preact-signals/safe-react/tracking","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":"@preact-signals/safe-react/tracking","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":"@preact-signals/safe-react/tracking","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","iconValues","icons"],"entryPoint":"src/index.ts","cssBundle":"dist/lib/browser/index.css","inputs":{"src/components/EmojiPicker/EmojiPicker.tsx":{"bytesInOutput":4216},"src/components/EmojiPicker/emoji.css":{"bytesInOutput":0},"src/components/EmojiPicker/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/components/HuePicker/HuePicker.tsx":{"bytesInOutput":1147},"src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":2930},"src/components/PickerButton/index.ts":{"bytesInOutput":0},"src/components/HuePicker/index.ts":{"bytesInOutput":0},"src/components/IconPicker/IconPicker.tsx":{"bytesInOutput":2416},"src/components/IconPicker/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":11095},"dist/lib/browser/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1029},"dist/lib/browser/index.css":{"imports":[],"inputs":{"src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":227}}}
|
|
@@ -6,7 +6,7 @@ import emojiData from "@emoji-mart/data";
|
|
|
6
6
|
import EmojiMart from "@emoji-mart/react";
|
|
7
7
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
8
8
|
import React, { useState } from "react";
|
|
9
|
-
import { Button, ButtonGroup, Icon, Popover, Toolbar,
|
|
9
|
+
import { Button, ButtonGroup, Icon, IconButton, Popover, Toolbar, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
|
|
10
10
|
var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
|
|
11
11
|
var _effect = _useSignals();
|
|
12
12
|
try {
|
|
@@ -23,24 +23,15 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
23
23
|
onOpenChange: (nextOpen) => {
|
|
24
24
|
setEmojiPickerOpen(nextOpen);
|
|
25
25
|
}
|
|
26
|
-
}, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
27
|
-
asChild: true,
|
|
28
|
-
content: t("select emoji label"),
|
|
29
|
-
side: "bottom"
|
|
30
26
|
}, /* @__PURE__ */ React.createElement(Popover.Trigger, {
|
|
31
27
|
asChild: true
|
|
32
|
-
}, /* @__PURE__ */ React.createElement(Toolbar.
|
|
33
|
-
classNames: [
|
|
34
|
-
"gap-2 text-2xl plb-1",
|
|
35
|
-
classNames
|
|
36
|
-
],
|
|
37
|
-
disabled
|
|
38
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
39
|
-
className: "sr-only"
|
|
40
|
-
}, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
28
|
+
}, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
|
|
41
29
|
icon: "ph--user-circle--regular",
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
label: t("select emoji label"),
|
|
31
|
+
iconOnly: true,
|
|
32
|
+
tooltipSide: "bottom",
|
|
33
|
+
disabled
|
|
34
|
+
})), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
44
35
|
side: "bottom",
|
|
45
36
|
onKeyDownCapture: (event) => {
|
|
46
37
|
if (event.key === "Escape") {
|
|
@@ -112,20 +103,15 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
112
103
|
autoFocus: true,
|
|
113
104
|
maxFrequentRows: 0,
|
|
114
105
|
noCountryFlags: true
|
|
115
|
-
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
106
|
+
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(IconButton, {
|
|
107
|
+
icon: "ph--arrow-counter-clockwise--regular",
|
|
108
|
+
iconOnly: true,
|
|
109
|
+
label: t("clear label"),
|
|
110
|
+
tooltipSide: "right",
|
|
120
111
|
variant: triggerVariant,
|
|
121
112
|
onClick: onClickClear,
|
|
122
113
|
disabled
|
|
123
|
-
}
|
|
124
|
-
className: "sr-only"
|
|
125
|
-
}, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
|
|
126
|
-
icon: "ph--arrow-counter-clockwise--regular",
|
|
127
|
-
size: 5
|
|
128
|
-
}))));
|
|
114
|
+
}));
|
|
129
115
|
} finally {
|
|
130
116
|
_effect.f();
|
|
131
117
|
}
|
|
@@ -135,23 +121,23 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
135
121
|
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
136
122
|
import React3 from "react";
|
|
137
123
|
import { useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
138
|
-
import { hues } from "@dxos/react-ui-theme";
|
|
124
|
+
import { getSize, hues } from "@dxos/react-ui-theme";
|
|
139
125
|
|
|
140
126
|
// src/components/PickerButton/PickerButton.tsx
|
|
141
127
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
142
128
|
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
143
129
|
import React2, { useEffect, useState as useState2 } from "react";
|
|
144
|
-
import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip
|
|
145
|
-
var PickerButton = ({ Component, disabled, classNames, defaultValue:
|
|
130
|
+
import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip } from "@dxos/react-ui";
|
|
131
|
+
var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValueParam, value: valueParam, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
|
|
146
132
|
var _effect = _useSignals2();
|
|
147
133
|
try {
|
|
148
134
|
const [value, setValue] = useControllableState2({
|
|
149
|
-
prop:
|
|
150
|
-
defaultProp:
|
|
135
|
+
prop: valueParam,
|
|
136
|
+
defaultProp: defaultValueParam,
|
|
151
137
|
onChange
|
|
152
138
|
});
|
|
153
|
-
useEffect(() => setValue(
|
|
154
|
-
|
|
139
|
+
useEffect(() => setValue(valueParam), [
|
|
140
|
+
valueParam
|
|
155
141
|
]);
|
|
156
142
|
const [open, setOpen] = useState2(false);
|
|
157
143
|
const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
|
|
@@ -159,7 +145,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
159
145
|
modal: false,
|
|
160
146
|
open,
|
|
161
147
|
onOpenChange: setOpen
|
|
162
|
-
}, /* @__PURE__ */ React2.createElement(
|
|
148
|
+
}, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
|
|
163
149
|
asChild: true,
|
|
164
150
|
content: label,
|
|
165
151
|
side: "bottom"
|
|
@@ -175,7 +161,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
175
161
|
className: "sr-only"
|
|
176
162
|
}, label), value && /* @__PURE__ */ React2.createElement(Component, {
|
|
177
163
|
value,
|
|
178
|
-
iconSize
|
|
164
|
+
size: iconSize
|
|
179
165
|
}) || /* @__PURE__ */ React2.createElement(Icon2, {
|
|
180
166
|
icon,
|
|
181
167
|
size: iconSize
|
|
@@ -187,15 +173,15 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
|
|
|
187
173
|
classNames: "!is-min"
|
|
188
174
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
189
175
|
classNames: "grid grid-cols-[repeat(6,min-content)]"
|
|
190
|
-
}, values.map((
|
|
176
|
+
}, values.map((_value) => {
|
|
191
177
|
return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
192
|
-
key:
|
|
193
|
-
checked:
|
|
194
|
-
onCheckedChange: () => setValue(
|
|
178
|
+
key: _value,
|
|
179
|
+
checked: _value === value,
|
|
180
|
+
onCheckedChange: () => setValue(_value),
|
|
195
181
|
classNames: "p-1 items-center justify-center aspect-square"
|
|
196
182
|
}, /* @__PURE__ */ React2.createElement(Component, {
|
|
197
|
-
value:
|
|
198
|
-
iconSize
|
|
183
|
+
value: _value,
|
|
184
|
+
size: iconSize
|
|
199
185
|
}));
|
|
200
186
|
}), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
201
187
|
onCheckedChange: () => onReset(),
|
|
@@ -225,15 +211,15 @@ var HuePicker = (props) => {
|
|
|
225
211
|
_effect.f();
|
|
226
212
|
}
|
|
227
213
|
};
|
|
228
|
-
var HuePreview = ({ value }) => {
|
|
214
|
+
var HuePreview = ({ value, size = 5 }) => {
|
|
229
215
|
var _effect = _useSignals3();
|
|
230
216
|
try {
|
|
231
|
-
const size = 16;
|
|
232
217
|
return /* @__PURE__ */ React3.createElement("div", {
|
|
233
|
-
|
|
218
|
+
role: "none",
|
|
219
|
+
className: "flex justify-center items-center"
|
|
234
220
|
}, /* @__PURE__ */ React3.createElement("svg", {
|
|
235
221
|
viewBox: `0 0 ${size} ${size}`,
|
|
236
|
-
className:
|
|
222
|
+
className: getSize(size)
|
|
237
223
|
}, /* @__PURE__ */ React3.createElement("rect", {
|
|
238
224
|
x: 0,
|
|
239
225
|
y: 0,
|
|
@@ -266,12 +252,12 @@ var IconPicker = ({ ...props }) => {
|
|
|
266
252
|
_effect.f();
|
|
267
253
|
}
|
|
268
254
|
};
|
|
269
|
-
var IconPreview = ({ value,
|
|
255
|
+
var IconPreview = ({ value, size }) => {
|
|
270
256
|
var _effect = _useSignals4();
|
|
271
257
|
try {
|
|
272
258
|
return /* @__PURE__ */ React4.createElement(Icon3, {
|
|
273
259
|
icon: `ph--${value}--regular`,
|
|
274
|
-
size
|
|
260
|
+
size
|
|
275
261
|
});
|
|
276
262
|
} finally {
|
|
277
263
|
_effect.f();
|
|
@@ -280,7 +266,7 @@ var IconPreview = ({ value, iconSize = 5 }) => {
|
|
|
280
266
|
var icons = [
|
|
281
267
|
"ph--house-line--regular",
|
|
282
268
|
"ph--planet--regular",
|
|
283
|
-
"ph--
|
|
269
|
+
"ph--castle-turret--regular",
|
|
284
270
|
"ph--snowflake--regular",
|
|
285
271
|
"ph--virus--regular",
|
|
286
272
|
"ph--graph--regular",
|
|
@@ -339,6 +325,8 @@ export {
|
|
|
339
325
|
EmojiPickerToolbarButton,
|
|
340
326
|
HuePicker,
|
|
341
327
|
IconPicker,
|
|
342
|
-
PickerButton
|
|
328
|
+
PickerButton,
|
|
329
|
+
iconValues,
|
|
330
|
+
icons
|
|
343
331
|
};
|
|
344
332
|
//# sourceMappingURL=index.mjs.map
|