@instructure/ui-range-input 8.14.0 → 8.14.1-snapshot.7

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/RangeInputLocator.js

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { RangeInput } from './index';
+import { RangeInput } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const RangeInputLocator = locator(RangeInput.selector, {
   findInput: function () {
     return locator('input[type=range]').find(...arguments);

package/es/RangeInput/__examples__/RangeInput.examples.js

@@ -24,7 +24,7 @@
 export default {
   sectionProp: 'layout',
   maxExamplesPerPage: 50,
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       label: 'Opacity',
       onChange: () => {}

package/es/RangeInput/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { ContextView } from '@instructure/ui-view';
 import { FormField } from '@instructure/ui-form-field';
 import { addEventListener } from '@instructure/ui-dom-utils';
@@ -40,15 +40,17 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let RangeInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class RangeInput extends Component {
   constructor(props) {
-    super();
+    super(props);
     this.ref = null;
     this._input = null;
     this._inputListener = null;
     this._changeListener = null;
+    this.defaultId = void 0;
 
     this.handleRef = el => {
       this.ref = el;
@@ -96,13 +98,14 @@ let RangeInput = (_dec = withStyle(generateStyle, generateComponentTheme), _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 */
 
@@ -114,7 +117,8 @@ let RangeInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   get value() {
-    return typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
+    const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
+    return typeof value === 'string' ? parseInt(value) : value;
   }
 
   get invalid() {
@@ -137,8 +141,10 @@ let RangeInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       }, jsx("output", {
         htmlFor: this.id,
         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.formatValue(this.value, this.props.max)));
     }
+
+    return null;
   }
 
   render() {
@@ -152,6 +158,7 @@ let RangeInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     /* eslint-disable jsx-a11y/no-redundant-roles */
 
     return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
+      label: this.props.label,
       id: this.id,
       elementRef: this.handleRef
     }), jsx("div", {

package/es/RangeInput/props.js

@@ -27,40 +27,16 @@ import { FormPropTypes } from '@instructure/ui-form-field';
 const propTypes = {
   min: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
-
-  /**
-   * value to set on initial render
-   */
   defaultValue: PropTypes.number,
-
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: controllable(PropTypes.number),
-
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
   onChange: PropTypes.func,
   messages: PropTypes.arrayOf(FormPropTypes.message),
-
-  /**
-   * The size of the value label
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   layout: PropTypes.oneOf(['stacked', 'inline']),
   id: PropTypes.string,
   label: PropTypes.node.isRequired,
-
-  /**
-   * whether to display the current value
-   */
   displayValue: PropTypes.bool,
   step: PropTypes.number,
-
-  /**
-   * A function to format the displayed value
-   */
   formatValue: PropTypes.func,
   inline: PropTypes.bool,
   disabled: PropTypes.bool,

package/lib/RangeInput/RangeInputLocator.js

@@ -32,6 +32,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const RangeInputLocator = (0, _locator.locator)(_index.RangeInput.selector, {
   findInput: function () {
     return (0, _locator.locator)('input[type=range]').find(...arguments);

package/lib/RangeInput/__examples__/RangeInput.examples.js

@@ -31,7 +31,7 @@ exports.default = void 0;
 var _default = {
   sectionProp: 'layout',
   maxExamplesPerPage: 50,
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       label: 'Opacity',
       onChange: () => {}

package/lib/RangeInput/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.RangeInput = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _ContextView = require("@instructure/ui-view/lib/ContextView");
 
@@ -37,14 +39,16 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let RangeInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class RangeInput extends _react.Component {
   constructor(props) {
-    super();
+    super(props);
     this.ref = null;
     this._input = null;
     this._inputListener = null;
     this._changeListener = null;
+    this.defaultId = void 0;
 
     this.handleRef = el => {
       this.ref = el;
@@ -92,13 +96,14 @@ let RangeInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   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 */
 
@@ -110,7 +115,8 @@ let RangeInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   get value() {
-    return typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
+    const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
+    return typeof value === 'string' ? parseInt(value) : value;
   }
 
   get invalid() {
@@ -133,8 +139,10 @@ let RangeInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       }, (0, _emotion.jsx)("output", {
         htmlFor: this.id,
         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.formatValue(this.value, this.props.max)));
     }
+
+    return null;
   }
 
   render() {
@@ -148,6 +156,7 @@ let RangeInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     /* eslint-disable jsx-a11y/no-redundant-roles */
 
     return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
+      label: this.props.label,
       id: this.id,
       elementRef: this.handleRef
     }), (0, _emotion.jsx)("div", {

package/lib/RangeInput/props.js

@@ -39,40 +39,16 @@ var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
 const propTypes = {
   min: _propTypes.default.number.isRequired,
   max: _propTypes.default.number.isRequired,
-
-  /**
-   * value to set on initial render
-   */
   defaultValue: _propTypes.default.number,
-
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: (0, _controllable.controllable)(_propTypes.default.number),
-
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
   onChange: _propTypes.default.func,
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-
-  /**
-   * The size of the value label
-   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   layout: _propTypes.default.oneOf(['stacked', 'inline']),
   id: _propTypes.default.string,
   label: _propTypes.default.node.isRequired,
-
-  /**
-   * whether to display the current value
-   */
   displayValue: _propTypes.default.bool,
   step: _propTypes.default.number,
-
-  /**
-   * A function to format the displayed value
-   */
   formatValue: _propTypes.default.func,
   inline: _propTypes.default.bool,
   disabled: _propTypes.default.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-range-input",
-  "version": "8.14.0",
+  "version": "8.14.1-snapshot.7+845d7ec6c",
   "description": "A styled HTML range input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,26 +25,26 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.14.0",
-    "@instructure/emotion": "8.14.0",
-    "@instructure/shared-types": "8.14.0",
-    "@instructure/ui-color-utils": "8.14.0",
-    "@instructure/ui-dom-utils": "8.14.0",
-    "@instructure/ui-form-field": "8.14.0",
-    "@instructure/ui-i18n": "8.14.0",
-    "@instructure/ui-prop-types": "8.14.0",
-    "@instructure/ui-react-utils": "8.14.0",
-    "@instructure/ui-testable": "8.14.0",
-    "@instructure/ui-utils": "8.14.0",
-    "@instructure/ui-view": "8.14.0",
-    "@instructure/uid": "8.14.0",
+    "@instructure/console": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/emotion": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/shared-types": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-dom-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-form-field": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-i18n": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-testable": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-view": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/uid": "8.14.1-snapshot.7+845d7ec6c",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.0",
-    "@instructure/ui-test-locator": "8.14.0",
-    "@instructure/ui-test-utils": "8.14.0",
-    "@instructure/ui-themes": "8.14.0"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-test-locator": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-themes": "8.14.1-snapshot.7+845d7ec6c"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -52,5 +52,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "845d7ec6c159d8946b22caa9d8fb3d0175167a6f"
 }

package/src/RangeInput/__examples__/RangeInput.examples.ts

@@ -22,14 +22,16 @@
  * SOFTWARE.
  */
 
+import type { StoryConfig } from '@instructure/ui-test-utils'
+import type { RangeInputProps } from '../props'
+
 export default {
   sectionProp: 'layout',
   maxExamplesPerPage: 50,
-  // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
-  getComponentProps: (props) => {
+  getComponentProps: () => {
     return {
       label: 'Opacity',
       onChange: () => {}
     }
   }
-}
+} as StoryConfig<RangeInputProps>

package/src/RangeInput/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 
 import { ContextView } from '@instructure/ui-view'
 import { FormField } from '@instructure/ui-form-field'
@@ -35,17 +35,19 @@ import { omitProps, pickProps } from '@instructure/ui-react-utils'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import type { RangeInputProps } from './props'
+
+import type { RangeInputProps, RangeInputState } from './props'
 import { allowedProps, propTypes } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class RangeInput extends Component<RangeInputProps> {
+class RangeInput extends Component<RangeInputProps, RangeInputState> {
   static readonly componentId = 'RangeInput'
 
   static allowedProps = allowedProps
@@ -53,8 +55,7 @@ class RangeInput extends Component<RangeInputProps> {
 
   static defaultProps = {
     step: 1,
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'val' implicitly has an 'any' type.
-    formatValue: (val) => val,
+    formatValue: (val?: number) => val,
     max: 0,
     min: 0,
     inline: false,
@@ -66,18 +67,18 @@ class RangeInput extends Component<RangeInputProps> {
   }
 
   ref: Element | null = null
-  _input: HTMLInputElement | null = null
-  _inputListener: { remove(): void } | null = null
-  _changeListener: { remove(): void } | null = null
+
+  private _input: HTMLInputElement | null = null
+  private _inputListener: { remove(): void } | null = null
+  private _changeListener: { remove(): void } | null = null
+  private readonly defaultId: string
 
   handleRef = (el: Element | null) => {
     this.ref = el
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
-    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1-2 arguments, but got 0.
-    super()
+  constructor(props: RangeInputProps) {
+    super(props)
 
     if (typeof props.value === 'undefined') {
       this.state = {
@@ -85,7 +86,6 @@ class RangeInput extends Component<RangeInputProps> {
       }
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'defaultId' does not exist on type 'Range... Remove this comment to see the full error message
     this.defaultId = uid('RangeInput')
   }
 
@@ -112,10 +112,8 @@ class RangeInput extends Component<RangeInputProps> {
     if (!this._input) {
       return
     }
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_inputListener' does not exist on type 'R... Remove this comment to see the full error message
-    this._inputListener.remove()
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_changeListener' does not exist on type '... Remove this comment to see the full error message
-    this._changeListener.remove()
+    this._inputListener?.remove()
+    this._changeListener?.remove()
   }
   /* end workaround */
 
@@ -123,8 +121,7 @@ class RangeInput extends Component<RangeInputProps> {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleChange = (event) => {
+  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { onChange, value } = this.props
 
     if (typeof value === 'undefined') {
@@ -137,13 +134,15 @@ class RangeInput extends Component<RangeInputProps> {
   }
 
   // controlled input must have an onChange, but we're handling it with native events
-  noopChange = () => {}
+  noopChange: React.ChangeEventHandler<HTMLInputElement> = () => {}
 
   get value() {
-    return typeof this.props.value === 'undefined'
-      ? // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'Readonly<... Remove this comment to see the full error message
-        this.state.value
-      : this.props.value
+    const value =
+      typeof this.props.value === 'undefined'
+        ? this.state.value!
+        : this.props.value
+
+    return typeof value === 'string' ? parseInt(value) : value
   }
 
   get invalid() {
@@ -156,11 +155,9 @@ class RangeInput extends Component<RangeInputProps> {
   }
 
   get id() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'defaultId' does not exist on type 'Range... Remove this comment to see the full error message
     return this.props.id || this.defaultId
   }
 
-  // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
   renderValue() {
     if (this.props.displayValue) {
       return (
@@ -169,12 +166,18 @@ class RangeInput extends Component<RangeInputProps> {
             htmlFor={this.id}
             css={this.props.styles?.rangeInputInputValue}
           >
-            {/* @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message */}
-            {this.props.formatValue(this.value)}
+            {/**
+             * Value can be undefined when no value or defaultValue is given,
+             * and then it renders an empty ContextView
+             * TODO: Ask a designer what the intended behaviour is
+             */}
+            {this.props.formatValue!(this.value, this.props.max)}
           </output>
         </ContextView>
       )
     }
+
+    return null
   }
 
   render() {
@@ -184,9 +187,9 @@ class RangeInput extends Component<RangeInputProps> {
 
     /* eslint-disable jsx-a11y/no-redundant-roles */
     return (
-      // @ts-expect-error ts-migrate(2554) FIXME: no overload..
       <FormField
         {...pickProps(this.props, FormField.allowedProps)}
+        label={this.props.label}
         id={this.id}
         elementRef={this.handleRef}
       >
@@ -207,8 +210,7 @@ class RangeInput extends Component<RangeInputProps> {
             aria-valuenow={this.value}
             aria-valuemin={this.props.min}
             aria-valuemax={this.props.max}
-            // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-            aria-valuetext={formatValue(this.value, this.props.max)}
+            aria-valuetext={formatValue!(this.value, this.props.max)}
             {...props}
             disabled={disabled || readOnly}
             aria-disabled={disabled || readOnly ? 'true' : undefined}