@instructure/ui-range-input 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (13) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/RangeInput/v1/index.js +66 -63
  3. package/es/RangeInput/v1/styles.js +4 -2
  4. package/es/RangeInput/v1/theme.js +31 -30
  5. package/es/RangeInput/v2/index.js +66 -63
  6. package/es/RangeInput/v2/styles.js +4 -2
  7. package/lib/RangeInput/v1/index.js +66 -63
  8. package/lib/RangeInput/v1/styles.js +4 -2
  9. package/lib/RangeInput/v1/theme.js +31 -30
  10. package/lib/RangeInput/v2/index.js +66 -63
  11. package/lib/RangeInput/v2/styles.js +4 -2
  12. package/package.json +16 -16
  13. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-range-input
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/RangeInput/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class, _RangeInput;
1
+ var _dec, _dec2, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -39,38 +39,42 @@ category: components
39
39
  ---
40
40
  **/
41
41
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
- let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_RangeInput = class RangeInput extends Component {
42
+ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class RangeInput extends Component {
43
+ static displayName = "RangeInput";
44
+ static componentId = 'RangeInput';
45
+ static outputLocatorAttribute = 'data-range-output';
46
+ static allowedProps = allowedProps;
47
+ static defaultProps = {
48
+ step: 1,
49
+ formatValue: val => val,
50
+ // If min and max has default value, they don't give a warning if not set, even if they are required props.
51
+ // TODO: figure out if they don't need to be required or remove defaults in V9.
52
+ max: 0,
53
+ min: 0,
54
+ inline: false,
55
+ size: 'medium',
56
+ layout: 'stacked',
57
+ displayValue: true,
58
+ disabled: false,
59
+ readOnly: false,
60
+ thumbVariant: 'deprecated'
61
+ };
62
+ ref = null;
63
+ _input = null;
64
+ _inputListener = null;
65
+ _changeListener = null;
66
+ defaultId;
67
+ handleRef = el => {
68
+ this.ref = el;
69
+ };
70
+ handleInputRef = el => {
71
+ this._input = el;
72
+ if (typeof this.props.inputRef === 'function') {
73
+ this.props.inputRef(el);
74
+ }
75
+ };
43
76
  constructor(props) {
44
77
  super(props);
45
- this.ref = null;
46
- this._input = null;
47
- this._inputListener = null;
48
- this._changeListener = null;
49
- this.defaultId = void 0;
50
- this.handleRef = el => {
51
- this.ref = el;
52
- };
53
- this.handleInputRef = el => {
54
- this._input = el;
55
- if (typeof this.props.inputRef === 'function') {
56
- this.props.inputRef(el);
57
- }
58
- };
59
- this.handleChange = event => {
60
- const _this$props = this.props,
61
- onChange = _this$props.onChange,
62
- value = _this$props.value;
63
- if (typeof value === 'undefined') {
64
- this.setState({
65
- value: event.target.value
66
- });
67
- }
68
- if (typeof onChange === 'function') {
69
- onChange(event.target.value);
70
- }
71
- };
72
- // controlled input must have an onChange, but we're handling it with native events
73
- this.noopChange = () => {};
74
78
  if (typeof props.value === 'undefined') {
75
79
  this.state = {
76
80
  value: props.defaultValue
@@ -81,8 +85,7 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
81
85
 
82
86
  /* workaround for https://github.com/facebook/react/issues/554 */
83
87
  componentDidMount() {
84
- var _this$props$makeStyle, _this$props2;
85
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
88
+ this.props.makeStyles?.();
86
89
  if (this._input !== null) {
87
90
  // https://connect.microsoft.com/IE/Feedback/Details/856998
88
91
  this._inputListener = addEventListener(this._input, 'input', this.handleChange);
@@ -90,19 +93,34 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
90
93
  }
91
94
  }
92
95
  componentWillUnmount() {
93
- var _this$_inputListener, _this$_changeListener;
94
96
  if (!this._input) {
95
97
  return;
96
98
  }
97
- (_this$_inputListener = this._inputListener) === null || _this$_inputListener === void 0 ? void 0 : _this$_inputListener.remove();
98
- (_this$_changeListener = this._changeListener) === null || _this$_changeListener === void 0 ? void 0 : _this$_changeListener.remove();
99
+ this._inputListener?.remove();
100
+ this._changeListener?.remove();
99
101
  }
100
102
  /* end workaround */
101
103
 
102
104
  componentDidUpdate() {
103
- var _this$props$makeStyle2, _this$props3;
104
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
105
+ this.props.makeStyles?.();
105
106
  }
107
+ handleChange = event => {
108
+ const {
109
+ onChange,
110
+ value
111
+ } = this.props;
112
+ if (typeof value === 'undefined') {
113
+ this.setState({
114
+ value: event.target.value
115
+ });
116
+ }
117
+ if (typeof onChange === 'function') {
118
+ onChange(event.target.value);
119
+ }
120
+ };
121
+
122
+ // controlled input must have an onChange, but we're handling it with native events
123
+ noopChange = () => {};
106
124
  get value() {
107
125
  const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
108
126
  return typeof value === 'string' ? parseInt(value) : value;
@@ -112,7 +130,6 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
112
130
  }
113
131
  renderValue() {
114
132
  if (this.props.displayValue) {
115
- var _this$props$styles;
116
133
  if (!this.value) {
117
134
  warn(false, 'RangeInput should have a `value` or `defaultValue` set for the value to be displayed. If no value has to be displayed, set `displayValue={false}`.');
118
135
  return null;
@@ -125,7 +142,7 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
125
142
  placement: "end center",
126
143
  children: _jsx("div", {
127
144
  ...props,
128
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue,
145
+ css: this.props.styles?.rangeInputInputValue,
129
146
  children: this.props.formatValue(this.value, this.props.max)
130
147
  })
131
148
  });
@@ -133,11 +150,11 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
133
150
  return null;
134
151
  }
135
152
  render() {
136
- var _this$props$styles2, _this$props$styles3;
137
- const _this$props4 = this.props,
138
- formatValue = _this$props4.formatValue,
139
- disabled = _this$props4.disabled,
140
- readOnly = _this$props4.readOnly;
153
+ const {
154
+ formatValue,
155
+ disabled,
156
+ readOnly
157
+ } = this.props;
141
158
  const props = omitProps(this.props, RangeInput.allowedProps);
142
159
  return _jsx(FormField, {
143
160
  ...pickProps(this.props, FormField.allowedProps),
@@ -146,9 +163,9 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
146
163
  elementRef: this.handleRef,
147
164
  "data-cid": "RangeInput",
148
165
  children: _jsxs("div", {
149
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput,
166
+ css: this.props.styles?.rangeInput,
150
167
  children: [_jsx("input", {
151
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
168
+ css: this.props.styles?.rangeInputInput,
152
169
  ref: this.handleInputRef,
153
170
  type: "range",
154
171
  id: this.id,
@@ -160,25 +177,11 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
160
177
  "aria-valuetext": formatValue(this.value, this.props.max),
161
178
  ...props,
162
179
  disabled: disabled || readOnly,
163
- "aria-disabled": disabled || readOnly ? 'true' : void 0
180
+ "aria-disabled": disabled || readOnly ? 'true' : undefined
164
181
  }), this.renderValue()]
165
182
  })
166
183
  });
167
184
  }
168
- }, _RangeInput.displayName = "RangeInput", _RangeInput.componentId = 'RangeInput', _RangeInput.outputLocatorAttribute = 'data-range-output', _RangeInput.allowedProps = allowedProps, _RangeInput.defaultProps = {
169
- step: 1,
170
- formatValue: val => val,
171
- // If min and max has default value, they don't give a warning if not set, even if they are required props.
172
- // TODO: figure out if they don't need to be required or remove defaults in V9.
173
- max: 0,
174
- min: 0,
175
- inline: false,
176
- size: 'medium',
177
- layout: 'stacked',
178
- displayValue: true,
179
- disabled: false,
180
- readOnly: false,
181
- thumbVariant: 'deprecated'
182
- }, _RangeInput)) || _class) || _class);
185
+ }) || _class) || _class);
183
186
  export default RangeInput;
184
187
  export { RangeInput };
package/es/RangeInput/v1/styles.js CHANGED
@@ -33,8 +33,10 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const size = props.size,
37
- thumbVariant = props.thumbVariant;
36
+ const {
37
+ size,
38
+ thumbVariant
39
+ } = props;
38
40
  const valueSizeVariants = {
39
41
  small: {
40
42
  fontSize: componentTheme.valueSmallFontSize,
package/es/RangeInput/v1/theme.js CHANGED
@@ -29,13 +29,14 @@ import { alpha, darken } from '@instructure/ui-color-utils';
29
29
  * @return {Object} The final theme object with the overrides and component variables
30
30
  */
31
31
  const generateComponentTheme = theme => {
32
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9;
33
- const colors = theme.colors,
34
- borders = theme.borders,
35
- typography = theme.typography,
36
- spacing = theme.spacing,
37
- forms = theme.forms,
38
- themeName = theme.key;
32
+ const {
33
+ colors,
34
+ borders,
35
+ typography,
36
+ spacing,
37
+ forms,
38
+ key: themeName
39
+ } = theme;
39
40
  const themeSpecificStyle = {
40
41
  canvas: {
41
42
  handleBackground: theme['ic-brand-primary'],
@@ -49,32 +50,32 @@ const generateComponentTheme = theme => {
49
50
  const componentVariables = {
50
51
  minWidth: '12.5rem',
51
52
  handleSize: '1.5rem',
52
- handleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
53
- handleBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
54
- handleBorderSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
53
+ handleBackground: colors?.contrasts?.blue4570,
54
+ handleBorderColor: colors?.contrasts?.white1010,
55
+ handleBorderSize: borders?.widthMedium,
55
56
  handleShadow: '0 0.0625rem 0.125rem rgba(0, 0, 0, .2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)',
56
- handleFocusInset: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
57
- handleFocusRingSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
58
- handleFocusRingColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
59
- handleFocusBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
60
- handleHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
57
+ handleFocusInset: borders?.widthSmall,
58
+ handleFocusRingSize: borders?.widthMedium,
59
+ handleFocusRingColor: colors?.contrasts?.white1010,
60
+ handleFocusBackground: colors?.contrasts?.blue4570,
61
+ handleHoverBackground: colors?.contrasts?.blue4570,
61
62
  // Deprecated, remove with "deprecated" thumbVariant
62
- handleShadowColor: darken(colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue5782, 10),
63
- handleFocusOutlineColor: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570, 40),
63
+ handleShadowColor: darken(colors?.contrasts?.blue5782, 10),
64
+ handleFocusOutlineColor: alpha(colors?.contrasts?.blue4570, 40),
64
65
  handleFocusOutlineWidth: '0.75em',
65
- trackBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570,
66
- valueColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010,
67
- valueFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
68
- valueFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
69
- valueSmallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
70
- valueSmallPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
71
- valueSmallLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
72
- valueMediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
73
- valueMediumPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
74
- valueMediumLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
75
- valueLargeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
76
- valueLargePadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
77
- valueLargeLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
66
+ trackBackground: colors?.contrasts?.grey4570,
67
+ valueColor: colors?.contrasts?.white1010,
68
+ valueFontFamily: typography?.fontFamily,
69
+ valueFontWeight: typography?.fontWeightNormal,
70
+ valueSmallFontSize: typography?.fontSizeSmall,
71
+ valueSmallPadding: `0 ${spacing?.xSmall}`,
72
+ valueSmallLineHeight: forms?.inputHeightSmall,
73
+ valueMediumFontSize: typography?.fontSizeMedium,
74
+ valueMediumPadding: `0 ${spacing?.small}`,
75
+ valueMediumLineHeight: forms?.inputHeightMedium,
76
+ valueLargeFontSize: typography?.fontSizeLarge,
77
+ valueLargePadding: `0 ${spacing?.medium}`,
78
+ valueLargeLineHeight: forms?.inputHeightLarge
78
79
  };
79
80
  return {
80
81
  ...componentVariables,
package/es/RangeInput/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class, _RangeInput;
1
+ var _dec, _dec2, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -38,38 +38,42 @@ category: components
38
38
  ---
39
39
  **/
40
40
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
41
- let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_RangeInput = class RangeInput extends Component {
41
+ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = class RangeInput extends Component {
42
+ static displayName = "RangeInput";
43
+ static componentId = 'RangeInput';
44
+ static outputLocatorAttribute = 'data-range-output';
45
+ static allowedProps = allowedProps;
46
+ static defaultProps = {
47
+ step: 1,
48
+ formatValue: val => val,
49
+ // If min and max has default value, they don't give a warning if not set, even if they are required props.
50
+ // TODO: figure out if they don't need to be required or remove defaults in V9.
51
+ max: 0,
52
+ min: 0,
53
+ inline: false,
54
+ size: 'medium',
55
+ layout: 'stacked',
56
+ displayValue: true,
57
+ disabled: false,
58
+ readOnly: false,
59
+ thumbVariant: 'deprecated'
60
+ };
61
+ ref = null;
62
+ _input = null;
63
+ _inputListener = null;
64
+ _changeListener = null;
65
+ defaultId;
66
+ handleRef = el => {
67
+ this.ref = el;
68
+ };
69
+ handleInputRef = el => {
70
+ this._input = el;
71
+ if (typeof this.props.inputRef === 'function') {
72
+ this.props.inputRef(el);
73
+ }
74
+ };
42
75
  constructor(props) {
43
76
  super(props);
44
- this.ref = null;
45
- this._input = null;
46
- this._inputListener = null;
47
- this._changeListener = null;
48
- this.defaultId = void 0;
49
- this.handleRef = el => {
50
- this.ref = el;
51
- };
52
- this.handleInputRef = el => {
53
- this._input = el;
54
- if (typeof this.props.inputRef === 'function') {
55
- this.props.inputRef(el);
56
- }
57
- };
58
- this.handleChange = event => {
59
- const _this$props = this.props,
60
- onChange = _this$props.onChange,
61
- value = _this$props.value;
62
- if (typeof value === 'undefined') {
63
- this.setState({
64
- value: event.target.value
65
- });
66
- }
67
- if (typeof onChange === 'function') {
68
- onChange(event.target.value);
69
- }
70
- };
71
- // controlled input must have an onChange, but we're handling it with native events
72
- this.noopChange = () => {};
73
77
  if (typeof props.value === 'undefined') {
74
78
  this.state = {
75
79
  value: props.defaultValue
@@ -80,8 +84,7 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle)
80
84
 
81
85
  /* workaround for https://github.com/facebook/react/issues/554 */
82
86
  componentDidMount() {
83
- var _this$props$makeStyle, _this$props2;
84
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
87
+ this.props.makeStyles?.();
85
88
  if (this._input !== null) {
86
89
  // https://connect.microsoft.com/IE/Feedback/Details/856998
87
90
  this._inputListener = addEventListener(this._input, 'input', this.handleChange);
@@ -89,19 +92,34 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle)
89
92
  }
90
93
  }
91
94
  componentWillUnmount() {
92
- var _this$_inputListener, _this$_changeListener;
93
95
  if (!this._input) {
94
96
  return;
95
97
  }
96
- (_this$_inputListener = this._inputListener) === null || _this$_inputListener === void 0 ? void 0 : _this$_inputListener.remove();
97
- (_this$_changeListener = this._changeListener) === null || _this$_changeListener === void 0 ? void 0 : _this$_changeListener.remove();
98
+ this._inputListener?.remove();
99
+ this._changeListener?.remove();
98
100
  }
99
101
  /* end workaround */
100
102
 
101
103
  componentDidUpdate() {
102
- var _this$props$makeStyle2, _this$props3;
103
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
104
+ this.props.makeStyles?.();
104
105
  }
106
+ handleChange = event => {
107
+ const {
108
+ onChange,
109
+ value
110
+ } = this.props;
111
+ if (typeof value === 'undefined') {
112
+ this.setState({
113
+ value: event.target.value
114
+ });
115
+ }
116
+ if (typeof onChange === 'function') {
117
+ onChange(event.target.value);
118
+ }
119
+ };
120
+
121
+ // controlled input must have an onChange, but we're handling it with native events
122
+ noopChange = () => {};
105
123
  get value() {
106
124
  const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
107
125
  return typeof value === 'string' ? parseInt(value) : value;
@@ -111,7 +129,6 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle)
111
129
  }
112
130
  renderValue() {
113
131
  if (this.props.displayValue) {
114
- var _this$props$styles;
115
132
  if (!this.value) {
116
133
  warn(false, 'RangeInput should have a `value` or `defaultValue` set for the value to be displayed. If no value has to be displayed, set `displayValue={false}`.');
117
134
  return null;
@@ -124,7 +141,7 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle)
124
141
  placement: "end center",
125
142
  children: _jsx("div", {
126
143
  ...props,
127
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue,
144
+ css: this.props.styles?.rangeInputInputValue,
128
145
  children: this.props.formatValue(this.value, this.props.max)
129
146
  })
130
147
  });
@@ -132,11 +149,11 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle)
132
149
  return null;
133
150
  }
134
151
  render() {
135
- var _this$props$styles2, _this$props$styles3;
136
- const _this$props4 = this.props,
137
- formatValue = _this$props4.formatValue,
138
- disabled = _this$props4.disabled,
139
- readOnly = _this$props4.readOnly;
152
+ const {
153
+ formatValue,
154
+ disabled,
155
+ readOnly
156
+ } = this.props;
140
157
  const props = omitProps(this.props, RangeInput.allowedProps);
141
158
  return _jsx(FormField, {
142
159
  ...pickProps(this.props, FormField.allowedProps),
@@ -145,9 +162,9 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle)
145
162
  elementRef: this.handleRef,
146
163
  "data-cid": "RangeInput",
147
164
  children: _jsxs("div", {
148
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput,
165
+ css: this.props.styles?.rangeInput,
149
166
  children: [_jsx("input", {
150
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
167
+ css: this.props.styles?.rangeInputInput,
151
168
  ref: this.handleInputRef,
152
169
  type: "range",
153
170
  id: this.id,
@@ -159,25 +176,11 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle)
159
176
  "aria-valuetext": formatValue(this.value, this.props.max),
160
177
  ...props,
161
178
  disabled: disabled || readOnly,
162
- "aria-disabled": disabled || readOnly ? 'true' : void 0
179
+ "aria-disabled": disabled || readOnly ? 'true' : undefined
163
180
  }), this.renderValue()]
164
181
  })
165
182
  });
166
183
  }
167
- }, _RangeInput.displayName = "RangeInput", _RangeInput.componentId = 'RangeInput', _RangeInput.outputLocatorAttribute = 'data-range-output', _RangeInput.allowedProps = allowedProps, _RangeInput.defaultProps = {
168
- step: 1,
169
- formatValue: val => val,
170
- // If min and max has default value, they don't give a warning if not set, even if they are required props.
171
- // TODO: figure out if they don't need to be required or remove defaults in V9.
172
- max: 0,
173
- min: 0,
174
- inline: false,
175
- size: 'medium',
176
- layout: 'stacked',
177
- displayValue: true,
178
- disabled: false,
179
- readOnly: false,
180
- thumbVariant: 'deprecated'
181
- }, _RangeInput)) || _class) || _class);
184
+ }) || _class) || _class);
182
185
  export default RangeInput;
183
186
  export { RangeInput };
package/es/RangeInput/v2/styles.js CHANGED
@@ -36,8 +36,10 @@ import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
36
36
  * @return {Object} The final style object, which will be used in the component
37
37
  */
38
38
  const generateStyle = (componentTheme, props, sharedTokens) => {
39
- const size = props.size,
40
- thumbVariant = props.thumbVariant;
39
+ const {
40
+ size,
41
+ thumbVariant
42
+ } = props;
41
43
  const valueSizeVariants = {
42
44
  small: {
43
45
  fontSize: componentTheme.valueSmallFontSize,