@elliemae/ds-slider-v2 3.53.0-alpha.1 → 3.53.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/Thumb.js +1 -1
- package/dist/cjs/parts/Thumb.js.map +2 -2
- package/dist/cjs/parts/Track.js +1 -1
- package/dist/cjs/parts/Track.js.map +2 -2
- package/dist/esm/parts/Thumb.js +1 -1
- package/dist/esm/parts/Thumb.js.map +2 -2
- package/dist/esm/parts/Track.js +1 -1
- package/dist/esm/parts/Track.js.map +2 -2
- package/dist/types/DSSliderV2CTX.d.ts +0 -1
- package/dist/types/constants/index.d.ts +10 -1
- package/dist/types/react-desc-prop-types.d.ts +0 -1
- package/dist/types/styles.d.ts +0 -1
- package/dist/types/tests/DSSliderV2.clickjump.test.d.ts +1 -0
- package/package.json +11 -10
package/dist/cjs/parts/Thumb.js
CHANGED
|
@@ -103,7 +103,7 @@ const Thumb = ({ index, props, isDragged }) => {
|
|
|
103
103
|
},
|
|
104
104
|
getOwnerProps,
|
|
105
105
|
getOwnerPropsArguments,
|
|
106
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: label, showPopover,
|
|
106
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: label, showPopover, withoutAnimation: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { height: 20, width: 20 } }) }, label)
|
|
107
107
|
}
|
|
108
108
|
);
|
|
109
109
|
};
|
|
@@ -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, { 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}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgFf;AAhFR,mBAAkE;AAElE,2BAA4B;AAC5B,yBAAoC;AACpC,oBAA4B;AAC5B,2BAA8B;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,YAAQ,wCAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,iBAAa;AAAA,IACjB,OAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,YAAY,qBAAqB,WAAW,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAEjF;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,mBAAmB,QAAQ;AAAA,EACpD;AAEA,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA,gCAAgC,CAAC;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,2BAA2B;AAAA,EACrC;AAEA,QAAM,eAAe,aAAa,aAAa,cAAc,CAAC;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACxC,iBAAe,YAAY,qBAAqB;AAAA,MAChD,iBAAe;AAAA,MACf,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAClB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,CAAC,MAAM;AACvB,YAAI,EAAE,QAAQ,YAAY,aAAa;AACrC,YAAE,gBAAgB;AAClB,gCAAsB,IAAI;AAAA,QAC5B,OAAO;AACL,uBAAa,IAAI;AACjB,gCAAsB,KAAK;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,qBAAa,IAAI;AACjB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,QAAQ,MAAM;AACZ,qBAAa,KAAK;AAClB,uCAA+B,KAAK;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,oCAAwB,MAAM,OAAO,aAA0B,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Thumb = ({ index, props, isDragged }: IRenderThumbParams) => {\n const {\n propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },\n rangeValues,\n getOwnerProps,\n hasUserInteractedAfterFocus,\n setHasUserInteractedAfterFocus,\n } = useContext(DSSliderV2Context);\n\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n const { ref, ...rest } = props;\n\n const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n const thumbStyle = useMemo(\n () => ({\n ...rest.style,\n zIndex: undefined,\n cursor: disabled || applyAriaDisabled || readOnly ? 'not-allowed' : rest.style.cursor,\n // we override the library cursor's style for disable state\n }),\n [rest.style, disabled, applyAriaDisabled, readOnly],\n );\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n index,\n shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n }),\n [index, hasUserInteractedAfterFocus],\n );\n\n const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n return (\n <StyledThumb\n {...rest}\n style={thumbStyle}\n innerRef={ref}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n aria-disabled={disabled || applyAriaDisabled || readOnly}\n aria-readonly={readOnly}\n onMouseEnter={() => {\n setIsHovered(true);\n setIsFocused(false);\n setIsTooltipDismissed(false);\n }}\n onMouseLeave={() => setIsHovered(false)}\n onKeyDownCapture={(e) => {\n if (e.key === 'Escape' && showPopover) {\n e.stopPropagation();\n setIsTooltipDismissed(true);\n } else {\n setIsFocused(true);\n setIsTooltipDismissed(false);\n }\n }}\n onFocus={() => {\n setIsFocused(true);\n setIsTooltipDismissed(false);\n }}\n onBlur={() => {\n setIsFocused(false);\n setHasUserInteractedAfterFocus(false);\n }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3 key={label} text={label} showPopover={showPopover} withoutAnimation>\n <span style={{ height: 20, width: 20 }}></span>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgFf;AAhFR,mBAAkE;AAElE,2BAA4B;AAC5B,yBAAoC;AACpC,oBAA4B;AAC5B,2BAA8B;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,YAAQ,wCAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,iBAAa;AAAA,IACjB,OAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,YAAY,qBAAqB,WAAW,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAEjF;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,mBAAmB,QAAQ;AAAA,EACpD;AAEA,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA,gCAAgC,CAAC;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,2BAA2B;AAAA,EACrC;AAEA,QAAM,eAAe,aAAa,aAAa,cAAc,CAAC;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACxC,iBAAe,YAAY,qBAAqB;AAAA,MAChD,iBAAe;AAAA,MACf,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAClB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,CAAC,MAAM;AACvB,YAAI,EAAE,QAAQ,YAAY,aAAa;AACrC,YAAE,gBAAgB;AAClB,gCAAsB,IAAI;AAAA,QAC5B,OAAO;AACL,uBAAa,IAAI;AACjB,gCAAsB,KAAK;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,qBAAa,IAAI;AACjB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,QAAQ,MAAM;AACZ,qBAAa,KAAK;AAClB,uCAA+B,KAAK;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,oCAAwB,MAAM,OAAO,aAA0B,kBAAgB,MAC9E,sDAAC,UAAK,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAG,GAAG,KADxB,KAElB;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["DSSliderV2Context"]
|
|
7
7
|
}
|
package/dist/cjs/parts/Track.js
CHANGED
|
@@ -45,7 +45,7 @@ const Track = ({ children, props, disabled }) => {
|
|
|
45
45
|
getOwnerProps,
|
|
46
46
|
getOwnerPropsArguments
|
|
47
47
|
} = (0, import_react.useContext)(import_DSSliderV2CTX.default);
|
|
48
|
-
const { ref,
|
|
48
|
+
const { ref, ...rest } = props;
|
|
49
49
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
50
50
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
51
51
|
import_styles.StyledTrack,
|
|
@@ -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, readOnly, withTickMarksValues, withTickMarks },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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 const { ref, ...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;ADkBnB;AAlBJ,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;AAEhC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,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/esm/parts/Thumb.js
CHANGED
|
@@ -70,7 +70,7 @@ const Thumb = ({ index, props, isDragged }) => {
|
|
|
70
70
|
},
|
|
71
71
|
getOwnerProps,
|
|
72
72
|
getOwnerPropsArguments,
|
|
73
|
-
children: /* @__PURE__ */ jsx(DSTooltipV3, { text: label, showPopover,
|
|
73
|
+
children: /* @__PURE__ */ jsx(DSTooltipV3, { text: label, showPopover, withoutAnimation: true, children: /* @__PURE__ */ jsx("span", { style: { height: 20, width: 20 } }) }, label)
|
|
74
74
|
}
|
|
75
75
|
);
|
|
76
76
|
};
|
|
@@ -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, { 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}
|
|
5
|
-
"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,
|
|
4
|
+
"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"],
|
|
5
|
+
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Track.js
CHANGED
|
@@ -12,7 +12,7 @@ const Track = ({ children, props, disabled }) => {
|
|
|
12
12
|
getOwnerProps,
|
|
13
13
|
getOwnerPropsArguments
|
|
14
14
|
} = useContext(DSSliderV2Context);
|
|
15
|
-
const { ref,
|
|
15
|
+
const { ref, ...rest } = props;
|
|
16
16
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17
17
|
/* @__PURE__ */ jsxs(
|
|
18
18
|
StyledTrack,
|
|
@@ -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, readOnly, withTickMarksValues, withTickMarks },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 const { ref, ...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;ACkBnB,mBAc2D,KAbzD,YADF;AAlBJ,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;AAEhC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,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
|
}
|
|
@@ -9,4 +9,13 @@ export declare const SLIDER_V2_SLOTS: {
|
|
|
9
9
|
readonly TICK_MARK_CONTAINER: "tick-mark-container";
|
|
10
10
|
readonly THUMB: "thumb";
|
|
11
11
|
};
|
|
12
|
-
export declare const SLIDER_V2_DATA_TESTID:
|
|
12
|
+
export declare const SLIDER_V2_DATA_TESTID: {
|
|
13
|
+
readonly ROOT: "ds-sliderv2-root";
|
|
14
|
+
readonly RANGE_WRAPPER: "ds-sliderv2-range-wrapper";
|
|
15
|
+
readonly TRACK: "ds-sliderv2-track";
|
|
16
|
+
readonly DOT: "ds-sliderv2-dot";
|
|
17
|
+
readonly DOT_CONTAINER: "ds-sliderv2-dot-container";
|
|
18
|
+
readonly TICK_MARK_VALUE: "ds-sliderv2-tick-mark-value";
|
|
19
|
+
readonly TICK_MARK_CONTAINER: "ds-sliderv2-tick-mark-container";
|
|
20
|
+
readonly THUMB: "ds-sliderv2-thumb";
|
|
21
|
+
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="prop-types" />
|
|
2
1
|
import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
3
2
|
import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
4
3
|
import { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
export declare const StyledWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
3
2
|
export declare const StyledRangeWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
4
3
|
export declare const StyledTrack: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-slider-v2",
|
|
3
|
-
"version": "3.53.0-alpha.
|
|
3
|
+
"version": "3.53.0-alpha.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Slider V 2",
|
|
6
6
|
"files": [
|
|
@@ -36,21 +36,22 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"react-range": "~1.
|
|
39
|
+
"react-range": "~1.10.0",
|
|
40
40
|
"uid": "^2.0.2",
|
|
41
|
-
"@elliemae/ds-grid": "3.53.0-alpha.
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.53.0-alpha.
|
|
43
|
-
"@elliemae/ds-system": "3.53.0-alpha.
|
|
44
|
-
"@elliemae/ds-tooltip-v3": "3.53.0-alpha.
|
|
45
|
-
"@elliemae/ds-truncated-tooltip-text": "3.53.0-alpha.
|
|
46
|
-
"@elliemae/ds-typescript-helpers": "3.53.0-alpha.
|
|
41
|
+
"@elliemae/ds-grid": "3.53.0-alpha.3",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.53.0-alpha.3",
|
|
43
|
+
"@elliemae/ds-system": "3.53.0-alpha.3",
|
|
44
|
+
"@elliemae/ds-tooltip-v3": "3.53.0-alpha.3",
|
|
45
|
+
"@elliemae/ds-truncated-tooltip-text": "3.53.0-alpha.3",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.53.0-alpha.3"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
49
|
+
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
50
50
|
"jest": "~29.7.0",
|
|
51
51
|
"lodash-es": "^4.17.21",
|
|
52
52
|
"styled-components": "~5.3.9",
|
|
53
|
-
"@elliemae/ds-monorepo-devops": "3.53.0-alpha.
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.53.0-alpha.3",
|
|
54
|
+
"@elliemae/ds-test-utils": "3.53.0-alpha.3"
|
|
54
55
|
},
|
|
55
56
|
"peerDependencies": {
|
|
56
57
|
"@testing-library/jest-dom": "^6.6.3",
|