@salt-ds/core 0.0.0-snapshot-20230623164123 → 0.0.0-snapshot-20230802143610

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 (259) hide show
  1. package/dist-cjs/accordion/Accordion.css.js +6 -0
  2. package/dist-cjs/accordion/Accordion.css.js.map +1 -0
  3. package/dist-cjs/accordion/Accordion.js +73 -0
  4. package/dist-cjs/accordion/Accordion.js.map +1 -0
  5. package/dist-cjs/accordion/AccordionContext.js +29 -0
  6. package/dist-cjs/accordion/AccordionContext.js.map +1 -0
  7. package/dist-cjs/accordion/AccordionGroup.css.js +6 -0
  8. package/dist-cjs/accordion/AccordionGroup.css.js.map +1 -0
  9. package/dist-cjs/accordion/AccordionGroup.js +36 -0
  10. package/dist-cjs/accordion/AccordionGroup.js.map +1 -0
  11. package/dist-cjs/accordion/AccordionHeader.css.js +6 -0
  12. package/dist-cjs/accordion/AccordionHeader.css.js.map +1 -0
  13. package/dist-cjs/accordion/AccordionHeader.js +63 -0
  14. package/dist-cjs/accordion/AccordionHeader.js.map +1 -0
  15. package/dist-cjs/accordion/AccordionPanel.css.js +6 -0
  16. package/dist-cjs/accordion/AccordionPanel.css.js.map +1 -0
  17. package/dist-cjs/accordion/AccordionPanel.js +76 -0
  18. package/dist-cjs/accordion/AccordionPanel.js.map +1 -0
  19. package/dist-cjs/button/Button.css.js +1 -1
  20. package/dist-cjs/card/InteractableCard.css.js +1 -1
  21. package/dist-cjs/card/InteractableCard.js +5 -3
  22. package/dist-cjs/card/InteractableCard.js.map +1 -1
  23. package/dist-cjs/checkbox/Checkbox.css.js +1 -1
  24. package/dist-cjs/checkbox/Checkbox.js +36 -19
  25. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  26. package/dist-cjs/checkbox/CheckboxGroup.js +10 -6
  27. package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
  28. package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
  29. package/dist-cjs/checkbox/CheckboxIcon.js +45 -27
  30. package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
  31. package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
  32. package/dist-cjs/drawer/Drawer.css.js +6 -0
  33. package/dist-cjs/drawer/Drawer.css.js.map +1 -0
  34. package/dist-cjs/drawer/Drawer.js +82 -0
  35. package/dist-cjs/drawer/Drawer.js.map +1 -0
  36. package/dist-cjs/drawer/useDrawer.js +36 -0
  37. package/dist-cjs/drawer/useDrawer.js.map +1 -0
  38. package/dist-cjs/form-field/FormField.css.js +1 -1
  39. package/dist-cjs/form-field/FormField.js +4 -2
  40. package/dist-cjs/form-field/FormField.js.map +1 -1
  41. package/dist-cjs/form-field/FormFieldHelperText.css.js +1 -1
  42. package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
  43. package/dist-cjs/form-field/FormFieldLabel.js +15 -6
  44. package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
  45. package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
  46. package/dist-cjs/index.js +27 -10
  47. package/dist-cjs/index.js.map +1 -1
  48. package/dist-cjs/input/Input.css.js +1 -1
  49. package/dist-cjs/input/Input.js +7 -12
  50. package/dist-cjs/input/Input.js.map +1 -1
  51. package/dist-cjs/multiline-input/MultilineInput.css.js +6 -0
  52. package/dist-cjs/multiline-input/MultilineInput.css.js.map +1 -0
  53. package/dist-cjs/multiline-input/MultilineInput.js +170 -0
  54. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -0
  55. package/dist-cjs/radio-button/RadioButton.css.js +1 -1
  56. package/dist-cjs/radio-button/RadioButton.js +28 -10
  57. package/dist-cjs/radio-button/RadioButton.js.map +1 -1
  58. package/dist-cjs/radio-button/RadioButtonGroup.js +5 -1
  59. package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
  60. package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
  61. package/dist-cjs/radio-button/RadioButtonIcon.js +36 -22
  62. package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
  63. package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
  64. package/dist-cjs/status-adornment/StatusAdornment.css.js +1 -1
  65. package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
  66. package/dist-cjs/text/Text.css.js +1 -1
  67. package/dist-cjs/toast/Toast.css.js +6 -0
  68. package/dist-cjs/toast/Toast.css.js.map +1 -0
  69. package/dist-cjs/toast/Toast.js +50 -0
  70. package/dist-cjs/toast/Toast.js.map +1 -0
  71. package/dist-cjs/toast/ToastContent.css.js +6 -0
  72. package/dist-cjs/toast/ToastContent.css.js.map +1 -0
  73. package/dist-cjs/toast/ToastContent.js +34 -0
  74. package/dist-cjs/toast/ToastContent.js.map +1 -0
  75. package/dist-cjs/toggle-button/ToggleButton.css.js +6 -0
  76. package/dist-cjs/toggle-button/ToggleButton.css.js.map +1 -0
  77. package/dist-cjs/toggle-button/ToggleButton.js +81 -0
  78. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -0
  79. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +6 -0
  80. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js.map +1 -0
  81. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +117 -0
  82. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -0
  83. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +20 -0
  84. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -0
  85. package/dist-cjs/tooltip/Tooltip.js +52 -17
  86. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  87. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  88. package/dist-cjs/utils/useFloatingUI.js +1 -48
  89. package/dist-cjs/utils/useFloatingUI.js.map +1 -1
  90. package/dist-es/accordion/Accordion.css.js +4 -0
  91. package/dist-es/accordion/Accordion.css.js.map +1 -0
  92. package/dist-es/accordion/Accordion.js +69 -0
  93. package/dist-es/accordion/Accordion.js.map +1 -0
  94. package/dist-es/accordion/AccordionContext.js +24 -0
  95. package/dist-es/accordion/AccordionContext.js.map +1 -0
  96. package/dist-es/accordion/AccordionGroup.css.js +4 -0
  97. package/dist-es/accordion/AccordionGroup.css.js.map +1 -0
  98. package/dist-es/accordion/AccordionGroup.js +32 -0
  99. package/dist-es/accordion/AccordionGroup.js.map +1 -0
  100. package/dist-es/accordion/AccordionHeader.css.js +4 -0
  101. package/dist-es/accordion/AccordionHeader.css.js.map +1 -0
  102. package/dist-es/accordion/AccordionHeader.js +59 -0
  103. package/dist-es/accordion/AccordionHeader.js.map +1 -0
  104. package/dist-es/accordion/AccordionPanel.css.js +4 -0
  105. package/dist-es/accordion/AccordionPanel.css.js.map +1 -0
  106. package/dist-es/accordion/AccordionPanel.js +72 -0
  107. package/dist-es/accordion/AccordionPanel.js.map +1 -0
  108. package/dist-es/button/Button.css.js +1 -1
  109. package/dist-es/card/InteractableCard.css.js +1 -1
  110. package/dist-es/card/InteractableCard.js +5 -3
  111. package/dist-es/card/InteractableCard.js.map +1 -1
  112. package/dist-es/checkbox/Checkbox.css.js +1 -1
  113. package/dist-es/checkbox/Checkbox.js +36 -19
  114. package/dist-es/checkbox/Checkbox.js.map +1 -1
  115. package/dist-es/checkbox/CheckboxGroup.js +10 -6
  116. package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
  117. package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
  118. package/dist-es/checkbox/CheckboxIcon.js +46 -28
  119. package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
  120. package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
  121. package/dist-es/drawer/Drawer.css.js +4 -0
  122. package/dist-es/drawer/Drawer.css.js.map +1 -0
  123. package/dist-es/drawer/Drawer.js +77 -0
  124. package/dist-es/drawer/Drawer.js.map +1 -0
  125. package/dist-es/drawer/useDrawer.js +32 -0
  126. package/dist-es/drawer/useDrawer.js.map +1 -0
  127. package/dist-es/form-field/FormField.css.js +1 -1
  128. package/dist-es/form-field/FormField.js +4 -2
  129. package/dist-es/form-field/FormField.js.map +1 -1
  130. package/dist-es/form-field/FormFieldHelperText.css.js +1 -1
  131. package/dist-es/form-field/FormFieldLabel.css.js +1 -1
  132. package/dist-es/form-field/FormFieldLabel.js +16 -7
  133. package/dist-es/form-field/FormFieldLabel.js.map +1 -1
  134. package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
  135. package/dist-es/index.js +14 -3
  136. package/dist-es/index.js.map +1 -1
  137. package/dist-es/input/Input.css.js +1 -1
  138. package/dist-es/input/Input.js +7 -12
  139. package/dist-es/input/Input.js.map +1 -1
  140. package/dist-es/multiline-input/MultilineInput.css.js +4 -0
  141. package/dist-es/multiline-input/MultilineInput.css.js.map +1 -0
  142. package/dist-es/multiline-input/MultilineInput.js +166 -0
  143. package/dist-es/multiline-input/MultilineInput.js.map +1 -0
  144. package/dist-es/radio-button/RadioButton.css.js +1 -1
  145. package/dist-es/radio-button/RadioButton.js +28 -10
  146. package/dist-es/radio-button/RadioButton.js.map +1 -1
  147. package/dist-es/radio-button/RadioButtonGroup.js +5 -1
  148. package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
  149. package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
  150. package/dist-es/radio-button/RadioButtonIcon.js +36 -22
  151. package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
  152. package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
  153. package/dist-es/status-adornment/StatusAdornment.css.js +1 -1
  154. package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
  155. package/dist-es/text/Text.css.js +1 -1
  156. package/dist-es/toast/Toast.css.js +4 -0
  157. package/dist-es/toast/Toast.css.js.map +1 -0
  158. package/dist-es/toast/Toast.js +46 -0
  159. package/dist-es/toast/Toast.js.map +1 -0
  160. package/dist-es/toast/ToastContent.css.js +4 -0
  161. package/dist-es/toast/ToastContent.css.js.map +1 -0
  162. package/dist-es/toast/ToastContent.js +30 -0
  163. package/dist-es/toast/ToastContent.js.map +1 -0
  164. package/dist-es/toggle-button/ToggleButton.css.js +4 -0
  165. package/dist-es/toggle-button/ToggleButton.css.js.map +1 -0
  166. package/dist-es/toggle-button/ToggleButton.js +77 -0
  167. package/dist-es/toggle-button/ToggleButton.js.map +1 -0
  168. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +4 -0
  169. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js.map +1 -0
  170. package/dist-es/toggle-button-group/ToggleButtonGroup.js +113 -0
  171. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -0
  172. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +15 -0
  173. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -0
  174. package/dist-es/tooltip/Tooltip.js +52 -17
  175. package/dist-es/tooltip/Tooltip.js.map +1 -1
  176. package/dist-es/tooltip/useTooltip.js.map +1 -1
  177. package/dist-es/utils/useFloatingUI.js +3 -46
  178. package/dist-es/utils/useFloatingUI.js.map +1 -1
  179. package/dist-types/accordion/Accordion.d.ts +29 -0
  180. package/dist-types/accordion/AccordionContext.d.ts +11 -0
  181. package/dist-types/accordion/AccordionGroup.d.ts +3 -0
  182. package/dist-types/accordion/AccordionHeader.d.ts +3 -0
  183. package/dist-types/accordion/AccordionPanel.d.ts +3 -0
  184. package/dist-types/accordion/index.d.ts +4 -0
  185. package/dist-types/card/InteractableCard.d.ts +2 -3
  186. package/dist-types/checkbox/Checkbox.d.ts +6 -2
  187. package/dist-types/checkbox/CheckboxGroup.d.ts +6 -1
  188. package/dist-types/checkbox/CheckboxIcon.d.ts +7 -2
  189. package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts +3 -1
  190. package/dist-types/drawer/Drawer.d.ts +22 -0
  191. package/dist-types/drawer/index.d.ts +2 -0
  192. package/dist-types/drawer/useDrawer.d.ts +27 -0
  193. package/dist-types/form-field/FormField.d.ts +5 -1
  194. package/dist-types/form-field/FormFieldLabel.d.ts +10 -1
  195. package/dist-types/form-field/index.d.ts +0 -1
  196. package/dist-types/form-field-context/FormFieldContext.d.ts +3 -0
  197. package/dist-types/index.d.ts +7 -0
  198. package/dist-types/input/index.d.ts +0 -1
  199. package/dist-types/multiline-input/MultilineInput.d.ts +40 -0
  200. package/dist-types/multiline-input/index.d.ts +1 -0
  201. package/dist-types/radio-button/RadioButton.d.ts +12 -4
  202. package/dist-types/radio-button/RadioButtonGroup.d.ts +4 -0
  203. package/dist-types/radio-button/RadioButtonIcon.d.ts +10 -5
  204. package/dist-types/radio-button/internal/RadioGroupContext.d.ts +3 -1
  205. package/dist-types/status-adornment/StatusAdornment.d.ts +1 -2
  206. package/dist-types/toast/Toast.d.ts +9 -0
  207. package/dist-types/toast/ToastContent.d.ts +2 -0
  208. package/dist-types/toast/index.d.ts +2 -0
  209. package/dist-types/toggle-button/ToggleButton.d.ts +7 -0
  210. package/dist-types/toggle-button/index.d.ts +1 -0
  211. package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +25 -0
  212. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +10 -0
  213. package/dist-types/toggle-button-group/index.d.ts +2 -0
  214. package/dist-types/utils/useFloatingUI.d.ts +1 -22
  215. package/package.json +8 -8
  216. package/dist-cjs/checkbox/assets/CheckboxCheckedIcon.js +0 -33
  217. package/dist-cjs/checkbox/assets/CheckboxCheckedIcon.js.map +0 -1
  218. package/dist-cjs/checkbox/assets/CheckboxCheckedIconHD.js +0 -32
  219. package/dist-cjs/checkbox/assets/CheckboxCheckedIconHD.js.map +0 -1
  220. package/dist-cjs/checkbox/assets/CheckboxIndeterminateIcon.js +0 -37
  221. package/dist-cjs/checkbox/assets/CheckboxIndeterminateIcon.js.map +0 -1
  222. package/dist-cjs/checkbox/assets/CheckboxUncheckedIcon.js +0 -26
  223. package/dist-cjs/checkbox/assets/CheckboxUncheckedIcon.js.map +0 -1
  224. package/dist-cjs/form-field/FormFieldControlWrapper.css.js +0 -6
  225. package/dist-cjs/form-field/FormFieldControlWrapper.css.js.map +0 -1
  226. package/dist-cjs/form-field/FormFieldControlWrapper.js +0 -47
  227. package/dist-cjs/form-field/FormFieldControlWrapper.js.map +0 -1
  228. package/dist-cjs/input/adornment-button/AdornmentButton.css.js +0 -6
  229. package/dist-cjs/input/adornment-button/AdornmentButton.css.js.map +0 -1
  230. package/dist-cjs/input/adornment-button/AdornmentButton.js +0 -41
  231. package/dist-cjs/input/adornment-button/AdornmentButton.js.map +0 -1
  232. package/dist-cjs/tooltip/TooltipBase.js +0 -62
  233. package/dist-cjs/tooltip/TooltipBase.js.map +0 -1
  234. package/dist-es/checkbox/assets/CheckboxCheckedIcon.js +0 -29
  235. package/dist-es/checkbox/assets/CheckboxCheckedIcon.js.map +0 -1
  236. package/dist-es/checkbox/assets/CheckboxCheckedIconHD.js +0 -28
  237. package/dist-es/checkbox/assets/CheckboxCheckedIconHD.js.map +0 -1
  238. package/dist-es/checkbox/assets/CheckboxIndeterminateIcon.js +0 -33
  239. package/dist-es/checkbox/assets/CheckboxIndeterminateIcon.js.map +0 -1
  240. package/dist-es/checkbox/assets/CheckboxUncheckedIcon.js +0 -22
  241. package/dist-es/checkbox/assets/CheckboxUncheckedIcon.js.map +0 -1
  242. package/dist-es/form-field/FormFieldControlWrapper.css.js +0 -4
  243. package/dist-es/form-field/FormFieldControlWrapper.css.js.map +0 -1
  244. package/dist-es/form-field/FormFieldControlWrapper.js +0 -41
  245. package/dist-es/form-field/FormFieldControlWrapper.js.map +0 -1
  246. package/dist-es/input/adornment-button/AdornmentButton.css.js +0 -4
  247. package/dist-es/input/adornment-button/AdornmentButton.css.js.map +0 -1
  248. package/dist-es/input/adornment-button/AdornmentButton.js +0 -37
  249. package/dist-es/input/adornment-button/AdornmentButton.js.map +0 -1
  250. package/dist-es/tooltip/TooltipBase.js +0 -58
  251. package/dist-es/tooltip/TooltipBase.js.map +0 -1
  252. package/dist-types/checkbox/assets/CheckboxCheckedIcon.d.ts +0 -4
  253. package/dist-types/checkbox/assets/CheckboxCheckedIconHD.d.ts +0 -4
  254. package/dist-types/checkbox/assets/CheckboxIndeterminateIcon.d.ts +0 -4
  255. package/dist-types/checkbox/assets/CheckboxUncheckedIcon.d.ts +0 -4
  256. package/dist-types/checkbox/assets/index.d.ts +0 -4
  257. package/dist-types/form-field/FormFieldControlWrapper.d.ts +0 -11
  258. package/dist-types/input/adornment-button/AdornmentButton.d.ts +0 -4
  259. package/dist-types/tooltip/TooltipBase.d.ts +0 -13
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
3
+ var css_248z = "/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Text.css.js.map
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n --toast-background: var(--salt-container-primary-background);\n\n background: var(--saltToast-background, var(--toast-background));\n border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n display: flex;\n gap: var(--salt-spacing-75);\n padding: var(--saltToast-padding, var(--salt-spacing-100));\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n}\n\n.saltToast:last-child {\n margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=Toast.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toast.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,50 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var clsx = require('clsx');
7
+ var React = require('react');
8
+ var window = require('@salt-ds/window');
9
+ var styles = require('@salt-ds/styles');
10
+ var makePrefixer = require('../utils/makePrefixer.js');
11
+ require('../utils/useFloatingUI.js');
12
+ var useForkRef = require('../utils/useForkRef.js');
13
+ require('../utils/useId.js');
14
+ require('../salt-provider/SaltProvider.js');
15
+ require('../viewport/ViewportProvider.js');
16
+ var StatusIndicator = require('../status-indicator/StatusIndicator.js');
17
+ var Toast$1 = require('./Toast.css.js');
18
+
19
+ const withBaseName = makePrefixer.makePrefixer("saltToast");
20
+ const Toast = React.forwardRef(function Toast2(props, ref) {
21
+ const { children, className, status = "info", ...rest } = props;
22
+ const targetWindow = window.useWindow();
23
+ styles.useComponentCssInjection({
24
+ testId: "salt-toast",
25
+ css: Toast$1,
26
+ window: targetWindow
27
+ });
28
+ const toastRef = React.useRef();
29
+ const handleRef = useForkRef.useForkRef(toastRef, ref);
30
+ React.useLayoutEffect(() => {
31
+ var _a;
32
+ (_a = toastRef.current) == null ? void 0 : _a.scrollIntoView();
33
+ }, []);
34
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
35
+ className: clsx.clsx(withBaseName(), withBaseName(status), className),
36
+ role: "alert",
37
+ ...rest,
38
+ ref: handleRef,
39
+ children: [
40
+ /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
41
+ status,
42
+ className: withBaseName("icon")
43
+ }),
44
+ children
45
+ ]
46
+ });
47
+ });
48
+
49
+ exports.Toast = Toast;
50
+ //# sourceMappingURL=Toast.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n RefObject,\n forwardRef,\n useLayoutEffect,\n useRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status = \"info\", ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n const toastRef = useRef<HTMLDivElement>();\n const handleRef = useForkRef(toastRef, ref);\n useLayoutEffect(() => {\n toastRef.current?.scrollIntoView();\n }, []);\n\n return (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n role=\"alert\"\n {...rest}\n ref={handleRef as RefObject<HTMLDivElement>}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Toast","useWindow","useComponentCssInjection","toastCss","useRef","useForkRef","useLayoutEffect","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA,CAAA;AAStC,MAAM,KAAQ,GAAAC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,MAAS,GAAA,MAAA,EAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,WAAWC,YAAuB,EAAA,CAAA;AACxC,EAAM,MAAA,SAAA,GAAYC,qBAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAC1C,EAAAC,qBAAA,CAAgB,MAAM;AAtCxB,IAAA,IAAA,EAAA,CAAA;AAuCI,IAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,cAAA,EAAA,CAAA;AAAA,GACpB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAK,EAAA,SAAA;AAAA,IAEL,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = "/* Styles applied to ToastContent */\n.saltToastContent {\n flex: 1 0;\n margin: var(--salt-spacing-75) 0;\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=ToastContent.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToastContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,34 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var clsx = require('clsx');
7
+ var React = require('react');
8
+ var window = require('@salt-ds/window');
9
+ var styles = require('@salt-ds/styles');
10
+ var makePrefixer = require('../utils/makePrefixer.js');
11
+ require('../utils/useFloatingUI.js');
12
+ require('../utils/useId.js');
13
+ require('../salt-provider/SaltProvider.js');
14
+ require('../viewport/ViewportProvider.js');
15
+ var ToastContent$1 = require('./ToastContent.css.js');
16
+
17
+ const withBaseName = makePrefixer.makePrefixer("saltToastContent");
18
+ const ToastContent = React.forwardRef(function ToastContent2({ children, className, ...restProps }, ref) {
19
+ const targetWindow = window.useWindow();
20
+ styles.useComponentCssInjection({
21
+ testId: "salt-toast-content",
22
+ css: ToastContent$1,
23
+ window: targetWindow
24
+ });
25
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
26
+ className: clsx.clsx(withBaseName(), className),
27
+ ...restProps,
28
+ ref,
29
+ children
30
+ });
31
+ });
32
+
33
+ exports.ToastContent = ToastContent;
34
+ //# sourceMappingURL=ToastContent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ComponentPropsWithoutRef<\"div\">,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToastContent","useWindow","useComponentCssInjection","toastContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AAEvC,MAAA,YAAA,GAAeC,iBAAW,SAASC,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border: 0 solid transparent;\n border-radius: 0;\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-actionable-textTransform);\n font-weight: var(--salt-actionable-secondary-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-actionable-textAlign);\n letter-spacing: var(--salt-actionable-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-inline: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n outline: var(--salt-focused-outline);\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n background: var(--salt-actionable-secondary-background-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n color: var(--salt-actionable-secondary-foreground-disabled);\n --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=ToggleButton.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,81 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var React = require('react');
7
+ var clsx = require('clsx');
8
+ require('../toggle-button-group/ToggleButtonGroup.js');
9
+ var ToggleButtonGroupContext = require('../toggle-button-group/ToggleButtonGroupContext.js');
10
+ var window = require('@salt-ds/window');
11
+ var styles = require('@salt-ds/styles');
12
+ var makePrefixer = require('../utils/makePrefixer.js');
13
+ var useControlled = require('../utils/useControlled.js');
14
+ require('../utils/useFloatingUI.js');
15
+ var useForkRef = require('../utils/useForkRef.js');
16
+ require('../utils/useId.js');
17
+ require('../salt-provider/SaltProvider.js');
18
+ require('../viewport/ViewportProvider.js');
19
+ var ToggleButton$1 = require('./ToggleButton.css.js');
20
+
21
+ const withBaseName = makePrefixer.makePrefixer("saltToggleButton");
22
+ const ToggleButton = React.forwardRef(
23
+ function ToggleButton2(props, ref) {
24
+ const {
25
+ children,
26
+ className,
27
+ disabled: disabledProp,
28
+ value,
29
+ onClick,
30
+ onFocus,
31
+ onChange,
32
+ selected: selectedProp,
33
+ ...rest
34
+ } = props;
35
+ const targetWindow = window.useWindow();
36
+ styles.useComponentCssInjection({
37
+ testId: "salt-toggle-button",
38
+ css: ToggleButton$1,
39
+ window: targetWindow
40
+ });
41
+ const buttonRef = React.useRef(null);
42
+ const handleRef = useForkRef.useForkRef(ref, buttonRef);
43
+ const toggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup();
44
+ const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
45
+ const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
46
+ const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
47
+ const [selected, setSelected] = useControlled.useControlled({
48
+ controlled: toggleButtonGroupSelected,
49
+ default: Boolean(selectedProp),
50
+ name: "ToggleButton",
51
+ state: "selected"
52
+ });
53
+ const handleClick = (event) => {
54
+ toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
55
+ setSelected(!selected);
56
+ onChange == null ? void 0 : onChange(event);
57
+ onClick == null ? void 0 : onClick(event);
58
+ };
59
+ const handleFocus = (event) => {
60
+ toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
61
+ onFocus == null ? void 0 : onFocus(event);
62
+ };
63
+ const ariaChecked = selected && !disabled;
64
+ return /* @__PURE__ */ jsxRuntime.jsx("button", {
65
+ "aria-checked": ariaChecked,
66
+ className: clsx.clsx(withBaseName(), className),
67
+ disabled,
68
+ role: toggleButtonGroup ? "radio" : "checkbox",
69
+ ref: handleRef,
70
+ onClick: handleClick,
71
+ onFocus: handleFocus,
72
+ tabIndex: focusable && !disabled ? 0 : -1,
73
+ value,
74
+ ...rest,
75
+ children
76
+ });
77
+ }
78
+ );
79
+
80
+ exports.ToggleButton = ToggleButton;
81
+ //# sourceMappingURL=ToggleButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n ComponentProps,\n forwardRef,\n useRef,\n MouseEvent,\n FocusEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentProps<\"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-checked={ariaChecked}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n role={toggleButtonGroup ? \"radio\" : \"checkbox\"}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\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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"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
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 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-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
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=ToggleButtonGroup.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleButtonGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,117 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var React = require('react');
7
+ var clsx = require('clsx');
8
+ var window = require('@salt-ds/window');
9
+ var styles = require('@salt-ds/styles');
10
+ var makePrefixer = require('../utils/makePrefixer.js');
11
+ var useControlled = require('../utils/useControlled.js');
12
+ require('../utils/useFloatingUI.js');
13
+ var useForkRef = require('../utils/useForkRef.js');
14
+ require('../utils/useId.js');
15
+ require('../salt-provider/SaltProvider.js');
16
+ require('../viewport/ViewportProvider.js');
17
+ var ToggleButtonGroupContext = require('./ToggleButtonGroupContext.js');
18
+ var ToggleButtonGroup$1 = require('./ToggleButtonGroup.css.js');
19
+
20
+ const withBaseName = makePrefixer.makePrefixer("saltToggleButtonGroup");
21
+ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, ref) {
22
+ const {
23
+ children,
24
+ className,
25
+ value: valueProp,
26
+ defaultValue,
27
+ disabled,
28
+ onChange,
29
+ onKeyDown,
30
+ orientation = "horizontal",
31
+ ...rest
32
+ } = props;
33
+ const targetWindow = window.useWindow();
34
+ styles.useComponentCssInjection({
35
+ testId: "salt-toggle-button-group",
36
+ css: ToggleButtonGroup$1,
37
+ window: targetWindow
38
+ });
39
+ const groupRef = React.useRef(null);
40
+ const handleRef = useForkRef.useForkRef(ref, groupRef);
41
+ const [value, setValue] = useControlled.useControlled({
42
+ default: defaultValue,
43
+ controlled: valueProp,
44
+ name: "ToggleButtonGroup",
45
+ state: "value"
46
+ });
47
+ const [focused, setFocused] = React.useState(value);
48
+ const select = React.useCallback(
49
+ (event) => {
50
+ const newValue = event.currentTarget.value;
51
+ setValue(newValue);
52
+ if (value !== newValue) {
53
+ onChange == null ? void 0 : onChange(event);
54
+ }
55
+ },
56
+ [onChange, value, setValue]
57
+ );
58
+ const isSelected = React.useCallback(
59
+ (id) => {
60
+ return value === id;
61
+ },
62
+ [value]
63
+ );
64
+ const focus = (id) => {
65
+ setFocused(id);
66
+ };
67
+ const isFocused = React.useCallback(
68
+ (id) => {
69
+ return focused === id || !focused;
70
+ },
71
+ [focused]
72
+ );
73
+ const contextValue = React.useMemo(
74
+ () => ({
75
+ select,
76
+ isSelected,
77
+ focus,
78
+ isFocused,
79
+ disabled
80
+ }),
81
+ [select, isSelected, isFocused, disabled]
82
+ );
83
+ const handleKeyDown = (event) => {
84
+ var _a, _b, _c, _d;
85
+ const elements = Array.from(
86
+ (_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) != null ? _b : []
87
+ );
88
+ const currentIndex = elements.findIndex(
89
+ (element) => element === document.activeElement
90
+ );
91
+ switch (event.key) {
92
+ case "ArrowDown":
93
+ case "ArrowRight":
94
+ (_c = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _c.focus();
95
+ break;
96
+ case "ArrowUp":
97
+ case "ArrowLeft":
98
+ (_d = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _d.focus();
99
+ break;
100
+ }
101
+ onKeyDown == null ? void 0 : onKeyDown(event);
102
+ };
103
+ return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroupContext.ToggleButtonGroupContext.Provider, {
104
+ value: contextValue,
105
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
106
+ className: clsx.clsx(withBaseName(), withBaseName(orientation), className),
107
+ role: "radiogroup",
108
+ ref: handleRef,
109
+ onKeyDown: handleKeyDown,
110
+ ...rest,
111
+ children
112
+ })
113
+ });
114
+ });
115
+
116
+ exports.ToggleButtonGroup = ToggleButtonGroup;
117
+ //# sourceMappingURL=ToggleButtonGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\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?: string | ReadonlyArray<string> | number | undefined;\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?: string | ReadonlyArray<string> | number | undefined;\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<\n string | ReadonlyArray<string> | number | undefined\n >(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, setValue]\n );\n\n const isSelected = useCallback(\n (id: string | ReadonlyArray<string> | number | undefined) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: string | ReadonlyArray<string> | number | undefined) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: string | ReadonlyArray<string> | number | undefined) => {\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 }),\n [select, isSelected, isFocused, disabled]\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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"}
@@ -0,0 +1,20 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var createContext = require('../utils/createContext.js');
7
+ require('../utils/useFloatingUI.js');
8
+ require('../utils/useId.js');
9
+ require('../salt-provider/SaltProvider.js');
10
+ require('../viewport/ViewportProvider.js');
11
+ require('clsx');
12
+
13
+ const ToggleButtonGroupContext = createContext.createContext("ToggleButtonGroupContext", void 0);
14
+ function useToggleButtonGroup() {
15
+ return React.useContext(ToggleButtonGroupContext);
16
+ }
17
+
18
+ exports.ToggleButtonGroupContext = ToggleButtonGroupContext;
19
+ exports.useToggleButtonGroup = useToggleButtonGroup;
20
+ //# sourceMappingURL=ToggleButtonGroupContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nexport interface ToggleButtonGroupContextValue {\n disabled?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isSelected: (\n id: string | ReadonlyArray<string> | number | undefined\n ) => boolean;\n focus: (id: string | ReadonlyArray<string> | number | undefined) => void;\n isFocused: (\n id: string | ReadonlyArray<string> | number | undefined\n ) => boolean;\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,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;;"}
@@ -5,17 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var clsx = require('clsx');
7
7
  var React = require('react');
8
+ var react = require('@floating-ui/react');
9
+ var window = require('@salt-ds/window');
10
+ var styles = require('@salt-ds/styles');
11
+ var StatusIndicator = require('../status-indicator/StatusIndicator.js');
8
12
  var makePrefixer = require('../utils/makePrefixer.js');
9
- var useFloatingUI = require('../utils/useFloatingUI.js');
13
+ require('../utils/useFloatingUI.js');
10
14
  var useForkRef = require('../utils/useForkRef.js');
11
15
  require('../utils/useId.js');
12
- require('../salt-provider/SaltProvider.js');
16
+ var SaltProvider = require('../salt-provider/SaltProvider.js');
13
17
  require('../viewport/ViewportProvider.js');
14
18
  var mergeProps = require('../utils/mergeProps.js');
15
19
  var useTooltip = require('./useTooltip.js');
20
+ var Tooltip$1 = require('./Tooltip.css.js');
16
21
  require('../form-field-context/FormFieldContext.js');
17
22
  var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
18
- var TooltipBase = require('./TooltipBase.js');
19
23
 
20
24
  const withBaseName = makePrefixer.makePrefixer("saltTooltip");
21
25
  const Tooltip = React.forwardRef(
@@ -23,7 +27,7 @@ const Tooltip = React.forwardRef(
23
27
  const {
24
28
  children,
25
29
  className,
26
- disabled: disabledProp = false,
30
+ disabled: disabledProp,
27
31
  hideArrow = false,
28
32
  hideIcon = false,
29
33
  open: openProp,
@@ -35,12 +39,18 @@ const Tooltip = React.forwardRef(
35
39
  ...rest
36
40
  } = props;
37
41
  const {
42
+ a11yProps,
38
43
  disabled: formFieldDisabled,
39
44
  validationStatus: formFieldValidationStatus
40
45
  } = useFormFieldProps.useFormFieldProps();
41
46
  const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
42
47
  const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
43
- const { Component } = useFloatingUI.useFloatingComponent();
48
+ const targetWindow = window.useWindow();
49
+ styles.useComponentCssInjection({
50
+ testId: "salt-tooltip",
51
+ css: Tooltip$1,
52
+ window: targetWindow
53
+ });
44
54
  const hookProps = {
45
55
  open: openProp,
46
56
  placement,
@@ -67,18 +77,43 @@ const Tooltip = React.forwardRef(
67
77
  ...mergeProps.mergeProps(getTriggerProps(), children.props),
68
78
  ref: triggerRef
69
79
  }),
70
- /* @__PURE__ */ jsxRuntime.jsx(Component, {
71
- className: clsx.clsx(withBaseName(), withBaseName(status), className),
72
- open,
73
- disabled,
74
- ref: floatingRef,
75
- ...getTooltipProps(),
76
- children: /* @__PURE__ */ jsxRuntime.jsx(TooltipBase.TooltipBase, {
77
- hideIcon,
78
- status,
79
- content,
80
- hideArrow,
81
- arrowProps
80
+ open && !disabled && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
81
+ children: /* @__PURE__ */ jsxRuntime.jsx(SaltProvider.SaltProvider, {
82
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
83
+ className: clsx.clsx(
84
+ withBaseName(),
85
+ withBaseName(status),
86
+ className
87
+ ),
88
+ ref: floatingRef,
89
+ ...getTooltipProps(),
90
+ children: [
91
+ /* @__PURE__ */ jsxRuntime.jsxs("div", {
92
+ className: withBaseName("container"),
93
+ children: [
94
+ !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
95
+ status,
96
+ size: 1,
97
+ className: withBaseName("icon")
98
+ }),
99
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
100
+ id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
101
+ className: withBaseName("content"),
102
+ children: content
103
+ })
104
+ ]
105
+ }),
106
+ !hideArrow && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, {
107
+ ...arrowProps,
108
+ className: withBaseName("arrow"),
109
+ strokeWidth: 1,
110
+ fill: "var(--salt-container-primary-background)",
111
+ stroke: "var(--tooltip-status-borderColor)",
112
+ height: 5,
113
+ width: 10
114
+ })
115
+ ]
116
+ })
82
117
  })
83
118
  })
84
119
  ]
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n Ref,\n} from \"react\";\n\nimport { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status = formFieldValidationStatus ?? statusProp;\n\n const { Component } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <Component\n className={clsx(withBaseName(), withBaseName(status), className)}\n open={open}\n disabled={disabled}\n ref={floatingRef}\n {...getTooltipProps()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </Component>\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","useFloatingComponent","useTooltip","useForkRef","isValidElement","jsxs","Fragment","cloneElement","mergeProps","jsx","clsx","TooltipBase"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChBC,mCAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SAAS,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,UAAA,CAAA;AAE5C,IAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,kCAAqB,EAAA,CAAA;AAE3C,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA;AAAA,MAEjBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AACA,IAAM,MAAA,WAAA,GAAcD,qBAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5C,IACE,uBAAAE,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAeF,oBAAA,CAAA,QAAQ,CACtB,IAAAG,kBAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEFC,cAAA,CAAA,SAAA,EAAA;AAAA,UACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA;AAAA,UACA,QAAA;AAAA,UACA,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UAEpB,QAAC,kBAAAD,cAAA,CAAAE,uBAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n} from \"../utils\";\nimport { SaltProvider } from \"../salt-provider\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport tooltipCss from \"./Tooltip.css\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status = formFieldValidationStatus ?? statusProp;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n {open && !disabled && (\n <FloatingPortal>\n {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n className\n )}\n ref={floatingRef}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","useWindow","useComponentCssInjection","tooltipCss","useTooltip","useForkRef","isValidElement","jsxs","Fragment","cloneElement","mergeProps","jsx","FloatingPortal","SaltProvider","clsx","StatusIndicator","FloatingArrow"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n style: {\n position: strategy,\n left: arrowX ?? 0,\n top: arrowY ?? 0,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"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"}
1
+ {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n style: {\n position: strategy,\n left: arrowX ?? 0,\n top: arrowY ?? 0,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"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"}