npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.70 → 1.0.0-alpha.71 - Mend

@salt-ds/lab 1.0.0-alpha.70 → 1.0.0-alpha.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (280) hide show

package/dist-cjs/app-header/AppHeader.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-separable-borderStyle) var(--salt-size-border) var(--salt-separable-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-border);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
+var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-separable-borderStyle) var(--salt-size-fixed-100) var(--salt-separable-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-fixed-100);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=AppHeader.css.js.map

package/dist-cjs/calendar/CalendarWeekHeader.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltCalendarWeekHeader {\n  display: grid;\n  gap: var(--salt-size-border);\n  grid-template-columns: repeat(7, var(--salt-size-base));\n  text-align: center;\n  align-items: center;\n  height: var(--salt-size-base);\n  margin: var(--salt-size-border);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n  width: var(--salt-size-base);\n  color: var(--salt-content-secondary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n}\n";
+var css_248z = ".saltCalendarWeekHeader {\n  display: grid;\n  gap: var(--salt-spacing-fixed-100);\n  grid-template-columns: repeat(7, var(--salt-size-base));\n  text-align: center;\n  align-items: center;\n  height: var(--salt-size-base);\n  margin: var(--salt-spacing-fixed-100);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n  width: var(--salt-size-base);\n  color: var(--salt-content-secondary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=CalendarWeekHeader.css.js.map

package/dist-cjs/calendar/internal/CalendarDay.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltCalendarDay {\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.saltCalendarDay-content {\n  margin: 0 var(--salt-spacing-50);\n  width: 100%;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay.saltCalendarDay:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n  color: var(--salt-content-primary-foreground);\n}\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {\n  background: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarDay-selected {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedStart {\n  z-index: var(--salt-zIndex-default);\n\n  border-top-left-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd {\n  border-top-right-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background-hover);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n  background: var(--salt-selectable-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before,\n.saltCalendarDay-highlighted:hover:before {\n  content: \"\";\n  height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n  width: var(--salt-spacing-200);\n  top: calc(var(--salt-spacing-100) * -1);\n  right: calc(var(--salt-spacing-100) * -1);\n  transform: rotate(45deg);\n  background: var(--salt-accent-background);\n  position: absolute;\n}\n\n.saltCalendarDay-unselectable:after {\n  content: \"\";\n  height: var(--salt-size-border);\n  width: calc(100% - var(--salt-spacing-100));\n  background: var(--salt-content-secondary-foreground);\n  position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type,\n.saltCalendarDay-today > span:last-of-type:hover,\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type:hover {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);\n  margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover {\n  color: var(--salt-content-secondary-foreground-disabled);\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
+var css_248z = ".saltCalendarDay {\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-hover);\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.saltCalendarDay-content {\n  margin: 0 var(--salt-spacing-50);\n  width: 100%;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay.saltCalendarDay:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n  color: var(--salt-content-primary-foreground);\n}\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {\n  background: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarDay-selected {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedStart {\n  z-index: var(--salt-zIndex-default);\n\n  border-top-left-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd {\n  border-top-right-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background-hover);\n  box-shadow: calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n  background: var(--salt-selectable-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before,\n.saltCalendarDay-highlighted:hover:before {\n  content: \"\";\n  height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n  width: var(--salt-spacing-200);\n  top: calc(var(--salt-spacing-100) * -1);\n  right: calc(var(--salt-spacing-100) * -1);\n  transform: rotate(45deg);\n  background: var(--salt-accent-background);\n  position: absolute;\n}\n\n.saltCalendarDay-unselectable:after {\n  content: \"\";\n  height: var(--salt-size-fixed-100);\n  width: calc(100% - var(--salt-spacing-100));\n  background: var(--salt-content-secondary-foreground);\n  position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n  content: \"\";\n  display: block;\n  width: calc(100% - calc(var(--salt-spacing-50) * 2));\n  height: var(--salt-size-indicator);\n  background-color: var(--salt-accent-borderColor);\n  border-radius: var(--salt-palette-corner-weak);\n  position: absolute;\n  bottom: var(--salt-spacing-50);\n  left: var(--salt-spacing-50);\n  right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover {\n  color: var(--salt-content-secondary-foreground-disabled);\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=CalendarDay.css.js.map

package/dist-cjs/calendar/internal/CalendarMonth.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltCalendarMonth-grid {\n  display: grid;\n  gap: var(--salt-size-border);\n  grid-template-columns: repeat(7, var(--salt-size-base));\n  grid-template-rows: repeat(6, var(--salt-size-base));\n  text-align: center;\n  margin: var(--salt-size-border);\n}\n";
+var css_248z = ".saltCalendarMonth-grid {\n  display: grid;\n  gap: var(--salt-spacing-fixed-100);\n  grid-template-columns: repeat(7, var(--salt-size-base));\n  grid-template-rows: repeat(6, var(--salt-size-base));\n  text-align: center;\n  margin: var(--salt-spacing-fixed-100);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=CalendarMonth.css.js.map

package/dist-cjs/cascading-menu/CascadingMenuItem.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltCascadingMenuItem {\n  background: var(--salt-selectable-background);\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  right: 0;\n  cursor: pointer;\n  overflow: hidden;\n  text-align: left;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltCascadingMenuItem-menuItemText {\n  flex-grow: 2;\n  white-space: nowrap;\n}\n\n.saltCascadingMenuItem-menuItemEndAdornment {\n  margin-left: 8px; /* density */\n}\n\n.saltCascadingMenuItem-menuItemStartAdornmentContainer {\n  margin-right: var(--salt-size-unit);\n  width: 12px;\n}\n\n.saltCascadingMenuItem-menuItemAdornmentHidden {\n  visibility: hidden;\n}\n\n.saltCascadingMenuItem.saltCascadingMenuItem-menuItemDivider {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltCascadingMenuItem-menuItemHover:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n/* extra specificity requred to override ListItem selected */\n.saltCascadingMenuItem.saltCascadingMenuItem-menuItemBlurSelected {\n  background: var(--salt-selectable-background-blurSelected) !important;\n}\n";
+var css_248z = ".saltCascadingMenuItem {\n  background: var(--salt-selectable-background);\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  right: 0;\n  cursor: var(--salt-cursor-hover);\n  overflow: hidden;\n  text-align: left;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltCascadingMenuItem-menuItemText {\n  flex-grow: 2;\n  white-space: nowrap;\n}\n\n.saltCascadingMenuItem-menuItemEndAdornment {\n  margin-left: 8px; /* density */\n}\n\n.saltCascadingMenuItem-menuItemStartAdornmentContainer {\n  margin-right: var(--salt-size-unit);\n  width: 12px;\n}\n\n.saltCascadingMenuItem-menuItemAdornmentHidden {\n  visibility: hidden;\n}\n\n.saltCascadingMenuItem.saltCascadingMenuItem-menuItemDivider {\n  border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltCascadingMenuItem-menuItemHover:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n/* extra specificity requred to override ListItem selected */\n.saltCascadingMenuItem.saltCascadingMenuItem-menuItemBlurSelected {\n  background: var(--salt-selectable-background-blurSelected) !important;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=CascadingMenuItem.css.js.map

package/dist-cjs/color-chooser/ColorChooser.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(var(--salt-size-container-spacing) - 2px) !important;\n  width: calc(var(--salt-size-container-spacing) - 2px) !important;\n  border: 1px solid var(--salt-status-negative-foreground);\n  /* RGBA using red-700 */\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%);\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: var(--salt-size-container-spacing);\n  display: contents;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
+var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(var(--salt-size-container-spacing) - 2px) !important;\n  width: calc(var(--salt-size-container-spacing) - 2px) !important;\n  border: 1px solid var(--salt-status-negative-foreground);\n  /* RGBA using red-700 */\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%);\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: var(--salt-size-container-spacing);\n  display: contents;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=ColorChooser.css.js.map

package/dist-cjs/color-chooser/ColorPicker.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=ColorPicker.css.js.map

package/dist-cjs/color-chooser/HexInput.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-container-spacing) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-content-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-container-spacing) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-content-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=HexInput.css.js.map

package/dist-cjs/color-chooser/RGBAInput.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltColorChooser-rgbaInput {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n  padding-top: var(--salt-size-unit);\n}\n\n.saltColorChooser-opacityInput {\n  min-width: 40px !important;\n  width: 40px !important;\n  min-height: unset !important;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-rgbaText {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  color: var(--salt-content-secondary-foreground);\n  padding-top: 4px;\n  padding-right: 6px;\n  padding-left: 6px;\n}\n\n.saltColorChooser-rgbaInputDiv {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-unit) 0px;\n}\n\n.saltColorChooser-overrideInput {\n  min-width: 0em;\n  background: transparent !important;\n  color: var(--salt-content-primary-foreground);\n  border-bottom: 1px solid var(--salt-content-primary-foreground);\n}\n\n.saltColorChooser-alphaSpacerDiv {\n  height: 24px;\n}\n\n.saltColorChooser-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n";
+var css_248z = ".saltColorChooser-rgbaInput {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n  padding-top: var(--salt-size-unit);\n}\n\n.saltColorChooser-opacityInput {\n  min-width: 40px !important;\n  width: 40px !important;\n  min-height: unset !important;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-rgbaText {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  color: var(--salt-content-secondary-foreground);\n  padding-top: 4px;\n  padding-right: 6px;\n  padding-left: 6px;\n}\n\n.saltColorChooser-rgbaInputDiv {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-unit) 0px;\n}\n\n.saltColorChooser-overrideInput {\n  min-width: 0em;\n  background: transparent !important;\n  color: var(--salt-content-primary-foreground);\n  border-bottom: 1px solid var(--salt-content-primary-foreground);\n}\n\n.saltColorChooser-alphaSpacerDiv {\n  height: 24px;\n}\n\n.saltColorChooser-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=RGBAInput.css.js.map

package/dist-cjs/color-chooser/Swatch.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=Swatch.css.js.map

package/dist-cjs/combo-box/useCombobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCombobox.js","sources":["../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type CollectionItem,\n type SelectionChangeHandler,\n type SelectionStrategy,\n type SingleSelectionStrategy,\n itemToString as defaultItemToString,\n} from \"../common-hooks\";\nimport type { DropdownHookProps, DropdownHookResult } from \"../dropdown\";\nimport type { InputLegacyProps as InputProps } from \"../input-legacy\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\n\nconst NULL_REF = { current: null };\nconst EnterOnly = [\"Enter\"];\n\nexport interface ComboboxHookProps<Item, Strategy extends SelectionStrategy>\n extends Partial<Omit<DropdownHookProps, \"id\" \| \"onKeyDown\">>,\n Pick<InputProps, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"onSelect\">,\n Omit<\n ListHookProps<Item, Strategy>,\n \"containerRef\" \| \"defaultSelected\" \| \"selected\" \| \"onSelect\"\n > {\n InputProps?: InputProps;\n allowFreeText?: boolean;\n ariaLabel?: string;\n defaultValue?: string;\n id: string;\n itemToString?: (item: Item) => string;\n stringToItem?: (value?: string) => Item \| null \| undefined;\n value?: string;\n}\n\nexport interface ComboboxHookResult<Item, Selection extends SelectionStrategy>\n extends Pick<\n ListHookResult<Item, Selection>,\n \| \"focusVisible\"\n \| \"highlightedIndex\"\n \| \"listControlProps\"\n \| \"listHandlers\"\n \| \"selected\"\n >,\n Partial<DropdownHookResult> {\n inputProps: InputProps;\n onOpenChange: (isOpen: boolean) => void;\n}\n\nexport const useCombobox = <\n Item,\n Selection extends SelectionStrategy = \"default\",\n>({\n allowFreeText,\n ariaLabel,\n collectionHook,\n defaultIsOpen,\n defaultValue,\n onBlur,\n onFocus,\n onChange,\n onSelect,\n id,\n isOpen: isOpenProp,\n itemToString = defaultItemToString as (item: Item) => string,\n onOpenChange,\n onSelectionChange,\n selectionStrategy,\n stringToItem,\n value: valueProp,\n InputProps: inputProps = {\n onBlur,\n onFocus,\n onChange,\n onSelect,\n },\n}: ComboboxHookProps<Item, Selection>): ComboboxHookResult<Item, Selection> => {\n type selectedCollectionType = Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> \| null\n : CollectionItem<Item>[];\n const isMultiSelect =\n selectionStrategy === \"multiple\" \|\| selectionStrategy === \"extended\";\n\n const selectedValue = collectionHook.stringToCollectionItem<Selection>(\n valueProp ?? defaultValue ?? null,\n );\n\n const {\n data: indexPositions,\n itemToCollectionItem,\n setFilterPattern,\n stringToCollectionItem,\n } = collectionHook;\n const setHighlightedIndexRef = useRef<null \| ((i: number) => void)>(null);\n const setSelectedRef = useRef<\n null \| ListHookResult<Item, Selection>[\"setSelected\"]\n >(null);\n // Input select events are used to identify user navigation within the input text.\n // The initial select event fired on focus is an exception that we ignore.\n const ignoreSelectOnFocus = useRef(true);\n const selectedRef = useRef<selectedCollectionType>(selectedValue);\n\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen ?? false,\n name: \"useDropdownList\",\n });\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"ComboBox\",\n state: \"value\",\n });\n\n const collectionItemsToItem = useCallback(\n (\n sel: CollectionItem<Item> \| null \| CollectionItem<Item>[],\n ): Selection extends SingleSelectionStrategy ? Item \| null : Item[] => {\n type returnType = Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[];\n if (Array.isArray(sel)) {\n return sel.map((i) => i.value) as returnType;\n }\n if (sel) {\n return sel.value as returnType;\n }\n return sel as returnType;\n },\n [],\n );\n\n const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n useState(true);\n const [quickSelection, setQuickSelection] = useState(false);\n\n const highlightSelectedItem = useCallback(\n (selected: selectedCollectionType = selectedRef.current) => {\n if (Array.isArray(selected)) {\n console.log(\"TODO multi selection\");\n } else if (selected == null) {\n setHighlightedIndexRef.current?.(-1);\n } else {\n const indexOfSelectedItem = indexPositions.indexOf(selected);\n setHighlightedIndexRef.current?.(indexOfSelectedItem);\n }\n },\n [indexPositions],\n );\n\n const setTextValue = useCallback(\n (value: string) => {\n setValue(value);\n setFilterPattern(value === \"\" ? undefined : value);\n },\n [setFilterPattern],\n );\n\n const reconcileInput = useCallback(\n (selected: selectedCollectionType = selectedRef.current) => {\n let value = \"\";\n if (Array.isArray(selected)) {\n console.log(\"TODO multi selection\");\n } else if (selected != null && selected.value !== null) {\n value = itemToString(selected.value);\n }\n setTextValue(value);\n if (value === \"\") {\n setHighlightedIndexRef.current?.(-1);\n } else {\n highlightSelectedItem(selected);\n }\n },\n [highlightSelectedItem, itemToString, setTextValue],\n );\n\n const applySelection = useCallback(\n (evt: any, selected: selectedCollectionType) => {\n if (!isMultiSelect) {\n setIsOpen(false);\n }\n selectedRef.current = selected;\n reconcileInput(selected);\n onSelectionChange?.(evt, collectionItemsToItem(selected ?? null));\n },\n [collectionItemsToItem, isMultiSelect, onSelectionChange, reconcileInput],\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<Item, Selection>\n >(\n (evt, selected) => {\n if (!isMultiSelect) {\n const selectedCollectionItem = itemToCollectionItem<\n Selection,\n typeof selected\n >(selected);\n applySelection(evt, selectedCollectionItem);\n }\n },\n [applySelection, isMultiSelect, itemToCollectionItem],\n );\n\n const handleFirstItemSelection = useCallback(\n (evt: KeyboardEvent \| ChangeEvent) => {\n if (\n !allowFreeText &&\n (evt as KeyboardEvent).key === \"Enter\" &&\n quickSelection\n ) {\n const [firstItem] = indexPositions;\n applySelection(evt, firstItem as selectedCollectionType);\n }\n },\n [allowFreeText, applySelection, indexPositions, quickSelection],\n );\n\n const {\n onKeyDown: inputOnKeyDown,\n onFocus: inputOnFocus,\n onChange: inputOnChange,\n onBlur: inputOnBlur,\n onSelect: inputOnSelect,\n } = inputProps;\n\n const handleInputKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n if (\"Escape\" === evt.key) {\n if (allowFreeText) {\n setTextValue(\"\");\n } else {\n reconcileInput();\n }\n } else if (\"Tab\" === evt.key) {\n if (!allowFreeText) {\n reconcileInput();\n }\n }\n\n handleFirstItemSelection(evt);\n\n inputOnKeyDown?.(evt as KeyboardEvent<HTMLInputElement>);\n },\n [\n allowFreeText,\n handleFirstItemSelection,\n inputOnKeyDown,\n reconcileInput,\n setTextValue,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(() => {\n setDisableAriaActiveDescendant(false);\n }, []);\n\n const {\n focusVisible,\n setHighlightedIndex,\n highlightedIndex,\n listControlProps,\n listHandlers: listHookListHandlers,\n selected,\n setSelected,\n } = useList<Item, Selection>({\n collectionHook,\n defaultHighlightedIndex: -1,\n disableAriaActiveDescendant,\n disableHighlightOnFocus: true,\n disableTypeToSelect: true,\n onKeyboardNavigation: handleKeyboardNavigation,\n onKeyDown: handleInputKeyDown,\n onSelectionChange: handleSelectionChange,\n containerRef: NULL_REF,\n // we are controlling selection from a ref value - is this right ?\n selected: selectedRef.current,\n selectionKeys: EnterOnly,\n selectionStrategy,\n tabToSelect: !isMultiSelect,\n });\n\n setHighlightedIndexRef.current = setHighlightedIndex;\n setSelectedRef.current = setSelected;\n // selectedRef.current = selected;\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n setIsOpen(open);\n if (!open) {\n setQuickSelection(false);\n }\n onOpenChange?.(open);\n },\n [onOpenChange],\n );\n\n const { onClick: listHandlersOnClick } = listHookListHandlers;\n const handleListClick = useCallback(\n (evt: MouseEvent) => {\n //TODO use ref\n document.getElementById(`${id}-input`)?.focus();\n // const inputEl = inputRef.current;\n console.log(\"handle list click\");\n listHandlersOnClick?.(evt);\n // if (inputEl != null) {\n // inputEl.focus();\n // }\n\n // if (restListProps.onClick) {\n // restListProps.onClick(event as MouseEvent<HTMLDivElement>);\n // }\n\n // notifyPopper(event);\n },\n [id, listHandlersOnClick],\n );\n\n const handleInputChange = useCallback(\n (evt: ChangeEvent<HTMLInputElement>) => {\n const newValue = evt.target.value;\n setValue(newValue);\n\n if (newValue?.trim().length) {\n setFilterPattern(newValue);\n } else {\n setFilterPattern(undefined);\n if (selectedRef.current !== null) {\n onSelectionChange?.(\n evt,\n null as Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[],\n );\n }\n selectedRef.current = null as selectedCollectionType;\n }\n\n setIsOpen(true);\n\n setQuickSelection(newValue.length > 0 && !allowFreeText);\n\n inputOnChange?.(evt, newValue);\n },\n [allowFreeText, inputOnChange, setFilterPattern, onSelectionChange],\n );\n\n const { onFocus: listOnFocus } = listControlProps;\n const handleInputFocus = useCallback(\n (evt: FocusEvent<HTMLInputElement>) => {\n setDisableAriaActiveDescendant(false);\n listOnFocus?.(evt);\n inputOnFocus?.(evt);\n },\n [inputOnFocus, listOnFocus],\n );\n\n const listFocused = useCallback(\n (evt: FocusEvent) => {\n const element = evt.relatedTarget as HTMLElement;\n return element?.id === `${id}-list`;\n },\n [id],\n );\n\n // When focus leaves a free text combo, check to see if the entered text is\n // a valid selection, if so fire a change event\n const selectInputValue = useCallback(\n (evt: ChangeEvent) => {\n const text = value.trim();\n if (text) {\n const selectedCollectionItem = stringToCollectionItem<\"default\">(\n text,\n ) as selectedCollectionType;\n if (selectedCollectionItem) {\n if (Array.isArray(selectedCollectionItem)) {\n // TODO multi select\n } else if (selectedCollectionItem !== selected) {\n setSelectedRef.current?.(selectedCollectionItem);\n onSelectionChange?.(\n evt,\n selectedCollectionItem.value as Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[],\n );\n }\n } else if (stringToItem) {\n const item = stringToItem(text);\n if (item) {\n console.log(\"we have a new item\");\n }\n }\n // How do we check if string is Item\n }\n },\n [onSelectionChange, selected, stringToItem, stringToCollectionItem, value],\n );\n\n const { onBlur: listOnBlur } = listControlProps;\n const handleInputBlur = useCallback(\n (evt: FocusEvent<HTMLInputElement>) => {\n if (listFocused(evt)) {\n // nothing doing\n } else {\n listOnBlur?.(evt);\n inputOnBlur?.(evt);\n if (allowFreeText) {\n selectInputValue(evt as ChangeEvent);\n } else {\n reconcileInput();\n }\n setDisableAriaActiveDescendant(true);\n ignoreSelectOnFocus.current = true;\n }\n },\n [\n allowFreeText,\n listFocused,\n inputOnBlur,\n listOnBlur,\n reconcileInput,\n selectInputValue,\n ],\n );\n\n const handleInputSelect = useCallback(\n (event: SyntheticEvent<HTMLDivElement>) => {\n if (ignoreSelectOnFocus.current) {\n ignoreSelectOnFocus.current = false;\n } else {\n setDisableAriaActiveDescendant(true);\n }\n inputOnSelect?.(event);\n },\n [inputOnSelect],\n );\n\n // If we have selected item(s) and we filter down the list by typing,\n // the position of selected items within the list may be changing.\n // Relocate highlighted index to the selection whenever this happens,\n // so if we resume keyboard navigation, navigation begins from the selected\n // item.\n useEffect(() => {\n highlightSelectedItem();\n // TODO may need to scrollIntoView\n if (indexPositions.length === 0) {\n setIsOpen(false);\n }\n }, [highlightSelectedItem, indexPositions.length]);\n\n // const activeDescendant: string \| undefined = selectionChanged\n // ? \"\"\n // : undefined;\n\n const mergedInputProps = {\n ...inputProps.inputProps,\n // \"aria-owns\": listId,\n \"aria-label\": ariaLabel,\n };\n\n return {\n focusVisible,\n highlightedIndex,\n isOpen,\n onOpenChange: handleOpenChange,\n inputProps: {\n ...inputProps,\n // \"aria-activedescendant\": activeDescendant,\n id: `${id}-input`,\n inputProps: mergedInputProps,\n onChange: handleInputChange,\n onSelect: handleInputSelect,\n role: \"combobox\",\n value,\n },\n // listControlProps,\n listControlProps: {\n ...listControlProps,\n onBlur: handleInputBlur,\n onFocus: handleInputFocus,\n },\n listHandlers: {\n ...listHookListHandlers,\n onClick: handleListClick,\n },\n selected,\n };\n};\n"],"names":["itemToString","defaultItemToString","useRef","useControlled","useCallback","useState","selected","value","useList","useEffect"],"mappings":"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"}
1	+ {"version":3,"file":"useCombobox.js","sources":["../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type CollectionItem,\n type SelectionChangeHandler,\n type SelectionStrategy,\n type SingleSelectionStrategy,\n itemToString as defaultItemToString,\n} from \"../common-hooks\";\nimport type { DropdownHookProps, DropdownHookResult } from \"../dropdown\";\nimport type { InputLegacyProps as InputProps } from \"../input-legacy\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\n\nconst NULL_REF = { current: null };\nconst EnterOnly = [\"Enter\"];\n\nexport interface ComboboxHookProps<Item, Strategy extends SelectionStrategy>\n extends Partial<Omit<DropdownHookProps, \"id\" \| \"onKeyDown\">>,\n Pick<InputProps, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"onSelect\">,\n Omit<\n ListHookProps<Item, Strategy>,\n \"containerRef\" \| \"defaultSelected\" \| \"selected\" \| \"onSelect\"\n > {\n InputProps?: InputProps;\n allowFreeText?: boolean;\n ariaLabel?: string;\n defaultValue?: string;\n id: string;\n itemToString?: (item: Item) => string;\n stringToItem?: (value?: string) => Item \| null \| undefined;\n value?: string;\n}\n\nexport interface ComboboxHookResult<Item, Selection extends SelectionStrategy>\n extends Pick<\n ListHookResult<Item, Selection>,\n \| \"focusVisible\"\n \| \"highlightedIndex\"\n \| \"listControlProps\"\n \| \"listHandlers\"\n \| \"selected\"\n >,\n Partial<DropdownHookResult> {\n inputProps: InputProps;\n onOpenChange: (isOpen: boolean) => void;\n}\n\nexport const useCombobox = <\n Item,\n Selection extends SelectionStrategy = \"default\",\n>({\n allowFreeText,\n ariaLabel,\n collectionHook,\n defaultIsOpen,\n defaultValue,\n onBlur,\n onFocus,\n onChange,\n onSelect,\n id,\n isOpen: isOpenProp,\n itemToString = defaultItemToString as (item: Item) => string,\n onOpenChange,\n onSelectionChange,\n selectionStrategy,\n stringToItem,\n value: valueProp,\n InputProps: inputProps = {\n onBlur,\n onFocus,\n onChange,\n onSelect,\n },\n}: ComboboxHookProps<Item, Selection>): ComboboxHookResult<Item, Selection> => {\n type selectedCollectionType = Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> \| null\n : CollectionItem<Item>[];\n const isMultiSelect =\n selectionStrategy === \"multiple\" \|\| selectionStrategy === \"extended\";\n\n const selectedValue = collectionHook.stringToCollectionItem<Selection>(\n valueProp ?? defaultValue ?? null,\n );\n\n const {\n data: indexPositions,\n itemToCollectionItem,\n setFilterPattern,\n stringToCollectionItem,\n } = collectionHook;\n const setHighlightedIndexRef = useRef<null \| ((i: number) => void)>(null);\n const setSelectedRef = useRef<\n null \| ListHookResult<Item, Selection>[\"setSelected\"]\n >(null);\n // Input select events are used to identify user navigation within the input text.\n // The initial select event fired on focus is an exception that we ignore.\n const ignoreSelectOnFocus = useRef(true);\n const selectedRef = useRef<selectedCollectionType>(selectedValue);\n\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen ?? false,\n name: \"useDropdownList\",\n });\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"ComboBox\",\n state: \"value\",\n });\n\n const collectionItemsToItem = useCallback(\n (\n sel: CollectionItem<Item> \| null \| CollectionItem<Item>[],\n ): Selection extends SingleSelectionStrategy ? Item \| null : Item[] => {\n type returnType = Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[];\n if (Array.isArray(sel)) {\n return sel.map((i) => i.value) as returnType;\n }\n if (sel) {\n return sel.value as returnType;\n }\n return sel as returnType;\n },\n [],\n );\n\n const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n useState(true);\n const [quickSelection, setQuickSelection] = useState(false);\n\n const highlightSelectedItem = useCallback(\n (selected: selectedCollectionType = selectedRef.current) => {\n if (Array.isArray(selected)) {\n console.log(\"TODO multi selection\");\n } else if (selected == null) {\n setHighlightedIndexRef.current?.(-1);\n } else {\n const indexOfSelectedItem = indexPositions.indexOf(selected);\n setHighlightedIndexRef.current?.(indexOfSelectedItem);\n }\n },\n [indexPositions],\n );\n\n const setTextValue = useCallback(\n (value: string) => {\n setValue(value);\n setFilterPattern(value === \"\" ? undefined : value);\n },\n [setFilterPattern],\n );\n\n const reconcileInput = useCallback(\n (selected: selectedCollectionType = selectedRef.current) => {\n let value = \"\";\n if (Array.isArray(selected)) {\n console.log(\"TODO multi selection\");\n } else if (selected != null && selected.value !== null) {\n value = itemToString(selected.value);\n }\n setTextValue(value);\n if (value === \"\") {\n setHighlightedIndexRef.current?.(-1);\n } else {\n highlightSelectedItem(selected);\n }\n },\n [highlightSelectedItem, itemToString, setTextValue],\n );\n\n const applySelection = useCallback(\n (evt: any, selected: selectedCollectionType) => {\n if (!isMultiSelect) {\n setIsOpen(false);\n }\n selectedRef.current = selected;\n reconcileInput(selected);\n onSelectionChange?.(evt, collectionItemsToItem(selected ?? null));\n },\n [collectionItemsToItem, isMultiSelect, onSelectionChange, reconcileInput],\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<Item, Selection>\n >(\n (evt, selected) => {\n if (!isMultiSelect) {\n const selectedCollectionItem = itemToCollectionItem<\n Selection,\n typeof selected\n >(selected);\n applySelection(evt, selectedCollectionItem);\n }\n },\n [applySelection, isMultiSelect, itemToCollectionItem],\n );\n\n const handleFirstItemSelection = useCallback(\n (evt: KeyboardEvent \| ChangeEvent) => {\n if (\n !allowFreeText &&\n (evt as KeyboardEvent).key === \"Enter\" &&\n quickSelection\n ) {\n const [firstItem] = indexPositions;\n applySelection(evt, firstItem as selectedCollectionType);\n }\n },\n [allowFreeText, applySelection, indexPositions, quickSelection],\n );\n\n const {\n onKeyDown: inputOnKeyDown,\n onFocus: inputOnFocus,\n onChange: inputOnChange,\n onBlur: inputOnBlur,\n onSelect: inputOnSelect,\n } = inputProps;\n\n const handleInputKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n if (\"Escape\" === evt.key) {\n if (allowFreeText) {\n setTextValue(\"\");\n } else {\n reconcileInput();\n }\n } else if (\"Tab\" === evt.key) {\n if (!allowFreeText) {\n reconcileInput();\n }\n }\n\n handleFirstItemSelection(evt);\n\n inputOnKeyDown?.(evt as KeyboardEvent<HTMLInputElement>);\n },\n [\n allowFreeText,\n handleFirstItemSelection,\n inputOnKeyDown,\n reconcileInput,\n setTextValue,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(() => {\n setDisableAriaActiveDescendant(false);\n }, []);\n\n const {\n focusVisible,\n setHighlightedIndex,\n highlightedIndex,\n listControlProps,\n listHandlers: listHookListHandlers,\n selected,\n setSelected,\n } = useList<Item, Selection>({\n collectionHook,\n defaultHighlightedIndex: -1,\n disableAriaActiveDescendant,\n disableHighlightOnFocus: true,\n disableTypeToSelect: true,\n onKeyboardNavigation: handleKeyboardNavigation,\n onKeyDown: handleInputKeyDown,\n onSelectionChange: handleSelectionChange,\n containerRef: NULL_REF,\n // we are controlling selection from a ref value - is this right ?\n selected: selectedRef.current,\n selectionKeys: EnterOnly,\n selectionStrategy,\n tabToSelect: !isMultiSelect,\n });\n\n setHighlightedIndexRef.current = setHighlightedIndex;\n setSelectedRef.current = setSelected;\n // selectedRef.current = selected;\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n setIsOpen(open);\n if (!open) {\n setQuickSelection(false);\n }\n onOpenChange?.(open);\n },\n [onOpenChange],\n );\n\n const { onClick: listHandlersOnClick } = listHookListHandlers;\n const handleListClick = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n //TODO use ref\n document.getElementById(`${id}-input`)?.focus();\n // const inputEl = inputRef.current;\n console.log(\"handle list click\");\n listHandlersOnClick?.(evt);\n // if (inputEl != null) {\n // inputEl.focus();\n // }\n\n // if (restListProps.onClick) {\n // restListProps.onClick(event as MouseEvent<HTMLDivElement>);\n // }\n\n // notifyPopper(event);\n },\n [id, listHandlersOnClick],\n );\n\n const handleInputChange = useCallback(\n (evt: ChangeEvent<HTMLInputElement>) => {\n const newValue = evt.target.value;\n setValue(newValue);\n\n if (newValue?.trim().length) {\n setFilterPattern(newValue);\n } else {\n setFilterPattern(undefined);\n if (selectedRef.current !== null) {\n onSelectionChange?.(\n evt,\n null as Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[],\n );\n }\n selectedRef.current = null as selectedCollectionType;\n }\n\n setIsOpen(true);\n\n setQuickSelection(newValue.length > 0 && !allowFreeText);\n\n inputOnChange?.(evt, newValue);\n },\n [allowFreeText, inputOnChange, setFilterPattern, onSelectionChange],\n );\n\n const { onFocus: listOnFocus } = listControlProps;\n const handleInputFocus = useCallback(\n (evt: FocusEvent<HTMLInputElement>) => {\n setDisableAriaActiveDescendant(false);\n listOnFocus?.(evt);\n inputOnFocus?.(evt);\n },\n [inputOnFocus, listOnFocus],\n );\n\n const listFocused = useCallback(\n (evt: FocusEvent) => {\n const element = evt.relatedTarget as HTMLElement;\n return element?.id === `${id}-list`;\n },\n [id],\n );\n\n // When focus leaves a free text combo, check to see if the entered text is\n // a valid selection, if so fire a change event\n const selectInputValue = useCallback(\n (evt: ChangeEvent) => {\n const text = value.trim();\n if (text) {\n const selectedCollectionItem = stringToCollectionItem<\"default\">(\n text,\n ) as selectedCollectionType;\n if (selectedCollectionItem) {\n if (Array.isArray(selectedCollectionItem)) {\n // TODO multi select\n } else if (selectedCollectionItem !== selected) {\n setSelectedRef.current?.(selectedCollectionItem);\n onSelectionChange?.(\n evt,\n selectedCollectionItem.value as Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[],\n );\n }\n } else if (stringToItem) {\n const item = stringToItem(text);\n if (item) {\n console.log(\"we have a new item\");\n }\n }\n // How do we check if string is Item\n }\n },\n [onSelectionChange, selected, stringToItem, stringToCollectionItem, value],\n );\n\n const { onBlur: listOnBlur } = listControlProps;\n const handleInputBlur = useCallback(\n (evt: FocusEvent<HTMLInputElement>) => {\n if (listFocused(evt)) {\n // nothing doing\n } else {\n listOnBlur?.(evt);\n inputOnBlur?.(evt);\n if (allowFreeText) {\n selectInputValue(evt as ChangeEvent);\n } else {\n reconcileInput();\n }\n setDisableAriaActiveDescendant(true);\n ignoreSelectOnFocus.current = true;\n }\n },\n [\n allowFreeText,\n listFocused,\n inputOnBlur,\n listOnBlur,\n reconcileInput,\n selectInputValue,\n ],\n );\n\n const handleInputSelect = useCallback(\n (event: SyntheticEvent<HTMLDivElement>) => {\n if (ignoreSelectOnFocus.current) {\n ignoreSelectOnFocus.current = false;\n } else {\n setDisableAriaActiveDescendant(true);\n }\n inputOnSelect?.(event);\n },\n [inputOnSelect],\n );\n\n // If we have selected item(s) and we filter down the list by typing,\n // the position of selected items within the list may be changing.\n // Relocate highlighted index to the selection whenever this happens,\n // so if we resume keyboard navigation, navigation begins from the selected\n // item.\n useEffect(() => {\n highlightSelectedItem();\n // TODO may need to scrollIntoView\n if (indexPositions.length === 0) {\n setIsOpen(false);\n }\n }, [highlightSelectedItem, indexPositions.length]);\n\n // const activeDescendant: string \| undefined = selectionChanged\n // ? \"\"\n // : undefined;\n\n const mergedInputProps = {\n ...inputProps.inputProps,\n // \"aria-owns\": listId,\n \"aria-label\": ariaLabel,\n };\n\n return {\n focusVisible,\n highlightedIndex,\n isOpen,\n onOpenChange: handleOpenChange,\n inputProps: {\n ...inputProps,\n // \"aria-activedescendant\": activeDescendant,\n id: `${id}-input`,\n inputProps: mergedInputProps,\n onChange: handleInputChange,\n onSelect: handleInputSelect,\n role: \"combobox\",\n value,\n },\n // listControlProps,\n listControlProps: {\n ...listControlProps,\n onBlur: handleInputBlur,\n onFocus: handleInputFocus,\n },\n listHandlers: {\n ...listHookListHandlers,\n onClick: handleListClick,\n },\n selected,\n };\n};\n"],"names":["itemToString","defaultItemToString","useRef","useControlled","useCallback","useState","selected","value","useList","useEffect"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAM,QAAA,GAAW,EAAE,OAAA,EAAS,IAAK,EAAA;AACjC,MAAM,SAAA,GAAY,CAAC,OAAO,CAAA;AAiCnB,MAAM,cAAc,CAGzB;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,gBACRA,cAAe,GAAAC,yBAAA;AAAA,EACf,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,YAAY,UAAa,GAAA;AAAA,IACvB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA;AAEJ,CAA+E,KAAA;AAI7E,EAAM,MAAA,aAAA,GACJ,iBAAsB,KAAA,UAAA,IAAc,iBAAsB,KAAA,UAAA;AAE5D,EAAA,MAAM,gBAAgB,cAAe,CAAA,sBAAA;AAAA,IACnC,aAAa,YAAgB,IAAA;AAAA,GAC/B;AAEA,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,cAAA;AAAA,IACN,oBAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACE,GAAA,cAAA;AACJ,EAAM,MAAA,sBAAA,GAAyBC,aAAqC,IAAI,CAAA;AACxE,EAAM,MAAA,cAAA,GAAiBA,aAErB,IAAI,CAAA;AAGN,EAAM,MAAA,mBAAA,GAAsBA,aAAO,IAAI,CAAA;AACvC,EAAM,MAAA,WAAA,GAAcA,aAA+B,aAAa,CAAA;AAEhE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,kBAAuB,CAAA;AAAA,IACjD,UAAY,EAAA,UAAA;AAAA,IACZ,SAAS,aAAiB,IAAA,KAAA;AAAA,IAC1B,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,kBAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,SAAS,YAAgB,IAAA,EAAA;AAAA,IACzB,IAAM,EAAA,UAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CACE,GACqE,KAAA;AAIrE,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,GAAG,CAAG,EAAA;AACtB,QAAA,OAAO,GAAI,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,KAAK,CAAA;AAAA;AAE/B,MAAA,IAAI,GAAK,EAAA;AACP,QAAA,OAAO,GAAI,CAAA,KAAA;AAAA;AAEb,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,CAAC,2BAAA,EAA6B,8BAA8B,CAAA,GAChEC,eAAS,IAAI,CAAA;AACf,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1D,EAAA,MAAM,qBAAwB,GAAAD,iBAAA;AAAA,IAC5B,CAACE,SAAmC,GAAA,WAAA,CAAY,OAAY,KAAA;AAlJhE,MAAA,IAAA,EAAA,EAAA,EAAA;AAmJM,MAAI,IAAA,KAAA,CAAM,OAAQA,CAAAA,SAAQ,CAAG,EAAA;AAC3B,QAAA,OAAA,CAAQ,IAAI,sBAAsB,CAAA;AAAA,OACpC,MAAA,IAAWA,aAAY,IAAM,EAAA;AAC3B,QAAA,CAAA,EAAA,GAAA,sBAAA,CAAuB,YAAvB,IAAiC,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,sBAAA,EAAA,EAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAM,MAAA,mBAAA,GAAsB,cAAe,CAAA,OAAA,CAAQA,SAAQ,CAAA;AAC3D,QAAA,CAAA,EAAA,GAAA,sBAAA,CAAuB,YAAvB,IAAiC,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,sBAAA,EAAA,mBAAA,CAAA;AAAA;AACnC,KACF;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,YAAe,GAAAF,iBAAA;AAAA,IACnB,CAACG,MAAkB,KAAA;AACjB,MAAA,QAAA,CAASA,MAAK,CAAA;AACd,MAAiBA,gBAAAA,CAAAA,MAAAA,KAAU,EAAK,GAAA,MAAA,GAAYA,MAAK,CAAA;AAAA,KACnD;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,cAAiB,GAAAH,iBAAA;AAAA,IACrB,CAACE,SAAmC,GAAA,WAAA,CAAY,OAAY,KAAA;AAxKhE,MAAA,IAAA,EAAA;AAyKM,MAAA,IAAIC,MAAQ,GAAA,EAAA;AACZ,MAAI,IAAA,KAAA,CAAM,OAAQD,CAAAA,SAAQ,CAAG,EAAA;AAC3B,QAAA,OAAA,CAAQ,IAAI,sBAAsB,CAAA;AAAA,OACzBA,MAAAA,IAAAA,SAAAA,IAAY,IAAQA,IAAAA,SAAAA,CAAS,UAAU,IAAM,EAAA;AACtD,QAAAC,MAAAA,GAAQP,cAAaM,CAAAA,SAAAA,CAAS,KAAK,CAAA;AAAA;AAErC,MAAA,YAAA,CAAaC,MAAK,CAAA;AAClB,MAAA,IAAIA,WAAU,EAAI,EAAA;AAChB,QAAA,CAAA,EAAA,GAAA,sBAAA,CAAuB,YAAvB,IAAiC,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,sBAAA,EAAA,EAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAA,qBAAA,CAAsBD,SAAQ,CAAA;AAAA;AAChC,KACF;AAAA,IACA,CAAC,qBAAuB,EAAAN,cAAA,EAAc,YAAY;AAAA,GACpD;AAEA,EAAA,MAAM,cAAiB,GAAAI,iBAAA;AAAA,IACrB,CAAC,KAAUE,SAAqC,KAAA;AAC9C,MAAA,IAAI,CAAC,aAAe,EAAA;AAClB,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AAEjB,MAAA,WAAA,CAAY,OAAUA,GAAAA,SAAAA;AACtB,MAAA,cAAA,CAAeA,SAAQ,CAAA;AACvB,MAAoB,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAA,GAAA,EAAK,qBAAsBA,CAAAA,SAAAA,IAAY,IAAI,CAAA,CAAA;AAAA,KACjE;AAAA,IACA,CAAC,qBAAA,EAAuB,aAAe,EAAA,iBAAA,EAAmB,cAAc;AAAA,GAC1E;AAEA,EAAA,MAAM,qBAAwB,GAAAF,iBAAA;AAAA,IAG5B,CAAC,KAAKE,SAAa,KAAA;AACjB,MAAA,IAAI,CAAC,aAAe,EAAA;AAClB,QAAM,MAAA,sBAAA,GAAyB,qBAG7BA,SAAQ,CAAA;AACV,QAAA,cAAA,CAAe,KAAK,sBAAsB,CAAA;AAAA;AAC5C,KACF;AAAA,IACA,CAAC,cAAgB,EAAA,aAAA,EAAe,oBAAoB;AAAA,GACtD;AAEA,EAAA,MAAM,wBAA2B,GAAAF,iBAAA;AAAA,IAC/B,CAAC,GAAqC,KAAA;AACpC,MAAA,IACE,CAAC,aAAA,IACA,GAAsB,CAAA,GAAA,KAAQ,WAC/B,cACA,EAAA;AACA,QAAM,MAAA,CAAC,SAAS,CAAI,GAAA,cAAA;AACpB,QAAA,cAAA,CAAe,KAAK,SAAmC,CAAA;AAAA;AACzD,KACF;AAAA,IACA,CAAC,aAAA,EAAe,cAAgB,EAAA,cAAA,EAAgB,cAAc;AAAA,GAChE;AAEA,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA,cAAA;AAAA,IACX,OAAS,EAAA,YAAA;AAAA,IACT,QAAU,EAAA,aAAA;AAAA,IACV,MAAQ,EAAA,WAAA;AAAA,IACR,QAAU,EAAA;AAAA,GACR,GAAA,UAAA;AAEJ,EAAA,MAAM,kBAAqB,GAAAA,iBAAA;AAAA,IACzB,CAAC,GAAuB,KAAA;AACtB,MAAI,IAAA,QAAA,KAAa,IAAI,GAAK,EAAA;AACxB,QAAA,IAAI,aAAe,EAAA;AACjB,UAAA,YAAA,CAAa,EAAE,CAAA;AAAA,SACV,MAAA;AACL,UAAe,cAAA,EAAA;AAAA;AACjB,OACF,MAAA,IAAW,KAAU,KAAA,GAAA,CAAI,GAAK,EAAA;AAC5B,QAAA,IAAI,CAAC,aAAe,EAAA;AAClB,UAAe,cAAA,EAAA;AAAA;AACjB;AAGF,MAAA,wBAAA,CAAyB,GAAG,CAAA;AAE5B,MAAiB,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAA,GAAA,CAAA;AAAA,KACnB;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,wBAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAM,MAAA,wBAAA,GAA2BA,kBAAY,MAAM;AACjD,IAAA,8BAAA,CAA+B,KAAK,CAAA;AAAA,GACtC,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAc,EAAA,oBAAA;AAAA,IACd,QAAA;AAAA,IACA;AAAA,MACEI,eAAyB,CAAA;AAAA,IAC3B,cAAA;AAAA,IACA,uBAAyB,EAAA,EAAA;AAAA,IACzB,2BAAA;AAAA,IACA,uBAAyB,EAAA,IAAA;AAAA,IACzB,mBAAqB,EAAA,IAAA;AAAA,IACrB,oBAAsB,EAAA,wBAAA;AAAA,IACtB,SAAW,EAAA,kBAAA;AAAA,IACX,iBAAmB,EAAA,qBAAA;AAAA,IACnB,YAAc,EAAA,QAAA;AAAA;AAAA,IAEd,UAAU,WAAY,CAAA,OAAA;AAAA,IACtB,aAAe,EAAA,SAAA;AAAA,IACf,iBAAA;AAAA,IACA,aAAa,CAAC;AAAA,GACf,CAAA;AAED,EAAA,sBAAA,CAAuB,OAAU,GAAA,mBAAA;AACjC,EAAA,cAAA,CAAe,OAAU,GAAA,WAAA;AAGzB,EAAA,MAAM,gBAAmB,GAAAJ,iBAAA;AAAA,IACvB,CAAC,IAAkB,KAAA;AACjB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAA,IAAI,CAAC,IAAM,EAAA;AACT,QAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA;AAEzB,MAAe,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAA,IAAA,CAAA;AAAA,KACjB;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAM,MAAA,EAAE,OAAS,EAAA,mBAAA,EAAwB,GAAA,oBAAA;AACzC,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,GAAiC,KAAA;AAnTtC,MAAA,IAAA,EAAA;AAqTM,MAAA,CAAA,EAAA,GAAA,QAAA,CAAS,cAAe,CAAA,CAAA,EAAG,EAAE,CAAA,MAAA,CAAQ,MAArC,IAAwC,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAExC,MAAA,OAAA,CAAQ,IAAI,mBAAmB,CAAA;AAC/B,MAAsB,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,CAAA,GAAA,CAAA;AAAA,KAUxB;AAAA,IACA,CAAC,IAAI,mBAAmB;AAAA,GAC1B;AAEA,EAAA,MAAM,iBAAoB,GAAAA,iBAAA;AAAA,IACxB,CAAC,GAAuC,KAAA;AACtC,MAAM,MAAA,QAAA,GAAW,IAAI,MAAO,CAAA,KAAA;AAC5B,MAAA,QAAA,CAAS,QAAQ,CAAA;AAEjB,MAAI,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,OAAO,MAAQ,EAAA;AAC3B,QAAA,gBAAA,CAAiB,QAAQ,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,gBAAA,CAAiB,MAAS,CAAA;AAC1B,QAAI,IAAA,WAAA,CAAY,YAAY,IAAM,EAAA;AAChC,UAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA;AAAA,YACE,GAAA;AAAA,YACA;AAAA,WAAA;AAAA;AAKJ,QAAA,WAAA,CAAY,OAAU,GAAA,IAAA;AAAA;AAGxB,MAAA,SAAA,CAAU,IAAI,CAAA;AAEd,MAAA,iBAAA,CAAkB,QAAS,CAAA,MAAA,GAAS,CAAK,IAAA,CAAC,aAAa,CAAA;AAEvD,MAAA,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAgB,GAAK,EAAA,QAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,aAAA,EAAe,aAAe,EAAA,gBAAA,EAAkB,iBAAiB;AAAA,GACpE;AAEA,EAAM,MAAA,EAAE,OAAS,EAAA,WAAA,EAAgB,GAAA,gBAAA;AACjC,EAAA,MAAM,gBAAmB,GAAAA,iBAAA;AAAA,IACvB,CAAC,GAAsC,KAAA;AACrC,MAAA,8BAAA,CAA+B,KAAK,CAAA;AACpC,MAAc,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,GAAA,CAAA;AACd,MAAe,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAA,GAAA,CAAA;AAAA,KACjB;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,GAC5B;AAEA,EAAA,MAAM,WAAc,GAAAA,iBAAA;AAAA,IAClB,CAAC,GAAoB,KAAA;AACnB,MAAA,MAAM,UAAU,GAAI,CAAA,aAAA;AACpB,MAAO,OAAA,CAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,EAAO,MAAA,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA;AAAA,KAC9B;AAAA,IACA,CAAC,EAAE;AAAA,GACL;AAIA,EAAA,MAAM,gBAAmB,GAAAA,iBAAA;AAAA,IACvB,CAAC,GAAqB,KAAA;AAxX1B,MAAA,IAAA,EAAA;AAyXM,MAAM,MAAA,IAAA,GAAO,MAAM,IAAK,EAAA;AACxB,MAAA,IAAI,IAAM,EAAA;AACR,QAAA,MAAM,sBAAyB,GAAA,sBAAA;AAAA,UAC7B;AAAA,SACF;AACA,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,sBAAsB,CAAG,EAAA,CAE3C,MAAA,IAAW,2BAA2B,QAAU,EAAA;AAC9C,YAAA,CAAA,EAAA,GAAA,cAAA,CAAe,YAAf,IAAyB,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,cAAA,EAAA,sBAAA,CAAA;AACzB,YAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA;AAAA,cACE,GAAA;AAAA,cACA,sBAAuB,CAAA;AAAA,aAAA;AAAA;AAI3B,mBACS,YAAc,EAAA;AACvB,UAAM,MAAA,IAAA,GAAO,aAAa,IAAI,CAAA;AAC9B,UAAA,IAAI,IAAM,EAAA;AACR,YAAA,OAAA,CAAQ,IAAI,oBAAoB,CAAA;AAAA;AAClC;AACF;AAEF,KACF;AAAA,IACA,CAAC,iBAAA,EAAmB,QAAU,EAAA,YAAA,EAAc,wBAAwB,KAAK;AAAA,GAC3E;AAEA,EAAM,MAAA,EAAE,MAAQ,EAAA,UAAA,EAAe,GAAA,gBAAA;AAC/B,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,GAAsC,KAAA;AACrC,MAAI,IAAA,WAAA,CAAY,GAAG,CAAG,EAAA,CAEf,MAAA;AACL,QAAa,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAA,GAAA,CAAA;AACb,QAAc,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,GAAA,CAAA;AACd,QAAA,IAAI,aAAe,EAAA;AACjB,UAAA,gBAAA,CAAiB,GAAkB,CAAA;AAAA,SAC9B,MAAA;AACL,UAAe,cAAA,EAAA;AAAA;AAEjB,QAAA,8BAAA,CAA+B,IAAI,CAAA;AACnC,QAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA;AAAA;AAChC,KACF;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,iBAAoB,GAAAA,iBAAA;AAAA,IACxB,CAAC,KAA0C,KAAA;AACzC,MAAA,IAAI,oBAAoB,OAAS,EAAA;AAC/B,QAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAAA,OACzB,MAAA;AACL,QAAA,8BAAA,CAA+B,IAAI,CAAA;AAAA;AAErC,MAAgB,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAA,KAAA,CAAA;AAAA,KAClB;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAOA,EAAAK,eAAA,CAAU,MAAM;AACd,IAAsB,qBAAA,EAAA;AAEtB,IAAI,IAAA,cAAA,CAAe,WAAW,CAAG,EAAA;AAC/B,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,GACC,EAAA,CAAC,qBAAuB,EAAA,cAAA,CAAe,MAAM,CAAC,CAAA;AAMjD,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,GAAG,UAAW,CAAA,UAAA;AAAA;AAAA,IAEd,YAAc,EAAA;AAAA,GAChB;AAEA,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,UAAY,EAAA;AAAA,MACV,GAAG,UAAA;AAAA;AAAA,MAEH,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,MACT,UAAY,EAAA,gBAAA;AAAA,MACZ,QAAU,EAAA,iBAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,IAAM,EAAA,UAAA;AAAA,MACN;AAAA,KACF;AAAA;AAAA,IAEA,gBAAkB,EAAA;AAAA,MAChB,GAAG,gBAAA;AAAA,MACH,MAAQ,EAAA,eAAA;AAAA,MACR,OAAS,EAAA;AAAA,KACX;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,GAAG,oBAAA;AAAA,MACH,OAAS,EAAA;AAAA,KACX;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/common-hooks/selectionTypes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selectionTypes.js","sources":["../src/common-hooks/selectionTypes.ts"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, SyntheticEvent } from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\n\nexport const SINGLE = \"default\";\nexport const MULTIPLE = \"multiple\";\nexport const EXTENDED = \"extended\";\nexport const DESELECTABLE = \"deselectable\";\n\n// export type SelectionDisallowed = \"none\";\nexport type SingleSelectionStrategy = \"default\" \| \"deselectable\";\nexport type MultiSelectionStrategy =\n \| \"multiple\"\n \| \"extended\"\n \| \"extended-multi-range\";\nexport type SelectionStrategy =\n // \| SelectionDisallowed\n SingleSelectionStrategy \| MultiSelectionStrategy;\n\nexport type selectedType<\n Item,\n Selection extends SelectionStrategy,\n> = Selection extends MultiSelectionStrategy ? Item[] : Item \| null;\n\nexport type SelectHandler<Item = string> = (\n event: SyntheticEvent,\n selectedItem: Item,\n) => void;\n\nexport type SelectionChangeHandler<\n Item = string,\n Selection extends SelectionStrategy = \"default\",\n> = (\n event: SyntheticEvent,\n selected: Selection extends SingleSelectionStrategy ? Item \| null : Item[],\n) => void;\n\nexport const hasSelection = <Item = unknown>(\n selected: Item \| Item[] \| null,\n): boolean => {\n return Array.isArray(selected)\n ? selected.length > 0\n : selected !== null && selected !== undefined;\n};\n\nexport const getFirstSelectedItem = <Item = unknown>(\n selected: Item \| Item[] \| null,\n): Item \| null => {\n return Array.isArray(selected) ? selected[0] : selected;\n};\n\nexport interface SelectionProps<\n Item,\n Selection extends SelectionStrategy = \"default\",\n> {\n defaultSelected?: Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[];\n onSelect?: SelectHandler<Item>;\n onSelectionChange?: SelectionChangeHandler<Item, Selection>;\n selected?: Selection extends SingleSelectionStrategy ? Item \| null : Item[];\n selectionStrategy?: Selection;\n}\n\nexport interface ListHandlers {\n onClick?: (event: MouseEvent) => void;\n onKeyDown?: (event: KeyboardEvent) => void;\n onKeyboardNavigation?: (event: KeyboardEvent, currentIndex: number) => void;\n onMouseMove?: (event: MouseEvent) => void;\n}\nexport interface SelectionHookProps<\n Item,\n Selection extends SelectionStrategy = \"default\",\n> extends SelectionProps<CollectionItem<Item>, Selection> {\n disableSelection?: boolean;\n highlightedIdx: number;\n indexPositions: CollectionItem<Item>[];\n label?: string;\n selectionKeys?: string[];\n tabToSelect?: boolean;\n}\n\nexport interface SelectionHookResult<\n Item,\n Selection extends SelectionStrategy = \"default\",\n> {\n listHandlers: ListHandlers;\n selected: Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> \| null\n : CollectionItem<Item>[];\n setSelected: (\n selected: Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> \| null\n : CollectionItem<Item>[],\n ) => void;\n}\n"],"names":[],"mappings":";;AAoCa,MAAA,YAAA,GAAe,CAC1B,QACY,KAAA;AACZ,EAAO,OAAA,KAAA,CAAM,QAAQ,QAAQ,CAAA,GACzB,SAAS,MAAS,GAAA,CAAA,GAClB,QAAa,KAAA,IAAA,IAAQ,QAAa,KAAA,MAAA;AACxC;AAEa,MAAA,oBAAA,GAAuB,CAClC,QACgB,KAAA;AAChB,EAAA,OAAO,MAAM,OAAQ,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,CAAC,CAAI,GAAA,QAAA;AACjD;;;;;"}
1	+ {"version":3,"file":"selectionTypes.js","sources":["../src/common-hooks/selectionTypes.ts"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, SyntheticEvent } from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\n\nexport const SINGLE = \"default\";\nexport const MULTIPLE = \"multiple\";\nexport const EXTENDED = \"extended\";\nexport const DESELECTABLE = \"deselectable\";\n\n// export type SelectionDisallowed = \"none\";\nexport type SingleSelectionStrategy = \"default\" \| \"deselectable\";\nexport type MultiSelectionStrategy =\n \| \"multiple\"\n \| \"extended\"\n \| \"extended-multi-range\";\nexport type SelectionStrategy =\n // \| SelectionDisallowed\n SingleSelectionStrategy \| MultiSelectionStrategy;\n\nexport type selectedType<\n Item,\n Selection extends SelectionStrategy,\n> = Selection extends MultiSelectionStrategy ? Item[] : Item \| null;\n\nexport type SelectHandler<Item = string> = (\n event: SyntheticEvent,\n selectedItem: Item,\n) => void;\n\nexport type SelectionChangeHandler<\n Item = string,\n Selection extends SelectionStrategy = \"default\",\n> = (\n event: SyntheticEvent,\n selected: Selection extends SingleSelectionStrategy ? Item \| null : Item[],\n) => void;\n\nexport const hasSelection = <Item = unknown>(\n selected: Item \| Item[] \| null,\n): boolean => {\n return Array.isArray(selected)\n ? selected.length > 0\n : selected !== null && selected !== undefined;\n};\n\nexport const getFirstSelectedItem = <Item = unknown>(\n selected: Item \| Item[] \| null,\n): Item \| null => {\n return Array.isArray(selected) ? selected[0] : selected;\n};\n\nexport interface SelectionProps<\n Item,\n Selection extends SelectionStrategy = \"default\",\n> {\n defaultSelected?: Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[];\n onSelect?: SelectHandler<Item>;\n onSelectionChange?: SelectionChangeHandler<Item, Selection>;\n selected?: Selection extends SingleSelectionStrategy ? Item \| null : Item[];\n selectionStrategy?: Selection;\n}\n\nexport interface ListHandlers {\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n onKeyboardNavigation?: (\n event: KeyboardEvent<HTMLElement>,\n currentIndex: number,\n ) => void;\n onMouseMove?: (event: MouseEvent<HTMLElement>) => void;\n}\nexport interface SelectionHookProps<\n Item,\n Selection extends SelectionStrategy = \"default\",\n> extends SelectionProps<CollectionItem<Item>, Selection> {\n disableSelection?: boolean;\n highlightedIdx: number;\n indexPositions: CollectionItem<Item>[];\n label?: string;\n selectionKeys?: string[];\n tabToSelect?: boolean;\n}\n\nexport interface SelectionHookResult<\n Item,\n Selection extends SelectionStrategy = \"default\",\n> {\n listHandlers: ListHandlers;\n selected: Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> \| null\n : CollectionItem<Item>[];\n setSelected: (\n selected: Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> \| null\n : CollectionItem<Item>[],\n ) => void;\n}\n"],"names":[],"mappings":";;AAoCa,MAAA,YAAA,GAAe,CAC1B,QACY,KAAA;AACZ,EAAO,OAAA,KAAA,CAAM,QAAQ,QAAQ,CAAA,GACzB,SAAS,MAAS,GAAA,CAAA,GAClB,QAAa,KAAA,IAAA,IAAQ,QAAa,KAAA,MAAA;AACxC;AAEa,MAAA,oBAAA,GAAuB,CAClC,QACgB,KAAA;AAChB,EAAA,OAAO,MAAM,OAAQ,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,CAAC,CAAI,GAAA,QAAA;AACjD;;;;;"}

package/dist-cjs/common-hooks/useCollapsibleGroups.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCollapsibleGroups.js","sources":["../src/common-hooks/useCollapsibleGroups.ts"],"sourcesContent":["import { type MouseEvent, useCallback } from \"react\";\nimport type { CollectionHookResult, CollectionItem } from \"./collectionTypes\";\nimport { ArrowLeft, ArrowRight, Enter } from \"./keyUtils\";\nimport type { ListHandlers } from \"./selectionTypes\";\n\nconst NO_HANDLERS = {};\nconst canToggleItem = (item: CollectionItem<unknown>) =>\n Array.isArray(item.childNodes);\n// TODO how do we determine this and where does this function belong = in the collectionHook ?\nconst canSelectItem = (item: CollectionItem<unknown>) => true;\n\nconst toggleIconClicked = (el: HTMLElement) => {\n const closestToggle = el.closest(\n \"[data-toggle],[aria-expanded]\",\n ) as HTMLElement;\n return closestToggle.dataset.toggle === \"true\";\n};\n\ninterface CollapsibleHookProps<Item> {\n collapsibleHeaders?: boolean;\n collectionHook: CollectionHookResult<Item>;\n highlightedIdx: number;\n onToggle?: (node: Item) => void;\n}\n\ninterface CollapsibleHookResult<Item> {\n onClick?: ListHandlers[\"onClick\"];\n onKeyDown?: ListHandlers[\"onKeyDown\"];\n}\n\nexport const useCollapsibleGroups = <Item>({\n collapsibleHeaders,\n collectionHook,\n highlightedIdx,\n onToggle,\n}: CollapsibleHookProps<Item>): CollapsibleHookResult<Item> => {\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === ArrowRight \|\| e.key === Enter) {\n const item = collectionHook.data[highlightedIdx];\n if (item) {\n if (item.expanded === false && item.value) {\n e.preventDefault();\n collectionHook.expandGroupItem(item);\n onToggle?.(item.value);\n }\n }\n }\n\n if (e.key === ArrowLeft \|\| e.key === Enter) {\n const item = collectionHook.data[highlightedIdx];\n if (item) {\n if (item.expanded && item.value) {\n e.preventDefault();\n collectionHook.collapseGroupItem(item);\n onToggle?.(item.value);\n }\n }\n }\n },\n [\n collectionHook.collapseGroupItem,\n collectionHook.data,\n collectionHook.expandGroupItem,\n highlightedIdx,\n ],\n );\n\n const handleClick = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n console.log(`useCollapsibleGroups idx=${highlightedIdx}`);\n const item = collectionHook.data[highlightedIdx];\n console.log(evt.target, evt.currentTarget);\n if (\n item &&\n canToggleItem(item) &&\n (!canSelectItem(item) \|\| toggleIconClicked(evt.target as HTMLElement))\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n if (item.expanded === false && item.value) {\n collectionHook.expandGroupItem(item);\n onToggle?.(item.value);\n } else if (item.expanded === true && item.value) {\n collectionHook.collapseGroupItem(item);\n onToggle?.(item.value);\n }\n }\n },\n [\n collectionHook.collapseGroupItem,\n collectionHook.data,\n collectionHook.expandGroupItem,\n highlightedIdx,\n ],\n );\n\n /*\n These are List handlers, so we will not have reference to the actual node\n * element. We must rely on highlightedIdx to tell us which node is interactive.\n */\n const listHandlers = {\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n };\n\n return collapsibleHeaders ? listHandlers : NO_HANDLERS;\n};\n"],"names":["useCallback","ArrowRight","Enter","ArrowLeft"],"mappings":"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"}
1	+ {"version":3,"file":"useCollapsibleGroups.js","sources":["../src/common-hooks/useCollapsibleGroups.ts"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, useCallback } from \"react\";\nimport type { CollectionHookResult, CollectionItem } from \"./collectionTypes\";\nimport { ArrowLeft, ArrowRight, Enter } from \"./keyUtils\";\nimport type { ListHandlers } from \"./selectionTypes\";\n\nconst NO_HANDLERS = {};\nconst canToggleItem = (item: CollectionItem<unknown>) =>\n Array.isArray(item.childNodes);\n// TODO how do we determine this and where does this function belong = in the collectionHook ?\nconst canSelectItem = (item: CollectionItem<unknown>) => true;\n\nconst toggleIconClicked = (el: HTMLElement) => {\n const closestToggle = el.closest(\n \"[data-toggle],[aria-expanded]\",\n ) as HTMLElement;\n return closestToggle.dataset.toggle === \"true\";\n};\n\ninterface CollapsibleHookProps<Item> {\n collapsibleHeaders?: boolean;\n collectionHook: CollectionHookResult<Item>;\n highlightedIdx: number;\n onToggle?: (node: Item) => void;\n}\n\ninterface CollapsibleHookResult<Item> {\n onClick?: ListHandlers[\"onClick\"];\n onKeyDown?: ListHandlers[\"onKeyDown\"];\n}\n\nexport const useCollapsibleGroups = <Item>({\n collapsibleHeaders,\n collectionHook,\n highlightedIdx,\n onToggle,\n}: CollapsibleHookProps<Item>): CollapsibleHookResult<Item> => {\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === ArrowRight \|\| e.key === Enter) {\n const item = collectionHook.data[highlightedIdx];\n if (item) {\n if (item.expanded === false && item.value) {\n e.preventDefault();\n collectionHook.expandGroupItem(item);\n onToggle?.(item.value);\n }\n }\n }\n\n if (e.key === ArrowLeft \|\| e.key === Enter) {\n const item = collectionHook.data[highlightedIdx];\n if (item) {\n if (item.expanded && item.value) {\n e.preventDefault();\n collectionHook.collapseGroupItem(item);\n onToggle?.(item.value);\n }\n }\n }\n },\n [\n collectionHook.collapseGroupItem,\n collectionHook.data,\n collectionHook.expandGroupItem,\n highlightedIdx,\n ],\n );\n\n const handleClick = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n console.log(`useCollapsibleGroups idx=${highlightedIdx}`);\n const item = collectionHook.data[highlightedIdx];\n console.log(evt.target, evt.currentTarget);\n if (\n item &&\n canToggleItem(item) &&\n (!canSelectItem(item) \|\| toggleIconClicked(evt.target as HTMLElement))\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n if (item.expanded === false && item.value) {\n collectionHook.expandGroupItem(item);\n onToggle?.(item.value);\n } else if (item.expanded === true && item.value) {\n collectionHook.collapseGroupItem(item);\n onToggle?.(item.value);\n }\n }\n },\n [\n collectionHook.collapseGroupItem,\n collectionHook.data,\n collectionHook.expandGroupItem,\n highlightedIdx,\n ],\n );\n\n /*\n These are List handlers, so we will not have reference to the actual node\n * element. We must rely on highlightedIdx to tell us which node is interactive.\n */\n const listHandlers = {\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n };\n\n return collapsibleHeaders ? listHandlers : NO_HANDLERS;\n};\n"],"names":["useCallback","ArrowRight","Enter","ArrowLeft"],"mappings":"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"}

package/dist-cjs/common-hooks/useKeyboardNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useKeyboardNavigation.js","sources":["../src/common-hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type FocusEvent,\n type KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport {\n ArrowDown,\n ArrowUp,\n End,\n Home,\n PageDown,\n PageUp,\n isCharacterKey,\n isNavigationKey,\n} from \"./keyUtils\";\nimport type {\n NavigationHookProps,\n NavigationHookResult,\n} from \"./navigationTypes\";\nimport {\n type SelectionStrategy,\n getFirstSelectedItem,\n hasSelection,\n} from \"./selectionTypes\";\n\nexport const LIST_FOCUS_VISIBLE = -2;\n\nfunction nextItemIdx(count: number, key: string, idx: number) {\n if (key === ArrowUp \|\| key === End) {\n if (idx > 0) {\n return idx - 1;\n }\n return idx;\n }\n if (idx === null) {\n return 0;\n }\n if (idx === count - 1) {\n return idx;\n }\n return idx + 1;\n}\n\nconst getIndexOfSelectedItem = (\n items: CollectionItem<unknown>[],\n selected?: CollectionItem<unknown> \| null \| CollectionItem<unknown>[],\n) => {\n const selectedItem = getFirstSelectedItem(selected);\n if (selectedItem) {\n return items.indexOf(selectedItem);\n }\n return -1;\n};\n\nconst getStartIdx = (\n key: string,\n idx: number,\n selectedIdx: number,\n length: number,\n) => {\n if (key === End) {\n return length;\n }\n if (key === Home) {\n return -1;\n }\n if (idx !== -1) {\n return idx;\n }\n return selectedIdx;\n};\n\nconst getItemRect = (item: CollectionItem<unknown>) => {\n const el = document.getElementById(item.id);\n if (el) {\n return el.getBoundingClientRect();\n }\n throw Error(\n `useKeyboardNavigation.getItemRect no element found for item #${item?.id}`,\n );\n};\n\nconst pageDown = (\n containerEl: HTMLElement,\n itemEl: HTMLElement,\n indexPositions: CollectionItem<unknown>[],\n index: number,\n): number \| undefined => {\n const { top: itemTop } = itemEl.getBoundingClientRect();\n const { scrollTop, clientHeight, scrollHeight } = containerEl;\n const lastIndexPosition = indexPositions.length - 1;\n const newScrollTop = Math.min(\n scrollTop + clientHeight,\n scrollHeight - clientHeight,\n );\n if (newScrollTop !== scrollTop && index < lastIndexPosition) {\n containerEl.scrollTo(0, newScrollTop);\n // Might need to do this in a timeout, in case virtualized content has rendered\n let nextIdx = index;\n let nextRect: DOMRect;\n do {\n nextIdx += 1;\n nextRect = getItemRect(indexPositions[nextIdx]);\n } while (nextRect.top < itemTop && nextIdx < lastIndexPosition);\n return nextIdx;\n }\n};\n\nconst pageUp = async (\n containerEl: HTMLElement,\n itemEl: HTMLElement,\n indexPositions: CollectionItem<unknown>[],\n index: number,\n): Promise<number \| undefined> => {\n const { top: itemTop } = itemEl.getBoundingClientRect();\n const { scrollTop, clientHeight } = containerEl;\n const newScrollTop = Math.max(scrollTop - clientHeight, 0);\n if (newScrollTop !== scrollTop && index > 0) {\n containerEl.scrollTo(0, newScrollTop);\n return new Promise((resolve) => {\n // We must defer this operation until after render. If Items are virtualized.\n // we need to allow them to be rendered.\n requestAnimationFrame(() => {\n let nextIdx = index;\n let nextRect: DOMRect;\n do {\n nextIdx -= 1;\n nextRect = getItemRect(indexPositions[nextIdx]);\n } while (nextRect.top > itemTop && nextIdx > 0);\n resolve(nextIdx);\n });\n });\n }\n};\n\nconst isLeaf = <Item>(item: CollectionItem<Item>): boolean =>\n !item.header && !item.childNodes;\nconst isFocusable = <Item>(item: CollectionItem<Item>) =>\n isLeaf(item) \|\| item.expanded !== undefined;\n\nexport const useKeyboardNavigation = <\n Item,\n Selection extends SelectionStrategy,\n>({\n containerRef,\n defaultHighlightedIndex = -1,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n indexPositions,\n onHighlight,\n onKeyboardNavigation,\n restoreLastFocus,\n selected,\n}: NavigationHookProps<Item, Selection>): NavigationHookResult => {\n const lastFocus = useRef(-1);\n const [, forceRender] = useState({});\n const [highlightedIndex, setHighlightedIdx, isControlledHighlighting] =\n useControlled({\n controlled: highlightedIndexProp,\n default: defaultHighlightedIndex,\n name: \"UseKeyboardNavigation\",\n });\n\n const setHighlightedIndex = useCallback(\n (idx: number, fromKeyboard = false) => {\n onHighlight?.(idx);\n setHighlightedIdx(idx);\n if (fromKeyboard) {\n lastFocus.current = idx;\n }\n },\n [onHighlight],\n );\n\n const nextPageItemIdx = useCallback(\n async (e: KeyboardEvent, index: number): Promise<number> => {\n const { id } = indexPositions[index];\n let result: number \| undefined;\n if (id) {\n const itemEl = document.getElementById(id);\n const { current: containerEl } = containerRef;\n if (itemEl && containerEl) {\n result =\n e.key === PageDown\n ? pageDown(containerEl, itemEl, indexPositions, index)\n : await pageUp(containerEl, itemEl, indexPositions, index);\n }\n }\n return result ?? index;\n },\n [containerRef, indexPositions],\n );\n\n const nextFocusableItemIdx = useCallback(\n (\n key = ArrowDown,\n idx: number = key === ArrowDown ? -1 : indexPositions.length,\n ) => {\n if (indexPositions.length === 0) {\n return -1;\n }\n const indexOfSelectedItem = getIndexOfSelectedItem(\n indexPositions,\n selected,\n );\n // The start index is generally the highlightedIdx (passed in as idx).\n // We don't need it for Home and End navigation.\n // Special case where we have selection, but no highlighting - begin\n // navigation from selected item.\n const startIdx = getStartIdx(\n key,\n idx,\n indexOfSelectedItem,\n indexPositions.length,\n );\n\n let nextIdx = nextItemIdx(indexPositions.length, key, startIdx);\n // Guard against returning zero, when first item is a header or group\n if (nextIdx === 0 && key === ArrowUp && !isFocusable(indexPositions[0])) {\n return idx;\n }\n while (\n (((key === ArrowDown \|\| key === Home) &&\n nextIdx < indexPositions.length) \|\|\n ((key === ArrowUp \|\| key === End) && nextIdx > 0)) &&\n !isFocusable(indexPositions[nextIdx])\n ) {\n nextIdx = nextItemIdx(indexPositions.length, key, nextIdx);\n }\n return nextIdx;\n },\n [indexPositions, selected],\n );\n\n // does this belong here or should it be a method passed in?\n const keyboardNavigation = useRef(false);\n const ignoreFocus = useRef<boolean>(false);\n const setIgnoreFocus = useCallback(\n (value: boolean) => (ignoreFocus.current = value),\n [],\n );\n\n const handleFocus = useCallback(() => {\n // Ignore focus if mouse has been used\n if (ignoreFocus.current) {\n ignoreFocus.current = false;\n } else {\n // If mouse wan't used, then keyboard must have been\n keyboardNavigation.current = true;\n if (indexPositions.length === 0) {\n setHighlightedIndex(LIST_FOCUS_VISIBLE);\n } else if (highlightedIndex !== -1) {\n // We need to force a render here. We're not changing the highlightedIdx, but we want to\n // make sure we render with the correct focusVisible value. We don't store focusVisible\n // in state, as there are places where we would double render, as highlightedIdx also changes.\n forceRender({});\n } else if (restoreLastFocus) {\n if (lastFocus.current !== -1) {\n setHighlightedIndex(lastFocus.current);\n } else {\n const selectedItemIdx = getIndexOfSelectedItem(\n indexPositions,\n selected,\n );\n if (selectedItemIdx !== -1) {\n setHighlightedIndex(selectedItemIdx);\n } else {\n setHighlightedIndex(0);\n }\n }\n } else if (hasSelection(selected)) {\n const selectedItemIdx = getIndexOfSelectedItem(\n indexPositions,\n selected,\n );\n setHighlightedIndex(selectedItemIdx);\n } else if (disableHighlightOnFocus !== true) {\n setHighlightedIndex(nextFocusableItemIdx());\n }\n }\n }, [\n disableHighlightOnFocus,\n highlightedIndex,\n indexPositions,\n nextFocusableItemIdx,\n restoreLastFocus,\n selected,\n setHighlightedIndex,\n ]);\n\n const navigateChildItems = useCallback(\n async (e: KeyboardEvent) => {\n const nextIdx =\n e.key === PageDown \|\| e.key === PageUp\n ? await nextPageItemIdx(e, highlightedIndex)\n : nextFocusableItemIdx(e.key, highlightedIndex);\n\n if (nextIdx !== highlightedIndex) {\n setHighlightedIndex(nextIdx, true);\n }\n // Users may need to know that a Keyboard navigation event has been handled\n // even if no actual navigation was effected. e.g. fine-grained control\n // over aria-activedescendant requires this.\n onKeyboardNavigation?.(e, nextIdx);\n },\n [\n highlightedIndex,\n nextFocusableItemIdx,\n nextPageItemIdx,\n onKeyboardNavigation,\n setHighlightedIndex,\n ],\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (indexPositions.length > 0 && isNavigationKey(e)) {\n e.preventDefault();\n e.stopPropagation();\n keyboardNavigation.current = true;\n void navigateChildItems(e);\n } else if (isCharacterKey(e)) {\n keyboardNavigation.current = true;\n }\n },\n [indexPositions, navigateChildItems],\n );\n\n const listProps = useMemo(() => {\n return {\n onBlur: (e: FocusEvent) => {\n //TODO no direct ref to List\n const sourceTarget = (e.target as HTMLElement).closest(\".saltList\");\n const destTarget = e.relatedTarget as HTMLElement;\n if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n keyboardNavigation.current = false;\n setHighlightedIdx(-1);\n if (!restoreLastFocus) {\n lastFocus.current = -1;\n }\n }\n },\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: () => {\n keyboardNavigation.current = false;\n setIgnoreFocus(true);\n },\n\n // onMouseEnter would seem less expensive but it misses some cases\n onMouseMove: () => {\n if (keyboardNavigation.current) {\n keyboardNavigation.current = false;\n }\n },\n onMouseLeave: () => {\n keyboardNavigation.current = false;\n setIgnoreFocus(false);\n setHighlightedIndex(-1);\n },\n };\n }, [\n handleFocus,\n handleKeyDown,\n restoreLastFocus,\n setHighlightedIndex,\n setIgnoreFocus,\n ]);\n\n return {\n focusVisible: keyboardNavigation.current ? highlightedIndex : -1,\n controlledHighlighting: isControlledHighlighting,\n highlightedIndex,\n setHighlightedIndex,\n keyboardNavigation,\n listProps,\n setIgnoreFocus,\n };\n};\n"],"names":["ArrowUp","End","getFirstSelectedItem","Home","useRef","useState","useControlled","useCallback","PageDown","ArrowDown","hasSelection","PageUp","isNavigationKey","isCharacterKey","useMemo"],"mappings":"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"}
1	+ {"version":3,"file":"useKeyboardNavigation.js","sources":["../src/common-hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type FocusEvent,\n type KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport {\n ArrowDown,\n ArrowUp,\n End,\n Home,\n PageDown,\n PageUp,\n isCharacterKey,\n isNavigationKey,\n} from \"./keyUtils\";\nimport type {\n NavigationHookProps,\n NavigationHookResult,\n} from \"./navigationTypes\";\nimport {\n type SelectionStrategy,\n getFirstSelectedItem,\n hasSelection,\n} from \"./selectionTypes\";\n\nexport const LIST_FOCUS_VISIBLE = -2;\n\nfunction nextItemIdx(count: number, key: string, idx: number) {\n if (key === ArrowUp \|\| key === End) {\n if (idx > 0) {\n return idx - 1;\n }\n return idx;\n }\n if (idx === null) {\n return 0;\n }\n if (idx === count - 1) {\n return idx;\n }\n return idx + 1;\n}\n\nconst getIndexOfSelectedItem = (\n items: CollectionItem<unknown>[],\n selected?: CollectionItem<unknown> \| null \| CollectionItem<unknown>[],\n) => {\n const selectedItem = getFirstSelectedItem(selected);\n if (selectedItem) {\n return items.indexOf(selectedItem);\n }\n return -1;\n};\n\nconst getStartIdx = (\n key: string,\n idx: number,\n selectedIdx: number,\n length: number,\n) => {\n if (key === End) {\n return length;\n }\n if (key === Home) {\n return -1;\n }\n if (idx !== -1) {\n return idx;\n }\n return selectedIdx;\n};\n\nconst getItemRect = (item: CollectionItem<unknown>) => {\n const el = document.getElementById(item.id);\n if (el) {\n return el.getBoundingClientRect();\n }\n throw Error(\n `useKeyboardNavigation.getItemRect no element found for item #${item?.id}`,\n );\n};\n\nconst pageDown = (\n containerEl: HTMLElement,\n itemEl: HTMLElement,\n indexPositions: CollectionItem<unknown>[],\n index: number,\n): number \| undefined => {\n const { top: itemTop } = itemEl.getBoundingClientRect();\n const { scrollTop, clientHeight, scrollHeight } = containerEl;\n const lastIndexPosition = indexPositions.length - 1;\n const newScrollTop = Math.min(\n scrollTop + clientHeight,\n scrollHeight - clientHeight,\n );\n if (newScrollTop !== scrollTop && index < lastIndexPosition) {\n containerEl.scrollTo(0, newScrollTop);\n // Might need to do this in a timeout, in case virtualized content has rendered\n let nextIdx = index;\n let nextRect: DOMRect;\n do {\n nextIdx += 1;\n nextRect = getItemRect(indexPositions[nextIdx]);\n } while (nextRect.top < itemTop && nextIdx < lastIndexPosition);\n return nextIdx;\n }\n};\n\nconst pageUp = async (\n containerEl: HTMLElement,\n itemEl: HTMLElement,\n indexPositions: CollectionItem<unknown>[],\n index: number,\n): Promise<number \| undefined> => {\n const { top: itemTop } = itemEl.getBoundingClientRect();\n const { scrollTop, clientHeight } = containerEl;\n const newScrollTop = Math.max(scrollTop - clientHeight, 0);\n if (newScrollTop !== scrollTop && index > 0) {\n containerEl.scrollTo(0, newScrollTop);\n return new Promise((resolve) => {\n // We must defer this operation until after render. If Items are virtualized.\n // we need to allow them to be rendered.\n requestAnimationFrame(() => {\n let nextIdx = index;\n let nextRect: DOMRect;\n do {\n nextIdx -= 1;\n nextRect = getItemRect(indexPositions[nextIdx]);\n } while (nextRect.top > itemTop && nextIdx > 0);\n resolve(nextIdx);\n });\n });\n }\n};\n\nconst isLeaf = <Item>(item: CollectionItem<Item>): boolean =>\n !item.header && !item.childNodes;\nconst isFocusable = <Item>(item: CollectionItem<Item>) =>\n isLeaf(item) \|\| item.expanded !== undefined;\n\nexport const useKeyboardNavigation = <\n Item,\n Selection extends SelectionStrategy,\n>({\n containerRef,\n defaultHighlightedIndex = -1,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n indexPositions,\n onHighlight,\n onKeyboardNavigation,\n restoreLastFocus,\n selected,\n}: NavigationHookProps<Item, Selection>): NavigationHookResult => {\n const lastFocus = useRef(-1);\n const [, forceRender] = useState({});\n const [highlightedIndex, setHighlightedIdx, isControlledHighlighting] =\n useControlled({\n controlled: highlightedIndexProp,\n default: defaultHighlightedIndex,\n name: \"UseKeyboardNavigation\",\n });\n\n const setHighlightedIndex = useCallback(\n (idx: number, fromKeyboard = false) => {\n onHighlight?.(idx);\n setHighlightedIdx(idx);\n if (fromKeyboard) {\n lastFocus.current = idx;\n }\n },\n [onHighlight],\n );\n\n const nextPageItemIdx = useCallback(\n async (e: KeyboardEvent<HTMLElement>, index: number): Promise<number> => {\n const { id } = indexPositions[index];\n let result: number \| undefined;\n if (id) {\n const itemEl = document.getElementById(id);\n const { current: containerEl } = containerRef;\n if (itemEl && containerEl) {\n result =\n e.key === PageDown\n ? pageDown(containerEl, itemEl, indexPositions, index)\n : await pageUp(containerEl, itemEl, indexPositions, index);\n }\n }\n return result ?? index;\n },\n [containerRef, indexPositions],\n );\n\n const nextFocusableItemIdx = useCallback(\n (\n key = ArrowDown,\n idx: number = key === ArrowDown ? -1 : indexPositions.length,\n ) => {\n if (indexPositions.length === 0) {\n return -1;\n }\n const indexOfSelectedItem = getIndexOfSelectedItem(\n indexPositions,\n selected,\n );\n // The start index is generally the highlightedIdx (passed in as idx).\n // We don't need it for Home and End navigation.\n // Special case where we have selection, but no highlighting - begin\n // navigation from selected item.\n const startIdx = getStartIdx(\n key,\n idx,\n indexOfSelectedItem,\n indexPositions.length,\n );\n\n let nextIdx = nextItemIdx(indexPositions.length, key, startIdx);\n // Guard against returning zero, when first item is a header or group\n if (nextIdx === 0 && key === ArrowUp && !isFocusable(indexPositions[0])) {\n return idx;\n }\n while (\n (((key === ArrowDown \|\| key === Home) &&\n nextIdx < indexPositions.length) \|\|\n ((key === ArrowUp \|\| key === End) && nextIdx > 0)) &&\n !isFocusable(indexPositions[nextIdx])\n ) {\n nextIdx = nextItemIdx(indexPositions.length, key, nextIdx);\n }\n return nextIdx;\n },\n [indexPositions, selected],\n );\n\n // does this belong here or should it be a method passed in?\n const keyboardNavigation = useRef(false);\n const ignoreFocus = useRef<boolean>(false);\n const setIgnoreFocus = useCallback(\n (value: boolean) => (ignoreFocus.current = value),\n [],\n );\n\n const handleFocus = useCallback(() => {\n // Ignore focus if mouse has been used\n if (ignoreFocus.current) {\n ignoreFocus.current = false;\n } else {\n // If mouse wan't used, then keyboard must have been\n keyboardNavigation.current = true;\n if (indexPositions.length === 0) {\n setHighlightedIndex(LIST_FOCUS_VISIBLE);\n } else if (highlightedIndex !== -1) {\n // We need to force a render here. We're not changing the highlightedIdx, but we want to\n // make sure we render with the correct focusVisible value. We don't store focusVisible\n // in state, as there are places where we would double render, as highlightedIdx also changes.\n forceRender({});\n } else if (restoreLastFocus) {\n if (lastFocus.current !== -1) {\n setHighlightedIndex(lastFocus.current);\n } else {\n const selectedItemIdx = getIndexOfSelectedItem(\n indexPositions,\n selected,\n );\n if (selectedItemIdx !== -1) {\n setHighlightedIndex(selectedItemIdx);\n } else {\n setHighlightedIndex(0);\n }\n }\n } else if (hasSelection(selected)) {\n const selectedItemIdx = getIndexOfSelectedItem(\n indexPositions,\n selected,\n );\n setHighlightedIndex(selectedItemIdx);\n } else if (disableHighlightOnFocus !== true) {\n setHighlightedIndex(nextFocusableItemIdx());\n }\n }\n }, [\n disableHighlightOnFocus,\n highlightedIndex,\n indexPositions,\n nextFocusableItemIdx,\n restoreLastFocus,\n selected,\n setHighlightedIndex,\n ]);\n\n const navigateChildItems = useCallback(\n async (e: KeyboardEvent<HTMLElement>) => {\n const nextIdx =\n e.key === PageDown \|\| e.key === PageUp\n ? await nextPageItemIdx(e, highlightedIndex)\n : nextFocusableItemIdx(e.key, highlightedIndex);\n\n if (nextIdx !== highlightedIndex) {\n setHighlightedIndex(nextIdx, true);\n }\n // Users may need to know that a Keyboard navigation event has been handled\n // even if no actual navigation was effected. e.g. fine-grained control\n // over aria-activedescendant requires this.\n onKeyboardNavigation?.(e, nextIdx);\n },\n [\n highlightedIndex,\n nextFocusableItemIdx,\n nextPageItemIdx,\n onKeyboardNavigation,\n setHighlightedIndex,\n ],\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n if (indexPositions.length > 0 && isNavigationKey(e)) {\n e.preventDefault();\n e.stopPropagation();\n keyboardNavigation.current = true;\n void navigateChildItems(e);\n } else if (isCharacterKey(e)) {\n keyboardNavigation.current = true;\n }\n },\n [indexPositions, navigateChildItems],\n );\n\n const listProps = useMemo(() => {\n return {\n onBlur: (e: FocusEvent) => {\n //TODO no direct ref to List\n const sourceTarget = (e.target as HTMLElement).closest(\".saltList\");\n const destTarget = e.relatedTarget as HTMLElement;\n if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n keyboardNavigation.current = false;\n setHighlightedIdx(-1);\n if (!restoreLastFocus) {\n lastFocus.current = -1;\n }\n }\n },\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: () => {\n keyboardNavigation.current = false;\n setIgnoreFocus(true);\n },\n\n // onMouseEnter would seem less expensive but it misses some cases\n onMouseMove: () => {\n if (keyboardNavigation.current) {\n keyboardNavigation.current = false;\n }\n },\n onMouseLeave: () => {\n keyboardNavigation.current = false;\n setIgnoreFocus(false);\n setHighlightedIndex(-1);\n },\n };\n }, [\n handleFocus,\n handleKeyDown,\n restoreLastFocus,\n setHighlightedIndex,\n setIgnoreFocus,\n ]);\n\n return {\n focusVisible: keyboardNavigation.current ? highlightedIndex : -1,\n controlledHighlighting: isControlledHighlighting,\n highlightedIndex,\n setHighlightedIndex,\n keyboardNavigation,\n listProps,\n setIgnoreFocus,\n };\n};\n"],"names":["ArrowUp","End","getFirstSelectedItem","Home","useRef","useState","useControlled","useCallback","PageDown","ArrowDown","hasSelection","PageUp","isNavigationKey","isCharacterKey","useMemo"],"mappings":"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"}

package/dist-cjs/common-hooks/useKeyboardNavigationPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useKeyboardNavigationPanel.js","sources":["../src/common-hooks/useKeyboardNavigationPanel.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback, useMemo, useRef } from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport type { NavigationHookResult, NavigationProps } from \"./navigationTypes\";\n\ntype NavigationDirection = \"FWD\" \| \"BWD\";\n\nfunction nextItemIdx(\n count: number,\n direction: NavigationDirection,\n idx: number,\n cycleFocus = false,\n) {\n if (direction === \"BWD\") {\n if (idx > 0) {\n return idx - 1;\n }\n return cycleFocus ? count - 1 : idx;\n }\n if (idx === null) {\n return 0;\n }\n if (idx === count - 1) {\n return cycleFocus ? 0 : idx;\n }\n return idx + 1;\n}\n\nconst isLeaf = <Item>(item: CollectionItem<Item>): boolean =>\n !item.header && !item.childNodes;\nconst isFocusable = <Item>(item: CollectionItem<Item>) =>\n (isLeaf(item) \|\| item.expanded !== undefined) && item.focusable !== false;\n\n// we need a way to set highlightedIdx when selection changes\nexport const useKeyboardNavigationPanel = ({\n cycleFocus = false,\n defaultHighlightedIndex: defaultHighlightedIdx = -1,\n focusOnHighlight = false,\n highlightedIndex: highlightedIdxProp,\n indexPositions,\n onHighlight,\n onKeyboardNavigation,\n}: NavigationProps): NavigationHookResult => {\n const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] =\n useControlled({\n controlled: highlightedIdxProp,\n default: defaultHighlightedIdx,\n name: \"UseKeyboardNavigation\",\n });\n\n const setHighlightedIndex = useCallback(\n (idx: number) => {\n onHighlight?.(idx);\n setHighlightedIdx(idx);\n if (focusOnHighlight && idx !== -1) {\n const { id } = indexPositions[idx];\n const formField = document.getElementById(id);\n const targetEl = formField?.querySelector(\"[tabindex]\") as HTMLElement;\n setIgnoreFocus(true);\n targetEl?.focus();\n }\n },\n [focusOnHighlight, indexPositions, onHighlight],\n );\n\n const nextFocusableItemIdx = useCallback(\n (\n direction: NavigationDirection = \"FWD\",\n idx = direction === \"FWD\" ? -1 : indexPositions.length,\n ) => {\n let nextIdx = nextItemIdx(\n indexPositions.length,\n direction,\n idx,\n cycleFocus,\n );\n while (\n ((direction === \"FWD\" && nextIdx < indexPositions.length) \|\|\n (direction === \"BWD\" && nextIdx > 0)) &&\n !isFocusable(indexPositions[nextIdx])\n ) {\n nextIdx = nextItemIdx(\n indexPositions.length,\n direction,\n nextIdx,\n cycleFocus,\n );\n }\n return nextIdx;\n },\n [cycleFocus, indexPositions],\n );\n\n // does this belong here or should it be a method passed in?\n const keyboardNavigation = useRef(true);\n const ignoreFocus = useRef<boolean>(false);\n const setIgnoreFocus = useCallback(\n (value: boolean) => (ignoreFocus.current = value),\n [],\n );\n\n const handleFocus = useCallback(() => {\n if (ignoreFocus.current) {\n ignoreFocus.current = false;\n } else {\n setHighlightedIndex(nextFocusableItemIdx());\n }\n }, [nextFocusableItemIdx, setHighlightedIndex]);\n\n const navigateChildItems = useCallback(\n (e: KeyboardEvent) => {\n const direction: NavigationDirection = e.shiftKey ? \"BWD\" : \"FWD\";\n const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n console.log(`nextFocusableItem from ${highlightedIdx} is ${nextIdx}`);\n if (nextIdx !== highlightedIdx) {\n setHighlightedIndex(nextIdx);\n // What exactly is the point of this ?\n onKeyboardNavigation?.(e, nextIdx);\n }\n },\n [\n highlightedIdx,\n nextFocusableItemIdx,\n onKeyboardNavigation,\n setHighlightedIndex,\n ],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n if (indexPositions.length > 0 && evt.key === \"Tab\") {\n evt.preventDefault();\n evt.stopPropagation();\n keyboardNavigation.current = true;\n navigateChildItems(evt);\n }\n },\n [indexPositions, navigateChildItems],\n );\n\n const listProps = useMemo(\n () => ({\n onBlur: () => {\n // This sets highlightedIdx to -1 before a click on ListItem can effect selection\n // maybe in a timeout\n // setHighlightedIndex(-1);\n },\n onFocus: handleFocus,\n // Does this have to be capture ? We'll have to change the types\n // onKeyDownCapture: handleKeyDown,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: () => {\n keyboardNavigation.current = false;\n setIgnoreFocus(true);\n },\n\n // onMouseEnter would seem less expensive but it misses some cases\n onMouseMove: () => {\n if (keyboardNavigation.current) {\n keyboardNavigation.current = false;\n }\n },\n onMouseLeave: () => {\n keyboardNavigation.current = true;\n setIgnoreFocus(false);\n setHighlightedIndex(-1);\n },\n }),\n [handleFocus, handleKeyDown, setHighlightedIndex, setIgnoreFocus],\n );\n\n return {\n focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n controlledHighlighting: isControlledHighlighting,\n highlightedIndex: highlightedIdx,\n setHighlightedIndex,\n keyboardNavigation,\n listProps,\n setIgnoreFocus,\n };\n};\n"],"names":["useControlled","useCallback","useRef","useMemo"],"mappings":"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~~CAAqB~~,KAAA;~~AACpB~~,MAAM,MAAA,SAAA,GAAiC,CAAE,CAAA,QAAA,GAAW,KAAQ,GAAA,KAAA;AAC5D,MAAM,MAAA,OAAA,GAAU,oBAAqB,CAAA,SAAA,EAAW,cAAc,CAAA;AAC9D,MAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,uBAAA,EAA0B,cAAc,CAAA,IAAA,EAAO,OAAO,CAAE,CAAA,CAAA;AACpE,MAAA,IAAI,YAAY,cAAgB,EAAA;AAC9B,QAAA,mBAAA,CAAoB,OAAO,CAAA;AAE3B,QAAA,oBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,oBAAA,CAAuB,CAAG,EAAA,OAAA,CAAA;AAAA;AAC5B,KACF;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,~~GAAuB~~,KAAA;~~AACtB~~,MAAA,IAAI,cAAe,CAAA,MAAA,GAAS,CAAK,IAAA,GAAA,CAAI,QAAQ,KAAO,EAAA;AAClD,QAAA,GAAA,CAAI,cAAe,EAAA;AACnB,QAAA,GAAA,CAAI,eAAgB,EAAA;AACpB,QAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA;AAC7B,QAAA,kBAAA,CAAmB,GAAG,CAAA;AAAA;AACxB,KACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,GACrC;AAEA,EAAA,MAAM,SAAY,GAAAE,aAAA;AAAA,IAChB,OAAO;AAAA,MACL,QAAQ,MAAM;AAAA,OAId;AAAA,MACA,OAAS,EAAA,WAAA;AAAA;AAAA;AAAA,MAGT,SAAW,EAAA,aAAA;AAAA,MACX,oBAAoB,MAAM;AACxB,QAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA;AAC7B,QAAA,cAAA,CAAe,IAAI,CAAA;AAAA,OACrB;AAAA;AAAA,MAGA,aAAa,MAAM;AACjB,QAAA,IAAI,mBAAmB,OAAS,EAAA;AAC9B,UAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA;AAAA;AAC/B,OACF;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA;AAC7B,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAA,mBAAA,CAAoB,EAAE,CAAA;AAAA;AACxB,KACF,CAAA;AAAA,IACA,CAAC,WAAA,EAAa,aAAe,EAAA,mBAAA,EAAqB,cAAc;AAAA,GAClE;AAEA,EAAO,OAAA;AAAA,IACL,YAAA,EAAc,kBAAmB,CAAA,OAAA,GAAU,cAAiB,GAAA,EAAA;AAAA,IAC5D,sBAAwB,EAAA,wBAAA;AAAA,IACxB,gBAAkB,EAAA,cAAA;AAAA,IAClB,mBAAA;AAAA,IACA,kBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
1	+ {"version":3,"file":"useKeyboardNavigationPanel.js","sources":["../src/common-hooks/useKeyboardNavigationPanel.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback, useMemo, useRef } from \"react\";\nimport type { CollectionItem } from \"./collectionTypes\";\nimport type { NavigationHookResult, NavigationProps } from \"./navigationTypes\";\n\ntype NavigationDirection = \"FWD\" \| \"BWD\";\n\nfunction nextItemIdx(\n count: number,\n direction: NavigationDirection,\n idx: number,\n cycleFocus = false,\n) {\n if (direction === \"BWD\") {\n if (idx > 0) {\n return idx - 1;\n }\n return cycleFocus ? count - 1 : idx;\n }\n if (idx === null) {\n return 0;\n }\n if (idx === count - 1) {\n return cycleFocus ? 0 : idx;\n }\n return idx + 1;\n}\n\nconst isLeaf = <Item>(item: CollectionItem<Item>): boolean =>\n !item.header && !item.childNodes;\nconst isFocusable = <Item>(item: CollectionItem<Item>) =>\n (isLeaf(item) \|\| item.expanded !== undefined) && item.focusable !== false;\n\n// we need a way to set highlightedIdx when selection changes\nexport const useKeyboardNavigationPanel = ({\n cycleFocus = false,\n defaultHighlightedIndex: defaultHighlightedIdx = -1,\n focusOnHighlight = false,\n highlightedIndex: highlightedIdxProp,\n indexPositions,\n onHighlight,\n onKeyboardNavigation,\n}: NavigationProps): NavigationHookResult => {\n const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] =\n useControlled({\n controlled: highlightedIdxProp,\n default: defaultHighlightedIdx,\n name: \"UseKeyboardNavigation\",\n });\n\n const setHighlightedIndex = useCallback(\n (idx: number) => {\n onHighlight?.(idx);\n setHighlightedIdx(idx);\n if (focusOnHighlight && idx !== -1) {\n const { id } = indexPositions[idx];\n const formField = document.getElementById(id);\n const targetEl = formField?.querySelector(\"[tabindex]\") as HTMLElement;\n setIgnoreFocus(true);\n targetEl?.focus();\n }\n },\n [focusOnHighlight, indexPositions, onHighlight],\n );\n\n const nextFocusableItemIdx = useCallback(\n (\n direction: NavigationDirection = \"FWD\",\n idx = direction === \"FWD\" ? -1 : indexPositions.length,\n ) => {\n let nextIdx = nextItemIdx(\n indexPositions.length,\n direction,\n idx,\n cycleFocus,\n );\n while (\n ((direction === \"FWD\" && nextIdx < indexPositions.length) \|\|\n (direction === \"BWD\" && nextIdx > 0)) &&\n !isFocusable(indexPositions[nextIdx])\n ) {\n nextIdx = nextItemIdx(\n indexPositions.length,\n direction,\n nextIdx,\n cycleFocus,\n );\n }\n return nextIdx;\n },\n [cycleFocus, indexPositions],\n );\n\n // does this belong here or should it be a method passed in?\n const keyboardNavigation = useRef(true);\n const ignoreFocus = useRef<boolean>(false);\n const setIgnoreFocus = useCallback(\n (value: boolean) => (ignoreFocus.current = value),\n [],\n );\n\n const handleFocus = useCallback(() => {\n if (ignoreFocus.current) {\n ignoreFocus.current = false;\n } else {\n setHighlightedIndex(nextFocusableItemIdx());\n }\n }, [nextFocusableItemIdx, setHighlightedIndex]);\n\n const navigateChildItems = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n const direction: NavigationDirection = e.shiftKey ? \"BWD\" : \"FWD\";\n const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n console.log(`nextFocusableItem from ${highlightedIdx} is ${nextIdx}`);\n if (nextIdx !== highlightedIdx) {\n setHighlightedIndex(nextIdx);\n // What exactly is the point of this ?\n onKeyboardNavigation?.(e, nextIdx);\n }\n },\n [\n highlightedIdx,\n nextFocusableItemIdx,\n onKeyboardNavigation,\n setHighlightedIndex,\n ],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if (indexPositions.length > 0 && evt.key === \"Tab\") {\n evt.preventDefault();\n evt.stopPropagation();\n keyboardNavigation.current = true;\n navigateChildItems(evt);\n }\n },\n [indexPositions, navigateChildItems],\n );\n\n const listProps = useMemo(\n () => ({\n onBlur: () => {\n // This sets highlightedIdx to -1 before a click on ListItem can effect selection\n // maybe in a timeout\n // setHighlightedIndex(-1);\n },\n onFocus: handleFocus,\n // Does this have to be capture ? We'll have to change the types\n // onKeyDownCapture: handleKeyDown,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: () => {\n keyboardNavigation.current = false;\n setIgnoreFocus(true);\n },\n\n // onMouseEnter would seem less expensive but it misses some cases\n onMouseMove: () => {\n if (keyboardNavigation.current) {\n keyboardNavigation.current = false;\n }\n },\n onMouseLeave: () => {\n keyboardNavigation.current = true;\n setIgnoreFocus(false);\n setHighlightedIndex(-1);\n },\n }),\n [handleFocus, handleKeyDown, setHighlightedIndex, setIgnoreFocus],\n );\n\n return {\n focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n controlledHighlighting: isControlledHighlighting,\n highlightedIndex: highlightedIdx,\n setHighlightedIndex,\n keyboardNavigation,\n listProps,\n setIgnoreFocus,\n };\n};\n"],"names":["useControlled","useCallback","useRef","useMemo"],"mappings":"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"}

package/dist-cjs/date-input/DateInput.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n  align-items: center;\n  background: var(--saltDateInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltDateInput-height, var(--salt-size-base));\n  min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltDateInput-minWidth, 4em);\n  padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: 100%;\n}\n\n.saltDateInput:hover {\n  background: var(--saltDateInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied if `bordered={true}` */\n.saltDateInput-bordered.saltDateInput {\n  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);\n}\n\n.saltDateInput-bordered.saltDateInput:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-bordered.saltDateInput-focused,\n.saltDateInput-bordered.saltDateInput-focused:hover {\n  border-style: var(--salt-editable-borderStyle-active);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltDateInput-bordered.saltDateInput-readOnly,\n.saltDateInput-bordered.saltDateInput-readOnly:hover {\n  border-style: var(--salt-editable-borderStyle-readonly);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-bordered.saltDateInput-disabled,\n.saltDateInput-bordered.saltDateInput-disabled:hover {\n  border-style: var(--salt-editable-borderStyle-disabled);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);\n}\n\n.saltDateInput:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-focused .saltDateInput-activationIndicator,\n.saltDateInput-focused:hover .saltDateInput-activationIndicator {\n  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);\n}\n\n.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-readOnly:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-disabled .saltDateInput-activationIndicator,\n.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-disabled);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-bordered .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltDateInput-bordered.saltDateInput-focused .saltDateInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltDateInput-focused,\n.saltDateInput-focused:hover {\n  background: var(--saltDateInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-disabled,\n.saltDateInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n  display: inline-flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltDateInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: left;\n  width: min-content;\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltDateInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltDateInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to the dash between two inputs in range date input */\n.saltDateInput-dash {\n  margin: 0 var(--salt-spacing-50);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n  align-items: center;\n  background: var(--saltDateInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltDateInput-height, var(--salt-size-base));\n  min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltDateInput-minWidth, 4em);\n  padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: 100%;\n}\n\n.saltDateInput:hover {\n  background: var(--saltDateInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltDateInput-bordered.saltDateInput {\n  border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--input-borderColor);\n}\n\n.saltDateInput-bordered.saltDateInput:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-bordered.saltDateInput-focused,\n.saltDateInput-bordered.saltDateInput-focused:hover {\n  border-style: var(--salt-editable-borderStyle-active);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltDateInput-bordered.saltDateInput-readOnly,\n.saltDateInput-bordered.saltDateInput-readOnly:hover {\n  border-style: var(--salt-editable-borderStyle-readonly);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-bordered.saltDateInput-disabled,\n.saltDateInput-bordered.saltDateInput-disabled:hover {\n  border-style: var(--salt-editable-borderStyle-disabled);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--input-borderColor);\n}\n\n.saltDateInput:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-focused .saltDateInput-activationIndicator,\n.saltDateInput-focused:hover .saltDateInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);\n}\n\n.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-readOnly:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-disabled .saltDateInput-activationIndicator,\n.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-disabled);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-bordered .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltDateInput-bordered.saltDateInput-focused .saltDateInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltDateInput-focused,\n.saltDateInput-focused:hover {\n  background: var(--saltDateInput-background-active, var(--input-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-disabled,\n.saltDateInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n  display: inline-flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltDateInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: left;\n  width: min-content;\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltDateInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltDateInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to the dash between two inputs in range date input */\n.saltDateInput-dash {\n  margin: 0 var(--salt-spacing-50);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=DateInput.css.js.map

package/dist-cjs/date-picker/DatePickerOverlay.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltDatePickerOverlay {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n";
+var css_248z = ".saltDatePickerOverlay {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=DatePickerOverlay.css.js.map

package/dist-cjs/date-picker/DatePickerPanel.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltDatePickerOverlay {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  border-radius: var(--salt-palette-corner, 0);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-container > .saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltDatePickerOverlay {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  border-radius: var(--salt-palette-corner, 0);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-container > .saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=DatePickerPanel.css.js.map