@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/dist/SideNav/SideNav.js

@@ -35,16 +35,25 @@ import { ResizeHandle } from "../Resizable/ResizeHandle.js";
 import { themeProps } from "../utils/themeProps.js";
 import { SizeProvider } from "../SizeContext/SizeContext.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
-import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { LayoutChangeSnapshot } from "../motion/LayoutChangeSnapshot.js";
+import { getFocusableElements } from "../hooks/useFocusTrap.js";
+import { useFocusLeavingChange } from "../utils/useFocusLeavingChange.js";
+import { readAccessibleName } from "../utils/accessibleName.js";
+import { moveFocusLeftBehind, noteFocusWithin } from "../utils/focusReturn.js";
+import { useInteractionModalityTracking } from "../utils/interactionModality.js";
+import { SideNavFocusTargetsContext } from "./SideNavFocusTargetsContext.js";
 import { createRailLayout, playRail, snapshotRail, SideNavShellContext } from "./railMotion.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/SideNav/SideNav.generated.js";
+import { isRenderable } from "../utils/isRenderable.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 // =============================================================================
 // Constants
 // =============================================================================
 
 /** Width below which dragging collapses the sidebar (when collapsible). */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const COLLAPSE_THRESHOLD = 160;
 
 // =============================================================================
@@ -136,6 +145,8 @@ const FOOTER_ICON_SIZE = 'sm';
 // Component
 // =============================================================================
 
+/** Where focus was before a collapse, as the move after it needs it. */
+
 /**
  * Sidebar navigation container for application pages.
  *
@@ -170,7 +181,7 @@ export function SideNav({
   handleRef,
   ...props
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   // Parse collapsible prop
   const collapsibleConfig = typeof collapsible === 'object' ? collapsible : {};
   const hasCollapseButton = collapsibleConfig.hasButton ?? true;
@@ -189,7 +200,12 @@ export function SideNav({
   // nav needs an id; a consumer's own id wins.
   const generatedNavId = useId();
   const navId = props.id ?? generatedNavId;
-  const mergedNavRef = useMergedRefs(ref, navRef);
+  // The nav's own document's last input decides the moved focus's ring
+  // (AR3), so a SideNav in a second document tracks input there.
+  const {
+    ref: modalityRef
+  } = useInteractionModalityTracking();
+  const mergedNavRef = useMergedRefs(ref, navRef, modalityRef);
   const collapseStateRef = useRef({
     isCollapsed: false,
     toggle: () => {},
@@ -218,7 +234,11 @@ export function SideNav({
   // it through AppShell's own handle (`component:AppShell` FR17); outside,
   // SideNav holds its own over its parent.
   const shell = use(SideNavShellContext);
-  const ownLayout = useMemo(() => createRailLayout(() => navRef.current), []);
+  // A resizable rail's wrapper holds the nav and the handle; outside AppShell
+  // it is the rail the motion moves and lays its copy beside (FR6).
+  const resizeWrapperRef = useRef(null);
+  const ownRail = useCallback(() => resizeWrapperRef.current ?? navRef.current, []);
+  const ownLayout = useMemo(() => createRailLayout(ownRail), [ownRail]);
   const railSnapshotRef = useRef(null);
   const motionRef = useRef(null);
   const measureRail = useCallback(wasCollapsed => {
@@ -228,7 +248,7 @@ export function SideNav({
     running?.rail.end();
     running?.endContent();
     motionRef.current = null;
-    railSnapshotRef.current = snapshotRail(shell?.rail() ?? navRef.current, shell?.animatedLayout ?? ownLayout, shown, wasCollapsed);
+    railSnapshotRef.current = snapshotRail(shell?.rail() ?? ownRail(), shell?.animatedLayout ?? ownLayout, shown, wasCollapsed);
     // A collapse covers the old rail with its copy; when the rail cannot
     // be copied, the page lands at once with it, on one clock, a running
     // glide included.
@@ -238,7 +258,7 @@ export function SideNav({
       return;
     }
     shell?.beforeRailChange();
-  }, [shell, ownLayout]);
+  }, [shell, ownLayout, ownRail]);
   useLayoutEffect(() => {
     const snapshot = railSnapshotRef.current;
     railSnapshotRef.current = null;
@@ -248,15 +268,101 @@ export function SideNav({
     // The content moves first: its glide starts before the rail rides it.
     const endContent = shell?.afterRailChange() ?? (() => {});
     motionRef.current = {
-      rail: playRail(snapshot, shell?.rail() ?? navRef.current, shell?.animatedLayout ?? ownLayout, shell?.column() ?? null),
+      rail: playRail(snapshot, shell?.rail() ?? ownRail(), shell?.animatedLayout ?? ownLayout, shell?.column() ?? null),
       endContent
     };
-  }, [collapsed, shell, ownLayout]);
+  }, [collapsed, shell, ownLayout, ownRail]);
   // An unmount mid-motion removes the copy at once.
   useLayoutEffect(() => () => {
     motionRef.current?.rail.end();
     motionRef.current?.endContent();
   }, []);
+
+  // Focus on something the collapsed rail does not render would fall to the
+  // page when the rail collapses (`component:SideNav` AR3). On a row the rail
+  // keeps (its link replaced, its expand toggle or row actions gone), focus
+  // stays on that row's control; from a row the rail drops (no icon, or
+  // nested), it moves to the rail's collapse toggle, or, with none, to the
+  // nearest row the rail keeps. Rows and the toggle register through their
+  // callback refs. Rows are matched across the commit by their place among
+  // the rows the rail keeps, not by element, since a row's control can be
+  // replaced by its collapsed form. Focus on a header or footer control that
+  // the collapse replaces goes to the new control with the same accessible
+  // name. From one the collapse removes or replaces under another name, or
+  // the resize handle, focus goes to the toggle, or, with none, to the first
+  // kept row.
+  // Focus moves only if the collapse lost it.
+  const rowsRef = useRef(new Map());
+  const togglesRef = useRef(new Set());
+  const focusTargets = useMemo(() => ({
+    registerRow: (element, isKeptInRail) => {
+      rowsRef.current.set(element, isKeptInRail);
+      return () => {
+        rowsRef.current.delete(element);
+      };
+    },
+    registerToggle: element => {
+      togglesRef.current.add(element);
+      return () => {
+        togglesRef.current.delete(element);
+      };
+    }
+  }), []);
+  const noteRailFocus = useFocusLeavingChange(collapsed, wasCollapsed => {
+    const nav = navRef.current;
+    // The resize handle sits beside the nav, in the resize wrapper, and goes
+    // with a collapse its Enter starts.
+    const focus = wasCollapsed ? null : noteFocusWithin(nav) ?? noteFocusWithin(resizeWrapperRef.current);
+    if (focus == null || nav == null) {
+      return null;
+    }
+    const rows = railRows(nav, rowsRef.current);
+    // The innermost row holding focus, the last in document order: a nested
+    // row's parent holds it too.
+    let index = -1;
+    rows.forEach((row, at) => {
+      if (row.contains(focus.element)) {
+        index = at;
+      }
+    });
+    let outside = null;
+    if (index < 0) {
+      const controls = controlsOutsideRows(nav, rows);
+      const at = controls.findIndex(control => control.contains(focus.element));
+      outside = at < 0 ? null : {
+        name: controlName(controls[at])
+      };
+    }
+    return {
+      focus,
+      outside,
+      wasOnToggle: [...togglesRef.current].some(toggle => toggle.contains(focus.element)),
+      isRowKept: index >= 0 && rowsRef.current.get(rows[index]) === true,
+      keptBefore: rows.slice(0, Math.max(index, 0)).filter(row => rowsRef.current.get(row) === true).length
+    };
+  }, (pending, isCollapsed) => {
+    const nav = navRef.current;
+    if (!isCollapsed || nav == null) {
+      return;
+    }
+    // Collapsed, every row the nav renders is one the rail keeps, in order.
+    const kept = railRows(nav, rowsRef.current);
+    const controlOf = row => row == null ? undefined : getFocusableElements(row)[0];
+    const toggle = [...togglesRef.current].find(element => nav.contains(element));
+    let sameOutside;
+    if (pending.wasOnToggle) {
+      sameOutside = toggle;
+    } else if (pending.outside != null) {
+      const controls = controlsOutsideRows(nav, kept);
+      sameOutside = controls.find(control => controlName(control) === pending.outside?.name);
+    }
+    const target = pending.isRowKept ? controlOf(kept[pending.keptBefore]) : sameOutside ?? toggle ?? controlOf(kept[pending.keptBefore - 1]) ?? controlOf(kept[pending.keptBefore]);
+    moveFocusLeftBehind(pending.focus, target);
+  });
+  const beforeRailChange = useCallback(wasCollapsed => {
+    noteRailFocus(wasCollapsed);
+    measureRail(wasCollapsed);
+  }, [noteRailFocus, measureRail]);
   const toggle = useCallback(() => {
     const next = !collapsed;
 
@@ -314,7 +420,9 @@ export function SideNav({
   // =========================================================================
   // Drawer mode — render inside MobileNav with heading as header
   // =========================================================================
-  const hasDrawerFooter = !!(footer || footerIcons);
+  // Slot presence follows `isRenderable` (`architecture:react-component-runtime`
+  // INV16), so the footer area shows whenever a slot inside it renders.
+  const hasDrawerFooter = isRenderable(footer) || isRenderable(footerIcons);
   if (renderMode === 'drawer') {
     return /*#__PURE__*/_jsxs(MobileNav, {
       header: header,
@@ -327,7 +435,7 @@ export function SideNav({
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es"
         },
-        children: [footer, footerIcons && /*#__PURE__*/_jsx("div", {
+        children: [footer, isRenderable(footerIcons) && /*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
@@ -350,7 +458,7 @@ export function SideNav({
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es"
         },
-        children: [footer, footerIcons && /*#__PURE__*/_jsx("div", {
+        children: [footer, isRenderable(footerIcons) && /*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
@@ -366,8 +474,8 @@ export function SideNav({
   // =========================================================================
   // Default mode — full sidebar
   // =========================================================================
-  const hasStickyTop = !!(header || topContent);
-  const hasStickyBottom = !!(footer || footerIcons);
+  const hasStickyTop = isRenderable(header) || isRenderable(topContent);
+  const hasStickyBottom = isRenderable(footer) || isRenderable(footerIcons);
   // The built-in collapse button only renders when collapse is enabled and it
   // hasn't been opted out via `collapsible.hasButton: false` (e.g. when the
   // consumer places a SideNavCollapseButton in the header instead).
@@ -397,7 +505,7 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s x7wzq59 x13vifvy x1vjfegm xgcd1z6 x1xye8es x1wesfrj xf314gf x1txdalj x6s0dn4"
         }
       }[!!collapsed << 0],
-      children: [header, topContent && /*#__PURE__*/_jsx("div", {
+      children: [header, isRenderable(topContent) && /*#__PURE__*/_jsx("div", {
         ...{},
         children: topContent
       })]
@@ -458,11 +566,16 @@ export function SideNav({
   // Overlay drag handle inside the nav when resizable.
   // Uses ResizeHandle in overlay mode so the handle sits inside
   // the panel's overflow: clip bounds.
-  const rail = showResizeHandle ? /*#__PURE__*/_jsxs("div", {
+  // A resizable rail keeps its wrapper while collapsed, so collapsing or
+  // expanding never changes the nav's parent: the nav and its items stay
+  // mounted, and their state (an open nested group) and focus persist (FR6).
+  // Only the handle comes and goes.
+  const rail = isResizable ? /*#__PURE__*/_jsxs("div", {
+    ref: resizeWrapperRef,
     ...{
       className: "x1n2onr6 x78zum5 x2lah0s x5yr21d x7giv3"
     },
-    children: [navElement, /*#__PURE__*/_jsx(ResizeHandle, {
+    children: [navElement, showResizeHandle && /*#__PURE__*/_jsx(ResizeHandle, {
       "data-testid": "astryx-sidenav-resize-handle",
       direction: "horizontal",
       position: "overlay",
@@ -474,20 +587,40 @@ export function SideNav({
       "aria-controls": navId
     })]
   }) : navElement;
-  // The snapshot stays mounted outside the resize wrapper, which comes and
-  // goes with the collapse it measures.
+  // The snapshot stays mounted outside the resize wrapper.
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(LayoutChangeSnapshot, {
       value: collapsed,
-      onBeforeChange: measureRail
+      onBeforeChange: beforeRailChange
     }), rail]
   });
   if (isCollapsible) {
-    return /*#__PURE__*/_jsx(SideNavCollapseContext, {
-      value: collapseContext,
-      children: content
+    return /*#__PURE__*/_jsx(SideNavFocusTargetsContext, {
+      value: focusTargets,
+      children: /*#__PURE__*/_jsx(SideNavCollapseContext, {
+        value: collapseContext,
+        children: content
+      })
     });
   }
   return content;
 }
+
+/** The focusable controls in `nav` outside every row: header and footer. */
+function controlsOutsideRows(nav, rows) {
+  return getFocusableElements(nav).filter(control => !rows.some(row => row.contains(control)));
+}
+
+/** A control's accessible name, so a re-rendered control is found again. */
+function controlName(control) {
+  return readAccessibleName(control) ?? '';
+}
+
+/**
+ * The registered rows inside `nav`, in document order, leaving out rows in a
+ * collapsed item's flyout, which is a layer of its own.
+ */
+function railRows(nav, rows) {
+  return [...rows.keys()].filter(row => nav.contains(row) && row.closest('[popover]') == null).sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+}
 SideNav.displayName = 'SideNav';

package/dist/SideNav/SideNavCollapseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAKzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAkC5D,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;IAE3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,WAAW,EACX,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAiD5B;yBA1De,qBAAqB"}
+{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAmB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAIlC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAyC5D,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;IAE3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,WAAW,EACX,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BA+D5B;yBAxEe,qBAAqB"}

package/dist/SideNav/SideNavCollapseButton.js

@@ -16,7 +16,7 @@
  * - /packages/core/src/SideNav/index.ts
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
-import React, { useCallback } from 'react';
+import React, { use, useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -25,8 +25,13 @@ import { Button } from "../Button/index.js";
 import { composeEventHandlers, rtlStyles } from "../utils/index.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
-import { useTranslator } from "../i18n/index.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { SideNavFocusTargetsContext } from "./SideNavFocusTargetsContext.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/SideNav/SideNavCollapseButton.generated.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+registerEnglishFallback(english);
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -93,7 +98,7 @@ export function SideNavCollapseButton({
   onClick: onClickProp,
   ...props
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {
     isCollapsed,
     toggle,
@@ -102,6 +107,13 @@ export function SideNavCollapseButton({
   const {
     isMobile
   } = useAppShellMobile();
+  // A toggle inside its SideNav registers there, so a collapse that removes
+  // the focused row can hand focus to it (`component:SideNav` AR3). One wired
+  // to state outside the SideNav (`collapsible`, `handleRef`) does not.
+  const focusTargets = use(SideNavFocusTargetsContext);
+  const isInSideNav = focusTargets != null && collapsible == null && handleRef == null;
+  const registerToggle = useCallback(element => element == null || !isInSideNav || focusTargets == null ? undefined : focusTargets.registerToggle(element), [focusTargets, isInSideNav]);
+  const mergedRef = useMergedRefs(ref, registerToggle);
 
   // Hide when not collapsible, or when in mobile mode (sidenav is in
   // the mobile drawer — collapse doesn't apply there)
@@ -109,7 +121,7 @@ export function SideNavCollapseButton({
     return null;
   }
   return /*#__PURE__*/_jsx(Button, {
-    ref: ref,
+    ref: mergedRef,
     label: label ?? (isCollapsed ? t('@astryx.sideNavCollapseButton.expandSidebar') : t('@astryx.sideNavCollapseButton.collapseSidebar')),
     variant: "ghost",
     size: size,

package/dist/SideNav/SideNavFocusTargetsContext.d.ts

@@ -0,0 +1,11 @@
+export interface SideNavFocusTargets {
+    /**
+     * Registers a row's root element, and whether the collapsed rail renders
+     * the row (it has an icon and is not nested); returns its unregister.
+     */
+    registerRow: (element: HTMLElement, isKeptInRail: boolean) => () => void;
+    /** Registers a collapse toggle rendered inside the SideNav. */
+    registerToggle: (element: HTMLElement) => () => void;
+}
+export declare const SideNavFocusTargetsContext: import("react").Context<SideNavFocusTargets | null>;
+//# sourceMappingURL=SideNavFocusTargetsContext.d.ts.map

package/dist/SideNav/SideNavFocusTargetsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavFocusTargetsContext.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavFocusTargetsContext.ts"],"names":[],"mappings":"AAgBA,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;IACzE,+DAA+D;IAC/D,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,0BAA0B,qDACU,CAAC"}

package/dist/SideNav/SideNavFocusTargetsContext.js

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file SideNavFocusTargetsContext.ts
+ * @input The SideNav rail's rows and its collapse toggle, registered by their
+ *   callback refs
+ * @output Where focus goes when collapsing the rail removes the focused row
+ * @position Internal to SideNav: not exported from the SideNav entry. SideNav
+ *   provides it; SideNavItem registers its row and SideNavCollapseButton,
+ *   rendered inside the SideNav, registers itself (`component:SideNav` AR3).
+ */
+import { createContext } from 'react';
+export const SideNavFocusTargetsContext = /*#__PURE__*/createContext(null);
+SideNavFocusTargetsContext.displayName = 'SideNavFocusTargetsContext';

package/dist/SideNav/SideNavHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiP5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCA4kBrB;yBA7lBe,cAAc"}
+{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwP5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAslBrB;yBAvmBe,cAAc"}

package/dist/SideNav/SideNavHeading.js

@@ -45,14 +45,17 @@ import { menuTouchActionStyles } from "../DropdownMenu/menuTouchAction.stylex.js
 import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
 import { NavHeadingCloseContext, NavHeadingDismissContext } from "../NavMenu/NavMenuContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { useTranslator } from "../i18n/index.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/SideNav/SideNavHeading.generated.js";
+import { isRenderable } from "../utils/isRenderable.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 // =============================================================================
 // Styles
 // =============================================================================
 
 /** The rows a press can act on in the heading's menu. */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const HEADING_MENU_ITEM_SELECTOR = '[role="menuitem"]:not([aria-disabled="true"])';
 const styles = {
   root: {
@@ -257,7 +260,7 @@ export function SideNavHeading({
   ...props
 }) {
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const LinkComponent = useLinkComponent(as);
   const {
     isCollapsed
@@ -320,11 +323,13 @@ export function SideNavHeading({
   // Collapsed, this button is the trigger, so it takes both roles.
   menu ? popover.triggerRef : undefined, menu ? setTriggerEl : undefined);
 
-  // In collapsed mode: hide if no icon, show icon-only if has icon
-  if (isCollapsed && !icon) {
+  // In collapsed mode: hide if no icon, show icon-only if has icon. Icon
+  // presence follows `isRenderable` (`architecture:react-component-runtime`
+  // INV16), so `0` is an icon like any other content.
+  if (isCollapsed && !isRenderable(icon)) {
     return null;
   }
-  if (isCollapsed && icon) {
+  if (isCollapsed) {
     const collapsedIcon = /*#__PURE__*/_jsx("span", {
       ...{
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
@@ -365,7 +370,7 @@ export function SideNavHeading({
             ...focusOutlineProps.focusVisible(styles.popoverHeading),
             // A close affordance, not the trigger: dismiss only.
             onClick: closeMenu,
-            children: [icon && /*#__PURE__*/_jsx("span", {
+            children: [isRenderable(icon) && /*#__PURE__*/_jsx("span", {
               ...{
                 className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
               },
@@ -496,7 +501,7 @@ export function SideNavHeading({
     color: "secondary",
     xstyle: styles.chevron
   });
-  const headerEndContentElement = headerEndContent && /*#__PURE__*/_jsx("span", {
+  const headerEndContentElement = isRenderable(headerEndContent) && /*#__PURE__*/_jsx("span", {
     ...{
       className: "x2lah0s x78zum5 x6s0dn4 xvc5jky"
     },
@@ -510,7 +515,7 @@ export function SideNavHeading({
     ...focusOutlineProps.focusVisible(styles.popoverHeading),
     // A close affordance, not the trigger: dismiss only.
     onClick: closeMenu,
-    children: [icon && /*#__PURE__*/_jsx("span", {
+    children: [isRenderable(icon) && /*#__PURE__*/_jsx("span", {
       ...{
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
       },
@@ -536,7 +541,7 @@ export function SideNavHeading({
         href: headingHref,
         ...focusOutlineProps.focusVisible(styles.linkBesideEndContent, styles.menuTrigger),
         ...props,
-        children: [icon && /*#__PURE__*/_jsx("span", {
+        children: [isRenderable(icon) && /*#__PURE__*/_jsx("span", {
           ...{
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
           },
@@ -554,7 +559,7 @@ export function SideNavHeading({
       "data-testid": testId,
       ...mergeProps(themeProps('side-nav-heading'), focusOutlineProps.focusVisible(styles.root, styles.menuTrigger, xstyle), className, style),
       ...props,
-      children: [icon && /*#__PURE__*/_jsx("span", {
+      children: [isRenderable(icon) && /*#__PURE__*/_jsx("span", {
         ...{
           className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
         },
@@ -571,7 +576,7 @@ export function SideNavHeading({
         "data-testid": testId,
         ...triggerProps,
         ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, styles.menuTrigger, xstyle), className, style),
-        children: [icon && /*#__PURE__*/_jsx("span", {
+        children: [isRenderable(icon) && /*#__PURE__*/_jsx("span", {
           ...{
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
           },
@@ -579,7 +584,9 @@ export function SideNavHeading({
         }), renderTextContent(/*#__PURE__*/_jsx("button", {
           ref: setTriggerEl,
           type: "button",
-          "aria-label": t('@astryx.sideNav.heading.openMenu'),
+          "aria-label": t('@astryx.sideNav.heading.openMenu', {
+            heading
+          }),
           onClick: e => {
             e.stopPropagation();
             triggerProps.onClick();
@@ -629,7 +636,7 @@ export function SideNavHeading({
         "data-testid": testId,
         ...triggerProps,
         ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
-        children: [icon && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
+        children: [isRenderable(icon) && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
           href: headingHref,
           "aria-label": heading,
           ...focusOutlineProps.focusVisible(styles.icon),
@@ -642,7 +649,9 @@ export function SideNavHeading({
         })), renderTextContent(showChevron ? /*#__PURE__*/_jsx("button", {
           ref: setTriggerEl,
           type: "button",
-          "aria-label": t('@astryx.sideNav.heading.openMenu'),
+          "aria-label": t('@astryx.sideNav.heading.openMenu', {
+            heading
+          }),
           onClick: e => {
             e.stopPropagation();
             triggerProps.onClick();
@@ -689,7 +698,7 @@ export function SideNavHeading({
       "data-testid": testId,
       ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
       ...props,
-      children: [icon && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
+      children: [isRenderable(icon) && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
         href: headingHref,
         "aria-label": heading,
         ...focusOutlineProps.focusVisible(styles.icon),
@@ -749,7 +758,7 @@ export function SideNavHeading({
     "data-testid": testId,
     ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
     ...props,
-    children: [icon && /*#__PURE__*/_jsx("span", {
+    children: [isRenderable(icon) && /*#__PURE__*/_jsx("span", {
       ...{
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
       },

package/dist/SideNav/SideNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA6ThF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAiclB;yBAnde,WAAW"}
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AAqUhF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAgdlB;yBAlee,WAAW"}

package/dist/SideNav/SideNavItem.js

@@ -53,12 +53,17 @@ import { useSideNavRenderMode } from "./SideNavRenderContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { disabledInteractionProps } from "../utils/disabledInteraction.js";
-import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { SideNavFocusTargetsContext } from "./SideNavFocusTargetsContext.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/SideNav/SideNavItem.generated.js";
+import { isRenderable } from "../utils/isRenderable.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 // =============================================================================
 // Styles
 // =============================================================================
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
 const styles = {
   root: {
     k1xSpc: "x78zum5",
@@ -309,7 +314,7 @@ export function SideNavItem({
   // The row (or, collapsed, the trigger/link/button) is the pressable; the
   // expand toggle inside it is its own.
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {
     isCollapsed
   } = useSideNavCollapse();
@@ -350,6 +355,15 @@ export function SideNavItem({
   });
   const railLeafRef = useMergedRefs(ref, railTooltip.ref);
 
+  // The row's root registers with its SideNav, so a collapse that removes the
+  // focused row can hand focus to the toggle or the nearest row still in the
+  // rail (`component:SideNav` AR3).
+  const focusTargets = use(SideNavFocusTargetsContext);
+  // The collapsed rail renders a top-level row with an icon (FR2).
+  const isKeptInRail = !!icon && depth === 0;
+  const rowRef = useCallback(element => element == null || focusTargets == null ? undefined : focusTargets.registerRow(element, isKeptInRail), [focusTargets, isKeptInRail]);
+  const rowTooltipRef = useMergedRefs(rowRef, railTooltip.ref);
+
   // Collapse state for items with children
   const itemCollapsibleConfig = useMemo(() => typeof itemCollapsible === 'object' ? itemCollapsible : {}, [itemCollapsible]);
   const isItemCollapsible = hasChildren && itemCollapsible !== false;
@@ -447,6 +461,7 @@ export function SideNavItem({
     // Items with children: popover trigger + popover
     if (hasChildren) {
       return /*#__PURE__*/_jsxs("div", {
+        ref: rowRef,
         ...stylex.props(styles.root, xstyle),
         children: [/*#__PURE__*/_jsx("button", {
           ref: mergedTriggerRef,
@@ -511,7 +526,7 @@ export function SideNavItem({
       children: collapsedIcon
     });
     return /*#__PURE__*/_jsxs("div", {
-      ref: isRowTrigger ? railTooltip.ref : undefined,
+      ref: isRowTrigger ? rowTooltipRef : rowRef,
       ...stylex.props(styles.root, xstyle),
       children: [collapsedElement, railTooltip.renderTooltip(label)]
     });
@@ -526,7 +541,7 @@ export function SideNavItem({
         className: "x98rzlu xeuugli xb3r6kr xlyipyv xuxw1ft"
       },
       children: label
-    }), !isCollapsed && endContent && /*#__PURE__*/_jsx("span", {
+    }), !isCollapsed && isRenderable(endContent) && /*#__PURE__*/_jsx("span", {
       ...{
         className: "x2lah0s x78zum5 x6s0dn4"
       },
@@ -663,6 +678,7 @@ export function SideNavItem({
     });
   }
   const item = /*#__PURE__*/_jsxs("div", {
+    ref: rowRef,
     ...stylex.props(styles.root, xstyle),
     children: [itemElement, hasChildren && !isCollapsed && /*#__PURE__*/_jsx("div", {
       id: `${id}-children`,

package/dist/SideNav/SideNavSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavSection.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavSection.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgE5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBA0CrB;yBAtDe,cAAc"}
+{"version":3,"file":"SideNavSection.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavSection.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiE5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBA0CrB;yBAtDe,cAAc"}