@auth0/quantum-product 2.4.5 → 2.4.6

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 +56 -25
  2. package/esm/color-text-field/color-text-field.js +56 -25
  3. package/package.json +1 -1
package/color-text-field/color-text-field.js CHANGED
@@ -67,7 +67,14 @@ 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' })({});
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
+ });
71
78
  var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
72
79
  var theme = _a.theme;
73
80
  return ({
@@ -81,39 +88,63 @@ var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentN
81
88
  '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
82
89
  });
83
90
  });
91
+ // Normalizes HEX color values to valid 7char HEX color values
84
92
  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]);
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));
87
110
  }
88
- return hex;
89
111
  };
90
112
  exports.ColorTextField = React.forwardRef(function (props, ref) {
91
113
  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
- }
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);
105
121
  }
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 }) }));
106
141
  };
107
- React.useEffect(function () {
108
- var newColor = value || placeholder || defaultValue || '#000000';
109
- if (newColor) {
110
- setColor(normalizeHex(newColor));
111
- }
112
- }, [value, defaultValue, placeholder]);
113
142
  return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
114
143
  startAdornment: (React.createElement(input_1.InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
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,
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,
117
146
  placeholder: placeholder,
147
+ onBlur: handleTextfieldBlur,
148
+ onChange: handleTextfieldChange,
118
149
  } })));
119
150
  });
package/esm/color-text-field/color-text-field.js CHANGED
@@ -41,7 +41,14 @@ 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' })({});
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
+ });
45
52
  var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
46
53
  var theme = _a.theme;
47
54
  return ({
@@ -55,39 +62,63 @@ var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'Co
55
62
  '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
56
63
  });
57
64
  });
65
+ // Normalizes HEX color values to valid 7char HEX color values
58
66
  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]);
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));
61
84
  }
62
- return hex;
63
85
  };
64
86
  export var ColorTextField = React.forwardRef(function (props, ref) {
65
87
  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
- }
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);
79
95
  }
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 }) }));
80
115
  };
81
- React.useEffect(function () {
82
- var newColor = value || placeholder || defaultValue || '#000000';
83
- if (newColor) {
84
- setColor(normalizeHex(newColor));
85
- }
86
- }, [value, defaultValue, placeholder]);
87
116
  return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
88
117
  startAdornment: (React.createElement(InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
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,
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,
91
120
  placeholder: placeholder,
121
+ onBlur: handleTextfieldBlur,
122
+ onChange: handleTextfieldChange,
92
123
  } })));
93
124
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.4.5",
3
+ "version": "2.4.6",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {