@webiny/admin-ui 6.4.11 → 6.6.0-alpha.1

package/Sidebar/Sidebar.d.ts

@@ -7,21 +7,22 @@ interface SidebarProps extends Omit<React.ComponentPropsWithoutRef<typeof Sideba
     children: React.ReactNode;
     footer?: React.ReactNode;
 }
-declare const Sidebar: ((props: SidebarProps) => React.JSX.Element) & {
-    original: (props: SidebarProps) => React.JSX.Element;
+declare const SidebarBase: (props: SidebarProps) => React.JSX.Element;
+declare const Sidebar: typeof SidebarBase & {
+    original: typeof SidebarBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarProps) => React.JSX.Element) & {
-        original: (props: SidebarProps) => React.JSX.Element;
+    original: typeof SidebarBase & {
+        original: typeof SidebarBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarProps) => React.JSX.Element) & {
-        original: (props: SidebarProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarBase & {
+        original: typeof SidebarBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/components/SidebarContent.js

@@ -9,7 +9,7 @@ const SidebarContent = ({ className, children, ...props })=>{
         const { dir, onScroll, ...restProps } = props;
         return /*#__PURE__*/ react.createElement(ScrollArea, {
             "data-sidebar": "content",
-            className: cn("flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 [&_[data-radix-scroll-area-viewport]>div]:!block", className),
+            className: cn("flex text-neutral-primary min-h-0 flex-1 flex-col gap-2", className),
             ...restProps
         }, children);
     }

package/Sidebar/components/SidebarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/SidebarContent.js","sources":["../../../src/Sidebar/components/SidebarContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\nconst SidebarContent = ({ className, children, ...props }: React.ComponentProps<\"div\">) => {\n    const { state } = useSidebar();\n    const isExpanded = state === \"expanded\";\n\n    if (isExpanded) {\n        // Extract dir and onScroll props to avoid type conflicts with ScrollArea.\n        // oxlint-disable-next-line typescript/no-unused-vars\n        const { dir, onScroll, ...restProps } = props;\n        return (\n            <ScrollArea\n                data-sidebar=\"content\"\n                className={cn(\n                    \"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 [&_[data-radix-scroll-area-viewport]>div]:!block\",\n                    className\n                )}\n                {...restProps}\n            >\n                {children}\n            </ScrollArea>\n        );\n    }\n\n    return (\n        <div\n            {...props}\n            data-sidebar=\"content\"\n            className={cn(\n                \"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[state=collapsed]:overflow-hidden\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarContent };\n"],"names":["SidebarContent","className","children","props","state","useSidebar","isExpanded","dir","onScroll","restProps","ScrollArea","cn"],"mappings":";;;;AAKA,MAAMA,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAoC;IAClF,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,aAAaF,AAAU,eAAVA;IAEnB,IAAIE,YAAY;QAGZ,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;QACxC,OAAO,WAAP,GACI,oBAACO,YAAUA;YACP,gBAAa;YACb,WAAWC,GACP,4GACAV;YAEH,GAAGQ,SAAS;WAEZP;IAGb;IAEA,OAAO,WAAP,GACI,oBAAC;QACI,GAAGC,KAAK;QACT,gBAAa;QACb,WAAWQ,GACP,0IACAV;OAGHC;AAGb"}
+{"version":3,"file":"Sidebar/components/SidebarContent.js","sources":["../../../src/Sidebar/components/SidebarContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\nconst SidebarContent = ({ className, children, ...props }: React.ComponentProps<\"div\">) => {\n    const { state } = useSidebar();\n    const isExpanded = state === \"expanded\";\n\n    if (isExpanded) {\n        // Extract dir and onScroll props to avoid type conflicts with ScrollArea.\n        // oxlint-disable-next-line typescript/no-unused-vars\n        const { dir, onScroll, ...restProps } = props;\n        return (\n            <ScrollArea\n                data-sidebar=\"content\"\n                className={cn(\"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2\", className)}\n                {...restProps}\n            >\n                {children}\n            </ScrollArea>\n        );\n    }\n\n    return (\n        <div\n            {...props}\n            data-sidebar=\"content\"\n            className={cn(\n                \"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[state=collapsed]:overflow-hidden\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarContent };\n"],"names":["SidebarContent","className","children","props","state","useSidebar","isExpanded","dir","onScroll","restProps","ScrollArea","cn"],"mappings":";;;;AAKA,MAAMA,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAoC;IAClF,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,aAAaF,AAAU,eAAVA;IAEnB,IAAIE,YAAY;QAGZ,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;QACxC,OAAO,WAAP,GACI,oBAACO,YAAUA;YACP,gBAAa;YACb,WAAWC,GAAG,2DAA2DV;YACxE,GAAGQ,SAAS;WAEZP;IAGb;IAEA,OAAO,WAAP,GACI,oBAAC;QACI,GAAGC,KAAK;QACT,gBAAa;QACb,WAAWQ,GACP,0IACAV;OAGHC;AAGb"}

package/Sidebar/components/SidebarIcon.d.ts

@@ -3,21 +3,22 @@ import { type IconProps } from "../../Icon/index.js";
 interface SidebarIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
 }
-declare const SidebarIcon: (({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
-    original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+declare const SidebarIconBase: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+declare const SidebarIcon: typeof SidebarIconBase & {
+    original: typeof SidebarIconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
-        original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+    original: typeof SidebarIconBase & {
+        original: typeof SidebarIconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
-        original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<typeof SidebarIconBase & {
+        original: typeof SidebarIconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/components/SidebarProvider.d.ts

@@ -36,8 +36,8 @@ type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement> & {
     state?: SidebarCachedState;
     onChangeState?: (state: SidebarCachedState) => void;
 };
-declare const SidebarProvider: {
-    ({ className, children, state: cachedState, onChangeState, ...props }: SidebarProviderProps): React.JSX.Element;
-    displayName: string;
-};
+declare function SidebarProvider({ className, children, state: cachedState, onChangeState, ...props }: SidebarProviderProps): React.JSX.Element;
+declare namespace SidebarProvider {
+    var displayName: string;
+}
 export { SidebarProvider, useSidebar, type PinnedItemData };

package/Sidebar/components/SidebarRoot.js

@@ -56,7 +56,7 @@ const SidebarRoot = ({ side = "left", className, children, ...props })=>{
         ...props
     }, /*#__PURE__*/ react.createElement("div", {
         "data-sidebar": "sidebar",
-        className: "flex h-full w-full py-xs flex-col overflow-hidden"
+        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"

package/Sidebar/components/SidebarRoot.js.map

@@ -1 +1 @@
-{"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"}
+{"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/items/SidebarMenuGroup.d.ts

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

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { type SidebarMenuItemIconProps } from "./SidebarMenuItemIcon.js";
-import { type SidebarMenuItemActionProps } from "./SidebarMenuItemAction.js";
-import { type SidebarMenuItemBadgeProps } from "./SidebarMenuItemBadge.js";
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "./SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps } from "./SidebarMenuItemBadge.js";
 import { LinkProps } from "../../../index.js";
 export interface SidebarMenuItemBaseProps {
     text: React.ReactNode;
@@ -26,21 +26,22 @@ type SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {
 type SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;
 type SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;
 type SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;
-declare const SidebarMenuItem: ((props: SidebarMenuItemProps) => React.JSX.Element) & {
-    original: (props: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItemBase: (props: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItem: typeof SidebarMenuItemBase & {
+    original: typeof SidebarMenuItemBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemProps) => React.JSX.Element;
+    original: typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -64,7 +65,7 @@ declare const SidebarMenuItem: ((props: SidebarMenuItemProps) => React.JSX.Eleme
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
-    Badge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
+    Action: typeof SidebarMenuItemAction;
+    Badge: typeof SidebarMenuItemBadge;
 };
 export { SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuItemButtonProps, type SidebarMenuItemLinkProps, type SidebarMenuItemGroupProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps, type SidebarMenuItemBadgeProps };

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

@@ -3,21 +3,22 @@ import { type IconProps } from "../../../Icon/index.js";
 interface SidebarMenuItemIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
 }
-declare const SidebarMenuItemIcon: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-    original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+declare const SidebarMenuItemIconBase: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+declare const SidebarMenuItemIcon: typeof SidebarMenuItemIconBase & {
+    original: typeof SidebarMenuItemIconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+    original: typeof SidebarMenuItemIconBase & {
+        original: typeof SidebarMenuItemIconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<typeof SidebarMenuItemIconBase & {
+        original: typeof SidebarMenuItemIconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

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

@@ -1,23 +1,24 @@
 import React from "react";
 import { type SidebarMenuItemLinkProps } from "./SidebarMenuItem.js";
 import { type SidebarMenuItemIconProps } from "../../../Sidebar/components/items/SidebarMenuItemIcon.js";
-import { type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
-import { type SidebarMenuItemBadgeProps } from "../../../Sidebar/components/items/SidebarMenuItemBadge.js";
-declare const SidebarMenuLink: ((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-    original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps } from "../../../Sidebar/components/items/SidebarMenuItemBadge.js";
+declare const SidebarMenuLinkBase: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+declare const SidebarMenuLink: typeof SidebarMenuLinkBase & {
+    original: typeof SidebarMenuLinkBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+    original: typeof SidebarMenuLinkBase & {
+        original: typeof SidebarMenuLinkBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuLinkBase & {
+        original: typeof SidebarMenuLinkBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -41,7 +42,7 @@ declare const SidebarMenuLink: ((props: SidebarMenuItemLinkProps) => React.JSX.E
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
-    Badge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
+    Action: typeof SidebarMenuItemAction;
+    Badge: typeof SidebarMenuItemBadge;
 };
 export { SidebarMenuLink, type SidebarMenuItemLinkProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps, type SidebarMenuItemBadgeProps };

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

@@ -11,8 +11,8 @@ interface SidebarMenuProviderProps {
 }
 declare const SidebarMenuContext: React.Context<SidebarMenuContext>;
 declare function useSidebarMenu(): SidebarMenuContext;
-declare const SidebarMenuProvider: {
-    ({ level, parentIcon, children }: SidebarMenuProviderProps): React.JSX.Element;
-    displayName: string;
-};
+declare function SidebarMenuProvider({ level, parentIcon, children }: SidebarMenuProviderProps): React.JSX.Element;
+declare namespace SidebarMenuProvider {
+    var displayName: string;
+}
 export { SidebarMenuProvider, useSidebarMenu };

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

@@ -1,20 +1,22 @@
 import React from "react";
+import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
 import { type SidebarMenuItemProps } from "./SidebarMenuItem.js";
-declare const SidebarMenuRootItem: (({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-    original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItemBase: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuRootItem: typeof SidebarMenuItemBase & {
+    original: typeof SidebarMenuItemBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+    original: typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -38,6 +40,6 @@ declare const SidebarMenuRootItem: (({ children, className, pinnable, action, ..
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: import("./SidebarMenuItemAction.js").SidebarMenuItemActionProps) => React.JSX.Element | null;
+    Action: typeof SidebarMenuItemAction;
 };
 export { SidebarMenuRootItem, type SidebarMenuItemProps };

package/Sidebar/components/items/SidebarMenuSubButton.js

@@ -1,5 +1,5 @@
 import react from "react";
-import { cn, cva } from "../../../utils.js";
+import { cva } from "../../../utils.js";
 import { DivButton } from "./DivButton.js";
 import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
 import { useAdminUi } from "../../../index.js";
@@ -35,28 +35,25 @@ const SidebarMenuSubButton = ({ onClick, variant, active, disabled, icon, pinned
         className: variants({
             variant,
             disabled,
-            className: cn(className, action && "pr-xl")
+            className
         }),
         onClick
     };
-    const textContent = /*#__PURE__*/ react.createElement("span", {
-        className: "truncate"
-    }, text);
     const content = to ? /*#__PURE__*/ react.createElement(LinkComponent, {
         ...sharedProps,
         to: to,
         ...linkProps
-    }, icon, textContent, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
+    }, icon, text, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
         text: badge
     }) : badge)) : /*#__PURE__*/ react.createElement(DivButton, {
         ...sharedProps,
         disabled: disabled,
         tabIndex: "group-label" === variant ? -1 : void 0
-    }, icon, textContent, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
+    }, icon, text, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
         text: badge
     }) : badge));
     return /*#__PURE__*/ react.createElement("div", {
-        className: "flex items-center w-full min-w-0 relative group/menu-sub-button"
+        className: "flex items-center w-full relative group/menu-sub-button"
     }, content, action && /*#__PURE__*/ react.createElement("div", {
         className: "absolute top-0 right-0 mr-sm h-full flex items-center"
     }, action));

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuSubButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { SidebarMenuItemBadge } from \"./SidebarMenuItemBadge.js\";\nimport { DistributedOmit } from \"type-fest\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full cursor-pointer items-center gap-sm\",\n        \"text-md text-neutral-primary no-underline!\",\n        \"rounded-md p-xs-plus pr-sm outline-none\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-sub-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=collapsed]:hidden\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\": [\n                    \"uppercase font-semibold text-neutral-muted! text-sm\",\n                    \"pt-md pb-xs-plus pointer-events-none\",\n                    \"hover:bg-transparent! group-hover/menu-sub-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n                ]\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuSubButtonProps = DistributedOmit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuSubButton = ({\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    badge,\n    className,\n    to,\n    ...linkProps\n}: SidebarMenuSubButtonProps) => {\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const sharedProps = {\n        \"data-sidebar\": \"menu-sub-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled, className: cn(className, action && \"pr-xl\") }),\n        onClick\n    };\n\n    const textContent = <span className=\"truncate\">{text}</span>;\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {textContent}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </LinkComponent>\n    ) : (\n        // We can't use the default button element here because the content of the button\n        // can also contain a button, which is not allowed in HTML.\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {textContent}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </DivButton>\n    );\n\n    return (\n        <div className={\"flex items-center w-full min-w-0 relative group/menu-sub-button\"}>\n            {content}\n\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubButton };\n"],"names":["variants","cva","SidebarMenuSubButton","onClick","variant","active","disabled","icon","pinnedIcon","action","text","badge","className","to","linkProps","LinkComponent","useAdminUi","sharedProps","cn","textContent","content","SidebarMenuItemBadge","DivButton","undefined"],"mappings":";;;;;AAQA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eAAe;gBACX;gBACA;gBACA;aACH;QACL;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,uBAAuB,CAAC,EAC1BC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,EAAE,EACF,GAAGC,WACqB;IACxB,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IAEzC,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeZ;QACf,WAAWL,SAAS;YAAEI;YAASE;YAAU,WAAWY,GAAGN,WAAWH,UAAU;QAAS;QACrFN;IACJ;IAEA,MAAMgB,cAAc,WAAdA,GAAc,oBAAC;QAAK,WAAU;OAAYT;IAEhD,MAAMU,UAAUP,KAAK,WAALA,GACZ,oBAACE,eAAAA;QAAe,GAAGE,WAAW;QAAE,IAAIJ;QAAK,GAAGC,SAAS;OAChDP,MACAY,aACAR,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACU,sBAAoBA;QAAC,MAAMV;SAAYA,KAAI,K,cAKvF,oBAACW,WAASA;QACL,GAAGL,WAAW;QACf,UAAUX;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKmB;OAE1ChB,MACAY,aACAR,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACU,sBAAoBA;QAAC,MAAMV;SAAYA,KAAI;IAI3F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXS,SAEAX,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuSubButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { SidebarMenuItemBadge } from \"./SidebarMenuItemBadge.js\";\nimport { DistributedOmit } from \"type-fest\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full cursor-pointer items-center gap-sm\",\n        \"text-md text-neutral-primary no-underline!\",\n        \"rounded-md p-xs-plus pr-sm outline-none\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-sub-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=collapsed]:hidden\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\": [\n                    \"uppercase font-semibold text-neutral-muted! text-sm\",\n                    \"pt-md pb-xs-plus pointer-events-none\",\n                    \"hover:bg-transparent! group-hover/menu-sub-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n                ]\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuSubButtonProps = DistributedOmit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuSubButton = ({\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    badge,\n    className,\n    to,\n    ...linkProps\n}: SidebarMenuSubButtonProps) => {\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const sharedProps = {\n        \"data-sidebar\": \"menu-sub-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled, className }),\n        onClick\n    };\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </LinkComponent>\n    ) : (\n        // We can't use the default button element here because the content of the button\n        // can also contain a button, which is not allowed in HTML.\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </DivButton>\n    );\n\n    return (\n        <div className={\"flex items-center w-full relative group/menu-sub-button\"}>\n            {content}\n\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubButton };\n"],"names":["variants","cva","SidebarMenuSubButton","onClick","variant","active","disabled","icon","pinnedIcon","action","text","badge","className","to","linkProps","LinkComponent","useAdminUi","sharedProps","content","SidebarMenuItemBadge","DivButton","undefined"],"mappings":";;;;;AAQA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eAAe;gBACX;gBACA;gBACA;aACH;QACL;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,uBAAuB,CAAC,EAC1BC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,EAAE,EACF,GAAGC,WACqB;IACxB,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IAEzC,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeZ;QACf,WAAWL,SAAS;YAAEI;YAASE;YAAUM;QAAU;QACnDT;IACJ;IAEA,MAAMe,UAAUL,KAAK,WAALA,GACZ,oBAACE,eAAAA;QAAe,GAAGE,WAAW;QAAE,IAAIJ;QAAK,GAAGC,SAAS;OAChDP,MACAG,MACAC,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACQ,sBAAoBA;QAAC,MAAMR;SAAYA,KAAI,K,cAKvF,oBAACS,WAASA;QACL,GAAGH,WAAW;QACf,UAAUX;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKiB;OAE1Cd,MACAG,MACAC,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACQ,sBAAoBA;QAAC,MAAMR;SAAYA,KAAI;IAI3F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXO,SAEAT,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}

package/Sidebar/components/items/SidebarMenuSubItem.js

@@ -117,7 +117,7 @@ const SidebarMenuSubItem = ({ children, className, pinnable, action, collapsible
             className: "flex items-center gap-xs"
         }, pinAction, chevron) : chevron;
         if (!collapsible) return /*#__PURE__*/ react.createElement("div", {
-            className: "flex items-center min-w-0"
+            className: "flex items-center"
         }, /*#__PURE__*/ react.createElement(SidebarMenuSubItemIndentation, {
             lvl: currentLevel,
             variant: buttonProps.variant
@@ -127,7 +127,7 @@ const SidebarMenuSubItem = ({ children, className, pinnable, action, collapsible
             open: isSectionExpanded,
             onOpenChange: toggleSectionExpanded
         }, /*#__PURE__*/ react.createElement("div", {
-            className: "flex items-center min-w-0"
+            className: "flex items-center"
         }, /*#__PURE__*/ react.createElement(SidebarMenuSubItemIndentation, {
             lvl: currentLevel,
             variant: buttonProps.variant
@@ -153,7 +153,7 @@ const SidebarMenuSubItem = ({ children, className, pinnable, action, collapsible
     ]);
     return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("li", {
         "data-sidebar": "menu-sub-item",
-        className: cn("group/menu-sub-item relative flex min-w-0", className)
+        className: cn("group/menu-sub-item relative flex", className)
     }, sidebarMenuSubButton), children && !collapsible ? children : null);
 };
 export { SidebarMenuSubItem };

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuSubItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { Collapsible } from \"radix-ui\";\nimport { SidebarMenuSubButton } from \"./SidebarMenuSubButton.js\";\nimport { SidebarMenuSubItemIndentation } from \"./SidebarMenuSubItemIndentation.js\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as PinIcon } from \"@webiny/icons/push_pin.svg\";\nimport { ReactComponent as UnPinIcon } from \"@webiny/icons/push_pin_off.svg\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\n\nconst SidebarMenuSubItem = ({\n    children,\n    className,\n    pinnable,\n    action,\n    collapsible = true,\n    ...buttonProps\n}: SidebarMenuItemProps) => {\n    const { currentLevel, parentIcon } = useSidebarMenu();\n    const sidebar = useSidebar();\n    const [showChevron, setShowChevron] = useState(false);\n\n    const menuItemId = useMemo(() => {\n        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);\n    }, [buttonProps.text, currentLevel]);\n\n    const isSectionExpanded = useMemo(() => {\n        return sidebar.isSectionExpanded(menuItemId);\n    }, [sidebar.expandedSections]);\n\n    const toggleSectionExpanded = useCallback(() => {\n        sidebar.toggleSectionExpanded(menuItemId);\n    }, [isSectionExpanded]);\n\n    const isPinned = sidebar.isItemPinned(menuItemId);\n\n    // Icon to use when this item is pinned\n    const pinnedItemIcon = useMemo(() => {\n        if (buttonProps.pinnedIcon) {\n            return buttonProps.pinnedIcon;\n        }\n\n        return buttonProps.icon || parentIcon;\n    }, [buttonProps.pinnedIcon, buttonProps.icon, parentIcon]);\n\n    // Register when pinned, unregister when unpinned\n    // Re-register when active state changes to keep pinned items in sync\n    React.useEffect(() => {\n        if (pinnable && isPinned) {\n            sidebar.registerPinnedItem({\n                id: menuItemId,\n                text: buttonProps.text,\n                icon: pinnedItemIcon,\n                to: buttonProps.to,\n                onClick: buttonProps.onClick,\n                active: buttonProps.active\n            });\n        } else if (pinnable && !isPinned) {\n            // Only unregister if this item is explicitly unpinned\n            sidebar.unregisterPinnedItem(menuItemId);\n        }\n    }, [pinnable, isPinned, pinnedItemIcon, menuItemId, buttonProps.active]);\n\n    const pinAction = useMemo(() => {\n        if (!pinnable) {\n            return action;\n        }\n\n        const handlePinClick = (e: React.MouseEvent) => {\n            e.stopPropagation();\n            e.preventDefault();\n\n            if (isPinned) {\n                sidebar.unregisterPinnedItem(menuItemId);\n            } else {\n                sidebar.registerPinnedItem({\n                    id: menuItemId,\n                    text: buttonProps.text,\n                    icon: pinnedItemIcon,\n                    to: buttonProps.to,\n                    onClick: buttonProps.onClick,\n                    active: buttonProps.active\n                });\n            }\n\n            sidebar.toggleItemPinned(menuItemId);\n        };\n\n        const pinButton = (\n            <SidebarMenuItemAction\n                element={isPinned ? <UnPinIcon /> : <PinIcon />}\n                onClick={handlePinClick}\n                showOnHover={true}\n            />\n        );\n\n        // If there's a custom action, combine them\n        // Don't modify the custom action - it should keep its original behavior\n        if (action) {\n            return (\n                <div className=\"flex items-center gap-xs\">\n                    {pinButton}\n                    {action}\n                </div>\n            );\n        }\n\n        return pinButton;\n    }, [pinnable, isPinned, pinnedItemIcon, action, sidebar, menuItemId]);\n\n    useEffect(() => {\n        if (sidebar.expanded) {\n            const timer = setTimeout(() => {\n                setShowChevron(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowChevron(false);\n        return undefined;\n    }, [sidebar.expanded]);\n\n    const sidebarMenuSubButton = useMemo(() => {\n        if (!children) {\n            return (\n                <>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} action={pinAction} />\n                </>\n            );\n        }\n\n        const chevron = showChevron ? (\n            <Icon\n                label={\"Expand / Collapse\"}\n                size={\"sm\"}\n                className={\n                    \"ml-auto transition-transform duration-100 group-data-[state=open]/menu-sub-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        ) : null;\n\n        const collapsibleAction = pinnable ? (\n            <div className=\"flex items-center gap-xs\">\n                {pinAction}\n                {chevron}\n            </div>\n        ) : (\n            chevron\n        );\n\n        if (!collapsible) {\n            return (\n                <div className={\"flex items-center min-w-0\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} />\n                </div>\n            );\n        }\n\n        return (\n            <Collapsible.Root\n                className=\"w-full group/menu-sub-item-collapsible\"\n                open={isSectionExpanded}\n                onOpenChange={toggleSectionExpanded}\n            >\n                <div className={\"flex items-center min-w-0\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <Collapsible.Trigger asChild>\n                        <SidebarMenuSubButton\n                            {...buttonProps}\n                            action={collapsibleAction}\n                            className={\n                                \"group-data-[state=open]/menu-sub-item-collapsible:font-semibold!\"\n                            }\n                        />\n                    </Collapsible.Trigger>\n                </div>\n                <Collapsible.Content>\n                    <SidebarMenuSub parentIcon={buttonProps.icon}>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [\n        children,\n        buttonProps,\n        currentLevel,\n        menuItemId,\n        isSectionExpanded,\n        toggleSectionExpanded,\n        showChevron,\n        pinnable,\n        pinAction\n    ]);\n\n    return (\n        <>\n            <li\n                data-sidebar=\"menu-sub-item\"\n                className={cn(\"group/menu-sub-item relative flex min-w-0\", className)}\n            >\n                {sidebarMenuSubButton}\n            </li>\n            {children && !collapsible ? children : null}\n        </>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"names":["SidebarMenuSubItem","children","className","pinnable","action","collapsible","buttonProps","currentLevel","parentIcon","useSidebarMenu","sidebar","useSidebar","showChevron","setShowChevron","useState","menuItemId","useMemo","btoa","isSectionExpanded","toggleSectionExpanded","useCallback","isPinned","pinnedItemIcon","React","pinAction","handlePinClick","e","pinButton","SidebarMenuItemAction","UnPinIcon","PinIcon","useEffect","timer","setTimeout","clearTimeout","sidebarMenuSubButton","SidebarMenuSubItemIndentation","SidebarMenuSubButton","chevron","Icon","KeyboardArrowRightIcon","collapsibleAction","Collapsible","SidebarMenuSub","cn"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,qBAAqB,CAAC,EACxBC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,cAAc,IAAI,EAClB,GAAGC,aACgB;IACnB,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGC;IACrC,MAAMC,UAAUC;IAChB,MAAM,CAACC,aAAaC,eAAe,GAAGC,SAAS;IAE/C,MAAMC,aAAaC,QAAQ,IAChBC,KAAK,CAAC,aAAa,EAAEV,aAAa,CAAC,EAAED,YAAY,IAAI,EAAE,GAC/D;QAACA,YAAY,IAAI;QAAEC;KAAa;IAEnC,MAAMW,oBAAoBF,QAAQ,IACvBN,QAAQ,iBAAiB,CAACK,aAClC;QAACL,QAAQ,gBAAgB;KAAC;IAE7B,MAAMS,wBAAwBC,YAAY;QACtCV,QAAQ,qBAAqB,CAACK;IAClC,GAAG;QAACG;KAAkB;IAEtB,MAAMG,WAAWX,QAAQ,YAAY,CAACK;IAGtC,MAAMO,iBAAiBN,QAAQ;QAC3B,IAAIV,YAAY,UAAU,EACtB,OAAOA,YAAY,UAAU;QAGjC,OAAOA,YAAY,IAAI,IAAIE;IAC/B,GAAG;QAACF,YAAY,UAAU;QAAEA,YAAY,IAAI;QAAEE;KAAW;IAIzDe,MAAAA,SAAe,CAAC;QACZ,IAAIpB,YAAYkB,UACZX,QAAQ,kBAAkB,CAAC;YACvB,IAAIK;YACJ,MAAMT,YAAY,IAAI;YACtB,MAAMgB;YACN,IAAIhB,YAAY,EAAE;YAClB,SAASA,YAAY,OAAO;YAC5B,QAAQA,YAAY,MAAM;QAC9B;aACG,IAAIH,YAAY,CAACkB,UAEpBX,QAAQ,oBAAoB,CAACK;IAErC,GAAG;QAACZ;QAAUkB;QAAUC;QAAgBP;QAAYT,YAAY,MAAM;KAAC;IAEvE,MAAMkB,YAAYR,QAAQ;QACtB,IAAI,CAACb,UACD,OAAOC;QAGX,MAAMqB,iBAAiB,CAACC;YACpBA,EAAE,eAAe;YACjBA,EAAE,cAAc;YAEhB,IAAIL,UACAX,QAAQ,oBAAoB,CAACK;iBAE7BL,QAAQ,kBAAkB,CAAC;gBACvB,IAAIK;gBACJ,MAAMT,YAAY,IAAI;gBACtB,MAAMgB;gBACN,IAAIhB,YAAY,EAAE;gBAClB,SAASA,YAAY,OAAO;gBAC5B,QAAQA,YAAY,MAAM;YAC9B;YAGJI,QAAQ,gBAAgB,CAACK;QAC7B;QAEA,MAAMY,YAAY,WAAZA,GACF,oBAACC,uBAAqBA;YAClB,SAASP,WAAW,WAAXA,GAAW,oBAACQ,iCAASA,QAAAA,WAAAA,GAAM,oBAACC,6BAAOA;YAC5C,SAASL;YACT,aAAa;;QAMrB,IAAIrB,QACA,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;WACVuB,WACAvB;QAKb,OAAOuB;IACX,GAAG;QAACxB;QAAUkB;QAAUC;QAAgBlB;QAAQM;QAASK;KAAW;IAEpEgB,UAAU;QACN,IAAIrB,QAAQ,QAAQ,EAAE;YAClB,MAAMsB,QAAQC,WAAW;gBACrBpB,eAAe;YACnB,GAAG;YACH,OAAO,IAAMqB,aAAaF;QAC9B;QACAnB,eAAe;IAEnB,GAAG;QAACH,QAAQ,QAAQ;KAAC;IAErB,MAAMyB,uBAAuBnB,QAAQ;QACjC,IAAI,CAACf,UACD,OAAO,WAAP,GACI,wDACI,oBAACmC,+BAA6BA;YAC1B,KAAK7B;YACL,SAASD,YAAY,OAAO;0BAEhC,oBAAC+B,sBAAoBA;YAAE,GAAG/B,WAAW;YAAE,QAAQkB;;QAK3D,MAAMc,UAAU1B,cAAc,WAAdA,GACZ,oBAAC2B,MAAIA;YACD,OAAO;YACP,MAAM;YACN,WACI;YAEJ,OAAO;YACP,gBAAc;YACd,oBAAM,oBAACC,gBAAsBA;aAEjC;QAEJ,MAAMC,oBAAoBtC,WAAW,WAAXA,GACtB,oBAAC;YAAI,WAAU;WACVqB,WACAc,WAGLA;QAGJ,IAAI,CAACjC,aACD,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC+B,+BAA6BA;YAC1B,KAAK7B;YACL,SAASD,YAAY,OAAO;0BAEhC,oBAAC+B,sBAAyB/B;QAKtC,OAAO,WAAP,GACI,oBAACoC,YAAY,IAAI;YACb,WAAU;YACV,MAAMxB;YACN,cAAcC;yBAEd,oBAAC;YAAI,WAAW;yBACZ,oBAACiB,+BAA6BA;YAC1B,KAAK7B;YACL,SAASD,YAAY,OAAO;0BAEhC,oBAACoC,YAAY,OAAO;YAAC;yBACjB,oBAACL,sBAAoBA;YAChB,GAAG/B,WAAW;YACf,QAAQmC;YACR,WACI;4BAKhB,oBAACC,YAAY,OAAO,sBAChB,oBAACC,gBAAcA;YAAC,YAAYrC,YAAY,IAAI;WAAGL;IAI/D,GAAG;QACCA;QACAK;QACAC;QACAQ;QACAG;QACAC;QACAP;QACAT;QACAqB;KACH;IAED,OAAO,WAAP,GACI,wDACI,oBAAC;QACG,gBAAa;QACb,WAAWoB,GAAG,6CAA6C1C;OAE1DiC,uBAEJlC,YAAY,CAACI,cAAcJ,WAAW;AAGnD"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuSubItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { Collapsible } from \"radix-ui\";\nimport { SidebarMenuSubButton } from \"./SidebarMenuSubButton.js\";\nimport { SidebarMenuSubItemIndentation } from \"./SidebarMenuSubItemIndentation.js\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as PinIcon } from \"@webiny/icons/push_pin.svg\";\nimport { ReactComponent as UnPinIcon } from \"@webiny/icons/push_pin_off.svg\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\n\nconst SidebarMenuSubItem = ({\n    children,\n    className,\n    pinnable,\n    action,\n    collapsible = true,\n    ...buttonProps\n}: SidebarMenuItemProps) => {\n    const { currentLevel, parentIcon } = useSidebarMenu();\n    const sidebar = useSidebar();\n    const [showChevron, setShowChevron] = useState(false);\n\n    const menuItemId = useMemo(() => {\n        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);\n    }, [buttonProps.text, currentLevel]);\n\n    const isSectionExpanded = useMemo(() => {\n        return sidebar.isSectionExpanded(menuItemId);\n    }, [sidebar.expandedSections]);\n\n    const toggleSectionExpanded = useCallback(() => {\n        sidebar.toggleSectionExpanded(menuItemId);\n    }, [isSectionExpanded]);\n\n    const isPinned = sidebar.isItemPinned(menuItemId);\n\n    // Icon to use when this item is pinned\n    const pinnedItemIcon = useMemo(() => {\n        if (buttonProps.pinnedIcon) {\n            return buttonProps.pinnedIcon;\n        }\n\n        return buttonProps.icon || parentIcon;\n    }, [buttonProps.pinnedIcon, buttonProps.icon, parentIcon]);\n\n    // Register when pinned, unregister when unpinned\n    // Re-register when active state changes to keep pinned items in sync\n    React.useEffect(() => {\n        if (pinnable && isPinned) {\n            sidebar.registerPinnedItem({\n                id: menuItemId,\n                text: buttonProps.text,\n                icon: pinnedItemIcon,\n                to: buttonProps.to,\n                onClick: buttonProps.onClick,\n                active: buttonProps.active\n            });\n        } else if (pinnable && !isPinned) {\n            // Only unregister if this item is explicitly unpinned\n            sidebar.unregisterPinnedItem(menuItemId);\n        }\n    }, [pinnable, isPinned, pinnedItemIcon, menuItemId, buttonProps.active]);\n\n    const pinAction = useMemo(() => {\n        if (!pinnable) {\n            return action;\n        }\n\n        const handlePinClick = (e: React.MouseEvent) => {\n            e.stopPropagation();\n            e.preventDefault();\n\n            if (isPinned) {\n                sidebar.unregisterPinnedItem(menuItemId);\n            } else {\n                sidebar.registerPinnedItem({\n                    id: menuItemId,\n                    text: buttonProps.text,\n                    icon: pinnedItemIcon,\n                    to: buttonProps.to,\n                    onClick: buttonProps.onClick,\n                    active: buttonProps.active\n                });\n            }\n\n            sidebar.toggleItemPinned(menuItemId);\n        };\n\n        const pinButton = (\n            <SidebarMenuItemAction\n                element={isPinned ? <UnPinIcon /> : <PinIcon />}\n                onClick={handlePinClick}\n                showOnHover={true}\n            />\n        );\n\n        // If there's a custom action, combine them\n        // Don't modify the custom action - it should keep its original behavior\n        if (action) {\n            return (\n                <div className=\"flex items-center gap-xs\">\n                    {pinButton}\n                    {action}\n                </div>\n            );\n        }\n\n        return pinButton;\n    }, [pinnable, isPinned, pinnedItemIcon, action, sidebar, menuItemId]);\n\n    useEffect(() => {\n        if (sidebar.expanded) {\n            const timer = setTimeout(() => {\n                setShowChevron(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowChevron(false);\n        return undefined;\n    }, [sidebar.expanded]);\n\n    const sidebarMenuSubButton = useMemo(() => {\n        if (!children) {\n            return (\n                <>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} action={pinAction} />\n                </>\n            );\n        }\n\n        const chevron = showChevron ? (\n            <Icon\n                label={\"Expand / Collapse\"}\n                size={\"sm\"}\n                className={\n                    \"ml-auto transition-transform duration-100 group-data-[state=open]/menu-sub-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        ) : null;\n\n        const collapsibleAction = pinnable ? (\n            <div className=\"flex items-center gap-xs\">\n                {pinAction}\n                {chevron}\n            </div>\n        ) : (\n            chevron\n        );\n\n        if (!collapsible) {\n            return (\n                <div className={\"flex items-center\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} />\n                </div>\n            );\n        }\n\n        return (\n            <Collapsible.Root\n                className=\"w-full group/menu-sub-item-collapsible\"\n                open={isSectionExpanded}\n                onOpenChange={toggleSectionExpanded}\n            >\n                <div className={\"flex items-center\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <Collapsible.Trigger asChild>\n                        <SidebarMenuSubButton\n                            {...buttonProps}\n                            action={collapsibleAction}\n                            className={\n                                \"group-data-[state=open]/menu-sub-item-collapsible:font-semibold!\"\n                            }\n                        />\n                    </Collapsible.Trigger>\n                </div>\n                <Collapsible.Content>\n                    <SidebarMenuSub parentIcon={buttonProps.icon}>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [\n        children,\n        buttonProps,\n        currentLevel,\n        menuItemId,\n        isSectionExpanded,\n        toggleSectionExpanded,\n        showChevron,\n        pinnable,\n        pinAction\n    ]);\n\n    return (\n        <>\n            <li\n                data-sidebar=\"menu-sub-item\"\n                className={cn(\"group/menu-sub-item relative flex\", className)}\n            >\n                {sidebarMenuSubButton}\n            </li>\n            {children && !collapsible ? children : null}\n        </>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"names":["SidebarMenuSubItem","children","className","pinnable","action","collapsible","buttonProps","currentLevel","parentIcon","useSidebarMenu","sidebar","useSidebar","showChevron","setShowChevron","useState","menuItemId","useMemo","btoa","isSectionExpanded","toggleSectionExpanded","useCallback","isPinned","pinnedItemIcon","React","pinAction","handlePinClick","e","pinButton","SidebarMenuItemAction","UnPinIcon","PinIcon","useEffect","timer","setTimeout","clearTimeout","sidebarMenuSubButton","SidebarMenuSubItemIndentation","SidebarMenuSubButton","chevron","Icon","KeyboardArrowRightIcon","collapsibleAction","Collapsible","SidebarMenuSub","cn"],"mappings":"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"}

package/Skeleton/Skeleton.d.ts

@@ -2,25 +2,27 @@ import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const skeletonVariants: (props?: ({
     type?: "area" | "text" | "thumbnail" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | "3xl" | null | undefined;
+    size?: "3xl" | "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | null | undefined;
+    shade?: "dark" | "light" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
-declare const Skeleton: (({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-    original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+declare const DecoratableSkeleton: ({ size, type, shade, className, ...props }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: typeof DecoratableSkeleton & {
+    original: typeof DecoratableSkeleton;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-        original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+    original: typeof DecoratableSkeleton & {
+        original: typeof DecoratableSkeleton;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-        original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableSkeleton & {
+        original: typeof DecoratableSkeleton;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import react from "react";
 import { cn, cva, makeDecoratable } from "../utils.js";
-const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
+const skeletonVariants = cva("rounded-sm", {
     variants: {
         type: {
             text: "w-full",
@@ -15,6 +15,10 @@ const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
             xl: "h-xl",
             xxl: "h-[40px]",
             "3xl": "h-xxl"
+        },
+        shade: {
+            dark: "animate-skeleton-pulse",
+            light: "animate-skeleton-pulse-light"
         }
     },
     compoundVariants: [
@@ -31,13 +35,15 @@ const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
     ],
     defaultVariants: {
         type: "area",
-        size: "lg"
+        size: "lg",
+        shade: "dark"
     }
 });
-const DecoratableSkeleton = ({ size, type, className, ...props })=>/*#__PURE__*/ react.createElement("div", {
+const DecoratableSkeleton = ({ size, type, shade, className, ...props })=>/*#__PURE__*/ react.createElement("div", {
         className: cn(skeletonVariants({
             size,
-            type
+            type,
+            shade
         }), className),
         ...props
     });

package/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton/Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"animate-skeleton-pulse rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"names":["skeletonVariants","cva","DecoratableSkeleton","size","type","className","props","cn","Skeleton","makeDecoratable"],"mappings":";;AAGA,MAAMA,mBAAmBC,IAAI,qCAAqC;IAC9D,UAAU;QACN,MAAM;YACF,MAAM;YACN,WAAW;YACX,MAAM;QACV;QACA,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;YACL,OAAO;QACX;IACJ;IACA,kBAAkB;QAEd;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;QACA;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;KACH;IACD,iBAAiB;QACb,MAAM;QACN,MAAM;IACV;AACJ;AAKA,MAAMC,sBAAsB,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,OAAsB,GACpE,WAAP,GAAO,oBAAC;QAAI,WAAWC,GAAGP,iBAAiB;YAAEG;YAAMC;QAAK,IAAIC;QAAa,GAAGC,KAAK;;AAGrF,MAAME,WAAWC,gBAAgB,YAAYP"}
+{"version":3,"file":"Skeleton/Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        },\n        shade: {\n            dark: \"animate-skeleton-pulse\",\n            light: \"animate-skeleton-pulse-light\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\",\n        shade: \"dark\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, shade, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type, shade }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"names":["skeletonVariants","cva","DecoratableSkeleton","size","type","shade","className","props","cn","Skeleton","makeDecoratable"],"mappings":";;AAGA,MAAMA,mBAAmBC,IAAI,cAAc;IACvC,UAAU;QACN,MAAM;YACF,MAAM;YACN,WAAW;YACX,MAAM;QACV;QACA,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;YACL,OAAO;QACX;QACA,OAAO;YACH,MAAM;YACN,OAAO;QACX;IACJ;IACA,kBAAkB;QAEd;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;QACA;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;KACH;IACD,iBAAiB;QACb,MAAM;QACN,MAAM;QACN,OAAO;IACX;AACJ;AAKA,MAAMC,sBAAsB,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,OAAsB,GAC3E,WAAP,GAAO,oBAAC;QAAI,WAAWC,GAAGR,iBAAiB;YAAEG;YAAMC;YAAMC;QAAM,IAAIC;QAAa,GAAGC,KAAK;;AAG5F,MAAME,WAAWC,gBAAgB,YAAYR"}