@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/modern/Slider/Slider.js

@@ -1,13 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["id", "className", "name", "label", "status", "statusMessage", "disabled", "required", "requiredMessage", "readOnly", "aria-errormessage", "classes", "hideInput", "markProperties", "markStep", "markDigits", "knobProperties", "values", "defaultValues", "inputProps", "theme", "maxPointValue", "minPointValue", "divisionQuantity", "formatMark", "noOverlap", "onChange", "onBlur", "onBeforeChange", "onAfterChange", "formatTooltip", "sliderProps", "knobProps"],
-      _excluded2 = ["className", "style"];
-
+  _excluded2 = ["className", "style"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
@@ -19,51 +15,49 @@ import validationStates from "../Forms/FormElement/validationStates";
 import { knobsPositionToScaledValue, calculateStepValue, createKnobStyles, createTrackStyles, createMark, knobsValuesToKnobsPositions, knobsPositionsToKnobsValues, scaledValueToKnobsPositionValue, generateDefaultKnobProperties, isSingleSlider, ensureValuesConsistency, convertStatusToArray, statusArrayToFormStatus } from "./utils";
 import styleCreator from "./styles";
 import SliderInput from "./SliderInput";
+
 /**
  * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. Still in development
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const HvSlider = props => {
   const {
-    id,
-    className,
-    name,
-    label,
-    status,
-    statusMessage,
-    disabled,
-    required = false,
-    requiredMessage = "The value is required",
-    readOnly = false,
-    "aria-errormessage": ariaErrorMessage,
-    classes,
-    hideInput = false,
-    markProperties = [],
-    markStep = 20,
-    markDigits = 0,
-    knobProperties: knobPropertiesProp,
-    values: valuesProp,
-    defaultValues = [undefined],
-    inputProps,
-    theme,
-    maxPointValue = 100,
-    minPointValue = 0,
-    divisionQuantity = 100,
-    formatMark,
-    noOverlap = true,
-    onChange,
-    onBlur,
-    onBeforeChange,
-    onAfterChange,
-    formatTooltip,
-    sliderProps,
-    knobProps
-  } = props,
-        others = _objectWithoutProperties(props, _excluded);
-
+      id,
+      className,
+      name,
+      label,
+      status,
+      statusMessage,
+      disabled,
+      required = false,
+      requiredMessage = "The value is required",
+      readOnly = false,
+      "aria-errormessage": ariaErrorMessage,
+      classes,
+      hideInput = false,
+      markProperties = [],
+      markStep = 20,
+      markDigits = 0,
+      knobProperties: knobPropertiesProp,
+      values: valuesProp,
+      defaultValues = [undefined],
+      inputProps,
+      theme,
+      maxPointValue = 100,
+      minPointValue = 0,
+      divisionQuantity = 100,
+      formatMark,
+      noOverlap = true,
+      onChange,
+      onBlur,
+      onBeforeChange,
+      onAfterChange,
+      formatTooltip,
+      sliderProps,
+      knobProps
+    } = props,
+    others = _objectWithoutProperties(props, _excluded);
   const styles = styleCreator(theme);
   const stepValue = useMemo(() => calculateStepValue(maxPointValue, minPointValue, divisionQuantity), [divisionQuantity, maxPointValue, minPointValue]);
   const inverseStepValue = 1 / stepValue;
@@ -71,13 +65,13 @@ const HvSlider = props => {
   const defaultKnobsPositions = useMemo(() => knobsValuesToKnobsPositions(defaultValues, inverseStepValue, minPointValue, isSingle), [defaultValues, inverseStepValue, isSingle, minPointValue]);
   const value = useMemo(() => (valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.length) > 0 ? knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue, isSingle) : undefined, [inverseStepValue, isSingle, minPointValue, valuesProp]);
   const [knobsPositions, setKnobsPositions] = useControlled(value, defaultKnobsPositions);
-  const [isDraggingTrack, setIsDraggingTrack] = useState(false); // signals that the user has manually edited the input value
-
+  const [isDraggingTrack, setIsDraggingTrack] = useState(false);
+  // signals that the user has manually edited the input value
   const isDirty = useRef(false);
-  const elementId = useUniqueId(id, "hvSlider"); // miscellaneous state
-
-  const hasLabel = label != null; // validation related state
-
+  const elementId = useUniqueId(id, "hvSlider");
+  // miscellaneous state
+  const hasLabel = label != null;
+  // validation related state
   const {
     arrayStatus,
     arrayDefaultStatus
@@ -97,22 +91,18 @@ const HvSlider = props => {
         invalid = true;
         return validationStates.invalid;
       }
-
       return validationStates.valid;
     });
     setValidationState([...newValidationState]);
-
     if (invalid) {
       setValidationMessage(requiredMessage);
       return;
     }
-
     setValidationMessage("");
   }, [knobsPositions, requiredMessage, setValidationMessage, setValidationState]);
   useEffect(() => {
     const stepVl = calculateStepValue(maxPointValue, minPointValue, divisionQuantity);
     const inverseStepVl = 1 / stepVl;
-
     if ((valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.length) > 0) {
       setKnobsPositions(knobsValuesToKnobsPositions(valuesProp.length > 0 ? valuesProp : defaultValues, inverseStepVl, minPointValue));
     }
@@ -123,9 +113,9 @@ const HvSlider = props => {
       // the user never manually edited the input value
       return;
     }
-
     performValidation(knobsPositions, requiredMessage);
   }, [knobsPositions, requiredMessage, performValidation]);
+
   /**
    * Generates an object which posses the current value and position of the knobs.
    *
@@ -133,30 +123,24 @@ const HvSlider = props => {
    * @returns {Object} - An object with the positions and values of the knobs.
    * @memberof HvSlider
    */
-
   const generateKnobsPositionAndValues = knobsCurrentPosition => {
     const newKnobsPosition = knobsCurrentPosition.slice();
     const knobsValues = [];
     let duplicatedValue = null;
     const findDuplicated = newKnobsPosition.filter((item, index) => newKnobsPosition.indexOf(item) !== index);
-
     if (noOverlap && findDuplicated.length > 0) {
       [duplicatedValue] = findDuplicated;
     }
-
     newKnobsPosition.forEach((position, index, array) => {
       const newArray = array;
       let newPosition = position;
-
       if (noOverlap && newPosition === duplicatedValue) {
         const previousValue = knobsPositions[index];
-
         if (previousValue !== newPosition) {
           newPosition += newPosition > previousValue ? -1 : 1;
           newArray[index] = newPosition;
         }
       }
-
       knobsValues[index] = knobsPositionToScaledValue(newPosition, minPointValue, stepValue);
     }, this);
     return {
@@ -164,6 +148,7 @@ const HvSlider = props => {
       knobsValues
     };
   };
+
   /**
    * Function executed while the knobs changes.
    *
@@ -173,8 +158,6 @@ const HvSlider = props => {
    * @param {Array} knobsPosition - An array containing the current positions of the knobs.
    * @memberof HvSlider
    */
-
-
   const onChangeHandler = knobsPosition => {
     isDirty.current = true;
     const knobs = generateKnobsPositionAndValues(knobsPosition);
@@ -187,12 +170,12 @@ const HvSlider = props => {
     onChange === null || onChange === void 0 ? void 0 : onChange(knobs.knobsValues);
     setKnobsPositions(knobs.knobsPosition);
   };
-
   const onInputChangeHandler = (inputValues, index) => {
     let newKnobPositions = knobsValuesToKnobsPositions(inputValues, inverseStepValue, minPointValue);
     newKnobPositions = ensureValuesConsistency(newKnobPositions, index);
     onChangeHandler(newKnobPositions);
   };
+
   /**
    * Function executed before a change.
    *
@@ -201,12 +184,11 @@ const HvSlider = props => {
    * @param {Array} knobsPosition - An array containing the current positions of the knobs.
    * @memberof HvSlider
    */
-
-
   const onBeforeChangeHandler = knobsPosition => {
     const knobs = generateKnobsPositionAndValues(knobsPosition);
     onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(knobs.knobsValues);
   };
+
   /**
    * Function executed after a change.
    *
@@ -215,29 +197,23 @@ const HvSlider = props => {
    * @param {Array} knobsPosition - An array containing the current positions of the knobs.
    * @memberof HvSlider
    */
-
-
   const onAfterChangeHandler = knobsPosition => {
     const knobs = generateKnobsPositionAndValues(knobsPosition);
     onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(knobs.knobsValues);
   };
-
   const onMouseDownHandler = event => {
     if (event.target.className.includes("track")) {
       setIsDraggingTrack(true);
     }
   };
-
   const onMouseUpHandler = () => {
     setIsDraggingTrack(false);
   };
-
   const onBlurHandler = event => {
     const knobs = generateKnobsPositionAndValues(knobsPositions);
     performValidation(knobsPositions, requiredMessage);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, knobs.knobsValues, status);
   };
-
   const sliderInputId = setId(elementId, "input");
   /**
    * Function used to create a custom knob for the slider.
@@ -249,29 +225,24 @@ const HvSlider = props => {
    * @param {Object} props - An object containing the properties of the knobs.
    * @memberof HvSlider
    */
-
   const createKnob = (knobNode, params) => {
     const {
       value: knobValue,
       dragging,
       index
     } = params;
-
     const _knobNode$props = knobNode.props,
-          {
-      className: knobClassName,
-      style
-    } = _knobNode$props,
-          restProps = _objectWithoutProperties(_knobNode$props, _excluded2);
-
+      {
+        className: knobClassName,
+        style
+      } = _knobNode$props,
+      restProps = _objectWithoutProperties(_knobNode$props, _excluded2);
     const scaledKnobValue = knobsPositionToScaledValue(knobValue, minPointValue, stepValue).toFixed(markDigits);
-
     if (dragging) {
       style.backgroundColor = knobProperties[index].dragColor;
     } else {
       style.backgroundColor = knobProperties[index].color;
     }
-
     const isEmpty = Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;
     const handleId = setId(elementId, "knob");
     const indexedHandleId = setId(handleId, index);
@@ -297,7 +268,6 @@ const HvSlider = props => {
       })
     }, index);
   };
-
   return /*#__PURE__*/_jsxs(HvFormElement, _objectSpread(_objectSpread({
     className: clsx(className, classes.root, !readOnly && !disabled && !isSingle && [isDraggingTrack && classes.trackDragging, !isDraggingTrack && classes.trackStandBy], disabled && classes.rootDisabled),
     id: id,
@@ -379,60 +349,49 @@ const HvSlider = props => {
     })]
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * Id to be applied to the slider root node.
    */
   id: PropTypes.string,
-
   /**
    * The slider name.
    */
   name: PropTypes.string,
-
   /**
    * The label of the slider.
    *
    * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.
    */
   label: PropTypes.node,
-
   /**
    * Indicates that the slider is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Indicates that the slider is not editable.
    */
   readOnly: PropTypes.bool,
-
   /**
    * Indicates that user slider is required on the form element.
    */
   required: PropTypes.bool,
-
   /**
    * What message to render when the value is required.
    */
   requiredMessage: PropTypes.string,
-
   /**
    * if `true` the input that controls the slider is hidden.
    */
   hideInput: PropTypes.bool,
-
   /**
    * Attributes applied to the slider element.
    */
   sliderProps: PropTypes.instanceOf(Object),
-
   /**
    * The status of the slider.
    *
@@ -442,22 +401,18 @@ process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
    * or "invalid" after any change to `checked`, depending of the values of both `required` and `checked`.
    */
   status: PropTypes.oneOfType([PropTypes.oneOf(["standBy", "valid", "invalid"]), PropTypes.arrayOf(PropTypes.oneOf(["standBy", "valid", "invalid"]))]),
-
   /**
    * The error message to show when `status` is "invalid".
    */
   statusMessage: PropTypes.string,
-
   /**
    * The values array to apply to the component
    */
   values: PropTypes.arrayOf(PropTypes.number),
-
   /**
    * The default values array to apply to the component
    */
   defaultValues: PropTypes.arrayOf(PropTypes.number),
-
   /**
    * The object used to set the knob properties,
    * for every item in the array a new knob will be created.
@@ -472,7 +427,6 @@ process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
     hidden: PropTypes.bool,
     fixed: PropTypes.bool
   })),
-
   /**
    * The object used to set the mark properties individually.
    */
@@ -480,70 +434,57 @@ process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
     position: PropTypes.number,
     label: PropTypes.string
   })),
-
   /**
    * the function executed before a change will occur in the slider.
    */
   onBeforeChange: PropTypes.func,
-
   /**
    * the function executed while a change is occurring in the slider.
    */
   onChange: PropTypes.func,
-
   /**
    * the function executed after a change ocurred in the slider.
    */
   onAfterChange: PropTypes.func,
-
   /**
    * the function executed after a blur ocurred in the slider.
    */
   onBlur: PropTypes.func,
-
   /**
    * the separation in points between marks.
    * example: if 10 divisions and a markstep of 2 there will be 5 marks.
    */
   markStep: PropTypes.number,
-
   /**
    * how many subdivisions there are in the slider.
    */
   divisionQuantity: PropTypes.number,
-
   /**
    * the value of the first point in the slider from left to right.
    */
   minPointValue: PropTypes.number,
-
   /**
    * the value of the last point in the slider from left to right.
    */
   maxPointValue: PropTypes.number,
-
   /**
    * the max number of decimals if no format function is applied
    */
   markDigits: PropTypes.number,
-
   /**
    * a formatting function used to add format to the marks in the track,
    * the function receives the mark text
    */
   formatMark: PropTypes.func,
-
   /**
    * a formatting function used to add format to the tooltip in the track,
    * the function receives the mark text
    */
   formatTooltip: PropTypes.func,
-
   /**
    * if `true` the knobs can't have the same value, if `false` knobs can have the same value.
    */
   noOverlap: PropTypes.bool,
-
   /**
    * the classes object to be applied into the root object.
    */
@@ -552,151 +493,122 @@ process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
      * Style applied to the root of the component.
      */
     root: PropTypes.string,
-
     /**
      * Style applied to the root of the component when in range mode.
      */
     rootRange: PropTypes.string,
-
     /**
      * Style applied to the container holding the label.
      */
     labelContainer: PropTypes.string,
-
     /**
      * Style applied to the label.
      */
     label: PropTypes.string,
-
     /**
      * Style applied to the knob.
      */
     handle: PropTypes.string,
-
     /**
      * Style applied to the container that has the knob used to move.
      */
     handleContainer: PropTypes.string,
-
     /**
      * Base slider styles to avoid the css import from node_modules and enable SSR support.
      * import("rc-slider/assets/index.css")
      */
     sliderBase: PropTypes.string,
-
     /**
      * Style applied to the div where the slider is placed.
      */
     sliderRoot: PropTypes.string,
-
     /**
      * Style applied when the user is dragging the range track.
      */
     trackDragging: PropTypes.string,
-
     /**
      * Style applied when root container is disabled.
      */
     rootDisabled: PropTypes.string,
-
     /**
      * Style applied when the user is not dragging the range track.
      */
     trackStandBy: PropTypes.string,
-
     /**
      * Style applied to the warning container.
      */
     error: PropTypes.string,
-
     /**
      * Style applied to the handle container when it is hidden.
      */
     handleHiddenContainer: PropTypes.string,
-
     /**
      * Style applied to the handle container when it is disabled.
      */
     handleContainerDisabled: PropTypes.string,
-
     /**
      * Style applied when the label element is present.
      */
     labelIncluded: PropTypes.string,
-
     /**
      * Style applied when only the input element is present.
      */
     onlyInput: PropTypes.string,
-
     /**
      * Style applied to the dot.
      */
     dot: PropTypes.string,
-
     /**
      * Style applied to the rail.
      */
     rail: PropTypes.string,
-
     /**
      * Style applied to the inner of the knob.
      */
     knobInner: PropTypes.string,
-
     /**
      * Style applied to the outside of the knob.
      */
     knobOuter: PropTypes.string,
-
     /**
      * Style applied when the knob is hidden.
      */
     knobHidden: PropTypes.string,
-
     /**
      * Style applied  last hidden knob.
      */
     knobHiddenLast: PropTypes.string,
-
     /**
      * Style applied to the track.
      */
     track: PropTypes.string,
-
     /**
      * Style applied to the mark.
      */
     mark: PropTypes.string,
-
     /**
      * Style applied to the tooltip.
      */
     sliderTooltip: PropTypes.string,
-
     /**
      * Style applied to the container of the tooltip.
      */
     sliderContainer: PropTypes.string
   }).isRequired,
-
   /**
    * Identifies the element that provides an error message for the slider.
    *
    * Will only be used when the validation status is invalid.
    */
   "aria-errormessage": PropTypes.string,
-
   /**
    * Attributes applied to the input element.
    */
   inputProps: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
-
   /**
    * Attributes applied to the input element.
    */
   knobProps: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
-
   /**
    * Theme object required to style the slider.
    */