@pushwoosh/dumb-components 1.1.155 → 1.1.157

package/Tooltip/Tooltip.js

@@ -40,7 +40,6 @@ export function Tooltip({
     position,
     offset,
     arrowOffset,
-    maxWidth,
     isOpen
   });
   const {

package/Tooltip/helpers.d.ts

@@ -1,7 +1,6 @@
 /**
- * Resolve the legacy `arrowOffset` CSS string into an `arrow()` padding in px — the
- * minimum distance the arrow keeps from the tooltip corners. Accepts `px` values as-is
- * and `%` values relative to the tooltip's max cross size (`maxWidth`, or the default
- * when unbounded), so both forms used with the old tippy tooltip keep working.
+ * Resolve `arrowOffset` to a px gap. Accepts a number, or a numeric string like `'20px'`
+ * (only the leading number is used, the unit is ignored); anything unparseable falls back
+ * to the default.
  */
-export declare function parseArrowPadding(arrowOffset: string | undefined, maxWidth: number | 'none' | undefined): number;
+export declare function resolveArrowPadding(arrowOffset: number | string | undefined): number;

package/Tooltip/helpers.js

@@ -1,21 +1,18 @@
-import { DEFAULT_ARROW_PADDING, DEFAULT_MAX_WIDTH } from './constants';
+import { DEFAULT_ARROW_PADDING } from './constants';
 /**
- * Resolve the legacy `arrowOffset` CSS string into an `arrow()` padding in px — the
- * minimum distance the arrow keeps from the tooltip corners. Accepts `px` values as-is
- * and `%` values relative to the tooltip's max cross size (`maxWidth`, or the default
- * when unbounded), so both forms used with the old tippy tooltip keep working.
+ * Resolve `arrowOffset` to a px gap. Accepts a number, or a numeric string like `'20px'`
+ * (only the leading number is used, the unit is ignored); anything unparseable falls back
+ * to the default.
  */
-export function parseArrowPadding(arrowOffset, maxWidth) {
-  if (!arrowOffset) {
-    return DEFAULT_ARROW_PADDING;
+export function resolveArrowPadding(arrowOffset) {
+  if (typeof arrowOffset === 'number') {
+    return arrowOffset;
   }
-  const value = parseFloat(arrowOffset);
-  if (Number.isNaN(value)) {
-    return DEFAULT_ARROW_PADDING;
+  if (typeof arrowOffset === 'string') {
+    const parsed = parseFloat(arrowOffset);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
   }
-  if (arrowOffset.trim().endsWith('%')) {
-    const base = typeof maxWidth === 'number' ? maxWidth : DEFAULT_MAX_WIDTH;
-    return value / 100 * base;
-  }
-  return value;
+  return DEFAULT_ARROW_PADDING;
 }

package/Tooltip/maps.d.ts

@@ -5,7 +5,6 @@ import { type TooltipTriggerView } from './TooltipTrigger';
 import type { TooltipPosition } from './types';
 export declare const TooltipPositionToFloatingPlacementMap: Record<TooltipPosition, Placement>;
 export declare const TooltipPositionToOffsetMap: Record<TooltipPosition, [number, number]>;
-export declare const TooltipPositionToArrowOffsetMap: Record<TooltipPosition, string>;
 export declare const TooltipTriggerViewMap: Record<TooltipTriggerView, {
     color: Color;
     hoverColor: Color;

package/Tooltip/maps.js

@@ -28,20 +28,6 @@ export const TooltipPositionToOffsetMap = {
   '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 const TooltipTriggerViewMap = {
   info: {
     color: Color.LOCKED,

package/Tooltip/types.d.ts

@@ -9,8 +9,8 @@ export type TooltipProps = {
     readonly position?: TooltipPosition;
     /** `[skidding, distance]` offset from the anchor; defaults per position. */
     readonly offset?: [number, number];
-    /** Min distance the arrow keeps from the tooltip corners — `px` or `%` of `maxWidth`. */
-    readonly arrowOffset?: string;
+    /** Min gap the arrow keeps from tooltip corners: a number or numeric string like `'20px'` — unit ignored, treated as px (default `12`). */
+    readonly arrowOffset?: number | string;
     /** Max width in pixels, or `'none'` (default `240`). */
     readonly maxWidth?: number | 'none';
     /** Stacking z-index. */

package/Tooltip/useTooltipPosition.d.ts

@@ -3,16 +3,16 @@ import type { TooltipPosition } from './types';
 type Args = {
     position: TooltipPosition;
     offset?: [number, number] | undefined;
-    arrowOffset?: string | undefined;
-    maxWidth?: number | 'none' | undefined;
+    arrowOffset?: number | 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. Repositions on scroll/resize while open.
+ * 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, maxWidth, isOpen, }: Args): {
+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>;

package/Tooltip/useTooltipPosition.js

@@ -1,7 +1,7 @@
 import { arrow, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react-dom';
 import { useRef } from 'react';
-import { parseArrowPadding } from './helpers';
-import { TooltipPositionToArrowOffsetMap, TooltipPositionToFloatingPlacementMap, TooltipPositionToOffsetMap } from './maps';
+import { resolveArrowPadding } from './helpers';
+import { TooltipPositionToFloatingPlacementMap, TooltipPositionToOffsetMap } from './maps';
 const ArrowStaticSideMap = {
   top: 'bottom',
   right: 'left',
@@ -10,19 +10,19 @@ const ArrowStaticSideMap = {
 };
 /**
  * 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. Repositions on scroll/resize while open.
+ * 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,
-  maxWidth,
   isOpen
 }) {
   const arrowRef = useRef(null);
   const [skidding, distance] = offsetProp ?? TooltipPositionToOffsetMap[position];
-  const arrowPadding = parseArrowPadding(arrowOffset ?? TooltipPositionToArrowOffsetMap[position], maxWidth);
+  const arrowPadding = resolveArrowPadding(arrowOffset);
   const {
     refs,
     floatingStyles,

package/package.json

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