@elliemae/ds-slider 2.4.2-rc.1 → 2.4.2-rc.13

package/cjs/components/SliderImp.js

@@ -1,7 +1,6 @@
 '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');
@@ -39,8 +38,6 @@ const getSubArrayFromRange = function (arr, _ref) {
 };
 
 const SliderImp = props => {
-  var _ref$current3;
-
   const {
     containerProps,
     disabled,
@@ -61,22 +58,22 @@ const SliderImp = props => {
   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;
+    if (customTickMarksValues?.length) return 0;
     return minValue;
-  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue]);
+  }, [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;
+    if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;
     return maxValue;
-  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, maxValue]);
+  }, [customTickMarksValues?.length, maxValue]);
   const parsedStep = React.useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
-    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return 1;
+    if (customTickMarksValues?.length) return 1;
     return step;
-  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, step]);
+  }, [customTickMarksValues?.length, step]);
   const parsedValuesArray = React.useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
-    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return customTickMarksValues;
+    if (customTickMarksValues?.length) return customTickMarksValues;
     const newLength = Math.ceil(maxValue / step);
     const valuesArray = [];
 
@@ -85,22 +82,20 @@ const SliderImp = props => {
     }
 
     return valuesArray;
-  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue, maxValue, step]);
+  }, [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));
+    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);
     setFullSelectedValues(selectedRangeValues);
-  }, [parsedValuesArray, rangeValues, customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length]);
+  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);
   const prevWithTwoHandles = dsUtilities.usePrevious(withTwoHandles);
 
   const resizeHandler = () => {
-    var _ref$current;
-
     setWidth(0);
-    setWidth((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth);
+    setWidth(ref.current?.clientWidth);
   };
 
   React.useEffect(() => {
@@ -115,10 +110,8 @@ const SliderImp = props => {
     }
   }, [withTwoHandles]);
   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]);
+    setWidth(ref.current?.clientWidth);
+  }, [ref.current?.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, {
@@ -189,7 +182,7 @@ const SliderImp = props => {
           props: thumbProps,
           isDragged: isDragged,
           index: index
-        }, "".concat(sliderUUID, "-").concat(thumbProps.key));
+        }, `${sliderUUID}-${thumbProps.key}`);
       },
       allowOverlap: false
     }))))

package/cjs/components/Thumb.js

@@ -1,13 +1,12 @@
 '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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var dsTooltip = require('@elliemae/ds-tooltip');
 var context = require('./context.js');

package/cjs/components/TickMarksValues.js

@@ -25,7 +25,7 @@ const TickMarks = () => {
     const isSelected = fullSelectedValues.findIndex(selectedVal => selectedVal === value) >= 0;
     return /*#__PURE__*/_jsx__default["default"](TickMarkValue, {
       isSelected: isSelected
-    }, "".concat(sliderUUID, "-").concat(value), value);
+    }, `${sliderUUID}-${value}`, value);
   }), [parsedValuesArray, sliderUUID, fullSelectedValues]);
   const PureTickMArksValues = React.useMemo(() => _TickMarksContainer || (_TickMarksContainer = /*#__PURE__*/_jsx__default["default"](TickMarksContainer, {
     "data-testid": "slider-tick-marks-values"

package/cjs/components/styled.js

@@ -35,7 +35,7 @@ const TooltipArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["position:absolute;width:0;height:0;top:20px;border-left:calc(", " * 2.5) solid transparent;border-right:calc(", " * 2.5) solid transparent;border-top:calc(", " * 2.5) solid ", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.theme.colors.neutral[0]);
 const LabelWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-24in0j-3"
-})(["margin-bottom:", ";max-width:100%;width:", ";"], props => props.theme.space.xxs, props => "".concat(props.width || 0, "px"));
+})(["margin-bottom:", ";max-width:100%;width:", ";"], props => props.theme.space.xxs, props => `${props.width || 0}px`);
 const LabelText = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-24in0j-4"
 })(["color:", ";"], props => props.theme.colors.neutral[600]);

package/cjs/components/utils.js

@@ -18,11 +18,9 @@ const conformedLabel = function (rangeValues) {
   if (!dsUtilities.isEmpty(customTickMarksValues) && labelWithValue && label) {
     const firstValue = customTickMarksValues[(rangeValues[0] - minValue) / step];
     const secondValue = customTickMarksValues[(rangeValues[1] - minValue) / step];
-    value = "".concat(firstValue || rangeValues[0].toFixed(1), " ").concat(withTwoHandles ? ", ".concat(secondValue || rangeValues[1].toFixed(1)) : '', " ");
+    value = `${firstValue || rangeValues[0].toFixed(1)} ${withTwoHandles ? `, ${secondValue || rangeValues[1].toFixed(1)}` : ''} `;
   } else if (labelWithValue && label) {
-    var _rangeValues$;
-
-    value = "".concat(rangeValues[0].toFixed(1), " ").concat(withTwoHandles ? ", ".concat((_rangeValues$ = rangeValues[1]) === null || _rangeValues$ === void 0 ? void 0 : _rangeValues$.toFixed(1)) : '', " ");
+    value = `${rangeValues[0].toFixed(1)} ${withTwoHandles ? `, ${rangeValues[1]?.toFixed(1)}` : ''} `;
   }
 
   value = value.trim();
@@ -33,13 +31,13 @@ const conformedThumbLabel = function (rangeValues) {
   let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   let minValue = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  let msg = "Value: ";
+  let msg = `Value: `;
 
   if (!dsUtilities.isEmpty(customTickMarksValues)) {
     const foundValue = customTickMarksValues[(rangeValues[index] - minValue) / step];
-    msg += "".concat(foundValue || rangeValues[index].toFixed(1));
+    msg += `${foundValue || rangeValues[index].toFixed(1)}`;
   } else {
-    msg += "".concat(rangeValues[index].toFixed(1));
+    msg += `${rangeValues[index].toFixed(1)}`;
   }
 
   return msg;

package/esm/components/SliderImp.js

@@ -1,5 +1,4 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useMemo, useEffect } from 'react';
 import { v4 } from 'uuid';
 import { Range } from 'react-range';
@@ -32,8 +31,6 @@ const getSubArrayFromRange = function (arr, _ref) {
 };
 
 const SliderImp = props => {
-  var _ref$current3;
-
   const {
     containerProps,
     disabled,
@@ -54,22 +51,22 @@ const SliderImp = props => {
   const sliderUUID = useMemo(() => v4(), []);
   const parsedMinValue = useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
-    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return 0;
+    if (customTickMarksValues?.length) return 0;
     return minValue;
-  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue]);
+  }, [customTickMarksValues?.length, minValue]);
   const parsedMaxValue = 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;
+    if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;
     return maxValue;
-  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, maxValue]);
+  }, [customTickMarksValues?.length, maxValue]);
   const parsedStep = useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
-    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return 1;
+    if (customTickMarksValues?.length) return 1;
     return step;
-  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, step]);
+  }, [customTickMarksValues?.length, step]);
   const parsedValuesArray = useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
-    if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return customTickMarksValues;
+    if (customTickMarksValues?.length) return customTickMarksValues;
     const newLength = Math.ceil(maxValue / step);
     const valuesArray = [];
 
@@ -78,22 +75,20 @@ const SliderImp = props => {
     }
 
     return valuesArray;
-  }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue, maxValue, step]);
+  }, [customTickMarksValues?.length, minValue, maxValue, step]);
   const [rangeValues, setRangeValues] = 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] = useState([]);
   useEffect(() => {
-    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!(customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length));
+    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);
     setFullSelectedValues(selectedRangeValues);
-  }, [parsedValuesArray, rangeValues, customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length]);
+  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);
   const prevWithTwoHandles = usePrevious(withTwoHandles);
 
   const resizeHandler = () => {
-    var _ref$current;
-
     setWidth(0);
-    setWidth((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth);
+    setWidth(ref.current?.clientWidth);
   };
 
   useEffect(() => {
@@ -108,10 +103,8 @@ const SliderImp = props => {
     }
   }, [withTwoHandles]);
   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]);
+    setWidth(ref.current?.clientWidth);
+  }, [ref.current?.clientWidth]);
   const [finalLabelText, finalValueText] = useMemo(() => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep), [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]);
 
   const SliderLabel = /*#__PURE__*/jsxs(Fragment, {
@@ -182,7 +175,7 @@ const SliderImp = props => {
           props: thumbProps,
           isDragged: isDragged,
           index: index
-        }, "".concat(sliderUUID, "-").concat(thumbProps.key));
+        }, `${sliderUUID}-${thumbProps.key}`);
       },
       allowOverlap: false
     }))))

package/esm/components/Thumb.js

@@ -5,7 +5,6 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useContext } from 'react';
 import { TooltipText } from '@elliemae/ds-tooltip';
 import { SliderContext } from './context.js';

package/esm/components/TickMarksValues.js

@@ -18,7 +18,7 @@ const TickMarks = () => {
     const isSelected = fullSelectedValues.findIndex(selectedVal => selectedVal === value) >= 0;
     return /*#__PURE__*/_jsx(TickMarkValue, {
       isSelected: isSelected
-    }, "".concat(sliderUUID, "-").concat(value), value);
+    }, `${sliderUUID}-${value}`, value);
   }), [parsedValuesArray, sliderUUID, fullSelectedValues]);
   const PureTickMArksValues = useMemo(() => _TickMarksContainer || (_TickMarksContainer = /*#__PURE__*/_jsx(TickMarksContainer, {
     "data-testid": "slider-tick-marks-values"

package/esm/components/styled.js

@@ -27,7 +27,7 @@ const TooltipArrow = /*#__PURE__*/styled.div.withConfig({
 })(["position:absolute;width:0;height:0;top:20px;border-left:calc(", " * 2.5) solid transparent;border-right:calc(", " * 2.5) solid transparent;border-top:calc(", " * 2.5) solid ", ";"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.theme.colors.neutral[0]);
 const LabelWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-24in0j-3"
-})(["margin-bottom:", ";max-width:100%;width:", ";"], props => props.theme.space.xxs, props => "".concat(props.width || 0, "px"));
+})(["margin-bottom:", ";max-width:100%;width:", ";"], props => props.theme.space.xxs, props => `${props.width || 0}px`);
 const LabelText = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-24in0j-4"
 })(["color:", ";"], props => props.theme.colors.neutral[600]);

package/esm/components/utils.js

@@ -14,11 +14,9 @@ const conformedLabel = function (rangeValues) {
   if (!isEmpty(customTickMarksValues) && labelWithValue && label) {
     const firstValue = customTickMarksValues[(rangeValues[0] - minValue) / step];
     const secondValue = customTickMarksValues[(rangeValues[1] - minValue) / step];
-    value = "".concat(firstValue || rangeValues[0].toFixed(1), " ").concat(withTwoHandles ? ", ".concat(secondValue || rangeValues[1].toFixed(1)) : '', " ");
+    value = `${firstValue || rangeValues[0].toFixed(1)} ${withTwoHandles ? `, ${secondValue || rangeValues[1].toFixed(1)}` : ''} `;
   } else if (labelWithValue && label) {
-    var _rangeValues$;
-
-    value = "".concat(rangeValues[0].toFixed(1), " ").concat(withTwoHandles ? ", ".concat((_rangeValues$ = rangeValues[1]) === null || _rangeValues$ === void 0 ? void 0 : _rangeValues$.toFixed(1)) : '', " ");
+    value = `${rangeValues[0].toFixed(1)} ${withTwoHandles ? `, ${rangeValues[1]?.toFixed(1)}` : ''} `;
   }
 
   value = value.trim();
@@ -29,13 +27,13 @@ const conformedThumbLabel = function (rangeValues) {
   let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   let minValue = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  let msg = "Value: ";
+  let msg = `Value: `;
 
   if (!isEmpty(customTickMarksValues)) {
     const foundValue = customTickMarksValues[(rangeValues[index] - minValue) / step];
-    msg += "".concat(foundValue || rangeValues[index].toFixed(1));
+    msg += `${foundValue || rangeValues[index].toFixed(1)}`;
   } else {
-    msg += "".concat(rangeValues[index].toFixed(1));
+    msg += `${rangeValues[index].toFixed(1)}`;
   }
 
   return msg;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-slider",
-  "version": "2.4.2-rc.1",
+  "version": "2.4.2-rc.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Slider",
   "module": "./esm/index.js",
@@ -72,11 +72,11 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-grid": "2.4.2-rc.1",
-    "@elliemae/ds-system": "2.4.2-rc.1",
-    "@elliemae/ds-tooltip": "2.4.2-rc.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.1",
-    "@elliemae/ds-utilities": "2.4.2-rc.1",
+    "@elliemae/ds-grid": "2.4.2-rc.13",
+    "@elliemae/ds-system": "2.4.2-rc.13",
+    "@elliemae/ds-tooltip": "2.4.2-rc.13",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.13",
+    "@elliemae/ds-utilities": "2.4.2-rc.13",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-range": "~1.8.11",