@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍
563 lines (562 loc) • 28.5 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
import * as __WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__ from "lucide-react";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__ from "./drawer.js";
import * as __WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__ from "./dropdown-menu.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_mobile_js_c09fe54d__ from "../../hooks/use-mobile.js";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
const DropDrawerContext = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createContext({
isMobile: false
});
const useDropDrawerContext = ()=>{
const context = __WEBPACK_EXTERNAL_MODULE_react__.useContext(DropDrawerContext);
if (!context) throw new Error("DropDrawer components cannot be rendered outside the Context");
return context;
};
function DropDrawer({ children, ...props }) {
const isMobile = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_mobile_js_c09fe54d__.useIsMobile)();
const DropdownComponent = isMobile ? __WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.Drawer : __WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenu;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DropDrawerContext.Provider, {
value: {
isMobile
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DropdownComponent, {
"data-slot": "drop-drawer",
...isMobile && {
autoFocus: true
},
...props,
children: children
})
});
}
function DropDrawerTrigger({ className, children, ...props }) {
const { isMobile } = useDropDrawerContext();
const TriggerComponent = isMobile ? __WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerTrigger : __WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuTrigger;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(TriggerComponent, {
"data-slot": "drop-drawer-trigger",
className: className,
...props,
children: children
});
}
function DropDrawerContent({ className, children, ...props }) {
const { isMobile } = useDropDrawerContext();
const [activeSubmenu, setActiveSubmenu] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
const [submenuTitle, setSubmenuTitle] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
const [submenuStack, setSubmenuStack] = __WEBPACK_EXTERNAL_MODULE_react__.useState([]);
const [animationDirection, setAnimationDirection] = __WEBPACK_EXTERNAL_MODULE_react__.useState("forward");
const submenuContentRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(new Map());
const navigateToSubmenu = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((id, title)=>{
setAnimationDirection("forward");
setActiveSubmenu(id);
setSubmenuTitle(title);
setSubmenuStack((prev)=>[
...prev,
{
id,
title
}
]);
}, []);
const goBack = __WEBPACK_EXTERNAL_MODULE_react__.useCallback(()=>{
setAnimationDirection("backward");
if (submenuStack.length <= 1) {
setActiveSubmenu(null);
setSubmenuTitle(null);
setSubmenuStack([]);
} else {
const newStack = [
...submenuStack
];
newStack.pop();
const previous = newStack[newStack.length - 1];
setActiveSubmenu(previous.id);
setSubmenuTitle(previous.title);
setSubmenuStack(newStack);
}
}, [
submenuStack
]);
const registerSubmenuContent = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((id, content)=>{
submenuContentRef.current.set(id, content);
}, []);
const extractSubmenuContent = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((elements, targetId)=>{
const result = [];
const findSubmenuContent = (node)=>{
if (!/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(node)) return;
const element = node;
const props = element.props;
if (element.type === DropDrawerSub) {
const elementId = props.id;
const dataSubmenuId = props["data-submenu-id"];
if (elementId === targetId || dataSubmenuId === targetId) {
if (props.children) __WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(props.children, (child)=>{
if (/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && child.type === DropDrawerSubContent) {
const subContentProps = child.props;
if (subContentProps.children) __WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(subContentProps.children, (contentChild)=>{
result.push(contentChild);
});
}
});
return;
}
}
if (props.children) if (Array.isArray(props.children)) props.children.forEach((child)=>findSubmenuContent(child));
else findSubmenuContent(props.children);
};
if (Array.isArray(elements)) elements.forEach((child)=>findSubmenuContent(child));
else findSubmenuContent(elements);
return result;
}, []);
const getSubmenuContent = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((id)=>{
const cachedContent = submenuContentRef.current.get(id || "");
if (cachedContent && cachedContent.length > 0) return cachedContent;
const submenuContent = extractSubmenuContent(children, id);
if (0 === submenuContent.length) return [];
if (id) submenuContentRef.current.set(id, submenuContent);
return submenuContent;
}, [
children,
extractSubmenuContent
]);
const variants = {
enter: (direction)=>({
x: "forward" === direction ? "100%" : "-100%",
opacity: 0
}),
center: {
x: 0,
opacity: 1
},
exit: (direction)=>({
x: "forward" === direction ? "-100%" : "100%",
opacity: 0
})
};
const transition = {
duration: 0.3,
ease: [
0.25,
0.1,
0.25,
1.0
]
};
if (isMobile) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SubmenuContext.Provider, {
value: {
activeSubmenu,
setActiveSubmenu: (id)=>{
if (null === id) {
setActiveSubmenu(null);
setSubmenuTitle(null);
setSubmenuStack([]);
}
},
submenuTitle,
setSubmenuTitle,
navigateToSubmenu,
registerSubmenuContent
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerContent, {
"data-slot": "drop-drawer-content",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("max-h-[90vh]", className),
...props,
children: activeSubmenu ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerHeader, {
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
className: "flex items-center gap-2",
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
onClick: goBack,
className: "hover:bg-neutral-100/50 rounded-full p-1 dark:hover:bg-neutral-800/50",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronLeftIcon, {
className: "h-5 w-5"
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerTitle, {
children: submenuTitle || "Submenu"
})
]
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "flex-1 relative overflow-y-auto max-h-[70vh]",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.AnimatePresence, {
initial: false,
mode: "wait",
custom: animationDirection,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
custom: animationDirection,
variants: variants,
initial: "enter",
animate: "center",
exit: "exit",
transition: transition,
className: "pb-6 space-y-1.5 w-full h-full",
children: activeSubmenu ? getSubmenuContent(activeSubmenu) : children
}, activeSubmenu || "main")
})
})
]
}) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerHeader, {
className: "sr-only",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerTitle, {
children: "Menu"
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "overflow-y-auto max-h-[70vh]",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.AnimatePresence, {
initial: false,
mode: "wait",
custom: animationDirection,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
custom: animationDirection,
variants: variants,
initial: "enter",
animate: "center",
exit: "exit",
transition: transition,
className: "pb-6 space-y-1.5 w-full",
children: children
}, "main-menu")
})
})
]
})
})
});
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SubmenuContext.Provider, {
value: {
activeSubmenu,
setActiveSubmenu,
submenuTitle,
setSubmenuTitle,
registerSubmenuContent
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuContent, {
"data-slot": "drop-drawer-content",
align: "end",
sideOffset: 4,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[220px] overflow-y-auto", className),
...props,
children: children
})
});
}
function DropDrawerItem({ className, children, onSelect, onClick, icon, variant = "default", inset, disabled, ...props }) {
const { isMobile } = useDropDrawerContext();
const isInGroup = __WEBPACK_EXTERNAL_MODULE_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 = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
const [isInsideGroup, setIsInsideGroup] = __WEBPACK_EXTERNAL_MODULE_react__.useState(false);
__WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
if (!isMobile) return;
const timer = setTimeout(()=>{
if (itemRef.current) setIsInsideGroup(isInGroup(itemRef.current));
}, 0);
return ()=>clearTimeout(timer);
}, [
isInGroup,
isMobile
]);
if (isMobile) {
const handleClick = (e)=>{
if (disabled) return;
if (onClick) onClick(e);
if (onSelect) onSelect(e);
};
const content = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
ref: itemRef,
"data-slot": "drop-drawer-item",
"data-variant": variant,
"data-inset": inset,
"data-disabled": disabled,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex cursor-pointer items-center justify-between px-4 py-4", !isInsideGroup && "bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800", isInsideGroup && "bg-transparent py-4", inset && "pl-8", "destructive" === variant && "text-red-500 dark:text-red-500 dark:text-red-900 dark:dark:text-red-900", disabled && "pointer-events-none opacity-50", className),
onClick: handleClick,
"aria-disabled": disabled,
...props,
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "flex items-center gap-2",
children: children
}),
icon && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "flex-shrink-0",
children: icon
})
]
});
const isInSubmenu = props["data-parent-submenu-id"] || props["data-parent-submenu"];
if (isInSubmenu) return content;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerClose, {
asChild: true,
children: content
});
}
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuItem, {
"data-slot": "drop-drawer-item",
"data-variant": variant,
"data-inset": inset,
className: className,
onSelect: onSelect,
onClick: onClick,
variant: variant,
inset: inset,
disabled: disabled,
...props,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
className: "flex w-full items-center justify-between",
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
children: children
}),
icon && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
children: icon
})
]
})
});
}
function DropDrawerSeparator({ className, ...props }) {
const { isMobile } = useDropDrawerContext();
if (isMobile) return null;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuSeparator, {
"data-slot": "drop-drawer-separator",
className: className,
...props
});
}
function DropDrawerLabel({ className, children, ...props }) {
const { isMobile } = useDropDrawerContext();
if (isMobile) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerHeader, {
className: "p-0",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerTitle, {
"data-slot": "drop-drawer-label",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("text-neutral-500 px-4 py-2 text-sm font-medium dark:text-neutral-400", className),
...props,
children: children
})
});
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuLabel, {
"data-slot": "drop-drawer-label",
className: className,
...props,
children: children
});
}
function DropDrawerFooter({ className, children, ...props }) {
const { isMobile } = useDropDrawerContext();
if (isMobile) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerFooter, {
"data-slot": "drop-drawer-footer",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("p-4", className),
...props,
children: children
});
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-slot": "drop-drawer-footer",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("p-2", className),
...props,
children: children
});
}
function DropDrawerGroup({ className, children, ...props }) {
const { isMobile } = useDropDrawerContext();
const childrenWithSeparators = __WEBPACK_EXTERNAL_MODULE_react__.useMemo(()=>{
if (!isMobile) return children;
const childArray = __WEBPACK_EXTERNAL_MODULE_react__.Children.toArray(children);
const filteredChildren = childArray.filter((child)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && child.type !== DropDrawerSeparator);
return filteredChildren.flatMap((child, index)=>{
if (index === filteredChildren.length - 1) return [
child
];
return [
child,
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "bg-neutral-200 h-px dark:bg-neutral-800",
"aria-hidden": "true"
}, `separator-${index}`)
];
});
}, [
children,
isMobile
]);
if (isMobile) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-drop-drawer-group": true,
"data-slot": "drop-drawer-group",
role: "group",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("bg-neutral-100 dark:bg-neutral-100 mx-2 my-3 overflow-hidden rounded-xl dark:bg-neutral-800 dark:dark:bg-neutral-800", className),
...props,
children: childrenWithSeparators
});
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-drop-drawer-group": true,
"data-slot": "drop-drawer-group",
role: "group",
className: className,
...props,
children: children
});
}
const SubmenuContext = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createContext({
activeSubmenu: null,
setActiveSubmenu: ()=>{},
submenuTitle: null,
setSubmenuTitle: ()=>{},
navigateToSubmenu: void 0,
registerSubmenuContent: void 0
});
let submenuIdCounter = 0;
function DropDrawerSub({ children, id, ...props }) {
const { isMobile } = useDropDrawerContext();
const { registerSubmenuContent } = __WEBPACK_EXTERNAL_MODULE_react__.useContext(SubmenuContext);
const [generatedId] = __WEBPACK_EXTERNAL_MODULE_react__.useState(()=>`submenu-${submenuIdCounter++}`);
const submenuId = id || generatedId;
__WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
if (!registerSubmenuContent) return;
const contentItems = [];
__WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(children, (child)=>{
if (/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && child.type === DropDrawerSubContent) __WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(child.props.children, (contentChild)=>{
contentItems.push(contentChild);
});
});
if (contentItems.length > 0) registerSubmenuContent(submenuId, contentItems);
}, [
children,
registerSubmenuContent,
submenuId
]);
if (isMobile) {
const processedChildren = __WEBPACK_EXTERNAL_MODULE_react__.Children.map(children, (child)=>{
if (!/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child)) return child;
if (child.type === DropDrawerSubTrigger) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(child, {
...child.props,
"data-parent-submenu-id": submenuId,
"data-submenu-id": submenuId,
"data-parent-submenu": submenuId
});
if (child.type === DropDrawerSubContent) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(child, {
...child.props,
"data-parent-submenu-id": submenuId,
"data-submenu-id": submenuId,
"data-parent-submenu": submenuId
});
return child;
});
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-slot": "drop-drawer-sub",
"data-submenu-id": submenuId,
id: submenuId,
children: processedChildren
});
}
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuSub, {
"data-slot": "drop-drawer-sub",
"data-submenu-id": submenuId,
...props,
children: children
});
}
function DropDrawerSubTrigger({ className, inset, children, ...props }) {
const { isMobile } = useDropDrawerContext();
const { navigateToSubmenu } = __WEBPACK_EXTERNAL_MODULE_react__.useContext(SubmenuContext);
const isInGroup = __WEBPACK_EXTERNAL_MODULE_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 = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
const [isInsideGroup, setIsInsideGroup] = __WEBPACK_EXTERNAL_MODULE_react__.useState(false);
__WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
if (!isMobile) return;
const timer = setTimeout(()=>{
if (itemRef.current) setIsInsideGroup(isInGroup(itemRef.current));
}, 0);
return ()=>clearTimeout(timer);
}, [
isInGroup,
isMobile
]);
if (isMobile) {
const handleClick = (e)=>{
e.preventDefault();
e.stopPropagation();
const element = e.currentTarget;
let submenuId = null;
if (element.closest("[data-submenu-id]")) {
const closestElement = element.closest("[data-submenu-id]");
const id = closestElement?.getAttribute("data-submenu-id");
if (id) submenuId = id;
}
if (!submenuId) submenuId = props["data-parent-submenu-id"] || props["data-parent-submenu"];
if (!submenuId) return;
const title = "string" == typeof children ? children : "Submenu";
if (navigateToSubmenu) navigateToSubmenu(submenuId, title);
};
const combinedOnClick = (e)=>{
const typedProps = props;
if (typedProps["onClick"]) {
const originalOnClick = typedProps["onClick"];
originalOnClick(e);
}
handleClick(e);
};
const { ...restProps } = props;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
ref: itemRef,
"data-slot": "drop-drawer-sub-trigger",
"data-inset": inset,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex cursor-pointer items-center justify-between px-4 py-4", !isInsideGroup && "bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800", isInsideGroup && "bg-transparent py-4", inset && "pl-8", className),
onClick: combinedOnClick,
...restProps,
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "flex items-center gap-2",
children: children
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronRightIcon, {
className: "h-5 w-5"
})
]
});
}
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuSubTrigger, {
"data-slot": "drop-drawer-sub-trigger",
"data-inset": inset,
className: className,
inset: inset,
...props,
children: children
});
}
function DropDrawerSubContent({ className, sideOffset = 4, children, ...props }) {
const { isMobile } = useDropDrawerContext();
if (isMobile) return null;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuSubContent, {
"data-slot": "drop-drawer-sub-content",
sideOffset: sideOffset,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:border-neutral-800", className),
...props,
children: children
});
}
export { DropDrawer, DropDrawerContent, DropDrawerFooter, DropDrawerGroup, DropDrawerItem, DropDrawerLabel, DropDrawerSeparator, DropDrawerSub, DropDrawerSubContent, DropDrawerSubTrigger, DropDrawerTrigger };
//# sourceMappingURL=dropdrawer.js.map