@salt-ds/lab 1.0.0-alpha.95 → 1.0.0-alpha.97

package/dist-es/mega-menu/MegaMenuGroup.js

@@ -1,11 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useId } from '@salt-ds/core';
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, useState, useMemo } from 'react';
 import css_248z from './MegaMenuGroup.css.js';
-import { MegaMenuHeader } from './MegaMenuHeader.js';
+import { MegaMenuGroupContext } from './MegaMenuGroupContext.js';
 
 const withBaseName = makePrefixer("saltMegaMenuGroup");
 const MegaMenuGroup = forwardRef(
@@ -16,36 +16,21 @@ const MegaMenuGroup = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const headerId = useId();
-    let header = null;
-    const items = [];
-    Children.forEach(children, (child) => {
-      if (isValidElement(child) && child.type === MegaMenuHeader && !header) {
-        header = cloneElement(child, { id: headerId });
-      } else {
-        items.push(child);
-      }
-    });
-    return /* @__PURE__ */ jsxs(
+    const [headingId, setHeadingId] = useState(void 0);
+    const contextValue = useMemo(
+      () => ({ headingId, setHeadingId }),
+      [headingId]
+    );
+    return /* @__PURE__ */ jsx(MegaMenuGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: clsx(withBaseName(), className),
         "data-mega-menu-column": "",
+        className: clsx(withBaseName(), className),
         ref,
         ...rest,
-        children: [
-          header,
-          /* @__PURE__ */ jsx(
-            "ol",
-            {
-              className: withBaseName("list"),
-              "aria-labelledby": header ? headerId : void 0,
-              children: items
-            }
-          )
-        ]
+        children
       }
-    );
+    ) });
   }
 );
 

package/dist-es/mega-menu/MegaMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenuGroup.js","sources":["../src/mega-menu/MegaMenuGroup.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n} from \"react\";\nimport megaMenuGroupCss from \"./MegaMenuGroup.css\";\nimport { MegaMenuHeader } from \"./MegaMenuHeader\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroup\");\n\nexport interface MegaMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of the mega menu group, typically MegaMenuHeader and MegaMenuItem components.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuGroup = forwardRef<HTMLDivElement, MegaMenuGroupProps>(\n  function MegaMenuGroup({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-group\",\n      css: megaMenuGroupCss,\n      window: targetWindow,\n    });\n\n    const headerId = useId();\n    let header: ReactNode = null;\n    const items: ReactNode[] = [];\n\n    Children.forEach(children, (child) => {\n      if (isValidElement(child) && child.type === MegaMenuHeader && !header) {\n        header = cloneElement(child, { id: headerId });\n      } else {\n        items.push(child);\n      }\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        data-mega-menu-column=\"\"\n        ref={ref}\n        {...rest}\n      >\n        {header}\n        <ol\n          className={withBaseName(\"list\")}\n          aria-labelledby={header ? headerId : undefined}\n        >\n          {items}\n        </ol>\n      </div>\n    );\n  },\n);\n"],"names":["MegaMenuGroup","megaMenuGroupCss"],"mappings":";;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,eAAc,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC5D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAW,KAAA,EAAM;AACvB,IAAA,IAAI,MAAA,GAAoB,IAAA;AACxB,IAAA,MAAM,QAAqB,EAAC;AAE5B,IAAA,QAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAC,KAAA,KAAU;AACpC,MAAA,IAAI,eAAe,KAAK,CAAA,IAAK,MAAM,IAAA,KAAS,cAAA,IAAkB,CAAC,MAAA,EAAQ;AACrE,QAAA,MAAA,GAAS,YAAA,CAAa,KAAA,EAAO,EAAE,EAAA,EAAI,UAAU,CAAA;AAAA,MAC/C,CAAA,MAAO;AACL,QAAA,KAAA,CAAM,KAAK,KAAK,CAAA;AAAA,MAClB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,uBAAA,EAAsB,EAAA;AAAA,QACtB,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BACD,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,cAC9B,iBAAA,EAAiB,SAAS,QAAA,GAAW,MAAA;AAAA,cAEpC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"MegaMenuGroup.js","sources":["../src/mega-menu/MegaMenuGroup.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 {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n  useState,\n} from \"react\";\nimport megaMenuGroupCss from \"./MegaMenuGroup.css\";\nimport { MegaMenuGroupContext } from \"./MegaMenuGroupContext\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroup\");\n\nexport interface MegaMenuGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the mega menu group: a `MegaMenuGroupHeading` and a\n   * `MegaMenuList` of `MegaMenuListItem`s.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuGroup = forwardRef<HTMLDivElement, MegaMenuGroupProps>(\n  function MegaMenuGroup({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-group\",\n      css: megaMenuGroupCss,\n      window: targetWindow,\n    });\n\n    // The heading registers its id so the list can label itself; `undefined`\n    // with no heading. The group is also a navigation column.\n    const [headingId, setHeadingId] = useState<string | undefined>(undefined);\n    const contextValue = useMemo(\n      () => ({ headingId, setHeadingId }),\n      [headingId],\n    );\n\n    return (\n      <MegaMenuGroupContext.Provider value={contextValue}>\n        <div\n          data-mega-menu-column=\"\"\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </div>\n      </MegaMenuGroupContext.Provider>\n    );\n  },\n);\n"],"names":["MegaMenuGroup","megaMenuGroupCss"],"mappings":";;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAU9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,eAAc,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC5D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAID,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,MAAS,CAAA;AACxE,IAAA,MAAM,YAAA,GAAe,OAAA;AAAA,MACnB,OAAO,EAAE,SAAA,EAAW,YAAA,EAAa,CAAA;AAAA,MACjC,CAAC,SAAS;AAAA,KACZ;AAEA,IAAA,uBACE,GAAA,CAAC,oBAAA,CAAqB,QAAA,EAArB,EAA8B,OAAO,YAAA,EACpC,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,uBAAA,EAAsB,EAAA;AAAA,QACtB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/mega-menu/MegaMenuGroupContext.js

@@ -0,0 +1,14 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const MegaMenuGroupContext = createContext(
+  "MegaMenuGroupContext",
+  { headingId: void 0, setHeadingId: () => {
+  } }
+);
+function useMegaMenuGroup() {
+  return useContext(MegaMenuGroupContext);
+}
+
+export { MegaMenuGroupContext, useMegaMenuGroup };
+//# sourceMappingURL=MegaMenuGroupContext.js.map

package/dist-es/mega-menu/MegaMenuGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuGroupContext.js","sources":["../src/mega-menu/MegaMenuGroupContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\nexport interface MegaMenuGroupContextValue {\n  /**\n   * The rendered heading's id, used to label the item list via `aria-labelledby`.\n   * `undefined` when the group has no `MegaMenuGroupHeading`.\n   */\n  headingId: string | undefined;\n  /** Register (or clear, with `undefined`) the heading's id. */\n  setHeadingId: (id: string | undefined) => void;\n}\n\nexport const MegaMenuGroupContext = createContext<MegaMenuGroupContextValue>(\n  \"MegaMenuGroupContext\",\n  { headingId: undefined, setHeadingId: () => {} },\n);\n\n/** Access the nearest `MegaMenuGroup` context. */\nexport function useMegaMenuGroup(): MegaMenuGroupContextValue {\n  return useContext(MegaMenuGroupContext);\n}\n"],"names":[],"mappings":";;;AAaO,MAAM,oBAAA,GAAuB,aAAA;AAAA,EAClC,sBAAA;AAAA,EACA,EAAE,SAAA,EAAW,MAAA,EAAW,YAAA,EAAc,MAAM;AAAA,EAAC,CAAA;AAC/C;AAGO,SAAS,gBAAA,GAA8C;AAC5D,EAAA,OAAO,WAAW,oBAAoB,CAAA;AACxC;;;;"}

package/dist-es/mega-menu/MegaMenuGroupHeading.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuGroupHeading {\n  display: flex;\n  align-items: center;\n  margin: 0 0 var(--salt-spacing-50);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n  min-height: var(--salt-size-base);\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  line-height: var(--salt-text-label-lineHeight);\n  color: var(--salt-content-secondary-foreground);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuGroupHeading.css.js.map

package/dist-es/mega-menu/MegaMenuGroupHeading.css.js.map

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

package/dist-es/mega-menu/MegaMenuGroupHeading.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useMegaMenuGroup } from './MegaMenuGroupContext.js';
+import css_248z from './MegaMenuGroupHeading.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuGroupHeading");
+const MegaMenuGroupHeading = forwardRef(function MegaMenuGroupHeading2({ children, className, id: idProp, as: Heading = "h3", ...rest }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-mega-menu-group-heading",
+    css: css_248z,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  const { setHeadingId } = useMegaMenuGroup();
+  useIsomorphicLayoutEffect(() => {
+    setHeadingId(id);
+    return () => setHeadingId(void 0);
+  }, [id, setHeadingId]);
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      className: clsx(withBaseName(), className),
+      ref,
+      ...rest,
+      id,
+      children
+    }
+  );
+});
+
+export { MegaMenuGroupHeading };
+//# sourceMappingURL=MegaMenuGroupHeading.js.map

package/dist-es/mega-menu/MegaMenuGroupHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuGroupHeading.js","sources":["../src/mega-menu/MegaMenuGroupHeading.tsx"],"sourcesContent":["import { makePrefixer, useId, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { useMegaMenuGroup } from \"./MegaMenuGroupContext\";\nimport megaMenuGroupHeadingCss from \"./MegaMenuGroupHeading.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroupHeading\");\n\nexport interface MegaMenuGroupHeadingProps\n  extends ComponentPropsWithoutRef<\"h2\"> {\n  /**\n   * The content of the mega menu group heading.\n   */\n  children?: ReactNode;\n  /**\n   * The heading element to render.\n   * @default \"h3\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const MegaMenuGroupHeading = forwardRef<\n  HTMLHeadingElement,\n  MegaMenuGroupHeadingProps\n>(function MegaMenuGroupHeading(\n  { children, className, id: idProp, as: Heading = \"h3\", ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-mega-menu-group-heading\",\n    css: megaMenuGroupHeadingCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const { setHeadingId } = useMegaMenuGroup();\n  useIsomorphicLayoutEffect(() => {\n    setHeadingId(id);\n    return () => setHeadingId(undefined);\n  }, [id, setHeadingId]);\n\n  return (\n    <Heading\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      {...rest}\n      id={id}\n    >\n      {children}\n    </Heading>\n  );\n});\n"],"names":["MegaMenuGroupHeading","megaMenuGroupHeadingCss"],"mappings":";;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAerD,MAAM,oBAAA,GAAuB,UAAA,CAGlC,SAASA,qBAAAA,CACT,EAAE,QAAA,EAAU,SAAA,EAAW,EAAA,EAAI,MAAA,EAAQ,IAAI,OAAA,GAAU,IAAA,EAAM,GAAG,IAAA,IAC1D,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,8BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,gBAAA,EAAiB;AAC1C,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,OAAO,MAAM,aAAa,MAAS,CAAA;AAAA,EACrC,CAAA,EAAG,CAAC,EAAA,EAAI,YAAY,CAAC,CAAA;AAErB,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,EAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/mega-menu/MegaMenuGroups.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMegaMenuGroups {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuGroups-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";
+var css_248z = ".saltMegaMenuGroups {\n  align-self: start;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(0, var(--saltMegaMenuGroups-columnWidth, 12rem)));\n  gap: var(--salt-spacing-300);\n  min-width: 0;\n  max-inline-size: var(--saltMegaMenuPanel-availableWidth);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MegaMenuGroups.css.js.map

package/dist-es/mega-menu/MegaMenuGroups.js.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenuGroups.js","sources":["../src/mega-menu/MegaMenuGroups.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 megaMenuGroupsCss from \"./MegaMenuGroups.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroups\");\n\nexport interface MegaMenuGroupsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of the mega menu section.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuGroups = forwardRef<HTMLDivElement, MegaMenuGroupsProps>(\n  function MegaMenuGroups({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-groups\",\n      css: megaMenuGroupsCss,\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":["MegaMenuGroups","megaMenuGroupsCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,gBAAe,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC7D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"MegaMenuGroups.js","sources":["../src/mega-menu/MegaMenuGroups.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 {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport megaMenuGroupsCss from \"./MegaMenuGroups.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroups\");\n\nexport interface MegaMenuGroupsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The `MegaMenuGroup` columns of the mega menu.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuGroups = forwardRef<HTMLDivElement, MegaMenuGroupsProps>(\n  function MegaMenuGroups({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-groups\",\n      css: megaMenuGroupsCss,\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":["MegaMenuGroups","megaMenuGroupsCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAS/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,gBAAe,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC7D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/mega-menu/MegaMenuList.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  gap: var(--salt-spacing-fixed-100);\n  flex-direction: column;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuList.css.js.map

package/dist-es/mega-menu/MegaMenuList.css.js.map

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

package/dist-es/mega-menu/MegaMenuList.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useMegaMenuGroup } from './MegaMenuGroupContext.js';
+import css_248z from './MegaMenuList.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuList");
+const MegaMenuList = forwardRef(
+  function MegaMenuList2({
+    as,
+    children,
+    className,
+    "aria-labelledby": ariaLabelledBy,
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-list",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { headingId } = useMegaMenuGroup();
+    const Component = as || "ul";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: clsx(withBaseName(), className),
+        "aria-labelledby": clsx(headingId, ariaLabelledBy) || void 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+export { MegaMenuList };
+//# sourceMappingURL=MegaMenuList.js.map

package/dist-es/mega-menu/MegaMenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuList.js","sources":["../src/mega-menu/MegaMenuList.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { useMegaMenuGroup } from \"./MegaMenuGroupContext\";\nimport megaMenuListCss from \"./MegaMenuList.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuList\");\n\nexport type MegaMenuListProps<T extends ElementType = \"ul\"> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * The items of the group, typically `MegaMenuListItem` components. Each\n       * `MegaMenuListItem` renders its own `<li>`.\n       */\n      children?: ReactNode;\n    }\n  >;\n\ntype MegaMenuListComponent = <T extends ElementType = \"ul\">(\n  props: MegaMenuListProps<T>,\n) => ReturnType<FunctionComponent>;\n\n/**\n * The list of a group's `MegaMenuListItem`s. Renders a `<ul>` by default; pass\n * `as=\"ol\"` for an ordered list.\n */\nexport const MegaMenuList: MegaMenuListComponent = forwardRef(\n  function MegaMenuList<T extends ElementType = \"ul\">(\n    {\n      as,\n      children,\n      className,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...rest\n    }: MegaMenuListProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-list\",\n      css: megaMenuListCss,\n      window: targetWindow,\n    });\n\n    const { headingId } = useMegaMenuGroup();\n\n    const Component = as || \"ul\";\n\n    return (\n      <Component\n        ref={ref as PolymorphicRef<T>}\n        className={clsx(withBaseName(), className)}\n        aria-labelledby={clsx(headingId, ariaLabelledBy) || undefined}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["MegaMenuList","megaMenuListCss"],"mappings":";;;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAsB7C,MAAM,YAAA,GAAsC,UAAA;AAAA,EACjD,SAASA,aAAAA,CACP;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA,EAAmB,cAAA;AAAA,IACnB,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAU,GAAI,gBAAA,EAAiB;AAEvC,IAAA,MAAM,YAAY,EAAA,IAAM,IAAA;AAExB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,iBAAA,EAAiB,IAAA,CAAK,SAAA,EAAW,cAAc,CAAA,IAAK,MAAA;AAAA,QACnD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/mega-menu/MegaMenuListItem.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuListItem {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n}\n\n.saltMegaMenuListItem-wrapper {\n  display: flex;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  align-items: flex-start;\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-hover);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  box-sizing: border-box;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  border-radius: var(--salt-palette-corner-weak, 0);\n  text-decoration: none;\n  border: none;\n  font: inherit;\n  text-align: start;\n}\n\n.saltMegaMenuListItem-wrapper > .saltIcon {\n  display: flex;\n  height: var(--salt-size-base);\n  align-items: center;\n}\n\n.saltMegaMenuListItem-content {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltMegaMenuListItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuListItem-wrapper:hover:not(:focus-visible) {\n  outline: none;\n  background: var(--salt-overlayable-background-hover);\n}\n\n.saltMegaMenuListItem-wrapper:active {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuListItem-wrapper:active::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border-radius: inherit;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n  pointer-events: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuListItem.css.js.map

package/dist-es/mega-menu/MegaMenuListItem.css.js.map

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

package/dist-es/mega-menu/MegaMenuListItem.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, renderProps } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, Children } from 'react';
+import css_248z from './MegaMenuListItem.css.js';
+import { useMegaMenu } from './useMegaMenu.js';
+
+const withBaseName = makePrefixer("saltMegaMenuListItem");
+function MegaMenuListItemAction(props) {
+  return renderProps("a", props);
+}
+const MegaMenuListItem = forwardRef(function MegaMenuListItem2({ children, className, onClick, render, href, current, ...rest }, ref) {
+  const targetWindow = useWindow();
+  const megaMenu = useMegaMenu();
+  useComponentCssInjection({
+    testId: "salt-mega-menu-list-item",
+    css: css_248z,
+    window: targetWindow
+  });
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    megaMenu.setOpen(false);
+  };
+  return /* @__PURE__ */ jsx("li", { ref, className: clsx(withBaseName(), className), ...rest, children: /* @__PURE__ */ jsx(
+    MegaMenuListItemAction,
+    {
+      className: withBaseName("wrapper"),
+      href,
+      onClick: handleClick,
+      "aria-current": current ? "page" : void 0,
+      render,
+      children: Children.map(
+        children,
+        (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", { className: withBaseName("content"), children: child }) : child
+      )
+    }
+  ) });
+});
+
+export { MegaMenuListItem };
+//# sourceMappingURL=MegaMenuListItem.js.map

package/dist-es/mega-menu/MegaMenuListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuListItem.js","sources":["../src/mega-menu/MegaMenuListItem.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport megaMenuListItemCss from \"./MegaMenuListItem.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuListItem\");\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction MegaMenuListItemAction(props: ComponentPropsWithoutRef<any>) {\n  return renderProps(\"a\", props);\n}\n\nexport interface MegaMenuListItemProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onClick\"> {\n  /**\n   * The content of the mega menu item.\n   */\n  children?: ReactNode;\n  /**\n   * Whether the item is the current page. Sets `aria-current=\"page\"`\n   */\n  current?: boolean;\n  /**\n   * Href passed to the link action element.\n   */\n  href?: string;\n  /**\n   * Called when the item's action is activated, before the menu closes.\n   */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /**\n   * Render prop to enable customization of the underlying action element (e.g. a router `Link`).\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const MegaMenuListItem = forwardRef<\n  HTMLLIElement,\n  MegaMenuListItemProps\n>(function MegaMenuListItem(\n  { children, className, onClick, render, href, current, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const megaMenu = useMegaMenu();\n\n  useComponentCssInjection({\n    testId: \"salt-mega-menu-list-item\",\n    css: megaMenuListItemCss,\n    window: targetWindow,\n  });\n\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    onClick?.(event);\n    megaMenu.setOpen(false);\n  };\n\n  return (\n    <li ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n      <MegaMenuListItemAction\n        className={withBaseName(\"wrapper\")}\n        href={href}\n        onClick={handleClick}\n        aria-current={current ? \"page\" : undefined}\n        render={render}\n      >\n        {Children.map(children, (child) =>\n          typeof child === \"string\" || typeof child === \"number\" ? (\n            <span className={withBaseName(\"content\")}>{child}</span>\n          ) : (\n            child\n          ),\n        )}\n      </MegaMenuListItemAction>\n    </li>\n  );\n});\n"],"names":["MegaMenuListItem","megaMenuListItemCss"],"mappings":";;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAGxD,SAAS,uBAAuB,KAAA,EAAsC;AACpE,EAAA,OAAO,WAAA,CAAY,KAAK,KAAK,CAAA;AAC/B;AA0BO,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CACT,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,MAAA,EAAQ,IAAA,EAAM,OAAA,EAAS,GAAG,IAAA,IAC1D,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,QAAA,CAAS,QAAQ,KAAK,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,GAAA,EAAU,SAAA,EAAW,IAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,kBAAA,GAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACjC,IAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MACjC,MAAA;AAAA,MAEC,QAAA,EAAA,QAAA,CAAS,GAAA;AAAA,QAAI,QAAA;AAAA,QAAU,CAAC,KAAA,KACvB,OAAO,KAAA,KAAU,YAAY,OAAO,KAAA,KAAU,QAAA,mBAC5C,GAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,SAAS,CAAA,EAAI,iBAAM,CAAA,GAEjD;AAAA;AAEJ;AAAA,GACF,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/mega-menu/MegaMenuPanel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMegaMenuPanel {\n  display: flex;\n  flex-wrap: wrap;\n  inline-size: var(--saltMegaMenuPanel-inlineSize, fit-content);\n  max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600))));\n  max-height: 90%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  background: var(--salt-container-primary-background);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n";
+var css_248z = ".saltMegaMenuPanel {\n  /* Single horizontal row: optional side content, the center navigation area,\n     optional side content. Position is derived from source order alone, so\n     authors need no wrapper scaffolding. */\n  --saltMegaMenuPanel-availableWidth: calc(100vw - var(--salt-spacing-600));\n  display: flex;\n  align-items: stretch;\n  inline-size: var(--saltMegaMenuPanel-inlineSize, fit-content);\n  max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth));\n  max-block-size: 90vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  background: var(--salt-container-primary-background);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MegaMenuPanel.css.js.map

package/dist-es/mega-menu/MegaMenuPanel.js

@@ -1,12 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
-import { offset, flip, shift, limitShift, size } from '@floating-ui/react';
-import { makePrefixer, useFloatingComponent, useId, useFloatingUI } from '@salt-ds/core';
+import { offset, flip, shift, limitShift } from '@floating-ui/react';
+import { makePrefixer, useFloatingComponent, useId, useIsomorphicLayoutEffect, useFloatingUI, useForkRef } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect } from 'react';
 import css_248z from './MegaMenuPanel.css.js';
 import { useMegaMenu } from './useMegaMenu.js';
+import { focusFirstItem } from './useMegaMenuNavigation.js';
+import { usePageMargin } from './usePageMargin.js';
 
 const withBaseName = makePrefixer("saltMegaMenuPanel");
 const MegaMenuPanel = forwardRef(
@@ -24,51 +26,36 @@ const MegaMenuPanel = forwardRef(
       placement,
       getFloatingProps,
       setFloating,
-      focusFirstItemOnOpen,
+      focusFirstItemOnOpenRef,
       setPanelId
     } = useMegaMenu();
     const id = useId(idProp);
-    useEffect(() => {
-      setPanelId(id);
-      return () => setPanelId(void 0);
+    useIsomorphicLayoutEffect(() => {
+      if (id) setPanelId(id);
     }, [id, setPanelId]);
-    const [pageMargin, setPageMargin] = useState(0);
-    useEffect(() => {
-      if (!targetWindow) return;
-      const referenceEl = floatingRootContext.elements.domReference;
-      const host = referenceEl ?? targetWindow.document.body;
-      const doc = targetWindow.document;
-      const measure = () => {
-        const probe = doc.createElement("div");
-        probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;width:var(--saltMegaMenuPanel-pageMargin, var(--salt-layout-page-margin));";
-        host.appendChild(probe);
-        const width = probe.getBoundingClientRect().width;
-        probe.remove();
-        setPageMargin((prev) => prev === width ? prev : width);
-      };
-      measure();
-      targetWindow.addEventListener("resize", measure);
-      return () => targetWindow.removeEventListener("resize", measure);
-    }, [targetWindow, floatingRootContext]);
+    const { domReference } = floatingRootContext.elements;
+    const referenceEl = domReference instanceof HTMLElement ? domReference : null;
+    const pageMargin = usePageMargin(referenceEl);
     const floatingUIResult = useFloatingUI({
       rootContext: floatingRootContext,
+      open: isOpen,
       placement,
       middleware: [
         offset(1),
         flip({ padding: pageMargin }),
-        shift({ padding: pageMargin, limiter: limitShift() }),
-        size({
-          padding: pageMargin,
-          apply({ availableWidth, elements }) {
-            elements.floating.style.setProperty(
-              "--saltMegaMenuPanel-availableWidth",
-              `${availableWidth}px`
-            );
-          }
-        })
+        shift({ padding: pageMargin, limiter: limitShift() })
       ]
     });
-    const floatingProps = getFloatingProps();
+    const floatingEl = floatingRootContext.elements.floating;
+    const { isPositioned } = floatingUIResult;
+    useEffect(() => {
+      if (focusFirstItemOnOpenRef.current && isPositioned && floatingEl) {
+        focusFirstItem(floatingEl);
+        focusFirstItemOnOpenRef.current = false;
+      }
+    }, [focusFirstItemOnOpenRef, isPositioned, floatingEl]);
+    const floatingProps = getFloatingProps(rest);
+    const handleRef = useForkRef(setFloating, ref);
     return /* @__PURE__ */ jsx(
       FloatingComponent,
       {
@@ -79,24 +66,17 @@ const MegaMenuPanel = forwardRef(
         focusManagerProps: {
           context: floatingUIResult.context,
           modal: false,
-          initialFocus: focusFirstItemOnOpen ? 0 : -1,
+          initialFocus: -1,
           returnFocus: true,
           closeOnFocusOut: false,
           guards: false
         },
-        ref: setFloating,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(withBaseName(), className),
-            id,
-            role: "region",
-            ref,
-            ...floatingProps,
-            ...rest,
-            children
-          }
-        )
+        className: clsx(withBaseName(), className),
+        id,
+        role: "region",
+        ...floatingProps,
+        ref: handleRef,
+        children
       }
     );
   }

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

@@ -1 +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":["MegaMenuPanel","megaMenuPanelCss"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CAAc,EAAE,QAAA,EAAU,SAAA,EAAW,IAAI,MAAA,EAAQ,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACxE,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,oBAAA,EAAqB;AAC9D,IAAA,MAAM;AAAA,MACJ,SAAA,EAAW,MAAA;AAAA,MACX,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,WAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA,QACE,WAAA,EAAY;AAEhB,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AAGvB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,UAAA,CAAW,EAAE,CAAA;AACb,MAAA,OAAO,MAAM,WAAW,MAAS,CAAA;AAAA,IACnC,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAGnB,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,CAAC,CAAA;AAC9C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,YAAA,EAAc;AACnB,MAAA,MAAM,WAAA,GAAc,oBAAoB,QAAA,CAAS,YAAA;AAIjD,MAAA,MAAM,IAAA,GAAO,WAAA,IAAe,YAAA,CAAa,QAAA,CAAS,IAAA;AAClD,MAAA,MAAM,MAAM,YAAA,CAAa,QAAA;AACzB,MAAA,MAAM,UAAU,MAAM;AACpB,QAAA,MAAM,KAAA,GAAQ,GAAA,CAAI,aAAA,CAAc,KAAK,CAAA;AACrC,QAAA,KAAA,CAAM,MAAM,OAAA,GACV,oIAAA;AACF,QAAA,IAAA,CAAK,YAAY,KAAK,CAAA;AACtB,QAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,qBAAA,EAAsB,CAAE,KAAA;AAC5C,QAAA,KAAA,CAAM,MAAA,EAAO;AACb,QAAA,aAAA,CAAc,CAAC,IAAA,KAAU,IAAA,KAAS,KAAA,GAAQ,OAAO,KAAM,CAAA;AAAA,MACzD,CAAA;AACA,MAAA,OAAA,EAAQ;AACR,MAAA,YAAA,CAAa,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAC/C,MAAA,OAAO,MAAM,YAAA,CAAa,mBAAA,CAAoB,QAAA,EAAU,OAAO,CAAA;AAAA,IACjE,CAAA,EAAG,CAAC,YAAA,EAAc,mBAAmB,CAAC,CAAA;AAEtC,IAAA,MAAM,mBAAmB,aAAA,CAAc;AAAA,MACrC,WAAA,EAAa,mBAAA;AAAA,MACb,SAAA;AAAA,MACA,UAAA,EAAY;AAAA,QACV,OAAO,CAAC,CAAA;AAAA,QACR,IAAA,CAAK,EAAE,OAAA,EAAS,UAAA,EAAY,CAAA;AAAA,QAC5B,MAAM,EAAE,OAAA,EAAS,YAAY,OAAA,EAAS,UAAA,IAAc,CAAA;AAAA,QACpD,IAAA,CAAK;AAAA,UACH,OAAA,EAAS,UAAA;AAAA,UACT,KAAA,CAAM,EAAE,cAAA,EAAgB,QAAA,EAAS,EAAG;AAClC,YAAA,QAAA,CAAS,SAAS,KAAA,CAAM,WAAA;AAAA,cACtB,oCAAA;AAAA,cACA,GAAG,cAAc,CAAA,EAAA;AAAA,aACnB;AAAA,UACF;AAAA,SACD;AAAA;AACH,KACD,CAAA;AAED,IAAA,MAAM,gBAAgB,gBAAA,EAAiB;AAEvC,IAAA,uBACE,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,MAAA;AAAA,QACN,UAAU,gBAAA,CAAiB,QAAA;AAAA,QAC3B,GAAA,EAAK,iBAAiB,CAAA,IAAK,CAAA;AAAA,QAC3B,IAAA,EAAM,iBAAiB,CAAA,IAAK,CAAA;AAAA,QAC5B,iBAAA,EAAmB;AAAA,UACjB,SAAS,gBAAA,CAAiB,OAAA;AAAA,UAC1B,KAAA,EAAO,KAAA;AAAA,UACP,YAAA,EAAc,uBAAuB,CAAA,GAAI,EAAA;AAAA,UACzC,WAAA,EAAa,IAAA;AAAA,UACb,eAAA,EAAiB,KAAA;AAAA,UACjB,MAAA,EAAQ;AAAA,SACV;AAAA,QACA,GAAA,EAAK,WAAA;AAAA,QAEL,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,YACzC,EAAA;AAAA,YACA,IAAA,EAAK,QAAA;AAAA,YACL,GAAA;AAAA,YACC,GAAG,aAAA;AAAA,YACH,GAAG,IAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"MegaMenuPanel.js","sources":["../src/mega-menu/MegaMenuPanel.tsx"],"sourcesContent":["import { flip, limitShift, offset, shift } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport megaMenuPanelCss from \"./MegaMenuPanel.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\nimport { focusFirstItem } from \"./useMegaMenuNavigation\";\nimport { usePageMargin } from \"./usePageMargin\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuPanel\");\n\nexport interface MegaMenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\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      focusFirstItemOnOpenRef,\n      setPanelId,\n    } = useMegaMenu();\n\n    const id = useId(idProp);\n\n    // Register the panel's id so the trigger's aria-controls stays in sync.\n    useIsomorphicLayoutEffect(() => {\n      if (id) setPanelId(id);\n    }, [id, setPanelId]);\n\n    const { domReference } = floatingRootContext.elements;\n    const referenceEl =\n      domReference instanceof HTMLElement ? domReference : null;\n    const pageMargin = usePageMargin(referenceEl);\n\n    const floatingUIResult = useFloatingUI({\n      rootContext: floatingRootContext,\n      open: isOpen,\n      placement,\n      middleware: [\n        offset(1),\n        flip({ padding: pageMargin }),\n        shift({ padding: pageMargin, limiter: limitShift() }),\n      ],\n    });\n\n    // Focus the first item on ArrowDown open, after floating-ui has positioned the panel\n    const floatingEl = floatingRootContext.elements.floating;\n    const { isPositioned } = floatingUIResult;\n    useEffect(() => {\n      if (focusFirstItemOnOpenRef.current && isPositioned && floatingEl) {\n        focusFirstItem(floatingEl);\n        focusFirstItemOnOpenRef.current = false;\n      }\n    }, [focusFirstItemOnOpenRef, isPositioned, floatingEl]);\n\n    const floatingProps = getFloatingProps(rest);\n    const handleRef = useForkRef<HTMLDivElement>(setFloating, ref);\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: -1,\n          returnFocus: true,\n          closeOnFocusOut: false,\n          guards: false,\n        }}\n        className={clsx(withBaseName(), className)}\n        id={id}\n        role=\"region\"\n        {...floatingProps}\n        ref={handleRef}\n      >\n        {children}\n      </FloatingComponent>\n    );\n  },\n);\n"],"names":["MegaMenuPanel","megaMenuPanelCss"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useForkRef, getRefFromChildren, mergeProps, NavigationItem } from '@salt-ds/core';
 import { forwardRef, useCallback, isValidElement, cloneElement } from 'react';
 import { useMegaMenu } from './useMegaMenu.js';
-import { focusFirstItem, FOCUSABLE_SELECTOR } from './useMegaMenuKeyboard.js';
+import { focusFirstItem, FOCUSABLE_SELECTOR } from './useMegaMenuNavigation.js';
 
 function getAdjacentTrigger(currentTarget, direction) {
   const li = currentTarget.closest("li");
@@ -13,14 +13,14 @@ function getAdjacentTrigger(currentTarget, direction) {
 }
 const MegaMenuTrigger = forwardRef(
   function MegaMenuTrigger2(props, ref) {
-    const { children, ...rest } = props;
+    const { children } = props;
     const megaMenu = useMegaMenu();
     const {
       getReferenceProps,
       setReference,
       setOpen,
       openState,
-      setFocusFirstItemOnOpen,
+      focusFirstItemOnOpenRef,
       floatingRootContext,
       panelId
     } = megaMenu;
@@ -33,7 +33,7 @@ const MegaMenuTrigger = forwardRef(
           const adjacent = getAdjacentTrigger(event.currentTarget, direction);
           if (adjacent) {
             if (openState) setOpen(false);
-            setFocusFirstItemOnOpen(false);
+            focusFirstItemOnOpenRef.current = false;
             adjacent.focus();
           }
           return;
@@ -44,19 +44,19 @@ const MegaMenuTrigger = forwardRef(
           if (floating) focusFirstItem(floating);
           return;
         }
+        if (openState && key === "Tab" && shiftKey) {
+          focusFirstItemOnOpenRef.current = false;
+          setOpen(false);
+          return;
+        }
         if (!openState && key === "ArrowDown") {
           event.preventDefault();
-          setFocusFirstItemOnOpen(true);
+          focusFirstItemOnOpenRef.current = true;
           setOpen(true);
           return;
         }
       },
-      [
-        openState,
-        setOpen,
-        setFocusFirstItemOnOpen,
-        floatingRootContext.elements.floating
-      ]
+      [openState, setOpen, floatingRootContext.elements.floating]
     );
     const handleFloatingRef = useForkRef(
       getRefFromChildren(children),
@@ -72,12 +72,10 @@ const MegaMenuTrigger = forwardRef(
     return cloneElement(children, {
       ...mergeProps(
         getReferenceProps({
-          // For NavigationItem, sync via the `expanded` prop (which maps to aria-expanded internally).
-          // For all other elements, set aria-expanded directly.
+          // NavigationItem maps `expanded` to aria-expanded; others get it directly.
           ...shouldSyncExpanded ? { expanded: openState } : { "aria-expanded": openState },
-          ...panelId && openState ? { "aria-controls": panelId } : null,
-          onKeyDown: handleKeyDown,
-          ...rest
+          ...openState ? { "aria-controls": panelId } : null,
+          onKeyDown: handleKeyDown
         }),
         children.props
       ),

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

@@ -1 +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":["MegaMenuTrigger"],"mappings":"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"}
+{"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 \"./useMegaMenuNavigation\";\n\nexport interface MegaMenuTriggerProps {\n  /**\n   * The trigger element for the mega menu, typically a `NavigationItem` or `Button`.\n   * Wrap each mega menu in its own `<li>` — arrow-key navigation between triggers depends on it.\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 } = props;\n    const megaMenu = useMegaMenu();\n\n    const {\n      getReferenceProps,\n      setReference,\n      setOpen,\n      openState,\n      focusFirstItemOnOpenRef,\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            focusFirstItemOnOpenRef.current = 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 open: Shift+Tab mirrors arrow left\n        if (openState && key === \"Tab\" && shiftKey) {\n          focusFirstItemOnOpenRef.current = false;\n          setOpen(false);\n          return;\n        }\n\n        // When menu is closed: ArrowDown opens and focuses first item\n        if (!openState && key === \"ArrowDown\") {\n          event.preventDefault();\n          focusFirstItemOnOpenRef.current = true;\n          setOpen(true);\n          return;\n        }\n      },\n      [openState, setOpen, floatingRootContext.elements.floating],\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          // NavigationItem maps `expanded` to aria-expanded; others get it directly.\n          ...(shouldSyncExpanded\n            ? { expanded: openState }\n            : { \"aria-expanded\": openState }),\n          ...(openState ? { \"aria-controls\": panelId } : null),\n          onKeyDown: handleKeyDown,\n        }),\n        children.props,\n      ),\n      ref: handleRef,\n    });\n  },\n);\n"],"names":["MegaMenuTrigger"],"mappings":"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"}