@dxos/react-ui-pickers 0.7.5-labs.071a3e2

package/src/components/EmojiPicker.tsx

@@ -0,0 +1,189 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import emojiData from '@emoji-mart/data';
+import EmojiMart from '@emoji-mart/react';
+import { ArrowCounterClockwise, CaretDown, UserCircle } from '@phosphor-icons/react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { useRef, useState } from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  Popover,
+  type ThemedClassName,
+  Toolbar,
+  Tooltip,
+  useMediaQuery,
+  useThemeContext,
+  useTranslation,
+} from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+
+import './emoji.css';
+
+export type EmojiPickerProps = {
+  disabled?: boolean;
+  defaultEmoji?: string;
+  emoji?: string;
+  onChangeEmoji?: (nextEmoji: string) => void;
+  onClickClear?: ButtonProps['onClick'];
+};
+
+/**
+ * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
+ */
+export const EmojiPickerToolbarButton = ({
+  disabled,
+  defaultEmoji,
+  emoji,
+  onChangeEmoji,
+  classNames,
+}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {
+  const { t } = useTranslation('os');
+  const { themeMode } = useThemeContext();
+
+  const [_emojiValue, setEmojiValue] = useControllableState<string>({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji,
+  });
+
+  const [emojiPickerOpen, setEmojiPickerOpen] = 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);
+        }
+      }}
+    >
+      <Popover.Root
+        open={emojiPickerOpen}
+        onOpenChange={(nextOpen) => {
+          setEmojiPickerOpen(nextOpen);
+          suppressNextTooltip.current = true;
+        }}
+      >
+        <Tooltip.Trigger asChild>
+          <Popover.Trigger asChild>
+            <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>
+              <span className='sr-only'>{t('select emoji label')}</span>
+              <UserCircle className={getSize(5)} />
+            </Toolbar.Button>
+          </Popover.Trigger>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content side='bottom'>
+            {t('select emoji label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+        <Popover.Portal>
+          <Popover.Content
+            side='bottom'
+            onKeyDownCapture={(event) => {
+              if (event.key === 'Escape') {
+                event.stopPropagation();
+                setEmojiPickerOpen(false);
+                suppressNextTooltip.current = true;
+              }
+            }}
+          >
+            {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}
+            <EmojiMart
+              data={emojiData}
+              onEmojiSelect={({ native }: { native?: string }) => {
+                if (native) {
+                  setEmojiValue(native);
+                  setEmojiPickerOpen(false);
+                }
+              }}
+              autoFocus={true}
+              maxFrequentRows={0}
+              noCountryFlags={true}
+              theme={themeMode}
+            />
+            <Popover.Arrow />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </Tooltip.Root>
+  );
+};
+
+/**
+ * A button for picking an emoji alongside a button for unsetting it.
+ */
+export const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {
+  const { t } = useTranslation('os');
+  const [isMd] = useMediaQuery('md', { ssr: false });
+
+  const [emojiValue, setEmojiValue] = useControllableState<string>({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji,
+  });
+
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>
+        <Popover.Trigger asChild>
+          <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>
+            <span className='sr-only'>{t('select emoji label')}</span>
+            <span className='grow pis-14'>{emojiValue}</span>
+            <CaretDown className={getSize(4)} />
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content
+          side='right'
+          sideOffset={isMd ? 0 : -310}
+          onKeyDownCapture={(event) => {
+            if (event.key === 'Escape') {
+              event.stopPropagation();
+              setEmojiPickerOpen(false);
+            }
+          }}
+        >
+          <EmojiMart
+            data={emojiData}
+            onEmojiSelect={({ native }: { native?: string }) => {
+              if (native) {
+                setEmojiValue(native);
+                setEmojiPickerOpen(false);
+              }
+            }}
+            autoFocus={true}
+            maxFrequentRows={0}
+            noCountryFlags={true}
+          />
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button variant='ghost' onClick={onClickClear} disabled={disabled}>
+            <span className='sr-only'>{t('clear label')}</span>
+            <ArrowCounterClockwise />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content side='right'>
+            {t('clear label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </>
+  );
+};

package/src/components/HuePicker.stories.tsx

@@ -0,0 +1,55 @@
+//
+// 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 { HuePickerBlock, HuePickerToolbarButton, type HuePickerProps } from './HuePicker';
+
+const ToolbarStory = (props: HuePickerProps) => {
+  const [hue, setHue] = useState<string>(props.defaultHue ?? 'red');
+
+  return (
+    <Toolbar.Root>
+      <HuePickerToolbarButton {...props} hue={hue} onChangeHue={setHue} />
+    </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 })],
+};
+
+export default meta;

package/src/components/HuePicker.tsx

@@ -0,0 +1,184 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { useRef, useState } from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  DropdownMenu,
+  type ThemedClassName,
+  Toolbar,
+  Tooltip,
+  useThemeContext,
+  useTranslation,
+} from '@dxos/react-ui';
+import { getSize, hueTokenThemes, mx } from '@dxos/react-ui-theme';
+
+const HuePreview = ({ hue }: { hue: string }) => {
+  const { tx } = useThemeContext();
+  const size = 20;
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <rect x={0} y={0} width={size} height={size} className={tx('hue.fill', 'select--hue__preview', { hue })} />
+    </svg>
+  );
+};
+
+const hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
+
+export type HuePickerProps = {
+  disabled?: boolean;
+  defaultHue?: string;
+  hue?: string;
+  onChangeHue?: (nextHue: string) => void;
+  onClickClear?: ButtonProps['onClick'];
+};
+
+/**
+ * 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'>>) => {
+  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>
+              <Palette className={getSize(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-4'>
+              {hueTokens.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>
+  );
+};
+
+/**
+ * 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,
+  });
+
+  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'>
+              <HuePreview hue={hueValue!} />
+              <span>{t(`${hueValue} label`)}</span>
+            </div>
+            <CaretDown className={getSize(4)} />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content side='right'>
+          <DropdownMenu.Viewport>
+            {Object.keys(hueTokenThemes).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>
+                    <Check />
+                  </DropdownMenu.ItemIndicator>
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button variant='ghost' onClick={onClickClear} disabled={disabled}>
+            <span className='sr-only'>{t('clear label')}</span>
+            <ArrowCounterClockwise />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content side='right'>
+            {t('clear label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </>
+  );
+};

package/src/components/emoji.css

@@ -0,0 +1,25 @@
+/**
+ * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
+ */
+[data-theme="dark"] em-emoji-picker {
+  /* TODO(burdon): Get from TW defs: modal-surface? */
+  --background-rgb: #3B3B3F;
+  --rgb-background: #3B3B3F;
+
+  --font-family: "Inter Variable", ui-sans-serif;
+
+  /*--font-size: 16px;*/
+  /*--color-border-over: rgba(0, 0, 0, 0.1);*/
+  /*--color-border: rgba(0, 0, 0, 0.05);*/
+  /*--category-icon-size: 24px;*/
+  /*--border-radius: 24px;*/
+  /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/
+  /*--rgb-accent: 255, 105, 180;*/
+  /*--rgb-color: 102, 51, 153;*/
+  /*--rgb-input: 255, 235, 235;*/
+  /*--shadow: 5px 5px 15px -8px rebeccapurple;*/
+
+  /*height: 50vh;*/
+  /*min-height: 400px;*/
+  /*max-height: 800px;*/
+}

package/src/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './EmojiPicker';
+export * from './HuePicker';

package/src/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './components';