@fluentui/react-slider 9.1.4 → 9.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.swcrc +30 -0
- package/CHANGELOG.json +64 -1
- package/CHANGELOG.md +19 -2
- package/lib/Slider.js.map +1 -1
- package/lib/SliderField.js.map +1 -1
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/components/Slider/Slider.types.js +1 -1
- package/lib/components/Slider/Slider.types.js.map +1 -1
- package/lib/components/Slider/index.js.map +1 -1
- package/lib/components/Slider/renderSlider.js +1 -9
- package/lib/components/Slider/renderSlider.js.map +1 -1
- package/lib/components/Slider/useSlider.js +1 -0
- package/lib/components/Slider/useSlider.js.map +1 -1
- package/lib/components/Slider/useSliderState.js +1 -0
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib/components/Slider/useSliderStyles.js.map +1 -1
- package/lib/components/SliderField/SliderField.js +1 -2
- package/lib/components/SliderField/SliderField.js.map +1 -1
- package/lib/components/SliderField/index.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Slider.js +5 -4
- package/lib-commonjs/Slider.js.map +1 -1
- package/lib-commonjs/SliderField.js +5 -4
- package/lib-commonjs/SliderField.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.js +19 -20
- package/lib-commonjs/components/Slider/Slider.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.types.js +5 -2
- package/lib-commonjs/components/Slider/Slider.types.js.map +1 -1
- package/lib-commonjs/components/Slider/index.js +21 -33
- package/lib-commonjs/components/Slider/index.js.map +1 -1
- package/lib-commonjs/components/Slider/renderSlider.js +13 -24
- package/lib-commonjs/components/Slider/renderSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSlider.js +57 -58
- package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.js +51 -59
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderStyles.js +697 -311
- package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
- package/lib-commonjs/components/SliderField/SliderField.js +17 -11
- package/lib-commonjs/components/SliderField/SliderField.js.map +1 -1
- package/lib-commonjs/components/SliderField/index.js +5 -4
- package/lib-commonjs/components/SliderField/index.js.map +1 -1
- package/lib-commonjs/index.js +23 -61
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +11 -10
- package/lib-amd/Slider.js +0 -6
- package/lib-amd/Slider.js.map +0 -1
- package/lib-amd/SliderField.js +0 -6
- package/lib-amd/SliderField.js.map +0 -1
- package/lib-amd/components/Slider/Slider.js +0 -17
- package/lib-amd/components/Slider/Slider.js.map +0 -1
- package/lib-amd/components/Slider/Slider.types.js +0 -5
- package/lib-amd/components/Slider/Slider.types.js.map +0 -1
- package/lib-amd/components/Slider/index.js +0 -14
- package/lib-amd/components/Slider/index.js.map +0 -1
- package/lib-amd/components/Slider/renderSlider.js +0 -17
- package/lib-amd/components/Slider/renderSlider.js.map +0 -1
- package/lib-amd/components/Slider/useSlider.js +0 -41
- package/lib-amd/components/Slider/useSlider.js.map +0 -1
- package/lib-amd/components/Slider/useSliderState.js +0 -45
- package/lib-amd/components/Slider/useSliderState.js.map +0 -1
- package/lib-amd/components/Slider/useSliderStyles.js +0 -185
- package/lib-amd/components/Slider/useSliderStyles.js.map +0 -1
- package/lib-amd/components/SliderField/SliderField.js +0 -10
- package/lib-amd/components/SliderField/SliderField.js.map +0 -1
- package/lib-amd/components/SliderField/index.js +0 -6
- package/lib-amd/components/SliderField/index.js.map +0 -1
- package/lib-amd/index.js +0 -15
- package/lib-amd/index.js.map +0 -1
package/.swcrc
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
+
"exclude": [
|
|
4
|
+
"/testing",
|
|
5
|
+
"/**/*.cy.ts",
|
|
6
|
+
"/**/*.cy.tsx",
|
|
7
|
+
"/**/*.spec.ts",
|
|
8
|
+
"/**/*.spec.tsx",
|
|
9
|
+
"/**/*.test.ts",
|
|
10
|
+
"/**/*.test.tsx"
|
|
11
|
+
],
|
|
12
|
+
"jsc": {
|
|
13
|
+
"parser": {
|
|
14
|
+
"syntax": "typescript",
|
|
15
|
+
"tsx": true,
|
|
16
|
+
"decorators": false,
|
|
17
|
+
"dynamicImport": false
|
|
18
|
+
},
|
|
19
|
+
"externalHelpers": true,
|
|
20
|
+
"transform": {
|
|
21
|
+
"react": {
|
|
22
|
+
"runtime": "classic",
|
|
23
|
+
"useSpread": true
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"target": "es2019"
|
|
27
|
+
},
|
|
28
|
+
"minify": false,
|
|
29
|
+
"sourceMaps": true
|
|
30
|
+
}
|
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,70 @@
|
|
|
2
2
|
"name": "@fluentui/react-slider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 21 Mar 2023 21:18:15 GMT",
|
|
6
|
+
"tag": "@fluentui/react-slider_v9.1.5",
|
|
7
|
+
"version": "9.1.5",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "tristan.watanabe@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-slider",
|
|
13
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
|
14
|
+
"comment": "fix: add node field to package.json exports map."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "tristan.watanabe@gmail.com",
|
|
18
|
+
"package": "@fluentui/react-slider",
|
|
19
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
|
20
|
+
"comment": "chore: migrate to swc transpilation approach."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-slider",
|
|
25
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.27",
|
|
26
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-slider",
|
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
|
|
32
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-slider",
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v9.6.1",
|
|
38
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-slider",
|
|
43
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
|
44
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-slider",
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
|
50
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-slider",
|
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
|
|
56
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-slider",
|
|
61
|
+
"comment": "Bump @fluentui/react-label to v9.1.5",
|
|
62
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"date": "Thu, 16 Mar 2023 14:36:59 GMT",
|
|
6
69
|
"tag": "@fluentui/react-slider_v9.1.4",
|
|
7
70
|
"version": "9.1.4",
|
|
8
71
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,29 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-slider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 21 Mar 2023 21:18:15 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.5)
|
|
8
|
+
|
|
9
|
+
Tue, 21 Mar 2023 21:18:15 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.4..@fluentui/react-slider_v9.1.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
|
15
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
|
16
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.27 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.6.1 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
19
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
22
|
+
- Bump @fluentui/react-label to v9.1.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
23
|
+
|
|
7
24
|
## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.4)
|
|
8
25
|
|
|
9
|
-
Thu, 16 Mar 2023 14:
|
|
26
|
+
Thu, 16 Mar 2023 14:36:59 GMT
|
|
10
27
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.3..@fluentui/react-slider_v9.1.4)
|
|
11
28
|
|
|
12
29
|
### Patches
|
package/lib/Slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/Slider.ts"],"sourcesContent":["export * from './components/Slider/index';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/SliderField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/SliderField.ts"],"sourcesContent":["export * from './components/SliderField/index';\n"],"mappings":"AAAA,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useSlider_unstable","renderSlider_unstable","useSliderStyles_unstable","useCustomStyleHooks_unstable","Slider","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useSlider_unstable","renderSlider_unstable","useSliderStyles_unstable","useCustomStyleHooks_unstable","Slider","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Slider component allows users to quickly select a value by dragging a thumb across a rail.\n */\nexport const Slider: ForwardRefComponent<SliderProps> = React.forwardRef((props, ref) => {\n const state = useSlider_unstable(props, ref);\n\n useSliderStyles_unstable(state);\n\n const { useSliderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQR,kBAAA,CAAmBM,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzB,MAAM;IAAEN,wBAAA,EAA0BO;EAAe,CAAE,GAAGN,4BAAA;EACtDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,qBAAA,CAAsBO,KAAA;AAC/B;AACAJ,MAAA,CAAOM,WAAW,GAAG"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
//# sourceMappingURL=Slider.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React"],"sources":["../../../src/components/Slider/Slider.types.ts"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useSliderState_unstable","sliderClassNames","sliderCSSVars","useSliderStyles_unstable"],"sources":["../../../src/components/Slider/index.ts"],"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"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,uBAAuB,QAAQ;AACxC,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,wBAAwB,QAAQ"}
|
|
@@ -8,14 +8,6 @@ export const renderSlider_unstable = state => {
|
|
|
8
8
|
slots,
|
|
9
9
|
slotProps
|
|
10
10
|
} = getSlots(state);
|
|
11
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
12
|
-
...slotProps.root
|
|
13
|
-
}, /*#__PURE__*/React.createElement(slots.input, {
|
|
14
|
-
...slotProps.input
|
|
15
|
-
}), /*#__PURE__*/React.createElement(slots.rail, {
|
|
16
|
-
...slotProps.rail
|
|
17
|
-
}), /*#__PURE__*/React.createElement(slots.thumb, {
|
|
18
|
-
...slotProps.thumb
|
|
19
|
-
}));
|
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.input, slotProps.input), /*#__PURE__*/React.createElement(slots.rail, slotProps.rail), /*#__PURE__*/React.createElement(slots.thumb, slotProps.thumb));
|
|
20
12
|
};
|
|
21
13
|
//# sourceMappingURL=renderSlider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getSlots","renderSlider_unstable","state","slots","slotProps","createElement","root","input","rail","thumb"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getSlots","renderSlider_unstable","state","slots","slotProps","createElement","root","input","rail","thumb"],"sources":["../../../src/components/Slider/renderSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderState) => {\n const { slots, slotProps } = getSlots<SliderSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.rail {...slotProps.rail} />\n <slots.thumb {...slotProps.thumb} />\n </slots.root>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAsBE,KAAA;EAEnD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,gBAChCR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,gBAC9BT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,KAAK,EAAKL,SAAA,CAAUK,KAAK;AAGtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getPartitionedNativeProps","resolveShorthand","useId","useMergedRefs","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","required","defaultProps","id","primary","type","orient","undefined"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getPartitionedNativeProps","resolveShorthand","useId","useMergedRefs","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","required","defaultProps","id","primary","type","orient","undefined"],"sources":["../../../src/components/Slider/useSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderProps, SliderState } from './Slider.types';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'size'],\n });\n\n const {\n disabled,\n vertical,\n size = 'medium',\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const state: SliderState = {\n disabled,\n size,\n vertical,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n orient: vertical ? 'vertical' : undefined,\n },\n }),\n rail: resolveShorthand(rail, { required: true }),\n thumb: resolveShorthand(thumb, { required: true }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n useSliderState_unstable(state, props);\n\n return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,aAAa,QAAQ;AAClF,SAASC,uBAAuB,QAAQ;AAExC,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,kBAAA,GAAqBA,CAACC,KAAA,EAAoBC,GAAA,KAAkD;EACvG,MAAMC,WAAA,GAAcT,yBAAA,CAA0B;IAC5CO,KAAA;IACAG,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,YAAY;EAClC;EAEA,MAAM;IACJC,QAAA;IACAC,QAAA;IACAC,IAAA,GAAO;IACP;IACAC,IAAA;IACAC,KAAA;IACAC,IAAA;IACAC;EAAK,CACN,GAAGX,KAAA;EAEJ,MAAMY,KAAA,GAAqB;IACzBP,QAAA;IACAE,IAAA;IACAD,QAAA;IACAO,UAAA,EAAY;MACVJ,KAAA,EAAO;MACPC,IAAA,EAAM;MACNF,IAAA,EAAM;MACNG,KAAA,EAAO;IACT;IACAH,IAAA,EAAMd,gBAAA,CAAiBc,IAAA,EAAM;MAC3BM,QAAA,EAAU,IAAI;MACdC,YAAA,EAAcb,WAAA,CAAYM;IAC5B;IACAC,KAAA,EAAOf,gBAAA,CAAiBe,KAAA,EAAO;MAC7BK,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZC,EAAA,EAAIrB,KAAA,CAAM,WAAWK,KAAA,CAAMgB,EAAE;QAC7Bf,GAAA;QACA,GAAGC,WAAA,CAAYe,OAAO;QACtBC,IAAA,EAAM;QACNC,MAAA,EAAQb,QAAA,GAAW,aAAac;MAClC;IACF;IACAV,IAAA,EAAMhB,gBAAA,CAAiBgB,IAAA,EAAM;MAAEI,QAAA,EAAU;IAAK;IAC9CH,KAAA,EAAOjB,gBAAA,CAAiBiB,KAAA,EAAO;MAAEG,QAAA,EAAU;IAAK;EAClD;EAEAF,KAAA,CAAMJ,IAAI,CAACP,GAAG,GAAGL,aAAA,CAAcgB,KAAA,CAAMJ,IAAI,CAACP,GAAG,EAAEH,cAAA;EAE/CD,uBAAA,CAAwBe,KAAA,EAAOZ,KAAA;EAE/B,OAAOY,KAAA;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","defaultValue","step","dir","currentValue","setCurrentValue","undefined","defaultState","initialState","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","rootVariables","vertical","root","style"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","defaultValue","step","dir","currentValue","setCurrentValue","undefined","defaultState","initialState","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","rootVariables","vertical","root","style"],"sources":["../../../src/components/Slider/useSliderState.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ;AAC9D,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,aAAa,QAAQ;AAG9B,MAAM;EAAEC,qBAAA;EAAuBC,iBAAA;EAAmBC;AAAkB,CAAE,GAAGH,aAAA;AAEzE,MAAMI,UAAA,GAAaA,CAACC,KAAA,EAAeC,GAAA,EAAaC,GAAA,KAAgB;EAC9D,OAAOA,GAAA,KAAQD,GAAA,GAAM,IAAI,CAAED,KAAA,GAAQC,GAAE,KAAMC,GAAA,GAAMD,GAAE,IAAM,GAAG;AAC9D;AAEA,OAAO,MAAME,uBAAA,GAA0BA,CAACC,KAAA,EAAoBC,KAAA,KAAuB;EACjF,MAAM;IAAEC,YAAA,GAAe;IAAGL,GAAA,GAAM;IAAGC,GAAA,GAAM;IAAKK,IAAA;IAAMP;EAAK,CAAE,GAAGK,KAAA;EAC9D,MAAM;IAAEG;EAAG,CAAE,GAAGd,SAAA;EAChB,MAAM,CAACe,YAAA,EAAcC,eAAA,CAAgB,GAAGnB,oBAAA,CAAqB;IAC3Da,KAAA,EAAOJ,KAAA,KAAUW,SAAA,GAAYrB,KAAA,CAAMU,KAAA,EAAOC,GAAA,EAAKC,GAAA,IAAOS,SAAS;IAC/DC,YAAA,EAActB,KAAA,CAAMgB,YAAA,EAAcL,GAAA,EAAKC,GAAA;IACvCW,YAAA,EAAc;EAChB;EACA,MAAMC,YAAA,GAAef,UAAA,CAAWU,YAAA,EAAcR,GAAA,EAAKC,GAAA;EAEnD,MAAMa,aAAA,GAAgBX,KAAA,CAAMY,KAAK,CAACC,QAAQ;EAC1C,MAAMC,aAAA,GAAgBb,KAAA,CAAMY,QAAQ;EAEpC,MAAMA,QAAA,GAAuDzB,gBAAA,CAAiB2B,EAAA,IAAM;IAClF,MAAMC,QAAA,GAAWC,MAAA,CAAOF,EAAA,CAAGG,MAAM,CAACtB,KAAK;IACvCU,eAAA,CAAgBpB,KAAA,CAAM8B,QAAA,EAAUnB,GAAA,EAAKC,GAAA;IAErC,IAAIa,aAAA,IAAiBA,aAAA,KAAkBG,aAAA,EAAe;MACpDH,aAAA,CAAcI,EAAA;IAChB,OAAO,IAAID,aAAA,EAAe;MACxBA,aAAA,CAAcC,EAAA,EAAI;QAAEnB,KAAA,EAAOoB;MAAS;IACtC;EACF;EAEA,MAAMG,aAAA,GAAgB;IACpB,CAACzB,kBAAA,GAAqBM,KAAA,CAAMoB,QAAQ,GAAG,SAAShB,GAAA,KAAQ,QAAQ,UAAU,QAAQ;IAClF,CAACZ,qBAAA,GAAwBW,IAAA,IAAQA,IAAA,GAAO,IAAK,GAAEA,IAAC,GAAO,OAAQL,GAAA,GAAMD,GAAE,CAAG,GAAE,GAAG,EAAE;IACjF,CAACJ,iBAAA,GAAqB,GAAEiB,YAAa;EACvC;EAEA;EACAV,KAAA,CAAMqB,IAAI,CAACC,KAAK,GAAG;IACjB,GAAGH,aAAa;IAChB,GAAGnB,KAAA,CAAMqB,IAAI,CAACC;EAChB;EAEA;EACAtB,KAAA,CAAMY,KAAK,CAAChB,KAAK,GAAGS,YAAA;EACpBL,KAAA,CAAMY,KAAK,CAACC,QAAQ,GAAGA,QAAA;EAEvB,OAAOb,KAAA;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["shorthands","__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbSizeVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderCSSVars","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","qhf8xq","mc9l5x","lpbzjs","Bt984gj","B7hvi0a","small","Bi64ftq","Ba19x4e","sshi5w","medium","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","enabled","B7wi8oa","B250r6j","Bpmy4es","Buw9y6v","Bq939m0","gjzr1t","tg7hqu","ypdvl1","Bw5jdd4","Bdjie01","Bvh9j6m","Bvsvvpo","disabled","focusIndicatorHorizontal","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","B2j2mmj","wigs8","pbfy6t","B0v4ure","ghq09","B24cy0v","Bwckmig","Bvwlmkc","Bbgo44z","Bil7v7r","skfxo0","jo1ztg","Ba3ybja","az1dzo","vppk2z","B6352mv","nr063g","Blmvk6g","Bsiemmq","B98u21t","B2pnrqr","Bhhzhcn","Bec0n69","B29w5g4","focusIndicatorVertical","d","h","a","m","f","i","useRailStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","Bvjb7m6","Bcmaq0h","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","Bbn5juq","Brdvuy1","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","E5pizo","De3pzq","Budzafs","r59vdv","n07z76","ck0cow","Bcvre1j","B0qfbqy","B4f6apu","y0oebl","uvfttm","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","z8tnut","z189sj","Byoj8tv","uwmqm3","B6of3ja","t21cq0","jrapky","Frg6f3","Brp00wb","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["../src/packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\n\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n};\n\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`,\n },\n\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n rail: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${sliderDirectionVar}),\n var(${progressColorVar}) 0%,\n var(${progressColorVar}) var(${sliderProgressVar}),\n var(${railColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\n },\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n '::before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: \"''\",\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n },\n },\n disabled: {\n '::before': {\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${sliderProgressVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical',\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["shorthands","__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbSizeVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderCSSVars","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","qhf8xq","mc9l5x","lpbzjs","Bt984gj","B7hvi0a","small","Bi64ftq","Ba19x4e","sshi5w","medium","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","enabled","B7wi8oa","B250r6j","Bpmy4es","Buw9y6v","Bq939m0","gjzr1t","tg7hqu","ypdvl1","Bw5jdd4","Bdjie01","Bvh9j6m","Bvsvvpo","disabled","focusIndicatorHorizontal","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","B2j2mmj","wigs8","pbfy6t","B0v4ure","ghq09","B24cy0v","Bwckmig","Bvwlmkc","Bbgo44z","Bil7v7r","skfxo0","jo1ztg","Ba3ybja","az1dzo","vppk2z","B6352mv","nr063g","Blmvk6g","Bsiemmq","B98u21t","B2pnrqr","Bhhzhcn","Bec0n69","B29w5g4","focusIndicatorVertical","d","h","a","m","f","i","useRailStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","Bvjb7m6","Bcmaq0h","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","Bbn5juq","Brdvuy1","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","E5pizo","De3pzq","Budzafs","r59vdv","n07z76","ck0cow","Bcvre1j","B0qfbqy","B4f6apu","y0oebl","uvfttm","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","z8tnut","z189sj","Byoj8tv","uwmqm3","B6of3ja","t21cq0","jrapky","Frg6f3","Brp00wb","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["../../../src/components/Slider/useSliderStyles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\n\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n};\n\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`,\n },\n\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n rail: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${sliderDirectionVar}),\n var(${progressColorVar}) 0%,\n var(${progressColorVar}) var(${sliderProgressVar}),\n var(${railColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\n },\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n '::before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: \"''\",\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n },\n },\n disabled: {\n '::before': {\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${sliderProgressVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical',\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
/* eslint-disable deprecation/deprecation */
|
|
2
|
-
import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
|
|
1
|
+
/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
|
|
3
2
|
import { Slider, sliderClassNames } from '../../Slider';
|
|
4
3
|
/** @deprecated Use Field with Slider: `<Field><Slider /></Field>` */
|
|
5
4
|
export const sliderFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(sliderClassNames.root);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Slider","sliderClassNames","sliderFieldClassNames","root","SliderField"],"sources":["
|
|
1
|
+
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Slider","sliderClassNames","sliderFieldClassNames","root","SliderField"],"sources":["../../../src/components/SliderField/SliderField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Slider, sliderClassNames, SliderProps } from '../../Slider';\n\n/** @deprecated Use Field with Slider: `<Field><Slider /></Field>` */\nexport type SliderFieldProps = DeprecatedFieldProps<SliderProps>;\n/** @deprecated Use Field with Slider: `<Field><Slider /></Field>` */\nexport const sliderFieldClassNames = getDeprecatedFieldClassNames(sliderClassNames.root);\n/** @deprecated Use Field with Slider: `<Field><Slider /></Field>` */\nexport const SliderField: ForwardRefComponent<SliderFieldProps> = makeDeprecatedField(Slider);\n"],"mappings":"AAAA,4CACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ;AAExF,SAASC,MAAM,EAAEC,gBAAgB,QAAqB;AAItD;AACA,OAAO,MAAMC,qBAAA,gBAAwBJ,4BAAA,CAA6BG,gBAAA,CAAiBE,IAAI;AACvF;AACA,OAAO,MAAMC,WAAA,gBAAqDL,mBAAA,CAAoBC,MAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/SliderField/index.ts"],"sourcesContent":["export * from './SliderField';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","SliderField","SliderField_unstable","sliderFieldClassNames"],"sources":["../src/
|
|
1
|
+
{"version":3,"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","SliderField","SliderField_unstable","sliderFieldClassNames"],"sources":["../src/index.ts"],"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\n// eslint-disable-next-line deprecation/deprecation\nexport { SliderField as SliderField_unstable, sliderFieldClassNames } from './SliderField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SliderFieldProps as SliderFieldProps_unstable } from './SliderField';\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,QACb;AAGP;AACA,SAASC,WAAA,IAAeC,oBAAoB,EAAEC,qBAAqB,QAAQ"}
|
package/lib-commonjs/Slider.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./components/Slider/index"), exports);
|
|
7
|
+
//# sourceMappingURL=Slider.js.map
|
|
8
|
+
|
|
8
9
|
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../lib/Slider.js"],"sourcesContent":["export * from './components/Slider/index';\n//# sourceMappingURL=Slider.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,kCAAkC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./components/SliderField/index"), exports);
|
|
7
|
+
//# sourceMappingURL=SliderField.js.map
|
|
8
|
+
|
|
8
9
|
//# sourceMappingURL=SliderField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../lib/SliderField.js"],"sourcesContent":["export * from './components/SliderField/index';\n//# sourceMappingURL=SliderField.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,uCAAuC"}
|
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "Slider", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>Slider
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const {
|
|
19
|
-
useSliderStyles_unstable: useCustomStyles
|
|
20
|
-
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
|
21
|
-
useCustomStyles(state);
|
|
22
|
-
return renderSlider_1.renderSlider_unstable(state);
|
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
+
const _useSlider = require("./useSlider");
|
|
12
|
+
const _renderSlider = require("./renderSlider");
|
|
13
|
+
const _useSliderStyles = require("./useSliderStyles");
|
|
14
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
|
15
|
+
const Slider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
|
+
const state = (0, _useSlider.useSlider_unstable)(props, ref);
|
|
17
|
+
(0, _useSliderStyles.useSliderStyles_unstable)(state);
|
|
18
|
+
const { useSliderStyles_unstable: useCustomStyles } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
|
|
19
|
+
useCustomStyles(state);
|
|
20
|
+
return (0, _renderSlider.renderSlider_unstable)(state);
|
|
23
21
|
});
|
|
24
|
-
|
|
22
|
+
Slider.displayName = 'Slider'; //# sourceMappingURL=Slider.js.map
|
|
23
|
+
|
|
25
24
|
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Slider/Slider.js"],"sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The Slider component allows users to quickly select a value by dragging a thumb across a rail.\n */\nexport const Slider = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useSlider_unstable(props, ref);\n useSliderStyles_unstable(state);\n const {\n useSliderStyles_unstable: useCustomStyles\n } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n//# sourceMappingURL=Slider.js.map"],"names":["Slider","React","forwardRef","props","ref","state","useSlider_unstable","useSliderStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderSlider_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;2BACY;8BACG;iCACG;qCACI;AAItC,MAAMA,SAAS,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAClE,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxCG,IAAAA,yCAAwB,EAACF;IACzB,MAAM,EACJE,0BAA0BC,gBAAe,EAC1C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,mCAAqB,EAACL;AAC/B;AACAL,OAAOW,WAAW,GAAG,UACrB,kCAAkC"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
5
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
6
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
7
|
+
//# sourceMappingURL=Slider.types.js.map
|
|
8
|
+
|
|
6
9
|
//# sourceMappingURL=Slider.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Slider/Slider.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Slider.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,wCAAwC"}
|