@viasat/beam-react 2.0.0

package/lib/Select/useSelectChipKeyboard.es.js

@@ -0,0 +1,38 @@
+import { useCallback as p } from "react";
+function b(c) {
+  const {
+    multiple: h,
+    open: t,
+    setOpen: u,
+    chips: {
+      enabled: d,
+      selectedChip: l,
+      setSelectedChip: n,
+      selectPreviousChip: s,
+      selectNextChip: o,
+      options: i,
+      deselectOptionValue: a
+    }
+  } = c, r = h && d && i.length > 0, k = p((e) => r ? e.key === "ArrowLeft" ? (e.preventDefault(), t && u(!1), s(l), !0) : e.key === "ArrowRight" ? (e.preventDefault(), t && u(!1), o(l), !0) : !1 : !1, [r, t, u, s, l, o]), C = p((e) => {
+    if (!r) return !1;
+    if (e.key === "Enter" && l !== null && !t) {
+      e.preventDefault();
+      const f = i[l];
+      return f && a(f.value), n(null), !0;
+    }
+    return !1;
+  }, [r, l, t, i, a, n]), y = p((e) => r && e.key === "Escape" && l !== null && !t ? (e.preventDefault(), n(null), !0) : !1, [r, l, t, n]), D = p((e) => {
+    if (!r || e.key !== "Backspace" && e.key !== "Delete") return !1;
+    if (e.preventDefault(), t && u(!1), l === null)
+      s(null);
+    else {
+      const f = i[l];
+      f && (a(f.value), e.key === "Backspace" ? l === 0 ? n(null) : s(l) : e.key === "Delete" && l >= i.length - 1 && n(null));
+    }
+    return !0;
+  }, [r, t, u, l, s, i, a, n]);
+  return { isChipMode: r, handleHorizontalChipNav: k, handleChipEnter: C, handleChipEscape: y, handleChipRemoval: D };
+}
+export {
+  b as useSelectChipKeyboard
+};

package/lib/Select/useSelectChips.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),k=({multiple:a,disabled:i,readOnly:f,open:r,setOpen:C,options:e,deselectOptionValue:g,fieldRef:d})=>{var h;const[t,u]=n.useState(null),c=a&&!i&&!f;n.useEffect(()=>{(!c||r)&&t!==null&&u(null)},[c,r,t]);const b=n.useCallback(l=>{if(e.length&&l!==0)return l===null||l>e.length-1?u(e.length-1):u(Math.max(0,l-1))},[e.length]),S=n.useCallback(l=>{if(l!==e.length-1)return l===null?u(0):l<e.length-1?u(l+1):e.length-1},[e.length]),P=n.useCallback(()=>{t!==null&&u(null)},[t]),s=t!==null?((h=e[t])==null?void 0:h.value)??null:null;return{chipGroupProps:n.useMemo(()=>({selectable:c,selectedChips:s!==null?[s]:[]}),[s,c]),handleBlur:P,selectedChip:t,setSelectedChip:u,enabled:c,selectPreviousChip:b,selectNextChip:S,options:e,deselectOptionValue:g,fieldRef:d,open:r,setOpen:C}};exports.useSelectChips=k;

package/lib/Select/useSelectChips.d.ts

@@ -0,0 +1,27 @@
+import { OptionProps } from '../_Options';
+export declare const useSelectChips: ({ multiple, disabled, readOnly, open, setOpen, options, deselectOptionValue, fieldRef, }: {
+    multiple: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    options: OptionProps[];
+    deselectOptionValue: (value: string | undefined) => void;
+    fieldRef?: React.RefObject<HTMLDivElement>;
+}) => {
+    chipGroupProps: {
+        selectable: boolean;
+        selectedChips: string[];
+    };
+    handleBlur: () => void;
+    selectedChip: number | null;
+    setSelectedChip: import('react').Dispatch<import('react').SetStateAction<number | null>>;
+    enabled: boolean;
+    selectPreviousChip: (prev: number | null) => void;
+    selectNextChip: (prev: number | null) => number | void;
+    options: OptionProps[];
+    deselectOptionValue: (value: string | undefined) => void;
+    fieldRef: import('react').RefObject<HTMLDivElement> | undefined;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};

package/lib/Select/useSelectChips.es.js

@@ -0,0 +1,55 @@
+import { useState as P, useEffect as S, useCallback as h, useMemo as G } from "react";
+const B = ({
+  multiple: f,
+  disabled: a,
+  readOnly: i,
+  open: r,
+  setOpen: g,
+  options: e,
+  deselectOptionValue: C,
+  fieldRef: d
+}) => {
+  var s;
+  const [t, u] = P(null), n = f && !a && !i;
+  S(() => {
+    (!n || r) && t !== null && u(null);
+  }, [n, r, t]);
+  const m = h(
+    (l) => {
+      if (e.length && l !== 0)
+        return l === null || l > e.length - 1 ? u(e.length - 1) : u(Math.max(0, l - 1));
+    },
+    [e.length]
+  ), b = h(
+    (l) => {
+      if (l !== e.length - 1)
+        return l === null ? u(0) : l < e.length - 1 ? u(l + 1) : e.length - 1;
+    },
+    [e.length]
+  ), x = h(() => {
+    t !== null && u(null);
+  }, [t]), c = t !== null ? ((s = e[t]) == null ? void 0 : s.value) ?? null : null;
+  return {
+    chipGroupProps: G(
+      () => ({
+        selectable: n,
+        selectedChips: c !== null ? [c] : []
+      }),
+      [c, n]
+    ),
+    handleBlur: x,
+    selectedChip: t,
+    setSelectedChip: u,
+    enabled: n,
+    selectPreviousChip: m,
+    selectNextChip: b,
+    options: e,
+    deselectOptionValue: C,
+    fieldRef: d,
+    open: r,
+    setOpen: g
+  };
+};
+export {
+  B as useSelectChips
+};

package/lib/Select/useSelectDropdown.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@floating-ui/react"),t=require("react"),Q=B=>{const{disabled:v,readOnly:m,lastSelectedOptionIndex:i}=B,[n,H]=t.useState(!1),x=t.useRef(n);x.current=n;const I=c.useFloatingNodeId(),[R,z]=t.useState(null),[d,y]=t.useState(!0),[S,k]=t.useState(!1),w=t.useCallback(e=>{R!==e&&(S?(k(!1),i===void 0&&y(!0)):y(!0),z(e))},[R,S,i]),r=t.useCallback((e,o,u)=>{H(e),e&&u==="click"&&o instanceof PointerEvent&&(k(!0),y(!1))},[]),{context:l,refs:s,floatingStyles:O}=c.useFloating({placement:"bottom-start",middleware:[c.flip(),c.size({apply({rects:e,elements:o}){Object.assign(o.floating.style,{width:`${e.reference.width}px`})}})],whileElementsMounted:c.autoUpdate,open:n,onOpenChange:r,nodeId:I}),f=t.useRef([]),C=t.useRef([]),L=c.useClick(l,{enabled:!v&&!m,keyboardHandlers:!0}),U=c.useRole(l,{role:"listbox"}),V=c.useDismiss(l),p=f.current.length===0?null:R??null,h=t.useRef(i??null),F=t.useMemo(()=>n?h.current:(h.current=i??null,f.current.length===0?null:i??null),[i,n]),_=c.useListNavigation(l,{enabled:!v&&!m,listRef:f,activeIndex:p,selectedIndex:F,onNavigate:w,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),$=c.useTypeahead(l,{enabled:!v&&!m,listRef:C,activeIndex:p,selectedIndex:F,onMatch:w}),{getReferenceProps:D,getFloatingProps:E,getItemProps:P}=c.useInteractions([L,U,V,_,$]),[A,G]=t.useState(n);t.useEffect(()=>G(n),[n]);const g=n?"open":"closed",b=t.useCallback(e=>{if(!n)return;const o=e.type==="focus"?e.target:e.relatedTarget,u=s.floating.current,a=s.domReference.current;if(u!=null&&u.contains(o)||a!=null&&a.contains(o)){e.preventDefault(),e.stopPropagation(),a==null||a.focus();return}r(!1,e.nativeEvent,"focus-out")},[n,s.domReference,s.floating,r]),M=t.useRef(n);t.useEffect(()=>{var e;M.current&&!n&&((e=s.domReference.current)==null||e.focus()),M.current=n},[n,s.domReference]);const K=t.useCallback((e={})=>({ref:s.setReference,...D({...e,onKeyDownCapture:o=>{var q;const u=x.current,a=s.domReference.current,N=a==null?void 0:a.getAttribute("aria-activedescendant"),j=N?document.getElementById(N):null;if((o.key==="Enter"||o.key===" ")&&u){if(o.preventDefault(),o.stopPropagation(),d&&j){const J=new KeyboardEvent("keydown",o.nativeEvent);j.dispatchEvent(J)}return}(q=e.onKeyDownCapture)==null||q.call(e,o)},onFocusCapture:b,onBlurCapture:b})}),[s.setReference,s.domReference,D,b,d]),T=t.useMemo(()=>({isMounted:A,status:g,getFloatingProps:E,getItemProps:P,floatingStyles:O,setOpen:r,nodeId:I,context:l,labelsRef:C,elementsRef:f,setFloating:s.setFloating,activeIndex:d?p:null}),[A,g,E,P,O,r,I,l,s.setFloating,p,d]);return t.useMemo(()=>({getFieldProps:K,dropdownProps:T,refs:s,open:n,setOpen:r,status:g}),[T,K,n,s,r,g])};exports.useSelectDropdown=Q;

package/lib/Select/useSelectDropdown.d.ts

@@ -0,0 +1,54 @@
+import { OpenChangeReason } from '@floating-ui/react';
+export interface UseSelectDropdownOptions {
+    disabled: boolean;
+    readOnly: boolean;
+    lastSelectedOptionIndex: number | undefined;
+}
+export declare const useSelectDropdown: (options: UseSelectDropdownOptions) => {
+    getFieldProps: (props?: React.HTMLProps<Element>) => {
+        ref: ((node: import('@floating-ui/react-dom').ReferenceType | null) => void) & ((node: HTMLDivElement | null) => void);
+    };
+    dropdownProps: {
+        isMounted: boolean;
+        status: string;
+        getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+        getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+            active?: boolean;
+            selected?: boolean;
+        }) => Record<string, unknown>;
+        floatingStyles: import('react').CSSProperties;
+        setOpen: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+        nodeId: string;
+        context: {
+            x: number;
+            y: number;
+            placement: import('@floating-ui/utils').Placement;
+            strategy: import('@floating-ui/utils').Strategy;
+            middlewareData: import('@floating-ui/core').MiddlewareData;
+            isPositioned: boolean;
+            update: () => void;
+            floatingStyles: React.CSSProperties;
+            open: boolean;
+            onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+            events: import('@floating-ui/react').FloatingEvents;
+            dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+            nodeId: string | undefined;
+            floatingId: string;
+            refs: import('@floating-ui/react').ExtendedRefs<HTMLDivElement>;
+            elements: import('@floating-ui/react').ExtendedElements<HTMLDivElement>;
+        };
+        labelsRef: import('react').MutableRefObject<string[]>;
+        elementsRef: import('react').MutableRefObject<HTMLElement[]>;
+        setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+        activeIndex: number | null;
+    };
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<HTMLDivElement>;
+    open: boolean;
+    setOpen: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+    status: string;
+};

package/lib/Select/useSelectDropdown.es.js

@@ -0,0 +1,123 @@
+import { useFloatingNodeId as Y, useFloating as Z, autoUpdate as ee, flip as te, size as ne, useClick as oe, useRole as se, useDismiss as ce, useListNavigation as re, useTypeahead as le, useInteractions as ae } from "@floating-ui/react";
+import { useState as i, useRef as u, useCallback as v, useMemo as O, useEffect as L } from "react";
+const fe = (U) => {
+  const { disabled: m, readOnly: I, lastSelectedOptionIndex: a } = U, [t, V] = i(!1), b = u(t);
+  b.current = t;
+  const y = Y(), [R, _] = i(null), [d, x] = i(!0), [h, k] = i(!1), F = v((e) => {
+    R !== e && (h ? (k(!1), a === void 0 && x(!0)) : x(!0), _(e));
+  }, [R, h, a]), c = v((e, o, l) => {
+    V(e), e && l === "click" && o instanceof PointerEvent && (k(!0), x(!1));
+  }, []), { context: r, refs: n, floatingStyles: C } = Z({
+    placement: "bottom-start",
+    middleware: [
+      te(),
+      ne({
+        apply({ rects: e, elements: o }) {
+          Object.assign(o.floating.style, {
+            width: `${e.reference.width}px`
+          });
+        }
+      })
+    ],
+    whileElementsMounted: ee,
+    open: t,
+    onOpenChange: c,
+    nodeId: y
+  }), f = u([]), D = u([]), $ = oe(r, { enabled: !m && !I, keyboardHandlers: !0 }), q = se(r, { role: "listbox" }), G = ce(r), p = f.current.length === 0 ? null : R ?? null, E = u(a ?? null), S = O(() => t ? E.current : (E.current = a ?? null, f.current.length === 0 ? null : a ?? null), [a, t]), J = re(r, {
+    enabled: !m && !I,
+    listRef: f,
+    activeIndex: p,
+    selectedIndex: S,
+    onNavigate: F,
+    focusItemOnHover: !1,
+    focusItemOnOpen: "auto",
+    openOnArrowKeyDown: !0,
+    nested: !1,
+    loop: !0,
+    virtual: !0,
+    scrollItemIntoView: !0
+  }), Q = le(r, {
+    enabled: !m && !I,
+    listRef: D,
+    activeIndex: p,
+    selectedIndex: S,
+    onMatch: F
+  }), { getReferenceProps: A, getFloatingProps: P, getItemProps: K } = ae([
+    $,
+    q,
+    G,
+    J,
+    Q
+  ]), [M, W] = i(t);
+  L(() => W(t), [t]);
+  const g = t ? "open" : "closed", w = v(
+    (e) => {
+      if (!t)
+        return;
+      const o = e.type === "focus" ? e.target : e.relatedTarget, l = n.floating.current, s = n.domReference.current;
+      if (l != null && l.contains(o) || s != null && s.contains(o)) {
+        e.preventDefault(), e.stopPropagation(), s == null || s.focus();
+        return;
+      }
+      c(!1, e.nativeEvent, "focus-out");
+    },
+    [t, n.domReference, n.floating, c]
+  ), N = u(t);
+  L(() => {
+    var e;
+    N.current && !t && ((e = n.domReference.current) == null || e.focus()), N.current = t;
+  }, [t, n.domReference]);
+  const T = v(
+    (e = {}) => ({
+      ref: n.setReference,
+      ...A({
+        ...e,
+        onKeyDownCapture: (o) => {
+          var z;
+          const l = b.current, s = n.domReference.current, H = s == null ? void 0 : s.getAttribute("aria-activedescendant"), j = H ? document.getElementById(H) : null;
+          if ((o.key === "Enter" || o.key === " ") && l) {
+            if (o.preventDefault(), o.stopPropagation(), d && j) {
+              const X = new KeyboardEvent("keydown", o.nativeEvent);
+              j.dispatchEvent(X);
+            }
+            return;
+          }
+          (z = e.onKeyDownCapture) == null || z.call(e, o);
+        },
+        onFocusCapture: w,
+        onBlurCapture: w
+      })
+    }),
+    [n.setReference, n.domReference, A, w, d]
+  ), B = O(
+    () => ({
+      isMounted: M,
+      status: g,
+      getFloatingProps: P,
+      getItemProps: K,
+      floatingStyles: C,
+      setOpen: c,
+      nodeId: y,
+      context: r,
+      labelsRef: D,
+      elementsRef: f,
+      setFloating: n.setFloating,
+      activeIndex: d ? p : null
+    }),
+    [M, g, P, K, C, c, y, r, n.setFloating, p, d]
+  );
+  return O(
+    () => ({
+      getFieldProps: T,
+      dropdownProps: B,
+      refs: n,
+      open: t,
+      setOpen: c,
+      status: g
+    }),
+    [B, T, t, n, c, g]
+  );
+};
+export {
+  fe as useSelectDropdown
+};

package/lib/Select/useSelectKeyboardManager.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),S=require("./useSelectChipKeyboard.cjs.js"),g=require("../../utils/keyboardComposition.cjs.js");function K(C){const{disabled:r,readOnly:t,multiple:y,open:l,setOpen:u,chips:n}=C,{selectedChip:s,setSelectedChip:i}=n,{handleHorizontalChipNav:o,handleChipEnter:c,handleChipEscape:d,handleChipRemoval:p}=S.useSelectChipKeyboard({multiple:y,open:l,setOpen:u,chips:n}),b=a.useCallback(e=>e.key!=="Escape"?!1:l?(u(!1),e.preventDefault(),!0):s!==null?(i(null),e.preventDefault(),!0):!1,[l,u,s,i]),f=a.useCallback(e=>{if(!(r||t))return!!(o(e)||p(e)||d(e))},[r,t,o,p,d]),h=a.useCallback(e=>{if(!(r||t))return!!(c(e)||b(e))},[r,t,c,b]);return{getKeyboardProps:a.useCallback(e=>g.augmentKeyboardProps({baseProps:e,captureHandlers:[f],bubbleHandlers:[h]}),[f,h])}}exports.useSelectKeyboardManager=K;

package/lib/Select/useSelectKeyboardManager.d.ts

@@ -0,0 +1,35 @@
+import { OptionProps } from '../_Options';
+export interface KeyboardManagerParams {
+    multiple: boolean;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    chips: {
+        enabled: boolean;
+        selectedChip: number | null;
+        setSelectedChip: (index: number | null) => void;
+        selectPreviousChip: (prev: number | null) => void;
+        selectNextChip: (prev: number | null) => void;
+        options: OptionProps[];
+        deselectOptionValue: (value: string | undefined) => void;
+    };
+    disabled: boolean;
+    readOnly: boolean;
+}
+/**
+ * useSelectKeyboardManager
+ * High-level keyboard coordinator for the Select root container.
+ *
+ * Scope:
+ *  - Guards (disabled/readOnly)
+ *  - Dropdown open / close (ArrowDown, Escape)
+ *  - Delegation of chip-related behaviors to `useSelectChipKeyboard`
+ *  - Sequencing of handlers with early-return short circuit
+ *
+ * Not responsible for:
+ *  - Option list navigation / highlighting (future dedicated hook)
+ *  - Chip-specific navigation/removal (extracted)
+ *  - Form integration or a11y announcements
+ */
+export declare function useSelectKeyboardManager(params: KeyboardManagerParams): {
+    getKeyboardProps: (baseProps: React.HTMLProps<HTMLElement>) => import('react').HTMLProps<HTMLElement>;
+};

package/lib/Select/useSelectKeyboardManager.es.js

@@ -0,0 +1,25 @@
+import { useCallback as n } from "react";
+import { useSelectChipKeyboard as y } from "./useSelectChipKeyboard.es.js";
+import { augmentKeyboardProps as H } from "../../utils/keyboardComposition.es.js";
+function S(m) {
+  const { disabled: r, readOnly: t, multiple: C, open: a, setOpen: u, chips: l } = m, { selectedChip: s, setSelectedChip: o } = l, { handleHorizontalChipNav: i, handleChipEnter: p, handleChipEscape: f, handleChipRemoval: c } = y({
+    multiple: C,
+    open: a,
+    setOpen: u,
+    chips: l
+  }), d = n((e) => e.key !== "Escape" ? !1 : a ? (u(!1), e.preventDefault(), !0) : s !== null ? (o(null), e.preventDefault(), !0) : !1, [a, u, s, o]), b = n((e) => {
+    if (!(r || t))
+      return !!(i(e) || c(e) || f(e));
+  }, [r, t, i, c, f]), h = n((e) => {
+    if (!(r || t))
+      return !!(p(e) || d(e));
+  }, [r, t, p, d]);
+  return { getKeyboardProps: n((e) => H({
+    baseProps: e,
+    captureHandlers: [b],
+    bubbleHandlers: [h]
+  }), [b, h]) };
+}
+export {
+  S as useSelectKeyboardManager
+};

package/lib/SideNav/SideNav.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("clsx"),o=require("react"),e=require("../../chunks/sideNav.module.B3wMOMTH.js"),re=require("../../chunks/classNames.DAeKwerT.js"),de=require("../../chunks/constants.hwjHOsvT.js"),M=require("./SideNavHeader.cjs.js"),U=require("./SideNavFooter.cjs.js"),b=require("./SideNavBody.cjs.js"),le=require("./SideNavContext.cjs.js"),ce=require("./SideNavLayoutContext.cjs.js"),Ne=require("../../utils/hooks/useElementResize.cjs.js"),ue=require("../../utils/hooks/useLocalStorage.cjs.js"),_e=require("../../utils/extractSpecifiedComponents.cjs.js"),ve=require("./SideNavActionList.cjs.js"),{baseClassNamePrefix:a,subElementClassPrefix:_}=re.getBEMClassNames("side-nav"),k=256,Se=200,ye=400,$="drawer",R="rail",B="hidden",L=!1,v="opaque",P="transparent",W=`${de.prefix}-side-nav-width`,Ae={Opaque:v,Transparent:P},l={Drawer:$,Rail:R,None:L},n={Rail:R,Hidden:B,None:L};function w(z){const{backdrop:D=v,children:j,className:V,closedLayout:c=n.None,floating:S=!1,openLayout:N=l.Drawer,resizable:y=!1,style:Y,...F}=z,{withMobile:K,isMobile:d,isSideNavOpen:t,setIsSideNavOpen:A,navigation:O,interactedWith:G,rootRef:Q}=le.useSideNavContext(),E=!!N&&!c;o.useEffect(()=>{!d&&!t&&E&&A(!0)},[d,t,E,A]);const{layout:s,resizable:m,navigation:h,backdrop:T,floating:g}=o.useMemo(()=>{if(d)return{layout:t?l.Drawer:n.Hidden,resizable:!1,navigation:O||null,backdrop:v,floating:!0};let p;return t?p=N:p=c||n.None,{layout:p,resizable:y&&t,navigation:null,backdrop:S?D:!1,floating:S}},[t,d,N,c,y,O,D,S]),x=o.useRef(null),C=o.useRef(null),[X,I]=ue.useLocalStorage(W,k.toString(),y),f=Ne.useElementResize(m,x,C,Se,ye,X);o.useEffect(()=>{I(f.toString())},[f,I]);const J=g?k:f,[{header:Z,footer:ee,body:q},se]=_e.extractSpecifiedComponents(j,{header:M.SideNavHeader,footer:U.SideNavFooter,body:b.SideNavBody}),te=()=>{A(!1)},ie=q?o.cloneElement(q,{reflowNavigation:h}):i.jsx(b.SideNavBody,{reflowNavigation:h,children:se}),oe=u(e.styles[a],s&&e.styles[`${a}--${s}`],g&&e.styles[`${a}--floating`],K&&e.styles[`${a}--mobile-enabled`],G&&e.styles[`${a}--interacted`],V),H=s===n.Hidden||s===n.None,ae=H?"":void 0,ne={inlineSize:s===l.Drawer?`${J}px`:"",...Y};return i.jsxs(ce.SideNavLayoutContextProvider,{value:{currentLayout:s,openLayout:N,closedLayout:c},children:[i.jsx("div",{className:u(e.styles[`${a}__wrapper`]),ref:Q,children:i.jsxs("aside",{ref:x,role:s?"complementary":void 0,"aria-label":"Side navigation","aria-hidden":H,inert:ae,className:oe,style:ne,...F,children:[Z,ie,ee,i.jsx("div",{className:u(e.styles[`${_}resize-handler`],(d||!m)&&e.styles[`${_}resize-handler--hidden`]),ref:C,role:"presentation"})]})}),T&&s===l.Drawer?i.jsx("div",{className:u(e.styles[`${_}backdrop`],e.styles[`${_}backdrop--${T}`]),onClick:te}):null]})}const r=w;r.displayName="SideNav";r.Body=b.SideNavBody;r.ActionList=ve.SideNavActionList;r.Header=M.SideNavHeader;r.Footer=U.SideNavFooter;exports.DRAWER_LAYOUT=$;exports.HIDDEN_LAYOUT=B;exports.LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME=W;exports.NO_LAYOUT=L;exports.OPAQUE_BACKDROP=v;exports.RAIL_LAYOUT=R;exports.Root=w;exports.SideNav=r;exports.SideNavBackdrops=Ae;exports.SideNavClosedLayouts=n;exports.SideNavOpenLayouts=l;exports.TRANSPARENT_BACKDROP=P;

package/lib/SideNav/SideNav.d.ts

@@ -0,0 +1,68 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+import { SideNavHeader } from './SideNavHeader';
+import { SideNavFooter } from './SideNavFooter';
+import { SideNavBody } from './SideNavBody';
+import { SideNavActionList } from './SideNavActionList';
+export declare const DRAWER_LAYOUT: "drawer";
+export declare const RAIL_LAYOUT: "rail";
+export declare const HIDDEN_LAYOUT: "hidden";
+export declare const NO_LAYOUT: false;
+export declare const OPAQUE_BACKDROP: "opaque";
+export declare const TRANSPARENT_BACKDROP: "transparent";
+export declare const LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME: string;
+export declare const SideNavBackdrops: {
+    Opaque: "opaque";
+    Transparent: "transparent";
+};
+export type SideNavBackdrop = typeof SideNavBackdrops[keyof typeof SideNavBackdrops];
+export declare const SideNavOpenLayouts: {
+    Drawer: "drawer";
+    Rail: "rail";
+    None: false;
+};
+export type OpenLayout = typeof SideNavOpenLayouts[keyof typeof SideNavOpenLayouts];
+export declare const SideNavClosedLayouts: {
+    Rail: "rail";
+    Hidden: "hidden";
+    None: false;
+};
+export type ClosedLayout = typeof SideNavClosedLayouts[keyof typeof SideNavClosedLayouts];
+export interface SideNavProps extends ComponentPropsWithoutRef<'aside'> {
+    /**
+     * Specify an opaque or transparent backdrop when the SideNav drawer is open and `floating` is set to `true`. On mobile, the backdrop is always set to opaque
+     * @default 'opaque'
+     */
+    backdrop?: SideNavBackdrop;
+    /**
+     * The content of the SideNav
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the layout of the SideNav when closed
+     * @default false
+     */
+    closedLayout?: ClosedLayout;
+    /**
+     * Specify if SideNav is absolutely positioned
+     * @default false
+     */
+    floating?: boolean;
+    /**
+     * Specify the layout of the SideNav when open
+     * @default 'drawer'
+     */
+    openLayout?: OpenLayout;
+    /**
+     * Specify if the drawer is resizable
+     * @default false
+     */
+    resizable?: boolean;
+}
+export declare function Root(props: SideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare const SideNav: typeof Root & {
+    displayName: string;
+    Body: typeof SideNavBody;
+    ActionList: typeof SideNavActionList;
+    Header: typeof SideNavHeader;
+    Footer: typeof SideNavFooter;
+};

package/lib/SideNav/SideNav.es.js

@@ -0,0 +1,179 @@
+import { jsx as l, jsxs as x } from "react/jsx-runtime";
+import c from "clsx";
+import ie, { useEffect as C, useMemo as se, useRef as w } from "react";
+import { s as e } from "../../chunks/sideNav.module.DBN2ryFs.js";
+import { g as re } from "../../chunks/classNames.DNsS4J__.js";
+import { p as ne } from "../../chunks/constants.BBi77pmH.js";
+import { SideNavHeader as k } from "./SideNavHeader.es.js";
+import { SideNavFooter as z } from "./SideNavFooter.es.js";
+import { SideNavBody as S } from "./SideNavBody.es.js";
+import { useSideNavContext as de } from "./SideNavContext.es.js";
+import { SideNavLayoutContextProvider as le } from "./SideNavLayoutContext.es.js";
+import { useElementResize as ce } from "../../utils/hooks/useElementResize.es.js";
+import { useLocalStorage as fe } from "../../utils/hooks/useLocalStorage.es.js";
+import { extractSpecifiedComponents as me } from "../../utils/extractSpecifiedComponents.es.js";
+import { SideNavActionList as Ne } from "./SideNavActionList.es.js";
+const { baseClassNamePrefix: a, subElementClassPrefix: f } = re("side-nav"), M = 256, pe = 200, ve = 400, ue = "drawer", H = "rail", _e = "hidden", W = !1, b = "opaque", Se = "transparent", be = `${ne}-side-nav-width`, ke = {
+  Opaque: b,
+  Transparent: Se
+}, m = {
+  Drawer: ue,
+  Rail: H,
+  None: W
+}, s = {
+  Rail: H,
+  Hidden: _e,
+  None: W
+};
+function ye(U) {
+  const {
+    backdrop: y = b,
+    children: P,
+    className: B,
+    closedLayout: n = s.None,
+    floating: N = !1,
+    openLayout: d = m.Drawer,
+    resizable: p = !1,
+    style: V,
+    ...Y
+  } = U, {
+    withMobile: F,
+    isMobile: i,
+    isSideNavOpen: t,
+    setIsSideNavOpen: v,
+    navigation: A,
+    interactedWith: j,
+    rootRef: q
+  } = de(), h = !!d && !n;
+  C(() => {
+    !i && !t && h && v(!0);
+  }, [i, t, h, v]);
+  const { layout: o, resizable: D, navigation: g, backdrop: L, floating: R } = se(() => {
+    if (i)
+      return {
+        layout: t ? m.Drawer : s.Hidden,
+        resizable: !1,
+        navigation: A || null,
+        backdrop: b,
+        floating: !0
+      };
+    let _;
+    return t ? _ = d : _ = n || s.None, {
+      layout: _,
+      resizable: p && t,
+      navigation: null,
+      backdrop: N ? y : !1,
+      floating: N
+    };
+  }, [
+    t,
+    i,
+    d,
+    n,
+    p,
+    A,
+    y,
+    N
+  ]), E = w(null), I = w(null), [K, O] = fe(
+    be,
+    M.toString(),
+    p
+  ), u = ce(
+    D,
+    E,
+    I,
+    pe,
+    ve,
+    K
+  );
+  C(() => {
+    O(u.toString());
+  }, [u, O]);
+  const G = R ? M : u, [{ header: Q, footer: X, body: T }, J] = me(
+    P,
+    {
+      header: k,
+      footer: z,
+      body: S
+    }
+  ), Z = () => {
+    v(!1);
+  }, ee = T ? ie.cloneElement(T, { reflowNavigation: g }) : /* @__PURE__ */ l(S, { reflowNavigation: g, children: J }), oe = c(
+    e[a],
+    o && e[`${a}--${o}`],
+    R && e[`${a}--floating`],
+    F && e[`${a}--mobile-enabled`],
+    j && e[`${a}--interacted`],
+    B
+  ), $ = o === s.Hidden || o === s.None, te = $ ? "" : void 0, ae = {
+    inlineSize: o === m.Drawer ? `${G}px` : "",
+    ...V
+  };
+  return /* @__PURE__ */ x(
+    le,
+    {
+      value: { currentLayout: o, openLayout: d, closedLayout: n },
+      children: [
+        /* @__PURE__ */ l("div", { className: c(e[`${a}__wrapper`]), ref: q, children: /* @__PURE__ */ x(
+          "aside",
+          {
+            ref: E,
+            role: o ? "complementary" : void 0,
+            "aria-label": "Side navigation",
+            "aria-hidden": $,
+            inert: te,
+            className: oe,
+            style: ae,
+            ...Y,
+            children: [
+              Q,
+              ee,
+              X,
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  className: c(
+                    e[`${f}resize-handler`],
+                    (i || !D) && e[`${f}resize-handler--hidden`]
+                  ),
+                  ref: I,
+                  role: "presentation"
+                }
+              )
+            ]
+          }
+        ) }),
+        L && o === m.Drawer ? /* @__PURE__ */ l(
+          "div",
+          {
+            className: c(
+              e[`${f}backdrop`],
+              e[`${f}backdrop--${L}`]
+            ),
+            onClick: Z
+          }
+        ) : null
+      ]
+    }
+  );
+}
+const r = ye;
+r.displayName = "SideNav";
+r.Body = S;
+r.ActionList = Ne;
+r.Header = k;
+r.Footer = z;
+export {
+  ue as DRAWER_LAYOUT,
+  _e as HIDDEN_LAYOUT,
+  be as LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME,
+  W as NO_LAYOUT,
+  b as OPAQUE_BACKDROP,
+  H as RAIL_LAYOUT,
+  ye as Root,
+  r as SideNav,
+  ke as SideNavBackdrops,
+  s as SideNavClosedLayouts,
+  m as SideNavOpenLayouts,
+  Se as TRANSPARENT_BACKDROP
+};

package/lib/SideNav/SideNavActionList.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("./SideNavActionListItem.cjs.js"),o=require("./SideNavActionListGroup.cjs.js"),e=require("../ActionList/ActionList.context.cjs.js"),d=require("../ActionList/ActionList.cjs.js"),L=require("../Menu/Menu.cjs.js");require("../Menu/Menu.context.cjs.js");const t=({children:s,...r})=>{const c=e.useActionListContext(),u={allowChildrenTypes:[n.SideNavActionListItem,o.SideNavActionListGroup,L.Menu],insideMenu:!0,itemsFocusable:!0,parentContext:c,append:!0,getItemProps:a=>a};return i.jsx(e.ActionListContextProvider,{...u,children:i.jsx(d.ActionList,{...r,children:s})})};t.Item=n.SideNavActionListItem;t.Group=o.SideNavActionListGroup;exports.SideNavActionList=t;

package/lib/SideNav/SideNavActionList.d.ts

@@ -0,0 +1,19 @@
+import { ActionListProps } from '../ActionList';
+export type SideNavActionListProps = ActionListProps;
+export declare const SideNavActionList: {
+    ({ children, ...restProps }: SideNavActionListProps): import("react/jsx-runtime").JSX.Element;
+    Item: import('react').ForwardRefExoticComponent<import('./SideNavActionListItem').SideNavActionListItemProps & import('react').RefAttributes<HTMLDivElement & HTMLAnchorElement>> & {
+        displayName: string;
+        Label: typeof import('./SideNavActionListItemLabel').SideNavActionListItemLabel;
+        Flyout: typeof import('./SideNavActionListItemFlyout').SideNavActionListItemFlyout;
+        Expandable: typeof import('./SideNavActionListItemExpandable').SideNavActionListItemExpandable;
+    };
+    Group: {
+        ({ children, className: _className, ...props }: import('./SideNavActionListGroup').SideNavActionListGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+        Heading: {
+            ({ children, contentAfter, className: _className, }: import('./SideNavActionListGroupHeading').SideNavActionListGroupHeadingProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+    };
+};