@mrshmllw/smores-react 9.25.0 → 9.26.0-crumbs-feature-improve-tooltip.2
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.
|
@@ -7,6 +7,7 @@ import { focusOutlineStyle } from '../../utils/focusOutline';
|
|
|
7
7
|
import { isReactElement } from '../../utils/isReactElement';
|
|
8
8
|
import { StyledCell } from './commonComponents';
|
|
9
9
|
import { Tooltip } from '../../Tooltip';
|
|
10
|
+
import { TooltipVariant } from '../../Tooltip/Tooltip';
|
|
10
11
|
export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }) => {
|
|
11
12
|
const handleAction = async (e, action) => {
|
|
12
13
|
e.stopPropagation();
|
|
@@ -30,7 +31,7 @@ export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggle
|
|
|
30
31
|
await handleAction(e, action.onClick);
|
|
31
32
|
} }, action.genericButton.children)),
|
|
32
33
|
!("element" in action) && action.iconButton &&
|
|
33
|
-
(action.iconButton?.tooltipText ? (React.createElement(Tooltip, { content: action.iconButton.tooltipText, position: 'bottom',
|
|
34
|
+
(action.iconButton?.tooltipText ? (React.createElement(Tooltip, { content: action.iconButton.tooltipText, position: 'bottom', variant: TooltipVariant.BUBBLEGUM },
|
|
34
35
|
React.createElement(IconStrict, { ...action.iconButton, handleClick: async (e) => {
|
|
35
36
|
await handleAction(e, action.onClick);
|
|
36
37
|
} }))) : (React.createElement(IconStrict, { ...action.iconButton, handleClick: async (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,28 +1,37 @@
|
|
|
1
1
|
import React, { FC, ReactNode } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
type Position = 'top' | 'bottom' | 'left' | 'right';
|
|
4
|
-
type ArrowPosition = Position | 'center';
|
|
2
|
+
import { type Placement } from '@floating-ui/react';
|
|
5
3
|
export interface TooltipProps {
|
|
6
4
|
children: ReactNode;
|
|
7
5
|
content: string | ReactNode;
|
|
8
|
-
position:
|
|
6
|
+
position: Placement;
|
|
9
7
|
maxWidth?: number;
|
|
10
8
|
title?: string;
|
|
11
9
|
underline?: boolean;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
variant?: TooltipVariant;
|
|
11
|
+
portalContainer?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
|
|
12
|
+
/**
|
|
13
|
+
* If true, the tooltip will position itself inline its children
|
|
14
|
+
*
|
|
15
|
+
* Used for inline content like blocks of text that span multiple lines
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* <Text>
|
|
20
|
+
* Marshmallow car insurance, the best insurance in town.
|
|
21
|
+
* <Tooltip inline content="Tooltip content">Hover here</Tooltip>
|
|
22
|
+
* to learn more as the Policy Holder
|
|
23
|
+
* </Text>
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
inline?: boolean;
|
|
27
|
+
}
|
|
28
|
+
export declare enum TooltipVariant {
|
|
29
|
+
PRIMARY = "PRIMARY",
|
|
30
|
+
FALLBACK = "FALLBACK",
|
|
31
|
+
BUBBLEGUM = "BUBBLEGUM"
|
|
16
32
|
}
|
|
17
33
|
export declare const Tooltip: FC<TooltipProps>;
|
|
18
|
-
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
19
34
|
export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
20
|
-
$showTip: boolean;
|
|
21
|
-
$position: Position;
|
|
22
|
-
$arrowPosition: ArrowPosition;
|
|
23
35
|
$maxWidth?: number;
|
|
24
|
-
$
|
|
25
|
-
$zIndex: number;
|
|
26
|
-
$background?: Color;
|
|
36
|
+
$background: string;
|
|
27
37
|
}>> & string;
|
|
28
|
-
export {};
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -1,262 +1,92 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { createPortal } from 'react-dom';
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
3
2
|
import styled, { css } from 'styled-components';
|
|
4
3
|
import { Box } from '../Box';
|
|
5
4
|
import { Text } from '../Text';
|
|
6
|
-
import { useEventListener } from '../hooks';
|
|
7
5
|
import { theme } from '../theme';
|
|
8
|
-
import {
|
|
9
|
-
export
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
import { autoUpdate, flip, FloatingPortal, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, arrow, FloatingArrow, inline, } from '@floating-ui/react';
|
|
7
|
+
export var TooltipVariant;
|
|
8
|
+
(function (TooltipVariant) {
|
|
9
|
+
TooltipVariant["PRIMARY"] = "PRIMARY";
|
|
10
|
+
TooltipVariant["FALLBACK"] = "FALLBACK";
|
|
11
|
+
TooltipVariant["BUBBLEGUM"] = "BUBBLEGUM";
|
|
12
|
+
})(TooltipVariant || (TooltipVariant = {}));
|
|
13
|
+
const tooltipVariants = {
|
|
14
|
+
[TooltipVariant.PRIMARY]: {
|
|
15
|
+
textColor: 'liquorice',
|
|
16
|
+
bgColor: 'custard',
|
|
17
|
+
},
|
|
18
|
+
[TooltipVariant.FALLBACK]: {
|
|
19
|
+
textColor: 'cream',
|
|
20
|
+
bgColor: 'feijoa',
|
|
21
|
+
},
|
|
22
|
+
[TooltipVariant.BUBBLEGUM]: {
|
|
23
|
+
textColor: 'liquorice',
|
|
24
|
+
bgColor: 'bubblegum',
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
const ARROW_HEIGHT = 8;
|
|
28
|
+
const GAP = 4;
|
|
29
|
+
export const Tooltip = ({ children, title, content, position, maxWidth = 500, underline = false, portalContainer, inline: inlineProp, variant = TooltipVariant.PRIMARY, }) => {
|
|
12
30
|
const [showTip, setShowTip] = useState(false);
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const [tooltipCoords, setTooltipCoords] = useState({ top: 0, left: 0 });
|
|
31
|
+
const arrowRef = useRef(null);
|
|
32
|
+
const variantValue = tooltipVariants[variant];
|
|
16
33
|
const randomId = crypto.randomUUID();
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
setTooltipPosition('top');
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
// if top out of bounds
|
|
33
|
-
if (dimensions.top < 0) {
|
|
34
|
-
setTooltipPosition('bottom');
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
// if right out of bounds
|
|
38
|
-
if (dimensions.right > window.innerWidth) {
|
|
39
|
-
setTooltipPosition('left');
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
// if left out of bounds
|
|
43
|
-
if (dimensions.left < 0) {
|
|
44
|
-
setTooltipPosition('right');
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
// If bottom out of bounds
|
|
48
|
-
if (dimensions.bottom > window.innerHeight) {
|
|
49
|
-
setTooltipPosition('top');
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
}, [tipContainer, tooltipPosition]);
|
|
53
|
-
useEffect(() => {
|
|
54
|
-
handleTipViewport();
|
|
55
|
-
setChildEl(document.getElementById(randomId));
|
|
56
|
-
}, []);
|
|
57
|
-
useEffect(() => {
|
|
58
|
-
setTooltipPosition(position);
|
|
59
|
-
}, [position]);
|
|
60
|
-
const arrowSize = 18;
|
|
61
|
-
const calculateTooltipPosition = () => {
|
|
62
|
-
if (!childEl)
|
|
63
|
-
return { top: 0, left: 0 };
|
|
64
|
-
if (!tipContainer.current)
|
|
65
|
-
return { top: 0, left: 0 };
|
|
66
|
-
const childPosition = childEl.getBoundingClientRect();
|
|
67
|
-
const tipDimensions = tipContainer.current.getBoundingClientRect();
|
|
68
|
-
let top = 0;
|
|
69
|
-
let left = 0;
|
|
70
|
-
switch (tooltipPosition) {
|
|
71
|
-
case 'top':
|
|
72
|
-
top =
|
|
73
|
-
childPosition.top + window.scrollY - tipDimensions.height - arrowSize;
|
|
74
|
-
left =
|
|
75
|
-
childPosition.left +
|
|
76
|
-
window.scrollX +
|
|
77
|
-
childPosition.width / 2 -
|
|
78
|
-
tipDimensions.width / 2;
|
|
79
|
-
break;
|
|
80
|
-
case 'bottom':
|
|
81
|
-
top = childPosition.bottom + window.scrollY + arrowSize;
|
|
82
|
-
left =
|
|
83
|
-
childPosition.left +
|
|
84
|
-
window.scrollX +
|
|
85
|
-
childPosition.width / 2 -
|
|
86
|
-
tipDimensions.width / 2;
|
|
87
|
-
break;
|
|
88
|
-
case 'left':
|
|
89
|
-
left =
|
|
90
|
-
childPosition.left + window.scrollX - tipDimensions.width - arrowSize;
|
|
91
|
-
top =
|
|
92
|
-
childPosition.top +
|
|
93
|
-
window.scrollY +
|
|
94
|
-
childPosition.height / 2 -
|
|
95
|
-
tipDimensions.height / 2;
|
|
96
|
-
break;
|
|
97
|
-
case 'right':
|
|
98
|
-
left = childPosition.right + window.scrollX + arrowSize;
|
|
99
|
-
top =
|
|
100
|
-
childPosition.top +
|
|
101
|
-
window.scrollY +
|
|
102
|
-
childPosition.height / 2 -
|
|
103
|
-
tipDimensions.height / 2;
|
|
104
|
-
break;
|
|
105
|
-
default:
|
|
106
|
-
break;
|
|
107
|
-
}
|
|
108
|
-
return { top, left };
|
|
109
|
-
};
|
|
110
|
-
useEffect(() => {
|
|
111
|
-
if (childEl) {
|
|
112
|
-
setTooltipCoords(calculateTooltipPosition());
|
|
113
|
-
}
|
|
114
|
-
}, [
|
|
115
|
-
position,
|
|
116
|
-
window.scrollY,
|
|
117
|
-
tipContainer.current,
|
|
118
|
-
childEl,
|
|
119
|
-
childEl?.getBoundingClientRect().top,
|
|
120
|
-
childEl?.getBoundingClientRect().left,
|
|
121
|
-
]);
|
|
122
|
-
useEventListener({
|
|
123
|
-
eventName: 'resize',
|
|
124
|
-
callback: debounce(handleTipViewport, 100),
|
|
125
|
-
ref: documentRef,
|
|
126
|
-
});
|
|
127
|
-
useEventListener({
|
|
128
|
-
eventName: 'scroll',
|
|
129
|
-
callback: debounce(handleTipViewport, 100),
|
|
130
|
-
ref: documentRef,
|
|
34
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
35
|
+
open: showTip,
|
|
36
|
+
placement: position,
|
|
37
|
+
onOpenChange: setShowTip,
|
|
38
|
+
middleware: [
|
|
39
|
+
offset(ARROW_HEIGHT + GAP),
|
|
40
|
+
flip(),
|
|
41
|
+
shift(),
|
|
42
|
+
inlineProp ? inline() : undefined,
|
|
43
|
+
arrow({ element: arrowRef, padding: 14 }),
|
|
44
|
+
],
|
|
45
|
+
whileElementsMounted: autoUpdate,
|
|
131
46
|
});
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
47
|
+
const hover = useHover(context, { move: false });
|
|
48
|
+
const focus = useFocus(context);
|
|
49
|
+
const dismiss = useDismiss(context);
|
|
50
|
+
const role = useRole(context, { role: 'tooltip' });
|
|
51
|
+
// Merge all the interactions into prop getters
|
|
52
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
53
|
+
hover,
|
|
54
|
+
focus,
|
|
55
|
+
dismiss,
|
|
56
|
+
role,
|
|
57
|
+
]);
|
|
58
|
+
return (React.createElement(React.Fragment, null,
|
|
59
|
+
React.createElement(UnderlinedChild, { id: randomId, "$underline": underline, ref: refs.setReference, ...getReferenceProps() }, children),
|
|
60
|
+
showTip && (React.createElement(FloatingPortal, { root: portalContainer },
|
|
61
|
+
React.createElement(Tip, { ref: refs.setFloating, className: "tooltip", "$maxWidth": maxWidth, "$background": theme.colors[variantValue.bgColor], style: floatingStyles, ...getFloatingProps() },
|
|
62
|
+
React.createElement(FloatingArrow, { ref: arrowRef, context: context, fill: theme.colors[variantValue.bgColor] }),
|
|
63
|
+
title && (React.createElement(Text, { tag: "h5", typo: "desc-medium", color: variantValue.textColor }, title)),
|
|
64
|
+
(typeof content === 'string' && (React.createElement(Text, { typo: "desc-light", color: variantValue.textColor }, content))) ||
|
|
65
|
+
content)))));
|
|
143
66
|
};
|
|
144
|
-
export const Container = styled.div `
|
|
145
|
-
display: flex;
|
|
146
|
-
align-items: center;
|
|
147
|
-
justify-content: center;
|
|
148
|
-
|
|
149
|
-
> span:hover + .tooltip {
|
|
150
|
-
opacity: 1;
|
|
151
|
-
}
|
|
152
|
-
`;
|
|
153
67
|
const UnderlinedChild = styled(Box) `
|
|
154
68
|
cursor: pointer;
|
|
69
|
+
width: fit-content;
|
|
70
|
+
display: inline;
|
|
71
|
+
|
|
155
72
|
${({ $underline }) => $underline &&
|
|
156
73
|
css `
|
|
157
74
|
border-bottom: 1px dashed ${theme.colors.marshmallowPink};
|
|
158
75
|
`}
|
|
159
76
|
`;
|
|
160
|
-
const arrowInset = 26;
|
|
161
|
-
const arrowCenterPosition = 'calc(50% - 6px)';
|
|
162
|
-
const arrowVerticalCenter = 'calc(50% - 12px)';
|
|
163
|
-
const handleHorizontalArrowPosition = (arrowPosition) => {
|
|
164
|
-
switch (arrowPosition) {
|
|
165
|
-
case 'left':
|
|
166
|
-
return css `
|
|
167
|
-
left: ${arrowInset}px;
|
|
168
|
-
`;
|
|
169
|
-
case 'right':
|
|
170
|
-
return css `
|
|
171
|
-
right: ${arrowInset}px;
|
|
172
|
-
`;
|
|
173
|
-
default:
|
|
174
|
-
return css `
|
|
175
|
-
left: ${arrowCenterPosition};
|
|
176
|
-
`;
|
|
177
|
-
}
|
|
178
|
-
};
|
|
179
|
-
const handleVerticalArrowPosition = (arrowPosition) => {
|
|
180
|
-
switch (arrowPosition) {
|
|
181
|
-
case 'top':
|
|
182
|
-
return css `
|
|
183
|
-
top: ${arrowInset}px;
|
|
184
|
-
`;
|
|
185
|
-
case 'bottom':
|
|
186
|
-
return css `
|
|
187
|
-
bottom: ${arrowInset}px;
|
|
188
|
-
`;
|
|
189
|
-
default:
|
|
190
|
-
return css `
|
|
191
|
-
top: ${arrowVerticalCenter};
|
|
192
|
-
`;
|
|
193
|
-
}
|
|
194
|
-
};
|
|
195
|
-
const top = css `
|
|
196
|
-
&:before {
|
|
197
|
-
bottom: -15px;
|
|
198
|
-
transform: rotate(-90deg);
|
|
199
|
-
${({ $arrowPosition }) => handleHorizontalArrowPosition($arrowPosition)}
|
|
200
|
-
}
|
|
201
|
-
`;
|
|
202
|
-
const bottom = css `
|
|
203
|
-
&:before {
|
|
204
|
-
top: -15px;
|
|
205
|
-
transform: rotate(90deg);
|
|
206
|
-
${({ $arrowPosition }) => handleHorizontalArrowPosition($arrowPosition)}
|
|
207
|
-
}
|
|
208
|
-
`;
|
|
209
|
-
const left = css `
|
|
210
|
-
&:before {
|
|
211
|
-
right: -11px;
|
|
212
|
-
transform: rotate(180deg);
|
|
213
|
-
${({ $arrowPosition }) => handleVerticalArrowPosition($arrowPosition)}
|
|
214
|
-
}
|
|
215
|
-
`;
|
|
216
|
-
const right = css `
|
|
217
|
-
&:before {
|
|
218
|
-
left: -11px;
|
|
219
|
-
${({ $arrowPosition }) => handleVerticalArrowPosition($arrowPosition)}
|
|
220
|
-
}
|
|
221
|
-
`;
|
|
222
77
|
export const Tip = styled.div `
|
|
223
78
|
position: absolute;
|
|
224
79
|
margin: auto;
|
|
225
|
-
|
|
80
|
+
z-index: 1000;
|
|
81
|
+
background: ${({ $background }) => $background};
|
|
226
82
|
padding: 16px 12px 20px;
|
|
227
83
|
border-radius: 16px;
|
|
228
84
|
max-width: 450px;
|
|
229
|
-
opacity: ${({ $showTip }) => ($showTip ? '1' : '0')};
|
|
230
|
-
transition: opacity 0.2s ease-in-out;
|
|
231
85
|
pointer-events: none;
|
|
232
86
|
cursor: default;
|
|
233
|
-
z-index: ${({ $zIndex }) => ($zIndex ? $zIndex : '10')};
|
|
234
87
|
|
|
235
88
|
// this is the trick that will make sure the content can go up to maxWidth
|
|
236
89
|
margin-right: ${({ $maxWidth }) => $maxWidth && -$maxWidth / 2 + 'px'};
|
|
237
90
|
max-width: ${({ $maxWidth }) => $maxWidth && $maxWidth + 'px'};
|
|
238
|
-
|
|
239
|
-
${({ $arrowPosition }) => $arrowPosition === 'top' && top}
|
|
240
|
-
${({ $arrowPosition }) => $arrowPosition === 'bottom' && bottom}
|
|
241
|
-
${({ $arrowPosition }) => $arrowPosition === 'left' && left}
|
|
242
|
-
${({ $arrowPosition }) => $arrowPosition === 'right' && right}
|
|
243
|
-
|
|
244
|
-
&:before {
|
|
245
|
-
content: '';
|
|
246
|
-
border-style: solid;
|
|
247
|
-
border-width: 12px 12px 12px 0;
|
|
248
|
-
border-color: transparent
|
|
249
|
-
${({ $background }) => $background ? theme.colors[$background] : theme.colors.custard}
|
|
250
|
-
transparent transparent;
|
|
251
|
-
position: absolute;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
${({ $fallbackStyle }) => $fallbackStyle &&
|
|
255
|
-
css `
|
|
256
|
-
background: ${theme.colors.feijoa};
|
|
257
|
-
&:before {
|
|
258
|
-
border-color: transparent ${theme.colors.feijoa} transparent transparent;
|
|
259
|
-
}
|
|
260
|
-
`};
|
|
261
91
|
`;
|
|
262
92
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.26.0-crumbs-feature-improve-tooltip.2",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"keywords": [
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"fix-package-lock-conflicts": "echo \"Make sure conflicts in package.json are resolved before running this script\" && npm i --package-lock-only"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@babel/core": "^7.
|
|
37
|
-
"@babel/eslint-parser": "^7.25.
|
|
38
|
-
"@babel/plugin-transform-class-properties": "^7.25.
|
|
39
|
-
"@babel/preset-env": "^7.
|
|
40
|
-
"@babel/preset-react": "^7.25.
|
|
41
|
-
"@babel/preset-typescript": "^7.
|
|
36
|
+
"@babel/core": "^7.26.0",
|
|
37
|
+
"@babel/eslint-parser": "^7.25.9",
|
|
38
|
+
"@babel/plugin-transform-class-properties": "^7.25.9",
|
|
39
|
+
"@babel/preset-env": "^7.26.0",
|
|
40
|
+
"@babel/preset-react": "^7.25.9",
|
|
41
|
+
"@babel/preset-typescript": "^7.26.0",
|
|
42
42
|
"@commitlint/cli": "^19.5.0",
|
|
43
43
|
"@commitlint/types": "^19.5.0",
|
|
44
44
|
"@semantic-release/changelog": "^6.0.3",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"react": "^18.2.0",
|
|
77
77
|
"react-dom": "^18.2.0",
|
|
78
78
|
"rimraf": "^6.0.1",
|
|
79
|
-
"semantic-release": "^24.
|
|
79
|
+
"semantic-release": "^24.2.0",
|
|
80
80
|
"storybook": "^8.0.4",
|
|
81
81
|
"styled-components": "^6.1.13",
|
|
82
82
|
"typescript": "^5.6.3",
|
|
@@ -84,6 +84,7 @@
|
|
|
84
84
|
"vitest": "^2.1.4"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
|
+
"@floating-ui/react": "0.26.27",
|
|
87
88
|
"@lexical/react": "^0.18.0",
|
|
88
89
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
89
90
|
"date-fns": "^4.1.0",
|