@fluentui/react-slider 9.0.0-beta.15 → 9.0.0-beta.18

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 (23) hide show
  1. package/CHANGELOG.json +132 -1
  2. package/CHANGELOG.md +42 -2
  3. package/MIGRATION.md +1 -0
  4. package/Spec.md +1 -0
  5. package/dist/index.d.ts +6 -5
  6. package/lib/components/Slider/Slider.types.js.map +1 -1
  7. package/lib/components/Slider/index.js +1 -1
  8. package/lib/components/Slider/index.js.map +1 -1
  9. package/lib/components/Slider/useSliderState.js +7 -16
  10. package/lib/components/Slider/useSliderState.js.map +1 -1
  11. package/lib/components/Slider/useSliderStyles.js +17 -19
  12. package/lib/components/Slider/useSliderStyles.js.map +1 -1
  13. package/lib/index.js +1 -1
  14. package/lib/index.js.map +1 -1
  15. package/lib-commonjs/components/Slider/index.js +7 -1
  16. package/lib-commonjs/components/Slider/index.js.map +1 -1
  17. package/lib-commonjs/components/Slider/useSliderState.js +7 -17
  18. package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
  19. package/lib-commonjs/components/Slider/useSliderStyles.js +17 -19
  20. package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
  21. package/lib-commonjs/index.js +7 -1
  22. package/lib-commonjs/index.js.map +1 -1
  23. package/package.json +8 -8
package/CHANGELOG.json CHANGED
@@ -2,7 +2,138 @@
2
2
  "name": "@fluentui/react-slider",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 23 May 2022 12:10:04 GMT",
5
+ "date": "Tue, 31 May 2022 21:26:40 GMT",
6
+ "tag": "@fluentui/react-slider_v9.0.0-beta.18",
7
+ "version": "9.0.0-beta.18",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "olfedias@microsoft.com",
12
+ "package": "@fluentui/react-slider",
13
+ "commit": "287cf6769bda0ca0ec7cd29b01a4a4481a488d92",
14
+ "comment": "updates to docs"
15
+ }
16
+ ],
17
+ "prerelease": [
18
+ {
19
+ "author": "olfedias@microsoft.com",
20
+ "package": "@fluentui/react-slider",
21
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
22
+ "comment": "chore: Update Griffel to latest version"
23
+ },
24
+ {
25
+ "author": "bernardo.sunderhus@gmail.com",
26
+ "package": "@fluentui/react-slider",
27
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
28
+ "comment": "updates import to react-shared-components"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-slider",
33
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
34
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui/react-slider",
39
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.13",
40
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
41
+ },
42
+ {
43
+ "author": "beachball",
44
+ "package": "@fluentui/react-slider",
45
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
46
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
47
+ },
48
+ {
49
+ "author": "beachball",
50
+ "package": "@fluentui/react-slider",
51
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
52
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
53
+ },
54
+ {
55
+ "author": "beachball",
56
+ "package": "@fluentui/react-slider",
57
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.5",
58
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
59
+ }
60
+ ]
61
+ }
62
+ },
63
+ {
64
+ "date": "Thu, 26 May 2022 21:01:28 GMT",
65
+ "tag": "@fluentui/react-slider_v9.0.0-beta.17",
66
+ "version": "9.0.0-beta.17",
67
+ "comments": {
68
+ "prerelease": [
69
+ {
70
+ "author": "mgodbolt@microsoft.com",
71
+ "package": "@fluentui/react-slider",
72
+ "commit": "c17653d2a37e0bbe0fd84298221db3738cb43a23",
73
+ "comment": "new high contrast styles for slider steps"
74
+ },
75
+ {
76
+ "author": "mgodbolt@microsoft.com",
77
+ "package": "@fluentui/react-slider",
78
+ "commit": "5c6366a3d97cdc612535c299f8dd27bf79c4c842",
79
+ "comment": "BREAKING: Remove slider origin to align with design and avoid inaccessible design"
80
+ },
81
+ {
82
+ "author": "beachball",
83
+ "package": "@fluentui/react-slider",
84
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.12",
85
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
86
+ },
87
+ {
88
+ "author": "beachball",
89
+ "package": "@fluentui/react-slider",
90
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.4",
91
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
92
+ }
93
+ ]
94
+ }
95
+ },
96
+ {
97
+ "date": "Mon, 23 May 2022 18:56:51 GMT",
98
+ "tag": "@fluentui/react-slider_v9.0.0-beta.16",
99
+ "version": "9.0.0-beta.16",
100
+ "comments": {
101
+ "prerelease": [
102
+ {
103
+ "author": "beachball",
104
+ "package": "@fluentui/react-slider",
105
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
106
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
107
+ },
108
+ {
109
+ "author": "beachball",
110
+ "package": "@fluentui/react-slider",
111
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
112
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
113
+ },
114
+ {
115
+ "author": "beachball",
116
+ "package": "@fluentui/react-slider",
117
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
118
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
119
+ },
120
+ {
121
+ "author": "beachball",
122
+ "package": "@fluentui/react-slider",
123
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
124
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
125
+ },
126
+ {
127
+ "author": "beachball",
128
+ "package": "@fluentui/react-slider",
129
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.3",
130
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
131
+ }
132
+ ]
133
+ }
134
+ },
135
+ {
136
+ "date": "Mon, 23 May 2022 12:13:38 GMT",
6
137
  "tag": "@fluentui/react-slider_v9.0.0-beta.15",
7
138
  "version": "9.0.0-beta.15",
8
139
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,52 @@
1
1
  # Change Log - @fluentui/react-slider
2
2
 
3
- This log was last generated on Mon, 23 May 2022 12:10:04 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 31 May 2022 21:26:40 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.18)
8
+
9
+ Tue, 31 May 2022 21:26:40 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.17..@fluentui/react-slider_v9.0.0-beta.18)
11
+
12
+ ### Changes
13
+
14
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
15
+ - updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
16
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
17
+ - Bump @fluentui/react-tabster to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
20
+ - Bump @fluentui/react-label to v9.0.0-rc.5 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
21
+
22
+ ## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.17)
23
+
24
+ Thu, 26 May 2022 21:01:28 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.16..@fluentui/react-slider_v9.0.0-beta.17)
26
+
27
+ ### Changes
28
+
29
+ - new high contrast styles for slider steps ([PR #23253](https://github.com/microsoft/fluentui/pull/23253) by mgodbolt@microsoft.com)
30
+ - BREAKING: Remove slider origin to align with design and avoid inaccessible design ([PR #23257](https://github.com/microsoft/fluentui/pull/23257) by mgodbolt@microsoft.com)
31
+ - Bump @fluentui/react-tabster to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
32
+ - Bump @fluentui/react-label to v9.0.0-rc.4 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
33
+
34
+ ## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.16)
35
+
36
+ Mon, 23 May 2022 18:56:51 GMT
37
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.15..@fluentui/react-slider_v9.0.0-beta.16)
38
+
39
+ ### Changes
40
+
41
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
42
+ - Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
43
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
44
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
45
+ - Bump @fluentui/react-label to v9.0.0-rc.3 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
46
+
7
47
  ## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.15)
8
48
 
9
- Mon, 23 May 2022 12:10:04 GMT
49
+ Mon, 23 May 2022 12:13:38 GMT
10
50
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.14..@fluentui/react-slider_v9.0.0-beta.15)
11
51
 
12
52
  ### Changes
package/MIGRATION.md CHANGED
@@ -12,6 +12,7 @@ The Slider control is a thin wrapper around an `<input type="range"/>`. Addition
12
12
  - `showValue` and `valueFormat` => use explicitly rendered value instead
13
13
  - `onChanged` => use onChange and onMouse events
14
14
  - `ranged`, `defaultLowerValue` and `lowerValue` => Not supported. Multi value slider will be future work in separate control.
15
+ - `origin` => no longer supported
15
16
  - `snapToStep` => use `step` instead
16
17
  - `originFromZero` => `origin`
17
18
  - `buttonProps` => Slider props, other than className and id, are passed to `input` element
package/Spec.md CHANGED
@@ -79,3 +79,4 @@ https://open-ui.org/components/slider.research
79
79
 
80
80
  - built in marks
81
81
  - dual thumb 'ranged' slider
82
+ - origin
package/dist/index.d.ts CHANGED
@@ -17,6 +17,12 @@ export declare const Slider: ForwardRefComponent<SliderProps>;
17
17
 
18
18
  export declare const sliderClassNames: SlotClassNames<SliderSlots>;
19
19
 
20
+ export declare const sliderCSSVars: {
21
+ sliderDirectionVar: string;
22
+ sliderProgressVar: string;
23
+ sliderStepsPercentVar: string;
24
+ };
25
+
20
26
  export declare type SliderOnChangeData = {
21
27
  value: number;
22
28
  };
@@ -43,11 +49,6 @@ export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'inp
43
49
  * @default 0
44
50
  */
45
51
  min?: number;
46
- /**
47
- * The starting origin point for the Slider.
48
- * @default min
49
- */
50
- origin?: number;
51
52
  /**
52
53
  * The size of the Slider.
53
54
  * @default 'medium'
package/lib/components/Slider/Slider.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.types.js","sourceRoot":"../src/","sources":["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 starting origin point for the Slider.\n * @default min\n */\n origin?: 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"]}
1
+ {"version":3,"file":"Slider.types.js","sourceRoot":"../src/","sources":["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/components/Slider/index.js CHANGED
@@ -3,5 +3,5 @@ export * from './Slider.types';
3
3
  export * from './renderSlider';
4
4
  export * from './useSlider';
5
5
  export { useSliderState_unstable } from './useSliderState';
6
- export { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';
6
+ export { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles';
7
7
  //# sourceMappingURL=index.js.map
package/lib/components/Slider/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC","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/components/Slider/useSliderState.js CHANGED
@@ -1,13 +1,10 @@
1
- import * as React from 'react';
2
1
  import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
3
- import { useFluent } from '@fluentui/react-shared-contexts';
2
+ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
4
3
  import { sliderCSSVars } from './useSliderStyles';
5
4
  const {
6
- railOffsetVar,
7
- railStepsPercentVar,
8
- railProgressVar,
9
- thumbPositionVar,
10
- railDirectionVar
5
+ sliderStepsPercentVar,
6
+ sliderProgressVar,
7
+ sliderDirectionVar
11
8
  } = sliderCSSVars;
12
9
 
13
10
  const getPercent = (value, min, max) => {
@@ -20,7 +17,6 @@ export const useSliderState_unstable = (state, props) => {
20
17
  min = 0,
21
18
  max = 100,
22
19
  step,
23
- origin,
24
20
  value
25
21
  } = props;
26
22
  const {
@@ -32,9 +28,6 @@ export const useSliderState_unstable = (state, props) => {
32
28
  initialState: 0
33
29
  });
34
30
  const valuePercent = getPercent(currentValue, min, max);
35
- const originPercent = React.useMemo(() => {
36
- return origin !== undefined ? getPercent(origin, min, max) : 0;
37
- }, [max, min, origin]);
38
31
  const inputOnChange = state.input.onChange;
39
32
  const propsOnChange = props.onChange;
40
33
  const onChange = useEventCallback(ev => {
@@ -50,11 +43,9 @@ export const useSliderState_unstable = (state, props) => {
50
43
  }
51
44
  });
52
45
  const rootVariables = {
53
- [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
54
- [thumbPositionVar]: valuePercent + '%',
55
- [railStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
56
- [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
57
- [railProgressVar]: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`
46
+ [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
47
+ [sliderStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
48
+ [sliderProgressVar]: `${valuePercent}%`
58
49
  }; // Root props
59
50
 
60
51
  state.root.style = { ...rootVariables,
package/lib/components/Slider/useSliderState.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar, railDirectionVar } = 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, origin, 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 const originPercent = React.useMemo(() => {\n return origin !== undefined ? getPercent(origin, min, max) : 0;\n }, [max, min, origin]);\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 [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [thumbPositionVar]: valuePercent + '%',\n [railStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',\n [railProgressVar]:\n origin !== undefined\n ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n : `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"AACA,SAAS,KAAT,EAAgB,oBAAhB,EAAsC,gBAAtC,QAA8D,2BAA9D;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAGA,MAAM;AAAE,EAAA,qBAAF;AAAyB,EAAA,iBAAzB;AAA4C,EAAA;AAA5C,IAAmE,aAAzE;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;AAC7D,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIA,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAqB,KAArB,KAA2C;AAChF,QAAM;AAAE,IAAA,YAAY,GAAG,CAAjB;AAAoB,IAAA,GAAG,GAAG,CAA1B;AAA6B,IAAA,GAAG,GAAG,GAAnC;AAAwC,IAAA,IAAxC;AAA8C,IAAA;AAA9C,MAAwD,KAA9D;AACA,QAAM;AAAE,IAAA;AAAF,MAAU,SAAS,EAAzB;AACA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,KAAK,KAAK,SAAV,GAAsB,KAAK,CAAC,KAAD,EAAQ,GAAR,EAAa,GAAb,CAA3B,GAA+C,SADK;AAE3D,IAAA,YAAY,EAAE,KAAK,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAFwC;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAKA,QAAM,YAAY,GAAG,UAAU,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAA/B;AAEA,QAAM,aAAa,GAAG,KAAK,CAAC,KAAN,CAAY,QAAlC;AACA,QAAM,aAAa,GAAG,KAAK,CAAC,QAA5B;AAEA,QAAM,QAAQ,GAA+C,gBAAgB,CAAC,EAAE,IAAG;AACjF,UAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAvB;AACA,IAAA,eAAe,CAAC,KAAK,CAAC,QAAD,EAAW,GAAX,EAAgB,GAAhB,CAAN,CAAf;;AAEA,QAAI,aAAa,IAAI,aAAa,KAAK,aAAvC,EAAsD;AACpD,MAAA,aAAa,CAAC,EAAD,CAAb;AACD,KAFD,MAEO,IAAI,aAAJ,EAAmB;AACxB,MAAA,aAAa,CAAC,EAAD,EAAK;AAAE,QAAA,KAAK,EAAE;AAAT,OAAL,CAAb;AACD;AACF,GAT4E,CAA7E;AAWA,QAAM,aAAa,GAAG;AACpB,KAAC,kBAAD,GAAsB,KAAK,CAAC,QAAN,GAAiB,MAAjB,GAA0B,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,QADtD;AAEpB,KAAC,qBAAD,GAAyB,IAAI,IAAI,IAAI,GAAG,CAAf,GAAmB,GAAI,IAAI,GAAG,GAAR,IAAgB,GAAG,GAAG,GAAtB,CAA0B,GAAhD,GAAsD,EAF3D;AAGpB,KAAC,iBAAD,GAAqB,GAAG,YAAY;AAHhB,GAAtB,CAxBgF,CA8BhF;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,aADc;AAEjB,OAAG,KAAK,CAAC,IAAN,CAAW;AAFG,GAAnB,CA/BgF,CAoChF;;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;AAEA,SAAO,KAAP;AACD,CAzCM","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Slider/useSliderStyles.js CHANGED
@@ -14,18 +14,14 @@ const railColorVar = `--fui-Slider__rail--color`;
14
14
  const progressColorVar = `--fui-Slider__progress--color`;
15
15
  const thumbColorVar = `--fui-Slider__thumb--color`;
16
16
  export const sliderCSSVars = {
17
- railDirectionVar: `--fui-Slider__rail--direction`,
18
- railOffsetVar: `--fui-Slider__rail--offset`,
19
- railProgressVar: `--fui-Slider__rail--progress`,
20
- railStepsPercentVar: `--fui-Slider__rail--steps-percent`,
21
- thumbPositionVar: `--fui-Slider__thumb--position`
17
+ sliderDirectionVar: `--fui-Slider--direction`,
18
+ sliderProgressVar: `--fui-Slider--progress`,
19
+ sliderStepsPercentVar: `--fui-Slider--steps-percent`
22
20
  };
23
21
  const {
24
- railDirectionVar,
25
- railOffsetVar,
26
- railStepsPercentVar,
27
- railProgressVar,
28
- thumbPositionVar
22
+ sliderDirectionVar,
23
+ sliderStepsPercentVar,
24
+ sliderProgressVar
29
25
  } = sliderCSSVars;
30
26
  /**
31
27
  * Styles for the root slot
@@ -83,7 +79,7 @@ const useRootStyles = /*#__PURE__*/__styles({
83
79
  "Bdjie01": "fcdjl4u"
84
80
  },
85
81
  "focusIndicatorHorizontal": {
86
- "B486eqv": "f2hkw1w",
82
+ "Brovlpu": "ftqa4ok",
87
83
  "vchsgm": "fbiesyy",
88
84
  "ozrjjd": ["fq2kn9", "f1jxwnad"],
89
85
  "B7lelfh": "f1il7mou",
@@ -114,7 +110,7 @@ const useRootStyles = /*#__PURE__*/__styles({
114
110
  "Bj23z95": ["f1veb610", "fc3tncn"]
115
111
  },
116
112
  "focusIndicatorVertical": {
117
- "B486eqv": "f2hkw1w",
113
+ "Brovlpu": "ftqa4ok",
118
114
  "vchsgm": "fbiesyy",
119
115
  "ozrjjd": ["fq2kn9", "f1jxwnad"],
120
116
  "B7lelfh": "f1il7mou",
@@ -149,7 +145,7 @@ const useRootStyles = /*#__PURE__*/__styles({
149
145
  "h": [".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}", ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"],
150
146
  "a": [".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}", ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"],
151
147
  "t": ["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", "@media (forced-colors: active){.f1xddb6{--fui-Slider__thumb--color:Highlight;}}", "@media (forced-colors: active){.fcdikl{--fui-Slider__progress--color:Highlight;}}", "@media (forced-colors: active){.fhpzgm6:hover{--fui-Slider__thumb--color:Highlight;}}", "@media (forced-colors: active){.f1q6pm3h:hover{--fui-Slider__progress--color:Highlight;}}", "@media (forced-colors: active){.fu12m3e{--fui-Slider__rail--color:GrayText;}}", "@media (forced-colors: active){.fi9guym{--fui-Slider__thumb--color:GrayText;}}", "@media (forced-colors: active){.fcdjl4u{--fui-Slider__progress--color:GrayText;}}"],
152
- "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
148
+ "f": [".ftqa4ok:focus{outline-style:none;}"]
153
149
  });
154
150
  /**
155
151
  * Styles for the rail slot
@@ -169,13 +165,14 @@ const useRailStyles = /*#__PURE__*/__styles({
169
165
  "Bw0ie65": "f1xmzt6x",
170
166
  "qhf8xq": "f10pi13n",
171
167
  "Bvjb7m6": "fdgv6k0",
172
- "Bcmaq0h": "f1gvmols",
168
+ "Bcmaq0h": "fizngqt",
173
169
  "Bpd4iqm": "fpvhumw",
174
170
  "oeaueh": "f1yog68k",
175
171
  "Bw0xxkn": "f13sgyd8",
176
172
  "rurcny": "f99sooz",
177
173
  "xx9plb": "fxf9f1y",
178
- "Baov28r": "f1ijinm9"
174
+ "Baov28r": "flc4gu0",
175
+ "lqk6ie": "fwesvjl"
179
176
  },
180
177
  "horizontal": {
181
178
  "a9b677": "fly5x3f",
@@ -192,7 +189,8 @@ const useRailStyles = /*#__PURE__*/__styles({
192
189
  "Bj2wrql": "f1t2u064"
193
190
  }
194
191
  }, {
195
- "d": [".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1aehjj5{pointer-events:none;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".f1gvmols{background-image:linear-gradient(\n var(--fui-Slider__rail--direction),\n var(--fui-Slider__rail--color) 0%,\n var(--fui-Slider__rail--color) var(--fui-Slider__rail--offset),\n var(--fui-Slider__progress--color) var(--fui-Slider__rail--offset),\n var(--fui-Slider__progress--color) calc(var(--fui-Slider__rail--offset) + var(--fui-Slider__rail--progress)),\n var(--fui-Slider__rail--color) calc(var(--fui-Slider__rail--offset) + var(--fui-Slider__rail--progress))\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f99sooz:before{content:'';}", ".fxf9f1y:before{position:absolute;}", ".f1ijinm9:before{background-image:repeating-linear-gradient(\n var(--fui-Slider__rail--direction),\n #0000 0%,\n #0000 calc(var(--fui-Slider__rail--steps-percent) - 1px),\n var(--colorNeutralBackground1) calc(var(--fui-Slider__rail--steps-percent) - 1px),\n var(--colorNeutralBackground1) var(--fui-Slider__rail--steps-percent)\n );}", ".fly5x3f{width:100%;}", ".f1cy86ho{height:var(--fui-Slider__rail--size);}", ".f1oqflmk:before{left:-1px;}", ".fimcj7z:before{right:-1px;}", ".fq8vbpg:before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f61axi9:before{width:var(--fui-Slider__rail--size);}", ".f1p8196g:before{top:-1px;}", ".f1t2u064:before{bottom:1px;}"]
192
+ "d": [".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1aehjj5{pointer-events:none;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".fizngqt{background-image:linear-gradient(\n var(--fui-Slider--direction),\n var(--fui-Slider__progress--color) 0%,\n var(--fui-Slider__progress--color) var(--fui-Slider--progress),\n var(--fui-Slider__rail--color) var(--fui-Slider--progress)\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f99sooz:before{content:'';}", ".fxf9f1y:before{position:absolute;}", ".flc4gu0: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);}", ".f1oqflmk:before{left:-1px;}", ".fimcj7z:before{right:-1px;}", ".fq8vbpg:before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f61axi9:before{width:var(--fui-Slider__rail--size);}", ".f1p8196g:before{top:-1px;}", ".f1t2u064:before{bottom:1px;}"],
193
+ "t": ["@media (forced-colors: active){.fwesvjl: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 );}}"]
196
194
  });
197
195
  /**
198
196
  * Styles for the thumb slot
@@ -253,14 +251,14 @@ const useThumbStyles = /*#__PURE__*/__styles({
253
251
  "Bohd3ja": ["f16ep8jm", "f1yueqd5"]
254
252
  },
255
253
  "horizontal": {
256
- "oyh7mz": ["foa2ioz", "fjmilum"]
254
+ "oyh7mz": ["f1fj3zth", "fcf9u6w"]
257
255
  },
258
256
  "vertical": {
259
257
  "Bz10aip": "f5cv5a3",
260
- "B5kzvoi": "f1k2fpdo"
258
+ "B5kzvoi": "feeniun"
261
259
  }
262
260
  }, {
263
- "d": [".f1euv43f{position:absolute;}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f1aehjj5{pointer-events:none;}", ".f1s6fcnf{outline-style:none;}", ".fdgv6k0{forced-color-adjust:none;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fof7hq0{box-shadow:0 0 0 calc(var(--fui-Slider__thumb--size) * .2) var(--colorNeutralBackground1) inset;}", ".foksa45{background-color:var(--fui-Slider__thumb--color);}", ".f13gfj74{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".f1nfknbn{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f170vdtw:before{box-sizing:border-box;}", ".f99sooz:before{content:'';}", ".f1i9s981:before{border-top-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fqfd43n:before{border-right-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fgpokn8:before{border-left-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f19s890:before{border-bottom-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".foa2ioz{left:var(--fui-Slider__thumb--position);}", ".fjmilum{right:var(--fui-Slider__thumb--position);}", ".f5cv5a3{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".f1k2fpdo{bottom:var(--fui-Slider__thumb--position);}"]
261
+ "d": [".f1euv43f{position:absolute;}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f1aehjj5{pointer-events:none;}", ".f1s6fcnf{outline-style:none;}", ".fdgv6k0{forced-color-adjust:none;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fof7hq0{box-shadow:0 0 0 calc(var(--fui-Slider__thumb--size) * .2) var(--colorNeutralBackground1) inset;}", ".foksa45{background-color:var(--fui-Slider__thumb--color);}", ".f13gfj74{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".f1nfknbn{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f170vdtw:before{box-sizing:border-box;}", ".f99sooz:before{content:'';}", ".f1i9s981:before{border-top-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fqfd43n:before{border-right-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fgpokn8:before{border-left-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f19s890:before{border-bottom-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".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);}"]
264
262
  });
265
263
  /**
266
264
  * Styles for the Input slot
package/lib/components/Slider/useSliderStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\n\nexport const sliderCSSVars = {\n railDirectionVar: `--fui-Slider__rail--direction`,\n railOffsetVar: `--fui-Slider__rail--offset`,\n railProgressVar: `--fui-Slider__rail--progress`,\n railStepsPercentVar: `--fui-Slider__rail--steps-percent`,\n thumbPositionVar: `--fui-Slider__thumb--position`,\n};\n\nconst { railDirectionVar, railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar } = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n gridTemplateAreas: '\"slider\"',\n userSelect: 'none',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n height: `var(${thumbSizeVar})`,\n },\n\n vertical: {\n width: `var(${thumbSizeVar})`,\n minHeight: '120px',\n gridTemplateColumns: `var(${thumbSizeVar})`,\n },\n\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n rail: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n pointerEvents: 'none',\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${railDirectionVar}),\n var(${railColorVar}) 0%,\n var(${railColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar})),\n var(${railColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar}))\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n ':before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${railDirectionVar}),\n #0000 0%,\n #0000 calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${railStepsPercentVar})\n )`,\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n ':before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n ':before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n transform: 'translateX(-50%)',\n ':before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: \"''\",\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n },\n },\n disabled: {\n ':before': {\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n },\n },\n horizontal: {\n left: `var(${thumbPositionVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n opacity: 0,\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: `calc(100% + var(${thumbSizeVar}))`,\n },\n vertical: {\n height: `calc(100% + var(${thumbSizeVar}))`,\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical',\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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/"}
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { Slider, renderSlider_unstable, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable } from './Slider';
1
+ export { Slider, renderSlider_unstable, sliderClassNames, sliderCSSVars, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable } from './Slider';
2
2
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,qBAFF,EAGE,gBAHF,EAIE,uBAJF,EAKE,wBALF,EAME,kBANF,QAOO,UAPP","sourcesContent":["export {\n Slider,\n renderSlider_unstable,\n sliderClassNames,\n useSliderState_unstable,\n useSliderStyles_unstable,\n useSlider_unstable,\n} from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,qBAFF,EAGE,gBAHF,EAIE,aAJF,EAKE,uBALF,EAME,wBANF,EAOE,kBAPF,QAQO,UARP","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/lib-commonjs/components/Slider/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useSliderStyles_unstable = exports.sliderClassNames = exports.useSliderState_unstable = void 0;
6
+ exports.useSliderStyles_unstable = exports.sliderCSSVars = exports.sliderClassNames = exports.useSliderState_unstable = void 0;
7
7
 
8
8
  const tslib_1 = /*#__PURE__*/require("tslib");
9
9
 
@@ -32,6 +32,12 @@ Object.defineProperty(exports, "sliderClassNames", {
32
32
  return useSliderStyles_1.sliderClassNames;
33
33
  }
34
34
  });
35
+ Object.defineProperty(exports, "sliderCSSVars", {
36
+ enumerable: true,
37
+ get: function () {
38
+ return useSliderStyles_1.sliderCSSVars;
39
+ }
40
+ });
35
41
  Object.defineProperty(exports, "useSliderStyles_unstable", {
36
42
  enumerable: true,
37
43
  get: function () {
package/lib-commonjs/components/Slider/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Slider/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,aAAA;AAAa;AAAb,CAAA;AAAe,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Slider/useSliderState.js CHANGED
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.useSliderState_unstable = void 0;
7
7
 
8
- const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
9
 
12
10
  const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
@@ -14,11 +12,9 @@ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-con
14
12
  const useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
15
13
 
16
14
  const {
17
- railOffsetVar,
18
- railStepsPercentVar,
19
- railProgressVar,
20
- thumbPositionVar,
21
- railDirectionVar
15
+ sliderStepsPercentVar,
16
+ sliderProgressVar,
17
+ sliderDirectionVar
22
18
  } = useSliderStyles_1.sliderCSSVars;
23
19
 
24
20
  const getPercent = (value, min, max) => {
@@ -31,21 +27,17 @@ const useSliderState_unstable = (state, props) => {
31
27
  min = 0,
32
28
  max = 100,
33
29
  step,
34
- origin,
35
30
  value
36
31
  } = props;
37
32
  const {
38
33
  dir
39
- } = react_shared_contexts_1.useFluent();
34
+ } = react_shared_contexts_1.useFluent_unstable();
40
35
  const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
41
36
  state: value !== undefined ? react_utilities_1.clamp(value, min, max) : undefined,
42
37
  defaultState: react_utilities_1.clamp(defaultValue, min, max),
43
38
  initialState: 0
44
39
  });
45
40
  const valuePercent = getPercent(currentValue, min, max);
46
- const originPercent = React.useMemo(() => {
47
- return origin !== undefined ? getPercent(origin, min, max) : 0;
48
- }, [max, min, origin]);
49
41
  const inputOnChange = state.input.onChange;
50
42
  const propsOnChange = props.onChange;
51
43
  const onChange = react_utilities_1.useEventCallback(ev => {
@@ -61,11 +53,9 @@ const useSliderState_unstable = (state, props) => {
61
53
  }
62
54
  });
63
55
  const rootVariables = {
64
- [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
65
- [thumbPositionVar]: valuePercent + '%',
66
- [railStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
67
- [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
68
- [railProgressVar]: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`
56
+ [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
57
+ [sliderStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
58
+ [sliderProgressVar]: `${valuePercent}%`
69
59
  }; // Root props
70
60
 
71
61
  state.root.style = { ...rootVariables,
package/lib-commonjs/components/Slider/useSliderState.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar, railDirectionVar } = 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, origin, 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 const originPercent = React.useMemo(() => {\n return origin !== undefined ? getPercent(origin, min, max) : 0;\n }, [max, min, origin]);\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 [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [thumbPositionVar]: valuePercent + '%',\n [railStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',\n [railProgressVar]:\n origin !== undefined\n ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n : `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Slider/useSliderStyles.js CHANGED
@@ -24,18 +24,14 @@ const railColorVar = `--fui-Slider__rail--color`;
24
24
  const progressColorVar = `--fui-Slider__progress--color`;
25
25
  const thumbColorVar = `--fui-Slider__thumb--color`;
26
26
  exports.sliderCSSVars = {
27
- railDirectionVar: `--fui-Slider__rail--direction`,
28
- railOffsetVar: `--fui-Slider__rail--offset`,
29
- railProgressVar: `--fui-Slider__rail--progress`,
30
- railStepsPercentVar: `--fui-Slider__rail--steps-percent`,
31
- thumbPositionVar: `--fui-Slider__thumb--position`
27
+ sliderDirectionVar: `--fui-Slider--direction`,
28
+ sliderProgressVar: `--fui-Slider--progress`,
29
+ sliderStepsPercentVar: `--fui-Slider--steps-percent`
32
30
  };
33
31
  const {
34
- railDirectionVar,
35
- railOffsetVar,
36
- railStepsPercentVar,
37
- railProgressVar,
38
- thumbPositionVar
32
+ sliderDirectionVar,
33
+ sliderStepsPercentVar,
34
+ sliderProgressVar
39
35
  } = exports.sliderCSSVars;
40
36
  /**
41
37
  * Styles for the root slot
@@ -93,7 +89,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
93
89
  "Bdjie01": "fcdjl4u"
94
90
  },
95
91
  "focusIndicatorHorizontal": {
96
- "B486eqv": "f2hkw1w",
92
+ "Brovlpu": "ftqa4ok",
97
93
  "vchsgm": "fbiesyy",
98
94
  "ozrjjd": ["fq2kn9", "f1jxwnad"],
99
95
  "B7lelfh": "f1il7mou",
@@ -124,7 +120,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
124
120
  "Bj23z95": ["f1veb610", "fc3tncn"]
125
121
  },
126
122
  "focusIndicatorVertical": {
127
- "B486eqv": "f2hkw1w",
123
+ "Brovlpu": "ftqa4ok",
128
124
  "vchsgm": "fbiesyy",
129
125
  "ozrjjd": ["fq2kn9", "f1jxwnad"],
130
126
  "B7lelfh": "f1il7mou",
@@ -159,7 +155,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
159
155
  "h": [".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}", ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"],
160
156
  "a": [".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}", ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"],
161
157
  "t": ["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", "@media (forced-colors: active){.f1xddb6{--fui-Slider__thumb--color:Highlight;}}", "@media (forced-colors: active){.fcdikl{--fui-Slider__progress--color:Highlight;}}", "@media (forced-colors: active){.fhpzgm6:hover{--fui-Slider__thumb--color:Highlight;}}", "@media (forced-colors: active){.f1q6pm3h:hover{--fui-Slider__progress--color:Highlight;}}", "@media (forced-colors: active){.fu12m3e{--fui-Slider__rail--color:GrayText;}}", "@media (forced-colors: active){.fi9guym{--fui-Slider__thumb--color:GrayText;}}", "@media (forced-colors: active){.fcdjl4u{--fui-Slider__progress--color:GrayText;}}"],
162
- "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
158
+ "f": [".ftqa4ok:focus{outline-style:none;}"]
163
159
  });
164
160
  /**
165
161
  * Styles for the rail slot
@@ -179,13 +175,14 @@ const useRailStyles = /*#__PURE__*/react_1.__styles({
179
175
  "Bw0ie65": "f1xmzt6x",
180
176
  "qhf8xq": "f10pi13n",
181
177
  "Bvjb7m6": "fdgv6k0",
182
- "Bcmaq0h": "f1gvmols",
178
+ "Bcmaq0h": "fizngqt",
183
179
  "Bpd4iqm": "fpvhumw",
184
180
  "oeaueh": "f1yog68k",
185
181
  "Bw0xxkn": "f13sgyd8",
186
182
  "rurcny": "f99sooz",
187
183
  "xx9plb": "fxf9f1y",
188
- "Baov28r": "f1ijinm9"
184
+ "Baov28r": "flc4gu0",
185
+ "lqk6ie": "fwesvjl"
189
186
  },
190
187
  "horizontal": {
191
188
  "a9b677": "fly5x3f",
@@ -202,7 +199,8 @@ const useRailStyles = /*#__PURE__*/react_1.__styles({
202
199
  "Bj2wrql": "f1t2u064"
203
200
  }
204
201
  }, {
205
- "d": [".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1aehjj5{pointer-events:none;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".f1gvmols{background-image:linear-gradient(\n var(--fui-Slider__rail--direction),\n var(--fui-Slider__rail--color) 0%,\n var(--fui-Slider__rail--color) var(--fui-Slider__rail--offset),\n var(--fui-Slider__progress--color) var(--fui-Slider__rail--offset),\n var(--fui-Slider__progress--color) calc(var(--fui-Slider__rail--offset) + var(--fui-Slider__rail--progress)),\n var(--fui-Slider__rail--color) calc(var(--fui-Slider__rail--offset) + var(--fui-Slider__rail--progress))\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f99sooz:before{content:'';}", ".fxf9f1y:before{position:absolute;}", ".f1ijinm9:before{background-image:repeating-linear-gradient(\n var(--fui-Slider__rail--direction),\n #0000 0%,\n #0000 calc(var(--fui-Slider__rail--steps-percent) - 1px),\n var(--colorNeutralBackground1) calc(var(--fui-Slider__rail--steps-percent) - 1px),\n var(--colorNeutralBackground1) var(--fui-Slider__rail--steps-percent)\n );}", ".fly5x3f{width:100%;}", ".f1cy86ho{height:var(--fui-Slider__rail--size);}", ".f1oqflmk:before{left:-1px;}", ".fimcj7z:before{right:-1px;}", ".fq8vbpg:before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f61axi9:before{width:var(--fui-Slider__rail--size);}", ".f1p8196g:before{top:-1px;}", ".f1t2u064:before{bottom:1px;}"]
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);}", ".f99sooz:before{content:'';}", ".fxf9f1y:before{position:absolute;}", ".flc4gu0: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);}", ".f1oqflmk:before{left:-1px;}", ".fimcj7z:before{right:-1px;}", ".fq8vbpg:before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f61axi9:before{width:var(--fui-Slider__rail--size);}", ".f1p8196g:before{top:-1px;}", ".f1t2u064:before{bottom:1px;}"],
203
+ "t": ["@media (forced-colors: active){.fwesvjl: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 );}}"]
206
204
  });
207
205
  /**
208
206
  * Styles for the thumb slot
@@ -263,14 +261,14 @@ const useThumbStyles = /*#__PURE__*/react_1.__styles({
263
261
  "Bohd3ja": ["f16ep8jm", "f1yueqd5"]
264
262
  },
265
263
  "horizontal": {
266
- "oyh7mz": ["foa2ioz", "fjmilum"]
264
+ "oyh7mz": ["f1fj3zth", "fcf9u6w"]
267
265
  },
268
266
  "vertical": {
269
267
  "Bz10aip": "f5cv5a3",
270
- "B5kzvoi": "f1k2fpdo"
268
+ "B5kzvoi": "feeniun"
271
269
  }
272
270
  }, {
273
- "d": [".f1euv43f{position:absolute;}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f1aehjj5{pointer-events:none;}", ".f1s6fcnf{outline-style:none;}", ".fdgv6k0{forced-color-adjust:none;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fof7hq0{box-shadow:0 0 0 calc(var(--fui-Slider__thumb--size) * .2) var(--colorNeutralBackground1) inset;}", ".foksa45{background-color:var(--fui-Slider__thumb--color);}", ".f13gfj74{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".f1nfknbn{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f170vdtw:before{box-sizing:border-box;}", ".f99sooz:before{content:'';}", ".f1i9s981:before{border-top-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fqfd43n:before{border-right-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fgpokn8:before{border-left-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f19s890:before{border-bottom-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".foa2ioz{left:var(--fui-Slider__thumb--position);}", ".fjmilum{right:var(--fui-Slider__thumb--position);}", ".f5cv5a3{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".f1k2fpdo{bottom:var(--fui-Slider__thumb--position);}"]
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%);}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f170vdtw:before{box-sizing:border-box;}", ".f99sooz:before{content:'';}", ".f1i9s981:before{border-top-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fqfd43n:before{border-right-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fgpokn8:before{border-left-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f19s890:before{border-bottom-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".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);}"]
274
272
  });
275
273
  /**
276
274
  * Styles for the Input slot
package/lib-commonjs/components/Slider/useSliderStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,IAAI,EAAE,kBAFqD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,KAAK,EAAE;AAJoD,CAAhD,C,CAOb;;AACA,MAAM,YAAY,GAAG,2BAArB;AACA,MAAM,WAAW,GAAG,0BAApB;AACA,MAAM,YAAY,GAAG,2BAArB;AACA,MAAM,gBAAgB,GAAG,+BAAzB;AACA,MAAM,aAAa,GAAG,4BAAtB;AAEa,OAAA,CAAA,aAAA,GAAgB;AAC3B,EAAA,gBAAgB,EAAE,+BADS;AAE3B,EAAA,aAAa,EAAE,4BAFY;AAG3B,EAAA,eAAe,EAAE,8BAHU;AAI3B,EAAA,mBAAmB,EAAE,mCAJM;AAK3B,EAAA,gBAAgB,EAAE;AALS,CAAhB;AAQb,MAAM;AAAE,EAAA,gBAAF;AAAoB,EAAA,aAApB;AAAmC,EAAA,mBAAnC;AAAwD,EAAA,eAAxD;AAAyE,EAAA;AAAzE,IAA8F,OAAA,CAAA,aAApG;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;AA+EA;;AAEG;;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;AAyDA;;AAEG;;;AACH,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAsCA;;AAEG;;;AACH,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAqBA;;AAEG;;;AACI,MAAM,wBAAwB,GAAI,KAAD,IAAoC;AAC1E,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,QAAM,UAAU,GAAG,KAAK,CAAC,QAAzB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,GAAG,UAAU,CAAC,sBAAd,GAAuC,UAAU,CAAC,wBAHvC,EAIrB,UAAU,CAAC,KAAK,CAAC,IAAP,CAJW,EAKrB,UAAU,GAAG,UAAU,CAAC,QAAd,GAAyB,UAAU,CAAC,UALzB,EAMrB,KAAK,CAAC,QAAN,GAAiB,UAAU,CAAC,QAA5B,GAAuC,UAAU,CAAC,OAN7B,EAOrB,KAAK,CAAC,IAAN,CAAW,SAPU,CAAvB;AAUA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,GAAG,UAAU,CAAC,QAAd,GAAyB,UAAU,CAAC,UAHzB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAOA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,gBAAA,CAAiB,KADK,EAEtB,WAAW,CAAC,KAFU,EAGtB,UAAU,GAAG,WAAW,CAAC,QAAf,GAA0B,WAAW,CAAC,UAH1B,EAItB,KAAK,CAAC,QAAN,IAAkB,WAAW,CAAC,QAJR,EAKtB,KAAK,CAAC,KAAN,CAAY,SALU,CAAxB;AAQA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,gBAAA,CAAiB,KADK,EAEtB,WAAW,CAAC,KAFU,EAGtB,UAAU,GAAG,WAAW,CAAC,QAAf,GAA0B,WAAW,CAAC,UAH1B,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;AAOA,SAAO,KAAP;AACD,CAxCM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\n\nexport const sliderCSSVars = {\n railDirectionVar: `--fui-Slider__rail--direction`,\n railOffsetVar: `--fui-Slider__rail--offset`,\n railProgressVar: `--fui-Slider__rail--progress`,\n railStepsPercentVar: `--fui-Slider__rail--steps-percent`,\n thumbPositionVar: `--fui-Slider__thumb--position`,\n};\n\nconst { railDirectionVar, railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar } = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n gridTemplateAreas: '\"slider\"',\n userSelect: 'none',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n height: `var(${thumbSizeVar})`,\n },\n\n vertical: {\n width: `var(${thumbSizeVar})`,\n minHeight: '120px',\n gridTemplateColumns: `var(${thumbSizeVar})`,\n },\n\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n rail: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n pointerEvents: 'none',\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${railDirectionVar}),\n var(${railColorVar}) 0%,\n var(${railColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar})),\n var(${railColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar}))\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n ':before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${railDirectionVar}),\n #0000 0%,\n #0000 calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${railStepsPercentVar})\n )`,\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n ':before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n ':before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n transform: 'translateX(-50%)',\n ':before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: \"''\",\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n },\n },\n disabled: {\n ':before': {\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n },\n },\n horizontal: {\n left: `var(${thumbPositionVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n opacity: 0,\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: `calc(100% + var(${thumbSizeVar}))`,\n },\n vertical: {\n height: `calc(100% + var(${thumbSizeVar}))`,\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical',\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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/"}
package/lib-commonjs/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useSlider_unstable = exports.useSliderStyles_unstable = exports.useSliderState_unstable = exports.sliderClassNames = exports.renderSlider_unstable = exports.Slider = void 0;
6
+ exports.useSlider_unstable = exports.useSliderStyles_unstable = exports.useSliderState_unstable = exports.sliderCSSVars = exports.sliderClassNames = exports.renderSlider_unstable = exports.Slider = void 0;
7
7
 
8
8
  var Slider_1 = /*#__PURE__*/require("./Slider");
9
9
 
@@ -25,6 +25,12 @@ Object.defineProperty(exports, "sliderClassNames", {
25
25
  return Slider_1.sliderClassNames;
26
26
  }
27
27
  });
28
+ Object.defineProperty(exports, "sliderCSSVars", {
29
+ enumerable: true,
30
+ get: function () {
31
+ return Slider_1.sliderCSSVars;
32
+ }
33
+ });
28
34
  Object.defineProperty(exports, "useSliderState_unstable", {
29
35
  enumerable: true,
30
36
  get: function () {
package/lib-commonjs/index.js.map CHANGED
@@ -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;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA","sourcesContent":["export {\n Slider,\n renderSlider_unstable,\n sliderClassNames,\n useSliderState_unstable,\n useSliderStyles_unstable,\n useSlider_unstable,\n} from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';\n"],"sourceRoot":"../src/"}
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;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,aAAA;AAAa;AAAb,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;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.15",
3
+ "version": "9.0.0-beta.18",
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.6",
32
- "@fluentui/react-label": "9.0.0-rc.2",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.8",
32
+ "@fluentui/react-label": "9.0.0-rc.5",
33
33
  "@fluentui/scripts": "^1.0.0"
34
34
  },
35
35
  "dependencies": {
36
- "@griffel/react": "1.0.5",
37
- "@fluentui/react-shared-contexts": "9.0.0-rc.8",
38
- "@fluentui/react-tabster": "9.0.0-rc.10",
39
- "@fluentui/react-theme": "9.0.0-rc.8",
40
- "@fluentui/react-utilities": "9.0.0-rc.9",
36
+ "@griffel/react": "1.1.0",
37
+ "@fluentui/react-shared-contexts": "9.0.0-rc.10",
38
+ "@fluentui/react-tabster": "9.0.0-rc.13",
39
+ "@fluentui/react-theme": "9.0.0-rc.9",
40
+ "@fluentui/react-utilities": "9.0.0-rc.10",
41
41
  "tslib": "^2.1.0"
42
42
  },
43
43
  "peerDependencies": {