@auth0/quantum-product 2.4.6 → 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 +44 -9
  3. package/esm/card/card-header/card-header.js +9 -1
  4. package/esm/color-text-field/color-text-field.js +44 -9
  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,13 +67,29 @@ 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
- },
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
+ });
77
93
  });
78
94
  var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
79
95
  var theme = _a.theme;
@@ -106,14 +122,19 @@ var normalizeHex = function (hex) {
106
122
  case 5:
107
123
  return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
108
124
  default:
109
- return "#".concat(upperHex.slice(0, 6));
125
+ return "#".concat(upperHex.padEnd(6, upperHex).slice(0, 6));
110
126
  }
111
127
  };
128
+ var validateHex = function (hex) {
129
+ var hexRegex = /^(#?[0-9a-fA-F]{1,6})$/;
130
+ return hexRegex.test(hex);
131
+ };
112
132
  exports.ColorTextField = React.forwardRef(function (props, ref) {
113
133
  var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
114
134
  var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
115
135
  var normalizedInitialColor = normalizeHex(getInitialColor());
116
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];
117
138
  //Derived state from inputColor (textfield value)
118
139
  var colorPicker = React.useMemo(function () {
119
140
  if (inputColor) {
@@ -127,6 +148,11 @@ exports.ColorTextField = React.forwardRef(function (props, ref) {
127
148
  };
128
149
  var handleTextfieldBlur = function (event) {
129
150
  var _a, _b;
151
+ if (!validateHex(event.target.value)) {
152
+ setError('Color is invalid');
153
+ return;
154
+ }
155
+ setError(null);
130
156
  var newValue = normalizeHex(event.target.value);
131
157
  setInputColor(newValue);
132
158
  var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
@@ -135,11 +161,20 @@ exports.ColorTextField = React.forwardRef(function (props, ref) {
135
161
  };
136
162
  var handleColorPickerChange = function (event) {
137
163
  var _a, _b;
164
+ if (!validateHex(event.target.value)) {
165
+ setError('Color is invalid');
166
+ return;
167
+ }
168
+ setError(null);
138
169
  var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
139
170
  setInputColor(newValue);
140
171
  (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
141
172
  };
142
- return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
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: {
143
178
  startAdornment: (React.createElement(input_1.InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
144
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 }))),
145
180
  value: inputColor,
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,13 +41,29 @@ 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
- },
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
+ });
51
67
  });
52
68
  var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
53
69
  var theme = _a.theme;
@@ -80,14 +96,19 @@ var normalizeHex = function (hex) {
80
96
  case 5:
81
97
  return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
82
98
  default:
83
- return "#".concat(upperHex.slice(0, 6));
99
+ return "#".concat(upperHex.padEnd(6, upperHex).slice(0, 6));
84
100
  }
85
101
  };
102
+ var validateHex = function (hex) {
103
+ var hexRegex = /^(#?[0-9a-fA-F]{1,6})$/;
104
+ return hexRegex.test(hex);
105
+ };
86
106
  export var ColorTextField = React.forwardRef(function (props, ref) {
87
107
  var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
88
108
  var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
89
109
  var normalizedInitialColor = normalizeHex(getInitialColor());
90
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];
91
112
  //Derived state from inputColor (textfield value)
92
113
  var colorPicker = React.useMemo(function () {
93
114
  if (inputColor) {
@@ -101,6 +122,11 @@ export var ColorTextField = React.forwardRef(function (props, ref) {
101
122
  };
102
123
  var handleTextfieldBlur = function (event) {
103
124
  var _a, _b;
125
+ if (!validateHex(event.target.value)) {
126
+ setError('Color is invalid');
127
+ return;
128
+ }
129
+ setError(null);
104
130
  var newValue = normalizeHex(event.target.value);
105
131
  setInputColor(newValue);
106
132
  var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
@@ -109,11 +135,20 @@ export var ColorTextField = React.forwardRef(function (props, ref) {
109
135
  };
110
136
  var handleColorPickerChange = function (event) {
111
137
  var _a, _b;
138
+ if (!validateHex(event.target.value)) {
139
+ setError('Color is invalid');
140
+ return;
141
+ }
142
+ setError(null);
112
143
  var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
113
144
  setInputColor(newValue);
114
145
  (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
115
146
  };
116
- return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
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: {
117
152
  startAdornment: (React.createElement(InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
118
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 }))),
119
154
  value: inputColor,
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.6",
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
  });