@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/dropdown/SelectMenu.tsx

@@ -1,243 +1,246 @@
-import type { CSSProperties, ReactNode, RefObject } from 'react'
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { styled } from 'styled-components'
-import {
-  COLLAPSIBLE_GRID_DURATION_MS,
-  useOpenTransition,
-} from '../containers/useOpenTransition.js'
-import { FlexCol } from '../containers/flex.js'
-import {
-  StyledChatMenuPanel,
-  StyledMenuPanel,
-  StyledPaletteMenuPanel,
-  StyledWorkspaceMenuPanel,
-} from './MenuPanel.js'
-import {
-  resolveSelectMenuLayout,
-  type SelectMenuLayout,
-  type SelectMenuPanelVariant,
-  type SelectMenuPlacement,
-  type SelectMenuWidthMode,
-} from './selectMenuLayout.js'
-
-export type {
-  SelectMenuPanelVariant,
-  SelectMenuPlacement,
-  SelectMenuWidthMode,
-} from './selectMenuLayout.js'
-
-export interface SelectMenuProps {
-  open: boolean
-  anchorRef: RefObject<HTMLElement | null>
-  onClose: () => void
-  placement?: SelectMenuPlacement
-  widthMode?: SelectMenuWidthMode
-  minWidth?: number
-  panelVariant?: SelectMenuPanelVariant
-  attachToAnchor?: boolean
-  wrapChildren?: boolean
-  role?: 'menu' | 'listbox' | 'dialog'
-  children: ReactNode
-  'aria-label'?: string
-}
-
-function resolvePanelComponent(variant: SelectMenuPanelVariant) {
-  switch (variant) {
-    case 'quiet':
-      return StyledChatMenuPanel
-    case 'palette':
-      return StyledPaletteMenuPanel
-    case 'workspace':
-      return StyledWorkspaceMenuPanel
-    default:
-      return StyledMenuPanel
-  }
-}
-
-export function SelectMenu({
-  open,
-  anchorRef,
-  onClose,
-  placement = 'below',
-  widthMode = 'intrinsic',
-  minWidth,
-  panelVariant = 'default',
-  attachToAnchor = true,
-  wrapChildren = true,
-  role = 'menu',
-  children,
-  'aria-label': ariaLabel = 'Menu',
-}: SelectMenuProps): React.ReactElement | null {
-  const { mounted } = useOpenTransition(open, COLLAPSIBLE_GRID_DURATION_MS)
-  const [layout, setLayout] = useState<SelectMenuLayout | null>(null)
-  const Panel = resolvePanelComponent(panelVariant)
-
-  const updateLayout = useCallback(() => {
-    const anchor = anchorRef.current
-    if (!anchor) {
-      setLayout(null)
-      return
-    }
-
-    setLayout(
-      resolveSelectMenuLayout({
-        anchorRect: anchor.getBoundingClientRect(),
-        placement,
-        widthMode,
-        minWidth,
-        attachToAnchor,
-      }),
-    )
-  }, [anchorRef, attachToAnchor, minWidth, placement, widthMode])
-
-  useLayoutEffect(() => {
-    if (!mounted) {
-      setLayout(null)
-      return
-    }
-    updateLayout()
-  }, [mounted, updateLayout])
-
-  useEffect(() => {
-    if (!mounted) return
-
-    const onResize = () => updateLayout()
-    window.addEventListener('resize', onResize)
-    window.addEventListener('scroll', onResize, true)
-    return () => {
-      window.removeEventListener('resize', onResize)
-      window.removeEventListener('scroll', onResize, true)
-    }
-  }, [mounted, updateLayout])
-
-  useEffect(() => {
-    if (!open) return
-
-    const onPointerDown = (event: MouseEvent): void => {
-      const target = event.target
-      if (!(target instanceof Node)) return
-      const el = target instanceof Element ? target : target.parentElement
-      if (!el) return
-      if (el.closest('[data-platform-select-menu]') !== null) return
-      if (anchorRef.current?.contains(el)) return
-      onClose()
-    }
-
-    const onKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') onClose()
-    }
-
-    document.addEventListener('mousedown', onPointerDown)
-    document.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.removeEventListener('mousedown', onPointerDown)
-      document.removeEventListener('keydown', onKeyDown)
-    }
-  }, [anchorRef, onClose, open])
-
-  if (!mounted || !layout) return null
-
-  const shellStyle: CSSProperties = {
-    left: layout.left,
-    maxHeight: layout.maxHeight,
-    minWidth: layout.minWidth,
-    ...(layout.width !== undefined ? { width: layout.width } : {}),
-    ...(layout.top !== undefined ? { top: layout.top } : {}),
-    ...(layout.bottom !== undefined ? { bottom: layout.bottom } : {}),
-  }
-
-  const body = wrapChildren ? (
-    <FlexCol $gap="xs" $width="100%">
-      {children}
-    </FlexCol>
-  ) : (
-    children
-  )
-
-  return createPortal(
-    <StyledPortalShell style={shellStyle}>
-      <Panel
-        data-platform-select-menu
-        open={open}
-        indent={false}
-        $fillWidth={widthMode === 'anchor'}
-        role={role}
-        aria-label={ariaLabel}
-      >
-        {body}
-      </Panel>
-    </StyledPortalShell>,
-    document.body,
-  )
-}
-
-const StyledPortalShell = styled.div`
-  position: fixed;
-  z-index: calc(var(--platform-z-index-zi-app-modal) + 20);
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: max-content;
-  max-width: calc(100vw - 16px);
-  pointer-events: auto;
-`
-
-export interface SelectMenuItemProps {
-  label: string
-  selected?: boolean
-  disabled?: boolean
-  tone?: 'default' | 'danger'
-  onSelect: () => void
-}
-
-export function SelectMenuItem({
-  label,
-  selected = false,
-  disabled = false,
-  tone = 'default',
-  onSelect,
-}: SelectMenuItemProps): React.ReactElement {
-  return (
-    <StyledItem
-      type="button"
-      role="menuitem"
-      disabled={disabled}
-      $selected={selected}
-      $tone={tone}
-      onClick={() => {
-        if (!disabled) onSelect()
-      }}
-    >
-      {label}
-    </StyledItem>
-  )
-}
-
-const StyledItem = styled.button<{
-  $selected?: boolean
-  $tone: 'default' | 'danger'
-}>`
-  display: block;
-  width: 100%;
-  min-height: 30px;
-  padding: 5px 8px;
-  border: none;
-  border-radius: var(--platform-radius-sm);
-  background: ${({ $selected }) =>
-    $selected ? 'var(--platform-colors-surface-hover)' : 'transparent'};
-  color: ${({ $tone }) =>
-    $tone === 'danger'
-      ? 'var(--platform-colors-text-danger)'
-      : 'var(--platform-colors-text)'};
-  font: inherit;
-  font-size: var(--platform-typography-font-size-sm);
-  line-height: 1.3;
-  text-align: left;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.45 : 1)};
-
-  &:hover:not(:disabled) {
-    background: var(--platform-colors-surface-hover);
-  }
-`
+import type { CSSProperties, ReactNode, RefObject } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { styled } from 'styled-components'
+import {
+  COLLAPSIBLE_GRID_DURATION_MS,
+  useOpenTransition,
+} from '../containers/useOpenTransition.js'
+import { FlexCol } from '../containers/flex.js'
+import {
+  StyledChatMenuPanel,
+  StyledMenuPanel,
+  StyledPaletteMenuPanel,
+  StyledWorkspaceMenuPanel,
+} from './MenuPanel.js'
+import {
+  resolveSelectMenuLayout,
+  type SelectMenuLayout,
+  type SelectMenuPanelVariant,
+  type SelectMenuPlacement,
+  type SelectMenuWidthMode,
+} from './selectMenuLayout.js'
+
+export type {
+  SelectMenuPanelVariant,
+  SelectMenuPlacement,
+  SelectMenuWidthMode,
+} from './selectMenuLayout.js'
+
+export interface SelectMenuProps {
+  open: boolean
+  anchorRef: RefObject<HTMLElement | null>
+  onClose: () => void
+  placement?: SelectMenuPlacement
+  widthMode?: SelectMenuWidthMode
+  minWidth?: number
+  panelVariant?: SelectMenuPanelVariant
+  attachToAnchor?: boolean
+  wrapChildren?: boolean
+  role?: 'menu' | 'listbox' | 'dialog'
+  children: ReactNode
+  'aria-label'?: string
+}
+
+function resolvePanelComponent(variant: SelectMenuPanelVariant) {
+  switch (variant) {
+    case 'quiet':
+      return StyledChatMenuPanel
+    case 'palette':
+      return StyledPaletteMenuPanel
+    case 'workspace':
+      return StyledWorkspaceMenuPanel
+    default:
+      return StyledMenuPanel
+  }
+}
+
+export function SelectMenu({
+  open,
+  anchorRef,
+  onClose,
+  placement = 'below',
+  widthMode = 'intrinsic',
+  minWidth,
+  panelVariant = 'default',
+  attachToAnchor = true,
+  wrapChildren = true,
+  role = 'menu',
+  children,
+  'aria-label': ariaLabel = 'Menu',
+}: SelectMenuProps): React.ReactElement | null {
+  const { mounted } = useOpenTransition(open, COLLAPSIBLE_GRID_DURATION_MS)
+  const [layout, setLayout] = useState<SelectMenuLayout | null>(null)
+  const Panel = resolvePanelComponent(panelVariant)
+
+  const updateLayout = useCallback(() => {
+    const anchor = anchorRef.current
+    if (!anchor) {
+      setLayout(null)
+      return
+    }
+
+    setLayout(
+      resolveSelectMenuLayout({
+        anchorRect: anchor.getBoundingClientRect(),
+        placement,
+        widthMode,
+        minWidth,
+        attachToAnchor,
+      }),
+    )
+  }, [anchorRef, attachToAnchor, minWidth, placement, widthMode])
+
+  useLayoutEffect(() => {
+    if (!mounted) {
+      setLayout(null)
+      return
+    }
+    updateLayout()
+  }, [mounted, updateLayout])
+
+  useEffect(() => {
+    if (!mounted) return
+
+    const onResize = () => updateLayout()
+    window.addEventListener('resize', onResize)
+    window.addEventListener('scroll', onResize, true)
+    return () => {
+      window.removeEventListener('resize', onResize)
+      window.removeEventListener('scroll', onResize, true)
+    }
+  }, [mounted, updateLayout])
+
+  useEffect(() => {
+    if (!open) return
+
+    const onPointerDown = (event: MouseEvent): void => {
+      const target = event.target
+      if (!(target instanceof Node)) return
+      const el = target instanceof Element ? target : target.parentElement
+      if (!el) return
+      if (el.closest('[data-platform-select-menu]') !== null) return
+      if (anchorRef.current?.contains(el)) return
+      onClose()
+    }
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [anchorRef, onClose, open])
+
+  if (!mounted || !layout) return null
+
+  const shellStyle: CSSProperties = {
+    left: layout.left,
+    maxHeight: layout.maxHeight,
+    minWidth: layout.minWidth,
+    ...(layout.width !== undefined ? { width: layout.width } : {}),
+    ...(layout.top !== undefined ? { top: layout.top } : {}),
+    ...(layout.bottom !== undefined ? { bottom: layout.bottom } : {}),
+  }
+
+  const body = wrapChildren ? (
+    <FlexCol $gap="xs" $width="100%">
+      {children}
+    </FlexCol>
+  ) : (
+    children
+  )
+
+  return createPortal(
+    <StyledPortalShell style={shellStyle}>
+      <Panel
+        data-platform-select-menu
+        open={open}
+        indent={false}
+        $fillWidth={widthMode === 'anchor'}
+        role={role}
+        aria-label={ariaLabel}
+      >
+        {body}
+      </Panel>
+    </StyledPortalShell>,
+    document.body,
+  )
+}
+
+const StyledPortalShell = styled.div`
+  position: fixed;
+  z-index: calc(var(--platform-z-index-zi-app-modal) + 20);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: calc(100vw - 16px);
+  pointer-events: auto;
+`
+
+export interface SelectMenuItemProps {
+  label: string
+  selected?: boolean
+  disabled?: boolean
+  tone?: 'default' | 'danger'
+  onSelect: () => void
+}
+
+export function SelectMenuItem({
+  label,
+  selected = false,
+  disabled = false,
+  tone = 'default',
+  onSelect,
+}: SelectMenuItemProps): React.ReactElement {
+  return (
+    <StyledItem
+      type="button"
+      role="menuitem"
+      disabled={disabled}
+      $selected={selected}
+      $tone={tone}
+      onClick={() => {
+        if (!disabled) onSelect()
+      }}
+    >
+      {label}
+    </StyledItem>
+  )
+}
+
+const StyledItem = styled.button<{
+  $selected?: boolean
+  $tone: 'default' | 'danger'
+}>`
+  display: block;
+  width: 100%;
+  min-height: var(--platform-select-menu-item-height, 30px);
+  padding: var(--platform-select-menu-item-padding, 5px 8px);
+  border: none;
+  border-radius: var(--platform-select-menu-item-radius, var(--platform-radius-sm, 6px));
+  background: ${({ $selected }) =>
+    $selected ? 'var(--platform-colors-surface-hover, #f4f6f8)' : 'transparent'};
+  color: ${({ $tone }) =>
+    $tone === 'danger'
+      ? 'var(--platform-colors-text-danger, #b42318)'
+      : 'var(--platform-colors-text, #25292f)'};
+  font: inherit;
+  font-size: var(
+    --platform-select-menu-item-font-size,
+    var(--platform-typography-font-size-sm, 13px)
+  );
+  line-height: 1.3;
+  text-align: left;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.45 : 1)};
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover, #f4f6f8);
+  }
+`

package/src/components/common/dropdown/SelectMenuControl.tsx

@@ -1,23 +1,23 @@
-import type { ReactNode, RefObject } from 'react'
-import { SelectMenu, type SelectMenuProps } from './SelectMenu.js'
-
-export interface SelectMenuControlProps
-  extends Omit<SelectMenuProps, 'children' | 'open' | 'onClose' | 'anchorRef'> {
-  anchorRef: RefObject<HTMLElement | null>
-  open: boolean
-  onClose: () => void
-  children: ReactNode | ((close: () => void) => ReactNode)
-}
-
-/** Portaled CollapsibleGrid menu — single entry point for all select-style dropdowns. */
-export function SelectMenuControl({
-  children,
-  onClose,
-  ...menuProps
-}: SelectMenuControlProps): React.ReactElement | null {
-  return (
-    <SelectMenu {...menuProps} onClose={onClose}>
-      {typeof children === 'function' ? children(onClose) : children}
-    </SelectMenu>
-  )
-}
+import type { ReactNode, RefObject } from 'react'
+import { SelectMenu, type SelectMenuProps } from './SelectMenu.js'
+
+export interface SelectMenuControlProps
+  extends Omit<SelectMenuProps, 'children' | 'open' | 'onClose' | 'anchorRef'> {
+  anchorRef: RefObject<HTMLElement | null>
+  open: boolean
+  onClose: () => void
+  children: ReactNode | ((close: () => void) => ReactNode)
+}
+
+/** Portaled CollapsibleGrid menu — single entry point for all select-style dropdowns. */
+export function SelectMenuControl({
+  children,
+  onClose,
+  ...menuProps
+}: SelectMenuControlProps): React.ReactElement | null {
+  return (
+    <SelectMenu {...menuProps} onClose={onClose}>
+      {typeof children === 'function' ? children(onClose) : children}
+    </SelectMenu>
+  )
+}

package/src/components/common/dropdown/SelectMenuOptions.tsx

@@ -1,38 +1,60 @@
-import { SelectMenuItem } from './SelectMenu.js'
-
-export interface SelectMenuOption {
-  value: string
-  label: string
-  disabled?: boolean
-}
-
-export interface SelectMenuOptionsProps {
-  options: readonly SelectMenuOption[]
-  value: string
-  onValueChange: (value: string) => void
-  onClose: () => void
-}
-
-export function SelectMenuOptions({
-  options,
-  value,
-  onValueChange,
-  onClose,
-}: SelectMenuOptionsProps): React.ReactElement {
-  return (
-    <>
-      {options.map(option => (
-        <SelectMenuItem
-          key={option.value}
-          label={option.label}
-          selected={option.value === value}
-          disabled={option.disabled}
-          onSelect={() => {
-            onValueChange(option.value)
-            onClose()
-          }}
-        />
-      ))}
-    </>
-  )
-}
+import { Fragment } from 'react'
+import { styled } from 'styled-components'
+import { SelectMenuItem } from './SelectMenu.js'
+
+export interface SelectMenuOption {
+  value: string
+  label: string
+  groupLabel?: string
+  disabled?: boolean
+}
+
+const SelectMenuGroupLabel = styled.div`
+  padding: 8px 8px 3px;
+  color: var(--platform-colors-text-secondary);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+`
+
+export interface SelectMenuOptionsProps {
+  options: readonly SelectMenuOption[]
+  value: string
+  onValueChange: (value: string) => void
+  onClose: () => void
+}
+
+export function SelectMenuOptions({
+  options,
+  value,
+  onValueChange,
+  onClose,
+}: SelectMenuOptionsProps): React.ReactElement {
+  let lastGroup: string | undefined
+  return (
+    <>
+      {options.map(option => {
+        const showGroup =
+          option.groupLabel !== undefined && option.groupLabel !== lastGroup
+        lastGroup = option.groupLabel
+        return (
+          <Fragment key={option.value}>
+            {showGroup ? (
+              <SelectMenuGroupLabel>{option.groupLabel}</SelectMenuGroupLabel>
+            ) : null}
+            <SelectMenuItem
+              label={option.label}
+              selected={option.value === value}
+              disabled={option.disabled}
+              onSelect={() => {
+                onValueChange(option.value)
+                onClose()
+              }}
+            />
+          </Fragment>
+        )
+      })}
+    </>
+  )
+}

package/src/components/common/dropdown/menuPortalConstants.ts

@@ -1,11 +1,11 @@
-export const MENU_PORTAL_ID = 'platform-menu-portal'
-
-export function isMenuInteractionTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof Node)) return false
-  const el = target instanceof Element ? target : target.parentElement
-  if (!el) return false
-  return (
-    el.closest('[data-platform-menu-surface]') !== null ||
-    el.closest('[data-platform-menu-trigger]') !== null
-  )
-}
+export const MENU_PORTAL_ID = 'platform-menu-portal'
+
+export function isMenuInteractionTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof Node)) return false
+  const el = target instanceof Element ? target : target.parentElement
+  if (!el) return false
+  return (
+    el.closest('[data-platform-menu-surface]') !== null ||
+    el.closest('[data-platform-menu-trigger]') !== null
+  )
+}