@fluentui/react-slider 9.1.96 → 9.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -2
- package/lib/Slider.js.map +1 -1
- package/lib/components/Slider/Slider.js.map +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.map +1 -1
- package/lib/components/Slider/useSlider.js.map +1 -1
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib/components/Slider/useSliderStyles.styles.js +13 -9
- package/lib/components/Slider/useSliderStyles.styles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Slider.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.types.js.map +1 -1
- package/lib-commonjs/components/Slider/index.js.map +1 -1
- package/lib-commonjs/components/Slider/renderSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderStyles.styles.js +17 -9
- package/lib-commonjs/components/Slider/useSliderStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -22
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-slider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 18 Nov 2024 09:42:21 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.2.0)
|
|
8
|
+
|
|
9
|
+
Mon, 18 Nov 2024 09:42:21 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.97..@fluentui/react-slider_v9.2.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: adjust thumb positioning ([PR #32424](https://github.com/microsoft/fluentui/pull/32424) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.1.80 ([PR #33229](https://github.com/microsoft/fluentui/pull/33229) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.1.97](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.97)
|
|
18
|
+
|
|
19
|
+
Mon, 11 Nov 2024 10:00:55 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.96..@fluentui/react-slider_v9.1.97)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
|
|
25
|
+
- Bump @fluentui/react-field to v9.1.79 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.46 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
|
|
27
|
+
- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
|
|
28
|
+
- Bump @fluentui/react-tabster to v9.23.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
|
|
29
|
+
- Bump @fluentui/react-theme to v9.1.22 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.18.17 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.1.96](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.96)
|
|
8
33
|
|
|
9
|
-
Tue, 15 Oct 2024 17:
|
|
34
|
+
Tue, 15 Oct 2024 17:17:53 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.95..@fluentui/react-slider_v9.1.96)
|
|
11
36
|
|
|
12
37
|
### Patches
|
package/lib/Slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Slider.ts"],"sourcesContent":["export * from './components/Slider/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,4BAA4B"}
|
|
1
|
+
{"version":3,"sources":["../src/Slider.ts"],"sourcesContent":["export * from './components/Slider/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,4BAA4B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles.styles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('useSliderStyles_unstable')(state);\n\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"names":["React","useSlider_unstable","renderSlider_unstable","useSliderStyles_unstable","useCustomStyleHook_unstable","Slider","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AACHJ,OAAOK,WAAW,GAAG"}
|
|
1
|
+
{"version":3,"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.styles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('useSliderStyles_unstable')(state);\n\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"names":["React","useSlider_unstable","renderSlider_unstable","useSliderStyles_unstable","useCustomStyleHook_unstable","Slider","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AACHJ,OAAOK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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 // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
1
|
+
{"version":3,"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 // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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.styles';\n"],"names":["useSliderState_unstable","sliderClassNames","sliderCSSVars","useSliderStyles_unstable"],"rangeMappings":";;;;;","mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,SAASA,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,wBAAwB,QAAQ,2BAA2B"}
|
|
1
|
+
{"version":3,"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.styles';\n"],"names":["useSliderState_unstable","sliderClassNames","sliderCSSVars","useSliderStyles_unstable"],"rangeMappings":";;;;;","mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,SAASA,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,wBAAwB,QAAQ,2BAA2B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<SliderSlots>(state);\n\n return (\n <state.root>\n <state.input />\n <state.rail />\n <state.thumb />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSlider_unstable","state","root","input","rail","thumb"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Slider/renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<SliderSlots>(state);\n\n return (\n <state.root>\n <state.input />\n <state.rail />\n <state.thumb />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSlider_unstable","state","root","input","rail","thumb"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } 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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\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: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n orient: vertical ? 'vertical' : undefined,\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n useSliderState_unstable(state, props);\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useId","useMergedRefs","slot","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","supportsLabelFor","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type","orient","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAClG,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,SAASC,cAAc,QAAQ,0BAA0B;AAEzD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;IAAK;IAEtE,MAAMC,cAAcV,0BAA0B;QAC5CO;QACAI,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,QAAQ,EACf,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAAqB;QACzBP;QACAE;QACAD;QACAO,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,KAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcb,YAAYM,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,KAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAIxB,MAAM,WAAWM,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGE,YAAYgB,OAAO;gBACtBC,MAAM;gBACNC,QAAQd,WAAW,aAAae;YAClC;YACAL,aAAa;QACf;QACAN,MAAMf,KAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,KAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACR,GAAG,GAAGN,cAAckB,MAAMJ,IAAI,CAACR,GAAG,EAAEH;IAE/CD,wBAAwBgB,OAAOb;IAE/B,OAAOa;AACT,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Slider/useSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } 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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\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: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n orient: vertical ? 'vertical' : undefined,\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n useSliderState_unstable(state, props);\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useId","useMergedRefs","slot","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","supportsLabelFor","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type","orient","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAClG,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,SAASC,cAAc,QAAQ,0BAA0B;AAEzD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;IAAK;IAEtE,MAAMC,cAAcV,0BAA0B;QAC5CO;QACAI,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,QAAQ,EACf,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAAqB;QACzBP;QACAE;QACAD;QACAO,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,KAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcb,YAAYM,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,KAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAIxB,MAAM,WAAWM,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGE,YAAYgB,OAAO;gBACtBC,MAAM;gBACNC,QAAQd,WAAW,aAAae;YAClC;YACAL,aAAa;QACf;QACAN,MAAMf,KAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,KAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACR,GAAG,GAAGN,cAAckB,MAAMJ,IAAI,CAACR,GAAG,EAAEH;IAE/CD,wBAAwBgB,OAAOb;IAE/B,OAAOa;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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.styles';\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 'use no memo';\n\n const { min = 0, max = 100, step } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: 0,\n });\n const clampedValue = clamp(currentValue, min, max);\n const valuePercent = getPercent(clampedValue, 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 = clampedValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","step","dir","currentValue","setCurrentValue","defaultState","defaultValue","initialState","clampedValue","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","rootVariables","vertical","root","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,2BAA2B;AAGzD,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAI,AAAED,CAAAA,QAAQC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;AAC3D;AAEA,OAAO,MAAME,0BAA0B,CAACC,OAAoBC;IAC1D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGb;IAChB,MAAM,CAACc,cAAcC,gBAAgB,GAAGlB,qBAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,eAAevB,MAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,WAAuDzB,iBAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,MAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,gBAAgB;QACpB,CAACzB,mBAAmB,EAAEM,MAAMoB,QAAQ,GAAG,SAASjB,QAAQ,QAAQ,UAAU;QAC1E,CAACX,sBAAsB,EAAEU,QAAQA,OAAO,IAAI,CAAC,EAAE,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAG;QAC/E,CAACJ,kBAAkB,EAAE,CAAC,EAAEiB,aAAa,CAAC,CAAC;IACzC;IAEA,aAAa;IACbV,MAAMqB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGnB,MAAMqB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdtB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
|
|
1
|
+
{"version":3,"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.styles';\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 'use no memo';\n\n const { min = 0, max = 100, step } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: 0,\n });\n const clampedValue = clamp(currentValue, min, max);\n const valuePercent = getPercent(clampedValue, 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 = clampedValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","step","dir","currentValue","setCurrentValue","defaultState","defaultValue","initialState","clampedValue","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","rootVariables","vertical","root","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,2BAA2B;AAGzD,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAI,AAAED,CAAAA,QAAQC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;AAC3D;AAEA,OAAO,MAAME,0BAA0B,CAACC,OAAoBC;IAC1D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGb;IAChB,MAAM,CAACc,cAAcC,gBAAgB,GAAGlB,qBAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,eAAevB,MAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,WAAuDzB,iBAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,MAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,gBAAgB;QACpB,CAACzB,mBAAmB,EAAEM,MAAMoB,QAAQ,GAAG,SAASjB,QAAQ,QAAQ,UAAU;QAC1E,CAACX,sBAAsB,EAAEU,QAAQA,OAAO,IAAI,CAAC,EAAE,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAG;QAC/E,CAACJ,kBAAkB,EAAE,CAAC,EAAEiB,aAAa,CAAC,CAAC;IACzC;IAEA,aAAa;IACbV,MAAMqB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGnB,MAAMqB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdtB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
|
|
@@ -9,6 +9,8 @@ export const sliderClassNames = {
|
|
|
9
9
|
};
|
|
10
10
|
// Internal CSS variables
|
|
11
11
|
const thumbSizeVar = `--fui-Slider__thumb--size`;
|
|
12
|
+
const innerThumbRadiusVar = `--fui-Slider__inner-thumb--radius`;
|
|
13
|
+
const thumbPositionVar = `--fui-Slider__thumb--position`;
|
|
12
14
|
const railSizeVar = `--fui-Slider__rail--size`;
|
|
13
15
|
const railColorVar = `--fui-Slider__rail--color`;
|
|
14
16
|
const progressColorVar = `--fui-Slider__progress--color`;
|
|
@@ -36,11 +38,13 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
36
38
|
},
|
|
37
39
|
small: {
|
|
38
40
|
Bi64ftq: "f1agqo6f",
|
|
41
|
+
Bslxy2k: "f1mmvox9",
|
|
39
42
|
Ba19x4e: "f1i7ztpd",
|
|
40
43
|
sshi5w: "f1pha7fy"
|
|
41
44
|
},
|
|
42
45
|
medium: {
|
|
43
46
|
Bi64ftq: "f1a78h9h",
|
|
47
|
+
Bslxy2k: "fh1udnr",
|
|
44
48
|
Ba19x4e: "fuok0yf",
|
|
45
49
|
sshi5w: "f1nxs5xn"
|
|
46
50
|
},
|
|
@@ -161,7 +165,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
161
165
|
Bec0n69: ["femsgmt", "fm5xmfm"]
|
|
162
166
|
}
|
|
163
167
|
}, {
|
|
164
|
-
d: [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".f1sdsnyy{touch-action:none;}", ".f122n59{align-items:center;}", ".f1oiokrs{justify-items:center;}", ".f1agqo6f{--fui-Slider__thumb--size:16px;}", ".f1i7ztpd{--fui-Slider__rail--size:2px;}", ".f1pha7fy{min-height:24px;}", ".f1a78h9h{--fui-Slider__thumb--size:20px;}", ".fuok0yf{--fui-Slider__rail--size:4px;}", ".f1nxs5xn{min-height:32px;}", ".fyvtabn{min-width:120px;}", ".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f4t5rw1{grid-template-columns:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".f1pzv1zu{min-height:120px;}", ".fktlcaf{grid-template-rows:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f4l8x3l{--fui-Slider__rail--color:var(--colorNeutralStrokeAccessible);}", ".f671q34{--fui-Slider__progress--color:var(--colorCompoundBrandBackground);}", ".fvfzmw5{--fui-Slider__thumb--color:var(--colorCompoundBrandBackground);}", ".foojseg{--fui-Slider__thumb--color:var(--colorNeutralForegroundDisabled);}", ".f1lgdqhv{--fui-Slider__rail--color:var(--colorNeutralBackgroundDisabled);}", ".f1veetlj{--fui-Slider__progress--color:var(--colorNeutralForegroundDisabled);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".fmj8fco[data-fui-focus-within]:focus-within::after{border:2px solid var(--colorStrokeFocus2);}", {
|
|
168
|
+
d: [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".f1sdsnyy{touch-action:none;}", ".f122n59{align-items:center;}", ".f1oiokrs{justify-items:center;}", ".f1agqo6f{--fui-Slider__thumb--size:16px;}", ".f1mmvox9{--fui-Slider__inner-thumb--radius:5px;}", ".f1i7ztpd{--fui-Slider__rail--size:2px;}", ".f1pha7fy{min-height:24px;}", ".f1a78h9h{--fui-Slider__thumb--size:20px;}", ".fh1udnr{--fui-Slider__inner-thumb--radius:6px;}", ".fuok0yf{--fui-Slider__rail--size:4px;}", ".f1nxs5xn{min-height:32px;}", ".fyvtabn{min-width:120px;}", ".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f4t5rw1{grid-template-columns:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".f1pzv1zu{min-height:120px;}", ".fktlcaf{grid-template-rows:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}", ".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f4l8x3l{--fui-Slider__rail--color:var(--colorNeutralStrokeAccessible);}", ".f671q34{--fui-Slider__progress--color:var(--colorCompoundBrandBackground);}", ".fvfzmw5{--fui-Slider__thumb--color:var(--colorCompoundBrandBackground);}", ".foojseg{--fui-Slider__thumb--color:var(--colorNeutralForegroundDisabled);}", ".f1lgdqhv{--fui-Slider__rail--color:var(--colorNeutralBackgroundDisabled);}", ".f1veetlj{--fui-Slider__progress--color:var(--colorNeutralForegroundDisabled);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".fmj8fco[data-fui-focus-within]:focus-within::after{border:2px solid var(--colorStrokeFocus2);}", {
|
|
165
169
|
p: -2
|
|
166
170
|
}], [".f1iwowo3[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusMedium);}", {
|
|
167
171
|
p: -1
|
|
@@ -236,12 +240,12 @@ const useRailStyles = /*#__PURE__*/__styles({
|
|
|
236
240
|
Bqenvij: "f1l02sjl",
|
|
237
241
|
Ccq8qp: "f1rik0od",
|
|
238
242
|
Bciustq: "f14xwovp",
|
|
239
|
-
lawp4y: "
|
|
243
|
+
lawp4y: "fdehrcx"
|
|
240
244
|
}
|
|
241
245
|
}, {
|
|
242
246
|
d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
|
|
243
247
|
p: -1
|
|
244
|
-
}], ".f1aehjj5{pointer-events:none;}", ".faunodf{grid-row-start:2;}", ".f88nxoq{grid-row-end:2;}", ".fd46tj4{grid-column-start:2;}", ".f1e2fz10{grid-column-end:2;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".fizngqt{background-image:linear-gradient(\n var(--fui-Slider--direction),\n var(--fui-Slider__progress--color) 0%,\n var(--fui-Slider__progress--color) var(--fui-Slider--progress),\n var(--fui-Slider__rail--color) var(--fui-Slider--progress)\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".fzhtfnv::before{content:'';}", ".f1j7ml58::before{position:absolute;}", ".fx36ao7::before{background-image:repeating-linear-gradient(\n var(--fui-Slider--direction),\n #0000 0%,\n #0000 calc(var(--fui-Slider--steps-percent) - 1px),\n var(--colorNeutralBackground1) calc(var(--fui-Slider--steps-percent) - 1px),\n var(--colorNeutralBackground1) var(--fui-Slider--steps-percent)\n );}", ".fly5x3f{width:100%;}", ".f1cy86ho{height:var(--fui-Slider__rail--size);}", ".f1heqfse::before{left:-1px;}", ".fkh49vu::before{right:-1px;}", ".f16tdq4e::before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f1rik0od::before{width:var(--fui-Slider__rail--size);}", ".f14xwovp::before{top:-1px;}", ".
|
|
248
|
+
}], ".f1aehjj5{pointer-events:none;}", ".faunodf{grid-row-start:2;}", ".f88nxoq{grid-row-end:2;}", ".fd46tj4{grid-column-start:2;}", ".f1e2fz10{grid-column-end:2;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".fizngqt{background-image:linear-gradient(\n var(--fui-Slider--direction),\n var(--fui-Slider__progress--color) 0%,\n var(--fui-Slider__progress--color) var(--fui-Slider--progress),\n var(--fui-Slider__rail--color) var(--fui-Slider--progress)\n );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".fzhtfnv::before{content:'';}", ".f1j7ml58::before{position:absolute;}", ".fx36ao7::before{background-image:repeating-linear-gradient(\n var(--fui-Slider--direction),\n #0000 0%,\n #0000 calc(var(--fui-Slider--steps-percent) - 1px),\n var(--colorNeutralBackground1) calc(var(--fui-Slider--steps-percent) - 1px),\n var(--colorNeutralBackground1) var(--fui-Slider--steps-percent)\n );}", ".fly5x3f{width:100%;}", ".f1cy86ho{height:var(--fui-Slider__rail--size);}", ".f1heqfse::before{left:-1px;}", ".fkh49vu::before{right:-1px;}", ".f16tdq4e::before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f1rik0od::before{width:var(--fui-Slider__rail--size);}", ".f14xwovp::before{top:-1px;}", ".fdehrcx::before{bottom:-1px;}"],
|
|
245
249
|
m: [["@media (forced-colors: active){.fux3rle::before{background-image:repeating-linear-gradient(\n var(--fui-Slider--direction),\n #0000 0%,\n #0000 calc(var(--fui-Slider--steps-percent) - 1px),\n HighlightText calc(var(--fui-Slider--steps-percent) - 1px),\n HighlightText var(--fui-Slider--steps-percent)\n );}}", {
|
|
246
250
|
m: "(forced-colors: active)"
|
|
247
251
|
}]]
|
|
@@ -251,6 +255,7 @@ const useRailStyles = /*#__PURE__*/__styles({
|
|
|
251
255
|
*/
|
|
252
256
|
const useThumbStyles = /*#__PURE__*/__styles({
|
|
253
257
|
thumb: {
|
|
258
|
+
B2lzsem: "ftx3jue",
|
|
254
259
|
Ijaq50: "faunodf",
|
|
255
260
|
nk6f5a: "f88nxoq",
|
|
256
261
|
Br312pm: "fd46tj4",
|
|
@@ -319,14 +324,14 @@ const useThumbStyles = /*#__PURE__*/__styles({
|
|
|
319
324
|
},
|
|
320
325
|
horizontal: {
|
|
321
326
|
Bz10aip: ["f13gfj74", "f1nfknbn"],
|
|
322
|
-
oyh7mz: ["
|
|
327
|
+
oyh7mz: ["foa2ioz", "fjmilum"]
|
|
323
328
|
},
|
|
324
329
|
vertical: {
|
|
325
330
|
Bz10aip: "f5cv5a3",
|
|
326
|
-
B5kzvoi: "
|
|
331
|
+
B5kzvoi: "f1k2fpdo"
|
|
327
332
|
}
|
|
328
333
|
}, {
|
|
329
|
-
d: [".faunodf{grid-row-start:2;}", ".f88nxoq{grid-row-end:2;}", ".fd46tj4{grid-column-start:2;}", ".f1e2fz10{grid-column-end:2;}", ".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;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
|
|
334
|
+
d: [".ftx3jue{--fui-Slider__thumb--position:clamp(var(--fui-Slider__inner-thumb--radius), var(--fui-Slider--progress), calc(100% - var(--fui-Slider__inner-thumb--radius)));}", ".faunodf{grid-row-start:2;}", ".f88nxoq{grid-row-end:2;}", ".fd46tj4{grid-column-start:2;}", ".f1e2fz10{grid-column-end:2;}", ".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;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
|
|
330
335
|
p: -1
|
|
331
336
|
}], ".fof7hq0{box-shadow:0 0 0 calc(var(--fui-Slider__thumb--size) * .2) var(--colorNeutralBackground1) inset;}", ".foksa45{background-color:var(--fui-Slider__thumb--color);}", ".f1j7ml58::before{position:absolute;}", ".f14u7mkt::before{top:0px;}", ".f5zrw40::before{left:0px;}", ".f1ks5ppg::before{right:0px;}", ".fto0uou::before{bottom:0px;}", [".fielpny::before{border-radius:var(--borderRadiusCircular);}", {
|
|
332
337
|
p: -1
|
|
@@ -334,7 +339,7 @@ const useThumbStyles = /*#__PURE__*/__styles({
|
|
|
334
339
|
p: -2
|
|
335
340
|
}], [".f1pv9hn4::before{border:calc(var(--fui-Slider__thumb--size) * .05) solid var(--colorNeutralForegroundDisabled);}", {
|
|
336
341
|
p: -2
|
|
337
|
-
}], ".f13gfj74{transform:translateX(-50%);}", ".f1nfknbn{transform:translateX(50%);}", ".
|
|
342
|
+
}], ".f13gfj74{transform:translateX(-50%);}", ".f1nfknbn{transform:translateX(50%);}", ".foa2ioz{left:var(--fui-Slider__thumb--position);}", ".fjmilum{right:var(--fui-Slider__thumb--position);}", ".f5cv5a3{transform:translateY(50%);}", ".f1k2fpdo{bottom:var(--fui-Slider__thumb--position);}"]
|
|
338
343
|
});
|
|
339
344
|
/**
|
|
340
345
|
* Styles for the Input slot
|
|
@@ -393,5 +398,4 @@ export const useSliderStyles_unstable = state => {
|
|
|
393
398
|
state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
|
|
394
399
|
state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
|
|
395
400
|
return state;
|
|
396
|
-
};
|
|
397
|
-
//# sourceMappingURL=useSliderStyles.styles.js.map
|
|
401
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__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","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","focusIndicatorVertical","d","p","h","a","m","f","i","useRailStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","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","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Brp00wb","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["useSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const sliderClassNames = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input'\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`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`\n};\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center'\n },\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px'\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 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 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 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 focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '8px',\n right: '8px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '6px',\n bottom: '6px',\n left: '4px',\n right: '4px'\n }\n }\n })\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n 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 horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`\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 * Styles for the thumb slot\n */ const 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 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 borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n 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 * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n 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 * Apply styling to the Slider slots based on the state\n */ export const useSliderStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n state.root.className = mergeClasses(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);\n state.rail.className = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);\n state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD;AACA,MAAMC,YAAY,GAAG,2BAA2B;AAChD,MAAMC,WAAW,GAAG,0BAA0B;AAC9C,MAAMC,YAAY,GAAG,2BAA2B;AAChD,MAAMC,gBAAgB,GAAG,+BAA+B;AACxD,MAAMC,aAAa,GAAG,4BAA4B;AAClD,OAAO,MAAMC,aAAa,GAAG;EACzBC,kBAAkB,EAAE,yBAAyB;EAC7CC,iBAAiB,EAAE,wBAAwB;EAC3CC,qBAAqB,EAAE;AAC3B,CAAC;AACD,MAAM;EAAEF,kBAAkB;EAAEE,qBAAqB;EAAED;AAAkB,CAAC,GAAGF,aAAa;AACtF;AACA;AACA;AAAI,MAAMI,aAAa,gBAAGlB,QAAA;EAAAK,IAAA;IAAAc,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,UAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAN,MAAA;IAAAI,MAAA;IAAAC,OAAA;EAAA;EAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAF,OAAA;IAAAC,OAAA;IAAAM,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,wBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,sBAAA;IAAAxC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAoFzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGjG,QAAA;EAAAM,IAAA;IAAA4F,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAxF,MAAA;IAAAyF,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAvF,UAAA;IAAAwF,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAxF,QAAA;IAAAoF,MAAA;IAAAC,OAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAlC,CAAA;IAAAC,CAAA;EAAA;EAAAG,CAAA;IAAAA,CAAA;EAAA;AAAA,CA6DzB,CAAC;AACF;AACA;AACA;AAAI,MAAM+B,cAAc,gBAAG7H,QAAA;EAAAO,KAAA;IAAAiG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAxF,MAAA;IAAAkG,MAAA;IAAAC,OAAA;IAAAf,OAAA;IAAAQ,MAAA;IAAAH,OAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAwB,MAAA;IAAAC,MAAA;IAAAb,OAAA;IAAAS,OAAA;IAAAJ,MAAA;IAAAK,MAAA;IAAAJ,MAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAApB,MAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAvG,QAAA;IAAAuF,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAzH,UAAA;IAAA0H,OAAA;IAAAC,MAAA;EAAA;EAAAvH,QAAA;IAAAsH,OAAA;IAAAE,OAAA;EAAA;AAAA;EAAA/D,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAwC1B,CAAC;AACF;AACA;AACA;AAAI,MAAM+D,cAAc,gBAAG1J,QAAA;EAAAQ,KAAA;IAAAmJ,OAAA;IAAAC,MAAA;IAAApD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAkD,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAvH,QAAA;IAAA4G,OAAA;EAAA;EAAA9H,UAAA;IAAAyF,OAAA;IAAAD,MAAA;EAAA;EAAApF,QAAA;IAAAqF,OAAA;IAAAD,MAAA;IAAAkD,OAAA;EAAA;AAAA;EAAA7E,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAuB1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM6E,wBAAwB,GAAIC,KAAK,IAAG;EACjD,aAAa;;EACb,MAAMC,UAAU,GAAGxJ,aAAa,CAAC,CAAC;EAClC,MAAMyJ,UAAU,GAAG1E,aAAa,CAAC,CAAC;EAClC,MAAM2E,WAAW,GAAG/C,cAAc,CAAC,CAAC;EACpC,MAAMgD,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,UAAU,GAAGL,KAAK,CAACxI,QAAQ;EACjCwI,KAAK,CAACpK,IAAI,CAAC0K,SAAS,GAAG9K,YAAY,CAACG,gBAAgB,CAACC,IAAI,EAAEqK,UAAU,CAACrK,IAAI,EAAEyK,UAAU,GAAGJ,UAAU,CAACjF,sBAAsB,GAAGiF,UAAU,CAAC1H,wBAAwB,EAAE0H,UAAU,CAACD,KAAK,CAACO,IAAI,CAAC,EAAEF,UAAU,GAAGJ,UAAU,CAACzI,QAAQ,GAAGyI,UAAU,CAAC7I,UAAU,EAAE4I,KAAK,CAAC1H,QAAQ,GAAG2H,UAAU,CAAC3H,QAAQ,GAAG2H,UAAU,CAACxI,OAAO,EAAEuI,KAAK,CAACpK,IAAI,CAAC0K,SAAS,CAAC;EACpUN,KAAK,CAACnK,IAAI,CAACyK,SAAS,GAAG9K,YAAY,CAACG,gBAAgB,CAACE,IAAI,EAAEqK,UAAU,CAACrK,IAAI,EAAEwK,UAAU,GAAGH,UAAU,CAAC1I,QAAQ,GAAG0I,UAAU,CAAC9I,UAAU,EAAE4I,KAAK,CAACnK,IAAI,CAACyK,SAAS,CAAC;EAC3JN,KAAK,CAAClK,KAAK,CAACwK,SAAS,GAAG9K,YAAY,CAACG,gBAAgB,CAACG,KAAK,EAAEqK,WAAW,CAACrK,KAAK,EAAEuK,UAAU,GAAGF,WAAW,CAAC3I,QAAQ,GAAG2I,WAAW,CAAC/I,UAAU,EAAE4I,KAAK,CAAC1H,QAAQ,IAAI6H,WAAW,CAAC7H,QAAQ,EAAE0H,KAAK,CAAClK,KAAK,CAACwK,SAAS,CAAC;EAC1MN,KAAK,CAACjK,KAAK,CAACuK,SAAS,GAAG9K,YAAY,CAACG,gBAAgB,CAACI,KAAK,EAAEqK,WAAW,CAACrK,KAAK,EAAEsK,UAAU,GAAGD,WAAW,CAAC5I,QAAQ,GAAG4I,WAAW,CAAChJ,UAAU,EAAE4I,KAAK,CAAC1H,QAAQ,IAAI8H,WAAW,CAAC9H,QAAQ,EAAE0H,KAAK,CAACjK,KAAK,CAACuK,SAAS,CAAC;EAC1M,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbSizeVar","innerThumbRadiusVar","thumbPositionVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderCSSVars","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","qhf8xq","mc9l5x","lpbzjs","Bt984gj","B7hvi0a","small","Bi64ftq","Bslxy2k","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","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","focusIndicatorVertical","d","p","h","a","m","f","i","useRailStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","Bvjb7m6","Bcmaq0h","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","Bbn5juq","Brdvuy1","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","B2lzsem","E5pizo","De3pzq","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Brp00wb","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["useSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const sliderClassNames = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input'\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst innerThumbRadiusVar = `--fui-Slider__inner-thumb--radius`;\nconst thumbPositionVar = `--fui-Slider__thumb--position`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`\n};\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center'\n },\n small: {\n [thumbSizeVar]: '16px',\n [innerThumbRadiusVar]: '5px',\n [railSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [thumbSizeVar]: '20px',\n [innerThumbRadiusVar]: '6px',\n [railSizeVar]: '4px',\n minHeight: '32px'\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 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 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 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 focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '8px',\n right: '8px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '6px',\n bottom: '6px',\n left: '4px',\n right: '4px'\n }\n }\n })\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n 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 horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`\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 * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n // Ensure the thumb stays within the track boundaries.\n // When the value is at 0% or 100%, the distance from the track edge\n // to the thumb center equals the inner thumb radius.\n [`${thumbPositionVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,\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 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 borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${thumbPositionVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`\n }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n 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 * Apply styling to the Slider slots based on the state\n */ export const useSliderStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n state.root.className = mergeClasses(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);\n state.rail.className = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);\n state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"],"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable"],"rangeMappings":"","mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW"}
|
|
1
|
+
{"version":3,"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"],"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable"],"rangeMappings":"","mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Slider.ts"],"sourcesContent":["export * from './components/Slider/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
1
|
+
{"version":3,"sources":["../src/Slider.ts"],"sourcesContent":["export * from './components/Slider/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles.styles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('useSliderStyles_unstable')(state);\n\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"names":["Slider","React","forwardRef","props","ref","state","useSlider_unstable","useSliderStyles_unstable","useCustomStyleHook_unstable","renderSlider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2BACY;8BACG;uCACG;qCAGG;AAKrC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC/B;AACAL,OAAOU,WAAW,GAAG"}
|
|
1
|
+
{"version":3,"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.styles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('useSliderStyles_unstable')(state);\n\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"names":["Slider","React","forwardRef","props","ref","state","useSlider_unstable","useSliderStyles_unstable","useCustomStyleHook_unstable","renderSlider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2BACY;8BACG;uCACG;qCAGG;AAKrC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC/B;AACAL,OAAOU,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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 // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
1
|
+
{"version":3,"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 // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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.styles';\n"],"names":["sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAK2BA,aAAa;eAAbA,oCAAa;;IAA/BC,gBAAgB;eAAhBA,uCAAgB;;IADhBC,uBAAuB;eAAvBA,uCAAuB;;IACUC,wBAAwB;eAAxBA,+CAAwB;;;;uBALpD;uBACA;uBACA;uBACA;gCAC0B;uCACkC"}
|
|
1
|
+
{"version":3,"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.styles';\n"],"names":["sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAK2BA,aAAa;eAAbA,oCAAa;;IAA/BC,gBAAgB;eAAhBA,uCAAgB;;IADhBC,uBAAuB;eAAvBA,uCAAuB;;IACUC,wBAAwB;eAAxBA,+CAAwB;;;;uBALpD;uBACA;uBACA;uBACA;gCAC0B;uCACkC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<SliderSlots>(state);\n\n return (\n <state.root>\n <state.input />\n <state.rail />\n <state.thumb />\n </state.root>\n );\n};\n"],"names":["renderSlider_unstable","state","assertSlots","_jsxs","root","_jsx","input","rail","thumb"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IAEzB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,KAAK,EAAA,CAAA;0BACZD,IAAAA,eAAA,EAACJ,MAAMM,IAAI,EAAA,CAAA;0BACXF,IAAAA,eAAA,EAACJ,MAAMO,KAAK,EAAA,CAAA;;;AAGlB"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Slider/renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<SliderSlots>(state);\n\n return (\n <state.root>\n <state.input />\n <state.rail />\n <state.thumb />\n </state.root>\n );\n};\n"],"names":["renderSlider_unstable","state","assertSlots","_jsxs","root","_jsx","input","rail","thumb"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IAEzB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,KAAK,EAAA,CAAA;0BACZD,IAAAA,eAAA,EAACJ,MAAMM,IAAI,EAAA,CAAA;0BACXF,IAAAA,eAAA,EAACJ,MAAMO,KAAK,EAAA,CAAA;;;AAGlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } 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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\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: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n orient: vertical ? 'vertical' : undefined,\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n useSliderState_unstable(state, props);\n\n return state;\n};\n"],"names":["useSlider_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","slot","always","defaultProps","elementType","id","useId","primary","type","orient","undefined","useMergedRefs","useFocusWithin","useSliderState_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;4BACuB;gCACwB;gCAC9B;8BAET;AAExB,MAAMA,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAAAA,EAA8BF,OAAO;QAAEG,kBAAkB;IAAK;IAEtE,MAAMC,cAAcC,IAAAA,yCAAAA,EAA0B;QAC5CL;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,QAAQ,EAEfC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAAqB;QACzBP;QACAE;QACAD;QACAO,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMM,oBAAAA,CAAKC,MAAM,CAACP,MAAM;YACtBQ,cAAcf,YAAYO,IAAI;YAC9BS,aAAa;QACf;QACAR,OAAOK,oBAAAA,CAAKC,MAAM,CAACN,OAAO;YACxBO,cAAc;gBACZE,IAAIC,IAAAA,qBAAAA,EAAM,WAAWtB,MAAMqB,EAAE;gBAC7BpB;gBACA,GAAGG,YAAYmB,OAAO;gBACtBC,MAAM;gBACNC,QAAQhB,WAAW,aAAaiB;YAClC;YACAN,aAAa;QACf;QACAP,MAAMI,oBAAAA,CAAKC,MAAM,CAACL,MAAM;YAAEO,aAAa;QAAM;QAC7CN,OAAOG,oBAAAA,CAAKC,MAAM,CAACJ,OAAO;YAAEM,aAAa;QAAM;IACjD;IAEAL,MAAMJ,IAAI,CAACV,GAAG,GAAG0B,IAAAA,6BAAAA,EAAcZ,MAAMJ,IAAI,CAACV,GAAG,EAAE2B,IAAAA,4BAAAA;IAE/CC,IAAAA,uCAAAA,EAAwBd,OAAOf;IAE/B,OAAOe;AACT"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Slider/useSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } 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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\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: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n orient: vertical ? 'vertical' : undefined,\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n useSliderState_unstable(state, props);\n\n return state;\n};\n"],"names":["useSlider_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","slot","always","defaultProps","elementType","id","useId","primary","type","orient","undefined","useMergedRefs","useFocusWithin","useSliderState_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;4BACuB;gCACwB;gCAC9B;8BAET;AAExB,MAAMA,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAAAA,EAA8BF,OAAO;QAAEG,kBAAkB;IAAK;IAEtE,MAAMC,cAAcC,IAAAA,yCAAAA,EAA0B;QAC5CL;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,QAAQ,EAEfC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAAqB;QACzBP;QACAE;QACAD;QACAO,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMM,oBAAAA,CAAKC,MAAM,CAACP,MAAM;YACtBQ,cAAcf,YAAYO,IAAI;YAC9BS,aAAa;QACf;QACAR,OAAOK,oBAAAA,CAAKC,MAAM,CAACN,OAAO;YACxBO,cAAc;gBACZE,IAAIC,IAAAA,qBAAAA,EAAM,WAAWtB,MAAMqB,EAAE;gBAC7BpB;gBACA,GAAGG,YAAYmB,OAAO;gBACtBC,MAAM;gBACNC,QAAQhB,WAAW,aAAaiB;YAClC;YACAN,aAAa;QACf;QACAP,MAAMI,oBAAAA,CAAKC,MAAM,CAACL,MAAM;YAAEO,aAAa;QAAM;QAC7CN,OAAOG,oBAAAA,CAAKC,MAAM,CAACJ,OAAO;YAAEM,aAAa;QAAM;IACjD;IAEAL,MAAMJ,IAAI,CAACV,GAAG,GAAG0B,IAAAA,6BAAAA,EAAcZ,MAAMJ,IAAI,CAACV,GAAG,EAAE2B,IAAAA,4BAAAA;IAE/CC,IAAAA,uCAAAA,EAAwBd,OAAOf;IAE/B,OAAOe;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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.styles';\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 'use no memo';\n\n const { min = 0, max = 100, step } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: 0,\n });\n const clampedValue = clamp(currentValue, min, max);\n const valuePercent = getPercent(clampedValue, 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 = clampedValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"names":["useSliderState_unstable","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","sliderCSSVars","getPercent","value","min","max","state","props","step","dir","useFluent","currentValue","setCurrentValue","useControllableState","defaultState","defaultValue","initialState","clampedValue","clamp","valuePercent","inputOnChange","input","onChange","propsOnChange","useEventCallback","ev","newValue","Number","target","rootVariables","vertical","root","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;gCACuC;qCACd;uCAClB;AAG9B,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGC,oCAAAA;AAEzE,MAAMC,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAI,AAAED,CAAAA,QAAQC,GAAAA,IAAQC,CAAAA,MAAMD,GAAAA,IAAQ;AAC3D;AAEO,MAAMP,0BAA0B,CAACS,OAAoBC;IAC1D;IAEA,MAAM,EAAEH,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEG,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAChB,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC3DP,OAAOC,MAAMJ,KAAK;QAClBW,cAAcP,MAAMQ,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,eAAeC,IAAAA,qBAAAA,EAAMP,cAAcP,KAAKC;IAC9C,MAAMc,eAAejB,WAAWe,cAAcb,KAAKC;IAEnD,MAAMe,gBAAgBd,MAAMe,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBhB,MAAMe,QAAQ;IAEpC,MAAMA,WAAuDE,IAAAA,gCAAAA,EAAiBC,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACzB,KAAK;QACvCS,gBAAgBM,IAAAA,qBAAAA,EAAMQ,UAAUtB,KAAKC;QAErC,IAAIe,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcK;QAChB,OAAO,IAAIF,eAAe;YACxBA,cAAcE,IAAI;gBAAEtB,OAAOuB;YAAS;QACtC;IACF;IAEA,MAAMG,gBAAgB;QACpB,CAAC7B,mBAAmB,EAAEM,MAAMwB,QAAQ,GAAG,SAASrB,QAAQ,QAAQ,UAAU;QAC1E,CAACX,sBAAsB,EAAEU,QAAQA,OAAO,IAAI,CAAC,EAAEA,OAAQ,MAAQH,CAAAA,MAAMD,GAAAA,EAAK,CAAC,CAAC,GAAG;QAC/E,CAACL,kBAAkB,EAAE,CAAC,EAAEoB,aAAa,CAAC,CAAC;IACzC;IAEA,aAAa;IACbb,MAAMyB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGvB,MAAMyB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACd1B,MAAMe,KAAK,CAAClB,KAAK,GAAGc;IACpBX,MAAMe,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOhB;AACT"}
|
|
1
|
+
{"version":3,"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.styles';\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 'use no memo';\n\n const { min = 0, max = 100, step } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: 0,\n });\n const clampedValue = clamp(currentValue, min, max);\n const valuePercent = getPercent(clampedValue, 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 = clampedValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"names":["useSliderState_unstable","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","sliderCSSVars","getPercent","value","min","max","state","props","step","dir","useFluent","currentValue","setCurrentValue","useControllableState","defaultState","defaultValue","initialState","clampedValue","clamp","valuePercent","inputOnChange","input","onChange","propsOnChange","useEventCallback","ev","newValue","Number","target","rootVariables","vertical","root","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;gCACuC;qCACd;uCAClB;AAG9B,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGC,oCAAAA;AAEzE,MAAMC,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAI,AAAED,CAAAA,QAAQC,GAAAA,IAAQC,CAAAA,MAAMD,GAAAA,IAAQ;AAC3D;AAEO,MAAMP,0BAA0B,CAACS,OAAoBC;IAC1D;IAEA,MAAM,EAAEH,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEG,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAChB,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC3DP,OAAOC,MAAMJ,KAAK;QAClBW,cAAcP,MAAMQ,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,eAAeC,IAAAA,qBAAAA,EAAMP,cAAcP,KAAKC;IAC9C,MAAMc,eAAejB,WAAWe,cAAcb,KAAKC;IAEnD,MAAMe,gBAAgBd,MAAMe,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBhB,MAAMe,QAAQ;IAEpC,MAAMA,WAAuDE,IAAAA,gCAAAA,EAAiBC,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACzB,KAAK;QACvCS,gBAAgBM,IAAAA,qBAAAA,EAAMQ,UAAUtB,KAAKC;QAErC,IAAIe,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcK;QAChB,OAAO,IAAIF,eAAe;YACxBA,cAAcE,IAAI;gBAAEtB,OAAOuB;YAAS;QACtC;IACF;IAEA,MAAMG,gBAAgB;QACpB,CAAC7B,mBAAmB,EAAEM,MAAMwB,QAAQ,GAAG,SAASrB,QAAQ,QAAQ,UAAU;QAC1E,CAACX,sBAAsB,EAAEU,QAAQA,OAAO,IAAI,CAAC,EAAEA,OAAQ,MAAQH,CAAAA,MAAMD,GAAAA,EAAK,CAAC,CAAC,GAAG;QAC/E,CAACL,kBAAkB,EAAE,CAAC,EAAEoB,aAAa,CAAC,CAAC;IACzC;IAEA,aAAa;IACbb,MAAMyB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGvB,MAAMyB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACd1B,MAAMe,KAAK,CAAClB,KAAK,GAAGc;IACpBX,MAAMe,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOhB;AACT"}
|
|
@@ -28,6 +28,8 @@ const sliderClassNames = {
|
|
|
28
28
|
};
|
|
29
29
|
// Internal CSS variables
|
|
30
30
|
const thumbSizeVar = `--fui-Slider__thumb--size`;
|
|
31
|
+
const innerThumbRadiusVar = `--fui-Slider__inner-thumb--radius`;
|
|
32
|
+
const thumbPositionVar = `--fui-Slider__thumb--position`;
|
|
31
33
|
const railSizeVar = `--fui-Slider__rail--size`;
|
|
32
34
|
const railColorVar = `--fui-Slider__rail--color`;
|
|
33
35
|
const progressColorVar = `--fui-Slider__progress--color`;
|
|
@@ -50,11 +52,13 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC
|
|
|
50
52
|
},
|
|
51
53
|
small: {
|
|
52
54
|
Bi64ftq: "f1agqo6f",
|
|
55
|
+
Bslxy2k: "f1mmvox9",
|
|
53
56
|
Ba19x4e: "f1i7ztpd",
|
|
54
57
|
sshi5w: "f1pha7fy"
|
|
55
58
|
},
|
|
56
59
|
medium: {
|
|
57
60
|
Bi64ftq: "f1a78h9h",
|
|
61
|
+
Bslxy2k: "fh1udnr",
|
|
58
62
|
Ba19x4e: "fuok0yf",
|
|
59
63
|
sshi5w: "f1nxs5xn"
|
|
60
64
|
},
|
|
@@ -218,9 +222,11 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC
|
|
|
218
222
|
".f122n59{align-items:center;}",
|
|
219
223
|
".f1oiokrs{justify-items:center;}",
|
|
220
224
|
".f1agqo6f{--fui-Slider__thumb--size:16px;}",
|
|
225
|
+
".f1mmvox9{--fui-Slider__inner-thumb--radius:5px;}",
|
|
221
226
|
".f1i7ztpd{--fui-Slider__rail--size:2px;}",
|
|
222
227
|
".f1pha7fy{min-height:24px;}",
|
|
223
228
|
".f1a78h9h{--fui-Slider__thumb--size:20px;}",
|
|
229
|
+
".fh1udnr{--fui-Slider__inner-thumb--radius:6px;}",
|
|
224
230
|
".fuok0yf{--fui-Slider__rail--size:4px;}",
|
|
225
231
|
".f1nxs5xn{min-height:32px;}",
|
|
226
232
|
".fyvtabn{min-width:120px;}",
|
|
@@ -402,7 +408,7 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC
|
|
|
402
408
|
Bqenvij: "f1l02sjl",
|
|
403
409
|
Ccq8qp: "f1rik0od",
|
|
404
410
|
Bciustq: "f14xwovp",
|
|
405
|
-
lawp4y: "
|
|
411
|
+
lawp4y: "fdehrcx"
|
|
406
412
|
}
|
|
407
413
|
}, {
|
|
408
414
|
d: [
|
|
@@ -435,7 +441,7 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC
|
|
|
435
441
|
".f1l02sjl{height:100%;}",
|
|
436
442
|
".f1rik0od::before{width:var(--fui-Slider__rail--size);}",
|
|
437
443
|
".f14xwovp::before{top:-1px;}",
|
|
438
|
-
".
|
|
444
|
+
".fdehrcx::before{bottom:-1px;}"
|
|
439
445
|
],
|
|
440
446
|
m: [
|
|
441
447
|
[
|
|
@@ -450,6 +456,7 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC
|
|
|
450
456
|
* Styles for the thumb slot
|
|
451
457
|
*/ const useThumbStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
452
458
|
thumb: {
|
|
459
|
+
B2lzsem: "ftx3jue",
|
|
453
460
|
Ijaq50: "faunodf",
|
|
454
461
|
nk6f5a: "f88nxoq",
|
|
455
462
|
Br312pm: "fd46tj4",
|
|
@@ -528,16 +535,17 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC
|
|
|
528
535
|
"f1nfknbn"
|
|
529
536
|
],
|
|
530
537
|
oyh7mz: [
|
|
531
|
-
"
|
|
532
|
-
"
|
|
538
|
+
"foa2ioz",
|
|
539
|
+
"fjmilum"
|
|
533
540
|
]
|
|
534
541
|
},
|
|
535
542
|
vertical: {
|
|
536
543
|
Bz10aip: "f5cv5a3",
|
|
537
|
-
B5kzvoi: "
|
|
544
|
+
B5kzvoi: "f1k2fpdo"
|
|
538
545
|
}
|
|
539
546
|
}, {
|
|
540
547
|
d: [
|
|
548
|
+
".ftx3jue{--fui-Slider__thumb--position:clamp(var(--fui-Slider__inner-thumb--radius), var(--fui-Slider--progress), calc(100% - var(--fui-Slider__inner-thumb--radius)));}",
|
|
541
549
|
".faunodf{grid-row-start:2;}",
|
|
542
550
|
".f88nxoq{grid-row-end:2;}",
|
|
543
551
|
".fd46tj4{grid-column-start:2;}",
|
|
@@ -583,10 +591,10 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC
|
|
|
583
591
|
],
|
|
584
592
|
".f13gfj74{transform:translateX(-50%);}",
|
|
585
593
|
".f1nfknbn{transform:translateX(50%);}",
|
|
586
|
-
".
|
|
587
|
-
".
|
|
594
|
+
".foa2ioz{left:var(--fui-Slider__thumb--position);}",
|
|
595
|
+
".fjmilum{right:var(--fui-Slider__thumb--position);}",
|
|
588
596
|
".f5cv5a3{transform:translateY(50%);}",
|
|
589
|
-
".
|
|
597
|
+
".f1k2fpdo{bottom:var(--fui-Slider__thumb--position);}"
|
|
590
598
|
]
|
|
591
599
|
});
|
|
592
600
|
/**
|
|
@@ -662,4 +670,4 @@ const useSliderStyles_unstable = (state)=>{
|
|
|
662
670
|
state.thumb.className = (0, _react.mergeClasses)(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
|
|
663
671
|
state.input.className = (0, _react.mergeClasses)(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
|
|
664
672
|
return state;
|
|
665
|
-
};
|
|
673
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const sliderClassNames = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input'\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`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`\n};\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center'\n },\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px'\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 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 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 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 focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '8px',\n right: '8px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '6px',\n bottom: '6px',\n left: '4px',\n right: '4px'\n }\n }\n })\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n 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 horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`\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 * Styles for the thumb slot\n */ const 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 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 borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n 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 * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n 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 * Apply styling to the Slider slots based on the state\n */ export const useSliderStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n state.root.className = mergeClasses(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);\n state.rail.className = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);\n state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"names":["sliderCSSVars","sliderClassNames","useSliderStyles_unstable","root","rail","thumb","input","thumbSizeVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","__styles","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","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","focusIndicatorVertical","d","p","h","a","m","f","i","useRailStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","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","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Brp00wb","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const sliderClassNames = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input'\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst innerThumbRadiusVar = `--fui-Slider__inner-thumb--radius`;\nconst thumbPositionVar = `--fui-Slider__thumb--position`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`\n};\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center'\n },\n small: {\n [thumbSizeVar]: '16px',\n [innerThumbRadiusVar]: '5px',\n [railSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [thumbSizeVar]: '20px',\n [innerThumbRadiusVar]: '6px',\n [railSizeVar]: '4px',\n minHeight: '32px'\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 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 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 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 focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '8px',\n right: '8px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '6px',\n bottom: '6px',\n left: '4px',\n right: '4px'\n }\n }\n })\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n 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 horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`\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 * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n // Ensure the thumb stays within the track boundaries.\n // When the value is at 0% or 100%, the distance from the track edge\n // to the thumb center equals the inner thumb radius.\n [`${thumbPositionVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,\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 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 borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${thumbPositionVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`\n }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n 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 * Apply styling to the Slider slots based on the state\n */ export const useSliderStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n state.root.className = mergeClasses(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);\n state.rail.className = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);\n state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"names":["sliderCSSVars","sliderClassNames","useSliderStyles_unstable","root","rail","thumb","input","thumbSizeVar","innerThumbRadiusVar","thumbPositionVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","__styles","qhf8xq","mc9l5x","lpbzjs","Bt984gj","B7hvi0a","small","Bi64ftq","Bslxy2k","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","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","focusIndicatorVertical","d","p","h","a","m","f","i","useRailStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","Bvjb7m6","Bcmaq0h","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","Bbn5juq","Brdvuy1","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","B2lzsem","E5pizo","De3pzq","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Brp00wb","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"],"names":["Slider","renderSlider_unstable","sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,MAAM;eAANA,cAAM;;IACNC,qBAAqB;eAArBA,6BAAqB;;IAErBC,aAAa;eAAbA,qBAAa;;IADbC,gBAAgB;eAAhBA,wBAAgB;;IAEhBC,uBAAuB;eAAvBA,+BAAuB;;IACvBC,wBAAwB;eAAxBA,gCAAwB;;IACxBC,kBAAkB;eAAlBA,0BAAkB;;;wBACb"}
|
|
1
|
+
{"version":3,"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"],"names":["Slider","renderSlider_unstable","sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,MAAM;eAANA,cAAM;;IACNC,qBAAqB;eAArBA,6BAAqB;;IAErBC,aAAa;eAAbA,qBAAa;;IADbC,gBAAgB;eAAhBA,wBAAgB;;IAEhBC,uBAAuB;eAAvBA,+BAAuB;;IACvBC,wBAAwB;eAAxBA,gCAAwB;;IACxBC,kBAAkB;eAAlBA,0BAAkB;;;wBACb"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-slider",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0",
|
|
4
4
|
"description": "Fluent UI React Slider component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -11,34 +11,20 @@
|
|
|
11
11
|
"url": "https://github.com/microsoft/fluentui"
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
|
-
"scripts": {
|
|
15
|
-
"build": "just-scripts build",
|
|
16
|
-
"bundle-size": "monosize measure",
|
|
17
|
-
"clean": "just-scripts clean",
|
|
18
|
-
"code-style": "just-scripts code-style",
|
|
19
|
-
"just": "just-scripts",
|
|
20
|
-
"lint": "just-scripts lint",
|
|
21
|
-
"start": "yarn storybook",
|
|
22
|
-
"test": "jest --passWithNoTests",
|
|
23
|
-
"storybook": "yarn --cwd ../stories storybook",
|
|
24
|
-
"type-check": "just-scripts type-check",
|
|
25
|
-
"generate-api": "just-scripts generate-api"
|
|
26
|
-
},
|
|
27
14
|
"devDependencies": {
|
|
28
15
|
"@fluentui/eslint-plugin": "*",
|
|
29
16
|
"@fluentui/react-conformance": "*",
|
|
30
17
|
"@fluentui/react-conformance-griffel": "*",
|
|
31
18
|
"@fluentui/react-label": "*",
|
|
32
|
-
"@fluentui/scripts-api-extractor": "*"
|
|
33
|
-
"@fluentui/scripts-tasks": "*"
|
|
19
|
+
"@fluentui/scripts-api-extractor": "*"
|
|
34
20
|
},
|
|
35
21
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-field": "^9.1.
|
|
37
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
38
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
39
|
-
"@fluentui/react-tabster": "^9.
|
|
40
|
-
"@fluentui/react-theme": "^9.1.
|
|
41
|
-
"@fluentui/react-utilities": "^9.18.
|
|
22
|
+
"@fluentui/react-field": "^9.1.80",
|
|
23
|
+
"@fluentui/react-jsx-runtime": "^9.0.46",
|
|
24
|
+
"@fluentui/react-shared-contexts": "^9.21.0",
|
|
25
|
+
"@fluentui/react-tabster": "^9.23.0",
|
|
26
|
+
"@fluentui/react-theme": "^9.1.22",
|
|
27
|
+
"@fluentui/react-utilities": "^9.18.17",
|
|
42
28
|
"@griffel/react": "^1.5.22",
|
|
43
29
|
"@swc/helpers": "^0.5.1"
|
|
44
30
|
},
|