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

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

@@ -0,0 +1,80 @@
+import { jsx } from 'react/jsx-runtime';
+import { useFloatingRootContext, useInteractions, useClick, useDismiss } from '@floating-ui/react';
+import { useControlled } from '@salt-ds/core';
+import { useState, useCallback, useMemo } from 'react';
+import { MegaMenuContext } from './MegaMenuContext.js';
+import { useMegaMenuKeyboard } from './useMegaMenuKeyboard.js';
+
+function MegaMenu({
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom"
+}) {
+  const [openState, setOpenState] = useControlled({
+    controlled: open,
+    default: defaultOpen,
+    name: "MegaMenu",
+    state: "open"
+  });
+  const [reference, setReference] = useState(null);
+  const [floating, setFloating] = useState(null);
+  const [focusFirstItemOnOpen, setFocusFirstItemOnOpen] = useState(false);
+  const [panelId, setPanelId] = useState(void 0);
+  const setOpen = useCallback(
+    (newOpen) => {
+      if (!newOpen) {
+        setFocusFirstItemOnOpen(false);
+      }
+      setOpenState(newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(newOpen);
+    },
+    [onOpenChange]
+  );
+  const floatingRootContext = useFloatingRootContext({
+    open: openState,
+    onOpenChange: setOpen,
+    elements: { reference, floating }
+  });
+  const megaMenuKeyboard = useMegaMenuKeyboard(floatingRootContext);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClick(floatingRootContext),
+    useDismiss(floatingRootContext),
+    megaMenuKeyboard
+  ]);
+  const contextValue = useMemo(
+    () => ({
+      openState,
+      floatingRootContext,
+      placement,
+      getFloatingProps,
+      getReferenceProps,
+      setFloating,
+      setReference,
+      setOpen,
+      focusFirstItemOnOpen,
+      setFocusFirstItemOnOpen,
+      panelId,
+      setPanelId
+    }),
+    [
+      openState,
+      floatingRootContext,
+      placement,
+      getFloatingProps,
+      getReferenceProps,
+      setFloating,
+      setReference,
+      setOpen,
+      focusFirstItemOnOpen,
+      setFocusFirstItemOnOpen,
+      panelId,
+      setPanelId
+    ]
+  );
+  return /* @__PURE__ */ jsx(MegaMenuContext.Provider, { value: contextValue, children });
+}
+
+export { MegaMenu };
+//# sourceMappingURL=MegaMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenu.js","sources":["../src/mega-menu/MegaMenu.tsx"],"sourcesContent":["import {\n  type Placement,\n  useClick,\n  useDismiss,\n  useFloatingRootContext,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { type ReactNode, useCallback, useMemo, useState } from \"react\";\nimport { MegaMenuContext } from \"./MegaMenuContext\";\nimport { useMegaMenuKeyboard } from \"./useMegaMenuKeyboard\";\n\nexport interface MegaMenuProps {\n  /**\n   * The content of the mega menu, typically `MegaMenuTrigger` and `MegaMenuPanel`.\n   */\n  children?: ReactNode;\n  /**\n   * Whether the mega menu is open. Use for controlled mode.\n   */\n  open?: boolean;\n  /**\n   * Whether the mega menu is initially open. Use for uncontrolled mode.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The placement of the mega menu panel relative to the trigger.\n   * @default \"bottom\"\n   */\n  placement?: Placement;\n}\n\nexport function MegaMenu({\n  children,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  placement = \"bottom\",\n}: MegaMenuProps) {\n  const [openState, setOpenState] = useControlled({\n    controlled: open,\n    default: defaultOpen,\n    name: \"MegaMenu\",\n    state: \"open\",\n  });\n\n  const [reference, setReference] = useState<HTMLElement | null>(null);\n  const [floating, setFloating] = useState<HTMLElement | null>(null);\n  const [focusFirstItemOnOpen, setFocusFirstItemOnOpen] = useState(false);\n  const [panelId, setPanelId] = useState<string | undefined>(undefined);\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      if (!newOpen) {\n        setFocusFirstItemOnOpen(false);\n      }\n      setOpenState(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange],\n  );\n\n  const floatingRootContext = useFloatingRootContext({\n    open: openState,\n    onOpenChange: setOpen,\n    elements: { reference, floating },\n  });\n\n  const megaMenuKeyboard = useMegaMenuKeyboard(floatingRootContext);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(floatingRootContext),\n    useDismiss(floatingRootContext),\n    megaMenuKeyboard,\n  ]);\n\n  const contextValue = useMemo(\n    () => ({\n      openState,\n      floatingRootContext,\n      placement,\n      getFloatingProps,\n      getReferenceProps,\n      setFloating,\n      setReference,\n      setOpen,\n      focusFirstItemOnOpen,\n      setFocusFirstItemOnOpen,\n      panelId,\n      setPanelId,\n    }),\n    [\n      openState,\n      floatingRootContext,\n      placement,\n      getFloatingProps,\n      getReferenceProps,\n      setFloating,\n      setReference,\n      setOpen,\n      focusFirstItemOnOpen,\n      setFocusFirstItemOnOpen,\n      panelId,\n      setPanelId,\n    ],\n  );\n\n  return (\n    <MegaMenuContext.Provider value={contextValue}>\n      {children}\n    </MegaMenuContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAqCO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAkB;AAChB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAA,CAAc;AAAA,IAC9C,UAAA,EAAY,IAAA;AAAA,IACZ,OAAA,EAAS,WAAA;AAAA,IACT,IAAA,EAAM,UAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,SAAS,KAAK,CAAA;AACtE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA6B,MAAS,CAAA;AAEpE,EAAA,MAAM,OAAA,GAAU,WAAA;AAAA,IACd,CAAC,OAAA,KAAqB;AACpB,MAAA,IAAI,CAAC,OAAA,EAAS;AACZ,QAAA,uBAAA,CAAwB,KAAK,CAAA;AAAA,MAC/B;AACA,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAA,CAAA;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,OAAA;AAAA,IACd,QAAA,EAAU,EAAE,SAAA,EAAW,QAAA;AAAS,GACjC,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,oBAAoB,mBAAmB,CAAA;AAEhE,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAA,EAAiB,GAAI,eAAA,CAAgB;AAAA,IAC9D,SAAS,mBAAmB,CAAA;AAAA,IAC5B,WAAW,mBAAmB,CAAA;AAAA,IAC9B;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO;AAAA,MACL,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,oBAAA;AAAA,MACA,uBAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,oBAAA;AAAA,MACA,uBAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,2BACG,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,cAC9B,QAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuContent {\n  padding: var(--salt-spacing-300);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuContent.css.js.map

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

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

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

@@ -0,0 +1,31 @@
+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 css_248z from './MegaMenuContent.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuContent");
+const MegaMenuContent = forwardRef(
+  function MegaMenuContent2({ className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-content",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(withBaseName(), className),
+        "data-mega-menu-column": "",
+        ref,
+        ...rest
+      }
+    );
+  }
+);
+
+export { MegaMenuContent };
+//# sourceMappingURL=MegaMenuContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuContent.js","sources":["../src/mega-menu/MegaMenuContent.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 megaMenuContentCss from \"./MegaMenuContent.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuContent\");\n\nexport interface MegaMenuContentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the region.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuContent = forwardRef<HTMLDivElement, MegaMenuContentProps>(\n  function MegaMenuContent({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-content\",\n      css: megaMenuContentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        data-mega-menu-column=\"\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["MegaMenuContent","megaMenuContentCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAShD,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,SAASA,gBAAAA,CAAgB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACpD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA;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;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,9 @@
+import { createContext } from '@salt-ds/core';
+
+const MegaMenuContext = createContext(
+  "MegaMenuContext",
+  void 0
+);
+
+export { MegaMenuContext };
+//# sourceMappingURL=MegaMenuContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuContext.js","sources":["../src/mega-menu/MegaMenuContext.ts"],"sourcesContent":["import type { FloatingRootContext, Placement } from \"@floating-ui/react\";\nimport { createContext } from \"@salt-ds/core\";\nimport type { Dispatch, HTMLProps, SetStateAction } from \"react\";\n\nexport interface MegaMenuContextValue {\n  /** Whether the mega menu is currently open. */\n  openState: boolean;\n  /** Toggle or set the open state of the mega menu. */\n  setOpen: (open: boolean) => void;\n  /** The floating-ui root context for coordinating interactions. */\n  floatingRootContext: FloatingRootContext;\n  /** The placement of the mega menu panel relative to the trigger. */\n  placement: Placement;\n  /** Props getter for the trigger (reference) element. Merges floating-ui interaction props with user props. */\n  getReferenceProps: (\n    userProps?: HTMLProps<Element> | undefined,\n  ) => Record<string, unknown>;\n  /** Props getter for the floating panel element. Merges floating-ui interaction props with user props. */\n  getFloatingProps: (\n    userProps?: HTMLProps<HTMLElement> | undefined,\n  ) => Record<string, unknown>;\n  /** Ref setter for the floating panel element. */\n  setFloating: Dispatch<SetStateAction<HTMLElement | null>>;\n  /** Ref setter for the trigger (reference) element. */\n  setReference: Dispatch<SetStateAction<HTMLElement | null>>;\n  /** Whether the first item should receive focus when the panel opens. */\n  focusFirstItemOnOpen: boolean;\n  /** Toggle the focus-first-item-on-open flag. */\n  setFocusFirstItemOnOpen: Dispatch<SetStateAction<boolean>>;\n  /** The id of the mega menu panel, used for aria-controls on the trigger. */\n  panelId: string | undefined;\n  /** Set the panel id when the panel mounts. */\n  setPanelId: Dispatch<SetStateAction<string | undefined>>;\n}\n\nexport const MegaMenuContext = createContext<MegaMenuContextValue | undefined>(\n  \"MegaMenuContext\",\n  undefined,\n);\n"],"names":[],"mappings":";;AAmCO,MAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuGroup {\n  display: flex;\n  flex-direction: column;\n}\n\n.saltMegaMenuGroup-list {\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=MegaMenuGroup.css.js.map

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

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

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

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId } 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 css_248z from './MegaMenuGroup.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuGroup");
+function isMegaMenuHeader(child) {
+  var _a;
+  return !!((_a = child.type) == null ? void 0 : _a.__isMegaMenuHeader);
+}
+const MegaMenuGroup = forwardRef(
+  function MegaMenuGroup2({ children, className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-group",
+      css: css_248z,
+      window: targetWindow
+    });
+    const headerId = useId();
+    let header = null;
+    const items = [];
+    Children.forEach(children, (child) => {
+      if (isValidElement(child) && isMegaMenuHeader(child) && !header) {
+        header = cloneElement(child, { id: headerId });
+      } else {
+        items.push(child);
+      }
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(withBaseName(), className),
+        "data-mega-menu-column": "",
+        ref,
+        ...rest,
+        children: [
+          header,
+          /* @__PURE__ */ jsx(
+            "ol",
+            {
+              className: withBaseName("list"),
+              "aria-labelledby": header ? headerId : void 0,
+              children: items
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { MegaMenuGroup };
+//# sourceMappingURL=MegaMenuGroup.js.map

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

@@ -0,0 +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 ReactElement,\n  type ReactNode,\n} from \"react\";\nimport megaMenuGroupCss from \"./MegaMenuGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuGroup\");\n\nfunction isMegaMenuHeader(child: ReactElement): boolean {\n  return !!(child.type as { __isMegaMenuHeader?: boolean })?.__isMegaMenuHeader;\n}\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) && isMegaMenuHeader(child) && !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;AAErD,SAAS,iBAAiB,KAAA,EAA8B;AAjBxD,EAAA,IAAA,EAAA;AAkBE,EAAA,OAAO,CAAC,EAAA,CAAE,EAAA,GAAA,KAAA,CAAM,IAAA,KAAN,IAAA,GAAA,MAAA,GAAA,EAAA,CAAiD,kBAAA,CAAA;AAC7D;AASO,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,iBAAiB,KAAK,CAAA,IAAK,CAAC,MAAA,EAAQ;AAC/D,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;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuHeader-content {\n  display: flex;\n  align-items: center;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\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  min-height: var(--salt-size-base);\n  color: var(--salt-content-secondary-foreground);\n}\n.saltMegaMenuHeader {\n  margin-bottom: var(--salt-spacing-50);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuHeader.css.js.map

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

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

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

@@ -0,0 +1,24 @@
+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 css_248z from './MegaMenuHeader.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuHeader");
+const MegaMenuHeader = forwardRef(
+  function MegaMenuHeader2({ children, className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...rest, children: /* @__PURE__ */ jsx("div", { className: clsx(withBaseName("content")), children }) });
+  }
+);
+MegaMenuHeader.__isMegaMenuHeader = true;
+
+export { MegaMenuHeader };
+//# sourceMappingURL=MegaMenuHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuHeader.js","sources":["../src/mega-menu/MegaMenuHeader.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 megaMenuHeaderCss from \"./MegaMenuHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuHeader\");\n\nexport interface MegaMenuHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the mega menu header.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuHeader = forwardRef<HTMLDivElement, MegaMenuHeaderProps>(\n  function MegaMenuHeader({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-header\",\n      css: megaMenuHeaderCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <div className={clsx(withBaseName(\"content\"))}>{children}</div>\n      </div>\n    );\n  },\n);\n\n/** @internal Marker used by MegaMenuGroup to identify header children. */\n(MegaMenuHeader as any).__isMegaMenuHeader = true;\n"],"names":["MegaMenuHeader","megaMenuHeaderCss"],"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,SAAI,SAAA,EAAW,IAAA,CAAK,cAAa,EAAG,SAAS,GAAG,GAAA,EAAW,GAAG,MAC7D,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,YAAA,CAAa,SAAS,CAAC,CAAA,EAAI,UAAS,CAAA,EAC3D,CAAA;AAAA,EAEJ;AACF;AAGC,cAAA,CAAuB,kBAAA,GAAqB,IAAA;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuItem {\n  list-style: none;\n}\n\n.saltMegaMenuItem > a {\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);\n  text-decoration: none;\n}\n\n.saltMegaMenuItem > a > .saltIcon {\n  display: flex;\n  height: var(--salt-size-base);\n  align-items: center;\n}\n\n.saltMegaMenuItem > a:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuItem > a:hover {\n  outline: none;\n  background: var(--salt-navigable-background-hover);\n}\n\n.saltMegaMenuItem > a:active {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuItem > a: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=MegaMenuItem.css.js.map

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

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

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

@@ -0,0 +1,50 @@
+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 } from 'react';
+import css_248z from './MegaMenuItem.css.js';
+import { useMegaMenu } from './useMegaMenu.js';
+
+const withBaseName = makePrefixer("saltMegaMenuItem");
+function ItemAction(props) {
+  return renderProps("a", props);
+}
+const MegaMenuItem = forwardRef(
+  function MegaMenuItem2({ children, className, href = "#", onClick, onKeyDown, ...rest }, ref) {
+    const targetWindow = useWindow();
+    const megaMenu = useMegaMenu();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    const handleClick = (event) => {
+      onClick == null ? void 0 : onClick(event);
+      megaMenu.setOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      if (!event.defaultPrevented && event.key === " ") {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+    return /* @__PURE__ */ jsx("li", { className: withBaseName(), ref, children: /* @__PURE__ */ jsx(
+      ItemAction,
+      {
+        className: clsx(withBaseName(), className),
+        "data-mega-menu-item": "",
+        href,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+
+export { MegaMenuItem };
+//# sourceMappingURL=MegaMenuItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuItem.js","sources":["../src/mega-menu/MegaMenuItem.tsx"],"sourcesContent":["import { makePrefixer, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport megaMenuItemCss from \"./MegaMenuItem.css\";\nimport { useMegaMenu } from \"./useMegaMenu\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuItem\");\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction ItemAction(props: ComponentPropsWithoutRef<any>) {\n  return renderProps(\"a\", props);\n}\n\nexport interface MegaMenuItemProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The content of the mega menu item.\n   */\n  children?: ReactNode;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nexport const MegaMenuItem = forwardRef<HTMLLIElement, MegaMenuItemProps>(\n  function MegaMenuItem(\n    { children, className, href = \"#\", onClick, onKeyDown, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const megaMenu = useMegaMenu();\n\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-item\",\n      css: megaMenuItemCss,\n      window: targetWindow,\n    });\n\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n      onClick?.(event);\n      megaMenu.setOpen(false);\n    };\n\n    // Native `<a>` activates on Enter but not Space — handle Space here for parity.\n    const handleKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n      onKeyDown?.(event);\n      if (!event.defaultPrevented && event.key === \" \") {\n        event.preventDefault();\n        event.currentTarget.click();\n      }\n    };\n\n    return (\n      <li className={withBaseName()} ref={ref}>\n        <ItemAction\n          className={clsx(withBaseName(), className)}\n          data-mega-menu-item=\"\"\n          href={href}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          {...rest}\n        >\n          {children}\n        </ItemAction>\n      </li>\n    );\n  },\n);\n"],"names":["MegaMenuItem","megaMenuItemCss"],"mappings":";;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAGpD,SAAS,WAAW,KAAA,EAAsC;AACxD,EAAA,OAAO,WAAA,CAAY,KAAK,KAAK,CAAA;AAC/B;AAcO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,QAAA,EAAU,SAAA,EAAW,IAAA,GAAO,GAAA,EAAK,OAAA,EAAS,SAAA,EAAW,GAAG,IAAA,EAAK,EAC/D,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,QAAA,CAAS,QAAQ,KAAK,CAAA;AAAA,IACxB,CAAA;AAGA,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4C;AACjE,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AACZ,MAAA,IAAI,CAAC,KAAA,CAAM,gBAAA,IAAoB,KAAA,CAAM,QAAQ,GAAA,EAAK;AAChD,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,KAAA,CAAM,cAAc,KAAA,EAAM;AAAA,MAC5B;AAAA,IACF,CAAA;AAEA,IAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,YAAA,IAAgB,GAAA,EAC7B,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,qBAAA,EAAoB,EAAA;AAAA,QACpB,IAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAW,aAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuItemContent {\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";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuItemContent.css.js.map

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

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

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

@@ -0,0 +1,21 @@
+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 css_248z from './MegaMenuItemContent.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuItemContent");
+const MegaMenuItemContent = forwardRef(function MegaMenuItemContent2({ children, className, ...restProps }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-mega-menu-item-content",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ...restProps, ref, children });
+});
+
+export { MegaMenuItemContent };
+//# sourceMappingURL=MegaMenuItemContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuItemContent.js","sources":["../src/mega-menu/MegaMenuItemContent.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 megaMenuItemContent from \"./MegaMenuItemContent.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuItemContent\");\n\nexport interface MegaMenuItemContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Mega Menu Item.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuItemContent = forwardRef<\n  HTMLDivElement,\n  MegaMenuItemContentProps\n>(function MegaMenuItemContent({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-mega-menu-item-content\",\n    css: megaMenuItemContent,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["MegaMenuItemContent","megaMenuItemContent"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAUpD,MAAM,mBAAA,GAAsB,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AACzE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,6BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC7D,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +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";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuPanel.css.js.map

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

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

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

@@ -0,0 +1,106 @@
+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 { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import css_248z from './MegaMenuPanel.css.js';
+import { useMegaMenu } from './useMegaMenu.js';
+
+const withBaseName = makePrefixer("saltMegaMenuPanel");
+const MegaMenuPanel = forwardRef(
+  function MegaMenuPanel2({ children, className, id: idProp, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-panel",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const {
+      openState: isOpen,
+      floatingRootContext,
+      placement,
+      getFloatingProps,
+      setFloating,
+      focusFirstItemOnOpen,
+      setPanelId
+    } = useMegaMenu();
+    const id = useId(idProp);
+    useEffect(() => {
+      setPanelId(id);
+      return () => setPanelId(void 0);
+    }, [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 floatingUIResult = useFloatingUI({
+      rootContext: floatingRootContext,
+      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`
+            );
+          }
+        })
+      ]
+    });
+    const floatingProps = getFloatingProps();
+    return /* @__PURE__ */ jsx(
+      FloatingComponent,
+      {
+        open: isOpen,
+        position: floatingUIResult.strategy,
+        top: floatingUIResult.y ?? 0,
+        left: floatingUIResult.x ?? 0,
+        focusManagerProps: {
+          context: floatingUIResult.context,
+          modal: false,
+          initialFocus: focusFirstItemOnOpen ? 0 : -1,
+          returnFocus: true,
+          closeOnFocusOut: false,
+          guards: false
+        },
+        ref: setFloating,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(withBaseName(), className),
+            id,
+            role: "region",
+            ref,
+            ...floatingProps,
+            ...rest,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+
+export { MegaMenuPanel };
+//# sourceMappingURL=MegaMenuPanel.js.map

package/dist-es/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":["MegaMenuPanel","megaMenuPanelCss"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+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";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuSection.css.js.map

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

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

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

@@ -0,0 +1,23 @@
+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 css_248z from './MegaMenuSection.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuSection");
+const MegaMenuSection = forwardRef(
+  function MegaMenuSection2({ children, className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-section",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...rest, children });
+  }
+);
+
+export { MegaMenuSection };
+//# sourceMappingURL=MegaMenuSection.js.map

package/dist-es/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":["MegaMenuSection","megaMenuSectionCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAShD,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,SAASA,iBAAgB,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC9D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;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;;;;"}