npm - @tamagui/tooltip - Versions diffs - 1.88.13 → 1.89.0-1706308641099 - Mend

@tamagui/tooltip 1.88.13 → 1.89.0-1706308641099

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 (8) hide show

package/LICENSE +21 -0
package/dist/esm/Tooltip.mjs +168 -0
package/dist/esm/TooltipSimple.mjs +79 -0
package/dist/esm/index.mjs +2 -0
package/dist/jsx/Tooltip.mjs +168 -0
package/dist/jsx/TooltipSimple.mjs +79 -0
package/dist/jsx/index.mjs +2 -0
package/package.json +14 -14

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+  Copyright (c) 2020 Nate Wienert
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/esm/Tooltip.mjs ADDED Viewed

@@ -0,0 +1,168 @@
+import "@tamagui/polyfill-dev";
+import { FloatingDelayGroup, useDelayGroup, useDelayGroupContext, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { useEvent } from "@tamagui/core";
+import { FloatingOverrideContext } from "@tamagui/floating";
+import { getSize } from "@tamagui/get-token";
+import { withStaticProperties } from "@tamagui/helpers";
+import { PopoverAnchor, PopoverArrow, PopoverContent, PopoverContext, PopoverTrigger } from "@tamagui/popover";
+import { Popper, PopperContentFrame, usePopperContext } from "@tamagui/popper";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+const TOOLTIP_SCOPE = "tooltip",
+  TooltipContent = PopperContentFrame.extractable(React.forwardRef(({
+    __scopeTooltip,
+    ...props
+  }, ref) => {
+    const popper = usePopperContext(__scopeTooltip || TOOLTIP_SCOPE),
+      padding = props.padding ?? props.size ?? popper.size ?? getSize("$true", {
+        shift: -2
+      });
+    return /* @__PURE__ */jsx(PopoverContent, {
+      __scopePopover: __scopeTooltip || TOOLTIP_SCOPE,
+      componentName: "Tooltip",
+      disableRemoveScroll: !0,
+      disableFocusScope: !0,
+      ...(!props.unstyled && {
+        padding
+      }),
+      ref,
+      ...props
+    });
+  })),
+  TooltipArrow = React.forwardRef((props, ref) => {
+    const {
+      __scopeTooltip,
+      ...rest
+    } = props;
+    return /* @__PURE__ */jsx(PopoverArrow, {
+      __scopePopper: __scopeTooltip || TOOLTIP_SCOPE,
+      componentName: "Tooltip",
+      ref,
+      ...rest
+    });
+  }),
+  TooltipGroup = ({
+    children,
+    delay
+  }) => /* @__PURE__ */jsx(FloatingDelayGroup, {
+    delay: React.useMemo(() => delay, [JSON.stringify(delay)]),
+    children
+  }),
+  TooltipComponent = React.forwardRef(function (props, ref) {
+    const {
+        children,
+        delay: delayProp,
+        restMs = typeof delayProp > "u" ? 500 : typeof delayProp == "number" ? delayProp : 0,
+        onOpenChange: onOpenChangeProp,
+        focus,
+        open: openProp,
+        __scopeTooltip,
+        ...restProps
+      } = props,
+      triggerRef = React.useRef(null),
+      [hasCustomAnchor, setHasCustomAnchor] = React.useState(!1),
+      {
+        delay: delayGroup,
+        setCurrentId
+      } = useDelayGroupContext(),
+      delay = delayProp ?? delayGroup,
+      [open, setOpen] = useControllableState({
+        prop: openProp,
+        defaultProp: !1,
+        onChange: onOpenChangeProp
+      }),
+      id = props.groupId,
+      onOpenChange = useEvent(open2 => {
+        open2 && setCurrentId(id), setOpen(open2);
+      }),
+      useFloatingFn = props2 => {
+        const floating = useFloating({
+            ...props2,
+            open,
+            onOpenChange
+          }),
+          {
+            getReferenceProps,
+            getFloatingProps
+          } = useInteractions([useHover(floating.context, {
+            delay,
+            restMs
+          }), useFocus(floating.context, focus), useRole(floating.context, {
+            role: "tooltip"
+          }), useDismiss(floating.context), useDelayGroup(floating.context, {
+            id
+          })]);
+        return {
+          ...floating,
+          open,
+          getReferenceProps,
+          getFloatingProps
+        };
+      },
+      useFloatingContext = React.useCallback(useFloatingFn, [id, delay, open, restMs, focus ? JSON.stringify(focus) : 0]),
+      onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(!0), []),
+      onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(!1), []),
+      contentId = React.useId(),
+      smallerSize = props.unstyled ? null : getSize("$true", {
+        shift: -2,
+        bounds: [0]
+      });
+    return (
+      // TODO: FloatingOverrideContext might also need to be scoped
+      /* @__PURE__ */
+      jsx(FloatingOverrideContext.Provider, {
+        value: useFloatingContext,
+        children: /* @__PURE__ */jsx(Popper, {
+          __scopePopper: __scopeTooltip || TOOLTIP_SCOPE,
+          size: smallerSize?.key,
+          allowFlip: !0,
+          stayInFrame: !0,
+          ...restProps,
+          children: /* @__PURE__ */jsx(PopoverContext.Provider, {
+            contentId,
+            triggerRef,
+            sheetBreakpoint: !1,
+            open,
+            scope: __scopeTooltip || TOOLTIP_SCOPE,
+            onOpenChange: setOpen,
+            onOpenToggle: voidFn,
+            hasCustomAnchor,
+            onCustomAnchorAdd,
+            onCustomAnchorRemove,
+            children
+          })
+        })
+      })
+    );
+  }),
+  TooltipTrigger = React.forwardRef(function (props, ref) {
+    const {
+      __scopeTooltip,
+      ...rest
+    } = props;
+    return /* @__PURE__ */jsx(PopoverTrigger, {
+      ...rest,
+      __scopePopover: __scopeTooltip || TOOLTIP_SCOPE,
+      ref
+    });
+  }),
+  TooltipAnchor = React.forwardRef(function (props, ref) {
+    const {
+      __scopeTooltip,
+      ...rest
+    } = props;
+    return /* @__PURE__ */jsx(PopoverAnchor, {
+      ...rest,
+      __scopePopover: __scopeTooltip || TOOLTIP_SCOPE,
+      ref
+    });
+  }),
+  Tooltip2 = withStaticProperties(TooltipComponent, {
+    Anchor: TooltipAnchor,
+    Arrow: TooltipArrow,
+    Content: TooltipContent,
+    Trigger: TooltipTrigger
+  }),
+  voidFn = () => {};
+export { Tooltip2 as Tooltip, TooltipGroup };

package/dist/esm/TooltipSimple.mjs ADDED Viewed

@@ -0,0 +1,79 @@
+import { useDelayGroupContext } from "@floating-ui/react";
+import { getSpace } from "@tamagui/get-token";
+import { Paragraph } from "@tamagui/text";
+import * as React from "react";
+import { Tooltip, TooltipGroup } from "./Tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const TooltipSimple = React.forwardRef(({
+    label,
+    children,
+    contentProps,
+    disabled,
+    ...tooltipProps
+  }, ref) => {
+    let context;
+    try {
+      context = useDelayGroupContext();
+    } catch {}
+    const child = React.Children.only(children),
+      contents = /* @__PURE__ */jsxs(Tooltip, {
+        offset: 15,
+        restMs: 40,
+        delay: 40,
+        ...tooltipProps,
+        ...(disabled ? {
+          open: !1
+        } : null),
+        children: [/* @__PURE__ */jsx(Tooltip.Trigger, {
+          ...(typeof label == "string" && {
+            "aria-label": label
+          }),
+          asChild: "except-style",
+          children: ref && React.isValidElement(child) ? React.cloneElement(child, {
+            ref
+          }) : child
+        }), /* @__PURE__ */jsxs(Tooltip.Content, {
+          zIndex: 1e9,
+          enterStyle: {
+            x: 0,
+            y: -8,
+            opacity: 0,
+            scale: 0.93
+          },
+          exitStyle: {
+            x: 0,
+            y: -8,
+            opacity: 0,
+            scale: 0.93
+          },
+          x: 0,
+          scale: 1,
+          y: 0,
+          elevation: "$1",
+          opacity: 1,
+          paddingVertical: getSpace(tooltipProps.size || "$true", {
+            shift: -4
+          }),
+          animateOnly: ["transform", "opacity"],
+          animation: ["quicker", {
+            opacity: {
+              overshootClamping: !0
+            }
+          }],
+          ...contentProps,
+          children: [/* @__PURE__ */jsx(Tooltip.Arrow, {}), /* @__PURE__ */jsx(Paragraph, {
+            size: "$3",
+            children: label
+          })]
+        })]
+      });
+    return context ? contents : /* @__PURE__ */jsx(TooltipGroup, {
+      delay: defaultTooltipDelay,
+      children: contents
+    });
+  }),
+  defaultTooltipDelay = {
+    open: 3e3,
+    close: 100
+  };
+export { TooltipSimple };

package/dist/esm/index.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./Tooltip.mjs";
2	+ export * from "./TooltipSimple.mjs";

package/dist/jsx/Tooltip.mjs ADDED Viewed

@@ -0,0 +1,168 @@
+import "@tamagui/polyfill-dev";
+import { FloatingDelayGroup, useDelayGroup, useDelayGroupContext, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { useEvent } from "@tamagui/core";
+import { FloatingOverrideContext } from "@tamagui/floating";
+import { getSize } from "@tamagui/get-token";
+import { withStaticProperties } from "@tamagui/helpers";
+import { PopoverAnchor, PopoverArrow, PopoverContent, PopoverContext, PopoverTrigger } from "@tamagui/popover";
+import { Popper, PopperContentFrame, usePopperContext } from "@tamagui/popper";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+const TOOLTIP_SCOPE = "tooltip",
+  TooltipContent = PopperContentFrame.extractable(React.forwardRef(({
+    __scopeTooltip,
+    ...props
+  }, ref) => {
+    const popper = usePopperContext(__scopeTooltip || TOOLTIP_SCOPE),
+      padding = props.padding ?? props.size ?? popper.size ?? getSize("$true", {
+        shift: -2
+      });
+    return /* @__PURE__ */jsx(PopoverContent, {
+      __scopePopover: __scopeTooltip || TOOLTIP_SCOPE,
+      componentName: "Tooltip",
+      disableRemoveScroll: !0,
+      disableFocusScope: !0,
+      ...(!props.unstyled && {
+        padding
+      }),
+      ref,
+      ...props
+    });
+  })),
+  TooltipArrow = React.forwardRef((props, ref) => {
+    const {
+      __scopeTooltip,
+      ...rest
+    } = props;
+    return /* @__PURE__ */jsx(PopoverArrow, {
+      __scopePopper: __scopeTooltip || TOOLTIP_SCOPE,
+      componentName: "Tooltip",
+      ref,
+      ...rest
+    });
+  }),
+  TooltipGroup = ({
+    children,
+    delay
+  }) => /* @__PURE__ */jsx(FloatingDelayGroup, {
+    delay: React.useMemo(() => delay, [JSON.stringify(delay)]),
+    children
+  }),
+  TooltipComponent = React.forwardRef(function (props, ref) {
+    const {
+        children,
+        delay: delayProp,
+        restMs = typeof delayProp > "u" ? 500 : typeof delayProp == "number" ? delayProp : 0,
+        onOpenChange: onOpenChangeProp,
+        focus,
+        open: openProp,
+        __scopeTooltip,
+        ...restProps
+      } = props,
+      triggerRef = React.useRef(null),
+      [hasCustomAnchor, setHasCustomAnchor] = React.useState(!1),
+      {
+        delay: delayGroup,
+        setCurrentId
+      } = useDelayGroupContext(),
+      delay = delayProp ?? delayGroup,
+      [open, setOpen] = useControllableState({
+        prop: openProp,
+        defaultProp: !1,
+        onChange: onOpenChangeProp
+      }),
+      id = props.groupId,
+      onOpenChange = useEvent(open2 => {
+        open2 && setCurrentId(id), setOpen(open2);
+      }),
+      useFloatingFn = props2 => {
+        const floating = useFloating({
+            ...props2,
+            open,
+            onOpenChange
+          }),
+          {
+            getReferenceProps,
+            getFloatingProps
+          } = useInteractions([useHover(floating.context, {
+            delay,
+            restMs
+          }), useFocus(floating.context, focus), useRole(floating.context, {
+            role: "tooltip"
+          }), useDismiss(floating.context), useDelayGroup(floating.context, {
+            id
+          })]);
+        return {
+          ...floating,
+          open,
+          getReferenceProps,
+          getFloatingProps
+        };
+      },
+      useFloatingContext = React.useCallback(useFloatingFn, [id, delay, open, restMs, focus ? JSON.stringify(focus) : 0]),
+      onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(!0), []),
+      onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(!1), []),
+      contentId = React.useId(),
+      smallerSize = props.unstyled ? null : getSize("$true", {
+        shift: -2,
+        bounds: [0]
+      });
+    return (
+      // TODO: FloatingOverrideContext might also need to be scoped
+      /* @__PURE__ */
+      jsx(FloatingOverrideContext.Provider, {
+        value: useFloatingContext,
+        children: /* @__PURE__ */jsx(Popper, {
+          __scopePopper: __scopeTooltip || TOOLTIP_SCOPE,
+          size: smallerSize?.key,
+          allowFlip: !0,
+          stayInFrame: !0,
+          ...restProps,
+          children: /* @__PURE__ */jsx(PopoverContext.Provider, {
+            contentId,
+            triggerRef,
+            sheetBreakpoint: !1,
+            open,
+            scope: __scopeTooltip || TOOLTIP_SCOPE,
+            onOpenChange: setOpen,
+            onOpenToggle: voidFn,
+            hasCustomAnchor,
+            onCustomAnchorAdd,
+            onCustomAnchorRemove,
+            children
+          })
+        })
+      })
+    );
+  }),
+  TooltipTrigger = React.forwardRef(function (props, ref) {
+    const {
+      __scopeTooltip,
+      ...rest
+    } = props;
+    return /* @__PURE__ */jsx(PopoverTrigger, {
+      ...rest,
+      __scopePopover: __scopeTooltip || TOOLTIP_SCOPE,
+      ref
+    });
+  }),
+  TooltipAnchor = React.forwardRef(function (props, ref) {
+    const {
+      __scopeTooltip,
+      ...rest
+    } = props;
+    return /* @__PURE__ */jsx(PopoverAnchor, {
+      ...rest,
+      __scopePopover: __scopeTooltip || TOOLTIP_SCOPE,
+      ref
+    });
+  }),
+  Tooltip2 = withStaticProperties(TooltipComponent, {
+    Anchor: TooltipAnchor,
+    Arrow: TooltipArrow,
+    Content: TooltipContent,
+    Trigger: TooltipTrigger
+  }),
+  voidFn = () => {};
+export { Tooltip2 as Tooltip, TooltipGroup };

package/dist/jsx/TooltipSimple.mjs ADDED Viewed

@@ -0,0 +1,79 @@
+import { useDelayGroupContext } from "@floating-ui/react";
+import { getSpace } from "@tamagui/get-token";
+import { Paragraph } from "@tamagui/text";
+import * as React from "react";
+import { Tooltip, TooltipGroup } from "./Tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const TooltipSimple = React.forwardRef(({
+    label,
+    children,
+    contentProps,
+    disabled,
+    ...tooltipProps
+  }, ref) => {
+    let context;
+    try {
+      context = useDelayGroupContext();
+    } catch {}
+    const child = React.Children.only(children),
+      contents = /* @__PURE__ */jsxs(Tooltip, {
+        offset: 15,
+        restMs: 40,
+        delay: 40,
+        ...tooltipProps,
+        ...(disabled ? {
+          open: !1
+        } : null),
+        children: [/* @__PURE__ */jsx(Tooltip.Trigger, {
+          ...(typeof label == "string" && {
+            "aria-label": label
+          }),
+          asChild: "except-style",
+          children: ref && React.isValidElement(child) ? React.cloneElement(child, {
+            ref
+          }) : child
+        }), /* @__PURE__ */jsxs(Tooltip.Content, {
+          zIndex: 1e9,
+          enterStyle: {
+            x: 0,
+            y: -8,
+            opacity: 0,
+            scale: 0.93
+          },
+          exitStyle: {
+            x: 0,
+            y: -8,
+            opacity: 0,
+            scale: 0.93
+          },
+          x: 0,
+          scale: 1,
+          y: 0,
+          elevation: "$1",
+          opacity: 1,
+          paddingVertical: getSpace(tooltipProps.size || "$true", {
+            shift: -4
+          }),
+          animateOnly: ["transform", "opacity"],
+          animation: ["quicker", {
+            opacity: {
+              overshootClamping: !0
+            }
+          }],
+          ...contentProps,
+          children: [/* @__PURE__ */jsx(Tooltip.Arrow, {}), /* @__PURE__ */jsx(Paragraph, {
+            size: "$3",
+            children: label
+          })]
+        })]
+      });
+    return context ? contents : /* @__PURE__ */jsx(TooltipGroup, {
+      delay: defaultTooltipDelay,
+      children: contents
+    });
+  }),
+  defaultTooltipDelay = {
+    open: 3e3,
+    close: 100
+  };
+export { TooltipSimple };

package/dist/jsx/index.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./Tooltip.mjs";
2	+ export * from "./TooltipSimple.mjs";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/tooltip",
-  "version": "1.88.13",
+  "version": "1.89.0-1706308641099",
   "sideEffects": [
     "*.css"
   ],
@@ -33,25 +33,25 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.6",
-    "@tamagui/compose-refs": "1.88.13",
-    "@tamagui/core": "1.88.13",
-    "@tamagui/create-context": "1.88.13",
-    "@tamagui/floating": "1.88.13",
-    "@tamagui/get-token": "1.88.13",
-    "@tamagui/helpers": "1.88.13",
-    "@tamagui/polyfill-dev": "1.88.13",
-    "@tamagui/popover": "1.88.13",
-    "@tamagui/popper": "1.88.13",
-    "@tamagui/stacks": "1.88.13",
-    "@tamagui/text": "1.88.13",
-    "@tamagui/use-controllable-state": "1.88.13"
+    "@tamagui/compose-refs": "1.89.0-1706308641099",
+    "@tamagui/core": "1.89.0-1706308641099",
+    "@tamagui/create-context": "1.89.0-1706308641099",
+    "@tamagui/floating": "1.89.0-1706308641099",
+    "@tamagui/get-token": "1.89.0-1706308641099",
+    "@tamagui/helpers": "1.89.0-1706308641099",
+    "@tamagui/polyfill-dev": "1.89.0-1706308641099",
+    "@tamagui/popover": "1.89.0-1706308641099",
+    "@tamagui/popper": "1.89.0-1706308641099",
+    "@tamagui/stacks": "1.89.0-1706308641099",
+    "@tamagui/text": "1.89.0-1706308641099",
+    "@tamagui/use-controllable-state": "1.89.0-1706308641099"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.88.13",
+    "@tamagui/build": "1.89.0-1706308641099",
     "react": "^18.2.0",
     "react-native": "^0.72.6"
   },