@bizapps/design-system-testing 1.12.0 → 1.12.2

package/dist/main.cjs

@@ -9224,6 +9224,13 @@ var DEFAULT_LABELS = {
 var EASE = "cubic-bezier(.2,.8,.2,1)";
 var MOTION_MS = 240;
 var FADE_MS = MOTION_MS / 2;
+var RAIL_STAGGER_MS = 20;
+var ACCORDION_EASE = "cubic-bezier(.4,0,.2,1)";
+var ACCORDION_ITEM_FADE_MS = 260;
+var ACCORDION_OPEN_DELAY_MS = 120;
+var ACCORDION_OPEN_STAGGER_MS = 50;
+var ACCORDION_CLOSE_FADE_MS = 160;
+var ACCORDION_STAGGER_CAP = 8;
 var MORPH_MS = 360;
 var MORPH_EASE = "cubic-bezier(.65,0,.35,1)";
 var BOUNCE_KEYFRAMES = [
@@ -9361,7 +9368,7 @@ var DEFAULT_WIDTH = 305;
 var DEFAULT_COLLAPSED_WIDTH = 48;
 var TILE_ICON_SIZE = 22;
 var MIN_COLLAPSED_WIDTH = 40;
-var t = (prop, ms = 300, delay = 0) => `${prop} ${ms}ms ${EASE} ${delay}ms`;
+var t = (prop, ms = 300, delay = 0, ease2 = EASE) => `${prop} ${ms}ms ${ease2} ${delay}ms`;
 function transition2(reduced, ...parts) {
   const kept = reduced ? parts.filter((part) => /^(opacity|visibility|background|color|box-shadow)/.test(part)) : parts;
   return kept.join(", ") || "none";
@@ -9430,7 +9437,7 @@ function FloatingSidebar({
   collapsedWidth = DEFAULT_COLLAPSED_WIDTH,
   type = "single",
   openModuleIds: openModulesProp,
-  defaultOpenModuleIds = [],
+  defaultOpenModuleIds,
   onOpenModulesChange,
   hideEmptyModules = true,
   activeItemId: activeItemProp,
@@ -9459,9 +9466,16 @@ function FloatingSidebar({
   const isMobile = useIsMobile();
   const baseId = react.useId();
   const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
+  const moduleIdByItemId = react.useMemo(
+    () => new Map(modules.flatMap((module) => module.items.map((item) => [item.id, module.id]))),
+    [modules]
+  );
+  const moduleIdOf = (itemId) => itemId ? moduleIdByItemId.get(itemId) : void 0;
+  const initialActiveModuleId = moduleIdOf(activeItemProp ?? defaultActiveItemId);
   const [rawOpenModuleIds, setOpenModuleIds] = useControllableState2(
     openModulesProp,
-    defaultOpenModuleIds,
+    // Without an explicit default, the module of the current page starts open.
+    defaultOpenModuleIds ?? (initialActiveModuleId ? [initialActiveModuleId] : []),
     onOpenModulesChange
   );
   const railWidth = Math.max(MIN_COLLAPSED_WIDTH, collapsedWidth);
@@ -9563,8 +9577,31 @@ function FloatingSidebar({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [shortcut, toggle, isMobile, mobileOpen, setMobileOpen]);
+  const openModule = (moduleId) => {
+    const opened = rawOpenModuleIds.includes(moduleId);
+    if (type === "multiple") {
+      if (!opened) setOpenModuleIds([...rawOpenModuleIds, moduleId]);
+    } else if (!opened || rawOpenModuleIds.length > 1) {
+      setOpenModuleIds([moduleId]);
+    }
+  };
+  const activeModuleId = moduleIdOf(activeItemId);
+  const syncedActive = react.useRef(`${activeItemId}|${activeModuleId}`);
+  react.useEffect(() => {
+    const key = `${activeItemId}|${activeModuleId}`;
+    if (syncedActive.current === key) return;
+    syncedActive.current = key;
+    if (activeModuleId) openModule(activeModuleId);
+  });
   const selectItem = (item, module, navigates) => {
-    if (navigates) setActiveItemId(item.id);
+    if (navigates) {
+      setActiveItemId(item.id);
+      openModule(module.id);
+      if (activeItemProp === void 0) {
+        syncedActive.current = `${item.id}|${moduleIdOf(item.id)}`;
+      }
+      if (queries[module.id]) setQueries((current) => ({ ...current, [module.id]: "" }));
+    }
     setFlyoutId(null);
     if (isMobile) setMobileOpen(false);
     onItemSelect?.(item, module);
@@ -9979,6 +10016,11 @@ function ModuleCard({
     });
     return () => animation2?.cancel();
   }, [collapsed, hasActive, reduced]);
+  const [toggle, setToggle] = react.useState({ collapsed, open, accordion: false });
+  if (toggle.collapsed !== collapsed || toggle.open !== open) {
+    setToggle({ collapsed, open, accordion: toggle.collapsed === collapsed });
+  }
+  const accordion = toggle.accordion && !reduced;
   const items = filterItems(module.items, query);
   const isEmpty = module.items.length === 0;
   const emptyMessage = /* @__PURE__ */ jsxRuntime.jsx(
@@ -10197,6 +10239,7 @@ function ModuleCard({
                           list,
                           visible: open,
                           staggerIndex: index,
+                          accordion,
                           onSelect: (navigates) => onSelect(item, navigates)
                         },
                         item.id
@@ -10321,20 +10364,27 @@ function ModuleCard({
     }
   ) });
 }
-function ItemRow({ item, list, visible, staggerIndex, onSelect }) {
+function ItemRow({ item, list, visible, staggerIndex, accordion, onSelect }) {
   const { activeItemId, favoriteIds, reduced, labels, resolveIcon, renderLink } = list;
   const active = item.id === activeItemId;
   const favorite = favoriteIds?.includes(item.id) ?? false;
   const tabIndex = visible ? 0 : -1;
   const staggered = staggerIndex !== void 0;
-  const delay = staggered && visible ? Math.min(staggerIndex * 20, FADE_MS) : 0;
+  let fade = t("opacity", FADE_MS, 0);
+  if (staggered && accordion) {
+    const step = Math.min(staggerIndex, ACCORDION_STAGGER_CAP);
+    fade = visible ? t(
+      "opacity",
+      ACCORDION_ITEM_FADE_MS,
+      ACCORDION_OPEN_DELAY_MS + step * ACCORDION_OPEN_STAGGER_MS,
+      ACCORDION_EASE
+    ) : t("opacity", ACCORDION_CLOSE_FADE_MS, 0, ACCORDION_EASE);
+  } else if (staggered && visible) {
+    fade = t("opacity", FADE_MS, Math.min(staggerIndex * RAIL_STAGGER_MS, FADE_MS));
+  }
   const rowStyle = staggered ? {
     opacity: visible ? 1 : 0,
-    transition: transition2(
-      reduced,
-      t("opacity", FADE_MS, delay),
-      "background-color 180ms ease-out"
-    )
+    transition: transition2(reduced, fade, "background-color 180ms ease-out")
   } : { transition: "background-color 180ms ease-out" };
   const className = cn(
     "focus-visible:ring-primary flex min-h-[46px] min-w-0 flex-1 cursor-pointer items-start gap-3 rounded-[10px] border-0 bg-transparent py-[13px] pr-1 pl-3 text-left text-[13px] leading-5 transition-transform duration-180 ease-[cubic-bezier(.2,.8,.2,1)] outline-none hover:text-primary focus-visible:ring-2 focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50",