@dxos/react-ui-pickers 0.11.0 → 0.12.0-next-2be9f24c465d98f4bd186aa03ece788902e6c17a

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.
Files changed (15) hide show
  1. package/dist/lib/chunk-EmojiMartPanel.mjs +22 -0
  2. package/dist/lib/chunk-EmojiMartPanel.mjs.map +1 -0
  3. package/dist/lib/index.mjs +25 -25
  4. package/dist/lib/index.mjs.map +1 -1
  5. package/dist/types/src/components/EmojiPicker/EmojiMartPanel.d.ts +15 -0
  6. package/dist/types/src/components/EmojiPicker/EmojiMartPanel.d.ts.map +1 -0
  7. package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map +1 -1
  8. package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts +4 -3
  9. package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts.map +1 -1
  10. package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts +4 -3
  11. package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts.map +1 -1
  12. package/dist/types/tsconfig.tsbuildinfo +1 -1
  13. package/package.json +8 -11
  14. package/src/components/EmojiPicker/EmojiMartPanel.tsx +31 -0
  15. package/src/components/EmojiPicker/EmojiPicker.tsx +44 -39
package/dist/lib/chunk-EmojiMartPanel.mjs ADDED
@@ -0,0 +1,22 @@
1
+ import "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import emojiData from "@emoji-mart/data";
4
+ import EmojiMart from "@emoji-mart/react";
5
+ //#region src/components/EmojiPicker/EmojiMartPanel.tsx
6
+ /**
7
+ * The emoji-mart picker and its emoji database (~480 KB), isolated in its own module so the
8
+ * default export can be lazily imported — the database is otherwise resident in every tab via
9
+ * the pickers barrel, for a panel that only renders once a user opens it.
10
+ */
11
+ var EmojiMartPanel = ({ onEmojiSelect, themeMode }) => /* @__PURE__ */ jsx(EmojiMart, {
12
+ data: emojiData,
13
+ onEmojiSelect,
14
+ autoFocus: true,
15
+ maxFrequentRows: 0,
16
+ noCountryFlags: true,
17
+ theme: themeMode
18
+ });
19
+ //#endregion
20
+ export { EmojiMartPanel as default };
21
+
22
+ //# sourceMappingURL=chunk-EmojiMartPanel.mjs.map
package/dist/lib/chunk-EmojiMartPanel.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chunk-EmojiMartPanel.mjs","names":[],"sources":["../../src/components/EmojiPicker/EmojiMartPanel.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport React from 'react';\n\nexport type EmojiMartPanelProps = {\n onEmojiSelect: (emoji: { native?: string }) => void;\n themeMode?: string;\n};\n\n/**\n * The emoji-mart picker and its emoji database (~480 KB), isolated in its own module so the\n * default export can be lazily imported — the database is otherwise resident in every tab via\n * the pickers barrel, for a panel that only renders once a user opens it.\n */\nconst EmojiMartPanel = ({ onEmojiSelect, themeMode }: EmojiMartPanelProps) => (\n // Options reference: https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props.\n <EmojiMart\n data={emojiData}\n onEmojiSelect={onEmojiSelect}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n);\n\nexport default EmojiMartPanel;\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,kBAAkB,EAAE,eAAe,gBAEvC,oBAAC,WAAD;CACE,MAAM;CACS;CACf,WAAW;CACX,iBAAiB;CACjB,gBAAgB;CAChB,OAAO;AACR,CAAA"}
package/dist/lib/index.mjs CHANGED
@@ -1,13 +1,16 @@
1
- import emojiData from "@emoji-mart/data";
2
- import EmojiMart from "@emoji-mart/react";
3
1
  import { useControllableState } from "@radix-ui/react-use-controllable-state";
4
- import { useEffect, useState } from "react";
2
+ import { Suspense, lazy, useEffect, useState } from "react";
5
3
  import { Button, ButtonGroup, DropdownMenu, Icon, IconButton, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
6
4
  import { getSize, osTranslations } from "@dxos/ui-theme";
7
5
  import { jsx, jsxs } from "react/jsx-runtime";
8
6
  import { hues, iconValues } from "@dxos/ui-types";
9
7
  //#region src/components/EmojiPicker/EmojiPicker.tsx
10
8
  /**
9
+ * emoji-mart plus its emoji database is ~480 KB; loading it with the barrel put it in every
10
+ * tab's boot graph, so the panel loads on first open instead.
11
+ */
12
+ var EmojiMartPanel = lazy(() => import("./chunk-EmojiMartPanel.mjs"));
13
+ /**
11
14
  * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
12
15
  */
13
16
  var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
@@ -41,18 +44,17 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
41
44
  setEmojiPickerOpen(false);
42
45
  }
43
46
  },
44
- children: [/* @__PURE__ */ jsx(EmojiMart, {
45
- data: emojiData,
46
- onEmojiSelect: ({ native }) => {
47
- if (native) {
48
- setEmojiValue(native);
49
- setEmojiPickerOpen(false);
50
- }
51
- },
52
- autoFocus: true,
53
- maxFrequentRows: 0,
54
- noCountryFlags: true,
55
- theme: themeMode
47
+ children: [/* @__PURE__ */ jsx(Suspense, {
48
+ fallback: null,
49
+ children: /* @__PURE__ */ jsx(EmojiMartPanel, {
50
+ onEmojiSelect: ({ native }) => {
51
+ if (native) {
52
+ setEmojiValue(native);
53
+ setEmojiPickerOpen(false);
54
+ }
55
+ },
56
+ themeMode
57
+ })
56
58
  }), /* @__PURE__ */ jsx(Popover.Arrow, {})]
57
59
  }) })]
58
60
  });
@@ -78,7 +80,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
78
80
  asChild: true,
79
81
  children: /* @__PURE__ */ jsxs(Button, {
80
82
  variant: triggerVariant,
81
- classNames: "grow gap-2 text-2xl py-1",
83
+ classNames: "grow gap-2 text-2xl",
82
84
  disabled,
83
85
  children: [
84
86
  /* @__PURE__ */ jsx("span", {
@@ -92,28 +94,26 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
92
94
  })
93
95
  ]
94
96
  })
95
- }), /* @__PURE__ */ jsxs(Popover.Content, {
97
+ }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
96
98
  side: "right",
97
99
  sideOffset: isMd ? 0 : -310,
100
+ collisionPadding: 8,
98
101
  onKeyDownCapture: (event) => {
99
102
  if (event.key === "Escape") {
100
103
  event.stopPropagation();
101
104
  setEmojiPickerOpen(false);
102
105
  }
103
106
  },
104
- children: [/* @__PURE__ */ jsx(EmojiMart, {
105
- data: emojiData,
106
- onEmojiSelect: ({ native }) => {
107
+ children: [/* @__PURE__ */ jsx(Suspense, {
108
+ fallback: null,
109
+ children: /* @__PURE__ */ jsx(EmojiMartPanel, { onEmojiSelect: ({ native }) => {
107
110
  if (native) {
108
111
  setEmojiValue(native);
109
112
  setEmojiPickerOpen(false);
110
113
  }
111
- },
112
- autoFocus: true,
113
- maxFrequentRows: 0,
114
- noCountryFlags: true
114
+ } })
115
115
  }), /* @__PURE__ */ jsx(Popover.Arrow, {})]
116
- })]
116
+ }) })]
117
117
  }), /* @__PURE__ */ jsx(IconButton, {
118
118
  icon: "ph--arrow-counter-clockwise--regular",
119
119
  iconOnly: true,
package/dist/lib/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/EmojiPicker/EmojiPicker.tsx","../../src/components/PickerButton/PickerButton.tsx","../../src/components/HuePicker/HuePicker.tsx","../../src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport './emoji.css';\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useState } from 'react';\n\nimport {\n Button,\n ButtonGroup,\n type ButtonProps,\n Icon,\n IconButton,\n Popover,\n type ThemedClassName,\n Toolbar,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n} from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\n}>;\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: Omit<EmojiPickerProps, 'onClickClear'>) => {\n const { t } = useTranslation(osTranslations);\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n }}\n >\n <Popover.Trigger asChild>\n <Toolbar.IconButton\n icon='ph--user-circle--regular'\n label={t('select-emoji.label')}\n iconOnly\n tooltipSide='bottom'\n disabled={disabled}\n />\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: EmojiPickerProps) => {\n const { t } = useTranslation(osTranslations);\n const [isMd] = useMediaQuery('md');\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl py-1' disabled={disabled}>\n <span className='sr-only'>{t('select-emoji.label')}</span>\n <span>{emojiValue}</span>\n <Icon icon='ph--caret-down--bold' size={3} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <IconButton\n icon='ph--arrow-counter-clockwise--regular'\n iconOnly\n label={t('clear.label')}\n tooltipSide='right'\n variant={triggerVariant}\n onClick={onClickClear}\n disabled={disabled}\n />\n </ButtonGroup>\n );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; size?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: readonly string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: defaultValueProp,\n value: valueProp,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: valueProp,\n defaultProp: defaultValueProp,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(valueProp), [valueProp]);\n\n const [open, setOpen] = useState<boolean>(false);\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <DropdownMenu.Root modal={false} open={open} onOpenChange={setOpen}>\n <Tooltip.Trigger asChild content={label} side='bottom'>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 py-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} size={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!w-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} size={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { getSize, osTranslations } from '@dxos/ui-theme';\nimport { hues } from '@dxos/ui-types';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation(osTranslations);\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select-hue.label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value, size = 5 }: { value: string; size?: IconProps['size'] }) => {\n return (\n <div className='flex justify-center items-center'>\n <svg viewBox={`0 0 ${size} ${size}`} className={getSize(size)}>\n <rect x={0} y={0} width={size} height={size} fill={`var(--color-${value}-surface)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\nimport { iconValues } from '@dxos/ui-types';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'rootVariant' | 'iconSize' | 'defaultValue' | 'value' | 'onChange' | 'onReset'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation(osTranslations);\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select-icon.label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, size }: { value: string; size?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={size} />;\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/EmojiPicker/EmojiPicker.tsx","../../src/components/PickerButton/PickerButton.tsx","../../src/components/HuePicker/HuePicker.tsx","../../src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport './emoji.css';\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { Suspense, lazy, useState } from 'react';\n\nimport {\n Button,\n ButtonGroup,\n type ButtonProps,\n Icon,\n IconButton,\n Popover,\n type ThemedClassName,\n Toolbar,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n} from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\n\n/**\n * emoji-mart plus its emoji database is ~480 KB; loading it with the barrel put it in every\n * tab's boot graph, so the panel loads on first open instead.\n */\nconst EmojiMartPanel = lazy(() => import('./EmojiMartPanel'));\n\nexport type EmojiPickerProps = ThemedClassName<{\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n triggerVariant?: ButtonProps['variant'];\n}>;\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n classNames,\n emoji,\n disabled,\n defaultEmoji,\n onChangeEmoji,\n}: Omit<EmojiPickerProps, 'onClickClear'>) => {\n const { t } = useTranslation(osTranslations);\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n }}\n >\n <Popover.Trigger asChild>\n <Toolbar.IconButton\n icon='ph--user-circle--regular'\n label={t('select-emoji.label')}\n iconOnly\n tooltipSide='bottom'\n disabled={disabled}\n />\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <Suspense fallback={null}>\n <EmojiMartPanel\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n themeMode={themeMode}\n />\n </Suspense>\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n onClickClear,\n triggerVariant = 'ghost',\n classNames,\n}: EmojiPickerProps) => {\n const { t } = useTranslation(osTranslations);\n const [isMd] = useMediaQuery('md');\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <ButtonGroup classNames={classNames}>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant={triggerVariant} classNames='grow gap-2 text-2xl' 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 {/* Portalled, like `EmojiPickerToolbarButton` above and `PickerButton` (which is why the hue\n picker never had this problem): rendered in place, a 300px panel is clipped by the first\n scrolling ancestor — in the profile page, the settings panel's own overflow. */}\n <Popover.Portal>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n collisionPadding={8}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <Suspense fallback={null}>\n <EmojiMartPanel\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n />\n </Suspense>\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n <IconButton\n icon='ph--arrow-counter-clockwise--regular'\n iconOnly\n label={t('clear.label')}\n tooltipSide='right'\n variant={triggerVariant}\n onClick={onClickClear}\n disabled={disabled}\n />\n </ButtonGroup>\n );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n Component: FC<{ value: string; size?: IconProps['size'] }>;\n label: string;\n icon: string;\n values: readonly string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n rootVariant?: 'button' | 'toolbar-button';\n iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: defaultValueProp,\n value: valueProp,\n values,\n label,\n icon,\n onChange,\n onReset,\n rootVariant = 'button',\n iconSize = 5,\n}: PickerButtonProps) => {\n const [value, setValue] = useControllableState<string>({\n prop: valueProp,\n defaultProp: defaultValueProp,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(valueProp), [valueProp]);\n\n const [open, setOpen] = useState<boolean>(false);\n const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n return (\n <DropdownMenu.Root modal={false} open={open} onOpenChange={setOpen}>\n <Tooltip.Trigger asChild content={label} side='bottom'>\n <DropdownMenu.Trigger asChild>\n <TriggerRoot classNames={['gap-2 py-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} size={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n <Icon icon='ph--caret-down--bold' size={3} />\n </TriggerRoot>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!w-min'>\n <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Component value={_value} size={iconSize} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'p-1 items-center justify-center aspect-square'}\n >\n <Icon icon='ph--x--regular' size={iconSize} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { getSize, osTranslations } from '@dxos/ui-theme';\nimport { hues } from '@dxos/ui-types';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation(osTranslations);\n\n return (\n <PickerButton\n Component={HuePreview}\n label={t('select-hue.label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value, size = 5 }: { value: string; size?: IconProps['size'] }) => {\n return (\n <div className='flex justify-center items-center'>\n <svg viewBox={`0 0 ${size} ${size}`} className={getSize(size)}>\n <rect x={0} y={0} width={size} height={size} fill={`var(--color-${value}-surface)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\nimport { iconValues } from '@dxos/ui-types';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<\n PickerButtonProps,\n 'disabled' | 'rootVariant' | 'iconSize' | 'defaultValue' | 'value' | 'onChange' | 'onReset'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation(osTranslations);\n\n return (\n <PickerButton\n Component={IconPreview}\n label={t('select-icon.label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value, size }: { value: string; size?: IconProps['size'] }) => {\n return <Icon icon={`ph--${value}--regular`} size={size} />;\n};\n"],"mappings":"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"}
package/dist/types/src/components/EmojiPicker/EmojiMartPanel.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ export type EmojiMartPanelProps = {
3
+ onEmojiSelect: (emoji: {
4
+ native?: string;
5
+ }) => void;
6
+ themeMode?: string;
7
+ };
8
+ /**
9
+ * The emoji-mart picker and its emoji database (~480 KB), isolated in its own module so the
10
+ * default export can be lazily imported — the database is otherwise resident in every tab via
11
+ * the pickers barrel, for a panel that only renders once a user opens it.
12
+ */
13
+ declare const EmojiMartPanel: ({ onEmojiSelect, themeMode }: EmojiMartPanelProps) => React.JSX.Element;
14
+ export default EmojiMartPanel;
15
+ //# sourceMappingURL=EmojiMartPanel.d.ts.map
package/dist/types/src/components/EmojiPicker/EmojiMartPanel.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EmojiMartPanel.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiMartPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,cAAc,iCAAkC,mBAAmB,sBAUxE,CAAC;eAEa,cAAc"}
package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAGL,KAAK,WAAW,EAIhB,KAAK,eAAe,EAKrB,MAAM,gBAAgB,CAAC;AAGxB,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACzC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB,kEAMlC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,sBAyDxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gGAQ1B,gBAAgB,sBA0DlB,CAAC"}
1
+ {"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,OAAO,EAGL,KAAK,WAAW,EAIhB,KAAK,eAAe,EAKrB,MAAM,gBAAgB,CAAC;AASxB,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACzC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB,kEAMlC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,sBAsDxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gGAQ1B,gBAAgB,sBA8DlB,CAAC"}
package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { type StoryObj } from '@storybook/react-vite';
2
2
  import React from 'react';
3
- import { type HuePickerProps } from './HuePicker';
3
+ import { HuePicker, type HuePickerProps } from './HuePicker';
4
+ declare const DefaultStory: (props: HuePickerProps) => React.JSX.Element;
4
5
  declare const meta: {
5
6
  title: string;
6
- component: (props: import("@dxos/ui-types").ThemedClassName<HuePickerProps>) => React.JSX.Element;
7
- render: (props: HuePickerProps) => React.JSX.Element;
7
+ component: typeof HuePicker;
8
+ render: typeof DefaultStory;
8
9
  decorators: import("@storybook/react").Decorator[];
9
10
  };
10
11
  export default meta;
package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"HuePicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/HuePicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAkB7D,QAAA,MAAM,IAAI;;;oBAhBmB,cAAc;;CAqBT,CAAC;eAEpB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}
1
+ {"version":3,"file":"HuePicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/HuePicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7D,QAAA,MAAM,YAAY,UAAW,cAAc,sBAc1C,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;CAKwB,CAAC;eAEpB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}
package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { type StoryObj } from '@storybook/react-vite';
2
2
  import React from 'react';
3
- import { type IconPickerProps } from './IconPicker';
3
+ import { IconPicker, type IconPickerProps } from './IconPicker';
4
+ declare const DefaultStory: (props: IconPickerProps) => React.JSX.Element;
4
5
  declare const meta: {
5
6
  title: string;
6
- component: ({ ...props }: import("@dxos/ui-types").ThemedClassName<IconPickerProps>) => React.JSX.Element;
7
- render: (props: IconPickerProps) => React.JSX.Element;
7
+ component: typeof IconPicker;
8
+ render: typeof DefaultStory;
8
9
  decorators: import("@storybook/react").Decorator[];
9
10
  };
10
11
  export default meta;
package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAahE,QAAA,MAAM,IAAI;;;oBAXmB,eAAe;;CAgBT,CAAC;eAErB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}
1
+ {"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,QAAA,MAAM,YAAY,UAAW,eAAe,sBAS3C,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;CAKyB,CAAC;eAErB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}