@auth0/quantum-product 2.9.5 → 2.9.7

package/chip/chip.js

@@ -92,5 +92,5 @@ var Root = (0, styled_1.styled)(Chip_1.default, { name: exports.chipComponentNam
 });
 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, 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 })));
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected }, title: props === null || props === void 0 ? void 0 : props.label }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps)));
 });

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

@@ -108,7 +108,9 @@ var Content = (0, styled_1.styled)(card_1.Card, { name: date_picker_classes_1.da
     var theme = _a.theme, ownerState = _a.ownerState;
     return ({
         maxHeight: 'calc(100% - 96px)',
-        minWidth: theme.typography.pxToRem(180),
+        minWidth: ownerState.currentView === 'options' && ownerState.inputWidth
+            ? "".concat(ownerState.inputWidth, "px")
+            : theme.typography.pxToRem(180),
         width: ownerState.currentView === 'options'
             ? ownerState.inputWidth
                 ? "".concat(ownerState.inputWidth, "px")
@@ -239,23 +241,36 @@ var ButtonContainer = (0, styled_1.styled)(box_1.Box, { name: date_picker_classe
     });
 });
 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, 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 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, widthRef = props.widthRef, propClasses = props.classes, rootProps = __rest(props, ["anchorEl", "open", "onClose", "onDateSelect", "options", "value", "dateFormat", "timeFormat", "minDate", "maxDate", "PopoverProps", "showTwoMonths", "isRangeSelection", "showTimeInput", "widthRef", "classes"]);
     var classes = (0, classes_1.useMergedClasses)(date_picker_classes_1.datePickerPopoverClasses, date_picker_classes_1.getDatePickerPopoverUtilityClass, propClasses);
-    var _f = __read(React.useState(options ? 'options' : 'calendar'), 2), currentView = _f[0], setCurrentView = _f[1];
+    var isCustomValue = React.useMemo(function () {
+        if (!options || !value)
+            return false;
+        return !options.some(function (option) { return option.value !== 'custom' && option.value === value; });
+    }, [options, value]);
+    var getInitialView = React.useCallback(function () {
+        if (!options)
+            return 'calendar';
+        if (value && isCustomValue)
+            return 'calendar';
+        return 'options';
+    }, [options, value, isCustomValue]);
+    var _f = __read(React.useState(getInitialView()), 2), currentView = _f[0], setCurrentView = _f[1];
     var _g = __read(React.useState({}), 2), rangeSelection = _g[0], setRangeSelection = _g[1];
     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({});
-            if (options) {
-                setCurrentView('options');
-            }
+            setCurrentView(getInitialView());
         }
-    }, [open, options]);
-    // Parse and set single date selection when value changes
+    }, [open, getInitialView]);
+    React.useEffect(function () {
+        if (open && options && value && isCustomValue) {
+            setCurrentView('calendar');
+        }
+    }, [open, options, value, isCustomValue]);
     React.useEffect(function () {
         if (!value || isRangeSelection || !open)
             return;
@@ -271,7 +286,7 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
     }, [open, value, isRangeSelection, dateFormat, timeFormat, showTimeInput]);
     // Parse and set range selection when value changes
     React.useEffect(function () {
-        if (!open || !value || !isRangeSelection || !value.includes('-'))
+        if (!open || !value || !isRangeSelection || !value.includes(date_picker_utils_1.DATE_RANGE_SEPARATOR))
             return;
         var _a = (0, date_picker_utils_1.parseDateRange)(value, dateFormat, showTimeInput ? timeFormat : undefined), from = _a.from, to = _a.to;
         if (from && to) {
@@ -307,7 +322,6 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
                     selectedDate = selection.to;
                 }
             }
-            // Apply the selected date if found
             if (selectedDate) {
                 if (showTimeInput) {
                     var newDate = (0, date_picker_utils_1.applyTimeToDate)(selectedDate, startTime);
@@ -320,7 +334,6 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
             }
             return;
         }
-        // Handle range selection mode - with early returns to reduce nesting
         if (!selection.from)
             return;
         if (!selection.to) {
@@ -418,11 +431,14 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
     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;
-            setInputWidth(width);
+        if (open) {
+            var elementToMeasure = (widthRef === null || widthRef === void 0 ? void 0 : widthRef.current) || anchorEl;
+            if (elementToMeasure) {
+                var width = elementToMeasure.getBoundingClientRect().width;
+                setInputWidth(width);
+            }
         }
-    }, [open, anchorEl]);
+    }, [open, anchorEl, widthRef]);
     var ownerState = {
         showTwoMonths: showTwoMonths,
         isRangeSelection: isRangeSelection,
@@ -433,7 +449,7 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
         }, transformOrigin: {
             vertical: 'top',
             horizontal: 'left',
-        }, marginThreshold: 0, style: { marginTop: '-24px' } }, PopoverProps, rootProps),
+        }, marginThreshold: 0 }, 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, disabled: __spreadArray(__spreadArray([], __read((minDate ? [{ before: new Date(minDate) }] : [])), false), __read((maxDate ? [{ after: new Date(maxDate) }] : [])), false) })),

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

@@ -5,7 +5,7 @@ export interface IDatePickerTriggerProps {
     'aria-haspopup'?: 'dialog';
     'aria-expanded'?: boolean;
     id?: string;
-    onClick(event: React.MouseEvent<HTMLDivElement>): void;
+    onClick(event: React.MouseEvent<HTMLElement>): void;
 }
 export interface IDatePickerStateValue {
     triggerProps: IDatePickerTriggerProps;

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

@@ -26,6 +26,7 @@ export interface IDatePickerBaseProps {
     showTimeInput?: boolean;
     allowTimestampPasting?: boolean;
     timestampUnit?: 'ms' | 's';
+    openOnIconOnly?: boolean;
     classes?: Partial<DatePickerClasses>;
 }
 export interface IDatePickerPopoverProps {
@@ -43,5 +44,6 @@ export interface IDatePickerPopoverProps {
     showTwoMonths?: boolean;
     isRangeSelection?: boolean;
     showTimeInput?: boolean;
+    widthRef?: React.RefObject<HTMLElement>;
     classes?: Partial<DatePickerPopoverClasses>;
 }

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

@@ -1,3 +1,4 @@
+export declare const DATE_RANGE_SEPARATOR = " - ";
 /**
  * Formats a date object using the specified format string
  */

package/date-picker/date-picker-utils.js

@@ -27,8 +27,9 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseSmartDate = exports.applyTimeToDate = exports.extractTimeComponents = exports.formatDateRange = exports.parseDateRange = exports.parseTimestamp = exports.tryParseDate = exports.parseDate = exports.formatDate = void 0;
+exports.parseSmartDate = exports.applyTimeToDate = exports.extractTimeComponents = exports.formatDateRange = exports.parseDateRange = exports.parseTimestamp = exports.tryParseDate = exports.parseDate = exports.formatDate = exports.DATE_RANGE_SEPARATOR = void 0;
 var date_fns_1 = require("date-fns");
+exports.DATE_RANGE_SEPARATOR = ' - ';
 /**
  * Formats a date object using the specified format string
  */
@@ -93,10 +94,10 @@ exports.parseTimestamp = parseTimestamp;
  * Parses a date range string (format: "start - end")
  */
 var parseDateRange = function (rangeString, dateFormat, timeFormat) {
-    if (!rangeString.includes('-')) {
+    if (!rangeString.includes(exports.DATE_RANGE_SEPARATOR)) {
         return { from: null, to: null };
     }
-    var _a = __read(rangeString.split('-').map(function (s) { return s.trim(); }), 2), fromStr = _a[0], toStr = _a[1];
+    var _a = __read(rangeString.split(exports.DATE_RANGE_SEPARATOR).map(function (s) { return s.trim(); }), 2), fromStr = _a[0], toStr = _a[1];
     var fullFormat = timeFormat ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
     var from = (0, exports.parseDate)(fromStr, fullFormat);
     var to = (0, exports.parseDate)(toStr, fullFormat);
@@ -119,7 +120,7 @@ var formatDateRange = function (from, to, dateFormat, timeFormat) {
     if (!to) {
         return (0, exports.formatDate)(from, formatString);
     }
-    return "".concat((0, exports.formatDate)(from, formatString), " - ").concat((0, exports.formatDate)(to, formatString));
+    return "".concat((0, exports.formatDate)(from, formatString)).concat(exports.DATE_RANGE_SEPARATOR).concat((0, exports.formatDate)(to, formatString));
 };
 exports.formatDateRange = formatDateRange;
 /**

package/date-picker/date-picker.js

@@ -77,6 +77,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 var React = __importStar(require("react"));
 var icon_1 = require("../icon");
+var icon_button_1 = require("../icon-button");
 var styled_1 = require("../styled");
 var classes_1 = require("../styles/classes");
 var text_field_1 = require("../text-field");
@@ -91,12 +92,14 @@ 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, 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 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.openOnIconOnly, openOnIconOnly = _q === void 0 ? false : _q, _r = props.TextFieldProps, TextFieldProps = _r === void 0 ? {} : _r, 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", "openOnIconOnly", "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;
-    var _s = __read(React.useState(value || ''), 2), displayValue = _s[0], setDisplayValue = _s[1];
+    var _s = externalState || internalState, triggerProps = _s.triggerProps, popoverProps = _s.popoverProps;
+    var _t = __read(React.useState(value || ''), 2), displayValue = _t[0], setDisplayValue = _t[1];
     var inputRef = React.useRef(null);
+    var textFieldRef = React.useRef(null);
+    var _u = __read(React.useState(null), 2), anchorEl = _u[0], setAnchorEl = _u[1];
     React.useEffect(function () {
         setDisplayValue(value || '');
     }, [value]);
@@ -107,9 +110,14 @@ exports.DatePicker = React.forwardRef(function (props, ref) {
             onChange(newValue);
         }
         if (shouldClose) {
+            setAnchorEl(null);
             popoverProps.onClose();
         }
     };
+    var handlePopoverClose = function () {
+        setAnchorEl(null);
+        popoverProps.onClose();
+    };
     var handlePaste = function (event) {
         if (!allowTimestampPasting)
             return;
@@ -164,13 +172,31 @@ exports.DatePicker = React.forwardRef(function (props, ref) {
             showTimeInput: showTimeInput,
         } },
         React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root), ownerState: ownerState }, rootProps),
-            React.createElement(text_field_1.TextField, __assign({ value: displayValue, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, fullWidth: fullWidth, size: size, readOnly: readOnly, required: required, error: error, helperText: helperText, inputRef: inputRef, endAdornment: React.createElement(icon_1.CalendarIcon, null), className: classes.input }, triggerProps, { onClick: function (e) {
-                    if (!disabled && !readOnly) {
+            React.createElement(text_field_1.TextField, __assign({ ref: textFieldRef, value: displayValue, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, fullWidth: fullWidth, size: size, readOnly: readOnly, required: required, error: error, helperText: helperText, inputRef: inputRef, endAdornment: openOnIconOnly ? (React.createElement(icon_button_1.IconButton, { label: "Open calendar", color: "inherit", size: "small", variant: "link", "aria-label": "Open calendar", disabled: disabled, sx: {
+                        padding: 0,
+                        marginRight: '-9px',
+                        borderRadius: 0.25,
+                        '&:focus': {
+                            outline: 'none',
+                            backgroundColor: function (theme) { return theme.tokens.color_bg_button_hover; },
+                        },
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                        if (!disabled && !readOnly && inputRef.current) {
+                            setAnchorEl(inputRef.current);
+                            triggerProps.onClick(e);
+                        }
+                    } },
+                    React.createElement(icon_1.CalendarIcon, { size: 16 }))) : (React.createElement(icon_1.CalendarIcon, { size: 16 })), className: classes.input }, triggerProps, { onClick: function (e) {
+                    if (!disabled && !readOnly && !openOnIconOnly) {
+                        if (inputRef.current) {
+                            setAnchorEl(inputRef.current);
+                        }
                         triggerProps.onClick(e);
                     }
                     if (TextFieldProps.onClick) {
                         TextFieldProps.onClick(e);
                     }
                 } }, TextFieldProps)),
-            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 })))));
+            React.createElement(date_picker_popover_1.DatePickerPopover, __assign({}, popoverProps, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handlePopoverClose, onDateSelect: handleDateSelect, options: options, minDate: minDate, maxDate: maxDate, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput, widthRef: textFieldRef })))));
 });

package/esm/chip/chip.js

@@ -56,5 +56,5 @@ var Root = styled(MuiChip, { name: chipComponentName, slot: 'Root' })(function (
 });
 export var Chip = React.forwardRef(function (props, ref) {
     var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(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 })));
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected }, title: props === null || props === void 0 ? void 0 : props.label }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps)));
 });

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

@@ -58,7 +58,7 @@ import { useMergedClasses } from '../styles/classes';
 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';
+import { applyTimeToDate, DATE_RANGE_SEPARATOR, extractTimeComponents, formatDate, formatDateRange, parseDate, parseDateRange, } from './date-picker-utils';
 var Root = styled(Popover, { name: datePickerPopoverComponentName, slot: 'Root' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -69,7 +69,9 @@ var Content = styled(Card, { name: datePickerPopoverComponentName, slot: 'Conten
     var theme = _a.theme, ownerState = _a.ownerState;
     return ({
         maxHeight: 'calc(100% - 96px)',
-        minWidth: theme.typography.pxToRem(180),
+        minWidth: ownerState.currentView === 'options' && ownerState.inputWidth
+            ? "".concat(ownerState.inputWidth, "px")
+            : theme.typography.pxToRem(180),
         width: ownerState.currentView === 'options'
             ? ownerState.inputWidth
                 ? "".concat(ownerState.inputWidth, "px")
@@ -200,23 +202,36 @@ var ButtonContainer = styled(Box, { name: datePickerPopoverComponentName, slot:
     });
 });
 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, 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 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, widthRef = props.widthRef, propClasses = props.classes, rootProps = __rest(props, ["anchorEl", "open", "onClose", "onDateSelect", "options", "value", "dateFormat", "timeFormat", "minDate", "maxDate", "PopoverProps", "showTwoMonths", "isRangeSelection", "showTimeInput", "widthRef", "classes"]);
     var classes = useMergedClasses(datePickerPopoverClasses, getDatePickerPopoverUtilityClass, propClasses);
-    var _f = __read(React.useState(options ? 'options' : 'calendar'), 2), currentView = _f[0], setCurrentView = _f[1];
+    var isCustomValue = React.useMemo(function () {
+        if (!options || !value)
+            return false;
+        return !options.some(function (option) { return option.value !== 'custom' && option.value === value; });
+    }, [options, value]);
+    var getInitialView = React.useCallback(function () {
+        if (!options)
+            return 'calendar';
+        if (value && isCustomValue)
+            return 'calendar';
+        return 'options';
+    }, [options, value, isCustomValue]);
+    var _f = __read(React.useState(getInitialView()), 2), currentView = _f[0], setCurrentView = _f[1];
     var _g = __read(React.useState({}), 2), rangeSelection = _g[0], setRangeSelection = _g[1];
     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({});
-            if (options) {
-                setCurrentView('options');
-            }
+            setCurrentView(getInitialView());
         }
-    }, [open, options]);
-    // Parse and set single date selection when value changes
+    }, [open, getInitialView]);
+    React.useEffect(function () {
+        if (open && options && value && isCustomValue) {
+            setCurrentView('calendar');
+        }
+    }, [open, options, value, isCustomValue]);
     React.useEffect(function () {
         if (!value || isRangeSelection || !open)
             return;
@@ -232,7 +247,7 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
     }, [open, value, isRangeSelection, dateFormat, timeFormat, showTimeInput]);
     // Parse and set range selection when value changes
     React.useEffect(function () {
-        if (!open || !value || !isRangeSelection || !value.includes('-'))
+        if (!open || !value || !isRangeSelection || !value.includes(DATE_RANGE_SEPARATOR))
             return;
         var _a = parseDateRange(value, dateFormat, showTimeInput ? timeFormat : undefined), from = _a.from, to = _a.to;
         if (from && to) {
@@ -268,7 +283,6 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
                     selectedDate = selection.to;
                 }
             }
-            // Apply the selected date if found
             if (selectedDate) {
                 if (showTimeInput) {
                     var newDate = applyTimeToDate(selectedDate, startTime);
@@ -281,7 +295,6 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
             }
             return;
         }
-        // Handle range selection mode - with early returns to reduce nesting
         if (!selection.from)
             return;
         if (!selection.to) {
@@ -379,11 +392,14 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
     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;
-            setInputWidth(width);
+        if (open) {
+            var elementToMeasure = (widthRef === null || widthRef === void 0 ? void 0 : widthRef.current) || anchorEl;
+            if (elementToMeasure) {
+                var width = elementToMeasure.getBoundingClientRect().width;
+                setInputWidth(width);
+            }
         }
-    }, [open, anchorEl]);
+    }, [open, anchorEl, widthRef]);
     var ownerState = {
         showTwoMonths: showTwoMonths,
         isRangeSelection: isRangeSelection,
@@ -394,7 +410,7 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
         }, transformOrigin: {
             vertical: 'top',
             horizontal: 'left',
-        }, marginThreshold: 0, style: { marginTop: '-24px' } }, PopoverProps, rootProps),
+        }, marginThreshold: 0 }, 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, disabled: __spreadArray(__spreadArray([], __read((minDate ? [{ before: new Date(minDate) }] : [])), false), __read((maxDate ? [{ after: new Date(maxDate) }] : [])), false) })),

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

@@ -26,6 +26,7 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import { format, isValid, parse } from 'date-fns';
+export var DATE_RANGE_SEPARATOR = ' - ';
 /**
  * Formats a date object using the specified format string
  */
@@ -86,10 +87,10 @@ export var parseTimestamp = function (timestamp, unit) {
  * Parses a date range string (format: "start - end")
  */
 export var parseDateRange = function (rangeString, dateFormat, timeFormat) {
-    if (!rangeString.includes('-')) {
+    if (!rangeString.includes(DATE_RANGE_SEPARATOR)) {
         return { from: null, to: null };
     }
-    var _a = __read(rangeString.split('-').map(function (s) { return s.trim(); }), 2), fromStr = _a[0], toStr = _a[1];
+    var _a = __read(rangeString.split(DATE_RANGE_SEPARATOR).map(function (s) { return s.trim(); }), 2), fromStr = _a[0], toStr = _a[1];
     var fullFormat = timeFormat ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
     var from = parseDate(fromStr, fullFormat);
     var to = parseDate(toStr, fullFormat);
@@ -111,7 +112,7 @@ export var formatDateRange = function (from, to, dateFormat, timeFormat) {
     if (!to) {
         return formatDate(from, formatString);
     }
-    return "".concat(formatDate(from, formatString), " - ").concat(formatDate(to, formatString));
+    return "".concat(formatDate(from, formatString)).concat(DATE_RANGE_SEPARATOR).concat(formatDate(to, formatString));
 };
 /**
  * Extract time components from a date

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

@@ -38,6 +38,7 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import * as React from 'react';
 import { CalendarIcon } from '../icon';
+import { IconButton } from '../icon-button';
 import { styled } from '../styled';
 import { useMergedClasses } from '../styles/classes';
 import { TextField } from '../text-field';
@@ -52,12 +53,14 @@ var Root = styled('div', { name: datePickerComponentName, slot: 'Root' })({
     width: '100%',
 });
 export var 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, 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 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.openOnIconOnly, openOnIconOnly = _q === void 0 ? false : _q, _r = props.TextFieldProps, TextFieldProps = _r === void 0 ? {} : _r, 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", "openOnIconOnly", "TextFieldProps", "classes", "state"]);
     var classes = useMergedClasses(datePickerClasses, getDatePickerUtilityClass, propClasses);
     var internalState = useDatePickerState();
-    var _r = externalState || internalState, triggerProps = _r.triggerProps, popoverProps = _r.popoverProps;
-    var _s = __read(React.useState(value || ''), 2), displayValue = _s[0], setDisplayValue = _s[1];
+    var _s = externalState || internalState, triggerProps = _s.triggerProps, popoverProps = _s.popoverProps;
+    var _t = __read(React.useState(value || ''), 2), displayValue = _t[0], setDisplayValue = _t[1];
     var inputRef = React.useRef(null);
+    var textFieldRef = React.useRef(null);
+    var _u = __read(React.useState(null), 2), anchorEl = _u[0], setAnchorEl = _u[1];
     React.useEffect(function () {
         setDisplayValue(value || '');
     }, [value]);
@@ -68,9 +71,14 @@ export var DatePicker = React.forwardRef(function (props, ref) {
             onChange(newValue);
         }
         if (shouldClose) {
+            setAnchorEl(null);
             popoverProps.onClose();
         }
     };
+    var handlePopoverClose = function () {
+        setAnchorEl(null);
+        popoverProps.onClose();
+    };
     var handlePaste = function (event) {
         if (!allowTimestampPasting)
             return;
@@ -125,13 +133,31 @@ export var DatePicker = React.forwardRef(function (props, ref) {
             showTimeInput: showTimeInput,
         } },
         React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root), ownerState: ownerState }, rootProps),
-            React.createElement(TextField, __assign({ value: displayValue, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, fullWidth: fullWidth, size: size, readOnly: readOnly, required: required, error: error, helperText: helperText, inputRef: inputRef, endAdornment: React.createElement(CalendarIcon, null), className: classes.input }, triggerProps, { onClick: function (e) {
-                    if (!disabled && !readOnly) {
+            React.createElement(TextField, __assign({ ref: textFieldRef, value: displayValue, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, fullWidth: fullWidth, size: size, readOnly: readOnly, required: required, error: error, helperText: helperText, inputRef: inputRef, endAdornment: openOnIconOnly ? (React.createElement(IconButton, { label: "Open calendar", color: "inherit", size: "small", variant: "link", "aria-label": "Open calendar", disabled: disabled, sx: {
+                        padding: 0,
+                        marginRight: '-9px',
+                        borderRadius: 0.25,
+                        '&:focus': {
+                            outline: 'none',
+                            backgroundColor: function (theme) { return theme.tokens.color_bg_button_hover; },
+                        },
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                        if (!disabled && !readOnly && inputRef.current) {
+                            setAnchorEl(inputRef.current);
+                            triggerProps.onClick(e);
+                        }
+                    } },
+                    React.createElement(CalendarIcon, { size: 16 }))) : (React.createElement(CalendarIcon, { size: 16 })), className: classes.input }, triggerProps, { onClick: function (e) {
+                    if (!disabled && !readOnly && !openOnIconOnly) {
+                        if (inputRef.current) {
+                            setAnchorEl(inputRef.current);
+                        }
                         triggerProps.onClick(e);
                     }
                     if (TextFieldProps.onClick) {
                         TextFieldProps.onClick(e);
                     }
                 } }, TextFieldProps)),
-            React.createElement(DatePickerPopover, __assign({}, popoverProps, { onDateSelect: handleDateSelect, options: options, minDate: minDate, maxDate: maxDate, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput })))));
+            React.createElement(DatePickerPopover, __assign({}, popoverProps, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handlePopoverClose, onDateSelect: handleDateSelect, options: options, minDate: minDate, maxDate: maxDate, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput, widthRef: textFieldRef })))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.9.5",
+  "version": "2.9.7",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -25,7 +25,7 @@
     "react-dom": "*"
   },
   "scripts": {
-    "artifactory": "cd ./build && npm publish",
+    "artifactory": "cd ./build && npm publish --access public",
     "build-storybook": "storybook build",
     "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy:files",
     "build:cjs": "node --max-old-space-size=8192 ../../node_modules/.bin/tsc --project ./tsconfig.publish.json",