@telegraph/tooltip 0.0.25 → 0.0.27

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/css/default.css +1 -1
  5. package/dist/esm/index.mjs +28 -28
  6. package/dist/esm/index.mjs.map +1 -1
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @telegraph/tooltip
2
2
 
3
+ ## 0.0.27
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`7ef8fe2`](https://github.com/knocklabs/telegraph/commit/7ef8fe2df51b1f632163918095a5496322277cad), [`8f5a797`](https://github.com/knocklabs/telegraph/commit/8f5a797d9d4a02b7477ae8851057d92d09ff0fa3)]:
8
+ - @telegraph/typography@0.1.0
9
+ - @telegraph/layout@0.1.0
10
+
3
11
  ## 0.0.22
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),D=require("@radix-ui/react-tooltip"),k=require("@radix-ui/react-use-controllable-state"),z=require("@telegraph/appearance"),w=require("@telegraph/helpers"),B=require("@telegraph/layout"),U=require("@telegraph/typography"),H=require("framer-motion"),a=require("react");function J(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,n.get?n:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const s=J(D),K={light:{border:"px",shadow:"2"},dark:{}},g=a.createContext({groupOpen:!1,setGroupOpen:()=>{}}),L=({open:t,delay:o=600})=>{const e=a.useContext(g);return a.useEffect(()=>{let n=null;return e.setGroupOpen&&(t===!0&&e.setGroupOpen(!0),t===!1&&(n=setTimeout(()=>{e.setGroupOpen&&e.setGroupOpen(!1)},o))),()=>{n&&clearTimeout(n)}},[t,e,o]),{groupOpen:e.groupOpen}},Q=({children:t})=>{const[o,e]=a.useState(!1);return r.jsx(g.Provider,{value:{groupOpen:o,setGroupOpen:e},children:t})},V=({delayDuration:t=400,skipDelayDuration:o,disableHoverableContent:e,defaultOpen:n,open:x,onOpenChange:T,"aria-label":y,onEscapeKeyDown:h,onPointerDownOutside:m,forceMount:j,side:l="bottom",sideOffset:b=4,align:A="center",alignOffset:C,avoidCollisions:S,collisionBoundary:v,collisionPadding:I,arrowPadding:N,sticky:F,hideWhenDetached:q,label:p,labelProps:c,enabled:G=!0,appearance:d="dark",children:u})=>{const[f,P]=k.useControllableState({prop:x,onChange:T,defaultProp:n}),{groupOpen:O}=L({open:!!f,delay:t}),M=a.Children.toArray(u).some(i=>i.props.disabled),_=O||M?0:t,E=!O,R=i=>{if(i==="top")return{y:-5};if(i==="bottom")return{y:5};if(i==="left")return{x:-5};if(i==="right")return{x:5}};return G?r.jsx(s.Provider,{delayDuration:_,skipDelayDuration:o,disableHoverableContent:e,children:r.jsxs(s.Root,{open:f,onOpenChange:P,children:[r.jsx(s.Trigger,{asChild:!0,children:r.jsx(w.RefToTgphRef,{children:u})}),r.jsx(s.Portal,{children:r.jsx(s.Content,{"aria-label":y,onEscapeKeyDown:h,onPointerDownOutside:m,forceMount:j,side:l,sideOffset:b,align:A,alignOffset:C,avoidCollisions:S,collisionBoundary:v,collisionPadding:I,arrowPadding:N,sticky:F,hideWhenDetached:q,style:{zIndex:"var(--tgph-zIndex-tooltip)"},children:r.jsx(z.OverrideAppearance,{appearance:d,asChild:!0,children:r.jsx(B.Stack,{as:H.motion.div,className:"tgph",initial:E?{opacity:.5,scale:.6,...R(l)}:{},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)"},...c?{labelProps:c}:{},...K[d],children:typeof p=="string"?r.jsx(U.Text,{as:"span",size:"1",children:p}):p})})})})]})}):r.jsx("span",{children:u})};exports.Tooltip=V;exports.TooltipGroupProvider=Q;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),D=require("@radix-ui/react-tooltip"),k=require("@radix-ui/react-use-controllable-state"),z=require("@telegraph/appearance"),w=require("@telegraph/helpers"),B=require("@telegraph/layout"),U=require("@telegraph/typography"),H=require("framer-motion"),s=require("react");function J(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,n.get?n:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const a=J(D),K={light:{border:"px",shadow:"2"},dark:{}},g=s.createContext({groupOpen:!1,setGroupOpen:()=>{}}),L=({open:t,delay:o=600})=>{const e=s.useContext(g);return s.useEffect(()=>{let n=null;return e.setGroupOpen&&(t===!0&&e.setGroupOpen(!0),t===!1&&(n=setTimeout(()=>{e.setGroupOpen&&e.setGroupOpen(!1)},o))),()=>{n&&clearTimeout(n)}},[t,e,o]),{groupOpen:e.groupOpen}},Q=({children:t})=>{const[o,e]=s.useState(!1);return r.jsx(g.Provider,{value:{groupOpen:o,setGroupOpen:e},children:t})},V=({delayDuration:t=400,skipDelayDuration:o,disableHoverableContent:e,defaultOpen:n,open:x,onOpenChange:T,"aria-label":y,onEscapeKeyDown:h,onPointerDownOutside:m,forceMount:j,side:l="bottom",sideOffset:b=4,align:A="center",alignOffset:C,avoidCollisions:S,collisionBoundary:v,collisionPadding:I,arrowPadding:N,sticky:F,hideWhenDetached:q,label:p,labelProps:c,enabled:G=!0,appearance:d="dark",children:u})=>{const[f,P]=k.useControllableState({prop:x,onChange:T,defaultProp:n}),{groupOpen:O}=L({open:!!f,delay:t}),M=s.Children.toArray(u).some(i=>i.props.disabled),_=O||M?0:t,E=!O,R=i=>{if(i==="top")return{y:-5};if(i==="bottom")return{y:5};if(i==="left")return{x:-5};if(i==="right")return{x:5}};return G?r.jsx(a.Provider,{delayDuration:_,skipDelayDuration:o,disableHoverableContent:e,children:r.jsxs(a.Root,{open:f,onOpenChange:P,children:[r.jsx(a.Trigger,{asChild:!0,children:r.jsx(w.RefToTgphRef,{children:u})}),r.jsx(a.Portal,{children:r.jsx(a.Content,{"aria-label":y,onEscapeKeyDown:h,onPointerDownOutside:m,forceMount:j,side:l,sideOffset:b,align:A,alignOffset:C,avoidCollisions:S,collisionBoundary:v,collisionPadding:I,arrowPadding:N,sticky:F,hideWhenDetached:q,style:{zIndex:"var(--tgph-zIndex-tooltip)"},children:r.jsx(z.OverrideAppearance,{appearance:d,asChild:!0,children:r.jsx(B.Stack,{as:H.motion.div,className:"tgph",initial:E?{opacity:.5,scale:.6,...R(l)}:{},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)"},...c?{labelProps:c}:{},...K[d],children:typeof p=="string"?r.jsx(U.Text,{as:"span",size:"1",children:p}):p})})})})]})}):r.jsx(r.Fragment,{children:u})};exports.Tooltip=V;exports.TooltipGroupProvider=Q;
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.constants.ts","../../src/Tooltip/Tooltip.hooks.tsx","../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { OverrideAppearance } from \"@telegraph/appearance\";\nimport type { Required, TgphComponentProps } from \"@telegraph/helpers\";\nimport type { Stack } from \"@telegraph/layout\";\n\ntype Appearance = Required<\n TgphComponentProps<typeof OverrideAppearance>\n>[\"appearance\"];\n\n// Set any appearance specifics props for the content.\n// For example, a light appearance tooltip should stand out\n// from the background of the page.\nexport const TooltipContentProps: Record<\n Appearance,\n TgphComponentProps<typeof Stack>\n> = {\n light: {\n border: \"px\",\n shadow: \"2\",\n },\n\n dark: {},\n};\n","import React from \"react\";\n\ntype TooltipGroupContextState = {\n groupOpen: boolean;\n setGroupOpen?: (open: boolean) => void;\n};\n\nconst TooltipContext = React.createContext<TooltipGroupContextState>({\n groupOpen: false,\n setGroupOpen: () => {},\n});\n\ntype UseTooltipGroupParams = {\n open: boolean;\n delay?: number;\n};\n\nconst useTooltipGroup = ({ open, delay = 600 }: UseTooltipGroupParams) => {\n const context = React.useContext(TooltipContext);\n\n // If the open prop is set to true, we set the groupOpen state to true\n // If the open prop is set to false, we set the groupOpen state to false after a delay\n // to ensure that another tooltip is not opened while this one is closed.\n React.useEffect(() => {\n let timer: NodeJS.Timeout | null = null;\n if (context.setGroupOpen) {\n if (open === true) {\n context.setGroupOpen(true);\n }\n\n if (open === false) {\n timer = setTimeout(() => {\n if (context.setGroupOpen) {\n context.setGroupOpen(false);\n }\n }, delay);\n }\n }\n\n return () => {\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [open, context, delay]);\n\n return {\n groupOpen: context.groupOpen,\n };\n};\n\ntype TooltipGroupProviderProps = {\n children: React.ReactNode;\n};\n\nconst TooltipGroupProvider = ({ children }: TooltipGroupProviderProps) => {\n const [groupOpen, setGroupOpen] = React.useState<boolean>(false);\n\n return (\n <TooltipContext.Provider value={{ groupOpen, setGroupOpen }}>\n {children}\n </TooltipContext.Provider>\n );\n};\n\nexport { TooltipGroupProvider, useTooltipGroup };\n","import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { OverrideAppearance } 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\nimport { TooltipContentProps } from \"./Tooltip.constants\";\nimport { useTooltipGroup } from \"./Tooltip.hooks\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n label: string | React.ReactNode;\n labelProps?: TgphComponentProps<typeof Stack<T>>;\n enabled?: boolean;\n appearance?: TgphComponentProps<typeof OverrideAppearance>[\"appearance\"];\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 = 400,\n skipDelayDuration,\n disableHoverableContent,\n // Radix Tooltip Root Props\n defaultOpen: defaultOpenProp,\n open: openProp,\n onOpenChange: onOpenChangeProp,\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 // Telegraph Props\n enabled = true,\n appearance = \"dark\",\n children,\n}: TooltipProps<T>) => {\n const [open, setOpen] = useControllableState({\n prop: openProp,\n onChange: onOpenChangeProp,\n defaultProp: defaultOpenProp,\n });\n const { groupOpen } = useTooltipGroup({ open: !!open, delay: delayDuration });\n\n const areAnyChildrenElementsDisabled = React.Children.toArray(children).some(\n (child) => (child as React.ReactElement).props.disabled,\n );\n\n const derivedDelayDuration =\n groupOpen || areAnyChildrenElementsDisabled ? 0 : delayDuration;\n const shouldAnimate = !groupOpen;\n\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\n if (enabled) {\n return (\n <RadixTooltip.Provider\n delayDuration={derivedDelayDuration}\n skipDelayDuration={skipDelayDuration}\n disableHoverableContent={disableHoverableContent}\n >\n <RadixTooltip.Root open={open} onOpenChange={setOpen}>\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 <OverrideAppearance appearance={appearance} asChild>\n <Stack\n as={motion.div}\n // Add tgph class so that this always works in portals\n className=\"tgph\"\n initial={\n shouldAnimate\n ? {\n opacity: 0.5,\n scale: 0.6,\n ...deriveAnimationBasedOnSide(side),\n }\n : {}\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 {...TooltipContentProps[appearance]}\n >\n {typeof label === \"string\" ? (\n <Text as=\"span\" size=\"1\">\n {label}\n </Text>\n ) : (\n label\n )}\n </Stack>\n </OverrideAppearance>\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n }\n\n return <span>{children}</span>;\n};\n\nexport { Tooltip };\n"],"names":["TooltipContentProps","TooltipContext","React","useTooltipGroup","open","delay","context","timer","TooltipGroupProvider","children","groupOpen","setGroupOpen","jsx","Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpenProp","openProp","onOpenChangeProp","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","enabled","appearance","setOpen","useControllableState","areAnyChildrenElementsDisabled","child","derivedDelayDuration","shouldAnimate","deriveAnimationBasedOnSide","RadixTooltip","RefToTgphRef","OverrideAppearance","Stack","motion","Text"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Tooltip/Tooltip.constants.ts","../../src/Tooltip/Tooltip.hooks.tsx","../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { OverrideAppearance } from \"@telegraph/appearance\";\nimport type { Required, TgphComponentProps } from \"@telegraph/helpers\";\nimport type { Stack } from \"@telegraph/layout\";\n\ntype Appearance = Required<\n TgphComponentProps<typeof OverrideAppearance>\n>[\"appearance\"];\n\n// Set any appearance specifics props for the content.\n// For example, a light appearance tooltip should stand out\n// from the background of the page.\nexport const TooltipContentProps: Record<\n Appearance,\n TgphComponentProps<typeof Stack>\n> = {\n light: {\n border: \"px\",\n shadow: \"2\",\n },\n\n dark: {},\n};\n","import React from \"react\";\n\ntype TooltipGroupContextState = {\n groupOpen: boolean;\n setGroupOpen?: (open: boolean) => void;\n};\n\nconst TooltipContext = React.createContext<TooltipGroupContextState>({\n groupOpen: false,\n setGroupOpen: () => {},\n});\n\ntype UseTooltipGroupParams = {\n open: boolean;\n delay?: number;\n};\n\nconst useTooltipGroup = ({ open, delay = 600 }: UseTooltipGroupParams) => {\n const context = React.useContext(TooltipContext);\n\n // If the open prop is set to true, we set the groupOpen state to true\n // If the open prop is set to false, we set the groupOpen state to false after a delay\n // to ensure that another tooltip is not opened while this one is closed.\n React.useEffect(() => {\n let timer: NodeJS.Timeout | null = null;\n if (context.setGroupOpen) {\n if (open === true) {\n context.setGroupOpen(true);\n }\n\n if (open === false) {\n timer = setTimeout(() => {\n if (context.setGroupOpen) {\n context.setGroupOpen(false);\n }\n }, delay);\n }\n }\n\n return () => {\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [open, context, delay]);\n\n return {\n groupOpen: context.groupOpen,\n };\n};\n\ntype TooltipGroupProviderProps = {\n children: React.ReactNode;\n};\n\nconst TooltipGroupProvider = ({ children }: TooltipGroupProviderProps) => {\n const [groupOpen, setGroupOpen] = React.useState<boolean>(false);\n\n return (\n <TooltipContext.Provider value={{ groupOpen, setGroupOpen }}>\n {children}\n </TooltipContext.Provider>\n );\n};\n\nexport { TooltipGroupProvider, useTooltipGroup };\n","import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { OverrideAppearance } 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\nimport { TooltipContentProps } from \"./Tooltip.constants\";\nimport { useTooltipGroup } from \"./Tooltip.hooks\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n label: string | React.ReactNode;\n labelProps?: TgphComponentProps<typeof Stack<T>>;\n enabled?: boolean;\n appearance?: TgphComponentProps<typeof OverrideAppearance>[\"appearance\"];\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 = 400,\n skipDelayDuration,\n disableHoverableContent,\n // Radix Tooltip Root Props\n defaultOpen: defaultOpenProp,\n open: openProp,\n onOpenChange: onOpenChangeProp,\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 // Telegraph Props\n enabled = true,\n appearance = \"dark\",\n children,\n}: TooltipProps<T>) => {\n const [open, setOpen] = useControllableState({\n prop: openProp,\n onChange: onOpenChangeProp,\n defaultProp: defaultOpenProp,\n });\n const { groupOpen } = useTooltipGroup({ open: !!open, delay: delayDuration });\n\n const areAnyChildrenElementsDisabled = React.Children.toArray(children).some(\n (child) => (child as React.ReactElement).props.disabled,\n );\n\n const derivedDelayDuration =\n groupOpen || areAnyChildrenElementsDisabled ? 0 : delayDuration;\n const shouldAnimate = !groupOpen;\n\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\n if (enabled) {\n return (\n <RadixTooltip.Provider\n delayDuration={derivedDelayDuration}\n skipDelayDuration={skipDelayDuration}\n disableHoverableContent={disableHoverableContent}\n >\n <RadixTooltip.Root open={open} onOpenChange={setOpen}>\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 <OverrideAppearance appearance={appearance} asChild>\n <Stack\n as={motion.div}\n // Add tgph class so that this always works in portals\n className=\"tgph\"\n initial={\n shouldAnimate\n ? {\n opacity: 0.5,\n scale: 0.6,\n ...deriveAnimationBasedOnSide(side),\n }\n : {}\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 {...TooltipContentProps[appearance]}\n >\n {typeof label === \"string\" ? (\n <Text as=\"span\" size=\"1\">\n {label}\n </Text>\n ) : (\n label\n )}\n </Stack>\n </OverrideAppearance>\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n }\n\n return <>{children}</>;\n};\n\nexport { Tooltip };\n"],"names":["TooltipContentProps","TooltipContext","React","useTooltipGroup","open","delay","context","timer","TooltipGroupProvider","children","groupOpen","setGroupOpen","jsx","Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpenProp","openProp","onOpenChangeProp","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","enabled","appearance","setOpen","useControllableState","areAnyChildrenElementsDisabled","child","derivedDelayDuration","shouldAnimate","deriveAnimationBasedOnSide","RadixTooltip","RefToTgphRef","OverrideAppearance","Stack","motion","Text"],"mappings":"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"}
package/dist/css/default.css CHANGED
@@ -1 +1 @@
1
- .tgph :is(.sticky){position:sticky}.tgph :is(.border){border-width:1px}.tgph :is(.transition){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
1
+ .tgph .sticky{position:sticky}.tgph .border{border-width:1px}.tgph .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
package/dist/esm/index.mjs CHANGED
@@ -1,13 +1,13 @@
1
- import { jsx as e, jsxs as z } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as z, Fragment as D } from "react/jsx-runtime";
2
2
  import * as p from "@radix-ui/react-tooltip";
3
- import { useControllableState as D } from "@radix-ui/react-use-controllable-state";
4
- import { OverrideAppearance as w } from "@telegraph/appearance";
5
- import { RefToTgphRef as B } from "@telegraph/helpers";
6
- import { Stack as q } from "@telegraph/layout";
7
- import { Text as H } from "@telegraph/typography";
8
- import { motion as J } from "framer-motion";
3
+ import { useControllableState as w } from "@radix-ui/react-use-controllable-state";
4
+ import { OverrideAppearance as B } from "@telegraph/appearance";
5
+ import { RefToTgphRef as q } from "@telegraph/helpers";
6
+ import { Stack as H } from "@telegraph/layout";
7
+ import { Text as J } from "@telegraph/typography";
8
+ import { motion as K } from "framer-motion";
9
9
  import a from "react";
10
- const K = {
10
+ const L = {
11
11
  light: {
12
12
  border: "px",
13
13
  shadow: "2"
@@ -17,7 +17,7 @@ const K = {
17
17
  groupOpen: !1,
18
18
  setGroupOpen: () => {
19
19
  }
20
- }), L = ({ open: r, delay: o = 600 }) => {
20
+ }), Q = ({ open: r, delay: o = 600 }) => {
21
21
  const t = a.useContext(O);
22
22
  return a.useEffect(() => {
23
23
  let i = null;
@@ -29,10 +29,10 @@ const K = {
29
29
  }, [r, t, o]), {
30
30
  groupOpen: t.groupOpen
31
31
  };
32
- }, et = ({ children: r }) => {
32
+ }, rt = ({ children: r }) => {
33
33
  const [o, t] = a.useState(!1);
34
34
  return /* @__PURE__ */ e(O.Provider, { value: { groupOpen: o, setGroupOpen: t }, children: r });
35
- }, rt = ({
35
+ }, ot = ({
36
36
  // Radix Tooltip Provider Props
37
37
  delayDuration: r = 400,
38
38
  skipDelayDuration: o,
@@ -49,9 +49,9 @@ const K = {
49
49
  side: u = "bottom",
50
50
  sideOffset: C = 4,
51
51
  align: I = "center",
52
- alignOffset: N,
53
- avoidCollisions: v,
54
- collisionBoundary: F,
52
+ alignOffset: F,
53
+ avoidCollisions: N,
54
+ collisionBoundary: v,
55
55
  collisionPadding: S,
56
56
  arrowPadding: G,
57
57
  sticky: b,
@@ -64,11 +64,11 @@ const K = {
64
64
  appearance: f = "dark",
65
65
  children: l
66
66
  }) => {
67
- const [d, P] = D({
67
+ const [d, P] = w({
68
68
  prop: g,
69
69
  onChange: T,
70
70
  defaultProp: i
71
- }), { groupOpen: m } = L({ open: !!d, delay: r }), R = a.Children.toArray(l).some(
71
+ }), { groupOpen: m } = Q({ open: !!d, delay: r }), R = a.Children.toArray(l).some(
72
72
  (n) => n.props.disabled
73
73
  ), _ = m || R ? 0 : r, j = !m, k = (n) => {
74
74
  if (n === "top")
@@ -95,7 +95,7 @@ const K = {
95
95
  skipDelayDuration: o,
96
96
  disableHoverableContent: t,
97
97
  children: /* @__PURE__ */ z(p.Root, { open: d, onOpenChange: P, children: [
98
- /* @__PURE__ */ e(p.Trigger, { asChild: !0, children: /* @__PURE__ */ e(B, { children: l }) }),
98
+ /* @__PURE__ */ e(p.Trigger, { asChild: !0, children: /* @__PURE__ */ e(q, { children: l }) }),
99
99
  /* @__PURE__ */ e(p.Portal, { children: /* @__PURE__ */ e(
100
100
  p.Content,
101
101
  {
@@ -106,9 +106,9 @@ const K = {
106
106
  side: u,
107
107
  sideOffset: C,
108
108
  align: I,
109
- alignOffset: N,
110
- avoidCollisions: v,
111
- collisionBoundary: F,
109
+ alignOffset: F,
110
+ avoidCollisions: N,
111
+ collisionBoundary: v,
112
112
  collisionPadding: S,
113
113
  arrowPadding: G,
114
114
  sticky: b,
@@ -116,10 +116,10 @@ const K = {
116
116
  style: {
117
117
  zIndex: "var(--tgph-zIndex-tooltip)"
118
118
  },
119
- children: /* @__PURE__ */ e(w, { appearance: f, asChild: !0, children: /* @__PURE__ */ e(
120
- q,
119
+ children: /* @__PURE__ */ e(B, { appearance: f, asChild: !0, children: /* @__PURE__ */ e(
120
+ H,
121
121
  {
122
- as: J.div,
122
+ as: K.div,
123
123
  className: "tgph",
124
124
  initial: j ? {
125
125
  opacity: 0.5,
@@ -143,18 +143,18 @@ const K = {
143
143
  transformOrigin: "var(--radix-tooltip-content-transform-origin)"
144
144
  },
145
145
  ...c ? { labelProps: c } : {},
146
- ...K[f],
147
- children: typeof s == "string" ? /* @__PURE__ */ e(H, { as: "span", size: "1", children: s }) : s
146
+ ...L[f],
147
+ children: typeof s == "string" ? /* @__PURE__ */ e(J, { as: "span", size: "1", children: s }) : s
148
148
  }
149
149
  ) })
150
150
  }
151
151
  ) })
152
152
  ] })
153
153
  }
154
- ) : /* @__PURE__ */ e("span", { children: l });
154
+ ) : /* @__PURE__ */ e(D, { children: l });
155
155
  };
156
156
  export {
157
- rt as Tooltip,
158
- et as TooltipGroupProvider
157
+ ot as Tooltip,
158
+ rt as TooltipGroupProvider
159
159
  };
160
160
  //# sourceMappingURL=index.mjs.map
package/dist/esm/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Tooltip/Tooltip.constants.ts","../../src/Tooltip/Tooltip.hooks.tsx","../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { OverrideAppearance } from \"@telegraph/appearance\";\nimport type { Required, TgphComponentProps } from \"@telegraph/helpers\";\nimport type { Stack } from \"@telegraph/layout\";\n\ntype Appearance = Required<\n TgphComponentProps<typeof OverrideAppearance>\n>[\"appearance\"];\n\n// Set any appearance specifics props for the content.\n// For example, a light appearance tooltip should stand out\n// from the background of the page.\nexport const TooltipContentProps: Record<\n Appearance,\n TgphComponentProps<typeof Stack>\n> = {\n light: {\n border: \"px\",\n shadow: \"2\",\n },\n\n dark: {},\n};\n","import React from \"react\";\n\ntype TooltipGroupContextState = {\n groupOpen: boolean;\n setGroupOpen?: (open: boolean) => void;\n};\n\nconst TooltipContext = React.createContext<TooltipGroupContextState>({\n groupOpen: false,\n setGroupOpen: () => {},\n});\n\ntype UseTooltipGroupParams = {\n open: boolean;\n delay?: number;\n};\n\nconst useTooltipGroup = ({ open, delay = 600 }: UseTooltipGroupParams) => {\n const context = React.useContext(TooltipContext);\n\n // If the open prop is set to true, we set the groupOpen state to true\n // If the open prop is set to false, we set the groupOpen state to false after a delay\n // to ensure that another tooltip is not opened while this one is closed.\n React.useEffect(() => {\n let timer: NodeJS.Timeout | null = null;\n if (context.setGroupOpen) {\n if (open === true) {\n context.setGroupOpen(true);\n }\n\n if (open === false) {\n timer = setTimeout(() => {\n if (context.setGroupOpen) {\n context.setGroupOpen(false);\n }\n }, delay);\n }\n }\n\n return () => {\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [open, context, delay]);\n\n return {\n groupOpen: context.groupOpen,\n };\n};\n\ntype TooltipGroupProviderProps = {\n children: React.ReactNode;\n};\n\nconst TooltipGroupProvider = ({ children }: TooltipGroupProviderProps) => {\n const [groupOpen, setGroupOpen] = React.useState<boolean>(false);\n\n return (\n <TooltipContext.Provider value={{ groupOpen, setGroupOpen }}>\n {children}\n </TooltipContext.Provider>\n );\n};\n\nexport { TooltipGroupProvider, useTooltipGroup };\n","import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { OverrideAppearance } 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\nimport { TooltipContentProps } from \"./Tooltip.constants\";\nimport { useTooltipGroup } from \"./Tooltip.hooks\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n label: string | React.ReactNode;\n labelProps?: TgphComponentProps<typeof Stack<T>>;\n enabled?: boolean;\n appearance?: TgphComponentProps<typeof OverrideAppearance>[\"appearance\"];\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 = 400,\n skipDelayDuration,\n disableHoverableContent,\n // Radix Tooltip Root Props\n defaultOpen: defaultOpenProp,\n open: openProp,\n onOpenChange: onOpenChangeProp,\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 // Telegraph Props\n enabled = true,\n appearance = \"dark\",\n children,\n}: TooltipProps<T>) => {\n const [open, setOpen] = useControllableState({\n prop: openProp,\n onChange: onOpenChangeProp,\n defaultProp: defaultOpenProp,\n });\n const { groupOpen } = useTooltipGroup({ open: !!open, delay: delayDuration });\n\n const areAnyChildrenElementsDisabled = React.Children.toArray(children).some(\n (child) => (child as React.ReactElement).props.disabled,\n );\n\n const derivedDelayDuration =\n groupOpen || areAnyChildrenElementsDisabled ? 0 : delayDuration;\n const shouldAnimate = !groupOpen;\n\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\n if (enabled) {\n return (\n <RadixTooltip.Provider\n delayDuration={derivedDelayDuration}\n skipDelayDuration={skipDelayDuration}\n disableHoverableContent={disableHoverableContent}\n >\n <RadixTooltip.Root open={open} onOpenChange={setOpen}>\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 <OverrideAppearance appearance={appearance} asChild>\n <Stack\n as={motion.div}\n // Add tgph class so that this always works in portals\n className=\"tgph\"\n initial={\n shouldAnimate\n ? {\n opacity: 0.5,\n scale: 0.6,\n ...deriveAnimationBasedOnSide(side),\n }\n : {}\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 {...TooltipContentProps[appearance]}\n >\n {typeof label === \"string\" ? (\n <Text as=\"span\" size=\"1\">\n {label}\n </Text>\n ) : (\n label\n )}\n </Stack>\n </OverrideAppearance>\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n }\n\n return <span>{children}</span>;\n};\n\nexport { Tooltip };\n"],"names":["TooltipContentProps","TooltipContext","React","useTooltipGroup","open","delay","context","timer","TooltipGroupProvider","children","groupOpen","setGroupOpen","jsx","Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpenProp","openProp","onOpenChangeProp","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","enabled","appearance","setOpen","useControllableState","areAnyChildrenElementsDisabled","child","derivedDelayDuration","shouldAnimate","deriveAnimationBasedOnSide","RadixTooltip","RefToTgphRef","OverrideAppearance","Stack","motion","Text"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Tooltip/Tooltip.constants.ts","../../src/Tooltip/Tooltip.hooks.tsx","../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { OverrideAppearance } from \"@telegraph/appearance\";\nimport type { Required, TgphComponentProps } from \"@telegraph/helpers\";\nimport type { Stack } from \"@telegraph/layout\";\n\ntype Appearance = Required<\n TgphComponentProps<typeof OverrideAppearance>\n>[\"appearance\"];\n\n// Set any appearance specifics props for the content.\n// For example, a light appearance tooltip should stand out\n// from the background of the page.\nexport const TooltipContentProps: Record<\n Appearance,\n TgphComponentProps<typeof Stack>\n> = {\n light: {\n border: \"px\",\n shadow: \"2\",\n },\n\n dark: {},\n};\n","import React from \"react\";\n\ntype TooltipGroupContextState = {\n groupOpen: boolean;\n setGroupOpen?: (open: boolean) => void;\n};\n\nconst TooltipContext = React.createContext<TooltipGroupContextState>({\n groupOpen: false,\n setGroupOpen: () => {},\n});\n\ntype UseTooltipGroupParams = {\n open: boolean;\n delay?: number;\n};\n\nconst useTooltipGroup = ({ open, delay = 600 }: UseTooltipGroupParams) => {\n const context = React.useContext(TooltipContext);\n\n // If the open prop is set to true, we set the groupOpen state to true\n // If the open prop is set to false, we set the groupOpen state to false after a delay\n // to ensure that another tooltip is not opened while this one is closed.\n React.useEffect(() => {\n let timer: NodeJS.Timeout | null = null;\n if (context.setGroupOpen) {\n if (open === true) {\n context.setGroupOpen(true);\n }\n\n if (open === false) {\n timer = setTimeout(() => {\n if (context.setGroupOpen) {\n context.setGroupOpen(false);\n }\n }, delay);\n }\n }\n\n return () => {\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [open, context, delay]);\n\n return {\n groupOpen: context.groupOpen,\n };\n};\n\ntype TooltipGroupProviderProps = {\n children: React.ReactNode;\n};\n\nconst TooltipGroupProvider = ({ children }: TooltipGroupProviderProps) => {\n const [groupOpen, setGroupOpen] = React.useState<boolean>(false);\n\n return (\n <TooltipContext.Provider value={{ groupOpen, setGroupOpen }}>\n {children}\n </TooltipContext.Provider>\n );\n};\n\nexport { TooltipGroupProvider, useTooltipGroup };\n","import * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { OverrideAppearance } 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\nimport { TooltipContentProps } from \"./Tooltip.constants\";\nimport { useTooltipGroup } from \"./Tooltip.hooks\";\n\ntype TooltipBaseProps<T extends TgphElement> = {\n label: string | React.ReactNode;\n labelProps?: TgphComponentProps<typeof Stack<T>>;\n enabled?: boolean;\n appearance?: TgphComponentProps<typeof OverrideAppearance>[\"appearance\"];\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 = 400,\n skipDelayDuration,\n disableHoverableContent,\n // Radix Tooltip Root Props\n defaultOpen: defaultOpenProp,\n open: openProp,\n onOpenChange: onOpenChangeProp,\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 // Telegraph Props\n enabled = true,\n appearance = \"dark\",\n children,\n}: TooltipProps<T>) => {\n const [open, setOpen] = useControllableState({\n prop: openProp,\n onChange: onOpenChangeProp,\n defaultProp: defaultOpenProp,\n });\n const { groupOpen } = useTooltipGroup({ open: !!open, delay: delayDuration });\n\n const areAnyChildrenElementsDisabled = React.Children.toArray(children).some(\n (child) => (child as React.ReactElement).props.disabled,\n );\n\n const derivedDelayDuration =\n groupOpen || areAnyChildrenElementsDisabled ? 0 : delayDuration;\n const shouldAnimate = !groupOpen;\n\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\n if (enabled) {\n return (\n <RadixTooltip.Provider\n delayDuration={derivedDelayDuration}\n skipDelayDuration={skipDelayDuration}\n disableHoverableContent={disableHoverableContent}\n >\n <RadixTooltip.Root open={open} onOpenChange={setOpen}>\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 <OverrideAppearance appearance={appearance} asChild>\n <Stack\n as={motion.div}\n // Add tgph class so that this always works in portals\n className=\"tgph\"\n initial={\n shouldAnimate\n ? {\n opacity: 0.5,\n scale: 0.6,\n ...deriveAnimationBasedOnSide(side),\n }\n : {}\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 {...TooltipContentProps[appearance]}\n >\n {typeof label === \"string\" ? (\n <Text as=\"span\" size=\"1\">\n {label}\n </Text>\n ) : (\n label\n )}\n </Stack>\n </OverrideAppearance>\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n }\n\n return <>{children}</>;\n};\n\nexport { Tooltip };\n"],"names":["TooltipContentProps","TooltipContext","React","useTooltipGroup","open","delay","context","timer","TooltipGroupProvider","children","groupOpen","setGroupOpen","jsx","Tooltip","delayDuration","skipDelayDuration","disableHoverableContent","defaultOpenProp","openProp","onOpenChangeProp","ariaLabel","onEscapeKeyDown","onPointerDownOutside","forceMount","side","sideOffset","align","alignOffset","avoidCollisions","collisionBoundary","collisionPadding","arrowPadding","sticky","hideWhenDetached","label","labelProps","enabled","appearance","setOpen","useControllableState","areAnyChildrenElementsDisabled","child","derivedDelayDuration","shouldAnimate","deriveAnimationBasedOnSide","RadixTooltip","RefToTgphRef","OverrideAppearance","Stack","motion","Text"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telegraph/tooltip",
3
- "version": "0.0.25",
3
+ "version": "0.0.27",
4
4
  "description": "A simple tooltip component ",
5
5
  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tooltip",
6
6
  "author": "@knocklabs",
@@ -36,8 +36,8 @@
36
36
  "@radix-ui/react-use-controllable-state": "^1.1.0",
37
37
  "@telegraph/appearance": "^0.0.4",
38
38
  "@telegraph/helpers": "^0.0.7",
39
- "@telegraph/layout": "^0.0.30",
40
- "@telegraph/typography": "^0.0.30",
39
+ "@telegraph/layout": "^0.1.0",
40
+ "@telegraph/typography": "^0.1.0",
41
41
  "framer-motion": "^11.1.9"
42
42
  },
43
43
  "devDependencies": {
@@ -52,7 +52,7 @@
52
52
  "react": "^18.2.0",
53
53
  "react-dom": "^18.3.1",
54
54
  "typescript": "^5.5.4",
55
- "vite": "^5.3.6"
55
+ "vite": "^5.4.7"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "react": "^18.2.0",