@instructure/ui-number-input 8.17.1-snapshot.21 → 8.17.1-snapshot.30

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/es/NumberInput/index.js +17 -27
  2. package/es/NumberInput/theme.js +24 -24
  3. package/lib/NumberInput/index.js +17 -27
  4. package/lib/NumberInput/theme.js +24 -24
  5. package/package.json +14 -14
  6. package/tsconfig.build.tsbuildinfo +1 -1
package/es/NumberInput/index.js CHANGED
@@ -148,15 +148,11 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
148
148
  }
149
149
 
150
150
  componentDidMount() {
151
- var _this$props$makeStyle, _this$props2;
152
-
153
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStyleVariables);
151
+ this.props.makeStyles?.(this.makeStyleVariables);
154
152
  }
155
153
 
156
154
  componentDidUpdate() {
157
- var _this$props$makeStyle2, _this$props3;
158
-
159
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStyleVariables);
155
+ this.props.makeStyles?.(this.makeStyleVariables);
160
156
  }
161
157
 
162
158
  get makeStyleVariables() {
@@ -172,9 +168,7 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
172
168
  event.preventDefault();
173
169
 
174
170
  if (interaction === 'enabled') {
175
- var _this$_input;
176
-
177
- (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
171
+ this._input?.focus();
178
172
 
179
173
  if (typeof callback === 'function') {
180
174
  callback(event);
@@ -183,19 +177,17 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
183
177
  }
184
178
 
185
179
  renderArrows() {
186
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
187
-
188
180
  return jsx("span", {
189
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.arrowContainer
181
+ css: this.props.styles?.arrowContainer
190
182
  }, jsx("button", {
191
183
  "aria-hidden": true,
192
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.arrow,
184
+ css: this.props.styles?.arrow,
193
185
  onMouseDown: this.handleClickUpArrow,
194
186
  tabIndex: -1,
195
187
  type: "button"
196
188
  }, _IconArrowOpenUpLine || (_IconArrowOpenUpLine = jsx(IconArrowOpenUpLine, null))), jsx("button", {
197
189
  "aria-hidden": true,
198
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.arrow,
190
+ css: this.props.styles?.arrow,
199
191
  onMouseDown: this.handleClickDownArrow,
200
192
  tabIndex: -1,
201
193
  type: "button"
@@ -203,16 +195,14 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
203
195
  }
204
196
 
205
197
  render() {
206
- var _this$props$styles4, _this$props$styles5, _this$props$styles6;
207
-
208
- const _this$props4 = this.props,
209
- renderLabel = _this$props4.renderLabel,
210
- display = _this$props4.display,
211
- placeholder = _this$props4.placeholder,
212
- isRequired = _this$props4.isRequired,
213
- showArrows = _this$props4.showArrows,
214
- value = _this$props4.value,
215
- width = _this$props4.width;
198
+ const _this$props2 = this.props,
199
+ renderLabel = _this$props2.renderLabel,
200
+ display = _this$props2.display,
201
+ placeholder = _this$props2.placeholder,
202
+ isRequired = _this$props2.isRequired,
203
+ showArrows = _this$props2.showArrows,
204
+ value = _this$props2.value,
205
+ width = _this$props2.width;
216
206
  const interaction = this.interaction;
217
207
  return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
218
208
  label: callRenderProp(renderLabel),
@@ -220,14 +210,14 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
220
210
  id: this.id,
221
211
  elementRef: this.handleRef
222
212
  }), jsx("span", {
223
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.inputWidth,
213
+ css: this.props.styles?.inputWidth,
224
214
  style: width ? {
225
215
  width
226
216
  } : void 0
227
217
  }, jsx("span", {
228
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.inputContainer
218
+ css: this.props.styles?.inputContainer
229
219
  }, jsx("input", Object.assign({}, omitProps(this.props, [...FormField.allowedProps, ...NumberInput.allowedProps]), {
230
- css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.input,
220
+ css: this.props.styles?.input,
231
221
  "aria-invalid": this.invalid ? 'true' : void 0,
232
222
  id: this.id,
233
223
  type: "text",
package/es/NumberInput/theme.js CHANGED
@@ -42,31 +42,31 @@ const generateComponentTheme = theme => {
42
42
  }
43
43
  };
44
44
  const componentVariables = {
45
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
46
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
47
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
48
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
49
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
50
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
51
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
52
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
53
- padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
45
+ fontFamily: typography?.fontFamily,
46
+ fontWeight: typography?.fontWeightNormal,
47
+ borderWidth: borders?.widthSmall,
48
+ borderStyle: borders?.style,
49
+ borderColor: colors?.borderMedium,
50
+ borderRadius: borders?.radiusMedium,
51
+ color: colors?.textDarkest,
52
+ background: colors?.backgroundLightest,
53
+ padding: `0 ${spacing?.small}`,
54
54
  arrowsContainerWidth: '2rem',
55
- arrowsColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
56
- arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
57
- arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
58
- arrowsBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
59
- arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
60
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
61
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
62
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
63
- errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
64
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
65
- placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
66
- mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
67
- mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
68
- largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
69
- largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
55
+ arrowsColor: colors?.textDarkest,
56
+ arrowsBackgroundColor: colors?.backgroundLight,
57
+ arrowsHoverBackgroundColor: colors?.backgroundMedium,
58
+ arrowsBorderColor: colors?.borderMedium,
59
+ arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors?.borderMedium}`,
60
+ focusOutlineWidth: borders?.widthMedium,
61
+ focusOutlineStyle: borders?.style,
62
+ focusOutlineColor: colors?.borderBrand,
63
+ errorBorderColor: colors?.borderDanger,
64
+ errorOutlineColor: colors?.borderDanger,
65
+ placeholderColor: colors?.textDark,
66
+ mediumFontSize: typography?.fontSizeMedium,
67
+ mediumHeight: forms?.inputHeightMedium,
68
+ largeFontSize: typography?.fontSizeLarge,
69
+ largeHeight: forms?.inputHeightLarge
70
70
  };
71
71
  return { ...componentVariables,
72
72
  ...themeSpecificStyle[themeName]
package/lib/NumberInput/index.js CHANGED
@@ -153,15 +153,11 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
153
153
  }
154
154
 
155
155
  componentDidMount() {
156
- var _this$props$makeStyle, _this$props2;
157
-
158
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStyleVariables);
156
+ this.props.makeStyles?.(this.makeStyleVariables);
159
157
  }
160
158
 
161
159
  componentDidUpdate() {
162
- var _this$props$makeStyle2, _this$props3;
163
-
164
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStyleVariables);
160
+ this.props.makeStyles?.(this.makeStyleVariables);
165
161
  }
166
162
 
167
163
  get makeStyleVariables() {
@@ -177,9 +173,7 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
177
173
  event.preventDefault();
178
174
 
179
175
  if (interaction === 'enabled') {
180
- var _this$_input;
181
-
182
- (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
176
+ this._input?.focus();
183
177
 
184
178
  if (typeof callback === 'function') {
185
179
  callback(event);
@@ -188,19 +182,17 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
188
182
  }
189
183
 
190
184
  renderArrows() {
191
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
192
-
193
185
  return (0, _emotion.jsx)("span", {
194
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.arrowContainer
186
+ css: this.props.styles?.arrowContainer
195
187
  }, (0, _emotion.jsx)("button", {
196
188
  "aria-hidden": true,
197
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.arrow,
189
+ css: this.props.styles?.arrow,
198
190
  onMouseDown: this.handleClickUpArrow,
199
191
  tabIndex: -1,
200
192
  type: "button"
201
193
  }, _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _emotion.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, null))), (0, _emotion.jsx)("button", {
202
194
  "aria-hidden": true,
203
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.arrow,
195
+ css: this.props.styles?.arrow,
204
196
  onMouseDown: this.handleClickDownArrow,
205
197
  tabIndex: -1,
206
198
  type: "button"
@@ -208,16 +200,14 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
208
200
  }
209
201
 
210
202
  render() {
211
- var _this$props$styles4, _this$props$styles5, _this$props$styles6;
212
-
213
- const _this$props4 = this.props,
214
- renderLabel = _this$props4.renderLabel,
215
- display = _this$props4.display,
216
- placeholder = _this$props4.placeholder,
217
- isRequired = _this$props4.isRequired,
218
- showArrows = _this$props4.showArrows,
219
- value = _this$props4.value,
220
- width = _this$props4.width;
203
+ const _this$props2 = this.props,
204
+ renderLabel = _this$props2.renderLabel,
205
+ display = _this$props2.display,
206
+ placeholder = _this$props2.placeholder,
207
+ isRequired = _this$props2.isRequired,
208
+ showArrows = _this$props2.showArrows,
209
+ value = _this$props2.value,
210
+ width = _this$props2.width;
221
211
  const interaction = this.interaction;
222
212
  return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
223
213
  label: (0, _callRenderProp.callRenderProp)(renderLabel),
@@ -225,14 +215,14 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
225
215
  id: this.id,
226
216
  elementRef: this.handleRef
227
217
  }), (0, _emotion.jsx)("span", {
228
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.inputWidth,
218
+ css: this.props.styles?.inputWidth,
229
219
  style: width ? {
230
220
  width
231
221
  } : void 0
232
222
  }, (0, _emotion.jsx)("span", {
233
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.inputContainer
223
+ css: this.props.styles?.inputContainer
234
224
  }, (0, _emotion.jsx)("input", Object.assign({}, (0, _omitProps.omitProps)(this.props, [..._FormField.FormField.allowedProps, ...NumberInput.allowedProps]), {
235
- css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.input,
225
+ css: this.props.styles?.input,
236
226
  "aria-invalid": this.invalid ? 'true' : void 0,
237
227
  id: this.id,
238
228
  type: "text",
package/lib/NumberInput/theme.js CHANGED
@@ -49,31 +49,31 @@ const generateComponentTheme = theme => {
49
49
  }
50
50
  };
51
51
  const componentVariables = {
52
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
53
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
54
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
55
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
56
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
57
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
58
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
59
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
60
- padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
52
+ fontFamily: typography?.fontFamily,
53
+ fontWeight: typography?.fontWeightNormal,
54
+ borderWidth: borders?.widthSmall,
55
+ borderStyle: borders?.style,
56
+ borderColor: colors?.borderMedium,
57
+ borderRadius: borders?.radiusMedium,
58
+ color: colors?.textDarkest,
59
+ background: colors?.backgroundLightest,
60
+ padding: `0 ${spacing?.small}`,
61
61
  arrowsContainerWidth: '2rem',
62
- arrowsColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
63
- arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
64
- arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
65
- arrowsBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
66
- arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
67
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
68
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
69
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
70
- errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
71
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
72
- placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
73
- mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
74
- mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
75
- largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
76
- largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
62
+ arrowsColor: colors?.textDarkest,
63
+ arrowsBackgroundColor: colors?.backgroundLight,
64
+ arrowsHoverBackgroundColor: colors?.backgroundMedium,
65
+ arrowsBorderColor: colors?.borderMedium,
66
+ arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors?.borderMedium}`,
67
+ focusOutlineWidth: borders?.widthMedium,
68
+ focusOutlineStyle: borders?.style,
69
+ focusOutlineColor: colors?.borderBrand,
70
+ errorBorderColor: colors?.borderDanger,
71
+ errorOutlineColor: colors?.borderDanger,
72
+ placeholderColor: colors?.textDark,
73
+ mediumFontSize: typography?.fontSizeMedium,
74
+ mediumHeight: forms?.inputHeightMedium,
75
+ largeFontSize: typography?.fontSizeLarge,
76
+ largeHeight: forms?.inputHeightLarge
77
77
  };
78
78
  return { ...componentVariables,
79
79
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-number-input",
3
- "version": "8.17.1-snapshot.21+79d490548",
3
+ "version": "8.17.1-snapshot.30+cb1322c25",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,21 +23,21 @@
23
23
  "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
24
24
  },
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.21+79d490548",
27
- "@instructure/ui-test-locator": "8.17.1-snapshot.21+79d490548",
28
- "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548",
29
- "@instructure/ui-themes": "8.17.1-snapshot.21+79d490548"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.30+cb1322c25",
27
+ "@instructure/ui-test-locator": "8.17.1-snapshot.30+cb1322c25",
28
+ "@instructure/ui-test-utils": "8.17.1-snapshot.30+cb1322c25",
29
+ "@instructure/ui-themes": "8.17.1-snapshot.30+cb1322c25"
30
30
  },
31
31
  "dependencies": {
32
32
  "@babel/runtime": "^7.13.10",
33
- "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
34
- "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
35
- "@instructure/ui-form-field": "8.17.1-snapshot.21+79d490548",
36
- "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
37
- "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
38
- "@instructure/ui-testable": "8.17.1-snapshot.21+79d490548",
39
- "@instructure/ui-utils": "8.17.1-snapshot.21+79d490548",
40
- "@instructure/uid": "8.17.1-snapshot.21+79d490548",
33
+ "@instructure/emotion": "8.17.1-snapshot.30+cb1322c25",
34
+ "@instructure/shared-types": "8.17.1-snapshot.30+cb1322c25",
35
+ "@instructure/ui-form-field": "8.17.1-snapshot.30+cb1322c25",
36
+ "@instructure/ui-icons": "8.17.1-snapshot.30+cb1322c25",
37
+ "@instructure/ui-react-utils": "8.17.1-snapshot.30+cb1322c25",
38
+ "@instructure/ui-testable": "8.17.1-snapshot.30+cb1322c25",
39
+ "@instructure/ui-utils": "8.17.1-snapshot.30+cb1322c25",
40
+ "@instructure/uid": "8.17.1-snapshot.30+cb1322c25",
41
41
  "keycode": "^2",
42
42
  "prop-types": "^15"
43
43
  },
@@ -48,5 +48,5 @@
48
48
  "access": "public"
49
49
  },
50
50
  "sideEffects": false,
51
- "gitHead": "79d490548a0736feb2a7232bf5918857317b178b"
51
+ "gitHead": "cb1322c25257139750149d7a817f1fb32571c1ed"
52
52
  }