@fluentui/react-slider 9.0.0-beta.19 → 9.0.0-beta.21
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/CHANGELOG.json +123 -1
- package/CHANGELOG.md +34 -2
- package/MIGRATION.md +35 -11
- package/README.md +16 -8
- package/Spec.md +17 -0
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/components/Slider/renderSlider.js.map +1 -1
- package/lib/components/Slider/useSlider.js.map +1 -1
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib/components/Slider/useSliderStyles.js +116 -99
- package/lib/components/Slider/useSliderStyles.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.js.map +1 -1
- package/lib-commonjs/components/Slider/index.js.map +1 -1
- package/lib-commonjs/components/Slider/renderSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderStyles.js +116 -99
- package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
|
@@ -32,7 +32,6 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
32
32
|
"qhf8xq": "f10pi13n",
|
|
33
33
|
"mc9l5x": "fwk3njj",
|
|
34
34
|
"zoa1oz": "femm8af",
|
|
35
|
-
"famaaq": "f1xqy1su",
|
|
36
35
|
"lpbzjs": "f1sdsnyy",
|
|
37
36
|
"Bt984gj": "f122n59",
|
|
38
37
|
"B7hvi0a": "f1oiokrs"
|
|
@@ -84,30 +83,30 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
84
83
|
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
85
84
|
"B7lelfh": "f1il7mou",
|
|
86
85
|
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
87
|
-
"
|
|
88
|
-
"
|
|
89
|
-
"
|
|
90
|
-
"
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
"
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
"
|
|
98
|
-
"
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
"
|
|
108
|
-
"
|
|
109
|
-
"
|
|
110
|
-
"
|
|
86
|
+
"Bbs9wvz": "f13adjqr",
|
|
87
|
+
"q02eyl": "f1188tw4",
|
|
88
|
+
"llgh1x": "ffcuypr",
|
|
89
|
+
"Dmi4yx": "f1ykafvd",
|
|
90
|
+
"rnk8mc": "fsk03u7",
|
|
91
|
+
"i8s5n4": ["fektfg6", "fb9zr6h"],
|
|
92
|
+
"Bvhkk4y": "fbtctfn",
|
|
93
|
+
"Jba7ju": ["fb9zr6h", "fektfg6"],
|
|
94
|
+
"B5kfbxi": "f13yiatr",
|
|
95
|
+
"aia6cn": ["f2he9yp", "f1qjzjrd"],
|
|
96
|
+
"dmu3zb": "f1kex75c",
|
|
97
|
+
"ozsp9x": ["f1qjzjrd", "f2he9yp"],
|
|
98
|
+
"izr52t": ["ft7spqo", "fmlur2k"],
|
|
99
|
+
"ei1ezu": ["fmlur2k", "ft7spqo"],
|
|
100
|
+
"Bbawuig": ["f1y3ebu", "f1utkke9"],
|
|
101
|
+
"B0g2sgm": ["f1utkke9", "f1y3ebu"],
|
|
102
|
+
"peent8": "fdu7fj4",
|
|
103
|
+
"B7odns5": ["f1ai831i", "f1mabxol"],
|
|
104
|
+
"Bk28q0d": "f1gu1oxr",
|
|
105
|
+
"cuest6": ["f1mabxol", "f1ai831i"],
|
|
106
|
+
"Bqelifr": "f1o4u7q6",
|
|
107
|
+
"qwo3bi": "f1fv0o0w",
|
|
108
|
+
"t4augk": ["fhdubzl", "fjy4int"],
|
|
109
|
+
"Beavxtj": ["fjy4int", "fhdubzl"]
|
|
111
110
|
},
|
|
112
111
|
"focusIndicatorVertical": {
|
|
113
112
|
"Brovlpu": "ftqa4ok",
|
|
@@ -115,36 +114,52 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
115
114
|
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
116
115
|
"B7lelfh": "f1il7mou",
|
|
117
116
|
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
118
|
-
"
|
|
119
|
-
"
|
|
120
|
-
"
|
|
121
|
-
"
|
|
122
|
-
"
|
|
123
|
-
"
|
|
124
|
-
"
|
|
125
|
-
"
|
|
126
|
-
"
|
|
127
|
-
"
|
|
128
|
-
"
|
|
129
|
-
"
|
|
130
|
-
"
|
|
131
|
-
"
|
|
132
|
-
"
|
|
133
|
-
"
|
|
134
|
-
"
|
|
135
|
-
"
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
"
|
|
117
|
+
"Bbs9wvz": "f13adjqr",
|
|
118
|
+
"q02eyl": "f1188tw4",
|
|
119
|
+
"llgh1x": "ffcuypr",
|
|
120
|
+
"Dmi4yx": "f1ykafvd",
|
|
121
|
+
"rnk8mc": "fsk03u7",
|
|
122
|
+
"i8s5n4": ["fektfg6", "fb9zr6h"],
|
|
123
|
+
"Bvhkk4y": "fbtctfn",
|
|
124
|
+
"Jba7ju": ["fb9zr6h", "fektfg6"],
|
|
125
|
+
"B5kfbxi": "f13yiatr",
|
|
126
|
+
"aia6cn": ["f2he9yp", "f1qjzjrd"],
|
|
127
|
+
"dmu3zb": "f1kex75c",
|
|
128
|
+
"ozsp9x": ["f1qjzjrd", "f2he9yp"],
|
|
129
|
+
"izr52t": ["ft7spqo", "fmlur2k"],
|
|
130
|
+
"ei1ezu": ["fmlur2k", "ft7spqo"],
|
|
131
|
+
"Bbawuig": ["f1y3ebu", "f1utkke9"],
|
|
132
|
+
"B0g2sgm": ["f1utkke9", "f1y3ebu"],
|
|
133
|
+
"peent8": "fdu7fj4",
|
|
134
|
+
"B7odns5": ["f1ai831i", "f1mabxol"],
|
|
135
|
+
"Bk28q0d": "f1gu1oxr",
|
|
136
|
+
"cuest6": ["f1mabxol", "f1ai831i"],
|
|
137
|
+
"Bqelifr": "fsv2fv9",
|
|
138
|
+
"qwo3bi": "f6vn0r0",
|
|
139
|
+
"t4augk": ["fcn3nep", "f7pqtxr"],
|
|
140
|
+
"Beavxtj": ["f7pqtxr", "fcn3nep"]
|
|
142
141
|
}
|
|
143
142
|
}, {
|
|
144
|
-
"d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".femm8af{grid-template-areas:\"slider\";}", ".
|
|
143
|
+
"d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".femm8af{grid-template-areas:\"slider\";}", ".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] .f13adjqr:focus-within::after{content:\"\";}", "[data-keyboard-nav] .f1188tw4:focus-within::after{position:absolute;}", "[data-keyboard-nav] .ffcuypr:focus-within::after{pointer-events:none;}", "[data-keyboard-nav] .f1ykafvd:focus-within::after{z-index:1;}", "[data-keyboard-nav] .fsk03u7:focus-within::after{border-top-style:solid;}", "[data-keyboard-nav] .fektfg6:focus-within::after{border-right-style:solid;}", "[data-keyboard-nav] .fb9zr6h:focus-within::after{border-left-style:solid;}", "[data-keyboard-nav] .fbtctfn:focus-within::after{border-bottom-style:solid;}", "[data-keyboard-nav] .f13yiatr:focus-within::after{border-top-width:2px;}", "[data-keyboard-nav] .f2he9yp:focus-within::after{border-right-width:2px;}", "[data-keyboard-nav] .f1qjzjrd:focus-within::after{border-left-width:2px;}", "[data-keyboard-nav] .f1kex75c:focus-within::after{border-bottom-width:2px;}", "[data-keyboard-nav] .ft7spqo:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fmlur2k:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1y3ebu:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1utkke9:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fdu7fj4:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ai831i:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1mabxol:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1gu1oxr:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1o4u7q6:focus-within::after{top:calc(0px - 2px - -2px);}", "[data-keyboard-nav] .f1fv0o0w:focus-within::after{bottom:calc(0px - 2px - -2px);}", "[data-keyboard-nav] .fhdubzl:focus-within::after{left:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .fjy4int:focus-within::after{right:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .fsv2fv9:focus-within::after{top:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f6vn0r0:focus-within::after{bottom:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .fcn3nep:focus-within::after{left:calc(0px - 2px - 4px);}", "[data-keyboard-nav] .f7pqtxr:focus-within::after{right:calc(0px - 2px - 4px);}"],
|
|
145
144
|
"h": [".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}", ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"],
|
|
146
145
|
"a": [".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}", ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"],
|
|
147
|
-
"
|
|
146
|
+
"m": [["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", {
|
|
147
|
+
"m": "(forced-colors: active)"
|
|
148
|
+
}], ["@media (forced-colors: active){.f1xddb6{--fui-Slider__thumb--color:Highlight;}}", {
|
|
149
|
+
"m": "(forced-colors: active)"
|
|
150
|
+
}], ["@media (forced-colors: active){.fcdikl{--fui-Slider__progress--color:Highlight;}}", {
|
|
151
|
+
"m": "(forced-colors: active)"
|
|
152
|
+
}], ["@media (forced-colors: active){.fhpzgm6:hover{--fui-Slider__thumb--color:Highlight;}}", {
|
|
153
|
+
"m": "(forced-colors: active)"
|
|
154
|
+
}], ["@media (forced-colors: active){.f1q6pm3h:hover{--fui-Slider__progress--color:Highlight;}}", {
|
|
155
|
+
"m": "(forced-colors: active)"
|
|
156
|
+
}], ["@media (forced-colors: active){.fu12m3e{--fui-Slider__rail--color:GrayText;}}", {
|
|
157
|
+
"m": "(forced-colors: active)"
|
|
158
|
+
}], ["@media (forced-colors: active){.fi9guym{--fui-Slider__thumb--color:GrayText;}}", {
|
|
159
|
+
"m": "(forced-colors: active)"
|
|
160
|
+
}], ["@media (forced-colors: active){.fcdjl4u{--fui-Slider__progress--color:GrayText;}}", {
|
|
161
|
+
"m": "(forced-colors: active)"
|
|
162
|
+
}]],
|
|
148
163
|
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
149
164
|
});
|
|
150
165
|
/**
|
|
@@ -169,28 +184,30 @@ const useRailStyles = /*#__PURE__*/__styles({
|
|
|
169
184
|
"Bpd4iqm": "fpvhumw",
|
|
170
185
|
"oeaueh": "f1yog68k",
|
|
171
186
|
"Bw0xxkn": "f13sgyd8",
|
|
172
|
-
"
|
|
173
|
-
"
|
|
174
|
-
"
|
|
175
|
-
"
|
|
187
|
+
"Ftih45": "fzhtfnv",
|
|
188
|
+
"Brfgrao": "f1j7ml58",
|
|
189
|
+
"Bbn5juq": "fx36ao7",
|
|
190
|
+
"Brdvuy1": "fux3rle"
|
|
176
191
|
},
|
|
177
192
|
"horizontal": {
|
|
178
193
|
"a9b677": "fly5x3f",
|
|
179
194
|
"Bqenvij": "f1cy86ho",
|
|
180
|
-
"
|
|
181
|
-
"
|
|
182
|
-
"
|
|
195
|
+
"Fbdkly": ["f1heqfse", "fkh49vu"],
|
|
196
|
+
"mdwyqc": ["fkh49vu", "f1heqfse"],
|
|
197
|
+
"Baz25je": "f16tdq4e"
|
|
183
198
|
},
|
|
184
199
|
"vertical": {
|
|
185
200
|
"a9b677": "fqxfnkd",
|
|
186
201
|
"Bqenvij": "f1l02sjl",
|
|
187
|
-
"
|
|
188
|
-
"
|
|
189
|
-
"
|
|
202
|
+
"Ccq8qp": "f1rik0od",
|
|
203
|
+
"Bciustq": "f14xwovp",
|
|
204
|
+
"lawp4y": "febq2dz"
|
|
190
205
|
}
|
|
191
206
|
}, {
|
|
192
|
-
"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;}", ".fizngqt{background-image:linear-gradient(\n var(--fui-Slider--direction),\n var(--fui-Slider__progress--color) 0%,\n var(--fui-Slider__progress--color) var(--fui-Slider--progress),\n var(--fui-Slider__rail--color) var(--fui-Slider--progress)\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".
|
|
193
|
-
"
|
|
207
|
+
"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;}", ".fizngqt{background-image:linear-gradient(\n var(--fui-Slider--direction),\n var(--fui-Slider__progress--color) 0%,\n var(--fui-Slider__progress--color) var(--fui-Slider--progress),\n var(--fui-Slider__rail--color) var(--fui-Slider--progress)\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".fzhtfnv::before{content:'';}", ".f1j7ml58::before{position:absolute;}", ".fx36ao7::before{background-image:repeating-linear-gradient(\n var(--fui-Slider--direction),\n #0000 0%,\n #0000 calc(var(--fui-Slider--steps-percent) - 1px),\n var(--colorNeutralBackground1) calc(var(--fui-Slider--steps-percent) - 1px),\n var(--colorNeutralBackground1) var(--fui-Slider--steps-percent)\n );}", ".fly5x3f{width:100%;}", ".f1cy86ho{height:var(--fui-Slider__rail--size);}", ".f1heqfse::before{left:-1px;}", ".fkh49vu::before{right:-1px;}", ".f16tdq4e::before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f1rik0od::before{width:var(--fui-Slider__rail--size);}", ".f14xwovp::before{top:-1px;}", ".febq2dz::before{bottom:1px;}"],
|
|
208
|
+
"m": [["@media (forced-colors: active){.fux3rle::before{background-image:repeating-linear-gradient(\n var(--fui-Slider--direction),\n #0000 0%,\n #0000 calc(var(--fui-Slider--steps-percent) - 1px),\n HighlightText calc(var(--fui-Slider--steps-percent) - 1px),\n HighlightText var(--fui-Slider--steps-percent)\n );}}", {
|
|
209
|
+
"m": "(forced-colors: active)"
|
|
210
|
+
}]]
|
|
194
211
|
});
|
|
195
212
|
/**
|
|
196
213
|
* Styles for the thumb slot
|
|
@@ -212,43 +229,43 @@ const useThumbStyles = /*#__PURE__*/__styles({
|
|
|
212
229
|
"E5pizo": "fof7hq0",
|
|
213
230
|
"De3pzq": "foksa45",
|
|
214
231
|
"Bz10aip": ["f13gfj74", "f1nfknbn"],
|
|
215
|
-
"
|
|
216
|
-
"
|
|
217
|
-
"
|
|
218
|
-
"
|
|
219
|
-
"
|
|
220
|
-
"
|
|
221
|
-
"
|
|
222
|
-
"
|
|
223
|
-
"
|
|
224
|
-
"
|
|
225
|
-
"
|
|
226
|
-
"
|
|
227
|
-
"
|
|
228
|
-
"
|
|
229
|
-
"
|
|
230
|
-
"
|
|
231
|
-
"
|
|
232
|
-
"
|
|
233
|
-
"
|
|
234
|
-
"
|
|
235
|
-
"
|
|
236
|
-
"
|
|
237
|
-
"
|
|
232
|
+
"Brfgrao": "f1j7ml58",
|
|
233
|
+
"Bciustq": "f14u7mkt",
|
|
234
|
+
"Fbdkly": ["f5zrw40", "f1ks5ppg"],
|
|
235
|
+
"lawp4y": "fto0uou",
|
|
236
|
+
"mdwyqc": ["f1ks5ppg", "f5zrw40"],
|
|
237
|
+
"Budzafs": ["feh19e8", "f3j3guj"],
|
|
238
|
+
"r59vdv": ["f3j3guj", "feh19e8"],
|
|
239
|
+
"n07z76": ["fo75joz", "f1yag6sl"],
|
|
240
|
+
"ck0cow": ["f1yag6sl", "fo75joz"],
|
|
241
|
+
"Bcvre1j": "fyl8oag",
|
|
242
|
+
"Ftih45": "fzhtfnv",
|
|
243
|
+
"B0qfbqy": "f1rponpz",
|
|
244
|
+
"B4f6apu": ["f1rvw2z1", "fjj0g3m"],
|
|
245
|
+
"y0oebl": "f1muowhs",
|
|
246
|
+
"uvfttm": ["fjj0g3m", "f1rvw2z1"],
|
|
247
|
+
"Bdkvgpv": "f163fonl",
|
|
248
|
+
"m598lv": ["f1yq6w5o", "f1jpmc5p"],
|
|
249
|
+
"qa3bma": "f11yjt3y",
|
|
250
|
+
"Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"],
|
|
251
|
+
"Bq4z7u6": "f10tv6oz",
|
|
252
|
+
"Bk5zm6e": ["f16xp3sf", "f1seuxxq"],
|
|
253
|
+
"Bqjgrrk": "fwrmqbx",
|
|
254
|
+
"Bm6vgfq": ["f1seuxxq", "f16xp3sf"]
|
|
238
255
|
},
|
|
239
256
|
"disabled": {
|
|
240
|
-
"
|
|
241
|
-
"
|
|
242
|
-
"
|
|
243
|
-
"
|
|
244
|
-
"
|
|
245
|
-
"
|
|
246
|
-
"
|
|
247
|
-
"
|
|
248
|
-
"
|
|
249
|
-
"
|
|
250
|
-
"
|
|
251
|
-
"
|
|
257
|
+
"B0qfbqy": "f1rponpz",
|
|
258
|
+
"B4f6apu": ["f1rvw2z1", "fjj0g3m"],
|
|
259
|
+
"y0oebl": "f1muowhs",
|
|
260
|
+
"uvfttm": ["fjj0g3m", "f1rvw2z1"],
|
|
261
|
+
"Bdkvgpv": "f163fonl",
|
|
262
|
+
"m598lv": ["f1yq6w5o", "f1jpmc5p"],
|
|
263
|
+
"qa3bma": "f11yjt3y",
|
|
264
|
+
"Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"],
|
|
265
|
+
"Bq4z7u6": "f1pw3ppl",
|
|
266
|
+
"Bk5zm6e": ["fxoq2z", "f1ykj0h9"],
|
|
267
|
+
"Bqjgrrk": "f1sz5gii",
|
|
268
|
+
"Bm6vgfq": ["f1ykj0h9", "fxoq2z"]
|
|
252
269
|
},
|
|
253
270
|
"horizontal": {
|
|
254
271
|
"oyh7mz": ["f1fj3zth", "fcf9u6w"]
|
|
@@ -258,7 +275,7 @@ const useThumbStyles = /*#__PURE__*/__styles({
|
|
|
258
275
|
"B5kzvoi": "feeniun"
|
|
259
276
|
}
|
|
260
277
|
}, {
|
|
261
|
-
"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%);}", ".
|
|
278
|
+
"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%);}", ".f1j7ml58::before{position:absolute;}", ".f14u7mkt::before{top:0px;}", ".f5zrw40::before{left:0px;}", ".f1ks5ppg::before{right:0px;}", ".fto0uou::before{bottom:0px;}", ".feh19e8::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f3j3guj::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fo75joz::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1yag6sl::before{border-top-left-radius:var(--borderRadiusCircular);}", ".fyl8oag::before{box-sizing:border-box;}", ".fzhtfnv::before{content:'';}", ".f1rponpz::before{border-top-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1rvw2z1::before{border-right-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fjj0g3m::before{border-left-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1muowhs::before{border-bottom-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fwrmqbx::before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1pw3ppl::before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".fxoq2z::before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f1ykj0h9::before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".f1sz5gii::before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".f1fj3zth{left:var(--fui-Slider--progress);}", ".fcf9u6w{right:var(--fui-Slider--progress);}", ".f5cv5a3{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".feeniun{bottom:var(--fui-Slider--progress);}"]
|
|
262
279
|
});
|
|
263
280
|
/**
|
|
264
281
|
* Styles for the Input slot
|
|
@@ -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, 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 sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n};\n\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = 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(${sliderDirectionVar}),\n var(${progressColorVar}) 0%,\n var(${progressColorVar}) var(${sliderProgressVar}),\n var(${railColorVar}) var(${sliderProgressVar})\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(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\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(${sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${sliderProgressVar})`,\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/"}
|
|
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 sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n};\n\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = 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 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(${sliderDirectionVar}),\n var(${progressColorVar}) 0%,\n var(${progressColorVar}) var(${sliderProgressVar}),\n var(${railColorVar}) var(${sliderProgressVar})\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(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\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(${sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${sliderProgressVar})`,\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/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/Slider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/Slider/Slider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Slider component allows users to quickly select a value by dragging a thumb across a rail.\n */\nexport const Slider: ForwardRefComponent<SliderProps> = React.forwardRef((props, ref) => {\n const state = useSlider_unstable(props, ref);\n\n useSliderStyles_unstable(state);\n\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"sourceRoot":"../src/"}
|
|
@@ -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;
|
|
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;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAe,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/renderSlider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;
|
|
1
|
+
{"version":3,"sources":["components/Slider/renderSlider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHF,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderState) => {\n const { slots, slotProps } = getSlots<SliderSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.rail {...slotProps.rail} />\n <slots.thumb {...slotProps.thumb} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -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;;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;
|
|
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;;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;EAHyB,CAA1B,CAApB;EAMA,MAAM;IACJ,QADI;IAEJ,QAFI;IAGJ,IAAI,GAAG,QAHH;IAIJ;IACA,IALI;IAMJ,KANI;IAOJ,IAPI;IAQJ;EARI,IASF,KATJ;EAWA,MAAM,KAAK,GAAgB;IACzB,QADyB;IAEzB,IAFyB;IAGzB,QAHyB;IAIzB,UAAU,EAAE;MACV,KAAK,EAAE,OADG;MAEV,IAAI,EAAE,KAFI;MAGV,IAAI,EAAE,KAHI;MAIV,KAAK,EAAE;IAJG,CAJa;IAUzB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;MADH;IAFa,CAAvB,CAVmB;IAgBzB,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;MAC7B,QAAQ,EAAE,IADmB;MAE7B,YAAY,EAAE;QACZ,EAAE,EAAE,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,KAAK,CAAC,EAAvB,CADQ;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC,OAHH;QAIZ,IAAI,EAAE,OAJM;QAKZ,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;MALpB;IAFe,CAAxB,CAhBkB;IA0BzB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;MAAE,QAAQ,EAAE;IAAZ,CAAvB,CA1BmB;IA2BzB,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;MAAE,QAAQ,EAAE;IAAZ,CAAxB;EA3BkB,CAA3B;EA8BA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,KAA/B;EAEA,OAAO,KAAP;AACD,CAnDM;;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\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 disabled,\n vertical,\n size = 'medium',\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const state: SliderState = {\n disabled,\n size,\n vertical,\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, props);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAGA,MAAM;
|
|
1
|
+
{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAGA,MAAM;EAAE,qBAAF;EAAyB,iBAAzB;EAA4C;AAA5C,IAAmE,iBAAA,CAAA,aAAzE;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;EAC7D,OAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAqB,KAArB,KAA2C;EAChF,MAAM;IAAE,YAAY,GAAG,CAAjB;IAAoB,GAAG,GAAG,CAA1B;IAA6B,GAAG,GAAG,GAAnC;IAAwC,IAAxC;IAA8C;EAA9C,IAAwD,KAA9D;EACA,MAAM;IAAE;EAAF,IAAU,uBAAA,CAAA,kBAAA,EAAhB;EACA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,iBAAA,CAAA,oBAAA,CAAqB;IAC3D,KAAK,EAAE,KAAK,KAAK,SAAV,GAAsB,iBAAA,CAAA,KAAA,CAAM,KAAN,EAAa,GAAb,EAAkB,GAAlB,CAAtB,GAA+C,SADK;IAE3D,YAAY,EAAE,iBAAA,CAAA,KAAA,CAAM,YAAN,EAAoB,GAApB,EAAyB,GAAzB,CAF6C;IAG3D,YAAY,EAAE;EAH6C,CAArB,CAAxC;EAKA,MAAM,YAAY,GAAG,UAAU,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAA/B;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAN,CAAY,QAAlC;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,QAA5B;EAEA,MAAM,QAAQ,GAA+C,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IACjF,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAvB;IACA,eAAe,CAAC,iBAAA,CAAA,KAAA,CAAM,QAAN,EAAgB,GAAhB,EAAqB,GAArB,CAAD,CAAf;;IAEA,IAAI,aAAa,IAAI,aAAa,KAAK,aAAvC,EAAsD;MACpD,aAAa,CAAC,EAAD,CAAb;IACD,CAFD,MAEO,IAAI,aAAJ,EAAmB;MACxB,aAAa,CAAC,EAAD,EAAK;QAAE,KAAK,EAAE;MAAT,CAAL,CAAb;IACD;EACF,CAT4D,CAA7D;EAWA,MAAM,aAAa,GAAG;IACpB,CAAC,kBAAD,GAAsB,KAAK,CAAC,QAAN,GAAiB,MAAjB,GAA0B,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,QADtD;IAEpB,CAAC,qBAAD,GAAyB,IAAI,IAAI,IAAI,GAAG,CAAf,GAAmB,GAAI,IAAI,GAAG,GAAR,IAAgB,GAAG,GAAG,GAAtB,CAA0B,GAAhD,GAAsD,EAF3D;IAGpB,CAAC,iBAAD,GAAqB,GAAG,YAAY;EAHhB,CAAtB,CAxBgF,CA8BhF;;EACA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,aADc;IAEjB,GAAG,KAAK,CAAC,IAAN,CAAW;EAFG,CAAnB,CA/BgF,CAoChF;;EACA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;EAEA,OAAO,KAAP;AACD,CAzCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|