@elliemae/ds-slider 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/DSSlider.js

@@ -0,0 +1,23 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { describe } from 'react-desc';
+import SliderImp from './components/SliderImp.js';
+import { sliderPropTypes, defaultProps } from './prop-types.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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__*/jsx(SliderImp, _objectSpread({}, props));
+
+DSSlider.defaultProps = defaultProps;
+const DSSliderWithSchema = describe(DSSlider);
+DSSliderWithSchema.propTypes = sliderPropTypes;
+
+export { DSSlider, DSSliderWithSchema, DSSlider as default };

package/esm/components/SliderImp.js

@@ -0,0 +1,192 @@
+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';
+import { usePrevious } from '@elliemae/ds-utilities';
+import DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';
+import { Grid } from '@elliemae/ds-grid';
+import Track from './Track.js';
+import Thumb from './Thumb.js';
+import { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from './styled.js';
+import { conformedLabel } from './utils.js';
+import { SliderContext } from './context.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+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 = useRef();
+  const [width, setWidth] = useState(0);
+  const sliderUUID = useMemo(() => v4(), []);
+  const parsedMinValue = 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 = 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 = 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 = 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] = 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));
+    setFullSelectedValues(selectedRangeValues);
+  }, [parsedValuesArray, rangeValues, customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : 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);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', resizeHandler);
+    return () => window.removeEventListener('resize', resizeHandler);
+  });
+  useEffect(() => {
+    if (!prevWithTwoHandles && withTwoHandles) {
+      setRangeValues([parsedMinValue, parsedMaxValue]);
+    } else if (prevWithTwoHandles && !withTwoHandles) {
+      setRangeValues([parsedMinValue]);
+    }
+  }, [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]);
+  const [finalLabelText, finalValueText] = useMemo(() => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep), [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]);
+
+  const SliderLabel = /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(LabelText, {}, void 0, finalLabelText), finalLabelText && ' ', /*#__PURE__*/_jsx(ValueText, {
+      disabled: disabled
+    }, void 0, finalValueText)]
+  });
+
+  return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/jsx("div", {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Grid, {
+      width: "100%",
+      style: {
+        maxWidth: '100%'
+      },
+      containerProps: containerProps,
+      "data-testid": "slider",
+      rows: ['auto', 'auto']
+    }, void 0, /*#__PURE__*/_jsx(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(LabelWrapper, {
+      width: width
+    }, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: SliderLabel
+    })), /*#__PURE__*/_jsx(StyledRangeWrapper, {}, void 0, /*#__PURE__*/_jsx(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(Track, {
+          props: trackProps
+        }, void 0, children);
+      },
+      renderThumb: renderArgs => {
+        const {
+          index,
+          props: thumbProps,
+          isDragged
+        } = renderArgs;
+        return /*#__PURE__*/_jsx(Thumb, {
+          props: thumbProps,
+          isDragged: isDragged,
+          index: index
+        }, "".concat(sliderUUID, "-").concat(thumbProps.key));
+      },
+      allowOverlap: false
+    }))))
+  }));
+}; // SliderImp.propTypes = sliderPropTypes;
+
+export { SliderImp as default };

package/esm/components/Thumb.js

@@ -0,0 +1,64 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+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';
+import { conformedThumbLabel } from './utils.js';
+import { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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] = useState(false);
+  const {
+    disabled,
+    rangeValues,
+    zIndex,
+    customTickMarksValues,
+    step,
+    minValue
+  } = useContext(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
+    jsx(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(TooltipContainerStyled, {
+        isDragged: isDragged,
+        isHovered: isHovered
+      }, void 0, /*#__PURE__*/_jsx(TooltipText, {}, void 0, conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)), _TooltipArrow || (_TooltipArrow = /*#__PURE__*/_jsx(TooltipArrow, {})))
+    }))
+  );
+};
+
+export { Thumb as default };

package/esm/components/TickMarks.js

@@ -0,0 +1,39 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { SliderContext } from './context.js';
+
+const TickMarks = () => {
+  const {
+    minValue,
+    maxValue,
+    rangeValues,
+    step,
+    withTwoHandles,
+    zIndex
+  } = useContext(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(Dot, {
+      "data-testid": "slider-dot",
+      isActive: isActive
+    }, index));
+  }
+
+  return /*#__PURE__*/_jsx(DotsContainer, {
+    "data-testid": "slider-tick-marks",
+    zIndex: zIndex
+  }, void 0, dots);
+};
+
+const Dot = /*#__PURE__*/styled.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 => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+const DotsContainer = /*#__PURE__*/styled.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 => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.zIndex - 1);
+
+export { TickMarks as default };

package/esm/components/TickMarksValues.js

@@ -0,0 +1,36 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useContext, useMemo } from 'react';
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { SliderContext } from './context.js';
+
+const TickMarks = () => {
+  var _TickMarksContainer;
+
+  const {
+    parsedValuesArray,
+    fullSelectedValues,
+    sliderUUID
+  } = useContext(SliderContext);
+  const TickMarksLabels = useMemo(() => parsedValuesArray.map(value => {
+    const isSelected = fullSelectedValues.findIndex(selectedVal => selectedVal === value) >= 0;
+    return /*#__PURE__*/_jsx(TickMarkValue, {
+      isSelected: isSelected
+    }, "".concat(sliderUUID, "-").concat(value), value);
+  }), [parsedValuesArray, sliderUUID, fullSelectedValues]);
+  const PureTickMArksValues = useMemo(() => _TickMarksContainer || (_TickMarksContainer = /*#__PURE__*/_jsx(TickMarksContainer, {
+    "data-testid": "slider-tick-marks-values"
+  }, void 0, TickMarksLabels)), [TickMarksLabels]);
+  return PureTickMArksValues;
+};
+
+const TickMarkValue = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-lq3yel-0"
+})(["margin:", " 0;overflow:visible;transform:translateX(-100%);width:", ";color:", ";"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s), props => __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.div.withConfig({
+  componentId: "sc-lq3yel-1"
+})(["display:flex;justify-content:space-between;"]);
+
+export { TickMarks as default };

package/esm/components/Track.js

@@ -0,0 +1,59 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { getTrackBackground } from 'react-range';
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import TickMarks$1 from './TickMarks.js';
+import TickMarks from './TickMarksValues.js';
+import { SliderContext } from './context.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+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(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
+  } = useContext(SliderContext);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/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(TickMarks$1, {})))]
+    })), withTickMarksValues && (_TickMarksValues || (_TickMarksValues = /*#__PURE__*/_jsx(TickMarks, {})))]
+  });
+};
+
+const TrackStyled = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-13fbuj5-0"
+})(["position:relative;height:", ";width:100%;min-width:", ";border-radius:", ";background:", ";"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.disabled ? props.theme.colors.neutral[100] : 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
+}));
+
+export { Track as default };

package/esm/components/context.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const SliderContext = /*#__PURE__*/React.createContext();
+
+export { SliderContext };

package/esm/components/styled.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { TooltipContainer } from '@elliemae/ds-tooltip';
+
+/* eslint-disable indent */
+const ThumbStyled = /*#__PURE__*/styled.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(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.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 => __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"));
+const LabelText = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-24in0j-4"
+})(["color:", ";"], props => props.theme.colors.neutral[600]);
+const ValueText = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-24in0j-5"
+})(["color:", ";"], _ref3 => {
+  let {
+    disabled,
+    theme
+  } = _ref3;
+  return theme.colors.neutral[disabled ? 500 : 800];
+});
+const StyledRangeWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-24in0j-6"
+})(["min-height:28px;margin:0 10px;"]);
+
+export { LabelText, LabelWrapper, StyledRangeWrapper, ThumbStyled, TooltipArrow, TooltipContainerStyled, ValueText };

package/esm/components/utils.js

@@ -0,0 +1,44 @@
+import { isEmpty } from '@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 (!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 (!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;
+};
+
+export { conformedLabel, conformedThumbLabel };

package/esm/index.js

@@ -0,0 +1 @@
+export { DSSlider, DSSliderWithSchema, DSSlider as default } from './DSSlider.js';

package/esm/prop-types.js

@@ -0,0 +1,59 @@
+import { PropTypes } from '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: PropTypes.shape({}).description('props to inject to slider wrapper'),
+
+  /** disable slider */
+  disabled: PropTypes.bool.description('disable slider'),
+
+  /** label for slider */
+  label: PropTypes.string.description('label for slider'),
+
+  /** if the label comes with value attached for slider or not */
+  labelWithValue: PropTypes.bool.description('if the label comes with value attached for slider or not'),
+
+  /** min value for slider */
+  minValue: PropTypes.number.description('min value for slider'),
+
+  /** max value for slider */
+  maxValue: PropTypes.number.description('max value for slider'),
+
+  /** steps of values from min to max */
+  step: PropTypes.number.description('steps of values from min to max'),
+
+  /** change handler */
+  onChange: PropTypes.func.description('change handler'),
+
+  /** add tick marks between steps */
+  withTickMarks: PropTypes.bool.description('add tick marks between steps'),
+
+  /** add step value to tickmark */
+  withTickMarksValues: PropTypes.bool.description('add step value to tickmark'),
+
+  /** add two handles */
+  withTwoHandles: PropTypes.bool.description('add two handles'),
+
+  /** change manually tickmark values */
+  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description('change manually tickmark values'),
+
+  /** z index for thumb */
+  zIndex: PropTypes.number.description('z index for thumb')
+};
+
+export { defaultProps, sliderPropTypes };