@instructure/ui-range-input 8.18.0 → 8.18.1-snapshot.2

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/RangeInput/index.js

@@ -86,7 +86,9 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
 
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
 
     if (this._input !== null) {
       // https://connect.microsoft.com/IE/Feedback/Details/856998
@@ -96,18 +98,22 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   componentWillUnmount() {
+    var _this$_inputListener, _this$_changeListener;
+
     if (!this._input) {
       return;
     }
 
-    this._inputListener?.remove();
-    this._changeListener?.remove();
+    (_this$_inputListener = this._inputListener) === null || _this$_inputListener === void 0 ? void 0 : _this$_inputListener.remove();
+    (_this$_changeListener = this._changeListener) === null || _this$_changeListener === void 0 ? void 0 : _this$_changeListener.remove();
   }
   /* end workaround */
 
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   get value() {
@@ -127,6 +133,8 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
 
   renderValue() {
     if (this.props.displayValue) {
+      var _this$props$styles;
+
       if (!this.value) {
         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}`.');
         return null;
@@ -137,7 +145,7 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         placement: "end center"
       }, jsx("output", {
         htmlFor: this.id,
-        css: this.props.styles?.rangeInputInputValue
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue
       }, this.props.formatValue(this.value, this.props.max)));
     }
 
@@ -145,10 +153,12 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   render() {
-    const _this$props2 = this.props,
-          formatValue = _this$props2.formatValue,
-          disabled = _this$props2.disabled,
-          readOnly = _this$props2.readOnly;
+    var _this$props$styles2, _this$props$styles3;
+
+    const _this$props4 = this.props,
+          formatValue = _this$props4.formatValue,
+          disabled = _this$props4.disabled,
+          readOnly = _this$props4.readOnly;
     const props = omitProps(this.props, RangeInput.allowedProps);
     /* eslint-disable jsx-a11y/no-redundant-roles */
 
@@ -157,9 +167,9 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       id: this.id,
       elementRef: this.handleRef
     }), jsx("div", {
-      css: this.props.styles?.rangeInput
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput
     }, jsx("input", Object.assign({
-      css: this.props.styles?.rangeInputInput,
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
       ref: c => {
         this._input = c;
       },

package/es/RangeInput/theme.js

@@ -46,25 +46,25 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     minWidth: '12.5rem',
     handleSize: '1.5rem',
-    handleBackground: colors?.backgroundBrand,
-    handleShadowColor: darken(colors?.borderBrand, 15),
-    handleHoverBackground: colors?.backgroundBrand,
-    handleFocusBackground: colors?.backgroundBrand,
-    handleFocusOutlineColor: alpha(colors?.borderBrand, 40),
+    handleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleShadowColor: darken(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 15),
+    handleHoverBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleFocusBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleFocusOutlineColor: alpha(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 40),
     handleFocusOutlineWidth: '0.75em',
-    trackBackground: colors?.backgroundDark,
-    valueColor: colors?.textLightest,
-    valueFontFamily: typography?.fontFamily,
-    valueFontWeight: typography?.fontWeightNormal,
-    valueSmallFontSize: typography?.fontSizeSmall,
-    valueSmallPadding: `0 ${spacing?.xSmall}`,
-    valueSmallLineHeight: forms?.inputHeightSmall,
-    valueMediumFontSize: typography?.fontSizeMedium,
-    valueMediumPadding: `0 ${spacing?.small}`,
-    valueMediumLineHeight: forms?.inputHeightMedium,
-    valueLargeFontSize: typography?.fontSizeLarge,
-    valueLargePadding: `0 ${spacing?.medium}`,
-    valueLargeLineHeight: forms?.inputHeightLarge
+    trackBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
+    valueColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    valueFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    valueFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    valueSmallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    valueSmallPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
+    valueSmallLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
+    valueMediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    valueMediumPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
+    valueMediumLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
+    valueLargeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    valueLargePadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
+    valueLargeLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/RangeInput/index.js

@@ -86,7 +86,9 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
 
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
 
     if (this._input !== null) {
       // https://connect.microsoft.com/IE/Feedback/Details/856998
@@ -96,18 +98,22 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   componentWillUnmount() {
+    var _this$_inputListener, _this$_changeListener;
+
     if (!this._input) {
       return;
     }
 
-    this._inputListener?.remove();
-    this._changeListener?.remove();
+    (_this$_inputListener = this._inputListener) === null || _this$_inputListener === void 0 ? void 0 : _this$_inputListener.remove();
+    (_this$_changeListener = this._changeListener) === null || _this$_changeListener === void 0 ? void 0 : _this$_changeListener.remove();
   }
   /* end workaround */
 
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   get value() {
@@ -127,6 +133,8 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
 
   renderValue() {
     if (this.props.displayValue) {
+      var _this$props$styles;
+
       if (!this.value) {
         (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}`.');
         return null;
@@ -137,7 +145,7 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
         placement: "end center"
       }, (0, _emotion.jsx)("output", {
         htmlFor: this.id,
-        css: this.props.styles?.rangeInputInputValue
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue
       }, this.props.formatValue(this.value, this.props.max)));
     }
 
@@ -145,10 +153,12 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   render() {
-    const _this$props2 = this.props,
-          formatValue = _this$props2.formatValue,
-          disabled = _this$props2.disabled,
-          readOnly = _this$props2.readOnly;
+    var _this$props$styles2, _this$props$styles3;
+
+    const _this$props4 = this.props,
+          formatValue = _this$props4.formatValue,
+          disabled = _this$props4.disabled,
+          readOnly = _this$props4.readOnly;
     const props = (0, _omitProps.omitProps)(this.props, RangeInput.allowedProps);
     /* eslint-disable jsx-a11y/no-redundant-roles */
 
@@ -157,9 +167,9 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       id: this.id,
       elementRef: this.handleRef
     }), (0, _emotion.jsx)("div", {
-      css: this.props.styles?.rangeInput
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput
     }, (0, _emotion.jsx)("input", Object.assign({
-      css: this.props.styles?.rangeInputInput,
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
       ref: c => {
         this._input = c;
       },

package/lib/RangeInput/theme.js

@@ -56,25 +56,25 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     minWidth: '12.5rem',
     handleSize: '1.5rem',
-    handleBackground: colors?.backgroundBrand,
-    handleShadowColor: (0, _darken.darken)(colors?.borderBrand, 15),
-    handleHoverBackground: colors?.backgroundBrand,
-    handleFocusBackground: colors?.backgroundBrand,
-    handleFocusOutlineColor: (0, _alpha.alpha)(colors?.borderBrand, 40),
+    handleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleShadowColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 15),
+    handleHoverBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleFocusBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleFocusOutlineColor: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 40),
     handleFocusOutlineWidth: '0.75em',
-    trackBackground: colors?.backgroundDark,
-    valueColor: colors?.textLightest,
-    valueFontFamily: typography?.fontFamily,
-    valueFontWeight: typography?.fontWeightNormal,
-    valueSmallFontSize: typography?.fontSizeSmall,
-    valueSmallPadding: `0 ${spacing?.xSmall}`,
-    valueSmallLineHeight: forms?.inputHeightSmall,
-    valueMediumFontSize: typography?.fontSizeMedium,
-    valueMediumPadding: `0 ${spacing?.small}`,
-    valueMediumLineHeight: forms?.inputHeightMedium,
-    valueLargeFontSize: typography?.fontSizeLarge,
-    valueLargePadding: `0 ${spacing?.medium}`,
-    valueLargeLineHeight: forms?.inputHeightLarge
+    trackBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
+    valueColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    valueFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    valueFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    valueSmallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    valueSmallPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
+    valueSmallLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
+    valueMediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    valueMediumPadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
+    valueMediumLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
+    valueLargeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    valueLargePadding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
+    valueLargeLineHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-range-input",
-  "version": "8.18.0",
+  "version": "8.18.1-snapshot.2+ca4c1ff9d",
   "description": "A styled HTML range input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,26 +24,26 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.18.0",
-    "@instructure/emotion": "8.18.0",
-    "@instructure/shared-types": "8.18.0",
-    "@instructure/ui-color-utils": "8.18.0",
-    "@instructure/ui-dom-utils": "8.18.0",
-    "@instructure/ui-form-field": "8.18.0",
-    "@instructure/ui-i18n": "8.18.0",
-    "@instructure/ui-prop-types": "8.18.0",
-    "@instructure/ui-react-utils": "8.18.0",
-    "@instructure/ui-testable": "8.18.0",
-    "@instructure/ui-utils": "8.18.0",
-    "@instructure/ui-view": "8.18.0",
-    "@instructure/uid": "8.18.0",
+    "@instructure/console": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/emotion": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/shared-types": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-dom-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-form-field": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-i18n": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-prop-types": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-testable": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-view": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/uid": "8.18.1-snapshot.2+ca4c1ff9d",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.18.0",
-    "@instructure/ui-test-locator": "8.18.0",
-    "@instructure/ui-test-utils": "8.18.0",
-    "@instructure/ui-themes": "8.18.0"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-themes": "8.18.1-snapshot.2+ca4c1ff9d"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -51,5 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ca4c1ff9d3985151ae0758fb596de41652dbb58b"
 }