@auth0/quantum-product 2.5.7 → 2.5.9

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { IPopoverProps } from '../popover';
+import { DatePickerClasses, DatePickerPopoverClasses } from './date-picker-classes';
+export interface DateOption {
+    text: string;
+    value: string;
+}
+export interface IDatePickerBaseProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    dateFormat?: string;
+    timeFormat?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    size?: 'small' | 'medium';
+    readOnly?: boolean;
+    required?: boolean;
+    error?: boolean;
+    helperText?: React.ReactNode;
+    options?: DateOption[];
+    isRangeSelection?: boolean;
+    showTwoMonths?: boolean;
+    showTimeInput?: boolean;
+    allowTimestampPasting?: boolean;
+    timestampUnit?: 'ms' | 's';
+    classes?: Partial<DatePickerClasses>;
+}
+export interface IDatePickerPopoverProps {
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    onDateSelect: (date: string, shouldClose?: boolean) => void;
+    options?: DateOption[];
+    value?: string;
+    dateFormat?: string;
+    timeFormat?: string;
+    PopoverProps?: Partial<IPopoverProps>;
+    showTwoMonths?: boolean;
+    isRangeSelection?: boolean;
+    showTimeInput?: boolean;
+    classes?: Partial<DatePickerPopoverClasses>;
+}

package/date-picker/date-picker-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,47 @@
+/**
+ * Formats a date object using the specified format string
+ */
+export declare const formatDate: (date: Date, formatString: string) => string;
+/**
+ * Parses a date string using the specified format
+ */
+export declare const parseDate: (dateString: string, formatString: string, referenceDate?: Date) => Date | null;
+/**
+ * Try to parse a date string using multiple formats
+ */
+export declare const tryParseDate: (dateString: string, formatStrings: string[], referenceDate?: Date) => Date | null;
+/**
+ * Handles parsing a timestamp (number) into a Date
+ */
+export declare const parseTimestamp: (timestamp: number, unit?: 'ms' | 's') => Date | null;
+/**
+ * Parses a date range string (format: "start - end")
+ */
+export declare const parseDateRange: (rangeString: string, dateFormat: string, timeFormat?: string) => {
+    from: Date | null;
+    to: Date | null;
+};
+/**
+ * Format a date range as a string
+ */
+export declare const formatDateRange: (from: Date | null, to: Date | null, dateFormat: string, timeFormat?: string) => string;
+/**
+ * Extract time components from a date
+ */
+export declare const extractTimeComponents: (date: Date) => {
+    hours: string;
+    minutes: string;
+    seconds: string;
+};
+/**
+ * Apply time components to a date
+ */
+export declare const applyTimeToDate: (date: Date, time: {
+    hours: string;
+    minutes: string;
+    seconds: string;
+}) => Date;
+/**
+ * Safely parses a value that might be a timestamp or a date string
+ */
+export declare const parseSmartDate: (value: string, dateFormat: string, timeFormat?: string) => Date | null;

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

@@ -0,0 +1,165 @@
+"use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+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;
+};
+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;
+var date_fns_1 = require("date-fns");
+/**
+ * Formats a date object using the specified format string
+ */
+var formatDate = function (date, formatString) {
+    return (0, date_fns_1.format)(date, formatString);
+};
+exports.formatDate = formatDate;
+/**
+ * Parses a date string using the specified format
+ */
+var parseDate = function (dateString, formatString, referenceDate) {
+    if (referenceDate === void 0) { referenceDate = new Date(); }
+    try {
+        var parsed = (0, date_fns_1.parse)(dateString, formatString, referenceDate);
+        return (0, date_fns_1.isValid)(parsed) ? parsed : null;
+    }
+    catch (error) {
+        return null;
+    }
+};
+exports.parseDate = parseDate;
+/**
+ * Try to parse a date string using multiple formats
+ */
+var tryParseDate = function (dateString, formatStrings, referenceDate) {
+    var e_1, _a;
+    if (referenceDate === void 0) { referenceDate = new Date(); }
+    try {
+        for (var formatStrings_1 = __values(formatStrings), formatStrings_1_1 = formatStrings_1.next(); !formatStrings_1_1.done; formatStrings_1_1 = formatStrings_1.next()) {
+            var formatString = formatStrings_1_1.value;
+            var parsed = (0, exports.parseDate)(dateString, formatString, referenceDate);
+            if (parsed) {
+                return parsed;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (formatStrings_1_1 && !formatStrings_1_1.done && (_a = formatStrings_1.return)) _a.call(formatStrings_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return null;
+};
+exports.tryParseDate = tryParseDate;
+/**
+ * Handles parsing a timestamp (number) into a Date
+ */
+var parseTimestamp = function (timestamp, unit) {
+    if (unit === void 0) { unit = 'ms'; }
+    try {
+        var date = new Date(unit === 's' ? timestamp * 1000 : timestamp);
+        return (0, date_fns_1.isValid)(date) ? date : null;
+    }
+    catch (error) {
+        return null;
+    }
+};
+exports.parseTimestamp = parseTimestamp;
+/**
+ * Parses a date range string (format: "start - end")
+ */
+var parseDateRange = function (rangeString, dateFormat, timeFormat) {
+    if (!rangeString.includes('-')) {
+        return { from: null, to: null };
+    }
+    var _a = __read(rangeString.split('-').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);
+    if (!from) {
+        from = (0, exports.parseDate)(fromStr, dateFormat);
+    }
+    if (!to) {
+        to = (0, exports.parseDate)(toStr, dateFormat);
+    }
+    return { from: from, to: to };
+};
+exports.parseDateRange = parseDateRange;
+/**
+ * Format a date range as a string
+ */
+var formatDateRange = function (from, to, dateFormat, timeFormat) {
+    if (!from)
+        return '';
+    var formatString = timeFormat ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+    if (!to) {
+        return (0, exports.formatDate)(from, formatString);
+    }
+    return "".concat((0, exports.formatDate)(from, formatString), " - ").concat((0, exports.formatDate)(to, formatString));
+};
+exports.formatDateRange = formatDateRange;
+/**
+ * Extract time components from a date
+ */
+var extractTimeComponents = function (date) {
+    return {
+        hours: (0, exports.formatDate)(date, 'HH'),
+        minutes: (0, exports.formatDate)(date, 'mm'),
+        seconds: (0, exports.formatDate)(date, 'ss'),
+    };
+};
+exports.extractTimeComponents = extractTimeComponents;
+/**
+ * Apply time components to a date
+ */
+var applyTimeToDate = function (date, time) {
+    var newDate = new Date(date);
+    newDate.setHours(parseInt(time.hours, 10) || 0);
+    newDate.setMinutes(parseInt(time.minutes, 10) || 0);
+    newDate.setSeconds(parseInt(time.seconds, 10) || 0);
+    return newDate;
+};
+exports.applyTimeToDate = applyTimeToDate;
+/**
+ * Safely parses a value that might be a timestamp or a date string
+ */
+var parseSmartDate = function (value, dateFormat, timeFormat) {
+    var timestamp = parseInt(value, 10);
+    if (!isNaN(timestamp)) {
+        var date = (0, exports.parseTimestamp)(timestamp);
+        if (date)
+            return date;
+    }
+    if (timeFormat) {
+        var fullFormat = "".concat(dateFormat, " ").concat(timeFormat);
+        var date = (0, exports.parseDate)(value, fullFormat);
+        if (date)
+            return date;
+    }
+    return (0, exports.parseDate)(value, dateFormat);
+};
+exports.parseSmartDate = parseSmartDate;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ITextFieldProps } from '../text-field';
+import { IDatePickerStateValue } from './date-picker-state';
+import { IDatePickerBaseProps } from './date-picker-types';
+export interface IDatePickerProps extends IDatePickerBaseProps {
+    TextFieldProps?: Partial<ITextFieldProps>;
+    state?: IDatePickerStateValue;
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<IDatePickerProps & React.RefAttributes<HTMLDivElement>>;

package/date-picker/date-picker.js

@@ -0,0 +1,164 @@
+"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.DatePicker = void 0;
+var React = __importStar(require("react"));
+var icon_1 = require("../icon");
+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_context_1 = require("./date-picker-context");
+var date_picker_popover_1 = require("./date-picker-popover");
+var date_picker_state_1 = require("./date-picker-state");
+var date_picker_utils_1 = require("./date-picker-utils");
+var Root = (0, styled_1.styled)('div', { name: date_picker_classes_1.datePickerComponentName, slot: 'Root' })({
+    position: 'relative',
+    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 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 inputRef = React.useRef(null);
+    React.useEffect(function () {
+        setDisplayValue(value || '');
+    }, [value]);
+    var handleDateSelect = function (newValue, shouldClose) {
+        if (shouldClose === void 0) { shouldClose = true; }
+        setDisplayValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+        if (shouldClose) {
+            popoverProps.onClose();
+        }
+    };
+    var handlePaste = function (event) {
+        if (!allowTimestampPasting)
+            return;
+        var pastedText = event.clipboardData.getData('text');
+        var timestamp = parseInt(pastedText, 10);
+        if (!isNaN(timestamp)) {
+            event.preventDefault();
+            var date = (0, date_picker_utils_1.parseTimestamp)(timestamp, timestampUnit);
+            if (date) {
+                var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+                var formattedDate = (0, date_picker_utils_1.formatDate)(date, formatString);
+                setDisplayValue(formattedDate);
+                if (onChange) {
+                    onChange(formattedDate);
+                }
+            }
+        }
+    };
+    var handleInputChange = function (event) {
+        var newValue = event.target.value;
+        setDisplayValue(newValue);
+        if (newValue === '') {
+            if (onChange) {
+                onChange('');
+            }
+            return;
+        }
+        if (isRangeSelection) {
+            return;
+        }
+        var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+        var date = (0, date_picker_utils_1.parseDate)(newValue, formatString);
+        if (date) {
+            var formattedDate = (0, date_picker_utils_1.formatDate)(date, formatString);
+            if (onChange) {
+                onChange(formattedDate);
+            }
+        }
+    };
+    var ownerState = {
+        size: size,
+        isRangeSelection: isRangeSelection,
+        showTimeInput: showTimeInput,
+    };
+    return (React.createElement(date_picker_context_1.DatePickerContext.Provider, { value: {
+            dateFormat: dateFormat,
+            timeFormat: timeFormat,
+            onSelectDate: handleDateSelect,
+            isRangeSelection: isRangeSelection,
+            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) {
+                        triggerProps.onClick(e);
+                    }
+                    if (TextFieldProps.onClick) {
+                        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 })))));
+});

package/date-picker/index.d.ts

@@ -0,0 +1,11 @@
+export { DatePicker } from './date-picker';
+export type { IDatePickerProps } from './date-picker';
+export { DatePickerPopover } from './date-picker-popover';
+export type { IDatePickerPopoverProps } from './date-picker-types';
+export { DatePickerContext, useDatePickerContext } from './date-picker-context';
+export type { IDatePickerContextValue } from './date-picker-context';
+export { DatePickerStateProvider, useDatePickerState, useDatePickerStateContext } from './date-picker-state';
+export type { IDatePickerStateProps, IDatePickerStateValue, IDatePickerTriggerProps } from './date-picker-state';
+export { datePickerClasses, datePickerPopoverClasses } from './date-picker-classes';
+export type { DatePickerClasses, DatePickerPopoverClasses } from './date-picker-classes';
+export type { DateOption, IDatePickerBaseProps } from './date-picker-types';

package/date-picker/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerPopoverClasses = exports.datePickerClasses = exports.useDatePickerStateContext = exports.useDatePickerState = exports.DatePickerStateProvider = exports.useDatePickerContext = exports.DatePickerContext = exports.DatePickerPopover = exports.DatePicker = void 0;
+var date_picker_1 = require("./date-picker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return date_picker_1.DatePicker; } });
+var date_picker_popover_1 = require("./date-picker-popover");
+Object.defineProperty(exports, "DatePickerPopover", { enumerable: true, get: function () { return date_picker_popover_1.DatePickerPopover; } });
+var date_picker_context_1 = require("./date-picker-context");
+Object.defineProperty(exports, "DatePickerContext", { enumerable: true, get: function () { return date_picker_context_1.DatePickerContext; } });
+Object.defineProperty(exports, "useDatePickerContext", { enumerable: true, get: function () { return date_picker_context_1.useDatePickerContext; } });
+var date_picker_state_1 = require("./date-picker-state");
+Object.defineProperty(exports, "DatePickerStateProvider", { enumerable: true, get: function () { return date_picker_state_1.DatePickerStateProvider; } });
+Object.defineProperty(exports, "useDatePickerState", { enumerable: true, get: function () { return date_picker_state_1.useDatePickerState; } });
+Object.defineProperty(exports, "useDatePickerStateContext", { enumerable: true, get: function () { return date_picker_state_1.useDatePickerStateContext; } });
+var date_picker_classes_1 = require("./date-picker-classes");
+Object.defineProperty(exports, "datePickerClasses", { enumerable: true, get: function () { return date_picker_classes_1.datePickerClasses; } });
+Object.defineProperty(exports, "datePickerPopoverClasses", { enumerable: true, get: function () { return date_picker_classes_1.datePickerPopoverClasses; } });

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

@@ -0,0 +1,16 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var datePickerComponentName = 'QuantumDatePicker';
+export var datePickerPopoverComponentName = 'QuantumDatePickerPopover';
+export function getDatePickerUtilityClass(slot) {
+    return generateUtilityClass(datePickerComponentName, slot);
+}
+export function getDatePickerPopoverUtilityClass(slot) {
+    return generateUtilityClass(datePickerPopoverComponentName, slot);
+}
+export var datePickerClasses = generateUtilityClasses(datePickerComponentName, ['root', 'input']);
+export var datePickerPopoverClasses = generateUtilityClasses(datePickerPopoverComponentName, [
+    'root',
+    'content',
+    'calendarWrapper',
+    'buttonContainer',
+]);

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export var DatePickerContext = React.createContext({
+    dateFormat: 'MM/dd/yyyy',
+    timeFormat: 'HH:mm:ss',
+    onSelectDate: function () { return undefined; },
+    isRangeSelection: false,
+    showTimeInput: false,
+});
+export var useDatePickerContext = function () { return React.useContext(DatePickerContext); };