@instructure/ui-number-input 8.17.1-snapshot.81 → 8.18.1-snapshot.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
+
+**Note:** Version bump only for package @instructure/ui-number-input
+
 # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
 
 ### Bug Fixes

package/es/NumberInput/index.js

@@ -148,11 +148,15 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
   }
 
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStyleVariables);
+    var _this$props$makeStyle, _this$props2;
+
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStyleVariables);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStyleVariables);
+    var _this$props$makeStyle2, _this$props3;
+
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStyleVariables);
   }
 
   get makeStyleVariables() {
@@ -168,7 +172,9 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
     event.preventDefault();
 
     if (interaction === 'enabled') {
-      this._input?.focus();
+      var _this$_input;
+
+      (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
 
       if (typeof callback === 'function') {
         callback(event);
@@ -177,17 +183,19 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
   }
 
   renderArrows() {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+
     return jsx("span", {
-      css: this.props.styles?.arrowContainer
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.arrowContainer
     }, jsx("button", {
       "aria-hidden": true,
-      css: this.props.styles?.arrow,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.arrow,
       onMouseDown: this.handleClickUpArrow,
       tabIndex: -1,
       type: "button"
     }, _IconArrowOpenUpLine || (_IconArrowOpenUpLine = jsx(IconArrowOpenUpLine, null))), jsx("button", {
       "aria-hidden": true,
-      css: this.props.styles?.arrow,
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.arrow,
       onMouseDown: this.handleClickDownArrow,
       tabIndex: -1,
       type: "button"
@@ -195,14 +203,16 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
   }
 
   render() {
-    const _this$props2 = this.props,
-          renderLabel = _this$props2.renderLabel,
-          display = _this$props2.display,
-          placeholder = _this$props2.placeholder,
-          isRequired = _this$props2.isRequired,
-          showArrows = _this$props2.showArrows,
-          value = _this$props2.value,
-          width = _this$props2.width;
+    var _this$props$styles4, _this$props$styles5, _this$props$styles6;
+
+    const _this$props4 = this.props,
+          renderLabel = _this$props4.renderLabel,
+          display = _this$props4.display,
+          placeholder = _this$props4.placeholder,
+          isRequired = _this$props4.isRequired,
+          showArrows = _this$props4.showArrows,
+          value = _this$props4.value,
+          width = _this$props4.width;
     const interaction = this.interaction;
     return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
       label: callRenderProp(renderLabel),
@@ -210,14 +220,14 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       id: this.id,
       elementRef: this.handleRef
     }), jsx("span", {
-      css: this.props.styles?.inputWidth,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.inputWidth,
       style: width ? {
         width
       } : void 0
     }, jsx("span", {
-      css: this.props.styles?.inputContainer
+      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.inputContainer
     }, jsx("input", Object.assign({}, omitProps(this.props, [...FormField.allowedProps, ...NumberInput.allowedProps]), {
-      css: this.props.styles?.input,
+      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.input,
       "aria-invalid": this.invalid ? 'true' : void 0,
       id: this.id,
       type: "text",

package/es/NumberInput/theme.js

@@ -42,31 +42,31 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style,
-    borderColor: colors?.borderMedium,
-    borderRadius: borders?.radiusMedium,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    padding: `0 ${spacing?.small}`,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
     arrowsContainerWidth: '2rem',
-    arrowsColor: colors?.textDarkest,
-    arrowsBackgroundColor: colors?.backgroundLight,
-    arrowsHoverBackgroundColor: colors?.backgroundMedium,
-    arrowsBorderColor: colors?.borderMedium,
-    arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors?.borderMedium}`,
-    focusOutlineWidth: borders?.widthMedium,
-    focusOutlineStyle: borders?.style,
-    focusOutlineColor: colors?.borderBrand,
-    errorBorderColor: colors?.borderDanger,
-    errorOutlineColor: colors?.borderDanger,
-    placeholderColor: colors?.textDark,
-    mediumFontSize: typography?.fontSizeMedium,
-    mediumHeight: forms?.inputHeightMedium,
-    largeFontSize: typography?.fontSizeLarge,
-    largeHeight: forms?.inputHeightLarge
+    arrowsColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
+    arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
+    arrowsBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
+    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
+    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
+    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/NumberInput/index.js

@@ -153,11 +153,15 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStyleVariables);
+    var _this$props$makeStyle, _this$props2;
+
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStyleVariables);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStyleVariables);
+    var _this$props$makeStyle2, _this$props3;
+
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStyleVariables);
   }
 
   get makeStyleVariables() {
@@ -173,7 +177,9 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     event.preventDefault();
 
     if (interaction === 'enabled') {
-      this._input?.focus();
+      var _this$_input;
+
+      (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
 
       if (typeof callback === 'function') {
         callback(event);
@@ -182,17 +188,19 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   renderArrows() {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+
     return (0, _emotion.jsx)("span", {
-      css: this.props.styles?.arrowContainer
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.arrowContainer
     }, (0, _emotion.jsx)("button", {
       "aria-hidden": true,
-      css: this.props.styles?.arrow,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.arrow,
       onMouseDown: this.handleClickUpArrow,
       tabIndex: -1,
       type: "button"
     }, _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _emotion.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, null))), (0, _emotion.jsx)("button", {
       "aria-hidden": true,
-      css: this.props.styles?.arrow,
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.arrow,
       onMouseDown: this.handleClickDownArrow,
       tabIndex: -1,
       type: "button"
@@ -200,14 +208,16 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   render() {
-    const _this$props2 = this.props,
-          renderLabel = _this$props2.renderLabel,
-          display = _this$props2.display,
-          placeholder = _this$props2.placeholder,
-          isRequired = _this$props2.isRequired,
-          showArrows = _this$props2.showArrows,
-          value = _this$props2.value,
-          width = _this$props2.width;
+    var _this$props$styles4, _this$props$styles5, _this$props$styles6;
+
+    const _this$props4 = this.props,
+          renderLabel = _this$props4.renderLabel,
+          display = _this$props4.display,
+          placeholder = _this$props4.placeholder,
+          isRequired = _this$props4.isRequired,
+          showArrows = _this$props4.showArrows,
+          value = _this$props4.value,
+          width = _this$props4.width;
     const interaction = this.interaction;
     return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
       label: (0, _callRenderProp.callRenderProp)(renderLabel),
@@ -215,14 +225,14 @@ let NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       id: this.id,
       elementRef: this.handleRef
     }), (0, _emotion.jsx)("span", {
-      css: this.props.styles?.inputWidth,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.inputWidth,
       style: width ? {
         width
       } : void 0
     }, (0, _emotion.jsx)("span", {
-      css: this.props.styles?.inputContainer
+      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.inputContainer
     }, (0, _emotion.jsx)("input", Object.assign({}, (0, _omitProps.omitProps)(this.props, [..._FormField.FormField.allowedProps, ...NumberInput.allowedProps]), {
-      css: this.props.styles?.input,
+      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.input,
       "aria-invalid": this.invalid ? 'true' : void 0,
       id: this.id,
       type: "text",

package/lib/NumberInput/theme.js

@@ -49,31 +49,31 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style,
-    borderColor: colors?.borderMedium,
-    borderRadius: borders?.radiusMedium,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    padding: `0 ${spacing?.small}`,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
     arrowsContainerWidth: '2rem',
-    arrowsColor: colors?.textDarkest,
-    arrowsBackgroundColor: colors?.backgroundLight,
-    arrowsHoverBackgroundColor: colors?.backgroundMedium,
-    arrowsBorderColor: colors?.borderMedium,
-    arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors?.borderMedium}`,
-    focusOutlineWidth: borders?.widthMedium,
-    focusOutlineStyle: borders?.style,
-    focusOutlineColor: colors?.borderBrand,
-    errorBorderColor: colors?.borderDanger,
-    errorOutlineColor: colors?.borderDanger,
-    placeholderColor: colors?.textDark,
-    mediumFontSize: typography?.fontSizeMedium,
-    mediumHeight: forms?.inputHeightMedium,
-    largeFontSize: typography?.fontSizeLarge,
-    largeHeight: forms?.inputHeightLarge
+    arrowsColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
+    arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
+    arrowsBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
+    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
+    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
+    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "8.17.1-snapshot.81+b39b60872",
+  "version": "8.18.1-snapshot.0+435c9ae79",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,21 +23,21 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/ui-test-locator": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/ui-themes": "8.17.1-snapshot.81+b39b60872"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/ui-themes": "8.18.1-snapshot.0+435c9ae79"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/shared-types": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/ui-form-field": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/ui-icons": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/ui-testable": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/ui-utils": "8.17.1-snapshot.81+b39b60872",
-    "@instructure/uid": "8.17.1-snapshot.81+b39b60872",
+    "@instructure/emotion": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/shared-types": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/ui-form-field": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/ui-icons": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/ui-testable": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/ui-utils": "8.18.1-snapshot.0+435c9ae79",
+    "@instructure/uid": "8.18.1-snapshot.0+435c9ae79",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "b39b60872cb51a5e9ba26221adceec498d4ce2fb"
+  "gitHead": "435c9ae794c15e2bd103f700f8c4e946d91c1b59"
 }