@telegraph/tooltip 0.0.5 → 0.0.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/CHANGELOG.md +19 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +40 -43
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Tooltip/Tooltip.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @telegraph/tooltip
|
|
2
2
|
|
|
3
|
+
## 0.0.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#145](https://github.com/knocklabs/telegraph/pull/145) [`2598aea`](https://github.com/knocklabs/telegraph/commit/2598aea515597299b20c4c869e9d397137b32e8f) Thanks [@kylemcd](https://github.com/kylemcd)! - remove arrow from the tooltip
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`7763f43`](https://github.com/knocklabs/telegraph/commit/7763f43a9db615f3dfa958a09dd1cbd6c8c4a906)]:
|
|
10
|
+
- @telegraph/layout@0.0.16
|
|
11
|
+
- @telegraph/typography@0.0.15
|
|
12
|
+
|
|
13
|
+
## 0.0.6
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies []:
|
|
18
|
+
- @telegraph/layout@0.0.15
|
|
19
|
+
- @telegraph/typography@0.0.14
|
|
20
|
+
- @telegraph/appearance@0.0.1
|
|
21
|
+
|
|
3
22
|
## 0.0.5
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=require("@radix-ui/react-tooltip"),v=require("@telegraph/appearance"),M=require("@telegraph/helpers"),_=require("@telegraph/layout"),q=require("@telegraph/typography"),R=require("framer-motion");function E(t){const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=require("@radix-ui/react-tooltip"),v=require("@telegraph/appearance"),M=require("@telegraph/helpers"),_=require("@telegraph/layout"),q=require("@telegraph/typography"),R=require("framer-motion");function E(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const i=E(F),z=({delayDuration:t=0,skipDelayDuration:n,disableHoverableContent:r,defaultOpen:o,open:u,onOpenChange:p,"aria-label":d,onEscapeKeyDown:f,onPointerDownOutside:g,forceMount:x,side:s="bottom",sideOffset:y=4,align:T="center",alignOffset:O,avoidCollisions:j,collisionBoundary:h,collisionPadding:m,arrowPadding:I,sticky:A,hideWhenDetached:N,label:c,labelProps:l,children:b})=>{const S=a=>{if(a==="top")return{y:-5};if(a==="bottom")return{y:5};if(a==="left")return{x:-5};if(a==="right")return{x:5}};return e.jsx(i.Provider,{delayDuration:t,skipDelayDuration:n,disableHoverableContent:r,children:e.jsxs(i.Root,{defaultOpen:o,open:u,onOpenChange:p,children:[e.jsx(i.Trigger,{asChild:!0,children:e.jsx(M.RefToTgphRef,{children:b})}),e.jsx(i.Portal,{children:e.jsx(i.Content,{"aria-label":d,onEscapeKeyDown:f,onPointerDownOutside:g,forceMount:x,side:s,sideOffset:y,align:T,alignOffset:O,avoidCollisions:j,collisionBoundary:h,collisionPadding:m,arrowPadding:I,sticky:A,hideWhenDetached:N,style:{zIndex:"var(--tgph-zIndex-tooltip)"},children:e.jsx(v.InvertedAppearance,{children:e.jsx(_.Stack,{as:R.motion.div,className:"tgph",initial:{opacity:.5,scale:.6,...S(s)},animate:{opacity:1,scale:1,x:0,y:0},transition:{duration:.2,type:"spring",bounce:0},bg:"gray-1",rounded:"3",py:"2",px:"3",align:"center",justify:"center",style:{transformOrigin:"var(--radix-tooltip-content-transform-origin)"},...l?{labelProps:l}:{},children:typeof c=="string"?e.jsx(q.Text,{as:"span",size:"1",children:c}):c})})})})]})})};exports.Tooltip=z;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { InvertedAppearance } from \"@telegraph/appearance\";\nimport {\n RefToTgphRef,\n type TgphComponentProps,\n type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n label: string | React.ReactNode;\n labelProps?: TgphComponentProps<typeof Stack<T>>;\n};\n\ntype TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<\n typeof RadixTooltip.Root\n> &\n React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> &\n React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> &\n TooltipBaseProps<T>;\n\nconst Tooltip = <T extends TgphElement>({\n // Radix Tooltip Provider Props\n delayDuration = 0,\n skipDelayDuration,\n disableHoverableContent,\n // Radix Tooltip Root Props\n defaultOpen,\n open,\n onOpenChange,\n // Radix Tooltip Content Props\n \"aria-label\": ariaLabel,\n onEscapeKeyDown,\n onPointerDownOutside,\n forceMount,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n arrowPadding,\n sticky,\n hideWhenDetached,\n // Label Props\n label,\n labelProps,\n children,\n}: TooltipProps<T>) => {\n const deriveAnimationBasedOnSide = (side: TooltipProps<T>[\"side\"]) => {\n const ANIMATION_OFFSET = 5;\n if (side === \"top\") {\n return {\n y: -ANIMATION_OFFSET,\n };\n }\n\n if (side === \"bottom\") {\n return {\n y: ANIMATION_OFFSET,\n };\n }\n\n if (side === \"left\") {\n return {\n x: -ANIMATION_OFFSET,\n };\n }\n\n if (side === \"right\") {\n return {\n x: ANIMATION_OFFSET,\n };\n }\n };\n return (\n <RadixTooltip.Provider\n delayDuration={delayDuration}\n skipDelayDuration={skipDelayDuration}\n disableHoverableContent={disableHoverableContent}\n >\n <RadixTooltip.Root\n defaultOpen={defaultOpen}\n open={open}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger asChild={true}>\n <RefToTgphRef>{children}</RefToTgphRef>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <RadixTooltip.Content\n aria-label={ariaLabel}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n forceMount={forceMount}\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionBoundary={collisionBoundary}\n collisionPadding={collisionPadding}\n arrowPadding={arrowPadding}\n sticky={sticky}\n hideWhenDetached={hideWhenDetached}\n style={{\n zIndex: `var(--tgph-zIndex-tooltip)`,\n }}\n >\n <InvertedAppearance>\n <Stack\n as={motion.div}\n // Add tgph class so that this always works in portals\n className=\"tgph\"\n initial={{\n opacity: 0.5,\n scale: 0.6,\n ...deriveAnimationBasedOnSide(side),\n }}\n animate={{\n opacity: 1,\n scale: 1,\n x: 0,\n y: 0,\n }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n bg=\"gray-1\"\n rounded=\"3\"\n py=\"2\"\n px=\"3\"\n align=\"center\"\n justify=\"center\"\n style={{\n transformOrigin:\n \"var(--radix-tooltip-content-transform-origin)\",\n }}\n {...(labelProps ? { labelProps } : {})}\n >\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { InvertedAppearance } from \"@telegraph/appearance\";\nimport {\n RefToTgphRef,\n type TgphComponentProps,\n type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n label: string | React.ReactNode;\n labelProps?: TgphComponentProps<typeof Stack<T>>;\n};\n\ntype TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<\n typeof RadixTooltip.Root\n> &\n React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> &\n React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> &\n TooltipBaseProps<T>;\n\nconst Tooltip = <T extends TgphElement>({\n // Radix Tooltip Provider Props\n delayDuration = 0,\n skipDelayDuration,\n disableHoverableContent,\n // Radix Tooltip Root Props\n defaultOpen,\n open,\n onOpenChange,\n // Radix Tooltip Content Props\n \"aria-label\": ariaLabel,\n onEscapeKeyDown,\n onPointerDownOutside,\n forceMount,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n arrowPadding,\n sticky,\n hideWhenDetached,\n // Label Props\n label,\n labelProps,\n children,\n}: TooltipProps<T>) => {\n const deriveAnimationBasedOnSide = (side: TooltipProps<T>[\"side\"]) => {\n const ANIMATION_OFFSET = 5;\n if (side === \"top\") {\n return {\n y: -ANIMATION_OFFSET,\n };\n }\n\n if (side === \"bottom\") {\n return {\n y: ANIMATION_OFFSET,\n };\n }\n\n if (side === \"left\") {\n return {\n x: -ANIMATION_OFFSET,\n };\n }\n\n if (side === \"right\") {\n return {\n x: ANIMATION_OFFSET,\n };\n }\n };\n return (\n <RadixTooltip.Provider\n delayDuration={delayDuration}\n skipDelayDuration={skipDelayDuration}\n disableHoverableContent={disableHoverableContent}\n >\n <RadixTooltip.Root\n defaultOpen={defaultOpen}\n open={open}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger asChild={true}>\n <RefToTgphRef>{children}</RefToTgphRef>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <RadixTooltip.Content\n aria-label={ariaLabel}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n forceMount={forceMount}\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionBoundary={collisionBoundary}\n collisionPadding={collisionPadding}\n arrowPadding={arrowPadding}\n sticky={sticky}\n hideWhenDetached={hideWhenDetached}\n style={{\n zIndex: `var(--tgph-zIndex-tooltip)`,\n }}\n >\n <InvertedAppearance>\n <Stack\n as={motion.div}\n // Add tgph class so that this always works in portals\n className=\"tgph\"\n initial={{\n opacity: 0.5,\n scale: 0.6,\n ...deriveAnimationBasedOnSide(side),\n }}\n animate={{\n opacity: 1,\n scale: 1,\n x: 0,\n y: 0,\n }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n bg=\"gray-1\"\n rounded=\"3\"\n py=\"2\"\n px=\"3\"\n align=\"center\"\n justify=\"center\"\n style={{\n transformOrigin:\n \"var(--radix-tooltip-content-transform-origin)\",\n }}\n {...(labelProps ? { labelProps } : {})}\n >\n {typeof label === \"string\" ? (\n <Text as=\"span\" size=\"1\">\n {label}\n </Text>\n ) : (\n label\n )}\n </Stack>\n </InvertedAppearance>\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n};\n\nexport { Tooltip };\n"],"names":["Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpen","open","onOpenChange","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","children","deriveAnimationBasedOnSide","jsx","RadixTooltip","jsxs","RefToTgphRef","InvertedAppearance","Stack","motion","Text"],"mappings":"olBAwBMA,EAAU,CAAwB,CAEtC,cAAAC,EAAgB,EAChB,kBAAAC,EACA,wBAAAC,EAEA,YAAAC,EACA,KAAAC,EACA,aAAAC,EAEA,aAAcC,EACd,gBAAAC,EACA,qBAAAC,EACA,WAAAC,EACA,KAAAC,EAAO,SACP,WAAAC,EAAa,EACb,MAAAC,EAAQ,SACR,YAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EAEA,MAAAC,EACA,WAAAC,EACA,SAAAC,CACF,IAAuB,CACf,MAAAC,EAA8Bb,GAAkC,CAEpE,GAAIA,IAAS,MACJ,MAAA,CACL,EAAG,EAAC,EAIR,GAAIA,IAAS,SACJ,MAAA,CACL,EAAG,CAAA,EAIP,GAAIA,IAAS,OACJ,MAAA,CACL,EAAG,EAAC,EAIR,GAAIA,IAAS,QACJ,MAAA,CACL,EAAG,CAAA,CAEP,EAGA,OAAAc,EAAA,IAACC,EAAa,SAAb,CACC,cAAAzB,EACA,kBAAAC,EACA,wBAAAC,EAEA,SAAAwB,EAAA,KAACD,EAAa,KAAb,CACC,YAAAtB,EACA,KAAAC,EACA,aAAAC,EAEA,SAAA,CAACmB,EAAAA,IAAAC,EAAa,QAAb,CAAqB,QAAS,GAC7B,SAACD,EAAAA,IAAAG,EAAA,aAAA,CAAc,SAAAL,EAAS,CAC1B,CAAA,EACAE,EAAAA,IAACC,EAAa,OAAb,CACC,SAAAD,EAAA,IAACC,EAAa,QAAb,CACC,aAAYnB,EACZ,gBAAAC,EACA,qBAAAC,EACA,WAAAC,EACA,KAAAC,EACA,WAAAC,EACA,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EACA,MAAO,CACL,OAAQ,4BACV,EAEA,eAACS,qBACC,CAAA,SAAAJ,EAAA,IAACK,EAAA,MAAA,CACC,GAAIC,EAAO,OAAA,IAEX,UAAU,OACV,QAAS,CACP,QAAS,GACT,MAAO,GACP,GAAGP,EAA2Bb,CAAI,CACpC,EACA,QAAS,CACP,QAAS,EACT,MAAO,EACP,EAAG,EACH,EAAG,CACL,EACA,WAAY,CAAE,SAAU,GAAK,KAAM,SAAU,OAAQ,CAAE,EACvD,GAAG,SACH,QAAQ,IACR,GAAG,IACH,GAAG,IACH,MAAM,SACN,QAAQ,SACR,MAAO,CACL,gBACE,+CACJ,EACC,GAAIW,EAAa,CAAE,WAAAA,CAAA,EAAe,CAAC,EAEnC,SAAA,OAAOD,GAAU,SACfI,EAAA,IAAAO,EAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAClB,SAAAX,CAAA,CACH,EAEAA,CAAA,CAAA,EAGN,CAAA,CAAA,EAEJ,CAAA,CAAA,CACF,CAAA,CAAA,CAGN"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
1
|
+
import { jsx as r, jsxs as E } from "react/jsx-runtime";
|
|
2
2
|
import * as t from "@radix-ui/react-tooltip";
|
|
3
3
|
import { InvertedAppearance as M } from "@telegraph/appearance";
|
|
4
4
|
import { RefToTgphRef as _ } from "@telegraph/helpers";
|
|
@@ -7,34 +7,34 @@ import { Text as b } from "@telegraph/typography";
|
|
|
7
7
|
import { motion as j } from "framer-motion";
|
|
8
8
|
const D = ({
|
|
9
9
|
// Radix Tooltip Provider Props
|
|
10
|
-
delayDuration:
|
|
11
|
-
skipDelayDuration:
|
|
12
|
-
disableHoverableContent:
|
|
10
|
+
delayDuration: a = 0,
|
|
11
|
+
skipDelayDuration: p,
|
|
12
|
+
disableHoverableContent: c,
|
|
13
13
|
// Radix Tooltip Root Props
|
|
14
14
|
defaultOpen: m,
|
|
15
|
-
open:
|
|
16
|
-
onOpenChange:
|
|
15
|
+
open: l,
|
|
16
|
+
onOpenChange: s,
|
|
17
17
|
// Radix Tooltip Content Props
|
|
18
18
|
"aria-label": d,
|
|
19
|
-
onEscapeKeyDown:
|
|
20
|
-
onPointerDownOutside:
|
|
21
|
-
forceMount:
|
|
19
|
+
onEscapeKeyDown: f,
|
|
20
|
+
onPointerDownOutside: T,
|
|
21
|
+
forceMount: g,
|
|
22
22
|
side: n = "bottom",
|
|
23
|
-
sideOffset:
|
|
24
|
-
align:
|
|
25
|
-
alignOffset:
|
|
26
|
-
avoidCollisions:
|
|
27
|
-
collisionBoundary:
|
|
28
|
-
collisionPadding:
|
|
29
|
-
arrowPadding:
|
|
30
|
-
sticky:
|
|
31
|
-
hideWhenDetached:
|
|
23
|
+
sideOffset: h = 4,
|
|
24
|
+
align: I = "center",
|
|
25
|
+
alignOffset: x,
|
|
26
|
+
avoidCollisions: y,
|
|
27
|
+
collisionBoundary: A,
|
|
28
|
+
collisionPadding: O,
|
|
29
|
+
arrowPadding: N,
|
|
30
|
+
sticky: u,
|
|
31
|
+
hideWhenDetached: F,
|
|
32
32
|
// Label Props
|
|
33
33
|
label: o,
|
|
34
34
|
labelProps: e,
|
|
35
35
|
children: S
|
|
36
36
|
}) => {
|
|
37
|
-
const
|
|
37
|
+
const v = (i) => {
|
|
38
38
|
if (i === "top")
|
|
39
39
|
return {
|
|
40
40
|
y: -5
|
|
@@ -55,38 +55,38 @@ const D = ({
|
|
|
55
55
|
return /* @__PURE__ */ r(
|
|
56
56
|
t.Provider,
|
|
57
57
|
{
|
|
58
|
-
delayDuration:
|
|
59
|
-
skipDelayDuration:
|
|
60
|
-
disableHoverableContent:
|
|
61
|
-
children: /* @__PURE__ */
|
|
58
|
+
delayDuration: a,
|
|
59
|
+
skipDelayDuration: p,
|
|
60
|
+
disableHoverableContent: c,
|
|
61
|
+
children: /* @__PURE__ */ E(
|
|
62
62
|
t.Root,
|
|
63
63
|
{
|
|
64
64
|
defaultOpen: m,
|
|
65
|
-
open:
|
|
66
|
-
onOpenChange:
|
|
65
|
+
open: l,
|
|
66
|
+
onOpenChange: s,
|
|
67
67
|
children: [
|
|
68
68
|
/* @__PURE__ */ r(t.Trigger, { asChild: !0, children: /* @__PURE__ */ r(_, { children: S }) }),
|
|
69
69
|
/* @__PURE__ */ r(t.Portal, { children: /* @__PURE__ */ r(
|
|
70
70
|
t.Content,
|
|
71
71
|
{
|
|
72
72
|
"aria-label": d,
|
|
73
|
-
onEscapeKeyDown:
|
|
74
|
-
onPointerDownOutside:
|
|
75
|
-
forceMount:
|
|
73
|
+
onEscapeKeyDown: f,
|
|
74
|
+
onPointerDownOutside: T,
|
|
75
|
+
forceMount: g,
|
|
76
76
|
side: n,
|
|
77
|
-
sideOffset:
|
|
78
|
-
align:
|
|
79
|
-
alignOffset:
|
|
80
|
-
avoidCollisions:
|
|
81
|
-
collisionBoundary:
|
|
82
|
-
collisionPadding:
|
|
83
|
-
arrowPadding:
|
|
84
|
-
sticky:
|
|
85
|
-
hideWhenDetached:
|
|
77
|
+
sideOffset: h,
|
|
78
|
+
align: I,
|
|
79
|
+
alignOffset: x,
|
|
80
|
+
avoidCollisions: y,
|
|
81
|
+
collisionBoundary: A,
|
|
82
|
+
collisionPadding: O,
|
|
83
|
+
arrowPadding: N,
|
|
84
|
+
sticky: u,
|
|
85
|
+
hideWhenDetached: F,
|
|
86
86
|
style: {
|
|
87
87
|
zIndex: "var(--tgph-zIndex-tooltip)"
|
|
88
88
|
},
|
|
89
|
-
children: /* @__PURE__ */ r(M, { children: /* @__PURE__ */
|
|
89
|
+
children: /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(
|
|
90
90
|
R,
|
|
91
91
|
{
|
|
92
92
|
as: j.div,
|
|
@@ -94,7 +94,7 @@ const D = ({
|
|
|
94
94
|
initial: {
|
|
95
95
|
opacity: 0.5,
|
|
96
96
|
scale: 0.6,
|
|
97
|
-
...
|
|
97
|
+
...v(n)
|
|
98
98
|
},
|
|
99
99
|
animate: {
|
|
100
100
|
opacity: 1,
|
|
@@ -113,10 +113,7 @@ const D = ({
|
|
|
113
113
|
transformOrigin: "var(--radix-tooltip-content-transform-origin)"
|
|
114
114
|
},
|
|
115
115
|
...e ? { labelProps: e } : {},
|
|
116
|
-
children:
|
|
117
|
-
/* @__PURE__ */ r(t.Arrow, { fill: "var(--tgph-gray-1)" }),
|
|
118
|
-
typeof o == "string" ? /* @__PURE__ */ r(b, { as: "span", size: "1", children: o }) : o
|
|
119
|
-
]
|
|
116
|
+
children: typeof o == "string" ? /* @__PURE__ */ r(b, { as: "span", size: "1", children: o }) : o
|
|
120
117
|
}
|
|
121
118
|
) })
|
|
122
119
|
}
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { InvertedAppearance } from \"@telegraph/appearance\";\nimport {\n RefToTgphRef,\n type TgphComponentProps,\n type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n label: string | React.ReactNode;\n labelProps?: TgphComponentProps<typeof Stack<T>>;\n};\n\ntype TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<\n typeof RadixTooltip.Root\n> &\n React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> &\n React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> &\n TooltipBaseProps<T>;\n\nconst Tooltip = <T extends TgphElement>({\n // Radix Tooltip Provider Props\n delayDuration = 0,\n skipDelayDuration,\n disableHoverableContent,\n // Radix Tooltip Root Props\n defaultOpen,\n open,\n onOpenChange,\n // Radix Tooltip Content Props\n \"aria-label\": ariaLabel,\n onEscapeKeyDown,\n onPointerDownOutside,\n forceMount,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n arrowPadding,\n sticky,\n hideWhenDetached,\n // Label Props\n label,\n labelProps,\n children,\n}: TooltipProps<T>) => {\n const deriveAnimationBasedOnSide = (side: TooltipProps<T>[\"side\"]) => {\n const ANIMATION_OFFSET = 5;\n if (side === \"top\") {\n return {\n y: -ANIMATION_OFFSET,\n };\n }\n\n if (side === \"bottom\") {\n return {\n y: ANIMATION_OFFSET,\n };\n }\n\n if (side === \"left\") {\n return {\n x: -ANIMATION_OFFSET,\n };\n }\n\n if (side === \"right\") {\n return {\n x: ANIMATION_OFFSET,\n };\n }\n };\n return (\n <RadixTooltip.Provider\n delayDuration={delayDuration}\n skipDelayDuration={skipDelayDuration}\n disableHoverableContent={disableHoverableContent}\n >\n <RadixTooltip.Root\n defaultOpen={defaultOpen}\n open={open}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger asChild={true}>\n <RefToTgphRef>{children}</RefToTgphRef>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <RadixTooltip.Content\n aria-label={ariaLabel}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n forceMount={forceMount}\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionBoundary={collisionBoundary}\n collisionPadding={collisionPadding}\n arrowPadding={arrowPadding}\n sticky={sticky}\n hideWhenDetached={hideWhenDetached}\n style={{\n zIndex: `var(--tgph-zIndex-tooltip)`,\n }}\n >\n <InvertedAppearance>\n <Stack\n as={motion.div}\n // Add tgph class so that this always works in portals\n className=\"tgph\"\n initial={{\n opacity: 0.5,\n scale: 0.6,\n ...deriveAnimationBasedOnSide(side),\n }}\n animate={{\n opacity: 1,\n scale: 1,\n x: 0,\n y: 0,\n }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n bg=\"gray-1\"\n rounded=\"3\"\n py=\"2\"\n px=\"3\"\n align=\"center\"\n justify=\"center\"\n style={{\n transformOrigin:\n \"var(--radix-tooltip-content-transform-origin)\",\n }}\n {...(labelProps ? { labelProps } : {})}\n >\n
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { InvertedAppearance } from \"@telegraph/appearance\";\nimport {\n RefToTgphRef,\n type TgphComponentProps,\n type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n label: string | React.ReactNode;\n labelProps?: TgphComponentProps<typeof Stack<T>>;\n};\n\ntype TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<\n typeof RadixTooltip.Root\n> &\n React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> &\n React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> &\n TooltipBaseProps<T>;\n\nconst Tooltip = <T extends TgphElement>({\n // Radix Tooltip Provider Props\n delayDuration = 0,\n skipDelayDuration,\n disableHoverableContent,\n // Radix Tooltip Root Props\n defaultOpen,\n open,\n onOpenChange,\n // Radix Tooltip Content Props\n \"aria-label\": ariaLabel,\n onEscapeKeyDown,\n onPointerDownOutside,\n forceMount,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n arrowPadding,\n sticky,\n hideWhenDetached,\n // Label Props\n label,\n labelProps,\n children,\n}: TooltipProps<T>) => {\n const deriveAnimationBasedOnSide = (side: TooltipProps<T>[\"side\"]) => {\n const ANIMATION_OFFSET = 5;\n if (side === \"top\") {\n return {\n y: -ANIMATION_OFFSET,\n };\n }\n\n if (side === \"bottom\") {\n return {\n y: ANIMATION_OFFSET,\n };\n }\n\n if (side === \"left\") {\n return {\n x: -ANIMATION_OFFSET,\n };\n }\n\n if (side === \"right\") {\n return {\n x: ANIMATION_OFFSET,\n };\n }\n };\n return (\n <RadixTooltip.Provider\n delayDuration={delayDuration}\n skipDelayDuration={skipDelayDuration}\n disableHoverableContent={disableHoverableContent}\n >\n <RadixTooltip.Root\n defaultOpen={defaultOpen}\n open={open}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger asChild={true}>\n <RefToTgphRef>{children}</RefToTgphRef>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <RadixTooltip.Content\n aria-label={ariaLabel}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n forceMount={forceMount}\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionBoundary={collisionBoundary}\n collisionPadding={collisionPadding}\n arrowPadding={arrowPadding}\n sticky={sticky}\n hideWhenDetached={hideWhenDetached}\n style={{\n zIndex: `var(--tgph-zIndex-tooltip)`,\n }}\n >\n <InvertedAppearance>\n <Stack\n as={motion.div}\n // Add tgph class so that this always works in portals\n className=\"tgph\"\n initial={{\n opacity: 0.5,\n scale: 0.6,\n ...deriveAnimationBasedOnSide(side),\n }}\n animate={{\n opacity: 1,\n scale: 1,\n x: 0,\n y: 0,\n }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n bg=\"gray-1\"\n rounded=\"3\"\n py=\"2\"\n px=\"3\"\n align=\"center\"\n justify=\"center\"\n style={{\n transformOrigin:\n \"var(--radix-tooltip-content-transform-origin)\",\n }}\n {...(labelProps ? { labelProps } : {})}\n >\n {typeof label === \"string\" ? (\n <Text as=\"span\" size=\"1\">\n {label}\n </Text>\n ) : (\n label\n )}\n </Stack>\n </InvertedAppearance>\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n};\n\nexport { Tooltip };\n"],"names":["Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpen","open","onOpenChange","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","children","deriveAnimationBasedOnSide","jsx","RadixTooltip","jsxs","RefToTgphRef","InvertedAppearance","Stack","motion","Text"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI;IAC7C,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;CAClD,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,KAAK,CAAC,wBAAwB,CACvE,OAAO,YAAY,CAAC,IAAI,CACzB,GACC,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,QAAQ,CAAC,GAC5D,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,GAC3D,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAEtB,QAAA,MAAM,OAAO,wWA4BV,aAAa,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI;IAC7C,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;CAClD,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,KAAK,CAAC,wBAAwB,CACvE,OAAO,YAAY,CAAC,IAAI,CACzB,GACC,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,QAAQ,CAAC,GAC5D,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,GAC3D,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAEtB,QAAA,MAAM,OAAO,wWA4BV,aAAa,CAAC,CAAC,4CAwGjB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/tooltip",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "A simple tooltip component ",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tooltip",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -39,14 +39,14 @@
|
|
|
39
39
|
"@radix-ui/react-tooltip": "^1.0.7",
|
|
40
40
|
"@telegraph/appearance": "^0.0.1",
|
|
41
41
|
"@telegraph/helpers": "^0.0.3",
|
|
42
|
-
"@telegraph/layout": "^0.0.
|
|
43
|
-
"@telegraph/typography": "^0.0.
|
|
42
|
+
"@telegraph/layout": "^0.0.16",
|
|
43
|
+
"@telegraph/typography": "^0.0.15",
|
|
44
44
|
"framer-motion": "^11.1.9"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@knocklabs/eslint-config": "^0.0.3",
|
|
48
48
|
"@knocklabs/typescript-config": "^0.0.2",
|
|
49
|
-
"@telegraph/postcss-config": "^0.0.
|
|
49
|
+
"@telegraph/postcss-config": "^0.0.17",
|
|
50
50
|
"@telegraph/prettier-config": "^0.0.6",
|
|
51
51
|
"@telegraph/tailwind-config": "^0.0.11",
|
|
52
52
|
"@telegraph/vite-config": "^0.0.9",
|