banhaten 0.1.3 → 0.3.0

package/registry/components/menu.tsx

@@ -4,39 +4,21 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 type MenuWidth = "menu" | "default" | "multiline" | "action" | "auto"
 type MenuItemKind = "default" | "multiline" | "action" | "progress" | "button"
 type MenuItemState = "default" | "disabled"
 type MenuItemIconPosition = "leading" | "trailing"
 type MenuItemAvatarSize = "sm" | "lg"
-type MenuCollisionShift = {
-  x: number
-  y: number
-}
 type MenuCollisionPadding = NonNullable<
   React.ComponentProps<typeof DropdownMenuPrimitive.Content>["collisionPadding"]
 >
-type MenuCollisionPaddingSides = {
-  bottom: number
-  left: number
-  right: number
-  top: number
-}
-type MenuResizeObserverConstructor = new (
-  callback: () => void
-) => {
-  disconnect: () => void
-  observe: (target: Element) => void
-}
 
 // Default Radix collisionPadding mirrors --bh-space-md-8.
 const MENU_COLLISION_PADDING_PX = 8
 // Radix sideOffset is numeric; this mirrors --bh-space-xs-4.
 const MENU_SUBCONTENT_SIDE_OFFSET_PX = 4
-const zeroMenuCollisionShift: MenuCollisionShift = { x: 0, y: 0 }
-const useSafeLayoutEffect =
-  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
 
 const menuVariants = cva(
   "flex flex-col items-start gap-[var(--bh-menu-gap)] overflow-hidden rounded-[var(--bh-menu-radius)] bg-[var(--bh-menu-bg)] py-[var(--bh-menu-padding-y)] shadow-[var(--shadow-menu)]",
@@ -119,14 +101,7 @@ const menuItemIconVariants = cva(
   }
 )
 
-type MenuProps = React.ComponentProps<"div"> &
-  VariantProps<typeof menuVariants> & {
-    asChild?: boolean
-    defaultOpen?: boolean
-    modal?: boolean
-    onOpenChange?: (open: boolean) => void
-    open?: boolean
-  }
+type MenuProps = React.ComponentProps<typeof DropdownMenuPrimitive.Root>
 
 type MenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content> &
   VariantProps<typeof menuVariants> & {
@@ -143,147 +118,38 @@ const MenuSub = DropdownMenuPrimitive.Sub
 const MenuTrigger = DropdownMenuPrimitive.Trigger
 const MenuStaticContext = React.createContext(false)
 
+function Menu({ dir, ...props }: MenuProps) {
+  const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
+  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
+
+  return (
+    <span className="contents" data-slot="menu-root-boundary" ref={directionBoundaryRef}>
+      <MenuRoot dir={resolvedDirection} {...props} />
+    </span>
+  )
+}
+
 type MenuSurfaceProps = React.ComponentProps<"div"> &
   VariantProps<typeof menuVariants> & {
     asChild?: boolean
-    avoidViewportNudge?: boolean
-    collisionPadding?: MenuCollisionPadding
   }
 
 const MenuSurface = React.forwardRef<HTMLDivElement, MenuSurfaceProps>(function MenuSurface({
   asChild = false,
-  avoidViewportNudge = true,
   children,
   className,
-  collisionPadding = MENU_COLLISION_PADDING_PX,
   role = "menu",
-  style,
   width,
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "div"
-  const surfaceRef = React.useRef<HTMLDivElement | null>(null)
-  const collisionShiftRef = React.useRef(zeroMenuCollisionShift)
-  const [collisionShift, setCollisionShift] = React.useState(
-    zeroMenuCollisionShift
-  )
-
-  function updateCollisionShift(nextShift: MenuCollisionShift) {
-    collisionShiftRef.current = nextShift
-    setCollisionShift((currentShift) =>
-      isSameMenuCollisionShift(currentShift, nextShift)
-        ? currentShift
-        : nextShift
-    )
-  }
-
-  function setSurfaceRef(node: HTMLDivElement | null) {
-    surfaceRef.current = node
-
-    if (typeof ref === "function") {
-      ref(node)
-    } else if (ref) {
-      ref.current = node
-    }
-  }
-
-  useSafeLayoutEffect(() => {
-    if (!avoidViewportNudge) {
-      updateCollisionShift(zeroMenuCollisionShift)
-      return
-    }
-
-    const node = surfaceRef.current
-    if (!node) return
-    const surfaceNode: HTMLDivElement = node
-
-    const ownerWindow = surfaceNode.ownerDocument.defaultView
-    if (!ownerWindow) return
-    const surfaceWindow: Window = ownerWindow
-
-    let animationFrame = 0
-    const resolvedCollisionPadding = resolveMenuCollisionPadding(collisionPadding)
-    const requestFrame =
-      typeof surfaceWindow.requestAnimationFrame === "function"
-        ? surfaceWindow.requestAnimationFrame.bind(surfaceWindow)
-        : (callback: FrameRequestCallback) =>
-            surfaceWindow.setTimeout(
-              () => callback(surfaceWindow.performance.now()),
-              0
-            )
-    const cancelFrame =
-      typeof surfaceWindow.cancelAnimationFrame === "function"
-        ? surfaceWindow.cancelAnimationFrame.bind(surfaceWindow)
-        : surfaceWindow.clearTimeout.bind(surfaceWindow)
-
-    function measureCollisionShift() {
-      animationFrame = 0
-
-      const rect = surfaceNode.getBoundingClientRect()
-      const currentShift = collisionShiftRef.current
-      const unshiftedRect = {
-        bottom: rect.bottom - currentShift.y,
-        left: rect.left - currentShift.x,
-        right: rect.right - currentShift.x,
-        top: rect.top - currentShift.y,
-      }
-
-      updateCollisionShift(
-        getMenuCollisionShift({
-          collisionPadding: resolvedCollisionPadding,
-          rect: unshiftedRect,
-          viewportHeight: surfaceWindow.innerHeight,
-          viewportWidth: surfaceWindow.innerWidth,
-        })
-      )
-    }
-
-    function queueCollisionShiftMeasure() {
-      if (animationFrame) {
-        cancelFrame(animationFrame)
-      }
-
-      animationFrame = requestFrame(measureCollisionShift)
-    }
-
-    queueCollisionShiftMeasure()
-    surfaceWindow.addEventListener("resize", queueCollisionShiftMeasure)
-    surfaceWindow.addEventListener("scroll", queueCollisionShiftMeasure, true)
-
-    const ResizeObserver = (
-      surfaceWindow as Window & {
-        ResizeObserver?: MenuResizeObserverConstructor
-      }
-    ).ResizeObserver
-    const resizeObserver = ResizeObserver
-      ? new ResizeObserver(queueCollisionShiftMeasure)
-      : undefined
-    resizeObserver?.observe(surfaceNode)
-
-    return () => {
-      if (animationFrame) {
-        cancelFrame(animationFrame)
-      }
-
-      surfaceWindow.removeEventListener("resize", queueCollisionShiftMeasure)
-      surfaceWindow.removeEventListener("scroll", queueCollisionShiftMeasure, true)
-      resizeObserver?.disconnect()
-    }
-  }, [avoidViewportNudge, collisionPadding, width])
 
   return (
     <Comp
       data-slot="menu"
       data-width={width ?? "menu"}
-      ref={setSurfaceRef}
+      ref={ref}
       role={role}
-      style={{
-        ...style,
-        transform: mergeMenuTransforms(
-          getMenuCollisionTransform(collisionShift),
-          style?.transform
-        ),
-      }}
       className={cn(
         menuVariants({ width }),
         "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto",
@@ -314,7 +180,6 @@ const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function
       <MenuSurface
         asChild={asChild}
         className={className}
-        collisionPadding={collisionPadding}
         ref={ref}
         role={role}
         width={width}
@@ -345,7 +210,6 @@ const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(fun
       <MenuSurface
         asChild={asChild}
         className={className}
-        collisionPadding={collisionPadding}
         ref={ref}
         role={role}
         width={width}
@@ -356,37 +220,30 @@ const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(fun
   )
 })
 
-function Menu({
+type MenuPreviewProps = React.ComponentProps<"div"> &
+  VariantProps<typeof menuVariants> & {
+    asChild?: boolean
+  }
+
+function MenuPreview({
   children,
   className,
-  defaultOpen = true,
-  modal = false,
-  onOpenChange,
-  open,
   role = "menu",
   width,
   asChild = false,
   ...props
-}: MenuProps) {
-  const Comp = asChild ? Slot : "div"
-  const isOpen = open ?? defaultOpen
-
-  void modal
-  void onOpenChange
-
-  if (!isOpen) return null
-
+}: MenuPreviewProps) {
   return (
     <MenuStaticContext.Provider value>
-      <Comp
-        data-slot="menu"
-        data-width={width ?? "menu"}
+      <MenuSurface
+        asChild={asChild}
+        className={className}
         role={role}
-        className={cn(menuVariants({ width, className }))}
+        width={width}
         {...props}
       >
         {children}
-      </Comp>
+      </MenuSurface>
     </MenuStaticContext.Provider>
   )
 }
@@ -426,11 +283,12 @@ type MenuSubTriggerProps = React.ComponentProps<"div"> &
   }
 
 const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem({
+  "aria-checked": ariaChecked,
   className,
   kind = "default",
   disabled = false,
   asChild = false,
-  role = "menuitem",
+  role,
   tabIndex,
   children,
   onSelect,
@@ -441,15 +299,23 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
   const isStaticMenu = React.useContext(MenuStaticContext)
   const selectedKind: MenuItemKind = kind ?? "default"
   const isDisabled = disabled
+  const switchState = findMenuItemSwitchState(children)
+  const resolvedRole = role ??
+    (switchState === undefined ? "menuitem" : "menuitemcheckbox")
+  const resolvedChecked =
+    resolvedRole === "menuitemcheckbox"
+      ? (ariaChecked ?? switchState ?? false)
+      : undefined
 
   const item = (
     <Comp
+      aria-checked={resolvedChecked}
       aria-disabled={isDisabled ? true : undefined}
       data-disabled={isDisabled ? "true" : "false"}
       data-kind={selectedKind}
       data-slot="menu-item"
       ref={ref}
-      role={role}
+      role={resolvedRole}
       tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
       className={cn(menuItemVariants({ kind: selectedKind, className }))}
       {...props}
@@ -462,6 +328,20 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
 
   if (isStaticMenu) return item
 
+  if (switchState !== undefined) {
+    return (
+      <DropdownMenuPrimitive.CheckboxItem
+        asChild
+        checked={switchState}
+        disabled={isDisabled}
+        onSelect={onSelect}
+        textValue={textValue ?? getMenuItemTextValue(children)}
+      >
+        {item}
+      </DropdownMenuPrimitive.CheckboxItem>
+    )
+  }
+
   return (
     <DropdownMenuPrimitive.Item
       asChild
@@ -476,6 +356,27 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
 
 MenuItem.displayName = "MenuItem"
 
+function findMenuItemSwitchState(children: React.ReactNode): boolean | undefined {
+  let state: boolean | undefined
+
+  React.Children.forEach(children, (child) => {
+    if (state !== undefined || !React.isValidElement(child)) return
+
+    const element = child as React.ReactElement<{
+      active?: boolean
+      children?: React.ReactNode
+    }>
+    if (element.type === MenuItemSwitch) {
+      state = Boolean(element.props.active)
+      return
+    }
+
+    state = findMenuItemSwitchState(element.props.children)
+  })
+
+  return state
+}
+
 const MenuSubTrigger = React.forwardRef<HTMLDivElement, MenuSubTriggerProps>(function MenuSubTrigger({
   className,
   kind = "default",
@@ -719,7 +620,10 @@ function MenuItemBadge({
   )
 }
 
-type MenuItemSwitchProps = Omit<React.ComponentProps<"span">, "role"> & {
+type MenuItemSwitchProps = Omit<
+  React.ComponentProps<"span">,
+  "aria-checked" | "aria-label" | "aria-labelledby" | "role"
+> & {
   active?: boolean
   disabled?: boolean
 }
@@ -732,12 +636,10 @@ function MenuItemSwitch({
 }: MenuItemSwitchProps) {
   return (
     <span
-      aria-checked={active}
-      aria-disabled={disabled || undefined}
+      aria-hidden="true"
       data-active={active ? "true" : "false"}
       data-disabled={disabled ? "true" : "false"}
       data-slot="menu-item-switch"
-      role="switch"
       className={cn(
         "flex h-[var(--bh-menu-switch-height)] w-[var(--bh-menu-switch-width)] shrink-0 items-center rounded-[var(--bh-radius-full)] p-[var(--bh-menu-switch-padding)] group-data-[disabled=true]/menu-item:bg-[var(--bh-interactive-switch-disabled)]",
         active
@@ -820,6 +722,8 @@ function MenuProgress({
   ...props
 }: MenuProgressProps) {
   const clampedValue = Math.min(100, Math.max(0, value))
+  const labelId = React.useId()
+  const hasLabel = hasRenderableContent(label)
 
   return (
     <div
@@ -831,6 +735,8 @@ function MenuProgress({
       {...props}
     >
       <div
+        aria-label={hasLabel ? undefined : "Progress"}
+        aria-labelledby={hasLabel ? labelId : undefined}
         aria-valuemax={100}
         aria-valuemin={0}
         aria-valuenow={clampedValue}
@@ -860,6 +766,7 @@ function MenuProgress({
             >
               {hasRenderableContent(label) ? (
                 <span
+                  id={labelId}
                   data-slot="menu-progress-label-text"
                   dir="auto"
                   className="truncate text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-default)]"
@@ -907,7 +814,7 @@ function MenuProgressSpinner({ className }: { className?: string }) {
         fill="none"
         stroke="currentColor"
         strokeLinecap="round"
-        strokeWidth="3"
+        strokeWidth="var(--bh-icon-stroke-300)"
       />
     </svg>
   )
@@ -1025,81 +932,6 @@ function MenuSeparator({
   return <DropdownMenuPrimitive.Separator asChild>{separator}</DropdownMenuPrimitive.Separator>
 }
 
-function getMenuCollisionShift({
-  collisionPadding,
-  rect,
-  viewportHeight,
-  viewportWidth,
-}: {
-  collisionPadding: MenuCollisionPaddingSides
-  rect: Pick<DOMRect, "bottom" | "left" | "right" | "top">
-  viewportHeight: number
-  viewportWidth: number
-}): MenuCollisionShift {
-  let x = 0
-  let y = 0
-  const minX = collisionPadding.left
-  const minY = collisionPadding.top
-  const maxX = viewportWidth - collisionPadding.right
-  const maxY = viewportHeight - collisionPadding.bottom
-
-  if (rect.left < minX) {
-    x = minX - rect.left
-  } else if (rect.right > maxX) {
-    x = maxX - rect.right
-  }
-
-  if (rect.top < minY) {
-    y = minY - rect.top
-  } else if (rect.bottom > maxY) {
-    y = maxY - rect.bottom
-  }
-
-  return { x: Math.round(x), y: Math.round(y) }
-}
-
-function resolveMenuCollisionPadding(
-  collisionPadding: MenuCollisionPadding
-): MenuCollisionPaddingSides {
-  if (typeof collisionPadding === "number") {
-    const padding = Math.max(0, collisionPadding)
-
-    return {
-      bottom: padding,
-      left: padding,
-      right: padding,
-      top: padding,
-    }
-  }
-
-  return {
-    bottom: Math.max(0, collisionPadding.bottom ?? 0),
-    left: Math.max(0, collisionPadding.left ?? 0),
-    right: Math.max(0, collisionPadding.right ?? 0),
-    top: Math.max(0, collisionPadding.top ?? 0),
-  }
-}
-
-function getMenuCollisionTransform(shift: MenuCollisionShift) {
-  return `translate(${Math.round(shift.x)}px, ${Math.round(shift.y)}px)`
-}
-
-function mergeMenuTransforms(
-  collisionTransform: string,
-  customTransform: string | undefined
-) {
-  return customTransform
-    ? `${collisionTransform} ${customTransform}`
-    : collisionTransform
-}
-
-function isSameMenuCollisionShift(
-  currentShift: MenuCollisionShift,
-  nextShift: MenuCollisionShift
-) {
-  return currentShift.x === nextShift.x && currentShift.y === nextShift.y
-}
-
 export {
   Menu,
   MenuCaption,
@@ -1117,12 +949,14 @@ export {
   MenuItemTitle,
   MenuLabel,
   MenuProgress,
+  MenuPreview,
   MenuPortal,
   MenuRoot,
   MenuSeparator,
   MenuSub,
   MenuSubContent,
   MenuSubTrigger,
+  MenuSurface,
   MenuTrigger,
   menuItemContentVariants,
   menuItemIconVariants,
@@ -1146,5 +980,7 @@ export type {
   MenuLabelProps,
   MenuProgressProps,
   MenuProps,
+  MenuPreviewProps,
+  MenuSurfaceProps,
   MenuWidth,
 }

package/registry/components/menubar.tsx

@@ -78,7 +78,7 @@ const menuContentClassName =
   "z-[var(--bh-z-popover)] min-w-[var(--bh-menu-width)] overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] shadow-[var(--shadow-menu)]"
 
 const menuItemClassName =
-  "relative flex min-h-[var(--bh-menu-item-min-height)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled]:pointer-events-none data-[disabled]:text-[var(--bh-content-disabled)] data-[highlighted]:bg-[var(--bh-menu-item-hover-bg)]"
+  "relative flex min-h-[var(--bh-menu-item-default-height)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled]:pointer-events-none data-[disabled]:text-[var(--bh-content-disabled)] data-[highlighted]:bg-[var(--bh-menu-item-hover-bg)]"
 
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,