@dxos/react-ui-pickers 0.8.1 → 0.8.2-main.10c050d
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +241 -231
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +239 -229
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +241 -231
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map +1 -1
- package/dist/types/src/components/HuePicker/HuePicker.d.ts.map +1 -1
- package/dist/types/src/components/IconPicker/IconPicker.d.ts.map +1 -1
- package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +10 -9
- package/src/components/EmojiPicker/EmojiPicker.stories.tsx +1 -1
- package/src/components/EmojiPicker/EmojiPicker.tsx +43 -73
- package/src/components/HuePicker/HuePicker.stories.tsx +1 -1
- package/src/components/IconPicker/IconPicker.stories.tsx +1 -1
- package/src/components/PickerButton/PickerButton.tsx +35 -63
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/EmojiPicker.tsx", "../../../src/components/HuePicker/HuePicker.tsx", "../../../src/components/PickerButton/PickerButton.tsx", "../../../src/components/IconPicker/IconPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n ButtonGroup,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\n}>;\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: Omit<EmojiPickerProps, 'onClickClear'>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant={triggerVariant} onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg\n viewBox={`0 0 ${size} ${size}`}\n className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n >\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {label}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} iconSize={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
-
"mappings": "
|
|
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", "
|
|
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 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\n return (\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n }}\n >\n <Tooltip.Trigger asChild content={t('select emoji label')} side='bottom'>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Trigger asChild content={t('clear label')} side='right'>\n <Button variant={triggerVariant} onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n </ButtonGroup>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg\n viewBox={`0 0 ${size} ${size}`}\n className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n >\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <DropdownMenu.Root modal={false} open={open} onOpenChange={setOpen}>\n <Tooltip.Trigger asChild content={label} side='bottom'>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!is-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} iconSize={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n 'ph--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", "React", "Popover", "Root", "open", "onOpenChange", "nextOpen", "Tooltip", "Trigger", "asChild", "content", "side", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "Arrow", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "ssr", "emojiValue", "ButtonGroup", "variant", "sideOffset", "onClick", "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/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":17046,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"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":502,"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":10392,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytes":504,"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":4516,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"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":494,"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":7792,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"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":496,"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":773,"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":474,"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":20039},"packages/ui/react-ui-pickers/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","PickerButton"],"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":4760},"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":1193},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":2912},"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":2272},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":11645},"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}}}
|