@vodafone_de/brix-components 3.1.6 → 3.1.8

package/esm/Slider/useSlider.js

@@ -1,701 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import ownerDocument from '@mui/utils/ownerDocument';
-import useControlled from '@mui/utils/useControlled';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useForkRef from '@mui/utils/useForkRef';
-import isFocusVisible from '@mui/utils/isFocusVisible';
-import visuallyHidden from '@mui/utils/visuallyHidden';
-import clamp from '@mui/utils/clamp';
-import extractEventHandlers from '@mui/utils/extractEventHandlers';
-import areArraysEqual from "../utils/areArraysEqual.js";
-const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
-function getNewValue(currentValue, step, direction, min, max) {
-  return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
-}
-function asc(a, b) {
-  return a - b;
-}
-function findClosest(values, currentValue) {
-  const {
-    index: closestIndex
-  } = values.reduce((acc, value, index) => {
-    const distance = Math.abs(currentValue - value);
-    if (acc === null || distance < acc.distance || distance === acc.distance) {
-      return {
-        distance,
-        index
-      };
-    }
-    return acc;
-  }, null) ?? {};
-  return closestIndex;
-}
-function trackFinger(event, touchId) {
-  // The event is TouchEvent
-  if (touchId.current !== undefined && event.changedTouches) {
-    const touchEvent = event;
-    for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
-      const touch = touchEvent.changedTouches[i];
-      if (touch.identifier === touchId.current) {
-        return {
-          x: touch.clientX,
-          y: touch.clientY
-        };
-      }
-    }
-    return false;
-  }
-
-  // The event is MouseEvent
-  return {
-    x: event.clientX,
-    y: event.clientY
-  };
-}
-export function valueToPercent(value, min, max) {
-  return (value - min) * 100 / (max - min);
-}
-function percentToValue(percent, min, max) {
-  return (max - min) * percent + min;
-}
-function getDecimalPrecision(num) {
-  // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
-  // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
-  if (Math.abs(num) < 1) {
-    const parts = num.toExponential().split('e-');
-    const matissaDecimalPart = parts[0].split('.')[1];
-    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
-  }
-  const decimalPart = num.toString().split('.')[1];
-  return decimalPart ? decimalPart.length : 0;
-}
-function roundValueToStep(value, step, min) {
-  const nearest = Math.round((value - min) / step) * step + min;
-  return Number(nearest.toFixed(getDecimalPrecision(step)));
-}
-function setValueIndex({
-  values,
-  newValue,
-  index
-}) {
-  const output = values.slice();
-  output[index] = newValue;
-  return output.sort(asc);
-}
-function focusThumb({
-  sliderRef,
-  activeIndex,
-  setActive
-}) {
-  const doc = ownerDocument(sliderRef.current);
-  if (!sliderRef.current?.contains(doc.activeElement) || Number(doc?.activeElement?.getAttribute('data-index')) !== activeIndex) {
-    sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
-  }
-  if (setActive) {
-    setActive(activeIndex);
-  }
-}
-function areValuesEqual(newValue, oldValue) {
-  if (typeof newValue === 'number' && typeof oldValue === 'number') {
-    return newValue === oldValue;
-  }
-  if (typeof newValue === 'object' && typeof oldValue === 'object') {
-    return areArraysEqual(newValue, oldValue);
-  }
-  return false;
-}
-const axisProps = {
-  horizontal: {
-    offset: percent => ({
-      left: `${percent}%`
-    }),
-    leap: percent => ({
-      width: `${percent}%`
-    })
-  },
-  'horizontal-reverse': {
-    offset: percent => ({
-      right: `${percent}%`
-    }),
-    leap: percent => ({
-      width: `${percent}%`
-    })
-  },
-  vertical: {
-    offset: percent => ({
-      bottom: `${percent}%`
-    }),
-    leap: percent => ({
-      height: `${percent}%`
-    })
-  }
-};
-export const Identity = x => x;
-
-// TODO: remove support for Safari < 13.
-// https://caniuse.com/#search=touch-action
-//
-// Safari, on iOS, supports touch action since v13.
-// Over 80% of the iOS phones are compatible
-// in August 2020.
-// Utilizing the CSS.supports method to check if touch-action is supported.
-// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
-// is supported on both Edge@12 and IE if CSS.supports is not available that means that
-// touch-action will be supported
-let cachedSupportsTouchActionNone;
-function doesSupportTouchActionNone() {
-  if (cachedSupportsTouchActionNone === undefined) {
-    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
-      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
-    } else {
-      cachedSupportsTouchActionNone = true;
-    }
-  }
-  return cachedSupportsTouchActionNone;
-}
-export function useSlider(parameters) {
-  const {
-    'aria-labelledby': ariaLabelledby,
-    defaultValue,
-    disabled = false,
-    disableSwap = false,
-    isRtl = false,
-    marks: marksProp = false,
-    max = 100,
-    min = 0,
-    name,
-    onChange,
-    onChangeCommitted,
-    orientation = 'horizontal',
-    rootRef: ref,
-    scale = Identity,
-    step = 1,
-    shiftStep = 10,
-    tabIndex,
-    value: valueProp
-  } = parameters;
-  const touchId = React.useRef(undefined);
-  // We can't use the :active browser pseudo-classes.
-  // - The active state isn't triggered when clicking on the rail.
-  // - The active state isn't transferred when inversing a range slider.
-  const [active, setActive] = React.useState(-1);
-  const [open, setOpen] = React.useState(-1);
-  const [dragging, setDragging] = React.useState(false);
-  const moveCount = React.useRef(0);
-  // lastChangedValue is updated whenever onChange is triggered.
-  const lastChangedValue = React.useRef(null);
-  const [valueDerived, setValueState] = useControlled({
-    controlled: valueProp,
-    default: defaultValue ?? min,
-    name: 'Slider'
-  });
-  const handleChange = onChange && ((event, value, thumbIndex) => {
-    // Redefine target to allow name and value to be read.
-    // This allows seamless integration with the most popular form libraries.
-    // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
-    // Clone the event to not override `target` of the original event.
-    const nativeEvent = event.nativeEvent || event;
-    // @ts-ignore The nativeEvent is function, not object
-    const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-    Object.defineProperty(clonedEvent, 'target', {
-      writable: true,
-      value: {
-        value,
-        name
-      }
-    });
-    lastChangedValue.current = value;
-    onChange(clonedEvent, value, thumbIndex);
-  });
-  const range = Array.isArray(valueDerived);
-  let values = range ? valueDerived.slice().sort(asc) : [valueDerived];
-  values = values.map(value => value == null ? min : clamp(value, min, max));
-  const marks = marksProp === true && step !== null ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
-    value: min + step * index
-  })) : marksProp || [];
-  const marksValues = marks.map(mark => mark.value);
-  const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
-  const sliderRef = React.useRef(null);
-  const handleRef = useForkRef(ref, sliderRef);
-  const createHandleHiddenInputFocus = otherHandlers => event => {
-    const index = Number(event.currentTarget.getAttribute('data-index'));
-    if (isFocusVisible(event.target)) {
-      setFocusedThumbIndex(index);
-    }
-    setOpen(index);
-    otherHandlers?.onFocus?.(event);
-  };
-  const createHandleHiddenInputBlur = otherHandlers => event => {
-    if (!isFocusVisible(event.target)) {
-      setFocusedThumbIndex(-1);
-    }
-    setOpen(-1);
-    otherHandlers?.onBlur?.(event);
-  };
-  const changeValue = (event, valueInput) => {
-    const index = Number(event.currentTarget.getAttribute('data-index'));
-    const value = values[index];
-    const marksIndex = marksValues.indexOf(value);
-    let newValue = valueInput;
-    if (marks && step == null) {
-      const maxMarksValue = marksValues[marksValues.length - 1];
-      if (newValue >= maxMarksValue) {
-        newValue = maxMarksValue;
-      } else if (newValue <= marksValues[0]) {
-        newValue = marksValues[0];
-      } else {
-        newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
-      }
-    }
-    newValue = clamp(newValue, min, max);
-    if (range) {
-      // Bound the new value to the thumb's neighbours.
-      if (disableSwap) {
-        newValue = clamp(newValue, values[index - 1] || -Infinity, values[index + 1] || Infinity);
-      }
-      const previousValue = newValue;
-      newValue = setValueIndex({
-        values,
-        newValue,
-        index
-      });
-      let activeIndex = index;
-
-      // Potentially swap the index if needed.
-      if (!disableSwap) {
-        activeIndex = newValue.indexOf(previousValue);
-      }
-      focusThumb({
-        sliderRef,
-        activeIndex
-      });
-    }
-    setValueState(newValue);
-    setFocusedThumbIndex(index);
-    if (handleChange && !areValuesEqual(newValue, valueDerived)) {
-      handleChange(event, newValue, index);
-    }
-    if (onChangeCommitted) {
-      onChangeCommitted(event, lastChangedValue.current ?? newValue);
-    }
-  };
-  const createHandleHiddenInputKeyDown = otherHandlers => event => {
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
-      event.preventDefault();
-      const index = Number(event.currentTarget.getAttribute('data-index'));
-      const value = values[index];
-      let newValue = null;
-      // Keys actions that change the value by more than the most granular `step`
-      // value are only applied if the step not `null`.
-      // When step is `null`, the `marks` prop is used instead to define valid values.
-      if (step != null) {
-        const stepSize = event.shiftKey ? shiftStep : step;
-        switch (event.key) {
-          case 'ArrowUp':
-            newValue = getNewValue(value, stepSize, 1, min, max);
-            break;
-          case 'ArrowRight':
-            newValue = getNewValue(value, stepSize, isRtl ? -1 : 1, min, max);
-            break;
-          case 'ArrowDown':
-            newValue = getNewValue(value, stepSize, -1, min, max);
-            break;
-          case 'ArrowLeft':
-            newValue = getNewValue(value, stepSize, isRtl ? 1 : -1, min, max);
-            break;
-          case 'PageUp':
-            newValue = getNewValue(value, shiftStep, 1, min, max);
-            break;
-          case 'PageDown':
-            newValue = getNewValue(value, shiftStep, -1, min, max);
-            break;
-          case 'Home':
-            newValue = min;
-            break;
-          case 'End':
-            newValue = max;
-            break;
-          default:
-            break;
-        }
-      } else if (marks) {
-        const maxMarksValue = marksValues[marksValues.length - 1];
-        const currentMarkIndex = marksValues.indexOf(value);
-        const decrementKeys = [isRtl ? 'ArrowRight' : 'ArrowLeft', 'ArrowDown', 'PageDown', 'Home'];
-        const incrementKeys = [isRtl ? 'ArrowLeft' : 'ArrowRight', 'ArrowUp', 'PageUp', 'End'];
-        if (decrementKeys.includes(event.key)) {
-          if (currentMarkIndex === 0) {
-            newValue = marksValues[0];
-          } else {
-            newValue = marksValues[currentMarkIndex - 1];
-          }
-        } else if (incrementKeys.includes(event.key)) {
-          if (currentMarkIndex === marksValues.length - 1) {
-            newValue = maxMarksValue;
-          } else {
-            newValue = marksValues[currentMarkIndex + 1];
-          }
-        }
-      }
-      if (newValue != null) {
-        changeValue(event, newValue);
-      }
-    }
-    otherHandlers?.onKeyDown?.(event);
-  };
-  useEnhancedEffect(() => {
-    if (disabled && sliderRef.current.contains(document.activeElement)) {
-      // This is necessary because Firefox and Safari will keep focus
-      // on a disabled element:
-      // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
-      // @ts-ignore
-      document.activeElement?.blur();
-    }
-  }, [disabled]);
-  if (disabled && active !== -1) {
-    setActive(-1);
-  }
-  if (disabled && focusedThumbIndex !== -1) {
-    setFocusedThumbIndex(-1);
-  }
-  const createHandleHiddenInputChange = otherHandlers => event => {
-    otherHandlers.onChange?.(event);
-    // this handles value change by Pointer or Touch events
-    // @ts-ignore
-    changeValue(event, event.target.valueAsNumber);
-  };
-  const previousIndex = React.useRef(undefined);
-  let axis = orientation;
-  if (isRtl && orientation === 'horizontal') {
-    axis += '-reverse';
-  }
-  const getFingerNewValue = ({
-    finger,
-    move = false
-  }) => {
-    const {
-      current: slider
-    } = sliderRef;
-    const {
-      width,
-      height,
-      bottom,
-      left
-    } = slider.getBoundingClientRect();
-    let percent;
-    if (axis.startsWith('vertical')) {
-      percent = (bottom - finger.y) / height;
-    } else {
-      percent = (finger.x - left) / width;
-    }
-    if (axis.includes('-reverse')) {
-      percent = 1 - percent;
-    }
-    let newValue;
-    newValue = percentToValue(percent, min, max);
-    if (step) {
-      newValue = roundValueToStep(newValue, step, min);
-    } else {
-      const closestIndex = findClosest(marksValues, newValue);
-      newValue = marksValues[closestIndex];
-    }
-    newValue = clamp(newValue, min, max);
-    let activeIndex = 0;
-    if (range) {
-      if (!move) {
-        activeIndex = findClosest(values, newValue);
-      } else {
-        activeIndex = previousIndex.current;
-      }
-
-      // Bound the new value to the thumb's neighbours.
-      if (disableSwap) {
-        newValue = clamp(newValue, values[activeIndex - 1] || -Infinity, values[activeIndex + 1] || Infinity);
-      }
-      const previousValue = newValue;
-      newValue = setValueIndex({
-        values,
-        newValue,
-        index: activeIndex
-      });
-
-      // Potentially swap the index if needed.
-      if (!(disableSwap && move)) {
-        activeIndex = newValue.indexOf(previousValue);
-        previousIndex.current = activeIndex;
-      }
-    }
-    return {
-      newValue,
-      activeIndex
-    };
-  };
-  const handleTouchMove = useEventCallback(nativeEvent => {
-    const finger = trackFinger(nativeEvent, touchId);
-    if (!finger) {
-      return;
-    }
-    moveCount.current += 1;
-
-    // Cancel move in case some other element consumed a mouseup event and it was not fired.
-    // @ts-ignore buttons doesn't not exists on touch event
-    if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      handleTouchEnd(nativeEvent);
-      return;
-    }
-    const {
-      newValue,
-      activeIndex
-    } = getFingerNewValue({
-      finger,
-      move: true
-    });
-    focusThumb({
-      sliderRef,
-      activeIndex,
-      setActive
-    });
-    setValueState(newValue);
-    if (!dragging && moveCount.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
-      setDragging(true);
-    }
-    if (handleChange && !areValuesEqual(newValue, valueDerived)) {
-      handleChange(nativeEvent, newValue, activeIndex);
-    }
-  });
-  const handleTouchEnd = useEventCallback(nativeEvent => {
-    const finger = trackFinger(nativeEvent, touchId);
-    setDragging(false);
-    if (!finger) {
-      return;
-    }
-    const {
-      newValue
-    } = getFingerNewValue({
-      finger,
-      move: true
-    });
-    setActive(-1);
-    if (nativeEvent.type === 'touchend') {
-      setOpen(-1);
-    }
-    if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
-    }
-    touchId.current = undefined;
-
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    stopListening();
-  });
-  const handleTouchStart = useEventCallback(nativeEvent => {
-    if (disabled) {
-      return;
-    }
-    // If touch-action: none; is not supported we need to prevent the scroll manually.
-    if (!doesSupportTouchActionNone()) {
-      nativeEvent.preventDefault();
-    }
-    const touch = nativeEvent.changedTouches[0];
-    if (touch != null) {
-      // A number that uniquely identifies the current finger in the touch session.
-      touchId.current = touch.identifier;
-    }
-    const finger = trackFinger(nativeEvent, touchId);
-    if (finger !== false) {
-      const {
-        newValue,
-        activeIndex
-      } = getFingerNewValue({
-        finger
-      });
-      focusThumb({
-        sliderRef,
-        activeIndex,
-        setActive
-      });
-      setValueState(newValue);
-      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
-        handleChange(nativeEvent, newValue, activeIndex);
-      }
-    }
-    moveCount.current = 0;
-    const doc = ownerDocument(sliderRef.current);
-    doc.addEventListener('touchmove', handleTouchMove, {
-      passive: true
-    });
-    doc.addEventListener('touchend', handleTouchEnd, {
-      passive: true
-    });
-  });
-  const stopListening = React.useCallback(() => {
-    const doc = ownerDocument(sliderRef.current);
-    doc.removeEventListener('mousemove', handleTouchMove);
-    doc.removeEventListener('mouseup', handleTouchEnd);
-    doc.removeEventListener('touchmove', handleTouchMove);
-    doc.removeEventListener('touchend', handleTouchEnd);
-  }, [handleTouchEnd, handleTouchMove]);
-  React.useEffect(() => {
-    const {
-      current: slider
-    } = sliderRef;
-    slider.addEventListener('touchstart', handleTouchStart, {
-      passive: doesSupportTouchActionNone()
-    });
-    return () => {
-      slider.removeEventListener('touchstart', handleTouchStart);
-      stopListening();
-    };
-  }, [stopListening, handleTouchStart]);
-  React.useEffect(() => {
-    if (disabled) {
-      stopListening();
-    }
-  }, [disabled, stopListening]);
-  const createHandleMouseDown = otherHandlers => event => {
-    otherHandlers.onMouseDown?.(event);
-    if (disabled) {
-      return;
-    }
-    if (event.defaultPrevented) {
-      return;
-    }
-
-    // Only handle left clicks
-    if (event.button !== 0) {
-      return;
-    }
-
-    // Avoid text selection
-    event.preventDefault();
-    const finger = trackFinger(event, touchId);
-    if (finger !== false) {
-      const {
-        newValue,
-        activeIndex
-      } = getFingerNewValue({
-        finger
-      });
-      focusThumb({
-        sliderRef,
-        activeIndex,
-        setActive
-      });
-      setValueState(newValue);
-      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
-        handleChange(event, newValue, activeIndex);
-      }
-    }
-    moveCount.current = 0;
-    const doc = ownerDocument(sliderRef.current);
-    doc.addEventListener('mousemove', handleTouchMove, {
-      passive: true
-    });
-    doc.addEventListener('mouseup', handleTouchEnd);
-  };
-  const trackOffset = valueToPercent(range ? values[0] : min, min, max);
-  const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
-  const getRootProps = (externalProps = {}) => {
-    const externalHandlers = extractEventHandlers(externalProps);
-    const ownEventHandlers = {
-      onMouseDown: createHandleMouseDown(externalHandlers || {})
-    };
-    const mergedEventHandlers = {
-      ...externalHandlers,
-      ...ownEventHandlers
-    };
-    return {
-      ...externalProps,
-      ref: handleRef,
-      ...mergedEventHandlers
-    };
-  };
-  const createHandleMouseOver = otherHandlers => event => {
-    otherHandlers.onMouseOver?.(event);
-    const index = Number(event.currentTarget.getAttribute('data-index'));
-    setOpen(index);
-  };
-  const createHandleMouseLeave = otherHandlers => event => {
-    otherHandlers.onMouseLeave?.(event);
-    setOpen(-1);
-  };
-  const getThumbProps = (externalProps = {}) => {
-    const externalHandlers = extractEventHandlers(externalProps);
-    const ownEventHandlers = {
-      onMouseOver: createHandleMouseOver(externalHandlers || {}),
-      onMouseLeave: createHandleMouseLeave(externalHandlers || {})
-    };
-    return {
-      ...externalProps,
-      ...externalHandlers,
-      ...ownEventHandlers
-    };
-  };
-  const getThumbStyle = index => {
-    return {
-      // So the non active thumb doesn't show its label on hover.
-      pointerEvents: active !== -1 && active !== index ? 'none' : undefined
-    };
-  };
-  let cssWritingMode;
-  if (orientation === 'vertical') {
-    cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
-  }
-  const getHiddenInputProps = (externalProps = {}) => {
-    const externalHandlers = extractEventHandlers(externalProps);
-    const ownEventHandlers = {
-      onChange: createHandleHiddenInputChange(externalHandlers || {}),
-      onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
-      onBlur: createHandleHiddenInputBlur(externalHandlers || {}),
-      onKeyDown: createHandleHiddenInputKeyDown(externalHandlers || {})
-    };
-    const mergedEventHandlers = {
-      ...externalHandlers,
-      ...ownEventHandlers
-    };
-    return {
-      tabIndex,
-      'aria-labelledby': ariaLabelledby,
-      'aria-orientation': orientation,
-      'aria-valuemax': scale(max),
-      'aria-valuemin': scale(min),
-      name,
-      type: 'range',
-      min: parameters.min,
-      max: parameters.max,
-      step: parameters.step === null && parameters.marks ? 'any' : parameters.step ?? undefined,
-      disabled,
-      ...externalProps,
-      ...mergedEventHandlers,
-      style: {
-        ...visuallyHidden,
-        direction: isRtl ? 'rtl' : 'ltr',
-        // So that VoiceOver's focus indicator matches the thumb's dimensions
-        width: '100%',
-        height: '100%',
-        writingMode: cssWritingMode
-      }
-    };
-  };
-  return {
-    active,
-    axis: axis,
-    axisProps,
-    dragging,
-    focusedThumbIndex,
-    getHiddenInputProps,
-    getRootProps,
-    getThumbProps,
-    marks: marks,
-    open,
-    range,
-    rootRef: handleRef,
-    trackLeap,
-    trackOffset,
-    values,
-    getThumbStyle
-  };
-}