@salt-ds/core 1.44.0 → 1.45.0

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 (108) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/css/salt-core.css +449 -11
  3. package/dist-cjs/combo-box/ComboBox.js +4 -1
  4. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  5. package/dist-cjs/dropdown/Dropdown.js +6 -2
  6. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  7. package/dist-cjs/index.js +4 -0
  8. package/dist-cjs/index.js.map +1 -1
  9. package/dist-cjs/list-box/ListBox.js +6 -2
  10. package/dist-cjs/list-box/ListBox.js.map +1 -1
  11. package/dist-cjs/list-control/ListControlState.js +6 -5
  12. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  13. package/dist-cjs/stepper/Step.css.js +6 -0
  14. package/dist-cjs/stepper/Step.css.js.map +1 -0
  15. package/dist-cjs/stepper/Step.js +166 -0
  16. package/dist-cjs/stepper/Step.js.map +1 -0
  17. package/dist-cjs/stepper/Stepper.css.js +6 -0
  18. package/dist-cjs/stepper/Stepper.css.js.map +1 -0
  19. package/dist-cjs/stepper/Stepper.js +40 -0
  20. package/dist-cjs/stepper/Stepper.js.map +1 -0
  21. package/dist-cjs/stepper/internal/StepConnector.css.js +6 -0
  22. package/dist-cjs/stepper/internal/StepConnector.css.js.map +1 -0
  23. package/dist-cjs/stepper/internal/StepConnector.js +27 -0
  24. package/dist-cjs/stepper/internal/StepConnector.js.map +1 -0
  25. package/dist-cjs/stepper/internal/StepExpandTrigger.css.js +6 -0
  26. package/dist-cjs/stepper/internal/StepExpandTrigger.css.js.map +1 -0
  27. package/dist-cjs/stepper/internal/StepExpandTrigger.js +45 -0
  28. package/dist-cjs/stepper/internal/StepExpandTrigger.js.map +1 -0
  29. package/dist-cjs/stepper/internal/StepIcon.css.js +6 -0
  30. package/dist-cjs/stepper/internal/StepIcon.css.js.map +1 -0
  31. package/dist-cjs/stepper/internal/StepIcon.js +62 -0
  32. package/dist-cjs/stepper/internal/StepIcon.js.map +1 -0
  33. package/dist-cjs/stepper/internal/StepScreenReaderOnly.js +13 -0
  34. package/dist-cjs/stepper/internal/StepScreenReaderOnly.js.map +1 -0
  35. package/dist-cjs/stepper/internal/StepText.css.js +6 -0
  36. package/dist-cjs/stepper/internal/StepText.css.js.map +1 -0
  37. package/dist-cjs/stepper/internal/StepText.js +50 -0
  38. package/dist-cjs/stepper/internal/StepText.js.map +1 -0
  39. package/dist-cjs/stepper/internal/StepperProvider.js +19 -0
  40. package/dist-cjs/stepper/internal/StepperProvider.js.map +1 -0
  41. package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
  42. package/dist-cjs/toggle-button/ToggleButton.js +32 -19
  43. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  44. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +1 -1
  45. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +30 -6
  46. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  47. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  48. package/dist-es/combo-box/ComboBox.js +4 -1
  49. package/dist-es/combo-box/ComboBox.js.map +1 -1
  50. package/dist-es/dropdown/Dropdown.js +6 -2
  51. package/dist-es/dropdown/Dropdown.js.map +1 -1
  52. package/dist-es/index.js +2 -0
  53. package/dist-es/index.js.map +1 -1
  54. package/dist-es/list-box/ListBox.js +6 -2
  55. package/dist-es/list-box/ListBox.js.map +1 -1
  56. package/dist-es/list-control/ListControlState.js +6 -5
  57. package/dist-es/list-control/ListControlState.js.map +1 -1
  58. package/dist-es/stepper/Step.css.js +4 -0
  59. package/dist-es/stepper/Step.css.js.map +1 -0
  60. package/dist-es/stepper/Step.js +164 -0
  61. package/dist-es/stepper/Step.js.map +1 -0
  62. package/dist-es/stepper/Stepper.css.js +4 -0
  63. package/dist-es/stepper/Stepper.css.js.map +1 -0
  64. package/dist-es/stepper/Stepper.js +38 -0
  65. package/dist-es/stepper/Stepper.js.map +1 -0
  66. package/dist-es/stepper/internal/StepConnector.css.js +4 -0
  67. package/dist-es/stepper/internal/StepConnector.css.js.map +1 -0
  68. package/dist-es/stepper/internal/StepConnector.js +25 -0
  69. package/dist-es/stepper/internal/StepConnector.js.map +1 -0
  70. package/dist-es/stepper/internal/StepExpandTrigger.css.js +4 -0
  71. package/dist-es/stepper/internal/StepExpandTrigger.css.js.map +1 -0
  72. package/dist-es/stepper/internal/StepExpandTrigger.js +43 -0
  73. package/dist-es/stepper/internal/StepExpandTrigger.js.map +1 -0
  74. package/dist-es/stepper/internal/StepIcon.css.js +4 -0
  75. package/dist-es/stepper/internal/StepIcon.css.js.map +1 -0
  76. package/dist-es/stepper/internal/StepIcon.js +60 -0
  77. package/dist-es/stepper/internal/StepIcon.js.map +1 -0
  78. package/dist-es/stepper/internal/StepScreenReaderOnly.js +11 -0
  79. package/dist-es/stepper/internal/StepScreenReaderOnly.js.map +1 -0
  80. package/dist-es/stepper/internal/StepText.css.js +4 -0
  81. package/dist-es/stepper/internal/StepText.css.js.map +1 -0
  82. package/dist-es/stepper/internal/StepText.js +48 -0
  83. package/dist-es/stepper/internal/StepText.js.map +1 -0
  84. package/dist-es/stepper/internal/StepperProvider.js +15 -0
  85. package/dist-es/stepper/internal/StepperProvider.js.map +1 -0
  86. package/dist-es/toggle-button/ToggleButton.css.js +1 -1
  87. package/dist-es/toggle-button/ToggleButton.js +32 -19
  88. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  89. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +1 -1
  90. package/dist-es/toggle-button-group/ToggleButtonGroup.js +30 -6
  91. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  92. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  93. package/dist-types/combo-box/useComboBox.d.ts +7 -7
  94. package/dist-types/index.d.ts +1 -0
  95. package/dist-types/list-control/ListControlState.d.ts +7 -7
  96. package/dist-types/stepper/Step.d.ts +46 -0
  97. package/dist-types/stepper/Stepper.d.ts +9 -0
  98. package/dist-types/stepper/index.d.ts +2 -0
  99. package/dist-types/stepper/internal/StepConnector.d.ts +1 -0
  100. package/dist-types/stepper/internal/StepExpandTrigger.d.ts +5 -0
  101. package/dist-types/stepper/internal/StepIcon.d.ts +8 -0
  102. package/dist-types/stepper/internal/StepScreenReaderOnly.d.ts +5 -0
  103. package/dist-types/stepper/internal/StepText.d.ts +5 -0
  104. package/dist-types/stepper/internal/StepperProvider.d.ts +9 -0
  105. package/dist-types/toggle-button/ToggleButton.d.ts +25 -1
  106. package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +16 -2
  107. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +6 -2
  108. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltToggleButton {\n align-items: center;\n appearance: none;\n background: var(--toggleButton-background);\n border-color: var(--toggleButton-borderColor, transparent);\n border-style: solid;\n border-width: var(--salt-size-border, 0);\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--toggleButton-text-color);\n cursor: pointer;\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0));\n margin: 0;\n height: var(--salt-size-base);\n min-width: unset;\n position: relative;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n transition: none;\n width: auto;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--toggleButton-background-active);\n color: var(--toggleButton-text-color-active);\n cursor: var(--salt-actionable-cursor-active);\n border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton:disabled {\n background: var(--toggleButton-background-disabled);\n color: var(--toggleButton-text-color-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n";
3
+ var css_248z = ".saltToggleButton {\n align-items: center;\n appearance: none;\n background: var(--toggleButton-background);\n border-color: var(--toggleButton-borderColor, transparent);\n border-style: solid;\n border-width: var(--salt-size-border, 0);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--toggleButton-text-color);\n cursor: pointer;\n display: inline-flex;\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0));\n margin: 0;\n min-width: unset;\n position: relative;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n transition: none;\n width: auto;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n cursor: var(--salt-actionable-cursor-active);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-disabled);\n color: var(--toggleButton-text-color-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-disabled-selected);\n color: var(--toggleButton-text-color-disabled-selected);\n border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n background: var(--toggleButton-background-readonly);\n color: var(--toggleButton-text-color-readonly);\n cursor: var(--salt-actionable-cursor-disabled);\n border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n background: var(--toggleButton-background-readonly-selected);\n color: var(--toggleButton-text-color-readonly-selected);\n border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-background);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-accented-background);\n --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-positive-background);\n --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-negative-background);\n --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-caution-background);\n --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ToggleButton.css.js.map
@@ -20,6 +20,7 @@ const withBaseName = makePrefixer.makePrefixer("saltToggleButton");
20
20
  const ToggleButton = React.forwardRef(
21
21
  function ToggleButton2(props, ref) {
22
22
  const {
23
+ appearance: appearanceProp,
23
24
  children,
24
25
  className,
25
26
  disabled: disabledProp,
@@ -27,7 +28,9 @@ const ToggleButton = React.forwardRef(
27
28
  onClick,
28
29
  onFocus,
29
30
  onChange,
31
+ readOnly: readOnlyProp,
30
32
  selected: selectedProp,
33
+ sentiment: sentimenentProp,
31
34
  ...rest
32
35
  } = props;
33
36
  const targetWindow = window.useWindow();
@@ -41,7 +44,10 @@ const ToggleButton = React.forwardRef(
41
44
  const toggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup();
42
45
  const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
43
46
  const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
47
+ const sentiment = sentimenentProp || (toggleButtonGroup == null ? void 0 : toggleButtonGroup.sentiment) || "neutral";
48
+ const appearance = appearanceProp || (toggleButtonGroup == null ? void 0 : toggleButtonGroup.appearance) || "solid";
44
49
  const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
50
+ const readOnly = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.readOnly) || readOnlyProp;
45
51
  const [selected, setSelected] = useControlled.useControlled({
46
52
  controlled: toggleButtonGroupSelected,
47
53
  default: Boolean(selectedProp),
@@ -49,6 +55,9 @@ const ToggleButton = React.forwardRef(
49
55
  state: "selected"
50
56
  });
51
57
  const handleClick = (event) => {
58
+ if (disabled || readOnly) {
59
+ return;
60
+ }
52
61
  toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
53
62
  setSelected(!selected);
54
63
  onChange == null ? void 0 : onChange(event);
@@ -58,25 +67,29 @@ const ToggleButton = React.forwardRef(
58
67
  toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
59
68
  onFocus == null ? void 0 : onFocus(event);
60
69
  };
61
- const ariaChecked = selected && !disabled;
62
- return /* @__PURE__ */ jsxRuntime.jsx(
63
- "button",
64
- {
65
- "aria-pressed": !toggleButtonGroup ? ariaChecked : void 0,
66
- "aria-checked": toggleButtonGroup ? ariaChecked : void 0,
67
- role: toggleButtonGroup ? "radio" : void 0,
68
- className: clsx.clsx(withBaseName(), className),
69
- disabled,
70
- ref: handleRef,
71
- onClick: handleClick,
72
- onFocus: handleFocus,
73
- tabIndex: focusable && !disabled ? 0 : -1,
74
- value,
75
- type: "button",
76
- ...rest,
77
- children
78
- }
79
- );
70
+ const toggleButtonProps = {
71
+ "aria-readonly": readOnlyProp,
72
+ "aria-pressed": !toggleButtonGroup ? selected : void 0,
73
+ "aria-checked": toggleButtonGroup ? selected : void 0,
74
+ "aria-disabled": disabled,
75
+ role: toggleButtonGroup ? "radio" : void 0,
76
+ className: clsx.clsx(
77
+ withBaseName(),
78
+ withBaseName(sentiment),
79
+ withBaseName(appearance),
80
+ readOnly && withBaseName("readOnly"),
81
+ className
82
+ ),
83
+ onClick: handleClick,
84
+ onFocus: handleFocus,
85
+ tabIndex: focusable ? 0 : -1,
86
+ value,
87
+ type: "button",
88
+ disabled,
89
+ readOnly: readOnlyProp,
90
+ ...rest
91
+ };
92
+ return /* @__PURE__ */ jsxRuntime.jsx("button", { ref: handleRef, ...toggleButtonProps, children });
80
93
  }
81
94
  );
82
95
 
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type MouseEvent,\n forwardRef,\n useRef,\n} from \"react\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n selected?: boolean;\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n selected: selectedProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const ariaChecked = selected && !disabled;\n\n return (\n <button\n aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n role={toggleButtonGroup ? \"radio\" : undefined}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\n type=\"button\"\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","jsx","clsx"],"mappings":"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"}
1
+ {"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type MouseEvent,\n forwardRef,\n useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The appearance of the toggle button.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * Callback fired when the toggle button's selection state is changed.\n */\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button will be read-only.\n */\n readOnly?: boolean;\n /**\n * The sentiment of the toggle button.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n /**\n * Whether the toggle button is a selected state.\n */\n selected?: boolean;\n /**\n * Value of the toggle button, to be used when in a controlled state.\n */\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n appearance: appearanceProp,\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n readOnly: readOnlyProp,\n selected: selectedProp,\n sentiment: sentimenentProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n\n const sentiment =\n sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n const appearance =\n appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const toggleButtonProps: ToggleButtonProps = {\n \"aria-readonly\": readOnlyProp,\n \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n \"aria-checked\": toggleButtonGroup ? selected : undefined,\n \"aria-disabled\": disabled,\n role: toggleButtonGroup ? \"radio\" : undefined,\n className: clsx(\n withBaseName(),\n withBaseName(sentiment),\n withBaseName(appearance),\n readOnly && withBaseName(\"readOnly\"),\n className,\n ),\n onClick: handleClick,\n onFocus: handleFocus,\n tabIndex: focusable ? 0 : -1,\n value: value,\n type: \"button\",\n disabled: disabled,\n readOnly: readOnlyProp,\n ...rest,\n };\n\n return (\n <button ref={handleRef} {...toggleButtonProps}>\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","clsx"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltToggleButtonGroup {\n display: flex;\n background: var(--salt-container-primary-background);\n border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n border-radius: var(--salt-palette-corner-weak, 0);\n width: fit-content;\n gap: var(--salt-spacing-50);\n padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n flex-direction: row;\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n justify-content: start;\n}\n";
3
+ var css_248z = ".saltToggleButtonGroup {\n display: flex;\n background: var(--salt-container-primary-background);\n border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n border-radius: var(--salt-palette-corner-weak, 0);\n width: fit-content;\n gap: var(--salt-spacing-50);\n padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n background: var(--salt-container-primary-background-disabled);\n border-color: var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n background: var(--salt-container-primary-background);\n border-color: var(--salt-container-primary-borderColor);\n cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n justify-content: start;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ToggleButtonGroup.css.js.map
@@ -18,6 +18,7 @@ var ToggleButtonGroupContext = require('./ToggleButtonGroupContext.js');
18
18
  const withBaseName = makePrefixer.makePrefixer("saltToggleButtonGroup");
19
19
  const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, ref) {
20
20
  const {
21
+ appearance,
21
22
  children,
22
23
  className,
23
24
  value: valueProp,
@@ -26,6 +27,8 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
26
27
  onChange,
27
28
  onKeyDown,
28
29
  orientation = "horizontal",
30
+ readOnly,
31
+ sentiment,
29
32
  ...rest
30
33
  } = props;
31
34
  const targetWindow = window.useWindow();
@@ -70,14 +73,27 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
70
73
  );
71
74
  const contextValue = React.useMemo(
72
75
  () => ({
73
- select,
74
- isSelected,
76
+ appearance,
77
+ disabled,
75
78
  focus,
76
79
  isFocused,
77
- disabled,
78
- orientation
80
+ isSelected,
81
+ orientation,
82
+ readOnly,
83
+ select,
84
+ sentiment
79
85
  }),
80
- [select, isSelected, isFocused, disabled, orientation, focus]
86
+ [
87
+ appearance,
88
+ disabled,
89
+ focus,
90
+ isFocused,
91
+ isSelected,
92
+ orientation,
93
+ readOnly,
94
+ select,
95
+ sentiment
96
+ ]
81
97
  );
82
98
  const handleKeyDown = (event) => {
83
99
  var _a, _b, _c;
@@ -102,7 +118,15 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
102
118
  return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroupContext.ToggleButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
103
119
  "div",
104
120
  {
105
- className: clsx.clsx(withBaseName(), withBaseName(orientation), className),
121
+ "aria-disabled": disabled,
122
+ "aria-readonly": readOnly,
123
+ className: clsx.clsx(
124
+ withBaseName(),
125
+ withBaseName(orientation),
126
+ disabled && withBaseName("disabled"),
127
+ readOnly && withBaseName("readOnly"),
128
+ className
129
+ ),
106
130
  role: "radiogroup",
107
131
  ref: handleRef,
108
132
  onKeyDown: handleKeyDown,
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n ToggleButtonGroupContext,\n type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value],\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value],\n );\n\n const focus = useCallback((id: Value) => {\n setFocused(id);\n }, []);\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused],\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n orientation,\n }),\n [select, isSelected, isFocused, disabled, orientation, focus],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement,\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
1
+ {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n ToggleButtonGroupContext,\n type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The appearance of all the toggle buttons within the group.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * Value of the toggle button group, to be used when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button group will be read-only.\n */\n readOnly?: boolean;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The visual sentimenent of all the toggle buttons within the group.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n appearance,\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n readOnly,\n sentiment,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value],\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value],\n );\n\n const focus = useCallback((id: Value) => {\n setFocused(id);\n }, []);\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused],\n );\n\n const contextValue = useMemo(\n () => ({\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n }),\n [\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n ],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement,\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n aria-disabled={disabled}\n aria-readonly={readOnly}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n disabled && withBaseName(\"disabled\"),\n readOnly && withBaseName(\"readOnly\"),\n className,\n )}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n disabled?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isSelected: (id: Value) => boolean;\n focus: (id: Value) => void;\n isFocused: (id: Value) => boolean;\n orientation: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAca,MAAA,wBAAA,GAA2BA,2BAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA;AAC5C;;;;;"}
1
+ {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n disabled?: boolean;\n focus: (id: Value) => void;\n isFocused: (id: Value) => boolean;\n isSelected: (id: Value) => boolean;\n orientation: \"horizontal\" | \"vertical\";\n readOnly?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n sentiment?: ButtonSentiment;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAkBa,MAAA,wBAAA,GAA2BA,2BAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA;AAC5C;;;;;"}
@@ -172,7 +172,10 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
172
172
  }
173
173
  }
174
174
  const activeOption = activeState ?? ((_a2 = getFirstOption()) == null ? void 0 : _a2.data);
175
- let newActive = null;
175
+ if (activeOption === void 0) {
176
+ return;
177
+ }
178
+ let newActive = void 0;
176
179
  switch (event.key) {
177
180
  case "ArrowDown":
178
181
  newActive = getOptionAfter(activeOption) ?? getLastOption();
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n Children,\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n type UseFloatingUIProps,\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport type ComboBoxProps<Item = string> = {\n /**\n * The options to display in the combo box.\n */\n children?: ReactNode;\n /**\n * If true, options will be selected on tab key press.\n */\n selectOnTab?: boolean;\n} & UseComboBoxProps<Item> &\n PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n props: ComboBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n children,\n className,\n disabled: disabledProp,\n endAdornment: endAdornmentProp,\n readOnly: readOnlyProp,\n multiselect,\n selectOnTab = !multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n onOpenChange,\n onChange,\n open,\n inputRef: inputRefProp,\n inputProps: inputPropsProp,\n variant = \"primary\",\n onKeyDown,\n onFocus,\n onBlur,\n value,\n defaultValue,\n valueToString = defaultValueToString,\n truncate,\n bordered = false,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box\",\n css: comboBoxCss,\n window: targetWindow,\n });\n const { CollapseIcon, ExpandIcon } = useIcon();\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const listControl = useComboBox<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n value,\n defaultValue,\n disabled,\n readOnly,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getIndexOfOption,\n getOptionsMatching,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n clear,\n focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n valueState,\n setValueState,\n removePill,\n } = listControl;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason,\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (reason === \"focus\") {\n setFocusedState(newOpen);\n }\n\n if (reason === \"focus\" && !newOpen) {\n setFocusVisibleState(false);\n }\n\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n\n if (newOpen) {\n inputRef.current?.focus();\n }\n };\n\n const hasValidChildren =\n Children.toArray(children).filter(Boolean).length > 0;\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && hasValidChildren,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n strategy: \"fixed\",\n middleware: [\n offset(1),\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!readOnly) {\n event.stopPropagation();\n setFocusVisibleState(false);\n setOpen(!openState, \"manual\");\n }\n };\n\n const handleButtonFocus = () => {\n inputRef.current?.focus();\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n const activeOption = activeState ?? getFirstOption()?.data;\n\n let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n null;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n if (openState && activeState?.disabled) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n select(event, activeState);\n\n if (!multiselect) {\n event.preventDefault();\n }\n\n break;\n case \"Tab\":\n if (\n openState &&\n selectOnTab &&\n activeState &&\n !activeState?.disabled &&\n !selectedState.includes(activeState?.value)\n ) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive) {\n setFocusVisibleState(true);\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n }\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n event.persist();\n if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n onBlur?.(event);\n }\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n if (value === \"\" && !multiselect) {\n clear(event);\n }\n\n setValueState(value);\n\n // Wait for the filter to happen\n queueMicrotask(() => {\n if (value !== \"\") {\n const newOption = getFirstOption();\n if (newOption) {\n setActive(newOption.data);\n }\n } else {\n setActive(undefined);\n }\n });\n\n onChange?.(event);\n };\n\n const handlePillRemove = (event: SyntheticEvent, index: number) => {\n event.stopPropagation();\n const removed = selectedState[index];\n removePill(event, removed);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleListMouseLeave = () => {\n setActive(undefined);\n };\n\n const handleFocusInput = () => {\n inputRef.current?.focus();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n useEffect(() => {\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > -1) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getFirstOption();\n setFocusVisibleState(true);\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getLastOption();\n setFocusVisibleState(true);\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getFirstOption();\n }\n\n setActive(newActive?.data);\n }, [openState, children]);\n\n const buttonId = useId();\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n const showOptionsButton = (\n <Button\n aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n aria-label=\"Show options\"\n aria-expanded={openState}\n aria-controls={openState ? listId : undefined}\n aria-haspopup=\"listbox\"\n disabled={disabled}\n appearance=\"transparent\"\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n tabIndex={-1}\n >\n {openState ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n </Button>\n );\n\n // avoid render empty fragment, or empty div appear in PillInput\n const endAdornment =\n !readOnly && hasValidChildren ? (\n <>\n {endAdornmentProp}\n {showOptionsButton}\n </>\n ) : (\n endAdornmentProp\n );\n\n return (\n <ListControlContext.Provider value={listControl}>\n <PillInput\n // Ensures that the field is focused when you don't directly click on the input.\n tabIndex={!disabled ? -1 : undefined}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: focusedState,\n [withBaseName(\"focusVisible\")]: focusVisibleState,\n },\n className,\n )}\n endAdornment={endAdornment}\n onChange={handleChange}\n // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n role={readOnly ? \"textbox\" : \"combobox\"}\n disabled={disabled}\n readOnly={readOnly}\n inputProps={{\n \"aria-readonly\": readOnly ? \"true\" : undefined,\n \"aria-expanded\": !readOnly ? openState : undefined,\n \"aria-controls\": openState && !readOnly ? listId : undefined,\n onKeyDown: handleKeyDown,\n ...inputPropsProp,\n }}\n aria-activedescendant={activeState?.id}\n variant={variant}\n inputRef={handleInputRef}\n value={valueState}\n ref={handleRef}\n bordered={bordered}\n {...getReferenceProps({\n onBlur: handleBlur,\n onFocus: handleFocus,\n ...rest,\n })}\n pills={\n multiselect ? selectedState.map((item) => valueToString(item)) : []\n }\n truncate={truncate && !focusedState && !openState}\n onPillRemove={handlePillRemove}\n hidePillClose={!focusedState || readOnly}\n emptyReadOnlyMarker={\n readOnly && selectedState.length > 0 ? \"\" : undefined\n }\n />\n <OptionList\n aria-multiselectable={multiselect}\n open={(openState || focusedState) && !readOnly && hasValidChildren}\n collapsed={!openState}\n ref={handleListRef}\n id={listId}\n tabIndex={-1}\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusInput,\n onClick: handleFocusInput,\n onMouseLeave: handleListMouseLeave,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ComboBox","comboBoxCss","_a","elements","value"],"mappings":"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"}
1
+ {"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n Children,\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n type UseFloatingUIProps,\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport type ComboBoxProps<Item = string> = {\n /**\n * The options to display in the combo box.\n */\n children?: ReactNode;\n /**\n * If true, options will be selected on tab key press.\n */\n selectOnTab?: boolean;\n} & UseComboBoxProps<Item> &\n PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n props: ComboBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n children,\n className,\n disabled: disabledProp,\n endAdornment: endAdornmentProp,\n readOnly: readOnlyProp,\n multiselect,\n selectOnTab = !multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n onOpenChange,\n onChange,\n open,\n inputRef: inputRefProp,\n inputProps: inputPropsProp,\n variant = \"primary\",\n onKeyDown,\n onFocus,\n onBlur,\n value,\n defaultValue,\n valueToString = defaultValueToString,\n truncate,\n bordered = false,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box\",\n css: comboBoxCss,\n window: targetWindow,\n });\n const { CollapseIcon, ExpandIcon } = useIcon();\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const listControl = useComboBox<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n value,\n defaultValue,\n disabled,\n readOnly,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getIndexOfOption,\n getOptionsMatching,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n clear,\n focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n valueState,\n setValueState,\n removePill,\n } = listControl;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason,\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (reason === \"focus\") {\n setFocusedState(newOpen);\n }\n\n if (reason === \"focus\" && !newOpen) {\n setFocusVisibleState(false);\n }\n\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n\n if (newOpen) {\n inputRef.current?.focus();\n }\n };\n\n const hasValidChildren =\n Children.toArray(children).filter(Boolean).length > 0;\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && hasValidChildren,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n strategy: \"fixed\",\n middleware: [\n offset(1),\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!readOnly) {\n event.stopPropagation();\n setFocusVisibleState(false);\n setOpen(!openState, \"manual\");\n }\n };\n\n const handleButtonFocus = () => {\n inputRef.current?.focus();\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined = undefined;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n if (openState && activeState?.disabled) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n select(event, activeState);\n\n if (!multiselect) {\n event.preventDefault();\n }\n\n break;\n case \"Tab\":\n if (\n openState &&\n selectOnTab &&\n activeState &&\n !activeState?.disabled &&\n !selectedState.includes(activeState?.value)\n ) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive) {\n setFocusVisibleState(true);\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n }\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n event.persist();\n if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n onBlur?.(event);\n }\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n if (value === \"\" && !multiselect) {\n clear(event);\n }\n\n setValueState(value);\n\n // Wait for the filter to happen\n queueMicrotask(() => {\n if (value !== \"\") {\n const newOption = getFirstOption();\n if (newOption) {\n setActive(newOption.data);\n }\n } else {\n setActive(undefined);\n }\n });\n\n onChange?.(event);\n };\n\n const handlePillRemove = (event: SyntheticEvent, index: number) => {\n event.stopPropagation();\n const removed = selectedState[index];\n removePill(event, removed);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleListMouseLeave = () => {\n setActive(undefined);\n };\n\n const handleFocusInput = () => {\n inputRef.current?.focus();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n useEffect(() => {\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > -1) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getFirstOption();\n setFocusVisibleState(true);\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getLastOption();\n setFocusVisibleState(true);\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getFirstOption();\n }\n\n setActive(newActive?.data);\n }, [openState, children]);\n\n const buttonId = useId();\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n const showOptionsButton = (\n <Button\n aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n aria-label=\"Show options\"\n aria-expanded={openState}\n aria-controls={openState ? listId : undefined}\n aria-haspopup=\"listbox\"\n disabled={disabled}\n appearance=\"transparent\"\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n tabIndex={-1}\n >\n {openState ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n </Button>\n );\n\n // avoid render empty fragment, or empty div appear in PillInput\n const endAdornment =\n !readOnly && hasValidChildren ? (\n <>\n {endAdornmentProp}\n {showOptionsButton}\n </>\n ) : (\n endAdornmentProp\n );\n\n return (\n <ListControlContext.Provider value={listControl}>\n <PillInput\n // Ensures that the field is focused when you don't directly click on the input.\n tabIndex={!disabled ? -1 : undefined}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: focusedState,\n [withBaseName(\"focusVisible\")]: focusVisibleState,\n },\n className,\n )}\n endAdornment={endAdornment}\n onChange={handleChange}\n // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n role={readOnly ? \"textbox\" : \"combobox\"}\n disabled={disabled}\n readOnly={readOnly}\n inputProps={{\n \"aria-readonly\": readOnly ? \"true\" : undefined,\n \"aria-expanded\": !readOnly ? openState : undefined,\n \"aria-controls\": openState && !readOnly ? listId : undefined,\n onKeyDown: handleKeyDown,\n ...inputPropsProp,\n }}\n aria-activedescendant={activeState?.id}\n variant={variant}\n inputRef={handleInputRef}\n value={valueState}\n ref={handleRef}\n bordered={bordered}\n {...getReferenceProps({\n onBlur: handleBlur,\n onFocus: handleFocus,\n ...rest,\n })}\n pills={\n multiselect ? selectedState.map((item) => valueToString(item)) : []\n }\n truncate={truncate && !focusedState && !openState}\n onPillRemove={handlePillRemove}\n hidePillClose={!focusedState || readOnly}\n emptyReadOnlyMarker={\n readOnly && selectedState.length > 0 ? \"\" : undefined\n }\n />\n <OptionList\n aria-multiselectable={multiselect}\n open={(openState || focusedState) && !readOnly && hasValidChildren}\n collapsed={!openState}\n ref={handleListRef}\n id={listId}\n tabIndex={-1}\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusInput,\n onClick: handleFocusInput,\n onMouseLeave: handleListMouseLeave,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ComboBox","comboBoxCss","_a","elements","value"],"mappings":"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"}
@@ -162,6 +162,7 @@ const Dropdown = forwardRef(function Dropdown2(props, ref) {
162
162
  }
163
163
  };
164
164
  const handleKeyDown = (event) => {
165
+ var _a2;
165
166
  onKeyDown == null ? void 0 : onKeyDown(event);
166
167
  if (readOnly) {
167
168
  return;
@@ -177,8 +178,11 @@ const Dropdown = forwardRef(function Dropdown2(props, ref) {
177
178
  event.stopPropagation();
178
179
  handleTypeahead(event);
179
180
  }
180
- const activeOption = activeState ?? getFirstOption().data;
181
- let newActive = null;
181
+ const activeOption = activeState ?? ((_a2 = getFirstOption()) == null ? void 0 : _a2.data);
182
+ if (activeOption === void 0) {
183
+ return;
184
+ }
185
+ let newActive = void 0;
182
186
  switch (event.key) {
183
187
  case "ArrowDown":
184
188
  newActive = getOptionAfter(activeOption) ?? getLastOption();
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n type ListControlProps,\n defaultValueToString,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n type UseFloatingUIProps,\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport type DropdownProps<Item = string> = {\n /**\n * If `true`, the dropdown will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the dropdown will be read-only.\n */\n readOnly?: boolean;\n /**\n * The options to display in the dropdown.\n */\n children?: ReactNode;\n /**\n * The marker to use in an empty read only dropdown.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * If `true`, the dropdown will be multiselect.\n */\n multiselect?: boolean;\n /**\n * The text shown when the dropdown has no value.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown will be required.\n */\n required?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n */\n value?: string;\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n ListControlProps<Item>;\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n return open ? (\n <CollapseIcon className={withBaseName(\"toggle\")} aria-hidden />\n ) : (\n <ExpandIcon className={withBaseName(\"toggle\")} aria-hidden />\n );\n}\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n props: DropdownProps<Item>,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n disabled: disabledProp,\n emptyReadOnlyMarker = \"—\",\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n value,\n onOpenChange,\n open,\n placeholder,\n startAdornment,\n required: requiredProp,\n variant = \"primary\",\n validationStatus: validationStatusProp,\n onKeyDown,\n onFocus,\n onBlur,\n valueToString = defaultValueToString,\n bordered = false,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n const required = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : requiredProp;\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const isEmptyReadOnly = readOnly && selectedValue === \"\";\n const valueText = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : (value ?? selectedValue);\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason,\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && Children.count(children) > 0,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context),\n ]);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n const activeOption = activeState ?? getFirstOption().data;\n\n let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n null;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n case \" \":\n if (\n (openState && Boolean(activeState?.disabled)) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(false);\n if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n onBlur?.(event);\n }\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleFocusButton = () => {\n buttonRef.current?.focus();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n useEffect(() => {\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getFirstOption();\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getLastOption();\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getFirstOption();\n }\n\n setActive(newActive?.data);\n }, [openState, children]);\n\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n ref={handleButtonRef}\n role=\"combobox\"\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly ? \"true\" : undefined}\n aria-required={required ? \"true\" : undefined}\n aria-expanded={openState}\n aria-activedescendant={activeState?.id}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n aria-controls={openState ? listId : undefined}\n {...getReferenceProps({\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ...rest,\n })}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueText,\n })}\n >\n {!valueText ? placeholder : valueText}\n </span>\n {!disabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {!readOnly && <ExpandIcon open={openState} />}\n <div className={withBaseName(\"activationIndicator\")} />\n </button>\n <OptionList\n aria-multiselectable={multiselect}\n open={\n (openState || focusedState) &&\n !readOnly &&\n Children.count(children) > 0\n }\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusButton,\n onClick: handleFocusButton,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={handleListRef}\n id={listId}\n collapsed={!openState}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["ExpandIcon","Dropdown","dropdownCss","elements","_a"],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n type ListControlProps,\n defaultValueToString,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n type UseFloatingUIProps,\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport type DropdownProps<Item = string> = {\n /**\n * If `true`, the dropdown will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the dropdown will be read-only.\n */\n readOnly?: boolean;\n /**\n * The options to display in the dropdown.\n */\n children?: ReactNode;\n /**\n * The marker to use in an empty read only dropdown.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * If `true`, the dropdown will be multiselect.\n */\n multiselect?: boolean;\n /**\n * The text shown when the dropdown has no value.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown will be required.\n */\n required?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n */\n value?: string;\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n ListControlProps<Item>;\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n return open ? (\n <CollapseIcon className={withBaseName(\"toggle\")} aria-hidden />\n ) : (\n <ExpandIcon className={withBaseName(\"toggle\")} aria-hidden />\n );\n}\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n props: DropdownProps<Item>,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n disabled: disabledProp,\n emptyReadOnlyMarker = \"—\",\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n value,\n onOpenChange,\n open,\n placeholder,\n startAdornment,\n required: requiredProp,\n variant = \"primary\",\n validationStatus: validationStatusProp,\n onKeyDown,\n onFocus,\n onBlur,\n valueToString = defaultValueToString,\n bordered = false,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n const required = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : requiredProp;\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const isEmptyReadOnly = readOnly && selectedValue === \"\";\n const valueText = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : (value ?? selectedValue);\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason,\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && Children.count(children) > 0,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context),\n ]);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined = undefined;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n case \" \":\n if (\n (openState && Boolean(activeState?.disabled)) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(false);\n if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n onBlur?.(event);\n }\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleFocusButton = () => {\n buttonRef.current?.focus();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n useEffect(() => {\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getFirstOption();\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getLastOption();\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getFirstOption();\n }\n\n setActive(newActive?.data);\n }, [openState, children]);\n\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n ref={handleButtonRef}\n role=\"combobox\"\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly ? \"true\" : undefined}\n aria-required={required ? \"true\" : undefined}\n aria-expanded={openState}\n aria-activedescendant={activeState?.id}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n aria-controls={openState ? listId : undefined}\n {...getReferenceProps({\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ...rest,\n })}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueText,\n })}\n >\n {!valueText ? placeholder : valueText}\n </span>\n {!disabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {!readOnly && <ExpandIcon open={openState} />}\n <div className={withBaseName(\"activationIndicator\")} />\n </button>\n <OptionList\n aria-multiselectable={multiselect}\n open={\n (openState || focusedState) &&\n !readOnly &&\n Children.count(children) > 0\n }\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusButton,\n onClick: handleFocusButton,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={handleListRef}\n id={listId}\n collapsed={!openState}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["ExpandIcon","Dropdown","dropdownCss","elements","_a"],"mappings":"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"}