@dxos/react-ui-pickers 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dxos/react-ui-pickers",
-  "version": "0.7.5-labs.c0e040f",
+  "version": "0.7.5-labs.d199c0f",
   "description": "A collection of picker components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -25,8 +26,8 @@
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/util": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-types": "0.7.5-labs.c0e040f"
+    "@dxos/react-ui-types": "0.7.5-labs.d199c0f",
+    "@dxos/util": "0.7.5-labs.d199c0f"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -34,15 +35,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-theme": "0.7.5-labs.c0e040f",
-    "@dxos/storybook-utils": "0.7.5-labs.c0e040f"
+    "@dxos/react-ui-theme": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui": "0.7.5-labs.d199c0f",
+    "@dxos/storybook-utils": "0.7.5-labs.d199c0f"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-theme": "0.7.5-labs.c0e040f"
+    "@dxos/react-ui": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-theme": "0.7.5-labs.d199c0f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/EmojiPicker.stories.tsx

@@ -53,7 +53,10 @@ export const Block: StoryObj<EmojiPickerProps> = {
 
 const meta: Meta = {
   title: 'ui/react-ui-pickers/EmojiPicker',
-  decorators: [withTheme, withLayout({ fullscreen: false, tooltips: true })],
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'centered',
+  },
 };
 
 export default meta;

package/src/components/EmojiPicker.tsx

@@ -121,6 +121,7 @@ export const EmojiPickerToolbarButton = ({
 
 /**
  * A button for picking an emoji alongside a button for unsetting it.
+ * @deprecated
  */
 export const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {
   const { t } = useTranslation('os');

package/src/components/HuePicker.stories.tsx

@@ -10,46 +10,31 @@ import React, { useState } from 'react';
 import { Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { HuePickerBlock, HuePickerToolbarButton, type HuePickerProps } from './HuePicker';
+import { HuePicker, type HuePickerProps } from './HuePicker';
 
 const ToolbarStory = (props: HuePickerProps) => {
-  const [hue, setHue] = useState<string>(props.defaultHue ?? 'red');
+  const [hue, setHue] = useState<string | undefined>(props.defaultValue);
 
   return (
     <Toolbar.Root>
-      <HuePickerToolbarButton {...props} hue={hue} onChangeHue={setHue} />
+      <HuePicker {...props} value={hue} onChange={setHue} onReset={() => setHue(undefined)} />
     </Toolbar.Root>
   );
 };
 
-const BlockStory = (props: HuePickerProps) => {
-  const [hue, setHue] = useState<string>(props.defaultHue ?? 'red');
-
-  return (
-    <div className='flex gap-2'>
-      <HuePickerBlock
-        {...props}
-        hue={hue}
-        onChangeHue={setHue}
-        onClickClear={() => setHue(props.defaultHue ?? 'red')}
-      />
-    </div>
-  );
-};
-
-export const ToolbarButtonStory: StoryObj<HuePickerProps> = {
-  render: ToolbarStory,
-  args: { defaultHue: 'red' },
-};
-
-export const BlockPickerStory: StoryObj<HuePickerProps> = {
-  render: BlockStory,
-  args: { defaultHue: 'red' },
-};
-
 const meta: Meta = {
   title: 'ui/react-ui-pickers/HuePicker',
-  decorators: [withTheme, withLayout({ fullscreen: false, tooltips: true })],
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'centered',
+  },
 };
 
 export default meta;
+
+export const Default: StoryObj<HuePickerProps> = {
+  render: ToolbarStory,
+  args: {
+    defaultValue: 'red',
+  },
+};

package/src/components/HuePicker.tsx

@@ -2,190 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { useRef, useState } from 'react';
+import React from 'react';
 
-import {
-  Button,
-  type ButtonProps,
-  DropdownMenu,
-  Icon,
-  type ThemedClassName,
-  Toolbar,
-  Tooltip,
-  useTranslation,
-} from '@dxos/react-ui';
-import { hues, mx } from '@dxos/react-ui-theme';
+import { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { hues } from '@dxos/react-ui-theme';
 
-const HuePreview = ({ hue }: { hue: string }) => {
-  const size = 20;
-  return (
-    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-      <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${hue}Surface)`} />
-      <text x='10' y='15' textAnchor='middle' fontSize='14' fontWeight='bold' fill={`var(--dx-${hue}SurfaceText)`}>
-        T
-      </text>
-    </svg>
-  );
-};
+import { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';
 
 export type HuePickerProps = {
   disabled?: boolean;
-  defaultHue?: string;
-  hue?: string;
-  onChangeHue?: (nextHue: string) => void;
-  onClickClear?: ButtonProps['onClick'];
-};
+  defaultValue?: string;
+  value?: string;
+  onChange?: (nextHue: string) => void;
+  onReset?: ButtonProps['onClick'];
+} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;
 
-/**
- * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.
- */
-export const HuePickerToolbarButton = ({
-  disabled,
-  hue,
-  onChangeHue,
-  classNames,
-  defaultHue,
-}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {
+export const HuePicker = (props: ThemedClassName<HuePickerProps>) => {
   const { t } = useTranslation('os');
 
-  const [hueValue, setHueValue] = useControllableState<string>({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue,
-  });
-
-  const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);
-
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
-
   return (
-    <Tooltip.Root
-      open={triggerTooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (suppressNextTooltip.current) {
-          setTriggerTooltipOpen(false);
-          suppressNextTooltip.current = false;
-        } else {
-          setTriggerTooltipOpen(nextOpen);
-        }
-      }}
-    >
-      <DropdownMenu.Root
-        modal={false}
-        open={huePickerOpen}
-        onOpenChange={(nextOpen) => {
-          setHuePickerOpen(nextOpen);
-          suppressNextTooltip.current = true;
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <DropdownMenu.Trigger asChild>
-            <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>
-              <span className='sr-only'>{t('select hue label')}</span>
-              <Icon icon='ph--palette--regular' size={5} />
-            </Toolbar.Button>
-          </DropdownMenu.Trigger>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content side='bottom'>
-            {t('select hue label')}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content side='bottom' classNames='!w-40'>
-            <DropdownMenu.Viewport classNames='grid grid-cols-6'>
-              {hues.map((hue) => {
-                return (
-                  <DropdownMenu.CheckboxItem
-                    key={hue}
-                    checked={hue === hueValue}
-                    onCheckedChange={() => setHueValue(hue)}
-                    classNames={'px-0 py-2 items-center justify-center'}
-                  >
-                    <HuePreview hue={hue} />
-                  </DropdownMenu.CheckboxItem>
-                );
-              })}
-            </DropdownMenu.Viewport>
-            <DropdownMenu.Arrow />
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
-    </Tooltip.Root>
+    <ToolbarPickerButton
+      Component={HuePreview}
+      label={t('select hue label')}
+      icon='ph--palette--regular'
+      values={hues}
+      {...props}
+    />
   );
 };
 
-/**
- * A button for picking hue alongside a button for unsetting it.
- */
-export const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {
-  const { t } = useTranslation('os');
-
-  const [hueValue, setHueValue] = useControllableState<string>({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue,
-  });
-
+const HuePreview = ({ value }: { value: string }) => {
+  const size = 16;
   return (
-    <>
-      <DropdownMenu.Root modal={false}>
-        <DropdownMenu.Trigger asChild>
-          <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>
-            <span className='sr-only'>{t('select hue label')}</span>
-            <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>
-              {hue ? (
-                <>
-                  <HuePreview hue={hueValue!} />
-                  <span>{t(`${hueValue} label`)}</span>
-                </>
-              ) : (
-                <span>{t('select a hue label')}</span>
-              )}
-            </div>
-            <Icon icon='ph--caret-down--regular' size={4} />
-          </Button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content side='right'>
-            <DropdownMenu.Viewport>
-              {hues.map((hue) => {
-                return (
-                  <DropdownMenu.CheckboxItem
-                    key={hue}
-                    checked={hue === hueValue}
-                    onCheckedChange={() => setHueValue(hue)}
-                  >
-                    <HuePreview hue={hue} />
-                    <span className='grow'>{t(`${hue} label`)}</span>
-                    <DropdownMenu.ItemIndicator>
-                      <Icon icon='ph--check--regular' size={4} />
-                    </DropdownMenu.ItemIndicator>
-                  </DropdownMenu.CheckboxItem>
-                );
-              })}
-            </DropdownMenu.Viewport>
-            <DropdownMenu.Arrow />
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button variant='ghost' onClick={onClickClear} disabled={disabled}>
-            <span className='sr-only'>{t('clear label')}</span>
-            <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content side='right'>
-            {t('clear label')}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
-    </>
+    <div className='flex p-[2px] justify-center items-center'>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />
+      </svg>
+    </div>
   );
 };

package/src/components/IconPicker.stories.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { IconPicker, type IconPickerProps } from './IconPicker';
+
+const ToolbarStory = (props: IconPickerProps) => {
+  const [icon, setIcon] = useState<string | undefined>(props.value ?? props.defaultValue);
+  console.log(icon);
+
+  return (
+    <Toolbar.Root>
+      <IconPicker {...props} value={icon} onChange={setIcon} onReset={() => setIcon(undefined)} />
+    </Toolbar.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-pickers/IconPicker',
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<IconPickerProps> = {
+  render: ToolbarStory,
+  args: {},
+};

package/src/components/IconPicker.tsx

@@ -0,0 +1,92 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type ButtonProps, Icon, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+
+import { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';
+
+export type IconPickerProps = {
+  disabled?: boolean;
+  defaultValue?: string;
+  value?: string;
+  onChange?: (nextHue: string) => void;
+  onReset?: ButtonProps['onClick'];
+} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;
+
+export const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {
+  const { t } = useTranslation('os');
+
+  return (
+    <ToolbarPickerButton
+      Component={IconPreview}
+      label={t('select icon label')}
+      icon='ph--selection--regular'
+      values={iconValues}
+      {...props}
+    />
+  );
+};
+
+const IconPreview = ({ value }: { value: string }) => {
+  return <Icon icon={`ph--${value}--regular`} size={5} />;
+};
+
+/**
+ * https://phosphoricons.com
+ * NOTE: Select icons that we are unlikely to use for the UI.
+ */
+const icons = [
+  'ph--air-traffic-control--regular',
+  'ph--asterisk--regular',
+  'ph--atom--regular',
+  'ph--basketball--regular',
+  'ph--butterfly--regular',
+  'ph--cactus--regular',
+  'ph--cake--regular',
+  'ph--calendar-dots--regular',
+  'ph--campfire--regular',
+  'ph--command--regular',
+  'ph--confetti--regular',
+  'ph--detective--regular',
+  'ph--disco-ball--regular',
+  'ph--dna--regular',
+  'ph--factory--regular',
+  'ph--flag-banner-fold--regular',
+  'ph--flask--regular',
+  'ph--flower-lotus--regular',
+  'ph--flying-saucer--regular',
+  'ph--game-controller--regular',
+  'ph--gavel--regular',
+  'ph--gift--regular',
+  'ph--guitar--regular',
+  'ph--hamburger--regular',
+  'ph--handshake--regular',
+  'ph--heart--regular',
+  'ph--lightbulb--regular',
+  'ph--lock--regular',
+  'ph--martini--regular',
+  'ph--medal-military--regular',
+  'ph--moped-front--regular',
+  'ph--office-chair--regular',
+  'ph--paint-brush-household--regular',
+  'ph--peace--regular',
+  'ph--person-simple-hike--regular',
+  'ph--piggy-bank--regular',
+  'ph--potted-plant--regular',
+  'ph--radioactive--regular',
+  'ph--rocket-launch--regular',
+  'ph--shield-star--regular',
+  'ph--shopping-cart--regular',
+  'ph--stethoscope--regular',
+  'ph--student--regular',
+  'ph--sun--regular',
+  'ph--tote--regular',
+  'ph--tree--regular',
+  'ph--users-three--regular',
+  'ph--yin-yang--regular',
+];
+
+const iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);

package/src/components/ToolbarPicker.tsx

@@ -0,0 +1,112 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type FC, useEffect, useRef, useState } from 'react';
+
+import { DropdownMenu, Icon, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type ToolbarPickerProps = {
+  Component: FC<{ value: string }>;
+  label: string;
+  icon: string;
+  values: string[];
+  disabled?: boolean;
+  defaultValue?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  onReset?: () => void;
+};
+
+export const ToolbarPickerButton = ({
+  Component,
+  disabled,
+  classNames,
+  defaultValue: _defaultValue,
+  value: _value,
+  values,
+  label,
+  icon,
+  onChange,
+  onReset,
+}: ThemedClassName<ToolbarPickerProps>) => {
+  const [value, setValue] = useControllableState<string>({
+    prop: _value,
+    defaultProp: _defaultValue,
+    onChange,
+  });
+  // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.
+  useEffect(() => setValue(_value), [_value]);
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+
+  return (
+    <Tooltip.Root
+      open={triggerTooltipOpen}
+      onOpenChange={(nextOpen) => {
+        if (suppressNextTooltip.current) {
+          setTriggerTooltipOpen(false);
+          suppressNextTooltip.current = false;
+        } else {
+          setTriggerTooltipOpen(nextOpen);
+        }
+      }}
+    >
+      <DropdownMenu.Root
+        modal={false}
+        open={open}
+        onOpenChange={(nextOpen) => {
+          setOpen(nextOpen);
+          suppressNextTooltip.current = true;
+        }}
+      >
+        <Tooltip.Trigger asChild>
+          <DropdownMenu.Trigger asChild>
+            <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>
+              <span className='sr-only'>{label}</span>
+              {(value && <Component value={value} />) || <Icon icon={icon} size={5} />}
+            </Toolbar.Button>
+          </DropdownMenu.Trigger>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content side='bottom'>
+            {label}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content side='bottom' classNames='!w-40'>
+            <DropdownMenu.Viewport classNames='grid grid-cols-6'>
+              {values.map((_value) => {
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={_value}
+                    checked={_value === value}
+                    onCheckedChange={() => setValue(_value)}
+                    classNames={'!p-0 items-center justify-center'}
+                  >
+                    <Component value={_value} />
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+              {onReset && (
+                <DropdownMenu.CheckboxItem
+                  onCheckedChange={() => onReset()}
+                  classNames={'!p-0 items-center justify-center'}
+                >
+                  <Icon icon='ph--x--regular' size={5} />
+                </DropdownMenu.CheckboxItem>
+              )}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </Tooltip.Root>
+  );
+};

package/src/components/index.ts

@@ -4,3 +4,5 @@
 
 export * from './EmojiPicker';
 export * from './HuePicker';
+export * from './IconPicker';
+export * from './ToolbarPicker';