@auth0/quantum-product 2.5.8 → 2.5.9

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

@@ -0,0 +1,135 @@
+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 __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;
+};
+import * as React from 'react';
+import { CalendarIcon } from '../icon';
+import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
+import { TextField } from '../text-field';
+import clsx from '../utils/clsx';
+import { datePickerClasses, datePickerComponentName, getDatePickerUtilityClass } from './date-picker-classes';
+import { DatePickerContext } from './date-picker-context';
+import { DatePickerPopover } from './date-picker-popover';
+import { useDatePickerState } from './date-picker-state';
+import { formatDate, parseDate, parseTimestamp } from './date-picker-utils';
+var Root = styled('div', { name: datePickerComponentName, slot: 'Root' })({
+    position: 'relative',
+    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, _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 = 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 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 = parseTimestamp(timestamp, timestampUnit);
+            if (date) {
+                var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+                var formattedDate = 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 = parseDate(newValue, formatString);
+        if (date) {
+            var formattedDate = formatDate(date, formatString);
+            if (onChange) {
+                onChange(formattedDate);
+            }
+        }
+    };
+    var ownerState = {
+        size: size,
+        isRangeSelection: isRangeSelection,
+        showTimeInput: showTimeInput,
+    };
+    return (React.createElement(DatePickerContext.Provider, { value: {
+            dateFormat: dateFormat,
+            timeFormat: timeFormat,
+            onSelectDate: handleDateSelect,
+            isRangeSelection: isRangeSelection,
+            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) {
+                        triggerProps.onClick(e);
+                    }
+                    if (TextFieldProps.onClick) {
+                        TextFieldProps.onClick(e);
+                    }
+                } }, TextFieldProps)),
+            React.createElement(DatePickerPopover, __assign({}, popoverProps, { onDateSelect: handleDateSelect, options: options, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput })))));
+});

package/esm/date-picker/index.js

@@ -0,0 +1,5 @@
+export { DatePicker } from './date-picker';
+export { DatePickerPopover } from './date-picker-popover';
+export { DatePickerContext, useDatePickerContext } from './date-picker-context';
+export { DatePickerStateProvider, useDatePickerState, useDatePickerStateContext } from './date-picker-state';
+export { datePickerClasses, datePickerPopoverClasses } from './date-picker-classes';

package/esm/icon-button/icon-button.js

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { capitalize } from '@mui/material';
+import { Spinner } from '../spinner';
 import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import { styled } from '../styled';
 import { useIconButtonContext } from './icon-button-context';
@@ -29,6 +30,13 @@ import { Tooltip } from '../tooltip';
 export var IconButtonComponentName = 'QuantumIconButton';
 export { iconButtonClasses };
 var Root = styled(Tooltip, { name: IconButtonComponentName, slot: 'Tooltip' })({});
+var ButtonSpinner = styled(Spinner, {
+    name: IconButtonComponentName,
+    slot: 'Spinner',
+})({
+    position: 'inherit',
+    left: '-0.5rem',
+});
 // using any here to work arround TS perf issues with OverrideableComponent and styled
 var StyledIconButton = styled(MuiIconButton, {
     name: IconButtonComponentName,
@@ -36,7 +44,7 @@ var StyledIconButton = styled(MuiIconButton, {
 })(function (_a) {
     var _b;
     var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
-    return (__assign(__assign(__assign({}, (edge === 'end' && __assign({ marginRight: -11 }))), (_b = { '&:focus,&.Mui-focusVisible': color === 'danger'
+    return (__assign(__assign(__assign(__assign({}, (edge === 'end' && __assign({ marginRight: -11 }))), (_b = { '&:focus,&.Mui-focusVisible': color === 'danger'
                 ? theme.mixins.focusRing({ color: theme.tokens.color_border_focus_state_danger })
                 : theme.mixins.focusRing(), padding: 0, borderRadius: '4px', transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
                 duration: theme.transitions.duration.short,
@@ -48,6 +56,9 @@ var StyledIconButton = styled(MuiIconButton, {
         width: '1em',
     }, _b)), (ownerState.shape === 'circular' && {
         borderRadius: '50%',
+    })), (ownerState.isLoading && {
+        color: theme.tokens.color_fg_default,
+        backgroundColor: theme.palette.action.disabledBackground,
     })));
 });
 var DisabledWrapper = styled('span', {
@@ -62,9 +73,9 @@ var DisabledWrapper = styled('span', {
 });
 export var IconButton = React.forwardRef(function (props, ref) {
     var iconButtonContext = useIconButtonContext();
-    var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
+    var isLoading = props.isLoading, _a = props.SpinnerProps, SpinnerProps = _a === void 0 ? {} : _a, children = props.children, label = props.label, _b = props.color, color = _b === void 0 ? 'default' : _b, _c = props.variant, variant = _c === void 0 ? 'link' : _c, _d = props.size, size = _d === void 0 ? 'medium' : _d, disabled = props.disabled, edgeProp = props.edge, _e = props.shape, shape = _e === void 0 ? 'default' : _e, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["isLoading", "SpinnerProps", "children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
     var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
     var captizedLable = label ? capitalize(label) : null;
-    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": captizedLable }, iconButtonProps), children));
+    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled || isLoading, size: size, variant: variant, ownerState: { shape: shape, isLoading: isLoading }, "aria-label": captizedLable }, iconButtonProps), isLoading ? React.createElement(ButtonSpinner, __assign({}, SpinnerProps)) : React.createElement(React.Fragment, null, children)));
     return (React.createElement(Root, { title: captizedLable, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
 });

package/esm/index.js

@@ -25,6 +25,7 @@ export * from './copy-button';
 export * from './css-baseline';
 export * from './danger-zone';
 export * from './data-table';
+export * from './date-picker';
 export * from './description-block';
 export * from './dialog';
 export * from './divider';

package/icon-button/icon-button.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ISpinnerProps } from '../spinner';
 import { iconButtonClasses, IconButtonTypeMap } from '@mui/material/IconButton';
 import { OverridableComponent, OverrideProps, OverridableTypeMap } from '../overridable-component';
 import { ITooltipProps } from '../tooltip';
@@ -15,6 +16,8 @@ export type IIconButtonTypeMap<ExtraPropsType = {}, DefaultElementType extends R
     href?: string;
     label: string;
     target?: string;
+    isLoading?: boolean;
+    SpinnerProps?: Partial<ISpinnerProps>;
 }, DefaultElementType>;
 export interface IExtendIconButtonTypeMap<M extends OverridableTypeMap> {
     props: M['props'] & (M['props'] extends {

package/icon-button/icon-button.js

@@ -48,6 +48,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = exports.iconButtonClasses = exports.IconButtonComponentName = void 0;
 var React = __importStar(require("react"));
 var material_1 = require("@mui/material");
+var spinner_1 = require("../spinner");
 var IconButton_1 = __importStar(require("@mui/material/IconButton"));
 Object.defineProperty(exports, "iconButtonClasses", { enumerable: true, get: function () { return IconButton_1.iconButtonClasses; } });
 var styled_1 = require("../styled");
@@ -55,6 +56,13 @@ var icon_button_context_1 = require("./icon-button-context");
 var tooltip_1 = require("../tooltip");
 exports.IconButtonComponentName = 'QuantumIconButton';
 var Root = (0, styled_1.styled)(tooltip_1.Tooltip, { name: exports.IconButtonComponentName, slot: 'Tooltip' })({});
+var ButtonSpinner = (0, styled_1.styled)(spinner_1.Spinner, {
+    name: exports.IconButtonComponentName,
+    slot: 'Spinner',
+})({
+    position: 'inherit',
+    left: '-0.5rem',
+});
 // using any here to work arround TS perf issues with OverrideableComponent and styled
 var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
     name: exports.IconButtonComponentName,
@@ -62,7 +70,7 @@ var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
 })(function (_a) {
     var _b;
     var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
-    return (__assign(__assign(__assign({}, (edge === 'end' && __assign({ marginRight: -11 }))), (_b = { '&:focus,&.Mui-focusVisible': color === 'danger'
+    return (__assign(__assign(__assign(__assign({}, (edge === 'end' && __assign({ marginRight: -11 }))), (_b = { '&:focus,&.Mui-focusVisible': color === 'danger'
                 ? theme.mixins.focusRing({ color: theme.tokens.color_border_focus_state_danger })
                 : theme.mixins.focusRing(), padding: 0, borderRadius: '4px', transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
                 duration: theme.transitions.duration.short,
@@ -74,6 +82,9 @@ var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
         width: '1em',
     }, _b)), (ownerState.shape === 'circular' && {
         borderRadius: '50%',
+    })), (ownerState.isLoading && {
+        color: theme.tokens.color_fg_default,
+        backgroundColor: theme.palette.action.disabledBackground,
     })));
 });
 var DisabledWrapper = (0, styled_1.styled)('span', {
@@ -88,9 +99,9 @@ var DisabledWrapper = (0, styled_1.styled)('span', {
 });
 exports.IconButton = React.forwardRef(function (props, ref) {
     var iconButtonContext = (0, icon_button_context_1.useIconButtonContext)();
-    var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
+    var isLoading = props.isLoading, _a = props.SpinnerProps, SpinnerProps = _a === void 0 ? {} : _a, children = props.children, label = props.label, _b = props.color, color = _b === void 0 ? 'default' : _b, _c = props.variant, variant = _c === void 0 ? 'link' : _c, _d = props.size, size = _d === void 0 ? 'medium' : _d, disabled = props.disabled, edgeProp = props.edge, _e = props.shape, shape = _e === void 0 ? 'default' : _e, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["isLoading", "SpinnerProps", "children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
     var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
     var captizedLable = label ? (0, material_1.capitalize)(label) : null;
-    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": captizedLable }, iconButtonProps), children));
+    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled || isLoading, size: size, variant: variant, ownerState: { shape: shape, isLoading: isLoading }, "aria-label": captizedLable }, iconButtonProps), isLoading ? React.createElement(ButtonSpinner, __assign({}, SpinnerProps)) : React.createElement(React.Fragment, null, children)));
     return (React.createElement(Root, { title: captizedLable, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
 });

package/index.d.ts

@@ -25,6 +25,7 @@ export * from './copy-button';
 export * from './css-baseline';
 export * from './danger-zone';
 export * from './data-table';
+export * from './date-picker';
 export * from './description-block';
 export * from './dialog';
 export * from './divider';

package/index.js

@@ -41,6 +41,7 @@ __exportStar(require("./copy-button"), exports);
 __exportStar(require("./css-baseline"), exports);
 __exportStar(require("./danger-zone"), exports);
 __exportStar(require("./data-table"), exports);
+__exportStar(require("./date-picker"), exports);
 __exportStar(require("./description-block"), exports);
 __exportStar(require("./dialog"), exports);
 __exportStar(require("./divider"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -17,7 +17,8 @@
     "@mui/system": "5.15.9",
     "@mui/utils": "5.15.9",
     "clsx": "^1.2.1",
-    "md5": "^2.3.0"
+    "md5": "^2.3.0",
+    "react-day-picker": "^9.6.7"
   },
   "peerDependencies": {
     "react": "*",