@dxos/react-ui-pickers 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1
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.css +1 -1
- package/dist/lib/browser/index.css.map +1 -1
- package/dist/lib/browser/index.mjs +44 -37
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +38 -31
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/index.css +1 -1
- package/dist/lib/node/index.css.map +1 -1
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.css +1 -1
- package/dist/lib/node-esm/index.css.map +1 -1
- package/dist/lib/node-esm/index.mjs +44 -37
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/{EmojiPicker.d.ts → EmojiPicker/EmojiPicker.d.ts} +5 -5
- package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map +1 -0
- package/dist/types/src/components/EmojiPicker/EmojiPicker.stories.d.ts.map +1 -0
- package/dist/types/src/components/EmojiPicker/index.d.ts +2 -0
- package/dist/types/src/components/EmojiPicker/index.d.ts.map +1 -0
- package/dist/types/src/components/{HuePicker.d.ts → HuePicker/HuePicker.d.ts} +2 -2
- package/dist/types/src/components/HuePicker/HuePicker.d.ts.map +1 -0
- package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts.map +1 -0
- package/dist/types/src/components/HuePicker/index.d.ts +2 -0
- package/dist/types/src/components/HuePicker/index.d.ts.map +1 -0
- package/dist/types/src/components/{IconPicker.d.ts → IconPicker/IconPicker.d.ts} +2 -2
- package/dist/types/src/components/IconPicker/IconPicker.d.ts.map +1 -0
- package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts.map +1 -0
- package/dist/types/src/components/IconPicker/index.d.ts +2 -0
- package/dist/types/src/components/IconPicker/index.d.ts.map +1 -0
- package/dist/types/src/components/PickerButton/PickerButton.d.ts +20 -0
- package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -0
- package/dist/types/src/components/PickerButton/index.d.ts +2 -0
- package/dist/types/src/components/PickerButton/index.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/package.json +10 -8
- package/src/components/{EmojiPicker.tsx → EmojiPicker/EmojiPicker.tsx} +22 -13
- package/src/components/EmojiPicker/index.ts +5 -0
- package/src/components/{HuePicker.stories.tsx → HuePicker/HuePicker.stories.tsx} +7 -1
- package/src/components/{HuePicker.tsx → HuePicker/HuePicker.tsx} +7 -4
- package/src/components/HuePicker/index.ts +5 -0
- package/src/components/{IconPicker.tsx → IconPicker/IconPicker.tsx} +9 -6
- package/src/components/IconPicker/index.ts +5 -0
- package/src/components/{ToolbarPicker.tsx → PickerButton/PickerButton.tsx} +21 -15
- package/src/components/PickerButton/index.ts +5 -0
- package/src/components/index.ts +1 -1
- package/dist/types/src/components/EmojiPicker.d.ts.map +0 -1
- package/dist/types/src/components/EmojiPicker.stories.d.ts.map +0 -1
- package/dist/types/src/components/HuePicker.d.ts.map +0 -1
- package/dist/types/src/components/HuePicker.stories.d.ts.map +0 -1
- package/dist/types/src/components/IconPicker.d.ts.map +0 -1
- package/dist/types/src/components/IconPicker.stories.d.ts.map +0 -1
- package/dist/types/src/components/ToolbarPicker.d.ts +0 -17
- package/dist/types/src/components/ToolbarPicker.d.ts.map +0 -1
- /package/dist/types/src/components/{EmojiPicker.stories.d.ts → EmojiPicker/EmojiPicker.stories.d.ts} +0 -0
- /package/dist/types/src/components/{HuePicker.stories.d.ts → HuePicker/HuePicker.stories.d.ts} +0 -0
- /package/dist/types/src/components/{IconPicker.stories.d.ts → IconPicker/IconPicker.stories.d.ts} +0 -0
- /package/src/components/{EmojiPicker.stories.tsx → EmojiPicker/EmojiPicker.stories.tsx} +0 -0
- /package/src/components/{emoji.css → EmojiPicker/emoji.css} +0 -0
- /package/src/components/{IconPicker.stories.tsx → IconPicker/IconPicker.stories.tsx} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.tsx", "../../../src/components/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n classNames,\n}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n * @deprecated\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span className='grow pis-14'>{emojiValue}</span>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <ToolbarPickerButton\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 width={size} height={size} viewBox={`0 0 ${size} ${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, useRef, useState } from 'react';\n\nimport { DropdownMenu, Icon, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type ToolbarPickerProps = {\n Component: FC<{ value: string }>;\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};\n\nexport const ToolbarPickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n}: ThemedClassName<ToolbarPickerProps>) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} />) || <Icon icon={icon} size={5} />}\n </Toolbar.Button>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {label}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,2rem)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-px items-center justify-center aspect-square'}\n >\n <Component value={_value} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-px items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={6} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <ToolbarPickerButton\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 }: { value: string }) => {\n return <Icon icon={`ph--${value}--regular`} size={5} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,kBAAsB;AACtB,mBAAsB;AACtB,0CAAqC;AACrC,IAAAA,gBAAwC;AAExC,
|
|
6
|
-
"names": ["import_react", "import_react_ui", "import_react_use_controllable_state", "
|
|
3
|
+
"sources": ["../../../src/components/EmojiPicker/EmojiPicker.tsx", "../../../src/components/HuePicker/HuePicker.tsx", "../../../src/components/PickerButton/PickerButton.tsx", "../../../src/components/IconPicker/IconPicker.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n ButtonGroup,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\n}>;\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: Omit<EmojiPickerProps, 'onClickClear'>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant={triggerVariant} onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg\n viewBox={`0 0 ${size} ${size}`}\n className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n >\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {label}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} iconSize={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_react", "import_react_ui", "import_react_use_controllable_state", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "React", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "Popover", "Trigger", "asChild", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "side", "Arrow", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "ssr", "emojiValue", "ButtonGroup", "variant", "sideOffset", "onClick", "PickerButton", "Component", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "onReset", "rootVariant", "iconSize", "setValue", "useEffect", "setOpen", "TriggerRoot", "DropdownMenu", "modal", "Viewport", "map", "CheckboxItem", "checked", "onCheckedChange", "HuePicker", "props", "HuePreview", "hues", "div", "svg", "viewBox", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "IconPicker", "IconPreview", "iconValues", "icons", "match"]
|
|
7
7
|
}
|
package/dist/lib/node/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/emoji.css"],
|
|
3
|
+
"sources": ["../../../src/components/EmojiPicker/emoji.css"],
|
|
4
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): Get from TW defs: modal-surface? */\n --background-rgb: #3B3B3F;\n --rgb-background: #3B3B3F;\n\n --font-family: \"Inter Variable\", ui-sans-serif;\n\n /*--font-size: 16px;*/\n /*--color-border-over: rgba(0, 0, 0, 0.1);*/\n /*--color-border: rgba(0, 0, 0, 0.05);*/\n /*--category-icon-size: 24px;*/\n /*--border-radius: 24px;*/\n /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/\n /*--rgb-accent: 255, 105, 180;*/\n /*--rgb-color: 102, 51, 153;*/\n /*--rgb-input: 255, 235, 235;*/\n /*--shadow: 5px 5px 15px -8px rebeccapurple;*/\n\n /*height: 50vh;*/\n /*min-height: 400px;*/\n /*max-height: 800px;*/\n}\n"],
|
|
5
5
|
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAElB,iBAAe,gBAAgB,EAAE;AAgBnC;",
|
|
6
6
|
"names": []
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":19562,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts":{"bytes":534,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytes":12553,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytes":536,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx":{"bytes":4241,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts":{"bytes":522,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx":{"bytes":7605,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytes":528,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":809,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts","kind":"import-statement","original":"./HuePicker"},{"path":"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts","kind":"import-statement","original":"./IconPicker"},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-pickers/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22984},"packages/ui/react-ui-pickers/dist/lib/node/index.cjs":{"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","PickerButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/node/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytesInOutput":5220},"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx":{"bytesInOutput":917},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":3343},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx":{"bytesInOutput":2016},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":12004},"packages/ui/react-ui-pickers/dist/lib/node/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1029},"packages/ui/react-ui-pickers/dist/lib/node/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":256}}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/emoji.css"],
|
|
3
|
+
"sources": ["../../../src/components/EmojiPicker/emoji.css"],
|
|
4
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): Get from TW defs: modal-surface? */\n --background-rgb: #3B3B3F;\n --rgb-background: #3B3B3F;\n\n --font-family: \"Inter Variable\", ui-sans-serif;\n\n /*--font-size: 16px;*/\n /*--color-border-over: rgba(0, 0, 0, 0.1);*/\n /*--color-border: rgba(0, 0, 0, 0.05);*/\n /*--category-icon-size: 24px;*/\n /*--border-radius: 24px;*/\n /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/\n /*--rgb-accent: 255, 105, 180;*/\n /*--rgb-color: 102, 51, 153;*/\n /*--rgb-input: 255, 235, 235;*/\n /*--shadow: 5px 5px 15px -8px rebeccapurple;*/\n\n /*height: 50vh;*/\n /*min-height: 400px;*/\n /*max-height: 800px;*/\n}\n"],
|
|
5
5
|
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAElB,iBAAe,gBAAgB,EAAE;AAgBnC;",
|
|
6
6
|
"names": []
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
|
-
// packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx
|
|
3
|
+
// packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx
|
|
4
4
|
import emojiData from "@emoji-mart/data";
|
|
5
5
|
import EmojiMart from "@emoji-mart/react";
|
|
6
6
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
7
7
|
import React, { useRef, useState } from "react";
|
|
8
|
-
import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation, Icon } from "@dxos/react-ui";
|
|
9
|
-
var EmojiPickerToolbarButton = ({
|
|
8
|
+
import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation, Icon, ButtonGroup } from "@dxos/react-ui";
|
|
9
|
+
var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
|
|
10
10
|
const { t } = useTranslation("os");
|
|
11
11
|
const { themeMode } = useThemeContext();
|
|
12
12
|
const [_emojiValue, setEmojiValue] = useControllableState({
|
|
@@ -73,7 +73,7 @@ var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji,
|
|
|
73
73
|
theme: themeMode
|
|
74
74
|
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null)))));
|
|
75
75
|
};
|
|
76
|
-
var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
|
|
76
|
+
var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
|
|
77
77
|
const { t } = useTranslation("os");
|
|
78
78
|
const [isMd] = useMediaQuery("md", {
|
|
79
79
|
ssr: false
|
|
@@ -84,22 +84,22 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
84
84
|
defaultProp: defaultEmoji
|
|
85
85
|
});
|
|
86
86
|
const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
|
|
87
|
-
return /* @__PURE__ */ React.createElement(
|
|
87
|
+
return /* @__PURE__ */ React.createElement(ButtonGroup, {
|
|
88
|
+
classNames
|
|
89
|
+
}, /* @__PURE__ */ React.createElement(Popover.Root, {
|
|
88
90
|
open: emojiPickerOpen,
|
|
89
91
|
onOpenChange: setEmojiPickerOpen
|
|
90
92
|
}, /* @__PURE__ */ React.createElement(Popover.Trigger, {
|
|
91
93
|
asChild: true
|
|
92
94
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
93
|
-
variant:
|
|
94
|
-
classNames: "gap-2 text-2xl plb-1",
|
|
95
|
+
variant: triggerVariant,
|
|
96
|
+
classNames: "grow gap-2 text-2xl plb-1",
|
|
95
97
|
disabled
|
|
96
98
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
97
99
|
className: "sr-only"
|
|
98
|
-
}, t("select emoji label")), /* @__PURE__ */ React.createElement("span", {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
icon: "ph--caret-down--regular",
|
|
102
|
-
size: 4
|
|
100
|
+
}, t("select emoji label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
|
|
101
|
+
icon: "ph--caret-down--bold",
|
|
102
|
+
size: 3
|
|
103
103
|
}))), /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
104
104
|
side: "right",
|
|
105
105
|
sideOffset: isMd ? 0 : -310,
|
|
@@ -123,7 +123,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
123
123
|
}), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
124
124
|
asChild: true
|
|
125
125
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
126
|
-
variant:
|
|
126
|
+
variant: triggerVariant,
|
|
127
127
|
onClick: onClickClear,
|
|
128
128
|
disabled
|
|
129
129
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
@@ -136,17 +136,16 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
136
136
|
}, t("clear label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))));
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
// packages/ui/react-ui-pickers/src/components/HuePicker.tsx
|
|
139
|
+
// packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx
|
|
140
140
|
import React3 from "react";
|
|
141
141
|
import { useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
142
142
|
import { hues } from "@dxos/react-ui-theme";
|
|
143
143
|
|
|
144
|
-
// packages/ui/react-ui-pickers/src/components/
|
|
144
|
+
// packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx
|
|
145
145
|
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
146
146
|
import React2, { useEffect, useRef as useRef2, useState as useState2 } from "react";
|
|
147
|
-
import { DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip as Tooltip2 } from "@dxos/react-ui";
|
|
148
|
-
|
|
149
|
-
var ToolbarPickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset }) => {
|
|
147
|
+
import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip as Tooltip2 } from "@dxos/react-ui";
|
|
148
|
+
var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
|
|
150
149
|
const [value, setValue] = useControllableState2({
|
|
151
150
|
prop: _value,
|
|
152
151
|
defaultProp: _defaultValue,
|
|
@@ -158,6 +157,7 @@ var ToolbarPickerButton = ({ Component, disabled, classNames, defaultValue: _def
|
|
|
158
157
|
const [open, setOpen] = useState2(false);
|
|
159
158
|
const suppressNextTooltip = useRef2(false);
|
|
160
159
|
const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
|
|
160
|
+
const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
|
|
161
161
|
return /* @__PURE__ */ React2.createElement(Tooltip2.Root, {
|
|
162
162
|
open: triggerTooltipOpen,
|
|
163
163
|
onOpenChange: (nextOpen) => {
|
|
@@ -179,45 +179,53 @@ var ToolbarPickerButton = ({ Component, disabled, classNames, defaultValue: _def
|
|
|
179
179
|
asChild: true
|
|
180
180
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
|
|
181
181
|
asChild: true
|
|
182
|
-
}, /* @__PURE__ */ React2.createElement(
|
|
183
|
-
classNames:
|
|
182
|
+
}, /* @__PURE__ */ React2.createElement(TriggerRoot, {
|
|
183
|
+
classNames: [
|
|
184
|
+
"gap-2 plb-1",
|
|
185
|
+
classNames
|
|
186
|
+
],
|
|
184
187
|
disabled
|
|
185
188
|
}, /* @__PURE__ */ React2.createElement("span", {
|
|
186
189
|
className: "sr-only"
|
|
187
190
|
}, label), value && /* @__PURE__ */ React2.createElement(Component, {
|
|
188
|
-
value
|
|
191
|
+
value,
|
|
192
|
+
iconSize
|
|
189
193
|
}) || /* @__PURE__ */ React2.createElement(Icon2, {
|
|
190
194
|
icon,
|
|
191
|
-
size:
|
|
195
|
+
size: iconSize
|
|
196
|
+
}), /* @__PURE__ */ React2.createElement(Icon2, {
|
|
197
|
+
icon: "ph--caret-down--bold",
|
|
198
|
+
size: 3
|
|
192
199
|
})))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
|
|
193
200
|
side: "bottom"
|
|
194
201
|
}, label, /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
195
202
|
side: "bottom",
|
|
196
203
|
classNames: "!is-min"
|
|
197
204
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
198
|
-
classNames: "grid grid-cols-[repeat(6,
|
|
205
|
+
classNames: "grid grid-cols-[repeat(6,min-content)]"
|
|
199
206
|
}, values.map((_value2) => {
|
|
200
207
|
return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
201
208
|
key: _value2,
|
|
202
209
|
checked: _value2 === value,
|
|
203
210
|
onCheckedChange: () => setValue(_value2),
|
|
204
|
-
classNames: "p-
|
|
211
|
+
classNames: "p-1 items-center justify-center aspect-square"
|
|
205
212
|
}, /* @__PURE__ */ React2.createElement(Component, {
|
|
206
|
-
value: _value2
|
|
213
|
+
value: _value2,
|
|
214
|
+
iconSize
|
|
207
215
|
}));
|
|
208
216
|
}), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
|
|
209
217
|
onCheckedChange: () => onReset(),
|
|
210
|
-
classNames: "p-
|
|
218
|
+
classNames: "p-1 items-center justify-center aspect-square"
|
|
211
219
|
}, /* @__PURE__ */ React2.createElement(Icon2, {
|
|
212
220
|
icon: "ph--x--regular",
|
|
213
|
-
size:
|
|
221
|
+
size: iconSize
|
|
214
222
|
}))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))));
|
|
215
223
|
};
|
|
216
224
|
|
|
217
|
-
// packages/ui/react-ui-pickers/src/components/HuePicker.tsx
|
|
225
|
+
// packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx
|
|
218
226
|
var HuePicker = (props) => {
|
|
219
227
|
const { t } = useTranslation2("os");
|
|
220
|
-
return /* @__PURE__ */ React3.createElement(
|
|
228
|
+
return /* @__PURE__ */ React3.createElement(PickerButton, {
|
|
221
229
|
Component: HuePreview,
|
|
222
230
|
label: t("select hue label"),
|
|
223
231
|
icon: "ph--palette--regular",
|
|
@@ -230,9 +238,8 @@ var HuePreview = ({ value }) => {
|
|
|
230
238
|
return /* @__PURE__ */ React3.createElement("div", {
|
|
231
239
|
className: "flex p-[2px] justify-center items-center"
|
|
232
240
|
}, /* @__PURE__ */ React3.createElement("svg", {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
viewBox: `0 0 ${size} ${size}`
|
|
241
|
+
viewBox: `0 0 ${size} ${size}`,
|
|
242
|
+
className: "is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]"
|
|
236
243
|
}, /* @__PURE__ */ React3.createElement("rect", {
|
|
237
244
|
x: 0,
|
|
238
245
|
y: 0,
|
|
@@ -243,12 +250,12 @@ var HuePreview = ({ value }) => {
|
|
|
243
250
|
})));
|
|
244
251
|
};
|
|
245
252
|
|
|
246
|
-
// packages/ui/react-ui-pickers/src/components/IconPicker.tsx
|
|
253
|
+
// packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx
|
|
247
254
|
import React4 from "react";
|
|
248
255
|
import { Icon as Icon3, useTranslation as useTranslation3 } from "@dxos/react-ui";
|
|
249
256
|
var IconPicker = ({ ...props }) => {
|
|
250
257
|
const { t } = useTranslation3("os");
|
|
251
|
-
return /* @__PURE__ */ React4.createElement(
|
|
258
|
+
return /* @__PURE__ */ React4.createElement(PickerButton, {
|
|
252
259
|
Component: IconPreview,
|
|
253
260
|
label: t("select icon label"),
|
|
254
261
|
icon: "ph--selection--regular",
|
|
@@ -256,10 +263,10 @@ var IconPicker = ({ ...props }) => {
|
|
|
256
263
|
...props
|
|
257
264
|
});
|
|
258
265
|
};
|
|
259
|
-
var IconPreview = ({ value }) => {
|
|
266
|
+
var IconPreview = ({ value, iconSize = 5 }) => {
|
|
260
267
|
return /* @__PURE__ */ React4.createElement(Icon3, {
|
|
261
268
|
icon: `ph--${value}--regular`,
|
|
262
|
-
size:
|
|
269
|
+
size: iconSize
|
|
263
270
|
});
|
|
264
271
|
};
|
|
265
272
|
var icons = [
|
|
@@ -318,6 +325,6 @@ export {
|
|
|
318
325
|
EmojiPickerToolbarButton,
|
|
319
326
|
HuePicker,
|
|
320
327
|
IconPicker,
|
|
321
|
-
|
|
328
|
+
PickerButton
|
|
322
329
|
};
|
|
323
330
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.tsx", "../../../src/components/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n classNames,\n}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n * @deprecated\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span className='grow pis-14'>{emojiValue}</span>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <ToolbarPickerButton\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 width={size} height={size} viewBox={`0 0 ${size} ${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, useRef, useState } from 'react';\n\nimport { DropdownMenu, Icon, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type ToolbarPickerProps = {\n Component: FC<{ value: string }>;\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};\n\nexport const ToolbarPickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n}: ThemedClassName<ToolbarPickerProps>) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} />) || <Icon icon={icon} size={5} />}\n </Toolbar.Button>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {label}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,2rem)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-px items-center justify-center aspect-square'}\n >\n <Component value={_value} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-px items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={6} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <ToolbarPickerButton\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 }: { value: string }) => {\n return <Icon icon={`ph--${value}--regular`} size={5} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
-
"mappings": ";;;AAIA,OAAOA,eAAe;AACtB,OAAOC,eAAe;AACtB,SAASC,4BAA4B;AACrC,OAAOC,SAASC,QAAQC,gBAAgB;AAExC,SACEC,QAEAC,SAEAC,SACAC,SACAC,eACAC,iBACAC,gBACAC,
|
|
6
|
-
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "
|
|
3
|
+
"sources": ["../../../src/components/EmojiPicker/EmojiPicker.tsx", "../../../src/components/HuePicker/HuePicker.tsx", "../../../src/components/PickerButton/PickerButton.tsx", "../../../src/components/IconPicker/IconPicker.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n ButtonGroup,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\n}>;\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: Omit<EmojiPickerProps, 'onClickClear'>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant={triggerVariant} onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg\n viewBox={`0 0 ${size} ${size}`}\n className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n >\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {label}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} iconSize={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "ButtonGroup", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "Popover", "Trigger", "asChild", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "side", "Arrow", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "ssr", "emojiValue", "ButtonGroup", "variant", "sideOffset", "onClick", "React", "useTranslation", "hues", "useControllableState", "React", "useEffect", "useRef", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "PickerButton", "Component", "disabled", "classNames", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "icon", "onChange", "onReset", "rootVariant", "iconSize", "setValue", "useControllableState", "prop", "defaultProp", "useEffect", "open", "setOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "TriggerRoot", "Toolbar", "Button", "React", "Tooltip", "Root", "onOpenChange", "nextOpen", "current", "DropdownMenu", "modal", "Trigger", "asChild", "span", "className", "Icon", "size", "Portal", "Content", "side", "Arrow", "Viewport", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "HuePicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "className", "svg", "viewBox", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "React", "Icon", "useTranslation", "IconPicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "iconSize", "Icon", "size", "icons", "map", "match"]
|
|
7
7
|
}
|