@inf-monkeys-tech/monkeys-design 0.4.47 → 0.4.49

package/dist/components/layout/index.d.mts

@@ -204,6 +204,7 @@ interface NavigationLayoutProps {
     defaultMode?: NavigationMode;
     defaultSidebarCollapsed?: boolean;
     expandedSidebarWidth?: string;
+    expandSidebarLabel?: string;
     flush?: boolean;
     headbarActions?: ReactNode;
     headbarLayout?: HeadbarLayout;
@@ -214,12 +215,14 @@ interface NavigationLayoutProps {
     onNavigate?: (itemId: string) => void;
     onSidebarCollapsedChange?: (collapsed: boolean) => void;
     renderHeadbarExtra?: ReactNode;
+    collapseSidebarLabel?: string;
+    sidebarCollapsed?: boolean;
     sidebarAccountMenu?: ReactNode;
     sidebarFooter?: ReactNode;
     sidebarHeader?: ReactNode;
     switchToHeadbarLabel?: string;
     switchToSidebarLabel?: string;
 }
-declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
+declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, expandSidebarLabel, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, collapseSidebarLabel, sidebarCollapsed: controlledSidebarCollapsed, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
 
 export { AppHeader, type AppHeaderLogo, type AppHeaderProps, type AppHeaderUser, AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps, type HeadbarLayout, type HeadbarLayoutMode, type HeadbarMenuRadius, type HeadbarNavPosition, type HeaderTab, type LayoutNavItem, NavButton, type NavButtonProps, NavigationLayout, type NavigationLayoutProps, type NavigationMode, type SidebarAccount, type SidebarNavItem, UserAccountMenu, type UserAccountMenuClassNames, type UserAccountMenuItem, type UserAccountMenuProps, type UserAccountMenuRadius, type UserAccountMenuSelectorConfig, type UserAccountMenuSelectorOption, type UserAccountMenuSide, type UserAccountMenuTriggerVariant, type UserAccountMenuUser, cn };

package/dist/components/layout/index.d.ts

@@ -204,6 +204,7 @@ interface NavigationLayoutProps {
     defaultMode?: NavigationMode;
     defaultSidebarCollapsed?: boolean;
     expandedSidebarWidth?: string;
+    expandSidebarLabel?: string;
     flush?: boolean;
     headbarActions?: ReactNode;
     headbarLayout?: HeadbarLayout;
@@ -214,12 +215,14 @@ interface NavigationLayoutProps {
     onNavigate?: (itemId: string) => void;
     onSidebarCollapsedChange?: (collapsed: boolean) => void;
     renderHeadbarExtra?: ReactNode;
+    collapseSidebarLabel?: string;
+    sidebarCollapsed?: boolean;
     sidebarAccountMenu?: ReactNode;
     sidebarFooter?: ReactNode;
     sidebarHeader?: ReactNode;
     switchToHeadbarLabel?: string;
     switchToSidebarLabel?: string;
 }
-declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
+declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, expandSidebarLabel, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, collapseSidebarLabel, sidebarCollapsed: controlledSidebarCollapsed, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
 
 export { AppHeader, type AppHeaderLogo, type AppHeaderProps, type AppHeaderUser, AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps, type HeadbarLayout, type HeadbarLayoutMode, type HeadbarMenuRadius, type HeadbarNavPosition, type HeaderTab, type LayoutNavItem, NavButton, type NavButtonProps, NavigationLayout, type NavigationLayoutProps, type NavigationMode, type SidebarAccount, type SidebarNavItem, UserAccountMenu, type UserAccountMenuClassNames, type UserAccountMenuItem, type UserAccountMenuProps, type UserAccountMenuRadius, type UserAccountMenuSelectorConfig, type UserAccountMenuSelectorOption, type UserAccountMenuSide, type UserAccountMenuTriggerVariant, type UserAccountMenuUser, cn };

package/dist/components/layout/index.js

@@ -4100,6 +4100,7 @@ function NavigationLayout({
   defaultMode = "headbar",
   defaultSidebarCollapsed = false,
   expandedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH,
+  expandSidebarLabel = "Expand sidebar",
   flush = false,
   headbarActions,
   headbarLayout,
@@ -4110,6 +4111,8 @@ function NavigationLayout({
   onNavigate,
   onSidebarCollapsedChange,
   renderHeadbarExtra,
+  collapseSidebarLabel = "Collapse sidebar",
+  sidebarCollapsed: controlledSidebarCollapsed,
   sidebarAccountMenu,
   sidebarFooter,
   sidebarHeader,
@@ -4117,10 +4120,12 @@ function NavigationLayout({
   switchToSidebarLabel = "Switch to sidebar"
 }) {
   const [uncontrolledMode, setUncontrolledMode] = react.useState(defaultMode);
-  const [sidebarCollapsed, setSidebarCollapsed] = react.useState(defaultSidebarCollapsed);
+  const [uncontrolledSidebarCollapsed, setUncontrolledSidebarCollapsed] = react.useState(defaultSidebarCollapsed);
   const [revealRequest, setRevealRequest] = react.useState(null);
   const isModeControlled = mode !== void 0;
+  const isSidebarCollapsedControlled = controlledSidebarCollapsed !== void 0;
   const navigationMode = isModeControlled ? mode : uncontrolledMode;
+  const sidebarCollapsed = isSidebarCollapsedControlled ? controlledSidebarCollapsed : uncontrolledSidebarCollapsed;
   const isHeadbarMode = navigationMode === "headbar";
   const sidebarWidth = sidebarCollapsed ? collapsedSidebarWidth : expandedSidebarWidth;
   react.useEffect(() => {
@@ -4128,6 +4133,11 @@ function NavigationLayout({
       setUncontrolledMode(defaultMode);
     }
   }, [defaultMode, isModeControlled]);
+  react.useEffect(() => {
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(defaultSidebarCollapsed);
+    }
+  }, [defaultSidebarCollapsed, isSidebarCollapsedControlled]);
   const setNavigationMode = (nextMode) => {
     if (!isModeControlled) {
       setUncontrolledMode(nextMode);
@@ -4135,7 +4145,9 @@ function NavigationLayout({
     onModeChange?.(nextMode);
   };
   const setCollapsed = (collapsed) => {
-    setSidebarCollapsed(collapsed);
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(collapsed);
+    }
     onSidebarCollapsedChange?.(collapsed);
   };
   const navigationActions = [];
@@ -4152,7 +4164,7 @@ function NavigationLayout({
   }
   navigationActions.push({
     id: "toggle-sidebar",
-    label: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+    label: sidebarCollapsed ? expandSidebarLabel : collapseSidebarLabel,
     onClick: () => setCollapsed(!sidebarCollapsed),
     icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[18px] w-[18px]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
@@ -4163,7 +4175,10 @@ function NavigationLayout({
   const sidebar = isHeadbarMode ? null : /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "relative h-full min-h-0 shrink-0 overflow-hidden transition-[width] duration-260",
+      className: cn2(
+        "relative h-full min-h-0 shrink-0 transition-[width] duration-260",
+        sidebarCollapsed ? "z-20 overflow-visible" : "z-10 overflow-hidden"
+      ),
       style: { width: sidebarWidth, transitionTimingFunction: NAVIGATION_LAYOUT_TRANSITION_TIMING },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Sidebar,