@kushagradhawan/kookie-ui 0.1.126 → 0.1.128
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.css +45 -2
- package/dist/cjs/components/_internal/dropdown-menu-drill-down.d.ts +4 -1
- package/dist/cjs/components/_internal/dropdown-menu-drill-down.d.ts.map +1 -1
- package/dist/cjs/components/_internal/dropdown-menu-drill-down.js +1 -1
- package/dist/cjs/components/_internal/dropdown-menu-drill-down.js.map +3 -3
- package/dist/cjs/components/dropdown-menu.d.ts.map +1 -1
- package/dist/cjs/components/dropdown-menu.js +1 -1
- package/dist/cjs/components/dropdown-menu.js.map +2 -2
- package/dist/esm/components/_internal/dropdown-menu-drill-down.d.ts +4 -1
- package/dist/esm/components/_internal/dropdown-menu-drill-down.d.ts.map +1 -1
- package/dist/esm/components/_internal/dropdown-menu-drill-down.js +1 -1
- package/dist/esm/components/_internal/dropdown-menu-drill-down.js.map +3 -3
- package/dist/esm/components/dropdown-menu.d.ts.map +1 -1
- package/dist/esm/components/dropdown-menu.js +1 -1
- package/dist/esm/components/dropdown-menu.js.map +2 -2
- package/package.json +2 -2
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/_internal/dropdown-menu-drill-down.tsx +12 -2
- package/src/components/animations.css +11 -0
- package/src/components/dropdown-menu.css +46 -4
- package/src/components/dropdown-menu.tsx +2 -0
- package/styles.css +45 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAQ,MAAM,UAAU,CAAC;AAGvE,OAAO,EACL,2BAA2B,EAE3B,wBAAwB,EACxB,gCAAgC,EAChC,6BAA6B,EAC9B,MAAM,0BAA0B,CAAC;AAWlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAI/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAExE,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC;CAAG;AAC9E,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAErD,CAAC;AAIF,UAAU,wBACR,SAAQ,qBAAqB,CAAC,OAAO,qBAAqB,CAAC,OAAO,EAAE,YAAY,CAAC;CAAG;AACtF,QAAA,MAAM,mBAAmB,oGAMxB,CAAC;
|
|
1
|
+
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import*as e from"react";import a from"classnames";import{DropdownMenu as i,Slot as U}from"radix-ui";import{ScrollArea as h}from"./scroll-area.js";import{dropdownMenuContentPropDefs as M,dropdownMenuSubContentPropDefs as J,dropdownMenuItemPropDefs as Q,dropdownMenuCheckboxItemPropDefs as X,dropdownMenuRadioItemPropDefs as Y}from"./dropdown-menu.props.js";import{Theme as S,useThemeContext as Z}from"./theme.js";import{ChevronDownIcon as $,ThickCheckIcon as ee,ThickChevronLeftIcon as oe,ThickChevronRightIcon as y,ThickDotIcon as ne}from"./icons.js";import{extractProps as R}from"../helpers/extract-props.js";import{DrillDownProvider as re,SubContext as T,useDrillDown as te,useDrillDownOptional as f,useSubContext as x}from"./_internal/dropdown-menu-drill-down.js";import{requireReactElement as pe}from"../helpers/require-react-element.js";import{Kbd as N}from"./kbd.js";const B=o=>e.createElement(i.Root,{...o});B.displayName="DropdownMenu.Root";const k=e.forwardRef(({children:o,...n},r)=>e.createElement(i.Trigger,{...n,ref:r,asChild:!0},pe(o)));k.displayName="DropdownMenu.Trigger";function ie({children:o}){const n=f();return!n||n.behavior==="cascade"?e.createElement(e.Fragment,null,o):e.createElement("div",{className:"rt-DropdownMenuDrillDownRoot","data-drill-down-active":n.isRoot?void 0:!0},o)}const E=e.createContext({}),G=e.forwardRef((o,n)=>{const r=Z();e.useEffect(()=>{o.panelBackground!==void 0&&console.warn("Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.")},[o.panelBackground]);const p=o.material??o.panelBackground??r.panelBackground,t=e.useMemo(()=>({material:p,accentColor:r.accentColor}),[p,r.accentColor]),{size:u=M.size.default,variant:s=M.variant.default,highContrast:m=M.highContrast.default,material:l=t.material,submenuBehavior:d}=o,{className:
|
|
1
|
+
"use client";import*as e from"react";import a from"classnames";import{DropdownMenu as i,Slot as U}from"radix-ui";import{ScrollArea as h}from"./scroll-area.js";import{dropdownMenuContentPropDefs as M,dropdownMenuSubContentPropDefs as J,dropdownMenuItemPropDefs as Q,dropdownMenuCheckboxItemPropDefs as X,dropdownMenuRadioItemPropDefs as Y}from"./dropdown-menu.props.js";import{Theme as S,useThemeContext as Z}from"./theme.js";import{ChevronDownIcon as $,ThickCheckIcon as ee,ThickChevronLeftIcon as oe,ThickChevronRightIcon as y,ThickDotIcon as ne}from"./icons.js";import{extractProps as R}from"../helpers/extract-props.js";import{DrillDownProvider as re,SubContext as T,useDrillDown as te,useDrillDownOptional as f,useSubContext as x}from"./_internal/dropdown-menu-drill-down.js";import{requireReactElement as pe}from"../helpers/require-react-element.js";import{Kbd as N}from"./kbd.js";const B=o=>e.createElement(i.Root,{...o});B.displayName="DropdownMenu.Root";const k=e.forwardRef(({children:o,...n},r)=>e.createElement(i.Trigger,{...n,ref:r,asChild:!0},pe(o)));k.displayName="DropdownMenu.Trigger";function ie({children:o}){const n=f();return!n||n.behavior==="cascade"?e.createElement(e.Fragment,null,o):e.createElement("div",{className:"rt-DropdownMenuDrillDownRoot","data-drill-down-active":n.isRoot?void 0:!0,"data-animation-direction":n.animationDirection??void 0},o)}const E=e.createContext({}),G=e.forwardRef((o,n)=>{const r=Z();e.useEffect(()=>{o.panelBackground!==void 0&&console.warn("Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.")},[o.panelBackground]);const p=o.material??o.panelBackground??r.panelBackground,t=e.useMemo(()=>({material:p,accentColor:r.accentColor}),[p,r.accentColor]),{size:u=M.size.default,variant:s=M.variant.default,highContrast:m=M.highContrast.default,material:l=t.material,submenuBehavior:d}=o,{className:c,children:w,color:D,container:P,forceMount:b,material:F,panelBackground:I,submenuBehavior:g,...q}=R(o,M),C=e.useMemo(()=>D||t.accentColor,[D,t.accentColor]);return e.createElement(i.Portal,{container:P,forceMount:b},e.createElement(S,{asChild:!0},e.createElement(i.Content,{"data-accent-color":C,"data-material":l,"data-panel-background":l,align:"start",sideOffset:4,collisionPadding:10,...q,asChild:!1,ref:n,className:a("rt-PopperContent","rt-BaseMenuContent","rt-DropdownMenuContent",c)},e.createElement(h,{type:"auto"},e.createElement("div",{className:a("rt-BaseMenuViewport","rt-DropdownMenuViewport")},e.createElement(E.Provider,{value:e.useMemo(()=>({size:u,variant:s,color:C,highContrast:m,material:l}),[u,s,C,m,l])},e.createElement(re,{submenuBehavior:d},e.createElement(ie,null,w))))))))});G.displayName="DropdownMenu.Content";const L=e.forwardRef(({className:o,...n},r)=>e.createElement(i.Label,{...n,asChild:!1,ref:r,className:a("rt-BaseMenuLabel","rt-DropdownMenuLabel",o)}));L.displayName="DropdownMenu.Label";const W=e.forwardRef((o,n)=>{const{className:r,children:p,color:t=Q.color.default,shortcut:u,...s}=o;return e.createElement(i.Item,{"data-accent-color":t,...s,ref:n,className:a("rt-reset","rt-BaseMenuItem","rt-DropdownMenuItem",r)},e.createElement(U.Slottable,null,p),u&&e.createElement("div",{className:"rt-BaseMenuShortcut rt-DropdownMenuShortcut"},e.createElement(N,{size:"1"},u)))});W.displayName="DropdownMenu.Item";const O=e.forwardRef(({className:o,...n},r)=>e.createElement(i.Group,{...n,asChild:!1,ref:r,className:a("rt-BaseMenuGroup","rt-DropdownMenuGroup",o)}));O.displayName="DropdownMenu.Group";const V=e.forwardRef(({className:o,...n},r)=>e.createElement(i.RadioGroup,{...n,asChild:!1,ref:r,className:a("rt-BaseMenuRadioGroup","rt-DropdownMenuRadioGroup",o)}));V.displayName="DropdownMenu.RadioGroup";const _=e.forwardRef((o,n)=>{const{children:r,className:p,color:t=Y.color.default,...u}=o;return e.createElement(i.RadioItem,{...u,asChild:!1,ref:n,"data-accent-color":t,className:a("rt-BaseMenuItem","rt-BaseMenuRadioItem","rt-DropdownMenuItem","rt-DropdownMenuRadioItem",p)},r,e.createElement(i.ItemIndicator,{className:"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator"},e.createElement(ne,{className:"rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon"})))});_.displayName="DropdownMenu.RadioItem";const H=e.forwardRef((o,n)=>{const{children:r,className:p,shortcut:t,color:u=X.color.default,...s}=o;return e.createElement(i.CheckboxItem,{...s,asChild:!1,ref:n,"data-accent-color":u,className:a("rt-BaseMenuItem","rt-BaseMenuCheckboxItem","rt-DropdownMenuItem","rt-DropdownMenuCheckboxItem",p)},r,e.createElement(i.ItemIndicator,{className:"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator"},e.createElement(ee,{className:"rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon"})),t&&e.createElement("div",{className:"rt-BaseMenuShortcut rt-DropdownMenuShortcut"},e.createElement(N,{size:"1"},t)))});H.displayName="DropdownMenu.CheckboxItem";function ae(){return e.useId()}const z=({label:o="Back",...n})=>{const r=f(),p=ae(),t=e.useMemo(()=>({id:p,label:o}),[p,o]);return r?.behavior==="drill-down"?e.createElement(T.Provider,{value:t},n.children):e.createElement(T.Provider,{value:t},e.createElement(i.Sub,{...n}))};z.displayName="DropdownMenu.Sub";const A=e.forwardRef((o,n)=>{const{className:r,children:p,onClick:t,...u}=o,s=f(),m=x();return s?.behavior==="drill-down"&&m?e.createElement("div",{role:"menuitem",tabIndex:0,ref:n,onClick:d=>{d.preventDefault(),s.push(m.id),t?.(d)},onKeyDown:d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),s.push(m.id))},className:a("rt-reset","rt-BaseMenuItem","rt-BaseMenuSubTrigger","rt-DropdownMenuItem","rt-DropdownMenuSubTrigger","rt-DropdownMenuDrillDownSubTrigger",r)},p,e.createElement("div",{className:"rt-BaseMenuShortcut rt-DropdownMenuShortcut"},e.createElement(y,{className:"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon"}))):e.createElement(i.SubTrigger,{...u,onClick:t,asChild:!1,ref:n,className:a("rt-BaseMenuItem","rt-BaseMenuSubTrigger","rt-DropdownMenuItem","rt-DropdownMenuSubTrigger",r)},p,e.createElement("div",{className:"rt-BaseMenuShortcut rt-DropdownMenuShortcut"},e.createElement(y,{className:"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon"})))});A.displayName="DropdownMenu.SubTrigger";const v=e.forwardRef(({className:o,...n},r)=>e.createElement(i.Separator,{...n,asChild:!1,ref:r,className:a("rt-BaseMenuSeparator","rt-DropdownMenuSeparator",o)}));v.displayName="DropdownMenu.Separator";function ue({label:o}){const n=te();return e.createElement("div",{role:"menuitem",tabIndex:0,onClick:r=>{r.preventDefault(),n.pop()},onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),n.pop())},className:a("rt-reset","rt-BaseMenuItem","rt-DropdownMenuItem","rt-DropdownMenuDrillDownBackItem")},e.createElement(oe,{className:"rt-DropdownMenuDrillDownBackIcon"}),e.createElement("span",{className:"rt-DropdownMenuDrillDownBackLabel"},o))}const K=e.forwardRef((o,n)=>{const r=e.useContext(E),{size:p,variant:t,color:u,highContrast:s,material:m}=e.useMemo(()=>r,[r]),l=f(),d=x(),{className:c,children:w,container:D,forceMount:P,material:b,panelBackground:F,...I}=R({size:p,variant:t,color:u,highContrast:s,material:m,...o},J);if(l?.behavior==="drill-down"&&d){const g=l.isActive(d.id);return e.createElement("div",{ref:n,role:"menu","aria-label":typeof d.label=="string"?d.label:void 0,"data-drill-down-active":g?!0:void 0,"data-animation-direction":l.animationDirection??void 0,className:a("rt-DropdownMenuDrillDownPanel",c)},e.createElement(ue,{label:d.label}),e.createElement(v,null),w)}return e.createElement(i.Portal,{container:D,forceMount:P},e.createElement(S,{asChild:!0},e.createElement(i.SubContent,{"data-accent-color":u,"data-material":m,"data-panel-background":m,alignOffset:-Number(p)*4,sideOffset:1,collisionPadding:10,...I,asChild:!1,ref:n,className:a("rt-PopperContent","rt-BaseMenuContent","rt-BaseMenuSubContent","rt-DropdownMenuContent","rt-DropdownMenuSubContent",c)},e.createElement(h,{type:"auto"},e.createElement("div",{className:a("rt-BaseMenuViewport","rt-DropdownMenuViewport")},w)))))});K.displayName="DropdownMenu.SubContent";const j=e.forwardRef((o,n)=>e.createElement($,{...o,ref:n,className:"rt-DropdownMenuTriggerIcon"}));j.displayName="DropdownMenu.TriggerIcon";export{H as CheckboxItem,G as Content,O as Group,W as Item,L as Label,V as RadioGroup,_ as RadioItem,B as Root,v as Separator,z as Sub,K as SubContent,A as SubTrigger,k as Trigger,j as TriggerIcon};
|
|
2
2
|
//# sourceMappingURL=dropdown-menu.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dropdown-menu.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';\n\nimport { ScrollArea } from './scroll-area.js';\nimport {\n dropdownMenuContentPropDefs,\n dropdownMenuSubContentPropDefs,\n dropdownMenuItemPropDefs,\n dropdownMenuCheckboxItemPropDefs,\n dropdownMenuRadioItemPropDefs,\n} from './dropdown-menu.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { ChevronDownIcon, ThickCheckIcon, ThickChevronLeftIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport {\n DrillDownProvider,\n SubContext,\n useDrillDown,\n useDrillDownOptional,\n useSubContext,\n} from './_internal/dropdown-menu-drill-down.js';\nimport type { SubmenuBehavior } from './_internal/dropdown-menu-drill-down.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { Kbd } from './kbd.js';\n\nimport type { IconProps } from './icons.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes, Responsive } from '../props/prop-def.js';\n\ninterface DropdownMenuRootProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\nconst DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => (\n <DropdownMenuPrimitive.Root {...props} />\n);\nDropdownMenuRoot.displayName = 'DropdownMenu.Root';\n\ntype DropdownMenuTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.Trigger>;\ninterface DropdownMenuTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Trigger, RemovedProps> {}\nconst DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(\n ({ children, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Trigger {...props} ref={forwardedRef} asChild>\n {requireReactElement(children)}\n </DropdownMenuPrimitive.Trigger>\n ),\n);\nDropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';\n\n/**\n * Internal component that wraps root menu items and handles visibility in drill-down mode.\n * In drill-down mode, this hides when a submenu is active.\n */\nfunction DrillDownRoot({ children }: { children: React.ReactNode }) {\n const drillDown = useDrillDownOptional();\n\n // In cascade mode or when no drill-down context, always show\n if (!drillDown || drillDown.behavior === 'cascade') {\n return <>{children}</>;\n }\n\n // In drill-down mode, hide root when a submenu is active\n return (\n <div\n className=\"rt-DropdownMenuDrillDownRoot\"\n data-drill-down-active={drillDown.isRoot ? undefined : true}\n >\n {children}\n </div>\n );\n}\n\ntype DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuContentPropDefs> & {\n /**\n * Controls how submenus behave.\n * - `cascade`: Default cascading behavior where submenus open to the side (portal-based)\n * - `drill-down`: Mobile-friendly behavior where submenus replace the content inline\n * Supports responsive values: `{ initial: 'drill-down', md: 'cascade' }`\n */\n submenuBehavior?: Responsive<SubmenuBehavior>;\n};\ntype DropdownMenuContentContextValue = Omit<DropdownMenuContentOwnProps, 'submenuBehavior'>;\nconst DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});\ntype DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;\ninterface DropdownMenuContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Content, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n /**\n * Controls how submenus behave.\n * - `cascade`: Default cascading behavior where submenus open to the side (portal-based)\n * - `drill-down`: Mobile-friendly behavior where submenus replace the content inline\n * Supports responsive values: `{ initial: 'drill-down', md: 'cascade' }`\n */\n submenuBehavior?: Responsive<SubmenuBehavior>;\n}\nconst DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(\n (props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n // Show deprecation warning for panelBackground when used\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n );\n }\n }, [props.panelBackground]);\n\n // Material takes precedence over panelBackground\n const effectiveMaterial =\n props.material ?? props.panelBackground ?? themeContext.panelBackground;\n\n // Memoize theme context values to prevent unnecessary re-renders\n const memoizedThemeContext = React.useMemo(\n () => ({\n material: effectiveMaterial,\n accentColor: themeContext.accentColor,\n }),\n [effectiveMaterial, themeContext.accentColor],\n );\n\n const {\n size = dropdownMenuContentPropDefs.size.default,\n variant = dropdownMenuContentPropDefs.variant.default,\n highContrast = dropdownMenuContentPropDefs.highContrast.default,\n material = memoizedThemeContext.material,\n submenuBehavior,\n } = props;\n const {\n className,\n children,\n color,\n container,\n forceMount,\n material: _,\n panelBackground: __,\n submenuBehavior: ___,\n ...contentProps\n } = extractProps(props, dropdownMenuContentPropDefs);\n\n // Memoize color resolution to prevent unnecessary re-renders\n const resolvedColor = React.useMemo(\n () => color || memoizedThemeContext.accentColor,\n [color, memoizedThemeContext.accentColor],\n );\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.Content\n data-accent-color={resolvedColor}\n data-material={material}\n data-panel-background={material}\n align=\"start\"\n sideOffset={4}\n collisionPadding={10}\n {...contentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-DropdownMenuContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n <DropdownMenuContentContext.Provider\n value={React.useMemo(\n () => ({ size, variant, color: resolvedColor, highContrast, material }),\n [size, variant, resolvedColor, highContrast, material],\n )}\n >\n <DrillDownProvider submenuBehavior={submenuBehavior}>\n <DrillDownRoot>{children}</DrillDownRoot>\n </DrillDownProvider>\n </DropdownMenuContentContext.Provider>\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.Content>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ntype DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;\ninterface DropdownMenuLabelProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Label, RemovedProps> {}\nconst DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Label\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuLabel', 'rt-DropdownMenuLabel', className)}\n />\n ),\n);\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ntype DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;\ntype DropdownMenuItemOwnProps = GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\ninterface DropdownMenuItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Item, RemovedProps>,\n DropdownMenuItemOwnProps {}\nconst DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(\n (props, forwardedRef) => {\n const {\n className,\n children,\n color = dropdownMenuItemPropDefs.color.default,\n shortcut,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.Item\n data-accent-color={color}\n {...itemProps}\n ref={forwardedRef}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-DropdownMenuItem', className)}\n >\n <Slot.Slottable>{children}</Slot.Slottable>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ntype DropdownMenuGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.Group>;\ninterface DropdownMenuGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Group, RemovedProps> {}\nconst DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Group\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-DropdownMenuGroup', className)}\n />\n ),\n);\nDropdownMenuGroup.displayName = 'DropdownMenu.Group';\n\ntype DropdownMenuRadioGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>;\ninterface DropdownMenuRadioGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioGroup, RemovedProps> {}\nconst DropdownMenuRadioGroup = React.forwardRef<\n DropdownMenuRadioGroupElement,\n DropdownMenuRadioGroupProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.RadioGroup\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuRadioGroup', 'rt-DropdownMenuRadioGroup', className)}\n />\n));\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ntype DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;\ntype DropdownMenuRadioItemOwnProps = GetPropDefTypes<typeof dropdownMenuRadioItemPropDefs>;\ninterface DropdownMenuRadioItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioItem, RemovedProps>,\n DropdownMenuRadioItemOwnProps {}\nconst DropdownMenuRadioItem = React.forwardRef<\n DropdownMenuRadioItemElement,\n DropdownMenuRadioItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n color = dropdownMenuRadioItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.RadioItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuRadioItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuRadioItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickDotIcon className=\"rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\ntype DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;\ntype DropdownMenuCheckboxItemOwnProps = GetPropDefTypes<typeof dropdownMenuCheckboxItemPropDefs>;\ninterface DropdownMenuCheckboxItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.CheckboxItem, RemovedProps>,\n DropdownMenuCheckboxItemOwnProps {}\nconst DropdownMenuCheckboxItem = React.forwardRef<\n DropdownMenuCheckboxItemElement,\n DropdownMenuCheckboxItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n shortcut,\n color = dropdownMenuCheckboxItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.CheckboxItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuCheckboxItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuCheckboxItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickCheckIcon className=\"rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n});\nDropdownMenuCheckboxItem.displayName = 'DropdownMenu.CheckboxItem';\n\n// Generate unique submenu IDs using React 18's useId for SSR safety\nfunction useSubId() {\n return React.useId();\n}\n\ninterface DropdownMenuSubProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {\n /**\n * Label displayed in the back button when using drill-down mode.\n * If not provided, defaults to \"Back\".\n */\n label?: React.ReactNode;\n}\nconst DropdownMenuSub: React.FC<DropdownMenuSubProps> = ({ label = 'Back', ...props }) => {\n const drillDown = useDrillDownOptional();\n const subId = useSubId();\n\n // Create context value for SubContent and SubTrigger\n const subContextValue = React.useMemo(\n () => ({ id: subId, label }),\n [subId, label]\n );\n\n // In drill-down mode, we don't use Radix's Sub component\n // We just provide the SubContext and render children\n if (drillDown?.behavior === 'drill-down') {\n return (\n <SubContext.Provider value={subContextValue}>\n {props.children}\n </SubContext.Provider>\n );\n }\n\n // In cascade mode, use Radix's Sub component normally\n return (\n <SubContext.Provider value={subContextValue}>\n <DropdownMenuPrimitive.Sub {...props} />\n </SubContext.Provider>\n );\n};\nDropdownMenuSub.displayName = 'DropdownMenu.Sub';\n\ntype DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;\ninterface DropdownMenuSubTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubTrigger, RemovedProps> {}\nconst DropdownMenuSubTrigger = React.forwardRef<\n DropdownMenuSubTriggerElement,\n DropdownMenuSubTriggerProps\n>((props, forwardedRef) => {\n const { className, children, onClick, ...subTriggerProps } = props;\n const drillDown = useDrillDownOptional();\n const subContext = useSubContext();\n\n // In drill-down mode, render a button that navigates to the submenu\n if (drillDown?.behavior === 'drill-down' && subContext) {\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n drillDown.push(subContext.id);\n (onClick as React.MouseEventHandler<HTMLDivElement> | undefined)?.(e);\n };\n\n return (\n <div\n role=\"menuitem\"\n tabIndex={0}\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n drillDown.push(subContext.id);\n }\n }}\n className={classNames(\n 'rt-reset',\n 'rt-BaseMenuItem',\n 'rt-BaseMenuSubTrigger',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuSubTrigger',\n 'rt-DropdownMenuDrillDownSubTrigger',\n className,\n )}\n >\n {children}\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <ThickChevronRightIcon className=\"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon\" />\n </div>\n </div>\n );\n }\n\n // In cascade mode, use Radix's SubTrigger\n return (\n <DropdownMenuPrimitive.SubTrigger\n {...subTriggerProps}\n onClick={onClick as React.MouseEventHandler<HTMLDivElement> | undefined}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuSubTrigger',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuSubTrigger',\n className,\n )}\n >\n {children}\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <ThickChevronRightIcon className=\"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon\" />\n </div>\n </DropdownMenuPrimitive.SubTrigger>\n );\n});\nDropdownMenuSubTrigger.displayName = 'DropdownMenu.SubTrigger';\n\n// Separator is defined here (before SubContent) because it's used in drill-down mode\ntype DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;\ninterface DropdownMenuSeparatorProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Separator, RemovedProps> {}\nconst DropdownMenuSeparator = React.forwardRef<\n DropdownMenuSeparatorElement,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Separator\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}\n />\n));\nDropdownMenuSeparator.displayName = 'DropdownMenu.Separator';\n\n/**\n * Internal component for the drill-down back button.\n */\nfunction DrillDownBackItem({ label }: { label: React.ReactNode }) {\n const drillDown = useDrillDown();\n\n return (\n <div\n role=\"menuitem\"\n tabIndex={0}\n onClick={(e) => {\n e.preventDefault();\n drillDown.pop();\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n drillDown.pop();\n }\n }}\n className={classNames(\n 'rt-reset',\n 'rt-BaseMenuItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuDrillDownBackItem',\n )}\n >\n <ThickChevronLeftIcon className=\"rt-DropdownMenuDrillDownBackIcon\" />\n <span className=\"rt-DropdownMenuDrillDownBackLabel\">{label}</span>\n </div>\n );\n}\n\ntype DropdownMenuSubContentElement = React.ElementRef<typeof DropdownMenuPrimitive.SubContent>;\ninterface DropdownMenuSubContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubContent, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuSubContent = React.forwardRef<\n DropdownMenuSubContentElement,\n DropdownMenuSubContentProps\n>((props, forwardedRef) => {\n // Memoize context consumption to prevent unnecessary re-renders\n const contextValue = React.useContext(DropdownMenuContentContext);\n const { size, variant, color, highContrast, material } = React.useMemo(\n () => contextValue,\n [contextValue],\n );\n const drillDown = useDrillDownOptional();\n const subContext = useSubContext();\n\n const {\n className,\n children,\n container,\n forceMount,\n material: _,\n panelBackground: __,\n ...subContentProps\n } = extractProps(\n { size, variant, color, highContrast, material, ...props },\n dropdownMenuSubContentPropDefs,\n );\n\n // In drill-down mode, render inline instead of in a portal\n if (drillDown?.behavior === 'drill-down' && subContext) {\n const isActive = drillDown.isActive(subContext.id);\n\n return (\n <div\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n role=\"menu\"\n aria-label={typeof subContext.label === 'string' ? subContext.label : undefined}\n data-drill-down-active={isActive ? true : undefined}\n className={classNames(\n 'rt-DropdownMenuDrillDownPanel',\n className,\n )}\n >\n <DrillDownBackItem label={subContext.label} />\n <DropdownMenuSeparator />\n {children}\n </div>\n );\n }\n\n // In cascade mode, use Portal and Radix's SubContent\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.SubContent\n data-accent-color={color}\n data-material={material}\n data-panel-background={material}\n alignOffset={-Number(size) * 4}\n // Side offset accounts for the outer solid box-shadow\n sideOffset={1}\n collisionPadding={10}\n {...subContentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-BaseMenuSubContent',\n 'rt-DropdownMenuContent',\n 'rt-DropdownMenuSubContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n {children}\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.SubContent>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';\n\ntype DropdownMenuTriggerIconElement = React.ElementRef<'svg'>;\ninterface DropdownMenuTriggerIconProps extends IconProps {}\nconst DropdownMenuTriggerIcon = React.forwardRef<\n DropdownMenuTriggerIconElement,\n DropdownMenuTriggerIconProps\n>((props, forwardedRef) => (\n <ChevronDownIcon {...props} ref={forwardedRef} className=\"rt-DropdownMenuTriggerIcon\" />\n));\nDropdownMenuTriggerIcon.displayName = 'DropdownMenu.TriggerIcon';\n\nexport {\n DropdownMenuRoot as Root,\n DropdownMenuTrigger as Trigger,\n DropdownMenuTriggerIcon as TriggerIcon,\n DropdownMenuContent as Content,\n DropdownMenuLabel as Label,\n DropdownMenuItem as Item,\n DropdownMenuGroup as Group,\n DropdownMenuRadioGroup as RadioGroup,\n DropdownMenuRadioItem as RadioItem,\n DropdownMenuCheckboxItem as CheckboxItem,\n DropdownMenuSub as Sub,\n DropdownMenuSubTrigger as SubTrigger,\n DropdownMenuSubContent as SubContent,\n DropdownMenuSeparator as Separator,\n};\n\nexport type {\n DropdownMenuRootProps as RootProps,\n DropdownMenuTriggerProps as TriggerProps,\n DropdownMenuTriggerIconProps as TriggerIconProps,\n DropdownMenuContentProps as ContentProps,\n DropdownMenuLabelProps as LabelProps,\n DropdownMenuItemProps as ItemProps,\n DropdownMenuGroupProps as GroupProps,\n DropdownMenuRadioGroupProps as RadioGroupProps,\n DropdownMenuRadioItemProps as RadioItemProps,\n DropdownMenuCheckboxItemProps as CheckboxItemProps,\n DropdownMenuSubProps as SubProps,\n DropdownMenuSubTriggerProps as SubTriggerProps,\n DropdownMenuSubContentProps as SubContentProps,\n DropdownMenuSeparatorProps as SeparatorProps,\n SubmenuBehavior,\n};\n"],
|
|
5
|
-
"mappings": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,gBAAgBC,EAAuB,QAAAC,MAAY,WAE5D,OAAS,cAAAC,MAAkB,mBAC3B,OACE,+BAAAC,EACA,kCAAAC,EACA,4BAAAC,EACA,oCAAAC,EACA,iCAAAC,MACK,2BACP,OAAS,SAAAC,EAAO,mBAAAC,MAAuB,aACvC,OAAS,mBAAAC,EAAiB,kBAAAC,GAAgB,wBAAAC,GAAsB,yBAAAC,EAAuB,gBAAAC,OAAoB,aAC3G,OAAS,gBAAAC,MAAoB,8BAC7B,OACE,qBAAAC,GACA,cAAAC,EACA,gBAAAC,GACA,wBAAAC,EACA,iBAAAC,MACK,0CAEP,OAAS,uBAAAC,OAA2B,sCACpC,OAAS,OAAAC,MAAW,WAQpB,MAAMC,EAAqDC,GACzD1B,EAAA,cAACE,EAAsB,KAAtB,CAA4B,GAAGwB,EAAO,EAEzCD,EAAiB,YAAc,oBAK/B,MAAME,EAAsB3B,EAAM,WAChC,CAAC,CAAE,SAAA4B,EAAU,GAAGF,CAAM,EAAGG,IACvB7B,EAAA,cAACE,EAAsB,QAAtB,CAA+B,GAAGwB,EAAO,IAAKG,EAAc,QAAO,IACjEN,GAAoBK,CAAQ,CAC/B,CAEJ,EACAD,EAAoB,YAAc,uBAMlC,SAASG,GAAc,CAAE,SAAAF,CAAS,EAAkC,CAClE,MAAMG,EAAYV,EAAqB,EAGvC,MAAI,CAACU,GAAaA,EAAU,WAAa,UAChC/B,EAAA,cAAAA,EAAA,cAAG4B,CAAS,EAKnB5B,EAAA,cAAC,OACC,UAAU,+BACV,yBAAwB+B,EAAU,OAAS,OAAY,
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';\n\nimport { ScrollArea } from './scroll-area.js';\nimport {\n dropdownMenuContentPropDefs,\n dropdownMenuSubContentPropDefs,\n dropdownMenuItemPropDefs,\n dropdownMenuCheckboxItemPropDefs,\n dropdownMenuRadioItemPropDefs,\n} from './dropdown-menu.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { ChevronDownIcon, ThickCheckIcon, ThickChevronLeftIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport {\n DrillDownProvider,\n SubContext,\n useDrillDown,\n useDrillDownOptional,\n useSubContext,\n} from './_internal/dropdown-menu-drill-down.js';\nimport type { SubmenuBehavior } from './_internal/dropdown-menu-drill-down.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { Kbd } from './kbd.js';\n\nimport type { IconProps } from './icons.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes, Responsive } from '../props/prop-def.js';\n\ninterface DropdownMenuRootProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\nconst DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => (\n <DropdownMenuPrimitive.Root {...props} />\n);\nDropdownMenuRoot.displayName = 'DropdownMenu.Root';\n\ntype DropdownMenuTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.Trigger>;\ninterface DropdownMenuTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Trigger, RemovedProps> {}\nconst DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(\n ({ children, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Trigger {...props} ref={forwardedRef} asChild>\n {requireReactElement(children)}\n </DropdownMenuPrimitive.Trigger>\n ),\n);\nDropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';\n\n/**\n * Internal component that wraps root menu items and handles visibility in drill-down mode.\n * In drill-down mode, this hides when a submenu is active.\n */\nfunction DrillDownRoot({ children }: { children: React.ReactNode }) {\n const drillDown = useDrillDownOptional();\n\n // In cascade mode or when no drill-down context, always show\n if (!drillDown || drillDown.behavior === 'cascade') {\n return <>{children}</>;\n }\n\n // In drill-down mode, hide root when a submenu is active\n return (\n <div\n className=\"rt-DropdownMenuDrillDownRoot\"\n data-drill-down-active={drillDown.isRoot ? undefined : true}\n data-animation-direction={drillDown.animationDirection ?? undefined}\n >\n {children}\n </div>\n );\n}\n\ntype DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuContentPropDefs> & {\n /**\n * Controls how submenus behave.\n * - `cascade`: Default cascading behavior where submenus open to the side (portal-based)\n * - `drill-down`: Mobile-friendly behavior where submenus replace the content inline\n * Supports responsive values: `{ initial: 'drill-down', md: 'cascade' }`\n */\n submenuBehavior?: Responsive<SubmenuBehavior>;\n};\ntype DropdownMenuContentContextValue = Omit<DropdownMenuContentOwnProps, 'submenuBehavior'>;\nconst DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});\ntype DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;\ninterface DropdownMenuContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Content, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n /**\n * Controls how submenus behave.\n * - `cascade`: Default cascading behavior where submenus open to the side (portal-based)\n * - `drill-down`: Mobile-friendly behavior where submenus replace the content inline\n * Supports responsive values: `{ initial: 'drill-down', md: 'cascade' }`\n */\n submenuBehavior?: Responsive<SubmenuBehavior>;\n}\nconst DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(\n (props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n // Show deprecation warning for panelBackground when used\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n );\n }\n }, [props.panelBackground]);\n\n // Material takes precedence over panelBackground\n const effectiveMaterial =\n props.material ?? props.panelBackground ?? themeContext.panelBackground;\n\n // Memoize theme context values to prevent unnecessary re-renders\n const memoizedThemeContext = React.useMemo(\n () => ({\n material: effectiveMaterial,\n accentColor: themeContext.accentColor,\n }),\n [effectiveMaterial, themeContext.accentColor],\n );\n\n const {\n size = dropdownMenuContentPropDefs.size.default,\n variant = dropdownMenuContentPropDefs.variant.default,\n highContrast = dropdownMenuContentPropDefs.highContrast.default,\n material = memoizedThemeContext.material,\n submenuBehavior,\n } = props;\n const {\n className,\n children,\n color,\n container,\n forceMount,\n material: _,\n panelBackground: __,\n submenuBehavior: ___,\n ...contentProps\n } = extractProps(props, dropdownMenuContentPropDefs);\n\n // Memoize color resolution to prevent unnecessary re-renders\n const resolvedColor = React.useMemo(\n () => color || memoizedThemeContext.accentColor,\n [color, memoizedThemeContext.accentColor],\n );\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.Content\n data-accent-color={resolvedColor}\n data-material={material}\n data-panel-background={material}\n align=\"start\"\n sideOffset={4}\n collisionPadding={10}\n {...contentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-DropdownMenuContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n <DropdownMenuContentContext.Provider\n value={React.useMemo(\n () => ({ size, variant, color: resolvedColor, highContrast, material }),\n [size, variant, resolvedColor, highContrast, material],\n )}\n >\n <DrillDownProvider submenuBehavior={submenuBehavior}>\n <DrillDownRoot>{children}</DrillDownRoot>\n </DrillDownProvider>\n </DropdownMenuContentContext.Provider>\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.Content>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ntype DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;\ninterface DropdownMenuLabelProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Label, RemovedProps> {}\nconst DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Label\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuLabel', 'rt-DropdownMenuLabel', className)}\n />\n ),\n);\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ntype DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;\ntype DropdownMenuItemOwnProps = GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\ninterface DropdownMenuItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Item, RemovedProps>,\n DropdownMenuItemOwnProps {}\nconst DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(\n (props, forwardedRef) => {\n const {\n className,\n children,\n color = dropdownMenuItemPropDefs.color.default,\n shortcut,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.Item\n data-accent-color={color}\n {...itemProps}\n ref={forwardedRef}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-DropdownMenuItem', className)}\n >\n <Slot.Slottable>{children}</Slot.Slottable>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ntype DropdownMenuGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.Group>;\ninterface DropdownMenuGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Group, RemovedProps> {}\nconst DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Group\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-DropdownMenuGroup', className)}\n />\n ),\n);\nDropdownMenuGroup.displayName = 'DropdownMenu.Group';\n\ntype DropdownMenuRadioGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>;\ninterface DropdownMenuRadioGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioGroup, RemovedProps> {}\nconst DropdownMenuRadioGroup = React.forwardRef<\n DropdownMenuRadioGroupElement,\n DropdownMenuRadioGroupProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.RadioGroup\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuRadioGroup', 'rt-DropdownMenuRadioGroup', className)}\n />\n));\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ntype DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;\ntype DropdownMenuRadioItemOwnProps = GetPropDefTypes<typeof dropdownMenuRadioItemPropDefs>;\ninterface DropdownMenuRadioItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioItem, RemovedProps>,\n DropdownMenuRadioItemOwnProps {}\nconst DropdownMenuRadioItem = React.forwardRef<\n DropdownMenuRadioItemElement,\n DropdownMenuRadioItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n color = dropdownMenuRadioItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.RadioItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuRadioItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuRadioItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickDotIcon className=\"rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\ntype DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;\ntype DropdownMenuCheckboxItemOwnProps = GetPropDefTypes<typeof dropdownMenuCheckboxItemPropDefs>;\ninterface DropdownMenuCheckboxItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.CheckboxItem, RemovedProps>,\n DropdownMenuCheckboxItemOwnProps {}\nconst DropdownMenuCheckboxItem = React.forwardRef<\n DropdownMenuCheckboxItemElement,\n DropdownMenuCheckboxItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n shortcut,\n color = dropdownMenuCheckboxItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.CheckboxItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuCheckboxItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuCheckboxItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickCheckIcon className=\"rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n});\nDropdownMenuCheckboxItem.displayName = 'DropdownMenu.CheckboxItem';\n\n// Generate unique submenu IDs using React 18's useId for SSR safety\nfunction useSubId() {\n return React.useId();\n}\n\ninterface DropdownMenuSubProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {\n /**\n * Label displayed in the back button when using drill-down mode.\n * If not provided, defaults to \"Back\".\n */\n label?: React.ReactNode;\n}\nconst DropdownMenuSub: React.FC<DropdownMenuSubProps> = ({ label = 'Back', ...props }) => {\n const drillDown = useDrillDownOptional();\n const subId = useSubId();\n\n // Create context value for SubContent and SubTrigger\n const subContextValue = React.useMemo(\n () => ({ id: subId, label }),\n [subId, label]\n );\n\n // In drill-down mode, we don't use Radix's Sub component\n // We just provide the SubContext and render children\n if (drillDown?.behavior === 'drill-down') {\n return (\n <SubContext.Provider value={subContextValue}>\n {props.children}\n </SubContext.Provider>\n );\n }\n\n // In cascade mode, use Radix's Sub component normally\n return (\n <SubContext.Provider value={subContextValue}>\n <DropdownMenuPrimitive.Sub {...props} />\n </SubContext.Provider>\n );\n};\nDropdownMenuSub.displayName = 'DropdownMenu.Sub';\n\ntype DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;\ninterface DropdownMenuSubTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubTrigger, RemovedProps> {}\nconst DropdownMenuSubTrigger = React.forwardRef<\n DropdownMenuSubTriggerElement,\n DropdownMenuSubTriggerProps\n>((props, forwardedRef) => {\n const { className, children, onClick, ...subTriggerProps } = props;\n const drillDown = useDrillDownOptional();\n const subContext = useSubContext();\n\n // In drill-down mode, render a button that navigates to the submenu\n if (drillDown?.behavior === 'drill-down' && subContext) {\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n drillDown.push(subContext.id);\n (onClick as React.MouseEventHandler<HTMLDivElement> | undefined)?.(e);\n };\n\n return (\n <div\n role=\"menuitem\"\n tabIndex={0}\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n drillDown.push(subContext.id);\n }\n }}\n className={classNames(\n 'rt-reset',\n 'rt-BaseMenuItem',\n 'rt-BaseMenuSubTrigger',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuSubTrigger',\n 'rt-DropdownMenuDrillDownSubTrigger',\n className,\n )}\n >\n {children}\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <ThickChevronRightIcon className=\"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon\" />\n </div>\n </div>\n );\n }\n\n // In cascade mode, use Radix's SubTrigger\n return (\n <DropdownMenuPrimitive.SubTrigger\n {...subTriggerProps}\n onClick={onClick as React.MouseEventHandler<HTMLDivElement> | undefined}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuSubTrigger',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuSubTrigger',\n className,\n )}\n >\n {children}\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <ThickChevronRightIcon className=\"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon\" />\n </div>\n </DropdownMenuPrimitive.SubTrigger>\n );\n});\nDropdownMenuSubTrigger.displayName = 'DropdownMenu.SubTrigger';\n\n// Separator is defined here (before SubContent) because it's used in drill-down mode\ntype DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;\ninterface DropdownMenuSeparatorProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Separator, RemovedProps> {}\nconst DropdownMenuSeparator = React.forwardRef<\n DropdownMenuSeparatorElement,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Separator\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}\n />\n));\nDropdownMenuSeparator.displayName = 'DropdownMenu.Separator';\n\n/**\n * Internal component for the drill-down back button.\n */\nfunction DrillDownBackItem({ label }: { label: React.ReactNode }) {\n const drillDown = useDrillDown();\n\n return (\n <div\n role=\"menuitem\"\n tabIndex={0}\n onClick={(e) => {\n e.preventDefault();\n drillDown.pop();\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n drillDown.pop();\n }\n }}\n className={classNames(\n 'rt-reset',\n 'rt-BaseMenuItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuDrillDownBackItem',\n )}\n >\n <ThickChevronLeftIcon className=\"rt-DropdownMenuDrillDownBackIcon\" />\n <span className=\"rt-DropdownMenuDrillDownBackLabel\">{label}</span>\n </div>\n );\n}\n\ntype DropdownMenuSubContentElement = React.ElementRef<typeof DropdownMenuPrimitive.SubContent>;\ninterface DropdownMenuSubContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubContent, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuSubContent = React.forwardRef<\n DropdownMenuSubContentElement,\n DropdownMenuSubContentProps\n>((props, forwardedRef) => {\n // Memoize context consumption to prevent unnecessary re-renders\n const contextValue = React.useContext(DropdownMenuContentContext);\n const { size, variant, color, highContrast, material } = React.useMemo(\n () => contextValue,\n [contextValue],\n );\n const drillDown = useDrillDownOptional();\n const subContext = useSubContext();\n\n const {\n className,\n children,\n container,\n forceMount,\n material: _,\n panelBackground: __,\n ...subContentProps\n } = extractProps(\n { size, variant, color, highContrast, material, ...props },\n dropdownMenuSubContentPropDefs,\n );\n\n // In drill-down mode, render inline instead of in a portal\n if (drillDown?.behavior === 'drill-down' && subContext) {\n const isActive = drillDown.isActive(subContext.id);\n\n return (\n <div\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n role=\"menu\"\n aria-label={typeof subContext.label === 'string' ? subContext.label : undefined}\n data-drill-down-active={isActive ? true : undefined}\n data-animation-direction={drillDown.animationDirection ?? undefined}\n className={classNames(\n 'rt-DropdownMenuDrillDownPanel',\n className,\n )}\n >\n <DrillDownBackItem label={subContext.label} />\n <DropdownMenuSeparator />\n {children}\n </div>\n );\n }\n\n // In cascade mode, use Portal and Radix's SubContent\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.SubContent\n data-accent-color={color}\n data-material={material}\n data-panel-background={material}\n alignOffset={-Number(size) * 4}\n // Side offset accounts for the outer solid box-shadow\n sideOffset={1}\n collisionPadding={10}\n {...subContentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-BaseMenuSubContent',\n 'rt-DropdownMenuContent',\n 'rt-DropdownMenuSubContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n {children}\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.SubContent>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';\n\ntype DropdownMenuTriggerIconElement = React.ElementRef<'svg'>;\ninterface DropdownMenuTriggerIconProps extends IconProps {}\nconst DropdownMenuTriggerIcon = React.forwardRef<\n DropdownMenuTriggerIconElement,\n DropdownMenuTriggerIconProps\n>((props, forwardedRef) => (\n <ChevronDownIcon {...props} ref={forwardedRef} className=\"rt-DropdownMenuTriggerIcon\" />\n));\nDropdownMenuTriggerIcon.displayName = 'DropdownMenu.TriggerIcon';\n\nexport {\n DropdownMenuRoot as Root,\n DropdownMenuTrigger as Trigger,\n DropdownMenuTriggerIcon as TriggerIcon,\n DropdownMenuContent as Content,\n DropdownMenuLabel as Label,\n DropdownMenuItem as Item,\n DropdownMenuGroup as Group,\n DropdownMenuRadioGroup as RadioGroup,\n DropdownMenuRadioItem as RadioItem,\n DropdownMenuCheckboxItem as CheckboxItem,\n DropdownMenuSub as Sub,\n DropdownMenuSubTrigger as SubTrigger,\n DropdownMenuSubContent as SubContent,\n DropdownMenuSeparator as Separator,\n};\n\nexport type {\n DropdownMenuRootProps as RootProps,\n DropdownMenuTriggerProps as TriggerProps,\n DropdownMenuTriggerIconProps as TriggerIconProps,\n DropdownMenuContentProps as ContentProps,\n DropdownMenuLabelProps as LabelProps,\n DropdownMenuItemProps as ItemProps,\n DropdownMenuGroupProps as GroupProps,\n DropdownMenuRadioGroupProps as RadioGroupProps,\n DropdownMenuRadioItemProps as RadioItemProps,\n DropdownMenuCheckboxItemProps as CheckboxItemProps,\n DropdownMenuSubProps as SubProps,\n DropdownMenuSubTriggerProps as SubTriggerProps,\n DropdownMenuSubContentProps as SubContentProps,\n DropdownMenuSeparatorProps as SeparatorProps,\n SubmenuBehavior,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "classNames", "DropdownMenuPrimitive", "Slot", "ScrollArea", "dropdownMenuContentPropDefs", "dropdownMenuSubContentPropDefs", "dropdownMenuItemPropDefs", "dropdownMenuCheckboxItemPropDefs", "dropdownMenuRadioItemPropDefs", "Theme", "useThemeContext", "ChevronDownIcon", "ThickCheckIcon", "ThickChevronLeftIcon", "ThickChevronRightIcon", "ThickDotIcon", "extractProps", "DrillDownProvider", "SubContext", "useDrillDown", "useDrillDownOptional", "useSubContext", "requireReactElement", "Kbd", "DropdownMenuRoot", "props", "DropdownMenuTrigger", "children", "forwardedRef", "DrillDownRoot", "drillDown", "DropdownMenuContentContext", "DropdownMenuContent", "themeContext", "effectiveMaterial", "memoizedThemeContext", "size", "variant", "highContrast", "material", "submenuBehavior", "className", "color", "container", "forceMount", "_", "__", "___", "contentProps", "resolvedColor", "DropdownMenuLabel", "DropdownMenuItem", "shortcut", "itemProps", "DropdownMenuGroup", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuCheckboxItem", "useSubId", "DropdownMenuSub", "label", "subId", "subContextValue", "DropdownMenuSubTrigger", "onClick", "subTriggerProps", "subContext", "e", "DropdownMenuSeparator", "DrillDownBackItem", "DropdownMenuSubContent", "contextValue", "subContentProps", "isActive", "DropdownMenuTriggerIcon"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kushagradhawan/kookie-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.128",
|
|
4
4
|
"description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
"react-dom": "^19.0.0",
|
|
190
190
|
"stylelint": "16.6.1",
|
|
191
191
|
"tsd": "^0.33.0",
|
|
192
|
-
"typescript": "
|
|
192
|
+
"typescript": "~5.8.0",
|
|
193
193
|
"typescript-eslint": "^8.18.1",
|
|
194
194
|
"vitest": "^4.0.16"
|
|
195
195
|
},
|
package/schemas/base-button.json
CHANGED
|
@@ -279,6 +279,6 @@
|
|
|
279
279
|
"title": "Base-button Component Props",
|
|
280
280
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
281
281
|
"version": "1.0.0",
|
|
282
|
-
"generatedAt": "2026-01-
|
|
282
|
+
"generatedAt": "2026-01-13T06:25:06.869Z",
|
|
283
283
|
"source": "Zod schema"
|
|
284
284
|
}
|
package/schemas/button.json
CHANGED
|
@@ -530,6 +530,6 @@
|
|
|
530
530
|
"title": "Button Component Props",
|
|
531
531
|
"description": "Props schema for the button component in Kookie UI",
|
|
532
532
|
"version": "1.0.0",
|
|
533
|
-
"generatedAt": "2026-01-
|
|
533
|
+
"generatedAt": "2026-01-13T06:25:06.875Z",
|
|
534
534
|
"source": "Zod schema"
|
|
535
535
|
}
|
package/schemas/icon-button.json
CHANGED
|
@@ -313,6 +313,6 @@
|
|
|
313
313
|
"title": "Icon-button Component Props",
|
|
314
314
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
315
315
|
"version": "1.0.0",
|
|
316
|
-
"generatedAt": "2026-01-
|
|
316
|
+
"generatedAt": "2026-01-13T06:25:06.876Z",
|
|
317
317
|
"source": "Zod schema"
|
|
318
318
|
}
|
package/schemas/index.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"title": "Kookie UI Button Components",
|
|
4
4
|
"description": "Complete JSON Schema collection for all button components in Kookie UI",
|
|
5
5
|
"version": "1.0.0",
|
|
6
|
-
"generatedAt": "2026-01-
|
|
6
|
+
"generatedAt": "2026-01-13T06:25:06.879Z",
|
|
7
7
|
"source": "Zod schemas",
|
|
8
8
|
"components": {
|
|
9
9
|
"base-button": {
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
"title": "Base-button Component Props",
|
|
288
288
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
289
289
|
"version": "1.0.0",
|
|
290
|
-
"generatedAt": "2026-01-
|
|
290
|
+
"generatedAt": "2026-01-13T06:25:06.869Z",
|
|
291
291
|
"source": "Zod schema"
|
|
292
292
|
},
|
|
293
293
|
"button": {
|
|
@@ -822,7 +822,7 @@
|
|
|
822
822
|
"title": "Button Component Props",
|
|
823
823
|
"description": "Props schema for the button component in Kookie UI",
|
|
824
824
|
"version": "1.0.0",
|
|
825
|
-
"generatedAt": "2026-01-
|
|
825
|
+
"generatedAt": "2026-01-13T06:25:06.875Z",
|
|
826
826
|
"source": "Zod schema"
|
|
827
827
|
},
|
|
828
828
|
"icon-button": {
|
|
@@ -1140,7 +1140,7 @@
|
|
|
1140
1140
|
"title": "Icon-button Component Props",
|
|
1141
1141
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
1142
1142
|
"version": "1.0.0",
|
|
1143
|
-
"generatedAt": "2026-01-
|
|
1143
|
+
"generatedAt": "2026-01-13T06:25:06.876Z",
|
|
1144
1144
|
"source": "Zod schema"
|
|
1145
1145
|
},
|
|
1146
1146
|
"toggle-button": {
|
|
@@ -1683,7 +1683,7 @@
|
|
|
1683
1683
|
"title": "Toggle-button Component Props",
|
|
1684
1684
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
1685
1685
|
"version": "1.0.0",
|
|
1686
|
-
"generatedAt": "2026-01-
|
|
1686
|
+
"generatedAt": "2026-01-13T06:25:06.877Z",
|
|
1687
1687
|
"source": "Zod schema"
|
|
1688
1688
|
},
|
|
1689
1689
|
"toggle-icon-button": {
|
|
@@ -2009,7 +2009,7 @@
|
|
|
2009
2009
|
"title": "Toggle-icon-button Component Props",
|
|
2010
2010
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
2011
2011
|
"version": "1.0.0",
|
|
2012
|
-
"generatedAt": "2026-01-
|
|
2012
|
+
"generatedAt": "2026-01-13T06:25:06.878Z",
|
|
2013
2013
|
"source": "Zod schema"
|
|
2014
2014
|
}
|
|
2015
2015
|
}
|
|
@@ -538,6 +538,6 @@
|
|
|
538
538
|
"title": "Toggle-button Component Props",
|
|
539
539
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
540
540
|
"version": "1.0.0",
|
|
541
|
-
"generatedAt": "2026-01-
|
|
541
|
+
"generatedAt": "2026-01-13T06:25:06.877Z",
|
|
542
542
|
"source": "Zod schema"
|
|
543
543
|
}
|
|
@@ -321,6 +321,6 @@
|
|
|
321
321
|
"title": "Toggle-icon-button Component Props",
|
|
322
322
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
323
323
|
"version": "1.0.0",
|
|
324
|
-
"generatedAt": "2026-01-
|
|
324
|
+
"generatedAt": "2026-01-13T06:25:06.878Z",
|
|
325
325
|
"source": "Zod schema"
|
|
326
326
|
}
|
|
@@ -111,6 +111,8 @@ function resolveResponsiveValue<T>(
|
|
|
111
111
|
// DrillDown Context
|
|
112
112
|
// ============================================================================
|
|
113
113
|
|
|
114
|
+
type AnimationDirection = 'forward' | 'backward' | null;
|
|
115
|
+
|
|
114
116
|
interface DrillDownContextValue {
|
|
115
117
|
/** Current submenu behavior mode */
|
|
116
118
|
behavior: SubmenuBehavior;
|
|
@@ -130,6 +132,8 @@ interface DrillDownContextValue {
|
|
|
130
132
|
isRoot: boolean;
|
|
131
133
|
/** The currently active submenu ID (or null if at root) */
|
|
132
134
|
currentId: string | null;
|
|
135
|
+
/** Current animation direction for transitions */
|
|
136
|
+
animationDirection: AnimationDirection;
|
|
133
137
|
}
|
|
134
138
|
|
|
135
139
|
const DrillDownContext = React.createContext<DrillDownContextValue | null>(null);
|
|
@@ -142,6 +146,7 @@ interface DrillDownProviderProps {
|
|
|
142
146
|
function DrillDownProvider({ children, submenuBehavior }: DrillDownProviderProps) {
|
|
143
147
|
const { breakpoint, ready } = useBreakpoint();
|
|
144
148
|
const [stack, setStack] = React.useState<string[]>([]);
|
|
149
|
+
const [animationDirection, setAnimationDirection] = React.useState<AnimationDirection>(null);
|
|
145
150
|
|
|
146
151
|
// Resolve the current behavior based on breakpoint
|
|
147
152
|
const behavior = React.useMemo(
|
|
@@ -154,20 +159,24 @@ function DrillDownProvider({ children, submenuBehavior }: DrillDownProviderProps
|
|
|
154
159
|
React.useEffect(() => {
|
|
155
160
|
if (prevBehaviorRef.current === 'drill-down' && behavior === 'cascade') {
|
|
156
161
|
setStack([]);
|
|
162
|
+
setAnimationDirection(null);
|
|
157
163
|
}
|
|
158
164
|
prevBehaviorRef.current = behavior;
|
|
159
165
|
}, [behavior]);
|
|
160
166
|
|
|
161
167
|
const push = React.useCallback((id: string) => {
|
|
168
|
+
setAnimationDirection('forward');
|
|
162
169
|
setStack((prev) => [...prev, id]);
|
|
163
170
|
}, []);
|
|
164
171
|
|
|
165
172
|
const pop = React.useCallback(() => {
|
|
173
|
+
setAnimationDirection('backward');
|
|
166
174
|
setStack((prev) => prev.slice(0, -1));
|
|
167
175
|
}, []);
|
|
168
176
|
|
|
169
177
|
const reset = React.useCallback(() => {
|
|
170
178
|
setStack([]);
|
|
179
|
+
setAnimationDirection(null);
|
|
171
180
|
}, []);
|
|
172
181
|
|
|
173
182
|
const isActive = React.useCallback(
|
|
@@ -189,8 +198,9 @@ function DrillDownProvider({ children, submenuBehavior }: DrillDownProviderProps
|
|
|
189
198
|
isActive,
|
|
190
199
|
isRoot: stack.length === 0,
|
|
191
200
|
currentId: stack.length > 0 ? stack[stack.length - 1] : null,
|
|
201
|
+
animationDirection,
|
|
192
202
|
}),
|
|
193
|
-
[behavior, ready, stack, push, pop, reset, isActive]
|
|
203
|
+
[behavior, ready, stack, push, pop, reset, isActive, animationDirection]
|
|
194
204
|
);
|
|
195
205
|
|
|
196
206
|
return <DrillDownContext.Provider value={value}>{children}</DrillDownContext.Provider>;
|
|
@@ -239,4 +249,4 @@ export {
|
|
|
239
249
|
resolveResponsiveValue,
|
|
240
250
|
};
|
|
241
251
|
|
|
242
|
-
export type { SubmenuBehavior, DrillDownContextValue, SubContextValue };
|
|
252
|
+
export type { SubmenuBehavior, DrillDownContextValue, SubContextValue, AnimationDirection };
|
|
@@ -95,6 +95,17 @@
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
+
/* Drill-down menu keyframes */
|
|
99
|
+
@keyframes rt-drill-down-enter-from-right {
|
|
100
|
+
from { opacity: 0; transform: translateX(30%); }
|
|
101
|
+
to { opacity: 1; transform: translateX(0); }
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@keyframes rt-drill-down-enter-from-left {
|
|
105
|
+
from { opacity: 0; transform: translateX(-30%); }
|
|
106
|
+
to { opacity: 1; transform: translateX(0); }
|
|
107
|
+
}
|
|
108
|
+
|
|
98
109
|
/* Dialog keyframes (centralized) */
|
|
99
110
|
@keyframes rt-dialog-overlay-no-op {
|
|
100
111
|
from { opacity: 1; }
|
|
@@ -61,11 +61,21 @@
|
|
|
61
61
|
display: none !important;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
/* Keep nested panels visible (they use display: contents) */
|
|
65
|
-
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active])
|
|
64
|
+
/* Keep nested panels visible (they use display: contents) - uses descendant selector to work with groups */
|
|
65
|
+
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) :where(.rt-DropdownMenuDrillDownPanel) {
|
|
66
66
|
display: contents !important;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
/* Keep root-level groups visible so their children (panels) can be shown */
|
|
70
|
+
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > :where(.rt-BaseMenuGroup) {
|
|
71
|
+
display: contents !important;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* When the root is hidden, groups must also hide their non-panel children */
|
|
75
|
+
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > :where(.rt-BaseMenuGroup) > :where(*:not(.rt-DropdownMenuDrillDownPanel)) {
|
|
76
|
+
display: none !important;
|
|
77
|
+
}
|
|
78
|
+
|
|
69
79
|
/* Submenu panel in drill-down mode */
|
|
70
80
|
.rt-DropdownMenuDrillDownPanel {
|
|
71
81
|
display: contents;
|
|
@@ -76,11 +86,21 @@
|
|
|
76
86
|
display: none !important;
|
|
77
87
|
}
|
|
78
88
|
|
|
79
|
-
/* But keep nested panels visible (they use display: contents) */
|
|
80
|
-
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active]))
|
|
89
|
+
/* But keep nested panels visible (they use display: contents) - uses descendant selector to work with groups */
|
|
90
|
+
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) :where(.rt-DropdownMenuDrillDownPanel) {
|
|
81
91
|
display: contents !important;
|
|
82
92
|
}
|
|
83
93
|
|
|
94
|
+
/* Keep groups visible so their children (panels) can be shown */
|
|
95
|
+
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > :where(.rt-BaseMenuGroup) {
|
|
96
|
+
display: contents !important;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* When a panel is inactive, groups must also hide their non-panel children */
|
|
100
|
+
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > :where(.rt-BaseMenuGroup) > :where(*:not(.rt-DropdownMenuDrillDownPanel)) {
|
|
101
|
+
display: none !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
84
104
|
/* Back button item */
|
|
85
105
|
.rt-DropdownMenuDrillDownBackItem {
|
|
86
106
|
display: flex;
|
|
@@ -163,3 +183,25 @@
|
|
|
163
183
|
outline-offset: 2px;
|
|
164
184
|
}
|
|
165
185
|
}
|
|
186
|
+
|
|
187
|
+
/***************************************************************************************************
|
|
188
|
+
* *
|
|
189
|
+
* DRILL-DOWN ANIMATIONS *
|
|
190
|
+
* *
|
|
191
|
+
***************************************************************************************************/
|
|
192
|
+
|
|
193
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
194
|
+
/* Active panel items animate in based on direction */
|
|
195
|
+
.rt-DropdownMenuDrillDownPanel:where([data-drill-down-active][data-animation-direction='forward']) > :where(*:not(.rt-DropdownMenuDrillDownPanel)) {
|
|
196
|
+
animation: rt-drill-down-enter-from-right var(--motion-duration-small) var(--motion-ease-smooth);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.rt-DropdownMenuDrillDownPanel:where([data-drill-down-active][data-animation-direction='backward']) > :where(*:not(.rt-DropdownMenuDrillDownPanel)) {
|
|
200
|
+
animation: rt-drill-down-enter-from-left var(--motion-duration-small) var(--motion-ease-smooth);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* Root items animate when returning from a submenu */
|
|
204
|
+
.rt-DropdownMenuDrillDownRoot:where(:not([data-drill-down-active])[data-animation-direction='backward']) > :where(*:not(.rt-DropdownMenuDrillDownPanel)) {
|
|
205
|
+
animation: rt-drill-down-enter-from-left var(--motion-duration-small) var(--motion-ease-smooth);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
@@ -66,6 +66,7 @@ function DrillDownRoot({ children }: { children: React.ReactNode }) {
|
|
|
66
66
|
<div
|
|
67
67
|
className="rt-DropdownMenuDrillDownRoot"
|
|
68
68
|
data-drill-down-active={drillDown.isRoot ? undefined : true}
|
|
69
|
+
data-animation-direction={drillDown.animationDirection ?? undefined}
|
|
69
70
|
>
|
|
70
71
|
{children}
|
|
71
72
|
</div>
|
|
@@ -556,6 +557,7 @@ const DropdownMenuSubContent = React.forwardRef<
|
|
|
556
557
|
role="menu"
|
|
557
558
|
aria-label={typeof subContext.label === 'string' ? subContext.label : undefined}
|
|
558
559
|
data-drill-down-active={isActive ? true : undefined}
|
|
560
|
+
data-animation-direction={drillDown.animationDirection ?? undefined}
|
|
559
561
|
className={classNames(
|
|
560
562
|
'rt-DropdownMenuDrillDownPanel',
|
|
561
563
|
className,
|
package/styles.css
CHANGED
|
@@ -5422,6 +5422,26 @@
|
|
|
5422
5422
|
animation: rt-tab-indicator-appear var(--motion-duration-small) var(--motion-spring-snappy);
|
|
5423
5423
|
}
|
|
5424
5424
|
}
|
|
5425
|
+
@keyframes rt-drill-down-enter-from-right {
|
|
5426
|
+
from{
|
|
5427
|
+
opacity: 0;
|
|
5428
|
+
transform: translateX(30%);
|
|
5429
|
+
}
|
|
5430
|
+
to{
|
|
5431
|
+
opacity: 1;
|
|
5432
|
+
transform: translateX(0);
|
|
5433
|
+
}
|
|
5434
|
+
}
|
|
5435
|
+
@keyframes rt-drill-down-enter-from-left {
|
|
5436
|
+
from{
|
|
5437
|
+
opacity: 0;
|
|
5438
|
+
transform: translateX(-30%);
|
|
5439
|
+
}
|
|
5440
|
+
to{
|
|
5441
|
+
opacity: 1;
|
|
5442
|
+
transform: translateX(0);
|
|
5443
|
+
}
|
|
5444
|
+
}
|
|
5425
5445
|
@keyframes rt-dialog-overlay-no-op {
|
|
5426
5446
|
from{
|
|
5427
5447
|
opacity: 1;
|
|
@@ -13686,18 +13706,30 @@
|
|
|
13686
13706
|
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > *{
|
|
13687
13707
|
display: none !important;
|
|
13688
13708
|
}
|
|
13689
|
-
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active])
|
|
13709
|
+
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) :where(.rt-DropdownMenuDrillDownPanel){
|
|
13690
13710
|
display: contents !important;
|
|
13691
13711
|
}
|
|
13712
|
+
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > :where(.rt-BaseMenuGroup){
|
|
13713
|
+
display: contents !important;
|
|
13714
|
+
}
|
|
13715
|
+
.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]) > :where(.rt-BaseMenuGroup) > :where(*:not(.rt-DropdownMenuDrillDownPanel)){
|
|
13716
|
+
display: none !important;
|
|
13717
|
+
}
|
|
13692
13718
|
.rt-DropdownMenuDrillDownPanel{
|
|
13693
13719
|
display: contents;
|
|
13694
13720
|
}
|
|
13695
13721
|
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > *{
|
|
13696
13722
|
display: none !important;
|
|
13697
13723
|
}
|
|
13698
|
-
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active]))
|
|
13724
|
+
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) :where(.rt-DropdownMenuDrillDownPanel){
|
|
13699
13725
|
display: contents !important;
|
|
13700
13726
|
}
|
|
13727
|
+
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > :where(.rt-BaseMenuGroup){
|
|
13728
|
+
display: contents !important;
|
|
13729
|
+
}
|
|
13730
|
+
.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) > :where(.rt-BaseMenuGroup) > :where(*:not(.rt-DropdownMenuDrillDownPanel)){
|
|
13731
|
+
display: none !important;
|
|
13732
|
+
}
|
|
13701
13733
|
.rt-DropdownMenuDrillDownBackItem{
|
|
13702
13734
|
display: flex;
|
|
13703
13735
|
align-items: center;
|
|
@@ -13773,6 +13805,17 @@
|
|
|
13773
13805
|
outline-offset: 2px;
|
|
13774
13806
|
}
|
|
13775
13807
|
}
|
|
13808
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
13809
|
+
.rt-DropdownMenuDrillDownPanel:where([data-drill-down-active][data-animation-direction='forward']) > :where(*:not(.rt-DropdownMenuDrillDownPanel)){
|
|
13810
|
+
animation: rt-drill-down-enter-from-right var(--motion-duration-small) var(--motion-ease-smooth);
|
|
13811
|
+
}
|
|
13812
|
+
.rt-DropdownMenuDrillDownPanel:where([data-drill-down-active][data-animation-direction='backward']) > :where(*:not(.rt-DropdownMenuDrillDownPanel)){
|
|
13813
|
+
animation: rt-drill-down-enter-from-left var(--motion-duration-small) var(--motion-ease-smooth);
|
|
13814
|
+
}
|
|
13815
|
+
.rt-DropdownMenuDrillDownRoot:where(:not([data-drill-down-active])[data-animation-direction='backward']) > :where(*:not(.rt-DropdownMenuDrillDownPanel)){
|
|
13816
|
+
animation: rt-drill-down-enter-from-left var(--motion-duration-small) var(--motion-ease-smooth);
|
|
13817
|
+
}
|
|
13818
|
+
}
|
|
13776
13819
|
:where([data-panel-background='translucent'], [data-material='translucent']) .rt-TextFieldRoot{
|
|
13777
13820
|
-webkit-backdrop-filter: var(--backdrop-filter-components);
|
|
13778
13821
|
backdrop-filter: var(--backdrop-filter-components);
|