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

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

@@ -1,69 +1,75 @@
-import { styled } from 'styled-components'
-import { CollapsibleGrid } from '../containers/CollapsibleGrid.js'
-
-export const StyledMenuPanel = styled(CollapsibleGrid)<{
-  $fillWidth?: boolean
-}>`
-  box-sizing: border-box;
-  width: ${p => (p.$fillWidth ? '100%' : 'max-content')};
-  min-width: ${p => (p.$fillWidth ? '0' : '220px')};
-  max-height: inherit;
-  overflow: hidden;
-  padding: var(--platform-spacing-xs);
-  border: 1px solid var(--platform-colors-border);
-  border-radius: var(--platform-radius-md);
-  background: var(--platform-colors-elevated);
-  box-shadow: var(--platform-shadow-md);
-
-  &[data-animation-direction='y'] {
-    width: ${p => (p.$fillWidth ? '100%' : 'max-content')};
-  }
-
-  &[data-open='false'] {
-    box-shadow: none;
-  }
-
-  & > .content {
-    max-height: inherit;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-`
-
-/** Chat composer menus — matches ChatBox surface (bg, 8px radius, 13px items). */
-export const StyledChatMenuPanel = styled(StyledMenuPanel)`
-  min-width: 160px;
-  padding: 4px;
-  border-radius: 8px;
-  background: var(--platform-colors-bg);
-  box-shadow: 0 4px 16px rgb(from var(--platform-colors-text) r g b / 0.08);
-
-  &[data-open='false'] {
-    box-shadow: none;
-  }
-
-  button[role='menuitem'] {
-    min-height: 28px;
-    padding: 4px 8px;
-    border-radius: 6px;
-    font-size: 13px;
-    line-height: 1.4;
-  }
-
-  button[role='menuitem']:hover:not(:disabled) {
-    background: rgb(from var(--platform-colors-text) r g b / 0.05);
-  }
-`
-
-/** Wide picker panels — still CollapsibleGrid / StyledMenuPanel underneath. */
-export const StyledPaletteMenuPanel = styled(StyledMenuPanel)`
-  min-width: min(310px, calc(100vw - 24px));
-  padding: 6px;
-  border-radius: 12px;
-`
-
-export const StyledWorkspaceMenuPanel = styled(StyledMenuPanel)`
-  min-width: min(320px, calc(100vw - 24px));
-  padding: 6px;
-  border-radius: 10px;
-`
+import { styled } from 'styled-components'
+import { CollapsibleGrid } from '../containers/CollapsibleGrid.js'
+
+export const StyledMenuPanel = styled(CollapsibleGrid)<{
+  $fillWidth?: boolean
+}>`
+  box-sizing: border-box;
+  position: relative;
+  z-index: var(--platform-z-index-dropdown, 80);
+  width: ${p => (p.$fillWidth ? '100%' : 'max-content')};
+  min-width: ${p => (p.$fillWidth ? '0' : '220px')};
+  max-height: inherit;
+  overflow: hidden;
+  padding: var(--platform-spacing-xs, 4px);
+  border: 1px solid var(--platform-colors-border, #d8dde5);
+  border-radius: var(--platform-radius-md, 8px);
+  background: var(--platform-colors-elevated, #ffffff);
+  color: var(--platform-colors-text, #25292f);
+  box-shadow: var(--platform-shadow-md, 0 8px 24px rgba(46, 51, 56, 0.12));
+
+  &[data-animation-direction='y'] {
+    width: ${p => (p.$fillWidth ? '100%' : 'max-content')};
+  }
+
+  &[data-open='false'] {
+    box-shadow: none;
+  }
+
+  & > .content {
+    max-height: inherit;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+`
+
+/** Chat composer menus — matches ChatBox surface (bg, 8px radius, 13px items). */
+export const StyledChatMenuPanel = styled(StyledMenuPanel)`
+  min-width: 160px;
+  padding: 4px;
+  border-radius: 8px;
+  background: var(--platform-colors-bg, #ffffff);
+  box-shadow: 0 4px 16px rgb(from var(--platform-colors-text) r g b / 0.08);
+
+  &[data-open='false'] {
+    box-shadow: none;
+  }
+
+  button[role='menuitem'] {
+    min-height: 28px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  button[role='menuitem']:hover:not(:disabled) {
+    background: rgb(from var(--platform-colors-text) r g b / 0.05);
+  }
+`
+
+/** Wide picker panels — still CollapsibleGrid / StyledMenuPanel underneath. */
+export const StyledPaletteMenuPanel = styled(StyledMenuPanel)`
+  min-width: min(310px, calc(100vw - 24px));
+  padding: 6px;
+  border-color: var(--platform-colors-border, #d8dde5);
+  border-radius: var(--platform-radius-md, 8px);
+  background: var(--platform-colors-elevated, #ffffff);
+  box-shadow: var(--platform-shadow-md, 0 8px 24px rgba(46, 51, 56, 0.12));
+`
+
+export const StyledWorkspaceMenuPanel = styled(StyledMenuPanel)`
+  min-width: min(320px, calc(100vw - 24px));
+  padding: 6px;
+  border-radius: 10px;
+`

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

@@ -1,162 +1,164 @@
-import {
-  useLayoutEffect,
-  useRef,
-  useState,
-  type ComponentPropsWithoutRef,
-  type CSSProperties,
-  type ReactNode,
-  type RefObject,
-} from 'react'
-import { createPortal } from 'react-dom'
-import { styled } from 'styled-components'
-import {
-  COLLAPSIBLE_GRID_DURATION_MS,
-  useOpenTransition,
-} from '../containers/useOpenTransition.js'
-import { MENU_PORTAL_ID } from './menuPortalConstants.js'
-import {
-  resolveMenuViewportLayout,
-  type MenuWidthMode,
-  type ResolvedMenuLayout,
-} from './menuViewportPosition.js'
-import {
-  useMenuAnchorPosition,
-  type MenuPlacement,
-} from './useMenuAnchorPosition.js'
-
-//#region styled-components
-
-const StyledSurface = styled.div<{ $depth: number }>`
-  position: fixed;
-  z-index: calc(var(--platform-z-index-zi-app-modal) + 20 + ${p => p.$depth});
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-`
-
-//#endregion
-
-export interface MenuPortalProps
-  extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
-  anchorRef: RefObject<HTMLElement | null>
-  /** Section trigger; used with `below-menubar-start` for horizontal alignment. */
-  alignRef?: RefObject<HTMLElement | null>
-  open: boolean
-  placement: MenuPlacement
-  point?: { x: number; y: number } | null
-  depth?: number
-  durationMs?: number
-  widthMode?: MenuWidthMode
-  minWidth?: number
-  children: ReactNode
-}
-
-export function MenuPortal({
-  anchorRef,
-  alignRef,
-  open,
-  placement,
-  point,
-  depth = 0,
-  durationMs = COLLAPSIBLE_GRID_DURATION_MS,
-  widthMode = 'intrinsic',
-  minWidth,
-  children,
-  style,
-  ...rest
-}: MenuPortalProps): React.ReactElement | null {
-  const { mounted } = useOpenTransition(open, durationMs)
-  const draftPosition = useMenuAnchorPosition({
-    anchorRef,
-    alignRef,
-    active: mounted,
-    placement,
-    point,
-  })
-  const surfaceRef = useRef<HTMLDivElement>(null)
-  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null)
-  const [layout, setLayout] = useState<ResolvedMenuLayout | null>(null)
-
-  useLayoutEffect(() => {
-    setPortalRoot(document.getElementById(MENU_PORTAL_ID))
-  }, [])
-
-  useLayoutEffect(() => {
-    if (!mounted || !draftPosition || !surfaceRef.current) {
-      setLayout(null)
-      return
-    }
-
-    const anchorElement = anchorRef.current
-    const anchorRect =
-      placement === 'at-point' && point
-        ? {
-            top: point.y,
-            bottom: point.y,
-            left: point.x,
-            right: point.x,
-            width: 0,
-            height: 0,
-          }
-        : anchorElement?.getBoundingClientRect()
-
-    if (!anchorRect) {
-      setLayout(null)
-      return
-    }
-
-    const menuRect = surfaceRef.current.getBoundingClientRect()
-
-    setLayout(
-      resolveMenuViewportLayout({
-        anchorRect,
-        preferredTop: draftPosition.top,
-        preferredLeft: draftPosition.left,
-        placement,
-        menuWidth: menuRect.width,
-        menuHeight: menuRect.height,
-        widthMode,
-        minWidth,
-      }),
-    )
-  }, [
-    alignRef,
-    anchorRef,
-    draftPosition,
-    minWidth,
-    mounted,
-    placement,
-    point,
-    widthMode,
-    children,
-  ])
-
-  if (!mounted || !draftPosition || !portalRoot) return null
-
-  const surfaceStyle: CSSProperties = layout
-    ? {
-        top: layout.top,
-        left: layout.left,
-        maxHeight: layout.maxHeight,
-        ...(layout.width !== undefined ? { width: layout.width } : {}),
-        ...style,
-      }
-    : {
-        top: draftPosition.top,
-        left: draftPosition.left,
-        ...style,
-      }
-
-  return createPortal(
-    <StyledSurface
-      ref={surfaceRef}
-      data-platform-menu-surface
-      $depth={depth}
-      style={surfaceStyle}
-      {...rest}
-    >
-      {children}
-    </StyledSurface>,
-    portalRoot,
-  )
-}
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  type ReactNode,
+  type RefObject,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { styled } from 'styled-components'
+import {
+  COLLAPSIBLE_GRID_DURATION_MS,
+  useOpenTransition,
+} from '../containers/useOpenTransition.js'
+import { MENU_PORTAL_ID } from './menuPortalConstants.js'
+import {
+  resolveMenuViewportLayout,
+  type MenuWidthMode,
+  type ResolvedMenuLayout,
+} from './menuViewportPosition.js'
+import {
+  useMenuAnchorPosition,
+  type MenuPlacement,
+} from './useMenuAnchorPosition.js'
+
+//#region styled-components
+
+const StyledSurface = styled.div<{ $depth: number }>`
+  position: fixed;
+  z-index: calc(
+    var(--platform-z-index-zi-app-modal, 1000) + 20 + ${p => p.$depth}
+  );
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`
+
+//#endregion
+
+export interface MenuPortalProps
+  extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+  anchorRef: RefObject<HTMLElement | null>
+  /** Section trigger; used with `below-menubar-start` for horizontal alignment. */
+  alignRef?: RefObject<HTMLElement | null>
+  open: boolean
+  placement: MenuPlacement
+  point?: { x: number; y: number } | null
+  depth?: number
+  durationMs?: number
+  widthMode?: MenuWidthMode
+  minWidth?: number
+  children: ReactNode
+}
+
+export function MenuPortal({
+  anchorRef,
+  alignRef,
+  open,
+  placement,
+  point,
+  depth = 0,
+  durationMs = COLLAPSIBLE_GRID_DURATION_MS,
+  widthMode = 'intrinsic',
+  minWidth,
+  children,
+  style,
+  ...rest
+}: MenuPortalProps): React.ReactElement | null {
+  const { mounted } = useOpenTransition(open, durationMs)
+  const draftPosition = useMenuAnchorPosition({
+    anchorRef,
+    alignRef,
+    active: mounted,
+    placement,
+    point,
+  })
+  const surfaceRef = useRef<HTMLDivElement>(null)
+  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null)
+  const [layout, setLayout] = useState<ResolvedMenuLayout | null>(null)
+
+  useLayoutEffect(() => {
+    setPortalRoot(document.getElementById(MENU_PORTAL_ID))
+  }, [])
+
+  useLayoutEffect(() => {
+    if (!mounted || !draftPosition || !surfaceRef.current) {
+      setLayout(null)
+      return
+    }
+
+    const anchorElement = anchorRef.current
+    const anchorRect =
+      placement === 'at-point' && point
+        ? {
+            top: point.y,
+            bottom: point.y,
+            left: point.x,
+            right: point.x,
+            width: 0,
+            height: 0,
+          }
+        : anchorElement?.getBoundingClientRect()
+
+    if (!anchorRect) {
+      setLayout(null)
+      return
+    }
+
+    const menuRect = surfaceRef.current.getBoundingClientRect()
+
+    setLayout(
+      resolveMenuViewportLayout({
+        anchorRect,
+        preferredTop: draftPosition.top,
+        preferredLeft: draftPosition.left,
+        placement,
+        menuWidth: menuRect.width,
+        menuHeight: menuRect.height,
+        widthMode,
+        minWidth,
+      }),
+    )
+  }, [
+    alignRef,
+    anchorRef,
+    draftPosition,
+    minWidth,
+    mounted,
+    placement,
+    point,
+    widthMode,
+    children,
+  ])
+
+  if (!mounted || !draftPosition || !portalRoot) return null
+
+  const surfaceStyle: CSSProperties = layout
+    ? {
+        top: layout.top,
+        left: layout.left,
+        maxHeight: layout.maxHeight,
+        ...(layout.width !== undefined ? { width: layout.width } : {}),
+        ...style,
+      }
+    : {
+        top: draftPosition.top,
+        left: draftPosition.left,
+        ...style,
+      }
+
+  return createPortal(
+    <StyledSurface
+      ref={surfaceRef}
+      data-platform-menu-surface
+      $depth={depth}
+      style={surfaceStyle}
+      {...rest}
+    >
+      {children}
+    </StyledSurface>,
+    portalRoot,
+  )
+}

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

@@ -1,6 +1,6 @@
-import { MENU_PORTAL_ID } from './menuPortalConstants.js'
-
-/** Mount once under `ThemeProvider`; all menu surfaces portal here. */
-export function MenuPortalLayer(): React.ReactElement {
-  return <div id={MENU_PORTAL_ID} />
-}
+import { MENU_PORTAL_ID } from './menuPortalConstants.js'
+
+/** Mount once under `ThemeProvider`; all menu surfaces portal here. */
+export function MenuPortalLayer(): React.ReactElement {
+  return <div id={MENU_PORTAL_ID} />
+}