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

package/src/components/common/dropdown/selectMenuLayout.test.ts

@@ -1,42 +1,42 @@
-import { describe, expect, it } from 'vitest'
-import { MENU_ANCHOR_GAP_PX } from './menuViewportPosition.js'
-import { resolveSelectMenuLayout } from './selectMenuLayout.js'
-
-describe('resolveSelectMenuLayout', () => {
-  it('opens below the anchor by default', () => {
-    const layout = resolveSelectMenuLayout({
-      anchorRect: { top: 100, bottom: 128, left: 40, right: 180, width: 140 },
-      placement: 'below',
-      viewportWidth: 1000,
-      viewportHeight: 800,
-    })
-
-    expect(layout.resolvedPlacement).toBe('below')
-    expect(layout.top).toBe(128)
-    expect(layout.bottom).toBeUndefined()
-  })
-
-  it('opens above the anchor when requested', () => {
-    const layout = resolveSelectMenuLayout({
-      anchorRect: { top: 720, bottom: 748, left: 40, right: 180, width: 140 },
-      placement: 'above',
-      viewportWidth: 1000,
-      viewportHeight: 800,
-    })
-
-    expect(layout.resolvedPlacement).toBe('above')
-    expect(layout.bottom).toBe(800 - 720)
-    expect(layout.top).toBeUndefined()
-  })
-
-  it('auto prefers above when there is more space above', () => {
-    const layout = resolveSelectMenuLayout({
-      anchorRect: { top: 720, bottom: 748, left: 40, right: 180, width: 140 },
-      placement: 'auto',
-      viewportWidth: 1000,
-      viewportHeight: 800,
-    })
-
-    expect(layout.resolvedPlacement).toBe('above')
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { MENU_ANCHOR_GAP_PX } from './menuViewportPosition.js'
+import { resolveSelectMenuLayout } from './selectMenuLayout.js'
+
+describe('resolveSelectMenuLayout', () => {
+  it('opens below the anchor by default', () => {
+    const layout = resolveSelectMenuLayout({
+      anchorRect: { top: 100, bottom: 128, left: 40, right: 180, width: 140 },
+      placement: 'below',
+      viewportWidth: 1000,
+      viewportHeight: 800,
+    })
+
+    expect(layout.resolvedPlacement).toBe('below')
+    expect(layout.top).toBe(128)
+    expect(layout.bottom).toBeUndefined()
+  })
+
+  it('opens above the anchor when requested', () => {
+    const layout = resolveSelectMenuLayout({
+      anchorRect: { top: 720, bottom: 748, left: 40, right: 180, width: 140 },
+      placement: 'above',
+      viewportWidth: 1000,
+      viewportHeight: 800,
+    })
+
+    expect(layout.resolvedPlacement).toBe('above')
+    expect(layout.bottom).toBe(800 - 720)
+    expect(layout.top).toBeUndefined()
+  })
+
+  it('auto prefers above when there is more space above', () => {
+    const layout = resolveSelectMenuLayout({
+      anchorRect: { top: 720, bottom: 748, left: 40, right: 180, width: 140 },
+      placement: 'auto',
+      viewportWidth: 1000,
+      viewportHeight: 800,
+    })
+
+    expect(layout.resolvedPlacement).toBe('above')
+  })
+})

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

@@ -1,123 +1,123 @@
-import {
-  MENU_ANCHOR_GAP_PX,
-  MENU_VIEWPORT_MARGIN_PX,
-} from './menuViewportPosition.js'
-
-export const SELECT_MENU_INTRINSIC_MIN_WIDTH_PX = 220
-export const SELECT_MENU_ANCHOR_MIN_WIDTH_PX = 120
-export const SELECT_MENU_DEFAULT_MIN_HEIGHT_PX = 120
-
-export type SelectMenuPlacement = 'below' | 'above' | 'auto'
-export type SelectMenuResolvedPlacement = 'below' | 'above'
-export type SelectMenuWidthMode = 'intrinsic' | 'anchor'
-export type SelectMenuPanelVariant =
-  | 'default'
-  | 'quiet'
-  | 'palette'
-  | 'workspace'
-
-export interface SelectMenuLayoutInput {
-  anchorRect: Pick<DOMRect, 'top' | 'bottom' | 'left' | 'right' | 'width'>
-  placement: SelectMenuPlacement
-  widthMode?: SelectMenuWidthMode
-  minWidth?: number
-  /** When true (default), menu border sits flush on the anchor edge. */
-  attachToAnchor?: boolean
-  viewportWidth?: number
-  viewportHeight?: number
-}
-
-export interface SelectMenuLayout {
-  left: number
-  resolvedPlacement: SelectMenuResolvedPlacement
-  top?: number
-  bottom?: number
-  maxHeight: number
-  minWidth: number
-  width?: number
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max)
-}
-
-export function resolveSelectMenuLayout({
-  anchorRect,
-  placement,
-  widthMode = 'intrinsic',
-  minWidth,
-  attachToAnchor = true,
-  viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 0,
-  viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 0,
-}: SelectMenuLayoutInput): SelectMenuLayout {
-  const margin = MENU_VIEWPORT_MARGIN_PX
-  const gap = attachToAnchor ? 0 : MENU_ANCHOR_GAP_PX
-  const maxViewportWidth = Math.max(0, viewportWidth - margin * 2)
-
-  const resolvedMinWidth =
-    minWidth ??
-    (widthMode === 'anchor'
-      ? SELECT_MENU_ANCHOR_MIN_WIDTH_PX
-      : SELECT_MENU_INTRINSIC_MIN_WIDTH_PX)
-
-  const layoutWidth =
-    widthMode === 'anchor'
-      ? clamp(
-          Math.max(anchorRect.width, resolvedMinWidth),
-          resolvedMinWidth,
-          maxViewportWidth,
-        )
-      : clamp(resolvedMinWidth, resolvedMinWidth, maxViewportWidth)
-
-  const spaceBelow = Math.max(
-    0,
-    viewportHeight - anchorRect.bottom - gap - margin,
-  )
-  const spaceAbove = Math.max(0, anchorRect.top - gap - margin)
-
-  let resolvedPlacement: SelectMenuResolvedPlacement =
-    placement === 'above'
-      ? 'above'
-      : placement === 'below'
-      ? 'below'
-      : spaceBelow >= spaceAbove
-      ? 'below'
-      : 'above'
-
-  const left = clamp(
-    anchorRect.left,
-    margin,
-    Math.max(margin, viewportWidth - layoutWidth - margin),
-  )
-
-  if (resolvedPlacement === 'below') {
-    const top = anchorRect.bottom + gap
-    const maxHeight = Math.max(
-      SELECT_MENU_DEFAULT_MIN_HEIGHT_PX,
-      viewportHeight - top - margin,
-    )
-    return {
-      left,
-      resolvedPlacement,
-      top,
-      maxHeight,
-      minWidth: layoutWidth,
-      ...(widthMode === 'anchor' ? { width: layoutWidth } : {}),
-    }
-  }
-
-  const bottom = viewportHeight - anchorRect.top + gap
-  const maxHeight = Math.max(
-    SELECT_MENU_DEFAULT_MIN_HEIGHT_PX,
-    anchorRect.top - gap - margin,
-  )
-
-  return {
-    left,
-    resolvedPlacement,
-    bottom,
-    maxHeight,
-    minWidth: layoutWidth,
-    ...(widthMode === 'anchor' ? { width: layoutWidth } : {}),
-  }
-}
+import {
+  MENU_ANCHOR_GAP_PX,
+  MENU_VIEWPORT_MARGIN_PX,
+} from './menuViewportPosition.js'
+
+export const SELECT_MENU_INTRINSIC_MIN_WIDTH_PX = 220
+export const SELECT_MENU_ANCHOR_MIN_WIDTH_PX = 120
+export const SELECT_MENU_DEFAULT_MIN_HEIGHT_PX = 120
+
+export type SelectMenuPlacement = 'below' | 'above' | 'auto'
+export type SelectMenuResolvedPlacement = 'below' | 'above'
+export type SelectMenuWidthMode = 'intrinsic' | 'anchor'
+export type SelectMenuPanelVariant =
+  | 'default'
+  | 'quiet'
+  | 'palette'
+  | 'workspace'
+
+export interface SelectMenuLayoutInput {
+  anchorRect: Pick<DOMRect, 'top' | 'bottom' | 'left' | 'right' | 'width'>
+  placement: SelectMenuPlacement
+  widthMode?: SelectMenuWidthMode
+  minWidth?: number
+  /** When true (default), menu border sits flush on the anchor edge. */
+  attachToAnchor?: boolean
+  viewportWidth?: number
+  viewportHeight?: number
+}
+
+export interface SelectMenuLayout {
+  left: number
+  resolvedPlacement: SelectMenuResolvedPlacement
+  top?: number
+  bottom?: number
+  maxHeight: number
+  minWidth: number
+  width?: number
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+export function resolveSelectMenuLayout({
+  anchorRect,
+  placement,
+  widthMode = 'intrinsic',
+  minWidth,
+  attachToAnchor = true,
+  viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 0,
+  viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 0,
+}: SelectMenuLayoutInput): SelectMenuLayout {
+  const margin = MENU_VIEWPORT_MARGIN_PX
+  const gap = attachToAnchor ? 0 : MENU_ANCHOR_GAP_PX
+  const maxViewportWidth = Math.max(0, viewportWidth - margin * 2)
+
+  const resolvedMinWidth =
+    minWidth ??
+    (widthMode === 'anchor'
+      ? SELECT_MENU_ANCHOR_MIN_WIDTH_PX
+      : SELECT_MENU_INTRINSIC_MIN_WIDTH_PX)
+
+  const layoutWidth =
+    widthMode === 'anchor'
+      ? clamp(
+          Math.max(anchorRect.width, resolvedMinWidth),
+          resolvedMinWidth,
+          maxViewportWidth,
+        )
+      : clamp(resolvedMinWidth, resolvedMinWidth, maxViewportWidth)
+
+  const spaceBelow = Math.max(
+    0,
+    viewportHeight - anchorRect.bottom - gap - margin,
+  )
+  const spaceAbove = Math.max(0, anchorRect.top - gap - margin)
+
+  let resolvedPlacement: SelectMenuResolvedPlacement =
+    placement === 'above'
+      ? 'above'
+      : placement === 'below'
+      ? 'below'
+      : spaceBelow >= spaceAbove
+      ? 'below'
+      : 'above'
+
+  const left = clamp(
+    anchorRect.left,
+    margin,
+    Math.max(margin, viewportWidth - layoutWidth - margin),
+  )
+
+  if (resolvedPlacement === 'below') {
+    const top = anchorRect.bottom + gap
+    const maxHeight = Math.max(
+      SELECT_MENU_DEFAULT_MIN_HEIGHT_PX,
+      viewportHeight - top - margin,
+    )
+    return {
+      left,
+      resolvedPlacement,
+      top,
+      maxHeight,
+      minWidth: layoutWidth,
+      ...(widthMode === 'anchor' ? { width: layoutWidth } : {}),
+    }
+  }
+
+  const bottom = viewportHeight - anchorRect.top + gap
+  const maxHeight = Math.max(
+    SELECT_MENU_DEFAULT_MIN_HEIGHT_PX,
+    anchorRect.top - gap - margin,
+  )
+
+  return {
+    left,
+    resolvedPlacement,
+    bottom,
+    maxHeight,
+    minWidth: layoutWidth,
+    ...(widthMode === 'anchor' ? { width: layoutWidth } : {}),
+  }
+}

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

@@ -1,109 +1,109 @@
-import { useCallback, useLayoutEffect, useState, type RefObject } from 'react'
-import { MENU_ANCHOR_GAP_PX } from './menuViewportPosition.js'
-
-export type MenuPlacement =
-  | 'below-start'
-  | 'above-start'
-  | 'below-menubar-start'
-  | 'after-start'
-  | 'at-point'
-
-export interface MenuAnchorPosition {
-  top: number
-  left: number
-}
-
-export interface UseMenuAnchorPositionArgs {
-  /** Primary anchor (trigger row, menubar, or point anchor for `at-point`). */
-  anchorRef: RefObject<HTMLElement | null>
-  /** Horizontal align for `below-menubar-start` (section trigger). */
-  alignRef?: RefObject<HTMLElement | null>
-  active: boolean
-  placement: MenuPlacement
-  /** Screen coordinates for `at-point`. */
-  point?: { x: number; y: number } | null
-}
-
-/** @param active When false, position updates stop (use portal `mounted`, not raw `open`). */
-export function useMenuAnchorPosition({
-  anchorRef,
-  alignRef,
-  active,
-  placement,
-  point,
-}: UseMenuAnchorPositionArgs): MenuAnchorPosition | null {
-  const [position, setPosition] = useState<MenuAnchorPosition | null>(null)
-
-  const update = useCallback(() => {
-    if (placement === 'at-point') {
-      if (!point) {
-        setPosition(null)
-        return
-      }
-      setPosition({
-        top: point.y + MENU_ANCHOR_GAP_PX,
-        left: point.x,
-      })
-      return
-    }
-
-    const anchor = anchorRef.current
-    if (!anchor) {
-      setPosition(null)
-      return
-    }
-
-    if (placement === 'below-menubar-start') {
-      const align = alignRef?.current
-      if (!align) {
-        setPosition(null)
-        return
-      }
-      const rowRect = anchor.getBoundingClientRect()
-      const alignRect = align.getBoundingClientRect()
-      setPosition({
-        top: rowRect.bottom,
-        left: alignRect.left,
-      })
-      return
-    }
-
-    const rect = anchor.getBoundingClientRect()
-    if (placement === 'below-start') {
-      setPosition({
-        top: rect.bottom + MENU_ANCHOR_GAP_PX,
-        left: rect.left,
-      })
-      return
-    }
-
-    if (placement === 'above-start') {
-      setPosition({
-        top: rect.top - MENU_ANCHOR_GAP_PX,
-        left: rect.left,
-      })
-      return
-    }
-
-    setPosition({
-      top: rect.top,
-      left: rect.right + MENU_ANCHOR_GAP_PX,
-    })
-  }, [anchorRef, alignRef, placement, point])
-
-  useLayoutEffect(() => {
-    if (!active) {
-      setPosition(null)
-      return
-    }
-    update()
-    window.addEventListener('resize', update)
-    window.addEventListener('scroll', update, true)
-    return () => {
-      window.removeEventListener('resize', update)
-      window.removeEventListener('scroll', update, true)
-    }
-  }, [active, update])
-
-  return active ? position : null
-}
+import { useCallback, useLayoutEffect, useState, type RefObject } from 'react'
+import { MENU_ANCHOR_GAP_PX } from './menuViewportPosition.js'
+
+export type MenuPlacement =
+  | 'below-start'
+  | 'above-start'
+  | 'below-menubar-start'
+  | 'after-start'
+  | 'at-point'
+
+export interface MenuAnchorPosition {
+  top: number
+  left: number
+}
+
+export interface UseMenuAnchorPositionArgs {
+  /** Primary anchor (trigger row, menubar, or point anchor for `at-point`). */
+  anchorRef: RefObject<HTMLElement | null>
+  /** Horizontal align for `below-menubar-start` (section trigger). */
+  alignRef?: RefObject<HTMLElement | null>
+  active: boolean
+  placement: MenuPlacement
+  /** Screen coordinates for `at-point`. */
+  point?: { x: number; y: number } | null
+}
+
+/** @param active When false, position updates stop (use portal `mounted`, not raw `open`). */
+export function useMenuAnchorPosition({
+  anchorRef,
+  alignRef,
+  active,
+  placement,
+  point,
+}: UseMenuAnchorPositionArgs): MenuAnchorPosition | null {
+  const [position, setPosition] = useState<MenuAnchorPosition | null>(null)
+
+  const update = useCallback(() => {
+    if (placement === 'at-point') {
+      if (!point) {
+        setPosition(null)
+        return
+      }
+      setPosition({
+        top: point.y + MENU_ANCHOR_GAP_PX,
+        left: point.x,
+      })
+      return
+    }
+
+    const anchor = anchorRef.current
+    if (!anchor) {
+      setPosition(null)
+      return
+    }
+
+    if (placement === 'below-menubar-start') {
+      const align = alignRef?.current
+      if (!align) {
+        setPosition(null)
+        return
+      }
+      const rowRect = anchor.getBoundingClientRect()
+      const alignRect = align.getBoundingClientRect()
+      setPosition({
+        top: rowRect.bottom,
+        left: alignRect.left,
+      })
+      return
+    }
+
+    const rect = anchor.getBoundingClientRect()
+    if (placement === 'below-start') {
+      setPosition({
+        top: rect.bottom + MENU_ANCHOR_GAP_PX,
+        left: rect.left,
+      })
+      return
+    }
+
+    if (placement === 'above-start') {
+      setPosition({
+        top: rect.top - MENU_ANCHOR_GAP_PX,
+        left: rect.left,
+      })
+      return
+    }
+
+    setPosition({
+      top: rect.top,
+      left: rect.right + MENU_ANCHOR_GAP_PX,
+    })
+  }, [anchorRef, alignRef, placement, point])
+
+  useLayoutEffect(() => {
+    if (!active) {
+      setPosition(null)
+      return
+    }
+    update()
+    window.addEventListener('resize', update)
+    window.addEventListener('scroll', update, true)
+    return () => {
+      window.removeEventListener('resize', update)
+      window.removeEventListener('scroll', update, true)
+    }
+  }, [active, update])
+
+  return active ? position : null
+}

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

@@ -1,30 +1,30 @@
-import { useCallback, useRef, useState, type RefObject } from 'react'
-
-export interface UseSelectMenuAnchorOptions {
-  disabled?: boolean
-}
-
-export interface UseSelectMenuAnchorResult<
-  T extends HTMLElement = HTMLElement,
-> {
-  anchorRef: RefObject<T | null>
-  open: boolean
-  close: () => void
-  toggle: () => void
-  setOpen: (open: boolean) => void
-}
-
-export function useSelectMenuAnchor<T extends HTMLElement = HTMLElement>({
-  disabled = false,
-}: UseSelectMenuAnchorOptions = {}): UseSelectMenuAnchorResult<T> {
-  const anchorRef = useRef<T | null>(null)
-  const [open, setOpen] = useState(false)
-
-  const close = useCallback(() => setOpen(false), [])
-  const toggle = useCallback(() => {
-    if (disabled) return
-    setOpen(current => !current)
-  }, [disabled])
-
-  return { anchorRef, open, close, toggle, setOpen }
-}
+import { useCallback, useRef, useState, type RefObject } from 'react'
+
+export interface UseSelectMenuAnchorOptions {
+  disabled?: boolean
+}
+
+export interface UseSelectMenuAnchorResult<
+  T extends HTMLElement = HTMLElement,
+> {
+  anchorRef: RefObject<T | null>
+  open: boolean
+  close: () => void
+  toggle: () => void
+  setOpen: (open: boolean) => void
+}
+
+export function useSelectMenuAnchor<T extends HTMLElement = HTMLElement>({
+  disabled = false,
+}: UseSelectMenuAnchorOptions = {}): UseSelectMenuAnchorResult<T> {
+  const anchorRef = useRef<T | null>(null)
+  const [open, setOpen] = useState(false)
+
+  const close = useCallback(() => setOpen(false), [])
+  const toggle = useCallback(() => {
+    if (disabled) return
+    setOpen(current => !current)
+  }, [disabled])
+
+  return { anchorRef, open, close, toggle, setOpen }
+}