@auth0/quantum-product 2.11.0 → 2.12.0

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 (14) hide show
  1. package/esm/label/label.js +6 -0
  2. package/esm/switch/switch-classes.js +1 -1
  3. package/esm/switch/switch-overrides.js +119 -41
  4. package/esm/switch/switch.js +104 -10
  5. package/label/label.d.ts +2 -2
  6. package/label/label.js +6 -0
  7. package/package.json +1 -1
  8. package/page/page-header/page-header.d.ts +1 -1
  9. package/switch/switch-classes.d.ts +1 -1
  10. package/switch/switch-classes.js +1 -1
  11. package/switch/switch-overrides.js +119 -41
  12. package/switch/switch.d.ts +1 -1
  13. package/switch/switch.js +103 -9
  14. package/tabs/tab/tab.d.ts +1 -1
package/esm/label/label.js CHANGED
@@ -35,6 +35,12 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
35
35
  labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
36
36
  labelProps.color = 'primary';
37
37
  break;
38
+ case 'developerPreview':
39
+ labelProps.color = 'primary';
40
+ productReleaseStageAbbr
41
+ ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Preview')
42
+ : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Developer Preview');
43
+ break;
38
44
  case 'beta':
39
45
  labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
40
46
  labelProps.color = 'primary';
package/esm/switch/switch-classes.js CHANGED
@@ -3,4 +3,4 @@ export var switchComponentName = 'QuantumSwitch';
3
3
  export function getSwitchUtilityClass(slot) {
4
4
  return generateUtilityClass(switchComponentName, slot);
5
5
  }
6
- export var switchClasses = generateUtilityClasses(switchComponentName, ['switch', 'formControlLabel']);
6
+ export var switchClasses = generateUtilityClasses(switchComponentName, ['switch', 'formControlLabel', 'pressing']);
package/esm/switch/switch-overrides.js CHANGED
@@ -10,82 +10,160 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { switchClasses } from '@mui/material/Switch';
13
- var SWITCH_DIMENSIONS = {
14
- heightPx: 24,
15
- widthPx: 44,
16
- thumbSizePx: 16,
13
+ import { switchClasses as quantumSwitchClasses } from './switch-classes';
14
+ var SWITCH_DIMENSIONS_BY_SIZE = {
15
+ medium: {
16
+ heightPx: 24,
17
+ widthPx: 40,
18
+ thumbSizePx: 22,
19
+ thumbActiveWidthPx: 28,
20
+ thumbEndPositionPx: 16,
21
+ },
22
+ small: {
23
+ heightPx: 20,
24
+ widthPx: 32,
25
+ thumbSizePx: 18,
26
+ thumbActiveWidthPx: 26,
27
+ thumbEndPositionPx: 12,
28
+ },
29
+ };
30
+ var getSwitchSizeStyles = function (size, pxToRem) {
31
+ var _a, _b, _c;
32
+ var dimensions = SWITCH_DIMENSIONS_BY_SIZE[size];
33
+ var thumbActiveExtensionPx = dimensions.thumbActiveWidthPx - dimensions.thumbSizePx;
34
+ return _a = {
35
+ width: pxToRem(dimensions.widthPx),
36
+ height: pxToRem(dimensions.heightPx),
37
+ '&:active': (_b = {},
38
+ _b["& .".concat(switchClasses.switchBase, ":not(.").concat(switchClasses.checked, "):not(.").concat(switchClasses.disabled, ") .").concat(switchClasses.thumb, "::before")] = {
39
+ insetInlineEnd: pxToRem(-thumbActiveExtensionPx),
40
+ },
41
+ _b["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.checked, ":not(.").concat(switchClasses.disabled, ") .").concat(switchClasses.thumb, "::before")] = {
42
+ insetInlineStart: pxToRem(-thumbActiveExtensionPx),
43
+ },
44
+ _b)
45
+ },
46
+ _a["&.".concat(quantumSwitchClasses.pressing)] = (_c = {},
47
+ _c["& .".concat(switchClasses.switchBase, ":not(.").concat(switchClasses.checked, "):not(.").concat(switchClasses.disabled, ") .").concat(switchClasses.thumb, "::before")] = {
48
+ insetInlineEnd: pxToRem(-thumbActiveExtensionPx),
49
+ },
50
+ _c["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.checked, ":not(.").concat(switchClasses.disabled, ") .").concat(switchClasses.thumb, "::before")] = {
51
+ insetInlineStart: pxToRem(-thumbActiveExtensionPx),
52
+ },
53
+ _c),
54
+ _a["& .".concat(switchClasses.track)] = {
55
+ borderRadius: pxToRem(dimensions.heightPx * 2),
56
+ },
57
+ _a["& .".concat(switchClasses.switchBase)] = {
58
+ padding: pxToRem((dimensions.heightPx - dimensions.thumbSizePx) / 2),
59
+ },
60
+ _a["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.checked)] = {
61
+ transform: "translateX(".concat(pxToRem(dimensions.thumbEndPositionPx), ")"),
62
+ },
63
+ _a["& .".concat(switchClasses.thumb)] = {
64
+ height: pxToRem(dimensions.thumbSizePx),
65
+ width: pxToRem(dimensions.thumbSizePx),
66
+ borderRadius: pxToRem(dimensions.thumbSizePx),
67
+ },
68
+ _a["& .".concat(switchClasses.thumb, "::before")] = {
69
+ borderRadius: pxToRem(dimensions.thumbSizePx),
70
+ },
71
+ _a;
17
72
  };
18
73
  export var createMuiSwitchOverrides = function (_a) {
19
- var _b, _c, _d, _e, _f, _g, _h;
20
- var typography = _a.typography, tokens = _a.tokens, mixins = _a.mixins;
74
+ var _b, _c, _d, _e, _f, _g, _h, _j;
75
+ var typography = _a.typography, tokens = _a.tokens, transitions = _a.transitions, mixins = _a.mixins;
21
76
  return {
22
77
  defaultProps: {
23
78
  color: 'primary',
24
79
  size: 'medium',
25
80
  },
26
81
  styleOverrides: {
27
- root: {
28
- width: typography.pxToRem(SWITCH_DIMENSIONS.widthPx),
29
- height: typography.pxToRem(SWITCH_DIMENSIONS.heightPx),
30
- padding: 0,
31
- overflow: 'visible',
32
- '&:focus-within,&.Mui-focused': (_b = {},
33
- _b["& .".concat(switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
34
- _b),
35
- },
36
- colorPrimary: (_c = {
82
+ root: __assign(__assign({ padding: 0, overflow: 'visible' }, getSwitchSizeStyles('medium', typography.pxToRem)), (_b = {}, _b["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.disabled)] = {
83
+ cursor: 'not-allowed',
84
+ }, _b["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.disabled, " + .").concat(switchClasses.track)] = {
85
+ cursor: 'not-allowed',
86
+ }, _b['&:focus-within,&.Mui-focused'] = (_c = {},
87
+ _c["& .".concat(switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
88
+ _c), _b)),
89
+ colorPrimary: (_d = {
37
90
  color: tokens.color_bg_layer
38
91
  },
39
- _c["&.".concat(switchClasses.checked)] = (_d = {
92
+ _d["&.".concat(switchClasses.checked)] = (_e = {
40
93
  color: tokens.color_bg_layer
41
94
  },
42
- _d["& + .".concat(switchClasses.track)] = {
95
+ _e["& + .".concat(switchClasses.track)] = {
43
96
  backgroundColor: tokens.color_bg_switch_on,
44
97
  },
45
- _d["&.".concat(switchClasses.disabled)] = (_e = {
98
+ _e["&.".concat(switchClasses.disabled)] = (_f = {
46
99
  color: tokens.color_bg_layer
47
100
  },
48
- _e["& + .".concat(switchClasses.track)] = {
101
+ _f["& + .".concat(switchClasses.track)] = {
49
102
  backgroundColor: tokens.color_bg_switch_on_disabled,
50
103
  },
51
- _e),
52
- _d),
53
- _c["&.".concat(switchClasses.disabled)] = (_f = {
104
+ _f),
105
+ _e),
106
+ _d["&.".concat(switchClasses.disabled)] = (_g = {
54
107
  color: tokens.color_bg_layer
55
108
  },
56
- _f["& + .".concat(switchClasses.track)] = {
109
+ _g["& + .".concat(switchClasses.track)] = {
57
110
  opacity: 1,
58
111
  backgroundColor: tokens.color_bg_disabled,
59
112
  },
60
- _f),
61
- _c),
113
+ _g),
114
+ _d),
62
115
  track: {
63
116
  opacity: 1,
64
- backgroundColor: tokens.color_bg_layer_bold,
65
- borderRadius: typography.pxToRem(SWITCH_DIMENSIONS.heightPx * 2),
117
+ backgroundColor: tokens.color_bg_layer_alternate_bold,
118
+ boxShadow: "".concat(mixins.borderAsBoxShadow(tokens.color_border_default), ", 0 1px 2px rgba(0, 0, 0, 0.08) inset"),
119
+ transition: transitions.create(['background-color', 'box-shadow'], {
120
+ duration: transitions.duration.shorter,
121
+ easing: transitions.easing.easeOut,
122
+ }),
66
123
  },
67
- switchBase: (_g = {
124
+ switchBase: (_h = {
68
125
  borderRadius: '50%',
69
- padding: typography.pxToRem((SWITCH_DIMENSIONS.heightPx - SWITCH_DIMENSIONS.thumbSizePx) / 2),
70
126
  height: 'unset',
71
- width: 'unset'
127
+ width: 'unset',
128
+ transition: transitions.create(['transform'], {
129
+ duration: transitions.duration.shorter,
130
+ easing: 'cubic-bezier(0, 0, 0.2, 1)',
131
+ })
72
132
  },
73
- _g["&.".concat(switchClasses.checked)] = (_h = {
74
- transform: "translateX(".concat(typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx + 4), ")")
75
- },
76
- _h["& + .".concat(switchClasses.track)] = {
133
+ _h["&.".concat(switchClasses.checked)] = (_j = {},
134
+ _j["& + .".concat(switchClasses.track)] = {
77
135
  opacity: 1,
136
+ boxShadow: "".concat(mixins.borderAsBoxShadow(tokens.color_fg_state_success), ", 0 1px 2px rgba(0, 0, 0, 0.08) inset"),
78
137
  },
79
- _h),
80
- _g["&.".concat(switchClasses.disabled, ",&:hover,&:active")] = {
138
+ _j),
139
+ _h["&.".concat(switchClasses.disabled, ",&:hover,&:active")] = {
81
140
  backgroundColor: 'transparent',
82
141
  },
83
- _g),
142
+ _h),
84
143
  thumb: {
85
- height: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
86
- width: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
87
- borderRadius: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
144
+ position: 'relative',
145
+ display: 'block',
146
+ overflow: 'visible',
147
+ backgroundColor: 'transparent',
148
+ boxShadow: 'none',
149
+ '&::before': {
150
+ content: '""',
151
+ position: 'absolute',
152
+ inset: 0,
153
+ backgroundColor: 'currentColor',
154
+ boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04), 0 3px 6px -3px rgba(0, 0, 0, 0.04), 0 4px 8px -4px rgba(0, 0, 0, 0.04)',
155
+ transition: transitions.create(['inset-inline-start', 'inset-inline-end'], {
156
+ duration: transitions.duration.shorter,
157
+ easing: 'cubic-bezier(0, 0, 0.2, 1)',
158
+ }),
159
+ },
88
160
  },
89
161
  },
162
+ variants: [
163
+ {
164
+ props: { size: 'small' },
165
+ style: getSwitchSizeStyles('small', typography.pxToRem),
166
+ },
167
+ ],
90
168
  };
91
169
  };
package/esm/switch/switch.js CHANGED
@@ -20,25 +20,68 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
+ var __read = (this && this.__read) || function (o, n) {
24
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
25
+ if (!m) return o;
26
+ var i = m.call(o), r, ar = [], e;
27
+ try {
28
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
29
+ }
30
+ catch (error) { e = { error: error }; }
31
+ finally {
32
+ try {
33
+ if (r && !r.done && (m = i["return"])) m.call(i);
34
+ }
35
+ finally { if (e) throw e.error; }
36
+ }
37
+ return ar;
38
+ };
23
39
  import * as React from 'react';
24
40
  import { formControlLabelClasses, FormControlLabel as BaseFormControlLabel, } from '../form';
25
41
  import MuiSwitch from '@mui/material/Switch';
26
- import { styled } from '../styled';
42
+ import { rootShouldForwardProp, styled } from '../styled';
27
43
  import clsx from '../utils/clsx';
28
44
  import { switchComponentName, switchClasses, getSwitchUtilityClass } from './switch-classes';
29
45
  import { useMergedClasses } from '../styles/classes';
30
- var SwitchHeight = 24;
46
+ var SWITCH_HEIGHT_BY_SIZE = {
47
+ medium: 24,
48
+ small: 20,
49
+ };
31
50
  var SwitchLineHeight = 18;
51
+ var StatusLabel = styled('span', {
52
+ name: switchComponentName,
53
+ slot: 'StatusLabel',
54
+ })(function () { return ({
55
+ display: 'inline-block',
56
+ '@keyframes fadeInFromLeft': {
57
+ '0%': {
58
+ opacity: 0,
59
+ filter: 'blur(4px)',
60
+ transform: 'translateX(-12px)',
61
+ },
62
+ '100%': {
63
+ opacity: 1,
64
+ filter: 'blur(0)',
65
+ transform: 'translateX(0)',
66
+ },
67
+ },
68
+ animation: "fadeInFromLeft 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards",
69
+ '@media (prefers-reduced-motion: reduce)': {
70
+ animation: 'none',
71
+ },
72
+ }); });
32
73
  var StyledFormControlLabel = styled(BaseFormControlLabel, {
33
74
  name: switchComponentName,
34
75
  slot: 'FormControlLabel',
76
+ shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'switchSize' && prop !== 'switchDisabled'; },
35
77
  })(function (_a) {
36
78
  var _b, _c;
37
- var theme = _a.theme, noWrap = _a.noWrap, labelPlacement = _a.labelPlacement;
38
- return __assign((_b = { paddingLeft: 0, paddingTop: 0, paddingBottom: 0, marginLeft: 0 }, _b["& .".concat(formControlLabelClasses.container)] = {
39
- lineHeight: theme.typography.pxToRem(SwitchHeight),
79
+ var theme = _a.theme, noWrap = _a.noWrap, labelPlacement = _a.labelPlacement, switchSize = _a.switchSize, switchDisabled = _a.switchDisabled;
80
+ return __assign((_b = { paddingLeft: 0, paddingTop: 0, paddingBottom: 0, marginLeft: 0, cursor: switchDisabled ? 'not-allowed' : undefined }, _b["& .".concat(formControlLabelClasses.container)] = {
81
+ lineHeight: theme.typography.pxToRem(SWITCH_HEIGHT_BY_SIZE[switchSize]),
40
82
  minWidth: noWrap ? 0 : undefined, // prevents overflow of parent flex container
41
83
  marginLeft: theme.spacing(2),
84
+ cursor: switchDisabled ? 'not-allowed' : undefined,
42
85
  '& > *:first-of-type': {
43
86
  marginLeft: 0,
44
87
  },
@@ -50,12 +93,63 @@ var StyledFormControlLabel = styled(BaseFormControlLabel, {
50
93
  _c)));
51
94
  });
52
95
  export var Switch = React.forwardRef(function (props, ref) {
53
- var children = props.children, noWrap = props.noWrap, labelPlacement = props.labelPlacement, labels = props.labels, checked = props.checked, disabled = props.disabled, readOnly = props.readOnly, defaultChecked = props.defaultChecked, className = props.className, onValueChange = props.onValueChange, onChange = props.onChange, helperText = props.helperText, _a = props.HelperTextProps, HelperTextProps = _a === void 0 ? {} : _a, decoration = props.decoration, propClasses = props.classes, switchProps = __rest(props, ["children", "noWrap", "labelPlacement", "labels", "checked", "disabled", "readOnly", "defaultChecked", "className", "onValueChange", "onChange", "helperText", "HelperTextProps", "decoration", "classes"]);
96
+ var _a;
97
+ var children = props.children, noWrap = props.noWrap, labelPlacement = props.labelPlacement, labels = props.labels, checked = props.checked, disabled = props.disabled, readOnly = props.readOnly, _b = props.size, size = _b === void 0 ? 'medium' : _b, defaultChecked = props.defaultChecked, className = props.className, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onValueChange = props.onValueChange, onChange = props.onChange, helperText = props.helperText, _c = props.HelperTextProps, HelperTextProps = _c === void 0 ? {} : _c, decoration = props.decoration, propClasses = props.classes, switchProps = __rest(props, ["children", "noWrap", "labelPlacement", "labels", "checked", "disabled", "readOnly", "size", "defaultChecked", "className", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "onValueChange", "onChange", "helperText", "HelperTextProps", "decoration", "classes"]);
54
98
  var classes = useMergedClasses(switchClasses, getSwitchUtilityClass, propClasses);
55
- var valueLabel = labels && labels.length === 2 ? labels[checked || defaultChecked ? 0 : 1] : '';
56
- var label = children || valueLabel;
99
+ var isDisabled = readOnly || disabled;
100
+ var _d = __read(React.useState(false), 2), isPressing = _d[0], setIsPressing = _d[1];
101
+ var handleMouseDown = React.useCallback(function () {
102
+ if (!isDisabled) {
103
+ setIsPressing(true);
104
+ }
105
+ }, [isDisabled]);
106
+ var handleMouseUp = React.useCallback(function () { return setIsPressing(false); }, []);
107
+ var handleSwitchMouseDown = React.useCallback(function (event) {
108
+ onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
109
+ if (!isDisabled) {
110
+ handleMouseDown();
111
+ }
112
+ }, [handleMouseDown, isDisabled, onMouseDown]);
113
+ var handleSwitchMouseUp = React.useCallback(function (event) {
114
+ onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
115
+ handleMouseUp();
116
+ }, [handleMouseUp, onMouseUp]);
117
+ var handleSwitchKeyDown = React.useCallback(function (event) {
118
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
119
+ if (event.key === ' ' && !isDisabled) {
120
+ setIsPressing(true);
121
+ }
122
+ }, [isDisabled, onKeyDown]);
123
+ var handleSwitchKeyUp = React.useCallback(function (event) {
124
+ onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
125
+ if (event.key === ' ') {
126
+ setIsPressing(false);
127
+ }
128
+ }, [onKeyUp]);
129
+ React.useEffect(function () {
130
+ if (isPressing) {
131
+ var release_1 = function () { return setIsPressing(false); };
132
+ window.addEventListener('mouseup', release_1);
133
+ return function () { return window.removeEventListener('mouseup', release_1); };
134
+ }
135
+ return undefined;
136
+ }, [isPressing]);
137
+ React.useEffect(function () {
138
+ if (isDisabled && isPressing) {
139
+ setIsPressing(false);
140
+ }
141
+ }, [isDisabled, isPressing]);
142
+ var _e = __read(React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : false), 2), uncontrolledChecked = _e[0], setUncontrolledChecked = _e[1];
143
+ var isChecked = checked !== null && checked !== void 0 ? checked : uncontrolledChecked;
144
+ var hasStatusLabels = labels && labels.length === 2;
145
+ var valueLabel = hasStatusLabels ? labels[isChecked ? 0 : 1] : '';
146
+ var animatedValueLabel = hasStatusLabels ? React.createElement(StatusLabel, { key: valueLabel }, valueLabel) : '';
147
+ var label = children || animatedValueLabel;
57
148
  var hasLabelOrHelperText = !!helperText || !!label;
58
149
  var handleChange = function (event) {
150
+ if (checked === undefined) {
151
+ setUncontrolledChecked(event.target.checked);
152
+ }
59
153
  if (onChange) {
60
154
  onChange(event, event.target.checked);
61
155
  }
@@ -63,9 +157,9 @@ export var Switch = React.forwardRef(function (props, ref) {
63
157
  onValueChange(event.target.checked);
64
158
  }
65
159
  };
66
- var switchButton = (React.createElement(MuiSwitch, __assign({ checked: checked, disabled: readOnly || disabled, defaultChecked: defaultChecked, className: !hasLabelOrHelperText ? className : classes.switch, onChange: onChange || onValueChange ? handleChange : undefined }, switchProps, { ref: ref })));
160
+ var switchButton = (React.createElement(MuiSwitch, __assign({ checked: checked, disabled: isDisabled, defaultChecked: defaultChecked, size: size, className: clsx(!hasLabelOrHelperText ? className : classes.switch, isPressing && classes.pressing), onMouseDown: handleSwitchMouseDown, onMouseUp: handleSwitchMouseUp, onKeyDown: handleSwitchKeyDown, onKeyUp: handleSwitchKeyUp, onChange: onChange || onValueChange || hasStatusLabels ? handleChange : undefined }, switchProps, { ref: ref })));
67
161
  if (hasLabelOrHelperText) {
68
- return (React.createElement(StyledFormControlLabel, { className: clsx(classes.formControlLabel, className), height: SwitchLineHeight, label: label, labelPlacement: labelPlacement, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: readOnly || disabled, control: switchButton, ref: ref }));
162
+ return (React.createElement(StyledFormControlLabel, { className: clsx(classes.formControlLabel, className, isPressing && classes.pressing), height: SwitchLineHeight, switchSize: size, switchDisabled: isDisabled, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, label: label, labelPlacement: labelPlacement, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: isDisabled, control: switchButton, ref: ref }));
69
163
  }
70
164
  return switchButton;
71
165
  });
package/label/label.d.ts CHANGED
@@ -7,9 +7,9 @@ export interface ILabelComponentProps {
7
7
  /**
8
8
  * Availability of the feature. Displays as a label after the title.
9
9
  */
10
- productReleaseStage?: 'beta' | 'earlyAccess' | 'generalAvailability' | 'deprecated';
10
+ productReleaseStage?: 'developerPreview' | 'beta' | 'earlyAccess' | 'generalAvailability' | 'deprecated';
11
11
  /**
12
- * If true will abbreviate the "Early Access" label to "Early"
12
+ * If true will abbreviate the "Early Access" label to "Early" and the "Developer Preview" label to "Preview"
13
13
  * @default true
14
14
  */
15
15
  productReleaseStageAbbr?: boolean;
package/label/label.js CHANGED
@@ -71,6 +71,12 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
71
71
  labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
72
72
  labelProps.color = 'primary';
73
73
  break;
74
+ case 'developerPreview':
75
+ labelProps.color = 'primary';
76
+ productReleaseStageAbbr
77
+ ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Preview')
78
+ : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Developer Preview');
79
+ break;
74
80
  case 'beta':
75
81
  labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
76
82
  labelProps.color = 'primary';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.11.0",
3
+ "version": "2.12.0",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
package/page/page-header/page-header.d.ts CHANGED
@@ -22,6 +22,6 @@ export interface IPageHeaderProps extends Omit<IRowLayoutProps, 'title'>, Pick<I
22
22
  fullWidth?: boolean;
23
23
  compact?: boolean;
24
24
  startActions?: React.ReactNode;
25
- productReleaseStage?: 'beta' | 'generalAvailability' | 'earlyAccess' | 'deprecated';
25
+ productReleaseStage?: 'developerPreview' | 'beta' | 'generalAvailability' | 'earlyAccess' | 'deprecated';
26
26
  }
27
27
  export declare const PageHeader: React.ForwardRefExoticComponent<IPageHeaderProps & React.RefAttributes<HTMLDivElement>>;
package/switch/switch-classes.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const switchComponentName: "QuantumSwitch";
2
2
  export declare function getSwitchUtilityClass(slot: string): string;
3
- export declare const switchClasses: Record<"switch" | "formControlLabel", string>;
3
+ export declare const switchClasses: Record<"switch" | "formControlLabel" | "pressing", string>;
4
4
  export type SwitchClasses = typeof switchClasses;
5
5
  export type SwitchClassKey = keyof SwitchClasses;
package/switch/switch-classes.js CHANGED
@@ -7,4 +7,4 @@ exports.switchComponentName = 'QuantumSwitch';
7
7
  function getSwitchUtilityClass(slot) {
8
8
  return (0, classes_1.generateUtilityClass)(exports.switchComponentName, slot);
9
9
  }
10
- exports.switchClasses = (0, classes_1.generateUtilityClasses)(exports.switchComponentName, ['switch', 'formControlLabel']);
10
+ exports.switchClasses = (0, classes_1.generateUtilityClasses)(exports.switchComponentName, ['switch', 'formControlLabel', 'pressing']);
package/switch/switch-overrides.js CHANGED
@@ -13,83 +13,161 @@ var __assign = (this && this.__assign) || function () {
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
14
  exports.createMuiSwitchOverrides = void 0;
15
15
  var Switch_1 = require("@mui/material/Switch");
16
- var SWITCH_DIMENSIONS = {
17
- heightPx: 24,
18
- widthPx: 44,
19
- thumbSizePx: 16,
16
+ var switch_classes_1 = require("./switch-classes");
17
+ var SWITCH_DIMENSIONS_BY_SIZE = {
18
+ medium: {
19
+ heightPx: 24,
20
+ widthPx: 40,
21
+ thumbSizePx: 22,
22
+ thumbActiveWidthPx: 28,
23
+ thumbEndPositionPx: 16,
24
+ },
25
+ small: {
26
+ heightPx: 20,
27
+ widthPx: 32,
28
+ thumbSizePx: 18,
29
+ thumbActiveWidthPx: 26,
30
+ thumbEndPositionPx: 12,
31
+ },
32
+ };
33
+ var getSwitchSizeStyles = function (size, pxToRem) {
34
+ var _a, _b, _c;
35
+ var dimensions = SWITCH_DIMENSIONS_BY_SIZE[size];
36
+ var thumbActiveExtensionPx = dimensions.thumbActiveWidthPx - dimensions.thumbSizePx;
37
+ return _a = {
38
+ width: pxToRem(dimensions.widthPx),
39
+ height: pxToRem(dimensions.heightPx),
40
+ '&:active': (_b = {},
41
+ _b["& .".concat(Switch_1.switchClasses.switchBase, ":not(.").concat(Switch_1.switchClasses.checked, "):not(.").concat(Switch_1.switchClasses.disabled, ") .").concat(Switch_1.switchClasses.thumb, "::before")] = {
42
+ insetInlineEnd: pxToRem(-thumbActiveExtensionPx),
43
+ },
44
+ _b["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.checked, ":not(.").concat(Switch_1.switchClasses.disabled, ") .").concat(Switch_1.switchClasses.thumb, "::before")] = {
45
+ insetInlineStart: pxToRem(-thumbActiveExtensionPx),
46
+ },
47
+ _b)
48
+ },
49
+ _a["&.".concat(switch_classes_1.switchClasses.pressing)] = (_c = {},
50
+ _c["& .".concat(Switch_1.switchClasses.switchBase, ":not(.").concat(Switch_1.switchClasses.checked, "):not(.").concat(Switch_1.switchClasses.disabled, ") .").concat(Switch_1.switchClasses.thumb, "::before")] = {
51
+ insetInlineEnd: pxToRem(-thumbActiveExtensionPx),
52
+ },
53
+ _c["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.checked, ":not(.").concat(Switch_1.switchClasses.disabled, ") .").concat(Switch_1.switchClasses.thumb, "::before")] = {
54
+ insetInlineStart: pxToRem(-thumbActiveExtensionPx),
55
+ },
56
+ _c),
57
+ _a["& .".concat(Switch_1.switchClasses.track)] = {
58
+ borderRadius: pxToRem(dimensions.heightPx * 2),
59
+ },
60
+ _a["& .".concat(Switch_1.switchClasses.switchBase)] = {
61
+ padding: pxToRem((dimensions.heightPx - dimensions.thumbSizePx) / 2),
62
+ },
63
+ _a["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.checked)] = {
64
+ transform: "translateX(".concat(pxToRem(dimensions.thumbEndPositionPx), ")"),
65
+ },
66
+ _a["& .".concat(Switch_1.switchClasses.thumb)] = {
67
+ height: pxToRem(dimensions.thumbSizePx),
68
+ width: pxToRem(dimensions.thumbSizePx),
69
+ borderRadius: pxToRem(dimensions.thumbSizePx),
70
+ },
71
+ _a["& .".concat(Switch_1.switchClasses.thumb, "::before")] = {
72
+ borderRadius: pxToRem(dimensions.thumbSizePx),
73
+ },
74
+ _a;
20
75
  };
21
76
  var createMuiSwitchOverrides = function (_a) {
22
- var _b, _c, _d, _e, _f, _g, _h;
23
- var typography = _a.typography, tokens = _a.tokens, mixins = _a.mixins;
77
+ var _b, _c, _d, _e, _f, _g, _h, _j;
78
+ var typography = _a.typography, tokens = _a.tokens, transitions = _a.transitions, mixins = _a.mixins;
24
79
  return {
25
80
  defaultProps: {
26
81
  color: 'primary',
27
82
  size: 'medium',
28
83
  },
29
84
  styleOverrides: {
30
- root: {
31
- width: typography.pxToRem(SWITCH_DIMENSIONS.widthPx),
32
- height: typography.pxToRem(SWITCH_DIMENSIONS.heightPx),
33
- padding: 0,
34
- overflow: 'visible',
35
- '&:focus-within,&.Mui-focused': (_b = {},
36
- _b["& .".concat(Switch_1.switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
37
- _b),
38
- },
39
- colorPrimary: (_c = {
85
+ root: __assign(__assign({ padding: 0, overflow: 'visible' }, getSwitchSizeStyles('medium', typography.pxToRem)), (_b = {}, _b["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.disabled)] = {
86
+ cursor: 'not-allowed',
87
+ }, _b["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.disabled, " + .").concat(Switch_1.switchClasses.track)] = {
88
+ cursor: 'not-allowed',
89
+ }, _b['&:focus-within,&.Mui-focused'] = (_c = {},
90
+ _c["& .".concat(Switch_1.switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
91
+ _c), _b)),
92
+ colorPrimary: (_d = {
40
93
  color: tokens.color_bg_layer
41
94
  },
42
- _c["&.".concat(Switch_1.switchClasses.checked)] = (_d = {
95
+ _d["&.".concat(Switch_1.switchClasses.checked)] = (_e = {
43
96
  color: tokens.color_bg_layer
44
97
  },
45
- _d["& + .".concat(Switch_1.switchClasses.track)] = {
98
+ _e["& + .".concat(Switch_1.switchClasses.track)] = {
46
99
  backgroundColor: tokens.color_bg_switch_on,
47
100
  },
48
- _d["&.".concat(Switch_1.switchClasses.disabled)] = (_e = {
101
+ _e["&.".concat(Switch_1.switchClasses.disabled)] = (_f = {
49
102
  color: tokens.color_bg_layer
50
103
  },
51
- _e["& + .".concat(Switch_1.switchClasses.track)] = {
104
+ _f["& + .".concat(Switch_1.switchClasses.track)] = {
52
105
  backgroundColor: tokens.color_bg_switch_on_disabled,
53
106
  },
54
- _e),
55
- _d),
56
- _c["&.".concat(Switch_1.switchClasses.disabled)] = (_f = {
107
+ _f),
108
+ _e),
109
+ _d["&.".concat(Switch_1.switchClasses.disabled)] = (_g = {
57
110
  color: tokens.color_bg_layer
58
111
  },
59
- _f["& + .".concat(Switch_1.switchClasses.track)] = {
112
+ _g["& + .".concat(Switch_1.switchClasses.track)] = {
60
113
  opacity: 1,
61
114
  backgroundColor: tokens.color_bg_disabled,
62
115
  },
63
- _f),
64
- _c),
116
+ _g),
117
+ _d),
65
118
  track: {
66
119
  opacity: 1,
67
- backgroundColor: tokens.color_bg_layer_bold,
68
- borderRadius: typography.pxToRem(SWITCH_DIMENSIONS.heightPx * 2),
120
+ backgroundColor: tokens.color_bg_layer_alternate_bold,
121
+ boxShadow: "".concat(mixins.borderAsBoxShadow(tokens.color_border_default), ", 0 1px 2px rgba(0, 0, 0, 0.08) inset"),
122
+ transition: transitions.create(['background-color', 'box-shadow'], {
123
+ duration: transitions.duration.shorter,
124
+ easing: transitions.easing.easeOut,
125
+ }),
69
126
  },
70
- switchBase: (_g = {
127
+ switchBase: (_h = {
71
128
  borderRadius: '50%',
72
- padding: typography.pxToRem((SWITCH_DIMENSIONS.heightPx - SWITCH_DIMENSIONS.thumbSizePx) / 2),
73
129
  height: 'unset',
74
- width: 'unset'
130
+ width: 'unset',
131
+ transition: transitions.create(['transform'], {
132
+ duration: transitions.duration.shorter,
133
+ easing: 'cubic-bezier(0, 0, 0.2, 1)',
134
+ })
75
135
  },
76
- _g["&.".concat(Switch_1.switchClasses.checked)] = (_h = {
77
- transform: "translateX(".concat(typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx + 4), ")")
78
- },
79
- _h["& + .".concat(Switch_1.switchClasses.track)] = {
136
+ _h["&.".concat(Switch_1.switchClasses.checked)] = (_j = {},
137
+ _j["& + .".concat(Switch_1.switchClasses.track)] = {
80
138
  opacity: 1,
139
+ boxShadow: "".concat(mixins.borderAsBoxShadow(tokens.color_fg_state_success), ", 0 1px 2px rgba(0, 0, 0, 0.08) inset"),
81
140
  },
82
- _h),
83
- _g["&.".concat(Switch_1.switchClasses.disabled, ",&:hover,&:active")] = {
141
+ _j),
142
+ _h["&.".concat(Switch_1.switchClasses.disabled, ",&:hover,&:active")] = {
84
143
  backgroundColor: 'transparent',
85
144
  },
86
- _g),
145
+ _h),
87
146
  thumb: {
88
- height: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
89
- width: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
90
- borderRadius: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
147
+ position: 'relative',
148
+ display: 'block',
149
+ overflow: 'visible',
150
+ backgroundColor: 'transparent',
151
+ boxShadow: 'none',
152
+ '&::before': {
153
+ content: '""',
154
+ position: 'absolute',
155
+ inset: 0,
156
+ backgroundColor: 'currentColor',
157
+ boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04), 0 3px 6px -3px rgba(0, 0, 0, 0.04), 0 4px 8px -4px rgba(0, 0, 0, 0.04)',
158
+ transition: transitions.create(['inset-inline-start', 'inset-inline-end'], {
159
+ duration: transitions.duration.shorter,
160
+ easing: 'cubic-bezier(0, 0, 0.2, 1)',
161
+ }),
162
+ },
91
163
  },
92
164
  },
165
+ variants: [
166
+ {
167
+ props: { size: 'small' },
168
+ style: getSwitchSizeStyles('small', typography.pxToRem),
169
+ },
170
+ ],
93
171
  };
94
172
  };
95
173
  exports.createMuiSwitchOverrides = createMuiSwitchOverrides;
package/switch/switch.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { IFormControlLabelProps, IFormHelperTextProps } from '../form';
3
3
  import { SwitchProps } from '@mui/material/Switch';
4
4
  import { SwitchClasses } from './switch-classes';
5
- export interface ISwitchProps extends Omit<SwitchProps, 'size' | 'color' | 'classes'>, Pick<IFormControlLabelProps, 'labelPlacement'> {
5
+ export interface ISwitchProps extends Omit<SwitchProps, 'color' | 'classes'>, Pick<IFormControlLabelProps, 'labelPlacement'> {
6
6
  children?: React.ReactNode;
7
7
  /** [checked, unchecked] */
8
8
  labels?: [string, string];
package/switch/switch.js CHANGED
@@ -54,6 +54,22 @@ var __rest = (this && this.__rest) || function (s, e) {
54
54
  }
55
55
  return t;
56
56
  };
57
+ var __read = (this && this.__read) || function (o, n) {
58
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
59
+ if (!m) return o;
60
+ var i = m.call(o), r, ar = [], e;
61
+ try {
62
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
63
+ }
64
+ catch (error) { e = { error: error }; }
65
+ finally {
66
+ try {
67
+ if (r && !r.done && (m = i["return"])) m.call(i);
68
+ }
69
+ finally { if (e) throw e.error; }
70
+ }
71
+ return ar;
72
+ };
57
73
  var __importDefault = (this && this.__importDefault) || function (mod) {
58
74
  return (mod && mod.__esModule) ? mod : { "default": mod };
59
75
  };
@@ -66,18 +82,45 @@ var styled_1 = require("../styled");
66
82
  var clsx_1 = __importDefault(require("../utils/clsx"));
67
83
  var switch_classes_1 = require("./switch-classes");
68
84
  var classes_1 = require("../styles/classes");
69
- var SwitchHeight = 24;
85
+ var SWITCH_HEIGHT_BY_SIZE = {
86
+ medium: 24,
87
+ small: 20,
88
+ };
70
89
  var SwitchLineHeight = 18;
90
+ var StatusLabel = (0, styled_1.styled)('span', {
91
+ name: switch_classes_1.switchComponentName,
92
+ slot: 'StatusLabel',
93
+ })(function () { return ({
94
+ display: 'inline-block',
95
+ '@keyframes fadeInFromLeft': {
96
+ '0%': {
97
+ opacity: 0,
98
+ filter: 'blur(4px)',
99
+ transform: 'translateX(-12px)',
100
+ },
101
+ '100%': {
102
+ opacity: 1,
103
+ filter: 'blur(0)',
104
+ transform: 'translateX(0)',
105
+ },
106
+ },
107
+ animation: "fadeInFromLeft 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards",
108
+ '@media (prefers-reduced-motion: reduce)': {
109
+ animation: 'none',
110
+ },
111
+ }); });
71
112
  var StyledFormControlLabel = (0, styled_1.styled)(form_1.FormControlLabel, {
72
113
  name: switch_classes_1.switchComponentName,
73
114
  slot: 'FormControlLabel',
115
+ shouldForwardProp: function (prop) { return (0, styled_1.rootShouldForwardProp)(prop) && prop !== 'switchSize' && prop !== 'switchDisabled'; },
74
116
  })(function (_a) {
75
117
  var _b, _c;
76
- var theme = _a.theme, noWrap = _a.noWrap, labelPlacement = _a.labelPlacement;
77
- return __assign((_b = { paddingLeft: 0, paddingTop: 0, paddingBottom: 0, marginLeft: 0 }, _b["& .".concat(form_1.formControlLabelClasses.container)] = {
78
- lineHeight: theme.typography.pxToRem(SwitchHeight),
118
+ var theme = _a.theme, noWrap = _a.noWrap, labelPlacement = _a.labelPlacement, switchSize = _a.switchSize, switchDisabled = _a.switchDisabled;
119
+ return __assign((_b = { paddingLeft: 0, paddingTop: 0, paddingBottom: 0, marginLeft: 0, cursor: switchDisabled ? 'not-allowed' : undefined }, _b["& .".concat(form_1.formControlLabelClasses.container)] = {
120
+ lineHeight: theme.typography.pxToRem(SWITCH_HEIGHT_BY_SIZE[switchSize]),
79
121
  minWidth: noWrap ? 0 : undefined, // prevents overflow of parent flex container
80
122
  marginLeft: theme.spacing(2),
123
+ cursor: switchDisabled ? 'not-allowed' : undefined,
81
124
  '& > *:first-of-type': {
82
125
  marginLeft: 0,
83
126
  },
@@ -89,12 +132,63 @@ var StyledFormControlLabel = (0, styled_1.styled)(form_1.FormControlLabel, {
89
132
  _c)));
90
133
  });
91
134
  exports.Switch = React.forwardRef(function (props, ref) {
92
- var children = props.children, noWrap = props.noWrap, labelPlacement = props.labelPlacement, labels = props.labels, checked = props.checked, disabled = props.disabled, readOnly = props.readOnly, defaultChecked = props.defaultChecked, className = props.className, onValueChange = props.onValueChange, onChange = props.onChange, helperText = props.helperText, _a = props.HelperTextProps, HelperTextProps = _a === void 0 ? {} : _a, decoration = props.decoration, propClasses = props.classes, switchProps = __rest(props, ["children", "noWrap", "labelPlacement", "labels", "checked", "disabled", "readOnly", "defaultChecked", "className", "onValueChange", "onChange", "helperText", "HelperTextProps", "decoration", "classes"]);
135
+ var _a;
136
+ var children = props.children, noWrap = props.noWrap, labelPlacement = props.labelPlacement, labels = props.labels, checked = props.checked, disabled = props.disabled, readOnly = props.readOnly, _b = props.size, size = _b === void 0 ? 'medium' : _b, defaultChecked = props.defaultChecked, className = props.className, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onValueChange = props.onValueChange, onChange = props.onChange, helperText = props.helperText, _c = props.HelperTextProps, HelperTextProps = _c === void 0 ? {} : _c, decoration = props.decoration, propClasses = props.classes, switchProps = __rest(props, ["children", "noWrap", "labelPlacement", "labels", "checked", "disabled", "readOnly", "size", "defaultChecked", "className", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "onValueChange", "onChange", "helperText", "HelperTextProps", "decoration", "classes"]);
93
137
  var classes = (0, classes_1.useMergedClasses)(switch_classes_1.switchClasses, switch_classes_1.getSwitchUtilityClass, propClasses);
94
- var valueLabel = labels && labels.length === 2 ? labels[checked || defaultChecked ? 0 : 1] : '';
95
- var label = children || valueLabel;
138
+ var isDisabled = readOnly || disabled;
139
+ var _d = __read(React.useState(false), 2), isPressing = _d[0], setIsPressing = _d[1];
140
+ var handleMouseDown = React.useCallback(function () {
141
+ if (!isDisabled) {
142
+ setIsPressing(true);
143
+ }
144
+ }, [isDisabled]);
145
+ var handleMouseUp = React.useCallback(function () { return setIsPressing(false); }, []);
146
+ var handleSwitchMouseDown = React.useCallback(function (event) {
147
+ onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
148
+ if (!isDisabled) {
149
+ handleMouseDown();
150
+ }
151
+ }, [handleMouseDown, isDisabled, onMouseDown]);
152
+ var handleSwitchMouseUp = React.useCallback(function (event) {
153
+ onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
154
+ handleMouseUp();
155
+ }, [handleMouseUp, onMouseUp]);
156
+ var handleSwitchKeyDown = React.useCallback(function (event) {
157
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
158
+ if (event.key === ' ' && !isDisabled) {
159
+ setIsPressing(true);
160
+ }
161
+ }, [isDisabled, onKeyDown]);
162
+ var handleSwitchKeyUp = React.useCallback(function (event) {
163
+ onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
164
+ if (event.key === ' ') {
165
+ setIsPressing(false);
166
+ }
167
+ }, [onKeyUp]);
168
+ React.useEffect(function () {
169
+ if (isPressing) {
170
+ var release_1 = function () { return setIsPressing(false); };
171
+ window.addEventListener('mouseup', release_1);
172
+ return function () { return window.removeEventListener('mouseup', release_1); };
173
+ }
174
+ return undefined;
175
+ }, [isPressing]);
176
+ React.useEffect(function () {
177
+ if (isDisabled && isPressing) {
178
+ setIsPressing(false);
179
+ }
180
+ }, [isDisabled, isPressing]);
181
+ var _e = __read(React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : false), 2), uncontrolledChecked = _e[0], setUncontrolledChecked = _e[1];
182
+ var isChecked = checked !== null && checked !== void 0 ? checked : uncontrolledChecked;
183
+ var hasStatusLabels = labels && labels.length === 2;
184
+ var valueLabel = hasStatusLabels ? labels[isChecked ? 0 : 1] : '';
185
+ var animatedValueLabel = hasStatusLabels ? React.createElement(StatusLabel, { key: valueLabel }, valueLabel) : '';
186
+ var label = children || animatedValueLabel;
96
187
  var hasLabelOrHelperText = !!helperText || !!label;
97
188
  var handleChange = function (event) {
189
+ if (checked === undefined) {
190
+ setUncontrolledChecked(event.target.checked);
191
+ }
98
192
  if (onChange) {
99
193
  onChange(event, event.target.checked);
100
194
  }
@@ -102,9 +196,9 @@ exports.Switch = React.forwardRef(function (props, ref) {
102
196
  onValueChange(event.target.checked);
103
197
  }
104
198
  };
105
- var switchButton = (React.createElement(Switch_1.default, __assign({ checked: checked, disabled: readOnly || disabled, defaultChecked: defaultChecked, className: !hasLabelOrHelperText ? className : classes.switch, onChange: onChange || onValueChange ? handleChange : undefined }, switchProps, { ref: ref })));
199
+ var switchButton = (React.createElement(Switch_1.default, __assign({ checked: checked, disabled: isDisabled, defaultChecked: defaultChecked, size: size, className: (0, clsx_1.default)(!hasLabelOrHelperText ? className : classes.switch, isPressing && classes.pressing), onMouseDown: handleSwitchMouseDown, onMouseUp: handleSwitchMouseUp, onKeyDown: handleSwitchKeyDown, onKeyUp: handleSwitchKeyUp, onChange: onChange || onValueChange || hasStatusLabels ? handleChange : undefined }, switchProps, { ref: ref })));
106
200
  if (hasLabelOrHelperText) {
107
- return (React.createElement(StyledFormControlLabel, { className: (0, clsx_1.default)(classes.formControlLabel, className), height: SwitchLineHeight, label: label, labelPlacement: labelPlacement, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: readOnly || disabled, control: switchButton, ref: ref }));
201
+ return (React.createElement(StyledFormControlLabel, { className: (0, clsx_1.default)(classes.formControlLabel, className, isPressing && classes.pressing), height: SwitchLineHeight, switchSize: size, switchDisabled: isDisabled, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, label: label, labelPlacement: labelPlacement, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: isDisabled, control: switchButton, ref: ref }));
108
202
  }
109
203
  return switchButton;
110
204
  });
package/tabs/tab/tab.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { OverridableComponent, OverrideProps } from '../../overridable-component';
3
3
  import { TabTypeMap } from '@mui/material/Tab';
4
4
  type ITabTypeMap<ExtraPropsType = {}, DefaultElementType extends React.ElementType = TabTypeMap['defaultComponent']> = TabTypeMap<ExtraPropsType & {
5
- productReleaseStage?: 'beta' | 'earlyAccess' | 'generalAvailability';
5
+ productReleaseStage?: 'developerPreview' | 'beta' | 'earlyAccess' | 'generalAvailability';
6
6
  analyticsId?: string;
7
7
  }, DefaultElementType>;
8
8
  export type ITabProps<D extends React.ElementType = ITabTypeMap['defaultComponent'], P = {}> = OverrideProps<ITabTypeMap<P, D>, D>;