@elliemae/ds-slider-v2 3.51.0-next.1 → 3.51.0-next.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (22) hide show
  1. package/dist/cjs/parts/MainContent.js +2 -2
  2. package/dist/cjs/parts/MainContent.js.map +2 -2
  3. package/dist/cjs/parts/Thumb.js +6 -5
  4. package/dist/cjs/parts/Thumb.js.map +2 -2
  5. package/dist/cjs/parts/Track.js +2 -2
  6. package/dist/cjs/parts/Track.js.map +2 -2
  7. package/dist/cjs/react-desc-prop-types.js +5 -1
  8. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  9. package/dist/cjs/typescript-testing/typescript-slider-v2-valid.js +2 -1
  10. package/dist/cjs/typescript-testing/typescript-slider-v2-valid.js.map +2 -2
  11. package/dist/esm/parts/MainContent.js +2 -2
  12. package/dist/esm/parts/MainContent.js.map +2 -2
  13. package/dist/esm/parts/Thumb.js +6 -5
  14. package/dist/esm/parts/Thumb.js.map +2 -2
  15. package/dist/esm/parts/Track.js +2 -2
  16. package/dist/esm/parts/Track.js.map +2 -2
  17. package/dist/esm/react-desc-prop-types.js +5 -1
  18. package/dist/esm/react-desc-prop-types.js.map +2 -2
  19. package/dist/esm/typescript-testing/typescript-slider-v2-valid.js +2 -1
  20. package/dist/esm/typescript-testing/typescript-slider-v2-valid.js.map +2 -2
  21. package/dist/types/react-desc-prop-types.d.ts +1 -0
  22. package/package.json +8 -8
package/dist/cjs/parts/MainContent.js CHANGED
@@ -41,7 +41,7 @@ var import_Track = require("./Track.js");
41
41
  var import_Thumb = require("./Thumb.js");
42
42
  const MainContent = () => {
43
43
  const {
44
- propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, onValueChange, className },
44
+ propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, readOnly, onValueChange, className },
45
45
  xstyledProps,
46
46
  rangeValues,
47
47
  getOwnerProps,
@@ -75,7 +75,7 @@ const MainContent = () => {
75
75
  values: rangeValues,
76
76
  disabled,
77
77
  onChange: (values) => {
78
- if (applyAriaDisabled) return;
78
+ if (applyAriaDisabled || readOnly) return;
79
79
  if (values.length === 1) {
80
80
  onValueChange(values[0]);
81
81
  } else {
package/dist/cjs/parts/MainContent.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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, onValueChange, className },\n xstyledProps,\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\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) return;\n if (values.length === 1) {\n onValueChange(values[0]);\n } else {\n onValueChange(values as DSSliderV2T.ValueType<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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDU;AAjDjC,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,eAAe,UAAU;AAAA,IACpG;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,kBAAmB;AACvB,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;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;",
4
+ "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 } = 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 }}\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDU;AAjDjC,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,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;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;",
6
6
  "names": ["DSSliderV2Context"]
7
7
  }
package/dist/cjs/parts/Thumb.js CHANGED
@@ -40,7 +40,7 @@ var import_styles = require("../styles.js");
40
40
  var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
41
41
  const Thumb = ({ index, props, isDragged }) => {
42
42
  const {
43
- propsWithDefault: { disabled, applyAriaDisabled, customTickMarksValues, step, minValue },
43
+ propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },
44
44
  rangeValues,
45
45
  getOwnerProps,
46
46
  getOwnerPropsArguments
@@ -53,10 +53,10 @@ const Thumb = ({ index, props, isDragged }) => {
53
53
  () => ({
54
54
  ...rest.style,
55
55
  zIndex: void 0,
56
- cursor: disabled || applyAriaDisabled ? "not-allowed" : rest.style.cursor
56
+ cursor: disabled || applyAriaDisabled || readOnly ? "not-allowed" : rest.style.cursor
57
57
  // we override the library cursor's style for disable state
58
58
  }),
59
- [rest.style, disabled, applyAriaDisabled]
59
+ [rest.style, disabled, applyAriaDisabled, readOnly]
60
60
  );
61
61
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
62
  import_styles.StyledThumb,
@@ -65,8 +65,9 @@ const Thumb = ({ index, props, isDragged }) => {
65
65
  style: thumbStyle,
66
66
  innerRef: ref,
67
67
  disabled,
68
- applyAriaDisabled,
69
- "aria-disabled": disabled || applyAriaDisabled,
68
+ applyAriaDisabled: applyAriaDisabled || readOnly,
69
+ "aria-disabled": disabled || applyAriaDisabled || readOnly,
70
+ "aria-readonly": readOnly,
70
71
  onMouseEnter: () => {
71
72
  setIsHovered(true);
72
73
  setIsFocused(false);
package/dist/cjs/parts/Thumb.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/Thumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { 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, customTickMarksValues, step, minValue },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\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 ? 'not-allowed' : rest.style.cursor,\n // we override the library cursor's style for disable state\n }),\n [rest.style, disabled, applyAriaDisabled],\n );\n\n return (\n <StyledThumb\n {...rest}\n style={thumbStyle}\n innerRef={ref}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n aria-disabled={disabled || applyAriaDisabled}\n onMouseEnter={() => {\n setIsHovered(true);\n setIsFocused(false);\n }}\n onMouseLeave={() => setIsHovered(false)}\n onKeyDownCapture={() => setIsFocused(true)}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3\n key={label}\n text={label}\n showPopover={isDragged || isHovered || isFocused}\n customOffset={[0, 20]}\n withoutAnimation\n >\n <span></span>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Df;AA1DR,mBAAqD;AAErD,2BAA4B;AAC5B,yBAAoC;AACpC,oBAA4B;AAC5B,2BAA8B;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,uBAAuB,MAAM,SAAS;AAAA,IACvF;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,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,oBAAoB,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAErE;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,iBAAiB;AAAA,EAC1C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,iBAAe,YAAY;AAAA,MAC3B,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAAA,MACpB;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,MAAM,aAAa,IAAI;AAAA,MACzC,SAAS,MAAM,aAAa,IAAI;AAAA,MAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,aAAa,aAAa,aAAa;AAAA,UACvC,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA,UAEhB,sDAAC,UAAK;AAAA;AAAA,QAND;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import React, { 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 getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\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 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 }}\n onMouseLeave={() => setIsHovered(false)}\n onKeyDownCapture={() => setIsFocused(true)}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3\n key={label}\n text={label}\n showPopover={isDragged || isHovered || isFocused}\n customOffset={[0, 20]}\n withoutAnimation\n >\n <span></span>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA3DR,mBAAqD;AAErD,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,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,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,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;AAAA,MACpB;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,MAAM,aAAa,IAAI;AAAA,MACzC,SAAS,MAAM,aAAa,IAAI;AAAA,MAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,aAAa,aAAa,aAAa;AAAA,UACvC,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA,UAEhB,sDAAC,UAAK;AAAA;AAAA,QAND;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["DSSliderV2Context"]
7
7
  }
package/dist/cjs/parts/Track.js CHANGED
@@ -40,7 +40,7 @@ var import_styles = require("../styles.js");
40
40
  var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
41
41
  const Track = ({ children, props, disabled }) => {
42
42
  const {
43
- propsWithDefault: { minValue, maxValue, applyAriaDisabled, withTickMarksValues, withTickMarks },
43
+ propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks },
44
44
  rangeValues,
45
45
  getOwnerProps,
46
46
  getOwnerPropsArguments
@@ -53,7 +53,7 @@ const Track = ({ children, props, disabled }) => {
53
53
  ...rest,
54
54
  innerRef: ref,
55
55
  disabled,
56
- applyAriaDisabled,
56
+ applyAriaDisabled: applyAriaDisabled || readOnly,
57
57
  minValue,
58
58
  maxValue,
59
59
  rangeValues,
package/dist/cjs/parts/Track.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/Track.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Track = ({ children, props, disabled }: IRenderTrackParams) => {\n const {\n propsWithDefault: { minValue, maxValue, applyAriaDisabled, withTickMarksValues, withTickMarks },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n // The onMouseDown event was preventing the thumb from receiving focus\n // when it was clicked, particularly when the 'multiple' prop was used.\n // After thorough testing, it was confirmed that removing this event\n // handler does not cause any unintended side effects.\n const { ref, onMouseDown, ...rest } = props;\n\n return (\n <>\n <StyledTrack\n {...rest} // This is needed because it's received from the library\n innerRef={ref}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n minValue={minValue}\n maxValue={maxValue}\n rangeValues={rangeValues}\n multiple={rangeValues.length === 2}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n {withTickMarks && (!disabled || !applyAriaDisabled) && <TickMarks />}\n </StyledTrack>\n {withTickMarksValues && <TickMarksValues />}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAAkC;AAElC,uBAA0B;AAC1B,6BAAgC;AAChC,oBAA4B;AAC5B,2BAA8B;AAEvB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,SAAS,MAA0B;AAC1E,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,UAAU,mBAAmB,qBAAqB,cAAc;AAAA,IAC9F;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAMhC,QAAM,EAAE,KAAK,aAAa,GAAG,KAAK,IAAI;AAEtC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,kBAAkB,CAAC,YAAY,CAAC,sBAAsB,4CAAC,8BAAU;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,uBAAuB,4CAAC,0CAAgB;AAAA,KAC3C;AAEJ;",
4
+ "sourcesContent": ["import React, { useContext } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Track = ({ children, props, disabled }: IRenderTrackParams) => {\n const {\n propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n // The onMouseDown event was preventing the thumb from receiving focus\n // when it was clicked, particularly when the 'multiple' prop was used.\n // After thorough testing, it was confirmed that removing this event\n // handler does not cause any unintended side effects.\n const { ref, onMouseDown, ...rest } = props;\n\n return (\n <>\n <StyledTrack\n {...rest} // This is needed because it's received from the library\n innerRef={ref}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n minValue={minValue}\n maxValue={maxValue}\n rangeValues={rangeValues}\n multiple={rangeValues.length === 2}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n {withTickMarks && (!disabled || !applyAriaDisabled) && <TickMarks />}\n </StyledTrack>\n {withTickMarksValues && <TickMarksValues />}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAAkC;AAElC,uBAA0B;AAC1B,6BAAgC;AAChC,oBAA4B;AAC5B,2BAA8B;AAEvB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,SAAS,MAA0B;AAC1E,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,UAAU,mBAAmB,UAAU,qBAAqB,cAAc;AAAA,IACxG;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAMhC,QAAM,EAAE,KAAK,aAAa,GAAG,KAAK,IAAI;AAEtC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA,mBAAmB,qBAAqB;AAAA,QACxC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,kBAAkB,CAAC,YAAY,CAAC,sBAAsB,4CAAC,8BAAU;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,uBAAuB,4CAAC,0CAAgB;AAAA,KAC3C;AAEJ;",
6
6
  "names": ["DSSliderV2Context"]
7
7
  }
package/dist/cjs/react-desc-prop-types.js CHANGED
@@ -45,7 +45,8 @@ const defaultProps = {
45
45
  withTickMarksValues: false,
46
46
  customTickMarksValues: [],
47
47
  multiple: false,
48
- applyAriaDisabled: false
48
+ applyAriaDisabled: false,
49
+ readOnly: false
49
50
  };
50
51
  const DSSliderV2PropTypes = {
51
52
  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSSliderV2Name, import_constants.SLIDER_V2_SLOTS),
@@ -62,6 +63,9 @@ const DSSliderV2PropTypes = {
62
63
  customTickMarksValues: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number])).description("Explicitly set tickmark values for custom tickmarks").defaultValue([]),
63
64
  applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
64
65
  "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
66
+ ).defaultValue(false),
67
+ readOnly: import_ds_props_helpers.PropTypes.bool.description(
68
+ "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
65
69
  ).defaultValue(false)
66
70
  };
67
71
  const DSSliderV2PropTypesSchema = DSSliderV2PropTypes;
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n export type ValueType<TMultiple extends boolean> = TMultiple extends true\n ? [number, number]\n : TMultiple extends false\n ? number\n : number | [number, number];\n\n export interface RequiredProps<TMultiple extends boolean> {\n value: ValueType<TMultiple>;\n minValue: number;\n maxValue: number;\n }\n\n export interface DefaultProps<TMultiple extends boolean> {\n multiple: TMultiple;\n disabled: boolean;\n applyAriaDisabled: boolean;\n step: number;\n onValueChange: (newValue: ValueType<TMultiple>) => void;\n withTickMarks: boolean;\n withTickMarksValues: boolean;\n customTickMarksValues: string[];\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n className?: string;\n }\n\n export interface Props<TMultiple extends boolean = false>\n extends Partial<DefaultProps<TMultiple>>,\n OptionalProps,\n XstyledProps,\n RequiredProps<TMultiple> {}\n\n export interface InternalProps<TMultiple extends boolean = false>\n extends DefaultProps<TMultiple>,\n OptionalProps,\n XstyledProps,\n RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n multiple: false as boolean,\n applyAriaDisabled: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n .description('Explicitly set tickmark values for custom tickmarks')\n .defaultValue([]),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props<boolean>>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAAgD;AA4CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,sBAAqE;AAAA,EAChF,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,kCAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,4BAA4B;",
4
+ "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n export type ValueType<TMultiple extends boolean> = TMultiple extends true\n ? [number, number]\n : TMultiple extends false\n ? number\n : number | [number, number];\n\n export interface RequiredProps<TMultiple extends boolean> {\n value: ValueType<TMultiple>;\n minValue: number;\n maxValue: number;\n }\n\n export interface DefaultProps<TMultiple extends boolean> {\n multiple: TMultiple;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n step: number;\n onValueChange: (newValue: ValueType<TMultiple>) => void;\n withTickMarks: boolean;\n withTickMarksValues: boolean;\n customTickMarksValues: string[];\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n className?: string;\n }\n\n export interface Props<TMultiple extends boolean = false>\n extends Partial<DefaultProps<TMultiple>>,\n OptionalProps,\n XstyledProps,\n RequiredProps<TMultiple> {}\n\n export interface InternalProps<TMultiple extends boolean = false>\n extends DefaultProps<TMultiple>,\n OptionalProps,\n XstyledProps,\n RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n multiple: false as boolean,\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n .description('Explicitly set tickmark values for custom tickmarks')\n .defaultValue([]),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props<boolean>>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAAgD;AA6CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,kCAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,4BAA4B;",
6
6
  "names": []
7
7
  }
package/dist/cjs/typescript-testing/typescript-slider-v2-valid.js CHANGED
@@ -53,7 +53,8 @@ const testCompleteDefaults = {
53
53
  withTickMarks: false,
54
54
  withTickMarksValues: false,
55
55
  customTickMarksValues: [],
56
- applyAriaDisabled: false
56
+ applyAriaDisabled: false,
57
+ readOnly: false
57
58
  };
58
59
  const testInternalProps = {
59
60
  ...testRequiredProps,
package/dist/cjs/typescript-testing/typescript-slider-v2-valid.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid.tsx"],
4
- "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};\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACmFrB;AAlFF,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;AACrB;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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/MainContent.js CHANGED
@@ -8,7 +8,7 @@ import { Track } from "./Track.js";
8
8
  import { Thumb } from "./Thumb.js";
9
9
  const MainContent = () => {
10
10
  const {
11
- propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, onValueChange, className },
11
+ propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, readOnly, onValueChange, className },
12
12
  xstyledProps,
13
13
  rangeValues,
14
14
  getOwnerProps,
@@ -42,7 +42,7 @@ const MainContent = () => {
42
42
  values: rangeValues,
43
43
  disabled,
44
44
  onChange: (values) => {
45
- if (applyAriaDisabled) return;
45
+ if (applyAriaDisabled || readOnly) return;
46
46
  if (values.length === 1) {
47
47
  onValueChange(values[0]);
48
48
  } else {
package/dist/esm/parts/MainContent.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
4
- "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, onValueChange, className },\n xstyledProps,\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\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) return;\n if (values.length === 1) {\n onValueChange(values[0]);\n } else {\n onValueChange(values as DSSliderV2T.ValueType<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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACiDU;AAjDjC,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,eAAe,UAAU;AAAA,IACpG;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,kBAAmB;AACvB,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;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;",
4
+ "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 } = 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 }}\n renderTrack={(args) => <Track {...args} />}\n renderThumb={(args) => <Thumb {...args} />}\n allowOverlap\n draggableTrack\n />\n </StyledRangeWrapper>\n </StyledWrapper>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACiDU;AAjDjC,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,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;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;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Thumb.js CHANGED
@@ -7,7 +7,7 @@ import { StyledThumb } from "../styles.js";
7
7
  import DSSliderV2Context from "../DSSliderV2CTX.js";
8
8
  const Thumb = ({ index, props, isDragged }) => {
9
9
  const {
10
- propsWithDefault: { disabled, applyAriaDisabled, customTickMarksValues, step, minValue },
10
+ propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },
11
11
  rangeValues,
12
12
  getOwnerProps,
13
13
  getOwnerPropsArguments
@@ -20,10 +20,10 @@ const Thumb = ({ index, props, isDragged }) => {
20
20
  () => ({
21
21
  ...rest.style,
22
22
  zIndex: void 0,
23
- cursor: disabled || applyAriaDisabled ? "not-allowed" : rest.style.cursor
23
+ cursor: disabled || applyAriaDisabled || readOnly ? "not-allowed" : rest.style.cursor
24
24
  // we override the library cursor's style for disable state
25
25
  }),
26
- [rest.style, disabled, applyAriaDisabled]
26
+ [rest.style, disabled, applyAriaDisabled, readOnly]
27
27
  );
28
28
  return /* @__PURE__ */ jsx(
29
29
  StyledThumb,
@@ -32,8 +32,9 @@ const Thumb = ({ index, props, isDragged }) => {
32
32
  style: thumbStyle,
33
33
  innerRef: ref,
34
34
  disabled,
35
- applyAriaDisabled,
36
- "aria-disabled": disabled || applyAriaDisabled,
35
+ applyAriaDisabled: applyAriaDisabled || readOnly,
36
+ "aria-disabled": disabled || applyAriaDisabled || readOnly,
37
+ "aria-readonly": readOnly,
37
38
  onMouseEnter: () => {
38
39
  setIsHovered(true);
39
40
  setIsFocused(false);
package/dist/esm/parts/Thumb.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Thumb.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { 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, customTickMarksValues, step, minValue },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\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 ? 'not-allowed' : rest.style.cursor,\n // we override the library cursor's style for disable state\n }),\n [rest.style, disabled, applyAriaDisabled],\n );\n\n return (\n <StyledThumb\n {...rest}\n style={thumbStyle}\n innerRef={ref}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n aria-disabled={disabled || applyAriaDisabled}\n onMouseEnter={() => {\n setIsHovered(true);\n setIsFocused(false);\n }}\n onMouseLeave={() => setIsHovered(false)}\n onKeyDownCapture={() => setIsFocused(true)}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3\n key={label}\n text={label}\n showPopover={isDragged || isHovered || isFocused}\n customOffset={[0, 20]}\n withoutAnimation\n >\n <span></span>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC0Df;AA1DR,SAAgB,YAAY,SAAS,gBAAgB;AAErD,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,uBAAuB,MAAM,SAAS;AAAA,IACvF;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,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,oBAAoB,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAErE;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,iBAAiB;AAAA,EAC1C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,iBAAe,YAAY;AAAA,MAC3B,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAAA,MACpB;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,MAAM,aAAa,IAAI;AAAA,MACzC,SAAS,MAAM,aAAa,IAAI;AAAA,MAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,aAAa,aAAa,aAAa;AAAA,UACvC,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA,UAEhB,8BAAC,UAAK;AAAA;AAAA,QAND;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { 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 getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\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 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 }}\n onMouseLeave={() => setIsHovered(false)}\n onKeyDownCapture={() => setIsFocused(true)}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3\n key={label}\n text={label}\n showPopover={isDragged || isHovered || isFocused}\n customOffset={[0, 20]}\n withoutAnimation\n >\n <span></span>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC2Df;AA3DR,SAAgB,YAAY,SAAS,gBAAgB;AAErD,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,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,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,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;AAAA,MACpB;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,MAAM,aAAa,IAAI;AAAA,MACzC,SAAS,MAAM,aAAa,IAAI;AAAA,MAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,aAAa,aAAa,aAAa;AAAA,UACvC,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA,UAEhB,8BAAC,UAAK;AAAA;AAAA,QAND;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Track.js CHANGED
@@ -7,7 +7,7 @@ import { StyledTrack } from "../styles.js";
7
7
  import DSSliderV2Context from "../DSSliderV2CTX.js";
8
8
  const Track = ({ children, props, disabled }) => {
9
9
  const {
10
- propsWithDefault: { minValue, maxValue, applyAriaDisabled, withTickMarksValues, withTickMarks },
10
+ propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks },
11
11
  rangeValues,
12
12
  getOwnerProps,
13
13
  getOwnerPropsArguments
@@ -20,7 +20,7 @@ const Track = ({ children, props, disabled }) => {
20
20
  ...rest,
21
21
  innerRef: ref,
22
22
  disabled,
23
- applyAriaDisabled,
23
+ applyAriaDisabled: applyAriaDisabled || readOnly,
24
24
  minValue,
25
25
  maxValue,
26
26
  rangeValues,
package/dist/esm/parts/Track.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Track.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Track = ({ children, props, disabled }: IRenderTrackParams) => {\n const {\n propsWithDefault: { minValue, maxValue, applyAriaDisabled, withTickMarksValues, withTickMarks },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n // The onMouseDown event was preventing the thumb from receiving focus\n // when it was clicked, particularly when the 'multiple' prop was used.\n // After thorough testing, it was confirmed that removing this event\n // handler does not cause any unintended side effects.\n const { ref, onMouseDown, ...rest } = props;\n\n return (\n <>\n <StyledTrack\n {...rest} // This is needed because it's received from the library\n innerRef={ref}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n minValue={minValue}\n maxValue={maxValue}\n rangeValues={rangeValues}\n multiple={rangeValues.length === 2}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n {withTickMarks && (!disabled || !applyAriaDisabled) && <TickMarks />}\n </StyledTrack>\n {withTickMarksValues && <TickMarksValues />}\n </>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACsBnB,mBAc2D,KAbzD,YADF;AAtBJ,SAAgB,kBAAkB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,OAAO,uBAAuB;AAEvB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,SAAS,MAA0B;AAC1E,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,UAAU,mBAAmB,qBAAqB,cAAc;AAAA,IAC9F;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAMhC,QAAM,EAAE,KAAK,aAAa,GAAG,KAAK,IAAI;AAEtC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,kBAAkB,CAAC,YAAY,CAAC,sBAAsB,oBAAC,aAAU;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Track = ({ children, props, disabled }: IRenderTrackParams) => {\n const {\n propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n // The onMouseDown event was preventing the thumb from receiving focus\n // when it was clicked, particularly when the 'multiple' prop was used.\n // After thorough testing, it was confirmed that removing this event\n // handler does not cause any unintended side effects.\n const { ref, onMouseDown, ...rest } = props;\n\n return (\n <>\n <StyledTrack\n {...rest} // This is needed because it's received from the library\n innerRef={ref}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n minValue={minValue}\n maxValue={maxValue}\n rangeValues={rangeValues}\n multiple={rangeValues.length === 2}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n {withTickMarks && (!disabled || !applyAriaDisabled) && <TickMarks />}\n </StyledTrack>\n {withTickMarksValues && <TickMarksValues />}\n </>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACsBnB,mBAc2D,KAbzD,YADF;AAtBJ,SAAgB,kBAAkB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,OAAO,uBAAuB;AAEvB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,SAAS,MAA0B;AAC1E,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,UAAU,mBAAmB,UAAU,qBAAqB,cAAc;AAAA,IACxG;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAMhC,QAAM,EAAE,KAAK,aAAa,GAAG,KAAK,IAAI;AAEtC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA,mBAAmB,qBAAqB;AAAA,QACxC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,kBAAkB,CAAC,YAAY,CAAC,sBAAsB,oBAAC,aAAU;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/react-desc-prop-types.js CHANGED
@@ -15,7 +15,8 @@ const defaultProps = {
15
15
  withTickMarksValues: false,
16
16
  customTickMarksValues: [],
17
17
  multiple: false,
18
- applyAriaDisabled: false
18
+ applyAriaDisabled: false,
19
+ readOnly: false
19
20
  };
20
21
  const DSSliderV2PropTypes = {
21
22
  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),
@@ -32,6 +33,9 @@ const DSSliderV2PropTypes = {
32
33
  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description("Explicitly set tickmark values for custom tickmarks").defaultValue([]),
33
34
  applyAriaDisabled: PropTypes.bool.description(
34
35
  "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
36
+ ).defaultValue(false),
37
+ readOnly: PropTypes.bool.description(
38
+ "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
35
39
  ).defaultValue(false)
36
40
  };
37
41
  const DSSliderV2PropTypesSchema = DSSliderV2PropTypes;
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n export type ValueType<TMultiple extends boolean> = TMultiple extends true\n ? [number, number]\n : TMultiple extends false\n ? number\n : number | [number, number];\n\n export interface RequiredProps<TMultiple extends boolean> {\n value: ValueType<TMultiple>;\n minValue: number;\n maxValue: number;\n }\n\n export interface DefaultProps<TMultiple extends boolean> {\n multiple: TMultiple;\n disabled: boolean;\n applyAriaDisabled: boolean;\n step: number;\n onValueChange: (newValue: ValueType<TMultiple>) => void;\n withTickMarks: boolean;\n withTickMarksValues: boolean;\n customTickMarksValues: string[];\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n className?: string;\n }\n\n export interface Props<TMultiple extends boolean = false>\n extends Partial<DefaultProps<TMultiple>>,\n OptionalProps,\n XstyledProps,\n RequiredProps<TMultiple> {}\n\n export interface InternalProps<TMultiple extends boolean = false>\n extends DefaultProps<TMultiple>,\n OptionalProps,\n XstyledProps,\n RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n multiple: false as boolean,\n applyAriaDisabled: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n .description('Explicitly set tickmark values for custom tickmarks')\n .defaultValue([]),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props<boolean>>;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AA4CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,sBAAqE;AAAA,EAChF,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,UAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,UAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,4BAA4B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n export type ValueType<TMultiple extends boolean> = TMultiple extends true\n ? [number, number]\n : TMultiple extends false\n ? number\n : number | [number, number];\n\n export interface RequiredProps<TMultiple extends boolean> {\n value: ValueType<TMultiple>;\n minValue: number;\n maxValue: number;\n }\n\n export interface DefaultProps<TMultiple extends boolean> {\n multiple: TMultiple;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n step: number;\n onValueChange: (newValue: ValueType<TMultiple>) => void;\n withTickMarks: boolean;\n withTickMarksValues: boolean;\n customTickMarksValues: string[];\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n className?: string;\n }\n\n export interface Props<TMultiple extends boolean = false>\n extends Partial<DefaultProps<TMultiple>>,\n OptionalProps,\n XstyledProps,\n RequiredProps<TMultiple> {}\n\n export interface InternalProps<TMultiple extends boolean = false>\n extends DefaultProps<TMultiple>,\n OptionalProps,\n XstyledProps,\n RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n multiple: false as boolean,\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n .description('Explicitly set tickmark values for custom tickmarks')\n .defaultValue([]),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props<boolean>>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AA6CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,UAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,UAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,4BAA4B;",
6
6
  "names": []
7
7
  }
package/dist/esm/typescript-testing/typescript-slider-v2-valid.js CHANGED
@@ -30,7 +30,8 @@ const testCompleteDefaults = {
30
30
  withTickMarks: false,
31
31
  withTickMarksValues: false,
32
32
  customTickMarksValues: [],
33
- applyAriaDisabled: false
33
+ applyAriaDisabled: false,
34
+ readOnly: false
34
35
  };
35
36
  const testInternalProps = {
36
37
  ...testRequiredProps,
package/dist/esm/typescript-testing/typescript-slider-v2-valid.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid.tsx"],
4
- "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};\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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmFrB,mBAEE,KAFF;AAlFF,SAAS,kBAAkB;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;AACrB;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,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,EAEtF,oBAAC,cAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
4
+ "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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACoFrB,mBAEE,KAFF;AAnFF,SAAS,kBAAkB;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,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,EAEtF,oBAAC,cAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
6
6
  "names": []
7
7
  }
package/dist/types/react-desc-prop-types.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare namespace DSSliderV2T {
13
13
  multiple: TMultiple;
14
14
  disabled: boolean;
15
15
  applyAriaDisabled: boolean;
16
+ readOnly: boolean;
16
17
  step: number;
17
18
  onValueChange: (newValue: ValueType<TMultiple>) => void;
18
19
  withTickMarks: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-slider-v2",
3
- "version": "3.51.0-next.1",
3
+ "version": "3.51.0-next.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Slider V 2",
6
6
  "files": [
@@ -38,19 +38,19 @@
38
38
  "dependencies": {
39
39
  "react-range": "~1.8.14",
40
40
  "uid": "^2.0.2",
41
- "@elliemae/ds-grid": "3.51.0-next.1",
42
- "@elliemae/ds-system": "3.51.0-next.1",
43
- "@elliemae/ds-props-helpers": "3.51.0-next.1",
44
- "@elliemae/ds-tooltip-v3": "3.51.0-next.1",
45
- "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.1",
46
- "@elliemae/ds-typescript-helpers": "3.51.0-next.1"
41
+ "@elliemae/ds-grid": "3.51.0-next.3",
42
+ "@elliemae/ds-system": "3.51.0-next.3",
43
+ "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.3",
44
+ "@elliemae/ds-props-helpers": "3.51.0-next.3",
45
+ "@elliemae/ds-typescript-helpers": "3.51.0-next.3",
46
+ "@elliemae/ds-tooltip-v3": "3.51.0-next.3"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@elliemae/pui-cli": "9.0.0-next.50",
50
50
  "jest": "~29.7.0",
51
51
  "lodash": "^4.17.21",
52
52
  "styled-components": "~5.3.9",
53
- "@elliemae/ds-monorepo-devops": "3.51.0-next.1"
53
+ "@elliemae/ds-monorepo-devops": "3.51.0-next.3"
54
54
  },
55
55
  "peerDependencies": {
56
56
  "@testing-library/jest-dom": "^6.6.3",