@elliemae/ds-slider 2.2.0-alpha.1 → 2.2.0-alpha.2

package/cjs/DSSlider.js

@@ -1,33 +1,48 @@
-'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;
+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 = __toESM(require("react-desc"));
+var import_SliderImp = __toESM(require("./components/SliderImp"));
+var import_prop_types = __toESM(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

package/cjs/DSSlider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSSlider.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { describe } from 'react-desc';\nimport SliderImp from './components/SliderImp';\nimport { defaultProps, sliderPropTypes } from './prop-types';\n\nconst DSSlider = (props) => <SliderImp {...props} />;\n\nDSSlider.defaultProps = defaultProps;\nDSSlider.propTypes = sliderPropTypes;\n\nconst DSSliderWithSchema = describe(DSSlider);\nDSSliderWithSchema.propTypes = sliderPropTypes;\n\nexport { DSSlider, DSSliderWithSchema };\nexport default DSSlider;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAyB;AACzB,uBAAsB;AACtB,wBAA8C;AAE9C,MAAM,WAAW,CAAC,UAAU,mDAAC,0BAAD;AAAA,KAAe;AAAA;AAE3C,SAAS,eAAe;AACxB,SAAS,YAAY;AAErB,MAAM,qBAAqB,gCAAS;AACpC,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
+  "names": []
+}

package/cjs/components/SliderImp.js

@@ -1,46 +1,59 @@
-'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;
+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 = __toESM(require("uuid"));
+var import_react_range = __toESM(require("react-range"));
+var import_ds_utilities = __toESM(require("@elliemae/ds-utilities"));
+var import_ds_truncated_tooltip_text = __toESM(require("@elliemae/ds-truncated-tooltip-text"));
+var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
+var import_Track = __toESM(require("./Track"));
+var import_Thumb = __toESM(require("./Thumb"));
+var import_styled = __toESM(require("./styled"));
+var import_utils = __toESM(require("./utils"));
+var import_context = __toESM(require("./context"));
+const getSubArrayFromRange = (arr, [minVal, maxVal], isCustomTickMarksValues = false) => {
   const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
-  const minIndex = arr.findIndex(el => el === trueMinVal);
-
-  if (maxVal !== undefined) {
-    // if two handlers, return the found slice
+  const minIndex = arr.findIndex((el) => el === trueMinVal);
+  if (maxVal !== void 0) {
     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 => {
-  var _ref$current3;
-
+const SliderImp = (props) => {
   const {
     containerProps,
     disabled,
@@ -56,144 +69,127 @@ const SliderImp = props => {
     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;
+  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;
     return minValue;
-  }, [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;
+  }, [customTickMarksValues?.length, minValue]);
+  const parsedMaxValue = (0, import_react.useMemo)(() => {
+    if (customTickMarksValues?.length)
+      return customTickMarksValues?.length - 1;
     return maxValue;
-  }, [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;
+  }, [customTickMarksValues?.length, maxValue]);
+  const parsedStep = (0, import_react.useMemo)(() => {
+    if (customTickMarksValues?.length)
+      return 1;
     return step;
-  }, [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;
+  }, [customTickMarksValues?.length, step]);
+  const parsedValuesArray = (0, import_react.useMemo)(() => {
+    if (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 === 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));
+  }, [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);
     setFullSelectedValues(selectedRangeValues);
-  }, [parsedValuesArray, rangeValues, customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length]);
-  const prevWithTwoHandles = dsUtilities.usePrevious(withTwoHandles);
-
+  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);
+  const prevWithTwoHandles = (0, import_ds_utilities.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(() => {
-    window.addEventListener('resize', resizeHandler);
-    return () => window.removeEventListener('resize', resizeHandler);
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("resize", resizeHandler);
+    return () => window.removeEventListener("resize", resizeHandler);
   });
-  React.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!prevWithTwoHandles && withTwoHandles) {
       setRangeValues([parsedMinValue, parsedMaxValue]);
     } else if (prevWithTwoHandles && !withTwoHandles) {
       setRangeValues([parsedMinValue]);
     }
   }, [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]);
-  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, {
+  (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,
       step: parsedStep,
-      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;
+      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

package/cjs/components/SliderImp.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/SliderImp.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Range } from 'react-range';\nimport { usePrevious } from '@elliemae/ds-utilities';\nimport DSTruncatedTooltipText, {\n  TooltipTextProvider,\n} from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport Track from './Track';\nimport Thumb from './Thumb';\nimport {\n  LabelWrapper,\n  StyledRangeWrapper,\n  LabelText,\n  ValueText,\n} from './styled';\nimport { conformedLabel } from './utils';\nimport { SliderContext } from './context';\n\nconst getSubArrayFromRange = (\n  arr,\n  [minVal, maxVal], // maxValue is undefined when only one handler\n  isCustomTickMarksValues = false,\n) => {\n  const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;\n  const minIndex = arr.findIndex((el) => el === trueMinVal);\n\n  if (maxVal !== undefined) {\n    // if two handlers, return the found slice\n    const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;\n    const maxIndex = arr.findIndex((el) => el === trueMaxVal);\n\n    if (minIndex >= 0 && maxIndex > minIndex)\n      return arr.slice(minIndex, maxIndex + 1);\n    return [];\n  }\n  // if only one handler, return the value in an array\n  return [trueMinVal];\n};\n\nconst SliderImp = (props) => {\n  const {\n    containerProps,\n    disabled,\n    label,\n    labelWithValue,\n    minValue,\n    maxValue,\n    step,\n    onChange,\n    withTickMarks,\n    withTickMarksValues,\n    withTwoHandles,\n    customTickMarksValues,\n    zIndex,\n  } = props;\n  const ref = useRef();\n  const [width, setWidth] = useState(0);\n  const sliderUUID = useMemo(() => uuidv4(), []);\n\n  const parsedMinValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 0;\n    return minValue;\n  }, [customTickMarksValues?.length, minValue]);\n  const parsedMaxValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;\n    return maxValue;\n  }, [customTickMarksValues?.length, maxValue]);\n  const parsedStep = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 1;\n    return step;\n  }, [customTickMarksValues?.length, step]);\n\n  const parsedValuesArray = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues;\n    const newLength = Math.ceil(maxValue / step);\n    const valuesArray = [];\n    for (let i = 0; i <= newLength; i += 1) {\n      valuesArray.push(step * i);\n    }\n\n    return valuesArray;\n  }, [customTickMarksValues?.length, minValue, maxValue, step]);\n\n  const [rangeValues, setRangeValues] = useState(\n    withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue],\n  );\n  // track the full slice of values selected instead of only the limits\n  // this is important to handle the selected range labels colors\n  const [fullSelectedValues, setFullSelectedValues] = useState([]);\n  useEffect(() => {\n    const selectedRangeValues = getSubArrayFromRange(\n      parsedValuesArray,\n      rangeValues,\n      !!customTickMarksValues?.length,\n    );\n    setFullSelectedValues(selectedRangeValues);\n  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);\n\n  const prevWithTwoHandles = usePrevious(withTwoHandles);\n  const resizeHandler = () => {\n    setWidth(0);\n    setWidth(ref.current?.clientWidth);\n  };\n  useEffect(() => {\n    window.addEventListener('resize', resizeHandler);\n    return () => window.removeEventListener('resize', resizeHandler);\n  });\n  useEffect(() => {\n    if (!prevWithTwoHandles && withTwoHandles) {\n      setRangeValues([parsedMinValue, parsedMaxValue]);\n    } else if (prevWithTwoHandles && !withTwoHandles) {\n      setRangeValues([parsedMinValue]);\n    }\n  }, [withTwoHandles]);\n\n  useEffect(() => {\n    setWidth(ref.current?.clientWidth);\n  }, [ref.current?.clientWidth]);\n\n  const [finalLabelText, finalValueText] = useMemo(\n    () =>\n      conformedLabel(\n        rangeValues,\n        label,\n        labelWithValue,\n        withTwoHandles,\n        customTickMarksValues,\n        parsedStep,\n      ),\n    [\n      rangeValues,\n      label,\n      labelWithValue,\n      withTwoHandles,\n      customTickMarksValues,\n      parsedStep,\n    ],\n  );\n\n  const SliderLabel = (\n    <>\n      <LabelText>{finalLabelText}</LabelText>\n      {finalLabelText && ' '}\n      <ValueText disabled={disabled}>{finalValueText}</ValueText>\n    </>\n  );\n\n  return (\n    <TooltipTextProvider>\n      <div ref={ref}>\n        <Grid\n          width=\"100%\"\n          style={{ maxWidth: '100%' }}\n          containerProps={containerProps}\n          data-testid=\"slider\"\n          rows={['auto', 'auto']}\n        >\n          <SliderContext.Provider\n            value={{\n              disabled,\n              sliderUUID,\n              label,\n              labelWithValue,\n              minValue: parsedMinValue,\n              maxValue: parsedMaxValue,\n              step: parsedStep,\n              parsedValuesArray,\n              withTickMarks,\n              withTickMarksValues,\n              withTwoHandles,\n              customTickMarksValues,\n              rangeValues,\n              fullSelectedValues,\n              zIndex,\n            }}\n          >\n            {finalLabelText && (\n              <LabelWrapper width={width}>\n                <DSTruncatedTooltipText value={SliderLabel} />\n              </LabelWrapper>\n            )}\n            <StyledRangeWrapper>\n              <Range\n                step={parsedStep}\n                min={parsedMinValue}\n                max={parsedMaxValue}\n                values={rangeValues}\n                disabled={disabled}\n                onChange={(values) => {\n                  if (withTwoHandles && values[0] === values[1]) return;\n                  setRangeValues(values);\n                  onChange(values);\n                }}\n                renderTrack={({ props: trackProps, children }) => (\n                  <Track props={trackProps}>{children}</Track>\n                )}\n                renderThumb={(renderArgs) => {\n                  const { index, props: thumbProps, isDragged } = renderArgs;\n                  return (\n                    <Thumb\n                      key={`${sliderUUID}-${thumbProps.key}`}\n                      props={thumbProps}\n                      isDragged={isDragged}\n                      index={index}\n                    />\n                  );\n                }}\n                allowOverlap={false}\n              />\n            </StyledRangeWrapper>\n          </SliderContext.Provider>\n        </Grid>\n      </div>\n    </TooltipTextProvider>\n  );\n};\n\n// SliderImp.propTypes = sliderPropTypes;\n\nexport default SliderImp;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/cjs/components/Thumb.js

@@ -1,38 +1,43 @@
-'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);
+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 = __toESM(require("@elliemae/ds-tooltip"));
+var import_context = __toESM(require("./context"));
+var import_utils = __toESM(require("./utils"));
+var import_styled = __toESM(require("./styled"));
+const Thumb = ({ index, props, isDragged }) => {
+  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
   const {
     disabled,
     rangeValues,
@@ -40,32 +45,28 @@ const Thumb = _ref => {
     customTickMarksValues,
     step,
     minValue
-  } = 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, {})))
-    }))
-  );
+  } = (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
 };
-
-module.exports = Thumb;
+var Thumb_default = Thumb;
+module.exports = __toCommonJS(Thumb_exports);
+//# sourceMappingURL=Thumb.js.map