@elliemae/ds-slider-v2 3.70.0-next.45 → 3.70.0-next.47

package/dist/cjs/DSSliderV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSSliderV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSSliderV2T, DSSliderV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useSliderV2 } from './config/useSliderV2.js';\nimport { DSSliderV2Name } from './constants/index.js';\n\nimport DSSliderV2Context from './DSSliderV2CTX.js';\nimport { MainContent } from './parts/MainContent.js';\n\nconst DSSliderV2 = <TMultiple extends boolean = false>(props: DSSliderV2T.Props<TMultiple>) => {\n  const ctx = useSliderV2(props);\n\n  return (\n    <DSSliderV2Context.Provider value={ctx}>\n      <MainContent />\n    </DSSliderV2Context.Provider>\n  );\n};\n\nDSSliderV2.displayName = DSSliderV2Name;\nconst DSSliderV2WithSchema = describe(DSSliderV2);\nDSSliderV2WithSchema.propTypes = DSSliderV2PropTypesSchema;\n\nexport { DSSliderV2, DSSliderV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAbN,8BAAyB;AACzB,mCAA4D;AAC5D,yBAA4B;AAC5B,uBAA+B;AAE/B,2BAA8B;AAC9B,yBAA4B;AAE5B,MAAM,aAAa,CAAoC,UAAwC;AAC7F,QAAM,UAAM,gCAAY,KAAK;AAE7B,SACE,4CAAC,qBAAAA,QAAkB,UAAlB,EAA2B,OAAO,KACjC,sDAAC,kCAAY,GACf;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSSliderV2T, DSSliderV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useSliderV2 } from './config/useSliderV2.js';\nimport { DSSliderV2Name } from './constants/index.js';\n\nimport DSSliderV2Context from './DSSliderV2CTX.js';\nimport { MainContent } from './parts/MainContent.js';\n\nconst DSSliderV2 = (props: DSSliderV2T.Props) => {\n  const ctx = useSliderV2(props);\n\n  return (\n    <DSSliderV2Context.Provider value={ctx}>\n      <MainContent />\n    </DSSliderV2Context.Provider>\n  );\n};\n\nDSSliderV2.displayName = DSSliderV2Name;\nconst DSSliderV2WithSchema = describe(DSSliderV2);\nDSSliderV2WithSchema.propTypes = DSSliderV2PropTypesSchema;\n\nexport { DSSliderV2, DSSliderV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAbN,8BAAyB;AACzB,mCAA4D;AAC5D,yBAA4B;AAC5B,uBAA+B;AAE/B,2BAA8B;AAC9B,yBAA4B;AAE5B,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,UAAM,gCAAY,KAAK;AAE7B,SACE,4CAAC,qBAAAA,QAAkB,UAAlB,EAA2B,OAAO,KACjC,sDAAC,kCAAY,GACf;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/DSSliderV2CTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSSliderV2CTX.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext } from 'react';\nimport type { DSSliderV2CTX } from './config/useSliderV2.js';\n\nconst defaultContext = {} as DSSliderV2CTX<boolean>;\n\n/** Context for cross component communication */\nexport const DSSliderV2Context = createContext<DSSliderV2CTX<boolean>>(defaultContext);\n\nexport default DSSliderV2Context;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,wBAAoB,4BAAsC,cAAc;AAErF,IAAO,wBAAQ;",
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { DSSliderV2CTX } from './config/useSliderV2.js';\n\nconst defaultContext = {} as DSSliderV2CTX;\n\n/** Context for cross component communication */\nexport const DSSliderV2Context = createContext<DSSliderV2CTX>(defaultContext);\n\nexport default DSSliderV2Context;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,wBAAoB,4BAA6B,cAAc;AAE5E,IAAO,wBAAQ;",
   "names": []
 }

package/dist/cjs/config/useSliderV2.js

@@ -39,10 +39,7 @@ var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_useValidateProps = require("./useValidateProps.js");
 var import_useTickMarksValues = require("./useTickMarksValues.js");
 const useSliderV2 = (propsFromUser) => {
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
-    propsFromUser,
-    import_react_desc_prop_types.defaultProps
-  );
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
   const { multiple, value } = propsWithDefault;
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   const instanceUid = import_react.default.useMemo(() => `slider-v2-${(0, import_uid.uid)(5)}`, []);

package/dist/cjs/config/useSliderV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useSliderV2.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX<TMultiple extends boolean> {\n  propsWithDefault: DSSliderV2T.InternalProps<TMultiple>;\n  xstyledProps: XstyledProps;\n  instanceUid: string;\n  rangeValues: [number, number] | [number];\n  tickMarkPositions: number[];\n  getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;\n  getOwnerPropsArguments: () => Record<string, unknown>;\n  hasUserInteractedAfterFocus: boolean;\n  setHasUserInteractedAfterFocus: (value: boolean) => void;\n}\n\nexport const useSliderV2 = <TMultiple extends boolean>(propsFromUser: DSSliderV2T.Props<TMultiple>) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps<TMultiple>>(\n    propsFromUser,\n    defaultProps as DSSliderV2T.DefaultProps<TMultiple>,\n  );\n\n  const { multiple, value } = propsWithDefault;\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n  const rangeValues = React.useMemo(() => {\n    if (multiple === true) return value as [number, number];\n    return [value] as [number];\n  }, [multiple, value]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n  // ===========================================================================\n  // VALIDATE PROPS\n  // ===========================================================================\n  useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n  const ownerPropConfig = useOwnerProps(propsWithDefault);\n  const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React.useState(false);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      setHasUserInteractedAfterFocus,\n      ...ownerPropConfig,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      ownerPropConfig,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,8BAAgF;AAChF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AACjC,gCAAmC;AAc5B,MAAM,cAAc,CAA4B,kBAAgD;AAIrG,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,iBAAa,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,wBAAoB,8CAAmB,gBAAgB;AAK7D,gDAAiB,kBAAkB,kDAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,sBAAkB,uCAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE1F,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX {\n  propsWithDefault: DSSliderV2T.InternalProps;\n  xstyledProps: XstyledProps;\n  instanceUid: string;\n  rangeValues: [number, number] | [number];\n  tickMarkPositions: number[];\n  getOwnerProps: () => DSSliderV2T.InternalProps;\n  getOwnerPropsArguments: () => Record<string, unknown>;\n  hasUserInteractedAfterFocus: boolean;\n  setHasUserInteractedAfterFocus: (value: boolean) => void;\n}\n\nexport const useSliderV2 = (propsFromUser: DSSliderV2T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps>(propsFromUser, defaultProps);\n\n  const { multiple, value } = propsWithDefault;\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n  const rangeValues = React.useMemo(() => {\n    if (multiple === true) return value;\n    return [value] as [number];\n  }, [multiple, value]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n  // ===========================================================================\n  // VALIDATE PROPS\n  // ===========================================================================\n  useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n  const ownerPropConfig = useOwnerProps(propsWithDefault);\n  const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React.useState(false);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      setHasUserInteractedAfterFocus,\n      ...ownerPropConfig,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      ownerPropConfig,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,8BAAgF;AAChF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AACjC,gCAAmC;AAc5B,MAAM,cAAc,CAAC,kBAAqC;AAI/D,QAAM,uBAAmB,sDAAwD,eAAe,yCAAY;AAE5G,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,iBAAa,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,wBAAoB,8CAAmB,gBAAgB;AAK7D,gDAAiB,kBAAkB,kDAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,sBAAkB,uCAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE1F,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/config/useTickMarksValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useTickMarksValues.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\n// Tick mark values will be generated from the minValue, maxValue and step props\nconst getDefaultTickMarksValues = ({\n  minValue,\n  maxValue,\n  step,\n}: {\n  minValue: number;\n  maxValue: number;\n  step: number;\n}) => {\n  const parsedValuesArray: number[] = [];\n  for (let value = minValue; value <= maxValue; value += step) {\n    parsedValuesArray.push(value);\n  }\n  return parsedValuesArray;\n};\n\nexport const useTickMarksValues = <TMultiple extends boolean>(props: DSSliderV2T.InternalProps<TMultiple>) => {\n  const { minValue, maxValue, step } = props;\n  return React.useMemo(() => getDefaultTickMarksValues({ minValue, maxValue, step }), [maxValue, minValue, step]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAIlB,MAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,oBAA8B,CAAC;AACrC,WAAS,QAAQ,UAAU,SAAS,UAAU,SAAS,MAAM;AAC3D,sBAAkB,KAAK,KAAK;AAAA,EAC9B;AACA,SAAO;AACT;AAEO,MAAM,qBAAqB,CAA4B,UAAgD;AAC5G,QAAM,EAAE,UAAU,UAAU,KAAK,IAAI;AACrC,SAAO,aAAAA,QAAM,QAAQ,MAAM,0BAA0B,EAAE,UAAU,UAAU,KAAK,CAAC,GAAG,CAAC,UAAU,UAAU,IAAI,CAAC;AAChH;",
+  "sourcesContent": ["import React from 'react';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\n// Tick mark values will be generated from the minValue, maxValue and step props\nconst getDefaultTickMarksValues = ({\n  minValue,\n  maxValue,\n  step,\n}: {\n  minValue: number;\n  maxValue: number;\n  step: number;\n}) => {\n  const parsedValuesArray: number[] = [];\n  for (let value = minValue; value <= maxValue; value += step) {\n    parsedValuesArray.push(value);\n  }\n  return parsedValuesArray;\n};\n\nexport const useTickMarksValues = (props: DSSliderV2T.InternalProps) => {\n  const { minValue, maxValue, step } = props;\n  return React.useMemo(() => getDefaultTickMarksValues({ minValue, maxValue, step }), [maxValue, minValue, step]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAIlB,MAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,oBAA8B,CAAC;AACrC,WAAS,QAAQ,UAAU,SAAS,UAAU,SAAS,MAAM;AAC3D,sBAAkB,KAAK,KAAK;AAAA,EAC9B;AACA,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,UAAqC;AACtE,QAAM,EAAE,UAAU,UAAU,KAAK,IAAI;AACrC,SAAO,aAAAA,QAAM,QAAQ,MAAM,0BAA0B,EAAE,UAAU,UAAU,KAAK,CAAC,GAAG,CAAC,UAAU,UAAU,IAAI,CAAC;AAChH;",
   "names": ["React"]
 }

package/dist/cjs/config/useValidateProps.js

@@ -41,5 +41,18 @@ const useValidateProps = (props, propTypes, { tickMarkPositions }) => {
       `The length of the customTickMarksValues prop must be equal to the length of the tickMarkPositions array (${tickMarkPositions.length}).`
     );
   }
+  if (props.multiple === false && Array.isArray(props.value) || props.multiple === true && !Array.isArray(props.value)) {
+    throw new Error(
+      `The "multiple" prop must match the value contract exactly. Received "multiple": ${props.multiple}, value: ${JSON.stringify(props.value)}. Either the value must not be an array, or the flag should be true.`
+    );
+  }
+  if (props.minRange && props.step && props.minRange % props.step !== 0) {
+    console.warn(`The minRange prop (${props.minRange}) must be perfectly divisible by the step prop (${props.step}).`);
+  }
+  if (props.minRange && props.minRange > props.maxValue - props.minValue) {
+    throw new Error(
+      `The minRange prop (${props.minRange}) must be within the feasable range selection, maxValue(${props.maxValue}) - minValue(${props.minValue}) = ${props.maxValue - props.minValue}).`
+    );
+  }
 };
 //# sourceMappingURL=useValidateProps.js.map

package/dist/cjs/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSSliderV2T } from '../react-desc-prop-types.js';\nimport { DSSliderV2Name } from '../constants/index.js';\n\nexport const useValidateProps = <TMultiple extends boolean>(\n  props: DSSliderV2T.InternalProps<TMultiple>,\n  propTypes: ValidationMap<unknown>,\n  { tickMarkPositions }: { tickMarkPositions: number[] },\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSSliderV2Name);\n\n  if (props.customTickMarksValues.length && props.customTickMarksValues.length !== tickMarkPositions.length) {\n    throw new Error(\n      `The length of the customTickMarksValues prop must be equal to the length of the tickMarkPositions array (${tickMarkPositions.length}).`,\n    );\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AAEnE,uBAA+B;AAExB,MAAM,mBAAmB,CAC9B,OACA,WACA,EAAE,kBAAkB,MACX;AAET,8DAA+B,OAAO,WAAW,+BAAc;AAE/D,MAAI,MAAM,sBAAsB,UAAU,MAAM,sBAAsB,WAAW,kBAAkB,QAAQ;AACzG,UAAM,IAAI;AAAA,MACR,4GAA4G,kBAAkB,MAAM;AAAA,IACtI;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable no-console */\nimport { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSSliderV2T } from '../react-desc-prop-types.js';\nimport { DSSliderV2Name } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSSliderV2T.InternalProps,\n  propTypes: ValidationMap<unknown>,\n  { tickMarkPositions }: { tickMarkPositions: number[] },\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSSliderV2Name);\n\n  if (props.customTickMarksValues.length && props.customTickMarksValues.length !== tickMarkPositions.length) {\n    throw new Error(\n      `The length of the customTickMarksValues prop must be equal to the length of the tickMarkPositions array (${tickMarkPositions.length}).`,\n    );\n  }\n\n  // Our polymorphism requires the flag to match the value, if props.multiple is false, value can not be [number,number], it will break the internals assumptions and the contract.\n  if (\n    (props.multiple === false && Array.isArray(props.value)) ||\n    (props.multiple === true && !Array.isArray(props.value))\n  ) {\n    throw new Error(\n      `The \"multiple\" prop must match the value contract exactly. Received \"multiple\": ${props.multiple}, value: ${JSON.stringify(props.value)}. Either the value must not be an array, or the flag should be true.`,\n    );\n  }\n\n  // Introducing the `minRange` props, we want to have a warning for final users if they happen to provide a min range that is not perfectly divisible by the step value\n  //   this is not an hard error because\n  //      - minRange 9,  step 10 can still be coherently mathematically and logically described, is consistent and predictable even if strange and maybe confusing\n  //      - minRange 11, step 10 can still be coherently mathematically and logically described, is consistent and predictable even if strange and maybe confusing\n  // a warning instead of an hard stop here makes sense.\n  if (props.minRange && props.step && props.minRange % props.step !== 0) {\n    console.warn(`The minRange prop (${props.minRange}) must be perfectly divisible by the step prop (${props.step}).`);\n  }\n  // We want to make sure the minRange is withing the min and max values, as defining a minRange above the maximum available space is a logic fallacy that needs adressing\n  //  this is an hard error because there is no hard truth that can be objectively enforced\n  //  some may say \"I think maxValue should win\" and other may say \"minRange is the metric to enforce\"\n  //  opinions are the killers of predictability and maintainability and scaling. The only opinion here is, if you want to enforce either, you configure the value accordingly.\n  if (props.minRange && props.minRange > props.maxValue - props.minValue) {\n    throw new Error(\n      `The minRange prop (${props.minRange}) must be within the feasable range selection, maxValue(${props.maxValue}) - minValue(${props.minValue}) = ${props.maxValue - props.minValue}).`,\n    );\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAmE;AAEnE,uBAA+B;AAExB,MAAM,mBAAmB,CAC9B,OACA,WACA,EAAE,kBAAkB,MACX;AAET,8DAA+B,OAAO,WAAW,+BAAc;AAE/D,MAAI,MAAM,sBAAsB,UAAU,MAAM,sBAAsB,WAAW,kBAAkB,QAAQ;AACzG,UAAM,IAAI;AAAA,MACR,4GAA4G,kBAAkB,MAAM;AAAA,IACtI;AAAA,EACF;AAGA,MACG,MAAM,aAAa,SAAS,MAAM,QAAQ,MAAM,KAAK,KACrD,MAAM,aAAa,QAAQ,CAAC,MAAM,QAAQ,MAAM,KAAK,GACtD;AACA,UAAM,IAAI;AAAA,MACR,mFAAmF,MAAM,QAAQ,YAAY,KAAK,UAAU,MAAM,KAAK,CAAC;AAAA,IAC1I;AAAA,EACF;AAOA,MAAI,MAAM,YAAY,MAAM,QAAQ,MAAM,WAAW,MAAM,SAAS,GAAG;AACrE,YAAQ,KAAK,sBAAsB,MAAM,QAAQ,mDAAmD,MAAM,IAAI,IAAI;AAAA,EACpH;AAKA,MAAI,MAAM,YAAY,MAAM,WAAW,MAAM,WAAW,MAAM,UAAU;AACtE,UAAM,IAAI;AAAA,MACR,sBAAsB,MAAM,QAAQ,2DAA2D,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,OAAO,MAAM,WAAW,MAAM,QAAQ;AAAA,IACnL;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/parts/MainContent.js

@@ -36,12 +36,27 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_range = require("react-range");
 var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
-var import_styles = require("../styles.js");
-var import_Track = require("./Track.js");
+var import_styles = require("./styles.js");
 var import_Thumb = require("./Thumb.js");
+var import_Track = require("./Track.js");
+const isMultipleOnChangeCallback = (values, onValueChange) => Array.isArray(values) && values.length !== 1;
+const renderTrack = (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Track.Track, { ...args });
+const renderThumb = ({ props: { key }, props, ...args }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Thumb.Thumb, { props, ...args }, key);
+const wrapperRows = ["auto", "auto"];
+const rangeWrapperRows = ["28px", "auto"];
 const MainContent = () => {
   const {
-    propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, readOnly, onValueChange, className },
+    propsWithDefault: {
+      step,
+      minValue,
+      maxValue,
+      disabled,
+      applyAriaDisabled,
+      readOnly,
+      onValueChange,
+      className,
+      minRange
+    },
     xstyledProps,
     rangeValues,
     getOwnerProps,
@@ -49,12 +64,28 @@ const MainContent = () => {
     setHasUserInteractedAfterFocus,
     hasUserInteractedAfterFocus
   } = (0, import_react.useContext)(import_DSSliderV2CTX.default);
+  const handleOnChange = (0, import_react.useCallback)(
+    (values) => {
+      if (applyAriaDisabled || readOnly) return;
+      if (isMultipleOnChangeCallback(values, onValueChange)) {
+        const [newMin, newMax] = values;
+        const newRange = newMax - newMin;
+        if (newRange >= (minRange ?? 0)) onValueChange(values);
+      } else {
+        onValueChange(values[0]);
+      }
+      if (!hasUserInteractedAfterFocus) {
+        setHasUserInteractedAfterFocus(true);
+      }
+    },
+    [applyAriaDisabled, hasUserInteractedAfterFocus, onValueChange, readOnly, setHasUserInteractedAfterFocus, minRange]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledWrapper,
     {
       width: "100%",
       alignItems: "center",
-      rows: ["auto", "auto"],
+      rows: wrapperRows,
       getOwnerProps,
       getOwnerPropsArguments,
       className,
@@ -62,7 +93,7 @@ const MainContent = () => {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_styles.StyledRangeWrapper,
         {
-          rows: ["28px", "auto"],
+          rows: rangeWrapperRows,
           alignItems: "center",
           margin: "0 16px",
           minHeight: "28px",
@@ -76,20 +107,10 @@ const MainContent = () => {
               max: maxValue,
               values: rangeValues,
               disabled,
-              onChange: (values) => {
-                if (applyAriaDisabled || readOnly) return;
-                if (values.length === 1) {
-                  onValueChange(values[0]);
-                } else {
-                  onValueChange(values);
-                }
-                if (!hasUserInteractedAfterFocus) {
-                  setHasUserInteractedAfterFocus(true);
-                }
-              },
-              renderTrack: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Track.Track, { ...args }),
-              renderThumb: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Thumb.Thumb, { ...args }),
-              allowOverlap: true,
+              onChange: handleOnChange,
+              renderTrack,
+              renderThumb,
+              allowOverlap: false,
               draggableTrack: true
             }
           )

package/dist/cjs/parts/MainContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n  const {\n    propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, readOnly, onValueChange, className },\n    xstyledProps,\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    setHasUserInteractedAfterFocus,\n    hasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  return (\n    <StyledWrapper\n      width=\"100%\"\n      alignItems=\"center\"\n      rows={['auto', 'auto']}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      className={className}\n      {...xstyledProps}\n    >\n      <StyledRangeWrapper\n        rows={['28px', 'auto']}\n        alignItems=\"center\"\n        margin=\"0 16px\"\n        minHeight=\"28px\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Range\n          step={step}\n          min={minValue}\n          max={maxValue}\n          values={rangeValues}\n          disabled={disabled}\n          onChange={(values) => {\n            if (applyAriaDisabled || readOnly) return;\n            if (values.length === 1) {\n              onValueChange(values[0]);\n            } else {\n              onValueChange(values as DSSliderV2T.ValueType<true>);\n            }\n            if (!hasUserInteractedAfterFocus) {\n              setHasUserInteractedAfterFocus(true);\n            }\n          }}\n          renderTrack={(args) => <Track {...args} />}\n          renderThumb={(args) => <Thumb {...args} />}\n          allowOverlap\n          draggableTrack\n        />\n      </StyledRangeWrapper>\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDU;AAtDjC,mBAA2B;AAC3B,yBAAsB;AACtB,2BAA8B;AAC9B,oBAAkD;AAClD,mBAAsB;AACtB,mBAAsB;AAGf,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,UAAU,UAAU,mBAAmB,UAAU,eAAe,UAAU;AAAA,IAC9G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU,CAAC,WAAW;AACpB,oBAAI,qBAAqB,SAAU;AACnC,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;AACA,oBAAI,CAAC,6BAA6B;AAChC,iDAA+B,IAAI;AAAA,gBACrC;AAAA,cACF;AAAA,cACA,aAAa,CAAC,SAAS,4CAAC,sBAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,4CAAC,sBAAO,GAAG,MAAM;AAAA,cACxC,cAAY;AAAA,cACZ,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport { Range } from 'react-range';\nimport type { IRenderThumbParams, IRenderTrackParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\nimport { StyledRangeWrapper, StyledWrapper } from './styles.js';\nimport { Thumb } from './Thumb.js';\nimport { Track } from './Track.js';\n\n// typeguard, making the same assumption the previous version was making: if the values are an array, the user must be expecting a multiple slider value onchange\nconst isMultipleOnChangeCallback = (\n  values: unknown,\n  onValueChange: unknown,\n): onValueChange is DSSliderV2T.PropsMultiple['onValueChange'] => Array.isArray(values) && values.length !== 1;\n\n// DO NOT CAPITALIZE THIS TWO VARIABLES\n//   react-range DO NOT WANT COMPONENTS, IT WANTS FUNCTIONS\n//   IF THIS GETS CAPITALIZED, THE COMPILER WILL CONVERT IT TO A COMPONENT\n//   AND THEN YOU GET \"hooks can only be used inside the body of a component\" ERROR\nconst renderTrack = (args: IRenderTrackParams) => <Track {...args} />;\nconst renderThumb = ({ props: { key }, props, ...args }: IRenderThumbParams) => (\n  <Thumb key={key} props={props} {...args} />\n);\n\nconst wrapperRows = ['auto', 'auto'];\nconst rangeWrapperRows = ['28px', 'auto'];\nexport const MainContent = () => {\n  const {\n    propsWithDefault: {\n      step,\n      minValue,\n      maxValue,\n      disabled,\n      applyAriaDisabled,\n      readOnly,\n      onValueChange,\n      className,\n      minRange,\n    },\n    xstyledProps,\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    setHasUserInteractedAfterFocus,\n    hasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  const handleOnChange = useCallback<Range['props']['onChange']>(\n    (values) => {\n      if (applyAriaDisabled || readOnly) return;\n      if (isMultipleOnChangeCallback(values, onValueChange)) {\n        const [newMin, newMax] = values;\n        const newRange = newMax - newMin;\n        if (newRange >= (minRange ?? 0)) onValueChange(values as [number, number]);\n      } else {\n        onValueChange(values[0]);\n      }\n      if (!hasUserInteractedAfterFocus) {\n        setHasUserInteractedAfterFocus(true);\n      }\n    },\n    [applyAriaDisabled, hasUserInteractedAfterFocus, onValueChange, readOnly, setHasUserInteractedAfterFocus, minRange],\n  );\n\n  return (\n    <StyledWrapper\n      width=\"100%\"\n      alignItems=\"center\"\n      rows={wrapperRows}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      className={className}\n      {...xstyledProps}\n    >\n      <StyledRangeWrapper\n        rows={rangeWrapperRows}\n        alignItems=\"center\"\n        margin=\"0 16px\"\n        minHeight=\"28px\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Range\n          step={step}\n          min={minValue}\n          max={maxValue}\n          values={rangeValues}\n          disabled={disabled}\n          onChange={handleOnChange}\n          renderTrack={renderTrack}\n          renderThumb={renderThumb}\n          allowOverlap={false}\n          draggableTrack\n        />\n      </StyledRangeWrapper>\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmB2B;AAnBlD,mBAAwC;AACxC,yBAAsB;AAEtB,2BAA8B;AAE9B,oBAAkD;AAClD,mBAAsB;AACtB,mBAAsB;AAGtB,MAAM,6BAA6B,CACjC,QACA,kBACgE,MAAM,QAAQ,MAAM,KAAK,OAAO,WAAW;AAM7G,MAAM,cAAc,CAAC,SAA6B,4CAAC,sBAAO,GAAG,MAAM;AACnE,MAAM,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,OAAO,GAAG,KAAK,MACpD,4CAAC,sBAAgB,OAAe,GAAG,QAAvB,GAA6B;AAG3C,MAAM,cAAc,CAAC,QAAQ,MAAM;AACnC,MAAM,mBAAmB,CAAC,QAAQ,MAAM;AACjC,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,qBAAiB;AAAA,IACrB,CAAC,WAAW;AACV,UAAI,qBAAqB,SAAU;AACnC,UAAI,2BAA2B,QAAQ,aAAa,GAAG;AACrD,cAAM,CAAC,QAAQ,MAAM,IAAI;AACzB,cAAM,WAAW,SAAS;AAC1B,YAAI,aAAa,YAAY,GAAI,eAAc,MAA0B;AAAA,MAC3E,OAAO;AACL,sBAAc,OAAO,CAAC,CAAC;AAAA,MACzB;AACA,UAAI,CAAC,6BAA6B;AAChC,uCAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,6BAA6B,eAAe,UAAU,gCAAgC,QAAQ;AAAA,EACpH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA,cAAc;AAAA,cACd,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/parts/Thumb.js

@@ -28,17 +28,29 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Thumb_exports = {};
 __export(Thumb_exports, {
-  Thumb: () => Thumb
+  Thumb: () => Thumb,
+  conformedThumbLabel: () => conformedThumbLabel
 });
 module.exports = __toCommonJS(Thumb_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
-var import_thumbLabels = require("../utils/thumbLabels.js");
-var import_styles = require("../styles.js");
+var import_react = require("react");
 var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
-const Thumb = ({ index, props, isDragged }) => {
+var import_styles = require("./styles.js");
+const conformedThumbLabel = (config) => {
+  const { rangeValues, customTickMarksValues, index, step, minValue } = config;
+  let msg = `Value: `;
+  if (customTickMarksValues.length) {
+    const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];
+    msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;
+  } else {
+    msg += `${rangeValues[index].toFixed(1)}`;
+  }
+  return msg;
+};
+const spanStyle = { height: 20, width: 20 };
+const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
   const {
     propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },
     rangeValues,
@@ -49,17 +61,16 @@ const Thumb = ({ index, props, isDragged }) => {
   const [isHovered, setIsHovered] = (0, import_react.useState)(false);
   const [isFocused, setIsFocused] = (0, import_react.useState)(false);
   const [isTooltipDismissed, setIsTooltipDismissed] = (0, import_react.useState)(false);
-  const { ref, ...rest } = props;
-  const label = (0, import_thumbLabels.conformedThumbLabel)({ rangeValues, customTickMarksValues, index, step, minValue });
-  const thumbStyle = (0, import_react.useMemo)(
-    () => ({
-      ...rest.style,
-      zIndex: void 0,
-      cursor: disabled || applyAriaDisabled || readOnly ? "not-allowed" : rest.style.cursor
-      // we override the library cursor's style for disable state
-    }),
-    [rest.style, disabled, applyAriaDisabled, readOnly]
-  );
+  const {
+    ref,
+    style: thumbStyle,
+    key: unusedKeyDueToLibTypescriptIssues,
+    onKeyDown: reactRangeOnKeyDownHandler,
+    onKeyUp: reactRangeOnKeyUpHandler,
+    ...propsFromReactRangeTookAsIs
+  } = reactRangeOpinionatedProps;
+  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;
+  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });
   const getOwnerPropsArguments = (0, import_react.useCallback)(
     () => ({
       index,
@@ -67,43 +78,65 @@ const Thumb = ({ index, props, isDragged }) => {
     }),
     [index, hasUserInteractedAfterFocus]
   );
-  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;
+  const sanitizedStyle = (0, import_react.useMemo)(() => {
+    const { zIndex, ...libInherithedStyles } = thumbStyle;
+    if (disabled || applyAriaDisabled || readOnly) return { ...libInherithedStyles, cursor: "not-allowed" };
+    return libInherithedStyles;
+  }, [applyAriaDisabled, disabled, readOnly, thumbStyle]);
+  const handleMouseEnter = (0, import_react.useCallback)(() => {
+    setIsHovered(true);
+    setIsFocused(false);
+    setIsTooltipDismissed(false);
+  }, []);
+  const handleMouseLeave = (0, import_react.useCallback)(() => {
+    setIsHovered(false);
+  }, []);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      reactRangeOnKeyDownHandler?.(e);
+      if (e.key === "Escape" && showPopover) {
+        e.stopPropagation();
+        setIsTooltipDismissed(true);
+        setIsFocused(true);
+      } else {
+        setIsTooltipDismissed(false);
+      }
+    },
+    [showPopover, reactRangeOnKeyDownHandler]
+  );
+  const handleKeyUp = (0, import_react.useCallback)(
+    (e) => {
+      reactRangeOnKeyUpHandler?.(e);
+    },
+    [reactRangeOnKeyUpHandler]
+  );
+  const handleFocus = (0, import_react.useCallback)(() => {
+    setIsFocused(true);
+    setIsTooltipDismissed(false);
+  }, []);
+  const handleBlur = (0, import_react.useCallback)(() => {
+    setIsFocused(false);
+    setHasUserInteractedAfterFocus(false);
+  }, [setHasUserInteractedAfterFocus]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledThumb,
     {
-      ...rest,
-      style: thumbStyle,
+      ...propsFromReactRangeTookAsIs,
+      style: sanitizedStyle,
       innerRef: ref,
       disabled,
-      applyAriaDisabled: applyAriaDisabled || readOnly,
-      "aria-disabled": disabled || applyAriaDisabled || readOnly,
-      "aria-readonly": readOnly,
-      onMouseEnter: () => {
-        setIsHovered(true);
-        setIsFocused(false);
-        setIsTooltipDismissed(false);
-      },
-      onMouseLeave: () => setIsHovered(false),
-      onKeyDownCapture: (e) => {
-        if (e.key === "Escape" && showPopover) {
-          e.stopPropagation();
-          setIsTooltipDismissed(true);
-        } else {
-          setIsFocused(true);
-          setIsTooltipDismissed(false);
-        }
-      },
-      onFocus: () => {
-        setIsFocused(true);
-        setIsTooltipDismissed(false);
-      },
-      onBlur: () => {
-        setIsFocused(false);
-        setHasUserInteractedAfterFocus(false);
-      },
+      $applyAriaDisabled: applyAriaDisabled,
+      $readOnly: readOnly,
+      "aria-disabled": applyAriaDisabled || readOnly,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
       getOwnerProps,
       getOwnerPropsArguments,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: label, showPopover, withoutAnimation: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { height: 20, width: 20 } }) }, label)
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: label, showPopover, withoutAnimation: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: spanStyle }) }, label)
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Thumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Thumb = ({ index, props, isDragged }: IRenderThumbParams) => {\n  const {\n    propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },\n    rangeValues,\n    getOwnerProps,\n    hasUserInteractedAfterFocus,\n    setHasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n  const { ref, ...rest } = props;\n\n  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n  const thumbStyle = useMemo(\n    () => ({\n      ...rest.style,\n      zIndex: undefined,\n      cursor: disabled || applyAriaDisabled || readOnly ? 'not-allowed' : rest.style.cursor,\n      // we override the library cursor's style for disable state\n    }),\n    [rest.style, disabled, applyAriaDisabled, readOnly],\n  );\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n      shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n    }),\n    [index, hasUserInteractedAfterFocus],\n  );\n\n  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n  return (\n    <StyledThumb\n      {...rest}\n      style={thumbStyle}\n      innerRef={ref}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled || readOnly}\n      aria-disabled={disabled || applyAriaDisabled || readOnly}\n      aria-readonly={readOnly}\n      onMouseEnter={() => {\n        setIsHovered(true);\n        setIsFocused(false);\n        setIsTooltipDismissed(false);\n      }}\n      onMouseLeave={() => setIsHovered(false)}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && showPopover) {\n          e.stopPropagation();\n          setIsTooltipDismissed(true);\n        } else {\n          setIsFocused(true);\n          setIsTooltipDismissed(false);\n        }\n      }}\n      onFocus={() => {\n        setIsFocused(true);\n        setIsTooltipDismissed(false);\n      }}\n      onBlur={() => {\n        setIsFocused(false);\n        setHasUserInteractedAfterFocus(false);\n      }}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSTooltipV3 key={label} text={label} showPopover={showPopover} withoutAnimation>\n        <span style={{ height: 20, width: 20 }}></span>\n      </DSTooltipV3>\n    </StyledThumb>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgFf;AAhFR,mBAAkE;AAElE,2BAA4B;AAC5B,yBAAoC;AACpC,oBAA4B;AAC5B,2BAA8B;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,YAAQ,wCAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,iBAAa;AAAA,IACjB,OAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,YAAY,qBAAqB,WAAW,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAEjF;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,mBAAmB,QAAQ;AAAA,EACpD;AAEA,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA,gCAAgC,CAAC;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,2BAA2B;AAAA,EACrC;AAEA,QAAM,eAAe,aAAa,aAAa,cAAc,CAAC;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACxC,iBAAe,YAAY,qBAAqB;AAAA,MAChD,iBAAe;AAAA,MACf,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAClB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,CAAC,MAAM;AACvB,YAAI,EAAE,QAAQ,YAAY,aAAa;AACrC,YAAE,gBAAgB;AAClB,gCAAsB,IAAI;AAAA,QAC5B,OAAO;AACL,uBAAa,IAAI;AACjB,gCAAsB,KAAK;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,qBAAa,IAAI;AACjB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,QAAQ,MAAM;AACZ,qBAAa,KAAK;AAClB,uCAA+B,KAAK;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,oCAAwB,MAAM,OAAO,aAA0B,kBAAgB,MAC9E,sDAAC,UAAK,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAG,GAAG,KADxB,KAElB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n  rangeValues: [number] | [number, number];\n  customTickMarksValues: string[];\n  index: number;\n  step: number;\n  minValue: number;\n}) => {\n  const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n  let msg = `Value: `;\n  if (customTickMarksValues.length) {\n    const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n    msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n  } else {\n    msg += `${rangeValues[index].toFixed(1)}`;\n  }\n\n  return msg;\n};\n\nconst spanStyle = { height: 20, width: 20 };\n\nexport const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }: Omit<IRenderThumbParams, 'key'>) => {\n  const {\n    propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },\n    rangeValues,\n    getOwnerProps,\n    hasUserInteractedAfterFocus,\n    setHasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n\n  const {\n    ref,\n    style: thumbStyle,\n    key: unusedKeyDueToLibTypescriptIssues,\n    onKeyDown: reactRangeOnKeyDownHandler,\n    onKeyUp: reactRangeOnKeyUpHandler,\n    ...propsFromReactRangeTookAsIs\n  } = reactRangeOpinionatedProps;\n  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n      shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n    }),\n    [index, hasUserInteractedAfterFocus],\n  );\n\n  const sanitizedStyle = useMemo(() => {\n    // as per https://jira.elliemae.io/browse/PUI-14390 and https://git.elliemae.io/platform-ui/dimsum/pull/7046\n    //   we also want  z-index: ${(props) => props.theme.zIndex.tooltip}; from the theme\n    // I keep the same, just refactoring so the styles concerns are part of the styled component as expected\n    //   my understanding is that libInherithedStyles main purposes are:\n    //   - to position the element on the track with a transform: translate\n    //   - to handle the cursor:grab/grabbing based on interaction state\n    const { zIndex, ...libInherithedStyles } = thumbStyle;\n    // we want to keep the cursor grab/grabbing thing, but we want our own \"disabled\" cursor...\n    if (disabled || applyAriaDisabled || readOnly) return { ...libInherithedStyles, cursor: 'not-allowed' };\n    return libInherithedStyles;\n  }, [applyAriaDisabled, disabled, readOnly, thumbStyle]);\n\n  const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    setIsHovered(true);\n    setIsFocused(false);\n    setIsTooltipDismissed(false);\n  }, []);\n  const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    setIsHovered(false);\n  }, []);\n\n  const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      reactRangeOnKeyDownHandler?.(e);\n      if (e.key === 'Escape' && showPopover) {\n        // stoping propagation here is load-bearing\n        // we are checking \"showPopover\" because if \"the popover exist\" it means the tooltip exist\n        // if it exist and we are in a dialog, the first esc needs to close the tooltip, not the dialog.\n        e.stopPropagation();\n        setIsTooltipDismissed(true);\n        setIsFocused(true);\n      } else {\n        setIsTooltipDismissed(false);\n      }\n    },\n    [showPopover, reactRangeOnKeyDownHandler],\n  );\n  const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      reactRangeOnKeyUpHandler?.(e);\n      // if we need to do anything on keyup too, this is where we will do it.\n    },\n    [reactRangeOnKeyUpHandler],\n  );\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n    setIsFocused(true);\n    setIsTooltipDismissed(false);\n  }, []);\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n    setIsFocused(false);\n    setHasUserInteractedAfterFocus(false);\n  }, [setHasUserInteractedAfterFocus]);\n\n  return (\n    <StyledThumb\n      {...propsFromReactRangeTookAsIs}\n      style={sanitizedStyle}\n      innerRef={ref}\n      disabled={disabled}\n      $applyAriaDisabled={applyAriaDisabled}\n      $readOnly={readOnly}\n      // dicussed with SME on 13/jul/2026, even if role='slider' technically accepts aria-readonly\n      // - SRs support for aria-readonly is loose\n      // - having both aria-readonly and aria-disabled is a violation\n      // - aria-disabled transmit the same interaction pattern\n      // therefore, we will not set aria-readonly and will rely on aria-disabled to convey the interaction pattern\n      // aria-readonly={readOnly}\n      aria-disabled={applyAriaDisabled || readOnly} // || readOnly as per previous comment\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSTooltipV3 key={label} text={label} showPopover={showPopover} withoutAnimation>\n        <span style={spanStyle}></span>\n      </DSTooltipV3>\n    </StyledThumb>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2If;AA3IR,2BAA4B;AAC5B,mBAA2D;AAE3D,2BAA8B;AAC9B,oBAA4B;AAErB,MAAM,sBAAsB,CAAC,WAM9B;AACJ,QAAM,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,IAAI;AACtE,MAAI,MAAM;AACV,MAAI,sBAAsB,QAAQ;AAChC,UAAM,aAAa,sBAAsB,KAAK,OAAO,YAAY,KAAK,IAAI,YAAY,IAAI,CAAC;AAC3F,WAAO,GAAG,cAAc,YAAY,KAAK,EAAE,QAAQ,CAAC,CAAC;AAAA,EACvD,OAAO;AACL,WAAO,GAAG,YAAY,KAAK,EAAE,QAAQ,CAAC,CAAC;AAAA,EACzC;AAEA,SAAO;AACT;AAEA,MAAM,YAAY,EAAE,QAAQ,IAAI,OAAO,GAAG;AAEnC,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,4BAA4B,UAAU,MAAuC;AACjH,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,KAAK;AAAA,IACL,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,eAAe,aAAa,aAAa,cAAc,CAAC;AAE9D,QAAM,QAAQ,oBAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA,gCAAgC,CAAC;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,2BAA2B;AAAA,EACrC;AAEA,QAAM,qBAAiB,sBAAQ,MAAM;AAOnC,UAAM,EAAE,QAAQ,GAAG,oBAAoB,IAAI;AAE3C,QAAI,YAAY,qBAAqB,SAAU,QAAO,EAAE,GAAG,qBAAqB,QAAQ,cAAc;AACtG,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,UAAU,UAAU,UAAU,CAAC;AAEtD,QAAM,uBAAmB,0BAAqD,MAAM;AAClF,iBAAa,IAAI;AACjB,iBAAa,KAAK;AAClB,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,CAAC;AACL,QAAM,uBAAmB,0BAAqD,MAAM;AAClF,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAM;AACL,mCAA6B,CAAC;AAC9B,UAAI,EAAE,QAAQ,YAAY,aAAa;AAIrC,UAAE,gBAAgB;AAClB,8BAAsB,IAAI;AAC1B,qBAAa,IAAI;AAAA,MACnB,OAAO;AACL,8BAAsB,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,0BAA0B;AAAA,EAC1C;AACA,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAM;AACL,iCAA2B,CAAC;AAAA,IAE9B;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACA,QAAM,kBAAc,0BAAqD,MAAM;AAC7E,iBAAa,IAAI;AACjB,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,CAAC;AACL,QAAM,iBAAa,0BAAqD,MAAM;AAC5E,iBAAa,KAAK;AAClB,mCAA+B,KAAK;AAAA,EACtC,GAAG,CAAC,8BAA8B,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,oBAAoB;AAAA,MACpB,WAAW;AAAA,MAOX,iBAAe,qBAAqB;AAAA,MACpC,cAAc;AAAA,MACd,cAAc;AAAA,MACd,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MAEA,sDAAC,oCAAwB,MAAM,OAAO,aAA0B,kBAAgB,MAC9E,sDAAC,UAAK,OAAO,WAAW,KADR,KAElB;AAAA;AAAA,EACF;AAEJ;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/parts/TickMarks.js

@@ -34,34 +34,17 @@ module.exports = __toCommonJS(TickMarks_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_styles = require("../styles.js");
-var import_inRange = require("../utils/inRange.js");
 var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
+var import_styles = require("./styles.js");
 const TickMarks = () => {
-  const {
-    propsWithDefault: { step, minValue, maxValue },
-    rangeValues,
-    getOwnerProps,
-    getOwnerPropsArguments
-  } = (0, import_react.useContext)(import_DSSliderV2CTX.default);
-  const dots = (0, import_react.useMemo)(() => {
-    const dotsArr = [];
-    for (let value = minValue; value <= maxValue; value += step) {
-      const isActive = (0, import_inRange.inRange)(value, rangeValues);
-      dotsArr.push(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_styles.StyledDot,
-          {
-            isActive,
-            getOwnerProps,
-            getOwnerPropsArguments
-          },
-          value
-        )
-      );
-    }
-    return dotsArr;
-  }, [getOwnerProps, getOwnerPropsArguments, maxValue, minValue, rangeValues, step]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledDotsContainer, { getOwnerProps, getOwnerPropsArguments, children: dots });
+  const { tickMarkPositions, instanceUid, getOwnerProps, getOwnerPropsArguments } = (0, import_react.useContext)(import_DSSliderV2CTX.default);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledDotsContainer, { getOwnerProps, getOwnerPropsArguments, children: tickMarkPositions.map((val) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledDot,
+    {
+      getOwnerProps,
+      getOwnerPropsArguments
+    },
+    `${instanceUid}-track-dot-${val}`
+  )) });
 };
 //# sourceMappingURL=TickMarks.js.map

package/dist/cjs/parts/TickMarks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/TickMarks.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledDot, StyledDotsContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarks = () => {\n  const {\n    propsWithDefault: { step, minValue, maxValue },\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const dots = useMemo(() => {\n    const dotsArr = [];\n\n    for (let value = minValue; value <= maxValue; value += step) {\n      const isActive = inRange(value, rangeValues);\n      dotsArr.push(\n        <StyledDot\n          isActive={isActive}\n          key={value}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />,\n      );\n    }\n\n    return dotsArr;\n  }, [getOwnerProps, getOwnerPropsArguments, maxValue, minValue, rangeValues, step]);\n\n  return (\n    <StyledDotsContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {dots}\n    </StyledDotsContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBf;AAnBR,mBAA2C;AAC3C,oBAA+C;AAC/C,qBAAwB;AACxB,2BAA8B;AAEvB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,SAAS;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,WAAO,sBAAQ,MAAM;AACzB,UAAM,UAAU,CAAC;AAEjB,aAAS,QAAQ,UAAU,SAAS,UAAU,SAAS,MAAM;AAC3D,YAAM,eAAW,wBAAQ,OAAO,WAAW;AAC3C,cAAQ;AAAA,QACN;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK;AAAA,QAGP;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,wBAAwB,UAAU,UAAU,aAAa,IAAI,CAAC;AAEjF,SACE,4CAAC,qCAAoB,eAA8B,wBAChD,gBACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/no-array-index-key */\nimport { useContext } from 'react';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledDot, StyledDotsContainer } from './styles.js';\n\nexport const TickMarks = () => {\n  const { tickMarkPositions, instanceUid, getOwnerProps, getOwnerPropsArguments } = useContext(DSSliderV2Context);\n\n  return (\n    <StyledDotsContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {tickMarkPositions.map((val) => (\n        <StyledDot\n          key={`${instanceUid}-track-dot-${val}`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      ))}\n    </StyledDotsContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWf;AAVR,mBAA2B;AAC3B,2BAA8B;AAC9B,oBAA+C;AAExC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,mBAAmB,aAAa,eAAe,uBAAuB,QAAI,yBAAW,qBAAAA,OAAiB;AAE9G,SACE,4CAAC,qCAAoB,eAA8B,wBAChD,4BAAkB,IAAI,CAAC,QACtB;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA;AAAA,IAFK,GAAG,WAAW,cAAc,GAAG;AAAA,EAGtC,CACD,GACH;AAEJ;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/parts/TickMarksValues.js

@@ -34,9 +34,9 @@ module.exports = __toCommonJS(TickMarksValues_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_styles = require("../styles.js");
-var import_inRange = require("../utils/inRange.js");
 var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
+var import_inRange = require("../utils/inRange.js");
+var import_styles = require("./styles.js");
 const TickMarksValues = () => {
   const {
     propsWithDefault: { customTickMarksValues, maxValue, minValue },
@@ -51,22 +51,6 @@ const TickMarksValues = () => {
     const calculatedColumnWidthPercentage = `${distanceBetweenDots / (maxValue - minValue) * 100}%`;
     return { columnWidth: calculatedColumnWidthPercentage };
   }, [maxValue, minValue, tickMarkPositions.length]);
-  const markValues = (0, import_react.useMemo)(
-    () => tickMarkPositions.map((value, index) => {
-      const isSelected = (0, import_inRange.inRange)(value, rangeValues);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styles.StyledTickMarkValue,
-        {
-          isSelected,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          children: customTickMarksValues[index] ?? value
-        },
-        `${instanceUid}-${value}`
-      );
-    }),
-    [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues]
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledTickMarksContainer,
     {
@@ -74,7 +58,19 @@ const TickMarksValues = () => {
       getOwnerPropsArguments,
       columnCount: tickMarkPositions.length,
       columnWidth,
-      children: markValues
+      children: tickMarkPositions.map((value, index) => {
+        const isSelected = (0, import_inRange.inRange)(value, rangeValues);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styles.StyledTickMarkValue,
+          {
+            isSelected,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: customTickMarksValues[index] ?? value
+          },
+          `${instanceUid}-${value}`
+        );
+      })
     }
   );
 };

package/dist/cjs/parts/TickMarksValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/TickMarksValues.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n  const {\n    propsWithDefault: { customTickMarksValues, maxValue, minValue },\n    rangeValues,\n    tickMarkPositions,\n    instanceUid,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { columnWidth } = useMemo(() => {\n    const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n    const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n    return { columnWidth: calculatedColumnWidthPercentage };\n  }, [maxValue, minValue, tickMarkPositions.length]);\n\n  const markValues = useMemo(\n    () =>\n      tickMarkPositions.map((value, index) => {\n        const isSelected = inRange(value, rangeValues);\n\n        return (\n          <StyledTickMarkValue\n            key={`${instanceUid}-${value}`}\n            isSelected={isSelected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {customTickMarksValues[index] ?? value}\n          </StyledTickMarkValue>\n        );\n      }),\n    [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n  );\n\n  return (\n    <StyledTickMarksContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      columnCount={tickMarkPositions.length}\n      columnWidth={columnWidth}\n    >\n      {markValues}\n    </StyledTickMarksContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Bb;AA3BV,mBAA2C;AAC3C,oBAA8D;AAC9D,qBAAwB;AACxB,2BAA8B;AAEvB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,EAAE,YAAY,QAAI,sBAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,QAAM,iBAAa;AAAA,IACjB,MACE,kBAAkB,IAAI,CAAC,OAAO,UAAU;AACtC,YAAM,iBAAa,wBAAQ,OAAO,WAAW;AAE7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,QAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,MAM9B;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,mBAAmB,aAAa,aAAa,eAAe,wBAAwB,qBAAqB;AAAA,EAC5G;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { inRange } from '../utils/inRange.js';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from './styles.js';\n\nexport const TickMarksValues = () => {\n  const {\n    propsWithDefault: { customTickMarksValues, maxValue, minValue },\n    rangeValues,\n    tickMarkPositions,\n    instanceUid,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { columnWidth } = useMemo(() => {\n    const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n    const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n    return { columnWidth: calculatedColumnWidthPercentage };\n  }, [maxValue, minValue, tickMarkPositions.length]);\n\n  return (\n    <StyledTickMarksContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      columnCount={tickMarkPositions.length}\n      columnWidth={columnWidth}\n    >\n      {tickMarkPositions.map((value, index) => {\n        const isSelected = inRange(value, rangeValues);\n\n        return (\n          <StyledTickMarkValue\n            key={`${instanceUid}-${value}`}\n            isSelected={isSelected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {customTickMarksValues[index] ?? value}\n          </StyledTickMarkValue>\n        );\n      })}\n    </StyledTickMarksContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCb;AAhCV,mBAAoC;AACpC,2BAA8B;AAC9B,qBAAwB;AACxB,oBAA8D;AAEvD,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,EAAE,YAAY,QAAI,sBAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACvC,cAAM,iBAAa,wBAAQ,OAAO,WAAW;AAE7C,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,UAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,QAM9B;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
   "names": ["DSSliderV2Context"]
 }