@salt-ds/lab 1.0.0-alpha.90 → 1.0.0-alpha.92

package/dist-cjs/mega-menu/MegaMenuPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuPanel.js","sources":["../src/mega-menu/MegaMenuPanel.tsx"],"sourcesContent":["import { flip, limitShift, offset, shift, size } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useState,\n} from \"react\";\nimport megaMenuPanelCss from \"./MegaMenuPanel.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuPanel\");\n\nexport interface MegaMenuPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of the mega menu panel.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuPanel = forwardRef<HTMLDivElement, MegaMenuPanelProps>(\n  function MegaMenuPanel({ children, className, id: idProp, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-panel\",\n      css: megaMenuPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n    const {\n      openState: isOpen,\n      floatingRootContext,\n      placement,\n      getFloatingProps,\n      setFloating,\n      focusFirstItemOnOpen,\n      setPanelId,\n    } = useMegaMenu();\n\n    const id = useId(idProp);\n\n    // Register the panel id in context so the trigger can reference it via aria-controls.\n    useEffect(() => {\n      setPanelId(id);\n      return () => setPanelId(undefined);\n    }, [id, setPanelId]);\n\n    // Resolve the panel's page-margin to a pixel value to override the margin as required.\n    const [pageMargin, setPageMargin] = useState(0);\n    useEffect(() => {\n      if (!targetWindow) return;\n      const referenceEl = floatingRootContext.elements.domReference as\n        | HTMLElement\n        | null\n        | undefined;\n      const host = referenceEl ?? targetWindow.document.body;\n      const doc = targetWindow.document;\n      const measure = () => {\n        const probe = doc.createElement(\"div\");\n        probe.style.cssText =\n          \"position:absolute;visibility:hidden;pointer-events:none;width:var(--saltMegaMenuPanel-pageMargin, var(--salt-layout-page-margin));\";\n        host.appendChild(probe);\n        const width = probe.getBoundingClientRect().width;\n        probe.remove();\n        setPageMargin((prev) => (prev === width ? prev : width));\n      };\n      measure();\n      targetWindow.addEventListener(\"resize\", measure);\n      return () => targetWindow.removeEventListener(\"resize\", measure);\n    }, [targetWindow, floatingRootContext]);\n\n    const floatingUIResult = useFloatingUI({\n      rootContext: floatingRootContext,\n      placement,\n      middleware: [\n        offset(1),\n        flip({ padding: pageMargin }),\n        shift({ padding: pageMargin, limiter: limitShift() }),\n        size({\n          padding: pageMargin,\n          apply({ availableWidth, elements }) {\n            elements.floating.style.setProperty(\n              \"--saltMegaMenuPanel-availableWidth\",\n              `${availableWidth}px`,\n            );\n          },\n        }),\n      ],\n    });\n\n    const floatingProps = getFloatingProps();\n\n    return (\n      <FloatingComponent\n        open={isOpen}\n        position={floatingUIResult.strategy}\n        top={floatingUIResult.y ?? 0}\n        left={floatingUIResult.x ?? 0}\n        focusManagerProps={{\n          context: floatingUIResult.context,\n          modal: false,\n          initialFocus: focusFirstItemOnOpen ? 0 : -1,\n          returnFocus: true,\n          closeOnFocusOut: false,\n          guards: false,\n        }}\n        ref={setFloating}\n      >\n        <div\n          className={clsx(withBaseName(), className)}\n          id={id}\n          role=\"region\"\n          ref={ref}\n          {...floatingProps}\n          {...rest}\n        >\n          {children}\n        </div>\n      </FloatingComponent>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuPanel","useWindow","useComponentCssInjection","megaMenuPanelCss","useFloatingComponent","useMegaMenu","useId","useEffect","useState","useFloatingUI","offset","flip","shift","limitShift","size","jsx","clsx"],"mappings":"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"}

package/dist-cjs/mega-menu/MegaMenuSection.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltMegaMenuSection {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuSection-columnWidth, 12rem));\n  gap: var(--salt-spacing-300);\n  padding: var(--salt-spacing-300);\n  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MegaMenuSection.css.js.map

package/dist-cjs/mega-menu/MegaMenuSection.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuSection.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/mega-menu/MegaMenuSection.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var MegaMenuSection$1 = require('./MegaMenuSection.css.js');
+
+const withBaseName = core.makePrefixer("saltMegaMenuSection");
+const MegaMenuSection = react.forwardRef(
+  function MegaMenuSection2({ children, className, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-mega-menu-section",
+      css: MegaMenuSection$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children });
+  }
+);
+
+exports.MegaMenuSection = MegaMenuSection;
+//# sourceMappingURL=MegaMenuSection.js.map

package/dist-cjs/mega-menu/MegaMenuSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuSection.js","sources":["../src/mega-menu/MegaMenuSection.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport megaMenuSectionCss from \"./MegaMenuSection.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuSection\");\n\nexport interface MegaMenuSectionProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of the mega menu section.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuSection = forwardRef<HTMLDivElement, MegaMenuSectionProps>(\n  function MegaMenuSection({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-section\",\n      css: megaMenuSectionCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuSection","useWindow","useComponentCssInjection","megaMenuSectionCss","jsx","clsx"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAShD,MAAM,eAAA,GAAkBC,gBAAA;AAAA,EAC7B,SAASC,iBAAgB,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC9D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,iBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/mega-menu/MegaMenuTrigger.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var useMegaMenu = require('./useMegaMenu.js');
+var useMegaMenuKeyboard = require('./useMegaMenuKeyboard.js');
+
+function getAdjacentTrigger(currentTarget, direction) {
+  const li = currentTarget.closest("li");
+  if (!li) return null;
+  const sibling = direction === "next" ? li.nextElementSibling : li.previousElementSibling;
+  if (!(sibling instanceof HTMLElement)) return null;
+  return sibling.querySelector(useMegaMenuKeyboard.FOCUSABLE_SELECTOR);
+}
+const MegaMenuTrigger = react.forwardRef(
+  function MegaMenuTrigger2(props, ref) {
+    const { children, ...rest } = props;
+    const megaMenu = useMegaMenu.useMegaMenu();
+    const {
+      getReferenceProps,
+      setReference,
+      setOpen,
+      openState,
+      setFocusFirstItemOnOpen,
+      floatingRootContext,
+      panelId
+    } = megaMenu;
+    const handleKeyDown = react.useCallback(
+      (event) => {
+        const { key, shiftKey } = event;
+        if (key === "ArrowRight" || key === "ArrowLeft") {
+          event.preventDefault();
+          const direction = key === "ArrowRight" ? "next" : "previous";
+          const adjacent = getAdjacentTrigger(event.currentTarget, direction);
+          if (adjacent) {
+            if (openState) setOpen(false);
+            setFocusFirstItemOnOpen(false);
+            adjacent.focus();
+          }
+          return;
+        }
+        if (openState && (key === "ArrowDown" || key === "Tab" && !shiftKey)) {
+          event.preventDefault();
+          const floating = floatingRootContext.elements.floating;
+          if (floating) useMegaMenuKeyboard.focusFirstItem(floating);
+          return;
+        }
+        if (!openState && key === "ArrowDown") {
+          event.preventDefault();
+          setFocusFirstItemOnOpen(true);
+          setOpen(true);
+          return;
+        }
+      },
+      [
+        openState,
+        setOpen,
+        setFocusFirstItemOnOpen,
+        floatingRootContext.elements.floating
+      ]
+    );
+    const handleFloatingRef = core.useForkRef(
+      core.getRefFromChildren(children),
+      setReference
+    );
+    const handleRef = core.useForkRef(handleFloatingRef, ref);
+    if (!children || !react.isValidElement(children)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+    }
+    const childProps = children.props;
+    const isNavigationItemChild = children.type === core.NavigationItem;
+    const shouldSyncExpanded = isNavigationItemChild || childProps.expanded !== void 0;
+    return react.cloneElement(children, {
+      ...core.mergeProps(
+        getReferenceProps({
+          // For NavigationItem, sync via the `expanded` prop (which maps to aria-expanded internally).
+          // For all other elements, set aria-expanded directly.
+          ...shouldSyncExpanded ? { expanded: openState } : { "aria-expanded": openState },
+          ...panelId && openState ? { "aria-controls": panelId } : null,
+          onKeyDown: handleKeyDown,
+          ...rest
+        }),
+        children.props
+      ),
+      ref: handleRef
+    });
+  }
+);
+
+exports.MegaMenuTrigger = MegaMenuTrigger;
+//# sourceMappingURL=MegaMenuTrigger.js.map

package/dist-cjs/mega-menu/MegaMenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuTrigger.js","sources":["../src/mega-menu/MegaMenuTrigger.tsx"],"sourcesContent":["import {\n  getRefFromChildren,\n  mergeProps,\n  NavigationItem,\n  useForkRef,\n} from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  useCallback,\n} from \"react\";\nimport { useMegaMenu } from \"./useMegaMenu\";\nimport { FOCUSABLE_SELECTOR, focusFirstItem } from \"./useMegaMenuKeyboard\";\n\nexport interface MegaMenuTriggerProps {\n  /**\n   * The trigger element for the mega menu, typically a `NavigationItem` or `Button`.\n   */\n  children?: ReactNode;\n}\n\nfunction getAdjacentTrigger(\n  currentTarget: HTMLElement,\n  direction: \"next\" | \"previous\",\n): HTMLElement | null {\n  const li = currentTarget.closest(\"li\");\n  if (!li) return null;\n  const sibling =\n    direction === \"next\" ? li.nextElementSibling : li.previousElementSibling;\n  if (!(sibling instanceof HTMLElement)) return null;\n  return sibling.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n}\n\nexport const MegaMenuTrigger = forwardRef<HTMLElement, MegaMenuTriggerProps>(\n  function MegaMenuTrigger(props, ref) {\n    const { children, ...rest } = props;\n    const megaMenu = useMegaMenu();\n\n    const {\n      getReferenceProps,\n      setReference,\n      setOpen,\n      openState,\n      setFocusFirstItemOnOpen,\n      floatingRootContext,\n      panelId,\n    } = megaMenu;\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLElement>) => {\n        const { key, shiftKey } = event;\n\n        // ArrowLeft/Right: move to adjacent trigger in nav bar\n        if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n          event.preventDefault();\n          const direction = key === \"ArrowRight\" ? \"next\" : \"previous\";\n          const adjacent = getAdjacentTrigger(event.currentTarget, direction);\n          if (adjacent) {\n            if (openState) setOpen(false);\n            setFocusFirstItemOnOpen(false);\n            adjacent.focus();\n          }\n          return;\n        }\n\n        // When menu is open: ArrowDown or Tab moves focus into the menu\n        if (\n          openState &&\n          (key === \"ArrowDown\" || (key === \"Tab\" && !shiftKey))\n        ) {\n          event.preventDefault();\n          const floating = floatingRootContext.elements\n            .floating as HTMLElement | null;\n          if (floating) focusFirstItem(floating);\n          return;\n        }\n\n        // When menu is closed: ArrowDown opens and focuses first item\n        if (!openState && key === \"ArrowDown\") {\n          event.preventDefault();\n          setFocusFirstItemOnOpen(true);\n          setOpen(true);\n          return;\n        }\n      },\n      [\n        openState,\n        setOpen,\n        setFocusFirstItemOnOpen,\n        floatingRootContext.elements.floating,\n      ],\n    );\n\n    const handleFloatingRef = useForkRef(\n      getRefFromChildren(children),\n      setReference,\n    );\n    const handleRef = useForkRef(handleFloatingRef, ref);\n\n    if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n      return <>{children}</>;\n    }\n\n    const childProps = children.props as Record<string, unknown>;\n    const isNavigationItemChild = children.type === NavigationItem;\n    const shouldSyncExpanded =\n      isNavigationItemChild || childProps.expanded !== undefined;\n\n    return cloneElement(children, {\n      ...mergeProps(\n        getReferenceProps({\n          // For NavigationItem, sync via the `expanded` prop (which maps to aria-expanded internally).\n          // For all other elements, set aria-expanded directly.\n          ...(shouldSyncExpanded\n            ? { expanded: openState }\n            : { \"aria-expanded\": openState }),\n          ...(panelId && openState ? { \"aria-controls\": panelId } : null),\n          onKeyDown: handleKeyDown,\n          ...rest,\n        }),\n        children.props,\n      ),\n      ref: handleRef,\n    });\n  },\n);\n"],"names":["FOCUSABLE_SELECTOR","forwardRef","MegaMenuTrigger","useMegaMenu","useCallback","useForkRef","getRefFromChildren","isValidElement","NavigationItem","cloneElement","mergeProps"],"mappings":"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"}

package/dist-cjs/mega-menu/useMegaMenu.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var react = require('react');
+var MegaMenuContext = require('./MegaMenuContext.js');
+
+function useMegaMenu() {
+  const context = react.useContext(MegaMenuContext.MegaMenuContext);
+  if (context === void 0) {
+    throw new Error("useMegaMenu must be used within a MegaMenu");
+  }
+  return context;
+}
+
+exports.useMegaMenu = useMegaMenu;
+//# sourceMappingURL=useMegaMenu.js.map

package/dist-cjs/mega-menu/useMegaMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMegaMenu.js","sources":["../src/mega-menu/useMegaMenu.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { MegaMenuContext, type MegaMenuContextValue } from \"./MegaMenuContext\";\n/**\n * Access the nearest MegaMenu context.\n * Must be used within a `MegaMenu` provider.\n */\nexport function useMegaMenu(): MegaMenuContextValue {\n  const context = useContext(MegaMenuContext);\n  if (context === undefined) {\n    throw new Error(\"useMegaMenu must be used within a MegaMenu\");\n  }\n  return context;\n}\n"],"names":["useContext","MegaMenuContext"],"mappings":";;;;;AAMO,SAAS,WAAA,GAAoC;AAClD,EAAA,MAAM,OAAA,GAAUA,iBAAWC,+BAAe,CAAA;AAC1C,EAAA,IAAI,YAAY,MAAA,EAAW;AACzB,IAAA,MAAM,IAAI,MAAM,4CAA4C,CAAA;AAAA,EAC9D;AACA,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist-cjs/mega-menu/useMegaMenuKeyboard.js

@@ -0,0 +1,209 @@
+'use strict';
+
+var react = require('react');
+
+const COLUMN_SELECTOR = "[data-mega-menu-column]";
+const ITEM_SELECTOR = "[data-mega-menu-item]";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getColumnItems(column) {
+  const marked = Array.from(
+    column.querySelectorAll(ITEM_SELECTOR)
+  );
+  if (marked.length > 0) return marked;
+  return Array.from(column.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function buildGrid(panel) {
+  const columns = new Set(panel.querySelectorAll(COLUMN_SELECTOR));
+  const grid = [];
+  const processedColumns = /* @__PURE__ */ new Set();
+  const all = panel.querySelectorAll(
+    `${COLUMN_SELECTOR}, ${ITEM_SELECTOR}`
+  );
+  for (const el of all) {
+    if (columns.has(el) && !processedColumns.has(el)) {
+      processedColumns.add(el);
+      const items = getColumnItems(el);
+      if (items.length > 0) grid.push(items);
+    } else if (el.matches(ITEM_SELECTOR)) {
+      const parentCol = el.closest(COLUMN_SELECTOR);
+      if (!parentCol || !columns.has(parentCol)) {
+        grid.push([el]);
+      }
+    }
+  }
+  return grid;
+}
+function findPosition(grid, el) {
+  for (let col = 0; col < grid.length; col++) {
+    const row = grid[col].indexOf(el);
+    if (row !== -1) return { col, row };
+  }
+  return null;
+}
+function focusTrigger(context) {
+  const reference = context.elements.reference;
+  const focusable = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+  focusable == null ? void 0 : focusable.focus();
+}
+function focusNextAfterPanel(context, panel) {
+  var _a, _b;
+  const reference = context.elements.reference;
+  const refFocusable = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+  const nextSibling = (_b = (_a = refFocusable == null ? void 0 : refFocusable.closest("li")) == null ? void 0 : _a.nextElementSibling) == null ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR);
+  const nextOutside = nextSibling || (() => {
+    const allFocusable = Array.from(
+      panel.ownerDocument.querySelectorAll(FOCUSABLE_SELECTOR)
+    ).filter((el) => !panel.contains(el));
+    const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;
+    return idx >= 0 ? allFocusable[idx + 1] : void 0;
+  })();
+  if (nextOutside) {
+    const view = panel.ownerDocument.defaultView;
+    view == null ? void 0 : view.requestAnimationFrame(() => {
+      view == null ? void 0 : view.requestAnimationFrame(() => {
+        nextOutside.focus();
+      });
+    });
+  }
+}
+function useMegaMenuKeyboard(context, props = {}) {
+  const { enabled = true } = props;
+  const { open, onOpenChange } = context;
+  return react.useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    return {
+      reference: {
+        onKeyDown(event) {
+          if (event.key === "ArrowDown" && open) {
+            event.preventDefault();
+            const floating = context.elements.floating;
+            if (floating instanceof HTMLElement) {
+              focusFirstItem(floating);
+            }
+          }
+        }
+      },
+      floating: {
+        onKeyDown(event) {
+          var _a, _b, _c, _d;
+          if (!open) return;
+          const panel = event.currentTarget;
+          const target = event.target;
+          const focusedItem = target.closest(ITEM_SELECTOR) ?? target.closest(FOCUSABLE_SELECTOR);
+          if (!focusedItem) return;
+          const grid = buildGrid(panel);
+          const pos = findPosition(grid, focusedItem);
+          if (!pos) return;
+          const allItems = grid.flat();
+          const linearIndex = allItems.indexOf(focusedItem);
+          switch (event.key) {
+            case "ArrowDown": {
+              event.preventDefault();
+              const next = pos.row + 1;
+              if (next < grid[pos.col].length) {
+                grid[pos.col][next].focus();
+              } else {
+                const nextCol = pos.col + 1;
+                if (nextCol < grid.length) {
+                  grid[nextCol][0].focus();
+                }
+              }
+              break;
+            }
+            case "ArrowUp": {
+              event.preventDefault();
+              if (pos.row > 0) {
+                grid[pos.col][pos.row - 1].focus();
+              } else {
+                const prevCol = pos.col - 1;
+                if (prevCol >= 0) {
+                  grid[prevCol][grid[prevCol].length - 1].focus();
+                } else {
+                  focusTrigger(context);
+                }
+              }
+              break;
+            }
+            case "ArrowRight": {
+              event.preventDefault();
+              const nextCol = pos.col + 1;
+              if (nextCol < grid.length) {
+                grid[nextCol][0].focus();
+              } else {
+                const reference = context.elements.reference;
+                const trigger = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+                const li = trigger == null ? void 0 : trigger.closest("li");
+                const nextSibling = (li == null ? void 0 : li.nextElementSibling) instanceof HTMLElement ? li.nextElementSibling.querySelector(
+                  FOCUSABLE_SELECTOR
+                ) : null;
+                if (nextSibling) {
+                  onOpenChange(false);
+                  nextSibling.focus();
+                }
+              }
+              break;
+            }
+            case "ArrowLeft": {
+              event.preventDefault();
+              const prevCol = pos.col - 1;
+              if (prevCol >= 0) {
+                grid[prevCol][0].focus();
+              } else {
+                focusTrigger(context);
+              }
+              break;
+            }
+            case "Tab": {
+              event.preventDefault();
+              if (event.shiftKey) {
+                if (linearIndex === 0) {
+                  focusTrigger(context);
+                } else {
+                  (_a = allItems[linearIndex - 1]) == null ? void 0 : _a.focus();
+                }
+              } else {
+                if (linearIndex === allItems.length - 1) {
+                  onOpenChange(false);
+                  focusNextAfterPanel(context, panel);
+                } else {
+                  (_b = allItems[linearIndex + 1]) == null ? void 0 : _b.focus();
+                }
+              }
+              break;
+            }
+            case "Home": {
+              event.preventDefault();
+              (_c = grid[pos.col][0]) == null ? void 0 : _c.focus();
+              break;
+            }
+            case "End": {
+              event.preventDefault();
+              (_d = grid[pos.col][grid[pos.col].length - 1]) == null ? void 0 : _d.focus();
+              break;
+            }
+          }
+        }
+      }
+    };
+  }, [enabled, open, context, onOpenChange]);
+}
+function focusFirstItem(panel, attempt = 0) {
+  var _a;
+  const grid = buildGrid(panel);
+  const firstItem = (_a = grid[0]) == null ? void 0 : _a[0];
+  if (firstItem) {
+    firstItem.focus();
+    return;
+  }
+  const view = panel.ownerDocument.defaultView;
+  if (attempt < 3 && view) {
+    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));
+  }
+}
+
+exports.FOCUSABLE_SELECTOR = FOCUSABLE_SELECTOR;
+exports.focusFirstItem = focusFirstItem;
+exports.useMegaMenuKeyboard = useMegaMenuKeyboard;
+//# sourceMappingURL=useMegaMenuKeyboard.js.map

package/dist-cjs/mega-menu/useMegaMenuKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMegaMenuKeyboard.js","sources":["../src/mega-menu/useMegaMenuKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingRootContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nconst COLUMN_SELECTOR = \"[data-mega-menu-column]\";\nconst ITEM_SELECTOR = \"[data-mega-menu-item]\";\nexport const FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Get navigable items within a column.\n * Prefers explicitly marked items (`data-mega-menu-item`), falling back\n * to all focusable elements when no marked items are found.\n */\nfunction getColumnItems(column: HTMLElement): HTMLElement[] {\n  const marked = Array.from(\n    column.querySelectorAll<HTMLElement>(ITEM_SELECTOR),\n  );\n  if (marked.length > 0) return marked;\n  return Array.from(column.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\n/**\n * Build a 2D grid of navigable items from the panel DOM.\n * Each column is a `[data-mega-menu-column]` wrapper; items within each\n * column are discovered via `getColumnItems`.\n * Items not inside any column (orphans) are inserted at their DOM position\n * as single-item columns so keyboard navigation follows visual order.\n */\nfunction buildGrid(panel: HTMLElement): HTMLElement[][] {\n  const columns = new Set(panel.querySelectorAll<HTMLElement>(COLUMN_SELECTOR));\n  const grid: HTMLElement[][] = [];\n  const processedColumns = new Set<HTMLElement>();\n\n  // Walk columns and items in DOM order so orphans are interleaved correctly.\n  const all = panel.querySelectorAll<HTMLElement>(\n    `${COLUMN_SELECTOR}, ${ITEM_SELECTOR}`,\n  );\n\n  for (const el of all) {\n    if (columns.has(el) && !processedColumns.has(el)) {\n      processedColumns.add(el);\n      const items = getColumnItems(el);\n      if (items.length > 0) grid.push(items);\n    } else if (el.matches(ITEM_SELECTOR)) {\n      const parentCol = el.closest(COLUMN_SELECTOR);\n      if (!parentCol || !columns.has(parentCol as HTMLElement)) {\n        grid.push([el]);\n      }\n    }\n  }\n\n  return grid;\n}\n\nfunction findPosition(\n  grid: HTMLElement[][],\n  el: HTMLElement,\n): { col: number; row: number } | null {\n  for (let col = 0; col < grid.length; col++) {\n    const row = grid[col].indexOf(el);\n    if (row !== -1) return { col, row };\n  }\n  return null;\n}\n\nfunction focusTrigger(context: FloatingRootContext) {\n  const reference = context.elements.reference as HTMLElement | null;\n  const focusable =\n    reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n  focusable?.focus();\n}\n\nfunction focusNextAfterPanel(context: FloatingRootContext, panel: HTMLElement) {\n  const reference = context.elements.reference as HTMLElement | null;\n  const refFocusable =\n    reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n\n  const nextSibling = refFocusable\n    ?.closest(\"li\")\n    ?.nextElementSibling?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n\n  const nextOutside =\n    nextSibling ||\n    (() => {\n      const allFocusable = Array.from(\n        panel.ownerDocument.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n      ).filter((el) => !panel.contains(el));\n      const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;\n      return idx >= 0 ? allFocusable[idx + 1] : undefined;\n    })();\n\n  if (nextOutside) {\n    const view = panel.ownerDocument.defaultView;\n    view?.requestAnimationFrame(() => {\n      view?.requestAnimationFrame(() => {\n        nextOutside.focus();\n      });\n    });\n  }\n}\n\nexport interface UseMegaMenuKeyboardProps {\n  /**\n   * Whether the interaction is enabled.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Floating-ui custom interaction hook for mega menu grid keyboard navigation.\n *\n * Returns `ElementProps` that get merged via `useInteractions`, handling\n * keyboard events on both the reference (trigger) and floating (panel) elements.\n *\n * - **↑ / ↓** move within the current column.\n * - **← / →** jump to the top of the previous / next column.\n * - **Tab / Shift+Tab** move linearly through every item.\n * - **Home / End** jump to the first / last item in the column.\n * - **↑ from the first item** or **← from the first column** returns\n *   focus to the trigger.\n * - **→ from the last column** closes the panel and moves focus to the\n *   next sibling trigger.\n */\nexport function useMegaMenuKeyboard(\n  context: FloatingRootContext,\n  props: UseMegaMenuKeyboardProps = {},\n): ElementProps {\n  const { enabled = true } = props;\n  const { open, onOpenChange } = context;\n\n  return useMemo(() => {\n    if (!enabled) {\n      return {};\n    }\n\n    return {\n      reference: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (event.key === \"ArrowDown\" && open) {\n            event.preventDefault();\n            const floating = context.elements.floating;\n            if (floating instanceof HTMLElement) {\n              focusFirstItem(floating);\n            }\n          }\n        },\n      },\n      floating: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (!open) return;\n\n          const panel = event.currentTarget as HTMLElement;\n          const target = event.target as HTMLElement;\n\n          const focusedItem =\n            target.closest<HTMLElement>(ITEM_SELECTOR) ??\n            target.closest<HTMLElement>(FOCUSABLE_SELECTOR);\n          if (!focusedItem) return;\n\n          const grid = buildGrid(panel);\n          const pos = findPosition(grid, focusedItem);\n          if (!pos) return;\n\n          const allItems = grid.flat();\n          const linearIndex = allItems.indexOf(focusedItem);\n\n          switch (event.key) {\n            case \"ArrowDown\": {\n              event.preventDefault();\n              const next = pos.row + 1;\n              if (next < grid[pos.col].length) {\n                grid[pos.col][next].focus();\n              } else {\n                const nextCol = pos.col + 1;\n                if (nextCol < grid.length) {\n                  grid[nextCol][0].focus();\n                }\n              }\n              break;\n            }\n\n            case \"ArrowUp\": {\n              event.preventDefault();\n              if (pos.row > 0) {\n                grid[pos.col][pos.row - 1].focus();\n              } else {\n                const prevCol = pos.col - 1;\n                if (prevCol >= 0) {\n                  grid[prevCol][grid[prevCol].length - 1].focus();\n                } else {\n                  focusTrigger(context);\n                }\n              }\n              break;\n            }\n\n            case \"ArrowRight\": {\n              event.preventDefault();\n              const nextCol = pos.col + 1;\n              if (nextCol < grid.length) {\n                grid[nextCol][0].focus();\n              } else {\n                // On the last column — close panel and move to next trigger\n                const reference = context.elements\n                  .reference as HTMLElement | null;\n                const trigger =\n                  reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ??\n                  reference;\n                const li = trigger?.closest(\"li\");\n                const nextSibling =\n                  li?.nextElementSibling instanceof HTMLElement\n                    ? li.nextElementSibling.querySelector<HTMLElement>(\n                        FOCUSABLE_SELECTOR,\n                      )\n                    : null;\n                if (nextSibling) {\n                  onOpenChange(false);\n                  nextSibling.focus();\n                }\n              }\n              break;\n            }\n\n            case \"ArrowLeft\": {\n              event.preventDefault();\n              const prevCol = pos.col - 1;\n              if (prevCol >= 0) {\n                grid[prevCol][0].focus();\n              } else {\n                focusTrigger(context);\n              }\n              break;\n            }\n\n            case \"Tab\": {\n              event.preventDefault();\n              if (event.shiftKey) {\n                if (linearIndex === 0) {\n                  focusTrigger(context);\n                } else {\n                  allItems[linearIndex - 1]?.focus();\n                }\n              } else {\n                if (linearIndex === allItems.length - 1) {\n                  onOpenChange(false);\n                  focusNextAfterPanel(context, panel);\n                } else {\n                  allItems[linearIndex + 1]?.focus();\n                }\n              }\n              break;\n            }\n\n            case \"Home\": {\n              event.preventDefault();\n              grid[pos.col][0]?.focus();\n              break;\n            }\n\n            case \"End\": {\n              event.preventDefault();\n              grid[pos.col][grid[pos.col].length - 1]?.focus();\n              break;\n            }\n\n            default:\n              break;\n          }\n        },\n      },\n    };\n  }, [enabled, open, context, onOpenChange]);\n}\n\n/**\n * Focus the first navigable item inside a mega menu panel.\n * Retries with `requestAnimationFrame` if content has not yet rendered.\n */\nexport function focusFirstItem(panel: HTMLElement, attempt = 0): void {\n  const grid = buildGrid(panel);\n  const firstItem = grid[0]?.[0];\n\n  if (firstItem) {\n    firstItem.focus();\n    return;\n  }\n\n  const view = panel.ownerDocument.defaultView;\n  if (attempt < 3 && view) {\n    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));\n  }\n}\n"],"names":["useMemo"],"mappings":"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"}

package/dist-cjs/side-panel/SidePanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSidePanel {\n  background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n  --saltSidePanel-width: 300px;\n  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n.saltSidePanel-primary {\n  --sidePanel-background: var(--salt-container-primary-background);\n  --sidePanel-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltSidePanel-secondary {\n  --sidePanel-background: var(--salt-container-secondary-background);\n  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltSidePanel-tertiary {\n  --sidePanel-background: var(--salt-container-tertiary-background);\n  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltSidePanel-left {\n  border-right: var(--sidePanel-border);\n}\n.saltSidePanel-right {\n  border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none {\n  --sidePanel-background: none;\n  border: none;\n}\n\n.saltSidePanel-none .saltSidePanel-inner {\n  padding: 0;\n}\n\n.saltSidePanel-left,\n.saltSidePanel-right {\n  width: var(--saltSidePanel-width);\n  height: 100%;\n  min-height: 0;\n  align-self: stretch;\n}\n\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n  overflow: hidden;\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation,\n.saltSidePanel-right.saltSidePanel-enterAnimation {\n  animation: saltSidePanel-expandWidth var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-left.saltSidePanel-exitAnimation,\n.saltSidePanel-right.saltSidePanel-exitAnimation {\n  animation: saltSidePanel-collapseWidth var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n.saltSidePanel-exitAnimation {\n  pointer-events: none;\n}\n\n.saltSidePanel-inner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: var(--salt-spacing-300);\n}\n\n.saltSidePanel-left .saltSidePanel-inner,\n.saltSidePanel-right .saltSidePanel-inner {\n  width: var(--saltSidePanel-width);\n  height: 100%;\n}\n\n@keyframes saltSidePanel-expandWidth {\n  from {\n    width: 0;\n  }\n}\n@keyframes saltSidePanel-collapseWidth {\n  to {\n    width: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltSidePanel-left.saltSidePanel-enterAnimation,\n  .saltSidePanel-right.saltSidePanel-enterAnimation,\n  .saltSidePanel-left.saltSidePanel-exitAnimation,\n  .saltSidePanel-right.saltSidePanel-exitAnimation {\n    animation: none;\n  }\n}\n";
+var css_248z = ".saltSidePanel {\n  --saltSidePanel-width: 300px;\n  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));\n  --saltSidePanel-padding: var(--salt-spacing-300);\n  /* Outer wrapper. Idle: a normal flex column whose width comes from\n     --saltSidePanel-width (supports any CSS length, including %).\n     During enter/exit animation: animates `width` between 0 and the\n     panel width and clips the absolutely-positioned inner via\n     `contain: paint`. The inner uses a JS-resolved px width during\n     animation (--saltSidePanel-animation-width) so percentage widths\n     don't compound against the animating outer. */\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: none;\n  width: var(--saltSidePanel-width);\n  height: 100%;\n  min-height: 0;\n  align-self: stretch;\n}\n\n.saltSidePanel-primary {\n  --sidePanel-background: var(--salt-container-primary-background);\n  --sidePanel-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltSidePanel-secondary {\n  --sidePanel-background: var(--salt-container-secondary-background);\n  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltSidePanel-tertiary {\n  --sidePanel-background: var(--salt-container-tertiary-background);\n  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltSidePanel-none {\n  --sidePanel-background: none;\n  --saltSidePanel-padding: var(--salt-spacing-200);\n}\n\n.saltSidePanel-inner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: var(--saltSidePanel-padding);\n  width: 100%;\n  background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n}\n\n.saltSidePanel-left .saltSidePanel-inner {\n  border-right: var(--sidePanel-border);\n}\n\n.saltSidePanel-right .saltSidePanel-inner {\n  border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none .saltSidePanel-inner {\n  border: none;\n}\n\n/* Animation: outer becomes the gap + clip; inner is absolutely positioned\n   and anchored to the gap's GROWING edge so the leading edge tracks the\n   gap's expansion — content visibly pushes the sibling rather than being\n   revealed in place. Left grows rightward → anchor inner right; right\n   grows leftward → anchor inner left.\n\n   During animation the outer's width is interpolating, so the inner can't\n   rely on --saltSidePanel-width (which may be a percentage that would\n   resolve against the animating outer). Instead the JS layer measures the\n   resolved width once and exposes it as --saltSidePanel-animation-width\n   (a px value) for the inner to use. */\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n  contain: paint;\n}\n\n.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  flex: none;\n  width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  right: 0;\n}\n\n.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  left: 0;\n}\n\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  pointer-events: none;\n}\n\n.saltSidePanel-enterAnimation {\n  animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-exitAnimation {\n  animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n@keyframes saltSidePanel-open {\n  from {\n    width: 0;\n  }\n}\n\n@keyframes saltSidePanel-close {\n  to {\n    width: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltSidePanel-enterAnimation,\n  .saltSidePanel-exitAnimation {\n    animation: none;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SidePanel.css.js.map