@indico-data/design-system 2.41.0 → 2.42.0

package/lib/index.js

@@ -13945,28 +13945,31 @@ function DayPicker(props) {
             props.footer && (React__namespace.default.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }
 
-const getCommonProps = (props) => ({
-    className: props.className,
-    id: props.id,
-    month: props.month,
-    captionLayout: props.captionLayout,
-    defaultMonth: props.defaultMonth,
-    startMonth: props.startMonth,
-    endMonth: props.endMonth,
-    components: props.components,
-    isDisabled: props.isDisabled,
-    formatters: props.formatters,
-    weekStartsOn: props.weekStartsOn,
-    firstWeekContainsDate: props.firstWeekContainsDate,
-    today: props.today,
-    required: props.isRequired,
-    onMonthChange: props.onMonthChange,
-    onNextClick: props.onNextClick,
-    onPrevClick: props.onPrevClick,
-    onDayClick: props.onDayClick,
-});
+const getCommonProps = (props) => {
+    var _a;
+    return ({
+        className: props.className,
+        id: props.id,
+        month: props.month,
+        captionLayout: (_a = props.captionLayout) !== null && _a !== void 0 ? _a : 'dropdown',
+        defaultMonth: props.defaultMonth,
+        startMonth: props.startMonth,
+        endMonth: props.endMonth,
+        components: props.components,
+        isDisabled: props.isDisabled,
+        formatters: props.formatters,
+        weekStartsOn: props.weekStartsOn,
+        firstWeekContainsDate: props.firstWeekContainsDate,
+        today: props.today,
+        required: props.isRequired,
+        onMonthChange: props.onMonthChange,
+        onNextClick: props.onNextClick,
+        onPrevClick: props.onPrevClick,
+        onDayClick: props.onDayClick,
+    });
+};
 
-const DatePicker = React__namespace.default.forwardRef((props) => {
+const DatePicker = (props) => {
     const { mode = 'single', className, captionLayout = 'dropdown', selected, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, isRequired, min, max, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "isRequired", "min", "max", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick"]);
     const commonProps = getCommonProps(props);
     const modeMap = {
@@ -13991,28 +13994,26 @@ const DatePicker = React__namespace.default.forwardRef((props) => {
     };
     const modeProps = modeMap[mode];
     return jsxRuntime.jsx(DayPicker, Object.assign({}, modeProps, commonProps, rest));
-});
+};
 
 const IconTriggerDatePicker = (props) => {
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, month, id, label, onSelect, selected, triggerIcon, triggerIconSize, mode, isOpen, clearOnClose } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "month", "id", "label", "onSelect", "selected", "triggerIcon", "triggerIconSize", "mode", "isOpen", "clearOnClose"]);
-    const [localSelected, setLocalSelected] = React.useState(selected || undefined);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, id, label, onSelect, selected, triggerIcon, triggerIconSize, mode, isOpen, clearOnClose, initialMonth } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "id", "label", "onSelect", "selected", "triggerIcon", "triggerIconSize", "mode", "isOpen", "clearOnClose", "initialMonth"]);
+    const [localMonth, setLocalMonth] = React.useState(initialMonth !== null && initialMonth !== void 0 ? initialMonth : new Date());
     const handleSelect = (date) => {
         if (!date) {
             onSelect && onSelect(undefined);
-            setLocalSelected(undefined);
         }
         else {
             onSelect && onSelect(date);
-            setLocalSelected(date);
         }
     };
     // clear selection if clear on close is true
     React.useEffect(() => {
         if (!isOpen && clearOnClose) {
-            setLocalSelected(undefined);
+            onSelect && onSelect(undefined);
         }
     }, [isOpen, clearOnClose]);
-    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}` }), jsxRuntime.jsx(DatePicker, Object.assign({ isDisabled: isDisabled, mode: mode, month: month, selected: localSelected, onSelect: handleSelect, startMonth: disableBeforeDate, endMonth: disableAfterDate }, rest))] }));
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}` }), jsxRuntime.jsx(DatePicker, Object.assign({ isDisabled: isDisabled, mode: mode, selected: selected, onSelect: handleSelect, month: localMonth, startMonth: disableBeforeDate, endMonth: disableAfterDate, onMonthChange: setLocalMonth }, rest))] }));
 };
 
 /**
@@ -19401,45 +19402,45 @@ function cleanEscapedString(input) {
   return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
 }
 
+const formatDateAsString = (date) => format(date, 'MM/dd/yyyy');
+
 function SingleInputDatePicker(props) {
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, month, id, label, onSelect, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "month", "id", "label", "onSelect", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage"]);
+    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 inputId = React.useId();
-    // Hold the month in state to control the calendar when the input changes
-    const [localMonth, setLocalMonth] = React.useState(new Date());
-    // Hold the selected date in state
-    const [selectedDate, setSelectedDate] = React.useState(undefined);
-    // Hold the input value in state
-    const [inputValue, setInputValue] = React.useState('');
+    // 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) {
-            setInputValue('');
-            setSelectedDate(undefined);
+            setLocalTextValue('');
+            onSelect(undefined);
         }
         else {
-            setSelectedDate(date);
-            setLocalMonth(date);
-            setInputValue(format(date, 'MM/dd/yyyy'));
+            setLocalTextValue(formatDateAsString(date));
+            onSelect(date);
         }
     };
+    // When the text input is changed, update the selected date.
     const handleInputChange = (e) => {
-        setInputValue(e.target.value); // keep the input value in sync
+        setLocalTextValue(e.target.value); // keep the input value in sync
         const parsedDate = parse(e.target.value, 'MM/dd/yyyy', new Date());
         if (isValid(parsedDate)) {
-            setSelectedDate(parsedDate);
-            setLocalMonth(parsedDate);
+            onSelect(parsedDate);
         }
         else {
-            setSelectedDate(undefined);
+            onSelect(undefined);
         }
     };
     // clear selection if clear on close is true
     React.useEffect(() => {
         if (!isOpen && clearOnClose) {
-            setSelectedDate(undefined);
-            setInputValue('');
+            onSelect(undefined);
+            setLocalTextValue('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(LabeledInput, { id: inputId, value: inputValue, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: 'Single Date Picker', name: 'Date Picker' }), jsxRuntime.jsx(DatePicker, Object.assign({ month: localMonth, onMonthChange: setLocalMonth, mode: "single", selected: selectedDate, onSelect: handleDayPickerSelect }, rest))] }));
+    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))] }));
 }
 
 const StyledAccordion = styled__default.default.details `