@instructure/ui-range-input 11.6.0 → 11.6.1-snapshot-129

package/es/RangeInput/v2/index.js

@@ -0,0 +1,183 @@
+var _dec, _dec2, _class, _RangeInput;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+import { Component } from 'react';
+import { warn } from '@instructure/console';
+import { ContextView } from '@instructure/ui-view/latest';
+import { FormField } from '@instructure/ui-form-field/latest';
+import { addEventListener } from '@instructure/ui-dom-utils';
+import { withStyle } from '@instructure/emotion';
+import { omitProps, pickProps, withDeterministicId } from '@instructure/ui-react-utils';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_RangeInput = class RangeInput extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._input = null;
+    this._inputListener = null;
+    this._changeListener = null;
+    this.defaultId = void 0;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleInputRef = el => {
+      this._input = el;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(el);
+      }
+    };
+    this.handleChange = event => {
+      const _this$props = this.props,
+        onChange = _this$props.onChange,
+        value = _this$props.value;
+      if (typeof value === 'undefined') {
+        this.setState({
+          value: event.target.value
+        });
+      }
+      if (typeof onChange === 'function') {
+        onChange(event.target.value);
+      }
+    };
+    // controlled input must have an onChange, but we're handling it with native events
+    this.noopChange = () => {};
+    if (typeof props.value === 'undefined') {
+      this.state = {
+        value: props.defaultValue
+      };
+    }
+    this.defaultId = props.deterministicId();
+  }
+
+  /* workaround for https://github.com/facebook/react/issues/554 */
+  componentDidMount() {
+    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
+      this._inputListener = addEventListener(this._input, 'input', this.handleChange);
+      this._changeListener = addEventListener(this._input, 'change', this.handleChange);
+    }
+  }
+  componentWillUnmount() {
+    var _this$_inputListener, _this$_changeListener;
+    if (!this._input) {
+      return;
+    }
+    (_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() {
+    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() {
+    const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
+    return typeof value === 'string' ? parseInt(value) : value;
+  }
+  get id() {
+    return this.props.id || this.defaultId;
+  }
+  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;
+      }
+      const props = {
+        [RangeInput.outputLocatorAttribute]: this.id
+      };
+      return _jsx(ContextView, {
+        background: "inverse",
+        placement: "end center",
+        children: _jsx("div", {
+          ...props,
+          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue,
+          children: this.props.formatValue(this.value, this.props.max)
+        })
+      });
+    }
+    return null;
+  }
+  render() {
+    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);
+    return _jsx(FormField, {
+      ...pickProps(this.props, FormField.allowedProps),
+      label: this.props.label,
+      id: this.id,
+      elementRef: this.handleRef,
+      "data-cid": "RangeInput",
+      children: _jsxs("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput,
+        children: [_jsx("input", {
+          css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
+          ref: this.handleInputRef,
+          type: "range",
+          id: this.id,
+          min: this.props.min,
+          max: this.props.max,
+          step: this.props.step,
+          value: this.value,
+          onChange: this.noopChange,
+          "aria-valuetext": formatValue(this.value, this.props.max),
+          ...props,
+          disabled: disabled || readOnly,
+          "aria-disabled": disabled || readOnly ? 'true' : void 0
+        }), this.renderValue()]
+      })
+    });
+  }
+}, _RangeInput.displayName = "RangeInput", _RangeInput.componentId = 'RangeInput', _RangeInput.outputLocatorAttribute = 'data-range-output', _RangeInput.allowedProps = allowedProps, _RangeInput.defaultProps = {
+  step: 1,
+  formatValue: val => val,
+  // If min and max has default value, they don't give a warning if not set, even if they are required props.
+  // TODO: figure out if they don't need to be required or remove defaults in V9.
+  max: 0,
+  min: 0,
+  inline: false,
+  size: 'medium',
+  layout: 'stacked',
+  displayValue: true,
+  disabled: false,
+  readOnly: false,
+  thumbVariant: 'deprecated'
+}, _RangeInput)) || _class) || _class);
+export default RangeInput;
+export { RangeInput };

package/es/RangeInput/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+const allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly', 'thumbVariant', 'inputRef'];
+export { allowedProps };

package/es/RangeInput/v2/styles.js

@@ -0,0 +1,169 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+import { darken, alpha } from '@instructure/ui-color-utils';
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  const size = props.size,
+    thumbVariant = props.thumbVariant;
+  const valueSizeVariants = {
+    small: {
+      fontSize: componentTheme.valueSmallFontSize,
+      paddingInline: componentTheme.valueSmallPadding,
+      lineHeight: componentTheme.valueSmallLineHeight
+    },
+    medium: {
+      fontSize: componentTheme.valueMediumFontSize,
+      paddingInline: componentTheme.valueMediumPadding,
+      lineHeight: componentTheme.valueMediumLineHeight
+    },
+    large: {
+      fontSize: componentTheme.valueLargeFontSize,
+      paddingInline: componentTheme.valueLargePadding,
+      lineHeight: componentTheme.valueLargeLineHeight
+    }
+  };
+  const trackBorderWidth = '1px';
+  const trackStyle = {
+    borderRadius: '0.312em',
+    borderWidth: trackBorderWidth,
+    borderStyle: 'solid',
+    borderColor: componentTheme.trackBorderColor,
+    color: 'transparent',
+    cursor: 'pointer',
+    background: componentTheme.trackBackground,
+    height: `calc(${componentTheme.handleSize} / 2)`
+  };
+  const borderedHandleSize = `calc(${componentTheme.handleSize} + (${componentTheme.handleBorderSize} * 2))`;
+  const thumbVariantStyle = {
+    deprecated: {
+      width: componentTheme.handleSize,
+      height: componentTheme.handleSize,
+      boxShadow: `0 0.0625rem 0 ${darken(componentTheme.handleShadowColor)}`
+    },
+    accessible: {
+      width: borderedHandleSize,
+      height: borderedHandleSize,
+      borderWidth: componentTheme.handleBorderSize,
+      borderColor: componentTheme.handleBorderColor,
+      borderStyle: 'solid',
+      boxSizing: 'border-box',
+      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow)
+    }
+  };
+  const thumbStyle = {
+    appearance: 'none',
+    borderRadius: '50%',
+    cursor: 'pointer',
+    transition: 'all 0.15s ease-in-out',
+    background: componentTheme.handleBackground,
+    ...thumbVariantStyle[thumbVariant],
+    '&:hover': {
+      background: componentTheme.handleHoverBackground
+    }
+  };
+
+  // Center the thumb vertically on the track by accounting for the track borders
+  const thumbPosition = {
+    deprecated: {
+      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4 - ${trackBorderWidth})`
+    },
+    accessible: {
+      marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
+    }
+  };
+  const thumbFocusActiveStyle = {
+    deprecated: {
+      background: componentTheme.handleFocusBackground,
+      boxShadow: `0 0.0625rem 0 ${darken(componentTheme.handleShadowColor)}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${alpha(componentTheme.handleFocusOutlineColor, 40)}`
+    },
+    accessible: {
+      background: componentTheme.handleFocusBackground,
+      boxShadow: `${boxShadowObjectsToCSSString(componentTheme.boxShadow)}, ` + `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` + `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${sharedTokens.focusOutline.width}) ${sharedTokens.focusOutline.onColor}`
+    }
+  };
+  return {
+    rangeInput: {
+      label: 'rangeInput',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      minWidth: componentTheme.minWidth
+    },
+    rangeInputInput: {
+      label: 'rangeInput__input',
+      all: 'initial',
+      flex: 'auto',
+      boxSizing: 'border-box',
+      appearance: 'none',
+      width: '100%',
+      // for Firefox
+      outline: 'none',
+      margin: 0,
+      '&::-webkit-slider-thumb': {
+        ...thumbStyle,
+        ...thumbPosition[thumbVariant]
+      },
+      '&::-moz-range-thumb': thumbStyle,
+      '&:focus, &:active': {
+        outline: 'none',
+        '&::-webkit-slider-thumb': thumbFocusActiveStyle[thumbVariant],
+        '&::-moz-range-thumb': thumbFocusActiveStyle[thumbVariant]
+      },
+      // remove outline in FF
+      '&::-moz-focus-inner, &::-moz-focus-outer': {
+        border: 0,
+        outline: 'none'
+      },
+      '&::-webkit-slider-runnable-track': trackStyle,
+      '&::-moz-range-track': trackStyle,
+      '[dir="rtl"] &': {
+        direction: 'rtl'
+      }
+    },
+    rangeInputInputValue: {
+      label: 'rangeInput__value',
+      all: 'initial',
+      boxSizing: 'border-box',
+      display: 'block',
+      color: 'inherit',
+      fontFamily: componentTheme.valueFontFamily,
+      fontWeight: componentTheme.valueFontWeight,
+      textAlign: 'center',
+      ...valueSizeVariants[size]
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { RangeInput } from "./RangeInput/index.js";
+export { RangeInput } from "../RangeInput/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,6 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export { RangeInput } from './RangeInput'
-export type { RangeInputProps } from './RangeInput/props'
+export { RangeInput } from "../RangeInput/v2/index.js";

package/lib/RangeInput/v1/index.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RangeInput = void 0;
+var _react = require("react");
+var _console = require("@instructure/console");
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _v11_2 = require("@instructure/ui-form-field/v11_6");
+var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
+var _emotion = require("@instructure/emotion");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _dec2, _class, _RangeInput;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+/**
+---
+category: components
+---
+**/
+let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_RangeInput = class RangeInput extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._input = null;
+    this._inputListener = null;
+    this._changeListener = null;
+    this.defaultId = void 0;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleInputRef = el => {
+      this._input = el;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(el);
+      }
+    };
+    this.handleChange = event => {
+      const _this$props = this.props,
+        onChange = _this$props.onChange,
+        value = _this$props.value;
+      if (typeof value === 'undefined') {
+        this.setState({
+          value: event.target.value
+        });
+      }
+      if (typeof onChange === 'function') {
+        onChange(event.target.value);
+      }
+    };
+    // controlled input must have an onChange, but we're handling it with native events
+    this.noopChange = () => {};
+    if (typeof props.value === 'undefined') {
+      this.state = {
+        value: props.defaultValue
+      };
+    }
+    this.defaultId = props.deterministicId();
+  }
+
+  /* workaround for https://github.com/facebook/react/issues/554 */
+  componentDidMount() {
+    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
+      this._inputListener = (0, _addEventListener.addEventListener)(this._input, 'input', this.handleChange);
+      this._changeListener = (0, _addEventListener.addEventListener)(this._input, 'change', this.handleChange);
+    }
+  }
+  componentWillUnmount() {
+    var _this$_inputListener, _this$_changeListener;
+    if (!this._input) {
+      return;
+    }
+    (_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() {
+    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() {
+    const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
+    return typeof value === 'string' ? parseInt(value) : value;
+  }
+  get id() {
+    return this.props.id || this.defaultId;
+  }
+  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;
+      }
+      const props = {
+        [RangeInput.outputLocatorAttribute]: this.id
+      };
+      return (0, _jsxRuntime.jsx)(_v11_.ContextView, {
+        background: "inverse",
+        placement: "end center",
+        children: (0, _jsxRuntime.jsx)("div", {
+          ...props,
+          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rangeInputInputValue,
+          children: this.props.formatValue(this.value, this.props.max)
+        })
+      });
+    }
+    return null;
+  }
+  render() {
+    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);
+    return (0, _jsxRuntime.jsx)(_v11_2.FormField, {
+      ...(0, _pickProps.pickProps)(this.props, _v11_2.FormField.allowedProps),
+      label: this.props.label,
+      id: this.id,
+      elementRef: this.handleRef,
+      "data-cid": "RangeInput",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.rangeInput,
+        children: [(0, _jsxRuntime.jsx)("input", {
+          css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.rangeInputInput,
+          ref: this.handleInputRef,
+          type: "range",
+          id: this.id,
+          min: this.props.min,
+          max: this.props.max,
+          step: this.props.step,
+          value: this.value,
+          onChange: this.noopChange,
+          "aria-valuetext": formatValue(this.value, this.props.max),
+          ...props,
+          disabled: disabled || readOnly,
+          "aria-disabled": disabled || readOnly ? 'true' : void 0
+        }), this.renderValue()]
+      })
+    });
+  }
+}, _RangeInput.displayName = "RangeInput", _RangeInput.componentId = 'RangeInput', _RangeInput.outputLocatorAttribute = 'data-range-output', _RangeInput.allowedProps = _props.allowedProps, _RangeInput.defaultProps = {
+  step: 1,
+  formatValue: val => val,
+  // If min and max has default value, they don't give a warning if not set, even if they are required props.
+  // TODO: figure out if they don't need to be required or remove defaults in V9.
+  max: 0,
+  min: 0,
+  inline: false,
+  size: 'medium',
+  layout: 'stacked',
+  displayValue: true,
+  disabled: false,
+  readOnly: false,
+  thumbVariant: 'deprecated'
+}, _RangeInput)) || _class) || _class);
+var _default = exports.default = RangeInput;

package/lib/RangeInput/{index.js → v2/index.js}

@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.RangeInput = void 0;
 var _react = require("react");
 var _console = require("@instructure/console");
-var _ContextView = require("@instructure/ui-view/lib/ContextView");
-var _FormField = require("@instructure/ui-form-field/lib/FormField");
+var _latest = require("@instructure/ui-view/latest");
+var _latest2 = require("@instructure/ui-form-field/latest");
 var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
 var _emotion = require("@instructure/emotion");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class, _RangeInput;
@@ -47,7 +46,7 @@ var _dec, _dec2, _class, _RangeInput;
 category: components
 ---
 **/
-let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_RangeInput = class RangeInput extends _react.Component {
+let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_RangeInput = class RangeInput extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -128,7 +127,7 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
       const props = {
         [RangeInput.outputLocatorAttribute]: this.id
       };
-      return (0, _jsxRuntime.jsx)(_ContextView.ContextView, {
+      return (0, _jsxRuntime.jsx)(_latest.ContextView, {
         background: "inverse",
         placement: "end center",
         children: (0, _jsxRuntime.jsx)("div", {
@@ -147,8 +146,8 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
       disabled = _this$props4.disabled,
       readOnly = _this$props4.readOnly;
     const props = (0, _omitProps.omitProps)(this.props, RangeInput.allowedProps);
-    return (0, _jsxRuntime.jsx)(_FormField.FormField, {
-      ...(0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps),
+    return (0, _jsxRuntime.jsx)(_latest2.FormField, {
+      ...(0, _pickProps.pickProps)(this.props, _latest2.FormField.allowedProps),
       label: this.props.label,
       id: this.id,
       elementRef: this.handleRef,

package/lib/RangeInput/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+const allowedProps = exports.allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly', 'thumbVariant', 'inputRef'];