@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.12

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 (234) hide show
  1. package/dist-cjs/accordion/Accordion.css.js +1 -1
  2. package/dist-cjs/accordion/Accordion.js +33 -108
  3. package/dist-cjs/accordion/Accordion.js.map +1 -1
  4. package/dist-cjs/accordion/AccordionContext.js +15 -11
  5. package/dist-cjs/accordion/AccordionContext.js.map +1 -1
  6. package/dist-cjs/accordion/AccordionGroup.js +23 -0
  7. package/dist-cjs/accordion/AccordionGroup.js.map +1 -0
  8. package/dist-cjs/accordion/AccordionHeader.css.js +6 -0
  9. package/dist-cjs/accordion/AccordionHeader.css.js.map +1 -0
  10. package/dist-cjs/accordion/AccordionHeader.js +50 -0
  11. package/dist-cjs/accordion/AccordionHeader.js.map +1 -0
  12. package/dist-cjs/accordion/AccordionPanel.css.js +6 -0
  13. package/dist-cjs/accordion/AccordionPanel.css.js.map +1 -0
  14. package/dist-cjs/accordion/AccordionPanel.js +45 -0
  15. package/dist-cjs/accordion/AccordionPanel.js.map +1 -0
  16. package/dist-cjs/common-hooks/useKeyboardNavigation.js +0 -3
  17. package/dist-cjs/common-hooks/useKeyboardNavigation.js.map +1 -1
  18. package/dist-cjs/dialog/DialogTitle.css.js +1 -1
  19. package/dist-cjs/dialog/DialogTitle.js +2 -3
  20. package/dist-cjs/dialog/DialogTitle.js.map +1 -1
  21. package/dist-cjs/dropdown/Dropdown.js +5 -2
  22. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  23. package/dist-cjs/dropdown/useDropdown.js +12 -0
  24. package/dist-cjs/dropdown/useDropdown.js.map +1 -1
  25. package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
  26. package/dist-cjs/index.js +23 -10
  27. package/dist-cjs/index.js.map +1 -1
  28. package/dist-cjs/list/useList.js +0 -1
  29. package/dist-cjs/list/useList.js.map +1 -1
  30. package/dist-cjs/list-deprecated/ListItem.css.js +1 -1
  31. package/dist-cjs/list-next/ListItemNext.css.js +6 -0
  32. package/dist-cjs/list-next/ListItemNext.css.js.map +1 -0
  33. package/dist-cjs/list-next/ListItemNext.js +74 -0
  34. package/dist-cjs/list-next/ListItemNext.js.map +1 -0
  35. package/dist-cjs/list-next/ListNext.css.js +6 -0
  36. package/dist-cjs/list-next/ListNext.css.js.map +1 -0
  37. package/dist-cjs/list-next/ListNext.js +92 -0
  38. package/dist-cjs/list-next/ListNext.js.map +1 -0
  39. package/dist-cjs/list-next/ListNextContext.js +18 -0
  40. package/dist-cjs/list-next/ListNextContext.js.map +1 -0
  41. package/dist-cjs/list-next/useList.js +188 -0
  42. package/dist-cjs/list-next/useList.js.map +1 -0
  43. package/dist-cjs/logo/Logo.css.js +1 -1
  44. package/dist-cjs/logo/Logo.js +4 -36
  45. package/dist-cjs/logo/Logo.js.map +1 -1
  46. package/dist-cjs/logo/LogoImage.js +24 -0
  47. package/dist-cjs/logo/LogoImage.js.map +1 -0
  48. package/dist-cjs/logo/LogoSeparator.css.js +6 -0
  49. package/dist-cjs/logo/LogoSeparator.css.js.map +1 -0
  50. package/dist-cjs/logo/LogoSeparator.js +32 -0
  51. package/dist-cjs/logo/LogoSeparator.js.map +1 -0
  52. package/dist-cjs/multiline-input/MultilineInput.css.js +6 -0
  53. package/dist-cjs/multiline-input/MultilineInput.css.js.map +1 -0
  54. package/dist-cjs/multiline-input/MultilineInput.js +150 -0
  55. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -0
  56. package/dist-cjs/pill/Pill.css.js +1 -1
  57. package/dist-cjs/query-input/internal/QueryInputBody.js +5 -5
  58. package/dist-cjs/query-input/internal/QueryInputBody.js.map +1 -1
  59. package/dist-cjs/tabs-next/OverflowMenu.js +49 -0
  60. package/dist-cjs/tabs-next/OverflowMenu.js.map +1 -0
  61. package/dist-cjs/tabs-next/TabNext.css.js +6 -0
  62. package/dist-cjs/tabs-next/TabNext.css.js.map +1 -0
  63. package/dist-cjs/tabs-next/TabNext.js +87 -0
  64. package/dist-cjs/tabs-next/TabNext.js.map +1 -0
  65. package/dist-cjs/tabs-next/TabNextContext.js +23 -0
  66. package/dist-cjs/tabs-next/TabNextContext.js.map +1 -0
  67. package/dist-cjs/tabs-next/TabstripNext.css.js +6 -0
  68. package/dist-cjs/tabs-next/TabstripNext.css.js.map +1 -0
  69. package/dist-cjs/tabs-next/TabstripNext.js +180 -0
  70. package/dist-cjs/tabs-next/TabstripNext.js.map +1 -0
  71. package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
  72. package/dist-cjs/toggle-button/ToggleButton.js +44 -74
  73. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  74. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +6 -0
  75. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +111 -0
  76. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -0
  77. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +15 -0
  78. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -0
  79. package/dist-cjs/tokenized-input/TokenizedInput.css.js +1 -1
  80. package/dist-cjs/toolbar/ToolbarButton.css.js +1 -1
  81. package/dist-es/accordion/Accordion.css.js +1 -1
  82. package/dist-es/accordion/Accordion.js +35 -110
  83. package/dist-es/accordion/Accordion.js.map +1 -1
  84. package/dist-es/accordion/AccordionContext.js +15 -11
  85. package/dist-es/accordion/AccordionContext.js.map +1 -1
  86. package/dist-es/accordion/AccordionGroup.js +19 -0
  87. package/dist-es/accordion/AccordionGroup.js.map +1 -0
  88. package/dist-es/accordion/AccordionHeader.css.js +4 -0
  89. package/dist-es/accordion/AccordionHeader.css.js.map +1 -0
  90. package/dist-es/accordion/AccordionHeader.js +46 -0
  91. package/dist-es/accordion/AccordionHeader.js.map +1 -0
  92. package/dist-es/accordion/AccordionPanel.css.js +4 -0
  93. package/dist-es/accordion/AccordionPanel.css.js.map +1 -0
  94. package/dist-es/accordion/AccordionPanel.js +41 -0
  95. package/dist-es/accordion/AccordionPanel.js.map +1 -0
  96. package/dist-es/common-hooks/useKeyboardNavigation.js +0 -3
  97. package/dist-es/common-hooks/useKeyboardNavigation.js.map +1 -1
  98. package/dist-es/dialog/DialogTitle.css.js +1 -1
  99. package/dist-es/dialog/DialogTitle.js +3 -4
  100. package/dist-es/dialog/DialogTitle.js.map +1 -1
  101. package/dist-es/dropdown/Dropdown.js +5 -2
  102. package/dist-es/dropdown/Dropdown.js.map +1 -1
  103. package/dist-es/dropdown/useDropdown.js +12 -0
  104. package/dist-es/dropdown/useDropdown.js.map +1 -1
  105. package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
  106. package/dist-es/index.js +12 -5
  107. package/dist-es/index.js.map +1 -1
  108. package/dist-es/list/useList.js +0 -1
  109. package/dist-es/list/useList.js.map +1 -1
  110. package/dist-es/list-deprecated/ListItem.css.js +1 -1
  111. package/dist-es/list-next/ListItemNext.css.js +4 -0
  112. package/dist-es/list-next/ListItemNext.css.js.map +1 -0
  113. package/dist-es/list-next/ListItemNext.js +70 -0
  114. package/dist-es/list-next/ListItemNext.js.map +1 -0
  115. package/dist-es/list-next/ListNext.css.js +4 -0
  116. package/dist-es/list-next/ListNext.css.js.map +1 -0
  117. package/dist-es/list-next/ListNext.js +88 -0
  118. package/dist-es/list-next/ListNext.js.map +1 -0
  119. package/dist-es/list-next/ListNextContext.js +13 -0
  120. package/dist-es/list-next/ListNextContext.js.map +1 -0
  121. package/dist-es/list-next/useList.js +184 -0
  122. package/dist-es/list-next/useList.js.map +1 -0
  123. package/dist-es/logo/Logo.css.js +1 -1
  124. package/dist-es/logo/Logo.js +5 -37
  125. package/dist-es/logo/Logo.js.map +1 -1
  126. package/dist-es/logo/LogoImage.js +20 -0
  127. package/dist-es/logo/LogoImage.js.map +1 -0
  128. package/dist-es/logo/LogoSeparator.css.js +4 -0
  129. package/dist-es/logo/LogoSeparator.css.js.map +1 -0
  130. package/dist-es/logo/LogoSeparator.js +28 -0
  131. package/dist-es/logo/LogoSeparator.js.map +1 -0
  132. package/dist-es/multiline-input/MultilineInput.css.js +4 -0
  133. package/dist-es/multiline-input/MultilineInput.css.js.map +1 -0
  134. package/dist-es/multiline-input/MultilineInput.js +146 -0
  135. package/dist-es/multiline-input/MultilineInput.js.map +1 -0
  136. package/dist-es/pill/Pill.css.js +1 -1
  137. package/dist-es/query-input/internal/QueryInputBody.js +5 -5
  138. package/dist-es/query-input/internal/QueryInputBody.js.map +1 -1
  139. package/dist-es/tabs-next/OverflowMenu.js +45 -0
  140. package/dist-es/tabs-next/OverflowMenu.js.map +1 -0
  141. package/dist-es/tabs-next/TabNext.css.js +4 -0
  142. package/dist-es/tabs-next/TabNext.css.js.map +1 -0
  143. package/dist-es/tabs-next/TabNext.js +79 -0
  144. package/dist-es/tabs-next/TabNext.js.map +1 -0
  145. package/dist-es/tabs-next/TabNextContext.js +18 -0
  146. package/dist-es/tabs-next/TabNextContext.js.map +1 -0
  147. package/dist-es/tabs-next/TabstripNext.css.js +4 -0
  148. package/dist-es/tabs-next/TabstripNext.css.js.map +1 -0
  149. package/dist-es/tabs-next/TabstripNext.js +172 -0
  150. package/dist-es/tabs-next/TabstripNext.js.map +1 -0
  151. package/dist-es/toggle-button/ToggleButton.css.js +1 -1
  152. package/dist-es/toggle-button/ToggleButton.js +45 -75
  153. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  154. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +4 -0
  155. package/dist-es/toggle-button-group/ToggleButtonGroup.js +107 -0
  156. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -0
  157. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +10 -0
  158. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -0
  159. package/dist-es/tokenized-input/TokenizedInput.css.js +1 -1
  160. package/dist-es/toolbar/ToolbarButton.css.js +1 -1
  161. package/dist-types/accordion/Accordion.d.ts +22 -6
  162. package/dist-types/accordion/AccordionContext.d.ts +8 -8
  163. package/dist-types/accordion/AccordionGroup.d.ts +4 -0
  164. package/dist-types/accordion/AccordionHeader.d.ts +4 -0
  165. package/dist-types/accordion/AccordionPanel.d.ts +4 -0
  166. package/dist-types/accordion/index.d.ts +3 -4
  167. package/dist-types/dropdown/useDropdown.d.ts +1 -1
  168. package/dist-types/index.d.ts +4 -0
  169. package/dist-types/list-next/ListItemNext.d.ts +11 -0
  170. package/dist-types/list-next/ListNext.d.ts +10 -0
  171. package/dist-types/list-next/ListNextContext.d.ts +10 -0
  172. package/dist-types/list-next/index.d.ts +2 -0
  173. package/dist-types/list-next/useList.d.ts +29 -0
  174. package/dist-types/logo/Logo.d.ts +3 -31
  175. package/dist-types/logo/LogoImage.d.ts +5 -0
  176. package/dist-types/logo/LogoSeparator.d.ts +3 -0
  177. package/dist-types/logo/index.d.ts +2 -0
  178. package/dist-types/multiline-input/MultilineInput.d.ts +40 -0
  179. package/dist-types/multiline-input/index.d.ts +1 -0
  180. package/dist-types/tabs-next/OverflowMenu.d.ts +11 -0
  181. package/dist-types/tabs-next/TabNext.d.ts +5 -0
  182. package/dist-types/tabs-next/TabNextContext.d.ts +17 -0
  183. package/dist-types/tabs-next/TabstripNext.d.ts +10 -0
  184. package/dist-types/tabs-next/index.d.ts +2 -0
  185. package/dist-types/toggle-button/ToggleButton.d.ts +6 -11
  186. package/dist-types/toggle-button/index.d.ts +0 -1
  187. package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +25 -0
  188. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +10 -0
  189. package/dist-types/toggle-button-group/index.d.ts +2 -0
  190. package/package.json +7 -5
  191. package/dist-cjs/accordion/AccordionDetails.js +0 -87
  192. package/dist-cjs/accordion/AccordionDetails.js.map +0 -1
  193. package/dist-cjs/accordion/AccordionSection.js +0 -111
  194. package/dist-cjs/accordion/AccordionSection.js.map +0 -1
  195. package/dist-cjs/accordion/AccordionSectionContext.js +0 -24
  196. package/dist-cjs/accordion/AccordionSectionContext.js.map +0 -1
  197. package/dist-cjs/accordion/AccordionSummary.js +0 -64
  198. package/dist-cjs/accordion/AccordionSummary.js.map +0 -1
  199. package/dist-cjs/accordion/utils.js +0 -8
  200. package/dist-cjs/accordion/utils.js.map +0 -1
  201. package/dist-cjs/logo/internal/LogoTitle.js +0 -28
  202. package/dist-cjs/logo/internal/LogoTitle.js.map +0 -1
  203. package/dist-cjs/toggle-button/ToggleButtonGroup.css.js +0 -6
  204. package/dist-cjs/toggle-button/ToggleButtonGroup.js +0 -147
  205. package/dist-cjs/toggle-button/ToggleButtonGroup.js.map +0 -1
  206. package/dist-cjs/toggle-button/internal/ToggleButtonGroupContext.js +0 -10
  207. package/dist-cjs/toggle-button/internal/ToggleButtonGroupContext.js.map +0 -1
  208. package/dist-es/accordion/AccordionDetails.js +0 -83
  209. package/dist-es/accordion/AccordionDetails.js.map +0 -1
  210. package/dist-es/accordion/AccordionSection.js +0 -107
  211. package/dist-es/accordion/AccordionSection.js.map +0 -1
  212. package/dist-es/accordion/AccordionSectionContext.js +0 -19
  213. package/dist-es/accordion/AccordionSectionContext.js.map +0 -1
  214. package/dist-es/accordion/AccordionSummary.js +0 -60
  215. package/dist-es/accordion/AccordionSummary.js.map +0 -1
  216. package/dist-es/accordion/utils.js +0 -4
  217. package/dist-es/accordion/utils.js.map +0 -1
  218. package/dist-es/logo/internal/LogoTitle.js +0 -24
  219. package/dist-es/logo/internal/LogoTitle.js.map +0 -1
  220. package/dist-es/toggle-button/ToggleButtonGroup.css.js +0 -4
  221. package/dist-es/toggle-button/ToggleButtonGroup.js +0 -143
  222. package/dist-es/toggle-button/ToggleButtonGroup.js.map +0 -1
  223. package/dist-es/toggle-button/internal/ToggleButtonGroupContext.js +0 -6
  224. package/dist-es/toggle-button/internal/ToggleButtonGroupContext.js.map +0 -1
  225. package/dist-types/accordion/AccordionDetails.d.ts +0 -8
  226. package/dist-types/accordion/AccordionSection.d.ts +0 -9
  227. package/dist-types/accordion/AccordionSectionContext.d.ts +0 -8
  228. package/dist-types/accordion/AccordionSummary.d.ts +0 -5
  229. package/dist-types/accordion/utils.d.ts +0 -1
  230. package/dist-types/logo/internal/LogoTitle.d.ts +0 -6
  231. package/dist-types/toggle-button/ToggleButtonGroup.d.ts +0 -18
  232. package/dist-types/toggle-button/internal/ToggleButtonGroupContext.d.ts +0 -14
  233. /package/dist-cjs/{toggle-button → toggle-button-group}/ToggleButtonGroup.css.js.map +0 -0
  234. /package/dist-es/{toggle-button → toggle-button-group}/ToggleButtonGroup.css.js.map +0 -0
@@ -1,111 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
- var core = require('@salt-ds/core');
8
- require('../utils/useFloatingUI.js');
9
- var useLayoutEffectSkipFirst = require('../utils/useLayoutEffectSkipFirst.js');
10
- var AccordionSectionContext = require('./AccordionSectionContext.js');
11
- var clsx = require('clsx');
12
- var AccordionContext = require('./AccordionContext.js');
13
- var utils = require('./utils.js');
14
- var window = require('@salt-ds/window');
15
- var styles = require('@salt-ds/styles');
16
- var Accordion = require('./Accordion.css.js');
17
-
18
- const withBaseName = core.makePrefixer("saltAccordionSection");
19
- const AccordionSection = React.forwardRef(function Accordion$1({
20
- id: idProp,
21
- disabled: disabledProp,
22
- onChange: onChangeProp,
23
- defaultExpanded: defaultExpandedProp,
24
- expanded: expandedProp,
25
- children,
26
- className,
27
- ...restProps
28
- }, ref) {
29
- const targetWindow = window.useWindow();
30
- styles.useComponentCssInjection({
31
- testId: "salt-accordion",
32
- css: Accordion,
33
- window: targetWindow
34
- });
35
- const [id, setId] = React.useState(
36
- () => idProp != null ? idProp : `salt-${Math.round(Math.random() * 1e5)}`
37
- );
38
- if (idProp != null && idProp != id) {
39
- setId(idProp);
40
- }
41
- const {
42
- registerSection,
43
- unregisterSection,
44
- onChange,
45
- isExpanded,
46
- disabled: accordionDisabled
47
- } = AccordionContext.useAccordionContext();
48
- const isControlled = expandedProp != null;
49
- const expanded = isControlled ? expandedProp : isExpanded(id);
50
- const disabled = disabledProp != null ? disabledProp : accordionDisabled;
51
- React.useEffect(() => {
52
- registerSection(
53
- id,
54
- expandedProp != null ? expandedProp : !!defaultExpandedProp
55
- );
56
- return () => {
57
- unregisterSection(id);
58
- };
59
- }, [id, registerSection, unregisterSection]);
60
- const onToggle = React.useCallback(() => {
61
- const newExpanded = !expanded;
62
- if (onChangeProp) {
63
- onChangeProp(newExpanded);
64
- }
65
- if (!isControlled) {
66
- onChange(id, newExpanded);
67
- }
68
- }, [id, expanded, onChangeProp, onChange, isControlled]);
69
- React.useEffect(() => {
70
- const isControlled2 = expandedProp != null;
71
- if (isControlled2) {
72
- onChange(id, expandedProp);
73
- }
74
- }, [expandedProp, isControlled]);
75
- useLayoutEffectSkipFirst.useLayoutEffectSkipFirst(() => {
76
- if (utils.isNotProduction()) {
77
- const mode = (isControlled2) => isControlled2 ? "controlled" : "uncontrolled";
78
- console.error(
79
- `A component is changing from ${mode(!isControlled)} to ${mode(
80
- isControlled
81
- )} mode.`
82
- );
83
- }
84
- }, [isControlled]);
85
- const contextValue = React.useMemo(() => {
86
- return {
87
- isExpanded: expanded,
88
- isDisabled: disabled,
89
- onToggle
90
- };
91
- }, [expanded, disabled, onToggle]);
92
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
93
- ...restProps,
94
- className: clsx.clsx(
95
- withBaseName(),
96
- {
97
- [withBaseName("expanded")]: expanded,
98
- [withBaseName("disabled")]: disabled
99
- },
100
- className
101
- ),
102
- ref,
103
- children: /* @__PURE__ */ jsxRuntime.jsx(AccordionSectionContext.AccordionSectionContext.Provider, {
104
- value: contextValue,
105
- children
106
- })
107
- });
108
- });
109
-
110
- exports.AccordionSection = AccordionSection;
111
- //# sourceMappingURL=AccordionSection.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionSection.js","sources":["../src/accordion/AccordionSection.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useLayoutEffectSkipFirst } from \"../utils\";\nimport { AccordionSectionContext } from \"./AccordionSectionContext\";\nimport { clsx } from \"clsx\";\nimport { useAccordionContext } from \"./AccordionContext\";\nimport { isNotProduction } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport accordionCss from \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSection\");\n\nexport interface AccordionSectionProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n defaultExpanded?: boolean;\n disabled?: boolean;\n expanded?: boolean;\n onChange?: (isExpanded: boolean) => void;\n className?: string;\n}\n\nexport const AccordionSection = forwardRef<\n HTMLDivElement,\n AccordionSectionProps\n>(function Accordion(\n {\n id: idProp,\n disabled: disabledProp,\n onChange: onChangeProp,\n defaultExpanded: defaultExpandedProp,\n expanded: expandedProp,\n children,\n className,\n ...restProps\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [id, setId] = useState(() =>\n idProp != null ? idProp : `salt-${Math.round(Math.random() * 1e5)}`\n );\n\n if (idProp != null && idProp != id) {\n setId(idProp);\n }\n\n const {\n registerSection,\n unregisterSection,\n onChange,\n isExpanded,\n disabled: accordionDisabled,\n } = useAccordionContext();\n\n const isControlled = expandedProp != null;\n const expanded = isControlled ? expandedProp : isExpanded(id);\n const disabled = disabledProp != null ? disabledProp : accordionDisabled;\n\n useEffect(() => {\n registerSection(\n id,\n expandedProp != null ? expandedProp : !!defaultExpandedProp\n );\n return () => {\n unregisterSection(id);\n };\n }, [id, registerSection, unregisterSection]);\n\n const onToggle = useCallback(() => {\n const newExpanded = !expanded;\n if (onChangeProp) {\n onChangeProp(newExpanded);\n }\n if (!isControlled) {\n onChange(id, newExpanded);\n }\n }, [id, expanded, onChangeProp, onChange, isControlled]);\n\n useEffect(() => {\n const isControlled = expandedProp != null;\n if (isControlled) {\n onChange(id, expandedProp);\n }\n }, [expandedProp, isControlled]);\n\n useLayoutEffectSkipFirst(() => {\n if (isNotProduction()) {\n const mode = (isControlled: boolean) =>\n isControlled ? \"controlled\" : \"uncontrolled\";\n console.error(\n `A component is changing from ${mode(!isControlled)} to ${mode(\n isControlled\n )} mode.`\n );\n }\n }, [isControlled]);\n\n const contextValue: AccordionSectionContext = useMemo(() => {\n return {\n isExpanded: expanded,\n isDisabled: disabled,\n onToggle,\n };\n }, [expanded, disabled, onToggle]);\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"expanded\")]: expanded,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n ref={ref}\n >\n <AccordionSectionContext.Provider value={contextValue}>\n {children}\n </AccordionSectionContext.Provider>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Accordion","useWindow","useComponentCssInjection","accordionCss","useState","useAccordionContext","useEffect","useCallback","isControlled","useLayoutEffectSkipFirst","isNotProduction","useMemo","jsx","clsx","AccordionSectionContext"],"mappings":"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"}
@@ -1,24 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var utils = require('./utils.js');
7
-
8
- const AccordionSectionContext = React.createContext(void 0);
9
- if (utils.isNotProduction()) {
10
- AccordionSectionContext.displayName = "AccordionSectionContext";
11
- }
12
- const useAccordionSectionContext = () => {
13
- const context = React.useContext(AccordionSectionContext);
14
- if (utils.isNotProduction() && !context) {
15
- console.error(
16
- "useAccordionSectionContext should be used inside of AccordionSection"
17
- );
18
- }
19
- return context;
20
- };
21
-
22
- exports.AccordionSectionContext = AccordionSectionContext;
23
- exports.useAccordionSectionContext = useAccordionSectionContext;
24
- //# sourceMappingURL=AccordionSectionContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionSectionContext.js","sources":["../src/accordion/AccordionSectionContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { isNotProduction } from \"./utils\";\n\nexport interface AccordionSectionContext {\n isDisabled?: boolean;\n isExpanded: boolean;\n onToggle: () => void;\n}\n\nexport const AccordionSectionContext = createContext<\n AccordionSectionContext | undefined\n>(undefined);\n\nif (isNotProduction()) {\n AccordionSectionContext.displayName = \"AccordionSectionContext\";\n}\n\nexport const useAccordionSectionContext = () => {\n const context = useContext(AccordionSectionContext);\n if (isNotProduction() && !context) {\n console.error(\n \"useAccordionSectionContext should be used inside of AccordionSection\"\n );\n }\n return context!;\n};\n"],"names":["createContext","isNotProduction","useContext"],"mappings":";;;;;;;AASa,MAAA,uBAAA,GAA0BA,oBAErC,KAAS,CAAA,EAAA;AAEX,IAAIC,uBAAmB,EAAA;AACrB,EAAA,uBAAA,CAAwB,WAAc,GAAA,yBAAA,CAAA;AACxC,CAAA;AAEO,MAAM,6BAA6B,MAAM;AAC9C,EAAM,MAAA,OAAA,GAAUC,iBAAW,uBAAuB,CAAA,CAAA;AAClD,EAAI,IAAAD,qBAAA,EAAqB,IAAA,CAAC,OAAS,EAAA;AACjC,IAAQ,OAAA,CAAA,KAAA;AAAA,MACN,sEAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}
@@ -1,64 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
- var clsx = require('clsx');
8
- var core = require('@salt-ds/core');
9
- var icons = require('@salt-ds/icons');
10
- var AccordionSectionContext = require('./AccordionSectionContext.js');
11
- var window = require('@salt-ds/window');
12
- var styles = require('@salt-ds/styles');
13
- var Accordion = require('./Accordion.css.js');
14
-
15
- const withBaseName = core.makePrefixer("saltAccordionSummary");
16
- const AccordionSummary = React.forwardRef(function AccordionSummary2({ className, children, icon, ...restProps }, ref) {
17
- const targetWindow = window.useWindow();
18
- styles.useComponentCssInjection({
19
- testId: "salt-accordion",
20
- css: Accordion,
21
- window: targetWindow
22
- });
23
- const { isDisabled, isExpanded, onToggle } = AccordionSectionContext.useAccordionSectionContext();
24
- const onKeyDown = React.useCallback(
25
- ({ key }) => {
26
- if (key === "Enter" || key === " ") {
27
- onToggle();
28
- }
29
- },
30
- [onToggle]
31
- );
32
- if (!icon) {
33
- icon = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
34
- "aria-hidden": true
35
- });
36
- }
37
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
38
- ...restProps,
39
- className: clsx.clsx(
40
- withBaseName(),
41
- {
42
- [withBaseName("disabled")]: isDisabled,
43
- [withBaseName("expanded")]: isExpanded
44
- },
45
- className
46
- ),
47
- ref,
48
- role: "button",
49
- "aria-expanded": isExpanded,
50
- onClick: isDisabled ? void 0 : onToggle,
51
- onKeyDown: isDisabled ? void 0 : onKeyDown,
52
- tabIndex: isDisabled ? -1 : 0,
53
- children: [
54
- /* @__PURE__ */ jsxRuntime.jsx("div", {
55
- className: withBaseName("icon"),
56
- children: icon
57
- }),
58
- children
59
- ]
60
- });
61
- });
62
-
63
- exports.AccordionSummary = AccordionSummary;
64
- //# sourceMappingURL=AccordionSummary.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionSummary.js","sources":["../src/accordion/AccordionSummary.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport accordionCss from \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSummary\");\n\nexport interface AccordionSummaryProps extends HTMLAttributes<HTMLDivElement> {\n icon?: ReactNode;\n}\n\nexport const AccordionSummary = forwardRef<\n HTMLDivElement,\n AccordionSummaryProps\n>(function AccordionSummary({ className, children, icon, ...restProps }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const { isDisabled, isExpanded, onToggle } = useAccordionSectionContext();\n\n const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(\n ({ key }) => {\n if (key === \"Enter\" || key === \" \") {\n onToggle();\n }\n },\n [onToggle]\n );\n\n if (!icon) {\n icon = <ChevronRightIcon aria-hidden />;\n }\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"expanded\")]: isExpanded,\n },\n className\n )}\n ref={ref}\n role=\"button\"\n aria-expanded={isExpanded}\n onClick={isDisabled ? undefined : onToggle}\n onKeyDown={isDisabled ? undefined : onKeyDown}\n tabIndex={isDisabled ? -1 : 0}\n >\n <div className={withBaseName(\"icon\")}>{icon}</div>\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","AccordionSummary","useWindow","useComponentCssInjection","accordionCss","useAccordionSectionContext","useCallback","jsx","ChevronRightIcon","jsxs","clsx"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAM3C,MAAA,gBAAA,GAAmBC,gBAG9B,CAAA,SAASC,iBAAiB,CAAA,EAAE,WAAW,QAAU,EAAA,IAAA,EAAA,GAAS,SAAU,EAAA,EAAG,GAAK,EAAA;AAC5E,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,QAAA,KAAaC,kDAA2B,EAAA,CAAA;AAExE,EAAA,MAAM,SAAkD,GAAAC,iBAAA;AAAA,IACtD,CAAC,EAAE,GAAA,EAAU,KAAA;AACX,MAAI,IAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,QAAS,QAAA,EAAA,CAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,IAAA,mBAAQC,cAAA,CAAAC,sBAAA,EAAA;AAAA,MAAiB,aAAW,EAAA,IAAA;AAAA,KAAC,CAAA,CAAA;AAAA,GACvC;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,eAAe,EAAA,UAAA;AAAA,IACf,OAAA,EAAS,aAAa,KAAY,CAAA,GAAA,QAAA;AAAA,IAClC,SAAA,EAAW,aAAa,KAAY,CAAA,GAAA,SAAA;AAAA,IACpC,QAAA,EAAU,aAAa,CAAK,CAAA,GAAA,CAAA;AAAA,IAE5B,QAAA,EAAA;AAAA,sBAACH,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAI,QAAA,EAAA,IAAA;AAAA,OAAK,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,8 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const isNotProduction = () => process.env.NODE_ENV !== "production";
6
-
7
- exports.isNotProduction = isNotProduction;
8
- //# sourceMappingURL=utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sources":["../src/accordion/utils.ts"],"sourcesContent":["export const isNotProduction = () => process.env.NODE_ENV !== \"production\";\n"],"names":[],"mappings":";;;;AAAO,MAAM,eAAkB,GAAA,MAAM,OAAQ,CAAA,GAAA,CAAI,QAAa,KAAA;;;;"}
@@ -1,28 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
-
8
- const LogoTitle = React.forwardRef(
9
- function LogoTitle2({ label, separatorClassname, ...rest }, ref) {
10
- return label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
11
- children: [
12
- /* @__PURE__ */ jsxRuntime.jsx("span", {
13
- className: separatorClassname
14
- }),
15
- /* @__PURE__ */ jsxRuntime.jsx("span", {
16
- ref,
17
- ...rest,
18
- children: /* @__PURE__ */ jsxRuntime.jsx("span", {
19
- children: label
20
- })
21
- })
22
- ]
23
- }) : null;
24
- }
25
- );
26
-
27
- exports.LogoTitle = LogoTitle;
28
- //# sourceMappingURL=LogoTitle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LogoTitle.js","sources":["../src/logo/internal/LogoTitle.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport interface LogoTitleProps extends ComponentPropsWithoutRef<\"span\"> {\n label?: string;\n separatorClassname?: string;\n}\n\nexport const LogoTitle = forwardRef<HTMLSpanElement, LogoTitleProps>(\n function LogoTitle({ label, separatorClassname, ...rest }, ref) {\n return label ? (\n <>\n <span className={separatorClassname} />\n <span ref={ref} {...rest}>\n <span>{label}</span>\n </span>\n </>\n ) : null;\n }\n);\n"],"names":["forwardRef","LogoTitle","jsxs","Fragment","jsx"],"mappings":";;;;;;;AAOO,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,EAAE,OAAO,kBAAuB,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AAC9D,IAAA,OAAO,KACL,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAW,EAAA,kBAAA;AAAA,SAAoB,CAAA;AAAA,wBACpCA,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,GAAA;AAAA,UAAW,GAAG,IAAA;AAAA,UAClB,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA,EAAA,KAAA;AAAA,WAAM,CAAA;AAAA,SACf,CAAA;AAAA,OAAA;AAAA,KACF,CACE,GAAA,IAAA,CAAA;AAAA,GACN;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".salt-density-high {\n --toggleButton-group-height: calc(var(--salt-size-base) - var(--salt-size-unit) + 2px);\n}\n.salt-density-medium {\n --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n.salt-density-low {\n --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 2 / 3) + 2px);\n}\n.salt-density-touch {\n --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-cta {\n --toggleButton-group-borderColor: var(--saltToggleButton-group-cta-borderColor, var(--salt-container-secondary-borderColor));\n}\n.saltToggleButtonGroup.saltToggleButtonGroup-primary {\n --toggleButton-group-borderColor: var(--saltToggleButton-group-primary-borderColor, var(--salt-container-primary-borderColor));\n}\n\n.saltToggleButtonGroup {\n --toggleButton-group-borderWidth: var(--saltToggleButton-group-borderWidth, var(--salt-size-border));\n --toggleButton-group-borderStyle: var(--saltToggleButton-group-borderWidth, var(--salt-container-borderStyle));\n\n display: inline-flex;\n overflow: hidden;\n padding: 2px;\n border: var(--toggleButton-group-borderWidth) var(--toggleButton-group-borderStyle) var(--toggleButton-group-borderColor);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-secondary {\n --toggleButton-group-borderColor: var(--saltToggleButton-group-secondary-borderColor, var(--salt-container-tertiary-borderColor));\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n height: var(--toggleButton-group-height);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton:not(:first-child) {\n margin-left: 2px;\n}\n\n.saltToggleButtonGroup-vertical {\n flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton:not(:first-child) {\n margin-top: 2px;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=ToggleButtonGroup.css.js.map
@@ -1,147 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@salt-ds/core');
7
- var clsx = require('clsx');
8
- var React = require('react');
9
- var ToggleButtonGroupContext = require('./internal/ToggleButtonGroupContext.js');
10
- var window = require('@salt-ds/window');
11
- var styles = require('@salt-ds/styles');
12
- var ToggleButtonGroup$1 = require('./ToggleButtonGroup.css.js');
13
-
14
- const withBaseName = core.makePrefixer("saltToggleButtonGroup");
15
- const getNextIndex = (nodes, index, increment) => (index + nodes.length + increment) % nodes.length;
16
- const getNextActive = (nodes, index, increment) => {
17
- let nextIndex = getNextIndex(nodes, index, increment);
18
- while (nextIndex !== index && !nodes[nextIndex]) {
19
- nextIndex = getNextIndex(nodes, nextIndex, increment);
20
- }
21
- return nodes[nextIndex];
22
- };
23
- const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2({
24
- "aria-label": ariaLabel = "Toggle options",
25
- children,
26
- className,
27
- disabled,
28
- disableTooltip,
29
- defaultSelectedIndex = 0,
30
- focusableWhenDisabled,
31
- selectedIndex: selectedIndexProp,
32
- orientation = "horizontal",
33
- variant = "primary",
34
- width,
35
- onChange,
36
- onFocus,
37
- onBlur,
38
- ...restProps
39
- }, ref) {
40
- const targetWindow = window.useWindow();
41
- styles.useComponentCssInjection({
42
- testId: "salt-toggle-button-group",
43
- css: ToggleButtonGroup$1,
44
- window: targetWindow
45
- });
46
- const buttonRefs = React.useRef([]);
47
- const [disableFocus, setDisableFocus] = React.useState(false);
48
- const [selectedIndex, setSelectedIndex] = core.useControlled({
49
- controlled: selectedIndexProp,
50
- default: defaultSelectedIndex,
51
- name: "ToggleButtonGroup",
52
- state: "selectedIndex"
53
- });
54
- const register = React.useCallback(
55
- (node, index) => {
56
- buttonRefs.current[index] = node || void 0;
57
- },
58
- []
59
- );
60
- const unregister = React.useCallback((index) => {
61
- buttonRefs.current[index] = void 0;
62
- }, []);
63
- const handleFocus = (event) => {
64
- setDisableFocus(true);
65
- onFocus == null ? void 0 : onFocus(event);
66
- };
67
- const handleBlur = (event) => {
68
- setDisableFocus(false);
69
- onBlur == null ? void 0 : onBlur(event);
70
- };
71
- const handleToggle = (event, index, newValue) => {
72
- if (!newValue) {
73
- return;
74
- }
75
- setSelectedIndex(index);
76
- onChange == null ? void 0 : onChange(event, index, newValue);
77
- };
78
- const handleKeyDown = (event, index) => {
79
- var _a, _b;
80
- if (event.key === "ArrowRight" || event.key === "ArrowDown") {
81
- (_a = getNextActive(buttonRefs.current, index, 1)) == null ? void 0 : _a.focus();
82
- }
83
- if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
84
- (_b = getNextActive(buttonRefs.current, index, -1)) == null ? void 0 : _b.focus();
85
- }
86
- };
87
- const groupContext = React.useMemo(
88
- () => ({
89
- disabled,
90
- disableFocus,
91
- disableTooltip,
92
- focusableWhenDisabled,
93
- orientation,
94
- register,
95
- unregister,
96
- variant
97
- }),
98
- [
99
- disabled,
100
- disableFocus,
101
- disableTooltip,
102
- focusableWhenDisabled,
103
- orientation,
104
- register,
105
- unregister,
106
- variant
107
- ]
108
- );
109
- const childrenCount = React.Children.count(children);
110
- const getToggleButtonItem = (child, index) => {
111
- return React.cloneElement(child, {
112
- ...child.props,
113
- "data-button-index": index,
114
- "aria-setsize": childrenCount + 1,
115
- key: `button-${index}`,
116
- toggled: selectedIndex === index,
117
- onKeyDown: (event) => handleKeyDown(event, index),
118
- onToggle: (event, newValue) => handleToggle(event, index, newValue)
119
- });
120
- };
121
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
122
- ...restProps,
123
- "aria-label": ariaLabel,
124
- className: clsx.clsx(
125
- withBaseName(),
126
- withBaseName(orientation),
127
- {
128
- [withBaseName("cta")]: variant === "cta",
129
- [withBaseName("secondary")]: variant === "secondary",
130
- [withBaseName("primary")]: variant === "primary"
131
- },
132
- className
133
- ),
134
- ref,
135
- role: "radiogroup",
136
- onFocus: handleFocus,
137
- onBlur: handleBlur,
138
- style: { width },
139
- children: /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroupContext.ToggleButtonGroupContext.Provider, {
140
- value: groupContext,
141
- children: children && children.map(getToggleButtonItem)
142
- })
143
- });
144
- });
145
-
146
- exports.ToggleButtonGroup = ToggleButtonGroup;
147
- //# sourceMappingURL=ToggleButtonGroup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button/ToggleButtonGroup.tsx"],"sourcesContent":["import { ButtonVariant, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n cloneElement,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n ReactElement,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n Orientation,\n ToggleButtonGroupContext,\n} from \"./internal/ToggleButtonGroupContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport type ToggleButtonGroupChangeEventHandler = (\n event: SyntheticEvent<HTMLButtonElement>,\n index: number,\n toggled: boolean\n) => void;\n\nexport interface ToggleButtonGroupProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n \"aria-label\"?: string;\n disabled?: boolean;\n disableTooltip?: boolean;\n defaultSelectedIndex?: number;\n focusableWhenDisabled?: boolean;\n selectedIndex?: number;\n orientation?: Orientation;\n variant?: ButtonVariant;\n width?: number;\n children: Array<ReactElement>;\n onChange?: ToggleButtonGroupChangeEventHandler;\n}\n\nconst getNextIndex = (\n nodes: Array<HTMLButtonElement | undefined>,\n index: number,\n increment: number\n) => (index + nodes.length + increment) % nodes.length;\n\nconst getNextActive = (\n nodes: Array<HTMLButtonElement | undefined>,\n index: number,\n increment: number\n) => {\n let nextIndex = getNextIndex(nodes, index, increment);\n\n while (nextIndex !== index && !nodes[nextIndex]) {\n nextIndex = getNextIndex(nodes, nextIndex, increment);\n }\n\n return nodes[nextIndex];\n};\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(\n {\n \"aria-label\": ariaLabel = \"Toggle options\",\n children,\n className,\n disabled,\n disableTooltip,\n defaultSelectedIndex = 0,\n focusableWhenDisabled,\n selectedIndex: selectedIndexProp,\n orientation = \"horizontal\",\n variant = \"primary\",\n width,\n onChange,\n onFocus,\n onBlur,\n ...restProps\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n const buttonRefs = useRef<Array<HTMLButtonElement | undefined>>([]);\n\n const [disableFocus, setDisableFocus] = useState(false);\n const [selectedIndex, setSelectedIndex] = useControlled({\n controlled: selectedIndexProp,\n default: defaultSelectedIndex,\n name: \"ToggleButtonGroup\",\n state: \"selectedIndex\",\n });\n\n const register = useCallback(\n (node: HTMLButtonElement | null, index: number) => {\n buttonRefs.current[index] = node || undefined;\n },\n []\n );\n\n const unregister = useCallback((index: number) => {\n buttonRefs.current[index] = undefined;\n }, []);\n\n // When focus is not on the active button and when you tab out\n // It should leave the toggle button group\n // It should not go to active button\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setDisableFocus(true);\n onFocus?.(event);\n };\n\n // When you tab out from toggle button group, it should restore tab index of active button\n // When you tab back in, focus should go to active button\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setDisableFocus(false);\n onBlur?.(event);\n };\n\n const handleToggle: ToggleButtonGroupChangeEventHandler = (\n event,\n index,\n newValue\n ) => {\n if (!newValue) {\n return;\n }\n setSelectedIndex(index);\n onChange?.(event, index, newValue);\n };\n\n const handleKeyDown = (\n event: KeyboardEvent<HTMLButtonElement>,\n index: number\n ) => {\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n getNextActive(buttonRefs.current, index, 1)?.focus();\n }\n\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n getNextActive(buttonRefs.current, index, -1)?.focus();\n }\n };\n\n const groupContext = useMemo(\n () => ({\n disabled,\n disableFocus,\n disableTooltip,\n focusableWhenDisabled,\n orientation,\n register,\n unregister,\n variant,\n }),\n [\n disabled,\n disableFocus,\n disableTooltip,\n focusableWhenDisabled,\n orientation,\n register,\n unregister,\n variant,\n ]\n );\n\n const childrenCount = Children.count(children);\n\n const getToggleButtonItem = (child: ReactElement, index: number) => {\n return cloneElement(child, {\n ...child.props,\n \"data-button-index\": index,\n \"aria-setsize\": childrenCount + 1,\n key: `button-${index}`,\n toggled: selectedIndex === index,\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n handleKeyDown(event, index),\n onToggle: (event: SyntheticEvent<HTMLButtonElement>, newValue: boolean) =>\n handleToggle(event, index, newValue),\n });\n };\n\n return (\n <div\n {...restProps}\n aria-label={ariaLabel}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n {\n [withBaseName(\"cta\")]: variant === \"cta\",\n [withBaseName(\"secondary\")]: variant === \"secondary\",\n [withBaseName(\"primary\")]: variant === \"primary\",\n },\n className\n )}\n ref={ref}\n role=\"radiogroup\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n // TODO: Make this responsive?\n style={{ width }}\n >\n <ToggleButtonGroupContext.Provider value={groupContext}>\n {children && children.map(getToggleButtonItem)}\n </ToggleButtonGroupContext.Provider>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useState","useControlled","useCallback","useMemo","Children","cloneElement","jsx","clsx","ToggleButtonGroupContext"],"mappings":"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"}
@@ -1,10 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
-
7
- const ToggleButtonGroupContext = React.createContext(void 0);
8
-
9
- exports.ToggleButtonGroupContext = ToggleButtonGroupContext;
10
- //# sourceMappingURL=ToggleButtonGroupContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button/internal/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ButtonVariant } from \"@salt-ds/core\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ToggleButtonGroupContextProps {\n disabled?: boolean;\n disableFocus?: boolean;\n disableTooltip?: boolean;\n focusableWhenDisabled?: boolean;\n register: (node: HTMLButtonElement | null, index: number) => void;\n unregister: (index: number) => void;\n orientation?: Orientation;\n variant?: ButtonVariant;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextProps | undefined\n>(undefined);\n"],"names":["createContext"],"mappings":";;;;;;AAgBa,MAAA,wBAAA,GAA2BA,oBAEtC,KAAS,CAAA;;;;"}
@@ -1,83 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
3
- import { clsx } from 'clsx';
4
- import { forwardRef, useRef, useState } from 'react';
5
- import { useAccordionSectionContext } from './AccordionSectionContext.js';
6
- import css_248z from './Accordion.css.js';
7
- import { useWindow } from '@salt-ds/window';
8
- import { useComponentCssInjection } from '@salt-ds/styles';
9
-
10
- const withBaseName = makePrefixer("saltAccordionDetails");
11
- const msCollapseAnimationDuration = 150;
12
- const AccordionDetails = forwardRef(function AccordionDetails2({ children, className, preventUnmountOnCollapse, ...restProps }, ref) {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "salt-accordion",
16
- css: css_248z,
17
- window: targetWindow
18
- });
19
- const { isDisabled, isExpanded } = useAccordionSectionContext();
20
- const rootRef = useRef(null);
21
- const contentRef = useRef(null);
22
- const forkedRef = useForkRef(ref, rootRef);
23
- const [state, setState] = useState(
24
- isExpanded ? "expanded" : "collapsed"
25
- );
26
- useIsomorphicLayoutEffect(() => {
27
- if (!rootRef.current) {
28
- return;
29
- }
30
- if (isExpanded) {
31
- if (state === "collapsed") {
32
- setState("measuring");
33
- } else if (state === "measuring") {
34
- rootRef.current.style.height = `${contentRef.current.getBoundingClientRect().height}px`;
35
- setState("expanding");
36
- } else if (state === "expanding") {
37
- setTimeout(() => {
38
- setState("expanded");
39
- }, msCollapseAnimationDuration);
40
- } else if (state === "expanded") {
41
- rootRef.current.style.height = "auto";
42
- }
43
- } else {
44
- if (state === "expanded") {
45
- rootRef.current.style.height = `${rootRef.current.getBoundingClientRect().height}px`;
46
- setTimeout(() => {
47
- setState("collapsing");
48
- }, 0);
49
- } else if (state === "collapsing") {
50
- rootRef.current.style.height = "0";
51
- setTimeout(() => {
52
- setState("collapsed");
53
- }, msCollapseAnimationDuration);
54
- } else if (state === "collapsed") {
55
- rootRef.current.style.height = "0";
56
- }
57
- }
58
- }, [isExpanded, state]);
59
- return /* @__PURE__ */ jsx("div", {
60
- ...restProps,
61
- ref: forkedRef,
62
- className: clsx(
63
- withBaseName(),
64
- {
65
- [withBaseName("disabled")]: isDisabled
66
- },
67
- className
68
- ),
69
- children: /* @__PURE__ */ jsx("div", {
70
- ref: contentRef,
71
- className: clsx({
72
- [withBaseName("dummy")]: state === "measuring"
73
- }),
74
- children: preventUnmountOnCollapse || state !== "collapsed" ? /* @__PURE__ */ jsx("div", {
75
- className: withBaseName("content"),
76
- children
77
- }) : null
78
- })
79
- });
80
- });
81
-
82
- export { AccordionDetails };
83
- //# sourceMappingURL=AccordionDetails.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionDetails.js","sources":["../src/accordion/AccordionDetails.tsx"],"sourcesContent":["import {\n makePrefixer,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useRef, useState } from \"react\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\n\nimport accordionCss from \"./Accordion.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltAccordionDetails\");\n\nexport interface AccordionDetailsProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Render children even if the component is collapsed. Prevents unmounting of children components.\n * */\n preventUnmountOnCollapse?: boolean;\n}\n\nconst msCollapseAnimationDuration = 150;\n\n// Collapsed - the section is completely collapsed, don't render anything, height is 0\n// Measuring - the section is about to expand, rendering a dummy preview to measure\n// the height of expanded section\n// Expanding - the section is expanding but hasn't yet expanded to full size. height is set to\n// the value measured in the previous step\n// Expanded - the section is expanded, need to render the content, height is set to auto\n// Collapsing - the section is about to start collapsing, the height is set to current height\n// (auto has to be replaced by a number, then the component has to be rendered, then the value can\n// be set to 0)\ntype State =\n | \"collapsed\"\n | \"measuring\"\n | \"expanding\"\n | \"expanded\"\n | \"collapsing\";\n\nexport const AccordionDetails = forwardRef<\n HTMLDivElement,\n AccordionDetailsProps\n>(function AccordionDetails(\n { children, className, preventUnmountOnCollapse, ...restProps },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const { isDisabled, isExpanded } = useAccordionSectionContext();\n const rootRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const forkedRef = useForkRef(ref, rootRef);\n\n const [state, setState] = useState<State>(\n isExpanded ? \"expanded\" : \"collapsed\"\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!rootRef.current) {\n return;\n }\n if (isExpanded) {\n if (state === \"collapsed\") {\n setState(\"measuring\");\n } else if (state === \"measuring\") {\n rootRef.current.style.height = `${\n contentRef.current!.getBoundingClientRect().height\n }px`;\n setState(\"expanding\");\n } else if (state === \"expanding\") {\n setTimeout(() => {\n setState(\"expanded\");\n }, msCollapseAnimationDuration);\n } else if (state === \"expanded\") {\n rootRef.current.style.height = \"auto\";\n }\n } else {\n if (state === \"expanded\") {\n rootRef.current.style.height = `${\n rootRef.current.getBoundingClientRect().height\n }px`;\n setTimeout(() => {\n setState(\"collapsing\");\n }, 0);\n } else if (state === \"collapsing\") {\n rootRef.current.style.height = \"0\";\n setTimeout(() => {\n setState(\"collapsed\");\n }, msCollapseAnimationDuration);\n } else if (state === \"collapsed\") {\n rootRef.current.style.height = \"0\";\n }\n }\n }, [isExpanded, state]);\n\n return (\n <div\n {...restProps}\n ref={forkedRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: isDisabled,\n },\n className\n )}\n >\n <div\n ref={contentRef}\n className={clsx({\n [withBaseName(\"dummy\")]: state === \"measuring\",\n })}\n >\n {preventUnmountOnCollapse || state !== \"collapsed\" ? (\n <div className={withBaseName(\"content\")}>{children}</div>\n ) : null}\n </div>\n </div>\n );\n});\n"],"names":["AccordionDetails","accordionCss"],"mappings":"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"}