@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/Sidebar/components/items/SidebarMenuSubItem.js

@@ -1,162 +1,160 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import react, { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "../../../utils.js";
 import { Collapsible } from "radix-ui";
 import { SidebarMenuSubButton } from "./SidebarMenuSubButton.js";
 import { SidebarMenuSubItemIndentation } from "./SidebarMenuSubItemIndentation.js";
 import { SidebarMenuSub } from "./SidebarMenuSub.js";
 import { Icon } from "../../../Icon/index.js";
-import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
-import { ReactComponent as PinIcon } from "@webiny/icons/push_pin.svg";
-import { ReactComponent as UnPinIcon } from "@webiny/icons/push_pin_off.svg";
+import { ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
+import { ReactComponent as push_pin_svg_ReactComponent } from "@webiny/icons/push_pin.svg";
+import { ReactComponent as push_pin_off_svg_ReactComponent } from "@webiny/icons/push_pin_off.svg";
 import { useSidebarMenu } from "./SidebarMenuProvider.js";
 import { useSidebar } from "../../index.js";
 import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
-const SidebarMenuSubItem = ({
-  children,
-  className,
-  pinnable,
-  action,
-  collapsible = true,
-  ...buttonProps
-}) => {
-  const {
-    currentLevel,
-    parentIcon
-  } = useSidebarMenu();
-  const sidebar = useSidebar();
-  const [showChevron, setShowChevron] = useState(false);
-  const menuItemId = useMemo(() => {
-    return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);
-  }, [buttonProps.text, currentLevel]);
-  const isSectionExpanded = useMemo(() => {
-    return sidebar.isSectionExpanded(menuItemId);
-  }, [sidebar.expandedSections]);
-  const toggleSectionExpanded = useCallback(() => {
-    sidebar.toggleSectionExpanded(menuItemId);
-  }, [isSectionExpanded]);
-  const isPinned = sidebar.isItemPinned(menuItemId);
-
-  // Icon to use when this item is pinned
-  const pinnedItemIcon = useMemo(() => {
-    if (buttonProps.pinnedIcon) {
-      return buttonProps.pinnedIcon;
-    }
-    return buttonProps.icon || parentIcon;
-  }, [buttonProps.pinnedIcon, buttonProps.icon, parentIcon]);
-
-  // Register when pinned, unregister when unpinned
-  // Re-register when active state changes to keep pinned items in sync
-  React.useEffect(() => {
-    if (pinnable && isPinned) {
-      sidebar.registerPinnedItem({
-        id: menuItemId,
-        text: buttonProps.text,
-        icon: pinnedItemIcon,
-        to: buttonProps.to,
-        onClick: buttonProps.onClick,
-        active: buttonProps.active
-      });
-    } else if (pinnable && !isPinned) {
-      // Only unregister if this item is explicitly unpinned
-      sidebar.unregisterPinnedItem(menuItemId);
-    }
-  }, [pinnable, isPinned, pinnedItemIcon, menuItemId, buttonProps.active]);
-  const pinAction = useMemo(() => {
-    if (!pinnable) {
-      return action;
-    }
-    const handlePinClick = e => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (isPinned) {
-        sidebar.unregisterPinnedItem(menuItemId);
-      } else {
-        sidebar.registerPinnedItem({
-          id: menuItemId,
-          text: buttonProps.text,
-          icon: pinnedItemIcon,
-          to: buttonProps.to,
-          onClick: buttonProps.onClick,
-          active: buttonProps.active
+const SidebarMenuSubItem = ({ children, className, pinnable, action, collapsible = true, ...buttonProps })=>{
+    const { currentLevel, parentIcon } = useSidebarMenu();
+    const sidebar = useSidebar();
+    const [showChevron, setShowChevron] = useState(false);
+    const menuItemId = useMemo(()=>btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`), [
+        buttonProps.text,
+        currentLevel
+    ]);
+    const isSectionExpanded = useMemo(()=>sidebar.isSectionExpanded(menuItemId), [
+        sidebar.expandedSections
+    ]);
+    const toggleSectionExpanded = useCallback(()=>{
+        sidebar.toggleSectionExpanded(menuItemId);
+    }, [
+        isSectionExpanded
+    ]);
+    const isPinned = sidebar.isItemPinned(menuItemId);
+    const pinnedItemIcon = useMemo(()=>{
+        if (buttonProps.pinnedIcon) return buttonProps.pinnedIcon;
+        return buttonProps.icon || parentIcon;
+    }, [
+        buttonProps.pinnedIcon,
+        buttonProps.icon,
+        parentIcon
+    ]);
+    react.useEffect(()=>{
+        if (pinnable && isPinned) sidebar.registerPinnedItem({
+            id: menuItemId,
+            text: buttonProps.text,
+            icon: pinnedItemIcon,
+            to: buttonProps.to,
+            onClick: buttonProps.onClick,
+            active: buttonProps.active
         });
-      }
-      sidebar.toggleItemPinned(menuItemId);
-    };
-    const pinButton = /*#__PURE__*/React.createElement(SidebarMenuItemAction, {
-      element: isPinned ? /*#__PURE__*/React.createElement(UnPinIcon, null) : /*#__PURE__*/React.createElement(PinIcon, null),
-      onClick: handlePinClick,
-      showOnHover: true
-    });
-
-    // If there's a custom action, combine them
-    // Don't modify the custom action - it should keep its original behavior
-    if (action) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center gap-xs"
-      }, pinButton, action);
-    }
-    return pinButton;
-  }, [pinnable, isPinned, pinnedItemIcon, action, sidebar, menuItemId]);
-  useEffect(() => {
-    if (sidebar.expanded) {
-      const timer = setTimeout(() => {
-        setShowChevron(true);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-    setShowChevron(false);
-    return undefined;
-  }, [sidebar.expanded]);
-  const sidebarMenuSubButton = useMemo(() => {
-    if (!children) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SidebarMenuSubItemIndentation, {
-        lvl: currentLevel,
-        variant: buttonProps.variant
-      }), /*#__PURE__*/React.createElement(SidebarMenuSubButton, Object.assign({}, buttonProps, {
-        action: pinAction
-      })));
-    }
-    const chevron = showChevron ? /*#__PURE__*/React.createElement(Icon, {
-      label: "Expand / Collapse",
-      size: "sm",
-      className: "ml-auto transition-transform duration-100 group-data-[state=open]/menu-sub-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden",
-      color: "neutral-strong",
-      "data-sidebar": "menu-item-expanded-indicator",
-      icon: /*#__PURE__*/React.createElement(KeyboardArrowRightIcon, null)
-    }) : null;
-    const collapsibleAction = pinnable ? /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-xs"
-    }, pinAction, chevron) : chevron;
-    if (!collapsible) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center"
-      }, /*#__PURE__*/React.createElement(SidebarMenuSubItemIndentation, {
-        lvl: currentLevel,
-        variant: buttonProps.variant
-      }), /*#__PURE__*/React.createElement(SidebarMenuSubButton, buttonProps));
-    }
-    return /*#__PURE__*/React.createElement(Collapsible.Root, {
-      className: "w-full group/menu-sub-item-collapsible",
-      open: isSectionExpanded,
-      onOpenChange: toggleSectionExpanded
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center"
-    }, /*#__PURE__*/React.createElement(SidebarMenuSubItemIndentation, {
-      lvl: currentLevel,
-      variant: buttonProps.variant
-    }), /*#__PURE__*/React.createElement(Collapsible.Trigger, {
-      asChild: true
-    }, /*#__PURE__*/React.createElement(SidebarMenuSubButton, Object.assign({}, buttonProps, {
-      action: collapsibleAction,
-      className: "group-data-[state=open]/menu-sub-item-collapsible:font-semibold!"
-    })))), /*#__PURE__*/React.createElement(Collapsible.Content, null, /*#__PURE__*/React.createElement(SidebarMenuSub, {
-      parentIcon: buttonProps.icon
-    }, children)));
-  }, [children, buttonProps, currentLevel, menuItemId, isSectionExpanded, toggleSectionExpanded, showChevron, pinnable, pinAction]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
-    "data-sidebar": "menu-sub-item",
-    className: cn("group/menu-sub-item relative flex", className)
-  }, sidebarMenuSubButton), children && !collapsible ? children : null);
+        else if (pinnable && !isPinned) sidebar.unregisterPinnedItem(menuItemId);
+    }, [
+        pinnable,
+        isPinned,
+        pinnedItemIcon,
+        menuItemId,
+        buttonProps.active
+    ]);
+    const pinAction = useMemo(()=>{
+        if (!pinnable) return action;
+        const handlePinClick = (e)=>{
+            e.stopPropagation();
+            e.preventDefault();
+            if (isPinned) sidebar.unregisterPinnedItem(menuItemId);
+            else sidebar.registerPinnedItem({
+                id: menuItemId,
+                text: buttonProps.text,
+                icon: pinnedItemIcon,
+                to: buttonProps.to,
+                onClick: buttonProps.onClick,
+                active: buttonProps.active
+            });
+            sidebar.toggleItemPinned(menuItemId);
+        };
+        const pinButton = /*#__PURE__*/ react.createElement(SidebarMenuItemAction, {
+            element: isPinned ? /*#__PURE__*/ react.createElement(push_pin_off_svg_ReactComponent, null) : /*#__PURE__*/ react.createElement(push_pin_svg_ReactComponent, null),
+            onClick: handlePinClick,
+            showOnHover: true
+        });
+        if (action) return /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-xs"
+        }, pinButton, action);
+        return pinButton;
+    }, [
+        pinnable,
+        isPinned,
+        pinnedItemIcon,
+        action,
+        sidebar,
+        menuItemId
+    ]);
+    useEffect(()=>{
+        if (sidebar.expanded) {
+            const timer = setTimeout(()=>{
+                setShowChevron(true);
+            }, 100);
+            return ()=>clearTimeout(timer);
+        }
+        setShowChevron(false);
+    }, [
+        sidebar.expanded
+    ]);
+    const sidebarMenuSubButton = useMemo(()=>{
+        if (!children) return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SidebarMenuSubItemIndentation, {
+            lvl: currentLevel,
+            variant: buttonProps.variant
+        }), /*#__PURE__*/ react.createElement(SidebarMenuSubButton, {
+            ...buttonProps,
+            action: pinAction
+        }));
+        const chevron = showChevron ? /*#__PURE__*/ react.createElement(Icon, {
+            label: "Expand / Collapse",
+            size: "sm",
+            className: "ml-auto transition-transform duration-100 group-data-[state=open]/menu-sub-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden",
+            color: "neutral-strong",
+            "data-sidebar": "menu-item-expanded-indicator",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }) : null;
+        const collapsibleAction = pinnable ? /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-xs"
+        }, pinAction, chevron) : chevron;
+        if (!collapsible) return /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center min-w-0"
+        }, /*#__PURE__*/ react.createElement(SidebarMenuSubItemIndentation, {
+            lvl: currentLevel,
+            variant: buttonProps.variant
+        }), /*#__PURE__*/ react.createElement(SidebarMenuSubButton, buttonProps));
+        return /*#__PURE__*/ react.createElement(Collapsible.Root, {
+            className: "w-full group/menu-sub-item-collapsible",
+            open: isSectionExpanded,
+            onOpenChange: toggleSectionExpanded
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center min-w-0"
+        }, /*#__PURE__*/ react.createElement(SidebarMenuSubItemIndentation, {
+            lvl: currentLevel,
+            variant: buttonProps.variant
+        }), /*#__PURE__*/ react.createElement(Collapsible.Trigger, {
+            asChild: true
+        }, /*#__PURE__*/ react.createElement(SidebarMenuSubButton, {
+            ...buttonProps,
+            action: collapsibleAction,
+            className: "group-data-[state=open]/menu-sub-item-collapsible:font-semibold!"
+        }))), /*#__PURE__*/ react.createElement(Collapsible.Content, null, /*#__PURE__*/ react.createElement(SidebarMenuSub, {
+            parentIcon: buttonProps.icon
+        }, children)));
+    }, [
+        children,
+        buttonProps,
+        currentLevel,
+        menuItemId,
+        isSectionExpanded,
+        toggleSectionExpanded,
+        showChevron,
+        pinnable,
+        pinAction
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("li", {
+        "data-sidebar": "menu-sub-item",
+        className: cn("group/menu-sub-item relative flex min-w-0", className)
+    }, sidebarMenuSubButton), children && !collapsible ? children : null);
 };
 export { SidebarMenuSubItem };
 

package/Sidebar/components/items/SidebarMenuSubItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","cn","Collapsible","SidebarMenuSubButton","SidebarMenuSubItemIndentation","SidebarMenuSub","Icon","ReactComponent","KeyboardArrowRightIcon","PinIcon","UnPinIcon","useSidebarMenu","useSidebar","SidebarMenuItemAction","SidebarMenuSubItem","children","className","pinnable","action","collapsible","buttonProps","currentLevel","parentIcon","sidebar","showChevron","setShowChevron","menuItemId","btoa","text","isSectionExpanded","expandedSections","toggleSectionExpanded","isPinned","isItemPinned","pinnedItemIcon","pinnedIcon","icon","registerPinnedItem","id","to","onClick","active","unregisterPinnedItem","pinAction","handlePinClick","e","stopPropagation","preventDefault","toggleItemPinned","pinButton","createElement","element","showOnHover","expanded","timer","setTimeout","clearTimeout","undefined","sidebarMenuSubButton","Fragment","lvl","variant","Object","assign","chevron","label","size","color","collapsibleAction","Root","open","onOpenChange","Trigger","asChild","Content"],"sources":["SidebarMenuSubItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { Collapsible } from \"radix-ui\";\nimport { SidebarMenuSubButton } from \"./SidebarMenuSubButton.js\";\nimport { SidebarMenuSubItemIndentation } from \"./SidebarMenuSubItemIndentation.js\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as PinIcon } from \"@webiny/icons/push_pin.svg\";\nimport { ReactComponent as UnPinIcon } from \"@webiny/icons/push_pin_off.svg\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\n\nconst SidebarMenuSubItem = ({\n    children,\n    className,\n    pinnable,\n    action,\n    collapsible = true,\n    ...buttonProps\n}: SidebarMenuItemProps) => {\n    const { currentLevel, parentIcon } = useSidebarMenu();\n    const sidebar = useSidebar();\n    const [showChevron, setShowChevron] = useState(false);\n\n    const menuItemId = useMemo(() => {\n        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);\n    }, [buttonProps.text, currentLevel]);\n\n    const isSectionExpanded = useMemo(() => {\n        return sidebar.isSectionExpanded(menuItemId);\n    }, [sidebar.expandedSections]);\n\n    const toggleSectionExpanded = useCallback(() => {\n        sidebar.toggleSectionExpanded(menuItemId);\n    }, [isSectionExpanded]);\n\n    const isPinned = sidebar.isItemPinned(menuItemId);\n\n    // Icon to use when this item is pinned\n    const pinnedItemIcon = useMemo(() => {\n        if (buttonProps.pinnedIcon) {\n            return buttonProps.pinnedIcon;\n        }\n\n        return buttonProps.icon || parentIcon;\n    }, [buttonProps.pinnedIcon, buttonProps.icon, parentIcon]);\n\n    // Register when pinned, unregister when unpinned\n    // Re-register when active state changes to keep pinned items in sync\n    React.useEffect(() => {\n        if (pinnable && isPinned) {\n            sidebar.registerPinnedItem({\n                id: menuItemId,\n                text: buttonProps.text,\n                icon: pinnedItemIcon,\n                to: buttonProps.to,\n                onClick: buttonProps.onClick,\n                active: buttonProps.active\n            });\n        } else if (pinnable && !isPinned) {\n            // Only unregister if this item is explicitly unpinned\n            sidebar.unregisterPinnedItem(menuItemId);\n        }\n    }, [pinnable, isPinned, pinnedItemIcon, menuItemId, buttonProps.active]);\n\n    const pinAction = useMemo(() => {\n        if (!pinnable) {\n            return action;\n        }\n\n        const handlePinClick = (e: React.MouseEvent) => {\n            e.stopPropagation();\n            e.preventDefault();\n\n            if (isPinned) {\n                sidebar.unregisterPinnedItem(menuItemId);\n            } else {\n                sidebar.registerPinnedItem({\n                    id: menuItemId,\n                    text: buttonProps.text,\n                    icon: pinnedItemIcon,\n                    to: buttonProps.to,\n                    onClick: buttonProps.onClick,\n                    active: buttonProps.active\n                });\n            }\n\n            sidebar.toggleItemPinned(menuItemId);\n        };\n\n        const pinButton = (\n            <SidebarMenuItemAction\n                element={isPinned ? <UnPinIcon /> : <PinIcon />}\n                onClick={handlePinClick}\n                showOnHover={true}\n            />\n        );\n\n        // If there's a custom action, combine them\n        // Don't modify the custom action - it should keep its original behavior\n        if (action) {\n            return (\n                <div className=\"flex items-center gap-xs\">\n                    {pinButton}\n                    {action}\n                </div>\n            );\n        }\n\n        return pinButton;\n    }, [pinnable, isPinned, pinnedItemIcon, action, sidebar, menuItemId]);\n\n    useEffect(() => {\n        if (sidebar.expanded) {\n            const timer = setTimeout(() => {\n                setShowChevron(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowChevron(false);\n        return undefined;\n    }, [sidebar.expanded]);\n\n    const sidebarMenuSubButton = useMemo(() => {\n        if (!children) {\n            return (\n                <>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} action={pinAction} />\n                </>\n            );\n        }\n\n        const chevron = showChevron ? (\n            <Icon\n                label={\"Expand / Collapse\"}\n                size={\"sm\"}\n                className={\n                    \"ml-auto transition-transform duration-100 group-data-[state=open]/menu-sub-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        ) : null;\n\n        const collapsibleAction = pinnable ? (\n            <div className=\"flex items-center gap-xs\">\n                {pinAction}\n                {chevron}\n            </div>\n        ) : (\n            chevron\n        );\n\n        if (!collapsible) {\n            return (\n                <div className={\"flex items-center\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} />\n                </div>\n            );\n        }\n\n        return (\n            <Collapsible.Root\n                className=\"w-full group/menu-sub-item-collapsible\"\n                open={isSectionExpanded}\n                onOpenChange={toggleSectionExpanded}\n            >\n                <div className={\"flex items-center\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <Collapsible.Trigger asChild>\n                        <SidebarMenuSubButton\n                            {...buttonProps}\n                            action={collapsibleAction}\n                            className={\n                                \"group-data-[state=open]/menu-sub-item-collapsible:font-semibold!\"\n                            }\n                        />\n                    </Collapsible.Trigger>\n                </div>\n                <Collapsible.Content>\n                    <SidebarMenuSub parentIcon={buttonProps.icon}>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [\n        children,\n        buttonProps,\n        currentLevel,\n        menuItemId,\n        isSectionExpanded,\n        toggleSectionExpanded,\n        showChevron,\n        pinnable,\n        pinAction\n    ]);\n\n    return (\n        <>\n            <li\n                data-sidebar=\"menu-sub-item\"\n                className={cn(\"group/menu-sub-item relative flex\", className)}\n            >\n                {sidebarMenuSubButton}\n            </li>\n            {children && !collapsible ? children : null}\n        </>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuSubItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { Collapsible } from \"radix-ui\";\nimport { SidebarMenuSubButton } from \"./SidebarMenuSubButton.js\";\nimport { SidebarMenuSubItemIndentation } from \"./SidebarMenuSubItemIndentation.js\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as PinIcon } from \"@webiny/icons/push_pin.svg\";\nimport { ReactComponent as UnPinIcon } from \"@webiny/icons/push_pin_off.svg\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\n\nconst SidebarMenuSubItem = ({\n    children,\n    className,\n    pinnable,\n    action,\n    collapsible = true,\n    ...buttonProps\n}: SidebarMenuItemProps) => {\n    const { currentLevel, parentIcon } = useSidebarMenu();\n    const sidebar = useSidebar();\n    const [showChevron, setShowChevron] = useState(false);\n\n    const menuItemId = useMemo(() => {\n        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);\n    }, [buttonProps.text, currentLevel]);\n\n    const isSectionExpanded = useMemo(() => {\n        return sidebar.isSectionExpanded(menuItemId);\n    }, [sidebar.expandedSections]);\n\n    const toggleSectionExpanded = useCallback(() => {\n        sidebar.toggleSectionExpanded(menuItemId);\n    }, [isSectionExpanded]);\n\n    const isPinned = sidebar.isItemPinned(menuItemId);\n\n    // Icon to use when this item is pinned\n    const pinnedItemIcon = useMemo(() => {\n        if (buttonProps.pinnedIcon) {\n            return buttonProps.pinnedIcon;\n        }\n\n        return buttonProps.icon || parentIcon;\n    }, [buttonProps.pinnedIcon, buttonProps.icon, parentIcon]);\n\n    // Register when pinned, unregister when unpinned\n    // Re-register when active state changes to keep pinned items in sync\n    React.useEffect(() => {\n        if (pinnable && isPinned) {\n            sidebar.registerPinnedItem({\n                id: menuItemId,\n                text: buttonProps.text,\n                icon: pinnedItemIcon,\n                to: buttonProps.to,\n                onClick: buttonProps.onClick,\n                active: buttonProps.active\n            });\n        } else if (pinnable && !isPinned) {\n            // Only unregister if this item is explicitly unpinned\n            sidebar.unregisterPinnedItem(menuItemId);\n        }\n    }, [pinnable, isPinned, pinnedItemIcon, menuItemId, buttonProps.active]);\n\n    const pinAction = useMemo(() => {\n        if (!pinnable) {\n            return action;\n        }\n\n        const handlePinClick = (e: React.MouseEvent) => {\n            e.stopPropagation();\n            e.preventDefault();\n\n            if (isPinned) {\n                sidebar.unregisterPinnedItem(menuItemId);\n            } else {\n                sidebar.registerPinnedItem({\n                    id: menuItemId,\n                    text: buttonProps.text,\n                    icon: pinnedItemIcon,\n                    to: buttonProps.to,\n                    onClick: buttonProps.onClick,\n                    active: buttonProps.active\n                });\n            }\n\n            sidebar.toggleItemPinned(menuItemId);\n        };\n\n        const pinButton = (\n            <SidebarMenuItemAction\n                element={isPinned ? <UnPinIcon /> : <PinIcon />}\n                onClick={handlePinClick}\n                showOnHover={true}\n            />\n        );\n\n        // If there's a custom action, combine them\n        // Don't modify the custom action - it should keep its original behavior\n        if (action) {\n            return (\n                <div className=\"flex items-center gap-xs\">\n                    {pinButton}\n                    {action}\n                </div>\n            );\n        }\n\n        return pinButton;\n    }, [pinnable, isPinned, pinnedItemIcon, action, sidebar, menuItemId]);\n\n    useEffect(() => {\n        if (sidebar.expanded) {\n            const timer = setTimeout(() => {\n                setShowChevron(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowChevron(false);\n        return undefined;\n    }, [sidebar.expanded]);\n\n    const sidebarMenuSubButton = useMemo(() => {\n        if (!children) {\n            return (\n                <>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} action={pinAction} />\n                </>\n            );\n        }\n\n        const chevron = showChevron ? (\n            <Icon\n                label={\"Expand / Collapse\"}\n                size={\"sm\"}\n                className={\n                    \"ml-auto transition-transform duration-100 group-data-[state=open]/menu-sub-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        ) : null;\n\n        const collapsibleAction = pinnable ? (\n            <div className=\"flex items-center gap-xs\">\n                {pinAction}\n                {chevron}\n            </div>\n        ) : (\n            chevron\n        );\n\n        if (!collapsible) {\n            return (\n                <div className={\"flex items-center min-w-0\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} />\n                </div>\n            );\n        }\n\n        return (\n            <Collapsible.Root\n                className=\"w-full group/menu-sub-item-collapsible\"\n                open={isSectionExpanded}\n                onOpenChange={toggleSectionExpanded}\n            >\n                <div className={\"flex items-center min-w-0\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <Collapsible.Trigger asChild>\n                        <SidebarMenuSubButton\n                            {...buttonProps}\n                            action={collapsibleAction}\n                            className={\n                                \"group-data-[state=open]/menu-sub-item-collapsible:font-semibold!\"\n                            }\n                        />\n                    </Collapsible.Trigger>\n                </div>\n                <Collapsible.Content>\n                    <SidebarMenuSub parentIcon={buttonProps.icon}>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [\n        children,\n        buttonProps,\n        currentLevel,\n        menuItemId,\n        isSectionExpanded,\n        toggleSectionExpanded,\n        showChevron,\n        pinnable,\n        pinAction\n    ]);\n\n    return (\n        <>\n            <li\n                data-sidebar=\"menu-sub-item\"\n                className={cn(\"group/menu-sub-item relative flex min-w-0\", className)}\n            >\n                {sidebarMenuSubButton}\n            </li>\n            {children && !collapsible ? children : null}\n        </>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"names":["SidebarMenuSubItem","children","className","pinnable","action","collapsible","buttonProps","currentLevel","parentIcon","useSidebarMenu","sidebar","useSidebar","showChevron","setShowChevron","useState","menuItemId","useMemo","btoa","isSectionExpanded","toggleSectionExpanded","useCallback","isPinned","pinnedItemIcon","React","pinAction","handlePinClick","e","pinButton","SidebarMenuItemAction","UnPinIcon","PinIcon","useEffect","timer","setTimeout","clearTimeout","sidebarMenuSubButton","SidebarMenuSubItemIndentation","SidebarMenuSubButton","chevron","Icon","KeyboardArrowRightIcon","collapsibleAction","Collapsible","SidebarMenuSub","cn"],"mappings":"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"}

package/Sidebar/components/items/SidebarMenuSubItemIndentation.js

@@ -1,35 +1,33 @@
-import React from "react";
+import react from "react";
 import { Separator } from "../../../Separator/index.js";
 import { cva } from "../../../utils.js";
-const separatorVariants = cva(["h-xl ml-px"], {
-  variants: {
-    variant: {
-      "group-label": "h-[38px]!"
+const separatorVariants = cva([
+    "h-xl ml-px"
+], {
+    variants: {
+        variant: {
+            "group-label": "h-[38px]!"
+        }
     }
-  }
 });
-const SidebarMenuSubItemIndentation = ({
-  lvl,
-  variant
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    "data-sidebar": "indentation",
-    className: "gap-x-xs flex mr-sm"
-  }, Array.from({
-    length: lvl
-  }, (_, index) => /*#__PURE__*/React.createElement("div", {
-    "data-sidebar": "indentation-element",
-    className: "ml-md",
-    key: lvl + index
-  }, /*#__PURE__*/React.createElement(Separator, {
-    orientation: "vertical",
-    margin: "none",
-    variant: "strong",
-    className: separatorVariants({
-      variant
-    })
-  }))));
-};
+const SidebarMenuSubItemIndentation = ({ lvl, variant })=>/*#__PURE__*/ react.createElement("div", {
+        "data-sidebar": "indentation",
+        className: "gap-x-xs flex mr-sm"
+    }, Array.from({
+        length: lvl
+    }, (_, index)=>/*#__PURE__*/ react.createElement("div", {
+            "data-sidebar": "indentation-element",
+            className: "ml-md",
+            key: lvl + index
+        }, /*#__PURE__*/ react.createElement(Separator, {
+            orientation: "vertical",
+            margin: "none",
+            variant: "strong",
+            className: separatorVariants({
+                variant,
+                className: "!h-full"
+            })
+        }))));
 export { SidebarMenuSubItemIndentation };
 
 //# sourceMappingURL=SidebarMenuSubItemIndentation.js.map

package/Sidebar/components/items/SidebarMenuSubItemIndentation.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Separator","cva","separatorVariants","variants","variant","SidebarMenuSubItemIndentation","lvl","createElement","className","Array","from","length","_","index","key","orientation","margin"],"sources":["SidebarMenuSubItemIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nimport { cva, type VariantProps } from \"~/utils.js\";\n\nconst separatorVariants = cva([\"h-xl ml-px\"], {\n    variants: {\n        variant: {\n            \"group-label\": \"h-[38px]!\"\n        }\n    }\n});\n\nexport interface SidebarMenuSubItemIndentationProps\n    extends\n        Omit<React.HTMLAttributes<HTMLLIElement>, \"content\">,\n        VariantProps<typeof separatorVariants> {\n    lvl: number;\n}\n\nconst SidebarMenuSubItemIndentation = ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => {\n    return (\n        <div data-sidebar=\"indentation\" className={\"gap-x-xs flex mr-sm\"}>\n            {Array.from({ length: lvl }, (_, index) => (\n                <div data-sidebar={\"indentation-element\"} className={\"ml-md\"} key={lvl + index}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={separatorVariants({ variant })}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubItemIndentation };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,SAASC,GAAG;AAEZ,MAAMC,iBAAiB,GAAGD,GAAG,CAAC,CAAC,YAAY,CAAC,EAAE;EAC1CE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EAAE;IACnB;EACJ;AACJ,CAAC,CAAC;AASF,MAAMC,6BAA6B,GAAGA,CAAC;EAAEC,GAAG;EAAEF;AAA4C,CAAC,KAAK;EAC5F,oBACIL,KAAA,CAAAQ,aAAA;IAAK,gBAAa,aAAa;IAACC,SAAS,EAAE;EAAsB,GAC5DC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEL;EAAI,CAAC,EAAE,CAACM,CAAC,EAAEC,KAAK,kBAClCd,KAAA,CAAAQ,aAAA;IAAK,gBAAc,qBAAsB;IAACC,SAAS,EAAE,OAAQ;IAACM,GAAG,EAAER,GAAG,GAAGO;EAAM,gBAC3Ed,KAAA,CAAAQ,aAAA,CAACP,SAAS;IACNe,WAAW,EAAE,UAAW;IACxBC,MAAM,EAAE,MAAO;IACfZ,OAAO,EAAE,QAAS;IAClBI,SAAS,EAAEN,iBAAiB,CAAC;MAAEE;IAAQ,CAAC;EAAE,CAC7C,CACA,CACR,CACA,CAAC;AAEd,CAAC;AAED,SAASC,6BAA6B","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuSubItemIndentation.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubItemIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nimport { cva, type VariantProps } from \"~/utils.js\";\n\nconst separatorVariants = cva([\"h-xl ml-px\"], {\n    variants: {\n        variant: {\n            \"group-label\": \"h-[38px]!\"\n        }\n    }\n});\n\nexport interface SidebarMenuSubItemIndentationProps\n    extends\n        Omit<React.HTMLAttributes<HTMLLIElement>, \"content\">,\n        VariantProps<typeof separatorVariants> {\n    lvl: number;\n}\n\nconst SidebarMenuSubItemIndentation = ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => {\n    return (\n        <div data-sidebar=\"indentation\" className={\"gap-x-xs flex mr-sm\"}>\n            {Array.from({ length: lvl }, (_, index) => (\n                <div data-sidebar={\"indentation-element\"} className={\"ml-md\"} key={lvl + index}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={separatorVariants({ variant, className: \"!h-full\" })}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubItemIndentation };\n"],"names":["separatorVariants","cva","SidebarMenuSubItemIndentation","lvl","variant","Array","_","index","Separator"],"mappings":";;;AAKA,MAAMA,oBAAoBC,IAAI;IAAC;CAAa,EAAE;IAC1C,UAAU;QACN,SAAS;YACL,eAAe;QACnB;IACJ;AACJ;AASA,MAAMC,gCAAgC,CAAC,EAAEC,GAAG,EAAEC,OAAO,EAAsC,GAChF,WAAP,GACI,oBAAC;QAAI,gBAAa;QAAc,WAAW;OACtCC,MAAM,IAAI,CAAC;QAAE,QAAQF;IAAI,GAAG,CAACG,GAAGC,QAAAA,WAAAA,GAC7B,oBAAC;YAAI,gBAAc;YAAuB,WAAW;YAAS,KAAKJ,MAAMI;yBACrE,oBAACC,WAASA;YACN,aAAa;YACb,QAAQ;YACR,SAAS;YACT,WAAWR,kBAAkB;gBAAEI;gBAAS,WAAW;YAAU"}

package/Sidebar/index.js

@@ -1,4 +1,2 @@
 export * from "./Sidebar.js";
 export * from "./components/SidebarProvider.js";
-
-//# sourceMappingURL=index.js.map

package/Sidebar/stories/HashLink.js

@@ -1,52 +1,28 @@
-import React from "react";
-/**
- * A Link component that handles hash navigation specially.
- * If the `to` prop starts with '#', it modifies only the hash
- * portion of the current URL instead of navigating.
- */
-export const HashLink = ({
-  to,
-  children,
-  onClick,
-  replace = false,
-  ...props
-}) => {
-  const isHashLink = to?.startsWith("#");
-  const handleClick = e => {
-    if (isHashLink) {
-      e.preventDefault();
-
-      // Get current URL and replace/append the hash
-      const url = new URL(window.location.href);
-      url.hash = to;
-      if (replace) {
-        // Replace current history entry
-        window.history.replaceState(null, "", url.toString());
-      } else {
-        // Push new history entry
-        window.history.pushState(null, "", url.toString());
-      }
-
-      // Dispatch a hashchange event so other code can react to it
-      window.dispatchEvent(new HashChangeEvent("hashchange"));
-
-      // Scroll to the target element if it exists
-      const targetId = to.slice(1);
-      const targetElement = document.getElementById(targetId);
-      if (targetElement) {
-        targetElement.scrollIntoView({
-          behavior: "smooth"
-        });
-      }
-    }
-
-    // Call any additional onClick handler
-    onClick?.(e);
-  };
-  return /*#__PURE__*/React.createElement("a", Object.assign({
-    href: to,
-    onClick: handleClick
-  }, props), children);
+import react from "react";
+const HashLink = ({ to, children, onClick, replace = false, ...props })=>{
+    const isHashLink = to?.startsWith("#");
+    const handleClick = (e)=>{
+        if (isHashLink) {
+            e.preventDefault();
+            const url = new URL(window.location.href);
+            url.hash = to;
+            if (replace) window.history.replaceState(null, "", url.toString());
+            else window.history.pushState(null, "", url.toString());
+            window.dispatchEvent(new HashChangeEvent("hashchange"));
+            const targetId = to.slice(1);
+            const targetElement = document.getElementById(targetId);
+            if (targetElement) targetElement.scrollIntoView({
+                behavior: "smooth"
+            });
+        }
+        onClick?.(e);
+    };
+    return /*#__PURE__*/ react.createElement("a", {
+        href: to,
+        onClick: handleClick,
+        ...props
+    }, children);
 };
+export { HashLink };
 
 //# sourceMappingURL=HashLink.js.map

package/Sidebar/stories/HashLink.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","HashLink","to","children","onClick","replace","props","isHashLink","startsWith","handleClick","e","preventDefault","url","URL","window","location","href","hash","history","replaceState","toString","pushState","dispatchEvent","HashChangeEvent","targetId","slice","targetElement","document","getElementById","scrollIntoView","behavior","createElement","Object","assign"],"sources":["HashLink.tsx"],"sourcesContent":["import React, { AnchorHTMLAttributes, MouseEvent, ReactNode } from \"react\";\n\ninterface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n    to: string;\n    children?: ReactNode;\n    replace?: boolean;\n}\n\n/**\n * A Link component that handles hash navigation specially.\n * If the `to` prop starts with '#', it modifies only the hash\n * portion of the current URL instead of navigating.\n */\nexport const HashLink = ({ to, children, onClick, replace = false, ...props }: LinkProps) => {\n    const isHashLink = to?.startsWith(\"#\");\n\n    const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {\n        if (isHashLink) {\n            e.preventDefault();\n\n            // Get current URL and replace/append the hash\n            const url = new URL(window.location.href);\n            url.hash = to;\n\n            if (replace) {\n                // Replace current history entry\n                window.history.replaceState(null, \"\", url.toString());\n            } else {\n                // Push new history entry\n                window.history.pushState(null, \"\", url.toString());\n            }\n\n            // Dispatch a hashchange event so other code can react to it\n            window.dispatchEvent(new HashChangeEvent(\"hashchange\"));\n\n            // Scroll to the target element if it exists\n            const targetId = to.slice(1);\n            const targetElement = document.getElementById(targetId);\n            if (targetElement) {\n                targetElement.scrollIntoView({ behavior: \"smooth\" });\n            }\n        }\n\n        // Call any additional onClick handler\n        onClick?.(e);\n    };\n\n    return (\n        <a href={to} onClick={handleClick} {...props}>\n            {children}\n        </a>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuD,OAAO;AAQ1E;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,OAAO,GAAG,KAAK;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACzF,MAAMC,UAAU,GAAGL,EAAE,EAAEM,UAAU,CAAC,GAAG,CAAC;EAEtC,MAAMC,WAAW,GAAIC,CAAgC,IAAK;IACtD,IAAIH,UAAU,EAAE;MACZG,CAAC,CAACC,cAAc,CAAC,CAAC;;MAElB;MACA,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAACC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC;MACzCJ,GAAG,CAACK,IAAI,GAAGf,EAAE;MAEb,IAAIG,OAAO,EAAE;QACT;QACAS,MAAM,CAACI,OAAO,CAACC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAEP,GAAG,CAACQ,QAAQ,CAAC,CAAC,CAAC;MACzD,CAAC,MAAM;QACH;QACAN,MAAM,CAACI,OAAO,CAACG,SAAS,CAAC,IAAI,EAAE,EAAE,EAAET,GAAG,CAACQ,QAAQ,CAAC,CAAC,CAAC;MACtD;;MAEA;MACAN,MAAM,CAACQ,aAAa,CAAC,IAAIC,eAAe,CAAC,YAAY,CAAC,CAAC;;MAEvD;MACA,MAAMC,QAAQ,GAAGtB,EAAE,CAACuB,KAAK,CAAC,CAAC,CAAC;MAC5B,MAAMC,aAAa,GAAGC,QAAQ,CAACC,cAAc,CAACJ,QAAQ,CAAC;MACvD,IAAIE,aAAa,EAAE;QACfA,aAAa,CAACG,cAAc,CAAC;UAAEC,QAAQ,EAAE;QAAS,CAAC,CAAC;MACxD;IACJ;;IAEA;IACA1B,OAAO,GAAGM,CAAC,CAAC;EAChB,CAAC;EAED,oBACIV,KAAA,CAAA+B,aAAA,MAAAC,MAAA,CAAAC,MAAA;IAAGjB,IAAI,EAAEd,EAAG;IAACE,OAAO,EAAEK;EAAY,GAAKH,KAAK,GACvCH,QACF,CAAC;AAEZ,CAAC","ignoreList":[]}
+{"version":3,"file":"Sidebar/stories/HashLink.js","sources":["../../../src/Sidebar/stories/HashLink.tsx"],"sourcesContent":["import React, { AnchorHTMLAttributes, MouseEvent, ReactNode } from \"react\";\n\ninterface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n    to: string;\n    children?: ReactNode;\n    replace?: boolean;\n}\n\n/**\n * A Link component that handles hash navigation specially.\n * If the `to` prop starts with '#', it modifies only the hash\n * portion of the current URL instead of navigating.\n */\nexport const HashLink = ({ to, children, onClick, replace = false, ...props }: LinkProps) => {\n    const isHashLink = to?.startsWith(\"#\");\n\n    const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {\n        if (isHashLink) {\n            e.preventDefault();\n\n            // Get current URL and replace/append the hash\n            const url = new URL(window.location.href);\n            url.hash = to;\n\n            if (replace) {\n                // Replace current history entry\n                window.history.replaceState(null, \"\", url.toString());\n            } else {\n                // Push new history entry\n                window.history.pushState(null, \"\", url.toString());\n            }\n\n            // Dispatch a hashchange event so other code can react to it\n            window.dispatchEvent(new HashChangeEvent(\"hashchange\"));\n\n            // Scroll to the target element if it exists\n            const targetId = to.slice(1);\n            const targetElement = document.getElementById(targetId);\n            if (targetElement) {\n                targetElement.scrollIntoView({ behavior: \"smooth\" });\n            }\n        }\n\n        // Call any additional onClick handler\n        onClick?.(e);\n    };\n\n    return (\n        <a href={to} onClick={handleClick} {...props}>\n            {children}\n        </a>\n    );\n};\n"],"names":["HashLink","to","children","onClick","replace","props","isHashLink","handleClick","e","url","URL","window","HashChangeEvent","targetId","targetElement","document"],"mappings":";AAaO,MAAMA,WAAW,CAAC,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,UAAU,KAAK,EAAE,GAAGC,OAAkB;IACpF,MAAMC,aAAaL,IAAI,WAAW;IAElC,MAAMM,cAAc,CAACC;QACjB,IAAIF,YAAY;YACZE,EAAE,cAAc;YAGhB,MAAMC,MAAM,IAAIC,IAAIC,OAAO,QAAQ,CAAC,IAAI;YACxCF,IAAI,IAAI,GAAGR;YAEX,IAAIG,SAEAO,OAAO,OAAO,CAAC,YAAY,CAAC,MAAM,IAAIF,IAAI,QAAQ;iBAGlDE,OAAO,OAAO,CAAC,SAAS,CAAC,MAAM,IAAIF,IAAI,QAAQ;YAInDE,OAAO,aAAa,CAAC,IAAIC,gBAAgB;YAGzC,MAAMC,WAAWZ,GAAG,KAAK,CAAC;YAC1B,MAAMa,gBAAgBC,SAAS,cAAc,CAACF;YAC9C,IAAIC,eACAA,cAAc,cAAc,CAAC;gBAAE,UAAU;YAAS;QAE1D;QAGAX,UAAUK;IACd;IAEA,OAAO,WAAP,GACI,oBAAC;QAAE,MAAMP;QAAI,SAASM;QAAc,GAAGF,KAAK;OACvCH;AAGb"}

package/Sidebar/stories/useHash.js

@@ -1,32 +1,20 @@
-import { useState, useEffect } from "react";
-
-/**
- * A hook that returns the current URL hash and updates
- * whenever it changes (via hashchange event or popstate).
- *
- * @returns The current hash value
- */
-export const useHash = () => {
-  const getHash = () => {
-    return window.location.hash;
-  };
-  const [hash, setHash] = useState(getHash);
-  useEffect(() => {
-    const handleHashChange = () => {
-      setHash(getHash());
-    };
-
-    // Listen for hash changes (including from our Link component)
-    window.addEventListener("hashchange", handleHashChange);
-
-    // Also listen for popstate (back/forward navigation)
-    window.addEventListener("popstate", handleHashChange);
-    return () => {
-      window.removeEventListener("hashchange", handleHashChange);
-      window.removeEventListener("popstate", handleHashChange);
-    };
-  }, []);
-  return hash;
+import { useEffect, useState } from "react";
+const useHash = ()=>{
+    const getHash = ()=>window.location.hash;
+    const [hash, setHash] = useState(getHash);
+    useEffect(()=>{
+        const handleHashChange = ()=>{
+            setHash(getHash());
+        };
+        window.addEventListener("hashchange", handleHashChange);
+        window.addEventListener("popstate", handleHashChange);
+        return ()=>{
+            window.removeEventListener("hashchange", handleHashChange);
+            window.removeEventListener("popstate", handleHashChange);
+        };
+    }, []);
+    return hash;
 };
+export { useHash };
 
 //# sourceMappingURL=useHash.js.map