@auth0/quantum-product 2.6.0 → 2.7.0

package/esm/date-picker/date-picker-popover.js

@@ -36,6 +36,15 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import 'react-day-picker/style.css';
 import * as React from 'react';
 import { DayPicker } from 'react-day-picker';
@@ -46,9 +55,9 @@ import { DropdownMenuList, DropdownMenuListItem } from '../dropdown-menu';
 import { Popover } from '../popover';
 import { styled } from '../styled';
 import { useMergedClasses } from '../styles/classes';
-import { TextField } from '../text-field';
 import clsx from '../utils/clsx';
 import { datePickerPopoverClasses, datePickerPopoverComponentName, getDatePickerPopoverUtilityClass, } from './date-picker-classes';
+import { DatePickerTimeInput } from './date-picker-time-input';
 import { applyTimeToDate, extractTimeComponents, formatDate, formatDateRange, parseDate, parseDateRange, } from './date-picker-utils';
 var Root = styled(Popover, { name: datePickerPopoverComponentName, slot: 'Root' })(function (_a) {
     var theme = _a.theme;
@@ -142,6 +151,7 @@ var CalendarWrapper = styled('div', { name: datePickerPopoverComponentName, slot
         '.rdp-day_button': {
             width: theme.spacing(4),
             height: theme.spacing(4),
+            borderRadius: theme.spacing(0.5),
         },
         '.rdp-range_start .rdp-day_button': {
             backgroundColor: theme.tokens.color_bg_button_primary,
@@ -189,153 +199,127 @@ var ButtonContainer = styled(Box, { name: datePickerPopoverComponentName, slot:
         borderTop: "1px solid ".concat(theme.tokens.color_border_default),
     });
 });
-var TimeInputContainer = styled('div', { name: datePickerPopoverComponentName, slot: 'TimeInput' })(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'flex-start',
-        gap: theme.spacing(0.5),
-        padding: theme.spacing(1),
-        alignItems: 'center',
-        borderTop: "1px solid ".concat(theme.tokens.color_border_default),
-    });
-});
-var EndTimeInputContainer = styled('div', { name: datePickerPopoverComponentName, slot: 'EndTimeInput' })(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'flex-start',
-        gap: theme.spacing(0.5),
-        alignItems: 'center',
-        marginLeft: theme.spacing(2),
-    });
-});
-var TimeInput = styled(TextField, { name: datePickerPopoverComponentName, slot: 'TimeInputField' })({
-    width: '3rem',
-});
-var TimeInputLabel = styled('span', { name: datePickerPopoverComponentName, slot: 'TimeInputLabel' })(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: theme.tokens.color_fg_default,
-        fontSize: theme.typography.caption.fontSize,
-    });
-});
 export var DatePickerPopover = React.forwardRef(function (props, ref) {
-    var anchorEl = props.anchorEl, open = props.open, onClose = props.onClose, onDateSelect = props.onDateSelect, options = props.options, value = props.value, _a = props.dateFormat, dateFormat = _a === void 0 ? 'MM/dd/yyyy' : _a, _b = props.timeFormat, timeFormat = _b === void 0 ? 'HH:mm:ss' : _b, PopoverProps = props.PopoverProps, _c = props.showTwoMonths, showTwoMonths = _c === void 0 ? false : _c, _d = props.isRangeSelection, isRangeSelection = _d === void 0 ? false : _d, _e = props.showTimeInput, showTimeInput = _e === void 0 ? false : _e, propClasses = props.classes, rootProps = __rest(props, ["anchorEl", "open", "onClose", "onDateSelect", "options", "value", "dateFormat", "timeFormat", "PopoverProps", "showTwoMonths", "isRangeSelection", "showTimeInput", "classes"]);
+    var anchorEl = props.anchorEl, open = props.open, onClose = props.onClose, onDateSelect = props.onDateSelect, options = props.options, value = props.value, _a = props.dateFormat, dateFormat = _a === void 0 ? 'MM/dd/yyyy' : _a, _b = props.timeFormat, timeFormat = _b === void 0 ? 'HH:mm:ss' : _b, minDate = props.minDate, maxDate = props.maxDate, PopoverProps = props.PopoverProps, _c = props.showTwoMonths, showTwoMonths = _c === void 0 ? false : _c, _d = props.isRangeSelection, isRangeSelection = _d === void 0 ? false : _d, _e = props.showTimeInput, showTimeInput = _e === void 0 ? false : _e, propClasses = props.classes, rootProps = __rest(props, ["anchorEl", "open", "onClose", "onDateSelect", "options", "value", "dateFormat", "timeFormat", "minDate", "maxDate", "PopoverProps", "showTwoMonths", "isRangeSelection", "showTimeInput", "classes"]);
     var classes = useMergedClasses(datePickerPopoverClasses, getDatePickerPopoverUtilityClass, propClasses);
-    // State to track the current view: 'options' or 'calendar'
     var _f = __read(React.useState(options ? 'options' : 'calendar'), 2), currentView = _f[0], setCurrentView = _f[1];
-    // State to track the current range selection
     var _g = __read(React.useState({}), 2), rangeSelection = _g[0], setRangeSelection = _g[1];
-    // Time state for single date or range start/end
-    var _h = __read(React.useState('00'), 2), hours = _h[0], setHours = _h[1];
-    var _j = __read(React.useState('00'), 2), minutes = _j[0], setMinutes = _j[1];
-    var _k = __read(React.useState('00'), 2), seconds = _k[0], setSeconds = _k[1];
-    // For range selection - end time
-    var _l = __read(React.useState('00'), 2), endHours = _l[0], setEndHours = _l[1];
-    var _m = __read(React.useState('00'), 2), endMinutes = _m[0], setEndMinutes = _m[1];
-    var _o = __read(React.useState('00'), 2), endSeconds = _o[0], setEndSeconds = _o[1];
-    // Reset selection and view when popover opens/closes
+    var _h = __read(React.useState({ hours: '00', minutes: '00', seconds: '00' }), 2), startTime = _h[0], setStartTime = _h[1];
+    var _j = __read(React.useState({ hours: '00', minutes: '00', seconds: '00' }), 2), endTime = _j[0], setEndTime = _j[1];
+    var shouldAutoFocusTimeInput = React.useRef(false);
+    // Reset state when popover closes
     React.useEffect(function () {
         if (!open) {
             setRangeSelection({});
-            // Reset the view to options if there are options available
             if (options) {
                 setCurrentView('options');
             }
         }
-        else if (value) {
-            if (isRangeSelection && value.includes('-')) {
-                // Parse range selection
-                var _a = parseDateRange(value, dateFormat, showTimeInput ? timeFormat : undefined), from = _a.from, to = _a.to;
-                if (from) {
-                    // Extract time components for range start
-                    var _b = extractTimeComponents(from), h = _b.hours, m = _b.minutes, s = _b.seconds;
-                    setHours(h);
-                    setMinutes(m);
-                    setSeconds(s);
+    }, [open, options]);
+    // Parse and set single date selection when value changes
+    React.useEffect(function () {
+        if (!value || isRangeSelection || !open)
+            return;
+        var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+        var date = parseDate(value, formatString);
+        if (date) {
+            setRangeSelection({ from: date });
+            if (showTimeInput) {
+                var timeComponents = extractTimeComponents(date);
+                setStartTime(timeComponents);
+            }
+        }
+    }, [open, value, isRangeSelection, dateFormat, timeFormat, showTimeInput]);
+    // Parse and set range selection when value changes
+    React.useEffect(function () {
+        if (!open || !value || !isRangeSelection || !value.includes('-'))
+            return;
+        var _a = parseDateRange(value, dateFormat, showTimeInput ? timeFormat : undefined), from = _a.from, to = _a.to;
+        if (from && to) {
+            setRangeSelection({ from: from, to: to });
+            var startTimeComponents = extractTimeComponents(from);
+            setStartTime(startTimeComponents);
+            var endTimeComponents = extractTimeComponents(to);
+            setEndTime(endTimeComponents);
+        }
+    }, [open, value, isRangeSelection, dateFormat, timeFormat, showTimeInput]);
+    React.useEffect(function () {
+        if (open && showTimeInput && currentView === 'calendar') {
+            shouldAutoFocusTimeInput.current = true;
+        }
+    }, [open, showTimeInput, currentView]);
+    var handleCalendarSelect = function (selection) {
+        if (!selection)
+            return;
+        if (!isRangeSelection) {
+            var selectedDate = void 0;
+            if (selection.from && !selection.to) {
+                selectedDate = selection.from;
+            }
+            else if (selection.from && selection.to) {
+                var previousDate = rangeSelection.from;
+                if (previousDate && previousDate.getTime() === selection.from.getTime()) {
+                    selectedDate = selection.to;
                 }
-                if (to) {
-                    // Extract time components for range end
-                    var _c = extractTimeComponents(to), h = _c.hours, m = _c.minutes, s = _c.seconds;
-                    setEndHours(h);
-                    setEndMinutes(m);
-                    setEndSeconds(s);
+                else if (previousDate && selection.to && previousDate.getTime() === selection.to.getTime()) {
+                    selectedDate = selection.from;
                 }
-                if (from && to) {
-                    setRangeSelection({ from: from, to: to });
+                else {
+                    selectedDate = selection.to;
                 }
             }
-            else if (!isRangeSelection) {
-                // For single date, try to parse with time format first if showTimeInput is enabled
-                var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
-                var date = parseDate(value, formatString);
-                if (date) {
-                    setRangeSelection({ from: date });
-                    if (showTimeInput) {
-                        // Extract time components
-                        var _d = extractTimeComponents(date), h = _d.hours, m = _d.minutes, s = _d.seconds;
-                        setHours(h);
-                        setMinutes(m);
-                        setSeconds(s);
-                    }
+            // Apply the selected date if found
+            if (selectedDate) {
+                if (showTimeInput) {
+                    var newDate = applyTimeToDate(selectedDate, startTime);
+                    setRangeSelection({ from: newDate });
+                }
+                else {
+                    setRangeSelection({ from: selectedDate });
+                    applySelection(selectedDate);
                 }
             }
+            return;
         }
-    }, [open, value, isRangeSelection, dateFormat, timeFormat, options, showTimeInput]);
-    // Handle calendar selections
-    var handleCalendarSelect = function (selection) {
-        if (!selection)
+        // Handle range selection mode - with early returns to reduce nesting
+        if (!selection.from)
             return;
-        // Keep the time values when date changes
-        if (selection.from && !selection.to) {
-            // Single date or range start
+        if (!selection.to) {
             if (showTimeInput) {
-                var newFrom = applyTimeToDate(selection.from, { hours: hours, minutes: minutes, seconds: seconds });
+                var newFrom = applyTimeToDate(selection.from, startTime);
                 setRangeSelection({ from: newFrom });
             }
             else {
                 setRangeSelection({ from: selection.from });
             }
+            return;
         }
-        else if (selection.from && selection.to) {
-            // Range selection
-            if (showTimeInput) {
-                var newFrom = applyTimeToDate(selection.from, { hours: hours, minutes: minutes, seconds: seconds });
-                var newTo = applyTimeToDate(selection.to, { hours: endHours, minutes: endMinutes, seconds: endSeconds });
-                setRangeSelection({ from: newFrom, to: newTo });
-            }
-            else {
-                setRangeSelection(selection);
-            }
+        if (showTimeInput) {
+            var newFrom = applyTimeToDate(selection.from, startTime);
+            var newTo = applyTimeToDate(selection.to, endTime);
+            setRangeSelection({ from: newFrom, to: newTo });
         }
-        // Only auto-apply selection for non-range selection mode and when not showing time input
-        if (!isRangeSelection && !showTimeInput) {
-            applySelection(selection.from);
+        else {
+            setRangeSelection(selection);
         }
-        // For range selection or time input, we'll wait for user to click Apply
     };
-    var handleTimeChange = function (value, setter, max) {
-        var numValue = value.replace(/\D/g, '');
-        var parsed = parseInt(numValue, 10);
-        if (!isNaN(parsed) && parsed >= 0 && parsed <= max) {
-            setter(parsed.toString().padStart(2, '0'));
-        }
-        else if (value === '') {
-            setter('00');
-        }
-        updateDateWithTime();
+    var handleStartTimeChange = function (time) {
+        setStartTime(time);
+        updateDateWithTime(time, endTime);
     };
-    var updateDateWithTime = function () {
+    var handleEndTimeChange = function (time) {
+        setEndTime(time);
+        updateDateWithTime(startTime, time);
+    };
+    var handleTimeClear = function () {
+        shouldAutoFocusTimeInput.current = true;
+    };
+    var updateDateWithTime = function (startTimeValue, endTimeValue) {
         if (!rangeSelection.from)
             return;
-        var newFrom = applyTimeToDate(rangeSelection.from, { hours: hours, minutes: minutes, seconds: seconds });
+        var newFrom = applyTimeToDate(rangeSelection.from, startTimeValue);
         if (isRangeSelection && rangeSelection.to) {
-            var newTo = applyTimeToDate(rangeSelection.to, {
-                hours: endHours,
-                minutes: endMinutes,
-                seconds: endSeconds,
-            });
+            var newTo = applyTimeToDate(rangeSelection.to, endTimeValue);
             setRangeSelection({ from: newFrom, to: newTo });
         }
         else {
@@ -355,9 +339,16 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
                 var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
                 var formattedDate = formatDate(dateToFormat, formatString);
                 onDateSelect(formattedDate, true);
+                onClose();
             }
         }
     };
+    var clearSelection = function () {
+        setRangeSelection({});
+        setStartTime({ hours: '00', minutes: '00', seconds: '00' });
+        setEndTime({ hours: '00', minutes: '00', seconds: '00' });
+        onDateSelect('', true);
+    };
     var cancelSelection = function () {
         if (options) {
             setCurrentView('options');
@@ -381,13 +372,12 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
         var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
         var parsedDate = parseDate(value, formatString);
         if (parsedDate) {
-            selectedValue = parsedDate;
+            selectedValue = { from: parsedDate };
         }
     }
-    // Determine if we should show the action buttons - now for both range selection and time input
     var showActionButtons = isRangeSelection || showTimeInput;
-    var canApply = isRangeSelection ? rangeSelection.from && rangeSelection.to : !!rangeSelection.from;
-    var _p = __read(React.useState(null), 2), inputWidth = _p[0], setInputWidth = _p[1];
+    var canApplyDate = isRangeSelection ? rangeSelection.from && rangeSelection.to : !!rangeSelection.from;
+    var _k = __read(React.useState(null), 2), inputWidth = _k[0], setInputWidth = _k[1];
     React.useEffect(function () {
         if (open && anchorEl) {
             var width = anchorEl.getBoundingClientRect().width;
@@ -404,26 +394,13 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
         }, transformOrigin: {
             vertical: 'top',
             horizontal: 'left',
-        }, marginThreshold: 30, style: { marginTop: '-24px' } }, PopoverProps, rootProps),
+        }, marginThreshold: 0, style: { marginTop: '-24px' } }, PopoverProps, rootProps),
         React.createElement(Content, { className: classes.content, ownerState: __assign(__assign({}, ownerState), { inputWidth: inputWidth, currentView: currentView }) }, currentView === 'options' && options ? (React.createElement(DropdownMenuList, null, options.map(function (option, index) { return (React.createElement(DropdownMenuListItem, { key: index, title: option.text, selected: option.value === value, onClick: function () { return handleOptionSelect(option.value); } })); }))) : (React.createElement(React.Fragment, null,
             React.createElement(CalendarWrapper, { className: classes.calendarWrapper },
-                React.createElement(DayPicker, { mode: "range", selected: selectedValue, onSelect: handleCalendarSelect, showOutsideDays: true, numberOfMonths: showTwoMonths ? 2 : 1, pagedNavigation: showTwoMonths })),
-            showTimeInput && (React.createElement(React.Fragment, null,
-                React.createElement(TimeInputContainer, null,
-                    React.createElement(TimeInputLabel, null, "Time:"),
-                    React.createElement(TimeInput, { size: "small", value: hours, onChange: function (e) { return handleTimeChange(e.target.value, setHours, 23); }, placeholder: "HH" }),
-                    React.createElement("span", null, ":"),
-                    React.createElement(TimeInput, { size: "small", value: minutes, onChange: function (e) { return handleTimeChange(e.target.value, setMinutes, 59); }, placeholder: "MM" }),
-                    React.createElement("span", null, ":"),
-                    React.createElement(TimeInput, { size: "small", value: seconds, onChange: function (e) { return handleTimeChange(e.target.value, setSeconds, 59); }, placeholder: "SS" }),
-                    isRangeSelection && (React.createElement(EndTimeInputContainer, null,
-                        React.createElement(TimeInputLabel, null, "End Time:"),
-                        React.createElement(TimeInput, { size: "small", value: endHours, onChange: function (e) { return handleTimeChange(e.target.value, setEndHours, 23); }, placeholder: "HH" }),
-                        React.createElement("span", null, ":"),
-                        React.createElement(TimeInput, { size: "small", value: endMinutes, onChange: function (e) { return handleTimeChange(e.target.value, setEndMinutes, 59); }, placeholder: "MM" }),
-                        React.createElement("span", null, ":"),
-                        React.createElement(TimeInput, { size: "small", value: endSeconds, onChange: function (e) { return handleTimeChange(e.target.value, setEndSeconds, 59); }, placeholder: "SS" })))))),
+                React.createElement(DayPicker, { mode: "range", selected: selectedValue, onSelect: handleCalendarSelect, showOutsideDays: true, numberOfMonths: showTwoMonths ? 2 : 1, pagedNavigation: showTwoMonths, disabled: __spreadArray(__spreadArray([], __read((minDate ? [{ before: new Date(minDate) }] : [])), false), __read((maxDate ? [{ after: new Date(maxDate) }] : [])), false) })),
+            showTimeInput && (React.createElement(DatePickerTimeInput, { startTime: startTime, endTime: endTime, isRangeSelection: isRangeSelection, onStartTimeChange: handleStartTimeChange, onEndTimeChange: handleEndTimeChange, onClear: handleTimeClear })),
             showActionButtons && (React.createElement(ButtonContainer, { className: classes.buttonContainer },
+                React.createElement(Button, { size: "small", variant: "link", onClick: clearSelection, style: { marginRight: 'auto' } }, "Clear"),
                 React.createElement(Button, { size: "small", variant: "outlined", onClick: cancelSelection, style: { marginRight: 8 } }, "Cancel"),
-                React.createElement(Button, { size: "small", variant: "contained", color: "primary", onClick: function () { return applySelection(); }, disabled: !canApply }, "Apply"))))))));
+                React.createElement(Button, { size: "small", variant: "contained", color: "primary", onClick: function () { return applySelection(); }, disabled: !canApplyDate }, "Apply"))))))));
 });