@react-spectrum/slider 3.6.13 → 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.
- package/dist/RangeSlider.main.js +3 -6
- package/dist/RangeSlider.main.js.map +1 -1
- package/dist/RangeSlider.mjs +3 -6
- package/dist/RangeSlider.module.js +3 -6
- package/dist/RangeSlider.module.js.map +1 -1
- package/dist/Slider.main.js +3 -6
- package/dist/Slider.main.js.map +1 -1
- package/dist/Slider.mjs +3 -6
- package/dist/Slider.module.js +3 -6
- package/dist/Slider.module.js.map +1 -1
- package/dist/SliderBase.main.js +9 -12
- package/dist/SliderBase.main.js.map +1 -1
- package/dist/SliderBase.mjs +9 -12
- package/dist/SliderBase.module.js +9 -12
- package/dist/SliderBase.module.js.map +1 -1
- package/dist/SliderThumb.main.js +2 -2
- package/dist/SliderThumb.main.js.map +1 -1
- package/dist/SliderThumb.mjs +2 -2
- package/dist/SliderThumb.module.js +2 -2
- package/dist/SliderThumb.module.js.map +1 -1
- package/dist/slider_vars_css.main.js.map +1 -1
- package/dist/slider_vars_css.module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.0949d1ae.css → vars.fb2ba660.css} +8 -8
- package/dist/{vars.0949d1ae.css.map → vars.fb2ba660.css.map} +1 -1
- package/package.json +14 -13
- package/src/RangeSlider.tsx +5 -8
- package/src/Slider.tsx +7 -10
- package/src/SliderBase.tsx +6 -11
- package/src/SliderThumb.tsx +1 -1
package/dist/RangeSlider.main.js
CHANGED
|
@@ -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.
|
|
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
|
-
|
|
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;;;;;;;
|
|
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"}
|
package/dist/RangeSlider.mjs
CHANGED
|
@@ -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.
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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;;;;;;;
|
|
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"}
|
package/dist/Slider.main.js
CHANGED
|
@@ -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.
|
|
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
|
-
|
|
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
|
package/dist/Slider.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
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.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.
|
|
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
|
-
|
|
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};
|
package/dist/Slider.module.js
CHANGED
|
@@ -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.
|
|
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
|
-
|
|
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;;;;;;;
|
|
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"}
|
package/dist/SliderBase.main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require("./vars.
|
|
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
|
-
|
|
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);
|
|
@@ -44,11 +44,9 @@ function $ec6ca573d82152ff$var$SliderBase(props, ref) {
|
|
|
44
44
|
if (formatOptions != null) {
|
|
45
45
|
if (!('signDisplay' in formatOptions)) formatOptions = {
|
|
46
46
|
...formatOptions,
|
|
47
|
-
// @ts-ignore
|
|
48
47
|
signDisplay: 'exceptZero'
|
|
49
48
|
};
|
|
50
|
-
} else
|
|
51
|
-
formatOptions = {
|
|
49
|
+
} else formatOptions = {
|
|
52
50
|
signDisplay: 'exceptZero'
|
|
53
51
|
};
|
|
54
52
|
}
|
|
@@ -59,12 +57,12 @@ function $ec6ca573d82152ff$var$SliderBase(props, ref) {
|
|
|
59
57
|
minValue: minValue,
|
|
60
58
|
maxValue: maxValue
|
|
61
59
|
});
|
|
62
|
-
let trackRef = (0, $2j89m$react.useRef)(
|
|
60
|
+
let trackRef = (0, $2j89m$react.useRef)(null);
|
|
63
61
|
let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $2j89m$reactariaslider.useSlider)(props, state, trackRef);
|
|
64
|
-
let inputRef = (0, $2j89m$react.useRef)(
|
|
62
|
+
let inputRef = (0, $2j89m$react.useRef)(null);
|
|
65
63
|
let domRef = (0, $2j89m$reactspectrumutils.useFocusableRef)(ref, inputRef);
|
|
66
64
|
let displayValue = '';
|
|
67
|
-
let maxLabelLength =
|
|
65
|
+
let maxLabelLength = null;
|
|
68
66
|
if (typeof getValueLabel === 'function') {
|
|
69
67
|
displayValue = getValueLabel(state.values);
|
|
70
68
|
switch(state.values.length){
|
|
@@ -126,10 +124,10 @@ function $ec6ca573d82152ff$var$SliderBase(props, ref) {
|
|
|
126
124
|
let valueNode = /*#__PURE__*/ (0, ($parcel$interopDefault($2j89m$react))).createElement("output", {
|
|
127
125
|
...outputProps,
|
|
128
126
|
className: (0, $2j89m$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), 'spectrum-Slider-value'),
|
|
129
|
-
style: maxLabelLength
|
|
127
|
+
style: maxLabelLength != null ? {
|
|
130
128
|
width: `${maxLabelLength}ch`,
|
|
131
129
|
minWidth: `${maxLabelLength}ch`
|
|
132
|
-
}
|
|
130
|
+
} : undefined
|
|
133
131
|
}, displayValue);
|
|
134
132
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($2j89m$react))).createElement("div", {
|
|
135
133
|
ref: domRef,
|
|
@@ -165,8 +163,7 @@ function $ec6ca573d82152ff$var$SliderBase(props, ref) {
|
|
|
165
163
|
className: (0, $2j89m$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), 'spectrum-Slider-valueLabelContainer'),
|
|
166
164
|
role: "presentation"
|
|
167
165
|
}, showValueLabel && valueNode));
|
|
168
|
-
}
|
|
169
|
-
const $ec6ca573d82152ff$export$9418495bb635ebde = /*#__PURE__*/ (0, ($parcel$interopDefault($2j89m$react))).forwardRef($ec6ca573d82152ff$var$SliderBase);
|
|
166
|
+
});
|
|
170
167
|
|
|
171
168
|
|
|
172
169
|
//# sourceMappingURL=SliderBase.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
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"}
|
package/dist/SliderBase.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
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
|
-
|
|
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);
|
|
@@ -38,11 +38,9 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
|
|
|
38
38
|
if (formatOptions != null) {
|
|
39
39
|
if (!('signDisplay' in formatOptions)) formatOptions = {
|
|
40
40
|
...formatOptions,
|
|
41
|
-
// @ts-ignore
|
|
42
41
|
signDisplay: 'exceptZero'
|
|
43
42
|
};
|
|
44
|
-
} else
|
|
45
|
-
formatOptions = {
|
|
43
|
+
} else formatOptions = {
|
|
46
44
|
signDisplay: 'exceptZero'
|
|
47
45
|
};
|
|
48
46
|
}
|
|
@@ -53,12 +51,12 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
|
|
|
53
51
|
minValue: minValue,
|
|
54
52
|
maxValue: maxValue
|
|
55
53
|
});
|
|
56
|
-
let trackRef = (0, $63Ecs$useRef)(
|
|
54
|
+
let trackRef = (0, $63Ecs$useRef)(null);
|
|
57
55
|
let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $63Ecs$useSlider)(props, state, trackRef);
|
|
58
|
-
let inputRef = (0, $63Ecs$useRef)(
|
|
56
|
+
let inputRef = (0, $63Ecs$useRef)(null);
|
|
59
57
|
let domRef = (0, $63Ecs$useFocusableRef)(ref, inputRef);
|
|
60
58
|
let displayValue = '';
|
|
61
|
-
let maxLabelLength =
|
|
59
|
+
let maxLabelLength = null;
|
|
62
60
|
if (typeof getValueLabel === 'function') {
|
|
63
61
|
displayValue = getValueLabel(state.values);
|
|
64
62
|
switch(state.values.length){
|
|
@@ -120,10 +118,10 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
|
|
|
120
118
|
let valueNode = /*#__PURE__*/ (0, $63Ecs$react).createElement("output", {
|
|
121
119
|
...outputProps,
|
|
122
120
|
className: (0, $63Ecs$classNames)((0, ($parcel$interopDefault($63Ecs$slider_vars_cssmodulejs))), 'spectrum-Slider-value'),
|
|
123
|
-
style: maxLabelLength
|
|
121
|
+
style: maxLabelLength != null ? {
|
|
124
122
|
width: `${maxLabelLength}ch`,
|
|
125
123
|
minWidth: `${maxLabelLength}ch`
|
|
126
|
-
}
|
|
124
|
+
} : undefined
|
|
127
125
|
}, displayValue);
|
|
128
126
|
return /*#__PURE__*/ (0, $63Ecs$react).createElement("div", {
|
|
129
127
|
ref: domRef,
|
|
@@ -159,8 +157,7 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
|
|
|
159
157
|
className: (0, $63Ecs$classNames)((0, ($parcel$interopDefault($63Ecs$slider_vars_cssmodulejs))), 'spectrum-Slider-valueLabelContainer'),
|
|
160
158
|
role: "presentation"
|
|
161
159
|
}, showValueLabel && valueNode));
|
|
162
|
-
}
|
|
163
|
-
const $39572711324a3b8e$export$9418495bb635ebde = /*#__PURE__*/ (0, $63Ecs$react).forwardRef($39572711324a3b8e$var$SliderBase);
|
|
160
|
+
});
|
|
164
161
|
|
|
165
162
|
|
|
166
163
|
export {$39572711324a3b8e$export$9418495bb635ebde as SliderBase};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
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
|
-
|
|
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);
|
|
@@ -38,11 +38,9 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
|
|
|
38
38
|
if (formatOptions != null) {
|
|
39
39
|
if (!('signDisplay' in formatOptions)) formatOptions = {
|
|
40
40
|
...formatOptions,
|
|
41
|
-
// @ts-ignore
|
|
42
41
|
signDisplay: 'exceptZero'
|
|
43
42
|
};
|
|
44
|
-
} else
|
|
45
|
-
formatOptions = {
|
|
43
|
+
} else formatOptions = {
|
|
46
44
|
signDisplay: 'exceptZero'
|
|
47
45
|
};
|
|
48
46
|
}
|
|
@@ -53,12 +51,12 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
|
|
|
53
51
|
minValue: minValue,
|
|
54
52
|
maxValue: maxValue
|
|
55
53
|
});
|
|
56
|
-
let trackRef = (0, $63Ecs$useRef)(
|
|
54
|
+
let trackRef = (0, $63Ecs$useRef)(null);
|
|
57
55
|
let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $63Ecs$useSlider)(props, state, trackRef);
|
|
58
|
-
let inputRef = (0, $63Ecs$useRef)(
|
|
56
|
+
let inputRef = (0, $63Ecs$useRef)(null);
|
|
59
57
|
let domRef = (0, $63Ecs$useFocusableRef)(ref, inputRef);
|
|
60
58
|
let displayValue = '';
|
|
61
|
-
let maxLabelLength =
|
|
59
|
+
let maxLabelLength = null;
|
|
62
60
|
if (typeof getValueLabel === 'function') {
|
|
63
61
|
displayValue = getValueLabel(state.values);
|
|
64
62
|
switch(state.values.length){
|
|
@@ -120,10 +118,10 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
|
|
|
120
118
|
let valueNode = /*#__PURE__*/ (0, $63Ecs$react).createElement("output", {
|
|
121
119
|
...outputProps,
|
|
122
120
|
className: (0, $63Ecs$classNames)((0, ($parcel$interopDefault($63Ecs$slider_vars_cssmodulejs))), 'spectrum-Slider-value'),
|
|
123
|
-
style: maxLabelLength
|
|
121
|
+
style: maxLabelLength != null ? {
|
|
124
122
|
width: `${maxLabelLength}ch`,
|
|
125
123
|
minWidth: `${maxLabelLength}ch`
|
|
126
|
-
}
|
|
124
|
+
} : undefined
|
|
127
125
|
}, displayValue);
|
|
128
126
|
return /*#__PURE__*/ (0, $63Ecs$react).createElement("div", {
|
|
129
127
|
ref: domRef,
|
|
@@ -159,8 +157,7 @@ function $39572711324a3b8e$var$SliderBase(props, ref) {
|
|
|
159
157
|
className: (0, $63Ecs$classNames)((0, ($parcel$interopDefault($63Ecs$slider_vars_cssmodulejs))), 'spectrum-Slider-valueLabelContainer'),
|
|
160
158
|
role: "presentation"
|
|
161
159
|
}, showValueLabel && valueNode));
|
|
162
|
-
}
|
|
163
|
-
const $39572711324a3b8e$export$9418495bb635ebde = /*#__PURE__*/ (0, $63Ecs$react).forwardRef($39572711324a3b8e$var$SliderBase);
|
|
160
|
+
});
|
|
164
161
|
|
|
165
162
|
|
|
166
163
|
export {$39572711324a3b8e$export$9418495bb635ebde as SliderBase};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
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.module.js.map"}
|
package/dist/SliderThumb.main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require("./vars.
|
|
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");
|
|
@@ -38,7 +38,7 @@ $parcel$export(module.exports, "SliderThumb", () => $77acc7fb8bfd13d6$export$2c1
|
|
|
38
38
|
|
|
39
39
|
function $77acc7fb8bfd13d6$export$2c1b491743890dec(props) {
|
|
40
40
|
let { inputRef: inputRef, state: state } = props;
|
|
41
|
-
let backupRef = (0, $75NyJ$react.useRef)(
|
|
41
|
+
let backupRef = (0, $75NyJ$react.useRef)(null);
|
|
42
42
|
inputRef = inputRef || backupRef;
|
|
43
43
|
let { thumbProps: thumbProps, inputProps: inputProps, isDragging: isDragging, isFocused: isFocused } = (0, $75NyJ$reactariaslider.useSliderThumb)({
|
|
44
44
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAoBM,SAAS,0CAAY,KAAuB;IACjD,IAAI,YACF,QAAQ,SACR,KAAK,EACN,GAAG;IACJ,IAAI,YAAY,CAAA,GAAA,mBAAK,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAoBM,SAAS,0CAAY,KAAuB;IACjD,IAAI,YACF,QAAQ,SACR,KAAK,EACN,GAAG;IACJ,IAAI,YAAY,CAAA,GAAA,mBAAK,EAA2B;IAChD,WAAW,YAAY;IAEvB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAa,EAAE;QACnE,GAAG,KAAK;kBACR;IACF,GAAG;IAEH,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE,CAAC;IAExC,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,QAAA;QAAO,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACnD,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,0BACA;YACE,cAAc;YACd,cAAc;YACd,gBAAgB;QAClB;QAGH,GAAG,CAAA,GAAA,gCAAS,EAAE,YAAY,WAAW;QACtC,MAAK;qBACL,0DAAC,CAAA,GAAA,6CAAa,uBACZ,0DAAC;QAAM,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA0B,KAAK;QAAW,GAAG,UAAU;;AAKtG","sources":["packages/@react-spectrum/slider/src/SliderThumb.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 {AriaSliderThumbProps} from '@react-types/slider';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useRef} from 'react';\nimport {RefObject} from '@react-types/shared';\nimport {SliderState} from '@react-stately/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useHover} from '@react-aria/interactions';\nimport {useSliderThumb} from '@react-aria/slider';\nimport {VisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface SliderThumbProps extends AriaSliderThumbProps {\n trackRef: RefObject<HTMLElement | null>,\n inputRef?: RefObject<HTMLInputElement | null>,\n state: SliderState\n}\n\nexport function SliderThumb(props: SliderThumbProps) {\n let {\n inputRef,\n state\n } = props;\n let backupRef = useRef<HTMLInputElement | null>(null);\n inputRef = inputRef || backupRef;\n\n let {thumbProps, inputProps, isDragging, isFocused} = useSliderThumb({\n ...props,\n inputRef\n }, state);\n\n let {hoverProps, isHovered} = useHover({});\n\n return (\n <FocusRing within focusRingClass={classNames(styles, 'is-focused')}>\n <div\n className={\n classNames(\n styles,\n 'spectrum-Slider-handle',\n {\n 'is-hovered': isHovered,\n 'is-dragged': isDragging,\n 'is-tophandle': isFocused\n }\n )\n }\n {...mergeProps(thumbProps, hoverProps)}\n role=\"presentation\">\n <VisuallyHidden>\n <input className={classNames(styles, 'spectrum-Slider-input')} ref={inputRef} {...inputProps} />\n </VisuallyHidden>\n </div>\n </FocusRing>\n );\n}\n"],"names":[],"version":3,"file":"SliderThumb.main.js.map"}
|
package/dist/SliderThumb.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
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";
|
|
@@ -32,7 +32,7 @@ function $parcel$interopDefault(a) {
|
|
|
32
32
|
|
|
33
33
|
function $9058ca69d66a724f$export$2c1b491743890dec(props) {
|
|
34
34
|
let { inputRef: inputRef, state: state } = props;
|
|
35
|
-
let backupRef = (0, $fQERx$useRef)(
|
|
35
|
+
let backupRef = (0, $fQERx$useRef)(null);
|
|
36
36
|
inputRef = inputRef || backupRef;
|
|
37
37
|
let { thumbProps: thumbProps, inputProps: inputProps, isDragging: isDragging, isFocused: isFocused } = (0, $fQERx$useSliderThumb)({
|
|
38
38
|
...props,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
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";
|
|
@@ -32,7 +32,7 @@ function $parcel$interopDefault(a) {
|
|
|
32
32
|
|
|
33
33
|
function $9058ca69d66a724f$export$2c1b491743890dec(props) {
|
|
34
34
|
let { inputRef: inputRef, state: state } = props;
|
|
35
|
-
let backupRef = (0, $fQERx$useRef)(
|
|
35
|
+
let backupRef = (0, $fQERx$useRef)(null);
|
|
36
36
|
inputRef = inputRef || backupRef;
|
|
37
37
|
let { thumbProps: thumbProps, inputProps: inputProps, isDragging: isDragging, isFocused: isFocused } = (0, $fQERx$useSliderThumb)({
|
|
38
38
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAoBM,SAAS,0CAAY,KAAuB;IACjD,IAAI,YACF,QAAQ,SACR,KAAK,EACN,GAAG;IACJ,IAAI,YAAY,CAAA,GAAA,aAAK,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAoBM,SAAS,0CAAY,KAAuB;IACjD,IAAI,YACF,QAAQ,SACR,KAAK,EACN,GAAG;IACJ,IAAI,YAAY,CAAA,GAAA,aAAK,EAA2B;IAChD,WAAW,YAAY;IAEvB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACnE,GAAG,KAAK;kBACR;IACF,GAAG;IAEH,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE,CAAC;IAExC,qBACE,gCAAC,CAAA,GAAA,gBAAQ;QAAE,QAAA;QAAO,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;qBACnD,gCAAC;QACC,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,wDAAK,GACL,0BACA;YACE,cAAc;YACd,cAAc;YACd,gBAAgB;QAClB;QAGH,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,WAAW;QACtC,MAAK;qBACL,gCAAC,CAAA,GAAA,qBAAa,uBACZ,gCAAC;QAAM,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;QAA0B,KAAK;QAAW,GAAG,UAAU;;AAKtG","sources":["packages/@react-spectrum/slider/src/SliderThumb.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 {AriaSliderThumbProps} from '@react-types/slider';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useRef} from 'react';\nimport {RefObject} from '@react-types/shared';\nimport {SliderState} from '@react-stately/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useHover} from '@react-aria/interactions';\nimport {useSliderThumb} from '@react-aria/slider';\nimport {VisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface SliderThumbProps extends AriaSliderThumbProps {\n trackRef: RefObject<HTMLElement | null>,\n inputRef?: RefObject<HTMLInputElement | null>,\n state: SliderState\n}\n\nexport function SliderThumb(props: SliderThumbProps) {\n let {\n inputRef,\n state\n } = props;\n let backupRef = useRef<HTMLInputElement | null>(null);\n inputRef = inputRef || backupRef;\n\n let {thumbProps, inputProps, isDragging, isFocused} = useSliderThumb({\n ...props,\n inputRef\n }, state);\n\n let {hoverProps, isHovered} = useHover({});\n\n return (\n <FocusRing within focusRingClass={classNames(styles, 'is-focused')}>\n <div\n className={\n classNames(\n styles,\n 'spectrum-Slider-handle',\n {\n 'is-hovered': isHovered,\n 'is-dragged': isDragging,\n 'is-tophandle': isFocused\n }\n )\n }\n {...mergeProps(thumbProps, hoverProps)}\n role=\"presentation\">\n <VisuallyHidden>\n <input className={classNames(styles, 'spectrum-Slider-input')} ref={inputRef} {...inputProps} />\n </VisuallyHidden>\n </div>\n </FocusRing>\n );\n}\n"],"names":[],"version":3,"file":"SliderThumb.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AA7CA,0CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAAkC,CAAC,qBAAqB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AA7CA,0CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAAkC,CAAC,qBAAqB,EAAE,2CAAmC;AAC7F,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA2C,CAAC,8BAA8B,EAAE,2CAA4C;AACxH,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAAyC,CAAC,4BAA4B,EAAE,2CAA0C;AAClH,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAAwC,CAAC,2BAA2B,EAAE,2CAAyC;AAC/G,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAiD,CAAC,oCAAoC,EAAE,2CAAkD;AAC1I,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,2CAA2C;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,2CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,2CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA0B,CAAC,YAAY,CAAC","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":"slider_vars_css.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AA7CA,0CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAAkC,CAAC,qBAAqB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AA7CA,0CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAAkC,CAAC,qBAAqB,EAAE,2CAAmC;AAC7F,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA2C,CAAC,8BAA8B,EAAE,2CAA4C;AACxH,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAAyC,CAAC,4BAA4B,EAAE,2CAA0C;AAClH,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAAwC,CAAC,2BAA2B,EAAE,2CAAyC;AAC/G,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAiD,CAAC,oCAAoC,EAAE,2CAAkD;AAC1I,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,2CAA2C;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,2CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,2CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA0B,CAAC,YAAY,CAAC","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":"slider_vars_css.module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
40
|
-
"@react-aria/i18n": "^3.12.
|
|
41
|
-
"@react-aria/interactions": "^3.
|
|
42
|
-
"@react-aria/slider": "^3.7.
|
|
43
|
-
"@react-aria/utils": "^3.
|
|
44
|
-
"@react-aria/visually-hidden": "^3.8.
|
|
45
|
-
"@react-spectrum/utils": "^3.
|
|
46
|
-
"@react-stately/slider": "^3.
|
|
47
|
-
"@react-types/shared": "^3.
|
|
48
|
-
"@react-types/slider": "^3.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"
|
|
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": "
|
|
62
|
+
"gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
|
|
62
63
|
}
|
package/src/RangeSlider.tsx
CHANGED
|
@@ -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
|
-
|
|
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
|
@@ -13,14 +13,17 @@
|
|
|
13
13
|
import {clamp} from '@react-aria/utils';
|
|
14
14
|
import {classNames} from '@react-spectrum/utils';
|
|
15
15
|
import {FocusableRef} from '@react-types/shared';
|
|
16
|
-
import React from 'react';
|
|
16
|
+
import React, {ReactNode} from 'react';
|
|
17
17
|
import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';
|
|
18
18
|
import {SliderThumb} from './SliderThumb';
|
|
19
19
|
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
|
-
|
|
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'> = {
|
|
@@ -80,7 +83,7 @@ function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
|
|
|
80
83
|
}} />
|
|
81
84
|
);
|
|
82
85
|
|
|
83
|
-
let filledTrack = null;
|
|
86
|
+
let filledTrack: ReactNode = null;
|
|
84
87
|
if (isFilled && fillOffset != null) {
|
|
85
88
|
let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
|
|
86
89
|
let isRightOfOffset = width > 0;
|
|
@@ -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
|
+
});
|
package/src/SliderBase.tsx
CHANGED
|
@@ -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,
|
|
@@ -57,12 +57,10 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
|
|
|
57
57
|
if (!('signDisplay' in formatOptions)) {
|
|
58
58
|
formatOptions = {
|
|
59
59
|
...formatOptions,
|
|
60
|
-
// @ts-ignore
|
|
61
60
|
signDisplay: 'exceptZero'
|
|
62
61
|
};
|
|
63
62
|
}
|
|
64
63
|
} else {
|
|
65
|
-
// @ts-ignore
|
|
66
64
|
formatOptions = {signDisplay: 'exceptZero'};
|
|
67
65
|
}
|
|
68
66
|
}
|
|
@@ -74,7 +72,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
|
|
|
74
72
|
minValue,
|
|
75
73
|
maxValue
|
|
76
74
|
});
|
|
77
|
-
let trackRef = useRef(
|
|
75
|
+
let trackRef = useRef<HTMLDivElement | null>(null);
|
|
78
76
|
let {
|
|
79
77
|
groupProps,
|
|
80
78
|
trackProps,
|
|
@@ -82,11 +80,11 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
|
|
|
82
80
|
outputProps
|
|
83
81
|
} = useSlider(props, state, trackRef);
|
|
84
82
|
|
|
85
|
-
let inputRef = useRef(
|
|
83
|
+
let inputRef = useRef<HTMLInputElement | null>(null);
|
|
86
84
|
let domRef = useFocusableRef(ref, inputRef);
|
|
87
85
|
|
|
88
86
|
let displayValue = '';
|
|
89
|
-
let maxLabelLength =
|
|
87
|
+
let maxLabelLength: number | null = null;
|
|
90
88
|
|
|
91
89
|
if (typeof getValueLabel === 'function') {
|
|
92
90
|
displayValue = getValueLabel(state.values);
|
|
@@ -142,7 +140,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
|
|
|
142
140
|
<output
|
|
143
141
|
{...outputProps}
|
|
144
142
|
className={classNames(styles, 'spectrum-Slider-value')}
|
|
145
|
-
style={maxLabelLength
|
|
143
|
+
style={maxLabelLength != null ? {width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`} : undefined}>
|
|
146
144
|
{displayValue}
|
|
147
145
|
</output>
|
|
148
146
|
);
|
|
@@ -194,7 +192,4 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
|
|
|
194
192
|
}
|
|
195
193
|
</div>
|
|
196
194
|
);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
const _SliderBase = React.forwardRef(SliderBase);
|
|
200
|
-
export {_SliderBase as SliderBase};
|
|
195
|
+
});
|
package/src/SliderThumb.tsx
CHANGED
|
@@ -33,7 +33,7 @@ export function SliderThumb(props: SliderThumbProps) {
|
|
|
33
33
|
inputRef,
|
|
34
34
|
state
|
|
35
35
|
} = props;
|
|
36
|
-
let backupRef = useRef<HTMLInputElement>(
|
|
36
|
+
let backupRef = useRef<HTMLInputElement | null>(null);
|
|
37
37
|
inputRef = inputRef || backupRef;
|
|
38
38
|
|
|
39
39
|
let {thumbProps, inputProps, isDragging, isFocused} = useSliderThumb({
|