@fluentui/react-slider 9.0.0-beta.17 → 9.0.0-beta.18

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.json CHANGED
@@ -2,7 +2,66 @@
2
2
  "name": "@fluentui/react-slider",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 26 May 2022 21:00:04 GMT",
5
+ "date": "Tue, 31 May 2022 21:26:40 GMT",
6
+ "tag": "@fluentui/react-slider_v9.0.0-beta.18",
7
+ "version": "9.0.0-beta.18",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "olfedias@microsoft.com",
12
+ "package": "@fluentui/react-slider",
13
+ "commit": "287cf6769bda0ca0ec7cd29b01a4a4481a488d92",
14
+ "comment": "updates to docs"
15
+ }
16
+ ],
17
+ "prerelease": [
18
+ {
19
+ "author": "olfedias@microsoft.com",
20
+ "package": "@fluentui/react-slider",
21
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
22
+ "comment": "chore: Update Griffel to latest version"
23
+ },
24
+ {
25
+ "author": "bernardo.sunderhus@gmail.com",
26
+ "package": "@fluentui/react-slider",
27
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
28
+ "comment": "updates import to react-shared-components"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-slider",
33
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
34
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui/react-slider",
39
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.13",
40
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
41
+ },
42
+ {
43
+ "author": "beachball",
44
+ "package": "@fluentui/react-slider",
45
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
46
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
47
+ },
48
+ {
49
+ "author": "beachball",
50
+ "package": "@fluentui/react-slider",
51
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
52
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
53
+ },
54
+ {
55
+ "author": "beachball",
56
+ "package": "@fluentui/react-slider",
57
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.5",
58
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
59
+ }
60
+ ]
61
+ }
62
+ },
63
+ {
64
+ "date": "Thu, 26 May 2022 21:01:28 GMT",
6
65
  "tag": "@fluentui/react-slider_v9.0.0-beta.17",
7
66
  "version": "9.0.0-beta.17",
8
67
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,27 @@
1
1
  # Change Log - @fluentui/react-slider
2
2
 
3
- This log was last generated on Thu, 26 May 2022 21:00:04 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 31 May 2022 21:26:40 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.18)
8
+
9
+ Tue, 31 May 2022 21:26:40 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.17..@fluentui/react-slider_v9.0.0-beta.18)
11
+
12
+ ### Changes
13
+
14
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
15
+ - updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
16
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
17
+ - Bump @fluentui/react-tabster to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
20
+ - Bump @fluentui/react-label to v9.0.0-rc.5 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
21
+
7
22
  ## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.17)
8
23
 
9
- Thu, 26 May 2022 21:00:04 GMT
24
+ Thu, 26 May 2022 21:01:28 GMT
10
25
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.16..@fluentui/react-slider_v9.0.0-beta.17)
11
26
 
12
27
  ### Changes
@@ -1,5 +1,5 @@
1
1
  import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
2
- import { useFluent } from '@fluentui/react-shared-contexts';
2
+ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
3
3
  import { sliderCSSVars } from './useSliderStyles';
4
4
  const {
5
5
  sliderStepsPercentVar,
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"AACA,SAAS,KAAT,EAAgB,oBAAhB,EAAsC,gBAAtC,QAA8D,2BAA9D;AACA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAGA,MAAM;AAAE,EAAA,qBAAF;AAAyB,EAAA,iBAAzB;AAA4C,EAAA;AAA5C,IAAmE,aAAzE;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;AAC7D,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIA,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAqB,KAArB,KAA2C;AAChF,QAAM;AAAE,IAAA,YAAY,GAAG,CAAjB;AAAoB,IAAA,GAAG,GAAG,CAA1B;AAA6B,IAAA,GAAG,GAAG,GAAnC;AAAwC,IAAA,IAAxC;AAA8C,IAAA;AAA9C,MAAwD,KAA9D;AACA,QAAM;AAAE,IAAA;AAAF,MAAU,SAAS,EAAzB;AACA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,KAAK,KAAK,SAAV,GAAsB,KAAK,CAAC,KAAD,EAAQ,GAAR,EAAa,GAAb,CAA3B,GAA+C,SADK;AAE3D,IAAA,YAAY,EAAE,KAAK,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAFwC;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAKA,QAAM,YAAY,GAAG,UAAU,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAA/B;AAEA,QAAM,aAAa,GAAG,KAAK,CAAC,KAAN,CAAY,QAAlC;AACA,QAAM,aAAa,GAAG,KAAK,CAAC,QAA5B;AAEA,QAAM,QAAQ,GAA+C,gBAAgB,CAAC,EAAE,IAAG;AACjF,UAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAvB;AACA,IAAA,eAAe,CAAC,KAAK,CAAC,QAAD,EAAW,GAAX,EAAgB,GAAhB,CAAN,CAAf;;AAEA,QAAI,aAAa,IAAI,aAAa,KAAK,aAAvC,EAAsD;AACpD,MAAA,aAAa,CAAC,EAAD,CAAb;AACD,KAFD,MAEO,IAAI,aAAJ,EAAmB;AACxB,MAAA,aAAa,CAAC,EAAD,EAAK;AAAE,QAAA,KAAK,EAAE;AAAT,OAAL,CAAb;AACD;AACF,GAT4E,CAA7E;AAWA,QAAM,aAAa,GAAG;AACpB,KAAC,kBAAD,GAAsB,KAAK,CAAC,QAAN,GAAiB,MAAjB,GAA0B,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,QADtD;AAEpB,KAAC,qBAAD,GAAyB,IAAI,IAAI,IAAI,GAAG,CAAf,GAAmB,GAAI,IAAI,GAAG,GAAR,IAAgB,GAAG,GAAG,GAAtB,CAA0B,GAAhD,GAAsD,EAF3D;AAGpB,KAAC,iBAAD,GAAqB,GAAG,YAAY;AAHhB,GAAtB,CAxBgF,CA8BhF;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,aADc;AAEjB,OAAG,KAAK,CAAC,IAAN,CAAW;AAFG,GAAnB,CA/BgF,CAoChF;;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;AAEA,SAAO,KAAP;AACD,CAzCM","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"AACA,SAAS,KAAT,EAAgB,oBAAhB,EAAsC,gBAAtC,QAA8D,2BAA9D;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAGA,MAAM;AAAE,EAAA,qBAAF;AAAyB,EAAA,iBAAzB;AAA4C,EAAA;AAA5C,IAAmE,aAAzE;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;AAC7D,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIA,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAqB,KAArB,KAA2C;AAChF,QAAM;AAAE,IAAA,YAAY,GAAG,CAAjB;AAAoB,IAAA,GAAG,GAAG,CAA1B;AAA6B,IAAA,GAAG,GAAG,GAAnC;AAAwC,IAAA,IAAxC;AAA8C,IAAA;AAA9C,MAAwD,KAA9D;AACA,QAAM;AAAE,IAAA;AAAF,MAAU,SAAS,EAAzB;AACA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,KAAK,KAAK,SAAV,GAAsB,KAAK,CAAC,KAAD,EAAQ,GAAR,EAAa,GAAb,CAA3B,GAA+C,SADK;AAE3D,IAAA,YAAY,EAAE,KAAK,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAFwC;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAKA,QAAM,YAAY,GAAG,UAAU,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAA/B;AAEA,QAAM,aAAa,GAAG,KAAK,CAAC,KAAN,CAAY,QAAlC;AACA,QAAM,aAAa,GAAG,KAAK,CAAC,QAA5B;AAEA,QAAM,QAAQ,GAA+C,gBAAgB,CAAC,EAAE,IAAG;AACjF,UAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAvB;AACA,IAAA,eAAe,CAAC,KAAK,CAAC,QAAD,EAAW,GAAX,EAAgB,GAAhB,CAAN,CAAf;;AAEA,QAAI,aAAa,IAAI,aAAa,KAAK,aAAvC,EAAsD;AACpD,MAAA,aAAa,CAAC,EAAD,CAAb;AACD,KAFD,MAEO,IAAI,aAAJ,EAAmB;AACxB,MAAA,aAAa,CAAC,EAAD,EAAK;AAAE,QAAA,KAAK,EAAE;AAAT,OAAL,CAAb;AACD;AACF,GAT4E,CAA7E;AAWA,QAAM,aAAa,GAAG;AACpB,KAAC,kBAAD,GAAsB,KAAK,CAAC,QAAN,GAAiB,MAAjB,GAA0B,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,QADtD;AAEpB,KAAC,qBAAD,GAAyB,IAAI,IAAI,IAAI,GAAG,CAAf,GAAmB,GAAI,IAAI,GAAG,GAAR,IAAgB,GAAG,GAAG,GAAtB,CAA0B,GAAhD,GAAsD,EAF3D;AAGpB,KAAC,iBAAD,GAAqB,GAAG,YAAY;AAHhB,GAAtB,CAxBgF,CA8BhF;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,aADc;AAEjB,OAAG,KAAK,CAAC,IAAN,CAAW;AAFG,GAAnB,CA/BgF,CAoChF;;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;AAEA,SAAO,KAAP;AACD,CAzCM","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -31,7 +31,7 @@ const useSliderState_unstable = (state, props) => {
31
31
  } = props;
32
32
  const {
33
33
  dir
34
- } = react_shared_contexts_1.useFluent();
34
+ } = react_shared_contexts_1.useFluent_unstable();
35
35
  const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
36
36
  state: value !== undefined ? react_utilities_1.clamp(value, min, max) : undefined,
37
37
  defaultState: react_utilities_1.clamp(defaultValue, min, max),
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-slider",
3
- "version": "9.0.0-beta.17",
3
+ "version": "9.0.0-beta.18",
4
4
  "description": "Fluent UI React Slider component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,16 +28,16 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.7",
32
- "@fluentui/react-label": "9.0.0-rc.4",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.8",
32
+ "@fluentui/react-label": "9.0.0-rc.5",
33
33
  "@fluentui/scripts": "^1.0.0"
34
34
  },
35
35
  "dependencies": {
36
- "@griffel/react": "1.0.5",
37
- "@fluentui/react-shared-contexts": "9.0.0-rc.9",
38
- "@fluentui/react-tabster": "9.0.0-rc.12",
36
+ "@griffel/react": "1.1.0",
37
+ "@fluentui/react-shared-contexts": "9.0.0-rc.10",
38
+ "@fluentui/react-tabster": "9.0.0-rc.13",
39
39
  "@fluentui/react-theme": "9.0.0-rc.9",
40
- "@fluentui/react-utilities": "9.0.0-rc.9",
40
+ "@fluentui/react-utilities": "9.0.0-rc.10",
41
41
  "tslib": "^2.1.0"
42
42
  },
43
43
  "peerDependencies": {