@deque/cauldron-react 6.16.0-canary.cd6c09d5 → 6.16.0-canary.d7ad0332

package/lib/components/AnchoredOverlay/index.d.ts

@@ -1,4 +1,4 @@
-import { type Placement } from '@floating-ui/dom';
+import { type Placement, type Coords } from '@floating-ui/dom';
 import React from 'react';
 import useFocusTrap from '../../utils/useFocusTrap';
 declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
@@ -12,6 +12,8 @@ declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
     onOpenChange?: ((open: boolean) => void) | undefined;
     /** A callback function that is called when the placement of the overlay changes. */
     onPlacementChange?: ((placement: Placement) => void) | undefined;
+    /** A callback function that is called when the shift of the overlay changes. */
+    onShiftChange?: ((coords: Coords) => void) | undefined;
     /** An optional offset number to position the anchor element from its anchored target. */
     offset?: number | undefined;
     /** When set, traps focus within the AnchoredOverlay. */

package/lib/index.js

@@ -1782,10 +1782,11 @@ function getAutoAlignment(placement) {
     }
 }
 var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
-    var as = _a.as, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, target = _a.target, children = _a.children, style = _a.style, _c = _a.open, open = _c === void 0 ? false : _c, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange"]);
+    var _b, _c;
+    var as = _a.as, _d = _a.placement, initialPlacement = _d === void 0 ? 'auto' : _d, target = _a.target, children = _a.children, style = _a.style, _e = _a.open, open = _e === void 0 ? false : _e, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, onShiftChange = _a.onShiftChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange", "onShiftChange"]);
     var ref = useSharedRef(refProp);
     var Component = as || 'div';
-    var _d = reactDom$1.useFloating({
+    var _f = reactDom$1.useFloating({
         open: open,
         // default to initial placement on top when placement is auto
         // @ts-expect-error auto placement is not a valid placement for floating-ui
@@ -1796,14 +1797,15 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
                 ? reactDom$1.autoPlacement({
                     alignment: getAutoAlignment(initialPlacement)
                 })
-                : reactDom$1.flip()
+                : reactDom$1.flip(),
+            reactDom$1.shift({ crossAxis: false })
         ].filter(Boolean),
         elements: {
             reference: resolveElement(target),
             floating: ref.current
         },
         whileElementsMounted: dom.autoUpdate
-    }), floatingStyles = _d.floatingStyles, placement = _d.placement;
+    }), floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData;
     useEscapeKey({
         active: open,
         capture: true,
@@ -1823,7 +1825,16 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
         if (typeof onPlacementChange === 'function') {
             onPlacementChange(placement);
         }
-    }, [placement]);
+    }, [onPlacementChange, placement]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (typeof onShiftChange === 'function') {
+            onShiftChange({
+                x: ((_a = middlewareData.shift) === null || _a === void 0 ? void 0 : _a.x) || 0,
+                y: ((_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.y) || 0
+            });
+        }
+    }, [onShiftChange, (_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.x, (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y]);
     return (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
 });
 AnchoredOverlay.displayName = 'AnchoredOverlay';
@@ -1885,6 +1896,7 @@ function Tooltip(_a) {
     var _h = tslib.__read(React.useState(!!showProp || defaultShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
     var _j = tslib.__read(React.useState(null), 2), tooltipElement = _j[0], setTooltipElement = _j[1];
     var _k = tslib.__read(React.useState(initialPlacement), 2), placement = _k[0], setPlacement = _k[1];
+    var _l = tslib.__read(React.useState(), 2), arrowShift = _l[0], setArrowShift = _l[1];
     var hasAriaAssociation = association !== 'none';
     // Show the tooltip
     var show = React.useCallback(function () { return tslib.__awaiter(_this, void 0, void 0, function () {
@@ -1963,13 +1975,23 @@ function Tooltip(_a) {
             }
         };
     }, [target, id, association]);
+    var updateArrowShiftPosition = React.useCallback(function (_a) {
+        var x = _a.x;
+        if (variant === 'big' || x === 0) {
+            setArrowShift(null);
+            return;
+        }
+        // The tooltip shift position is inversely related to the direction
+        // that the arrow needs to shift
+        setArrowShift(x * -1);
+    }, [variant]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser()
-        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
+        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, onShiftChange: updateArrowShiftPosition, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
                 'Tooltip--big': variant === 'big'
             }), ref: setTooltipElement, role: "tooltip", offset: 8 }, props),
-            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow" }),
+            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow", style: arrowShift ? { transform: "translateX(".concat(arrowShift, "px)") } : undefined }),
             children), (portal && 'current' in portal ? portal.current : portal) ||
             (
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.16.0-canary.cd6c09d5",
+  "version": "6.16.0-canary.d7ad0332",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",