@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.
- package/css/salt-lab.css +279 -38
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -2
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
- package/dist-cjs/calendar/Calendar.js +55 -26
- package/dist-cjs/calendar/Calendar.js.map +1 -1
- package/dist-cjs/calendar/CalendarDateGrid.css.js +6 -0
- package/dist-cjs/calendar/CalendarDateGrid.css.js.map +1 -0
- package/dist-cjs/calendar/{internal/CalendarCarousel.js → CalendarDateGrid.js} +37 -14
- package/dist-cjs/calendar/CalendarDateGrid.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.js +7 -5
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/{internal/CalendarWeekHeader.js → CalendarWeekHeader.js} +4 -3
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -0
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/useCalendar.js +2 -4
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarSelection.js +16 -43
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- package/dist-cjs/carousel/Carousel.js +5 -5
- package/dist-cjs/carousel/Carousel.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.js +2 -2
- package/dist-cjs/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-cjs/contact-details/ContactMetadata.js +2 -2
- package/dist-cjs/contact-details/ContactMetadata.js.map +1 -1
- package/dist-cjs/date-input/DateInputRange.js +2 -0
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- package/dist-cjs/date-input/DateInputSingle.js +2 -0
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
- package/dist-cjs/date-picker/DatePicker.js +40 -5
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerActions.js +7 -3
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +5 -4
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangePanel.js +33 -9
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +5 -4
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +19 -5
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-cjs/date-picker/useDatePicker.js +91 -63
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
- package/dist-cjs/dropdown/DropdownButton.js +4 -2
- package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
- package/dist-cjs/index.js +10 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/menu-button/MenuButtonTrigger.js +2 -2
- package/dist-cjs/menu-button/MenuButtonTrigger.js.map +1 -1
- package/dist-cjs/query-input/internal/CategoryListItem.js +2 -2
- package/dist-cjs/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-cjs/query-input/internal/ValueList.js +2 -2
- package/dist-cjs/query-input/internal/ValueList.js.map +1 -1
- package/dist-cjs/search-input/SearchInput.js +2 -1
- package/dist-cjs/search-input/SearchInput.js.map +1 -1
- package/dist-cjs/static-list/StaticList.css.js +6 -0
- package/dist-cjs/static-list/StaticList.css.js.map +1 -0
- package/dist-cjs/static-list/StaticList.js +32 -0
- package/dist-cjs/static-list/StaticList.js.map +1 -0
- package/dist-cjs/static-list/StaticListItem.css.js +6 -0
- package/dist-cjs/static-list/StaticListItem.css.js.map +1 -0
- package/dist-cjs/static-list/StaticListItem.js +33 -0
- package/dist-cjs/static-list/StaticListItem.js.map +1 -0
- package/dist-cjs/static-list/StaticListItemContent.css.js +6 -0
- package/dist-cjs/static-list/StaticListItemContent.css.js.map +1 -0
- package/dist-cjs/static-list/StaticListItemContent.js +30 -0
- package/dist-cjs/static-list/StaticListItemContent.js.map +1 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +8 -8
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
- package/dist-cjs/stepper-input/StepperInput.css.js +1 -1
- package/dist-cjs/stepper-input/StepperInput.js +214 -29
- package/dist-cjs/stepper-input/StepperInput.js.map +1 -1
- package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js +54 -0
- package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-cjs/stepper-input/internal/utils.js +43 -0
- package/dist-cjs/stepper-input/internal/utils.js.map +1 -0
- package/dist-cjs/stepper-input/useStepperInput.js +88 -172
- package/dist-cjs/stepper-input/useStepperInput.js.map +1 -1
- package/dist-cjs/tabs/Tab.js +14 -12
- package/dist-cjs/tabs/Tab.js.map +1 -1
- package/dist-cjs/tabs/Tabstrip.js +2 -1
- package/dist-cjs/tabs/Tabstrip.js.map +1 -1
- package/dist-cjs/tabs-next/OverflowMenu.js +2 -2
- package/dist-cjs/tabs-next/OverflowMenu.js.map +1 -1
- package/dist-cjs/tokenized-input/TokenizedInputBase.js +3 -3
- package/dist-cjs/tokenized-input/TokenizedInputBase.js.map +1 -1
- package/dist-cjs/tokenized-input/internal/InputPill.js +2 -2
- package/dist-cjs/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +3 -3
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-cjs/tokenized-input-next/internal/InputPill.js +2 -2
- package/dist-cjs/tokenized-input-next/internal/InputPill.js.map +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +2 -2
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -2
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
- package/dist-es/calendar/Calendar.js +57 -28
- package/dist-es/calendar/Calendar.js.map +1 -1
- package/dist-es/calendar/CalendarDateGrid.css.js +4 -0
- package/dist-es/calendar/CalendarDateGrid.css.js.map +1 -0
- package/dist-es/calendar/{internal/CalendarCarousel.js → CalendarDateGrid.js} +37 -14
- package/dist-es/calendar/CalendarDateGrid.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.js +8 -6
- package/dist-es/calendar/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/{internal/CalendarWeekHeader.js → CalendarWeekHeader.js} +4 -3
- package/dist-es/calendar/CalendarWeekHeader.js.map +1 -0
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/useCalendar.js +2 -4
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js +16 -43
- package/dist-es/calendar/useCalendarSelection.js.map +1 -1
- package/dist-es/carousel/Carousel.js +6 -6
- package/dist-es/carousel/Carousel.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuItem.js +3 -3
- package/dist-es/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-es/contact-details/ContactMetadata.js +3 -3
- package/dist-es/contact-details/ContactMetadata.js.map +1 -1
- package/dist-es/date-input/DateInputRange.js +2 -0
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- package/dist-es/date-input/DateInputSingle.js +2 -0
- package/dist-es/date-input/DateInputSingle.js.map +1 -1
- package/dist-es/date-picker/DatePicker.js +40 -5
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerActions.js +7 -3
- package/dist-es/date-picker/DatePickerActions.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +5 -4
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangePanel.js +33 -9
- package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +5 -4
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSinglePanel.js +19 -5
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-es/date-picker/useDatePicker.js +92 -64
- package/dist-es/date-picker/useDatePicker.js.map +1 -1
- package/dist-es/dropdown/DropdownButton.js +6 -4
- package/dist-es/dropdown/DropdownButton.js.map +1 -1
- package/dist-es/index.js +5 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/menu-button/MenuButtonTrigger.js +3 -3
- package/dist-es/menu-button/MenuButtonTrigger.js.map +1 -1
- package/dist-es/query-input/internal/CategoryListItem.js +3 -3
- package/dist-es/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-es/query-input/internal/ValueList.js +3 -3
- package/dist-es/query-input/internal/ValueList.js.map +1 -1
- package/dist-es/search-input/SearchInput.js +3 -2
- package/dist-es/search-input/SearchInput.js.map +1 -1
- package/dist-es/static-list/StaticList.css.js +4 -0
- package/dist-es/static-list/StaticList.css.js.map +1 -0
- package/dist-es/static-list/StaticList.js +28 -0
- package/dist-es/static-list/StaticList.js.map +1 -0
- package/dist-es/static-list/StaticListItem.css.js +4 -0
- package/dist-es/static-list/StaticListItem.css.js.map +1 -0
- package/dist-es/static-list/StaticListItem.js +29 -0
- package/dist-es/static-list/StaticListItem.js.map +1 -0
- package/dist-es/static-list/StaticListItemContent.css.js +4 -0
- package/dist-es/static-list/StaticListItemContent.css.js.map +1 -0
- package/dist-es/static-list/StaticListItemContent.js +26 -0
- package/dist-es/static-list/StaticListItemContent.js.map +1 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +9 -9
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
- package/dist-es/stepper-input/StepperInput.css.js +1 -1
- package/dist-es/stepper-input/StepperInput.js +216 -31
- package/dist-es/stepper-input/StepperInput.js.map +1 -1
- package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js +50 -0
- package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-es/stepper-input/internal/utils.js +32 -0
- package/dist-es/stepper-input/internal/utils.js.map +1 -0
- package/dist-es/stepper-input/useStepperInput.js +88 -172
- package/dist-es/stepper-input/useStepperInput.js.map +1 -1
- package/dist-es/tabs/Tab.js +15 -13
- package/dist-es/tabs/Tab.js.map +1 -1
- package/dist-es/tabs/Tabstrip.js +4 -3
- package/dist-es/tabs/Tabstrip.js.map +1 -1
- package/dist-es/tabs-next/OverflowMenu.js +3 -3
- package/dist-es/tabs-next/OverflowMenu.js.map +1 -1
- package/dist-es/tokenized-input/TokenizedInputBase.js +3 -3
- package/dist-es/tokenized-input/TokenizedInputBase.js.map +1 -1
- package/dist-es/tokenized-input/internal/InputPill.js +2 -2
- package/dist-es/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.js +3 -3
- package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-es/tokenized-input-next/internal/InputPill.js +2 -2
- package/dist-es/tokenized-input-next/internal/InputPill.js.map +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js +3 -3
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-types/calendar/Calendar.d.ts +2 -15
- package/dist-types/calendar/CalendarDateGrid.d.ts +10 -0
- package/dist-types/calendar/{internal/CalendarWeekHeader.d.ts → CalendarWeekHeader.d.ts} +1 -1
- package/dist-types/calendar/index.d.ts +2 -0
- package/dist-types/calendar/internal/CalendarMonth.d.ts +9 -1
- package/dist-types/calendar/useCalendarSelection.d.ts +0 -7
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +17 -1
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +9 -1
- package/dist-types/index.d.ts +1 -0
- package/dist-types/static-list/StaticList.d.ts +8 -0
- package/dist-types/static-list/StaticListItem.d.ts +4 -0
- package/dist-types/static-list/StaticListItemContent.d.ts +8 -0
- package/dist-types/static-list/index.d.ts +3 -0
- package/dist-types/stepper-input/StepperInput.d.ts +66 -19
- package/dist-types/stepper-input/internal/useActivateWhileMouseDown.d.ts +5 -0
- package/dist-types/stepper-input/internal/utils.d.ts +8 -0
- package/dist-types/stepper-input/useStepperInput.d.ts +21 -8
- package/package.json +2 -2
- package/dist-cjs/calendar/internal/CalendarCarousel.css.js +0 -6
- package/dist-cjs/calendar/internal/CalendarCarousel.css.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarCarousel.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarWeekHeader.js.map +0 -1
- package/dist-cjs/stepper-input/internal/useSpinner.js +0 -33
- package/dist-cjs/stepper-input/internal/useSpinner.js.map +0 -1
- package/dist-es/calendar/internal/CalendarCarousel.css.js +0 -4
- package/dist-es/calendar/internal/CalendarCarousel.css.js.map +0 -1
- package/dist-es/calendar/internal/CalendarCarousel.js.map +0 -1
- package/dist-es/calendar/internal/CalendarWeekHeader.js.map +0 -1
- package/dist-es/stepper-input/internal/useSpinner.js +0 -29
- package/dist-es/stepper-input/internal/useSpinner.js.map +0 -1
- package/dist-types/calendar/internal/CalendarCarousel.d.ts +0 -3
- package/dist-types/stepper-input/internal/useSpinner.d.ts +0 -5
- /package/dist-cjs/calendar/{internal/CalendarWeekHeader.css.js → CalendarWeekHeader.css.js} +0 -0
- /package/dist-cjs/calendar/{internal/CalendarWeekHeader.css.js.map → CalendarWeekHeader.css.js.map} +0 -0
- /package/dist-es/calendar/{internal/CalendarWeekHeader.css.js → CalendarWeekHeader.css.js} +0 -0
- /package/dist-es/calendar/{internal/CalendarWeekHeader.css.js.map → CalendarWeekHeader.css.js.map} +0 -0
|
@@ -1,185 +1,101 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
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
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
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
|
|
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
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
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
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
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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"}
|
package/dist-es/tabs/Tab.js
CHANGED
|
@@ -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) =>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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("
|
|
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,
|
package/dist-es/tabs/Tab.js.map
CHANGED
|
@@ -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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"}
|
package/dist-es/tabs/Tabstrip.js
CHANGED
|
@@ -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 {
|
|
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(
|
|
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(
|
|
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 {
|
|
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;;;;"}
|