@elliemae/ds-slider-v2 3.29.1 → 3.30.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/MainContent.js +2 -2
- package/dist/cjs/parts/MainContent.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +1 -1
- package/dist/cjs/styles.js.map +1 -1
- package/dist/esm/parts/MainContent.js +2 -2
- package/dist/esm/parts/MainContent.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +1 -1
- package/dist/esm/styles.js.map +1 -1
- package/dist/types/react-desc-prop-types.d.ts +2 -1
- package/package.json +9 -8
|
@@ -51,7 +51,6 @@ const MainContent = () => {
|
|
|
51
51
|
import_styles.StyledWrapper,
|
|
52
52
|
{
|
|
53
53
|
width: "100%",
|
|
54
|
-
style: { maxWidth: "100%" },
|
|
55
54
|
alignItems: "center",
|
|
56
55
|
rows: ["auto", "auto"],
|
|
57
56
|
getOwnerProps,
|
|
@@ -84,7 +83,8 @@ const MainContent = () => {
|
|
|
84
83
|
},
|
|
85
84
|
renderTrack: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Track.Track, { ...args }),
|
|
86
85
|
renderThumb: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Thumb.Thumb, { ...args }),
|
|
87
|
-
allowOverlap:
|
|
86
|
+
allowOverlap: true,
|
|
87
|
+
draggableTrack: true
|
|
88
88
|
}
|
|
89
89
|
)
|
|
90
90
|
}
|
|
@@ -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
|
|
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, 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;ADgDU;AAhDjC,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,eAAe,UAAU;AAAA,IACjF;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,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
|
}
|
|
@@ -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 { 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';\nimport type { WeakValidationMap } from 'react';\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 step: number;\n onValueChange: (newValue: ValueType<TMultiple>) => void;\n withTickMarks: boolean;\n withTickMarksValues: boolean;\n customTickMarksValues: string[];\n }\n\n export interface OptionalProps
|
|
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 } 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';\nimport type { WeakValidationMap } from 'react';\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 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};\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};\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;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;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,kCAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AACpB;AAEO,MAAM,4BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -97,7 +97,7 @@ const StyledTickMarksContainer = (0, import_ds_system.styled)("div", {
|
|
|
97
97
|
})`
|
|
98
98
|
display: flex;
|
|
99
99
|
justify-content: space-between;
|
|
100
|
-
// this next property-value
|
|
100
|
+
// this next property-value reverts the sanitize.css value
|
|
101
101
|
overflow-wrap: normal;
|
|
102
102
|
`;
|
|
103
103
|
const StyledThumb = (0, import_ds_system.styled)("div", { name: import_constants.DSSliderV2Name, slot: import_constants.SLIDER_V2_SLOTS.THUMB })`
|
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
|
|
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 })<{ disabled: boolean }>`\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
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;AAAA;AAAA,eAE1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACzB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAChC,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;AAAA;AAGF,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;AAAA,qBACxF,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3C,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;AAAA;AAG9C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGnG,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,sBAIxE,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAEjE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ3F,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,aAGlG,CAAC,UAAU,MAAM,MAAM,OAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,6 @@ const MainContent = () => {
|
|
|
18
18
|
StyledWrapper,
|
|
19
19
|
{
|
|
20
20
|
width: "100%",
|
|
21
|
-
style: { maxWidth: "100%" },
|
|
22
21
|
alignItems: "center",
|
|
23
22
|
rows: ["auto", "auto"],
|
|
24
23
|
getOwnerProps,
|
|
@@ -51,7 +50,8 @@ const MainContent = () => {
|
|
|
51
50
|
},
|
|
52
51
|
renderTrack: (args) => /* @__PURE__ */ jsx(Track, { ...args }),
|
|
53
52
|
renderThumb: (args) => /* @__PURE__ */ jsx(Thumb, { ...args }),
|
|
54
|
-
allowOverlap:
|
|
53
|
+
allowOverlap: true,
|
|
54
|
+
draggableTrack: true
|
|
55
55
|
}
|
|
56
56
|
)
|
|
57
57
|
}
|
|
@@ -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
|
|
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, 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;ACgDU;AAhDjC,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,eAAe,UAAU;AAAA,IACjF;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,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
|
}
|
|
@@ -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 { 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';\nimport type { WeakValidationMap } from 'react';\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 step: number;\n onValueChange: (newValue: ValueType<TMultiple>) => void;\n withTickMarks: boolean;\n withTickMarksValues: boolean;\n customTickMarksValues: string[];\n }\n\n export interface OptionalProps
|
|
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 } 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';\nimport type { WeakValidationMap } from 'react';\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 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};\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};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as WeakValidationMap<\n DSSliderV2T.Props<boolean>\n>;\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;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,UAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,UAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AACpB;AAEO,MAAM,4BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -57,7 +57,7 @@ const StyledTickMarksContainer = styled("div", {
|
|
|
57
57
|
})`
|
|
58
58
|
display: flex;
|
|
59
59
|
justify-content: space-between;
|
|
60
|
-
// this next property-value
|
|
60
|
+
// this next property-value reverts the sanitize.css value
|
|
61
61
|
overflow-wrap: normal;
|
|
62
62
|
`;
|
|
63
63
|
const StyledThumb = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })`
|
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
|
|
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 })<{ disabled: boolean }>`\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
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;AAAA;AAAA,eAE1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACzB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAChC,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;AAAA;AAGF,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;AAAA,qBACxF,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3C,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;AAAA;AAG9C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGnG,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,sBAIxE,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAEjE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ3F,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,aAGlG,CAAC,UAAU,MAAM,MAAM,OAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
1
2
|
import type { XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
|
|
2
3
|
import { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';
|
|
3
4
|
import type { WeakValidationMap } from 'react';
|
|
@@ -17,7 +18,7 @@ export declare namespace DSSliderV2T {
|
|
|
17
18
|
withTickMarksValues: boolean;
|
|
18
19
|
customTickMarksValues: string[];
|
|
19
20
|
}
|
|
20
|
-
interface OptionalProps extends PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {
|
|
21
|
+
interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {
|
|
21
22
|
className?: string;
|
|
22
23
|
}
|
|
23
24
|
interface Props<TMultiple extends boolean = false> extends Partial<DefaultProps<TMultiple>>, OptionalProps, XstyledProps, RequiredProps<TMultiple> {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-slider-v2",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.30.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Slider V 2",
|
|
6
6
|
"files": [
|
|
@@ -37,18 +37,19 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"react-range": "~1.8.14",
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-grid": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-truncated-tooltip-text": "3.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-grid": "3.30.0-next.0",
|
|
41
|
+
"@elliemae/ds-system": "3.30.0-next.0",
|
|
42
|
+
"@elliemae/ds-truncated-tooltip-text": "3.30.0-next.0",
|
|
43
|
+
"@elliemae/ds-tooltip": "3.30.0-next.0",
|
|
44
|
+
"@elliemae/ds-utilities": "3.30.0-next.0",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.30.0-next.0",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.30.0-next.0"
|
|
46
47
|
},
|
|
47
48
|
"devDependencies": {
|
|
48
49
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
49
50
|
"lodash": "^4.17.21",
|
|
50
51
|
"styled-components": "~5.3.9",
|
|
51
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
52
|
+
"@elliemae/ds-monorepo-devops": "3.30.0-next.0"
|
|
52
53
|
},
|
|
53
54
|
"peerDependencies": {
|
|
54
55
|
"@testing-library/jest-dom": "~5.16.4",
|