@tamagui/tooltip 3.0.0-beta.1479.1 → 3.0.0-beta.1537.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Tooltip.cjs +39 -10
- package/dist/esm/Tooltip.mjs +39 -10
- package/dist/esm/Tooltip.mjs.map +1 -1
- package/dist/jsx/Tooltip.mjs +39 -10
- package/dist/jsx/Tooltip.mjs.map +1 -1
- package/package.json +13 -13
- package/src/Tooltip.tsx +44 -10
- package/types/Tooltip.d.ts.map +1 -1
package/dist/cjs/Tooltip.cjs
CHANGED
|
@@ -43,13 +43,20 @@ var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
|
43
43
|
var React = __toESM(require("react"), 1);
|
|
44
44
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
45
45
|
const TOOLTIP_SCOPE = "";
|
|
46
|
-
const TooltipContentFrame = (0, import_core.styled)(import_popper.PopperContentFrame, {
|
|
46
|
+
const TooltipContentFrame = (0, import_core.styled)(import_popper.PopperContentFrame, {
|
|
47
|
+
name: "TooltipContent",
|
|
48
|
+
paddingHorizontal: "2.5",
|
|
49
|
+
paddingVertical: "1",
|
|
50
|
+
borderRadius: "2"
|
|
51
|
+
});
|
|
52
|
+
const TooltipInstantContext = React.createContext(false);
|
|
47
53
|
const ALWAYS_DISABLE_TOOLTIP = {
|
|
48
54
|
focus: true,
|
|
49
55
|
"remove-scroll": true
|
|
50
56
|
};
|
|
51
57
|
const TooltipContent = (0, import_core.createStyledHOC)(TooltipContentFrame, (props, ref) => {
|
|
52
58
|
const preventAnimation = React.useContext(PreventTooltipAnimationContext);
|
|
59
|
+
const isInstant = React.useContext(TooltipInstantContext);
|
|
53
60
|
const zIndexFromContext = React.useContext(TooltipZIndexContext);
|
|
54
61
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverContent, {
|
|
55
62
|
scope: props.scope || TOOLTIP_SCOPE,
|
|
@@ -57,11 +64,15 @@ const TooltipContent = (0, import_core.createStyledHOC)(TooltipContentFrame, (pr
|
|
|
57
64
|
backgroundColor: "background",
|
|
58
65
|
alignItems: "center",
|
|
59
66
|
pointerEvents: "none",
|
|
60
|
-
paddingHorizontal: "2",
|
|
67
|
+
paddingHorizontal: "2.5",
|
|
61
68
|
paddingVertical: "1",
|
|
69
|
+
borderRadius: "2",
|
|
62
70
|
...zIndexFromContext !== void 0 && { zIndex: zIndexFromContext },
|
|
63
71
|
...props,
|
|
64
|
-
...preventAnimation && {
|
|
72
|
+
...(preventAnimation || isInstant) && {
|
|
73
|
+
transition: null,
|
|
74
|
+
"data-instant": ""
|
|
75
|
+
},
|
|
65
76
|
ref
|
|
66
77
|
});
|
|
67
78
|
}, { displayName: "Tooltip" });
|
|
@@ -96,7 +107,7 @@ const TooltipComponent = (0, import_core.createRefComponent)(function Tooltip(pr
|
|
|
96
107
|
const triggerRef = React.useRef(null);
|
|
97
108
|
const closeReasonRef = React.useRef(void 0);
|
|
98
109
|
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
|
|
99
|
-
const { delay: delayGroup, setCurrentId } = (0, import_floating.useDelayGroupContext)();
|
|
110
|
+
const { delay: delayGroup, setCurrentId, currentId } = (0, import_floating.useDelayGroupContext)();
|
|
100
111
|
const delay = delayProp !== void 0 ? delayProp : delayGroup ?? 400;
|
|
101
112
|
const restMs = restMsProp ?? (typeof delay === "number" ? delay : 0);
|
|
102
113
|
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
@@ -104,12 +115,26 @@ const TooltipComponent = (0, import_core.createRefComponent)(function Tooltip(pr
|
|
|
104
115
|
defaultProp: false,
|
|
105
116
|
onChange: onOpenChangeProp
|
|
106
117
|
});
|
|
107
|
-
const
|
|
108
|
-
const
|
|
109
|
-
|
|
118
|
+
const autoId = React.useId();
|
|
119
|
+
const id = props.groupId ?? autoId;
|
|
120
|
+
const [isInstant, setIsInstant] = React.useState(false);
|
|
121
|
+
React.useEffect(() => {
|
|
122
|
+
if (!open) {
|
|
123
|
+
setIsInstant(false);
|
|
124
|
+
}
|
|
125
|
+
}, [open]);
|
|
126
|
+
const onOpenChange = (0, import_core2.useEvent)((openVal) => {
|
|
127
|
+
if (openVal) {
|
|
128
|
+
if (currentId != null && currentId !== id) {
|
|
129
|
+
setIsInstant(true);
|
|
130
|
+
} else {
|
|
131
|
+
setIsInstant(false);
|
|
132
|
+
}
|
|
110
133
|
setCurrentId(id);
|
|
134
|
+
} else {
|
|
135
|
+
setIsInstant(false);
|
|
111
136
|
}
|
|
112
|
-
setOpen(
|
|
137
|
+
setOpen(openVal);
|
|
113
138
|
});
|
|
114
139
|
React.useEffect(() => {
|
|
115
140
|
if (!open) return;
|
|
@@ -164,13 +189,17 @@ const TooltipComponent = (0, import_core.createRefComponent)(function Tooltip(pr
|
|
|
164
189
|
})
|
|
165
190
|
})
|
|
166
191
|
});
|
|
192
|
+
const wrappedContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipInstantContext.Provider, {
|
|
193
|
+
value: isInstant,
|
|
194
|
+
children: content
|
|
195
|
+
});
|
|
167
196
|
if (zIndex !== void 0) {
|
|
168
197
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipZIndexContext.Provider, {
|
|
169
198
|
value: zIndex,
|
|
170
|
-
children:
|
|
199
|
+
children: wrappedContent
|
|
171
200
|
});
|
|
172
201
|
}
|
|
173
|
-
return
|
|
202
|
+
return wrappedContent;
|
|
174
203
|
});
|
|
175
204
|
const TooltipTrigger = (0, import_core.createRefComponent)(function TooltipTrigger2(props, ref) {
|
|
176
205
|
const { scope, ...rest } = props;
|
package/dist/esm/Tooltip.mjs
CHANGED
|
@@ -8,13 +8,20 @@ import * as React from "react";
|
|
|
8
8
|
import { jsx } from "react/jsx-runtime";
|
|
9
9
|
|
|
10
10
|
const TOOLTIP_SCOPE = "";
|
|
11
|
-
const TooltipContentFrame = styled(PopperContentFrame, {
|
|
11
|
+
const TooltipContentFrame = styled(PopperContentFrame, {
|
|
12
|
+
name: "TooltipContent",
|
|
13
|
+
paddingHorizontal: "2.5",
|
|
14
|
+
paddingVertical: "1",
|
|
15
|
+
borderRadius: "2"
|
|
16
|
+
});
|
|
17
|
+
const TooltipInstantContext = React.createContext(false);
|
|
12
18
|
const ALWAYS_DISABLE_TOOLTIP = {
|
|
13
19
|
focus: true,
|
|
14
20
|
"remove-scroll": true
|
|
15
21
|
};
|
|
16
22
|
const TooltipContent = createStyledHOC(TooltipContentFrame, (props, ref) => {
|
|
17
23
|
const preventAnimation = React.useContext(PreventTooltipAnimationContext);
|
|
24
|
+
const isInstant = React.useContext(TooltipInstantContext);
|
|
18
25
|
const zIndexFromContext = React.useContext(TooltipZIndexContext);
|
|
19
26
|
return /* @__PURE__ */ jsx(PopoverContent, {
|
|
20
27
|
scope: props.scope || TOOLTIP_SCOPE,
|
|
@@ -22,11 +29,15 @@ const TooltipContent = createStyledHOC(TooltipContentFrame, (props, ref) => {
|
|
|
22
29
|
backgroundColor: "background",
|
|
23
30
|
alignItems: "center",
|
|
24
31
|
pointerEvents: "none",
|
|
25
|
-
paddingHorizontal: "2",
|
|
32
|
+
paddingHorizontal: "2.5",
|
|
26
33
|
paddingVertical: "1",
|
|
34
|
+
borderRadius: "2",
|
|
27
35
|
...zIndexFromContext !== void 0 && { zIndex: zIndexFromContext },
|
|
28
36
|
...props,
|
|
29
|
-
...preventAnimation && {
|
|
37
|
+
...(preventAnimation || isInstant) && {
|
|
38
|
+
transition: null,
|
|
39
|
+
"data-instant": ""
|
|
40
|
+
},
|
|
30
41
|
ref
|
|
31
42
|
});
|
|
32
43
|
}, { displayName: "Tooltip" });
|
|
@@ -61,7 +72,7 @@ const TooltipComponent = createRefComponent(function Tooltip(props, ref) {
|
|
|
61
72
|
const triggerRef = React.useRef(null);
|
|
62
73
|
const closeReasonRef = React.useRef(void 0);
|
|
63
74
|
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
|
|
64
|
-
const { delay: delayGroup, setCurrentId } = useDelayGroupContext();
|
|
75
|
+
const { delay: delayGroup, setCurrentId, currentId } = useDelayGroupContext();
|
|
65
76
|
const delay = delayProp !== void 0 ? delayProp : delayGroup ?? 400;
|
|
66
77
|
const restMs = restMsProp ?? (typeof delay === "number" ? delay : 0);
|
|
67
78
|
const [open, setOpen] = useControllableState({
|
|
@@ -69,12 +80,26 @@ const TooltipComponent = createRefComponent(function Tooltip(props, ref) {
|
|
|
69
80
|
defaultProp: false,
|
|
70
81
|
onChange: onOpenChangeProp
|
|
71
82
|
});
|
|
72
|
-
const
|
|
73
|
-
const
|
|
74
|
-
|
|
83
|
+
const autoId = React.useId();
|
|
84
|
+
const id = props.groupId ?? autoId;
|
|
85
|
+
const [isInstant, setIsInstant] = React.useState(false);
|
|
86
|
+
React.useEffect(() => {
|
|
87
|
+
if (!open) {
|
|
88
|
+
setIsInstant(false);
|
|
89
|
+
}
|
|
90
|
+
}, [open]);
|
|
91
|
+
const onOpenChange = useEvent((openVal) => {
|
|
92
|
+
if (openVal) {
|
|
93
|
+
if (currentId != null && currentId !== id) {
|
|
94
|
+
setIsInstant(true);
|
|
95
|
+
} else {
|
|
96
|
+
setIsInstant(false);
|
|
97
|
+
}
|
|
75
98
|
setCurrentId(id);
|
|
99
|
+
} else {
|
|
100
|
+
setIsInstant(false);
|
|
76
101
|
}
|
|
77
|
-
setOpen(
|
|
102
|
+
setOpen(openVal);
|
|
78
103
|
});
|
|
79
104
|
React.useEffect(() => {
|
|
80
105
|
if (!open) return;
|
|
@@ -129,13 +154,17 @@ const TooltipComponent = createRefComponent(function Tooltip(props, ref) {
|
|
|
129
154
|
})
|
|
130
155
|
})
|
|
131
156
|
});
|
|
157
|
+
const wrappedContent = /* @__PURE__ */ jsx(TooltipInstantContext.Provider, {
|
|
158
|
+
value: isInstant,
|
|
159
|
+
children: content
|
|
160
|
+
});
|
|
132
161
|
if (zIndex !== void 0) {
|
|
133
162
|
return /* @__PURE__ */ jsx(TooltipZIndexContext.Provider, {
|
|
134
163
|
value: zIndex,
|
|
135
|
-
children:
|
|
164
|
+
children: wrappedContent
|
|
136
165
|
});
|
|
137
166
|
}
|
|
138
|
-
return
|
|
167
|
+
return wrappedContent;
|
|
139
168
|
});
|
|
140
169
|
const TooltipTrigger = createRefComponent(function TooltipTrigger2(props, ref) {
|
|
141
170
|
const { scope, ...rest } = props;
|
package/dist/esm/Tooltip.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":[],"sources":["esm/Tooltip.js"],"sourcesContent":["import { createStyledHOC, createRefComponent, styled } from \"@tamagui/core\";\n\nimport { FloatingDelayGroup, useDelayGroupContext } from \"@tamagui/floating\";\nimport { useEvent } from \"@tamagui/core\";\nimport { FloatingOverrideContext } from \"@tamagui/floating\";\nimport { withStaticProperties } from \"@tamagui/helpers\";\nimport {\n PopoverAnchor,\n PopoverArrow,\n PopoverContent,\n PopoverContextProvider,\n PopoverTrigger,\n useFloatingContext\n} from \"@tamagui/popover\";\nimport { Popper, PopperContentFrame } from \"@tamagui/popper\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst TOOLTIP_SCOPE = \"\";\nconst TooltipContentFrame = styled(PopperContentFrame, {});\nconst ALWAYS_DISABLE_TOOLTIP = {\n focus: true,\n \"remove-scroll\": true\n // it's nice to hit escape to hide a tooltip\n // dismiss: true\n};\nconst TooltipContent = createStyledHOC(\n TooltipContentFrame,\n (props, ref) => {\n const preventAnimation = React.useContext(PreventTooltipAnimationContext);\n const zIndexFromContext = React.useContext(TooltipZIndexContext);\n return /* @__PURE__ */ jsx(\n PopoverContent,\n {\n scope: props.scope || TOOLTIP_SCOPE,\n alwaysDisable: ALWAYS_DISABLE_TOOLTIP,\n backgroundColor: \"background\",\n alignItems: \"center\",\n pointerEvents: \"none\",\n paddingHorizontal: \"2\",\n paddingVertical: \"1\",\n ...zIndexFromContext !== void 0 && { zIndex: zIndexFromContext },\n ...props,\n ...preventAnimation && { transition: null },\n ref\n }\n );\n },\n {\n displayName: \"Tooltip\"\n }\n);\nconst TooltipArrow = createRefComponent(\n (props, ref) => {\n const { className, ...rest } = props;\n return /* @__PURE__ */ jsx(\n PopoverArrow,\n {\n scope: props.scope || TOOLTIP_SCOPE,\n className: `is_Tooltip ${className || \"\"}`.trim(),\n ref,\n ...rest\n }\n );\n }\n);\nconst PreventTooltipAnimationContext = React.createContext(false);\nconst TooltipZIndexContext = React.createContext(void 0);\nconst TooltipGroup = ({\n children,\n delay,\n preventAnimation = false,\n timeoutMs\n}) => {\n return /* @__PURE__ */ jsx(PreventTooltipAnimationContext.Provider, { value: preventAnimation, children: /* @__PURE__ */ jsx(\n FloatingDelayGroup,\n {\n timeoutMs,\n delay: React.useMemo(() => delay, [JSON.stringify(delay)]),\n children\n }\n ) });\n};\nconst setOpens = /* @__PURE__ */ new Set();\nconst closeOpenTooltips = () => {\n setOpens.forEach((x) => x(false));\n};\nconst TooltipComponent = createRefComponent(function Tooltip(props, ref) {\n \"use no memo\";\n const {\n children,\n delay: delayProp,\n restMs: restMsProp,\n onOpenChange: onOpenChangeProp,\n focus,\n open: openProp,\n disableAutoCloseOnScroll,\n zIndex,\n scope = TOOLTIP_SCOPE,\n ...restProps\n } = props;\n const triggerRef = React.useRef(null);\n const closeReasonRef = React.useRef(void 0);\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);\n const { delay: delayGroup, setCurrentId } = useDelayGroupContext();\n const delay = delayProp !== void 0 ? delayProp : delayGroup ?? 400;\n const restMs = restMsProp ?? (typeof delay === \"number\" ? delay : 0);\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: false,\n onChange: onOpenChangeProp\n });\n const id = props.groupId;\n const onOpenChange = useEvent((open2) => {\n if (open2) {\n setCurrentId(id);\n }\n setOpen(open2);\n });\n React.useEffect(() => {\n if (!open) return;\n if (disableAutoCloseOnScroll) return;\n if (typeof document === \"undefined\") return;\n const closeIt = () => {\n setOpen(false);\n };\n setOpens.add(setOpen);\n document.documentElement.addEventListener(\"scroll\", closeIt);\n return () => {\n setOpens.delete(setOpen);\n document.documentElement.removeEventListener(\"scroll\", closeIt);\n };\n }, [open, disableAutoCloseOnScroll]);\n const floatingContext = useFloatingContext({\n open,\n setOpen: onOpenChange,\n closeReasonRef,\n disable: false,\n disableFocus: false,\n hoverable: true,\n role: \"tooltip\",\n focus,\n groupId: id,\n delay,\n restMs\n });\n const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), []);\n const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), []);\n const contentId = React.useId();\n const content = /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, { value: floatingContext, children: /* @__PURE__ */ jsx(Popper, { scope, allowFlip: true, stayInFrame: true, open, ...restProps, children: /* @__PURE__ */ jsx(\n PopoverContextProvider,\n {\n scope,\n contentId,\n triggerRef,\n open,\n onOpenChange: setOpen,\n closeReasonRef,\n onOpenToggle: voidFn,\n hasCustomAnchor,\n onCustomAnchorAdd,\n onCustomAnchorRemove,\n children\n }\n ) }) });\n if (zIndex !== void 0) {\n return /* @__PURE__ */ jsx(TooltipZIndexContext.Provider, { value: zIndex, children: content });\n }\n return content;\n});\nconst TooltipTrigger = createRefComponent(function TooltipTrigger2(props, ref) {\n const { scope, ...rest } = props;\n return /* @__PURE__ */ jsx(PopoverTrigger, { ...rest, scope: scope || TOOLTIP_SCOPE, ref });\n});\nconst TooltipAnchor = createRefComponent(function TooltipAnchor2(props, ref) {\n const { scope, ...rest } = props;\n return /* @__PURE__ */ jsx(PopoverAnchor, { ...rest, scope: scope || TOOLTIP_SCOPE, ref });\n});\nconst Tooltip2 = withStaticProperties(TooltipComponent, {\n Anchor: TooltipAnchor,\n Arrow: TooltipArrow,\n Content: TooltipContent,\n Trigger: TooltipTrigger\n});\nconst voidFn = () => {\n};\nexport {\n Tooltip2 as Tooltip,\n TooltipGroup,\n closeOpenTooltips\n};\n//# sourceMappingURL=Tooltip.js.map\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":[],"sources":["esm/Tooltip.js"],"sourcesContent":["import { createStyledHOC, createRefComponent, styled } from \"@tamagui/core\";\n\nimport { FloatingDelayGroup, useDelayGroupContext } from \"@tamagui/floating\";\nimport { useEvent } from \"@tamagui/core\";\nimport { FloatingOverrideContext } from \"@tamagui/floating\";\nimport { withStaticProperties } from \"@tamagui/helpers\";\nimport {\n PopoverAnchor,\n PopoverArrow,\n PopoverContent,\n PopoverContextProvider,\n PopoverTrigger,\n useFloatingContext\n} from \"@tamagui/popover\";\nimport { Popper, PopperContentFrame } from \"@tamagui/popper\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst TOOLTIP_SCOPE = \"\";\nconst TooltipContentFrame = styled(PopperContentFrame, {\n name: \"TooltipContent\",\n paddingHorizontal: \"2.5\",\n paddingVertical: \"1\",\n borderRadius: \"2\"\n});\nconst TooltipInstantContext = React.createContext(false);\nconst ALWAYS_DISABLE_TOOLTIP = {\n focus: true,\n \"remove-scroll\": true\n // it's nice to hit escape to hide a tooltip\n // dismiss: true\n};\nconst TooltipContent = createStyledHOC(\n TooltipContentFrame,\n (props, ref) => {\n const preventAnimation = React.useContext(PreventTooltipAnimationContext);\n const isInstant = React.useContext(TooltipInstantContext);\n const zIndexFromContext = React.useContext(TooltipZIndexContext);\n return /* @__PURE__ */ jsx(\n PopoverContent,\n {\n scope: props.scope || TOOLTIP_SCOPE,\n alwaysDisable: ALWAYS_DISABLE_TOOLTIP,\n backgroundColor: \"background\",\n alignItems: \"center\",\n pointerEvents: \"none\",\n paddingHorizontal: \"2.5\",\n paddingVertical: \"1\",\n borderRadius: \"2\",\n ...zIndexFromContext !== void 0 && { zIndex: zIndexFromContext },\n ...props,\n ...(preventAnimation || isInstant) && {\n transition: null,\n \"data-instant\": \"\"\n },\n ref\n }\n );\n },\n {\n displayName: \"Tooltip\"\n }\n);\nconst TooltipArrow = createRefComponent(\n (props, ref) => {\n const { className, ...rest } = props;\n return /* @__PURE__ */ jsx(\n PopoverArrow,\n {\n scope: props.scope || TOOLTIP_SCOPE,\n className: `is_Tooltip ${className || \"\"}`.trim(),\n ref,\n ...rest\n }\n );\n }\n);\nconst PreventTooltipAnimationContext = React.createContext(false);\nconst TooltipZIndexContext = React.createContext(void 0);\nconst TooltipGroup = ({\n children,\n delay,\n preventAnimation = false,\n timeoutMs\n}) => {\n return /* @__PURE__ */ jsx(PreventTooltipAnimationContext.Provider, { value: preventAnimation, children: /* @__PURE__ */ jsx(\n FloatingDelayGroup,\n {\n timeoutMs,\n delay: React.useMemo(() => delay, [JSON.stringify(delay)]),\n children\n }\n ) });\n};\nconst setOpens = /* @__PURE__ */ new Set();\nconst closeOpenTooltips = () => {\n setOpens.forEach((x) => x(false));\n};\nconst TooltipComponent = createRefComponent(function Tooltip(props, ref) {\n \"use no memo\";\n const {\n children,\n delay: delayProp,\n restMs: restMsProp,\n onOpenChange: onOpenChangeProp,\n focus,\n open: openProp,\n disableAutoCloseOnScroll,\n zIndex,\n scope = TOOLTIP_SCOPE,\n ...restProps\n } = props;\n const triggerRef = React.useRef(null);\n const closeReasonRef = React.useRef(void 0);\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);\n const { delay: delayGroup, setCurrentId, currentId } = useDelayGroupContext();\n const delay = delayProp !== void 0 ? delayProp : delayGroup ?? 400;\n const restMs = restMsProp ?? (typeof delay === \"number\" ? delay : 0);\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: false,\n onChange: onOpenChangeProp\n });\n const autoId = React.useId();\n const id = props.groupId ?? autoId;\n const [isInstant, setIsInstant] = React.useState(false);\n React.useEffect(() => {\n if (!open) {\n setIsInstant(false);\n }\n }, [open]);\n const onOpenChange = useEvent((openVal) => {\n if (openVal) {\n if (currentId != null && currentId !== id) {\n setIsInstant(true);\n } else {\n setIsInstant(false);\n }\n setCurrentId(id);\n } else {\n setIsInstant(false);\n }\n setOpen(openVal);\n });\n React.useEffect(() => {\n if (!open) return;\n if (disableAutoCloseOnScroll) return;\n if (typeof document === \"undefined\") return;\n const closeIt = () => {\n setOpen(false);\n };\n setOpens.add(setOpen);\n document.documentElement.addEventListener(\"scroll\", closeIt);\n return () => {\n setOpens.delete(setOpen);\n document.documentElement.removeEventListener(\"scroll\", closeIt);\n };\n }, [open, disableAutoCloseOnScroll]);\n const floatingContext = useFloatingContext({\n open,\n setOpen: onOpenChange,\n closeReasonRef,\n disable: false,\n disableFocus: false,\n hoverable: true,\n role: \"tooltip\",\n focus,\n groupId: id,\n delay,\n restMs\n });\n const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), []);\n const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), []);\n const contentId = React.useId();\n const content = /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, { value: floatingContext, children: /* @__PURE__ */ jsx(Popper, { scope, allowFlip: true, stayInFrame: true, open, ...restProps, children: /* @__PURE__ */ jsx(\n PopoverContextProvider,\n {\n scope,\n contentId,\n triggerRef,\n open,\n onOpenChange: setOpen,\n closeReasonRef,\n onOpenToggle: voidFn,\n hasCustomAnchor,\n onCustomAnchorAdd,\n onCustomAnchorRemove,\n children\n }\n ) }) });\n const wrappedContent = /* @__PURE__ */ jsx(TooltipInstantContext.Provider, { value: isInstant, children: content });\n if (zIndex !== void 0) {\n return /* @__PURE__ */ jsx(TooltipZIndexContext.Provider, { value: zIndex, children: wrappedContent });\n }\n return wrappedContent;\n});\nconst TooltipTrigger = createRefComponent(function TooltipTrigger2(props, ref) {\n const { scope, ...rest } = props;\n return /* @__PURE__ */ jsx(PopoverTrigger, { ...rest, scope: scope || TOOLTIP_SCOPE, ref });\n});\nconst TooltipAnchor = createRefComponent(function TooltipAnchor2(props, ref) {\n const { scope, ...rest } = props;\n return /* @__PURE__ */ jsx(PopoverAnchor, { ...rest, scope: scope || TOOLTIP_SCOPE, ref });\n});\nconst Tooltip2 = withStaticProperties(TooltipComponent, {\n Anchor: TooltipAnchor,\n Arrow: TooltipArrow,\n Content: TooltipContent,\n Trigger: TooltipTrigger\n});\nconst voidFn = () => {\n};\nexport {\n Tooltip2 as Tooltip,\n TooltipGroup,\n closeOpenTooltips\n};\n//# sourceMappingURL=Tooltip.js.map\n"],"mappings":"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"}
|
package/dist/jsx/Tooltip.mjs
CHANGED
|
@@ -8,13 +8,20 @@ import * as React from "react";
|
|
|
8
8
|
import { jsx } from "react/jsx-runtime";
|
|
9
9
|
|
|
10
10
|
const TOOLTIP_SCOPE = "";
|
|
11
|
-
const TooltipContentFrame = styled(PopperContentFrame, {
|
|
11
|
+
const TooltipContentFrame = styled(PopperContentFrame, {
|
|
12
|
+
name: "TooltipContent",
|
|
13
|
+
paddingHorizontal: "2.5",
|
|
14
|
+
paddingVertical: "1",
|
|
15
|
+
borderRadius: "2"
|
|
16
|
+
});
|
|
17
|
+
const TooltipInstantContext = React.createContext(false);
|
|
12
18
|
const ALWAYS_DISABLE_TOOLTIP = {
|
|
13
19
|
focus: true,
|
|
14
20
|
"remove-scroll": true
|
|
15
21
|
};
|
|
16
22
|
const TooltipContent = createStyledHOC(TooltipContentFrame, (props, ref) => {
|
|
17
23
|
const preventAnimation = React.useContext(PreventTooltipAnimationContext);
|
|
24
|
+
const isInstant = React.useContext(TooltipInstantContext);
|
|
18
25
|
const zIndexFromContext = React.useContext(TooltipZIndexContext);
|
|
19
26
|
return /* @__PURE__ */ jsx(PopoverContent, {
|
|
20
27
|
scope: props.scope || TOOLTIP_SCOPE,
|
|
@@ -22,11 +29,15 @@ const TooltipContent = createStyledHOC(TooltipContentFrame, (props, ref) => {
|
|
|
22
29
|
backgroundColor: "background",
|
|
23
30
|
alignItems: "center",
|
|
24
31
|
pointerEvents: "none",
|
|
25
|
-
paddingHorizontal: "2",
|
|
32
|
+
paddingHorizontal: "2.5",
|
|
26
33
|
paddingVertical: "1",
|
|
34
|
+
borderRadius: "2",
|
|
27
35
|
...zIndexFromContext !== void 0 && { zIndex: zIndexFromContext },
|
|
28
36
|
...props,
|
|
29
|
-
...preventAnimation && {
|
|
37
|
+
...(preventAnimation || isInstant) && {
|
|
38
|
+
transition: null,
|
|
39
|
+
"data-instant": ""
|
|
40
|
+
},
|
|
30
41
|
ref
|
|
31
42
|
});
|
|
32
43
|
}, { displayName: "Tooltip" });
|
|
@@ -61,7 +72,7 @@ const TooltipComponent = createRefComponent(function Tooltip(props, ref) {
|
|
|
61
72
|
const triggerRef = React.useRef(null);
|
|
62
73
|
const closeReasonRef = React.useRef(void 0);
|
|
63
74
|
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
|
|
64
|
-
const { delay: delayGroup, setCurrentId } = useDelayGroupContext();
|
|
75
|
+
const { delay: delayGroup, setCurrentId, currentId } = useDelayGroupContext();
|
|
65
76
|
const delay = delayProp !== void 0 ? delayProp : delayGroup ?? 400;
|
|
66
77
|
const restMs = restMsProp ?? (typeof delay === "number" ? delay : 0);
|
|
67
78
|
const [open, setOpen] = useControllableState({
|
|
@@ -69,12 +80,26 @@ const TooltipComponent = createRefComponent(function Tooltip(props, ref) {
|
|
|
69
80
|
defaultProp: false,
|
|
70
81
|
onChange: onOpenChangeProp
|
|
71
82
|
});
|
|
72
|
-
const
|
|
73
|
-
const
|
|
74
|
-
|
|
83
|
+
const autoId = React.useId();
|
|
84
|
+
const id = props.groupId ?? autoId;
|
|
85
|
+
const [isInstant, setIsInstant] = React.useState(false);
|
|
86
|
+
React.useEffect(() => {
|
|
87
|
+
if (!open) {
|
|
88
|
+
setIsInstant(false);
|
|
89
|
+
}
|
|
90
|
+
}, [open]);
|
|
91
|
+
const onOpenChange = useEvent((openVal) => {
|
|
92
|
+
if (openVal) {
|
|
93
|
+
if (currentId != null && currentId !== id) {
|
|
94
|
+
setIsInstant(true);
|
|
95
|
+
} else {
|
|
96
|
+
setIsInstant(false);
|
|
97
|
+
}
|
|
75
98
|
setCurrentId(id);
|
|
99
|
+
} else {
|
|
100
|
+
setIsInstant(false);
|
|
76
101
|
}
|
|
77
|
-
setOpen(
|
|
102
|
+
setOpen(openVal);
|
|
78
103
|
});
|
|
79
104
|
React.useEffect(() => {
|
|
80
105
|
if (!open) return;
|
|
@@ -129,13 +154,17 @@ const TooltipComponent = createRefComponent(function Tooltip(props, ref) {
|
|
|
129
154
|
})
|
|
130
155
|
})
|
|
131
156
|
});
|
|
157
|
+
const wrappedContent = /* @__PURE__ */ jsx(TooltipInstantContext.Provider, {
|
|
158
|
+
value: isInstant,
|
|
159
|
+
children: content
|
|
160
|
+
});
|
|
132
161
|
if (zIndex !== void 0) {
|
|
133
162
|
return /* @__PURE__ */ jsx(TooltipZIndexContext.Provider, {
|
|
134
163
|
value: zIndex,
|
|
135
|
-
children:
|
|
164
|
+
children: wrappedContent
|
|
136
165
|
});
|
|
137
166
|
}
|
|
138
|
-
return
|
|
167
|
+
return wrappedContent;
|
|
139
168
|
});
|
|
140
169
|
const TooltipTrigger = createRefComponent(function TooltipTrigger2(props, ref) {
|
|
141
170
|
const { scope, ...rest } = props;
|
package/dist/jsx/Tooltip.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":[],"sources":["jsx/Tooltip.js"],"sourcesContent":["import { createStyledHOC, createRefComponent, styled } from \"@tamagui/core\";\n\nimport { FloatingDelayGroup, useDelayGroupContext } from \"@tamagui/floating\";\nimport { useEvent } from \"@tamagui/core\";\nimport { FloatingOverrideContext } from \"@tamagui/floating\";\nimport { withStaticProperties } from \"@tamagui/helpers\";\nimport {\n PopoverAnchor,\n PopoverArrow,\n PopoverContent,\n PopoverContextProvider,\n PopoverTrigger,\n useFloatingContext\n} from \"@tamagui/popover\";\nimport { Popper, PopperContentFrame } from \"@tamagui/popper\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst TOOLTIP_SCOPE = \"\";\nconst TooltipContentFrame = styled(PopperContentFrame, {});\nconst ALWAYS_DISABLE_TOOLTIP = {\n focus: true,\n \"remove-scroll\": true\n // it's nice to hit escape to hide a tooltip\n // dismiss: true\n};\nconst TooltipContent = createStyledHOC(\n TooltipContentFrame,\n (props, ref) => {\n const preventAnimation = React.useContext(PreventTooltipAnimationContext);\n const zIndexFromContext = React.useContext(TooltipZIndexContext);\n return /* @__PURE__ */ jsx(\n PopoverContent,\n {\n scope: props.scope || TOOLTIP_SCOPE,\n alwaysDisable: ALWAYS_DISABLE_TOOLTIP,\n backgroundColor: \"background\",\n alignItems: \"center\",\n pointerEvents: \"none\",\n paddingHorizontal: \"2\",\n paddingVertical: \"1\",\n ...zIndexFromContext !== void 0 && { zIndex: zIndexFromContext },\n ...props,\n ...preventAnimation && { transition: null },\n ref\n }\n );\n },\n {\n displayName: \"Tooltip\"\n }\n);\nconst TooltipArrow = createRefComponent(\n (props, ref) => {\n const { className, ...rest } = props;\n return /* @__PURE__ */ jsx(\n PopoverArrow,\n {\n scope: props.scope || TOOLTIP_SCOPE,\n className: `is_Tooltip ${className || \"\"}`.trim(),\n ref,\n ...rest\n }\n );\n }\n);\nconst PreventTooltipAnimationContext = React.createContext(false);\nconst TooltipZIndexContext = React.createContext(void 0);\nconst TooltipGroup = ({\n children,\n delay,\n preventAnimation = false,\n timeoutMs\n}) => {\n return /* @__PURE__ */ jsx(PreventTooltipAnimationContext.Provider, { value: preventAnimation, children: /* @__PURE__ */ jsx(\n FloatingDelayGroup,\n {\n timeoutMs,\n delay: React.useMemo(() => delay, [JSON.stringify(delay)]),\n children\n }\n ) });\n};\nconst setOpens = /* @__PURE__ */ new Set();\nconst closeOpenTooltips = () => {\n setOpens.forEach((x) => x(false));\n};\nconst TooltipComponent = createRefComponent(function Tooltip(props, ref) {\n \"use no memo\";\n const {\n children,\n delay: delayProp,\n restMs: restMsProp,\n onOpenChange: onOpenChangeProp,\n focus,\n open: openProp,\n disableAutoCloseOnScroll,\n zIndex,\n scope = TOOLTIP_SCOPE,\n ...restProps\n } = props;\n const triggerRef = React.useRef(null);\n const closeReasonRef = React.useRef(void 0);\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);\n const { delay: delayGroup, setCurrentId } = useDelayGroupContext();\n const delay = delayProp !== void 0 ? delayProp : delayGroup ?? 400;\n const restMs = restMsProp ?? (typeof delay === \"number\" ? delay : 0);\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: false,\n onChange: onOpenChangeProp\n });\n const id = props.groupId;\n const onOpenChange = useEvent((open2) => {\n if (open2) {\n setCurrentId(id);\n }\n setOpen(open2);\n });\n React.useEffect(() => {\n if (!open) return;\n if (disableAutoCloseOnScroll) return;\n if (typeof document === \"undefined\") return;\n const closeIt = () => {\n setOpen(false);\n };\n setOpens.add(setOpen);\n document.documentElement.addEventListener(\"scroll\", closeIt);\n return () => {\n setOpens.delete(setOpen);\n document.documentElement.removeEventListener(\"scroll\", closeIt);\n };\n }, [open, disableAutoCloseOnScroll]);\n const floatingContext = useFloatingContext({\n open,\n setOpen: onOpenChange,\n closeReasonRef,\n disable: false,\n disableFocus: false,\n hoverable: true,\n role: \"tooltip\",\n focus,\n groupId: id,\n delay,\n restMs\n });\n const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), []);\n const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), []);\n const contentId = React.useId();\n const content = /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, { value: floatingContext, children: /* @__PURE__ */ jsx(Popper, { scope, allowFlip: true, stayInFrame: true, open, ...restProps, children: /* @__PURE__ */ jsx(\n PopoverContextProvider,\n {\n scope,\n contentId,\n triggerRef,\n open,\n onOpenChange: setOpen,\n closeReasonRef,\n onOpenToggle: voidFn,\n hasCustomAnchor,\n onCustomAnchorAdd,\n onCustomAnchorRemove,\n children\n }\n ) }) });\n if (zIndex !== void 0) {\n return /* @__PURE__ */ jsx(TooltipZIndexContext.Provider, { value: zIndex, children: content });\n }\n return content;\n});\nconst TooltipTrigger = createRefComponent(function TooltipTrigger2(props, ref) {\n const { scope, ...rest } = props;\n return /* @__PURE__ */ jsx(PopoverTrigger, { ...rest, scope: scope || TOOLTIP_SCOPE, ref });\n});\nconst TooltipAnchor = createRefComponent(function TooltipAnchor2(props, ref) {\n const { scope, ...rest } = props;\n return /* @__PURE__ */ jsx(PopoverAnchor, { ...rest, scope: scope || TOOLTIP_SCOPE, ref });\n});\nconst Tooltip2 = withStaticProperties(TooltipComponent, {\n Anchor: TooltipAnchor,\n Arrow: TooltipArrow,\n Content: TooltipContent,\n Trigger: TooltipTrigger\n});\nconst voidFn = () => {\n};\nexport {\n Tooltip2 as Tooltip,\n TooltipGroup,\n closeOpenTooltips\n};\n//# sourceMappingURL=Tooltip.js.map\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":[],"sources":["jsx/Tooltip.js"],"sourcesContent":["import { createStyledHOC, createRefComponent, styled } from \"@tamagui/core\";\n\nimport { FloatingDelayGroup, useDelayGroupContext } from \"@tamagui/floating\";\nimport { useEvent } from \"@tamagui/core\";\nimport { FloatingOverrideContext } from \"@tamagui/floating\";\nimport { withStaticProperties } from \"@tamagui/helpers\";\nimport {\n PopoverAnchor,\n PopoverArrow,\n PopoverContent,\n PopoverContextProvider,\n PopoverTrigger,\n useFloatingContext\n} from \"@tamagui/popover\";\nimport { Popper, PopperContentFrame } from \"@tamagui/popper\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst TOOLTIP_SCOPE = \"\";\nconst TooltipContentFrame = styled(PopperContentFrame, {\n name: \"TooltipContent\",\n paddingHorizontal: \"2.5\",\n paddingVertical: \"1\",\n borderRadius: \"2\"\n});\nconst TooltipInstantContext = React.createContext(false);\nconst ALWAYS_DISABLE_TOOLTIP = {\n focus: true,\n \"remove-scroll\": true\n // it's nice to hit escape to hide a tooltip\n // dismiss: true\n};\nconst TooltipContent = createStyledHOC(\n TooltipContentFrame,\n (props, ref) => {\n const preventAnimation = React.useContext(PreventTooltipAnimationContext);\n const isInstant = React.useContext(TooltipInstantContext);\n const zIndexFromContext = React.useContext(TooltipZIndexContext);\n return /* @__PURE__ */ jsx(\n PopoverContent,\n {\n scope: props.scope || TOOLTIP_SCOPE,\n alwaysDisable: ALWAYS_DISABLE_TOOLTIP,\n backgroundColor: \"background\",\n alignItems: \"center\",\n pointerEvents: \"none\",\n paddingHorizontal: \"2.5\",\n paddingVertical: \"1\",\n borderRadius: \"2\",\n ...zIndexFromContext !== void 0 && { zIndex: zIndexFromContext },\n ...props,\n ...(preventAnimation || isInstant) && {\n transition: null,\n \"data-instant\": \"\"\n },\n ref\n }\n );\n },\n {\n displayName: \"Tooltip\"\n }\n);\nconst TooltipArrow = createRefComponent(\n (props, ref) => {\n const { className, ...rest } = props;\n return /* @__PURE__ */ jsx(\n PopoverArrow,\n {\n scope: props.scope || TOOLTIP_SCOPE,\n className: `is_Tooltip ${className || \"\"}`.trim(),\n ref,\n ...rest\n }\n );\n }\n);\nconst PreventTooltipAnimationContext = React.createContext(false);\nconst TooltipZIndexContext = React.createContext(void 0);\nconst TooltipGroup = ({\n children,\n delay,\n preventAnimation = false,\n timeoutMs\n}) => {\n return /* @__PURE__ */ jsx(PreventTooltipAnimationContext.Provider, { value: preventAnimation, children: /* @__PURE__ */ jsx(\n FloatingDelayGroup,\n {\n timeoutMs,\n delay: React.useMemo(() => delay, [JSON.stringify(delay)]),\n children\n }\n ) });\n};\nconst setOpens = /* @__PURE__ */ new Set();\nconst closeOpenTooltips = () => {\n setOpens.forEach((x) => x(false));\n};\nconst TooltipComponent = createRefComponent(function Tooltip(props, ref) {\n \"use no memo\";\n const {\n children,\n delay: delayProp,\n restMs: restMsProp,\n onOpenChange: onOpenChangeProp,\n focus,\n open: openProp,\n disableAutoCloseOnScroll,\n zIndex,\n scope = TOOLTIP_SCOPE,\n ...restProps\n } = props;\n const triggerRef = React.useRef(null);\n const closeReasonRef = React.useRef(void 0);\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);\n const { delay: delayGroup, setCurrentId, currentId } = useDelayGroupContext();\n const delay = delayProp !== void 0 ? delayProp : delayGroup ?? 400;\n const restMs = restMsProp ?? (typeof delay === \"number\" ? delay : 0);\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: false,\n onChange: onOpenChangeProp\n });\n const autoId = React.useId();\n const id = props.groupId ?? autoId;\n const [isInstant, setIsInstant] = React.useState(false);\n React.useEffect(() => {\n if (!open) {\n setIsInstant(false);\n }\n }, [open]);\n const onOpenChange = useEvent((openVal) => {\n if (openVal) {\n if (currentId != null && currentId !== id) {\n setIsInstant(true);\n } else {\n setIsInstant(false);\n }\n setCurrentId(id);\n } else {\n setIsInstant(false);\n }\n setOpen(openVal);\n });\n React.useEffect(() => {\n if (!open) return;\n if (disableAutoCloseOnScroll) return;\n if (typeof document === \"undefined\") return;\n const closeIt = () => {\n setOpen(false);\n };\n setOpens.add(setOpen);\n document.documentElement.addEventListener(\"scroll\", closeIt);\n return () => {\n setOpens.delete(setOpen);\n document.documentElement.removeEventListener(\"scroll\", closeIt);\n };\n }, [open, disableAutoCloseOnScroll]);\n const floatingContext = useFloatingContext({\n open,\n setOpen: onOpenChange,\n closeReasonRef,\n disable: false,\n disableFocus: false,\n hoverable: true,\n role: \"tooltip\",\n focus,\n groupId: id,\n delay,\n restMs\n });\n const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), []);\n const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), []);\n const contentId = React.useId();\n const content = /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, { value: floatingContext, children: /* @__PURE__ */ jsx(Popper, { scope, allowFlip: true, stayInFrame: true, open, ...restProps, children: /* @__PURE__ */ jsx(\n PopoverContextProvider,\n {\n scope,\n contentId,\n triggerRef,\n open,\n onOpenChange: setOpen,\n closeReasonRef,\n onOpenToggle: voidFn,\n hasCustomAnchor,\n onCustomAnchorAdd,\n onCustomAnchorRemove,\n children\n }\n ) }) });\n const wrappedContent = /* @__PURE__ */ jsx(TooltipInstantContext.Provider, { value: isInstant, children: content });\n if (zIndex !== void 0) {\n return /* @__PURE__ */ jsx(TooltipZIndexContext.Provider, { value: zIndex, children: wrappedContent });\n }\n return wrappedContent;\n});\nconst TooltipTrigger = createRefComponent(function TooltipTrigger2(props, ref) {\n const { scope, ...rest } = props;\n return /* @__PURE__ */ jsx(PopoverTrigger, { ...rest, scope: scope || TOOLTIP_SCOPE, ref });\n});\nconst TooltipAnchor = createRefComponent(function TooltipAnchor2(props, ref) {\n const { scope, ...rest } = props;\n return /* @__PURE__ */ jsx(PopoverAnchor, { ...rest, scope: scope || TOOLTIP_SCOPE, ref });\n});\nconst Tooltip2 = withStaticProperties(TooltipComponent, {\n Anchor: TooltipAnchor,\n Arrow: TooltipArrow,\n Content: TooltipContent,\n Trigger: TooltipTrigger\n});\nconst voidFn = () => {\n};\nexport {\n Tooltip2 as Tooltip,\n TooltipGroup,\n closeOpenTooltips\n};\n//# sourceMappingURL=Tooltip.js.map\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/tooltip",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.1537.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "src/index.tsx",
|
|
6
6
|
"files": [
|
|
@@ -35,20 +35,20 @@
|
|
|
35
35
|
"clean:build": "tamagui-build clean:build"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@tamagui/compose-refs": "3.0.0-beta.
|
|
39
|
-
"@tamagui/core": "3.0.0-beta.
|
|
40
|
-
"@tamagui/create-context": "3.0.0-beta.
|
|
41
|
-
"@tamagui/floating": "3.0.0-beta.
|
|
42
|
-
"@tamagui/helpers": "3.0.0-beta.
|
|
43
|
-
"@tamagui/polyfill-dev": "3.0.0-beta.
|
|
44
|
-
"@tamagui/popover": "3.0.0-beta.
|
|
45
|
-
"@tamagui/popper": "3.0.0-beta.
|
|
46
|
-
"@tamagui/stacks": "3.0.0-beta.
|
|
47
|
-
"@tamagui/text": "3.0.0-beta.
|
|
48
|
-
"@tamagui/use-controllable-state": "3.0.0-beta.
|
|
38
|
+
"@tamagui/compose-refs": "3.0.0-beta.1537.1",
|
|
39
|
+
"@tamagui/core": "3.0.0-beta.1537.1",
|
|
40
|
+
"@tamagui/create-context": "3.0.0-beta.1537.1",
|
|
41
|
+
"@tamagui/floating": "3.0.0-beta.1537.1",
|
|
42
|
+
"@tamagui/helpers": "3.0.0-beta.1537.1",
|
|
43
|
+
"@tamagui/polyfill-dev": "3.0.0-beta.1537.1",
|
|
44
|
+
"@tamagui/popover": "3.0.0-beta.1537.1",
|
|
45
|
+
"@tamagui/popper": "3.0.0-beta.1537.1",
|
|
46
|
+
"@tamagui/stacks": "3.0.0-beta.1537.1",
|
|
47
|
+
"@tamagui/text": "3.0.0-beta.1537.1",
|
|
48
|
+
"@tamagui/use-controllable-state": "3.0.0-beta.1537.1"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@tamagui/build": "3.0.0-beta.
|
|
51
|
+
"@tamagui/build": "3.0.0-beta.1537.1",
|
|
52
52
|
"react": "19.2.3",
|
|
53
53
|
"react-native": "0.86.2"
|
|
54
54
|
},
|
package/src/Tooltip.tsx
CHANGED
|
@@ -33,7 +33,14 @@ type ScopedProps<P> = Omit<P, 'scope'> & { scope?: TooltipScopes }
|
|
|
33
33
|
|
|
34
34
|
export type TooltipContentProps = ScopedProps<PopoverContentProps>
|
|
35
35
|
|
|
36
|
-
const TooltipContentFrame = styled(PopperContentFrame, {
|
|
36
|
+
const TooltipContentFrame = styled(PopperContentFrame, {
|
|
37
|
+
name: 'TooltipContent',
|
|
38
|
+
paddingHorizontal: '2.5',
|
|
39
|
+
paddingVertical: '1',
|
|
40
|
+
borderRadius: '2',
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
const TooltipInstantContext = React.createContext(false)
|
|
37
44
|
|
|
38
45
|
// warning: setting to createStyledHOC causes issues with themes across portal roots
|
|
39
46
|
|
|
@@ -49,6 +56,7 @@ const TooltipContent = createStyledHOC(
|
|
|
49
56
|
TooltipContentFrame,
|
|
50
57
|
(props: TooltipContentProps, ref) => {
|
|
51
58
|
const preventAnimation = React.useContext(PreventTooltipAnimationContext)
|
|
59
|
+
const isInstant = React.useContext(TooltipInstantContext)
|
|
52
60
|
const zIndexFromContext = React.useContext(TooltipZIndexContext)
|
|
53
61
|
|
|
54
62
|
return (
|
|
@@ -58,11 +66,15 @@ const TooltipContent = createStyledHOC(
|
|
|
58
66
|
backgroundColor="background"
|
|
59
67
|
alignItems="center"
|
|
60
68
|
pointerEvents="none"
|
|
61
|
-
paddingHorizontal="2"
|
|
69
|
+
paddingHorizontal="2.5"
|
|
62
70
|
paddingVertical="1"
|
|
71
|
+
borderRadius="2"
|
|
63
72
|
{...(zIndexFromContext !== undefined && { zIndex: zIndexFromContext })}
|
|
64
73
|
{...props}
|
|
65
|
-
{...(preventAnimation && {
|
|
74
|
+
{...((preventAnimation || isInstant) && {
|
|
75
|
+
transition: null,
|
|
76
|
+
'data-instant': '',
|
|
77
|
+
})}
|
|
66
78
|
ref={ref}
|
|
67
79
|
/>
|
|
68
80
|
)
|
|
@@ -167,7 +179,7 @@ const TooltipComponent = createRefComponent(function Tooltip(
|
|
|
167
179
|
const triggerRef = React.useRef<HTMLButtonElement>(null)
|
|
168
180
|
const closeReasonRef = React.useRef<OpenChangeReason | undefined>(undefined)
|
|
169
181
|
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)
|
|
170
|
-
const { delay: delayGroup, setCurrentId } = useDelayGroupContext()
|
|
182
|
+
const { delay: delayGroup, setCurrentId, currentId } = useDelayGroupContext()
|
|
171
183
|
// Use delayProp if explicitly provided, otherwise fall back to group delay or default 400
|
|
172
184
|
const delay = delayProp !== undefined ? delayProp : (delayGroup ?? 400)
|
|
173
185
|
const restMs = restMsProp ?? (typeof delay === 'number' ? delay : 0)
|
|
@@ -176,13 +188,29 @@ const TooltipComponent = createRefComponent(function Tooltip(
|
|
|
176
188
|
defaultProp: false,
|
|
177
189
|
onChange: onOpenChangeProp,
|
|
178
190
|
})
|
|
179
|
-
const
|
|
191
|
+
const autoId = React.useId()
|
|
192
|
+
const id = props.groupId ?? autoId
|
|
193
|
+
|
|
194
|
+
const [isInstant, setIsInstant] = React.useState(false)
|
|
195
|
+
|
|
196
|
+
React.useEffect(() => {
|
|
197
|
+
if (!open) {
|
|
198
|
+
setIsInstant(false)
|
|
199
|
+
}
|
|
200
|
+
}, [open])
|
|
180
201
|
|
|
181
|
-
const onOpenChange = useEvent((
|
|
182
|
-
if (
|
|
202
|
+
const onOpenChange = useEvent((openVal: boolean) => {
|
|
203
|
+
if (openVal) {
|
|
204
|
+
if (currentId != null && currentId !== id) {
|
|
205
|
+
setIsInstant(true)
|
|
206
|
+
} else {
|
|
207
|
+
setIsInstant(false)
|
|
208
|
+
}
|
|
183
209
|
setCurrentId(id)
|
|
210
|
+
} else {
|
|
211
|
+
setIsInstant(false)
|
|
184
212
|
}
|
|
185
|
-
setOpen(
|
|
213
|
+
setOpen(openVal)
|
|
186
214
|
})
|
|
187
215
|
|
|
188
216
|
// Auto close when document scroll
|
|
@@ -243,15 +271,21 @@ const TooltipComponent = createRefComponent(function Tooltip(
|
|
|
243
271
|
</FloatingOverrideContext.Provider>
|
|
244
272
|
)
|
|
245
273
|
|
|
274
|
+
const wrappedContent = (
|
|
275
|
+
<TooltipInstantContext.Provider value={isInstant}>
|
|
276
|
+
{content}
|
|
277
|
+
</TooltipInstantContext.Provider>
|
|
278
|
+
)
|
|
279
|
+
|
|
246
280
|
if (zIndex !== undefined) {
|
|
247
281
|
return (
|
|
248
282
|
<TooltipZIndexContext.Provider value={zIndex}>
|
|
249
|
-
{
|
|
283
|
+
{wrappedContent}
|
|
250
284
|
</TooltipZIndexContext.Provider>
|
|
251
285
|
)
|
|
252
286
|
}
|
|
253
287
|
|
|
254
|
-
return
|
|
288
|
+
return wrappedContent
|
|
255
289
|
})
|
|
256
290
|
|
|
257
291
|
const TooltipTrigger = createRefComponent(function TooltipTrigger(
|
package/types/Tooltip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAA4C,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInD,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,kBAAkB,CAAA;AASzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,aAAa,GAAG,MAAM,CAAA;AAElC,KAAK,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAAA;AAElE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAA4C,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInD,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,kBAAkB,CAAA;AASzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,aAAa,GAAG,MAAM,CAAA;AAElC,KAAK,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAAA;AAElE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAA;AAmElE,MAAM,MAAM,YAAY,GAAG,WAAW,CACpC,WAAW,GAAG;IACZ,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE,OAAO,CAAA;QACjB,WAAW,CAAC,EAAE,OAAO,CAAA;KACtB,CAAA;IACD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EACF,MAAM,GACN;QACE,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CACF,CAAA;AAKD,eAAO,MAAM,YAAY,sDAKtB;IACD,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,KAAK,EAAE,KAAK,CAAA;IACZ,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,sBAWA,CAAA;AAID,eAAO,MAAM,iBAAiB,YAE7B,CAAA;AAsJD,eAAO,MAAM,OAAO;WA5MT,OAAO;eACH,KAAK,CAAC,SAAS;mBACX,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;YAC9B;QACN,OAAO,CAAC,EAAE,OAAO,CAAA;QACjB,WAAW,CAAC,EAAE,OAAO,CAAA;KACtB;cACS,MAAM;aACP,MAAM;YAEX,MAAM,GACN;QACE,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;KACf;+BACsB,OAAO;IAClC;;;OAGG;aACM,MAAM;;YA3FgC,aAAa;;;;;;;;gBAAb,aAAa;;;;;CAwR9D,CAAA"}
|