banhaten 0.1.1 → 0.1.2

package/registry/components/menu.tsx

@@ -10,6 +10,31 @@ 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
+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)]",
@@ -106,32 +131,229 @@ type MenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Conten
     asChild?: boolean
   }
 
+type MenuSubContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.SubContent> &
+  VariantProps<typeof menuVariants> & {
+    asChild?: boolean
+  }
+
 const MenuRoot = DropdownMenuPrimitive.Root
+const MenuSub = DropdownMenuPrimitive.Sub
 const MenuTrigger = DropdownMenuPrimitive.Trigger
 const MenuStaticContext = React.createContext(false)
 
+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}
+      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",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+})
+
 const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent({
+  children,
   className,
+  collisionPadding = MENU_COLLISION_PADDING_PX,
   width,
   asChild = false,
   role = "menu",
   ...props
 }, ref) {
-  const Comp = asChild ? Slot : "div"
-
   return (
-    <DropdownMenuPrimitive.Content asChild {...props}>
-      <Comp
-        data-slot="menu"
-        data-width={width ?? "menu"}
+    <DropdownMenuPrimitive.Content
+      asChild
+      collisionPadding={collisionPadding}
+      {...props}
+    >
+      <MenuSurface
+        asChild={asChild}
+        className={className}
+        collisionPadding={collisionPadding}
         ref={ref}
         role={role}
-        className={cn(menuVariants({ width, className }))}
-      />
+        width={width}
+      >
+        {children}
+      </MenuSurface>
     </DropdownMenuPrimitive.Content>
   )
 })
 
+const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(function MenuSubContent({
+  children,
+  className,
+  collisionPadding = MENU_COLLISION_PADDING_PX,
+  sideOffset = 4,
+  width,
+  asChild = false,
+  role = "menu",
+  ...props
+}, ref) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      asChild
+      collisionPadding={collisionPadding}
+      sideOffset={sideOffset}
+      {...props}
+    >
+      <MenuSurface
+        asChild={asChild}
+        className={className}
+        collisionPadding={collisionPadding}
+        ref={ref}
+        role={role}
+        width={width}
+      >
+        {children}
+      </MenuSurface>
+    </DropdownMenuPrimitive.SubContent>
+  )
+})
+
 function Menu({
   children,
   className,
@@ -189,6 +411,18 @@ type MenuItemProps = React.ComponentProps<"div"> &
     disabled?: boolean
   }
 
+type MenuSubTriggerPrimitiveProps = Pick<
+  React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>,
+  "textValue"
+>
+
+type MenuSubTriggerProps = React.ComponentProps<"div"> &
+  VariantProps<typeof menuItemVariants> &
+  MenuSubTriggerPrimitiveProps & {
+    asChild?: boolean
+    disabled?: boolean
+  }
+
 const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem({
   className,
   kind = "default",
@@ -240,6 +474,55 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
 
 MenuItem.displayName = "MenuItem"
 
+const MenuSubTrigger = React.forwardRef<HTMLDivElement, MenuSubTriggerProps>(function MenuSubTrigger({
+  className,
+  kind = "default",
+  disabled = false,
+  asChild = false,
+  role = "menuitem",
+  tabIndex,
+  children,
+  textValue,
+  ...props
+}, ref) {
+  const Comp = asChild ? Slot : "div"
+  const isStaticMenu = React.useContext(MenuStaticContext)
+  const selectedKind: MenuItemKind = kind ?? "default"
+  const isDisabled = disabled
+
+  const item = (
+    <Comp
+      aria-disabled={isDisabled ? true : undefined}
+      data-disabled={isDisabled ? "true" : "false"}
+      data-kind={selectedKind}
+      data-slot="menu-sub-trigger"
+      ref={ref}
+      role={role}
+      tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
+      className={cn(menuItemVariants({ kind: selectedKind, className }))}
+      {...props}
+    >
+      <MenuItemContent kind={selectedKind}>
+        <MenuItemChildren kind={selectedKind}>{children}</MenuItemChildren>
+      </MenuItemContent>
+    </Comp>
+  )
+
+  if (isStaticMenu) return item
+
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      asChild
+      disabled={isDisabled}
+      textValue={textValue ?? getMenuItemTextValue(children)}
+    >
+      {item}
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+})
+
+MenuSubTrigger.displayName = "MenuSubTrigger"
+
 type MenuItemContentProps = React.ComponentProps<"div"> &
   VariantProps<typeof menuItemContentVariants>
 
@@ -740,6 +1023,81 @@ 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,
@@ -760,6 +1118,9 @@ export {
   MenuPortal,
   MenuRoot,
   MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
   MenuTrigger,
   menuItemContentVariants,
   menuItemIconVariants,
@@ -776,6 +1137,8 @@ export type {
   MenuItemIconProps,
   MenuItemKind,
   MenuItemProps,
+  MenuSubContentProps,
+  MenuSubTriggerProps,
   MenuItemSwitchProps,
   MenuItemState,
   MenuLabelProps,