@fluentui/react-slider 9.0.0-alpha.9 → 9.0.0-beta.11

package/lib-commonjs/components/Slider/useSliderState.js

@@ -3,209 +3,79 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSliderState = void 0;
+exports.useSliderState_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
 
-var index_1 = /*#__PURE__*/require("../../utils/index");
+const {
+  railOffsetVar,
+  railStepsPercentVar,
+  railProgressVar,
+  thumbPositionVar,
+  railDirectionVar
+} = useSliderStyles_1.sliderCSSVars;
 
-var useSliderState = function (state) {
-  var _a, _b;
-
-  var value = state.value,
-      _c = state.defaultValue,
-      defaultValue = _c === void 0 ? 0 : _c,
-      _d = state.min,
-      min = _d === void 0 ? 0 : _d,
-      _e = state.max,
-      max = _e === void 0 ? 100 : _e,
-      _f = state.step,
-      step = _f === void 0 ? 1 : _f,
-      _g = state.keyboardStep,
-      keyboardStep = _g === void 0 ? state.step || 1 : _g,
-      _h = state.disabled,
-      disabled = _h === void 0 ? false : _h,
-      ariaValueText = state.ariaValueText,
-      onChange = state.onChange,
-      marks = state.marks,
-      _j = state.vertical,
-      vertical = _j === void 0 ? false : _j,
-      origin = state.origin;
-  var _k = state.root,
-      onPointerDownCallback = _k.onPointerDown,
-      onKeyDownCallback = _k.onKeyDown;
-  var dir = react_shared_contexts_1.useFluent().dir;
-
-  var _l = react_utilities_1.useBoolean(false),
-      stepAnimation = _l[0],
-      _m = _l[1],
-      showStepAnimation = _m.setTrue,
-      hideStepAnimation = _m.setFalse;
-
-  var _o = React.useState(value ? value : defaultValue),
-      renderedPosition = _o[0],
-      setRenderedPosition = _o[1];
+const getPercent = (value, min, max) => {
+  return max === min ? 0 : (value - min) / (max - min) * 100;
+};
 
-  var _p = react_utilities_1.useControllableState({
-    state: value && index_1.clamp(value, min, max),
-    defaultState: index_1.clamp(defaultValue, min, max),
+const useSliderState_unstable = state => {
+  const {
+    value,
+    defaultValue = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    origin
+  } = state;
+  const {
+    dir
+  } = react_shared_contexts_1.useFluent();
+  const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
+    state: value !== undefined ? react_utilities_1.clamp(value, min, max) : undefined,
+    defaultState: react_utilities_1.clamp(defaultValue, min, max),
     initialState: 0
-  }),
-      currentValue = _p[0],
-      setCurrentValue = _p[1];
-
-  var railRef = React.useRef(null);
-  var inputRef = React.useRef(null);
-  var disposables = React.useRef([]);
-  /**
-   * Updates the controlled `currentValue` to the new `incomingValue` and clamps it.
-   */
-
-  var updateValue = react_utilities_1.useEventCallback(function (incomingValue, ev) {
-    var clampedValue = index_1.clamp(incomingValue, min, max);
-
-    if (clampedValue !== min && clampedValue !== max) {
-      ev.stopPropagation();
-
-      if (ev.type === 'keydown') {
-        ev.preventDefault();
-      }
-    }
-
-    onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
-      value: clampedValue
-    });
-    setCurrentValue(clampedValue);
   });
-  /**
-   * Updates the controlled `currentValue` and `renderedPosition` of the Slider.
-   */
-
-  var updatePosition = React.useCallback(function (incomingValue, ev) {
-    setRenderedPosition(index_1.clamp(incomingValue, min, max));
-    updateValue(incomingValue, ev);
-  }, [max, min, updateValue]);
-
-  var onInputChange = function (ev) {
-    updatePosition(Number(ev.target.value), ev);
-  };
-
-  var onPointerMove = React.useCallback(function (ev) {
-    var position = index_1.calculateSteps(ev, railRef, min, max, step, vertical, dir);
-    var currentStepPosition = Math.round(position / step) * step;
-    setRenderedPosition(position);
-    updateValue(currentStepPosition, ev);
-  }, [dir, max, min, step, updateValue, vertical]);
-  var onPointerUp = React.useCallback(function (ev) {
-    disposables.current.forEach(function (dispose) {
-      return dispose();
-    });
-    disposables.current = [];
-    showStepAnimation(); // When undefined, the position fallbacks to the currentValue state.
-
-    setRenderedPosition(undefined);
-    inputRef.current.focus();
-  }, [showStepAnimation]);
-  var onPointerDown = React.useCallback(function (ev) {
-    var _a;
-
-    var pointerId = ev.pointerId;
-    var target = ev.target;
-    (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
-    hideStepAnimation();
-    onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
-    disposables.current.push(index_1.on(target, 'pointermove', onPointerMove), index_1.on(target, 'pointerup', onPointerUp), function () {
-      var _a;
-
-      (_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
-    });
-    onPointerMove(ev);
-  }, [hideStepAnimation, onPointerDownCallback, onPointerMove, onPointerUp]);
-  var onKeyDown = React.useCallback(function (ev) {
-    hideStepAnimation();
-    onKeyDownCallback === null || onKeyDownCallback === void 0 ? void 0 : onKeyDownCallback(ev);
-    var incomingValue = index_1.getKeydownValue(ev, currentValue, min, max, dir, keyboardStep);
-
-    if (currentValue !== incomingValue) {
-      updatePosition(incomingValue, ev);
-    }
-  }, [currentValue, dir, hideStepAnimation, keyboardStep, max, min, onKeyDownCallback, updatePosition]);
-
-  var getTrackBorderRadius = function () {
-    if (origin !== undefined && origin !== (max || min)) {
-      if (vertical) {
-        return originPercent > valuePercent ? '99px 99px 0px 0px' : '0px 0px 99px 99px';
-      } else {
-        return (dir === 'rtl' ? valuePercent > originPercent : valuePercent < originPercent) ? '99px 0px 0px 99px' : '0px 99px 99px 0px';
-      }
-    }
-
-    return '99px';
-  };
-
-  react_utilities_1.useUnmount(function () {
-    disposables.current.forEach(function (dispose) {
-      return dispose();
-    });
-    disposables.current = [];
-  }); // TODO: Awaiting animation time from design spec.
-
-  var animationTime = '0.1s';
-  var valuePercent = index_1.getPercent(renderedPosition !== undefined ? renderedPosition : currentValue, min, max);
-  var originPercent = React.useMemo(function () {
-    return origin !== undefined ? index_1.getPercent(origin, min, max) : 0;
+  const valuePercent = getPercent(currentValue, min, max);
+  const originPercent = React.useMemo(() => {
+    return origin !== undefined ? getPercent(origin, min, max) : 0;
   }, [max, min, origin]);
-  var markValues = React.useMemo(function () {
-    return index_1.getMarkValue(marks, min, max, step);
-  }, [marks, max, min, step]);
-  var markPercent = React.useMemo(function () {
-    return index_1.getMarkPercent(markValues);
-  }, [markValues]);
-
-  var thumbWrapperStyles = tslib_1.__assign({
-    transform: vertical ? "translateY(" + valuePercent + "%)" : "translateX(" + (dir === 'rtl' ? -valuePercent : valuePercent) + "%)",
-    transition: stepAnimation ? "transform ease-in-out " + animationTime : 'none'
-  }, state.thumbWrapper.style);
-
-  var trackStyles = tslib_1.__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 ? tslib_1.__assign((_b = {}, _b[vertical ? 'gridTemplateRows' : 'gridTemplateColumns'] = markPercent.join(''), _b), state.marksWrapper.style) : {}; // Root props
-
-  if (!disabled) {
-    state.root.onPointerDown = onPointerDown;
-    state.root.onKeyDown = onKeyDown;
-  } // Track Props
-
-
-  state.track.style = trackStyles; // Mark props
-
-  if (marks) {
-    state.marksWrapper.children = index_1.renderMarks(markValues, marks);
-    state.marksWrapper.style = marksWrapperStyles;
-  } // Thumb Wrapper Props
-
-
-  state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
-
-  state.activeRail.ref = railRef; // Input Props
+  const inputOnChange = state.input.onChange;
+  const propsOnChange = state.onChange;
+  const onChange = react_utilities_1.useEventCallback(ev => {
+    const newValue = Number(ev.target.value);
+    setCurrentValue(react_utilities_1.clamp(newValue, min, max));
+
+    if (inputOnChange && inputOnChange !== propsOnChange) {
+      inputOnChange(ev);
+    } else if (propsOnChange) {
+      propsOnChange(ev, {
+        value: newValue
+      });
+    }
+  });
+  const rootVariables = {
+    [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
+    [thumbPositionVar]: valuePercent + '%',
+    [railStepsPercentVar]: state.step && state.step > 0 ? `${step * 100 / (max - min)}%` : '',
+    [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
+    [railProgressVar]: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`
+  }; // Root props
+
+  state.root.style = { ...rootVariables,
+    ...state.root.style
+  }; // Input Props
 
-  state.input.ref = react_utilities_1.useMergedRefs(state.input.ref, inputRef);
   state.input.value = currentValue;
-  state.input.min = min;
-  state.input.max = max;
-  ariaValueText && (state.input['aria-valuetext'] = ariaValueText(currentValue));
-  state.input.disabled = disabled;
-  state.input.step = step;
-  state.input.onChange = onInputChange;
+  state.input.onChange = onChange;
   return state;
 };
 
-exports.useSliderState = useSliderState;
+exports.useSliderState_unstable = useSliderState_unstable;
 //# sourceMappingURL=useSliderState.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState } from './Slider.types';\n\nconst { railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar, railDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState) => {\n  const { value, defaultValue = 0, min = 0, max = 100, step = 1, origin } = state;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value !== undefined ? clamp(value, min, max) : undefined,\n    defaultState: clamp(defaultValue, min, max),\n    initialState: 0,\n  });\n  const valuePercent = getPercent(currentValue, min, max);\n  const originPercent = React.useMemo(() => {\n    return origin !== undefined ? getPercent(origin, min, max) : 0;\n  }, [max, min, origin]);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = state.onChange;\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n    const newValue = Number(ev.target.value);\n    setCurrentValue(clamp(newValue, min, max));\n\n    if (inputOnChange && inputOnChange !== propsOnChange) {\n      inputOnChange(ev);\n    } else if (propsOnChange) {\n      propsOnChange(ev, { value: newValue });\n    }\n  });\n\n  const rootVariables = {\n    [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [thumbPositionVar]: valuePercent + '%',\n    [railStepsPercentVar]: state.step && state.step > 0 ? `${(step * 100) / (max - min)}%` : '',\n    [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',\n    [railProgressVar]:\n      origin !== undefined\n        ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n        : `${valuePercent}%`,\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = currentValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Slider/useSliderStyles.d.ts

@@ -1,5 +1,14 @@
-import type { SliderState } from './Slider.types';
+import type { SliderState, SliderSlots } from './Slider.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+export declare const sliderClassNames: SlotClassNames<SliderSlots>;
+export declare const sliderCSSVars: {
+    railDirectionVar: string;
+    railOffsetVar: string;
+    railProgressVar: string;
+    railStepsPercentVar: string;
+    thumbPositionVar: string;
+};
 /**
  * Apply styling to the Slider slots based on the state
  */
-export declare const useSliderStyles: (state: SliderState) => SliderState;
+export declare const useSliderStyles_unstable: (state: SliderState) => SliderState;