@kushagradhawan/kookie-ui 0.1.124 → 0.1.126

package/src/components/dropdown-menu.tsx

@@ -7,19 +7,28 @@ import { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';
 import { ScrollArea } from './scroll-area.js';
 import {
   dropdownMenuContentPropDefs,
+  dropdownMenuSubContentPropDefs,
   dropdownMenuItemPropDefs,
   dropdownMenuCheckboxItemPropDefs,
   dropdownMenuRadioItemPropDefs,
 } from './dropdown-menu.props.js';
 import { Theme, useThemeContext } from './theme.js';
-import { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
+import { ChevronDownIcon, ThickCheckIcon, ThickChevronLeftIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import {
+  DrillDownProvider,
+  SubContext,
+  useDrillDown,
+  useDrillDownOptional,
+  useSubContext,
+} from './_internal/dropdown-menu-drill-down.js';
+import type { SubmenuBehavior } from './_internal/dropdown-menu-drill-down.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { Kbd } from './kbd.js';
 
 import type { IconProps } from './icons.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
+import type { GetPropDefTypes, Responsive } from '../props/prop-def.js';
 
 interface DropdownMenuRootProps
   extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}
@@ -40,14 +49,52 @@ const DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, Dropdow
 );
 DropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';
 
-type DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuContentPropDefs>;
-type DropdownMenuContentContextValue = DropdownMenuContentOwnProps;
+/**
+ * Internal component that wraps root menu items and handles visibility in drill-down mode.
+ * In drill-down mode, this hides when a submenu is active.
+ */
+function DrillDownRoot({ children }: { children: React.ReactNode }) {
+  const drillDown = useDrillDownOptional();
+
+  // In cascade mode or when no drill-down context, always show
+  if (!drillDown || drillDown.behavior === 'cascade') {
+    return <>{children}</>;
+  }
+
+  // In drill-down mode, hide root when a submenu is active
+  return (
+    <div
+      className="rt-DropdownMenuDrillDownRoot"
+      data-drill-down-active={drillDown.isRoot ? undefined : true}
+    >
+      {children}
+    </div>
+  );
+}
+
+type DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuContentPropDefs> & {
+  /**
+   * 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?: Responsive<SubmenuBehavior>;
+};
+type DropdownMenuContentContextValue = Omit<DropdownMenuContentOwnProps, 'submenuBehavior'>;
 const DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});
 type DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;
 interface DropdownMenuContentProps
   extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Content, RemovedProps>,
     DropdownMenuContentContextValue {
   container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];
+  /**
+   * 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?: Responsive<SubmenuBehavior>;
 }
 const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props, forwardedRef) => {
@@ -80,6 +127,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
       variant = dropdownMenuContentPropDefs.variant.default,
       highContrast = dropdownMenuContentPropDefs.highContrast.default,
       material = memoizedThemeContext.material,
+      submenuBehavior,
     } = props;
     const {
       className,
@@ -89,6 +137,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
       forceMount,
       material: _,
       panelBackground: __,
+      submenuBehavior: ___,
       ...contentProps
     } = extractProps(props, dropdownMenuContentPropDefs);
 
@@ -125,7 +174,9 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
                     [size, variant, resolvedColor, highContrast, material],
                   )}
                 >
-                  {children}
+                  <DrillDownProvider submenuBehavior={submenuBehavior}>
+                    <DrillDownRoot>{children}</DrillDownRoot>
+                  </DrillDownProvider>
                 </DropdownMenuContentContext.Provider>
               </div>
             </ScrollArea>
@@ -298,11 +349,46 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 });
 DropdownMenuCheckboxItem.displayName = 'DropdownMenu.CheckboxItem';
 
+// Generate unique submenu IDs using React 18's useId for SSR safety
+function useSubId() {
+  return React.useId();
+}
+
 interface DropdownMenuSubProps
-  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {}
-const DropdownMenuSub: React.FC<DropdownMenuSubProps> = (props) => (
-  <DropdownMenuPrimitive.Sub {...props} />
-);
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {
+  /**
+   * Label displayed in the back button when using drill-down mode.
+   * If not provided, defaults to "Back".
+   */
+  label?: React.ReactNode;
+}
+const DropdownMenuSub: React.FC<DropdownMenuSubProps> = ({ label = 'Back', ...props }) => {
+  const drillDown = useDrillDownOptional();
+  const subId = useSubId();
+
+  // Create context value for SubContent and SubTrigger
+  const subContextValue = React.useMemo(
+    () => ({ id: subId, label }),
+    [subId, label]
+  );
+
+  // In drill-down mode, we don't use Radix's Sub component
+  // We just provide the SubContext and render children
+  if (drillDown?.behavior === 'drill-down') {
+    return (
+      <SubContext.Provider value={subContextValue}>
+        {props.children}
+      </SubContext.Provider>
+    );
+  }
+
+  // In cascade mode, use Radix's Sub component normally
+  return (
+    <SubContext.Provider value={subContextValue}>
+      <DropdownMenuPrimitive.Sub {...props} />
+    </SubContext.Provider>
+  );
+};
 DropdownMenuSub.displayName = 'DropdownMenu.Sub';
 
 type DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;
@@ -312,10 +398,53 @@ const DropdownMenuSubTrigger = React.forwardRef<
   DropdownMenuSubTriggerElement,
   DropdownMenuSubTriggerProps
 >((props, forwardedRef) => {
-  const { className, children, ...subTriggerProps } = props;
+  const { className, children, onClick, ...subTriggerProps } = props;
+  const drillDown = useDrillDownOptional();
+  const subContext = useSubContext();
+
+  // In drill-down mode, render a button that navigates to the submenu
+  if (drillDown?.behavior === 'drill-down' && subContext) {
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      drillDown.push(subContext.id);
+      (onClick as React.MouseEventHandler<HTMLDivElement> | undefined)?.(e);
+    };
+
+    return (
+      <div
+        role="menuitem"
+        tabIndex={0}
+        ref={forwardedRef as React.Ref<HTMLDivElement>}
+        onClick={handleClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            drillDown.push(subContext.id);
+          }
+        }}
+        className={classNames(
+          'rt-reset',
+          'rt-BaseMenuItem',
+          'rt-BaseMenuSubTrigger',
+          'rt-DropdownMenuItem',
+          'rt-DropdownMenuSubTrigger',
+          'rt-DropdownMenuDrillDownSubTrigger',
+          className,
+        )}
+      >
+        {children}
+        <div className="rt-BaseMenuShortcut rt-DropdownMenuShortcut">
+          <ThickChevronRightIcon className="rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon" />
+        </div>
+      </div>
+    );
+  }
+
+  // In cascade mode, use Radix's SubTrigger
   return (
     <DropdownMenuPrimitive.SubTrigger
       {...subTriggerProps}
+      onClick={onClick as React.MouseEventHandler<HTMLDivElement> | undefined}
       asChild={false}
       ref={forwardedRef}
       className={classNames(
@@ -335,6 +464,56 @@ const DropdownMenuSubTrigger = React.forwardRef<
 });
 DropdownMenuSubTrigger.displayName = 'DropdownMenu.SubTrigger';
 
+// Separator is defined here (before SubContent) because it's used in drill-down mode
+type DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;
+interface DropdownMenuSeparatorProps
+  extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Separator, RemovedProps> {}
+const DropdownMenuSeparator = React.forwardRef<
+  DropdownMenuSeparatorElement,
+  DropdownMenuSeparatorProps
+>(({ className, ...props }, forwardedRef) => (
+  <DropdownMenuPrimitive.Separator
+    {...props}
+    asChild={false}
+    ref={forwardedRef}
+    className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}
+  />
+));
+DropdownMenuSeparator.displayName = 'DropdownMenu.Separator';
+
+/**
+ * Internal component for the drill-down back button.
+ */
+function DrillDownBackItem({ label }: { label: React.ReactNode }) {
+  const drillDown = useDrillDown();
+
+  return (
+    <div
+      role="menuitem"
+      tabIndex={0}
+      onClick={(e) => {
+        e.preventDefault();
+        drillDown.pop();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          drillDown.pop();
+        }
+      }}
+      className={classNames(
+        'rt-reset',
+        'rt-BaseMenuItem',
+        'rt-DropdownMenuItem',
+        'rt-DropdownMenuDrillDownBackItem',
+      )}
+    >
+      <ThickChevronLeftIcon className="rt-DropdownMenuDrillDownBackIcon" />
+      <span className="rt-DropdownMenuDrillDownBackLabel">{label}</span>
+    </div>
+  );
+}
+
 type DropdownMenuSubContentElement = React.ElementRef<typeof DropdownMenuPrimitive.SubContent>;
 interface DropdownMenuSubContentProps
   extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubContent, RemovedProps>,
@@ -351,6 +530,8 @@ const DropdownMenuSubContent = React.forwardRef<
     () => contextValue,
     [contextValue],
   );
+  const drillDown = useDrillDownOptional();
+  const subContext = useSubContext();
 
   const {
     className,
@@ -362,8 +543,32 @@ const DropdownMenuSubContent = React.forwardRef<
     ...subContentProps
   } = extractProps(
     { size, variant, color, highContrast, material, ...props },
-    dropdownMenuContentPropDefs,
+    dropdownMenuSubContentPropDefs,
   );
+
+  // In drill-down mode, render inline instead of in a portal
+  if (drillDown?.behavior === 'drill-down' && subContext) {
+    const isActive = drillDown.isActive(subContext.id);
+
+    return (
+      <div
+        ref={forwardedRef as React.Ref<HTMLDivElement>}
+        role="menu"
+        aria-label={typeof subContext.label === 'string' ? subContext.label : undefined}
+        data-drill-down-active={isActive ? true : undefined}
+        className={classNames(
+          'rt-DropdownMenuDrillDownPanel',
+          className,
+        )}
+      >
+        <DrillDownBackItem label={subContext.label} />
+        <DropdownMenuSeparator />
+        {children}
+      </div>
+    );
+  }
+
+  // In cascade mode, use Portal and Radix's SubContent
   return (
     <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>
       <Theme asChild>
@@ -399,22 +604,6 @@ const DropdownMenuSubContent = React.forwardRef<
 });
 DropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';
 
-type DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;
-interface DropdownMenuSeparatorProps
-  extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Separator, RemovedProps> {}
-const DropdownMenuSeparator = React.forwardRef<
-  DropdownMenuSeparatorElement,
-  DropdownMenuSeparatorProps
->(({ className, ...props }, forwardedRef) => (
-  <DropdownMenuPrimitive.Separator
-    {...props}
-    asChild={false}
-    ref={forwardedRef}
-    className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}
-  />
-));
-DropdownMenuSeparator.displayName = 'DropdownMenu.Separator';
-
 type DropdownMenuTriggerIconElement = React.ElementRef<'svg'>;
 interface DropdownMenuTriggerIconProps extends IconProps {}
 const DropdownMenuTriggerIcon = React.forwardRef<
@@ -457,4 +646,5 @@ export type {
   DropdownMenuSubTriggerProps as SubTriggerProps,
   DropdownMenuSubContentProps as SubContentProps,
   DropdownMenuSeparatorProps as SeparatorProps,
+  SubmenuBehavior,
 };

package/src/components/icons.tsx

@@ -54,6 +54,19 @@ const ThickChevronRightIcon = React.forwardRef<IconElement, IconProps>((props, f
 });
 ThickChevronRightIcon.displayName = 'ThickChevronRightIcon';
 
+const ThickChevronLeftIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg width="9" height="9" viewBox="0 0 9 9" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.76174 0.201711C5.45892 -0.0809141 4.98433 -0.0645489 4.70171 0.238264L1.20171 3.98826C0.932757 4.27642 0.932757 4.72359 1.20171 5.01174L4.70171 8.76174C4.98433 9.06455 5.45892 9.08092 5.76174 8.79829C6.06455 8.51567 6.08091 8.04108 5.79829 7.73826L2.77591 4.5L5.79829 1.26174C6.08091 0.958928 6.06455 0.484337 5.76174 0.201711Z"
+      />
+    </svg>
+  );
+});
+ThickChevronLeftIcon.displayName = 'ThickChevronLeftIcon';
+
 const ThickDotIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
   return (
     <svg width="9" height="9" viewBox="0 0 9 9" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
@@ -63,7 +76,7 @@ const ThickDotIcon = React.forwardRef<IconElement, IconProps>((props, forwardedR
 });
 ThickDotIcon.displayName = 'ThickDotIcon';
 
-export { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon, ThickDotIcon };
+export { ChevronDownIcon, ThickCheckIcon, ThickChevronLeftIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon, ThickDotIcon };
 export type { IconProps };
 
 // Additional minimal icons

package/styles.css

@@ -13680,6 +13680,99 @@
     height: var(--trigger-icon-size-4);
   }
 }
+.rt-DropdownMenuDrillDownRoot{
+  display: contents;
+}
+.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > *{
+  display: none !important;
+}
+.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > :where(.rt-DropdownMenuDrillDownPanel){
+  display: contents !important;
+}
+.rt-DropdownMenuDrillDownPanel{
+  display: contents;
+}
+.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > *{
+  display: none !important;
+}
+.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > :where(.rt-DropdownMenuDrillDownPanel){
+  display: contents !important;
+}
+.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);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition: var(--transition-menu);
+  font-weight: 500;
+}
+.rt-DropdownMenuDrillDownBackItem:where(:focus-visible){
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .rt-DropdownMenuDrillDownBackItem{
+    transition: none;
+  }
+}
+.rt-DropdownMenuDrillDownBackIcon{
+  width: var(--indicator-icon-size-2);
+  height: var(--indicator-icon-size-2);
+  flex-shrink: 0;
+  color: var(--gray-12);
+}
+.rt-DropdownMenuDrillDownBackLabel{
+  color: var(--gray-12);
+}
+.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownBackItem:hover),
+  .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownBackItem:focus-visible),
+  .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownSubTrigger:hover),
+  .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible){
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownBackItem:hover) :where(.rt-DropdownMenuDrillDownBackIcon),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownBackItem:focus-visible) :where(.rt-DropdownMenuDrillDownBackIcon),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownSubTrigger:hover) :where(.rt-DropdownMenuDrillDownBackIcon),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible) :where(.rt-DropdownMenuDrillDownBackIcon),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownBackItem:hover) :where(.rt-DropdownMenuDrillDownBackLabel),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownBackItem:focus-visible) :where(.rt-DropdownMenuDrillDownBackLabel),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownSubTrigger:hover) :where(.rt-DropdownMenuDrillDownBackLabel),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible) :where(.rt-DropdownMenuDrillDownBackLabel),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownBackItem:hover) :where(.rt-BaseMenuSubTriggerIcon),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownBackItem:focus-visible) :where(.rt-BaseMenuSubTriggerIcon),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownSubTrigger:hover) :where(.rt-BaseMenuSubTriggerIcon),
+    .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible) :where(.rt-BaseMenuSubTriggerIcon){
+  color: var(--accent-contrast);
+}
+.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-DropdownMenuDrillDownBackItem:hover),
+  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-DropdownMenuDrillDownBackItem:focus-visible),
+  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-DropdownMenuDrillDownSubTrigger:hover),
+  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible){
+  background-color: var(--accent-4);
+}
+:where([data-panel-background='translucent']) .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-DropdownMenuDrillDownBackItem:hover),
+  :where([data-panel-background='translucent']) .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-DropdownMenuDrillDownBackItem:focus-visible),
+  :where([data-panel-background='translucent']) .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-DropdownMenuDrillDownSubTrigger:hover),
+  :where([data-panel-background='translucent']) .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-DropdownMenuDrillDownSubTrigger:focus-visible){
+  background-color: var(--accent-a4);
+}
+@media (forced-colors: active) {
+  .rt-DropdownMenuDrillDownBackItem:where(:focus-visible){
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-TextFieldRoot{
   -webkit-backdrop-filter: var(--backdrop-filter-components);
           backdrop-filter: var(--backdrop-filter-components);