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

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@fluentui/react-slider",
   "entries": [
     {
-      "date": "Thu, 16 Sep 2021 07:35:43 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": {

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Thu, 16 Sep 2021 07:35:43 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:35:43 GMT 
+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

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<SliderProps & 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<SliderProps & 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":"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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 { 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';
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SliderState } from './Slider.types';\nimport { markClassName } from './useSliderState';\n\nconst thumbClassName = 'ms-Slider-thumb';\nconst trackClassName = 'ms-Slider-track';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: theme => ({\n    position: 'relative',\n    display: 'inline-flex',\n    userSelect: 'none',\n    touchAction: 'none',\n    verticalAlign: 'bottom',\n  }),\n\n  small: {\n    '--slider-thumb-size': '10px',\n    '--slider-rail-size': '2px',\n    '--slider-mark-size': '2px',\n  },\n\n  medium: {\n    '--slider-thumb-size': '20px',\n    '--slider-rail-size': '4px',\n    '--slider-mark-size': '4px',\n  },\n\n  horizontal: theme => ({\n    minWidth: '120px',\n    minHeight: 'var(--slider-thumb-size)',\n    flexDirection: 'column',\n  }),\n\n  vertical: theme => ({\n    transform: 'scaleY(-1)',\n    minWidth: 'var(--slider-thumb-size)',\n    minHeight: '120px',\n    flexDirection: 'row',\n  }),\n\n  enabled: theme => ({\n    cursor: 'grab',\n    ':hover': {\n      '& .ms-Slider-thumb': {\n        background: theme.alias.color.neutral.brandBackgroundHover,\n      },\n      '& .ms-Slider-track': {\n        background: theme.alias.color.neutral.brandBackgroundHover,\n      },\n    },\n    ':active': {\n      cursor: 'grabbing',\n      '& .ms-Slider-thumb': {\n        background: theme.alias.color.neutral.brandBackgroundPressed,\n      },\n      '& .ms-Slider-track': {\n        background: theme.alias.color.neutral.brandBackgroundPressed,\n      },\n    },\n  }),\n\n  disabled: theme => ({\n    cursor: 'not-allowed',\n  }),\n\n  focusIndicator: createFocusIndicatorStyleRule(\n    theme => ({\n      ':after': {\n        content: \"''\",\n        position: 'absolute',\n        top: '-6px',\n        right: '-6px',\n        bottom: '-6px',\n        left: '-6px',\n        boxSizing: 'border-box',\n        border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n        borderRadius: theme.global.borderRadius.medium,\n      },\n    }),\n    { selector: 'focus-within' },\n  ),\n});\n\n/**\n * Styles for the slider wrapper slot\n */\nconst useSliderWrapper = makeStyles({\n  sliderWrapper: theme => ({\n    position: 'absolute',\n    overflow: 'hidden',\n  }),\n\n  horizontal: theme => ({\n    left: '0px',\n    right: '0px',\n    top: '0px',\n    minHeight: 'var(--slider-thumb-size)',\n  }),\n\n  vertical: theme => ({\n    top: '0px',\n    bottom: '0px',\n    left: '0px',\n    minWidth: 'var(--slider-thumb-size)',\n  }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: theme => ({\n    position: 'absolute',\n    borderRadius: theme.global.borderRadius.xLarge,\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.neutralStrokeAccessible,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n  }),\n\n  horizontal: theme => ({\n    height: 'var(--slider-rail-size)',\n    top: '50%',\n    left: 'calc(var(--slider-thumb-size) * .5)',\n    right: 'calc(var(--slider-thumb-size) * .5)',\n    transform: 'translateY(-50%)',\n  }),\n\n  vertical: theme => ({\n    width: 'var(--slider-rail-size)',\n    left: '50%',\n    top: 'calc(var(--slider-thumb-size) * .5)',\n    bottom: 'calc(var(--slider-thumb-size) * .5)',\n    transform: 'translateX(-50%)',\n  }),\n});\n\n/**\n * Styles for the trackWrapper slot\n */\nconst useTrackWrapperStyles = makeStyles({\n  trackWrapper: theme => ({\n    position: 'absolute',\n  }),\n\n  horizontal: theme => ({\n    top: '50%',\n    left: 'calc(var(--slider-thumb-size) * .5)',\n    right: 'calc(var(--slider-thumb-size) * .5)',\n  }),\n\n  vertical: theme => ({\n    left: '50%',\n    top: 'calc(var(--slider-thumb-size) * .5)',\n    bottom: 'calc(var(--slider-thumb-size) * .5)',\n  }),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n  track: theme => ({\n    position: 'absolute',\n    borderRadius: theme.global.borderRadius.xLarge,\n  }),\n\n  horizontal: theme => ({\n    height: 'var(--slider-rail-size)',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    minWidth: 'calc(var(--slider-thumb-size) / 4)',\n  }),\n\n  vertical: theme => ({\n    width: 'var(--slider-rail-size)',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    minHeight: 'calc(var(--slider-thumb-size) / 4)',\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralForegroundDisabled,\n  }),\n});\n\n/**\n * Styles for the mark slot\n */\nconst useMarksWrapperStyles = makeStyles({\n  marksWrapper: theme => ({\n    position: 'relative',\n    display: 'grid',\n    outline: 'none',\n    zIndex: '1',\n    whiteSpace: 'nowrap',\n    [`& .${markClassName}`]: {\n      background: theme.alias.color.neutral.neutralBackground1,\n    },\n\n    '& .ms-Slider-firstMark, .ms-Slider-lastMark': {\n      opacity: '0',\n    },\n  }),\n\n  horizontal: theme => ({\n    marginTop: 'calc(var(--slider-rail-size) + var(--slider-mark-size))',\n    marginLeft: 'calc(var(--slider-thumb-size) / 2)',\n    marginRight: 'calc(var(--slider-thumb-size) / 2)',\n    justifyItems: 'end',\n\n    '& .ms-Slider-markItemContainer': {\n      display: 'flex',\n      flexDirection: 'column',\n      transform: 'translateX(50%)',\n      alignItems: 'center',\n    },\n\n    [`& .${markClassName}`]: {\n      height: '4px',\n      width: '1px',\n    },\n  }),\n\n  vertical: theme => ({\n    marginTop: 'calc(var(--slider-thumb-size) / 2)',\n    marginBottom: 'calc(var(--slider-thumb-size) / 2)',\n    marginLeft: 'calc(var(--slider-rail-size) + var(--slider-mark-size))',\n    justifyItems: 'start',\n\n    '& .ms-Slider-markItemContainer': {\n      display: 'flex',\n      flexDirection: 'row',\n      transform: 'translateY(50%)',\n      alignItems: 'center',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    },\n\n    [`& .${markClassName}`]: {\n      height: '1px',\n      width: 'var(--slider-mark-size)',\n    },\n  }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbWrapperStyles = makeStyles({\n  thumbWrapper: theme => ({\n    position: 'absolute',\n    outline: 'none',\n    zIndex: '2',\n  }),\n\n  horizontal: theme => ({\n    left: 'calc(var(--slider-thumb-size) / 2)',\n    right: 'calc(var(--slider-thumb-size) / 2)',\n    top: '50%',\n  }),\n\n  vertical: theme => ({\n    top: 'calc(var(--slider-thumb-size) / 2)',\n    bottom: 'calc(var(--slider-thumb-size) / 2)',\n    left: '50%',\n  }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: theme => ({\n    position: 'absolute',\n    width: 'var(--slider-thumb-size)',\n    height: 'var(--slider-thumb-size)',\n    top: '0px',\n    left: '0px',\n    bottom: '0px',\n    right: '0px',\n    outline: 'none',\n    borderRadius: theme.global.borderRadius.circular,\n    boxSizing: 'border-box',\n    boxShadow: `0 0 0 calc(var(--slider-thumb-size) * .2) ${theme.alias.color.neutral.neutralBackground1} inset`,\n    transform: 'translate(-50%, -50%)',\n\n    ':before': {\n      position: 'absolute',\n      top: '0px',\n      left: '0px',\n      bottom: '0px',\n      right: '0px',\n      borderRadius: theme.global.borderRadius.circular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `calc(var(--slider-thumb-size) * .05) solid ${theme.alias.color.neutral.neutralStroke1}`,\n    },\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralForegroundDisabled,\n    border: `calc(var(--slider-thumb-size) * .05) solid ${theme.alias.color.neutral.neutralBackgroundDisabled}`,\n  }),\n\n  horizontal: theme => ({\n    top: '50%',\n  }),\n});\n\n/**\n * Styles for the activeRail slot\n */\nconst useActiveRailStyles = makeStyles({\n  activeRail: theme => ({\n    position: 'absolute',\n  }),\n\n  horizontal: theme => ({\n    left: 'calc(var(--slider-thumb-size) / 2)',\n    right: 'calc(var(--slider-thumb-size) / 2)',\n  }),\n\n  vertical: theme => ({\n    top: 'calc(var(--slider-thumb-size) / 2)',\n    bottom: 'calc(var(--slider-thumb-size) / 2)',\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    opacity: 0,\n    position: 'absolute',\n    padding: 0,\n    margin: 0,\n    width: '100%',\n    height: '100%',\n    touchAction: 'none',\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles = (state: SliderState): SliderState => {\n  const rootStyles = useRootStyles();\n  const sliderWrapperStyles = useSliderWrapper();\n  const railStyles = useRailStyles();\n  const trackWrapperStyles = useTrackWrapperStyles();\n  const trackStyles = useTrackStyles();\n  const marksWrapperStyles = useMarksWrapperStyles();\n  const thumbWrapperStyles = useThumbWrapperStyles();\n  const thumbStyles = useThumbStyles();\n  const activeRailStyles = useActiveRailStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    rootStyles.root,\n    rootStyles.focusIndicator,\n    rootStyles[state.size!],\n    state.vertical ? rootStyles.vertical : rootStyles.horizontal,\n    state.disabled ? rootStyles.disabled : rootStyles.enabled,\n    rootStyles.focusIndicator,\n    state.root.className,\n  );\n\n  state.sliderWrapper.className = mergeClasses(\n    sliderWrapperStyles.sliderWrapper,\n    state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal,\n    state.sliderWrapper.className,\n  );\n\n  state.rail.className = mergeClasses(\n    railStyles.rail,\n    state.vertical ? railStyles.vertical : railStyles.horizontal,\n    state.disabled ? railStyles.disabled : railStyles.enabled,\n    state.rail.className,\n  );\n\n  state.sliderWrapper.className = mergeClasses(\n    sliderWrapperStyles.sliderWrapper,\n    state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal,\n    state.sliderWrapper.className,\n  );\n\n  state.trackWrapper.className = mergeClasses(\n    trackWrapperStyles.trackWrapper,\n    state.vertical ? trackWrapperStyles.vertical : trackWrapperStyles.horizontal,\n    state.trackWrapper.className,\n  );\n\n  state.track.className = mergeClasses(\n    trackClassName,\n    trackStyles.track,\n    state.vertical ? trackStyles.vertical : trackStyles.horizontal,\n    state.disabled ? trackStyles.disabled : trackStyles.enabled,\n    state.track.className,\n  );\n\n  state.marksWrapper.className = mergeClasses(\n    marksWrapperStyles.marksWrapper,\n    state.vertical ? marksWrapperStyles.vertical : marksWrapperStyles.horizontal,\n    state.marksWrapper.className,\n  );\n\n  state.thumbWrapper.className = mergeClasses(\n    thumbWrapperStyles.thumbWrapper,\n    state.vertical ? thumbWrapperStyles.vertical : thumbWrapperStyles.horizontal,\n    state.thumbWrapper.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    thumbClassName,\n    thumbStyles.thumb,\n    !state.vertical && thumbStyles.horizontal,\n    state.disabled ? trackStyles.disabled : trackStyles.enabled,\n    state.thumb.className,\n  );\n\n  state.activeRail.className = mergeClasses(\n    activeRailStyles.activeRail,\n    state.vertical ? activeRailStyles.vertical : activeRailStyles.horizontal,\n    state.activeRail.className,\n  );\n\n  state.input.className = mergeClasses(inputStyles.input, state.input.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SliderState } from './Slider.types';\nimport { markClassName } from '../../utils/renderMarks';\n\nconst thumbClassName = 'ms-Slider-thumb';\nconst trackClassName = 'ms-Slider-track';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: theme => ({\n    position: 'relative',\n    display: 'inline-flex',\n    userSelect: 'none',\n    touchAction: 'none',\n    verticalAlign: 'bottom',\n  }),\n\n  small: {\n    '--slider-thumb-size': '10px',\n    '--slider-rail-size': '2px',\n    '--slider-mark-size': '2px',\n  },\n\n  medium: {\n    '--slider-thumb-size': '20px',\n    '--slider-rail-size': '4px',\n    '--slider-mark-size': '4px',\n  },\n\n  horizontal: theme => ({\n    minWidth: '120px',\n    minHeight: 'var(--slider-thumb-size)',\n    flexDirection: 'column',\n  }),\n\n  vertical: theme => ({\n    transform: 'scaleY(-1)',\n    minWidth: 'var(--slider-thumb-size)',\n    minHeight: '120px',\n    flexDirection: 'row',\n  }),\n\n  enabled: theme => ({\n    cursor: 'grab',\n    ':hover': {\n      '& .ms-Slider-thumb': {\n        background: theme.alias.color.neutral.brandBackgroundHover,\n      },\n      '& .ms-Slider-track': {\n        background: theme.alias.color.neutral.brandBackgroundHover,\n      },\n    },\n    ':active': {\n      cursor: 'grabbing',\n      '& .ms-Slider-thumb': {\n        background: theme.alias.color.neutral.brandBackgroundPressed,\n      },\n      '& .ms-Slider-track': {\n        background: theme.alias.color.neutral.brandBackgroundPressed,\n      },\n    },\n  }),\n\n  disabled: theme => ({\n    cursor: 'not-allowed',\n  }),\n\n  focusIndicator: createFocusIndicatorStyleRule(\n    theme => ({\n      ':after': {\n        content: \"''\",\n        position: 'absolute',\n        top: '-6px',\n        right: '-6px',\n        bottom: '-6px',\n        left: '-6px',\n        boxSizing: 'border-box',\n        border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n        borderRadius: theme.global.borderRadius.medium,\n      },\n    }),\n    { selector: 'focus-within' },\n  ),\n});\n\n/**\n * Styles for the slider wrapper slot\n */\nconst useSliderWrapper = makeStyles({\n  sliderWrapper: theme => ({\n    position: 'absolute',\n    overflow: 'hidden',\n  }),\n\n  horizontal: theme => ({\n    left: '0px',\n    right: '0px',\n    top: '0px',\n    minHeight: 'var(--slider-thumb-size)',\n  }),\n\n  vertical: theme => ({\n    top: '0px',\n    bottom: '0px',\n    left: '0px',\n    minWidth: 'var(--slider-thumb-size)',\n  }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: theme => ({\n    position: 'absolute',\n    borderRadius: theme.global.borderRadius.xLarge,\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.neutralStrokeAccessible,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n  }),\n\n  horizontal: theme => ({\n    height: 'var(--slider-rail-size)',\n    top: '50%',\n    left: 'calc(var(--slider-thumb-size) * .5)',\n    right: 'calc(var(--slider-thumb-size) * .5)',\n    transform: 'translateY(-50%)',\n  }),\n\n  vertical: theme => ({\n    width: 'var(--slider-rail-size)',\n    left: '50%',\n    top: 'calc(var(--slider-thumb-size) * .5)',\n    bottom: 'calc(var(--slider-thumb-size) * .5)',\n    transform: 'translateX(-50%)',\n  }),\n});\n\n/**\n * Styles for the trackWrapper slot\n */\nconst useTrackWrapperStyles = makeStyles({\n  trackWrapper: theme => ({\n    position: 'absolute',\n  }),\n\n  horizontal: theme => ({\n    top: '50%',\n    left: 'calc(var(--slider-thumb-size) * .5)',\n    right: 'calc(var(--slider-thumb-size) * .5)',\n  }),\n\n  vertical: theme => ({\n    left: '50%',\n    top: 'calc(var(--slider-thumb-size) * .5)',\n    bottom: 'calc(var(--slider-thumb-size) * .5)',\n  }),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n  track: theme => ({\n    position: 'absolute',\n    borderRadius: theme.global.borderRadius.xLarge,\n  }),\n\n  horizontal: theme => ({\n    height: 'var(--slider-rail-size)',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    minWidth: 'calc(var(--slider-thumb-size) / 4)',\n  }),\n\n  vertical: theme => ({\n    width: 'var(--slider-rail-size)',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    minHeight: 'calc(var(--slider-thumb-size) / 4)',\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralForegroundDisabled,\n  }),\n});\n\n/**\n * Styles for the mark slot\n */\nconst useMarksWrapperStyles = makeStyles({\n  marksWrapper: theme => ({\n    position: 'relative',\n    display: 'grid',\n    outline: 'none',\n    zIndex: '1',\n    whiteSpace: 'nowrap',\n    [`& .${markClassName}`]: {\n      background: theme.alias.color.neutral.neutralBackground1,\n    },\n\n    '& .ms-Slider-firstMark, .ms-Slider-lastMark': {\n      opacity: '0',\n    },\n  }),\n\n  horizontal: theme => ({\n    marginTop: 'calc(var(--slider-rail-size) + var(--slider-mark-size))',\n    marginLeft: 'calc(var(--slider-thumb-size) / 2)',\n    marginRight: 'calc(var(--slider-thumb-size) / 2)',\n    justifyItems: 'end',\n\n    '& .ms-Slider-markItemContainer': {\n      display: 'flex',\n      flexDirection: 'column',\n      transform: 'translateX(50%)',\n      alignItems: 'center',\n    },\n\n    [`& .${markClassName}`]: {\n      height: '4px',\n      width: '1px',\n    },\n  }),\n\n  vertical: theme => ({\n    marginTop: 'calc(var(--slider-thumb-size) / 2)',\n    marginBottom: 'calc(var(--slider-thumb-size) / 2)',\n    marginLeft: 'calc(var(--slider-rail-size) + var(--slider-mark-size))',\n    justifyItems: 'start',\n\n    '& .ms-Slider-markItemContainer': {\n      display: 'flex',\n      flexDirection: 'row',\n      transform: 'translateY(50%)',\n      alignItems: 'center',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    },\n\n    [`& .${markClassName}`]: {\n      height: '1px',\n      width: 'var(--slider-mark-size)',\n    },\n  }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbWrapperStyles = makeStyles({\n  thumbWrapper: theme => ({\n    position: 'absolute',\n    outline: 'none',\n    zIndex: '2',\n  }),\n\n  horizontal: theme => ({\n    left: 'calc(var(--slider-thumb-size) / 2)',\n    right: 'calc(var(--slider-thumb-size) / 2)',\n    top: '50%',\n  }),\n\n  vertical: theme => ({\n    top: 'calc(var(--slider-thumb-size) / 2)',\n    bottom: 'calc(var(--slider-thumb-size) / 2)',\n    left: '50%',\n  }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: theme => ({\n    position: 'absolute',\n    width: 'var(--slider-thumb-size)',\n    height: 'var(--slider-thumb-size)',\n    top: '0px',\n    left: '0px',\n    bottom: '0px',\n    right: '0px',\n    outline: 'none',\n    borderRadius: theme.global.borderRadius.circular,\n    boxSizing: 'border-box',\n    boxShadow: `0 0 0 calc(var(--slider-thumb-size) * .2) ${theme.alias.color.neutral.neutralBackground1} inset`,\n    transform: 'translate(-50%, -50%)',\n\n    ':before': {\n      position: 'absolute',\n      top: '0px',\n      left: '0px',\n      bottom: '0px',\n      right: '0px',\n      borderRadius: theme.global.borderRadius.circular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `calc(var(--slider-thumb-size) * .05) solid ${theme.alias.color.neutral.neutralStroke1}`,\n    },\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralForegroundDisabled,\n    border: `calc(var(--slider-thumb-size) * .05) solid ${theme.alias.color.neutral.neutralBackgroundDisabled}`,\n  }),\n\n  horizontal: theme => ({\n    top: '50%',\n  }),\n});\n\n/**\n * Styles for the activeRail slot\n */\nconst useActiveRailStyles = makeStyles({\n  activeRail: theme => ({\n    position: 'absolute',\n  }),\n\n  horizontal: theme => ({\n    left: 'calc(var(--slider-thumb-size) / 2)',\n    right: 'calc(var(--slider-thumb-size) / 2)',\n  }),\n\n  vertical: theme => ({\n    top: 'calc(var(--slider-thumb-size) / 2)',\n    bottom: 'calc(var(--slider-thumb-size) / 2)',\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    opacity: 0,\n    position: 'absolute',\n    padding: 0,\n    margin: 0,\n    width: '100%',\n    height: '100%',\n    touchAction: 'none',\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles = (state: SliderState): SliderState => {\n  const rootStyles = useRootStyles();\n  const sliderWrapperStyles = useSliderWrapper();\n  const railStyles = useRailStyles();\n  const trackWrapperStyles = useTrackWrapperStyles();\n  const trackStyles = useTrackStyles();\n  const marksWrapperStyles = useMarksWrapperStyles();\n  const thumbWrapperStyles = useThumbWrapperStyles();\n  const thumbStyles = useThumbStyles();\n  const activeRailStyles = useActiveRailStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    rootStyles.root,\n    rootStyles.focusIndicator,\n    rootStyles[state.size!],\n    state.vertical ? rootStyles.vertical : rootStyles.horizontal,\n    state.disabled ? rootStyles.disabled : rootStyles.enabled,\n    rootStyles.focusIndicator,\n    state.root.className,\n  );\n\n  state.sliderWrapper.className = mergeClasses(\n    sliderWrapperStyles.sliderWrapper,\n    state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal,\n    state.sliderWrapper.className,\n  );\n\n  state.rail.className = mergeClasses(\n    railStyles.rail,\n    state.vertical ? railStyles.vertical : railStyles.horizontal,\n    state.disabled ? railStyles.disabled : railStyles.enabled,\n    state.rail.className,\n  );\n\n  state.sliderWrapper.className = mergeClasses(\n    sliderWrapperStyles.sliderWrapper,\n    state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal,\n    state.sliderWrapper.className,\n  );\n\n  state.trackWrapper.className = mergeClasses(\n    trackWrapperStyles.trackWrapper,\n    state.vertical ? trackWrapperStyles.vertical : trackWrapperStyles.horizontal,\n    state.trackWrapper.className,\n  );\n\n  state.track.className = mergeClasses(\n    trackClassName,\n    trackStyles.track,\n    state.vertical ? trackStyles.vertical : trackStyles.horizontal,\n    state.disabled ? trackStyles.disabled : trackStyles.enabled,\n    state.track.className,\n  );\n\n  state.marksWrapper.className = mergeClasses(\n    marksWrapperStyles.marksWrapper,\n    state.vertical ? marksWrapperStyles.vertical : marksWrapperStyles.horizontal,\n    state.marksWrapper.className,\n  );\n\n  state.thumbWrapper.className = mergeClasses(\n    thumbWrapperStyles.thumbWrapper,\n    state.vertical ? thumbWrapperStyles.vertical : thumbWrapperStyles.horizontal,\n    state.thumbWrapper.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    thumbClassName,\n    thumbStyles.thumb,\n    !state.vertical && thumbStyles.horizontal,\n    state.disabled ? trackStyles.disabled : trackStyles.enabled,\n    state.thumb.className,\n  );\n\n  state.activeRail.className = mergeClasses(\n    activeRailStyles.activeRail,\n    state.vertical ? activeRailStyles.vertical : activeRailStyles.horizontal,\n    state.activeRail.className,\n  );\n\n  state.input.className = mergeClasses(inputStyles.input, state.input.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/calculateSteps.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.
+ */
+export declare const calculateSteps: (ev: React.PointerEvent<HTMLDivElement>, railRef: React.RefObject<HTMLDivElement>, min: number, max: number, step: number, vertical: boolean, dir: 'ltr' | 'rtl') => number;

package/lib/utils/calculateSteps.js

@@ -0,0 +1,27 @@
+import { clamp } from './clamp';
+/**
+ * Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.
+ */
+
+export var calculateSteps = function (ev, railRef, min, max, step, vertical, dir) {
+  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 clamp(min + step * (distance / stepLength), min, max);
+};
+//# sourceMappingURL=calculateSteps.js.map

package/lib/utils/calculateSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/calculateSteps.ts"],"names":[],"mappings":"AACA,SAAS,KAAT,QAAsB,SAAtB;AAEA;;AAEG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,EAD4B,EAE5B,OAF4B,EAG5B,GAH4B,EAI5B,GAJ4B,EAK5B,IAL4B,EAM5B,QAN4B,EAO5B,GAP4B,EAOV;;;AAElB,MAAM,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,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAc,CAAC,MAAlB,GAA2B,aAAc,CAAC,KAArE;AACA,MAAI,QAAJ;;AAEA,MAAI,QAAJ,EAAc;AACZ,IAAA,QAAQ,GAAG,aAAc,CAAC,MAA1B;AACD,GAFD,MAEO,IAAI,GAAG,KAAK,KAAZ,EAAmB;AACxB,IAAA,QAAQ,GAAG,aAAc,CAAC,KAA1B;AACD,GAFM,MAEA;AACL,IAAA,QAAQ,GAAG,aAAc,CAAC,IAA1B;AACD;;AAED,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAjC;AACA,MAAM,UAAU,GAAG,UAAU,GAAG,UAAhC;AACA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAC,OAAN,GAAgB,EAAE,CAAC,OAAjD;AACA,MAAM,QAAQ,GAAG,GAAG,KAAK,KAAR,IAAiB,QAAjB,GAA4B,QAAQ,GAAG,aAAvC,GAAuD,aAAa,GAAG,QAAxF;AAEA,SAAO,KAAK,CAAC,GAAG,GAAG,IAAI,IAAI,QAAQ,GAAG,UAAf,CAAX,EAAuC,GAAvC,EAA4C,GAA5C,CAAZ;AACD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { clamp } from './clamp';\n\n/**\n * Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.\n */\nexport const calculateSteps = (\n  ev: React.PointerEvent<HTMLDivElement>,\n  railRef: React.RefObject<HTMLDivElement>,\n  min: number,\n  max: number,\n  step: number,\n  vertical: boolean,\n  dir: 'ltr' | 'rtl',\n): 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 clamp(min + step * (distance / stepLength), min, max);\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/clamp.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Clamps `value` to a number between the min and max.
+ *
+ * @param value - the value to be clamped
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export declare const clamp: (value: number, min: number, max: number) => number;

package/lib/utils/clamp.js

@@ -0,0 +1,11 @@
+/**
+ * Clamps `value` to a number between the min and max.
+ *
+ * @param value - the value to be clamped
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export var clamp = function (value, min, max) {
+  return Math.max(min, Math.min(max, value || 0));
+};
+//# sourceMappingURL=clamp.js.map

package/lib/utils/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAO,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","sourcesContent":["/**\n * Clamps `value` to a number 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 */\nexport const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value || 0));\n"],"sourceRoot":"../src/"}

package/lib/utils/getKeydownValue.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Determines the incoming value for the Slider based off of a keyboard event.
+ * It automatically flips the key direction if the dir parameter is rtl.
+ */
+export declare const getKeydownValue: (ev: React.KeyboardEvent<HTMLDivElement>, currentValue: number, min: number, max: number, dir: 'ltr' | 'rtl', keyboardStep: number) => number;

package/lib/utils/getKeydownValue.js

@@ -0,0 +1,39 @@
+import { getRTLSafeKey } from './getRTLSafeKey';
+/**
+ * Determines the incoming value for the Slider based off of a keyboard event.
+ * It automatically flips the key direction if the dir parameter is rtl.
+ */
+
+export var getKeydownValue = function (ev, currentValue, min, max, dir, keyboardStep) {
+  var normalizedKey = getRTLSafeKey(ev.key, dir);
+
+  if (ev.shiftKey) {
+    if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {
+      return currentValue - keyboardStep * 10;
+    } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {
+      return currentValue + keyboardStep * 10;
+    }
+  } else if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {
+    return currentValue - keyboardStep;
+  } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {
+    return currentValue + keyboardStep;
+  } else {
+    switch (normalizedKey) {
+      case 'PageDown':
+        return currentValue - keyboardStep * 10;
+        break;
+
+      case 'PageUp':
+        return currentValue + keyboardStep * 10;
+
+      case 'Home':
+        return min;
+
+      case 'End':
+        return max;
+    }
+  }
+
+  return currentValue;
+};
+//# sourceMappingURL=getKeydownValue.js.map