@fluentui/react-slider 9.1.84 → 9.1.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -3
- package/lib/components/Slider/useSliderState.js +6 -5
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib/components/Slider/useSliderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.js +6 -5
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-slider
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 06 Jun 2024 15:22:21 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.85](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.85)
|
|
8
|
+
|
|
9
|
+
Thu, 06 Jun 2024 15:22:21 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.84..@fluentui/react-slider_v9.1.85)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: ensure only state or defaultState is provided on useControllableState hook invocation ([PR #31461](https://github.com/microsoft/fluentui/pull/31461) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.1.67 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.39 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.21.5 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.1.84](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.84)
|
|
8
21
|
|
|
9
|
-
Thu, 23 May 2024
|
|
22
|
+
Thu, 23 May 2024 08:02:47 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.83..@fluentui/react-slider_v9.1.84)
|
|
11
24
|
|
|
12
25
|
### Patches
|
|
13
26
|
|
|
14
27
|
- chore: replace usage of .shorthands() in styles ([PR #31449](https://github.com/microsoft/fluentui/pull/31449) by olfedias@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/
|
|
28
|
+
- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
|
|
16
29
|
|
|
17
30
|
## [9.1.83](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.83)
|
|
18
31
|
|
|
@@ -7,14 +7,15 @@ const getPercent = (value, min, max)=>{
|
|
|
7
7
|
return max === min ? 0 : (value - min) / (max - min) * 100;
|
|
8
8
|
};
|
|
9
9
|
export const useSliderState_unstable = (state, props)=>{
|
|
10
|
-
const {
|
|
10
|
+
const { min = 0, max = 100, step } = props;
|
|
11
11
|
const { dir } = useFluent();
|
|
12
12
|
const [currentValue, setCurrentValue] = useControllableState({
|
|
13
|
-
state: value
|
|
14
|
-
defaultState:
|
|
13
|
+
state: props.value,
|
|
14
|
+
defaultState: props.defaultValue,
|
|
15
15
|
initialState: 0
|
|
16
16
|
});
|
|
17
|
-
const
|
|
17
|
+
const clampedValue = clamp(currentValue, min, max);
|
|
18
|
+
const valuePercent = getPercent(clampedValue, min, max);
|
|
18
19
|
const inputOnChange = state.input.onChange;
|
|
19
20
|
const propsOnChange = props.onChange;
|
|
20
21
|
const onChange = useEventCallback((ev)=>{
|
|
@@ -39,7 +40,7 @@ export const useSliderState_unstable = (state, props)=>{
|
|
|
39
40
|
...state.root.style
|
|
40
41
|
};
|
|
41
42
|
// Input Props
|
|
42
|
-
state.input.value =
|
|
43
|
+
state.input.value = clampedValue;
|
|
43
44
|
state.input.onChange = onChange;
|
|
44
45
|
return state;
|
|
45
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSliderState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles.styles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const {
|
|
1
|
+
{"version":3,"sources":["useSliderState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles.styles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { min = 0, max = 100, step } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: 0,\n });\n const clampedValue = clamp(currentValue, min, max);\n const valuePercent = getPercent(clampedValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","step","dir","currentValue","setCurrentValue","defaultState","defaultValue","initialState","clampedValue","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","rootVariables","vertical","root","style"],"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,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGb;IAChB,MAAM,CAACc,cAAcC,gBAAgB,GAAGlB,qBAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,eAAevB,MAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,WAAuDzB,iBAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,MAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,gBAAgB;QACpB,CAACzB,mBAAmB,EAAEM,MAAMoB,QAAQ,GAAG,SAASjB,QAAQ,QAAQ,UAAU;QAC1E,CAACX,sBAAsB,EAAEU,QAAQA,OAAO,IAAI,CAAC,EAAE,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAG;QAC/E,CAACJ,kBAAkB,EAAE,CAAC,EAAEiB,aAAa,CAAC,CAAC;IACzC;IAEA,aAAa;IACbV,MAAMqB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGnB,MAAMqB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdtB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbSizeVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderCSSVars","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","qhf8xq","mc9l5x","lpbzjs","Bt984gj","B7hvi0a","small","Bi64ftq","Ba19x4e","sshi5w","medium","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","enabled","B7wi8oa","B250r6j","Bpmy4es","Buw9y6v","Bq939m0","gjzr1t","tg7hqu","ypdvl1","Bw5jdd4","Bdjie01","Bvh9j6m","Bvsvvpo","disabled","focusIndicatorHorizontal","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","focusIndicatorVertical","d","p","h","a","m","f","i","useRailStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","Bvjb7m6","Bcmaq0h","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","Bbn5juq","Brdvuy1","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","E5pizo","De3pzq","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Brp00wb","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["useSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const sliderClassNames = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input'\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`\n};\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center'\n },\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px'\n },\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`\n },\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`\n },\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight'\n }\n }\n },\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText'\n }\n },\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '8px',\n right: '8px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '6px',\n bottom: '6px',\n left: '4px',\n right: '4px'\n }\n }\n })\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n borderRadius: tokens.borderRadiusXLarge,\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${sliderDirectionVar}),\n var(${progressColorVar}) 0%,\n var(${progressColorVar}) var(${sliderProgressVar}),\n var(${railColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`\n }\n }\n },\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`\n }\n },\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px'\n }\n }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n '::before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${sliderProgressVar})`\n }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0'\n },\n disabled: {\n cursor: 'default'\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical'\n }\n});\n/**\n * Apply styling to the Slider slots based on the state\n */ export const useSliderStyles_unstable = (state)=>{\n 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","thumbSizeVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderCSSVars","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","qhf8xq","mc9l5x","lpbzjs","Bt984gj","B7hvi0a","small","Bi64ftq","Ba19x4e","sshi5w","medium","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","enabled","B7wi8oa","B250r6j","Bpmy4es","Buw9y6v","Bq939m0","gjzr1t","tg7hqu","ypdvl1","Bw5jdd4","Bdjie01","Bvh9j6m","Bvsvvpo","disabled","focusIndicatorHorizontal","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","focusIndicatorVertical","d","p","h","a","m","f","i","useRailStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","Bvjb7m6","Bcmaq0h","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","Bbn5juq","Brdvuy1","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","E5pizo","De3pzq","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Brp00wb","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["useSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const sliderClassNames = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input'\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`\n};\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center'\n },\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px'\n },\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`\n },\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`\n },\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight'\n }\n }\n },\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText'\n }\n },\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '8px',\n right: '8px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '6px',\n bottom: '6px',\n left: '4px',\n right: '4px'\n }\n }\n })\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n borderRadius: tokens.borderRadiusXLarge,\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${sliderDirectionVar}),\n var(${progressColorVar}) 0%,\n var(${progressColorVar}) var(${sliderProgressVar}),\n var(${railColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`\n }\n }\n },\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`\n }\n },\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px'\n }\n }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n '::before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${sliderProgressVar})`\n }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0'\n },\n disabled: {\n cursor: 'default'\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical'\n }\n});\n/**\n * Apply styling to the Slider slots based on the state\n */ export const useSliderStyles_unstable = (state)=>{\n 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":[]}
|
|
@@ -18,14 +18,15 @@ const getPercent = (value, min, max)=>{
|
|
|
18
18
|
return max === min ? 0 : (value - min) / (max - min) * 100;
|
|
19
19
|
};
|
|
20
20
|
const useSliderState_unstable = (state, props)=>{
|
|
21
|
-
const {
|
|
21
|
+
const { min = 0, max = 100, step } = props;
|
|
22
22
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
23
23
|
const [currentValue, setCurrentValue] = (0, _reactutilities.useControllableState)({
|
|
24
|
-
state:
|
|
25
|
-
defaultState:
|
|
24
|
+
state: props.value,
|
|
25
|
+
defaultState: props.defaultValue,
|
|
26
26
|
initialState: 0
|
|
27
27
|
});
|
|
28
|
-
const
|
|
28
|
+
const clampedValue = (0, _reactutilities.clamp)(currentValue, min, max);
|
|
29
|
+
const valuePercent = getPercent(clampedValue, min, max);
|
|
29
30
|
const inputOnChange = state.input.onChange;
|
|
30
31
|
const propsOnChange = props.onChange;
|
|
31
32
|
const onChange = (0, _reactutilities.useEventCallback)((ev)=>{
|
|
@@ -50,7 +51,7 @@ const useSliderState_unstable = (state, props)=>{
|
|
|
50
51
|
...state.root.style
|
|
51
52
|
};
|
|
52
53
|
// Input Props
|
|
53
|
-
state.input.value =
|
|
54
|
+
state.input.value = clampedValue;
|
|
54
55
|
state.input.onChange = onChange;
|
|
55
56
|
return state;
|
|
56
57
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSliderState.js"],"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';\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\nconst getPercent = (value, min, max)=>{\n return max === min ? 0 : (value - min) / (max - min) * 100;\n};\nexport const useSliderState_unstable = (state, props)=>{\n const {
|
|
1
|
+
{"version":3,"sources":["useSliderState.js"],"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';\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\nconst getPercent = (value, min, max)=>{\n return max === min ? 0 : (value - min) / (max - min) * 100;\n};\nexport const useSliderState_unstable = (state, props)=>{\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 const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n const onChange = useEventCallback((ev)=>{\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, {\n value: newValue\n });\n }\n });\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`\n };\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style\n };\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = onChange;\n return state;\n};\n"],"names":["useSliderState_unstable","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","sliderCSSVars","getPercent","value","min","max","state","props","step","dir","useFluent","currentValue","setCurrentValue","useControllableState","defaultState","defaultValue","initialState","clampedValue","clamp","valuePercent","inputOnChange","input","onChange","propsOnChange","useEventCallback","ev","newValue","Number","target","rootVariables","vertical","root","style"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;gCACuC;qCACd;uCAClB;AAC9B,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGC,oCAAa;AACtF,MAAMC,aAAa,CAACC,OAAOC,KAAKC;IAC5B,OAAOA,QAAQD,MAAM,IAAI,AAACD,CAAAA,QAAQC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAK;AAC3D;AACO,MAAMP,0BAA0B,CAACS,OAAOC;IAC3C,MAAM,EAAEH,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEG,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGC,IAAAA,uCAAS;IACzB,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,IAAAA,oCAAoB,EAAC;QACzDP,OAAOC,MAAMJ,KAAK;QAClBW,cAAcP,MAAMQ,YAAY;QAChCC,cAAc;IAClB;IACA,MAAMC,eAAeC,IAAAA,qBAAK,EAACP,cAAcP,KAAKC;IAC9C,MAAMc,eAAejB,WAAWe,cAAcb,KAAKC;IACnD,MAAMe,gBAAgBd,MAAMe,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBhB,MAAMe,QAAQ;IACpC,MAAMA,WAAWE,IAAAA,gCAAgB,EAAC,CAACC;QAC/B,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACzB,KAAK;QACvCS,gBAAgBM,IAAAA,qBAAK,EAACQ,UAAUtB,KAAKC;QACrC,IAAIe,iBAAiBA,kBAAkBG,eAAe;YAClDH,cAAcK;QAClB,OAAO,IAAIF,eAAe;YACtBA,cAAcE,IAAI;gBACdtB,OAAOuB;YACX;QACJ;IACJ;IACA,MAAMG,gBAAgB;QAClB,CAAC7B,mBAAmB,EAAEM,MAAMwB,QAAQ,GAAG,SAASrB,QAAQ,QAAQ,UAAU;QAC1E,CAACX,sBAAsB,EAAEU,QAAQA,OAAO,IAAI,CAAC,EAAEA,OAAO,MAAOH,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAG;QAC7E,CAACL,kBAAkB,EAAE,CAAC,EAAEoB,aAAa,CAAC,CAAC;IAC3C;IACA,aAAa;IACbb,MAAMyB,IAAI,CAACC,KAAK,GAAG;QACf,GAAGH,aAAa;QAChB,GAAGvB,MAAMyB,IAAI,CAACC,KAAK;IACvB;IACA,cAAc;IACd1B,MAAMe,KAAK,CAAClB,KAAK,GAAGc;IACpBX,MAAMe,KAAK,CAACC,QAAQ,GAAGA;IACvB,OAAOhB;AACX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-slider",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.85",
|
|
4
4
|
"description": "Fluent UI React Slider component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
"@fluentui/scripts-tasks": "*"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@fluentui/react-field": "^9.1.
|
|
38
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
37
|
+
"@fluentui/react-field": "^9.1.67",
|
|
38
|
+
"@fluentui/react-jsx-runtime": "^9.0.39",
|
|
39
39
|
"@fluentui/react-shared-contexts": "^9.19.0",
|
|
40
|
-
"@fluentui/react-tabster": "^9.21.
|
|
40
|
+
"@fluentui/react-tabster": "^9.21.5",
|
|
41
41
|
"@fluentui/react-theme": "^9.1.19",
|
|
42
|
-
"@fluentui/react-utilities": "^9.18.
|
|
42
|
+
"@fluentui/react-utilities": "^9.18.10",
|
|
43
43
|
"@griffel/react": "^1.5.22",
|
|
44
44
|
"@swc/helpers": "^0.5.1"
|
|
45
45
|
},
|