@dxos/react-ui-pickers 0.8.4-main.ef1bc66f44 → 0.8.4-main.f466a3d56e
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/LICENSE +102 -5
- package/dist/lib/browser/{chunk-IEOELSPW.mjs → chunk-D3UYVI3X.mjs} +1 -1
- package/dist/lib/browser/components/IconPicker/icons.mjs +1 -1
- package/dist/lib/browser/index.css +2 -2
- package/dist/lib/browser/index.css.map +2 -2
- package/dist/lib/browser/index.mjs +10 -11
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/{chunk-OLGXN23I.mjs → chunk-N4YXLEKA.mjs} +1 -1
- package/dist/lib/node-esm/components/IconPicker/icons.mjs +1 -1
- package/dist/lib/node-esm/index.css +2 -2
- package/dist/lib/node-esm/index.css.map +2 -2
- package/dist/lib/node-esm/index.mjs +10 -11
- 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 +2 -2
- package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map +1 -1
- 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.map +1 -1
- package/dist/types/src/components/IconPicker/IconPicker.d.ts.map +1 -1
- package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts.map +1 -1
- package/dist/types/src/components/PickerButton/PickerButton.d.ts +1 -1
- package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -18
- package/src/components/EmojiPicker/EmojiPicker.tsx +6 -6
- package/src/components/EmojiPicker/emoji.css +5 -21
- package/src/components/HuePicker/HuePicker.tsx +3 -3
- package/src/components/IconPicker/IconPicker.tsx +1 -2
- package/src/components/PickerButton/PickerButton.tsx +3 -3
- /package/dist/lib/browser/{chunk-IEOELSPW.mjs.map → chunk-D3UYVI3X.mjs.map} +0 -0
- /package/dist/lib/node-esm/{chunk-OLGXN23I.mjs.map → chunk-N4YXLEKA.mjs.map} +0 -0
package/LICENSE
CHANGED
|
@@ -1,8 +1,105 @@
|
|
|
1
|
-
|
|
2
|
-
Copyright (c) 2022 DXOS
|
|
1
|
+
# Functional Source License, Version 1.1, ALv2 Future License
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
## Abbreviation
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
FSL-1.1-Apache-2.0
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
## Notice
|
|
8
|
+
|
|
9
|
+
Copyright 2026 DXOS
|
|
10
|
+
|
|
11
|
+
## Terms and Conditions
|
|
12
|
+
|
|
13
|
+
### Licensor ("We")
|
|
14
|
+
|
|
15
|
+
The party offering the Software under these Terms and Conditions.
|
|
16
|
+
|
|
17
|
+
### The Software
|
|
18
|
+
|
|
19
|
+
The "Software" is each version of the software that we make available under
|
|
20
|
+
these Terms and Conditions, as indicated by our inclusion of these Terms and
|
|
21
|
+
Conditions with the Software.
|
|
22
|
+
|
|
23
|
+
### License Grant
|
|
24
|
+
|
|
25
|
+
Subject to your compliance with this License Grant and the Patents,
|
|
26
|
+
Redistribution and Trademark clauses below, we hereby grant you the right to
|
|
27
|
+
use, copy, modify, create derivative works, publicly perform, publicly display
|
|
28
|
+
and redistribute the Software for any Permitted Purpose identified below.
|
|
29
|
+
|
|
30
|
+
### Permitted Purpose
|
|
31
|
+
|
|
32
|
+
A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
|
|
33
|
+
means making the Software available to others in a commercial product or
|
|
34
|
+
service that:
|
|
35
|
+
|
|
36
|
+
1. substitutes for the Software;
|
|
37
|
+
|
|
38
|
+
2. substitutes for any other product or service we offer using the Software
|
|
39
|
+
that exists as of the date we make the Software available; or
|
|
40
|
+
|
|
41
|
+
3. offers the same or substantially similar functionality as the Software.
|
|
42
|
+
|
|
43
|
+
Permitted Purposes specifically include using the Software:
|
|
44
|
+
|
|
45
|
+
1. for your internal use and access;
|
|
46
|
+
|
|
47
|
+
2. for non-commercial education;
|
|
48
|
+
|
|
49
|
+
3. for non-commercial research; and
|
|
50
|
+
|
|
51
|
+
4. in connection with professional services that you provide to a licensee
|
|
52
|
+
using the Software in accordance with these Terms and Conditions.
|
|
53
|
+
|
|
54
|
+
### Patents
|
|
55
|
+
|
|
56
|
+
To the extent your use for a Permitted Purpose would necessarily infringe our
|
|
57
|
+
patents, the license grant above includes a license under our patents. If you
|
|
58
|
+
make a claim against any party that the Software infringes or contributes to
|
|
59
|
+
the infringement of any patent, then your patent license to the Software ends
|
|
60
|
+
immediately.
|
|
61
|
+
|
|
62
|
+
### Redistribution
|
|
63
|
+
|
|
64
|
+
The Terms and Conditions apply to all copies, modifications and derivatives of
|
|
65
|
+
the Software.
|
|
66
|
+
|
|
67
|
+
If you redistribute any copies, modifications or derivatives of the Software,
|
|
68
|
+
you must include a copy of or a link to these Terms and Conditions and not
|
|
69
|
+
remove any copyright notices provided in or with the Software.
|
|
70
|
+
|
|
71
|
+
### Disclaimer
|
|
72
|
+
|
|
73
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
|
|
74
|
+
IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
|
|
75
|
+
PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
|
|
76
|
+
|
|
77
|
+
IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
|
|
78
|
+
SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
|
|
79
|
+
EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
|
|
80
|
+
|
|
81
|
+
### Trademarks
|
|
82
|
+
|
|
83
|
+
Except for displaying the License Details and identifying us as the origin of
|
|
84
|
+
the Software, you have no right under these Terms and Conditions to use our
|
|
85
|
+
trademarks, trade names, service marks or product names.
|
|
86
|
+
|
|
87
|
+
## Grant of Future License
|
|
88
|
+
|
|
89
|
+
We hereby irrevocably grant you an additional license to use the Software under
|
|
90
|
+
the Apache License, Version 2.0 that is effective on the second anniversary of
|
|
91
|
+
the date we make the Software available. On or after that date, you may use the
|
|
92
|
+
Software under the Apache License, Version 2.0, in which case the following
|
|
93
|
+
will apply:
|
|
94
|
+
|
|
95
|
+
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
96
|
+
this file except in compliance with the License.
|
|
97
|
+
|
|
98
|
+
You may obtain a copy of the License at
|
|
99
|
+
|
|
100
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
101
|
+
|
|
102
|
+
Unless required by applicable law or agreed to in writing, software distributed
|
|
103
|
+
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
|
|
104
|
+
CONDITIONS OF ANY KIND, either express or implied. See the License for the
|
|
105
|
+
specific language governing permissions and limitations under the License.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* src/components/EmojiPicker/emoji.css */
|
|
2
2
|
[data-theme=dark] em-emoji-picker {
|
|
3
|
-
--background-rgb: #
|
|
4
|
-
--rgb-background: #
|
|
3
|
+
--background-rgb: #3b3b3f;
|
|
4
|
+
--rgb-background: #3b3b3f;
|
|
5
5
|
--font-family: "Inter Variable", ui-sans-serif;
|
|
6
6
|
}
|
|
7
7
|
/*# sourceMappingURL=index.css.map */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/emoji.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme
|
|
5
|
-
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;
|
|
4
|
+
"sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme='dark'] em-emoji-picker {\n /* TODO(burdon): Use tailwind tokens. */\n --background-rgb: #3b3b3f;\n --rgb-background: #3b3b3f;\n --font-family: 'Inter Variable', ui-sans-serif;\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAClB,iBAAe,gBAAgB,EAAE;AACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
iconValues
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-D3UYVI3X.mjs";
|
|
4
4
|
|
|
5
5
|
// src/components/EmojiPicker/EmojiPicker.tsx
|
|
6
6
|
import emojiData from "@emoji-mart/data";
|
|
@@ -27,7 +27,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
27
27
|
asChild: true
|
|
28
28
|
}, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
|
|
29
29
|
icon: "ph--user-circle--regular",
|
|
30
|
-
label: t("select
|
|
30
|
+
label: t("select-emoji.label"),
|
|
31
31
|
iconOnly: true,
|
|
32
32
|
tooltipSide: "bottom",
|
|
33
33
|
disabled
|
|
@@ -71,11 +71,11 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
71
71
|
asChild: true
|
|
72
72
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
73
73
|
variant: triggerVariant,
|
|
74
|
-
classNames: "grow gap-2 text-2xl
|
|
74
|
+
classNames: "grow gap-2 text-2xl py-1",
|
|
75
75
|
disabled
|
|
76
76
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
77
77
|
className: "sr-only"
|
|
78
|
-
}, t("select
|
|
78
|
+
}, t("select-emoji.label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
|
|
79
79
|
icon: "ph--caret-down--bold",
|
|
80
80
|
size: 3
|
|
81
81
|
}))), /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
@@ -101,7 +101,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
101
101
|
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(IconButton, {
|
|
102
102
|
icon: "ph--arrow-counter-clockwise--regular",
|
|
103
103
|
iconOnly: true,
|
|
104
|
-
label: t("clear
|
|
104
|
+
label: t("clear.label"),
|
|
105
105
|
tooltipSide: "right",
|
|
106
106
|
variant: triggerVariant,
|
|
107
107
|
onClick: onClickClear,
|
|
@@ -141,7 +141,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
|
|
|
141
141
|
asChild: true
|
|
142
142
|
}, /* @__PURE__ */ React2.createElement(TriggerRoot, {
|
|
143
143
|
classNames: [
|
|
144
|
-
"gap-2
|
|
144
|
+
"gap-2 py-1",
|
|
145
145
|
classNames
|
|
146
146
|
],
|
|
147
147
|
disabled
|
|
@@ -158,7 +158,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
|
|
|
158
158
|
size: 3
|
|
159
159
|
})))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
160
160
|
side: "bottom",
|
|
161
|
-
classNames: "!
|
|
161
|
+
classNames: "!w-min"
|
|
162
162
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
163
163
|
classNames: "grid grid-cols-[repeat(6,min-content)]"
|
|
164
164
|
}, values.map((_value) => {
|
|
@@ -185,7 +185,7 @@ var HuePicker = (props) => {
|
|
|
185
185
|
const { t } = useTranslation2(osTranslations2);
|
|
186
186
|
return /* @__PURE__ */ React3.createElement(PickerButton, {
|
|
187
187
|
Component: HuePreview,
|
|
188
|
-
label: t("select
|
|
188
|
+
label: t("select-hue.label"),
|
|
189
189
|
icon: "ph--palette--regular",
|
|
190
190
|
values: hues,
|
|
191
191
|
...props
|
|
@@ -193,7 +193,6 @@ var HuePicker = (props) => {
|
|
|
193
193
|
};
|
|
194
194
|
var HuePreview = ({ value, size = 5 }) => {
|
|
195
195
|
return /* @__PURE__ */ React3.createElement("div", {
|
|
196
|
-
role: "none",
|
|
197
196
|
className: "flex justify-center items-center"
|
|
198
197
|
}, /* @__PURE__ */ React3.createElement("svg", {
|
|
199
198
|
viewBox: `0 0 ${size} ${size}`,
|
|
@@ -203,7 +202,7 @@ var HuePreview = ({ value, size = 5 }) => {
|
|
|
203
202
|
y: 0,
|
|
204
203
|
width: size,
|
|
205
204
|
height: size,
|
|
206
|
-
fill: `var(--
|
|
205
|
+
fill: `var(--color-${value}-surface)`,
|
|
207
206
|
strokeWidth: 4
|
|
208
207
|
})));
|
|
209
208
|
};
|
|
@@ -216,7 +215,7 @@ var IconPicker = ({ ...props }) => {
|
|
|
216
215
|
const { t } = useTranslation3(osTranslations3);
|
|
217
216
|
return /* @__PURE__ */ React4.createElement(PickerButton, {
|
|
218
217
|
Component: IconPreview,
|
|
219
|
-
label: t("select
|
|
218
|
+
label: t("select-icon.label"),
|
|
220
219
|
icon: "ph--selection--regular",
|
|
221
220
|
values: iconValues,
|
|
222
221
|
...props
|
|
@@ -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 IconButton,\n Popover,\n type ThemedClassName,\n Toolbar,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n} from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\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(osTranslations);\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(osTranslations);\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, osTranslations } from '@dxos/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(osTranslations);\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: defaultValueProp,\n value: valueProp,\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: valueProp,\n defaultProp: defaultValueProp,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(valueProp), [valueProp]);\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';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nimport { iconValues } from './icons';\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(osTranslations);\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"],
|
|
5
|
-
"mappings": ";;;;;
|
|
6
|
-
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useState", "Button", "ButtonGroup", "Icon", "IconButton", "Popover", "Toolbar", "useMediaQuery", "useThemeContext", "useTranslation", "osTranslations", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport './emoji.css';\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';\nimport { osTranslations } from '@dxos/ui-theme';\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(osTranslations);\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(osTranslations);\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 py-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, osTranslations } from '@dxos/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(osTranslations);\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 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(--color-${value}-surface)`} 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: readonly 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: defaultValueProp,\n value: valueProp,\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: valueProp,\n defaultProp: defaultValueProp,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(valueProp), [valueProp]);\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 py-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='!w-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';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\nimport { iconValues } from './icons';\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(osTranslations);\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useState", "Button", "ButtonGroup", "Icon", "IconButton", "Popover", "Toolbar", "useMediaQuery", "useThemeContext", "useTranslation", "osTranslations", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "themeMode", "_emojiValue", "setEmojiValue", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "Root", "open", "onOpenChange", "nextOpen", "Trigger", "asChild", "icon", "label", "iconOnly", "tooltipSide", "Portal", "Content", "side", "onKeyDownCapture", "event", "key", "stopPropagation", "data", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "Arrow", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "emojiValue", "variant", "span", "className", "size", "sideOffset", "onClick", "React", "useTranslation", "getSize", "hues", "osTranslations", "useControllableState", "React", "useEffect", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "PickerButton", "Component", "disabled", "classNames", "defaultValue", "defaultValueProp", "value", "valueProp", "values", "label", "icon", "onChange", "onReset", "rootVariant", "iconSize", "setValue", "prop", "defaultProp", "open", "setOpen", "TriggerRoot", "Root", "modal", "onOpenChange", "Trigger", "asChild", "content", "side", "span", "className", "size", "Portal", "Content", "Viewport", "map", "_value", "CheckboxItem", "key", "checked", "onCheckedChange", "Arrow", "HuePicker", "props", "t", "useTranslation", "osTranslations", "React", "PickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "className", "svg", "viewBox", "getSize", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "React", "Icon", "useTranslation", "osTranslations", "IconPicker", "props", "t", "useTranslation", "osTranslations", "React", "PickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "size", "Icon"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/EmojiPicker/emoji.css":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/EmojiPicker/emoji.css":{"bytes":305,"imports":[]},"src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":15243,"imports":[{"path":"src/components/EmojiPicker/emoji.css","kind":"import-statement","original":"./emoji.css"},{"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":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/components/EmojiPicker/index.ts":{"bytes":387,"imports":[{"path":"src/components/EmojiPicker/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"}],"format":"esm"},"src/components/PickerButton/PickerButton.tsx":{"bytes":9894,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/PickerButton/index.ts":{"bytes":388,"imports":[{"path":"src/components/PickerButton/PickerButton.tsx","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"src/components/HuePicker/HuePicker.tsx":{"bytes":4056,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/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":377,"imports":[{"path":"src/components/HuePicker/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"src/components/IconPicker/icons.ts":{"bytes":5124,"imports":[],"format":"esm"},"src/components/IconPicker/IconPicker.tsx":{"bytes":3314,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"},{"path":"src/components/IconPicker/icons.ts","kind":"import-statement","original":"./icons"}],"format":"esm"},"src/components/IconPicker/index.ts":{"bytes":382,"imports":[{"path":"src/components/IconPicker/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"}],"format":"esm"},"src/components/index.ts":{"bytes":670,"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":382,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":17563},"dist/lib/browser/index.mjs":{"imports":[{"path":"dist/lib/browser/chunk-D3UYVI3X.mjs","kind":"import-statement"},{"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":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","PickerButton"],"entryPoint":"src/index.ts","cssBundle":"dist/lib/browser/index.css","inputs":{"src/components/EmojiPicker/emoji.css":{"bytesInOutput":0},"src/components/EmojiPicker/EmojiPicker.tsx":{"bytesInOutput":3865},"src/components/EmojiPicker/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/components/HuePicker/HuePicker.tsx":{"bytesInOutput":900},"src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":2647},"src/components/PickerButton/index.ts":{"bytesInOutput":0},"src/components/HuePicker/index.ts":{"bytesInOutput":0},"src/components/IconPicker/IconPicker.tsx":{"bytesInOutput":622},"src/components/IconPicker/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":8451},"dist/lib/browser/components/IconPicker/icons.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"dist/lib/browser/components/IconPicker/icons.mjs":{"imports":[{"path":"dist/lib/browser/chunk-D3UYVI3X.mjs","kind":"import-statement"}],"exports":["iconValues","icons"],"entryPoint":"src/components/IconPicker/icons.ts","inputs":{},"bytes":135},"dist/lib/browser/chunk-D3UYVI3X.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2390},"dist/lib/browser/chunk-D3UYVI3X.mjs":{"imports":[],"exports":["iconValues","icons"],"inputs":{"src/components/IconPicker/icons.ts":{"bytesInOutput":1617}},"bytes":1734},"dist/lib/browser/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":530},"dist/lib/browser/index.css":{"imports":[],"inputs":{"src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":227}}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* src/components/EmojiPicker/emoji.css */
|
|
2
2
|
[data-theme=dark] em-emoji-picker {
|
|
3
|
-
--background-rgb: #
|
|
4
|
-
--rgb-background: #
|
|
3
|
+
--background-rgb: #3b3b3f;
|
|
4
|
+
--rgb-background: #3b3b3f;
|
|
5
5
|
--font-family: "Inter Variable", ui-sans-serif;
|
|
6
6
|
}
|
|
7
7
|
/*# sourceMappingURL=index.css.map */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/emoji.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme
|
|
5
|
-
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;
|
|
4
|
+
"sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme='dark'] em-emoji-picker {\n /* TODO(burdon): Use tailwind tokens. */\n --background-rgb: #3b3b3f;\n --rgb-background: #3b3b3f;\n --font-family: 'Inter Variable', ui-sans-serif;\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAClB,iBAAe,gBAAgB,EAAE;AACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
import {
|
|
3
3
|
iconValues
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-N4YXLEKA.mjs";
|
|
5
5
|
|
|
6
6
|
// src/components/EmojiPicker/EmojiPicker.tsx
|
|
7
7
|
import emojiData from "@emoji-mart/data";
|
|
@@ -28,7 +28,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
|
|
|
28
28
|
asChild: true
|
|
29
29
|
}, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
|
|
30
30
|
icon: "ph--user-circle--regular",
|
|
31
|
-
label: t("select
|
|
31
|
+
label: t("select-emoji.label"),
|
|
32
32
|
iconOnly: true,
|
|
33
33
|
tooltipSide: "bottom",
|
|
34
34
|
disabled
|
|
@@ -72,11 +72,11 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
72
72
|
asChild: true
|
|
73
73
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
74
74
|
variant: triggerVariant,
|
|
75
|
-
classNames: "grow gap-2 text-2xl
|
|
75
|
+
classNames: "grow gap-2 text-2xl py-1",
|
|
76
76
|
disabled
|
|
77
77
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
78
78
|
className: "sr-only"
|
|
79
|
-
}, t("select
|
|
79
|
+
}, t("select-emoji.label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
|
|
80
80
|
icon: "ph--caret-down--bold",
|
|
81
81
|
size: 3
|
|
82
82
|
}))), /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
@@ -102,7 +102,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
102
102
|
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(IconButton, {
|
|
103
103
|
icon: "ph--arrow-counter-clockwise--regular",
|
|
104
104
|
iconOnly: true,
|
|
105
|
-
label: t("clear
|
|
105
|
+
label: t("clear.label"),
|
|
106
106
|
tooltipSide: "right",
|
|
107
107
|
variant: triggerVariant,
|
|
108
108
|
onClick: onClickClear,
|
|
@@ -142,7 +142,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
|
|
|
142
142
|
asChild: true
|
|
143
143
|
}, /* @__PURE__ */ React2.createElement(TriggerRoot, {
|
|
144
144
|
classNames: [
|
|
145
|
-
"gap-2
|
|
145
|
+
"gap-2 py-1",
|
|
146
146
|
classNames
|
|
147
147
|
],
|
|
148
148
|
disabled
|
|
@@ -159,7 +159,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
|
|
|
159
159
|
size: 3
|
|
160
160
|
})))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
161
161
|
side: "bottom",
|
|
162
|
-
classNames: "!
|
|
162
|
+
classNames: "!w-min"
|
|
163
163
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
164
164
|
classNames: "grid grid-cols-[repeat(6,min-content)]"
|
|
165
165
|
}, values.map((_value) => {
|
|
@@ -186,7 +186,7 @@ var HuePicker = (props) => {
|
|
|
186
186
|
const { t } = useTranslation2(osTranslations2);
|
|
187
187
|
return /* @__PURE__ */ React3.createElement(PickerButton, {
|
|
188
188
|
Component: HuePreview,
|
|
189
|
-
label: t("select
|
|
189
|
+
label: t("select-hue.label"),
|
|
190
190
|
icon: "ph--palette--regular",
|
|
191
191
|
values: hues,
|
|
192
192
|
...props
|
|
@@ -194,7 +194,6 @@ var HuePicker = (props) => {
|
|
|
194
194
|
};
|
|
195
195
|
var HuePreview = ({ value, size = 5 }) => {
|
|
196
196
|
return /* @__PURE__ */ React3.createElement("div", {
|
|
197
|
-
role: "none",
|
|
198
197
|
className: "flex justify-center items-center"
|
|
199
198
|
}, /* @__PURE__ */ React3.createElement("svg", {
|
|
200
199
|
viewBox: `0 0 ${size} ${size}`,
|
|
@@ -204,7 +203,7 @@ var HuePreview = ({ value, size = 5 }) => {
|
|
|
204
203
|
y: 0,
|
|
205
204
|
width: size,
|
|
206
205
|
height: size,
|
|
207
|
-
fill: `var(--
|
|
206
|
+
fill: `var(--color-${value}-surface)`,
|
|
208
207
|
strokeWidth: 4
|
|
209
208
|
})));
|
|
210
209
|
};
|
|
@@ -217,7 +216,7 @@ var IconPicker = ({ ...props }) => {
|
|
|
217
216
|
const { t } = useTranslation3(osTranslations3);
|
|
218
217
|
return /* @__PURE__ */ React4.createElement(PickerButton, {
|
|
219
218
|
Component: IconPreview,
|
|
220
|
-
label: t("select
|
|
219
|
+
label: t("select-icon.label"),
|
|
221
220
|
icon: "ph--selection--regular",
|
|
222
221
|
values: iconValues,
|
|
223
222
|
...props
|