banhaten 0.1.0 → 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,50 +131,261 @@ 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,
   defaultOpen = true,
   modal = false,
   onOpenChange,
   open,
+  role = "menu",
+  width,
+  asChild = false,
   ...props
 }: MenuProps) {
-  const rootProps =
-    open === undefined
-      ? { defaultOpen, onOpenChange }
-      : { open, onOpenChange }
+  const Comp = asChild ? Slot : "div"
+  const isOpen = open ?? defaultOpen
+
+  void modal
+  void onOpenChange
+
+  if (!isOpen) return null
 
   return (
-    <MenuRoot modal={modal} {...rootProps}>
-      <MenuContent forceMount {...props}>
+    <MenuStaticContext.Provider value>
+      <Comp
+        data-slot="menu"
+        data-width={width ?? "menu"}
+        role={role}
+        className={cn(menuVariants({ width, className }))}
+        {...props}
+      >
         {children}
-      </MenuContent>
-    </MenuRoot>
+      </Comp>
+    </MenuStaticContext.Provider>
   )
 }
 
@@ -175,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",
@@ -188,9 +436,30 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
   ...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-item"
+      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.Item
       asChild
@@ -198,27 +467,62 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
       onSelect={onSelect}
       textValue={textValue ?? getMenuItemTextValue(children)}
     >
-      <Comp
-        aria-disabled={isDisabled ? true : undefined}
-        data-disabled={isDisabled ? "true" : "false"}
-        data-kind={selectedKind}
-        data-slot="menu-item"
-        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>
+      {item}
     </DropdownMenuPrimitive.Item>
   )
 })
 
 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>
 
@@ -620,42 +924,45 @@ function MenuLabel({
   role = "presentation",
   ...props
 }: MenuLabelProps) {
-  return (
-    <DropdownMenuPrimitive.Label asChild>
-      <div
-        data-slot="menu-label"
-        role={role}
-        className={cn(
-          "flex h-[var(--bh-menu-item-label-height)] w-full items-center gap-0 bg-[var(--bh-menu-item-bg)] px-[var(--bh-menu-label-padding-x)] py-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
-          className
-        )}
-        {...props}
-      >
-        {children ?? (
-          <>
-            {hasRenderableContent(label) ? (
-              <span
-                data-slot="menu-label-primary"
-                dir="auto"
-                className="min-w-0 flex-1 truncate text-start font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-default)]"
-              >
-                {label}
-              </span>
-            ) : null}
-            {hasRenderableContent(caption) ? (
-              <span
-                data-slot="menu-label-caption"
-                dir="auto"
-                className="shrink-0 whitespace-nowrap text-end font-[var(--bh-text-body-xs-regular-font-weight)] text-[var(--bh-content-subtle)]"
-              >
-                {caption}
-              </span>
-            ) : null}
-          </>
-        )}
-      </div>
-    </DropdownMenuPrimitive.Label>
+  const isStaticMenu = React.useContext(MenuStaticContext)
+  const labelContent = (
+    <div
+      data-slot="menu-label"
+      role={role}
+      className={cn(
+        "flex h-[var(--bh-menu-item-label-height)] w-full items-center gap-0 bg-[var(--bh-menu-item-bg)] px-[var(--bh-menu-label-padding-x)] py-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          {hasRenderableContent(label) ? (
+            <span
+              data-slot="menu-label-primary"
+              dir="auto"
+              className="min-w-0 flex-1 truncate text-start font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-default)]"
+            >
+              {label}
+            </span>
+          ) : null}
+          {hasRenderableContent(caption) ? (
+            <span
+              data-slot="menu-label-caption"
+              dir="auto"
+              className="shrink-0 whitespace-nowrap text-end font-[var(--bh-text-body-xs-regular-font-weight)] text-[var(--bh-content-subtle)]"
+            >
+              {caption}
+            </span>
+          ) : null}
+        </>
+      )}
+    </div>
   )
+
+  if (isStaticMenu) return labelContent
+
+  return <DropdownMenuPrimitive.Label asChild>{labelContent}</DropdownMenuPrimitive.Label>
 }
 
 function hasRenderableContent(content: React.ReactNode) {
@@ -696,21 +1003,99 @@ function MenuSeparator({
   role = "separator",
   ...props
 }: React.ComponentProps<"div">) {
-  return (
-    <DropdownMenuPrimitive.Separator asChild>
-      <div
-        data-slot="menu-separator"
-        role={role}
-        className={cn(
-          "flex h-[var(--bh-menu-item-divider-height)] w-full items-center py-[var(--bh-menu-divider-padding-y)]",
-          className
-        )}
-        {...props}
-      >
-        <span className="block w-full border-t border-[var(--bh-border-subtle)]" />
-      </div>
-    </DropdownMenuPrimitive.Separator>
+  const isStaticMenu = React.useContext(MenuStaticContext)
+  const separator = (
+    <div
+      data-slot="menu-separator"
+      role={role}
+      className={cn(
+        "flex h-[var(--bh-menu-item-divider-height)] w-full items-center py-[var(--bh-menu-divider-padding-y)]",
+        className
+      )}
+      {...props}
+    >
+      <span className="block w-full border-t border-[var(--bh-border-subtle)]" />
+    </div>
   )
+
+  if (isStaticMenu) return separator
+
+  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 {
@@ -733,6 +1118,9 @@ export {
   MenuPortal,
   MenuRoot,
   MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
   MenuTrigger,
   menuItemContentVariants,
   menuItemIconVariants,
@@ -749,6 +1137,8 @@ export type {
   MenuItemIconProps,
   MenuItemKind,
   MenuItemProps,
+  MenuSubContentProps,
+  MenuSubTriggerProps,
   MenuItemSwitchProps,
   MenuItemState,
   MenuLabelProps,

package/registry/components/pagination.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -444,29 +445,16 @@ function PaginationPageItem({
 }
 
 function PaginationArrowIcon({ type }: { type: "previous" | "next" }) {
+  const Icon = type === "previous" ? ChevronLeftIcon : ChevronRightIcon
+
   return (
-    <svg
+    <Icon
       aria-hidden="true"
       data-rtl-flip="true"
       data-slot="pagination-icon"
-      fill="none"
       focusable="false"
-      viewBox="0 0 20 20"
-    >
-      {type === "previous" ? (
-        <path
-          d="M2.357 5.30332L6.48183 9.42807L5.30333 10.6066L0 5.30332L5.30333 0L6.48183 1.17851L2.357 5.30332Z"
-          fill="currentColor"
-          transform="translate(6.666 4.697)"
-        />
-      ) : (
-        <path
-          d="M4.12482 5.30332L0 1.17851L1.17852 0L6.48182 5.30332L1.17852 10.6066L0 9.42807L4.12482 5.30332Z"
-          fill="currentColor"
-          transform="translate(6.852 4.697)"
-        />
-      )}
-    </svg>
+      strokeWidth={2.25}
+    />
   )
 }