@mieweb/ui 0.10.0-dev.3 → 0.10.0-dev.5

package/dist/index.d.cts

@@ -10194,8 +10194,27 @@ interface SidebarNavGroupProps {
     groupId?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Keep items mounted when the group is collapsed, hidden via `hidden`.
+     *
+     * For groups whose children own DOM state that a remount would destroy —
+     * uncontrolled inputs, media playback position, an editor instance. State
+     * survives the group's own collapse *and* the desktop rail collapsing.
+     *
+     * Does **not** make collapsed items findable by in-page search: `hidden` is
+     * `display: none`, and browsers do not match text inside it. `hidden="until-found"`
+     * would deliver that, but it is not portable enough to build the API on yet.
+     *
+     * Mirrors `CollapsibleContent`'s prop of the same name, and carries the same
+     * caveat: this path does **not** animate. `hidden` is `display: none`, which
+     * an animated height cannot run through, and dropping it for the duration
+     * would let keyboard users tab into content that is visually collapsed. Not
+     * animating is the safe answer until `hidden` can be sequenced around the
+     * animation.
+     */
+    forceMount?: boolean;
 }
-declare function SidebarNavGroup({ label, icon, children, defaultExpanded, groupId, className, }: SidebarNavGroupProps): React__default.JSX.Element;
+declare function SidebarNavGroup({ label, icon, children, defaultExpanded, groupId, className, forceMount, }: SidebarNavGroupProps): React__default.JSX.Element;
 interface SidebarNavItemProps {
     /** Item label */
     label: string;

package/dist/index.d.ts

@@ -10194,8 +10194,27 @@ interface SidebarNavGroupProps {
     groupId?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Keep items mounted when the group is collapsed, hidden via `hidden`.
+     *
+     * For groups whose children own DOM state that a remount would destroy —
+     * uncontrolled inputs, media playback position, an editor instance. State
+     * survives the group's own collapse *and* the desktop rail collapsing.
+     *
+     * Does **not** make collapsed items findable by in-page search: `hidden` is
+     * `display: none`, and browsers do not match text inside it. `hidden="until-found"`
+     * would deliver that, but it is not portable enough to build the API on yet.
+     *
+     * Mirrors `CollapsibleContent`'s prop of the same name, and carries the same
+     * caveat: this path does **not** animate. `hidden` is `display: none`, which
+     * an animated height cannot run through, and dropping it for the duration
+     * would let keyboard users tab into content that is visually collapsed. Not
+     * animating is the safe answer until `hidden` can be sequenced around the
+     * animation.
+     */
+    forceMount?: boolean;
 }
-declare function SidebarNavGroup({ label, icon, children, defaultExpanded, groupId, className, }: SidebarNavGroupProps): React__default.JSX.Element;
+declare function SidebarNavGroup({ label, icon, children, defaultExpanded, groupId, className, forceMount, }: SidebarNavGroupProps): React__default.JSX.Element;
 interface SidebarNavItemProps {
     /** Item label */
     label: string;

package/dist/index.js

@@ -147,6 +147,7 @@ import { isStorybookDocsMode } from './chunk-VSQF22GL.js';
 export { isStorybookDocsMode } from './chunk-VSQF22GL.js';
 import { Plus, GripVertical, RefreshCw, Pencil, Trash2, AlertCircle, ArrowLeft, Users, FilePlus, CheckCircle, ChevronDown, Clock, FileText, ClipboardList, Stethoscope, Mail, Phone, ClipboardCheck, Eye, Info, Link, ChevronUp, History, StickyNote, ExternalLink, MoreVertical, Send, Scan, TestTube2, Pill, Share, User, Download, ChevronRight, Calendar, Printer, ClipboardPlus, FileCheck, Wheat, Bell, FileHeart, HeartPulse, Paperclip, HelpCircle, MoreHorizontal, AlertTriangle, Upload as Upload$1, Camera, Check as Check$1, X as X$1, ScanLine, Image } from './chunk-BKSPDTX4.js';
 export { Accessibility as AccessibilityIcon, Activity as ActivityIcon, AlertCircle as AlertCircleIcon, AlertTriangle as AlertTriangleIcon, Wheat as AllergyIcon, WheatOff as AllergyOffIcon, Ambulance as AmbulanceIcon, ArrowLeft as ArrowLeftIcon, ArrowRight as ArrowRightIcon, ArrowUpDown as ArrowUpDownIcon, ArrowUp as ArrowUpIcon, AtSign as AtSignIcon, Baby as BabyIcon, BadgeAlert as BadgeAlertIcon, BadgeCheck as BadgeCheckIcon, BadgeMinus as BadgeMinusIcon, BadgePlus as BadgePlusIcon, BadgeX as BadgeXIcon, Ban as BanIcon, Bandage as BandageIcon, BedDouble as BedDoubleIcon, Bed as BedIcon, BedSingle as BedSingleIcon, Bell as BellIcon, BellOff as BellOffIcon, Biohazard as BiohazardIcon, Bone as BoneIcon, BookOpenCheck as BookOpenCheckIcon, BookOpen as BookOpenIcon, Bookmark as BookmarkIcon, Bot as BotIcon, Brain as BrainIcon, Briefcase as BriefcaseIcon, BriefcaseMedical as BriefcaseMedicalIcon, Building as BuildingIcon, CalendarCheck as CalendarCheckIcon, Calendar as CalendarIcon, Camera as CameraIcon, Cannabis as CannabisIcon, BarChart3 as ChartIcon, CheckCircle as CheckCircleIcon, Check as CheckIcon, ChevronDown as ChevronDownIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, ChevronUp as ChevronUpIcon, Cigarette as CigaretteIcon, CigaretteOff as CigaretteOffIcon, CircleDotDashed as CircleDotDashedIcon, CircleDot as CircleDotIcon, CircleUser as CircleUserIcon, ClipboardCheck as ClipboardCheckIcon, Clipboard as ClipboardIcon, ClipboardList as ClipboardListIcon, ClipboardPlus as ClipboardPlusIcon, Clock as ClockIcon, Cog as CogIcon, Columns as ColumnsIcon, Copy as CopyIcon, CreditCard as CreditCardIcon, Cross as CrossIcon, Dna as DnaIcon, DollarSign as DollarSignIcon, Download as DownloadIcon, Droplet as DropletIcon, Droplets as DropletsIcon, Ear as EarIcon, ExternalLink as ExternalLinkIcon, Eye as EyeIcon, EyeOff as EyeOffIcon, FileCheck2 as FileCheck2Icon, FileCheck as FileCheckIcon, FileHeart as FileHeartIcon, File as FileIcon, FilePlus2 as FilePlus2Icon, FilePlus as FilePlusIcon, FileText as FileTextIcon, Filter as FilterIcon, Fingerprint as FingerprintIcon, Flag as FlagIcon, FlaskConical as FlaskIcon, FlaskRound as FlaskRoundIcon, Folder as FolderIcon, FolderOpen as FolderOpenIcon, Footprints as FootprintsIcon, Glasses as GlassesIcon, Globe as GlobeIcon, LayoutGrid as GridIcon, GripVertical as GripVerticalIcon, Hand as HandIcon, HandMetal as HandMetalIcon, Hash as HashIcon, Heart as HeartIcon, HeartOff as HeartOffIcon, HeartPulse as HeartPulseIcon, HelpCircle as HelpCircleIcon, History as HistoryIcon, Home as HomeIcon, Hospital as HospitalIcon, Image as ImageIcon, Info as InfoIcon, Key as KeyIcon, Link as LinkIcon, List as ListIcon, Loader2 as LoaderIcon, Lock as LockIcon, LogIn as LogInIcon, LogOut as LogOutIcon, Mail as MailIcon, MapPin as MapPinIcon, Maximize as MaximizeIcon, Menu as MenuIcon, MessageSquare as MessageIcon, Mic as MicIcon, Microscope as MicroscopeIcon, Minimize as MinimizeIcon, Minus as MinusIcon, Monitor as MonitorIcon, Moon as MoonIcon, MoreHorizontal as MoreHorizontalIcon, MoreVertical as MoreVerticalIcon, NotebookPen as NotebookPenIcon, Palette as PaletteIcon, Paperclip as PaperclipIcon, CircleUserRound as PatientIcon, Pencil as PencilIcon, UserRound as PersonIcon, Phone as PhoneIcon, PieChart as PieChartIcon, Pill as PillIcon, Plus as PlusIcon, Printer as PrinterIcon, Radiation as RadiationIcon, Ruler as RulerIcon, Save as SaveIcon, Scale as ScaleIcon, Scaling as ScalingIcon, ScanEye as ScanEyeIcon, Scan as ScanIcon, ScanLine as ScanLineIcon, Search as SearchIcon, Settings as SettingsIcon, Share as ShareIcon, ShieldCheck as ShieldCheckIcon, Shield as ShieldIcon, ShieldPlus as ShieldPlusIcon, Sliders as SlidersIcon, Sparkle as SparkleIcon, Star as StarIcon, Stethoscope as StethoscopeIcon, StickyNote as StickyNoteIcon, Square as StopIcon, Sun as SunIcon, Syringe as SyringeIcon, Table as TableIcon, Tablets as TabletsIcon, Tag as TagIcon, TestTube2 as TestTubeIcon, TestTubes as TestTubesIcon, Thermometer as ThermometerIcon, ThermometerSun as ThermometerSunIcon, ThumbsDown as ThumbsDownIcon, ThumbsUp as ThumbsUpIcon, Timer as TimerIcon, Trash2 as TrashIcon, TrendingDown as TrendingDownIcon, TrendingUp as TrendingUpIcon, Truck as TruckIcon, Unlock as UnlockIcon, Upload as UploadIcon, UserCheck as UserCheckIcon, User as UserIcon, UserMinus as UserMinusIcon, UserPlus as UserPlusIcon, UserRoundCheck as UserRoundCheckIcon, UserRoundMinus as UserRoundMinusIcon, UserRoundPlus as UserRoundPlusIcon, UserRoundX as UserRoundXIcon, Users as UsersIcon, Weight as WeightIcon, Wrench as WrenchIcon, XCircle as XCircleIcon, X2 as XIcon, Zap as ZapIcon } from './chunk-BKSPDTX4.js';
+import { usePrefersReducedMotion } from './chunk-HB7C7NB5.js';
 export { usePrefersReducedMotion } from './chunk-HB7C7NB5.js';
 import { Badge } from './chunk-BMSG4NBH.js';
 export { Badge, badgeVariants } from './chunk-BMSG4NBH.js';
@@ -159,7 +160,7 @@ import { cn } from './chunk-TQONQSJO.js';
 export { cn, miewebUITwMergeConflicts } from './chunk-TQONQSJO.js';
 import './chunk-PX6F3LHL.js';
 import * as React13 from 'react';
-import React13__default, { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
+import React13__default, { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as ReactDOM from 'react-dom';
@@ -40711,86 +40712,149 @@ function SidebarNavGroup({
   children,
   defaultExpanded = false,
   groupId,
-  className
+  className,
+  forceMount
 }) {
   const { isCollapsed, isMobileViewport, expandedGroup, toggleGroup } = useSidebar();
   const showCollapsed = !isMobileViewport && isCollapsed;
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const contentId = useId();
+  const groupRef = useRef(null);
+  const triggerRef = useRef(null);
   const isExpanded = groupId ? expandedGroup === groupId : defaultExpanded;
   const [localExpanded, setLocalExpanded] = useState(defaultExpanded);
   const effectiveExpanded = groupId ? isExpanded : localExpanded;
+  const itemsVisible = !showCollapsed && effectiveExpanded;
+  const focusWasInsideRef = useRef(false);
+  const captureFocusInside = useCallback(() => {
+    const active = document.activeElement;
+    focusWasInsideRef.current = active !== triggerRef.current && groupRef.current?.contains(active) === true;
+  }, []);
+  useEffect(() => {
+    if (!itemsVisible) return;
+    function trackFocus(event) {
+      const target = event.target;
+      focusWasInsideRef.current = target !== triggerRef.current && groupRef.current?.contains(target) === true;
+    }
+    document.addEventListener("focusin", trackFocus);
+    return () => document.removeEventListener("focusin", trackFocus);
+  }, [itemsVisible]);
+  useEffect(() => {
+    if (itemsVisible) return;
+    if (focusWasInsideRef.current) {
+      focusWasInsideRef.current = false;
+      triggerRef.current?.focus();
+    }
+  }, [itemsVisible]);
   const handleToggle = useCallback(() => {
+    captureFocusInside();
     if (groupId) {
       toggleGroup(groupId);
     } else {
       setLocalExpanded((prev) => !prev);
     }
-  }, [groupId, toggleGroup]);
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-nav-group", className: cn("mb-2", className), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        "data-slot": "sidebar-nav-group-button",
-        onClick: handleToggle,
-        className: cn(
-          "flex w-full items-center rounded-lg px-3 py-2 text-sm font-semibold",
-          "text-neutral-700 dark:text-neutral-300",
-          "transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800",
-          showCollapsed && "justify-center"
-        ),
-        title: showCollapsed ? label : void 0,
-        "aria-label": showCollapsed ? label : void 0,
-        children: [
-          icon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "text-muted-foreground h-5 w-5 flex-shrink-0",
-                !showCollapsed && "me-3"
-              ),
-              children: icon
-            }
-          ),
-          /* @__PURE__ */ jsxs(AnimatedPresence, { initial: false, children: [
-            !showCollapsed && /* @__PURE__ */ jsx(
-              Animated,
-              {
-                as: "span",
-                preset: "sidebarLabel",
-                mode: "presence",
-                className: "flex-1 truncate text-start",
-                children: label
-              },
-              "label"
+  }, [captureFocusInside, groupId, toggleGroup]);
+  const items = /* @__PURE__ */ jsx("div", { className: "mt-1 ps-2", children });
+  const panelInDom = forceMount || itemsVisible;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: groupRef,
+      "data-slot": "sidebar-nav-group",
+      className: cn("mb-2", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            "data-slot": "sidebar-nav-group-button",
+            onClick: handleToggle,
+            "aria-expanded": itemsVisible,
+            "aria-controls": panelInDom ? contentId : void 0,
+            className: cn(
+              "flex w-full items-center rounded-lg px-3 py-2 text-sm font-semibold",
+              "text-neutral-700 dark:text-neutral-300",
+              "transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800",
+              showCollapsed && "justify-center"
             ),
-            !showCollapsed && /* @__PURE__ */ jsx(
-              Animated,
-              {
-                as: "span",
-                preset: "sidebarLabel",
-                mode: "presence",
-                className: cn(
-                  "ms-2 flex-shrink-0 transition-transform duration-200",
-                  effectiveExpanded && "rotate-180"
+            title: showCollapsed ? label : void 0,
+            "aria-label": showCollapsed ? label : void 0,
+            children: [
+              icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-muted-foreground h-5 w-5 flex-shrink-0",
+                    !showCollapsed && "me-3"
+                  ),
+                  children: icon
+                }
+              ),
+              /* @__PURE__ */ jsxs(AnimatedPresence, { initial: false, children: [
+                !showCollapsed && /* @__PURE__ */ jsx(
+                  Animated,
+                  {
+                    as: "span",
+                    preset: "sidebarLabel",
+                    mode: "presence",
+                    className: "flex-1 truncate text-start",
+                    children: label
+                  },
+                  "label"
                 ),
-                children: /* @__PURE__ */ jsx(ChevronDownIcon4, {})
-              },
-              "chevron"
-            )
-          ] })
-        ]
-      }
-    ),
-    !showCollapsed && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "overflow-hidden transition-all duration-300",
-          effectiveExpanded ? "mt-1 max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+                !showCollapsed && /* @__PURE__ */ jsx(
+                  Animated,
+                  {
+                    as: "span",
+                    preset: "sidebarLabel",
+                    mode: "presence",
+                    className: cn(
+                      "ms-2 flex-shrink-0 transition-transform duration-200",
+                      effectiveExpanded && "rotate-180"
+                    ),
+                    children: /* @__PURE__ */ jsx(ChevronDownIcon4, {})
+                  },
+                  "chevron"
+                )
+              ] })
+            ]
+          }
         ),
-        children: /* @__PURE__ */ jsx("div", { className: "ps-2", children })
-      }
-    )
-  ] });
+        forceMount ? (
+          /*
+           * Deliberately outside the rail-collapsed gate. Gating it there would
+           * unmount the items whenever the sidebar collapsed, destroying exactly
+           * the state this prop exists to preserve — the prop would hold its
+           * promise for the group's own toggle and quietly break it for the
+           * rail's, which is worse than not offering it.
+           */
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: contentId,
+              "data-slot": "sidebar-nav-group-items",
+              "data-state": itemsVisible ? "open" : "closed",
+              hidden: !itemsVisible,
+              children: items
+            }
+          )
+        ) : !showCollapsed && /* @__PURE__ */ jsx(AnimatedPresence, { initial: false, children: effectiveExpanded && /* @__PURE__ */ jsx(
+          Animated,
+          {
+            id: contentId,
+            "data-slot": "sidebar-nav-group-items",
+            "data-state": "open",
+            preset: "collapse",
+            mode: "presence",
+            enabled: !prefersReducedMotion,
+            className: "overflow-hidden",
+            children: items
+          },
+          "items"
+        ) })
+      ]
+    }
+  );
 }
 function SidebarNavItem({
   label,