@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/Sidebar/components/SidebarRoot.js

@@ -1,83 +1,66 @@
-import React, { useCallback, useRef } from "react";
+import react, { useCallback, useRef } from "react";
 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: "fixed top-0 z-sidebar "
+    variants: {
+        pinned: {
+            false: "fixed top-0 z-sidebar "
+        }
     }
-  }
 });
-const SidebarRoot = ({
-  side = "left",
-  className,
-  children,
-  ...props
-}) => {
-  const {
-    state,
-    setExpanded,
-    pinned,
-    expanded
-  } = useSidebar();
-  const elementRef = useRef(null);
-
-  // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
-  const timeoutRef = useRef(null);
-  const onMouseEnter = useCallback(() => {
-    // If the sidebar is pinned, we don't want to open the sidebar on mouse enter.
-    if (pinned) {
-      return;
-    }
-    if (timeoutRef.current) {
-      window.clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-
-    // 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);
-    }, 300);
-  }, [pinned, setExpanded]);
-  return /*#__PURE__*/React.createElement("div", {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    ref: elementRef,
-    "data-state": state,
-    "data-sidebar": "root",
-    "data-side": side,
-    className: variants({
-      pinned
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    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("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: "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"
-  }));
+const SidebarRoot = ({ side = "left", className, children, ...props })=>{
+    const { state, setExpanded, pinned, expanded } = useSidebar();
+    const elementRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const onMouseEnter = useCallback(()=>{
+        if (pinned) return;
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        timeoutRef.current = window.setTimeout(()=>{
+            if (!expanded) setExpanded(true);
+        }, 300);
+    }, [
+        pinned,
+        setExpanded,
+        expanded
+    ]);
+    const onMouseLeave = useCallback(()=>{
+        if (pinned) return;
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        timeoutRef.current = window.setTimeout(()=>{
+            setExpanded(false);
+        }, 300);
+    }, [
+        pinned,
+        setExpanded
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        ref: elementRef,
+        "data-state": state,
+        "data-sidebar": "root",
+        "data-side": side,
+        className: variants({
+            pinned
+        })
+    }, /*#__PURE__*/ react.createElement("div", {
+        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", {
+        className: cn("duration-175 fixed inset-y-0 z-sidebar h-svh w-sidebar-expanded transition-[width] ease-linear md:flex", "left" === side ? "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: "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","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":[]}
+{"version":3,"file":"Sidebar/components/SidebarRoot.js","sources":["../../../src/Sidebar/components/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"],"names":["variants","cva","SidebarRoot","side","className","children","props","state","setExpanded","pinned","expanded","useSidebar","elementRef","useRef","timeoutRef","onMouseEnter","useCallback","window","onMouseLeave","cn"],"mappings":";;;AAQA,MAAMA,WAAWC,IAAI,uEAAuE;IACxF,UAAU;QACN,QAAQ;YACJ,OAAO;QACX;IACJ;AACJ;AAEA,MAAMC,cAAc,CAAC,EAAEC,OAAO,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAyB;IACnF,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IAEjD,MAAMC,aAAaC,OAAuB;IAG1C,MAAMC,aAAaD,OAAsB;IAEzC,MAAME,eAAeC,YAAqD;QAEtE,IAAIP,QACA;QAGJ,IAAIK,WAAW,OAAO,EAAE;YACpBG,OAAO,YAAY,CAACH,WAAW,OAAO;YACtCA,WAAW,OAAO,GAAG;QACzB;QAGAA,WAAW,OAAO,GAAGG,OAAO,UAAU,CAAC;YAEnC,IAAI,CAACP,UACDF,YAAY;QAEpB,GAAG;IACP,GAAG;QAACC;QAAQD;QAAaE;KAAS;IAElC,MAAMQ,eAAeF,YAAqD;QAEtE,IAAIP,QACA;QAGJ,IAAIK,WAAW,OAAO,EAAE;YACpBG,OAAO,YAAY,CAACH,WAAW,OAAO;YACtCA,WAAW,OAAO,GAAG;QACzB;QAGAA,WAAW,OAAO,GAAGG,OAAO,UAAU,CAAC;YACnCT,YAAY;QAChB,GAAG;IACP,GAAG;QAACC;QAAQD;KAAY;IAExB,OAAO,WAAP,GACI,oBAAC;QACG,cAAcO;QACd,cAAcG;QACd,KAAKN;QACL,cAAYL;QACZ,gBAAc;QACd,aAAWJ;QACX,WAAWH,SAAS;YAAES;QAAO;qBAE7B,oBAAC;QACG,WAAWU,GACP,6GACA,sCACA;sBAGR,oBAAC;QACG,WAAWA,GACP,0GACAhB,AAAS,WAATA,OAAkB,WAAW,WAC7B,2HACAC;QAEH,GAAGE,KAAK;qBAET,oBAAC;QAAI,gBAAa;QAAU,WAAU;OACjCD,YAAAA,WAAAA,GAIT,oBAAC;QACG,gBAAc;QACd,WACI;;AAKpB"}

package/Sidebar/components/constants.js

@@ -1,4 +1,5 @@
-export const SIDEBAR_TRANSITION_DURATION = 175;
-export const SIDEBAR_LS_KEY = "webiny_sidebar_state";
+const SIDEBAR_TRANSITION_DURATION = 175;
+const SIDEBAR_LS_KEY = "webiny_sidebar_state";
+export { SIDEBAR_LS_KEY, SIDEBAR_TRANSITION_DURATION };
 
 //# sourceMappingURL=constants.js.map

package/Sidebar/components/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["SIDEBAR_TRANSITION_DURATION","SIDEBAR_LS_KEY"],"sources":["constants.ts"],"sourcesContent":["export const SIDEBAR_TRANSITION_DURATION = 175;\nexport const SIDEBAR_LS_KEY = \"webiny_sidebar_state\";\n"],"mappings":"AAAA,OAAO,MAAMA,2BAA2B,GAAG,GAAG;AAC9C,OAAO,MAAMC,cAAc,GAAG,sBAAsB","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/constants.js","sources":["../../../src/Sidebar/components/constants.ts"],"sourcesContent":["export const SIDEBAR_TRANSITION_DURATION = 175;\nexport const SIDEBAR_LS_KEY = \"webiny_sidebar_state\";\n"],"names":["SIDEBAR_TRANSITION_DURATION","SIDEBAR_LS_KEY"],"mappings":"AAAO,MAAMA,8BAA8B;AACpC,MAAMC,iBAAiB"}

package/Sidebar/components/items/DivButton.js

@@ -1,26 +1,26 @@
-import React, { useMemo } from "react";
-const DivButton = ({
-  tabIndex,
-  disabled,
-  ...props
-}) => {
-  const divAsButtonProps = useMemo(() => {
-    let tabIndexToUse = typeof tabIndex === "number" ? tabIndex : 0;
-    if (disabled) {
-      tabIndexToUse = -1;
-    }
-    return {
-      role: "button",
-      tabIndex: tabIndexToUse,
-      onKeyDown: e => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          e.currentTarget.click();
-        }
-      }
-    };
-  }, [disabled, tabIndex]);
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, divAsButtonProps));
+import react, { useMemo } from "react";
+const DivButton = ({ tabIndex, disabled, ...props })=>{
+    const divAsButtonProps = useMemo(()=>{
+        let tabIndexToUse = "number" == typeof tabIndex ? tabIndex : 0;
+        if (disabled) tabIndexToUse = -1;
+        return {
+            role: "button",
+            tabIndex: tabIndexToUse,
+            onKeyDown: (e)=>{
+                if ("Enter" === e.key || " " === e.key) {
+                    e.preventDefault();
+                    e.currentTarget.click();
+                }
+            }
+        };
+    }, [
+        disabled,
+        tabIndex
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        ...props,
+        ...divAsButtonProps
+    });
 };
 export { DivButton };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","DivButton","tabIndex","disabled","props","divAsButtonProps","tabIndexToUse","role","onKeyDown","e","key","preventDefault","currentTarget","click","createElement","Object","assign"],"sources":["DivButton.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\n\ninterface DivButtonProps extends React.HTMLAttributes<HTMLDivElement> {\n    disabled?: boolean;\n}\n\nconst DivButton = ({ tabIndex, disabled, ...props }: DivButtonProps) => {\n    const divAsButtonProps = useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        let tabIndexToUse = typeof tabIndex === \"number\" ? tabIndex : 0;\n        if (disabled) {\n            tabIndexToUse = -1;\n        }\n\n        return {\n            role: \"button\",\n            tabIndex: tabIndexToUse,\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [disabled, tabIndex]);\n\n    return <div {...props} {...divAsButtonProps} />;\n};\n\nexport { DivButton, type DivButtonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAMtC,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAsB,CAAC,KAAK;EACpE,MAAMC,gBAAgB,GAAGL,OAAO,CAAuC,MAAM;IACzE,IAAIM,aAAa,GAAG,OAAOJ,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,GAAG,CAAC;IAC/D,IAAIC,QAAQ,EAAE;MACVG,aAAa,GAAG,CAAC,CAAC;IACtB;IAEA,OAAO;MACHC,IAAI,EAAE,QAAQ;MACdL,QAAQ,EAAEI,aAAa;MACvBE,SAAS,EAAEC,CAAC,IAAI;QACZ,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;UACpCD,CAAC,CAACE,cAAc,CAAC,CAAC;UAClBF,CAAC,CAACG,aAAa,CAACC,KAAK,CAAC,CAAC;QAC3B;MACJ;IACJ,CAAC;EACL,CAAC,EAAE,CAACV,QAAQ,EAAED,QAAQ,CAAC,CAAC;EAExB,oBAAOH,KAAA,CAAAe,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASZ,KAAK,EAAMC,gBAAgB,CAAG,CAAC;AACnD,CAAC;AAED,SAASJ,SAAS","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/DivButton.js","sources":["../../../../src/Sidebar/components/items/DivButton.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\n\ninterface DivButtonProps extends React.HTMLAttributes<HTMLDivElement> {\n    disabled?: boolean;\n}\n\nconst DivButton = ({ tabIndex, disabled, ...props }: DivButtonProps) => {\n    const divAsButtonProps = useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        let tabIndexToUse = typeof tabIndex === \"number\" ? tabIndex : 0;\n        if (disabled) {\n            tabIndexToUse = -1;\n        }\n\n        return {\n            role: \"button\",\n            tabIndex: tabIndexToUse,\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [disabled, tabIndex]);\n\n    return <div {...props} {...divAsButtonProps} />;\n};\n\nexport { DivButton, type DivButtonProps };\n"],"names":["DivButton","tabIndex","disabled","props","divAsButtonProps","useMemo","tabIndexToUse","e"],"mappings":";AAMA,MAAMA,YAAY,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC,OAAuB;IAC/D,MAAMC,mBAAmBC,QAA8C;QACnE,IAAIC,gBAAgB,AAAoB,YAApB,OAAOL,WAAwBA,WAAW;QAC9D,IAAIC,UACAI,gBAAgB;QAGpB,OAAO;YACH,MAAM;YACN,UAAUA;YACV,WAAWC,CAAAA;gBACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;oBACpCA,EAAE,cAAc;oBAChBA,EAAE,aAAa,CAAC,KAAK;gBACzB;YACJ;QACJ;IACJ,GAAG;QAACL;QAAUD;KAAS;IAEvB,OAAO,WAAP,GAAO,oBAAC;QAAK,GAAGE,KAAK;QAAG,GAAGC,gBAAgB;;AAC/C"}

package/Sidebar/components/items/SidebarMenuGroup.js

@@ -1,17 +1,16 @@
-import React from "react";
+import react from "react";
 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"
-  }, props));
-};
+const SidebarMenuGroupBase = (props)=>/*#__PURE__*/ react.createElement(SidebarMenuItem, {
+        variant: "group-label",
+        ...props
+    });
 const DecoratableSidebarMenuGroup = makeDecoratable("SidebarMenuGroup", SidebarMenuGroupBase);
 const SidebarMenuGroup = withStaticProps(DecoratableSidebarMenuGroup, {
-  Icon: SidebarMenuItemIcon,
-  Action: SidebarMenuItemAction
+    Icon: SidebarMenuItemIcon,
+    Action: SidebarMenuItemAction
 });
 export { SidebarMenuGroup };
 

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.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":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuGroup.js","sources":["../../../../src/Sidebar/components/items/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"],"names":["SidebarMenuGroupBase","props","SidebarMenuItem","DecoratableSidebarMenuGroup","makeDecoratable","SidebarMenuGroup","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction"],"mappings":";;;;;AAYA,MAAMA,uBAAuB,CAACC,QACnB,WAAP,GAAO,oBAACC,iBAAeA;QAAC,SAAS;QAAgB,GAAGD,KAAK;;AAG7D,MAAME,8BAA8BC,gBAAgB,oBAAoBJ;AAExE,MAAMK,mBAAmBC,gBAAgBH,6BAA6B;IAClE,MAAMI;IACN,QAAQC;AACZ"}

package/Sidebar/components/items/SidebarMenuItem.js

@@ -1,23 +1,19 @@
-import React from "react";
+import react from "react";
 import { makeDecoratable, withStaticProps } from "../../../utils.js";
 import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon.js";
 import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
 import { SidebarMenuSubItem } from "./SidebarMenuSubItem.js";
 import { useSidebarMenu } from "./SidebarMenuProvider.js";
 import { SidebarMenuRootItem } from "./SidebarMenuRootItem.js";
-const SidebarMenuItemBase = props => {
-  const {
-    currentLevel
-  } = useSidebarMenu();
-  if (currentLevel === 0) {
-    return /*#__PURE__*/React.createElement(SidebarMenuRootItem, props);
-  }
-  return /*#__PURE__*/React.createElement(SidebarMenuSubItem, props);
+const SidebarMenuItemBase = (props)=>{
+    const { currentLevel } = useSidebarMenu();
+    if (0 === currentLevel) return /*#__PURE__*/ react.createElement(SidebarMenuRootItem, props);
+    return /*#__PURE__*/ react.createElement(SidebarMenuSubItem, props);
 };
 const DecoratableSidebarMenuItem = makeDecoratable("SidebarMenuItem", SidebarMenuItemBase);
 const SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {
-  Icon: SidebarMenuItemIcon,
-  Action: SidebarMenuItemAction
+    Icon: SidebarMenuItemIcon,
+    Action: SidebarMenuItemAction
 });
 export { SidebarMenuItem };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuSubItem","useSidebarMenu","SidebarMenuRootItem","SidebarMenuItemBase","props","currentLevel","createElement","DecoratableSidebarMenuItem","SidebarMenuItem","Icon","Action"],"sources":["SidebarMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SidebarMenuItemIcon, type SidebarMenuItemIconProps } from \"./SidebarMenuItemIcon.js\";\nimport { SidebarMenuItemAction, type SidebarMenuItemActionProps } from \"./SidebarMenuItemAction.js\";\nimport { SidebarMenuSubItem } from \"./SidebarMenuSubItem.js\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { SidebarMenuRootItem } from \"~/Sidebar/components/items/SidebarMenuRootItem.js\";\nimport { LinkProps } from \"~/index.js\";\n\nexport interface SidebarMenuItemBaseProps {\n    text: React.ReactNode;\n    className?: string;\n    collapsible?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler;\n    icon?: React.ReactNode;\n    action?: React.ReactNode;\n    variant?: \"group-label\";\n    active?: boolean;\n    disabled?: boolean;\n    pinnable?: boolean;\n    pinnedIcon?: React.ReactNode;\n}\n\ntype SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {\n    to?: never;\n    route?: never;\n    params?: never;\n};\n\ntype SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;\ntype SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;\n\ntype SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;\n\nconst SidebarMenuItemBase = (props: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n\n    if (currentLevel === 0) {\n        return <SidebarMenuRootItem {...props} />;\n    }\n\n    return <SidebarMenuSubItem {...props} />;\n};\n\nconst DecoratableSidebarMenuItem = makeDecoratable(\"SidebarMenuItem\", SidebarMenuItemBase);\n\nconst SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuItem,\n    type SidebarMenuItemProps,\n    type SidebarMenuItemButtonProps,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,mBAAmB;AAC5B,SAASC,qBAAqB;AAC9B,SAASC,kBAAkB;AAC3B,SAASC,cAAc;AACvB,SAASC,mBAAmB;AA6B5B,MAAMC,mBAAmB,GAAIC,KAA2B,IAAK;EACzD,MAAM;IAAEC;EAAa,CAAC,GAAGJ,cAAc,CAAC,CAAC;EAEzC,IAAII,YAAY,KAAK,CAAC,EAAE;IACpB,oBAAOV,KAAA,CAAAW,aAAA,CAACJ,mBAAmB,EAAKE,KAAQ,CAAC;EAC7C;EAEA,oBAAOT,KAAA,CAAAW,aAAA,CAACN,kBAAkB,EAAKI,KAAQ,CAAC;AAC5C,CAAC;AAED,MAAMG,0BAA0B,GAAGX,eAAe,CAAC,iBAAiB,EAAEO,mBAAmB,CAAC;AAE1F,MAAMK,eAAe,GAAGX,eAAe,CAACU,0BAA0B,EAAE;EAChEE,IAAI,EAAEX,mBAAmB;EACzBY,MAAM,EAAEX;AACZ,CAAC,CAAC;AAEF,SACIS,eAAe","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SidebarMenuItemIcon, type SidebarMenuItemIconProps } from \"./SidebarMenuItemIcon.js\";\nimport { SidebarMenuItemAction, type SidebarMenuItemActionProps } from \"./SidebarMenuItemAction.js\";\nimport { SidebarMenuSubItem } from \"./SidebarMenuSubItem.js\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { SidebarMenuRootItem } from \"~/Sidebar/components/items/SidebarMenuRootItem.js\";\nimport { LinkProps } from \"~/index.js\";\n\nexport interface SidebarMenuItemBaseProps {\n    text: React.ReactNode;\n    className?: string;\n    collapsible?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler;\n    icon?: React.ReactNode;\n    action?: React.ReactNode;\n    variant?: \"group-label\";\n    active?: boolean;\n    disabled?: boolean;\n    pinnable?: boolean;\n    pinnedIcon?: React.ReactNode;\n}\n\ntype SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {\n    to?: never;\n    route?: never;\n    params?: never;\n};\n\ntype SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;\ntype SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;\n\ntype SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;\n\nconst SidebarMenuItemBase = (props: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n\n    if (currentLevel === 0) {\n        return <SidebarMenuRootItem {...props} />;\n    }\n\n    return <SidebarMenuSubItem {...props} />;\n};\n\nconst DecoratableSidebarMenuItem = makeDecoratable(\"SidebarMenuItem\", SidebarMenuItemBase);\n\nconst SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuItem,\n    type SidebarMenuItemProps,\n    type SidebarMenuItemButtonProps,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"names":["SidebarMenuItemBase","props","currentLevel","useSidebarMenu","SidebarMenuRootItem","SidebarMenuSubItem","DecoratableSidebarMenuItem","makeDecoratable","SidebarMenuItem","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction"],"mappings":";;;;;;;AAmCA,MAAMA,sBAAsB,CAACC;IACzB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,IAAID,AAAiB,MAAjBA,cACA,OAAO,WAAP,GAAO,oBAACE,qBAAwBH;IAGpC,OAAO,WAAP,GAAO,oBAACI,oBAAuBJ;AACnC;AAEA,MAAMK,6BAA6BC,gBAAgB,mBAAmBP;AAEtE,MAAMQ,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;AACZ"}

package/Sidebar/components/items/SidebarMenuItemAction.js

@@ -1,36 +1,33 @@
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { cn } from "../../../utils.js";
 import { IconButton } from "../../../Button/IconButton.js";
 import { useSidebar } from "../../index.js";
-const SidebarMenuItemAction = ({
-  element,
-  showOnHover = false,
-  className,
-  ...props
-}) => {
-  const {
-    expanded
-  } = useSidebar();
-  const [showAction, setShowAction] = useState(false);
-  useEffect(() => {
-    if (expanded) {
-      const timer = setTimeout(() => {
-        setShowAction(true);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-    setShowAction(false);
-    return undefined;
-  }, [expanded]);
-  if (!showAction) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    icon: element,
-    size: "xs",
-    variant: "ghost",
-    className: cn("ml-auto", "group-data-[state=collapsed]:hidden", showOnHover && ["opacity-0", "group-hover/menu-root-button:opacity-100", "group-hover/menu-sub-button:opacity-100"], className)
-  }, props));
+const SidebarMenuItemAction = ({ element, showOnHover = false, className, ...props })=>{
+    const { expanded } = useSidebar();
+    const [showAction, setShowAction] = useState(false);
+    useEffect(()=>{
+        if (expanded) {
+            const timer = setTimeout(()=>{
+                setShowAction(true);
+            }, 100);
+            return ()=>clearTimeout(timer);
+        }
+        setShowAction(false);
+    }, [
+        expanded
+    ]);
+    if (!showAction) return null;
+    return /*#__PURE__*/ react.createElement(IconButton, {
+        icon: element,
+        size: "xs",
+        variant: "ghost",
+        className: cn("ml-auto", "group-data-[state=collapsed]:hidden", showOnHover && [
+            "opacity-0",
+            "group-hover/menu-root-button:opacity-100",
+            "group-hover/menu-sub-button:opacity-100"
+        ], className),
+        ...props
+    });
 };
 export { SidebarMenuItemAction };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","cn","IconButton","useSidebar","SidebarMenuItemAction","element","showOnHover","className","props","expanded","showAction","setShowAction","timer","setTimeout","clearTimeout","undefined","createElement","Object","assign","icon","size","variant"],"sources":["SidebarMenuItemAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { IconButton, type IconButtonProps } from \"~/Button/IconButton.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\n\ninterface SidebarMenuItemActionProps extends Omit<IconButtonProps, \"icon\"> {\n    element?: React.ReactNode;\n    showOnHover?: boolean;\n}\n\nconst SidebarMenuItemAction = ({\n    element,\n    showOnHover = false,\n    className,\n    ...props\n}: SidebarMenuItemActionProps) => {\n    const { expanded } = useSidebar();\n    const [showAction, setShowAction] = useState(false);\n\n    useEffect(() => {\n        if (expanded) {\n            const timer = setTimeout(() => {\n                setShowAction(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowAction(false);\n        return undefined;\n    }, [expanded]);\n\n    if (!showAction) {\n        return null;\n    }\n\n    return (\n        <IconButton\n            icon={element}\n            size={\"xs\"}\n            variant={\"ghost\"}\n            className={cn(\n                \"ml-auto\",\n                \"group-data-[state=collapsed]:hidden\",\n                showOnHover && [\n                    \"opacity-0\",\n                    \"group-hover/menu-root-button:opacity-100\",\n                    \"group-hover/menu-sub-button:opacity-100\"\n                ],\n                className\n            )}\n            {...props}\n        />\n    );\n};\n\nexport { SidebarMenuItemAction, type SidebarMenuItemActionProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,EAAE;AACX,SAASC,UAAU;AACnB,SAASC,UAAU;AAOnB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,OAAO;EACPC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACT,GAAGC;AACqB,CAAC,KAAK;EAC9B,MAAM;IAAEC;EAAS,CAAC,GAAGN,UAAU,CAAC,CAAC;EACjC,MAAM,CAACO,UAAU,EAAEC,aAAa,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACZ,IAAIU,QAAQ,EAAE;MACV,MAAMG,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,CAACN,QAAQ,CAAC,CAAC;EAEd,IAAI,CAACC,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,oBACIZ,KAAA,CAAAkB,aAAA,CAACd,UAAU,EAAAe,MAAA,CAAAC,MAAA;IACPC,IAAI,EAAEd,OAAQ;IACde,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE,OAAQ;IACjBd,SAAS,EAAEN,EAAE,CACT,SAAS,EACT,qCAAqC,EACrCK,WAAW,IAAI,CACX,WAAW,EACX,0CAA0C,EAC1C,yCAAyC,CAC5C,EACDC,SACJ;EAAE,GACEC,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,SAASJ,qBAAqB","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuItemAction.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItemAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { IconButton, type IconButtonProps } from \"~/Button/IconButton.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\n\ninterface SidebarMenuItemActionProps extends Omit<IconButtonProps, \"icon\"> {\n    element?: React.ReactNode;\n    showOnHover?: boolean;\n}\n\nconst SidebarMenuItemAction = ({\n    element,\n    showOnHover = false,\n    className,\n    ...props\n}: SidebarMenuItemActionProps) => {\n    const { expanded } = useSidebar();\n    const [showAction, setShowAction] = useState(false);\n\n    useEffect(() => {\n        if (expanded) {\n            const timer = setTimeout(() => {\n                setShowAction(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowAction(false);\n        return undefined;\n    }, [expanded]);\n\n    if (!showAction) {\n        return null;\n    }\n\n    return (\n        <IconButton\n            icon={element}\n            size={\"xs\"}\n            variant={\"ghost\"}\n            className={cn(\n                \"ml-auto\",\n                \"group-data-[state=collapsed]:hidden\",\n                showOnHover && [\n                    \"opacity-0\",\n                    \"group-hover/menu-root-button:opacity-100\",\n                    \"group-hover/menu-sub-button:opacity-100\"\n                ],\n                className\n            )}\n            {...props}\n        />\n    );\n};\n\nexport { SidebarMenuItemAction, type SidebarMenuItemActionProps };\n"],"names":["SidebarMenuItemAction","element","showOnHover","className","props","expanded","useSidebar","showAction","setShowAction","useState","useEffect","timer","setTimeout","clearTimeout","IconButton","cn"],"mappings":";;;;AAUA,MAAMA,wBAAwB,CAAC,EAC3BC,OAAO,EACPC,cAAc,KAAK,EACnBC,SAAS,EACT,GAAGC,OACsB;IACzB,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;IAE7CC,UAAU;QACN,IAAIL,UAAU;YACV,MAAMM,QAAQC,WAAW;gBACrBJ,cAAc;YAClB,GAAG;YACH,OAAO,IAAMK,aAAaF;QAC9B;QACAH,cAAc;IAElB,GAAG;QAACH;KAAS;IAEb,IAAI,CAACE,YACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACO,YAAUA;QACP,MAAMb;QACN,MAAM;QACN,SAAS;QACT,WAAWc,GACP,WACA,uCACAb,eAAe;YACX;YACA;YACA;SACH,EACDC;QAEH,GAAGC,KAAK;;AAGrB"}

package/Sidebar/components/items/SidebarMenuItemIcon.js

@@ -1,18 +1,14 @@
-import React from "react";
+import react from "react";
 import { Icon } from "../../../Icon/index.js";
 import { makeDecoratable } from "@webiny/react-composition";
-const SidebarMenuItemIconBase = ({
-  element,
-  ...props
-}) => {
-  if (!element) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Icon, Object.assign({
-    icon: element,
-    size: "sm",
-    color: "neutral-strong"
-  }, props));
+const SidebarMenuItemIconBase = ({ element, ...props })=>{
+    if (!element) return null;
+    return /*#__PURE__*/ react.createElement(Icon, {
+        icon: element,
+        size: "sm",
+        color: "neutral-strong",
+        ...props
+    });
 };
 const SidebarMenuItemIcon = makeDecoratable("SidebarMenuItemIcon", SidebarMenuItemIconBase);
 export { SidebarMenuItemIcon };

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

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","makeDecoratable","SidebarMenuItemIconBase","element","props","createElement","Object","assign","icon","size","color","SidebarMenuItemIcon"],"sources":["SidebarMenuItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\ninterface SidebarMenuItemIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n}\n\nconst SidebarMenuItemIconBase = ({ element, ...props }: SidebarMenuItemIconProps) => {\n    if (!element) {\n        return null;\n    }\n\n    return <Icon icon={element} size={\"sm\"} color={\"neutral-strong\"} {...props} />;\n};\n\nconst SidebarMenuItemIcon = makeDecoratable(\"SidebarMenuItemIcon\", SidebarMenuItemIconBase);\n\nexport { SidebarMenuItemIcon, type SidebarMenuItemIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,eAAe,QAAQ,2BAA2B;AAM3D,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,OAAO;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACjF,IAAI,CAACD,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOJ,KAAA,CAAAM,aAAA,CAACL,IAAI,EAAAM,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAEL,OAAQ;IAACM,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAiB,GAAKN,KAAK,CAAG,CAAC;AAClF,CAAC;AAED,MAAMO,mBAAmB,GAAGV,eAAe,CAAC,qBAAqB,EAAEC,uBAAuB,CAAC;AAE3F,SAASS,mBAAmB","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuItemIcon.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\ninterface SidebarMenuItemIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n}\n\nconst SidebarMenuItemIconBase = ({ element, ...props }: SidebarMenuItemIconProps) => {\n    if (!element) {\n        return null;\n    }\n\n    return <Icon icon={element} size={\"sm\"} color={\"neutral-strong\"} {...props} />;\n};\n\nconst SidebarMenuItemIcon = makeDecoratable(\"SidebarMenuItemIcon\", SidebarMenuItemIconBase);\n\nexport { SidebarMenuItemIcon, type SidebarMenuItemIconProps };\n"],"names":["SidebarMenuItemIconBase","element","props","Icon","SidebarMenuItemIcon","makeDecoratable"],"mappings":";;;AAQA,MAAMA,0BAA0B,CAAC,EAAEC,OAAO,EAAE,GAAGC,OAAiC;IAC5E,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACE,MAAIA;QAAC,MAAMF;QAAS,MAAM;QAAM,OAAO;QAAmB,GAAGC,KAAK;;AAC9E;AAEA,MAAME,sBAAsBC,gBAAgB,uBAAuBL"}

package/Sidebar/components/items/SidebarMenuLink.js

@@ -1,15 +1,13 @@
-import React from "react";
+import react from "react";
 import { SidebarMenuItem } from "./SidebarMenuItem.js";
 import { makeDecoratable, withStaticProps } from "../../../utils.js";
 import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon.js";
 import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
-const SidebarMenuLinkBase = props => {
-  return /*#__PURE__*/React.createElement(SidebarMenuItem, props);
-};
+const SidebarMenuLinkBase = (props)=>/*#__PURE__*/ react.createElement(SidebarMenuItem, props);
 const DecoratableSidebarMenuLink = makeDecoratable("SidebarMenuLink", SidebarMenuLinkBase);
 const SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {
-  Icon: SidebarMenuItemIcon,
-  Action: SidebarMenuItemAction
+    Icon: SidebarMenuItemIcon,
+    Action: SidebarMenuItemAction
 });
 export { SidebarMenuLink };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","SidebarMenuItem","makeDecoratable","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuLinkBase","props","createElement","DecoratableSidebarMenuLink","SidebarMenuLink","Icon","Action"],"sources":["SidebarMenuLink.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemLinkProps } 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 SidebarMenuLinkBase = (props: SidebarMenuItemLinkProps) => {\n    return <SidebarMenuItem {...props} />;\n};\n\nconst DecoratableSidebarMenuLink = makeDecoratable(\"SidebarMenuLink\", SidebarMenuLinkBase);\n\nconst SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuLink,\n    type SidebarMenuItemLinkProps,\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,mBAAmB,GAAIC,KAA+B,IAAK;EAC7D,oBAAOP,KAAA,CAAAQ,aAAA,CAACP,eAAe,EAAKM,KAAQ,CAAC;AACzC,CAAC;AAED,MAAME,0BAA0B,GAAGP,eAAe,CAAC,iBAAiB,EAAEI,mBAAmB,CAAC;AAE1F,MAAMI,eAAe,GAAGP,eAAe,CAACM,0BAA0B,EAAE;EAChEE,IAAI,EAAEP,mBAAmB;EACzBQ,MAAM,EAAEP;AACZ,CAAC,CAAC;AAEF,SACIK,eAAe","ignoreList":[]}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuLink.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuLink.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemLinkProps } 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 SidebarMenuLinkBase = (props: SidebarMenuItemLinkProps) => {\n    return <SidebarMenuItem {...props} />;\n};\n\nconst DecoratableSidebarMenuLink = makeDecoratable(\"SidebarMenuLink\", SidebarMenuLinkBase);\n\nconst SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuLink,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"names":["SidebarMenuLinkBase","props","SidebarMenuItem","DecoratableSidebarMenuLink","makeDecoratable","SidebarMenuLink","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction"],"mappings":";;;;;AAYA,MAAMA,sBAAsB,CAACC,QAClB,WAAP,GAAO,oBAACC,iBAAoBD;AAGhC,MAAME,6BAA6BC,gBAAgB,mBAAmBJ;AAEtE,MAAMK,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;AACZ"}

package/Sidebar/components/items/SidebarMenuPinnedItems.js

@@ -1,40 +1,36 @@
-import React from "react";
+import react from "react";
 import { useSidebar } from "../../index.js";
 import { SidebarMenuRootItem } from "./SidebarMenuRootItem.js";
 import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
-import { ReactComponent as UnPinIcon } from "@webiny/icons/push_pin_off.svg";
-const SidebarMenuPinnedItems = () => {
-  const sidebar = useSidebar();
-
-  // Don't memoize - we want this to re-render when active state changes
-  const pinnedItems = sidebar.getPinnedItemsData();
-  if (pinnedItems.length === 0) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, pinnedItems.map(item => {
-    const handleUnpin = e => {
-      e.stopPropagation();
-      e.preventDefault();
-      sidebar.toggleItemPinned(item.id);
-    };
-    const unpinAction = /*#__PURE__*/React.createElement(SidebarMenuItemAction, {
-      element: /*#__PURE__*/React.createElement(UnPinIcon, null),
-      onClick: handleUnpin
-    });
-    return /*#__PURE__*/React.createElement(SidebarMenuRootItem, {
-      key: item.id,
-      text: item.text,
-      icon: item.icon,
-      to: item.to,
-      onClick: item.onClick,
-      active: item.active,
-      action: unpinAction
-    });
-  }), /*#__PURE__*/React.createElement("li", {
-    className: "px-sm py-xs"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "h-px bg-neutral-dimmed"
-  })));
+import { ReactComponent } from "@webiny/icons/push_pin_off.svg";
+const SidebarMenuPinnedItems = ()=>{
+    const sidebar = useSidebar();
+    const pinnedItems = sidebar.getPinnedItemsData();
+    if (0 === pinnedItems.length) return null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, pinnedItems.map((item)=>{
+        const handleUnpin = (e)=>{
+            e.stopPropagation();
+            e.preventDefault();
+            sidebar.toggleItemPinned(item.id);
+        };
+        const unpinAction = /*#__PURE__*/ react.createElement(SidebarMenuItemAction, {
+            element: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: handleUnpin
+        });
+        return /*#__PURE__*/ react.createElement(SidebarMenuRootItem, {
+            key: item.id,
+            text: item.text,
+            icon: item.icon,
+            to: item.to,
+            onClick: item.onClick,
+            active: item.active,
+            action: unpinAction
+        });
+    }), /*#__PURE__*/ react.createElement("li", {
+        className: "px-sm py-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "h-px bg-neutral-dimmed"
+    })));
 };
 export { SidebarMenuPinnedItems };