@elliemae/ds-slider-v2 3.40.1-rc.0 → 3.41.0-rc.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/config/useValidateProps.js.map +2 -2
- package/dist/cjs/parts/MainContent.js +2 -1
- package/dist/cjs/parts/MainContent.js.map +2 -2
- package/dist/cjs/parts/Thumb.js +3 -2
- package/dist/cjs/parts/Thumb.js.map +2 -2
- package/dist/cjs/parts/Track.js +2 -1
- package/dist/cjs/parts/Track.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +5 -4
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/config/useValidateProps.js.map +2 -2
- package/dist/esm/parts/MainContent.js +2 -1
- package/dist/esm/parts/MainContent.js.map +2 -2
- package/dist/esm/parts/Thumb.js +4 -3
- package/dist/esm/parts/Thumb.js.map +2 -2
- package/dist/esm/parts/Track.js +2 -1
- package/dist/esm/parts/Track.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +5 -4
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/config/useValidateProps.d.ts +2 -2
- package/dist/types/react-desc-prop-types.d.ts +2 -3
- package/dist/types/styles.d.ts +2 -0
- package/dist/types/tests/a11y.test.d.ts +1 -0
- package/package.json +8 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSSliderV2T } from '../react-desc-prop-types.js';\nimport { DSSliderV2Name } from '../constants/index.js';\n\nexport const useValidateProps = <TMultiple extends boolean>(\n props: DSSliderV2T.InternalProps<TMultiple>,\n propTypes: ValidationMap<unknown>,\n { tickMarkPositions }: { tickMarkPositions: number[] },\n): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSSliderV2Name);\n\n if (props.customTickMarksValues.length && props.customTickMarksValues.length !== tickMarkPositions.length) {\n throw new Error(\n `The length of the customTickMarksValues prop must be equal to the length of the tickMarkPositions array (${tickMarkPositions.length}).`,\n );\n }\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AAEnE,uBAA+B;AAExB,MAAM,mBAAmB,CAC9B,OACA,WACA,EAAE,kBAAkB,MACX;AAET,8DAA+B,OAAO,WAAW,+BAAc;AAE/D,MAAI,MAAM,sBAAsB,UAAU,MAAM,sBAAsB,WAAW,kBAAkB,QAAQ;AACzG,UAAM,IAAI;AAAA,MACR,4GAA4G,kBAAkB,MAAM;AAAA,IACtI;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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, onValueChange, className },
|
|
44
|
+
propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, onValueChange, className },
|
|
45
45
|
xstyledProps,
|
|
46
46
|
rangeValues,
|
|
47
47
|
getOwnerProps,
|
|
@@ -75,6 +75,7 @@ const MainContent = () => {
|
|
|
75
75
|
values: rangeValues,
|
|
76
76
|
disabled,
|
|
77
77
|
onChange: (values) => {
|
|
78
|
+
if (applyAriaDisabled) return;
|
|
78
79
|
if (values.length === 1) {
|
|
79
80
|
onValueChange(values[0]);
|
|
80
81
|
} else {
|
|
@@ -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, 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 (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;
|
|
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;",
|
|
6
6
|
"names": ["DSSliderV2Context"]
|
|
7
7
|
}
|
package/dist/cjs/parts/Thumb.js
CHANGED
|
@@ -55,7 +55,8 @@ const Thumb = ({ index, props, isDragged }) => {
|
|
|
55
55
|
...rest,
|
|
56
56
|
style: { ...rest.style, zIndex: void 0 },
|
|
57
57
|
innerRef: ref,
|
|
58
|
-
disabled
|
|
58
|
+
disabled,
|
|
59
|
+
applyAriaDisabled,
|
|
59
60
|
"aria-disabled": disabled || applyAriaDisabled,
|
|
60
61
|
onMouseEnter: () => {
|
|
61
62
|
setIsHovered(true);
|
|
@@ -73,7 +74,7 @@ const Thumb = ({ index, props, isDragged }) => {
|
|
|
73
74
|
showPopover: isDragged || isHovered || isFocused,
|
|
74
75
|
customOffset: [0, 20],
|
|
75
76
|
withoutAnimation: true,
|
|
76
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {})
|
|
77
78
|
},
|
|
78
79
|
label
|
|
79
80
|
)
|
|
@@ -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, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\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 return (\n <StyledThumb\n {...rest}\n style={{ ...rest.style, zIndex: undefined }}\n innerRef={ref}\n disabled={disabled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\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 return (\n <StyledThumb\n {...rest}\n style={{ ...rest.style, zIndex: undefined }}\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 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;AD+Cf;AA/CR,mBAA4C;AAE5C,wBAA4B;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,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,EAAE,GAAG,KAAK,OAAO,QAAQ,OAAU;AAAA,MAC1C,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,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
|
@@ -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 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
|
|
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,qBAAqB,cAAc;AAAA,IAC9F;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,
|
|
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 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}\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,qBAAqB,cAAc;AAAA,IAC9F;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;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;",
|
|
6
6
|
"names": ["DSSliderV2Context"]
|
|
7
7
|
}
|
|
@@ -61,7 +61,7 @@ const DSSliderV2PropTypes = {
|
|
|
61
61
|
withTickMarksValues: import_ds_props_helpers.PropTypes.bool.description("add step value to tickmark").defaultValue(false),
|
|
62
62
|
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
63
|
applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
|
|
64
|
-
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION"
|
|
64
|
+
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
65
65
|
).defaultValue(false)
|
|
66
66
|
};
|
|
67
67
|
const DSSliderV2PropTypesSchema = DSSliderV2PropTypes;
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-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;ADIvB,8BAKO;AACP,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -51,7 +51,7 @@ const StyledTrack = (0, import_ds_system.styled)("div", { name: import_constants
|
|
|
51
51
|
width: 100%;
|
|
52
52
|
min-width: ${(props) => props.theme.space.xl};
|
|
53
53
|
border-radius: ${(props) => props.theme.space.xxxs};
|
|
54
|
-
background: ${(props) => props.disabled ? props.theme.colors.neutral[100] : (0, import_react_range.getTrackBackground)({
|
|
54
|
+
background: ${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : (0, import_react_range.getTrackBackground)({
|
|
55
55
|
values: props.rangeValues,
|
|
56
56
|
colors: props.multiple ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
|
|
57
57
|
min: props.minValue,
|
|
@@ -104,9 +104,10 @@ const StyledThumb = (0, import_ds_system.styled)("div", { name: import_constants
|
|
|
104
104
|
height: 20px;
|
|
105
105
|
width: 20px;
|
|
106
106
|
top: 0;
|
|
107
|
-
background-color: ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
|
|
107
|
+
background-color: ${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
|
|
108
108
|
border-radius: 10px;
|
|
109
|
-
border: 1px solid
|
|
109
|
+
border: 1px solid
|
|
110
|
+
${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
|
|
110
111
|
|
|
111
112
|
:focus {
|
|
112
113
|
border: 2px solid brand-700;
|
|
@@ -114,7 +115,7 @@ const StyledThumb = (0, import_ds_system.styled)("div", { name: import_constants
|
|
|
114
115
|
}
|
|
115
116
|
|
|
116
117
|
:hover {
|
|
117
|
-
background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
|
|
118
|
+
background-color: ${({ disabled, applyAriaDisabled, theme }) => disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
|
|
118
119
|
}
|
|
119
120
|
|
|
120
121
|
z-index: ${(props) => props.theme.zIndex.tooltip};
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n width: ${(props) => props.theme.space.xxxs};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n display: flex;\n justify-content: space-between;\n // this next property-value reverts the sanitize.css value\n overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n disabled: boolean;\n}>`\n height: 20px;\n width: 20px;\n top: 0;\n background-color: ${(props) =>\n props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n border-radius: 10px;\n border: 1px solid
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAmC;AACnC,qBAAqB;AACrB,uBAAuB;AACvB,uBAAgD;AAEzC,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,KAAK,CAAC;AAEvF,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,cAAc,CAAC;AAErG,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,MAAM,CAAC;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled || props.applyAriaDisabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n width: ${(props) => props.theme.space.xxxs};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n display: flex;\n justify-content: space-between;\n // this next property-value reverts the sanitize.css value\n overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n}>`\n height: 20px;\n width: 20px;\n top: 0;\n background-color: ${(props) =>\n props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n border-radius: 10px;\n border: 1px solid\n ${(props) =>\n props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};\n\n :focus {\n border: 2px solid brand-700;\n outline: unset;\n }\n\n :hover {\n background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};\n }\n\n z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSSliderV2T } from '../react-desc-prop-types.js';\nimport { DSSliderV2Name } from '../constants/index.js';\n\nexport const useValidateProps = <TMultiple extends boolean>(\n props: DSSliderV2T.InternalProps<TMultiple>,\n propTypes: ValidationMap<unknown>,\n { tickMarkPositions }: { tickMarkPositions: number[] },\n): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSSliderV2Name);\n\n if (props.customTickMarksValues.length && props.customTickMarksValues.length !== tickMarkPositions.length) {\n throw new Error(\n `The length of the customTickMarksValues prop must be equal to the length of the tickMarkPositions array (${tickMarkPositions.length}).`,\n );\n }\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAA0D;AAEnE,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,CAC9B,OACA,WACA,EAAE,kBAAkB,MACX;AAET,iCAA+B,OAAO,WAAW,cAAc;AAE/D,MAAI,MAAM,sBAAsB,UAAU,MAAM,sBAAsB,WAAW,kBAAkB,QAAQ;AACzG,UAAM,IAAI;AAAA,MACR,4GAA4G,kBAAkB,MAAM;AAAA,IACtI;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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, onValueChange, className },
|
|
11
|
+
propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, onValueChange, className },
|
|
12
12
|
xstyledProps,
|
|
13
13
|
rangeValues,
|
|
14
14
|
getOwnerProps,
|
|
@@ -42,6 +42,7 @@ const MainContent = () => {
|
|
|
42
42
|
values: rangeValues,
|
|
43
43
|
disabled,
|
|
44
44
|
onChange: (values) => {
|
|
45
|
+
if (applyAriaDisabled) return;
|
|
45
46
|
if (values.length === 1) {
|
|
46
47
|
onValueChange(values[0]);
|
|
47
48
|
} else {
|
|
@@ -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, 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 (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;
|
|
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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Thumb.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useContext, useState } from "react";
|
|
4
4
|
import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
|
5
5
|
import { conformedThumbLabel } from "../utils/thumbLabels.js";
|
|
@@ -22,7 +22,8 @@ const Thumb = ({ index, props, isDragged }) => {
|
|
|
22
22
|
...rest,
|
|
23
23
|
style: { ...rest.style, zIndex: void 0 },
|
|
24
24
|
innerRef: ref,
|
|
25
|
-
disabled
|
|
25
|
+
disabled,
|
|
26
|
+
applyAriaDisabled,
|
|
26
27
|
"aria-disabled": disabled || applyAriaDisabled,
|
|
27
28
|
onMouseEnter: () => {
|
|
28
29
|
setIsHovered(true);
|
|
@@ -40,7 +41,7 @@ const Thumb = ({ index, props, isDragged }) => {
|
|
|
40
41
|
showPopover: isDragged || isHovered || isFocused,
|
|
41
42
|
customOffset: [0, 20],
|
|
42
43
|
withoutAnimation: true,
|
|
43
|
-
children: /* @__PURE__ */ jsx(
|
|
44
|
+
children: /* @__PURE__ */ jsx("span", {})
|
|
44
45
|
},
|
|
45
46
|
label
|
|
46
47
|
)
|
|
@@ -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, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\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 return (\n <StyledThumb\n {...rest}\n style={{ ...rest.style, zIndex: undefined }}\n innerRef={ref}\n disabled={disabled
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\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 return (\n <StyledThumb\n {...rest}\n style={{ ...rest.style, zIndex: undefined }}\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 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;AC+Cf;AA/CR,SAAgB,YAAY,gBAAgB;AAE5C,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,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,EAAE,GAAG,KAAK,OAAO,QAAQ,OAAU;AAAA,MAC1C,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,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
|
@@ -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 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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkBnB,
|
|
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 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}\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,qBAAqB,cAAc;AAAA,IAC9F;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;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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,7 @@ const DSSliderV2PropTypes = {
|
|
|
31
31
|
withTickMarksValues: PropTypes.bool.description("add step value to tickmark").defaultValue(false),
|
|
32
32
|
customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description("Explicitly set tickmark values for custom tickmarks").defaultValue([]),
|
|
33
33
|
applyAriaDisabled: PropTypes.bool.description(
|
|
34
|
-
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION"
|
|
34
|
+
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
35
35
|
).defaultValue(false)
|
|
36
36
|
};
|
|
37
37
|
const DSSliderV2PropTypesSchema = DSSliderV2PropTypes;
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-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;ACIvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -11,7 +11,7 @@ const StyledTrack = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.
|
|
|
11
11
|
width: 100%;
|
|
12
12
|
min-width: ${(props) => props.theme.space.xl};
|
|
13
13
|
border-radius: ${(props) => props.theme.space.xxxs};
|
|
14
|
-
background: ${(props) => props.disabled ? props.theme.colors.neutral[100] : getTrackBackground({
|
|
14
|
+
background: ${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : getTrackBackground({
|
|
15
15
|
values: props.rangeValues,
|
|
16
16
|
colors: props.multiple ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
|
|
17
17
|
min: props.minValue,
|
|
@@ -64,9 +64,10 @@ const StyledThumb = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.
|
|
|
64
64
|
height: 20px;
|
|
65
65
|
width: 20px;
|
|
66
66
|
top: 0;
|
|
67
|
-
background-color: ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
|
|
67
|
+
background-color: ${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
|
|
68
68
|
border-radius: 10px;
|
|
69
|
-
border: 1px solid
|
|
69
|
+
border: 1px solid
|
|
70
|
+
${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
|
|
70
71
|
|
|
71
72
|
:focus {
|
|
72
73
|
border: 2px solid brand-700;
|
|
@@ -74,7 +75,7 @@ const StyledThumb = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.
|
|
|
74
75
|
}
|
|
75
76
|
|
|
76
77
|
:hover {
|
|
77
|
-
background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
|
|
78
|
+
background-color: ${({ disabled, applyAriaDisabled, theme }) => disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
|
|
78
79
|
}
|
|
79
80
|
|
|
80
81
|
z-index: ${(props) => props.theme.zIndex.tooltip};
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n width: ${(props) => props.theme.space.xxxs};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n display: flex;\n justify-content: space-between;\n // this next property-value reverts the sanitize.css value\n overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n disabled: boolean;\n}>`\n height: 20px;\n width: 20px;\n top: 0;\n background-color: ${(props) =>\n props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n border-radius: 10px;\n border: 1px solid
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,KAAK,CAAC;AAEvF,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAErG,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled || props.applyAriaDisabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n width: ${(props) => props.theme.space.xxxs};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n display: flex;\n justify-content: space-between;\n // this next property-value reverts the sanitize.css value\n overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n}>`\n height: 20px;\n width: 20px;\n top: 0;\n background-color: ${(props) =>\n props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n border-radius: 10px;\n border: 1px solid\n ${(props) =>\n props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};\n\n :focus {\n border: 2px solid brand-700;\n outline: unset;\n }\n\n :hover {\n background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};\n }\n\n z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type ValidationMap } from '@elliemae/ds-props-helpers';
|
|
2
2
|
import { type DSSliderV2T } from '../react-desc-prop-types.js';
|
|
3
|
-
export declare const useValidateProps: <TMultiple extends boolean>(props: DSSliderV2T.InternalProps<TMultiple>, propTypes:
|
|
3
|
+
export declare const useValidateProps: <TMultiple extends boolean>(props: DSSliderV2T.InternalProps<TMultiple>, propTypes: ValidationMap<unknown>, { tickMarkPositions }: {
|
|
4
4
|
tickMarkPositions: number[];
|
|
5
5
|
}) => void;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type { WeakValidationMap } from 'react';
|
|
2
1
|
import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
3
|
-
import type { XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
|
|
2
|
+
import type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
|
|
4
3
|
import { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';
|
|
5
4
|
export declare namespace DSSliderV2T {
|
|
6
5
|
type ValueType<TMultiple extends boolean> = TMultiple extends true ? [number, number] : TMultiple extends false ? number : number | [number, number];
|
|
@@ -29,4 +28,4 @@ export declare namespace DSSliderV2T {
|
|
|
29
28
|
}
|
|
30
29
|
export declare const defaultProps: DSSliderV2T.DefaultProps<boolean>;
|
|
31
30
|
export declare const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>>;
|
|
32
|
-
export declare const DSSliderV2PropTypesSchema:
|
|
31
|
+
export declare const DSSliderV2PropTypesSchema: ValidationMap<DSSliderV2T.Props<boolean>>;
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
|
|
|
3
3
|
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
4
|
export declare const StyledTrack: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
5
5
|
disabled: boolean;
|
|
6
|
+
applyAriaDisabled: boolean;
|
|
6
7
|
multiple: boolean;
|
|
7
8
|
minValue: number;
|
|
8
9
|
maxValue: number;
|
|
@@ -18,4 +19,5 @@ export declare const StyledTickMarkValue: import("styled-components").StyledComp
|
|
|
18
19
|
export declare const StyledTickMarksContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
19
20
|
export declare const StyledThumb: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
20
21
|
disabled: boolean;
|
|
22
|
+
applyAriaDisabled: boolean;
|
|
21
23
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
@@ -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.
|
|
3
|
+
"version": "3.41.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Slider V 2",
|
|
6
6
|
"files": [
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-range": "~1.8.14",
|
|
40
40
|
"uid": "^2.0.2",
|
|
41
|
-
"@elliemae/ds-grid": "3.
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-truncated-tooltip-text": "3.
|
|
46
|
-
"@elliemae/ds-typescript-helpers": "3.
|
|
41
|
+
"@elliemae/ds-grid": "3.41.0-rc.1",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.41.0-rc.1",
|
|
43
|
+
"@elliemae/ds-tooltip": "3.41.0-rc.1",
|
|
44
|
+
"@elliemae/ds-system": "3.41.0-rc.1",
|
|
45
|
+
"@elliemae/ds-truncated-tooltip-text": "3.41.0-rc.1",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.41.0-rc.1"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
50
50
|
"lodash": "^4.17.21",
|
|
51
51
|
"styled-components": "~5.3.9",
|
|
52
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
52
|
+
"@elliemae/ds-monorepo-devops": "3.41.0-rc.1"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@testing-library/jest-dom": "~5.16.4",
|