@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"names":["React","useSidebar","SidebarMenuRootItem","SidebarMenuItemAction","ReactComponent","UnPinIcon","SidebarMenuPinnedItems","sidebar","pinnedItems","getPinnedItemsData","length","createElement","Fragment","map","item","handleUnpin","e","stopPropagation","preventDefault","toggleItemPinned","id","unpinAction","element","onClick","key","text","icon","to","active","action","className"],"sources":["SidebarMenuPinnedItems.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\nimport { SidebarMenuRootItem } from \"./SidebarMenuRootItem.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\nimport { ReactComponent as UnPinIcon } from \"@webiny/icons/push_pin_off.svg\";\n\nconst SidebarMenuPinnedItems = () => {\n    const sidebar = useSidebar();\n\n    // Don't memoize - we want this to re-render when active state changes\n    const pinnedItems = sidebar.getPinnedItemsData();\n\n    if (pinnedItems.length === 0) {\n        return null;\n    }\n\n    return (\n        <>\n            {pinnedItems.map(item => {\n                const handleUnpin = (e: React.MouseEvent) => {\n                    e.stopPropagation();\n                    e.preventDefault();\n                    sidebar.toggleItemPinned(item.id);\n                };\n\n                const unpinAction = (\n                    <SidebarMenuItemAction element={<UnPinIcon />} onClick={handleUnpin} />\n                );\n\n                return (\n                    <SidebarMenuRootItem\n                        key={item.id}\n                        text={item.text}\n                        icon={item.icon}\n                        to={item.to}\n                        onClick={item.onClick}\n                        active={item.active}\n                        action={unpinAction}\n                    />\n                );\n            })}\n            <li className=\"px-sm py-xs\">\n                <div className=\"h-px bg-neutral-dimmed\" />\n            </li>\n        </>\n    );\n};\n\nexport { SidebarMenuPinnedItems };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU;AACnB,SAASC,mBAAmB;AAC5B,SAASC,qBAAqB;AAC9B,SAASC,cAAc,IAAIC,SAAS,QAAQ,gCAAgC;AAE5E,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;EACjC,MAAMC,OAAO,GAAGN,UAAU,CAAC,CAAC;;EAE5B;EACA,MAAMO,WAAW,GAAGD,OAAO,CAACE,kBAAkB,CAAC,CAAC;EAEhD,IAAID,WAAW,CAACE,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAO,IAAI;EACf;EAEA,oBACIV,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAY,QAAA,QACKJ,WAAW,CAACK,GAAG,CAACC,IAAI,IAAI;IACrB,MAAMC,WAAW,GAAIC,CAAmB,IAAK;MACzCA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBD,CAAC,CAACE,cAAc,CAAC,CAAC;MAClBX,OAAO,CAACY,gBAAgB,CAACL,IAAI,CAACM,EAAE,CAAC;IACrC,CAAC;IAED,MAAMC,WAAW,gBACbrB,KAAA,CAAAW,aAAA,CAACR,qBAAqB;MAACmB,OAAO,eAAEtB,KAAA,CAAAW,aAAA,CAACN,SAAS,MAAE,CAAE;MAACkB,OAAO,EAAER;IAAY,CAAE,CACzE;IAED,oBACIf,KAAA,CAAAW,aAAA,CAACT,mBAAmB;MAChBsB,GAAG,EAAEV,IAAI,CAACM,EAAG;MACbK,IAAI,EAAEX,IAAI,CAACW,IAAK;MAChBC,IAAI,EAAEZ,IAAI,CAACY,IAAK;MAChBC,EAAE,EAAEb,IAAI,CAACa,EAAG;MACZJ,OAAO,EAAET,IAAI,CAACS,OAAQ;MACtBK,MAAM,EAAEd,IAAI,CAACc,MAAO;MACpBC,MAAM,EAAER;IAAY,CACvB,CAAC;EAEV,CAAC,CAAC,eACFrB,KAAA,CAAAW,aAAA;IAAImB,SAAS,EAAC;EAAa,gBACvB9B,KAAA,CAAAW,aAAA;IAAKmB,SAAS,EAAC;EAAwB,CAAE,CACzC,CACN,CAAC;AAEX,CAAC;AAED,SAASxB,sBAAsB","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuPinnedItems.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuPinnedItems.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\nimport { SidebarMenuRootItem } from \"./SidebarMenuRootItem.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\nimport { ReactComponent as UnPinIcon } from \"@webiny/icons/push_pin_off.svg\";\n\nconst SidebarMenuPinnedItems = () => {\n    const sidebar = useSidebar();\n\n    // Don't memoize - we want this to re-render when active state changes\n    const pinnedItems = sidebar.getPinnedItemsData();\n\n    if (pinnedItems.length === 0) {\n        return null;\n    }\n\n    return (\n        <>\n            {pinnedItems.map(item => {\n                const handleUnpin = (e: React.MouseEvent) => {\n                    e.stopPropagation();\n                    e.preventDefault();\n                    sidebar.toggleItemPinned(item.id);\n                };\n\n                const unpinAction = (\n                    <SidebarMenuItemAction element={<UnPinIcon />} onClick={handleUnpin} />\n                );\n\n                return (\n                    <SidebarMenuRootItem\n                        key={item.id}\n                        text={item.text}\n                        icon={item.icon}\n                        to={item.to}\n                        onClick={item.onClick}\n                        active={item.active}\n                        action={unpinAction}\n                    />\n                );\n            })}\n            <li className=\"px-sm py-xs\">\n                <div className=\"h-px bg-neutral-dimmed\" />\n            </li>\n        </>\n    );\n};\n\nexport { SidebarMenuPinnedItems };\n"],"names":["SidebarMenuPinnedItems","sidebar","useSidebar","pinnedItems","item","handleUnpin","e","unpinAction","SidebarMenuItemAction","UnPinIcon","SidebarMenuRootItem"],"mappings":";;;;;AAMA,MAAMA,yBAAyB;IAC3B,MAAMC,UAAUC;IAGhB,MAAMC,cAAcF,QAAQ,kBAAkB;IAE9C,IAAIE,AAAuB,MAAvBA,YAAY,MAAM,EAClB,OAAO;IAGX,OAAO,WAAP,GACI,0CACKA,YAAY,GAAG,CAACC,CAAAA;QACb,MAAMC,cAAc,CAACC;YACjBA,EAAE,eAAe;YACjBA,EAAE,cAAc;YAChBL,QAAQ,gBAAgB,CAACG,KAAK,EAAE;QACpC;QAEA,MAAMG,cAAc,WAAdA,GACF,oBAACC,uBAAqBA;YAAC,uBAAS,oBAACC,gBAASA;YAAK,SAASJ;;QAG5D,OAAO,WAAP,GACI,oBAACK,qBAAmBA;YAChB,KAAKN,KAAK,EAAE;YACZ,MAAMA,KAAK,IAAI;YACf,MAAMA,KAAK,IAAI;YACf,IAAIA,KAAK,EAAE;YACX,SAASA,KAAK,OAAO;YACrB,QAAQA,KAAK,MAAM;YACnB,QAAQG;;IAGpB,kBACA,oBAAC;QAAG,WAAU;qBACV,oBAAC;QAAI,WAAU;;AAI/B"}

package/Sidebar/components/items/SidebarMenuProvider.js

@@ -1,29 +1,21 @@
-import React from "react";
-const SidebarMenuContext = /*#__PURE__*/React.createContext({
-  currentLevel: 0,
-  nextLevel: 1,
-  parentIcon: undefined
+import react from "react";
+const SidebarMenuContext = /*#__PURE__*/ react.createContext({
+    currentLevel: 0,
+    nextLevel: 1,
+    parentIcon: void 0
 });
 function useSidebarMenu() {
-  const context = React.useContext(SidebarMenuContext);
-  if (!context) {
-    throw new Error("useSidebarItem must be used within a SidebarMenuProvider.");
-  }
-  return context;
+    const context = react.useContext(SidebarMenuContext);
+    if (!context) throw new Error("useSidebarItem must be used within a SidebarMenuProvider.");
+    return context;
 }
-const SidebarMenuProvider = ({
-  level = 0,
-  parentIcon,
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(SidebarMenuContext.Provider, {
-    value: {
-      currentLevel: level,
-      nextLevel: level + 1,
-      parentIcon
-    }
-  }, children);
-};
+const SidebarMenuProvider = ({ level = 0, parentIcon, children })=>/*#__PURE__*/ react.createElement(SidebarMenuContext.Provider, {
+        value: {
+            currentLevel: level,
+            nextLevel: level + 1,
+            parentIcon
+        }
+    }, children);
 SidebarMenuProvider.displayName = "SidebarMenuProvider";
 export { SidebarMenuProvider, useSidebarMenu };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","SidebarMenuContext","createContext","currentLevel","nextLevel","parentIcon","undefined","useSidebarMenu","context","useContext","Error","SidebarMenuProvider","level","children","createElement","Provider","value","displayName"],"sources":["SidebarMenuProvider.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface SidebarMenuContext {\n    currentLevel: number;\n    nextLevel: number;\n    parentIcon?: React.ReactNode;\n}\n\ninterface SidebarMenuProviderProps {\n    level?: number;\n    parentIcon?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst SidebarMenuContext = React.createContext<SidebarMenuContext>({\n    currentLevel: 0,\n    nextLevel: 1,\n    parentIcon: undefined\n});\n\nfunction useSidebarMenu() {\n    const context = React.useContext(SidebarMenuContext);\n    if (!context) {\n        throw new Error(\"useSidebarItem must be used within a SidebarMenuProvider.\");\n    }\n\n    return context;\n}\n\nconst SidebarMenuProvider = ({ level = 0, parentIcon, children }: SidebarMenuProviderProps) => {\n    return (\n        <SidebarMenuContext.Provider\n            value={{ currentLevel: level, nextLevel: level + 1, parentIcon }}\n        >\n            {children}\n        </SidebarMenuContext.Provider>\n    );\n};\n\nSidebarMenuProvider.displayName = \"SidebarMenuProvider\";\n\nexport { SidebarMenuProvider, useSidebarMenu };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAczB,MAAMC,kBAAkB,gBAAGD,KAAK,CAACE,aAAa,CAAqB;EAC/DC,YAAY,EAAE,CAAC;EACfC,SAAS,EAAE,CAAC;EACZC,UAAU,EAAEC;AAChB,CAAC,CAAC;AAEF,SAASC,cAAcA,CAAA,EAAG;EACtB,MAAMC,OAAO,GAAGR,KAAK,CAACS,UAAU,CAACR,kBAAkB,CAAC;EACpD,IAAI,CAACO,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,2DAA2D,CAAC;EAChF;EAEA,OAAOF,OAAO;AAClB;AAEA,MAAMG,mBAAmB,GAAGA,CAAC;EAAEC,KAAK,GAAG,CAAC;EAAEP,UAAU;EAAEQ;AAAmC,CAAC,KAAK;EAC3F,oBACIb,KAAA,CAAAc,aAAA,CAACb,kBAAkB,CAACc,QAAQ;IACxBC,KAAK,EAAE;MAAEb,YAAY,EAAES,KAAK;MAAER,SAAS,EAAEQ,KAAK,GAAG,CAAC;MAAEP;IAAW;EAAE,GAEhEQ,QACwB,CAAC;AAEtC,CAAC;AAEDF,mBAAmB,CAACM,WAAW,GAAG,qBAAqB;AAEvD,SAASN,mBAAmB,EAAEJ,cAAc","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuProvider.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuProvider.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface SidebarMenuContext {\n    currentLevel: number;\n    nextLevel: number;\n    parentIcon?: React.ReactNode;\n}\n\ninterface SidebarMenuProviderProps {\n    level?: number;\n    parentIcon?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst SidebarMenuContext = React.createContext<SidebarMenuContext>({\n    currentLevel: 0,\n    nextLevel: 1,\n    parentIcon: undefined\n});\n\nfunction useSidebarMenu() {\n    const context = React.useContext(SidebarMenuContext);\n    if (!context) {\n        throw new Error(\"useSidebarItem must be used within a SidebarMenuProvider.\");\n    }\n\n    return context;\n}\n\nconst SidebarMenuProvider = ({ level = 0, parentIcon, children }: SidebarMenuProviderProps) => {\n    return (\n        <SidebarMenuContext.Provider\n            value={{ currentLevel: level, nextLevel: level + 1, parentIcon }}\n        >\n            {children}\n        </SidebarMenuContext.Provider>\n    );\n};\n\nSidebarMenuProvider.displayName = \"SidebarMenuProvider\";\n\nexport { SidebarMenuProvider, useSidebarMenu };\n"],"names":["SidebarMenuContext","React","undefined","useSidebarMenu","context","Error","SidebarMenuProvider","level","parentIcon","children"],"mappings":";AAcA,MAAMA,qBAAqB,WAAHA,GAAGC,MAAAA,aAAmB,CAAqB;IAC/D,cAAc;IACd,WAAW;IACX,YAAYC;AAChB;AAEA,SAASC;IACL,MAAMC,UAAUH,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACI,SACD,MAAM,IAAIC,MAAM;IAGpB,OAAOD;AACX;AAEA,MAAME,sBAAsB,CAAC,EAAEC,QAAQ,CAAC,EAAEC,UAAU,EAAEC,QAAQ,EAA4B,GAC/E,WAAP,GACI,oBAACT,mBAAmB,QAAQ;QACxB,OAAO;YAAE,cAAcO;YAAO,WAAWA,QAAQ;YAAGC;QAAW;OAE9DC;AAKbH,oBAAoB,WAAW,GAAG"}

package/Sidebar/components/items/SidebarMenuRoot.js

@@ -1,14 +1,11 @@
-import React from "react";
+import react from "react";
 import { SidebarMenuProvider } from "./SidebarMenuProvider.js";
 import { SidebarMenuPinnedItems } from "./SidebarMenuPinnedItems.js";
-const SidebarMenuRoot = ({
-  children,
-  showPinnedItems = true,
-  ...props
-}) => /*#__PURE__*/React.createElement(SidebarMenuProvider, null, /*#__PURE__*/React.createElement("ul", Object.assign({
-  "data-sidebar": "menu",
-  className: "flex w-full min-w-0 flex-col gap-y-xs"
-}, props), showPinnedItems && /*#__PURE__*/React.createElement(SidebarMenuPinnedItems, null), children));
+const SidebarMenuRoot = ({ children, showPinnedItems = true, ...props })=>/*#__PURE__*/ react.createElement(SidebarMenuProvider, null, /*#__PURE__*/ react.createElement("ul", {
+        "data-sidebar": "menu",
+        className: "flex w-full min-w-0 flex-col gap-y-xs",
+        ...props
+    }, showPinnedItems && /*#__PURE__*/ react.createElement(SidebarMenuPinnedItems, null), children));
 export { SidebarMenuRoot };
 
 //# sourceMappingURL=SidebarMenuRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","SidebarMenuProvider","SidebarMenuPinnedItems","SidebarMenuRoot","children","showPinnedItems","props","createElement","Object","assign","className"],"sources":["SidebarMenuRoot.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuProvider } from \"./SidebarMenuProvider.js\";\nimport { SidebarMenuPinnedItems } from \"./SidebarMenuPinnedItems.js\";\n\ninterface SidebarMenuProps {\n    children: React.ReactNode;\n    showPinnedItems?: boolean;\n}\n\nconst SidebarMenuRoot = ({ children, showPinnedItems = true, ...props }: SidebarMenuProps) => (\n    <SidebarMenuProvider>\n        <ul data-sidebar=\"menu\" className={\"flex w-full min-w-0 flex-col gap-y-xs\"} {...props}>\n            {showPinnedItems && <SidebarMenuPinnedItems />}\n            {children}\n        </ul>\n    </SidebarMenuProvider>\n);\n\nexport { SidebarMenuRoot, type SidebarMenuProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,sBAAsB;AAO/B,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,eAAe,GAAG,IAAI;EAAE,GAAGC;AAAwB,CAAC,kBACrFN,KAAA,CAAAO,aAAA,CAACN,mBAAmB,qBAChBD,KAAA,CAAAO,aAAA,OAAAC,MAAA,CAAAC,MAAA;EAAI,gBAAa,MAAM;EAACC,SAAS,EAAE;AAAwC,GAAKJ,KAAK,GAChFD,eAAe,iBAAIL,KAAA,CAAAO,aAAA,CAACL,sBAAsB,MAAE,CAAC,EAC7CE,QACD,CACa,CACxB;AAED,SAASD,eAAe","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuRoot.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuRoot.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuProvider } from \"./SidebarMenuProvider.js\";\nimport { SidebarMenuPinnedItems } from \"./SidebarMenuPinnedItems.js\";\n\ninterface SidebarMenuProps {\n    children: React.ReactNode;\n    showPinnedItems?: boolean;\n}\n\nconst SidebarMenuRoot = ({ children, showPinnedItems = true, ...props }: SidebarMenuProps) => (\n    <SidebarMenuProvider>\n        <ul data-sidebar=\"menu\" className={\"flex w-full min-w-0 flex-col gap-y-xs\"} {...props}>\n            {showPinnedItems && <SidebarMenuPinnedItems />}\n            {children}\n        </ul>\n    </SidebarMenuProvider>\n);\n\nexport { SidebarMenuRoot, type SidebarMenuProps };\n"],"names":["SidebarMenuRoot","children","showPinnedItems","props","SidebarMenuProvider","SidebarMenuPinnedItems"],"mappings":";;;AASA,MAAMA,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,kBAAkB,IAAI,EAAE,GAAGC,OAAyB,iBACrF,oBAACC,qBAAmBA,MAAAA,WAAAA,GAChB,oBAAC;QAAG,gBAAa;QAAO,WAAW;QAA0C,GAAGD,KAAK;OAChFD,mBAAmB,WAAnBA,GAAmB,oBAACG,wBAAsBA,OAC1CJ"}

package/Sidebar/components/items/SidebarMenuRootButton.js

@@ -1,54 +1,52 @@
-import React from "react";
+import react from "react";
 import { cn, cva } from "../../../utils.js";
 import { DivButton } from "./DivButton.js";
 import { useAdminUi } from "../../../index.js";
-const variants = cva(["flex w-full items-center gap-sm rounded-md", "no-underline! text-neutral-primary cursor-pointer px-sm py-xs-plus text-left", "text-md outline-none transition-[width,height,padding]", "whitespace-nowrap overflow-hidden", "hover:bg-neutral-dark/5", "group-hover/menu-root-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=open]/menu-item-collapsible:font-semibold!"], {
-  variants: {
-    variant: {
-      "group-label": "text-neutral-muted! uppercase hover:bg-transparent! group-hover/menu-root-button:bg-transparent! focus:bg-transparent! cursor-default!"
-    },
-    disabled: {
-      true: "pointer-events-none text-neutral-disabled!"
+const variants = cva([
+    "flex w-full items-center gap-sm rounded-md",
+    "no-underline! text-neutral-primary cursor-pointer px-sm py-xs-plus text-left",
+    "text-md outline-none transition-[width,height,padding]",
+    "whitespace-nowrap overflow-hidden",
+    "hover:bg-neutral-dark/5",
+    "group-hover/menu-root-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=open]/menu-item-collapsible:font-semibold!"
+], {
+    variants: {
+        variant: {
+            "group-label": "text-neutral-muted! uppercase hover:bg-transparent! group-hover/menu-root-button:bg-transparent! focus:bg-transparent! cursor-default!"
+        },
+        disabled: {
+            true: "pointer-events-none text-neutral-disabled!"
+        }
     }
-  }
 });
-const SidebarMenuRootButton = ({
-  className,
-  onClick,
-  variant,
-  active,
-  disabled,
-  icon,
-  // oxlint-disable-next-line
-  pinnedIcon,
-  action,
-  text,
-  to,
-  ...linkProps
-}) => {
-  const sharedProps = {
-    "data-sidebar": "menu-button",
-    "data-active": active,
-    className: variants({
-      variant,
-      disabled
-    }),
-    onClick
-  };
-  const {
-    linkComponent: LinkComponent
-  } = useAdminUi();
-  const content = to ? /*#__PURE__*/React.createElement(LinkComponent, Object.assign({}, sharedProps, {
-    to: to
-  }, linkProps), icon, text) : /*#__PURE__*/React.createElement(DivButton, Object.assign({}, sharedProps, {
-    disabled: disabled,
-    tabIndex: variant === "group-label" ? -1 : undefined
-  }), icon, text);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn("flex items-center w-full relative group/menu-root-button", className)
-  }, content, action && /*#__PURE__*/React.createElement("div", {
-    className: "absolute top-0 right-0 mr-sm h-full flex items-center"
-  }, action));
+const SidebarMenuRootButton = ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, to, ...linkProps })=>{
+    const sharedProps = {
+        "data-sidebar": "menu-button",
+        "data-active": active,
+        className: variants({
+            variant,
+            disabled
+        }),
+        onClick
+    };
+    const { linkComponent: LinkComponent } = useAdminUi();
+    const content = to ? /*#__PURE__*/ react.createElement(LinkComponent, {
+        ...sharedProps,
+        to: to,
+        ...linkProps
+    }, icon, text) : /*#__PURE__*/ react.createElement(DivButton, {
+        ...sharedProps,
+        disabled: disabled,
+        tabIndex: "group-label" === variant ? -1 : void 0
+    }, icon, text);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn("flex items-center w-full relative group/menu-root-button", className)
+    }, content, action && /*#__PURE__*/ react.createElement("div", {
+        className: "absolute top-0 right-0 mr-sm h-full flex items-center"
+    }, action));
 };
 export { SidebarMenuRootButton };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","DivButton","useAdminUi","variants","variant","disabled","true","SidebarMenuRootButton","className","onClick","active","icon","pinnedIcon","action","text","to","linkProps","sharedProps","linkComponent","LinkComponent","content","createElement","Object","assign","tabIndex","undefined"],"sources":["SidebarMenuRootButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full items-center gap-sm rounded-md\",\n        \"no-underline! text-neutral-primary cursor-pointer px-sm py-xs-plus text-left\",\n        \"text-md outline-none transition-[width,height,padding]\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-root-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=open]/menu-item-collapsible:font-semibold!\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\":\n                    \"text-neutral-muted! uppercase hover:bg-transparent! group-hover/menu-root-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuRootButton = ({\n    className,\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    to,\n    ...linkProps\n}: SidebarMenuButtonBaseProps) => {\n    const sharedProps = {\n        \"data-sidebar\": \"menu-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled }),\n        onClick\n    };\n\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n        </LinkComponent>\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    return (\n        <div className={cn(\"flex items-center w-full relative group/menu-root-button\", className)}>\n            {content}\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 { SidebarMenuRootButton };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,SAASC,SAAS;AAClB,SAASC,UAAU;AAEnB,MAAMC,QAAQ,GAAGH,GAAG,CAChB,CACI,4CAA4C,EAC5C,8EAA8E,EAC9E,wDAAwD,EACxD,mCAAmC,EACnC,yBAAyB,EACzB,gDAAgD,EAChD,gEAAgE,EAChE,8GAA8G,EAC9G,8DAA8D,CACjE,EACD;EACIG,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EACT;IACR,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAID,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,SAAS;EACTC,OAAO;EACPL,OAAO;EACPM,MAAM;EACNL,QAAQ;EACRM,IAAI;EAEJ;EACAC,UAAU;EAEVC,MAAM;EACNC,IAAI;EACJC,EAAE;EACF,GAAGC;AACqB,CAAC,KAAK;EAC9B,MAAMC,WAAW,GAAG;IAChB,cAAc,EAAE,aAAa;IAC7B,aAAa,EAAEP,MAAM;IACrBF,SAAS,EAAEL,QAAQ,CAAC;MAAEC,OAAO;MAAEC;IAAS,CAAC,CAAC;IAC1CI;EACJ,CAAC;EAED,MAAM;IAAES,aAAa,EAAEC;EAAc,CAAC,GAAGjB,UAAU,CAAC,CAAC;EAErD,MAAMkB,OAAO,GAAGL,EAAE,gBACdjB,KAAA,CAAAuB,aAAA,CAACF,aAAa,EAAAG,MAAA,CAAAC,MAAA,KAAKN,WAAW;IAAEF,EAAE,EAAEA;EAAG,GAAKC,SAAS,GAChDL,IAAI,EACJG,IACU,CAAC,gBAEhBhB,KAAA,CAAAuB,aAAA,CAACpB,SAAS,EAAAqB,MAAA,CAAAC,MAAA,KACFN,WAAW;IACfZ,QAAQ,EAAEA,QAAS;IACnBmB,QAAQ,EAAEpB,OAAO,KAAK,aAAa,GAAG,CAAC,CAAC,GAAGqB;EAAU,IAEpDd,IAAI,EACJG,IACM,CACd;EAED,oBACIhB,KAAA,CAAAuB,aAAA;IAAKb,SAAS,EAAET,EAAE,CAAC,0DAA0D,EAAES,SAAS;EAAE,GACrFY,OAAO,EACPP,MAAM,iBACHf,KAAA,CAAAuB,aAAA;IAAKb,SAAS,EAAC;EAAuD,GACjEK,MACA,CAER,CAAC;AAEd,CAAC;AAED,SAASN,qBAAqB","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuRootButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuRootButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full items-center gap-sm rounded-md\",\n        \"no-underline! text-neutral-primary cursor-pointer px-sm py-xs-plus text-left\",\n        \"text-md outline-none transition-[width,height,padding]\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-root-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=open]/menu-item-collapsible:font-semibold!\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\":\n                    \"text-neutral-muted! uppercase hover:bg-transparent! group-hover/menu-root-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuRootButton = ({\n    className,\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    to,\n    ...linkProps\n}: SidebarMenuButtonBaseProps) => {\n    const sharedProps = {\n        \"data-sidebar\": \"menu-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled }),\n        onClick\n    };\n\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n        </LinkComponent>\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    return (\n        <div className={cn(\"flex items-center w-full relative group/menu-root-button\", className)}>\n            {content}\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 { SidebarMenuRootButton };\n"],"names":["variants","cva","SidebarMenuRootButton","className","onClick","variant","active","disabled","icon","pinnedIcon","action","text","to","linkProps","sharedProps","LinkComponent","useAdminUi","content","DivButton","undefined","cn"],"mappings":";;;;AAMA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eACI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,wBAAwB,CAAC,EAC3BC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,EAAE,EACF,GAAGC,WACsB;IACzB,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeR;QACf,WAAWN,SAAS;YAAEK;YAASE;QAAS;QACxCH;IACJ;IAEA,MAAM,EAAE,eAAeW,aAAa,EAAE,GAAGC;IAEzC,MAAMC,UAAUL,KAAK,WAALA,GACZ,oBAACG,eAAAA;QAAe,GAAGD,WAAW;QAAE,IAAIF;QAAK,GAAGC,SAAS;OAChDL,MACAG,QAAAA,WAAAA,GAGL,oBAACO,WAASA;QACL,GAAGJ,WAAW;QACf,UAAUP;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKc;OAE1CX,MACAG;IAIT,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWS,GAAG,4DAA4DjB;OAC1Ec,SACAP,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}

package/Sidebar/components/items/SidebarMenuRootItem.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState, useEffect } from "react";
+import react, { useCallback, useEffect, useMemo, useState } from "react";
 import { cn, makeDecoratable, withStaticProps } from "../../../utils.js";
 import { SidebarMenuRootButton } from "./SidebarMenuRootButton.js";
 import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon.js";
@@ -6,151 +6,148 @@ import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
 import { SidebarMenuSub } from "./SidebarMenuSub.js";
 import { Collapsible } from "radix-ui";
 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";
-const SidebarMenuItemBase = ({
-  children,
-  className,
-  pinnable,
-  action,
-  ...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]);
-  useEffect(() => {
-    if (sidebar.expanded) {
-      const timer = setTimeout(() => {
-        setShowChevron(true);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-    setShowChevron(false);
-    return undefined;
-  }, [sidebar.expanded]);
-  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
-  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 SidebarMenuItemBase = ({ children, className, pinnable, action, ...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
+    ]);
+    useEffect(()=>{
+        if (sidebar.expanded) {
+            const timer = setTimeout(()=>{
+                setShowChevron(true);
+            }, 100);
+            return ()=>clearTimeout(timer);
+        }
+        setShowChevron(false);
+    }, [
+        sidebar.expanded
+    ]);
+    const isPinned = sidebar.isItemPinned(menuItemId);
+    const pinnedItemIcon = useMemo(()=>{
+        if (buttonProps.pinnedIcon) return buttonProps.pinnedIcon;
+        return buttonProps.icon || parentIcon;
+    }, [
+        buttonProps.pinnedIcon,
+        buttonProps.icon,
+        parentIcon
+    ]);
+    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]);
-  const sidebarMenuButton = useMemo(() => {
-    if (!children) {
-      return /*#__PURE__*/React.createElement(SidebarMenuRootButton, 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-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden",
-      color: "neutral-strong",
-      "data-sidebar": "menu-item-expanded-indicator",
-      icon: /*#__PURE__*/React.createElement(KeyboardArrowRightIcon, null),
-      onClick: toggleSectionExpanded
-    }) : null;
-    const collapsibleAction = pinnable ? /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-xs"
-    }, pinAction, chevron) : chevron;
-    return /*#__PURE__*/React.createElement(Collapsible.Root, {
-      className: cn("w-full group/menu-item-collapsible"),
-      open: isSectionExpanded,
-      onOpenChange: toggleSectionExpanded
-    }, /*#__PURE__*/React.createElement(Collapsible.Trigger, {
-      asChild: true
-    }, /*#__PURE__*/React.createElement(SidebarMenuRootButton, Object.assign({}, buttonProps, {
-      action: collapsibleAction
-    }))), /*#__PURE__*/React.createElement(Collapsible.Content, {
-      forceMount: true,
-      className: "hidden data-[state=open]:block!"
-    }, /*#__PURE__*/React.createElement(SidebarMenuSub, {
-      parentIcon: buttonProps.icon
-    }, children)));
-  }, [children, buttonProps, menuItemId, isSectionExpanded, toggleSectionExpanded, showChevron, pinnable, pinAction]);
-  return /*#__PURE__*/React.createElement("li", {
-    "data-sidebar": "menu-item",
-    className: cn("group/menu-item relative px-xs-plus",
-    // When the sidebar is collapsed, this ensures that the sidebar menu item is highlighted
-    // if it contains an active child (no matter how deep in the hierarchy).
-    "group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]_svg]:fill-neutral-xstrong!", "group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]]:bg-neutral-dark/5!", className)
-  }, sidebarMenuButton);
+        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
+    ]);
+    const sidebarMenuButton = useMemo(()=>{
+        if (!children) return /*#__PURE__*/ react.createElement(SidebarMenuRootButton, {
+            ...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-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden",
+            color: "neutral-strong",
+            "data-sidebar": "menu-item-expanded-indicator",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: toggleSectionExpanded
+        }) : null;
+        const collapsibleAction = pinnable ? /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-xs"
+        }, pinAction, chevron) : chevron;
+        return /*#__PURE__*/ react.createElement(Collapsible.Root, {
+            className: cn("w-full group/menu-item-collapsible"),
+            open: isSectionExpanded,
+            onOpenChange: toggleSectionExpanded
+        }, /*#__PURE__*/ react.createElement(Collapsible.Trigger, {
+            asChild: true
+        }, /*#__PURE__*/ react.createElement(SidebarMenuRootButton, {
+            ...buttonProps,
+            action: collapsibleAction
+        })), /*#__PURE__*/ react.createElement(Collapsible.Content, {
+            forceMount: true,
+            className: "hidden data-[state=open]:block!"
+        }, /*#__PURE__*/ react.createElement(SidebarMenuSub, {
+            parentIcon: buttonProps.icon
+        }, children)));
+    }, [
+        children,
+        buttonProps,
+        menuItemId,
+        isSectionExpanded,
+        toggleSectionExpanded,
+        showChevron,
+        pinnable,
+        pinAction
+    ]);
+    return /*#__PURE__*/ react.createElement("li", {
+        "data-sidebar": "menu-item",
+        className: cn("group/menu-item relative px-xs-plus", "group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]_svg]:fill-neutral-xstrong!", "group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]]:bg-neutral-dark/5!", className)
+    }, sidebarMenuButton);
 };
 const DecoratableSidebarMenuItem = makeDecoratable("SidebarMenuItem", SidebarMenuItemBase);
 const SidebarMenuRootItem = withStaticProps(DecoratableSidebarMenuItem, {
-  Icon: SidebarMenuItemIcon,
-  Action: SidebarMenuItemAction
+    Icon: SidebarMenuItemIcon,
+    Action: SidebarMenuItemAction
 });
 export { SidebarMenuRootItem };
 

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

@@ -1 +1 @@
-{"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                onClick={toggleSectionExpanded}\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":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuRootItem.js","sources":["../../../../src/Sidebar/components/items/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                onClick={toggleSectionExpanded}\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"],"names":["SidebarMenuItemBase","children","className","pinnable","action","buttonProps","currentLevel","parentIcon","useSidebarMenu","sidebar","useSidebar","showChevron","setShowChevron","useState","menuItemId","useMemo","btoa","isSectionExpanded","toggleSectionExpanded","useCallback","useEffect","timer","setTimeout","clearTimeout","isPinned","pinnedItemIcon","pinAction","handlePinClick","e","pinButton","SidebarMenuItemAction","UnPinIcon","PinIcon","sidebarMenuButton","SidebarMenuRootButton","chevron","Icon","KeyboardArrowRightIcon","collapsibleAction","Collapsible","cn","SidebarMenuSub","DecoratableSidebarMenuItem","makeDecoratable","SidebarMenuRootItem","withStaticProps","SidebarMenuItemIcon"],"mappings":"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"}