@elliemae/ds-slider 2.3.0-alpha.6 → 2.3.0-next.0

package/cjs/DSSlider.js

@@ -0,0 +1,33 @@
+'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

@@ -0,0 +1,199 @@
+'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 !== 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);
+    return [];
+  } // if only one handler, return the value in an array
+
+
+  return [trueMinVal];
+};
+
+const SliderImp = props => {
+  var _ref$current3;
+
+  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]);
+  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]);
+  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]);
+  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 === 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 === null || customTickMarksValues === void 0 ? void 0 : 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);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('resize', resizeHandler);
+    return () => window.removeEventListener('resize', resizeHandler);
+  });
+  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, {
+      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;

package/cjs/components/Thumb.js

@@ -0,0 +1,71 @@
+'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,
+    zIndex,
+    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, {})))
+    }))
+  );
+};
+
+module.exports = Thumb;

package/cjs/components/TickMarks.js

@@ -0,0 +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 context = require('./context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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
+    }, index));
+  }
+
+  return /*#__PURE__*/_jsx__default["default"](DotsContainer, {
+    "data-testid": "slider-tick-marks",
+    zIndex: zIndex
+  }, void 0, dots);
+};
+
+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;}"], 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:", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.zIndex - 1);
+
+module.exports = TickMarks;

package/cjs/components/TickMarksValues.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var context = require('./context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const TickMarks = () => {
+  var _TickMarksContainer;
+
+  const {
+    parsedValuesArray,
+    fullSelectedValues,
+    sliderUUID
+  } = React.useContext(context.SliderContext);
+  const TickMarksLabels = React.useMemo(() => parsedValuesArray.map(value => {
+    const isSelected = fullSelectedValues.findIndex(selectedVal => selectedVal === value) >= 0;
+    return /*#__PURE__*/_jsx__default["default"](TickMarkValue, {
+      isSelected: isSelected
+    }, "".concat(sliderUUID, "-").concat(value), value);
+  }), [parsedValuesArray, sliderUUID, fullSelectedValues]);
+  const PureTickMArksValues = React.useMemo(() => _TickMarksContainer || (_TickMarksContainer = /*#__PURE__*/_jsx__default["default"](TickMarksContainer, {
+    "data-testid": "slider-tick-marks-values"
+  }, void 0, TickMarksLabels)), [TickMarksLabels]);
+  return PureTickMArksValues;
+};
+
+const TickMarkValue = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-lq3yel-0"
+})(["margin:", " 0;overflow:visible;transform:translateX(-100%);width:", ";color:", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]);
+const TickMarksContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-lq3yel-1"
+})(["display:flex;justify-content:space-between;"]);
+
+module.exports = TickMarks;

package/cjs/components/Track.js

@@ -0,0 +1,67 @@
+'use strict';
+
+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');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var reactRange = require('react-range');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var TickMarks = require('./TickMarks.js');
+var TickMarksValues = require('./TickMarksValues.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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _TickMarks, _TickMarksValues;
+
+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 Track = _ref => {
+  let {
+    children,
+    props
+  } = _ref;
+  const {
+    disabled,
+    minValue,
+    maxValue,
+    rangeValues,
+    withTickMarks,
+    withTickMarksValues,
+    withTwoHandles
+  } = React.useContext(context.SliderContext);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(TrackStyled, _objectSpread(_objectSpread({}, props), {}, {
+      // This is needed because it's received from the library
+      disabled: disabled,
+      minValue: minValue,
+      maxValue: maxValue,
+      rangeValues: rangeValues,
+      withTwoHandles: withTwoHandles,
+      children: [children, withTickMarks && !disabled && (_TickMarks || (_TickMarks = /*#__PURE__*/_jsx__default["default"](TickMarks, {})))]
+    })), withTickMarksValues && (_TickMarksValues || (_TickMarksValues = /*#__PURE__*/_jsx__default["default"](TickMarksValues, {})))]
+  });
+};
+
+const TrackStyled = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-13fbuj5-0"
+})(["position:relative;height:", ";width:100%;min-width:", ";border-radius:", ";background:", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.disabled ? props.theme.colors.neutral[100] : reactRange.getTrackBackground({
+  values: props.rangeValues,
+  colors: props.withTwoHandles ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
+  min: props.minValue,
+  max: props.maxValue
+}));
+
+module.exports = Track;

package/cjs/components/context.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const SliderContext = /*#__PURE__*/React__default["default"].createContext();
+
+exports.SliderContext = SliderContext;

package/cjs/components/styled.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var dsTooltip = require('@elliemae/ds-tooltip');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/* eslint-disable indent */
+const ThumbStyled = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-24in0j-0"
+})(["height:20px;width:20px;background-color:", ";border-radius:10px;border:1px solid ", ";:focus{border:1px solid ", ";outline:unset;}:hover{background-color:", ";}"], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000'], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400], props => props.theme.colors.brand[600], _ref => {
+  let {
+    disabled,
+    theme
+  } = _ref;
+  return disabled ? theme.colors.neutral[100] : theme.colors.brand[200];
+});
+const TooltipContainerStyled = /*#__PURE__*/styled__default["default"](dsTooltip.TooltipContainer).withConfig({
+  componentId: "sc-24in0j-1"
+})(["position:relative;display:flex;align-items:center;flex-direction:column;top:-35px;width:max-content;left:50%;transform:translateX(-50%);visibility:", ";"], _ref2 => {
+  let {
+    isDragged,
+    isHovered
+  } = _ref2;
+  return isDragged || isHovered ? 'visible' : 'hidden';
+}); // TODO: didn't work with DSTooltip, see how to improve
+
+const TooltipArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-24in0j-2"
+})(["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"));
+const LabelText = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-24in0j-4"
+})(["color:", ";"], props => props.theme.colors.neutral[600]);
+const ValueText = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-24in0j-5"
+})(["color:", ";"], _ref3 => {
+  let {
+    disabled,
+    theme
+  } = _ref3;
+  return theme.colors.neutral[disabled ? 500 : 800];
+});
+const StyledRangeWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-24in0j-6"
+})(["min-height:28px;margin:0 10px;"]);
+
+exports.LabelText = LabelText;
+exports.LabelWrapper = LabelWrapper;
+exports.StyledRangeWrapper = StyledRangeWrapper;
+exports.ThumbStyled = ThumbStyled;
+exports.TooltipArrow = TooltipArrow;
+exports.TooltipContainerStyled = TooltipContainerStyled;
+exports.ValueText = ValueText;

package/cjs/components/utils.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsUtilities = require('@elliemae/ds-utilities');
+
+/* eslint-disable max-params */
+const conformedLabel = function (rangeValues) {
+  let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let labelWithValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let withTwoHandles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  let customTickMarksValues = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  let step = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
+  let minValue = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  const msg = label.trim();
+  let value = '';
+
+  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)) : '', " ");
+  } 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 = value.trim();
+  return [msg, value];
+};
+const conformedThumbLabel = function (rangeValues) {
+  let customTickMarksValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  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: ";
+
+  if (!dsUtilities.isEmpty(customTickMarksValues)) {
+    const foundValue = customTickMarksValues[(rangeValues[index] - minValue) / step];
+    msg += "".concat(foundValue || rangeValues[index].toFixed(1));
+  } else {
+    msg += "".concat(rangeValues[index].toFixed(1));
+  }
+
+  return msg;
+};
+
+exports.conformedLabel = conformedLabel;
+exports.conformedThumbLabel = conformedThumbLabel;

package/cjs/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSSlider = require('./DSSlider.js');
+
+
+
+exports.DSSlider = DSSlider.DSSlider;
+exports.DSSliderWithSchema = DSSlider.DSSliderWithSchema;
+exports["default"] = DSSlider.DSSlider;

package/cjs/prop-types.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const defaultProps = {
+  containerProps: {},
+  disabled: false,
+  label: '',
+  labelWithValue: false,
+  minValue: 0,
+  maxValue: 100,
+  step: 5,
+  onChange: () => {},
+  withTickMarks: false,
+  withTickMarksValues: false,
+  withTwoHandles: false,
+  customTickMarksValues: [],
+  zIndex: 0
+};
+const sliderPropTypes = {
+  /** props to inject to slider wrapper */
+  containerProps: reactDesc.PropTypes.shape({}).description('props to inject to slider wrapper'),
+
+  /** disable slider */
+  disabled: reactDesc.PropTypes.bool.description('disable slider'),
+
+  /** label for slider */
+  label: reactDesc.PropTypes.string.description('label for slider'),
+
+  /** if the label comes with value attached for slider or not */
+  labelWithValue: reactDesc.PropTypes.bool.description('if the label comes with value attached for slider or not'),
+
+  /** min value for slider */
+  minValue: reactDesc.PropTypes.number.description('min value for slider'),
+
+  /** max value for slider */
+  maxValue: reactDesc.PropTypes.number.description('max value for slider'),
+
+  /** steps of values from min to max */
+  step: reactDesc.PropTypes.number.description('steps of values from min to max'),
+
+  /** change handler */
+  onChange: reactDesc.PropTypes.func.description('change handler'),
+
+  /** add tick marks between steps */
+  withTickMarks: reactDesc.PropTypes.bool.description('add tick marks between steps'),
+
+  /** add step value to tickmark */
+  withTickMarksValues: reactDesc.PropTypes.bool.description('add step value to tickmark'),
+
+  /** add two handles */
+  withTwoHandles: reactDesc.PropTypes.bool.description('add two handles'),
+
+  /** change manually tickmark values */
+  customTickMarksValues: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number])).description('change manually tickmark values'),
+
+  /** z index for thumb */
+  zIndex: reactDesc.PropTypes.number.description('z index for thumb')
+};
+
+exports.defaultProps = defaultProps;
+exports.sliderPropTypes = sliderPropTypes;