@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/lib/RangeInput/v1/index.js CHANGED
@@ -18,7 +18,7 @@ var _styles = _interopRequireDefault(require("./styles"));
18
18
  var _theme = _interopRequireDefault(require("./theme"));
19
19
  var _props = require("./props");
20
20
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
21
- var _dec, _dec2, _class, _RangeInput;
21
+ var _dec, _dec2, _class;
22
22
  /*
23
23
  * The MIT License (MIT)
24
24
  *
@@ -47,38 +47,42 @@ var _dec, _dec2, _class, _RangeInput;
47
47
  category: components
48
48
  ---
49
49
  **/
50
- let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_RangeInput = class RangeInput extends _react.Component {
50
+ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class RangeInput extends _react.Component {
51
+ static displayName = "RangeInput";
52
+ static componentId = 'RangeInput';
53
+ static outputLocatorAttribute = 'data-range-output';
54
+ static allowedProps = _props.allowedProps;
55
+ static defaultProps = {
56
+ step: 1,
57
+ formatValue: val => val,
58
+ // If min and max has default value, they don't give a warning if not set, even if they are required props.
59
+ // TODO: figure out if they don't need to be required or remove defaults in V9.
60
+ max: 0,
61
+ min: 0,
62
+ inline: false,
63
+ size: 'medium',
64
+ layout: 'stacked',
65
+ displayValue: true,
66
+ disabled: false,
67
+ readOnly: false,
68
+ thumbVariant: 'deprecated'
69
+ };
70
+ ref = null;
71
+ _input = null;
72
+ _inputListener = null;
73
+ _changeListener = null;
74
+ defaultId;
75
+ handleRef = el => {
76
+ this.ref = el;
77
+ };
78
+ handleInputRef = el => {
79
+ this._input = el;
80
+ if (typeof this.props.inputRef === 'function') {
81
+ this.props.inputRef(el);
82
+ }
83
+ };
51
84
  constructor(props) {
52
85
  super(props);
53
- this.ref = null;
54
- this._input = null;
55
- this._inputListener = null;
56
- this._changeListener = null;
57
- this.defaultId = void 0;
58
- this.handleRef = el => {
59
- this.ref = el;
60
- };
61
- this.handleInputRef = el => {
62
- this._input = el;
63
- if (typeof this.props.inputRef === 'function') {
64
- this.props.inputRef(el);
65
- }
66
- };
67
- this.handleChange = event => {
68
- const _this$props = this.props,
69
- onChange = _this$props.onChange,
70
- value = _this$props.value;
71
- if (typeof value === 'undefined') {
72
- this.setState({
73
- value: event.target.value
74
- });
75
- }
76
- if (typeof onChange === 'function') {
77
- onChange(event.target.value);
78
- }
79
- };
80
- // controlled input must have an onChange, but we're handling it with native events
81
- this.noopChange = () => {};
82
86
  if (typeof props.value === 'undefined') {
83
87
  this.state = {
84
88
  value: props.defaultValue
@@ -89,8 +93,7 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
89
93
 
90
94
  /* workaround for https://github.com/facebook/react/issues/554 */
91
95
  componentDidMount() {
92
- var _this$props$makeStyle, _this$props2;
93
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
96
+ this.props.makeStyles?.();
94
97
  if (this._input !== null) {
95
98
  // https://connect.microsoft.com/IE/Feedback/Details/856998
96
99
  this._inputListener = (0, _addEventListener.addEventListener)(this._input, 'input', this.handleChange);
@@ -98,19 +101,34 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
98
101
  }
99
102
  }
100
103
  componentWillUnmount() {
101
- var _this$_inputListener, _this$_changeListener;
102
104
  if (!this._input) {
103
105
  return;
104
106
  }
105
- (_this$_inputListener = this._inputListener) === null || _this$_inputListener === void 0 ? void 0 : _this$_inputListener.remove();
106
- (_this$_changeListener = this._changeListener) === null || _this$_changeListener === void 0 ? void 0 : _this$_changeListener.remove();
107
+ this._inputListener?.remove();
108
+ this._changeListener?.remove();
107
109
  }
108
110
  /* end workaround */
109
111
 
110
112
  componentDidUpdate() {
111
- var _this$props$makeStyle2, _this$props3;
112
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
113
+ this.props.makeStyles?.();
113
114
  }
115
+ handleChange = event => {
116
+ const {
117
+ onChange,
118
+ value
119
+ } = this.props;
120
+ if (typeof value === 'undefined') {
121
+ this.setState({
122
+ value: event.target.value
123
+ });
124
+ }
125
+ if (typeof onChange === 'function') {
126
+ onChange(event.target.value);
127
+ }
128
+ };
129
+
130
+ // controlled input must have an onChange, but we're handling it with native events
131
+ noopChange = () => {};
114
132
  get value() {
115
133
  const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
116
134
  return typeof value === 'string' ? parseInt(value) : value;
@@ -120,7 +138,6 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
120
138
  }
121
139
  renderValue() {
122
140
  if (this.props.displayValue) {
123
- var _this$props$styles;
124
141
  if (!this.value) {
125
142
  (0, _console.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}`.');
126
143
  return null;
@@ -133,7 +150,7 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
133
150
  placement: "end center",
134
151
  children: (0, _jsxRuntime.jsx)("div", {
135
152
  ...props,
136
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue,
153
+ css: this.props.styles?.rangeInputInputValue,
137
154
  children: this.props.formatValue(this.value, this.props.max)
138
155
  })
139
156
  });
@@ -141,11 +158,11 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
141
158
  return null;
142
159
  }
143
160
  render() {
144
- var _this$props$styles2, _this$props$styles3;
145
- const _this$props4 = this.props,
146
- formatValue = _this$props4.formatValue,
147
- disabled = _this$props4.disabled,
148
- readOnly = _this$props4.readOnly;
161
+ const {
162
+ formatValue,
163
+ disabled,
164
+ readOnly
165
+ } = this.props;
149
166
  const props = (0, _omitProps.omitProps)(this.props, RangeInput.allowedProps);
150
167
  return (0, _jsxRuntime.jsx)(_v11_2.FormField, {
151
168
  ...(0, _pickProps.pickProps)(this.props, _v11_2.FormField.allowedProps),
@@ -154,9 +171,9 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
154
171
  elementRef: this.handleRef,
155
172
  "data-cid": "RangeInput",
156
173
  children: (0, _jsxRuntime.jsxs)("div", {
157
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput,
174
+ css: this.props.styles?.rangeInput,
158
175
  children: [(0, _jsxRuntime.jsx)("input", {
159
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
176
+ css: this.props.styles?.rangeInputInput,
160
177
  ref: this.handleInputRef,
161
178
  type: "range",
162
179
  id: this.id,
@@ -168,24 +185,10 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
168
185
  "aria-valuetext": formatValue(this.value, this.props.max),
169
186
  ...props,
170
187
  disabled: disabled || readOnly,
171
- "aria-disabled": disabled || readOnly ? 'true' : void 0
188
+ "aria-disabled": disabled || readOnly ? 'true' : undefined
172
189
  }), this.renderValue()]
173
190
  })
174
191
  });
175
192
  }
176
- }, _RangeInput.displayName = "RangeInput", _RangeInput.componentId = 'RangeInput', _RangeInput.outputLocatorAttribute = 'data-range-output', _RangeInput.allowedProps = _props.allowedProps, _RangeInput.defaultProps = {
177
- step: 1,
178
- formatValue: val => val,
179
- // If min and max has default value, they don't give a warning if not set, even if they are required props.
180
- // TODO: figure out if they don't need to be required or remove defaults in V9.
181
- max: 0,
182
- min: 0,
183
- inline: false,
184
- size: 'medium',
185
- layout: 'stacked',
186
- displayValue: true,
187
- disabled: false,
188
- readOnly: false,
189
- thumbVariant: 'deprecated'
190
- }, _RangeInput)) || _class) || _class);
193
+ }) || _class) || _class);
191
194
  var _default = exports.default = RangeInput;
package/lib/RangeInput/v1/styles.js CHANGED
@@ -39,8 +39,10 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props) => {
42
- const size = props.size,
43
- thumbVariant = props.thumbVariant;
42
+ const {
43
+ size,
44
+ thumbVariant
45
+ } = props;
44
46
  const valueSizeVariants = {
45
47
  small: {
46
48
  fontSize: componentTheme.valueSmallFontSize,
package/lib/RangeInput/v1/theme.js CHANGED
@@ -36,13 +36,14 @@ var _darken = require("@instructure/ui-color-utils/lib/darken.js");
36
36
  * @return {Object} The final theme object with the overrides and component variables
37
37
  */
38
38
  const generateComponentTheme = theme => {
39
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9;
40
- const colors = theme.colors,
41
- borders = theme.borders,
42
- typography = theme.typography,
43
- spacing = theme.spacing,
44
- forms = theme.forms,
45
- themeName = theme.key;
39
+ const {
40
+ colors,
41
+ borders,
42
+ typography,
43
+ spacing,
44
+ forms,
45
+ key: themeName
46
+ } = theme;
46
47
  const themeSpecificStyle = {
47
48
  canvas: {
48
49
  handleBackground: theme['ic-brand-primary'],
@@ -56,32 +57,32 @@ const generateComponentTheme = theme => {
56
57
  const componentVariables = {
57
58
  minWidth: '12.5rem',
58
59
  handleSize: '1.5rem',
59
- handleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
60
- handleBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
61
- handleBorderSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
60
+ handleBackground: colors?.contrasts?.blue4570,
61
+ handleBorderColor: colors?.contrasts?.white1010,
62
+ handleBorderSize: borders?.widthMedium,
62
63
  handleShadow: '0 0.0625rem 0.125rem rgba(0, 0, 0, .2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)',
63
- handleFocusInset: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
64
- handleFocusRingSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
65
- handleFocusRingColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
66
- handleFocusBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
67
- handleHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
64
+ handleFocusInset: borders?.widthSmall,
65
+ handleFocusRingSize: borders?.widthMedium,
66
+ handleFocusRingColor: colors?.contrasts?.white1010,
67
+ handleFocusBackground: colors?.contrasts?.blue4570,
68
+ handleHoverBackground: colors?.contrasts?.blue4570,
68
69
  // Deprecated, remove with "deprecated" thumbVariant
69
- handleShadowColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue5782, 10),
70
- handleFocusOutlineColor: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570, 40),
70
+ handleShadowColor: (0, _darken.darken)(colors?.contrasts?.blue5782, 10),
71
+ handleFocusOutlineColor: (0, _alpha.alpha)(colors?.contrasts?.blue4570, 40),
71
72
  handleFocusOutlineWidth: '0.75em',
72
- trackBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570,
73
- valueColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010,
74
- valueFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
75
- valueFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
76
- valueSmallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
77
- valueSmallPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
78
- valueSmallLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
79
- valueMediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
80
- valueMediumPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
81
- valueMediumLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
82
- valueLargeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
83
- valueLargePadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
84
- valueLargeLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
73
+ trackBackground: colors?.contrasts?.grey4570,
74
+ valueColor: colors?.contrasts?.white1010,
75
+ valueFontFamily: typography?.fontFamily,
76
+ valueFontWeight: typography?.fontWeightNormal,
77
+ valueSmallFontSize: typography?.fontSizeSmall,
78
+ valueSmallPadding: `0 ${spacing?.xSmall}`,
79
+ valueSmallLineHeight: forms?.inputHeightSmall,
80
+ valueMediumFontSize: typography?.fontSizeMedium,
81
+ valueMediumPadding: `0 ${spacing?.small}`,
82
+ valueMediumLineHeight: forms?.inputHeightMedium,
83
+ valueLargeFontSize: typography?.fontSizeLarge,
84
+ valueLargePadding: `0 ${spacing?.medium}`,
85
+ valueLargeLineHeight: forms?.inputHeightLarge
85
86
  };
86
87
  return {
87
88
  ...componentVariables,
package/lib/RangeInput/v2/index.js CHANGED
@@ -17,7 +17,7 @@ var _withDeterministicId = require("@instructure/ui-react-utils/lib/Deterministi
17
17
  var _styles = _interopRequireDefault(require("./styles"));
18
18
  var _props = require("./props");
19
19
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
20
- var _dec, _dec2, _class, _RangeInput;
20
+ var _dec, _dec2, _class;
21
21
  /*
22
22
  * The MIT License (MIT)
23
23
  *
@@ -46,38 +46,42 @@ var _dec, _dec2, _class, _RangeInput;
46
46
  category: components
47
47
  ---
48
48
  **/
49
- let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_RangeInput = class RangeInput extends _react.Component {
49
+ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = class RangeInput extends _react.Component {
50
+ static displayName = "RangeInput";
51
+ static componentId = 'RangeInput';
52
+ static outputLocatorAttribute = 'data-range-output';
53
+ static allowedProps = _props.allowedProps;
54
+ static defaultProps = {
55
+ step: 1,
56
+ formatValue: val => val,
57
+ // If min and max has default value, they don't give a warning if not set, even if they are required props.
58
+ // TODO: figure out if they don't need to be required or remove defaults in V9.
59
+ max: 0,
60
+ min: 0,
61
+ inline: false,
62
+ size: 'medium',
63
+ layout: 'stacked',
64
+ displayValue: true,
65
+ disabled: false,
66
+ readOnly: false,
67
+ thumbVariant: 'deprecated'
68
+ };
69
+ ref = null;
70
+ _input = null;
71
+ _inputListener = null;
72
+ _changeListener = null;
73
+ defaultId;
74
+ handleRef = el => {
75
+ this.ref = el;
76
+ };
77
+ handleInputRef = el => {
78
+ this._input = el;
79
+ if (typeof this.props.inputRef === 'function') {
80
+ this.props.inputRef(el);
81
+ }
82
+ };
50
83
  constructor(props) {
51
84
  super(props);
52
- this.ref = null;
53
- this._input = null;
54
- this._inputListener = null;
55
- this._changeListener = null;
56
- this.defaultId = void 0;
57
- this.handleRef = el => {
58
- this.ref = el;
59
- };
60
- this.handleInputRef = el => {
61
- this._input = el;
62
- if (typeof this.props.inputRef === 'function') {
63
- this.props.inputRef(el);
64
- }
65
- };
66
- this.handleChange = event => {
67
- const _this$props = this.props,
68
- onChange = _this$props.onChange,
69
- value = _this$props.value;
70
- if (typeof value === 'undefined') {
71
- this.setState({
72
- value: event.target.value
73
- });
74
- }
75
- if (typeof onChange === 'function') {
76
- onChange(event.target.value);
77
- }
78
- };
79
- // controlled input must have an onChange, but we're handling it with native events
80
- this.noopChange = () => {};
81
85
  if (typeof props.value === 'undefined') {
82
86
  this.state = {
83
87
  value: props.defaultValue
@@ -88,8 +92,7 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
88
92
 
89
93
  /* workaround for https://github.com/facebook/react/issues/554 */
90
94
  componentDidMount() {
91
- var _this$props$makeStyle, _this$props2;
92
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
95
+ this.props.makeStyles?.();
93
96
  if (this._input !== null) {
94
97
  // https://connect.microsoft.com/IE/Feedback/Details/856998
95
98
  this._inputListener = (0, _addEventListener.addEventListener)(this._input, 'input', this.handleChange);
@@ -97,19 +100,34 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
97
100
  }
98
101
  }
99
102
  componentWillUnmount() {
100
- var _this$_inputListener, _this$_changeListener;
101
103
  if (!this._input) {
102
104
  return;
103
105
  }
104
- (_this$_inputListener = this._inputListener) === null || _this$_inputListener === void 0 ? void 0 : _this$_inputListener.remove();
105
- (_this$_changeListener = this._changeListener) === null || _this$_changeListener === void 0 ? void 0 : _this$_changeListener.remove();
106
+ this._inputListener?.remove();
107
+ this._changeListener?.remove();
106
108
  }
107
109
  /* end workaround */
108
110
 
109
111
  componentDidUpdate() {
110
- var _this$props$makeStyle2, _this$props3;
111
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
112
+ this.props.makeStyles?.();
112
113
  }
114
+ handleChange = event => {
115
+ const {
116
+ onChange,
117
+ value
118
+ } = this.props;
119
+ if (typeof value === 'undefined') {
120
+ this.setState({
121
+ value: event.target.value
122
+ });
123
+ }
124
+ if (typeof onChange === 'function') {
125
+ onChange(event.target.value);
126
+ }
127
+ };
128
+
129
+ // controlled input must have an onChange, but we're handling it with native events
130
+ noopChange = () => {};
113
131
  get value() {
114
132
  const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
115
133
  return typeof value === 'string' ? parseInt(value) : value;
@@ -119,7 +137,6 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
119
137
  }
120
138
  renderValue() {
121
139
  if (this.props.displayValue) {
122
- var _this$props$styles;
123
140
  if (!this.value) {
124
141
  (0, _console.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}`.');
125
142
  return null;
@@ -132,7 +149,7 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
132
149
  placement: "end center",
133
150
  children: (0, _jsxRuntime.jsx)("div", {
134
151
  ...props,
135
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue,
152
+ css: this.props.styles?.rangeInputInputValue,
136
153
  children: this.props.formatValue(this.value, this.props.max)
137
154
  })
138
155
  });
@@ -140,11 +157,11 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
140
157
  return null;
141
158
  }
142
159
  render() {
143
- var _this$props$styles2, _this$props$styles3;
144
- const _this$props4 = this.props,
145
- formatValue = _this$props4.formatValue,
146
- disabled = _this$props4.disabled,
147
- readOnly = _this$props4.readOnly;
160
+ const {
161
+ formatValue,
162
+ disabled,
163
+ readOnly
164
+ } = this.props;
148
165
  const props = (0, _omitProps.omitProps)(this.props, RangeInput.allowedProps);
149
166
  return (0, _jsxRuntime.jsx)(_latest2.FormField, {
150
167
  ...(0, _pickProps.pickProps)(this.props, _latest2.FormField.allowedProps),
@@ -153,9 +170,9 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
153
170
  elementRef: this.handleRef,
154
171
  "data-cid": "RangeInput",
155
172
  children: (0, _jsxRuntime.jsxs)("div", {
156
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput,
173
+ css: this.props.styles?.rangeInput,
157
174
  children: [(0, _jsxRuntime.jsx)("input", {
158
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
175
+ css: this.props.styles?.rangeInputInput,
159
176
  ref: this.handleInputRef,
160
177
  type: "range",
161
178
  id: this.id,
@@ -167,24 +184,10 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
167
184
  "aria-valuetext": formatValue(this.value, this.props.max),
168
185
  ...props,
169
186
  disabled: disabled || readOnly,
170
- "aria-disabled": disabled || readOnly ? 'true' : void 0
187
+ "aria-disabled": disabled || readOnly ? 'true' : undefined
171
188
  }), this.renderValue()]
172
189
  })
173
190
  });
174
191
  }
175
- }, _RangeInput.displayName = "RangeInput", _RangeInput.componentId = 'RangeInput', _RangeInput.outputLocatorAttribute = 'data-range-output', _RangeInput.allowedProps = _props.allowedProps, _RangeInput.defaultProps = {
176
- step: 1,
177
- formatValue: val => val,
178
- // If min and max has default value, they don't give a warning if not set, even if they are required props.
179
- // TODO: figure out if they don't need to be required or remove defaults in V9.
180
- max: 0,
181
- min: 0,
182
- inline: false,
183
- size: 'medium',
184
- layout: 'stacked',
185
- displayValue: true,
186
- disabled: false,
187
- readOnly: false,
188
- thumbVariant: 'deprecated'
189
- }, _RangeInput)) || _class) || _class);
192
+ }) || _class) || _class);
190
193
  var _default = exports.default = RangeInput;
package/lib/RangeInput/v2/styles.js CHANGED
@@ -42,8 +42,10 @@ var _uiThemes = require("@instructure/ui-themes");
42
42
  * @return {Object} The final style object, which will be used in the component
43
43
  */
44
44
  const generateStyle = (componentTheme, props, sharedTokens) => {
45
- const size = props.size,
46
- thumbVariant = props.thumbVariant;
45
+ const {
46
+ size,
47
+ thumbVariant
48
+ } = props;
47
49
  const valueSizeVariants = {
48
50
  small: {
49
51
  fontSize: componentTheme.valueSmallFontSize,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-range-input",
3
- "version": "11.7.3-snapshot-7",
3
+ "version": "11.7.3-snapshot-26",
4
4
  "description": "A styled HTML range input",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -14,26 +14,26 @@
14
14
  "bugs": "https://github.com/instructure/instructure-ui/issues",
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
- "@babel/runtime": "^7.27.6",
18
- "@instructure/emotion": "11.7.3-snapshot-7",
19
- "@instructure/shared-types": "11.7.3-snapshot-7",
20
- "@instructure/ui-color-utils": "11.7.3-snapshot-7",
21
- "@instructure/ui-dom-utils": "11.7.3-snapshot-7",
22
- "@instructure/console": "11.7.3-snapshot-7",
23
- "@instructure/ui-i18n": "11.7.3-snapshot-7",
24
- "@instructure/ui-form-field": "11.7.3-snapshot-7",
25
- "@instructure/ui-react-utils": "11.7.3-snapshot-7",
26
- "@instructure/ui-utils": "11.7.3-snapshot-7",
27
- "@instructure/ui-view": "11.7.3-snapshot-7",
28
- "@instructure/uid": "11.7.3-snapshot-7",
29
- "@instructure/ui-themes": "11.7.3-snapshot-7"
17
+ "@babel/runtime": "^7.29.2",
18
+ "@instructure/console": "11.7.3-snapshot-26",
19
+ "@instructure/emotion": "11.7.3-snapshot-26",
20
+ "@instructure/shared-types": "11.7.3-snapshot-26",
21
+ "@instructure/ui-color-utils": "11.7.3-snapshot-26",
22
+ "@instructure/ui-dom-utils": "11.7.3-snapshot-26",
23
+ "@instructure/ui-i18n": "11.7.3-snapshot-26",
24
+ "@instructure/ui-react-utils": "11.7.3-snapshot-26",
25
+ "@instructure/ui-form-field": "11.7.3-snapshot-26",
26
+ "@instructure/ui-themes": "11.7.3-snapshot-26",
27
+ "@instructure/ui-utils": "11.7.3-snapshot-26",
28
+ "@instructure/uid": "11.7.3-snapshot-26",
29
+ "@instructure/ui-view": "11.7.3-snapshot-26"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@testing-library/jest-dom": "^6.6.3",
33
33
  "@testing-library/react": "15.0.7",
34
34
  "vitest": "^3.2.2",
35
- "@instructure/ui-axe-check": "11.7.3-snapshot-7",
36
- "@instructure/ui-babel-preset": "11.7.3-snapshot-7"
35
+ "@instructure/ui-axe-check": "11.7.3-snapshot-26",
36
+ "@instructure/ui-babel-preset": "11.7.3-snapshot-26"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "react": ">=18 <=19"