@fluentui/react-slider 9.0.0-beta.10 → 9.0.0-beta.13

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.
Files changed (36) hide show
  1. package/CHANGELOG.json +152 -1
  2. package/CHANGELOG.md +176 -135
  3. package/MIGRATION.md +20 -50
  4. package/README.md +6 -14
  5. package/Spec.md +81 -0
  6. package/dist/{react-slider.d.ts → index.d.ts} +4 -7
  7. package/lib/components/Slider/Slider.types.d.ts +2 -6
  8. package/lib/components/Slider/Slider.types.js.map +1 -1
  9. package/lib/components/Slider/index.d.ts +1 -1
  10. package/lib/components/Slider/index.js +1 -1
  11. package/lib/components/Slider/index.js.map +1 -1
  12. package/lib/components/Slider/useSlider.js +0 -2
  13. package/lib/components/Slider/useSlider.js.map +1 -1
  14. package/lib/components/Slider/useSliderState.js +8 -3
  15. package/lib/components/Slider/useSliderState.js.map +1 -1
  16. package/lib/components/Slider/useSliderStyles.d.ts +10 -19
  17. package/lib/components/Slider/useSliderStyles.js +143 -94
  18. package/lib/components/Slider/useSliderStyles.js.map +1 -1
  19. package/lib/index.d.ts +2 -1
  20. package/lib/index.js +1 -1
  21. package/lib/index.js.map +1 -1
  22. package/lib-commonjs/components/Slider/Slider.types.d.ts +2 -6
  23. package/lib-commonjs/components/Slider/index.d.ts +1 -1
  24. package/lib-commonjs/components/Slider/index.js +3 -3
  25. package/lib-commonjs/components/Slider/index.js.map +1 -1
  26. package/lib-commonjs/components/Slider/useSlider.js +0 -2
  27. package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
  28. package/lib-commonjs/components/Slider/useSliderState.js +13 -7
  29. package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
  30. package/lib-commonjs/components/Slider/useSliderStyles.d.ts +10 -19
  31. package/lib-commonjs/components/Slider/useSliderStyles.js +147 -98
  32. package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
  33. package/lib-commonjs/index.d.ts +2 -1
  34. package/lib-commonjs/index.js +38 -2
  35. package/lib-commonjs/index.js.map +1 -1
  36. package/package.json +11 -19
package/lib/components/Slider/useSliderStyles.js CHANGED
@@ -1,22 +1,37 @@
1
1
  import { shorthands, __styles, mergeClasses } from '@griffel/react';
2
2
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
3
  import { tokens } from '@fluentui/react-theme';
4
- export const sliderClassName = 'fui-Slider';
5
- const thumbSizeVar = `--fui-slider-thumb-size`;
6
- const railSizeVar = `--fui-slider-rail-size`;
7
- const railColorVar = `--fui-slider-rail-color`;
8
- const progressColorVar = `--fui-slider-progress-color`;
9
- const thumbColorVar = `--fui-slider-thumb-color`;
10
- export const railDirectionVar = `--fui-slider-rail-direction`;
11
- export const railOffsetVar = `--fui-slider-rail-offset`;
12
- export const railProgressVar = `--fui-slider-rail-progress`;
13
- export const railStepsPercentVar = `--fui-slider-rail-steps-percent`;
14
- export const thumbPositionVar = `--fui-slider-thumb-position`;
4
+ export const sliderClassNames = {
5
+ root: 'fui-Slider',
6
+ rail: 'fui-Slider__rail',
7
+ thumb: 'fui-Slider__thumb',
8
+ input: 'fui-Slider__input'
9
+ }; // Internal CSS variables
10
+
11
+ const thumbSizeVar = `--fui-Slider__thumb--size`;
12
+ const railSizeVar = `--fui-Slider__rail--size`;
13
+ const railColorVar = `--fui-Slider__rail--color`;
14
+ const progressColorVar = `--fui-Slider__progress--color`;
15
+ const thumbColorVar = `--fui-Slider__thumb--color`;
16
+ export const sliderCSSVars = {
17
+ railDirectionVar: `--fui-Slider__rail--direction`,
18
+ railOffsetVar: `--fui-Slider__rail--offset`,
19
+ railProgressVar: `--fui-Slider__rail--progress`,
20
+ railStepsPercentVar: `--fui-Slider__rail--steps-percent`,
21
+ thumbPositionVar: `--fui-Slider__thumb--position`
22
+ };
23
+ const {
24
+ railDirectionVar,
25
+ railOffsetVar,
26
+ railStepsPercentVar,
27
+ railProgressVar,
28
+ thumbPositionVar
29
+ } = sliderCSSVars;
15
30
  /**
16
31
  * Styles for the root slot
17
32
  */
18
33
 
19
- export const useRootStyles = /*#__PURE__*/__styles({
34
+ const useRootStyles = /*#__PURE__*/__styles({
20
35
  "root": {
21
36
  "qhf8xq": "f10pi13n",
22
37
  "mc9l5x": "fwk3njj",
@@ -27,90 +42,121 @@ export const useRootStyles = /*#__PURE__*/__styles({
27
42
  "B7hvi0a": "f1oiokrs"
28
43
  },
29
44
  "small": {
30
- "Biculhw": "f1c9or7v",
31
- "wqx05c": "flte3hh"
45
+ "Bi64ftq": "f1agqo6f",
46
+ "Ba19x4e": "f1i7ztpd",
47
+ "sshi5w": "f1pha7fy"
32
48
  },
33
49
  "medium": {
34
- "Biculhw": "f1pye7a0",
35
- "wqx05c": "fkfeez5"
50
+ "Bi64ftq": "f1a78h9h",
51
+ "Ba19x4e": "fuok0yf",
52
+ "sshi5w": "f1nxs5xn"
36
53
  },
37
54
  "horizontal": {
38
55
  "Bf4jedk": "fyvtabn",
39
- "Bqenvij": "f1lzqqms"
56
+ "Bqenvij": "f1yfdkfd"
40
57
  },
41
58
  "vertical": {
42
- "a9b677": "fg8321j",
59
+ "a9b677": "f174ca62",
43
60
  "sshi5w": "f1pzv1zu",
44
- "Budl1dq": "f1px5gne"
61
+ "Budl1dq": "f13qjosx"
45
62
  },
46
63
  "enabled": {
47
- "E57xle": "fv45gaj",
48
- "Bbaa9vx": "fdbupyo",
49
- "Buh0e40": "f101zkkn",
50
- "m1hzeo": "flfk056",
51
- "bipmid": "f1g3da1l",
52
- "om7wyn": "f1i0j5bm",
53
- "nb4gel": "fcubes2",
54
- "Be8bzyp": "f4xbgjg",
55
- "y5wbjr": "f195922",
56
- "pk18bm": "ftryjgv",
57
- "Bx5xzon": "f9x48s8",
58
- "By0o28j": "fj3o9kf"
64
+ "B7wi8oa": "f4l8x3l",
65
+ "B250r6j": "f671q34",
66
+ "Bpmy4es": "fvfzmw5",
67
+ "Buw9y6v": "faw1t00",
68
+ "Bq939m0": "fxdgx5",
69
+ "gjzr1t": "fii04fa",
70
+ "tg7hqu": "f36hzz8",
71
+ "ypdvl1": "f1volkfw",
72
+ "Bw5jdd4": "f1xddb6",
73
+ "Bdjie01": "fcdikl",
74
+ "Bvh9j6m": "fhpzgm6",
75
+ "Bvsvvpo": "f1q6pm3h"
59
76
  },
60
77
  "disabled": {
61
- "Buh0e40": "f18mka2b",
62
- "E57xle": "f7gtiye",
63
- "Bbaa9vx": "fdmjs6",
64
- "Be8bzyp": "fp7twcv",
65
- "y5wbjr": "fo1xztc",
66
- "pk18bm": "fxmtfj"
78
+ "Bpmy4es": "foojseg",
79
+ "B7wi8oa": "f1lgdqhv",
80
+ "B250r6j": "f1veetlj",
81
+ "ypdvl1": "fu12m3e",
82
+ "Bw5jdd4": "fi9guym",
83
+ "Bdjie01": "fcdjl4u"
67
84
  },
68
85
  "focusIndicatorHorizontal": {
69
86
  "B486eqv": "f2hkw1w",
70
- "c2y4jd": "fsofd9k",
87
+ "vchsgm": "fbiesyy",
88
+ "ozrjjd": ["fq2kn9", "f1jxwnad"],
89
+ "B7lelfh": "f1il7mou",
90
+ "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
71
91
  "B8vm7ur": "f12sql3b",
72
92
  "f4hv8x": "f1i4q40k",
73
93
  "Gpan81": "fcrbge9",
74
- "z7afg": "ft464mn",
75
94
  "rsjj6t": "fskqmiq",
76
- "Bqsd8kq": "f2gy8jn",
77
- "sfhsbh": "f1pke3uf",
78
- "Bugh3ej": "f18xdlq9",
79
- "hpanx6": "f1114nks",
80
- "Bjkpy09": "f1n40nz3",
81
- "Jxg1p8": "f1iimkc5",
82
- "Bc94xmo": ["felaku1", "fsrbqhn"],
83
- "Bj23z95": ["fsrbqhn", "felaku1"]
95
+ "E86f5s": "f1kbdjx9",
96
+ "f5nhos": ["fw1d893", "fpuz8dn"],
97
+ "Bhtq6h7": "f14hlsw1",
98
+ "Bubk9yy": ["fpuz8dn", "fw1d893"],
99
+ "dzajus": "f1bkt4b4",
100
+ "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
101
+ "Byq6oy9": "fyyqeim",
102
+ "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
103
+ "Bi8bqab": ["f1aneyfs", "f15nmyc0"],
104
+ "kq6z4e": ["f15nmyc0", "f1aneyfs"],
105
+ "l5tc3q": ["f3cpy5b", "f13v6kgv"],
106
+ "d1z3ck": ["f13v6kgv", "f3cpy5b"],
107
+ "epcuuz": "filx0we",
108
+ "Ba33l6n": ["f1horip2", "fgnx9ah"],
109
+ "va7z1g": "fkii2tb",
110
+ "Bmi6mq9": ["fgnx9ah", "f1horip2"],
111
+ "Bjkpy09": "f11tdyqf",
112
+ "Jxg1p8": "f1blztld",
113
+ "Bc94xmo": ["fc3tncn", "f1veb610"],
114
+ "Bj23z95": ["f1veb610", "fc3tncn"]
84
115
  },
85
116
  "focusIndicatorVertical": {
86
117
  "B486eqv": "f2hkw1w",
87
- "c2y4jd": "fsofd9k",
118
+ "vchsgm": "fbiesyy",
119
+ "ozrjjd": ["fq2kn9", "f1jxwnad"],
120
+ "B7lelfh": "f1il7mou",
121
+ "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
88
122
  "B8vm7ur": "f12sql3b",
89
123
  "f4hv8x": "f1i4q40k",
90
124
  "Gpan81": "fcrbge9",
91
- "z7afg": "ft464mn",
92
125
  "rsjj6t": "fskqmiq",
93
- "Bqsd8kq": "f2gy8jn",
94
- "sfhsbh": "f1pke3uf",
95
- "Bugh3ej": "f18xdlq9",
96
- "hpanx6": "f1114nks",
97
- "Bjkpy09": "f1e36cb5",
98
- "Jxg1p8": "f1m0noy9",
99
- "Bc94xmo": ["ftbpds4", "f1ubgg62"],
100
- "Bj23z95": ["f1ubgg62", "ftbpds4"]
126
+ "E86f5s": "f1kbdjx9",
127
+ "f5nhos": ["fw1d893", "fpuz8dn"],
128
+ "Bhtq6h7": "f14hlsw1",
129
+ "Bubk9yy": ["fpuz8dn", "fw1d893"],
130
+ "dzajus": "f1bkt4b4",
131
+ "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
132
+ "Byq6oy9": "fyyqeim",
133
+ "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
134
+ "Bi8bqab": ["f1aneyfs", "f15nmyc0"],
135
+ "kq6z4e": ["f15nmyc0", "f1aneyfs"],
136
+ "l5tc3q": ["f3cpy5b", "f13v6kgv"],
137
+ "d1z3ck": ["f13v6kgv", "f3cpy5b"],
138
+ "epcuuz": "filx0we",
139
+ "Ba33l6n": ["f1horip2", "fgnx9ah"],
140
+ "va7z1g": "fkii2tb",
141
+ "Bmi6mq9": ["fgnx9ah", "f1horip2"],
142
+ "Bjkpy09": "f1n40nz3",
143
+ "Jxg1p8": "f1iimkc5",
144
+ "Bc94xmo": ["f1v1vptr", "f17zmyg5"],
145
+ "Bj23z95": ["f17zmyg5", "f1v1vptr"]
101
146
  }
102
147
  }, {
103
- "d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".femm8af{grid-template-areas:\"slider\";}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1sdsnyy{touch-action:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1oiokrs{justify-items:center;}", ".f1c9or7v{--fui-slider-thumb-size:16px;}", ".flte3hh{--fui-slider-rail-size:2px;}", ".f1pye7a0{--fui-slider-thumb-size:20px;}", ".fkfeez5{--fui-slider-rail-size:4px;}", ".fyvtabn{min-width:120px;}", ".f1lzqqms{height:var(--fui-slider-thumb-size);}", ".fg8321j{width:var(--fui-slider-thumb-size);}", ".f1pzv1zu{min-height:120px;}", ".f1px5gne{grid-template-columns:var(--fui-slider-thumb-size);}", ".fv45gaj{--fui-slider-rail-color:var(--colorNeutralStrokeAccessible);}", ".fdbupyo{--fui-slider-progress-color:var(--colorCompoundBrandBackground);}", ".f101zkkn{--fui-slider-thumb-color:var(--colorCompoundBrandBackground);}", ".f18mka2b{--fui-slider-thumb-color:var(--colorNeutralForegroundDisabled);}", ".f7gtiye{--fui-slider-rail-color:var(--colorNeutralBackgroundDisabled);}", ".fdmjs6{--fui-slider-progress-color:var(--colorNeutralForegroundDisabled);}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1n40nz3:focus-within:after{top:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f1iimkc5:focus-within:after{bottom:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .felaku1:focus-within:after{left:calc(0px - 2px - 10px);}", "[data-keyboard-nav] .fsrbqhn:focus-within:after{right:calc(0px - 2px - 10px);}", "[data-keyboard-nav] .f1e36cb5:focus-within:after{top:calc(0px - 2px - 10px);}", "[data-keyboard-nav] .f1m0noy9:focus-within:after{bottom:calc(0px - 2px - 10px);}", "[data-keyboard-nav] .ftbpds4:focus-within:after{left:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f1ubgg62:focus-within:after{right:calc(0px - 2px - 6px);}"],
104
- "h": [".flfk056:hover{--fui-slider-thumb-color:var(--colorBrandBackgroundHover);}", ".f1g3da1l:hover{--fui-slider-progress-color:var(--colorBrandBackgroundHover);}"],
105
- "a": [".f1i0j5bm:active{--fui-slider-thumb-color:var(--colorBrandBackgroundPressed);}", ".fcubes2:active{--fui-slider-progress-color:var(--colorBrandBackgroundPressed);}"],
106
- "t": ["@media (forced-colors: active){.f4xbgjg{--fui-slider-rail-color:CanvasText;}}", "@media (forced-colors: active){.f195922{--fui-slider-thumb-color:Highlight;}}", "@media (forced-colors: active){.ftryjgv{--fui-slider-progress-color:Highlight;}}", "@media (forced-colors: active){.f9x48s8:hover{--fui-slider-thumb-color:Highlight;}}", "@media (forced-colors: active){.fj3o9kf:hover{--fui-slider-progress-color:Highlight;}}", "@media (forced-colors: active){.fp7twcv{--fui-slider-rail-color:GrayText;}}", "@media (forced-colors: active){.fo1xztc{--fui-slider-thumb-color:GrayText;}}", "@media (forced-colors: active){.fxmtfj{--fui-slider-progress-color:GrayText;}}"],
148
+ "d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".femm8af{grid-template-areas:\"slider\";}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1sdsnyy{touch-action:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1oiokrs{justify-items:center;}", ".f1agqo6f{--fui-Slider__thumb--size:16px;}", ".f1i7ztpd{--fui-Slider__rail--size:2px;}", ".f1pha7fy{min-height:24px;}", ".f1a78h9h{--fui-Slider__thumb--size:20px;}", ".fuok0yf{--fui-Slider__rail--size:4px;}", ".f1nxs5xn{min-height:32px;}", ".fyvtabn{min-width:120px;}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1pzv1zu{min-height:120px;}", ".f13qjosx{grid-template-columns:var(--fui-Slider__thumb--size);}", ".f4l8x3l{--fui-Slider__rail--color:var(--colorNeutralStrokeAccessible);}", ".f671q34{--fui-Slider__progress--color:var(--colorCompoundBrandBackground);}", ".fvfzmw5{--fui-Slider__thumb--color:var(--colorCompoundBrandBackground);}", ".foojseg{--fui-Slider__thumb--color:var(--colorNeutralForegroundDisabled);}", ".f1lgdqhv{--fui-Slider__rail--color:var(--colorNeutralBackgroundDisabled);}", ".f1veetlj{--fui-Slider__progress--color:var(--colorNeutralForegroundDisabled);}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f11tdyqf:focus-within:after{top:calc(0px - 2px - -2px);}", "[data-keyboard-nav] .f1blztld:focus-within:after{bottom:calc(0px - 2px - -2px);}", "[data-keyboard-nav] .fc3tncn:focus-within:after{left:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .f1veb610:focus-within:after{right:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .f1n40nz3:focus-within:after{top:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f1iimkc5:focus-within:after{bottom:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f1v1vptr:focus-within:after{left:calc(0px - 2px - 4px);}", "[data-keyboard-nav] .f17zmyg5:focus-within:after{right:calc(0px - 2px - 4px);}"],
149
+ "h": [".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}", ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"],
150
+ "a": [".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}", ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"],
151
+ "t": ["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", "@media (forced-colors: active){.f1xddb6{--fui-Slider__thumb--color:Highlight;}}", "@media (forced-colors: active){.fcdikl{--fui-Slider__progress--color:Highlight;}}", "@media (forced-colors: active){.fhpzgm6:hover{--fui-Slider__thumb--color:Highlight;}}", "@media (forced-colors: active){.f1q6pm3h:hover{--fui-Slider__progress--color:Highlight;}}", "@media (forced-colors: active){.fu12m3e{--fui-Slider__rail--color:GrayText;}}", "@media (forced-colors: active){.fi9guym{--fui-Slider__thumb--color:GrayText;}}", "@media (forced-colors: active){.fcdjl4u{--fui-Slider__progress--color:GrayText;}}"],
107
152
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
108
153
  });
109
154
  /**
110
155
  * Styles for the rail slot
111
156
  */
112
157
 
113
- export const useRailStyles = /*#__PURE__*/__styles({
158
+
159
+ const useRailStyles = /*#__PURE__*/__styles({
114
160
  "rail": {
115
161
  "Bbmb7ep": ["fnivh3a", "fc7yr5o"],
116
162
  "Beyfa6y": ["fc7yr5o", "fnivh3a"],
@@ -123,40 +169,41 @@ export const useRailStyles = /*#__PURE__*/__styles({
123
169
  "Bw0ie65": "f1xmzt6x",
124
170
  "qhf8xq": "f10pi13n",
125
171
  "Bvjb7m6": "fdgv6k0",
126
- "Bcmaq0h": "f1m1tlam",
172
+ "Bcmaq0h": "f1gvmols",
127
173
  "Bpd4iqm": "fpvhumw",
128
174
  "oeaueh": "f1yog68k",
129
175
  "Bw0xxkn": "f13sgyd8",
130
176
  "rurcny": "f99sooz",
131
177
  "xx9plb": "fxf9f1y",
132
- "Baov28r": "f1yc1t50"
178
+ "Baov28r": "f1ijinm9"
133
179
  },
134
180
  "horizontal": {
135
181
  "a9b677": "fly5x3f",
136
- "Bqenvij": "f1kwo5zd",
182
+ "Bqenvij": "f1cy86ho",
137
183
  "Byque4d": ["f1oqflmk", "fimcj7z"],
138
184
  "qd6xl9": ["fimcj7z", "f1oqflmk"],
139
- "Bbc2r3f": "few7gnq"
185
+ "Bbc2r3f": "fq8vbpg"
140
186
  },
141
187
  "vertical": {
142
- "a9b677": "f1r3duln",
188
+ "a9b677": "fqxfnkd",
143
189
  "Bqenvij": "f1l02sjl",
144
- "Bdn98qo": "f81jpj",
190
+ "Bdn98qo": "f61axi9",
145
191
  "Bf8kmfk": "f1p8196g",
146
192
  "Bj2wrql": "f1t2u064"
147
193
  }
148
194
  }, {
149
- "d": [".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1aehjj5{pointer-events:none;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".f1m1tlam{background-image:linear-gradient(\n var(--fui-slider-rail-direction),\n var(--fui-slider-rail-color) 0%,\n var(--fui-slider-rail-color) var(--fui-slider-rail-offset),\n var(--fui-slider-progress-color) var(--fui-slider-rail-offset),\n var(--fui-slider-progress-color) calc(var(--fui-slider-rail-offset) + var(--fui-slider-rail-progress)),\n var(--fui-slider-rail-color) calc(var(--fui-slider-rail-offset) + var(--fui-slider-rail-progress))\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f99sooz:before{content:'';}", ".fxf9f1y:before{position:absolute;}", ".f1yc1t50:before{background-image:repeating-linear-gradient(\n var(--fui-slider-rail-direction),\n #0000 0%,\n #0000 calc(var(--fui-slider-rail-steps-percent) - 1px),\n var(--colorNeutralBackground1) calc(var(--fui-slider-rail-steps-percent) - 1px),\n var(--colorNeutralBackground1) var(--fui-slider-rail-steps-percent)\n );}", ".fly5x3f{width:100%;}", ".f1kwo5zd{height:var(--fui-slider-rail-size);}", ".f1oqflmk:before{left:-1px;}", ".fimcj7z:before{right:-1px;}", ".few7gnq:before{height:var(--fui-slider-rail-size);}", ".f1r3duln{width:var(--fui-slider-rail-size);}", ".f1l02sjl{height:100%;}", ".f81jpj:before{width:var(--fui-slider-rail-size);}", ".f1p8196g:before{top:-1px;}", ".f1t2u064:before{bottom:1px;}"]
195
+ "d": [".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1aehjj5{pointer-events:none;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".f1gvmols{background-image:linear-gradient(\n var(--fui-Slider__rail--direction),\n var(--fui-Slider__rail--color) 0%,\n var(--fui-Slider__rail--color) var(--fui-Slider__rail--offset),\n var(--fui-Slider__progress--color) var(--fui-Slider__rail--offset),\n var(--fui-Slider__progress--color) calc(var(--fui-Slider__rail--offset) + var(--fui-Slider__rail--progress)),\n var(--fui-Slider__rail--color) calc(var(--fui-Slider__rail--offset) + var(--fui-Slider__rail--progress))\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f99sooz:before{content:'';}", ".fxf9f1y:before{position:absolute;}", ".f1ijinm9:before{background-image:repeating-linear-gradient(\n var(--fui-Slider__rail--direction),\n #0000 0%,\n #0000 calc(var(--fui-Slider__rail--steps-percent) - 1px),\n var(--colorNeutralBackground1) calc(var(--fui-Slider__rail--steps-percent) - 1px),\n var(--colorNeutralBackground1) var(--fui-Slider__rail--steps-percent)\n );}", ".fly5x3f{width:100%;}", ".f1cy86ho{height:var(--fui-Slider__rail--size);}", ".f1oqflmk:before{left:-1px;}", ".fimcj7z:before{right:-1px;}", ".fq8vbpg:before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f61axi9:before{width:var(--fui-Slider__rail--size);}", ".f1p8196g:before{top:-1px;}", ".f1t2u064:before{bottom:1px;}"]
150
196
  });
151
197
  /**
152
198
  * Styles for the thumb slot
153
199
  */
154
200
 
155
- export const useThumbStyles = /*#__PURE__*/__styles({
201
+
202
+ const useThumbStyles = /*#__PURE__*/__styles({
156
203
  "thumb": {
157
204
  "qhf8xq": "f1euv43f",
158
- "a9b677": "fg8321j",
159
- "Bqenvij": "f1lzqqms",
205
+ "a9b677": "f174ca62",
206
+ "Bqenvij": "f1yfdkfd",
160
207
  "Bkecrkj": "f1aehjj5",
161
208
  "oeaueh": "f1s6fcnf",
162
209
  "Bvjb7m6": "fdgv6k0",
@@ -164,8 +211,8 @@ export const useThumbStyles = /*#__PURE__*/__styles({
164
211
  "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
165
212
  "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
166
213
  "Btl43ni": ["f1s8kh49", "f1djnp8u"],
167
- "E5pizo": "f1u7hpx4",
168
- "De3pzq": "f1hi3q3y",
214
+ "E5pizo": "fof7hq0",
215
+ "De3pzq": "foksa45",
169
216
  "Bz10aip": ["f13gfj74", "f1nfknbn"],
170
217
  "xx9plb": "fxf9f1y",
171
218
  "Bf8kmfk": "frdto5n",
@@ -178,10 +225,10 @@ export const useThumbStyles = /*#__PURE__*/__styles({
178
225
  "B2r1szc": ["f13lz1i8", "fiow2ne"],
179
226
  "Bmqnesq": "f170vdtw",
180
227
  "rurcny": "f99sooz",
181
- "dj0dih": "f1gz1mfd",
182
- "D4ky5z": ["f51lb3k", "fd7wuyc"],
183
- "k1i1uq": "f1mlyj7a",
184
- "Bcasopp": ["fd7wuyc", "f51lb3k"],
228
+ "dj0dih": "f1i9s981",
229
+ "D4ky5z": ["fqfd43n", "fgpokn8"],
230
+ "k1i1uq": "f19s890",
231
+ "Bcasopp": ["fgpokn8", "fqfd43n"],
185
232
  "Bdixowu": "f1bwkb58",
186
233
  "cqycoz": ["fiio4mc", "fc8z0qo"],
187
234
  "Epwjcz": "f1m5ya7j",
@@ -192,10 +239,10 @@ export const useThumbStyles = /*#__PURE__*/__styles({
192
239
  "Bohd3ja": ["f2jll41", "f1yx8xct"]
193
240
  },
194
241
  "disabled": {
195
- "dj0dih": "f1gz1mfd",
196
- "D4ky5z": ["f51lb3k", "fd7wuyc"],
197
- "k1i1uq": "f1mlyj7a",
198
- "Bcasopp": ["fd7wuyc", "f51lb3k"],
242
+ "dj0dih": "f1i9s981",
243
+ "D4ky5z": ["fqfd43n", "fgpokn8"],
244
+ "k1i1uq": "f19s890",
245
+ "Bcasopp": ["fgpokn8", "fqfd43n"],
199
246
  "Bdixowu": "f1bwkb58",
200
247
  "cqycoz": ["fiio4mc", "fc8z0qo"],
201
248
  "Epwjcz": "f1m5ya7j",
@@ -206,19 +253,20 @@ export const useThumbStyles = /*#__PURE__*/__styles({
206
253
  "Bohd3ja": ["f16ep8jm", "f1yueqd5"]
207
254
  },
208
255
  "horizontal": {
209
- "oyh7mz": ["f3ten88", "f81l3fp"]
256
+ "oyh7mz": ["foa2ioz", "fjmilum"]
210
257
  },
211
258
  "vertical": {
212
259
  "Bz10aip": "f5cv5a3",
213
- "B5kzvoi": "ftu6jbq"
260
+ "B5kzvoi": "f1k2fpdo"
214
261
  }
215
262
  }, {
216
- "d": [".f1euv43f{position:absolute;}", ".fg8321j{width:var(--fui-slider-thumb-size);}", ".f1lzqqms{height:var(--fui-slider-thumb-size);}", ".f1aehjj5{pointer-events:none;}", ".f1s6fcnf{outline-style:none;}", ".fdgv6k0{forced-color-adjust:none;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1u7hpx4{box-shadow:0 0 0 calc(var(--fui-slider-thumb-size) * .2) var(--colorNeutralBackground1) inset;}", ".f1hi3q3y{background-color:var(--fui-slider-thumb-color);}", ".f13gfj74{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".f1nfknbn{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f170vdtw:before{box-sizing:border-box;}", ".f99sooz:before{content:'';}", ".f1gz1mfd:before{border-top-width:calc(var(--fui-slider-thumb-size) * .05);}", ".f51lb3k:before{border-right-width:calc(var(--fui-slider-thumb-size) * .05);}", ".fd7wuyc:before{border-left-width:calc(var(--fui-slider-thumb-size) * .05);}", ".f1mlyj7a:before{border-bottom-width:calc(var(--fui-slider-thumb-size) * .05);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".f3ten88{left:var(--fui-slider-thumb-position);}", ".f81l3fp{right:var(--fui-slider-thumb-position);}", ".f5cv5a3{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".ftu6jbq{bottom:var(--fui-slider-thumb-position);}"]
263
+ "d": [".f1euv43f{position:absolute;}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f1aehjj5{pointer-events:none;}", ".f1s6fcnf{outline-style:none;}", ".fdgv6k0{forced-color-adjust:none;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fof7hq0{box-shadow:0 0 0 calc(var(--fui-Slider__thumb--size) * .2) var(--colorNeutralBackground1) inset;}", ".foksa45{background-color:var(--fui-Slider__thumb--color);}", ".f13gfj74{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".f1nfknbn{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f170vdtw:before{box-sizing:border-box;}", ".f99sooz:before{content:'';}", ".f1i9s981:before{border-top-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fqfd43n:before{border-right-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fgpokn8:before{border-left-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f19s890:before{border-bottom-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".foa2ioz{left:var(--fui-Slider__thumb--position);}", ".fjmilum{right:var(--fui-Slider__thumb--position);}", ".f5cv5a3{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".f1k2fpdo{bottom:var(--fui-Slider__thumb--position);}"]
217
264
  });
218
265
  /**
219
266
  * Styles for the Input slot
220
267
  */
221
268
 
269
+
222
270
  const useInputStyles = /*#__PURE__*/__styles({
223
271
  "input": {
224
272
  "abs64n": "fk73vx1",
@@ -236,16 +284,16 @@ const useInputStyles = /*#__PURE__*/__styles({
236
284
  "Frg6f3": ["f1tyq0we", "f11qmguv"]
237
285
  },
238
286
  "horizontal": {
239
- "Bqenvij": "f1lzqqms",
240
- "a9b677": "f1sf2j80"
287
+ "Bqenvij": "f1yfdkfd",
288
+ "a9b677": "f1kl1iyt"
241
289
  },
242
290
  "vertical": {
243
- "Bqenvij": "fb80yd4",
244
- "a9b677": "fg8321j",
291
+ "Bqenvij": "fxc22c6",
292
+ "a9b677": "f174ca62",
245
293
  "Brp00wb": "f1r9mf01"
246
294
  }
247
295
  }, {
248
- "d": [".fk73vx1{opacity:0;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1lzqqms{height:var(--fui-slider-thumb-size);}", ".f1sf2j80{width:calc(100% + var(--fui-slider-thumb-size));}", ".fb80yd4{height:calc(100% + var(--fui-slider-thumb-size));}", ".fg8321j{width:var(--fui-slider-thumb-size);}", ".f1r9mf01{-webkit-appearance:slider-vertical;}"]
296
+ "d": [".fk73vx1{opacity:0;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f1kl1iyt{width:calc(100% + var(--fui-Slider__thumb--size));}", ".fxc22c6{height:calc(100% + var(--fui-Slider__thumb--size));}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1r9mf01{-webkit-appearance:slider-vertical;}"]
249
297
  });
250
298
  /**
251
299
  * Apply styling to the Slider slots based on the state
@@ -257,10 +305,11 @@ export const useSliderStyles_unstable = state => {
257
305
  const railStyles = useRailStyles();
258
306
  const thumbStyles = useThumbStyles();
259
307
  const inputStyles = useInputStyles();
260
- state.root.className = mergeClasses(sliderClassName, rootStyles.root, state.vertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], state.vertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
261
- state.rail.className = mergeClasses(railStyles.rail, state.vertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
262
- state.thumb.className = mergeClasses(thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
263
- state.input.className = mergeClasses(inputStyles.input, state.vertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
308
+ const isVertical = state.vertical;
309
+ state.root.className = mergeClasses(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
310
+ state.rail.className = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
311
+ state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
312
+ state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
264
313
  return state;
265
314
  };
266
315
  //# sourceMappingURL=useSliderStyles.js.map
package/lib/components/Slider/useSliderStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState } from './Slider.types';\n\nexport const sliderClassName = 'fui-Slider';\n\nconst thumbSizeVar = `--fui-slider-thumb-size`;\nconst railSizeVar = `--fui-slider-rail-size`;\nconst railColorVar = `--fui-slider-rail-color`;\nconst progressColorVar = `--fui-slider-progress-color`;\nconst thumbColorVar = `--fui-slider-thumb-color`;\n\nexport const railDirectionVar = `--fui-slider-rail-direction`;\nexport const railOffsetVar = `--fui-slider-rail-offset`;\nexport const railProgressVar = `--fui-slider-rail-progress`;\nexport const railStepsPercentVar = `--fui-slider-rail-steps-percent`;\nexport const thumbPositionVar = `--fui-slider-thumb-position`;\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n gridTemplateAreas: '\"slider\"',\n userSelect: 'none',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n },\n\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n },\n\n horizontal: {\n minWidth: '120px',\n height: `var(${thumbSizeVar})`,\n },\n\n vertical: {\n width: `var(${thumbSizeVar})`,\n minHeight: '120px',\n gridTemplateColumns: `var(${thumbSizeVar})`,\n },\n\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorBrandBackgroundHover,\n [progressColorVar]: tokens.colorBrandBackgroundHover,\n },\n ':active': {\n [thumbColorVar]: tokens.colorBrandBackgroundPressed,\n [progressColorVar]: tokens.colorBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '6px', bottom: '6px', left: '10px', right: '10px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '10px', bottom: '10px', left: '6px', right: '6px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nexport const useRailStyles = makeStyles({\n rail: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n pointerEvents: 'none',\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${railDirectionVar}),\n var(${railColorVar}) 0%,\n var(${railColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar})),\n var(${railColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar}))\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n ':before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${railDirectionVar}),\n #0000 0%,\n #0000 calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${railStepsPercentVar})\n )`,\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n ':before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n ':before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nexport const useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n transform: 'translateX(-50%)',\n ':before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: \"''\",\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n },\n },\n disabled: {\n ':before': {\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n },\n },\n horizontal: {\n left: `var(${thumbPositionVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n opacity: 0,\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: `calc(100% + var(${thumbSizeVar}))`,\n },\n vertical: {\n height: `calc(100% + var(${thumbSizeVar}))`,\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical',\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n sliderClassName,\n rootStyles.root,\n state.vertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n state.vertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n railStyles.rail,\n state.vertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n thumbStyles.thumb,\n state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.input,\n state.vertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\n\nexport const sliderCSSVars = {\n railDirectionVar: `--fui-Slider__rail--direction`,\n railOffsetVar: `--fui-Slider__rail--offset`,\n railProgressVar: `--fui-Slider__rail--progress`,\n railStepsPercentVar: `--fui-Slider__rail--steps-percent`,\n thumbPositionVar: `--fui-Slider__thumb--position`,\n};\n\nconst { railDirectionVar, railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar } = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n gridTemplateAreas: '\"slider\"',\n userSelect: 'none',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n height: `var(${thumbSizeVar})`,\n },\n\n vertical: {\n width: `var(${thumbSizeVar})`,\n minHeight: '120px',\n gridTemplateColumns: `var(${thumbSizeVar})`,\n },\n\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n rail: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n pointerEvents: 'none',\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${railDirectionVar}),\n var(${railColorVar}) 0%,\n var(${railColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar})),\n var(${railColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar}))\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n ':before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${railDirectionVar}),\n #0000 0%,\n #0000 calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${railStepsPercentVar})\n )`,\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n ':before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n ':before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n transform: 'translateX(-50%)',\n ':before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: \"''\",\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n },\n },\n disabled: {\n ':before': {\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n },\n },\n horizontal: {\n left: `var(${thumbPositionVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n opacity: 0,\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: `calc(100% + var(${thumbSizeVar}))`,\n },\n vertical: {\n height: `calc(100% + var(${thumbSizeVar}))`,\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical',\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export * from './Slider';
1
+ export { Slider, renderSlider_unstable, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable, } from './Slider';
2
+ export type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export * from './Slider';
1
+ export { Slider, renderSlider_unstable, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable } from './Slider';
2
2
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC","sourcesContent":["export * from './Slider';\n"]}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,qBAFF,EAGE,gBAHF,EAIE,uBAJF,EAKE,wBALF,EAME,kBANF,QAOO,UAPP","sourcesContent":["export {\n Slider,\n renderSlider_unstable,\n sliderClassNames,\n useSliderState_unstable,\n useSliderStyles_unstable,\n useSlider_unstable,\n} from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Slider/Slider.types.d.ts CHANGED
@@ -66,8 +66,8 @@ declare type SliderCommons = {
66
66
  */
67
67
  disabled?: boolean;
68
68
  /**
69
- * Whether to render the Slider vertically.
70
- * @default `false` (renders horizontally)
69
+ * Render the Slider in a vertical orientation, smallest value on the bottom.
70
+ * @default `false`
71
71
  */
72
72
  vertical?: boolean;
73
73
  /**
@@ -84,10 +84,6 @@ declare type SliderCommons = {
84
84
  * Triggers a callback when the value has been changed. This will be called on every individual step.
85
85
  */
86
86
  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
87
- /**
88
- * The Slider's current value label to be read by the screen reader.
89
- */
90
- getAriaValueText?: (value: number) => string;
91
87
  };
92
88
  export declare type SliderOnChangeData = {
93
89
  value: number;
package/lib-commonjs/components/Slider/index.d.ts CHANGED
@@ -3,4 +3,4 @@ export * from './Slider.types';
3
3
  export * from './renderSlider';
4
4
  export * from './useSlider';
5
5
  export { useSliderState_unstable } from './useSliderState';
6
- export { sliderClassName, useSliderStyles_unstable } from './useSliderStyles';
6
+ export { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';
package/lib-commonjs/components/Slider/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useSliderStyles_unstable = exports.sliderClassName = exports.useSliderState_unstable = void 0;
6
+ exports.useSliderStyles_unstable = exports.sliderClassNames = exports.useSliderState_unstable = void 0;
7
7
 
8
8
  const tslib_1 = /*#__PURE__*/require("tslib");
9
9
 
@@ -26,10 +26,10 @@ Object.defineProperty(exports, "useSliderState_unstable", {
26
26
 
27
27
  var useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
28
28
 
29
- Object.defineProperty(exports, "sliderClassName", {
29
+ Object.defineProperty(exports, "sliderClassNames", {
30
30
  enumerable: true,
31
31
  get: function () {
32
- return useSliderStyles_1.sliderClassName;
32
+ return useSliderStyles_1.sliderClassNames;
33
33
  }
34
34
  });
35
35
  Object.defineProperty(exports, "useSliderStyles_unstable", {
package/lib-commonjs/components/Slider/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassName, useSliderStyles_unstable } from './useSliderStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Slider/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Slider/useSlider.js CHANGED
@@ -27,7 +27,6 @@ const useSlider_unstable = (props, ref) => {
27
27
  max = 100,
28
28
  step,
29
29
  disabled,
30
- getAriaValueText,
31
30
  vertical,
32
31
  size = 'medium',
33
32
  origin,
@@ -39,7 +38,6 @@ const useSlider_unstable = (props, ref) => {
39
38
  thumb
40
39
  } = props;
41
40
  const state = {
42
- getAriaValueText,
43
41
  defaultValue,
44
42
  disabled,
45
43
  max,
package/lib-commonjs/components/Slider/useSlider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;AAHyB,GAA1B,CAApB;AAMA,QAAM;AACJ;AACA,IAAA,KAFI;AAGJ,IAAA,YAHI;AAIJ,IAAA,GAAG,GAAG,CAJF;AAKJ,IAAA,GAAG,GAAG,GALF;AAMJ,IAAA,IANI;AAOJ,IAAA,QAPI;AAQJ,IAAA,gBARI;AASJ,IAAA,QATI;AAUJ,IAAA,IAAI,GAAG,QAVH;AAWJ,IAAA,MAXI;AAYJ,IAAA,QAZI;AAaJ;AACA,IAAA,IAdI;AAeJ,IAAA,KAfI;AAgBJ,IAAA,IAhBI;AAiBJ,IAAA;AAjBI,MAkBF,KAlBJ;AAoBA,QAAM,KAAK,GAAgB;AACzB,IAAA,gBADyB;AAEzB,IAAA,YAFyB;AAGzB,IAAA,QAHyB;AAIzB,IAAA,GAJyB;AAKzB,IAAA,GALyB;AAMzB,IAAA,MANyB;AAOzB,IAAA,IAPyB;AAQzB,IAAA,IARyB;AASzB,IAAA,QATyB;AAUzB,IAAA,KAVyB;AAWzB,IAAA,QAXyB;AAYzB,IAAA,UAAU,EAAE;AACV,MAAA,KAAK,EAAE,OADG;AAEV,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,IAAI,EAAE,KAHI;AAIV,MAAA,KAAK,EAAE;AAJG,KAZa;AAkBzB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAvB,CAlBmB;AAwBzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,KAAK,CAAC,EAAvB,CADQ;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC,OAHH;AAIZ,QAAA,IAAI,EAAE,OAJM;AAKZ,QAAA,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;AALpB;AAFe,KAAxB,CAxBkB;AAkCzB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAvB,CAlCmB;AAmCzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAxB;AAnCkB,GAA3B;AAsCA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,KAAP;AACD,CApEM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderProps, SliderState } from './Slider.types';\n\n/**\n * Given user props, returns state and render function for a Slider.\n */\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'size'],\n });\n\n const {\n // Props\n value,\n defaultValue,\n min = 0,\n max = 100,\n step,\n disabled,\n getAriaValueText,\n vertical,\n size = 'medium',\n origin,\n onChange,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const state: SliderState = {\n getAriaValueText,\n defaultValue,\n disabled,\n max,\n min,\n origin,\n size,\n step,\n vertical,\n value,\n onChange,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: {\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n orient: vertical ? 'vertical' : undefined,\n },\n }),\n rail: resolveShorthand(rail, { required: true }),\n thumb: resolveShorthand(thumb, { required: true }),\n };\n\n useSliderState_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;AAHyB,GAA1B,CAApB;AAMA,QAAM;AACJ;AACA,IAAA,KAFI;AAGJ,IAAA,YAHI;AAIJ,IAAA,GAAG,GAAG,CAJF;AAKJ,IAAA,GAAG,GAAG,GALF;AAMJ,IAAA,IANI;AAOJ,IAAA,QAPI;AAQJ,IAAA,QARI;AASJ,IAAA,IAAI,GAAG,QATH;AAUJ,IAAA,MAVI;AAWJ,IAAA,QAXI;AAYJ;AACA,IAAA,IAbI;AAcJ,IAAA,KAdI;AAeJ,IAAA,IAfI;AAgBJ,IAAA;AAhBI,MAiBF,KAjBJ;AAmBA,QAAM,KAAK,GAAgB;AACzB,IAAA,YADyB;AAEzB,IAAA,QAFyB;AAGzB,IAAA,GAHyB;AAIzB,IAAA,GAJyB;AAKzB,IAAA,MALyB;AAMzB,IAAA,IANyB;AAOzB,IAAA,IAPyB;AAQzB,IAAA,QARyB;AASzB,IAAA,KATyB;AAUzB,IAAA,QAVyB;AAWzB,IAAA,UAAU,EAAE;AACV,MAAA,KAAK,EAAE,OADG;AAEV,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,IAAI,EAAE,KAHI;AAIV,MAAA,KAAK,EAAE;AAJG,KAXa;AAiBzB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAvB,CAjBmB;AAuBzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,KAAK,CAAC,EAAvB,CADQ;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC,OAHH;AAIZ,QAAA,IAAI,EAAE,OAJM;AAKZ,QAAA,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;AALpB;AAFe,KAAxB,CAvBkB;AAiCzB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAvB,CAjCmB;AAkCzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAxB;AAlCkB,GAA3B;AAqCA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,KAAP;AACD,CAlEM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderProps, SliderState } from './Slider.types';\n\n/**\n * Given user props, returns state and render function for a Slider.\n */\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'size'],\n });\n\n const {\n // Props\n value,\n defaultValue,\n min = 0,\n max = 100,\n step,\n disabled,\n vertical,\n size = 'medium',\n origin,\n onChange,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const state: SliderState = {\n defaultValue,\n disabled,\n max,\n min,\n origin,\n size,\n step,\n vertical,\n value,\n onChange,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: {\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n orient: vertical ? 'vertical' : undefined,\n },\n }),\n rail: resolveShorthand(rail, { required: true }),\n thumb: resolveShorthand(thumb, { required: true }),\n };\n\n useSliderState_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}