@elliemae/ds-slider-v2 3.40.0-rc.0 → 3.40.0-rc.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/parts/Thumb.js +3 -2
- package/dist/cjs/parts/Thumb.js.map +2 -2
- package/dist/cjs/parts/Track.js +3 -3
- package/dist/cjs/parts/Track.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +6 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid.js +4 -2
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid.js.map +2 -2
- package/dist/esm/parts/Thumb.js +3 -2
- package/dist/esm/parts/Thumb.js.map +2 -2
- package/dist/esm/parts/Track.js +3 -3
- package/dist/esm/parts/Track.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +6 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-slider-v2-valid.js +4 -2
- package/dist/esm/typescript-testing/typescript-slider-v2-valid.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +2 -1
- package/package.json +8 -8
package/dist/cjs/parts/Thumb.js
CHANGED
|
@@ -40,7 +40,7 @@ var import_styles = require("../styles.js");
|
|
|
40
40
|
var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
|
|
41
41
|
const Thumb = ({ index, props, isDragged }) => {
|
|
42
42
|
const {
|
|
43
|
-
propsWithDefault: { disabled, customTickMarksValues, step, minValue },
|
|
43
|
+
propsWithDefault: { disabled, applyAriaDisabled, customTickMarksValues, step, minValue },
|
|
44
44
|
rangeValues,
|
|
45
45
|
getOwnerProps,
|
|
46
46
|
getOwnerPropsArguments
|
|
@@ -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: disabled || applyAriaDisabled,
|
|
59
|
+
"aria-disabled": disabled || applyAriaDisabled,
|
|
59
60
|
onMouseEnter: () => {
|
|
60
61
|
setIsHovered(true);
|
|
61
62
|
setIsFocused(false);
|
|
@@ -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 { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport
|
|
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 || 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 <></>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Cf;AA9CR,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,UAAU,YAAY;AAAA,MACtB,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,qFAAE;AAAA;AAAA,QANG;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["DSSliderV2Context"]
|
|
7
7
|
}
|
package/dist/cjs/parts/Track.js
CHANGED
|
@@ -40,7 +40,7 @@ var import_styles = require("../styles.js");
|
|
|
40
40
|
var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
|
|
41
41
|
const Track = ({ children, props, disabled }) => {
|
|
42
42
|
const {
|
|
43
|
-
propsWithDefault: { minValue, maxValue, withTickMarksValues, withTickMarks },
|
|
43
|
+
propsWithDefault: { minValue, maxValue, applyAriaDisabled, withTickMarksValues, withTickMarks },
|
|
44
44
|
rangeValues,
|
|
45
45
|
getOwnerProps,
|
|
46
46
|
getOwnerPropsArguments
|
|
@@ -52,7 +52,7 @@ const Track = ({ children, props, disabled }) => {
|
|
|
52
52
|
{
|
|
53
53
|
...rest,
|
|
54
54
|
innerRef: ref,
|
|
55
|
-
disabled,
|
|
55
|
+
disabled: disabled || applyAriaDisabled,
|
|
56
56
|
minValue,
|
|
57
57
|
maxValue,
|
|
58
58
|
rangeValues,
|
|
@@ -61,7 +61,7 @@ const Track = ({ children, props, disabled }) => {
|
|
|
61
61
|
getOwnerPropsArguments,
|
|
62
62
|
children: [
|
|
63
63
|
children,
|
|
64
|
-
withTickMarks && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TickMarks.TickMarks, {})
|
|
64
|
+
withTickMarks && (!disabled || !applyAriaDisabled) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TickMarks.TickMarks, {})
|
|
65
65
|
]
|
|
66
66
|
}
|
|
67
67
|
),
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAlBJ,mBAAkC;
|
|
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 || 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,UAAU,YAAY;AAAA,QACtB;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
|
}
|
|
@@ -44,7 +44,8 @@ const defaultProps = {
|
|
|
44
44
|
withTickMarks: false,
|
|
45
45
|
withTickMarksValues: false,
|
|
46
46
|
customTickMarksValues: [],
|
|
47
|
-
multiple: false
|
|
47
|
+
multiple: false,
|
|
48
|
+
applyAriaDisabled: false
|
|
48
49
|
};
|
|
49
50
|
const DSSliderV2PropTypes = {
|
|
50
51
|
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSSliderV2Name, import_constants.SLIDER_V2_SLOTS),
|
|
@@ -58,7 +59,10 @@ const DSSliderV2PropTypes = {
|
|
|
58
59
|
}),
|
|
59
60
|
withTickMarks: import_ds_props_helpers.PropTypes.bool.description("add tick marks between steps").defaultValue(false),
|
|
60
61
|
withTickMarksValues: import_ds_props_helpers.PropTypes.bool.description("add step value to tickmark").defaultValue(false),
|
|
61
|
-
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([])
|
|
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
|
+
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"
|
|
65
|
+
).defaultValue(false)
|
|
62
66
|
};
|
|
63
67
|
const DSSliderV2PropTypesSchema = DSSliderV2PropTypes;
|
|
64
68
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { XstyledProps, DSPropTypesSchema } 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';\
|
|
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 { WeakValidationMap } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { XstyledProps, DSPropTypesSchema } 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 WeakValidationMap<\n DSSliderV2T.Props<boolean>\n>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,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.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 })<{
|
|
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,YAQlF,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,gBACpC,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,QAC9B,uCAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,WACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC,CAAC;AAAA;AAGH,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,qBAC1F,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA;AAG/C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA,WAEpC,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,WACjC,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAGrG,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,MAAM,CAAC;AAAA;AAAA;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 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 ${(props) => (props.disabled ? 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, theme }) => (disabled ? 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;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,YAQlF,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,gBACpC,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,QAC9B,uCAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,WACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC,CAAC;AAAA;AAGH,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,qBAC1F,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA;AAG/C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA,WAEpC,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,WACjC,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAGrG,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,sBAMxE,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,sBAElE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ7F,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAE;AAAA;AAAA;AAAA,aAGpG,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,8 @@ const testRequiredProps = {
|
|
|
31
31
|
};
|
|
32
32
|
const testOptionalProps = {};
|
|
33
33
|
const testPartialDefaults = {
|
|
34
|
-
multiple: false
|
|
34
|
+
multiple: false,
|
|
35
|
+
applyAriaDisabled: false
|
|
35
36
|
};
|
|
36
37
|
const testProps = {
|
|
37
38
|
...testRequiredProps,
|
|
@@ -51,7 +52,8 @@ const testCompleteDefaults = {
|
|
|
51
52
|
},
|
|
52
53
|
withTickMarks: false,
|
|
53
54
|
withTickMarksValues: false,
|
|
54
|
-
customTickMarksValues: []
|
|
55
|
+
customTickMarksValues: [],
|
|
56
|
+
applyAriaDisabled: false
|
|
55
57
|
};
|
|
56
58
|
const testInternalProps = {
|
|
57
59
|
...testRequiredProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props<boolean>;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps<boolean>;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps<boolean>;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps<boolean>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: false,\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: false,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n {/* multiple auto inference works */}\n <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props<boolean>;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps<boolean>;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps<boolean>;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps<boolean>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: false,\n applyAriaDisabled: false,\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: false,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n {/* multiple auto inference works */}\n <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACmFrB;AAlFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AACrB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,sBAAsB,CAAC,UAAkB;AAAC;AAChD,MAAM,wBAAwB,CAAC,UAA4B;AAAC;AAE5D,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,EAEtF,4CAAC,uBAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Thumb.js
CHANGED
|
@@ -7,7 +7,7 @@ import { StyledThumb } from "../styles.js";
|
|
|
7
7
|
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
|
8
8
|
const Thumb = ({ index, props, isDragged }) => {
|
|
9
9
|
const {
|
|
10
|
-
propsWithDefault: { disabled, customTickMarksValues, step, minValue },
|
|
10
|
+
propsWithDefault: { disabled, applyAriaDisabled, customTickMarksValues, step, minValue },
|
|
11
11
|
rangeValues,
|
|
12
12
|
getOwnerProps,
|
|
13
13
|
getOwnerPropsArguments
|
|
@@ -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: disabled || applyAriaDisabled,
|
|
26
|
+
"aria-disabled": disabled || applyAriaDisabled,
|
|
26
27
|
onMouseEnter: () => {
|
|
27
28
|
setIsHovered(true);
|
|
28
29
|
setIsFocused(false);
|
|
@@ -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 { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport
|
|
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 || 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 <></>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8Cf;AA9CR,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,UAAU,YAAY;AAAA,MACtB,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,0CAAE;AAAA;AAAA,QANG;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Track.js
CHANGED
|
@@ -7,7 +7,7 @@ import { StyledTrack } from "../styles.js";
|
|
|
7
7
|
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
|
8
8
|
const Track = ({ children, props, disabled }) => {
|
|
9
9
|
const {
|
|
10
|
-
propsWithDefault: { minValue, maxValue, withTickMarksValues, withTickMarks },
|
|
10
|
+
propsWithDefault: { minValue, maxValue, applyAriaDisabled, withTickMarksValues, withTickMarks },
|
|
11
11
|
rangeValues,
|
|
12
12
|
getOwnerProps,
|
|
13
13
|
getOwnerPropsArguments
|
|
@@ -19,7 +19,7 @@ const Track = ({ children, props, disabled }) => {
|
|
|
19
19
|
{
|
|
20
20
|
...rest,
|
|
21
21
|
innerRef: ref,
|
|
22
|
-
disabled,
|
|
22
|
+
disabled: disabled || applyAriaDisabled,
|
|
23
23
|
minValue,
|
|
24
24
|
maxValue,
|
|
25
25
|
rangeValues,
|
|
@@ -28,7 +28,7 @@ const Track = ({ children, props, disabled }) => {
|
|
|
28
28
|
getOwnerPropsArguments,
|
|
29
29
|
children: [
|
|
30
30
|
children,
|
|
31
|
-
withTickMarks && !disabled && /* @__PURE__ */ jsx(TickMarks, {})
|
|
31
|
+
withTickMarks && (!disabled || !applyAriaDisabled) && /* @__PURE__ */ jsx(TickMarks, {})
|
|
32
32
|
]
|
|
33
33
|
}
|
|
34
34
|
),
|
|
@@ -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 {
|
|
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 || 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,mBAa2D,KAZzD,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,UAAU,YAAY;AAAA,QACtB;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
|
}
|
|
@@ -14,7 +14,8 @@ const defaultProps = {
|
|
|
14
14
|
withTickMarks: false,
|
|
15
15
|
withTickMarksValues: false,
|
|
16
16
|
customTickMarksValues: [],
|
|
17
|
-
multiple: false
|
|
17
|
+
multiple: false,
|
|
18
|
+
applyAriaDisabled: false
|
|
18
19
|
};
|
|
19
20
|
const DSSliderV2PropTypes = {
|
|
20
21
|
...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),
|
|
@@ -28,7 +29,10 @@ const DSSliderV2PropTypes = {
|
|
|
28
29
|
}),
|
|
29
30
|
withTickMarks: PropTypes.bool.description("add tick marks between steps").defaultValue(false),
|
|
30
31
|
withTickMarksValues: PropTypes.bool.description("add step value to tickmark").defaultValue(false),
|
|
31
|
-
customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description("Explicitly set tickmark values for custom tickmarks").defaultValue([])
|
|
32
|
+
customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description("Explicitly set tickmark values for custom tickmarks").defaultValue([]),
|
|
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"
|
|
35
|
+
).defaultValue(false)
|
|
32
36
|
};
|
|
33
37
|
const DSSliderV2PropTypesSchema = DSSliderV2PropTypes;
|
|
34
38
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { XstyledProps, DSPropTypesSchema } 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';\
|
|
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 { WeakValidationMap } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { XstyledProps, DSPropTypesSchema } 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 WeakValidationMap<\n DSSliderV2T.Props<boolean>\n>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKvB;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.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 })<{
|
|
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,YAQlF,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,gBACpC,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,IAC9B,mBAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,WACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC,CAAC;AAAA;AAGH,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,qBAC1F,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA;AAG/C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA,WAEpC,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,WACjC,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAGrG,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA;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 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 ${(props) => (props.disabled ? 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, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n }\n\n z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n"],
|
|
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,YAQlF,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,gBACpC,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,IAC9B,mBAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,WACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC,CAAC;AAAA;AAGH,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,qBAC1F,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA;AAG/C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA,WAEpC,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,WACjC,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAGrG,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,sBAMxE,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,sBAElE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ7F,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAE;AAAA;AAAA;AAAA,aAGpG,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,7 +8,8 @@ const testRequiredProps = {
|
|
|
8
8
|
};
|
|
9
9
|
const testOptionalProps = {};
|
|
10
10
|
const testPartialDefaults = {
|
|
11
|
-
multiple: false
|
|
11
|
+
multiple: false,
|
|
12
|
+
applyAriaDisabled: false
|
|
12
13
|
};
|
|
13
14
|
const testProps = {
|
|
14
15
|
...testRequiredProps,
|
|
@@ -28,7 +29,8 @@ const testCompleteDefaults = {
|
|
|
28
29
|
},
|
|
29
30
|
withTickMarks: false,
|
|
30
31
|
withTickMarksValues: false,
|
|
31
|
-
customTickMarksValues: []
|
|
32
|
+
customTickMarksValues: [],
|
|
33
|
+
applyAriaDisabled: false
|
|
32
34
|
};
|
|
33
35
|
const testInternalProps = {
|
|
34
36
|
...testRequiredProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props<boolean>;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps<boolean>;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps<boolean>;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps<boolean>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: false,\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: false,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n {/* multiple auto inference works */}\n <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n </>\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props<boolean>;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps<boolean>;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps<boolean>;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps<boolean>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: false,\n applyAriaDisabled: false,\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: false,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n {/* multiple auto inference works */}\n <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmFrB,mBAEE,KAFF;AAlFF,SAAS,kBAAkB;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AACrB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,sBAAsB,CAAC,UAAkB;AAAC;AAChD,MAAM,wBAAwB,CAAC,UAA4B;AAAC;AAE5D,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,EAEtF,oBAAC,cAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import type { WeakValidationMap } from 'react';
|
|
1
2
|
import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
2
3
|
import type { XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
|
|
3
4
|
import { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';
|
|
4
|
-
import type { WeakValidationMap } from 'react';
|
|
5
5
|
export declare namespace DSSliderV2T {
|
|
6
6
|
type ValueType<TMultiple extends boolean> = TMultiple extends true ? [number, number] : TMultiple extends false ? number : number | [number, number];
|
|
7
7
|
interface RequiredProps<TMultiple extends boolean> {
|
|
@@ -12,6 +12,7 @@ export declare namespace DSSliderV2T {
|
|
|
12
12
|
interface DefaultProps<TMultiple extends boolean> {
|
|
13
13
|
multiple: TMultiple;
|
|
14
14
|
disabled: boolean;
|
|
15
|
+
applyAriaDisabled: boolean;
|
|
15
16
|
step: number;
|
|
16
17
|
onValueChange: (newValue: ValueType<TMultiple>) => void;
|
|
17
18
|
withTickMarks: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-slider-v2",
|
|
3
|
-
"version": "3.40.0-rc.
|
|
3
|
+
"version": "3.40.0-rc.2",
|
|
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-props-helpers": "3.40.0-rc.
|
|
42
|
-
"@elliemae/ds-system": "3.40.0-rc.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-truncated-tooltip-text": "3.40.0-rc.
|
|
45
|
-
"@elliemae/ds-tooltip": "3.40.0-rc.
|
|
46
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.40.0-rc.2",
|
|
42
|
+
"@elliemae/ds-system": "3.40.0-rc.2",
|
|
43
|
+
"@elliemae/ds-grid": "3.40.0-rc.2",
|
|
44
|
+
"@elliemae/ds-truncated-tooltip-text": "3.40.0-rc.2",
|
|
45
|
+
"@elliemae/ds-tooltip": "3.40.0-rc.2",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.40.0-rc.2"
|
|
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.40.0-rc.
|
|
52
|
+
"@elliemae/ds-monorepo-devops": "3.40.0-rc.2"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@testing-library/jest-dom": "~5.16.4",
|