@indico-data/design-system 3.0.7 → 3.0.8

package/lib/index.js

@@ -19077,14 +19077,14 @@ function cleanEscapedString(input) {
   return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
 }
 
-const formatDateAsString = (date) => format(date, 'MM/dd/yyyy');
+const formatDateAsString$1 = (date) => format(date, 'MM/dd/yyyy');
 
 function SingleInputDatePicker(props) {
     var _a;
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, hasHiddenLabel } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "hasHiddenLabel"]);
     const inputId = React.useId();
     // The text value is assumed to be unneeded by the consumer.
-    const [localTextValue, setLocalTextValue] = React.useState(selected ? formatDateAsString(selected) : '');
+    const [localTextValue, setLocalTextValue] = React.useState(selected ? formatDateAsString$1(selected) : '');
     const [localMonth, setLocalMonth] = React.useState((_a = initialMonth !== null && initialMonth !== void 0 ? initialMonth : selected) !== null && _a !== void 0 ? _a : new Date());
     // When the day picker is selected, update the text value.
     const handleDayPickerSelect = (date) => {
@@ -19093,7 +19093,7 @@ function SingleInputDatePicker(props) {
             onSelect(undefined);
         }
         else {
-            setLocalTextValue(formatDateAsString(date));
+            setLocalTextValue(formatDateAsString$1(date));
             onSelect(date);
         }
     };
@@ -19115,15 +19115,15 @@ function SingleInputDatePicker(props) {
             setLocalTextValue('');
         }
     }, [isOpen, clearOnClose]);
-    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))] }));
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, hasHiddenLabel: hasHiddenLabel, 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, 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 { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, setIsOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel, closeOnSelect, clearOnClose, hasHiddenLabel } = 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", "hasHiddenLabel"]);
     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 [localTextValueFrom, setLocalTextValueFrom] = React.useState((selected === null || selected === void 0 ? void 0 : selected.from) ? formatDateAsString$1(selected.from) : '');
+    const [localTextValueTo, setLocalTextValueTo] = React.useState((selected === null || selected === void 0 ? void 0 : selected.to) ? formatDateAsString$1(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) => {
@@ -19133,8 +19133,8 @@ function InputDateRangePicker(props) {
             onSelect(undefined);
         }
         else {
-            setLocalTextValueFrom(date.from ? formatDateAsString(date.from) : '');
-            setLocalTextValueTo(date.to ? formatDateAsString(date.to) : '');
+            setLocalTextValueFrom(date.from ? formatDateAsString$1(date.from) : '');
+            setLocalTextValueTo(date.to ? formatDateAsString$1(date.to) : '');
             onSelect(date);
             // Close the picker ONLY when a complete range is selected (from and to are different dates)
             if (closeOnSelect &&
@@ -19178,7 +19178,51 @@ function InputDateRangePicker(props) {
             setLocalTextValueTo('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsxs(Row, { gutterWidth: gutterWidth, 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: fromLabel, 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: toLabel, 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))] }));
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsxs(Row, { gutterWidth: gutterWidth, 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: fromLabel, name: 'From Date', "data-testid": "date-picker-from", hasHiddenLabel: hasHiddenLabel }) }), 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: toLabel, name: 'To Date', "data-testid": "date-picker-to", hasHiddenLabel: hasHiddenLabel }) })] }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
+}
+
+const formatDateAsString = (date) => format(date, 'MM/dd/yyyy');
+
+function SingleInputDateTimePicker(props) {
+    var _a;
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, timeValue, onTimeChange, hasHiddenLabel } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "timeValue", "onTimeChange", "hasHiddenLabel"]);
+    const inputId = React.useId();
+    // The text value is assumed to be unneeded by the consumer.
+    const [localTextValue, setLocalTextValue] = React.useState(selected ? formatDateAsString(selected) : '');
+    const [localMonth, setLocalMonth] = React.useState((_a = initialMonth !== null && initialMonth !== void 0 ? initialMonth : selected) !== null && _a !== void 0 ? _a : new Date());
+    // When the day picker is selected, update the text value.
+    const handleDayPickerSelect = (date) => {
+        if (!date) {
+            setLocalTextValue('');
+            onSelect(undefined);
+        }
+        else {
+            setLocalTextValue(formatDateAsString(date));
+            onSelect(date);
+        }
+    };
+    // When the text input is changed, update the selected date.
+    const handleInputChange = (e) => {
+        setLocalTextValue(e.target.value); // keep the input value in sync
+        const parsedDate = parse(e.target.value, 'MM/dd/yyyy', new Date());
+        if (isValid(parsedDate)) {
+            onSelect(parsedDate);
+        }
+        else {
+            onSelect(undefined);
+        }
+    };
+    // clear selection if clear on close is true
+    React.useEffect(() => {
+        if (!isOpen && clearOnClose) {
+            onSelect(undefined);
+            setLocalTextValue('');
+        }
+    }, [isOpen, clearOnClose]);
+    const handleTimeChange = (time) => {
+        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
+    };
+    return (jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Col, { children: 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, hasHiddenLabel: hasHiddenLabel, label: 'Single Date Picker', name: `${id}-date-picker` }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx(TimePicker, { timeValue: timeValue, name: `${id}-time-picker`, hasHiddenLabel: true, onTimeChange: handleTimeChange }) })] }));
 }
 
 const Form = (_a) => {
@@ -43262,6 +43306,7 @@ exports.RadioInput = Radio;
 exports.Row = Row;
 exports.SelectInput = LabeledSelect;
 exports.SingleInputDatePicker = SingleInputDatePicker;
+exports.SingleInputDateTimePicker = SingleInputDateTimePicker;
 exports.Skeleton = Skeleton;
 exports.Stepper = Stepper;
 exports.Table = Table;