@salt-ds/lab 1.0.0-alpha.94 → 1.0.0-alpha.96

package/CHANGELOG.md

@@ -1,5 +1,162 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.96
+
+### Minor Changes
+
+- 248982a: Reworked `MegaMenu` for more semantic, accessible markup and more predictable
+  keyboard navigation.
+
+  - **Renamed `MegaMenuHeader` to `MegaMenuGroupHeading`.** It now renders a real heading (`<h3>` by default; set the level with `as`, e.g. `as="h2"`) instead of a `<div>`, so each group appears in the document outline for assistive technology.
+  - **Renamed `MegaMenuItem` to `MegaMenuListItem`.** It renders an `<a>` by default — pass a `render` element such as `react-router`'s `Link` — and accepts a `current` prop that sets `aria-current="page"` for the active page.
+  - **Added `MegaMenuList`.** Wrap a group's items in it so they are announced as a list; `MegaMenuListItem` can no longer be placed directly inside `MegaMenuGroup`.
+  - **Renamed `MegaMenuSupportingContent` to `MegaMenuAside`.** It now renders an `<aside>` landmark, making the supporting region discoverable to screen-reader users.
+  - **Renamed `MegaMenuSupportingActions` to `MegaMenuActions`.**
+  - **Added `MegaMenuContent`.** It is the center navigation region holding the groups and an optional `MegaMenuActions` band; `MegaMenuAside` sits beside it, positioned by source order.
+  - **Narrowed `MegaMenu`'s `placement` prop** to `"bottom" | "bottom-start" | "bottom-end"` (the new `MegaMenuPlacement` type).
+  - **Menu columns now adapt to the available width** instead of overflowing, keeping panels usable on narrower viewports.
+  - **Keyboard navigation is more predictable** between the columns, the actions row, and the trigger;
+
+  ```diff
+    <MegaMenuPanel aria-label="Solutions menu">
+  +   <MegaMenuContent>
+        <MegaMenuGroups>
+          <MegaMenuGroup>
+  -         <MegaMenuHeader>Financial services</MegaMenuHeader>
+  -         <MegaMenuItem render={<Link to="/digital-banking" />}>Digital banking</MegaMenuItem>
+  +         <MegaMenuGroupHeading>Financial services</MegaMenuGroupHeading>
+  +         <MegaMenuList>
+  +           <MegaMenuListItem render={<Link to="/digital-banking" />}>Digital banking</MegaMenuListItem>
+  +         </MegaMenuList>
+          </MegaMenuGroup>
+        </MegaMenuGroups>
+  -     <MegaMenuSupportingActions>
+  +     <MegaMenuActions>
+          <Link href="#demo">Book a demo</Link>
+  -     </MegaMenuSupportingActions>
+  +     </MegaMenuActions>
+  +   </MegaMenuContent>
+  -   <MegaMenuSupportingContent>...</MegaMenuSupportingContent>
+  +   <MegaMenuAside>...</MegaMenuAside>
+    </MegaMenuPanel>
+  ```
+
+### Patch Changes
+
+- bab3b6c: Fixed `ToolbarNext` overflow calculations to preserve fractional browser measurements and avoid false overflow caused by subpixel rounding.
+- Updated dependencies [1a48c1a]
+  - @salt-ds/core@1.64.1
+
+## 1.0.0-alpha.95
+
+### Minor Changes
+
+- 8043fee: Updated `MegaMenu` with several API improvements:
+
+  - **Renamed `MegaMenuSection` to `MegaMenuGroups`.** The associated CSS custom property `--saltMegaMenuSection-columnWidth` has been renamed to `--saltMegaMenuGroups-columnWidth`.
+  - **Renamed `MegaMenuContent` to `MegaMenuSupportingContent`** to better convey its purpose as a region for supporting content alongside the menu groups.
+  - **Removed `MegaMenuItemContent`.** Pass the label directly to `MegaMenuItem`.
+  - **Added `MegaMenuSupportingActions`.** Use it to group one or more supporting action links beneath the menu groups in a `MegaMenuPanel`.
+  - **Added a `render` prop to `MegaMenuItem`** for integration with custom link or routing components (such as `react-router`'s `Link`).
+
+  ```diff
+  - <MegaMenuSection>
+  + <MegaMenuGroups>
+      <MegaMenuGroup>
+        <MegaMenuHeader>Financial services</MegaMenuHeader>
+  -     <MegaMenuItem>
+  -       <Icon aria-hidden />
+  -       <MegaMenuItemContent>Digital banking</MegaMenuItemContent>
+  -     </MegaMenuItem>
+  +     <MegaMenuItem render={<Link to="/digital-banking" />}>
+  +       <Icon aria-hidden />
+  +       Digital banking
+  +     </MegaMenuItem>
+      </MegaMenuGroup>
+  - </MegaMenuSection>
+  + </MegaMenuGroups>
+  - <MegaMenuContent>...</MegaMenuContent>
+  + <MegaMenuSupportingContent>...</MegaMenuSupportingContent>
+  + <MegaMenuSupportingActions>
+  +   <Link href="#demo" IconComponent={ChevronRightIcon}>Book a demo</Link>
+  + </MegaMenuSupportingActions>
+  ```
+
+- 8687aa7: Date-related components and utilities are no longer re-exported from `@salt-ds/lab`. Update the import source to `@salt-ds/date-components`.
+
+  The exact set of components depends on the selection variant you're using.
+
+  **Single-date selection** (`DateInputSingle`, single `DatePicker`, `DatePickerSingleInput`, `DatePickerSingleGridPanel`, single `Calendar`):
+
+  ```diff
+    import {
+      type DateInputSingleDetails,
+      DateInputSingle,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerSingleGridPanel,
+      DatePickerSingleInput,
+      DatePickerTrigger,
+      type SingleDateSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+  **Range selection** (`DateInputRange`, range `DatePicker`, `DatePickerRangeInput`, `DatePickerRangePanel`, `DatePickerRangeGridPanel`, range `Calendar`):
+
+  ```diff
+    import {
+      type DateInputRangeDetails,
+      DateInputRange,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerRangeGridPanel,
+      DatePickerRangeInput,
+      DatePickerRangePanel,
+      DatePickerTrigger,
+      type DateRangeSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+  **Offset selection** (offset `Calendar`; offset `DatePicker` built from the range input + range panel with `selectionVariant="offset"`):
+
+  ```diff
+    import {
+      type DateRangeSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerRangeInput,
+      DatePickerRangePanel,
+      DatePickerTrigger,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+### Patch Changes
+
+- 4314ca5: Fixed `ToolbarNext` focus handling when composing multiselect `ComboBox` controls, preserving pill keyboard navigation and preventing focus flashes when restoring toolbar focus.
+- Updated dependencies [9729a10]
+- Updated dependencies [52daa64]
+- Updated dependencies [ed2779c]
+- Updated dependencies [07e4d5d]
+  - @salt-ds/core@1.64.0
+
 ## 1.0.0-alpha.94
 
 ### Minor Changes

package/css/salt-lab.css

@@ -1893,9 +1893,31 @@
   border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
 }
 
+/* src/mega-menu/MegaMenuActions.css */
+.saltMegaMenuActions {
+  display: flex;
+  flex-wrap: wrap;
+  margin-block-start: auto;
+}
+
+/* src/mega-menu/MegaMenuAside.css */
+.saltMegaMenuAside {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  padding: var(--salt-spacing-300);
+}
+
 /* src/mega-menu/MegaMenuContent.css */
 .saltMegaMenuContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-300);
   padding: var(--salt-spacing-300);
+  min-width: 0;
+  flex: 0 1 auto;
+  max-inline-size: var(--saltMegaMenuPanel-availableWidth);
+  box-sizing: border-box;
 }
 
 /* src/mega-menu/MegaMenuGroup.css */
@@ -1903,37 +1925,49 @@
   display: flex;
   flex-direction: column;
 }
-.saltMegaMenuGroup-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  gap: var(--salt-spacing-fixed-100);
-  flex-direction: column;
-}
 
-/* src/mega-menu/MegaMenuHeader.css */
-.saltMegaMenuHeader-content {
+/* src/mega-menu/MegaMenuGroupHeading.css */
+.saltMegaMenuGroupHeading {
   display: flex;
   align-items: center;
+  margin: 0 0 var(--salt-spacing-50);
   padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+  min-height: var(--salt-size-base);
   font-family: var(--salt-text-label-fontFamily);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-fontWeight-strong);
   line-height: var(--salt-text-label-lineHeight);
-  min-height: var(--salt-size-base);
   color: var(--salt-content-secondary-foreground);
 }
-.saltMegaMenuHeader {
-  margin-bottom: var(--salt-spacing-50);
-  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+
+/* src/mega-menu/MegaMenuGroups.css */
+.saltMegaMenuGroups {
+  align-self: start;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, var(--saltMegaMenuGroups-columnWidth, 12rem)));
+  gap: var(--salt-spacing-300);
+  min-width: 0;
+  max-inline-size: var(--saltMegaMenuPanel-availableWidth);
+}
+
+/* src/mega-menu/MegaMenuList.css */
+.saltMegaMenuList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--salt-spacing-fixed-100);
+  flex-direction: column;
 }
 
-/* src/mega-menu/MegaMenuItem.css */
-.saltMegaMenuItem {
+/* src/mega-menu/MegaMenuListItem.css */
+.saltMegaMenuListItem {
   list-style: none;
+  display: flex;
+  flex-direction: column;
 }
-.saltMegaMenuItem > a {
+.saltMegaMenuListItem-wrapper {
   display: flex;
   padding: var(--salt-spacing-50) var(--salt-spacing-100);
   align-items: flex-start;
@@ -1944,26 +1978,37 @@
   box-sizing: border-box;
   gap: var(--salt-spacing-100);
   position: relative;
-  border-radius: var(--salt-palette-corner-weak);
+  border-radius: var(--salt-palette-corner-weak, 0);
   text-decoration: none;
+  border: none;
+  font: inherit;
+  text-align: start;
 }
-.saltMegaMenuItem > a > .saltIcon {
+.saltMegaMenuListItem-wrapper > .saltIcon {
   display: flex;
   height: var(--salt-size-base);
   align-items: center;
 }
-.saltMegaMenuItem > a:focus-visible {
+.saltMegaMenuListItem-content {
+  flex: 1 0;
+  margin: var(--salt-spacing-75) 0;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+}
+.saltMegaMenuListItem-wrapper:focus-visible {
   outline: var(--salt-focused-outline);
   outline-offset: calc(var(--salt-size-fixed-100) * -2);
 }
-.saltMegaMenuItem > a:hover {
+.saltMegaMenuListItem-wrapper:hover:not(:focus-visible) {
   outline: none;
-  background: var(--salt-navigable-background-hover);
+  background: var(--salt-overlayable-background-hover);
 }
-.saltMegaMenuItem > a:active {
+.saltMegaMenuListItem-wrapper:active {
   background: var(--salt-navigable-accent-background-active);
 }
-.saltMegaMenuItem > a:active::before {
+.saltMegaMenuListItem-wrapper:active::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -1973,39 +2018,21 @@
   pointer-events: none;
 }
 
-/* src/mega-menu/MegaMenuItemContent.css */
-.saltMegaMenuItemContent {
-  flex: 1 0;
-  margin: var(--salt-spacing-75) 0;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
-}
-
 /* src/mega-menu/MegaMenuPanel.css */
 .saltMegaMenuPanel {
+  --saltMegaMenuPanel-availableWidth: calc(100vw - var(--salt-spacing-600));
   display: flex;
-  flex-wrap: wrap;
+  align-items: stretch;
   inline-size: var(--saltMegaMenuPanel-inlineSize, fit-content);
-  max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600))));
-  max-height: 90%;
+  max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth));
+  max-block-size: 90vh;
   overflow-x: hidden;
   overflow-y: auto;
   box-sizing: border-box;
-  border-radius: var(--salt-palette-corner);
+  border-radius: var(--salt-palette-corner, 0);
   border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
   background: var(--salt-container-primary-background);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-}
-
-/* src/mega-menu/MegaMenuSection.css */
-.saltMegaMenuSection {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuSection-columnWidth, 12rem));
-  gap: var(--salt-spacing-300);
-  padding: var(--salt-spacing-300);
-  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));
+  box-shadow: var(--salt-overlayable-shadow-modal);
 }
 
 /* src/menu-button/MenuButton.css */
@@ -3431,4 +3458,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/90f79509-9c05-4f28-ba07-621519e16301.css */
+/* src/e4ab0e63-880d-4ad2-9759-4acceca8a38d.css */

package/dist-cjs/index.js

@@ -5,7 +5,6 @@ var Breadcrumb = require('./breadcrumbs/Breadcrumb.js');
 var Breadcrumbs = require('./breadcrumbs/Breadcrumbs.js');
 var ButtonBar = require('./button-bar/ButtonBar.js');
 var OrderedButton = require('./button-bar/OrderedButton.js');
-var index = require('./calendar/index.js');
 var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
 var Color = require('./color-chooser/Color.js');
 var ColorChooser = require('./color-chooser/ColorChooser.js');
@@ -30,8 +29,6 @@ var ContactSecondaryInfo = require('./contact-details/ContactSecondaryInfo.js');
 var ContactTertiaryInfo = require('./contact-details/ContactTertiaryInfo.js');
 var MailLinkComponent = require('./contact-details/MailLinkComponent.js');
 var ContentStatus = require('./content-status/ContentStatus.js');
-var index$1 = require('./date-input/index.js');
-var index$2 = require('./date-picker/index.js');
 var DeckItem = require('./deck-item/DeckItem.js');
 var DeckLayout = require('./deck-layout/DeckLayout.js');
 var Dropdown = require('./dropdown/Dropdown.js');
@@ -78,18 +75,19 @@ var useOverflowDetection = require('./utils/useOverflowDetection.js');
 var useSlideSelection = require('./utils/useSlideSelection.js');
 var ListItemNext = require('./list-next/ListItemNext.js');
 var ListNext = require('./list-next/ListNext.js');
-var index$3 = require('./localization-provider/index.js');
 var Logo = require('./logo/Logo.js');
 var LogoImage = require('./logo/LogoImage.js');
 var LogoSeparator = require('./logo/LogoSeparator.js');
 var MegaMenu = require('./mega-menu/MegaMenu.js');
+var MegaMenuActions = require('./mega-menu/MegaMenuActions.js');
+var MegaMenuAside = require('./mega-menu/MegaMenuAside.js');
 var MegaMenuContent = require('./mega-menu/MegaMenuContent.js');
 var MegaMenuGroup = require('./mega-menu/MegaMenuGroup.js');
-var MegaMenuHeader = require('./mega-menu/MegaMenuHeader.js');
-var MegaMenuItem = require('./mega-menu/MegaMenuItem.js');
-var MegaMenuItemContent = require('./mega-menu/MegaMenuItemContent.js');
+var MegaMenuGroupHeading = require('./mega-menu/MegaMenuGroupHeading.js');
+var MegaMenuGroups = require('./mega-menu/MegaMenuGroups.js');
+var MegaMenuList = require('./mega-menu/MegaMenuList.js');
+var MegaMenuListItem = require('./mega-menu/MegaMenuListItem.js');
 var MegaMenuPanel = require('./mega-menu/MegaMenuPanel.js');
-var MegaMenuSection = require('./mega-menu/MegaMenuSection.js');
 var MegaMenuTrigger = require('./mega-menu/MegaMenuTrigger.js');
 var MenuButton = require('./menu-button/MenuButton.js');
 var Metric = require('./metric/Metric.js');
@@ -135,7 +133,6 @@ var ToolbarNext = require('./toolbar-next/ToolbarNext.js');
 var TooltrayNext = require('./toolbar-next/TooltrayNext.js');
 var ElectronWindow = require('./window/ElectronWindow.js');
 var WindowContext = require('./window/WindowContext.js');
-var dateComponents = require('@salt-ds/date-components');
 
 
 
@@ -145,16 +142,6 @@ exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
 exports.ButtonBar = ButtonBar.ButtonBar;
 exports.DefaultButtonsOrderByVariant = ButtonBar.DefaultButtonsOrderByVariant;
 exports.OrderedButton = OrderedButton.OrderedButton;
-exports.Calendar = index.Calendar;
-exports.CalendarGrid = index.CalendarGrid;
-exports.CalendarNavigation = index.CalendarNavigation;
-exports.CalendarWeekHeader = index.CalendarWeekHeader;
-exports.isDateRangeSelection = index.isDateRangeSelection;
-exports.useCalendar = index.useCalendar;
-exports.useCalendarDay = index.useCalendarDay;
-exports.useCalendarSelection = index.useCalendarSelection;
-exports.useCalendarSelectionDay = index.useCalendarSelectionDay;
-exports.useDateSelectionAnnouncer = index.useDateSelectionAnnouncer;
 exports.CascadingMenu = CascadingMenu.CascadingMenu;
 exports.Color = Color.Color;
 exports.ColorChooser = ColorChooser.ColorChooser;
@@ -186,21 +173,6 @@ exports.ContactSecondaryInfo = ContactSecondaryInfo.ContactSecondaryInfo;
 exports.ContactTertiaryInfo = ContactTertiaryInfo.ContactTertiaryInfo;
 exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
 exports.ContentStatus = ContentStatus.ContentStatus;
-exports.DateInputRange = index$1.DateInputRange;
-exports.DateInputSingle = index$1.DateInputSingle;
-exports.DatePicker = index$2.DatePicker;
-exports.DatePickerActions = index$2.DatePickerActions;
-exports.DatePickerHelperText = index$2.DatePickerHelperText;
-exports.DatePickerOverlay = index$2.DatePickerOverlay;
-exports.DatePickerOverlayProvider = index$2.DatePickerOverlayProvider;
-exports.DatePickerRangeGridPanel = index$2.DatePickerRangeGridPanel;
-exports.DatePickerRangeInput = index$2.DatePickerRangeInput;
-exports.DatePickerRangePanel = index$2.DatePickerRangePanel;
-exports.DatePickerSingleGridPanel = index$2.DatePickerSingleGridPanel;
-exports.DatePickerSingleInput = index$2.DatePickerSingleInput;
-exports.DatePickerTrigger = index$2.DatePickerTrigger;
-exports.useDatePickerContext = index$2.useDatePickerContext;
-exports.useDatePickerOverlay = index$2.useDatePickerOverlay;
 exports.DeckItem = DeckItem.DeckItem;
 exports.DeckLayout = DeckLayout.DeckLayout;
 exports.Dropdown = Dropdown.Dropdown;
@@ -242,19 +214,19 @@ exports.useOverflowDetection = useOverflowDetection.useOverflowDetection;
 exports.useSlideSelection = useSlideSelection.useSlideSelection;
 exports.ListItemNext = ListItemNext.ListItemNext;
 exports.ListNext = ListNext.ListNext;
-exports.LocalizationProvider = index$3.LocalizationProvider;
-exports.useLocalization = index$3.useLocalization;
 exports.Logo = Logo.Logo;
 exports.LogoImage = LogoImage.LogoImage;
 exports.LogoSeparator = LogoSeparator.LogoSeparator;
 exports.MegaMenu = MegaMenu.MegaMenu;
+exports.MegaMenuActions = MegaMenuActions.MegaMenuActions;
+exports.MegaMenuAside = MegaMenuAside.MegaMenuAside;
 exports.MegaMenuContent = MegaMenuContent.MegaMenuContent;
 exports.MegaMenuGroup = MegaMenuGroup.MegaMenuGroup;
-exports.MegaMenuHeader = MegaMenuHeader.MegaMenuHeader;
-exports.MegaMenuItem = MegaMenuItem.MegaMenuItem;
-exports.MegaMenuItemContent = MegaMenuItemContent.MegaMenuItemContent;
+exports.MegaMenuGroupHeading = MegaMenuGroupHeading.MegaMenuGroupHeading;
+exports.MegaMenuGroups = MegaMenuGroups.MegaMenuGroups;
+exports.MegaMenuList = MegaMenuList.MegaMenuList;
+exports.MegaMenuListItem = MegaMenuListItem.MegaMenuListItem;
 exports.MegaMenuPanel = MegaMenuPanel.MegaMenuPanel;
-exports.MegaMenuSection = MegaMenuSection.MegaMenuSection;
 exports.MegaMenuTrigger = MegaMenuTrigger.MegaMenuTrigger;
 exports.MenuButton = MenuButton.MenuButton;
 exports.Metric = Metric.Metric;
@@ -328,16 +300,4 @@ exports.Window = WindowContext.Window;
 exports.WindowContext = WindowContext.WindowContext;
 exports.isDesktop = WindowContext.isDesktop;
 exports.useWindow = WindowContext.useWindow;
-Object.defineProperty(exports, "DateRangeSelectionContext", {
-  enumerable: true,
-  get: function () { return dateComponents.DateRangeSelectionContext; }
-});
-Object.defineProperty(exports, "LocalizationProviderContext", {
-  enumerable: true,
-  get: function () { return dateComponents.LocalizationProviderContext; }
-});
-Object.defineProperty(exports, "SingleDateSelectionContext", {
-  enumerable: true,
-  get: function () { return dateComponents.SingleDateSelectionContext; }
-});
 //# sourceMappingURL=index.js.map

package/dist-cjs/index.js.map

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

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

@@ -5,7 +5,7 @@ var react$1 = require('@floating-ui/react');
 var core = require('@salt-ds/core');
 var react = require('react');
 var MegaMenuContext = require('./MegaMenuContext.js');
-var useMegaMenuKeyboard = require('./useMegaMenuKeyboard.js');
+var useMegaMenuNavigation = require('./useMegaMenuNavigation.js');
 
 function MegaMenu({
   children,
@@ -22,12 +22,12 @@ function MegaMenu({
   });
   const [reference, setReference] = react.useState(null);
   const [floating, setFloating] = react.useState(null);
-  const [focusFirstItemOnOpen, setFocusFirstItemOnOpen] = react.useState(false);
-  const [panelId, setPanelId] = react.useState(void 0);
+  const focusFirstItemOnOpenRef = react.useRef(false);
+  const [panelId, setPanelId] = react.useState();
   const setOpen = react.useCallback(
     (newOpen) => {
       if (!newOpen) {
-        setFocusFirstItemOnOpen(false);
+        focusFirstItemOnOpenRef.current = false;
       }
       setOpenState(newOpen);
       onOpenChange == null ? void 0 : onOpenChange(newOpen);
@@ -39,11 +39,11 @@ function MegaMenu({
     onOpenChange: setOpen,
     elements: { reference, floating }
   });
-  const megaMenuKeyboard = useMegaMenuKeyboard.useMegaMenuKeyboard(floatingRootContext);
+  const megaMenuNavigation = useMegaMenuNavigation.useMegaMenuNavigation(floatingRootContext);
   const { getReferenceProps, getFloatingProps } = react$1.useInteractions([
     react$1.useClick(floatingRootContext),
     react$1.useDismiss(floatingRootContext),
-    megaMenuKeyboard
+    megaMenuNavigation
   ]);
   const contextValue = react.useMemo(
     () => ({
@@ -55,8 +55,7 @@ function MegaMenu({
       setFloating,
       setReference,
       setOpen,
-      focusFirstItemOnOpen,
-      setFocusFirstItemOnOpen,
+      focusFirstItemOnOpenRef,
       panelId,
       setPanelId
     }),
@@ -66,13 +65,8 @@ function MegaMenu({
       placement,
       getFloatingProps,
       getReferenceProps,
-      setFloating,
-      setReference,
       setOpen,
-      focusFirstItemOnOpen,
-      setFocusFirstItemOnOpen,
-      panelId,
-      setPanelId
+      panelId
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(MegaMenuContext.MegaMenuContext.Provider, { value: contextValue, children });

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

@@ -1 +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":["useControlled","useState","useCallback","useFloatingRootContext","useMegaMenuKeyboard","useInteractions","useClick","useDismiss","useMemo","MegaMenuContext"],"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,GAAIA,kBAAA,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,GAAIC,eAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAIA,eAAS,KAAK,CAAA;AACtE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAA6B,MAAS,CAAA;AAEpE,EAAA,MAAM,OAAA,GAAUC,iBAAA;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,sBAAsBC,8BAAA,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,GAAmBC,wCAAoB,mBAAmB,CAAA;AAEhE,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAA,EAAiB,GAAIC,uBAAA,CAAgB;AAAA,IAC9DC,iBAAS,mBAAmB,CAAA;AAAA,IAC5BC,mBAAW,mBAAmB,CAAA;AAAA,IAC9B;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAA,GAAeC,aAAA;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,sCACGC,+BAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,cAC9B,QAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"MegaMenu.js","sources":["../src/mega-menu/MegaMenu.tsx"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useFloatingRootContext,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { type ReactNode, useCallback, useMemo, useRef, useState } from \"react\";\nimport { MegaMenuContext } from \"./MegaMenuContext\";\nimport { useMegaMenuNavigation } from \"./useMegaMenuNavigation\";\n\n/**\n * Supported placements for the mega menu panel.\n */\nexport type MegaMenuPlacement = \"bottom\" | \"bottom-start\" | \"bottom-end\";\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?: MegaMenuPlacement;\n}\n\n/**\n * Root of a mega menu, coordinating its trigger and panel.\n *\n * Not intended to be nested inside another floating overlay (e.g. a dialog or\n * popover): the mega menu does not participate in floating-ui's `FloatingTree`\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 focusFirstItemOnOpenRef = useRef(false);\n  const [panelId, setPanelId] = useState<string>();\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      if (!newOpen) {\n        focusFirstItemOnOpenRef.current = 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 megaMenuNavigation = useMegaMenuNavigation(floatingRootContext);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(floatingRootContext),\n    useDismiss(floatingRootContext),\n    megaMenuNavigation,\n  ]);\n\n  const contextValue = useMemo(\n    () => ({\n      openState,\n      floatingRootContext,\n      placement,\n      getFloatingProps,\n      getReferenceProps,\n      setFloating,\n      setReference,\n      setOpen,\n      focusFirstItemOnOpenRef,\n      panelId,\n      setPanelId,\n    }),\n    [\n      openState,\n      floatingRootContext,\n      placement,\n      getFloatingProps,\n      getReferenceProps,\n      setOpen,\n      panelId,\n    ],\n  );\n\n  return (\n    <MegaMenuContext.Provider value={contextValue}>\n      {children}\n    </MegaMenuContext.Provider>\n  );\n}\n"],"names":["useControlled","useState","useRef","useCallback","useFloatingRootContext","useMegaMenuNavigation","useInteractions","useClick","useDismiss","useMemo","MegaMenuContext"],"mappings":";;;;;;;;;AA+CO,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,GAAIA,kBAAA,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,GAAIC,eAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,uBAAA,GAA0BC,aAAO,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAID,cAAA,EAAiB;AAE/C,EAAA,MAAM,OAAA,GAAUE,iBAAA;AAAA,IACd,CAAC,OAAA,KAAqB;AACpB,MAAA,IAAI,CAAC,OAAA,EAAS;AACZ,QAAA,uBAAA,CAAwB,OAAA,GAAU,KAAA;AAAA,MACpC;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,sBAAsBC,8BAAA,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,kBAAA,GAAqBC,4CAAsB,mBAAmB,CAAA;AAEpE,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAA,EAAiB,GAAIC,uBAAA,CAAgB;AAAA,IAC9DC,iBAAS,mBAAmB,CAAA;AAAA,IAC5BC,mBAAW,mBAAmB,CAAA;AAAA,IAC9B;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAA,GAAeC,aAAA;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,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,OAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,sCACGC,+BAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,cAC9B,QAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltMegaMenuActions {\n  display: flex;\n  flex-wrap: wrap;\n  margin-block-start: auto;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MegaMenuActions.css.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuActions.js","sources":["../src/mega-menu/MegaMenuActions.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 megaMenuActionsCss from \"./MegaMenuActions.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuActions\");\n\nexport interface MegaMenuActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the actions. Place `MegaMenuActions` inside\n   * `MegaMenuContent`, after `MegaMenuGroups`; it renders as a band beneath the\n   * groups, spanning their width.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuActions = forwardRef<HTMLDivElement, MegaMenuActionsProps>(\n  function MegaMenuActions({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-actions\",\n      css: megaMenuActionsCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        data-mega-menu-actions=\"\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MegaMenuActions","useWindow","useComponentCssInjection","megaMenuActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAWhD,MAAM,eAAA,GAAkBC,gBAAA;AAAA,EAC7B,SAASC,gBAAAA,CAAgB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACpD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,iBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,wBAAA,EAAuB,EAAA;AAAA,QACvB,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltMegaMenuAside {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  padding: var(--salt-spacing-300);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MegaMenuAside.css.js.map

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

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