@salt-ds/lab 1.0.0-alpha.52 → 1.0.0-alpha.53

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 (223) hide show
  1. package/css/salt-lab.css +279 -38
  2. package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -2
  3. package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
  4. package/dist-cjs/calendar/Calendar.js +55 -26
  5. package/dist-cjs/calendar/Calendar.js.map +1 -1
  6. package/dist-cjs/calendar/CalendarDateGrid.css.js +6 -0
  7. package/dist-cjs/calendar/CalendarDateGrid.css.js.map +1 -0
  8. package/dist-cjs/calendar/{internal/CalendarCarousel.js → CalendarDateGrid.js} +37 -14
  9. package/dist-cjs/calendar/CalendarDateGrid.js.map +1 -0
  10. package/dist-cjs/calendar/CalendarNavigation.js +7 -5
  11. package/dist-cjs/calendar/CalendarNavigation.js.map +1 -1
  12. package/dist-cjs/calendar/{internal/CalendarWeekHeader.js → CalendarWeekHeader.js} +4 -3
  13. package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -0
  14. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  15. package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
  16. package/dist-cjs/calendar/useCalendar.js +2 -4
  17. package/dist-cjs/calendar/useCalendar.js.map +1 -1
  18. package/dist-cjs/calendar/useCalendarSelection.js +16 -43
  19. package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
  20. package/dist-cjs/carousel/Carousel.js +5 -5
  21. package/dist-cjs/carousel/Carousel.js.map +1 -1
  22. package/dist-cjs/cascading-menu/CascadingMenuItem.js +2 -2
  23. package/dist-cjs/cascading-menu/CascadingMenuItem.js.map +1 -1
  24. package/dist-cjs/contact-details/ContactMetadata.js +2 -2
  25. package/dist-cjs/contact-details/ContactMetadata.js.map +1 -1
  26. package/dist-cjs/date-input/DateInputRange.js +2 -0
  27. package/dist-cjs/date-input/DateInputRange.js.map +1 -1
  28. package/dist-cjs/date-input/DateInputSingle.js +2 -0
  29. package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
  30. package/dist-cjs/date-picker/DatePicker.js +40 -5
  31. package/dist-cjs/date-picker/DatePicker.js.map +1 -1
  32. package/dist-cjs/date-picker/DatePickerActions.js +7 -3
  33. package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
  34. package/dist-cjs/date-picker/DatePickerRangeInput.js +5 -4
  35. package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
  36. package/dist-cjs/date-picker/DatePickerRangePanel.js +33 -9
  37. package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -1
  38. package/dist-cjs/date-picker/DatePickerSingleInput.js +5 -4
  39. package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
  40. package/dist-cjs/date-picker/DatePickerSinglePanel.js +19 -5
  41. package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -1
  42. package/dist-cjs/date-picker/useDatePicker.js +91 -63
  43. package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
  44. package/dist-cjs/dropdown/DropdownButton.js +4 -2
  45. package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
  46. package/dist-cjs/index.js +10 -0
  47. package/dist-cjs/index.js.map +1 -1
  48. package/dist-cjs/menu-button/MenuButtonTrigger.js +2 -2
  49. package/dist-cjs/menu-button/MenuButtonTrigger.js.map +1 -1
  50. package/dist-cjs/query-input/internal/CategoryListItem.js +2 -2
  51. package/dist-cjs/query-input/internal/CategoryListItem.js.map +1 -1
  52. package/dist-cjs/query-input/internal/ValueList.js +2 -2
  53. package/dist-cjs/query-input/internal/ValueList.js.map +1 -1
  54. package/dist-cjs/search-input/SearchInput.js +2 -1
  55. package/dist-cjs/search-input/SearchInput.js.map +1 -1
  56. package/dist-cjs/static-list/StaticList.css.js +6 -0
  57. package/dist-cjs/static-list/StaticList.css.js.map +1 -0
  58. package/dist-cjs/static-list/StaticList.js +32 -0
  59. package/dist-cjs/static-list/StaticList.js.map +1 -0
  60. package/dist-cjs/static-list/StaticListItem.css.js +6 -0
  61. package/dist-cjs/static-list/StaticListItem.css.js.map +1 -0
  62. package/dist-cjs/static-list/StaticListItem.js +33 -0
  63. package/dist-cjs/static-list/StaticListItem.js.map +1 -0
  64. package/dist-cjs/static-list/StaticListItemContent.css.js +6 -0
  65. package/dist-cjs/static-list/StaticListItemContent.css.js.map +1 -0
  66. package/dist-cjs/static-list/StaticListItemContent.js +30 -0
  67. package/dist-cjs/static-list/StaticListItemContent.js.map +1 -0
  68. package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +8 -8
  69. package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
  70. package/dist-cjs/stepper-input/StepperInput.css.js +1 -1
  71. package/dist-cjs/stepper-input/StepperInput.js +214 -29
  72. package/dist-cjs/stepper-input/StepperInput.js.map +1 -1
  73. package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js +54 -0
  74. package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js.map +1 -0
  75. package/dist-cjs/stepper-input/internal/utils.js +43 -0
  76. package/dist-cjs/stepper-input/internal/utils.js.map +1 -0
  77. package/dist-cjs/stepper-input/useStepperInput.js +88 -172
  78. package/dist-cjs/stepper-input/useStepperInput.js.map +1 -1
  79. package/dist-cjs/tabs/Tab.js +14 -12
  80. package/dist-cjs/tabs/Tab.js.map +1 -1
  81. package/dist-cjs/tabs/Tabstrip.js +2 -1
  82. package/dist-cjs/tabs/Tabstrip.js.map +1 -1
  83. package/dist-cjs/tabs-next/OverflowMenu.js +2 -2
  84. package/dist-cjs/tabs-next/OverflowMenu.js.map +1 -1
  85. package/dist-cjs/tokenized-input/TokenizedInputBase.js +3 -3
  86. package/dist-cjs/tokenized-input/TokenizedInputBase.js.map +1 -1
  87. package/dist-cjs/tokenized-input/internal/InputPill.js +2 -2
  88. package/dist-cjs/tokenized-input/internal/InputPill.js.map +1 -1
  89. package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +3 -3
  90. package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -1
  91. package/dist-cjs/tokenized-input-next/internal/InputPill.js +2 -2
  92. package/dist-cjs/tokenized-input-next/internal/InputPill.js.map +1 -1
  93. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +2 -2
  94. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
  95. package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -2
  96. package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
  97. package/dist-es/calendar/Calendar.js +57 -28
  98. package/dist-es/calendar/Calendar.js.map +1 -1
  99. package/dist-es/calendar/CalendarDateGrid.css.js +4 -0
  100. package/dist-es/calendar/CalendarDateGrid.css.js.map +1 -0
  101. package/dist-es/calendar/{internal/CalendarCarousel.js → CalendarDateGrid.js} +37 -14
  102. package/dist-es/calendar/CalendarDateGrid.js.map +1 -0
  103. package/dist-es/calendar/CalendarNavigation.js +8 -6
  104. package/dist-es/calendar/CalendarNavigation.js.map +1 -1
  105. package/dist-es/calendar/{internal/CalendarWeekHeader.js → CalendarWeekHeader.js} +4 -3
  106. package/dist-es/calendar/CalendarWeekHeader.js.map +1 -0
  107. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  108. package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
  109. package/dist-es/calendar/useCalendar.js +2 -4
  110. package/dist-es/calendar/useCalendar.js.map +1 -1
  111. package/dist-es/calendar/useCalendarSelection.js +16 -43
  112. package/dist-es/calendar/useCalendarSelection.js.map +1 -1
  113. package/dist-es/carousel/Carousel.js +6 -6
  114. package/dist-es/carousel/Carousel.js.map +1 -1
  115. package/dist-es/cascading-menu/CascadingMenuItem.js +3 -3
  116. package/dist-es/cascading-menu/CascadingMenuItem.js.map +1 -1
  117. package/dist-es/contact-details/ContactMetadata.js +3 -3
  118. package/dist-es/contact-details/ContactMetadata.js.map +1 -1
  119. package/dist-es/date-input/DateInputRange.js +2 -0
  120. package/dist-es/date-input/DateInputRange.js.map +1 -1
  121. package/dist-es/date-input/DateInputSingle.js +2 -0
  122. package/dist-es/date-input/DateInputSingle.js.map +1 -1
  123. package/dist-es/date-picker/DatePicker.js +40 -5
  124. package/dist-es/date-picker/DatePicker.js.map +1 -1
  125. package/dist-es/date-picker/DatePickerActions.js +7 -3
  126. package/dist-es/date-picker/DatePickerActions.js.map +1 -1
  127. package/dist-es/date-picker/DatePickerRangeInput.js +5 -4
  128. package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
  129. package/dist-es/date-picker/DatePickerRangePanel.js +33 -9
  130. package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -1
  131. package/dist-es/date-picker/DatePickerSingleInput.js +5 -4
  132. package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
  133. package/dist-es/date-picker/DatePickerSinglePanel.js +19 -5
  134. package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -1
  135. package/dist-es/date-picker/useDatePicker.js +92 -64
  136. package/dist-es/date-picker/useDatePicker.js.map +1 -1
  137. package/dist-es/dropdown/DropdownButton.js +6 -4
  138. package/dist-es/dropdown/DropdownButton.js.map +1 -1
  139. package/dist-es/index.js +5 -0
  140. package/dist-es/index.js.map +1 -1
  141. package/dist-es/menu-button/MenuButtonTrigger.js +3 -3
  142. package/dist-es/menu-button/MenuButtonTrigger.js.map +1 -1
  143. package/dist-es/query-input/internal/CategoryListItem.js +3 -3
  144. package/dist-es/query-input/internal/CategoryListItem.js.map +1 -1
  145. package/dist-es/query-input/internal/ValueList.js +3 -3
  146. package/dist-es/query-input/internal/ValueList.js.map +1 -1
  147. package/dist-es/search-input/SearchInput.js +3 -2
  148. package/dist-es/search-input/SearchInput.js.map +1 -1
  149. package/dist-es/static-list/StaticList.css.js +4 -0
  150. package/dist-es/static-list/StaticList.css.js.map +1 -0
  151. package/dist-es/static-list/StaticList.js +28 -0
  152. package/dist-es/static-list/StaticList.js.map +1 -0
  153. package/dist-es/static-list/StaticListItem.css.js +4 -0
  154. package/dist-es/static-list/StaticListItem.css.js.map +1 -0
  155. package/dist-es/static-list/StaticListItem.js +29 -0
  156. package/dist-es/static-list/StaticListItem.js.map +1 -0
  157. package/dist-es/static-list/StaticListItemContent.css.js +4 -0
  158. package/dist-es/static-list/StaticListItemContent.css.js.map +1 -0
  159. package/dist-es/static-list/StaticListItemContent.js +26 -0
  160. package/dist-es/static-list/StaticListItemContent.js.map +1 -0
  161. package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +9 -9
  162. package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
  163. package/dist-es/stepper-input/StepperInput.css.js +1 -1
  164. package/dist-es/stepper-input/StepperInput.js +216 -31
  165. package/dist-es/stepper-input/StepperInput.js.map +1 -1
  166. package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js +50 -0
  167. package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js.map +1 -0
  168. package/dist-es/stepper-input/internal/utils.js +32 -0
  169. package/dist-es/stepper-input/internal/utils.js.map +1 -0
  170. package/dist-es/stepper-input/useStepperInput.js +88 -172
  171. package/dist-es/stepper-input/useStepperInput.js.map +1 -1
  172. package/dist-es/tabs/Tab.js +15 -13
  173. package/dist-es/tabs/Tab.js.map +1 -1
  174. package/dist-es/tabs/Tabstrip.js +4 -3
  175. package/dist-es/tabs/Tabstrip.js.map +1 -1
  176. package/dist-es/tabs-next/OverflowMenu.js +3 -3
  177. package/dist-es/tabs-next/OverflowMenu.js.map +1 -1
  178. package/dist-es/tokenized-input/TokenizedInputBase.js +3 -3
  179. package/dist-es/tokenized-input/TokenizedInputBase.js.map +1 -1
  180. package/dist-es/tokenized-input/internal/InputPill.js +2 -2
  181. package/dist-es/tokenized-input/internal/InputPill.js.map +1 -1
  182. package/dist-es/tokenized-input-next/TokenizedInputNext.js +3 -3
  183. package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -1
  184. package/dist-es/tokenized-input-next/internal/InputPill.js +2 -2
  185. package/dist-es/tokenized-input-next/internal/InputPill.js.map +1 -1
  186. package/dist-es/toolbar/overflow-panel/OverflowPanel.js +3 -3
  187. package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
  188. package/dist-types/calendar/Calendar.d.ts +2 -15
  189. package/dist-types/calendar/CalendarDateGrid.d.ts +10 -0
  190. package/dist-types/calendar/{internal/CalendarWeekHeader.d.ts → CalendarWeekHeader.d.ts} +1 -1
  191. package/dist-types/calendar/index.d.ts +2 -0
  192. package/dist-types/calendar/internal/CalendarMonth.d.ts +9 -1
  193. package/dist-types/calendar/useCalendarSelection.d.ts +0 -7
  194. package/dist-types/date-picker/DatePickerRangePanel.d.ts +17 -1
  195. package/dist-types/date-picker/DatePickerSinglePanel.d.ts +9 -1
  196. package/dist-types/index.d.ts +1 -0
  197. package/dist-types/static-list/StaticList.d.ts +8 -0
  198. package/dist-types/static-list/StaticListItem.d.ts +4 -0
  199. package/dist-types/static-list/StaticListItemContent.d.ts +8 -0
  200. package/dist-types/static-list/index.d.ts +3 -0
  201. package/dist-types/stepper-input/StepperInput.d.ts +66 -19
  202. package/dist-types/stepper-input/internal/useActivateWhileMouseDown.d.ts +5 -0
  203. package/dist-types/stepper-input/internal/utils.d.ts +8 -0
  204. package/dist-types/stepper-input/useStepperInput.d.ts +21 -8
  205. package/package.json +2 -2
  206. package/dist-cjs/calendar/internal/CalendarCarousel.css.js +0 -6
  207. package/dist-cjs/calendar/internal/CalendarCarousel.css.js.map +0 -1
  208. package/dist-cjs/calendar/internal/CalendarCarousel.js.map +0 -1
  209. package/dist-cjs/calendar/internal/CalendarWeekHeader.js.map +0 -1
  210. package/dist-cjs/stepper-input/internal/useSpinner.js +0 -33
  211. package/dist-cjs/stepper-input/internal/useSpinner.js.map +0 -1
  212. package/dist-es/calendar/internal/CalendarCarousel.css.js +0 -4
  213. package/dist-es/calendar/internal/CalendarCarousel.css.js.map +0 -1
  214. package/dist-es/calendar/internal/CalendarCarousel.js.map +0 -1
  215. package/dist-es/calendar/internal/CalendarWeekHeader.js.map +0 -1
  216. package/dist-es/stepper-input/internal/useSpinner.js +0 -29
  217. package/dist-es/stepper-input/internal/useSpinner.js.map +0 -1
  218. package/dist-types/calendar/internal/CalendarCarousel.d.ts +0 -3
  219. package/dist-types/stepper-input/internal/useSpinner.d.ts +0 -5
  220. /package/dist-cjs/calendar/{internal/CalendarWeekHeader.css.js → CalendarWeekHeader.css.js} +0 -0
  221. /package/dist-cjs/calendar/{internal/CalendarWeekHeader.css.js.map → CalendarWeekHeader.css.js.map} +0 -0
  222. /package/dist-es/calendar/{internal/CalendarWeekHeader.css.js → CalendarWeekHeader.css.js} +0 -0
  223. /package/dist-es/calendar/{internal/CalendarWeekHeader.css.js.map → CalendarWeekHeader.css.js.map} +0 -0
@@ -1,185 +1,101 @@
1
- import { useControlled, useId } from '@salt-ds/core';
2
- import { useSpinner } from './internal/useSpinner.js';
1
+ import { useCallback } from 'react';
2
+ import { useActivateWhileMouseDown } from './internal/useActivateWhileMouseDown.js';
3
+ import { toFixedDecimalPlaces, toFloat, isAtMin, isAtMax } from './internal/utils.js';
3
4
 
4
- const ACCEPT_INPUT = /^[-+]?[0-9]*\.?([0-9]+)?/g;
5
- const callAll = (...fns) => (...args) => fns.forEach((fn) => fn == null ? void 0 : fn(...args));
6
- const toFixedDecimalPlaces = (inputNumber, decimalPlaces) => inputNumber.toFixed(decimalPlaces);
7
- const isAllowedNonNumeric = (inputCharacter) => {
8
- if (typeof inputCharacter === "number")
9
- return;
10
- return "-+".includes(inputCharacter) && inputCharacter.length === 1 || inputCharacter === "";
11
- };
12
- const toFloat = (inputValue) => {
13
- if (isAllowedNonNumeric(inputValue))
14
- return 0;
15
- return Number.parseFloat(inputValue.toString());
16
- };
17
- const sanitizedInput = (numberString) => (numberString.match(ACCEPT_INPUT) || []).join("");
18
- const useStepperInput = (props, inputRef) => {
19
- const {
20
- block = 10,
21
- decimalPlaces = 0,
22
- defaultValue = 0,
23
- id: idProp,
24
- max = Number.MAX_SAFE_INTEGER,
25
- min = Number.MIN_SAFE_INTEGER,
26
- onChange,
27
- step = 1,
28
- value
29
- } = props;
30
- const [currentValue, setCurrentValue, isControlled] = useControlled({
31
- controlled: value,
32
- default: toFixedDecimalPlaces(defaultValue, decimalPlaces),
33
- name: "stepper-input"
34
- });
35
- const inputId = useId(idProp);
36
- const isOutOfRange = () => {
37
- if (currentValue === void 0)
38
- return true;
39
- return toFloat(currentValue) > max || toFloat(currentValue) < min;
40
- };
41
- const isAtMax = () => {
42
- if (currentValue === void 0)
43
- return true;
44
- return toFloat(currentValue) >= max || max === 0 && currentValue === "";
45
- };
46
- const isAtMin = () => {
47
- if (currentValue === void 0)
48
- return true;
49
- return toFloat(currentValue) <= min || min === 0 && currentValue === "";
50
- };
51
- const decrement = () => {
52
- if (currentValue === void 0 || isAtMin())
53
- return;
54
- let nextValue = currentValue === "" ? -step : toFloat(currentValue) - step;
55
- if (max !== void 0 && isOutOfRange())
56
- nextValue = max;
57
- setNextValue(nextValue);
58
- };
59
- const decrementBlock = () => {
60
- if (currentValue === void 0 || isAtMin())
61
- return;
62
- let nextValue = currentValue === "" ? block * -step : toFloat(currentValue) - step * block;
63
- if (max !== void 0 && isOutOfRange())
64
- nextValue = max;
65
- setNextValue(nextValue);
66
- };
67
- const increment = () => {
68
- if (currentValue === void 0 || isAtMax())
69
- return;
70
- let nextValue = currentValue === "" ? step : toFloat(currentValue) + step;
71
- if (min !== void 0 && isOutOfRange())
72
- nextValue = min;
73
- setNextValue(nextValue);
74
- };
75
- const incrementBlock = () => {
76
- if (currentValue === void 0 || isAtMax())
77
- return;
78
- let nextValue = currentValue === "" ? block * step : toFloat(currentValue) + step * block;
79
- if (min !== void 0 && isOutOfRange())
80
- nextValue = min;
81
- setNextValue(nextValue);
82
- };
83
- const setNextValue = (modifiedValue) => {
84
- if (props.readOnly)
85
- return;
86
- let nextValue = modifiedValue;
87
- if (nextValue < min)
88
- nextValue = min;
89
- if (nextValue > max)
90
- nextValue = max;
91
- const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);
92
- if (Number.isNaN(toFloat(roundedValue)))
93
- return;
94
- if (!isControlled) {
95
- setCurrentValue(roundedValue);
96
- }
97
- if (onChange) {
98
- onChange(roundedValue);
99
- }
100
- };
101
- const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } = useSpinner(decrementBlock, isAtMin());
102
- const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } = useSpinner(decrement, isAtMin());
103
- const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } = useSpinner(incrementBlock, isAtMax());
104
- const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } = useSpinner(increment, isAtMax());
105
- const handleInputBlur = () => {
106
- if (currentValue === void 0)
107
- return;
108
- const roundedValue = toFixedDecimalPlaces(
109
- toFloat(currentValue),
110
- decimalPlaces
111
- );
112
- if (currentValue !== "" && !isAllowedNonNumeric(currentValue) && !isControlled) {
113
- setCurrentValue(roundedValue);
114
- }
115
- if (onChange) {
116
- onChange(roundedValue);
117
- }
118
- };
119
- const handleInputChange = (event) => {
120
- const changedValue = event.target.value;
121
- if (!isControlled) {
122
- setCurrentValue(sanitizedInput(changedValue));
123
- }
124
- if (onChange) {
125
- onChange(sanitizedInput(changedValue));
126
- }
127
- };
128
- const handleInputKeyDown = (event) => {
129
- if (["ArrowUp", "ArrowDown"].includes(event.key)) {
130
- event.preventDefault();
131
- event.key === "ArrowUp" ? incrementSpinner() : decrementSpinner();
132
- }
133
- if (["PageUp", "PageDown"].includes(event.key)) {
134
- event.preventDefault();
135
- event.key === "PageUp" ? incrementSpinnerBlock() : decrementSpinnerBlock();
136
- }
137
- };
138
- const handleButtonMouseDown = (event, direction) => {
139
- if (event.nativeEvent.button !== 0)
140
- return;
141
- direction === "increment" ? incrementSpinner() : decrementSpinner();
142
- };
5
+ const useStepperInput = ({
6
+ decimalPlaces = 0,
7
+ disabled,
8
+ inputRef,
9
+ max = Number.MAX_SAFE_INTEGER,
10
+ min = Number.MIN_SAFE_INTEGER,
11
+ onChange,
12
+ readOnly,
13
+ setValue,
14
+ step = 1,
15
+ stepBlock = 10,
16
+ value
17
+ }) => {
18
+ const setValueInRange = useCallback(
19
+ (event, modifiedValue) => {
20
+ if (readOnly)
21
+ return;
22
+ let nextValue = modifiedValue;
23
+ if (nextValue < min)
24
+ nextValue = min;
25
+ if (nextValue > max)
26
+ nextValue = max;
27
+ const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);
28
+ if (Number.isNaN(toFloat(roundedValue)))
29
+ return;
30
+ setValue(roundedValue);
31
+ onChange == null ? void 0 : onChange(event, roundedValue);
32
+ },
33
+ [decimalPlaces, min, max, onChange, readOnly, setValue]
34
+ );
35
+ const decrementValue = useCallback(
36
+ (event, block) => {
37
+ if (value === void 0 || isAtMin(value, min))
38
+ return;
39
+ const decrementStep = block ? stepBlock : step;
40
+ const nextValue = value === "" ? -decrementStep : toFloat(value) - decrementStep;
41
+ setValueInRange(event, nextValue);
42
+ },
43
+ [value, min, step, stepBlock, setValueInRange]
44
+ );
45
+ const incrementValue = useCallback(
46
+ (event, block) => {
47
+ if (value === void 0 || isAtMax(value, max))
48
+ return;
49
+ const incrementStep = block ? stepBlock : step;
50
+ const nextValue = value === "" ? incrementStep : toFloat(value) + incrementStep;
51
+ setValueInRange(event, nextValue);
52
+ },
53
+ [value, max, step, stepBlock, setValueInRange]
54
+ );
55
+ const { activate: decrementSpinner } = useActivateWhileMouseDown(
56
+ (event) => decrementValue(event),
57
+ isAtMin(value, min)
58
+ );
59
+ const { activate: incrementSpinner } = useActivateWhileMouseDown(
60
+ (event) => incrementValue(event),
61
+ isAtMax(value, max)
62
+ );
143
63
  const handleButtonMouseUp = () => {
144
64
  var _a;
145
65
  return (_a = inputRef.current) == null ? void 0 : _a.focus();
146
66
  };
147
- const getButtonProps = (direction) => ({
67
+ const commonButtonProps = {
148
68
  "aria-hidden": true,
149
- disabled: props.disabled || (direction === "increment" ? isAtMax() : isAtMin()),
150
69
  tabIndex: -1,
151
- onMouseDown: (event) => handleButtonMouseDown(event, direction),
152
70
  onMouseUp: handleButtonMouseUp
153
- });
154
- const getInputProps = (inputProps = {}) => {
155
- if (currentValue === void 0)
156
- return void 0;
157
- return {
158
- ...inputProps,
159
- inputProps: {
160
- role: "spinbutton",
161
- "aria-invalid": isOutOfRange(),
162
- "aria-valuemax": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),
163
- "aria-valuemin": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),
164
- "aria-valuenow": toFloat(
165
- toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)
166
- ),
167
- id: inputId,
168
- ...inputProps.inputProps
169
- },
170
- onBlur: callAll(inputProps.onBlur, handleInputBlur),
171
- onChange: callAll(inputProps.onChange, handleInputChange),
172
- onFocus: inputProps.onFocus,
173
- onKeyDown: callAll(inputProps.onKeyDown, handleInputKeyDown),
174
- textAlign: inputProps.textAlign,
175
- value: String(currentValue)
176
- };
71
+ };
72
+ const incrementButtonProps = {
73
+ ...commonButtonProps,
74
+ "aria-label": "increment value",
75
+ disabled: disabled || isAtMax(value, max),
76
+ onMouseDown: (event) => {
77
+ if (event.nativeEvent.button !== 0) {
78
+ return;
79
+ }
80
+ incrementSpinner(event);
81
+ }
82
+ };
83
+ const decrementButtonProps = {
84
+ ...commonButtonProps,
85
+ "aria-label": "decrement value",
86
+ disabled: disabled || isAtMin(value, min),
87
+ onMouseDown: (event) => {
88
+ if (event.nativeEvent.button !== 0) {
89
+ return;
90
+ }
91
+ decrementSpinner(event);
92
+ }
177
93
  };
178
94
  return {
179
- decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,
180
- getButtonProps,
181
- getInputProps,
182
- incrementButtonDown: arrowUpButtonDown || pgUpButtonDown
95
+ incrementButtonProps,
96
+ decrementButtonProps,
97
+ incrementValue,
98
+ decrementValue
183
99
  };
184
100
  };
185
101
 
@@ -1 +1 @@
1
- {"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { type InputProps, useControlled, useId } from \"@salt-ds/core\";\nimport type {\n ChangeEvent,\n KeyboardEvent,\n MouseEvent,\n MutableRefObject,\n} from \"react\";\nimport type { StepperInputProps } from \"./StepperInput\";\nimport { useSpinner } from \"./internal/useSpinner\";\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nconst callAll =\n (...fns: any[]) =>\n (...args: any[]) =>\n fns.forEach((fn) => fn?.(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number | string) => {\n if (typeof inputCharacter === \"number\") return;\n return (\n (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n inputCharacter === \"\"\n );\n};\n\nconst toFloat = (inputValue: number | string) => {\n // Plus, minus, and empty characters are treated as 0\n if (isAllowedNonNumeric(inputValue)) return 0;\n return Number.parseFloat(inputValue.toString());\n};\n\nconst sanitizedInput = (numberString: string) =>\n (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nexport const useStepperInput = (\n props: StepperInputProps,\n inputRef: MutableRefObject<HTMLInputElement | null>,\n) => {\n const {\n block = 10,\n decimalPlaces = 0,\n defaultValue = 0,\n id: idProp,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange,\n step = 1,\n value,\n } = props;\n\n const [currentValue, setCurrentValue, isControlled] = useControlled({\n controlled: value,\n default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n name: \"stepper-input\",\n });\n const inputId = useId(idProp);\n\n const isOutOfRange = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) > max || toFloat(currentValue) < min;\n };\n\n const isAtMax = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) >= max || (max === 0 && currentValue === \"\");\n };\n\n const isAtMin = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) <= min || (min === 0 && currentValue === \"\");\n };\n\n const decrement = () => {\n if (currentValue === undefined || isAtMin()) return;\n let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const decrementBlock = () => {\n if (currentValue === undefined || isAtMin()) return;\n let nextValue =\n currentValue === \"\"\n ? block * -step\n : toFloat(currentValue) - step * block;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const increment = () => {\n if (currentValue === undefined || isAtMax()) return;\n let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const incrementBlock = () => {\n if (currentValue === undefined || isAtMax()) return;\n let nextValue =\n currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const setNextValue = (modifiedValue: number) => {\n if (props.readOnly) return;\n let nextValue = modifiedValue;\n if (nextValue < min) nextValue = min;\n if (nextValue > max) nextValue = max;\n\n const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n if (Number.isNaN(toFloat(roundedValue))) return;\n\n if (!isControlled) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n useSpinner(decrementBlock, isAtMin());\n\n const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n useSpinner(decrement, isAtMin());\n\n const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n useSpinner(incrementBlock, isAtMax());\n\n const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n useSpinner(increment, isAtMax());\n\n const handleInputBlur = () => {\n if (currentValue === undefined) return;\n\n const roundedValue = toFixedDecimalPlaces(\n toFloat(currentValue),\n decimalPlaces,\n );\n\n if (\n currentValue !== \"\" &&\n !isAllowedNonNumeric(currentValue) &&\n !isControlled\n ) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const changedValue = event.target.value;\n\n if (!isControlled) {\n setCurrentValue(sanitizedInput(changedValue));\n }\n\n if (onChange) {\n onChange(sanitizedInput(changedValue));\n }\n };\n\n const handleInputKeyDown = (event: KeyboardEvent) => {\n if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n }\n if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"PageUp\"\n ? incrementSpinnerBlock()\n : decrementSpinnerBlock();\n }\n };\n\n const handleButtonMouseDown = (\n event: MouseEvent<HTMLButtonElement>,\n direction: string,\n ) => {\n if (event.nativeEvent.button !== 0) return;\n direction === \"increment\" ? incrementSpinner() : decrementSpinner();\n };\n\n const handleButtonMouseUp = () => inputRef.current?.focus();\n\n const getButtonProps = (direction: string) => ({\n \"aria-hidden\": true,\n disabled:\n props.disabled || (direction === \"increment\" ? isAtMax() : isAtMin()),\n tabIndex: -1,\n onMouseDown: (event: MouseEvent<HTMLButtonElement>) =>\n handleButtonMouseDown(event, direction),\n onMouseUp: handleButtonMouseUp,\n });\n\n const getInputProps = (\n inputProps: InputProps = {},\n ): InputProps | undefined => {\n if (currentValue === undefined) return undefined;\n return {\n ...inputProps,\n inputProps: {\n role: \"spinbutton\",\n \"aria-invalid\": isOutOfRange(),\n \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n \"aria-valuenow\": toFloat(\n toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces),\n ),\n id: inputId,\n ...inputProps.inputProps,\n },\n onBlur: callAll(inputProps.onBlur, handleInputBlur),\n onChange: callAll(inputProps.onChange, handleInputChange),\n onFocus: inputProps.onFocus,\n onKeyDown: callAll(inputProps.onKeyDown, handleInputKeyDown),\n textAlign: inputProps.textAlign,\n value: String(currentValue),\n };\n };\n\n return {\n decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,\n getButtonProps,\n getInputProps,\n incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,\n };\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import {\n type Dispatch,\n type MouseEvent,\n type MutableRefObject,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\nimport type { StepperInputProps } from \"./StepperInput\";\nimport { useActivateWhileMouseDown } from \"./internal/useActivateWhileMouseDown\";\nimport {\n isAtMax,\n isAtMin,\n toFixedDecimalPlaces,\n toFloat,\n} from \"./internal/utils\";\n\n/**\n * Manages increment / decrement logic\n */\nexport const useStepperInput = ({\n decimalPlaces = 0,\n disabled,\n inputRef,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange,\n readOnly,\n setValue,\n step = 1,\n stepBlock = 10,\n value,\n}: Pick<\n StepperInputProps,\n | \"decimalPlaces\"\n | \"disabled\"\n | \"inputRef\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"readOnly\"\n | \"step\"\n | \"stepBlock\"\n | \"value\"\n> & {\n setValue: Dispatch<SetStateAction<string | number | undefined>>;\n inputRef: MutableRefObject<HTMLInputElement | null>;\n}) => {\n const setValueInRange = useCallback(\n (event: SyntheticEvent | undefined, modifiedValue: number) => {\n if (readOnly) return;\n let nextValue = modifiedValue;\n if (nextValue < min) nextValue = min;\n if (nextValue > max) nextValue = max;\n\n const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n if (Number.isNaN(toFloat(roundedValue))) return;\n\n setValue(roundedValue);\n\n onChange?.(event, roundedValue);\n },\n [decimalPlaces, min, max, onChange, readOnly, setValue],\n );\n\n const decrementValue = useCallback(\n (event?: SyntheticEvent, block?: boolean) => {\n if (value === undefined || isAtMin(value, min)) return;\n const decrementStep = block ? stepBlock : step;\n const nextValue =\n value === \"\" ? -decrementStep : toFloat(value) - decrementStep;\n setValueInRange(event, nextValue);\n },\n [value, min, step, stepBlock, setValueInRange],\n );\n\n const incrementValue = useCallback(\n (event?: SyntheticEvent, block?: boolean) => {\n if (value === undefined || isAtMax(value, max)) return;\n const incrementStep = block ? stepBlock : step;\n const nextValue =\n value === \"\" ? incrementStep : toFloat(value) + incrementStep;\n setValueInRange(event, nextValue);\n },\n [value, max, step, stepBlock, setValueInRange],\n );\n\n const { activate: decrementSpinner } = useActivateWhileMouseDown(\n (event?: SyntheticEvent) => decrementValue(event),\n isAtMin(value, min),\n );\n\n const { activate: incrementSpinner } = useActivateWhileMouseDown(\n (event?: SyntheticEvent) => incrementValue(event),\n isAtMax(value, max),\n );\n\n const handleButtonMouseUp = () => inputRef.current?.focus();\n\n const commonButtonProps = {\n \"aria-hidden\": true,\n tabIndex: -1,\n onMouseUp: handleButtonMouseUp,\n };\n\n const incrementButtonProps = {\n ...commonButtonProps,\n \"aria-label\": \"increment value\",\n disabled: disabled || isAtMax(value, max),\n onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n if (event.nativeEvent.button !== 0) {\n // To match closely with <input type='input'>\n return;\n }\n incrementSpinner(event);\n },\n };\n\n const decrementButtonProps = {\n ...commonButtonProps,\n \"aria-label\": \"decrement value\",\n disabled: disabled || isAtMin(value, min),\n onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n if (event.nativeEvent.button !== 0) {\n // To match closely with <input type='input'>\n return;\n }\n decrementSpinner(event);\n },\n };\n\n return {\n incrementButtonProps,\n decrementButtonProps,\n incrementValue,\n decrementValue,\n };\n};\n"],"names":[],"mappings":"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"}
@@ -1,6 +1,5 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useForkRef, Button } from '@salt-ds/core';
3
- import { CloseIcon } from '@salt-ds/icons';
2
+ import { makePrefixer, useForkRef, useIcon, Button } from '@salt-ds/core';
4
3
  import { useComponentCssInjection } from '@salt-ds/styles';
5
4
  import { useWindow } from '@salt-ds/window';
6
5
  import { clsx } from 'clsx';
@@ -10,18 +9,21 @@ import css_248z from './Tab.css.js';
10
9
 
11
10
  const noop = () => void 0;
12
11
  const withBaseName = makePrefixer("saltTab");
13
- const CloseTabButton = (props) => /* @__PURE__ */ jsx(Button, {
14
- ...props,
15
- "aria-label": "Close Tab (Delete or Backspace)",
16
- className: withBaseName("closeButton"),
17
- tabIndex: void 0,
18
- title: "Close Tab (Delete or Backspace)",
19
- variant: "secondary",
20
- children: /* @__PURE__ */ jsx(CloseIcon, {
12
+ const CloseTabButton = (props) => {
13
+ const { CloseIcon } = useIcon();
14
+ return /* @__PURE__ */ jsx(Button, {
15
+ ...props,
21
16
  "aria-label": "Close Tab (Delete or Backspace)",
22
- className: withBaseName("close-icon")
23
- })
24
- });
17
+ className: withBaseName("closeButton"),
18
+ tabIndex: void 0,
19
+ title: "Close Tab (Delete or Backspace)",
20
+ variant: "secondary",
21
+ children: /* @__PURE__ */ jsx(CloseIcon, {
22
+ "aria-label": "Close Tab (Delete or Backspace)",
23
+ className: withBaseName("close-icon")
24
+ })
25
+ });
26
+ };
25
27
  const Tab = forwardRef(function Tab2({
26
28
  ariaControls,
27
29
  children,
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport {\n Button,\n type ButtonProps,\n makePrefixer,\n useForkRef,\n} from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { EditableLabel, type EditableLabelProps } from \"../editable-label\";\nimport type { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => (\n // FIXME: use polymorphic button\n <Button\n {...props}\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"closeButton\")}\n tabIndex={undefined}\n title=\"Close Tab (Delete or Backspace)\"\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"close-icon\")}\n />\n </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable,\n dragging,\n editable,\n editing,\n focusVisible,\n index,\n label,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n orientation,\n selected,\n tabChildIndex = 0,\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n throw Error(\n \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\",\n );\n }\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, root);\n const [closeHover, setCloseHover] = useState(false);\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (!editing) {\n e.preventDefault();\n onClick(e, index);\n }\n },\n [editing, index, onClick],\n );\n const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n onKeyDown(e);\n };\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true,\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable && !editing) {\n e.stopPropagation();\n onClose?.(index);\n }\n break;\n default:\n onKeyUp?.(e, index);\n }\n };\n\n const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClose?.(index);\n };\n\n const handleCloseButtonEnter = () => {\n setCloseHover(true);\n };\n\n const handleCloseButtonLeave = () => {\n setCloseHover(false);\n };\n\n const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n onMouseDown?.(e);\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n }\n return label;\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".saltEditableLabel-input\",\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-selected={selected}\n className={clsx(withBaseName(), {\n [withBaseName(\"closeable\")]: closeable,\n [withBaseName(\"closeHover\")]: closeHover,\n [withBaseName(\"dragAway\")]: dragging,\n [withBaseName(\"editing\")]: editing,\n [withBaseName(\"vertical\")]: orientation === \"vertical\",\n saltFocusVisible: focusVisible,\n })}\n data-editable={editable || undefined}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyDown={handleKeyDownMain}\n onKeyUp={handleKeyUp}\n onMouseDown={handleMouseDown}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={withBaseName(\"main\")}>\n <span\n className={withBaseName(\"text\")}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {closeable ? (\n <CloseTabButton\n onClick={handleCloseButtonClick}\n onMouseEnter={handleCloseButtonEnter}\n onMouseLeave={handleCloseButtonLeave}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}
1
+ {"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport {\n Button,\n type ButtonProps,\n makePrefixer,\n useForkRef,\n useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { EditableLabel, type EditableLabelProps } from \"../editable-label\";\nimport type { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => {\n const { CloseIcon } = useIcon();\n return (\n // FIXME: use polymorphic button\n <Button\n {...props}\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"closeButton\")}\n tabIndex={undefined}\n title=\"Close Tab (Delete or Backspace)\"\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"close-icon\")}\n />\n </Button>\n );\n};\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable,\n dragging,\n editable,\n editing,\n focusVisible,\n index,\n label,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n orientation,\n selected,\n tabChildIndex = 0,\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n throw Error(\n \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\",\n );\n }\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, root);\n const [closeHover, setCloseHover] = useState(false);\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (!editing) {\n e.preventDefault();\n onClick(e, index);\n }\n },\n [editing, index, onClick],\n );\n const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n onKeyDown(e);\n };\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true,\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable && !editing) {\n e.stopPropagation();\n onClose?.(index);\n }\n break;\n default:\n onKeyUp?.(e, index);\n }\n };\n\n const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClose?.(index);\n };\n\n const handleCloseButtonEnter = () => {\n setCloseHover(true);\n };\n\n const handleCloseButtonLeave = () => {\n setCloseHover(false);\n };\n\n const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n onMouseDown?.(e);\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n }\n return label;\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".saltEditableLabel-input\",\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-selected={selected}\n className={clsx(withBaseName(), {\n [withBaseName(\"closeable\")]: closeable,\n [withBaseName(\"closeHover\")]: closeHover,\n [withBaseName(\"dragAway\")]: dragging,\n [withBaseName(\"editing\")]: editing,\n [withBaseName(\"vertical\")]: orientation === \"vertical\",\n saltFocusVisible: focusVisible,\n })}\n data-editable={editable || undefined}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyDown={handleKeyDownMain}\n onKeyUp={handleKeyUp}\n onMouseDown={handleMouseDown}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={withBaseName(\"main\")}>\n <span\n className={withBaseName(\"text\")}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {closeable ? (\n <CloseTabButton\n onClick={handleCloseButtonClick}\n onMouseEnter={handleCloseButtonEnter}\n onMouseLeave={handleCloseButtonLeave}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef, useRef, useState, useCallback, Children, useImperativeHandle, isValidElement, cloneElement, createElement } from 'react';
3
- import { makePrefixer, useIdMemo, useIsomorphicLayoutEffect, Tooltip, Button } from '@salt-ds/core';
4
- import { OverflowMenuIcon, AddIcon } from '@salt-ds/icons';
3
+ import { makePrefixer, useIcon, useIdMemo, useIsomorphicLayoutEffect, Tooltip, Button } from '@salt-ds/core';
4
+ import { AddIcon } from '@salt-ds/icons';
5
5
  import { clsx } from 'clsx';
6
6
  import '../dropdown/DropdownBase.js';
7
7
  import '../dropdown/DropdownButton.js';
@@ -69,6 +69,7 @@ const Tabstrip = forwardRef(function Tabstrip2({
69
69
  const activeRef = useRef(
70
70
  activeTabIndexProp || defaultActiveTabIndex || 0
71
71
  );
72
+ const { OverflowIcon } = useIcon();
72
73
  const overflowItemsRef = useRef([]);
73
74
  const [showOverflowMenu, _setShowOverflowMenu] = useState(false);
74
75
  const setShowOverflowMenu = useCallback((value) => {
@@ -322,7 +323,7 @@ const Tabstrip = forwardRef(function Tabstrip2({
322
323
  "aria-label": `Tabs overflow menu ${overflowCount} item${overflowCount === 1 ? "" : "s"}`,
323
324
  variant: "secondary",
324
325
  tabIndex: -1,
325
- children: /* @__PURE__ */ jsx(OverflowMenuIcon, {})
326
+ children: /* @__PURE__ */ jsx(OverflowIcon, {})
326
327
  }),
327
328
  width: "auto"
328
329
  }, "overflow")
@@ -1 +1 @@
1
- {"version":3,"file":"Tabstrip.js","sources":["../src/tabs/Tabstrip.tsx"],"sourcesContent":["import {\n Button,\n Tooltip,\n makePrefixer,\n useIdMemo,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { AddIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent,\n type RefObject,\n cloneElement,\n createElement,\n forwardRef,\n isValidElement,\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport type { SelectionChangeHandler } from \"../common-hooks\";\n\nimport { Dropdown } from \"../dropdown\";\nimport {\n type InjectedSourceItem,\n type OverflowItem,\n useOverflowLayout,\n} from \"../responsive\";\nimport { useOverflowCollectionItems } from \"../responsive/useOverflowCollectionItems\";\nimport { Tab } from \"./Tab\";\nimport { TabActivationIndicator } from \"./TabActivationIndicator\";\nimport type {\n FocusAPI,\n TabDescriptor,\n TabElement,\n TabProps,\n TabsSource,\n TabstripProps,\n responsiveDataAttributes,\n} from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabstripCss from \"./Tabstrip.css\";\nimport themeTabstripCss from \"./ThemeTabstrip.css\";\n\nconst withBaseName = makePrefixer(\"saltTabstrip\");\n\nconst ADD_TAB_LABEL = \"Create Tab\";\n\n// Simple strings for tab labels are accepted as input, convert to TabDescriptors internally\nconst tabDescriptors = (\n tabs: TabsSource | undefined,\n): TabDescriptor[] | undefined =>\n tabs?.map((tab: string | TabDescriptor) =>\n typeof tab === \"string\" ? { label: tab } : tab,\n );\n\nexport const Tabstrip = forwardRef(function Tabstrip(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop = false,\n centered = false,\n children,\n className: classNameProp,\n defaultSource,\n defaultActiveTabIndex,\n editing,\n variant,\n enableAddTab = false,\n enableCloseTab,\n enableRenameTab,\n id: idProp,\n keyBoardActivation = \"manual\",\n onAddTab,\n onActiveChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMouseDown,\n onMoveTab,\n orientation = \"horizontal\",\n overflowMenu: overflowMenuProp = true,\n promptForNewTabName = true,\n showActivationIndicator = true,\n source,\n title,\n ...htmlAttributes\n }: TabstripProps,\n forwardedRef: ForwardedRef<FocusAPI>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-strip\",\n css: tabstripCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"salt-theme-tab-strip\",\n css: themeTabstripCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n // can't use forwardedRef here, can we ?\n // const setForkRef = useForkRef(root, forwardedRef);\n const activeRef = useRef<number | null>(\n activeTabIndexProp || defaultActiveTabIndex || 0,\n );\n\n const overflowItemsRef = useRef<OverflowItem[]>([]);\n const [showOverflowMenu, _setShowOverflowMenu] = useState(false);\n\n const setShowOverflowMenu = useCallback((value: boolean) => {\n _setShowOverflowMenu(value);\n }, []);\n\n const tabstripId = useIdMemo(idProp);\n\n const injectedItems = enableAddTab\n ? [\n {\n source: { label: \"Add Tab\", position: -1, priority: 1 },\n } as InjectedSourceItem,\n ]\n : undefined;\n\n const collectionHook = useOverflowCollectionItems({\n children,\n defaultSource: tabDescriptors(defaultSource),\n id: tabstripId,\n injectedItems,\n label: \"Tabstrip\",\n orientation,\n source: tabDescriptors(source),\n options: {\n closeable: enableCloseTab,\n editable: enableRenameTab,\n getPriority: (item, index) => {\n return index === activeRef.current ? 1 : undefined;\n },\n },\n });\n\n const childCount = useRef(Children.count(children));\n\n const getChildren = (): TabElement[] | undefined => {\n if (Children.count(children) === 0) {\n return undefined;\n }\n return Children.toArray(children) as TabElement[];\n };\n\n const [innerContainerRef, switchOverflowPriorities] = useOverflowLayout({\n collectionHook,\n disableOverflow: overflowMenuProp === false,\n id: tabstripId,\n orientation,\n label: \"Tabstrip\",\n });\n overflowItemsRef.current = collectionHook.data;\n const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n const tabMovedHandler = useCallback(\n (fromIndex: number, toIndex: number) => {\n onMoveTab?.(fromIndex, toIndex);\n setTimeout(() => {\n collectionHook.dispatch({\n type: \"reset\",\n });\n }, 50);\n },\n [collectionHook, onMoveTab],\n );\n\n const handleTabSelectionChange = useCallback(\n (tabIndex: number) => {\n const selectedItem = collectionHook.data[tabIndex];\n const prevSelectedItem = collectionHook.data.find(\n (item) => item.priority === 1 && !item.isOverflowIndicator,\n );\n if (selectedItem && prevSelectedItem && overflowMenuProp) {\n switchOverflowPriorities(selectedItem, prevSelectedItem);\n }\n onActiveChange?.(tabIndex);\n setShowOverflowMenu(false);\n },\n [\n collectionHook.data,\n onActiveChange,\n overflowMenuProp,\n setShowOverflowMenu,\n switchOverflowPriorities,\n ],\n );\n\n const {\n activeTabIndex,\n activateTab,\n addTab,\n onMouseDown: tabstripHookMouseDown,\n ...tabstripHook\n } = useTabstrip({\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n collectionHook,\n defaultTabs: tabDescriptors(defaultSource),\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n idRoot: tabstripId,\n innerContainerRef,\n keyBoardActivation,\n onActiveChange: handleTabSelectionChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab: tabMovedHandler,\n orientation,\n promptForNewTabName,\n tabs: tabDescriptors(source) ?? getChildren(),\n });\n\n activeRef.current = activeTabIndex;\n\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => {\n const { current: tabstrip } = root;\n if (tabstrip) {\n const selectedTab = tabstrip.querySelector(\n '.saltTab[aria-selected=\"true\"]',\n ) as HTMLElement;\n if (selectedTab) {\n selectedTab.focus();\n }\n }\n },\n }) as FocusAPI,\n [],\n );\n\n const handleAddTabClick = useCallback(() => {\n if (!collectionHook.isControlled) {\n addTab();\n }\n onAddTab?.();\n }, [collectionHook.isControlled, onAddTab, addTab]);\n\n const selectedIndex = useRef(activeTabIndex);\n const focusedTabIndex = tabstripHook.highlightedIdx;\n const handleOverflowSelectionChange: SelectionChangeHandler<OverflowItem> =\n useCallback(\n (e, tab) => {\n if (tab !== null) {\n activateTab(tab.index);\n }\n },\n [activateTab],\n );\n\n const handleKeydownOverflowMenu = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n tabstripHook.navigationProps?.onKeyDown?.(e);\n },\n [tabstripHook.navigationProps],\n );\n\n const handleOverflowMenuOpen = useCallback(\n (open: boolean) => {\n setShowOverflowMenu(open);\n },\n [setShowOverflowMenu],\n );\n\n const handleMouseDown = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(evt);\n tabstripHookMouseDown?.(evt);\n },\n [onMouseDown, tabstripHookMouseDown],\n );\n\n // shouldn't we use ref for this ?\n useIsomorphicLayoutEffect(() => {\n // We don't care about changes to overflowedItems here, the overflowObserver\n // always does the right thing. We only care about changes to selected tab\n if (selectedIndex.current !== activeTabIndex && overflowMenuProp) {\n // We might want to do this only if the selected tab is overflowed ?\n // TODO\n // resetOverflow();\n selectedIndex.current = activeTabIndex;\n }\n }, [overflowMenuProp, activeTabIndex]);\n\n useIsomorphicLayoutEffect(() => {\n if (Children.count(children) !== childCount.current) {\n childCount.current = Children.count(children);\n // TODO\n // resetOverflow();\n }\n }, [children]);\n\n /*\n * biome-ignore lint/correctness/useExhaustiveDependencies: We only want the effect to run when value changes, not every time focusedTabIndex changes.\n * It doesn't matter if focusedTabIndex is stale in between calls - it will be correct when value changes.\n */\n useIsomorphicLayoutEffect(() => {\n if (\n activeTabIndex !== null &&\n focusedTabIndex !== activeTabIndex &&\n focusedTabIndex !== -1\n ) {\n tabstripHook.focusTab(activeTabIndex);\n }\n }, [activeTabIndex]);\n\n const renderContent = () => {\n const content = collectionHook.data\n .filter((item) => !item.isOverflowIndicator && !item.isInjectedItem)\n .map((item: OverflowItem, index: number) => {\n // TODO sort out typoing\n const tab = item.source as unknown as TabDescriptor;\n const element = item.element as TabElement;\n\n const selected = index === activeTabIndex;\n const focusVisible = tabstripHook.focusVisible === index;\n const overflowed =\n overflowedItems.findIndex(\n (item: OverflowItem) => item.index === index,\n ) !== -1;\n\n const tabIsBeingEdited = tabstripHook.editing && selected;\n const tabIndex = tabIsBeingEdited\n ? undefined\n : selected && !tabstripHook.focusIsWithinComponent\n ? 0\n : -1;\n\n const baseProps: Partial<TabProps> &\n responsiveDataAttributes & {\n ref?: RefObject<HTMLDivElement>;\n key: string | number;\n } = {\n \"data-index\": index,\n \"data-priority\": item.priority,\n \"data-overflowed\": overflowed ? true : undefined,\n ...tabstripHook.navigationProps,\n id: item.id,\n key: index,\n onMouseDown: handleMouseDown,\n tabIndex,\n };\n\n const tabProps = {\n ...tabstripHook.tabProps,\n closeable: item.closeable,\n dragging: tabstripHook.draggedItemIndex === index,\n editable: item.editable,\n editing: tabIsBeingEdited,\n focusVisible,\n index,\n onClose: item.closeable ? tabstripHook.closeTab : undefined,\n orientation,\n selected,\n } as Partial<TabProps>;\n\n if (isValidElement(element)) {\n if (element.type === Tab) {\n return cloneElement(element, { ...baseProps, ...tabProps });\n }\n return cloneElement(element, baseProps);\n }\n\n return createElement(Tab, {\n ...baseProps,\n ...tabProps,\n label: tab.label,\n });\n });\n\n const overflowCount = overflowedItems.length;\n const draggingActiveTab = tabstripHook.draggedItemIndex === activeTabIndex;\n const showOverflow =\n (tabstripHook.revealOverflowedItems && !draggingActiveTab) ||\n showOverflowMenu;\n const showTooltip = tabstripHook.revealOverflowedItems && draggingActiveTab;\n const overflowIndicator = collectionHook.data.find(\n (i) => i.isOverflowIndicator,\n );\n const [injectedItem] = collectionHook.data.filter((i) => i.isInjectedItem);\n\n if (overflowIndicator) {\n content.push(\n <Tooltip\n content=\"Active Tab cannot be moved into overflow list\"\n open\n disabled={!showTooltip}\n status=\"warning\"\n key=\"tooltip\"\n hideArrow\n >\n <Dropdown<OverflowItem>\n className={clsx(withBaseName(\"overflowMenu\"), {\n [withBaseName(\"overflowMenu-open\")]: showOverflow,\n })}\n ListProps={{\n className: clsx({\n [withBaseName(\"overflowMenu-dropTarget\")]:\n tabstripHook.revealOverflowedItems,\n }),\n }}\n data-overflow-indicator\n data-priority={0}\n id={overflowIndicator.id}\n isOpen={showOverflow}\n key=\"overflow\"\n onOpenChange={handleOverflowMenuOpen}\n onKeyDown={handleKeydownOverflowMenu}\n onSelectionChange={handleOverflowSelectionChange}\n placement=\"bottom-end\"\n source={overflowedItems}\n selected={null}\n triggerComponent={\n <Button\n aria-label={`Tabs overflow menu ${overflowCount} item${\n overflowCount === 1 ? \"\" : \"s\"\n }`}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <OverflowMenuIcon />\n </Button>\n }\n width=\"auto\"\n />\n </Tooltip>,\n );\n }\n\n if (injectedItem) {\n content.push(\n <Button\n {...tabstripHook.navigationProps}\n aria-label={ADD_TAB_LABEL}\n data-priority={injectedItem.priority}\n data-overflowed={injectedItem.overflowed}\n id={injectedItem.id}\n key=\"addButton\"\n onClick={handleAddTabClick}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <AddIcon />\n </Button>,\n );\n }\n\n return content;\n };\n\n const selectedTabOverflowed = overflowedItems.some(\n (item: OverflowItem) => item.index === activeTabIndex,\n );\n const className = clsx(\n withBaseName(),\n withBaseName(orientation),\n classNameProp,\n {\n [withBaseName(\"centered\")]: centered,\n [withBaseName(\"draggingTab\")]: tabstripHook.isDragging,\n [withBaseName(\"tertiary\")]: variant === \"tertiary\",\n },\n );\n\n const selectedTabId =\n activeTabIndex !== null ? collectionHook.data[activeTabIndex].id : null;\n\n return (\n <div\n {...htmlAttributes}\n {...tabstripHook.containerProps}\n className={className}\n id={tabstripId}\n ref={root}\n role=\"tablist\"\n >\n <div className={withBaseName(\"inner\")} ref={innerContainerRef}>\n {renderContent()}\n </div>\n {showActivationIndicator ? (\n <TabActivationIndicator\n hideThumb={selectedTabOverflowed || tabstripHook.isDragging}\n orientation={orientation}\n tabId={selectedTabId}\n />\n ) : null}\n {tabstripHook.draggable}\n </div>\n );\n});\n\nTabstrip.displayName = \"Tabstrip\";\n"],"names":["Tabstrip","tabstripCss","themeTabstripCss","_a","item","createElement"],"mappings":"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"}
1
+ {"version":3,"file":"Tabstrip.js","sources":["../src/tabs/Tabstrip.tsx"],"sourcesContent":["import {\n Button,\n Tooltip,\n makePrefixer,\n useIcon,\n useIdMemo,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { AddIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent,\n type RefObject,\n cloneElement,\n createElement,\n forwardRef,\n isValidElement,\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport type { SelectionChangeHandler } from \"../common-hooks\";\n\nimport { Dropdown } from \"../dropdown\";\nimport {\n type InjectedSourceItem,\n type OverflowItem,\n useOverflowLayout,\n} from \"../responsive\";\nimport { useOverflowCollectionItems } from \"../responsive/useOverflowCollectionItems\";\nimport { Tab } from \"./Tab\";\nimport { TabActivationIndicator } from \"./TabActivationIndicator\";\nimport type {\n FocusAPI,\n TabDescriptor,\n TabElement,\n TabProps,\n TabsSource,\n TabstripProps,\n responsiveDataAttributes,\n} from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabstripCss from \"./Tabstrip.css\";\nimport themeTabstripCss from \"./ThemeTabstrip.css\";\n\nconst withBaseName = makePrefixer(\"saltTabstrip\");\n\nconst ADD_TAB_LABEL = \"Create Tab\";\n\n// Simple strings for tab labels are accepted as input, convert to TabDescriptors internally\nconst tabDescriptors = (\n tabs: TabsSource | undefined,\n): TabDescriptor[] | undefined =>\n tabs?.map((tab: string | TabDescriptor) =>\n typeof tab === \"string\" ? { label: tab } : tab,\n );\n\nexport const Tabstrip = forwardRef(function Tabstrip(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop = false,\n centered = false,\n children,\n className: classNameProp,\n defaultSource,\n defaultActiveTabIndex,\n editing,\n variant,\n enableAddTab = false,\n enableCloseTab,\n enableRenameTab,\n id: idProp,\n keyBoardActivation = \"manual\",\n onAddTab,\n onActiveChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMouseDown,\n onMoveTab,\n orientation = \"horizontal\",\n overflowMenu: overflowMenuProp = true,\n promptForNewTabName = true,\n showActivationIndicator = true,\n source,\n title,\n ...htmlAttributes\n }: TabstripProps,\n forwardedRef: ForwardedRef<FocusAPI>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-strip\",\n css: tabstripCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"salt-theme-tab-strip\",\n css: themeTabstripCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n // can't use forwardedRef here, can we ?\n // const setForkRef = useForkRef(root, forwardedRef);\n const activeRef = useRef<number | null>(\n activeTabIndexProp || defaultActiveTabIndex || 0,\n );\n const { OverflowIcon } = useIcon();\n const overflowItemsRef = useRef<OverflowItem[]>([]);\n const [showOverflowMenu, _setShowOverflowMenu] = useState(false);\n\n const setShowOverflowMenu = useCallback((value: boolean) => {\n _setShowOverflowMenu(value);\n }, []);\n\n const tabstripId = useIdMemo(idProp);\n\n const injectedItems = enableAddTab\n ? [\n {\n source: { label: \"Add Tab\", position: -1, priority: 1 },\n } as InjectedSourceItem,\n ]\n : undefined;\n\n const collectionHook = useOverflowCollectionItems({\n children,\n defaultSource: tabDescriptors(defaultSource),\n id: tabstripId,\n injectedItems,\n label: \"Tabstrip\",\n orientation,\n source: tabDescriptors(source),\n options: {\n closeable: enableCloseTab,\n editable: enableRenameTab,\n getPriority: (item, index) => {\n return index === activeRef.current ? 1 : undefined;\n },\n },\n });\n\n const childCount = useRef(Children.count(children));\n\n const getChildren = (): TabElement[] | undefined => {\n if (Children.count(children) === 0) {\n return undefined;\n }\n return Children.toArray(children) as TabElement[];\n };\n\n const [innerContainerRef, switchOverflowPriorities] = useOverflowLayout({\n collectionHook,\n disableOverflow: overflowMenuProp === false,\n id: tabstripId,\n orientation,\n label: \"Tabstrip\",\n });\n overflowItemsRef.current = collectionHook.data;\n const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n const tabMovedHandler = useCallback(\n (fromIndex: number, toIndex: number) => {\n onMoveTab?.(fromIndex, toIndex);\n setTimeout(() => {\n collectionHook.dispatch({\n type: \"reset\",\n });\n }, 50);\n },\n [collectionHook, onMoveTab],\n );\n\n const handleTabSelectionChange = useCallback(\n (tabIndex: number) => {\n const selectedItem = collectionHook.data[tabIndex];\n const prevSelectedItem = collectionHook.data.find(\n (item) => item.priority === 1 && !item.isOverflowIndicator,\n );\n if (selectedItem && prevSelectedItem && overflowMenuProp) {\n switchOverflowPriorities(selectedItem, prevSelectedItem);\n }\n onActiveChange?.(tabIndex);\n setShowOverflowMenu(false);\n },\n [\n collectionHook.data,\n onActiveChange,\n overflowMenuProp,\n setShowOverflowMenu,\n switchOverflowPriorities,\n ],\n );\n\n const {\n activeTabIndex,\n activateTab,\n addTab,\n onMouseDown: tabstripHookMouseDown,\n ...tabstripHook\n } = useTabstrip({\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n collectionHook,\n defaultTabs: tabDescriptors(defaultSource),\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n idRoot: tabstripId,\n innerContainerRef,\n keyBoardActivation,\n onActiveChange: handleTabSelectionChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab: tabMovedHandler,\n orientation,\n promptForNewTabName,\n tabs: tabDescriptors(source) ?? getChildren(),\n });\n\n activeRef.current = activeTabIndex;\n\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => {\n const { current: tabstrip } = root;\n if (tabstrip) {\n const selectedTab = tabstrip.querySelector(\n '.saltTab[aria-selected=\"true\"]',\n ) as HTMLElement;\n if (selectedTab) {\n selectedTab.focus();\n }\n }\n },\n }) as FocusAPI,\n [],\n );\n\n const handleAddTabClick = useCallback(() => {\n if (!collectionHook.isControlled) {\n addTab();\n }\n onAddTab?.();\n }, [collectionHook.isControlled, onAddTab, addTab]);\n\n const selectedIndex = useRef(activeTabIndex);\n const focusedTabIndex = tabstripHook.highlightedIdx;\n const handleOverflowSelectionChange: SelectionChangeHandler<OverflowItem> =\n useCallback(\n (e, tab) => {\n if (tab !== null) {\n activateTab(tab.index);\n }\n },\n [activateTab],\n );\n\n const handleKeydownOverflowMenu = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n tabstripHook.navigationProps?.onKeyDown?.(e);\n },\n [tabstripHook.navigationProps],\n );\n\n const handleOverflowMenuOpen = useCallback(\n (open: boolean) => {\n setShowOverflowMenu(open);\n },\n [setShowOverflowMenu],\n );\n\n const handleMouseDown = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(evt);\n tabstripHookMouseDown?.(evt);\n },\n [onMouseDown, tabstripHookMouseDown],\n );\n\n // shouldn't we use ref for this ?\n useIsomorphicLayoutEffect(() => {\n // We don't care about changes to overflowedItems here, the overflowObserver\n // always does the right thing. We only care about changes to selected tab\n if (selectedIndex.current !== activeTabIndex && overflowMenuProp) {\n // We might want to do this only if the selected tab is overflowed ?\n // TODO\n // resetOverflow();\n selectedIndex.current = activeTabIndex;\n }\n }, [overflowMenuProp, activeTabIndex]);\n\n useIsomorphicLayoutEffect(() => {\n if (Children.count(children) !== childCount.current) {\n childCount.current = Children.count(children);\n // TODO\n // resetOverflow();\n }\n }, [children]);\n\n /*\n * biome-ignore lint/correctness/useExhaustiveDependencies: We only want the effect to run when value changes, not every time focusedTabIndex changes.\n * It doesn't matter if focusedTabIndex is stale in between calls - it will be correct when value changes.\n */\n useIsomorphicLayoutEffect(() => {\n if (\n activeTabIndex !== null &&\n focusedTabIndex !== activeTabIndex &&\n focusedTabIndex !== -1\n ) {\n tabstripHook.focusTab(activeTabIndex);\n }\n }, [activeTabIndex]);\n\n const renderContent = () => {\n const content = collectionHook.data\n .filter((item) => !item.isOverflowIndicator && !item.isInjectedItem)\n .map((item: OverflowItem, index: number) => {\n // TODO sort out typoing\n const tab = item.source as unknown as TabDescriptor;\n const element = item.element as TabElement;\n\n const selected = index === activeTabIndex;\n const focusVisible = tabstripHook.focusVisible === index;\n const overflowed =\n overflowedItems.findIndex(\n (item: OverflowItem) => item.index === index,\n ) !== -1;\n\n const tabIsBeingEdited = tabstripHook.editing && selected;\n const tabIndex = tabIsBeingEdited\n ? undefined\n : selected && !tabstripHook.focusIsWithinComponent\n ? 0\n : -1;\n\n const baseProps: Partial<TabProps> &\n responsiveDataAttributes & {\n ref?: RefObject<HTMLDivElement>;\n key: string | number;\n } = {\n \"data-index\": index,\n \"data-priority\": item.priority,\n \"data-overflowed\": overflowed ? true : undefined,\n ...tabstripHook.navigationProps,\n id: item.id,\n key: index,\n onMouseDown: handleMouseDown,\n tabIndex,\n };\n\n const tabProps = {\n ...tabstripHook.tabProps,\n closeable: item.closeable,\n dragging: tabstripHook.draggedItemIndex === index,\n editable: item.editable,\n editing: tabIsBeingEdited,\n focusVisible,\n index,\n onClose: item.closeable ? tabstripHook.closeTab : undefined,\n orientation,\n selected,\n } as Partial<TabProps>;\n\n if (isValidElement(element)) {\n if (element.type === Tab) {\n return cloneElement(element, { ...baseProps, ...tabProps });\n }\n return cloneElement(element, baseProps);\n }\n\n return createElement(Tab, {\n ...baseProps,\n ...tabProps,\n label: tab.label,\n });\n });\n\n const overflowCount = overflowedItems.length;\n const draggingActiveTab = tabstripHook.draggedItemIndex === activeTabIndex;\n const showOverflow =\n (tabstripHook.revealOverflowedItems && !draggingActiveTab) ||\n showOverflowMenu;\n const showTooltip = tabstripHook.revealOverflowedItems && draggingActiveTab;\n const overflowIndicator = collectionHook.data.find(\n (i) => i.isOverflowIndicator,\n );\n const [injectedItem] = collectionHook.data.filter((i) => i.isInjectedItem);\n\n if (overflowIndicator) {\n content.push(\n <Tooltip\n content=\"Active Tab cannot be moved into overflow list\"\n open\n disabled={!showTooltip}\n status=\"warning\"\n key=\"tooltip\"\n hideArrow\n >\n <Dropdown<OverflowItem>\n className={clsx(withBaseName(\"overflowMenu\"), {\n [withBaseName(\"overflowMenu-open\")]: showOverflow,\n })}\n ListProps={{\n className: clsx({\n [withBaseName(\"overflowMenu-dropTarget\")]:\n tabstripHook.revealOverflowedItems,\n }),\n }}\n data-overflow-indicator\n data-priority={0}\n id={overflowIndicator.id}\n isOpen={showOverflow}\n key=\"overflow\"\n onOpenChange={handleOverflowMenuOpen}\n onKeyDown={handleKeydownOverflowMenu}\n onSelectionChange={handleOverflowSelectionChange}\n placement=\"bottom-end\"\n source={overflowedItems}\n selected={null}\n triggerComponent={\n <Button\n aria-label={`Tabs overflow menu ${overflowCount} item${\n overflowCount === 1 ? \"\" : \"s\"\n }`}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <OverflowIcon />\n </Button>\n }\n width=\"auto\"\n />\n </Tooltip>,\n );\n }\n\n if (injectedItem) {\n content.push(\n <Button\n {...tabstripHook.navigationProps}\n aria-label={ADD_TAB_LABEL}\n data-priority={injectedItem.priority}\n data-overflowed={injectedItem.overflowed}\n id={injectedItem.id}\n key=\"addButton\"\n onClick={handleAddTabClick}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <AddIcon />\n </Button>,\n );\n }\n\n return content;\n };\n\n const selectedTabOverflowed = overflowedItems.some(\n (item: OverflowItem) => item.index === activeTabIndex,\n );\n const className = clsx(\n withBaseName(),\n withBaseName(orientation),\n classNameProp,\n {\n [withBaseName(\"centered\")]: centered,\n [withBaseName(\"draggingTab\")]: tabstripHook.isDragging,\n [withBaseName(\"tertiary\")]: variant === \"tertiary\",\n },\n );\n\n const selectedTabId =\n activeTabIndex !== null ? collectionHook.data[activeTabIndex].id : null;\n\n return (\n <div\n {...htmlAttributes}\n {...tabstripHook.containerProps}\n className={className}\n id={tabstripId}\n ref={root}\n role=\"tablist\"\n >\n <div className={withBaseName(\"inner\")} ref={innerContainerRef}>\n {renderContent()}\n </div>\n {showActivationIndicator ? (\n <TabActivationIndicator\n hideThumb={selectedTabOverflowed || tabstripHook.isDragging}\n orientation={orientation}\n tabId={selectedTabId}\n />\n ) : null}\n {tabstripHook.draggable}\n </div>\n );\n});\n\nTabstrip.displayName = \"Tabstrip\";\n"],"names":["Tabstrip","tabstripCss","themeTabstripCss","_a","item","createElement"],"mappings":"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"}
@@ -1,6 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { useForkRef, Button } from '@salt-ds/core';
3
- import { OverflowMenuIcon } from '@salt-ds/icons';
2
+ import { useIcon, useForkRef, Button } from '@salt-ds/core';
4
3
  import { forwardRef } from 'react';
5
4
  import { useOverflowMenu, useOverflowContext } from '@fluentui/react-overflow';
6
5
  import '../dropdown/DropdownBase.js';
@@ -13,6 +12,7 @@ const OverflowMenu = forwardRef(
13
12
  function OverflowMenu2(props, forwardedRef) {
14
13
  const { tabs, ...rest } = props;
15
14
  const { ref, overflowCount, isOverflowing } = useOverflowMenu();
15
+ const { OverflowIcon } = useIcon();
16
16
  const handleRef = useForkRef(ref, forwardedRef);
17
17
  const itemVisibility = useOverflowContext(
18
18
  (context) => context.itemVisibility
@@ -26,7 +26,7 @@ const OverflowMenu = forwardRef(
26
26
  "aria-label": "More tabs",
27
27
  variant: "secondary",
28
28
  role: "combobox",
29
- children: /* @__PURE__ */ jsx(OverflowMenuIcon, {
29
+ children: /* @__PURE__ */ jsx(OverflowIcon, {
30
30
  "aria-hidden": true,
31
31
  style: { margin: 0 }
32
32
  })
@@ -1 +1 @@
1
- {"version":3,"file":"OverflowMenu.js","sources":["../src/tabs-next/OverflowMenu.tsx"],"sourcesContent":["import { Button, useForkRef } from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { useOverflowContext, useOverflowMenu } from \"@fluentui/react-overflow\";\nimport { Dropdown, type DropdownProps } from \"../dropdown\";\n\ntype TabValue = {\n value: string;\n label: ReactNode;\n};\n\nexport interface OverflowMenuProps extends DropdownProps<TabValue> {\n tabs: TabValue[];\n}\n\nexport const OverflowMenu = forwardRef<HTMLDivElement, OverflowMenuProps>(\n function OverflowMenu(props, forwardedRef) {\n const { tabs, ...rest } = props;\n const { ref, overflowCount, isOverflowing } =\n useOverflowMenu<HTMLDivElement>();\n const handleRef = useForkRef(ref, forwardedRef);\n const itemVisibility = useOverflowContext(\n (context) => context.itemVisibility,\n );\n\n const tabList = tabs.filter(({ value }) => !itemVisibility[value]);\n\n if (!isOverflowing) return null;\n\n return (\n <Dropdown<TabValue>\n aria-label={`${overflowCount} more tabs`}\n triggerComponent={\n <Button aria-label=\"More tabs\" variant=\"secondary\" role=\"combobox\">\n <OverflowMenuIcon aria-hidden style={{ margin: 0 }} />\n </Button>\n }\n width=\"auto\"\n ref={handleRef}\n source={tabList}\n selected={null}\n {...rest}\n />\n );\n },\n);\n"],"names":["OverflowMenu"],"mappings":";;;;;;;;;;;AAgBO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,YAAc,EAAA;AACzC,IAAM,MAAA,EAAE,IAAS,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1B,IAAA,MAAM,EAAE,GAAA,EAAK,aAAe,EAAA,aAAA,KAC1B,eAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAA,kBAAA;AAAA,MACrB,CAAC,YAAY,OAAQ,CAAA,cAAA;AAAA,KACvB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,KAAK,MAAO,CAAA,CAAC,EAAE,KAAM,EAAA,KAAM,CAAC,cAAA,CAAe,KAAM,CAAA,CAAA,CAAA;AAEjE,IAAA,IAAI,CAAC,aAAA;AAAe,MAAO,OAAA,IAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,UAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,SAAG,CAAA;AAAA,OACtD,CAAA;AAAA,MAEF,KAAM,EAAA,MAAA;AAAA,MACN,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA,OAAA;AAAA,MACR,QAAU,EAAA,IAAA;AAAA,MACT,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"OverflowMenu.js","sources":["../src/tabs-next/OverflowMenu.tsx"],"sourcesContent":["import { Button, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { useOverflowContext, useOverflowMenu } from \"@fluentui/react-overflow\";\nimport { Dropdown, type DropdownProps } from \"../dropdown\";\n\ntype TabValue = {\n value: string;\n label: ReactNode;\n};\n\nexport interface OverflowMenuProps extends DropdownProps<TabValue> {\n tabs: TabValue[];\n}\n\nexport const OverflowMenu = forwardRef<HTMLDivElement, OverflowMenuProps>(\n function OverflowMenu(props, forwardedRef) {\n const { tabs, ...rest } = props;\n const { ref, overflowCount, isOverflowing } =\n useOverflowMenu<HTMLDivElement>();\n const { OverflowIcon } = useIcon();\n const handleRef = useForkRef(ref, forwardedRef);\n const itemVisibility = useOverflowContext(\n (context) => context.itemVisibility,\n );\n\n const tabList = tabs.filter(({ value }) => !itemVisibility[value]);\n\n if (!isOverflowing) return null;\n\n return (\n <Dropdown<TabValue>\n aria-label={`${overflowCount} more tabs`}\n triggerComponent={\n <Button aria-label=\"More tabs\" variant=\"secondary\" role=\"combobox\">\n <OverflowIcon aria-hidden style={{ margin: 0 }} />\n </Button>\n }\n width=\"auto\"\n ref={handleRef}\n source={tabList}\n selected={null}\n {...rest}\n />\n );\n },\n);\n"],"names":["OverflowMenu"],"mappings":";;;;;;;;;;AAeO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,YAAc,EAAA;AACzC,IAAM,MAAA,EAAE,IAAS,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1B,IAAA,MAAM,EAAE,GAAA,EAAK,aAAe,EAAA,aAAA,KAC1B,eAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA,CAAA;AACjC,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAA,kBAAA;AAAA,MACrB,CAAC,YAAY,OAAQ,CAAA,cAAA;AAAA,KACvB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,KAAK,MAAO,CAAA,CAAC,EAAE,KAAM,EAAA,KAAM,CAAC,cAAA,CAAe,KAAM,CAAA,CAAA,CAAA;AAEjE,IAAA,IAAI,CAAC,aAAA;AAAe,MAAO,OAAA,IAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,UAAa,aAAW,EAAA,IAAA;AAAA,UAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,SAAG,CAAA;AAAA,OAClD,CAAA;AAAA,MAEF,KAAM,EAAA,MAAA;AAAA,MACN,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA,OAAA;AAAA,MACR,QAAU,EAAA,IAAA;AAAA,MACT,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}