@hitachivantara/uikit-react-core 3.66.1 → 3.67.1

package/dist/legacy/Slider/Slider.js

@@ -0,0 +1,752 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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"];
+
+var _this = this;
+
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.number.is-nan.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.string.fixed.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.number.to-fixed.js";
+import "core-js/modules/es.array.concat.js";
+import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import Slider from "rc-slider";
+import Tooltip from "rc-tooltip";
+import "rc-slider/assets/index.css";
+import { withStyles } from "@material-ui/core";
+import { HvFormElement, useControlled, useUniqueId, HvLabel, setId, HvWarningText } from "..";
+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
+ */
+
+var HvSlider = function HvSlider(props) {
+  var id = props.id,
+      className = props.className,
+      name = props.name,
+      label = props.label,
+      status = props.status,
+      statusMessage = props.statusMessage,
+      disabled = props.disabled,
+      _props$required = props.required,
+      required = _props$required === void 0 ? false : _props$required,
+      _props$requiredMessag = props.requiredMessage,
+      requiredMessage = _props$requiredMessag === void 0 ? "The value is required" : _props$requiredMessag,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+      ariaErrorMessage = props["aria-errormessage"],
+      classes = props.classes,
+      _props$hideInput = props.hideInput,
+      hideInput = _props$hideInput === void 0 ? false : _props$hideInput,
+      _props$markProperties = props.markProperties,
+      markProperties = _props$markProperties === void 0 ? [] : _props$markProperties,
+      _props$markStep = props.markStep,
+      markStep = _props$markStep === void 0 ? 20 : _props$markStep,
+      _props$markDigits = props.markDigits,
+      markDigits = _props$markDigits === void 0 ? 0 : _props$markDigits,
+      knobPropertiesProp = props.knobProperties,
+      valuesProp = props.values,
+      _props$defaultValues = props.defaultValues,
+      defaultValues = _props$defaultValues === void 0 ? [undefined] : _props$defaultValues,
+      inputProps = props.inputProps,
+      theme = props.theme,
+      _props$maxPointValue = props.maxPointValue,
+      maxPointValue = _props$maxPointValue === void 0 ? 100 : _props$maxPointValue,
+      _props$minPointValue = props.minPointValue,
+      minPointValue = _props$minPointValue === void 0 ? 0 : _props$minPointValue,
+      _props$divisionQuanti = props.divisionQuantity,
+      divisionQuantity = _props$divisionQuanti === void 0 ? 100 : _props$divisionQuanti,
+      formatMark = props.formatMark,
+      _props$noOverlap = props.noOverlap,
+      noOverlap = _props$noOverlap === void 0 ? true : _props$noOverlap,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onBeforeChange = props.onBeforeChange,
+      onAfterChange = props.onAfterChange,
+      formatTooltip = props.formatTooltip,
+      sliderProps = props.sliderProps,
+      knobProps = props.knobProps,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var styles = styleCreator(theme);
+  var stepValue = useMemo(function () {
+    return calculateStepValue(maxPointValue, minPointValue, divisionQuantity);
+  }, [divisionQuantity, maxPointValue, minPointValue]);
+  var inverseStepValue = 1 / stepValue;
+  var isSingle = useMemo(function () {
+    return isSingleSlider(valuesProp, defaultValues);
+  }, [defaultValues, valuesProp]);
+  var defaultKnobsPositions = useMemo(function () {
+    return knobsValuesToKnobsPositions(defaultValues, inverseStepValue, minPointValue, isSingle);
+  }, [defaultValues, inverseStepValue, isSingle, minPointValue]);
+  var value = useMemo(function () {
+    return (valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.length) > 0 ? knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue, isSingle) : undefined;
+  }, [inverseStepValue, isSingle, minPointValue, valuesProp]);
+
+  var _useControlled = useControlled(value, defaultKnobsPositions),
+      _useControlled2 = _slicedToArray(_useControlled, 2),
+      knobsPositions = _useControlled2[0],
+      setKnobsPositions = _useControlled2[1];
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDraggingTrack = _useState2[0],
+      setIsDraggingTrack = _useState2[1]; // signals that the user has manually edited the input value
+
+
+  var isDirty = useRef(false);
+  var elementId = useUniqueId(id, "hvSlider"); // miscellaneous state
+
+  var hasLabel = label != null; // validation related state
+
+  var _useMemo = useMemo(function () {
+    return convertStatusToArray(status, knobsPositions.length);
+  }, [knobsPositions.length, status]),
+      arrayStatus = _useMemo.arrayStatus,
+      arrayDefaultStatus = _useMemo.arrayDefaultStatus;
+
+  var _useControlled3 = useControlled(arrayStatus, arrayDefaultStatus),
+      _useControlled4 = _slicedToArray(_useControlled3, 2),
+      validationStatus = _useControlled4[0],
+      setValidationState = _useControlled4[1];
+
+  var _useControlled5 = useControlled(statusMessage, ""),
+      _useControlled6 = _slicedToArray(_useControlled5, 2),
+      validationMessage = _useControlled6[0],
+      setValidationMessage = _useControlled6[1];
+
+  var canShowError = ariaErrorMessage == null && (status !== undefined && statusMessage !== undefined || status === undefined && required);
+  var knobProperties = generateDefaultKnobProperties(knobPropertiesProp, knobsPositions.length, disabled, theme);
+  var trackStyles = createTrackStyles(knobProperties, styles);
+  var knobStyles = createKnobStyles(knobProperties, styles);
+  var marks = useMemo(function () {
+    return createMark(markProperties, markStep, divisionQuantity, minPointValue, stepValue, markDigits, formatMark, disabled, styles);
+  }, [disabled, divisionQuantity, formatMark, markDigits, markProperties, markStep, minPointValue, stepValue, styles]);
+  var rangesCount = knobProperties.length - 1;
+  var performValidation = useCallback(function () {
+    var invalid = false;
+    var newValidationState = knobsPositions.map(function (position) {
+      if (position == null || Number.isNaN(position)) {
+        invalid = true;
+        return validationStates.invalid;
+      }
+
+      return validationStates.valid;
+    });
+    setValidationState(_toConsumableArray(newValidationState));
+
+    if (invalid) {
+      setValidationMessage(requiredMessage);
+      return;
+    }
+
+    setValidationMessage("");
+  }, [knobsPositions, requiredMessage, setValidationMessage, setValidationState]);
+  useEffect(function () {
+    var stepVl = calculateStepValue(maxPointValue, minPointValue, divisionQuantity);
+    var inverseStepVl = 1 / stepVl;
+
+    if ((valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.length) > 0) {
+      setKnobsPositions(knobsValuesToKnobsPositions(valuesProp.length > 0 ? valuesProp : defaultValues, inverseStepVl, minPointValue));
+    }
+  }, [defaultValues, divisionQuantity, maxPointValue, minPointValue, setKnobsPositions, valuesProp]);
+  useEffect(function () {
+    if (!isDirty.current) {
+      // skip validation if currently focused or if empty and
+      // 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.
+   *
+   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.
+   * @returns {Object} - An object with the positions and values of the knobs.
+   * @memberof HvSlider
+   */
+
+  var generateKnobsPositionAndValues = function generateKnobsPositionAndValues(knobsCurrentPosition) {
+    var newKnobsPosition = knobsCurrentPosition.slice();
+    var knobsValues = [];
+    var duplicatedValue = null;
+    var findDuplicated = newKnobsPosition.filter(function (item, index) {
+      return newKnobsPosition.indexOf(item) !== index;
+    });
+
+    if (noOverlap && findDuplicated.length > 0) {
+      var _findDuplicated = _slicedToArray(findDuplicated, 1);
+
+      duplicatedValue = _findDuplicated[0];
+    }
+
+    newKnobsPosition.forEach(function (position, index, array) {
+      var newArray = array;
+      var newPosition = position;
+
+      if (noOverlap && newPosition === duplicatedValue) {
+        var previousValue = knobsPositions[index];
+
+        if (previousValue !== newPosition) {
+          newPosition += newPosition > previousValue ? -1 : 1;
+          newArray[index] = newPosition;
+        }
+      }
+
+      knobsValues[index] = knobsPositionToScaledValue(newPosition, minPointValue, stepValue);
+    }, _this);
+    return {
+      knobsPosition: newKnobsPosition,
+      knobsValues: knobsValues
+    };
+  };
+  /**
+   * Function executed while the knobs changes.
+   *
+   * executes the callback provided by the user with the values and position of the knobs,
+   * also lock the value of the knob in case one is fixed.
+   *
+   * @param {Array} knobsPosition - An array containing the current positions of the knobs.
+   * @memberof HvSlider
+   */
+
+
+  var onChangeHandler = function onChangeHandler(knobsPosition) {
+    isDirty.current = true;
+    var knobs = generateKnobsPositionAndValues(knobsPosition);
+    knobProperties.forEach(function (knobProperty, index) {
+      if (knobProperty.fixed) {
+        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(defaultValues[index], minPointValue, inverseStepValue);
+      }
+    });
+    if (disabled || readOnly) return;
+    onChange === null || onChange === void 0 ? void 0 : onChange(knobs.knobsValues);
+    setKnobsPositions(knobs.knobsPosition);
+  };
+
+  var onInputChangeHandler = function onInputChangeHandler(inputValues, index) {
+    var newKnobPositions = knobsValuesToKnobsPositions(inputValues, inverseStepValue, minPointValue);
+    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);
+    onChangeHandler(newKnobPositions);
+  };
+  /**
+   * Function executed before a change.
+   *
+   * executes the callback provided by the user with the values and position of the knobs
+   *
+   * @param {Array} knobsPosition - An array containing the current positions of the knobs.
+   * @memberof HvSlider
+   */
+
+
+  var onBeforeChangeHandler = function onBeforeChangeHandler(knobsPosition) {
+    var knobs = generateKnobsPositionAndValues(knobsPosition);
+    onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(knobs.knobsValues);
+  };
+  /**
+   * Function executed after a change.
+   *
+   * executes the callback provided by the user with the values and position of the knobs
+   *
+   * @param {Array} knobsPosition - An array containing the current positions of the knobs.
+   * @memberof HvSlider
+   */
+
+
+  var onAfterChangeHandler = function onAfterChangeHandler(knobsPosition) {
+    var knobs = generateKnobsPositionAndValues(knobsPosition);
+    onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(knobs.knobsValues);
+  };
+
+  var onMouseDownHandler = function onMouseDownHandler(event) {
+    if (event.target.className.includes("track")) {
+      setIsDraggingTrack(true);
+    }
+  };
+
+  var onMouseUpHandler = function onMouseUpHandler() {
+    setIsDraggingTrack(false);
+  };
+
+  var onBlurHandler = function onBlurHandler(event) {
+    var knobs = generateKnobsPositionAndValues(knobsPositions);
+    performValidation(knobsPositions, requiredMessage);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, knobs.knobsValues, status);
+  };
+
+  var sliderInputId = setId(elementId, "input");
+  /**
+   * Function used to create a custom knob for the slider.
+   *
+   * TODO: This should be isolated because is creating a sub component,
+   * but there were some problems regarding the underlying component losing
+   * references of the handlers disabling the focus.
+   *
+   * @param {Object} props - An object containing the properties of the knobs.
+   * @memberof HvSlider
+   */
+
+  var createKnob = function createKnob(knobNode, params) {
+    var knobValue = params.value,
+        dragging = params.dragging,
+        index = params.index;
+
+    var _knobNode$props = knobNode.props,
+        knobClassName = _knobNode$props.className,
+        style = _knobNode$props.style,
+        restProps = _objectWithoutProperties(_knobNode$props, _excluded2);
+
+    var scaledKnobValue = knobsPositionToScaledValue(knobValue, minPointValue, stepValue).toFixed(markDigits);
+
+    if (dragging) {
+      style.backgroundColor = knobProperties[index].dragColor;
+    } else {
+      style.backgroundColor = knobProperties[index].color;
+    }
+
+    var isEmpty = Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;
+    var handleId = setId(elementId, "knob");
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: clsx((isEmpty || readOnly) && classes.handleHiddenContainer, !isEmpty && (disabled ? classes.handleContainerDisabled : classes.handleContainer))
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      prefixCls: "rc-slider-tooltip",
+      overlay: (formatTooltip === null || formatTooltip === void 0 ? void 0 : formatTooltip(scaledKnobValue)) || scaledKnobValue,
+      visible: dragging,
+      placement: "top",
+      overlayClassName: classes.sliderTooltip
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      id: setId(handleId, index),
+      style: style,
+      className: clsx(knobClassName, classes.handle)
+    }, restProps, {
+      "aria-label": "".concat(label, "-knob-").concat(index),
+      "aria-valuenow": knobsPositionToScaledValue(knobValue, minPointValue, stepValue),
+      "aria-valuemin": minPointValue,
+      "aria-valuemax": maxPointValue
+    }, knobProps === null || knobProps === void 0 ? void 0 : knobProps[index]))));
+  };
+
+  return /*#__PURE__*/React.createElement(HvFormElement, _extends({
+    className: clsx(className, classes.root, !readOnly && !disabled && !isSingle && [isDraggingTrack && classes.trackDragging, !isDraggingTrack && classes.trackStandBy], disabled && classes.rootDisabled),
+    id: id,
+    name: name,
+    status: statusArrayToFormStatus(validationStatus),
+    disabled: disabled,
+    required: required,
+    readOnly: readOnly,
+    onMouseDown: onMouseDownHandler,
+    onMouseUp: onMouseUpHandler,
+    onBlur: onBlurHandler
+  }, others), (hasLabel || !hideInput) && /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.labelContainer, hasLabel ? classes.labelIncluded : classes.onlyInput)
+  }, hasLabel && /*#__PURE__*/React.createElement(HvLabel, {
+    id: setId(elementId, "label"),
+    className: classes.label,
+    htmlFor: setId(elementId, "slider"),
+    label: label
+  }), !hideInput && /*#__PURE__*/React.createElement(SliderInput, {
+    id: sliderInputId,
+    label: label,
+    values: knobsPositionsToKnobsValues(knobsPositions, stepValue, minPointValue),
+    onChange: onInputChangeHandler,
+    status: validationStatus,
+    disabled: disabled,
+    readOnly: readOnly,
+    markDigits: markDigits,
+    inputProps: inputProps
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes.sliderContainer
+  }, isSingle && /*#__PURE__*/React.createElement(Slider, _extends({
+    id: setId(elementId, "slider"),
+    handleRender: createKnob,
+    className: clsx(classes.sliderRoot),
+    min: 0,
+    max: divisionQuantity,
+    step: 1,
+    marks: marks,
+    dotStyle: disabled ? styles.dotDisabled : styles.dot,
+    onChange: function onChange(singleValue) {
+      return onChangeHandler([singleValue]);
+    },
+    onBeforeChange: function onBeforeChange(singleValue) {
+      return onBeforeChangeHandler([singleValue]);
+    },
+    onAfterChange: function onAfterChange(singleValue) {
+      return onAfterChangeHandler([singleValue]);
+    },
+    value: knobsPositions.length > 0 ? knobsPositions[0] : undefined,
+    allowCross: false,
+    disabled: disabled,
+    count: rangesCount,
+    railStyle: styles.rail,
+    handleStyle: knobStyles.knobInner,
+    trackStyle: trackStyles
+  }, sliderProps)), !isSingle && /*#__PURE__*/React.createElement(Slider, _extends({
+    id: setId(elementId, "slider"),
+    range: true,
+    handleRender: createKnob,
+    className: clsx(classes.sliderRoot, !isSingle && classes.rootRange),
+    min: 0,
+    max: divisionQuantity,
+    step: 1,
+    marks: marks,
+    disabled: disabled,
+    dotStyle: disabled ? styles.dotDisabled : styles.dot,
+    onChange: onChangeHandler,
+    onBeforeChange: onBeforeChangeHandler,
+    onAfterChange: onAfterChangeHandler,
+    value: knobsPositions.length > 0 ? _toConsumableArray(knobsPositions) : undefined,
+    allowCross: false,
+    count: rangesCount,
+    railStyle: styles.rail,
+    handleStyle: knobStyles.knobInner,
+    trackStyle: trackStyles,
+    draggableTrack: !readOnly && !isSingle
+  }, sliderProps))), canShowError && /*#__PURE__*/React.createElement(HvWarningText, {
+    id: setId(elementId, "error"),
+    className: classes.error,
+    disableBorder: true
+  }, validationMessage));
+};
+
+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.
+   *
+   * Valid is correct, invalid is incorrect and standBy means no validations have run.
+   *
+   * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+   * or "invalid" after any change to `checked`, depending of the values of both `required` and `checked`.
+   */
+  status: 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.
+   */
+  knobProperties: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string,
+    hoverColor: PropTypes.string,
+    trackColor: PropTypes.string,
+    dragColor: PropTypes.string,
+    knobRingColor: PropTypes.string,
+    defaultValue: PropTypes.number,
+    hidden: PropTypes.bool,
+    fixed: PropTypes.bool
+  })),
+
+  /**
+   * The object used to set the mark properties individually.
+   */
+  markProperties: PropTypes.arrayOf(PropTypes.shape({
+    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.
+   */
+  classes: PropTypes.shape({
+    /**
+     * 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,
+
+    /**
+     * 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.
+   */
+  theme: PropTypes.any.isRequired
+} : void 0;
+export default withStyles(styleCreator, {
+  name: "HvSlider",
+  withTheme: true
+})(HvSlider);
+//# sourceMappingURL=Slider.js.map