@elliemae/ds-slider-v2 3.80.0-next.49 → 3.80.0-next.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/Thumb.js +19 -1
- package/dist/cjs/parts/Thumb.js.map +2 -2
- package/dist/cjs/parts/styles.js +5 -1
- package/dist/cjs/parts/styles.js.map +2 -2
- package/dist/esm/parts/Thumb.js +19 -1
- package/dist/esm/parts/Thumb.js.map +2 -2
- package/dist/esm/parts/styles.js +5 -1
- package/dist/esm/parts/styles.js.map +2 -2
- package/dist/types/parts/styles.d.ts +2 -0
- package/package.json +9 -9
package/dist/cjs/parts/Thumb.js
CHANGED
|
@@ -52,7 +52,16 @@ const conformedThumbLabel = (config) => {
|
|
|
52
52
|
const spanStyle = { height: 20, width: 12 };
|
|
53
53
|
const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
54
54
|
const {
|
|
55
|
-
propsWithDefault: {
|
|
55
|
+
propsWithDefault: {
|
|
56
|
+
disabled,
|
|
57
|
+
applyAriaDisabled,
|
|
58
|
+
readOnly,
|
|
59
|
+
hasError,
|
|
60
|
+
customTickMarksValues,
|
|
61
|
+
step,
|
|
62
|
+
minValue,
|
|
63
|
+
maxValue
|
|
64
|
+
},
|
|
56
65
|
rangeValues,
|
|
57
66
|
getOwnerProps,
|
|
58
67
|
hasUserInteractedAfterFocus,
|
|
@@ -73,6 +82,7 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
73
82
|
} = reactRangeOpinionatedProps;
|
|
74
83
|
const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;
|
|
75
84
|
const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });
|
|
85
|
+
const isPinnedAtBoundary = rangeValues.length === 2 && (index === 1 && rangeValues.every((v) => v === maxValue) || index === 0 && rangeValues.every((v) => v === minValue));
|
|
76
86
|
const getOwnerPropsArguments = (0, import_react.useCallback)(
|
|
77
87
|
() => ({
|
|
78
88
|
index,
|
|
@@ -114,6 +124,10 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
114
124
|
},
|
|
115
125
|
[reactRangeOnKeyUpHandler]
|
|
116
126
|
);
|
|
127
|
+
const focusThisThumb = (0, import_react.useCallback)(() => {
|
|
128
|
+
if (disabled) return;
|
|
129
|
+
ref?.current?.focus();
|
|
130
|
+
}, [disabled, ref]);
|
|
117
131
|
const handleFocus = (0, import_react.useCallback)(() => {
|
|
118
132
|
setIsFocused(true);
|
|
119
133
|
setIsTooltipDismissed(false);
|
|
@@ -134,9 +148,13 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
134
148
|
$applyAriaDisabled: applyAriaDisabled,
|
|
135
149
|
$readOnly: readOnly,
|
|
136
150
|
$hasError: hasError,
|
|
151
|
+
$isRaised: isDragged,
|
|
152
|
+
$isPinnedAtBoundary: isPinnedAtBoundary,
|
|
137
153
|
"aria-disabled": applyAriaDisabled || readOnly,
|
|
138
154
|
onMouseEnter: handleMouseEnter,
|
|
139
155
|
onMouseLeave: handleMouseLeave,
|
|
156
|
+
onMouseDown: focusThisThumb,
|
|
157
|
+
onTouchStart: focusThisThumb,
|
|
140
158
|
onKeyDown: handleKeyDown,
|
|
141
159
|
onKeyUp: handleKeyUp,
|
|
142
160
|
onFocus: handleFocus,
|
|
@@ -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 { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n rangeValues: [number] | [number, number];\n customTickMarksValues: string[];\n index: number;\n step: number;\n minValue: number;\n}) => {\n const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n let msg = `Value: `;\n if (customTickMarksValues.length) {\n const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n } else {\n msg += `${rangeValues[index].toFixed(1)}`;\n }\n\n return msg;\n};\n\n// Matches the handle box from Spec v1.5.0 \u2014 this span is the tooltip's anchor and has to cover the\n// handle, not exceed it.\nconst spanStyle = { height: 20, width: 12 };\n\nexport const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }: Omit<IRenderThumbParams, 'key'>) => {\n const {\n propsWithDefault: {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n rangeValues: [number] | [number, number];\n customTickMarksValues: string[];\n index: number;\n step: number;\n minValue: number;\n}) => {\n const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n let msg = `Value: `;\n if (customTickMarksValues.length) {\n const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n } else {\n msg += `${rangeValues[index].toFixed(1)}`;\n }\n\n return msg;\n};\n\n// Matches the handle box from Spec v1.5.0 \u2014 this span is the tooltip's anchor and has to cover the\n// handle, not exceed it.\nconst spanStyle = { height: 20, width: 12 };\n\nexport const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }: Omit<IRenderThumbParams, 'key'>) => {\n const {\n propsWithDefault: {\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n customTickMarksValues,\n step,\n minValue,\n maxValue,\n },\n rangeValues,\n getOwnerProps,\n hasUserInteractedAfterFocus,\n setHasUserInteractedAfterFocus,\n setIsAnyThumbHovered,\n setIsAnyThumbFocused,\n } = useContext(DSSliderV2Context);\n\n // Local state drives the tooltip, which is per handle. The context setters below mirror the same\n // transitions for the track, which is shared between handles in range mode.\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n\n const {\n ref,\n style: thumbStyle,\n key: unusedKeyDueToLibTypescriptIssues,\n onKeyDown: reactRangeOnKeyDownHandler,\n onKeyUp: reactRangeOnKeyUpHandler,\n ...propsFromReactRangeTookAsIs\n } = reactRangeOpinionatedProps;\n const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n // At a boundary the pointer lands on the thumb that cannot move; handing it to the other re-opens the range.\n const isPinnedAtBoundary =\n rangeValues.length === 2 &&\n ((index === 1 && rangeValues.every((v) => v === maxValue)) ||\n (index === 0 && rangeValues.every((v) => v === minValue)));\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n index,\n shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n }),\n [index, hasUserInteractedAfterFocus],\n );\n\n const sanitizedStyle = useMemo(() => {\n // as per https://jira.elliemae.io/browse/PUI-14390 and https://github.com/intcx/PLATFORM-UI.dimsum/pull/7046\n // we also want z-index: ${(props) => props.theme.zIndex.tooltip}; from the theme\n // I keep the same, just refactoring so the styles concerns are part of the styled component as expected\n // my understanding is that libInherithedStyles main purposes are:\n // - to position the element on the track with a transform: translate\n // - to handle the cursor:grab/grabbing based on interaction state\n const { zIndex, ...libInherithedStyles } = thumbStyle;\n // we want to keep the cursor grab/grabbing thing, but we want our own \"disabled\" cursor...\n if (disabled || applyAriaDisabled || readOnly) return { ...libInherithedStyles, cursor: 'not-allowed' };\n return libInherithedStyles;\n }, [applyAriaDisabled, disabled, readOnly, thumbStyle]);\n\n const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n setIsHovered(true);\n setIsFocused(false);\n setIsTooltipDismissed(false);\n setIsAnyThumbHovered(true);\n }, [setIsAnyThumbHovered]);\n const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n setIsHovered(false);\n setIsAnyThumbHovered(false);\n }, [setIsAnyThumbHovered]);\n\n const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n reactRangeOnKeyDownHandler?.(e);\n if (e.key === 'Escape' && showPopover) {\n // stoping propagation here is load-bearing\n // we are checking \"showPopover\" because if \"the popover exist\" it means the tooltip exist\n // if it exist and we are in a dialog, the first esc needs to close the tooltip, not the dialog.\n e.stopPropagation();\n setIsTooltipDismissed(true);\n setIsFocused(true);\n } else {\n setIsTooltipDismissed(false);\n }\n },\n [showPopover, reactRangeOnKeyDownHandler],\n );\n const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n reactRangeOnKeyUpHandler?.(e);\n // if we need to do anything on keyup too, this is where we will do it.\n },\n [reactRangeOnKeyUpHandler],\n );\n // react-range skips focus() under `draggableTrack` and its preventDefault blocks the native one.\n const focusThisThumb = useCallback(() => {\n if (disabled) return;\n (ref?.current as HTMLDivElement | null)?.focus();\n }, [disabled, ref]);\n\n const handleFocus = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIsFocused(true);\n setIsTooltipDismissed(false);\n setIsAnyThumbFocused(true);\n }, [setIsAnyThumbFocused]);\n const handleBlur = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIsFocused(false);\n setHasUserInteractedAfterFocus(false);\n setIsAnyThumbFocused(false);\n }, [setHasUserInteractedAfterFocus, setIsAnyThumbFocused]);\n\n return (\n <StyledThumb\n {...propsFromReactRangeTookAsIs}\n style={sanitizedStyle}\n innerRef={ref}\n disabled={disabled}\n $applyAriaDisabled={applyAriaDisabled}\n $readOnly={readOnly}\n $hasError={hasError}\n $isRaised={isDragged}\n $isPinnedAtBoundary={isPinnedAtBoundary}\n // dicussed with SME on 13/jul/2026, even if role='slider' technically accepts aria-readonly\n // - SRs support for aria-readonly is loose\n // - having both aria-readonly and aria-disabled is a violation\n // - aria-disabled transmit the same interaction pattern\n // therefore, we will not set aria-readonly and will rely on aria-disabled to convey the interaction pattern\n // aria-readonly={readOnly}\n aria-disabled={applyAriaDisabled || readOnly} // || readOnly as per previous comment\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseDown={focusThisThumb}\n onTouchStart={focusThisThumb}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onFocus={handleFocus}\n onBlur={handleBlur}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3 key={label} text={label} showPopover={showPopover} withoutAnimation>\n <span style={spanStyle}></span>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["DSSliderV2Context"]
|
|
7
7
|
}
|
package/dist/cjs/parts/styles.js
CHANGED
|
@@ -177,7 +177,11 @@ const StyledThumb = (0, import_ds_system.styled)("div", { name: import_constants
|
|
|
177
177
|
width: 12px;
|
|
178
178
|
border-radius: 2px;
|
|
179
179
|
top: 0;
|
|
180
|
-
z-index: ${(props) => props.theme.zIndex.tooltip};
|
|
180
|
+
z-index: ${(props) => props.theme.zIndex.tooltip + (props.$isRaised ? 1 : 0)};
|
|
181
|
+
&:focus {
|
|
182
|
+
z-index: ${(props) => props.theme.zIndex.tooltip + 1};
|
|
183
|
+
}
|
|
184
|
+
pointer-events: ${(props) => props.$isPinnedAtBoundary ? "none" : "auto"};
|
|
181
185
|
${ThumbStates}
|
|
182
186
|
`;
|
|
183
187
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { getTrackBackground } from 'react-range';\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\n// Spec v1.5.0 uses the token names `Error-900` / `Error-200`. There is no `error` palette in the\n// theme \u2014 the key is `danger`, and these are its matching steps. Always reference the token, never\n// the hex: `danger[900]` and `danger[950]` are one step apart and easy to confuse.\nconst SPEC_ERROR_ACTIVE = 900;\nconst SPEC_ERROR_INACTIVE = 200;\n\ninterface TrackProps {\n disabled: boolean;\n $applyAriaDisabled: boolean;\n $readOnly: boolean;\n $hasError: boolean;\n $isAnyThumbHovered: boolean;\n $isAnyThumbFocused: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}\n\n/**\n * Spec v1.5.0 track colours, one branch per row of the state table.\n *\n * Precedence: disabled > aria-disabled / readOnly > error > focus > hover > idle. The first three\n * come from the standard Dim Sum interaction state hierarchy; focus over hover is because a handle\n * that is both focused and hovered reads as focused.\n *\n * `readOnly` shares the aria-disabled tokens. Spec v1.5.0 defines no read-only row, and the two\n * states are visually identical by design \u2014 see `.github/memories/project_interaction_states.md`.\n *\n * The blocked states keep their own track colours when focused: the spec's `Aria-Disabled + Focus`\n * row marks the track \"unchanged\" and moves only the handle border. Error follows the same shape by\n * analogy; the spec has no `Error + Focus` row.\n */\nconst TrackStates = css<TrackProps>`\n ${({\n theme,\n disabled,\n $applyAriaDisabled,\n $readOnly,\n $hasError,\n $isAnyThumbHovered,\n $isAnyThumbFocused,\n rangeValues,\n multiple,\n minValue,\n maxValue,\n }) => {\n const { neutral, brand, danger } = theme.colors;\n\n const pickColors = () => {\n if (disabled) return { active: neutral[400], inactive: neutral[300] };\n if ($applyAriaDisabled || $readOnly) return { active: neutral[500], inactive: neutral[300] };\n if ($hasError) return { active: danger[SPEC_ERROR_ACTIVE], inactive: danger[SPEC_ERROR_INACTIVE] };\n if ($isAnyThumbFocused) return { active: brand[800], inactive: neutral[400] };\n if ($isAnyThumbHovered) return { active: brand[700], inactive: neutral[400] };\n return { active: brand[600], inactive: neutral[400] };\n };\n const { active, inactive } = pickColors();\n\n // react-range paints the whole track as one gradient, so both segments are handed over together:\n // the range version has an inactive segment on each side of the selection.\n const reactRangeColors = multiple ? [inactive, active, inactive] : [active, inactive];\n\n return `background: ${getTrackBackground({\n values: rangeValues,\n colors: reactRangeColors,\n min: minValue,\n max: maxValue,\n })};`;\n }}\n`;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<TrackProps>`\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 ${TrackStates}\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`\n &:after {\n content: '';\n background: ${(props) => props.theme.colors.neutral['000']};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 4px;\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\n// Spec v1.5.0 asks the step value for `typography-variant: b2-Regular`. Naming a variant means the\n// design system's typography, not an ad-hoc font declaration \u2014 so the slot is the DSTypography\n// itself rather than a div wrapping one. Same shape as `StyledTitleTypography` in\n// ds-card-navigation, and it keeps the node count and the `data-testid` unchanged.\n//\n// This is also what makes the value respond to browser text resize: the variant's sizes are in rem\n// against the theme's root, so a 200% zoom scales them proportionally.\nexport const StyledTickMarkValue = styled(DSTypography, {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE,\n})<{\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(-50%);\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\ninterface ThumbProps {\n disabled: boolean;\n $applyAriaDisabled: boolean;\n $readOnly: boolean;\n $hasError: boolean;\n}\n\n/**\n * Spec v1.5.0 handle borders. Background is `N-000` in every state, so it is set once outside the\n * branches.\n *\n * Hover and focus stay as CSS pseudo-classes rather than reading the context flags, because the\n * border is per handle: in range mode hovering one handle must highlight that one only. The context\n * flags exist for the track, which is a single shared surface \u2014 see `useSliderV2.ts`.\n *\n * The cursor is not set here. react-range supplies grab/grabbing through inline styles, and the\n * not-allowed override for the blocked states is applied in `Thumb.tsx`, which is why the\n * `Disabled + Hover` and `Aria-Disabled + Hover` rows need no branch: they are cursor-only.\n */\nconst ThumbStates = css<ThumbProps>`\n ${({ theme, disabled, $applyAriaDisabled, $readOnly, $hasError }) => {\n const { neutral, brand, danger } = theme.colors;\n const background = `background-color: ${neutral['000']};`;\n // Focus survives a blocked state: `applyAriaDisabled` and `readOnly` keep focusability on\n // purpose, so the indicator has to remain visible.\n const focusRing = `:focus {\n border: 2px solid ${brand[800]};\n outline: unset;\n }`;\n\n // Native `disabled` cannot receive focus, which is why the spec marks `Disabled + Focus` N/A.\n if (disabled)\n return `\n ${background}\n border: 2px solid ${neutral[400]};\n `;\n\n if ($applyAriaDisabled || $readOnly)\n return `\n ${background}\n border: 2px solid ${neutral[500]};\n ${focusRing}`;\n\n if ($hasError)\n return `\n ${background}\n border: 2px solid ${danger[SPEC_ERROR_ACTIVE]};\n ${focusRing}`;\n\n return `\n ${background}\n border: 2px solid ${brand[600]};\n :hover {\n border: 2px solid ${brand[700]};\n }\n ${focusRing}`;\n }}\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<ThumbProps>`\n height: 20px;\n width: 12px;\n border-radius: 2px;\n top: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip};\n ${ThumbStates}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { getTrackBackground } from 'react-range';\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\n// Spec v1.5.0 uses the token names `Error-900` / `Error-200`. There is no `error` palette in the\n// theme \u2014 the key is `danger`, and these are its matching steps. Always reference the token, never\n// the hex: `danger[900]` and `danger[950]` are one step apart and easy to confuse.\nconst SPEC_ERROR_ACTIVE = 900;\nconst SPEC_ERROR_INACTIVE = 200;\n\ninterface TrackProps {\n disabled: boolean;\n $applyAriaDisabled: boolean;\n $readOnly: boolean;\n $hasError: boolean;\n $isAnyThumbHovered: boolean;\n $isAnyThumbFocused: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}\n\n/**\n * Spec v1.5.0 track colours, one branch per row of the state table.\n *\n * Precedence: disabled > aria-disabled / readOnly > error > focus > hover > idle. The first three\n * come from the standard Dim Sum interaction state hierarchy; focus over hover is because a handle\n * that is both focused and hovered reads as focused.\n *\n * `readOnly` shares the aria-disabled tokens. Spec v1.5.0 defines no read-only row, and the two\n * states are visually identical by design \u2014 see `.github/memories/project_interaction_states.md`.\n *\n * The blocked states keep their own track colours when focused: the spec's `Aria-Disabled + Focus`\n * row marks the track \"unchanged\" and moves only the handle border. Error follows the same shape by\n * analogy; the spec has no `Error + Focus` row.\n */\nconst TrackStates = css<TrackProps>`\n ${({\n theme,\n disabled,\n $applyAriaDisabled,\n $readOnly,\n $hasError,\n $isAnyThumbHovered,\n $isAnyThumbFocused,\n rangeValues,\n multiple,\n minValue,\n maxValue,\n }) => {\n const { neutral, brand, danger } = theme.colors;\n\n const pickColors = () => {\n if (disabled) return { active: neutral[400], inactive: neutral[300] };\n if ($applyAriaDisabled || $readOnly) return { active: neutral[500], inactive: neutral[300] };\n if ($hasError) return { active: danger[SPEC_ERROR_ACTIVE], inactive: danger[SPEC_ERROR_INACTIVE] };\n if ($isAnyThumbFocused) return { active: brand[800], inactive: neutral[400] };\n if ($isAnyThumbHovered) return { active: brand[700], inactive: neutral[400] };\n return { active: brand[600], inactive: neutral[400] };\n };\n const { active, inactive } = pickColors();\n\n // react-range paints the whole track as one gradient, so both segments are handed over together:\n // the range version has an inactive segment on each side of the selection.\n const reactRangeColors = multiple ? [inactive, active, inactive] : [active, inactive];\n\n return `background: ${getTrackBackground({\n values: rangeValues,\n colors: reactRangeColors,\n min: minValue,\n max: maxValue,\n })};`;\n }}\n`;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<TrackProps>`\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 ${TrackStates}\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`\n &:after {\n content: '';\n background: ${(props) => props.theme.colors.neutral['000']};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 4px;\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\n// Spec v1.5.0 asks the step value for `typography-variant: b2-Regular`. Naming a variant means the\n// design system's typography, not an ad-hoc font declaration \u2014 so the slot is the DSTypography\n// itself rather than a div wrapping one. Same shape as `StyledTitleTypography` in\n// ds-card-navigation, and it keeps the node count and the `data-testid` unchanged.\n//\n// This is also what makes the value respond to browser text resize: the variant's sizes are in rem\n// against the theme's root, so a 200% zoom scales them proportionally.\nexport const StyledTickMarkValue = styled(DSTypography, {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE,\n})<{\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(-50%);\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\ninterface ThumbProps {\n disabled: boolean;\n $applyAriaDisabled: boolean;\n $readOnly: boolean;\n $hasError: boolean;\n $isRaised: boolean;\n $isPinnedAtBoundary: boolean;\n}\n\n/**\n * Spec v1.5.0 handle borders. Background is `N-000` in every state, so it is set once outside the\n * branches.\n *\n * Hover and focus stay as CSS pseudo-classes rather than reading the context flags, because the\n * border is per handle: in range mode hovering one handle must highlight that one only. The context\n * flags exist for the track, which is a single shared surface \u2014 see `useSliderV2.ts`.\n *\n * The cursor is not set here. react-range supplies grab/grabbing through inline styles, and the\n * not-allowed override for the blocked states is applied in `Thumb.tsx`, which is why the\n * `Disabled + Hover` and `Aria-Disabled + Hover` rows need no branch: they are cursor-only.\n */\nconst ThumbStates = css<ThumbProps>`\n ${({ theme, disabled, $applyAriaDisabled, $readOnly, $hasError }) => {\n const { neutral, brand, danger } = theme.colors;\n const background = `background-color: ${neutral['000']};`;\n // Focus survives a blocked state: `applyAriaDisabled` and `readOnly` keep focusability on\n // purpose, so the indicator has to remain visible.\n const focusRing = `:focus {\n border: 2px solid ${brand[800]};\n outline: unset;\n }`;\n\n // Native `disabled` cannot receive focus, which is why the spec marks `Disabled + Focus` N/A.\n if (disabled)\n return `\n ${background}\n border: 2px solid ${neutral[400]};\n `;\n\n if ($applyAriaDisabled || $readOnly)\n return `\n ${background}\n border: 2px solid ${neutral[500]};\n ${focusRing}`;\n\n if ($hasError)\n return `\n ${background}\n border: 2px solid ${danger[SPEC_ERROR_ACTIVE]};\n ${focusRing}`;\n\n return `\n ${background}\n border: 2px solid ${brand[600]};\n :hover {\n border: 2px solid ${brand[700]};\n }\n ${focusRing}`;\n }}\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<ThumbProps>`\n height: 20px;\n width: 12px;\n border-radius: 2px;\n top: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip + (props.$isRaised ? 1 : 0)};\n &:focus {\n z-index: ${(props) => props.theme.zIndex.tooltip + 1};\n }\n pointer-events: ${(props) => (props.$isPinnedAtBoundary ? 'none' : 'auto')};\n ${ThumbStates}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Thumb.js
CHANGED
|
@@ -18,7 +18,16 @@ const conformedThumbLabel = (config) => {
|
|
|
18
18
|
const spanStyle = { height: 20, width: 12 };
|
|
19
19
|
const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
20
20
|
const {
|
|
21
|
-
propsWithDefault: {
|
|
21
|
+
propsWithDefault: {
|
|
22
|
+
disabled,
|
|
23
|
+
applyAriaDisabled,
|
|
24
|
+
readOnly,
|
|
25
|
+
hasError,
|
|
26
|
+
customTickMarksValues,
|
|
27
|
+
step,
|
|
28
|
+
minValue,
|
|
29
|
+
maxValue
|
|
30
|
+
},
|
|
22
31
|
rangeValues,
|
|
23
32
|
getOwnerProps,
|
|
24
33
|
hasUserInteractedAfterFocus,
|
|
@@ -39,6 +48,7 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
39
48
|
} = reactRangeOpinionatedProps;
|
|
40
49
|
const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;
|
|
41
50
|
const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });
|
|
51
|
+
const isPinnedAtBoundary = rangeValues.length === 2 && (index === 1 && rangeValues.every((v) => v === maxValue) || index === 0 && rangeValues.every((v) => v === minValue));
|
|
42
52
|
const getOwnerPropsArguments = useCallback(
|
|
43
53
|
() => ({
|
|
44
54
|
index,
|
|
@@ -80,6 +90,10 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
80
90
|
},
|
|
81
91
|
[reactRangeOnKeyUpHandler]
|
|
82
92
|
);
|
|
93
|
+
const focusThisThumb = useCallback(() => {
|
|
94
|
+
if (disabled) return;
|
|
95
|
+
ref?.current?.focus();
|
|
96
|
+
}, [disabled, ref]);
|
|
83
97
|
const handleFocus = useCallback(() => {
|
|
84
98
|
setIsFocused(true);
|
|
85
99
|
setIsTooltipDismissed(false);
|
|
@@ -100,9 +114,13 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
100
114
|
$applyAriaDisabled: applyAriaDisabled,
|
|
101
115
|
$readOnly: readOnly,
|
|
102
116
|
$hasError: hasError,
|
|
117
|
+
$isRaised: isDragged,
|
|
118
|
+
$isPinnedAtBoundary: isPinnedAtBoundary,
|
|
103
119
|
"aria-disabled": applyAriaDisabled || readOnly,
|
|
104
120
|
onMouseEnter: handleMouseEnter,
|
|
105
121
|
onMouseLeave: handleMouseLeave,
|
|
122
|
+
onMouseDown: focusThisThumb,
|
|
123
|
+
onTouchStart: focusThisThumb,
|
|
106
124
|
onKeyDown: handleKeyDown,
|
|
107
125
|
onKeyUp: handleKeyUp,
|
|
108
126
|
onFocus: handleFocus,
|
|
@@ -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 { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n rangeValues: [number] | [number, number];\n customTickMarksValues: string[];\n index: number;\n step: number;\n minValue: number;\n}) => {\n const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n let msg = `Value: `;\n if (customTickMarksValues.length) {\n const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n } else {\n msg += `${rangeValues[index].toFixed(1)}`;\n }\n\n return msg;\n};\n\n// Matches the handle box from Spec v1.5.0 \u2014 this span is the tooltip's anchor and has to cover the\n// handle, not exceed it.\nconst spanStyle = { height: 20, width: 12 };\n\nexport const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }: Omit<IRenderThumbParams, 'key'>) => {\n const {\n propsWithDefault: {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n rangeValues: [number] | [number, number];\n customTickMarksValues: string[];\n index: number;\n step: number;\n minValue: number;\n}) => {\n const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n let msg = `Value: `;\n if (customTickMarksValues.length) {\n const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n } else {\n msg += `${rangeValues[index].toFixed(1)}`;\n }\n\n return msg;\n};\n\n// Matches the handle box from Spec v1.5.0 \u2014 this span is the tooltip's anchor and has to cover the\n// handle, not exceed it.\nconst spanStyle = { height: 20, width: 12 };\n\nexport const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }: Omit<IRenderThumbParams, 'key'>) => {\n const {\n propsWithDefault: {\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n customTickMarksValues,\n step,\n minValue,\n maxValue,\n },\n rangeValues,\n getOwnerProps,\n hasUserInteractedAfterFocus,\n setHasUserInteractedAfterFocus,\n setIsAnyThumbHovered,\n setIsAnyThumbFocused,\n } = useContext(DSSliderV2Context);\n\n // Local state drives the tooltip, which is per handle. The context setters below mirror the same\n // transitions for the track, which is shared between handles in range mode.\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n\n const {\n ref,\n style: thumbStyle,\n key: unusedKeyDueToLibTypescriptIssues,\n onKeyDown: reactRangeOnKeyDownHandler,\n onKeyUp: reactRangeOnKeyUpHandler,\n ...propsFromReactRangeTookAsIs\n } = reactRangeOpinionatedProps;\n const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n // At a boundary the pointer lands on the thumb that cannot move; handing it to the other re-opens the range.\n const isPinnedAtBoundary =\n rangeValues.length === 2 &&\n ((index === 1 && rangeValues.every((v) => v === maxValue)) ||\n (index === 0 && rangeValues.every((v) => v === minValue)));\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n index,\n shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n }),\n [index, hasUserInteractedAfterFocus],\n );\n\n const sanitizedStyle = useMemo(() => {\n // as per https://jira.elliemae.io/browse/PUI-14390 and https://github.com/intcx/PLATFORM-UI.dimsum/pull/7046\n // we also want z-index: ${(props) => props.theme.zIndex.tooltip}; from the theme\n // I keep the same, just refactoring so the styles concerns are part of the styled component as expected\n // my understanding is that libInherithedStyles main purposes are:\n // - to position the element on the track with a transform: translate\n // - to handle the cursor:grab/grabbing based on interaction state\n const { zIndex, ...libInherithedStyles } = thumbStyle;\n // we want to keep the cursor grab/grabbing thing, but we want our own \"disabled\" cursor...\n if (disabled || applyAriaDisabled || readOnly) return { ...libInherithedStyles, cursor: 'not-allowed' };\n return libInherithedStyles;\n }, [applyAriaDisabled, disabled, readOnly, thumbStyle]);\n\n const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n setIsHovered(true);\n setIsFocused(false);\n setIsTooltipDismissed(false);\n setIsAnyThumbHovered(true);\n }, [setIsAnyThumbHovered]);\n const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n setIsHovered(false);\n setIsAnyThumbHovered(false);\n }, [setIsAnyThumbHovered]);\n\n const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n reactRangeOnKeyDownHandler?.(e);\n if (e.key === 'Escape' && showPopover) {\n // stoping propagation here is load-bearing\n // we are checking \"showPopover\" because if \"the popover exist\" it means the tooltip exist\n // if it exist and we are in a dialog, the first esc needs to close the tooltip, not the dialog.\n e.stopPropagation();\n setIsTooltipDismissed(true);\n setIsFocused(true);\n } else {\n setIsTooltipDismissed(false);\n }\n },\n [showPopover, reactRangeOnKeyDownHandler],\n );\n const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n reactRangeOnKeyUpHandler?.(e);\n // if we need to do anything on keyup too, this is where we will do it.\n },\n [reactRangeOnKeyUpHandler],\n );\n // react-range skips focus() under `draggableTrack` and its preventDefault blocks the native one.\n const focusThisThumb = useCallback(() => {\n if (disabled) return;\n (ref?.current as HTMLDivElement | null)?.focus();\n }, [disabled, ref]);\n\n const handleFocus = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIsFocused(true);\n setIsTooltipDismissed(false);\n setIsAnyThumbFocused(true);\n }, [setIsAnyThumbFocused]);\n const handleBlur = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIsFocused(false);\n setHasUserInteractedAfterFocus(false);\n setIsAnyThumbFocused(false);\n }, [setHasUserInteractedAfterFocus, setIsAnyThumbFocused]);\n\n return (\n <StyledThumb\n {...propsFromReactRangeTookAsIs}\n style={sanitizedStyle}\n innerRef={ref}\n disabled={disabled}\n $applyAriaDisabled={applyAriaDisabled}\n $readOnly={readOnly}\n $hasError={hasError}\n $isRaised={isDragged}\n $isPinnedAtBoundary={isPinnedAtBoundary}\n // dicussed with SME on 13/jul/2026, even if role='slider' technically accepts aria-readonly\n // - SRs support for aria-readonly is loose\n // - having both aria-readonly and aria-disabled is a violation\n // - aria-disabled transmit the same interaction pattern\n // therefore, we will not set aria-readonly and will rely on aria-disabled to convey the interaction pattern\n // aria-readonly={readOnly}\n aria-disabled={applyAriaDisabled || readOnly} // || readOnly as per previous comment\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseDown={focusThisThumb}\n onTouchStart={focusThisThumb}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onFocus={handleFocus}\n onBlur={handleBlur}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3 key={label} text={label} showPopover={showPopover} withoutAnimation>\n <span style={spanStyle}></span>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/styles.js
CHANGED
|
@@ -137,7 +137,11 @@ const StyledThumb = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.
|
|
|
137
137
|
width: 12px;
|
|
138
138
|
border-radius: 2px;
|
|
139
139
|
top: 0;
|
|
140
|
-
z-index: ${(props) => props.theme.zIndex.tooltip};
|
|
140
|
+
z-index: ${(props) => props.theme.zIndex.tooltip + (props.$isRaised ? 1 : 0)};
|
|
141
|
+
&:focus {
|
|
142
|
+
z-index: ${(props) => props.theme.zIndex.tooltip + 1};
|
|
143
|
+
}
|
|
144
|
+
pointer-events: ${(props) => props.$isPinnedAtBoundary ? "none" : "auto"};
|
|
141
145
|
${ThumbStates}
|
|
142
146
|
`;
|
|
143
147
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { getTrackBackground } from 'react-range';\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\n// Spec v1.5.0 uses the token names `Error-900` / `Error-200`. There is no `error` palette in the\n// theme \u2014 the key is `danger`, and these are its matching steps. Always reference the token, never\n// the hex: `danger[900]` and `danger[950]` are one step apart and easy to confuse.\nconst SPEC_ERROR_ACTIVE = 900;\nconst SPEC_ERROR_INACTIVE = 200;\n\ninterface TrackProps {\n disabled: boolean;\n $applyAriaDisabled: boolean;\n $readOnly: boolean;\n $hasError: boolean;\n $isAnyThumbHovered: boolean;\n $isAnyThumbFocused: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}\n\n/**\n * Spec v1.5.0 track colours, one branch per row of the state table.\n *\n * Precedence: disabled > aria-disabled / readOnly > error > focus > hover > idle. The first three\n * come from the standard Dim Sum interaction state hierarchy; focus over hover is because a handle\n * that is both focused and hovered reads as focused.\n *\n * `readOnly` shares the aria-disabled tokens. Spec v1.5.0 defines no read-only row, and the two\n * states are visually identical by design \u2014 see `.github/memories/project_interaction_states.md`.\n *\n * The blocked states keep their own track colours when focused: the spec's `Aria-Disabled + Focus`\n * row marks the track \"unchanged\" and moves only the handle border. Error follows the same shape by\n * analogy; the spec has no `Error + Focus` row.\n */\nconst TrackStates = css<TrackProps>`\n ${({\n theme,\n disabled,\n $applyAriaDisabled,\n $readOnly,\n $hasError,\n $isAnyThumbHovered,\n $isAnyThumbFocused,\n rangeValues,\n multiple,\n minValue,\n maxValue,\n }) => {\n const { neutral, brand, danger } = theme.colors;\n\n const pickColors = () => {\n if (disabled) return { active: neutral[400], inactive: neutral[300] };\n if ($applyAriaDisabled || $readOnly) return { active: neutral[500], inactive: neutral[300] };\n if ($hasError) return { active: danger[SPEC_ERROR_ACTIVE], inactive: danger[SPEC_ERROR_INACTIVE] };\n if ($isAnyThumbFocused) return { active: brand[800], inactive: neutral[400] };\n if ($isAnyThumbHovered) return { active: brand[700], inactive: neutral[400] };\n return { active: brand[600], inactive: neutral[400] };\n };\n const { active, inactive } = pickColors();\n\n // react-range paints the whole track as one gradient, so both segments are handed over together:\n // the range version has an inactive segment on each side of the selection.\n const reactRangeColors = multiple ? [inactive, active, inactive] : [active, inactive];\n\n return `background: ${getTrackBackground({\n values: rangeValues,\n colors: reactRangeColors,\n min: minValue,\n max: maxValue,\n })};`;\n }}\n`;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<TrackProps>`\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 ${TrackStates}\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`\n &:after {\n content: '';\n background: ${(props) => props.theme.colors.neutral['000']};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 4px;\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\n// Spec v1.5.0 asks the step value for `typography-variant: b2-Regular`. Naming a variant means the\n// design system's typography, not an ad-hoc font declaration \u2014 so the slot is the DSTypography\n// itself rather than a div wrapping one. Same shape as `StyledTitleTypography` in\n// ds-card-navigation, and it keeps the node count and the `data-testid` unchanged.\n//\n// This is also what makes the value respond to browser text resize: the variant's sizes are in rem\n// against the theme's root, so a 200% zoom scales them proportionally.\nexport const StyledTickMarkValue = styled(DSTypography, {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE,\n})<{\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(-50%);\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\ninterface ThumbProps {\n disabled: boolean;\n $applyAriaDisabled: boolean;\n $readOnly: boolean;\n $hasError: boolean;\n}\n\n/**\n * Spec v1.5.0 handle borders. Background is `N-000` in every state, so it is set once outside the\n * branches.\n *\n * Hover and focus stay as CSS pseudo-classes rather than reading the context flags, because the\n * border is per handle: in range mode hovering one handle must highlight that one only. The context\n * flags exist for the track, which is a single shared surface \u2014 see `useSliderV2.ts`.\n *\n * The cursor is not set here. react-range supplies grab/grabbing through inline styles, and the\n * not-allowed override for the blocked states is applied in `Thumb.tsx`, which is why the\n * `Disabled + Hover` and `Aria-Disabled + Hover` rows need no branch: they are cursor-only.\n */\nconst ThumbStates = css<ThumbProps>`\n ${({ theme, disabled, $applyAriaDisabled, $readOnly, $hasError }) => {\n const { neutral, brand, danger } = theme.colors;\n const background = `background-color: ${neutral['000']};`;\n // Focus survives a blocked state: `applyAriaDisabled` and `readOnly` keep focusability on\n // purpose, so the indicator has to remain visible.\n const focusRing = `:focus {\n border: 2px solid ${brand[800]};\n outline: unset;\n }`;\n\n // Native `disabled` cannot receive focus, which is why the spec marks `Disabled + Focus` N/A.\n if (disabled)\n return `\n ${background}\n border: 2px solid ${neutral[400]};\n `;\n\n if ($applyAriaDisabled || $readOnly)\n return `\n ${background}\n border: 2px solid ${neutral[500]};\n ${focusRing}`;\n\n if ($hasError)\n return `\n ${background}\n border: 2px solid ${danger[SPEC_ERROR_ACTIVE]};\n ${focusRing}`;\n\n return `\n ${background}\n border: 2px solid ${brand[600]};\n :hover {\n border: 2px solid ${brand[700]};\n }\n ${focusRing}`;\n }}\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<ThumbProps>`\n height: 20px;\n width: 12px;\n border-radius: 2px;\n top: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip};\n ${ThumbStates}\n`;\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { getTrackBackground } from 'react-range';\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\n// Spec v1.5.0 uses the token names `Error-900` / `Error-200`. There is no `error` palette in the\n// theme \u2014 the key is `danger`, and these are its matching steps. Always reference the token, never\n// the hex: `danger[900]` and `danger[950]` are one step apart and easy to confuse.\nconst SPEC_ERROR_ACTIVE = 900;\nconst SPEC_ERROR_INACTIVE = 200;\n\ninterface TrackProps {\n disabled: boolean;\n $applyAriaDisabled: boolean;\n $readOnly: boolean;\n $hasError: boolean;\n $isAnyThumbHovered: boolean;\n $isAnyThumbFocused: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}\n\n/**\n * Spec v1.5.0 track colours, one branch per row of the state table.\n *\n * Precedence: disabled > aria-disabled / readOnly > error > focus > hover > idle. The first three\n * come from the standard Dim Sum interaction state hierarchy; focus over hover is because a handle\n * that is both focused and hovered reads as focused.\n *\n * `readOnly` shares the aria-disabled tokens. Spec v1.5.0 defines no read-only row, and the two\n * states are visually identical by design \u2014 see `.github/memories/project_interaction_states.md`.\n *\n * The blocked states keep their own track colours when focused: the spec's `Aria-Disabled + Focus`\n * row marks the track \"unchanged\" and moves only the handle border. Error follows the same shape by\n * analogy; the spec has no `Error + Focus` row.\n */\nconst TrackStates = css<TrackProps>`\n ${({\n theme,\n disabled,\n $applyAriaDisabled,\n $readOnly,\n $hasError,\n $isAnyThumbHovered,\n $isAnyThumbFocused,\n rangeValues,\n multiple,\n minValue,\n maxValue,\n }) => {\n const { neutral, brand, danger } = theme.colors;\n\n const pickColors = () => {\n if (disabled) return { active: neutral[400], inactive: neutral[300] };\n if ($applyAriaDisabled || $readOnly) return { active: neutral[500], inactive: neutral[300] };\n if ($hasError) return { active: danger[SPEC_ERROR_ACTIVE], inactive: danger[SPEC_ERROR_INACTIVE] };\n if ($isAnyThumbFocused) return { active: brand[800], inactive: neutral[400] };\n if ($isAnyThumbHovered) return { active: brand[700], inactive: neutral[400] };\n return { active: brand[600], inactive: neutral[400] };\n };\n const { active, inactive } = pickColors();\n\n // react-range paints the whole track as one gradient, so both segments are handed over together:\n // the range version has an inactive segment on each side of the selection.\n const reactRangeColors = multiple ? [inactive, active, inactive] : [active, inactive];\n\n return `background: ${getTrackBackground({\n values: rangeValues,\n colors: reactRangeColors,\n min: minValue,\n max: maxValue,\n })};`;\n }}\n`;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<TrackProps>`\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 ${TrackStates}\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`\n &:after {\n content: '';\n background: ${(props) => props.theme.colors.neutral['000']};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 4px;\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\n// Spec v1.5.0 asks the step value for `typography-variant: b2-Regular`. Naming a variant means the\n// design system's typography, not an ad-hoc font declaration \u2014 so the slot is the DSTypography\n// itself rather than a div wrapping one. Same shape as `StyledTitleTypography` in\n// ds-card-navigation, and it keeps the node count and the `data-testid` unchanged.\n//\n// This is also what makes the value respond to browser text resize: the variant's sizes are in rem\n// against the theme's root, so a 200% zoom scales them proportionally.\nexport const StyledTickMarkValue = styled(DSTypography, {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE,\n})<{\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(-50%);\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\ninterface ThumbProps {\n disabled: boolean;\n $applyAriaDisabled: boolean;\n $readOnly: boolean;\n $hasError: boolean;\n $isRaised: boolean;\n $isPinnedAtBoundary: boolean;\n}\n\n/**\n * Spec v1.5.0 handle borders. Background is `N-000` in every state, so it is set once outside the\n * branches.\n *\n * Hover and focus stay as CSS pseudo-classes rather than reading the context flags, because the\n * border is per handle: in range mode hovering one handle must highlight that one only. The context\n * flags exist for the track, which is a single shared surface \u2014 see `useSliderV2.ts`.\n *\n * The cursor is not set here. react-range supplies grab/grabbing through inline styles, and the\n * not-allowed override for the blocked states is applied in `Thumb.tsx`, which is why the\n * `Disabled + Hover` and `Aria-Disabled + Hover` rows need no branch: they are cursor-only.\n */\nconst ThumbStates = css<ThumbProps>`\n ${({ theme, disabled, $applyAriaDisabled, $readOnly, $hasError }) => {\n const { neutral, brand, danger } = theme.colors;\n const background = `background-color: ${neutral['000']};`;\n // Focus survives a blocked state: `applyAriaDisabled` and `readOnly` keep focusability on\n // purpose, so the indicator has to remain visible.\n const focusRing = `:focus {\n border: 2px solid ${brand[800]};\n outline: unset;\n }`;\n\n // Native `disabled` cannot receive focus, which is why the spec marks `Disabled + Focus` N/A.\n if (disabled)\n return `\n ${background}\n border: 2px solid ${neutral[400]};\n `;\n\n if ($applyAriaDisabled || $readOnly)\n return `\n ${background}\n border: 2px solid ${neutral[500]};\n ${focusRing}`;\n\n if ($hasError)\n return `\n ${background}\n border: 2px solid ${danger[SPEC_ERROR_ACTIVE]};\n ${focusRing}`;\n\n return `\n ${background}\n border: 2px solid ${brand[600]};\n :hover {\n border: 2px solid ${brand[700]};\n }\n ${focusRing}`;\n }}\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<ThumbProps>`\n height: 20px;\n width: 12px;\n border-radius: 2px;\n top: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip + (props.$isRaised ? 1 : 0)};\n &:focus {\n z-index: ${(props) => props.theme.zIndex.tooltip + 1};\n }\n pointer-events: ${(props) => (props.$isPinnedAtBoundary ? 'none' : 'auto')};\n ${ThumbStates}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,KAAK,cAAc;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,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;AAK5G,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AA6B5B,MAAM,cAAc;AAAA,IAChB,CAAC;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAS,OAAO,OAAO,IAAI,MAAM;AAEzC,QAAM,aAAa,MAAM;AACvB,QAAI,SAAU,QAAO,EAAE,QAAQ,QAAQ,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AACpE,QAAI,sBAAsB,UAAW,QAAO,EAAE,QAAQ,QAAQ,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AAC3F,QAAI,UAAW,QAAO,EAAE,QAAQ,OAAO,iBAAiB,GAAG,UAAU,OAAO,mBAAmB,EAAE;AACjG,QAAI,mBAAoB,QAAO,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AAC5E,QAAI,mBAAoB,QAAO,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AAC5E,WAAO,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AAAA,EACtD;AACA,QAAM,EAAE,QAAQ,SAAS,IAAI,WAAW;AAIxC,QAAM,mBAAmB,WAAW,CAAC,UAAU,QAAQ,QAAQ,IAAI,CAAC,QAAQ,QAAQ;AAEpF,SAAO,eAAe,mBAAmB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,KAAK;AAAA,EACP,CAAC,CAAC;AACJ,CAAC;AAAA;AAGI,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA,YAElF,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,IAChD,WAAW;AAAA;AAGR,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,qBACzC,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;AAU/C,MAAM,sBAAsB,OAAO,cAAc;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMe,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA,WAEpC,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrG,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,kCAEiC,CAAC,UAAU,MAAM,WAAW,UAAU,CAAC,UAAU,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BpG,MAAM,cAAc;AAAA,IAChB,CAAC,EAAE,OAAO,UAAU,oBAAoB,WAAW,UAAU,MAAM;AACnE,QAAM,EAAE,SAAS,OAAO,OAAO,IAAI,MAAM;AACzC,QAAM,aAAa,qBAAqB,QAAQ,KAAK,CAAC;AAGtD,QAAM,YAAY;AAAA,4BACM,MAAM,GAAG,CAAC;AAAA;AAAA;AAKlC,MAAI;AACF,WAAO;AAAA,QACL,UAAU;AAAA,0BACQ,QAAQ,GAAG,CAAC;AAAA;AAGlC,MAAI,sBAAsB;AACxB,WAAO;AAAA,QACL,UAAU;AAAA,0BACQ,QAAQ,GAAG,CAAC;AAAA,QAC9B,SAAS;AAEb,MAAI;AACF,WAAO;AAAA,QACL,UAAU;AAAA,0BACQ,OAAO,iBAAiB,CAAC;AAAA,QAC3C,SAAS;AAEb,SAAO;AAAA,QACH,UAAU;AAAA,0BACQ,MAAM,GAAG,CAAC;AAAA;AAAA,4BAER,MAAM,GAAG,CAAC;AAAA;AAAA,QAE9B,SAAS;AACf,CAAC;AAAA;AAGI,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKjF,CAAC,UAAU,MAAM,MAAM,OAAO,WAAW,MAAM,YAAY,IAAI,EAAE;AAAA;AAAA,eAE/D,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA;AAAA,oBAEpC,CAAC,UAAW,MAAM,sBAAsB,SAAS,MAAO;AAAA,IACxE,WAAW;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,6 +27,8 @@ interface ThumbProps {
|
|
|
27
27
|
$applyAriaDisabled: boolean;
|
|
28
28
|
$readOnly: boolean;
|
|
29
29
|
$hasError: boolean;
|
|
30
|
+
$isRaised: boolean;
|
|
31
|
+
$isPinnedAtBoundary: boolean;
|
|
30
32
|
}
|
|
31
33
|
export declare const StyledThumb: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, ThumbProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
32
34
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-slider-v2",
|
|
3
|
-
"version": "3.80.0-next.
|
|
3
|
+
"version": "3.80.0-next.50",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Slider V 2",
|
|
6
6
|
"files": [
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-grid": "3.80.0-next.
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.80.0-next.
|
|
41
|
-
"@elliemae/ds-system": "3.80.0-next.
|
|
42
|
-
"@elliemae/ds-tooltip-v3": "3.80.0-next.
|
|
43
|
-
"@elliemae/ds-typescript-helpers": "3.80.0-next.
|
|
44
|
-
"@elliemae/ds-typography": "3.80.0-next.
|
|
39
|
+
"@elliemae/ds-grid": "3.80.0-next.50",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.80.0-next.50",
|
|
41
|
+
"@elliemae/ds-system": "3.80.0-next.50",
|
|
42
|
+
"@elliemae/ds-tooltip-v3": "3.80.0-next.50",
|
|
43
|
+
"@elliemae/ds-typescript-helpers": "3.80.0-next.50",
|
|
44
|
+
"@elliemae/ds-typography": "3.80.0-next.50",
|
|
45
45
|
"react-range": "~1.10.0",
|
|
46
46
|
"uid": "^2.0.2"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.80.0-next.
|
|
50
|
-
"@elliemae/ds-test-utils": "3.80.0-next.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.80.0-next.50",
|
|
50
|
+
"@elliemae/ds-test-utils": "3.80.0-next.50",
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"lodash-es": "^4.18.1",
|
|
53
53
|
"styled-components": "~5.3.11"
|