@auth0/quantum-product 2.4.7 → 2.4.8

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 (11) hide show
  1. package/card/card-header/card-header.js +9 -1
  2. package/color-text-field/color-text-field.js +90 -24
  3. package/esm/card/card-header/card-header.js +9 -1
  4. package/esm/color-text-field/color-text-field.js +90 -24
  5. package/esm/label/label.js +2 -2
  6. package/esm/tabs/tab/tab.js +13 -3
  7. package/esm/title-block/title-block.js +2 -2
  8. package/label/label.js +2 -2
  9. package/package.json +1 -1
  10. package/tabs/tab/tab.js +13 -3
  11. package/title-block/title-block.js +2 -2
package/card/card-header/card-header.js CHANGED
@@ -91,5 +91,13 @@ exports.CardHeader = React.forwardRef(function (props, ref) {
91
91
  action: classes.action,
92
92
  avatar: classes.avatar,
93
93
  content: classes.content,
94
- }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: (0, clsx_1.default)(classes.title, titleTypographyProps.className), ownerState: { size: size } }), title), subheader: subheader ? (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p" }, subheaderTypographyProps, { className: (0, clsx_1.default)(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
94
+ }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: (0, clsx_1.default)(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: true, sx: {
95
+ whiteSpace: 'nowrap',
96
+ overflow: 'hidden',
97
+ textOverflow: 'ellipsis',
98
+ }, title: title }), title), subheader: subheader ? (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: true, sx: {
99
+ whiteSpace: 'nowrap',
100
+ overflow: 'hidden',
101
+ textOverflow: 'ellipsis',
102
+ }, title: subheader }, subheaderTypographyProps, { className: (0, clsx_1.default)(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
95
103
  });
package/color-text-field/color-text-field.js CHANGED
@@ -67,7 +67,30 @@ 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' })(function (_a) {
71
+ var size = _a.size;
72
+ return ({
73
+ 'input::placeholder': {
74
+ textTransform: 'uppercase',
75
+ },
76
+ '& > div:first-of-type': {
77
+ paddingLeft: size === 'small' ? '9px' : '12px',
78
+ },
79
+ '& input[type="color"]': {
80
+ cursor: 'pointer',
81
+ width: size === 'small' ? '16px' : '20px',
82
+ height: size === 'small' ? '16px' : '20px',
83
+ '&::-webkit-color-swatch, &::-webkit-color-swatch-wrapper': {
84
+ borderRadius: '2px',
85
+ padding: 0,
86
+ },
87
+ '&::-moz-color-swatch': {
88
+ borderRadius: '2px',
89
+ padding: 0,
90
+ },
91
+ },
92
+ });
93
+ });
71
94
  var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
72
95
  var theme = _a.theme;
73
96
  return ({
@@ -81,39 +104,82 @@ var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentN
81
104
  '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
82
105
  });
83
106
  });
107
+ // Normalizes HEX color values to valid 7char HEX color values
84
108
  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]);
109
+ if (hex.startsWith('#')) {
110
+ hex = hex.slice(1);
87
111
  }
88
- return hex;
112
+ var upperHex = hex.toUpperCase();
113
+ switch (upperHex.length) {
114
+ case 0:
115
+ return '';
116
+ case 1:
117
+ return "#".concat(upperHex.repeat(6));
118
+ case 2:
119
+ return "#".concat(upperHex.repeat(3));
120
+ case 3:
121
+ case 4:
122
+ case 5:
123
+ return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
124
+ default:
125
+ return "#".concat(upperHex.padEnd(6, upperHex).slice(0, 6));
126
+ }
127
+ };
128
+ var validateHex = function (hex) {
129
+ var hexRegex = /^(#?[0-9a-fA-F]{1,6})$/;
130
+ return hexRegex.test(hex);
89
131
  };
90
132
  exports.ColorTextField = React.forwardRef(function (props, ref) {
91
133
  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
- }
134
+ var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
135
+ var normalizedInitialColor = normalizeHex(getInitialColor());
136
+ var _a = __read(React.useState(value || defaultValue), 2), inputColor = _a[0], setInputColor = _a[1];
137
+ var _b = __read(React.useState(null), 2), error = _b[0], setError = _b[1];
138
+ //Derived state from inputColor (textfield value)
139
+ var colorPicker = React.useMemo(function () {
140
+ if (inputColor) {
141
+ return normalizeHex(inputColor);
100
142
  }
101
- else {
102
- if (props.onChange) {
103
- props.onChange(event);
104
- }
143
+ return normalizeHex(getInitialColor());
144
+ }, [inputColor, value, placeholder, defaultValue]);
145
+ var handleTextfieldChange = function (event) {
146
+ var newValue = event.target.value;
147
+ setInputColor(newValue);
148
+ };
149
+ var handleTextfieldBlur = function (event) {
150
+ var _a, _b;
151
+ if (!validateHex(event.target.value)) {
152
+ setError('Color is invalid');
153
+ return;
105
154
  }
155
+ setError(null);
156
+ var newValue = normalizeHex(event.target.value);
157
+ setInputColor(newValue);
158
+ var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
159
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, updatedEvent);
160
+ (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, updatedEvent);
106
161
  };
107
- React.useEffect(function () {
108
- var newColor = value || placeholder || defaultValue || '#000000';
109
- if (newColor) {
110
- setColor(normalizeHex(newColor));
162
+ var handleColorPickerChange = function (event) {
163
+ var _a, _b;
164
+ if (!validateHex(event.target.value)) {
165
+ setError('Color is invalid');
166
+ return;
111
167
  }
112
- }, [value, defaultValue, placeholder]);
113
- return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
168
+ setError(null);
169
+ var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
170
+ setInputColor(newValue);
171
+ (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
172
+ };
173
+ // Rerender to avoid memoized value on defaultValue change
174
+ React.useEffect(function () {
175
+ setInputColor(defaultValue);
176
+ }, [defaultValue]);
177
+ return (React.createElement(Root, __assign({ ref: ref, error: error }, rootProps, { InputProps: {
114
178
  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,
179
+ 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 }))),
180
+ value: inputColor,
117
181
  placeholder: placeholder,
182
+ onBlur: handleTextfieldBlur,
183
+ onChange: handleTextfieldChange,
118
184
  } })));
119
185
  });
package/esm/card/card-header/card-header.js CHANGED
@@ -62,5 +62,13 @@ export var CardHeader = React.forwardRef(function (props, ref) {
62
62
  action: classes.action,
63
63
  avatar: classes.avatar,
64
64
  content: classes.content,
65
- }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: clsx(classes.title, titleTypographyProps.className), ownerState: { size: size } }), title), subheader: subheader ? (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p" }, subheaderTypographyProps, { className: clsx(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
65
+ }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: clsx(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: true, sx: {
66
+ whiteSpace: 'nowrap',
67
+ overflow: 'hidden',
68
+ textOverflow: 'ellipsis',
69
+ }, title: title }), title), subheader: subheader ? (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: true, sx: {
70
+ whiteSpace: 'nowrap',
71
+ overflow: 'hidden',
72
+ textOverflow: 'ellipsis',
73
+ }, title: subheader }, subheaderTypographyProps, { className: clsx(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
66
74
  });
package/esm/color-text-field/color-text-field.js CHANGED
@@ -41,7 +41,30 @@ 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' })(function (_a) {
45
+ var size = _a.size;
46
+ return ({
47
+ 'input::placeholder': {
48
+ textTransform: 'uppercase',
49
+ },
50
+ '& > div:first-of-type': {
51
+ paddingLeft: size === 'small' ? '9px' : '12px',
52
+ },
53
+ '& input[type="color"]': {
54
+ cursor: 'pointer',
55
+ width: size === 'small' ? '16px' : '20px',
56
+ height: size === 'small' ? '16px' : '20px',
57
+ '&::-webkit-color-swatch, &::-webkit-color-swatch-wrapper': {
58
+ borderRadius: '2px',
59
+ padding: 0,
60
+ },
61
+ '&::-moz-color-swatch': {
62
+ borderRadius: '2px',
63
+ padding: 0,
64
+ },
65
+ },
66
+ });
67
+ });
45
68
  var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
46
69
  var theme = _a.theme;
47
70
  return ({
@@ -55,39 +78,82 @@ var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'Co
55
78
  '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
56
79
  });
57
80
  });
81
+ // Normalizes HEX color values to valid 7char HEX color values
58
82
  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]);
83
+ if (hex.startsWith('#')) {
84
+ hex = hex.slice(1);
61
85
  }
62
- return hex;
86
+ var upperHex = hex.toUpperCase();
87
+ switch (upperHex.length) {
88
+ case 0:
89
+ return '';
90
+ case 1:
91
+ return "#".concat(upperHex.repeat(6));
92
+ case 2:
93
+ return "#".concat(upperHex.repeat(3));
94
+ case 3:
95
+ case 4:
96
+ case 5:
97
+ return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
98
+ default:
99
+ return "#".concat(upperHex.padEnd(6, upperHex).slice(0, 6));
100
+ }
101
+ };
102
+ var validateHex = function (hex) {
103
+ var hexRegex = /^(#?[0-9a-fA-F]{1,6})$/;
104
+ return hexRegex.test(hex);
63
105
  };
64
106
  export var ColorTextField = React.forwardRef(function (props, ref) {
65
107
  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
- }
108
+ var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
109
+ var normalizedInitialColor = normalizeHex(getInitialColor());
110
+ var _a = __read(React.useState(value || defaultValue), 2), inputColor = _a[0], setInputColor = _a[1];
111
+ var _b = __read(React.useState(null), 2), error = _b[0], setError = _b[1];
112
+ //Derived state from inputColor (textfield value)
113
+ var colorPicker = React.useMemo(function () {
114
+ if (inputColor) {
115
+ return normalizeHex(inputColor);
74
116
  }
75
- else {
76
- if (props.onChange) {
77
- props.onChange(event);
78
- }
117
+ return normalizeHex(getInitialColor());
118
+ }, [inputColor, value, placeholder, defaultValue]);
119
+ var handleTextfieldChange = function (event) {
120
+ var newValue = event.target.value;
121
+ setInputColor(newValue);
122
+ };
123
+ var handleTextfieldBlur = function (event) {
124
+ var _a, _b;
125
+ if (!validateHex(event.target.value)) {
126
+ setError('Color is invalid');
127
+ return;
79
128
  }
129
+ setError(null);
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);
80
135
  };
81
- React.useEffect(function () {
82
- var newColor = value || placeholder || defaultValue || '#000000';
83
- if (newColor) {
84
- setColor(normalizeHex(newColor));
136
+ var handleColorPickerChange = function (event) {
137
+ var _a, _b;
138
+ if (!validateHex(event.target.value)) {
139
+ setError('Color is invalid');
140
+ return;
85
141
  }
86
- }, [value, defaultValue, placeholder]);
87
- return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
142
+ setError(null);
143
+ var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
144
+ setInputColor(newValue);
145
+ (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
146
+ };
147
+ // Rerender to avoid memoized value on defaultValue change
148
+ React.useEffect(function () {
149
+ setInputColor(defaultValue);
150
+ }, [defaultValue]);
151
+ return (React.createElement(Root, __assign({ ref: ref, error: error }, rootProps, { InputProps: {
88
152
  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,
153
+ 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 }))),
154
+ value: inputColor,
91
155
  placeholder: placeholder,
156
+ onBlur: handleTextfieldBlur,
157
+ onChange: handleTextfieldChange,
92
158
  } })));
93
159
  });
package/esm/label/label.js CHANGED
@@ -58,7 +58,7 @@ var StyledLabel = styled('span', {
58
58
  shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'color' && prop !== 'variant'; },
59
59
  })(function (_a) {
60
60
  var theme = _a.theme, _b = _a.ownerState, _c = _b.color, color = _c === void 0 ? 'default' : _c, _d = _b.variant, variant = _d === void 0 ? 'default' : _d;
61
- return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
61
+ return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
62
62
  background: theme.tokens.color_bg_state_neutral_subtle,
63
63
  color: theme.tokens.color_fg_on_state_neutral_subtle,
64
64
  })), (color === 'primary' && {
@@ -117,5 +117,5 @@ export var Label = React.forwardRef(function (props, ref) {
117
117
  variant: variant,
118
118
  children: children,
119
119
  };
120
- return (React.createElement(StyledLabel, __assign({ ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
120
+ return (React.createElement(StyledLabel, __assign({ title: ownerState.children, ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
121
121
  });
package/esm/tabs/tab/tab.js CHANGED
@@ -32,10 +32,20 @@ var AvailabilityLabel = styled(Label)(function (_a) {
32
32
  marginLeft: theme.spacing(1),
33
33
  });
34
34
  });
35
+ var LabelContainer = styled('div')(function (_a) {
36
+ var width = _a.width, maxWidth = _a.maxWidth;
37
+ return ({
38
+ width: width || 'auto',
39
+ maxWidth: maxWidth || 'none',
40
+ overflow: 'hidden',
41
+ whiteSpace: 'nowrap',
42
+ textOverflow: 'ellipsis',
43
+ });
44
+ });
35
45
  export var Tab = React.forwardRef(function (_a, ref) {
36
- var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, tabProps = __rest(_a, ["value", "productReleaseStage", "label"]);
37
- var _b = useTabsContext(), getTabProps = _b.getTabProps, fullWidth = _b.fullWidth;
46
+ var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, _b = _a.sx, sx = _b === void 0 ? {} : _b, tabProps = __rest(_a, ["value", "productReleaseStage", "label", "sx"]);
47
+ var _c = useTabsContext(), getTabProps = _c.getTabProps, fullWidth = _c.fullWidth;
38
48
  return (React.createElement(MuiTab, __assign({ ref: ref }, getTabProps(value), { value: value, label: React.createElement(StackLayout, { gutter: 0 },
39
- label,
49
+ React.createElement(LabelContainer, { width: sx === null || sx === void 0 ? void 0 : sx.width, maxWidth: sx === null || sx === void 0 ? void 0 : sx.maxWidth, title: label }, label),
40
50
  productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, tabProps, { fullWidth: fullWidth })));
41
51
  });
package/esm/title-block/title-block.js CHANGED
@@ -28,6 +28,6 @@ import { titleBlockClasses } from './title-block-classes';
28
28
  export var TitleBlock = React.forwardRef(function (_a, ref) {
29
29
  var title = _a.title, _b = _a.titleTypographyProps, titleTypographyProps = _b === void 0 ? {} : _b, description = _a.description, _c = _a.descriptionTypographyProps, descriptionTypographyProps = _c === void 0 ? {} : _c, className = _a.className, rootProps = __rest(_a, ["title", "titleTypographyProps", "description", "descriptionTypographyProps", "className"]);
30
30
  return (React.createElement(RowLayout, __assign({ gutter: 0, className: clsx(titleBlockClasses.root, className) }, rootProps, { ref: ref }),
31
- React.createElement(Text, __assign({ className: titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps), title),
32
- !!description && (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", className: titleBlockClasses.description }, descriptionTypographyProps), description))));
31
+ React.createElement(Text, __assign({ className: titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps, { title: title }), title),
32
+ !!description && (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", className: titleBlockClasses.description }, descriptionTypographyProps, { title: description }), description))));
33
33
  });
package/label/label.js CHANGED
@@ -84,7 +84,7 @@ var StyledLabel = (0, styled_1.styled)('span', {
84
84
  shouldForwardProp: function (prop) { return (0, styled_1.rootShouldForwardProp)(prop) && prop !== 'color' && prop !== 'variant'; },
85
85
  })(function (_a) {
86
86
  var theme = _a.theme, _b = _a.ownerState, _c = _b.color, color = _c === void 0 ? 'default' : _c, _d = _b.variant, variant = _d === void 0 ? 'default' : _d;
87
- return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
87
+ return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
88
88
  background: theme.tokens.color_bg_state_neutral_subtle,
89
89
  color: theme.tokens.color_fg_on_state_neutral_subtle,
90
90
  })), (color === 'primary' && {
@@ -143,5 +143,5 @@ exports.Label = React.forwardRef(function (props, ref) {
143
143
  variant: variant,
144
144
  children: children,
145
145
  };
146
- return (React.createElement(StyledLabel, __assign({ ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
146
+ return (React.createElement(StyledLabel, __assign({ title: ownerState.children, ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
147
147
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.4.7",
3
+ "version": "2.4.8",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
package/tabs/tab/tab.js CHANGED
@@ -61,10 +61,20 @@ var AvailabilityLabel = (0, styled_1.styled)(label_1.Label)(function (_a) {
61
61
  marginLeft: theme.spacing(1),
62
62
  });
63
63
  });
64
+ var LabelContainer = (0, styled_1.styled)('div')(function (_a) {
65
+ var width = _a.width, maxWidth = _a.maxWidth;
66
+ return ({
67
+ width: width || 'auto',
68
+ maxWidth: maxWidth || 'none',
69
+ overflow: 'hidden',
70
+ whiteSpace: 'nowrap',
71
+ textOverflow: 'ellipsis',
72
+ });
73
+ });
64
74
  exports.Tab = React.forwardRef(function (_a, ref) {
65
- var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, tabProps = __rest(_a, ["value", "productReleaseStage", "label"]);
66
- var _b = (0, tabs_context_1.useTabsContext)(), getTabProps = _b.getTabProps, fullWidth = _b.fullWidth;
75
+ var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, _b = _a.sx, sx = _b === void 0 ? {} : _b, tabProps = __rest(_a, ["value", "productReleaseStage", "label", "sx"]);
76
+ var _c = (0, tabs_context_1.useTabsContext)(), getTabProps = _c.getTabProps, fullWidth = _c.fullWidth;
67
77
  return (React.createElement(Tab_1.default, __assign({ ref: ref }, getTabProps(value), { value: value, label: React.createElement(stack_layout_1.StackLayout, { gutter: 0 },
68
- label,
78
+ React.createElement(LabelContainer, { width: sx === null || sx === void 0 ? void 0 : sx.width, maxWidth: sx === null || sx === void 0 ? void 0 : sx.maxWidth, title: label }, label),
69
79
  productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, tabProps, { fullWidth: fullWidth })));
70
80
  });
package/title-block/title-block.js CHANGED
@@ -57,6 +57,6 @@ var title_block_classes_1 = require("./title-block-classes");
57
57
  exports.TitleBlock = React.forwardRef(function (_a, ref) {
58
58
  var title = _a.title, _b = _a.titleTypographyProps, titleTypographyProps = _b === void 0 ? {} : _b, description = _a.description, _c = _a.descriptionTypographyProps, descriptionTypographyProps = _c === void 0 ? {} : _c, className = _a.className, rootProps = __rest(_a, ["title", "titleTypographyProps", "description", "descriptionTypographyProps", "className"]);
59
59
  return (React.createElement(row_layout_1.RowLayout, __assign({ gutter: 0, className: (0, clsx_1.default)(title_block_classes_1.titleBlockClasses.root, className) }, rootProps, { ref: ref }),
60
- React.createElement(text_1.Text, __assign({ className: title_block_classes_1.titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps), title),
61
- !!description && (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", className: title_block_classes_1.titleBlockClasses.description }, descriptionTypographyProps), description))));
60
+ React.createElement(text_1.Text, __assign({ className: title_block_classes_1.titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps, { title: title }), title),
61
+ !!description && (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", className: title_block_classes_1.titleBlockClasses.description }, descriptionTypographyProps, { title: description }), description))));
62
62
  });