@auth0/quantum-product 2.4.6 → 2.4.7

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.
Files changed (3) hide show
  1. package/color-text-field/color-text-field.js +25 -56
  2. package/esm/color-text-field/color-text-field.js +25 -56
  3. package/package.json +1 -1
package/color-text-field/color-text-field.js CHANGED
@@ -67,14 +67,7 @@ var input_1 = require("../input");
67
67
  var styled_1 = require("../styled");
68
68
  var text_field_1 = require("../text-field");
69
69
  var colorTextFieldComponentName = 'QuantumColorTextField';
70
- var Root = (0, styled_1.styled)(text_field_1.TextField, { name: colorTextFieldComponentName, slot: 'Root' })({
71
- 'input::placeholder': {
72
- textTransform: 'uppercase',
73
- },
74
- '& > div:first-of-type': {
75
- paddingLeft: '9px',
76
- },
77
- });
70
+ var Root = (0, styled_1.styled)(text_field_1.TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
78
71
  var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
79
72
  var theme = _a.theme;
80
73
  return ({
@@ -88,63 +81,39 @@ var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentN
88
81
  '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
89
82
  });
90
83
  });
91
- // Normalizes HEX color values to valid 7char HEX color values
92
84
  var normalizeHex = function (hex) {
93
- if (hex.startsWith('#')) {
94
- hex = hex.slice(1);
95
- }
96
- var upperHex = hex.toUpperCase();
97
- switch (upperHex.length) {
98
- case 0:
99
- return '';
100
- case 1:
101
- return "#".concat(upperHex.repeat(6));
102
- case 2:
103
- return "#".concat(upperHex.repeat(3));
104
- case 3:
105
- case 4:
106
- case 5:
107
- return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
108
- default:
109
- return "#".concat(upperHex.slice(0, 6));
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]);
110
87
  }
88
+ return hex;
111
89
  };
112
90
  exports.ColorTextField = React.forwardRef(function (props, ref) {
113
91
  var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
114
- var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
115
- var normalizedInitialColor = normalizeHex(getInitialColor());
116
- var _a = __read(React.useState(value || defaultValue), 2), inputColor = _a[0], setInputColor = _a[1];
117
- //Derived state from inputColor (textfield value)
118
- var colorPicker = React.useMemo(function () {
119
- if (inputColor) {
120
- return normalizeHex(inputColor);
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
+ }
121
105
  }
122
- return normalizeHex(getInitialColor());
123
- }, [inputColor, value, placeholder, defaultValue]);
124
- var handleTextfieldChange = function (event) {
125
- var newValue = event.target.value;
126
- setInputColor(newValue);
127
- };
128
- var handleTextfieldBlur = function (event) {
129
- var _a, _b;
130
- var newValue = normalizeHex(event.target.value);
131
- setInputColor(newValue);
132
- var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
133
- (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, updatedEvent);
134
- (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, updatedEvent);
135
- };
136
- var handleColorPickerChange = function (event) {
137
- var _a, _b;
138
- var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
139
- setInputColor(newValue);
140
- (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
141
106
  };
107
+ React.useEffect(function () {
108
+ var newColor = value || placeholder || defaultValue || '#000000';
109
+ if (newColor) {
110
+ setColor(normalizeHex(newColor));
111
+ }
112
+ }, [value, defaultValue, placeholder]);
142
113
  return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
143
114
  startAdornment: (React.createElement(input_1.InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
144
- 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 }))),
145
- value: inputColor,
115
+ 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 }))),
116
+ value: value,
146
117
  placeholder: placeholder,
147
- onBlur: handleTextfieldBlur,
148
- onChange: handleTextfieldChange,
149
118
  } })));
150
119
  });
package/esm/color-text-field/color-text-field.js CHANGED
@@ -41,14 +41,7 @@ import { InputAdornment } from '../input';
41
41
  import { styled } from '../styled';
42
42
  import { TextField } from '../text-field';
43
43
  var colorTextFieldComponentName = 'QuantumColorTextField';
44
- var Root = styled(TextField, { name: colorTextFieldComponentName, slot: 'Root' })({
45
- 'input::placeholder': {
46
- textTransform: 'uppercase',
47
- },
48
- '& > div:first-of-type': {
49
- paddingLeft: '9px',
50
- },
51
- });
44
+ var Root = styled(TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
52
45
  var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
53
46
  var theme = _a.theme;
54
47
  return ({
@@ -62,63 +55,39 @@ var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'Co
62
55
  '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
63
56
  });
64
57
  });
65
- // Normalizes HEX color values to valid 7char HEX color values
66
58
  var normalizeHex = function (hex) {
67
- if (hex.startsWith('#')) {
68
- hex = hex.slice(1);
69
- }
70
- var upperHex = hex.toUpperCase();
71
- switch (upperHex.length) {
72
- case 0:
73
- return '';
74
- case 1:
75
- return "#".concat(upperHex.repeat(6));
76
- case 2:
77
- return "#".concat(upperHex.repeat(3));
78
- case 3:
79
- case 4:
80
- case 5:
81
- return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
82
- default:
83
- return "#".concat(upperHex.slice(0, 6));
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]);
84
61
  }
62
+ return hex;
85
63
  };
86
64
  export var ColorTextField = React.forwardRef(function (props, ref) {
87
65
  var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
88
- var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
89
- var normalizedInitialColor = normalizeHex(getInitialColor());
90
- var _a = __read(React.useState(value || defaultValue), 2), inputColor = _a[0], setInputColor = _a[1];
91
- //Derived state from inputColor (textfield value)
92
- var colorPicker = React.useMemo(function () {
93
- if (inputColor) {
94
- return normalizeHex(inputColor);
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
+ }
95
79
  }
96
- return normalizeHex(getInitialColor());
97
- }, [inputColor, value, placeholder, defaultValue]);
98
- var handleTextfieldChange = function (event) {
99
- var newValue = event.target.value;
100
- setInputColor(newValue);
101
- };
102
- var handleTextfieldBlur = function (event) {
103
- var _a, _b;
104
- var newValue = normalizeHex(event.target.value);
105
- setInputColor(newValue);
106
- var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
107
- (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, updatedEvent);
108
- (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, updatedEvent);
109
- };
110
- var handleColorPickerChange = function (event) {
111
- var _a, _b;
112
- var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
113
- setInputColor(newValue);
114
- (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
115
80
  };
81
+ React.useEffect(function () {
82
+ var newColor = value || placeholder || defaultValue || '#000000';
83
+ if (newColor) {
84
+ setColor(normalizeHex(newColor));
85
+ }
86
+ }, [value, defaultValue, placeholder]);
116
87
  return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
117
88
  startAdornment: (React.createElement(InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
118
- 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 }))),
119
- value: inputColor,
89
+ 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 }))),
90
+ value: value,
120
91
  placeholder: placeholder,
121
- onBlur: handleTextfieldBlur,
122
- onChange: handleTextfieldChange,
123
92
  } })));
124
93
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.4.6",
3
+ "version": "2.4.7",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {