@deepnoid/ui 0.0.103 → 0.0.105
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/{chunk-DSBSLSJW.mjs → chunk-KCBBBRSF.mjs} +11 -1
- package/dist/{chunk-FY5YCQL5.mjs → chunk-U74WK5VI.mjs} +27 -17
- package/dist/components/dateTimePicker/dateTimePicker.mjs +3 -3
- package/dist/components/dateTimePicker/index.mjs +3 -3
- package/dist/components/tooltip/index.d.mts +1 -1
- package/dist/components/tooltip/index.d.ts +1 -1
- package/dist/components/tooltip/index.js +37 -17
- package/dist/components/tooltip/index.mjs +2 -2
- package/dist/components/tooltip/tooltip-utils.d.mts +1 -1
- package/dist/components/tooltip/tooltip-utils.d.ts +1 -1
- package/dist/components/tooltip/tooltip.d.mts +2 -1
- package/dist/components/tooltip/tooltip.d.ts +2 -1
- package/dist/components/tooltip/tooltip.js +37 -17
- package/dist/components/tooltip/tooltip.mjs +2 -2
- package/dist/components/tooltip/tooltip.test.js +37 -17
- package/dist/components/tooltip/tooltip.test.mjs +2 -2
- package/dist/components/tooltip/useTooltip.d.mts +1 -1
- package/dist/components/tooltip/useTooltip.d.ts +1 -1
- package/dist/components/tooltip/useTooltip.js +11 -1
- package/dist/components/tooltip/useTooltip.mjs +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +37 -17
- package/dist/index.mjs +25 -25
- package/dist/{tooltip-utils-CrCabndd.d.ts → tooltip-utils-DR0UEfBN.d.mts} +1 -0
- package/dist/{tooltip-utils-CrCabndd.d.mts → tooltip-utils-DR0UEfBN.d.ts} +1 -0
- package/package.json +1 -1
- package/dist/{chunk-TSMVRGDO.mjs → chunk-466PGIGU.mjs} +3 -3
|
@@ -20,7 +20,17 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
20
20
|
right: targetRect.right + scrollX,
|
|
21
21
|
bottom: targetRect.bottom + scrollY
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
let { tooltipX, tooltipY } = getTooltipPosition(placement, adjustedTargetRect, width, height, offset);
|
|
24
|
+
if (tooltipY < 0) {
|
|
25
|
+
tooltipY = adjustedTargetRect.bottom + offset;
|
|
26
|
+
} else if (tooltipY + height > window.innerHeight) {
|
|
27
|
+
tooltipY = adjustedTargetRect.top - height - offset;
|
|
28
|
+
}
|
|
29
|
+
if (tooltipX < 0) {
|
|
30
|
+
tooltipX = adjustedTargetRect.left;
|
|
31
|
+
} else if (tooltipX + width > window.innerWidth) {
|
|
32
|
+
tooltipX = adjustedTargetRect.right - width;
|
|
33
|
+
}
|
|
24
34
|
setTooltipPosition({ x: tooltipX, y: tooltipY });
|
|
25
35
|
}
|
|
26
36
|
}, [placement, offset, targetRect]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
useTooltip
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-KCBBBRSF.mjs";
|
|
5
5
|
import {
|
|
6
6
|
mapPropsVariants
|
|
7
7
|
} from "./chunk-E3G5QXSH.mjs";
|
|
@@ -15,11 +15,12 @@ import { createPortal } from "react-dom";
|
|
|
15
15
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
16
16
|
var Tooltip = forwardRef((originalProps, ref) => {
|
|
17
17
|
const [props, variantProps] = mapPropsVariants(originalProps, tooltip.variantKeys);
|
|
18
|
-
const { placement = "bottom", offset = 5, classNames, ...tooltipProps } = props;
|
|
18
|
+
const { placement = "bottom", offset = 5, delay = 100, classNames, ...tooltipProps } = props;
|
|
19
19
|
const slots = useMemo(() => tooltip({ ...variantProps }), [variantProps]);
|
|
20
20
|
const [targetRect, setTargetRect] = useState(null);
|
|
21
|
-
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, targetRect });
|
|
21
|
+
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, delay, targetRect });
|
|
22
22
|
const childrenRef = useRef(null);
|
|
23
|
+
const delayTimeout = useRef(null);
|
|
23
24
|
const getBaseProps = useCallback(
|
|
24
25
|
() => ({
|
|
25
26
|
className: slots.base({ class: classNames == null ? void 0 : classNames.base })
|
|
@@ -32,26 +33,31 @@ var Tooltip = forwardRef((originalProps, ref) => {
|
|
|
32
33
|
}),
|
|
33
34
|
[slots, classNames == null ? void 0 : classNames.content]
|
|
34
35
|
);
|
|
36
|
+
const handleMouseEnter = useCallback(() => {
|
|
37
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
38
|
+
if (childrenRef.current) {
|
|
39
|
+
const rect = childrenRef.current.getBoundingClientRect();
|
|
40
|
+
setTargetRect({
|
|
41
|
+
width: rect.width,
|
|
42
|
+
height: rect.height,
|
|
43
|
+
left: rect.left,
|
|
44
|
+
top: rect.top,
|
|
45
|
+
right: rect.right,
|
|
46
|
+
bottom: rect.bottom
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
}, []);
|
|
50
|
+
const handleMouseLeave = useCallback(() => {
|
|
51
|
+
delayTimeout.current = window.setTimeout(() => setTargetRect(null), delay);
|
|
52
|
+
}, [delay]);
|
|
35
53
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
36
54
|
/* @__PURE__ */ jsx(
|
|
37
55
|
"div",
|
|
38
56
|
{
|
|
39
57
|
ref: ref || childrenRef,
|
|
40
58
|
...getBaseProps(),
|
|
41
|
-
onPointerLeave:
|
|
42
|
-
onPointerEnter:
|
|
43
|
-
if (childrenRef.current) {
|
|
44
|
-
const rect = childrenRef.current.getBoundingClientRect();
|
|
45
|
-
setTargetRect({
|
|
46
|
-
width: rect.width,
|
|
47
|
-
height: rect.height,
|
|
48
|
-
left: rect.left,
|
|
49
|
-
top: rect.top,
|
|
50
|
-
right: rect.right,
|
|
51
|
-
bottom: rect.bottom
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
},
|
|
59
|
+
onPointerLeave: handleMouseLeave,
|
|
60
|
+
onPointerEnter: handleMouseEnter,
|
|
55
61
|
children: props.children
|
|
56
62
|
}
|
|
57
63
|
),
|
|
@@ -61,6 +67,10 @@ var Tooltip = forwardRef((originalProps, ref) => {
|
|
|
61
67
|
{
|
|
62
68
|
ref: tooltipRef,
|
|
63
69
|
...getContentProps(),
|
|
70
|
+
onPointerEnter: () => {
|
|
71
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
72
|
+
},
|
|
73
|
+
onPointerLeave: handleMouseLeave,
|
|
64
74
|
style: {
|
|
65
75
|
visibility: tooltipPosition.x !== 0 ? "visible" : "hidden",
|
|
66
76
|
transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
import {
|
|
3
3
|
dateTimePickerStyle,
|
|
4
4
|
dateTimePicker_default
|
|
5
|
-
} from "../../chunk-
|
|
6
|
-
import "../../chunk-FWJ2ZKH6.mjs";
|
|
5
|
+
} from "../../chunk-466PGIGU.mjs";
|
|
7
6
|
import "../../chunk-FDKT4IBP.mjs";
|
|
8
|
-
import "../../chunk-P732YGHO.mjs";
|
|
9
7
|
import "../../chunk-BCN5F2MN.mjs";
|
|
10
8
|
import "../../chunk-7MVEAQ7Z.mjs";
|
|
11
9
|
import "../../chunk-EYY4CRRR.mjs";
|
|
12
10
|
import "../../chunk-V77MALL4.mjs";
|
|
11
|
+
import "../../chunk-FWJ2ZKH6.mjs";
|
|
12
|
+
import "../../chunk-P732YGHO.mjs";
|
|
13
13
|
import "../../chunk-ZYIIXWVY.mjs";
|
|
14
14
|
import "../../chunk-LCI6RPWE.mjs";
|
|
15
15
|
import "../../chunk-IOCRFIQF.mjs";
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
import "../../chunk-75HLCORR.mjs";
|
|
3
3
|
import {
|
|
4
4
|
dateTimePicker_default
|
|
5
|
-
} from "../../chunk-
|
|
6
|
-
import "../../chunk-FWJ2ZKH6.mjs";
|
|
5
|
+
} from "../../chunk-466PGIGU.mjs";
|
|
7
6
|
import "../../chunk-FDKT4IBP.mjs";
|
|
8
|
-
import "../../chunk-P732YGHO.mjs";
|
|
9
7
|
import "../../chunk-BCN5F2MN.mjs";
|
|
10
8
|
import "../../chunk-7MVEAQ7Z.mjs";
|
|
11
9
|
import "../../chunk-EYY4CRRR.mjs";
|
|
12
10
|
import "../../chunk-V77MALL4.mjs";
|
|
11
|
+
import "../../chunk-FWJ2ZKH6.mjs";
|
|
12
|
+
import "../../chunk-P732YGHO.mjs";
|
|
13
13
|
import "../../chunk-ZYIIXWVY.mjs";
|
|
14
14
|
import "../../chunk-LCI6RPWE.mjs";
|
|
15
15
|
import "../../chunk-IOCRFIQF.mjs";
|
|
@@ -143,7 +143,17 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
143
143
|
right: targetRect.right + scrollX,
|
|
144
144
|
bottom: targetRect.bottom + scrollY
|
|
145
145
|
};
|
|
146
|
-
|
|
146
|
+
let { tooltipX, tooltipY } = getTooltipPosition(placement, adjustedTargetRect, width, height, offset);
|
|
147
|
+
if (tooltipY < 0) {
|
|
148
|
+
tooltipY = adjustedTargetRect.bottom + offset;
|
|
149
|
+
} else if (tooltipY + height > window.innerHeight) {
|
|
150
|
+
tooltipY = adjustedTargetRect.top - height - offset;
|
|
151
|
+
}
|
|
152
|
+
if (tooltipX < 0) {
|
|
153
|
+
tooltipX = adjustedTargetRect.left;
|
|
154
|
+
} else if (tooltipX + width > window.innerWidth) {
|
|
155
|
+
tooltipX = adjustedTargetRect.right - width;
|
|
156
|
+
}
|
|
147
157
|
setTooltipPosition({ x: tooltipX, y: tooltipY });
|
|
148
158
|
}
|
|
149
159
|
}, [placement, offset, targetRect]);
|
|
@@ -154,11 +164,12 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
154
164
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
155
165
|
var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
156
166
|
const [props, variantProps] = mapPropsVariants(originalProps, tooltip.variantKeys);
|
|
157
|
-
const { placement = "bottom", offset = 5, classNames, ...tooltipProps } = props;
|
|
167
|
+
const { placement = "bottom", offset = 5, delay = 100, classNames, ...tooltipProps } = props;
|
|
158
168
|
const slots = (0, import_react2.useMemo)(() => tooltip({ ...variantProps }), [variantProps]);
|
|
159
169
|
const [targetRect, setTargetRect] = (0, import_react2.useState)(null);
|
|
160
|
-
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, targetRect });
|
|
170
|
+
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, delay, targetRect });
|
|
161
171
|
const childrenRef = (0, import_react2.useRef)(null);
|
|
172
|
+
const delayTimeout = (0, import_react2.useRef)(null);
|
|
162
173
|
const getBaseProps = (0, import_react2.useCallback)(
|
|
163
174
|
() => ({
|
|
164
175
|
className: slots.base({ class: classNames == null ? void 0 : classNames.base })
|
|
@@ -171,26 +182,31 @@ var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
|
171
182
|
}),
|
|
172
183
|
[slots, classNames == null ? void 0 : classNames.content]
|
|
173
184
|
);
|
|
185
|
+
const handleMouseEnter = (0, import_react2.useCallback)(() => {
|
|
186
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
187
|
+
if (childrenRef.current) {
|
|
188
|
+
const rect = childrenRef.current.getBoundingClientRect();
|
|
189
|
+
setTargetRect({
|
|
190
|
+
width: rect.width,
|
|
191
|
+
height: rect.height,
|
|
192
|
+
left: rect.left,
|
|
193
|
+
top: rect.top,
|
|
194
|
+
right: rect.right,
|
|
195
|
+
bottom: rect.bottom
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
}, []);
|
|
199
|
+
const handleMouseLeave = (0, import_react2.useCallback)(() => {
|
|
200
|
+
delayTimeout.current = window.setTimeout(() => setTargetRect(null), delay);
|
|
201
|
+
}, [delay]);
|
|
174
202
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
175
203
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
176
204
|
"div",
|
|
177
205
|
{
|
|
178
206
|
ref: ref || childrenRef,
|
|
179
207
|
...getBaseProps(),
|
|
180
|
-
onPointerLeave:
|
|
181
|
-
onPointerEnter:
|
|
182
|
-
if (childrenRef.current) {
|
|
183
|
-
const rect = childrenRef.current.getBoundingClientRect();
|
|
184
|
-
setTargetRect({
|
|
185
|
-
width: rect.width,
|
|
186
|
-
height: rect.height,
|
|
187
|
-
left: rect.left,
|
|
188
|
-
top: rect.top,
|
|
189
|
-
right: rect.right,
|
|
190
|
-
bottom: rect.bottom
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
},
|
|
208
|
+
onPointerLeave: handleMouseLeave,
|
|
209
|
+
onPointerEnter: handleMouseEnter,
|
|
194
210
|
children: props.children
|
|
195
211
|
}
|
|
196
212
|
),
|
|
@@ -200,6 +216,10 @@ var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
|
200
216
|
{
|
|
201
217
|
ref: tooltipRef,
|
|
202
218
|
...getContentProps(),
|
|
219
|
+
onPointerEnter: () => {
|
|
220
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
221
|
+
},
|
|
222
|
+
onPointerLeave: handleMouseLeave,
|
|
203
223
|
style: {
|
|
204
224
|
visibility: tooltipPosition.x !== 0 ? "visible" : "hidden",
|
|
205
225
|
transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import "../../chunk-HIE2YRGA.mjs";
|
|
3
3
|
import {
|
|
4
4
|
tooltip_default
|
|
5
|
-
} from "../../chunk-
|
|
6
|
-
import "../../chunk-
|
|
5
|
+
} from "../../chunk-U74WK5VI.mjs";
|
|
6
|
+
import "../../chunk-KCBBBRSF.mjs";
|
|
7
7
|
import "../../chunk-ODMRJXLJ.mjs";
|
|
8
8
|
import "../../chunk-E3G5QXSH.mjs";
|
|
9
9
|
import "../../chunk-J725QONZ.mjs";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { T as TooltipPlacement, g as getTooltipPosition } from '../../tooltip-utils-
|
|
1
|
+
export { T as TooltipPlacement, g as getTooltipPosition } from '../../tooltip-utils-DR0UEfBN.mjs';
|
|
2
2
|
import 'react';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { T as TooltipPlacement, g as getTooltipPosition } from '../../tooltip-utils-
|
|
1
|
+
export { T as TooltipPlacement, g as getTooltipPosition } from '../../tooltip-utils-DR0UEfBN.js';
|
|
2
2
|
import 'react';
|
|
@@ -4,12 +4,13 @@ import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
6
|
import { SlotsToClasses } from '../../utils/types.mjs';
|
|
7
|
-
import { T as TooltipPlacement } from '../../tooltip-utils-
|
|
7
|
+
import { T as TooltipPlacement } from '../../tooltip-utils-DR0UEfBN.mjs';
|
|
8
8
|
|
|
9
9
|
interface Props {
|
|
10
10
|
children?: ReactNode;
|
|
11
11
|
content?: ReactNode | string;
|
|
12
12
|
offset?: number;
|
|
13
|
+
delay?: number;
|
|
13
14
|
placement?: TooltipPlacement;
|
|
14
15
|
classNames?: SlotsToClasses<TooltipSlots>;
|
|
15
16
|
}
|
|
@@ -4,12 +4,13 @@ import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
6
|
import { SlotsToClasses } from '../../utils/types.js';
|
|
7
|
-
import { T as TooltipPlacement } from '../../tooltip-utils-
|
|
7
|
+
import { T as TooltipPlacement } from '../../tooltip-utils-DR0UEfBN.js';
|
|
8
8
|
|
|
9
9
|
interface Props {
|
|
10
10
|
children?: ReactNode;
|
|
11
11
|
content?: ReactNode | string;
|
|
12
12
|
offset?: number;
|
|
13
|
+
delay?: number;
|
|
13
14
|
placement?: TooltipPlacement;
|
|
14
15
|
classNames?: SlotsToClasses<TooltipSlots>;
|
|
15
16
|
}
|
|
@@ -141,7 +141,17 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
141
141
|
right: targetRect.right + scrollX,
|
|
142
142
|
bottom: targetRect.bottom + scrollY
|
|
143
143
|
};
|
|
144
|
-
|
|
144
|
+
let { tooltipX, tooltipY } = getTooltipPosition(placement, adjustedTargetRect, width, height, offset);
|
|
145
|
+
if (tooltipY < 0) {
|
|
146
|
+
tooltipY = adjustedTargetRect.bottom + offset;
|
|
147
|
+
} else if (tooltipY + height > window.innerHeight) {
|
|
148
|
+
tooltipY = adjustedTargetRect.top - height - offset;
|
|
149
|
+
}
|
|
150
|
+
if (tooltipX < 0) {
|
|
151
|
+
tooltipX = adjustedTargetRect.left;
|
|
152
|
+
} else if (tooltipX + width > window.innerWidth) {
|
|
153
|
+
tooltipX = adjustedTargetRect.right - width;
|
|
154
|
+
}
|
|
145
155
|
setTooltipPosition({ x: tooltipX, y: tooltipY });
|
|
146
156
|
}
|
|
147
157
|
}, [placement, offset, targetRect]);
|
|
@@ -152,11 +162,12 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
152
162
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
153
163
|
var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
154
164
|
const [props, variantProps] = mapPropsVariants(originalProps, tooltip.variantKeys);
|
|
155
|
-
const { placement = "bottom", offset = 5, classNames, ...tooltipProps } = props;
|
|
165
|
+
const { placement = "bottom", offset = 5, delay = 100, classNames, ...tooltipProps } = props;
|
|
156
166
|
const slots = (0, import_react2.useMemo)(() => tooltip({ ...variantProps }), [variantProps]);
|
|
157
167
|
const [targetRect, setTargetRect] = (0, import_react2.useState)(null);
|
|
158
|
-
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, targetRect });
|
|
168
|
+
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, delay, targetRect });
|
|
159
169
|
const childrenRef = (0, import_react2.useRef)(null);
|
|
170
|
+
const delayTimeout = (0, import_react2.useRef)(null);
|
|
160
171
|
const getBaseProps = (0, import_react2.useCallback)(
|
|
161
172
|
() => ({
|
|
162
173
|
className: slots.base({ class: classNames == null ? void 0 : classNames.base })
|
|
@@ -169,26 +180,31 @@ var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
|
169
180
|
}),
|
|
170
181
|
[slots, classNames == null ? void 0 : classNames.content]
|
|
171
182
|
);
|
|
183
|
+
const handleMouseEnter = (0, import_react2.useCallback)(() => {
|
|
184
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
185
|
+
if (childrenRef.current) {
|
|
186
|
+
const rect = childrenRef.current.getBoundingClientRect();
|
|
187
|
+
setTargetRect({
|
|
188
|
+
width: rect.width,
|
|
189
|
+
height: rect.height,
|
|
190
|
+
left: rect.left,
|
|
191
|
+
top: rect.top,
|
|
192
|
+
right: rect.right,
|
|
193
|
+
bottom: rect.bottom
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
}, []);
|
|
197
|
+
const handleMouseLeave = (0, import_react2.useCallback)(() => {
|
|
198
|
+
delayTimeout.current = window.setTimeout(() => setTargetRect(null), delay);
|
|
199
|
+
}, [delay]);
|
|
172
200
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
173
201
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
174
202
|
"div",
|
|
175
203
|
{
|
|
176
204
|
ref: ref || childrenRef,
|
|
177
205
|
...getBaseProps(),
|
|
178
|
-
onPointerLeave:
|
|
179
|
-
onPointerEnter:
|
|
180
|
-
if (childrenRef.current) {
|
|
181
|
-
const rect = childrenRef.current.getBoundingClientRect();
|
|
182
|
-
setTargetRect({
|
|
183
|
-
width: rect.width,
|
|
184
|
-
height: rect.height,
|
|
185
|
-
left: rect.left,
|
|
186
|
-
top: rect.top,
|
|
187
|
-
right: rect.right,
|
|
188
|
-
bottom: rect.bottom
|
|
189
|
-
});
|
|
190
|
-
}
|
|
191
|
-
},
|
|
206
|
+
onPointerLeave: handleMouseLeave,
|
|
207
|
+
onPointerEnter: handleMouseEnter,
|
|
192
208
|
children: props.children
|
|
193
209
|
}
|
|
194
210
|
),
|
|
@@ -198,6 +214,10 @@ var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
|
198
214
|
{
|
|
199
215
|
ref: tooltipRef,
|
|
200
216
|
...getContentProps(),
|
|
217
|
+
onPointerEnter: () => {
|
|
218
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
219
|
+
},
|
|
220
|
+
onPointerLeave: handleMouseLeave,
|
|
201
221
|
style: {
|
|
202
222
|
visibility: tooltipPosition.x !== 0 ? "visible" : "hidden",
|
|
203
223
|
transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
tooltip_default
|
|
4
|
-
} from "../../chunk-
|
|
5
|
-
import "../../chunk-
|
|
4
|
+
} from "../../chunk-U74WK5VI.mjs";
|
|
5
|
+
import "../../chunk-KCBBBRSF.mjs";
|
|
6
6
|
import "../../chunk-ODMRJXLJ.mjs";
|
|
7
7
|
import "../../chunk-E3G5QXSH.mjs";
|
|
8
8
|
import "../../chunk-J725QONZ.mjs";
|
|
@@ -12988,7 +12988,17 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
12988
12988
|
right: targetRect.right + scrollX,
|
|
12989
12989
|
bottom: targetRect.bottom + scrollY
|
|
12990
12990
|
};
|
|
12991
|
-
|
|
12991
|
+
let { tooltipX, tooltipY } = getTooltipPosition(placement, adjustedTargetRect, width, height, offset);
|
|
12992
|
+
if (tooltipY < 0) {
|
|
12993
|
+
tooltipY = adjustedTargetRect.bottom + offset;
|
|
12994
|
+
} else if (tooltipY + height > window.innerHeight) {
|
|
12995
|
+
tooltipY = adjustedTargetRect.top - height - offset;
|
|
12996
|
+
}
|
|
12997
|
+
if (tooltipX < 0) {
|
|
12998
|
+
tooltipX = adjustedTargetRect.left;
|
|
12999
|
+
} else if (tooltipX + width > window.innerWidth) {
|
|
13000
|
+
tooltipX = adjustedTargetRect.right - width;
|
|
13001
|
+
}
|
|
12992
13002
|
setTooltipPosition({ x: tooltipX, y: tooltipY });
|
|
12993
13003
|
}
|
|
12994
13004
|
}, [placement, offset, targetRect]);
|
|
@@ -12999,11 +13009,12 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
12999
13009
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
13000
13010
|
var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
13001
13011
|
const [props, variantProps] = mapPropsVariants(originalProps, tooltip.variantKeys);
|
|
13002
|
-
const { placement = "bottom", offset = 5, classNames, ...tooltipProps } = props;
|
|
13012
|
+
const { placement = "bottom", offset = 5, delay = 100, classNames, ...tooltipProps } = props;
|
|
13003
13013
|
const slots = (0, import_react2.useMemo)(() => tooltip({ ...variantProps }), [variantProps]);
|
|
13004
13014
|
const [targetRect, setTargetRect] = (0, import_react2.useState)(null);
|
|
13005
|
-
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, targetRect });
|
|
13015
|
+
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, delay, targetRect });
|
|
13006
13016
|
const childrenRef = (0, import_react2.useRef)(null);
|
|
13017
|
+
const delayTimeout = (0, import_react2.useRef)(null);
|
|
13007
13018
|
const getBaseProps = (0, import_react2.useCallback)(
|
|
13008
13019
|
() => ({
|
|
13009
13020
|
className: slots.base({ class: classNames == null ? void 0 : classNames.base })
|
|
@@ -13016,26 +13027,31 @@ var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
|
13016
13027
|
}),
|
|
13017
13028
|
[slots, classNames == null ? void 0 : classNames.content]
|
|
13018
13029
|
);
|
|
13030
|
+
const handleMouseEnter = (0, import_react2.useCallback)(() => {
|
|
13031
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
13032
|
+
if (childrenRef.current) {
|
|
13033
|
+
const rect = childrenRef.current.getBoundingClientRect();
|
|
13034
|
+
setTargetRect({
|
|
13035
|
+
width: rect.width,
|
|
13036
|
+
height: rect.height,
|
|
13037
|
+
left: rect.left,
|
|
13038
|
+
top: rect.top,
|
|
13039
|
+
right: rect.right,
|
|
13040
|
+
bottom: rect.bottom
|
|
13041
|
+
});
|
|
13042
|
+
}
|
|
13043
|
+
}, []);
|
|
13044
|
+
const handleMouseLeave = (0, import_react2.useCallback)(() => {
|
|
13045
|
+
delayTimeout.current = window.setTimeout(() => setTargetRect(null), delay);
|
|
13046
|
+
}, [delay]);
|
|
13019
13047
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
13020
13048
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
13021
13049
|
"div",
|
|
13022
13050
|
{
|
|
13023
13051
|
ref: ref || childrenRef,
|
|
13024
13052
|
...getBaseProps(),
|
|
13025
|
-
onPointerLeave:
|
|
13026
|
-
onPointerEnter:
|
|
13027
|
-
if (childrenRef.current) {
|
|
13028
|
-
const rect = childrenRef.current.getBoundingClientRect();
|
|
13029
|
-
setTargetRect({
|
|
13030
|
-
width: rect.width,
|
|
13031
|
-
height: rect.height,
|
|
13032
|
-
left: rect.left,
|
|
13033
|
-
top: rect.top,
|
|
13034
|
-
right: rect.right,
|
|
13035
|
-
bottom: rect.bottom
|
|
13036
|
-
});
|
|
13037
|
-
}
|
|
13038
|
-
},
|
|
13053
|
+
onPointerLeave: handleMouseLeave,
|
|
13054
|
+
onPointerEnter: handleMouseEnter,
|
|
13039
13055
|
children: props.children
|
|
13040
13056
|
}
|
|
13041
13057
|
),
|
|
@@ -13045,6 +13061,10 @@ var Tooltip = (0, import_react2.forwardRef)((originalProps, ref) => {
|
|
|
13045
13061
|
{
|
|
13046
13062
|
ref: tooltipRef,
|
|
13047
13063
|
...getContentProps(),
|
|
13064
|
+
onPointerEnter: () => {
|
|
13065
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
13066
|
+
},
|
|
13067
|
+
onPointerLeave: handleMouseLeave,
|
|
13048
13068
|
style: {
|
|
13049
13069
|
visibility: tooltipPosition.x !== 0 ? "visible" : "hidden",
|
|
13050
13070
|
transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
tooltip_default
|
|
4
|
-
} from "../../chunk-
|
|
5
|
-
import "../../chunk-
|
|
4
|
+
} from "../../chunk-U74WK5VI.mjs";
|
|
5
|
+
import "../../chunk-KCBBBRSF.mjs";
|
|
6
6
|
import "../../chunk-ODMRJXLJ.mjs";
|
|
7
7
|
import "../../chunk-VUYUQGLF.mjs";
|
|
8
8
|
import "../../chunk-NGQ3MK2J.mjs";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export { a as TargetRect, u as useTooltip } from '../../tooltip-utils-
|
|
2
|
+
export { a as TargetRect, u as useTooltip } from '../../tooltip-utils-DR0UEfBN.mjs';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export { a as TargetRect, u as useTooltip } from '../../tooltip-utils-
|
|
2
|
+
export { a as TargetRect, u as useTooltip } from '../../tooltip-utils-DR0UEfBN.js';
|
|
@@ -98,7 +98,17 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
98
98
|
right: targetRect.right + scrollX,
|
|
99
99
|
bottom: targetRect.bottom + scrollY
|
|
100
100
|
};
|
|
101
|
-
|
|
101
|
+
let { tooltipX, tooltipY } = getTooltipPosition(placement, adjustedTargetRect, width, height, offset);
|
|
102
|
+
if (tooltipY < 0) {
|
|
103
|
+
tooltipY = adjustedTargetRect.bottom + offset;
|
|
104
|
+
} else if (tooltipY + height > window.innerHeight) {
|
|
105
|
+
tooltipY = adjustedTargetRect.top - height - offset;
|
|
106
|
+
}
|
|
107
|
+
if (tooltipX < 0) {
|
|
108
|
+
tooltipX = adjustedTargetRect.left;
|
|
109
|
+
} else if (tooltipX + width > window.innerWidth) {
|
|
110
|
+
tooltipX = adjustedTargetRect.right - width;
|
|
111
|
+
}
|
|
102
112
|
setTooltipPosition({ x: tooltipX, y: tooltipY });
|
|
103
113
|
}
|
|
104
114
|
}, [placement, offset, targetRect]);
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -7091,7 +7091,17 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
7091
7091
|
right: targetRect.right + scrollX,
|
|
7092
7092
|
bottom: targetRect.bottom + scrollY
|
|
7093
7093
|
};
|
|
7094
|
-
|
|
7094
|
+
let { tooltipX, tooltipY } = getTooltipPosition(placement, adjustedTargetRect, width, height, offset);
|
|
7095
|
+
if (tooltipY < 0) {
|
|
7096
|
+
tooltipY = adjustedTargetRect.bottom + offset;
|
|
7097
|
+
} else if (tooltipY + height > window.innerHeight) {
|
|
7098
|
+
tooltipY = adjustedTargetRect.top - height - offset;
|
|
7099
|
+
}
|
|
7100
|
+
if (tooltipX < 0) {
|
|
7101
|
+
tooltipX = adjustedTargetRect.left;
|
|
7102
|
+
} else if (tooltipX + width > window.innerWidth) {
|
|
7103
|
+
tooltipX = adjustedTargetRect.right - width;
|
|
7104
|
+
}
|
|
7095
7105
|
setTooltipPosition({ x: tooltipX, y: tooltipY });
|
|
7096
7106
|
}
|
|
7097
7107
|
}, [placement, offset, targetRect]);
|
|
@@ -7102,11 +7112,12 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
7102
7112
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
7103
7113
|
var Tooltip = (0, import_react21.forwardRef)((originalProps, ref) => {
|
|
7104
7114
|
const [props, variantProps] = mapPropsVariants(originalProps, tooltip.variantKeys);
|
|
7105
|
-
const { placement = "bottom", offset = 5, classNames, ...tooltipProps } = props;
|
|
7115
|
+
const { placement = "bottom", offset = 5, delay = 100, classNames, ...tooltipProps } = props;
|
|
7106
7116
|
const slots = (0, import_react21.useMemo)(() => tooltip({ ...variantProps }), [variantProps]);
|
|
7107
7117
|
const [targetRect, setTargetRect] = (0, import_react21.useState)(null);
|
|
7108
|
-
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, targetRect });
|
|
7118
|
+
const { tooltipPosition, tooltipRef } = useTooltip({ placement, offset, delay, targetRect });
|
|
7109
7119
|
const childrenRef = (0, import_react21.useRef)(null);
|
|
7120
|
+
const delayTimeout = (0, import_react21.useRef)(null);
|
|
7110
7121
|
const getBaseProps = (0, import_react21.useCallback)(
|
|
7111
7122
|
() => ({
|
|
7112
7123
|
className: slots.base({ class: classNames == null ? void 0 : classNames.base })
|
|
@@ -7119,26 +7130,31 @@ var Tooltip = (0, import_react21.forwardRef)((originalProps, ref) => {
|
|
|
7119
7130
|
}),
|
|
7120
7131
|
[slots, classNames == null ? void 0 : classNames.content]
|
|
7121
7132
|
);
|
|
7133
|
+
const handleMouseEnter = (0, import_react21.useCallback)(() => {
|
|
7134
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
7135
|
+
if (childrenRef.current) {
|
|
7136
|
+
const rect = childrenRef.current.getBoundingClientRect();
|
|
7137
|
+
setTargetRect({
|
|
7138
|
+
width: rect.width,
|
|
7139
|
+
height: rect.height,
|
|
7140
|
+
left: rect.left,
|
|
7141
|
+
top: rect.top,
|
|
7142
|
+
right: rect.right,
|
|
7143
|
+
bottom: rect.bottom
|
|
7144
|
+
});
|
|
7145
|
+
}
|
|
7146
|
+
}, []);
|
|
7147
|
+
const handleMouseLeave = (0, import_react21.useCallback)(() => {
|
|
7148
|
+
delayTimeout.current = window.setTimeout(() => setTargetRect(null), delay);
|
|
7149
|
+
}, [delay]);
|
|
7122
7150
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
7123
7151
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
7124
7152
|
"div",
|
|
7125
7153
|
{
|
|
7126
7154
|
ref: ref || childrenRef,
|
|
7127
7155
|
...getBaseProps(),
|
|
7128
|
-
onPointerLeave:
|
|
7129
|
-
onPointerEnter:
|
|
7130
|
-
if (childrenRef.current) {
|
|
7131
|
-
const rect = childrenRef.current.getBoundingClientRect();
|
|
7132
|
-
setTargetRect({
|
|
7133
|
-
width: rect.width,
|
|
7134
|
-
height: rect.height,
|
|
7135
|
-
left: rect.left,
|
|
7136
|
-
top: rect.top,
|
|
7137
|
-
right: rect.right,
|
|
7138
|
-
bottom: rect.bottom
|
|
7139
|
-
});
|
|
7140
|
-
}
|
|
7141
|
-
},
|
|
7156
|
+
onPointerLeave: handleMouseLeave,
|
|
7157
|
+
onPointerEnter: handleMouseEnter,
|
|
7142
7158
|
children: props.children
|
|
7143
7159
|
}
|
|
7144
7160
|
),
|
|
@@ -7148,6 +7164,10 @@ var Tooltip = (0, import_react21.forwardRef)((originalProps, ref) => {
|
|
|
7148
7164
|
{
|
|
7149
7165
|
ref: tooltipRef,
|
|
7150
7166
|
...getContentProps(),
|
|
7167
|
+
onPointerEnter: () => {
|
|
7168
|
+
if (delayTimeout.current) clearTimeout(delayTimeout.current);
|
|
7169
|
+
},
|
|
7170
|
+
onPointerLeave: handleMouseLeave,
|
|
7151
7171
|
style: {
|
|
7152
7172
|
visibility: tooltipPosition.x !== 0 ? "visible" : "hidden",
|
|
7153
7173
|
transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
|
package/dist/index.mjs
CHANGED
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
import "./chunk-HIE2YRGA.mjs";
|
|
3
3
|
import {
|
|
4
4
|
tooltip_default
|
|
5
|
-
} from "./chunk-
|
|
6
|
-
import "./chunk-
|
|
5
|
+
} from "./chunk-U74WK5VI.mjs";
|
|
6
|
+
import "./chunk-KCBBBRSF.mjs";
|
|
7
7
|
import "./chunk-ODMRJXLJ.mjs";
|
|
8
|
-
import "./chunk-RRAZM5D3.mjs";
|
|
9
|
-
import {
|
|
10
|
-
textarea_default
|
|
11
|
-
} from "./chunk-OJ2OEI5B.mjs";
|
|
12
8
|
import "./chunk-3MY6LO7N.mjs";
|
|
13
9
|
import {
|
|
14
10
|
tabs_default
|
|
15
11
|
} from "./chunk-KRI5IALM.mjs";
|
|
12
|
+
import "./chunk-RRAZM5D3.mjs";
|
|
13
|
+
import {
|
|
14
|
+
textarea_default
|
|
15
|
+
} from "./chunk-OJ2OEI5B.mjs";
|
|
16
16
|
import "./chunk-LUWGOKLG.mjs";
|
|
17
17
|
import {
|
|
18
18
|
ToastProvider,
|
|
@@ -22,6 +22,10 @@ import "./chunk-ZOTHPHXA.mjs";
|
|
|
22
22
|
import {
|
|
23
23
|
toast_default
|
|
24
24
|
} from "./chunk-PXUBPWKU.mjs";
|
|
25
|
+
import "./chunk-MV2WCFK7.mjs";
|
|
26
|
+
import {
|
|
27
|
+
slider_default
|
|
28
|
+
} from "./chunk-A3RWT3JJ.mjs";
|
|
25
29
|
import "./chunk-2UUH2MBF.mjs";
|
|
26
30
|
import {
|
|
27
31
|
table_default
|
|
@@ -32,24 +36,20 @@ import "./chunk-LVFI2NOH.mjs";
|
|
|
32
36
|
import {
|
|
33
37
|
switch_default
|
|
34
38
|
} from "./chunk-S3O52LLG.mjs";
|
|
35
|
-
import "./chunk-TPFN22HR.mjs";
|
|
36
|
-
import {
|
|
37
|
-
radio_default
|
|
38
|
-
} from "./chunk-QWFOYO3D.mjs";
|
|
39
|
-
import "./chunk-MV2WCFK7.mjs";
|
|
40
|
-
import {
|
|
41
|
-
slider_default
|
|
42
|
-
} from "./chunk-A3RWT3JJ.mjs";
|
|
43
|
-
import "./chunk-7VOQKIIK.mjs";
|
|
44
|
-
import {
|
|
45
|
-
progress_default
|
|
46
|
-
} from "./chunk-N2JULHST.mjs";
|
|
47
39
|
import "./chunk-QCEKPS7U.mjs";
|
|
48
40
|
import {
|
|
49
41
|
select_default
|
|
50
42
|
} from "./chunk-2BCJZILI.mjs";
|
|
51
43
|
import "./chunk-S3QS5B7F.mjs";
|
|
52
44
|
import "./chunk-RZZWHI6O.mjs";
|
|
45
|
+
import "./chunk-7VOQKIIK.mjs";
|
|
46
|
+
import {
|
|
47
|
+
progress_default
|
|
48
|
+
} from "./chunk-N2JULHST.mjs";
|
|
49
|
+
import "./chunk-TPFN22HR.mjs";
|
|
50
|
+
import {
|
|
51
|
+
radio_default
|
|
52
|
+
} from "./chunk-QWFOYO3D.mjs";
|
|
53
53
|
import "./chunk-DJOG6Z35.mjs";
|
|
54
54
|
import {
|
|
55
55
|
modal_default
|
|
@@ -59,22 +59,17 @@ import {
|
|
|
59
59
|
pagination_default
|
|
60
60
|
} from "./chunk-UZL66GNP.mjs";
|
|
61
61
|
import "./chunk-F3HENRVM.mjs";
|
|
62
|
+
import "./chunk-QZ3LVYJW.mjs";
|
|
62
63
|
import "./chunk-2GCSFWHD.mjs";
|
|
63
64
|
import {
|
|
64
65
|
input_default
|
|
65
66
|
} from "./chunk-ZNEEYSIK.mjs";
|
|
66
67
|
import "./chunk-HAOK24MK.mjs";
|
|
67
|
-
import "./chunk-QZ3LVYJW.mjs";
|
|
68
|
-
import {
|
|
69
|
-
checkbox_default
|
|
70
|
-
} from "./chunk-ANYPMQH4.mjs";
|
|
71
68
|
import "./chunk-75HLCORR.mjs";
|
|
72
69
|
import {
|
|
73
70
|
dateTimePicker_default
|
|
74
|
-
} from "./chunk-
|
|
75
|
-
import "./chunk-FWJ2ZKH6.mjs";
|
|
71
|
+
} from "./chunk-466PGIGU.mjs";
|
|
76
72
|
import "./chunk-FDKT4IBP.mjs";
|
|
77
|
-
import "./chunk-P732YGHO.mjs";
|
|
78
73
|
import "./chunk-BCN5F2MN.mjs";
|
|
79
74
|
import "./chunk-7MVEAQ7Z.mjs";
|
|
80
75
|
import {
|
|
@@ -83,6 +78,11 @@ import {
|
|
|
83
78
|
import {
|
|
84
79
|
listItem_default
|
|
85
80
|
} from "./chunk-V77MALL4.mjs";
|
|
81
|
+
import "./chunk-FWJ2ZKH6.mjs";
|
|
82
|
+
import "./chunk-P732YGHO.mjs";
|
|
83
|
+
import {
|
|
84
|
+
checkbox_default
|
|
85
|
+
} from "./chunk-ANYPMQH4.mjs";
|
|
86
86
|
import "./chunk-NMSDSEBD.mjs";
|
|
87
87
|
import "./chunk-VUYUQGLF.mjs";
|
|
88
88
|
import {
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
useDatePicker
|
|
4
|
-
} from "./chunk-FWJ2ZKH6.mjs";
|
|
5
2
|
import {
|
|
6
3
|
calendar_default
|
|
7
4
|
} from "./chunk-FDKT4IBP.mjs";
|
|
8
5
|
import {
|
|
9
6
|
timePicker_default
|
|
10
7
|
} from "./chunk-BCN5F2MN.mjs";
|
|
8
|
+
import {
|
|
9
|
+
useDatePicker
|
|
10
|
+
} from "./chunk-FWJ2ZKH6.mjs";
|
|
11
11
|
import {
|
|
12
12
|
Icon_default
|
|
13
13
|
} from "./chunk-LCI6RPWE.mjs";
|