@instructure/ui-range-input 8.17.1-snapshot.81 → 8.18.1-snapshot.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 (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/es/RangeInput/index.js +21 -11
  3. package/es/RangeInput/theme.js +18 -18
  4. package/lib/RangeInput/index.js +21 -11
  5. package/lib/RangeInput/theme.js +18 -18
  6. package/package.json +19 -19
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
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
+ # [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-range-input
9
+
6
10
  # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
7
11
 
8
12
  ### Bug Fixes
package/es/RangeInput/index.js CHANGED
@@ -86,7 +86,9 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
86
86
 
87
87
 
88
88
  componentDidMount() {
89
- this.props.makeStyles?.();
89
+ var _this$props$makeStyle, _this$props2;
90
+
91
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
90
92
 
91
93
  if (this._input !== null) {
92
94
  // https://connect.microsoft.com/IE/Feedback/Details/856998
@@ -96,18 +98,22 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
96
98
  }
97
99
 
98
100
  componentWillUnmount() {
101
+ var _this$_inputListener, _this$_changeListener;
102
+
99
103
  if (!this._input) {
100
104
  return;
101
105
  }
102
106
 
103
- this._inputListener?.remove();
104
- this._changeListener?.remove();
107
+ (_this$_inputListener = this._inputListener) === null || _this$_inputListener === void 0 ? void 0 : _this$_inputListener.remove();
108
+ (_this$_changeListener = this._changeListener) === null || _this$_changeListener === void 0 ? void 0 : _this$_changeListener.remove();
105
109
  }
106
110
  /* end workaround */
107
111
 
108
112
 
109
113
  componentDidUpdate() {
110
- this.props.makeStyles?.();
114
+ var _this$props$makeStyle2, _this$props3;
115
+
116
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
111
117
  }
112
118
 
113
119
  get value() {
@@ -127,6 +133,8 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
127
133
 
128
134
  renderValue() {
129
135
  if (this.props.displayValue) {
136
+ var _this$props$styles;
137
+
130
138
  if (!this.value) {
131
139
  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}`.');
132
140
  return null;
@@ -137,7 +145,7 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
137
145
  placement: "end center"
138
146
  }, jsx("output", {
139
147
  htmlFor: this.id,
140
- css: this.props.styles?.rangeInputInputValue
148
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue
141
149
  }, this.props.formatValue(this.value, this.props.max)));
142
150
  }
143
151
 
@@ -145,10 +153,12 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
145
153
  }
146
154
 
147
155
  render() {
148
- const _this$props2 = this.props,
149
- formatValue = _this$props2.formatValue,
150
- disabled = _this$props2.disabled,
151
- readOnly = _this$props2.readOnly;
156
+ var _this$props$styles2, _this$props$styles3;
157
+
158
+ const _this$props4 = this.props,
159
+ formatValue = _this$props4.formatValue,
160
+ disabled = _this$props4.disabled,
161
+ readOnly = _this$props4.readOnly;
152
162
  const props = omitProps(this.props, RangeInput.allowedProps);
153
163
  /* eslint-disable jsx-a11y/no-redundant-roles */
154
164
 
@@ -157,9 +167,9 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
157
167
  id: this.id,
158
168
  elementRef: this.handleRef
159
169
  }), jsx("div", {
160
- css: this.props.styles?.rangeInput
170
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput
161
171
  }, jsx("input", Object.assign({
162
- css: this.props.styles?.rangeInputInput,
172
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
163
173
  ref: c => {
164
174
  this._input = c;
165
175
  },
package/es/RangeInput/theme.js CHANGED
@@ -46,25 +46,25 @@ const generateComponentTheme = theme => {
46
46
  const componentVariables = {
47
47
  minWidth: '12.5rem',
48
48
  handleSize: '1.5rem',
49
- handleBackground: colors?.backgroundBrand,
50
- handleShadowColor: darken(colors?.borderBrand, 15),
51
- handleHoverBackground: colors?.backgroundBrand,
52
- handleFocusBackground: colors?.backgroundBrand,
53
- handleFocusOutlineColor: alpha(colors?.borderBrand, 40),
49
+ handleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
50
+ handleShadowColor: darken(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 15),
51
+ handleHoverBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
52
+ handleFocusBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
53
+ handleFocusOutlineColor: alpha(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 40),
54
54
  handleFocusOutlineWidth: '0.75em',
55
- trackBackground: colors?.backgroundDark,
56
- valueColor: colors?.textLightest,
57
- valueFontFamily: typography?.fontFamily,
58
- valueFontWeight: typography?.fontWeightNormal,
59
- valueSmallFontSize: typography?.fontSizeSmall,
60
- valueSmallPadding: `0 ${spacing?.xSmall}`,
61
- valueSmallLineHeight: forms?.inputHeightSmall,
62
- valueMediumFontSize: typography?.fontSizeMedium,
63
- valueMediumPadding: `0 ${spacing?.small}`,
64
- valueMediumLineHeight: forms?.inputHeightMedium,
65
- valueLargeFontSize: typography?.fontSizeLarge,
66
- valueLargePadding: `0 ${spacing?.medium}`,
67
- valueLargeLineHeight: forms?.inputHeightLarge
55
+ trackBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
56
+ valueColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
57
+ valueFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
58
+ valueFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
59
+ valueSmallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
60
+ valueSmallPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
61
+ valueSmallLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
62
+ valueMediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
63
+ valueMediumPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
64
+ valueMediumLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
65
+ valueLargeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
66
+ valueLargePadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
67
+ valueLargeLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
68
68
  };
69
69
  return { ...componentVariables,
70
70
  ...themeSpecificStyle[themeName]
package/lib/RangeInput/index.js CHANGED
@@ -86,7 +86,9 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
86
86
 
87
87
 
88
88
  componentDidMount() {
89
- this.props.makeStyles?.();
89
+ var _this$props$makeStyle, _this$props2;
90
+
91
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
90
92
 
91
93
  if (this._input !== null) {
92
94
  // https://connect.microsoft.com/IE/Feedback/Details/856998
@@ -96,18 +98,22 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
96
98
  }
97
99
 
98
100
  componentWillUnmount() {
101
+ var _this$_inputListener, _this$_changeListener;
102
+
99
103
  if (!this._input) {
100
104
  return;
101
105
  }
102
106
 
103
- this._inputListener?.remove();
104
- this._changeListener?.remove();
107
+ (_this$_inputListener = this._inputListener) === null || _this$_inputListener === void 0 ? void 0 : _this$_inputListener.remove();
108
+ (_this$_changeListener = this._changeListener) === null || _this$_changeListener === void 0 ? void 0 : _this$_changeListener.remove();
105
109
  }
106
110
  /* end workaround */
107
111
 
108
112
 
109
113
  componentDidUpdate() {
110
- this.props.makeStyles?.();
114
+ var _this$props$makeStyle2, _this$props3;
115
+
116
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
111
117
  }
112
118
 
113
119
  get value() {
@@ -127,6 +133,8 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
127
133
 
128
134
  renderValue() {
129
135
  if (this.props.displayValue) {
136
+ var _this$props$styles;
137
+
130
138
  if (!this.value) {
131
139
  (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}`.');
132
140
  return null;
@@ -137,7 +145,7 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
137
145
  placement: "end center"
138
146
  }, (0, _emotion.jsx)("output", {
139
147
  htmlFor: this.id,
140
- css: this.props.styles?.rangeInputInputValue
148
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue
141
149
  }, this.props.formatValue(this.value, this.props.max)));
142
150
  }
143
151
 
@@ -145,10 +153,12 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
145
153
  }
146
154
 
147
155
  render() {
148
- const _this$props2 = this.props,
149
- formatValue = _this$props2.formatValue,
150
- disabled = _this$props2.disabled,
151
- readOnly = _this$props2.readOnly;
156
+ var _this$props$styles2, _this$props$styles3;
157
+
158
+ const _this$props4 = this.props,
159
+ formatValue = _this$props4.formatValue,
160
+ disabled = _this$props4.disabled,
161
+ readOnly = _this$props4.readOnly;
152
162
  const props = (0, _omitProps.omitProps)(this.props, RangeInput.allowedProps);
153
163
  /* eslint-disable jsx-a11y/no-redundant-roles */
154
164
 
@@ -157,9 +167,9 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
157
167
  id: this.id,
158
168
  elementRef: this.handleRef
159
169
  }), (0, _emotion.jsx)("div", {
160
- css: this.props.styles?.rangeInput
170
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput
161
171
  }, (0, _emotion.jsx)("input", Object.assign({
162
- css: this.props.styles?.rangeInputInput,
172
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
163
173
  ref: c => {
164
174
  this._input = c;
165
175
  },
package/lib/RangeInput/theme.js CHANGED
@@ -56,25 +56,25 @@ const generateComponentTheme = theme => {
56
56
  const componentVariables = {
57
57
  minWidth: '12.5rem',
58
58
  handleSize: '1.5rem',
59
- handleBackground: colors?.backgroundBrand,
60
- handleShadowColor: (0, _darken.darken)(colors?.borderBrand, 15),
61
- handleHoverBackground: colors?.backgroundBrand,
62
- handleFocusBackground: colors?.backgroundBrand,
63
- handleFocusOutlineColor: (0, _alpha.alpha)(colors?.borderBrand, 40),
59
+ handleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
60
+ handleShadowColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 15),
61
+ handleHoverBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
62
+ handleFocusBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
63
+ handleFocusOutlineColor: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 40),
64
64
  handleFocusOutlineWidth: '0.75em',
65
- trackBackground: colors?.backgroundDark,
66
- valueColor: colors?.textLightest,
67
- valueFontFamily: typography?.fontFamily,
68
- valueFontWeight: typography?.fontWeightNormal,
69
- valueSmallFontSize: typography?.fontSizeSmall,
70
- valueSmallPadding: `0 ${spacing?.xSmall}`,
71
- valueSmallLineHeight: forms?.inputHeightSmall,
72
- valueMediumFontSize: typography?.fontSizeMedium,
73
- valueMediumPadding: `0 ${spacing?.small}`,
74
- valueMediumLineHeight: forms?.inputHeightMedium,
75
- valueLargeFontSize: typography?.fontSizeLarge,
76
- valueLargePadding: `0 ${spacing?.medium}`,
77
- valueLargeLineHeight: forms?.inputHeightLarge
65
+ trackBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
66
+ valueColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
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
78
78
  };
79
79
  return { ...componentVariables,
80
80
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-range-input",
3
- "version": "8.17.1-snapshot.81+b39b60872",
3
+ "version": "8.18.1-snapshot.0+435c9ae79",
4
4
  "description": "A styled HTML range input",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,26 +24,26 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.17.1-snapshot.81+b39b60872",
28
- "@instructure/emotion": "8.17.1-snapshot.81+b39b60872",
29
- "@instructure/shared-types": "8.17.1-snapshot.81+b39b60872",
30
- "@instructure/ui-color-utils": "8.17.1-snapshot.81+b39b60872",
31
- "@instructure/ui-dom-utils": "8.17.1-snapshot.81+b39b60872",
32
- "@instructure/ui-form-field": "8.17.1-snapshot.81+b39b60872",
33
- "@instructure/ui-i18n": "8.17.1-snapshot.81+b39b60872",
34
- "@instructure/ui-prop-types": "8.17.1-snapshot.81+b39b60872",
35
- "@instructure/ui-react-utils": "8.17.1-snapshot.81+b39b60872",
36
- "@instructure/ui-testable": "8.17.1-snapshot.81+b39b60872",
37
- "@instructure/ui-utils": "8.17.1-snapshot.81+b39b60872",
38
- "@instructure/ui-view": "8.17.1-snapshot.81+b39b60872",
39
- "@instructure/uid": "8.17.1-snapshot.81+b39b60872",
27
+ "@instructure/console": "8.18.1-snapshot.0+435c9ae79",
28
+ "@instructure/emotion": "8.18.1-snapshot.0+435c9ae79",
29
+ "@instructure/shared-types": "8.18.1-snapshot.0+435c9ae79",
30
+ "@instructure/ui-color-utils": "8.18.1-snapshot.0+435c9ae79",
31
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.0+435c9ae79",
32
+ "@instructure/ui-form-field": "8.18.1-snapshot.0+435c9ae79",
33
+ "@instructure/ui-i18n": "8.18.1-snapshot.0+435c9ae79",
34
+ "@instructure/ui-prop-types": "8.18.1-snapshot.0+435c9ae79",
35
+ "@instructure/ui-react-utils": "8.18.1-snapshot.0+435c9ae79",
36
+ "@instructure/ui-testable": "8.18.1-snapshot.0+435c9ae79",
37
+ "@instructure/ui-utils": "8.18.1-snapshot.0+435c9ae79",
38
+ "@instructure/ui-view": "8.18.1-snapshot.0+435c9ae79",
39
+ "@instructure/uid": "8.18.1-snapshot.0+435c9ae79",
40
40
  "prop-types": "^15"
41
41
  },
42
42
  "devDependencies": {
43
- "@instructure/ui-babel-preset": "8.17.1-snapshot.81+b39b60872",
44
- "@instructure/ui-test-locator": "8.17.1-snapshot.81+b39b60872",
45
- "@instructure/ui-test-utils": "8.17.1-snapshot.81+b39b60872",
46
- "@instructure/ui-themes": "8.17.1-snapshot.81+b39b60872"
43
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.0+435c9ae79",
44
+ "@instructure/ui-test-locator": "8.18.1-snapshot.0+435c9ae79",
45
+ "@instructure/ui-test-utils": "8.18.1-snapshot.0+435c9ae79",
46
+ "@instructure/ui-themes": "8.18.1-snapshot.0+435c9ae79"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "react": ">=16.8 <=17"
@@ -52,5 +52,5 @@
52
52
  "access": "public"
53
53
  },
54
54
  "sideEffects": false,
55
- "gitHead": "b39b60872cb51a5e9ba26221adceec498d4ce2fb"
55
+ "gitHead": "435c9ae794c15e2bd103f700f8c4e946d91c1b59"
56
56
  }