@fluentui/react-slider 9.5.4 → 9.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +23 -7
  2. package/dist/index.d.ts +2 -1
  3. package/lib/components/Slider/renderSlider.js.map +1 -1
  4. package/lib/components/Slider/useSliderState.js.map +1 -1
  5. package/lib-commonjs/components/Slider/renderSlider.js.map +1 -1
  6. package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
  7. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,21 +1,37 @@
1
1
  # Change Log - @fluentui/react-slider
2
2
 
3
- This log was last generated on Thu, 21 Aug 2025 12:20:22 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 08 Sep 2025 12:41:14 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.5.5)
8
+
9
+ Mon, 08 Sep 2025 12:41:14 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.5.4..@fluentui/react-slider_v9.5.5)
11
+
12
+ ### Patches
13
+
14
+ - chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
15
+ - chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
16
+ - fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
17
+ - Bump @fluentui/react-field to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
18
+ - Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
19
+ - Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
20
+ - Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
21
+ - Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
22
+
7
23
  ## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.5.4)
8
24
 
9
- Thu, 21 Aug 2025 12:20:22 GMT
25
+ Thu, 21 Aug 2025 12:25:19 GMT
10
26
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.5.3..@fluentui/react-slider_v9.5.4)
11
27
 
12
28
  ### Patches
13
29
 
14
- - Bump @fluentui/react-field to v9.4.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
15
- - Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
16
- - Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
17
- - Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
18
- - Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
30
+ - Bump @fluentui/react-field to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
31
+ - Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
32
+ - Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
33
+ - Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
34
+ - Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
19
35
 
20
36
  ## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.5.3)
21
37
 
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { ComponentProps } from '@fluentui/react-utilities';
2
2
  import type { ComponentState } from '@fluentui/react-utilities';
3
3
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
4
+ import type { JSXElement } from '@fluentui/react-utilities';
4
5
  import * as React_2 from 'react';
5
6
  import type { Slot } from '@fluentui/react-utilities';
6
7
  import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -8,7 +9,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
8
9
  /**
9
10
  * Render the final JSX of Slider
10
11
  */
11
- export declare const renderSlider_unstable: (state: SliderState) => JSX.Element;
12
+ export declare const renderSlider_unstable: (state: SliderState) => JSXElement;
12
13
 
13
14
  /**
14
15
  * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
package/lib/components/Slider/renderSlider.js.map CHANGED
@@ -1 +1 @@
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"],"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 { JSXElement } 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): JSXElement => {\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"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;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"}
package/lib/components/Slider/useSliderState.js.map CHANGED
@@ -1 +1 @@
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 stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderProgressVar]: `${valuePercent}%`,\n // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n ...(stepPercent !== undefined && {\n [sliderStepsPercentVar]: stepPercent,\n }),\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","stepPercent","undefined","rootVariables","vertical","root","style"],"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,cAAcjB,QAAQA,OAAO,IAAI,GAAG,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,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): SliderState => {\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 stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderProgressVar]: `${valuePercent}%`,\n // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n ...(stepPercent !== undefined && {\n [sliderStepsPercentVar]: stepPercent,\n }),\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","stepPercent","undefined","rootVariables","vertical","root","style"],"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,cAAcjB,QAAQA,OAAO,IAAI,GAAG,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
package/lib-commonjs/components/Slider/renderSlider.js.map CHANGED
@@ -1 +1 @@
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"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IAEzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;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 { JSXElement } 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): JSXElement => {\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"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IAEzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}
package/lib-commonjs/components/Slider/useSliderState.js.map CHANGED
@@ -1 +1 @@
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 stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderProgressVar]: `${valuePercent}%`,\n // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n ...(stepPercent !== undefined && {\n [sliderStepsPercentVar]: stepPercent,\n }),\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","stepPercent","undefined","rootVariables","vertical","root","style"],"mappings":";;;;+BAYac;;;;;;;iEAZU,QAAQ;gCAC+B,4BAA4B;qCAC1C,kCAAkC;uCACpD,2BAA2B;AAGzD,MAAM,EAAEP,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH,oCAAAA;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAMD,CAAAA,QAAQC,GAAAA,CAAE,IAAMC,MAAMD,GAAAA,CAAE,GAAM;AAC3D;AAEO,gCAAgC,CAACG,OAAoBC;IAC1D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAM,CAACc,cAAcC,gBAAgB,OAAGlB,oCAAAA,EAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,mBAAevB,qBAAAA,EAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,eAAuDzB,gCAAAA,EAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,oBAAgBnB,qBAAAA,EAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,cAAcjB,QAAQA,OAAO,IAAI,GAAIA,OAAO,MAAQJ,OAAMD,GAAAA,CAAE,CAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,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): SliderState => {\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 stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderProgressVar]: `${valuePercent}%`,\n // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n ...(stepPercent !== undefined && {\n [sliderStepsPercentVar]: stepPercent,\n }),\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","stepPercent","undefined","rootVariables","vertical","root","style"],"mappings":";;;;+BAYac;;;;;;;iEAZU,QAAQ;gCAC+B,4BAA4B;qCAC1C,kCAAkC;uCACpD,2BAA2B;AAGzD,MAAM,EAAEP,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH,oCAAAA;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAMD,CAAAA,QAAQC,GAAAA,CAAE,IAAMC,MAAMD,GAAAA,CAAE,GAAM;AAC3D;AAEO,gCAAgC,CAACG,OAAoBC;IAC1D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAM,CAACc,cAAcC,gBAAgB,OAAGlB,oCAAAA,EAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,mBAAevB,qBAAAA,EAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,eAAuDzB,gCAAAA,EAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,oBAAgBnB,qBAAAA,EAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,cAAcjB,QAAQA,OAAO,IAAI,GAAIA,OAAO,MAAQJ,OAAMD,GAAAA,CAAE,CAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-slider",
3
- "version": "9.5.4",
3
+ "version": "9.5.5",
4
4
  "description": "Fluent UI React Slider component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,20 +19,20 @@
19
19
  "@fluentui/scripts-api-extractor": "*"
20
20
  },
21
21
  "dependencies": {
22
- "@fluentui/react-field": "^9.4.4",
23
- "@fluentui/react-jsx-runtime": "^9.1.6",
24
- "@fluentui/react-shared-contexts": "^9.25.0",
25
- "@fluentui/react-tabster": "^9.26.4",
22
+ "@fluentui/react-field": "^9.4.5",
23
+ "@fluentui/react-jsx-runtime": "^9.2.0",
24
+ "@fluentui/react-shared-contexts": "^9.25.1",
25
+ "@fluentui/react-tabster": "^9.26.5",
26
26
  "@fluentui/react-theme": "^9.2.0",
27
- "@fluentui/react-utilities": "^9.24.0",
27
+ "@fluentui/react-utilities": "^9.24.1",
28
28
  "@griffel/react": "^1.5.22",
29
29
  "@swc/helpers": "^0.5.1"
30
30
  },
31
31
  "peerDependencies": {
32
- "@types/react": ">=16.14.0 <19.0.0",
33
- "@types/react-dom": ">=16.9.0 <19.0.0",
34
- "react": ">=16.14.0 <19.0.0",
35
- "react-dom": ">=16.14.0 <19.0.0"
32
+ "@types/react": ">=16.14.0 <20.0.0",
33
+ "@types/react-dom": ">=16.9.0 <20.0.0",
34
+ "react": ">=16.14.0 <20.0.0",
35
+ "react-dom": ">=16.14.0 <20.0.0"
36
36
  },
37
37
  "beachball": {
38
38
  "disallowedChangeTypes": [