@salt-ds/lab 1.0.0-alpha.44 → 1.0.0-alpha.45
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 +32 -84
- package/dist-cjs/calendar/internal/CalendarDay.js +5 -1
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarNavigation.js +2 -6
- package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/useCalendar.js +4 -4
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useSelection.js +4 -0
- package/dist-cjs/calendar/useSelection.js.map +1 -1
- package/dist-cjs/contact-details/ContactPrimaryInfo.js.map +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-input/DateInput.js +196 -49
- package/dist-cjs/date-input/DateInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePicker.js +164 -0
- package/dist-cjs/date-picker/DatePicker.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerContext.js +36 -0
- package/dist-cjs/date-picker/DatePickerContext.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerPanel.css.js +6 -0
- package/dist-cjs/date-picker/DatePickerPanel.css.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerPanel.js +139 -0
- package/dist-cjs/date-picker/DatePickerPanel.js.map +1 -0
- package/dist-cjs/index.js +3 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
- package/dist-cjs/stepper-input/StepperInput.css.js +1 -1
- package/dist-cjs/stepper-input/StepperInput.js +25 -74
- package/dist-cjs/stepper-input/StepperInput.js.map +1 -1
- package/dist-cjs/stepper-input/useStepperInput.js +19 -63
- package/dist-cjs/stepper-input/useStepperInput.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.js +5 -1
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-es/calendar/internal/CalendarNavigation.js +3 -7
- package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/useCalendar.js +5 -5
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useSelection.js +4 -1
- package/dist-es/calendar/useSelection.js.map +1 -1
- package/dist-es/contact-details/ContactPrimaryInfo.js.map +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-input/DateInput.js +200 -53
- package/dist-es/date-input/DateInput.js.map +1 -1
- package/dist-es/date-picker/DatePicker.js +160 -0
- package/dist-es/date-picker/DatePicker.js.map +1 -0
- package/dist-es/date-picker/DatePickerContext.js +31 -0
- package/dist-es/date-picker/DatePickerContext.js.map +1 -0
- package/dist-es/date-picker/DatePickerPanel.css.js +4 -0
- package/dist-es/date-picker/DatePickerPanel.css.js.map +1 -0
- package/dist-es/date-picker/DatePickerPanel.js +135 -0
- package/dist-es/date-picker/DatePickerPanel.js.map +1 -0
- package/dist-es/index.js +2 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
- package/dist-es/stepper-input/StepperInput.css.js +1 -1
- package/dist-es/stepper-input/StepperInput.js +27 -76
- package/dist-es/stepper-input/StepperInput.js.map +1 -1
- package/dist-es/stepper-input/useStepperInput.js +19 -63
- package/dist-es/stepper-input/useStepperInput.js.map +1 -1
- package/dist-types/breadcrumbs/internal/BreadcrumbsCollapsed.d.ts +1 -1
- package/dist-types/breadcrumbs/internal/BreadcrumbsSeparator.d.ts +1 -1
- package/dist-types/button-bar/internal/DescendantContext.d.ts +1 -1
- package/dist-types/calendar/useSelection.d.ts +1 -0
- package/dist-types/combo-box-deprecated/internal/MultiSelectComboBox.d.ts +1 -1
- package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +54 -60
- package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +165 -182
- package/dist-types/common-hooks/collectionProvider.d.ts +1 -1
- package/dist-types/contact-details/MailLinkComponent.d.ts +1 -1
- package/dist-types/date-input/DateInput.d.ts +21 -7
- package/dist-types/date-picker/DatePicker.d.ts +55 -0
- package/dist-types/date-picker/DatePickerContext.d.ts +23 -0
- package/dist-types/date-picker/DatePickerPanel.d.ts +8 -0
- package/dist-types/date-picker/index.d.ts +1 -0
- package/dist-types/form-field-legacy/FormActivationIndicator.d.ts +1 -1
- package/dist-types/form-field-legacy/FormHelperText.d.ts +1 -1
- package/dist-types/form-field-legacy/FormLabel.d.ts +1 -1
- package/dist-types/form-field-legacy/NecessityIndicator.d.ts +1 -1
- package/dist-types/form-field-legacy/StatusIndicator.d.ts +1 -1
- package/dist-types/index.d.ts +1 -0
- package/dist-types/list-deprecated/internal/DescendantContext.d.ts +1 -1
- package/dist-types/list-deprecated/internal/Highlighter.d.ts +1 -1
- package/dist-types/query-input/internal/CategoryList.d.ts +1 -1
- package/dist-types/query-input/internal/SearchList.d.ts +1 -1
- package/dist-types/query-input/internal/ValueList.d.ts +1 -1
- package/dist-types/query-input/internal/ValueSelector.d.ts +1 -1
- package/dist-types/responsive/overflowUtils.d.ts +1 -1
- package/dist-types/slider/internal/SliderMarkLabels.d.ts +1 -1
- package/dist-types/slider/internal/SliderRail.d.ts +1 -1
- package/dist-types/slider/internal/SliderRailMarks.d.ts +1 -1
- package/dist-types/slider/internal/SliderSelection.d.ts +1 -1
- package/dist-types/stepped-tracker/SteppedTrackerContext.d.ts +2 -2
- package/dist-types/stepped-tracker/TrackerConnector/TrackerConnector.d.ts +1 -1
- package/dist-types/stepper-input/StepperInput.d.ts +43 -12
- package/dist-types/stepper-input/useStepperInput.d.ts +7 -293
- package/dist-types/tabs/TabActivationIndicator.d.ts +1 -1
- package/dist-types/toolbar/Tooltray.d.ts +1 -1
- package/dist-types/tree/TreeNode.d.ts +1 -1
- package/package.json +2 -2
- package/dist-cjs/stepper-input/internal/useActivationIndicatorPosition.js +0 -38
- package/dist-cjs/stepper-input/internal/useActivationIndicatorPosition.js.map +0 -1
- package/dist-cjs/stepper-input/internal/useDynamicAriaLabel.js +0 -76
- package/dist-cjs/stepper-input/internal/useDynamicAriaLabel.js.map +0 -1
- package/dist-es/stepper-input/internal/useActivationIndicatorPosition.js +0 -34
- package/dist-es/stepper-input/internal/useActivationIndicatorPosition.js.map +0 -1
- package/dist-es/stepper-input/internal/useDynamicAriaLabel.js +0 -72
- package/dist-es/stepper-input/internal/useDynamicAriaLabel.js.map +0 -1
- package/dist-types/stepper-input/internal/useActivationIndicatorPosition.d.ts +0 -2
- package/dist-types/stepper-input/internal/useDynamicAriaLabel.d.ts +0 -3
|
@@ -10,44 +10,90 @@ var window = require('@salt-ds/window');
|
|
|
10
10
|
var DateInput$1 = require('./DateInput.css.js');
|
|
11
11
|
var core = require('@salt-ds/core');
|
|
12
12
|
var date = require('@internationalized/date');
|
|
13
|
+
var DatePickerContext = require('../date-picker/DatePickerContext.js');
|
|
13
14
|
|
|
14
15
|
const withBaseName = core.makePrefixer("saltDateInput");
|
|
15
16
|
const isInvalidDate = (value) => value && isNaN(new Date(value));
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
const createDate = (date) => {
|
|
18
|
+
if (!date || isInvalidDate(date)) {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
return new Date(date);
|
|
22
|
+
};
|
|
23
|
+
const getIsoDate = (date$1) => {
|
|
24
|
+
try {
|
|
25
|
+
return date.parseAbsoluteToLocal(date$1 == null ? void 0 : date$1.toISOString());
|
|
26
|
+
} catch (err) {
|
|
27
|
+
return void 0;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
function getCalendarDate(inputDate) {
|
|
31
|
+
const date$1 = createDate(inputDate);
|
|
32
|
+
if (!date$1)
|
|
33
|
+
return void 0;
|
|
34
|
+
const isoDate = getIsoDate(date$1);
|
|
35
|
+
return isoDate && new date.CalendarDate(isoDate.year, isoDate.month, isoDate.day);
|
|
36
|
+
}
|
|
37
|
+
const getDateValidationStatus = (value) => value && isInvalidDate(value) ? "error" : void 0;
|
|
38
|
+
const defaultDateFormatter = (date$1) => {
|
|
39
|
+
return date$1 ? new date.DateFormatter("EN-GB", {
|
|
19
40
|
day: "2-digit",
|
|
20
41
|
month: "short",
|
|
21
42
|
year: "numeric"
|
|
22
|
-
}).format(date$1);
|
|
43
|
+
}).format(date$1.toDate(date.getLocalTimeZone())) : "";
|
|
23
44
|
};
|
|
24
45
|
const DateInput = React.forwardRef(
|
|
25
46
|
function DateInput2({
|
|
26
|
-
"aria-activedescendant": ariaActiveDescendant,
|
|
27
|
-
"aria-expanded": ariaExpanded,
|
|
28
|
-
"aria-owns": ariaOwns,
|
|
29
47
|
className,
|
|
48
|
+
ariaLabel,
|
|
30
49
|
disabled,
|
|
50
|
+
selectionVariant: selectionVariantProp,
|
|
31
51
|
emptyReadOnlyMarker = "\u2014",
|
|
32
52
|
inputProps = {},
|
|
33
|
-
|
|
53
|
+
endAdornment,
|
|
34
54
|
readOnly: readOnlyProp,
|
|
35
|
-
role,
|
|
36
|
-
value: valueProp,
|
|
37
|
-
defaultValue: defaultStartDateProp = valueProp === void 0 ? "" : void 0,
|
|
38
55
|
validationStatus: validationStatusProp,
|
|
39
56
|
variant = "primary",
|
|
40
57
|
dateFormatter = defaultDateFormatter,
|
|
41
58
|
placeholder = "dd mmm yyyy",
|
|
59
|
+
startInputRef,
|
|
60
|
+
endInputRef,
|
|
42
61
|
...rest
|
|
43
62
|
}, ref) {
|
|
44
63
|
var _a;
|
|
64
|
+
const wrapperRef = React.useRef(null);
|
|
65
|
+
const inputRef = core.useForkRef(ref, wrapperRef);
|
|
66
|
+
const inputStringFormatter = (input) => {
|
|
67
|
+
const date = getCalendarDate(input);
|
|
68
|
+
return !input || !date ? input : dateFormatter(date);
|
|
69
|
+
};
|
|
45
70
|
const targetWindow = window.useWindow();
|
|
46
71
|
styles.useComponentCssInjection({
|
|
47
72
|
testId: "salt-dateInput",
|
|
48
73
|
css: DateInput$1,
|
|
49
74
|
window: targetWindow
|
|
50
75
|
});
|
|
76
|
+
const {
|
|
77
|
+
startDate,
|
|
78
|
+
endDate,
|
|
79
|
+
setStartDate,
|
|
80
|
+
setEndDate,
|
|
81
|
+
selectionVariant: pickerSelectionVariant,
|
|
82
|
+
openState,
|
|
83
|
+
setOpen,
|
|
84
|
+
validationStatusState,
|
|
85
|
+
setValidationStatus
|
|
86
|
+
} = DatePickerContext.useDatePickerContext();
|
|
87
|
+
const selectionVariant = selectionVariantProp != null ? selectionVariantProp : pickerSelectionVariant;
|
|
88
|
+
const endDateInputID = core.useId();
|
|
89
|
+
const startDateInputID = core.useId();
|
|
90
|
+
const [focused, setFocused] = React.useState(false);
|
|
91
|
+
const [startDateStringValue, setStartDateStringValue] = React.useState(
|
|
92
|
+
dateFormatter(startDate)
|
|
93
|
+
);
|
|
94
|
+
const [endDateStringValue, setEndDateStringValue] = React.useState(
|
|
95
|
+
dateFormatter(endDate)
|
|
96
|
+
);
|
|
51
97
|
const {
|
|
52
98
|
a11yProps: {
|
|
53
99
|
"aria-describedby": formFieldDescribedBy,
|
|
@@ -58,27 +104,9 @@ const DateInput = React.forwardRef(
|
|
|
58
104
|
necessity: formFieldRequired,
|
|
59
105
|
validationStatus: formFieldValidationStatus
|
|
60
106
|
} = core.useFormFieldProps();
|
|
61
|
-
const restA11yProps = {
|
|
62
|
-
"aria-activedescendant": ariaActiveDescendant,
|
|
63
|
-
"aria-expanded": ariaExpanded,
|
|
64
|
-
"aria-owns": ariaOwns
|
|
65
|
-
};
|
|
66
107
|
const isReadOnly = readOnlyProp || formFieldReadOnly;
|
|
67
|
-
const isEmptyReadOnly = isReadOnly && !defaultStartDateProp && !valueProp;
|
|
68
|
-
const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultStartDateProp;
|
|
69
|
-
const [value, setValue] = core.useControlled({
|
|
70
|
-
controlled: valueProp,
|
|
71
|
-
default: defaultValue,
|
|
72
|
-
name: "DateInput",
|
|
73
|
-
state: "value"
|
|
74
|
-
});
|
|
75
|
-
const getDateValidationStatus = (value2) => isInvalidDate(value2) ? "error" : void 0;
|
|
76
|
-
const [dateStatus, setDateStatus] = React.useState(
|
|
77
|
-
getDateValidationStatus(value)
|
|
78
|
-
);
|
|
79
108
|
const isDisabled = disabled || formFieldDisabled;
|
|
80
|
-
const validationStatus = (_a =
|
|
81
|
-
const [focused, setFocused] = React.useState(false);
|
|
109
|
+
const validationStatus = (_a = validationStatusState != null ? validationStatusState : formFieldValidationStatus) != null ? _a : validationStatusProp;
|
|
82
110
|
const {
|
|
83
111
|
"aria-describedby": dateInputDescribedBy,
|
|
84
112
|
"aria-labelledby": dateInputLabelledBy,
|
|
@@ -88,25 +116,92 @@ const DateInput = React.forwardRef(
|
|
|
88
116
|
required: dateInputPropsRequired,
|
|
89
117
|
...restDateInputProps
|
|
90
118
|
} = inputProps;
|
|
119
|
+
const validateRange = React.useCallback(() => {
|
|
120
|
+
if (startDate && endDate) {
|
|
121
|
+
setValidationStatus(
|
|
122
|
+
(startDate == null ? void 0 : startDate.compare(endDate)) >= 1 ? "error" : void 0
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
}, [endDate, startDate, setValidationStatus]);
|
|
126
|
+
React.useEffect(() => {
|
|
127
|
+
setStartDateStringValue(dateFormatter(startDate));
|
|
128
|
+
validateRange();
|
|
129
|
+
}, [startDate, dateFormatter, validateRange]);
|
|
130
|
+
React.useEffect(() => {
|
|
131
|
+
setEndDateStringValue(dateFormatter(endDate));
|
|
132
|
+
validateRange();
|
|
133
|
+
}, [endDate, dateFormatter, validateRange]);
|
|
91
134
|
const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : dateInputPropsRequired;
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
|
|
135
|
+
const updateStartDate = (dateString) => {
|
|
136
|
+
var _a2, _b;
|
|
137
|
+
if (!dateString)
|
|
138
|
+
setStartDate(void 0);
|
|
139
|
+
const inputDate = inputStringFormatter(dateString);
|
|
140
|
+
const calendarDate = getCalendarDate(inputDate);
|
|
141
|
+
const emptyDateStatus = !calendarDate && inputDate ? "error" : void 0;
|
|
142
|
+
setValidationStatus(
|
|
143
|
+
(_b = (_a2 = getDateValidationStatus(dateString)) != null ? _a2 : getDateValidationStatus(endDateStringValue)) != null ? _b : emptyDateStatus
|
|
144
|
+
);
|
|
145
|
+
if (calendarDate) {
|
|
146
|
+
setStartDate(calendarDate);
|
|
147
|
+
}
|
|
95
148
|
};
|
|
96
|
-
const
|
|
97
|
-
|
|
98
|
-
|
|
149
|
+
const updateEndDate = (dateString) => {
|
|
150
|
+
var _a2, _b;
|
|
151
|
+
if (!dateString)
|
|
152
|
+
setEndDate(void 0);
|
|
153
|
+
const inputDate = inputStringFormatter(dateString);
|
|
154
|
+
const calendarDate = getCalendarDate(inputDate);
|
|
155
|
+
const emptyDateStatus = !calendarDate && inputDate ? "error" : void 0;
|
|
156
|
+
setValidationStatus(
|
|
157
|
+
(_b = (_a2 = getDateValidationStatus(dateString)) != null ? _a2 : getDateValidationStatus(startDateStringValue)) != null ? _b : emptyDateStatus
|
|
158
|
+
);
|
|
159
|
+
if (calendarDate) {
|
|
160
|
+
setEndDate(calendarDate);
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
const handleFocus = (event) => {
|
|
164
|
+
onFocus == null ? void 0 : onFocus(event);
|
|
165
|
+
setFocused(true);
|
|
99
166
|
};
|
|
100
167
|
const handleStartDateBlur = (event) => {
|
|
101
|
-
|
|
102
|
-
|
|
168
|
+
updateStartDate(event.target.value);
|
|
169
|
+
setFocused(false);
|
|
103
170
|
onBlur == null ? void 0 : onBlur(event);
|
|
104
|
-
|
|
171
|
+
};
|
|
172
|
+
const handleStartDateChange = (event) => {
|
|
173
|
+
setStartDateStringValue(event.target.value);
|
|
174
|
+
onChange == null ? void 0 : onChange(event);
|
|
175
|
+
};
|
|
176
|
+
const handleStartDateKeyDown = (event) => {
|
|
177
|
+
if (event.key === "Enter") {
|
|
178
|
+
updateStartDate(startDateStringValue);
|
|
179
|
+
setOpen(false);
|
|
180
|
+
}
|
|
181
|
+
if (event.key === "Tab" && event.shiftKey && openState) {
|
|
182
|
+
setOpen(false);
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
const handleEndDateBlur = (event) => {
|
|
186
|
+
updateEndDate(event.target.value);
|
|
105
187
|
setFocused(false);
|
|
188
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
106
189
|
};
|
|
107
|
-
const
|
|
108
|
-
|
|
109
|
-
|
|
190
|
+
const handleEndDateChange = (event) => {
|
|
191
|
+
setEndDateStringValue(event.target.value);
|
|
192
|
+
onChange == null ? void 0 : onChange(event);
|
|
193
|
+
};
|
|
194
|
+
const handleEndDateKeyDown = (event) => {
|
|
195
|
+
if (event.key === "Enter") {
|
|
196
|
+
updateEndDate(endDateStringValue);
|
|
197
|
+
setOpen(false);
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
const handleInputClick = (event) => {
|
|
201
|
+
var _a2;
|
|
202
|
+
if (event.target === wrapperRef.current) {
|
|
203
|
+
(_a2 = startInputRef == null ? void 0 : startInputRef.current) == null ? void 0 : _a2.focus();
|
|
204
|
+
}
|
|
110
205
|
};
|
|
111
206
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
112
207
|
className: clsx.clsx(
|
|
@@ -120,27 +215,79 @@ const DateInput = React.forwardRef(
|
|
|
120
215
|
},
|
|
121
216
|
className
|
|
122
217
|
),
|
|
123
|
-
|
|
218
|
+
onClick: (event) => handleInputClick(event),
|
|
219
|
+
ref: inputRef,
|
|
124
220
|
...rest,
|
|
125
221
|
children: [
|
|
126
222
|
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
223
|
+
autoComplete: "off",
|
|
127
224
|
"aria-describedby": clsx.clsx(formFieldDescribedBy, dateInputDescribedBy),
|
|
128
|
-
"aria-labelledby": clsx.clsx(
|
|
129
|
-
|
|
225
|
+
"aria-labelledby": clsx.clsx(
|
|
226
|
+
formFieldLabelledBy,
|
|
227
|
+
dateInputLabelledBy,
|
|
228
|
+
startDateInputID
|
|
229
|
+
),
|
|
230
|
+
"aria-label": clsx.clsx("Start date", ariaLabel),
|
|
231
|
+
id: startDateInputID,
|
|
232
|
+
className: withBaseName("input"),
|
|
130
233
|
disabled: isDisabled,
|
|
131
234
|
readOnly: isReadOnly,
|
|
132
|
-
ref:
|
|
133
|
-
role,
|
|
235
|
+
ref: startInputRef,
|
|
134
236
|
tabIndex: isDisabled ? -1 : 0,
|
|
135
237
|
onBlur: handleStartDateBlur,
|
|
136
238
|
onChange: handleStartDateChange,
|
|
239
|
+
onKeyDown: handleStartDateKeyDown,
|
|
137
240
|
onFocus: !isDisabled ? handleFocus : void 0,
|
|
138
241
|
placeholder,
|
|
139
|
-
|
|
140
|
-
|
|
242
|
+
size: placeholder.length,
|
|
243
|
+
value: isReadOnly && !startDateStringValue ? emptyReadOnlyMarker : startDateStringValue,
|
|
141
244
|
...restDateInputProps,
|
|
142
245
|
required: isRequired
|
|
143
246
|
}),
|
|
247
|
+
selectionVariant === "range" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
248
|
+
children: [
|
|
249
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
250
|
+
children: "-"
|
|
251
|
+
}),
|
|
252
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
253
|
+
autoComplete: "off",
|
|
254
|
+
"aria-describedby": clsx.clsx(
|
|
255
|
+
formFieldDescribedBy,
|
|
256
|
+
dateInputDescribedBy
|
|
257
|
+
),
|
|
258
|
+
"aria-labelledby": clsx.clsx(
|
|
259
|
+
formFieldLabelledBy,
|
|
260
|
+
dateInputLabelledBy,
|
|
261
|
+
endDateInputID
|
|
262
|
+
),
|
|
263
|
+
"aria-label": clsx.clsx("End date", ariaLabel),
|
|
264
|
+
id: endDateInputID,
|
|
265
|
+
className: withBaseName("input"),
|
|
266
|
+
disabled: isDisabled,
|
|
267
|
+
readOnly: isReadOnly,
|
|
268
|
+
ref: endInputRef,
|
|
269
|
+
tabIndex: isDisabled ? -1 : 0,
|
|
270
|
+
onBlur: handleEndDateBlur,
|
|
271
|
+
onChange: handleEndDateChange,
|
|
272
|
+
onKeyDown: handleEndDateKeyDown,
|
|
273
|
+
onFocus: !isDisabled ? handleFocus : void 0,
|
|
274
|
+
placeholder,
|
|
275
|
+
size: placeholder.length,
|
|
276
|
+
value: isReadOnly && !endDateStringValue ? emptyReadOnlyMarker : endDateStringValue,
|
|
277
|
+
required: isRequired,
|
|
278
|
+
...restDateInputProps
|
|
279
|
+
})
|
|
280
|
+
]
|
|
281
|
+
}),
|
|
282
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
283
|
+
className: withBaseName("endAdornmentContainer"),
|
|
284
|
+
children: [
|
|
285
|
+
!isDisabled && !isReadOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(core.StatusAdornment, {
|
|
286
|
+
status: validationStatus
|
|
287
|
+
}),
|
|
288
|
+
endAdornment
|
|
289
|
+
]
|
|
290
|
+
}),
|
|
144
291
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
145
292
|
className: withBaseName("activationIndicator")
|
|
146
293
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.js","sources":["../src/date-input/DateInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n Ref,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dateInputCss from \"./DateInput.css\";\nimport { makePrefixer, useControlled, useFormFieldProps } from \"@salt-ds/core\";\nimport { DateFormatter } from \"@internationalized/date\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\n\nconst isInvalidDate = (value: string) =>\n // @ts-ignore evaluating validity of date\n value && isNaN(new Date(value));\n\nconst defaultDateFormatter = (input: string): string => {\n const date = new Date(input);\n\n return isInvalidDate(input)\n ? input\n : new DateFormatter(\"EN-GB\", {\n day: \"2-digit\",\n month: \"short\",\n year: \"numeric\",\n }).format(date);\n};\nexport interface DateInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only DateInput.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes) applied to the `input` elements.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the dateInput component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Function to format the input value.\n */\n dateFormatter?: (input: string) => string;\n}\n\nexport const DateInput = forwardRef<HTMLDivElement, DateInputProps>(\n function DateInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className,\n disabled,\n emptyReadOnlyMarker = \"—\",\n inputProps = {},\n inputRef,\n readOnly: readOnlyProp,\n role,\n value: valueProp,\n defaultValue: defaultStartDateProp = valueProp === undefined\n ? \"\"\n : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n dateFormatter = defaultDateFormatter,\n placeholder = \"dd mmm yyyy\",\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dateInput\",\n css: dateInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const isEmptyReadOnly = isReadOnly && !defaultStartDateProp && !valueProp;\n const defaultValue = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : defaultStartDateProp;\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DateInput\",\n state: \"value\",\n });\n\n const getDateValidationStatus = (value: string) =>\n isInvalidDate(value) ? \"error\" : undefined;\n\n const [dateStatus, setDateStatus] = useState<\"error\" | undefined>(\n getDateValidationStatus(value as string)\n );\n\n const isDisabled = disabled || formFieldDisabled;\n const validationStatus =\n dateStatus ?? formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": dateInputDescribedBy,\n \"aria-labelledby\": dateInputLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: dateInputPropsRequired,\n ...restDateInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : dateInputPropsRequired;\n\n const format = (date: string) => {\n const formattedDate = dateFormatter(date);\n setValue(formattedDate);\n };\n const handleStartDateChange = (event: ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n onChange?.(event);\n };\n\n const handleStartDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n const stringDate = value as string;\n value && format(stringDate);\n onBlur?.(event);\n setDateStatus(getDateValidationStatus(stringDate));\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, dateInputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={inputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleStartDateBlur}\n onChange={handleStartDateChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restDateInputProps}\n required={isRequired}\n />\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n }\n);\n"],"names":["makePrefixer","date","DateFormatter","forwardRef","DateInput","useWindow","useComponentCssInjection","dateInputCss","useFormFieldProps","useControlled","value","useState","jsxs","clsx","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateInput.js","sources":["../src/date-input/DateInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n KeyboardEvent,\n ReactNode,\n RefObject,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dateInputCss from \"./DateInput.css\";\nimport {\n makePrefixer,\n StatusAdornment,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport {\n CalendarDate,\n DateFormatter,\n DateValue,\n getLocalTimeZone,\n parseAbsoluteToLocal,\n} from \"@internationalized/date\";\nimport { useDatePickerContext } from \"../date-picker/DatePickerContext\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\nconst isInvalidDate = (value: string) =>\n // @ts-ignore evaluating validity of date\n value && isNaN(new Date(value));\nconst createDate = (date: string): Date | null => {\n if (!date || isInvalidDate(date)) {\n return null;\n }\n return new Date(date);\n};\n\nconst getIsoDate = (date: Date) => {\n try {\n return parseAbsoluteToLocal(date?.toISOString());\n } catch (err) {\n return undefined;\n }\n};\n\nfunction getCalendarDate(inputDate: string) {\n const date = createDate(inputDate);\n if (!date) return undefined;\n const isoDate = getIsoDate(date);\n return isoDate && new CalendarDate(isoDate.year, isoDate.month, isoDate.day);\n}\n\nconst getDateValidationStatus = (value: string | undefined) =>\n value && isInvalidDate(value) ? \"error\" : undefined;\n\nconst defaultDateFormatter = (date: DateValue | undefined): string => {\n return date\n ? new DateFormatter(\"EN-GB\", {\n day: \"2-digit\",\n month: \"short\",\n year: \"numeric\",\n }).format(date.toDate(getLocalTimeZone()))\n : \"\";\n};\n\nexport interface DateInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<ComponentPropsWithoutRef<\"input\">, \"disabled\" | \"placeholder\"> {\n ariaLabel?: string;\n /**\n * The marker to use in an empty read only DateInput.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes) applied to the `input` elements.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Function to format the input value.\n */\n dateFormatter?: (input: DateValue | undefined) => string;\n /**\n * Reference for the startInput;\n */\n startInputRef?: RefObject<HTMLInputElement>;\n /**\n * Reference for the endInput;\n */\n endInputRef?: RefObject<HTMLInputElement>;\n /**\n * Selection variant. Defaults to single select.\n */\n selectionVariant?: \"default\" | \"range\";\n}\n\nexport const DateInput = forwardRef<HTMLDivElement, DateInputProps>(\n function DateInput(\n {\n className,\n ariaLabel,\n disabled,\n selectionVariant: selectionVariantProp,\n emptyReadOnlyMarker = \"—\",\n inputProps = {},\n endAdornment,\n readOnly: readOnlyProp,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n dateFormatter = defaultDateFormatter,\n placeholder = \"dd mmm yyyy\",\n startInputRef,\n endInputRef,\n ...rest\n },\n ref\n ) {\n const wrapperRef = useRef(null);\n const inputRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n const inputStringFormatter = (input: string): string => {\n const date = getCalendarDate(input);\n return !input || !date ? input : dateFormatter(date);\n };\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dateInput\",\n css: dateInputCss,\n window: targetWindow,\n });\n\n const {\n startDate,\n endDate,\n setStartDate,\n setEndDate,\n selectionVariant: pickerSelectionVariant,\n openState,\n setOpen,\n validationStatusState,\n setValidationStatus,\n } = useDatePickerContext();\n\n const selectionVariant = selectionVariantProp ?? pickerSelectionVariant;\n\n const endDateInputID = useId();\n const startDateInputID = useId();\n\n const [focused, setFocused] = useState(false);\n const [startDateStringValue, setStartDateStringValue] = useState<string>(\n dateFormatter(startDate)\n );\n const [endDateStringValue, setEndDateStringValue] = useState<string>(\n dateFormatter(endDate)\n );\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const isDisabled = disabled || formFieldDisabled;\n\n const validationStatus =\n validationStatusState ??\n formFieldValidationStatus ??\n validationStatusProp;\n\n const {\n \"aria-describedby\": dateInputDescribedBy,\n \"aria-labelledby\": dateInputLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: dateInputPropsRequired,\n ...restDateInputProps\n } = inputProps;\n\n const validateRange = useCallback(() => {\n if (startDate && endDate) {\n setValidationStatus(\n startDate?.compare(endDate) >= 1 ? \"error\" : undefined\n );\n }\n }, [endDate, startDate, setValidationStatus]);\n\n // Effects. Update date strings when dates change\n useEffect(() => {\n setStartDateStringValue(dateFormatter(startDate));\n validateRange();\n }, [startDate, dateFormatter, validateRange]);\n\n useEffect(() => {\n setEndDateStringValue(dateFormatter(endDate));\n validateRange();\n }, [endDate, dateFormatter, validateRange]);\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : dateInputPropsRequired;\n const updateStartDate = (dateString: string) => {\n if (!dateString) setStartDate(undefined);\n const inputDate = inputStringFormatter(dateString);\n const calendarDate = getCalendarDate(inputDate);\n const emptyDateStatus = !calendarDate && inputDate ? \"error\" : undefined;\n setValidationStatus(\n getDateValidationStatus(dateString) ??\n getDateValidationStatus(endDateStringValue) ??\n emptyDateStatus\n );\n if (calendarDate) {\n setStartDate(calendarDate);\n }\n };\n\n const updateEndDate = (dateString: string) => {\n if (!dateString) setEndDate(undefined);\n const inputDate = inputStringFormatter(dateString);\n const calendarDate = getCalendarDate(inputDate);\n const emptyDateStatus = !calendarDate && inputDate ? \"error\" : undefined;\n setValidationStatus(\n getDateValidationStatus(dateString) ??\n getDateValidationStatus(startDateStringValue) ??\n emptyDateStatus\n );\n if (calendarDate) {\n setEndDate(calendarDate);\n }\n };\n\n // Handlers\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n const handleStartDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n updateStartDate(event.target.value);\n setFocused(false);\n onBlur?.(event);\n };\n\n const handleStartDateChange = (event: ChangeEvent<HTMLInputElement>) => {\n setStartDateStringValue(event.target.value);\n onChange?.(event);\n };\n\n const handleStartDateKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\") {\n updateStartDate(startDateStringValue);\n setOpen(false);\n }\n if (event.key === \"Tab\" && event.shiftKey && openState) {\n setOpen(false);\n }\n };\n\n const handleEndDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n updateEndDate(event.target.value);\n setFocused(false);\n onBlur?.(event);\n };\n const handleEndDateChange = (event: ChangeEvent<HTMLInputElement>) => {\n setEndDateStringValue(event.target.value);\n onChange?.(event);\n };\n const handleEndDateKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\") {\n updateEndDate(endDateStringValue);\n setOpen(false);\n }\n };\n\n const handleInputClick = (event: SyntheticEvent<HTMLDivElement>) => {\n if (event.target === wrapperRef.current) {\n startInputRef?.current?.focus();\n }\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className\n )}\n onClick={(event) => handleInputClick(event)}\n ref={inputRef}\n {...rest}\n >\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n dateInputLabelledBy,\n startDateInputID\n )}\n aria-label={clsx(\"Start date\", ariaLabel)}\n id={startDateInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={startInputRef}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleStartDateBlur}\n onChange={handleStartDateChange}\n onKeyDown={handleStartDateKeyDown}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n size={placeholder.length}\n value={\n isReadOnly && !startDateStringValue\n ? emptyReadOnlyMarker\n : startDateStringValue\n }\n {...restDateInputProps}\n required={isRequired}\n />\n {selectionVariant === \"range\" && (\n <>\n <span>-</span>\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(\n formFieldDescribedBy,\n dateInputDescribedBy\n )}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n dateInputLabelledBy,\n endDateInputID\n )}\n aria-label={clsx(\"End date\", ariaLabel)}\n id={endDateInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={endInputRef}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleEndDateBlur}\n onChange={handleEndDateChange}\n onKeyDown={handleEndDateKeyDown}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n size={placeholder.length}\n value={\n isReadOnly && !endDateStringValue\n ? emptyReadOnlyMarker\n : endDateStringValue\n }\n required={isRequired}\n {...restDateInputProps}\n />\n </>\n )}\n {\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment}\n </div>\n }\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n }\n);\n"],"names":["makePrefixer","date","parseAbsoluteToLocal","CalendarDate","DateFormatter","getLocalTimeZone","forwardRef","DateInput","useRef","useForkRef","useWindow","useComponentCssInjection","dateInputCss","useDatePickerContext","useId","useState","useFormFieldProps","useCallback","useEffect","_a","jsxs","clsx","jsx","Fragment","StatusAdornment"],"mappings":"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"}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var core = require('@salt-ds/core');
|
|
9
|
+
var DatePickerContext = require('./DatePickerContext.js');
|
|
10
|
+
var DatePickerPanel = require('./DatePickerPanel.js');
|
|
11
|
+
var react = require('@floating-ui/react');
|
|
12
|
+
var DateInput = require('../date-input/DateInput.js');
|
|
13
|
+
var date = require('@internationalized/date');
|
|
14
|
+
var icons = require('@salt-ds/icons');
|
|
15
|
+
require('../calendar/Calendar.js');
|
|
16
|
+
require('../calendar/internal/CalendarContext.js');
|
|
17
|
+
require('../calendar/internal/utils.js');
|
|
18
|
+
var useSelection = require('../calendar/useSelection.js');
|
|
19
|
+
|
|
20
|
+
const withBaseName = core.makePrefixer("saltDatePicker");
|
|
21
|
+
const DatePicker = React.forwardRef(
|
|
22
|
+
function DatePicker2({
|
|
23
|
+
selectionVariant = "default",
|
|
24
|
+
disabled = false,
|
|
25
|
+
placeholder = "dd mmm yyyy",
|
|
26
|
+
selectedDate: selectedDateProp,
|
|
27
|
+
defaultSelectedDate,
|
|
28
|
+
dateFormatter,
|
|
29
|
+
CalendarProps: CalendarProps2,
|
|
30
|
+
className,
|
|
31
|
+
open: openProp,
|
|
32
|
+
onOpenChange: onOpenChangeProp,
|
|
33
|
+
helperText,
|
|
34
|
+
readOnly: readOnlyProp,
|
|
35
|
+
inputAriaLabel,
|
|
36
|
+
...rest
|
|
37
|
+
}, ref) {
|
|
38
|
+
var _a;
|
|
39
|
+
const [open, setOpen] = core.useControlled({
|
|
40
|
+
controlled: openProp,
|
|
41
|
+
default: false,
|
|
42
|
+
name: "openPanel",
|
|
43
|
+
state: "openPanel"
|
|
44
|
+
});
|
|
45
|
+
const [startDate, setStartDate] = core.useControlled({
|
|
46
|
+
controlled: useSelection.isRangeOrOffsetSelectionWithStartDate(selectedDateProp) ? selectedDateProp.startDate : selectedDateProp,
|
|
47
|
+
default: useSelection.isRangeOrOffsetSelectionWithStartDate(defaultSelectedDate) ? defaultSelectedDate.startDate : defaultSelectedDate,
|
|
48
|
+
name: "StartDate",
|
|
49
|
+
state: "startDate"
|
|
50
|
+
});
|
|
51
|
+
const [endDate, setEndDate] = core.useControlled({
|
|
52
|
+
controlled: useSelection.isRangeOrOffsetSelectionWithStartDate(selectedDateProp) ? selectedDateProp.endDate : selectedDateProp,
|
|
53
|
+
default: useSelection.isRangeOrOffsetSelectionWithStartDate(defaultSelectedDate) ? defaultSelectedDate.endDate : void 0,
|
|
54
|
+
name: "EndDate",
|
|
55
|
+
state: "endDate"
|
|
56
|
+
});
|
|
57
|
+
const [validationStatusState, setValidationStatus] = React.useState(void 0);
|
|
58
|
+
const [startVisibleMonth, setStartVisibleMonth] = React.useState(startDate != null ? startDate : date.today(date.getLocalTimeZone()));
|
|
59
|
+
const [endVisibleMonth, setEndVisibleMonth] = React.useState(
|
|
60
|
+
(_a = endDate != null ? endDate : startDate == null ? void 0 : startDate.add({ months: 1 })) != null ? _a : date.today(date.getLocalTimeZone()).add({ months: 1 })
|
|
61
|
+
);
|
|
62
|
+
const onOpenChange = (newState) => {
|
|
63
|
+
var _a2;
|
|
64
|
+
setOpen(newState);
|
|
65
|
+
(_a2 = startInputRef == null ? void 0 : startInputRef.current) == null ? void 0 : _a2.focus();
|
|
66
|
+
onOpenChangeProp == null ? void 0 : onOpenChangeProp(newState);
|
|
67
|
+
};
|
|
68
|
+
const { x, y, strategy, elements, floating, reference, context } = core.useFloatingUI({
|
|
69
|
+
open,
|
|
70
|
+
onOpenChange,
|
|
71
|
+
placement: "bottom-start",
|
|
72
|
+
middleware: [react.flip({ fallbackStrategy: "initialPlacement" })]
|
|
73
|
+
});
|
|
74
|
+
const { getReferenceProps, getFloatingProps } = react.useInteractions([
|
|
75
|
+
react.useDismiss(context)
|
|
76
|
+
]);
|
|
77
|
+
const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = core.useFormFieldProps();
|
|
78
|
+
const isReadOnly = readOnlyProp || formFieldReadOnly;
|
|
79
|
+
const getPanelPosition = () => {
|
|
80
|
+
var _a2, _b;
|
|
81
|
+
return {
|
|
82
|
+
top: y != null ? y : 0,
|
|
83
|
+
left: x != null ? x : 0,
|
|
84
|
+
position: strategy,
|
|
85
|
+
width: (_a2 = elements.floating) == null ? void 0 : _a2.offsetWidth,
|
|
86
|
+
height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
const panelRef = React.useRef(null);
|
|
90
|
+
const startInputRef = React.useRef(null);
|
|
91
|
+
const endInputRef = React.useRef(null);
|
|
92
|
+
const inputRef = core.useForkRef(ref, reference);
|
|
93
|
+
const floatingRef = core.useForkRef(panelRef, floating);
|
|
94
|
+
const handleSelect = () => {
|
|
95
|
+
var _a2;
|
|
96
|
+
if (selectionVariant === "default" && startDate) {
|
|
97
|
+
(_a2 = startInputRef == null ? void 0 : startInputRef.current) == null ? void 0 : _a2.focus();
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
const handleCalendarButton = () => {
|
|
101
|
+
var _a2;
|
|
102
|
+
(_a2 = startInputRef == null ? void 0 : startInputRef.current) == null ? void 0 : _a2.focus();
|
|
103
|
+
setOpen(!open);
|
|
104
|
+
};
|
|
105
|
+
const datePickerContextValue = {
|
|
106
|
+
openState: open,
|
|
107
|
+
setOpen,
|
|
108
|
+
disabled,
|
|
109
|
+
endDate,
|
|
110
|
+
setEndDate,
|
|
111
|
+
defaultEndDate: useSelection.isRangeOrOffsetSelectionWithStartDate(defaultSelectedDate) ? defaultSelectedDate.endDate : defaultSelectedDate,
|
|
112
|
+
startDate,
|
|
113
|
+
setStartDate,
|
|
114
|
+
startVisibleMonth,
|
|
115
|
+
setStartVisibleMonth,
|
|
116
|
+
endVisibleMonth,
|
|
117
|
+
setEndVisibleMonth,
|
|
118
|
+
defaultStartDate: useSelection.isRangeOrOffsetSelectionWithStartDate(
|
|
119
|
+
defaultSelectedDate
|
|
120
|
+
) ? defaultSelectedDate.startDate : defaultSelectedDate,
|
|
121
|
+
selectionVariant,
|
|
122
|
+
context,
|
|
123
|
+
getPanelPosition,
|
|
124
|
+
validationStatusState,
|
|
125
|
+
setValidationStatus
|
|
126
|
+
};
|
|
127
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContext.DatePickerContext.Provider, {
|
|
128
|
+
value: datePickerContextValue,
|
|
129
|
+
children: [
|
|
130
|
+
/* @__PURE__ */ jsxRuntime.jsx(DateInput.DateInput, {
|
|
131
|
+
className: clsx.clsx(withBaseName(), className),
|
|
132
|
+
ref: inputRef,
|
|
133
|
+
...getReferenceProps(),
|
|
134
|
+
startInputRef,
|
|
135
|
+
endInputRef,
|
|
136
|
+
placeholder,
|
|
137
|
+
dateFormatter,
|
|
138
|
+
readOnly: isReadOnly,
|
|
139
|
+
ariaLabel: inputAriaLabel,
|
|
140
|
+
endAdornment: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
141
|
+
variant: "secondary",
|
|
142
|
+
onClick: handleCalendarButton,
|
|
143
|
+
disabled: disabled || isReadOnly || formFieldDisabled,
|
|
144
|
+
"aria-label": "Open Calendar",
|
|
145
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.CalendarIcon, {
|
|
146
|
+
"aria-hidden": true
|
|
147
|
+
})
|
|
148
|
+
}),
|
|
149
|
+
...rest
|
|
150
|
+
}),
|
|
151
|
+
/* @__PURE__ */ jsxRuntime.jsx(DatePickerPanel.DatePickerPanel, {
|
|
152
|
+
ref: floatingRef,
|
|
153
|
+
...getFloatingProps(),
|
|
154
|
+
onSelect: handleSelect,
|
|
155
|
+
CalendarProps: CalendarProps2,
|
|
156
|
+
helperText
|
|
157
|
+
})
|
|
158
|
+
]
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
);
|
|
162
|
+
|
|
163
|
+
exports.DatePicker = DatePicker;
|
|
164
|
+
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef, useRef, useState } from \"react\";\n\nimport {\n Button,\n makePrefixer,\n useControlled,\n useFloatingUI,\n useForkRef,\n useFormFieldProps,\n} from \"@salt-ds/core\";\nimport { DatePickerContext } from \"./DatePickerContext\";\nimport { DatePickerPanel } from \"./DatePickerPanel\";\nimport { flip, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport { DateInput } from \"../date-input\";\nimport { DateValue, getLocalTimeZone, today } from \"@internationalized/date\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport {\n CalendarProps,\n isRangeOrOffsetSelectionWithStartDate,\n} from \"../calendar\";\n\nconst withBaseName = makePrefixer(\"saltDatePicker\");\n\nexport interface DatePickerProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n inputAriaLabel?: string;\n /**\n * Selection variant. Defaults to single select.\n */\n selectionVariant?: \"default\" | \"range\";\n /**\n * If `true`, the component will be disabled.\n */\n disabled?: boolean;\n /**\n * The selected date value. Use when the component is controlled.\n * Can be a single date or an object with start and end dates for range selection.\n */\n selectedDate?: DateValue | { startDate: DateValue; endDate: DateValue };\n /**\n * The default date value. Use when the component is not controlled.\n * Can be a single date or an object with start and end dates for range selection.\n */\n defaultSelectedDate?:\n | DateValue\n | { startDate: DateValue; endDate: DateValue };\n /**\n * Props to be passed to the Calendar component.\n */\n CalendarProps?: Partial<\n Omit<\n CalendarProps,\n | \"selectionVariant\"\n | \"selectedDate\"\n | \"defaultSelectedDate\"\n | \"onSelectedDateChange\"\n >\n >;\n /**\n * Function to format the input value.\n */\n dateFormatter?: (input: DateValue | undefined) => string;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Helper text to display in the panel\n */\n helperText?: string;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n}\n\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n function DatePicker(\n {\n selectionVariant = \"default\",\n disabled = false,\n placeholder = \"dd mmm yyyy\",\n selectedDate: selectedDateProp,\n defaultSelectedDate,\n dateFormatter,\n CalendarProps,\n className,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n helperText,\n readOnly: readOnlyProp,\n inputAriaLabel,\n ...rest\n },\n ref\n ) {\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"openPanel\",\n state: \"openPanel\",\n });\n\n const [startDate, setStartDate] = useControlled({\n controlled: isRangeOrOffsetSelectionWithStartDate(selectedDateProp)\n ? selectedDateProp.startDate\n : selectedDateProp,\n default: isRangeOrOffsetSelectionWithStartDate(defaultSelectedDate)\n ? defaultSelectedDate.startDate\n : defaultSelectedDate,\n name: \"StartDate\",\n state: \"startDate\",\n });\n const [endDate, setEndDate] = useControlled({\n controlled: isRangeOrOffsetSelectionWithStartDate(selectedDateProp)\n ? selectedDateProp.endDate\n : selectedDateProp,\n default: isRangeOrOffsetSelectionWithStartDate(defaultSelectedDate)\n ? defaultSelectedDate.endDate\n : undefined,\n name: \"EndDate\",\n state: \"endDate\",\n });\n const [validationStatusState, setValidationStatus] = useState<\n \"error\" | undefined\n >(undefined);\n const [startVisibleMonth, setStartVisibleMonth] = useState<\n DateValue | undefined\n >(startDate ?? today(getLocalTimeZone()));\n const [endVisibleMonth, setEndVisibleMonth] = useState<\n DateValue | undefined\n >(\n endDate ??\n startDate?.add({ months: 1 }) ??\n today(getLocalTimeZone()).add({ months: 1 })\n );\n\n const onOpenChange = (newState: boolean) => {\n setOpen(newState);\n startInputRef?.current?.focus();\n onOpenChangeProp?.(newState);\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: open,\n onOpenChange: onOpenChange,\n placement: \"bottom-start\",\n middleware: [flip({ fallbackStrategy: \"initialPlacement\" })],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n ]);\n const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n useFormFieldProps();\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n const panelRef = useRef<HTMLDivElement>(null);\n const startInputRef = useRef<HTMLInputElement>(null);\n const endInputRef = useRef<HTMLInputElement>(null);\n const inputRef = useForkRef<HTMLDivElement>(ref, reference);\n const floatingRef = useForkRef<HTMLDivElement>(panelRef, floating);\n\n // Handlers\n const handleSelect = () => {\n if (selectionVariant === \"default\" && startDate) {\n startInputRef?.current?.focus();\n }\n };\n const handleCalendarButton = () => {\n startInputRef?.current?.focus();\n setOpen(!open);\n };\n\n // Context\n const datePickerContextValue = {\n openState: open,\n setOpen,\n disabled,\n endDate,\n setEndDate,\n defaultEndDate: isRangeOrOffsetSelectionWithStartDate(defaultSelectedDate)\n ? defaultSelectedDate.endDate\n : defaultSelectedDate,\n startDate,\n setStartDate,\n startVisibleMonth,\n setStartVisibleMonth,\n endVisibleMonth,\n setEndVisibleMonth,\n defaultStartDate: isRangeOrOffsetSelectionWithStartDate(\n defaultSelectedDate\n )\n ? defaultSelectedDate.startDate\n : defaultSelectedDate,\n selectionVariant,\n context,\n getPanelPosition,\n validationStatusState,\n setValidationStatus,\n };\n\n return (\n <DatePickerContext.Provider value={datePickerContextValue}>\n <DateInput\n className={clsx(withBaseName(), className)}\n ref={inputRef}\n {...getReferenceProps()}\n startInputRef={startInputRef}\n endInputRef={endInputRef}\n placeholder={placeholder}\n dateFormatter={dateFormatter}\n readOnly={isReadOnly}\n ariaLabel={inputAriaLabel}\n endAdornment={\n <Button\n variant=\"secondary\"\n onClick={handleCalendarButton}\n disabled={disabled || isReadOnly || formFieldDisabled}\n aria-label=\"Open Calendar\"\n >\n <CalendarIcon aria-hidden />\n </Button>\n }\n {...rest}\n />\n <DatePickerPanel\n ref={floatingRef}\n {...getFloatingProps()}\n onSelect={handleSelect}\n CalendarProps={CalendarProps}\n helperText={helperText}\n />\n </DatePickerContext.Provider>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DatePicker","CalendarProps","useControlled","isRangeOrOffsetSelectionWithStartDate","useState","today","getLocalTimeZone","_a","useFloatingUI","flip","useInteractions","useDismiss","useFormFieldProps","useRef","useForkRef","jsxs","DatePickerContext","jsx","DateInput","clsx","Button","CalendarIcon","DatePickerPanel"],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var core = require('@salt-ds/core');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
|
|
8
|
+
const DatePickerContext = core.createContext(
|
|
9
|
+
"DatePickerContext",
|
|
10
|
+
{
|
|
11
|
+
openState: false,
|
|
12
|
+
setOpen: () => void 0,
|
|
13
|
+
disabled: false,
|
|
14
|
+
startDate: void 0,
|
|
15
|
+
defaultStartDate: void 0,
|
|
16
|
+
setStartDate: () => void 0,
|
|
17
|
+
startVisibleMonth: void 0,
|
|
18
|
+
setStartVisibleMonth: () => void 0,
|
|
19
|
+
endDate: void 0,
|
|
20
|
+
defaultEndDate: void 0,
|
|
21
|
+
setEndDate: () => void 0,
|
|
22
|
+
validationStatusState: void 0,
|
|
23
|
+
setValidationStatus: () => void 0,
|
|
24
|
+
endVisibleMonth: void 0,
|
|
25
|
+
setEndVisibleMonth: () => void 0,
|
|
26
|
+
selectionVariant: "default",
|
|
27
|
+
getPanelPosition: () => ({})
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
function useDatePickerContext() {
|
|
31
|
+
return React.useContext(DatePickerContext);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
exports.DatePickerContext = DatePickerContext;
|
|
35
|
+
exports.useDatePickerContext = useDatePickerContext;
|
|
36
|
+
//# sourceMappingURL=DatePickerContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import { createContext, UseFloatingUIReturn } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\n\nexport interface DatePickerContextValue\n extends Partial<Pick<UseFloatingUIReturn, \"context\">> {\n openState: boolean;\n setOpen: (newOpen: boolean) => void;\n disabled: boolean;\n //start date values\n startDate: DateValue | undefined;\n defaultStartDate: DateValue | undefined;\n setStartDate: (newStartDate: DateValue | undefined) => void;\n startVisibleMonth: DateValue | undefined;\n setStartVisibleMonth: (newStartDate: DateValue | undefined) => void;\n // end date values for range picker\n endDate: DateValue | undefined;\n endVisibleMonth: DateValue | undefined;\n setEndVisibleMonth: (newStartDate: DateValue | undefined) => void;\n defaultEndDate: DateValue | undefined;\n setEndDate: (newEndDate: DateValue | undefined) => void;\n validationStatusState: \"error\" | undefined;\n setValidationStatus: (newStatus: \"error\" | undefined) => void;\n selectionVariant: \"default\" | \"range\";\n getPanelPosition: () => Record<string, unknown>;\n}\n\nexport const DatePickerContext = createContext<DatePickerContextValue>(\n \"DatePickerContext\",\n {\n openState: false,\n setOpen: () => undefined,\n disabled: false,\n startDate: undefined,\n defaultStartDate: undefined,\n setStartDate: () => undefined,\n startVisibleMonth: undefined,\n setStartVisibleMonth: () => undefined,\n endDate: undefined,\n defaultEndDate: undefined,\n setEndDate: () => undefined,\n validationStatusState: undefined,\n setValidationStatus: () => undefined,\n endVisibleMonth: undefined,\n setEndVisibleMonth: () => undefined,\n selectionVariant: \"default\",\n getPanelPosition: () => ({}),\n }\n);\n\nexport function useDatePickerContext() {\n return useContext(DatePickerContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AA2BO,MAAM,iBAAoB,GAAAA,kBAAA;AAAA,EAC/B,mBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,SAAS,MAAM,KAAA,CAAA;AAAA,IACf,QAAU,EAAA,KAAA;AAAA,IACV,SAAW,EAAA,KAAA,CAAA;AAAA,IACX,gBAAkB,EAAA,KAAA,CAAA;AAAA,IAClB,cAAc,MAAM,KAAA,CAAA;AAAA,IACpB,iBAAmB,EAAA,KAAA,CAAA;AAAA,IACnB,sBAAsB,MAAM,KAAA,CAAA;AAAA,IAC5B,OAAS,EAAA,KAAA,CAAA;AAAA,IACT,cAAgB,EAAA,KAAA,CAAA;AAAA,IAChB,YAAY,MAAM,KAAA,CAAA;AAAA,IAClB,qBAAuB,EAAA,KAAA,CAAA;AAAA,IACvB,qBAAqB,MAAM,KAAA,CAAA;AAAA,IAC3B,eAAiB,EAAA,KAAA,CAAA;AAAA,IACjB,oBAAoB,MAAM,KAAA,CAAA;AAAA,IAC1B,gBAAkB,EAAA,SAAA;AAAA,IAClB,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,GAC5B;AACF,EAAA;AAEO,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,iBAAiB,CAAA,CAAA;AACrC;;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltDatePickerPanel {\n background: var(--salt-container-primary-background);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n overflow: hidden;\n overflow-y: auto;\n position: relative;\n z-index: var(--salt-zIndex-popout);\n box-shadow: var(--salt-overlayable-shadow-popout);\n box-sizing: border-box;\n display: flex;\n}\n.saltDatePickerPanel-container {\n width: min-content;\n gap: 1px;\n}\n\n.saltDatePickerPanel-header {\n padding: var(--salt-spacing-100);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=DatePickerPanel.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|