@fluentui/react-slider 9.0.0-beta.5 → 9.0.0-beta.9

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

@@ -3,197 +3,73 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSliderState = exports.animationTime = void 0;
+exports.useSliderState_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
-const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-const index_1 = /*#__PURE__*/require("../../utils/index"); // TODO: Awaiting animation time from design spec.
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
+const useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
 
-exports.animationTime = '0.1s';
+const getPercent = (value, min, max) => {
+  return max === min ? 0 : (value - min) / (max - min) * 100;
+};
 
-const useSliderState = state => {
+const useSliderState_unstable = state => {
   const {
     value,
     defaultValue = 0,
     min = 0,
     max = 100,
     step = 1,
-    keyboardStep = state.step || 1,
-    disabled = false,
-    ariaValueText,
-    onChange,
-    marks,
-    vertical = false,
+    getAriaValueText,
     origin
   } = state;
-  const {
-    onPointerDown: onPointerDownCallback,
-    onKeyDown: onKeyDownCallback
-  } = state.root;
   const {
     dir
   } = react_shared_contexts_1.useFluent();
-  const [stepAnimation, {
-    setTrue: showStepAnimation,
-    setFalse: hideStepAnimation
-  }] = react_utilities_1.useBoolean(false);
-  const [renderedPosition, setRenderedPosition] = React.useState(value ? value : defaultValue);
   const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
-    state: value && react_utilities_1.clamp(value, min, max),
+    state: value !== undefined ? react_utilities_1.clamp(value, min, max) : undefined,
     defaultState: react_utilities_1.clamp(defaultValue, min, max),
     initialState: 0
   });
-  const railRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const disposables = React.useRef([]);
-  /**
-   * Updates the controlled `currentValue` to the new `incomingValue` and clamps it.
-   */
-
-  const updateValue = react_utilities_1.useEventCallback((incomingValue, ev) => {
-    const clampedValue = react_utilities_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.
-   */
-
-  const updatePosition = React.useCallback((incomingValue, ev) => {
-    setRenderedPosition(react_utilities_1.clamp(incomingValue, min, max));
-    updateValue(incomingValue, ev);
-  }, [max, min, updateValue]);
-
-  const onInputChange = ev => {
-    updatePosition(Number(ev.target.value), ev);
-  };
-
-  const onPointerMove = React.useCallback(ev => {
-    const position = index_1.calculateSteps(ev, railRef, min, max, step, vertical, dir);
-    const currentStepPosition = Math.round(position / step) * step;
-    setRenderedPosition(position);
-    updateValue(currentStepPosition, ev);
-  }, [dir, max, min, step, updateValue, vertical]);
-  const onPointerUp = React.useCallback(ev => {
-    disposables.current.forEach(dispose => dispose());
-    disposables.current = [];
-    showStepAnimation(); // When undefined, the position fallbacks to the currentValue state.
-
-    setRenderedPosition(undefined);
-    inputRef.current.focus();
-  }, [showStepAnimation]);
-  const onPointerDown = React.useCallback(ev => {
-    var _a;
-
-    const {
-      pointerId
-    } = ev;
-    const 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); // eslint-disable-next-line deprecation/deprecation -- Should be remove an replaced with a useEvent hook.
-
-    disposables.current.push(index_1.on(target, 'pointermove', onPointerMove), index_1.on(target, 'pointerup', onPointerUp), () => {
-      var _a;
-
-      (_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
-    });
-    onPointerMove(ev);
-  }, [hideStepAnimation, onPointerDownCallback, onPointerMove, onPointerUp]);
-  const onKeyDown = React.useCallback(ev => {
-    hideStepAnimation();
-    onKeyDownCallback === null || onKeyDownCallback === void 0 ? void 0 : onKeyDownCallback(ev);
-    const incomingValue = index_1.getKeydownValue(ev, currentValue, min, max, dir, keyboardStep);
-
-    if (currentValue !== incomingValue) {
-      updatePosition(incomingValue, ev);
-    }
-  }, [currentValue, dir, hideStepAnimation, keyboardStep, max, min, onKeyDownCallback, updatePosition]);
-
-  const getTrackBorderRadius = () => {
-    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(() => {
-    disposables.current.forEach(dispose => dispose());
-    disposables.current = [];
-  });
-  const valuePercent = index_1.getPercent(renderedPosition !== undefined ? renderedPosition : currentValue, min, max);
+  const valuePercent = getPercent(currentValue, min, max);
   const originPercent = React.useMemo(() => {
-    return origin !== undefined ? index_1.getPercent(origin, min, max) : 0;
+    return origin !== undefined ? getPercent(origin, min, max) : 0;
   }, [max, min, origin]);
-  const markValues = React.useMemo(() => index_1.getMarkValue(marks, min, max, step), [marks, max, min, step]);
-  const markPercent = React.useMemo(() => index_1.getMarkPercent(markValues), [markValues]);
-  const thumbWrapperStyles = {
-    transform: vertical ? `translateY(${valuePercent}%)` : `translateX(${dir === 'rtl' ? -valuePercent : valuePercent}%)`,
-    transition: stepAnimation ? `transform ease-in-out ${exports.animationTime}` : 'none',
-    ...state.thumbWrapper.style
-  };
-  const trackStyles = {
-    [vertical ? 'top' : dir === 'rtl' ? 'right' : 'left']: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : 0,
-    [vertical ? 'height' : 'width']: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`,
-    borderRadius: getTrackBorderRadius(),
-    // When a transition is applied with the origin, a visible animation plays when it goes below the min.
-    transition: stepAnimation ? `${vertical ? 'height' : 'width'} ease-in-out ${exports.animationTime}${origin !== undefined ? ', ' + vertical ? 'top' : dir === 'rtl' ? 'right' : 'left' + 'ease-in-out ' + exports.animationTime : ''}` : 'none',
-    ...state.track.style
-  };
-  const marksWrapperStyles = marks ? {
-    [vertical ? 'gridTemplateRows' : 'gridTemplateColumns']: markPercent.join(''),
-    ...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 = {
+    [useSliderStyles_1.railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
+    [useSliderStyles_1.thumbPositionVar]: valuePercent + '%',
+    [useSliderStyles_1.railStepsPercentVar]: state.step && state.step > 0 ? `${step * 100 / (max - min)}%` : '',
+    [useSliderStyles_1.railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
+    [useSliderStyles_1.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;
+  getAriaValueText && (state.input['aria-valuetext'] = getAriaValueText(currentValue));
+  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 {\n  railOffsetVar,\n  railStepsPercentVar,\n  railProgressVar,\n  thumbPositionVar,\n  railDirectionVar,\n} from './useSliderStyles';\nimport type { SliderState } from './Slider.types';\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, getAriaValueText, 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\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  getAriaValueText && (state.input['aria-valuetext'] = getAriaValueText(currentValue!));\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,49 +1,23 @@
 import type { SliderState } from './Slider.types';
 export declare const sliderClassName = "fui-Slider";
-export declare const thumbClassName: string;
-export declare const trackClassName: string;
-export declare const markContainerClassName: string;
-export declare const firstMarkClassName: string;
-export declare const lastMarkClassName: string;
-export declare const markClassName: string;
-export declare const markLabelClassName: string;
+export declare const railDirectionVar = "--fui-slider-rail-direction";
+export declare const railOffsetVar = "--fui-slider-rail-offset";
+export declare const railProgressVar = "--fui-slider-rail-progress";
+export declare const railStepsPercentVar = "--fui-slider-rail-steps-percent";
+export declare const thumbPositionVar = "--fui-slider-thumb-position";
 /**
  * Styles for the root slot
  */
-export declare const useRootStyles: () => Record<"small" | "disabled" | "medium" | "root" | "horizontal" | "vertical" | "enabled" | "focusIndicator", string>;
-/**
- * Styles for the slider wrapper slot
- */
-export declare const useSliderWrapper: () => Record<"sliderWrapper" | "horizontal" | "vertical", string>;
+export declare const useRootStyles: () => Record<"small" | "disabled" | "horizontal" | "vertical" | "medium" | "root" | "enabled" | "focusIndicatorHorizontal" | "focusIndicatorVertical", string>;
 /**
  * Styles for the rail slot
  */
-export declare const useRailStyles: () => Record<"disabled" | "rail" | "horizontal" | "vertical" | "enabled", string>;
-/**
- * Styles for the trackWrapper slot
- */
-export declare const useTrackWrapperStyles: () => Record<"trackWrapper" | "horizontal" | "vertical", string>;
-/**
- * Styles for the track slot
- */
-export declare const useTrackStyles: () => Record<"track" | "disabled" | "horizontal" | "vertical" | "enabled", string>;
-/**
- * Styles for the mark slot
- */
-export declare const useMarksWrapperStyles: () => Record<"disabled" | "marksWrapper" | "horizontal" | "vertical", string>;
-/**
- * Styles for the thumb slot
- */
-export declare const useThumbWrapperStyles: () => Record<"thumbWrapper" | "horizontal" | "vertical", string>;
+export declare const useRailStyles: () => Record<"horizontal" | "vertical" | "rail", string>;
 /**
  * Styles for the thumb slot
  */
-export declare const useThumbStyles: () => Record<"disabled" | "thumb" | "horizontal" | "enabled", string>;
-/**
- * Styles for the activeRail slot
- */
-export declare const useActiveRailStyles: () => Record<"activeRail" | "horizontal" | "vertical", string>;
+export declare const useThumbStyles: () => Record<"disabled" | "horizontal" | "vertical" | "thumb", 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;