@auth0/quantum-product 2.4.4 → 2.4.6

package/card/card.js

@@ -85,7 +85,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
         },
     };
     var defaultBorderStyle = {
-        '&:hover': theme.palette.mode === 'dark' && {
+        '&:hover': {
             borderColor: theme.tokens.color_border_bold,
         },
     };
@@ -98,6 +98,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
         '&:hover': theme.palette.mode === 'light'
             ? {
                 boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : theme.shadows[2],
+                borderColor: theme.tokens.color_border_bold,
             }
             : {
                 backgroundColor: (0, color_manipulator_1.fade)(theme.palette.action.hoverBackground, 0.1),

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

@@ -67,7 +67,14 @@ var input_1 = require("../input");
 var styled_1 = require("../styled");
 var text_field_1 = require("../text-field");
 var colorTextFieldComponentName = 'QuantumColorTextField';
-var Root = (0, styled_1.styled)(text_field_1.TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
+var Root = (0, styled_1.styled)(text_field_1.TextField, { name: colorTextFieldComponentName, slot: 'Root' })({
+    'input::placeholder': {
+        textTransform: 'uppercase',
+    },
+    '& > div:first-of-type': {
+        paddingLeft: '9px',
+    },
+});
 var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -81,39 +88,63 @@ var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentN
         '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
     });
 });
+// Normalizes HEX color values to valid 7char HEX color values
 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]);
+    if (hex.startsWith('#')) {
+        hex = hex.slice(1);
+    }
+    var upperHex = hex.toUpperCase();
+    switch (upperHex.length) {
+        case 0:
+            return '';
+        case 1:
+            return "#".concat(upperHex.repeat(6));
+        case 2:
+            return "#".concat(upperHex.repeat(3));
+        case 3:
+        case 4:
+        case 5:
+            return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
+        default:
+            return "#".concat(upperHex.slice(0, 6));
     }
-    return hex;
 };
 exports.ColorTextField = React.forwardRef(function (props, ref) {
     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);
-            }
+    var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
+    var normalizedInitialColor = normalizeHex(getInitialColor());
+    var _a = __read(React.useState(value || defaultValue), 2), inputColor = _a[0], setInputColor = _a[1];
+    //Derived state from inputColor (textfield value)
+    var colorPicker = React.useMemo(function () {
+        if (inputColor) {
+            return normalizeHex(inputColor);
         }
+        return normalizeHex(getInitialColor());
+    }, [inputColor, value, placeholder, defaultValue]);
+    var handleTextfieldChange = function (event) {
+        var newValue = event.target.value;
+        setInputColor(newValue);
+    };
+    var handleTextfieldBlur = function (event) {
+        var _a, _b;
+        var newValue = normalizeHex(event.target.value);
+        setInputColor(newValue);
+        var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, updatedEvent);
+        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, updatedEvent);
+    };
+    var handleColorPickerChange = function (event) {
+        var _a, _b;
+        var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+        setInputColor(newValue);
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
     };
-    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, readOnly: props.readOnly, value: color, onChange: handleColorChange }))),
-            value: value,
+                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled, readOnly: props.readOnly, value: colorPicker, onChange: handleColorPickerChange }))),
+            value: inputColor,
             placeholder: placeholder,
+            onBlur: handleTextfieldBlur,
+            onChange: handleTextfieldChange,
         } })));
 });

package/dialog/dialog-title/dialog-title.js

@@ -72,6 +72,6 @@ exports.DialogTitle = React.forwardRef(function (props, ref) {
     var classes = (0, classes_1.useMergedClasses)(dialog_title_classes_1.dialogTitleClasses, dialog_title_classes_1.getDialogTitleUtilityClass, propClasses);
     return (React.createElement(Root, __assign({}, dialogTitleProps, { className: (0, clsx_1.default)(classes.root, className), ref: ref }),
         disableTypography ? (children) : (React.createElement(text_1.Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
-        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "close button" },
+        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "Close" },
             React.createElement(icon_1.XIcon, null)))));
 });

package/esm/card/card.js

@@ -56,7 +56,7 @@ var Root = styled(MuiCard, {
         },
     };
     var defaultBorderStyle = {
-        '&:hover': theme.palette.mode === 'dark' && {
+        '&:hover': {
             borderColor: theme.tokens.color_border_bold,
         },
     };
@@ -69,6 +69,7 @@ var Root = styled(MuiCard, {
         '&:hover': theme.palette.mode === 'light'
             ? {
                 boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : theme.shadows[2],
+                borderColor: theme.tokens.color_border_bold,
             }
             : {
                 backgroundColor: fade(theme.palette.action.hoverBackground, 0.1),

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

@@ -41,7 +41,14 @@ import { InputAdornment } from '../input';
 import { styled } from '../styled';
 import { TextField } from '../text-field';
 var colorTextFieldComponentName = 'QuantumColorTextField';
-var Root = styled(TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
+var Root = styled(TextField, { name: colorTextFieldComponentName, slot: 'Root' })({
+    'input::placeholder': {
+        textTransform: 'uppercase',
+    },
+    '& > div:first-of-type': {
+        paddingLeft: '9px',
+    },
+});
 var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -55,39 +62,63 @@ var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'Co
         '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
     });
 });
+// Normalizes HEX color values to valid 7char HEX color values
 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]);
+    if (hex.startsWith('#')) {
+        hex = hex.slice(1);
+    }
+    var upperHex = hex.toUpperCase();
+    switch (upperHex.length) {
+        case 0:
+            return '';
+        case 1:
+            return "#".concat(upperHex.repeat(6));
+        case 2:
+            return "#".concat(upperHex.repeat(3));
+        case 3:
+        case 4:
+        case 5:
+            return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
+        default:
+            return "#".concat(upperHex.slice(0, 6));
     }
-    return hex;
 };
 export var ColorTextField = React.forwardRef(function (props, ref) {
     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);
-            }
+    var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
+    var normalizedInitialColor = normalizeHex(getInitialColor());
+    var _a = __read(React.useState(value || defaultValue), 2), inputColor = _a[0], setInputColor = _a[1];
+    //Derived state from inputColor (textfield value)
+    var colorPicker = React.useMemo(function () {
+        if (inputColor) {
+            return normalizeHex(inputColor);
         }
+        return normalizeHex(getInitialColor());
+    }, [inputColor, value, placeholder, defaultValue]);
+    var handleTextfieldChange = function (event) {
+        var newValue = event.target.value;
+        setInputColor(newValue);
+    };
+    var handleTextfieldBlur = function (event) {
+        var _a, _b;
+        var newValue = normalizeHex(event.target.value);
+        setInputColor(newValue);
+        var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, updatedEvent);
+        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, updatedEvent);
+    };
+    var handleColorPickerChange = function (event) {
+        var _a, _b;
+        var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+        setInputColor(newValue);
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
     };
-    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, readOnly: props.readOnly, value: color, onChange: handleColorChange }))),
-            value: value,
+                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled, readOnly: props.readOnly, value: colorPicker, onChange: handleColorPickerChange }))),
+            value: inputColor,
             placeholder: placeholder,
+            onBlur: handleTextfieldBlur,
+            onChange: handleTextfieldChange,
         } })));
 });

package/esm/dialog/dialog-title/dialog-title.js

@@ -43,6 +43,6 @@ export var DialogTitle = React.forwardRef(function (props, ref) {
     var classes = useMergedClasses(dialogTitleClasses, getDialogTitleUtilityClass, propClasses);
     return (React.createElement(Root, __assign({}, dialogTitleProps, { className: clsx(classes.root, className), ref: ref }),
         disableTypography ? (children) : (React.createElement(Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
-        !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "close button" },
+        !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "Close" },
             React.createElement(XIcon, null)))));
 });

package/esm/promo-banner/promo-banner.js

@@ -94,15 +94,21 @@ var PrimaryActionButton = styled(Button, { name: promoBannerComponentName, slot:
         background: theme.tokens.color_bg_button_inverse_static,
     };
     var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
-    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: theme.tokens.color_fg_inverse_static })) });
+    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({
+            color: showWhiteButtonBackground ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
+        })) });
 });
 var SecondaryActionButton = styled(Button, { name: promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
+    var shouldShowWhiteFocusRing = ownerState.color !== 'dark' && ownerState.color !== 'default';
     return {
         color: ownerState.color !== 'default' ? theme.tokens.color_fg_on_button_primary : theme.tokens.color_fg_link_primary,
         '&:hover': {
             backgroundColor: theme.tokens.color_bg_link_inverse_static_hover,
         },
+        '&:focus': __assign({}, theme.mixins.focusRing({
+            color: shouldShowWhiteFocusRing ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
+        })),
     };
 });
 var ImageContainer = styled('div', { name: promoBannerComponentName, slot: 'ImageContainer' })(function (_a) {

package/esm/status/status-dot/status-dot.js

@@ -76,8 +76,7 @@ export var StatusDot = React.forwardRef(function (props, ref) {
     };
     return (React.createElement(Root, __assign({ ref: ref, component: "span", variant: textVariant, color: textColor, className: clsx(classes.root, className) }, rootProps),
         React.createElement(Dot, { role: "img", ownerState: ownerState, className: classes.dot }),
-        !!label && (React.createElement(Tooltip, { title: label },
-            React.createElement(Label, { width: width, maxWidth: maxWidth }, label))),
+        !!label && (React.createElement(Label, { width: width, maxWidth: maxWidth, title: label }, label)),
         !!details && (React.createElement(Tooltip, { title: details },
             React.createElement(DetailsIcon, null,
                 React.createElement(HelpCircleIcon, { size: "1em" }))))));

package/package.json

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

package/promo-banner/promo-banner.js

@@ -123,15 +123,21 @@ var PrimaryActionButton = (0, styled_1.styled)(button_1.Button, { name: promo_ba
         background: theme.tokens.color_bg_button_inverse_static,
     };
     var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
-    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: theme.tokens.color_fg_inverse_static })) });
+    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({
+            color: showWhiteButtonBackground ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
+        })) });
 });
 var SecondaryActionButton = (0, styled_1.styled)(button_1.Button, { name: promo_banner_classes_1.promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
+    var shouldShowWhiteFocusRing = ownerState.color !== 'dark' && ownerState.color !== 'default';
     return {
         color: ownerState.color !== 'default' ? theme.tokens.color_fg_on_button_primary : theme.tokens.color_fg_link_primary,
         '&:hover': {
             backgroundColor: theme.tokens.color_bg_link_inverse_static_hover,
         },
+        '&:focus': __assign({}, theme.mixins.focusRing({
+            color: shouldShowWhiteFocusRing ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
+        })),
     };
 });
 var ImageContainer = (0, styled_1.styled)('div', { name: promo_banner_classes_1.promoBannerComponentName, slot: 'ImageContainer' })(function (_a) {

package/status/status-dot/status-dot.js

@@ -105,8 +105,7 @@ exports.StatusDot = React.forwardRef(function (props, ref) {
     };
     return (React.createElement(Root, __assign({ ref: ref, component: "span", variant: textVariant, color: textColor, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
         React.createElement(Dot, { role: "img", ownerState: ownerState, className: classes.dot }),
-        !!label && (React.createElement(tooltip_1.Tooltip, { title: label },
-            React.createElement(Label, { width: width, maxWidth: maxWidth }, label))),
+        !!label && (React.createElement(Label, { width: width, maxWidth: maxWidth, title: label }, label)),
         !!details && (React.createElement(tooltip_1.Tooltip, { title: details },
             React.createElement(DetailsIcon, null,
                 React.createElement(icon_1.HelpCircleIcon, { size: "1em" }))))));