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

package/src/RangeInput/v2/props.ts

@@ -0,0 +1,149 @@
+/*
+ * 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 React from 'react'
+
+import type {
+  OtherHTMLAttributes,
+  RangeInputTheme,
+  PickPropsWithExceptions
+} from '@instructure/shared-types'
+import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field/latest'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { InputHTMLAttributes } from 'react'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+
+type RangeInputOwnProps = {
+  min: number
+
+  max: number
+
+  /**
+   * value to set on initial render
+   */
+  defaultValue?: number
+
+  /**
+   * the selected value (must be accompanied by an `onChange` prop)
+   */
+  value?: number // TODO: controllable(PropTypes.number)
+
+  /**
+   * when used with the `value` prop, the component will not control its own state
+   */
+  onChange?: (value: number | string) => void
+
+  messages?: FormMessage[]
+
+  /**
+   * The size of the value label
+   */
+  size?: 'small' | 'medium' | 'large'
+
+  layout?: 'stacked' | 'inline'
+
+  id?: string
+
+  label: React.ReactNode
+
+  /**
+   * whether to display the current value
+   */
+  displayValue?: boolean
+
+  step?: number
+
+  /**
+   * A function to format the displayed value
+   */
+  formatValue?: (value?: number, max?: number) => string
+
+  inline?: boolean
+
+  disabled?: boolean
+
+  readOnly?: boolean
+
+  /**
+   * The "deprecated" variant has an outer shadow on focus.
+   * The "accessible" variant has better color contrast, border and inset focus ring for better accessibility.
+   */
+  thumbVariant?:
+    | 'deprecated' // TODO: deprecated, remove in V9.
+    | 'accessible'
+
+  /**
+   * A function that provides a reference to the actual underlying input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
+}
+
+type PropKeys = keyof RangeInputOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type RangeInputProps =
+  // pickProps passes through FormField.allowedProps, except the ones set manually
+  PickPropsWithExceptions<
+    FormFieldOwnProps,
+    'label' | 'inline' | 'id' | 'elementRef'
+  > &
+    RangeInputOwnProps &
+    WithStyleProps<RangeInputTheme, RangeInputStyle> &
+    OtherHTMLAttributes<
+      RangeInputOwnProps,
+      InputHTMLAttributes<RangeInputOwnProps & Element>
+    > &
+    WithDeterministicIdProps
+
+type RangeInputStyle = ComponentStyle<
+  'rangeInput' | 'rangeInputInput' | 'rangeInputInputValue'
+>
+
+type RangeInputState = {
+  value?: number | string
+}
+const allowedProps: AllowedPropKeys = [
+  'min',
+  'max',
+  'defaultValue',
+  'value',
+  'onChange',
+  'messages',
+  'size',
+  'layout',
+  'id',
+  'label',
+  'displayValue',
+  'step',
+  'formatValue',
+  'inline',
+  'disabled',
+  'readOnly',
+  'thumbVariant',
+  'inputRef'
+]
+
+export type { RangeInputProps, RangeInputState, RangeInputStyle }
+export { allowedProps }

package/src/RangeInput/v2/styles.ts

@@ -0,0 +1,191 @@
+/*
+ * 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 type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { RangeInputProps, RangeInputStyle } from './props'
+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: NewComponentTypes['RangeInput'],
+  props: RangeInputProps,
+  sharedTokens: SharedTokens
+): RangeInputStyle => {
+  const { size, thumbVariant } = 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 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/src/exports/a.ts

@@ -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.
+ */
+
+export { RangeInput } from '../RangeInput/v1'
+export type { RangeInputProps } from '../RangeInput/v1/props'

package/src/exports/b.ts

@@ -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.
+ */
+
+export { RangeInput } from '../RangeInput/v2'
+export type { RangeInputProps } from '../RangeInput/v2/props'