@ciderpress/ui 1.0.0-rc.1 → 1.0.0-rc.10

package/dist/theme/components/nav/ciderpress-nav-hamburger.tsx

@@ -1,3 +1,4 @@
+import { match } from 'massaman/match'
 import { useState } from 'react'
 import type React from 'react'
 import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
@@ -71,15 +72,12 @@ export function CiderpressNavHamburger(props: CiderpressNavHamburgerProps): Reac
             </header>
 
             <nav className="cp-nav-drawer__nav" aria-label="Primary">
-              {props.navItems.map((item) => (
-                <RouteLink
-                  key={item.link}
-                  href={item.link}
-                  className="cp-nav-drawer__link"
-                  onClick={() => setOpen(false)}
-                >
-                  {item.text}
-                </RouteLink>
+              {props.navItems.map((item, index) => (
+                <DrawerNavEntry
+                  key={`${drawerItemKey(item)}::${index}`}
+                  item={item}
+                  onNavigate={() => setOpen(false)}
+                />
               ))}
             </nav>
 
@@ -110,3 +108,91 @@ export function CiderpressNavHamburger(props: CiderpressNavHamburgerProps): Reac
 }
 
 export { CiderpressNavHamburger as default }
+
+/**
+ * Render one entry in the mobile drawer nav. Leaf items are a single
+ * link; dropdown parents become a collapsible {@link DrawerNavGroup}.
+ *
+ * @private
+ * @param props - The nav item and a callback to close the drawer.
+ * @returns The drawer entry element.
+ */
+function DrawerNavEntry(props: {
+  readonly item: CiderpressNavMenuItem
+  readonly onNavigate: () => void
+}): React.ReactElement {
+  const { item, onNavigate } = props
+  const children = item.items ?? []
+  return match(children.length > 0)
+    .with(true, () => <DrawerNavGroup item={item} onNavigate={onNavigate} />)
+    .otherwise(() => (
+      <RouteLink href={item.link ?? '#'} className="cp-nav-drawer__link" onClick={onNavigate}>
+        {item.text}
+      </RouteLink>
+    ))
+}
+
+/**
+ * A collapsible dropdown section in the mobile drawer: a tappable header
+ * that toggles its child links open/closed. Collapsed by default so a
+ * deep nav doesn't fill the drawer on open.
+ *
+ * @private
+ * @param props - The dropdown item and a callback to close the drawer.
+ * @returns The collapsible group element.
+ */
+function DrawerNavGroup(props: {
+  readonly item: CiderpressNavMenuItem
+  readonly onNavigate: () => void
+}): React.ReactElement {
+  const { item, onNavigate } = props
+  const [expanded, setExpanded] = useState(false)
+  const children = item.items ?? []
+  return (
+    <div className="cp-nav-drawer__group" role="group" aria-label={item.text}>
+      <button
+        type="button"
+        className="cp-nav-drawer__group-toggle"
+        onClick={() => setExpanded((current) => !current)}
+        aria-expanded={expanded}
+      >
+        <span>{item.text}</span>
+        <Icon
+          className="cp-nav-drawer__group-chevron"
+          icon="pixelarticons:chevron-down"
+          width={16}
+          height={16}
+        />
+      </button>
+      {expanded && (
+        <div className="cp-nav-drawer__group-items">
+          {children.map((child, index) => (
+            <RouteLink
+              key={`${drawerItemKey(child)}::${index}`}
+              href={child.link ?? '#'}
+              className="cp-nav-drawer__link cp-nav-drawer__link--nested"
+              onClick={onNavigate}
+            >
+              {child.text}
+            </RouteLink>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Stable React key for a drawer nav item — its link when present,
+ * otherwise its label (dropdown parents may have no link of their own).
+ *
+ * @private
+ * @param item - Nav item to key.
+ * @returns Key string.
+ */
+function drawerItemKey(item: CiderpressNavMenuItem): string {
+  if (item.link !== undefined && item.link !== '') {
+    return item.link
+  }
+  return item.text
+}

package/dist/theme/components/nav/ciderpress-nav-menu.css

@@ -50,6 +50,13 @@
   color: var(--cp-nav-menu-item-color-active, var(--cp-c-brand-1, currentColor));
 }
 
+/* Measurement-only: dropdown items render a label→chevron gap in the
+   live toggle, so the hidden measure span must include it to size
+   correctly. Applied only in the measure row. */
+.cp-nav-menu__item--measured-dropdown {
+  gap: 4px;
+}
+
 /* ── Hidden measurement layer ──────────────────────────────────────────
    Renders every item at full natural width so the JS layer always has
    a stable per-item measurement no matter how narrow the live menu
@@ -128,3 +135,84 @@
 .cp-nav-menu__overflow-item--active {
   color: var(--cp-nav-menu-item-color-active, var(--cp-c-brand-1, currentColor));
 }
+
+/* ── Inline dropdown (nav item with children) ──────────────────────── */
+.cp-nav-menu__dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.cp-nav-menu__dropdown-toggle {
+  gap: 4px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.cp-nav-menu__dropdown-popover {
+  position: absolute;
+  /* Sit below the toggle with breathing room. The visual gap is bridged
+     by the transparent `::before` band below, so the whole toggle→menu
+     path stays inside the hover region and moving toward the menu never
+     crosses empty space that would trigger a close. */
+  top: calc(100% + 12px);
+  /* Anchor to the toggle's right edge. The primary nav is right-aligned
+     in the topbar, so opening leftward keeps the popover on-screen
+     instead of overflowing the viewport's right edge. */
+  right: 0;
+  z-index: 60;
+  min-width: 200px;
+  margin: 0;
+  padding: 6px;
+  list-style: none;
+  background: var(--cp-nav-menu-overflow-bg, var(--cp-c-bg, #1e1e2e));
+  border: 1px solid var(--cp-nav-menu-overflow-border, var(--cp-c-border, #313244));
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
+}
+
+/* Invisible bridge: a transparent band spanning the visual gap between
+   the toggle and the popover surface (and a little to each side), so the
+   pointer stays within the dropdown's hover region the whole way down.
+   Without it, the 6px gap is dead space and mouse-leave fires mid-move. */
+.cp-nav-menu__dropdown-popover::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: -12px;
+  right: -12px;
+  /* Taller than the 12px offset so the band overlaps both the toggle and
+     the popover surface — no hairline seam for the pointer to slip through. */
+  height: 16px;
+}
+
+/* ── Dropdown parents collapsed into the "More" popover ────────────── */
+.cp-nav-menu__overflow-group {
+  padding: 4px 0;
+}
+
+.cp-nav-menu__overflow-group + .cp-nav-menu__overflow-group,
+.cp-nav-menu__overflow-item + .cp-nav-menu__overflow-group {
+  margin-top: 4px;
+  border-top: 1px solid var(--cp-nav-menu-overflow-border, var(--cp-c-border, #313244));
+}
+
+.cp-nav-menu__overflow-group-label {
+  display: block;
+  padding: 6px 12px 2px;
+  /* text-2 (not text-3): these small uppercase labels need AA contrast,
+     and text-3's low alpha fails 4.5:1 on the light themes. */
+  color: var(--cp-c-text-2, #9399b2);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.cp-nav-menu__overflow-sublist {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}