@salt-ds/core 1.72.0 → 1.73.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 (289) hide show
  1. package/CHANGELOG.md +122 -0
  2. package/css/salt-core.css +265 -120
  3. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  4. package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
  5. package/dist-cjs/breadcrumbs/Breadcrumb.js +5 -6
  6. package/dist-cjs/breadcrumbs/Breadcrumb.js.map +1 -1
  7. package/dist-cjs/button/Button.css.js +1 -1
  8. package/dist-cjs/card/CardContent.css.js +1 -1
  9. package/dist-cjs/card/hasCardSection.js +11 -3
  10. package/dist-cjs/card/hasCardSection.js.map +1 -1
  11. package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
  12. package/dist-cjs/collapsible/CollapsiblePanel.css.js +1 -1
  13. package/dist-cjs/collapsible/CollapsiblePanel.js +15 -15
  14. package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -1
  15. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  16. package/dist-cjs/dialog/DialogHeader.js +2 -0
  17. package/dist-cjs/dialog/DialogHeader.js.map +1 -1
  18. package/dist-cjs/drawer/DrawerHeader.js +2 -0
  19. package/dist-cjs/drawer/DrawerHeader.js.map +1 -1
  20. package/dist-cjs/dropdown/Dropdown.css.js +1 -1
  21. package/dist-cjs/dropdown/Dropdown.js +1 -1
  22. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  23. package/dist-cjs/form-field/FormField.js +2 -2
  24. package/dist-cjs/form-field/FormField.js.map +1 -1
  25. package/dist-cjs/form-field/FormFieldHelperText.js +2 -0
  26. package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
  27. package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
  28. package/dist-cjs/form-field/FormFieldLabel.js +2 -0
  29. package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
  30. package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
  31. package/dist-cjs/index.js +11 -0
  32. package/dist-cjs/index.js.map +1 -1
  33. package/dist-cjs/input/Input.css.js +1 -1
  34. package/dist-cjs/link/Link.js +2 -0
  35. package/dist-cjs/link/Link.js.map +1 -1
  36. package/dist-cjs/link/LinkAction.js +3 -2
  37. package/dist-cjs/link/LinkAction.js.map +1 -1
  38. package/dist-cjs/link-button/LinkButton.js +3 -2
  39. package/dist-cjs/link-button/LinkButton.js.map +1 -1
  40. package/dist-cjs/list-box/ListBox.js +1 -1
  41. package/dist-cjs/list-box/ListBox.js.map +1 -1
  42. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  43. package/dist-cjs/list-control/ListControlOptionContext.js.map +1 -1
  44. package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +1 -1
  45. package/dist-cjs/mega-menu/MegaMenuListItem.css.js +1 -1
  46. package/dist-cjs/menu/MenuGroup.css.js +1 -1
  47. package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
  48. package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
  49. package/dist-cjs/number-input/NumberInput.css.js +1 -1
  50. package/dist-cjs/on-solid-button/OnSolidButton.css.js +6 -0
  51. package/dist-cjs/on-solid-button/OnSolidButton.css.js.map +1 -0
  52. package/dist-cjs/on-solid-button/OnSolidButton.js +68 -0
  53. package/dist-cjs/on-solid-button/OnSolidButton.js.map +1 -0
  54. package/dist-cjs/option/Option.css.js +1 -1
  55. package/dist-cjs/option/Option.js +7 -1
  56. package/dist-cjs/option/Option.js.map +1 -1
  57. package/dist-cjs/option/OptionGroup.css.js +1 -1
  58. package/dist-cjs/overlay/OverlayHeader.js +2 -0
  59. package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
  60. package/dist-cjs/overlay/OverlayPanelCloseButton.js +1 -1
  61. package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
  62. package/dist-cjs/pagination/CompactPaginator.js +2 -0
  63. package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
  64. package/dist-cjs/pagination/GoToInput.js +2 -0
  65. package/dist-cjs/pagination/GoToInput.js.map +1 -1
  66. package/dist-cjs/pill/PillCheckIcon.js.map +1 -1
  67. package/dist-cjs/pill-input/PillInput.css.js +1 -1
  68. package/dist-cjs/progress/CircularProgress/CircularProgress.js +2 -0
  69. package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
  70. package/dist-cjs/progress/LinearProgress/LinearProgress.js +2 -0
  71. package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
  72. package/dist-cjs/salt-provider/ThemeApplicator.js +10 -6
  73. package/dist-cjs/salt-provider/ThemeApplicator.js.map +1 -1
  74. package/dist-cjs/side-panel/SidePanelTitle.js +2 -0
  75. package/dist-cjs/side-panel/SidePanelTitle.js.map +1 -1
  76. package/dist-cjs/side-panel/SidePanelTrigger.js.map +1 -1
  77. package/dist-cjs/side-panel/internal/useIsScrollable.js.map +1 -1
  78. package/dist-cjs/side-panel/useSidePanel.js +4 -9
  79. package/dist-cjs/side-panel/useSidePanel.js.map +1 -1
  80. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +2 -2
  81. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  82. package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
  83. package/dist-cjs/slider/internal/SliderTooltip.js +2 -0
  84. package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -1
  85. package/dist-cjs/slider/internal/SliderTrack.js +2 -0
  86. package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
  87. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
  88. package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
  89. package/dist-cjs/slider/internal/utils.js.map +1 -1
  90. package/dist-cjs/stepper/Stepper.js +1 -1
  91. package/dist-cjs/stepper/Stepper.js.map +1 -1
  92. package/dist-cjs/stepper/internal/StepText.css.js +1 -1
  93. package/dist-cjs/stepper/internal/StepText.js +2 -0
  94. package/dist-cjs/stepper/internal/StepText.js.map +1 -1
  95. package/dist-cjs/table/Table.css.js +1 -1
  96. package/dist-cjs/tabs/Tabs.js +1 -1
  97. package/dist-cjs/tabs/Tabs.js.map +1 -1
  98. package/dist-cjs/tabs/internal/overflow/useOverflow.js.map +1 -1
  99. package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
  100. package/dist-cjs/text/Code.js +1 -1
  101. package/dist-cjs/text/Code.js.map +1 -1
  102. package/dist-cjs/text/Editorial.js +32 -0
  103. package/dist-cjs/text/Editorial.js.map +1 -0
  104. package/dist-cjs/text/Eyebrow.js +12 -0
  105. package/dist-cjs/text/Eyebrow.js.map +1 -0
  106. package/dist-cjs/text/Text.css.js +1 -1
  107. package/dist-cjs/text/Text.js +6 -2
  108. package/dist-cjs/text/Text.js.map +1 -1
  109. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  110. package/dist-cjs/toolbar/ToolbarOverflow.js +8 -4
  111. package/dist-cjs/toolbar/ToolbarOverflow.js.map +1 -1
  112. package/dist-cjs/toolbar/toolbarUtils.js.map +1 -1
  113. package/dist-cjs/tooltip/useAriaAnnounce.js +4 -2
  114. package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
  115. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  116. package/dist-cjs/tree/TreeContext.js.map +1 -1
  117. package/dist-cjs/utils/forkRef.js +34 -0
  118. package/dist-cjs/utils/forkRef.js.map +1 -0
  119. package/dist-cjs/utils/getRefFromChildren.js.map +1 -1
  120. package/dist-cjs/utils/marginMiddleware.js.map +1 -1
  121. package/dist-cjs/utils/setRef.js.map +1 -1
  122. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  123. package/dist-cjs/utils/useForkRef.js +3 -6
  124. package/dist-cjs/utils/useForkRef.js.map +1 -1
  125. package/dist-cjs/utils/useResizeObserver.js.map +1 -1
  126. package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
  127. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  128. package/dist-es/border-layout/BorderLayout.js.map +1 -1
  129. package/dist-es/breadcrumbs/Breadcrumb.js +5 -6
  130. package/dist-es/breadcrumbs/Breadcrumb.js.map +1 -1
  131. package/dist-es/button/Button.css.js +1 -1
  132. package/dist-es/card/CardContent.css.js +1 -1
  133. package/dist-es/card/hasCardSection.js +11 -3
  134. package/dist-es/card/hasCardSection.js.map +1 -1
  135. package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
  136. package/dist-es/collapsible/CollapsiblePanel.css.js +1 -1
  137. package/dist-es/collapsible/CollapsiblePanel.js +16 -16
  138. package/dist-es/collapsible/CollapsiblePanel.js.map +1 -1
  139. package/dist-es/combo-box/ComboBox.js.map +1 -1
  140. package/dist-es/dialog/DialogHeader.js +2 -0
  141. package/dist-es/dialog/DialogHeader.js.map +1 -1
  142. package/dist-es/drawer/DrawerHeader.js +2 -0
  143. package/dist-es/drawer/DrawerHeader.js.map +1 -1
  144. package/dist-es/dropdown/Dropdown.css.js +1 -1
  145. package/dist-es/dropdown/Dropdown.js +1 -1
  146. package/dist-es/dropdown/Dropdown.js.map +1 -1
  147. package/dist-es/form-field/FormField.js +2 -2
  148. package/dist-es/form-field/FormField.js.map +1 -1
  149. package/dist-es/form-field/FormFieldHelperText.js +2 -0
  150. package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
  151. package/dist-es/form-field/FormFieldLabel.css.js +1 -1
  152. package/dist-es/form-field/FormFieldLabel.js +2 -0
  153. package/dist-es/form-field/FormFieldLabel.js.map +1 -1
  154. package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
  155. package/dist-es/index.js +3 -0
  156. package/dist-es/index.js.map +1 -1
  157. package/dist-es/input/Input.css.js +1 -1
  158. package/dist-es/link/Link.js +2 -0
  159. package/dist-es/link/Link.js.map +1 -1
  160. package/dist-es/link/LinkAction.js +3 -2
  161. package/dist-es/link/LinkAction.js.map +1 -1
  162. package/dist-es/link-button/LinkButton.js +3 -2
  163. package/dist-es/link-button/LinkButton.js.map +1 -1
  164. package/dist-es/list-box/ListBox.js +1 -1
  165. package/dist-es/list-box/ListBox.js.map +1 -1
  166. package/dist-es/list-control/ListControlContext.js.map +1 -1
  167. package/dist-es/list-control/ListControlOptionContext.js.map +1 -1
  168. package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +1 -1
  169. package/dist-es/mega-menu/MegaMenuListItem.css.js +1 -1
  170. package/dist-es/menu/MenuGroup.css.js +1 -1
  171. package/dist-es/multiline-input/MultilineInput.css.js +1 -1
  172. package/dist-es/navigation-item/NavigationItem.css.js +1 -1
  173. package/dist-es/number-input/NumberInput.css.js +1 -1
  174. package/dist-es/on-solid-button/OnSolidButton.css.js +4 -0
  175. package/dist-es/on-solid-button/OnSolidButton.css.js.map +1 -0
  176. package/dist-es/on-solid-button/OnSolidButton.js +66 -0
  177. package/dist-es/on-solid-button/OnSolidButton.js.map +1 -0
  178. package/dist-es/option/Option.css.js +1 -1
  179. package/dist-es/option/Option.js +7 -1
  180. package/dist-es/option/Option.js.map +1 -1
  181. package/dist-es/option/OptionGroup.css.js +1 -1
  182. package/dist-es/overlay/OverlayHeader.js +2 -0
  183. package/dist-es/overlay/OverlayHeader.js.map +1 -1
  184. package/dist-es/overlay/OverlayPanelCloseButton.js +1 -1
  185. package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
  186. package/dist-es/pagination/CompactPaginator.js +2 -0
  187. package/dist-es/pagination/CompactPaginator.js.map +1 -1
  188. package/dist-es/pagination/GoToInput.js +2 -0
  189. package/dist-es/pagination/GoToInput.js.map +1 -1
  190. package/dist-es/pill/PillCheckIcon.js.map +1 -1
  191. package/dist-es/pill-input/PillInput.css.js +1 -1
  192. package/dist-es/progress/CircularProgress/CircularProgress.js +2 -0
  193. package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
  194. package/dist-es/progress/LinearProgress/LinearProgress.js +2 -0
  195. package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
  196. package/dist-es/salt-provider/ThemeApplicator.js +10 -6
  197. package/dist-es/salt-provider/ThemeApplicator.js.map +1 -1
  198. package/dist-es/side-panel/SidePanelTitle.js +2 -0
  199. package/dist-es/side-panel/SidePanelTitle.js.map +1 -1
  200. package/dist-es/side-panel/SidePanelTrigger.js.map +1 -1
  201. package/dist-es/side-panel/internal/useIsScrollable.js.map +1 -1
  202. package/dist-es/side-panel/useSidePanel.js +4 -9
  203. package/dist-es/side-panel/useSidePanel.js.map +1 -1
  204. package/dist-es/skip-link/internal/useManageFocusOnTarget.js +2 -2
  205. package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  206. package/dist-es/slider/internal/SliderThumb.js.map +1 -1
  207. package/dist-es/slider/internal/SliderTooltip.js +2 -0
  208. package/dist-es/slider/internal/SliderTooltip.js.map +1 -1
  209. package/dist-es/slider/internal/SliderTrack.js +2 -0
  210. package/dist-es/slider/internal/SliderTrack.js.map +1 -1
  211. package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
  212. package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
  213. package/dist-es/slider/internal/utils.js.map +1 -1
  214. package/dist-es/stepper/Stepper.js +1 -1
  215. package/dist-es/stepper/Stepper.js.map +1 -1
  216. package/dist-es/stepper/internal/StepText.css.js +1 -1
  217. package/dist-es/stepper/internal/StepText.js +2 -0
  218. package/dist-es/stepper/internal/StepText.js.map +1 -1
  219. package/dist-es/table/Table.css.js +1 -1
  220. package/dist-es/tabs/Tabs.js +1 -1
  221. package/dist-es/tabs/Tabs.js.map +1 -1
  222. package/dist-es/tabs/internal/overflow/useOverflow.js.map +1 -1
  223. package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
  224. package/dist-es/text/Code.js +1 -1
  225. package/dist-es/text/Code.js.map +1 -1
  226. package/dist-es/text/Editorial.js +25 -0
  227. package/dist-es/text/Editorial.js.map +1 -0
  228. package/dist-es/text/Eyebrow.js +10 -0
  229. package/dist-es/text/Eyebrow.js.map +1 -0
  230. package/dist-es/text/Text.css.js +1 -1
  231. package/dist-es/text/Text.js +6 -2
  232. package/dist-es/text/Text.js.map +1 -1
  233. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  234. package/dist-es/toolbar/ToolbarOverflow.js +8 -4
  235. package/dist-es/toolbar/ToolbarOverflow.js.map +1 -1
  236. package/dist-es/toolbar/toolbarUtils.js.map +1 -1
  237. package/dist-es/tooltip/useAriaAnnounce.js +4 -2
  238. package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
  239. package/dist-es/tooltip/useTooltip.js.map +1 -1
  240. package/dist-es/tree/TreeContext.js.map +1 -1
  241. package/dist-es/utils/forkRef.js +32 -0
  242. package/dist-es/utils/forkRef.js.map +1 -0
  243. package/dist-es/utils/getRefFromChildren.js.map +1 -1
  244. package/dist-es/utils/marginMiddleware.js.map +1 -1
  245. package/dist-es/utils/setRef.js.map +1 -1
  246. package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  247. package/dist-es/utils/useForkRef.js +3 -6
  248. package/dist-es/utils/useForkRef.js.map +1 -1
  249. package/dist-es/utils/useResizeObserver.js.map +1 -1
  250. package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
  251. package/dist-types/checkbox/CheckboxIcon.d.ts +2 -1
  252. package/dist-types/collapsible/CollapsiblePanel.d.ts +8 -1
  253. package/dist-types/combo-box/ComboBox.d.ts +2 -2
  254. package/dist-types/dropdown/Dropdown.d.ts +2 -2
  255. package/dist-types/form-field/FormFieldHelperText.d.ts +1 -1
  256. package/dist-types/form-field/FormFieldLabel.d.ts +1 -1
  257. package/dist-types/form-field-context/FormFieldContext.d.ts +1 -1
  258. package/dist-types/index.d.ts +1 -0
  259. package/dist-types/list-box/ListBox.d.ts +2 -2
  260. package/dist-types/list-control/ListControlContext.d.ts +1 -1
  261. package/dist-types/list-control/ListControlOptionContext.d.ts +1 -1
  262. package/dist-types/on-solid-button/OnSolidButton.d.ts +12 -0
  263. package/dist-types/on-solid-button/index.d.ts +1 -0
  264. package/dist-types/pill/PillCheckIcon.d.ts +2 -1
  265. package/dist-types/registerClassNameInjection.d.ts +0 -2
  266. package/dist-types/salt-provider/SaltProvider.d.ts +1 -1
  267. package/dist-types/side-panel/internal/useIsScrollable.d.ts +1 -1
  268. package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +1 -1
  269. package/dist-types/slider/internal/SliderThumb.d.ts +2 -2
  270. package/dist-types/slider/internal/SliderTrack.d.ts +2 -2
  271. package/dist-types/slider/internal/useRangeSliderThumb.d.ts +1 -1
  272. package/dist-types/slider/internal/useSliderThumb.d.ts +1 -1
  273. package/dist-types/slider/internal/utils.d.ts +1 -1
  274. package/dist-types/tabs/internal/overflow/useOverflow.d.ts +2 -2
  275. package/dist-types/tabs/internal/overflow/useRenderedTabWidth.d.ts +1 -1
  276. package/dist-types/text/Editorial.d.ts +7 -0
  277. package/dist-types/text/Eyebrow.d.ts +2 -0
  278. package/dist-types/text/Text.d.ts +9 -2
  279. package/dist-types/text/index.d.ts +2 -0
  280. package/dist-types/toggle-button/ToggleButton.d.ts +1 -1
  281. package/dist-types/tooltip/useTooltip.d.ts +12 -26
  282. package/dist-types/tree/TreeContext.d.ts +1 -1
  283. package/dist-types/utils/forkRef.d.ts +11 -0
  284. package/dist-types/utils/inferElementType.d.ts +1 -2
  285. package/dist-types/utils/marginMiddleware.d.ts +1 -1
  286. package/dist-types/utils/setRef.d.ts +4 -0
  287. package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +1 -5
  288. package/dist-types/utils/useResizeObserver.d.ts +1 -1
  289. package/package.json +4 -4
@@ -1 +1 @@
1
- {"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps\n extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = forwardRef<\n HTMLDivElement,\n CollapsiblePanelProps\n>((props, ref) => {\n const { children, className, id: idProp, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-collapsible-panel\",\n css: collapsiblePanelCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n const { open, setPanelId } = useCollapsibleContext();\n\n useEffect(() => {\n if (id) {\n setPanelId?.(id);\n }\n }, [id, setPanelId]);\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n id={id}\n aria-hidden={!open ? \"true\" : undefined}\n hidden={!open}\n ref={ref}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>{children}</div>\n </div>\n );\n});\n"],"names":["collapsiblePanelCss"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,IAAI,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAErD,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,qBAAA,EAAsB;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAa,EAAA,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA;AAAA,MACA,aAAA,EAAa,CAAC,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC9B,QAAQ,CAAC,IAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n isValidElement,\n type ReactElement,\n useEffect,\n} from \"react\";\nimport { makePrefixer, renderProps, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Element used to customize the panel's root, e.g. `<CardContent />`.\n * Props are merged onto this element, and its own props take precedence.\n * Don't set `children`, `hidden` or `aria-hidden` on it, as they replace the\n * panel's content and open state.\n */\n render?: ReactElement;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = forwardRef<\n HTMLDivElement,\n CollapsiblePanelProps\n>(function CollapsiblePanel(props, ref) {\n const { children, className, id: idProp, render, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-collapsible-panel\",\n css: collapsiblePanelCss,\n window: targetWindow,\n });\n\n const renderId = isValidElement<{ id?: string }>(render)\n ? render.props.id\n : undefined;\n // The render element's id wins when props are merged, so prefer it here\n // to keep aria-controls in sync.\n const id = useId(renderId ?? idProp);\n const { open, setPanelId } = useCollapsibleContext();\n\n useEffect(() => {\n if (id) {\n setPanelId?.(id);\n }\n }, [id, setPanelId]);\n\n return renderProps(\"div\", {\n className: clsx(withBaseName(), className),\n id,\n \"aria-hidden\": !open ? \"true\" : undefined,\n hidden: !open,\n ref,\n ...rest,\n render,\n children: <div className={withBaseName(\"inner\")}>{children}</div>,\n });\n});\n"],"names":["CollapsiblePanel","collapsiblePanelCss"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,QAAQ,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAE7D,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAW,cAAA,CAAgC,MAAM,CAAA,GACnD,MAAA,CAAO,MAAM,EAAA,GACb,MAAA;AAGJ,EAAA,MAAM,EAAA,GAAK,KAAA,CAAM,QAAA,IAAY,MAAM,CAAA;AACnC,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,qBAAA,EAAsB;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAa,EAAA,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,EAAA,OAAO,YAAY,KAAA,EAAO;AAAA,IACxB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,IACzC,EAAA;AAAA,IACA,aAAA,EAAe,CAAC,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,IAChC,QAAQ,CAAC,IAAA;AAAA,IACT,GAAA;AAAA,IACA,GAAG,IAAA;AAAA,IACH,MAAA;AAAA,IACA,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA,GAC5D,CAAA;AACH,CAAC;;;;"}
@@ -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 { useClassNameInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n Children,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n getComboBoxNavigationTarget,\n isListControlNavigationKey,\n isModifiedListControlNavigationKey,\n type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\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 type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n type UseFloatingUIProps,\n useFloatingUI,\n useForkRef,\n useId,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport interface ComboBoxProps<Item = string>\n extends UseComboBoxProps<Item>,\n Omit<PillInputProps, \"onPillRemove\"> {\n /**\n * The options to display in the combo box.\n */\n children?: ReactNode;\n /**\n * If true, options will be selected when the tab key is pressed.\n */\n selectOnTab?: boolean;\n /**\n * Props to pass to ComboBox's overlay.\n */\n OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n props: ComboBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { className, props: finalProps } = useClassNameInjection(\n \"saltComboBox\",\n props,\n );\n const {\n children,\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 OverlayProps,\n ...rest\n } = finalProps;\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 const shouldAutoSelectRef = useRef(false);\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 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 setListRef,\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 elements.floating.style.setProperty(\n \"--overlay-minWidth\",\n `${rects.reference.width}px`,\n );\n elements.floating.style.setProperty(\n \"--overlay-maxHeight\",\n `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, { 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 (!event.repeat) {\n shouldAutoSelectRef.current = false;\n }\n\n if (readOnly || isModifiedListControlNavigationKey(event)) {\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 // With no list shown, leave these keys to move the caret or scroll the page.\n if (\n (!openState || !hasValidChildren) &&\n isListControlNavigationKey(event.key)\n ) {\n return;\n }\n\n const activeOption = activeState;\n\n // Unlike arrow keys, PageUp/PageDown scroll the nearest scroll container.\n if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n event.preventDefault();\n }\n\n const newActive: OptionAndElement<Item> | undefined =\n getComboBoxNavigationTarget(event.key, activeOption, {\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n });\n\n switch (event.key) {\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 if (event.currentTarget === inputRef.current) {\n setFocusedState(true);\n } else {\n setActive(undefined);\n }\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 shouldAutoSelectRef.current = false;\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 // Clean active item if no text is present.\n if (value === \"\") {\n setActive(undefined);\n } else {\n shouldAutoSelectRef.current = true;\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 useIsomorphicLayoutEffect(() => {\n if (value) {\n shouldAutoSelectRef.current = true;\n }\n }, [value]);\n\n useEffect(() => {\n if (openState && value) {\n queueMicrotask(() => {\n const newOption = getFirstOption();\n if (newOption && shouldAutoSelectRef.current) {\n setActive(newOption.data);\n }\n });\n }\n }, [value, setActive, openState, getFirstOption]);\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 let newActive: ReturnType<typeof getFirstOption>;\n\n if (!openState) {\n setActive(undefined);\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 (newActive) {\n setActive(newActive?.data);\n }\n }, [openState]);\n\n const buttonId = useId();\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(setListRef, 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 <ListControlProvider 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 ...OverlayProps,\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 </ListControlProvider>\n );\n}) as <Item = string>(\n props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ComboBox","_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 { useClassNameInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n Children,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n getComboBoxNavigationTarget,\n isListControlNavigationKey,\n isModifiedListControlNavigationKey,\n type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\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 type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n type UseFloatingUIProps,\n useFloatingUI,\n useForkRef,\n useId,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport interface ComboBoxProps<Item = string>\n extends UseComboBoxProps<Item>,\n Omit<PillInputProps, \"onPillRemove\"> {\n /**\n * The options to display in the combo box.\n */\n children?: ReactNode;\n /**\n * If true, options will be selected when the tab key is pressed.\n */\n selectOnTab?: boolean;\n /**\n * Props to pass to ComboBox's overlay.\n */\n OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n props: ComboBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { className, props: finalProps } = useClassNameInjection(\n \"saltComboBox\",\n props,\n );\n const {\n children,\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 OverlayProps,\n ...rest\n } = finalProps;\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 const shouldAutoSelectRef = useRef(false);\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 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 setListRef,\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 elements.floating.style.setProperty(\n \"--overlay-minWidth\",\n `${rects.reference.width}px`,\n );\n elements.floating.style.setProperty(\n \"--overlay-maxHeight\",\n `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, { 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 (!event.repeat) {\n shouldAutoSelectRef.current = false;\n }\n\n if (readOnly || isModifiedListControlNavigationKey(event)) {\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 // With no list shown, leave these keys to move the caret or scroll the page.\n if (\n (!openState || !hasValidChildren) &&\n isListControlNavigationKey(event.key)\n ) {\n return;\n }\n\n const activeOption = activeState;\n\n // Unlike arrow keys, PageUp/PageDown scroll the nearest scroll container.\n if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n event.preventDefault();\n }\n\n const newActive: OptionAndElement<Item> | undefined =\n getComboBoxNavigationTarget(event.key, activeOption, {\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n });\n\n switch (event.key) {\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 if (event.currentTarget === inputRef.current) {\n setFocusedState(true);\n } else {\n setActive(undefined);\n }\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 shouldAutoSelectRef.current = false;\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 // Clean active item if no text is present.\n if (value === \"\") {\n setActive(undefined);\n } else {\n shouldAutoSelectRef.current = true;\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 useIsomorphicLayoutEffect(() => {\n if (value) {\n shouldAutoSelectRef.current = true;\n }\n }, [value]);\n\n useEffect(() => {\n if (openState && value) {\n queueMicrotask(() => {\n const newOption = getFirstOption();\n if (newOption && shouldAutoSelectRef.current) {\n setActive(newOption.data);\n }\n });\n }\n }, [value, setActive, openState, getFirstOption]);\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 let newActive: ReturnType<typeof getFirstOption>;\n\n if (!openState) {\n setActive(undefined);\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 (newActive) {\n setActive(newActive?.data);\n }\n }, [openState]);\n\n const buttonId = useId();\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(setListRef, 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 <ListControlProvider 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 ...OverlayProps,\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 </ListControlProvider>\n );\n}) as <Item = string>(\n props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["ComboBox","_a","elements","value"],"mappings":"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"}
@@ -6,6 +6,8 @@ import { forwardRef, useEffect } from 'react';
6
6
  import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
7
7
  import '../text/Code.js';
8
8
  import '../text/Display.js';
9
+ import '../text/Editorial.js';
10
+ import '../text/Eyebrow.js';
9
11
  import { H2 } from '../text/Headings.js';
10
12
  import '../text/Label.js';
11
13
  import { Text } from '../text/Text.js';
@@ -1 +1 @@
1
- {"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useEffect,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Dialog\n */\n header: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n function DialogHeader(props, ref) {\n const {\n className,\n description,\n disableAccent,\n actions,\n header,\n preheader,\n status: statusProp,\n ...rest\n } = props;\n const {\n status: statusContext,\n setId: setHeaderId,\n id: contextHeaderId,\n } = useDialogContext();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-header\",\n css: dialogHeaderCss,\n window: targetWindow,\n });\n\n const status = statusProp ?? statusContext;\n const headerId = useId(contextHeaderId);\n\n useEffect(() => {\n if (headerId) {\n setHeaderId?.(headerId);\n }\n }, [headerId, setHeaderId]);\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status ?? \"\")]: !!status,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <div className={withBaseName(\"container\")}>\n <H2 id={headerId} className={withBaseName(\"header\")}>\n {preheader && <Text color=\"primary\">{preheader}</Text>}\n {header}\n </H2>\n {description && (\n <Text color=\"secondary\" className={withBaseName(\"description\")}>\n {description}\n </Text>\n )}\n </div>\n {actions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM;AAAA,MACJ,MAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,WAAA;AAAA,MACP,EAAA,EAAI;AAAA,QACF,gBAAA,EAAiB;AAErB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAC7B,IAAA,MAAM,QAAA,GAAW,MAAM,eAAe,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,WAAW,CAAC,CAAA;AAE1B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBAAU,GAAA,CAAC,mBAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAG,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC/C,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAa,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,wBACE,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}
1
+ {"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useEffect,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Dialog\n */\n header: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n function DialogHeader(props, ref) {\n const {\n className,\n description,\n disableAccent,\n actions,\n header,\n preheader,\n status: statusProp,\n ...rest\n } = props;\n const {\n status: statusContext,\n setId: setHeaderId,\n id: contextHeaderId,\n } = useDialogContext();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-header\",\n css: dialogHeaderCss,\n window: targetWindow,\n });\n\n const status = statusProp ?? statusContext;\n const headerId = useId(contextHeaderId);\n\n useEffect(() => {\n if (headerId) {\n setHeaderId?.(headerId);\n }\n }, [headerId, setHeaderId]);\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status ?? \"\")]: !!status,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <div className={withBaseName(\"container\")}>\n <H2 id={headerId} className={withBaseName(\"header\")}>\n {preheader && <Text color=\"primary\">{preheader}</Text>}\n {header}\n </H2>\n {description && (\n <Text color=\"secondary\" className={withBaseName(\"description\")}>\n {description}\n </Text>\n )}\n </div>\n {actions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM;AAAA,MACJ,MAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,WAAA;AAAA,MACP,EAAA,EAAI;AAAA,QACF,gBAAA,EAAiB;AAErB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAC7B,IAAA,MAAM,QAAA,GAAW,MAAM,eAAe,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,WAAW,CAAC,CAAA;AAE1B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBAAU,GAAA,CAAC,mBAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAG,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC/C,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAa,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,wBACE,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}
@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
5
5
  import { forwardRef } from 'react';
6
6
  import '../text/Code.js';
7
7
  import '../text/Display.js';
8
+ import '../text/Editorial.js';
9
+ import '../text/Eyebrow.js';
8
10
  import { H2 } from '../text/Headings.js';
9
11
  import '../text/Label.js';
10
12
  import { Text } from '../text/Text.js';
@@ -1 +1 @@
1
- {"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Hides the accent bar in the Drawer Header. Defaults to `false`.\n */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Drawer\n */\n header?: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n}\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n function DrawerHeader(props, ref) {\n const {\n actions,\n className,\n description,\n disableAccent,\n header,\n preheader,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer-header\",\n css: drawerHeaderCss,\n window: targetWindow,\n });\n\n const { setHeaderId, setDescriptionId } = useDrawerContext();\n const headingId = useId();\n const descriptionId = useId();\n const hasHeading = Boolean(header || preheader);\n const hasDescription = Boolean(description);\n\n useIsomorphicLayoutEffect(() => {\n setHeaderId?.(hasHeading ? headingId : undefined);\n\n return () => {\n setHeaderId?.(undefined);\n };\n }, [hasHeading, headingId, setHeaderId]);\n\n useIsomorphicLayoutEffect(() => {\n setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n return () => {\n setDescriptionId?.(undefined);\n };\n }, [hasDescription, descriptionId, setDescriptionId]);\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <div className={withBaseName(\"container\")}>\n {hasHeading && (\n <H2 id={headingId} className={withBaseName(\"header\")}>\n {preheader && (\n <Text as=\"span\" color=\"primary\">\n {preheader}\n </Text>\n )}\n {header}\n </H2>\n )}\n {description && (\n <Text\n id={descriptionId}\n color=\"secondary\"\n className={withBaseName(\"description\")}\n >\n {description}\n </Text>\n )}\n </div>\n {actions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["DrawerHeader","drawerHeaderCss"],"mappings":"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"}
1
+ {"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Hides the accent bar in the Drawer Header. Defaults to `false`.\n */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Drawer\n */\n header?: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n}\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n function DrawerHeader(props, ref) {\n const {\n actions,\n className,\n description,\n disableAccent,\n header,\n preheader,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer-header\",\n css: drawerHeaderCss,\n window: targetWindow,\n });\n\n const { setHeaderId, setDescriptionId } = useDrawerContext();\n const headingId = useId();\n const descriptionId = useId();\n const hasHeading = Boolean(header || preheader);\n const hasDescription = Boolean(description);\n\n useIsomorphicLayoutEffect(() => {\n setHeaderId?.(hasHeading ? headingId : undefined);\n\n return () => {\n setHeaderId?.(undefined);\n };\n }, [hasHeading, headingId, setHeaderId]);\n\n useIsomorphicLayoutEffect(() => {\n setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n return () => {\n setDescriptionId?.(undefined);\n };\n }, [hasDescription, descriptionId, setDescriptionId]);\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <div className={withBaseName(\"container\")}>\n {hasHeading && (\n <H2 id={headingId} className={withBaseName(\"header\")}>\n {preheader && (\n <Text as=\"span\" color=\"primary\">\n {preheader}\n </Text>\n )}\n {header}\n </H2>\n )}\n {description && (\n <Text\n id={descriptionId}\n color=\"secondary\"\n className={withBaseName(\"description\")}\n >\n {description}\n </Text>\n )}\n </div>\n {actions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["DrawerHeader","drawerHeaderCss"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltDropdown {\n all: unset;\n box-sizing: border-box;\n min-width: 4em;\n width: 100%;\n background: var(--dropdown-background);\n min-height: var(--salt-size-base);\n border-radius: var(--salt-palette-corner-weak, 0);\n display: inline-flex;\n align-items: center;\n padding: 0 var(--salt-spacing-100);\n color: var(--dropdown-color);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n position: relative;\n overflow: hidden;\n}\n\n.saltDropdown:hover {\n cursor: var(--salt-cursor-hover);\n}\n\n.saltDropdown-bordered.saltDropdown {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor);\n}\n\n.saltDropdown-bordered.saltDropdown:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--dropdown-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown:focus,\n.saltDropdown-bordered.saltDropdown:focus:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--dropdown-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"],\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"]:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-bordered.saltDropdown-disabled,\n.saltDropdown-bordered.saltDropdown-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor);\n}\n\n.saltDropdown:hover .saltDropdown-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--dropdown-borderColor-hover);\n}\n\n.saltDropdown:focus .saltDropdown-activationIndicator,\n.saltDropdown:focus:hover .saltDropdown-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--dropdown-borderColor-active);\n}\n\n.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown[aria-readonly=\"true\"]:hover .saltDropdown-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-disabled .saltDropdown-activationIndicator,\n.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-bordered .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {\n /* Activation indicator width minus the border from the input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltDropdown-primary {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-editable-primary-background);\n --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);\n --dropdown-background-readonly: var(--salt-editable-background-readonly);\n --dropdown-borderColor: var(--salt-editable-borderColor);\n --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-secondary {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-editable-secondary-background);\n --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);\n --dropdown-background-readonly: var(--salt-editable-background-readonly);\n --dropdown-borderColor: var(--salt-editable-borderColor);\n --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-tertiary {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-editable-tertiary-background);\n --dropdown-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --dropdown-background-readonly: var(--salt-editable-background-readonly);\n --dropdown-borderColor: var(--salt-editable-borderColor);\n --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-error {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-status-error-background);\n --dropdown-background-readonly: var(--salt-status-error-background);\n --dropdown-borderColor: var(--salt-status-error-borderColor);\n --dropdown-borderColor-active: var(--salt-status-error-borderColor);\n --dropdown-borderColor-hover: var(--salt-status-error-borderColor);\n --dropdown-outlineColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdown-warning {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-status-warning-background);\n --dropdown-background-readonly: var(--salt-status-warning-background);\n --dropdown-borderColor: var(--salt-status-warning-borderColor);\n --dropdown-borderColor-active: var(--salt-status-warning-borderColor);\n --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);\n --dropdown-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdown-success {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-status-success-background);\n --dropdown-background-readonly: var(--salt-status-success-background);\n --dropdown-borderColor: var(--salt-status-success-borderColor);\n --dropdown-borderColor-active: var(--salt-status-success-borderColor);\n --dropdown-borderColor-hover: var(--salt-status-success-borderColor);\n --dropdown-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdown:focus,\n.saltDropdown:focus:hover {\n cursor: var(--salt-cursor-hover);\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);\n}\n\n.saltDropdown.saltDropdown[aria-readonly=\"true\"] {\n background: var(--dropdown-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n.saltDropdown.saltDropdown:disabled,\n.saltDropdown.saltDropdown:disabled:hover {\n background: var(--dropdown-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltDropdown-content {\n flex: 1;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n}\n\n.saltDropdown-placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n.saltDropdown-startAdornmentContainer {\n margin-right: var(--salt-spacing-100);\n}\n\n.saltDropdown .saltDropdown-toggle {\n margin-left: var(--salt-spacing-100);\n}\n";
1
+ var css_248z = ".saltDropdown {\n all: unset;\n box-sizing: border-box;\n min-width: 4em;\n width: 100%;\n background: var(--dropdown-background);\n min-height: var(--salt-size-base);\n border-radius: var(--salt-palette-corner-weak, 0);\n display: inline-flex;\n align-items: center;\n padding: 0 var(--salt-spacing-100);\n color: var(--dropdown-color);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n position: relative;\n overflow: hidden;\n}\n\n.saltDropdown:hover {\n cursor: var(--salt-cursor-hover);\n}\n\n.saltDropdown-bordered.saltDropdown {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor);\n}\n\n.saltDropdown-bordered.saltDropdown:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--dropdown-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown:focus,\n.saltDropdown-bordered.saltDropdown:focus:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--dropdown-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"],\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"]:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-bordered.saltDropdown-disabled,\n.saltDropdown-bordered.saltDropdown-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor);\n}\n\n.saltDropdown:hover .saltDropdown-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--dropdown-borderColor-hover);\n}\n\n.saltDropdown:focus .saltDropdown-activationIndicator,\n.saltDropdown:focus:hover .saltDropdown-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--dropdown-borderColor-active);\n}\n\n.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown[aria-readonly=\"true\"]:hover .saltDropdown-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-disabled .saltDropdown-activationIndicator,\n.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-bordered .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {\n /* Activation indicator width minus the border from the input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltDropdown-primary {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-editable-primary-background);\n --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);\n --dropdown-background-readonly: var(--salt-editable-background-readonly);\n --dropdown-borderColor: var(--salt-editable-borderColor);\n --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-secondary {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-editable-secondary-background);\n --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);\n --dropdown-background-readonly: var(--salt-editable-background-readonly);\n --dropdown-borderColor: var(--salt-editable-borderColor);\n --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-tertiary {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-editable-tertiary-background);\n --dropdown-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --dropdown-background-readonly: var(--salt-editable-background-readonly);\n --dropdown-borderColor: var(--salt-editable-borderColor);\n --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-error {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-status-error-background);\n --dropdown-background-readonly: var(--salt-status-error-background);\n --dropdown-borderColor: var(--salt-status-error-borderColor);\n --dropdown-borderColor-active: var(--salt-status-error-borderColor);\n --dropdown-borderColor-hover: var(--salt-status-error-borderColor);\n --dropdown-outlineColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdown-warning {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-status-warning-background);\n --dropdown-background-readonly: var(--salt-status-warning-background);\n --dropdown-borderColor: var(--salt-status-warning-borderColor);\n --dropdown-borderColor-active: var(--salt-status-warning-borderColor);\n --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);\n --dropdown-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdown-success {\n --dropdown-color: var(--salt-content-primary-foreground);\n --dropdown-background: var(--salt-status-success-background);\n --dropdown-background-readonly: var(--salt-status-success-background);\n --dropdown-borderColor: var(--salt-status-success-borderColor);\n --dropdown-borderColor-active: var(--salt-status-success-borderColor);\n --dropdown-borderColor-hover: var(--salt-status-success-borderColor);\n --dropdown-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdown:focus,\n.saltDropdown:focus:hover {\n cursor: var(--salt-cursor-hover);\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);\n}\n\n.saltDropdown.saltDropdown[aria-readonly=\"true\"] {\n background: var(--dropdown-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n.saltDropdown.saltDropdown:disabled,\n.saltDropdown.saltDropdown:disabled:hover {\n background: var(--dropdown-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltDropdown-content {\n flex: 1;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n}\n\n.saltDropdown-placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n.saltDropdown-startAdornmentContainer {\n margin-right: var(--salt-spacing-100);\n}\n\n.saltDropdown .saltDropdown-toggle {\n margin-left: var(--salt-spacing-100);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Dropdown.css.js.map
@@ -150,7 +150,7 @@ const Dropdown = forwardRef(function Dropdown2(props, ref) {
150
150
  const handleTriggerRef = useForkRef(reference, buttonRef);
151
151
  const handleButtonRef = useForkRef(handleTriggerRef, ref);
152
152
  const typeaheadString = useRef("");
153
- const typeaheadTimeout = useRef();
153
+ const typeaheadTimeout = useRef(void 0);
154
154
  const handleTypeahead = (event) => {
155
155
  if (typeaheadTimeout.current) {
156
156
  clearTimeout(typeaheadTimeout.current);
@@ -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 {\n useClassNameInjection,\n useComponentCssInjection,\n} 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 forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useEffect,\n useRef,\n} from \"react\";\nimport {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport {\n getListControlNavigationTarget,\n isListControlNavigationKey,\n isModifiedListControlNavigationKey,\n type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport {\n defaultValueToString,\n type ListControlProps,\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 { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n type UseFloatingUIProps,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport interface DropdownProps<Item = string>\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n ListControlProps<Item> {\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\" | \"tertiary\";\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?: FormFieldValidationStatus;\n /** Styling variant with a full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * Props to pass to Dropdown's overlay.\n */\n OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n DataAttributes;\n}\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 { className, props: finalProps } = useClassNameInjection(\n \"saltDropdown\",\n props,\n );\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\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 OverlayProps,\n ...rest\n } = finalProps;\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 = formFieldValidationStatus ?? validationStatusProp;\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 setListRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const displayedValue = value ?? selectedValue;\n const valueText =\n readOnly && displayedValue === \"\" ? emptyReadOnlyMarker : displayedValue;\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 elements.floating.style.setProperty(\n \"--overlay-minWidth\",\n `${rects.reference.width}px`,\n );\n elements.floating.style.setProperty(\n \"--overlay-maxHeight\",\n `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 const newOption = getOptionFromSearch(typeaheadString.current, activeState);\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 || isModifiedListControlNavigationKey(event)) {\n return;\n }\n\n if (!openState) {\n if (\n event.key === \"ArrowDown\" ||\n event.key === \"ArrowUp\" ||\n event.key === \"Home\" ||\n event.key === \"End\"\n ) {\n event.preventDefault();\n setOpen(true, undefined, event.key);\n return;\n }\n\n // The list is hidden, so leave PageUp/PageDown to scroll the page.\n if (isListControlNavigationKey(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 const isNavigationKey = isListControlNavigationKey(event.key);\n if (isNavigationKey) {\n event.preventDefault();\n }\n\n const newActive: OptionAndElement<Item> | undefined = isNavigationKey\n ? getListControlNavigationTarget(event.key, activeOption, {\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n })\n : undefined;\n\n switch (event.key) {\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 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: ReturnType<typeof getFirstOption>;\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 // Home and End always open on the first or last option, even with a selection.\n if (openKey.current === \"Home\") {\n newActive = getFirstOption();\n } else if (openKey.current === \"End\") {\n newActive = getLastOption();\n }\n\n // If we have selected an item, we should make that the active item\n if (!newActive && 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>(setListRef, floating);\n\n return (\n <ListControlProvider 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 ...OverlayProps,\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 </ListControlProvider>\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 {\n useClassNameInjection,\n useComponentCssInjection,\n} 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 forwardRef,\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n type Ref,\n useEffect,\n useRef,\n} from \"react\";\nimport {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport {\n getListControlNavigationTarget,\n isListControlNavigationKey,\n isModifiedListControlNavigationKey,\n type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport {\n defaultValueToString,\n type ListControlProps,\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 { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n type UseFloatingUIProps,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport interface DropdownProps<Item = string>\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n ListControlProps<Item> {\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\" | \"tertiary\";\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?: FormFieldValidationStatus;\n /** Styling variant with a full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * Props to pass to Dropdown's overlay.\n */\n OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n DataAttributes;\n}\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 { className, props: finalProps } = useClassNameInjection(\n \"saltDropdown\",\n props,\n );\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\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 OverlayProps,\n ...rest\n } = finalProps;\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 = formFieldValidationStatus ?? validationStatusProp;\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 setListRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const displayedValue = value ?? selectedValue;\n const valueText =\n readOnly && displayedValue === \"\" ? emptyReadOnlyMarker : displayedValue;\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 elements.floating.style.setProperty(\n \"--overlay-minWidth\",\n `${rects.reference.width}px`,\n );\n elements.floating.style.setProperty(\n \"--overlay-maxHeight\",\n `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>(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 const newOption = getOptionFromSearch(typeaheadString.current, activeState);\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 || isModifiedListControlNavigationKey(event)) {\n return;\n }\n\n if (!openState) {\n if (\n event.key === \"ArrowDown\" ||\n event.key === \"ArrowUp\" ||\n event.key === \"Home\" ||\n event.key === \"End\"\n ) {\n event.preventDefault();\n setOpen(true, undefined, event.key);\n return;\n }\n\n // The list is hidden, so leave PageUp/PageDown to scroll the page.\n if (isListControlNavigationKey(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 const isNavigationKey = isListControlNavigationKey(event.key);\n if (isNavigationKey) {\n event.preventDefault();\n }\n\n const newActive: OptionAndElement<Item> | undefined = isNavigationKey\n ? getListControlNavigationTarget(event.key, activeOption, {\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n })\n : undefined;\n\n switch (event.key) {\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 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: ReturnType<typeof getFirstOption>;\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 // Home and End always open on the first or last option, even with a selection.\n if (openKey.current === \"Home\") {\n newActive = getFirstOption();\n } else if (openKey.current === \"End\") {\n newActive = getLastOption();\n }\n\n // If we have selected an item, we should make that the active item\n if (!newActive && 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>(setListRef, floating);\n\n return (\n <ListControlProvider 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 ...OverlayProps,\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 </ListControlProvider>\n );\n}) as <Item = string>(\n props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => ReactElement;\n"],"names":["ExpandIcon","Dropdown","dropdownCss","elements","_a"],"mappings":"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"}
@@ -28,7 +28,7 @@ function hasFormFieldControls(children) {
28
28
  });
29
29
  }
30
30
  const FormField = forwardRef(
31
- ({
31
+ function FormField2({
32
32
  children,
33
33
  className,
34
34
  disabled = false,
@@ -38,7 +38,7 @@ const FormField = forwardRef(
38
38
  readOnly = false,
39
39
  validationStatus,
40
40
  ...restProps
41
- }, ref) => {
41
+ }, ref) {
42
42
  const targetWindow = useWindow();
43
43
  useComponentCssInjection({
44
44
  testId: "salt-form-field",
@@ -1 +1 @@
1
- {"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n Fragment,\n forwardRef,\n type HTMLAttributes,\n isValidElement,\n type ReactNode,\n useRef,\n} from \"react\";\nimport {\n type A11yValueProps,\n FormFieldContext,\n type FormFieldValidationStatus,\n} from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\nimport { FormFieldHelperText } from \"./FormFieldHelperText\";\nimport { FormFieldLabel } from \"./FormFieldLabel\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * If `true`, the field will be disabled.\n */\n disabled?: boolean;\n /**\n * Location of the label relative to the control.\n *\n * Either 'top', 'left', or 'right'`.\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * If `true`, the field will be read-only.\n */\n readOnly?: boolean;\n /**\n * Optional id prop\n *\n * Used as suffix of FormFieldLabel id: `label-{id}`\n * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n */\n id?: string;\n /**\n * Displays necessity on label\n */\n necessity?: \"required\" | \"optional\" | \"asterisk\";\n /**\n * Validation status\n */\n validationStatus?: FormFieldValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nfunction hasFormFieldControls(children: ReactNode): boolean {\n return Children.toArray(children).some((child) => {\n if (!isValidElement<{ children?: ReactNode }>(child)) {\n return true;\n }\n\n if (child.type === Fragment) {\n return hasFormFieldControls(child.props.children);\n }\n\n return child.type !== FormFieldLabel && child.type !== FormFieldHelperText;\n });\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n (\n {\n children,\n className,\n disabled = false,\n id: idProp,\n labelPlacement = \"top\",\n necessity,\n readOnly = false,\n validationStatus,\n ...restProps\n },\n ref,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field\",\n css: formFieldCss,\n window: targetWindow,\n });\n\n const formFieldRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, formFieldRef);\n\n const formId = useId(idProp);\n const hasControls = hasFormFieldControls(children);\n\n const labelId = formId ? `label-${formId}` : undefined;\n const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n return (\n <div\n ref={handleRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"hasControls\")]: hasControls,\n [withBaseName(`label${capitalize(labelPlacement)}`)]:\n labelPlacement,\n },\n className,\n )}\n {...restProps}\n >\n <FormFieldContext.Provider\n value={{\n a11yProps: {\n \"aria-labelledby\": labelId,\n \"aria-describedby\": helperTextId,\n },\n disabled,\n necessity,\n readOnly,\n validationStatus,\n formFieldRef,\n }}\n >\n {children}\n </FormFieldContext.Provider>\n </div>\n );\n },\n);\n"],"names":["formFieldCss"],"mappings":";;;;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAEjD,SAAS,qBAAqB,QAAA,EAA8B;AAC1D,EAAA,OAAO,SAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAAC,cAAA,CAAyC,KAAK,CAAA,EAAG;AACpD,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,CAAM,SAAS,QAAA,EAAU;AAC3B,MAAA,OAAO,oBAAA,CAAqB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,IAClD;AAEA,IAAA,OAAO,KAAA,CAAM,IAAA,KAAS,cAAA,IAAkB,KAAA,CAAM,IAAA,KAAS,mBAAA;AAAA,EACzD,CAAC,CAAA;AACH;AAEO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKA,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAAS,MAAM,MAAM,CAAA;AAC3B,IAAA,MAAM,WAAA,GAAc,qBAAqB,QAAQ,CAAA;AAEjD,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,WAAA;AAAA,YAC/B,CAAC,aAAa,CAAA,KAAA,EAAQ,UAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
1
+ {"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n Fragment,\n forwardRef,\n type HTMLAttributes,\n isValidElement,\n type ReactNode,\n useRef,\n} from \"react\";\nimport {\n type A11yValueProps,\n FormFieldContext,\n type FormFieldValidationStatus,\n} from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\nimport { FormFieldHelperText } from \"./FormFieldHelperText\";\nimport { FormFieldLabel } from \"./FormFieldLabel\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * If `true`, the field will be disabled.\n */\n disabled?: boolean;\n /**\n * Location of the label relative to the control.\n *\n * Either 'top', 'left', or 'right'`.\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * If `true`, the field will be read-only.\n */\n readOnly?: boolean;\n /**\n * Optional id prop\n *\n * Used as suffix of FormFieldLabel id: `label-{id}`\n * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n */\n id?: string;\n /**\n * Displays necessity on label\n */\n necessity?: \"required\" | \"optional\" | \"asterisk\";\n /**\n * Validation status\n */\n validationStatus?: FormFieldValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nfunction hasFormFieldControls(children: ReactNode): boolean {\n return Children.toArray(children).some((child) => {\n if (!isValidElement<{ children?: ReactNode }>(child)) {\n return true;\n }\n\n if (child.type === Fragment) {\n return hasFormFieldControls(child.props.children);\n }\n\n return child.type !== FormFieldLabel && child.type !== FormFieldHelperText;\n });\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n function FormField(\n {\n children,\n className,\n disabled = false,\n id: idProp,\n labelPlacement = \"top\",\n necessity,\n readOnly = false,\n validationStatus,\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field\",\n css: formFieldCss,\n window: targetWindow,\n });\n\n const formFieldRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, formFieldRef);\n\n const formId = useId(idProp);\n const hasControls = hasFormFieldControls(children);\n\n const labelId = formId ? `label-${formId}` : undefined;\n const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n return (\n <div\n ref={handleRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"hasControls\")]: hasControls,\n [withBaseName(`label${capitalize(labelPlacement)}`)]:\n labelPlacement,\n },\n className,\n )}\n {...restProps}\n >\n <FormFieldContext.Provider\n value={{\n a11yProps: {\n \"aria-labelledby\": labelId,\n \"aria-describedby\": helperTextId,\n },\n disabled,\n necessity,\n readOnly,\n validationStatus,\n formFieldRef,\n }}\n >\n {children}\n </FormFieldContext.Provider>\n </div>\n );\n },\n);\n"],"names":["FormField","formFieldCss"],"mappings":";;;;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAEjD,SAAS,qBAAqB,QAAA,EAA8B;AAC1D,EAAA,OAAO,SAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAAC,cAAA,CAAyC,KAAK,CAAA,EAAG;AACpD,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,CAAM,SAAS,QAAA,EAAU;AAC3B,MAAA,OAAO,oBAAA,CAAqB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,IAClD;AAEA,IAAA,OAAO,KAAA,CAAM,IAAA,KAAS,cAAA,IAAkB,KAAA,CAAM,IAAA,KAAS,mBAAA;AAAA,EACzD,CAAC,CAAA;AACH;AAEO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAAS,MAAM,MAAM,CAAA;AAC3B,IAAA,MAAM,WAAA,GAAc,qBAAqB,QAAQ,CAAA;AAEjD,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,WAAA;AAAA,YAC/B,CAAC,aAAa,CAAA,KAAA,EAAQ,UAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
@@ -7,6 +7,8 @@ import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
7
7
  import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
8
8
  import '../text/Code.js';
9
9
  import '../text/Display.js';
10
+ import '../text/Editorial.js';
11
+ import '../text/Eyebrow.js';
10
12
  import '../text/Headings.js';
11
13
  import '../text/Label.js';
12
14
  import { Text } from '../text/Text.js';
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {}\n\nexport const FormFieldHelperText = ({\n className,\n children,\n ...restProps\n}: FormFieldHelperTextProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-helper-text\",\n css: formFieldHelperTextCss,\n window: targetWindow,\n });\n\n const { a11yProps, disabled, readOnly, validationStatus } =\n useFormFieldProps();\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withValidation\")]: validationStatus },\n className,\n )}\n >\n {!disabled && !readOnly && validationStatus && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={validationStatus}\n />\n )}\n <Text\n disabled={disabled}\n id={a11yProps?.[\"aria-describedby\"]}\n styleAs=\"label\"\n color={validationStatus ?? \"secondary\"}\n {...restProps}\n >\n {children}\n </Text>\n </div>\n );\n};\n"],"names":["formFieldHelperTextCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAKpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,6BAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,gBAAA,KACrC,iBAAA,EAAkB;AAEpB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,gBAAA,EAAiB;AAAA,QACrD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,QAAA,IAAY,CAAC,QAAA,IAAY,gBAAA,oBACzB,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC,MAAA,EAAQ;AAAA;AAAA,SACV;AAAA,wBAEF,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,IAAI,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,kBAAA,CAAA;AAAA,YAChB,OAAA,EAAQ,OAAA;AAAA,YACR,OAAO,gBAAA,IAAoB,WAAA;AAAA,YAC1B,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}
1
+ {"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\" | \"fontWeight\"> {}\n\nexport const FormFieldHelperText = ({\n className,\n children,\n ...restProps\n}: FormFieldHelperTextProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-helper-text\",\n css: formFieldHelperTextCss,\n window: targetWindow,\n });\n\n const { a11yProps, disabled, readOnly, validationStatus } =\n useFormFieldProps();\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withValidation\")]: validationStatus },\n className,\n )}\n >\n {!disabled && !readOnly && validationStatus && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={validationStatus}\n />\n )}\n <Text\n disabled={disabled}\n id={a11yProps?.[\"aria-describedby\"]}\n styleAs=\"label\"\n color={validationStatus ?? \"secondary\"}\n {...restProps}\n >\n {children}\n </Text>\n </div>\n );\n};\n"],"names":["formFieldHelperTextCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAKpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,6BAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,gBAAA,KACrC,iBAAA,EAAkB;AAEpB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,gBAAA,EAAiB;AAAA,QACrD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,QAAA,IAAY,CAAC,QAAA,IAAY,gBAAA,oBACzB,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC,MAAA,EAAQ;AAAA;AAAA,SACV;AAAA,wBAEF,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,IAAI,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,kBAAA,CAAA;AAAA,YAChB,OAAA,EAAQ,OAAA;AAAA,YACR,OAAO,gBAAA,IAAoB,WAAA;AAAA,YAC1B,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltFormFieldLabel.saltText {\n font-size: var(--formFieldLabel-fontSize);\n line-height: var(--formFieldLabel-lineHeight);\n font-weight: var(--saltFormField-label-fontWeight, var(--formFieldLabel-fontWeight));\n width: 100%;\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-label {\n --formFieldLabel-fontSize: var(--salt-text-label-fontSize);\n --formFieldLabel-lineHeight: var(--salt-text-label-lineHeight);\n --formFieldLabel-fontWeight: var(--salt-text-label-fontWeight-strong);\n --formFieldLabel-necessity-fontWeight: var(--salt-text-label-fontWeight);\n}\n\n.saltFormFieldLabel-sentence {\n --formFieldLabel-fontSize: var(--salt-text-fontSize);\n --formFieldLabel-lineHeight: var(--salt-text-lineHeight);\n --formFieldLabel-fontWeight: var(--salt-text-fontWeight-strong);\n --formFieldLabel-necessity-fontWeight: var(--salt-text-fontWeight);\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-style: var(--salt-typography-fontStyle-italic, italic);\n font-weight: var(--formFieldLabel-necessity-fontWeight);\n}\n";
1
+ var css_248z = ".saltFormFieldLabel.saltText {\n font-size: var(--formFieldLabel-fontSize);\n line-height: var(--formFieldLabel-lineHeight);\n font-weight: var(--saltFormField-label-fontWeight, var(--formFieldLabel-fontWeight));\n width: 100%;\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-label {\n --formFieldLabel-fontSize: var(--salt-text-label-fontSize);\n --formFieldLabel-lineHeight: var(--salt-text-label-lineHeight);\n --formFieldLabel-fontWeight: var(--salt-text-label-fontWeight-bolder);\n --formFieldLabel-necessity-fontWeight: var(--salt-text-label-fontWeight);\n}\n\n.saltFormFieldLabel-sentence {\n --formFieldLabel-fontSize: var(--salt-text-fontSize);\n --formFieldLabel-lineHeight: var(--salt-text-lineHeight);\n --formFieldLabel-fontWeight: var(--salt-text-fontWeight-bolder);\n --formFieldLabel-necessity-fontWeight: var(--salt-text-fontWeight);\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-style: var(--salt-typography-fontStyle-italic, italic);\n font-weight: var(--formFieldLabel-necessity-fontWeight);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=FormFieldLabel.css.js.map
@@ -6,6 +6,8 @@ import '../form-field-context/FormFieldContext.js';
6
6
  import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
7
7
  import '../text/Code.js';
8
8
  import '../text/Display.js';
9
+ import '../text/Editorial.js';
10
+ import '../text/Eyebrow.js';
9
11
  import '../text/Headings.js';
10
12
  import { Label } from '../text/Label.js';
11
13
  import '../text/Text.js';
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { MouseEvent } from \"react\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n /**\n * Intent for the label.\n *\n * Defaults to \"label\"\n * Using \"sentence\" gives more prominent styling\n */\n intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n className,\n children,\n intent = \"label\",\n onClick,\n ...restProps\n}: FormFieldLabelProps) => {\n const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-label\",\n css: formFieldLabelCss,\n window: targetWindow,\n });\n\n const id = a11yProps?.[\"aria-labelledby\"];\n\n const handleClick = (event: MouseEvent<HTMLLabelElement>) => {\n if (formFieldRef?.current) {\n const element = formFieldRef.current.querySelector<HTMLElement>(\n `[aria-labelledby*=\"${id}\"]`,\n );\n element?.focus();\n element?.click();\n }\n onClick?.(event);\n };\n\n const necessityLabel = necessity\n ? necessity === \"asterisk\"\n ? \" *\"\n : ` (${capitalize(necessity)})`\n : undefined;\n\n return (\n <Label\n className={clsx(withBaseName(), withBaseName(intent), className)}\n id={id}\n disabled={disabled}\n color={intent === \"sentence\" ? \"primary\" : \"secondary\"}\n onClick={handleClick}\n {...restProps}\n >\n {children}\n {necessityLabel && (\n <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n )}\n </Label>\n );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,YAAA,KAAiB,iBAAA,EAAkB;AAC3E,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,uBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,KAAK,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,iBAAA,CAAA;AAEvB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAC3D,IAAA,IAAI,6CAAc,OAAA,EAAS;AACzB,MAAA,MAAM,OAAA,GAAU,aAAa,OAAA,CAAQ,aAAA;AAAA,QACnC,sBAAsB,EAAE,CAAA,EAAA;AAAA,OAC1B;AACA,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AACT,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AAAA,IACX;AACA,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,YACnB,SAAA,KAAc,UAAA,GACZ,OACA,CAAA,EAAA,EAAK,UAAA,CAAW,SAAS,CAAC,CAAA,CAAA,CAAA,GAC5B,MAAA;AAEJ,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA,EAAO,MAAA,KAAW,UAAA,GAAa,SAAA,GAAY,WAAA;AAAA,MAC3C,OAAA,EAAS,WAAA;AAAA,MACR,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACC,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,YAAA,CAAa,gBAAgB,GAAI,QAAA,EAAA,cAAA,EAAe;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}
1
+ {"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { MouseEvent } from \"react\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\" | \"fontWeight\"> {\n /**\n * Intent for the label.\n *\n * Defaults to \"label\"\n * Using \"sentence\" gives more prominent styling\n */\n intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n className,\n children,\n intent = \"label\",\n onClick,\n ...restProps\n}: FormFieldLabelProps) => {\n const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-label\",\n css: formFieldLabelCss,\n window: targetWindow,\n });\n\n const id = a11yProps?.[\"aria-labelledby\"];\n\n const handleClick = (event: MouseEvent<HTMLLabelElement>) => {\n if (formFieldRef?.current) {\n const element = formFieldRef.current.querySelector<HTMLElement>(\n `[aria-labelledby*=\"${id}\"]`,\n );\n element?.focus();\n element?.click();\n }\n onClick?.(event);\n };\n\n const necessityLabel = necessity\n ? necessity === \"asterisk\"\n ? \" *\"\n : ` (${capitalize(necessity)})`\n : undefined;\n\n return (\n <Label\n className={clsx(withBaseName(), withBaseName(intent), className)}\n id={id}\n disabled={disabled}\n color={intent === \"sentence\" ? \"primary\" : \"secondary\"}\n onClick={handleClick}\n {...restProps}\n >\n {children}\n {necessityLabel && (\n <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n )}\n </Label>\n );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,YAAA,KAAiB,iBAAA,EAAkB;AAC3E,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,uBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,KAAK,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,iBAAA,CAAA;AAEvB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAC3D,IAAA,IAAI,6CAAc,OAAA,EAAS;AACzB,MAAA,MAAM,OAAA,GAAU,aAAa,OAAA,CAAQ,aAAA;AAAA,QACnC,sBAAsB,EAAE,CAAA,EAAA;AAAA,OAC1B;AACA,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AACT,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AAAA,IACX;AACA,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,YACnB,SAAA,KAAc,UAAA,GACZ,OACA,CAAA,EAAA,EAAK,UAAA,CAAW,SAAS,CAAC,CAAA,CAAA,CAAA,GAC5B,MAAA;AAEJ,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA,EAAO,MAAA,KAAW,UAAA,GAAa,SAAA,GAAY,WAAA;AAAA,MAC3C,OAAA,EAAS,WAAA;AAAA,MACR,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACC,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,YAAA,CAAa,gBAAgB,GAAI,QAAA,EAAA,cAAA,EAAe;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport type { ValidationStatuses } from \"../status-indicator\";\nimport { createContext } from \"../utils\";\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldValidationStatuses\n extends Omit<ValidationStatuses, \"info\"> {}\n\nexport type FormFieldValidationStatus = keyof FormFieldValidationStatuses;\n\nexport interface FormFieldContextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n necessity: NecessityType | undefined;\n readOnly: boolean;\n validationStatus: FormFieldValidationStatus | undefined;\n formFieldRef?: RefObject<HTMLDivElement>;\n}\n\nexport const FormFieldContext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextValue,\n);\n"],"names":[],"mappings":";;;;;;;;;AAmCO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AACF;;;;"}
1
+ {"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport type { ValidationStatuses } from \"../status-indicator\";\nimport { createContext } from \"../utils\";\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldValidationStatuses\n extends Omit<ValidationStatuses, \"info\"> {}\n\nexport type FormFieldValidationStatus = keyof FormFieldValidationStatuses;\n\nexport interface FormFieldContextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n necessity: NecessityType | undefined;\n readOnly: boolean;\n validationStatus: FormFieldValidationStatus | undefined;\n formFieldRef?: RefObject<HTMLDivElement | null>;\n}\n\nexport const FormFieldContext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextValue,\n);\n"],"names":[],"mappings":";;;;;;;;;AAmCO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AACF;;;;"}
package/dist-es/index.js CHANGED
@@ -88,6 +88,7 @@ export { MenuTrigger } from './menu/MenuTrigger.js';
88
88
  export { MultilineInput } from './multiline-input/MultilineInput.js';
89
89
  export { NavigationItem } from './navigation-item/NavigationItem.js';
90
90
  export { NumberInput, isOutOfRange } from './number-input/NumberInput.js';
91
+ export { OnSolidButton } from './on-solid-button/OnSolidButton.js';
91
92
  export { Option } from './option/Option.js';
92
93
  export { OptionGroup } from './option/OptionGroup.js';
93
94
  export { Overlay } from './overlay/Overlay.js';
@@ -154,6 +155,8 @@ export { TabTrigger } from './tabs/TabTrigger.js';
154
155
  export { Tag } from './tag/Tag.js';
155
156
  export { Code } from './text/Code.js';
156
157
  export { Display1, Display2, Display3, Display4 } from './text/Display.js';
158
+ export { Editorial1, Editorial2, Editorial3, Editorial4, Editorial5, Editorial6 } from './text/Editorial.js';
159
+ export { Eyebrow } from './text/Eyebrow.js';
157
160
  export { H1, H2, H3, H4 } from './text/Headings.js';
158
161
  export { Label } from './text/Label.js';
159
162
  export { Text } from './text/Text.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}