@elliemae/ds-slider 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/DSSlider.js

@@ -1,48 +1,33 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSSlider_exports = {};
-__export(DSSlider_exports, {
-  DSSlider: () => DSSlider,
-  DSSliderWithSchema: () => DSSliderWithSchema,
-  default: () => DSSlider_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_SliderImp = __toESM(require("./components/SliderImp"));
-var import_prop_types = require("./prop-types");
-const DSSlider = (props) => /* @__PURE__ */ import_react.default.createElement(import_SliderImp.default, {
-  ...props
-});
-DSSlider.defaultProps = import_prop_types.defaultProps;
-DSSlider.propTypes = import_prop_types.sliderPropTypes;
-const DSSliderWithSchema = (0, import_react_desc.describe)(DSSlider);
-DSSliderWithSchema.propTypes = import_prop_types.sliderPropTypes;
-var DSSlider_default = DSSlider;
-module.exports = __toCommonJS(DSSlider_exports);
-//# sourceMappingURL=DSSlider.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var reactDesc = require('react-desc');
+var SliderImp = require('./components/SliderImp.js');
+var propTypes = require('./prop-types.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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; }
+
+const DSSlider = props => /*#__PURE__*/jsxRuntime.jsx(SliderImp, _objectSpread({}, props));
+
+DSSlider.defaultProps = propTypes.defaultProps;
+const DSSliderWithSchema = reactDesc.describe(DSSlider);
+DSSliderWithSchema.propTypes = propTypes.sliderPropTypes;
+
+exports.DSSlider = DSSlider;
+exports.DSSliderWithSchema = DSSliderWithSchema;
+exports["default"] = DSSlider;

package/cjs/components/SliderImp.js

@@ -1,59 +1,46 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var SliderImp_exports = {};
-__export(SliderImp_exports, {
-  default: () => SliderImp_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_uuid = require("uuid");
-var import_react_range = require("react-range");
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_ds_truncated_tooltip_text = __toESM(require("@elliemae/ds-truncated-tooltip-text"));
-var import_ds_grid = require("@elliemae/ds-grid");
-var import_Track = __toESM(require("./Track"));
-var import_Thumb = __toESM(require("./Thumb"));
-var import_styled = require("./styled");
-var import_utils = require("./utils");
-var import_context = require("./context");
-const getSubArrayFromRange = (arr, [minVal, maxVal], isCustomTickMarksValues = false) => {
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var uuid = require('uuid');
+var reactRange = require('react-range');
+var dsUtilities = require('@elliemae/ds-utilities');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var dsGrid = require('@elliemae/ds-grid');
+var Track = require('./Track.js');
+var Thumb = require('./Thumb.js');
+var styled = require('./styled.js');
+var utils = require('./utils.js');
+var context = require('./context.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
+
+const getSubArrayFromRange = function (arr, _ref) {
+  let [minVal, maxVal] = _ref;
+  let isCustomTickMarksValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
-  const minIndex = arr.findIndex((el) => el === trueMinVal);
-  if (maxVal !== void 0) {
+  const minIndex = arr.findIndex(el => el === trueMinVal);
+
+  if (maxVal !== undefined) {
+    // if two handlers, return the found slice
     const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;
-    const maxIndex = arr.findIndex((el) => el === trueMaxVal);
-    if (minIndex >= 0 && maxIndex > minIndex)
-      return arr.slice(minIndex, maxIndex + 1);
+    const maxIndex = arr.findIndex(el => el === trueMaxVal);
+    if (minIndex >= 0 && maxIndex > minIndex) return arr.slice(minIndex, maxIndex + 1);
     return [];
-  }
+  } // if only one handler, return the value in an array
+
+
   return [trueMinVal];
 };
-const SliderImp = (props) => {
+
+const SliderImp = props => {
+  var _ref$current3;
+
   const {
     containerProps,
     disabled,
@@ -69,127 +56,144 @@ const SliderImp = (props) => {
     customTickMarksValues,
     zIndex
   } = props;
-  const ref = (0, import_react.useRef)();
-  const [width, setWidth] = (0, import_react.useState)(0);
-  const sliderUUID = (0, import_react.useMemo)(() => (0, import_uuid.v4)(), []);
-  const parsedMinValue = (0, import_react.useMemo)(() => {
-    if (customTickMarksValues?.length)
-      return 0;
+  const ref = React.useRef();
+  const [width, setWidth] = React.useState(0);
+  const sliderUUID = React.useMemo(() => uuid.v4(), []);
+  const parsedMinValue = React.useMemo(() => {
+    // ensure this works correctly with customTickMarksValues array
+    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return 0;
     return minValue;
-  }, [customTickMarksValues?.length, minValue]);
-  const parsedMaxValue = (0, import_react.useMemo)(() => {
-    if (customTickMarksValues?.length)
-      return customTickMarksValues?.length - 1;
+  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue]);
+  const parsedMaxValue = React.useMemo(() => {
+    // ensure this works correctly with customTickMarksValues array
+    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return (customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length) - 1;
     return maxValue;
-  }, [customTickMarksValues?.length, maxValue]);
-  const parsedStep = (0, import_react.useMemo)(() => {
-    if (customTickMarksValues?.length)
-      return 1;
+  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, maxValue]);
+  const parsedStep = React.useMemo(() => {
+    // ensure this works correctly with customTickMarksValues array
+    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return 1;
     return step;
-  }, [customTickMarksValues?.length, step]);
-  const parsedValuesArray = (0, import_react.useMemo)(() => {
-    if (customTickMarksValues?.length)
-      return customTickMarksValues;
+  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, step]);
+  const parsedValuesArray = React.useMemo(() => {
+    // ensure this works correctly with customTickMarksValues array
+    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return customTickMarksValues;
     const newLength = Math.ceil(maxValue / step);
     const valuesArray = [];
+
     for (let i = 0; i <= newLength; i += 1) {
       valuesArray.push(step * i);
     }
+
     return valuesArray;
-  }, [customTickMarksValues?.length, minValue, maxValue, step]);
-  const [rangeValues, setRangeValues] = (0, import_react.useState)(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]);
-  const [fullSelectedValues, setFullSelectedValues] = (0, import_react.useState)([]);
-  (0, import_react.useEffect)(() => {
-    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);
+  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue, maxValue, step]);
+  const [rangeValues, setRangeValues] = React.useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]); // track the full slice of values selected instead of only the limits
+  // this is important to handle the selected range labels colors
+
+  const [fullSelectedValues, setFullSelectedValues] = React.useState([]);
+  React.useEffect(() => {
+    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!(customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length));
     setFullSelectedValues(selectedRangeValues);
-  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);
-  const prevWithTwoHandles = (0, import_ds_utilities.usePrevious)(withTwoHandles);
+  }, [parsedValuesArray, rangeValues, customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length]);
+  const prevWithTwoHandles = dsUtilities.usePrevious(withTwoHandles);
+
   const resizeHandler = () => {
+    var _ref$current;
+
     setWidth(0);
-    setWidth(ref.current?.clientWidth);
+    setWidth((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth);
   };
-  (0, import_react.useEffect)(() => {
-    window.addEventListener("resize", resizeHandler);
-    return () => window.removeEventListener("resize", resizeHandler);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', resizeHandler);
+    return () => window.removeEventListener('resize', resizeHandler);
   });
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (!prevWithTwoHandles && withTwoHandles) {
       setRangeValues([parsedMinValue, parsedMaxValue]);
     } else if (prevWithTwoHandles && !withTwoHandles) {
       setRangeValues([parsedMinValue]);
     }
   }, [withTwoHandles]);
-  (0, import_react.useEffect)(() => {
-    setWidth(ref.current?.clientWidth);
-  }, [ref.current?.clientWidth]);
-  const [finalLabelText, finalValueText] = (0, import_react.useMemo)(() => (0, import_utils.conformedLabel)(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep), [
-    rangeValues,
-    label,
-    labelWithValue,
-    withTwoHandles,
-    customTickMarksValues,
-    parsedStep
-  ]);
-  const SliderLabel = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styled.LabelText, null, finalLabelText), finalLabelText && " ", /* @__PURE__ */ import_react.default.createElement(import_styled.ValueText, {
-    disabled
-  }, finalValueText));
-  return /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.TooltipTextProvider, null, /* @__PURE__ */ import_react.default.createElement("div", {
-    ref
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    width: "100%",
-    style: { maxWidth: "100%" },
-    containerProps,
-    "data-testid": "slider",
-    rows: ["auto", "auto"]
-  }, /* @__PURE__ */ import_react.default.createElement(import_context.SliderContext.Provider, {
-    value: {
-      disabled,
-      sliderUUID,
-      label,
-      labelWithValue,
-      minValue: parsedMinValue,
-      maxValue: parsedMaxValue,
+  React.useEffect(() => {
+    var _ref$current2;
+
+    setWidth((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.clientWidth);
+  }, [(_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.clientWidth]);
+  const [finalLabelText, finalValueText] = React.useMemo(() => utils.conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep), [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]);
+
+  const SliderLabel = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/_jsx__default["default"](styled.LabelText, {}, void 0, finalLabelText), finalLabelText && ' ', /*#__PURE__*/_jsx__default["default"](styled.ValueText, {
+      disabled: disabled
+    }, void 0, finalValueText)]
+  });
+
+  return /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    children: /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+      width: "100%",
+      style: {
+        maxWidth: '100%'
+      },
+      containerProps: containerProps,
+      "data-testid": "slider",
+      rows: ['auto', 'auto']
+    }, void 0, /*#__PURE__*/_jsx__default["default"](context.SliderContext.Provider, {
+      value: {
+        disabled,
+        sliderUUID,
+        label,
+        labelWithValue,
+        minValue: parsedMinValue,
+        maxValue: parsedMaxValue,
+        step: parsedStep,
+        parsedValuesArray,
+        withTickMarks,
+        withTickMarksValues,
+        withTwoHandles,
+        customTickMarksValues,
+        rangeValues,
+        fullSelectedValues,
+        zIndex
+      }
+    }, void 0, finalLabelText && /*#__PURE__*/_jsx__default["default"](styled.LabelWrapper, {
+      width: width
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
+      value: SliderLabel
+    })), /*#__PURE__*/_jsx__default["default"](styled.StyledRangeWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](reactRange.Range, {
       step: parsedStep,
-      parsedValuesArray,
-      withTickMarks,
-      withTickMarksValues,
-      withTwoHandles,
-      customTickMarksValues,
-      rangeValues,
-      fullSelectedValues,
-      zIndex
-    }
-  }, finalLabelText && /* @__PURE__ */ import_react.default.createElement(import_styled.LabelWrapper, {
-    width
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.default, {
-    value: SliderLabel
-  })), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledRangeWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_react_range.Range, {
-    step: parsedStep,
-    min: parsedMinValue,
-    max: parsedMaxValue,
-    values: rangeValues,
-    disabled,
-    onChange: (values) => {
-      if (withTwoHandles && values[0] === values[1])
-        return;
-      setRangeValues(values);
-      onChange(values);
-    },
-    renderTrack: ({ props: trackProps, children }) => /* @__PURE__ */ import_react.default.createElement(import_Track.default, {
-      props: trackProps
-    }, children),
-    renderThumb: (renderArgs) => {
-      const { index, props: thumbProps, isDragged } = renderArgs;
-      return /* @__PURE__ */ import_react.default.createElement(import_Thumb.default, {
-        key: `${sliderUUID}-${thumbProps.key}`,
-        props: thumbProps,
-        isDragged,
-        index
-      });
-    },
-    allowOverlap: false
-  }))))));
-};
-var SliderImp_default = SliderImp;
-module.exports = __toCommonJS(SliderImp_exports);
-//# sourceMappingURL=SliderImp.js.map
+      min: parsedMinValue,
+      max: parsedMaxValue,
+      values: rangeValues,
+      disabled: disabled,
+      onChange: values => {
+        if (withTwoHandles && values[0] === values[1]) return;
+        setRangeValues(values);
+        onChange(values);
+      },
+      renderTrack: _ref2 => {
+        let {
+          props: trackProps,
+          children
+        } = _ref2;
+        return /*#__PURE__*/_jsx__default["default"](Track, {
+          props: trackProps
+        }, void 0, children);
+      },
+      renderThumb: renderArgs => {
+        const {
+          index,
+          props: thumbProps,
+          isDragged
+        } = renderArgs;
+        return /*#__PURE__*/_jsx__default["default"](Thumb, {
+          props: thumbProps,
+          isDragged: isDragged,
+          index: index
+        }, "".concat(sliderUUID, "-").concat(thumbProps.key));
+      },
+      allowOverlap: false
+    }))))
+  }));
+}; // SliderImp.propTypes = sliderPropTypes;
+
+module.exports = SliderImp;

package/cjs/components/Thumb.js

@@ -1,43 +1,38 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var Thumb_exports = {};
-__export(Thumb_exports, {
-  default: () => Thumb_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_prop_types = __toESM(require("prop-types"));
-var import_ds_tooltip = require("@elliemae/ds-tooltip");
-var import_context = require("./context");
-var import_utils = require("./utils");
-var import_styled = require("./styled");
-const Thumb = ({ index, props, isDragged }) => {
-  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsTooltip = require('@elliemae/ds-tooltip');
+var context = require('./context.js');
+var utils = require('./utils.js');
+var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+var _TooltipArrow;
+
+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__default["default"](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; }
+
+const Thumb = _ref => {
+  let {
+    index,
+    props,
+    isDragged
+  } = _ref;
+  const [isHovered, setIsHovered] = React.useState(false);
   const {
     disabled,
     rangeValues,
@@ -45,28 +40,32 @@ const Thumb = ({ index, props, isDragged }) => {
     customTickMarksValues,
     step,
     minValue
-  } = (0, import_react.useContext)(import_context.SliderContext);
-  const cleanedProps = { ...props };
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.ThumbStyled, {
-    ...cleanedProps,
-    "data-testid": "slider-thumb",
-    disabled,
-    style: { ...cleanedProps.style, zIndex },
-    index,
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false)
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled.TooltipContainerStyled, {
-    isDragged,
-    isHovered
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.TooltipText, null, (0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue)), /* @__PURE__ */ import_react.default.createElement(import_styled.TooltipArrow, null)));
-};
-Thumb.propTypes = {
-  index: import_prop_types.default.number,
-  props: import_prop_types.default.shape({
-    style: import_prop_types.default.shape({}).isRequired
-  }).isRequired,
-  isDragged: import_prop_types.default.bool
+  } = React.useContext(context.SliderContext);
+
+  const cleanedProps = _objectSpread({}, props); // delete cleanedProps.key;
+  // delete cleanedProps.draggable;
+
+
+  return (
+    /*#__PURE__*/
+    // ...props is needed because it's received from the library
+    // ...props.style has it own style from the library but has a bug with the zIndex for two thumbs, so that's why it has to be overwrite
+    jsxRuntime.jsx(styled.ThumbStyled, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+      "data-testid": "slider-thumb",
+      disabled: disabled // eslint-disable-next-line react/prop-types
+      ,
+      style: _objectSpread(_objectSpread({}, cleanedProps.style), {}, {
+        zIndex
+      }),
+      index: index,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: /*#__PURE__*/_jsx__default["default"](styled.TooltipContainerStyled, {
+        isDragged: isDragged,
+        isHovered: isHovered
+      }, void 0, /*#__PURE__*/_jsx__default["default"](dsTooltip.TooltipText, {}, void 0, utils.conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)), _TooltipArrow || (_TooltipArrow = /*#__PURE__*/_jsx__default["default"](styled.TooltipArrow, {})))
+    }))
+  );
 };
-var Thumb_default = Thumb;
-module.exports = __toCommonJS(Thumb_exports);
-//# sourceMappingURL=Thumb.js.map
+
+module.exports = Thumb;