@telegraph/tooltip 0.0.44 → 0.0.45

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @telegraph/tooltip
 
+## 0.0.45
+
+### Patch Changes
+
+- [#441](https://github.com/knocklabs/telegraph/pull/441) [`14ea9d1`](https://github.com/knocklabs/telegraph/commit/14ea9d164d69c0adeae4f2405565592aa4c9c75c) Thanks [@kylemcd](https://github.com/kylemcd)! - adds `skipAnimation` prop to `<Motion/>` and integrates into `<Popover/>` and `<Tooltip/>`
+
+- Updated dependencies [[`14ea9d1`](https://github.com/knocklabs/telegraph/commit/14ea9d164d69c0adeae4f2405565592aa4c9c75c)]:
+  - @telegraph/motion@0.0.8
+
 ## 0.0.44
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),M=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/motion"),H=require("@telegraph/typography"),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(M),K={light:{border:"px",shadow:"2"},dark:{}},O=a.createContext({groupOpen:!1,setGroupOpen:()=>{}}),L=({open:t,delay:o=600})=>{const e=a.useContext(O);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(O.Provider,{value:{groupOpen:o,setGroupOpen:e},children:t})},V=({delayDuration:t=400,skipDelayDuration:o,disableHoverableContent:e,defaultOpen:n,open:x,onOpenChange:y,"aria-label":T,onEscapeKeyDown:h,onPointerDownOutside:m,forceMount:j,side:l="bottom",sideOffset:b=4,align:C="center",alignOffset:v,avoidCollisions:S,collisionBoundary:A,collisionPadding:q,arrowPadding:G,sticky:P,hideWhenDetached:I,label:p,labelProps:c,enabled:N=!0,appearance:d="dark",children:u})=>{const[f,F]=k.useControllableState({prop:x,onChange:y,defaultProp:n}),{groupOpen:g}=L({open:!!f,delay:t}),R=a.Children.toArray(u).some(i=>i.props.disabled),_=g||R?0:t,D=!g,E=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 N?r.jsx(s.Provider,{delayDuration:_,skipDelayDuration:o,disableHoverableContent:e,children:r.jsxs(s.Root,{open:f,onOpenChange:F,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":T,onEscapeKeyDown:h,onPointerDownOutside:m,forceMount:j,side:l,sideOffset:b,align:C,alignOffset:v,avoidCollisions:S,collisionBoundary:A,collisionPadding:q,arrowPadding:G,sticky:P,hideWhenDetached:I,style:{zIndex:"var(--tgph-zIndex-tooltip)"},children:r.jsx(z.OverrideAppearance,{appearance:d,asChild:!0,children:r.jsx(B.Stack,{as:U.motion.div,className:"tgph",initial:D?{opacity:0,scale:.5,...E(l)}:{},animate:{opacity:1,scale:1,x:0,y:0},transition:{duration:100,type:"spring"},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(H.Text,{as:"span",size:"1",children:p}):p})})})})]})}):r.jsx(r.Fragment,{children:u})};exports.Tooltip=V;exports.TooltipGroupProvider=Q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),k=require("@radix-ui/react-tooltip"),z=require("@radix-ui/react-use-controllable-state"),w=require("@telegraph/appearance"),B=require("@telegraph/helpers"),U=require("@telegraph/layout"),H=require("@telegraph/motion"),J=require("@telegraph/typography"),a=require("react");function K(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=K(k),L={light:{border:"px",shadow:"2"},dark:{}},O=a.createContext({groupOpen:!1,setGroupOpen:()=>{}}),Q=({open:t,delay:o=600})=>{const e=a.useContext(O);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}},V=({children:t})=>{const[o,e]=a.useState(!1);return r.jsx(O.Provider,{value:{groupOpen:o,setGroupOpen:e},children:t})},W=({delayDuration:t=400,skipDelayDuration:o,disableHoverableContent:e,defaultOpen:n,open:x,onOpenChange:y,"aria-label":T,onEscapeKeyDown:h,onPointerDownOutside:m,forceMount:j,side:l="bottom",sideOffset:b=4,align:C="center",alignOffset:v,avoidCollisions:S,collisionBoundary:A,collisionPadding:q,arrowPadding:G,sticky:P,hideWhenDetached:I,skipAnimation:N,label:p,labelProps:c,enabled:F=!0,appearance:d="dark",children:u})=>{const[f,R]=z.useControllableState({prop:x,onChange:y,defaultProp:n}),{groupOpen:g}=Q({open:!!f,delay:t}),_=a.Children.toArray(u).some(i=>i.props.disabled),D=g||_?0:t,E=!g,M=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 F?r.jsx(s.Provider,{delayDuration:D,skipDelayDuration:o,disableHoverableContent:e,children:r.jsxs(s.Root,{open:f,onOpenChange:R,children:[r.jsx(s.Trigger,{asChild:!0,children:r.jsx(B.RefToTgphRef,{children:u})}),r.jsx(s.Portal,{children:r.jsx(s.Content,{"aria-label":T,onEscapeKeyDown:h,onPointerDownOutside:m,forceMount:j,side:l,sideOffset:b,align:C,alignOffset:v,avoidCollisions:S,collisionBoundary:A,collisionPadding:q,arrowPadding:G,sticky:P,hideWhenDetached:I,style:{zIndex:"var(--tgph-zIndex-tooltip)"},children:r.jsx(w.OverrideAppearance,{appearance:d,asChild:!0,children:r.jsx(U.Stack,{as:H.motion.div,className:"tgph",skipAnimation:N,initial:E?{opacity:0,scale:.5,...M(l)}:{},animate:{opacity:1,scale:1,x:0,y:0},transition:{duration:100,type:"spring"},bg:"gray-1",rounded:"3",py:"2",px:"3",align:"center",justify:"center",style:{transformOrigin:"var(--radix-tooltip-content-transform-origin)"},...c?{labelProps:c}:{},...L[d],children:typeof p=="string"?r.jsx(J.Text,{as:"span",size:"1",children:p}):p})})})})]})}):r.jsx(r.Fragment,{children:u})};exports.Tooltip=W;exports.TooltipGroupProvider=V;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -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 { motion } from \"@telegraph/motion\";\nimport { Text } from \"@telegraph/typography\";\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\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,\n                          scale: 0.5,\n                          ...deriveAnimationBasedOnSide(side),\n                        }\n                      : {}\n                  }\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    x: 0,\n                    y: 0,\n                  }}\n                  transition={{\n                    duration: 100,\n                    type: \"spring\",\n                  }}\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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"}
+{"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 { motion } from \"@telegraph/motion\";\nimport { Text } from \"@telegraph/typography\";\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  skipAnimation?: TgphComponentProps<typeof motion.div>[\"skipAnimation\"];\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  skipAnimation,\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\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                  skipAnimation={skipAnimation}\n                  initial={\n                    shouldAnimate\n                      ? {\n                          opacity: 0,\n                          scale: 0.5,\n                          ...deriveAnimationBasedOnSide(side),\n                        }\n                      : {}\n                  }\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    x: 0,\n                    y: 0,\n                  }}\n                  transition={{\n                    duration: 100,\n                    type: \"spring\",\n                  }}\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","skipAnimation","label","labelProps","enabled","appearance","setOpen","useControllableState","areAnyChildrenElementsDisabled","child","derivedDelayDuration","shouldAnimate","deriveAnimationBasedOnSide","RadixTooltip","RefToTgphRef","OverrideAppearance","Stack","motion","Text"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,13 +1,13 @@
-import { jsx as e, jsxs as M, Fragment as _ } from "react/jsx-runtime";
+import { jsx as e, jsxs as _, Fragment as w } from "react/jsx-runtime";
 import * as p from "@radix-ui/react-tooltip";
-import { useControllableState as w } from "@radix-ui/react-use-controllable-state";
-import { OverrideAppearance as B } from "@telegraph/appearance";
-import { RefToTgphRef as q } from "@telegraph/helpers";
-import { Stack as H } from "@telegraph/layout";
-import { motion as J } from "@telegraph/motion";
-import { Text as K } from "@telegraph/typography";
+import { useControllableState as B } from "@radix-ui/react-use-controllable-state";
+import { OverrideAppearance as q } from "@telegraph/appearance";
+import { RefToTgphRef as H } from "@telegraph/helpers";
+import { Stack as J } from "@telegraph/layout";
+import { motion as K } from "@telegraph/motion";
+import { Text as L } from "@telegraph/typography";
 import a from "react";
-const L = {
+const Q = {
   light: {
     border: "px",
     shadow: "2"
@@ -17,7 +17,7 @@ const L = {
   groupOpen: !1,
   setGroupOpen: () => {
   }
-}), Q = ({ open: r, delay: o = 600 }) => {
+}), U = ({ open: r, delay: o = 600 }) => {
   const t = a.useContext(O);
   return a.useEffect(() => {
     let i = null;
@@ -29,10 +29,10 @@ const L = {
   }, [r, t, o]), {
     groupOpen: t.groupOpen
   };
-}, rt = ({ children: r }) => {
+}, ot = ({ children: r }) => {
   const [o, t] = a.useState(!1);
   return /* @__PURE__ */ e(O.Provider, { value: { groupOpen: o, setGroupOpen: t }, children: r });
-}, ot = ({
+}, nt = ({
   // Radix Tooltip Provider Props
   delayDuration: r = 400,
   skipDelayDuration: o,
@@ -56,21 +56,22 @@ const L = {
   arrowPadding: S,
   sticky: b,
   hideWhenDetached: E,
+  skipAnimation: P,
   // Label Props
   label: s,
   labelProps: c,
   // Telegraph Props
-  enabled: P = !0,
+  enabled: R = !0,
   appearance: f = "dark",
   children: l
 }) => {
-  const [d, R] = w({
+  const [d, j] = B({
     prop: g,
     onChange: h,
     defaultProp: i
-  }), { groupOpen: m } = Q({ open: !!d, delay: r }), j = a.Children.toArray(l).some(
+  }), { groupOpen: m } = U({ open: !!d, delay: r }), k = a.Children.toArray(l).some(
     (n) => n.props.disabled
-  ), k = m || j ? 0 : r, z = !m, D = (n) => {
+  ), z = m || k ? 0 : r, D = !m, M = (n) => {
     if (n === "top")
       return {
         y: -5
@@ -88,14 +89,14 @@ const L = {
         x: 5
       };
   };
-  return P ? /* @__PURE__ */ e(
+  return R ? /* @__PURE__ */ e(
     p.Provider,
     {
-      delayDuration: k,
+      delayDuration: z,
       skipDelayDuration: o,
       disableHoverableContent: t,
-      children: /* @__PURE__ */ M(p.Root, { open: d, onOpenChange: R, children: [
-        /* @__PURE__ */ e(p.Trigger, { asChild: !0, children: /* @__PURE__ */ e(q, { children: l }) }),
+      children: /* @__PURE__ */ _(p.Root, { open: d, onOpenChange: j, children: [
+        /* @__PURE__ */ e(p.Trigger, { asChild: !0, children: /* @__PURE__ */ e(H, { children: l }) }),
         /* @__PURE__ */ e(p.Portal, { children: /* @__PURE__ */ e(
           p.Content,
           {
@@ -116,15 +117,16 @@ const L = {
             style: {
               zIndex: "var(--tgph-zIndex-tooltip)"
             },
-            children: /* @__PURE__ */ e(B, { appearance: f, asChild: !0, children: /* @__PURE__ */ e(
-              H,
+            children: /* @__PURE__ */ e(q, { appearance: f, asChild: !0, children: /* @__PURE__ */ e(
+              J,
               {
-                as: J.div,
+                as: K.div,
                 className: "tgph",
-                initial: z ? {
+                skipAnimation: P,
+                initial: D ? {
                   opacity: 0,
                   scale: 0.5,
-                  ...D(u)
+                  ...M(u)
                 } : {},
                 animate: {
                   opacity: 1,
@@ -146,18 +148,18 @@ const L = {
                   transformOrigin: "var(--radix-tooltip-content-transform-origin)"
                 },
                 ...c ? { labelProps: c } : {},
-                ...L[f],
-                children: typeof s == "string" ? /* @__PURE__ */ e(K, { as: "span", size: "1", children: s }) : s
+                ...Q[f],
+                children: typeof s == "string" ? /* @__PURE__ */ e(L, { as: "span", size: "1", children: s }) : s
               }
             ) })
           }
         ) })
       ] })
     }
-  ) : /* @__PURE__ */ e(_, { children: l });
+  ) : /* @__PURE__ */ e(w, { children: l });
 };
 export {
-  ot as Tooltip,
-  rt as TooltipGroupProvider
+  nt as Tooltip,
+  ot as TooltipGroupProvider
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -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 { motion } from \"@telegraph/motion\";\nimport { Text } from \"@telegraph/typography\";\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\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,\n                          scale: 0.5,\n                          ...deriveAnimationBasedOnSide(side),\n                        }\n                      : {}\n                  }\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    x: 0,\n                    y: 0,\n                  }}\n                  transition={{\n                    duration: 100,\n                    type: \"spring\",\n                  }}\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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"}
+{"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 { motion } from \"@telegraph/motion\";\nimport { Text } from \"@telegraph/typography\";\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  skipAnimation?: TgphComponentProps<typeof motion.div>[\"skipAnimation\"];\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  skipAnimation,\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\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                  skipAnimation={skipAnimation}\n                  initial={\n                    shouldAnimate\n                      ? {\n                          opacity: 0,\n                          scale: 0.5,\n                          ...deriveAnimationBasedOnSide(side),\n                        }\n                      : {}\n                  }\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    x: 0,\n                    y: 0,\n                  }}\n                  transition={{\n                    duration: 100,\n                    type: \"spring\",\n                  }}\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","skipAnimation","label","labelProps","enabled","appearance","setOpen","useControllableState","areAnyChildrenElementsDisabled","child","derivedDelayDuration","shouldAnimate","deriveAnimationBasedOnSide","RadixTooltip","RefToTgphRef","OverrideAppearance","Stack","motion","Text"],"mappings":"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"}

package/dist/types/Tooltip/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import { OverrideAppearance } from '@telegraph/appearance';
 import { TgphComponentProps, TgphElement } from '@telegraph/helpers';
 import { Stack } from '@telegraph/layout';
+import { motion } from '@telegraph/motion';
 import { default as React } from 'react';
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 type TooltipBaseProps<T extends TgphElement> = {
@@ -8,8 +9,9 @@ type TooltipBaseProps<T extends TgphElement> = {
     labelProps?: TgphComponentProps<typeof Stack<T>>;
     enabled?: boolean;
     appearance?: TgphComponentProps<typeof OverrideAppearance>["appearance"];
+    skipAnimation?: TgphComponentProps<typeof motion.div>["skipAnimation"];
 };
 type TooltipProps<T extends TgphElement> = React.ComponentPropsWithoutRef<typeof RadixTooltip.Root> & React.ComponentPropsWithoutRef<typeof RadixTooltip.Provider> & React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> & TooltipBaseProps<T>;
-declare const Tooltip: <T extends TgphElement>({ delayDuration, skipDelayDuration, disableHoverableContent, defaultOpen: defaultOpenProp, open: openProp, onOpenChange: onOpenChangeProp, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, forceMount, side, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, collisionPadding, arrowPadding, sticky, hideWhenDetached, label, labelProps, enabled, appearance, children, }: TooltipProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: <T extends TgphElement>({ delayDuration, skipDelayDuration, disableHoverableContent, defaultOpen: defaultOpenProp, open: openProp, onOpenChange: onOpenChangeProp, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, forceMount, side, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, collisionPadding, arrowPadding, sticky, hideWhenDetached, skipAnimation, label, labelProps, enabled, appearance, children, }: TooltipProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/types/Tooltip/Tooltip.d.ts.map

@@ -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,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,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;AAK1B,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;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,kBAAkB,CAAC,CAAC,YAAY,CAAC,CAAC;CAC1E,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,GAAI,CAAC,SAAS,WAAW,kZA+BnC,YAAY,CAAC,CAAC,CAAC,4CAiIjB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,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;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,kBAAkB,CAAC,CAAC,YAAY,CAAC,CAAC;IACzE,aAAa,CAAC,EAAE,kBAAkB,CAAC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC;CACxE,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,GAAI,CAAC,SAAS,WAAW,iaAgCnC,YAAY,CAAC,CAAC,CAAC,4CAkIjB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/tooltip",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "A simple tooltip component ",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tooltip",
   "author": "@knocklabs",
@@ -37,7 +37,7 @@
     "@telegraph/appearance": "^0.0.8",
     "@telegraph/helpers": "^0.0.12",
     "@telegraph/layout": "^0.1.16",
-    "@telegraph/motion": "^0.0.7",
+    "@telegraph/motion": "^0.0.8",
     "@telegraph/typography": "^0.1.16"
   },
   "devDependencies": {