@elliemae/ds-slider-v2 3.61.11 → 3.70.0-alpha.9

package/dist/cjs/typescript-testing/{typescript-slider-v2-valid.js.map → typescript-slider-v2-valid-single.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props<boolean>;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps<boolean>;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps<boolean>;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps<boolean>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: false,\n  applyAriaDisabled: false,\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: false,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n    {/* multiple auto inference works */}\n    <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACoFrB;AAnFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,sBAAsB,CAAC,UAAkB;AAAC;AAChD,MAAM,wBAAwB,CAAC,UAA4B;AAAC;AAE5D,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,EAEtF,4CAAC,uBAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-single.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.PropsSingle;\ntype ComponentPropsInternals = DSSliderV2T.InternalPropsSingle;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultPropsSingle;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalPropsSingle;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredPropsSingle;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: false,\n  applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: false,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACsFrB;AArFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,sBAAsB,CAAC,UAAkB;AAAC;AAEhD,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,GACxF;",
   "names": []
 }

package/dist/esm/DSSliderV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSSliderV2.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACcjB;AAbN,SAAS,gBAAgB;AACzB,SAA2B,iCAAiC;AAC5D,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAE/B,OAAO,uBAAuB;AAC9B,SAAS,mBAAmB;AAE5B,MAAM,aAAa,CAAoC,UAAwC;AAC7F,QAAM,MAAM,YAAY,KAAK;AAE7B,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,KACjC,8BAAC,eAAY,GACf;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACcjB;AAbN,SAAS,gBAAgB;AACzB,SAA2B,iCAAiC;AAC5D,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAE/B,OAAO,uBAAuB;AAC9B,SAAS,mBAAmB;AAE5B,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,MAAM,YAAY,KAAK;AAE7B,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,KACjC,8BAAC,eAAY,GACf;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/DSSliderV2CTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSSliderV2CTX.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,oBAAoB,cAAsC,cAAc;AAErF,IAAO,wBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,oBAAoB,cAA6B,cAAc;AAE5E,IAAO,wBAAQ;",
   "names": []
 }

package/dist/esm/config/useSliderV2.js

@@ -6,10 +6,7 @@ import { DSSliderV2PropTypes, defaultProps } from "../react-desc-prop-types.js";
 import { useValidateProps } from "./useValidateProps.js";
 import { useTickMarksValues } from "./useTickMarksValues.js";
 const useSliderV2 = (propsFromUser) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(
-    propsFromUser,
-    defaultProps
-  );
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
   const { multiple, value } = propsWithDefault;
   const xstyledProps = useGetXstyledProps(propsWithDefault);
   const instanceUid = React2.useMemo(() => `slider-v2-${uid(5)}`, []);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useSliderV2.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oBAAoB,8BAA8B,qBAAqB;AAChF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAc5B,MAAM,cAAc,CAA4B,kBAAgD;AAIrG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAcA,OAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,oBAAoB,mBAAmB,gBAAgB;AAK7D,mBAAiB,kBAAkB,qBAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,kBAAkB,cAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAIA,OAAM,SAAS,KAAK;AAE1F,SAAOA,OAAM;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oBAAoB,8BAA8B,qBAAqB;AAChF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAc5B,MAAM,cAAc,CAAC,kBAAqC;AAI/D,QAAM,mBAAmB,6BAAwD,eAAe,YAAY;AAE5G,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAcA,OAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,oBAAoB,mBAAmB,gBAAgB;AAK7D,mBAAiB,kBAAkB,qBAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,kBAAkB,cAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAIA,OAAM,SAAS,KAAK;AAE1F,SAAOA,OAAM;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/esm/config/useTickMarksValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTickMarksValues.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;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,SAAOA,OAAM,QAAQ,MAAM,0BAA0B,EAAE,UAAU,UAAU,KAAK,CAAC,GAAG,CAAC,UAAU,UAAU,IAAI,CAAC;AAChH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;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,SAAOA,OAAM,QAAQ,MAAM,0BAA0B,EAAE,UAAU,UAAU,KAAK,CAAC,GAAG,CAAC,UAAU,UAAU,IAAI,CAAC;AAChH;",
   "names": ["React"]
 }

package/dist/esm/config/useValidateProps.js

@@ -8,6 +8,19 @@ 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}).`
+    );
+  }
 };
 export {
   useValidateProps

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAA0D;AAEnE,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,CAC9B,OACA,WACA,EAAE,kBAAkB,MACX;AAET,iCAA+B,OAAO,WAAW,cAAc;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": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,sCAA0D;AAEnE,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,CAC9B,OACA,WACA,EAAE,kBAAkB,MACX;AAET,iCAA+B,OAAO,WAAW,cAAc;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/esm/parts/MainContent.js

@@ -1,14 +1,29 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useCallback } from "react";
 import { Range } from "react-range";
 import DSSliderV2Context from "../DSSliderV2CTX.js";
-import { StyledRangeWrapper, StyledWrapper } from "../styles.js";
-import { Track } from "./Track.js";
+import { StyledRangeWrapper, StyledWrapper } from "./styles.js";
 import { Thumb } from "./Thumb.js";
+import { Track } from "./Track.js";
+const isMultipleOnChangeCallback = (values, onValueChange) => Array.isArray(values) && values.length !== 1;
+const renderTrack = (args) => /* @__PURE__ */ jsx(Track, { ...args });
+const renderThumb = ({ props: { key }, props, ...args }) => /* @__PURE__ */ jsx(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,
@@ -16,12 +31,28 @@ const MainContent = () => {
     setHasUserInteractedAfterFocus,
     hasUserInteractedAfterFocus
   } = useContext(DSSliderV2Context);
+  const handleOnChange = 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__ */ jsx(
     StyledWrapper,
     {
       width: "100%",
       alignItems: "center",
-      rows: ["auto", "auto"],
+      rows: wrapperRows,
       getOwnerProps,
       getOwnerPropsArguments,
       className,
@@ -29,7 +60,7 @@ const MainContent = () => {
       children: /* @__PURE__ */ jsx(
         StyledRangeWrapper,
         {
-          rows: ["28px", "auto"],
+          rows: rangeWrapperRows,
           alignItems: "center",
           margin: "0 16px",
           minHeight: "28px",
@@ -43,20 +74,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__ */ jsx(Track, { ...args }),
-              renderThumb: (args) => /* @__PURE__ */ jsx(Thumb, { ...args }),
-              allowOverlap: true,
+              onChange: handleOnChange,
+              renderTrack,
+              renderThumb,
+              allowOverlap: false,
               draggableTrack: true
             }
           )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACsDU;AAtDjC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,OAAO,uBAAuB;AAC9B,SAAS,oBAAoB,qBAAqB;AAClD,SAAS,aAAa;AACtB,SAAS,aAAa;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,IAAI,WAAW,iBAAiB;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,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,cAAY;AAAA,cACZ,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACmB2B;AAnBlD,SAAS,YAAY,mBAAmB;AACxC,SAAS,aAAa;AAEtB,OAAO,uBAAuB;AAE9B,SAAS,oBAAoB,qBAAqB;AAClD,SAAS,aAAa;AACtB,SAAS,aAAa;AAGtB,MAAM,6BAA6B,CACjC,QACA,kBACgE,MAAM,QAAQ,MAAM,KAAK,OAAO,WAAW;AAM7G,MAAM,cAAc,CAAC,SAA6B,oBAAC,SAAO,GAAG,MAAM;AACnE,MAAM,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,OAAO,GAAG,KAAK,MACpD,oBAAC,SAAgB,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,IAAI,WAAW,iBAAiB;AAEhC,QAAM,iBAAiB;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": []
 }

package/dist/esm/parts/Thumb.js

@@ -1,11 +1,22 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useMemo, useState } from "react";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
-import { conformedThumbLabel } from "../utils/thumbLabels.js";
-import { StyledThumb } from "../styles.js";
+import { useCallback, useContext, useMemo, useState } from "react";
 import DSSliderV2Context from "../DSSliderV2CTX.js";
-const Thumb = ({ index, props, isDragged }) => {
+import { StyledThumb } from "./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,
@@ -16,17 +27,16 @@ const Thumb = ({ index, props, isDragged }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);
-  const { ref, ...rest } = props;
+  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 thumbStyle = 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 getOwnerPropsArguments = useCallback(
     () => ({
       index,
@@ -34,47 +44,70 @@ const Thumb = ({ index, props, isDragged }) => {
     }),
     [index, hasUserInteractedAfterFocus]
   );
-  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;
+  const sanitizedStyle = useMemo(() => {
+    const { zIndex, ...libInherithedStyles } = thumbStyle;
+    if (disabled || applyAriaDisabled || readOnly) return { ...libInherithedStyles, cursor: "not-allowed" };
+    return libInherithedStyles;
+  }, [applyAriaDisabled, disabled, readOnly, thumbStyle]);
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+    setIsFocused(false);
+    setIsTooltipDismissed(false);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      reactRangeOnKeyDownHandler?.(e);
+      if (e.key === "Escape" && showPopover) {
+        e.stopPropagation();
+        setIsTooltipDismissed(true);
+        setIsFocused(true);
+      } else {
+        setIsTooltipDismissed(false);
+      }
+    },
+    [showPopover, reactRangeOnKeyDownHandler]
+  );
+  const handleKeyUp = useCallback(
+    (e) => {
+      reactRangeOnKeyUpHandler?.(e);
+    },
+    [reactRangeOnKeyUpHandler]
+  );
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    setIsTooltipDismissed(false);
+  }, []);
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    setHasUserInteractedAfterFocus(false);
+  }, [setHasUserInteractedAfterFocus]);
   return /* @__PURE__ */ jsx(
     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__ */ jsx(DSTooltipV3, { text: label, showPopover, withoutAnimation: true, children: /* @__PURE__ */ jsx("span", { style: { height: 20, width: 20 } }) }, label)
+      children: /* @__PURE__ */ jsx(DSTooltipV3, { text: label, showPopover, withoutAnimation: true, children: /* @__PURE__ */ jsx("span", { style: spanStyle }) }, label)
     }
   );
 };
 export {
-  Thumb
+  Thumb,
+  conformedThumbLabel
 };
 //# sourceMappingURL=Thumb.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Thumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACgFf;AAhFR,SAAgB,aAAa,YAAY,SAAS,gBAAgB;AAElE,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,OAAO,uBAAuB;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,IAAI,WAAW,iBAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,QAAQ,oBAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,aAAa;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,yBAAyB;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,8BAAC,eAAwB,MAAM,OAAO,aAA0B,kBAAgB,MAC9E,8BAAC,UAAK,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAG,GAAG,KADxB,KAElB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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://github.com/intcx/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"],
+  "mappings": "AAAA,YAAY,WAAW;AC2If;AA3IR,SAAS,mBAAmB;AAC5B,SAAS,aAAa,YAAY,SAAS,gBAAgB;AAE3D,OAAO,uBAAuB;AAC9B,SAAS,mBAAmB;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,IAAI,WAAW,iBAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,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,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA,gCAAgC,CAAC;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,2BAA2B;AAAA,EACrC;AAEA,QAAM,iBAAiB,QAAQ,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,mBAAmB,YAAqD,MAAM;AAClF,iBAAa,IAAI;AACjB,iBAAa,KAAK;AAClB,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,CAAC;AACL,QAAM,mBAAmB,YAAqD,MAAM;AAClF,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB;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,cAAc;AAAA,IAClB,CAAC,MAAM;AACL,iCAA2B,CAAC;AAAA,IAE9B;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACA,QAAM,cAAc,YAAqD,MAAM;AAC7E,iBAAa,IAAI;AACjB,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,CAAC;AACL,QAAM,aAAa,YAAqD,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,8BAAC,eAAwB,MAAM,OAAO,aAA0B,kBAAgB,MAC9E,8BAAC,UAAK,OAAO,WAAW,KADR,KAElB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/TickMarks.js

@@ -1,35 +1,18 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { StyledDot, StyledDotsContainer } from "../styles.js";
-import { inRange } from "../utils/inRange.js";
+import { useContext } from "react";
 import DSSliderV2Context from "../DSSliderV2CTX.js";
+import { StyledDot, StyledDotsContainer } from "./styles.js";
 const TickMarks = () => {
-  const {
-    propsWithDefault: { step, minValue, maxValue },
-    rangeValues,
-    getOwnerProps,
-    getOwnerPropsArguments
-  } = useContext(DSSliderV2Context);
-  const dots = useMemo(() => {
-    const dotsArr = [];
-    for (let value = minValue; value <= maxValue; value += step) {
-      const isActive = inRange(value, rangeValues);
-      dotsArr.push(
-        /* @__PURE__ */ jsx(
-          StyledDot,
-          {
-            isActive,
-            getOwnerProps,
-            getOwnerPropsArguments
-          },
-          value
-        )
-      );
-    }
-    return dotsArr;
-  }, [getOwnerProps, getOwnerPropsArguments, maxValue, minValue, rangeValues, step]);
-  return /* @__PURE__ */ jsx(StyledDotsContainer, { getOwnerProps, getOwnerPropsArguments, children: dots });
+  const { tickMarkPositions, instanceUid, getOwnerProps, getOwnerPropsArguments } = useContext(DSSliderV2Context);
+  return /* @__PURE__ */ jsx(StyledDotsContainer, { getOwnerProps, getOwnerPropsArguments, children: tickMarkPositions.map((val) => /* @__PURE__ */ jsx(
+    StyledDot,
+    {
+      getOwnerProps,
+      getOwnerPropsArguments
+    },
+    `${instanceUid}-track-dot-${val}`
+  )) });
 };
 export {
   TickMarks

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TickMarks.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACmBf;AAnBR,SAAgB,YAAY,eAAe;AAC3C,SAAS,WAAW,2BAA2B;AAC/C,SAAS,eAAe;AACxB,OAAO,uBAAuB;AAEvB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,SAAS;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,OAAO,QAAQ,MAAM;AACzB,UAAM,UAAU,CAAC;AAEjB,aAAS,QAAQ,UAAU,SAAS,UAAU,SAAS,MAAM;AAC3D,YAAM,WAAW,QAAQ,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,oBAAC,uBAAoB,eAA8B,wBAChD,gBACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACWf;AAVR,SAAS,kBAAkB;AAC3B,OAAO,uBAAuB;AAC9B,SAAS,WAAW,2BAA2B;AAExC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,mBAAmB,aAAa,eAAe,uBAAuB,IAAI,WAAW,iBAAiB;AAE9G,SACE,oBAAC,uBAAoB,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": []
 }

package/dist/esm/parts/TickMarksValues.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
-import { StyledTickMarkValue, StyledTickMarksContainer } from "../styles.js";
-import { inRange } from "../utils/inRange.js";
 import DSSliderV2Context from "../DSSliderV2CTX.js";
+import { inRange } from "../utils/inRange.js";
+import { StyledTickMarkValue, StyledTickMarksContainer } from "./styles.js";
 const TickMarksValues = () => {
   const {
     propsWithDefault: { customTickMarksValues, maxValue, minValue },
@@ -18,22 +18,6 @@ const TickMarksValues = () => {
     const calculatedColumnWidthPercentage = `${distanceBetweenDots / (maxValue - minValue) * 100}%`;
     return { columnWidth: calculatedColumnWidthPercentage };
   }, [maxValue, minValue, tickMarkPositions.length]);
-  const markValues = useMemo(
-    () => tickMarkPositions.map((value, index) => {
-      const isSelected = inRange(value, rangeValues);
-      return /* @__PURE__ */ jsx(
-        StyledTickMarkValue,
-        {
-          isSelected,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          children: customTickMarksValues[index] ?? value
-        },
-        `${instanceUid}-${value}`
-      );
-    }),
-    [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues]
-  );
   return /* @__PURE__ */ jsx(
     StyledTickMarksContainer,
     {
@@ -41,7 +25,19 @@ const TickMarksValues = () => {
       getOwnerPropsArguments,
       columnCount: tickMarkPositions.length,
       columnWidth,
-      children: markValues
+      children: tickMarkPositions.map((value, index) => {
+        const isSelected = inRange(value, rangeValues);
+        return /* @__PURE__ */ jsx(
+          StyledTickMarkValue,
+          {
+            isSelected,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: customTickMarksValues[index] ?? value
+          },
+          `${instanceUid}-${value}`
+        );
+      })
     }
   );
 };