@fluentui/react-slider 9.0.0-alpha.2 → 9.0.0-alpha.6

package/CHANGELOG.json

@@ -2,7 +2,93 @@
   "name": "@fluentui/react-slider",
   "entries": [
     {
-      "date": "Fri, 10 Sep 2021 07:36:18 GMT",
+      "date": "Fri, 17 Sep 2021 07:32:57 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-alpha.6",
+      "version": "9.0.0-alpha.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "czearing@outlook.com",
+            "package": "@fluentui/react-slider",
+            "comment": "Moving Slider logic into utils folder.",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575",
+            "comment": "Bump @fluentui/react-slider to v9.0.0-alpha.6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Sep 2021 07:38:39 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-alpha.5",
+      "version": "9.0.0-alpha.5",
+      "comments": {
+        "none": [
+          {
+            "author": "czearing@outlook.com",
+            "package": "@fluentui/react-slider",
+            "comment": "Adding missing theme token for mark background",
+            "commit": "fbe41e2877a20ce0f3c01b5188e17c12f941cc4c"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "comment": "Fix typings in React.forwardRef",
+            "commit": "fbe41e2877a20ce0f3c01b5188e17c12f941cc4c"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "fbe41e2877a20ce0f3c01b5188e17c12f941cc4c",
+            "comment": "Bump @fluentui/react-slider to v9.0.0-alpha.5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Sep 2021 20:09:02 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-alpha.4",
+      "version": "9.0.0-alpha.4",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bsunderhus@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "10495c31fb5c5cf48b4665601a75a0cfabb6a03c",
+            "comment": "Bump @fluentui/react-slider to v9.0.0-alpha.4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Sep 2021 16:31:53 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-alpha.3",
+      "version": "9.0.0-alpha.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-slider",
+            "comment": "chore(v9): Move all internal v9 dependencies from caret to fixed version",
+            "commit": "01a06f5b2aa14ae96a2fca056d34d99a5ad124e0"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-slider",
+            "commit": "01a06f5b2aa14ae96a2fca056d34d99a5ad124e0",
+            "comment": "Bump @fluentui/react-slider to v9.0.0-alpha.3"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Sep 2021 07:39:51 GMT",
       "tag": "@fluentui/react-slider_v9.0.0-alpha.2",
       "version": "9.0.0-alpha.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,51 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Fri, 10 Sep 2021 07:36:18 GMT and should not be manually modified.
+This log was last generated on Fri, 17 Sep 2021 07:32:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-alpha.6)
+
+Fri, 17 Sep 2021 07:32:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-alpha.5..@fluentui/react-slider_v9.0.0-alpha.6)
+
+### Changes
+
+- Moving Slider logic into utils folder. ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by czearing@outlook.com)
+- Bump @fluentui/react-slider to v9.0.0-alpha.6 ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+
+## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-alpha.5)
+
+Thu, 16 Sep 2021 07:38:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-alpha.4..@fluentui/react-slider_v9.0.0-alpha.5)
+
+### Changes
+
+- Fix typings in React.forwardRef ([PR #19815](https://github.com/microsoft/fluentui/pull/19815) by behowell@microsoft.com)
+- Bump @fluentui/react-slider to v9.0.0-alpha.5 ([PR #19815](https://github.com/microsoft/fluentui/pull/19815) by behowell@microsoft.com)
+
+## [9.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-alpha.4)
+
+Tue, 14 Sep 2021 20:09:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-alpha.3..@fluentui/react-slider_v9.0.0-alpha.4)
+
+### Changes
+
+- Bump @fluentui/react-slider to v9.0.0-alpha.4 ([PR #19155](https://github.com/microsoft/fluentui/pull/19155) by bsunderhus@microsoft.com)
+
+## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-alpha.3)
+
+Fri, 10 Sep 2021 16:31:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-alpha.2..@fluentui/react-slider_v9.0.0-alpha.3)
+
+### Changes
+
+- chore(v9): Move all internal v9 dependencies from caret to fixed version ([PR #19748](https://github.com/microsoft/fluentui/pull/19748) by lingfangao@hotmail.com)
+- Bump @fluentui/react-slider to v9.0.0-alpha.3 ([PR #19748](https://github.com/microsoft/fluentui/pull/19748) by lingfangao@hotmail.com)
+
 ## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-alpha.2)
 
-Fri, 10 Sep 2021 07:36:18 GMT 
+Fri, 10 Sep 2021 07:39:51 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-alpha.1..@fluentui/react-slider_v9.0.0-alpha.2)
 
 ### Changes

package/dist/react-slider.d.ts

@@ -11,7 +11,7 @@ export declare const renderSlider: (state: SliderState) => JSX.Element;
 /**
  * Define a styled Slider, using the `useSlider` hook
  */
-export declare const Slider: React_2.ForwardRefExoticComponent<Pick<SliderProps, "input" | "slot" | "style" | "title" | "track" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "disabled" | "max" | "min" | "size" | "step" | "value" | "rail" | "sliderWrapper" | "trackWrapper" | "marksWrapper" | "thumbWrapper" | "thumb" | "activeRail" | "as" | "keyboardStep" | "ariaValueText" | "marks" | "vertical" | "origin"> & React_2.RefAttributes<HTMLElement>>;
+export declare const Slider: React_2.ForwardRefExoticComponent<SliderProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface SliderCommons {
     /**

package/lib/components/Slider/Slider.d.ts

@@ -3,4 +3,4 @@ import type { SliderProps } from './Slider.types';
 /**
  * Define a styled Slider, using the `useSlider` hook
  */
-export declare const Slider: React.ForwardRefExoticComponent<Pick<SliderProps, "input" | "slot" | "style" | "title" | "track" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "disabled" | "max" | "min" | "size" | "step" | "value" | "rail" | "sliderWrapper" | "trackWrapper" | "marksWrapper" | "thumbWrapper" | "thumb" | "activeRail" | "as" | "keyboardStep" | "ariaValueText" | "marks" | "vertical" | "origin"> & React.RefAttributes<HTMLElement>>;
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,aAA1B;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,eAAT,QAAgC,mBAAhC;AAGA;;AAEG;;AACH,OAAO,IAAM,MAAM,gBAAG,KAAK,CAAC,UAAN,CAA2C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1E,MAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAAvB;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,YAAY,CAAC,KAAD,CAAnB;AACD,CANqB,CAAf;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSlider } from './useSlider';\nimport { renderSlider } from './renderSlider';\nimport { useSliderStyles } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\n\n/**\n * Define a styled Slider, using the `useSlider` hook\n */\nexport const Slider = React.forwardRef<HTMLElement, SliderProps>((props, ref) => {\n  const state = useSlider(props, ref);\n\n  useSliderStyles(state);\n\n  return renderSlider(state);\n});\nSlider.displayName = 'Slider';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,aAA1B;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,eAAT,QAAgC,mBAAhC;AAGA;;AAEG;;AACH,OAAO,IAAM,MAAM,gBAAG,KAAK,CAAC,UAAN,CAA8C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC7E,MAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAAvB;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,YAAY,CAAC,KAAD,CAAnB;AACD,CANqB,CAAf;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSlider } from './useSlider';\nimport { renderSlider } from './renderSlider';\nimport { useSliderStyles } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\n\n/**\n * Define a styled Slider, using the `useSlider` hook\n */\nexport const Slider = React.forwardRef<HTMLDivElement, SliderProps>((props, ref) => {\n  const state = useSlider(props, ref);\n\n  useSliderStyles(state);\n\n  return renderSlider(state);\n});\nSlider.displayName = 'Slider';\n"],"sourceRoot":"../src/"}

package/lib/components/Slider/index.d.ts

@@ -2,5 +2,5 @@ export * from './Slider';
 export * from './Slider.types';
 export * from './renderSlider';
 export * from './useSlider';
-export { useSliderState } from './useSliderState';
+export * from './useSliderState';
 export * from './useSliderStyles';

package/lib/components/Slider/index.js

@@ -2,6 +2,6 @@ export * from './Slider';
 export * from './Slider.types';
 export * from './renderSlider';
 export * from './useSlider';
-export { useSliderState } from './useSliderState';
+export * from './useSliderState';
 export * from './useSliderStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState } from './useSliderState';\nexport * from './useSliderStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport * from './useSliderState';\nexport * from './useSliderStyles';\n"]}

package/lib/components/Slider/useSliderState.d.ts

@@ -1,3 +1,2 @@
 import type { SliderState } from './Slider.types';
-export declare const markClassName = "ms-Slider-mark";
 export declare const useSliderState: (state: SliderState) => SliderState;

package/lib/components/Slider/useSliderState.js

@@ -2,66 +2,7 @@ import { __assign } from "tslib";
 import * as React from 'react';
 import { useFluent } from '@fluentui/react-shared-contexts';
 import { useBoolean, useControllableState, useEventCallback, useUnmount, useMergedRefs } from '@fluentui/react-utilities';
-import { mergeClasses } from '@fluentui/react-make-styles';
-/**
- * Validates that the `value` is a number and falls between the min and max.
- *
- * @param value - the value to be clamped
- * @param min - the lowest valid value
- * @param max - the highest valid value
- */
-
-var clamp = function (value, min, max) {
-  return Math.max(min, Math.min(max, value || 0));
-};
-/**
- * Gets the current percent of specified value between a min and max
- *
- * @param value - the value to find the percent
- * @param min - the lowest valid value
- * @param max - the highest valid value
- */
-
-
-var getPercent = function (value, min, max) {
-  return max === min ? 0 : (value - min) / (max - min) * 100;
-};
-/**
- * Finds and swaps a provided key for it's right to left format.
- */
-
-
-var getRTLSafeKey = function (key, dir) {
-  if (dir === 'rtl') {
-    switch (key) {
-      case 'ArrowLeft':
-        {
-          return 'ArrowRight';
-        }
-
-      case 'ArrowRight':
-        {
-          return 'ArrowLeft';
-        }
-    }
-  }
-
-  return key;
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-var on = function (element, eventName, callback) {
-  element.addEventListener(eventName, callback);
-  return function () {
-    return element.removeEventListener(eventName, callback);
-  };
-}; // The mark related classNames are needed since they are used in a JSX element that is dynamically generated.
-
-
-var markContainerClassName = 'ms-Slider-markItemContainer';
-export var markClassName = 'ms-Slider-mark';
-var firstMarkClassName = 'ms-Slider-firstMark';
-var lastMarkClassName = 'ms-Slider-lastMark';
+import { calculateSteps, clamp, getKeydownValue, getMarkPercent, getMarkValue, getPercent, on, renderMarks } from '../../utils/index';
 export var useSliderState = function (state) {
   var _a, _b;
 
@@ -138,42 +79,17 @@ export var useSliderState = function (state) {
     setRenderedPosition(clamp(incomingValue, min, max));
     updateValue(incomingValue, ev);
   }, [max, min, updateValue]);
-  /**
-   * Calculates the `step` position based off of a `Mouse` or `Touch` event.
-   */
-
-  var calculateSteps = React.useCallback(function (ev) {
-    var _a;
-
-    var currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    var sliderSize = vertical ? currentBounds.height : currentBounds.width;
-    var position;
-
-    if (vertical) {
-      position = currentBounds.bottom;
-    } else if (dir === 'rtl') {
-      position = currentBounds.right;
-    } else {
-      position = currentBounds.left;
-    }
-
-    var totalSteps = (max - min) / step;
-    var stepLength = sliderSize / totalSteps;
-    var thumbPosition = vertical ? ev.clientY : ev.clientX;
-    var distance = dir === 'rtl' || vertical ? position - thumbPosition : thumbPosition - position;
-    return distance / stepLength;
-  }, [dir, max, min, step, vertical]);
 
   var onInputChange = function (ev) {
     updatePosition(Number(ev.target.value), ev);
   };
 
   var onPointerMove = React.useCallback(function (ev) {
-    var position = min + step * calculateSteps(ev);
+    var position = calculateSteps(ev, railRef, min, max, step, vertical, dir);
     var currentStepPosition = Math.round(position / step) * step;
-    setRenderedPosition(clamp(position, min, max));
+    setRenderedPosition(position);
     updateValue(currentStepPosition, ev);
-  }, [calculateSteps, max, min, step, updateValue]);
+  }, [dir, max, min, step, updateValue, vertical]);
   var onPointerUp = React.useCallback(function (ev) {
     disposables.current.forEach(function (dispose) {
       return dispose();
@@ -200,42 +116,12 @@ export var useSliderState = function (state) {
     onPointerMove(ev);
   }, [hideStepAnimation, onPointerDownCallback, onPointerMove, onPointerUp]);
   var onKeyDown = React.useCallback(function (ev) {
-    var normalizedKey = getRTLSafeKey(ev.key, dir);
     hideStepAnimation();
     onKeyDownCallback === null || onKeyDownCallback === void 0 ? void 0 : onKeyDownCallback(ev);
+    var incomingValue = getKeydownValue(ev, currentValue, min, max, dir, keyboardStep);
 
-    if (ev.shiftKey) {
-      if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {
-        updatePosition(currentValue - keyboardStep * 10, ev);
-        return;
-      } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {
-        updatePosition(currentValue + keyboardStep * 10, ev);
-        return;
-      }
-    } else if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {
-      updatePosition(currentValue - keyboardStep, ev);
-      return;
-    } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {
-      updatePosition(currentValue + keyboardStep, ev);
-      return;
-    } else {
-      switch (normalizedKey) {
-        case 'PageDown':
-          updatePosition(currentValue - keyboardStep * 10, ev);
-          break;
-
-        case 'PageUp':
-          updatePosition(currentValue + keyboardStep * 10, ev);
-          break;
-
-        case 'Home':
-          updatePosition(min, ev);
-          break;
-
-        case 'End':
-          updatePosition(max, ev);
-          break;
-      }
+    if (currentValue !== incomingValue) {
+      updatePosition(incomingValue, ev);
     }
   }, [currentValue, dir, hideStepAnimation, keyboardStep, max, min, onKeyDownCallback, updatePosition]);
 
@@ -264,40 +150,10 @@ export var useSliderState = function (state) {
     return origin !== undefined ? getPercent(origin, min, max) : 0;
   }, [max, min, origin]);
   var markValues = React.useMemo(function () {
-    var valueArray = []; // 1. We receive a boolean: mark for every step.
-
-    if (typeof marks === 'boolean' && marks === true) {
-      for (var i = 0; i < (max - min) / step + 1; i++) {
-        valueArray.push(getPercent(min + step * i, min, max));
-      }
-    } else if (Array.isArray(marks) && marks.length > 0) {
-      // 2. We receive an array with numbers: mark for every value in array.
-      return marks.map(function (marksItem) {
-        return getPercent(min + marksItem, min, max);
-      });
-    }
-
-    return valueArray;
+    return getMarkValue(marks, min, max, step);
   }, [marks, max, min, step]);
-  /**
-   * Current percentage position for the marks.
-   */
-
   var markPercent = React.useMemo(function () {
-    var valueArray = markValues;
-    var result = []; // For CSS grid to work the percents array must be remapped by the previous percent - the current percent
-
-    if (valueArray.length > 0) {
-      result.push(valueArray[0] + '% ');
-      var prevPercent = valueArray[0];
-
-      for (var i = 1; i < valueArray.length; i++) {
-        result.push(valueArray[i] - prevPercent + '% ');
-        prevPercent = valueArray[i];
-      }
-    }
-
-    return result;
+    return getMarkPercent(markValues);
   }, [markValues]);
 
   var thumbWrapperStyles = __assign({
@@ -308,29 +164,7 @@ export var useSliderState = function (state) {
   var trackStyles = __assign((_a = {}, _a[vertical ? 'top' : dir === 'rtl' ? 'right' : 'left'] = origin !== undefined ? Math.min(valuePercent, originPercent) + "%" : 0, _a[vertical ? 'height' : 'width'] = origin !== undefined ? Math.max(originPercent - valuePercent, valuePercent - originPercent) + "%" : valuePercent + "%", _a.borderRadius = getTrackBorderRadius(), // When a transition is applied with the origin, a visible animation plays when it goes below the min.
   _a.transition = stepAnimation ? (vertical ? 'height' : 'width') + " ease-in-out " + animationTime + (origin !== undefined ? ', ' + vertical ? 'top' : dir === 'rtl' ? 'right' : 'left' + 'ease-in-out ' + animationTime : '') : 'none', _a), state.track.style);
 
-  var marksWrapperStyles = marks ? __assign((_b = {}, _b[vertical ? 'gridTemplateRows' : 'gridTemplateColumns'] = markPercent.join(''), _b), state.marksWrapper.style) : {};
-  /**
-   * Renders the marks
-   */
-
-  var renderMarks = function () {
-    var marksPercent = markPercent;
-    var marksValue = markValues;
-    var marksChildren = [];
-
-    for (var i = 0; i < marksPercent.length; i++) {
-      marksChildren.push( /*#__PURE__*/React.createElement("div", {
-        className: markContainerClassName,
-        key: "markItemContainer-" + i
-      }, /*#__PURE__*/React.createElement("div", {
-        className: mergeClasses(markClassName, marksValue[i] === 0 && firstMarkClassName || marksValue[i] === 100 && lastMarkClassName || ''),
-        key: "mark-" + i
-      })));
-    }
-
-    return marksChildren;
-  }; // Root props
-
+  var marksWrapperStyles = marks ? __assign((_b = {}, _b[vertical ? 'gridTemplateRows' : 'gridTemplateColumns'] = markPercent.join(''), _b), state.marksWrapper.style) : {}; // Root props
 
   if (!disabled) {
     state.root.onPointerDown = onPointerDown;
@@ -340,8 +174,11 @@ export var useSliderState = function (state) {
 
   state.track.style = trackStyles; // Mark props
 
-  state.marksWrapper.children = marks ? renderMarks() : undefined;
-  state.marksWrapper.style = marksWrapperStyles; // Thumb Wrapper Props
+  if (marks) {
+    state.marksWrapper.children = renderMarks(markValues);
+    state.marksWrapper.style = marksWrapperStyles;
+  } // Thumb Wrapper Props
+
 
   state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SACE,UADF,EAEE,oBAFF,EAGE,gBAHF,EAIE,UAJF,EAKE,aALF,QAMO,2BANP;AAOA,SAAS,YAAT,QAA6B,6BAA7B;AAGA;;;;;;AAMG;;AACH,IAAM,KAAK,GAAG,UAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,EAAwC;AAAa,SAAA,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,KAAK,IAAjC,CAAc,CAAd,CAAA;AAAwC,CAA3G;AAEA;;;;;;AAMG;;;AACH,IAAM,UAAU,GAAG,UAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,EAAwC;AACzD,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;AAIA;;AAEG;;;AACH,IAAM,aAAa,GAAG,UAAC,GAAD,EAAc,GAAd,EAAgC;AACpD,MAAI,GAAG,KAAK,KAAZ,EAAmB;AACjB,YAAQ,GAAR;AACE,WAAK,WAAL;AAAkB;AAChB,iBAAO,YAAP;AACD;;AAED,WAAK,YAAL;AAAmB;AACjB,iBAAO,WAAP;AACD;AAPH;AASD;;AAED,SAAO,GAAP;AACD,CAdD,C,CAgBA;;;AACA,IAAM,EAAE,GAAG,UAAC,OAAD,EAAmB,SAAnB,EAAsC,QAAtC,EAAiE;AAC1E,EAAA,OAAO,CAAC,gBAAR,CAAyB,SAAzB,EAAoC,QAApC;AACA,SAAO,YAAA;AAAM,WAAA,OAAO,CAAC,mBAAR,CAA4B,SAA5B,EAAA,QAAA,CAAA;AAAgD,GAA7D;AACD,CAHD,C,CAKA;;;AACA,IAAM,sBAAsB,GAAG,6BAA/B;AACA,OAAO,IAAM,aAAa,GAAG,gBAAtB;AACP,IAAM,kBAAkB,GAAG,qBAA3B;AACA,IAAM,iBAAiB,GAAG,oBAA1B;AAEA,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAmB;;;AAE7C,MAAA,KAAK,GAYH,KAAK,CAZF,KAAL;AAAA,MACA,EAAA,GAWE,KAAK,CAXS,YADhB;AAAA,MACA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,CAAH,GAAI,EADhB;AAAA,MAEA,EAAA,GAUE,KAAK,CAVA,GAFP;AAAA,MAEA,GAAG,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,CAAH,GAAI,EAFP;AAAA,MAGA,EAAA,GASE,KAAK,CATE,GAHT;AAAA,MAGA,GAAG,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,GAAH,GAAM,EAHT;AAAA,MAIA,EAAA,GAQE,KAAK,CARC,IAJR;AAAA,MAIA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,CAAH,GAAI,EAJR;AAAA,MAKA,EAAA,GAOE,KAAK,CAPuB,YAL9B;AAAA,MAKA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,CAAC,IAAN,IAAc,CAAjB,GAAkB,EAL9B;AAAA,MAMA,EAAA,GAME,KAAK,CANS,QANhB;AAAA,MAMA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EANhB;AAAA,MAOA,aAAa,GAKX,KAAK,CALM,aAPb;AAAA,MAQA,QAAQ,GAIN,KAAK,CAJC,QARR;AAAA,MASA,KAAK,GAGH,KAAK,CAHF,KATL;AAAA,MAUA,EAAA,GAEE,KAAK,CAFS,QAVhB;AAAA,MAUA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAVhB;AAAA,MAWA,MAAM,GACJ,KAAK,CADD,MAXN;AAaI,MAAA,EAAA,GAAyE,KAAK,CAAC,IAA/E;AAAA,MAAiB,qBAAqB,GAAA,EAAA,CAAA,aAAtC;AAAA,MAAmD,iBAAiB,GAAA,EAAA,CAAA,SAApE;AAEE,MAAA,GAAG,GAAK,SAAS,GAAd,GAAH;;AAEF,MAAA,EAAA,GAA+E,UAAU,CAAC,KAAD,CAAzF;AAAA,MAAC,aAAa,GAAA,EAAA,CAAA,CAAA,CAAd;AAAA,MAAgB,EAAA,GAAA,EAAA,CAAA,CAAA,CAAhB;AAAA,MAA2B,iBAAiB,GAAA,EAAA,CAAA,OAA5C;AAAA,MAAwD,iBAAiB,GAAA,EAAA,CAAA,QAAzE;;AACA,MAAA,EAAA,GAA0C,KAAK,CAAC,QAAN,CAAmC,KAAK,GAAG,KAAH,GAAW,YAAnD,CAA1C;AAAA,MAAC,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAjB;AAAA,MAAmB,mBAAmB,GAAA,EAAA,CAAA,CAAA,CAAtC;;AACA,MAAA,EAAA,GAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC,KAAD,EAAQ,GAAR,EAAa,GAAb,CADsC;AAE3D,IAAA,YAAY,EAAE,KAAK,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAFwC;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAAtD;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B;;AAMN,MAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAhB;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA+B,IAA/B,CAAjB;AACA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAN,CAA6B,EAA7B,CAApB;AAEA;;AAEG;;AACH,MAAM,WAAW,GAAG,gBAAgB,CAClC,UAAC,aAAD,EAAwB,EAAxB,EAAoG;AAClG,QAAM,YAAY,GAAG,KAAK,CAAC,aAAD,EAAgB,GAAhB,EAAqB,GAArB,CAA1B;;AAEA,QAAI,YAAY,KAAK,GAAjB,IAAwB,YAAY,KAAK,GAA7C,EAAkD;AAChD,MAAA,EAAE,CAAC,eAAH;;AACA,UAAI,EAAE,CAAC,IAAH,KAAY,SAAhB,EAA2B;AACzB,QAAA,EAAE,CAAC,cAAH;AACD;AACF;;AAED,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,KAAK,EAAE;AAAT,KAAP,CAAR;AACA,IAAA,eAAe,CAAC,YAAD,CAAf;AACD,GAbiC,CAApC;AAgBA;;AAEG;;AACH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CACrB,UAAC,aAAD,EAAwB,EAAxB,EAA0B;AACxB,IAAA,mBAAmB,CAAC,KAAK,CAAC,aAAD,EAAgB,GAAhB,EAAqB,GAArB,CAAN,CAAnB;AACA,IAAA,WAAW,CAAC,aAAD,EAAgB,EAAhB,CAAX;AACD,GAJoB,EAKrB,CAAC,GAAD,EAAM,GAAN,EAAW,WAAX,CALqB,CAAvB;AAQA;;AAEG;;AACH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CACrB,UAAC,EAAD,EAAuC;;;AACrC,QAAM,aAAa,GAAA,CAAA,EAAA,GAAG,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,OAAZ,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,qBAAF,EAAtC;AACA,QAAM,UAAU,GAAG,QAAQ,GAAG,aAAc,CAAC,MAAlB,GAA2B,aAAc,CAAC,KAArE;AACA,QAAI,QAAJ;;AAEA,QAAI,QAAJ,EAAc;AACZ,MAAA,QAAQ,GAAG,aAAc,CAAC,MAA1B;AACD,KAFD,MAEO,IAAI,GAAG,KAAK,KAAZ,EAAmB;AACxB,MAAA,QAAQ,GAAG,aAAc,CAAC,KAA1B;AACD,KAFM,MAEA;AACL,MAAA,QAAQ,GAAG,aAAc,CAAC,IAA1B;AACD;;AAED,QAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAjC;AACA,QAAM,UAAU,GAAG,UAAU,GAAG,UAAhC;AACA,QAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAC,OAAN,GAAgB,EAAE,CAAC,OAAjD;AACA,QAAM,QAAQ,GAAG,GAAG,KAAK,KAAR,IAAiB,QAAjB,GAA4B,QAAQ,GAAG,aAAvC,GAAuD,aAAa,GAAG,QAAxF;AAEA,WAAO,QAAQ,GAAG,UAAlB;AACD,GApBoB,EAqBrB,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,EAAgB,IAAhB,EAAsB,QAAtB,CArBqB,CAAvB;;AAwBA,MAAM,aAAa,GAAG,UAAC,EAAD,EAAwC;AAC5D,IAAA,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAP,EAA0B,EAA1B,CAAd;AACD,GAFD;;AAIA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,UAAC,EAAD,EAAuC;AACrC,QAAM,QAAQ,GAAG,GAAG,GAAG,IAAI,GAAG,cAAc,CAAC,EAAD,CAA5C;AACA,QAAM,mBAAmB,GAAG,IAAI,CAAC,KAAL,CAAW,QAAQ,GAAG,IAAtB,IAA8B,IAA1D;AAEA,IAAA,mBAAmB,CAAC,KAAK,CAAC,QAAD,EAAW,GAAX,EAAgB,GAAhB,CAAN,CAAnB;AACA,IAAA,WAAW,CAAC,mBAAD,EAAsB,EAAtB,CAAX;AACD,GAPmB,EAQpB,CAAC,cAAD,EAAiB,GAAjB,EAAsB,GAAtB,EAA2B,IAA3B,EAAiC,WAAjC,CARoB,CAAtB;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAN,CAClB,UAAC,EAAD,EAAuC;AACrC,IAAA,WAAW,CAAC,OAAZ,CAAoB,OAApB,CAA4B,UAAA,OAAA,EAAO;AAAI,aAAA,OAAA,EAAA;AAAS,KAAhD;AACA,IAAA,WAAW,CAAC,OAAZ,GAAsB,EAAtB;AACA,IAAA,iBAAiB,GAHoB,CAIrC;;AACA,IAAA,mBAAmB,CAAC,SAAD,CAAnB;AACA,IAAA,QAAQ,CAAC,OAAT,CAAkB,KAAlB;AACD,GARiB,EASlB,CAAC,iBAAD,CATkB,CAApB;AAYA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,UAAC,EAAD,EAAuC;;;AAC7B,QAAA,SAAS,GAAK,EAAE,CAAP,SAAT;AACR,QAAM,MAAM,GAAG,EAAE,CAAC,MAAlB;AAEA,KAAA,EAAA,GAAA,MAAM,CAAC,iBAAP,MAAwB,IAAxB,IAAwB,EAAA,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAwB,EAAA,CAAA,IAAA,CAAxB,MAAwB,EAAG,SAAH,CAAxB;AAEA,IAAA,iBAAiB;AACjB,IAAA,qBAAqB,KAAA,IAArB,IAAA,qBAAqB,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAA,qBAAqB,CAAG,EAAH,CAArB;AAEA,IAAA,WAAW,CAAC,OAAZ,CAAoB,IAApB,CAAyB,EAAE,CAAC,MAAD,EAAS,aAAT,EAAwB,aAAxB,CAA3B,EAAmE,EAAE,CAAC,MAAD,EAAS,WAAT,EAAsB,WAAtB,CAArE,EAAyG,YAAA;;;AACvG,OAAA,EAAA,GAAA,MAAM,CAAC,qBAAP,MAA4B,IAA5B,IAA4B,EAAA,KAAA,KAAA,CAA5B,GAA4B,KAAA,CAA5B,GAA4B,EAAA,CAAA,IAAA,CAA5B,MAA4B,EAAG,SAAH,CAA5B;AACD,KAFD;AAIA,IAAA,aAAa,CAAC,EAAD,CAAb;AACD,GAfmB,EAgBpB,CAAC,iBAAD,EAAoB,qBAApB,EAA2C,aAA3C,EAA0D,WAA1D,CAhBoB,CAAtB;AAmBA,MAAM,SAAS,GAAG,KAAK,CAAC,WAAN,CAChB,UAAC,EAAD,EAAwC;AACtC,QAAM,aAAa,GAAG,aAAa,CAAC,EAAE,CAAC,GAAJ,EAAS,GAAT,CAAnC;AACA,IAAA,iBAAiB;AACjB,IAAA,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,EAAH,CAAjB;;AAEA,QAAI,EAAE,CAAC,QAAP,EAAiB;AACf,UAAI,aAAa,KAAK,WAAlB,IAAiC,aAAa,KAAK,WAAvD,EAAoE;AAClE,QAAA,cAAc,CAAC,YAAa,GAAG,YAAY,GAAG,EAAhC,EAAoC,EAApC,CAAd;AACA;AACD,OAHD,MAGO,IAAI,aAAa,KAAK,SAAlB,IAA+B,aAAa,KAAK,YAArD,EAAmE;AACxE,QAAA,cAAc,CAAC,YAAa,GAAG,YAAY,GAAG,EAAhC,EAAoC,EAApC,CAAd;AACA;AACD;AACF,KARD,MAQO,IAAI,aAAa,KAAK,WAAlB,IAAiC,aAAa,KAAK,WAAvD,EAAoE;AACzE,MAAA,cAAc,CAAC,YAAa,GAAG,YAAjB,EAA+B,EAA/B,CAAd;AACA;AACD,KAHM,MAGA,IAAI,aAAa,KAAK,SAAlB,IAA+B,aAAa,KAAK,YAArD,EAAmE;AACxE,MAAA,cAAc,CAAC,YAAa,GAAG,YAAjB,EAA+B,EAA/B,CAAd;AACA;AACD,KAHM,MAGA;AACL,cAAQ,aAAR;AACE,aAAK,UAAL;AACE,UAAA,cAAc,CAAC,YAAa,GAAG,YAAY,GAAG,EAAhC,EAAoC,EAApC,CAAd;AACA;;AACF,aAAK,QAAL;AACE,UAAA,cAAc,CAAC,YAAa,GAAG,YAAY,GAAG,EAAhC,EAAoC,EAApC,CAAd;AACA;;AACF,aAAK,MAAL;AACE,UAAA,cAAc,CAAC,GAAD,EAAM,EAAN,CAAd;AACA;;AACF,aAAK,KAAL;AACE,UAAA,cAAc,CAAC,GAAD,EAAM,EAAN,CAAd;AACA;AAZJ;AAcD;AACF,GApCe,EAqChB,CAAC,YAAD,EAAe,GAAf,EAAoB,iBAApB,EAAuC,YAAvC,EAAqD,GAArD,EAA0D,GAA1D,EAA+D,iBAA/D,EAAkF,cAAlF,CArCgB,CAAlB;;AAwCA,MAAM,oBAAoB,GAAG,YAAA;AAC3B,QAAI,MAAM,KAAK,SAAX,IAAwB,MAAM,MAAM,GAAG,IAAI,GAAb,CAAlC,EAAqD;AACnD,UAAI,QAAJ,EAAc;AACZ,eAAO,aAAa,GAAG,YAAhB,GAA+B,mBAA/B,GAAqD,mBAA5D;AACD,OAFD,MAEO;AACL,eAAO,CAAC,GAAG,KAAK,KAAR,GAAgB,YAAY,GAAG,aAA/B,GAA+C,YAAY,GAAG,aAA/D,IACH,mBADG,GAEH,mBAFJ;AAGD;AACF;;AACD,WAAO,MAAP;AACD,GAXD;;AAaA,EAAA,UAAU,CAAC,YAAA;AACT,IAAA,WAAW,CAAC,OAAZ,CAAoB,OAApB,CAA4B,UAAA,OAAA,EAAO;AAAI,aAAA,OAAA,EAAA;AAAS,KAAhD;AACA,IAAA,WAAW,CAAC,OAAZ,GAAsB,EAAtB;AACD,GAHS,CAAV,CA3L+C,CAgM/C;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,KAAK,SAArB,GAAiC,gBAAjC,GAAoD,YAArD,EAAmE,GAAnE,EAAwE,GAAxE,CAA/B;AAEA,MAAM,aAAa,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAClC,WAAO,MAAM,KAAK,SAAX,GAAuB,UAAU,CAAC,MAAD,EAAS,GAAT,EAAc,GAAd,CAAjC,GAAsD,CAA7D;AACD,GAFqB,EAEnB,CAAC,GAAD,EAAM,GAAN,EAAW,MAAX,CAFmB,CAAtB;AAIA,MAAM,UAAU,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC/B,QAAM,UAAU,GAAa,EAA7B,CAD+B,CAG/B;;AACA,QAAI,OAAO,KAAP,KAAiB,SAAjB,IAA8B,KAAK,KAAK,IAA5C,EAAkD;AAChD,WAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAd,GAAqB,CAAzC,EAA4C,CAAC,EAA7C,EAAiD;AAC/C,QAAA,UAAU,CAAC,IAAX,CAAgB,UAAU,CAAC,GAAG,GAAG,IAAI,GAAG,CAAd,EAAiB,GAAjB,EAAsB,GAAtB,CAA1B;AACD;AACF,KAJD,MAIO,IAAI,KAAK,CAAC,OAAN,CAAc,KAAd,KAAwB,KAAK,CAAC,MAAN,GAAe,CAA3C,EAA8C;AACnD;AACA,aAAO,KAAK,CAAC,GAAN,CAAU,UAAA,SAAA,EAAS;AAAI,eAAA,UAAU,CAAC,GAAG,GAAG,SAAP,EAAkB,GAAlB,EAAV,GAAU,CAAV;AAAqC,OAA5D,CAAP;AACD;;AAED,WAAO,UAAP;AACD,GAdkB,EAchB,CAAC,KAAD,EAAQ,GAAR,EAAa,GAAb,EAAkB,IAAlB,CAdgB,CAAnB;AAgBA;;AAEG;;AACH,MAAM,WAAW,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAChC,QAAM,UAAU,GAAa,UAA7B;AACA,QAAM,MAAM,GAAa,EAAzB,CAFgC,CAIhC;;AACA,QAAI,UAAU,CAAC,MAAX,GAAoB,CAAxB,EAA2B;AACzB,MAAA,MAAM,CAAC,IAAP,CAAY,UAAU,CAAC,CAAD,CAAV,GAAgB,IAA5B;AACA,UAAI,WAAW,GAAG,UAAU,CAAC,CAAD,CAA5B;;AACA,WAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,UAAU,CAAC,MAA/B,EAAuC,CAAC,EAAxC,EAA4C;AAC1C,QAAA,MAAM,CAAC,IAAP,CAAY,UAAU,CAAC,CAAD,CAAV,GAAgB,WAAhB,GAA8B,IAA1C;AACA,QAAA,WAAW,GAAG,UAAU,CAAC,CAAD,CAAxB;AACD;AACF;;AAED,WAAO,MAAP;AACD,GAfmB,EAejB,CAAC,UAAD,CAfiB,CAApB;;AAiBA,MAAM,kBAAkB,GAAA,QAAA,CAAA;AACtB,IAAA,SAAS,EAAE,QAAQ,GACf,gBAAc,YAAd,GAA0B,IADX,GAEf,iBAAc,GAAG,KAAK,KAAR,GAAgB,CAAC,YAAjB,GAAgC,YAA9C,IAA0D,IAHxC;AAItB,IAAA,UAAU,EAAE,aAAa,GAAG,2BAAyB,aAA5B,GAA8C;AAJjD,GAAA,EAKnB,KAAK,CAAC,YAAN,CAAmB,KALA,CAAxB;;AAQA,MAAM,WAAW,GAAA,QAAA,EAAA,EAAA,GAAA,EAAA,EAAA,EAAA,CACd,QAAQ,GAAG,KAAH,GAAW,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,MAD/B,CAAA,GAEb,MAAM,KAAK,SAAX,GAA0B,IAAI,CAAC,GAAL,CAAS,YAAT,EAAuB,aAAvB,IAAqC,GAA/D,GAAqE,CAFxD,EAEyD,EAAA,CACvE,QAAQ,GAAG,QAAH,GAAc,OADiD,CAAA,GAEtE,MAAM,KAAK,SAAX,GACO,IAAI,CAAC,GAAL,CAAS,aAAa,GAAG,YAAzB,EAAuC,YAAY,GAAG,aAAtD,IAAoE,GAD3E,GAEO,YAAY,GAAA,GANN,EAOf,EAAA,CAAA,YAAA,GAAc,oBAAoB,EAPnB,EAQf;AACA,EAAA,EAAA,CAAA,UAAA,GAAY,aAAa,GACrB,CAAG,QAAQ,GAAG,QAAH,GAAc,OAAzB,IAAgC,eAAhC,GAAgD,aAAhD,IACE,MAAM,KAAK,SAAX,GACI,OAAO,QAAP,GACE,KADF,GAEE,GAAG,KAAK,KAAR,GACA,OADA,GAEA,SAAS,cAAT,GAA0B,aALhC,GAMI,EAPN,CADqB,GAUrB,MAnBW,EAmBL,EAnBK,GAoBZ,KAAK,CAAC,KAAN,CAAY,KApBA,CAAjB;;AAuBA,MAAM,kBAAkB,GAAG,KAAK,GAC7B,QAAA,EAAA,EAAA,GAAA,EAAA,EAAA,EAAA,CACI,QAAQ,GAAG,kBAAH,GAAwB,qBADpC,CAAA,GAC4D,WAAW,CAAC,IAAZ,CAAiB,EAAjB,CAD5D,EACgF,EADhF,GAEM,KAAK,CAAC,YAAN,CAAmB,KAFzB,CAD6B,GAK5B,EALJ;AAOA;;AAEG;;AACH,MAAM,WAAW,GAAG,YAAA;AAClB,QAAM,YAAY,GAAG,WAArB;AACA,QAAM,UAAU,GAAG,UAAnB;AACA,QAAM,aAAa,GAAkB,EAArC;;AACA,SAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,YAAY,CAAC,MAAjC,EAAyC,CAAC,EAA1C,EAA8C;AAC5C,MAAA,aAAa,CAAC,IAAd,eACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAE,sBAAhB;AAAwC,QAAA,GAAG,EAAE,uBAAqB;AAAlE,OAAA,eACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,QAAA,SAAS,EAAE,YAAY,CACrB,aADqB,EAEpB,UAAU,CAAC,CAAD,CAAV,KAAkB,CAAlB,IAAuB,kBAAxB,IAAgD,UAAU,CAAC,CAAD,CAAV,KAAkB,GAAlB,IAAyB,iBAAzE,IAA+F,EAF1E,CADzB;AAKE,QAAA,GAAG,EAAE,UAAQ;AALf,OAAA,CADF,CADF;AAWD;;AAED,WAAO,aAAP;AACD,GAnBD,CAtR+C,CA2S/C;;;AACA,MAAI,CAAC,QAAL,EAAe;AACb,IAAA,KAAK,CAAC,IAAN,CAAW,aAAX,GAA2B,aAA3B;AACA,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,SAAvB;AACD,GA/S8C,CAiT/C;;;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,WAApB,CAlT+C,CAoT/C;;AACA,EAAA,KAAK,CAAC,YAAN,CAAmB,QAAnB,GAA8B,KAAK,GAAG,WAAW,EAAd,GAAmB,SAAtD;AACA,EAAA,KAAK,CAAC,YAAN,CAAmB,KAAnB,GAA2B,kBAA3B,CAtT+C,CAwT/C;;AACA,EAAA,KAAK,CAAC,YAAN,CAAmB,KAAnB,GAA2B,kBAA3B,CAzT+C,CA2T/C;;AACA,EAAA,KAAK,CAAC,UAAN,CAAiB,GAAjB,GAAuB,OAAvB,CA5T+C,CA8T/C;;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,GAAZ,GAAkB,aAAa,CAAC,KAAK,CAAC,KAAN,CAAY,GAAb,EAAkB,QAAlB,CAA/B;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,GAAZ,GAAkB,GAAlB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,GAAZ,GAAkB,GAAlB;AACA,EAAA,aAAa,KAAK,KAAK,CAAC,KAAN,CAAY,gBAAZ,IAAgC,aAAa,CAAC,YAAD,CAAlD,CAAb;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,IAAZ,GAAmB,IAAnB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,aAAvB;AAEA,SAAO,KAAP;AACD,CAzUM","sourcesContent":["import * as React from 'react';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  useBoolean,\n  useControllableState,\n  useEventCallback,\n  useUnmount,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { mergeClasses } from '@fluentui/react-make-styles';\nimport type { SliderState } from './Slider.types';\n\n/**\n * Validates that the `value` is a number and falls between the min and max.\n *\n * @param value - the value to be clamped\n * @param min - the lowest valid value\n * @param max - the highest valid value\n */\nconst clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value || 0));\n\n/**\n * Gets the current percent of specified value between a min and max\n *\n * @param value - the value to find the percent\n * @param min - the lowest valid value\n * @param max - the highest valid value\n */\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\n/**\n * Finds and swaps a provided key for it's right to left format.\n */\nconst getRTLSafeKey = (key: string, dir: 'ltr' | 'rtl') => {\n  if (dir === 'rtl') {\n    switch (key) {\n      case 'ArrowLeft': {\n        return 'ArrowRight';\n      }\n\n      case 'ArrowRight': {\n        return 'ArrowLeft';\n      }\n    }\n  }\n\n  return key;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst on = (element: Element, eventName: string, callback: (ev: any) => void) => {\n  element.addEventListener(eventName, callback);\n  return () => element.removeEventListener(eventName, callback);\n};\n\n// The mark related classNames are needed since they are used in a JSX element that is dynamically generated.\nconst markContainerClassName = 'ms-Slider-markItemContainer';\nexport const markClassName = 'ms-Slider-mark';\nconst firstMarkClassName = 'ms-Slider-firstMark';\nconst lastMarkClassName = 'ms-Slider-lastMark';\n\nexport const useSliderState = (state: SliderState) => {\n  const {\n    value,\n    defaultValue = 0,\n    min = 0,\n    max = 100,\n    step = 1,\n    keyboardStep = state.step || 1,\n    disabled = false,\n    ariaValueText,\n    onChange,\n    marks,\n    vertical = false,\n    origin,\n  } = state;\n  const { onPointerDown: onPointerDownCallback, onKeyDown: onKeyDownCallback } = state.root;\n\n  const { dir } = useFluent();\n\n  const [stepAnimation, { setTrue: showStepAnimation, setFalse: hideStepAnimation }] = useBoolean(false);\n  const [renderedPosition, setRenderedPosition] = React.useState<number | undefined>(value ? value : defaultValue);\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value && clamp(value, min, max),\n    defaultState: clamp(defaultValue, min, max),\n    initialState: 0,\n  });\n\n  const railRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const disposables = React.useRef<(() => void)[]>([]);\n\n  /**\n   * Updates the controlled `currentValue` to the new `incomingValue` and clamps it.\n   */\n  const updateValue = useEventCallback(\n    (incomingValue: number, ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n      const clampedValue = clamp(incomingValue, min, max);\n\n      if (clampedValue !== min && clampedValue !== max) {\n        ev.stopPropagation();\n        if (ev.type === 'keydown') {\n          ev.preventDefault();\n        }\n      }\n\n      onChange?.(ev, { value: clampedValue });\n      setCurrentValue(clampedValue);\n    },\n  );\n\n  /**\n   * Updates the controlled `currentValue` and `renderedPosition` of the Slider.\n   */\n  const updatePosition = React.useCallback(\n    (incomingValue: number, ev) => {\n      setRenderedPosition(clamp(incomingValue, min, max));\n      updateValue(incomingValue, ev);\n    },\n    [max, min, updateValue],\n  );\n\n  /**\n   * Calculates the `step` position based off of a `Mouse` or `Touch` event.\n   */\n  const calculateSteps = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): number => {\n      const currentBounds = railRef?.current?.getBoundingClientRect();\n      const sliderSize = vertical ? currentBounds!.height : currentBounds!.width;\n      let position;\n\n      if (vertical) {\n        position = currentBounds!.bottom;\n      } else if (dir === 'rtl') {\n        position = currentBounds!.right;\n      } else {\n        position = currentBounds!.left;\n      }\n\n      const totalSteps = (max - min) / step;\n      const stepLength = sliderSize / totalSteps;\n      const thumbPosition = vertical ? ev.clientY : ev.clientX;\n      const distance = dir === 'rtl' || vertical ? position - thumbPosition : thumbPosition - position;\n\n      return distance / stepLength;\n    },\n    [dir, max, min, step, vertical],\n  );\n\n  const onInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    updatePosition(Number(ev.target.value), ev);\n  };\n\n  const onPointerMove = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      const position = min + step * calculateSteps(ev);\n      const currentStepPosition = Math.round(position / step) * step;\n\n      setRenderedPosition(clamp(position, min, max));\n      updateValue(currentStepPosition, ev);\n    },\n    [calculateSteps, max, min, step, updateValue],\n  );\n\n  const onPointerUp = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      disposables.current.forEach(dispose => dispose());\n      disposables.current = [];\n      showStepAnimation();\n      // When undefined, the position fallbacks to the currentValue state.\n      setRenderedPosition(undefined);\n      inputRef.current!.focus();\n    },\n    [showStepAnimation],\n  );\n\n  const onPointerDown = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      const { pointerId } = ev;\n      const target = ev.target as HTMLElement;\n\n      target.setPointerCapture?.(pointerId);\n\n      hideStepAnimation();\n      onPointerDownCallback?.(ev);\n\n      disposables.current.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), () => {\n        target.releasePointerCapture?.(pointerId);\n      });\n\n      onPointerMove(ev);\n    },\n    [hideStepAnimation, onPointerDownCallback, onPointerMove, onPointerUp],\n  );\n\n  const onKeyDown = React.useCallback(\n    (ev: React.KeyboardEvent<HTMLDivElement>): void => {\n      const normalizedKey = getRTLSafeKey(ev.key, dir);\n      hideStepAnimation();\n      onKeyDownCallback?.(ev);\n\n      if (ev.shiftKey) {\n        if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {\n          updatePosition(currentValue! - keyboardStep * 10, ev);\n          return;\n        } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {\n          updatePosition(currentValue! + keyboardStep * 10, ev);\n          return;\n        }\n      } else if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {\n        updatePosition(currentValue! - keyboardStep, ev);\n        return;\n      } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {\n        updatePosition(currentValue! + keyboardStep, ev);\n        return;\n      } else {\n        switch (normalizedKey) {\n          case 'PageDown':\n            updatePosition(currentValue! - keyboardStep * 10, ev);\n            break;\n          case 'PageUp':\n            updatePosition(currentValue! + keyboardStep * 10, ev);\n            break;\n          case 'Home':\n            updatePosition(min, ev);\n            break;\n          case 'End':\n            updatePosition(max, ev);\n            break;\n        }\n      }\n    },\n    [currentValue, dir, hideStepAnimation, keyboardStep, max, min, onKeyDownCallback, updatePosition],\n  );\n\n  const getTrackBorderRadius = () => {\n    if (origin !== undefined && origin !== (max || min)) {\n      if (vertical) {\n        return originPercent > valuePercent ? '99px 99px 0px 0px' : '0px 0px 99px 99px';\n      } else {\n        return (dir === 'rtl' ? valuePercent > originPercent : valuePercent < originPercent)\n          ? '99px 0px 0px 99px'\n          : '0px 99px 99px 0px';\n      }\n    }\n    return '99px';\n  };\n\n  useUnmount(() => {\n    disposables.current.forEach(dispose => dispose());\n    disposables.current = [];\n  });\n\n  // TODO: Awaiting animation time from design spec.\n  const animationTime = '0.1s';\n\n  const valuePercent = getPercent(renderedPosition !== undefined ? renderedPosition : currentValue, min, max);\n\n  const originPercent = React.useMemo(() => {\n    return origin !== undefined ? getPercent(origin, min, max) : 0;\n  }, [max, min, origin]);\n\n  const markValues = React.useMemo((): number[] => {\n    const valueArray: number[] = [];\n\n    // 1. We receive a boolean: mark for every step.\n    if (typeof marks === 'boolean' && marks === true) {\n      for (let i = 0; i < (max - min) / step + 1; i++) {\n        valueArray.push(getPercent(min + step * i, min, max));\n      }\n    } else if (Array.isArray(marks) && marks.length > 0) {\n      // 2. We receive an array with numbers: mark for every value in array.\n      return marks.map(marksItem => getPercent(min + marksItem, min, max));\n    }\n\n    return valueArray;\n  }, [marks, max, min, step]);\n\n  /**\n   * Current percentage position for the marks.\n   */\n  const markPercent = React.useMemo((): string[] => {\n    const valueArray: number[] = markValues;\n    const result: string[] = [];\n\n    // For CSS grid to work the percents array must be remapped by the previous percent - the current percent\n    if (valueArray.length > 0) {\n      result.push(valueArray[0] + '% ');\n      let prevPercent = valueArray[0];\n      for (let i = 1; i < valueArray.length; i++) {\n        result.push(valueArray[i] - prevPercent + '% ');\n        prevPercent = valueArray[i];\n      }\n    }\n\n    return result;\n  }, [markValues]);\n\n  const thumbWrapperStyles = {\n    transform: vertical\n      ? `translateY(${valuePercent}%)`\n      : `translateX(${dir === 'rtl' ? -valuePercent : valuePercent}%)`,\n    transition: stepAnimation ? `transform ease-in-out ${animationTime}` : 'none',\n    ...state.thumbWrapper.style,\n  };\n\n  const trackStyles = {\n    [vertical ? 'top' : dir === 'rtl' ? 'right' : 'left']:\n      origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : 0,\n    [vertical ? 'height' : 'width']:\n      origin !== undefined\n        ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n        : `${valuePercent}%`,\n    borderRadius: getTrackBorderRadius(),\n    // When a transition is applied with the origin, a visible animation plays when it goes below the min.\n    transition: stepAnimation\n      ? `${vertical ? 'height' : 'width'} ease-in-out ${animationTime}${\n          origin !== undefined\n            ? ', ' + vertical\n              ? 'top'\n              : dir === 'rtl'\n              ? 'right'\n              : 'left' + 'ease-in-out ' + animationTime\n            : ''\n        }`\n      : 'none',\n    ...state.track.style,\n  };\n\n  const marksWrapperStyles = marks\n    ? {\n        [vertical ? 'gridTemplateRows' : 'gridTemplateColumns']: markPercent.join(''),\n        ...state.marksWrapper.style,\n      }\n    : {};\n\n  /**\n   * Renders the marks\n   */\n  const renderMarks = () => {\n    const marksPercent = markPercent;\n    const marksValue = markValues;\n    const marksChildren: JSX.Element[] = [];\n    for (let i = 0; i < marksPercent.length; i++) {\n      marksChildren.push(\n        <div className={markContainerClassName} key={`markItemContainer-${i}`}>\n          <div\n            className={mergeClasses(\n              markClassName,\n              (marksValue[i] === 0 && firstMarkClassName) || (marksValue[i] === 100 && lastMarkClassName) || '',\n            )}\n            key={`mark-${i}`}\n          />\n        </div>,\n      );\n    }\n\n    return marksChildren;\n  };\n\n  // Root props\n  if (!disabled) {\n    state.root.onPointerDown = onPointerDown;\n    state.root.onKeyDown = onKeyDown;\n  }\n\n  // Track Props\n  state.track.style = trackStyles;\n\n  // Mark props\n  state.marksWrapper.children = marks ? renderMarks() : undefined;\n  state.marksWrapper.style = marksWrapperStyles;\n\n  // Thumb Wrapper Props\n  state.thumbWrapper.style = thumbWrapperStyles;\n\n  // Active Rail Props\n  state.activeRail.ref = railRef;\n\n  // Input Props\n  state.input.ref = useMergedRefs(state.input.ref, inputRef);\n  state.input.value = currentValue;\n  state.input.min = min;\n  state.input.max = max;\n  ariaValueText && (state.input['aria-valuetext'] = ariaValueText(currentValue!));\n  state.input.disabled = disabled;\n  state.input.step = step;\n  state.input.onChange = onInputChange;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  useBoolean,\n  useControllableState,\n  useEventCallback,\n  useUnmount,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport {\n  calculateSteps,\n  clamp,\n  getKeydownValue,\n  getMarkPercent,\n  getMarkValue,\n  getPercent,\n  on,\n  renderMarks,\n} from '../../utils/index';\nimport type { SliderState } from './Slider.types';\n\nexport const useSliderState = (state: SliderState) => {\n  const {\n    value,\n    defaultValue = 0,\n    min = 0,\n    max = 100,\n    step = 1,\n    keyboardStep = state.step || 1,\n    disabled = false,\n    ariaValueText,\n    onChange,\n    marks,\n    vertical = false,\n    origin,\n  } = state;\n  const { onPointerDown: onPointerDownCallback, onKeyDown: onKeyDownCallback } = state.root;\n\n  const { dir } = useFluent();\n\n  const [stepAnimation, { setTrue: showStepAnimation, setFalse: hideStepAnimation }] = useBoolean(false);\n  const [renderedPosition, setRenderedPosition] = React.useState<number | undefined>(value ? value : defaultValue);\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value && clamp(value, min, max),\n    defaultState: clamp(defaultValue, min, max),\n    initialState: 0,\n  });\n\n  const railRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const disposables = React.useRef<(() => void)[]>([]);\n\n  /**\n   * Updates the controlled `currentValue` to the new `incomingValue` and clamps it.\n   */\n  const updateValue = useEventCallback(\n    (incomingValue: number, ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n      const clampedValue = clamp(incomingValue, min, max);\n\n      if (clampedValue !== min && clampedValue !== max) {\n        ev.stopPropagation();\n        if (ev.type === 'keydown') {\n          ev.preventDefault();\n        }\n      }\n\n      onChange?.(ev, { value: clampedValue });\n      setCurrentValue(clampedValue);\n    },\n  );\n\n  /**\n   * Updates the controlled `currentValue` and `renderedPosition` of the Slider.\n   */\n  const updatePosition = React.useCallback(\n    (incomingValue: number, ev) => {\n      setRenderedPosition(clamp(incomingValue, min, max));\n      updateValue(incomingValue, ev);\n    },\n    [max, min, updateValue],\n  );\n\n  const onInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    updatePosition(Number(ev.target.value), ev);\n  };\n\n  const onPointerMove = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      const position = calculateSteps(ev, railRef, min, max, step, vertical, dir);\n      const currentStepPosition = Math.round(position / step) * step;\n\n      setRenderedPosition(position);\n      updateValue(currentStepPosition, ev);\n    },\n    [dir, max, min, step, updateValue, vertical],\n  );\n\n  const onPointerUp = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      disposables.current.forEach(dispose => dispose());\n      disposables.current = [];\n      showStepAnimation();\n      // When undefined, the position fallbacks to the currentValue state.\n      setRenderedPosition(undefined);\n      inputRef.current!.focus();\n    },\n    [showStepAnimation],\n  );\n\n  const onPointerDown = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      const { pointerId } = ev;\n      const target = ev.target as HTMLElement;\n\n      target.setPointerCapture?.(pointerId);\n\n      hideStepAnimation();\n      onPointerDownCallback?.(ev);\n\n      disposables.current.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), () => {\n        target.releasePointerCapture?.(pointerId);\n      });\n\n      onPointerMove(ev);\n    },\n    [hideStepAnimation, onPointerDownCallback, onPointerMove, onPointerUp],\n  );\n\n  const onKeyDown = React.useCallback(\n    (ev: React.KeyboardEvent<HTMLDivElement>): void => {\n      hideStepAnimation();\n      onKeyDownCallback?.(ev);\n      const incomingValue = getKeydownValue(ev, currentValue, min, max, dir, keyboardStep);\n\n      if (currentValue !== incomingValue) {\n        updatePosition(incomingValue, ev);\n      }\n    },\n    [currentValue, dir, hideStepAnimation, keyboardStep, max, min, onKeyDownCallback, updatePosition],\n  );\n\n  const getTrackBorderRadius = () => {\n    if (origin !== undefined && origin !== (max || min)) {\n      if (vertical) {\n        return originPercent > valuePercent ? '99px 99px 0px 0px' : '0px 0px 99px 99px';\n      } else {\n        return (dir === 'rtl' ? valuePercent > originPercent : valuePercent < originPercent)\n          ? '99px 0px 0px 99px'\n          : '0px 99px 99px 0px';\n      }\n    }\n    return '99px';\n  };\n\n  useUnmount(() => {\n    disposables.current.forEach(dispose => dispose());\n    disposables.current = [];\n  });\n\n  // TODO: Awaiting animation time from design spec.\n  const animationTime = '0.1s';\n\n  const valuePercent = getPercent(renderedPosition !== undefined ? renderedPosition : currentValue, min, max);\n\n  const originPercent = React.useMemo(() => {\n    return origin !== undefined ? getPercent(origin, min, max) : 0;\n  }, [max, min, origin]);\n\n  const markValues = React.useMemo((): number[] => getMarkValue(marks, min, max, step), [marks, max, min, step]);\n\n  const markPercent = React.useMemo((): string[] => getMarkPercent(markValues), [markValues]);\n\n  const thumbWrapperStyles = {\n    transform: vertical\n      ? `translateY(${valuePercent}%)`\n      : `translateX(${dir === 'rtl' ? -valuePercent : valuePercent}%)`,\n    transition: stepAnimation ? `transform ease-in-out ${animationTime}` : 'none',\n    ...state.thumbWrapper.style,\n  };\n\n  const trackStyles = {\n    [vertical ? 'top' : dir === 'rtl' ? 'right' : 'left']:\n      origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : 0,\n    [vertical ? 'height' : 'width']:\n      origin !== undefined\n        ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n        : `${valuePercent}%`,\n    borderRadius: getTrackBorderRadius(),\n    // When a transition is applied with the origin, a visible animation plays when it goes below the min.\n    transition: stepAnimation\n      ? `${vertical ? 'height' : 'width'} ease-in-out ${animationTime}${\n          origin !== undefined\n            ? ', ' + vertical\n              ? 'top'\n              : dir === 'rtl'\n              ? 'right'\n              : 'left' + 'ease-in-out ' + animationTime\n            : ''\n        }`\n      : 'none',\n    ...state.track.style,\n  };\n\n  const marksWrapperStyles = marks\n    ? {\n        [vertical ? 'gridTemplateRows' : 'gridTemplateColumns']: markPercent.join(''),\n        ...state.marksWrapper.style,\n      }\n    : {};\n\n  // Root props\n  if (!disabled) {\n    state.root.onPointerDown = onPointerDown;\n    state.root.onKeyDown = onKeyDown;\n  }\n\n  // Track Props\n  state.track.style = trackStyles;\n\n  // Mark props\n  if (marks) {\n    state.marksWrapper.children = renderMarks(markValues);\n    state.marksWrapper.style = marksWrapperStyles;\n  }\n\n  // Thumb Wrapper Props\n  state.thumbWrapper.style = thumbWrapperStyles;\n\n  // Active Rail Props\n  state.activeRail.ref = railRef;\n\n  // Input Props\n  state.input.ref = useMergedRefs(state.input.ref, inputRef);\n  state.input.value = currentValue;\n  state.input.min = min;\n  state.input.max = max;\n  ariaValueText && (state.input['aria-valuetext'] = ariaValueText(currentValue!));\n  state.input.disabled = disabled;\n  state.input.step = step;\n  state.input.onChange = onInputChange;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Slider/useSliderStyles.js

@@ -1,6 +1,6 @@
 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
 import { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';
-import { markClassName } from './useSliderState';
+import { markClassName } from '../../utils/renderMarks';
 var thumbClassName = 'ms-Slider-thumb';
 var trackClassName = 'ms-Slider-track';
 /**
@@ -178,7 +178,7 @@ var useMarksWrapperStyles = /*#__PURE__*/__styles({
     "oeaueh": "f1s6fcnf",
     "Bj3rh1h": "f19g0ac",
     "Huce71": "fz5stix",
-    "qjn08v": "f1m3v5bn",
+    "qjn08v": "f1c8tjkx",
     "gq0jlx": "fs0yg8e"
   },
   "horizontal": {
@@ -208,7 +208,7 @@ var useMarksWrapperStyles = /*#__PURE__*/__styles({
     "B3y1242": "f1f7wb78"
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".f13qh94s{display:grid;}", ".f1s6fcnf{outline-style:none;}", ".f19g0ac{z-index:1;}", ".fz5stix{white-space:nowrap;}", ".f1m3v5bn .ms-Slider-mark{background:white;}", ".fs0yg8e .ms-Slider-firstMark,.ms-Slider-lastMark{opacity:0;}", ".f1getc55{margin-top:calc(var(--slider-rail-size) + var(--slider-mark-size));}", ".f4by7tm{margin-left:calc(var(--slider-thumb-size) / 2);}", ".fnwkpdo{margin-right:calc(var(--slider-thumb-size) / 2);}", ".f1tll2w5{justify-items:end;}", ".f1qlrpgw .ms-Slider-markItemContainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f11ktvba .ms-Slider-markItemContainer{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1m1v5z7 .ms-Slider-markItemContainer{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".f1lr6p2y .ms-Slider-markItemContainer{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".fjsj4y9 .ms-Slider-markItemContainer{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1m0auqq .ms-Slider-mark{height:4px;}", ".fud94rg .ms-Slider-mark{width:1px;}", ".f1bhkots{margin-top:calc(var(--slider-thumb-size) / 2);}", ".f1vpp3yt{margin-bottom:calc(var(--slider-thumb-size) / 2);}", ".f1ntvhyj{margin-left:calc(var(--slider-rail-size) + var(--slider-mark-size));}", ".f1ndstmz{margin-right:calc(var(--slider-rail-size) + var(--slider-mark-size));}", ".f1m2n5bn{justify-items:start;}", ".fuunrxi .ms-Slider-markItemContainer{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fbs4s9x .ms-Slider-markItemContainer{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".fvdh4kd .ms-Slider-markItemContainer{max-width:100%;}", ".f1gn9ffd .ms-Slider-markItemContainer{max-height:100%;}", ".f1lf95u4 .ms-Slider-mark{height:1px;}", ".f1f7wb78 .ms-Slider-mark{width:var(--slider-mark-size);}"]
+  "d": [".f10pi13n{position:relative;}", ".f13qh94s{display:grid;}", ".f1s6fcnf{outline-style:none;}", ".f19g0ac{z-index:1;}", ".fz5stix{white-space:nowrap;}", ".f1c8tjkx .ms-Slider-mark{background:var(--alias-color-neutral-neutralBackground1);}", ".fs0yg8e .ms-Slider-firstMark,.ms-Slider-lastMark{opacity:0;}", ".f1getc55{margin-top:calc(var(--slider-rail-size) + var(--slider-mark-size));}", ".f4by7tm{margin-left:calc(var(--slider-thumb-size) / 2);}", ".fnwkpdo{margin-right:calc(var(--slider-thumb-size) / 2);}", ".f1tll2w5{justify-items:end;}", ".f1qlrpgw .ms-Slider-markItemContainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f11ktvba .ms-Slider-markItemContainer{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1m1v5z7 .ms-Slider-markItemContainer{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".f1lr6p2y .ms-Slider-markItemContainer{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".fjsj4y9 .ms-Slider-markItemContainer{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1m0auqq .ms-Slider-mark{height:4px;}", ".fud94rg .ms-Slider-mark{width:1px;}", ".f1bhkots{margin-top:calc(var(--slider-thumb-size) / 2);}", ".f1vpp3yt{margin-bottom:calc(var(--slider-thumb-size) / 2);}", ".f1ntvhyj{margin-left:calc(var(--slider-rail-size) + var(--slider-mark-size));}", ".f1ndstmz{margin-right:calc(var(--slider-rail-size) + var(--slider-mark-size));}", ".f1m2n5bn{justify-items:start;}", ".fuunrxi .ms-Slider-markItemContainer{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fbs4s9x .ms-Slider-markItemContainer{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".fvdh4kd .ms-Slider-markItemContainer{max-width:100%;}", ".f1gn9ffd .ms-Slider-markItemContainer{max-height:100%;}", ".f1lf95u4 .ms-Slider-mark{height:1px;}", ".f1f7wb78 .ms-Slider-mark{width:var(--slider-mark-size);}"]
 });
 /**
  * Styles for the thumb slot