@react-spectrum/slider 3.7.0 → 3.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  var $a8b5f113a6a8e4d8$exports = require("./intlStrings.main.js");
2
2
  var $ec6ca573d82152ff$exports = require("./SliderBase.main.js");
3
3
  var $77acc7fb8bfd13d6$exports = require("./SliderThumb.main.js");
4
- require("./vars.0949d1ae.css");
4
+ require("./vars.fb2ba660.css");
5
5
  var $57893a49ef34c169$exports = require("./slider_vars_css.main.js");
6
6
  var $5TzYf$reactspectrumutils = require("@react-spectrum/utils");
7
7
  var $5TzYf$react = require("react");
@@ -34,7 +34,7 @@ $parcel$export(module.exports, "RangeSlider", () => $f166b52c7f82645c$export$826
34
34
 
35
35
 
36
36
 
37
- function $f166b52c7f82645c$var$RangeSlider(props, ref) {
37
+ const $f166b52c7f82645c$export$826424dabc3dd705 = /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).forwardRef(function RangeSlider(props, ref) {
38
38
  let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, getValueLabel: getValueLabel, ...otherProps } = props;
39
39
  var _props_minValue, _props_maxValue;
40
40
  let baseProps = {
@@ -108,10 +108,7 @@ function $f166b52c7f82645c$var$RangeSlider(props, ref) {
108
108
  }
109
109
  }));
110
110
  });
111
- }
112
- /**
113
- * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
114
- */ const $f166b52c7f82645c$export$826424dabc3dd705 = /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).forwardRef($f166b52c7f82645c$var$RangeSlider);
111
+ });
115
112
 
116
113
 
117
114
  //# sourceMappingURL=RangeSlider.main.js.map
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAaD,SAAS,kCAAY,KAA+B,EAAE,GAAiC;IACrF,IAAI,YAAC,QAAQ,eAAE,WAAW,SAAE,KAAK,gBAAE,YAAY,iBAAE,aAAa,EAAE,GAAG,YAAW,GAAG;QAQ1E,iBAAqB;IAN5B,IAAI,YAAyD;QAC3D,GAAG,UAAU;QACb,OAAO,SAAS,OAAO;YAAC,MAAM,KAAK;YAAE,MAAM,GAAG;SAAC,GAAG;QAClD,cAAc,gBAAgB,OAC1B;YAAC,aAAa,KAAK;YAAE,aAAa,GAAG;SAAC,GAEtC;YAAC,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;YAAG,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;SAAI;QAChD,UAAS,CAAC;YACR,qBAAA,+BAAA,SAAW;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACpC;QACA,aAAY,CAAC;YACX,wBAAA,kCAAA,YAAc;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACvC;QACA,eAAe,gBAAgB,CAAC,CAAC,OAAO,IAAI,GAAK,cAAc;uBAAC;qBAAO;YAAG,KAAK;IACjF;IAEA,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,qBACE,0DAAC,CAAA,GAAA,oCAAS;QAAG,GAAG,SAAS;QAAE,SAAS;QAA0B,KAAK;OAChE,CAAC,YAAC,QAAQ,YAAE,QAAQ,SAAE,KAAK,EAA2B;QACrD,IAAI,eAAe,cAAc,QAAQ,UAAU;QACnD,qBACE,oIACE,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBAAC,OAAO,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;YAAA;0BACrD,0DAAC,CAAA,GAAA,qCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,UAAU;YACV,OAAO;YACP,MAAM,MAAM,SAAS;0BACvB,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBACL,CAAC,aAAa,EAAE,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;gBACpD,OAAO,GAAG,KAAK,GAAG,CAAC,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC,MAAM,IAAI,CAAC,CAAC;YAClF;0BACF,0DAAC,CAAA,GAAA,qCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,OAAO;YACP,MAAM,MAAM,OAAO;0BACrB,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,GAAG,AAAC,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAK,IAAI,CAAC,CAAC;YACnD;;IAGR;AAGN;AAEA;;CAEC,GACD,MAAM,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/slider/src/RangeSlider.tsx"],"sourcesContent":["/*\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\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumRangeSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nfunction RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {\n let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;\n\n let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {\n ...otherProps,\n value: value != null ? [value.start, value.end] : undefined,\n defaultValue: defaultValue != null\n ? [defaultValue.start, defaultValue.end]\n // make sure that useSliderState knows we have two handles\n : [props.minValue ?? 0, props.maxValue ?? 100],\n onChange(v) {\n onChange?.({start: v[0], end: v[1]});\n },\n onChangeEnd(v) {\n onChangeEnd?.({start: v[0], end: v[1]});\n },\n getValueLabel: getValueLabel ? ([start, end]) => getValueLabel({start, end}) : undefined\n };\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/slider');\n let {direction} = useLocale();\n\n return (\n <SliderBase {...baseProps} classes={'spectrum-Slider--range'} ref={ref}>\n {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n return (\n <>\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{width: `${state.getThumbPercent(0) * 100}%`}} />\n <SliderThumb\n index={0}\n aria-label={stringFormatter.format('minimum')}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n inputRef={inputRef}\n state={state}\n name={props.startName} />\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n [cssDirection]: `${state.getThumbPercent(0) * 100}%`,\n width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`\n }} />\n <SliderThumb\n index={1}\n aria-label={stringFormatter.format('maximum')}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n state={state}\n name={props.endName} />\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${(1 - state.getThumbPercent(1)) * 100}%`\n }} />\n </>\n );\n }}\n </SliderBase>\n );\n}\n\n/**\n * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.\n */\nconst _RangeSlider = React.forwardRef(RangeSlider);\nexport {_RangeSlider as RangeSlider};\n"],"names":[],"version":3,"file":"RangeSlider.main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAgBM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAAiC;IACjI,IAAI,YAAC,QAAQ,eAAE,WAAW,SAAE,KAAK,gBAAE,YAAY,iBAAE,aAAa,EAAE,GAAG,YAAW,GAAG;QAQ1E,iBAAqB;IAN5B,IAAI,YAAyD;QAC3D,GAAG,UAAU;QACb,OAAO,SAAS,OAAO;YAAC,MAAM,KAAK;YAAE,MAAM,GAAG;SAAC,GAAG;QAClD,cAAc,gBAAgB,OAC1B;YAAC,aAAa,KAAK;YAAE,aAAa,GAAG;SAAC,GAEtC;YAAC,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;YAAG,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;SAAI;QAChD,UAAS,CAAC;YACR,qBAAA,+BAAA,SAAW;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACpC;QACA,aAAY,CAAC;YACX,wBAAA,kCAAA,YAAc;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACvC;QACA,eAAe,gBAAgB,CAAC,CAAC,OAAO,IAAI,GAAK,cAAc;uBAAC;qBAAO;YAAG,KAAK;IACjF;IAEA,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,qBACE,0DAAC,CAAA,GAAA,oCAAS;QAAG,GAAG,SAAS;QAAE,SAAS;QAA0B,KAAK;OAChE,CAAC,YAAC,QAAQ,YAAE,QAAQ,SAAE,KAAK,EAA2B;QACrD,IAAI,eAAe,cAAc,QAAQ,UAAU;QACnD,qBACE,oIACE,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBAAC,OAAO,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;YAAA;0BACrD,0DAAC,CAAA,GAAA,qCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,UAAU;YACV,OAAO;YACP,MAAM,MAAM,SAAS;0BACvB,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBACL,CAAC,aAAa,EAAE,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;gBACpD,OAAO,GAAG,KAAK,GAAG,CAAC,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC,MAAM,IAAI,CAAC,CAAC;YAClF;0BACF,0DAAC,CAAA,GAAA,qCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,OAAO;YACP,MAAM,MAAM,OAAO;0BACrB,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,GAAG,AAAC,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAK,IAAI,CAAC,CAAC;YACnD;;IAGR;AAGN","sources":["packages/@react-spectrum/slider/src/RangeSlider.tsx"],"sourcesContent":["/*\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\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumRangeSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\n/**\n * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.\n */\nexport const RangeSlider = React.forwardRef(function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {\n let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;\n\n let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {\n ...otherProps,\n value: value != null ? [value.start, value.end] : undefined,\n defaultValue: defaultValue != null\n ? [defaultValue.start, defaultValue.end]\n // make sure that useSliderState knows we have two handles\n : [props.minValue ?? 0, props.maxValue ?? 100],\n onChange(v) {\n onChange?.({start: v[0], end: v[1]});\n },\n onChangeEnd(v) {\n onChangeEnd?.({start: v[0], end: v[1]});\n },\n getValueLabel: getValueLabel ? ([start, end]) => getValueLabel({start, end}) : undefined\n };\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/slider');\n let {direction} = useLocale();\n\n return (\n <SliderBase {...baseProps} classes={'spectrum-Slider--range'} ref={ref}>\n {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n return (\n <>\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{width: `${state.getThumbPercent(0) * 100}%`}} />\n <SliderThumb\n index={0}\n aria-label={stringFormatter.format('minimum')}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n inputRef={inputRef}\n state={state}\n name={props.startName} />\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n [cssDirection]: `${state.getThumbPercent(0) * 100}%`,\n width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`\n }} />\n <SliderThumb\n index={1}\n aria-label={stringFormatter.format('maximum')}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n state={state}\n name={props.endName} />\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${(1 - state.getThumbPercent(1)) * 100}%`\n }} />\n </>\n );\n }}\n </SliderBase>\n );\n});\n"],"names":[],"version":3,"file":"RangeSlider.main.js.map"}
@@ -1,7 +1,7 @@
1
1
  import $bc8Se$intlStringsmodulejs from "./intlStrings.mjs";
2
2
  import {SliderBase as $39572711324a3b8e$export$9418495bb635ebde} from "./SliderBase.mjs";
3
3
  import {SliderThumb as $9058ca69d66a724f$export$2c1b491743890dec} from "./SliderThumb.mjs";
4
- import "./vars.0949d1ae.css";
4
+ import "./vars.fb2ba660.css";
5
5
  import $bc8Se$slider_vars_cssmodulejs from "./slider_vars_css.mjs";
6
6
  import {classNames as $bc8Se$classNames} from "@react-spectrum/utils";
7
7
  import $bc8Se$react from "react";
@@ -28,7 +28,7 @@ function $parcel$interopDefault(a) {
28
28
 
29
29
 
30
30
 
31
- function $d42a197b273dc031$var$RangeSlider(props, ref) {
31
+ const $d42a197b273dc031$export$826424dabc3dd705 = /*#__PURE__*/ (0, $bc8Se$react).forwardRef(function RangeSlider(props, ref) {
32
32
  let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, getValueLabel: getValueLabel, ...otherProps } = props;
33
33
  var _props_minValue, _props_maxValue;
34
34
  let baseProps = {
@@ -102,10 +102,7 @@ function $d42a197b273dc031$var$RangeSlider(props, ref) {
102
102
  }
103
103
  }));
104
104
  });
105
- }
106
- /**
107
- * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
108
- */ const $d42a197b273dc031$export$826424dabc3dd705 = /*#__PURE__*/ (0, $bc8Se$react).forwardRef($d42a197b273dc031$var$RangeSlider);
105
+ });
109
106
 
110
107
 
111
108
  export {$d42a197b273dc031$export$826424dabc3dd705 as RangeSlider};
@@ -1,7 +1,7 @@
1
1
  import $bc8Se$intlStringsmodulejs from "./intlStrings.module.js";
2
2
  import {SliderBase as $39572711324a3b8e$export$9418495bb635ebde} from "./SliderBase.module.js";
3
3
  import {SliderThumb as $9058ca69d66a724f$export$2c1b491743890dec} from "./SliderThumb.module.js";
4
- import "./vars.0949d1ae.css";
4
+ import "./vars.fb2ba660.css";
5
5
  import $bc8Se$slider_vars_cssmodulejs from "./slider_vars_css.module.js";
6
6
  import {classNames as $bc8Se$classNames} from "@react-spectrum/utils";
7
7
  import $bc8Se$react from "react";
@@ -28,7 +28,7 @@ function $parcel$interopDefault(a) {
28
28
 
29
29
 
30
30
 
31
- function $d42a197b273dc031$var$RangeSlider(props, ref) {
31
+ const $d42a197b273dc031$export$826424dabc3dd705 = /*#__PURE__*/ (0, $bc8Se$react).forwardRef(function RangeSlider(props, ref) {
32
32
  let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, getValueLabel: getValueLabel, ...otherProps } = props;
33
33
  var _props_minValue, _props_maxValue;
34
34
  let baseProps = {
@@ -102,10 +102,7 @@ function $d42a197b273dc031$var$RangeSlider(props, ref) {
102
102
  }
103
103
  }));
104
104
  });
105
- }
106
- /**
107
- * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
108
- */ const $d42a197b273dc031$export$826424dabc3dd705 = /*#__PURE__*/ (0, $bc8Se$react).forwardRef($d42a197b273dc031$var$RangeSlider);
105
+ });
109
106
 
110
107
 
111
108
  export {$d42a197b273dc031$export$826424dabc3dd705 as RangeSlider};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAaD,SAAS,kCAAY,KAA+B,EAAE,GAAiC;IACrF,IAAI,YAAC,QAAQ,eAAE,WAAW,SAAE,KAAK,gBAAE,YAAY,iBAAE,aAAa,EAAE,GAAG,YAAW,GAAG;QAQ1E,iBAAqB;IAN5B,IAAI,YAAyD;QAC3D,GAAG,UAAU;QACb,OAAO,SAAS,OAAO;YAAC,MAAM,KAAK;YAAE,MAAM,GAAG;SAAC,GAAG;QAClD,cAAc,gBAAgB,OAC1B;YAAC,aAAa,KAAK;YAAE,aAAa,GAAG;SAAC,GAEtC;YAAC,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;YAAG,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;SAAI;QAChD,UAAS,CAAC;YACR,qBAAA,+BAAA,SAAW;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACpC;QACA,aAAY,CAAC;YACX,wBAAA,kCAAA,YAAc;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACvC;QACA,eAAe,gBAAgB,CAAC,CAAC,OAAO,IAAI,GAAK,cAAc;uBAAC;qBAAO;YAAG,KAAK;IACjF;IAEA,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,qBACE,gCAAC,CAAA,GAAA,yCAAS;QAAG,GAAG,SAAS;QAAE,SAAS;QAA0B,KAAK;OAChE,CAAC,YAAC,QAAQ,YAAE,QAAQ,SAAE,KAAK,EAA2B;QACrD,IAAI,eAAe,cAAc,QAAQ,UAAU;QACnD,qBACE,gFACE,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBAAC,OAAO,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;YAAA;0BACrD,gCAAC,CAAA,GAAA,yCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,UAAU;YACV,OAAO;YACP,MAAM,MAAM,SAAS;0BACvB,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBACL,CAAC,aAAa,EAAE,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;gBACpD,OAAO,GAAG,KAAK,GAAG,CAAC,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC,MAAM,IAAI,CAAC,CAAC;YAClF;0BACF,gCAAC,CAAA,GAAA,yCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,OAAO;YACP,MAAM,MAAM,OAAO;0BACrB,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,GAAG,AAAC,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAK,IAAI,CAAC,CAAC;YACnD;;IAGR;AAGN;AAEA;;CAEC,GACD,MAAM,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/slider/src/RangeSlider.tsx"],"sourcesContent":["/*\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\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumRangeSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nfunction RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {\n let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;\n\n let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {\n ...otherProps,\n value: value != null ? [value.start, value.end] : undefined,\n defaultValue: defaultValue != null\n ? [defaultValue.start, defaultValue.end]\n // make sure that useSliderState knows we have two handles\n : [props.minValue ?? 0, props.maxValue ?? 100],\n onChange(v) {\n onChange?.({start: v[0], end: v[1]});\n },\n onChangeEnd(v) {\n onChangeEnd?.({start: v[0], end: v[1]});\n },\n getValueLabel: getValueLabel ? ([start, end]) => getValueLabel({start, end}) : undefined\n };\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/slider');\n let {direction} = useLocale();\n\n return (\n <SliderBase {...baseProps} classes={'spectrum-Slider--range'} ref={ref}>\n {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n return (\n <>\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{width: `${state.getThumbPercent(0) * 100}%`}} />\n <SliderThumb\n index={0}\n aria-label={stringFormatter.format('minimum')}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n inputRef={inputRef}\n state={state}\n name={props.startName} />\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n [cssDirection]: `${state.getThumbPercent(0) * 100}%`,\n width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`\n }} />\n <SliderThumb\n index={1}\n aria-label={stringFormatter.format('maximum')}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n state={state}\n name={props.endName} />\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${(1 - state.getThumbPercent(1)) * 100}%`\n }} />\n </>\n );\n }}\n </SliderBase>\n );\n}\n\n/**\n * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.\n */\nconst _RangeSlider = React.forwardRef(RangeSlider);\nexport {_RangeSlider as RangeSlider};\n"],"names":[],"version":3,"file":"RangeSlider.module.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAgBM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAAiC;IACjI,IAAI,YAAC,QAAQ,eAAE,WAAW,SAAE,KAAK,gBAAE,YAAY,iBAAE,aAAa,EAAE,GAAG,YAAW,GAAG;QAQ1E,iBAAqB;IAN5B,IAAI,YAAyD;QAC3D,GAAG,UAAU;QACb,OAAO,SAAS,OAAO;YAAC,MAAM,KAAK;YAAE,MAAM,GAAG;SAAC,GAAG;QAClD,cAAc,gBAAgB,OAC1B;YAAC,aAAa,KAAK;YAAE,aAAa,GAAG;SAAC,GAEtC;YAAC,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;YAAG,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;SAAI;QAChD,UAAS,CAAC;YACR,qBAAA,+BAAA,SAAW;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACpC;QACA,aAAY,CAAC;YACX,wBAAA,kCAAA,YAAc;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACvC;QACA,eAAe,gBAAgB,CAAC,CAAC,OAAO,IAAI,GAAK,cAAc;uBAAC;qBAAO;YAAG,KAAK;IACjF;IAEA,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,qBACE,gCAAC,CAAA,GAAA,yCAAS;QAAG,GAAG,SAAS;QAAE,SAAS;QAA0B,KAAK;OAChE,CAAC,YAAC,QAAQ,YAAE,QAAQ,SAAE,KAAK,EAA2B;QACrD,IAAI,eAAe,cAAc,QAAQ,UAAU;QACnD,qBACE,gFACE,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBAAC,OAAO,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;YAAA;0BACrD,gCAAC,CAAA,GAAA,yCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,UAAU;YACV,OAAO;YACP,MAAM,MAAM,SAAS;0BACvB,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBACL,CAAC,aAAa,EAAE,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;gBACpD,OAAO,GAAG,KAAK,GAAG,CAAC,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC,MAAM,IAAI,CAAC,CAAC;YAClF;0BACF,gCAAC,CAAA,GAAA,yCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,OAAO;YACP,MAAM,MAAM,OAAO;0BACrB,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,GAAG,AAAC,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAK,IAAI,CAAC,CAAC;YACnD;;IAGR;AAGN","sources":["packages/@react-spectrum/slider/src/RangeSlider.tsx"],"sourcesContent":["/*\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\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumRangeSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\n/**\n * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.\n */\nexport const RangeSlider = React.forwardRef(function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {\n let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;\n\n let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {\n ...otherProps,\n value: value != null ? [value.start, value.end] : undefined,\n defaultValue: defaultValue != null\n ? [defaultValue.start, defaultValue.end]\n // make sure that useSliderState knows we have two handles\n : [props.minValue ?? 0, props.maxValue ?? 100],\n onChange(v) {\n onChange?.({start: v[0], end: v[1]});\n },\n onChangeEnd(v) {\n onChangeEnd?.({start: v[0], end: v[1]});\n },\n getValueLabel: getValueLabel ? ([start, end]) => getValueLabel({start, end}) : undefined\n };\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/slider');\n let {direction} = useLocale();\n\n return (\n <SliderBase {...baseProps} classes={'spectrum-Slider--range'} ref={ref}>\n {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n return (\n <>\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{width: `${state.getThumbPercent(0) * 100}%`}} />\n <SliderThumb\n index={0}\n aria-label={stringFormatter.format('minimum')}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n inputRef={inputRef}\n state={state}\n name={props.startName} />\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n [cssDirection]: `${state.getThumbPercent(0) * 100}%`,\n width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`\n }} />\n <SliderThumb\n index={1}\n aria-label={stringFormatter.format('maximum')}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n state={state}\n name={props.endName} />\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${(1 - state.getThumbPercent(1)) * 100}%`\n }} />\n </>\n );\n }}\n </SliderBase>\n );\n});\n"],"names":[],"version":3,"file":"RangeSlider.module.js.map"}
@@ -1,6 +1,6 @@
1
1
  var $ec6ca573d82152ff$exports = require("./SliderBase.main.js");
2
2
  var $77acc7fb8bfd13d6$exports = require("./SliderThumb.main.js");
3
- require("./vars.0949d1ae.css");
3
+ require("./vars.fb2ba660.css");
4
4
  var $57893a49ef34c169$exports = require("./slider_vars_css.main.js");
5
5
  var $h9MRe$reactariautils = require("@react-aria/utils");
6
6
  var $h9MRe$reactspectrumutils = require("@react-spectrum/utils");
@@ -34,7 +34,7 @@ $parcel$export(module.exports, "Slider", () => $3a761bdd22d32681$export$472062a3
34
34
 
35
35
 
36
36
 
37
- function $3a761bdd22d32681$var$Slider(props, ref) {
37
+ const $3a761bdd22d32681$export$472062a354075cee = /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).forwardRef(function Slider(props, ref) {
38
38
  let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, isFilled: isFilled, fillOffset: fillOffset, trackGradient: trackGradient, getValueLabel: getValueLabel, ...otherProps } = props;
39
39
  let baseProps = {
40
40
  ...otherProps,
@@ -114,10 +114,7 @@ function $3a761bdd22d32681$var$Slider(props, ref) {
114
114
  name: props.name
115
115
  }), filledTrack, upperTrack);
116
116
  });
117
- }
118
- /**
119
- * 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.
120
- */ const $3a761bdd22d32681$export$472062a354075cee = /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).forwardRef($3a761bdd22d32681$var$Slider);
117
+ });
121
118
 
122
119
 
123
120
  //# sourceMappingURL=Slider.main.js.map
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/slider/src/Slider.tsx"],"sourcesContent":["/*\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\nimport {clamp} from '@react-aria/utils';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {ReactNode} from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale} from '@react-aria/i18n';\n\nfunction Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {\n let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;\n\n let baseProps: Omit<SliderBaseProps, 'children'> = {\n ...otherProps,\n // Normalize `value: number[]` to `value: number`\n value: value != null ? [value] : undefined,\n defaultValue: defaultValue != null ? [defaultValue] : undefined,\n onChange: (v: number[]): void => {\n onChange?.(v[0]);\n },\n onChangeEnd: (v: number[]): void => {\n onChangeEnd?.(v[0]);\n },\n getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined\n };\n\n let {direction} = useLocale();\n\n return (\n <SliderBase\n {...baseProps}\n ref={ref}\n classes={{\n 'spectrum-Slider--filled': isFilled && fillOffset == null\n }}\n style={\n // @ts-ignore\n {'--spectrum-slider-track-gradient': trackGradient && `linear-gradient(to ${direction === 'ltr' ? 'right' : 'left'}, ${trackGradient.join(', ')})`}\n }>\n {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n fillOffset = fillOffset != null ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n let lowerTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${state.getThumbPercent(0) * 100}%`,\n // TODO not sure if it has advantages, but this could also be implemented as CSS calc():\n // .track::before {\n // background-size: calc((1/ (var(--width)/100)) * 100%);\n // width: calc(var(--width) * 1%)M\n // }\n // @ts-ignore\n '--spectrum-track-background-size': `${(1 / state.getThumbPercent(0)) * 100}%`,\n '--spectrum-track-background-position': direction === 'ltr' ? '0' : '100%'\n }} />\n );\n let upperTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${(1 - state.getThumbPercent(0)) * 100}%`,\n // @ts-ignore\n '--spectrum-track-background-size': `${(1 / (1 - state.getThumbPercent(0))) * 100}%`,\n '--spectrum-track-background-position': direction === 'ltr' ? '100%' : '0'\n }} />\n );\n\n let filledTrack: ReactNode = null;\n if (isFilled && fillOffset != null) {\n let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = width > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n filledTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-fill', {'spectrum-Slider-fill--right': isRightOfOffset})}\n style={{\n [cssDirection]: `${offset * 100}%`,\n width: `${Math.abs(width) * 100}%`\n }} />\n );\n }\n\n return (\n <>\n {lowerTrack}\n <SliderThumb\n index={0}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n inputRef={inputRef}\n state={state}\n name={props.name} />\n {filledTrack}\n {upperTrack}\n </>\n );\n }}\n </SliderBase>\n );\n}\n\n/**\n * 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.\n */\nconst _Slider = React.forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAeM,MAAM,0DAAS,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,OAAO,KAA0B,EAAE,GAAiC;IAClH,IAAI,YAAC,QAAQ,eAAE,WAAW,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,cAAE,UAAU,iBAAE,aAAa,iBAAE,aAAa,EAAE,GAAG,YAAW,GAAG;IAEtH,IAAI,YAA+C;QACjD,GAAG,UAAU;QACb,iDAAiD;QACjD,OAAO,SAAS,OAAO;YAAC;SAAM,GAAG;QACjC,cAAc,gBAAgB,OAAO;YAAC;SAAa,GAAG;QACtD,UAAU,CAAC;YACT,qBAAA,+BAAA,SAAW,CAAC,CAAC,EAAE;QACjB;QACA,aAAa,CAAC;YACZ,wBAAA,kCAAA,YAAc,CAAC,CAAC,EAAE;QACpB;QACA,eAAe,gBAAgB,CAAC,CAAC,EAAE,GAAK,cAAc,KAAK;IAC7D;IAEA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,qBACE,0DAAC,CAAA,GAAA,oCAAS;QACP,GAAG,SAAS;QACb,KAAK;QACL,SAAS;YACP,2BAA2B,YAAY,cAAc;QACvD;QACA,OACE,aAAa;QACb;YAAC,oCAAoC,iBAAiB,CAAC,mBAAmB,EAAE,cAAc,QAAQ,UAAU,OAAO,EAAE,EAAE,cAAc,IAAI,CAAC,MAAM,CAAC,CAAC;QAAA;OAEnJ,CAAC,YAAC,QAAQ,YAAE,QAAQ,SAAE,KAAK,EAA2B;QACrD,aAAa,cAAc,OAAO,CAAA,GAAA,2BAAI,EAAE,YAAY,MAAM,gBAAgB,CAAC,IAAI,MAAM,gBAAgB,CAAC,MAAM;QAC5G,IAAI,eAAe,cAAc,QAAQ,UAAU;QAEnD,IAAI,2BACF,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;gBAC3C,wFAAwF;gBACxF,mBAAmB;gBACnB,4DAA4D;gBAC5D,qCAAqC;gBACrC,IAAI;gBACJ,aAAa;gBACb,oCAAoC,GAAG,AAAC,IAAI,MAAM,eAAe,CAAC,KAAM,IAAI,CAAC,CAAC;gBAC9E,wCAAwC,cAAc,QAAQ,MAAM;YACtE;;QAEJ,IAAI,2BACF,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,GAAG,AAAC,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAK,IAAI,CAAC,CAAC;gBACjD,aAAa;gBACb,oCAAoC,GAAG,AAAC,IAAK,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAM,IAAI,CAAC,CAAC;gBACpF,wCAAwC,cAAc,QAAQ,SAAS;YACzE;;QAGJ,IAAI,cAAyB;QAC7B,IAAI,YAAY,cAAc,MAAM;YAClC,IAAI,QAAQ,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC;YAC7D,IAAI,kBAAkB,QAAQ;YAC9B,IAAI,SAAS,kBAAkB,MAAM,eAAe,CAAC,cAAc,MAAM,eAAe,CAAC;YACzF,4BACE,0DAAC;gBACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,wBAAwB;oBAAC,+BAA+B;gBAAe;gBACrG,OAAO;oBACL,CAAC,aAAa,EAAE,GAAG,SAAS,IAAI,CAAC,CAAC;oBAClC,OAAO,GAAG,KAAK,GAAG,CAAC,SAAS,IAAI,CAAC,CAAC;gBACpC;;QAEN;QAEA,qBACE,sHACG,0BACD,0DAAC,CAAA,GAAA,qCAAU;YACT,OAAO;YACP,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,UAAU;YACV,OAAO;YACP,MAAM,MAAM,IAAI;YACjB,aACA;IAGP;AAGN","sources":["packages/@react-spectrum/slider/src/Slider.tsx"],"sourcesContent":["/*\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\nimport {clamp} from '@react-aria/utils';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {ReactNode} from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale} from '@react-aria/i18n';\n\n/**\n * 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.\n */\nexport const Slider = React.forwardRef(function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {\n let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;\n\n let baseProps: Omit<SliderBaseProps, 'children'> = {\n ...otherProps,\n // Normalize `value: number[]` to `value: number`\n value: value != null ? [value] : undefined,\n defaultValue: defaultValue != null ? [defaultValue] : undefined,\n onChange: (v: number[]): void => {\n onChange?.(v[0]);\n },\n onChangeEnd: (v: number[]): void => {\n onChangeEnd?.(v[0]);\n },\n getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined\n };\n\n let {direction} = useLocale();\n\n return (\n <SliderBase\n {...baseProps}\n ref={ref}\n classes={{\n 'spectrum-Slider--filled': isFilled && fillOffset == null\n }}\n style={\n // @ts-ignore\n {'--spectrum-slider-track-gradient': trackGradient && `linear-gradient(to ${direction === 'ltr' ? 'right' : 'left'}, ${trackGradient.join(', ')})`}\n }>\n {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n fillOffset = fillOffset != null ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n let lowerTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${state.getThumbPercent(0) * 100}%`,\n // TODO not sure if it has advantages, but this could also be implemented as CSS calc():\n // .track::before {\n // background-size: calc((1/ (var(--width)/100)) * 100%);\n // width: calc(var(--width) * 1%)M\n // }\n // @ts-ignore\n '--spectrum-track-background-size': `${(1 / state.getThumbPercent(0)) * 100}%`,\n '--spectrum-track-background-position': direction === 'ltr' ? '0' : '100%'\n }} />\n );\n let upperTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${(1 - state.getThumbPercent(0)) * 100}%`,\n // @ts-ignore\n '--spectrum-track-background-size': `${(1 / (1 - state.getThumbPercent(0))) * 100}%`,\n '--spectrum-track-background-position': direction === 'ltr' ? '100%' : '0'\n }} />\n );\n\n let filledTrack: ReactNode = null;\n if (isFilled && fillOffset != null) {\n let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = width > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n filledTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-fill', {'spectrum-Slider-fill--right': isRightOfOffset})}\n style={{\n [cssDirection]: `${offset * 100}%`,\n width: `${Math.abs(width) * 100}%`\n }} />\n );\n }\n\n return (\n <>\n {lowerTrack}\n <SliderThumb\n index={0}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n inputRef={inputRef}\n state={state}\n name={props.name} />\n {filledTrack}\n {upperTrack}\n </>\n );\n }}\n </SliderBase>\n );\n});\n"],"names":[],"version":3,"file":"Slider.main.js.map"}
package/dist/Slider.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {SliderBase as $39572711324a3b8e$export$9418495bb635ebde} from "./SliderBase.mjs";
2
2
  import {SliderThumb as $9058ca69d66a724f$export$2c1b491743890dec} from "./SliderThumb.mjs";
3
- import "./vars.0949d1ae.css";
3
+ import "./vars.fb2ba660.css";
4
4
  import $i1AIe$slider_vars_cssmodulejs from "./slider_vars_css.mjs";
5
5
  import {clamp as $i1AIe$clamp} from "@react-aria/utils";
6
6
  import {classNames as $i1AIe$classNames} from "@react-spectrum/utils";
@@ -28,7 +28,7 @@ function $parcel$interopDefault(a) {
28
28
 
29
29
 
30
30
 
31
- function $a1251704aa53e1a5$var$Slider(props, ref) {
31
+ const $a1251704aa53e1a5$export$472062a354075cee = /*#__PURE__*/ (0, $i1AIe$react).forwardRef(function Slider(props, ref) {
32
32
  let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, isFilled: isFilled, fillOffset: fillOffset, trackGradient: trackGradient, getValueLabel: getValueLabel, ...otherProps } = props;
33
33
  let baseProps = {
34
34
  ...otherProps,
@@ -108,10 +108,7 @@ function $a1251704aa53e1a5$var$Slider(props, ref) {
108
108
  name: props.name
109
109
  }), filledTrack, upperTrack);
110
110
  });
111
- }
112
- /**
113
- * 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.
114
- */ const $a1251704aa53e1a5$export$472062a354075cee = /*#__PURE__*/ (0, $i1AIe$react).forwardRef($a1251704aa53e1a5$var$Slider);
111
+ });
115
112
 
116
113
 
117
114
  export {$a1251704aa53e1a5$export$472062a354075cee as Slider};
@@ -1,6 +1,6 @@
1
1
  import {SliderBase as $39572711324a3b8e$export$9418495bb635ebde} from "./SliderBase.module.js";
2
2
  import {SliderThumb as $9058ca69d66a724f$export$2c1b491743890dec} from "./SliderThumb.module.js";
3
- import "./vars.0949d1ae.css";
3
+ import "./vars.fb2ba660.css";
4
4
  import $i1AIe$slider_vars_cssmodulejs from "./slider_vars_css.module.js";
5
5
  import {clamp as $i1AIe$clamp} from "@react-aria/utils";
6
6
  import {classNames as $i1AIe$classNames} from "@react-spectrum/utils";
@@ -28,7 +28,7 @@ function $parcel$interopDefault(a) {
28
28
 
29
29
 
30
30
 
31
- function $a1251704aa53e1a5$var$Slider(props, ref) {
31
+ const $a1251704aa53e1a5$export$472062a354075cee = /*#__PURE__*/ (0, $i1AIe$react).forwardRef(function Slider(props, ref) {
32
32
  let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, isFilled: isFilled, fillOffset: fillOffset, trackGradient: trackGradient, getValueLabel: getValueLabel, ...otherProps } = props;
33
33
  let baseProps = {
34
34
  ...otherProps,
@@ -108,10 +108,7 @@ function $a1251704aa53e1a5$var$Slider(props, ref) {
108
108
  name: props.name
109
109
  }), filledTrack, upperTrack);
110
110
  });
111
- }
112
- /**
113
- * 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.
114
- */ const $a1251704aa53e1a5$export$472062a354075cee = /*#__PURE__*/ (0, $i1AIe$react).forwardRef($a1251704aa53e1a5$var$Slider);
111
+ });
115
112
 
116
113
 
117
114
  export {$a1251704aa53e1a5$export$472062a354075cee as Slider};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAYD,SAAS,6BAAO,KAA0B,EAAE,GAAiC;IAC3E,IAAI,YAAC,QAAQ,eAAE,WAAW,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,cAAE,UAAU,iBAAE,aAAa,iBAAE,aAAa,EAAE,GAAG,YAAW,GAAG;IAEtH,IAAI,YAA+C;QACjD,GAAG,UAAU;QACb,iDAAiD;QACjD,OAAO,SAAS,OAAO;YAAC;SAAM,GAAG;QACjC,cAAc,gBAAgB,OAAO;YAAC;SAAa,GAAG;QACtD,UAAU,CAAC;YACT,qBAAA,+BAAA,SAAW,CAAC,CAAC,EAAE;QACjB;QACA,aAAa,CAAC;YACZ,wBAAA,kCAAA,YAAc,CAAC,CAAC,EAAE;QACpB;QACA,eAAe,gBAAgB,CAAC,CAAC,EAAE,GAAK,cAAc,KAAK;IAC7D;IAEA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,qBACE,gCAAC,CAAA,GAAA,yCAAS;QACP,GAAG,SAAS;QACb,KAAK;QACL,SAAS;YACP,2BAA2B,YAAY,cAAc;QACvD;QACA,OACE,aAAa;QACb;YAAC,oCAAoC,iBAAiB,CAAC,mBAAmB,EAAE,cAAc,QAAQ,UAAU,OAAO,EAAE,EAAE,cAAc,IAAI,CAAC,MAAM,CAAC,CAAC;QAAA;OAEnJ,CAAC,YAAC,QAAQ,YAAE,QAAQ,SAAE,KAAK,EAA2B;QACrD,aAAa,cAAc,OAAO,CAAA,GAAA,YAAI,EAAE,YAAY,MAAM,gBAAgB,CAAC,IAAI,MAAM,gBAAgB,CAAC,MAAM;QAC5G,IAAI,eAAe,cAAc,QAAQ,UAAU;QAEnD,IAAI,2BACF,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,GAAG,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;gBAC3C,wFAAwF;gBACxF,mBAAmB;gBACnB,4DAA4D;gBAC5D,qCAAqC;gBACrC,IAAI;gBACJ,aAAa;gBACb,oCAAoC,GAAG,AAAC,IAAI,MAAM,eAAe,CAAC,KAAM,IAAI,CAAC,CAAC;gBAC9E,wCAAwC,cAAc,QAAQ,MAAM;YACtE;;QAEJ,IAAI,2BACF,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,GAAG,AAAC,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAK,IAAI,CAAC,CAAC;gBACjD,aAAa;gBACb,oCAAoC,GAAG,AAAC,IAAK,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAM,IAAI,CAAC,CAAC;gBACpF,wCAAwC,cAAc,QAAQ,SAAS;YACzE;;QAGJ,IAAI,cAAyB;QAC7B,IAAI,YAAY,cAAc,MAAM;YAClC,IAAI,QAAQ,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC;YAC7D,IAAI,kBAAkB,QAAQ;YAC9B,IAAI,SAAS,kBAAkB,MAAM,eAAe,CAAC,cAAc,MAAM,eAAe,CAAC;YACzF,4BACE,gCAAC;gBACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG,wBAAwB;oBAAC,+BAA+B;gBAAe;gBACrG,OAAO;oBACL,CAAC,aAAa,EAAE,GAAG,SAAS,IAAI,CAAC,CAAC;oBAClC,OAAO,GAAG,KAAK,GAAG,CAAC,SAAS,IAAI,CAAC,CAAC;gBACpC;;QAEN;QAEA,qBACE,kEACG,0BACD,gCAAC,CAAA,GAAA,yCAAU;YACT,OAAO;YACP,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,UAAU;YACV,OAAO;YACP,MAAM,MAAM,IAAI;YACjB,aACA;IAGP;AAGN;AAEA;;CAEC,GACD,MAAM,0DAAU,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/slider/src/Slider.tsx"],"sourcesContent":["/*\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\nimport {clamp} from '@react-aria/utils';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {ReactNode} from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale} from '@react-aria/i18n';\n\nfunction Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {\n let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;\n\n let baseProps: Omit<SliderBaseProps, 'children'> = {\n ...otherProps,\n // Normalize `value: number[]` to `value: number`\n value: value != null ? [value] : undefined,\n defaultValue: defaultValue != null ? [defaultValue] : undefined,\n onChange: (v: number[]): void => {\n onChange?.(v[0]);\n },\n onChangeEnd: (v: number[]): void => {\n onChangeEnd?.(v[0]);\n },\n getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined\n };\n\n let {direction} = useLocale();\n\n return (\n <SliderBase\n {...baseProps}\n ref={ref}\n classes={{\n 'spectrum-Slider--filled': isFilled && fillOffset == null\n }}\n style={\n // @ts-ignore\n {'--spectrum-slider-track-gradient': trackGradient && `linear-gradient(to ${direction === 'ltr' ? 'right' : 'left'}, ${trackGradient.join(', ')})`}\n }>\n {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n fillOffset = fillOffset != null ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n let lowerTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${state.getThumbPercent(0) * 100}%`,\n // TODO not sure if it has advantages, but this could also be implemented as CSS calc():\n // .track::before {\n // background-size: calc((1/ (var(--width)/100)) * 100%);\n // width: calc(var(--width) * 1%)M\n // }\n // @ts-ignore\n '--spectrum-track-background-size': `${(1 / state.getThumbPercent(0)) * 100}%`,\n '--spectrum-track-background-position': direction === 'ltr' ? '0' : '100%'\n }} />\n );\n let upperTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${(1 - state.getThumbPercent(0)) * 100}%`,\n // @ts-ignore\n '--spectrum-track-background-size': `${(1 / (1 - state.getThumbPercent(0))) * 100}%`,\n '--spectrum-track-background-position': direction === 'ltr' ? '100%' : '0'\n }} />\n );\n\n let filledTrack: ReactNode = null;\n if (isFilled && fillOffset != null) {\n let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = width > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n filledTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-fill', {'spectrum-Slider-fill--right': isRightOfOffset})}\n style={{\n [cssDirection]: `${offset * 100}%`,\n width: `${Math.abs(width) * 100}%`\n }} />\n );\n }\n\n return (\n <>\n {lowerTrack}\n <SliderThumb\n index={0}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n inputRef={inputRef}\n state={state}\n name={props.name} />\n {filledTrack}\n {upperTrack}\n </>\n );\n }}\n </SliderBase>\n );\n}\n\n/**\n * 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.\n */\nconst _Slider = React.forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/slider/src/Slider.tsx"],"sourcesContent":["/*\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\nimport {clamp} from '@react-aria/utils';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {ReactNode} from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale} from '@react-aria/i18n';\n\n/**\n * 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.\n */\nexport const Slider = React.forwardRef(function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {\n let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;\n\n let baseProps: Omit<SliderBaseProps, 'children'> = {\n ...otherProps,\n // Normalize `value: number[]` to `value: number`\n value: value != null ? [value] : undefined,\n defaultValue: defaultValue != null ? [defaultValue] : undefined,\n onChange: (v: number[]): void => {\n onChange?.(v[0]);\n },\n onChangeEnd: (v: number[]): void => {\n onChangeEnd?.(v[0]);\n },\n getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined\n };\n\n let {direction} = useLocale();\n\n return (\n <SliderBase\n {...baseProps}\n ref={ref}\n classes={{\n 'spectrum-Slider--filled': isFilled && fillOffset == null\n }}\n style={\n // @ts-ignore\n {'--spectrum-slider-track-gradient': trackGradient && `linear-gradient(to ${direction === 'ltr' ? 'right' : 'left'}, ${trackGradient.join(', ')})`}\n }>\n {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n fillOffset = fillOffset != null ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n let lowerTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${state.getThumbPercent(0) * 100}%`,\n // TODO not sure if it has advantages, but this could also be implemented as CSS calc():\n // .track::before {\n // background-size: calc((1/ (var(--width)/100)) * 100%);\n // width: calc(var(--width) * 1%)M\n // }\n // @ts-ignore\n '--spectrum-track-background-size': `${(1 / state.getThumbPercent(0)) * 100}%`,\n '--spectrum-track-background-position': direction === 'ltr' ? '0' : '100%'\n }} />\n );\n let upperTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-track')}\n style={{\n width: `${(1 - state.getThumbPercent(0)) * 100}%`,\n // @ts-ignore\n '--spectrum-track-background-size': `${(1 / (1 - state.getThumbPercent(0))) * 100}%`,\n '--spectrum-track-background-position': direction === 'ltr' ? '100%' : '0'\n }} />\n );\n\n let filledTrack: ReactNode = null;\n if (isFilled && fillOffset != null) {\n let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = width > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n filledTrack = (\n <div\n className={classNames(styles, 'spectrum-Slider-fill', {'spectrum-Slider-fill--right': isRightOfOffset})}\n style={{\n [cssDirection]: `${offset * 100}%`,\n width: `${Math.abs(width) * 100}%`\n }} />\n );\n }\n\n return (\n <>\n {lowerTrack}\n <SliderThumb\n index={0}\n isDisabled={props.isDisabled}\n trackRef={trackRef}\n inputRef={inputRef}\n state={state}\n name={props.name} />\n {filledTrack}\n {upperTrack}\n </>\n );\n }}\n </SliderBase>\n );\n});\n"],"names":[],"version":3,"file":"Slider.module.js.map"}
@@ -1,4 +1,4 @@
1
- require("./vars.0949d1ae.css");
1
+ require("./vars.fb2ba660.css");
2
2
  var $57893a49ef34c169$exports = require("./slider_vars_css.main.js");
3
3
  var $2j89m$reactspectrumutils = require("@react-spectrum/utils");
4
4
  var $2j89m$react = require("react");
@@ -34,7 +34,7 @@ $parcel$export(module.exports, "SliderBase", () => $ec6ca573d82152ff$export$9418
34
34
 
35
35
 
36
36
 
37
- function $ec6ca573d82152ff$var$SliderBase(props, ref) {
37
+ const $ec6ca573d82152ff$export$9418495bb635ebde = /*#__PURE__*/ (0, ($parcel$interopDefault($2j89m$react))).forwardRef(function SliderBase(props, ref) {
38
38
  props = (0, $2j89m$reactspectrumprovider.useProviderProps)(props);
39
39
  let { isDisabled: isDisabled, children: children, classes: classes, style: style, labelPosition: labelPosition = 'top', getValueLabel: getValueLabel, showValueLabel: showValueLabel = !!props.label, formatOptions: formatOptions, minValue: minValue = 0, maxValue: maxValue = 100, ...otherProps } = props;
40
40
  let { styleProps: styleProps } = (0, $2j89m$reactspectrumutils.useStyleProps)(otherProps);
@@ -163,8 +163,7 @@ function $ec6ca573d82152ff$var$SliderBase(props, ref) {
163
163
  className: (0, $2j89m$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), 'spectrum-Slider-valueLabelContainer'),
164
164
  role: "presentation"
165
165
  }, showValueLabel && valueNode));
166
- }
167
- const $ec6ca573d82152ff$export$9418495bb635ebde = /*#__PURE__*/ (0, ($parcel$interopDefault($2j89m$react))).forwardRef($ec6ca573d82152ff$var$SliderBase);
166
+ });
168
167
 
169
168
 
170
169
  //# sourceMappingURL=SliderBase.main.js.map
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/slider/src/SliderBase.tsx"],"sourcesContent":["/*\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\nimport {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {FocusableRef, RefObject} from '@react-types/shared';\nimport React, {CSSProperties, ReactNode, useRef} from 'react';\nimport {SliderState, useSliderState} from '@react-stately/slider';\nimport {SpectrumBarSliderBase} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useNumberFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useSlider} from '@react-aria/slider';\n\nexport interface SliderBaseChildArguments {\n inputRef: RefObject<HTMLInputElement | null>,\n trackRef: RefObject<HTMLElement | null>,\n state: SliderState\n}\n\nexport interface SliderBaseProps<T = number[]> extends SpectrumBarSliderBase<T> {\n children: (opts: SliderBaseChildArguments) => ReactNode,\n classes?: string[] | Object,\n style?: CSSProperties\n}\n\nfunction SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n isDisabled,\n children,\n classes,\n style,\n labelPosition = 'top',\n getValueLabel,\n showValueLabel = !!props.label,\n formatOptions,\n minValue = 0,\n maxValue = 100,\n ...otherProps\n } = props;\n\n let {styleProps} = useStyleProps(otherProps);\n\n // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.\n let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;\n if (alwaysDisplaySign) {\n if (formatOptions != null) {\n if (!('signDisplay' in formatOptions)) {\n formatOptions = {\n ...formatOptions,\n signDisplay: 'exceptZero'\n };\n }\n } else {\n formatOptions = {signDisplay: 'exceptZero'};\n }\n }\n\n const formatter = useNumberFormatter(formatOptions);\n const state = useSliderState({\n ...props,\n numberFormatter: formatter,\n minValue,\n maxValue\n });\n let trackRef = useRef<HTMLDivElement | null>(null);\n let {\n groupProps,\n trackProps,\n labelProps,\n outputProps\n } = useSlider(props, state, trackRef);\n\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let displayValue = '';\n let maxLabelLength: number | null = null;\n\n if (typeof getValueLabel === 'function') {\n displayValue = getValueLabel(state.values);\n switch (state.values.length) {\n case 1:\n maxLabelLength = Math.max(\n getValueLabel([minValue]).length,\n getValueLabel([maxValue]).length\n );\n break;\n case 2:\n // Try all possible combinations of min and max values.\n maxLabelLength = Math.max(\n getValueLabel([minValue, minValue]).length,\n getValueLabel([minValue, maxValue]).length,\n getValueLabel([maxValue, minValue]).length,\n getValueLabel([maxValue, maxValue]).length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n } else {\n maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n displayValue = state.getThumbValueLabel(0);\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n displayValue = `${state.getThumbValueLabel(0)} – ${state.getThumbValueLabel(1)}`;\n maxLabelLength = 3 + 2 * Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n }\n\n let labelNode = (\n <label\n className={classNames(styles, 'spectrum-Slider-label')}\n {...labelProps}>\n {props.label}\n </label>\n );\n\n let valueNode = (\n <output\n {...outputProps}\n className={classNames(styles, 'spectrum-Slider-value')}\n style={maxLabelLength != null ? {width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`} : undefined}>\n {displayValue}\n </output>\n );\n\n return (\n <div\n ref={domRef}\n className={classNames(styles,\n 'spectrum-Slider',\n {\n 'spectrum-Slider--positionTop': labelPosition === 'top',\n 'spectrum-Slider--positionSide': labelPosition === 'side',\n 'is-disabled': isDisabled\n },\n classes,\n styleProps.className)}\n style={{\n ...style,\n ...styleProps.style\n }}\n {...groupProps}>\n {(props.label) &&\n <div className={classNames(styles, 'spectrum-Slider-labelContainer')} role=\"presentation\">\n {props.label && labelNode}\n {props.contextualHelp &&\n <SlotProvider\n slots={{\n actionButton: {\n UNSAFE_className: classNames(styles, 'spectrum-Slider-contextualHelp')\n }\n }}>\n {props.contextualHelp}\n </SlotProvider>\n }\n {labelPosition === 'top' && showValueLabel && valueNode}\n </div>\n }\n <div className={classNames(styles, 'spectrum-Slider-controls')} ref={trackRef} {...trackProps} role=\"presentation\">\n {children({\n trackRef,\n inputRef,\n state\n })}\n </div>\n {labelPosition === 'side' &&\n <div className={classNames(styles, 'spectrum-Slider-valueLabelContainer')} role=\"presentation\">\n {showValueLabel && valueNode}\n </div>\n }\n </div>\n );\n}\n\nconst _SliderBase = React.forwardRef(SliderBase);\nexport {_SliderBase as SliderBase};\n"],"names":[],"version":3,"file":"SliderBase.main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/slider/src/SliderBase.tsx"],"sourcesContent":["/*\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\nimport {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {FocusableRef, RefObject} from '@react-types/shared';\nimport React, {CSSProperties, ReactNode, useRef} from 'react';\nimport {SliderState, useSliderState} from '@react-stately/slider';\nimport {SpectrumBarSliderBase} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useNumberFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useSlider} from '@react-aria/slider';\n\nexport interface SliderBaseChildArguments {\n inputRef: RefObject<HTMLInputElement | null>,\n trackRef: RefObject<HTMLElement | null>,\n state: SliderState\n}\n\nexport interface SliderBaseProps<T = number[]> extends SpectrumBarSliderBase<T> {\n children: (opts: SliderBaseChildArguments) => ReactNode,\n classes?: string[] | Object,\n style?: CSSProperties\n}\n\nexport const SliderBase = React.forwardRef(function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n isDisabled,\n children,\n classes,\n style,\n labelPosition = 'top',\n getValueLabel,\n showValueLabel = !!props.label,\n formatOptions,\n minValue = 0,\n maxValue = 100,\n ...otherProps\n } = props;\n\n let {styleProps} = useStyleProps(otherProps);\n\n // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.\n let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;\n if (alwaysDisplaySign) {\n if (formatOptions != null) {\n if (!('signDisplay' in formatOptions)) {\n formatOptions = {\n ...formatOptions,\n signDisplay: 'exceptZero'\n };\n }\n } else {\n formatOptions = {signDisplay: 'exceptZero'};\n }\n }\n\n const formatter = useNumberFormatter(formatOptions);\n const state = useSliderState({\n ...props,\n numberFormatter: formatter,\n minValue,\n maxValue\n });\n let trackRef = useRef<HTMLDivElement | null>(null);\n let {\n groupProps,\n trackProps,\n labelProps,\n outputProps\n } = useSlider(props, state, trackRef);\n\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let displayValue = '';\n let maxLabelLength: number | null = null;\n\n if (typeof getValueLabel === 'function') {\n displayValue = getValueLabel(state.values);\n switch (state.values.length) {\n case 1:\n maxLabelLength = Math.max(\n getValueLabel([minValue]).length,\n getValueLabel([maxValue]).length\n );\n break;\n case 2:\n // Try all possible combinations of min and max values.\n maxLabelLength = Math.max(\n getValueLabel([minValue, minValue]).length,\n getValueLabel([minValue, maxValue]).length,\n getValueLabel([maxValue, minValue]).length,\n getValueLabel([maxValue, maxValue]).length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n } else {\n maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n displayValue = state.getThumbValueLabel(0);\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n displayValue = `${state.getThumbValueLabel(0)} – ${state.getThumbValueLabel(1)}`;\n maxLabelLength = 3 + 2 * Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n }\n\n let labelNode = (\n <label\n className={classNames(styles, 'spectrum-Slider-label')}\n {...labelProps}>\n {props.label}\n </label>\n );\n\n let valueNode = (\n <output\n {...outputProps}\n className={classNames(styles, 'spectrum-Slider-value')}\n style={maxLabelLength != null ? {width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`} : undefined}>\n {displayValue}\n </output>\n );\n\n return (\n <div\n ref={domRef}\n className={classNames(styles,\n 'spectrum-Slider',\n {\n 'spectrum-Slider--positionTop': labelPosition === 'top',\n 'spectrum-Slider--positionSide': labelPosition === 'side',\n 'is-disabled': isDisabled\n },\n classes,\n styleProps.className)}\n style={{\n ...style,\n ...styleProps.style\n }}\n {...groupProps}>\n {(props.label) &&\n <div className={classNames(styles, 'spectrum-Slider-labelContainer')} role=\"presentation\">\n {props.label && labelNode}\n {props.contextualHelp &&\n <SlotProvider\n slots={{\n actionButton: {\n UNSAFE_className: classNames(styles, 'spectrum-Slider-contextualHelp')\n }\n }}>\n {props.contextualHelp}\n </SlotProvider>\n }\n {labelPosition === 'top' && showValueLabel && valueNode}\n </div>\n }\n <div className={classNames(styles, 'spectrum-Slider-controls')} ref={trackRef} {...trackProps} role=\"presentation\">\n {children({\n trackRef,\n inputRef,\n state\n })}\n </div>\n {labelPosition === 'side' &&\n <div className={classNames(styles, 'spectrum-Slider-valueLabelContainer')} role=\"presentation\">\n {showValueLabel && valueNode}\n </div>\n }\n </div>\n );\n});\n"],"names":[],"version":3,"file":"SliderBase.main.js.map"}
@@ -1,4 +1,4 @@
1
- import "./vars.0949d1ae.css";
1
+ import "./vars.fb2ba660.css";
2
2
  import $63Ecs$slider_vars_cssmodulejs from "./slider_vars_css.mjs";
3
3
  import {useStyleProps as $63Ecs$useStyleProps, useFocusableRef as $63Ecs$useFocusableRef, classNames as $63Ecs$classNames, SlotProvider as $63Ecs$SlotProvider} from "@react-spectrum/utils";
4
4
  import $63Ecs$react, {useRef as $63Ecs$useRef} from "react";
@@ -28,7 +28,7 @@ function $parcel$interopDefault(a) {
28
28
 
29
29
 
30
30
 
31
- function $39572711324a3b8e$var$SliderBase(props, ref) {
31
+ const $39572711324a3b8e$export$9418495bb635ebde = /*#__PURE__*/ (0, $63Ecs$react).forwardRef(function SliderBase(props, ref) {
32
32
  props = (0, $63Ecs$useProviderProps)(props);
33
33
  let { isDisabled: isDisabled, children: children, classes: classes, style: style, labelPosition: labelPosition = 'top', getValueLabel: getValueLabel, showValueLabel: showValueLabel = !!props.label, formatOptions: formatOptions, minValue: minValue = 0, maxValue: maxValue = 100, ...otherProps } = props;
34
34
  let { styleProps: styleProps } = (0, $63Ecs$useStyleProps)(otherProps);
@@ -157,8 +157,7 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
157
157
  className: (0, $63Ecs$classNames)((0, ($parcel$interopDefault($63Ecs$slider_vars_cssmodulejs))), 'spectrum-Slider-valueLabelContainer'),
158
158
  role: "presentation"
159
159
  }, showValueLabel && valueNode));
160
- }
161
- const $39572711324a3b8e$export$9418495bb635ebde = /*#__PURE__*/ (0, $63Ecs$react).forwardRef($39572711324a3b8e$var$SliderBase);
160
+ });
162
161
 
163
162
 
164
163
  export {$39572711324a3b8e$export$9418495bb635ebde as SliderBase};
@@ -1,4 +1,4 @@
1
- import "./vars.0949d1ae.css";
1
+ import "./vars.fb2ba660.css";
2
2
  import $63Ecs$slider_vars_cssmodulejs from "./slider_vars_css.module.js";
3
3
  import {useStyleProps as $63Ecs$useStyleProps, useFocusableRef as $63Ecs$useFocusableRef, classNames as $63Ecs$classNames, SlotProvider as $63Ecs$SlotProvider} from "@react-spectrum/utils";
4
4
  import $63Ecs$react, {useRef as $63Ecs$useRef} from "react";
@@ -28,7 +28,7 @@ function $parcel$interopDefault(a) {
28
28
 
29
29
 
30
30
 
31
- function $39572711324a3b8e$var$SliderBase(props, ref) {
31
+ const $39572711324a3b8e$export$9418495bb635ebde = /*#__PURE__*/ (0, $63Ecs$react).forwardRef(function SliderBase(props, ref) {
32
32
  props = (0, $63Ecs$useProviderProps)(props);
33
33
  let { isDisabled: isDisabled, children: children, classes: classes, style: style, labelPosition: labelPosition = 'top', getValueLabel: getValueLabel, showValueLabel: showValueLabel = !!props.label, formatOptions: formatOptions, minValue: minValue = 0, maxValue: maxValue = 100, ...otherProps } = props;
34
34
  let { styleProps: styleProps } = (0, $63Ecs$useStyleProps)(otherProps);
@@ -157,8 +157,7 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
157
157
  className: (0, $63Ecs$classNames)((0, ($parcel$interopDefault($63Ecs$slider_vars_cssmodulejs))), 'spectrum-Slider-valueLabelContainer'),
158
158
  role: "presentation"
159
159
  }, showValueLabel && valueNode));
160
- }
161
- const $39572711324a3b8e$export$9418495bb635ebde = /*#__PURE__*/ (0, $63Ecs$react).forwardRef($39572711324a3b8e$var$SliderBase);
160
+ });
162
161
 
163
162
 
164
163
  export {$39572711324a3b8e$export$9418495bb635ebde as SliderBase};
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/slider/src/SliderBase.tsx"],"sourcesContent":["/*\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\nimport {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {FocusableRef, RefObject} from '@react-types/shared';\nimport React, {CSSProperties, ReactNode, useRef} from 'react';\nimport {SliderState, useSliderState} from '@react-stately/slider';\nimport {SpectrumBarSliderBase} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useNumberFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useSlider} from '@react-aria/slider';\n\nexport interface SliderBaseChildArguments {\n inputRef: RefObject<HTMLInputElement | null>,\n trackRef: RefObject<HTMLElement | null>,\n state: SliderState\n}\n\nexport interface SliderBaseProps<T = number[]> extends SpectrumBarSliderBase<T> {\n children: (opts: SliderBaseChildArguments) => ReactNode,\n classes?: string[] | Object,\n style?: CSSProperties\n}\n\nfunction SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n isDisabled,\n children,\n classes,\n style,\n labelPosition = 'top',\n getValueLabel,\n showValueLabel = !!props.label,\n formatOptions,\n minValue = 0,\n maxValue = 100,\n ...otherProps\n } = props;\n\n let {styleProps} = useStyleProps(otherProps);\n\n // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.\n let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;\n if (alwaysDisplaySign) {\n if (formatOptions != null) {\n if (!('signDisplay' in formatOptions)) {\n formatOptions = {\n ...formatOptions,\n signDisplay: 'exceptZero'\n };\n }\n } else {\n formatOptions = {signDisplay: 'exceptZero'};\n }\n }\n\n const formatter = useNumberFormatter(formatOptions);\n const state = useSliderState({\n ...props,\n numberFormatter: formatter,\n minValue,\n maxValue\n });\n let trackRef = useRef<HTMLDivElement | null>(null);\n let {\n groupProps,\n trackProps,\n labelProps,\n outputProps\n } = useSlider(props, state, trackRef);\n\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let displayValue = '';\n let maxLabelLength: number | null = null;\n\n if (typeof getValueLabel === 'function') {\n displayValue = getValueLabel(state.values);\n switch (state.values.length) {\n case 1:\n maxLabelLength = Math.max(\n getValueLabel([minValue]).length,\n getValueLabel([maxValue]).length\n );\n break;\n case 2:\n // Try all possible combinations of min and max values.\n maxLabelLength = Math.max(\n getValueLabel([minValue, minValue]).length,\n getValueLabel([minValue, maxValue]).length,\n getValueLabel([maxValue, minValue]).length,\n getValueLabel([maxValue, maxValue]).length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n } else {\n maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n displayValue = state.getThumbValueLabel(0);\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n displayValue = `${state.getThumbValueLabel(0)} – ${state.getThumbValueLabel(1)}`;\n maxLabelLength = 3 + 2 * Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n }\n\n let labelNode = (\n <label\n className={classNames(styles, 'spectrum-Slider-label')}\n {...labelProps}>\n {props.label}\n </label>\n );\n\n let valueNode = (\n <output\n {...outputProps}\n className={classNames(styles, 'spectrum-Slider-value')}\n style={maxLabelLength != null ? {width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`} : undefined}>\n {displayValue}\n </output>\n );\n\n return (\n <div\n ref={domRef}\n className={classNames(styles,\n 'spectrum-Slider',\n {\n 'spectrum-Slider--positionTop': labelPosition === 'top',\n 'spectrum-Slider--positionSide': labelPosition === 'side',\n 'is-disabled': isDisabled\n },\n classes,\n styleProps.className)}\n style={{\n ...style,\n ...styleProps.style\n }}\n {...groupProps}>\n {(props.label) &&\n <div className={classNames(styles, 'spectrum-Slider-labelContainer')} role=\"presentation\">\n {props.label && labelNode}\n {props.contextualHelp &&\n <SlotProvider\n slots={{\n actionButton: {\n UNSAFE_className: classNames(styles, 'spectrum-Slider-contextualHelp')\n }\n }}>\n {props.contextualHelp}\n </SlotProvider>\n }\n {labelPosition === 'top' && showValueLabel && valueNode}\n </div>\n }\n <div className={classNames(styles, 'spectrum-Slider-controls')} ref={trackRef} {...trackProps} role=\"presentation\">\n {children({\n trackRef,\n inputRef,\n state\n })}\n </div>\n {labelPosition === 'side' &&\n <div className={classNames(styles, 'spectrum-Slider-valueLabelContainer')} role=\"presentation\">\n {showValueLabel && valueNode}\n </div>\n }\n </div>\n );\n}\n\nconst _SliderBase = React.forwardRef(SliderBase);\nexport {_SliderBase as SliderBase};\n"],"names":[],"version":3,"file":"SliderBase.module.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwBM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAAsB,EAAE,GAAiC;IACtH,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,cACF,UAAU,YACV,QAAQ,WACR,OAAO,SACP,KAAK,iBACL,gBAAgB,sBAChB,aAAa,kBACb,iBAAiB,CAAC,CAAC,MAAM,KAAK,iBAC9B,aAAa,YACb,WAAW,aACX,WAAW,KACX,GAAG,YACJ,GAAG;IAEJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,6FAA6F;IAC7F,IAAI,oBAAoB,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,eAAe;IAChF,IAAI,mBAAmB;QACrB,IAAI,iBAAiB,MACnB;YAAA,IAAI,CAAE,CAAA,iBAAiB,aAAY,GACjC,gBAAgB;gBACd,GAAG,aAAa;gBAChB,aAAa;YACf;QACF,OAEA,gBAAgB;YAAC,aAAa;QAAY;IAE9C;IAEA,MAAM,YAAY,CAAA,GAAA,yBAAiB,EAAE;IACrC,MAAM,QAAQ,CAAA,GAAA,qBAAa,EAAE;QAC3B,GAAG,KAAK;QACR,iBAAiB;kBACjB;kBACA;IACF;IACA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAyB;IAC7C,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,eACV,WAAW,EACZ,GAAG,CAAA,GAAA,gBAAQ,EAAE,OAAO,OAAO;IAE5B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAElC,IAAI,eAAe;IACnB,IAAI,iBAAgC;IAEpC,IAAI,OAAO,kBAAkB,YAAY;QACvC,eAAe,cAAc,MAAM,MAAM;QACzC,OAAQ,MAAM,MAAM,CAAC,MAAM;YACzB,KAAK;gBACH,iBAAiB,KAAK,GAAG,CACvB,cAAc;oBAAC;iBAAS,EAAE,MAAM,EAChC,cAAc;oBAAC;iBAAS,EAAE,MAAM;gBAElC;YACF,KAAK;gBACH,uDAAuD;gBACvD,iBAAiB,KAAK,GAAG,CACvB,cAAc;oBAAC;oBAAU;iBAAS,EAAE,MAAM,EAC1C,cAAc;oBAAC;oBAAU;iBAAS,EAAE,MAAM,EAC1C,cAAc;oBAAC;oBAAU;iBAAS,EAAE,MAAM,EAC1C,cAAc;oBAAC;oBAAU;iBAAS,EAAE,MAAM;gBAE5C;YACF;gBACE,MAAM,IAAI,MAAM;QACpB;IACF,OAAO;QACL,iBAAiB,KAAK,GAAG,CAAC;eAAI,UAAU,MAAM,CAAC;SAAU,CAAC,MAAM,EAAE;eAAI,UAAU,MAAM,CAAC;SAAU,CAAC,MAAM;QACxG,OAAQ,MAAM,MAAM,CAAC,MAAM;YACzB,KAAK;gBACH,eAAe,MAAM,kBAAkB,CAAC;gBACxC;YACF,KAAK;gBACH,kEAAkE;gBAClE,6CAA6C;gBAC7C,iFAAiF;gBACjF,eAAe,GAAG,MAAM,kBAAkB,CAAC,GAAG,UAAG,EAAE,MAAM,kBAAkB,CAAC,IAAI;gBAChF,iBAAiB,IAAI,IAAI,KAAK,GAAG,CAC/B,gBACA;uBAAI,UAAU,MAAM,CAAC;iBAAU,CAAC,MAAM,EAAE;uBAAI,UAAU,MAAM,CAAC;iBAAU,CAAC,MAAM;gBAEhF;YACF;gBACE,MAAM,IAAI,MAAM;QACpB;IACF;IAEA,IAAI,0BACF,gCAAC;QACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;QAC7B,GAAG,UAAU;OACb,MAAM,KAAK;IAIhB,IAAI,0BACF,gCAAC;QACE,GAAG,WAAW;QACf,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;QAC9B,OAAO,kBAAkB,OAAO;YAAC,OAAO,GAAG,eAAe,EAAE,CAAC;YAAE,UAAU,GAAG,eAAe,EAAE,CAAC;QAAA,IAAI;OACjG;IAIL,qBACE,gCAAC;QACC,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GACzB,mBACA;YACE,gCAAgC,kBAAkB;YAClD,iCAAiC,kBAAkB;YACnD,eAAe;QACjB,GACA,SACA,WAAW,SAAS;QACtB,OAAO;YACL,GAAG,KAAK;YACR,GAAG,WAAW,KAAK;QACrB;QACC,GAAG,UAAU;OACb,AAAC,MAAM,KAAK,kBACX,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;QAAmC,MAAK;OACxE,MAAM,KAAK,IAAI,WACf,MAAM,cAAc,kBACnB,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,cAAc;gBACZ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YACvC;QACF;OACC,MAAM,cAAc,GAGxB,kBAAkB,SAAS,kBAAkB,0BAGlD,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;QAA6B,KAAK;QAAW,GAAG,UAAU;QAAE,MAAK;OACjG,SAAS;kBACR;kBACA;eACA;IACF,KAED,kBAAkB,wBACjB,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;QAAwC,MAAK;OAC7E,kBAAkB;AAK7B","sources":["packages/@react-spectrum/slider/src/SliderBase.tsx"],"sourcesContent":["/*\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\nimport {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {FocusableRef, RefObject} from '@react-types/shared';\nimport React, {CSSProperties, ReactNode, useRef} from 'react';\nimport {SliderState, useSliderState} from '@react-stately/slider';\nimport {SpectrumBarSliderBase} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useNumberFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useSlider} from '@react-aria/slider';\n\nexport interface SliderBaseChildArguments {\n inputRef: RefObject<HTMLInputElement | null>,\n trackRef: RefObject<HTMLElement | null>,\n state: SliderState\n}\n\nexport interface SliderBaseProps<T = number[]> extends SpectrumBarSliderBase<T> {\n children: (opts: SliderBaseChildArguments) => ReactNode,\n classes?: string[] | Object,\n style?: CSSProperties\n}\n\nexport const SliderBase = React.forwardRef(function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n isDisabled,\n children,\n classes,\n style,\n labelPosition = 'top',\n getValueLabel,\n showValueLabel = !!props.label,\n formatOptions,\n minValue = 0,\n maxValue = 100,\n ...otherProps\n } = props;\n\n let {styleProps} = useStyleProps(otherProps);\n\n // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.\n let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;\n if (alwaysDisplaySign) {\n if (formatOptions != null) {\n if (!('signDisplay' in formatOptions)) {\n formatOptions = {\n ...formatOptions,\n signDisplay: 'exceptZero'\n };\n }\n } else {\n formatOptions = {signDisplay: 'exceptZero'};\n }\n }\n\n const formatter = useNumberFormatter(formatOptions);\n const state = useSliderState({\n ...props,\n numberFormatter: formatter,\n minValue,\n maxValue\n });\n let trackRef = useRef<HTMLDivElement | null>(null);\n let {\n groupProps,\n trackProps,\n labelProps,\n outputProps\n } = useSlider(props, state, trackRef);\n\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let displayValue = '';\n let maxLabelLength: number | null = null;\n\n if (typeof getValueLabel === 'function') {\n displayValue = getValueLabel(state.values);\n switch (state.values.length) {\n case 1:\n maxLabelLength = Math.max(\n getValueLabel([minValue]).length,\n getValueLabel([maxValue]).length\n );\n break;\n case 2:\n // Try all possible combinations of min and max values.\n maxLabelLength = Math.max(\n getValueLabel([minValue, minValue]).length,\n getValueLabel([minValue, maxValue]).length,\n getValueLabel([maxValue, minValue]).length,\n getValueLabel([maxValue, maxValue]).length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n } else {\n maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n displayValue = state.getThumbValueLabel(0);\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n displayValue = `${state.getThumbValueLabel(0)} – ${state.getThumbValueLabel(1)}`;\n maxLabelLength = 3 + 2 * Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n }\n\n let labelNode = (\n <label\n className={classNames(styles, 'spectrum-Slider-label')}\n {...labelProps}>\n {props.label}\n </label>\n );\n\n let valueNode = (\n <output\n {...outputProps}\n className={classNames(styles, 'spectrum-Slider-value')}\n style={maxLabelLength != null ? {width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`} : undefined}>\n {displayValue}\n </output>\n );\n\n return (\n <div\n ref={domRef}\n className={classNames(styles,\n 'spectrum-Slider',\n {\n 'spectrum-Slider--positionTop': labelPosition === 'top',\n 'spectrum-Slider--positionSide': labelPosition === 'side',\n 'is-disabled': isDisabled\n },\n classes,\n styleProps.className)}\n style={{\n ...style,\n ...styleProps.style\n }}\n {...groupProps}>\n {(props.label) &&\n <div className={classNames(styles, 'spectrum-Slider-labelContainer')} role=\"presentation\">\n {props.label && labelNode}\n {props.contextualHelp &&\n <SlotProvider\n slots={{\n actionButton: {\n UNSAFE_className: classNames(styles, 'spectrum-Slider-contextualHelp')\n }\n }}>\n {props.contextualHelp}\n </SlotProvider>\n }\n {labelPosition === 'top' && showValueLabel && valueNode}\n </div>\n }\n <div className={classNames(styles, 'spectrum-Slider-controls')} ref={trackRef} {...trackProps} role=\"presentation\">\n {children({\n trackRef,\n inputRef,\n state\n })}\n </div>\n {labelPosition === 'side' &&\n <div className={classNames(styles, 'spectrum-Slider-valueLabelContainer')} role=\"presentation\">\n {showValueLabel && valueNode}\n </div>\n }\n </div>\n );\n});\n"],"names":[],"version":3,"file":"SliderBase.module.js.map"}
@@ -1,4 +1,4 @@
1
- require("./vars.0949d1ae.css");
1
+ require("./vars.fb2ba660.css");
2
2
  var $57893a49ef34c169$exports = require("./slider_vars_css.main.js");
3
3
  var $75NyJ$reactspectrumutils = require("@react-spectrum/utils");
4
4
  var $75NyJ$reactariafocus = require("@react-aria/focus");
@@ -1,4 +1,4 @@
1
- import "./vars.0949d1ae.css";
1
+ import "./vars.fb2ba660.css";
2
2
  import $fQERx$slider_vars_cssmodulejs from "./slider_vars_css.mjs";
3
3
  import {classNames as $fQERx$classNames} from "@react-spectrum/utils";
4
4
  import {FocusRing as $fQERx$FocusRing} from "@react-aria/focus";
@@ -1,4 +1,4 @@
1
- import "./vars.0949d1ae.css";
1
+ import "./vars.fb2ba660.css";
2
2
  import $fQERx$slider_vars_cssmodulejs from "./slider_vars_css.module.js";
3
3
  import {classNames as $fQERx$classNames} from "@react-spectrum/utils";
4
4
  import {FocusRing as $fQERx$FocusRing} from "@react-aria/focus";
@@ -1 +1 @@
1
- {"mappings":";;;AEoHA;;GAEG;AACH,OAAA,MAAM,qIAAkC,CAAC;AChCzC;;GAEG;AACH,OAAA,MAAM,+IAA4C,CAAC;AC1EnD,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"}
1
+ {"mappings":";;;AEsBA;;GAEG;AACH,OAAO,MAAM,qIA4FX,CAAC;AC9FH;;GAEG;AACH,OAAO,MAAM,+IA8DX,CAAC;ACxEH,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"}
@@ -432,9 +432,9 @@
432
432
  }
433
433
 
434
434
  .A-RCEa_spectrum-Slider-ramp svg {
435
- transform: logical rotate(0deg);
436
435
  block-size: 100%;
437
436
  inline-size: 100%;
437
+ transform: logical rotate(0deg);
438
438
  }
439
439
 
440
440
  .A-RCEa_spectrum-Slider-handle {
@@ -514,9 +514,9 @@
514
514
  }
515
515
 
516
516
  .A-RCEa_spectrum-Slider-labelContainer, .A-RCEa_spectrum-Slider-valueLabelContainer {
517
+ inline-size: auto;
517
518
  font-size: var(--spectrum-label-text-size, var(--spectrum-global-dimension-font-size-75));
518
519
  line-height: var(--spectrum-label-text-line-height, var(--spectrum-global-font-line-height-small));
519
- inline-size: auto;
520
520
  display: flex;
521
521
  position: relative;
522
522
  }
@@ -646,8 +646,8 @@
646
646
  }
647
647
 
648
648
  .A-RCEa_spectrum-Slider--color .A-RCEa_spectrum-Slider-controls, .A-RCEa_spectrum-Slider--color .A-RCEa_spectrum-Slider-controls:before, .A-RCEa_spectrum-Slider--color .A-RCEa_spectrum-Slider-track {
649
- block-size: var(--spectrum-slider-color-track-height, var(--spectrum-global-dimension-static-size-300));
650
649
  min-block-size: auto;
650
+ block-size: var(--spectrum-slider-color-track-height, var(--spectrum-global-dimension-static-size-300));
651
651
  inline-size: 100%;
652
652
  margin-inline-start: 0;
653
653
  }
@@ -675,11 +675,11 @@
675
675
  }
676
676
 
677
677
  .A-RCEa_spectrum-Dial {
678
- inline-size: var(--spectrum-dial-container-width, var(--spectrum-global-dimension-static-size-600));
679
- flex-direction: column;
680
678
  block-size: auto;
681
679
  min-block-size: 0;
682
680
  min-inline-size: 0;
681
+ inline-size: var(--spectrum-dial-container-width, var(--spectrum-global-dimension-static-size-600));
682
+ flex-direction: column;
683
683
  display: inline-flex;
684
684
  }
685
685
 
@@ -758,6 +758,8 @@
758
758
 
759
759
  .A-RCEa_spectrum-Dial-handle {
760
760
  border-width: var(--spectrum-slider-handle-border-size, var(--spectrum-alias-border-size-thick));
761
+ block-size: 100%;
762
+ inline-size: 100%;
761
763
  box-shadow: none;
762
764
  border-radius: var(--spectrum-dial-border-radius, var(--spectrum-alias-border-radius-large));
763
765
  transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles, 45deg)));
@@ -766,8 +768,6 @@
766
768
  transition: background-color var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out;
767
769
  top: var(--spectrum-global-dimension-size-100);
768
770
  bottom: var(--spectrum-global-dimension-size-100);
769
- block-size: 100%;
770
- inline-size: 100%;
771
771
  position: absolute;
772
772
  }
773
773
 
@@ -1186,4 +1186,4 @@
1186
1186
  --spectrum-slider-track-color-disabled: GrayText;
1187
1187
  }
1188
1188
  }
1189
- /*# sourceMappingURL=vars.0949d1ae.css.map */
1189
+ /*# sourceMappingURL=vars.fb2ba660.css.map */
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/slider/vars.css"],"sourcesContent":["/*\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@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.0949d1ae.css.map"}
1
+ {"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/slider/vars.css"],"sourcesContent":["/*\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@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.fb2ba660.css.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/slider",
3
- "version": "3.7.0",
3
+ "version": "3.7.1",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,16 +36,16 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/focus": "^3.19.0",
40
- "@react-aria/i18n": "^3.12.4",
41
- "@react-aria/interactions": "^3.22.5",
42
- "@react-aria/slider": "^3.7.14",
43
- "@react-aria/utils": "^3.26.0",
44
- "@react-aria/visually-hidden": "^3.8.18",
45
- "@react-spectrum/utils": "^3.12.0",
46
- "@react-stately/slider": "^3.6.0",
47
- "@react-types/shared": "^3.26.0",
48
- "@react-types/slider": "^3.7.7",
39
+ "@react-aria/focus": "^3.19.1",
40
+ "@react-aria/i18n": "^3.12.5",
41
+ "@react-aria/interactions": "^3.23.0",
42
+ "@react-aria/slider": "^3.7.15",
43
+ "@react-aria/utils": "^3.27.0",
44
+ "@react-aria/visually-hidden": "^3.8.19",
45
+ "@react-spectrum/utils": "^3.12.1",
46
+ "@react-stately/slider": "^3.6.1",
47
+ "@react-types/shared": "^3.27.0",
48
+ "@react-types/slider": "^3.7.8",
49
49
  "@swc/helpers": "^0.5.0"
50
50
  },
51
51
  "devDependencies": {
@@ -53,10 +53,11 @@
53
53
  },
54
54
  "peerDependencies": {
55
55
  "@react-spectrum/provider": "^3.0.0",
56
- "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
56
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
57
+ "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
57
58
  },
58
59
  "publishConfig": {
59
60
  "access": "public"
60
61
  },
61
- "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
62
+ "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
62
63
  }
@@ -21,7 +21,10 @@ import {SpectrumRangeSliderProps} from '@react-types/slider';
21
21
  import styles from '@adobe/spectrum-css-temp/components/slider/vars.css';
22
22
  import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
23
23
 
24
- function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
24
+ /**
25
+ * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
26
+ */
27
+ export const RangeSlider = React.forwardRef(function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
25
28
  let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;
26
29
 
27
30
  let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {
@@ -83,10 +86,4 @@ function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivE
83
86
  }}
84
87
  </SliderBase>
85
88
  );
86
- }
87
-
88
- /**
89
- * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
90
- */
91
- const _RangeSlider = React.forwardRef(RangeSlider);
92
- export {_RangeSlider as RangeSlider};
89
+ });
package/src/Slider.tsx CHANGED
@@ -20,7 +20,10 @@ import {SpectrumSliderProps} from '@react-types/slider';
20
20
  import styles from '@adobe/spectrum-css-temp/components/slider/vars.css';
21
21
  import {useLocale} from '@react-aria/i18n';
22
22
 
23
- function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
23
+ /**
24
+ * 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.
25
+ */
26
+ export const Slider = React.forwardRef(function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
24
27
  let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;
25
28
 
26
29
  let baseProps: Omit<SliderBaseProps, 'children'> = {
@@ -112,10 +115,4 @@ function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
112
115
  }}
113
116
  </SliderBase>
114
117
  );
115
- }
116
-
117
- /**
118
- * 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.
119
- */
120
- const _Slider = React.forwardRef(Slider);
121
- export {_Slider as Slider};
118
+ });
@@ -32,7 +32,7 @@ export interface SliderBaseProps<T = number[]> extends SpectrumBarSliderBase<T>
32
32
  style?: CSSProperties
33
33
  }
34
34
 
35
- function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
35
+ export const SliderBase = React.forwardRef(function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
36
36
  props = useProviderProps(props);
37
37
  let {
38
38
  isDisabled,
@@ -192,7 +192,4 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
192
192
  }
193
193
  </div>
194
194
  );
195
- }
196
-
197
- const _SliderBase = React.forwardRef(SliderBase);
198
- export {_SliderBase as SliderBase};
195
+ });