@webiny/admin-ui 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/Sidebar/components/SidebarProvider.js

@@ -1,119 +1,176 @@
-import React from "react";
-import { cn } from "../../utils";
-import { SIDEBAR_TRANSITION_DURATION } from "./constants";
-import { SidebarCache } from "./SidebarCache";
-const SidebarContext = /*#__PURE__*/React.createContext(null);
+import react from "react";
+import { cn } from "../../utils.js";
+import { SIDEBAR_TRANSITION_DURATION } from "./constants.js";
+const SidebarContext = /*#__PURE__*/ react.createContext(null);
 function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  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 = () => {
-  const {
-    pinned,
-    expandedSections
-  } = SidebarCache.get();
-  return {
-    expanded: pinned,
-    // If pinned, we want the sidebar to be open by default.
-    pinned,
-    expandedSections,
-    transition: null
-  };
-};
-const SidebarProvider = ({
-  className,
-  children,
-  ...props
-}) => {
-  const [sidebarState, setSidebarState] = React.useState(createInitialSidebarState);
-
-  // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
-  const timeoutRef = React.useRef(null);
-  const {
-    expanded,
-    transition,
-    pinned,
-    expandedSections
-  } = sidebarState;
-  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,
+const createInitialSidebarState = (state)=>{
+    const pinned = state?.pinned ?? false;
+    const expandedSections = state?.expandedSections ?? [];
+    const pinnedItems = state?.pinnedItems ?? [];
+    return {
+        expanded: pinned,
+        pinned,
+        expandedSections,
+        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
-    }));
-    SidebarCache.set({
-      pinned: newValue,
-      expandedSections
-    });
-  }, [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];
-      SidebarCache.set({
-        pinned: state.pinned,
-        expandedSections
-      });
-      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]);
-
-  // 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
-  }), [state, transition, expanded, expandedSections, pinned, setExpanded, setPinned, toggleExpanded, togglePinned]);
-  return /*#__PURE__*/React.createElement(SidebarContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
-    "data-sidebar": "provider"
-  }, props, {
-    className: cn("wby-group/sidebar-wrapper wby-flex wby-min-h-svh wby-w-full", className)
-  }), 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","SidebarCache","SidebarContext","createContext","useSidebar","context","useContext","Error","createInitialSidebarState","pinned","expandedSections","get","expanded","transition","SidebarProvider","className","children","props","sidebarState","setSidebarState","useState","timeoutRef","useRef","setExpanded","useCallback","value","newValue","state","current","window","clearTimeout","setTimeout","setPinned","set","toggleExpanded","prev","togglePinned","toggleSectionExpanded","sectionId","includes","filter","id","isSectionExpanded","contextValue","useMemo","createElement","Provider","Object","assign","displayName"],"sources":["SidebarProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils\";\nimport { SIDEBAR_TRANSITION_DURATION } from \"./constants\";\nimport { SidebarCache } from \"./SidebarCache\";\n\ntype SidebarContext = {\n    state: \"expanded\" | \"collapsed\";\n    expanded: boolean;\n    expandedSections: string[];\n    pinned: boolean;\n    transition: null | \"expanding\" | \"collapsing\";\n    setExpanded: (expanded: boolean) => void;\n    toggleExpanded: () => void;\n    togglePinned: () => void;\n    toggleSectionExpanded: (sectionId: string) => void;\n    isSectionExpanded: (sectionId: string) => boolean;\n};\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null);\n\nfunction useSidebar() {\n    const context = React.useContext(SidebarContext);\n    if (!context) {\n        throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n    }\n\n    return context;\n}\n\ntype SidebarProviderProps = React.HTMLAttributes<HTMLDivElement>;\n\ninterface SidebarState {\n    expanded: boolean;\n    transition: null | \"expanding\" | \"collapsing\";\n    pinned: boolean;\n    expandedSections: string[];\n}\n\nconst createInitialSidebarState = (): SidebarState => {\n    const { pinned, expandedSections } = SidebarCache.get();\n    return {\n        expanded: pinned, // If pinned, we want the sidebar to be open by default.\n        pinned,\n        expandedSections,\n        transition: null\n    };\n};\n\nconst SidebarProvider = ({ className, children, ...props }: SidebarProviderProps) => {\n    const [sidebarState, setSidebarState] = React.useState<SidebarState>(createInitialSidebarState);\n\n    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n    const timeoutRef = React.useRef<number | null>(null);\n\n    const { expanded, transition, pinned, expandedSections } = sidebarState;\n\n    const setExpanded = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const newValue = typeof value === \"function\" ? value(expanded) : value;\n            setSidebarState(state => ({\n                ...state,\n                expanded: newValue,\n                transition: newValue ? \"expanding\" : \"collapsing\"\n            }));\n\n            if (timeoutRef.current) {\n                window.clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            timeoutRef.current = window.setTimeout(() => {\n                setSidebarState(state => ({\n                    ...state,\n                    transition: null\n                }));\n            }, SIDEBAR_TRANSITION_DURATION);\n        },\n        [expanded]\n    );\n\n    const setPinned = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const newValue = typeof value === \"function\" ? value(pinned) : value;\n            setSidebarState(state => ({\n                ...state,\n                pinned: newValue\n            }));\n\n            SidebarCache.set({ pinned: newValue, expandedSections });\n        },\n        [pinned]\n    );\n\n    const toggleExpanded = React.useCallback(() => {\n        return setExpanded(prev => !prev);\n    }, [setExpanded]); // Helper to toggle the sidebar.\n\n    const togglePinned = React.useCallback(() => {\n        return setPinned(prev => !prev);\n    }, [setPinned]);\n\n    const toggleSectionExpanded = React.useCallback(\n        (sectionId: string) => {\n            setSidebarState(state => {\n                const expandedSections = state.expandedSections.includes(sectionId)\n                    ? state.expandedSections.filter(id => id !== sectionId)\n                    : [...state.expandedSections, sectionId];\n\n                SidebarCache.set({ pinned: state.pinned, expandedSections });\n\n                return {\n                    ...state,\n                    expandedSections\n                };\n            });\n        },\n        [setSidebarState]\n    );\n\n    const isSectionExpanded = React.useCallback(\n        (sectionId: string) => {\n            return expandedSections.includes(sectionId);\n        },\n        [expandedSections]\n    );\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = expanded ? \"expanded\" : \"collapsed\";\n\n    const contextValue = React.useMemo<SidebarContext>(\n        () => ({\n            state,\n            transition,\n            expanded,\n            expandedSections,\n            pinned,\n            setExpanded,\n            toggleExpanded,\n            toggleSectionExpanded,\n            setPinned,\n            togglePinned,\n            isSectionExpanded\n        }),\n        [\n            state,\n            transition,\n            expanded,\n            expandedSections,\n            pinned,\n            setExpanded,\n            setPinned,\n            toggleExpanded,\n            togglePinned\n        ]\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                data-sidebar={\"provider\"}\n                {...props}\n                className={cn(\n                    \"wby-group/sidebar-wrapper wby-flex wby-min-h-svh wby-w-full\",\n                    className\n                )}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n};\nSidebarProvider.displayName = \"SidebarProvider\";\n\nexport { SidebarProvider, useSidebar };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"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":";;;AAgCA,MAAMA,iBAAiB,WAAHA,GAAGC,MAAAA,aAAmB,CAAwB;AAElE,SAASC;IACL,MAAMC,UAAUF,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACG,SACD,MAAM,IAAIC,MAAM;IAGpB,OAAOD;AACX;AAqBA,MAAME,4BAA4B,CAACC;IAC/B,MAAMC,SAASD,OAAO,UAAU;IAChC,MAAME,mBAAmBF,OAAO,oBAAoB,EAAE;IACtD,MAAMG,cAAcH,OAAO,eAAe,EAAE;IAC5C,OAAO;QACH,UAAUC;QACVA;QACAC;QACAC;QACA,YAAY;IAChB;AACJ;AAEA,MAAMC,kBAAkB,CAAC,EACrBC,SAAS,EACTC,QAAQ,EACR,OAAOC,WAAW,EAClBC,aAAa,EACb,GAAGC,OACgB;IACnB,MAAM,CAACC,cAAcC,gBAAgB,GAAGhB,MAAAA,QAAc,CAAe,IACjEI,0BAA0BQ;IAE9B,MAAM,CAACK,iBAAiBC,mBAAmB,GAAGlB,MAAAA,QAAc,CACxD,IAAImB;IAIR,MAAMC,aAAapB,MAAAA,MAAY,CAAgB;IAC/C,MAAMqB,iBAAiBrB,MAAAA,MAAY,CAAC;IAEpC,MAAM,EAAEsB,QAAQ,EAAEC,UAAU,EAAEjB,MAAM,EAAEC,gBAAgB,EAAEC,WAAW,EAAE,GAAGO;IAGxEf,MAAAA,SAAe,CAAC;QAEZ,IAAIqB,eAAe,OAAO,EAAE;YACxBA,eAAe,OAAO,GAAG;YACzB;QACJ;QAEA,IAAIR,eACAA,cAAc;YACVP;YACAC;YACAC;QACJ;IAER,GAAG;QAACF;QAAQC;QAAkBC;QAAaK;KAAc;IAEzD,MAAMW,cAAcxB,MAAAA,WAAiB,CACjC,CAACyB;QACG,MAAMC,WAAW,AAAiB,cAAjB,OAAOD,QAAuBA,MAAMH,YAAYG;QACjET,gBAAgBX,CAAAA,QAAU;gBACtB,GAAGA,KAAK;gBACR,UAAUqB;gBACV,YAAYA,WAAW,cAAc;YACzC;QAEA,IAAIN,WAAW,OAAO,EAAE;YACpBO,OAAO,YAAY,CAACP,WAAW,OAAO;YACtCA,WAAW,OAAO,GAAG;QACzB;QAEAA,WAAW,OAAO,GAAGO,OAAO,UAAU,CAAC;YACnCX,gBAAgBX,CAAAA,QAAU;oBACtB,GAAGA,KAAK;oBACR,YAAY;gBAChB;QACJ,GAAGuB;IACP,GACA;QAACN;KAAS;IAGd,MAAMO,YAAY7B,MAAAA,WAAiB,CAC/B,CAACyB;QACG,MAAMC,WAAW,AAAiB,cAAjB,OAAOD,QAAuBA,MAAMnB,UAAUmB;QAC/DT,gBAAgBX,CAAAA,QAAU;gBACtB,GAAGA,KAAK;gBACR,QAAQqB;YACZ;IACJ,GACA;QAACpB;KAAO;IAGZ,MAAMwB,iBAAiB9B,MAAAA,WAAiB,CAAC,IAC9BwB,YAAYO,CAAAA,OAAQ,CAACA,OAC7B;QAACP;KAAY;IAEhB,MAAMQ,eAAehC,MAAAA,WAAiB,CAAC,IAC5B6B,UAAUE,CAAAA,OAAQ,CAACA,OAC3B;QAACF;KAAU;IAEd,MAAMI,wBAAwBjC,MAAAA,WAAiB,CAC3C,CAACkC;QACGlB,gBAAgBX,CAAAA;YACZ,MAAME,mBAAmBF,MAAM,gBAAgB,CAAC,QAAQ,CAAC6B,aACnD7B,MAAM,gBAAgB,CAAC,MAAM,CAAC8B,CAAAA,KAAMA,OAAOD,aAC3C;mBAAI7B,MAAM,gBAAgB;gBAAE6B;aAAU;YAE5C,OAAO;gBACH,GAAG7B,KAAK;gBACRE;YACJ;QACJ;IACJ,GACA;QAACS;KAAgB;IAGrB,MAAMoB,oBAAoBpC,MAAAA,WAAiB,CACvC,CAACkC,YACU3B,iBAAiB,QAAQ,CAAC2B,YAErC;QAAC3B;KAAiB;IAGtB,MAAM8B,mBAAmBrC,MAAAA,WAAiB,CACtC,CAACsC;QACGtB,gBAAgBX,CAAAA;YACZ,MAAMkC,iBAAiBlC,MAAM,WAAW,CAAC,QAAQ,CAACiC,UAC5CjC,MAAM,WAAW,CAAC,MAAM,CAAC8B,CAAAA,KAAMA,OAAOG,UACtC;mBAAIjC,MAAM,WAAW;gBAAEiC;aAAO;YAEpC,OAAO;gBACH,GAAGjC,KAAK;gBACR,aAAakC;YACjB;QACJ;IACJ,GACA;QAACvB;KAAgB;IAGrB,MAAMwB,eAAexC,MAAAA,WAAiB,CAClC,CAACsC,SACU9B,YAAY,QAAQ,CAAC8B,SAEhC;QAAC9B;KAAY;IAGjB,MAAMiC,qBAAqBzC,MAAAA,WAAiB,CAAC,CAAC0C;QAC1CxB,mBAAmBa,CAAAA;YACf,MAAMY,SAAS,IAAIxB,IAAIY;YACvBY,OAAO,GAAG,CAACD,KAAK,EAAE,EAAEA;YACpB,OAAOC;QACX;IACJ,GAAG,EAAE;IAEL,MAAMC,uBAAuB5C,MAAAA,WAAiB,CAAC,CAACsC;QAC5CpB,mBAAmBa,CAAAA;YACf,MAAMY,SAAS,IAAIxB,IAAIY;YACvBY,OAAO,MAAM,CAACL;YACd,OAAOK;QACX;IACJ,GAAG,EAAE;IAEL,MAAME,qBAAqB7C,MAAAA,WAAiB,CAAC,IAElCQ,YACF,GAAG,CAAC2B,CAAAA,KAAMlB,gBAAgB,GAAG,CAACkB,KAC9B,MAAM,CAAC,CAACW,OAAiCA,AAASC,WAATD,OAC/C;QAAC7B;QAAiBT;KAAY;IAIjC,MAAMH,QAAQiB,WAAW,aAAa;IAEtC,MAAM0B,eAAehD,MAAAA,OAAa,CAC9B,IAAO;YACHK;YACAkB;YACAD;YACAf;YACAD;YACAkB;YACAM;YACAG;YACAJ;YACAG;YACAI;YACA5B;YACA6B;YACAG;YACAC;YACAG;YACAC;QACJ,IACA;QACIxC;QACAkB;QACAD;QACAf;QACAD;QACAkB;QACAK;QACAC;QACAE;QACAxB;QACA6B;QACAG;QACAC;QACAG;QACAC;KACH;IAGL,OAAO,WAAP,GACI,oBAAC9C,eAAe,QAAQ;QAAC,OAAOiD;qBAC5B,oBAAC;QACG,gBAAc;QACb,GAAGlC,KAAK;QACT,WAAWmC,GAAG,+CAA+CvC;OAE5DC;AAIjB;AACAF,gBAAgB,WAAW,GAAG"}

package/Sidebar/components/SidebarRoot.js

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

package/Sidebar/components/SidebarRoot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useRef","cn","cva","useSidebar","variants","pinned","false","SidebarRoot","side","className","children","props","state","setExpanded","elementRef","timeoutRef","onMouseEnter","current","window","clearTimeout","onMouseLeave","setTimeout","createElement","ref","Object","assign"],"sources":["SidebarRoot.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { cn, cva } from \"~/utils\";\nimport { useSidebar } from \"./SidebarProvider\";\n\ninterface SidebarRootProps extends React.ComponentProps<\"div\"> {\n    side?: \"left\" | \"right\";\n}\n\nconst variants = cva(\n    \"wby-group wby-peer wby-block wby-border-r-sm wby-border-neutral-dimmed wby-bg-neutral-light\",\n    {\n        variants: {\n            pinned: {\n                false: \"wby-fixed wby-top-0 wby-z-10 \"\n            }\n        }\n    }\n);\n\nconst SidebarRoot = ({ side = \"left\", className, children, ...props }: SidebarRootProps) => {\n    const { state, setExpanded, pinned } = useSidebar();\n\n    const elementRef = useRef<HTMLDivElement>(null);\n\n    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n    const timeoutRef = useRef<number | null>(null);\n\n    const onMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n        // If the sidebar is pinned, we don't want to open the sidebar on mouse enter.\n        if (pinned) {\n            return;\n        }\n\n        if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\n        }\n\n        setExpanded(true);\n    }, [pinned, setExpanded]);\n\n    const onMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n        // If the sidebar is pinned, we don't want to close the sidebar on mouse leave.\n        if (pinned) {\n            return;\n        }\n\n        // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.\n        timeoutRef.current = window.setTimeout(() => {\n            setExpanded(false);\n        }, 50);\n    }, [pinned, setExpanded]);\n\n    return (\n        <div\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            ref={elementRef}\n            data-state={state}\n            data-sidebar={\"root\"}\n            data-side={side}\n            className={variants({ pinned })}\n        >\n            <div\n                className={cn(\n                    \"wby-duration-175 wby-relative wby-h-svh wby-w-sidebar-expanded wby-bg-transparent wby-transition-[width] wby-ease-linear wby-duration-175\",\n                    \"group-data-[side=right]:wby-rotate-180\",\n                    \"group-data-[state=collapsed]:wby-w-sidebar-collapsed\"\n                )}\n            />\n            <div\n                className={cn(\n                    \"wby-duration-175 wby-fixed wby-inset-y-0 wby-z-10 wby-h-svh wby-w-sidebar-expanded wby-transition-[width] wby-ease-linear md:wby-flex\",\n                    side === \"left\" ? \"wby-left-0\" : \"wby-right-0\",\n                    \"group-data-[state=collapsed]:wby-w-sidebar-collapsed group-data-[side=left]:wby-border-r-px group-data-[side=right]:wby-border-l-px\",\n                    className\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    className=\"wby-flex wby-h-full wby-w-full wby-py-xs wby-flex-col\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport { SidebarRoot, type SidebarRootProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAClD,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,UAAU;AAMnB,MAAMC,QAAQ,GAAGF,GAAG,CAChB,6FAA6F,EAC7F;EACIE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CACJ,CAAC;AAED,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI,GAAG,MAAM;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAwB,CAAC,KAAK;EACxF,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAER;EAAO,CAAC,GAAGF,UAAU,CAAC,CAAC;EAEnD,MAAMW,UAAU,GAAGd,MAAM,CAAiB,IAAI,CAAC;;EAE/C;EACA,MAAMe,UAAU,GAAGf,MAAM,CAAgB,IAAI,CAAC;EAE9C,MAAMgB,YAAY,GAAGjB,WAAW,CAA0C,MAAM;IAC5E;IACA,IAAIM,MAAM,EAAE;MACR;IACJ;IAEA,IAAIU,UAAU,CAACE,OAAO,EAAE;MACpBC,MAAM,CAACC,YAAY,CAACJ,UAAU,CAACE,OAAO,CAAC;MACvCF,UAAU,CAACE,OAAO,GAAG,IAAI;IAC7B;IAEAJ,WAAW,CAAC,IAAI,CAAC;EACrB,CAAC,EAAE,CAACR,MAAM,EAAEQ,WAAW,CAAC,CAAC;EAEzB,MAAMO,YAAY,GAAGrB,WAAW,CAA0C,MAAM;IAC5E;IACA,IAAIM,MAAM,EAAE;MACR;IACJ;;IAEA;IACAU,UAAU,CAACE,OAAO,GAAGC,MAAM,CAACG,UAAU,CAAC,MAAM;MACzCR,WAAW,CAAC,KAAK,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAACR,MAAM,EAAEQ,WAAW,CAAC,CAAC;EAEzB,oBACIf,KAAA,CAAAwB,aAAA;IACIN,YAAY,EAAEA,YAAa;IAC3BI,YAAY,EAAEA,YAAa;IAC3BG,GAAG,EAAET,UAAW;IAChB,cAAYF,KAAM;IAClB,gBAAc,MAAO;IACrB,aAAWJ,IAAK;IAChBC,SAAS,EAAEL,QAAQ,CAAC;MAAEC;IAAO,CAAC;EAAE,gBAEhCP,KAAA,CAAAwB,aAAA;IACIb,SAAS,EAAER,EAAE,CACT,2IAA2I,EAC3I,wCAAwC,EACxC,sDACJ;EAAE,CACL,CAAC,eACFH,KAAA,CAAAwB,aAAA,QAAAE,MAAA,CAAAC,MAAA;IACIhB,SAAS,EAAER,EAAE,CACT,uIAAuI,EACvIO,IAAI,KAAK,MAAM,GAAG,YAAY,GAAG,aAAa,EAC9C,qIAAqI,EACrIC,SACJ;EAAE,GACEE,KAAK,gBAETb,KAAA,CAAAwB,aAAA;IACI,gBAAa,SAAS;IACtBb,SAAS,EAAC;EAAuD,GAEhEC,QACA,CACJ,CACJ,CAAC;AAEd,CAAC;AAED,SAASH,WAAW","ignoreList":[]}
+{"version":3,"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\n                    data-sidebar=\"sidebar\"\n                    className=\"flex h-full w-full py-xs flex-col overflow-hidden\"\n                >\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;QACG,gBAAa;QACb,WAAU;OAETD,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"}