@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","cn","makeDecoratable","withStaticProps","SidebarMenuRootButton","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuSub","Collapsible","Icon","ReactComponent","KeyboardArrowRightIcon","useSidebarMenu","useSidebar","SidebarMenuItemBase","children","className","buttonProps","currentLevel","sidebar","menuItemId","btoa","text","isSectionExpanded","expandedSections","toggleSectionExpanded","sidebarMenuButton","createElement","chevron","label","size","color","icon","Root","open","onOpenChange","Trigger","asChild","Object","assign","action","Content","forceMount","DecoratableSidebarMenuItem","SidebarMenuRootItem","Action"],"sources":["SidebarMenuRootItem.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { cn, makeDecoratable, withStaticProps } from \"~/utils\";\nimport { SidebarMenuRootButton } from \"./SidebarMenuRootButton\";\nimport { SidebarMenuItemIcon } from \"./SidebarMenuItemIcon\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub\";\nimport { Collapsible } from \"radix-ui\";\nimport { Icon } from \"~/Icon\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem\";\nimport { useSidebarMenu } from \"~/Sidebar/components/items/SidebarMenuProvider\";\nimport { useSidebar } from \"~/Sidebar\";\n\nconst SidebarMenuItemBase = ({ children, className, ...buttonProps }: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n    const sidebar = useSidebar();\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 sidebarMenuButton = useMemo(() => {\n        if (!children) {\n            return <SidebarMenuRootButton {...buttonProps} />;\n        }\n\n        const chevron = (\n            <Icon\n                label={\"Expand / Collapse\"}\n                size={\"sm\"}\n                className={\n                    \"wby-ml-auto wby-transition-transform wby-duration-175 group-data-[state=open]/menu-item-collapsible:wby-rotate-180 group-data-[state=collapsed]:wby-hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        );\n\n        return (\n            <Collapsible.Root\n                className={cn(\"wby-w-full wby-group/menu-item-collapsible\")}\n                open={isSectionExpanded}\n                onOpenChange={toggleSectionExpanded}\n            >\n                <Collapsible.Trigger asChild>\n                    <SidebarMenuRootButton {...buttonProps} action={chevron} />\n                </Collapsible.Trigger>\n                <Collapsible.Content\n                    forceMount\n                    className={\"wby-hidden data-[state=open]:!wby-block\"}\n                >\n                    <SidebarMenuSub>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [children, buttonProps, menuItemId, isSectionExpanded, toggleSectionExpanded]);\n\n    return (\n        <li\n            data-sidebar=\"menu-item\"\n            className={cn(\n                \"wby-group/menu-item wby-relative wby-px-xs-plus\",\n\n                // When the sidebar is collapsed, this ensures that the sidebar menu item is highlighted\n                // if it contains an active child (no matter how deep in the hierarchy).\n                \"group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]_svg]:!wby-fill-neutral-xstrong\",\n                \"group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]]:!wby-bg-neutral-dark/5\",\n                className\n            )}\n        >\n            {sidebarMenuButton}\n        </li>\n    );\n};\n\nconst DecoratableSidebarMenuItem = makeDecoratable(\"SidebarMenuItem\", SidebarMenuItemBase);\n\nconst SidebarMenuRootItem = withStaticProps(DecoratableSidebarMenuItem, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport { SidebarMenuRootItem, type SidebarMenuItemProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","useState","useEffect","cn","makeDecoratable","withStaticProps","SidebarMenuRootButton","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuSub","Collapsible","Icon","ReactComponent","KeyboardArrowRightIcon","PinIcon","UnPinIcon","useSidebarMenu","useSidebar","SidebarMenuItemBase","children","className","pinnable","action","buttonProps","currentLevel","parentIcon","sidebar","showChevron","setShowChevron","menuItemId","btoa","text","isSectionExpanded","expandedSections","toggleSectionExpanded","expanded","timer","setTimeout","clearTimeout","undefined","isPinned","isItemPinned","pinnedItemIcon","pinnedIcon","icon","registerPinnedItem","id","to","onClick","active","unregisterPinnedItem","pinAction","handlePinClick","e","stopPropagation","preventDefault","toggleItemPinned","pinButton","createElement","element","showOnHover","sidebarMenuButton","Object","assign","chevron","label","size","color","collapsibleAction","Root","open","onOpenChange","Trigger","asChild","Content","forceMount","DecoratableSidebarMenuItem","SidebarMenuRootItem","Action"],"sources":["SidebarMenuRootItem.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState, useEffect } from \"react\";\nimport { cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SidebarMenuRootButton } from \"./SidebarMenuRootButton.js\";\nimport { SidebarMenuItemIcon } from \"./SidebarMenuItemIcon.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub.js\";\nimport { Collapsible } from \"radix-ui\";\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 { type SidebarMenuItemProps } from \"./SidebarMenuItem.js\";\nimport { useSidebarMenu } from \"~/Sidebar/components/items/SidebarMenuProvider.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\n\nconst SidebarMenuItemBase = ({\n    children,\n    className,\n    pinnable,\n    action,\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    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 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    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    const sidebarMenuButton = useMemo(() => {\n        if (!children) {\n            return <SidebarMenuRootButton {...buttonProps} action={pinAction} />;\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-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        return (\n            <Collapsible.Root\n                className={cn(\"w-full group/menu-item-collapsible\")}\n                open={isSectionExpanded}\n                onOpenChange={toggleSectionExpanded}\n            >\n                <Collapsible.Trigger asChild>\n                    <SidebarMenuRootButton {...buttonProps} action={collapsibleAction} />\n                </Collapsible.Trigger>\n                <Collapsible.Content forceMount className={\"hidden data-[state=open]:block!\"}>\n                    <SidebarMenuSub parentIcon={buttonProps.icon}>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [\n        children,\n        buttonProps,\n        menuItemId,\n        isSectionExpanded,\n        toggleSectionExpanded,\n        showChevron,\n        pinnable,\n        pinAction\n    ]);\n\n    return (\n        <li\n            data-sidebar=\"menu-item\"\n            className={cn(\n                \"group/menu-item relative px-xs-plus\",\n\n                // When the sidebar is collapsed, this ensures that the sidebar menu item is highlighted\n                // if it contains an active child (no matter how deep in the hierarchy).\n                \"group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]_svg]:fill-neutral-xstrong!\",\n                \"group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]]:bg-neutral-dark/5!\",\n                className\n            )}\n        >\n            {sidebarMenuButton}\n        </li>\n    );\n};\n\nconst DecoratableSidebarMenuItem = makeDecoratable(\"SidebarMenuItem\", SidebarMenuItemBase);\n\nconst SidebarMenuRootItem = withStaticProps(DecoratableSidebarMenuItem, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport { SidebarMenuRootItem, type SidebarMenuItemProps };\n"],"mappings":"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","ignoreList":[]}

package/Sidebar/components/items/SidebarMenuSub.d.ts

@@ -1,3 +1,6 @@
 import React from "react";
-declare const SidebarMenuSub: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => React.JSX.Element;
+interface SidebarMenuSubProps extends React.HTMLAttributes<HTMLUListElement> {
+    parentIcon?: React.ReactNode;
+}
+declare const SidebarMenuSub: ({ className, parentIcon, ...props }: SidebarMenuSubProps) => React.JSX.Element;
 export { SidebarMenuSub };

package/Sidebar/components/items/SidebarMenuSub.js

@@ -1,16 +1,18 @@
 import React from "react";
-import { cn } from "../../../utils";
-import { SidebarMenuProvider, useSidebarMenu } from "./SidebarMenuProvider";
+import { cn } from "../../../utils.js";
+import { SidebarMenuProvider, useSidebarMenu } from "./SidebarMenuProvider.js";
 const SidebarMenuSub = ({
   className,
+  parentIcon,
   ...props
 }) => {
   const parentSidebarMenu = useSidebarMenu();
   return /*#__PURE__*/React.createElement(SidebarMenuProvider, {
-    level: parentSidebarMenu.nextLevel
+    level: parentSidebarMenu.nextLevel,
+    parentIcon: parentIcon
   }, /*#__PURE__*/React.createElement("ul", Object.assign({
     "data-sidebar": "menu-sub",
-    className: cn("wby-flex wby-min-w-0 wby-flex-col wby-gap-y-xs wby-pt-xs", "group-data-[state=collapsed]:wby-hidden", className)
+    className: cn("flex min-w-0 flex-col gap-y-xs pt-xs", "group-data-[state=collapsed]:hidden", className)
   }, props)));
 };
 export { SidebarMenuSub };

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

@@ -1 +1 @@
-{"version":3,"names":["React","cn","SidebarMenuProvider","useSidebarMenu","SidebarMenuSub","className","props","parentSidebarMenu","createElement","level","nextLevel","Object","assign"],"sources":["SidebarMenuSub.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils\";\nimport { SidebarMenuProvider, useSidebarMenu } from \"./SidebarMenuProvider\";\n\nconst SidebarMenuSub = ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => {\n    const parentSidebarMenu = useSidebarMenu();\n\n    return (\n        <SidebarMenuProvider level={parentSidebarMenu.nextLevel}>\n            <ul\n                data-sidebar=\"menu-sub\"\n                className={cn(\n                    \"wby-flex wby-min-w-0 wby-flex-col wby-gap-y-xs wby-pt-xs\",\n                    \"group-data-[state=collapsed]:wby-hidden\",\n                    className\n                )}\n                {...props}\n            />\n        </SidebarMenuProvider>\n    );\n};\n\nexport { SidebarMenuSub };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE;AACX,SAASC,mBAAmB,EAAEC,cAAc;AAE5C,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA8C,CAAC,KAAK;EACxF,MAAMC,iBAAiB,GAAGJ,cAAc,CAAC,CAAC;EAE1C,oBACIH,KAAA,CAAAQ,aAAA,CAACN,mBAAmB;IAACO,KAAK,EAAEF,iBAAiB,CAACG;EAAU,gBACpDV,KAAA,CAAAQ,aAAA,OAAAG,MAAA,CAAAC,MAAA;IACI,gBAAa,UAAU;IACvBP,SAAS,EAAEJ,EAAE,CACT,0DAA0D,EAC1D,yCAAyC,EACzCI,SACJ;EAAE,GACEC,KAAK,CACZ,CACgB,CAAC;AAE9B,CAAC;AAED,SAASF,cAAc","ignoreList":[]}
+{"version":3,"names":["React","cn","SidebarMenuProvider","useSidebarMenu","SidebarMenuSub","className","parentIcon","props","parentSidebarMenu","createElement","level","nextLevel","Object","assign"],"sources":["SidebarMenuSub.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { SidebarMenuProvider, useSidebarMenu } from \"./SidebarMenuProvider.js\";\n\ninterface SidebarMenuSubProps extends React.HTMLAttributes<HTMLUListElement> {\n    parentIcon?: React.ReactNode;\n}\n\nconst SidebarMenuSub = ({ className, parentIcon, ...props }: SidebarMenuSubProps) => {\n    const parentSidebarMenu = useSidebarMenu();\n\n    return (\n        <SidebarMenuProvider level={parentSidebarMenu.nextLevel} parentIcon={parentIcon}>\n            <ul\n                data-sidebar=\"menu-sub\"\n                className={cn(\n                    \"flex min-w-0 flex-col gap-y-xs pt-xs\",\n                    \"group-data-[state=collapsed]:hidden\",\n                    className\n                )}\n                {...props}\n            />\n        </SidebarMenuProvider>\n    );\n};\n\nexport { SidebarMenuSub };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE;AACX,SAASC,mBAAmB,EAAEC,cAAc;AAM5C,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEC,UAAU;EAAE,GAAGC;AAA2B,CAAC,KAAK;EACjF,MAAMC,iBAAiB,GAAGL,cAAc,CAAC,CAAC;EAE1C,oBACIH,KAAA,CAAAS,aAAA,CAACP,mBAAmB;IAACQ,KAAK,EAAEF,iBAAiB,CAACG,SAAU;IAACL,UAAU,EAAEA;EAAW,gBAC5EN,KAAA,CAAAS,aAAA,OAAAG,MAAA,CAAAC,MAAA;IACI,gBAAa,UAAU;IACvBR,SAAS,EAAEJ,EAAE,CACT,sCAAsC,EACtC,qCAAqC,EACrCI,SACJ;EAAE,GACEE,KAAK,CACZ,CACgB,CAAC;AAE9B,CAAC;AAED,SAASH,cAAc","ignoreList":[]}

package/Sidebar/components/items/SidebarMenuSubButton.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import type { SidebarMenuItemProps } from "./SidebarMenuRootItem";
-type SidebarMenuSubButtonProps = Omit<SidebarMenuItemProps, "className" | "children">;
-declare const SidebarMenuSubButton: ({ onClick, variant, active, disabled, icon, action, text, to, ...linkProps }: SidebarMenuSubButtonProps) => React.JSX.Element;
+import type { SidebarMenuItemProps } from "./SidebarMenuRootItem.js";
+import { DistributedOmit } from "type-fest";
+type SidebarMenuSubButtonProps = DistributedOmit<SidebarMenuItemProps, "children">;
+declare const SidebarMenuSubButton: ({ onClick, variant, active, disabled, icon, pinnedIcon, action, text, className, to, ...linkProps }: SidebarMenuSubButtonProps) => React.JSX.Element;
 export { SidebarMenuSubButton };

package/Sidebar/components/items/SidebarMenuSubButton.js

@@ -1,14 +1,14 @@
 import React from "react";
-import { Link } from "@webiny/react-router";
-import { cva } from "../../../utils";
-import { DivButton } from "./DivButton";
-const variants = cva(["wby-flex wby-w-full wby-cursor-pointer wby-items-center wby-gap-sm", "wby-text-md wby-text-neutral-primary !wby-no-underline", "wby-rounded-md wby-p-xs-plus wby-pr-sm wby-outline-none", "wby-whitespace-nowrap wby-overflow-hidden", "hover:wby-bg-neutral-dark/5", "focus:wby-bg-neutral-dark/5 focus:wby-ring-none focus:wby-ring-transparent", "data-[active=true]:wby-bg-neutral-dark/5 data-[active=true]:wby-font-semibold data-[active=true]:wby-pointer-events-none", "group-data-[state=collapsed]:wby-hidden", "group-data-[state=open]/menu-sub-item-collapsible:!wby-font-semibold"], {
+import { cva } from "../../../utils.js";
+import { DivButton } from "./DivButton.js";
+import { useAdminUi } from "../../../index.js";
+const variants = cva(["flex w-full cursor-pointer items-center gap-sm", "text-md text-neutral-primary no-underline!", "rounded-md p-xs-plus pr-sm outline-none", "whitespace-nowrap overflow-hidden", "hover:bg-neutral-dark/5", "group-hover/menu-sub-button:bg-neutral-dark/5", "focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent", "data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none", "group-data-[state=collapsed]:hidden"], {
   variants: {
     variant: {
-      "group-label": ["wby-uppercase wby-font-semibold !wby-text-neutral-muted wby-text-sm", "wby-pt-md wby-pb-xs-plus wby-pointer-events-none"]
+      "group-label": ["uppercase font-semibold text-neutral-muted! text-sm", "pt-md pb-xs-plus pointer-events-none", "hover:bg-transparent! group-hover/menu-sub-button:bg-transparent! focus:bg-transparent! cursor-default!"]
     },
     disabled: {
-      true: "wby-pointer-events-none !wby-text-neutral-disabled"
+      true: "pointer-events-none text-neutral-disabled!"
     }
   }
 });
@@ -18,33 +18,41 @@ const SidebarMenuSubButton = ({
   active,
   disabled,
   icon,
+  // eslint-disable-next-line
+  pinnedIcon,
   action,
   text,
+  className,
   to,
   ...linkProps
 }) => {
+  const {
+    linkComponent: LinkComponent
+  } = useAdminUi();
   const sharedProps = {
-    "data-sidebar": "menu-button",
+    "data-sidebar": "menu-sub-button",
     "data-active": active,
     className: variants({
       variant,
-      disabled
+      disabled,
+      className
     }),
     onClick
   };
-  const content = to ? /*#__PURE__*/React.createElement(Link, Object.assign({}, sharedProps, {
+  const content = to ? /*#__PURE__*/React.createElement(LinkComponent, Object.assign({}, sharedProps, {
     to: to
-  }, linkProps), icon, text) : /*#__PURE__*/React.createElement(DivButton, Object.assign({}, sharedProps, {
+  }, linkProps), icon, text) :
+  /*#__PURE__*/
+  // We can't use the default button element here because the content of the button
+  // can also contain a button, which is not allowed in HTML.
+  React.createElement(DivButton, Object.assign({}, sharedProps, {
     disabled: disabled,
     tabIndex: variant === "group-label" ? -1 : undefined
   }), icon, text);
-
-  // We can't use the default button element here because the content of the button
-  // can also contain a button, which is not allowed in HTML.
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-items-center wby-w-full"
-  }, content, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-absolute wby-right-[10px]"
+    className: "flex items-center w-full relative group/menu-sub-button"
+  }, content, action && /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-0 right-0 mr-sm h-full flex items-center"
   }, action));
 };
 export { SidebarMenuSubButton };

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

@@ -1 +1 @@
-{"version":3,"names":["React","Link","cva","DivButton","variants","variant","disabled","true","SidebarMenuSubButton","onClick","active","icon","action","text","to","linkProps","sharedProps","className","content","createElement","Object","assign","tabIndex","undefined"],"sources":["SidebarMenuSubButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link } from \"@webiny/react-router\";\nimport { cva } from \"~/utils\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem\";\nimport { DivButton } from \"./DivButton\";\n\nconst variants = cva(\n    [\n        \"wby-flex wby-w-full wby-cursor-pointer wby-items-center wby-gap-sm\",\n        \"wby-text-md wby-text-neutral-primary !wby-no-underline\",\n        \"wby-rounded-md wby-p-xs-plus wby-pr-sm wby-outline-none\",\n        \"wby-whitespace-nowrap wby-overflow-hidden\",\n        \"hover:wby-bg-neutral-dark/5\",\n        \"focus:wby-bg-neutral-dark/5 focus:wby-ring-none focus:wby-ring-transparent\",\n        \"data-[active=true]:wby-bg-neutral-dark/5 data-[active=true]:wby-font-semibold data-[active=true]:wby-pointer-events-none\",\n        \"group-data-[state=collapsed]:wby-hidden\",\n        \"group-data-[state=open]/menu-sub-item-collapsible:!wby-font-semibold\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\": [\n                    \"wby-uppercase wby-font-semibold !wby-text-neutral-muted wby-text-sm\",\n                    \"wby-pt-md wby-pb-xs-plus wby-pointer-events-none\"\n                ]\n            },\n            disabled: {\n                true: \"wby-pointer-events-none !wby-text-neutral-disabled\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuSubButtonProps = Omit<SidebarMenuItemProps, \"className\" | \"children\">;\n\nconst SidebarMenuSubButton = ({\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n    action,\n    text,\n    to,\n    ...linkProps\n}: SidebarMenuSubButtonProps) => {\n    const sharedProps = {\n        \"data-sidebar\": \"menu-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled }),\n        onClick\n    };\n\n    const content = to ? (\n        <Link {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n        </Link>\n    ) : (\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n        </DivButton>\n    );\n\n    // We can't use the default button element here because the content of the button\n    // can also contain a button, which is not allowed in HTML.\n    return (\n        <div className={\"wby-flex wby-items-center wby-w-full\"}>\n            {content}\n            <div className={\"wby-flex wby-absolute wby-right-[10px]\"}>{action}</div>\n        </div>\n    );\n};\n\nexport { SidebarMenuSubButton };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,SAASC,GAAG;AAEZ,SAASC,SAAS;AAElB,MAAMC,QAAQ,GAAGF,GAAG,CAChB,CACI,oEAAoE,EACpE,wDAAwD,EACxD,yDAAyD,EACzD,2CAA2C,EAC3C,6BAA6B,EAC7B,4EAA4E,EAC5E,0HAA0H,EAC1H,yCAAyC,EACzC,sEAAsE,CACzE,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EAAE,CACX,qEAAqE,EACrE,kDAAkD;IAE1D,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAID,MAAMC,oBAAoB,GAAGA,CAAC;EAC1BC,OAAO;EACPJ,OAAO;EACPK,MAAM;EACNJ,QAAQ;EACRK,IAAI;EACJC,MAAM;EACNC,IAAI;EACJC,EAAE;EACF,GAAGC;AACoB,CAAC,KAAK;EAC7B,MAAMC,WAAW,GAAG;IAChB,cAAc,EAAE,aAAa;IAC7B,aAAa,EAAEN,MAAM;IACrBO,SAAS,EAAEb,QAAQ,CAAC;MAAEC,OAAO;MAAEC;IAAS,CAAC,CAAC;IAC1CG;EACJ,CAAC;EAED,MAAMS,OAAO,GAAGJ,EAAE,gBACdd,KAAA,CAAAmB,aAAA,CAAClB,IAAI,EAAAmB,MAAA,CAAAC,MAAA,KAAKL,WAAW;IAAEF,EAAE,EAAEA;EAAG,GAAKC,SAAS,GACvCJ,IAAI,EACJE,IACC,CAAC,gBAEPb,KAAA,CAAAmB,aAAA,CAAChB,SAAS,EAAAiB,MAAA,CAAAC,MAAA,KACFL,WAAW;IACfV,QAAQ,EAAEA,QAAS;IACnBgB,QAAQ,EAAEjB,OAAO,KAAK,aAAa,GAAG,CAAC,CAAC,GAAGkB;EAAU,IAEpDZ,IAAI,EACJE,IACM,CACd;;EAED;EACA;EACA,oBACIb,KAAA,CAAAmB,aAAA;IAAKF,SAAS,EAAE;EAAuC,GAClDC,OAAO,eACRlB,KAAA,CAAAmB,aAAA;IAAKF,SAAS,EAAE;EAAyC,GAAEL,MAAY,CACtE,CAAC;AAEd,CAAC;AAED,SAASJ,oBAAoB","ignoreList":[]}
+{"version":3,"names":["React","cva","DivButton","useAdminUi","variants","variant","disabled","true","SidebarMenuSubButton","onClick","active","icon","pinnedIcon","action","text","className","to","linkProps","linkComponent","LinkComponent","sharedProps","content","createElement","Object","assign","tabIndex","undefined"],"sources":["SidebarMenuSubButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { DistributedOmit } from \"type-fest\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full cursor-pointer items-center gap-sm\",\n        \"text-md text-neutral-primary no-underline!\",\n        \"rounded-md p-xs-plus pr-sm outline-none\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-sub-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=collapsed]:hidden\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\": [\n                    \"uppercase font-semibold text-neutral-muted! text-sm\",\n                    \"pt-md pb-xs-plus pointer-events-none\",\n                    \"hover:bg-transparent! group-hover/menu-sub-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n                ]\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuSubButtonProps = DistributedOmit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuSubButton = ({\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // eslint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    className,\n    to,\n    ...linkProps\n}: SidebarMenuSubButtonProps) => {\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const sharedProps = {\n        \"data-sidebar\": \"menu-sub-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled, className }),\n        onClick\n    };\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n        </LinkComponent>\n    ) : (\n        // We can't use the default button element here because the content of the button\n        // can also contain a button, which is not allowed in HTML.\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n        </DivButton>\n    );\n\n    return (\n        <div className={\"flex items-center w-full relative group/menu-sub-button\"}>\n            {content}\n\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubButton };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG;AAEZ,SAASC,SAAS;AAElB,SAASC,UAAU;AAEnB,MAAMC,QAAQ,GAAGH,GAAG,CAChB,CACI,gDAAgD,EAChD,4CAA4C,EAC5C,yCAAyC,EACzC,mCAAmC,EACnC,yBAAyB,EACzB,+CAA+C,EAC/C,gEAAgE,EAChE,8GAA8G,EAC9G,qCAAqC,CACxC,EACD;EACIG,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EAAE,CACX,qDAAqD,EACrD,sCAAsC,EACtC,yGAAyG;IAEjH,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAID,MAAMC,oBAAoB,GAAGA,CAAC;EAC1BC,OAAO;EACPJ,OAAO;EACPK,MAAM;EACNJ,QAAQ;EACRK,IAAI;EAEJ;EACAC,UAAU;EAEVC,MAAM;EACNC,IAAI;EACJC,SAAS;EACTC,EAAE;EACF,GAAGC;AACoB,CAAC,KAAK;EAC7B,MAAM;IAAEC,aAAa,EAAEC;EAAc,CAAC,GAAGhB,UAAU,CAAC,CAAC;EAErD,MAAMiB,WAAW,GAAG;IAChB,cAAc,EAAE,iBAAiB;IACjC,aAAa,EAAEV,MAAM;IACrBK,SAAS,EAAEX,QAAQ,CAAC;MAAEC,OAAO;MAAEC,QAAQ;MAAES;IAAU,CAAC,CAAC;IACrDN;EACJ,CAAC;EAED,MAAMY,OAAO,GAAGL,EAAE,gBACdhB,KAAA,CAAAsB,aAAA,CAACH,aAAa,EAAAI,MAAA,CAAAC,MAAA,KAAKJ,WAAW;IAAEJ,EAAE,EAAEA;EAAG,GAAKC,SAAS,GAChDN,IAAI,EACJG,IACU,CAAC;EAAA;EAEhB;EACA;EACAd,KAAA,CAAAsB,aAAA,CAACpB,SAAS,EAAAqB,MAAA,CAAAC,MAAA,KACFJ,WAAW;IACfd,QAAQ,EAAEA,QAAS;IACnBmB,QAAQ,EAAEpB,OAAO,KAAK,aAAa,GAAG,CAAC,CAAC,GAAGqB;EAAU,IAEpDf,IAAI,EACJG,IACM,CACd;EAED,oBACId,KAAA,CAAAsB,aAAA;IAAKP,SAAS,EAAE;EAA0D,GACrEM,OAAO,EAEPR,MAAM,iBACHb,KAAA,CAAAsB,aAAA;IAAKP,SAAS,EAAC;EAAuD,GACjEF,MACA,CAER,CAAC;AAEd,CAAC;AAED,SAASL,oBAAoB","ignoreList":[]}

package/Sidebar/components/items/SidebarMenuSubItem.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type SidebarMenuItemProps } from "./SidebarMenuItem";
-declare const SidebarMenuSubItem: ({ children, className, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+import { type SidebarMenuItemProps } from "./SidebarMenuItem.js";
+declare const SidebarMenuSubItem: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
 export { SidebarMenuSubItem };

package/Sidebar/components/items/SidebarMenuSubItem.js

@@ -1,22 +1,29 @@
-import React, { useCallback, useMemo } from "react";
-import { cn } from "../../../utils";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { cn } from "../../../utils.js";
 import { Collapsible } from "radix-ui";
-import { SidebarMenuSubButton } from "./SidebarMenuSubButton";
-import { SidebarMenuSubItemIndentation } from "./SidebarMenuSubItemIndentation";
-import { SidebarMenuSub } from "./SidebarMenuSub";
-import { IconButton } from "../../../Button";
+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 { useSidebarMenu } from "./SidebarMenuProvider";
-import { useSidebar } from "../..";
+import { ReactComponent as PinIcon } from "@webiny/icons/push_pin.svg";
+import { ReactComponent as UnPinIcon } 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,
   ...buttonProps
 }) => {
   const {
-    currentLevel
+    currentLevel,
+    parentIcon
   } = useSidebarMenu();
   const sidebar = useSidebar();
+  const [showChevron, setShowChevron] = useState(false);
   const menuItemId = useMemo(() => {
     return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);
   }, [buttonProps.text, currentLevel]);
@@ -26,37 +33,120 @@ const SidebarMenuSubItem = ({
   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
+        });
+      }
+      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, buttonProps));
+      }), /*#__PURE__*/React.createElement(SidebarMenuSubButton, Object.assign({}, buttonProps, {
+        action: pinAction
+      })));
     }
-    const chevron = /*#__PURE__*/React.createElement(IconButton, {
-      variant: "ghost",
-      size: "xs",
-      className: "wby-ml-auto wby-transition-transform wby-duration-175 group-data-[state=open]/menu-sub-item-collapsible:wby-rotate-180 group-data-[state=collapsed]:wby-hidden",
+    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;
     return /*#__PURE__*/React.createElement(Collapsible.Root, {
-      className: "wby-w-full wby-group/menu-sub-item-collapsible"
+      className: "w-full group/menu-sub-item-collapsible",
+      open: isSectionExpanded,
+      onOpenChange: toggleSectionExpanded
     }, /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center"
+      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: chevron
-    })))), /*#__PURE__*/React.createElement(Collapsible.Content, null, /*#__PURE__*/React.createElement(SidebarMenuSub, null, children)));
-  }, [children, buttonProps, currentLevel, menuItemId, isSectionExpanded, toggleSectionExpanded]);
+      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("li", {
     "data-sidebar": "menu-sub-item",
-    className: cn("wby-group/menu-sub-item wby-relative wby-flex", className)
+    className: cn("group/menu-sub-item relative flex", className)
   }, sidebarMenuSubButton);
 };
 export { SidebarMenuSubItem };

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","cn","Collapsible","SidebarMenuSubButton","SidebarMenuSubItemIndentation","SidebarMenuSub","IconButton","ReactComponent","KeyboardArrowRightIcon","useSidebarMenu","useSidebar","SidebarMenuSubItem","children","className","buttonProps","currentLevel","sidebar","menuItemId","btoa","text","isSectionExpanded","expandedSections","toggleSectionExpanded","sidebarMenuSubButton","createElement","Fragment","lvl","variant","chevron","size","color","icon","Root","Trigger","asChild","Object","assign","action","Content"],"sources":["SidebarMenuSubItem.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { cn } from \"~/utils\";\nimport { Collapsible } from \"radix-ui\";\nimport { SidebarMenuSubButton } from \"./SidebarMenuSubButton\";\nimport { SidebarMenuSubItemIndentation } from \"./SidebarMenuSubItemIndentation\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub\";\nimport { IconButton } from \"~/Button\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem\";\nimport { useSidebar } from \"~/Sidebar\";\n\nconst SidebarMenuSubItem = ({ children, className, ...buttonProps }: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n    const sidebar = useSidebar();\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 sidebarMenuSubButton = useMemo(() => {\n        if (!children) {\n            return (\n                <>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} />\n                </>\n            );\n        }\n\n        const chevron = (\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                className={\n                    \"wby-ml-auto wby-transition-transform wby-duration-175 group-data-[state=open]/menu-sub-item-collapsible:wby-rotate-180 group-data-[state=collapsed]:wby-hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        );\n\n        return (\n            <Collapsible.Root className=\"wby-w-full wby-group/menu-sub-item-collapsible\">\n                <div className={\"wby-flex wby-items-center\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <Collapsible.Trigger asChild>\n                        <SidebarMenuSubButton {...buttonProps} action={chevron} />\n                    </Collapsible.Trigger>\n                </div>\n                <Collapsible.Content>\n                    <SidebarMenuSub>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [children, buttonProps, currentLevel, menuItemId, isSectionExpanded, toggleSectionExpanded]);\n\n    return (\n        <li\n            data-sidebar=\"menu-sub-item\"\n            className={cn(\"wby-group/menu-sub-item wby-relative wby-flex\", className)}\n        >\n            {sidebarMenuSubButton}\n        </li>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"mappings":"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","ignoreList":[]}
+{"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","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    ...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        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        <li\n            data-sidebar=\"menu-sub-item\"\n            className={cn(\"group/menu-sub-item relative flex\", className)}\n        >\n            {sidebarMenuSubButton}\n        </li>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"mappings":"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","ignoreList":[]}

package/Sidebar/components/items/SidebarMenuSubItemIndentation.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type VariantProps } from "../../../utils";
+import { type VariantProps } from "../../../utils.js";
 declare const separatorVariants: (props?: ({
     variant?: "group-label" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Sidebar/components/items/SidebarMenuSubItemIndentation.js

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

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\";\n\nimport { cva, type VariantProps } from \"~/utils\";\n\nconst separatorVariants = cva([\"wby-h-xl wby-ml-px\"], {\n    variants: {\n        variant: {\n            \"group-label\": \"!wby-h-[38px]\"\n        }\n    }\n});\n\nexport interface SidebarMenuSubItemIndentationProps\n    extends 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={\"wby-gap-x-xs wby-flex wby-mr-sm\"}>\n            {Array.from({ length: lvl }, (_, index) => (\n                <div data-sidebar={\"indentation-element\"} className={\"wby-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,oBAAoB,CAAC,EAAE;EAClDE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EAAE;IACnB;EACJ;AACJ,CAAC,CAAC;AAQF,MAAMC,6BAA6B,GAAGA,CAAC;EAAEC,GAAG;EAAEF;AAA4C,CAAC,KAAK;EAC5F,oBACIL,KAAA,CAAAQ,aAAA;IAAK,gBAAa,aAAa;IAACC,SAAS,EAAE;EAAkC,GACxEC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEL;EAAI,CAAC,EAAE,CAACM,CAAC,EAAEC,KAAK,kBAClCd,KAAA,CAAAQ,aAAA;IAAK,gBAAc,qBAAsB;IAACC,SAAS,EAAE,WAAY;IAACM,GAAG,EAAER,GAAG,GAAGO;EAAM,gBAC/Ed,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,"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 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;AAQF,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":[]}

package/Sidebar/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Sidebar";
-export * from "./components/SidebarProvider";
+export * from "./Sidebar.js";
+export * from "./components/SidebarProvider.js";

package/Sidebar/index.js

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

package/Sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Sidebar\";\nexport * from \"./components/SidebarProvider\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Sidebar.js\";\nexport * from \"./components/SidebarProvider.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/Sidebar/stories/HashLink.d.ts

@@ -0,0 +1,13 @@
+import React, { AnchorHTMLAttributes, ReactNode } from "react";
+interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    to: string;
+    children?: ReactNode;
+    replace?: boolean;
+}
+/**
+ * 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 declare const HashLink: ({ to, children, onClick, replace, ...props }: LinkProps) => React.JSX.Element;
+export {};

package/Sidebar/stories/HashLink.js

@@ -0,0 +1,52 @@
+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);
+};
+
+//# sourceMappingURL=HashLink.js.map

package/Sidebar/stories/HashLink.js.map

@@ -0,0 +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":[]}

package/Sidebar/stories/useHash.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook that returns the current URL hash and updates
+ * whenever it changes (via hashchange event or popstate).
+ *
+ * @returns The current hash value
+ */
+export declare const useHash: () => string;