@elliemae/ds-slider 3.0.4-rc.4 → 3.1.0-next.2

package/dist/cjs/components/SliderImp.js

@@ -35,6 +35,7 @@ var import_Thumb = __toESM(require("./Thumb"));
 var import_styled = require("./styled");
 var import_utils = require("./utils");
 var import_context = require("./context");
+var import_styled_components = require("styled-components");
 const getSubArrayFromRange = (arr, [minVal, maxVal], isCustomTickMarksValues = false) => {
   const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
   const minIndex = arr.findIndex((el) => el === trueMinVal);
@@ -127,6 +128,7 @@ const SliderImp = (props) => {
   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));
+  const theme = (0, import_react.useContext)(import_styled_components.ThemeContext);
   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, {
@@ -151,7 +153,7 @@ const SliderImp = (props) => {
       customTickMarksValues,
       rangeValues,
       fullSelectedValues,
-      zIndex
+      zIndex: zIndex ?? theme.zIndex.tooltip
     }
   }, finalLabelText && /* @__PURE__ */ import_react.default.createElement(import_styled.LabelWrapper, {
     width

package/dist/cjs/components/SliderImp.js.map

@@ -1,7 +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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",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo, useContext } 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';\nimport { ThemeContext } from 'styled-components';\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  const theme = useContext(ThemeContext);\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: zIndex ?? theme.zIndex.tooltip,\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/dist/cjs/components/Thumb.js

@@ -49,14 +49,7 @@ var import_utils = require("./utils");
 var import_styled = require("./styled");
 const Thumb = ({ index, props, isDragged }) => {
   const [isHovered, setIsHovered] = (0, import_react.useState)(false);
-  const {
-    disabled,
-    rangeValues,
-    zIndex,
-    customTickMarksValues,
-    step,
-    minValue
-  } = (0, import_react.useContext)(import_context.SliderContext);
+  const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = (0, import_react.useContext)(import_context.SliderContext);
   const cleanedProps = __spreadValues({}, props);
   return /* @__PURE__ */ import_react.default.createElement(import_styled.ThumbStyled, __spreadProps(__spreadValues({}, cleanedProps), {
     "data-testid": "slider-thumb",
@@ -65,10 +58,13 @@ const Thumb = ({ index, props, isDragged }) => {
     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)));
+  }), /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltipV3, {
+    key: (0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue),
+    text: (0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue),
+    showPopover: isDragged || isHovered,
+    customOffset: [0, 20],
+    withoutAnimation: true
+  }));
 };
 Thumb.propTypes = {
   index: import_prop_types.default.number,

package/dist/cjs/components/Thumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Thumb.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { TooltipText } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context';\nimport { conformedThumbLabel } from './utils';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled';\n\nconst Thumb = ({ index, props, isDragged }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const {\n    disabled,\n    rangeValues,\n    zIndex,\n    customTickMarksValues,\n    step,\n    minValue,\n  } = useContext(SliderContext);\n\n  const cleanedProps = { ...props };\n  // delete cleanedProps.key;\n  // delete cleanedProps.draggable;\n  return (\n    // ...props is needed because it's received from the library\n    // ...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\n    <ThumbStyled\n      {...cleanedProps}\n      data-testid=\"slider-thumb\"\n      disabled={disabled}\n      // eslint-disable-next-line react/prop-types\n      style={{ ...cleanedProps.style, zIndex }}\n      index={index}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n        <TooltipText>\n          {conformedThumbLabel(\n            rangeValues,\n            customTickMarksValues,\n            index,\n            step,\n            minValue,\n          )}\n        </TooltipText>\n        <TooltipArrow />\n      </TooltipContainerStyled>\n    </ThumbStyled>\n  );\n};\n\nThumb.propTypes = {\n  index: PropTypes.number,\n  props: PropTypes.shape({\n    style: PropTypes.shape({}).isRequired,\n  }).isRequired,\n  isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAC5C,wBAAsB;AACtB,wBAA4B;AAC5B,qBAA8B;AAC9B,mBAAoC;AACpC,oBAAkE;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,gBAAgB;AAC7C,QAAM,CAAC,WAAW,gBAAgB,2BAAS,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,4BAAa;AAE5B,QAAM,eAAe,mBAAK;AAG1B,SAGE,mDAAC,4DACK,eADL;AAAA,IAEC,eAAY;AAAA,IACZ;AAAA,IAEA,OAAO,iCAAK,aAAa,QAAlB,EAAyB,OAAO;AAAA,IACvC;AAAA,IACA,cAAc,MAAM,aAAa,IAAI;AAAA,IACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC,mDAAC;AAAA,IAAuB;AAAA,IAAsB;AAAA,KAC5C,mDAAC,qCACE,sCACC,aACA,uBACA,OACA,MACA,QACF,CACF,GACA,mDAAC,gCAAa,CAChB,CACF;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,OAAO,0BAAU;AAAA,EACjB,OAAO,0BAAU,MAAM;AAAA,IACrB,OAAO,0BAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,0BAAU;AACvB;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["import React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context';\nimport { conformedThumbLabel } from './utils';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled';\n\nconst Thumb = ({ index, props, isDragged }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);\n\n  const cleanedProps = { ...props };\n  // delete cleanedProps.key;\n  // delete cleanedProps.draggable;\n  return (\n    // ...props is needed because it's received from the library\n    // ...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\n    <ThumbStyled\n      {...cleanedProps}\n      data-testid=\"slider-thumb\"\n      disabled={disabled}\n      // eslint-disable-next-line react/prop-types\n      style={{ ...cleanedProps.style, zIndex }}\n      index={index}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <DSTooltipV3\n        key={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        text={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        showPopover={isDragged || isHovered}\n        customOffset={[0, 20]}\n        withoutAnimation\n      ></DSTooltipV3>\n    </ThumbStyled>\n  );\n};\n\n/* {createPortal(\n        <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n          <TooltipText>{</TooltipText>\n          <TooltipArrow />\n        </TooltipContainerStyled>,\n        document.body,\n      )} */\n\nThumb.propTypes = {\n  index: PropTypes.number,\n  props: PropTypes.shape({\n    style: PropTypes.shape({}).isRequired,\n  }).isRequired,\n  isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAE5C,wBAAsB;AACtB,wBAA4B;AAC5B,qBAA8B;AAC9B,mBAAoC;AACpC,oBAAkE;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,gBAAgB;AAC7C,QAAM,CAAC,WAAW,gBAAgB,2BAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,aAAa,6BAAW,4BAAa;AAEzG,QAAM,eAAe,mBAAK;AAG1B,SAGE,mDAAC,4DACK,eADL;AAAA,IAEC,eAAY;AAAA,IACZ;AAAA,IAEA,OAAO,iCAAK,aAAa,QAAlB,EAAyB,OAAO;AAAA,IACvC;AAAA,IACA,cAAc,MAAM,aAAa,IAAI;AAAA,IACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC,mDAAC;AAAA,IACC,KAAK,sCAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,IAClF,MAAM,sCAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,IACnF,aAAa,aAAa;AAAA,IAC1B,cAAc,CAAC,GAAG,EAAE;AAAA,IACpB,kBAAgB;AAAA,GACjB,CACH;AAEJ;AAUA,MAAM,YAAY;AAAA,EAChB,OAAO,0BAAU;AAAA,EACjB,OAAO,0BAAU,MAAM;AAAA,IACrB,OAAO,0BAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,0BAAU;AACvB;AAEA,IAAO,gBAAQ;",
   "names": []
 }

package/dist/cjs/components/styled.js

@@ -36,6 +36,7 @@ var import_ds_tooltip = require("@elliemae/ds-tooltip");
 const ThumbStyled = import_styled_components.default.div`
   height: 20px;
   width: 20px;
+  top: 0;
   background-color: ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
   border-radius: 10px;
   border: 1px solid ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
@@ -69,7 +70,7 @@ const TooltipArrow = import_styled_components.default.div`
   border-right: calc(${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)} * 2.5) solid transparent;
 
   border-top: calc(${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)} * 2.5) solid
-    ${(props) => props.theme.colors.neutral[0]};
+    ${(props) => props.theme.colors.neutral["000"]};
 `;
 const LabelWrapper = import_styled_components.default.div`
   margin-bottom: ${(props) => props.theme.space.xxs};

package/dist/cjs/components/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport styled from 'styled-components';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { TooltipContainer } from '@elliemae/ds-tooltip';\n\nexport const ThumbStyled = styled.div`\n  height: 20px;\n  width: 20px;\n  background-color: ${(props) =>\n    props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n  :focus {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n  }\n`;\n\nexport const TooltipContainerStyled = styled(TooltipContainer)`\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  top: -35px;\n  width: max-content;\n  left: 50%;\n  transform: translateX(-50%);\n  visibility: ${({ isDragged, isHovered }) => (isDragged || isHovered ? 'visible' : 'hidden')};\n`;\n// TODO: didn't work with DSTooltip, see how to improve\nexport const TooltipArrow = styled.div`\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 20px;\n  border-left: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n  border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n\n  border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid\n    ${(props) => props.theme.colors.neutral[0]};\n`;\n\nexport const LabelWrapper = styled.div`\n  margin-bottom: ${(props) => props.theme.space.xxs};\n  max-width: 100%;\n  width: ${(props) => `${props.width || 0}px`};\n`;\n\nexport const LabelText = styled.span`\n  color: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const ValueText = styled.span`\n  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};\n`;\n\nexport const StyledRangeWrapper = styled.div`\n  min-height: 28px;\n  margin: 0 10px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAyC;AACzC,wBAAiC;AAE1B,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA,sBAGZ,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,sBAE5D,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,wBAGxF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKpC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrG,MAAM,yBAAyB,sCAAO,kCAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAW,gBAAiB,aAAa,YAAY,YAAY;AAAA;AAG7E,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKb,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,uBACxD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,qBAE3D,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,MACxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrC,MAAM,eAAe,iCAAO;AAAA,mBAChB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAErC,CAAC,UAAU,GAAG,MAAM,SAAS;AAAA;AAGjC,MAAM,YAAY,iCAAO;AAAA,WACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,YAAY,iCAAO;AAAA,WACrB,CAAC,EAAE,UAAU,YAAY,MAAM,OAAO,QAAQ,WAAW,MAAM;AAAA;AAGnE,MAAM,qBAAqB,iCAAO;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable indent */\nimport styled from 'styled-components';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { TooltipContainer } from '@elliemae/ds-tooltip';\n\nexport const ThumbStyled = styled.div`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n  :focus {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n  }\n`;\n\nexport const TooltipContainerStyled = styled(TooltipContainer)`\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  top: -35px;\n  width: max-content;\n  left: 50%;\n  transform: translateX(-50%);\n  visibility: ${({ isDragged, isHovered }) => (isDragged || isHovered ? 'visible' : 'hidden')};\n`;\n// TODO: didn't work with DSTooltip, see how to improve\nexport const TooltipArrow = styled.div`\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 20px;\n  border-left: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n  border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n\n  border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid\n    ${(props) => props.theme.colors.neutral['000']};\n`;\n\nexport const LabelWrapper = styled.div`\n  margin-bottom: ${(props) => props.theme.space.xxs};\n  max-width: 100%;\n  width: ${(props) => `${props.width || 0}px`};\n`;\n\nexport const LabelText = styled.span`\n  color: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const ValueText = styled.span`\n  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};\n`;\n\nexport const StyledRangeWrapper = styled.div`\n  min-height: 28px;\n  margin: 0 10px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAyC;AACzC,wBAAiC;AAE1B,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA,sBAIZ,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,sBAE5D,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,wBAGxF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKpC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrG,MAAM,yBAAyB,sCAAO,kCAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAW,gBAAiB,aAAa,YAAY,YAAY;AAAA;AAG7E,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKb,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,uBACxD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,qBAE3D,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,MACxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrC,MAAM,eAAe,iCAAO;AAAA,mBAChB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAErC,CAAC,UAAU,GAAG,MAAM,SAAS;AAAA;AAGjC,MAAM,YAAY,iCAAO;AAAA,WACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,YAAY,iCAAO;AAAA,WACrB,CAAC,EAAE,UAAU,YAAY,MAAM,OAAO,QAAQ,WAAW,MAAM;AAAA;AAGnE,MAAM,qBAAqB,iCAAO;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/prop-types.js

@@ -39,8 +39,7 @@ const defaultProps = {
   withTickMarks: false,
   withTickMarksValues: false,
   withTwoHandles: false,
-  customTickMarksValues: [],
-  zIndex: 0
+  customTickMarksValues: []
 };
 const sliderPropTypes = {
   containerProps: import_react_desc.PropTypes.shape({}).description("props to inject to slider wrapper"),

package/dist/cjs/prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const defaultProps = {\n  containerProps: {},\n  disabled: false,\n  label: '',\n  labelWithValue: false,\n  minValue: 0,\n  maxValue: 100,\n  step: 5,\n  onChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  withTwoHandles: false,\n  customTickMarksValues: [],\n  zIndex: 0,\n};\n\nexport const sliderPropTypes = {\n  /** props to inject to slider wrapper */\n  containerProps: PropTypes.shape({}).description(\n    'props to inject to slider wrapper',\n  ),\n  /** disable slider */\n  disabled: PropTypes.bool.description('disable slider'),\n  /** label for slider */\n  label: PropTypes.string.description('label for slider'),\n  /** if the label comes with value attached for slider or not */\n  labelWithValue: PropTypes.bool.description(\n    'if the label comes with value attached for slider or not',\n  ),\n  /** min value for slider */\n  minValue: PropTypes.number.description('min value for slider'),\n  /** max value for slider */\n  maxValue: PropTypes.number.description('max value for slider'),\n  /** steps of values from min to max */\n  step: PropTypes.number.description('steps of values from min to max'),\n  /** change handler */\n  onChange: PropTypes.func.description('change handler'),\n  /** add tick marks between steps */\n  withTickMarks: PropTypes.bool.description('add tick marks between steps'),\n  /** add step value to tickmark */\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark'),\n  /** add two handles */\n  withTwoHandles: PropTypes.bool.description('add two handles'),\n  /** change manually tickmark values */\n  customTickMarksValues: PropTypes.arrayOf(\n    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  ).description('change manually tickmark values'),\n  /** z index for thumb */\n  zIndex: PropTypes.number.description('z index for thumb'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,uBAAuB,CAAC;AAAA,EACxB,QAAQ;AACV;AAEO,MAAM,kBAAkB;AAAA,EAE7B,gBAAgB,4BAAU,MAAM,CAAC,CAAC,EAAE,YAClC,mCACF;AAAA,EAEA,UAAU,4BAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,OAAO,4BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,gBAAgB,4BAAU,KAAK,YAC7B,0DACF;AAAA,EAEA,UAAU,4BAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,UAAU,4BAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,MAAM,4BAAU,OAAO,YAAY,iCAAiC;AAAA,EAEpE,UAAU,4BAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,eAAe,4BAAU,KAAK,YAAY,8BAA8B;AAAA,EAExE,qBAAqB,4BAAU,KAAK,YAAY,4BAA4B;AAAA,EAE5E,gBAAgB,4BAAU,KAAK,YAAY,iBAAiB;AAAA,EAE5D,uBAAuB,4BAAU,QAC/B,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,MAAM,CAAC,CAC1D,EAAE,YAAY,iCAAiC;AAAA,EAE/C,QAAQ,4BAAU,OAAO,YAAY,mBAAmB;AAC1D;",
+  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const defaultProps = {\n  containerProps: {},\n  disabled: false,\n  label: '',\n  labelWithValue: false,\n  minValue: 0,\n  maxValue: 100,\n  step: 5,\n  onChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  withTwoHandles: false,\n  customTickMarksValues: [],\n};\n\nexport const sliderPropTypes = {\n  /** props to inject to slider wrapper */\n  containerProps: PropTypes.shape({}).description(\n    'props to inject to slider wrapper',\n  ),\n  /** disable slider */\n  disabled: PropTypes.bool.description('disable slider'),\n  /** label for slider */\n  label: PropTypes.string.description('label for slider'),\n  /** if the label comes with value attached for slider or not */\n  labelWithValue: PropTypes.bool.description(\n    'if the label comes with value attached for slider or not',\n  ),\n  /** min value for slider */\n  minValue: PropTypes.number.description('min value for slider'),\n  /** max value for slider */\n  maxValue: PropTypes.number.description('max value for slider'),\n  /** steps of values from min to max */\n  step: PropTypes.number.description('steps of values from min to max'),\n  /** change handler */\n  onChange: PropTypes.func.description('change handler'),\n  /** add tick marks between steps */\n  withTickMarks: PropTypes.bool.description('add tick marks between steps'),\n  /** add step value to tickmark */\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark'),\n  /** add two handles */\n  withTwoHandles: PropTypes.bool.description('add two handles'),\n  /** change manually tickmark values */\n  customTickMarksValues: PropTypes.arrayOf(\n    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  ).description('change manually tickmark values'),\n  /** z index for thumb */\n  zIndex: PropTypes.number.description('z index for thumb'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,uBAAuB,CAAC;AAC1B;AAEO,MAAM,kBAAkB;AAAA,EAE7B,gBAAgB,4BAAU,MAAM,CAAC,CAAC,EAAE,YAClC,mCACF;AAAA,EAEA,UAAU,4BAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,OAAO,4BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,gBAAgB,4BAAU,KAAK,YAC7B,0DACF;AAAA,EAEA,UAAU,4BAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,UAAU,4BAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,MAAM,4BAAU,OAAO,YAAY,iCAAiC;AAAA,EAEpE,UAAU,4BAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,eAAe,4BAAU,KAAK,YAAY,8BAA8B;AAAA,EAExE,qBAAqB,4BAAU,KAAK,YAAY,4BAA4B;AAAA,EAE5E,gBAAgB,4BAAU,KAAK,YAAY,iBAAiB;AAAA,EAE5D,uBAAuB,4BAAU,QAC/B,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,MAAM,CAAC,CAC1D,EAAE,YAAY,iCAAiC;AAAA,EAE/C,QAAQ,4BAAU,OAAO,YAAY,mBAAmB;AAC1D;",
   "names": []
 }

package/dist/esm/components/SliderImp.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2, { useState, useEffect, useRef, useMemo } from "react";
+import React2, { useState, useEffect, useRef, useMemo, useContext } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { Range } from "react-range";
 import { usePrevious } from "@elliemae/ds-utilities";
@@ -17,6 +17,7 @@ import {
 } from "./styled";
 import { conformedLabel } from "./utils";
 import { SliderContext } from "./context";
+import { ThemeContext } from "styled-components";
 const getSubArrayFromRange = (arr, [minVal, maxVal], isCustomTickMarksValues = false) => {
   const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
   const minIndex = arr.findIndex((el) => el === trueMinVal);
@@ -109,6 +110,7 @@ const SliderImp = (props) => {
   const SliderLabel = /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(LabelText, null, finalLabelText), finalLabelText && " ", /* @__PURE__ */ React2.createElement(ValueText, {
     disabled
   }, finalValueText));
+  const theme = useContext(ThemeContext);
   return /* @__PURE__ */ React2.createElement(TooltipTextProvider, null, /* @__PURE__ */ React2.createElement("div", {
     ref
   }, /* @__PURE__ */ React2.createElement(Grid, {
@@ -133,7 +135,7 @@ const SliderImp = (props) => {
       customTickMarksValues,
       rangeValues,
       fullSelectedValues,
-      zIndex
+      zIndex: zIndex ?? theme.zIndex.tooltip
     }
   }, finalLabelText && /* @__PURE__ */ React2.createElement(LabelWrapper, {
     width

package/dist/esm/components/SliderImp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/SliderImp.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo, useContext } 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';\nimport { ThemeContext } from 'styled-components';\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  const theme = useContext(ThemeContext);\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: zIndex ?? theme.zIndex.tooltip,\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/Thumb.js

@@ -20,20 +20,13 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2, { useContext, useState } from "react";
 import PropTypes from "prop-types";
-import { TooltipText } from "@elliemae/ds-tooltip";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
 import { SliderContext } from "./context";
 import { conformedThumbLabel } from "./utils";
-import { ThumbStyled, TooltipContainerStyled, TooltipArrow } from "./styled";
+import { ThumbStyled } from "./styled";
 const Thumb = ({ index, props, isDragged }) => {
   const [isHovered, setIsHovered] = useState(false);
-  const {
-    disabled,
-    rangeValues,
-    zIndex,
-    customTickMarksValues,
-    step,
-    minValue
-  } = useContext(SliderContext);
+  const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);
   const cleanedProps = __spreadValues({}, props);
   return /* @__PURE__ */ React2.createElement(ThumbStyled, __spreadProps(__spreadValues({}, cleanedProps), {
     "data-testid": "slider-thumb",
@@ -42,10 +35,13 @@ const Thumb = ({ index, props, isDragged }) => {
     index,
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false)
-  }), /* @__PURE__ */ React2.createElement(TooltipContainerStyled, {
-    isDragged,
-    isHovered
-  }, /* @__PURE__ */ React2.createElement(TooltipText, null, conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)), /* @__PURE__ */ React2.createElement(TooltipArrow, null)));
+  }), /* @__PURE__ */ React2.createElement(DSTooltipV3, {
+    key: conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue),
+    text: conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue),
+    showPopover: isDragged || isHovered,
+    customOffset: [0, 20],
+    withoutAnimation: true
+  }));
 };
 Thumb.propTypes = {
   index: PropTypes.number,

package/dist/esm/components/Thumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Thumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { TooltipText } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context';\nimport { conformedThumbLabel } from './utils';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled';\n\nconst Thumb = ({ index, props, isDragged }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const {\n    disabled,\n    rangeValues,\n    zIndex,\n    customTickMarksValues,\n    step,\n    minValue,\n  } = useContext(SliderContext);\n\n  const cleanedProps = { ...props };\n  // delete cleanedProps.key;\n  // delete cleanedProps.draggable;\n  return (\n    // ...props is needed because it's received from the library\n    // ...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\n    <ThumbStyled\n      {...cleanedProps}\n      data-testid=\"slider-thumb\"\n      disabled={disabled}\n      // eslint-disable-next-line react/prop-types\n      style={{ ...cleanedProps.style, zIndex }}\n      index={index}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n        <TooltipText>\n          {conformedThumbLabel(\n            rangeValues,\n            customTickMarksValues,\n            index,\n            step,\n            minValue,\n          )}\n        </TooltipText>\n        <TooltipArrow />\n      </TooltipContainerStyled>\n    </ThumbStyled>\n  );\n};\n\nThumb.propTypes = {\n  index: PropTypes.number,\n  props: PropTypes.shape({\n    style: PropTypes.shape({}).isRequired,\n  }).isRequired,\n  isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,gBAAgB;AAC7C,QAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,aAAa;AAE5B,QAAM,eAAe,mBAAK;AAG1B,SAGE,qCAAC,8CACK,eADL;AAAA,IAEC,eAAY;AAAA,IACZ;AAAA,IAEA,OAAO,iCAAK,aAAa,QAAlB,EAAyB,OAAO;AAAA,IACvC;AAAA,IACA,cAAc,MAAM,aAAa,IAAI;AAAA,IACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC,qCAAC;AAAA,IAAuB;AAAA,IAAsB;AAAA,KAC5C,qCAAC,mBACE,oBACC,aACA,uBACA,OACA,MACA,QACF,CACF,GACA,qCAAC,kBAAa,CAChB,CACF;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,OAAO,UAAU;AAAA,EACjB,OAAO,UAAU,MAAM;AAAA,IACrB,OAAO,UAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,UAAU;AACvB;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context';\nimport { conformedThumbLabel } from './utils';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled';\n\nconst Thumb = ({ index, props, isDragged }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);\n\n  const cleanedProps = { ...props };\n  // delete cleanedProps.key;\n  // delete cleanedProps.draggable;\n  return (\n    // ...props is needed because it's received from the library\n    // ...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\n    <ThumbStyled\n      {...cleanedProps}\n      data-testid=\"slider-thumb\"\n      disabled={disabled}\n      // eslint-disable-next-line react/prop-types\n      style={{ ...cleanedProps.style, zIndex }}\n      index={index}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <DSTooltipV3\n        key={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        text={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        showPopover={isDragged || isHovered}\n        customOffset={[0, 20]}\n        withoutAnimation\n      ></DSTooltipV3>\n    </ThumbStyled>\n  );\n};\n\n/* {createPortal(\n        <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n          <TooltipText>{</TooltipText>\n          <TooltipArrow />\n        </TooltipContainerStyled>,\n        document.body,\n      )} */\n\nThumb.propTypes = {\n  index: PropTypes.number,\n  props: PropTypes.shape({\n    style: PropTypes.shape({}).isRequired,\n  }).isRequired,\n  isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,gBAAgB;AAC7C,QAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,aAAa,WAAW,aAAa;AAEzG,QAAM,eAAe,mBAAK;AAG1B,SAGE,qCAAC,8CACK,eADL;AAAA,IAEC,eAAY;AAAA,IACZ;AAAA,IAEA,OAAO,iCAAK,aAAa,QAAlB,EAAyB,OAAO;AAAA,IACvC;AAAA,IACA,cAAc,MAAM,aAAa,IAAI;AAAA,IACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC,qCAAC;AAAA,IACC,KAAK,oBAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,IAClF,MAAM,oBAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,IACnF,aAAa,aAAa;AAAA,IAC1B,cAAc,CAAC,GAAG,EAAE;AAAA,IACpB,kBAAgB;AAAA,GACjB,CACH;AAEJ;AAUA,MAAM,YAAY;AAAA,EAChB,OAAO,UAAU;AAAA,EACjB,OAAO,UAAU,MAAM;AAAA,IACrB,OAAO,UAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,UAAU;AACvB;AAEA,IAAO,gBAAQ;",
   "names": []
 }

package/dist/esm/components/styled.js

@@ -5,6 +5,7 @@ import { TooltipContainer } from "@elliemae/ds-tooltip";
 const ThumbStyled = styled.div`
   height: 20px;
   width: 20px;
+  top: 0;
   background-color: ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
   border-radius: 10px;
   border: 1px solid ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
@@ -38,7 +39,7 @@ const TooltipArrow = styled.div`
   border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;
 
   border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid
-    ${(props) => props.theme.colors.neutral[0]};
+    ${(props) => props.theme.colors.neutral["000"]};
 `;
 const LabelWrapper = styled.div`
   margin-bottom: ${(props) => props.theme.space.xxs};

package/dist/esm/components/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport styled from 'styled-components';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { TooltipContainer } from '@elliemae/ds-tooltip';\n\nexport const ThumbStyled = styled.div`\n  height: 20px;\n  width: 20px;\n  background-color: ${(props) =>\n    props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n  :focus {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n  }\n`;\n\nexport const TooltipContainerStyled = styled(TooltipContainer)`\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  top: -35px;\n  width: max-content;\n  left: 50%;\n  transform: translateX(-50%);\n  visibility: ${({ isDragged, isHovered }) => (isDragged || isHovered ? 'visible' : 'hidden')};\n`;\n// TODO: didn't work with DSTooltip, see how to improve\nexport const TooltipArrow = styled.div`\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 20px;\n  border-left: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n  border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n\n  border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid\n    ${(props) => props.theme.colors.neutral[0]};\n`;\n\nexport const LabelWrapper = styled.div`\n  margin-bottom: ${(props) => props.theme.space.xxs};\n  max-width: 100%;\n  width: ${(props) => `${props.width || 0}px`};\n`;\n\nexport const LabelText = styled.span`\n  color: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const ValueText = styled.span`\n  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};\n`;\n\nexport const StyledRangeWrapper = styled.div`\n  min-height: 28px;\n  margin: 0 10px;\n`;\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AAEO,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA,sBAGZ,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,sBAE5D,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,wBAGxF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKpC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrG,MAAM,yBAAyB,OAAO,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAW,gBAAiB,aAAa,YAAY,YAAY;AAAA;AAG7E,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,uBACxD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,qBAE3D,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,MACxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrC,MAAM,eAAe,OAAO;AAAA,mBAChB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAErC,CAAC,UAAU,GAAG,MAAM,SAAS;AAAA;AAGjC,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,EAAE,UAAU,YAAY,MAAM,OAAO,QAAQ,WAAW,MAAM;AAAA;AAGnE,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport styled from 'styled-components';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { TooltipContainer } from '@elliemae/ds-tooltip';\n\nexport const ThumbStyled = styled.div`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n  :focus {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n  }\n`;\n\nexport const TooltipContainerStyled = styled(TooltipContainer)`\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  top: -35px;\n  width: max-content;\n  left: 50%;\n  transform: translateX(-50%);\n  visibility: ${({ isDragged, isHovered }) => (isDragged || isHovered ? 'visible' : 'hidden')};\n`;\n// TODO: didn't work with DSTooltip, see how to improve\nexport const TooltipArrow = styled.div`\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 20px;\n  border-left: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n  border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n\n  border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid\n    ${(props) => props.theme.colors.neutral['000']};\n`;\n\nexport const LabelWrapper = styled.div`\n  margin-bottom: ${(props) => props.theme.space.xxs};\n  max-width: 100%;\n  width: ${(props) => `${props.width || 0}px`};\n`;\n\nexport const LabelText = styled.span`\n  color: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const ValueText = styled.span`\n  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};\n`;\n\nexport const StyledRangeWrapper = styled.div`\n  min-height: 28px;\n  margin: 0 10px;\n`;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEO,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIZ,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,sBAE5D,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,wBAGxF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKpC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrG,MAAM,yBAAyB,OAAO,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAW,gBAAiB,aAAa,YAAY,YAAY;AAAA;AAG7E,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,uBACxD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,qBAE3D,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,MACxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrC,MAAM,eAAe,OAAO;AAAA,mBAChB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAErC,CAAC,UAAU,GAAG,MAAM,SAAS;AAAA;AAGjC,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,EAAE,UAAU,YAAY,MAAM,OAAO,QAAQ,WAAW,MAAM;AAAA;AAGnE,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/prop-types.js

@@ -13,8 +13,7 @@ const defaultProps = {
   withTickMarks: false,
   withTickMarksValues: false,
   withTwoHandles: false,
-  customTickMarksValues: [],
-  zIndex: 0
+  customTickMarksValues: []
 };
 const sliderPropTypes = {
   containerProps: PropTypes.shape({}).description("props to inject to slider wrapper"),

package/dist/esm/prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const defaultProps = {\n  containerProps: {},\n  disabled: false,\n  label: '',\n  labelWithValue: false,\n  minValue: 0,\n  maxValue: 100,\n  step: 5,\n  onChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  withTwoHandles: false,\n  customTickMarksValues: [],\n  zIndex: 0,\n};\n\nexport const sliderPropTypes = {\n  /** props to inject to slider wrapper */\n  containerProps: PropTypes.shape({}).description(\n    'props to inject to slider wrapper',\n  ),\n  /** disable slider */\n  disabled: PropTypes.bool.description('disable slider'),\n  /** label for slider */\n  label: PropTypes.string.description('label for slider'),\n  /** if the label comes with value attached for slider or not */\n  labelWithValue: PropTypes.bool.description(\n    'if the label comes with value attached for slider or not',\n  ),\n  /** min value for slider */\n  minValue: PropTypes.number.description('min value for slider'),\n  /** max value for slider */\n  maxValue: PropTypes.number.description('max value for slider'),\n  /** steps of values from min to max */\n  step: PropTypes.number.description('steps of values from min to max'),\n  /** change handler */\n  onChange: PropTypes.func.description('change handler'),\n  /** add tick marks between steps */\n  withTickMarks: PropTypes.bool.description('add tick marks between steps'),\n  /** add step value to tickmark */\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark'),\n  /** add two handles */\n  withTwoHandles: PropTypes.bool.description('add two handles'),\n  /** change manually tickmark values */\n  customTickMarksValues: PropTypes.arrayOf(\n    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  ).description('change manually tickmark values'),\n  /** z index for thumb */\n  zIndex: PropTypes.number.description('z index for thumb'),\n};\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,uBAAuB,CAAC;AAAA,EACxB,QAAQ;AACV;AAEO,MAAM,kBAAkB;AAAA,EAE7B,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAClC,mCACF;AAAA,EAEA,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,gBAAgB,UAAU,KAAK,YAC7B,0DACF;AAAA,EAEA,UAAU,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,UAAU,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,MAAM,UAAU,OAAO,YAAY,iCAAiC;AAAA,EAEpE,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,eAAe,UAAU,KAAK,YAAY,8BAA8B;AAAA,EAExE,qBAAqB,UAAU,KAAK,YAAY,4BAA4B;AAAA,EAE5E,gBAAgB,UAAU,KAAK,YAAY,iBAAiB;AAAA,EAE5D,uBAAuB,UAAU,QAC/B,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAC1D,EAAE,YAAY,iCAAiC;AAAA,EAE/C,QAAQ,UAAU,OAAO,YAAY,mBAAmB;AAC1D;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const defaultProps = {\n  containerProps: {},\n  disabled: false,\n  label: '',\n  labelWithValue: false,\n  minValue: 0,\n  maxValue: 100,\n  step: 5,\n  onChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  withTwoHandles: false,\n  customTickMarksValues: [],\n};\n\nexport const sliderPropTypes = {\n  /** props to inject to slider wrapper */\n  containerProps: PropTypes.shape({}).description(\n    'props to inject to slider wrapper',\n  ),\n  /** disable slider */\n  disabled: PropTypes.bool.description('disable slider'),\n  /** label for slider */\n  label: PropTypes.string.description('label for slider'),\n  /** if the label comes with value attached for slider or not */\n  labelWithValue: PropTypes.bool.description(\n    'if the label comes with value attached for slider or not',\n  ),\n  /** min value for slider */\n  minValue: PropTypes.number.description('min value for slider'),\n  /** max value for slider */\n  maxValue: PropTypes.number.description('max value for slider'),\n  /** steps of values from min to max */\n  step: PropTypes.number.description('steps of values from min to max'),\n  /** change handler */\n  onChange: PropTypes.func.description('change handler'),\n  /** add tick marks between steps */\n  withTickMarks: PropTypes.bool.description('add tick marks between steps'),\n  /** add step value to tickmark */\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark'),\n  /** add two handles */\n  withTwoHandles: PropTypes.bool.description('add two handles'),\n  /** change manually tickmark values */\n  customTickMarksValues: PropTypes.arrayOf(\n    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  ).description('change manually tickmark values'),\n  /** z index for thumb */\n  zIndex: PropTypes.number.description('z index for thumb'),\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,uBAAuB,CAAC;AAC1B;AAEO,MAAM,kBAAkB;AAAA,EAE7B,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAClC,mCACF;AAAA,EAEA,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,gBAAgB,UAAU,KAAK,YAC7B,0DACF;AAAA,EAEA,UAAU,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,UAAU,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,MAAM,UAAU,OAAO,YAAY,iCAAiC;AAAA,EAEpE,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,eAAe,UAAU,KAAK,YAAY,8BAA8B;AAAA,EAExE,qBAAqB,UAAU,KAAK,YAAY,4BAA4B;AAAA,EAE5E,gBAAgB,UAAU,KAAK,YAAY,iBAAiB;AAAA,EAE5D,uBAAuB,UAAU,QAC/B,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAC1D,EAAE,YAAY,iCAAiC;AAAA,EAE/C,QAAQ,UAAU,OAAO,YAAY,mBAAmB;AAC1D;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-slider",
-  "version": "3.0.4-rc.4",
+  "version": "3.1.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Slider",
   "files": [
@@ -82,11 +82,11 @@
     "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.0.4-rc.4",
-    "@elliemae/ds-system": "3.0.4-rc.4",
-    "@elliemae/ds-tooltip": "3.0.4-rc.4",
-    "@elliemae/ds-truncated-tooltip-text": "3.0.4-rc.4",
-    "@elliemae/ds-utilities": "3.0.4-rc.4",
+    "@elliemae/ds-grid": "3.1.0-next.2",
+    "@elliemae/ds-system": "3.1.0-next.2",
+    "@elliemae/ds-tooltip": "3.1.0-next.2",
+    "@elliemae/ds-truncated-tooltip-text": "3.1.0-next.2",
+    "@elliemae/ds-utilities": "3.1.0-next.2",
     "prop-types": "~15.8.1",
     "react-desc": "~4.1.3",
     "react-range": "~1.8.12",