@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
836 lines (835 loc) • 32.9 kB
JavaScript
"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Drawer } from "@base-ui/react/drawer";
import { Menu } from "@base-ui/react/menu";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useIsMobile } from "../../hooks/useIsMobile.js";
import { cn } from "../../lib/utilities.js";
import dropdrawer_module from "./dropdrawer.module.js";
import * as __rspack_external_react from "react";
const MOBILE_MENU_TITLE = "Menu";
const MOBILE_SUBMENU_TITLE = "Submenu";
const MOBILE_BACK_LABEL = "Go back";
const DropDrawerContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
const useDropDrawerContext = ()=>{
const context = __rspack_external_react.useContext(DropDrawerContext);
if (null === context) throw new Error("DropDrawer components cannot be rendered outside the Context");
return context;
};
const dropdrawer_Drawer = Drawer.Root;
const DrawerPortal = Drawer.Portal;
const DrawerTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef((props, forwardedRef)=>{
const { asChild = false, children, className, render, ...otherProps } = props;
const renderProp = asChild && /*#__PURE__*/ __rspack_external_react.isValidElement(children) ? children : render;
return /*#__PURE__*/ jsx(Drawer.Trigger, {
...otherProps,
ref: forwardedRef,
render: useRender({
defaultTagName: "button",
render: renderProp,
props: mergeProps({
className
}, {})
}),
children: renderProp ? void 0 : children
});
});
DrawerTrigger.displayName = "DrawerTrigger";
function DrawerOverlay(props) {
const { className, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(Drawer.Backdrop, {
...otherProps,
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.drawerOverlay, className)
}, {})
})
});
}
const DrawerContent = /*#__PURE__*/ __rspack_external_react.forwardRef((props, forwardedRef)=>{
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsxs(DrawerPortal, {
children: [
/*#__PURE__*/ jsx(DrawerOverlay, {}),
/*#__PURE__*/ jsx(Drawer.Viewport, {
className: dropdrawer_module.drawerViewport,
children: /*#__PURE__*/ jsxs(Drawer.Popup, {
...otherProps,
ref: forwardedRef,
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.drawerContent, className)
}, {})
}),
children: [
/*#__PURE__*/ jsx("div", {
className: dropdrawer_module.drawerHandle
}),
/*#__PURE__*/ jsx(Drawer.Content, {
className: dropdrawer_module.drawerInnerContent,
children: children
})
]
})
})
]
});
});
DrawerContent.displayName = "DrawerContent";
function DrawerHeader(props) {
const { className, children, render, ...otherProps } = props;
return useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.drawerHeader, className)
}, otherProps, {
children
})
});
}
function DrawerFooter(props) {
const { className, children, render, ...otherProps } = props;
return useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.drawerFooter, className)
}, otherProps, {
children
})
});
}
function DrawerTitle(props) {
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(Drawer.Title, {
...otherProps,
render: useRender({
defaultTagName: "h2",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.drawerTitle, className)
}, {})
}),
children: children
});
}
const DropdownMenu = Menu.Root;
const DropdownMenuSub = Menu.SubmenuRoot;
const DropdownMenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef((props, forwardedRef)=>{
const { asChild = false, children, className, render, ...otherProps } = props;
const renderProp = asChild && /*#__PURE__*/ __rspack_external_react.isValidElement(children) ? children : render;
return /*#__PURE__*/ jsx(Menu.Trigger, {
...otherProps,
ref: forwardedRef,
render: useRender({
defaultTagName: "button",
render: renderProp,
props: mergeProps({
className
}, {})
}),
children: renderProp ? void 0 : children
});
});
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
const DropdownMenuContent = /*#__PURE__*/ __rspack_external_react.forwardRef((props, forwardedRef)=>{
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(Menu.Portal, {
children: /*#__PURE__*/ jsx(Menu.Positioner, {
...otherProps,
ref: forwardedRef,
render: useRender({
defaultTagName: "div",
props: mergeProps({
className: dropdrawer_module.dropdownPositioner
}, {})
}),
children: /*#__PURE__*/ jsx(Menu.Popup, {
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.dropdownContent, className)
}, {})
}),
children: children
})
})
});
});
DropdownMenuContent.displayName = "DropdownMenuContent";
function DropdownMenuItem(props) {
const { asChild = false, children, className, inset = false, render, ...otherProps } = props;
const renderProp = asChild && /*#__PURE__*/ __rspack_external_react.isValidElement(children) ? children : render;
return /*#__PURE__*/ jsx(Menu.Item, {
...otherProps,
render: useRender({
defaultTagName: "div",
render: renderProp,
props: mergeProps({
className: cn(dropdrawer_module.desktopItem, inset && dropdrawer_module.inset, className)
}, {})
}),
children: renderProp ? void 0 : children
});
}
function DropdownMenuLabel(props) {
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(Menu.GroupLabel, {
...otherProps,
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.desktopLabel, className)
}, {})
}),
children: children
});
}
function DropdownMenuSeparator(props) {
const { className, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(Menu.Separator, {
...otherProps,
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.desktopSeparator, className)
}, {})
})
});
}
function DropdownMenuSubTrigger(props) {
const { className, children, inset = false, render, ...otherProps } = props;
return /*#__PURE__*/ jsxs(Menu.SubmenuTrigger, {
...otherProps,
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.desktopSubTrigger, inset && dropdrawer_module.inset, className)
}, {})
}),
children: [
children,
/*#__PURE__*/ jsx(ChevronRightIcon, {
className: dropdrawer_module.chevron
})
]
});
}
function DropdownMenuSubContent(props) {
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(Menu.Positioner, {
...otherProps,
render: useRender({
defaultTagName: "div",
props: mergeProps({
className: dropdrawer_module.dropdownPositioner
}, {})
}),
children: /*#__PURE__*/ jsx(Menu.Popup, {
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(dropdrawer_module.dropdownSubContent, className)
}, {})
}),
children: children
})
});
}
const SubmenuContext = /*#__PURE__*/ __rspack_external_react.createContext({
activeSubmenu: null,
navigateToSubmenu: void 0,
registerSubmenuContent: void 0,
setActiveSubmenu: ()=>void 0,
setSubmenuTitle: ()=>void 0,
submenuTitle: null
});
function DropDrawer({ children, ...props }) {
const isMobile = useIsMobile();
return /*#__PURE__*/ jsx(DropDrawerContext.Provider, {
value: {
isMobile
},
children: isMobile ? /*#__PURE__*/ jsx(dropdrawer_Drawer, {
"data-slot": "drop-drawer",
...props,
children: children
}) : /*#__PURE__*/ jsx(DropdownMenu, {
"data-slot": "drop-drawer",
...props,
children: children
})
});
}
const DropDrawerTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, children, ...props }, forwardedRef)=>{
const { isMobile } = useDropDrawerContext();
return isMobile ? /*#__PURE__*/ jsx(DrawerTrigger, {
ref: forwardedRef,
"data-slot": "drop-drawer-trigger",
className: className,
...props,
children: children
}) : /*#__PURE__*/ jsx(DropdownMenuTrigger, {
ref: forwardedRef,
"data-slot": "drop-drawer-trigger",
className: className,
...props,
children: children
});
});
const DropDrawerContent = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, children, ...props }, forwardedRef)=>{
const { isMobile } = useDropDrawerContext();
const [activeSubmenu, setActiveSubmenu] = __rspack_external_react.useState(null);
const [submenuTitle, setSubmenuTitle] = __rspack_external_react.useState(null);
const [submenuStack, setSubmenuStack] = __rspack_external_react.useState([]);
const [animationDirection, setAnimationDirection] = __rspack_external_react.useState("forward");
const submenuContentRef = __rspack_external_react.useRef(new Map());
__rspack_external_react.useEffect(()=>{
submenuContentRef.current.clear();
}, [
children
]);
const navigateToSubmenu = __rspack_external_react.useCallback((id, title)=>{
setAnimationDirection("forward");
setActiveSubmenu(id);
setSubmenuTitle(title);
setSubmenuStack((previousStack)=>[
...previousStack,
{
id,
title
}
]);
}, []);
const goBack = __rspack_external_react.useCallback(()=>{
setAnimationDirection("backward");
if (submenuStack.length <= 1) {
setActiveSubmenu(null);
setSubmenuTitle(null);
setSubmenuStack([]);
return;
}
const newStack = [
...submenuStack
];
newStack.pop();
const previousSubmenu = newStack[newStack.length - 1];
if (!previousSubmenu) {
setActiveSubmenu(null);
setSubmenuTitle(null);
setSubmenuStack([]);
return;
}
setActiveSubmenu(previousSubmenu.id);
setSubmenuTitle(previousSubmenu.title);
setSubmenuStack(newStack);
}, [
submenuStack
]);
const registerSubmenuContent = __rspack_external_react.useCallback((id, content)=>{
submenuContentRef.current.set(id, content);
}, []);
const extractSubmenuContent = __rspack_external_react.useCallback((elements, targetId)=>{
const result = [];
const findSubmenuContent = (node)=>{
if (!/*#__PURE__*/ __rspack_external_react.isValidElement(node)) return;
const element = node;
if (element.type === DropDrawerSub) {
const elementId = element.props.id;
const dataSubmenuId = element.props["data-submenu-id"];
if (elementId === targetId || dataSubmenuId === targetId) {
if (element.props.children) __rspack_external_react.Children.forEach(element.props.children, (child)=>{
if (/*#__PURE__*/ __rspack_external_react.isValidElement(child) && child.type === DropDrawerSubContent) {
const subContentElement = child;
__rspack_external_react.Children.forEach(subContentElement.props.children, (contentChild)=>{
result.push(contentChild);
});
}
});
return;
}
}
if (element.props.children) __rspack_external_react.Children.forEach(element.props.children, findSubmenuContent);
};
__rspack_external_react.Children.forEach(elements, findSubmenuContent);
return result;
}, []);
const getSubmenuContent = __rspack_external_react.useCallback((id)=>{
const cachedContent = submenuContentRef.current.get(id);
if (cachedContent && cachedContent.length > 0) return cachedContent;
const submenuContent = extractSubmenuContent(children, id);
if (submenuContent.length > 0) submenuContentRef.current.set(id, submenuContent);
return submenuContent;
}, [
children,
extractSubmenuContent
]);
const variants = {
center: {
opacity: 1,
x: 0
},
enter: (direction)=>({
opacity: 0,
x: "forward" === direction ? "100%" : "-100%"
}),
exit: (direction)=>({
opacity: 0,
x: "forward" === direction ? "-100%" : "100%"
})
};
const transition = {
duration: 0.3,
ease: [
0.25,
0.1,
0.25,
1
]
};
if (isMobile) return /*#__PURE__*/ jsx(SubmenuContext.Provider, {
value: {
activeSubmenu,
navigateToSubmenu,
registerSubmenuContent,
setActiveSubmenu: (id)=>{
if (null === id) {
setActiveSubmenu(null);
setSubmenuTitle(null);
setSubmenuStack([]);
}
},
setSubmenuTitle,
submenuTitle
},
children: /*#__PURE__*/ jsx(DrawerContent, {
ref: forwardedRef,
"data-slot": "drop-drawer-content",
className: cn(dropdrawer_module.mobileContent, className),
...props,
children: activeSubmenu ? /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(DrawerHeader, {
children: /*#__PURE__*/ jsxs("div", {
className: dropdrawer_module.mobileHeaderRow,
children: [
/*#__PURE__*/ jsx("button", {
type: "button",
"aria-label": MOBILE_BACK_LABEL,
onClick: goBack,
className: dropdrawer_module.backButton,
children: /*#__PURE__*/ jsx(ChevronLeftIcon, {
className: dropdrawer_module.chevron
})
}),
/*#__PURE__*/ jsx(DrawerTitle, {
children: submenuTitle || MOBILE_SUBMENU_TITLE
})
]
})
}),
/*#__PURE__*/ jsx("div", {
className: dropdrawer_module.mobileViewport,
children: /*#__PURE__*/ jsx(AnimatePresence, {
initial: false,
mode: "wait",
custom: animationDirection,
children: /*#__PURE__*/ jsx(motion.div, {
custom: animationDirection,
variants: variants,
initial: "enter",
animate: "center",
exit: "exit",
transition: transition,
className: dropdrawer_module.mobileMotionPanel,
children: getSubmenuContent(activeSubmenu)
}, activeSubmenu)
})
})
]
}) : /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(DrawerHeader, {
className: dropdrawer_module.screenReaderOnlyHeader,
children: /*#__PURE__*/ jsx(DrawerTitle, {
children: MOBILE_MENU_TITLE
})
}),
/*#__PURE__*/ jsx("div", {
className: dropdrawer_module.mobileMainViewport,
children: /*#__PURE__*/ jsx(AnimatePresence, {
initial: false,
mode: "wait",
custom: animationDirection,
children: /*#__PURE__*/ jsx(motion.div, {
custom: animationDirection,
variants: variants,
initial: "enter",
animate: "center",
exit: "exit",
transition: transition,
className: dropdrawer_module.mobileMotionPanel,
children: children
}, "main-menu")
})
})
]
})
})
});
return /*#__PURE__*/ jsx(SubmenuContext.Provider, {
value: {
activeSubmenu,
registerSubmenuContent,
setActiveSubmenu,
setSubmenuTitle,
submenuTitle
},
children: /*#__PURE__*/ jsx(DropdownMenuContent, {
ref: forwardedRef,
"data-slot": "drop-drawer-content",
align: "end",
sideOffset: 4,
className: cn(dropdrawer_module.desktopContent, className),
...props,
children: children
})
});
});
function DropDrawerItem({ className, children, closeOnClick, disabled, icon, inset, onClick, onSelect, ...props }) {
const { isMobile } = useDropDrawerContext();
const isInGroup = __rspack_external_react.useCallback((element)=>{
if (!element) return false;
let parent = element.parentElement;
while(parent){
if (parent.hasAttribute("data-drop-drawer-group")) return true;
parent = parent.parentElement;
}
return false;
}, []);
const itemRef = __rspack_external_react.useRef(null);
const [isInsideGroup, setIsInsideGroup] = __rspack_external_react.useState(false);
__rspack_external_react.useEffect(()=>{
if (!isMobile) return;
const timer = globalThis.window.setTimeout(()=>{
if (itemRef.current) setIsInsideGroup(isInGroup(itemRef.current));
}, 0);
return ()=>globalThis.window.clearTimeout(timer);
}, [
isInGroup,
isMobile
]);
const handleSelect = __rspack_external_react.useCallback((event)=>{
if (!disabled) onSelect?.(event);
}, [
disabled,
onSelect
]);
if (isMobile) {
const handleClick = (event)=>{
if (disabled) return;
onClick?.(event);
handleSelect(event.nativeEvent);
};
const handleKeyDown = (event)=>{
if ("Enter" !== event.key && " " !== event.key) return;
event.preventDefault();
event.currentTarget.click();
};
const content = /*#__PURE__*/ jsxs("div", {
ref: itemRef,
"data-slot": "drop-drawer-item",
"data-disabled": disabled,
"data-inset": inset,
role: "menuitem",
tabIndex: disabled ? -1 : 0,
className: cn(dropdrawer_module.mobileItem, !isInsideGroup && dropdrawer_module.mobileStandaloneItem, isInsideGroup && dropdrawer_module.mobileGroupedItem, inset && dropdrawer_module.inset, className),
onClick: handleClick,
onKeyDown: handleKeyDown,
"aria-disabled": disabled,
...props,
children: [
/*#__PURE__*/ jsx("div", {
className: dropdrawer_module.itemChildren,
children: children
}),
icon ? /*#__PURE__*/ jsx("div", {
className: dropdrawer_module.itemIcon,
children: icon
}) : null
]
});
const parentSubmenuId = props["data-parent-submenu-id"] ?? props["data-parent-submenu"];
if (parentSubmenuId) return content;
return /*#__PURE__*/ jsx(Drawer.Close, {
nativeButton: false,
render: content
});
}
const handleDesktopClick = (event)=>{
if (disabled) return;
onClick?.(event);
handleSelect(event.nativeEvent);
};
return /*#__PURE__*/ jsx(DropdownMenuItem, {
"data-slot": "drop-drawer-item",
"data-inset": inset,
className: cn(dropdrawer_module.desktopItem, className),
closeOnClick: closeOnClick,
disabled: disabled,
inset: inset,
onClick: handleDesktopClick,
...props,
children: /*#__PURE__*/ jsxs("div", {
className: dropdrawer_module.itemRow,
children: [
/*#__PURE__*/ jsx("div", {
className: dropdrawer_module.itemChildren,
children: children
}),
icon ? /*#__PURE__*/ jsx("div", {
className: dropdrawer_module.itemIcon,
children: icon
}) : null
]
})
});
}
function DropDrawerSeparator({ className, ...props }) {
const { isMobile } = useDropDrawerContext();
if (isMobile) return null;
return /*#__PURE__*/ jsx(DropdownMenuSeparator, {
"data-slot": "drop-drawer-separator",
className: className,
...props
});
}
function DropDrawerLabel({ className, children, ...props }) {
const { isMobile } = useDropDrawerContext();
return isMobile ? /*#__PURE__*/ jsx(DrawerHeader, {
className: dropdrawer_module.mobileLabelWrapper,
children: /*#__PURE__*/ jsx(DrawerTitle, {
"data-slot": "drop-drawer-label",
className: cn(dropdrawer_module.mobileLabel, className),
...props,
children: children
})
}) : /*#__PURE__*/ jsx(DropdownMenuLabel, {
"data-slot": "drop-drawer-label",
className: className,
...props,
children: children
});
}
function DropDrawerFooter({ className, children, ...props }) {
const { isMobile } = useDropDrawerContext();
return isMobile ? /*#__PURE__*/ jsx(DrawerFooter, {
"data-slot": "drop-drawer-footer",
className: cn(dropdrawer_module.mobileFooter, className),
...props,
children: children
}) : /*#__PURE__*/ jsx("div", {
"data-slot": "drop-drawer-footer",
className: cn(dropdrawer_module.desktopFooter, className),
...props,
children: children
});
}
function DropDrawerGroup({ className, children, ...props }) {
const { isMobile } = useDropDrawerContext();
const childrenWithSeparators = __rspack_external_react.useMemo(()=>{
if (!isMobile) return children;
const childArray = __rspack_external_react.Children.toArray(children);
const filteredChildren = childArray.filter((child)=>!/*#__PURE__*/ (__rspack_external_react.isValidElement(child) && child.type === DropDrawerSeparator));
return filteredChildren.flatMap((child, index)=>{
if (index === filteredChildren.length - 1) return [
child
];
return [
child,
/*#__PURE__*/ jsx("div", {
className: dropdrawer_module.mobileGroupSeparator,
"aria-hidden": "true"
}, `separator-${index}`)
];
});
}, [
children,
isMobile
]);
return isMobile ? /*#__PURE__*/ jsx("div", {
"data-drop-drawer-group": true,
"data-slot": "drop-drawer-group",
role: "group",
className: cn(dropdrawer_module.mobileGroup, className),
...props,
children: childrenWithSeparators
}) : /*#__PURE__*/ jsx(Menu.Group, {
"data-drop-drawer-group": true,
"data-slot": "drop-drawer-group",
className: className,
...props,
children: children
});
}
function DropDrawerSub({ children, id, ...props }) {
const { isMobile } = useDropDrawerContext();
const { registerSubmenuContent } = __rspack_external_react.useContext(SubmenuContext);
const generatedId = __rspack_external_react.useId();
const submenuId = id || generatedId;
__rspack_external_react.useEffect(()=>{
if (!registerSubmenuContent) return;
const contentItems = [];
__rspack_external_react.Children.forEach(children, (child)=>{
if (/*#__PURE__*/ __rspack_external_react.isValidElement(child) && child.type === DropDrawerSubContent) {
const childElement = child;
__rspack_external_react.Children.forEach(childElement.props.children, (contentChild)=>{
contentItems.push(contentChild);
});
}
});
if (contentItems.length > 0) registerSubmenuContent(submenuId, contentItems);
}, [
children,
registerSubmenuContent,
submenuId
]);
if (isMobile) {
const processedChildren = __rspack_external_react.Children.map(children, (child)=>{
if (!/*#__PURE__*/ __rspack_external_react.isValidElement(child)) return child;
if (child.type === DropDrawerSubTrigger || child.type === DropDrawerSubContent) return /*#__PURE__*/ __rspack_external_react.cloneElement(child, {
"data-parent-submenu": submenuId,
"data-parent-submenu-id": submenuId,
"data-submenu-id": submenuId
});
return child;
});
return /*#__PURE__*/ jsx("div", {
"data-slot": "drop-drawer-sub",
"data-submenu-id": submenuId,
id: submenuId,
children: processedChildren
});
}
return /*#__PURE__*/ jsx(DropdownMenuSub, {
"data-slot": "drop-drawer-sub",
"data-submenu-id": submenuId,
...props,
children: children
});
}
function DropDrawerSubTrigger({ className, inset, children, onClick, ...props }) {
const { isMobile } = useDropDrawerContext();
const { navigateToSubmenu } = __rspack_external_react.useContext(SubmenuContext);
const isInGroup = __rspack_external_react.useCallback((element)=>{
if (!element) return false;
let parent = element.parentElement;
while(parent){
if (parent.hasAttribute("data-drop-drawer-group")) return true;
parent = parent.parentElement;
}
return false;
}, []);
const itemRef = __rspack_external_react.useRef(null);
const [isInsideGroup, setIsInsideGroup] = __rspack_external_react.useState(false);
__rspack_external_react.useEffect(()=>{
if (!isMobile) return;
const timer = globalThis.window.setTimeout(()=>{
if (itemRef.current) setIsInsideGroup(isInGroup(itemRef.current));
}, 0);
return ()=>globalThis.window.clearTimeout(timer);
}, [
isInGroup,
isMobile
]);
if (isMobile) {
const navigate = (eventTarget)=>{
let submenuId = null;
const closestElement = eventTarget.closest("[data-submenu-id]");
const closestId = closestElement?.getAttribute("data-submenu-id");
if (closestId) submenuId = closestId;
if (!submenuId) submenuId = props["data-parent-submenu-id"] ?? props["data-parent-submenu"] ?? null;
if (!submenuId) return;
const title = "string" == typeof children ? children : MOBILE_SUBMENU_TITLE;
navigateToSubmenu?.(submenuId, title);
};
const handleClick = (event)=>{
event.preventDefault();
event.stopPropagation();
onClick?.(event);
navigate(event.currentTarget);
};
const handleKeyDown = (event)=>{
if ("Enter" !== event.key && " " !== event.key) return;
event.preventDefault();
event.stopPropagation();
event.currentTarget.click();
};
return /*#__PURE__*/ jsxs("div", {
ref: itemRef,
"data-slot": "drop-drawer-sub-trigger",
"data-inset": inset,
role: "menuitem",
tabIndex: 0,
className: cn(dropdrawer_module.mobileItem, !isInsideGroup && dropdrawer_module.mobileStandaloneItem, isInsideGroup && dropdrawer_module.mobileGroupedItem, inset && dropdrawer_module.inset, className),
onClick: handleClick,
onKeyDown: handleKeyDown,
...props,
children: [
/*#__PURE__*/ jsx("div", {
className: dropdrawer_module.itemChildren,
children: children
}),
/*#__PURE__*/ jsx(ChevronRightIcon, {
className: dropdrawer_module.chevron
})
]
});
}
return /*#__PURE__*/ jsx(DropdownMenuSubTrigger, {
"data-slot": "drop-drawer-sub-trigger",
"data-inset": inset,
className: className,
inset: inset,
onClick: onClick,
...props,
children: children
});
}
function DropDrawerSubContent({ className, sideOffset = 4, children, ...props }) {
const { isMobile } = useDropDrawerContext();
if (isMobile) return null;
return /*#__PURE__*/ jsx(DropdownMenuSubContent, {
"data-slot": "drop-drawer-sub-content",
sideOffset: sideOffset,
className: cn(dropdrawer_module.dropdownSubContent, className),
...props,
children: children
});
}
DropDrawer.displayName = "DropDrawer";
DropDrawerTrigger.displayName = "DropDrawerTrigger";
DropDrawerContent.displayName = "DropDrawerContent";
DropDrawerItem.displayName = "DropDrawerItem";
DropDrawerSeparator.displayName = "DropDrawerSeparator";
DropDrawerLabel.displayName = "DropDrawerLabel";
DropDrawerFooter.displayName = "DropDrawerFooter";
DropDrawerGroup.displayName = "DropDrawerGroup";
DropDrawerSub.displayName = "DropDrawerSub";
DropDrawerSubTrigger.displayName = "DropDrawerSubTrigger";
DropDrawerSubContent.displayName = "DropDrawerSubContent";
export { DropDrawer, DropDrawerContent, DropDrawerFooter, DropDrawerGroup, DropDrawerItem, DropDrawerLabel, DropDrawerSeparator, DropDrawerSub, DropDrawerSubContent, DropDrawerSubTrigger, DropDrawerTrigger };
//# sourceMappingURL=dropdrawer.js.map