feat: port isIntersectingModifier to v9

apps/vr-tests-react-components/src/stories/Positioning.stories.tsx

@@ -11,6 +11,7 @@ import { useMergedRefs } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { storiesOf } from '@storybook/react';
 import { useFluent } from '@fluentui/react-shared-contexts';
+import Screener from 'screener-storybook/src/screener';
 
 const useStyles = makeStyles({
   wrapper: {
@@ -54,6 +55,26 @@ const useStyles = makeStyles({
   seeThrough: {
     opacity: 0.6,
   },
+
+  visibilityModifiers: {
+    backgroundColor: '#ccc',
+    minHeight: '60px',
+    width: '200px',
+
+    '[data-popper-reference-hidden]': {
+      outlineWidth: '5px',
+      outlineStyle: 'solid',
+      outlineColor: 'red',
+    },
+    '[data-popper-escaped]': {
+      backgroundColor: 'yellow',
+    },
+    '[data-popper-is-intersecting]': {
+      outlineWidth: '5px',
+      outlineStyle: 'solid',
+      outlineColor: 'green',
+    },
+  },
 });
 
 const positions = [
@@ -454,6 +475,57 @@ const ImperativeTarget = () => {
   );
 };
 
+const VisibilityModifiers = () => {
+  const styles = useStyles();
+  const popper = usePopper({ align: 'center', position: 'above' });
+
+  return (
+    <>
+      <p style={{ marginTop: 50 }}>
+        This visual test asserts that visual styles are applied based on popper element's state:
+      </p>
+      <ul>
+        <li>
+          <b style={{ color: 'green' }}>green</b> when the popper element intersects boundaries
+        </li>
+        <li>
+          <b style={{ color: 'red' }}>red</b> when the reference is hidden
+        </li>
+        <li>
+          <b style={{ backgroundColor: 'yellow' }}>yellow</b> when the popper escapes the reference element's boundary
+        </li>
+      </ul>
+
+      <div
+        className={styles.boundary}
+        id="scrollable-area"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 10,
+          height: 400,
+          overflow: 'scroll',
+        }}
+      >
+        {Array(20)
+          .fill(null)
+          .map((_, i) => (
+            <div
+              key={i}
+              ref={i === 1 ? popper.targetRef : undefined}
+              style={{ border: '2px solid grey', padding: 5, marginLeft: 10 }}
+            >
+              <p>message: {i}</p>
+            </div>
+          ))}
+      </div>
+      <Box className={styles.visibilityModifiers} ref={popper.containerRef}>
+        Box with visibility modifiers
+      </Box>
+    </>
+  );
+};
+
 storiesOf('Positioning', module)
   .addDecorator(story => (
     <div
@@ -484,4 +556,17 @@ storiesOf('Positioning', module)
   .addStory('virtual element', () => <VirtualElement />)
   .addStory('target property', () => <TargetProp />)
   .addStory('imperative target', () => <ImperativeTarget />)
+  .addStory('visibility modifiers', () => (
+    <Screener
+      steps={new Screener.Steps()
+        .snapshot('has "[data-popper-is-intersecting]" when the popover intersects boundaries')
+        .executeScript('document.querySelector("#scrollable-area").scrollTop = 80')
+        .snapshot(`has "[data-popper-escaped]" when the popper escapes the reference element's boundary`)
+        .executeScript('document.querySelector("#scrollable-area").scrollTop = 150')
+        .snapshot('has "[data-popper-reference-hidden]" when the reference is hidden')
+        .end()}
+    >
+      <VisibilityModifiers />
+    </Screener>
+  ))
   .addStory('arrow', () => <Arrow />, { includeRtl: true });

change/@fluentui-react-positioning-21fb9bac-746f-4c9a-87ae-5ec9a7915c8a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: add isIntersectingModifier to usePopper",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-positioning/src/isIntersectingModifier.ts

@@ -0,0 +1,27 @@
+import { detectOverflow, Modifier } from '@popperjs/core';
+
+export const isIntersectingModifier: IsIntersectingModifier = {
+  name: 'is-intersecting-modifier',
+  enabled: true,
+  phase: 'main',
+  requires: ['preventOverflow'],
+  fn: ({ state, name }) => {
+    const popperRect = state.rects.popper;
+    const popperAltOverflow = detectOverflow(state, { altBoundary: true });
+
+    const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;
+    const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;
+
+    const isIntersecting = isIntersectingTop || isIntersectingBottom;
+
+    state.modifiersData[name] = {
+      isIntersecting,
+    };
+    state.attributes.popper = {
+      ...state.attributes.popper,
+      'data-popper-is-intersecting': isIntersecting,
+    };
+  },
+};
+
+type IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;

packages/react-positioning/src/usePopper.ts

@@ -3,6 +3,7 @@ import { useFluent } from '@fluentui/react-shared-contexts';
 import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
 
+import { isIntersectingModifier } from './isIntersectingModifier';
 import {
   getScrollParent,
   applyRtlToOffset,
@@ -101,6 +102,8 @@ function usePopperOptions(options: PopperOptions, popperOriginalPositionRef: Rea
         : false;
 
       const modifiers: PopperJs.Options['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