@infomaximum/ui-kit 0.15.5 → 0.15.7
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/components/BaseSelect/components/SelectOptionList/SelectOptionList.styles.d.ts +1 -1
- package/dist/components/BaseTooltip/BaseTooltip.js +28 -23
- package/dist/components/BaseTooltip/BaseTooltip.styles.d.ts +27 -1
- package/dist/components/BaseTooltip/BaseTooltip.styles.js +2 -1
- package/dist/components/BaseTooltip/BaseTooltip.types.d.ts +4 -1
- package/dist/components/BaseTooltip/BaseTooltip.utils.d.ts +24 -2
- package/dist/components/BaseTooltip/BaseTooltip.utils.js +77 -7
- package/dist/components/BaseTooltip/hooks/useCustomFloating.d.ts +1 -0
- package/dist/components/BaseTooltip/hooks/useCustomFloating.js +22 -23
- package/dist/components/BaseTooltip/hooks/useShowTooltipController.d.ts +9 -6
- package/dist/components/BaseTooltip/hooks/useShowTooltipController.js +25 -13
- package/dist/components/Button/Button.js +13 -6
- package/dist/components/Button/Button.styles.d.ts +5 -0
- package/dist/components/Button/Button.styles.js +6 -2
- package/dist/components/Button/Button.types.d.ts +3 -2
- package/dist/components/Dropdown/components/SubMenu/SubMenu.js +3 -3
- package/dist/components/InternalPicker/styles/DatePanel.styles.d.ts +2 -2
- package/dist/components/InternalPicker/styles/Popup.styles.d.ts +2 -2
- package/dist/components/Message/components/Message/Message.js +14 -7
- package/dist/components/Popconfirm/Popconfirm.js +4 -0
- package/dist/components/Popconfirm/components/PopconfirmFloatingElement/PopconfirmFloatingElement.styles.d.ts +11 -9
- package/dist/components/Popconfirm/components/PopconfirmFloatingElement/PopconfirmFloatingElement.styles.js +2 -0
- package/dist/components/Popover/Popover.js +4 -0
- package/dist/components/Popover/component/PopoverFloatingElement/PopoverFloatingElement.styles.d.ts +11 -9
- package/dist/components/Popover/component/PopoverFloatingElement/PopoverFloatingElement.styles.js +2 -0
- package/dist/components/Tabs/components/TabItem/TabItem.styles.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.js +4 -0
- package/dist/components/Tooltip/components/TooltipFloatingElement/TooltipFloatingElement.styles.d.ts +13 -12
- package/dist/components/Tooltip/components/TooltipFloatingElement/TooltipFloatingElement.styles.js +1 -0
- package/dist/hooks/useLoadingDelay.js +7 -4
- package/dist/utils/const/index.d.ts +1 -0
- package/dist/utils/const/index.js +3 -1
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ export declare const getSelectOptionListStyle: ({ dropdownMinWidth, dropdownMaxH
|
|
|
22
22
|
readonly width: number | "fit-content";
|
|
23
23
|
readonly maxHeight: number;
|
|
24
24
|
readonly height: "fit-content";
|
|
25
|
-
readonly visibility: "
|
|
25
|
+
readonly visibility: "visible" | "hidden";
|
|
26
26
|
readonly boxSizing: "border-box";
|
|
27
27
|
readonly borderRadius: 8;
|
|
28
28
|
readonly background: "#FFFFFF";
|
|
@@ -26,53 +26,57 @@ const BaseTooltip = memo(({
|
|
|
26
26
|
children,
|
|
27
27
|
styles,
|
|
28
28
|
withoutWrapper,
|
|
29
|
+
showInCursorPosition = false,
|
|
29
30
|
getPopupContainer = () => document.body
|
|
30
31
|
}) => {
|
|
31
32
|
var _a;
|
|
32
33
|
const theme = useTheme();
|
|
34
|
+
const currentTransform = transform && !showInCursorPosition;
|
|
33
35
|
const {
|
|
34
36
|
refs,
|
|
35
37
|
floatingStyles,
|
|
36
38
|
context,
|
|
37
39
|
floatingPlacement,
|
|
38
|
-
setArrowRef
|
|
40
|
+
setArrowRef,
|
|
41
|
+
arrowRef
|
|
39
42
|
} = useCustomFloating({
|
|
40
43
|
placement,
|
|
41
44
|
autoAdjustOverflow,
|
|
42
45
|
withArrow,
|
|
43
46
|
align,
|
|
44
|
-
transform
|
|
47
|
+
transform: currentTransform
|
|
45
48
|
});
|
|
46
49
|
const {
|
|
47
50
|
isOpen,
|
|
48
|
-
|
|
49
|
-
|
|
51
|
+
handlePointerEnter,
|
|
52
|
+
handlePointerLeave,
|
|
50
53
|
handleFocus,
|
|
51
54
|
handleBlur,
|
|
52
55
|
handleClick,
|
|
53
56
|
handleContextMenu,
|
|
54
|
-
|
|
57
|
+
handlePointerUp
|
|
55
58
|
} = useShowTooltipController({
|
|
56
59
|
trigger,
|
|
57
60
|
defaultOpen,
|
|
58
61
|
open,
|
|
59
62
|
mouseEnterDelay,
|
|
60
63
|
mouseLeaveDelay,
|
|
64
|
+
showInCursorPosition,
|
|
65
|
+
placement: floatingPlacement,
|
|
61
66
|
refs,
|
|
62
|
-
onOpenChange
|
|
67
|
+
onOpenChange,
|
|
68
|
+
arrowRef
|
|
63
69
|
});
|
|
64
|
-
const arrowPlacementCorrection = getArrowPlacementCorrection(floatingPlacement,
|
|
70
|
+
const arrowPlacementCorrection = getArrowPlacementCorrection(floatingPlacement, refs, align);
|
|
65
71
|
const renderFloatingElement = () => {
|
|
66
72
|
var _a2;
|
|
67
|
-
return /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, css: [getBaseTooltipFloatingWrapperStyle(floatingPlacement, withArrow), (_a2 = styles == null ? void 0 : styles.floatingWrapper) == null ? void 0 : _a2.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:renderFloatingElement;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
73
|
+
return /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, css: [getBaseTooltipFloatingWrapperStyle(floatingPlacement, withArrow, isOpen), (_a2 = styles == null ? void 0 : styles.floatingWrapper) == null ? void 0 : _a2.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:renderFloatingElement;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVRvb2x0aXAvQmFzZVRvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlGVSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0Jhc2VUb29sdGlwL0Jhc2VUb29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB0eXBlIEZDLCBtZW1vLCB0eXBlIFByb3BzV2l0aENoaWxkcmVuLCB1c2VNZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IEJhc2VUb29sdGlwUHJvcHMsIEJhc2VUb29sdGlwVHJpZ2dlclR5cGUgfSBmcm9tIFwiLi9CYXNlVG9vbHRpcC50eXBlc1wiO1xuaW1wb3J0IHsgRmxvYXRpbmdBcnJvdyB9IGZyb20gXCJAZmxvYXRpbmctdWkvcmVhY3RcIjtcbmltcG9ydCB7XG4gIEFSUk9XX0hFSUdIVCxcbiAgQVJST1dfV0lEVEgsXG4gIGdldEFycm93UGxhY2VtZW50Q29ycmVjdGlvbixcbiAgTWF4X1pJbmRleCxcbn0gZnJvbSBcIi4vQmFzZVRvb2x0aXAudXRpbHNcIjtcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gXCJyZWFjdC1kb21cIjtcbmltcG9ydCB7IHVzZVNob3dUb29sdGlwQ29udHJvbGxlciB9IGZyb20gXCIuL2hvb2tzL3VzZVNob3dUb29sdGlwQ29udHJvbGxlclwiO1xuaW1wb3J0IHtcbiAgYmFzZVRvb2x0aXBSZWZlcmVuY2VXcmFwcGVyU3R5bGUsXG4gIGdldEJhc2VUb29sdGlwRmxvYXRpbmdXcmFwcGVyU3R5bGUsXG59IGZyb20gXCIuL0Jhc2VUb29sdGlwLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUN1c3RvbUZsb2F0aW5nIH0gZnJvbSBcIi4vaG9va3MvdXNlQ3VzdG9tRmxvYXRpbmdcIjtcblxuZXhwb3J0IGNvbnN0IEJhc2VUb29sdGlwOiBGQzxQcm9wc1dpdGhDaGlsZHJlbjxCYXNlVG9vbHRpcFByb3BzPj4gPSBtZW1vKFxuICAoe1xuICAgIGZsb2F0aW5nRWxlbWVudCxcbiAgICBhcnJvd0NvbG9yLFxuICAgIHdpdGhBcnJvdyA9IHRydWUsXG4gICAgcGxhY2VtZW50ID0gXCJ0b3BcIixcbiAgICBhdXRvQWRqdXN0T3ZlcmZsb3cgPSB0cnVlLFxuICAgIGRlZmF1bHRPcGVuID0gZmFsc2UsXG4gICAgb3BlbixcbiAgICB6SW5kZXggPSBNYXhfWkluZGV4LFxuICAgIHRyaWdnZXIgPSBbXCJjbGlja1wiIGFzIEJhc2VUb29sdGlwVHJpZ2dlclR5cGVdLFxuICAgIG1vdXNlRW50ZXJEZWxheSA9IDAuMSxcbiAgICBtb3VzZUxlYXZlRGVsYXkgPSAwLjEsXG4gICAgYWxpZ24sXG4gICAgdHJhbnNmb3JtID0gdHJ1ZSxcbiAgICBjbGFzc05hbWUsXG4gICAgb25PcGVuQ2hhbmdlLFxuICAgIGNoaWxkcmVuLFxuICAgIHN0eWxlcyxcbiAgICB3aXRob3V0V3JhcHBlcixcbiAgICBzaG93SW5DdXJzb3JQb3NpdGlvbiA9IGZhbHNlLFxuICAgIGdldFBvcHVwQ29udGFpbmVyID0gKCkgPT4gZG9jdW1lbnQuYm9keSxcbiAgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgICBjb25zdCBjdXJyZW50VHJhbnNmb3JtID0gdHJhbnNmb3JtICYmICFzaG93SW5DdXJzb3JQb3NpdGlvbjtcblxuICAgIGNvbnN0IHsgcmVmcywgZmxvYXRpbmdTdHlsZXMsIGNvbnRleHQsIGZsb2F0aW5nUGxhY2VtZW50LCBzZXRBcnJvd1JlZiwgYXJyb3dSZWYgfSA9XG4gICAgICB1c2VDdXN0b21GbG9hdGluZyh7XG4gICAgICAgIHBsYWNlbWVudCxcbiAgICAgICAgYXV0b0FkanVzdE92ZXJmbG93LFxuICAgICAgICB3aXRoQXJyb3csXG4gICAgICAgIGFsaWduLFxuICAgICAgICB0cmFuc2Zvcm06IGN1cnJlbnRUcmFuc2Zvcm0sXG4gICAgICB9KTtcblxuICAgIGNvbnN0IHtcbiAgICAgIGlzT3BlbixcbiAgICAgIGhhbmRsZVBvaW50ZXJFbnRlcixcbiAgICAgIGhhbmRsZVBvaW50ZXJMZWF2ZSxcbiAgICAgIGhhbmRsZUZvY3VzLFxuICAgICAgaGFuZGxlQmx1cixcbiAgICAgIGhhbmRsZUNsaWNrLFxuICAgICAgaGFuZGxlQ29udGV4dE1lbnUsXG4gICAgICBoYW5kbGVQb2ludGVyVXAsXG4gICAgfSA9IHVzZVNob3dUb29sdGlwQ29udHJvbGxlcih7XG4gICAgICB0cmlnZ2VyLFxuICAgICAgZGVmYXVsdE9wZW4sXG4gICAgICBvcGVuLFxuICAgICAgbW91c2VFbnRlckRlbGF5LFxuICAgICAgbW91c2VMZWF2ZURlbGF5LFxuICAgICAgc2hvd0luQ3Vyc29yUG9zaXRpb24sXG4gICAgICBwbGFjZW1lbnQ6IGZsb2F0aW5nUGxhY2VtZW50LFxuICAgICAgcmVmcyxcbiAgICAgIG9uT3BlbkNoYW5nZSxcbiAgICAgIGFycm93UmVmLFxuICAgIH0pO1xuXG4gICAgY29uc3QgYXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9uID0gZ2V0QXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9uKGZsb2F0aW5nUGxhY2VtZW50LCByZWZzLCBhbGlnbik7XG5cbiAgICBjb25zdCByZW5kZXJGbG9hdGluZ0VsZW1lbnQgPSAoKSA9PiB7XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgcmVmPXtyZWZzLnNldEZsb2F0aW5nfVxuICAgICAgICAgIGNzcz17W1xuICAgICAgICAgICAgZ2V0QmFzZVRvb2x0aXBGbG9hdGluZ1dyYXBwZXJTdHlsZShmbG9hdGluZ1BsYWNlbWVudCwgd2l0aEFycm93LCBpc09wZW4pLFxuICAgICAgICAgICAgc3R5bGVzPy5mbG9hdGluZ1dyYXBwZXI/Lih0aGVtZSksXG4gICAgICAgICAgXX1cbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgLi4uZmxvYXRpbmdTdHlsZXMsXG4gICAgICAgICAgICB3aWR0aDogIWN1cnJlbnRUcmFuc2Zvcm0gPyBcIm1heC1jb250ZW50XCIgOiB1bmRlZmluZWQsXG4gICAgICAgICAgICB6SW5kZXgsXG4gICAgICAgICAgfX1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtmbG9hdGluZ0VsZW1lbnR9XG4gICAgICAgICAge3dpdGhBcnJvdyAmJiAoXG4gICAgICAgICAgICA8RmxvYXRpbmdBcnJvd1xuICAgICAgICAgICAgICByZWY9e3NldEFycm93UmVmfVxuICAgICAgICAgICAgICBjb250ZXh0PXtjb250ZXh0fVxuICAgICAgICAgICAgICB3aWR0aD17QVJST1dfV0lEVEh9XG4gICAgICAgICAgICAgIGhlaWdodD17QVJST1dfSEVJR0hUfVxuICAgICAgICAgICAgICBmaWxsPXthcnJvd0NvbG9yfVxuICAgICAgICAgICAgICBzdHlsZT17YXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9ufVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfTtcblxuICAgIGNvbnN0IGNoaWxkcmVuV2l0aFByb3BzID0gdXNlTWVtbygoKSA9PiB7XG4gICAgICBpZiAoIXdpdGhvdXRXcmFwcGVyKSB7XG4gICAgICAgIHJldHVybiBjaGlsZHJlbjtcbiAgICAgIH1cblxuICAgICAgbGV0IGFkZGVkUHJvcHNDb3VudGVyID0gMDtcblxuICAgICAgcmV0dXJuIFJlYWN0LkNoaWxkcmVuLm1hcChjaGlsZHJlbiwgKGNoaWxkKSA9PiB7XG4gICAgICAgIGlmIChhZGRlZFByb3BzQ291bnRlciA+IDAgfHwgIVJlYWN0LmlzVmFsaWRFbGVtZW50KGNoaWxkKSkge1xuICAgICAgICAgIHJldHVybiBjaGlsZDtcbiAgICAgICAgfVxuXG4gICAgICAgIGFkZGVkUHJvcHNDb3VudGVyICs9IDE7XG5cbiAgICAgICAgcmV0dXJuIFJlYWN0LmNsb25lRWxlbWVudChjaGlsZCwge1xuICAgICAgICAgIC4uLmNoaWxkLnByb3BzLFxuICAgICAgICAgIHJlZjogcmVmcy5zZXRSZWZlcmVuY2UsXG4gICAgICAgICAgb25Qb2ludGVyRW50ZXI6IGhhbmRsZVBvaW50ZXJFbnRlciA/PyBjaGlsZD8ucHJvcHM/Lm9uUG9pbnRlckVudGVyLFxuICAgICAgICAgIG9uUG9pbnRlckxlYXZlOiBoYW5kbGVQb2ludGVyTGVhdmUgPz8gY2hpbGQ/LnByb3BzPy5vblBvaW50ZXJMZWF2ZSxcbiAgICAgICAgICBvbkZvY3VzOiBoYW5kbGVGb2N1cyA/PyBjaGlsZD8ucHJvcHM/Lm9uRm9jdXMsXG4gICAgICAgICAgb25CbHVyOiBoYW5kbGVCbHVyID8/IGNoaWxkPy5wcm9wcz8ub25CbHVyLFxuICAgICAgICAgIG9uQ2xpY2s6IGhhbmRsZUNsaWNrID8/IGNoaWxkPy5wcm9wcz8ub25DbGljayxcbiAgICAgICAgICBvbkNvbnRleHRNZW51OiBoYW5kbGVDb250ZXh0TWVudSA/PyBjaGlsZD8ucHJvcHM/Lm9uQ29udGV4dE1lbnUsXG4gICAgICAgICAgb25Qb2ludGVyVXA6IGhhbmRsZVBvaW50ZXJVcCA/PyBjaGlsZD8ucHJvcHM/Lm9uUG9pbnRlclVwLFxuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICAgIH0sIFtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgaGFuZGxlQmx1cixcbiAgICAgIGhhbmRsZUNsaWNrLFxuICAgICAgaGFuZGxlQ29udGV4dE1lbnUsXG4gICAgICBoYW5kbGVGb2N1cyxcbiAgICAgIGhhbmRsZVBvaW50ZXJFbnRlcixcbiAgICAgIGhhbmRsZVBvaW50ZXJMZWF2ZSxcbiAgICAgIGhhbmRsZVBvaW50ZXJVcCxcbiAgICAgIHJlZnMuc2V0UmVmZXJlbmNlLFxuICAgICAgd2l0aG91dFdyYXBwZXIsXG4gICAgXSk7XG5cbiAgICBpZiAod2l0aG91dFdyYXBwZXIpIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAge2NoaWxkcmVuV2l0aFByb3BzfVxuICAgICAgICAgIHsoaXNPcGVuIHx8IHNob3dJbkN1cnNvclBvc2l0aW9uKSAmJlxuICAgICAgICAgICAgY3JlYXRlUG9ydGFsKFxuICAgICAgICAgICAgICByZW5kZXJGbG9hdGluZ0VsZW1lbnQoKSxcbiAgICAgICAgICAgICAgZ2V0UG9wdXBDb250YWluZXIocmVmcy5kb21SZWZlcmVuY2UuY3VycmVudCA/PyBkb2N1bWVudC5ib2R5KVxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC8+XG4gICAgICApO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17cmVmcy5zZXRSZWZlcmVuY2V9XG4gICAgICAgIGNzcz17W2Jhc2VUb29sdGlwUmVmZXJlbmNlV3JhcHBlclN0eWxlLCBzdHlsZXM/LnJlZmVyZW5jZVdyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICBvblBvaW50ZXJFbnRlcj17aGFuZGxlUG9pbnRlckVudGVyfVxuICAgICAgICBvblBvaW50ZXJMZWF2ZT17aGFuZGxlUG9pbnRlckxlYXZlfVxuICAgICAgICBvbkZvY3VzPXtoYW5kbGVGb2N1c31cbiAgICAgICAgb25CbHVyPXtoYW5kbGVCbHVyfVxuICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgb25Db250ZXh0TWVudT17aGFuZGxlQ29udGV4dE1lbnV9XG4gICAgICAgIG9uUG9pbnRlclVwPXtoYW5kbGVQb2ludGVyVXB9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cblxuICAgICAgICB7KGlzT3BlbiB8fCBzaG93SW5DdXJzb3JQb3NpdGlvbikgJiZcbiAgICAgICAgICBjcmVhdGVQb3J0YWwoXG4gICAgICAgICAgICByZW5kZXJGbG9hdGluZ0VsZW1lbnQoKSxcbiAgICAgICAgICAgIGdldFBvcHVwQ29udGFpbmVyKHJlZnMuZG9tUmVmZXJlbmNlLmN1cnJlbnQgPz8gZG9jdW1lbnQuYm9keSlcbiAgICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], style: {
|
|
68
74
|
...floatingStyles,
|
|
69
|
-
width: !
|
|
75
|
+
width: !currentTransform ? "max-content" : void 0,
|
|
70
76
|
zIndex
|
|
71
77
|
}, className, children: [
|
|
72
78
|
floatingElement,
|
|
73
|
-
withArrow && /* @__PURE__ */ jsx(FloatingArrow, { ref: setArrowRef, context, width: ARROW_WIDTH, height: ARROW_HEIGHT, fill: arrowColor, style:
|
|
74
|
-
...arrowPlacementCorrection
|
|
75
|
-
} })
|
|
79
|
+
withArrow && /* @__PURE__ */ jsx(FloatingArrow, { ref: setArrowRef, context, width: ARROW_WIDTH, height: ARROW_HEIGHT, fill: arrowColor, style: arrowPlacementCorrection })
|
|
76
80
|
] });
|
|
77
81
|
};
|
|
78
82
|
const childrenWithProps = useMemo(() => {
|
|
@@ -81,6 +85,7 @@ const BaseTooltip = memo(({
|
|
|
81
85
|
}
|
|
82
86
|
let addedPropsCounter = 0;
|
|
83
87
|
return React.Children.map(children, (child) => {
|
|
88
|
+
var _a2, _b, _c, _d, _e, _f, _g;
|
|
84
89
|
if (addedPropsCounter > 0 || !React.isValidElement(child)) {
|
|
85
90
|
return child;
|
|
86
91
|
}
|
|
@@ -88,25 +93,25 @@ const BaseTooltip = memo(({
|
|
|
88
93
|
return React.cloneElement(child, {
|
|
89
94
|
...child.props,
|
|
90
95
|
ref: refs.setReference,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
onFocus: handleFocus,
|
|
94
|
-
onBlur: handleBlur,
|
|
95
|
-
onClick: handleClick,
|
|
96
|
-
onContextMenu: handleContextMenu,
|
|
97
|
-
|
|
96
|
+
onPointerEnter: handlePointerEnter ?? ((_a2 = child == null ? void 0 : child.props) == null ? void 0 : _a2.onPointerEnter),
|
|
97
|
+
onPointerLeave: handlePointerLeave ?? ((_b = child == null ? void 0 : child.props) == null ? void 0 : _b.onPointerLeave),
|
|
98
|
+
onFocus: handleFocus ?? ((_c = child == null ? void 0 : child.props) == null ? void 0 : _c.onFocus),
|
|
99
|
+
onBlur: handleBlur ?? ((_d = child == null ? void 0 : child.props) == null ? void 0 : _d.onBlur),
|
|
100
|
+
onClick: handleClick ?? ((_e = child == null ? void 0 : child.props) == null ? void 0 : _e.onClick),
|
|
101
|
+
onContextMenu: handleContextMenu ?? ((_f = child == null ? void 0 : child.props) == null ? void 0 : _f.onContextMenu),
|
|
102
|
+
onPointerUp: handlePointerUp ?? ((_g = child == null ? void 0 : child.props) == null ? void 0 : _g.onPointerUp)
|
|
98
103
|
});
|
|
99
104
|
});
|
|
100
|
-
}, [children, handleBlur, handleClick, handleContextMenu, handleFocus,
|
|
105
|
+
}, [children, handleBlur, handleClick, handleContextMenu, handleFocus, handlePointerEnter, handlePointerLeave, handlePointerUp, refs.setReference, withoutWrapper]);
|
|
101
106
|
if (withoutWrapper) {
|
|
102
107
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
103
108
|
childrenWithProps,
|
|
104
|
-
isOpen && createPortal(renderFloatingElement(), getPopupContainer())
|
|
109
|
+
(isOpen || showInCursorPosition) && createPortal(renderFloatingElement(), getPopupContainer(refs.domReference.current ?? document.body))
|
|
105
110
|
] });
|
|
106
111
|
}
|
|
107
|
-
return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, css: [baseTooltipReferenceWrapperStyle, (_a = styles == null ? void 0 : styles.referenceWrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:BaseTooltip;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
112
|
+
return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, css: [baseTooltipReferenceWrapperStyle, (_a = styles == null ? void 0 : styles.referenceWrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:BaseTooltip;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVRvb2x0aXAvQmFzZVRvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtLUSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0Jhc2VUb29sdGlwL0Jhc2VUb29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB0eXBlIEZDLCBtZW1vLCB0eXBlIFByb3BzV2l0aENoaWxkcmVuLCB1c2VNZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IEJhc2VUb29sdGlwUHJvcHMsIEJhc2VUb29sdGlwVHJpZ2dlclR5cGUgfSBmcm9tIFwiLi9CYXNlVG9vbHRpcC50eXBlc1wiO1xuaW1wb3J0IHsgRmxvYXRpbmdBcnJvdyB9IGZyb20gXCJAZmxvYXRpbmctdWkvcmVhY3RcIjtcbmltcG9ydCB7XG4gIEFSUk9XX0hFSUdIVCxcbiAgQVJST1dfV0lEVEgsXG4gIGdldEFycm93UGxhY2VtZW50Q29ycmVjdGlvbixcbiAgTWF4X1pJbmRleCxcbn0gZnJvbSBcIi4vQmFzZVRvb2x0aXAudXRpbHNcIjtcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gXCJyZWFjdC1kb21cIjtcbmltcG9ydCB7IHVzZVNob3dUb29sdGlwQ29udHJvbGxlciB9IGZyb20gXCIuL2hvb2tzL3VzZVNob3dUb29sdGlwQ29udHJvbGxlclwiO1xuaW1wb3J0IHtcbiAgYmFzZVRvb2x0aXBSZWZlcmVuY2VXcmFwcGVyU3R5bGUsXG4gIGdldEJhc2VUb29sdGlwRmxvYXRpbmdXcmFwcGVyU3R5bGUsXG59IGZyb20gXCIuL0Jhc2VUb29sdGlwLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUN1c3RvbUZsb2F0aW5nIH0gZnJvbSBcIi4vaG9va3MvdXNlQ3VzdG9tRmxvYXRpbmdcIjtcblxuZXhwb3J0IGNvbnN0IEJhc2VUb29sdGlwOiBGQzxQcm9wc1dpdGhDaGlsZHJlbjxCYXNlVG9vbHRpcFByb3BzPj4gPSBtZW1vKFxuICAoe1xuICAgIGZsb2F0aW5nRWxlbWVudCxcbiAgICBhcnJvd0NvbG9yLFxuICAgIHdpdGhBcnJvdyA9IHRydWUsXG4gICAgcGxhY2VtZW50ID0gXCJ0b3BcIixcbiAgICBhdXRvQWRqdXN0T3ZlcmZsb3cgPSB0cnVlLFxuICAgIGRlZmF1bHRPcGVuID0gZmFsc2UsXG4gICAgb3BlbixcbiAgICB6SW5kZXggPSBNYXhfWkluZGV4LFxuICAgIHRyaWdnZXIgPSBbXCJjbGlja1wiIGFzIEJhc2VUb29sdGlwVHJpZ2dlclR5cGVdLFxuICAgIG1vdXNlRW50ZXJEZWxheSA9IDAuMSxcbiAgICBtb3VzZUxlYXZlRGVsYXkgPSAwLjEsXG4gICAgYWxpZ24sXG4gICAgdHJhbnNmb3JtID0gdHJ1ZSxcbiAgICBjbGFzc05hbWUsXG4gICAgb25PcGVuQ2hhbmdlLFxuICAgIGNoaWxkcmVuLFxuICAgIHN0eWxlcyxcbiAgICB3aXRob3V0V3JhcHBlcixcbiAgICBzaG93SW5DdXJzb3JQb3NpdGlvbiA9IGZhbHNlLFxuICAgIGdldFBvcHVwQ29udGFpbmVyID0gKCkgPT4gZG9jdW1lbnQuYm9keSxcbiAgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgICBjb25zdCBjdXJyZW50VHJhbnNmb3JtID0gdHJhbnNmb3JtICYmICFzaG93SW5DdXJzb3JQb3NpdGlvbjtcblxuICAgIGNvbnN0IHsgcmVmcywgZmxvYXRpbmdTdHlsZXMsIGNvbnRleHQsIGZsb2F0aW5nUGxhY2VtZW50LCBzZXRBcnJvd1JlZiwgYXJyb3dSZWYgfSA9XG4gICAgICB1c2VDdXN0b21GbG9hdGluZyh7XG4gICAgICAgIHBsYWNlbWVudCxcbiAgICAgICAgYXV0b0FkanVzdE92ZXJmbG93LFxuICAgICAgICB3aXRoQXJyb3csXG4gICAgICAgIGFsaWduLFxuICAgICAgICB0cmFuc2Zvcm06IGN1cnJlbnRUcmFuc2Zvcm0sXG4gICAgICB9KTtcblxuICAgIGNvbnN0IHtcbiAgICAgIGlzT3BlbixcbiAgICAgIGhhbmRsZVBvaW50ZXJFbnRlcixcbiAgICAgIGhhbmRsZVBvaW50ZXJMZWF2ZSxcbiAgICAgIGhhbmRsZUZvY3VzLFxuICAgICAgaGFuZGxlQmx1cixcbiAgICAgIGhhbmRsZUNsaWNrLFxuICAgICAgaGFuZGxlQ29udGV4dE1lbnUsXG4gICAgICBoYW5kbGVQb2ludGVyVXAsXG4gICAgfSA9IHVzZVNob3dUb29sdGlwQ29udHJvbGxlcih7XG4gICAgICB0cmlnZ2VyLFxuICAgICAgZGVmYXVsdE9wZW4sXG4gICAgICBvcGVuLFxuICAgICAgbW91c2VFbnRlckRlbGF5LFxuICAgICAgbW91c2VMZWF2ZURlbGF5LFxuICAgICAgc2hvd0luQ3Vyc29yUG9zaXRpb24sXG4gICAgICBwbGFjZW1lbnQ6IGZsb2F0aW5nUGxhY2VtZW50LFxuICAgICAgcmVmcyxcbiAgICAgIG9uT3BlbkNoYW5nZSxcbiAgICAgIGFycm93UmVmLFxuICAgIH0pO1xuXG4gICAgY29uc3QgYXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9uID0gZ2V0QXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9uKGZsb2F0aW5nUGxhY2VtZW50LCByZWZzLCBhbGlnbik7XG5cbiAgICBjb25zdCByZW5kZXJGbG9hdGluZ0VsZW1lbnQgPSAoKSA9PiB7XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgcmVmPXtyZWZzLnNldEZsb2F0aW5nfVxuICAgICAgICAgIGNzcz17W1xuICAgICAgICAgICAgZ2V0QmFzZVRvb2x0aXBGbG9hdGluZ1dyYXBwZXJTdHlsZShmbG9hdGluZ1BsYWNlbWVudCwgd2l0aEFycm93LCBpc09wZW4pLFxuICAgICAgICAgICAgc3R5bGVzPy5mbG9hdGluZ1dyYXBwZXI/Lih0aGVtZSksXG4gICAgICAgICAgXX1cbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgLi4uZmxvYXRpbmdTdHlsZXMsXG4gICAgICAgICAgICB3aWR0aDogIWN1cnJlbnRUcmFuc2Zvcm0gPyBcIm1heC1jb250ZW50XCIgOiB1bmRlZmluZWQsXG4gICAgICAgICAgICB6SW5kZXgsXG4gICAgICAgICAgfX1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtmbG9hdGluZ0VsZW1lbnR9XG4gICAgICAgICAge3dpdGhBcnJvdyAmJiAoXG4gICAgICAgICAgICA8RmxvYXRpbmdBcnJvd1xuICAgICAgICAgICAgICByZWY9e3NldEFycm93UmVmfVxuICAgICAgICAgICAgICBjb250ZXh0PXtjb250ZXh0fVxuICAgICAgICAgICAgICB3aWR0aD17QVJST1dfV0lEVEh9XG4gICAgICAgICAgICAgIGhlaWdodD17QVJST1dfSEVJR0hUfVxuICAgICAgICAgICAgICBmaWxsPXthcnJvd0NvbG9yfVxuICAgICAgICAgICAgICBzdHlsZT17YXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9ufVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfTtcblxuICAgIGNvbnN0IGNoaWxkcmVuV2l0aFByb3BzID0gdXNlTWVtbygoKSA9PiB7XG4gICAgICBpZiAoIXdpdGhvdXRXcmFwcGVyKSB7XG4gICAgICAgIHJldHVybiBjaGlsZHJlbjtcbiAgICAgIH1cblxuICAgICAgbGV0IGFkZGVkUHJvcHNDb3VudGVyID0gMDtcblxuICAgICAgcmV0dXJuIFJlYWN0LkNoaWxkcmVuLm1hcChjaGlsZHJlbiwgKGNoaWxkKSA9PiB7XG4gICAgICAgIGlmIChhZGRlZFByb3BzQ291bnRlciA+IDAgfHwgIVJlYWN0LmlzVmFsaWRFbGVtZW50KGNoaWxkKSkge1xuICAgICAgICAgIHJldHVybiBjaGlsZDtcbiAgICAgICAgfVxuXG4gICAgICAgIGFkZGVkUHJvcHNDb3VudGVyICs9IDE7XG5cbiAgICAgICAgcmV0dXJuIFJlYWN0LmNsb25lRWxlbWVudChjaGlsZCwge1xuICAgICAgICAgIC4uLmNoaWxkLnByb3BzLFxuICAgICAgICAgIHJlZjogcmVmcy5zZXRSZWZlcmVuY2UsXG4gICAgICAgICAgb25Qb2ludGVyRW50ZXI6IGhhbmRsZVBvaW50ZXJFbnRlciA/PyBjaGlsZD8ucHJvcHM/Lm9uUG9pbnRlckVudGVyLFxuICAgICAgICAgIG9uUG9pbnRlckxlYXZlOiBoYW5kbGVQb2ludGVyTGVhdmUgPz8gY2hpbGQ/LnByb3BzPy5vblBvaW50ZXJMZWF2ZSxcbiAgICAgICAgICBvbkZvY3VzOiBoYW5kbGVGb2N1cyA/PyBjaGlsZD8ucHJvcHM/Lm9uRm9jdXMsXG4gICAgICAgICAgb25CbHVyOiBoYW5kbGVCbHVyID8/IGNoaWxkPy5wcm9wcz8ub25CbHVyLFxuICAgICAgICAgIG9uQ2xpY2s6IGhhbmRsZUNsaWNrID8/IGNoaWxkPy5wcm9wcz8ub25DbGljayxcbiAgICAgICAgICBvbkNvbnRleHRNZW51OiBoYW5kbGVDb250ZXh0TWVudSA/PyBjaGlsZD8ucHJvcHM/Lm9uQ29udGV4dE1lbnUsXG4gICAgICAgICAgb25Qb2ludGVyVXA6IGhhbmRsZVBvaW50ZXJVcCA/PyBjaGlsZD8ucHJvcHM/Lm9uUG9pbnRlclVwLFxuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICAgIH0sIFtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgaGFuZGxlQmx1cixcbiAgICAgIGhhbmRsZUNsaWNrLFxuICAgICAgaGFuZGxlQ29udGV4dE1lbnUsXG4gICAgICBoYW5kbGVGb2N1cyxcbiAgICAgIGhhbmRsZVBvaW50ZXJFbnRlcixcbiAgICAgIGhhbmRsZVBvaW50ZXJMZWF2ZSxcbiAgICAgIGhhbmRsZVBvaW50ZXJVcCxcbiAgICAgIHJlZnMuc2V0UmVmZXJlbmNlLFxuICAgICAgd2l0aG91dFdyYXBwZXIsXG4gICAgXSk7XG5cbiAgICBpZiAod2l0aG91dFdyYXBwZXIpIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAge2NoaWxkcmVuV2l0aFByb3BzfVxuICAgICAgICAgIHsoaXNPcGVuIHx8IHNob3dJbkN1cnNvclBvc2l0aW9uKSAmJlxuICAgICAgICAgICAgY3JlYXRlUG9ydGFsKFxuICAgICAgICAgICAgICByZW5kZXJGbG9hdGluZ0VsZW1lbnQoKSxcbiAgICAgICAgICAgICAgZ2V0UG9wdXBDb250YWluZXIocmVmcy5kb21SZWZlcmVuY2UuY3VycmVudCA/PyBkb2N1bWVudC5ib2R5KVxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC8+XG4gICAgICApO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17cmVmcy5zZXRSZWZlcmVuY2V9XG4gICAgICAgIGNzcz17W2Jhc2VUb29sdGlwUmVmZXJlbmNlV3JhcHBlclN0eWxlLCBzdHlsZXM/LnJlZmVyZW5jZVdyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICBvblBvaW50ZXJFbnRlcj17aGFuZGxlUG9pbnRlckVudGVyfVxuICAgICAgICBvblBvaW50ZXJMZWF2ZT17aGFuZGxlUG9pbnRlckxlYXZlfVxuICAgICAgICBvbkZvY3VzPXtoYW5kbGVGb2N1c31cbiAgICAgICAgb25CbHVyPXtoYW5kbGVCbHVyfVxuICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgb25Db250ZXh0TWVudT17aGFuZGxlQ29udGV4dE1lbnV9XG4gICAgICAgIG9uUG9pbnRlclVwPXtoYW5kbGVQb2ludGVyVXB9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cblxuICAgICAgICB7KGlzT3BlbiB8fCBzaG93SW5DdXJzb3JQb3NpdGlvbikgJiZcbiAgICAgICAgICBjcmVhdGVQb3J0YWwoXG4gICAgICAgICAgICByZW5kZXJGbG9hdGluZ0VsZW1lbnQoKSxcbiAgICAgICAgICAgIGdldFBvcHVwQ29udGFpbmVyKHJlZnMuZG9tUmVmZXJlbmNlLmN1cnJlbnQgPz8gZG9jdW1lbnQuYm9keSlcbiAgICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onContextMenu: handleContextMenu, onPointerUp: handlePointerUp, children: [
|
|
108
113
|
children,
|
|
109
|
-
isOpen && createPortal(renderFloatingElement(), getPopupContainer())
|
|
114
|
+
(isOpen || showInCursorPosition) && createPortal(renderFloatingElement(), getPopupContainer(refs.domReference.current ?? document.body))
|
|
110
115
|
] });
|
|
111
116
|
});
|
|
112
117
|
export {
|
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
import { Placement } from '@floating-ui/react';
|
|
2
|
-
export declare const getBaseTooltipFloatingWrapperStyle: (placement: Placement, withArrow: boolean) => {
|
|
2
|
+
export declare const getBaseTooltipFloatingWrapperStyle: (placement: Placement, withArrow: boolean, isOpen: boolean) => {
|
|
3
|
+
readonly visibility: "visible" | "hidden";
|
|
4
|
+
} | {
|
|
5
|
+
readonly paddingBottom: number;
|
|
6
|
+
readonly paddingTop?: undefined;
|
|
7
|
+
readonly paddingRight?: undefined;
|
|
8
|
+
readonly paddingLeft?: undefined;
|
|
9
|
+
readonly visibility: "visible" | "hidden";
|
|
10
|
+
} | {
|
|
11
|
+
readonly paddingTop: number;
|
|
12
|
+
readonly paddingBottom?: undefined;
|
|
13
|
+
readonly paddingRight?: undefined;
|
|
14
|
+
readonly paddingLeft?: undefined;
|
|
15
|
+
readonly visibility: "visible" | "hidden";
|
|
16
|
+
} | {
|
|
17
|
+
readonly paddingRight: number;
|
|
18
|
+
readonly paddingBottom?: undefined;
|
|
19
|
+
readonly paddingTop?: undefined;
|
|
20
|
+
readonly paddingLeft?: undefined;
|
|
21
|
+
readonly visibility: "visible" | "hidden";
|
|
22
|
+
} | {
|
|
23
|
+
readonly paddingLeft: number;
|
|
24
|
+
readonly paddingBottom?: undefined;
|
|
25
|
+
readonly paddingTop?: undefined;
|
|
26
|
+
readonly paddingRight?: undefined;
|
|
27
|
+
readonly visibility: "visible" | "hidden";
|
|
28
|
+
};
|
|
3
29
|
export declare const baseTooltipReferenceWrapperStyle: {
|
|
4
30
|
display: string;
|
|
5
31
|
width: string;
|
|
@@ -23,8 +23,9 @@ const getPadding = (placement, withArrow) => {
|
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
|
-
const getBaseTooltipFloatingWrapperStyle = (placement, withArrow) => {
|
|
26
|
+
const getBaseTooltipFloatingWrapperStyle = (placement, withArrow, isOpen) => {
|
|
27
27
|
return {
|
|
28
|
+
visibility: isOpen ? "visible" : "hidden",
|
|
28
29
|
...getPadding(placement, withArrow)
|
|
29
30
|
};
|
|
30
31
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Interpolation } from '@emotion/react';
|
|
2
|
+
import { FloatingElement, ReferenceElement } from '@floating-ui/react';
|
|
2
3
|
import { ReactNode } from 'react';
|
|
3
4
|
import { Theme } from 'themes';
|
|
4
5
|
export type BaseTooltipPlacementType = "top" | "left" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
|
|
@@ -28,10 +29,12 @@ export interface BaseTooltipProps {
|
|
|
28
29
|
align?: BaseTooltipAlign;
|
|
29
30
|
transform?: boolean;
|
|
30
31
|
withoutWrapper?: boolean;
|
|
32
|
+
showInCursorPosition?: boolean;
|
|
31
33
|
styles?: {
|
|
32
34
|
floatingWrapper?: (theme: Theme) => Interpolation;
|
|
33
35
|
referenceWrapper?: (theme: Theme) => Interpolation;
|
|
34
36
|
};
|
|
35
|
-
getPopupContainer?: () => HTMLElement;
|
|
37
|
+
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
|
36
38
|
onOpenChange?: (open: boolean) => void;
|
|
37
39
|
}
|
|
40
|
+
export type AutoUpdateType = (reference: ReferenceElement, floating: FloatingElement, update: () => void) => () => void;
|
|
@@ -1,15 +1,37 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ExtendedRefs, Placement, Rect, ReferenceType } from '@floating-ui/react';
|
|
2
2
|
import { BaseTooltipAlign, BaseTooltipPlacementType, OffsetType } from './BaseTooltip.types';
|
|
3
|
+
import { MouseEvent, PointerEvent, ReactNode } from 'react';
|
|
3
4
|
export declare const ARROW_WIDTH = 8;
|
|
4
5
|
export declare const ARROW_HEIGHT = 4;
|
|
5
6
|
export declare const ARROW_PADDING = 6;
|
|
6
7
|
export declare const FLOATING_OFFSET_WITH_ARROW_HEIGHT: number;
|
|
7
8
|
export declare const Max_ZIndex = 2147483647;
|
|
8
9
|
export declare const singleSides: string[];
|
|
9
|
-
export declare const
|
|
10
|
+
export declare const isEmpty: (value: ReactNode | (() => ReactNode)) => boolean;
|
|
11
|
+
export declare const getArrowPlacementCorrection: (placement: Placement, refs: ExtendedRefs<ReferenceType>, align?: BaseTooltipAlign) => {};
|
|
10
12
|
export declare const isTopSide: (placement: Placement) => boolean;
|
|
11
13
|
export declare const isBottomSide: (placement: Placement) => boolean;
|
|
12
14
|
export declare const isLeftSide: (placement: Placement) => boolean;
|
|
13
15
|
export declare const isRightSide: (placement: Placement) => boolean;
|
|
14
16
|
export declare const convertBaseTooltipPlacement: (placement: BaseTooltipPlacementType) => Placement;
|
|
15
17
|
export declare const convertOffsetValues: (rect: Rect) => (element: OffsetType, index: number) => number;
|
|
18
|
+
export declare const getChangedProperties: (e: PointerEvent | MouseEvent, placement: Placement) => {
|
|
19
|
+
width: number;
|
|
20
|
+
x: number;
|
|
21
|
+
right: number;
|
|
22
|
+
left: number;
|
|
23
|
+
height?: undefined;
|
|
24
|
+
y?: undefined;
|
|
25
|
+
top?: undefined;
|
|
26
|
+
bottom?: undefined;
|
|
27
|
+
} | {
|
|
28
|
+
height: number;
|
|
29
|
+
y: number;
|
|
30
|
+
top: number;
|
|
31
|
+
bottom: number;
|
|
32
|
+
width?: undefined;
|
|
33
|
+
x?: undefined;
|
|
34
|
+
right?: undefined;
|
|
35
|
+
left?: undefined;
|
|
36
|
+
};
|
|
37
|
+
export declare const setNewReferencePosition: (refs: ExtendedRefs<ReferenceType>, pointerEvent: PointerEvent | MouseEvent, placement: Placement, arrowRef: SVGSVGElement | null) => void;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { computePosition, flip } from "@floating-ui/react";
|
|
2
|
+
import { isNil, isUndefined, isNumber } from "lodash-es";
|
|
2
3
|
import { FLOATING_OFFSET } from "../../utils/consts.js";
|
|
3
4
|
const ARROW_WIDTH = 8;
|
|
4
5
|
const ARROW_HEIGHT = 4;
|
|
@@ -9,16 +10,20 @@ const singleSides = ["left", "right", "top", "bottom"];
|
|
|
9
10
|
const leftCorrectionValues = ["top", "bottom", "top-start", "bottom-start", "top-end", "bottom-end"];
|
|
10
11
|
const arrowCenterValues = singleSides;
|
|
11
12
|
const arrowStartValues = ["left-start", "right-start", "top-start", "bottom-start"];
|
|
13
|
+
const isStartPosition = (placement) => arrowStartValues.includes(placement);
|
|
14
|
+
const isCentralPosition = (placement) => arrowCenterValues.includes(placement);
|
|
15
|
+
const isLeftCorrection = (placement) => leftCorrectionValues.includes(placement);
|
|
16
|
+
const isEmpty = (value) => isNil(value) || value === "";
|
|
12
17
|
const getArrowPosition = (placement, start, end) => {
|
|
13
|
-
if (
|
|
18
|
+
if (isStartPosition(placement)) {
|
|
14
19
|
return start;
|
|
15
20
|
}
|
|
16
21
|
return end;
|
|
17
22
|
};
|
|
18
|
-
const getArrowPlacementCorrection = (placement,
|
|
23
|
+
const getArrowPlacementCorrection = (placement, refs, align) => {
|
|
19
24
|
var _a, _b, _c, _d, _e, _f;
|
|
20
|
-
const floatingWidth = (_a =
|
|
21
|
-
const floatingHeight = (_b =
|
|
25
|
+
const floatingWidth = (_a = refs.floating.current) == null ? void 0 : _a.offsetWidth;
|
|
26
|
+
const floatingHeight = (_b = refs.floating.current) == null ? void 0 : _b.offsetHeight;
|
|
22
27
|
const isLeftCorrecting = leftCorrectionValues.includes(placement);
|
|
23
28
|
const floatingCorrectingSize = isLeftCorrecting ? floatingWidth : floatingHeight;
|
|
24
29
|
if (isUndefined(floatingCorrectingSize)) {
|
|
@@ -30,8 +35,8 @@ const getArrowPlacementCorrection = (placement, context, align) => {
|
|
|
30
35
|
...wrapperPaddingCompensation
|
|
31
36
|
};
|
|
32
37
|
}
|
|
33
|
-
const floatingRect = (_c =
|
|
34
|
-
const targetRect = (_d =
|
|
38
|
+
const floatingRect = (_c = refs.floating.current) == null ? void 0 : _c.getBoundingClientRect();
|
|
39
|
+
const targetRect = (_d = refs.reference.current) == null ? void 0 : _d.getBoundingClientRect();
|
|
35
40
|
const convertedOffsetValues = floatingRect ? (_e = align == null ? void 0 : align.offset) == null ? void 0 : _e.map(convertOffsetValues(floatingRect)) : [0, 0];
|
|
36
41
|
const convertedTargetOffsetValues = targetRect ? (_f = align == null ? void 0 : align.targetOffset) == null ? void 0 : _f.map(convertOffsetValues(targetRect)) : [0, 0];
|
|
37
42
|
const offsetValue = leftCorrectionValues.includes(placement) ? ((convertedOffsetValues == null ? void 0 : convertedOffsetValues[0]) ?? 0) - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[0]) ?? 0) : ((convertedOffsetValues == null ? void 0 : convertedOffsetValues[1]) ?? 0) - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[1]) ?? 0);
|
|
@@ -105,6 +110,68 @@ const convertOffsetValues = (rect) => (element, index) => {
|
|
|
105
110
|
const elementSize = index === 0 ? rect.width : rect.height;
|
|
106
111
|
return elementSize / 100 * percentValue;
|
|
107
112
|
};
|
|
113
|
+
const getChangedProperties = (e, placement) => {
|
|
114
|
+
if (isLeftCorrection(placement)) {
|
|
115
|
+
return {
|
|
116
|
+
width: 0,
|
|
117
|
+
x: e.clientX,
|
|
118
|
+
right: e.clientX,
|
|
119
|
+
left: e.clientX
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
return {
|
|
123
|
+
height: 0,
|
|
124
|
+
y: e.clientY,
|
|
125
|
+
top: e.clientY,
|
|
126
|
+
bottom: e.clientY
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
const correctionOnArrowWidth = (position, placement) => {
|
|
130
|
+
if (isStartPosition(placement)) {
|
|
131
|
+
return position - ARROW_WIDTH;
|
|
132
|
+
}
|
|
133
|
+
if (isCentralPosition(placement)) {
|
|
134
|
+
return position;
|
|
135
|
+
}
|
|
136
|
+
return position + ARROW_WIDTH * 1.5;
|
|
137
|
+
};
|
|
138
|
+
const setNewReferencePosition = (refs, pointerEvent, placement, arrowRef) => {
|
|
139
|
+
var _a, _b;
|
|
140
|
+
const reference = refs.domReference.current;
|
|
141
|
+
const floating = refs.floating.current;
|
|
142
|
+
const rect = (_b = (_a = refs == null ? void 0 : refs.domReference) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
|
|
143
|
+
if (rect && reference && floating) {
|
|
144
|
+
const changedProperties = getChangedProperties(pointerEvent, placement);
|
|
145
|
+
const virtualEl = {
|
|
146
|
+
getBoundingClientRect() {
|
|
147
|
+
return {
|
|
148
|
+
...rect,
|
|
149
|
+
...changedProperties
|
|
150
|
+
};
|
|
151
|
+
},
|
|
152
|
+
contextElement: reference
|
|
153
|
+
};
|
|
154
|
+
computePosition(virtualEl, floating, {
|
|
155
|
+
placement,
|
|
156
|
+
middleware: [flip()]
|
|
157
|
+
}).then(({
|
|
158
|
+
x,
|
|
159
|
+
y,
|
|
160
|
+
placement: placement2
|
|
161
|
+
}) => {
|
|
162
|
+
const correctedX = isLeftCorrection(placement2) ? correctionOnArrowWidth(x, placement2) : x;
|
|
163
|
+
const correctedY = isLeftCorrection(placement2) ? y : correctionOnArrowWidth(y, placement2);
|
|
164
|
+
Object.assign(floating.style, {
|
|
165
|
+
left: `${correctedX}px`,
|
|
166
|
+
top: `${correctedY}px`
|
|
167
|
+
});
|
|
168
|
+
if (arrowRef) {
|
|
169
|
+
const arrowPlacementCorrection = getArrowPlacementCorrection(placement2, refs);
|
|
170
|
+
Object.assign(arrowRef.style, arrowPlacementCorrection);
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
};
|
|
108
175
|
export {
|
|
109
176
|
ARROW_HEIGHT,
|
|
110
177
|
ARROW_PADDING,
|
|
@@ -114,9 +181,12 @@ export {
|
|
|
114
181
|
convertBaseTooltipPlacement,
|
|
115
182
|
convertOffsetValues,
|
|
116
183
|
getArrowPlacementCorrection,
|
|
184
|
+
getChangedProperties,
|
|
117
185
|
isBottomSide,
|
|
186
|
+
isEmpty,
|
|
118
187
|
isLeftSide,
|
|
119
188
|
isRightSide,
|
|
120
189
|
isTopSide,
|
|
190
|
+
setNewReferencePosition,
|
|
121
191
|
singleSides
|
|
122
192
|
};
|
|
@@ -34,5 +34,6 @@ export declare const useCustomFloating: ({ placement, autoAdjustOverflow, withAr
|
|
|
34
34
|
};
|
|
35
35
|
floatingPlacement: import('@floating-ui/utils').Placement;
|
|
36
36
|
setArrowRef: import('react').Dispatch<import('react').SetStateAction<SVGSVGElement | null>>;
|
|
37
|
+
arrowRef: SVGSVGElement | null;
|
|
37
38
|
};
|
|
38
39
|
export {};
|
|
@@ -20,36 +20,34 @@ const useCustomFloating = ({
|
|
|
20
20
|
const adjustY = ((_b2 = align == null ? void 0 : align.overflow) == null ? void 0 : _b2.adjustY) ?? autoAdjustOverflow;
|
|
21
21
|
const withFlip = adjustX || adjustY;
|
|
22
22
|
if (withFlip) {
|
|
23
|
-
floatingMiddleware[
|
|
23
|
+
floatingMiddleware[1] = flip({
|
|
24
24
|
mainAxis: isXMainAxis ? adjustX : adjustY,
|
|
25
25
|
crossAxis: isXMainAxis ? adjustY : adjustX
|
|
26
26
|
});
|
|
27
27
|
}
|
|
28
|
-
}, [
|
|
28
|
+
}, [(_a = align == null ? void 0 : align.overflow) == null ? void 0 : _a.adjustX, (_b = align == null ? void 0 : align.overflow) == null ? void 0 : _b.adjustY, autoAdjustOverflow, isXMainAxis]);
|
|
29
29
|
useEffect(() => {
|
|
30
|
-
floatingMiddleware[
|
|
30
|
+
floatingMiddleware[2] = shift({
|
|
31
31
|
mainAxis: singleSides.includes(convertedPlacement)
|
|
32
32
|
});
|
|
33
33
|
}, [convertedPlacement]);
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
floatingMiddleware[2] = offsetResult;
|
|
52
|
-
}, [align == null ? void 0 : align.offset, align == null ? void 0 : align.targetOffset, convertedPlacement, isXMainAxis]);
|
|
34
|
+
const offsetResult = offset(({
|
|
35
|
+
rects
|
|
36
|
+
}) => {
|
|
37
|
+
var _a2, _b2;
|
|
38
|
+
if (isUndefined(align == null ? void 0 : align.offset) && isUndefined(align == null ? void 0 : align.targetOffset)) {
|
|
39
|
+
return {};
|
|
40
|
+
}
|
|
41
|
+
const convertedOffsetValues = (_a2 = align == null ? void 0 : align.offset) == null ? void 0 : _a2.map(convertOffsetValues(rects.floating));
|
|
42
|
+
const convertedTargetOffsetValues = (_b2 = align == null ? void 0 : align.targetOffset) == null ? void 0 : _b2.map(convertOffsetValues(rects.reference));
|
|
43
|
+
const mainAxis = isXMainAxis ? ((convertedOffsetValues == null ? void 0 : convertedOffsetValues[0]) ?? 0) - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[0]) ?? 0) : ((convertedOffsetValues == null ? void 0 : convertedOffsetValues[1]) ?? 0) - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[1]) ?? 0);
|
|
44
|
+
const crossAxis = isXMainAxis ? ((convertedOffsetValues == null ? void 0 : convertedOffsetValues[1]) ?? 0) - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[1]) ?? 0) : ((convertedOffsetValues == null ? void 0 : convertedOffsetValues[0]) ?? 0) - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[0]) ?? 0);
|
|
45
|
+
return {
|
|
46
|
+
mainAxis,
|
|
47
|
+
crossAxis
|
|
48
|
+
};
|
|
49
|
+
}, [convertedPlacement]);
|
|
50
|
+
floatingMiddleware[0] = offsetResult;
|
|
53
51
|
useEffect(() => {
|
|
54
52
|
if (arrowRef && withArrow) {
|
|
55
53
|
floatingMiddleware[3] = arrow({
|
|
@@ -74,7 +72,8 @@ const useCustomFloating = ({
|
|
|
74
72
|
floatingStyles,
|
|
75
73
|
context,
|
|
76
74
|
floatingPlacement,
|
|
77
|
-
setArrowRef
|
|
75
|
+
setArrowRef,
|
|
76
|
+
arrowRef
|
|
78
77
|
};
|
|
79
78
|
};
|
|
80
79
|
export {
|
|
@@ -1,22 +1,25 @@
|
|
|
1
|
-
import { MouseEvent as ReactMouseEvent } from 'react';
|
|
1
|
+
import { PointerEvent, MouseEvent as ReactMouseEvent } from 'react';
|
|
2
2
|
import { BaseTooltipTriggerType } from '../BaseTooltip.types';
|
|
3
|
-
import { ExtendedRefs, ReferenceType } from '@floating-ui/react';
|
|
3
|
+
import { ExtendedRefs, ReferenceType, Placement } from '@floating-ui/react';
|
|
4
4
|
export interface UseShowTooltipControllerProp {
|
|
5
5
|
trigger: BaseTooltipTriggerType[];
|
|
6
6
|
defaultOpen: boolean;
|
|
7
7
|
open: boolean | undefined;
|
|
8
8
|
mouseEnterDelay: number;
|
|
9
9
|
mouseLeaveDelay: number;
|
|
10
|
+
showInCursorPosition: boolean;
|
|
11
|
+
placement: Placement;
|
|
10
12
|
refs: ExtendedRefs<ReferenceType>;
|
|
11
13
|
onOpenChange: ((open: boolean) => void) | undefined;
|
|
14
|
+
arrowRef: SVGSVGElement | null;
|
|
12
15
|
}
|
|
13
|
-
export declare const useShowTooltipController: ({ trigger, defaultOpen, open, mouseEnterDelay, mouseLeaveDelay, refs, onOpenChange, }: UseShowTooltipControllerProp) => {
|
|
16
|
+
export declare const useShowTooltipController: ({ trigger, defaultOpen, open, mouseEnterDelay, mouseLeaveDelay, showInCursorPosition, refs, placement, onOpenChange, arrowRef, }: UseShowTooltipControllerProp) => {
|
|
14
17
|
isOpen: boolean;
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
handlePointerEnter: ((e: PointerEvent) => void) | undefined;
|
|
19
|
+
handlePointerLeave: (() => void) | undefined;
|
|
17
20
|
handleFocus: (() => void) | undefined;
|
|
18
21
|
handleBlur: (() => void) | undefined;
|
|
19
22
|
handleClick: ((e: ReactMouseEvent) => void) | undefined;
|
|
20
23
|
handleContextMenu: ((e: ReactMouseEvent) => void) | undefined;
|
|
21
|
-
|
|
24
|
+
handlePointerUp: ((e: ReactMouseEvent) => void) | undefined;
|
|
22
25
|
};
|
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
|
2
2
|
import { isUndefined } from "lodash-es";
|
|
3
3
|
import { convertSecondsToMilliseconds } from "../../../utils/converters.js";
|
|
4
|
+
import "@floating-ui/react";
|
|
5
|
+
import { setNewReferencePosition } from "../BaseTooltip.utils.js";
|
|
4
6
|
const useShowTooltipController = ({
|
|
5
7
|
trigger,
|
|
6
8
|
defaultOpen,
|
|
7
9
|
open,
|
|
8
10
|
mouseEnterDelay,
|
|
9
11
|
mouseLeaveDelay,
|
|
12
|
+
showInCursorPosition,
|
|
10
13
|
refs,
|
|
11
|
-
|
|
14
|
+
placement,
|
|
15
|
+
onOpenChange,
|
|
16
|
+
arrowRef
|
|
12
17
|
}) => {
|
|
13
18
|
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
14
19
|
const timerId = useRef(null);
|
|
@@ -29,18 +34,21 @@ const useShowTooltipController = ({
|
|
|
29
34
|
}
|
|
30
35
|
onOpenChange == null ? void 0 : onOpenChange(false);
|
|
31
36
|
}, [onOpenChange, open]);
|
|
32
|
-
const
|
|
37
|
+
const handlePointerEnter = useMemo(() => {
|
|
33
38
|
if (!trigger.includes("hover")) {
|
|
34
39
|
return;
|
|
35
40
|
}
|
|
36
|
-
return () => {
|
|
41
|
+
return (e) => {
|
|
37
42
|
if (timerId.current) {
|
|
38
43
|
clearTimeout(timerId.current);
|
|
39
44
|
}
|
|
45
|
+
if (showInCursorPosition) {
|
|
46
|
+
setNewReferencePosition(refs, e, placement, arrowRef);
|
|
47
|
+
}
|
|
40
48
|
timerId.current = setTimeout(showTooltip, convertSecondsToMilliseconds(mouseEnterDelay));
|
|
41
49
|
};
|
|
42
|
-
}, [mouseEnterDelay, showTooltip, trigger]);
|
|
43
|
-
const
|
|
50
|
+
}, [arrowRef, mouseEnterDelay, placement, refs, showInCursorPosition, showTooltip, trigger]);
|
|
51
|
+
const handlePointerLeave = useMemo(() => {
|
|
44
52
|
if (!trigger.includes("hover")) {
|
|
45
53
|
return;
|
|
46
54
|
}
|
|
@@ -78,6 +86,9 @@ const useShowTooltipController = ({
|
|
|
78
86
|
if (!isReferenceElement) {
|
|
79
87
|
return;
|
|
80
88
|
}
|
|
89
|
+
if (showInCursorPosition) {
|
|
90
|
+
setNewReferencePosition(refs, e, placement, arrowRef);
|
|
91
|
+
}
|
|
81
92
|
if (isUndefined(open)) {
|
|
82
93
|
setIsOpen((prev) => !prev);
|
|
83
94
|
onOpenChange == null ? void 0 : onOpenChange(isOpen);
|
|
@@ -85,7 +96,7 @@ const useShowTooltipController = ({
|
|
|
85
96
|
onOpenChange == null ? void 0 : onOpenChange(!open);
|
|
86
97
|
}
|
|
87
98
|
};
|
|
88
|
-
}, [isOpen, onOpenChange, open, refs
|
|
99
|
+
}, [arrowRef, isOpen, onOpenChange, open, placement, refs, showInCursorPosition, trigger]);
|
|
89
100
|
const handleContextMenu = useMemo(() => {
|
|
90
101
|
if (!trigger.includes("contextMenu")) {
|
|
91
102
|
return void 0;
|
|
@@ -110,21 +121,22 @@ const useShowTooltipController = ({
|
|
|
110
121
|
};
|
|
111
122
|
}, [refs, showTooltip, trigger]);
|
|
112
123
|
const handleMouseUp = useCallback((e) => {
|
|
113
|
-
var _a;
|
|
124
|
+
var _a, _b;
|
|
114
125
|
if (!e.target) {
|
|
115
126
|
return;
|
|
116
127
|
}
|
|
117
128
|
const isFloatingElement = (_a = refs.floating.current) == null ? void 0 : _a.contains(e.target);
|
|
118
|
-
|
|
129
|
+
const isReferenceElement = (_b = refs.domReference.current) == null ? void 0 : _b.contains(e.target);
|
|
130
|
+
if (!isOpen || isFloatingElement || isReferenceElement) {
|
|
119
131
|
return;
|
|
120
132
|
}
|
|
121
133
|
hideTooltip();
|
|
122
|
-
}, [hideTooltip, isOpen, refs.floating]);
|
|
134
|
+
}, [hideTooltip, isOpen, refs.domReference, refs.floating]);
|
|
123
135
|
useEffect(() => {
|
|
124
136
|
document.body.addEventListener("mouseup", handleMouseUp);
|
|
125
137
|
return () => document.body.removeEventListener("mouseup", handleMouseUp);
|
|
126
138
|
}, [handleMouseUp]);
|
|
127
|
-
const
|
|
139
|
+
const handlePointerUp = useMemo(() => {
|
|
128
140
|
if (!trigger.includes("click")) {
|
|
129
141
|
return void 0;
|
|
130
142
|
}
|
|
@@ -134,13 +146,13 @@ const useShowTooltipController = ({
|
|
|
134
146
|
}, [trigger]);
|
|
135
147
|
return {
|
|
136
148
|
isOpen: open ?? isOpen,
|
|
137
|
-
|
|
138
|
-
|
|
149
|
+
handlePointerEnter,
|
|
150
|
+
handlePointerLeave,
|
|
139
151
|
handleFocus,
|
|
140
152
|
handleBlur,
|
|
141
153
|
handleClick,
|
|
142
154
|
handleContextMenu,
|
|
143
|
-
|
|
155
|
+
handlePointerUp
|
|
144
156
|
};
|
|
145
157
|
};
|
|
146
158
|
export {
|