@elliemae/ds-slider 1.60.0 → 2.0.0-alpha.12

package/cjs/DSSlider.js

@@ -2,44 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+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 components_SliderImp = require('./components/SliderImp.js');
+var SliderImp = require('./components/SliderImp.js');
 var propTypes = require('./prop-types.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('uuid');
-require('react-range');
-require('@elliemae/ds-utilities');
-require('@elliemae/ds-truncated-tooltip-text');
-require('@elliemae/ds-grid');
-require('./components/Track.js');
-require('@babel/runtime/helpers/extends');
-require('styled-components');
-require('@elliemae/ds-system');
-require('./components/TickMarks.js');
-require('./components/context.js');
-require('./components/TickMarksValues.js');
-require('./components/Thumb.js');
-require('@babel/runtime/helpers/defineProperty');
-require('prop-types');
-require('@elliemae/ds-tooltip');
-require('./components/utils.js');
-require('./components/styled.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
-var DSSlider = function DSSlider(props) {
-  return /*#__PURE__*/React__default['default'].createElement(components_SliderImp, props);
-};
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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;
-DSSlider.propTypes = propTypes.sliderPropTypes;
-var DSSliderWithSchema = reactDesc.describe(DSSlider);
+const DSSliderWithSchema = reactDesc.describe(DSSlider);
 DSSliderWithSchema.propTypes = propTypes.sliderPropTypes;
 
 exports.DSSlider = DSSlider;
 exports.DSSliderWithSchema = DSSliderWithSchema;
-exports['default'] = DSSlider;
-//# sourceMappingURL=DSSlider.js.map
+exports["default"] = DSSlider;

package/cjs/components/SliderImp.js

@@ -1,49 +1,35 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+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 components_Track = require('./Track.js');
-var components_Thumb = require('./Thumb.js');
-var components_styled = require('./styled.js');
-var components_utils = require('./utils.js');
-var components_context = require('./context.js');
-require('@babel/runtime/helpers/extends');
-require('styled-components');
-require('@elliemae/ds-system');
-require('./TickMarks.js');
-require('./TickMarksValues.js');
-require('@babel/runtime/helpers/defineProperty');
-require('prop-types');
-require('@elliemae/ds-tooltip');
+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 _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
 
-var getSubArrayFromRange = function getSubArrayFromRange(arr, _ref) {
-  var _ref2 = _slicedToArray__default['default'](_ref, 2),
-      minVal = _ref2[0],
-      maxVal = _ref2[1];
-
-  var isCustomTickMarksValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
-  var minIndex = arr.findIndex(function (el) {
-    return el === trueMinVal;
-  });
+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 !== undefined) {
     // if two handlers, return the found slice
-    var trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;
-    var maxIndex = arr.findIndex(function (el) {
-      return el === trueMaxVal;
-    });
+    const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;
+    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
@@ -52,179 +38,162 @@ var getSubArrayFromRange = function getSubArrayFromRange(arr, _ref) {
   return [trueMinVal];
 };
 
-var SliderImp = function SliderImp(props) {
+const SliderImp = props => {
   var _ref$current3;
 
-  var containerProps = props.containerProps,
-      disabled = props.disabled,
-      label = props.label,
-      labelWithValue = props.labelWithValue,
-      minValue = props.minValue,
-      maxValue = props.maxValue,
-      step = props.step,
-      _onChange = props.onChange,
-      withTickMarks = props.withTickMarks,
-      withTickMarksValues = props.withTickMarksValues,
-      withTwoHandles = props.withTwoHandles,
-      customTickMarksValues = props.customTickMarksValues,
-      zIndex = props.zIndex;
-  var ref = React.useRef();
-
-  var _useState = React.useState(0),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      width = _useState2[0],
-      setWidth = _useState2[1];
-
-  var sliderUUID = React.useMemo(function () {
-    return uuid.v4();
-  }, []);
-  var parsedMinValue = React.useMemo(function () {
+  const {
+    containerProps,
+    disabled,
+    label,
+    labelWithValue,
+    minValue,
+    maxValue,
+    step,
+    onChange,
+    withTickMarks,
+    withTickMarksValues,
+    withTwoHandles,
+    customTickMarksValues,
+    zIndex
+  } = props;
+  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 === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue]);
-  var parsedMaxValue = React.useMemo(function () {
+  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 === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, maxValue]);
-  var parsedStep = React.useMemo(function () {
+  const parsedStep = React.useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
     if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return 1;
     return step;
   }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, step]);
-  var parsedValuesArray = React.useMemo(function () {
+  const parsedValuesArray = React.useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
     if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return customTickMarksValues;
-    var newLength = Math.ceil(maxValue / step);
-    var valuesArray = [];
+    const newLength = Math.ceil(maxValue / step);
+    const valuesArray = [];
 
-    for (var i = 0; i <= newLength; i += 1) {
+    for (let i = 0; i <= newLength; i += 1) {
       valuesArray.push(step * i);
     }
 
     return valuesArray;
   }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue, maxValue, step]);
-
-  var _useState3 = React.useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      rangeValues = _useState4[0],
-      setRangeValues = _useState4[1]; // track the full slice of values selected instead of only the limits
+  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
 
-
-  var _useState5 = React.useState([]),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      fullSelectedValues = _useState6[0],
-      setFullSelectedValues = _useState6[1];
-
-  React.useEffect(function () {
-    var selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!(customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length));
+  const [fullSelectedValues, setFullSelectedValues] = React.useState([]);
+  React.useEffect(() => {
+    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!(customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length));
     setFullSelectedValues(selectedRangeValues);
   }, [parsedValuesArray, rangeValues, customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length]);
-  var prevWithTwoHandles = dsUtilities.usePrevious(withTwoHandles);
+  const prevWithTwoHandles = dsUtilities.usePrevious(withTwoHandles);
 
-  var resizeHandler = function resizeHandler() {
+  const resizeHandler = () => {
     var _ref$current;
 
     setWidth(0);
     setWidth((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth);
   };
 
-  React.useEffect(function () {
+  React.useEffect(() => {
     window.addEventListener('resize', resizeHandler);
-    return function () {
-      return window.removeEventListener('resize', resizeHandler);
-    };
+    return () => window.removeEventListener('resize', resizeHandler);
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!prevWithTwoHandles && withTwoHandles) {
       setRangeValues([parsedMinValue, parsedMaxValue]);
     } else if (prevWithTwoHandles && !withTwoHandles) {
       setRangeValues([parsedMinValue]);
     }
   }, [withTwoHandles]);
-  React.useEffect(function () {
+  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]);
 
-  var _useMemo = React.useMemo(function () {
-    return components_utils.conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep);
-  }, [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]),
-      _useMemo2 = _slicedToArray__default['default'](_useMemo, 2),
-      finalLabelText = _useMemo2[0],
-      finalValueText = _useMemo2[1];
-
-  var SliderLabel = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(components_styled.LabelText, null, finalLabelText), finalLabelText && ' ', /*#__PURE__*/React__default['default'].createElement(components_styled.ValueText, {
-    disabled: disabled
-  }, finalValueText));
-  return /*#__PURE__*/React__default['default'].createElement(DSTruncatedTooltipText.TooltipTextProvider, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
-    width: "100%",
-    style: {
-      maxWidth: '100%'
-    },
-    containerProps: containerProps,
-    "data-testid": "slider",
-    rows: ['auto', 'auto']
-  }, /*#__PURE__*/React__default['default'].createElement(components_context.SliderContext.Provider, {
-    value: {
-      disabled: disabled,
-      sliderUUID: sliderUUID,
-      label: label,
-      labelWithValue: labelWithValue,
-      minValue: parsedMinValue,
-      maxValue: parsedMaxValue,
+  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: parsedValuesArray,
-      withTickMarks: withTickMarks,
-      withTickMarksValues: withTickMarksValues,
-      withTwoHandles: withTwoHandles,
-      customTickMarksValues: customTickMarksValues,
-      rangeValues: rangeValues,
-      fullSelectedValues: fullSelectedValues,
-      zIndex: zIndex
-    }
-  }, finalLabelText && /*#__PURE__*/React__default['default'].createElement(components_styled.LabelWrapper, {
-    width: width
-  }, /*#__PURE__*/React__default['default'].createElement(DSTruncatedTooltipText__default['default'], {
-    value: SliderLabel
-  })), /*#__PURE__*/React__default['default'].createElement(components_styled.StyledRangeWrapper, null, /*#__PURE__*/React__default['default'].createElement(reactRange.Range, {
-    step: parsedStep,
-    min: parsedMinValue,
-    max: parsedMaxValue,
-    values: rangeValues,
-    disabled: disabled,
-    onChange: function onChange(values) {
-      if (withTwoHandles && values[0] === values[1]) return;
-      setRangeValues(values);
-
-      _onChange(values);
-    },
-    renderTrack: function renderTrack(_ref3) {
-      var trackProps = _ref3.props,
-          children = _ref3.children;
-      return /*#__PURE__*/React__default['default'].createElement(components_Track, {
-        props: trackProps
-      }, children);
-    },
-    renderThumb: function renderThumb(renderArgs) {
-      var index = renderArgs.index,
-          thumbProps = renderArgs.props,
-          isDragged = renderArgs.isDragged;
-      return /*#__PURE__*/React__default['default'].createElement(components_Thumb, {
-        key: "".concat(sliderUUID, "-").concat(thumbProps.key),
-        props: thumbProps,
-        isDragged: isDragged,
-        index: index
-      });
-    },
-    allowOverlap: false
-  }))))));
+      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;
-//# sourceMappingURL=SliderImp.js.map

package/cjs/components/Thumb.js

@@ -1,49 +1,48 @@
 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+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 PropTypes = require('prop-types');
 var dsTooltip = require('@elliemae/ds-tooltip');
-var components_context = require('./context.js');
-var components_utils = require('./utils.js');
-var components_styled = require('./styled.js');
-require('@elliemae/ds-utilities');
-require('styled-components');
-require('@elliemae/ds-system');
+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 _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _TooltipArrow;
 
-var Thumb = function Thumb(_ref) {
-  var index = _ref.index,
-      props = _ref.props,
-      isDragged = _ref.isDragged;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  var _useContext = React.useContext(components_context.SliderContext),
-      disabled = _useContext.disabled,
-      rangeValues = _useContext.rangeValues,
-      zIndex = _useContext.zIndex,
-      customTickMarksValues = _useContext.customTickMarksValues,
-      step = _useContext.step,
-      minValue = _useContext.minValue;
+const Thumb = _ref => {
+  let {
+    index,
+    props,
+    isDragged
+  } = _ref;
+  const [isHovered, setIsHovered] = React.useState(false);
+  const {
+    disabled,
+    rangeValues,
+    zIndex,
+    customTickMarksValues,
+    step,
+    minValue
+  } = React.useContext(context.SliderContext);
 
-  var cleanedProps = _objectSpread({}, props); // delete cleanedProps.key;
+  const cleanedProps = _objectSpread({}, props); // delete cleanedProps.key;
   // delete cleanedProps.draggable;
 
 
@@ -51,34 +50,22 @@ var Thumb = function Thumb(_ref) {
     /*#__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
-    React__default['default'].createElement(components_styled.ThumbStyled, _extends__default['default']({}, cleanedProps, {
+    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: zIndex
+        zIndex
       }),
       index: index,
-      onMouseEnter: function onMouseEnter() {
-        return setIsHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setIsHovered(false);
-      }
-    }), /*#__PURE__*/React__default['default'].createElement(components_styled.TooltipContainerStyled, {
-      isDragged: isDragged,
-      isHovered: isHovered
-    }, /*#__PURE__*/React__default['default'].createElement(dsTooltip.TooltipText, null, components_utils.conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)), /*#__PURE__*/React__default['default'].createElement(components_styled.TooltipArrow, null)))
+      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, {})))
+    }))
   );
 };
 
-Thumb.propTypes = {
-  index: PropTypes__default['default'].number,
-  props: PropTypes__default['default'].shape({
-    style: PropTypes__default['default'].shape({}).isRequired
-  }).isRequired,
-  isDragged: PropTypes__default['default'].bool
-};
-
 module.exports = Thumb;
-//# sourceMappingURL=Thumb.js.map

package/cjs/components/TickMarks.js

@@ -1,57 +1,46 @@
 'use strict';
 
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
-var components_context = require('./context.js');
+var context = require('./context.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/* eslint-disable indent */
-
-var TickMarks = function TickMarks() {
-  var _useContext = React.useContext(components_context.SliderContext),
-      minValue = _useContext.minValue,
-      maxValue = _useContext.maxValue,
-      rangeValues = _useContext.rangeValues,
-      step = _useContext.step,
-      withTwoHandles = _useContext.withTwoHandles,
-      zIndex = _useContext.zIndex;
-
-  var dots = [];
-
-  for (var index = minValue || 0; index <= maxValue; index += step) {
-    var isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;
-    dots.push( /*#__PURE__*/React__default['default'].createElement(Dot, {
+const TickMarks = () => {
+  const {
+    minValue,
+    maxValue,
+    rangeValues,
+    step,
+    withTwoHandles,
+    zIndex
+  } = React.useContext(context.SliderContext);
+  const dots = [];
+
+  for (let index = minValue || 0; index <= maxValue; index += step) {
+    const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;
+    dots.push( /*#__PURE__*/_jsx__default["default"](Dot, {
       "data-testid": "slider-dot",
-      isActive: isActive,
-      key: index
-    }));
+      isActive: isActive
+    }, index));
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(DotsContainer, {
+  return /*#__PURE__*/_jsx__default["default"](DotsContainer, {
     "data-testid": "slider-tick-marks",
     zIndex: zIndex
-  }, dots);
+  }, void 0, dots);
 };
 
-var Dot = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Dot = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-15z2sh4-0"
-})(["&:after{content:'';background:", ";border-radius:", ";display:block;position:relative;width:2px;height:2px;}"], function (props) {
-  return props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400];
-}, function (props) {
-  return dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs);
-});
-var DotsContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["&:after{content:'';background:", ";border-radius:", ";display:block;position:relative;width:2px;height:2px;}"], props => props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+const DotsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-15z2sh4-1"
-})(["padding:0 calc(", " * 0.5);align-items:center;display:flex;justify-content:space-between;pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:", ";"], function (props) {
-  return dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs);
-}, function (props) {
-  return props.zIndex - 1;
-});
+})(["padding:0 calc(", " * 0.5);align-items:center;display:flex;justify-content:space-between;pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.zIndex - 1);
 
 module.exports = TickMarks;
-//# sourceMappingURL=TickMarks.js.map