@auth0/quantum-product 2.6.0 → 2.7.1

package/date-picker/date-picker-time-input.js

@@ -0,0 +1,362 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerTimeInput = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var text_field_1 = require("../text-field");
+var date_picker_classes_1 = require("./date-picker-classes");
+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' })({
+    minWidth: '3rem',
+    width: '3rem',
+    '& .MuiOutlinedInput-input': {
+        textAlign: 'center',
+    },
+});
+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.DatePickerTimeInput = React.forwardRef(function (props, ref) {
+    var startTime = props.startTime, endTime = props.endTime, _a = props.isRangeSelection, isRangeSelection = _a === void 0 ? false : _a, onStartTimeChange = props.onStartTimeChange, onEndTimeChange = props.onEndTimeChange, onClear = props.onClear;
+    // Refs for time input navigation
+    var hoursRef = React.useRef(null);
+    var minutesRef = React.useRef(null);
+    var secondsRef = React.useRef(null);
+    var endHoursRef = React.useRef(null);
+    var endMinutesRef = React.useRef(null);
+    var endSecondsRef = React.useRef(null);
+    var handleTimeChange = function (value, timeType, field, max) {
+        var _a, _b;
+        var numValue = value.replace(/\D/g, '');
+        var parsed = parseInt(numValue, 10);
+        var newValue = '00';
+        if (!isNaN(parsed) && parsed >= 0 && parsed <= max) {
+            newValue = parsed.toString().padStart(2, '0');
+        }
+        else if (value === '') {
+            newValue = '00';
+        }
+        if (timeType === 'start') {
+            var newTime = __assign(__assign({}, startTime), (_a = {}, _a[field] = newValue, _a));
+            onStartTimeChange(newTime);
+        }
+        else if (timeType === 'end' && endTime && onEndTimeChange) {
+            var newTime = __assign(__assign({}, endTime), (_b = {}, _b[field] = newValue, _b));
+            onEndTimeChange(newTime);
+        }
+    };
+    var clearAllTimeInputs = React.useCallback(function () {
+        var clearedTime = { hours: '00', minutes: '00', seconds: '00' };
+        onStartTimeChange(clearedTime);
+        if (isRangeSelection && onEndTimeChange) {
+            onEndTimeChange(clearedTime);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        setTimeout(function () {
+            var _a, _b;
+            (_a = hoursRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = hoursRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(0, 0);
+        }, 0);
+    }, [onStartTimeChange, onEndTimeChange, onClear, isRangeSelection]);
+    var handleArrowKeys = function (e, config, target, isAtStart, isAtEnd) {
+        var _a, _b;
+        switch (e.key) {
+            case 'ArrowUp': {
+                e.preventDefault();
+                var upValue = parseInt(config.currentValue, 10) || 0;
+                var newUpValue = upValue === config.max ? 0 : upValue + 1;
+                var newValueStr = newUpValue.toString().padStart(2, '0');
+                handleTimeChange(newValueStr, config.timeType, config.field, config.max);
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                var downValue = parseInt(config.currentValue, 10) || 0;
+                var newDownValue = downValue === 0 ? config.max : downValue - 1;
+                var newValueStr = newDownValue.toString().padStart(2, '0');
+                handleTimeChange(newValueStr, config.timeType, config.field, config.max);
+                break;
+            }
+            case 'ArrowRight':
+                if (isAtEnd && ((_a = config.nextRef) === null || _a === void 0 ? void 0 : _a.current)) {
+                    e.preventDefault();
+                    config.nextRef.current.focus();
+                    config.nextRef.current.setSelectionRange(0, 0);
+                }
+                break;
+            case 'ArrowLeft':
+                if (isAtStart && ((_b = config.prevRef) === null || _b === void 0 ? void 0 : _b.current)) {
+                    e.preventDefault();
+                    config.prevRef.current.focus();
+                    config.prevRef.current.setSelectionRange(2, 2);
+                }
+                break;
+        }
+    };
+    var handleEditKeys = function (e, config, target, startPos, endPos, isAtStart) {
+        var _a;
+        switch (e.key) {
+            case 'Backspace':
+                if (isAtStart && ((_a = config.prevRef) === null || _a === void 0 ? void 0 : _a.current)) {
+                    e.preventDefault();
+                    config.prevRef.current.focus();
+                    config.prevRef.current.setSelectionRange(2, 2);
+                }
+                else if (startPos === endPos) {
+                    e.preventDefault();
+                    var newPos_1 = Math.max(0, startPos - 1);
+                    var newValue = target.value.substring(0, newPos_1) + '0' + target.value.substring(startPos);
+                    var parsed = parseInt(newValue, 10) || 0;
+                    if (parsed <= config.max) {
+                        handleTimeChange(newValue, config.timeType, config.field, config.max);
+                        setTimeout(function () { return target.setSelectionRange(newPos_1, newPos_1); }, 0);
+                    }
+                }
+                break;
+            case 'Delete':
+                if (startPos === endPos) {
+                    e.preventDefault();
+                    var newValue = target.value.substring(0, startPos) + '0' + target.value.substring(startPos + 1);
+                    var parsed = parseInt(newValue, 10) || 0;
+                    if (parsed <= config.max) {
+                        handleTimeChange(newValue, config.timeType, config.field, config.max);
+                        setTimeout(function () { return target.setSelectionRange(startPos, startPos); }, 0);
+                    }
+                }
+                break;
+        }
+    };
+    var handleNumberInput = function (e, config, target, startPos, endPos) {
+        if (!/^[0-9]$/.test(e.key))
+            return;
+        e.preventDefault();
+        var newValue = target.value;
+        if (startPos === endPos) {
+            if (target.value.length < 2) {
+                newValue = target.value + e.key;
+            }
+            else {
+                newValue = target.value.substring(0, startPos) + e.key + target.value.substring(startPos + 1);
+            }
+        }
+        else {
+            newValue = target.value.substring(0, startPos) + e.key + target.value.substring(endPos);
+        }
+        var parsed = parseInt(newValue, 10) || 0;
+        if (parsed <= config.max) {
+            handleTimeChange(newValue, config.timeType, config.field, config.max);
+            var newPos_2 = Math.min(startPos + 1, 2);
+            setTimeout(function () {
+                var _a;
+                target.setSelectionRange(newPos_2, newPos_2);
+                if (newValue.length === 2 && startPos === 1 && ((_a = config.nextRef) === null || _a === void 0 ? void 0 : _a.current)) {
+                    config.nextRef.current.focus();
+                    config.nextRef.current.setSelectionRange(0, 0);
+                }
+            }, 0);
+        }
+    };
+    var handleTimeKeyDown = function (e, currentValue, timeType, field, max, nextRef, prevRef) {
+        var target = e.target;
+        var selectionStart = target.selectionStart, selectionEnd = target.selectionEnd;
+        var startPos = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
+        var endPos = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
+        var isAtStart = startPos === 0;
+        var isAtEnd = startPos === target.value.length;
+        var config = {
+            currentValue: currentValue,
+            timeType: timeType,
+            field: field,
+            max: max,
+            nextRef: nextRef,
+            prevRef: prevRef,
+        };
+        // Clear all inputs with Cmd/Ctrl + Backspace
+        if (e.key === 'Backspace' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            clearAllTimeInputs();
+            return;
+        }
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+            handleArrowKeys(e, config, target, isAtStart, isAtEnd);
+        }
+        else if (['Backspace', 'Delete'].includes(e.key)) {
+            handleEditKeys(e, config, target, startPos, endPos, isAtStart);
+        }
+        else {
+            handleNumberInput(e, config, target, startPos, endPos);
+        }
+    };
+    var parseTimeFromDigits = function (digitsOnly) {
+        var hours = '00';
+        var minutes = '00';
+        var seconds = '00';
+        if (digitsOnly.length === 6) {
+            hours = Math.min(parseInt(digitsOnly.substring(0, 2), 10), 23)
+                .toString()
+                .padStart(2, '0');
+            minutes = Math.min(parseInt(digitsOnly.substring(2, 4), 10), 59)
+                .toString()
+                .padStart(2, '0');
+            seconds = Math.min(parseInt(digitsOnly.substring(4, 6), 10), 59)
+                .toString()
+                .padStart(2, '0');
+        }
+        else if (digitsOnly.length === 4) {
+            hours = Math.min(parseInt(digitsOnly.substring(0, 2), 10), 23)
+                .toString()
+                .padStart(2, '0');
+            minutes = Math.min(parseInt(digitsOnly.substring(2, 4), 10), 59)
+                .toString()
+                .padStart(2, '0');
+        }
+        else if (digitsOnly.length <= 2) {
+            hours = Math.min(parseInt(digitsOnly, 10), 23).toString().padStart(2, '0');
+        }
+        else {
+            var paddedDigits = digitsOnly.padStart(4, '0');
+            hours = Math.min(parseInt(paddedDigits.substring(0, 2), 10), 23)
+                .toString()
+                .padStart(2, '0');
+            minutes = Math.min(parseInt(paddedDigits.substring(2, 4), 10), 59)
+                .toString()
+                .padStart(2, '0');
+        }
+        return { hours: hours, minutes: minutes, seconds: seconds };
+    };
+    var getFocusTargetAfterPaste = function (digitsOnly, timeType) {
+        var isStart = timeType === 'start';
+        if (digitsOnly.length === 6) {
+            return isStart ? secondsRef : endSecondsRef;
+        }
+        else if (digitsOnly.length === 4) {
+            return isStart ? minutesRef : endMinutesRef;
+        }
+        else if (digitsOnly.length <= 2) {
+            return isStart ? hoursRef : endHoursRef;
+        }
+        else {
+            return isStart ? minutesRef : endMinutesRef;
+        }
+    };
+    var handleTimePaste = function (e, timeType) {
+        e.preventDefault();
+        var pastedText = e.clipboardData.getData('text').trim();
+        var digitsOnly = pastedText.replace(/\D/g, '').substring(0, 6);
+        if (digitsOnly.length === 0)
+            return;
+        var newTime = parseTimeFromDigits(digitsOnly);
+        var focusTargetRef = getFocusTargetAfterPaste(digitsOnly, timeType);
+        if (timeType === 'start') {
+            onStartTimeChange(newTime);
+        }
+        else if (timeType === 'end' && onEndTimeChange) {
+            onEndTimeChange(newTime);
+        }
+        setTimeout(function () {
+            var _a, _b;
+            (_a = focusTargetRef === null || focusTargetRef === void 0 ? void 0 : focusTargetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = focusTargetRef === null || focusTargetRef === void 0 ? void 0 : focusTargetRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(2, 2);
+        }, 0);
+    };
+    var getAccessibilityProps = function (timeType, field, value) {
+        var max = field === 'hours' ? 23 : 59;
+        var fieldLabel = field === 'hours' ? 'Hours' : field === 'minutes' ? 'Minutes' : 'Seconds';
+        var typeLabel = isRangeSelection ? (timeType === 'start' ? 'Start time' : 'End time') : 'Time';
+        return {
+            'aria-label': "".concat(typeLabel, " ").concat(fieldLabel.toLowerCase()),
+            'aria-describedby': 'time-input-help',
+            role: 'spinbutton',
+            'aria-valuemin': 0,
+            'aria-valuemax': max,
+            'aria-valuenow': parseInt(value, 10) || 0,
+        };
+    };
+    return (React.createElement(TimeInputContainer, { ref: ref },
+        React.createElement(TimeInputLabel, null, "Time:"),
+        React.createElement(TimeInput, { size: "small", value: startTime.hours, onChange: function (e) { return handleTimeChange(e.target.value, 'start', 'hours', 23); }, inputRef: hoursRef, placeholder: "HH", InputProps: {
+                onKeyDown: function (e) { return handleTimeKeyDown(e, startTime.hours, 'start', 'hours', 23, minutesRef, null); },
+            }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'start'); } }, getAccessibilityProps('start', 'hours', startTime.hours)) }),
+        React.createElement("span", null, ":"),
+        React.createElement(TimeInput, { size: "small", value: startTime.minutes, onChange: function (e) { return handleTimeChange(e.target.value, 'start', 'minutes', 59); }, inputRef: minutesRef, placeholder: "MM", InputProps: {
+                onKeyDown: function (e) { return handleTimeKeyDown(e, startTime.minutes, 'start', 'minutes', 59, secondsRef, hoursRef); },
+            }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'start'); } }, getAccessibilityProps('start', 'minutes', startTime.minutes)) }),
+        React.createElement("span", null, ":"),
+        React.createElement(TimeInput, { size: "small", value: startTime.seconds, onChange: function (e) { return handleTimeChange(e.target.value, 'start', 'seconds', 59); }, inputRef: secondsRef, placeholder: "SS", InputProps: {
+                onKeyDown: function (e) {
+                    return handleTimeKeyDown(e, startTime.seconds, 'start', 'seconds', 59, isRangeSelection ? endHoursRef : null, minutesRef);
+                },
+            }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'start'); } }, getAccessibilityProps('start', 'seconds', startTime.seconds)) }),
+        isRangeSelection && endTime && onEndTimeChange && (React.createElement(EndTimeInputContainer, null,
+            React.createElement(TimeInputLabel, null, "End Time:"),
+            React.createElement(TimeInput, { size: "small", value: endTime.hours, onChange: function (e) { return handleTimeChange(e.target.value, 'end', 'hours', 23); }, inputRef: endHoursRef, placeholder: "HH", InputProps: {
+                    onKeyDown: function (e) { return handleTimeKeyDown(e, endTime.hours, 'end', 'hours', 23, endMinutesRef, secondsRef); },
+                }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'end'); } }, getAccessibilityProps('end', 'hours', endTime.hours)) }),
+            React.createElement("span", null, ":"),
+            React.createElement(TimeInput, { size: "small", value: endTime.minutes, onChange: function (e) { return handleTimeChange(e.target.value, 'end', 'minutes', 59); }, inputRef: endMinutesRef, placeholder: "MM", InputProps: {
+                    onKeyDown: function (e) { return handleTimeKeyDown(e, endTime.minutes, 'end', 'minutes', 59, endSecondsRef, endHoursRef); },
+                }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'end'); } }, getAccessibilityProps('end', 'minutes', endTime.minutes)) }),
+            React.createElement("span", null, ":"),
+            React.createElement(TimeInput, { size: "small", value: endTime.seconds, onChange: function (e) { return handleTimeChange(e.target.value, 'end', 'seconds', 59); }, inputRef: endSecondsRef, placeholder: "SS", InputProps: {
+                    onKeyDown: function (e) { return handleTimeKeyDown(e, endTime.seconds, 'end', 'seconds', 59, null, endMinutesRef); },
+                }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'end'); } }, getAccessibilityProps('end', 'seconds', endTime.seconds)) })))));
+});
+exports.DatePickerTimeInput.displayName = 'DatePickerTimeInput';

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

@@ -10,6 +10,8 @@ export interface IDatePickerBaseProps {
     onChange?: (value: string) => void;
     dateFormat?: string;
     timeFormat?: string;
+    minDate?: string | number | Date;
+    maxDate?: string | number | Date;
     placeholder?: string;
     disabled?: boolean;
     fullWidth?: boolean;
@@ -35,6 +37,8 @@ export interface IDatePickerPopoverProps {
     value?: string;
     dateFormat?: string;
     timeFormat?: string;
+    minDate?: string | number | Date;
+    maxDate?: string | number | Date;
     PopoverProps?: Partial<IPopoverProps>;
     showTwoMonths?: boolean;
     isRangeSelection?: boolean;

package/date-picker/date-picker.js

@@ -81,7 +81,7 @@ var Root = (0, styled_1.styled)('div', { name: date_picker_classes_1.datePickerC
     width: '100%',
 });
 exports.DatePicker = React.forwardRef(function (props, ref) {
-    var value = props.value, onChange = props.onChange, _a = props.dateFormat, dateFormat = _a === void 0 ? 'MM/dd/yyyy' : _a, _b = props.timeFormat, timeFormat = _b === void 0 ? 'HH:mm:ss' : _b, _c = props.placeholder, placeholder = _c === void 0 ? dateFormat + (props.showTimeInput ? ' ' + timeFormat : '') : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = props.size, size = _f === void 0 ? 'medium' : _f, _g = props.readOnly, readOnly = _g === void 0 ? false : _g, _h = props.required, required = _h === void 0 ? false : _h, _j = props.error, error = _j === void 0 ? false : _j, helperText = props.helperText, options = props.options, _k = props.isRangeSelection, isRangeSelection = _k === void 0 ? false : _k, _l = props.showTwoMonths, showTwoMonths = _l === void 0 ? false : _l, _m = props.showTimeInput, showTimeInput = _m === void 0 ? false : _m, _o = props.allowTimestampPasting, allowTimestampPasting = _o === void 0 ? false : _o, _p = props.timestampUnit, timestampUnit = _p === void 0 ? 'ms' : _p, _q = props.TextFieldProps, TextFieldProps = _q === void 0 ? {} : _q, propClasses = props.classes, externalState = props.state, rootProps = __rest(props, ["value", "onChange", "dateFormat", "timeFormat", "placeholder", "disabled", "fullWidth", "size", "readOnly", "required", "error", "helperText", "options", "isRangeSelection", "showTwoMonths", "showTimeInput", "allowTimestampPasting", "timestampUnit", "TextFieldProps", "classes", "state"]);
+    var value = props.value, onChange = props.onChange, _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, _c = props.placeholder, placeholder = _c === void 0 ? dateFormat + (props.showTimeInput ? ' ' + timeFormat : '') : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = props.size, size = _f === void 0 ? 'medium' : _f, _g = props.readOnly, readOnly = _g === void 0 ? false : _g, _h = props.required, required = _h === void 0 ? false : _h, _j = props.error, error = _j === void 0 ? false : _j, helperText = props.helperText, options = props.options, _k = props.isRangeSelection, isRangeSelection = _k === void 0 ? false : _k, _l = props.showTwoMonths, showTwoMonths = _l === void 0 ? false : _l, _m = props.showTimeInput, showTimeInput = _m === void 0 ? false : _m, _o = props.allowTimestampPasting, allowTimestampPasting = _o === void 0 ? false : _o, _p = props.timestampUnit, timestampUnit = _p === void 0 ? 'ms' : _p, _q = props.TextFieldProps, TextFieldProps = _q === void 0 ? {} : _q, propClasses = props.classes, externalState = props.state, rootProps = __rest(props, ["value", "onChange", "dateFormat", "timeFormat", "minDate", "maxDate", "placeholder", "disabled", "fullWidth", "size", "readOnly", "required", "error", "helperText", "options", "isRangeSelection", "showTwoMonths", "showTimeInput", "allowTimestampPasting", "timestampUnit", "TextFieldProps", "classes", "state"]);
     var classes = (0, classes_1.useMergedClasses)(date_picker_classes_1.datePickerClasses, date_picker_classes_1.getDatePickerUtilityClass, propClasses);
     var internalState = (0, date_picker_state_1.useDatePickerState)();
     var _r = externalState || internalState, triggerProps = _r.triggerProps, popoverProps = _r.popoverProps;
@@ -147,6 +147,8 @@ exports.DatePicker = React.forwardRef(function (props, ref) {
     return (React.createElement(date_picker_context_1.DatePickerContext.Provider, { value: {
             dateFormat: dateFormat,
             timeFormat: timeFormat,
+            minDate: minDate,
+            maxDate: maxDate,
             onSelectDate: handleDateSelect,
             isRangeSelection: isRangeSelection,
             showTimeInput: showTimeInput,
@@ -160,5 +162,5 @@ exports.DatePicker = React.forwardRef(function (props, ref) {
                         TextFieldProps.onClick(e);
                     }
                 } }, TextFieldProps)),
-            React.createElement(date_picker_popover_1.DatePickerPopover, __assign({}, popoverProps, { onDateSelect: handleDateSelect, options: options, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput })))));
+            React.createElement(date_picker_popover_1.DatePickerPopover, __assign({}, popoverProps, { onDateSelect: handleDateSelect, options: options, minDate: minDate, maxDate: maxDate, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput })))));
 });

package/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.d.ts

@@ -14,5 +14,6 @@ export interface IDropdownMenuListItemProps extends Omit<IMenuItemProps, 'title'
     target?: string;
     rel?: string;
     classes?: Partial<DropdownMenuListItemClasses>;
+    analyticsId?: string;
 }
 export declare const DropdownMenuListItem: React.ForwardRefExoticComponent<Omit<IDropdownMenuListItemProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.js

@@ -159,7 +159,7 @@ var SelectedIcon = (0, styled_1.styled)('div', { name: dropdown_menu_list_item_c
     });
 });
 exports.DropdownMenuListItem = React.forwardRef(function (props, ref) {
-    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes"]);
+    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes", "analyticsId"]);
     var classes = (0, classes_1.useMergedClasses)(dropdown_menu_list_item_classes_1.dropdownMenuListItemClasses, dropdown_menu_list_item_classes_1.getDropdownMenuListItemUtilityClass, propClasses);
     var _b = (0, dropdown_menu_context_1.useDropdownMenuContext)(), size = _b.size, onSelectItem = _b.onSelectItem;
     var isDetailed = !!description;
@@ -192,7 +192,7 @@ exports.DropdownMenuListItem = React.forwardRef(function (props, ref) {
         color: color,
         disabled: disabled,
     };
-    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: (0, clsx_1.default)(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps),
+    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: (0, clsx_1.default)(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps, (analyticsId && { 'data-analytics-id': analyticsId })),
         !!startIcon && React.createElement(StartIcon, { className: (0, clsx_1.default)(classes.icon, classes.startIcon) }, startIcon),
         React.createElement(Content, { className: classes.content },
             React.createElement(Title, { ownerState: { isDetailed: isDetailed }, className: classes.title }, titleContent),

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

@@ -2,6 +2,8 @@ import * as React from 'react';
 export var DatePickerContext = React.createContext({
     dateFormat: 'MM/dd/yyyy',
     timeFormat: 'HH:mm:ss',
+    minDate: undefined,
+    maxDate: undefined,
     onSelectDate: function () { return undefined; },
     isRangeSelection: false,
     showTimeInput: false,