@pushwoosh/dumb-components 1.1.154 → 1.1.156

package/Tooltip/Tooltip.d.ts

@@ -2,9 +2,11 @@ import { type ReactElement } from 'react';
 import type { TooltipProps } from './types';
 /**
  * Wraps an element and shows a contextual tooltip on hover/focus, with configurable
- * position and width. Use {@link TooltipTrigger} for a standalone help icon.
+ * position and width. Positioning is handled by floating-ui, so the tooltip flips to a
+ * fallback placement when the requested one would overflow the viewport. Use
+ * {@link TooltipTrigger} for a standalone help icon.
  *
  * @example
  * <Tooltip content="Copy to clipboard" position="top-middle"><IconButton /></Tooltip>
  */
-export declare function Tooltip({ position, arrowOffset, offset, maxWidth, zIndex, isDisabled, isVisible, ...rest }: TooltipProps): ReactElement;
+export declare function Tooltip({ content, position, offset, arrowOffset, maxWidth, zIndex, isDisabled, isVisible, reference, children, }: TooltipProps): ReactElement;

package/Tooltip/Tooltip.js

@@ -1,53 +1,98 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TooltipPositionToArrowOffsetMap, TooltipPositionToTippyOffsetMap, TooltipPositionToTippyPlacementMap } from './maps';
-import { TooltipBox } from './styles';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { assignRef } from '../helpers';
+import { DEFAULT_MAX_WIDTH } from './constants';
+import { Arrow, TooltipBox } from './styles';
+import { useTooltipPosition } from './useTooltipPosition';
 /**
  * Wraps an element and shows a contextual tooltip on hover/focus, with configurable
- * position and width. Use {@link TooltipTrigger} for a standalone help icon.
+ * position and width. Positioning is handled by floating-ui, so the tooltip flips to a
+ * fallback placement when the requested one would overflow the viewport. Use
+ * {@link TooltipTrigger} for a standalone help icon.
  *
  * @example
  * <Tooltip content="Copy to clipboard" position="top-middle"><IconButton /></Tooltip>
  */
 export function Tooltip({
+  content,
   position = 'top-start',
-  arrowOffset = TooltipPositionToArrowOffsetMap[position],
-  offset = TooltipPositionToTippyOffsetMap[position],
-  maxWidth = 240,
+  offset,
+  arrowOffset,
+  maxWidth = DEFAULT_MAX_WIDTH,
   zIndex = 999999,
   isDisabled,
   isVisible,
-  ...rest
+  reference,
+  children
 }) {
-  return _jsx(TooltipBox, {
-    animation: false,
-    delay: 0,
-    duration: 0,
-    disabled: isDisabled,
-    maxWidth: maxWidth,
-    zIndex: zIndex,
-    placement: TooltipPositionToTippyPlacementMap[position],
-    visible: isVisible,
-    "$position": position,
-    "$arrowOffset": arrowOffset,
-    popperOptions: {
-      strategy: 'fixed',
-      modifiers: [{
-        name: 'offset',
-        options: {
-          offset
-        }
-      }, {
-        name: 'flip',
-        options: {
-          fallbackPlacements: []
-        }
-      }, {
-        name: 'preventOverflow',
-        options: {
-          mainAxis: false
-        }
-      }]
-    },
-    ...rest
+  const isControlled = isVisible !== undefined;
+  const [isHovered, setIsHovered] = useState(false);
+  const [referenceEl, setReferenceEl] = useState(null);
+  const isOpen = !isDisabled && (isControlled ? Boolean(isVisible) : isHovered);
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    arrowRef,
+    arrowStyles
+  } = useTooltipPosition({
+    position,
+    offset,
+    arrowOffset,
+    isOpen
+  });
+  const {
+    setReference
+  } = refs;
+  const originalRef = isValidElement(children) ? children.ref : undefined;
+  const setChildRef = useCallback(node => {
+    setReferenceEl(node);
+    assignRef(originalRef, node);
+  }, [originalRef]);
+  const externalReferenceEl = (reference === null || reference === void 0 ? void 0 : reference.current) ?? null;
+  useEffect(() => {
+    if (reference) {
+      setReferenceEl(externalReferenceEl);
+    }
+  }, [reference, externalReferenceEl]);
+  useEffect(() => {
+    setReference(referenceEl);
+  }, [referenceEl, setReference]);
+  useEffect(() => {
+    if (isControlled || !referenceEl) {
+      return undefined;
+    }
+    const show = () => setIsHovered(true);
+    const hide = () => setIsHovered(false);
+    referenceEl.addEventListener('mouseenter', show);
+    referenceEl.addEventListener('mouseleave', hide);
+    referenceEl.addEventListener('focusin', show);
+    referenceEl.addEventListener('focusout', hide);
+    return () => {
+      referenceEl.removeEventListener('mouseenter', show);
+      referenceEl.removeEventListener('mouseleave', hide);
+      referenceEl.removeEventListener('focusin', show);
+      referenceEl.removeEventListener('focusout', hide);
+    };
+  }, [referenceEl, isControlled]);
+  const cloneWithRef = cloneElement;
+  const anchor = children && isValidElement(children) && !reference ? cloneWithRef(children, {
+    ref: setChildRef
+  }) : children ?? null;
+  return _jsxs(_Fragment, {
+    children: [anchor, isOpen && referenceEl && createPortal(_jsxs(TooltipBox, {
+      ref: refs.setFloating,
+      style: {
+        ...floatingStyles,
+        zIndex
+      },
+      "$maxWidth": maxWidth,
+      "data-placement": placement,
+      children: [content, _jsx(Arrow, {
+        ref: arrowRef,
+        style: arrowStyles
+      })]
+    }), document.body)]
   });
 }

package/Tooltip/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_MAX_WIDTH = 240;
+export declare const DEFAULT_ARROW_PADDING = 12;

package/Tooltip/constants.js

@@ -0,0 +1,2 @@
+export const DEFAULT_MAX_WIDTH = 240;
+export const DEFAULT_ARROW_PADDING = 12;

package/Tooltip/maps.d.ts

@@ -1,41 +1,10 @@
+import type { Placement } from '@floating-ui/react-dom';
 import type { FC } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { type TooltipTriggerView } from './TooltipTrigger';
 import type { TooltipPosition } from './types';
-export declare const TooltipPositionToTippyPlacementMap: {
-    'top-start': "top-start";
-    'top-middle': "top";
-    'top-end': "top-end";
-    'right-start': "right-start";
-    'right-middle': "right";
-    'right-end': "right-end";
-    'bottom-start': "bottom-start";
-    'bottom-middle': "bottom";
-    'bottom-end': "bottom-end";
-    'left-start': "left-start";
-    'left-middle': "left";
-    'left-end': "left-end";
-};
-export declare const TooltipPositionToTippyOffsetMap: Record<TooltipPosition, [number, number]>;
-export declare const TooltipPositionToArrowOffsetMap: {
-    'top-start': string;
-    'top-middle': string;
-    'top-end': string;
-    'right-start': string;
-    'right-middle': string;
-    'right-end': string;
-    'bottom-start': string;
-    'bottom-middle': string;
-    'bottom-end': string;
-    'left-start': string;
-    'left-middle': string;
-    'left-end': string;
-};
-export declare function getTransform(position: TooltipPosition): "none" | "translateX(-50%) translateY(50%) rotate(45deg);" | "translateX(50%) translateY(50%) rotate(45deg);" | "translateX(-50%) translateY(-50%) rotate(45deg);" | "translateX(50%) translateY(-50%) rotate(45deg);";
-export declare function getTopPosition(position: TooltipPosition, offset: string): string;
-export declare function getRightPosition(position: TooltipPosition, offset: string): string;
-export declare function getBottomPosition(position: TooltipPosition, offset: string): string;
-export declare function getLeftPosition(position: TooltipPosition, offset: string): string;
+export declare const TooltipPositionToFloatingPlacementMap: Record<TooltipPosition, Placement>;
+export declare const TooltipPositionToOffsetMap: Record<TooltipPosition, [number, number]>;
 export declare const TooltipTriggerViewMap: Record<TooltipTriggerView, {
     color: Color;
     hoverColor: Color;

package/Tooltip/maps.js

@@ -1,6 +1,6 @@
 import { Color } from '@pushwoosh/kit-constants';
 import { DangerTriangleIcon, HelpRoundIcon, InfoRoundIcon, WarningRoundIcon } from '@pushwoosh/kit-icons';
-export const TooltipPositionToTippyPlacementMap = {
+export const TooltipPositionToFloatingPlacementMap = {
   'top-start': 'top-start',
   'top-middle': 'top',
   'top-end': 'top-end',
@@ -14,7 +14,7 @@ export const TooltipPositionToTippyPlacementMap = {
   'left-middle': 'left',
   'left-end': 'left-end'
 };
-export const TooltipPositionToTippyOffsetMap = {
+export const TooltipPositionToOffsetMap = {
   'top-start': [-6, 8],
   'top-middle': [0, 8],
   'top-end': [6, 8],
@@ -28,139 +28,6 @@ export const TooltipPositionToTippyOffsetMap = {
   'left-middle': [0, 8],
   'left-end': [6, 8]
 };
-export const TooltipPositionToArrowOffsetMap = {
-  'top-start': '24px',
-  'top-middle': '50%',
-  'top-end': '24px',
-  'right-start': '24px',
-  'right-middle': '50%',
-  'right-end': '24px',
-  'bottom-start': '24px',
-  'bottom-middle': '50%',
-  'bottom-end': '24px',
-  'left-start': '24px',
-  'left-middle': '50%',
-  'left-end': '24px'
-};
-export function getTransform(position) {
-  switch (position) {
-    case 'top-start':
-      return 'translateX(-50%) translateY(50%) rotate(45deg);';
-    case 'top-middle':
-      return 'translateX(-50%) translateY(50%) rotate(45deg);';
-    case 'top-end':
-      return 'translateX(50%) translateY(50%) rotate(45deg);';
-    case 'right-start':
-      return 'translateX(-50%) translateY(-50%) rotate(45deg);';
-    case 'right-middle':
-      return 'translateX(-50%) translateY(-50%) rotate(45deg);';
-    case 'right-end':
-      return 'translateX(-50%) translateY(50%) rotate(45deg);';
-    case 'bottom-start':
-      return 'translateX(-50%) translateY(-50%) rotate(45deg);';
-    case 'bottom-middle':
-      return 'translateX(-50%) translateY(-50%) rotate(45deg);';
-    case 'bottom-end':
-      return 'translateX(50%) translateY(-50%) rotate(45deg);';
-    case 'left-start':
-      return 'translateX(50%) translateY(-50%) rotate(45deg);';
-    case 'left-middle':
-      return 'translateX(50%) translateY(-50%) rotate(45deg);';
-    case 'left-end':
-      return 'translateX(50%) translateY(50%) rotate(45deg);';
-    default:
-      console.error(`[Tooltip]: unknown position: ${position}!`);
-      return 'none';
-  }
-}
-export function getTopPosition(position, offset) {
-  switch (position) {
-    case 'top-start':
-    case 'top-middle':
-    case 'top-end':
-    case 'right-end':
-    case 'left-end':
-      return 'auto';
-    case 'right-start':
-    case 'right-middle':
-    case 'left-start':
-    case 'left-middle':
-      return offset;
-    case 'bottom-start':
-    case 'bottom-middle':
-    case 'bottom-end':
-      return '0';
-    default:
-      console.error(`[Tooltip]: unknown position: ${position}!`);
-      return 'auto';
-  }
-}
-export function getRightPosition(position, offset) {
-  switch (position) {
-    case 'top-start':
-    case 'top-middle':
-    case 'right-start':
-    case 'right-middle':
-    case 'right-end':
-    case 'bottom-start':
-    case 'bottom-middle':
-      return 'auto';
-    case 'top-end':
-    case 'bottom-end':
-      return offset;
-    case 'left-end':
-    case 'left-start':
-    case 'left-middle':
-      return '0';
-    default:
-      console.error(`[Tooltip]: unknown position: ${position}!`);
-      return 'auto';
-  }
-}
-export function getBottomPosition(position, offset) {
-  switch (position) {
-    case 'top-start':
-    case 'top-middle':
-    case 'top-end':
-      return '0';
-    case 'right-end':
-    case 'left-end':
-      return offset;
-    case 'bottom-start':
-    case 'bottom-middle':
-    case 'bottom-end':
-    case 'right-start':
-    case 'right-middle':
-    case 'left-start':
-    case 'left-middle':
-      return 'auto';
-    default:
-      console.error(`[Tooltip]: unknown position: ${position}!`);
-      return 'auto';
-  }
-}
-export function getLeftPosition(position, offset) {
-  switch (position) {
-    case 'top-start':
-    case 'top-middle':
-    case 'bottom-start':
-    case 'bottom-middle':
-      return offset;
-    case 'top-end':
-    case 'bottom-end':
-    case 'left-end':
-    case 'left-start':
-    case 'left-middle':
-      return 'auto';
-    case 'right-start':
-    case 'right-end':
-    case 'right-middle':
-      return '0';
-    default:
-      console.error(`[Tooltip]: unknown position: ${position}!`);
-      return 'auto';
-  }
-}
 export const TooltipTriggerViewMap = {
   info: {
     color: Color.LOCKED,

package/Tooltip/styles.d.ts

@@ -1,9 +1,8 @@
 import { Color } from '@pushwoosh/kit-constants';
-import type { TooltipPosition } from './types';
-export declare const TooltipBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@tippyjs/react").TippyProps>, any, {
-    $arrowOffset: string;
-    $position: TooltipPosition;
+export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, {
+    $maxWidth?: number | "none";
 }, never>;
+export declare const Arrow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HelpIconWrapper: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;

package/Tooltip/styles.js

@@ -1,29 +1,20 @@
-import Tippy from '@tippyjs/react';
 import styled from 'styled-components';
 import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
-import { getBottomPosition, getLeftPosition, getRightPosition, getTopPosition, getTransform } from './maps';
-export const TooltipBox = styled(Tippy).withConfig({
+import { DEFAULT_MAX_WIDTH } from './constants';
+export const TooltipBox = styled.div.withConfig({
   displayName: "TooltipBox",
   componentId: "sc-1hariht-0"
-})(["&::after{content:\"\";position:absolute;top:", ";right:", ";bottom:", ";left:", ";width:10px;height:10px;margin:auto;border-radius:2px;background-color:", ";transform:", ";}&.tippy-box{position:static;display:block;padding:12px;color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;transition:none;}.tippy-content{position:static;padding:0;z-index:auto;}.tippy-arrow{display:none;}"], ({
-  $position,
-  $arrowOffset
-}) => getTopPosition($position, $arrowOffset), ({
-  $position,
-  $arrowOffset
-}) => getRightPosition($position, $arrowOffset), ({
-  $position,
-  $arrowOffset
-}) => getBottomPosition($position, $arrowOffset), ({
-  $position,
-  $arrowOffset
-}) => getLeftPosition($position, $arrowOffset), Color.MAIN, ({
-  $position
-}) => getTransform($position), Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR);
+})(["padding:12px;color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;pointer-events:none;max-width:", ";"], Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR, ({
+  $maxWidth
+}) => $maxWidth === 'none' ? 'min(var(--pw-page-max-width, 100vw), calc(100vw - 16px))' : `min(${$maxWidth ?? DEFAULT_MAX_WIDTH}px, var(--pw-page-max-width, 100vw), calc(100vw - 16px))`);
+export const Arrow = styled.div.withConfig({
+  displayName: "Arrow",
+  componentId: "sc-1hariht-1"
+})(["position:absolute;width:10px;height:10px;border-radius:2px;background-color:", ";transform:rotate(45deg);"], Color.MAIN);
 export const HelpIconWrapper = styled(Horizontal).withConfig({
   displayName: "HelpIconWrapper",
-  componentId: "sc-1hariht-1"
+  componentId: "sc-1hariht-2"
 })(["color:", ";", ""], ({
   $color
 }) => $color, ({

package/Tooltip/types.d.ts

@@ -7,9 +7,9 @@ export type TooltipProps = {
     readonly content: ReactNode;
     /** Placement relative to the anchor (default `top-start`). */
     readonly position?: TooltipPosition;
-    /** Tippy `[skidding, distance]` offset; defaults per position. */
+    /** `[skidding, distance]` offset from the anchor; defaults per position. */
     readonly offset?: [number, number];
-    /** CSS offset of the arrow along its edge. */
+    /** Min gap (px) the arrow keeps from the tooltip corners; arrow points at the anchor (default `12`). */
     readonly arrowOffset?: string;
     /** Max width in pixels, or `'none'` (default `240`). */
     readonly maxWidth?: number | 'none';

package/Tooltip/useTooltipPosition.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties } from 'react';
+import type { TooltipPosition } from './types';
+type Args = {
+    position: TooltipPosition;
+    offset?: [number, number] | undefined;
+    arrowOffset?: string | undefined;
+    isOpen: boolean;
+};
+/**
+ * Positions the tooltip relative to its anchor via floating-ui: `flip`/`shift` pick a
+ * fallback placement when the requested one overflows the viewport, and `arrow` keeps the
+ * arrow pointing at the anchor's center. `arrowOffset` only sets the minimum gap (px) the
+ * arrow keeps from the tooltip corners. Repositions on scroll/resize while open.
+ */
+export declare function useTooltipPosition({ position, offset: offsetProp, arrowOffset, isOpen, }: Args): {
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    floatingStyles: CSSProperties;
+    placement: import("@floating-ui/utils").Placement;
+    arrowRef: import("react").RefObject<HTMLDivElement>;
+    arrowStyles: CSSProperties;
+};
+export {};

package/Tooltip/useTooltipPosition.js

@@ -0,0 +1,64 @@
+import { arrow, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react-dom';
+import { useRef } from 'react';
+import { DEFAULT_ARROW_PADDING } from './constants';
+import { TooltipPositionToFloatingPlacementMap, TooltipPositionToOffsetMap } from './maps';
+const ArrowStaticSideMap = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right'
+};
+/**
+ * Positions the tooltip relative to its anchor via floating-ui: `flip`/`shift` pick a
+ * fallback placement when the requested one overflows the viewport, and `arrow` keeps the
+ * arrow pointing at the anchor's center. `arrowOffset` only sets the minimum gap (px) the
+ * arrow keeps from the tooltip corners. Repositions on scroll/resize while open.
+ */
+export function useTooltipPosition({
+  position,
+  offset: offsetProp,
+  arrowOffset,
+  isOpen
+}) {
+  const arrowRef = useRef(null);
+  const [skidding, distance] = offsetProp ?? TooltipPositionToOffsetMap[position];
+  const parsedPadding = arrowOffset != null ? parseFloat(arrowOffset) : NaN;
+  const arrowPadding = Number.isFinite(parsedPadding) ? parsedPadding : DEFAULT_ARROW_PADDING;
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = useFloating({
+    open: isOpen,
+    strategy: 'fixed',
+    placement: TooltipPositionToFloatingPlacementMap[position],
+    middleware: [offset({
+      mainAxis: distance,
+      crossAxis: skidding
+    }), flip(), shift({
+      padding: 8
+    }), arrow({
+      element: arrowRef,
+      padding: arrowPadding
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const side = placement.split('-')[0];
+  const {
+    x: arrowX,
+    y: arrowY
+  } = middlewareData.arrow ?? {};
+  const arrowStyles = {
+    left: arrowX != null ? `${arrowX}px` : '',
+    top: arrowY != null ? `${arrowY}px` : '',
+    [ArrowStaticSideMap[side]]: '-5px'
+  };
+  return {
+    refs,
+    floatingStyles,
+    placement,
+    arrowRef,
+    arrowStyles
+  };
+}

package/helpers/assignRef.d.ts

@@ -0,0 +1,3 @@
+import type { Ref } from 'react';
+/** Forward a node to a callback or object ref while keeping our own reference in sync. */
+export declare function assignRef(ref: Ref<Element> | undefined, node: Element | null): void;

package/helpers/assignRef.js

@@ -0,0 +1,8 @@
+/** Forward a node to a callback or object ref while keeping our own reference in sync. */
+export function assignRef(ref, node) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}

package/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './assignRef';

package/helpers/index.js

@@ -0,0 +1 @@
+export * from './assignRef';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.154",
+  "version": "1.1.156",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",