@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/navigation/breadcrumbs/breadcrumbs.js

@@ -1,30 +1,33 @@
-import { jsx as r, jsxs as j } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/breadcrumbs/breadcrumbs.entry.css';/* empty css                                                                 */
-import { forwardRef as v, useState as y, Children as S, isValidElement as k, Fragment as B } from "react";
-import C from "clsx";
-const z = v(function({
-  className: m,
-  separator: b = "/",
-  maxItems: i = 8,
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/breadcrumbs/breadcrumbs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                 */
+import { forwardRef as S, useState as k, Children as B, isValidElement as C, Fragment as F } from "react";
+import I from "clsx";
+const E = S(function({
+  className: b,
+  separator: o = "/",
+  maxItems: u = 8,
   itemsBeforeCollapse: s = 1,
   itemsAfterCollapse: t = 1,
   expanded: l,
   onExpand: a,
-  expandLabel: o = "Show path",
-  children: u,
-  ...h
-}, p) {
-  const c = l !== void 0, [f, w] = y(!1), _ = c ? !!l : f, e = S.toArray(u).filter(k), g = !_ && e.length > i && s + t < e.length, N = () => {
-    a == null || a(), c || w(!0);
-  }, n = g ? [
+  expandLabel: h = "Show path",
+  children: f,
+  "data-testid": p = "breadcrumbs",
+  ...c
+}, w) {
+  var m;
+  const d = l !== void 0, [_, g] = k(!1), N = d ? !!l : _, e = B.toArray(f).filter(C), x = !N && e.length > u && s + t < e.length, j = () => {
+    a == null || a(), d || g(!0);
+  }, n = x ? [
     ...e.slice(0, s),
     /* @__PURE__ */ r(
       "button",
       {
         type: "button",
         className: "smwb-breadcrumbs__expand",
-        "aria-label": o,
-        onClick: N,
+        "aria-label": h,
+        onClick: j,
         children: "…"
       },
       "smwb-breadcrumbs-expand"
@@ -34,20 +37,20 @@ const z = v(function({
   return /* @__PURE__ */ r(
     "nav",
     {
-      ...h,
-      ref: p,
-      "data-testid": "breadcrumbs",
-      "aria-label": "breadcrumb",
-      className: C("smwb-breadcrumbs", m),
-      children: /* @__PURE__ */ r("ol", { className: "smwb-breadcrumbs__list", children: n.map((x, d) => /* @__PURE__ */ j(B, { children: [
-        /* @__PURE__ */ r("li", { className: "smwb-breadcrumbs__item", children: x }),
-        d < n.length - 1 ? /* @__PURE__ */ r("li", { className: "smwb-breadcrumbs__separator", "aria-hidden": "true", children: b }) : null
-      ] }, d)) })
+      ...c,
+      ref: w,
+      "data-testid": p,
+      "aria-label": (m = c["aria-label"]) != null ? m : "breadcrumb",
+      className: I("smwb-breadcrumbs", b),
+      children: /* @__PURE__ */ r("ol", { className: "smwb-breadcrumbs__list", children: n.map((v, i) => /* @__PURE__ */ y(F, { children: [
+        /* @__PURE__ */ r("li", { className: "smwb-breadcrumbs__item", children: v }),
+        i < n.length - 1 ? /* @__PURE__ */ r("li", { className: "smwb-breadcrumbs__separator", "aria-hidden": "true", children: o }) : null
+      ] }, i)) })
     }
   );
 });
 export {
-  z as Breadcrumbs,
-  z as default
+  E as Breadcrumbs,
+  E as default
 };
 //# sourceMappingURL=breadcrumbs.js.map

package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Node placed between every crumb. */\n  separator?: ReactNode;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n}\n\nexport const Breadcrumbs = forwardRef<HTMLElement, PropsWithChildren<BreadcrumbsProps>>(function Breadcrumbs(\n  {\n    className,\n    separator = \"/\",\n    maxItems = 8,\n    itemsBeforeCollapse = 1,\n    itemsAfterCollapse = 1,\n    expanded: expandedProp,\n    onExpand,\n    expandLabel = \"Show path\",\n    children,\n    ...props\n  },\n  ref\n) {\n  const isControlled = expandedProp !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(false);\n  const expanded = isControlled ? !!expandedProp : internalExpanded;\n  const crumbs = Children.toArray(children).filter(isValidElement);\n\n  const collapsed = !expanded && crumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse < crumbs.length;\n\n  const handleExpand = () => {\n    onExpand?.();\n    if (!isControlled) {\n      setInternalExpanded(true);\n    }\n  };\n\n  const rendered: ReactNode[] = collapsed\n    ? [\n        ...crumbs.slice(0, itemsBeforeCollapse),\n        <button\n          key=\"smwb-breadcrumbs-expand\"\n          type=\"button\"\n          className=\"smwb-breadcrumbs__expand\"\n          aria-label={expandLabel}\n          onClick={handleExpand}\n        >\n          …\n        </button>,\n        ...crumbs.slice(crumbs.length - itemsAfterCollapse),\n      ]\n    : crumbs;\n\n  return (\n    <nav\n      {...props}\n      ref={ref}\n      data-testid=\"breadcrumbs\"\n      aria-label=\"breadcrumb\"\n      className={cn(\"smwb-breadcrumbs\", className)}\n    >\n      <ol className=\"smwb-breadcrumbs__list\">\n        {rendered.map((crumb, index) => (\n          <Fragment key={index}>\n            <li className=\"smwb-breadcrumbs__item\">{crumb}</li>\n            {index < rendered.length - 1 ? (\n              <li className=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                {separator}\n              </li>\n            ) : null}\n          </Fragment>\n        ))}\n      </ol>\n    </nav>\n  );\n});\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","forwardRef","className","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","expandedProp","onExpand","expandLabel","children","props","ref","isControlled","internalExpanded","setInternalExpanded","useState","expanded","crumbs","Children","isValidElement","collapsed","handleExpand","rendered","jsx","cn","crumb","index","jsxs","Fragment"],"mappings":";;;;AA+BO,MAAMA,IAAcC,EAA6D,SACtF;AAAA,EACE,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,qBAAAC,IAAsB;AAAA,EACtB,oBAAAC,IAAqB;AAAA,EACrB,UAAUC;AAAA,EACV,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAeN,MAAiB,QAChC,CAACO,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxDC,IAAWJ,IAAe,CAAC,CAACN,IAAeO,GAC3CI,IAASC,EAAS,QAAQT,CAAQ,EAAE,OAAOU,CAAc,GAEzDC,IAAY,CAACJ,KAAYC,EAAO,SAASd,KAAYC,IAAsBC,IAAqBY,EAAO,QAEvGI,IAAe,MAAM;AACzB,IAAAd,KAAA,QAAAA,KACKK,KACHE,EAAoB,EAAI;AAAA,EAE5B,GAEMQ,IAAwBF,IAC1B;AAAA,IACE,GAAGH,EAAO,MAAM,GAAGb,CAAmB;AAAA,IACtC,gBAAAmB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAYf;AAAA,QACZ,SAASa;AAAA,QACV,UAAA;AAAA,MAAA;AAAA,MALK;AAAA,IAAA;AAAA,IAQN,GAAGJ,EAAO,MAAMA,EAAO,SAASZ,CAAkB;AAAA,EAAA,IAEpDY;AAEJ,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGb;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,WAAWa,EAAG,oBAAoBvB,CAAS;AAAA,MAE3C,UAAA,gBAAAsB,EAAC,MAAA,EAAG,WAAU,0BACX,UAAAD,EAAS,IAAI,CAACG,GAAOC,MACpB,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAE,GAAM;AAAA,QAC7CC,IAAQJ,EAAS,SAAS,IACzB,gBAAAC,EAAC,MAAA,EAAG,WAAU,+BAA8B,eAAY,QACrD,UAAArB,EAAA,CACH,IACE;AAAA,MAAA,EAAA,GANSwB,CAOf,CACD,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Node placed between every crumb. */\n  separator?: ReactNode;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  /** Test id of the root `<nav>`; `breadcrumbs` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Breadcrumbs = forwardRef<HTMLElement, PropsWithChildren<BreadcrumbsProps>>(function Breadcrumbs(\n  {\n    className,\n    separator = \"/\",\n    maxItems = 8,\n    itemsBeforeCollapse = 1,\n    itemsAfterCollapse = 1,\n    expanded: expandedProp,\n    onExpand,\n    expandLabel = \"Show path\",\n    children,\n    \"data-testid\": dataTestId = \"breadcrumbs\",\n    ...props\n  },\n  ref\n) {\n  const isControlled = expandedProp !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(false);\n  const expanded = isControlled ? !!expandedProp : internalExpanded;\n  const crumbs = Children.toArray(children).filter(isValidElement);\n\n  const collapsed = !expanded && crumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse < crumbs.length;\n\n  const handleExpand = () => {\n    onExpand?.();\n    if (!isControlled) {\n      setInternalExpanded(true);\n    }\n  };\n\n  const rendered: ReactNode[] = collapsed\n    ? [\n        ...crumbs.slice(0, itemsBeforeCollapse),\n        <button\n          key=\"smwb-breadcrumbs-expand\"\n          type=\"button\"\n          className=\"smwb-breadcrumbs__expand\"\n          aria-label={expandLabel}\n          onClick={handleExpand}\n        >\n          …\n        </button>,\n        ...crumbs.slice(crumbs.length - itemsAfterCollapse),\n      ]\n    : crumbs;\n\n  return (\n    <nav\n      {...props}\n      ref={ref}\n      data-testid={dataTestId}\n      // A default the caller's own replaces, to name it in their language; an\n      // explicit undefined keeps it.\n      aria-label={props[\"aria-label\"] ?? \"breadcrumb\"}\n      className={cn(\"smwb-breadcrumbs\", className)}\n    >\n      <ol className=\"smwb-breadcrumbs__list\">\n        {rendered.map((crumb, index) => (\n          <Fragment key={index}>\n            <li className=\"smwb-breadcrumbs__item\">{crumb}</li>\n            {index < rendered.length - 1 ? (\n              <li className=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                {separator}\n              </li>\n            ) : null}\n          </Fragment>\n        ))}\n      </ol>\n    </nav>\n  );\n});\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","forwardRef","className","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","expandedProp","onExpand","expandLabel","children","dataTestId","props","ref","isControlled","internalExpanded","setInternalExpanded","useState","expanded","crumbs","Children","isValidElement","collapsed","handleExpand","rendered","jsx","_a","cn","crumb","index","jsxs","Fragment"],"mappings":";;;;;AAkCO,MAAMA,IAAcC,EAA6D,SACtF;AAAA,EACE,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,qBAAAC,IAAsB;AAAA,EACtB,oBAAAC,IAAqB;AAAA,EACrB,UAAUC;AAAA,EACV,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAeP,MAAiB,QAChC,CAACQ,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxDC,IAAWJ,IAAe,CAAC,CAACP,IAAeQ,GAC3CI,IAASC,EAAS,QAAQV,CAAQ,EAAE,OAAOW,CAAc,GAEzDC,IAAY,CAACJ,KAAYC,EAAO,SAASf,KAAYC,IAAsBC,IAAqBa,EAAO,QAEvGI,IAAe,MAAM;AACzB,IAAAf,KAAA,QAAAA,KACKM,KACHE,EAAoB,EAAI;AAAA,EAE5B,GAEMQ,IAAwBF,IAC1B;AAAA,IACE,GAAGH,EAAO,MAAM,GAAGd,CAAmB;AAAA,IACtC,gBAAAoB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAYhB;AAAA,QACZ,SAASc;AAAA,QACV,UAAA;AAAA,MAAA;AAAA,MALK;AAAA,IAAA;AAAA,IAQN,GAAGJ,EAAO,MAAMA,EAAO,SAASb,CAAkB;AAAA,EAAA,IAEpDa;AAEJ,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGb;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MAGb,eAAYe,IAAAd,EAAM,YAAY,MAAlB,OAAAc,IAAuB;AAAA,MACnC,WAAWC,EAAG,oBAAoBzB,CAAS;AAAA,MAE3C,UAAA,gBAAAuB,EAAC,MAAA,EAAG,WAAU,0BACX,UAAAD,EAAS,IAAI,CAACI,GAAOC,MACpB,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAN,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAG,GAAM;AAAA,QAC7CC,IAAQL,EAAS,SAAS,IACzB,gBAAAC,EAAC,MAAA,EAAG,WAAU,+BAA8B,eAAY,QACrD,UAAAtB,EAAA,CACH,IACE;AAAA,MAAA,EAAA,GANS0B,CAOf,CACD,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/navigation/menu/menu.d.ts

@@ -3,8 +3,20 @@ import { MenuFloatingProps } from "./menuFloating";
 export type MenuProps = MenuFloatingProps & React.HTMLAttributes<HTMLElement> & {
     variant?: "static" | "floating";
     dense?: boolean;
+    /**
+     * Role of the list inside the menu, `menu` by default. A component that draws
+     * a list of its own on the menu's surface sets `presentation`: SelectField's
+     * options are a `listbox` inside it.
+     */
+    listRole?: React.AriaRole;
 };
 export declare const Menu: React.ForwardRefExoticComponent<MenuFloatingProps & React.HTMLAttributes<HTMLElement> & {
     variant?: "static" | "floating";
     dense?: boolean;
+    /**
+     * Role of the list inside the menu, `menu` by default. A component that draws
+     * a list of its own on the menu's surface sets `presentation`: SelectField's
+     * options are a `listbox` inside it.
+     */
+    listRole?: React.AriaRole;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/navigation/menu/menu.js

@@ -1,15 +1,16 @@
 import { jsx as e } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/menu/menu.entry.css';/* empty css                                                   */
+import '../../../assets/styles/less/components/menu/menu.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
 import s from "react";
 import { MenuContext as a } from "./menuContext.js";
-import { MenuComponent as u } from "./menuComponent.js";
-const v = s.forwardRef(function(n, r) {
+import { MenuComponent as p } from "./menuComponent.js";
+const x = s.forwardRef(function(n, r) {
   const { dense: t = !1, variant: i = "floating", onClose: o, ...m } = n, f = () => {
     o == null || o();
   };
-  return /* @__PURE__ */ e(a.Provider, { value: { dense: t, variant: i, onClose: f }, children: /* @__PURE__ */ e(u, { ref: r, onClose: o, ...m }) });
+  return /* @__PURE__ */ e(a.Provider, { value: { dense: t, variant: i, onClose: f }, children: /* @__PURE__ */ e(p, { ref: r, onClose: o, ...m }) });
 });
 export {
-  v as Menu
+  x as Menu
 };
 //# sourceMappingURL=menu.js.map

package/dist/components/navigation/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../../src/components/navigation/menu/menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuComponent } from \"./menuComponent\";\nimport { MenuFloatingProps } from \"./menuFloating\";\n\nexport type MenuProps = MenuFloatingProps &\n  React.HTMLAttributes<HTMLElement> & {\n    variant?: \"static\" | \"floating\";\n    dense?: boolean;\n  };\n\nexport const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(props, ref) {\n  const { dense = false, variant = \"floating\", onClose: onCloseProp, ...rest } = props;\n\n  const onClose = () => {\n    onCloseProp?.();\n  };\n\n  return (\n    <MenuContext.Provider value={{ dense, variant, onClose }}>\n      <MenuComponent ref={ref} onClose={onCloseProp} {...rest} />\n    </MenuContext.Provider>\n  );\n});\n"],"names":["Menu","React","props","ref","dense","variant","onCloseProp","rest","onClose","MenuContext","MenuComponent"],"mappings":";;;;;AAYO,MAAMA,IAAOC,EAAM,WAAsC,SAAcC,GAAOC,GAAK;AACxF,QAAM,EAAE,OAAAC,IAAQ,IAAO,SAAAC,IAAU,YAAY,SAASC,GAAa,GAAGC,EAAA,IAASL,GAEzEM,IAAU,MAAM;AACpB,IAAAF,KAAA,QAAAA;AAAA,EACF;AAEA,2BACGG,EAAY,UAAZ,EAAqB,OAAO,EAAE,OAAAL,GAAO,SAAAC,GAAS,SAAAG,EAAA,GAC7C,4BAACE,GAAA,EAAc,KAAAP,GAAU,SAASG,GAAc,GAAGC,GAAM,GAC3D;AAEJ,CAAC;"}
+{"version":3,"file":"menu.js","sources":["../../../../src/components/navigation/menu/menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuComponent } from \"./menuComponent\";\nimport { MenuFloatingProps } from \"./menuFloating\";\n\nexport type MenuProps = MenuFloatingProps &\n  React.HTMLAttributes<HTMLElement> & {\n    variant?: \"static\" | \"floating\";\n    dense?: boolean;\n    /**\n     * Role of the list inside the menu, `menu` by default. A component that draws\n     * a list of its own on the menu's surface sets `presentation`: SelectField's\n     * options are a `listbox` inside it.\n     */\n    listRole?: React.AriaRole;\n  };\n\nexport const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(props, ref) {\n  const { dense = false, variant = \"floating\", onClose: onCloseProp, ...rest } = props;\n\n  const onClose = () => {\n    onCloseProp?.();\n  };\n\n  return (\n    <MenuContext.Provider value={{ dense, variant, onClose }}>\n      <MenuComponent ref={ref} onClose={onCloseProp} {...rest} />\n    </MenuContext.Provider>\n  );\n});\n"],"names":["Menu","React","props","ref","dense","variant","onCloseProp","rest","onClose","MenuContext","MenuComponent"],"mappings":";;;;;;AAmBO,MAAMA,IAAOC,EAAM,WAAsC,SAAcC,GAAOC,GAAK;AACxF,QAAM,EAAE,OAAAC,IAAQ,IAAO,SAAAC,IAAU,YAAY,SAASC,GAAa,GAAGC,EAAA,IAASL,GAEzEM,IAAU,MAAM;AACpB,IAAAF,KAAA,QAAAA;AAAA,EACF;AAEA,2BACGG,EAAY,UAAZ,EAAqB,OAAO,EAAE,OAAAL,GAAO,SAAAC,GAAS,SAAAG,EAAA,GAC7C,4BAACE,GAAA,EAAc,KAAAP,GAAU,SAASG,GAAc,GAAGC,GAAM,GAC3D;AAEJ,CAAC;"}

package/dist/components/navigation/menu/menuContext.d.ts

@@ -3,6 +3,8 @@ export interface MenuContextValue {
     dense: boolean;
     variant: "static" | "floating";
     onClose: () => void;
+    /** A submenu's own list: ArrowLeft in it closes the submenu (onClose). */
+    submenu?: boolean;
 }
 export declare const MenuContext: React.Context<MenuContextValue>;
 export declare function useMenuContext(): MenuContextValue;

package/dist/components/navigation/menu/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuContext.js","sources":["../../../../src/components/navigation/menu/menuContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport interface MenuContextValue {\n  dense: boolean;\n  variant: \"static\" | \"floating\";\n  onClose: () => void;\n}\n\nexport const MenuContext = React.createContext<MenuContextValue>({\n  dense: false,\n  variant: \"floating\",\n  onClose: () => null,\n});\n\nexport function useMenuContext() {\n  return React.useContext(MenuContext);\n}\n"],"names":["MenuContext","React","useMenuContext"],"mappings":";AAQO,MAAMA,IAAcC,EAAM,cAAgC;AAAA,EAC/D,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AACjB,CAAC;AAEM,SAASC,IAAiB;AAC/B,SAAOD,EAAM,WAAWD,CAAW;AACrC;"}
+{"version":3,"file":"menuContext.js","sources":["../../../../src/components/navigation/menu/menuContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport interface MenuContextValue {\n  dense: boolean;\n  variant: \"static\" | \"floating\";\n  onClose: () => void;\n  /** A submenu's own list: ArrowLeft in it closes the submenu (onClose). */\n  submenu?: boolean;\n}\n\nexport const MenuContext = React.createContext<MenuContextValue>({\n  dense: false,\n  variant: \"floating\",\n  onClose: () => null,\n});\n\nexport function useMenuContext() {\n  return React.useContext(MenuContext);\n}\n"],"names":["MenuContext","React","useMenuContext"],"mappings":";AAUO,MAAMA,IAAcC,EAAM,cAAgC;AAAA,EAC/D,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AACjB,CAAC;AAEM,SAASC,IAAiB;AAC/B,SAAOD,EAAM,WAAWD,CAAW;AACrC;"}

package/dist/components/navigation/menu/menuFloating.js

@@ -1,50 +1,62 @@
 import { jsx as l } from "react/jsx-runtime";
-import s from "react";
-import { useFloating as x, autoUpdate as S } from "@floating-ui/react";
-import b from "react-transition-group/Transition";
-import { useForkRef as v } from "../../../hooks/useForkRef.js";
-import { resolvePlacement as A, buildFloatingMiddleware as B } from "../../../utils/floating.js";
-import { MenuList as C } from "./menuList.js";
-import { ClickAwayListener as L } from "../../clickAwayListener/clickAwayListener.js";
-function O(t, o) {
-  return B(t, o);
+import r from "react";
+import { useFloating as R, autoUpdate as x } from "@floating-ui/react";
+import A from "react-transition-group/Transition";
+import { useForkRef as L } from "../../../hooks/useForkRef.js";
+import { resolvePlacement as S, buildFloatingMiddleware as b } from "../../../utils/floating.js";
+import { MenuList as E } from "./menuList.js";
+import { ClickAwayListener as B } from "../../clickAwayListener/clickAwayListener.js";
+function C(s, a) {
+  return b(s, a);
 }
-const j = (t) => ({
-  transition: `opacity ${t}ms ease-in-out`,
+const D = (s) => ({
+  transition: `opacity ${s}ms ease-in-out`,
   opacity: 0
-}), E = {
+}), O = {
   entering: { opacity: 1 },
   entered: { opacity: 1 },
   exiting: { opacity: 0 }
-}, G = s.forwardRef(function(o, f) {
-  const { anchorElement: e, isOpen: i, onClose: n, placement: d = "bottom-start", middleware: p, style: y, ...g } = o, [a, w] = s.useState(null), u = s.useRef(null), m = A(d), { refs: M, floatingStyles: F } = x({
-    open: !!i,
-    placement: m.placement,
-    whileElementsMounted: S,
+}, G = r.forwardRef(function(a, d) {
+  const { anchorElement: e, isOpen: o, onClose: i, placement: m = "bottom-start", middleware: p, style: y, ...w } = a, [c, g] = r.useState(null), u = r.useRef(null), f = S(m), { refs: v, floatingStyles: M } = R({
+    open: !!o,
+    placement: f.placement,
+    whileElementsMounted: x,
     elements: { reference: e != null ? e : null },
-    middleware: O(m, p)
-  }), R = v(f, u, w, M.setFloating), k = (r) => {
-    if (!i || !n || !a)
+    middleware: C(f, p)
+  }), k = L(d, u, g, v.setFloating);
+  r.useEffect(() => {
+    if (!o || !i || !e)
       return;
-    const c = r.target;
-    a.contains(c) || e != null && e.contains(c) || n == null || n();
+    const t = (n) => {
+      n.key === "Escape" && !n.defaultPrevented && (n.preventDefault(), i());
+    };
+    return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
+  }, [o, i, e]), r.useEffect(() => {
+    var t, n;
+    !o && ((t = u.current) != null && t.contains(document.activeElement)) && ((n = e == null ? void 0 : e.focus) == null || n.call(e));
+  }, [o, e]);
+  const F = (t) => {
+    if (!o || !i || !c)
+      return;
+    const n = t.target;
+    c.contains(n) || e != null && e.contains(n) || i == null || i();
   };
-  return /* @__PURE__ */ l(b, { nodeRef: u, in: !!i, timeout: 150, unmountOnExit: !0, children: (r) => /* @__PURE__ */ l(L, { onClickAway: k, children: /* @__PURE__ */ l(
-    C,
+  return /* @__PURE__ */ l(A, { nodeRef: u, in: !!o, timeout: 150, unmountOnExit: !0, children: (t) => /* @__PURE__ */ l(B, { onClickAway: F, children: /* @__PURE__ */ l(
+    E,
     {
-      ref: R,
+      ref: k,
       style: {
-        ...F,
+        ...M,
         ...y,
-        ...j(150),
-        ...E[r]
+        ...D(150),
+        ...O[t]
       },
-      ...g
+      ...w
     }
   ) }) });
 });
 export {
   G as MenuFloating,
-  O as buildMenuFloatingMiddleware
+  C as buildMenuFloatingMiddleware
 };
 //# sourceMappingURL=menuFloating.js.map

package/dist/components/navigation/menu/menuFloating.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuFloating.js","sources":["../../../../src/components/navigation/menu/menuFloating.tsx"],"sourcesContent":["import React from \"react\";\nimport { autoUpdate, Middleware, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement, type ResolvedPlacement } from \"../../../utils/floating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { MenuList } from \"./menuList\";\n\nexport function buildMenuFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[] {\n  return buildFloatingMiddleware(resolved, custom);\n}\n\nconst defaultStyle = (duration: number): React.CSSProperties => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, React.CSSProperties>;\n\nexport interface MenuFloatingProps extends React.HTMLAttributes<HTMLDivElement> {\n  anchorElement?: Element | null;\n  isOpen?: boolean;\n  onClose?: () => void;\n  placement?: Placement;\n  middleware?: Middleware[];\n}\n\nexport const MenuFloating = React.forwardRef<HTMLDivElement, MenuFloatingProps>(function MenuFloating(props, ref) {\n  const { anchorElement, isOpen, onClose, placement = \"bottom-start\", middleware, style, ...rest } = props;\n  const [menuElement, setMenuElement] = React.useState<HTMLElement | null>(null);\n  const nodeRef = React.useRef<HTMLElement>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: Boolean(isOpen),\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    elements: { reference: anchorElement ?? null },\n    middleware: buildMenuFloatingMiddleware(resolved, middleware),\n  });\n\n  const menuRef = useForkRef(ref, nodeRef, setMenuElement, refs.setFloating);\n\n  const onAwayClick = (event: MouseEvent | TouchEvent) => {\n    if (!isOpen || !onClose || !menuElement) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (menuElement.contains(target) || (anchorElement as HTMLElement | null)?.contains(target)) {\n      return undefined;\n    }\n\n    onClose?.();\n  };\n\n  return (\n    <Transition nodeRef={nodeRef} in={Boolean(isOpen)} timeout={150} unmountOnExit>\n      {(state) => (\n        <ClickAwayListener onClickAway={onAwayClick}>\n          <MenuList\n            ref={menuRef}\n            style={{\n              ...floatingStyles,\n              ...style,\n              ...defaultStyle(150),\n              ...transitionStyles[state],\n            }}\n            {...rest}\n          />\n        </ClickAwayListener>\n      )}\n    </Transition>\n  );\n});\n"],"names":["buildMenuFloatingMiddleware","resolved","custom","buildFloatingMiddleware","defaultStyle","duration","transitionStyles","MenuFloating","React","props","ref","anchorElement","isOpen","onClose","placement","middleware","style","rest","menuElement","setMenuElement","nodeRef","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","menuRef","useForkRef","onAwayClick","event","target","Transition","state","jsx","ClickAwayListener","MenuList"],"mappings":";;;;;;;;AAQO,SAASA,EAA4BC,GAA6BC,GAAqC;AAC5G,SAAOC,EAAwBF,GAAUC,CAAM;AACjD;AAEA,MAAME,IAAe,CAACC,OAA2C;AAAA,EAC/D,YAAY,WAAWA,CAAQ;AAAA,EAC/B,SAAS;AACX,IAEMC,IAAmB;AAAA,EACvB,UAAU,EAAE,SAAS,EAAA;AAAA,EACrB,SAAS,EAAE,SAAS,EAAA;AAAA,EACpB,SAAS,EAAE,SAAS,EAAA;AACtB,GAUaC,IAAeC,EAAM,WAA8C,SAAsBC,GAAOC,GAAK;AAChH,QAAM,EAAE,eAAAC,GAAe,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,IAAY,gBAAgB,YAAAC,GAAY,OAAAC,GAAO,GAAGC,EAAA,IAASR,GAC7F,CAACS,GAAaC,CAAc,IAAIX,EAAM,SAA6B,IAAI,GACvEY,IAAUZ,EAAM,OAAoB,IAAI,GAExCP,IAAWoB,EAAiBP,CAAS,GACrC,EAAE,MAAAQ,GAAM,gBAAAC,EAAA,IAAmBC,EAAY;AAAA,IAC3C,MAAM,EAAQZ;AAAA,IACd,WAAWX,EAAS;AAAA,IACpB,sBAAsBwB;AAAA,IACtB,UAAU,EAAE,WAAWd,KAAA,OAAAA,IAAiB,KAAA;AAAA,IACxC,YAAYX,EAA4BC,GAAUc,CAAU;AAAA,EAAA,CAC7D,GAEKW,IAAUC,EAAWjB,GAAKU,GAASD,GAAgBG,EAAK,WAAW,GAEnEM,IAAc,CAACC,MAAmC;AACtD,QAAI,CAACjB,KAAU,CAACC,KAAW,CAACK;AAC1B;AAGF,UAAMY,IAASD,EAAM;AAErB,IAAIX,EAAY,SAASY,CAAM,KAAMnB,KAAA,QAAAA,EAAsC,SAASmB,MAIpFjB,KAAA,QAAAA;AAAA,EACF;AAEA,2BACGkB,GAAA,EAAW,SAAAX,GAAkB,IAAI,EAAQR,GAAS,SAAS,KAAK,eAAa,IAC3E,UAAA,CAACoB,MACA,gBAAAC,EAACC,GAAA,EAAkB,aAAaN,GAC9B,UAAA,gBAAAK;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,KAAKT;AAAA,MACL,OAAO;AAAA,QACL,GAAGH;AAAA,QACH,GAAGP;AAAA,QACH,GAAGZ,EAAa,GAAG;AAAA,QACnB,GAAGE,EAAiB0B,CAAK;AAAA,MAAA;AAAA,MAE1B,GAAGf;AAAA,IAAA;AAAA,EAAA,GAER,EAAA,CAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"menuFloating.js","sources":["../../../../src/components/navigation/menu/menuFloating.tsx"],"sourcesContent":["import React from \"react\";\nimport { autoUpdate, Middleware, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement, type ResolvedPlacement } from \"../../../utils/floating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { MenuList } from \"./menuList\";\n\nexport function buildMenuFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[] {\n  return buildFloatingMiddleware(resolved, custom);\n}\n\nconst defaultStyle = (duration: number): React.CSSProperties => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, React.CSSProperties>;\n\nexport interface MenuFloatingProps extends React.HTMLAttributes<HTMLDivElement> {\n  anchorElement?: Element | null;\n  isOpen?: boolean;\n  onClose?: () => void;\n  placement?: Placement;\n  middleware?: Middleware[];\n}\n\nexport const MenuFloating = React.forwardRef<HTMLDivElement, MenuFloatingProps>(function MenuFloating(props, ref) {\n  const { anchorElement, isOpen, onClose, placement = \"bottom-start\", middleware, style, ...rest } = props;\n  const [menuElement, setMenuElement] = React.useState<HTMLElement | null>(null);\n  const nodeRef = React.useRef<HTMLElement>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: Boolean(isOpen),\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    elements: { reference: anchorElement ?? null },\n    middleware: buildMenuFloatingMiddleware(resolved, middleware),\n  });\n\n  const menuRef = useForkRef(ref, nodeRef, setMenuElement, refs.setFloating);\n\n  // While the menu is open, Escape on its anchor (focus left on the button that opened\n  // it, or on a submenu's row) closes it, marked as handled like an Escape in the list.\n  React.useEffect(() => {\n    if (!isOpen || !onClose || !anchorElement) {\n      return undefined;\n    }\n    const onAnchorKeyDown = (event: Event) => {\n      if ((event as KeyboardEvent).key === \"Escape\" && !event.defaultPrevented) {\n        event.preventDefault();\n        onClose();\n      }\n    };\n    anchorElement.addEventListener(\"keydown\", onAnchorKeyDown);\n    return () => anchorElement.removeEventListener(\"keydown\", onAnchorKeyDown);\n  }, [isOpen, onClose, anchorElement]);\n\n  // A menu that closes while it holds focus (on Escape, on a chosen item) hands focus\n  // back to its anchor, the button or submenu row it opened from. Otherwise focus falls\n  // to <body> when the items unmount, out of a FloatingWindow or Modal around the menu,\n  // and the next Escape does not reach them.\n  React.useEffect(() => {\n    if (!isOpen && nodeRef.current?.contains(document.activeElement)) {\n      (anchorElement as HTMLElement | null | undefined)?.focus?.();\n    }\n  }, [isOpen, anchorElement]);\n\n  const onAwayClick = (event: MouseEvent | TouchEvent) => {\n    if (!isOpen || !onClose || !menuElement) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (menuElement.contains(target) || (anchorElement as HTMLElement | null)?.contains(target)) {\n      return undefined;\n    }\n\n    onClose?.();\n  };\n\n  return (\n    <Transition nodeRef={nodeRef} in={Boolean(isOpen)} timeout={150} unmountOnExit>\n      {(state) => (\n        <ClickAwayListener onClickAway={onAwayClick}>\n          <MenuList\n            ref={menuRef}\n            style={{\n              ...floatingStyles,\n              ...style,\n              ...defaultStyle(150),\n              ...transitionStyles[state],\n            }}\n            {...rest}\n          />\n        </ClickAwayListener>\n      )}\n    </Transition>\n  );\n});\n"],"names":["buildMenuFloatingMiddleware","resolved","custom","buildFloatingMiddleware","defaultStyle","duration","transitionStyles","MenuFloating","React","props","ref","anchorElement","isOpen","onClose","placement","middleware","style","rest","menuElement","setMenuElement","nodeRef","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","menuRef","useForkRef","onAnchorKeyDown","event","_a","_b","onAwayClick","target","Transition","state","jsx","ClickAwayListener","MenuList"],"mappings":";;;;;;;;AAQO,SAASA,EAA4BC,GAA6BC,GAAqC;AAC5G,SAAOC,EAAwBF,GAAUC,CAAM;AACjD;AAEA,MAAME,IAAe,CAACC,OAA2C;AAAA,EAC/D,YAAY,WAAWA,CAAQ;AAAA,EAC/B,SAAS;AACX,IAEMC,IAAmB;AAAA,EACvB,UAAU,EAAE,SAAS,EAAA;AAAA,EACrB,SAAS,EAAE,SAAS,EAAA;AAAA,EACpB,SAAS,EAAE,SAAS,EAAA;AACtB,GAUaC,IAAeC,EAAM,WAA8C,SAAsBC,GAAOC,GAAK;AAChH,QAAM,EAAE,eAAAC,GAAe,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,IAAY,gBAAgB,YAAAC,GAAY,OAAAC,GAAO,GAAGC,EAAA,IAASR,GAC7F,CAACS,GAAaC,CAAc,IAAIX,EAAM,SAA6B,IAAI,GACvEY,IAAUZ,EAAM,OAAoB,IAAI,GAExCP,IAAWoB,EAAiBP,CAAS,GACrC,EAAE,MAAAQ,GAAM,gBAAAC,EAAA,IAAmBC,EAAY;AAAA,IAC3C,MAAM,EAAQZ;AAAA,IACd,WAAWX,EAAS;AAAA,IACpB,sBAAsBwB;AAAA,IACtB,UAAU,EAAE,WAAWd,KAAA,OAAAA,IAAiB,KAAA;AAAA,IACxC,YAAYX,EAA4BC,GAAUc,CAAU;AAAA,EAAA,CAC7D,GAEKW,IAAUC,EAAWjB,GAAKU,GAASD,GAAgBG,EAAK,WAAW;AAIzE,EAAAd,EAAM,UAAU,MAAM;AACpB,QAAI,CAACI,KAAU,CAACC,KAAW,CAACF;AAC1B;AAEF,UAAMiB,IAAkB,CAACC,MAAiB;AACxC,MAAKA,EAAwB,QAAQ,YAAY,CAACA,EAAM,qBACtDA,EAAM,eAAA,GACNhB,EAAA;AAAA,IAEJ;AACA,WAAAF,EAAc,iBAAiB,WAAWiB,CAAe,GAClD,MAAMjB,EAAc,oBAAoB,WAAWiB,CAAe;AAAA,EAC3E,GAAG,CAAChB,GAAQC,GAASF,CAAa,CAAC,GAMnCH,EAAM,UAAU,MAAM;;AACpB,IAAI,CAACI,OAAUkB,IAAAV,EAAQ,YAAR,QAAAU,EAAiB,SAAS,SAAS,qBAC/CC,IAAApB,KAAA,gBAAAA,EAAkD,UAAlD,QAAAoB,EAAA,KAAApB;AAAA,EAEL,GAAG,CAACC,GAAQD,CAAa,CAAC;AAE1B,QAAMqB,IAAc,CAACH,MAAmC;AACtD,QAAI,CAACjB,KAAU,CAACC,KAAW,CAACK;AAC1B;AAGF,UAAMe,IAASJ,EAAM;AAErB,IAAIX,EAAY,SAASe,CAAM,KAAMtB,KAAA,QAAAA,EAAsC,SAASsB,MAIpFpB,KAAA,QAAAA;AAAA,EACF;AAEA,2BACGqB,GAAA,EAAW,SAAAd,GAAkB,IAAI,EAAQR,GAAS,SAAS,KAAK,eAAa,IAC3E,UAAA,CAACuB,MACA,gBAAAC,EAACC,GAAA,EAAkB,aAAaL,GAC9B,UAAA,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,OAAO;AAAA,QACL,GAAGH;AAAA,QACH,GAAGP;AAAA,QACH,GAAGZ,EAAa,GAAG;AAAA,QACnB,GAAGE,EAAiB6B,CAAK;AAAA,MAAA;AAAA,MAE1B,GAAGlB;AAAA,IAAA;AAAA,EAAA,GAER,EAAA,CAEJ;AAEJ,CAAC;"}

package/dist/components/navigation/menu/menuItem.d.ts

@@ -3,6 +3,10 @@ interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
     [key: string]: unknown;
 }
 export interface MenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    /**
+     * Greys the item out and marks it `aria-disabled`. It takes no focus, the arrow keys
+     * skip it, and neither a click nor Enter or Space chooses it.
+     */
     disabled?: boolean;
     selected?: boolean;
     href?: string;

package/dist/components/navigation/menu/menuItem.js

@@ -1,68 +1,80 @@
-import { jsxs as _, jsx as r } from "react/jsx-runtime";
-import c from "react";
-import D from "clsx";
-import { MenuContext as j } from "./menuContext.js";
-import { Ripple as g } from "../../base/ripple/ripple.js";
-const B = c.forwardRef(function(a, p) {
+import { jsxs as x, jsx as d } from "react/jsx-runtime";
+import f from "react";
+import j from "clsx";
+import { MenuContext as E } from "./menuContext.js";
+import { Ripple as K } from "../../base/ripple/ripple.js";
+const H = f.forwardRef(function(_, h) {
+  var R;
   const {
-    children: l,
-    className: b,
-    disabled: n,
-    selected: w,
-    onClick: t,
-    onMouseDown: s,
-    href: m,
-    linkElement: o,
-    linkProps: R,
-    value: x,
-    optionRenderer: u,
-    ...h
-  } = a, { dense: N } = c.useContext(j), f = c.useRef(null), I = (e) => {
-    if (n) {
-      m && e.preventDefault();
+    children: p,
+    className: g,
+    disabled: t,
+    selected: D,
+    onKeyDown: r,
+    onClick: i,
+    onMouseDown: m,
+    // The item sets this on its root too; its own handler calls the caller's first.
+    onPointerDown: o,
+    href: s,
+    linkElement: a,
+    linkProps: I,
+    value: c,
+    optionRenderer: b,
+    ...l
+  } = _, { dense: N } = f.useContext(E), w = f.useRef(null), C = (e) => {
+    if (t) {
+      s && e.preventDefault();
       return;
     }
-    t == null || t(e);
+    i == null || i(e);
   }, M = (e) => {
-    n || s == null || s(e);
-  }, v = (e) => {
-    var d;
-    (d = f.current) == null || d.onRipple(e);
+    if (r == null || r(e), !(e.defaultPrevented || t || e.target !== e.currentTarget) && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      const n = s ? e.currentTarget.firstElementChild : null;
+      (n != null ? n : e.currentTarget).click();
+    }
+  }, T = (e) => {
+    t || m == null || m(e);
+  }, k = (e) => {
+    var n;
+    o == null || o(e), (n = w.current) == null || n.onRipple(e);
   };
-  let i;
-  if (m) {
-    const e = o != null ? o : "a";
-    i = /* @__PURE__ */ _(e, { className: "smwb-menu__item-inner", href: m, ...R, children: [
-      l,
-      /* @__PURE__ */ r("span", { className: "smwb-menu__item__helper-text" })
+  let u;
+  if (s) {
+    const e = a != null ? a : "a";
+    u = /* @__PURE__ */ x(e, { className: "smwb-menu__item-inner", href: s, ...I, children: [
+      p,
+      /* @__PURE__ */ d("span", { className: "smwb-menu__item__helper-text" })
     ] });
   } else
-    i = /* @__PURE__ */ r("span", { className: "smwb-menu__item-inner", children: l });
-  const C = D("smwb-menu__item", b, {
+    u = /* @__PURE__ */ d("span", { className: "smwb-menu__item-inner", children: p });
+  const y = j("smwb-menu__item", g, {
     "smwb-menu__item--dense": N,
-    "smwb-menu__item--disabled": n,
-    "smwb-menu__item--selected": w
+    "smwb-menu__item--disabled": t,
+    "smwb-menu__item--selected": D
   });
-  return u ? u(a) : /* @__PURE__ */ _(
+  return b ? b(_) : /* @__PURE__ */ x(
     "li",
     {
+      ...l,
       role: "menuitem",
-      ref: p,
-      className: C,
-      tabIndex: n ? void 0 : 0,
-      onClick: I,
-      "data-value": x,
-      onMouseDown: M,
-      onPointerDown: v,
-      ...h,
+      ref: h,
+      "aria-disabled": t || void 0,
+      className: y,
+      tabIndex: (R = l.tabIndex) != null ? R : t ? void 0 : 0,
+      onClick: C,
+      "data-value": c != null ? c : l["data-value"],
+      onMouseDown: T,
+      onKeyDown: M,
+      onPointerDown: k,
       children: [
-        i,
-        /* @__PURE__ */ r(g, { actionRef: f })
+        u,
+        /* @__PURE__ */ d(K, { actionRef: w })
       ]
     }
   );
 });
 export {
-  B as MenuItem
+  H as MenuItem
 };
 //# sourceMappingURL=menuItem.js.map

package/dist/components/navigation/menu/menuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.js","sources":["../../../../src/components/navigation/menu/menuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { MenuContext } from \"./menuContext\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\ninterface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {\n  [key: string]: unknown;\n}\n\nexport interface MenuItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  disabled?: boolean;\n  selected?: boolean;\n  href?: string;\n  linkElement?: React.ElementType;\n  linkProps?: LinkProps;\n  value?: unknown;\n  optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>(function MenuItemInRef(props, ref) {\n  const {\n    children,\n    className,\n    disabled,\n    selected,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    href,\n    linkElement,\n    linkProps,\n    value,\n    optionRenderer,\n    ...rest\n  } = props;\n  const { dense } = React.useContext(MenuContext);\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onClick = (event: React.MouseEvent<HTMLLIElement>) => {\n    if (disabled) {\n      if (href) {\n        event.preventDefault();\n      }\n\n      return;\n    }\n\n    onClickProp?.(event);\n  };\n\n  const onMouseDown = (event: React.MouseEvent<HTMLLIElement>) => {\n    if (!disabled) {\n      onMouseDownProp?.(event);\n    }\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLLIElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  let content: React.ReactElement;\n\n  if (href) {\n    const Tag: React.ElementType = linkElement ?? \"a\";\n\n    content = (\n      <Tag className=\"smwb-menu__item-inner\" href={href} {...linkProps}>\n        {children}\n        <span className=\"smwb-menu__item__helper-text\"></span>\n      </Tag>\n    );\n  } else {\n    content = <span className=\"smwb-menu__item-inner\">{children}</span>;\n  }\n\n  const classes = cn(\"smwb-menu__item\", className, {\n    \"smwb-menu__item--dense\": dense,\n    \"smwb-menu__item--disabled\": disabled,\n    \"smwb-menu__item--selected\": selected,\n  });\n\n  return optionRenderer ? (\n    optionRenderer(props)\n  ) : (\n    <li\n      role=\"menuitem\"\n      ref={ref}\n      className={classes}\n      tabIndex={disabled ? undefined : 0}\n      onClick={onClick}\n      data-value={value}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {content}\n      <Ripple actionRef={rippleRef} />\n    </li>\n  );\n});\n"],"names":["MenuItem","React","props","ref","children","className","disabled","selected","onClickProp","onMouseDownProp","href","linkElement","linkProps","value","optionRenderer","rest","dense","MenuContext","rippleRef","onClick","event","onMouseDown","onPointerDown","_a","content","Tag","jsx","classes","cn","jsxs","Ripple"],"mappings":";;;;;AAoBO,MAAMA,IAAWC,EAAM,WAAyC,SAAuBC,GAAOC,GAAK;AACxG,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC;AAAA,IACT,aAAaC;AAAA,IACb,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GACE,EAAE,OAAAc,EAAA,IAAUf,EAAM,WAAWgB,CAAW,GACxCC,IAAYjB,EAAM,OAAyB,IAAI,GAE/CkB,IAAU,CAACC,MAA2C;AAC1D,QAAId,GAAU;AACZ,MAAII,KACFU,EAAM,eAAA;AAGR;AAAA,IACF;AAEA,IAAAZ,KAAA,QAAAA,EAAcY;AAAA,EAChB,GAEMC,IAAc,CAACD,MAA2C;AAC9D,IAAKd,KACHG,KAAA,QAAAA,EAAkBW;AAAA,EAEtB,GAGME,IAAgB,CAACF,MAA6C;;AAClE,KAAAG,IAAAL,EAAU,YAAV,QAAAK,EAAmB,SAASH;AAAA,EAC9B;AAEA,MAAII;AAEJ,MAAId,GAAM;AACR,UAAMe,IAAyBd,KAAA,OAAAA,IAAe;AAE9C,IAAAa,sBACGC,GAAA,EAAI,WAAU,yBAAwB,MAAAf,GAAa,GAAGE,GACpD,UAAA;AAAA,MAAAR;AAAA,MACD,gBAAAsB,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,IAAA,GACjD;AAAA,EAEJ;AACE,IAAAF,IAAU,gBAAAE,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAtB,GAAS;AAG9D,QAAMuB,IAAUC,EAAG,mBAAmBvB,GAAW;AAAA,IAC/C,0BAA0BW;AAAA,IAC1B,6BAA6BV;AAAA,IAC7B,6BAA6BC;AAAA,EAAA,CAC9B;AAED,SAAOO,IACLA,EAAeZ,CAAK,IAEpB,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAA1B;AAAA,MACA,WAAWwB;AAAA,MACX,UAAUrB,IAAW,SAAY;AAAA,MACjC,SAAAa;AAAA,MACA,cAAYN;AAAA,MACZ,aAAAQ;AAAA,MACA,eAAAC;AAAA,MACC,GAAGP;AAAA,MAEH,UAAA;AAAA,QAAAS;AAAA,QACD,gBAAAE,EAACI,GAAA,EAAO,WAAWZ,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC,CAAC;"}
+{"version":3,"file":"menuItem.js","sources":["../../../../src/components/navigation/menu/menuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { MenuContext } from \"./menuContext\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\ninterface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {\n  [key: string]: unknown;\n}\n\ntype DataAttributes = Record<`data-${string}`, unknown>;\n\nexport interface MenuItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  /**\n   * Greys the item out and marks it `aria-disabled`. It takes no focus, the arrow keys\n   * skip it, and neither a click nor Enter or Space chooses it.\n   */\n  disabled?: boolean;\n  selected?: boolean;\n  href?: string;\n  linkElement?: React.ElementType;\n  linkProps?: LinkProps;\n  value?: unknown;\n  optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>(function MenuItemInRef(props, ref) {\n  const {\n    children,\n    className,\n    disabled,\n    selected,\n    onKeyDown: onKeyDownProp,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    // The item sets this on its root too; its own handler calls the caller's first.\n    onPointerDown: onPointerDownProp,\n    href,\n    linkElement,\n    linkProps,\n    value,\n    optionRenderer,\n    ...rest\n  } = props;\n  const { dense } = React.useContext(MenuContext);\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onClick = (event: React.MouseEvent<HTMLLIElement>) => {\n    if (disabled) {\n      if (href) {\n        event.preventDefault();\n      }\n\n      return;\n    }\n\n    onClickProp?.(event);\n  };\n\n  // Enter or Space chooses the focused item, as it would press a button: through a click,\n  // so the item's onClick and whatever listens for its clicks (a submenu closing the menu)\n  // run as for a pointer. An item with a link clicks the link. A key pressed on something\n  // inside the item, such as the link itself, is that element's own.\n  const onKeyDown = (event: React.KeyboardEvent<HTMLLIElement>) => {\n    onKeyDownProp?.(event);\n\n    if (event.defaultPrevented || disabled || event.target !== event.currentTarget) {\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      // Handled: Space doesn't scroll, and Enter doesn't press the button that takes\n      // focus when the menu closes.\n      event.preventDefault();\n      const link = href ? event.currentTarget.firstElementChild : null;\n      ((link as HTMLElement | null) ?? event.currentTarget).click();\n    }\n  };\n\n  const onMouseDown = (event: React.MouseEvent<HTMLLIElement>) => {\n    if (!disabled) {\n      onMouseDownProp?.(event);\n    }\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLLIElement>) => {\n    onPointerDownProp?.(event);\n    rippleRef.current?.onRipple(event);\n  };\n\n  let content: React.ReactElement;\n\n  if (href) {\n    const Tag: React.ElementType = linkElement ?? \"a\";\n\n    content = (\n      <Tag className=\"smwb-menu__item-inner\" href={href} {...linkProps}>\n        {children}\n        <span className=\"smwb-menu__item__helper-text\"></span>\n      </Tag>\n    );\n  } else {\n    content = <span className=\"smwb-menu__item-inner\">{children}</span>;\n  }\n\n  const classes = cn(\"smwb-menu__item\", className, {\n    \"smwb-menu__item--dense\": dense,\n    \"smwb-menu__item--disabled\": disabled,\n    \"smwb-menu__item--selected\": selected,\n  });\n\n  return optionRenderer ? (\n    optionRenderer(props)\n  ) : (\n    <li\n      {...rest}\n      // A menu item's role wins over the caller's, and so does its data-value\n      // where it has a value. Its tabIndex is a default: the caller's wins.\n      role=\"menuitem\"\n      ref={ref}\n      aria-disabled={disabled || undefined}\n      className={classes}\n      tabIndex={rest.tabIndex ?? (disabled ? undefined : 0)}\n      onClick={onClick}\n      data-value={value ?? (rest as DataAttributes)[\"data-value\"]}\n      onMouseDown={onMouseDown}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n    >\n      {content}\n      <Ripple actionRef={rippleRef} />\n    </li>\n  );\n});\n"],"names":["MenuItem","React","props","ref","children","className","disabled","selected","onKeyDownProp","onClickProp","onMouseDownProp","onPointerDownProp","href","linkElement","linkProps","value","optionRenderer","rest","dense","MenuContext","rippleRef","onClick","event","onKeyDown","link","onMouseDown","onPointerDown","_a","content","Tag","jsx","classes","cn","jsxs","Ripple"],"mappings":";;;;;AA0BO,MAAMA,IAAWC,EAAM,WAAyC,SAAuBC,GAAOC,GAAK;;AACxG,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAWC;AAAA,IACX,SAASC;AAAA,IACT,aAAaC;AAAA;AAAA,IAEb,eAAeC;AAAA,IACf,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf,GACE,EAAE,OAAAgB,EAAA,IAAUjB,EAAM,WAAWkB,CAAW,GACxCC,IAAYnB,EAAM,OAAyB,IAAI,GAE/CoB,IAAU,CAACC,MAA2C;AAC1D,QAAIhB,GAAU;AACZ,MAAIM,KACFU,EAAM,eAAA;AAGR;AAAA,IACF;AAEA,IAAAb,KAAA,QAAAA,EAAca;AAAA,EAChB,GAMMC,IAAY,CAACD,MAA8C;AAG/D,QAFAd,KAAA,QAAAA,EAAgBc,IAEZ,EAAAA,EAAM,oBAAoBhB,KAAYgB,EAAM,WAAWA,EAAM,mBAI7DA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,MAAK;AAG9C,MAAAA,EAAM,eAAA;AACN,YAAME,IAAOZ,IAAOU,EAAM,cAAc,oBAAoB;AAC5D,OAAEE,KAAA,OAAAA,IAA+BF,EAAM,eAAe,MAAA;AAAA,IACxD;AAAA,EACF,GAEMG,IAAc,CAACH,MAA2C;AAC9D,IAAKhB,KACHI,KAAA,QAAAA,EAAkBY;AAAA,EAEtB,GAGMI,IAAgB,CAACJ,MAA6C;;AAClE,IAAAX,KAAA,QAAAA,EAAoBW,KACpBK,IAAAP,EAAU,YAAV,QAAAO,EAAmB,SAASL;AAAA,EAC9B;AAEA,MAAIM;AAEJ,MAAIhB,GAAM;AACR,UAAMiB,IAAyBhB,KAAA,OAAAA,IAAe;AAE9C,IAAAe,sBACGC,GAAA,EAAI,WAAU,yBAAwB,MAAAjB,GAAa,GAAGE,GACpD,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAA0B,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,IAAA,GACjD;AAAA,EAEJ;AACE,IAAAF,IAAU,gBAAAE,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA1B,GAAS;AAG9D,QAAM2B,IAAUC,EAAG,mBAAmB3B,GAAW;AAAA,IAC/C,0BAA0Ba;AAAA,IAC1B,6BAA6BZ;AAAA,IAC7B,6BAA6BC;AAAA,EAAA,CAC9B;AAED,SAAOS,IACLA,EAAed,CAAK,IAEpB,gBAAA+B;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MAGJ,MAAK;AAAA,MACL,KAAAd;AAAA,MACA,iBAAeG,KAAY;AAAA,MAC3B,WAAWyB;AAAA,MACX,WAAUJ,IAAAV,EAAK,aAAL,OAAAU,IAAkBrB,IAAW,SAAY;AAAA,MACnD,SAAAe;AAAA,MACA,cAAYN,KAAA,OAAAA,IAAUE,EAAwB,YAAY;AAAA,MAC1D,aAAAQ;AAAA,MACA,WAAAF;AAAA,MACA,eAAAG;AAAA,MAEC,UAAA;AAAA,QAAAE;AAAA,QACD,gBAAAE,EAACI,GAAA,EAAO,WAAWd,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC,CAAC;"}

package/dist/components/navigation/menu/menuList.d.ts

@@ -1,3 +1,7 @@
 import React from "react";
+/** The items the arrow keys move between; a disabled item is marked aria-disabled. */
+export declare const ENABLED_ITEM_SELECTOR = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])";
 export type MenuListProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const MenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuList: React.ForwardRefExoticComponent<MenuListProps & {
+    listRole?: React.AriaRole;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/navigation/menu/menuList.js

@@ -1,30 +1,41 @@
-import { jsx as m } from "react/jsx-runtime";
-import y from "react";
-import u from "clsx";
-import { useMenuContext as g } from "./menuContext.js";
-const _ = y.forwardRef(function(a, c) {
-  const { children: f, className: p, ...d } = a, { variant: t, onClose: w } = g(), h = (r) => {
-    var o, s, l, i;
-    const e = Array.from(
-      r.currentTarget.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+import { jsx as a } from "react/jsx-runtime";
+import k from "react";
+import c from "clsx";
+import { useMenuContext as A } from "./menuContext.js";
+const _ = '[role="menuitem"]:not([aria-disabled="true"])', C = k.forwardRef(function(d, p) {
+  const { children: w, className: y, ...D } = d, { variant: t, onClose: n, submenu: g } = A(), h = (e) => {
+    var i, u, f, m;
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "Escape") {
+      t === "floating" && e.preventDefault(), n();
+      return;
+    }
+    if (e.key === "ArrowLeft" && g) {
+      e.preventDefault(), n();
+      return;
+    }
+    const s = e.currentTarget, r = Array.from(s.querySelectorAll(_)).filter(
+      (b) => b.closest('[role="menu"]') === s
     );
-    if (e.length === 0)
+    if (r.length === 0)
       return;
-    const n = e.indexOf(document.activeElement);
-    r.key === "ArrowDown" ? (r.preventDefault(), (o = e[(n + 1 + e.length) % e.length]) == null || o.focus()) : r.key === "ArrowUp" ? (r.preventDefault(), (s = e[(n - 1 + e.length) % e.length]) == null || s.focus()) : r.key === "Home" ? (r.preventDefault(), (l = e[0]) == null || l.focus()) : r.key === "End" ? (r.preventDefault(), (i = e[e.length - 1]) == null || i.focus()) : r.key === "Escape" && w();
-  };
-  return /* @__PURE__ */ m("div", { ref: c, className: u("smwb-menu", p, `smwb-menu--${t}`), ...d, children: /* @__PURE__ */ m(
+    const l = r.indexOf(document.activeElement);
+    e.key === "ArrowDown" ? (e.preventDefault(), (i = r[(l + 1 + r.length) % r.length]) == null || i.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), (u = r[(l - 1 + r.length) % r.length]) == null || u.focus()) : e.key === "Home" ? (e.preventDefault(), (f = r[0]) == null || f.focus()) : e.key === "End" && (e.preventDefault(), (m = r[r.length - 1]) == null || m.focus());
+  }, { listRole: o = "menu", ...E } = D;
+  return /* @__PURE__ */ a("div", { ref: p, className: c("smwb-menu", y, `smwb-menu--${t}`), ...E, children: /* @__PURE__ */ a(
     "ul",
     {
-      className: u("smwb-menu__list", `smwb-menu__list--${t}`),
-      role: "menu",
-      "aria-orientation": "vertical",
+      className: c("smwb-menu__list", `smwb-menu__list--${t}`),
+      role: o,
+      "aria-orientation": o === "menu" ? "vertical" : void 0,
       onKeyDown: h,
-      children: f
+      children: w
     }
   ) });
 });
 export {
-  _ as MenuList
+  _ as ENABLED_ITEM_SELECTOR,
+  C as MenuList
 };
 //# sourceMappingURL=menuList.js.map

package/dist/components/navigation/menu/menuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuList.js","sources":["../../../../src/components/navigation/menu/menuList.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\n\nexport type MenuListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuList(props, ref) {\n  const { children, className, ...rest } = props;\n  const { variant, onClose } = useMenuContext();\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    const items = Array.from(\n      event.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n    );\n    if (items.length === 0) {\n      return;\n    }\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      items[(currentIndex + 1 + items.length) % items.length]?.focus();\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      items[(currentIndex - 1 + items.length) % items.length]?.focus();\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      items[0]?.focus();\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      items[items.length - 1]?.focus();\n    } else if (event.key === \"Escape\") {\n      onClose();\n    }\n  };\n\n  return (\n    <div ref={ref} className={cn(\"smwb-menu\", className, `smwb-menu--${variant}`)} {...rest}>\n      <ul\n        className={cn(\"smwb-menu__list\", `smwb-menu__list--${variant}`)}\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        onKeyDown={onKeyDown}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"names":["MenuList","React","props","ref","children","className","rest","variant","onClose","useMenuContext","onKeyDown","event","items","currentIndex","_a","_b","_c","_d","jsx","cn"],"mappings":";;;;AAMO,MAAMA,IAAWC,EAAM,WAA0C,SAAkBC,GAAOC,GAAK;AACpG,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,MAASJ,GACnC,EAAE,SAAAK,GAAS,SAAAC,EAAA,IAAYC,EAAA,GAEvBC,IAAY,CAACC,MAAiD;;AAClE,UAAMC,IAAQ,MAAM;AAAA,MAClBD,EAAM,cAAc,iBAA8B,+CAA+C;AAAA,IAAA;AAEnG,QAAIC,EAAM,WAAW;AACnB;AAEF,UAAMC,IAAeD,EAAM,QAAQ,SAAS,aAA4B;AAExE,IAAID,EAAM,QAAQ,eAChBA,EAAM,eAAA,IACNG,IAAAF,GAAOC,IAAe,IAAID,EAAM,UAAUA,EAAM,MAAM,MAAtD,QAAAE,EAAyD,WAChDH,EAAM,QAAQ,aACvBA,EAAM,eAAA,IACNI,IAAAH,GAAOC,IAAe,IAAID,EAAM,UAAUA,EAAM,MAAM,MAAtD,QAAAG,EAAyD,WAChDJ,EAAM,QAAQ,UACvBA,EAAM,eAAA,IACNK,IAAAJ,EAAM,CAAC,MAAP,QAAAI,EAAU,WACDL,EAAM,QAAQ,SACvBA,EAAM,eAAA,IACNM,IAAAL,EAAMA,EAAM,SAAS,CAAC,MAAtB,QAAAK,EAAyB,WAChBN,EAAM,QAAQ,YACvBH,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAAU,EAAC,OAAA,EAAI,KAAAf,GAAU,WAAWgB,EAAG,aAAad,GAAW,cAAcE,CAAO,EAAE,GAAI,GAAGD,GACjF,UAAA,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmB,oBAAoBZ,CAAO,EAAE;AAAA,MAC9D,MAAK;AAAA,MACL,oBAAiB;AAAA,MACjB,WAAAG;AAAA,MAEC,UAAAN;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;"}
+{"version":3,"file":"menuList.js","sources":["../../../../src/components/navigation/menu/menuList.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\n\n/** The items the arrow keys move between; a disabled item is marked aria-disabled. */\nexport const ENABLED_ITEM_SELECTOR = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\nexport type MenuListProps = React.HTMLAttributes<HTMLDivElement>;\n/** `listRole`: the role of the inner list, `menu` by default (see `MenuProps`). */\ntype MenuListOwnProps = MenuListProps & { listRole?: React.AriaRole };\n\nexport const MenuList = React.forwardRef<HTMLDivElement, MenuListOwnProps>(function MenuList(props, ref) {\n  const { children, className, ...rest } = props;\n  const { variant, onClose, submenu } = useMenuContext();\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    // Handled inside already, e.g. by a submenu's own list: not this list's key.\n    if (event.defaultPrevented) {\n      return;\n    }\n    if (event.key === \"Escape\") {\n      // A floating menu closes on it and marks it handled, so what is around the menu\n      // (a parent menu, FloatingWindow, fullscreen ExpansionPanel, Modal, Sheet) leaves\n      // this press alone. A static menu stays in place and lets it through.\n      if (variant === \"floating\") {\n        event.preventDefault();\n      }\n      onClose();\n      return;\n    }\n    if (event.key === \"ArrowLeft\" && submenu) {\n      // A submenu closes and gives focus back to its row (MenuFloating does that).\n      event.preventDefault();\n      onClose();\n      return;\n    }\n    // This list's own items: an open submenu drawn inside it keeps its items to itself.\n    const list = event.currentTarget;\n    const items = Array.from(list.querySelectorAll<HTMLElement>(ENABLED_ITEM_SELECTOR)).filter(\n      (item) => item.closest('[role=\"menu\"]') === list\n    );\n    if (items.length === 0) {\n      return;\n    }\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      items[(currentIndex + 1 + items.length) % items.length]?.focus();\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      items[(currentIndex - 1 + items.length) % items.length]?.focus();\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      items[0]?.focus();\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      items[items.length - 1]?.focus();\n    }\n  };\n\n  const { listRole = \"menu\", ...divProps } = rest;\n\n  return (\n    <div ref={ref} className={cn(\"smwb-menu\", className, `smwb-menu--${variant}`)} {...divProps}>\n      <ul\n        className={cn(\"smwb-menu__list\", `smwb-menu__list--${variant}`)}\n        role={listRole}\n        // ARIA allows an orientation on a menu, not on a presentation list.\n        aria-orientation={listRole === \"menu\" ? \"vertical\" : undefined}\n        onKeyDown={onKeyDown}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"names":["ENABLED_ITEM_SELECTOR","MenuList","React","props","ref","children","className","rest","variant","onClose","submenu","useMenuContext","onKeyDown","event","list","items","item","currentIndex","_a","_b","_c","_d","listRole","divProps","jsx","cn"],"mappings":";;;;AAKO,MAAMA,IAAwB,iDAMxBC,IAAWC,EAAM,WAA6C,SAAkBC,GAAOC,GAAK;AACvG,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,MAASJ,GACnC,EAAE,SAAAK,GAAS,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAA,GAEhCC,IAAY,CAACC,MAAiD;;AAElE,QAAIA,EAAM;AACR;AAEF,QAAIA,EAAM,QAAQ,UAAU;AAI1B,MAAIL,MAAY,cACdK,EAAM,eAAA,GAERJ,EAAA;AACA;AAAA,IACF;AACA,QAAII,EAAM,QAAQ,eAAeH,GAAS;AAExC,MAAAG,EAAM,eAAA,GACNJ,EAAA;AACA;AAAA,IACF;AAEA,UAAMK,IAAOD,EAAM,eACbE,IAAQ,MAAM,KAAKD,EAAK,iBAA8Bd,CAAqB,CAAC,EAAE;AAAA,MAClF,CAACgB,MAASA,EAAK,QAAQ,eAAe,MAAMF;AAAA,IAAA;AAE9C,QAAIC,EAAM,WAAW;AACnB;AAEF,UAAME,IAAeF,EAAM,QAAQ,SAAS,aAA4B;AAExE,IAAIF,EAAM,QAAQ,eAChBA,EAAM,eAAA,IACNK,IAAAH,GAAOE,IAAe,IAAIF,EAAM,UAAUA,EAAM,MAAM,MAAtD,QAAAG,EAAyD,WAChDL,EAAM,QAAQ,aACvBA,EAAM,eAAA,IACNM,IAAAJ,GAAOE,IAAe,IAAIF,EAAM,UAAUA,EAAM,MAAM,MAAtD,QAAAI,EAAyD,WAChDN,EAAM,QAAQ,UACvBA,EAAM,eAAA,IACNO,IAAAL,EAAM,CAAC,MAAP,QAAAK,EAAU,WACDP,EAAM,QAAQ,UACvBA,EAAM,eAAA,IACNQ,IAAAN,EAAMA,EAAM,SAAS,CAAC,MAAtB,QAAAM,EAAyB;AAAA,EAE7B,GAEM,EAAE,UAAAC,IAAW,QAAQ,GAAGC,MAAahB;AAE3C,SACE,gBAAAiB,EAAC,OAAA,EAAI,KAAApB,GAAU,WAAWqB,EAAG,aAAanB,GAAW,cAAcE,CAAO,EAAE,GAAI,GAAGe,GACjF,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmB,oBAAoBjB,CAAO,EAAE;AAAA,MAC9D,MAAMc;AAAA,MAEN,oBAAkBA,MAAa,SAAS,aAAa;AAAA,MACrD,WAAAV;AAAA,MAEC,UAAAP;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;"}