⚗️ [Popover] Expose imperative relayout function

UNRELEASED.md

@@ -15,6 +15,10 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Allow promoted actions to be rendered as a menu on the `BulkAction` component ([#4266](https://github.com/Shopify/polaris-react/pull/4266))
 - Add `extraSmall` prop to `Avatar` ([#4371](https://github.com/Shopify/polaris-react/pull/4371))
 - Add `critical` color option to `ProgressBar` component ([#4408](https://github.com/Shopify/polaris-react/pull/4408))
+- `Popover` now exposes an imperative `forceReLayout()` API for programmatically triggering a re-render of the underlying overlay component ([#4385](https://github.com/Shopify/polaris-react/pull/4385))
+- `PositionedOverlay` now exposes an imperative `forceReLayout()` API for programmatically triggering a re-render of the component ([#4385](https://github.com/Shopify/polaris-react/pull/4385))
+- `Popover` now exposes an imperative `forceUpdatePosition()` API for programmatically triggering a re-render of the underlying overlay component ([#4385](https://github.com/Shopify/polaris-react/pull/4385))
+- `PositionedOverlay` now exposes an imperative `forceUpdatePosition()` API for programmatically triggering a re-render of the component ([#4385](https://github.com/Shopify/polaris-react/pull/4385))
 
 ### Bug fixes
 

src/components/Popover/Popover.tsx

@@ -1,11 +1,13 @@
 import React, {
   Children,
-  useRef,
+  forwardRef,
   useEffect,
   useCallback,
+  useImperativeHandle,
+  useRef,
   useState,
-  AriaAttributes,
 } from 'react';
+import type {AriaAttributes} from 'react';
 
 import {
   findFirstFocusableNodeIncludingDisabled,
@@ -78,128 +80,149 @@ export interface PopoverProps {
   autofocusTarget?: PopoverAutofocusTarget;
 }
 
+export interface PopoverPublicAPI {
+  forceUpdatePosition(): void;
+}
+
 // TypeScript can't generate types that correctly infer the typing of
 // subcomponents so explicitly state the subcomponents in the type definition.
 // Letting this be implicit works in this project but fails in projects that use
 // generated *.d.ts files.
 
-export const Popover: React.FunctionComponent<PopoverProps> & {
-  Pane: typeof Pane;
-  Section: typeof Section;
-} = function Popover({
-  activatorWrapper = 'div',
-  children,
-  onClose,
-  activator,
-  preventFocusOnClose,
-  active,
-  fixed,
-  ariaHaspopup,
-  preferInputActivator = true,
-  colorScheme,
-  zIndexOverride,
-  ...rest
-}: PopoverProps) {
-  const [activatorNode, setActivatorNode] = useState<HTMLElement>();
-  const activatorContainer = useRef<HTMLElement>(null);
-  const WrapperComponent: any = activatorWrapper;
-  const id = useUniqueId('popover');
-
-  const setAccessibilityAttributes = useCallback(() => {
-    if (activatorContainer.current == null) {
-      return;
-    }
-
-    const firstFocusable = findFirstFocusableNodeIncludingDisabled(
-      activatorContainer.current,
-    );
-    const focusableActivator: HTMLElement & {
-      disabled?: boolean;
-    } = firstFocusable || activatorContainer.current;
-
-    const activatorDisabled =
-      'disabled' in focusableActivator && Boolean(focusableActivator.disabled);
-
-    setActivatorAttributes(focusableActivator, {
-      id,
+const PopoverComponent = forwardRef<PopoverPublicAPI, PopoverProps>(
+  function Popover(
+    {
+      activatorWrapper = 'div',
+      children,
+      onClose,
+      activator,
+      preventFocusOnClose,
       active,
+      fixed,
       ariaHaspopup,
-      activatorDisabled,
-    });
-  }, [id, active, ariaHaspopup]);
-
-  const handleClose = (source: PopoverCloseSource) => {
-    onClose(source);
-    if (activatorContainer.current == null || preventFocusOnClose) {
-      return;
+      preferInputActivator = true,
+      colorScheme,
+      zIndexOverride,
+      ...rest
+    },
+    ref,
+  ) {
+    const [activatorNode, setActivatorNode] = useState<HTMLElement>();
+
+    const overlayRef = useRef<PopoverOverlay>(null);
+    const activatorContainer = useRef<HTMLElement>(null);
+
+    const WrapperComponent: any = activatorWrapper;
+    const id = useUniqueId('popover');
+
+    function forceUpdatePosition() {
+      overlayRef.current?.forceUpdatePosition();
     }
 
-    if (
-      (source === PopoverCloseSource.FocusOut ||
-        source === PopoverCloseSource.EscapeKeypress) &&
-      activatorNode
-    ) {
-      const focusableActivator =
-        findFirstFocusableNodeIncludingDisabled(activatorNode) ||
-        findFirstFocusableNodeIncludingDisabled(activatorContainer.current) ||
-        activatorContainer.current;
-      if (!focusNextFocusableNode(focusableActivator, isInPortal)) {
-        focusableActivator.focus();
+    useImperativeHandle(ref, () => {
+      return {
+        forceUpdatePosition,
+      };
+    });
+
+    const setAccessibilityAttributes = useCallback(() => {
+      if (activatorContainer.current == null) {
+        return;
       }
-    }
-  };
 
-  useEffect(() => {
-    if (!activatorNode && activatorContainer.current) {
-      setActivatorNode(
-        activatorContainer.current.firstElementChild as HTMLElement,
-      );
-    } else if (
-      activatorNode &&
-      activatorContainer.current &&
-      !activatorContainer.current.contains(activatorNode)
-    ) {
-      setActivatorNode(
-        activatorContainer.current.firstElementChild as HTMLElement,
+      const firstFocusable = findFirstFocusableNodeIncludingDisabled(
+        activatorContainer.current,
       );
-    }
-    setAccessibilityAttributes();
-  }, [activatorNode, setAccessibilityAttributes]);
+      const focusableActivator: HTMLElement & {
+        disabled?: boolean;
+      } = firstFocusable || activatorContainer.current;
+
+      const activatorDisabled =
+        'disabled' in focusableActivator &&
+        Boolean(focusableActivator.disabled);
+
+      setActivatorAttributes(focusableActivator, {
+        id,
+        active,
+        ariaHaspopup,
+        activatorDisabled,
+      });
+    }, [id, active, ariaHaspopup]);
+
+    const handleClose = (source: PopoverCloseSource) => {
+      onClose(source);
+      if (activatorContainer.current == null || preventFocusOnClose) {
+        return;
+      }
 
-  useEffect(() => {
-    if (activatorNode && activatorContainer.current) {
-      setActivatorNode(
-        activatorContainer.current.firstElementChild as HTMLElement,
-      );
-    }
-    setAccessibilityAttributes();
-  }, [activatorNode, setAccessibilityAttributes]);
-
-  const portal = activatorNode ? (
-    <Portal idPrefix="popover">
-      <PopoverOverlay
-        id={id}
-        activator={activatorNode}
-        preferInputActivator={preferInputActivator}
-        onClose={handleClose}
-        active={active}
-        fixed={fixed}
-        colorScheme={colorScheme}
-        zIndexOverride={zIndexOverride}
-        {...rest}
-      >
-        {children}
-      </PopoverOverlay>
-    </Portal>
-  ) : null;
-
-  return (
-    <WrapperComponent ref={activatorContainer}>
-      {Children.only(activator)}
-      {portal}
-    </WrapperComponent>
-  );
-};
+      if (
+        (source === PopoverCloseSource.FocusOut ||
+          source === PopoverCloseSource.EscapeKeypress) &&
+        activatorNode
+      ) {
+        const focusableActivator =
+          findFirstFocusableNodeIncludingDisabled(activatorNode) ||
+          findFirstFocusableNodeIncludingDisabled(activatorContainer.current) ||
+          activatorContainer.current;
+        if (!focusNextFocusableNode(focusableActivator, isInPortal)) {
+          focusableActivator.focus();
+        }
+      }
+    };
+
+    useEffect(() => {
+      if (!activatorNode && activatorContainer.current) {
+        setActivatorNode(
+          activatorContainer.current.firstElementChild as HTMLElement,
+        );
+      } else if (
+        activatorNode &&
+        activatorContainer.current &&
+        !activatorContainer.current.contains(activatorNode)
+      ) {
+        setActivatorNode(
+          activatorContainer.current.firstElementChild as HTMLElement,
+        );
+      }
+      setAccessibilityAttributes();
+    }, [activatorNode, setAccessibilityAttributes]);
+
+    useEffect(() => {
+      if (activatorNode && activatorContainer.current) {
+        setActivatorNode(
+          activatorContainer.current.firstElementChild as HTMLElement,
+        );
+      }
+      setAccessibilityAttributes();
+    }, [activatorNode, setAccessibilityAttributes]);
+
+    const portal = activatorNode ? (
+      <Portal idPrefix="popover">
+        <PopoverOverlay
+          ref={overlayRef}
+          id={id}
+          activator={activatorNode}
+          preferInputActivator={preferInputActivator}
+          onClose={handleClose}
+          active={active}
+          fixed={fixed}
+          colorScheme={colorScheme}
+          zIndexOverride={zIndexOverride}
+          {...rest}
+        >
+          {children}
+        </PopoverOverlay>
+      </Portal>
+    ) : null;
+
+    return (
+      <WrapperComponent ref={activatorContainer}>
+        {Children.only(activator)}
+        {portal}
+      </WrapperComponent>
+    );
+  },
+);
 
 function isInPortal(element: Element) {
   let parentElement = element.parentElement;
@@ -212,5 +235,4 @@ function isInPortal(element: Element) {
   return true;
 }
 
-Popover.Pane = Pane;
-Popover.Section = Section;
+export const Popover = Object.assign(PopoverComponent, {Pane, Section});

src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx

@@ -69,6 +69,16 @@ export class PopoverOverlay extends PureComponent<PopoverOverlayProps, State> {
   private contentNode = createRef<HTMLDivElement>();
   private enteringTimer?: number;
   private exitingTimer?: number;
+  private overlayRef: React.RefObject<PositionedOverlay>;
+
+  constructor(props: PopoverOverlayProps) {
+    super(props);
+    this.overlayRef = createRef();
+  }
+
+  forceUpdatePosition() {
+    this.overlayRef.current?.forceUpdatePosition();
+  }
 
   changeTransitionStatus(transitionStatus: TransitionStatus, cb?: () => void) {
     this.setState({transitionStatus}, cb);
@@ -136,6 +146,7 @@ export class PopoverOverlay extends PureComponent<PopoverOverlayProps, State> {
 
     return (
       <PositionedOverlay
+        ref={this.overlayRef}
         testID="positionedOverlay"
         fullWidth={fullWidth}
         active={active}

src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {
   mountWithAppProvider,
@@ -447,6 +447,32 @@ describe('<PopoverOverlay />', () => {
       expect(document.activeElement).not.toBe(focusTargetFirstNode);
     });
   });
+
+  describe('forceUpdatePosition', () => {
+    it('exposes a function that allows the Overlay to be programmatically re-rendered', () => {
+      let overlayRef = null;
+
+      function Test() {
+        overlayRef = useRef(null);
+
+        return (
+          <PopoverOverlay
+            active
+            id="MockId"
+            ref={overlayRef}
+            activator={activator}
+            onClose={noop}
+          >
+            <input type="text" />
+          </PopoverOverlay>
+        );
+      }
+
+      mountWithApp(<Test />);
+
+      expect(overlayRef).toHaveProperty('current.forceUpdatePosition');
+    });
+  });
 });
 
 function noop() {}