@auth0/quantum-product 2.5.9 → 2.7.0

package/breadcrumbs/breadcrumbs-item/breadcrumbs-item.js

@@ -95,9 +95,9 @@ var EndIcon = (0, styled_1.styled)('span', {
     });
 });
 exports.BreadcrumbsItem = React.forwardRef(function (props, ref) {
-    var label = props.label, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, isCurrent = props.isCurrent, children = props.children, propClasses = props.classes, rootProps = __rest(props, ["label", "startIcon", "endIcon", "className", "isCurrent", "children", "classes"]);
+    var label = props.label, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, isCurrent = props.isCurrent, children = props.children, propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["label", "startIcon", "endIcon", "className", "isCurrent", "children", "classes", "analyticsId"]);
     var classes = (0, classes_1.useMergedClasses)(breadcrumbs_item_classes_1.breadcrumbsItemClasses, breadcrumbs_item_classes_1.getBreadcrumbsItemUtilityClass, propClasses);
-    return (React.createElement(Root, __assign({ variant: "subtitle2", color: isCurrent ? 'textPrimary' : 'textSecondary', className: (0, clsx_1.default)(classes.root, isCurrent && classes.current, className), "aria-current": isCurrent ? 'page' : undefined, ref: ref }, rootProps),
+    return (React.createElement(Root, __assign({ variant: "subtitle2", color: isCurrent ? 'textPrimary' : 'textSecondary', className: (0, clsx_1.default)(classes.root, isCurrent && classes.current, className), "aria-current": isCurrent ? 'page' : undefined, ref: ref, analyticsId: analyticsId }, rootProps),
         !!startIcon && React.createElement(StartIcon, { className: (0, clsx_1.default)(classes.icon, classes.startIcon) }, startIcon),
         React.createElement("span", { className: classes.label }, label || children),
         !!endIcon && React.createElement(EndIcon, { className: (0, clsx_1.default)(classes.icon, classes.endIcon) }, endIcon)));

package/button/button.d.ts

@@ -14,6 +14,7 @@ export interface IButtonTypeMap<P = {}, D extends React.ElementType = 'button'>
         label?: React.ReactNode;
         SpinnerProps?: Partial<ISpinnerProps>;
         maxWidth?: string;
+        analyticsId?: string;
     };
     defaultComponent: D;
 }

package/button/button.js

@@ -86,14 +86,14 @@ var LabelSpan = (0, styled_1.styled)('span')(function (_a) {
     });
 });
 exports.Button = React.forwardRef(function (_a, ref) {
-    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth"]);
+    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, analyticsId = _a.analyticsId, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth", "analyticsId"]);
     var title = label ||
         (typeof children === 'string'
             ? children
             : React.Children.toArray(children)
                 .filter(function (child) { return typeof child === 'string'; })
                 .join(''));
-    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }),
+    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }, (analyticsId && { 'data-analytics-id': analyticsId })),
         React.createElement(LabelSpan, { style: { maxWidth: rootProps.fullWidth ? 'none' : maxWidth || '100%' } }, label || children),
         ' ',
         !!isLoading && React.createElement(ButtonSpinner, __assign({}, SpinnerProps))));

package/card/card.d.ts

@@ -17,6 +17,7 @@ export interface ICardTypeMap<P = {}, D extends React.ElementType = 'div'> {
          * @default outlined
          */
         variant?: PaperProps['variant'];
+        analyticsId?: string;
     };
     defaultComponent: D;
 }

package/card/card.js

@@ -121,7 +121,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
 exports.Card = React.forwardRef(function (props, ref) {
     var button = props.button, _a = props.component, component = _a === void 0 ? 'div' : _a, disabled = props.disabled, className = props.className, selected = props.selected, selectableButton = props.selectableButton, _b = props.size, size = _b === void 0 ? 'large' : _b, 
     // remove to prevent passing through to the root
-    propClasses = props.classes, rootProps = __rest(props, ["button", "component", "disabled", "className", "selected", "selectableButton", "size", "classes"]);
+    propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["button", "component", "disabled", "className", "selected", "selectableButton", "size", "classes", "analyticsId"]);
     return (React.createElement(card_context_1.CardContext.Provider, { value: { size: size } },
         React.createElement(Root, __assign({}, { component: component }, { ownerState: {
                 size: size,
@@ -129,5 +129,5 @@ exports.Card = React.forwardRef(function (props, ref) {
                 selectableButton: selectableButton,
                 button: button,
                 selected: selected,
-            } }, rootProps, { className: className, role: button ? 'button' : undefined, tabIndex: button && !disabled ? 0 : undefined, "aria-disabled": disabled, ref: ref }))));
+            } }, (analyticsId && { 'data-analytics-id': analyticsId }), rootProps, { className: className, role: button ? 'button' : undefined, tabIndex: button && !disabled ? 0 : undefined, "aria-disabled": disabled, ref: ref }))));
 });

package/chip/chip.d.ts

@@ -3,5 +3,6 @@ import { ChipProps } from '@mui/material/Chip';
 export declare const chipComponentName: "QuantumChip";
 export interface IChipProps extends Omit<ChipProps, 'color' | 'variant'> {
     selected?: boolean;
+    analyticsId?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<Omit<IChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/chip/chip.js

@@ -81,6 +81,6 @@ var Root = (0, styled_1.styled)(Chip_1.default, { name: exports.chipComponentNam
         _b))));
 });
 exports.Chip = React.forwardRef(function (props, ref) {
-    var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(icon_1.XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);
-    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
+    var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(icon_1.XIcon, null) : _a, analyticsId = props.analyticsId, chipProps = __rest(props, ["selected", "deleteIcon", "analyticsId"]);
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
 });

package/date-picker/date-picker-context.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 export interface IDatePickerContextValue {
     dateFormat: string;
     timeFormat?: string;
+    minDate?: string | number | Date;
+    maxDate?: string | number | Date;
     onSelectDate(date: string, shouldClose?: boolean): void;
     isRangeSelection?: boolean;
     showTimeInput?: boolean;

package/date-picker/date-picker-context.js

@@ -28,6 +28,8 @@ var React = __importStar(require("react"));
 exports.DatePickerContext = React.createContext({
     dateFormat: 'MM/dd/yyyy',
     timeFormat: 'HH:mm:ss',
+    minDate: undefined,
+    maxDate: undefined,
     onSelectDate: function () { return undefined; },
     isRangeSelection: false,
     showTimeInput: false,

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

@@ -60,6 +60,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));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -75,9 +84,9 @@ var dropdown_menu_1 = require("../dropdown-menu");
 var popover_1 = require("../popover");
 var styled_1 = require("../styled");
 var classes_1 = require("../styles/classes");
-var text_field_1 = require("../text-field");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var date_picker_classes_1 = require("./date-picker-classes");
+var date_picker_time_input_1 = require("./date-picker-time-input");
 var date_picker_utils_1 = require("./date-picker-utils");
 var Root = (0, styled_1.styled)(popover_1.Popover, { name: date_picker_classes_1.datePickerPopoverComponentName, slot: 'Root' })(function (_a) {
     var theme = _a.theme;
@@ -171,6 +180,7 @@ var CalendarWrapper = (0, styled_1.styled)('div', { name: date_picker_classes_1.
         '.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,
@@ -218,153 +228,127 @@ var ButtonContainer = (0, styled_1.styled)(box_1.Box, { name: date_picker_classe
         borderTop: "1px solid ".concat(theme.tokens.color_border_default),
     });
 });
-var TimeInputContainer = (0, styled_1.styled)('div', { name: date_picker_classes_1.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 = (0, styled_1.styled)('div', { name: date_picker_classes_1.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 = (0, styled_1.styled)(text_field_1.TextField, { name: date_picker_classes_1.datePickerPopoverComponentName, slot: 'TimeInputField' })({
-    width: '3rem',
-});
-var TimeInputLabel = (0, styled_1.styled)('span', { name: date_picker_classes_1.datePickerPopoverComponentName, slot: 'TimeInputLabel' })(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: theme.tokens.color_fg_default,
-        fontSize: theme.typography.caption.fontSize,
-    });
-});
 exports.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 = (0, classes_1.useMergedClasses)(date_picker_classes_1.datePickerPopoverClasses, date_picker_classes_1.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 = (0, date_picker_utils_1.parseDateRange)(value, dateFormat, showTimeInput ? timeFormat : undefined), from = _a.from, to = _a.to;
-                if (from) {
-                    // Extract time components for range start
-                    var _b = (0, date_picker_utils_1.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 = (0, date_picker_utils_1.parseDate)(value, formatString);
+        if (date) {
+            setRangeSelection({ from: date });
+            if (showTimeInput) {
+                var timeComponents = (0, date_picker_utils_1.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 = (0, date_picker_utils_1.parseDateRange)(value, dateFormat, showTimeInput ? timeFormat : undefined), from = _a.from, to = _a.to;
+        if (from && to) {
+            setRangeSelection({ from: from, to: to });
+            var startTimeComponents = (0, date_picker_utils_1.extractTimeComponents)(from);
+            setStartTime(startTimeComponents);
+            var endTimeComponents = (0, date_picker_utils_1.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 = (0, date_picker_utils_1.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 = (0, date_picker_utils_1.parseDate)(value, formatString);
-                if (date) {
-                    setRangeSelection({ from: date });
-                    if (showTimeInput) {
-                        // Extract time components
-                        var _d = (0, date_picker_utils_1.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 = (0, date_picker_utils_1.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 = (0, date_picker_utils_1.applyTimeToDate)(selection.from, { hours: hours, minutes: minutes, seconds: seconds });
+                var newFrom = (0, date_picker_utils_1.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 = (0, date_picker_utils_1.applyTimeToDate)(selection.from, { hours: hours, minutes: minutes, seconds: seconds });
-                var newTo = (0, date_picker_utils_1.applyTimeToDate)(selection.to, { hours: endHours, minutes: endMinutes, seconds: endSeconds });
-                setRangeSelection({ from: newFrom, to: newTo });
-            }
-            else {
-                setRangeSelection(selection);
-            }
+        if (showTimeInput) {
+            var newFrom = (0, date_picker_utils_1.applyTimeToDate)(selection.from, startTime);
+            var newTo = (0, date_picker_utils_1.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 = (0, date_picker_utils_1.applyTimeToDate)(rangeSelection.from, { hours: hours, minutes: minutes, seconds: seconds });
+        var newFrom = (0, date_picker_utils_1.applyTimeToDate)(rangeSelection.from, startTimeValue);
         if (isRangeSelection && rangeSelection.to) {
-            var newTo = (0, date_picker_utils_1.applyTimeToDate)(rangeSelection.to, {
-                hours: endHours,
-                minutes: endMinutes,
-                seconds: endSeconds,
-            });
+            var newTo = (0, date_picker_utils_1.applyTimeToDate)(rangeSelection.to, endTimeValue);
             setRangeSelection({ from: newFrom, to: newTo });
         }
         else {
@@ -384,9 +368,16 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
                 var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
                 var formattedDate = (0, date_picker_utils_1.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');
@@ -410,13 +401,12 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
         var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
         var parsedDate = (0, date_picker_utils_1.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;
@@ -433,26 +423,13 @@ exports.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(dropdown_menu_1.DropdownMenuList, null, options.map(function (option, index) { return (React.createElement(dropdown_menu_1.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(react_day_picker_1.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(react_day_picker_1.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(date_picker_time_input_1.DatePickerTimeInput, { startTime: startTime, endTime: endTime, isRangeSelection: isRangeSelection, onStartTimeChange: handleStartTimeChange, onEndTimeChange: handleEndTimeChange, onClear: handleTimeClear })),
             showActionButtons && (React.createElement(ButtonContainer, { className: classes.buttonContainer },
+                React.createElement(button_1.Button, { size: "small", variant: "link", onClick: clearSelection, style: { marginRight: 'auto' } }, "Clear"),
                 React.createElement(button_1.Button, { size: "small", variant: "outlined", onClick: cancelSelection, style: { marginRight: 8 } }, "Cancel"),
-                React.createElement(button_1.Button, { size: "small", variant: "contained", color: "primary", onClick: function () { return applySelection(); }, disabled: !canApply }, "Apply"))))))));
+                React.createElement(button_1.Button, { size: "small", variant: "contained", color: "primary", onClick: function () { return applySelection(); }, disabled: !canApplyDate }, "Apply"))))))));
 });

package/date-picker/date-picker-time-input.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface ITimeValue {
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+export interface IDatePickerTimeInputProps {
+    /** Start time values */
+    startTime: ITimeValue;
+    /** End time values (only used when isRangeSelection is true) */
+    endTime?: ITimeValue;
+    /** Whether this is for range selection (shows both start and end time inputs) */
+    isRangeSelection?: boolean;
+    /** Called when start time values change */
+    onStartTimeChange: (time: ITimeValue) => void;
+    /** Called when end time values change (only used when isRangeSelection is true) */
+    onEndTimeChange?: (time: ITimeValue) => void;
+    /** Called when time values should be cleared */
+    onClear?: () => void;
+}
+export declare const DatePickerTimeInput: React.ForwardRefExoticComponent<IDatePickerTimeInputProps & React.RefAttributes<HTMLDivElement>>;