@instructure/ui-range-input 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/lib/RangeInput/v2/index.js

@@ -1,192 +0,0 @@
-"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 _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 _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class;
-/*
- * 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.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class RangeInput extends _react.Component {
-  static displayName = "RangeInput";
-  static componentId = 'RangeInput';
-  static outputLocatorAttribute = 'data-range-output';
-  static allowedProps = _props.allowedProps;
-  static 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
-  };
-  ref = null;
-  _input = null;
-  _inputListener = null;
-  _changeListener = null;
-  defaultId;
-  handleRef = el => {
-    this.ref = el;
-  };
-  handleInputRef = el => {
-    this._input = el;
-    if (typeof this.props.inputRef === 'function') {
-      this.props.inputRef(el);
-    }
-  };
-  constructor(props) {
-    super(props);
-    if (typeof props.value === 'undefined') {
-      this.state = {
-        value: props.defaultValue
-      };
-    }
-    this.defaultId = props.deterministicId();
-  }
-
-  /* workaround for https://github.com/facebook/react/issues/554 */
-  componentDidMount() {
-    this.props.makeStyles?.();
-    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() {
-    if (!this._input) {
-      return;
-    }
-    this._inputListener?.remove();
-    this._changeListener?.remove();
-  }
-  /* end workaround */
-
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  handleChange = event => {
-    const {
-      onChange,
-      value
-    } = this.props;
-    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
-  noopChange = () => {};
-  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) {
-      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)(_latest.ContextView, {
-        background: "inverse",
-        placement: "end center",
-        children: (0, _jsxRuntime.jsx)("div", {
-          ...props,
-          css: this.props.styles?.rangeInputInputValue,
-          children: this.props.formatValue(this.value, this.props.max)
-        })
-      });
-    }
-    return null;
-  }
-  render() {
-    const {
-      formatValue,
-      disabled,
-      readOnly
-    } = this.props;
-    const props = (0, _omitProps.omitProps)(this.props, RangeInput.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,
-      "data-cid": "RangeInput",
-      children: (0, _jsxRuntime.jsxs)("div", {
-        css: this.props.styles?.rangeInput,
-        children: [(0, _jsxRuntime.jsx)("input", {
-          css: this.props.styles?.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' : undefined
-        }), this.renderValue()]
-      })
-    });
-  }
-}) || _class) || _class);
-var _default = exports.default = RangeInput;

package/lib/RangeInput/v2/styles.js

@@ -1,153 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _uiThemes = require("@instructure/ui-themes");
-/*
- * 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.
- */
-
-/**
- * ---
- * 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;
-  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 thumbStyle = {
-    appearance: 'none',
-    borderRadius: '50%',
-    cursor: 'pointer',
-    transition: 'all 0.15s ease-in-out',
-    background: componentTheme.handleBackground,
-    width: borderedHandleSize,
-    height: borderedHandleSize,
-    borderWidth: componentTheme.handleBorderSize,
-    borderColor: componentTheme.handleBorderColor,
-    borderStyle: 'solid',
-    boxSizing: 'border-box',
-    boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.boxShadow),
-    '&:hover': {
-      background: componentTheme.handleHoverBackground
-    }
-  };
-
-  // Center the thumb vertically on the track by accounting for the track borders
-  const thumbPosition = {
-    marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
-  };
-  const thumbFocusActiveStyle = {
-    background: componentTheme.handleFocusBackground,
-    boxShadow: `${(0, _uiThemes.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
-      },
-      '&::-moz-range-thumb': thumbStyle,
-      '&:focus, &:active': {
-        outline: 'none',
-        '&::-webkit-slider-thumb': thumbFocusActiveStyle,
-        '&::-moz-range-thumb': thumbFocusActiveStyle
-      },
-      // 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]
-    }
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/exports/a.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "RangeInput", {
-  enumerable: true,
-  get: function () {
-    return _v.RangeInput;
-  }
-});
-var _v = require("../RangeInput/v1");

package/lib/exports/b.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "RangeInput", {
-  enumerable: true,
-  get: function () {
-    return _v.RangeInput;
-  }
-});
-var _v = require("../RangeInput/v2");

package/lib/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}