@fluentui/react-positioning 9.1.2 → 9.2.1

package/lib/usePositioning.js

@@ -1,337 +1,90 @@
-import { useEventCallback, useIsomorphicLayoutEffect, useFirstMount, canUseDOM } from '@fluentui/react-utilities';
+import { computePosition, hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import * as PopperJs from '@popperjs/core';
+import { canUseDOM, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useEventCallback } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { isIntersectingModifier } from './isIntersectingModifier';
-import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, parsePopperPlacement } from './utils/index';
-import { getPopperOffset } from './utils/getPopperOffset'; //
-// Dev utils to detect if nodes have "autoFocus" props.
-//
-
+import { useCallbackRef, toFloatingUIPlacement, toggleScrollListener, hasAutofocusFilter, debounce, hasScrollParent } from './utils';
+import { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware } from './middleware';
+import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_INTERSECTING, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_PLACEMENT } from './constants';
 /**
- * Detects if a passed HTML node has "autoFocus" prop on a React's fiber. Is needed as React handles autofocus behavior
- * in React DOM and will not pass "autoFocus" to an actual HTML.
- */
-
-function hasAutofocusProp(node) {
-  var _a; // https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
-
-
-  const isAutoFocusableElement = node.nodeName === 'BUTTON' || node.nodeName === 'INPUT' || node.nodeName === 'SELECT' || node.nodeName === 'TEXTAREA';
-
-  if (isAutoFocusableElement) {
-    return !!((_a = getReactFiberFromNode(node)) === null || _a === void 0 ? void 0 : _a.pendingProps.autoFocus);
-  }
-
-  return false;
-}
-
-function hasAutofocusFilter(node) {
-  return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-}
-/**
- * Provides a callback to resolve Popper options, it's stable and should be used as a dependency to trigger updates
- * of Popper options.
- *
- * A callback is used there intentionally as some of Popper.js modifiers require DOM nodes (targer, container, arrow)
- * that can't be resolved properly during an initial rendering.
+ * @internal
  */
 
-
-function usePopperOptions(options, popperOriginalPositionRef) {
+export function usePositioning(options) {
   const {
-    align,
-    arrowPadding,
-    autoSize,
-    coverTarget,
-    flipBoundary,
-    offset,
-    overflowBoundary,
-    pinned,
-    position,
-    positionFixed,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_disableTether
+    targetDocument
+  } = useFluent();
+  const {
+    enabled = true
   } = options;
-  const isRtl = useFluent().dir === 'rtl';
-  const placement = getPlacement(align, position, isRtl);
-  const strategy = positionFixed ? 'fixed' : 'absolute';
-  const offsetModifier = React.useMemo(() => offset ? {
-    name: 'offset',
-    options: {
-      offset: isRtl ? applyRtlToOffset(getPopperOffset(offset)) : getPopperOffset(offset)
-    }
-  } : null, [offset, isRtl]);
-  return React.useCallback((target, container, arrow) => {
+  const resolvePositioningOptions = usePositioningOptions(options);
+  const forceUpdate = useEventCallback(() => {
     var _a;
 
-    const scrollParentElement = getScrollParent(container);
-    const hasScrollableElement = scrollParentElement ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body) : false;
-    const modifiers = [isIntersectingModifier,
-    /**
-     * We are setting the position to `fixed` in the first effect to prevent scroll jumps in case of the content
-     * with managed focus. Modifier sets the position to `fixed` before all other modifier effects. Another part of
-     * a patch modifies ".forceUpdate()" directly after a Popper will be created.
-     */
-    {
-      name: 'positionStyleFix',
-      enabled: true,
-      phase: 'afterWrite',
-      effect: ({
-        state,
-        instance
-      }) => {
-        // ".isFirstRun" is a part of our patch, on a first evaluation it will "undefined"
-        // should be disabled for subsequent runs as it breaks positioning for them
-        if (instance.isFirstRun !== false) {
-          popperOriginalPositionRef.current = state.elements.popper.style.position;
-          state.elements.popper.style.position = 'fixed';
-        }
-
-        return () => undefined;
-      },
-      requires: []
-    }, {
-      name: 'flip',
-      options: {
-        flipVariations: true
-      }
-    },
-    /**
-     * pinned disables the flip modifier by setting flip.enabled to false; this
-     * disables automatic repositioning of the popper box; it will always be placed according to
-     * the values of `align` and `position` props, regardless of the size of the component, the
-     * reference element or the viewport.
-     */
-    pinned && {
-      name: 'flip',
-      enabled: false
-    },
-    /**
-     * When the popper box is placed in the context of a scrollable element, we need to set
-     * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
-     * (default is 'viewport') so that the popper box will stick with the targetRef when we
-     * scroll targetRef out of the viewport.
-     */
-    hasScrollableElement && {
-      name: 'flip',
-      options: {
-        boundary: 'clippingParents'
-      }
-    }, hasScrollableElement && {
-      name: 'preventOverflow',
-      options: {
-        boundary: 'clippingParents'
-      }
-    }, offsetModifier,
-    /**
-     * This modifier is necessary to retain behaviour from popper v1 where untethered poppers are allowed by
-     * default. i.e. popper is still rendered fully in the viewport even if anchor element is no longer in the
-     * viewport.
-     */
-    unstable_disableTether && {
-      name: 'preventOverflow',
-      options: {
-        altAxis: unstable_disableTether === 'all',
-        tether: false
-      }
-    }, flipBoundary && {
-      name: 'flip',
-      options: {
-        altBoundary: true,
-        boundary: getBoundary(container, flipBoundary)
-      }
-    }, overflowBoundary && {
-      name: 'preventOverflow',
-      options: {
-        altBoundary: true,
-        boundary: getBoundary(container, overflowBoundary)
-      }
-    }, {
-      // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
-      // popper-maxsize-modifier only calculates the max sizes.
-      // This modifier can apply max sizes always, or apply the max sizes only when overflow is detected
-      name: 'applyMaxSize',
-      enabled: !!autoSize,
-      phase: 'beforeWrite',
-      requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-      options: {
-        altBoundary: true,
-        boundary: getBoundary(container, overflowBoundary)
-      },
-
-      fn({
-        state,
-        options: modifierOptions
-      }) {
-        const overflow = PopperJs.detectOverflow(state, modifierOptions);
-        const {
-          x,
-          y
-        } = state.modifiersData.preventOverflow || {
-          x: 0,
-          y: 0
-        };
-        const {
-          width,
-          height
-        } = state.rects.popper;
-        const basePlacement = parsePopperPlacement(state.placement).basePlacement;
-        const widthProp = basePlacement === 'left' ? 'left' : 'right';
-        const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
-        const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width');
-        const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height');
-
-        if (applyMaxWidth) {
-          state.styles.popper.maxWidth = `${width - overflow[widthProp] - x}px`;
-        }
-
-        if (applyMaxHeight) {
-          state.styles.popper.maxHeight = `${height - overflow[heightProp] - y}px`;
-        }
-      }
+    const target = (_a = overrideTargetRef.current) !== null && _a !== void 0 ? _a : targetRef.current;
 
-    },
-    /**
-     * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
-     * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
-     */
-    {
-      name: 'arrow',
-      enabled: !!arrow,
-      options: {
-        element: arrow,
-        padding: arrowPadding
-      }
-    },
-    /**
-     * Modifies popper offsets to cover the reference rect, but still keep edge alignment
-     */
-    {
-      name: 'coverTarget',
-      enabled: !!coverTarget,
-      phase: 'main',
-      requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-
-      fn({
-        state
-      }) {
-        const basePlacement = parsePopperPlacement(state.placement).basePlacement;
-
-        switch (basePlacement) {
-          case 'bottom':
-            state.modifiersData.popperOffsets.y -= state.rects.reference.height;
-            break;
-
-          case 'top':
-            state.modifiersData.popperOffsets.y += state.rects.reference.height;
-            break;
-
-          case 'left':
-            state.modifiersData.popperOffsets.x += state.rects.reference.width;
-            break;
-
-          case 'right':
-            state.modifiersData.popperOffsets.x -= state.rects.reference.width;
-            break;
-        }
-      }
-
-    }].filter(Boolean); // filter boolean conditional spreading values
+    if (!canUseDOM || !enabled || !target || !containerRef.current) {
+      return;
+    }
 
-    const popperOptions = {
-      modifiers,
+    const {
       placement,
+      middleware,
       strategy
-    };
-    return popperOptions;
-  }, [arrowPadding, autoSize, coverTarget, flipBoundary, offsetModifier, overflowBoundary, placement, strategy, unstable_disableTether, pinned, // These can be skipped from deps as they will not ever change
-  popperOriginalPositionRef]);
-}
-/**
- * @internal
- * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
- * package:
- * - style attributes are applied directly on DOM to avoid re-renders
- * - refs changes and resolution is handled properly without re-renders
- * - contains a specific to React fix related to initial positioning when containers have components with managed focus
- *   to avoid focus jumps
- */
+    } = resolvePositioningOptions(target, containerRef.current, arrowRef.current); // Container is always initialized with `position: fixed` to avoid scroll jumps
+    // Before computing the positioned coordinates, revert the container to the deisred positioning strategy
 
+    Object.assign(containerRef.current.style, {
+      position: strategy
+    });
+    computePosition(target, containerRef.current, {
+      placement,
+      middleware,
+      strategy
+    }).then(({
+      x,
+      y,
+      middlewareData,
+      placement: computedPlacement
+    }) => {
+      var _a;
 
-export function usePositioning(options = {}) {
-  const {
-    enabled = true
-  } = options;
-  const isFirstMount = useFirstMount();
-  const popperOriginalPositionRef = React.useRef('absolute');
-  const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
-  const popperInstanceRef = React.useRef(null);
-  const handlePopperUpdate = useEventCallback(() => {
-    var _a, _b;
-
-    (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-    popperInstanceRef.current = null;
-    const target = (_b = overrideTargetRef.current) !== null && _b !== void 0 ? _b : targetRef.current;
-    let popperInstance = null;
-
-    if (canUseDOM() && enabled) {
-      if (target && containerRef.current) {
-        popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
+      writeArrowUpdates({
+        arrow: arrowRef.current,
+        middlewareData
+      });
+      writeContainerUpdates({
+        container: containerRef.current,
+        middlewareData,
+        placement: computedPlacement,
+        coordinates: {
+          x,
+          y
+        },
+        lowPPI: (((_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.devicePixelRatio) || 1) <= 1,
+        strategy
+      });
+    }).catch(err => {
+      // https://github.com/floating-ui/floating-ui/issues/1845
+      // FIXME for node > 14
+      // node 15 introduces promise rejection which means that any components
+      // tests need to be `it('', async () => {})` otherwise there can be race conditions with
+      // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
+      // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
+      // will actually be counter productive
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.error('[usePositioning]: Failed to calculate position', err);
       }
-    }
-
-    if (popperInstance) {
-      /**
-       * The patch updates `.forceUpdate()` Popper function which restores the original position before the first
-       * forceUpdate() call. See also "positionStyleFix" modifier in usePopperOptions().
-       */
-      const originalForceUpdate = popperInstance.forceUpdate;
-      popperInstance.isFirstRun = true;
-
-      popperInstance.forceUpdate = () => {
-        if (popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
-          popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
-          popperInstance.isFirstRun = false;
-        }
-
-        originalForceUpdate();
-      };
-    }
-
-    popperInstanceRef.current = popperInstance;
-  }); // Refs are managed by useCallbackRef() to handle ref updates scenarios.
-  //
-  // The first scenario are updates for a targetRef, we can handle it properly only via callback refs, but it causes
-  // re-renders (we would like to avoid them).
-  //
-  // The second problem is related to refs resolution on React's layer: refs are resolved in the same order as effects
-  // that causes an issue when you have a container inside a target, for example: a menu in ChatMessage.
-  //
-  // function ChatMessage(props) {
-  //   <div className="message" ref={targetRef}> // 3) ref will be resolved only now, but it's too late already
-  //     <Popper target={targetRef}> // 2) create a popper instance
-  //       <div className="menu" /> // 1) capture ref from this element
-  //     </Popper>
-  //   </div>
-  // }
-  //
-  // Check a demo on CodeSandbox: https://codesandbox.io/s/popper-refs-emy60.
-  //
-  // This again can be solved with callback refs. It's not a huge issue as with hooks we are moving popper's creation
-  // to ChatMessage itself, however, without `useCallback()` refs it's still a Pandora box.
-
-  const targetRef = useCallbackRef(null, handlePopperUpdate, true);
-  const containerRef = useCallbackRef(null, handlePopperUpdate, true);
-  const arrowRef = useCallbackRef(null, handlePopperUpdate, true); // Stores external target from options.target or setTarget
-
-  const overrideTargetRef = useCallbackRef(null, handlePopperUpdate, true);
+    });
+  });
+  const updatePosition = React.useState(() => debounce(forceUpdate))[0];
+  const targetRef = useTargetRef(updatePosition);
+  const overrideTargetRef = useTargetRef(updatePosition);
+  const containerRef = useContainerRef(updatePosition, enabled);
+  const arrowRef = useArrowRef(updatePosition);
   React.useImperativeHandle(options.positioningRef, () => ({
-    updatePosition: () => {
-      var _a;
-
-      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
-    },
+    updatePosition,
     setTarget: target => {
       if (options.target && process.env.NODE_ENV !== 'production') {
         const err = new Error(); // eslint-disable-next-line no-console
@@ -345,34 +98,31 @@ export function usePositioning(options = {}) {
     }
   }), // Missing deps:
   // options.target - only used for a runtime warning
-  // targetRef - Stable between renders
+  // overrideTargetRef - Stable between renders
+  // updatePosition - Stable between renders
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   useIsomorphicLayoutEffect(() => {
-    if (options.target) {
-      overrideTargetRef.current = options.target;
-    }
-  }, [options.target, overrideTargetRef]);
-  useIsomorphicLayoutEffect(() => {
-    handlePopperUpdate();
-    return () => {
-      var _a;
+    var _a;
 
-      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-      popperInstanceRef.current = null;
-    };
-  }, [handlePopperUpdate, options.enabled]);
+    overrideTargetRef.current = (_a = options.target) !== null && _a !== void 0 ? _a : null;
+  }, [options.target, overrideTargetRef, containerRef]);
   useIsomorphicLayoutEffect(() => {
-    var _a, _b;
+    updatePosition();
+  }, [enabled, resolvePositioningOptions, updatePosition]); // Add window resize and scroll listeners to update position
 
-    if (!isFirstMount) {
-      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions((_b = overrideTargetRef.current) !== null && _b !== void 0 ? _b : targetRef.current, containerRef.current, arrowRef.current));
+  useIsomorphicLayoutEffect(() => {
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+
+    if (win) {
+      win.addEventListener('resize', updatePosition);
+      win.addEventListener('scroll', updatePosition);
+      return () => {
+        win.removeEventListener('resize', updatePosition);
+        win.removeEventListener('scroll', updatePosition);
+      };
     }
-  }, // Missing deps:
-  // isFirstMount - Should never change after mount
-  // arrowRef, containerRef, targetRef - Stable between renders
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [resolvePopperOptions]);
+  }, [updatePosition, targetDocument]);
 
   if (process.env.NODE_ENV !== 'production') {
     // This checked should run only in development mode
@@ -386,7 +136,7 @@ export function usePositioning(options = {}) {
           acceptNode: hasAutofocusFilter
         });
 
-        while (treeWalker === null || treeWalker === void 0 ? void 0 : treeWalker.nextNode()) {
+        while (treeWalker.nextNode()) {
           const node = treeWalker.currentNode; // eslint-disable-next-line no-console
 
           console.warn('<Popper>:', node); // eslint-disable-next-line no-console
@@ -406,4 +156,152 @@ export function usePositioning(options = {}) {
     arrowRef
   };
 }
+
+function usePositioningOptions(options) {
+  const {
+    align,
+    arrowPadding,
+    autoSize,
+    coverTarget,
+    flipBoundary,
+    offset,
+    overflowBoundary,
+    pinned,
+    position,
+    unstable_disableTether: disableTether,
+    positionFixed
+  } = options;
+  const {
+    dir
+  } = useFluent();
+  const isRtl = dir === 'rtl';
+  const strategy = positionFixed ? 'fixed' : 'absolute';
+  return React.useCallback((target, container, arrow) => {
+    const hasScrollableElement = hasScrollParent(container);
+    const placement = toFloatingUIPlacement(align, position, isRtl);
+    const middleware = [offset && offsetMiddleware(offset), coverTarget && coverTargetMiddleware(), !pinned && flipMiddleware({
+      container,
+      flipBoundary,
+      hasScrollableElement
+    }), shiftMiddleware({
+      container,
+      hasScrollableElement,
+      overflowBoundary,
+      disableTether
+    }), autoSize && maxSizeMiddleware(autoSize), intersectingMiddleware(), arrow && arrowMiddleware({
+      element: arrow,
+      padding: arrowPadding
+    }), hideMiddleware({
+      strategy: 'referenceHidden'
+    }), hideMiddleware({
+      strategy: 'escaped'
+    })].filter(Boolean);
+    return {
+      placement,
+      middleware,
+      strategy
+    };
+  }, [align, arrowPadding, autoSize, coverTarget, disableTether, flipBoundary, isRtl, offset, overflowBoundary, pinned, position, strategy]);
+}
+
+function useContainerRef(updatePosition, enabled) {
+  return useCallbackRef(null, (container, prevContainer) => {
+    if (container && enabled) {
+      // When the container is first resolved, set position `fixed` to avoid scroll jumps.
+      // Without this scroll jumps can occur when the element is rendered initially and receives focus
+      Object.assign(container.style, {
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        margin: 0
+      });
+    }
+
+    toggleScrollListener(container, prevContainer, updatePosition);
+    updatePosition();
+  });
+}
+
+function useTargetRef(updatePosition) {
+  return useCallbackRef(null, (target, prevTarget) => {
+    toggleScrollListener(target, prevTarget, updatePosition);
+    updatePosition();
+  });
+}
+
+function useArrowRef(updatePosition) {
+  return useCallbackRef(null, updatePosition);
+}
+/**
+ * Writes all DOM element updates after position is computed
+ */
+
+
+function writeContainerUpdates(options) {
+  var _a, _b;
+
+  const {
+    container,
+    placement,
+    middlewareData,
+    strategy,
+    lowPPI,
+    coordinates: {
+      x,
+      y
+    }
+  } = options;
+
+  if (!container) {
+    return;
+  }
+
+  container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);
+  container.removeAttribute(DATA_POSITIONING_INTERSECTING);
+
+  if (middlewareData.intersectionObserver.intersecting) {
+    container.setAttribute(DATA_POSITIONING_INTERSECTING, '');
+  }
+
+  container.removeAttribute(DATA_POSITIONING_ESCAPED);
+
+  if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.escaped) {
+    container.setAttribute(DATA_POSITIONING_ESCAPED, '');
+  }
+
+  container.removeAttribute(DATA_POSITIONING_HIDDEN);
+
+  if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
+    container.setAttribute(DATA_POSITIONING_HIDDEN, '');
+  }
+
+  Object.assign(container.style, {
+    transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,
+    position: strategy
+  });
+}
+/**
+ * Writes all DOM element updates after position is computed
+ */
+
+
+function writeArrowUpdates(options) {
+  const {
+    arrow,
+    middlewareData
+  } = options;
+
+  if (!middlewareData.arrow || !arrow) {
+    return;
+  }
+
+  const {
+    x: arrowX,
+    y: arrowY
+  } = middlewareData.arrow;
+  Object.assign(arrow.style, {
+    left: `${arrowX}px`,
+    top: `${arrowY}px`
+  });
+}
 //# sourceMappingURL=usePositioning.js.map