@fluentui/react-slider 9.0.10 → 9.0.12

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 (29) hide show
  1. package/CHANGELOG.json +81 -1
  2. package/CHANGELOG.md +27 -2
  3. package/lib/components/Slider/useSliderStyles.js +57 -57
  4. package/lib-amd/Slider.js +6 -0
  5. package/lib-amd/Slider.js.map +1 -0
  6. package/lib-amd/SliderField.js +6 -0
  7. package/lib-amd/SliderField.js.map +1 -0
  8. package/lib-amd/components/Slider/Slider.js +15 -0
  9. package/lib-amd/components/Slider/Slider.js.map +1 -0
  10. package/lib-amd/components/Slider/Slider.types.js +5 -0
  11. package/lib-amd/components/Slider/Slider.types.js.map +1 -0
  12. package/lib-amd/components/Slider/index.js +14 -0
  13. package/lib-amd/components/Slider/index.js.map +1 -0
  14. package/lib-amd/components/Slider/renderSlider.js +17 -0
  15. package/lib-amd/components/Slider/renderSlider.js.map +1 -0
  16. package/lib-amd/components/Slider/useSlider.js +40 -0
  17. package/lib-amd/components/Slider/useSlider.js.map +1 -0
  18. package/lib-amd/components/Slider/useSliderState.js +45 -0
  19. package/lib-amd/components/Slider/useSliderState.js.map +1 -0
  20. package/lib-amd/components/Slider/useSliderStyles.js +185 -0
  21. package/lib-amd/components/Slider/useSliderStyles.js.map +1 -0
  22. package/lib-amd/components/SliderField/SliderField.js +13 -0
  23. package/lib-amd/components/SliderField/SliderField.js.map +1 -0
  24. package/lib-amd/components/SliderField/index.js +6 -0
  25. package/lib-amd/components/SliderField/index.js.map +1 -0
  26. package/lib-amd/index.js +15 -0
  27. package/lib-amd/index.js.map +1 -0
  28. package/lib-commonjs/components/Slider/useSliderStyles.js +57 -57
  29. package/package.json +7 -7
package/CHANGELOG.json CHANGED
@@ -2,7 +2,87 @@
2
2
  "name": "@fluentui/react-slider",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 11 Nov 2022 14:53:24 GMT",
5
+ "date": "Mon, 05 Dec 2022 18:25:37 GMT",
6
+ "tag": "@fluentui/react-slider_v9.0.12",
7
+ "version": "9.0.12",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-slider",
13
+ "comment": "Bump @fluentui/react-field to v9.0.0-alpha.10",
14
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-slider",
19
+ "comment": "Bump @fluentui/react-shared-contexts to v9.1.2",
20
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-slider",
25
+ "comment": "Bump @fluentui/react-tabster to v9.3.2",
26
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-slider",
31
+ "comment": "Bump @fluentui/react-theme to v9.1.3",
32
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-slider",
37
+ "comment": "Bump @fluentui/react-label to v9.0.12",
38
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
39
+ }
40
+ ]
41
+ }
42
+ },
43
+ {
44
+ "date": "Thu, 17 Nov 2022 23:05:46 GMT",
45
+ "tag": "@fluentui/react-slider_v9.0.11",
46
+ "version": "9.0.11",
47
+ "comments": {
48
+ "none": [
49
+ {
50
+ "author": "martinhochel@microsoft.com",
51
+ "package": "@fluentui/react-slider",
52
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
53
+ "comment": "chore: update package scaffold"
54
+ }
55
+ ],
56
+ "patch": [
57
+ {
58
+ "author": "beachball",
59
+ "package": "@fluentui/react-slider",
60
+ "comment": "Bump @fluentui/react-field to v9.0.0-alpha.9",
61
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
62
+ },
63
+ {
64
+ "author": "beachball",
65
+ "package": "@fluentui/react-slider",
66
+ "comment": "Bump @fluentui/react-tabster to v9.3.1",
67
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
68
+ },
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-slider",
72
+ "comment": "Bump @fluentui/react-utilities to v9.2.2",
73
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
74
+ },
75
+ {
76
+ "author": "beachball",
77
+ "package": "@fluentui/react-slider",
78
+ "comment": "Bump @fluentui/react-label to v9.0.11",
79
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
80
+ }
81
+ ]
82
+ }
83
+ },
84
+ {
85
+ "date": "Fri, 11 Nov 2022 14:57:37 GMT",
6
86
  "tag": "@fluentui/react-slider_v9.0.10",
7
87
  "version": "9.0.10",
8
88
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,37 @@
1
1
  # Change Log - @fluentui/react-slider
2
2
 
3
- This log was last generated on Fri, 11 Nov 2022 14:53:24 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 05 Dec 2022 18:25:37 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.12)
8
+
9
+ Mon, 05 Dec 2022 18:25:37 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.11..@fluentui/react-slider_v9.0.12)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-field to v9.0.0-alpha.10 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
15
+ - Bump @fluentui/react-shared-contexts to v9.1.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.3.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
17
+ - Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
18
+ - Bump @fluentui/react-label to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
19
+
20
+ ## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.11)
21
+
22
+ Thu, 17 Nov 2022 23:05:46 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.10..@fluentui/react-slider_v9.0.11)
24
+
25
+ ### Patches
26
+
27
+ - Bump @fluentui/react-field to v9.0.0-alpha.9 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
28
+ - Bump @fluentui/react-tabster to v9.3.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
29
+ - Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
30
+ - Bump @fluentui/react-label to v9.0.11 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
31
+
7
32
  ## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.10)
8
33
 
9
- Fri, 11 Nov 2022 14:53:24 GMT
34
+ Fri, 11 Nov 2022 14:57:37 GMT
10
35
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.9..@fluentui/react-slider_v9.0.10)
11
36
 
12
37
  ### Patches
package/lib/components/Slider/useSliderStyles.js CHANGED
@@ -80,69 +80,69 @@ const useRootStyles = /*#__PURE__*/__styles({
80
80
  "focusIndicatorHorizontal": {
81
81
  "Brovlpu": "ftqa4ok",
82
82
  "B486eqv": "f2hkw1w",
83
- "n9p9qa": "f1fu8s9w",
84
- "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
85
- "r10ruj": "f1c1apvh",
86
- "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
87
- "gjlbkn": "fyrlc8h",
88
- "B1kt0iq": "f28z38y",
89
- "Boi8ppg": "f1edqc4x",
90
- "Btfhvw2": "f19bnj08",
91
- "B55xfkk": "f17wg1r9",
92
- "i1dkbe": ["fgiioun", "fnx45sh"],
93
- "Bozs2tv": "f1ljqnps",
94
- "snkem8": ["fnx45sh", "fgiioun"],
95
- "Bjilewg": "fsacsau",
96
- "wht04d": ["flcxmxr", "f138axrn"],
97
- "vikdft": "f1f4bc3q",
98
- "Bwdhxlo": ["f138axrn", "flcxmxr"],
99
- "B167d6d": ["f5m7f7q", "f175edhc"],
100
- "Bpdw69r": ["f175edhc", "f5m7f7q"],
101
- "Bsdv7io": ["fhfahiz", "fnreirl"],
102
- "Bd353ur": ["fnreirl", "fhfahiz"],
103
- "Bcnuwmc": "fn9i64i",
104
- "dyfsa2": ["f1pylbqb", "f3dy9ja"],
105
- "Bdcx1rh": "f1v06qdr",
106
- "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
107
- "Bbretkc": "flkas93",
108
- "rnyfg7": "fq5e9oh",
109
- "Bg18gms": ["fgohmdn", "fjs6mrq"],
110
- "Bym00rn": ["fjs6mrq", "fgohmdn"]
83
+ "Bssx7fj": "f1b1k54r",
84
+ "uh7if5": ["f4ne723", "fqqcjud"],
85
+ "clntm0": "fh7aioi",
86
+ "Dlk2r6": ["fqqcjud", "f4ne723"],
87
+ "B2j2mmj": "ffht0p2",
88
+ "wigs8": "f1p0ul1q",
89
+ "pbfy6t": "f1c901ms",
90
+ "B0v4ure": "f1alokd7",
91
+ "ghq09": "f78i1la",
92
+ "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
93
+ "Bwckmig": "f8k7e5g",
94
+ "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
95
+ "Bbgo44z": "f1pmxfrl",
96
+ "Bil7v7r": ["fszkfcr", "f1ap5ily"],
97
+ "skfxo0": "f57dp0y",
98
+ "jo1ztg": ["f1ap5ily", "fszkfcr"],
99
+ "Ba3ybja": ["f11dm2qb", "f136rfnd"],
100
+ "az1dzo": ["f136rfnd", "f11dm2qb"],
101
+ "vppk2z": ["fdsq1qd", "f1khssms"],
102
+ "B6352mv": ["f1khssms", "fdsq1qd"],
103
+ "nr063g": "fq4eyks",
104
+ "Blmvk6g": ["f1ya6x16", "ftuszwa"],
105
+ "Bsiemmq": "f1e2iu44",
106
+ "B98u21t": ["ftuszwa", "f1ya6x16"],
107
+ "B2pnrqr": "f1pffoy2",
108
+ "Bhhzhcn": "fs6b7xr",
109
+ "Bec0n69": ["f15fv2gd", "f1bmyog6"],
110
+ "B29w5g4": ["f1bmyog6", "f15fv2gd"]
111
111
  },
112
112
  "focusIndicatorVertical": {
113
113
  "Brovlpu": "ftqa4ok",
114
114
  "B486eqv": "f2hkw1w",
115
- "n9p9qa": "f1fu8s9w",
116
- "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
117
- "r10ruj": "f1c1apvh",
118
- "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
119
- "gjlbkn": "fyrlc8h",
120
- "B1kt0iq": "f28z38y",
121
- "Boi8ppg": "f1edqc4x",
122
- "Btfhvw2": "f19bnj08",
123
- "B55xfkk": "f17wg1r9",
124
- "i1dkbe": ["fgiioun", "fnx45sh"],
125
- "Bozs2tv": "f1ljqnps",
126
- "snkem8": ["fnx45sh", "fgiioun"],
127
- "Bjilewg": "fsacsau",
128
- "wht04d": ["flcxmxr", "f138axrn"],
129
- "vikdft": "f1f4bc3q",
130
- "Bwdhxlo": ["f138axrn", "flcxmxr"],
131
- "B167d6d": ["f5m7f7q", "f175edhc"],
132
- "Bpdw69r": ["f175edhc", "f5m7f7q"],
133
- "Bsdv7io": ["fhfahiz", "fnreirl"],
134
- "Bd353ur": ["fnreirl", "fhfahiz"],
135
- "Bcnuwmc": "fn9i64i",
136
- "dyfsa2": ["f1pylbqb", "f3dy9ja"],
137
- "Bdcx1rh": "f1v06qdr",
138
- "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
139
- "Bbretkc": "f15meo09",
140
- "rnyfg7": "f11wb2ck",
141
- "Bg18gms": ["f16x7czw", "fo3e1s0"],
142
- "Bym00rn": ["fo3e1s0", "f16x7czw"]
115
+ "Bssx7fj": "f1b1k54r",
116
+ "uh7if5": ["f4ne723", "fqqcjud"],
117
+ "clntm0": "fh7aioi",
118
+ "Dlk2r6": ["fqqcjud", "f4ne723"],
119
+ "B2j2mmj": "ffht0p2",
120
+ "wigs8": "f1p0ul1q",
121
+ "pbfy6t": "f1c901ms",
122
+ "B0v4ure": "f1alokd7",
123
+ "ghq09": "f78i1la",
124
+ "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
125
+ "Bwckmig": "f8k7e5g",
126
+ "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
127
+ "Bbgo44z": "f1pmxfrl",
128
+ "Bil7v7r": ["fszkfcr", "f1ap5ily"],
129
+ "skfxo0": "f57dp0y",
130
+ "jo1ztg": ["f1ap5ily", "fszkfcr"],
131
+ "Ba3ybja": ["f11dm2qb", "f136rfnd"],
132
+ "az1dzo": ["f136rfnd", "f11dm2qb"],
133
+ "vppk2z": ["fdsq1qd", "f1khssms"],
134
+ "B6352mv": ["f1khssms", "fdsq1qd"],
135
+ "nr063g": "fq4eyks",
136
+ "Blmvk6g": ["f1ya6x16", "ftuszwa"],
137
+ "Bsiemmq": "f1e2iu44",
138
+ "B98u21t": ["ftuszwa", "f1ya6x16"],
139
+ "B2pnrqr": "f1hxpdv8",
140
+ "Bhhzhcn": "f1dmxpeg",
141
+ "Bec0n69": ["femsgmt", "fm5xmfm"],
142
+ "B29w5g4": ["fm5xmfm", "femsgmt"]
143
143
  }
144
144
  }, {
145
- "d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".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;}", ".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f4t5rw1{grid-template-columns:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".f1pzv1zu{min-height:120px;}", ".fktlcaf{grid-template-rows:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}", ".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);}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".flkas93[data-fui-focus-visible]:focus-within::after{top:calc(0px - 2px - -2px);}", ".fq5e9oh[data-fui-focus-visible]:focus-within::after{bottom:calc(0px - 2px - -2px);}", ".fgohmdn[data-fui-focus-visible]:focus-within::after{left:calc(0px - 2px - 8px);}", ".fjs6mrq[data-fui-focus-visible]:focus-within::after{right:calc(0px - 2px - 8px);}", ".f15meo09[data-fui-focus-visible]:focus-within::after{top:calc(0px - 2px - 6px);}", ".f11wb2ck[data-fui-focus-visible]:focus-within::after{bottom:calc(0px - 2px - 6px);}", ".f16x7czw[data-fui-focus-visible]:focus-within::after{left:calc(0px - 2px - 4px);}", ".fo3e1s0[data-fui-focus-visible]:focus-within::after{right:calc(0px - 2px - 4px);}"],
145
+ "d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".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;}", ".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f4t5rw1{grid-template-columns:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".f1pzv1zu{min-height:120px;}", ".fktlcaf{grid-template-rows:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}", ".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);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1pffoy2[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - -2px);}", ".fs6b7xr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 2px - -2px);}", ".f15fv2gd[data-fui-focus-within]:focus-within::after{left:calc(0px - 2px - 8px);}", ".f1bmyog6[data-fui-focus-within]:focus-within::after{right:calc(0px - 2px - 8px);}", ".f1hxpdv8[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - 6px);}", ".f1dmxpeg[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 2px - 6px);}", ".femsgmt[data-fui-focus-within]:focus-within::after{left:calc(0px - 2px - 4px);}", ".fm5xmfm[data-fui-focus-within]:focus-within::after{right:calc(0px - 2px - 4px);}"],
146
146
  "h": [".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}", ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"],
147
147
  "a": [".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}", ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"],
148
148
  "m": [["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", {
package/lib-amd/Slider.js ADDED
@@ -0,0 +1,6 @@
1
+ define(["require", "exports", "tslib", "./components/Slider/index"], function (require, exports, tslib_1, index_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(index_1, exports);
5
+ });
6
+ //# sourceMappingURL=Slider.js.map
package/lib-amd/Slider.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-slider/src/Slider.ts"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Slider/index';\n"]}
package/lib-amd/SliderField.js ADDED
@@ -0,0 +1,6 @@
1
+ define(["require", "exports", "tslib", "./components/SliderField/index"], function (require, exports, tslib_1, index_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(index_1, exports);
5
+ });
6
+ //# sourceMappingURL=SliderField.js.map
package/lib-amd/SliderField.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SliderField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-slider/src/SliderField.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/SliderField/index';\n"]}
package/lib-amd/components/Slider/Slider.js ADDED
@@ -0,0 +1,15 @@
1
+ define(["require", "exports", "react", "./useSlider", "./renderSlider", "./useSliderStyles"], function (require, exports, React, useSlider_1, renderSlider_1, useSliderStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.Slider = void 0;
5
+ /**
6
+ * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
7
+ */
8
+ exports.Slider = React.forwardRef(function (props, ref) {
9
+ var state = useSlider_1.useSlider_unstable(props, ref);
10
+ useSliderStyles_1.useSliderStyles_unstable(state);
11
+ return renderSlider_1.renderSlider_unstable(state);
12
+ });
13
+ exports.Slider.displayName = 'Slider';
14
+ });
15
+ //# sourceMappingURL=Slider.js.map
package/lib-amd/components/Slider/Slider.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/Slider/Slider.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,MAAM,GAAqC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClF,IAAM,KAAK,GAAG,8BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE7C,0CAAwB,CAAC,KAAK,CAAC,CAAC;QAEhC,OAAO,oCAAqB,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","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"]}
package/lib-amd/components/Slider/Slider.types.js ADDED
@@ -0,0 +1,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# sourceMappingURL=Slider.types.js.map
package/lib-amd/components/Slider/Slider.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n /**\n * The root of the Slider.\n * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n * All other native props will be applied to the primary slot, `input`.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The Slider's base. It is used to visibly display the min and max selectable values.\n */\n rail: NonNullable<Slot<'div'>>;\n\n /**\n * The draggable icon used to select a given value from the Slider.\n * This is the element containing `role = 'slider'`.\n */\n thumb: NonNullable<Slot<'div'>>;\n\n /**\n * The hidden input for the Slider.\n * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n *\n */\n input: NonNullable<Slot<'input'>> & {\n /**\n * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n * when `vertical` is set to true.\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n */\n orient?: 'horizontal' | 'vertical';\n };\n};\n\nexport type SliderProps = Omit<\n ComponentProps<Partial<SliderSlots>, 'input'>,\n 'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n /**\n * The starting value for an uncontrolled Slider.\n * Mutually exclusive with `value` prop.\n */\n defaultValue?: number;\n\n /**\n * Whether to render the Slider as disabled.\n *\n * @default `false` (renders enabled)\n */\n disabled?: boolean;\n\n /**\n * The max value of the Slider.\n * @default 100\n */\n max?: number;\n\n /**\n * The min value of the Slider.\n * @default 0\n */\n min?: number;\n\n /**\n * The size of the Slider.\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n\n /**\n * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n * will snap to the closest available value. This must be a positive value.\n * @default 1\n */\n step?: number;\n\n /**\n * The current value of the controlled Slider.\n * Mutually exclusive with `defaultValue` prop.\n */\n value?: number;\n\n /**\n * Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n */\n vertical?: boolean;\n\n /**\n * Triggers a callback when the value has been changed. This will be called on every individual step.\n */\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;\n};\n\nexport type SliderOnChangeData = {\n value: number;\n};\n\nexport type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;\n"]}
package/lib-amd/components/Slider/index.js ADDED
@@ -0,0 +1,14 @@
1
+ define(["require", "exports", "tslib", "./Slider", "./Slider.types", "./renderSlider", "./useSlider", "./useSliderState", "./useSliderStyles"], function (require, exports, tslib_1, Slider_1, Slider_types_1, renderSlider_1, useSlider_1, useSliderState_1, useSliderStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useSliderStyles_unstable = exports.sliderCSSVars = exports.sliderClassNames = exports.useSliderState_unstable = void 0;
5
+ tslib_1.__exportStar(Slider_1, exports);
6
+ tslib_1.__exportStar(Slider_types_1, exports);
7
+ tslib_1.__exportStar(renderSlider_1, exports);
8
+ tslib_1.__exportStar(useSlider_1, exports);
9
+ Object.defineProperty(exports, "useSliderState_unstable", { enumerable: true, get: function () { return useSliderState_1.useSliderState_unstable; } });
10
+ Object.defineProperty(exports, "sliderClassNames", { enumerable: true, get: function () { return useSliderStyles_1.sliderClassNames; } });
11
+ Object.defineProperty(exports, "sliderCSSVars", { enumerable: true, get: function () { return useSliderStyles_1.sliderCSSVars; } });
12
+ Object.defineProperty(exports, "useSliderStyles_unstable", { enumerable: true, get: function () { return useSliderStyles_1.useSliderStyles_unstable; } });
13
+ });
14
+ //# sourceMappingURL=index.js.map
package/lib-amd/components/Slider/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/Slider/index.ts"],"names":[],"mappings":";;;;IAAA,wCAAyB;IACzB,8CAA+B;IAC/B,8CAA+B;IAC/B,2CAA4B;IACnB,yHAAA,uBAAuB,OAAA;IACvB,mHAAA,gBAAgB,OAAA;IAAE,gHAAA,aAAa,OAAA;IAAE,2HAAA,wBAAwB,OAAA","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"]}
package/lib-amd/components/Slider/renderSlider.js ADDED
@@ -0,0 +1,17 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.renderSlider_unstable = void 0;
5
+ /**
6
+ * Render the final JSX of Slider
7
+ */
8
+ var renderSlider_unstable = function (state) {
9
+ var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
10
+ return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
11
+ React.createElement(slots.input, tslib_1.__assign({}, slotProps.input)),
12
+ React.createElement(slots.rail, tslib_1.__assign({}, slotProps.rail)),
13
+ React.createElement(slots.thumb, tslib_1.__assign({}, slotProps.thumb))));
14
+ };
15
+ exports.renderSlider_unstable = renderSlider_unstable;
16
+ });
17
+ //# sourceMappingURL=renderSlider.js.map
package/lib-amd/components/Slider/renderSlider.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"renderSlider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/Slider/renderSlider.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAE1D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACpC,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAClC,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CACzB,CACd,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,qBAAqB,yBAUhC","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"]}
package/lib-amd/components/Slider/useSlider.js ADDED
@@ -0,0 +1,40 @@
1
+ define(["require", "exports", "tslib", "@fluentui/react-utilities", "./useSliderState", "@fluentui/react-tabster"], function (require, exports, tslib_1, react_utilities_1, useSliderState_1, react_tabster_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useSlider_unstable = void 0;
5
+ var useSlider_unstable = function (props, ref) {
6
+ var nativeProps = react_utilities_1.getPartitionedNativeProps({
7
+ props: props,
8
+ primarySlotTagName: 'input',
9
+ excludedPropNames: ['onChange', 'size'],
10
+ });
11
+ var disabled = props.disabled, vertical = props.vertical, _a = props.size, size = _a === void 0 ? 'medium' : _a,
12
+ // Slots
13
+ root = props.root, input = props.input, rail = props.rail, thumb = props.thumb;
14
+ var state = {
15
+ disabled: disabled,
16
+ size: size,
17
+ vertical: vertical,
18
+ components: {
19
+ input: 'input',
20
+ rail: 'div',
21
+ root: 'div',
22
+ thumb: 'div',
23
+ },
24
+ root: react_utilities_1.resolveShorthand(root, {
25
+ required: true,
26
+ defaultProps: tslib_1.__assign({ ref: react_tabster_1.useFocusWithin() }, nativeProps.root),
27
+ }),
28
+ input: react_utilities_1.resolveShorthand(input, {
29
+ required: true,
30
+ defaultProps: tslib_1.__assign(tslib_1.__assign({ id: react_utilities_1.useId('slider-', props.id), ref: ref }, nativeProps.primary), { type: 'range', orient: vertical ? 'vertical' : undefined }),
31
+ }),
32
+ rail: react_utilities_1.resolveShorthand(rail, { required: true }),
33
+ thumb: react_utilities_1.resolveShorthand(thumb, { required: true }),
34
+ };
35
+ useSliderState_1.useSliderState_unstable(state, props);
36
+ return state;
37
+ };
38
+ exports.useSlider_unstable = useSlider_unstable;
39
+ });
40
+ //# sourceMappingURL=useSlider.js.map
package/lib-amd/components/Slider/useSlider.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/Slider/useSlider.ts"],"names":[],"mappings":";;;;IAMO,IAAM,kBAAkB,GAAG,UAAC,KAAkB,EAAE,GAAgC;QACrF,IAAM,WAAW,GAAG,2CAAyB,CAAC;YAC5C,KAAK,OAAA;YACL,kBAAkB,EAAE,OAAO;YAC3B,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;SACxC,CAAC,CAAC;QAGD,IAAA,QAAQ,GAQN,KAAK,SARC,EACR,QAAQ,GAON,KAAK,SAPC,EACR,KAME,KAAK,KANQ,EAAf,IAAI,mBAAG,QAAQ,KAAA;QACf,QAAQ;QACR,IAAI,GAIF,KAAK,KAJH,EACJ,KAAK,GAGH,KAAK,MAHF,EACL,IAAI,GAEF,KAAK,KAFH,EACJ,KAAK,GACH,KAAK,MADF,CACG;QAEV,IAAM,KAAK,GAAgB;YACzB,QAAQ,UAAA;YACR,IAAI,MAAA;YACJ,QAAQ,UAAA;YACR,UAAU,EAAE;gBACV,KAAK,EAAE,OAAO;gBACd,IAAI,EAAE,KAAK;gBACX,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;aACb;YACD,IAAI,EAAE,kCAAgB,CAAC,IAAI,EAAE;gBAC3B,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,GAAG,EAAE,8BAAc,EAAkB,IAClC,WAAW,CAAC,IAAI,CACpB;aACF,CAAC;YACF,KAAK,EAAE,kCAAgB,CAAC,KAAK,EAAE;gBAC7B,QAAQ,EAAE,IAAI;gBACd,YAAY,sCACV,EAAE,EAAE,uBAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,EAC9B,GAAG,KAAA,IACA,WAAW,CAAC,OAAO,KACtB,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,GAC1C;aACF,CAAC;YACF,IAAI,EAAE,kCAAgB,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAChD,KAAK,EAAE,kCAAgB,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;SACnD,CAAC;QAEF,wCAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAEtC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IApDW,QAAA,kBAAkB,sBAoD7B","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';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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 ref: useFocusWithin<HTMLDivElement>(),\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"]}
package/lib-amd/components/Slider/useSliderState.js ADDED
@@ -0,0 +1,45 @@
1
+ define(["require", "exports", "tslib", "@fluentui/react-utilities", "@fluentui/react-shared-contexts", "./useSliderStyles"], function (require, exports, tslib_1, react_utilities_1, react_shared_contexts_1, useSliderStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useSliderState_unstable = void 0;
5
+ var sliderStepsPercentVar = useSliderStyles_1.sliderCSSVars.sliderStepsPercentVar, sliderProgressVar = useSliderStyles_1.sliderCSSVars.sliderProgressVar, sliderDirectionVar = useSliderStyles_1.sliderCSSVars.sliderDirectionVar;
6
+ var getPercent = function (value, min, max) {
7
+ return max === min ? 0 : ((value - min) / (max - min)) * 100;
8
+ };
9
+ var useSliderState_unstable = function (state, props) {
10
+ var _a;
11
+ var _b = props.defaultValue, defaultValue = _b === void 0 ? 0 : _b, _c = props.min, min = _c === void 0 ? 0 : _c, _d = props.max, max = _d === void 0 ? 100 : _d, step = props.step, value = props.value;
12
+ var dir = react_shared_contexts_1.useFluent_unstable().dir;
13
+ var _e = react_utilities_1.useControllableState({
14
+ state: value !== undefined ? react_utilities_1.clamp(value, min, max) : undefined,
15
+ defaultState: react_utilities_1.clamp(defaultValue, min, max),
16
+ initialState: 0,
17
+ }), currentValue = _e[0], setCurrentValue = _e[1];
18
+ var valuePercent = getPercent(currentValue, min, max);
19
+ var inputOnChange = state.input.onChange;
20
+ var propsOnChange = props.onChange;
21
+ var onChange = react_utilities_1.useEventCallback(function (ev) {
22
+ var newValue = Number(ev.target.value);
23
+ setCurrentValue(react_utilities_1.clamp(newValue, min, max));
24
+ if (inputOnChange && inputOnChange !== propsOnChange) {
25
+ inputOnChange(ev);
26
+ }
27
+ else if (propsOnChange) {
28
+ propsOnChange(ev, { value: newValue });
29
+ }
30
+ });
31
+ var rootVariables = (_a = {},
32
+ _a[sliderDirectionVar] = state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
33
+ _a[sliderStepsPercentVar] = step && step > 0 ? (step * 100) / (max - min) + "%" : '',
34
+ _a[sliderProgressVar] = valuePercent + "%",
35
+ _a);
36
+ // Root props
37
+ state.root.style = tslib_1.__assign(tslib_1.__assign({}, rootVariables), state.root.style);
38
+ // Input Props
39
+ state.input.value = currentValue;
40
+ state.input.onChange = onChange;
41
+ return state;
42
+ };
43
+ exports.useSliderState_unstable = useSliderState_unstable;
44
+ });
45
+ //# sourceMappingURL=useSliderState.js.map
package/lib-amd/components/Slider/useSliderState.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSliderState.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/Slider/useSliderState.tsx"],"names":[],"mappings":";;;;IAMQ,IAAA,qBAAqB,GAA4C,+BAAa,sBAAzD,EAAE,iBAAiB,GAAyB,+BAAa,kBAAtC,EAAE,kBAAkB,GAAK,+BAAa,mBAAlB,CAAmB;IAEvF,IAAM,UAAU,GAAG,UAAC,KAAa,EAAE,GAAW,EAAE,GAAW;QACzD,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAC/D,CAAC,CAAC;IAEK,IAAM,uBAAuB,GAAG,UAAC,KAAkB,EAAE,KAAkB;;QACpE,IAAA,KAAsD,KAAK,aAA3C,EAAhB,YAAY,mBAAG,CAAC,KAAA,EAAE,KAAoC,KAAK,IAAlC,EAAP,GAAG,mBAAG,CAAC,KAAA,EAAE,KAA2B,KAAK,IAAvB,EAAT,GAAG,mBAAG,GAAG,KAAA,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAC5D,IAAA,GAAG,GAAK,0CAAS,EAAE,IAAhB,CAAiB;QACtB,IAAA,KAAkC,sCAAoB,CAAC;YAC3D,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,uBAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;YAC/D,YAAY,EAAE,uBAAK,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC;YAC3C,YAAY,EAAE,CAAC;SAChB,CAAC,EAJK,YAAY,QAAA,EAAE,eAAe,QAIlC,CAAC;QACH,IAAM,YAAY,GAAG,UAAU,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAExD,IAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC3C,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC;QAErC,IAAM,QAAQ,GAA+C,kCAAgB,CAAC,UAAA,EAAE;YAC9E,IAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACzC,eAAe,CAAC,uBAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;YAE3C,IAAI,aAAa,IAAI,aAAa,KAAK,aAAa,EAAE;gBACpD,aAAa,CAAC,EAAE,CAAC,CAAC;aACnB;iBAAM,IAAI,aAAa,EAAE;gBACxB,aAAa,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;aACxC;QACH,CAAC,CAAC,CAAC;QAEH,IAAM,aAAa;YACjB,GAAC,kBAAkB,IAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;YAClF,GAAC,qBAAqB,IAAG,IAAI,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,CAAI,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,MAAG,CAAC,CAAC,CAAC,EAAE;YACjF,GAAC,iBAAiB,IAAM,YAAY,MAAG;eACxC,CAAC;QAEF,aAAa;QACb,KAAK,CAAC,IAAI,CAAC,KAAK,yCACX,aAAa,GACb,KAAK,CAAC,IAAI,CAAC,KAAK,CACpB,CAAC;QAEF,cAAc;QACd,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,YAAY,CAAC;QACjC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEhC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAzCW,QAAA,uBAAuB,2BAyClC","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"]}
package/lib-amd/components/Slider/useSliderStyles.js ADDED
@@ -0,0 +1,185 @@
1
+ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabster", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_tabster_1, react_theme_1) {
2
+ "use strict";
3
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
4
+ Object.defineProperty(exports, "__esModule", { value: true });
5
+ exports.useSliderStyles_unstable = exports.sliderCSSVars = exports.sliderClassNames = void 0;
6
+ exports.sliderClassNames = {
7
+ root: 'fui-Slider',
8
+ rail: 'fui-Slider__rail',
9
+ thumb: 'fui-Slider__thumb',
10
+ input: 'fui-Slider__input',
11
+ };
12
+ // Internal CSS variables
13
+ var thumbSizeVar = "--fui-Slider__thumb--size";
14
+ var railSizeVar = "--fui-Slider__rail--size";
15
+ var railColorVar = "--fui-Slider__rail--color";
16
+ var progressColorVar = "--fui-Slider__progress--color";
17
+ var thumbColorVar = "--fui-Slider__thumb--color";
18
+ exports.sliderCSSVars = {
19
+ sliderDirectionVar: "--fui-Slider--direction",
20
+ sliderProgressVar: "--fui-Slider--progress",
21
+ sliderStepsPercentVar: "--fui-Slider--steps-percent",
22
+ };
23
+ var sliderDirectionVar = exports.sliderCSSVars.sliderDirectionVar, sliderStepsPercentVar = exports.sliderCSSVars.sliderStepsPercentVar, sliderProgressVar = exports.sliderCSSVars.sliderProgressVar;
24
+ /**
25
+ * Styles for the root slot
26
+ */
27
+ var useRootStyles = react_1.makeStyles({
28
+ root: {
29
+ position: 'relative',
30
+ display: 'inline-grid',
31
+ touchAction: 'none',
32
+ alignItems: 'center',
33
+ justifyItems: 'center',
34
+ },
35
+ small: (_a = {},
36
+ _a[thumbSizeVar] = '16px',
37
+ _a[railSizeVar] = '2px',
38
+ _a.minHeight = '24px',
39
+ _a),
40
+ medium: (_b = {},
41
+ _b[thumbSizeVar] = '20px',
42
+ _b[railSizeVar] = '4px',
43
+ _b.minHeight = '32px',
44
+ _b),
45
+ horizontal: {
46
+ minWidth: '120px',
47
+ // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
48
+ gridTemplateRows: "1fr var(" + thumbSizeVar + ") 1fr",
49
+ gridTemplateColumns: "1fr calc(100% - var(" + thumbSizeVar + ")) 1fr",
50
+ },
51
+ vertical: {
52
+ minHeight: '120px',
53
+ // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
54
+ gridTemplateRows: "1fr calc(100% - var(" + thumbSizeVar + ")) 1fr",
55
+ gridTemplateColumns: "1fr var(" + thumbSizeVar + ") 1fr",
56
+ },
57
+ enabled: (_c = {},
58
+ _c[railColorVar] = react_theme_1.tokens.colorNeutralStrokeAccessible,
59
+ _c[progressColorVar] = react_theme_1.tokens.colorCompoundBrandBackground,
60
+ _c[thumbColorVar] = react_theme_1.tokens.colorCompoundBrandBackground,
61
+ _c[':hover'] = (_d = {},
62
+ _d[thumbColorVar] = react_theme_1.tokens.colorCompoundBrandBackgroundHover,
63
+ _d[progressColorVar] = react_theme_1.tokens.colorCompoundBrandBackgroundHover,
64
+ _d),
65
+ _c[':active'] = (_e = {},
66
+ _e[thumbColorVar] = react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
67
+ _e[progressColorVar] = react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
68
+ _e),
69
+ _c['@media (forced-colors: active)'] = (_f = {},
70
+ _f[railColorVar] = 'CanvasText',
71
+ _f[thumbColorVar] = 'Highlight',
72
+ _f[progressColorVar] = 'Highlight',
73
+ _f[':hover'] = (_g = {},
74
+ _g[thumbColorVar] = 'Highlight',
75
+ _g[progressColorVar] = 'Highlight',
76
+ _g),
77
+ _f),
78
+ _c),
79
+ disabled: (_h = {},
80
+ _h[thumbColorVar] = react_theme_1.tokens.colorNeutralForegroundDisabled,
81
+ _h[railColorVar] = react_theme_1.tokens.colorNeutralBackgroundDisabled,
82
+ _h[progressColorVar] = react_theme_1.tokens.colorNeutralForegroundDisabled,
83
+ _h['@media (forced-colors: active)'] = (_j = {},
84
+ _j[railColorVar] = 'GrayText',
85
+ _j[thumbColorVar] = 'GrayText',
86
+ _j[progressColorVar] = 'GrayText',
87
+ _j),
88
+ _h),
89
+ focusIndicatorHorizontal: react_tabster_1.createFocusOutlineStyle({
90
+ selector: 'focus-within',
91
+ style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },
92
+ }),
93
+ focusIndicatorVertical: react_tabster_1.createFocusOutlineStyle({
94
+ selector: 'focus-within',
95
+ style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },
96
+ }),
97
+ });
98
+ /**
99
+ * Styles for the rail slot
100
+ */
101
+ var useRailStyles = react_1.makeStyles({
102
+ rail: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusXLarge)), { pointerEvents: 'none', gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2', gridColumnEnd: '2', position: 'relative', forcedColorAdjust: 'none',
103
+ // Background gradient represents the progress of the slider
104
+ backgroundImage: "linear-gradient(\n var(" + sliderDirectionVar + "),\n var(" + progressColorVar + ") 0%,\n var(" + progressColorVar + ") var(" + sliderProgressVar + "),\n var(" + railColorVar + ") var(" + sliderProgressVar + ")\n )", outlineWidth: '1px', outlineStyle: 'solid', outlineColor: react_theme_1.tokens.colorTransparentStroke, '::before': {
105
+ content: "''",
106
+ position: 'absolute',
107
+ // Repeating gradient represents the steps if provided
108
+ backgroundImage: "repeating-linear-gradient(\n var(" + sliderDirectionVar + "),\n #0000 0%,\n #0000 calc(var(" + sliderStepsPercentVar + ") - 1px),\n " + react_theme_1.tokens.colorNeutralBackground1 + " calc(var(" + sliderStepsPercentVar + ") - 1px),\n " + react_theme_1.tokens.colorNeutralBackground1 + " var(" + sliderStepsPercentVar + ")\n )",
109
+ // force steps to use HighlightText for high contrast mode
110
+ '@media (forced-colors: active)': {
111
+ 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 )",
112
+ },
113
+ } }),
114
+ horizontal: {
115
+ width: '100%',
116
+ height: "var(" + railSizeVar + ")",
117
+ '::before': {
118
+ left: '-1px',
119
+ right: '-1px',
120
+ height: "var(" + railSizeVar + ")",
121
+ },
122
+ },
123
+ vertical: {
124
+ width: "var(" + railSizeVar + ")",
125
+ height: '100%',
126
+ '::before': {
127
+ width: "var(" + railSizeVar + ")",
128
+ top: '-1px',
129
+ bottom: '1px',
130
+ },
131
+ },
132
+ });
133
+ /**
134
+ * Styles for the thumb slot
135
+ */
136
+ var useThumbStyles = react_1.makeStyles({
137
+ thumb: tslib_1.__assign(tslib_1.__assign({ gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2', gridColumnEnd: '2', position: 'absolute', width: "var(" + thumbSizeVar + ")", height: "var(" + thumbSizeVar + ")", pointerEvents: 'none', outlineStyle: 'none', forcedColorAdjust: 'none' }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { boxShadow: "0 0 0 calc(var(" + thumbSizeVar + ") * .2) " + react_theme_1.tokens.colorNeutralBackground1 + " inset", backgroundColor: "var(" + thumbColorVar + ")", '::before': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ position: 'absolute', top: '0px', left: '0px', bottom: '0px', right: '0px' }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { boxSizing: 'border-box', content: "''" }), react_1.shorthands.border("calc(var(" + thumbSizeVar + ") * .05)", 'solid', react_theme_1.tokens.colorNeutralStroke1)) }),
138
+ disabled: {
139
+ '::before': tslib_1.__assign({}, react_1.shorthands.border("calc(var(" + thumbSizeVar + ") * .05)", 'solid', react_theme_1.tokens.colorNeutralForegroundDisabled)),
140
+ },
141
+ horizontal: {
142
+ transform: 'translateX(-50%)',
143
+ left: "var(" + sliderProgressVar + ")",
144
+ },
145
+ vertical: {
146
+ transform: 'translateY(50%)',
147
+ bottom: "var(" + sliderProgressVar + ")",
148
+ },
149
+ });
150
+ /**
151
+ * Styles for the Input slot
152
+ */
153
+ var useInputStyles = react_1.makeStyles({
154
+ input: tslib_1.__assign(tslib_1.__assign({ cursor: 'pointer', opacity: 0, gridRowStart: '1', gridRowEnd: '-1', gridColumnStart: '1', gridColumnEnd: '-1' }, react_1.shorthands.padding(0)), react_1.shorthands.margin(0)),
155
+ disabled: {
156
+ cursor: 'default',
157
+ },
158
+ horizontal: {
159
+ height: "var(" + thumbSizeVar + ")",
160
+ width: '100%',
161
+ },
162
+ vertical: {
163
+ height: '100%',
164
+ width: "var(" + thumbSizeVar + ")",
165
+ '-webkit-appearance': 'slider-vertical',
166
+ },
167
+ });
168
+ /**
169
+ * Apply styling to the Slider slots based on the state
170
+ */
171
+ var useSliderStyles_unstable = function (state) {
172
+ var rootStyles = useRootStyles();
173
+ var railStyles = useRailStyles();
174
+ var thumbStyles = useThumbStyles();
175
+ var inputStyles = useInputStyles();
176
+ var isVertical = state.vertical;
177
+ state.root.className = react_1.mergeClasses(exports.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);
178
+ state.rail.className = react_1.mergeClasses(exports.sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
179
+ state.thumb.className = react_1.mergeClasses(exports.sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
180
+ state.input.className = react_1.mergeClasses(exports.sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
181
+ return state;
182
+ };
183
+ exports.useSliderStyles_unstable = useSliderStyles_unstable;
184
+ });
185
+ //# sourceMappingURL=useSliderStyles.js.map
package/lib-amd/components/Slider/useSliderStyles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSliderStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/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 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 // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`,\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: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\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 gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\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 '::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 transform: 'translateX(-50%)',\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 cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\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.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"]}
package/lib-amd/components/SliderField/SliderField.js ADDED
@@ -0,0 +1,13 @@
1
+ define(["require", "exports", "react", "@fluentui/react-field", "../../Slider"], function (require, exports, React, react_field_1, Slider_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.SliderField = exports.sliderFieldClassNames = void 0;
5
+ exports.sliderFieldClassNames = react_field_1.getFieldClassNames('SliderField');
6
+ exports.SliderField = React.forwardRef(function (props, ref) {
7
+ var state = react_field_1.useField_unstable(props, ref, { component: Slider_1.Slider, classNames: exports.sliderFieldClassNames });
8
+ react_field_1.useFieldStyles_unstable(state);
9
+ return react_field_1.renderField_unstable(state);
10
+ });
11
+ exports.SliderField.displayName = 'SliderField';
12
+ });
13
+ //# sourceMappingURL=SliderField.js.map
package/lib-amd/components/SliderField/SliderField.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SliderField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/SliderField/SliderField.tsx"],"names":[],"mappings":";;;;IAaa,QAAA,qBAAqB,GAAG,gCAAkB,CAAC,aAAa,CAAC,CAAC;IAE1D,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,+BAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,eAAM,EAAE,UAAU,EAAE,6BAAqB,EAAE,CAAC,CAAC;QACtG,qCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Slider } from '../../Slider';\n\nexport type SliderFieldProps = FieldProps<typeof Slider>;\n\nexport const sliderFieldClassNames = getFieldClassNames('SliderField');\n\nexport const SliderField: ForwardRefComponent<SliderFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Slider, classNames: sliderFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSliderField.displayName = 'SliderField';\n"]}
package/lib-amd/components/SliderField/index.js ADDED
@@ -0,0 +1,6 @@
1
+ define(["require", "exports", "tslib", "./SliderField"], function (require, exports, tslib_1, SliderField_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(SliderField_1, exports);
5
+ });
6
+ //# sourceMappingURL=index.js.map
package/lib-amd/components/SliderField/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/SliderField/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B","sourcesContent":["export * from './SliderField';\n"]}
package/lib-amd/index.js ADDED
@@ -0,0 +1,15 @@
1
+ define(["require", "exports", "./Slider", "./SliderField"], function (require, exports, Slider_1, SliderField_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.sliderFieldClassNames = exports.SliderField_unstable = exports.useSlider_unstable = exports.useSliderStyles_unstable = exports.useSliderState_unstable = exports.sliderCSSVars = exports.sliderClassNames = exports.renderSlider_unstable = exports.Slider = void 0;
5
+ Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
6
+ Object.defineProperty(exports, "renderSlider_unstable", { enumerable: true, get: function () { return Slider_1.renderSlider_unstable; } });
7
+ Object.defineProperty(exports, "sliderClassNames", { enumerable: true, get: function () { return Slider_1.sliderClassNames; } });
8
+ Object.defineProperty(exports, "sliderCSSVars", { enumerable: true, get: function () { return Slider_1.sliderCSSVars; } });
9
+ Object.defineProperty(exports, "useSliderState_unstable", { enumerable: true, get: function () { return Slider_1.useSliderState_unstable; } });
10
+ Object.defineProperty(exports, "useSliderStyles_unstable", { enumerable: true, get: function () { return Slider_1.useSliderStyles_unstable; } });
11
+ Object.defineProperty(exports, "useSlider_unstable", { enumerable: true, get: function () { return Slider_1.useSlider_unstable; } });
12
+ Object.defineProperty(exports, "SliderField_unstable", { enumerable: true, get: function () { return SliderField_1.SliderField; } });
13
+ Object.defineProperty(exports, "sliderFieldClassNames", { enumerable: true, get: function () { return SliderField_1.sliderFieldClassNames; } });
14
+ });
15
+ //# sourceMappingURL=index.js.map
package/lib-amd/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-slider/src/index.ts"],"names":[],"mappings":";;;;IACE,gGAAA,MAAM,OAAA;IACN,+GAAA,qBAAqB,OAAA;IACrB,0GAAA,gBAAgB,OAAA;IAChB,uGAAA,aAAa,OAAA;IACb,iHAAA,uBAAuB,OAAA;IACvB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAIX,mHAAA,WAAW,OAAwB;IAAE,oHAAA,qBAAqB,OAAA","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\nexport { SliderField as SliderField_unstable, sliderFieldClassNames } from './SliderField';\nexport type { SliderFieldProps as SliderFieldProps_unstable } from './SliderField';\n"]}
package/lib-commonjs/components/Slider/useSliderStyles.js CHANGED
@@ -90,69 +90,69 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
90
90
  "focusIndicatorHorizontal": {
91
91
  "Brovlpu": "ftqa4ok",
92
92
  "B486eqv": "f2hkw1w",
93
- "n9p9qa": "f1fu8s9w",
94
- "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
95
- "r10ruj": "f1c1apvh",
96
- "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
97
- "gjlbkn": "fyrlc8h",
98
- "B1kt0iq": "f28z38y",
99
- "Boi8ppg": "f1edqc4x",
100
- "Btfhvw2": "f19bnj08",
101
- "B55xfkk": "f17wg1r9",
102
- "i1dkbe": ["fgiioun", "fnx45sh"],
103
- "Bozs2tv": "f1ljqnps",
104
- "snkem8": ["fnx45sh", "fgiioun"],
105
- "Bjilewg": "fsacsau",
106
- "wht04d": ["flcxmxr", "f138axrn"],
107
- "vikdft": "f1f4bc3q",
108
- "Bwdhxlo": ["f138axrn", "flcxmxr"],
109
- "B167d6d": ["f5m7f7q", "f175edhc"],
110
- "Bpdw69r": ["f175edhc", "f5m7f7q"],
111
- "Bsdv7io": ["fhfahiz", "fnreirl"],
112
- "Bd353ur": ["fnreirl", "fhfahiz"],
113
- "Bcnuwmc": "fn9i64i",
114
- "dyfsa2": ["f1pylbqb", "f3dy9ja"],
115
- "Bdcx1rh": "f1v06qdr",
116
- "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
117
- "Bbretkc": "flkas93",
118
- "rnyfg7": "fq5e9oh",
119
- "Bg18gms": ["fgohmdn", "fjs6mrq"],
120
- "Bym00rn": ["fjs6mrq", "fgohmdn"]
93
+ "Bssx7fj": "f1b1k54r",
94
+ "uh7if5": ["f4ne723", "fqqcjud"],
95
+ "clntm0": "fh7aioi",
96
+ "Dlk2r6": ["fqqcjud", "f4ne723"],
97
+ "B2j2mmj": "ffht0p2",
98
+ "wigs8": "f1p0ul1q",
99
+ "pbfy6t": "f1c901ms",
100
+ "B0v4ure": "f1alokd7",
101
+ "ghq09": "f78i1la",
102
+ "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
103
+ "Bwckmig": "f8k7e5g",
104
+ "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
105
+ "Bbgo44z": "f1pmxfrl",
106
+ "Bil7v7r": ["fszkfcr", "f1ap5ily"],
107
+ "skfxo0": "f57dp0y",
108
+ "jo1ztg": ["f1ap5ily", "fszkfcr"],
109
+ "Ba3ybja": ["f11dm2qb", "f136rfnd"],
110
+ "az1dzo": ["f136rfnd", "f11dm2qb"],
111
+ "vppk2z": ["fdsq1qd", "f1khssms"],
112
+ "B6352mv": ["f1khssms", "fdsq1qd"],
113
+ "nr063g": "fq4eyks",
114
+ "Blmvk6g": ["f1ya6x16", "ftuszwa"],
115
+ "Bsiemmq": "f1e2iu44",
116
+ "B98u21t": ["ftuszwa", "f1ya6x16"],
117
+ "B2pnrqr": "f1pffoy2",
118
+ "Bhhzhcn": "fs6b7xr",
119
+ "Bec0n69": ["f15fv2gd", "f1bmyog6"],
120
+ "B29w5g4": ["f1bmyog6", "f15fv2gd"]
121
121
  },
122
122
  "focusIndicatorVertical": {
123
123
  "Brovlpu": "ftqa4ok",
124
124
  "B486eqv": "f2hkw1w",
125
- "n9p9qa": "f1fu8s9w",
126
- "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
127
- "r10ruj": "f1c1apvh",
128
- "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
129
- "gjlbkn": "fyrlc8h",
130
- "B1kt0iq": "f28z38y",
131
- "Boi8ppg": "f1edqc4x",
132
- "Btfhvw2": "f19bnj08",
133
- "B55xfkk": "f17wg1r9",
134
- "i1dkbe": ["fgiioun", "fnx45sh"],
135
- "Bozs2tv": "f1ljqnps",
136
- "snkem8": ["fnx45sh", "fgiioun"],
137
- "Bjilewg": "fsacsau",
138
- "wht04d": ["flcxmxr", "f138axrn"],
139
- "vikdft": "f1f4bc3q",
140
- "Bwdhxlo": ["f138axrn", "flcxmxr"],
141
- "B167d6d": ["f5m7f7q", "f175edhc"],
142
- "Bpdw69r": ["f175edhc", "f5m7f7q"],
143
- "Bsdv7io": ["fhfahiz", "fnreirl"],
144
- "Bd353ur": ["fnreirl", "fhfahiz"],
145
- "Bcnuwmc": "fn9i64i",
146
- "dyfsa2": ["f1pylbqb", "f3dy9ja"],
147
- "Bdcx1rh": "f1v06qdr",
148
- "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
149
- "Bbretkc": "f15meo09",
150
- "rnyfg7": "f11wb2ck",
151
- "Bg18gms": ["f16x7czw", "fo3e1s0"],
152
- "Bym00rn": ["fo3e1s0", "f16x7czw"]
125
+ "Bssx7fj": "f1b1k54r",
126
+ "uh7if5": ["f4ne723", "fqqcjud"],
127
+ "clntm0": "fh7aioi",
128
+ "Dlk2r6": ["fqqcjud", "f4ne723"],
129
+ "B2j2mmj": "ffht0p2",
130
+ "wigs8": "f1p0ul1q",
131
+ "pbfy6t": "f1c901ms",
132
+ "B0v4ure": "f1alokd7",
133
+ "ghq09": "f78i1la",
134
+ "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
135
+ "Bwckmig": "f8k7e5g",
136
+ "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
137
+ "Bbgo44z": "f1pmxfrl",
138
+ "Bil7v7r": ["fszkfcr", "f1ap5ily"],
139
+ "skfxo0": "f57dp0y",
140
+ "jo1ztg": ["f1ap5ily", "fszkfcr"],
141
+ "Ba3ybja": ["f11dm2qb", "f136rfnd"],
142
+ "az1dzo": ["f136rfnd", "f11dm2qb"],
143
+ "vppk2z": ["fdsq1qd", "f1khssms"],
144
+ "B6352mv": ["f1khssms", "fdsq1qd"],
145
+ "nr063g": "fq4eyks",
146
+ "Blmvk6g": ["f1ya6x16", "ftuszwa"],
147
+ "Bsiemmq": "f1e2iu44",
148
+ "B98u21t": ["ftuszwa", "f1ya6x16"],
149
+ "B2pnrqr": "f1hxpdv8",
150
+ "Bhhzhcn": "f1dmxpeg",
151
+ "Bec0n69": ["femsgmt", "fm5xmfm"],
152
+ "B29w5g4": ["fm5xmfm", "femsgmt"]
153
153
  }
154
154
  }, {
155
- "d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".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;}", ".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f4t5rw1{grid-template-columns:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".f1pzv1zu{min-height:120px;}", ".fktlcaf{grid-template-rows:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}", ".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);}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".flkas93[data-fui-focus-visible]:focus-within::after{top:calc(0px - 2px - -2px);}", ".fq5e9oh[data-fui-focus-visible]:focus-within::after{bottom:calc(0px - 2px - -2px);}", ".fgohmdn[data-fui-focus-visible]:focus-within::after{left:calc(0px - 2px - 8px);}", ".fjs6mrq[data-fui-focus-visible]:focus-within::after{right:calc(0px - 2px - 8px);}", ".f15meo09[data-fui-focus-visible]:focus-within::after{top:calc(0px - 2px - 6px);}", ".f11wb2ck[data-fui-focus-visible]:focus-within::after{bottom:calc(0px - 2px - 6px);}", ".f16x7czw[data-fui-focus-visible]:focus-within::after{left:calc(0px - 2px - 4px);}", ".fo3e1s0[data-fui-focus-visible]:focus-within::after{right:calc(0px - 2px - 4px);}"],
155
+ "d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".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;}", ".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f4t5rw1{grid-template-columns:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".f1pzv1zu{min-height:120px;}", ".fktlcaf{grid-template-rows:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}", ".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);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1pffoy2[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - -2px);}", ".fs6b7xr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 2px - -2px);}", ".f15fv2gd[data-fui-focus-within]:focus-within::after{left:calc(0px - 2px - 8px);}", ".f1bmyog6[data-fui-focus-within]:focus-within::after{right:calc(0px - 2px - 8px);}", ".f1hxpdv8[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - 6px);}", ".f1dmxpeg[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 2px - 6px);}", ".femsgmt[data-fui-focus-within]:focus-within::after{left:calc(0px - 2px - 4px);}", ".fm5xmfm[data-fui-focus-within]:focus-within::after{right:calc(0px - 2px - 4px);}"],
156
156
  "h": [".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}", ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"],
157
157
  "a": [".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}", ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"],
158
158
  "m": [["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-slider",
3
- "version": "9.0.10",
3
+ "version": "9.0.12",
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
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
30
  "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
31
- "@fluentui/react-label": "^9.0.10",
31
+ "@fluentui/react-label": "^9.0.12",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@griffel/react": "^1.4.2",
36
- "@fluentui/react-field": "9.0.0-alpha.8",
37
- "@fluentui/react-shared-contexts": "^9.1.1",
38
- "@fluentui/react-tabster": "^9.3.0",
39
- "@fluentui/react-theme": "^9.1.2",
40
- "@fluentui/react-utilities": "^9.2.1",
36
+ "@fluentui/react-field": "9.0.0-alpha.10",
37
+ "@fluentui/react-shared-contexts": "^9.1.2",
38
+ "@fluentui/react-tabster": "^9.3.2",
39
+ "@fluentui/react-theme": "^9.1.3",
40
+ "@fluentui/react-utilities": "^9.2.2",
41
41
  "tslib": "^2.1.0"
42
42
  },
43
43
  "peerDependencies": {