@indico-data/design-system 2.60.7 → 2.60.8

package/lib/index.js

@@ -19116,6 +19116,60 @@ function SingleInputDatePicker(props) {
     return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: 'Single Date Picker', name: 'Date Picker' }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
 }
 
+function InputDateRangePicker(props) {
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "month", "id", "onSelect", "selected", "isOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage"]);
+    const inputId = React.useId();
+    // Hold the input values in state
+    const [localTextValueFrom, setLocalTextValueFrom] = React.useState((selected === null || selected === void 0 ? void 0 : selected.from) ? formatDateAsString(selected.from) : '');
+    const [localTextValueTo, setLocalTextValueTo] = React.useState((selected === null || selected === void 0 ? void 0 : selected.to) ? formatDateAsString(selected.to) : '');
+    const [localMonth, setLocalMonth] = React.useState((selected === null || selected === void 0 ? void 0 : selected.from) || new Date());
+    // When the day picker is selected, update the text values.
+    const handleDayPickerSelect = (date) => {
+        if (!date) {
+            setLocalTextValueFrom('');
+            setLocalTextValueTo('');
+            onSelect(undefined);
+        }
+        else {
+            setLocalTextValueFrom(date.from ? formatDateAsString(date.from) : '');
+            setLocalTextValueTo(date.to ? formatDateAsString(date.to) : '');
+            onSelect(date);
+        }
+    };
+    // When the text input is changed, update the selected date.
+    const handleInputChange = (e, type) => {
+        const value = e.target.value;
+        if (type === 'from') {
+            setLocalTextValueFrom(value);
+        }
+        else {
+            setLocalTextValueTo(value);
+        }
+        const parsedDate = parse(value, 'MM/dd/yyyy', new Date());
+        if (isValid(parsedDate)) {
+            onSelect({
+                from: type === 'from' ? parsedDate : selected === null || selected === void 0 ? void 0 : selected.from,
+                to: type === 'to' ? parsedDate : selected === null || selected === void 0 ? void 0 : selected.to,
+            });
+        }
+        else {
+            onSelect({
+                from: type === 'from' ? undefined : selected === null || selected === void 0 ? void 0 : selected.from,
+                to: type === 'to' ? undefined : selected === null || selected === void 0 ? void 0 : selected.to,
+            });
+        }
+    };
+    // clear selection if clear on close is true
+    React.useEffect(() => {
+        if (!isOpen) {
+            onSelect(undefined);
+            setLocalTextValueFrom('');
+            setLocalTextValueTo('');
+        }
+    }, [isOpen]);
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: 'From Date', name: 'From Date', "data-testid": "date-picker-from" }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: 'To Date', name: 'To Date', "data-testid": "date-picker-to" }) })] }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
+}
+
 const Form = (_a) => {
     var { children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel } = _a, rest = __rest(_a, ["children", "onSubmit", "action", "method", "target", "autocomplete", "noValidate", "enctype", "rel"]);
     const handleSubmit = (e) => {
@@ -43068,6 +43122,7 @@ exports.Form = Form;
 exports.Icon = Icon;
 exports.IconTriggerDatePicker = IconTriggerDatePicker;
 exports.Input = LabeledInput;
+exports.InputDateRangePicker = InputDateRangePicker;
 exports.Menu = Menu;
 exports.Modal = Modal;
 exports.Pagination = Pagination;