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

package/lib/RangeInput/v2/styles.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _darken = require("@instructure/ui-color-utils/lib/darken.js");
+var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
+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.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 ${(0, _darken.darken)(componentTheme.handleShadowColor)}`
+    },
+    accessible: {
+      width: borderedHandleSize,
+      height: borderedHandleSize,
+      borderWidth: componentTheme.handleBorderSize,
+      borderColor: componentTheme.handleBorderColor,
+      borderStyle: 'solid',
+      boxSizing: 'border-box',
+      boxShadow: (0, _uiThemes.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 ${(0, _darken.darken)(componentTheme.handleShadowColor)}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${(0, _alpha.alpha)(componentTheme.handleFocusOutlineColor, 40)}`
+    },
+    accessible: {
+      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[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]
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "RangeInput", {
   enumerable: true,
   get: function () {
-    return _RangeInput.RangeInput;
+    return _v.RangeInput;
   }
 });
-var _RangeInput = require("./RangeInput");
+var _v = require("../RangeInput/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-range-input",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A styled HTML range input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-form-field": "11.6.0",
-    "@instructure/ui-i18n": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/uid": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-form-field": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-i18n": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -43,17 +43,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/RangeInput/{index.tsx → v1/index.tsx}

@@ -25,10 +25,10 @@
 import { Component } from 'react'
 
 import { warn } from '@instructure/console'
-import { ContextView } from '@instructure/ui-view'
-import { FormField } from '@instructure/ui-form-field'
+import { ContextView } from '@instructure/ui-view/v11_6'
+import { FormField } from '@instructure/ui-form-field/v11_6'
 import { addEventListener } from '@instructure/ui-dom-utils'
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 import {
   omitProps,
   pickProps,

package/src/RangeInput/{props.ts → v1/props.ts}

@@ -29,7 +29,7 @@ import type {
   RangeInputTheme,
   PickPropsWithExceptions
 } from '@instructure/shared-types'
-import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field'
+import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field/v11_6'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { InputHTMLAttributes } from 'react'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'

package/src/RangeInput/v2/README.md

@@ -0,0 +1,73 @@
+---
+describes: RangeInput
+---
+
+An html5 range input/slider component.
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [size, setSize] = useState('small')
+  const [thumbVariant, setThumbVariant] = useState('accessible')
+
+  const handleSizeChange = (event, value) => {
+    setSize(value)
+  }
+
+  const handleThumbVariantChange = (event, value) => {
+    setThumbVariant(value)
+  }
+
+  return (
+    <div>
+      <View as="div" padding="medium" background="primary">
+        <RangeInput
+          label="Grading range"
+          defaultValue={30}
+          max={100}
+          min={0}
+          size={size}
+          thumbVariant={thumbVariant}
+        />
+      </View>
+
+      <View as="div" margin="medium 0 0">
+        <FormFieldGroup
+          description={
+            <ScreenReaderContent>
+              RangeInput Example Settings
+            </ScreenReaderContent>
+          }
+          layout="columns"
+          vAlign="top"
+        >
+          <RadioInputGroup
+            onChange={handleSizeChange}
+            name="labelSize"
+            value={size}
+            description="Label size"
+          >
+            <RadioInput label="small" value="small" />
+            <RadioInput label="medium" value="medium" />
+            <RadioInput label="large" value="large" />
+          </RadioInputGroup>
+
+          <RadioInputGroup
+            onChange={handleThumbVariantChange}
+            name="thumbVariant"
+            value={thumbVariant}
+            description="Thumb variant"
+          >
+            <RadioInput label="accessible" value="accessible" />
+            <RadioInput label="deprecated" value="deprecated" />
+          </RadioInputGroup>
+        </FormFieldGroup>
+      </View>
+    </div>
+  )
+}
+
+render(<Example />)
+```

package/src/RangeInput/v2/index.tsx

@@ -0,0 +1,223 @@
+/*
+ * 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'
+
+import type { RangeInputProps, RangeInputState } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+@withDeterministicId()
+@withStyle(generateStyle)
+class RangeInput extends Component<RangeInputProps, RangeInputState> {
+  static readonly componentId = 'RangeInput'
+  static outputLocatorAttribute = 'data-range-output'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    step: 1,
+    formatValue: (val?: number) => 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'
+  }
+
+  ref: Element | 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
+  }
+
+  handleInputRef = (el: HTMLInputElement | null) => {
+    this._input = el
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el)
+    }
+  }
+
+  constructor(props: RangeInputProps) {
+    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 = addEventListener(
+        this._input,
+        'input',
+        this.handleChange
+      )
+      this._changeListener = 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: React.ChangeEvent<HTMLInputElement>) => {
+    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: React.ChangeEventHandler<HTMLInputElement> = () => {}
+
+  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 (
+        <ContextView background="inverse" placement="end center">
+          <div {...props} css={this.props.styles?.rangeInputInputValue}>
+            {this.props.formatValue!(this.value, this.props.max)}
+          </div>
+        </ContextView>
+      )
+    }
+
+    return null
+  }
+
+  render() {
+    const { formatValue, disabled, readOnly } = this.props
+
+    const props = omitProps(this.props, RangeInput.allowedProps)
+
+    return (
+      <FormField
+        {...pickProps(this.props, FormField.allowedProps)}
+        label={this.props.label}
+        id={this.id}
+        elementRef={this.handleRef}
+        data-cid="RangeInput"
+      >
+        <div css={this.props.styles?.rangeInput}>
+          <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()}
+        </div>
+      </FormField>
+    )
+  }
+}
+
+export default RangeInput
+export { RangeInput }