@auth0/quantum-product 2.5.8 → 2.6.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-classes.d.ts

@@ -0,0 +1,10 @@
+export declare const datePickerComponentName: "QuantumDatePicker";
+export declare const datePickerPopoverComponentName: "QuantumDatePickerPopover";
+export declare function getDatePickerUtilityClass(slot: string): string;
+export declare function getDatePickerPopoverUtilityClass(slot: string): string;
+export declare const datePickerClasses: Record<"input" | "root", string>;
+export declare const datePickerPopoverClasses: Record<"content" | "root" | "calendarWrapper" | "buttonContainer", string>;
+export type DatePickerClasses = typeof datePickerClasses;
+export type DatePickerClassKey = keyof DatePickerClasses;
+export type DatePickerPopoverClasses = typeof datePickerPopoverClasses;
+export type DatePickerPopoverClassKey = keyof DatePickerPopoverClasses;

package/date-picker/date-picker-classes.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerPopoverClasses = exports.datePickerClasses = exports.getDatePickerPopoverUtilityClass = exports.getDatePickerUtilityClass = exports.datePickerPopoverComponentName = exports.datePickerComponentName = void 0;
+var classes_1 = require("../styles/classes");
+exports.datePickerComponentName = 'QuantumDatePicker';
+exports.datePickerPopoverComponentName = 'QuantumDatePickerPopover';
+function getDatePickerUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.datePickerComponentName, slot);
+}
+exports.getDatePickerUtilityClass = getDatePickerUtilityClass;
+function getDatePickerPopoverUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.datePickerPopoverComponentName, slot);
+}
+exports.getDatePickerPopoverUtilityClass = getDatePickerPopoverUtilityClass;
+exports.datePickerClasses = (0, classes_1.generateUtilityClasses)(exports.datePickerComponentName, ['root', 'input']);
+exports.datePickerPopoverClasses = (0, classes_1.generateUtilityClasses)(exports.datePickerPopoverComponentName, [
+    'root',
+    'content',
+    'calendarWrapper',
+    'buttonContainer',
+]);

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface IDatePickerContextValue {
+    dateFormat: string;
+    timeFormat?: string;
+    onSelectDate(date: string, shouldClose?: boolean): void;
+    isRangeSelection?: boolean;
+    showTimeInput?: boolean;
+}
+export declare const DatePickerContext: React.Context<IDatePickerContextValue>;
+export declare const useDatePickerContext: () => IDatePickerContextValue;

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

@@ -0,0 +1,36 @@
+"use strict";
+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.useDatePickerContext = exports.DatePickerContext = void 0;
+var React = __importStar(require("react"));
+exports.DatePickerContext = React.createContext({
+    dateFormat: 'MM/dd/yyyy',
+    timeFormat: 'HH:mm:ss',
+    onSelectDate: function () { return undefined; },
+    isRangeSelection: false,
+    showTimeInput: false,
+});
+var useDatePickerContext = function () { return React.useContext(exports.DatePickerContext); };
+exports.useDatePickerContext = useDatePickerContext;

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

@@ -0,0 +1,4 @@
+import 'react-day-picker/style.css';
+import * as React from 'react';
+import { IDatePickerPopoverProps } from './date-picker-types';
+export declare const DatePickerPopover: React.ForwardRefExoticComponent<IDatePickerPopoverProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,458 @@
+"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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerPopover = void 0;
+require("react-day-picker/style.css");
+var React = __importStar(require("react"));
+var react_day_picker_1 = require("react-day-picker");
+var box_1 = require("../box");
+var button_1 = require("../button");
+var card_1 = require("../card");
+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_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;
+    return ({
+        marginTop: theme.spacing(0.5),
+    });
+});
+var Content = (0, styled_1.styled)(card_1.Card, { name: date_picker_classes_1.datePickerPopoverComponentName, slot: 'Content' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return ({
+        maxHeight: 'calc(100% - 96px)',
+        minWidth: theme.typography.pxToRem(180),
+        width: ownerState.currentView === 'options'
+            ? ownerState.inputWidth
+                ? "".concat(ownerState.inputWidth, "px")
+                : 'auto'
+            : ownerState.showTwoMonths
+                ? theme.typography.pxToRem(514) // Width for two months calendar view
+                : theme.typography.pxToRem(256),
+        WebkitOverflowScrolling: 'touch',
+        padding: theme.spacing(1),
+        border: "1px solid ".concat(theme.tokens.color_border_default),
+        borderRadius: 8,
+        borderColor: theme.tokens.color_border_default,
+        boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.07), 0px 13.7866px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 7.37098px 17.869px rgba(0, 0, 0, 0.0417275), 0px 4.13211px 10.0172px rgba(0, 0, 0, 0.035), 0px 2.19453px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.913195px 2.21381px rgba(0, 0, 0, 0.0196802)",
+    });
+});
+var CalendarWrapper = (0, styled_1.styled)('div', { name: date_picker_classes_1.datePickerPopoverComponentName, slot: 'CalendarWrapper' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(1),
+        '.rdp': {
+            '--rdp-cell-size': theme.spacing(2),
+            '--rdp-accent-color': theme.tokens.color_bg_button_primary,
+            '--rdp-background-color': theme.tokens.color_bg_link_primary_hover,
+            '--rdp-day-width': theme.spacing(2),
+            '--rdp-day-height': theme.spacing(2),
+            '--rdp-day_button-width': theme.spacing(2),
+            '--rdp-day_button-height': theme.spacing(2),
+            margin: 0,
+        },
+        '.rdp-nav': {
+            width: '100%',
+        },
+        '.rdp-day': {
+            color: theme.tokens.color_fg_default,
+            fontSize: theme.spacing(1.75),
+            width: theme.spacing(4),
+            height: theme.spacing(4),
+        },
+        '.rdp-month_caption': {
+            justifyContent: 'center',
+        },
+        '.rdp-button_previous': {
+            '&:focus': {
+                outline: "2px solid ".concat(theme.tokens.color_border_focus_bold),
+                outlineOffset: 2,
+            },
+            border: "1px solid ".concat(theme.tokens.color_border_default),
+            position: 'absolute',
+            left: 0,
+            width: theme.spacing(3),
+            height: theme.spacing(3),
+            borderRadius: theme.spacing(0.5),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        '.rdp-button_next': {
+            '&:focus': {
+                outline: "2px solid ".concat(theme.tokens.color_border_focus_bold),
+                outlineOffset: 2,
+            },
+            border: "1px solid ".concat(theme.tokens.color_border_default),
+            position: 'absolute',
+            right: 0,
+            width: theme.spacing(3),
+            height: theme.spacing(3),
+            borderRadius: theme.spacing(0.5),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        '.rdp-chevron': {
+            width: theme.spacing(2),
+            height: theme.spacing(2),
+            display: 'inline-block',
+            margin: 0,
+            fill: theme.tokens.color_fg_bold,
+        },
+        '.rdp-day_button': {
+            width: theme.spacing(4),
+            height: theme.spacing(4),
+        },
+        '.rdp-range_start .rdp-day_button': {
+            backgroundColor: theme.tokens.color_bg_button_primary,
+            border: 'none',
+            borderRadius: theme.spacing(0.75),
+        },
+        '.rdp-range_end .rdp-day_button': {
+            backgroundColor: theme.tokens.color_bg_button_primary,
+            border: 'none',
+            borderRadius: theme.spacing(0.75),
+        },
+        '.rdp-range_middle': {
+            backgroundColor: theme.tokens.color_bg_brand_primary_subtle,
+        },
+        '.rdp-selected': {
+            color: theme.tokens.color_fg_bold,
+            fontWeight: 'inherit',
+            fontSize: theme.spacing(1.75),
+        },
+        '.rdp-caption_label': {
+            fontSize: 14,
+        },
+        '.rdp-day_selected': {
+            backgroundColor: theme.tokens.color_bg_button_primary,
+            color: theme.tokens.color_fg_on_button_primary,
+        },
+        '.rdp-day_selected:hover': {
+            backgroundColor: theme.tokens.color_bg_button_primary_hover,
+        },
+        '.rdp-day_range_start, .rdp-day_range_end': {
+            backgroundColor: theme.tokens.color_bg_button_primary,
+            color: theme.tokens.color_fg_on_button_primary,
+        },
+        '.rdp-day_range_middle': {
+            backgroundColor: theme.tokens.color_bg_link_primary_hover,
+        },
+    });
+});
+var ButtonContainer = (0, styled_1.styled)(box_1.Box, { name: date_picker_classes_1.datePickerPopoverComponentName, slot: 'ButtonContainer' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'flex-end',
+        padding: theme.spacing(1),
+        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 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
+    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);
+                }
+                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);
+                }
+                if (from && to) {
+                    setRangeSelection({ from: from, to: 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);
+                    }
+                }
+            }
+        }
+    }, [open, value, isRangeSelection, dateFormat, timeFormat, options, showTimeInput]);
+    // Handle calendar selections
+    var handleCalendarSelect = function (selection) {
+        if (!selection)
+            return;
+        // Keep the time values when date changes
+        if (selection.from && !selection.to) {
+            // Single date or range start
+            if (showTimeInput) {
+                var newFrom = (0, date_picker_utils_1.applyTimeToDate)(selection.from, { hours: hours, minutes: minutes, seconds: seconds });
+                setRangeSelection({ from: newFrom });
+            }
+            else {
+                setRangeSelection({ from: selection.from });
+            }
+        }
+        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);
+            }
+        }
+        // Only auto-apply selection for non-range selection mode and when not showing time input
+        if (!isRangeSelection && !showTimeInput) {
+            applySelection(selection.from);
+        }
+        // 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 updateDateWithTime = function () {
+        if (!rangeSelection.from)
+            return;
+        var newFrom = (0, date_picker_utils_1.applyTimeToDate)(rangeSelection.from, { hours: hours, minutes: minutes, seconds: seconds });
+        if (isRangeSelection && rangeSelection.to) {
+            var newTo = (0, date_picker_utils_1.applyTimeToDate)(rangeSelection.to, {
+                hours: endHours,
+                minutes: endMinutes,
+                seconds: endSeconds,
+            });
+            setRangeSelection({ from: newFrom, to: newTo });
+        }
+        else {
+            setRangeSelection({ from: newFrom });
+        }
+    };
+    var applySelection = function (singleDate) {
+        if (isRangeSelection) {
+            if (rangeSelection.from && rangeSelection.to) {
+                var formattedRange = (0, date_picker_utils_1.formatDateRange)(rangeSelection.from, rangeSelection.to, dateFormat, showTimeInput ? timeFormat : undefined);
+                onDateSelect(formattedRange, true);
+            }
+        }
+        else if (singleDate || rangeSelection.from) {
+            var dateToFormat = singleDate || rangeSelection.from;
+            if (dateToFormat) {
+                var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+                var formattedDate = (0, date_picker_utils_1.formatDate)(dateToFormat, formatString);
+                onDateSelect(formattedDate, true);
+            }
+        }
+    };
+    var cancelSelection = function () {
+        if (options) {
+            setCurrentView('options');
+        }
+        else {
+            onClose();
+        }
+    };
+    var handleOptionSelect = function (optionValue) {
+        if (optionValue === 'custom') {
+            setCurrentView('calendar');
+            return;
+        }
+        onDateSelect(optionValue, true);
+    };
+    var selectedValue;
+    if (rangeSelection.from) {
+        selectedValue = { from: rangeSelection.from, to: rangeSelection.to };
+    }
+    else if (value && !isRangeSelection) {
+        var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+        var parsedDate = (0, date_picker_utils_1.parseDate)(value, formatString);
+        if (parsedDate) {
+            selectedValue = 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];
+    React.useEffect(function () {
+        if (open && anchorEl) {
+            var width = anchorEl.getBoundingClientRect().width;
+            setInputWidth(width);
+        }
+    }, [open, anchorEl]);
+    var ownerState = {
+        showTwoMonths: showTwoMonths,
+        isRangeSelection: isRangeSelection,
+    };
+    return (React.createElement(Root, __assign({ open: open, anchorEl: anchorEl, onClose: onClose, className: (0, clsx_1.default)(classes.root), ownerState: ownerState, ref: ref, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+        }, transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+        }, marginThreshold: 30, 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" })))))),
+            showActionButtons && (React.createElement(ButtonContainer, { className: classes.buttonContainer },
+                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"))))))));
+});