@smwb/ui-react 2.6.3 → 2.8.0

package/dist/headless/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/headless/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/headless/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/headless/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;"}

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

@@ -1,11 +1,19 @@
-import { jsxs as S, jsx as b } from "react/jsx-runtime";
+import { jsxs as j, jsx as I } from "react/jsx-runtime";
 import t from "react";
-import { offset as D } from "@floating-ui/react";
-import { MenuFloating as O } from "./menuFloating.js";
-import { useMenuContext as R, MenuContext as j } from "./menuContext.js";
-const H = t.forwardRef(function u(m, f) {
-  const { children: p, toggleElement: d, placement: g = "right-start", onClose: r, openOnHover: x, ...h } = m, [s, n] = t.useState(!1), [y, A] = t.useState(null), i = R(), E = [
-    D(({ placement: e }) => {
+import { offset as V } from "@floating-ui/react";
+import { MenuFloating as _ } from "./menuFloating.js";
+import { ENABLED_ITEM_SELECTOR as g } from "./menuList.js";
+import { useMenuContext as B, MenuContext as H } from "./menuContext.js";
+import { useForkRef as E } from "../../../hooks/useForkRef.js";
+const X = t.forwardRef(function y(R, k) {
+  var p;
+  const { children: A, toggleElement: r, placement: C = "right-start", onClose: i, openOnHover: h, ...M } = R, [c, s] = t.useState(!1), [w, S] = t.useState(null), [a, D] = t.useState(0), l = t.useRef(null), T = E(k, l);
+  t.useEffect(() => {
+    var e, n;
+    a > 0 && ((n = (e = l.current) == null ? void 0 : e.querySelector(g)) == null || n.focus());
+  }, [a]);
+  const m = B(), o = (p = r == null ? void 0 : r.props) != null ? p : {}, b = E(r == null ? void 0 : r.ref, S), O = [
+    V(({ placement: e }) => {
       switch (e) {
         case "right-start":
         case "left-start":
@@ -17,46 +25,51 @@ const H = t.forwardRef(function u(m, f) {
           return { crossAxis: 0, mainAxis: 0 };
       }
     })
-  ], k = (e) => {
-    e.button === 0 && n((o) => !o);
-  }, l = () => {
-    n(!1), r == null || r();
-  }, C = (e) => {
-    e.key === "ArrowRight" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), n(!0)) : (e.key === "ArrowLeft" || e.key === "Escape") && n(!1);
-  }, w = t.cloneElement(
-    d,
+  ], q = (e) => {
+    var n;
+    (n = o.onClick) == null || n.call(o, e), e.button === 0 && s((u) => !u);
+  }, f = () => {
+    s(!1), i == null || i();
+  }, F = (e) => {
+    var n;
+    (n = o.onKeyDown) == null || n.call(o, e), e.key === "ArrowRight" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), s(!0), D((u) => u + 1)) : (e.key === "ArrowLeft" || e.key === "Escape") && (c && e.preventDefault(), s(!1));
+  }, K = (e) => {
+    var n;
+    (n = o.onMouseEnter) == null || n.call(o, e), h && s(!0);
+  }, L = t.cloneElement(
+    r,
     {
-      ref: A,
-      onClick: k,
-      onKeyDown: C,
-      onMouseEnter: x ? () => n(!0) : void 0,
+      ref: b,
+      onClick: q,
+      onKeyDown: F,
+      onMouseEnter: K,
       "aria-haspopup": "menu",
-      "aria-expanded": s,
-      selected: s
+      "aria-expanded": c,
+      selected: c
     }
   );
-  return /* @__PURE__ */ S(j.Provider, { value: { ...i, variant: "floating" }, children: [
-    w,
-    /* @__PURE__ */ b(
-      O,
+  return /* @__PURE__ */ j(H.Provider, { value: { ...m, variant: "floating", onClose: f, submenu: !0 }, children: [
+    L,
+    /* @__PURE__ */ I(
+      _,
       {
-        ref: f,
-        ...h,
-        placement: g,
-        isOpen: s,
-        onClose: l,
-        anchorElement: y,
-        middleware: E,
-        children: t.Children.map(p, (e) => {
+        ref: T,
+        ...M,
+        placement: C,
+        isOpen: c,
+        onClose: f,
+        anchorElement: w,
+        middleware: O,
+        children: t.Children.map(A, (e) => {
           if (!t.isValidElement(e))
             return null;
-          if (e.type === u)
+          if (e.type === y)
             return e;
-          const o = e;
-          return t.cloneElement(o, {
-            onClick: (M) => {
-              var a, c;
-              (c = (a = o.props).onClick) == null || c.call(a, M), l(), i.onClose();
+          const n = e;
+          return t.cloneElement(n, {
+            onClick: (u) => {
+              var d, x;
+              (x = (d = n.props).onClick) == null || x.call(d, u), f(), m.onClose();
             }
           });
         })
@@ -65,6 +78,6 @@ const H = t.forwardRef(function u(m, f) {
   ] });
 });
 export {
-  H as MenuSubmenu
+  X as MenuSubmenu
 };
 //# sourceMappingURL=menuSubmenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menuSubmenu.js","sources":["../../../../../src/components/navigation/menu/menuSubmenu.tsx"],"sourcesContent":["import React from \"react\";\nimport { offset } from \"@floating-ui/react\";\nimport { MenuFloating, MenuFloatingProps } from \"./menuFloating\";\nimport { MenuItemProps } from \"./menuItem\";\nimport { MenuContext, useMenuContext } from \"./menuContext\";\n\nexport type MenuSubmenuProps = Pick<MenuFloatingProps, \"placement\" | \"onClose\"> &\n  React.HTMLAttributes<HTMLDivElement> & {\n    toggleElement?: React.ReactElement;\n    /** Items and/or nested `MenuSubmenu` elements (multi-level supported). */\n    children: React.ReactNode;\n    /** Open the submenu on pointer hover in addition to click. */\n    openOnHover?: boolean;\n  };\n\nexport const MenuSubmenu = React.forwardRef<HTMLDivElement, MenuSubmenuProps>(function MenuSubmenu(props, ref) {\n  const { children, toggleElement, placement = \"right-start\", onClose: onCloseProp, openOnHover, ...rest } = props;\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [anchorElement, setAnchorElement] = React.useState<HTMLElement | null>(null);\n  const contextValue = useMenuContext();\n\n  const middleware: MenuFloatingProps[\"middleware\"] = [\n    offset(({ placement }) => {\n      switch (placement) {\n        case \"right-start\":\n        case \"left-start\":\n          return { crossAxis: -8, mainAxis: 0 };\n        case \"right-end\":\n        case \"left-end\":\n          return { crossAxis: 8, mainAxis: 0 };\n        default:\n          return { crossAxis: 0, mainAxis: 0 };\n      }\n    }),\n  ];\n\n  const onToggle = (event: React.MouseEvent) => {\n    // Только для левой клавиши мышки.\n    if (event.button !== 0) {\n      return;\n    }\n\n    setIsOpen((prevState) => !prevState);\n  };\n\n  const onClose = () => {\n    setIsOpen(false);\n    onCloseProp?.();\n  };\n\n  const onToggleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === \"ArrowRight\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setIsOpen(true);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"Escape\") {\n      setIsOpen(false);\n    }\n  };\n\n  const toggle = React.cloneElement(\n    toggleElement as React.ReactElement,\n    {\n      ref: setAnchorElement,\n      onClick: onToggle,\n      onKeyDown: onToggleKeyDown,\n      onMouseEnter: openOnHover ? () => setIsOpen(true) : undefined,\n      \"aria-haspopup\": \"menu\",\n      \"aria-expanded\": isOpen,\n      selected: isOpen,\n    } as MenuItemProps\n  );\n\n  return (\n    <MenuContext.Provider value={{ ...contextValue, variant: \"floating\" }}>\n      {toggle}\n      <MenuFloating\n        ref={ref}\n        {...rest}\n        placement={placement}\n        isOpen={isOpen}\n        onClose={onClose}\n        anchorElement={anchorElement}\n        middleware={middleware}\n      >\n        {React.Children.map(children, (child) => {\n          if (!React.isValidElement(child)) {\n            return null;\n          }\n          // Nested submenus manage their own open/close lifecycle — don't\n          // collapse the whole menu when interacting with their toggle.\n          if (child.type === MenuSubmenu) {\n            return child;\n          }\n          const typed = child as React.ReactElement<MenuItemProps>;\n          return React.cloneElement(typed, {\n            onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n              typed.props.onClick?.(e);\n              onClose();\n              contextValue.onClose();\n            },\n          });\n        })}\n      </MenuFloating>\n    </MenuContext.Provider>\n  );\n});\n"],"names":["MenuSubmenu","React","props","ref","children","toggleElement","placement","onCloseProp","openOnHover","rest","isOpen","setIsOpen","anchorElement","setAnchorElement","contextValue","useMenuContext","middleware","offset","onToggle","event","prevState","onClose","onToggleKeyDown","toggle","jsxs","MenuContext","jsx","MenuFloating","child","typed","e","_b","_a"],"mappings":";;;;;AAeO,MAAMA,IAAcC,EAAM,WAA6C,SAASD,EAAYE,GAAOC,GAAK;AAC7G,QAAM,EAAE,UAAAC,GAAU,eAAAC,GAAe,WAAAC,IAAY,eAAe,SAASC,GAAa,aAAAC,GAAa,GAAGC,EAAA,IAASP,GACrG,CAACQ,GAAQC,CAAS,IAAIV,EAAM,SAAS,EAAK,GAC1C,CAACW,GAAeC,CAAgB,IAAIZ,EAAM,SAA6B,IAAI,GAC3Ea,IAAeC,EAAA,GAEfC,IAA8C;AAAA,IAClDC,EAAO,CAAC,EAAE,WAAAX,QAAgB;AACxB,cAAQA,GAAAA;AAAAA,QACN,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,EAAE,WAAW,IAAI,UAAU,EAAA;AAAA,QACpC,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,EAAE,WAAW,GAAG,UAAU,EAAA;AAAA,QACnC;AACE,iBAAO,EAAE,WAAW,GAAG,UAAU,EAAA;AAAA,MAAE;AAAA,IAEzC,CAAC;AAAA,EAAA,GAGGY,IAAW,CAACC,MAA4B;AAE5C,IAAIA,EAAM,WAAW,KAIrBR,EAAU,CAACS,MAAc,CAACA,CAAS;AAAA,EACrC,GAEMC,IAAU,MAAM;AACpB,IAAAV,EAAU,EAAK,GACfJ,KAAA,QAAAA;AAAA,EACF,GAEMe,IAAkB,CAACH,MAA+B;AACtD,IAAIA,EAAM,QAAQ,gBAAgBA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,OACvEA,EAAM,eAAA,GACNR,EAAU,EAAI,MACLQ,EAAM,QAAQ,eAAeA,EAAM,QAAQ,aACpDR,EAAU,EAAK;AAAA,EAEnB,GAEMY,IAAStB,EAAM;AAAA,IACnBI;AAAA,IACA;AAAA,MACE,KAAKQ;AAAA,MACL,SAASK;AAAA,MACT,WAAWI;AAAA,MACX,cAAcd,IAAc,MAAMG,EAAU,EAAI,IAAI;AAAA,MACpD,iBAAiB;AAAA,MACjB,iBAAiBD;AAAA,MACjB,UAAUA;AAAA,IAAA;AAAA,EACZ;AAGF,SACE,gBAAAc,EAACC,EAAY,UAAZ,EAAqB,OAAO,EAAE,GAAGX,GAAc,SAAS,WAAA,GACtD,UAAA;AAAA,IAAAS;AAAA,IACD,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAxB;AAAA,QACC,GAAGM;AAAA,QACJ,WAAAH;AAAA,QACA,QAAAI;AAAA,QACA,SAAAW;AAAA,QACA,eAAAT;AAAA,QACA,YAAAI;AAAA,QAEC,UAAAf,EAAM,SAAS,IAAIG,GAAU,CAACwB,MAAU;AACvC,cAAI,CAAC3B,EAAM,eAAe2B,CAAK;AAC7B,mBAAO;AAIT,cAAIA,EAAM,SAAS5B;AACjB,mBAAO4B;AAET,gBAAMC,IAAQD;AACd,iBAAO3B,EAAM,aAAa4B,GAAO;AAAA,YAC/B,SAAS,CAACC,MAAmD;;AAC3D,eAAAC,KAAAC,IAAAH,EAAM,OAAM,YAAZ,QAAAE,EAAA,KAAAC,GAAsBF,IACtBT,EAAA,GACAP,EAAa,QAAA;AAAA,YACf;AAAA,UAAA,CACD;AAAA,QACH,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"menuSubmenu.js","sources":["../../../../../src/components/navigation/menu/menuSubmenu.tsx"],"sourcesContent":["import React from \"react\";\nimport { offset } from \"@floating-ui/react\";\nimport { MenuFloating, MenuFloatingProps } from \"./menuFloating\";\nimport { ENABLED_ITEM_SELECTOR } from \"./menuList\";\nimport { MenuItemProps } from \"./menuItem\";\nimport { MenuContext, useMenuContext } from \"./menuContext\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport type MenuSubmenuProps = Pick<MenuFloatingProps, \"placement\" | \"onClose\"> &\n  React.HTMLAttributes<HTMLDivElement> & {\n    toggleElement?: React.ReactElement;\n    /** Items and/or nested `MenuSubmenu` elements (multi-level supported). */\n    children: React.ReactNode;\n    /** Open the submenu on pointer hover in addition to click. */\n    openOnHover?: boolean;\n  };\n\nexport const MenuSubmenu = React.forwardRef<HTMLDivElement, MenuSubmenuProps>(function MenuSubmenu(props, ref) {\n  const { children, toggleElement, placement = \"right-start\", onClose: onCloseProp, openOnHover, ...rest } = props;\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [anchorElement, setAnchorElement] = React.useState<HTMLElement | null>(null);\n  // Counts the row's keyboard opens: after each, the submenu's first item takes focus.\n  const [focusRequest, setFocusRequest] = React.useState(0);\n  const panelRef = React.useRef<HTMLDivElement>(null);\n  const floatingRef = useForkRef(ref, panelRef);\n  React.useEffect(() => {\n    if (focusRequest > 0) {\n      panelRef.current?.querySelector<HTMLElement>(ENABLED_ITEM_SELECTOR)?.focus();\n    }\n  }, [focusRequest]);\n  const contextValue = useMenuContext();\n\n  // The toggle keeps its own ref and handlers; the submenu's handlers run after\n  // its own.\n  const toggleProps: MenuItemProps = (toggleElement as React.ReactElement<MenuItemProps> | undefined)?.props ?? {};\n  const toggleRef = useForkRef((toggleElement as { ref?: React.Ref<HTMLElement> } | undefined)?.ref, setAnchorElement);\n\n  const middleware: MenuFloatingProps[\"middleware\"] = [\n    offset(({ placement }) => {\n      switch (placement) {\n        case \"right-start\":\n        case \"left-start\":\n          return { crossAxis: -8, mainAxis: 0 };\n        case \"right-end\":\n        case \"left-end\":\n          return { crossAxis: 8, mainAxis: 0 };\n        default:\n          return { crossAxis: 0, mainAxis: 0 };\n      }\n    }),\n  ];\n\n  const onToggle = (event: React.MouseEvent<HTMLLIElement>) => {\n    toggleProps.onClick?.(event);\n\n    // Только для левой клавиши мышки.\n    if (event.button !== 0) {\n      return;\n    }\n\n    setIsOpen((prevState) => !prevState);\n  };\n\n  const onClose = () => {\n    setIsOpen(false);\n    onCloseProp?.();\n  };\n\n  const onToggleKeyDown = (event: React.KeyboardEvent<HTMLLIElement>) => {\n    toggleProps.onKeyDown?.(event);\n\n    if (event.key === \"ArrowRight\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setIsOpen(true);\n      setFocusRequest((count) => count + 1);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"Escape\") {\n      // Closing its own open submenu takes the key: the menu the row is in stays open.\n      if (isOpen) {\n        event.preventDefault();\n      }\n      setIsOpen(false);\n    }\n  };\n\n  const onToggleMouseEnter = (event: React.MouseEvent<HTMLLIElement>) => {\n    toggleProps.onMouseEnter?.(event);\n\n    if (openOnHover) {\n      setIsOpen(true);\n    }\n  };\n\n  // aria-haspopup, aria-expanded and selected show the submenu's state: they win\n  // over the toggle's own.\n  const toggle = React.cloneElement(\n    toggleElement as React.ReactElement,\n    {\n      ref: toggleRef,\n      onClick: onToggle,\n      onKeyDown: onToggleKeyDown,\n      onMouseEnter: onToggleMouseEnter,\n      \"aria-haspopup\": \"menu\",\n      \"aria-expanded\": isOpen,\n      selected: isOpen,\n    } as MenuItemProps\n  );\n\n  // Escape or ArrowLeft in the submenu's own list closes this submenu, not the whole menu.\n  return (\n    <MenuContext.Provider value={{ ...contextValue, variant: \"floating\", onClose, submenu: true }}>\n      {toggle}\n      <MenuFloating\n        ref={floatingRef}\n        {...rest}\n        placement={placement}\n        isOpen={isOpen}\n        onClose={onClose}\n        anchorElement={anchorElement}\n        middleware={middleware}\n      >\n        {React.Children.map(children, (child) => {\n          if (!React.isValidElement(child)) {\n            return null;\n          }\n          // Nested submenus manage their own open/close lifecycle — don't\n          // collapse the whole menu when interacting with their toggle.\n          if (child.type === MenuSubmenu) {\n            return child;\n          }\n          const typed = child as React.ReactElement<MenuItemProps>;\n          return React.cloneElement(typed, {\n            onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n              typed.props.onClick?.(e);\n              onClose();\n              contextValue.onClose();\n            },\n          });\n        })}\n      </MenuFloating>\n    </MenuContext.Provider>\n  );\n});\n"],"names":["MenuSubmenu","React","props","ref","children","toggleElement","placement","onCloseProp","openOnHover","rest","isOpen","setIsOpen","anchorElement","setAnchorElement","focusRequest","setFocusRequest","panelRef","floatingRef","useForkRef","_b","_a","ENABLED_ITEM_SELECTOR","contextValue","useMenuContext","toggleProps","toggleRef","middleware","offset","onToggle","event","prevState","onClose","onToggleKeyDown","count","onToggleMouseEnter","toggle","jsxs","MenuContext","jsx","MenuFloating","child","typed","e"],"mappings":"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"}

package/dist/headless/components/navigation/pagination/pagination.js

@@ -1,14 +1,14 @@
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
-import { forwardRef as S, useRef as q } from "react";
-import A from "clsx";
-import { Icon as B } from "../../base/icon/icon.js";
-import { useForkRef as K } from "../../../hooks/useForkRef.js";
-const d = (a, m) => Array.from({ length: Math.max(m - a + 1, 0) }, (s, e) => a + e), O = (a, m, s, e) => {
+import { jsx as r, jsxs as q } from "react/jsx-runtime";
+import { forwardRef as B, useRef as K } from "react";
+import N from "clsx";
+import { Icon as O } from "../../base/icon/icon.js";
+import { useForkRef as z } from "../../../hooks/useForkRef.js";
+const d = (a, m) => Array.from({ length: Math.max(m - a + 1, 0) }, (t, e) => a + e), G = (a, m, t, e) => {
   const g = d(1, Math.min(e, a)), f = d(Math.max(a - e + 1, e + 1), a), c = Math.max(
-    Math.min(m - s, a - e - s * 2 - 1),
+    Math.min(m - t, a - e - t * 2 - 1),
     e + 2
   ), o = Math.min(
-    Math.max(m + s, e + s * 2 + 2),
+    Math.max(m + t, e + t * 2 + 2),
     f.length > 0 ? f[0] - 2 : a - 1
   );
   return [
@@ -18,89 +18,91 @@ const d = (a, m) => Array.from({ length: Math.max(m - a + 1, 0) }, (s, e) => a +
     ...o < a - e - 1 ? ["end-ellipsis"] : a - e > e ? [a - e] : [],
     ...f
   ];
-}, U = S(function({
+}, W = B(function({
   className: m,
-  count: s,
+  count: t,
   page: e,
   siblingCount: g = 1,
   boundaryCount: f = 1,
   size: c = "medium",
   variant: o = "filled",
-  shape: R = "circular",
+  shape: $ = "circular",
   color: x = "default",
   disabled: p = !1,
-  showFirstButton: N = !1,
-  showLastButton: $ = !1,
-  hidePrevButton: P = !1,
-  hideNextButton: E = !1,
+  showFirstButton: P = !1,
+  showLastButton: E = !1,
+  hidePrevButton: L = !1,
+  hideNextButton: j = !1,
   onChange: w,
-  ...L
-}, j) {
-  const v = q(null), D = K(j, v), b = (i) => {
-    p || i === e || i < 1 || i > s || w == null || w(i);
-  }, F = (i) => {
-    var h, M, k;
+  "data-testid": D = "pagination",
+  ...v
+}, F) {
+  var k;
+  const b = K(null), H = z(F, b), M = (i) => {
+    p || i === e || i < 1 || i > t || w == null || w(i);
+  }, I = (i) => {
+    var h, A, R;
     if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(i.key))
       return;
-    const t = Array.from(
-      (M = (h = v.current) == null ? void 0 : h.querySelectorAll("button.smwb-pagination__item:not(:disabled)")) != null ? M : []
+    const s = Array.from(
+      (A = (h = b.current) == null ? void 0 : h.querySelectorAll("button.smwb-pagination__item:not(:disabled)")) != null ? A : []
     );
-    if (t.length === 0)
+    if (s.length === 0)
       return;
-    const l = t.indexOf(document.activeElement);
+    const l = s.indexOf(document.activeElement);
     let n = l;
-    i.key === "ArrowRight" ? n = Math.min(l + 1, t.length - 1) : i.key === "ArrowLeft" ? n = Math.max(l - 1, 0) : i.key === "Home" ? n = 0 : i.key === "End" && (n = t.length - 1), i.preventDefault(), (k = t[n]) == null || k.focus();
-  }, H = O(s, e, g, f), _ = (i, t, l, n, h) => h ? null : /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+    i.key === "ArrowRight" ? n = Math.min(l + 1, s.length - 1) : i.key === "ArrowLeft" ? n = Math.max(l - 1, 0) : i.key === "Home" ? n = 0 : i.key === "End" && (n = s.length - 1), i.preventDefault(), (R = s[n]) == null || R.focus();
+  }, S = G(t, e, g, f), _ = (i, s, l, n, h) => h ? null : /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
     "button",
     {
       type: "button",
       className: "smwb-pagination__item smwb-pagination__nav",
-      "aria-label": t,
-      disabled: p || l < 1 || l > s,
-      onClick: () => b(l),
-      children: /* @__PURE__ */ r(B, { name: n, size: c === "small" ? 16 : 18 })
+      "aria-label": s,
+      disabled: p || l < 1 || l > t,
+      onClick: () => M(l),
+      children: /* @__PURE__ */ r(O, { name: n, size: c === "small" ? 16 : 18 })
     }
   ) }, i);
   return /* @__PURE__ */ r(
     "nav",
     {
-      ...L,
-      ref: D,
-      "data-testid": "pagination",
-      "aria-label": "pagination",
-      className: A(
+      ...v,
+      ref: H,
+      "data-testid": D,
+      "aria-label": (k = v["aria-label"]) != null ? k : "pagination",
+      className: N(
         "smwb-pagination",
         `smwb-pagination_${c}`,
         `smwb-pagination_${o}`,
-        `smwb-pagination_shape-${R}`,
+        `smwb-pagination_shape-${$}`,
         x !== "default" && `smwb-pagination_color-${x}`,
         { "smwb-pagination_disabled": p },
         m
       ),
-      children: /* @__PURE__ */ I("ul", { className: "smwb-pagination__list", onKeyDown: F, children: [
-        _("first", "First page", 1, "first_page", !N),
-        _("prev", "Previous page", e - 1, "chevron_left", P),
-        H.map(
-          (i, t) => typeof i == "number" ? /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ q("ul", { className: "smwb-pagination__list", onKeyDown: I, children: [
+        _("first", "First page", 1, "first_page", !P),
+        _("prev", "Previous page", e - 1, "chevron_left", L),
+        S.map(
+          (i, s) => typeof i == "number" ? /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
             "button",
             {
               type: "button",
-              className: A("smwb-pagination__item", { "smwb-pagination__item_selected": i === e }),
+              className: N("smwb-pagination__item", { "smwb-pagination__item_selected": i === e }),
               "aria-current": i === e ? "page" : void 0,
               disabled: p,
-              onClick: () => b(i),
+              onClick: () => M(i),
               children: i
             }
-          ) }, i) : /* @__PURE__ */ r("li", { className: "smwb-pagination__ellipsis", "aria-hidden": "true", children: "…" }, `${i}-${t}`)
+          ) }, i) : /* @__PURE__ */ r("li", { className: "smwb-pagination__ellipsis", "aria-hidden": "true", children: "…" }, `${i}-${s}`)
         ),
-        _("next", "Next page", e + 1, "chevron_right", E),
-        _("last", "Last page", s, "last_page", !$)
+        _("next", "Next page", e + 1, "chevron_right", j),
+        _("last", "Last page", t, "last_page", !E)
       ] })
     }
   );
 });
 export {
-  U as Pagination,
-  U as default
+  W as Pagination,
+  W as default
 };
 //# sourceMappingURL=pagination.js.map