@auth0/quantum-product 2.3.0 → 2.4.1

package/color-text-field/color-text-field.js

@@ -44,6 +44,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorTextField = void 0;
 var React = __importStar(require("react"));
@@ -65,10 +81,39 @@ var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentN
         '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
     });
 });
+var normalizeHex = function (hex) {
+    if (hex.length === 4 && /^#[0-9A-F]{3}$/i.test(hex)) {
+        return "#".concat(hex[1]).concat(hex[1]).concat(hex[2]).concat(hex[2]).concat(hex[3]).concat(hex[3]);
+    }
+    return hex;
+};
 exports.ColorTextField = React.forwardRef(function (props, ref) {
-    var inputAdornmentProps = props.inputAdornmentProps, rootProps = __rest(props, ["inputAdornmentProps"]);
+    var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
+    var _a = __read(React.useState(normalizeHex(value || placeholder || defaultValue || '#000000')), 2), color = _a[0], setColor = _a[1];
+    var handleColorChange = function (event) {
+        var value = event.target.value;
+        if (value.length === 4 && /^#[0-9A-F]{3}$/i.test(value)) {
+            var normalizedValue = normalizeHex(value);
+            if (props.onChange) {
+                props.onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: normalizedValue }) }));
+            }
+        }
+        else {
+            if (props.onChange) {
+                props.onChange(event);
+            }
+        }
+    };
+    React.useEffect(function () {
+        var newColor = value || placeholder || defaultValue || '#000000';
+        if (newColor) {
+            setColor(normalizeHex(newColor));
+        }
+    }, [value, defaultValue, placeholder]);
     return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
             startAdornment: (React.createElement(input_1.InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
-                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled || props.readOnly, value: props.value || props.defaultValue || props.placeholder, onChange: props.onChange }))),
+                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled || props.readOnly, value: color, onChange: handleColorChange }))),
+            value: value,
+            placeholder: placeholder,
         } })));
 });

package/copy-button/copy-button.js

@@ -1,4 +1,15 @@
 "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);
@@ -22,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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;
@@ -44,7 +66,7 @@ var React = __importStar(require("react"));
 var icon_1 = require("../icon");
 var icon_button_1 = require("../icon-button");
 exports.CopyButton = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick;
+    var onClick = _a.onClick, label = _a.label, rootProps = __rest(_a, ["onClick", "label"]);
     var _b = __read(React.useState(false), 2), pressed = _b[0], setPressed = _b[1];
     React.useEffect(function () {
         if (!pressed) {
@@ -63,7 +85,7 @@ exports.CopyButton = React.forwardRef(function (_a, ref) {
     };
     var handleClose = function () { return setPressed(false); };
     // use title as the key to force a mount/unmount of the tooltip. This drives the feedback transition.
-    var title = pressed ? 'Copied!' : 'Copy';
-    return (React.createElement(icon_button_1.IconButton, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick },
+    var title = pressed ? 'Copied!' : label;
+    return (React.createElement(icon_button_1.IconButton, __assign({}, rootProps, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick }),
         React.createElement(icon_1.CopyIcon, null)));
 });

package/data-table/data-table-row.js

@@ -106,7 +106,7 @@ function DataTableRow(props) {
                 }
                 return hideHeader ? (React.createElement(table_1.TableCell, { width: column.width, key: colIndex, align: column.align, padding: column.padding }, content)) : (React.createElement(table_1.TableCell, { key: colIndex, align: column.align, padding: column.padding }, content));
             }),
-            !!renderItemDetails && (React.createElement(table_1.TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(icon_button_1.IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Chevron up button' : 'chevron down button' }, isExpanded ? React.createElement(icon_1.ChevronUpIcon, null) : React.createElement(icon_1.ChevronDownIcon, null)))))),
+            !!renderItemDetails && (React.createElement(table_1.TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(icon_button_1.IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Collapse' : 'Expand' }, isExpanded ? React.createElement(icon_1.ChevronUpIcon, null) : React.createElement(icon_1.ChevronDownIcon, null)))))),
         !!detailsContent && (React.createElement(Row, { ownerState: { expanded: true } },
             React.createElement(table_1.TableCell, { padding: "none", colSpan: columns.length + 1 },
                 React.createElement(collapse_1.Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true },

package/esm/color-text-field/color-text-field.js

@@ -20,6 +20,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 { InputAdornment } from '../input';
 import { styled } from '../styled';
@@ -39,10 +55,39 @@ var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'Co
         '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
     });
 });
+var normalizeHex = function (hex) {
+    if (hex.length === 4 && /^#[0-9A-F]{3}$/i.test(hex)) {
+        return "#".concat(hex[1]).concat(hex[1]).concat(hex[2]).concat(hex[2]).concat(hex[3]).concat(hex[3]);
+    }
+    return hex;
+};
 export var ColorTextField = React.forwardRef(function (props, ref) {
-    var inputAdornmentProps = props.inputAdornmentProps, rootProps = __rest(props, ["inputAdornmentProps"]);
+    var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
+    var _a = __read(React.useState(normalizeHex(value || placeholder || defaultValue || '#000000')), 2), color = _a[0], setColor = _a[1];
+    var handleColorChange = function (event) {
+        var value = event.target.value;
+        if (value.length === 4 && /^#[0-9A-F]{3}$/i.test(value)) {
+            var normalizedValue = normalizeHex(value);
+            if (props.onChange) {
+                props.onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: normalizedValue }) }));
+            }
+        }
+        else {
+            if (props.onChange) {
+                props.onChange(event);
+            }
+        }
+    };
+    React.useEffect(function () {
+        var newColor = value || placeholder || defaultValue || '#000000';
+        if (newColor) {
+            setColor(normalizeHex(newColor));
+        }
+    }, [value, defaultValue, placeholder]);
     return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
             startAdornment: (React.createElement(InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
-                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled || props.readOnly, value: props.value || props.defaultValue || props.placeholder, onChange: props.onChange }))),
+                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled || props.readOnly, value: color, onChange: handleColorChange }))),
+            value: value,
+            placeholder: placeholder,
         } })));
 });

package/esm/copy-button/copy-button.js

@@ -1,3 +1,25 @@
+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;
@@ -18,7 +40,7 @@ import * as React from 'react';
 import { CopyIcon } from '../icon';
 import { IconButton } from '../icon-button';
 export var CopyButton = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick;
+    var onClick = _a.onClick, label = _a.label, rootProps = __rest(_a, ["onClick", "label"]);
     var _b = __read(React.useState(false), 2), pressed = _b[0], setPressed = _b[1];
     React.useEffect(function () {
         if (!pressed) {
@@ -37,7 +59,7 @@ export var CopyButton = React.forwardRef(function (_a, ref) {
     };
     var handleClose = function () { return setPressed(false); };
     // use title as the key to force a mount/unmount of the tooltip. This drives the feedback transition.
-    var title = pressed ? 'Copied!' : 'Copy';
-    return (React.createElement(IconButton, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick },
+    var title = pressed ? 'Copied!' : label;
+    return (React.createElement(IconButton, __assign({}, rootProps, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick }),
         React.createElement(CopyIcon, null)));
 });

package/esm/data-table/data-table-row.js

@@ -79,7 +79,7 @@ export function DataTableRow(props) {
                 }
                 return hideHeader ? (React.createElement(TableCell, { width: column.width, key: colIndex, align: column.align, padding: column.padding }, content)) : (React.createElement(TableCell, { key: colIndex, align: column.align, padding: column.padding }, content));
             }),
-            !!renderItemDetails && (React.createElement(TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Chevron up button' : 'chevron down button' }, isExpanded ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null)))))),
+            !!renderItemDetails && (React.createElement(TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Collapse' : 'Expand' }, isExpanded ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null)))))),
         !!detailsContent && (React.createElement(Row, { ownerState: { expanded: true } },
             React.createElement(TableCell, { padding: "none", colSpan: columns.length + 1 },
                 React.createElement(Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true },

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

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
+import { capitalize } from '@mui/material';
 import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import { styled } from '../styled';
 import { useIconButtonContext } from './icon-button-context';
@@ -63,6 +64,7 @@ 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 edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
-    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": label }, iconButtonProps), children));
-    return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
+    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));
+    return (React.createElement(Root, { title: captizedLable, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
 });

package/icon-button/icon-button.js

@@ -47,6 +47,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 IconButton_1 = __importStar(require("@mui/material/IconButton"));
 Object.defineProperty(exports, "iconButtonClasses", { enumerable: true, get: function () { return IconButton_1.iconButtonClasses; } });
 var styled_1 = require("../styled");
@@ -89,6 +90,7 @@ 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 edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
-    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": label }, iconButtonProps), children));
-    return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
+    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));
+    return (React.createElement(Root, { title: captizedLable, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {