@fluentui/react-slider 9.0.14 → 9.0.16

package/CHANGELOG.json

@@ -2,7 +2,99 @@
   "name": "@fluentui/react-slider",
   "entries": [
     {
-      "date": "Wed, 21 Dec 2022 10:17:13 GMT",
+      "date": "Mon, 09 Jan 2023 14:31:49 GMT",
+      "tag": "@fluentui/react-slider_v9.0.16",
+      "version": "9.0.16",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.14",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.3.6",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-utilities to v9.4.0",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-label to v9.0.16",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Jan 2023 01:40:27 GMT",
+      "tag": "@fluentui/react-slider_v9.0.15",
+      "version": "9.0.15",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
+            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
+            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
+          }
+        ],
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.13",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.3.5",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-utilities to v9.3.1",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-label to v9.0.15",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Dec 2022 10:20:31 GMT",
       "tag": "@fluentui/react-slider_v9.0.14",
       "version": "9.0.14",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Wed, 21 Dec 2022 10:17:13 GMT and should not be manually modified.
+This log was last generated on Mon, 09 Jan 2023 14:31:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.16)
+
+Mon, 09 Jan 2023 14:31:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.15..@fluentui/react-slider_v9.0.16)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.0.0-alpha.14 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-tabster to v9.3.6 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-label to v9.0.16 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+
+## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.15)
+
+Wed, 04 Jan 2023 01:40:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.14..@fluentui/react-slider_v9.0.15)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.13 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-label to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
 ## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.14)
 
-Wed, 21 Dec 2022 10:17:13 GMT 
+Wed, 21 Dec 2022 10:20:31 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.13..@fluentui/react-slider_v9.0.14)
 
 ### Patches

package/lib/components/Slider/Slider.js

@@ -5,7 +5,6 @@ import { useSliderStyles_unstable } from './useSliderStyles';
 /**
  * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
  */
-
 export const Slider = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useSlider_unstable(props, ref);
   useSliderStyles_unstable(state);

package/lib/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-slider/src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EAEA,OAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,wBAAwB,QAAQ,mBAAmB;AAI5D;;;AAGA,OAAO,MAAMC,MAAM,gBAAqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGP,kBAAkB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE5CJ,wBAAwB,CAACK,KAAK,CAAC;EAE/B,OAAON,qBAAqB,CAACM,KAAK,CAAC;AACrC,CAAC,CAAC;AACFJ,MAAM,CAACK,WAAW,GAAG,QAAQ","names":["React","useSlider_unstable","renderSlider_unstable","useSliderStyles_unstable","Slider","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-slider/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';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"]}

package/lib/components/Slider/renderSlider.js

@@ -3,16 +3,19 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Slider
  */
-
 export const renderSlider_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
-  }), /*#__PURE__*/React.createElement(slots.rail, { ...slotProps.rail
-  }), /*#__PURE__*/React.createElement(slots.thumb, { ...slotProps.thumb
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.input, {
+    ...slotProps.input
+  }), /*#__PURE__*/React.createElement(slots.rail, {
+    ...slotProps.rail
+  }), /*#__PURE__*/React.createElement(slots.thumb, {
+    ...slotProps.thumb
   }));
 };
 //# sourceMappingURL=renderSlider.js.map

package/lib/components/Slider/renderSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-slider/src/components/Slider/renderSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHF,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderState) => {\n  const { slots, slotProps } = getSlots<SliderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.rail {...slotProps.rail} />\n      <slots.thumb {...slotProps.thumb} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EAEzD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,eACpCP,oBAACI,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,eAClCR,oBAACI,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,CACzB;AAEjB,CAAC","names":["React","getSlots","renderSlider_unstable","state","slots","slotProps","root","input","rail","thumb"],"sourceRoot":"../src/","sources":["packages/react-components/react-slider/src/components/Slider/renderSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderState) => {\n  const { slots, slotProps } = getSlots<SliderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.rail {...slotProps.rail} />\n      <slots.thumb {...slotProps.thumb} />\n    </slots.root>\n  );\n};\n"]}

package/lib/components/Slider/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-slider/src/components/Slider/useSlider.ts"],"names":[],"mappings":"AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,QAAmE,2BAAnE;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAEA,SAAS,cAAT,QAA+B,yBAA/B;AAEA,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;EAHyB,CAAD,CAA7C;EAMA,MAAM;IACJ,QADI;IAEJ,QAFI;IAGJ,IAAI,GAAG,QAHH;IAIJ;IACA,IALI;IAMJ,KANI;IAOJ,IAPI;IAQJ;EARI,IASF,KATJ;EAWA,MAAM,KAAK,GAAgB;IACzB,QADyB;IAEzB,IAFyB;IAGzB,QAHyB;IAIzB,UAAU,EAAE;MACV,KAAK,EAAE,OADG;MAEV,IAAI,EAAE,KAFI;MAGV,IAAI,EAAE,KAHI;MAIV,KAAK,EAAE;IAJG,CAJa;IAUzB,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE;QACZ,GAAG,EAAE,cAAc,EADP;QAEZ,GAAG,WAAW,CAAC;MAFH;IAFa,CAAP,CAVG;IAiBzB,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAC7B,QAAQ,EAAE,IADmB;MAE7B,YAAY,EAAE;QACZ,EAAE,EAAE,KAAK,CAAC,SAAD,EAAY,KAAK,CAAC,EAAlB,CADG;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC,OAHH;QAIZ,IAAI,EAAE,OAJM;QAKZ,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;MALpB;IAFe,CAAR,CAjBE;IA2BzB,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAAE,QAAQ,EAAE;IAAZ,CAAP,CA3BG;IA4BzB,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAAE,QAAQ,EAAE;IAAZ,CAAR;EA5BE,CAA3B;EA+BA,uBAAuB,CAAC,KAAD,EAAQ,KAAR,CAAvB;EAEA,OAAO,KAAP;AACD,CApDM","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useId } 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  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: resolveShorthand(root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin<HTMLDivElement>(),\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n        orient: vertical ? 'vertical' : undefined,\n      },\n    }),\n    rail: resolveShorthand(rail, { required: true }),\n    thumb: resolveShorthand(thumb, { required: true }),\n  };\n\n  useSliderState_unstable(state, props);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,yBAAyB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAC9F,SAASC,uBAAuB,QAAQ,kBAAkB;AAE1D,SAASC,cAAc,QAAQ,yBAAyB;AAExD,OAAO,MAAMC,kBAAkB,GAAG,CAACC,KAAkB,EAAEC,GAAgC,KAAiB;EACtG,MAAMC,WAAW,GAAGR,yBAAyB,CAAC;IAC5CM,KAAK;IACLG,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM;GACvC,CAAC;EAEF,MAAM;IACJC,QAAQ;IACRC,QAAQ;IACRC,IAAI,GAAG,QAAQ;IACf;IACAC,IAAI;IACJC,KAAK;IACLC,IAAI;IACJC;EAAK,CACN,GAAGX,KAAK;EAET,MAAMY,KAAK,GAAgB;IACzBP,QAAQ;IACRE,IAAI;IACJD,QAAQ;IACRO,UAAU,EAAE;MACVJ,KAAK,EAAE,OAAO;MACdC,IAAI,EAAE,KAAK;MACXF,IAAI,EAAE,KAAK;MACXG,KAAK,EAAE;KACR;IACDH,IAAI,EAAEb,gBAAgB,CAACa,IAAI,EAAE;MAC3BM,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZd,GAAG,EAAEH,cAAc,EAAkB;QACrC,GAAGI,WAAW,CAACM;;KAElB,CAAC;IACFC,KAAK,EAAEd,gBAAgB,CAACc,KAAK,EAAE;MAC7BK,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,EAAE,EAAEpB,KAAK,CAAC,SAAS,EAAEI,KAAK,CAACgB,EAAE,CAAC;QAC9Bf,GAAG;QACH,GAAGC,WAAW,CAACe,OAAO;QACtBC,IAAI,EAAE,OAAO;QACbC,MAAM,EAAEb,QAAQ,GAAG,UAAU,GAAGc;;KAEnC,CAAC;IACFV,IAAI,EAAEf,gBAAgB,CAACe,IAAI,EAAE;MAAEI,QAAQ,EAAE;IAAI,CAAE,CAAC;IAChDH,KAAK,EAAEhB,gBAAgB,CAACgB,KAAK,EAAE;MAAEG,QAAQ,EAAE;IAAI,CAAE;GAClD;EAEDjB,uBAAuB,CAACe,KAAK,EAAEZ,KAAK,CAAC;EAErC,OAAOY,KAAK;AACd,CAAC","names":["getPartitionedNativeProps","resolveShorthand","useId","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","size","root","input","rail","thumb","state","components","required","defaultProps","id","primary","type","orient","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-slider/src/components/Slider/useSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useId } 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  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: resolveShorthand(root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin<HTMLDivElement>(),\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n        orient: vertical ? 'vertical' : undefined,\n      },\n    }),\n    rail: resolveShorthand(rail, { required: true }),\n    thumb: resolveShorthand(thumb, { required: true }),\n  };\n\n  useSliderState_unstable(state, props);\n\n  return state;\n};\n"]}

package/lib/components/Slider/useSliderState.js

@@ -6,11 +6,9 @@ const {
   sliderProgressVar,
   sliderDirectionVar
 } = sliderCSSVars;
-
 const getPercent = (value, min, max) => {
   return max === min ? 0 : (value - min) / (max - min) * 100;
 };
-
 export const useSliderState_unstable = (state, props) => {
   const {
     defaultValue = 0,
@@ -33,7 +31,6 @@ export const useSliderState_unstable = (state, props) => {
   const onChange = useEventCallback(ev => {
     const newValue = Number(ev.target.value);
     setCurrentValue(clamp(newValue, min, max));
-
     if (inputOnChange && inputOnChange !== propsOnChange) {
       inputOnChange(ev);
     } else if (propsOnChange) {
@@ -46,12 +43,13 @@ export const useSliderState_unstable = (state, props) => {
     [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
     [sliderStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
     [sliderProgressVar]: `${valuePercent}%`
-  }; // Root props
-
-  state.root.style = { ...rootVariables,
+  };
+  // Root props
+  state.root.style = {
+    ...rootVariables,
     ...state.root.style
-  }; // Input Props
-
+  };
+  // Input Props
   state.input.value = currentValue;
   state.input.onChange = onChange;
   return state;

package/lib/components/Slider/useSliderState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-slider/src/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;EAAE,qBAAF;EAAyB,iBAAzB;EAA4C;AAA5C,IAAmE,aAAzE;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;EAC7D,OAAO,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;EAChF,MAAM;IAAE,YAAY,GAAG,CAAjB;IAAoB,GAAG,GAAG,CAA1B;IAA6B,GAAG,GAAG,GAAnC;IAAwC,IAAxC;IAA8C;EAA9C,IAAwD,KAA9D;EACA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EACA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,KAAK,KAAK,SAAV,GAAsB,KAAK,CAAC,KAAD,EAAQ,GAAR,EAAa,GAAb,CAA3B,GAA+C,SADK;IAE3D,YAAY,EAAE,KAAK,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAFwC;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAKA,MAAM,YAAY,GAAG,UAAU,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAA/B;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAN,CAAY,QAAlC;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,QAA5B;EAEA,MAAM,QAAQ,GAA+C,gBAAgB,CAAC,EAAE,IAAG;IACjF,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAvB;IACA,eAAe,CAAC,KAAK,CAAC,QAAD,EAAW,GAAX,EAAgB,GAAhB,CAAN,CAAf;;IAEA,IAAI,aAAa,IAAI,aAAa,KAAK,aAAvC,EAAsD;MACpD,aAAa,CAAC,EAAD,CAAb;IACD,CAFD,MAEO,IAAI,aAAJ,EAAmB;MACxB,aAAa,CAAC,EAAD,EAAK;QAAE,KAAK,EAAE;MAAT,CAAL,CAAb;IACD;EACF,CAT4E,CAA7E;EAWA,MAAM,aAAa,GAAG;IACpB,CAAC,kBAAD,GAAsB,KAAK,CAAC,QAAN,GAAiB,MAAjB,GAA0B,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,QADtD;IAEpB,CAAC,qBAAD,GAAyB,IAAI,IAAI,IAAI,GAAG,CAAf,GAAmB,GAAI,IAAI,GAAG,GAAR,IAAgB,GAAG,GAAG,GAAtB,CAA0B,GAAhD,GAAsD,EAF3D;IAGpB,CAAC,iBAAD,GAAqB,GAAG,YAAY;EAHhB,CAAtB,CAxBgF,CA8BhF;;EACA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,aADc;IAEjB,GAAG,KAAK,CAAC,IAAN,CAAW;EAFG,CAAnB,CA/BgF,CAoChF;;EACA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;EAEA,OAAO,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/"}
+{"version":3,"mappings":"AACA,SAASA,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACzF,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,aAAa,QAAQ,mBAAmB;AAGjD,MAAM;EAAEC,qBAAqB;EAAEC,iBAAiB;EAAEC;AAAkB,CAAE,GAAGH,aAAa;AAEtF,MAAMI,UAAU,GAAG,CAACC,KAAa,EAAEC,GAAW,EAAEC,GAAW,KAAI;EAC7D,OAAOA,GAAG,KAAKD,GAAG,GAAG,CAAC,GAAI,CAACD,KAAK,GAAGC,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;AAC9D,CAAC;AAED,OAAO,MAAME,uBAAuB,GAAG,CAACC,KAAkB,EAAEC,KAAkB,KAAI;EAChF,MAAM;IAAEC,YAAY,GAAG,CAAC;IAAEL,GAAG,GAAG,CAAC;IAAEC,GAAG,GAAG,GAAG;IAAEK,IAAI;IAAEP;EAAK,CAAE,GAAGK,KAAK;EACnE,MAAM;IAAEG;EAAG,CAAE,GAAGd,SAAS,EAAE;EAC3B,MAAM,CAACe,YAAY,EAAEC,eAAe,CAAC,GAAGnB,oBAAoB,CAAC;IAC3Da,KAAK,EAAEJ,KAAK,KAAKW,SAAS,GAAGrB,KAAK,CAACU,KAAK,EAAEC,GAAG,EAAEC,GAAG,CAAC,GAAGS,SAAS;IAC/DC,YAAY,EAAEtB,KAAK,CAACgB,YAAY,EAAEL,GAAG,EAAEC,GAAG,CAAC;IAC3CW,YAAY,EAAE;GACf,CAAC;EACF,MAAMC,YAAY,GAAGf,UAAU,CAACU,YAAY,EAAER,GAAG,EAAEC,GAAG,CAAC;EAEvD,MAAMa,aAAa,GAAGX,KAAK,CAACY,KAAK,CAACC,QAAQ;EAC1C,MAAMC,aAAa,GAAGb,KAAK,CAACY,QAAQ;EAEpC,MAAMA,QAAQ,GAA+CzB,gBAAgB,CAAC2B,EAAE,IAAG;IACjF,MAAMC,QAAQ,GAAGC,MAAM,CAACF,EAAE,CAACG,MAAM,CAACtB,KAAK,CAAC;IACxCU,eAAe,CAACpB,KAAK,CAAC8B,QAAQ,EAAEnB,GAAG,EAAEC,GAAG,CAAC,CAAC;IAE1C,IAAIa,aAAa,IAAIA,aAAa,KAAKG,aAAa,EAAE;MACpDH,aAAa,CAACI,EAAE,CAAC;KAClB,MAAM,IAAID,aAAa,EAAE;MACxBA,aAAa,CAACC,EAAE,EAAE;QAAEnB,KAAK,EAAEoB;MAAQ,CAAE,CAAC;;EAE1C,CAAC,CAAC;EAEF,MAAMG,aAAa,GAAG;IACpB,CAACzB,kBAAkB,GAAGM,KAAK,CAACoB,QAAQ,GAAG,MAAM,GAAGhB,GAAG,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ;IAClF,CAACZ,qBAAqB,GAAGW,IAAI,IAAIA,IAAI,GAAG,CAAC,GAAG,GAAIA,IAAI,GAAG,GAAG,IAAKL,GAAG,GAAGD,GAAG,CAAC,GAAG,GAAG,EAAE;IACjF,CAACJ,iBAAiB,GAAG,GAAGiB,YAAY;GACrC;EAED;EACAV,KAAK,CAACqB,IAAI,CAACC,KAAK,GAAG;IACjB,GAAGH,aAAa;IAChB,GAAGnB,KAAK,CAACqB,IAAI,CAACC;GACf;EAED;EACAtB,KAAK,CAACY,KAAK,CAAChB,KAAK,GAAGS,YAAY;EAChCL,KAAK,CAACY,KAAK,CAACC,QAAQ,GAAGA,QAAQ;EAE/B,OAAOb,KAAK;AACd,CAAC","names":["clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","defaultValue","step","dir","currentValue","setCurrentValue","undefined","defaultState","initialState","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","rootVariables","vertical","root","style"],"sourceRoot":"../src/","sources":["packages/react-components/react-slider/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';\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"]}