@viasat/beam-react 2.0.0

package/lib/SideNav/SideNavActionList.es.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SideNavActionListItem as o } from "./SideNavActionListItem.es.js";
+import { SideNavActionListGroup as i } from "./SideNavActionListGroup.es.js";
+import { useActionListContext as p, ActionListContextProvider as c } from "../ActionList/ActionList.context.es.js";
+import { ActionList as a } from "../ActionList/ActionList.es.js";
+import { Menu as u } from "../Menu/Menu.es.js";
+import "../Menu/Menu.context.es.js";
+const e = ({
+  children: r,
+  ...n
+}) => {
+  const s = p();
+  return /* @__PURE__ */ t(c, { ...{
+    allowChildrenTypes: [o, i, u],
+    insideMenu: !0,
+    itemsFocusable: !0,
+    parentContext: s,
+    append: !0,
+    getItemProps: (m) => m
+  }, children: /* @__PURE__ */ t(a, { ...n, children: r }) });
+};
+e.Item = o;
+e.Group = i;
+export {
+  e as SideNavActionList
+};

package/lib/SideNav/SideNavActionListGroup.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),d=require("clsx"),u=require("../../chunks/sideNav.module.B3wMOMTH.js"),l=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const p=require("../../chunks/ActionList.Group.Bv9vgU22.js"),N=require("../../utils/extractSpecifiedComponents.cjs.js"),i=require("./SideNavActionListGroupHeading.cjs.js"),{baseClassNamePrefix:g}=l.getBEMClassNames("side-nav__group"),e=({children:s,className:t,...n})=>{const[{heading:o},r]=N.extractSpecifiedComponents(s,{heading:i.SideNavActionListGroupHeading}),a=d(u.styles[`${g}`],t);return c.jsx(p.ActionListGroup,{...n,kind:"action",className:a,role:"group",heading:o,children:r})};e.displayName="SideNav.ActionList.Group";e.Heading=i.SideNavActionListGroupHeading;exports.SideNavActionListGroup=e;

package/lib/SideNav/SideNavActionListGroup.d.ts

@@ -0,0 +1,10 @@
+import { ActionListGroupProps } from '../ActionList/ActionList.Group';
+export type SideNavActionListGroupProps = Omit<ActionListGroupProps, 'heading' | 'role' | 'kind' | 'indent'>;
+export declare const SideNavActionListGroup: {
+    ({ children, className: _className, ...props }: 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;
+    };
+};

package/lib/SideNav/SideNavActionListGroup.es.js

@@ -0,0 +1,33 @@
+import { jsx as n } from "react/jsx-runtime";
+import p from "clsx";
+import { s as c } from "../../chunks/sideNav.module.DBN2ryFs.js";
+import { g as d } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { A as l } from "../../chunks/ActionList.Group.DuNxYNZQ.js";
+import { extractSpecifiedComponents as f } from "../../utils/extractSpecifiedComponents.es.js";
+import { SideNavActionListGroupHeading as o } from "./SideNavActionListGroupHeading.es.js";
+const { baseClassNamePrefix: g } = d("side-nav__group"), i = ({
+  children: r,
+  className: s,
+  ...t
+}) => {
+  const [{ heading: e }, a] = f(r, {
+    heading: o
+  }), m = p(c[`${g}`], s);
+  return /* @__PURE__ */ n(
+    l,
+    {
+      ...t,
+      kind: "action",
+      className: m,
+      role: "group",
+      heading: e,
+      children: a
+    }
+  );
+};
+i.displayName = "SideNav.ActionList.Group";
+i.Heading = o;
+export {
+  i as SideNavActionListGroup
+};

package/lib/SideNav/SideNavActionListGroupHeading.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("clsx"),s=require("../../chunks/sideNav.module.B3wMOMTH.js"),o=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const{baseClassNamePrefix:d,subElementClassPrefix:a}=o.getBEMClassNames("side-nav__heading"),t=({children:n,contentAfter:i,className:r})=>{const c=l(s.styles[`${d}`],r);return e.jsxs("div",{className:c,children:[e.jsx("div",{className:s.styles[`${a}content`],children:n}),i&&e.jsx("div",{className:s.styles[`${a}content-after`],children:i})]})};t.displayName="SideNav.ActionList.Group.Heading";exports.SideNavActionListGroupHeading=t;

package/lib/SideNav/SideNavActionListGroupHeading.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface SideNavActionListGroupHeadingProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The content of the SideNav.ActionList.Group.Heading
+     * @default null
+     */
+    children: React.ReactNode;
+    /**
+     * Add content after the text
+     */
+    contentAfter?: React.ReactNode;
+}
+export declare const SideNavActionListGroupHeading: {
+    ({ children, contentAfter, className: _className, }: SideNavActionListGroupHeadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/SideNav/SideNavActionListGroupHeading.es.js

@@ -0,0 +1,20 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import n from "clsx";
+import { s } from "../../chunks/sideNav.module.DBN2ryFs.js";
+import { g as c } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+const { baseClassNamePrefix: l, subElementClassPrefix: i } = c("side-nav__heading"), d = ({
+  children: t,
+  contentAfter: a,
+  className: o
+}) => {
+  const r = n(s[`${l}`], o);
+  return /* @__PURE__ */ m("div", { className: r, children: [
+    /* @__PURE__ */ e("div", { className: s[`${i}content`], children: t }),
+    a && /* @__PURE__ */ e("div", { className: s[`${i}content-after`], children: a })
+  ] });
+};
+d.displayName = "SideNav.ActionList.Group.Heading";
+export {
+  d as SideNavActionListGroupHeading
+};

package/lib/SideNav/SideNavActionListItem.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),I=require("react"),x=require("clsx"),S=require("../../chunks/sideNav.module.B3wMOMTH.js"),_=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const y=require("../../utils/extractSpecifiedComponents.cjs.js"),f=require("../../chunks/ActionList.Item.D7Rg5iMb.js"),p=require("./SideNavActionListItemLabel.cjs.js"),l=require("./SideNavActionListItemFlyout.cjs.js"),r=require("./SideNavActionListItemExpandable.cjs.js"),q=require("./SideNavExpandableContext.cjs.js"),{baseClassNamePrefix:E,classModifierPrefix:h}=_.getBEMClassNames("side-nav__action"),F=I.forwardRef((L,a)=>{const{className:s,selected:t,children:d,...o}=L,{indent:u}=q.useSideNavExpandableContext(),[{label:i,flyout:m,expandable:v}]=y.extractSpecifiedComponents(d,{label:p.SideNavActionListItemLabel,flyout:l.SideNavActionListItemFlyout,expandable:r.SideNavActionListItemExpandable}),N=i&&m,b=i&&v;N&&b&&console.warn("SideNav.ActionList.Item: You cannot use both Flyout and Expandable components at the same time. Defaulting to Flyout.");const n=x(S.styles[`${E}`],t&&S.styles[`${h}selected`]);if(N)return c.jsx(l.Flyout,{className:s,baseClassName:n,ref:a,label:i,flyout:m,"aria-checked":void 0,"aria-selected":void 0,"aria-current":t?!0:void 0,...o});if(b)return c.jsx(r.Expandable,{label:i,expandable:v,baseClassName:n,className:s,indent:u,ref:a,"aria-current":t?!0:void 0,"aria-checked":void 0,"aria-selected":void 0,...o});{const A=x(n,s);return c.jsx(f.ActionListItem,{className:A,tabIndex:0,ref:a,tooltipPlacement:"right",indent:u,"aria-checked":void 0,"aria-selected":void 0,"aria-current":t?!0:void 0,...o,children:d})}}),e=F;e.Label=p.SideNavActionListItemLabel;e.Flyout=l.SideNavActionListItemFlyout;e.Expandable=r.SideNavActionListItemExpandable;e.displayName="SideNav.ActionList.Item";exports.SideNavActionListItem=e;

package/lib/SideNav/SideNavActionListItem.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { ActionListItemProps } from '../ActionList/ActionList.Item';
+import { SideNavActionListItemLabel } from './SideNavActionListItemLabel';
+import { SideNavActionListItemFlyout } from './SideNavActionListItemFlyout';
+import { SideNavActionListItemExpandable } from './SideNavActionListItemExpandable';
+export interface SideNavActionListItemProps extends ActionListItemProps {
+    /**
+     * The content of the SideNav.ActionList.Item
+     */
+    children: React.ReactNode;
+    /**
+     * Boolean that states if the action is selected
+     */
+    selected?: boolean;
+}
+declare const Root: React.ForwardRefExoticComponent<SideNavActionListItemProps & React.RefAttributes<HTMLDivElement & HTMLAnchorElement>>;
+export declare const SideNavActionListItem: typeof Root & {
+    displayName: string;
+    Label: typeof SideNavActionListItemLabel;
+    Flyout: typeof SideNavActionListItemFlyout;
+    Expandable: typeof SideNavActionListItemExpandable;
+};
+export {};

package/lib/SideNav/SideNavActionListItem.es.js

@@ -0,0 +1,82 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as L } from "react";
+import u from "clsx";
+import { s as v } from "../../chunks/sideNav.module.DBN2ryFs.js";
+import { g as A } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { extractSpecifiedComponents as I } from "../../utils/extractSpecifiedComponents.es.js";
+import { A as S } from "../../chunks/ActionList.Item.Dg_KHGsm.js";
+import { SideNavActionListItemLabel as b } from "./SideNavActionListItemLabel.es.js";
+import { Flyout as E, SideNavActionListItemFlyout as x } from "./SideNavActionListItemFlyout.es.js";
+import { Expandable as F, SideNavActionListItemExpandable as N } from "./SideNavActionListItemExpandable.es.js";
+import { useSideNavExpandableContext as C } from "./SideNavExpandableContext.es.js";
+const { baseClassNamePrefix: g, classModifierPrefix: P } = A("side-nav__action"), k = L((y, o) => {
+  const { className: i, selected: e, children: c, ...s } = y, { indent: l } = C(), [{ label: t, flyout: m, expandable: d }] = I(c, {
+    label: b,
+    flyout: x,
+    expandable: N
+  }), p = t && m, f = t && d;
+  p && f && console.warn(
+    "SideNav.ActionList.Item: You cannot use both Flyout and Expandable components at the same time. Defaulting to Flyout."
+  );
+  const r = u(
+    v[`${g}`],
+    e && v[`${P}selected`]
+  );
+  if (p)
+    return /* @__PURE__ */ n(
+      E,
+      {
+        className: i,
+        baseClassName: r,
+        ref: o,
+        label: t,
+        flyout: m,
+        "aria-checked": void 0,
+        "aria-selected": void 0,
+        "aria-current": e ? !0 : void 0,
+        ...s
+      }
+    );
+  if (f)
+    return /* @__PURE__ */ n(
+      F,
+      {
+        label: t,
+        expandable: d,
+        baseClassName: r,
+        className: i,
+        indent: l,
+        ref: o,
+        "aria-current": e ? !0 : void 0,
+        "aria-checked": void 0,
+        "aria-selected": void 0,
+        ...s
+      }
+    );
+  {
+    const h = u(r, i);
+    return /* @__PURE__ */ n(
+      S,
+      {
+        className: h,
+        tabIndex: 0,
+        ref: o,
+        tooltipPlacement: "right",
+        indent: l,
+        "aria-checked": void 0,
+        "aria-selected": void 0,
+        "aria-current": e ? !0 : void 0,
+        ...s,
+        children: c
+      }
+    );
+  }
+}), a = k;
+a.Label = b;
+a.Flyout = x;
+a.Expandable = N;
+a.displayName = "SideNav.ActionList.Item";
+export {
+  a as SideNavActionListItem
+};

package/lib/SideNav/SideNavActionListItemExpandable.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),v=require("clsx"),d=require("../../chunks/sideNav.module.B3wMOMTH.js"),p=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const _=require("../Accordion/Accordion.cjs.js"),N=require("../Accordion/AccordionGroup.cjs.js"),f=require("../../chunks/ActionList.Item.D7Rg5iMb.js"),g=require("./SideNavExpandableContext.cjs.js"),y=require("./SideNavLayoutContext.cjs.js"),u=require("./SideNavActionListItemFlyout.cjs.js"),S=require("../Button/Button.cjs.js"),j=require("../Icon/Icon.cjs.js");function C(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const b=C(s),q=e=>b.createElement("svg",{viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},b.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10 8C10 8.23607 9.9012 8.45836 9.73333 8.6L7.06667 10.85C6.86465 11.0204 6.59438 11.0479 6.36852 10.9208C6.14267 10.7938 6 10.5341 6 10.25L6 5.75C6 5.46592 6.14267 5.20623 6.36852 5.07918C6.59438 4.95214 6.86465 4.97956 7.06667 5.15L9.73333 7.4C9.9012 7.54164 10 7.76393 10 8Z",fill:"currentColor"})),A=e=>t.jsx(_.Accordion,{...e}),{baseClassNamePrefix:L,classModifierPrefix:I}=p.getBEMClassNames("side-nav__action"),h=s.forwardRef((e,i)=>{const{label:n,expandable:o,baseClassName:c,className:l,onClick:r,...a}=e,{currentLayout:m}=y.useSideNavLayoutContext();if(m==="rail")return t.jsx(u.Flyout,{className:l,baseClassName:c,ref:i,label:n,flyout:t.jsx(u.SideNavActionListItemFlyout,{children:o.props.children}),...a});const x=v(c,d.styles[`${I}expandable`],l);return t.jsx(g.SideNavExpandableContextProvider,{children:t.jsx(N.AccordionGroup,{children:s.cloneElement(o,{role:void 0,"aria-controls":void 0,tabIndex:void 0,heading:t.jsxs(t.Fragment,{children:[t.jsx(S.Button,{iconOnly:!0,iconBefore:t.jsx(j.Icon,{icon:q}),appearance:"neutral-subtle",kind:"bare",size:"sm",tabIndex:r?0:-1,"aria-label":`Toggle ${n.props.children}`,"aria-disabled":void 0,disabled:e.disabled,role:"menuitem",style:{pointerEvents:r?"unset":"none",marginInlineStart:typeof a.indent=="number"?`${a.indent+.5}rem`:0},className:d.styles[`${L}__expandable-icon`]}),t.jsx(f.ActionListItem,{className:x,ref:i,"aria-checked":void 0,"aria-disabled":void 0,disabled:e.disabled,onClick:r,...a,children:n})]})})})})});exports.Expandable=h;exports.SideNavActionListItemExpandable=A;

package/lib/SideNav/SideNavActionListItemExpandable.d.ts

@@ -0,0 +1,39 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+import { ActionListItemProps } from '../ActionList/ActionList.Item';
+import { SideNavActionListItemLabelProps } from './SideNavActionListItemLabel';
+export interface SideNavActionListItemExpandableProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Specify body content for the SideNav.ActionList.Item.Expandable
+     */
+    children: React.ReactNode;
+    /**
+     * Specify a callback when the open SideNav.ActionList.Item.Expandable changes
+     */
+    onToggle?: (event: React.SyntheticEvent, isOpen: boolean) => void;
+    /**
+     * Specify if an SideNav.ActionList.Item.Expandable is open.
+     * If this is specified, the component becomes controlled
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Specify if an SideNav.ActionList.Item.Expandable is open by default
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * This is used internally by SideNav.ActionList.Item.Expandable and should not be set manually
+     * @internal
+     */
+    heading?: React.ReactNode;
+}
+export declare const SideNavActionListItemExpandable: (props: SideNavActionListItemExpandableProps) => import("react/jsx-runtime").JSX.Element;
+interface ExpandableProps extends Omit<ActionListItemProps, 'children' | 'kind' | 'tabIndex' | 'ref'> {
+    className?: string;
+    label: React.ReactElement<SideNavActionListItemLabelProps>;
+    expandable: React.ReactElement<SideNavActionListItemExpandableProps>;
+    baseClassName: string;
+    onClick?: ActionListItemProps['onClick'];
+}
+export declare const Expandable: React.ForwardRefExoticComponent<ExpandableProps & React.RefAttributes<HTMLDivElement & HTMLAnchorElement>>;
+export {};

package/lib/SideNav/SideNavActionListItemExpandable.es.js

@@ -0,0 +1,87 @@
+import { jsx as e, jsxs as f, Fragment as b } from "react/jsx-runtime";
+import * as d from "react";
+import u, { forwardRef as v } from "react";
+import x from "clsx";
+import { s as m } from "../../chunks/sideNav.module.DBN2ryFs.js";
+import { g as C } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { Accordion as N } from "../Accordion/Accordion.es.js";
+import { AccordionGroup as g } from "../Accordion/AccordionGroup.es.js";
+import { A as h } from "../../chunks/ActionList.Item.Dg_KHGsm.js";
+import { SideNavExpandableContextProvider as y } from "./SideNavExpandableContext.es.js";
+import { useSideNavLayoutContext as E } from "./SideNavLayoutContext.es.js";
+import { Flyout as L, SideNavActionListItemFlyout as w } from "./SideNavActionListItemFlyout.es.js";
+import { Button as I } from "../Button/Button.es.js";
+import { Icon as _ } from "../Icon/Icon.es.js";
+const A = (o) => /* @__PURE__ */ d.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o }, /* @__PURE__ */ d.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 8C10 8.23607 9.9012 8.45836 9.73333 8.6L7.06667 10.85C6.86465 11.0204 6.59438 11.0479 6.36852 10.9208C6.14267 10.7938 6 10.5341 6 10.25L6 5.75C6 5.46592 6.14267 5.20623 6.36852 5.07918C6.59438 4.95214 6.86465 4.97956 7.06667 5.15L9.73333 7.4C9.9012 7.54164 10 7.76393 10 8Z", fill: "currentColor" })), H = (o) => /* @__PURE__ */ e(N, { ...o }), { baseClassNamePrefix: S, classModifierPrefix: R } = C("side-nav__action"), J = v((o, t) => {
+  const {
+    label: a,
+    expandable: n,
+    baseClassName: l,
+    className: s,
+    onClick: i,
+    ...r
+  } = o, { currentLayout: c } = E();
+  if (c === "rail")
+    return /* @__PURE__ */ e(
+      L,
+      {
+        className: s,
+        baseClassName: l,
+        ref: t,
+        label: a,
+        flyout: /* @__PURE__ */ e(w, { children: n.props.children }),
+        ...r
+      }
+    );
+  const p = x(
+    l,
+    m[`${R}expandable`],
+    s
+  );
+  return /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(g, { children: u.cloneElement(n, {
+    role: void 0,
+    "aria-controls": void 0,
+    tabIndex: void 0,
+    // needed to override the tabIndex=0 on the Accordion to let the focus go to the ActionListItem
+    heading: /* @__PURE__ */ f(b, { children: [
+      /* @__PURE__ */ e(
+        I,
+        {
+          iconOnly: !0,
+          iconBefore: /* @__PURE__ */ e(_, { icon: A }),
+          appearance: "neutral-subtle",
+          kind: "bare",
+          size: "sm",
+          tabIndex: i ? 0 : -1,
+          "aria-label": `Toggle ${a.props.children}`,
+          "aria-disabled": void 0,
+          disabled: o.disabled,
+          role: "menuitem",
+          style: {
+            pointerEvents: i ? "unset" : "none",
+            marginInlineStart: typeof r.indent == "number" ? `${r.indent + 0.5}rem` : 0
+          },
+          className: m[`${S}__expandable-icon`]
+        }
+      ),
+      /* @__PURE__ */ e(
+        h,
+        {
+          className: p,
+          ref: t,
+          "aria-checked": void 0,
+          "aria-disabled": void 0,
+          disabled: o.disabled,
+          onClick: i,
+          ...r,
+          children: a
+        }
+      )
+    ] })
+  }) }) });
+});
+export {
+  J as Expandable,
+  H as SideNavActionListItemExpandable
+};

package/lib/SideNav/SideNavActionListItemFlyout.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),x=require("../../chunks/ActionList.Item.D7Rg5iMb.js"),t=require("../Menu/Menu.cjs.js"),M=require("../Menu/Menu.context.cjs.js"),_=require("./SideNavContext.cjs.js"),v=require("clsx"),N=t.Menu.PopoverContent,b=m.forwardRef((o,s)=>{const{className:i,label:r,flyout:u,baseClassName:c,...l}=o,{isRTL:n}=_.useSideNavContext(),a=M.useMenuContext()!==void 0,d=v(a?"":c,i);return e.jsxs(t.Menu,{placement:n?"left-start":"right-start",listNavigation:{focusItemOnOpen:!0,nested:!0,rtl:n},children:[e.jsx(t.Menu.Trigger,{children:e.jsx(x.ActionListItem,{className:d,tabIndex:0,kind:"flyout",ref:s,tooltipPlacement:"right",...l,children:r})}),e.jsx(t.Menu.PopoverContent,{dir:n?"rtl":"ltr",children:u})]})});exports.Flyout=b;exports.SideNavActionListItemFlyout=N;

package/lib/SideNav/SideNavActionListItemFlyout.d.ts

@@ -0,0 +1,17 @@
+import { ActionListItemProps } from '../ActionList/ActionList.Item';
+import { MenuPopoverContentProps } from '../Menu/Menu.PopoverContent';
+import { SideNavActionListItemLabelProps } from './SideNavActionListItemLabel';
+export interface SideNavActionListItemFlyoutProps extends MenuPopoverContentProps {
+    /**
+     * The content of the SideNav.ActionList.Item.Flyout
+     */
+    children: React.ReactNode;
+}
+export declare const SideNavActionListItemFlyout: ({ children, style, className: _className, ...props }: MenuPopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export interface FlyoutProps extends Omit<ActionListItemProps, 'children' | 'kind' | 'tabIndex' | 'ref'> {
+    className?: string;
+    label: React.ReactElement<SideNavActionListItemLabelProps>;
+    flyout: React.ReactElement<SideNavActionListItemFlyoutProps>;
+    baseClassName: string;
+}
+export declare const Flyout: import('react').ForwardRefExoticComponent<FlyoutProps & import('react').RefAttributes<HTMLDivElement & HTMLAnchorElement>>;

package/lib/SideNav/SideNavActionListItemFlyout.es.js

@@ -0,0 +1,49 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { A as d } from "../../chunks/ActionList.Item.Dg_KHGsm.js";
+import { Menu as t } from "../Menu/Menu.es.js";
+import { useMenuContext as x } from "../Menu/Menu.context.es.js";
+import { useSideNavContext as C } from "./SideNavContext.es.js";
+import N from "clsx";
+const L = t.PopoverContent, M = f(
+  (r, n) => {
+    const {
+      className: s,
+      label: i,
+      flyout: m,
+      baseClassName: l,
+      ...a
+    } = r, { isRTL: e } = C(), c = x() !== void 0, u = N(c ? "" : l, s);
+    return /* @__PURE__ */ p(
+      t,
+      {
+        placement: e ? "left-start" : "right-start",
+        listNavigation: {
+          focusItemOnOpen: !0,
+          nested: !0,
+          // even this is the root menu, we want to treat it as nested for flyouts to enable cross axis arrow keys navigation
+          rtl: e
+        },
+        children: [
+          /* @__PURE__ */ o(t.Trigger, { children: /* @__PURE__ */ o(
+            d,
+            {
+              className: u,
+              tabIndex: 0,
+              kind: "flyout",
+              ref: n,
+              tooltipPlacement: "right",
+              ...a,
+              children: i
+            }
+          ) }),
+          /* @__PURE__ */ o(t.PopoverContent, { dir: e ? "rtl" : "ltr", children: m })
+        ]
+      }
+    );
+  }
+);
+export {
+  M as Flyout,
+  L as SideNavActionListItemFlyout
+};

package/lib/SideNav/SideNavActionListItemLabel.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=t=>e.jsx(e.Fragment,{children:t.children});exports.SideNavActionListItemLabel=i;

package/lib/SideNav/SideNavActionListItemLabel.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface SideNavActionListItemLabelProps {
+    /**
+     * The content of the SideNav.ActionList.Item.Label
+     */
+    children: React.ReactNode;
+}
+export declare const SideNavActionListItemLabel: (props: SideNavActionListItemLabelProps) => import("react/jsx-runtime").JSX.Element;

package/lib/SideNav/SideNavActionListItemLabel.es.js

@@ -0,0 +1,5 @@
+import { jsx as t, Fragment as i } from "react/jsx-runtime";
+const n = (e) => /* @__PURE__ */ t(i, { children: e.children });
+export {
+  n as SideNavActionListItemLabel
+};

package/lib/SideNav/SideNavBody.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),s=require("react"),y=require("clsx"),a=require("../../chunks/sideNav.module.B3wMOMTH.js"),x=require("../../chunks/classNames.DAeKwerT.js"),v=require("../../chunks/constants.hwjHOsvT.js"),S=require("../../chunks/helpers.COm6C5Gf.js"),{baseClassNamePrefix:F,subElementClassPrefix:q,classModifierPrefix:M}=x.getBEMClassNames("side-nav__body");function N(o){const[d,n]=s.useState(!1),[b,m]=s.useState(!1),c=s.useRef(0),i=s.useRef(0),u=s.useCallback(()=>{if(!o.current)return;const{scrollTop:e,scrollHeight:t,clientHeight:l}=o.current;n(e>0),m(e<t-l-1)},[o]),r=s.useMemo(()=>S.debounce(u,v.FPS_30),[u]),f=s.useCallback(e=>{if(!e.length)return;const{height:t}=e[0].contentRect;t!==c.current&&(c.current=t,r())},[r]),p=s.useMemo(()=>S.debounce(f,v.FPS_30),[f]),g=s.useCallback(e=>{var l;if(!e.length)return;const t=(l=o.current)==null?void 0:l.scrollHeight;t&&t!==i.current&&(i.current=t,r())},[r,o]),H=s.useMemo(()=>S.debounce(g,v.FPS_30),[g]);return s.useEffect(()=>{const e=o.current;if(!e)return;c.current=e.clientHeight,r(),e.addEventListener("scroll",r);const t=new ResizeObserver(p);t.observe(e);const l=new MutationObserver(H);return l.observe(e,{subtree:!0,attributeFilter:["class"]}),()=>{e.removeEventListener("scroll",r),t.disconnect(),l.disconnect()}},[o,r,p,H]),{top:d,bottom:b}}const P=({children:o,className:d,reflowNavigation:n,reflowNavigationAriaLabel:b,...m})=>{const c=s.useRef(null),{top:i,bottom:u}=N(c),r=y(a.styles[`${F}`],i&&a.styles[`${M}scrolled-top`],u&&a.styles[`${M}scrolled-bottom`],d);return h.jsxs("div",{className:r,ref:c,role:"group",...m,children:[n&&h.jsx("div",{className:y(a.styles[`${q}nav-container`]),children:s.cloneElement(n,{orientation:"vertical","aria-label":b||n.props["aria-label"]})}),h.jsx("div",{children:o})]})};exports.SideNavBody=P;

package/lib/SideNav/SideNavBody.d.ts

@@ -0,0 +1,20 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+import { NavigationProps } from '../_Navigation';
+interface SideNavBodyProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The content of the SideNav.Body
+     * @default null
+     */
+    children: React.ReactNode;
+    /**
+     * Utility prop that reflows Header navigation items to SideNavBody when viewing on smaller viewports
+     * @default null
+     */
+    reflowNavigation?: React.ReactElement<NavigationProps> | null;
+    /**
+     * Specify aria-label for the reflowed navigation items
+     */
+    reflowNavigationAriaLabel?: string;
+}
+export declare const SideNavBody: ({ children, className: _className, reflowNavigation, reflowNavigationAriaLabel, ...restProps }: SideNavBodyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/SideNav/SideNavBody.es.js

@@ -0,0 +1,83 @@
+import { jsxs as B, jsx as x } from "react/jsx-runtime";
+import F, { useState as E, useRef as M, useCallback as b, useMemo as f, useEffect as C } from "react";
+import _ from "clsx";
+import { s as a } from "../../chunks/sideNav.module.DBN2ryFs.js";
+import { g as N } from "../../chunks/classNames.DNsS4J__.js";
+import { F as p } from "../../chunks/constants.BBi77pmH.js";
+import { d as h } from "../../chunks/helpers.Wv7n4ip7.js";
+const { baseClassNamePrefix: O, subElementClassPrefix: P, classModifierPrefix: z } = N("side-nav__body");
+function R(s) {
+  const [u, n] = E(!1), [m, d] = E(!1), l = M(0), c = M(0), i = b(() => {
+    if (!s.current) return;
+    const { scrollTop: e, scrollHeight: t, clientHeight: o } = s.current;
+    n(e > 0), d(e < t - o - 1);
+  }, [s]), r = f(
+    () => h(i, p),
+    [i]
+  ), v = b(
+    (e) => {
+      if (!e.length) return;
+      const { height: t } = e[0].contentRect;
+      t !== l.current && (l.current = t, r());
+    },
+    [r]
+  ), H = f(
+    () => h(v, p),
+    [v]
+  ), g = b(
+    (e) => {
+      var o;
+      if (!e.length) return;
+      const t = (o = s.current) == null ? void 0 : o.scrollHeight;
+      t && t !== c.current && (c.current = t, r());
+    },
+    [r, s]
+  ), S = f(
+    () => h(g, p),
+    [g]
+  );
+  return C(() => {
+    const e = s.current;
+    if (!e) return;
+    l.current = e.clientHeight, r(), e.addEventListener("scroll", r);
+    const t = new ResizeObserver(H);
+    t.observe(e);
+    const o = new MutationObserver(S);
+    return o.observe(e, {
+      subtree: !0,
+      attributeFilter: ["class"]
+    }), () => {
+      e.removeEventListener("scroll", r), t.disconnect(), o.disconnect();
+    };
+  }, [s, r, H, S]), {
+    top: u,
+    bottom: m
+  };
+}
+const q = ({
+  children: s,
+  className: u,
+  reflowNavigation: n,
+  reflowNavigationAriaLabel: m,
+  ...d
+}) => {
+  const l = F.useRef(null), { top: c, bottom: i } = R(l), r = _(
+    a[`${O}`],
+    c && a[`${z}scrolled-top`],
+    i && a[`${z}scrolled-bottom`],
+    u
+  );
+  return /* @__PURE__ */ B("div", { className: r, ref: l, role: "group", ...d, children: [
+    n && /* @__PURE__ */ x("div", { className: _(a[`${P}nav-container`]), children: F.cloneElement(
+      n,
+      {
+        orientation: "vertical",
+        "aria-label": m || n.props["aria-label"]
+      }
+    ) }),
+    /* @__PURE__ */ x("div", { children: s })
+  ] });
+};
+export {
+  q as SideNavBody
+};

package/lib/SideNav/SideNavContext.cjs.js

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),e=require("react"),C=require("../../chunks/constants.hwjHOsvT.js"),I=require("../../chunks/helpers.COm6C5Gf.js"),g=require("../../utils/hooks/index.cjs.js"),w="mobile",m="provided",R=e.createContext(void 0),E=({children:d,sideNavConfig:{withMobile:a,defaultOpen:r}={}})=>{const n=a??!0,i=r??!1,[t,o]=e.useState(!1),[l,s]=e.useState(i),[u,x]=e.useState(!1),[h,T]=e.useState(null),p=e.useRef(null),N=g.useRTLDirection(p);e.useEffect(()=>{if(typeof window>"u")return;if(!n){t&&o(!1);return}const v=c=>{!t&&c&&s(!1),t&&!c&&s(i),o(c)},f=I.debounce(c=>{v(c.matches)},C.FPS_30),S=window.matchMedia("screen and (max-width: 1199px)");return S.addEventListener("change",f),f(S),()=>S.removeEventListener("change",f)},[i,t,o,n]);const b=e.useMemo(()=>({withMobile:n,isMobile:t,isSideNavOpen:l,setIsSideNavOpen:s,toggleSideNav:()=>{u||x(!0),requestAnimationFrame(()=>s(v=>!v))},navigation:h,setNavigation:T,triggerType:t?w:m,interactedWith:u,isRTL:N,rootRef:p}),[l,h,t,n,u,N]);return O.jsx(R.Provider,{value:b,children:d})},L=()=>{const[d,a]=e.useState(!1),[r,n]=e.useState(!1);let i=e.useContext(R);const t=e.useRef(null),o=g.useRTLDirection(t),l=e.useMemo(()=>({withMobile:!1,isMobile:!1,isSideNavOpen:d,setIsSideNavOpen:a,toggleSideNav:()=>{r||n(!0),requestAnimationFrame(()=>a(s=>!s))},navigation:null,setNavigation:()=>null,triggerType:m,interactedWith:r,isRTL:o,rootRef:t}),[d,a,r,o]);return i||(console.log(`If useSideNavContext is called outside of SideNavProvider the components that use it will have only UI functionalities. 
+      The SideNavContext provides support for displaying the navigation on mobile devices in the SideNav,
+       and the ability to control the open/closed state from outside of the SideNav component.`),i=l),i};exports.SideNavProvider=E;exports.useSideNavContext=L;

package/lib/SideNav/SideNavContext.d.ts

@@ -0,0 +1,29 @@
+import { default as React, Dispatch, SetStateAction } from 'react';
+import { NavigationProps } from '../_Navigation';
+type MobileTriggerType = 'mobile';
+type ProvidedTriggerType = 'provided';
+declare const MOBILE_TRIGGER_TYPE: MobileTriggerType;
+declare const PROVIDED_TRIGGER_TYPE: ProvidedTriggerType;
+export interface SideNavContextValue {
+    withMobile: boolean;
+    isMobile: boolean;
+    isSideNavOpen: boolean;
+    setIsSideNavOpen: Dispatch<SetStateAction<boolean>>;
+    toggleSideNav: () => void;
+    navigation: React.ReactElement<NavigationProps> | null;
+    setNavigation: Dispatch<SetStateAction<React.ReactElement<NavigationProps> | null>>;
+    triggerType: typeof MOBILE_TRIGGER_TYPE | typeof PROVIDED_TRIGGER_TYPE;
+    interactedWith: boolean;
+    isRTL: boolean;
+    rootRef: React.RefObject<HTMLDivElement>;
+}
+export interface SideNavConfig {
+    withMobile?: boolean;
+    defaultOpen?: boolean;
+}
+export declare const SideNavProvider: React.FC<{
+    children: React.ReactNode;
+    sideNavConfig?: SideNavConfig;
+}>;
+export declare const useSideNavContext: () => SideNavContextValue;
+export {};