@react-spectrum/slider 3.8.4 → 3.9.0

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"mappings":";;;AEsBA;;GAEG;AACH,OAAO,MAAM,qIA6FX,CAAC;AC/FH;;GAEG;AACH,OAAO,MAAM,+IAoEX,CAAC;AC9EH,YAAY,EAAC,wBAAwB,EAAE,mBAAmB,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-spectrum/slider/src/packages/@react-spectrum/slider/src/SliderBase.tsx","packages/@react-spectrum/slider/src/packages/@react-spectrum/slider/src/SliderThumb.tsx","packages/@react-spectrum/slider/src/packages/@react-spectrum/slider/src/Slider.tsx","packages/@react-spectrum/slider/src/packages/@react-spectrum/slider/src/RangeSlider.tsx","packages/@react-spectrum/slider/src/packages/@react-spectrum/slider/src/index.ts","packages/@react-spectrum/slider/src/index.ts"],"sourcesContent":[null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Slider} from './Slider';\nexport {RangeSlider} from './RangeSlider';\nexport type {SpectrumRangeSliderProps, SpectrumSliderProps} from '@react-types/slider';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/uk-UA.main.js

@@ -1,7 +0,0 @@
-module.exports = {
-    "maximum": `\u{41C}\u{430}\u{43A}\u{441}\u{438}\u{43C}\u{443}\u{43C}`,
-    "minimum": `\u{41C}\u{456}\u{43D}\u{456}\u{43C}\u{443}\u{43C}`
-};
-
-
-//# sourceMappingURL=uk-UA.main.js.map

package/dist/uk-UA.main.js.map

@@ -1 +0,0 @@
-{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wDAAQ,CAAC;IACvC,WAAW,CAAC,iDAAO,CAAC;AACtB","sources":["packages/@react-spectrum/slider/intl/uk-UA.json"],"sourcesContent":["{\n  \"maximum\": \"Максимум\",\n  \"minimum\": \"Мінімум\"\n}\n"],"names":[],"version":3,"file":"uk-UA.main.js.map"}

package/dist/uk-UA.mjs

@@ -1,9 +0,0 @@
-var $3108f34a285e911e$exports = {};
-$3108f34a285e911e$exports = {
-    "maximum": `\u{41C}\u{430}\u{43A}\u{441}\u{438}\u{43C}\u{443}\u{43C}`,
-    "minimum": `\u{41C}\u{456}\u{43D}\u{456}\u{43C}\u{443}\u{43C}`
-};
-
-
-export {$3108f34a285e911e$exports as default};
-//# sourceMappingURL=uk-UA.module.js.map

package/dist/uk-UA.module.js

@@ -1,9 +0,0 @@
-var $3108f34a285e911e$exports = {};
-$3108f34a285e911e$exports = {
-    "maximum": `\u{41C}\u{430}\u{43A}\u{441}\u{438}\u{43C}\u{443}\u{43C}`,
-    "minimum": `\u{41C}\u{456}\u{43D}\u{456}\u{43C}\u{443}\u{43C}`
-};
-
-
-export {$3108f34a285e911e$exports as default};
-//# sourceMappingURL=uk-UA.module.js.map

package/dist/uk-UA.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wDAAQ,CAAC;IACvC,WAAW,CAAC,iDAAO,CAAC;AACtB","sources":["packages/@react-spectrum/slider/intl/uk-UA.json"],"sourcesContent":["{\n  \"maximum\": \"Максимум\",\n  \"minimum\": \"Мінімум\"\n}\n"],"names":[],"version":3,"file":"uk-UA.module.js.map"}

package/dist/zh-CN.main.js

@@ -1,7 +0,0 @@
-module.exports = {
-    "maximum": `\u{6700}\u{5927}`,
-    "minimum": `\u{6700}\u{5C0F}`
-};
-
-
-//# sourceMappingURL=zh-CN.main.js.map

package/dist/zh-CN.main.js.map

@@ -1 +0,0 @@
-{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,gBAAE,CAAC;IACjC,WAAW,CAAC,gBAAE,CAAC;AACjB","sources":["packages/@react-spectrum/slider/intl/zh-CN.json"],"sourcesContent":["{\n  \"maximum\": \"最大\",\n  \"minimum\": \"最小\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -1,9 +0,0 @@
-var $404def46e9659a20$exports = {};
-$404def46e9659a20$exports = {
-    "maximum": `\u{6700}\u{5927}`,
-    "minimum": `\u{6700}\u{5C0F}`
-};
-
-
-export {$404def46e9659a20$exports as default};
-//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js

@@ -1,9 +0,0 @@
-var $404def46e9659a20$exports = {};
-$404def46e9659a20$exports = {
-    "maximum": `\u{6700}\u{5927}`,
-    "minimum": `\u{6700}\u{5C0F}`
-};
-
-
-export {$404def46e9659a20$exports as default};
-//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,gBAAE,CAAC;IACjC,WAAW,CAAC,gBAAE,CAAC;AACjB","sources":["packages/@react-spectrum/slider/intl/zh-CN.json"],"sourcesContent":["{\n  \"maximum\": \"最大\",\n  \"minimum\": \"最小\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -1,7 +0,0 @@
-module.exports = {
-    "maximum": `\u{6700}\u{5927}\u{503C}`,
-    "minimum": `\u{6700}\u{5C0F}\u{503C}`
-};
-
-
-//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -1 +0,0 @@
-{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;IAClC,WAAW,CAAC,wBAAG,CAAC;AAClB","sources":["packages/@react-spectrum/slider/intl/zh-TW.json"],"sourcesContent":["{\n  \"maximum\": \"最大值\",\n  \"minimum\": \"最小值\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -1,9 +0,0 @@
-var $e54d1a8757bfdcd2$exports = {};
-$e54d1a8757bfdcd2$exports = {
-    "maximum": `\u{6700}\u{5927}\u{503C}`,
-    "minimum": `\u{6700}\u{5C0F}\u{503C}`
-};
-
-
-export {$e54d1a8757bfdcd2$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -1,9 +0,0 @@
-var $e54d1a8757bfdcd2$exports = {};
-$e54d1a8757bfdcd2$exports = {
-    "maximum": `\u{6700}\u{5927}\u{503C}`,
-    "minimum": `\u{6700}\u{5C0F}\u{503C}`
-};
-
-
-export {$e54d1a8757bfdcd2$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;IAClC,WAAW,CAAC,wBAAG,CAAC;AAClB","sources":["packages/@react-spectrum/slider/intl/zh-TW.json"],"sourcesContent":["{\n  \"maximum\": \"最大值\",\n  \"minimum\": \"最小值\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/src/RangeSlider.tsx

@@ -1,95 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {classNames} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import React from 'react';
-import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';
-import {SliderThumb} from './SliderThumb';
-import {SpectrumRangeSliderProps} from '@react-types/slider';
-import styles from '@adobe/spectrum-css-temp/components/slider/vars.css';
-import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-
-/**
- * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
- */
-export const RangeSlider = React.forwardRef(function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
-  let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;
-  let defaultThumbValues: number[] | undefined = undefined;
-  if (defaultValue != null) {
-    defaultThumbValues = [defaultValue.start, defaultValue.end];
-  } else if (value == null) {
-    // make sure that useSliderState knows we have two handles
-    defaultThumbValues = [props.minValue ?? 0, props.maxValue ?? 100];
-  }
-
-  let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {
-    ...otherProps,
-    value: value != null ? [value.start, value.end] : undefined,
-    defaultValue: defaultThumbValues,
-    onChange(v) {
-      onChange?.({start: v[0], end: v[1]});
-    },
-    onChangeEnd(v) {
-      onChangeEnd?.({start: v[0], end: v[1]});
-    },
-    getValueLabel: getValueLabel ? ([start, end]) => getValueLabel({start, end}) : undefined
-  };
-
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/slider');
-  let {direction} = useLocale();
-
-  return (
-    <SliderBase {...baseProps} classes={'spectrum-Slider--range'} ref={ref}>
-      {({trackRef, inputRef, state}: SliderBaseChildArguments) => {
-        let cssDirection = direction === 'rtl' ? 'right' : 'left';
-        return (
-          <>
-            <div
-              className={classNames(styles, 'spectrum-Slider-track')}
-              style={{width: `${state.getThumbPercent(0) * 100}%`}} />
-            <SliderThumb
-              index={0}
-              aria-label={stringFormatter.format('minimum')}
-              isDisabled={props.isDisabled}
-              trackRef={trackRef}
-              inputRef={inputRef}
-              state={state}
-              name={props.startName}
-              form={props.form} />
-            <div
-              className={classNames(styles, 'spectrum-Slider-track')}
-              style={{
-                [cssDirection]: `${state.getThumbPercent(0) * 100}%`,
-                width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`
-              }} />
-            <SliderThumb
-              index={1}
-              aria-label={stringFormatter.format('maximum')}
-              isDisabled={props.isDisabled}
-              trackRef={trackRef}
-              state={state}
-              name={props.endName}
-              form={props.form} />
-            <div
-              className={classNames(styles, 'spectrum-Slider-track')}
-              style={{
-                width: `${(1 - state.getThumbPercent(1)) * 100}%`
-              }} />
-          </>
-        );
-      }}
-    </SliderBase>
-  );
-});

package/src/Slider.tsx

@@ -1,119 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {clamp} from '@react-aria/utils';
-import {classNames} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
-import React, {ReactNode} from 'react';
-import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';
-import {SliderThumb} from './SliderThumb';
-import {SpectrumSliderProps} from '@react-types/slider';
-import styles from '@adobe/spectrum-css-temp/components/slider/vars.css';
-import {useLocale} from '@react-aria/i18n';
-
-/**
- * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
- */
-export const Slider = React.forwardRef(function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
-  let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;
-
-  let baseProps: Omit<SliderBaseProps, 'children'> = {
-    ...otherProps,
-    // Normalize `value: number[]` to `value: number`
-    value: value != null ? [value] : undefined,
-    defaultValue: defaultValue != null ? [defaultValue] : undefined,
-    onChange: (v: number[]): void => {
-      onChange?.(v[0]);
-    },
-    onChangeEnd: (v: number[]): void => {
-      onChangeEnd?.(v[0]);
-    },
-    getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined
-  };
-
-  let {direction} = useLocale();
-
-  return (
-    <SliderBase
-      {...baseProps}
-      ref={ref}
-      classes={{
-        'spectrum-Slider--filled': isFilled && fillOffset == null
-      }}
-      style={
-        // @ts-ignore
-        {'--spectrum-slider-track-gradient': trackGradient && `linear-gradient(to ${direction === 'ltr' ? 'right' : 'left'}, ${trackGradient.join(', ')})`}
-      }>
-      {({trackRef, inputRef, state}: SliderBaseChildArguments) => {
-        fillOffset = fillOffset != null ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;
-        let cssDirection = direction === 'rtl' ? 'right' : 'left';
-
-        let lowerTrack = (
-          <div
-            className={classNames(styles, 'spectrum-Slider-track')}
-            style={{
-              width: `${state.getThumbPercent(0) * 100}%`,
-              // TODO not sure if it has advantages, but this could also be implemented as CSS calc():
-              // .track::before {
-              //    background-size: calc((1/ (var(--width)/100)) * 100%);
-              //    width: calc(var(--width) * 1%)M
-              // }
-              // @ts-ignore
-              '--spectrum-track-background-size': `${(1 / state.getThumbPercent(0)) * 100}%`,
-              '--spectrum-track-background-position': direction === 'ltr' ? '0' : '100%'
-            }} />
-        );
-        let upperTrack = (
-          <div
-            className={classNames(styles, 'spectrum-Slider-track')}
-            style={{
-              width: `${(1 - state.getThumbPercent(0)) * 100}%`,
-              // @ts-ignore
-              '--spectrum-track-background-size': `${(1 / (1 - state.getThumbPercent(0))) * 100}%`,
-              '--spectrum-track-background-position': direction === 'ltr' ? '100%' : '0'
-            }} />
-        );
-
-        let filledTrack: ReactNode = null;
-        if (isFilled && fillOffset != null) {
-          let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
-          let isRightOfOffset = width > 0;
-          let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);
-          filledTrack = (
-            <div
-              className={classNames(styles, 'spectrum-Slider-fill', {'spectrum-Slider-fill--right': isRightOfOffset})}
-              style={{
-                [cssDirection]: `${offset * 100}%`,
-                width: `${Math.abs(width) * 100}%`
-              }} />
-          );
-        }
-
-        return  (
-          <>
-            {lowerTrack}
-            <SliderThumb
-              index={0}
-              isDisabled={props.isDisabled}
-              trackRef={trackRef}
-              inputRef={inputRef}
-              state={state}
-              name={props.name}
-              form={props.form} />
-            {filledTrack}
-            {upperTrack}
-          </>
-        );
-      }}
-    </SliderBase>
-  );
-});

package/src/SliderBase.tsx

@@ -1,195 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef, RefObject} from '@react-types/shared';
-import React, {CSSProperties, ReactNode, useRef} from 'react';
-import {SliderState, useSliderState} from '@react-stately/slider';
-import {SpectrumBarSliderBase} from '@react-types/slider';
-import styles from '@adobe/spectrum-css-temp/components/slider/vars.css';
-import {useNumberFormatter} from '@react-aria/i18n';
-import {useProviderProps} from '@react-spectrum/provider';
-import {useSlider} from '@react-aria/slider';
-
-export interface SliderBaseChildArguments {
-  inputRef: RefObject<HTMLInputElement | null>,
-  trackRef: RefObject<HTMLElement | null>,
-  state: SliderState
-}
-
-export interface SliderBaseProps<T = number[]> extends SpectrumBarSliderBase<T> {
-  children: (opts: SliderBaseChildArguments) => ReactNode,
-  classes?: string[] | Object,
-  style?: CSSProperties
-}
-
-export const SliderBase = React.forwardRef(function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
-  props = useProviderProps(props);
-  let {
-    isDisabled,
-    children,
-    classes,
-    style,
-    labelPosition = 'top',
-    getValueLabel,
-    showValueLabel = !!props.label,
-    formatOptions,
-    minValue = 0,
-    maxValue = 100,
-    ...otherProps
-  } = props;
-
-  let {styleProps} = useStyleProps(otherProps);
-
-  // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.
-  let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;
-  if (alwaysDisplaySign) {
-    if (formatOptions != null) {
-      if (!('signDisplay' in formatOptions)) {
-        formatOptions = {
-          ...formatOptions,
-          signDisplay: 'exceptZero'
-        };
-      }
-    } else {
-      formatOptions = {signDisplay: 'exceptZero'};
-    }
-  }
-
-  const formatter = useNumberFormatter(formatOptions);
-  const state = useSliderState({
-    ...props,
-    numberFormatter: formatter,
-    minValue,
-    maxValue
-  });
-  let trackRef = useRef<HTMLDivElement | null>(null);
-  let {
-    groupProps,
-    trackProps,
-    labelProps,
-    outputProps
-  } = useSlider(props, state, trackRef);
-
-  let inputRef = useRef<HTMLInputElement | null>(null);
-  let domRef = useFocusableRef(ref, inputRef);
-
-  let displayValue = '';
-  let maxLabelLength: number | null = null;
-
-  if (typeof getValueLabel === 'function') {
-    displayValue = getValueLabel(state.values);
-    switch (state.values.length) {
-      case 1:
-        maxLabelLength = Math.max(
-          getValueLabel([minValue]).length,
-          getValueLabel([maxValue]).length
-        );
-        break;
-      case 2:
-        // Try all possible combinations of min and max values.
-        maxLabelLength = Math.max(
-          getValueLabel([minValue, minValue]).length,
-          getValueLabel([minValue, maxValue]).length,
-          getValueLabel([maxValue, minValue]).length,
-          getValueLabel([maxValue, maxValue]).length
-        );
-        break;
-      default:
-        throw new Error('Only sliders with 1 or 2 handles are supported!');
-    }
-  } else {
-    maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
-    switch (state.values.length) {
-      case 1:
-        displayValue = state.getThumbValueLabel(0);
-        break;
-      case 2:
-        // This should really use the NumberFormat#formatRange proposal...
-        // https://github.com/tc39/ecma402/issues/393
-        // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393
-        displayValue = `${state.getThumbValueLabel(0)} – ${state.getThumbValueLabel(1)}`;
-        maxLabelLength = 3 + 2 * Math.max(
-          maxLabelLength,
-          [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length
-        );
-        break;
-      default:
-        throw new Error('Only sliders with 1 or 2 handles are supported!');
-    }
-  }
-
-  let labelNode = (
-    <label
-      className={classNames(styles, 'spectrum-Slider-label')}
-      {...labelProps}>
-      {props.label}
-    </label>
-  );
-
-  let valueNode = (
-    <output
-      {...outputProps}
-      className={classNames(styles, 'spectrum-Slider-value')}
-      style={maxLabelLength != null ? {width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`} : undefined}>
-      {displayValue}
-    </output>
-  );
-
-  return (
-    <div
-      ref={domRef}
-      className={classNames(styles,
-        'spectrum-Slider',
-        {
-          'spectrum-Slider--positionTop': labelPosition === 'top',
-          'spectrum-Slider--positionSide': labelPosition === 'side',
-          'is-disabled': isDisabled
-        },
-        classes,
-        styleProps.className)}
-      style={{
-        ...style,
-        ...styleProps.style
-      }}
-      {...groupProps}>
-      {(props.label) &&
-        <div className={classNames(styles, 'spectrum-Slider-labelContainer')} role="presentation">
-          {props.label && labelNode}
-          {props.contextualHelp &&
-            <SlotProvider
-              slots={{
-                actionButton: {
-                  UNSAFE_className: classNames(styles, 'spectrum-Slider-contextualHelp')
-                }
-              }}>
-              {props.contextualHelp}
-            </SlotProvider>
-          }
-          {labelPosition === 'top' && showValueLabel && valueNode}
-        </div>
-      }
-      <div className={classNames(styles, 'spectrum-Slider-controls')} ref={trackRef} {...trackProps} role="presentation">
-        {children({
-          trackRef,
-          inputRef,
-          state
-        })}
-      </div>
-      {labelPosition === 'side' &&
-        <div className={classNames(styles, 'spectrum-Slider-valueLabelContainer')} role="presentation">
-          {showValueLabel && valueNode}
-        </div>
-      }
-    </div>
-  );
-});

package/src/SliderThumb.tsx

@@ -1,68 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaSliderThumbProps} from '@react-types/slider';
-import {classNames} from '@react-spectrum/utils';
-import {FocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-import React, {ReactNode, useRef} from 'react';
-import {RefObject} from '@react-types/shared';
-import {SliderState} from '@react-stately/slider';
-import styles from '@adobe/spectrum-css-temp/components/slider/vars.css';
-import {useHover} from '@react-aria/interactions';
-import {useSliderThumb} from '@react-aria/slider';
-import {VisuallyHidden} from '@react-aria/visually-hidden';
-
-interface SliderThumbProps extends AriaSliderThumbProps {
-  trackRef: RefObject<HTMLElement | null>,
-  inputRef?: RefObject<HTMLInputElement | null>,
-  state: SliderState
-}
-
-export function SliderThumb(props: SliderThumbProps): ReactNode {
-  let {
-    inputRef,
-    state
-  } = props;
-  let backupRef = useRef<HTMLInputElement | null>(null);
-  inputRef = inputRef || backupRef;
-
-  let {thumbProps, inputProps, isDragging, isFocused} = useSliderThumb({
-    ...props,
-    inputRef
-  }, state);
-
-  let {hoverProps, isHovered} = useHover({});
-
-  return (
-    <FocusRing within focusRingClass={classNames(styles, 'is-focused')}>
-      <div
-        className={
-          classNames(
-            styles,
-            'spectrum-Slider-handle',
-            {
-              'is-hovered': isHovered,
-              'is-dragged': isDragging,
-              'is-tophandle': isFocused
-            }
-          )
-        }
-        {...mergeProps(thumbProps, hoverProps)}
-        role="presentation">
-        <VisuallyHidden>
-          <input className={classNames(styles, 'spectrum-Slider-input')} ref={inputRef} {...inputProps} />
-        </VisuallyHidden>
-      </div>
-    </FocusRing>
-  );
-}