@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/source/components/navigation/commandPalette/commandPaletteNavigation.js

@@ -0,0 +1,54 @@
+function firstOption(count, isEnabled) {
+  for (let index = 0; index < count; index++) {
+    if (isEnabled(index)) {
+      return index;
+    }
+  }
+  return -1;
+}
+function lastOption(count, isEnabled) {
+  for (let index = count - 1; index >= 0; index--) {
+    if (isEnabled(index)) {
+      return index;
+    }
+  }
+  return -1;
+}
+function moveOption(count, isEnabled, from, steps) {
+  if (from < 0) {
+    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);
+  }
+  const direction = steps > 0 ? 1 : -1;
+  let result = from;
+  let left = Math.abs(steps);
+  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {
+    if (isEnabled(index)) {
+      result = index;
+      left--;
+    }
+  }
+  return result;
+}
+function keepInView(element, root) {
+  for (let box = element.parentElement; box; box = box.parentElement) {
+    if (box.scrollHeight > box.clientHeight) {
+      const outer = box.getBoundingClientRect();
+      const inner = element.getBoundingClientRect();
+      if (inner.top < outer.top) {
+        box.scrollTop -= outer.top - inner.top;
+      } else if (inner.bottom > outer.bottom) {
+        box.scrollTop += inner.bottom - outer.bottom;
+      }
+    }
+    if (box === root) {
+      break;
+    }
+  }
+}
+export {
+  firstOption,
+  keepInView,
+  lastOption,
+  moveOption
+};
+//# sourceMappingURL=commandPaletteNavigation.js.map

package/dist/headless/source/components/navigation/commandPalette/commandPaletteNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/commandPalette/commandPaletteNavigation.ts"],
+  "sourcesContent": ["// Moves of the active option over the palette's options, by index in the order they are drawn.\n// A disabled option is passed over. A copy of the helpers of the select field's listbox: importing\n// them from there would make the palette depend on the select field's styles.\n\nexport type IsOptionEnabled = (index: number) => boolean;\n\n/** The first enabled option, or -1. */\nexport function firstOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = 0; index < count; index++) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/** The last enabled option, or -1. */\nexport function lastOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = count - 1; index >= 0; index--) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/**\n * The enabled option `steps` options after `from` (before it for a negative\n * count), stopping at the first or the last one. With no active option, a move\n * down starts at the first option and a move up at the last.\n */\nexport function moveOption(count: number, isEnabled: IsOptionEnabled, from: number, steps: number): number {\n  if (from < 0) {\n    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);\n  }\n  const direction = steps > 0 ? 1 : -1;\n  let result = from;\n  let left = Math.abs(steps);\n  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {\n    if (isEnabled(index)) {\n      result = index;\n      left--;\n    }\n  }\n  return result;\n}\n\n/** Scrolls each scrolling box from the element up to `root` so the element shows. */\nexport function keepInView(element: HTMLElement, root: HTMLElement | null) {\n  for (let box = element.parentElement; box; box = box.parentElement) {\n    if (box.scrollHeight > box.clientHeight) {\n      const outer = box.getBoundingClientRect();\n      const inner = element.getBoundingClientRect();\n      if (inner.top < outer.top) {\n        box.scrollTop -= outer.top - inner.top;\n      } else if (inner.bottom > outer.bottom) {\n        box.scrollTop += inner.bottom - outer.bottom;\n      }\n    }\n    if (box === root) {\n      break;\n    }\n  }\n}\n"],
+  "mappings": "AAOO,SAAS,YAAY,OAAe,WAAoC;AAC7E,WAAS,QAAQ,GAAG,QAAQ,OAAO,SAAS;AAC1C,QAAI,UAAU,KAAK,GAAG;AACpB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,WAAW,OAAe,WAAoC;AAC5E,WAAS,QAAQ,QAAQ,GAAG,SAAS,GAAG,SAAS;AAC/C,QAAI,UAAU,KAAK,GAAG;AACpB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAOO,SAAS,WAAW,OAAe,WAA4B,MAAc,OAAuB;AACzG,MAAI,OAAO,GAAG;AACZ,WAAO,QAAQ,IAAI,YAAY,OAAO,SAAS,IAAI,WAAW,OAAO,SAAS;AAAA,EAChF;AACA,QAAM,YAAY,QAAQ,IAAI,IAAI;AAClC,MAAI,SAAS;AACb,MAAI,OAAO,KAAK,IAAI,KAAK;AACzB,WAAS,QAAQ,OAAO,WAAW,SAAS,KAAK,QAAQ,SAAS,OAAO,GAAG,SAAS,WAAW;AAC9F,QAAI,UAAU,KAAK,GAAG;AACpB,eAAS;AACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,WAAW,SAAsB,MAA0B;AACzE,WAAS,MAAM,QAAQ,eAAe,KAAK,MAAM,IAAI,eAAe;AAClE,QAAI,IAAI,eAAe,IAAI,cAAc;AACvC,YAAM,QAAQ,IAAI,sBAAsB;AACxC,YAAM,QAAQ,QAAQ,sBAAsB;AAC5C,UAAI,MAAM,MAAM,MAAM,KAAK;AACzB,YAAI,aAAa,MAAM,MAAM,MAAM;AAAA,MACrC,WAAW,MAAM,SAAS,MAAM,QAAQ;AACtC,YAAI,aAAa,MAAM,SAAS,MAAM;AAAA,MACxC;AAAA,IACF;AACA,QAAI,QAAQ,MAAM;AAChB;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/headless/source/components/navigation/commandPalette/commandPaletteTypes.js

@@ -0,0 +1 @@
+//# sourceMappingURL=commandPaletteTypes.js.map

package/dist/headless/source/components/navigation/commandPalette/commandPaletteTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/headless/source/components/navigation/commandPalette/index.js

@@ -0,0 +1,11 @@
+import { CommandPalette, default as default2 } from "./commandPalette";
+import { commandPaletteFilter, normalizeSearchText } from "./commandPaletteFilter";
+import { createKeyboardShortcut } from "../../../primitives/createKeyboardShortcut";
+export {
+  CommandPalette,
+  commandPaletteFilter,
+  createKeyboardShortcut,
+  default2 as default,
+  normalizeSearchText
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/navigation/commandPalette/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/commandPalette/index.ts"],
+  "sourcesContent": ["export { CommandPalette, default } from \"./commandPalette\";\nexport type { CommandPaletteProps } from \"./commandPalette\";\nexport type {\n  CommandPaletteFilter,\n  CommandPaletteGroup,\n  CommandPaletteItem,\n  CommandPaletteSource,\n} from \"./commandPaletteTypes\";\nexport { commandPaletteFilter, normalizeSearchText } from \"./commandPaletteFilter\";\nexport { createKeyboardShortcut } from \"../../../primitives/createKeyboardShortcut\";\nexport type { CreateKeyboardShortcutOptions } from \"../../../primitives/createKeyboardShortcut\";\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,WAAAA,gBAAe;AAQxC,SAAS,sBAAsB,2BAA2B;AAC1D,SAAS,8BAA8B;",
+  "names": ["default"]
+}

package/dist/headless/source/components/navigation/menu/menu.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuComponent } from \"./menuComponent\";\nimport type { MenuFloatingProps } from \"./menuFloating\";\n\nexport type MenuProps = MenuFloatingProps & {\n  variant?: \"static\" | \"floating\";\n  dense?: boolean;\n};\n\nexport function Menu(props: ParentProps<MenuProps>): JSX.Element {\n  const merged = mergeProps({ dense: false, variant: \"floating\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"dense\", \"variant\", \"children\", \"ref\"]);\n\n  const value = {\n    get dense() {\n      return local.dense;\n    },\n    get variant() {\n      return local.variant;\n    },\n    onClose: () => rest.onClose?.(),\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <MenuComponent ref={local.ref} {...rest}>\n        {local.children}\n      </MenuComponent>\n    </MenuContext.Provider>\n  );\n}\n\nexport default Menu;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAQvB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,OAAO,OAAO,SAAS,WAAoB,GAAG,KAAK;AAC/E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,WAAW,YAAY,KAAK,CAAC;AAEhF,QAAM,QAAQ;AAAA,IACZ,IAAI,QAAQ;AACV,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,UAAU;AACZ,aAAO,MAAM;AAAA,IACf;AAAA,IACA,SAAS,MAAM,KAAK,UAAU;AAAA,EAChC;AAEA,SACE,CAAC,YAAY,SAAS,OAAO,OAAO;AAAA,MAClC,CAAC,cAAc,KAAK,MAAM,SAAS,MAAM;AAAA,SACtC,MAAM,SAAS;AAAA,MAClB,EAFC,cAEe;AAAA,IAClB,EAJC,YAAY;AAMjB;AAEA,IAAO,eAAQ;","names":[],"file":"menu.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuComponent } from \"./menuComponent\";\nimport type { MenuFloatingProps } from \"./menuFloating\";\n\nexport type MenuProps = MenuFloatingProps & {\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?: JSX.AriaAttributes[\"role\"];\n};\n\nexport function Menu(props: ParentProps<MenuProps>): JSX.Element {\n  const merged = mergeProps({ dense: false, variant: \"floating\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"dense\", \"variant\", \"children\", \"ref\"]);\n\n  const value = {\n    get dense() {\n      return local.dense;\n    },\n    get variant() {\n      return local.variant;\n    },\n    onClose: () => rest.onClose?.(),\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <MenuComponent ref={local.ref} {...rest}>\n        {local.children}\n      </MenuComponent>\n    </MenuContext.Provider>\n  );\n}\n\nexport default Menu;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAcvB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,OAAO,OAAO,SAAS,WAAoB,GAAG,KAAK;AAC/E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,WAAW,YAAY,KAAK,CAAC;AAEhF,QAAM,QAAQ;AAAA,IACZ,IAAI,QAAQ;AACV,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,UAAU;AACZ,aAAO,MAAM;AAAA,IACf;AAAA,IACA,SAAS,MAAM,KAAK,UAAU;AAAA,EAChC;AAEA,SACE,CAAC,YAAY,SAAS,OAAO,OAAO;AAAA,MAClC,CAAC,cAAc,KAAK,MAAM,SAAS,MAAM;AAAA,SACtC,MAAM,SAAS;AAAA,MAClB,EAFC,cAEe;AAAA,IAClB,EAJC,YAAY;AAMjB;AAEA,IAAO,eAAQ;","names":[],"file":"menu.jsx"}

package/dist/headless/source/components/navigation/menu/menuComponent.jsx

@@ -1,13 +1,12 @@
-import { Show } from "solid-js";
+import { Show, splitProps } from "solid-js";
 import { useMenuContext } from "./menuContext";
 import { MenuList } from "./menuList";
 import { MenuFloating } from "./menuFloating";
 function MenuComponent(props) {
   const ctx = useMenuContext();
+  const [, listProps] = splitProps(props, ["anchorElement", "isOpen", "onClose", "placement", "middleware"]);
   return <Show when={ctx.variant === "static"} fallback={<MenuFloating {...props} />}>
-      <MenuList ref={props.ref} class={props.class}>
-        {props.children}
-      </MenuList>
+      <MenuList {...listProps} />
     </Show>;
 }
 var menuComponent_default = MenuComponent;

package/dist/headless/source/components/navigation/menu/menuComponent.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show } from \"solid-js\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, type MenuFloatingProps } from \"./menuFloating\";\n\nexport function MenuComponent(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const ctx = useMenuContext();\n  return (\n    <Show when={ctx.variant === \"static\"} fallback={<MenuFloating {...props} />}>\n      <MenuList ref={props.ref} class={props.class}>\n        {props.children}\n      </MenuList>\n    </Show>\n  );\n}\n\nexport default MenuComponent;\n"],"mappings":"AAAA,SAAqC,YAAY;AACjD,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,oBAA4C;AAE9C,SAAS,cAAc,OAAoD;AAChF,QAAM,MAAM,eAAe;AAC3B,SACE,CAAC,KAAK,MAAM,IAAI,YAAY,UAAU,UAAU,CAAC,iBAAiB,OAAO,IAAI;AAAA,MAC3E,CAAC,SAAS,KAAK,MAAM,KAAK,OAAO,MAAM,OAAO;AAAA,SAC3C,MAAM,SAAS;AAAA,MAClB,EAFC,SAEU;AAAA,IACb,EAJC;AAML;AAEA,IAAO,wBAAQ;","names":[],"file":"menuComponent.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuComponent.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport { useMenuContext } from \"./menuContext\";\nimport { MenuList } from \"./menuList\";\nimport { MenuFloating, type MenuFloatingProps } from \"./menuFloating\";\n\nexport function MenuComponent(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const ctx = useMenuContext();\n  // A static menu is the list itself: the caller's props go on its root, except\n  // the floating-only ones (isOpen would become a DOM attribute, onClose a\n  // \"close\" listener). Escape still reaches onClose through the menu context.\n  const [, listProps] = splitProps(props, [\"anchorElement\", \"isOpen\", \"onClose\", \"placement\", \"middleware\"]);\n  return (\n    <Show when={ctx.variant === \"static\"} fallback={<MenuFloating {...props} />}>\n      <MenuList {...listProps} />\n    </Show>\n  );\n}\n\nexport default MenuComponent;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,oBAA4C;AAE9C,SAAS,cAAc,OAAoD;AAChF,QAAM,MAAM,eAAe;AAI3B,QAAM,CAAC,EAAE,SAAS,IAAI,WAAW,OAAO,CAAC,iBAAiB,UAAU,WAAW,aAAa,YAAY,CAAC;AACzG,SACE,CAAC,KAAK,MAAM,IAAI,YAAY,UAAU,UAAU,CAAC,iBAAiB,OAAO,IAAI;AAAA,MAC3E,CAAC,aAAa,WAAW,EAAE;AAAA,IAC7B,EAFC;AAIL;AAEA,IAAO,wBAAQ;","names":[],"file":"menuComponent.jsx"}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/menu/menuContext.ts"],
-  "sourcesContent": ["import { createContext, useContext } from \"solid-js\";\n\nexport interface MenuContextValue {\n  dense: boolean;\n  variant: \"static\" | \"floating\";\n  onClose: () => void;\n}\n\nexport const MenuContext = createContext<MenuContextValue>({\n  dense: false,\n  variant: \"floating\",\n  onClose: () => undefined,\n});\n\nexport function useMenuContext(): MenuContextValue {\n  return useContext(MenuContext);\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAQnC,MAAM,cAAc,cAAgC;AAAA,EACzD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AACjB,CAAC;AAEM,SAAS,iBAAmC;AACjD,SAAO,WAAW,WAAW;AAC/B;",
+  "sourcesContent": ["import { createContext, useContext } from \"solid-js\";\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 = createContext<MenuContextValue>({\n  dense: false,\n  variant: \"floating\",\n  onClose: () => undefined,\n});\n\nexport function useMenuContext(): MenuContextValue {\n  return useContext(MenuContext);\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAUnC,MAAM,cAAc,cAAgC;AAAA,EACzD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AACjB,CAAC;AAEM,SAAS,iBAAmC;AACjD,SAAO,WAAW,WAAW;AAC/B;",
   "names": []
 }

package/dist/headless/source/components/navigation/menu/menuFloating.jsx

@@ -1,9 +1,10 @@
-import { Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, createEffect, createSignal, mergeProps, on, onCleanup, splitProps } from "solid-js";
 import { buildFloatingMiddleware, resolvePlacement } from "../../../utils/floating";
 import { createFloating } from "../../../primitives/createFloating";
 import { ClickAwayListener } from "../../clickAwayListener";
 import { MenuList } from "./menuList";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 function buildMenuFloatingMiddleware(resolved, custom) {
   return buildFloatingMiddleware(resolved, custom);
 }
@@ -53,6 +54,29 @@ function MenuFloating(props) {
     if (raf !== void 0) cancelAnimationFrame(raf);
     if (timer !== void 0) clearTimeout(timer);
   });
+  createEffect(() => {
+    const anchor = local.anchorElement;
+    const onClose = local.onClose;
+    if (!local.isOpen || !onClose || !anchor) return;
+    const onAnchorKeyDown = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented) {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    anchor.addEventListener("keydown", onAnchorKeyDown);
+    onCleanup(() => anchor.removeEventListener("keydown", onAnchorKeyDown));
+  });
+  createEffect(
+    on(
+      () => Boolean(local.isOpen),
+      (open) => {
+        if (!open && menuEl?.contains(document.activeElement)) {
+          local.anchorElement?.focus?.();
+        }
+      }
+    )
+  );
   const onAwayClick = (event) => {
     if (!local.isOpen || !local.onClose || !menuEl) return;
     const target = event.target;
@@ -61,9 +85,7 @@ function MenuFloating(props) {
     }
     local.onClose();
   };
-  const style = () => ({
-    ...floating.floatingStyles(),
-    ...typeof local.style === "object" && local.style ? local.style : {},
+  const style = () => mergeStyle(floating.floatingStyles(), local.style, {
     transition: `opacity ${FADE_MS}ms ease-in-out`,
     opacity: shown() ? 1 : 0
   });

package/dist/headless/source/components/navigation/menu/menuFloating.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuFloating.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement, type ResolvedPlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { MenuList } from \"./menuList\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport function buildMenuFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[] {\n  return buildFloatingMiddleware(resolved, custom);\n}\n\nexport interface MenuFloatingProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  anchorElement?: Element | null | undefined;\n  isOpen?: boolean;\n  onClose?: () => void;\n  placement?: Placement;\n  middleware?: Middleware[] | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function MenuFloating(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const merged = mergeProps({ placement: \"bottom-start\" as Placement }, props);\n  const [local, rest] = splitProps(merged, [\n    \"anchorElement\",\n    \"isOpen\",\n    \"onClose\",\n    \"placement\",\n    \"middleware\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  let menuEl: HTMLElement | undefined;\n  const resolved = (): ResolvedPlacement => resolvePlacement(local.placement);\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildMenuFloatingMiddleware(resolved(), local.middleware),\n  });\n\n  createEffect(() => {\n    floating.setReference(local.anchorElement ?? null);\n  });\n\n  // mountOnEnter + unmountOnExit fade lifecycle (replaces RTG Transition).\n  const [mounted, setMounted] = createSignal(Boolean(local.isOpen));\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    const open = Boolean(local.isOpen);\n    if (open) {\n      if (timer !== undefined) {\n        clearTimeout(timer);\n        timer = undefined;\n      }\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) {\n        timer = setTimeout(() => setMounted(false), FADE_MS);\n      }\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  const onAwayClick = (event: MouseEvent | TouchEvent): void => {\n    if (!local.isOpen || !local.onClose || !menuEl) return;\n    const target = event.target as HTMLElement;\n    if (menuEl.contains(target) || (local.anchorElement as HTMLElement | null)?.contains(target)) {\n      return;\n    }\n    local.onClose();\n  };\n\n  const style = (): JSX.CSSProperties => ({\n    ...floating.floatingStyles(),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n    transition: `opacity ${FADE_MS}ms ease-in-out`,\n    opacity: shown() ? 1 : 0,\n  });\n\n  return (\n    <Show when={mounted()}>\n      <ClickAwayListener onClickAway={onAwayClick}>\n        <MenuList {...rest} ref={mergeRefs(local.ref, floating.setFloating, (el) => (menuEl = el))} style={style()}>\n          {local.children}\n        </MenuList>\n      </ClickAwayListener>\n    </Show>\n  );\n}\n\nexport default MenuFloating;\n"],"mappings":"AAAA,SAAqC,MAAM,cAAc,cAAc,YAAY,WAAW,kBAAkB;AAEhH,SAAS,yBAAyC,wBAAgD;AAClG,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAE7B,SAAS,4BAA4B,UAA6B,QAAqC;AAC5G,SAAO,wBAAwB,UAAU,MAAM;AACjD;AAWA,MAAM,UAAU;AAET,SAAS,aAAa,OAAoD;AAC/E,QAAM,SAAS,WAAW,EAAE,WAAW,eAA4B,GAAG,KAAK;AAC3E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACJ,QAAM,WAAW,MAAyB,iBAAiB,MAAM,SAAS;AAC1E,QAAM,WAAW,eAAe;AAAA,IAC9B,WAAW,MAAM,SAAS,EAAE;AAAA,IAC5B,YAAY,MAAM,4BAA4B,SAAS,GAAG,MAAM,UAAU;AAAA,EAC5E,CAAC;AAED,eAAa,MAAM;AACjB,aAAS,aAAa,MAAM,iBAAiB,IAAI;AAAA,EACnD,CAAC;AAGD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,QAAQ,MAAM,MAAM,CAAC;AAChE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,KAAK;AAC5C,MAAI;AACJ,MAAI;AAEJ,eAAa,MAAM;AACjB,UAAM,OAAO,QAAQ,MAAM,MAAM;AACjC,QAAI,MAAM;AACR,UAAI,UAAU,QAAW;AACvB,qBAAa,KAAK;AAClB,gBAAQ;AAAA,MACV;AACA,iBAAW,IAAI;AACf,YAAM,sBAAsB,MAAM,SAAS,IAAI,CAAC;AAAA,IAClD,OAAO;AACL,eAAS,KAAK;AACd,UAAI,QAAQ,GAAG;AACb,gBAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,OAAO;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,QAAI,QAAQ,OAAW,sBAAqB,GAAG;AAC/C,QAAI,UAAU,OAAW,cAAa,KAAK;AAAA,EAC7C,CAAC;AAED,QAAM,cAAc,CAAC,UAAyC;AAC5D,QAAI,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,CAAC,OAAQ;AAChD,UAAM,SAAS,MAAM;AACrB,QAAI,OAAO,SAAS,MAAM,KAAM,MAAM,eAAsC,SAAS,MAAM,GAAG;AAC5F;AAAA,IACF;AACA,UAAM,QAAQ;AAAA,EAChB;AAEA,QAAM,QAAQ,OAA0B;AAAA,IACtC,GAAG,SAAS,eAAe;AAAA,IAC3B,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,IACpE,YAAY,WAAW,OAAO;AAAA,IAC9B,SAAS,MAAM,IAAI,IAAI;AAAA,EACzB;AAEA,SACE,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,MACrB,CAAC,kBAAkB,aAAa,aAAa;AAAA,QAC3C,CAAC,aAAa,MAAM,KAAK,UAAU,MAAM,KAAK,SAAS,aAAa,CAAC,OAAQ,SAAS,EAAG,GAAG,OAAO,MAAM,GAAG;AAAA,WACzG,MAAM,SAAS;AAAA,QAClB,EAFC,SAEU;AAAA,MACb,EAJC,kBAImB;AAAA,IACtB,EANC;AAQL;AAEA,IAAO,uBAAQ;","names":[],"file":"menuFloating.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuFloating.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, splitProps } from \"solid-js\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement, type ResolvedPlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { MenuList } from \"./menuList\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport function buildMenuFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[] {\n  return buildFloatingMiddleware(resolved, custom);\n}\n\nexport interface MenuFloatingProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  anchorElement?: Element | null | undefined;\n  isOpen?: boolean;\n  onClose?: () => void;\n  placement?: Placement;\n  middleware?: Middleware[] | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function MenuFloating(props: ParentProps<MenuFloatingProps>): JSX.Element {\n  const merged = mergeProps({ placement: \"bottom-start\" as Placement }, props);\n  const [local, rest] = splitProps(merged, [\n    \"anchorElement\",\n    \"isOpen\",\n    \"onClose\",\n    \"placement\",\n    \"middleware\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  let menuEl: HTMLElement | undefined;\n  const resolved = (): ResolvedPlacement => resolvePlacement(local.placement);\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildMenuFloatingMiddleware(resolved(), local.middleware),\n  });\n\n  createEffect(() => {\n    floating.setReference(local.anchorElement ?? null);\n  });\n\n  // mountOnEnter + unmountOnExit fade lifecycle (replaces RTG Transition).\n  const [mounted, setMounted] = createSignal(Boolean(local.isOpen));\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    const open = Boolean(local.isOpen);\n    if (open) {\n      if (timer !== undefined) {\n        clearTimeout(timer);\n        timer = undefined;\n      }\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) {\n        timer = setTimeout(() => setMounted(false), FADE_MS);\n      }\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\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  createEffect(() => {\n    const anchor = local.anchorElement;\n    const onClose = local.onClose;\n    if (!local.isOpen || !onClose || !anchor) return;\n    const onAnchorKeyDown = (event: Event): void => {\n      if ((event as KeyboardEvent).key === \"Escape\" && !event.defaultPrevented) {\n        event.preventDefault();\n        onClose();\n      }\n    };\n    anchor.addEventListener(\"keydown\", onAnchorKeyDown);\n    onCleanup(() => anchor.removeEventListener(\"keydown\", onAnchorKeyDown));\n  });\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  createEffect(\n    on(\n      () => Boolean(local.isOpen),\n      (open) => {\n        if (!open && menuEl?.contains(document.activeElement)) {\n          (local.anchorElement as HTMLElement | null | undefined)?.focus?.();\n        }\n      }\n    )\n  );\n\n  const onAwayClick = (event: MouseEvent | TouchEvent): void => {\n    if (!local.isOpen || !local.onClose || !menuEl) return;\n    const target = event.target as HTMLElement;\n    if (menuEl.contains(target) || (local.anchorElement as HTMLElement | null)?.contains(target)) {\n      return;\n    }\n    local.onClose();\n  };\n\n  // The caller's style over the position, the fade over the caller's style.\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(floating.floatingStyles(), local.style, {\n      transition: `opacity ${FADE_MS}ms ease-in-out`,\n      opacity: shown() ? 1 : 0,\n    });\n\n  return (\n    <Show when={mounted()}>\n      <ClickAwayListener onClickAway={onAwayClick}>\n        <MenuList {...rest} ref={mergeRefs(local.ref, floating.setFloating, (el) => (menuEl = el))} style={style()}>\n          {local.children}\n        </MenuList>\n      </ClickAwayListener>\n    </Show>\n  );\n}\n\nexport default MenuFloating;\n"],"mappings":"AAAA,SAAqC,MAAM,cAAc,cAAc,YAAY,IAAI,WAAW,kBAAkB;AAEpH,SAAS,yBAAyC,wBAAgD;AAClG,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AACpC,SAAS,kBAAkB;AAEpB,SAAS,4BAA4B,UAA6B,QAAqC;AAC5G,SAAO,wBAAwB,UAAU,MAAM;AACjD;AAWA,MAAM,UAAU;AAET,SAAS,aAAa,OAAoD;AAC/E,QAAM,SAAS,WAAW,EAAE,WAAW,eAA4B,GAAG,KAAK;AAC3E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACJ,QAAM,WAAW,MAAyB,iBAAiB,MAAM,SAAS;AAC1E,QAAM,WAAW,eAAe;AAAA,IAC9B,WAAW,MAAM,SAAS,EAAE;AAAA,IAC5B,YAAY,MAAM,4BAA4B,SAAS,GAAG,MAAM,UAAU;AAAA,EAC5E,CAAC;AAED,eAAa,MAAM;AACjB,aAAS,aAAa,MAAM,iBAAiB,IAAI;AAAA,EACnD,CAAC;AAGD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,QAAQ,MAAM,MAAM,CAAC;AAChE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,KAAK;AAC5C,MAAI;AACJ,MAAI;AAEJ,eAAa,MAAM;AACjB,UAAM,OAAO,QAAQ,MAAM,MAAM;AACjC,QAAI,MAAM;AACR,UAAI,UAAU,QAAW;AACvB,qBAAa,KAAK;AAClB,gBAAQ;AAAA,MACV;AACA,iBAAW,IAAI;AACf,YAAM,sBAAsB,MAAM,SAAS,IAAI,CAAC;AAAA,IAClD,OAAO;AACL,eAAS,KAAK;AACd,UAAI,QAAQ,GAAG;AACb,gBAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,OAAO;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,QAAI,QAAQ,OAAW,sBAAqB,GAAG;AAC/C,QAAI,UAAU,OAAW,cAAa,KAAK;AAAA,EAC7C,CAAC;AAID,eAAa,MAAM;AACjB,UAAM,SAAS,MAAM;AACrB,UAAM,UAAU,MAAM;AACtB,QAAI,CAAC,MAAM,UAAU,CAAC,WAAW,CAAC,OAAQ;AAC1C,UAAM,kBAAkB,CAAC,UAAuB;AAC9C,UAAK,MAAwB,QAAQ,YAAY,CAAC,MAAM,kBAAkB;AACxE,cAAM,eAAe;AACrB,gBAAQ;AAAA,MACV;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,eAAe;AAClD,cAAU,MAAM,OAAO,oBAAoB,WAAW,eAAe,CAAC;AAAA,EACxE,CAAC;AAMD;AAAA,IACE;AAAA,MACE,MAAM,QAAQ,MAAM,MAAM;AAAA,MAC1B,CAAC,SAAS;AACR,YAAI,CAAC,QAAQ,QAAQ,SAAS,SAAS,aAAa,GAAG;AACrD,UAAC,MAAM,eAAkD,QAAQ;AAAA,QACnE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,UAAyC;AAC5D,QAAI,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,CAAC,OAAQ;AAChD,UAAM,SAAS,MAAM;AACrB,QAAI,OAAO,SAAS,MAAM,KAAM,MAAM,eAAsC,SAAS,MAAM,GAAG;AAC5F;AAAA,IACF;AACA,UAAM,QAAQ;AAAA,EAChB;AAGA,QAAM,QAAQ,MACZ,WAAW,SAAS,eAAe,GAAG,MAAM,OAAO;AAAA,IACjD,YAAY,WAAW,OAAO;AAAA,IAC9B,SAAS,MAAM,IAAI,IAAI;AAAA,EACzB,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,MACrB,CAAC,kBAAkB,aAAa,aAAa;AAAA,QAC3C,CAAC,aAAa,MAAM,KAAK,UAAU,MAAM,KAAK,SAAS,aAAa,CAAC,OAAQ,SAAS,EAAG,GAAG,OAAO,MAAM,GAAG;AAAA,WACzG,MAAM,SAAS;AAAA,QAClB,EAFC,SAEU;AAAA,MACb,EAJC,kBAImB;AAAA,IACtB,EANC;AAQL;AAEA,IAAO,uBAAQ;","names":[],"file":"menuFloating.jsx"}

package/dist/headless/source/components/navigation/menu/menuItem.jsx

@@ -13,14 +13,27 @@ function MenuItem(props) {
     "disabled",
     "selected",
     "onClick",
+    "onKeyDown",
     "href",
     "linkElement",
     "linkProps",
     "value",
     "optionRenderer",
-    "ref"
+    "ref",
+    // The item sets these on its root too; its own handlers call the caller's.
+    "onMouseDown",
+    "onPointerDown"
   ]);
   let rippleActions;
+  const onKeyDown = (event) => {
+    callHandler(local.onKeyDown, event);
+    if (event.defaultPrevented || local.disabled || event.target !== event.currentTarget) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const link = local.href ? event.currentTarget.firstElementChild : null;
+      (link ?? event.currentTarget).click();
+    }
+  };
   const onClick = (event) => {
     if (local.disabled) {
       if (local.href) event.preventDefault();
@@ -28,7 +41,11 @@ function MenuItem(props) {
     }
     callHandler(local.onClick, event);
   };
+  const onMouseDown = (event) => {
+    if (!local.disabled) callHandler(local.onMouseDown, event);
+  };
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!local.disabled) rippleActions?.onRipple(event);
   };
   const classes = () => cn("smwb-menu__item", local.class, {
@@ -41,10 +58,13 @@ function MenuItem(props) {
     {...rest}
     role="menuitem"
     ref={mergeRefs(local.ref)}
+    aria-disabled={local.disabled || void 0}
     class={classes()}
-    tabindex={local.disabled ? void 0 : 0}
+    tabindex={rest.tabindex ?? (local.disabled ? void 0 : 0)}
     onClick={onClick}
+    onKeyDown={onKeyDown}
     data-value={local.value}
+    onMouseDown={onMouseDown}
     onPointerDown={onPointerDown}
   >
         <Show

package/dist/headless/source/components/navigation/menu/menuItem.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface MenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {\n  disabled?: boolean | undefined;\n  selected?: boolean | undefined;\n  href?: string | undefined;\n  linkElement?: string;\n  linkProps?: JSX.AnchorHTMLAttributes<HTMLAnchorElement>;\n  value?: unknown;\n  optionRenderer?: ((args: MenuItemProps) => JSX.Element) | undefined;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function MenuItem(props: ParentProps<MenuItemProps>): JSX.Element {\n  const ctx = useMenuContext();\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"disabled\",\n    \"selected\",\n    \"onClick\",\n    \"href\",\n    \"linkElement\",\n    \"linkProps\",\n    \"value\",\n    \"optionRenderer\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (local.disabled) {\n      if (local.href) event.preventDefault();\n      return;\n    }\n    callHandler(local.onClick, event);\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-menu__item\", local.class, {\n      \"smwb-menu__item--dense\": ctx.dense,\n      \"smwb-menu__item--disabled\": local.disabled,\n      \"smwb-menu__item--selected\": local.selected,\n    });\n\n  return (\n    <Show when={!local.optionRenderer} fallback={local.optionRenderer?.(props)}>\n      <li\n        {...rest}\n        role=\"menuitem\"\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        tabindex={local.disabled ? undefined : 0}\n        onClick={onClick}\n        data-value={local.value as string | number | undefined}\n        onPointerDown={onPointerDown}\n      >\n        <Show\n          when={local.href}\n          fallback={<span class=\"smwb-menu__item-inner\">{local.children}</span>}\n        >\n          <Dynamic component={local.linkElement ?? \"a\"} class=\"smwb-menu__item-inner\" href={local.href} {...(local.linkProps ?? {})}>\n            {local.children}\n            <span class=\"smwb-menu__item__helper-text\" />\n          </Dynamic>\n        </Show>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} />\n      </li>\n    </Show>\n  );\n}\n\nexport default MenuItem;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAcrB,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,UAAuD,CAAC,UAAU;AACtE,QAAI,MAAM,UAAU;AAClB,UAAI,MAAM,KAAM,OAAM,eAAe;AACrC;AAAA,IACF;AACA,gBAAY,MAAM,SAAS,KAAK;AAAA,EAClC;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAAU,MACd,GAAG,mBAAmB,MAAM,OAAO;AAAA,IACjC,0BAA0B,IAAI;AAAA,IAC9B,6BAA6B,MAAM;AAAA,IACnC,6BAA6B,MAAM;AAAA,EACrC,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,gBAAgB,UAAU,MAAM,iBAAiB,KAAK,GAAG;AAAA,MAC1E,CAAC;AAAA,QACK;AAAA,IACJ,KAAK;AAAA,IACL,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,QAAQ;AAAA,IACf,UAAU,MAAM,WAAW,SAAY;AAAA,IACvC,SAAS;AAAA,IACT,YAAY,MAAM;AAAA,IAClB,eAAe;AAAA,GAChB;AAAA,QACC,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UAAU,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD;AAAA,GACZ;AAAA,UACC,CAAC,QAAQ,WAAW,MAAM,eAAe,KAAK,MAAM,wBAAwB,MAAM,MAAM,UAAW,MAAM,aAAa,CAAC,GAAI;AAAA,aACxH,MAAM,SAAS;AAAA,YAChB,CAAC,KAAK,MAAM,+BAA+B,EAAE;AAAA,UAC/C,EAHC,QAGS;AAAA,QACZ,EARC,KAQM;AAAA,QACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,MAC/D,EApBC,GAoBI;AAAA,IACP,EAtBC;AAwBL;AAEA,IAAO,mBAAQ;","names":[],"file":"menuItem.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface MenuItemProps extends JSX.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 | undefined;\n  selected?: boolean | undefined;\n  href?: string | undefined;\n  linkElement?: string;\n  linkProps?: JSX.AnchorHTMLAttributes<HTMLAnchorElement>;\n  value?: unknown;\n  optionRenderer?: ((args: MenuItemProps) => JSX.Element) | undefined;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function MenuItem(props: ParentProps<MenuItemProps>): JSX.Element {\n  const ctx = useMenuContext();\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"disabled\",\n    \"selected\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"href\",\n    \"linkElement\",\n    \"linkProps\",\n    \"value\",\n    \"optionRenderer\",\n    \"ref\",\n    // The item sets these on its root too; its own handlers call the caller's.\n    \"onMouseDown\",\n    \"onPointerDown\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\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: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (event.defaultPrevented || local.disabled || event.target !== event.currentTarget) return;\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 = local.href ? event.currentTarget.firstElementChild : null;\n      ((link as HTMLElement | null) ?? event.currentTarget).click();\n    }\n  };\n\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (local.disabled) {\n      if (local.href) event.preventDefault();\n      return;\n    }\n    callHandler(local.onClick, event);\n  };\n\n  // Like a click, a press on a disabled item reaches no handler of the caller's.\n  const onMouseDown: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (!local.disabled) callHandler(local.onMouseDown, event);\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLLIElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-menu__item\", local.class, {\n      \"smwb-menu__item--dense\": ctx.dense,\n      \"smwb-menu__item--disabled\": local.disabled,\n      \"smwb-menu__item--selected\": local.selected,\n    });\n\n  return (\n    <Show when={!local.optionRenderer} fallback={local.optionRenderer?.(props)}>\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={mergeRefs(local.ref)}\n        aria-disabled={local.disabled || undefined}\n        class={classes()}\n        tabindex={rest.tabindex ?? (local.disabled ? undefined : 0)}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        data-value={local.value as string | number | undefined}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n      >\n        <Show\n          when={local.href}\n          fallback={<span class=\"smwb-menu__item-inner\">{local.children}</span>}\n        >\n          <Dynamic component={local.linkElement ?? \"a\"} class=\"smwb-menu__item-inner\" href={local.href} {...(local.linkProps ?? {})}>\n            {local.children}\n            <span class=\"smwb-menu__item__helper-text\" />\n          </Dynamic>\n        </Show>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} />\n      </li>\n    </Show>\n  );\n}\n\nexport default MenuItem;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAkBrB,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAMJ,QAAM,YAA4D,CAAC,UAAU;AAC3E,gBAAY,MAAM,WAAW,KAAK;AAClC,QAAI,MAAM,oBAAoB,MAAM,YAAY,MAAM,WAAW,MAAM,cAAe;AACtF,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAG9C,YAAM,eAAe;AACrB,YAAM,OAAO,MAAM,OAAO,MAAM,cAAc,oBAAoB;AAClE,OAAE,QAA+B,MAAM,eAAe,MAAM;AAAA,IAC9D;AAAA,EACF;AAEA,QAAM,UAAuD,CAAC,UAAU;AACtE,QAAI,MAAM,UAAU;AAClB,UAAI,MAAM,KAAM,OAAM,eAAe;AACrC;AAAA,IACF;AACA,gBAAY,MAAM,SAAS,KAAK;AAAA,EAClC;AAGA,QAAM,cAA2D,CAAC,UAAU;AAC1E,QAAI,CAAC,MAAM,SAAU,aAAY,MAAM,aAAa,KAAK;AAAA,EAC3D;AAEA,QAAM,gBAA+D,CAAC,UAAU;AAC9E,gBAAY,MAAM,eAAe,KAAK;AACtC,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAAU,MACd,GAAG,mBAAmB,MAAM,OAAO;AAAA,IACjC,0BAA0B,IAAI;AAAA,IAC9B,6BAA6B,MAAM;AAAA,IACnC,6BAA6B,MAAM;AAAA,EACrC,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,gBAAgB,UAAU,MAAM,iBAAiB,KAAK,GAAG;AAAA,MAC1E,CAAC;AAAA,QACK;AAAA,IAGJ,KAAK;AAAA,IACL,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,eAAe,MAAM,YAAY;AAAA,IACjC,OAAO,QAAQ;AAAA,IACf,UAAU,KAAK,aAAa,MAAM,WAAW,SAAY;AAAA,IACzD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY,MAAM;AAAA,IAClB,aAAa;AAAA,IACb,eAAe;AAAA,GAChB;AAAA,QACC,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UAAU,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD;AAAA,GACZ;AAAA,UACC,CAAC,QAAQ,WAAW,MAAM,eAAe,KAAK,MAAM,wBAAwB,MAAM,MAAM,UAAW,MAAM,aAAa,CAAC,GAAI;AAAA,aACxH,MAAM,SAAS;AAAA,YAChB,CAAC,KAAK,MAAM,+BAA+B,EAAE;AAAA,UAC/C,EAHC,QAGS;AAAA,QACZ,EARC,KAQM;AAAA,QACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,MAC/D,EAzBC,GAyBI;AAAA,IACP,EA3BC;AA6BL;AAEA,IAAO,mBAAQ;","names":[],"file":"menuItem.jsx"}

package/dist/headless/source/components/navigation/menu/menuList.jsx

@@ -2,12 +2,25 @@ import { splitProps } from "solid-js";
 import cn from "clsx";
 import { useMenuContext } from "./menuContext";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+const ENABLED_ITEM_SELECTOR = '[role="menuitem"]:not([aria-disabled="true"])';
 function MenuList(props) {
   const ctx = useMenuContext();
-  const [local, rest] = splitProps(props, ["children", "class", "ref"]);
+  const [local, rest] = splitProps(props, ["children", "class", "ref", "listRole"]);
   const onKeyDown = (event) => {
-    const items = Array.from(
-      event.currentTarget.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+    if (event.defaultPrevented) return;
+    if (event.key === "Escape") {
+      if (ctx.variant === "floating") event.preventDefault();
+      ctx.onClose();
+      return;
+    }
+    if (event.key === "ArrowLeft" && ctx.submenu) {
+      event.preventDefault();
+      ctx.onClose();
+      return;
+    }
+    const list = event.currentTarget;
+    const items = Array.from(list.querySelectorAll(ENABLED_ITEM_SELECTOR)).filter(
+      (item) => item.closest('[role="menu"]') === list
     );
     if (items.length === 0) return;
     const currentIndex = items.indexOf(document.activeElement);
@@ -23,15 +36,13 @@ function MenuList(props) {
     } else if (event.key === "End") {
       event.preventDefault();
       items[items.length - 1]?.focus();
-    } else if (event.key === "Escape") {
-      ctx.onClose();
     }
   };
   return <div {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-menu", local.class, `smwb-menu--${ctx.variant}`)}>
       <ul
     class={cn("smwb-menu__list", `smwb-menu__list--${ctx.variant}`)}
-    role="menu"
-    aria-orientation="vertical"
+    role={local.listRole ?? "menu"}
+    aria-orientation={(local.listRole ?? "menu") === "menu" ? "vertical" : void 0}
     onKeyDown={onKeyDown}
   >
         {local.children}
@@ -40,6 +51,7 @@ function MenuList(props) {
 }
 var menuList_default = MenuList;
 export {
+  ENABLED_ITEM_SELECTOR,
   MenuList,
   menuList_default as default
 };

package/dist/headless/source/components/navigation/menu/menuList.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface MenuListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MenuList(props: ParentProps<MenuListProps>): JSX.Element {\n  const ctx = useMenuContext();\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"ref\"]);\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    const items = Array.from(\n      event.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n    );\n    if (items.length === 0) return;\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      ctx.onClose();\n    }\n  };\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-menu\", local.class, `smwb-menu--${ctx.variant}`)}>\n      <ul\n        class={cn(\"smwb-menu__list\", `smwb-menu__list--${ctx.variant}`)}\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        onKeyDown={onKeyDown}\n      >\n        {local.children}\n      </ul>\n    </div>\n  );\n}\n\nexport default MenuList;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AAM7B,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,KAAK,CAAC;AAEpE,QAAM,YAA+D,CAAC,UAAU;AAC9E,UAAM,QAAQ,MAAM;AAAA,MAClB,MAAM,cAAc,iBAA8B,+CAA+C;AAAA,IACnG;AACA,QAAI,MAAM,WAAW,EAAG;AACxB,UAAM,eAAe,MAAM,QAAQ,SAAS,aAA4B;AAExE,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,aAAO,eAAe,IAAI,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,IACjE,WAAW,MAAM,QAAQ,WAAW;AAClC,YAAM,eAAe;AACrB,aAAO,eAAe,IAAI,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,IACjE,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAe;AACrB,YAAM,CAAC,GAAG,MAAM;AAAA,IAClB,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAe;AACrB,YAAM,MAAM,SAAS,CAAC,GAAG,MAAM;AAAA,IACjC,WAAW,MAAM,QAAQ,UAAU;AACjC,UAAI,QAAQ;AAAA,IACd;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,aAAa,MAAM,OAAO,cAAc,IAAI,OAAO,EAAE,GAAG;AAAA,MAC1G,CAAC;AAAA,IACC,OAAO,GAAG,mBAAmB,oBAAoB,IAAI,OAAO,EAAE;AAAA,IAC9D,KAAK;AAAA,IACL,iBAAiB;AAAA,IACjB,WAAW;AAAA,GACZ;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EAPC,GAOI;AAAA,IACP,EATC;AAWL;AAEA,IAAO,mBAAQ;","names":[],"file":"menuList.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { useMenuContext } from \"./menuContext\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\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 interface MenuListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  /** Role of the inner list, `menu` by default (see `MenuProps`). */\n  listRole?: JSX.AriaAttributes[\"role\"] | undefined;\n}\n\nexport function MenuList(props: ParentProps<MenuListProps>): JSX.Element {\n  const ctx = useMenuContext();\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"ref\", \"listRole\"]);\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    // Handled inside already, e.g. by a submenu's own list: not this list's key.\n    if (event.defaultPrevented) return;\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 (ctx.variant === \"floating\") event.preventDefault();\n      ctx.onClose();\n      return;\n    }\n    if (event.key === \"ArrowLeft\" && ctx.submenu) {\n      // A submenu closes and gives focus back to its row (MenuFloating does that).\n      event.preventDefault();\n      ctx.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) return;\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  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-menu\", local.class, `smwb-menu--${ctx.variant}`)}>\n      <ul\n        class={cn(\"smwb-menu__list\", `smwb-menu__list--${ctx.variant}`)}\n        role={local.listRole ?? \"menu\"}\n        // ARIA allows an orientation on a menu, not on a presentation list.\n        aria-orientation={(local.listRole ?? \"menu\") === \"menu\" ? \"vertical\" : undefined}\n        onKeyDown={onKeyDown}\n      >\n        {local.children}\n      </ul>\n    </div>\n  );\n}\n\nexport default MenuList;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AAG7B,MAAM,wBAAwB;AAQ9B,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,UAAU,CAAC;AAEhF,QAAM,YAA+D,CAAC,UAAU;AAE9E,QAAI,MAAM,iBAAkB;AAC5B,QAAI,MAAM,QAAQ,UAAU;AAI1B,UAAI,IAAI,YAAY,WAAY,OAAM,eAAe;AACrD,UAAI,QAAQ;AACZ;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,eAAe,IAAI,SAAS;AAE5C,YAAM,eAAe;AACrB,UAAI,QAAQ;AACZ;AAAA,IACF;AAEA,UAAM,OAAO,MAAM;AACnB,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,qBAAqB,CAAC,EAAE;AAAA,MAClF,CAAC,SAAS,KAAK,QAAQ,eAAe,MAAM;AAAA,IAC9C;AACA,QAAI,MAAM,WAAW,EAAG;AACxB,UAAM,eAAe,MAAM,QAAQ,SAAS,aAA4B;AAExE,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,aAAO,eAAe,IAAI,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,IACjE,WAAW,MAAM,QAAQ,WAAW;AAClC,YAAM,eAAe;AACrB,aAAO,eAAe,IAAI,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,IACjE,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAe;AACrB,YAAM,CAAC,GAAG,MAAM;AAAA,IAClB,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAe;AACrB,YAAM,MAAM,SAAS,CAAC,GAAG,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,aAAa,MAAM,OAAO,cAAc,IAAI,OAAO,EAAE,GAAG;AAAA,MAC1G,CAAC;AAAA,IACC,OAAO,GAAG,mBAAmB,oBAAoB,IAAI,OAAO,EAAE;AAAA,IAC9D,MAAM,MAAM,YAAY;AAAA,IAExB,mBAAmB,MAAM,YAAY,YAAY,SAAS,aAAa;AAAA,IACvE,WAAW;AAAA,GACZ;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EARC,GAQI;AAAA,IACP,EAVC;AAYL;AAEA,IAAO,mBAAQ;","names":[],"file":"menuList.jsx"}

package/dist/headless/source/components/navigation/menu/menuSubmenu.jsx

@@ -2,12 +2,24 @@ import { createSignal, splitProps } from "solid-js";
 import { offset } from "@floating-ui/dom";
 import cn from "clsx";
 import { MenuContext, useMenuContext } from "./menuContext";
+import { ENABLED_ITEM_SELECTOR } from "./menuList";
 import { MenuFloating } from "./menuFloating";
+import { Ripple } from "../../base/ripple";
+import { callHandler } from "../../../primitives/callHandler";
 function MenuSubmenu(props) {
   const parentCtx = useMenuContext();
-  const [local] = splitProps(props, ["placement", "onClose", "toggleElement", "children", "openOnHover", "class"]);
+  const [local, rest] = splitProps(props, [
+    "placement",
+    "onClose",
+    "toggleElement",
+    "children",
+    "openOnHover",
+    "onClick",
+    "ref"
+  ]);
   const [isOpen, setIsOpen] = createSignal(false);
   const [anchor, setAnchor] = createSignal(null);
+  let rippleActions;
   const middleware = [
     offset(({ placement }) => {
       switch (placement) {
@@ -26,19 +38,31 @@ function MenuSubmenu(props) {
     if (event.button !== 0) return;
     setIsOpen((prev) => !prev);
   };
+  const onTogglePointerDown = (event) => {
+    rippleActions?.onRipple(event);
+  };
   const close = () => {
     setIsOpen(false);
     local.onClose?.();
   };
+  const focusFirstItem = () => {
+    anchor()?.nextElementSibling?.querySelector(ENABLED_ITEM_SELECTOR)?.focus();
+  };
   const onToggleKeyDown = (event) => {
     if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       setIsOpen(true);
+      focusFirstItem();
     } else if (event.key === "ArrowLeft" || event.key === "Escape") {
+      if (isOpen()) event.preventDefault();
       setIsOpen(false);
     }
   };
+  const onToggleMouseEnter = () => {
+    if (local.openOnHover) setIsOpen(true);
+  };
   const onContentClick = (event) => {
+    callHandler(local.onClick, event);
     const item = event.target.closest('[role="menuitem"]');
     if (item && !item.hasAttribute("aria-haspopup")) {
       close();
@@ -50,23 +74,31 @@ function MenuSubmenu(props) {
       return parentCtx.dense;
     },
     variant: "floating",
-    onClose: close
+    onClose: close,
+    submenu: true
   };
   return <MenuContext.Provider value={value}>
       <li
     role="menuitem"
     ref={setAnchor}
-    class={cn("smwb-menu__item", local.class, { "smwb-menu__item--selected": isOpen() })}
+    class={cn("smwb-menu__item", {
+      "smwb-menu__item--dense": parentCtx.dense,
+      "smwb-menu__item--selected": isOpen()
+    })}
     tabindex={0}
     aria-haspopup="menu"
     aria-expanded={isOpen()}
     onClick={onToggle}
+    onPointerDown={onTogglePointerDown}
     onKeyDown={onToggleKeyDown}
-    onMouseEnter={local.openOnHover ? () => setIsOpen(true) : void 0}
+    onMouseEnter={onToggleMouseEnter}
   >
         <span class="smwb-menu__item-inner">{local.toggleElement}</span>
+        <Ripple actionRef={(actions) => rippleActions = actions} />
       </li>
       <MenuFloating
+    {...rest}
+    ref={local.ref}
     placement={local.placement ?? "right-start"}
     isOpen={isOpen()}
     onClose={close}

package/dist/headless/source/components/navigation/menu/menuSubmenu.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuSubmenu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, createSignal, splitProps } from \"solid-js\";\nimport { type Middleware, offset } from \"@floating-ui/dom\";\nimport cn from \"clsx\";\nimport { MenuContext, useMenuContext } from \"./menuContext\";\nimport { MenuFloating } from \"./menuFloating\";\nimport type { Placement } from \"../../../utils/floating\";\n\nexport interface MenuSubmenuProps {\n  placement?: Placement;\n  onClose?: () => void;\n  /** Content of the toggle row (e.g. an icon + <MenuItemText/>). */\n  toggleElement?: JSX.Element;\n  /** Items and/or nested `MenuSubmenu` elements (multi-level supported). */\n  children: JSX.Element;\n  /** Open the submenu on pointer hover in addition to click. */\n  openOnHover?: boolean;\n  class?: string;\n}\n\n/**\n * Solid redesign of MenuSubmenu. React injected props into a cloned toggle and\n * cloned each child's onClick; Solid renders its own toggle row and closes the\n * menu chain via click delegation on the floating content (leaf menuitems close,\n * nested submenu toggles — which carry `aria-haspopup` — do not).\n */\nexport function MenuSubmenu(props: ParentProps<MenuSubmenuProps>): JSX.Element {\n  const parentCtx = useMenuContext();\n  const [local] = splitProps(props, [\"placement\", \"onClose\", \"toggleElement\", \"children\", \"openOnHover\", \"class\"]);\n  const [isOpen, setIsOpen] = createSignal(false);\n  const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);\n\n  const middleware: 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: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (event.button !== 0) return;\n    setIsOpen((prev) => !prev);\n  };\n\n  const close = (): void => {\n    setIsOpen(false);\n    local.onClose?.();\n  };\n\n  const onToggleKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\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 onContentClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    const item = (event.target as HTMLElement).closest('[role=\"menuitem\"]');\n    if (item && !item.hasAttribute(\"aria-haspopup\")) {\n      close();\n      parentCtx.onClose();\n    }\n  };\n\n  const value = {\n    get dense() {\n      return parentCtx.dense;\n    },\n    variant: \"floating\" as const,\n    onClose: close,\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <li\n        role=\"menuitem\"\n        ref={setAnchor}\n        class={cn(\"smwb-menu__item\", local.class, { \"smwb-menu__item--selected\": isOpen() })}\n        tabindex={0}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen()}\n        onClick={onToggle}\n        onKeyDown={onToggleKeyDown}\n        onMouseEnter={local.openOnHover ? () => setIsOpen(true) : undefined}\n      >\n        <span class=\"smwb-menu__item-inner\">{local.toggleElement}</span>\n      </li>\n      <MenuFloating\n        placement={local.placement ?? \"right-start\"}\n        isOpen={isOpen()}\n        onClose={close}\n        anchorElement={anchor()}\n        middleware={middleware}\n        onClick={onContentClick}\n      >\n        {local.children}\n      </MenuFloating>\n    </MenuContext.Provider>\n  );\n}\n\nexport default MenuSubmenu;\n"],"mappings":"AAAA,SAAqC,cAAc,kBAAkB;AACrE,SAA0B,cAAc;AACxC,OAAO,QAAQ;AACf,SAAS,aAAa,sBAAsB;AAC5C,SAAS,oBAAoB;AAqBtB,SAAS,YAAY,OAAmD;AAC7E,QAAM,YAAY,eAAe;AACjC,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO,CAAC,aAAa,WAAW,iBAAiB,YAAY,eAAe,OAAO,CAAC;AAC/G,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAiC,IAAI;AAEjE,QAAM,aAA2B;AAAA,IAC/B,OAAO,CAAC,EAAE,UAAU,MAAM;AACxB,cAAQ,WAAW;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,EAAE,WAAW,IAAI,UAAU,EAAE;AAAA,QACtC,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,EAAE,WAAW,GAAG,UAAU,EAAE;AAAA,QACrC;AACE,iBAAO,EAAE,WAAW,GAAG,UAAU,EAAE;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,WAAwD,CAAC,UAAU;AACvE,QAAI,MAAM,WAAW,EAAG;AACxB,cAAU,CAAC,SAAS,CAAC,IAAI;AAAA,EAC3B;AAEA,QAAM,QAAQ,MAAY;AACxB,cAAU,KAAK;AACf,UAAM,UAAU;AAAA,EAClB;AAEA,QAAM,kBAAkE,CAAC,UAAU;AACjF,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC5E,YAAM,eAAe;AACrB,gBAAU,IAAI;AAAA,IAChB,WAAW,MAAM,QAAQ,eAAe,MAAM,QAAQ,UAAU;AAC9D,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,iBAA+D,CAAC,UAAU;AAC9E,UAAM,OAAQ,MAAM,OAAuB,QAAQ,mBAAmB;AACtE,QAAI,QAAQ,CAAC,KAAK,aAAa,eAAe,GAAG;AAC/C,YAAM;AACN,gBAAU,QAAQ;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,QAAQ;AAAA,IACZ,IAAI,QAAQ;AACV,aAAO,UAAU;AAAA,IACnB;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAEA,SACE,CAAC,YAAY,SAAS,OAAO,OAAO;AAAA,MAClC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,KAAK;AAAA,IACL,OAAO,GAAG,mBAAmB,MAAM,OAAO,EAAE,6BAA6B,OAAO,EAAE,CAAC;AAAA,IACnF,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe,OAAO;AAAA,IACtB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAc,MAAM,cAAc,MAAM,UAAU,IAAI,IAAI;AAAA,GAC3D;AAAA,QACC,CAAC,KAAK,MAAM,yBAAyB,MAAM,cAAc,EAAxD,KAA+D;AAAA,MAClE,EAZC,GAYI;AAAA,MACL,CAAC;AAAA,IACC,WAAW,MAAM,aAAa;AAAA,IAC9B,QAAQ,OAAO;AAAA,IACf,SAAS;AAAA,IACT,eAAe,OAAO;AAAA,IACtB,YAAY;AAAA,IACZ,SAAS;AAAA,GACV;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EATC,aASc;AAAA,IACjB,EAxBC,YAAY;AA0BjB;AAEA,IAAO,sBAAQ;","names":[],"file":"menuSubmenu.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/menu/menuSubmenu.tsx"],"sourcesContent":["import { type JSX, type ParentProps, createSignal, splitProps } from \"solid-js\";\nimport { type Middleware, offset } from \"@floating-ui/dom\";\nimport cn from \"clsx\";\nimport { MenuContext, useMenuContext } from \"./menuContext\";\nimport { ENABLED_ITEM_SELECTOR } from \"./menuList\";\nimport { MenuFloating } from \"./menuFloating\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport type { Placement } from \"../../../utils/floating\";\nimport type { Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface MenuSubmenuProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  placement?: Placement;\n  onClose?: () => void;\n  /** Content of the toggle row (e.g. an icon + <MenuItemText/>). */\n  toggleElement?: JSX.Element;\n  /** Items and/or nested `MenuSubmenu` elements (multi-level supported). */\n  children: JSX.Element;\n  /** Open the submenu on pointer hover in addition to click. */\n  openOnHover?: boolean;\n  /**\n   * Class of the floating panel that holds the items, as in React. The other HTML\n   * attributes and `style` go to the panel too; the toggle row takes none of them.\n   */\n  class?: string;\n  /** Gets the floating panel that holds the items, while it is open. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Solid redesign of MenuSubmenu. React injected props into a cloned toggle and\n * cloned each child's onClick; Solid renders its own toggle row and closes the\n * menu chain via click delegation on the floating content (leaf menuitems close,\n * nested submenu toggles — which carry `aria-haspopup` — do not).\n */\nexport function MenuSubmenu(props: ParentProps<MenuSubmenuProps>): JSX.Element {\n  const parentCtx = useMenuContext();\n  const [local, rest] = splitProps(props, [\n    \"placement\",\n    \"onClose\",\n    \"toggleElement\",\n    \"children\",\n    \"openOnHover\",\n    \"onClick\",\n    \"ref\",\n  ]);\n  const [isOpen, setIsOpen] = createSignal(false);\n  const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);\n  let rippleActions: RippleActionsRef | undefined;\n\n  const middleware: 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: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (event.button !== 0) return;\n    setIsOpen((prev) => !prev);\n  };\n\n  // The toggle row ripples like MenuItem's rows: on pointerdown, so touch and\n  // pen get it too.\n  const onTogglePointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const close = (): void => {\n    setIsOpen(false);\n    local.onClose?.();\n  };\n\n  // A keyboard open hands focus to the submenu's first item. Solid draws the list as soon\n  // as isOpen is set, as the element right after the row (MenuFloating adds no wrapper).\n  const focusFirstItem = (): void => {\n    anchor()?.nextElementSibling?.querySelector<HTMLElement>(ENABLED_ITEM_SELECTOR)?.focus();\n  };\n\n  const onToggleKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    if (event.key === \"ArrowRight\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setIsOpen(true);\n      focusFirstItem();\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()) event.preventDefault();\n      setIsOpen(false);\n    }\n  };\n\n  // Always attached and checks `openOnHover` itself. Solid binds event handlers\n  // once, and the context provider builds the toggle in a tracked scope, so\n  // choosing the handler by that prop there would rebuild the toggle whenever\n  // it changes.\n  const onToggleMouseEnter = (): void => {\n    if (local.openOnHover) setIsOpen(true);\n  };\n\n  const onContentClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    // The caller's onClick on the panel runs first.\n    callHandler(local.onClick, event);\n    const item = (event.target as HTMLElement).closest('[role=\"menuitem\"]');\n    if (item && !item.hasAttribute(\"aria-haspopup\")) {\n      close();\n      parentCtx.onClose();\n    }\n  };\n\n  const value = {\n    get dense() {\n      return parentCtx.dense;\n    },\n    variant: \"floating\" as const,\n    onClose: close,\n    submenu: true,\n  };\n\n  return (\n    <MenuContext.Provider value={value}>\n      <li\n        role=\"menuitem\"\n        ref={setAnchor}\n        class={cn(\"smwb-menu__item\", {\n          \"smwb-menu__item--dense\": parentCtx.dense,\n          \"smwb-menu__item--selected\": isOpen(),\n        })}\n        tabindex={0}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen()}\n        onClick={onToggle}\n        onPointerDown={onTogglePointerDown}\n        onKeyDown={onToggleKeyDown}\n        onMouseEnter={onToggleMouseEnter}\n      >\n        <span class=\"smwb-menu__item-inner\">{local.toggleElement}</span>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} />\n      </li>\n      <MenuFloating\n        {...rest}\n        ref={local.ref}\n        placement={local.placement ?? \"right-start\"}\n        isOpen={isOpen()}\n        onClose={close}\n        anchorElement={anchor()}\n        middleware={middleware}\n        onClick={onContentClick}\n      >\n        {local.children}\n      </MenuFloating>\n    </MenuContext.Provider>\n  );\n}\n\nexport default MenuSubmenu;\n"],"mappings":"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","names":[],"file":"menuSubmenu.jsx"}

package/dist/headless/source/components/navigation/pagination/pagination.jsx

@@ -55,7 +55,8 @@ function Pagination(props) {
     "hidePrevButton",
     "hideNextButton",
     "onChange",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   let navEl;
   const go = (target) => {
@@ -94,8 +95,8 @@ function Pagination(props) {
   return <nav
     {...rest}
     ref={mergeRefs(local.ref, (el) => navEl = el)}
-    data-testid="pagination"
-    aria-label="pagination"
+    data-testid={local["data-testid"] ?? "pagination"}
+    aria-label={rest["aria-label"] ?? "pagination"}
     class={cn(
       "smwb-pagination",
       `smwb-pagination_${local.size}`,