@auth0/quantum-product 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -44,6 +44,22 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
44
44
|
}
|
|
45
45
|
return t;
|
|
46
46
|
};
|
|
47
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
48
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
49
|
+
if (!m) return o;
|
|
50
|
+
var i = m.call(o), r, ar = [], e;
|
|
51
|
+
try {
|
|
52
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
53
|
+
}
|
|
54
|
+
catch (error) { e = { error: error }; }
|
|
55
|
+
finally {
|
|
56
|
+
try {
|
|
57
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
58
|
+
}
|
|
59
|
+
finally { if (e) throw e.error; }
|
|
60
|
+
}
|
|
61
|
+
return ar;
|
|
62
|
+
};
|
|
47
63
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
64
|
exports.ColorTextField = void 0;
|
|
49
65
|
var React = __importStar(require("react"));
|
|
@@ -65,10 +81,39 @@ var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentN
|
|
|
65
81
|
'&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
|
|
66
82
|
});
|
|
67
83
|
});
|
|
84
|
+
var normalizeHex = function (hex) {
|
|
85
|
+
if (hex.length === 4 && /^#[0-9A-F]{3}$/i.test(hex)) {
|
|
86
|
+
return "#".concat(hex[1]).concat(hex[1]).concat(hex[2]).concat(hex[2]).concat(hex[3]).concat(hex[3]);
|
|
87
|
+
}
|
|
88
|
+
return hex;
|
|
89
|
+
};
|
|
68
90
|
exports.ColorTextField = React.forwardRef(function (props, ref) {
|
|
69
|
-
var inputAdornmentProps = props.inputAdornmentProps, rootProps = __rest(props, ["inputAdornmentProps"]);
|
|
91
|
+
var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
|
|
92
|
+
var _a = __read(React.useState(normalizeHex(value || placeholder || defaultValue || '#000000')), 2), color = _a[0], setColor = _a[1];
|
|
93
|
+
var handleColorChange = function (event) {
|
|
94
|
+
var value = event.target.value;
|
|
95
|
+
if (value.length === 4 && /^#[0-9A-F]{3}$/i.test(value)) {
|
|
96
|
+
var normalizedValue = normalizeHex(value);
|
|
97
|
+
if (props.onChange) {
|
|
98
|
+
props.onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: normalizedValue }) }));
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
else {
|
|
102
|
+
if (props.onChange) {
|
|
103
|
+
props.onChange(event);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
React.useEffect(function () {
|
|
108
|
+
var newColor = value || placeholder || defaultValue || '#000000';
|
|
109
|
+
if (newColor) {
|
|
110
|
+
setColor(normalizeHex(newColor));
|
|
111
|
+
}
|
|
112
|
+
}, [value, defaultValue, placeholder]);
|
|
70
113
|
return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
|
|
71
114
|
startAdornment: (React.createElement(input_1.InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
|
|
72
|
-
React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled || props.readOnly, value:
|
|
115
|
+
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 }))),
|
|
116
|
+
value: value,
|
|
117
|
+
placeholder: placeholder,
|
|
73
118
|
} })));
|
|
74
119
|
});
|
|
@@ -20,6 +20,22 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
24
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
25
|
+
if (!m) return o;
|
|
26
|
+
var i = m.call(o), r, ar = [], e;
|
|
27
|
+
try {
|
|
28
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
29
|
+
}
|
|
30
|
+
catch (error) { e = { error: error }; }
|
|
31
|
+
finally {
|
|
32
|
+
try {
|
|
33
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
34
|
+
}
|
|
35
|
+
finally { if (e) throw e.error; }
|
|
36
|
+
}
|
|
37
|
+
return ar;
|
|
38
|
+
};
|
|
23
39
|
import * as React from 'react';
|
|
24
40
|
import { InputAdornment } from '../input';
|
|
25
41
|
import { styled } from '../styled';
|
|
@@ -39,10 +55,39 @@ var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'Co
|
|
|
39
55
|
'&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
|
|
40
56
|
});
|
|
41
57
|
});
|
|
58
|
+
var normalizeHex = function (hex) {
|
|
59
|
+
if (hex.length === 4 && /^#[0-9A-F]{3}$/i.test(hex)) {
|
|
60
|
+
return "#".concat(hex[1]).concat(hex[1]).concat(hex[2]).concat(hex[2]).concat(hex[3]).concat(hex[3]);
|
|
61
|
+
}
|
|
62
|
+
return hex;
|
|
63
|
+
};
|
|
42
64
|
export var ColorTextField = React.forwardRef(function (props, ref) {
|
|
43
|
-
var inputAdornmentProps = props.inputAdornmentProps, rootProps = __rest(props, ["inputAdornmentProps"]);
|
|
65
|
+
var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
|
|
66
|
+
var _a = __read(React.useState(normalizeHex(value || placeholder || defaultValue || '#000000')), 2), color = _a[0], setColor = _a[1];
|
|
67
|
+
var handleColorChange = function (event) {
|
|
68
|
+
var value = event.target.value;
|
|
69
|
+
if (value.length === 4 && /^#[0-9A-F]{3}$/i.test(value)) {
|
|
70
|
+
var normalizedValue = normalizeHex(value);
|
|
71
|
+
if (props.onChange) {
|
|
72
|
+
props.onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: normalizedValue }) }));
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
if (props.onChange) {
|
|
77
|
+
props.onChange(event);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
React.useEffect(function () {
|
|
82
|
+
var newColor = value || placeholder || defaultValue || '#000000';
|
|
83
|
+
if (newColor) {
|
|
84
|
+
setColor(normalizeHex(newColor));
|
|
85
|
+
}
|
|
86
|
+
}, [value, defaultValue, placeholder]);
|
|
44
87
|
return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
|
|
45
88
|
startAdornment: (React.createElement(InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
|
|
46
|
-
React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled || props.readOnly, value:
|
|
89
|
+
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 }))),
|
|
90
|
+
value: value,
|
|
91
|
+
placeholder: placeholder,
|
|
47
92
|
} })));
|
|
48
93
|
});
|
|
@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import * as React from 'react';
|
|
24
|
+
import { capitalize } from '@mui/material';
|
|
24
25
|
import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
|
|
25
26
|
import { styled } from '../styled';
|
|
26
27
|
import { useIconButtonContext } from './icon-button-context';
|
|
@@ -63,6 +64,7 @@ export var IconButton = React.forwardRef(function (props, ref) {
|
|
|
63
64
|
var iconButtonContext = useIconButtonContext();
|
|
64
65
|
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"]);
|
|
65
66
|
var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
|
|
66
|
-
var
|
|
67
|
-
|
|
67
|
+
var captizedLable = label ? capitalize(label) : null;
|
|
68
|
+
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));
|
|
69
|
+
return (React.createElement(Root, { title: captizedLable, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
|
|
68
70
|
});
|
|
@@ -47,6 +47,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
47
47
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
48
|
exports.IconButton = exports.iconButtonClasses = exports.IconButtonComponentName = void 0;
|
|
49
49
|
var React = __importStar(require("react"));
|
|
50
|
+
var material_1 = require("@mui/material");
|
|
50
51
|
var IconButton_1 = __importStar(require("@mui/material/IconButton"));
|
|
51
52
|
Object.defineProperty(exports, "iconButtonClasses", { enumerable: true, get: function () { return IconButton_1.iconButtonClasses; } });
|
|
52
53
|
var styled_1 = require("../styled");
|
|
@@ -89,6 +90,7 @@ exports.IconButton = React.forwardRef(function (props, ref) {
|
|
|
89
90
|
var iconButtonContext = (0, icon_button_context_1.useIconButtonContext)();
|
|
90
91
|
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"]);
|
|
91
92
|
var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
|
|
92
|
-
var
|
|
93
|
-
|
|
93
|
+
var captizedLable = label ? (0, material_1.capitalize)(label) : null;
|
|
94
|
+
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));
|
|
95
|
+
return (React.createElement(Root, { title: captizedLable, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
|
|
94
96
|
});
|