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

package/Sidebar/components/SidebarContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","SidebarContent","className","props","createElement","Object","assign"],"sources":["SidebarContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils\";\n\nconst SidebarContent = ({ className, ...props }: React.ComponentProps<\"div\">) => {\n    return (\n        <div\n            {...props}\n            data-sidebar=\"content\"\n            className={cn(\n                \"wby-flex wby-text-neutral-primary wby-min-h-0 wby-flex-1 wby-flex-col wby-gap-2 wby-overflow-y-auto wby-overflow-x-hidden group-data-[state=collapsed]:wby-overflow-hidden\",\n                className\n            )}\n        />\n    );\n};\n\nexport { SidebarContent };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE;AAEX,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAAmC,CAAC,KAAK;EAC7E,oBACIJ,KAAA,CAAAK,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;IACT,gBAAa,SAAS;IACtBD,SAAS,EAAEF,EAAE,CACT,4KAA4K,EAC5KE,SACJ;EAAE,EACL,CAAC;AAEV,CAAC;AAED,SAASD,cAAc","ignoreList":[]}
+{"version":3,"names":["React","cn","ScrollArea","useSidebar","SidebarContent","className","children","props","state","isExpanded","dir","onScroll","restProps","createElement","Object","assign"],"sources":["SidebarContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\nconst SidebarContent = ({ className, children, ...props }: React.ComponentProps<\"div\">) => {\n    const { state } = useSidebar();\n    const isExpanded = state === \"expanded\";\n\n    if (isExpanded) {\n        // Extract dir and onScroll props to avoid type conflicts with ScrollArea.\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const { dir, onScroll, ...restProps } = props;\n        return (\n            <ScrollArea\n                data-sidebar=\"content\"\n                className={cn(\"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2\", className)}\n                {...restProps}\n            >\n                {children}\n            </ScrollArea>\n        );\n    }\n\n    return (\n        <div\n            {...props}\n            data-sidebar=\"content\"\n            className={cn(\n                \"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[state=collapsed]:overflow-hidden\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarContent };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE;AACX,SAASC,UAAU;AACnB,SAASC,UAAU;AAEnB,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAmC,CAAC,KAAK;EACvF,MAAM;IAAEC;EAAM,CAAC,GAAGL,UAAU,CAAC,CAAC;EAC9B,MAAMM,UAAU,GAAGD,KAAK,KAAK,UAAU;EAEvC,IAAIC,UAAU,EAAE;IACZ;IACA;IACA,MAAM;MAAEC,GAAG;MAAEC,QAAQ;MAAE,GAAGC;IAAU,CAAC,GAAGL,KAAK;IAC7C,oBACIP,KAAA,CAAAa,aAAA,CAACX,UAAU,EAAAY,MAAA,CAAAC,MAAA;MACP,gBAAa,SAAS;MACtBV,SAAS,EAAEJ,EAAE,CAAC,yDAAyD,EAAEI,SAAS;IAAE,GAChFO,SAAS,GAEZN,QACO,CAAC;EAErB;EAEA,oBACIN,KAAA,CAAAa,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQR,KAAK;IACT,gBAAa,SAAS;IACtBF,SAAS,EAAEJ,EAAE,CACT,wIAAwI,EACxII,SACJ;EAAE,IAEDC,QACA,CAAC;AAEd,CAAC;AAED,SAASF,cAAc","ignoreList":[]}

package/Sidebar/components/SidebarFooter.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Separator } from "../../Separator";
+import { Separator } from "../../Separator/index.js";
 const SidebarFooter = ({
   children,
   ...props
@@ -7,9 +7,9 @@ const SidebarFooter = ({
   return /*#__PURE__*/React.createElement("div", Object.assign({
     "data-sidebar": "footer"
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: "wby-px-sm wby-pb-xs"
+    className: "px-sm pb-xs"
   }, /*#__PURE__*/React.createElement(Separator, {
-    className: "wby-mb-px"
+    className: "mb-px"
   })), children);
 };
 export { SidebarFooter };

package/Sidebar/components/SidebarFooter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Separator","SidebarFooter","children","props","createElement","Object","assign","className"],"sources":["SidebarFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator\";\n\nconst SidebarFooter = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div data-sidebar=\"footer\" {...props}>\n            <div className={\"wby-px-sm wby-pb-xs\"}>\n                <Separator className={\"wby-mb-px\"} />\n            </div>\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarFooter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAA4C,CAAC,KAAK;EACpF,oBACIJ,KAAA,CAAAK,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAK,gBAAa;EAAQ,GAAKH,KAAK,gBAChCJ,KAAA,CAAAK,aAAA;IAAKG,SAAS,EAAE;EAAsB,gBAClCR,KAAA,CAAAK,aAAA,CAACJ,SAAS;IAACO,SAAS,EAAE;EAAY,CAAE,CACnC,CAAC,EACLL,QACA,CAAC;AAEd,CAAC;AAED,SAASD,aAAa","ignoreList":[]}
+{"version":3,"names":["React","Separator","SidebarFooter","children","props","createElement","Object","assign","className"],"sources":["SidebarFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst SidebarFooter = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div data-sidebar=\"footer\" {...props}>\n            <div className={\"px-sm pb-xs\"}>\n                <Separator className={\"mb-px\"} />\n            </div>\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarFooter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAA4C,CAAC,KAAK;EACpF,oBACIJ,KAAA,CAAAK,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAK,gBAAa;EAAQ,GAAKH,KAAK,gBAChCJ,KAAA,CAAAK,aAAA;IAAKG,SAAS,EAAE;EAAc,gBAC1BR,KAAA,CAAAK,aAAA,CAACJ,SAAS;IAACO,SAAS,EAAE;EAAQ,CAAE,CAC/B,CAAC,EACLL,QACA,CAAC;AAEd,CAAC;AAED,SAASD,aAAa","ignoreList":[]}

package/Sidebar/components/SidebarHeader.js

@@ -1,10 +1,10 @@
-import React from "react";
-import { Separator } from "../../Separator";
-import { IconButton } from "../../Button";
-import { useSidebar } from "./SidebarProvider";
+import React, { useEffect, useState } from "react";
+import { Separator } from "../../Separator/index.js";
+import { IconButton } from "../../Button/index.js";
+import { useSidebar } from "./SidebarProvider.js";
 import { ReactComponent as PinSidebarIcon } from "@webiny/icons/chrome_reader_mode.svg";
 import { ReactComponent as UnpinSidebarIcon } from "@webiny/icons/width_full.svg";
-import { Tooltip } from "../../Tooltip";
+import { Tooltip } from "../../Tooltip/index.js";
 const SidebarHeader = ({
   title,
   icon
@@ -14,19 +14,30 @@ const SidebarHeader = ({
     expanded,
     pinned
   } = useSidebar();
+  const [showButton, setShowButton] = useState(false);
+  useEffect(() => {
+    if (expanded) {
+      const timer = setTimeout(() => {
+        setShowButton(true);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    setShowButton(false);
+    return undefined;
+  }, [expanded]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-px-xs-plus"
+    className: "px-xs-plus"
   }, /*#__PURE__*/React.createElement("div", {
     "data-sidebar": "header",
-    className: "wby-flex wby-justify-between wby-items-center wby-gap-sm wby-py-xs-plus wby-px-xs wby-overflow-x-hidden"
+    className: "flex justify-between items-center gap-sm py-xs-plus px-xs overflow-x-hidden"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-items-center wby-gap-x-sm [&_a]:!wby-no-underline [&_a]:!wby-text-neutral-primary wby-truncate"
+    className: "flex items-center gap-x-sm [&_a]:no-underline! [&_a]:text-neutral-primary! truncate"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-shrink-0"
+    className: "flex shrink-0"
   }, icon), /*#__PURE__*/React.createElement("span", {
-    className: "wby-text-md wby-font-semibold wby-truncate"
-  }, title)), expanded && /*#__PURE__*/React.createElement("div", {
-    className: "wby-size-md"
+    className: "text-md font-semibold truncate"
+  }, title)), showButton && /*#__PURE__*/React.createElement("div", {
+    className: "size-md"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     side: "right",
     trigger: /*#__PURE__*/React.createElement(IconButton, {
@@ -38,9 +49,9 @@ const SidebarHeader = ({
     }),
     content: pinned ? "Unlock sidebar" : "Lock sidebar open"
   })))), /*#__PURE__*/React.createElement("div", {
-    className: "wby-px-sm wby-py-xs"
+    className: "px-sm py-xs"
   }, /*#__PURE__*/React.createElement(Separator, {
-    className: "wby-mb-px"
+    className: "mb-px"
   })));
 };
 export { SidebarHeader };

package/Sidebar/components/SidebarHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Separator","IconButton","useSidebar","ReactComponent","PinSidebarIcon","UnpinSidebarIcon","Tooltip","SidebarHeader","title","icon","togglePinned","expanded","pinned","createElement","Fragment","className","side","trigger","size","variant","onClick","content"],"sources":["SidebarHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator\";\nimport { IconButton } from \"~/Button\";\nimport { useSidebar } from \"./SidebarProvider\";\nimport { ReactComponent as PinSidebarIcon } from \"@webiny/icons/chrome_reader_mode.svg\";\nimport { ReactComponent as UnpinSidebarIcon } from \"@webiny/icons/width_full.svg\";\nimport { Tooltip } from \"~/Tooltip\";\n\ninterface SidebarHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n    icon?: React.ReactNode;\n    title?: React.ReactNode;\n}\n\nconst SidebarHeader = ({ title, icon }: SidebarHeaderProps) => {\n    const { togglePinned, expanded, pinned } = useSidebar();\n\n    return (\n        <>\n            <div className={\"wby-px-xs-plus\"}>\n                <div\n                    data-sidebar=\"header\"\n                    className={\n                        \"wby-flex wby-justify-between wby-items-center wby-gap-sm wby-py-xs-plus wby-px-xs wby-overflow-x-hidden\"\n                    }\n                >\n                    <div\n                        className={\n                            \"wby-flex wby-items-center wby-gap-x-sm [&_a]:!wby-no-underline [&_a]:!wby-text-neutral-primary wby-truncate\"\n                        }\n                    >\n                        <div className={\"wby-flex wby-flex-shrink-0\"}>{icon}</div>\n\n                        <span className={\"wby-text-md wby-font-semibold wby-truncate\"}>\n                            {title}\n                        </span>\n                    </div>\n\n                    {expanded && (\n                        <div className={\"wby-size-md\"}>\n                            <Tooltip\n                                side={\"right\"}\n                                trigger={\n                                    <IconButton\n                                        icon={pinned ? <UnpinSidebarIcon /> : <PinSidebarIcon />}\n                                        data-sidebar=\"trigger\"\n                                        size=\"xs\"\n                                        variant={\"ghost\"}\n                                        onClick={togglePinned}\n                                    />\n                                }\n                                content={pinned ? \"Unlock sidebar\" : \"Lock sidebar open\"}\n                            />\n                        </div>\n                    )}\n                </div>\n            </div>\n            <div className={\"wby-px-sm wby-py-xs\"}>\n                <Separator className={\"wby-mb-px\"} />\n            </div>\n        </>\n    );\n};\n\nexport { SidebarHeader, type SidebarHeaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAClB,SAASC,UAAU;AACnB,SAASC,UAAU;AACnB,SAASC,cAAc,IAAIC,cAAc,QAAQ,sCAAsC;AACvF,SAASD,cAAc,IAAIE,gBAAgB,QAAQ,8BAA8B;AACjF,SAASC,OAAO;AAOhB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAyB,CAAC,KAAK;EAC3D,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAGV,UAAU,CAAC,CAAC;EAEvD,oBACIH,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACIf,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAiB,gBAC7BhB,KAAA,CAAAc,aAAA;IACI,gBAAa,QAAQ;IACrBE,SAAS,EACL;EACH,gBAEDhB,KAAA,CAAAc,aAAA;IACIE,SAAS,EACL;EACH,gBAEDhB,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAA6B,GAAEN,IAAU,CAAC,eAE1DV,KAAA,CAAAc,aAAA;IAAME,SAAS,EAAE;EAA6C,GACzDP,KACC,CACL,CAAC,EAELG,QAAQ,iBACLZ,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAc,gBAC1BhB,KAAA,CAAAc,aAAA,CAACP,OAAO;IACJU,IAAI,EAAE,OAAQ;IACdC,OAAO,eACHlB,KAAA,CAAAc,aAAA,CAACZ,UAAU;MACPQ,IAAI,EAAEG,MAAM,gBAAGb,KAAA,CAAAc,aAAA,CAACR,gBAAgB,MAAE,CAAC,gBAAGN,KAAA,CAAAc,aAAA,CAACT,cAAc,MAAE,CAAE;MACzD,gBAAa,SAAS;MACtBc,IAAI,EAAC,IAAI;MACTC,OAAO,EAAE,OAAQ;MACjBC,OAAO,EAAEV;IAAa,CACzB,CACJ;IACDW,OAAO,EAAET,MAAM,GAAG,gBAAgB,GAAG;EAAoB,CAC5D,CACA,CAER,CACJ,CAAC,eACNb,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAsB,gBAClChB,KAAA,CAAAc,aAAA,CAACb,SAAS;IAACe,SAAS,EAAE;EAAY,CAAE,CACnC,CACP,CAAC;AAEX,CAAC;AAED,SAASR,aAAa","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","Separator","IconButton","useSidebar","ReactComponent","PinSidebarIcon","UnpinSidebarIcon","Tooltip","SidebarHeader","title","icon","togglePinned","expanded","pinned","showButton","setShowButton","timer","setTimeout","clearTimeout","undefined","createElement","Fragment","className","side","trigger","size","variant","onClick","content"],"sources":["SidebarHeader.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\nimport { ReactComponent as PinSidebarIcon } from \"@webiny/icons/chrome_reader_mode.svg\";\nimport { ReactComponent as UnpinSidebarIcon } from \"@webiny/icons/width_full.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\n\ninterface SidebarHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n    icon?: React.ReactNode;\n    title?: React.ReactNode;\n}\n\nconst SidebarHeader = ({ title, icon }: SidebarHeaderProps) => {\n    const { togglePinned, expanded, pinned } = useSidebar();\n    const [showButton, setShowButton] = useState(false);\n\n    useEffect(() => {\n        if (expanded) {\n            const timer = setTimeout(() => {\n                setShowButton(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowButton(false);\n        return undefined;\n    }, [expanded]);\n\n    return (\n        <>\n            <div className={\"px-xs-plus\"}>\n                <div\n                    data-sidebar=\"header\"\n                    className={\n                        \"flex justify-between items-center gap-sm py-xs-plus px-xs overflow-x-hidden\"\n                    }\n                >\n                    <div\n                        className={\n                            \"flex items-center gap-x-sm [&_a]:no-underline! [&_a]:text-neutral-primary! truncate\"\n                        }\n                    >\n                        <div className={\"flex shrink-0\"}>{icon}</div>\n\n                        <span className={\"text-md font-semibold truncate\"}>{title}</span>\n                    </div>\n\n                    {showButton && (\n                        <div className={\"size-md\"}>\n                            <Tooltip\n                                side={\"right\"}\n                                trigger={\n                                    <IconButton\n                                        icon={pinned ? <UnpinSidebarIcon /> : <PinSidebarIcon />}\n                                        data-sidebar=\"trigger\"\n                                        size=\"xs\"\n                                        variant={\"ghost\"}\n                                        onClick={togglePinned}\n                                    />\n                                }\n                                content={pinned ? \"Unlock sidebar\" : \"Lock sidebar open\"}\n                            />\n                        </div>\n                    )}\n                </div>\n            </div>\n            <div className={\"px-sm py-xs\"}>\n                <Separator className={\"mb-px\"} />\n            </div>\n        </>\n    );\n};\n\nexport { SidebarHeader, type SidebarHeaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,SAAS;AAClB,SAASC,UAAU;AACnB,SAASC,UAAU;AACnB,SAASC,cAAc,IAAIC,cAAc,QAAQ,sCAAsC;AACvF,SAASD,cAAc,IAAIE,gBAAgB,QAAQ,8BAA8B;AACjF,SAASC,OAAO;AAOhB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAyB,CAAC,KAAK;EAC3D,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAGV,UAAU,CAAC,CAAC;EACvD,MAAM,CAACW,UAAU,EAAEC,aAAa,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACZ,IAAIa,QAAQ,EAAE;MACV,MAAMI,KAAK,GAAGC,UAAU,CAAC,MAAM;QAC3BF,aAAa,CAAC,IAAI,CAAC;MACvB,CAAC,EAAE,GAAG,CAAC;MACP,OAAO,MAAMG,YAAY,CAACF,KAAK,CAAC;IACpC;IACAD,aAAa,CAAC,KAAK,CAAC;IACpB,OAAOI,SAAS;EACpB,CAAC,EAAE,CAACP,QAAQ,CAAC,CAAC;EAEd,oBACId,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,qBACIvB,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAE;EAAa,gBACzBxB,KAAA,CAAAsB,aAAA;IACI,gBAAa,QAAQ;IACrBE,SAAS,EACL;EACH,gBAEDxB,KAAA,CAAAsB,aAAA;IACIE,SAAS,EACL;EACH,gBAEDxB,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAE;EAAgB,GAAEZ,IAAU,CAAC,eAE7CZ,KAAA,CAAAsB,aAAA;IAAME,SAAS,EAAE;EAAiC,GAAEb,KAAY,CAC/D,CAAC,EAELK,UAAU,iBACPhB,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAE;EAAU,gBACtBxB,KAAA,CAAAsB,aAAA,CAACb,OAAO;IACJgB,IAAI,EAAE,OAAQ;IACdC,OAAO,eACH1B,KAAA,CAAAsB,aAAA,CAAClB,UAAU;MACPQ,IAAI,EAAEG,MAAM,gBAAGf,KAAA,CAAAsB,aAAA,CAACd,gBAAgB,MAAE,CAAC,gBAAGR,KAAA,CAAAsB,aAAA,CAACf,cAAc,MAAE,CAAE;MACzD,gBAAa,SAAS;MACtBoB,IAAI,EAAC,IAAI;MACTC,OAAO,EAAE,OAAQ;MACjBC,OAAO,EAAEhB;IAAa,CACzB,CACJ;IACDiB,OAAO,EAAEf,MAAM,GAAG,gBAAgB,GAAG;EAAoB,CAC5D,CACA,CAER,CACJ,CAAC,eACNf,KAAA,CAAAsB,aAAA;IAAKE,SAAS,EAAE;EAAc,gBAC1BxB,KAAA,CAAAsB,aAAA,CAACnB,SAAS;IAACqB,SAAS,EAAE;EAAQ,CAAE,CAC/B,CACP,CAAC;AAEX,CAAC;AAED,SAASd,aAAa","ignoreList":[]}

package/Sidebar/components/SidebarIcon.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type IconProps } from "../../Icon";
+import { type IconProps } from "../../Icon/index.js";
 interface SidebarIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
 }

package/Sidebar/components/SidebarIcon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "../../Icon";
+import { Icon } from "../../Icon/index.js";
 import { makeDecoratable } from "@webiny/react-composition";
 const SidebarIconBase = ({
   element,

package/Sidebar/components/SidebarIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","makeDecoratable","SidebarIconBase","element","props","createElement","Object","assign","icon","size","SidebarIcon"],"sources":["SidebarIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\ninterface SidebarIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n}\n\nconst SidebarIconBase = ({ element, ...props }: SidebarIconProps) => {\n    return <Icon icon={element} size={\"lg\"} {...props} />;\n};\n\nconst SidebarIcon = makeDecoratable(\"SidebarIcon\", SidebarIconBase);\n\nexport { SidebarIcon, type SidebarIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,eAAe,QAAQ,2BAA2B;AAM3D,MAAMC,eAAe,GAAGA,CAAC;EAAEC,OAAO;EAAE,GAAGC;AAAwB,CAAC,KAAK;EACjE,oBAAOL,KAAA,CAAAM,aAAA,CAACL,IAAI,EAAAM,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAEL,OAAQ;IAACM,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AACzD,CAAC;AAED,MAAMM,WAAW,GAAGT,eAAe,CAAC,aAAa,EAAEC,eAAe,CAAC;AAEnE,SAASQ,WAAW","ignoreList":[]}
+{"version":3,"names":["React","Icon","makeDecoratable","SidebarIconBase","element","props","createElement","Object","assign","icon","size","SidebarIcon"],"sources":["SidebarIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\ninterface SidebarIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n}\n\nconst SidebarIconBase = ({ element, ...props }: SidebarIconProps) => {\n    return <Icon icon={element} size={\"lg\"} {...props} />;\n};\n\nconst SidebarIcon = makeDecoratable(\"SidebarIcon\", SidebarIconBase);\n\nexport { SidebarIcon, type SidebarIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,eAAe,QAAQ,2BAA2B;AAM3D,MAAMC,eAAe,GAAGA,CAAC;EAAEC,OAAO;EAAE,GAAGC;AAAwB,CAAC,KAAK;EACjE,oBAAOL,KAAA,CAAAM,aAAA,CAACL,IAAI,EAAAM,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAEL,OAAQ;IAACM,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AACzD,CAAC;AAED,MAAMM,WAAW,GAAGT,eAAe,CAAC,aAAa,EAAEC,eAAe,CAAC;AAEnE,SAASQ,WAAW","ignoreList":[]}

package/Sidebar/components/SidebarProvider.d.ts

@@ -1,4 +1,12 @@
 import React from "react";
+type PinnedItemData = {
+    id: string;
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    to?: string;
+    onClick?: React.MouseEventHandler;
+    active?: boolean;
+};
 type SidebarContext = {
     state: "expanded" | "collapsed";
     expanded: boolean;
@@ -10,12 +18,26 @@ type SidebarContext = {
     togglePinned: () => void;
     toggleSectionExpanded: (sectionId: string) => void;
     isSectionExpanded: (sectionId: string) => boolean;
+    pinnedItems: string[];
+    toggleItemPinned: (itemId: string) => void;
+    isItemPinned: (itemId: string) => boolean;
+    registerPinnedItem: (data: PinnedItemData) => void;
+    unregisterPinnedItem: (itemId: string) => void;
+    getPinnedItemsData: () => PinnedItemData[];
 };
 declare const SidebarContext: React.Context<SidebarContext | null>;
 declare function useSidebar(): SidebarContext;
-type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement>;
+type SidebarCachedState = {
+    pinned: boolean;
+    expandedSections: string[];
+    pinnedItems: string[];
+};
+type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement> & {
+    state?: SidebarCachedState;
+    onChangeState?: (state: SidebarCachedState) => void;
+};
 declare const SidebarProvider: {
-    ({ className, children, ...props }: SidebarProviderProps): React.JSX.Element;
+    ({ className, children, state: cachedState, onChangeState, ...props }: SidebarProviderProps): React.JSX.Element;
     displayName: string;
 };
-export { SidebarProvider, useSidebar };
+export { SidebarProvider, useSidebar, type PinnedItemData };

package/Sidebar/components/SidebarProvider.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { cn } from "../../utils";
-import { SIDEBAR_TRANSITION_DURATION } from "./constants";
-import { SidebarCache } from "./SidebarCache";
+import { cn } from "../../utils.js";
+import { SIDEBAR_TRANSITION_DURATION } from "./constants.js";
 const SidebarContext = /*#__PURE__*/React.createContext(null);
 function useSidebar() {
   const context = React.useContext(SidebarContext);
@@ -10,34 +9,55 @@ function useSidebar() {
   }
   return context;
 }
-const createInitialSidebarState = () => {
-  const {
-    pinned,
-    expandedSections
-  } = SidebarCache.get();
+const createInitialSidebarState = state => {
+  const pinned = state?.pinned ?? false;
+  const expandedSections = state?.expandedSections ?? [];
+  const pinnedItems = state?.pinnedItems ?? [];
   return {
     expanded: pinned,
     // If pinned, we want the sidebar to be open by default.
     pinned,
     expandedSections,
+    pinnedItems,
     transition: null
   };
 };
 const SidebarProvider = ({
   className,
   children,
+  state: cachedState,
+  onChangeState,
   ...props
 }) => {
-  const [sidebarState, setSidebarState] = React.useState(createInitialSidebarState);
+  const [sidebarState, setSidebarState] = React.useState(() => createInitialSidebarState(cachedState));
+  const [pinnedItemsData, setPinnedItemsData] = React.useState(new Map());
 
   // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
   const timeoutRef = React.useRef(null);
+  const isInitialMount = React.useRef(true);
   const {
     expanded,
     transition,
     pinned,
-    expandedSections
+    expandedSections,
+    pinnedItems
   } = sidebarState;
+
+  // Sync state changes to parent via useEffect
+  React.useEffect(() => {
+    // Skip the initial mount to avoid unnecessary state sync
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    if (onChangeState) {
+      onChangeState({
+        pinned,
+        expandedSections,
+        pinnedItems
+      });
+    }
+  }, [pinned, expandedSections, pinnedItems, onChangeState]);
   const setExpanded = React.useCallback(value => {
     const newValue = typeof value === "function" ? value(expanded) : value;
     setSidebarState(state => ({
@@ -62,10 +82,6 @@ const SidebarProvider = ({
       ...state,
       pinned: newValue
     }));
-    SidebarCache.set({
-      pinned: newValue,
-      expandedSections
-    });
   }, [pinned]);
   const toggleExpanded = React.useCallback(() => {
     return setExpanded(prev => !prev);
@@ -77,10 +93,6 @@ const SidebarProvider = ({
   const toggleSectionExpanded = React.useCallback(sectionId => {
     setSidebarState(state => {
       const expandedSections = state.expandedSections.includes(sectionId) ? state.expandedSections.filter(id => id !== sectionId) : [...state.expandedSections, sectionId];
-      SidebarCache.set({
-        pinned: state.pinned,
-        expandedSections
-      });
       return {
         ...state,
         expandedSections
@@ -90,6 +102,36 @@ const SidebarProvider = ({
   const isSectionExpanded = React.useCallback(sectionId => {
     return expandedSections.includes(sectionId);
   }, [expandedSections]);
+  const toggleItemPinned = React.useCallback(itemId => {
+    setSidebarState(state => {
+      const newPinnedItems = state.pinnedItems.includes(itemId) ? state.pinnedItems.filter(id => id !== itemId) : [...state.pinnedItems, itemId];
+      return {
+        ...state,
+        pinnedItems: newPinnedItems
+      };
+    });
+  }, [setSidebarState]);
+  const isItemPinned = React.useCallback(itemId => {
+    return pinnedItems.includes(itemId);
+  }, [pinnedItems]);
+  const registerPinnedItem = React.useCallback(data => {
+    setPinnedItemsData(prev => {
+      const newMap = new Map(prev);
+      newMap.set(data.id, data);
+      return newMap;
+    });
+  }, []);
+  const unregisterPinnedItem = React.useCallback(itemId => {
+    setPinnedItemsData(prev => {
+      const newMap = new Map(prev);
+      newMap.delete(itemId);
+      return newMap;
+    });
+  }, []);
+  const getPinnedItemsData = React.useCallback(() => {
+    // Sort by the order in pinnedItems array to maintain consistent ordering
+    return pinnedItems.map(id => pinnedItemsData.get(id)).filter(item => item !== undefined);
+  }, [pinnedItemsData, pinnedItems]);
 
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
@@ -105,14 +147,20 @@ const SidebarProvider = ({
     toggleSectionExpanded,
     setPinned,
     togglePinned,
-    isSectionExpanded
-  }), [state, transition, expanded, expandedSections, pinned, setExpanded, setPinned, toggleExpanded, togglePinned]);
+    isSectionExpanded,
+    pinnedItems,
+    toggleItemPinned,
+    isItemPinned,
+    registerPinnedItem,
+    unregisterPinnedItem,
+    getPinnedItemsData
+  }), [state, transition, expanded, expandedSections, pinned, setExpanded, setPinned, toggleExpanded, togglePinned, pinnedItems, toggleItemPinned, isItemPinned, registerPinnedItem, unregisterPinnedItem, getPinnedItemsData]);
   return /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("div", Object.assign({
     "data-sidebar": "provider"
   }, props, {
-    className: cn("wby-group/sidebar-wrapper wby-flex wby-min-h-svh wby-w-full", className)
+    className: cn("group/sidebar-wrapper flex min-h-svh w-full", className)
   }), children));
 };
 SidebarProvider.displayName = "SidebarProvider";

package/Sidebar/components/SidebarProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","SIDEBAR_TRANSITION_DURATION","SidebarCache","SidebarContext","createContext","useSidebar","context","useContext","Error","createInitialSidebarState","pinned","expandedSections","get","expanded","transition","SidebarProvider","className","children","props","sidebarState","setSidebarState","useState","timeoutRef","useRef","setExpanded","useCallback","value","newValue","state","current","window","clearTimeout","setTimeout","setPinned","set","toggleExpanded","prev","togglePinned","toggleSectionExpanded","sectionId","includes","filter","id","isSectionExpanded","contextValue","useMemo","createElement","Provider","Object","assign","displayName"],"sources":["SidebarProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils\";\nimport { SIDEBAR_TRANSITION_DURATION } from \"./constants\";\nimport { SidebarCache } from \"./SidebarCache\";\n\ntype SidebarContext = {\n    state: \"expanded\" | \"collapsed\";\n    expanded: boolean;\n    expandedSections: string[];\n    pinned: boolean;\n    transition: null | \"expanding\" | \"collapsing\";\n    setExpanded: (expanded: boolean) => void;\n    toggleExpanded: () => void;\n    togglePinned: () => void;\n    toggleSectionExpanded: (sectionId: string) => void;\n    isSectionExpanded: (sectionId: string) => boolean;\n};\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null);\n\nfunction useSidebar() {\n    const context = React.useContext(SidebarContext);\n    if (!context) {\n        throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n    }\n\n    return context;\n}\n\ntype SidebarProviderProps = React.HTMLAttributes<HTMLDivElement>;\n\ninterface SidebarState {\n    expanded: boolean;\n    transition: null | \"expanding\" | \"collapsing\";\n    pinned: boolean;\n    expandedSections: string[];\n}\n\nconst createInitialSidebarState = (): SidebarState => {\n    const { pinned, expandedSections } = SidebarCache.get();\n    return {\n        expanded: pinned, // If pinned, we want the sidebar to be open by default.\n        pinned,\n        expandedSections,\n        transition: null\n    };\n};\n\nconst SidebarProvider = ({ className, children, ...props }: SidebarProviderProps) => {\n    const [sidebarState, setSidebarState] = React.useState<SidebarState>(createInitialSidebarState);\n\n    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n    const timeoutRef = React.useRef<number | null>(null);\n\n    const { expanded, transition, pinned, expandedSections } = sidebarState;\n\n    const setExpanded = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const newValue = typeof value === \"function\" ? value(expanded) : value;\n            setSidebarState(state => ({\n                ...state,\n                expanded: newValue,\n                transition: newValue ? \"expanding\" : \"collapsing\"\n            }));\n\n            if (timeoutRef.current) {\n                window.clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            timeoutRef.current = window.setTimeout(() => {\n                setSidebarState(state => ({\n                    ...state,\n                    transition: null\n                }));\n            }, SIDEBAR_TRANSITION_DURATION);\n        },\n        [expanded]\n    );\n\n    const setPinned = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const newValue = typeof value === \"function\" ? value(pinned) : value;\n            setSidebarState(state => ({\n                ...state,\n                pinned: newValue\n            }));\n\n            SidebarCache.set({ pinned: newValue, expandedSections });\n        },\n        [pinned]\n    );\n\n    const toggleExpanded = React.useCallback(() => {\n        return setExpanded(prev => !prev);\n    }, [setExpanded]); // Helper to toggle the sidebar.\n\n    const togglePinned = React.useCallback(() => {\n        return setPinned(prev => !prev);\n    }, [setPinned]);\n\n    const toggleSectionExpanded = React.useCallback(\n        (sectionId: string) => {\n            setSidebarState(state => {\n                const expandedSections = state.expandedSections.includes(sectionId)\n                    ? state.expandedSections.filter(id => id !== sectionId)\n                    : [...state.expandedSections, sectionId];\n\n                SidebarCache.set({ pinned: state.pinned, expandedSections });\n\n                return {\n                    ...state,\n                    expandedSections\n                };\n            });\n        },\n        [setSidebarState]\n    );\n\n    const isSectionExpanded = React.useCallback(\n        (sectionId: string) => {\n            return expandedSections.includes(sectionId);\n        },\n        [expandedSections]\n    );\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = expanded ? \"expanded\" : \"collapsed\";\n\n    const contextValue = React.useMemo<SidebarContext>(\n        () => ({\n            state,\n            transition,\n            expanded,\n            expandedSections,\n            pinned,\n            setExpanded,\n            toggleExpanded,\n            toggleSectionExpanded,\n            setPinned,\n            togglePinned,\n            isSectionExpanded\n        }),\n        [\n            state,\n            transition,\n            expanded,\n            expandedSections,\n            pinned,\n            setExpanded,\n            setPinned,\n            toggleExpanded,\n            togglePinned\n        ]\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                data-sidebar={\"provider\"}\n                {...props}\n                className={cn(\n                    \"wby-group/sidebar-wrapper wby-flex wby-min-h-svh wby-w-full\",\n                    className\n                )}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n};\nSidebarProvider.displayName = \"SidebarProvider\";\n\nexport { SidebarProvider, useSidebar };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cn","SIDEBAR_TRANSITION_DURATION","SidebarContext","createContext","useSidebar","context","useContext","Error","createInitialSidebarState","state","pinned","expandedSections","pinnedItems","expanded","transition","SidebarProvider","className","children","cachedState","onChangeState","props","sidebarState","setSidebarState","useState","pinnedItemsData","setPinnedItemsData","Map","timeoutRef","useRef","isInitialMount","useEffect","current","setExpanded","useCallback","value","newValue","window","clearTimeout","setTimeout","setPinned","toggleExpanded","prev","togglePinned","toggleSectionExpanded","sectionId","includes","filter","id","isSectionExpanded","toggleItemPinned","itemId","newPinnedItems","isItemPinned","registerPinnedItem","data","newMap","set","unregisterPinnedItem","delete","getPinnedItemsData","map","get","item","undefined","contextValue","useMemo","createElement","Provider","Object","assign","displayName"],"sources":["SidebarProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { SIDEBAR_TRANSITION_DURATION } from \"./constants.js\";\n\ntype PinnedItemData = {\n    id: string;\n    text: React.ReactNode;\n    icon?: React.ReactNode;\n    to?: string;\n    onClick?: React.MouseEventHandler;\n    active?: boolean;\n};\n\ntype SidebarContext = {\n    state: \"expanded\" | \"collapsed\";\n    expanded: boolean;\n    expandedSections: string[];\n    pinned: boolean;\n    transition: null | \"expanding\" | \"collapsing\";\n    setExpanded: (expanded: boolean) => void;\n    toggleExpanded: () => void;\n    togglePinned: () => void;\n    toggleSectionExpanded: (sectionId: string) => void;\n    isSectionExpanded: (sectionId: string) => boolean;\n    pinnedItems: string[];\n    toggleItemPinned: (itemId: string) => void;\n    isItemPinned: (itemId: string) => boolean;\n    registerPinnedItem: (data: PinnedItemData) => void;\n    unregisterPinnedItem: (itemId: string) => void;\n    getPinnedItemsData: () => PinnedItemData[];\n};\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null);\n\nfunction useSidebar() {\n    const context = React.useContext(SidebarContext);\n    if (!context) {\n        throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n    }\n\n    return context;\n}\n\ntype SidebarCachedState = {\n    pinned: boolean;\n    expandedSections: string[];\n    pinnedItems: string[];\n};\n\ntype SidebarProviderProps = React.HTMLAttributes<HTMLDivElement> & {\n    state?: SidebarCachedState;\n    onChangeState?: (state: SidebarCachedState) => void;\n};\n\ninterface SidebarState {\n    expanded: boolean;\n    transition: null | \"expanding\" | \"collapsing\";\n    pinned: boolean;\n    expandedSections: string[];\n    pinnedItems: string[];\n}\n\nconst createInitialSidebarState = (state?: SidebarCachedState): SidebarState => {\n    const pinned = state?.pinned ?? false;\n    const expandedSections = state?.expandedSections ?? [];\n    const pinnedItems = state?.pinnedItems ?? [];\n    return {\n        expanded: pinned, // If pinned, we want the sidebar to be open by default.\n        pinned,\n        expandedSections,\n        pinnedItems,\n        transition: null\n    };\n};\n\nconst SidebarProvider = ({\n    className,\n    children,\n    state: cachedState,\n    onChangeState,\n    ...props\n}: SidebarProviderProps) => {\n    const [sidebarState, setSidebarState] = React.useState<SidebarState>(() =>\n        createInitialSidebarState(cachedState)\n    );\n    const [pinnedItemsData, setPinnedItemsData] = React.useState<Map<string, PinnedItemData>>(\n        new Map()\n    );\n\n    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n    const timeoutRef = React.useRef<number | null>(null);\n    const isInitialMount = React.useRef(true);\n\n    const { expanded, transition, pinned, expandedSections, pinnedItems } = sidebarState;\n\n    // Sync state changes to parent via useEffect\n    React.useEffect(() => {\n        // Skip the initial mount to avoid unnecessary state sync\n        if (isInitialMount.current) {\n            isInitialMount.current = false;\n            return;\n        }\n\n        if (onChangeState) {\n            onChangeState({\n                pinned,\n                expandedSections,\n                pinnedItems\n            });\n        }\n    }, [pinned, expandedSections, pinnedItems, onChangeState]);\n\n    const setExpanded = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const newValue = typeof value === \"function\" ? value(expanded) : value;\n            setSidebarState(state => ({\n                ...state,\n                expanded: newValue,\n                transition: newValue ? \"expanding\" : \"collapsing\"\n            }));\n\n            if (timeoutRef.current) {\n                window.clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            timeoutRef.current = window.setTimeout(() => {\n                setSidebarState(state => ({\n                    ...state,\n                    transition: null\n                }));\n            }, SIDEBAR_TRANSITION_DURATION);\n        },\n        [expanded]\n    );\n\n    const setPinned = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const newValue = typeof value === \"function\" ? value(pinned) : value;\n            setSidebarState(state => ({\n                ...state,\n                pinned: newValue\n            }));\n        },\n        [pinned]\n    );\n\n    const toggleExpanded = React.useCallback(() => {\n        return setExpanded(prev => !prev);\n    }, [setExpanded]); // Helper to toggle the sidebar.\n\n    const togglePinned = React.useCallback(() => {\n        return setPinned(prev => !prev);\n    }, [setPinned]);\n\n    const toggleSectionExpanded = React.useCallback(\n        (sectionId: string) => {\n            setSidebarState(state => {\n                const expandedSections = state.expandedSections.includes(sectionId)\n                    ? state.expandedSections.filter(id => id !== sectionId)\n                    : [...state.expandedSections, sectionId];\n\n                return {\n                    ...state,\n                    expandedSections\n                };\n            });\n        },\n        [setSidebarState]\n    );\n\n    const isSectionExpanded = React.useCallback(\n        (sectionId: string) => {\n            return expandedSections.includes(sectionId);\n        },\n        [expandedSections]\n    );\n\n    const toggleItemPinned = React.useCallback(\n        (itemId: string) => {\n            setSidebarState(state => {\n                const newPinnedItems = state.pinnedItems.includes(itemId)\n                    ? state.pinnedItems.filter(id => id !== itemId)\n                    : [...state.pinnedItems, itemId];\n\n                return {\n                    ...state,\n                    pinnedItems: newPinnedItems\n                };\n            });\n        },\n        [setSidebarState]\n    );\n\n    const isItemPinned = React.useCallback(\n        (itemId: string) => {\n            return pinnedItems.includes(itemId);\n        },\n        [pinnedItems]\n    );\n\n    const registerPinnedItem = React.useCallback((data: PinnedItemData) => {\n        setPinnedItemsData(prev => {\n            const newMap = new Map(prev);\n            newMap.set(data.id, data);\n            return newMap;\n        });\n    }, []);\n\n    const unregisterPinnedItem = React.useCallback((itemId: string) => {\n        setPinnedItemsData(prev => {\n            const newMap = new Map(prev);\n            newMap.delete(itemId);\n            return newMap;\n        });\n    }, []);\n\n    const getPinnedItemsData = React.useCallback(() => {\n        // Sort by the order in pinnedItems array to maintain consistent ordering\n        return pinnedItems\n            .map(id => pinnedItemsData.get(id))\n            .filter((item): item is PinnedItemData => item !== undefined);\n    }, [pinnedItemsData, pinnedItems]);\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = expanded ? \"expanded\" : \"collapsed\";\n\n    const contextValue = React.useMemo<SidebarContext>(\n        () => ({\n            state,\n            transition,\n            expanded,\n            expandedSections,\n            pinned,\n            setExpanded,\n            toggleExpanded,\n            toggleSectionExpanded,\n            setPinned,\n            togglePinned,\n            isSectionExpanded,\n            pinnedItems,\n            toggleItemPinned,\n            isItemPinned,\n            registerPinnedItem,\n            unregisterPinnedItem,\n            getPinnedItemsData\n        }),\n        [\n            state,\n            transition,\n            expanded,\n            expandedSections,\n            pinned,\n            setExpanded,\n            setPinned,\n            toggleExpanded,\n            togglePinned,\n            pinnedItems,\n            toggleItemPinned,\n            isItemPinned,\n            registerPinnedItem,\n            unregisterPinnedItem,\n            getPinnedItemsData\n        ]\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                data-sidebar={\"provider\"}\n                {...props}\n                className={cn(\"group/sidebar-wrapper flex min-h-svh w-full\", className)}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n};\nSidebarProvider.displayName = \"SidebarProvider\";\n\nexport { SidebarProvider, useSidebar, type PinnedItemData };\n"],"mappings":"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","ignoreList":[]}

package/Sidebar/components/SidebarRoot.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useRef } from "react";
-import { cn, cva } from "../../utils";
-import { useSidebar } from "./SidebarProvider";
-const variants = cva("wby-group wby-peer wby-block wby-border-r-sm wby-border-neutral-dimmed wby-bg-neutral-light", {
+import { cn, cva } from "../../utils.js";
+import { useSidebar } from "./SidebarProvider.js";
+const variants = cva("group peer block border-r-sm border-neutral-dimmed bg-neutral-light", {
   variants: {
     pinned: {
-      false: "wby-fixed wby-top-0 wby-z-10 "
+      false: "fixed top-0 z-sidebar "
     }
   }
 });
@@ -17,7 +17,8 @@ const SidebarRoot = ({
   const {
     state,
     setExpanded,
-    pinned
+    pinned,
+    expanded
   } = useSidebar();
   const elementRef = useRef(null);
 
@@ -32,18 +33,29 @@ const SidebarRoot = ({
       window.clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
-    setExpanded(true);
-  }, [pinned, setExpanded]);
+
+    // Add delay before opening to prevent accidental openings
+    timeoutRef.current = window.setTimeout(() => {
+      // Only set expanded if it's not already expanded
+      if (!expanded) {
+        setExpanded(true);
+      }
+    }, 300);
+  }, [pinned, setExpanded, expanded]);
   const onMouseLeave = useCallback(() => {
     // If the sidebar is pinned, we don't want to close the sidebar on mouse leave.
     if (pinned) {
       return;
     }
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
 
     // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
     timeoutRef.current = window.setTimeout(() => {
       setExpanded(false);
-    }, 50);
+    }, 300);
   }, [pinned, setExpanded]);
   return /*#__PURE__*/React.createElement("div", {
     onMouseEnter: onMouseEnter,
@@ -56,13 +68,16 @@ const SidebarRoot = ({
       pinned
     })
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-duration-175 wby-relative wby-h-svh wby-w-sidebar-expanded wby-bg-transparent wby-transition-[width] wby-ease-linear wby-duration-175", "group-data-[side=right]:wby-rotate-180", "group-data-[state=collapsed]:wby-w-sidebar-collapsed")
+    className: cn("duration-175 relative h-svh w-sidebar-expanded bg-transparent transition-[width] ease-linear duration-175", "group-data-[side=right]:rotate-180", "group-data-[state=collapsed]:w-sidebar-collapsed")
   }), /*#__PURE__*/React.createElement("div", Object.assign({
-    className: cn("wby-duration-175 wby-fixed wby-inset-y-0 wby-z-10 wby-h-svh wby-w-sidebar-expanded wby-transition-[width] wby-ease-linear md:wby-flex", side === "left" ? "wby-left-0" : "wby-right-0", "group-data-[state=collapsed]:wby-w-sidebar-collapsed group-data-[side=left]:wby-border-r-px group-data-[side=right]:wby-border-l-px", className)
+    className: cn("duration-175 fixed inset-y-0 z-sidebar h-svh w-sidebar-expanded transition-[width] ease-linear md:flex", side === "left" ? "left-0" : "right-0", "group-data-[state=collapsed]:w-sidebar-collapsed group-data-[side=left]:border-r-px group-data-[side=right]:border-l-px", className)
   }, props), /*#__PURE__*/React.createElement("div", {
     "data-sidebar": "sidebar",
-    className: "wby-flex wby-h-full wby-w-full wby-py-xs wby-flex-col"
-  }, children)));
+    className: "flex h-full w-full py-xs flex-col"
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    "data-sidebar": "extra-hover-area",
+    className: "absolute top-0 left-[theme(spacing.sidebar-collapsed)] h-full w-sm hidden group-data-[state=collapsed]:block"
+  }));
 };
 export { SidebarRoot };
 

package/Sidebar/components/SidebarRoot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useRef","cn","cva","useSidebar","variants","pinned","false","SidebarRoot","side","className","children","props","state","setExpanded","elementRef","timeoutRef","onMouseEnter","current","window","clearTimeout","onMouseLeave","setTimeout","createElement","ref","Object","assign"],"sources":["SidebarRoot.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { cn, cva } from \"~/utils\";\nimport { useSidebar } from \"./SidebarProvider\";\n\ninterface SidebarRootProps extends React.ComponentProps<\"div\"> {\n    side?: \"left\" | \"right\";\n}\n\nconst variants = cva(\n    \"wby-group wby-peer wby-block wby-border-r-sm wby-border-neutral-dimmed wby-bg-neutral-light\",\n    {\n        variants: {\n            pinned: {\n                false: \"wby-fixed wby-top-0 wby-z-10 \"\n            }\n        }\n    }\n);\n\nconst SidebarRoot = ({ side = \"left\", className, children, ...props }: SidebarRootProps) => {\n    const { state, setExpanded, pinned } = useSidebar();\n\n    const elementRef = useRef<HTMLDivElement>(null);\n\n    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n    const timeoutRef = useRef<number | null>(null);\n\n    const onMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n        // If the sidebar is pinned, we don't want to open the sidebar on mouse enter.\n        if (pinned) {\n            return;\n        }\n\n        if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\n        }\n\n        setExpanded(true);\n    }, [pinned, setExpanded]);\n\n    const onMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n        // If the sidebar is pinned, we don't want to close the sidebar on mouse leave.\n        if (pinned) {\n            return;\n        }\n\n        // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n        timeoutRef.current = window.setTimeout(() => {\n            setExpanded(false);\n        }, 50);\n    }, [pinned, setExpanded]);\n\n    return (\n        <div\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            ref={elementRef}\n            data-state={state}\n            data-sidebar={\"root\"}\n            data-side={side}\n            className={variants({ pinned })}\n        >\n            <div\n                className={cn(\n                    \"wby-duration-175 wby-relative wby-h-svh wby-w-sidebar-expanded wby-bg-transparent wby-transition-[width] wby-ease-linear wby-duration-175\",\n                    \"group-data-[side=right]:wby-rotate-180\",\n                    \"group-data-[state=collapsed]:wby-w-sidebar-collapsed\"\n                )}\n            />\n            <div\n                className={cn(\n                    \"wby-duration-175 wby-fixed wby-inset-y-0 wby-z-10 wby-h-svh wby-w-sidebar-expanded wby-transition-[width] wby-ease-linear md:wby-flex\",\n                    side === \"left\" ? \"wby-left-0\" : \"wby-right-0\",\n                    \"group-data-[state=collapsed]:wby-w-sidebar-collapsed group-data-[side=left]:wby-border-r-px group-data-[side=right]:wby-border-l-px\",\n                    className\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    className=\"wby-flex wby-h-full wby-w-full wby-py-xs wby-flex-col\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport { SidebarRoot, type SidebarRootProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAClD,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,UAAU;AAMnB,MAAMC,QAAQ,GAAGF,GAAG,CAChB,6FAA6F,EAC7F;EACIE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CACJ,CAAC;AAED,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI,GAAG,MAAM;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAwB,CAAC,KAAK;EACxF,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAER;EAAO,CAAC,GAAGF,UAAU,CAAC,CAAC;EAEnD,MAAMW,UAAU,GAAGd,MAAM,CAAiB,IAAI,CAAC;;EAE/C;EACA,MAAMe,UAAU,GAAGf,MAAM,CAAgB,IAAI,CAAC;EAE9C,MAAMgB,YAAY,GAAGjB,WAAW,CAA0C,MAAM;IAC5E;IACA,IAAIM,MAAM,EAAE;MACR;IACJ;IAEA,IAAIU,UAAU,CAACE,OAAO,EAAE;MACpBC,MAAM,CAACC,YAAY,CAACJ,UAAU,CAACE,OAAO,CAAC;MACvCF,UAAU,CAACE,OAAO,GAAG,IAAI;IAC7B;IAEAJ,WAAW,CAAC,IAAI,CAAC;EACrB,CAAC,EAAE,CAACR,MAAM,EAAEQ,WAAW,CAAC,CAAC;EAEzB,MAAMO,YAAY,GAAGrB,WAAW,CAA0C,MAAM;IAC5E;IACA,IAAIM,MAAM,EAAE;MACR;IACJ;;IAEA;IACAU,UAAU,CAACE,OAAO,GAAGC,MAAM,CAACG,UAAU,CAAC,MAAM;MACzCR,WAAW,CAAC,KAAK,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAACR,MAAM,EAAEQ,WAAW,CAAC,CAAC;EAEzB,oBACIf,KAAA,CAAAwB,aAAA;IACIN,YAAY,EAAEA,YAAa;IAC3BI,YAAY,EAAEA,YAAa;IAC3BG,GAAG,EAAET,UAAW;IAChB,cAAYF,KAAM;IAClB,gBAAc,MAAO;IACrB,aAAWJ,IAAK;IAChBC,SAAS,EAAEL,QAAQ,CAAC;MAAEC;IAAO,CAAC;EAAE,gBAEhCP,KAAA,CAAAwB,aAAA;IACIb,SAAS,EAAER,EAAE,CACT,2IAA2I,EAC3I,wCAAwC,EACxC,sDACJ;EAAE,CACL,CAAC,eACFH,KAAA,CAAAwB,aAAA,QAAAE,MAAA,CAAAC,MAAA;IACIhB,SAAS,EAAER,EAAE,CACT,uIAAuI,EACvIO,IAAI,KAAK,MAAM,GAAG,YAAY,GAAG,aAAa,EAC9C,qIAAqI,EACrIC,SACJ;EAAE,GACEE,KAAK,gBAETb,KAAA,CAAAwB,aAAA;IACI,gBAAa,SAAS;IACtBb,SAAS,EAAC;EAAuD,GAEhEC,QACA,CACJ,CACJ,CAAC;AAEd,CAAC;AAED,SAASH,WAAW","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useRef","cn","cva","useSidebar","variants","pinned","false","SidebarRoot","side","className","children","props","state","setExpanded","expanded","elementRef","timeoutRef","onMouseEnter","current","window","clearTimeout","setTimeout","onMouseLeave","createElement","ref","Object","assign"],"sources":["SidebarRoot.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\ninterface SidebarRootProps extends React.ComponentProps<\"div\"> {\n    side?: \"left\" | \"right\";\n}\n\nconst variants = cva(\"group peer block border-r-sm border-neutral-dimmed bg-neutral-light\", {\n    variants: {\n        pinned: {\n            false: \"fixed top-0 z-sidebar \"\n        }\n    }\n});\n\nconst SidebarRoot = ({ side = \"left\", className, children, ...props }: SidebarRootProps) => {\n    const { state, setExpanded, pinned, expanded } = useSidebar();\n\n    const elementRef = useRef<HTMLDivElement>(null);\n\n    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n    const timeoutRef = useRef<number | null>(null);\n\n    const onMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n        // If the sidebar is pinned, we don't want to open the sidebar on mouse enter.\n        if (pinned) {\n            return;\n        }\n\n        if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\n        }\n\n        // Add delay before opening to prevent accidental openings\n        timeoutRef.current = window.setTimeout(() => {\n            // Only set expanded if it's not already expanded\n            if (!expanded) {\n                setExpanded(true);\n            }\n        }, 300);\n    }, [pinned, setExpanded, expanded]);\n\n    const onMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n        // If the sidebar is pinned, we don't want to close the sidebar on mouse leave.\n        if (pinned) {\n            return;\n        }\n\n        if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\n        }\n\n        // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n        timeoutRef.current = window.setTimeout(() => {\n            setExpanded(false);\n        }, 300);\n    }, [pinned, setExpanded]);\n\n    return (\n        <div\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            ref={elementRef}\n            data-state={state}\n            data-sidebar={\"root\"}\n            data-side={side}\n            className={variants({ pinned })}\n        >\n            <div\n                className={cn(\n                    \"duration-175 relative h-svh w-sidebar-expanded bg-transparent transition-[width] ease-linear duration-175\",\n                    \"group-data-[side=right]:rotate-180\",\n                    \"group-data-[state=collapsed]:w-sidebar-collapsed\"\n                )}\n            />\n            <div\n                className={cn(\n                    \"duration-175 fixed inset-y-0 z-sidebar h-svh w-sidebar-expanded transition-[width] ease-linear md:flex\",\n                    side === \"left\" ? \"left-0\" : \"right-0\",\n                    \"group-data-[state=collapsed]:w-sidebar-collapsed group-data-[side=left]:border-r-px group-data-[side=right]:border-l-px\",\n                    className\n                )}\n                {...props}\n            >\n                <div data-sidebar=\"sidebar\" className=\"flex h-full w-full py-xs flex-col\">\n                    {children}\n                </div>\n            </div>\n\n            <div\n                data-sidebar={\"extra-hover-area\"}\n                className={\n                    \"absolute top-0 left-[theme(spacing.sidebar-collapsed)] h-full w-sm hidden group-data-[state=collapsed]:block\"\n                }\n            />\n        </div>\n    );\n};\n\nexport { SidebarRoot, type SidebarRootProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAClD,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,UAAU;AAMnB,MAAMC,QAAQ,GAAGF,GAAG,CAAC,qEAAqE,EAAE;EACxFE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC;AAEF,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI,GAAG,MAAM;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAwB,CAAC,KAAK;EACxF,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAER,MAAM;IAAES;EAAS,CAAC,GAAGX,UAAU,CAAC,CAAC;EAE7D,MAAMY,UAAU,GAAGf,MAAM,CAAiB,IAAI,CAAC;;EAE/C;EACA,MAAMgB,UAAU,GAAGhB,MAAM,CAAgB,IAAI,CAAC;EAE9C,MAAMiB,YAAY,GAAGlB,WAAW,CAA0C,MAAM;IAC5E;IACA,IAAIM,MAAM,EAAE;MACR;IACJ;IAEA,IAAIW,UAAU,CAACE,OAAO,EAAE;MACpBC,MAAM,CAACC,YAAY,CAACJ,UAAU,CAACE,OAAO,CAAC;MACvCF,UAAU,CAACE,OAAO,GAAG,IAAI;IAC7B;;IAEA;IACAF,UAAU,CAACE,OAAO,GAAGC,MAAM,CAACE,UAAU,CAAC,MAAM;MACzC;MACA,IAAI,CAACP,QAAQ,EAAE;QACXD,WAAW,CAAC,IAAI,CAAC;MACrB;IACJ,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,CAACR,MAAM,EAAEQ,WAAW,EAAEC,QAAQ,CAAC,CAAC;EAEnC,MAAMQ,YAAY,GAAGvB,WAAW,CAA0C,MAAM;IAC5E;IACA,IAAIM,MAAM,EAAE;MACR;IACJ;IAEA,IAAIW,UAAU,CAACE,OAAO,EAAE;MACpBC,MAAM,CAACC,YAAY,CAACJ,UAAU,CAACE,OAAO,CAAC;MACvCF,UAAU,CAACE,OAAO,GAAG,IAAI;IAC7B;;IAEA;IACAF,UAAU,CAACE,OAAO,GAAGC,MAAM,CAACE,UAAU,CAAC,MAAM;MACzCR,WAAW,CAAC,KAAK,CAAC;IACtB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,CAACR,MAAM,EAAEQ,WAAW,CAAC,CAAC;EAEzB,oBACIf,KAAA,CAAAyB,aAAA;IACIN,YAAY,EAAEA,YAAa;IAC3BK,YAAY,EAAEA,YAAa;IAC3BE,GAAG,EAAET,UAAW;IAChB,cAAYH,KAAM;IAClB,gBAAc,MAAO;IACrB,aAAWJ,IAAK;IAChBC,SAAS,EAAEL,QAAQ,CAAC;MAAEC;IAAO,CAAC;EAAE,gBAEhCP,KAAA,CAAAyB,aAAA;IACId,SAAS,EAAER,EAAE,CACT,2GAA2G,EAC3G,oCAAoC,EACpC,kDACJ;EAAE,CACL,CAAC,eACFH,KAAA,CAAAyB,aAAA,QAAAE,MAAA,CAAAC,MAAA;IACIjB,SAAS,EAAER,EAAE,CACT,wGAAwG,EACxGO,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,SAAS,EACtC,yHAAyH,EACzHC,SACJ;EAAE,GACEE,KAAK,gBAETb,KAAA,CAAAyB,aAAA;IAAK,gBAAa,SAAS;IAACd,SAAS,EAAC;EAAmC,GACpEC,QACA,CACJ,CAAC,eAENZ,KAAA,CAAAyB,aAAA;IACI,gBAAc,kBAAmB;IACjCd,SAAS,EACL;EACH,CACJ,CACA,CAAC;AAEd,CAAC;AAED,SAASF,WAAW","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { type SidebarMenuItemGroupProps } from "./SidebarMenuItem";
-import { type SidebarMenuItemIconProps } from "./SidebarMenuItemIcon";
-import { type SidebarMenuItemActionProps } from "./SidebarMenuItemAction";
+import { type SidebarMenuItemGroupProps } from "./SidebarMenuItem.js";
+import { type SidebarMenuItemIconProps } from "../../../Sidebar/components/items/SidebarMenuItemIcon.js";
+import { type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
 declare const SidebarMenuGroup: ((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
     original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
     originalName: string;
@@ -15,31 +15,31 @@ declare const SidebarMenuGroup: ((props: SidebarMenuItemGroupProps) => React.JSX
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
         original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Icon: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element) & {
-        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element;
+    Icon: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element) & {
-            original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element;
+        original: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+            original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element) & {
-            original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
+            original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, ...props }: SidebarMenuItemActionProps) => React.JSX.Element;
+    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
 };
 export { SidebarMenuGroup, type SidebarMenuItemGroupProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps };

package/Sidebar/components/items/SidebarMenuGroup.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { SidebarMenuItem } from "./SidebarMenuItem";
-import { makeDecoratable, withStaticProps } from "../../../utils";
-import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon";
-import { SidebarMenuItemAction } from "./SidebarMenuItemAction";
+import { SidebarMenuItem } from "./SidebarMenuItem.js";
+import { makeDecoratable, withStaticProps } from "../../../utils.js";
+import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon.js";
+import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
 const SidebarMenuGroupBase = props => {
   return /*#__PURE__*/React.createElement(SidebarMenuItem, Object.assign({
     variant: "group-label"

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

@@ -1 +1 @@
-{"version":3,"names":["React","SidebarMenuItem","makeDecoratable","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuGroupBase","props","createElement","Object","assign","variant","DecoratableSidebarMenuGroup","SidebarMenuGroup","Icon","Action"],"sources":["SidebarMenuGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemGroupProps } from \"./SidebarMenuItem\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport {\n    SidebarMenuItemIcon,\n    type SidebarMenuItemIconProps\n} from \"~/Sidebar/components/items/SidebarMenuItemIcon\";\nimport {\n    SidebarMenuItemAction,\n    type SidebarMenuItemActionProps\n} from \"~/Sidebar/components/items/SidebarMenuItemAction\";\n\nconst SidebarMenuGroupBase = (props: SidebarMenuItemGroupProps) => {\n    return <SidebarMenuItem variant={\"group-label\"} {...props} />;\n};\n\nconst DecoratableSidebarMenuGroup = makeDecoratable(\"SidebarMenuGroup\", SidebarMenuGroupBase);\n\nconst SidebarMenuGroup = withStaticProps(DecoratableSidebarMenuGroup, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuGroup,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,eAAe,EAAEC,eAAe;AACzC,SACIC,mBAAmB;AAGvB,SACIC,qBAAqB;AAIzB,MAAMC,oBAAoB,GAAIC,KAAgC,IAAK;EAC/D,oBAAOP,KAAA,CAAAQ,aAAA,CAACP,eAAe,EAAAQ,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE;EAAc,GAAKJ,KAAK,CAAG,CAAC;AACjE,CAAC;AAED,MAAMK,2BAA2B,GAAGV,eAAe,CAAC,kBAAkB,EAAEI,oBAAoB,CAAC;AAE7F,MAAMO,gBAAgB,GAAGV,eAAe,CAACS,2BAA2B,EAAE;EAClEE,IAAI,EAAEV,mBAAmB;EACzBW,MAAM,EAAEV;AACZ,CAAC,CAAC;AAEF,SACIQ,gBAAgB","ignoreList":[]}
+{"version":3,"names":["React","SidebarMenuItem","makeDecoratable","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuGroupBase","props","createElement","Object","assign","variant","DecoratableSidebarMenuGroup","SidebarMenuGroup","Icon","Action"],"sources":["SidebarMenuGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemGroupProps } from \"./SidebarMenuItem.js\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport {\n    SidebarMenuItemIcon,\n    type SidebarMenuItemIconProps\n} from \"~/Sidebar/components/items/SidebarMenuItemIcon.js\";\nimport {\n    SidebarMenuItemAction,\n    type SidebarMenuItemActionProps\n} from \"~/Sidebar/components/items/SidebarMenuItemAction.js\";\n\nconst SidebarMenuGroupBase = (props: SidebarMenuItemGroupProps) => {\n    return <SidebarMenuItem variant={\"group-label\"} {...props} />;\n};\n\nconst DecoratableSidebarMenuGroup = makeDecoratable(\"SidebarMenuGroup\", SidebarMenuGroupBase);\n\nconst SidebarMenuGroup = withStaticProps(DecoratableSidebarMenuGroup, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuGroup,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,eAAe,EAAEC,eAAe;AACzC,SACIC,mBAAmB;AAGvB,SACIC,qBAAqB;AAIzB,MAAMC,oBAAoB,GAAIC,KAAgC,IAAK;EAC/D,oBAAOP,KAAA,CAAAQ,aAAA,CAACP,eAAe,EAAAQ,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE;EAAc,GAAKJ,KAAK,CAAG,CAAC;AACjE,CAAC;AAED,MAAMK,2BAA2B,GAAGV,eAAe,CAAC,kBAAkB,EAAEI,oBAAoB,CAAC;AAE7F,MAAMO,gBAAgB,GAAGV,eAAe,CAACS,2BAA2B,EAAE;EAClEE,IAAI,EAAEV,mBAAmB;EACzBW,MAAM,EAAEV;AACZ,CAAC,CAAC;AAEF,SACIQ,gBAAgB","ignoreList":[]}