@bensdev/react-sidebar 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -46,7 +46,12 @@ interface SidebarActionItem extends SidebarItemBase {
 interface SidebarGroupItem extends SidebarItemBase {
     type: 'group';
     items: SidebarItem[];
-    /** `false` renders a static section: label as heading, children always visible. */
+    /**
+     * `false` renders a static section: label as heading, children always visible — including on
+     * the collapsed icon rail, where it overrides `collapsedGroupBehavior` entirely (no flyout, no
+     * hiding). Give the group an `icon` to also get a row for it on the rail; without one, only its
+     * (icon-bearing) children render there.
+     */
     collapsible?: boolean;
     defaultOpen?: boolean;
     open?: boolean;
@@ -176,6 +181,12 @@ interface SidebarProps {
     onOpenGroupsChange?: (ids: string[]) => void;
     accordion?: boolean;
     autoOpenActiveGroup?: boolean;
+    /**
+     * How a *collapsible* group presents once the sidebar collapses to its icon rail: a
+     * hover/focus flyout (default), inline-and-indented (`"expand"`), or trigger-only with
+     * children unreachable (`"ignore"`). Has no effect on `collapsible: false` groups — those
+     * always stay fully expanded, on the rail or off.
+     */
     collapsedGroupBehavior?: 'flyout' | 'expand' | 'ignore';
     mobileOpen?: boolean;
     onMobileClose?: () => void;

package/dist/index.js

@@ -500,10 +500,17 @@ function SidebarGroupRow({ item, depth }) {
             children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 })
           }
         ),
-        showTooltip && behavior !== "flyout" && /* @__PURE__ */ jsx(Tooltip, { id: tooltipId, className: ctx.classNames.tooltip, children: item.tooltip ?? item.label })
+        showTooltip && (!collapsible || behavior !== "flyout") && /* @__PURE__ */ jsx(Tooltip, { id: tooltipId, className: ctx.classNames.tooltip, children: item.tooltip ?? item.label })
       ]
     }
   );
+  if (!collapsible) {
+    const showTrigger = item.icon != null || !isRail;
+    return /* @__PURE__ */ jsxs("li", { className: cx("bsb-list-item", "bsb-group"), children: [
+      showTrigger && trigger,
+      /* @__PURE__ */ jsx("ul", { id: panelId, className: cx("bsb-group__panel", ctx.classNames.groupPanel), children: /* @__PURE__ */ jsx(SidebarNodeList, { items: item.items, depth: depth + 1 }) })
+    ] });
+  }
   if (isRail && behavior === "flyout") {
     return /* @__PURE__ */ jsxs("li", { className: cx("bsb-list-item", "bsb-group", "bsb-group--flyout"), children: [
       trigger,
@@ -526,7 +533,7 @@ function SidebarGroupRow({ item, depth }) {
   }
   return /* @__PURE__ */ jsxs("li", { className: cx("bsb-list-item", "bsb-group"), children: [
     trigger,
-    (isOpen || !collapsible) && /* @__PURE__ */ jsx("ul", { id: panelId, className: cx("bsb-group__panel", ctx.classNames.groupPanel), children: /* @__PURE__ */ jsx(SidebarNodeList, { items: item.items, depth: depth + 1 }) })
+    isOpen && /* @__PURE__ */ jsx("ul", { id: panelId, className: cx("bsb-group__panel", ctx.classNames.groupPanel), children: /* @__PURE__ */ jsx(SidebarNodeList, { items: item.items, depth: depth + 1 }) })
   ] });
 }
 function SidebarNode({ item, depth }) {
@@ -830,7 +837,10 @@ function MobileDrawer({
   closeLabel,
   classNames,
   durationMs = 400,
-  children
+  children,
+  rootClassName,
+  rootStyle,
+  rootDataAttrs
 }) {
   const { mounted, state, onPanelTransitionEnd } = useMountTransition(open, durationMs);
   const panelRef = React21.useRef(null);
@@ -842,7 +852,7 @@ function MobileDrawer({
   useBodyScrollLock(lockScroll && open);
   if (!mounted) return null;
   const widthValue = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ jsxs(Portal, { target: portalTarget, disabled: disablePortal, children: [
+  return /* @__PURE__ */ jsx(Portal, { target: portalTarget, disabled: disablePortal, children: /* @__PURE__ */ jsxs("div", { className: cx(rootClassName, "bsb-root--drawer-host"), style: rootStyle, ...rootDataAttrs, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -881,7 +891,7 @@ function MobileDrawer({
         ]
       }
     )
-  ] });
+  ] }) });
 }
 function widthToCss(value) {
   if (value == null) return void 0;
@@ -1125,35 +1135,32 @@ var Sidebar = React21.forwardRef(function Sidebar2(props, ref) {
         )
       }
     ),
-    isMobile && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: rootRef,
-        className: rootClassName,
-        style: mergedStyle,
-        ...rootDataAttrs,
-        children: /* @__PURE__ */ jsx(
-          MobileDrawer,
-          {
-            open: mobileOpen,
-            onClose: closeMobile,
-            ariaLabel,
-            width: drawerWidth,
-            position,
-            closeOnEscape,
-            closeOnBackdropClick,
-            trapFocus,
-            lockScroll,
-            restoreFocus,
-            portalTarget,
-            disablePortal,
-            closeLabel: "Close navigation",
-            classNames,
-            children: /* @__PURE__ */ jsx(SidebarShell, { ...shellProps, collapsed: false, showToggle: false, onToggle: toggleCollapsed, togglePosition: position, toggleStrategy, toggleLabels: { expand: "Expand sidebar", collapse: "Collapse sidebar" } })
-          }
-        )
-      }
-    )
+    isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { ref: rootRef, "aria-hidden": "true", style: { display: "none" } }),
+      /* @__PURE__ */ jsx(
+        MobileDrawer,
+        {
+          open: mobileOpen,
+          onClose: closeMobile,
+          ariaLabel,
+          width: drawerWidth,
+          position,
+          closeOnEscape,
+          closeOnBackdropClick,
+          trapFocus,
+          lockScroll,
+          restoreFocus,
+          portalTarget,
+          disablePortal,
+          closeLabel: "Close navigation",
+          classNames,
+          rootClassName,
+          rootStyle: mergedStyle,
+          rootDataAttrs,
+          children: /* @__PURE__ */ jsx(SidebarShell, { ...shellProps, collapsed: false, showToggle: false, onToggle: toggleCollapsed, togglePosition: position, toggleStrategy, toggleLabels: { expand: "Expand sidebar", collapse: "Collapse sidebar" } })
+        }
+      )
+    ] })
   ] });
 });
 Sidebar.displayName = "Sidebar";
@@ -1168,7 +1175,7 @@ var greenMist = {
   radiusAction: "4px",
   ease: "cubic-bezier(0.16, 1, 0.3, 1)",
   shadowLogo: "0 1px 2px rgba(10,37,16,0.05)",
-  shadowToggle: "0 4px 12px rgba(10,37,16,0.08)",
+  shadowToggle: "0 4px 10px rgba(10,37,16,0.28), 0 1px 3px rgba(10,37,16,0.35)",
   shadowTooltip: "0 12px 32px rgba(10,37,16,0.12)",
   shadowDrawer: "0 24px 48px rgba(10,37,16,0.16)",
   badgeFontSize: "9px",
@@ -1190,10 +1197,10 @@ var greenMist = {
     tooltipBg: "#0a2510",
     tooltipFg: "#d9eed9",
     tooltipBorder: "#175423",
-    toggleBg: "#2d8a3e",
-    toggleHoverBg: "#4faa5a",
+    toggleBg: "#175423",
+    toggleHoverBg: "#1f6e2e",
     toggleFg: "#ffffff",
-    toggleBorder: "#175423",
+    toggleBorder: "rgba(255,255,255,0.14)",
     avatarBg: "#2d8a3e",
     avatarFg: "#ffffff",
     avatarRing: "rgba(79,170,90,0.4)",
@@ -1229,7 +1236,7 @@ var greenMist = {
     toggleBg: "#27272a",
     toggleHoverBg: "#333333",
     toggleFg: "#e2e2e2",
-    toggleBorder: "#3d3d3d",
+    toggleBorder: "rgba(255,255,255,0.14)",
     avatarBg: "#27272a",
     avatarFg: "#e2e2e2",
     avatarRing: "rgba(255,255,255,0.1)",