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

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

@@ -1,51 +1,51 @@
-import { styled } from 'styled-components'
-import { MenuDropdownItem } from './MenuDropdownItem.js'
-import { MenuDropdownSubmenu } from './MenuDropdownSubmenu.js'
-import {
-  isMenuDivider,
-  isMenuSubmenu,
-  type MenuActionItem,
-  type MenuEntry,
-} from './menuTypes.js'
-
-export interface MenuDropdownEntryProps {
-  entry: MenuEntry
-  index: number
-  /** Portal stacking depth for nested flyouts (parent menu surface is 0). */
-  depth: number
-  onSelect: (item: MenuActionItem) => void
-}
-
-//#region styled-components
-
-const StyledDivider = styled.hr`
-  margin: var(--platform-spacing-xs) 0;
-  border: none;
-  border-top: 1px solid var(--platform-colors-divider);
-`
-
-//#endregion
-
-export function MenuDropdownEntry({
-  entry,
-  index,
-  depth,
-  onSelect,
-}: MenuDropdownEntryProps): React.ReactElement | null {
-  if (isMenuDivider(entry)) {
-    return <StyledDivider key={`divider-${index}`} />
-  }
-
-  if (isMenuSubmenu(entry)) {
-    return (
-      <MenuDropdownSubmenu
-        key={entry.id}
-        item={entry}
-        depth={depth + 1}
-        onSelect={onSelect}
-      />
-    )
-  }
-
-  return <MenuDropdownItem key={entry.id} item={entry} onSelect={onSelect} />
-}
+import { styled } from 'styled-components'
+import { MenuDropdownItem } from './MenuDropdownItem.js'
+import { MenuDropdownSubmenu } from './MenuDropdownSubmenu.js'
+import {
+  isMenuDivider,
+  isMenuSubmenu,
+  type MenuActionItem,
+  type MenuEntry,
+} from './menuTypes.js'
+
+export interface MenuDropdownEntryProps {
+  entry: MenuEntry
+  index: number
+  /** Portal stacking depth for nested flyouts (parent menu surface is 0). */
+  depth: number
+  onSelect: (item: MenuActionItem) => void
+}
+
+//#region styled-components
+
+const StyledDivider = styled.hr`
+  margin: var(--platform-spacing-xs) 0;
+  border: none;
+  border-top: 1px solid var(--platform-colors-divider);
+`
+
+//#endregion
+
+export function MenuDropdownEntry({
+  entry,
+  index,
+  depth,
+  onSelect,
+}: MenuDropdownEntryProps): React.ReactElement | null {
+  if (isMenuDivider(entry)) {
+    return <StyledDivider key={`divider-${index}`} />
+  }
+
+  if (isMenuSubmenu(entry)) {
+    return (
+      <MenuDropdownSubmenu
+        key={entry.id}
+        item={entry}
+        depth={depth + 1}
+        onSelect={onSelect}
+      />
+    )
+  }
+
+  return <MenuDropdownItem key={entry.id} item={entry} onSelect={onSelect} />
+}

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

@@ -1,82 +1,82 @@
-import { styled } from 'styled-components'
-import type { MenuActionItem } from './menuTypes.js'
-
-export interface MenuDropdownItemProps {
-  item: MenuActionItem
-  onSelect: (item: MenuActionItem) => void
-}
-
-//#region styled-components
-
-const StyledItem = styled.button<{
-  $disabled?: boolean
-  $tone?: MenuActionItem['tone']
-}>`
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--platform-spacing-md);
-  width: 100%;
-  min-height: 30px;
-  padding: 5px 8px;
-  border: none;
-  border-radius: var(--platform-radius-sm);
-  background: transparent;
-  color: ${p =>
-    p.$tone === 'danger'
-      ? 'var(--platform-colors-text-danger)'
-      : 'var(--platform-colors-text)'};
-  font-size: var(--platform-typography-font-size-sm);
-  line-height: 1.3;
-  text-align: left;
-  cursor: ${p => (p.$disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${p => (p.$disabled ? 0.45 : 1)};
-
-  &:hover:not(:disabled) {
-    background: var(--platform-colors-surface-hover);
-  }
-
-  & > span:first-child {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`
-
-const StyledShortcut = styled.span`
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-sm);
-  font-family: var(--platform-typography-font-family-mono);
-`
-
-//#endregion
-
-export function MenuDropdownItem({
-  item,
-  onSelect,
-}: MenuDropdownItemProps): React.ReactElement {
-  const selectItem = (): void => {
-    if (!item.disabled) onSelect(item)
-  }
-
-  return (
-    <StyledItem
-      type="button"
-      role="menuitem"
-      disabled={item.disabled}
-      $disabled={item.disabled}
-      $tone={item.tone}
-      onPointerDown={event => {
-        if (event.pointerType === 'mouse' || event.pointerType === 'touch') {
-          event.preventDefault()
-          selectItem()
-        }
-      }}
-      onClick={selectItem}
-    >
-      <span>{item.label}</span>
-      {item.shortcut ? <StyledShortcut>{item.shortcut}</StyledShortcut> : null}
-    </StyledItem>
-  )
-}
+import { styled } from 'styled-components'
+import type { MenuActionItem } from './menuTypes.js'
+
+export interface MenuDropdownItemProps {
+  item: MenuActionItem
+  onSelect: (item: MenuActionItem) => void
+}
+
+//#region styled-components
+
+const StyledItem = styled.button<{
+  $disabled?: boolean
+  $tone?: MenuActionItem['tone']
+}>`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--platform-spacing-md);
+  width: 100%;
+  min-height: 30px;
+  padding: 5px 8px;
+  border: none;
+  border-radius: var(--platform-radius-sm);
+  background: transparent;
+  color: ${p =>
+    p.$tone === 'danger'
+      ? 'var(--platform-colors-text-danger)'
+      : 'var(--platform-colors-text)'};
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1.3;
+  text-align: left;
+  cursor: ${p => (p.$disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${p => (p.$disabled ? 0.45 : 1)};
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover);
+  }
+
+  & > span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+const StyledShortcut = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  font-family: var(--platform-typography-font-family-mono);
+`
+
+//#endregion
+
+export function MenuDropdownItem({
+  item,
+  onSelect,
+}: MenuDropdownItemProps): React.ReactElement {
+  const selectItem = (): void => {
+    if (!item.disabled) onSelect(item)
+  }
+
+  return (
+    <StyledItem
+      type="button"
+      role="menuitem"
+      disabled={item.disabled}
+      $disabled={item.disabled}
+      $tone={item.tone}
+      onPointerDown={event => {
+        if (event.pointerType === 'mouse' || event.pointerType === 'touch') {
+          event.preventDefault()
+          selectItem()
+        }
+      }}
+      onClick={selectItem}
+    >
+      <span>{item.label}</span>
+      {item.shortcut ? <StyledShortcut>{item.shortcut}</StyledShortcut> : null}
+    </StyledItem>
+  )
+}

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

@@ -1,145 +1,145 @@
-import { useRef, useState } from 'react'
-import { ChevronRight } from 'lucide-react'
-import { styled } from 'styled-components'
-import { CollapsibleGrid } from '../containers/CollapsibleGrid.js'
-import { FlexCol } from '../containers/flex.js'
-import { MenuDropdownEntry } from './MenuDropdownEntry.js'
-import { MenuPortal } from './MenuPortal.js'
-import type { MenuActionItem, MenuSubmenuItem } from './menuTypes.js'
-
-const SUBMENU_HOVER_CLOSE_MS = 120
-
-//#region styled-components
-
-const StyledRow = styled.div<{ $disabled?: boolean; $open: boolean }>`
-  position: relative;
-  opacity: ${p => (p.$disabled ? 0.45 : 1)};
-  pointer-events: ${p => (p.$disabled ? 'none' : 'auto')};
-`
-
-const StyledTrigger = styled.button<{ $open: boolean }>`
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  gap: var(--platform-spacing-sm);
-  width: 100%;
-  padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
-  border: none;
-  border-radius: 0;
-  background: ${p =>
-    p.$open ? 'var(--platform-colors-surface-hover)' : 'transparent'};
-  color: var(--platform-colors-text);
-  font-size: var(--platform-typography-font-size-base);
-  text-align: left;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--platform-colors-surface-hover);
-  }
-`
-
-const StyledFlyoutPanel = styled(CollapsibleGrid)`
-  padding: var(--platform-spacing-xs);
-  border: 1px solid var(--platform-colors-border);
-  border-radius: 0;
-  background: var(--platform-colors-elevated);
-  box-shadow: var(--platform-shadow-md);
-
-  &[data-open='true'] {
-    min-width: 180px;
-  }
-
-  &[data-open='false'] {
-    box-shadow: none;
-  }
-`
-
-//#endregion
-
-export interface MenuDropdownSubmenuProps {
-  item: MenuSubmenuItem
-  depth: number
-  onSelect: (item: MenuActionItem) => void
-}
-
-export function MenuDropdownSubmenu({
-  item,
-  depth,
-  onSelect,
-}: MenuDropdownSubmenuProps): React.ReactElement {
-  const [open, setOpen] = useState(false)
-  const rowRef = useRef<HTMLDivElement>(null)
-  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  const clearCloseTimer = (): void => {
-    if (closeTimerRef.current !== null) {
-      clearTimeout(closeTimerRef.current)
-      closeTimerRef.current = null
-    }
-  }
-
-  const scheduleClose = (): void => {
-    clearCloseTimer()
-    closeTimerRef.current = setTimeout(() => {
-      setOpen(false)
-      closeTimerRef.current = null
-    }, SUBMENU_HOVER_CLOSE_MS)
-  }
-
-  const handleOpen = (): void => {
-    if (item.disabled) return
-    clearCloseTimer()
-    setOpen(true)
-  }
-
-  return (
-    <StyledRow
-      ref={rowRef}
-      $disabled={item.disabled}
-      $open={open}
-      onMouseEnter={handleOpen}
-      onMouseLeave={scheduleClose}
-    >
-      <StyledTrigger
-        type="button"
-        role="menuitem"
-        aria-expanded={open}
-        aria-haspopup="menu"
-        disabled={item.disabled}
-        $open={open}
-        onClick={event => event.stopPropagation()}
-      >
-        <span>{item.label}</span>
-        <ChevronRight size={14} strokeWidth={2} />
-      </StyledTrigger>
-      <MenuPortal
-        anchorRef={rowRef}
-        open={open}
-        placement="after-start"
-        depth={depth}
-        onMouseEnter={handleOpen}
-        onMouseLeave={scheduleClose}
-      >
-        <StyledFlyoutPanel
-          open={open}
-          animationDirection="x"
-          indent={false}
-          role="menu"
-          aria-label={item.label}
-        >
-          <FlexCol $gap="xs" $width="100%">
-            {item.items.map((entry, index) => (
-              <MenuDropdownEntry
-                key={entry.type === 'divider' ? `divider-${index}` : entry.id}
-                entry={entry}
-                index={index}
-                depth={depth}
-                onSelect={onSelect}
-              />
-            ))}
-          </FlexCol>
-        </StyledFlyoutPanel>
-      </MenuPortal>
-    </StyledRow>
-  )
-}
+import { useRef, useState } from 'react'
+import { ChevronRight } from 'lucide-react'
+import { styled } from 'styled-components'
+import { CollapsibleGrid } from '../containers/CollapsibleGrid.js'
+import { FlexCol } from '../containers/flex.js'
+import { MenuDropdownEntry } from './MenuDropdownEntry.js'
+import { MenuPortal } from './MenuPortal.js'
+import type { MenuActionItem, MenuSubmenuItem } from './menuTypes.js'
+
+const SUBMENU_HOVER_CLOSE_MS = 120
+
+//#region styled-components
+
+const StyledRow = styled.div<{ $disabled?: boolean; $open: boolean }>`
+  position: relative;
+  opacity: ${p => (p.$disabled ? 0.45 : 1)};
+  pointer-events: ${p => (p.$disabled ? 'none' : 'auto')};
+`
+
+const StyledTrigger = styled.button<{ $open: boolean }>`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  width: 100%;
+  padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
+  border: none;
+  border-radius: 0;
+  background: ${p =>
+    p.$open ? 'var(--platform-colors-surface-hover)' : 'transparent'};
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-base);
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+const StyledFlyoutPanel = styled(CollapsibleGrid)`
+  padding: var(--platform-spacing-xs);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 0;
+  background: var(--platform-colors-elevated);
+  box-shadow: var(--platform-shadow-md);
+
+  &[data-open='true'] {
+    min-width: 180px;
+  }
+
+  &[data-open='false'] {
+    box-shadow: none;
+  }
+`
+
+//#endregion
+
+export interface MenuDropdownSubmenuProps {
+  item: MenuSubmenuItem
+  depth: number
+  onSelect: (item: MenuActionItem) => void
+}
+
+export function MenuDropdownSubmenu({
+  item,
+  depth,
+  onSelect,
+}: MenuDropdownSubmenuProps): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  const rowRef = useRef<HTMLDivElement>(null)
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const clearCloseTimer = (): void => {
+    if (closeTimerRef.current !== null) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }
+
+  const scheduleClose = (): void => {
+    clearCloseTimer()
+    closeTimerRef.current = setTimeout(() => {
+      setOpen(false)
+      closeTimerRef.current = null
+    }, SUBMENU_HOVER_CLOSE_MS)
+  }
+
+  const handleOpen = (): void => {
+    if (item.disabled) return
+    clearCloseTimer()
+    setOpen(true)
+  }
+
+  return (
+    <StyledRow
+      ref={rowRef}
+      $disabled={item.disabled}
+      $open={open}
+      onMouseEnter={handleOpen}
+      onMouseLeave={scheduleClose}
+    >
+      <StyledTrigger
+        type="button"
+        role="menuitem"
+        aria-expanded={open}
+        aria-haspopup="menu"
+        disabled={item.disabled}
+        $open={open}
+        onClick={event => event.stopPropagation()}
+      >
+        <span>{item.label}</span>
+        <ChevronRight size={14} strokeWidth={2} />
+      </StyledTrigger>
+      <MenuPortal
+        anchorRef={rowRef}
+        open={open}
+        placement="after-start"
+        depth={depth}
+        onMouseEnter={handleOpen}
+        onMouseLeave={scheduleClose}
+      >
+        <StyledFlyoutPanel
+          open={open}
+          animationDirection="x"
+          indent={false}
+          role="menu"
+          aria-label={item.label}
+        >
+          <FlexCol $gap="xs" $width="100%">
+            {item.items.map((entry, index) => (
+              <MenuDropdownEntry
+                key={entry.type === 'divider' ? `divider-${index}` : entry.id}
+                entry={entry}
+                index={index}
+                depth={depth}
+                onSelect={onSelect}
+              />
+            ))}
+          </FlexCol>
+        </StyledFlyoutPanel>
+      </MenuPortal>
+    </StyledRow>
+  )
+}