@elliemae/ds-slider-v2 3.52.0-rc.21 → 3.52.0-rc.23
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/TickMarksValues.js +16 -2
- package/dist/cjs/parts/TickMarksValues.js.map +2 -2
- package/dist/cjs/styles.js +8 -2
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/parts/TickMarksValues.js +16 -2
- package/dist/esm/parts/TickMarksValues.js.map +2 -2
- package/dist/esm/styles.js +8 -2
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/styles.d.ts +4 -1
- package/package.json +9 -9
|
@@ -39,13 +39,18 @@ var import_inRange = require("../utils/inRange.js");
|
|
|
39
39
|
var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
|
|
40
40
|
const TickMarksValues = () => {
|
|
41
41
|
const {
|
|
42
|
-
propsWithDefault: { customTickMarksValues },
|
|
42
|
+
propsWithDefault: { customTickMarksValues, maxValue, minValue },
|
|
43
43
|
rangeValues,
|
|
44
44
|
tickMarkPositions,
|
|
45
45
|
instanceUid,
|
|
46
46
|
getOwnerProps,
|
|
47
47
|
getOwnerPropsArguments
|
|
48
48
|
} = (0, import_react.useContext)(import_DSSliderV2CTX.default);
|
|
49
|
+
const { columnWidth } = (0, import_react.useMemo)(() => {
|
|
50
|
+
const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);
|
|
51
|
+
const calculatedColumnWidthPercentage = `${distanceBetweenDots / (maxValue - minValue) * 100}%`;
|
|
52
|
+
return { columnWidth: calculatedColumnWidthPercentage };
|
|
53
|
+
}, [maxValue, minValue, tickMarkPositions.length]);
|
|
49
54
|
const markValues = (0, import_react.useMemo)(
|
|
50
55
|
() => tickMarkPositions.map((value, index) => {
|
|
51
56
|
const isSelected = (0, import_inRange.inRange)(value, rangeValues);
|
|
@@ -62,6 +67,15 @@ const TickMarksValues = () => {
|
|
|
62
67
|
}),
|
|
63
68
|
[tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues]
|
|
64
69
|
);
|
|
65
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
|
+
import_styles.StyledTickMarksContainer,
|
|
72
|
+
{
|
|
73
|
+
getOwnerProps,
|
|
74
|
+
getOwnerPropsArguments,
|
|
75
|
+
columnCount: tickMarkPositions.length,
|
|
76
|
+
columnWidth,
|
|
77
|
+
children: markValues
|
|
78
|
+
}
|
|
79
|
+
);
|
|
66
80
|
};
|
|
67
81
|
//# sourceMappingURL=TickMarksValues.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TickMarksValues.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n const {\n propsWithDefault: { customTickMarksValues },\n rangeValues,\n tickMarkPositions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const markValues = useMemo(\n () =>\n tickMarkPositions.map((value, index) => {\n const isSelected = inRange(value, rangeValues);\n return (\n <StyledTickMarkValue\n key={`${instanceUid}-${value}`}\n isSelected={isSelected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customTickMarksValues[index] ?? value}\n </StyledTickMarkValue>\n );\n }),\n [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n );\n\n return (\n <StyledTickMarksContainer
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n const {\n propsWithDefault: { customTickMarksValues, maxValue, minValue },\n rangeValues,\n tickMarkPositions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const { columnWidth } = useMemo(() => {\n const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n return { columnWidth: calculatedColumnWidthPercentage };\n }, [maxValue, minValue, tickMarkPositions.length]);\n\n const markValues = useMemo(\n () =>\n tickMarkPositions.map((value, index) => {\n const isSelected = inRange(value, rangeValues);\n\n return (\n <StyledTickMarkValue\n key={`${instanceUid}-${value}`}\n isSelected={isSelected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customTickMarksValues[index] ?? value}\n </StyledTickMarkValue>\n );\n }),\n [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n );\n\n return (\n <StyledTickMarksContainer\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n columnCount={tickMarkPositions.length}\n columnWidth={columnWidth}\n >\n {markValues}\n </StyledTickMarksContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Bb;AA3BV,mBAA2C;AAC3C,oBAA8D;AAC9D,qBAAwB;AACxB,2BAA8B;AAEvB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,EAAE,YAAY,QAAI,sBAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,QAAM,iBAAa;AAAA,IACjB,MACE,kBAAkB,IAAI,CAAC,OAAO,UAAU;AACtC,YAAM,iBAAa,wBAAQ,OAAO,WAAW;AAE7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,QAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,MAM9B;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,mBAAmB,aAAa,aAAa,eAAe,wBAAwB,qBAAqB;AAAA,EAC5G;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
|
|
6
6
|
"names": ["DSSliderV2Context"]
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -88,14 +88,20 @@ const StyledTickMarkValue = (0, import_ds_system.styled)("div", { name: import_c
|
|
|
88
88
|
text-align: center;
|
|
89
89
|
min-height: ${(props) => props.theme.space.xs};
|
|
90
90
|
overflow: visible;
|
|
91
|
-
width: ${(props) => props.theme.space.xxxs};
|
|
92
91
|
color: ${(props) => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]};
|
|
92
|
+
place-self: baseline;
|
|
93
|
+
transform: translateX(calc(-50% + 2px));
|
|
94
|
+
white-space: normal;
|
|
95
|
+
overflow-wrap: break-word;
|
|
96
|
+
word-break: break-word;
|
|
93
97
|
`;
|
|
94
98
|
const StyledTickMarksContainer = (0, import_ds_system.styled)("div", {
|
|
95
99
|
name: import_constants.DSSliderV2Name,
|
|
96
100
|
slot: import_constants.SLIDER_V2_SLOTS.TICK_MARK_CONTAINER
|
|
97
101
|
})`
|
|
98
|
-
display:
|
|
102
|
+
display: grid;
|
|
103
|
+
grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));
|
|
104
|
+
gap: 4px;
|
|
99
105
|
justify-content: space-between;
|
|
100
106
|
// this next property-value reverts the sanitize.css value
|
|
101
107
|
overflow-wrap: normal;
|
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 applyAriaDisabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled || props.applyAriaDisabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n
|
|
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,YASlF,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,YAAY,MAAM,oBACpB,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,
|
|
4
|
+
"sourcesContent": ["import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled || props.applyAriaDisabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n place-self: baseline;\n transform: translateX(calc(-50% + 2px));\n white-space: normal;\n overflow-wrap: break-word;\n word-break: break-word;\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})<{ columnCount: number; columnWidth: string }>`\n display: grid;\n grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));\n gap: 4px;\n justify-content: space-between;\n // this next property-value reverts the sanitize.css value\n overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n}>`\n height: 20px;\n width: 20px;\n top: 0;\n background-color: ${(props) =>\n props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n border-radius: 10px;\n border: 1px solid\n ${(props) =>\n props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};\n\n :focus {\n border: 2px solid brand-700;\n outline: unset;\n }\n\n :hover {\n background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};\n }\n\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : undefined)};\n\n z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,13 +6,18 @@ import { inRange } from "../utils/inRange.js";
|
|
|
6
6
|
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
|
7
7
|
const TickMarksValues = () => {
|
|
8
8
|
const {
|
|
9
|
-
propsWithDefault: { customTickMarksValues },
|
|
9
|
+
propsWithDefault: { customTickMarksValues, maxValue, minValue },
|
|
10
10
|
rangeValues,
|
|
11
11
|
tickMarkPositions,
|
|
12
12
|
instanceUid,
|
|
13
13
|
getOwnerProps,
|
|
14
14
|
getOwnerPropsArguments
|
|
15
15
|
} = useContext(DSSliderV2Context);
|
|
16
|
+
const { columnWidth } = useMemo(() => {
|
|
17
|
+
const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);
|
|
18
|
+
const calculatedColumnWidthPercentage = `${distanceBetweenDots / (maxValue - minValue) * 100}%`;
|
|
19
|
+
return { columnWidth: calculatedColumnWidthPercentage };
|
|
20
|
+
}, [maxValue, minValue, tickMarkPositions.length]);
|
|
16
21
|
const markValues = useMemo(
|
|
17
22
|
() => tickMarkPositions.map((value, index) => {
|
|
18
23
|
const isSelected = inRange(value, rangeValues);
|
|
@@ -29,7 +34,16 @@ const TickMarksValues = () => {
|
|
|
29
34
|
}),
|
|
30
35
|
[tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues]
|
|
31
36
|
);
|
|
32
|
-
return /* @__PURE__ */ jsx(
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
StyledTickMarksContainer,
|
|
39
|
+
{
|
|
40
|
+
getOwnerProps,
|
|
41
|
+
getOwnerPropsArguments,
|
|
42
|
+
columnCount: tickMarkPositions.length,
|
|
43
|
+
columnWidth,
|
|
44
|
+
children: markValues
|
|
45
|
+
}
|
|
46
|
+
);
|
|
33
47
|
};
|
|
34
48
|
export {
|
|
35
49
|
TickMarksValues
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TickMarksValues.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n const {\n propsWithDefault: { customTickMarksValues },\n rangeValues,\n tickMarkPositions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const markValues = useMemo(\n () =>\n tickMarkPositions.map((value, index) => {\n const isSelected = inRange(value, rangeValues);\n return (\n <StyledTickMarkValue\n key={`${instanceUid}-${value}`}\n isSelected={isSelected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customTickMarksValues[index] ?? value}\n </StyledTickMarkValue>\n );\n }),\n [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n );\n\n return (\n <StyledTickMarksContainer
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n const {\n propsWithDefault: { customTickMarksValues, maxValue, minValue },\n rangeValues,\n tickMarkPositions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const { columnWidth } = useMemo(() => {\n const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n return { columnWidth: calculatedColumnWidthPercentage };\n }, [maxValue, minValue, tickMarkPositions.length]);\n\n const markValues = useMemo(\n () =>\n tickMarkPositions.map((value, index) => {\n const isSelected = inRange(value, rangeValues);\n\n return (\n <StyledTickMarkValue\n key={`${instanceUid}-${value}`}\n isSelected={isSelected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customTickMarksValues[index] ?? value}\n </StyledTickMarkValue>\n );\n }),\n [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n );\n\n return (\n <StyledTickMarksContainer\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n columnCount={tickMarkPositions.length}\n columnWidth={columnWidth}\n >\n {markValues}\n </StyledTickMarksContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC2Bb;AA3BV,SAAgB,YAAY,eAAe;AAC3C,SAAS,qBAAqB,gCAAgC;AAC9D,SAAS,eAAe;AACxB,OAAO,uBAAuB;AAEvB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,EAAE,YAAY,IAAI,QAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,QAAM,aAAa;AAAA,IACjB,MACE,kBAAkB,IAAI,CAAC,OAAO,UAAU;AACtC,YAAM,aAAa,QAAQ,OAAO,WAAW;AAE7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,QAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,MAM9B;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,mBAAmB,aAAa,aAAa,eAAe,wBAAwB,qBAAqB;AAAA,EAC5G;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -48,14 +48,20 @@ const StyledTickMarkValue = styled("div", { name: DSSliderV2Name, slot: SLIDER_V
|
|
|
48
48
|
text-align: center;
|
|
49
49
|
min-height: ${(props) => props.theme.space.xs};
|
|
50
50
|
overflow: visible;
|
|
51
|
-
width: ${(props) => props.theme.space.xxxs};
|
|
52
51
|
color: ${(props) => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]};
|
|
52
|
+
place-self: baseline;
|
|
53
|
+
transform: translateX(calc(-50% + 2px));
|
|
54
|
+
white-space: normal;
|
|
55
|
+
overflow-wrap: break-word;
|
|
56
|
+
word-break: break-word;
|
|
53
57
|
`;
|
|
54
58
|
const StyledTickMarksContainer = styled("div", {
|
|
55
59
|
name: DSSliderV2Name,
|
|
56
60
|
slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER
|
|
57
61
|
})`
|
|
58
|
-
display:
|
|
62
|
+
display: grid;
|
|
63
|
+
grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));
|
|
64
|
+
gap: 4px;
|
|
59
65
|
justify-content: space-between;
|
|
60
66
|
// this next property-value reverts the sanitize.css value
|
|
61
67
|
overflow-wrap: normal;
|
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 applyAriaDisabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled || props.applyAriaDisabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n
|
|
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,YASlF,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,YAAY,MAAM,oBACpB,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,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled || props.applyAriaDisabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n place-self: baseline;\n transform: translateX(calc(-50% + 2px));\n white-space: normal;\n overflow-wrap: break-word;\n word-break: break-word;\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})<{ columnCount: number; columnWidth: string }>`\n display: grid;\n grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));\n gap: 4px;\n justify-content: space-between;\n // this next property-value reverts the sanitize.css value\n overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n}>`\n height: 20px;\n width: 20px;\n top: 0;\n background-color: ${(props) =>\n props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n border-radius: 10px;\n border: 1px solid\n ${(props) =>\n props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};\n\n :focus {\n border: 2px solid brand-700;\n outline: unset;\n }\n\n :hover {\n background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};\n }\n\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : undefined)};\n\n z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -16,7 +16,10 @@ export declare const StyledDotsContainer: import("styled-components").StyledComp
|
|
|
16
16
|
export declare const StyledTickMarkValue: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
17
17
|
isSelected: boolean;
|
|
18
18
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
19
|
-
export declare const StyledTickMarksContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme,
|
|
19
|
+
export declare const StyledTickMarksContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
20
|
+
columnCount: number;
|
|
21
|
+
columnWidth: string;
|
|
22
|
+
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
20
23
|
export declare const StyledThumb: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
21
24
|
disabled: boolean;
|
|
22
25
|
applyAriaDisabled: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-slider-v2",
|
|
3
|
-
"version": "3.52.0-rc.
|
|
3
|
+
"version": "3.52.0-rc.23",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Slider V 2",
|
|
6
6
|
"files": [
|
|
@@ -38,19 +38,19 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-range": "~1.8.14",
|
|
40
40
|
"uid": "^2.0.2",
|
|
41
|
-
"@elliemae/ds-grid": "3.52.0-rc.
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.52.0-rc.
|
|
43
|
-
"@elliemae/ds-system": "3.52.0-rc.
|
|
44
|
-
"@elliemae/ds-tooltip-v3": "3.52.0-rc.
|
|
45
|
-
"@elliemae/ds-truncated-tooltip-text": "3.52.0-rc.
|
|
46
|
-
"@elliemae/ds-typescript-helpers": "3.52.0-rc.
|
|
41
|
+
"@elliemae/ds-grid": "3.52.0-rc.23",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.52.0-rc.23",
|
|
43
|
+
"@elliemae/ds-system": "3.52.0-rc.23",
|
|
44
|
+
"@elliemae/ds-tooltip-v3": "3.52.0-rc.23",
|
|
45
|
+
"@elliemae/ds-truncated-tooltip-text": "3.52.0-rc.23",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.52.0-rc.23"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
49
|
+
"@elliemae/pui-cli": "9.0.0-next.63",
|
|
50
50
|
"jest": "~29.7.0",
|
|
51
51
|
"lodash-es": "^4.17.21",
|
|
52
52
|
"styled-components": "~5.3.9",
|
|
53
|
-
"@elliemae/ds-monorepo-devops": "3.52.0-rc.
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.52.0-rc.23"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@testing-library/jest-dom": "^6.6.3",
|