@instructure/ui-range-input 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/es/RangeInput/v2/index.js

@@ -1,28 +1,5 @@
-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.
- */
-
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Component } from 'react';
 import { warn } from '@instructure/console';
 import { ContextView } from '@instructure/ui-view/latest';
@@ -32,165 +9,150 @@ import { withStyleNew } 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 = withStyleNew(generateStyle), _dec(_class = _dec2(_class = class RangeInput extends Component {
-  static displayName = 'RangeInput';
-  static componentId = 'RangeInput';
-  static outputLocatorAttribute = 'data-range-output';
-  static allowedProps = 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);
+class RangeInput extends Component {
+    static{
+        this.displayName = 'RangeInput';
+    }
+    static{
+        this.componentId = 'RangeInput';
+    }
+    static{
+        this.outputLocatorAttribute = 'data-range-output';
     }
-  };
-  constructor(props) {
-    super(props);
-    if (typeof props.value === 'undefined') {
-      this.state = {
-        value: props.defaultValue
-      };
+    static{
+        this.allowedProps = allowedProps;
     }
-    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 = addEventListener(this._input, 'input', this.handleChange);
-      this._changeListener = addEventListener(this._input, 'change', this.handleChange);
+    static{
+        this.defaultProps = {
+            step: 1,
+            formatValue: (val)=>val,
+            max: 0,
+            min: 0,
+            inline: false,
+            size: 'medium',
+            layout: 'stacked',
+            displayValue: true,
+            disabled: false,
+            readOnly: false
+        };
     }
-  }
-  componentWillUnmount() {
-    if (!this._input) {
-      return;
+    constructor(props){
+        super(props), this.ref = null, this._input = null, this._inputListener = null, this._changeListener = null, 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 { onChange, value } = this.props;
+            if (typeof value === 'undefined') {
+                this.setState({
+                    value: event.target.value
+                });
+            }
+            if (typeof onChange === 'function') {
+                onChange(event.target.value);
+            }
+        }, this.noopChange = ()=>{};
+        if (typeof props.value === 'undefined') {
+            this.state = {
+                value: props.defaultValue
+            };
+        }
+        this.defaultId = props.deterministicId();
     }
-    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
-      });
+    componentDidMount() {
+        this.props.makeStyles?.();
+        if (this._input !== null) {
+            this._inputListener = addEventListener(this._input, 'input', this.handleChange);
+            this._changeListener = addEventListener(this._input, 'change', this.handleChange);
+        }
     }
-    if (typeof onChange === 'function') {
-      onChange(event.target.value);
+    componentWillUnmount() {
+        if (!this._input) {
+            return;
+        }
+        this._inputListener?.remove();
+        this._changeListener?.remove();
     }
-  };
-
-  // 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) {
-        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}`.');
+    componentDidUpdate() {
+        this.props.makeStyles?.();
+    }
+    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) {
+                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 /*#__PURE__*/ _jsx(ContextView, {
+                background: "inverse",
+                placement: "end center",
+                children: /*#__PURE__*/ _jsx("div", {
+                    ...props,
+                    css: this.props.styles?.rangeInputInputValue,
+                    children: this.props.formatValue(this.value, this.props.max)
+                })
+            });
+        }
         return null;
-      }
-      const props = {
-        [RangeInput.outputLocatorAttribute]: this.id
-      };
-      return _jsx(ContextView, {
-        background: "inverse",
-        placement: "end center",
-        children: _jsx("div", {
-          ...props,
-          css: this.props.styles?.rangeInputInputValue,
-          children: this.props.formatValue(this.value, this.props.max)
-        })
-      });
     }
-    return null;
-  }
-  render() {
-    const {
-      formatValue,
-      disabled,
-      readOnly,
-      messages
-    } = this.props;
-    const props = omitProps(this.props, RangeInput.allowedProps);
-    const hasMessages = !!messages?.some(m => !!m.text);
-    const messagesId = `${this.id}-messages`;
-    const labelId = `${this.id}-label`;
-    return _jsx(FormField, {
-      ...pickProps(this.props, FormField.allowedProps),
-      label: this.props.label,
-      messagesId: messagesId,
-      labelId: labelId,
-      id: this.id,
-      elementRef: this.handleRef,
-      "data-cid": "RangeInput",
-      children: _jsxs("div", {
-        css: this.props.styles?.rangeInput,
-        children: [_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
-          // Keep messages in the description so the accessible name contains only the label.
-          ,
-          "aria-describedby": [props['aria-describedby'], hasMessages ? messagesId : null].filter(Boolean).join(' ') || undefined,
-          "aria-labelledby": hasMessages ? props['aria-labelledby'] || labelId : props['aria-labelledby']
-        }), this.renderValue()]
-      })
-    });
-  }
-}) || _class) || _class);
+    render() {
+        const { formatValue, disabled, readOnly, messages } = this.props;
+        const props = omitProps(this.props, RangeInput.allowedProps);
+        const hasMessages = !!messages?.some((m)=>!!m.text);
+        const messagesId = `${this.id}-messages`;
+        const labelId = `${this.id}-label`;
+        return /*#__PURE__*/ _jsx(FormField, {
+            ...pickProps(this.props, FormField.allowedProps),
+            label: this.props.label,
+            messagesId: messagesId,
+            labelId: labelId,
+            id: this.id,
+            elementRef: this.handleRef,
+            "data-cid": "RangeInput",
+            children: /*#__PURE__*/ _jsxs("div", {
+                css: this.props.styles?.rangeInput,
+                children: [
+                    /*#__PURE__*/ _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,
+                        "aria-describedby": [
+                            props['aria-describedby'],
+                            hasMessages ? messagesId : null
+                        ].filter(Boolean).join(' ') || undefined,
+                        "aria-labelledby": hasMessages ? props['aria-labelledby'] || labelId : props['aria-labelledby']
+                    }),
+                    this.renderValue()
+                ]
+            })
+        });
+    }
+}
+RangeInput = _ts_decorate([
+    withDeterministicId(),
+    withStyleNew(generateStyle)
+], RangeInput);
 export default RangeInput;
-export { RangeInput };
+export { RangeInput };

package/es/RangeInput/v2/props.js

@@ -1,26 +1,21 @@
-/*
- * 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', 'margin', 'inputRef'];
-export { allowedProps };
+const allowedProps = [
+    'min',
+    'max',
+    'defaultValue',
+    'value',
+    'onChange',
+    'messages',
+    'size',
+    'layout',
+    'id',
+    'label',
+    'displayValue',
+    'step',
+    'formatValue',
+    'inline',
+    'disabled',
+    'readOnly',
+    'margin',
+    'inputRef'
+];
+export { allowedProps };

package/es/RangeInput/v2/styles.js

@@ -1,148 +1,107 @@
-/*
- * 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 { 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;
-  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: 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: `${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]
-    }
-  };
+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: boxShadowObjectsToCSSString(componentTheme.boxShadow),
+        '&:hover': {
+            background: componentTheme.handleHoverBackground
+        }
+    };
+    const thumbPosition = {
+        marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
+    };
+    const thumbFocusActiveStyle = {
+        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%',
+            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
+            },
+            '&::-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;
+export default generateStyle;