@fluentui/react-slider 9.5.5 → 9.5.6

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 (22) hide show
  1. package/CHANGELOG.md +16 -2
  2. package/lib/components/Slider/Slider.js +1 -0
  3. package/lib/components/Slider/Slider.js.map +1 -1
  4. package/lib/components/Slider/useSlider.js +1 -0
  5. package/lib/components/Slider/useSlider.js.map +1 -1
  6. package/lib/components/Slider/useSliderState.js +1 -0
  7. package/lib/components/Slider/useSliderState.js.map +1 -1
  8. package/lib/components/Slider/useSliderStyles.styles.js +2 -0
  9. package/lib/components/Slider/useSliderStyles.styles.js.map +1 -1
  10. package/lib/components/Slider/useSliderStyles.styles.raw.js +1 -0
  11. package/lib/components/Slider/useSliderStyles.styles.raw.js.map +1 -1
  12. package/lib-commonjs/components/Slider/Slider.js +1 -0
  13. package/lib-commonjs/components/Slider/Slider.js.map +1 -1
  14. package/lib-commonjs/components/Slider/useSlider.js +1 -0
  15. package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
  16. package/lib-commonjs/components/Slider/useSliderState.js +1 -0
  17. package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
  18. package/lib-commonjs/components/Slider/useSliderStyles.styles.js +1 -0
  19. package/lib-commonjs/components/Slider/useSliderStyles.styles.js.map +1 -1
  20. package/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js +1 -0
  21. package/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js.map +1 -1
  22. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,12 +1,26 @@
1
1
  # Change Log - @fluentui/react-slider
2
2
 
3
- This log was last generated on Mon, 08 Sep 2025 12:41:14 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 02 Oct 2025 15:07:23 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.5.6)
8
+
9
+ Thu, 02 Oct 2025 15:07:23 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.5.5..@fluentui/react-slider_v9.5.6)
11
+
12
+ ### Patches
13
+
14
+ - feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
15
+ - Bump @fluentui/react-field to v9.4.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
18
+ - Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
19
+ - Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
20
+
7
21
  ## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.5.5)
8
22
 
9
- Mon, 08 Sep 2025 12:41:14 GMT
23
+ Mon, 08 Sep 2025 12:50:34 GMT
10
24
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.5.4..@fluentui/react-slider_v9.5.5)
11
25
 
12
26
  ### Patches
package/lib/components/Slider/Slider.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  import { useSlider_unstable } from './useSlider';
3
4
  import { renderSlider_unstable } from './renderSlider';
package/lib/components/Slider/Slider.js.map CHANGED
@@ -1 +1 @@
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"],"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":["'use client';\n\nimport * 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"],"mappings":"AAAA;AAEA,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"}
package/lib/components/Slider/useSlider.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  import { useFieldControlProps_unstable } from '@fluentui/react-field';
3
4
  import { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
package/lib/components/Slider/useSlider.js.map CHANGED
@@ -1 +1 @@
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"],"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":["'use client';\n\nimport * 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"],"mappings":"AAAA;AAEA,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"}
package/lib/components/Slider/useSliderState.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
3
4
  import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
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): 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"}
1
+ {"version":3,"sources":["../src/components/Slider/useSliderState.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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/components/Slider/useSliderStyles.styles.js CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import { __styles, mergeClasses } from '@griffel/react';
2
4
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
5
  import { tokens } from '@fluentui/react-theme';
package/lib/components/Slider/useSliderStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","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","fsx8h0","B0wtrmc","B5laz1p","t","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 thumbPositionVar = `--fui-Slider__thumb--position`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`\n};\nconst { sliderDirectionVar, sliderInnerThumbRadiusVar, sliderProgressVar, sliderProgressColorVar, sliderRailSizeVar, sliderRailColorVar, sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar } = 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 [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '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(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 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(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`\n },\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight'\n }\n }\n },\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText'\n }\n },\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '-4px',\n right: '-4px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\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(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) 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(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`\n }\n },\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\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(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\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(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .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(${sliderThumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl'\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical'\n }\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":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","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","fsx8h0","B0wtrmc","B5laz1p","t","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["useSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 thumbPositionVar = `--fui-Slider__thumb--position`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`\n};\nconst { sliderDirectionVar, sliderInnerThumbRadiusVar, sliderProgressVar, sliderProgressColorVar, sliderRailSizeVar, sliderRailColorVar, sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar } = 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 [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '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(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 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(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`\n },\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight'\n }\n }\n },\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText'\n }\n },\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '-4px',\n right: '-4px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\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(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) 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(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`\n }\n },\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\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(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\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(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .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(${sliderThumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl'\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical'\n }\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/components/Slider/useSliderStyles.styles.raw.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { makeStyles, mergeClasses } from '@griffel/react';
2
3
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
4
  import { tokens } from '@fluentui/react-theme';
package/lib/components/Slider/useSliderStyles.styles.raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Slider/useSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbPositionVar = `--fui-Slider__thumb--position`;\n\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`,\n};\n\nconst {\n sliderDirectionVar,\n sliderInnerThumbRadiusVar,\n sliderProgressVar,\n sliderProgressColorVar,\n sliderRailSizeVar,\n sliderRailColorVar,\n sliderStepsPercentVar,\n sliderThumbColorVar,\n sliderThumbSizeVar,\n} = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`,\n },\n\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '-4px', right: '-4px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst 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(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\n },\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\n top: '-1px',\n bottom: '-1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst 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(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\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(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,\n },\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .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/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${sliderThumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl',\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical',\n },\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","useRootStyles","position","display","touchAction","alignItems","justifyItems","small","minHeight","medium","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","enabled","colorNeutralStrokeAccessible","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","disabled","colorNeutralForegroundDisabled","colorNeutralBackgroundDisabled","focusIndicatorHorizontal","selector","style","outlineOffset","top","bottom","left","right","focusIndicatorVertical","useRailStyles","borderRadius","borderRadiusXLarge","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","backgroundImage","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","colorNeutralBackground1","width","height","useThumbStyles","borderRadiusCircular","boxShadow","backgroundColor","boxSizing","border","colorNeutralStroke1","transform","useInputStyles","cursor","opacity","padding","margin","writingMode","direction","WebkitAppearance","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Slider/useSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbPositionVar = `--fui-Slider__thumb--position`;\n\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`,\n};\n\nconst {\n sliderDirectionVar,\n sliderInnerThumbRadiusVar,\n sliderProgressVar,\n sliderProgressColorVar,\n sliderRailSizeVar,\n sliderRailColorVar,\n sliderStepsPercentVar,\n sliderThumbColorVar,\n sliderThumbSizeVar,\n} = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`,\n },\n\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '-4px', right: '-4px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst 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(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\n },\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\n top: '-1px',\n bottom: '-1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst 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(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\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(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,\n },\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .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/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${sliderThumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl',\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical',\n },\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","useRootStyles","position","display","touchAction","alignItems","justifyItems","small","minHeight","medium","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","enabled","colorNeutralStrokeAccessible","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","disabled","colorNeutralForegroundDisabled","colorNeutralBackgroundDisabled","focusIndicatorHorizontal","selector","style","outlineOffset","top","bottom","left","right","focusIndicatorVertical","useRailStyles","borderRadius","borderRadiusXLarge","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","backgroundImage","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","colorNeutralBackground1","width","height","useThumbStyles","borderRadiusCircular","boxShadow","backgroundColor","boxSizing","border","colorNeutralStroke1","transform","useInputStyles","cursor","opacity","padding","margin","writingMode","direction","WebkitAppearance","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"mappings":"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"}
package/lib-commonjs/components/Slider/Slider.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
package/lib-commonjs/components/Slider/Slider.js.map CHANGED
@@ -1 +1 @@
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"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,eAAMA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,iCAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AACHJ,OAAOK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AACHJ,OAAOK,WAAW,GAAG"}
package/lib-commonjs/components/Slider/useSlider.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
package/lib-commonjs/components/Slider/useSlider.js.map CHANGED
@@ -1 +1 @@
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"],"mappings":";;;;+BAOaQ;;;;;;;iEAPU,QAAQ;4BACe,wBAAwB;gCACA,4BAA4B;gCAC1D,mBAAmB;8BAE5B,0BAA0B;AAElD,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;IAAK;IAEtE,MAAMC,cAAcV,6CAAAA,EAA0B;QAC5CO;QACAI,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,QAAQ,EACf,AACAC,IAAI,EACJC,EAFQ,GAEH,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,oBAAAA,CAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcb,YAAYM,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,oBAAAA,CAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIxB,qBAAAA,EAAM,WAAWM,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGE,YAAYgB,OAAO;gBACtBC,MAAM;gBACNC,QAAQd,WAAW,aAAae;YAClC;YACAL,aAAa;QACf;QACAN,MAAMf,oBAAAA,CAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,oBAAAA,CAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACR,GAAG,OAAGN,6BAAAA,EAAckB,MAAMJ,IAAI,CAACR,GAAG,MAAEH,4BAAAA;QAE/CD,uCAAAA,EAAwBgB,OAAOb;IAE/B,OAAOa;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/Slider/useSlider.ts"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;;;;;+BASaQ;;;;;;;iEAPU,QAAQ;4BACe,wBAAwB;gCACA,4BAA4B;gCAC1D,mBAAmB;8BAE5B,0BAA0B;AAElD,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;IAAK;IAEtE,MAAMC,kBAAcV,yCAAAA,EAA0B;QAC5CO;QACAI,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,QAAQ,EACf,AACAC,IAAI,EACJC,EAFQ,GAEH,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,oBAAAA,CAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcb,YAAYM,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,oBAAAA,CAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIxB,qBAAAA,EAAM,WAAWM,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGE,YAAYgB,OAAO;gBACtBC,MAAM;gBACNC,QAAQd,WAAW,aAAae;YAClC;YACAL,aAAa;QACf;QACAN,MAAMf,oBAAAA,CAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,oBAAAA,CAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACR,GAAG,OAAGN,6BAAAA,EAAckB,MAAMJ,IAAI,CAACR,GAAG,MAAEH,4BAAAA;QAE/CD,uCAAAA,EAAwBgB,OAAOb;IAE/B,OAAOa;AACT,EAAE"}
package/lib-commonjs/components/Slider/useSliderState.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
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): 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"}
1
+ {"version":3,"sources":["../src/components/Slider/useSliderState.tsx"],"sourcesContent":["'use client';\n\nimport * 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;;;;;;;;eAcac;;;;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,gBAAgBnB,yBAAAA,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,CAAAA,MAAMD,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/lib-commonjs/components/Slider/useSliderStyles.styles.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
package/lib-commonjs/components/Slider/useSliderStyles.styles.js.map CHANGED
@@ -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 thumbPositionVar = `--fui-Slider__thumb--position`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`\n};\nconst { sliderDirectionVar, sliderInnerThumbRadiusVar, sliderProgressVar, sliderProgressColorVar, sliderRailSizeVar, sliderRailColorVar, sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar } = 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 [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '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(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 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(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`\n },\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight'\n }\n }\n },\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText'\n }\n },\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '-4px',\n right: '-4px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\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(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) 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(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`\n }\n },\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\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(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\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(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .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(${sliderThumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl'\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical'\n }\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":["__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","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","fsx8h0","B0wtrmc","B5laz1p","t","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"mappings":"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"}
1
+ {"version":3,"sources":["useSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 thumbPositionVar = `--fui-Slider__thumb--position`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`\n};\nconst { sliderDirectionVar, sliderInnerThumbRadiusVar, sliderProgressVar, sliderProgressColorVar, sliderRailSizeVar, sliderRailColorVar, sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar } = 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 [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '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(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 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(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`\n },\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight'\n }\n }\n },\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText'\n }\n },\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '-4px',\n right: '-4px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\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(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) 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(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`\n }\n },\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\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(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\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(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .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(${sliderThumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl'\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical'\n }\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":["__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","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","fsx8h0","B0wtrmc","B5laz1p","t","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"mappings":"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"}
package/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
package/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Slider/useSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbPositionVar = `--fui-Slider__thumb--position`;\n\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`,\n};\n\nconst {\n sliderDirectionVar,\n sliderInnerThumbRadiusVar,\n sliderProgressVar,\n sliderProgressColorVar,\n sliderRailSizeVar,\n sliderRailColorVar,\n sliderStepsPercentVar,\n sliderThumbColorVar,\n sliderThumbSizeVar,\n} = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`,\n },\n\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '-4px', right: '-4px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst 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(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\n },\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\n top: '-1px',\n bottom: '-1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst 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(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\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(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,\n },\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .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/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${sliderThumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl',\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical',\n },\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","useRootStyles","position","display","touchAction","alignItems","justifyItems","small","minHeight","medium","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","enabled","colorNeutralStrokeAccessible","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","disabled","colorNeutralForegroundDisabled","colorNeutralBackgroundDisabled","focusIndicatorHorizontal","selector","style","outlineOffset","top","bottom","left","right","focusIndicatorVertical","useRailStyles","borderRadius","borderRadiusXLarge","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","backgroundImage","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","colorNeutralBackground1","width","height","useThumbStyles","borderRadiusCircular","boxShadow","backgroundColor","boxSizing","border","colorNeutralStroke1","transform","useInputStyles","cursor","opacity","padding","margin","writingMode","direction","WebkitAppearance","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Slider/useSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbPositionVar = `--fui-Slider__thumb--position`;\n\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`,\n};\n\nconst {\n sliderDirectionVar,\n sliderInnerThumbRadiusVar,\n sliderProgressVar,\n sliderProgressColorVar,\n sliderRailSizeVar,\n sliderRailColorVar,\n sliderStepsPercentVar,\n sliderThumbColorVar,\n sliderThumbSizeVar,\n} = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`,\n },\n\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '-4px', right: '-4px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst 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(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\n },\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\n top: '-1px',\n bottom: '-1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst 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(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\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(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,\n },\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .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/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${sliderThumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl',\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical',\n },\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","useRootStyles","position","display","touchAction","alignItems","justifyItems","small","minHeight","medium","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","enabled","colorNeutralStrokeAccessible","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","disabled","colorNeutralForegroundDisabled","colorNeutralBackgroundDisabled","focusIndicatorHorizontal","selector","style","outlineOffset","top","bottom","left","right","focusIndicatorVertical","useRailStyles","borderRadius","borderRadiusXLarge","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","backgroundImage","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","colorNeutralBackground1","width","height","useThumbStyles","borderRadiusCircular","boxShadow","backgroundColor","boxSizing","border","colorNeutralStroke1","transform","useInputStyles","cursor","opacity","padding","margin","writingMode","direction","WebkitAppearance","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-slider",
3
- "version": "9.5.5",
3
+ "version": "9.5.6",
4
4
  "description": "Fluent UI React Slider component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,12 +19,12 @@
19
19
  "@fluentui/scripts-api-extractor": "*"
20
20
  },
21
21
  "dependencies": {
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",
22
+ "@fluentui/react-field": "^9.4.6",
23
+ "@fluentui/react-jsx-runtime": "^9.2.1",
24
+ "@fluentui/react-shared-contexts": "^9.25.2",
25
+ "@fluentui/react-tabster": "^9.26.6",
26
26
  "@fluentui/react-theme": "^9.2.0",
27
- "@fluentui/react-utilities": "^9.24.1",
27
+ "@fluentui/react-utilities": "^9.25.0",
28
28
  "@griffel/react": "^1.5.22",
29
29
  "@swc/helpers": "^0.5.1"
30
30
  },