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

package/Sidebar/components/SidebarFooter.js

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

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/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":[]}
+{"version":3,"file":"Sidebar/components/SidebarFooter.js","sources":["../../../src/Sidebar/components/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"],"names":["SidebarFooter","children","props","Separator"],"mappings":";;AAGA,MAAMA,gBAAgB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,OAA6C,GACxE,WAAP,GACI,oBAAC;QAAI,gBAAa;QAAU,GAAGA,KAAK;qBAChC,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,WAAW;SAEzBF"}

package/Sidebar/components/SidebarHeader.js

@@ -1,58 +1,52 @@
-import React, { useEffect, useState } from "react";
+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 { ReactComponent } from "@webiny/icons/chrome_reader_mode.svg";
+import { ReactComponent as width_full_svg_ReactComponent } from "@webiny/icons/width_full.svg";
 import { Tooltip } from "../../Tooltip/index.js";
-const SidebarHeader = ({
-  title,
-  icon
-}) => {
-  const {
-    togglePinned,
-    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: "px-xs-plus"
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-sidebar": "header",
-    className: "flex justify-between items-center gap-sm py-xs-plus px-xs overflow-x-hidden"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-x-sm [&_a]:no-underline! [&_a]:text-neutral-primary! truncate"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex shrink-0"
-  }, icon), /*#__PURE__*/React.createElement("span", {
-    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, {
-      icon: pinned ? /*#__PURE__*/React.createElement(UnpinSidebarIcon, null) : /*#__PURE__*/React.createElement(PinSidebarIcon, null),
-      "data-sidebar": "trigger",
-      size: "xs",
-      variant: "ghost",
-      onClick: togglePinned
-    }),
-    content: pinned ? "Unlock sidebar" : "Lock sidebar open"
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "px-sm py-xs"
-  }, /*#__PURE__*/React.createElement(Separator, {
-    className: "mb-px"
-  })));
+const SidebarHeader = ({ title, icon })=>{
+    const { togglePinned, expanded, pinned } = useSidebar();
+    const [showButton, setShowButton] = useState(false);
+    useEffect(()=>{
+        if (expanded) {
+            const timer = setTimeout(()=>{
+                setShowButton(true);
+            }, 100);
+            return ()=>clearTimeout(timer);
+        }
+        setShowButton(false);
+    }, [
+        expanded
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "px-xs-plus"
+    }, /*#__PURE__*/ react.createElement("div", {
+        "data-sidebar": "header",
+        className: "flex justify-between items-center gap-sm py-xs-plus px-xs overflow-x-hidden"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-x-sm [&_a]:no-underline! [&_a]:text-neutral-primary! truncate"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex shrink-0"
+    }, icon), /*#__PURE__*/ react.createElement("span", {
+        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, {
+            icon: pinned ? /*#__PURE__*/ react.createElement(width_full_svg_ReactComponent, null) : /*#__PURE__*/ react.createElement(ReactComponent, null),
+            "data-sidebar": "trigger",
+            size: "xs",
+            variant: "ghost",
+            onClick: togglePinned
+        }),
+        content: pinned ? "Unlock sidebar" : "Lock sidebar open"
+    })))), /*#__PURE__*/ react.createElement("div", {
+        className: "px-sm py-xs"
+    }, /*#__PURE__*/ react.createElement(Separator, {
+        className: "mb-px"
+    })));
 };
 export { SidebarHeader };
 

package/Sidebar/components/SidebarHeader.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"Sidebar/components/SidebarHeader.js","sources":["../../../src/Sidebar/components/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"],"names":["SidebarHeader","title","icon","togglePinned","expanded","pinned","useSidebar","showButton","setShowButton","useState","useEffect","timer","setTimeout","clearTimeout","Tooltip","IconButton","UnpinSidebarIcon","PinSidebarIcon","Separator"],"mappings":";;;;;;;AAaA,MAAMA,gBAAgB,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAsB;IACtD,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGC;IAC3C,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;IAE7CC,UAAU;QACN,IAAIN,UAAU;YACV,MAAMO,QAAQC,WAAW;gBACrBJ,cAAc;YAClB,GAAG;YACH,OAAO,IAAMK,aAAaF;QAC9B;QACAH,cAAc;IAElB,GAAG;QAACJ;KAAS;IAEb,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,gBAAa;QACb,WACI;qBAGJ,oBAAC;QACG,WACI;qBAGJ,oBAAC;QAAI,WAAW;OAAkBF,OAAAA,WAAAA,GAElC,oBAAC;QAAK,WAAW;OAAmCD,SAGvDM,cAAc,WAAdA,GACG,oBAAC;QAAI,WAAW;qBACZ,oBAACO,SAAOA;QACJ,MAAM;QACN,uBACI,oBAACC,YAAUA;YACP,MAAMV,SAAS,WAATA,GAAS,oBAACW,+BAAgBA,QAAAA,WAAAA,GAAM,oBAACC,gBAAcA;YACrD,gBAAa;YACb,MAAK;YACL,SAAS;YACT,SAASd;;QAGjB,SAASE,SAAS,mBAAmB;yBAMzD,oBAAC;QAAI,WAAW;qBACZ,oBAACa,WAASA;QAAC,WAAW;;AAItC"}

package/Sidebar/components/SidebarIcon.js

@@ -1,15 +1,11 @@
-import React from "react";
+import react from "react";
 import { Icon } from "../../Icon/index.js";
 import { makeDecoratable } from "@webiny/react-composition";
-const SidebarIconBase = ({
-  element,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(Icon, Object.assign({
-    icon: element,
-    size: "lg"
-  }, props));
-};
+const SidebarIconBase = ({ element, ...props })=>/*#__PURE__*/ react.createElement(Icon, {
+        icon: element,
+        size: "lg",
+        ...props
+    });
 const SidebarIcon = makeDecoratable("SidebarIcon", SidebarIconBase);
 export { SidebarIcon };
 

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/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":[]}
+{"version":3,"file":"Sidebar/components/SidebarIcon.js","sources":["../../../src/Sidebar/components/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"],"names":["SidebarIconBase","element","props","Icon","SidebarIcon","makeDecoratable"],"mappings":";;;AAQA,MAAMA,kBAAkB,CAAC,EAAEC,OAAO,EAAE,GAAGC,OAAyB,GACrD,WAAP,GAAO,oBAACC,MAAIA;QAAC,MAAMF;QAAS,MAAM;QAAO,GAAGC,KAAK;;AAGrD,MAAME,cAAcC,gBAAgB,eAAeL"}

package/Sidebar/components/SidebarProvider.js

@@ -1,167 +1,176 @@
-import React from "react";
+import react from "react";
 import { cn } from "../../utils.js";
 import { SIDEBAR_TRANSITION_DURATION } from "./constants.js";
-const SidebarContext = /*#__PURE__*/React.createContext(null);
+const SidebarContext = /*#__PURE__*/ react.createContext(null);
 function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  }
-  return context;
+    const context = react.useContext(SidebarContext);
+    if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+    return context;
 }
-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(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,
-    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({
+const createInitialSidebarState = (state)=>{
+    const pinned = state?.pinned ?? false;
+    const expandedSections = state?.expandedSections ?? [];
+    const pinnedItems = state?.pinnedItems ?? [];
+    return {
+        expanded: pinned,
         pinned,
         expandedSections,
-        pinnedItems
-      });
-    }
-  }, [pinned, expandedSections, pinnedItems, onChangeState]);
-  const setExpanded = React.useCallback(value => {
-    const newValue = typeof value === "function" ? value(expanded) : value;
-    setSidebarState(state => ({
-      ...state,
-      expanded: newValue,
-      transition: newValue ? "expanding" : "collapsing"
-    }));
-    if (timeoutRef.current) {
-      window.clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    timeoutRef.current = window.setTimeout(() => {
-      setSidebarState(state => ({
-        ...state,
+        pinnedItems,
         transition: null
-      }));
-    }, SIDEBAR_TRANSITION_DURATION);
-  }, [expanded]);
-  const setPinned = React.useCallback(value => {
-    const newValue = typeof value === "function" ? value(pinned) : value;
-    setSidebarState(state => ({
-      ...state,
-      pinned: newValue
-    }));
-  }, [pinned]);
-  const toggleExpanded = React.useCallback(() => {
-    return setExpanded(prev => !prev);
-  }, [setExpanded]); // Helper to toggle the sidebar.
-
-  const togglePinned = React.useCallback(() => {
-    return setPinned(prev => !prev);
-  }, [setPinned]);
-  const toggleSectionExpanded = React.useCallback(sectionId => {
-    setSidebarState(state => {
-      const expandedSections = state.expandedSections.includes(sectionId) ? state.expandedSections.filter(id => id !== sectionId) : [...state.expandedSections, sectionId];
-      return {
-        ...state,
+    };
+};
+const SidebarProvider = ({ className, children, state: cachedState, onChangeState, ...props })=>{
+    const [sidebarState, setSidebarState] = react.useState(()=>createInitialSidebarState(cachedState));
+    const [pinnedItemsData, setPinnedItemsData] = react.useState(new Map());
+    const timeoutRef = react.useRef(null);
+    const isInitialMount = react.useRef(true);
+    const { expanded, transition, pinned, expandedSections, pinnedItems } = sidebarState;
+    react.useEffect(()=>{
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
+        if (onChangeState) onChangeState({
+            pinned,
+            expandedSections,
+            pinnedItems
+        });
+    }, [
+        pinned,
+        expandedSections,
+        pinnedItems,
+        onChangeState
+    ]);
+    const setExpanded = react.useCallback((value)=>{
+        const newValue = "function" == typeof value ? value(expanded) : value;
+        setSidebarState((state)=>({
+                ...state,
+                expanded: newValue,
+                transition: newValue ? "expanding" : "collapsing"
+            }));
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        timeoutRef.current = window.setTimeout(()=>{
+            setSidebarState((state)=>({
+                    ...state,
+                    transition: null
+                }));
+        }, SIDEBAR_TRANSITION_DURATION);
+    }, [
+        expanded
+    ]);
+    const setPinned = react.useCallback((value)=>{
+        const newValue = "function" == typeof value ? value(pinned) : value;
+        setSidebarState((state)=>({
+                ...state,
+                pinned: newValue
+            }));
+    }, [
+        pinned
+    ]);
+    const toggleExpanded = react.useCallback(()=>setExpanded((prev)=>!prev), [
+        setExpanded
+    ]);
+    const togglePinned = react.useCallback(()=>setPinned((prev)=>!prev), [
+        setPinned
+    ]);
+    const toggleSectionExpanded = react.useCallback((sectionId)=>{
+        setSidebarState((state)=>{
+            const expandedSections = state.expandedSections.includes(sectionId) ? state.expandedSections.filter((id)=>id !== sectionId) : [
+                ...state.expandedSections,
+                sectionId
+            ];
+            return {
+                ...state,
+                expandedSections
+            };
+        });
+    }, [
+        setSidebarState
+    ]);
+    const isSectionExpanded = react.useCallback((sectionId)=>expandedSections.includes(sectionId), [
         expandedSections
-      };
-    });
-  }, [setSidebarState]);
-  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.
-  const state = expanded ? "expanded" : "collapsed";
-  const contextValue = React.useMemo(() => ({
-    state,
-    transition,
-    expanded,
-    expandedSections,
-    pinned,
-    setExpanded,
-    toggleExpanded,
-    toggleSectionExpanded,
-    setPinned,
-    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("group/sidebar-wrapper flex min-h-svh w-full", className)
-  }), children));
+    ]);
+    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)=>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(()=>pinnedItems.map((id)=>pinnedItemsData.get(id)).filter((item)=>void 0 !== item), [
+        pinnedItemsData,
+        pinnedItems
+    ]);
+    const state = expanded ? "expanded" : "collapsed";
+    const contextValue = react.useMemo(()=>({
+            state,
+            transition,
+            expanded,
+            expandedSections,
+            pinned,
+            setExpanded,
+            toggleExpanded,
+            toggleSectionExpanded,
+            setPinned,
+            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", {
+        "data-sidebar": "provider",
+        ...props,
+        className: cn("group/sidebar-wrapper flex min-h-svh w-full", className)
+    }, children));
 };
 SidebarProvider.displayName = "SidebarProvider";
 export { SidebarProvider, useSidebar };

package/Sidebar/components/SidebarProvider.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"Sidebar/components/SidebarProvider.js","sources":["../../../src/Sidebar/components/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"],"names":["SidebarContext","React","useSidebar","context","Error","createInitialSidebarState","state","pinned","expandedSections","pinnedItems","SidebarProvider","className","children","cachedState","onChangeState","props","sidebarState","setSidebarState","pinnedItemsData","setPinnedItemsData","Map","timeoutRef","isInitialMount","expanded","transition","setExpanded","value","newValue","window","SIDEBAR_TRANSITION_DURATION","setPinned","toggleExpanded","prev","togglePinned","toggleSectionExpanded","sectionId","id","isSectionExpanded","toggleItemPinned","itemId","newPinnedItems","isItemPinned","registerPinnedItem","data","newMap","unregisterPinnedItem","getPinnedItemsData","item","undefined","contextValue","cn"],"mappings":"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"}