@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
|
@@ -42,7 +42,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
42
42
|
"qhf8xq": "f10pi13n",
|
|
43
43
|
"mc9l5x": "fwk3njj",
|
|
44
44
|
"zoa1oz": "femm8af",
|
|
45
|
-
"famaaq": "f1xqy1su",
|
|
46
45
|
"lpbzjs": "f1sdsnyy",
|
|
47
46
|
"Bt984gj": "f122n59",
|
|
48
47
|
"B7hvi0a": "f1oiokrs"
|
|
@@ -94,30 +93,30 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
94
93
|
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
95
94
|
"B7lelfh": "f1il7mou",
|
|
96
95
|
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
97
|
-
"
|
|
98
|
-
"
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
"
|
|
108
|
-
"
|
|
109
|
-
"
|
|
110
|
-
"
|
|
111
|
-
"
|
|
112
|
-
"
|
|
113
|
-
"
|
|
114
|
-
"
|
|
115
|
-
"
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"
|
|
120
|
-
"
|
|
96
|
+
"Bbs9wvz": "f13adjqr",
|
|
97
|
+
"q02eyl": "f1188tw4",
|
|
98
|
+
"llgh1x": "ffcuypr",
|
|
99
|
+
"Dmi4yx": "f1ykafvd",
|
|
100
|
+
"rnk8mc": "fsk03u7",
|
|
101
|
+
"i8s5n4": ["fektfg6", "fb9zr6h"],
|
|
102
|
+
"Bvhkk4y": "fbtctfn",
|
|
103
|
+
"Jba7ju": ["fb9zr6h", "fektfg6"],
|
|
104
|
+
"B5kfbxi": "f13yiatr",
|
|
105
|
+
"aia6cn": ["f2he9yp", "f1qjzjrd"],
|
|
106
|
+
"dmu3zb": "f1kex75c",
|
|
107
|
+
"ozsp9x": ["f1qjzjrd", "f2he9yp"],
|
|
108
|
+
"izr52t": ["ft7spqo", "fmlur2k"],
|
|
109
|
+
"ei1ezu": ["fmlur2k", "ft7spqo"],
|
|
110
|
+
"Bbawuig": ["f1y3ebu", "f1utkke9"],
|
|
111
|
+
"B0g2sgm": ["f1utkke9", "f1y3ebu"],
|
|
112
|
+
"peent8": "fdu7fj4",
|
|
113
|
+
"B7odns5": ["f1ai831i", "f1mabxol"],
|
|
114
|
+
"Bk28q0d": "f1gu1oxr",
|
|
115
|
+
"cuest6": ["f1mabxol", "f1ai831i"],
|
|
116
|
+
"Bqelifr": "f1o4u7q6",
|
|
117
|
+
"qwo3bi": "f1fv0o0w",
|
|
118
|
+
"t4augk": ["fhdubzl", "fjy4int"],
|
|
119
|
+
"Beavxtj": ["fjy4int", "fhdubzl"]
|
|
121
120
|
},
|
|
122
121
|
"focusIndicatorVertical": {
|
|
123
122
|
"Brovlpu": "ftqa4ok",
|
|
@@ -125,36 +124,52 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
125
124
|
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
126
125
|
"B7lelfh": "f1il7mou",
|
|
127
126
|
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
128
|
-
"
|
|
129
|
-
"
|
|
130
|
-
"
|
|
131
|
-
"
|
|
132
|
-
"
|
|
133
|
-
"
|
|
134
|
-
"
|
|
135
|
-
"
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
"
|
|
142
|
-
"
|
|
143
|
-
"
|
|
144
|
-
"
|
|
145
|
-
"
|
|
146
|
-
"
|
|
147
|
-
"
|
|
148
|
-
"
|
|
149
|
-
"
|
|
150
|
-
"
|
|
151
|
-
"
|
|
127
|
+
"Bbs9wvz": "f13adjqr",
|
|
128
|
+
"q02eyl": "f1188tw4",
|
|
129
|
+
"llgh1x": "ffcuypr",
|
|
130
|
+
"Dmi4yx": "f1ykafvd",
|
|
131
|
+
"rnk8mc": "fsk03u7",
|
|
132
|
+
"i8s5n4": ["fektfg6", "fb9zr6h"],
|
|
133
|
+
"Bvhkk4y": "fbtctfn",
|
|
134
|
+
"Jba7ju": ["fb9zr6h", "fektfg6"],
|
|
135
|
+
"B5kfbxi": "f13yiatr",
|
|
136
|
+
"aia6cn": ["f2he9yp", "f1qjzjrd"],
|
|
137
|
+
"dmu3zb": "f1kex75c",
|
|
138
|
+
"ozsp9x": ["f1qjzjrd", "f2he9yp"],
|
|
139
|
+
"izr52t": ["ft7spqo", "fmlur2k"],
|
|
140
|
+
"ei1ezu": ["fmlur2k", "ft7spqo"],
|
|
141
|
+
"Bbawuig": ["f1y3ebu", "f1utkke9"],
|
|
142
|
+
"B0g2sgm": ["f1utkke9", "f1y3ebu"],
|
|
143
|
+
"peent8": "fdu7fj4",
|
|
144
|
+
"B7odns5": ["f1ai831i", "f1mabxol"],
|
|
145
|
+
"Bk28q0d": "f1gu1oxr",
|
|
146
|
+
"cuest6": ["f1mabxol", "f1ai831i"],
|
|
147
|
+
"Bqelifr": "fsv2fv9",
|
|
148
|
+
"qwo3bi": "f6vn0r0",
|
|
149
|
+
"t4augk": ["fcn3nep", "f7pqtxr"],
|
|
150
|
+
"Beavxtj": ["f7pqtxr", "fcn3nep"]
|
|
152
151
|
}
|
|
153
152
|
}, {
|
|
154
|
-
"d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".femm8af{grid-template-areas:\"slider\";}", ".
|
|
153
|
+
"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);}"],
|
|
155
154
|
"h": [".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}", ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"],
|
|
156
155
|
"a": [".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}", ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"],
|
|
157
|
-
"
|
|
156
|
+
"m": [["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", {
|
|
157
|
+
"m": "(forced-colors: active)"
|
|
158
|
+
}], ["@media (forced-colors: active){.f1xddb6{--fui-Slider__thumb--color:Highlight;}}", {
|
|
159
|
+
"m": "(forced-colors: active)"
|
|
160
|
+
}], ["@media (forced-colors: active){.fcdikl{--fui-Slider__progress--color:Highlight;}}", {
|
|
161
|
+
"m": "(forced-colors: active)"
|
|
162
|
+
}], ["@media (forced-colors: active){.fhpzgm6:hover{--fui-Slider__thumb--color:Highlight;}}", {
|
|
163
|
+
"m": "(forced-colors: active)"
|
|
164
|
+
}], ["@media (forced-colors: active){.f1q6pm3h:hover{--fui-Slider__progress--color:Highlight;}}", {
|
|
165
|
+
"m": "(forced-colors: active)"
|
|
166
|
+
}], ["@media (forced-colors: active){.fu12m3e{--fui-Slider__rail--color:GrayText;}}", {
|
|
167
|
+
"m": "(forced-colors: active)"
|
|
168
|
+
}], ["@media (forced-colors: active){.fi9guym{--fui-Slider__thumb--color:GrayText;}}", {
|
|
169
|
+
"m": "(forced-colors: active)"
|
|
170
|
+
}], ["@media (forced-colors: active){.fcdjl4u{--fui-Slider__progress--color:GrayText;}}", {
|
|
171
|
+
"m": "(forced-colors: active)"
|
|
172
|
+
}]],
|
|
158
173
|
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
159
174
|
});
|
|
160
175
|
/**
|
|
@@ -179,28 +194,30 @@ const useRailStyles = /*#__PURE__*/react_1.__styles({
|
|
|
179
194
|
"Bpd4iqm": "fpvhumw",
|
|
180
195
|
"oeaueh": "f1yog68k",
|
|
181
196
|
"Bw0xxkn": "f13sgyd8",
|
|
182
|
-
"
|
|
183
|
-
"
|
|
184
|
-
"
|
|
185
|
-
"
|
|
197
|
+
"Ftih45": "fzhtfnv",
|
|
198
|
+
"Brfgrao": "f1j7ml58",
|
|
199
|
+
"Bbn5juq": "fx36ao7",
|
|
200
|
+
"Brdvuy1": "fux3rle"
|
|
186
201
|
},
|
|
187
202
|
"horizontal": {
|
|
188
203
|
"a9b677": "fly5x3f",
|
|
189
204
|
"Bqenvij": "f1cy86ho",
|
|
190
|
-
"
|
|
191
|
-
"
|
|
192
|
-
"
|
|
205
|
+
"Fbdkly": ["f1heqfse", "fkh49vu"],
|
|
206
|
+
"mdwyqc": ["fkh49vu", "f1heqfse"],
|
|
207
|
+
"Baz25je": "f16tdq4e"
|
|
193
208
|
},
|
|
194
209
|
"vertical": {
|
|
195
210
|
"a9b677": "fqxfnkd",
|
|
196
211
|
"Bqenvij": "f1l02sjl",
|
|
197
|
-
"
|
|
198
|
-
"
|
|
199
|
-
"
|
|
212
|
+
"Ccq8qp": "f1rik0od",
|
|
213
|
+
"Bciustq": "f14xwovp",
|
|
214
|
+
"lawp4y": "febq2dz"
|
|
200
215
|
}
|
|
201
216
|
}, {
|
|
202
|
-
"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);}", ".
|
|
203
|
-
"
|
|
217
|
+
"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;}"],
|
|
218
|
+
"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 );}}", {
|
|
219
|
+
"m": "(forced-colors: active)"
|
|
220
|
+
}]]
|
|
204
221
|
});
|
|
205
222
|
/**
|
|
206
223
|
* Styles for the thumb slot
|
|
@@ -222,43 +239,43 @@ const useThumbStyles = /*#__PURE__*/react_1.__styles({
|
|
|
222
239
|
"E5pizo": "fof7hq0",
|
|
223
240
|
"De3pzq": "foksa45",
|
|
224
241
|
"Bz10aip": ["f13gfj74", "f1nfknbn"],
|
|
225
|
-
"
|
|
226
|
-
"
|
|
227
|
-
"
|
|
228
|
-
"
|
|
229
|
-
"
|
|
230
|
-
"
|
|
231
|
-
"
|
|
232
|
-
"
|
|
233
|
-
"
|
|
234
|
-
"
|
|
235
|
-
"
|
|
236
|
-
"
|
|
237
|
-
"
|
|
238
|
-
"
|
|
239
|
-
"
|
|
240
|
-
"
|
|
241
|
-
"
|
|
242
|
-
"
|
|
243
|
-
"
|
|
244
|
-
"
|
|
245
|
-
"
|
|
246
|
-
"
|
|
247
|
-
"
|
|
242
|
+
"Brfgrao": "f1j7ml58",
|
|
243
|
+
"Bciustq": "f14u7mkt",
|
|
244
|
+
"Fbdkly": ["f5zrw40", "f1ks5ppg"],
|
|
245
|
+
"lawp4y": "fto0uou",
|
|
246
|
+
"mdwyqc": ["f1ks5ppg", "f5zrw40"],
|
|
247
|
+
"Budzafs": ["feh19e8", "f3j3guj"],
|
|
248
|
+
"r59vdv": ["f3j3guj", "feh19e8"],
|
|
249
|
+
"n07z76": ["fo75joz", "f1yag6sl"],
|
|
250
|
+
"ck0cow": ["f1yag6sl", "fo75joz"],
|
|
251
|
+
"Bcvre1j": "fyl8oag",
|
|
252
|
+
"Ftih45": "fzhtfnv",
|
|
253
|
+
"B0qfbqy": "f1rponpz",
|
|
254
|
+
"B4f6apu": ["f1rvw2z1", "fjj0g3m"],
|
|
255
|
+
"y0oebl": "f1muowhs",
|
|
256
|
+
"uvfttm": ["fjj0g3m", "f1rvw2z1"],
|
|
257
|
+
"Bdkvgpv": "f163fonl",
|
|
258
|
+
"m598lv": ["f1yq6w5o", "f1jpmc5p"],
|
|
259
|
+
"qa3bma": "f11yjt3y",
|
|
260
|
+
"Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"],
|
|
261
|
+
"Bq4z7u6": "f10tv6oz",
|
|
262
|
+
"Bk5zm6e": ["f16xp3sf", "f1seuxxq"],
|
|
263
|
+
"Bqjgrrk": "fwrmqbx",
|
|
264
|
+
"Bm6vgfq": ["f1seuxxq", "f16xp3sf"]
|
|
248
265
|
},
|
|
249
266
|
"disabled": {
|
|
250
|
-
"
|
|
251
|
-
"
|
|
252
|
-
"
|
|
253
|
-
"
|
|
254
|
-
"
|
|
255
|
-
"
|
|
256
|
-
"
|
|
257
|
-
"
|
|
258
|
-
"
|
|
259
|
-
"
|
|
260
|
-
"
|
|
261
|
-
"
|
|
267
|
+
"B0qfbqy": "f1rponpz",
|
|
268
|
+
"B4f6apu": ["f1rvw2z1", "fjj0g3m"],
|
|
269
|
+
"y0oebl": "f1muowhs",
|
|
270
|
+
"uvfttm": ["fjj0g3m", "f1rvw2z1"],
|
|
271
|
+
"Bdkvgpv": "f163fonl",
|
|
272
|
+
"m598lv": ["f1yq6w5o", "f1jpmc5p"],
|
|
273
|
+
"qa3bma": "f11yjt3y",
|
|
274
|
+
"Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"],
|
|
275
|
+
"Bq4z7u6": "f1pw3ppl",
|
|
276
|
+
"Bk5zm6e": ["fxoq2z", "f1ykj0h9"],
|
|
277
|
+
"Bqjgrrk": "f1sz5gii",
|
|
278
|
+
"Bm6vgfq": ["f1ykj0h9", "fxoq2z"]
|
|
262
279
|
},
|
|
263
280
|
"horizontal": {
|
|
264
281
|
"oyh7mz": ["f1fj3zth", "fcf9u6w"]
|
|
@@ -268,7 +285,7 @@ const useThumbStyles = /*#__PURE__*/react_1.__styles({
|
|
|
268
285
|
"B5kzvoi": "feeniun"
|
|
269
286
|
}
|
|
270
287
|
}, {
|
|
271
|
-
"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%);}", ".
|
|
288
|
+
"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);}"]
|
|
272
289
|
});
|
|
273
290
|
/**
|
|
274
291
|
* 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":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,MAAA;EAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA","sourcesContent":["export {\n Slider,\n renderSlider_unstable,\n sliderClassNames,\n sliderCSSVars,\n useSliderState_unstable,\n useSliderStyles_unstable,\n useSlider_unstable,\n} from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-slider",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.21",
|
|
4
4
|
"description": "Fluent UI React Slider component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
-
"@fluentui/react-label": "9.0.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.10",
|
|
32
|
+
"@fluentui/react-label": "^9.0.1",
|
|
33
33
|
"@fluentui/scripts": "^1.0.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@griffel/react": "1.
|
|
37
|
-
"@fluentui/react-shared-contexts": "9.0.0
|
|
38
|
-
"@fluentui/react-tabster": "9.0.
|
|
39
|
-
"@fluentui/react-theme": "9.0.0
|
|
40
|
-
"@fluentui/react-utilities": "9.0.0
|
|
36
|
+
"@griffel/react": "^1.2.0",
|
|
37
|
+
"@fluentui/react-shared-contexts": "^9.0.0",
|
|
38
|
+
"@fluentui/react-tabster": "^9.0.1",
|
|
39
|
+
"@fluentui/react-theme": "^9.0.0",
|
|
40
|
+
"@fluentui/react-utilities": "^9.0.0",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|