@salt-ds/lab 1.0.0-alpha.73 → 1.0.0-alpha.75

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.75
+
+### Patch Changes
+
+- 8538730: Removed text selection background color override.
+- e08ae14: Fixed TabsNext using aria-actions when it's not supported.
+- 5d6210f: Fixed `CollapsibleTrigger` adding type="button" incorrectly to non-buttons.
+- 5d6210f: Updated `VerticalNavigation` to use a `<nav>` element as its root element.
+- Updated dependencies [846d975]
+- Updated dependencies [8538730]
+- Updated dependencies [8261887]
+- Updated dependencies [e6445dc]
+- Updated dependencies [ff646e2]
+- Updated dependencies [9a25824]
+- Updated dependencies [64ef723]
+  - @salt-ds/core@1.47.5
+
+## 1.0.0-alpha.74
+
+### Minor Changes
+
+- 7440996: A new component (`VerticalNavigation`) has been introduced to replace the existing `NavigationItem` component for vertical navigation. The new component provides a more structured and flexible way to create vertical navigation.
+- 7440996: Added `Collapsible`, `CollapsibleTrigger` and `CollapsiblePanel`.
+
+  Collapsible enables content to be either collapsed (hidden) or expanded (visible). It has two elements: a trigger and a panel whose visibility is controlled by the button.
+
+  ```tsx
+  <Collapsible>
+    <CollapsibleTrigger>
+      <Button>Click</Button>
+    </CollapsibleTrigger>
+    <CollapsiblePanel>Content</CollapsiblePanel>
+  </Collapsible>
+  ```
+
+### Patch Changes
+
+- d747775: Updated Table's footer text style to body strong.
+- Updated dependencies [c58279f]
+- Updated dependencies [239d20c]
+- Updated dependencies [fe8da62]
+  - @salt-ds/core@1.47.4
+
 ## 1.0.0-alpha.73
 
 ### Patch Changes

package/css/salt-lab.css

@@ -309,6 +309,28 @@
   --list-boxShadow: var(--salt-overlayable-shadow-popout);
 }
 
+/* src/collapsible/CollapsiblePanel.css */
+.saltCollapsiblePanel {
+  display: grid;
+  transition:
+    grid-template-rows var(--salt-duration-perceptible) ease-in-out,
+    opacity var(--salt-duration-perceptible) ease-in-out,
+    visibility var(--salt-duration-perceptible) ease-in-out;
+}
+.saltCollapsiblePanel[aria-hidden=true] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+}
+.saltCollapsiblePanel {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+}
+.saltCollapsiblePanel-inner {
+  overflow: hidden;
+}
+
 /* src/color-chooser/ColorChooser.css */
 .saltColorChooser-overlayButtonSwatch {
   margin-right: 10px;
@@ -1050,9 +1072,6 @@
 .saltDateInput-input:focus {
   outline: none;
 }
-.saltDateInput-input::selection {
-  background: var(--salt-content-foreground-highlight);
-}
 .saltDateInput-disabled .saltDateInput-input::selection {
   background: none;
 }
@@ -1698,9 +1717,6 @@
   outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));
   outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));
 }
-.saltInputLegacy-input::selection {
-  background-color: var(--saltInputLegacy-highlight-color, var(--salt-content-foreground-highlight));
-}
 .saltInputLegacy-input {
   background: var(--saltInputLegacy-background, none);
   border: none;
@@ -2452,9 +2468,6 @@
 .saltNumberInput-input:focus {
   outline: none;
 }
-.saltNumberInput-input::selection {
-  background: var(--salt-content-foreground-highlight);
-}
 .saltNumberInput-input::placeholder {
   color: var(--salt-content-secondary-foreground);
   font-weight: var(--salt-text-fontWeight-small);
@@ -2761,6 +2774,166 @@
   color: var(--salt-content-bold-foreground);
 }
 
+/* src/table/Table.css */
+.saltTable {
+  --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+  --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+  --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+}
+.saltTable-primary {
+  --table-background: var(--salt-container-primary-background);
+}
+.saltTable-secondary {
+  --table-background: var(--salt-container-secondary-background);
+}
+.saltTable-tertiary {
+  --table-background: var(--salt-container-tertiary-background);
+}
+.saltTable-divider-primary {
+  --table-divider-color: var(--salt-separable-primary-borderColor);
+}
+.saltTable-divider-secondary {
+  --table-divider-color: var(--salt-separable-secondary-borderColor);
+}
+.saltTable-divider-tertiary {
+  --table-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable-zebra-primary tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-primary-background);
+}
+table.saltTable-zebra-secondary tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-secondary-background);
+}
+table.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-tertiary-background);
+}
+table.saltTable {
+  border-spacing: 0;
+  border-radius: var(--salt-palette-corner, 0);
+  border-collapse: collapse;
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+  table-layout: fixed;
+  width: 100%;
+}
+table.saltTable thead {
+  border-start-start-radius: var(--salt-palette-corner);
+  border-start-end-radius: var(--salt-palette-corner);
+  color: var(--salt-content-secondary-foreground);
+  height: var(--table-header-height);
+  min-height: var(--table-header-height);
+  font-size: var(--salt-text-label-fontSize);
+  font-weight: var(--salt-text-label-fontWeight-strong);
+  line-height: var(--salt-text-label-lineHeight);
+  white-space: nowrap;
+}
+table.saltTable thead.saltTable-thead-sticky {
+  position: sticky;
+  top: 0;
+}
+table.saltTable thead.saltTable-thead-primary tr {
+  background: var(--salt-container-primary-background);
+}
+table.saltTable thead.saltTable-thead-secondary tr {
+  background: var(--salt-container-secondary-background);
+}
+table.saltTable thead.saltTable-thead-tertiary tr {
+  background: var(--salt-container-tertiary-background);
+}
+table.saltTable thead.saltTable-thead tr {
+  border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable thead.saltTable-thead-divider-primary {
+  --table-header-divider-color: var(--salt-separable-primary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-secondary {
+  --table-header-divider-color: var(--salt-separable-secondary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-tertiary {
+  --table-header-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-none {
+  --table-header-divider-color: transparent;
+}
+table.saltTable tfoot {
+  border-end-start-radius: var(--salt-palette-corner);
+  border-end-end-radius: var(--salt-palette-corner);
+  color: var(--salt-content-primary-foreground);
+  height: var(--table-footer-height);
+  min-height: var(--table-footer-height);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+  font-weight: var(--salt-text-fontWeight-strong);
+  white-space: nowrap;
+}
+table.saltTable tfoot.saltTable-tfoot-sticky {
+  position: sticky;
+  bottom: 0;
+}
+table.saltTable tfoot.saltTable-tfoot tr {
+  border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable tfoot.saltTable-tfoot-primary tr {
+  background: var(--salt-container-primary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-secondary tr {
+  background: var(--salt-container-secondary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-tertiary tr {
+  background: var(--salt-container-tertiary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-primary tr {
+  --table-footer-divider-color: var(--salt-separable-primary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-secondary tr {
+  --table-footer-divider-color: var(--salt-separable-secondary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {
+  --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-none tr {
+  --table-footer-divider-color: transparent;
+}
+table.saltTable th {
+  overflow: hidden;
+  padding: var(--salt-spacing-100);
+  position: relative;
+  text-align: start;
+}
+.table.saltTable th[scope=row] {
+  font-weight: var(--salt-text-fontWeight-strong);
+  line-height: var(--salt-text-lineHeight);
+}
+table.saltTable th + th::before {
+  --table-th-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-fixed-100));
+  background: var(--salt-separable-tertiary-borderColor);
+  content: "";
+  position: absolute;
+  z-index: 1;
+  display: block;
+  width: var(--salt-size-border);
+  height: var(--table-th-separator-height);
+  top: calc(50% - var(--table-th-separator-height) * 0.5);
+  left: 0;
+}
+table.saltTable tr {
+  background: var(--table-background);
+  height: var(--table-row-height);
+  min-height: var(--table-row-height);
+}
+table.saltTable tbody tr:not(:last-child) {
+  border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable-divider-none tbody tr {
+  --table-divider-color: transparent;
+}
+table.saltTable td {
+  height: 100%;
+  padding: var(--salt-spacing-100);
+}
+
 /* src/tabs/Tab.css */
 .saltTab {
   --saltEditableLabel-padding: 0;
@@ -2901,12 +3074,8 @@
 }
 
 /* src/tabs/TabActivationIndicator.css */
-.saltTabActivationIndicator-no-background {
-  --tabs-activationIndicator-background: transparent !important;
-}
 .saltTabActivationIndicator {
-  --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);
-  background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));
+  background: var(--saltTabs-activationIndicator-background, var(--salt-container-primary-borderColor));
   height: var(--saltTabs-activationIndicator-height, auto);
   inset: var(--tabs-activationIndicator-inset);
   position: absolute;
@@ -3539,9 +3708,6 @@
 .saltTokenizedInputNext-textarea:focus {
   outline: none;
 }
-.saltTokenizedInputNext-textarea::selection {
-  background: var(--salt-content-foreground-highlight);
-}
 .saltTokenizedInputNext-focused {
   --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);
   --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-fixed-200);
@@ -3979,6 +4145,154 @@
   width: 12px;
 }
 
+/* src/vertical-navigation/VerticalNavigation.css */
+.saltVerticalNavigation ol {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+.saltVerticalNavigationSubMenu > .saltDivider-horizontal,
+.saltVerticalNavigationItem > .saltDivider-horizontal,
+.saltVerticalNavigation ol > .saltDivider-horizontal {
+  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
+}
+.saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner {
+  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
+}
+.saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+}
+.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner,
+.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner {
+  margin-bottom: 0;
+}
+.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu,
+.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
+  border-bottom: none;
+}
+
+/* src/vertical-navigation/VerticalNavigationItemContent.css */
+.saltVerticalNavigationItemContent {
+  --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));
+  --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {
+  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
+  --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
+  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
+  --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));
+}
+.saltVerticalNavigationItemContent {
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  appearance: none;
+  -webkit-appearance: none;
+  white-space: pre;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  min-width: 4em;
+  padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weak, 0);
+  overflow: hidden;
+  cursor: var(--salt-cursor-hover);
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-text-h4-fontWeight);
+  font-family: var(--salt-text-h4-fontFamily);
+  text-align: var(--salt-text-textAlign);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-h4-lineHeight);
+  font-size: var(--salt-text-h4-fontSize);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {
+  background: var(--salt-navigable-accent-background-active);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {
+  left: var(--salt-spacing-50);
+  content: "";
+  position: absolute;
+  height: var(--salt-size-base);
+  border-radius: var(--salt-palette-corner-strongest);
+  width: var(--salt-size-indicator);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {
+  background: var(--salt-navigable-accent-indicator-active);
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {
+  background: var(--salt-navigable-accent-background-active);
+  border-color: var(--salt-navigable-accent-borderColor-active);
+}
+.saltVerticalNavigationItemContent .saltIcon,
+.saltVerticalNavigationItemContent .saltBadge {
+  min-height: var(--salt-text-lineHeight);
+}
+.saltVerticalNavigationItemContent-focused {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+  z-index: 1;
+}
+.saltVerticalNavigationItemContent:hover {
+  background: var(--salt-navigable-background-hover);
+}
+.saltVerticalNavigation .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {
+  font-weight: var(--salt-text-h4-fontWeight);
+}
+@supports selector(:has(*)) {
+  .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {
+    background: linear-gradient(var(--salt-navigable-background-hover), var(--salt-navigable-background-hover)) var(--salt-navigable-accent-background-active);
+  }
+}
+
+/* src/vertical-navigation/VerticalNavigationItemLabel.css */
+.saltVerticalNavigationItemLabel {
+  flex: 1;
+}
+
+/* src/vertical-navigation/VerticalNavigationItemTrigger.css */
+.saltVerticalNavigationItemTrigger {
+  all: unset;
+  padding: var(--salt-spacing-75) 0;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+}
+.saltVerticalNavigationItemTrigger::before {
+  content: "";
+  display: block;
+  width: 100%;
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+/* src/vertical-navigation/VerticalNavigationSubMenu.css */
+.saltVerticalNavigationSubMenu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  padding: var(--salt-spacing-fixed-100) 0 0;
+  margin: 0;
+}
+.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {
+  font-weight: var(--salt-text-h4-fontWeight-small);
+}
+
 /* src/window/ElectronWindow.css */
 .saltWindow {
   --saltDialog-boxShadow: none;
@@ -4222,4 +4536,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/0418c448-15fe-4a92-87ef-3abef3bd7323.css */
+/* src/488767dd-9d4f-43da-a25d-e000701919fe.css */

package/dist-cjs/app-header/AppHeader.js

@@ -16,7 +16,11 @@ var AppHeader$1 = require('./AppHeader.css.js');
 
 const withBaseName = core.makePrefixer("saltAppHeader");
 const AppHeader = react.forwardRef(
-  ({ children, className, ...rest }, ref) => {
+  ({
+    children,
+    className
+    // ...rest
+  }, ref) => {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-app-header",

package/dist-cjs/app-header/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { Toolbar } from \"../toolbar\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-app-header\",\n      css: appHeaderCss,\n      window: targetWindow,\n    });\n\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","appHeaderCss","jsx","Toolbar","clsx","MenuIcon"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAI1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAQ,KAAA;AACzC,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAOD,IACE,uBAAAC,cAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,kBAAA,iCAAqBC,cAAS,EAAA,EAAA,CAAA;AAAA,QAG7B;AAAA;AAAA,KACH;AAAA;AAeN;;;;"}
+{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { Toolbar } from \"../toolbar\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  (\n    {\n      children,\n      className,\n      // ...rest\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-app-header\",\n      css: appHeaderCss,\n      window: targetWindow,\n    });\n\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","appHeaderCss","jsx","Toolbar","clsx","MenuIcon"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAI1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA;AAAA;AAAA,KAGF,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAOD,IACE,uBAAAC,cAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,kBAAA,iCAAqBC,cAAS,EAAA,EAAA,CAAA;AAAA,QAG7B;AAAA;AAAA,KACH;AAAA;AAeN;;;;"}

package/dist-cjs/breadcrumbs/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text, type TooltipProps } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentType,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={clsx(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\"),\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={clsx(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\"),\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={clsx(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Breadcrumb","useWindow","useComponentCssInjection","breadcrumbCss","useBreadcrumbsContext","Children","jsx","Text","clsx","jsxs","Link"],"mappings":";;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAiB3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAYC,wCAAsB,EAAA;AAExE,IAAA,MAAM,WAAc,GAAAC,cAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cACE,mBAAAC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,CAAA;AAAA,QACT,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,SAAA;AAAA,UACA,aAAa,cAAc;AAAA,SAC7B;AAAA,QACA,OAAQ,EAAA,OAAA;AAAA,QAEP;AAAA;AAAA,KAGH,mBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAD,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,SAAA;AAAA,UACA;AAAA,YACE,CAAC,YAAA,CAAa,sBAAsB,CAAC,GAAG;AAAA,WAC1C;AAAA,UACA,aAAa,SAAS;AAAA,SACxB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,oBAASF,cAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA,UAC/C,WAAA,mCACEI,SAAK,EAAA,EAAA,OAAA,EAAS,GAAG,OAAQ,EAAA,OAAA,EAAS,GAAG,KAAA,EACnC,QACH,EAAA;AAAA;AAAA;AAAA,KAEJ;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACX,GAAG;AAAA,KACD,GAAA,cAAA;AAEJ,IACE,uBAAAJ,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAO,EAAA;AAAA,UACL,GAAG,cAAA;AAAA,UACH,UAAU,QAAY,IAAA,aAAA;AAAA,UACtB,UAAU,QAAY,IAAA;AAAA,SACxB;AAAA,QACA,SAAA,EAAWE,SAAK,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,QAC1C,GAAG,kBAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text, type TooltipProps } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentType,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport type { CascadingMenuProps } from \"../cascading-menu/CascadingMenuProps\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps\n  extends Pick<CascadingMenuProps, \"onItemClick\"> {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  overflowLabel?: string;\n  Icon?: ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={clsx(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\"),\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={clsx(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\"),\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={clsx(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Breadcrumb","useWindow","useComponentCssInjection","breadcrumbCss","useBreadcrumbsContext","Children","jsx","Text","clsx","jsxs","Link"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAiB3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAYC,wCAAsB,EAAA;AAExE,IAAA,MAAM,WAAc,GAAAC,cAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cACE,mBAAAC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,CAAA;AAAA,QACT,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,SAAA;AAAA,UACA,aAAa,cAAc;AAAA,SAC7B;AAAA,QACA,OAAQ,EAAA,OAAA;AAAA,QAEP;AAAA;AAAA,KAGH,mBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAD,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,SAAA;AAAA,UACA;AAAA,YACE,CAAC,YAAA,CAAa,sBAAsB,CAAC,GAAG;AAAA,WAC1C;AAAA,UACA,aAAa,SAAS;AAAA,SACxB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,oBAASF,cAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA,UAC/C,WAAA,mCACEI,SAAK,EAAA,EAAA,OAAA,EAAS,GAAG,OAAQ,EAAA,OAAA,EAAS,GAAG,KAAA,EACnC,QACH,EAAA;AAAA;AAAA;AAAA,KAEJ;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACX,GAAG;AAAA,KACD,GAAA,cAAA;AAEJ,IACE,uBAAAJ,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAO,EAAA;AAAA,UACL,GAAG,cAAA;AAAA,UACH,UAAU,QAAY,IAAA,aAAA;AAAA,UACtB,UAAU,QAAY,IAAA;AAAA,SACxB;AAAA,QACA,SAAA,EAAWE,SAAK,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,QAC1C,GAAG,kBAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/breadcrumbs/Breadcrumbs.js

@@ -18,7 +18,16 @@ function insertSeparators(items, className, separator, hideCurrentLevel, shouldR
     if (index < items.length - 1) {
       return acc.concat(
         current,
-        /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-hidden": true, className, children: separator }, `separator-${index}`)
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "li",
+          {
+            "aria-hidden": true,
+            className,
+            children: separator
+          },
+          `separator-${// biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here
+          index}`
+        )
       );
     }
     const skipLastElement = hideCurrentLevel && shouldRenderAllItems || hideCurrentLevel && !shouldRenderAllItems && itemsAfterCollapse !== 0;
@@ -38,7 +47,7 @@ const Breadcrumbs = react.forwardRef(
       itemsMinWidth: itemsMinWidthProp,
       itemsMaxWidth,
       wrap,
-      Menu,
+      Menu: _Menu,
       SeparatorProps = {},
       ...other
     } = props;

package/dist-cjs/breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\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  useMemo,\n} from \"react\";\nimport type { BreadcrumbProps } from \"./Breadcrumb\";\nimport breadcrumbsCss from \"./Breadcrumbs.css\";\nimport { BreadcrumbsCollapsed } from \"./internal/BreadcrumbsCollapsed\";\nimport { BreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { BreadcrumbsSeparator } from \"./internal/BreadcrumbsSeparator\";\n\nconst iconWidth = 12;\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction insertSeparators(\n  items: ReactNode[],\n  className?: string,\n  separator?: ReactNode,\n  hideCurrentLevel?: boolean,\n  shouldRenderAllItems?: boolean,\n  itemsAfterCollapse?: number,\n) {\n  return items.reduce((acc: ReactNode[], current: ReactNode, index: number) => {\n    if (index < items.length - 1) {\n      return acc.concat(\n        current,\n        <li aria-hidden className={className} key={`separator-${index}`}>\n          {separator}\n        </li>,\n      );\n    }\n    const skipLastElement =\n      (hideCurrentLevel && shouldRenderAllItems) ||\n      (hideCurrentLevel && !shouldRenderAllItems && itemsAfterCollapse !== 0);\n    return skipLastElement ? acc : acc.concat(current);\n  }, []);\n}\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  Menu?: any;\n  SeparatorProps?: IconProps;\n  hideCurrentLevel?: boolean;\n  itemsAfterCollapse?: number;\n  itemsBeforeCollapse?: number;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  maxItems?: number;\n  separator?: ReactNode;\n  wrap?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  function Breadcrumbs(props, ref) {\n    const {\n      children,\n      className,\n      itemsAfterCollapse = 1,\n      itemsBeforeCollapse = 1,\n      maxItems = 3,\n      separator: separatorProp,\n      hideCurrentLevel,\n      itemsMinWidth: itemsMinWidthProp,\n      itemsMaxWidth,\n      wrap,\n      Menu,\n      SeparatorProps = {},\n      ...other\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumbs\",\n      css: breadcrumbsCss,\n      window: targetWindow,\n    });\n\n    const itemsMinWidth =\n      itemsMinWidthProp != null ? itemsMinWidthProp : iconWidth;\n\n    const breadcrumbsContext = useMemo(\n      () => ({\n        wrap,\n        itemsMinWidth,\n        itemsMaxWidth,\n        liClass: withBaseName(\"li\"),\n      }),\n      [wrap, itemsMaxWidth, itemsMinWidth],\n    );\n\n    const separator = separatorProp || (\n      <BreadcrumbsSeparator {...SeparatorProps} />\n    );\n\n    const childrenArray = Children.toArray(children);\n    const shouldRenderAllItems =\n      wrap || maxItems == null || childrenArray.length <= maxItems;\n\n    const allItems = childrenArray\n      .filter(isValidElement)\n      .map((child, index) => {\n        const isLastChild = index === childrenArray.length - 1;\n\n        return cloneElement(child, {\n          isCurrentLevel: isLastChild,\n        } as BreadcrumbProps);\n      });\n\n    const renderItemsBeforeAndAfter = () => {\n      // This defends against someone passing weird input, to ensure that if all\n      // items would be shown anyway, we just show all items without the EllipsisItem\n      if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {\n        console.warn(\n          [\n            \"You have provided an invalid combination of properties to the Breadcrumbs.\",\n            `itemsAfterCollapse={${itemsAfterCollapse}} +itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`,\n          ].join(\"\\n\"),\n        );\n        return allItems;\n      }\n\n      const hiddenItems = allItems.slice(\n        itemsBeforeCollapse,\n        allItems.length - itemsAfterCollapse,\n      );\n      return [\n        ...allItems.slice(0, itemsBeforeCollapse),\n        <li className={withBaseName(\"li\")} key=\"breadcrumbs-collapsed\">\n          <BreadcrumbsCollapsed\n            accessibleText={`Breadcrumb levels ${itemsBeforeCollapse + 1} to ${\n              allItems.length - itemsAfterCollapse\n            }`}\n            className={withBaseName(\"overflowButton\")}\n          >\n            {hiddenItems}\n          </BreadcrumbsCollapsed>\n        </li>,\n        ...allItems.slice(\n          allItems.length - itemsAfterCollapse,\n          allItems.length,\n        ),\n      ];\n    };\n\n    const itemsToRender = shouldRenderAllItems\n      ? allItems\n      : renderItemsBeforeAndAfter();\n    return (\n      <BreadcrumbsContext.Provider value={breadcrumbsContext}>\n        <nav\n          aria-label=\"Breadcrumb\"\n          className={clsx(withBaseName(), className)}\n          data-testid=\"breadcrumbs\"\n          ref={ref}\n          {...other}\n        >\n          <ol\n            className={clsx(withBaseName(\"ol\"), {\n              [withBaseName(\"ol-wrap\")]: wrap,\n            })}\n          >\n            {insertSeparators(\n              itemsToRender,\n              withBaseName(\"separator\"),\n              separator,\n              hideCurrentLevel,\n              shouldRenderAllItems,\n              itemsAfterCollapse,\n            )}\n          </ol>\n        </nav>\n      </BreadcrumbsContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","jsx","forwardRef","Breadcrumbs","useWindow","useComponentCssInjection","breadcrumbsCss","useMemo","BreadcrumbsSeparator","Children","isValidElement","cloneElement","BreadcrumbsCollapsed","BreadcrumbsContext","clsx"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentType,\n  cloneElement,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useMemo,\n} from \"react\";\nimport type { BreadcrumbProps } from \"./Breadcrumb\";\nimport breadcrumbsCss from \"./Breadcrumbs.css\";\nimport { BreadcrumbsCollapsed } from \"./internal/BreadcrumbsCollapsed\";\nimport { BreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { BreadcrumbsSeparator } from \"./internal/BreadcrumbsSeparator\";\n\nconst iconWidth = 12;\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction insertSeparators(\n  items: ReactNode[],\n  className?: string,\n  separator?: ReactNode,\n  hideCurrentLevel?: boolean,\n  shouldRenderAllItems?: boolean,\n  itemsAfterCollapse?: number,\n) {\n  return items.reduce((acc: ReactNode[], current: ReactNode, index: number) => {\n    if (index < items.length - 1) {\n      return acc.concat(\n        current,\n        <li\n          aria-hidden\n          className={className}\n          key={`separator-${\n            // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here\n            index\n          }`}\n        >\n          {separator}\n        </li>,\n      );\n    }\n    const skipLastElement =\n      (hideCurrentLevel && shouldRenderAllItems) ||\n      (hideCurrentLevel && !shouldRenderAllItems && itemsAfterCollapse !== 0);\n    return skipLastElement ? acc : acc.concat(current);\n  }, []);\n}\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  Menu?: ComponentType;\n  SeparatorProps?: IconProps;\n  hideCurrentLevel?: boolean;\n  itemsAfterCollapse?: number;\n  itemsBeforeCollapse?: number;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  maxItems?: number;\n  separator?: ReactNode;\n  wrap?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  function Breadcrumbs(props, ref) {\n    const {\n      children,\n      className,\n      itemsAfterCollapse = 1,\n      itemsBeforeCollapse = 1,\n      maxItems = 3,\n      separator: separatorProp,\n      hideCurrentLevel,\n      itemsMinWidth: itemsMinWidthProp,\n      itemsMaxWidth,\n      wrap,\n      Menu: _Menu,\n      SeparatorProps = {},\n      ...other\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumbs\",\n      css: breadcrumbsCss,\n      window: targetWindow,\n    });\n\n    const itemsMinWidth =\n      itemsMinWidthProp != null ? itemsMinWidthProp : iconWidth;\n\n    const breadcrumbsContext = useMemo(\n      () => ({\n        wrap,\n        itemsMinWidth,\n        itemsMaxWidth,\n        liClass: withBaseName(\"li\"),\n      }),\n      [wrap, itemsMaxWidth, itemsMinWidth],\n    );\n\n    const separator = separatorProp || (\n      <BreadcrumbsSeparator {...SeparatorProps} />\n    );\n\n    const childrenArray = Children.toArray(children);\n    const shouldRenderAllItems =\n      wrap || maxItems == null || childrenArray.length <= maxItems;\n\n    const allItems = childrenArray\n      .filter(isValidElement)\n      .map((child, index) => {\n        const isLastChild = index === childrenArray.length - 1;\n\n        return cloneElement(child, {\n          isCurrentLevel: isLastChild,\n        } as BreadcrumbProps);\n      });\n\n    const renderItemsBeforeAndAfter = () => {\n      // This defends against someone passing weird input, to ensure that if all\n      // items would be shown anyway, we just show all items without the EllipsisItem\n      if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {\n        console.warn(\n          [\n            \"You have provided an invalid combination of properties to the Breadcrumbs.\",\n            `itemsAfterCollapse={${itemsAfterCollapse}} +itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`,\n          ].join(\"\\n\"),\n        );\n        return allItems;\n      }\n\n      const hiddenItems = allItems.slice(\n        itemsBeforeCollapse,\n        allItems.length - itemsAfterCollapse,\n      );\n      return [\n        ...allItems.slice(0, itemsBeforeCollapse),\n        <li className={withBaseName(\"li\")} key=\"breadcrumbs-collapsed\">\n          <BreadcrumbsCollapsed\n            accessibleText={`Breadcrumb levels ${itemsBeforeCollapse + 1} to ${\n              allItems.length - itemsAfterCollapse\n            }`}\n            className={withBaseName(\"overflowButton\")}\n          >\n            {hiddenItems}\n          </BreadcrumbsCollapsed>\n        </li>,\n        ...allItems.slice(\n          allItems.length - itemsAfterCollapse,\n          allItems.length,\n        ),\n      ];\n    };\n\n    const itemsToRender = shouldRenderAllItems\n      ? allItems\n      : renderItemsBeforeAndAfter();\n    return (\n      <BreadcrumbsContext.Provider value={breadcrumbsContext}>\n        <nav\n          aria-label=\"Breadcrumb\"\n          className={clsx(withBaseName(), className)}\n          data-testid=\"breadcrumbs\"\n          ref={ref}\n          {...other}\n        >\n          <ol\n            className={clsx(withBaseName(\"ol\"), {\n              [withBaseName(\"ol-wrap\")]: wrap,\n            })}\n          >\n            {insertSeparators(\n              itemsToRender,\n              withBaseName(\"separator\"),\n              separator,\n              hideCurrentLevel,\n              shouldRenderAllItems,\n              itemsAfterCollapse,\n            )}\n          </ol>\n        </nav>\n      </BreadcrumbsContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","jsx","forwardRef","Breadcrumbs","useWindow","useComponentCssInjection","breadcrumbsCss","useMemo","BreadcrumbsSeparator","Children","isValidElement","cloneElement","BreadcrumbsCollapsed","BreadcrumbsContext","clsx"],"mappings":"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"}

package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js

@@ -28,12 +28,9 @@ const BreadcrumbsCollapsed = ({
     const { overflowLabel, tooltipText, children: children2 } = child.props;
     return overflowLabel || tooltipText || String(children2);
   }, []);
-  const onItemClick = react.useCallback(
-    (sourceItem, event) => {
-      shouldFocusOnMount.current = true;
-    },
-    [shouldFocusOnMount]
-  );
+  const onItemClick = react.useCallback(() => {
+    shouldFocusOnMount.current = true;
+  }, [shouldFocusOnMount]);
   const menuItems = [];
   react.Children.forEach(children, (x) => {
     if (react.isValidElement(x)) {

package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsCollapsed.js","sources":["../src/breadcrumbs/internal/BreadcrumbsCollapsed.tsx"],"sourcesContent":["import { useIcon } from \"@salt-ds/core\";\nimport {\n  Children,\n  type Component,\n  isValidElement,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n} from \"react\";\nimport type { CascadingMenuProps, MenuDescriptor } from \"../../cascading-menu\";\nimport { MenuButton, type MenuButtonProps } from \"../../menu-button\";\nimport type { BreadcrumbProps } from \"../Breadcrumb\";\nimport { useFocusMenuRemount } from \"./useFocusMenuRemount\";\n\nexport interface BreadcrumbsCollapsedProps\n  extends Omit<MenuButtonProps, \"CascadingMenuProps\"> {\n  CascadingMenuProps?: CascadingMenuProps;\n  accessibleText?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const BreadcrumbsCollapsed = ({\n  children,\n  CascadingMenuProps,\n  accessibleText,\n  ...rest\n}: BreadcrumbsCollapsedProps) => {\n  const keys = Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      return child.key;\n    }\n    return \"\";\n  });\n\n  const { OverflowIcon } = useIcon();\n  const key = keys ? keys.join(\"\") : \"\";\n  const { ref, shouldFocusOnMount } =\n    useFocusMenuRemount<HTMLButtonElement>(key);\n\n  const itemToString = useCallback((child: Component<BreadcrumbProps>) => {\n    if (!child) {\n      return \"\";\n    }\n    const { overflowLabel, tooltipText, children } = child.props;\n    return overflowLabel || tooltipText || String(children);\n  }, []);\n\n  const onItemClick = useCallback(\n    (sourceItem: MenuDescriptor, event: MouseEvent | KeyboardEvent): void => {\n      shouldFocusOnMount.current = true;\n    },\n    [shouldFocusOnMount],\n  );\n\n  const menuItems: MenuDescriptor[] = [];\n  Children.forEach(children, (x) => {\n    if (isValidElement(x)) {\n      menuItems.push({ props: x.props } as MenuDescriptor);\n    }\n  });\n\n  return (\n    <MenuButton\n      CascadingMenuProps={{\n        initialSource: {\n          // Only `props` is required for `itemToString`. Otherwise causing circular JSON conversion in useControlled.js\n          // This is not reproducible in unit tests, where react / react-dom is partially mocked without circular reference\n          menuItems,\n        },\n        itemToString,\n        onItemClick,\n        minWidth: 0,\n        ...CascadingMenuProps,\n      }}\n      hideCaret\n      {...rest}\n      ref={ref}\n    >\n      <OverflowIcon />\n    </MenuButton>\n  );\n};\n"],"names":["Children","isValidElement","useIcon","useFocusMenuRemount","useCallback","children","jsx","MenuButton"],"mappings":";;;;;;;;AAuBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAG;AACL,CAAiC,KAAA;AAC/B,EAAA,MAAM,IAAO,GAAAA,cAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AAC7C,IAAI,IAAAC,oBAAA,CAAe,KAAK,CAAG,EAAA;AACzB,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA;AAEf,IAAO,OAAA,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,YAAQ,EAAA;AACjC,EAAA,MAAM,GAAM,GAAA,IAAA,GAAO,IAAK,CAAA,IAAA,CAAK,EAAE,CAAI,GAAA,EAAA;AACnC,EAAA,MAAM,EAAE,GAAA,EAAK,kBAAmB,EAAA,GAC9BC,wCAAuC,GAAG,CAAA;AAE5C,EAAM,MAAA,YAAA,GAAeC,iBAAY,CAAA,CAAC,KAAsC,KAAA;AACtE,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAO,OAAA,EAAA;AAAA;AAET,IAAA,MAAM,EAAE,aAAe,EAAA,WAAA,EAAa,QAAAC,EAAAA,SAAAA,KAAa,KAAM,CAAA,KAAA;AACvD,IAAO,OAAA,aAAA,IAAiB,WAAe,IAAA,MAAA,CAAOA,SAAQ,CAAA;AAAA,GACxD,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,WAAc,GAAAD,iBAAA;AAAA,IAClB,CAAC,YAA4B,KAA4C,KAAA;AACvE,MAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA;AAAA,KAC/B;AAAA,IACA,CAAC,kBAAkB;AAAA,GACrB;AAEA,EAAA,MAAM,YAA8B,EAAC;AACrC,EAASJ,cAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,CAAM,KAAA;AAChC,IAAI,IAAAC,oBAAA,CAAe,CAAC,CAAG,EAAA;AACrB,MAAA,SAAA,CAAU,IAAK,CAAA,EAAE,KAAO,EAAA,CAAA,CAAE,OAAyB,CAAA;AAAA;AACrD,GACD,CAAA;AAED,EACE,uBAAAK,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,kBAAoB,EAAA;AAAA,QAClB,aAAe,EAAA;AAAA;AAAA;AAAA,UAGb;AAAA,SACF;AAAA,QACA,YAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAU,EAAA,CAAA;AAAA,QACV,GAAG;AAAA,OACL;AAAA,MACA,SAAS,EAAA,IAAA;AAAA,MACR,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,yCAAC,YAAa,EAAA,EAAA;AAAA;AAAA,GAChB;AAEJ;;;;"}
+{"version":3,"file":"BreadcrumbsCollapsed.js","sources":["../src/breadcrumbs/internal/BreadcrumbsCollapsed.tsx"],"sourcesContent":["import { useIcon } from \"@salt-ds/core\";\nimport {\n  Children,\n  type Component,\n  isValidElement,\n  type ReactNode,\n  useCallback,\n} from \"react\";\nimport type { CascadingMenuProps, MenuDescriptor } from \"../../cascading-menu\";\nimport { MenuButton, type MenuButtonProps } from \"../../menu-button\";\nimport type { BreadcrumbProps } from \"../Breadcrumb\";\nimport { useFocusMenuRemount } from \"./useFocusMenuRemount\";\n\nexport interface BreadcrumbsCollapsedProps\n  extends Omit<MenuButtonProps, \"CascadingMenuProps\"> {\n  CascadingMenuProps?: CascadingMenuProps;\n  accessibleText?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const BreadcrumbsCollapsed = ({\n  children,\n  CascadingMenuProps,\n  accessibleText,\n  ...rest\n}: BreadcrumbsCollapsedProps) => {\n  const keys = Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      return child.key;\n    }\n    return \"\";\n  });\n\n  const { OverflowIcon } = useIcon();\n  const key = keys ? keys.join(\"\") : \"\";\n  const { ref, shouldFocusOnMount } =\n    useFocusMenuRemount<HTMLButtonElement>(key);\n\n  const itemToString = useCallback((child: Component<BreadcrumbProps>) => {\n    if (!child) {\n      return \"\";\n    }\n    const { overflowLabel, tooltipText, children } = child.props;\n    return overflowLabel || tooltipText || String(children);\n  }, []) as (item: MenuDescriptor) => string;\n\n  const onItemClick = useCallback((): void => {\n    shouldFocusOnMount.current = true;\n  }, [shouldFocusOnMount]);\n\n  const menuItems: MenuDescriptor[] = [];\n  Children.forEach(children, (x) => {\n    if (isValidElement(x)) {\n      menuItems.push({ props: x.props } as MenuDescriptor);\n    }\n  });\n\n  return (\n    <MenuButton\n      CascadingMenuProps={{\n        initialSource: {\n          // Only `props` is required for `itemToString`. Otherwise causing circular JSON conversion in useControlled.js\n          // This is not reproducible in unit tests, where react / react-dom is partially mocked without circular reference\n          menuItems,\n        },\n        itemToString,\n        onItemClick,\n        minWidth: 0,\n        ...CascadingMenuProps,\n      }}\n      hideCaret\n      {...rest}\n      ref={ref}\n    >\n      <OverflowIcon />\n    </MenuButton>\n  );\n};\n"],"names":["Children","isValidElement","useIcon","useFocusMenuRemount","useCallback","children","jsx","MenuButton"],"mappings":";;;;;;;;AAqBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAG;AACL,CAAiC,KAAA;AAC/B,EAAA,MAAM,IAAO,GAAAA,cAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AAC7C,IAAI,IAAAC,oBAAA,CAAe,KAAK,CAAG,EAAA;AACzB,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA;AAEf,IAAO,OAAA,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,YAAQ,EAAA;AACjC,EAAA,MAAM,GAAM,GAAA,IAAA,GAAO,IAAK,CAAA,IAAA,CAAK,EAAE,CAAI,GAAA,EAAA;AACnC,EAAA,MAAM,EAAE,GAAA,EAAK,kBAAmB,EAAA,GAC9BC,wCAAuC,GAAG,CAAA;AAE5C,EAAM,MAAA,YAAA,GAAeC,iBAAY,CAAA,CAAC,KAAsC,KAAA;AACtE,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAO,OAAA,EAAA;AAAA;AAET,IAAA,MAAM,EAAE,aAAe,EAAA,WAAA,EAAa,QAAAC,EAAAA,SAAAA,KAAa,KAAM,CAAA,KAAA;AACvD,IAAO,OAAA,aAAA,IAAiB,WAAe,IAAA,MAAA,CAAOA,SAAQ,CAAA;AAAA,GACxD,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,WAAA,GAAcD,kBAAY,MAAY;AAC1C,IAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA;AAAA,GAC/B,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAA,MAAM,YAA8B,EAAC;AACrC,EAASJ,cAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,CAAM,KAAA;AAChC,IAAI,IAAAC,oBAAA,CAAe,CAAC,CAAG,EAAA;AACrB,MAAA,SAAA,CAAU,IAAK,CAAA,EAAE,KAAO,EAAA,CAAA,CAAE,OAAyB,CAAA;AAAA;AACrD,GACD,CAAA;AAED,EACE,uBAAAK,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,kBAAoB,EAAA;AAAA,QAClB,aAAe,EAAA;AAAA;AAAA;AAAA,UAGb;AAAA,SACF;AAAA,QACA,YAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAU,EAAA,CAAA;AAAA,QACV,GAAG;AAAA,OACL;AAAA,MACA,SAAS,EAAA,IAAA;AAAA,MACR,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,yCAAC,YAAa,EAAA,EAAA;AAAA;AAAA,GAChB;AAEJ;;;;"}

package/dist-cjs/button-bar/ButtonBar.js

@@ -156,7 +156,7 @@ const ButtonBar = react.forwardRef(
         alignedIndex: secondaryChildAlignment.index,
         align: secondaryChildAlignment.align
       }),
-      [matches, secondaryChildAlignment.align, secondaryChildAlignment.index]
+      [secondaryChildAlignment.align, secondaryChildAlignment.index]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(ButtonBarContext.ButtonBarContext.Provider, { value: buttonBarContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DescendantContext.DescendantProvider, { items: childrenData, setItems: setChildrenData, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",