@conveyorhq/arrow-ds 1.123.0 → 1.125.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.123.0",
+  "version": "1.125.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Floating/FloatingTooltip.d.ts

@@ -1,13 +1,15 @@
 import React, { HTMLProps, PropsWithChildren } from "react";
-import type { Placement } from "@floating-ui/react";
+import type { Placement, Strategy } from "@floating-ui/react";
 import { PortalRootElementType } from "../Portal";
 interface FloatingTooltipOptions {
     initialOpen?: boolean;
     placement?: Placement;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    strategy?: Strategy;
+    disableShiftMiddleware?: boolean;
 }
-export declare function useFloatingTooltip({ initialOpen, placement, open: controlledOpen, onOpenChange: setControlledOpen, }?: FloatingTooltipOptions): any;
+export declare function useFloatingTooltip({ initialOpen, placement, open: controlledOpen, onOpenChange: setControlledOpen, strategy, disableShiftMiddleware, }?: FloatingTooltipOptions): any;
 export declare const useFloatingTooltipState: any;
 export declare function FloatingTooltipRoot({ children, ...options }: PropsWithChildren<FloatingTooltipOptions>): JSX.Element;
 export declare const FloatingTooltipTrigger: React.ForwardRefExoticComponent<Pick<React.HTMLProps<HTMLElement> & {

package/public/components/Floating/FloatingTooltip.js

@@ -31,17 +31,24 @@ const tokens_1 = require("../../style-dictionary/dist/tokens");
 const bem_1 = require("../../utilities/bem");
 const Box_1 = require("../Box");
 const cn = bem_1.bemHOF("FloatingTooltip");
-function useFloatingTooltip({ initialOpen = false, placement = "top", open: controlledOpen, onOpenChange: setControlledOpen, } = {}) {
+function useFloatingTooltip({ initialOpen = false, placement = "top", open: controlledOpen, onOpenChange: setControlledOpen, strategy, disableShiftMiddleware, } = {}) {
     const [uncontrolledOpen, setUncontrolledOpen] = react_1.useState(initialOpen);
     const arrowRef = react_1.useRef(null);
     const open = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
     const setOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setUncontrolledOpen;
+    const shiftMiddleware = disableShiftMiddleware ? [] : [react_2.shift()];
     const data = react_2.useFloating({
         placement,
         open,
         onOpenChange: setOpen,
         whileElementsMounted: react_2.autoUpdate,
-        middleware: [react_2.offset(8), react_2.flip(), react_2.shift(), react_2.arrow({ element: arrowRef })],
+        middleware: [
+            react_2.offset(8),
+            react_2.flip(),
+            ...shiftMiddleware,
+            react_2.arrow({ element: arrowRef }),
+        ],
+        strategy,
     });
     const { context } = data;
     const hover = react_2.useHover(context, {

package/public/components/Popover/Popover.d.ts

@@ -13,6 +13,7 @@ export interface PopoverTooltipSharedProps extends BoxProps {
 interface PopoverDefaultProps extends PopoverTooltipSharedProps, InlineSharedProps {
     inline?: false;
     showArrow?: boolean;
+    strategy?: "absolute" | "fixed";
 }
 interface PopoverInlineProps extends InlineSharedProps, BoxProps {
     inline: true;

package/public/components/Popover/Popover.js

@@ -51,7 +51,7 @@ const Popover = ({ removePadding = false, ...props }) => {
         return (react_1.default.createElement(InlinePopover, Object.assign({ "data-placement": placement, className: className, style: styleProp, removePadding: removePadding }, rest), children));
     }
     if (!props.inline) {
-        const { referenceElement, popperModifiers, isVisible, placement, className, style: styleProp, children, inline, showArrow = false, ...rest } = props;
+        const { referenceElement, popperModifiers, isVisible, placement, className, style: styleProp, children, inline, showArrow = false, strategy = "absolute", ...rest } = props;
         const offset = [0, 8];
         const defaultPopperModifiers = [
             {
@@ -63,7 +63,7 @@ const Popover = ({ removePadding = false, ...props }) => {
         ];
         const propModifiers = popperModifiers || [];
         return (react_1.default.createElement(react_popper_2_1.Manager, null,
-            isVisible && (react_1.default.createElement(react_popper_2_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers] }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, Object.assign({ ref: ref, style: {
+            isVisible && (react_1.default.createElement(react_popper_2_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers], strategy: strategy }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, Object.assign({ ref: ref, style: {
                     ...style,
                     ...styleProp,
                 }, className: className, "data-placement": popperPlacement, hasPortal: true, removePadding: removePadding }, rest),

package/src/components/Floating/FloatingTooltip.tsx

@@ -25,7 +25,7 @@ import {
   useInteractions,
   FloatingPortal,
 } from "@floating-ui/react";
-import type { Placement } from "@floating-ui/react";
+import type { Placement, Strategy } from "@floating-ui/react";
 import classNames from "classnames";
 import { tokens } from "../../style-dictionary/dist/tokens";
 import { bemHOF } from "../../utilities/bem";
@@ -39,6 +39,8 @@ interface FloatingTooltipOptions {
   placement?: Placement;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  strategy?: Strategy;
+  disableShiftMiddleware?: boolean;
 }
 
 export function useFloatingTooltip({
@@ -46,18 +48,28 @@ export function useFloatingTooltip({
   placement = "top",
   open: controlledOpen,
   onOpenChange: setControlledOpen,
+  strategy,
+  disableShiftMiddleware,
 }: FloatingTooltipOptions = {}) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
   const arrowRef = useRef<HTMLDivElement>(null);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
 
+  const shiftMiddleware = disableShiftMiddleware ? [] : [shift()];
+
   const data = useFloating({
     placement,
     open,
     onOpenChange: setOpen,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(8), flip(), shift(), arrow({ element: arrowRef })],
+    middleware: [
+      offset(8),
+      flip(),
+      ...shiftMiddleware,
+      arrow({ element: arrowRef }),
+    ],
+    strategy,
   });
 
   const { context } = data;

package/src/components/Popover/Popover.tsx

@@ -60,6 +60,12 @@ interface PopoverDefaultProps
    * Toggles the popover arrow on and off
    */
   showArrow?: boolean;
+  /**
+   * Describes the positioning strategy to use. By default, it is absolute,
+   * which in the simplest cases does not require repositioning of the popper.
+   * If your reference element is in a fixed container, use the fixed strategy.
+   */
+  strategy?: "absolute" | "fixed";
 }
 
 interface PopoverInlineProps extends InlineSharedProps, BoxProps {
@@ -159,6 +165,7 @@ export const Popover = ({ removePadding = false, ...props }: PopoverProps) => {
       children,
       inline,
       showArrow = false,
+      strategy = "absolute",
       ...rest
     } = props;
 
@@ -181,6 +188,7 @@ export const Popover = ({ removePadding = false, ...props }: PopoverProps) => {
           <Popper
             placement={placement}
             modifiers={[...defaultPopperModifiers, ...propModifiers]}
+            strategy={strategy}
           >
             {({
               ref,