@kushagradhawan/kookie-ui 0.1.125 → 0.1.126

package/src/components/_internal/base-menu.props.ts

@@ -8,8 +8,10 @@ const contentSizes = ['1', '2'] as const;
 const contentVariants = ['solid', 'soft'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
+const submenuBehaviors = ['cascade', 'drill-down'] as const;
 
-const baseMenuContentPropDefs = {
+// Base props shared between Content and SubContent
+const baseMenuSharedPropDefs = {
   size: {
     type: 'enum',
     className: 'rt-r-size',
@@ -45,6 +47,32 @@ const baseMenuContentPropDefs = {
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
+// Content-specific props (includes submenuBehavior)
+const baseMenuContentPropDefs = {
+  ...baseMenuSharedPropDefs,
+  /**
+   * Controls how submenus behave.
+   * - `cascade`: Default cascading behavior where submenus open to the side (portal-based)
+   * - `drill-down`: Mobile-friendly behavior where submenus replace the content inline
+   * Supports responsive values: `{ initial: 'drill-down', md: 'cascade' }`
+   */
+  submenuBehavior: {
+    type: 'enum',
+    values: submenuBehaviors,
+    default: 'cascade',
+    responsive: true,
+  },
+} satisfies {
+  size: PropDef<(typeof contentSizes)[number]>;
+  variant: PropDef<(typeof contentVariants)[number]>;
+  material: PropDef<(typeof materials)[number] | undefined>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  submenuBehavior: PropDef<(typeof submenuBehaviors)[number]>;
+};
+
+// SubContent props (no submenuBehavior)
+const baseMenuSubContentPropDefs = baseMenuSharedPropDefs;
+
 const baseMenuItemPropDefs = {
   ...asChildPropDef,
   ...colorPropDef,
@@ -66,7 +94,9 @@ const baseMenuRadioItemPropDefs = {
 
 export {
   baseMenuContentPropDefs,
+  baseMenuSubContentPropDefs,
   baseMenuItemPropDefs,
   baseMenuCheckboxItemPropDefs,
   baseMenuRadioItemPropDefs,
+  submenuBehaviors,
 };

package/src/components/_internal/dropdown-menu-drill-down.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import * as React from 'react';
+import type { Breakpoint, Responsive } from '../../props/prop-def.js';
+import type { submenuBehaviors } from './base-menu.props.js';
+import { _BREAKPOINTS } from '../shell.types.js';
+
+type SubmenuBehavior = (typeof submenuBehaviors)[number];
+
+/**
+ * Hook to get the current breakpoint based on window width.
+ * Returns 'initial' on the server and during initial hydration.
+ * Uses shared breakpoint values from shell.types.js.
+ */
+function useBreakpoint(): { breakpoint: Breakpoint; ready: boolean } {
+  const [currentBp, setCurrentBp] = React.useState<Breakpoint>('initial');
+  const [ready, setReady] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    // Use shared breakpoint media queries from shell.types
+    const queries = Object.entries(_BREAKPOINTS) as [keyof typeof _BREAKPOINTS, string][];
+    const mqls = queries.map(([k, q]) => [k, window.matchMedia(q)] as const);
+
+    const compute = () => {
+      // Highest matched breakpoint wins
+      const matched = mqls.filter(([, m]) => m.matches).map(([k]) => k);
+      const next = (matched[matched.length - 1] as Breakpoint | undefined) ?? 'initial';
+      setCurrentBp(next);
+      setReady(true);
+    };
+
+    compute();
+
+    const cleanups: Array<() => void> = [];
+    mqls.forEach(([, m]) => {
+      const mm = m as MediaQueryList & {
+        addEventListener?: (type: 'change', listener: () => void) => void;
+        removeEventListener?: (type: 'change', listener: () => void) => void;
+        addListener?: (listener: () => void) => void;
+        removeListener?: (listener: () => void) => void;
+      };
+      if (typeof mm.addEventListener === 'function') {
+        mm.addEventListener('change', compute);
+        cleanups.push(() => mm.removeEventListener?.('change', compute));
+      } else if (typeof mm.addListener === 'function') {
+        mm.addListener(compute);
+        cleanups.push(() => mm.removeListener?.(compute));
+      }
+    });
+
+    return () => {
+      cleanups.forEach((fn) => {
+        try {
+          fn();
+        } catch (e) {
+          // MediaQueryList cleanup can fail in edge cases (e.g., already removed)
+          // Log in development to aid debugging
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn('[DropdownMenu] MediaQueryList cleanup warning:', e);
+          }
+        }
+      });
+    };
+  }, []);
+
+  return { breakpoint: currentBp, ready };
+}
+
+/**
+ * Resolves a responsive value to its current value based on the breakpoint.
+ * Falls back through smaller breakpoints if the current one isn't defined.
+ */
+function resolveResponsiveValue<T>(
+  value: T | Partial<Record<Breakpoint, T>> | undefined,
+  currentBreakpoint: Breakpoint,
+  defaultValue: T
+): T {
+  if (value === undefined || value === null) {
+    return defaultValue;
+  }
+
+  // Non-object values are returned directly
+  if (typeof value !== 'object') {
+    return value;
+  }
+
+  const map = value as Partial<Record<Breakpoint, T>>;
+
+  // Check if current breakpoint has a value
+  if (map[currentBreakpoint] !== undefined) {
+    return map[currentBreakpoint] as T;
+  }
+
+  // Fall back through smaller breakpoints
+  const bpOrder: Breakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs', 'initial'];
+  const startIdx = bpOrder.indexOf(currentBreakpoint);
+
+  for (let i = startIdx + 1; i < bpOrder.length; i++) {
+    const bp = bpOrder[i];
+    if (map[bp] !== undefined) {
+      return map[bp] as T;
+    }
+  }
+
+  return defaultValue;
+}
+
+// ============================================================================
+// DrillDown Context
+// ============================================================================
+
+interface DrillDownContextValue {
+  /** Current submenu behavior mode */
+  behavior: SubmenuBehavior;
+  /** Whether the breakpoint has been resolved (client-side only) */
+  ready: boolean;
+  /** Stack of active submenu IDs. Empty means root menu is shown. */
+  stack: string[];
+  /** Navigate into a submenu */
+  push: (id: string) => void;
+  /** Navigate back to parent menu */
+  pop: () => void;
+  /** Reset to root menu */
+  reset: () => void;
+  /** Check if a specific submenu is the currently active one */
+  isActive: (id: string) => boolean;
+  /** Check if we're at root level (no submenus open) */
+  isRoot: boolean;
+  /** The currently active submenu ID (or null if at root) */
+  currentId: string | null;
+}
+
+const DrillDownContext = React.createContext<DrillDownContextValue | null>(null);
+
+interface DrillDownProviderProps {
+  children: React.ReactNode;
+  submenuBehavior: Responsive<SubmenuBehavior> | undefined;
+}
+
+function DrillDownProvider({ children, submenuBehavior }: DrillDownProviderProps) {
+  const { breakpoint, ready } = useBreakpoint();
+  const [stack, setStack] = React.useState<string[]>([]);
+
+  // Resolve the current behavior based on breakpoint
+  const behavior = React.useMemo(
+    () => resolveResponsiveValue(submenuBehavior, breakpoint, 'cascade'),
+    [submenuBehavior, breakpoint]
+  );
+
+  // Reset stack when behavior changes from drill-down to cascade
+  const prevBehaviorRef = React.useRef(behavior);
+  React.useEffect(() => {
+    if (prevBehaviorRef.current === 'drill-down' && behavior === 'cascade') {
+      setStack([]);
+    }
+    prevBehaviorRef.current = behavior;
+  }, [behavior]);
+
+  const push = React.useCallback((id: string) => {
+    setStack((prev) => [...prev, id]);
+  }, []);
+
+  const pop = React.useCallback(() => {
+    setStack((prev) => prev.slice(0, -1));
+  }, []);
+
+  const reset = React.useCallback(() => {
+    setStack([]);
+  }, []);
+
+  const isActive = React.useCallback(
+    (id: string) => {
+      if (stack.length === 0) return false;
+      return stack[stack.length - 1] === id;
+    },
+    [stack]
+  );
+
+  const value = React.useMemo(
+    (): DrillDownContextValue => ({
+      behavior,
+      ready,
+      stack,
+      push,
+      pop,
+      reset,
+      isActive,
+      isRoot: stack.length === 0,
+      currentId: stack.length > 0 ? stack[stack.length - 1] : null,
+    }),
+    [behavior, ready, stack, push, pop, reset, isActive]
+  );
+
+  return <DrillDownContext.Provider value={value}>{children}</DrillDownContext.Provider>;
+}
+
+function useDrillDown() {
+  const ctx = React.useContext(DrillDownContext);
+  if (!ctx) {
+    throw new Error('useDrillDown must be used within a DropdownMenu.Content');
+  }
+  return ctx;
+}
+
+/**
+ * Hook to check if drill-down context is available (i.e., we're inside Content)
+ */
+function useDrillDownOptional() {
+  return React.useContext(DrillDownContext);
+}
+
+// ============================================================================
+// Sub Context (for individual submenu instances)
+// ============================================================================
+
+interface SubContextValue {
+  /** Unique ID for this submenu */
+  id: string;
+  /** Label for the back button */
+  label: React.ReactNode;
+}
+
+const SubContext = React.createContext<SubContextValue | null>(null);
+
+function useSubContext() {
+  return React.useContext(SubContext);
+}
+
+export {
+  DrillDownProvider,
+  DrillDownContext,
+  SubContext,
+  useDrillDown,
+  useDrillDownOptional,
+  useSubContext,
+  useBreakpoint,
+  resolveResponsiveValue,
+};
+
+export type { SubmenuBehavior, DrillDownContextValue, SubContextValue };

package/src/components/dropdown-menu.css

@@ -44,3 +44,122 @@
     height: var(--trigger-icon-size-4);
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * DRILL-DOWN MODE                                                                                  *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* Root container that holds the main menu items */
+.rt-DropdownMenuDrillDownRoot {
+  display: contents;
+}
+
+/* When a submenu is active, hide the ROOT's direct children (but not nested panels) */
+.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > * {
+  display: none !important;
+}
+
+/* Keep nested panels visible (they use display: contents) */
+.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > :where(.rt-DropdownMenuDrillDownPanel) {
+  display: contents !important;
+}
+
+/* Submenu panel in drill-down mode */
+.rt-DropdownMenuDrillDownPanel {
+  display: contents;
+}
+
+/* Hide children of INACTIVE drill-down panels */
+.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > * {
+  display: none !important;
+}
+
+/* But keep nested panels visible (they use display: contents) */
+.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > :where(.rt-DropdownMenuDrillDownPanel) {
+  display: contents !important;
+}
+
+/* Back button item */
+.rt-DropdownMenuDrillDownBackItem {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--base-menu-item-height);
+  padding-top: var(--base-menu-item-padding-y);
+  padding-bottom: var(--base-menu-item-padding-y);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
+  box-sizing: border-box;
+  outline: none;
+  cursor: var(--cursor-menu-item);
+  user-select: none;
+  transition: var(--transition-menu);
+  font-weight: 500;
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -2px;
+  }
+
+  /* Enhanced reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+/* Back icon */
+.rt-DropdownMenuDrillDownBackIcon {
+  width: var(--indicator-icon-size-2);
+  height: var(--indicator-icon-size-2);
+  flex-shrink: 0;
+  color: var(--gray-12);
+}
+
+/* Back label */
+.rt-DropdownMenuDrillDownBackLabel {
+  color: var(--gray-12);
+}
+
+/* Solid variant - drill-down items hover (matches menu item [data-highlighted]) */
+.rt-BaseMenuContent:where(.rt-variant-solid) {
+  & :where(.rt-DropdownMenuDrillDownBackItem:hover),
+  & :where(.rt-DropdownMenuDrillDownBackItem:focus-visible),
+  & :where(.rt-DropdownMenuDrillDownSubTrigger:hover),
+  & :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible) {
+    background-color: var(--accent-9);
+    color: var(--accent-contrast);
+
+    & :where(.rt-DropdownMenuDrillDownBackIcon),
+    & :where(.rt-DropdownMenuDrillDownBackLabel),
+    & :where(.rt-BaseMenuSubTriggerIcon) {
+      color: var(--accent-contrast);
+    }
+  }
+}
+
+/* Soft variant - drill-down items hover (matches menu item [data-highlighted]) */
+.rt-BaseMenuContent:where(.rt-variant-soft) {
+  & :where(.rt-DropdownMenuDrillDownBackItem:hover),
+  & :where(.rt-DropdownMenuDrillDownBackItem:focus-visible),
+  & :where(.rt-DropdownMenuDrillDownSubTrigger:hover),
+  & :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible) {
+    background-color: var(--accent-4);
+  }
+
+  :where([data-panel-background='translucent']) & :where(.rt-DropdownMenuDrillDownBackItem:hover),
+  :where([data-panel-background='translucent']) & :where(.rt-DropdownMenuDrillDownBackItem:focus-visible),
+  :where([data-panel-background='translucent']) & :where(.rt-DropdownMenuDrillDownSubTrigger:hover),
+  :where([data-panel-background='translucent']) & :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible) {
+    background-color: var(--accent-a4);
+  }
+}
+
+/* Forced colors support */
+@media (forced-colors: active) {
+  .rt-DropdownMenuDrillDownBackItem:where(:focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}

package/src/components/dropdown-menu.props.tsx

@@ -1,6 +1,8 @@
 export {
   baseMenuContentPropDefs as dropdownMenuContentPropDefs,
+  baseMenuSubContentPropDefs as dropdownMenuSubContentPropDefs,
   baseMenuItemPropDefs as dropdownMenuItemPropDefs,
   baseMenuCheckboxItemPropDefs as dropdownMenuCheckboxItemPropDefs,
   baseMenuRadioItemPropDefs as dropdownMenuRadioItemPropDefs,
+  submenuBehaviors,
 } from './_internal/base-menu.props.js';