@auth0/quantum-product 2.4.9 → 2.4.11

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 (12) hide show
  1. package/color-text-field/color-text-field.js +25 -91
  2. package/esm/color-text-field/color-text-field.js +25 -91
  3. package/esm/label/label.js +11 -7
  4. package/esm/pagination/pager/pager.js +3 -3
  5. package/esm/pagination/pagination.js +2 -2
  6. package/label/label.d.ts +1 -0
  7. package/label/label.js +11 -7
  8. package/package.json +1 -1
  9. package/pagination/pager/pager.d.ts +2 -0
  10. package/pagination/pager/pager.js +3 -3
  11. package/pagination/pagination.d.ts +5 -1
  12. package/pagination/pagination.js +2 -2
package/color-text-field/color-text-field.js CHANGED
@@ -67,30 +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' })(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
- });
70
+ var Root = (0, styled_1.styled)(text_field_1.TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
94
71
  var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
95
72
  var theme = _a.theme;
96
73
  return ({
@@ -104,82 +81,39 @@ var ColorPicker = (0, styled_1.styled)('input', { name: colorTextFieldComponentN
104
81
  '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
105
82
  });
106
83
  });
107
- // Normalizes HEX color values to valid 7char HEX color values
108
84
  var normalizeHex = function (hex) {
109
- if (hex.startsWith('#')) {
110
- hex = hex.slice(1);
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]);
111
87
  }
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);
88
+ return hex;
131
89
  };
132
90
  exports.ColorTextField = React.forwardRef(function (props, ref) {
133
- var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, error = props.error, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "error", "placeholder"]);
134
- var getInitialColor = React.useCallback(function () { return value || placeholder || defaultValue || ''; }, [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(error || ''), 2), invalidError = _b[0], setInvalidError = _b[1];
138
- //Derived state from inputColor (textfield value)
139
- var colorPicker = React.useMemo(function () {
140
- if (inputColor) {
141
- return normalizeHex(inputColor);
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
+ }
142
100
  }
143
- return normalizeHex(getInitialColor());
144
- }, [inputColor, getInitialColor]);
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
- setInvalidError('Color is invalid');
153
- return;
154
- }
155
- setInvalidError('');
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);
161
- };
162
- var handleColorPickerChange = function (event) {
163
- var _a, _b;
164
- if (!validateHex(event.target.value)) {
165
- setInvalidError('Color is invalid');
166
- return;
101
+ else {
102
+ if (props.onChange) {
103
+ props.onChange(event);
104
+ }
167
105
  }
168
- setInvalidError('');
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
106
  };
173
- // Rerender to avoid memoized value on defaultValue change
174
107
  React.useEffect(function () {
175
- setInputColor(defaultValue);
176
- }, [defaultValue]);
177
- return (React.createElement(Root, __assign({ ref: ref, error: props.error || invalidError }, rootProps, { InputProps: {
108
+ var newColor = value || placeholder || defaultValue || '#000000';
109
+ if (newColor) {
110
+ setColor(normalizeHex(newColor));
111
+ }
112
+ }, [value, defaultValue, placeholder]);
113
+ return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
178
114
  startAdornment: (React.createElement(input_1.InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
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,
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,
181
117
  placeholder: placeholder,
182
- onBlur: handleTextfieldBlur,
183
- onChange: handleTextfieldChange,
184
118
  } })));
185
119
  });
package/esm/color-text-field/color-text-field.js CHANGED
@@ -41,30 +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' })(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
- });
44
+ var Root = styled(TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
68
45
  var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
69
46
  var theme = _a.theme;
70
47
  return ({
@@ -78,82 +55,39 @@ var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'Co
78
55
  '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
79
56
  });
80
57
  });
81
- // Normalizes HEX color values to valid 7char HEX color values
82
58
  var normalizeHex = function (hex) {
83
- if (hex.startsWith('#')) {
84
- hex = hex.slice(1);
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]);
85
61
  }
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);
62
+ return hex;
105
63
  };
106
64
  export var ColorTextField = React.forwardRef(function (props, ref) {
107
- var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, error = props.error, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "error", "placeholder"]);
108
- var getInitialColor = React.useCallback(function () { return value || placeholder || defaultValue || ''; }, [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(error || ''), 2), invalidError = _b[0], setInvalidError = _b[1];
112
- //Derived state from inputColor (textfield value)
113
- var colorPicker = React.useMemo(function () {
114
- if (inputColor) {
115
- return normalizeHex(inputColor);
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
+ }
116
74
  }
117
- return normalizeHex(getInitialColor());
118
- }, [inputColor, getInitialColor]);
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
- setInvalidError('Color is invalid');
127
- return;
128
- }
129
- setInvalidError('');
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
- if (!validateHex(event.target.value)) {
139
- setInvalidError('Color is invalid');
140
- return;
75
+ else {
76
+ if (props.onChange) {
77
+ props.onChange(event);
78
+ }
141
79
  }
142
- setInvalidError('');
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
80
  };
147
- // Rerender to avoid memoized value on defaultValue change
148
81
  React.useEffect(function () {
149
- setInputColor(defaultValue);
150
- }, [defaultValue]);
151
- return (React.createElement(Root, __assign({ ref: ref, error: props.error || invalidError }, rootProps, { InputProps: {
82
+ var newColor = value || placeholder || defaultValue || '#000000';
83
+ if (newColor) {
84
+ setColor(normalizeHex(newColor));
85
+ }
86
+ }, [value, defaultValue, placeholder]);
87
+ return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
152
88
  startAdornment: (React.createElement(InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
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,
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,
155
91
  placeholder: placeholder,
156
- onBlur: handleTextfieldBlur,
157
- onChange: handleTextfieldChange,
158
92
  } })));
159
93
  });
package/esm/label/label.js CHANGED
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import * as React from 'react';
24
24
  import { rootShouldForwardProp, styled } from '../styled';
25
25
  export var labelComponentName = 'QuantumLabel';
26
- var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr) {
26
+ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr, productReleaseStageLabel) {
27
27
  var labelProps = {
28
28
  color: 'default',
29
29
  variant: 'default',
@@ -32,23 +32,27 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
32
32
  case 'new':
33
33
  case 'generalAvailability':
34
34
  labelProps.variant = 'filled';
35
- labelProps.children = 'New';
35
+ labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
36
36
  labelProps.color = 'primary';
37
37
  break;
38
38
  case 'beta':
39
- labelProps.children = 'Beta';
39
+ labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
40
40
  labelProps.color = 'primary';
41
41
  break;
42
42
  case 'first':
43
43
  case 'early':
44
44
  case 'earlyAccess':
45
45
  labelProps.color = 'primary';
46
- productReleaseStageAbbr ? (labelProps.children = 'Early') : (labelProps.children = 'Early Access');
46
+ productReleaseStageAbbr
47
+ ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Early')
48
+ : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Early Access');
47
49
  break;
48
50
  case 'deprecated':
49
51
  labelProps.color = 'warning';
50
- labelProps.children = 'Deprecated';
52
+ labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Deprecated';
51
53
  break;
54
+ default:
55
+ labelProps.children = productReleaseStage;
52
56
  }
53
57
  return labelProps;
54
58
  };
@@ -109,9 +113,9 @@ var StyledLabel = styled('span', {
109
113
  })))));
110
114
  });
111
115
  export var Label = React.forwardRef(function (props, ref) {
112
- var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant"]);
116
+ var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, productReleaseStageLabel = props.productReleaseStageLabel, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant", "productReleaseStageLabel"]);
113
117
  var ownerState = productReleaseStage
114
- ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr)
118
+ ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr, productReleaseStageLabel)
115
119
  : {
116
120
  color: color,
117
121
  variant: variant,
package/esm/pagination/pager/pager.js CHANGED
@@ -28,13 +28,13 @@ import { getPagerUtilityClass, pagerClasses } from './pager-classes';
28
28
  import { clsx } from '../../utils';
29
29
  import { ChevronLeftIcon, ChevronRightIcon } from '../../icon';
30
30
  export var Pager = React.forwardRef(function (props, ref) {
31
- var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages"]);
31
+ var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, _e = props.previousButtonLabel, previousButtonLabel = _e === void 0 ? 'Previous Page' : _e, _f = props.nextButtonLabel, nextButtonLabel = _f === void 0 ? 'Next Page' : _f, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages", "previousButtonLabel", "nextButtonLabel"]);
32
32
  var classes = useMergedClasses(pagerClasses, getPagerUtilityClass, propClasses);
33
33
  var isPrevDisabled = disabled || previousDisabled || page <= 1;
34
34
  var isNextDisabled = disabled || nextDisabled || (totalPages != null && page >= totalPages);
35
35
  return (React.createElement(StackLayout, __assign({ ref: ref, gutter: 1, className: clsx(classes.root, className), sx: __assign({ justifyContent: 'flex-end' }, sx) }, rootProps),
36
- React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, label: "Previous page" }, nextIconButtonProps),
36
+ React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, label: previousButtonLabel }, nextIconButtonProps),
37
37
  React.createElement(ChevronLeftIcon, null)),
38
- React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, label: "Next page" }, previousIconButtonProps),
38
+ React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, label: nextButtonLabel }, previousIconButtonProps),
39
39
  React.createElement(ChevronRightIcon, null))));
40
40
  });
package/esm/pagination/pagination.js CHANGED
@@ -61,7 +61,7 @@ var changePageIfAppropriate = function (_a) {
61
61
  }
62
62
  };
63
63
  export var Pagination = React.forwardRef(function (props, ref) {
64
- var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.PagerProps, PagerProps = _b === void 0 ? {} : _b, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "PagerProps"]);
64
+ var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.nextButtonLabel, nextButtonLabel = _b === void 0 ? 'Next Page' : _b, _c = props.previousButtonLabel, previousButtonLabel = _c === void 0 ? 'Previous Page' : _c, _d = props.PagerProps, PagerProps = _d === void 0 ? {} : _d, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "nextButtonLabel", "previousButtonLabel", "PagerProps"]);
65
65
  var classes = useMergedClasses(paginationClasses, getPaginationUtilityClass, propClasses);
66
66
  var pages = pagesFromItems(items, perPage);
67
67
  var pageOptions = React.useMemo(function () {
@@ -106,5 +106,5 @@ export var Pagination = React.forwardRef(function (props, ref) {
106
106
  " of ",
107
107
  items))),
108
108
  React.createElement(StackLayoutItem, null,
109
- React.createElement(Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))))));
109
+ React.createElement(Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps, { previousButtonLabel: previousButtonLabel, nextButtonLabel: nextButtonLabel }))))))));
110
110
  });
package/label/label.d.ts CHANGED
@@ -13,6 +13,7 @@ export interface ILabelComponentProps {
13
13
  * @default true
14
14
  */
15
15
  productReleaseStageAbbr?: boolean;
16
+ productReleaseStageLabel?: string;
16
17
  }
17
18
  export type ILabelProps = IStyledComponentProps<{
18
19
  props: ILabelComponentProps;
package/label/label.js CHANGED
@@ -49,7 +49,7 @@ exports.Label = exports.labelComponentName = void 0;
49
49
  var React = __importStar(require("react"));
50
50
  var styled_1 = require("../styled");
51
51
  exports.labelComponentName = 'QuantumLabel';
52
- var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr) {
52
+ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr, productReleaseStageLabel) {
53
53
  var labelProps = {
54
54
  color: 'default',
55
55
  variant: 'default',
@@ -58,23 +58,27 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
58
58
  case 'new':
59
59
  case 'generalAvailability':
60
60
  labelProps.variant = 'filled';
61
- labelProps.children = 'New';
61
+ labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
62
62
  labelProps.color = 'primary';
63
63
  break;
64
64
  case 'beta':
65
- labelProps.children = 'Beta';
65
+ labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
66
66
  labelProps.color = 'primary';
67
67
  break;
68
68
  case 'first':
69
69
  case 'early':
70
70
  case 'earlyAccess':
71
71
  labelProps.color = 'primary';
72
- productReleaseStageAbbr ? (labelProps.children = 'Early') : (labelProps.children = 'Early Access');
72
+ productReleaseStageAbbr
73
+ ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Early')
74
+ : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Early Access');
73
75
  break;
74
76
  case 'deprecated':
75
77
  labelProps.color = 'warning';
76
- labelProps.children = 'Deprecated';
78
+ labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Deprecated';
77
79
  break;
80
+ default:
81
+ labelProps.children = productReleaseStage;
78
82
  }
79
83
  return labelProps;
80
84
  };
@@ -135,9 +139,9 @@ var StyledLabel = (0, styled_1.styled)('span', {
135
139
  })))));
136
140
  });
137
141
  exports.Label = React.forwardRef(function (props, ref) {
138
- var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant"]);
142
+ var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, productReleaseStageLabel = props.productReleaseStageLabel, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant", "productReleaseStageLabel"]);
139
143
  var ownerState = productReleaseStage
140
- ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr)
144
+ ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr, productReleaseStageLabel)
141
145
  : {
142
146
  color: color,
143
147
  variant: variant,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.4.9",
3
+ "version": "2.4.11",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
package/pagination/pager/pager.d.ts CHANGED
@@ -13,5 +13,7 @@ export interface IPagerProps extends IStackLayoutProps {
13
13
  previousIconButtonProps?: IIconButtonProps;
14
14
  size?: IIconButtonProps['size'];
15
15
  totalPages?: number;
16
+ previousButtonLabel?: string;
17
+ nextButtonLabel?: string;
16
18
  }
17
19
  export declare const Pager: React.ForwardRefExoticComponent<IPagerProps & React.RefAttributes<HTMLDivElement>>;
package/pagination/pager/pager.js CHANGED
@@ -54,13 +54,13 @@ var pager_classes_1 = require("./pager-classes");
54
54
  var utils_1 = require("../../utils");
55
55
  var icon_1 = require("../../icon");
56
56
  exports.Pager = React.forwardRef(function (props, ref) {
57
- var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages"]);
57
+ var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, _e = props.previousButtonLabel, previousButtonLabel = _e === void 0 ? 'Previous Page' : _e, _f = props.nextButtonLabel, nextButtonLabel = _f === void 0 ? 'Next Page' : _f, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages", "previousButtonLabel", "nextButtonLabel"]);
58
58
  var classes = (0, classes_1.useMergedClasses)(pager_classes_1.pagerClasses, pager_classes_1.getPagerUtilityClass, propClasses);
59
59
  var isPrevDisabled = disabled || previousDisabled || page <= 1;
60
60
  var isNextDisabled = disabled || nextDisabled || (totalPages != null && page >= totalPages);
61
61
  return (React.createElement(stack_layout_1.StackLayout, __assign({ ref: ref, gutter: 1, className: (0, utils_1.clsx)(classes.root, className), sx: __assign({ justifyContent: 'flex-end' }, sx) }, rootProps),
62
- React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, label: "Previous page" }, nextIconButtonProps),
62
+ React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, label: previousButtonLabel }, nextIconButtonProps),
63
63
  React.createElement(icon_1.ChevronLeftIcon, null)),
64
- React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, label: "Next page" }, previousIconButtonProps),
64
+ React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, label: nextButtonLabel }, previousIconButtonProps),
65
65
  React.createElement(icon_1.ChevronRightIcon, null))));
66
66
  });
package/pagination/pagination.d.ts CHANGED
@@ -12,6 +12,8 @@ export type IPaginationProps = IStyledComponentProps<{
12
12
  onPageChanged(page: number): void;
13
13
  PagerProps?: Partial<IPagerProps>;
14
14
  classes?: Partial<PaginationClasses>;
15
+ nextButtonLabel?: string;
16
+ previousButtonLabel?: string;
15
17
  };
16
18
  defaultComponent: 'fieldset';
17
19
  }>;
@@ -24,4 +26,6 @@ export declare const Pagination: React.ForwardRefExoticComponent<{
24
26
  onPageChanged(page: number): void;
25
27
  PagerProps?: Partial<IPagerProps> | undefined;
26
28
  classes?: Partial<Record<"root" | "pageSelect" | "pageLabelText" | "pager", string>> | undefined;
27
- } & Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref" | "disabled" | "page" | "classes" | "items" | "showPageSelection" | "perPage" | "onPageChanged" | "PagerProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLFieldSetElement>>;
29
+ nextButtonLabel?: string | undefined;
30
+ previousButtonLabel?: string | undefined;
31
+ } & Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref" | "disabled" | "page" | "classes" | "items" | "previousButtonLabel" | "nextButtonLabel" | "showPageSelection" | "perPage" | "onPageChanged" | "PagerProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLFieldSetElement>>;
package/pagination/pagination.js CHANGED
@@ -90,7 +90,7 @@ var changePageIfAppropriate = function (_a) {
90
90
  }
91
91
  };
92
92
  exports.Pagination = React.forwardRef(function (props, ref) {
93
- var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.PagerProps, PagerProps = _b === void 0 ? {} : _b, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "PagerProps"]);
93
+ var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.nextButtonLabel, nextButtonLabel = _b === void 0 ? 'Next Page' : _b, _c = props.previousButtonLabel, previousButtonLabel = _c === void 0 ? 'Previous Page' : _c, _d = props.PagerProps, PagerProps = _d === void 0 ? {} : _d, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "nextButtonLabel", "previousButtonLabel", "PagerProps"]);
94
94
  var classes = (0, classes_1.useMergedClasses)(pagination_classes_1.paginationClasses, pagination_classes_1.getPaginationUtilityClass, propClasses);
95
95
  var pages = pagesFromItems(items, perPage);
96
96
  var pageOptions = React.useMemo(function () {
@@ -135,5 +135,5 @@ exports.Pagination = React.forwardRef(function (props, ref) {
135
135
  " of ",
136
136
  items))),
137
137
  React.createElement(stack_layout_1.StackLayoutItem, null,
138
- React.createElement(pager_1.Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))))));
138
+ React.createElement(pager_1.Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps, { previousButtonLabel: previousButtonLabel, nextButtonLabel: nextButtonLabel }))))))));
139
139
  });