@indico-data/design-system 2.60.9 → 2.60.10

package/lib/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts

@@ -11,6 +11,7 @@ interface InputDateRangePickerProps {
     month?: Date;
     selected?: DateRange | undefined;
     isOpen?: boolean;
+    setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     className?: string;
     inputIconName?: IconName;
     inputPlaceholder?: string;
@@ -20,6 +21,8 @@ interface InputDateRangePickerProps {
     gutterWidth?: number;
     fromLabel?: string;
     toLabel?: string;
+    closeOnSelect?: boolean;
+    clearOnClose?: boolean;
 }
 export declare function InputDateRangePicker(props: InputDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/index.d.ts

@@ -465,6 +465,7 @@ interface InputDateRangePickerProps {
     month?: Date;
     selected?: DateRange | undefined;
     isOpen?: boolean;
+    setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     className?: string;
     inputIconName?: IconName$2;
     inputPlaceholder?: string;
@@ -474,6 +475,8 @@ interface InputDateRangePickerProps {
     gutterWidth?: number;
     fromLabel?: string;
     toLabel?: string;
+    closeOnSelect?: boolean;
+    clearOnClose?: boolean;
 }
 declare function InputDateRangePicker(props: InputDateRangePickerProps): react_jsx_runtime.JSX.Element;
 

package/lib/index.esm.js

@@ -19093,7 +19093,7 @@ function SingleInputDatePicker(props) {
 }
 
 function InputDateRangePicker(props) {
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "month", "id", "onSelect", "selected", "isOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage", "gutterWidth", "fromLabel", "toLabel"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, setIsOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel, closeOnSelect, clearOnClose } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "month", "id", "onSelect", "selected", "isOpen", "setIsOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage", "gutterWidth", "fromLabel", "toLabel", "closeOnSelect", "clearOnClose"]);
     const inputId = useId$1();
     // Hold the input values in state
     const [localTextValueFrom, setLocalTextValueFrom] = useState((selected === null || selected === void 0 ? void 0 : selected.from) ? formatDateAsString(selected.from) : '');
@@ -19110,6 +19110,15 @@ function InputDateRangePicker(props) {
             setLocalTextValueFrom(date.from ? formatDateAsString(date.from) : '');
             setLocalTextValueTo(date.to ? formatDateAsString(date.to) : '');
             onSelect(date);
+            // Close the picker ONLY when a complete range is selected (from and to are different dates)
+            if (closeOnSelect &&
+                date.from &&
+                date.to &&
+                setIsOpen &&
+                date.from.getTime() !== date.to.getTime() // Ensure from and to are different dates
+            ) {
+                setIsOpen(false);
+            }
         }
     };
     // When the text input is changed, update the selected date.
@@ -19137,13 +19146,13 @@ function InputDateRangePicker(props) {
     };
     // clear selection if clear on close is true
     useEffect(() => {
-        if (!isOpen) {
+        if (!isOpen && clearOnClose) {
             onSelect(undefined);
             setLocalTextValueFrom('');
             setLocalTextValueTo('');
         }
-    }, [isOpen]);
-    return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxs(Row, { gutterWidth: gutterWidth, children: [jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: fromLabel, name: 'From Date', "data-testid": "date-picker-from" }) }), jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: toLabel, name: 'To Date', "data-testid": "date-picker-to" }) })] }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
+    }, [isOpen, clearOnClose]);
+    return (jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, children: [jsxs(Row, { gutterWidth: gutterWidth, children: [jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: fromLabel, name: 'From Date', "data-testid": "date-picker-from" }) }), jsx(Col, { children: jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: toLabel, name: 'To Date', "data-testid": "date-picker-to" }) })] }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
 }
 
 const Form = (_a) => {