baseui 10.10.0 → 10.12.0

package/pin-code/types.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {SIZE, STATE_CHANGE_TYPE} from '../input/index.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { SIZE, STATE_CHANGE_TYPE } from '../input/index.js';
 
-export type ChangeEventT = {values: string[], event: InputEvent};
+export type ChangeEventT = { values: string[], event: InputEvent };
 
 export type PropsT = {
   /** Sets aria-label attribute for each input element. */
@@ -32,7 +32,7 @@ export type PropsT = {
   /** Sets the name attribute of each input element. */
   name: ?string,
   /** A handler for when any pin code input changes value. */
-  onChange: ChangeEventT => mixed,
+  onChange: (ChangeEventT) => mixed,
   overrides: {
     Root?: OverrideT,
     Input?: OverrideT,
@@ -68,7 +68,7 @@ export type StateChangeT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type StateReducerT = (
   type: StateChangeT,
   nextState: StatefulPinCodeContainerStateT,
-  currentState: StatefulPinCodeContainerStateT,
+  currentState: StatefulPinCodeContainerStateT
 ) => StatefulPinCodeContainerStateT;
 
 export type StatefulPinCodePropsT = PropsT & {
@@ -78,7 +78,7 @@ export type StatefulPinCodePropsT = PropsT & {
 };
 
 export type StatefulPinCodeContainerPropsT = PropsT & {
-  children: PropsT => React.Node,
+  children: (PropsT) => React.Node,
   initialState: StatefulPinCodeContainerStateT,
   onChange: (event: ChangeEventT) => mixed,
   stateReducer: StateReducerT,

package/popover/default-props.js.flow

@@ -5,8 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE} from './constants.js';
-import type {BasePopoverPropsT} from './types.js';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from './constants.js';
+import type { BasePopoverPropsT } from './types.js';
 
 const baseDefaultProps: $Shape<BasePopoverPropsT> = {
   accessibilityType: ACCESSIBILITY_TYPE.menu,

package/popover/index.js.flow

@@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as StatefulPopover} from './stateful-popover.js';
-export {default as StatefulContainer} from './stateful-container.js';
-export {default as Popover} from './popover.js';
+export { default as StatefulPopover } from './stateful-popover.js';
+export { default as StatefulContainer } from './stateful-container.js';
+export { default as Popover } from './popover.js';
 // Constants
 export {
   ACCESSIBILITY_TYPE,

package/popover/popover.js

@@ -185,11 +185,13 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       var popper = _this.popperRef.current;
       var anchor = _this.anchorRef.current; // Ignore document click if it came from popover or anchor
 
-      if (!popper || popper === target || popper.contains(target)) {
+      if (!popper || popper === target || // eslint-disable-next-line cup/no-undef
+      target instanceof Node && popper.contains(target)) {
         return;
       }
 
-      if (!anchor || anchor === target || anchor.contains(target)) {
+      if (!anchor || anchor === target || // eslint-disable-next-line cup/no-undef
+      target instanceof Node && popper.contains(target)) {
         return;
       }
 
@@ -556,8 +558,10 @@ _defineProperty(PopoverInner, "defaultProps", _defaultProps.default);
 
 var Popover = function Popover(props) {
   var innerRef = props.innerRef;
+  var gID = (0, _reactUid.useUID)(); //$FlowExpectedError[cannot-spread-inexact]
+
   return /*#__PURE__*/React.createElement(PopoverInner, _extends({
-    id: props.id || (0, _reactUid.useUID)(),
+    id: props.id || gID,
     ref: innerRef
   }, props));
 };

package/popover/popover.js.flow

@@ -5,12 +5,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-/* eslint-disable react/no-find-dom-node */
-/* eslint-disable cup/no-undef */
 import * as React from 'react';
-import FocusLock, {MoveFocusInside} from 'react-focus-lock';
+import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 
-import {getOverride, getOverrideProps} from '../helpers/overrides.js';
+import { getOverride, getOverrideProps } from '../helpers/overrides.js';
 import {
   ACCESSIBILITY_TYPE,
   PLACEMENT,
@@ -19,29 +17,27 @@ import {
   ANIMATE_IN_TIME,
   POPOVER_MARGIN,
 } from './constants.js';
-import {Layer, TetherBehavior} from '../layer/index.js';
+import { Layer, TetherBehavior } from '../layer/index.js';
 import {
   Arrow as StyledArrow,
   Body as StyledBody,
   Inner as StyledInner,
   Hidden,
 } from './styled-components.js';
-import {fromPopperPlacement} from './utils.js';
+import { fromPopperPlacement } from './utils.js';
 import defaultProps from './default-props.js';
-import {useUID} from 'react-uid';
+import { useUID } from 'react-uid';
 
 import type {
   AnchorPropsT,
   PopoverPropsT,
   PopoverPrivateStateT,
   SharedStylePropsArgT,
+  ReactRefT,
 } from './types.js';
-import type {PopperDataObjectT, NormalizedOffsetsT} from '../layer/types.js';
+import type { PopperDataObjectT, NormalizedOffsetsT } from '../layer/types.js';
 
-class PopoverInner extends React.Component<
-  PopoverPropsT,
-  PopoverPrivateStateT,
-> {
+class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
   static defaultProps: $Shape<PopoverPropsT> = defaultProps;
 
   /* eslint-disable react/sort-comp */
@@ -50,9 +46,9 @@ class PopoverInner extends React.Component<
   animateOutCompleteTimer: ?TimeoutID;
   onMouseEnterTimer: ?TimeoutID;
   onMouseLeaveTimer: ?TimeoutID;
-  anchorRef = (React.createRef(): {current: *});
-  popperRef = (React.createRef(): {current: *});
-  arrowRef = (React.createRef(): {current: *});
+  anchorRef = React.createRef<HTMLElement>();
+  popperRef = React.createRef<HTMLElement>();
+  arrowRef = React.createRef<HTMLElement>();
   /* eslint-enable react/sort-comp */
 
   /**
@@ -63,13 +59,10 @@ class PopoverInner extends React.Component<
   state = this.getDefaultState(this.props);
 
   componentDidMount() {
-    this.setState({isMounted: true});
+    this.setState({ isMounted: true });
   }
 
-  componentDidUpdate(
-    prevProps: PopoverPropsT,
-    prevState: PopoverPrivateStateT,
-  ) {
+  componentDidUpdate(prevProps: PopoverPropsT, prevState: PopoverPrivateStateT) {
     this.init(prevProps, prevState);
     if (
       this.props.autoFocus &&
@@ -77,7 +70,7 @@ class PopoverInner extends React.Component<
       this.popperRef.current !== null &&
       this.popperRef.current.getBoundingClientRect().top > 0
     ) {
-      this.setState({autoFocusAfterPositioning: true});
+      this.setState({ autoFocusAfterPositioning: true });
     }
 
     if (__DEV__) {
@@ -86,7 +79,7 @@ class PopoverInner extends React.Component<
         console.warn(
           `[baseui][Popover] ref has not been passed to the Popper's anchor element.
               See how to pass the ref to an anchor element in the Popover example
-              http://baseui.design/components/popover#anchor-ref-handling-example`,
+              http://baseui.design/components/popover#anchor-ref-handling-example`
         );
       }
     }
@@ -120,8 +113,8 @@ class PopoverInner extends React.Component<
   getDefaultState(props: PopoverPropsT) {
     return {
       isAnimating: false,
-      arrowOffset: {left: 0, top: 0},
-      popoverOffset: {left: 0, top: 0},
+      arrowOffset: { left: 0, top: 0 },
+      popoverOffset: { left: 0, top: 0 },
       placement: props.placement,
       isMounted: false,
       isLayerMounted: false,
@@ -131,13 +124,13 @@ class PopoverInner extends React.Component<
 
   animateIn = () => {
     if (this.props.isOpen) {
-      this.setState({isAnimating: true});
+      this.setState({ isAnimating: true });
     }
   };
 
   animateOut = () => {
     if (!this.props.isOpen) {
-      this.setState({isAnimating: true});
+      this.setState({ isAnimating: true });
       // Remove the popover from the DOM after animation finishes
       this.animateOutCompleteTimer = setTimeout(() => {
         this.setState({
@@ -156,7 +149,7 @@ class PopoverInner extends React.Component<
       this.animateOutCompleteTimer,
       this.onMouseEnterTimer,
       this.onMouseLeaveTimer,
-    ].forEach(timerId => {
+    ].forEach((timerId) => {
       if (timerId) {
         clearTimeout(timerId);
       }
@@ -197,10 +190,7 @@ class PopoverInner extends React.Component<
     this.triggerOnMouseLeaveWithDelay(e);
   };
 
-  onPopperUpdate = (
-    normalizedOffsets: NormalizedOffsetsT,
-    data: PopperDataObjectT,
-  ) => {
+  onPopperUpdate = (normalizedOffsets: NormalizedOffsetsT, data: PopperDataObjectT) => {
     const placement = fromPopperPlacement(data.placement) || PLACEMENT.top;
     this.setState({
       arrowOffset: normalizedOffsets.arrow,
@@ -215,12 +205,9 @@ class PopoverInner extends React.Component<
   };
 
   triggerOnMouseLeaveWithDelay(e: Event) {
-    const {onMouseLeaveDelay} = this.props;
+    const { onMouseLeaveDelay } = this.props;
     if (onMouseLeaveDelay) {
-      this.onMouseLeaveTimer = setTimeout(
-        () => this.triggerOnMouseLeave(e),
-        onMouseLeaveDelay,
-      );
+      this.onMouseLeaveTimer = setTimeout(() => this.triggerOnMouseLeave(e), onMouseLeaveDelay);
       return;
     }
     this.triggerOnMouseLeave(e);
@@ -233,12 +220,9 @@ class PopoverInner extends React.Component<
   };
 
   triggerOnMouseEnterWithDelay(e: Event) {
-    const {onMouseEnterDelay} = this.props;
+    const { onMouseEnterDelay } = this.props;
     if (onMouseEnterDelay) {
-      this.onMouseEnterTimer = setTimeout(
-        () => this.triggerOnMouseEnter(e),
-        onMouseEnterDelay,
-      );
+      this.onMouseEnterTimer = setTimeout(() => this.triggerOnMouseEnter(e), onMouseEnterDelay);
       return;
     }
     this.triggerOnMouseEnter(e);
@@ -256,10 +240,20 @@ class PopoverInner extends React.Component<
     const popper = this.popperRef.current;
     const anchor = this.anchorRef.current;
     // Ignore document click if it came from popover or anchor
-    if (!popper || popper === target || popper.contains(target)) {
+    if (
+      !popper ||
+      popper === target ||
+      // eslint-disable-next-line cup/no-undef
+      (target instanceof Node && popper.contains(target))
+    ) {
       return;
     }
-    if (!anchor || anchor === target || anchor.contains(target)) {
+    if (
+      !anchor ||
+      anchor === target ||
+      // eslint-disable-next-line cup/no-undef
+      (target instanceof Node && popper.contains(target))
+    ) {
       return;
     }
     if (this.props.onClickOutside) {
@@ -293,7 +287,7 @@ class PopoverInner extends React.Component<
   }
 
   getAnchorProps() {
-    const {isOpen} = this.props;
+    const { isOpen } = this.props;
 
     const anchorProps: AnchorPropsT = {
       'aria-haspopup': 'true',
@@ -304,9 +298,7 @@ class PopoverInner extends React.Component<
 
     const popoverId = this.getPopoverIdAttr();
     if (this.isAccessibilityTypeMenu()) {
-      const relationAttr = this.isClickTrigger()
-        ? 'aria-controls'
-        : 'aria-owns';
+      const relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
       anchorProps[relationAttr] = isOpen ? popoverId : null;
     } else if (this.isAccessibilityTypeTooltip()) {
       anchorProps.id = this.getAnchorIdAttr();
@@ -344,9 +336,9 @@ class PopoverInner extends React.Component<
     return bodyProps;
   }
 
-  getSharedProps(): $Diff<SharedStylePropsArgT, {children?: React.Node}> {
-    const {isOpen, showArrow, popoverMargin = POPOVER_MARGIN} = this.props;
-    const {isAnimating, arrowOffset, popoverOffset, placement} = this.state;
+  getSharedProps(): $Diff<SharedStylePropsArgT, { children?: React.Node }> {
+    const { isOpen, showArrow, popoverMargin = POPOVER_MARGIN } = this.props;
+    const { isAnimating, arrowOffset, popoverOffset, placement } = this.state;
     return {
       $showArrow: !!showArrow,
       $arrowOffset: arrowOffset,
@@ -360,12 +352,12 @@ class PopoverInner extends React.Component<
   }
 
   getAnchorFromChildren() {
-    const {children} = this.props;
+    const { children } = this.props;
     const childArray = React.Children.toArray(children);
     if (childArray.length !== 1) {
       // eslint-disable-next-line no-console
       console.error(
-        `[baseui] Exactly 1 child must be passed to Popover/Tooltip, found ${childArray.length} children`,
+        `[baseui] Exactly 1 child must be passed to Popover/Tooltip, found ${childArray.length} children`
       );
     }
     return childArray[0];
@@ -387,13 +379,9 @@ class PopoverInner extends React.Component<
   }
 
   renderPopover(renderedContent: React.Node) {
-    const {showArrow, overrides = {}} = this.props;
+    const { showArrow, overrides = {} } = this.props;
 
-    const {
-      Arrow: ArrowOverride,
-      Body: BodyOverride,
-      Inner: InnerOverride,
-    } = overrides;
+    const { Arrow: ArrowOverride, Body: BodyOverride, Inner: InnerOverride } = overrides;
 
     const Arrow = getOverride(ArrowOverride) || StyledArrow;
     const Body = getOverride(BodyOverride) || StyledBody;
@@ -427,19 +415,18 @@ class PopoverInner extends React.Component<
   }
 
   renderContent() {
-    const {content} = this.props;
+    const { content } = this.props;
     return typeof content === 'function' ? content() : content;
   }
 
   render() {
     const mountedAndOpen = this.state.isMounted && this.props.isOpen;
     const rendered = [this.renderAnchor()];
-    const renderedContent =
-      mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
+    const renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
 
     const defaultPopperOptions = {
       modifiers: {
-        preventOverflow: {enabled: !this.props.ignoreBoundary, padding: 0},
+        preventOverflow: { enabled: !this.props.ignoreBoundary, padding: 0 },
       },
     };
     // Only render popover on the browser (portals aren't supported server-side)
@@ -450,12 +437,10 @@ class PopoverInner extends React.Component<
             key="new-layer"
             mountNode={this.props.mountNode}
             onEscape={this.props.onEsc}
-            onDocumentClick={
-              this.isHoverTrigger() ? undefined : this.onDocumentClick
-            }
+            onDocumentClick={this.isHoverTrigger() ? undefined : this.onDocumentClick}
             isHoverLayer={this.isHoverTrigger()}
-            onMount={() => this.setState({isLayerMounted: true})}
-            onUnmount={() => this.setState({isLayerMounted: false})}
+            onMount={() => this.setState({ isLayerMounted: true })}
+            onUnmount={() => this.setState({ isLayerMounted: false })}
           >
             <TetherBehavior
               anchorRef={this.anchorRef.current}
@@ -485,16 +470,13 @@ class PopoverInner extends React.Component<
                 </FocusLock>
               ) : (
                 <MoveFocusInside
-                  disabled={
-                    !this.props.autoFocus ||
-                    !this.state.autoFocusAfterPositioning
-                  }
+                  disabled={!this.props.autoFocus || !this.state.autoFocusAfterPositioning}
                 >
                   {this.renderPopover(renderedContent)}
                 </MoveFocusInside>
               )}
             </TetherBehavior>
-          </Layer>,
+          </Layer>
         );
       } else {
         rendered.push(<Hidden key="hidden-layer">{renderedContent}</Hidden>);
@@ -505,9 +487,11 @@ class PopoverInner extends React.Component<
 }
 
 // Remove when Popover is converted to a functional component.
-const Popover = (props: PopoverPropsT & {innerRef?: React$ElementRef<*>}) => {
-  const {innerRef} = props;
-  return <PopoverInner id={props.id || useUID()} ref={innerRef} {...props} />;
+const Popover = (props: PopoverPropsT & { innerRef?: ReactRefT<HTMLElement> }) => {
+  const { innerRef } = props;
+  const gID = useUID();
+  //$FlowExpectedError[cannot-spread-inexact]
+  return <PopoverInner id={props.id || gID} ref={innerRef} {...props} />;
 };
 
 Popover.defaultProps = defaultProps;

package/popover/stateful-container.js.flow

@@ -23,10 +23,7 @@ import type {
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
-class StatefulContainer extends React.Component<
-  StatefulPopoverContainerPropsT,
-  StateT,
-> {
+class StatefulContainer extends React.Component<StatefulPopoverContainerPropsT, StateT> {
   static defaultProps: $Shape<StatefulPopoverContainerPropsT> = {
     accessibilityType: ACCESSIBILITY_TYPE.menu,
     ignoreBoundary: false,
@@ -121,12 +118,12 @@ class StatefulContainer extends React.Component<
   }
 
   internalSetState(type: StateChangeTypeT, changes: StateT) {
-    const {stateReducer} = this.props;
+    const { stateReducer } = this.props;
     if (typeof stateReducer !== 'function') {
       this.setState(changes);
       return;
     }
-    this.setState(prevState => stateReducer(type, changes, prevState));
+    this.setState((prevState) => stateReducer(type, changes, prevState));
   }
 
   /**
@@ -140,9 +137,9 @@ class StatefulContainer extends React.Component<
    * </StatefulPopover>
    */
   renderContent = () => {
-    const {content} = this.props;
+    const { content } = this.props;
     if (typeof content === 'function') {
-      return content({close: this.onContentClose});
+      return content({ close: this.onContentClose });
     }
     return content;
   };

package/popover/stateful-popover.js.flow

@@ -6,21 +6,16 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {
-  ACCESSIBILITY_TYPE,
-  PLACEMENT,
-  TRIGGER_TYPE,
-  POPOVER_MARGIN,
-} from './constants.js';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, POPOVER_MARGIN } from './constants.js';
 import StatefulContainer from './stateful-container.js';
 import Popover from './popover.js';
-import type {StatefulPopoverPropsT} from './types.js';
+import type { StatefulPopoverPropsT } from './types.js';
 
 function StatefulPopover(props: StatefulPopoverPropsT) {
-  const {children, ...restProps} = props;
+  const { children, ...restProps } = props;
   return (
     <StatefulContainer {...restProps}>
-      {popoverProps => <Popover {...popoverProps}>{children}</Popover>}
+      {(popoverProps) => <Popover {...popoverProps}>{children}</Popover>}
     </StatefulContainer>
   );
 }

package/popover/styled-components.js.flow

@@ -5,25 +5,21 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
-import {ARROW_SIZE, ARROW_WIDTH} from './constants.js';
+import { styled } from '../styles/index.js';
+import { ARROW_SIZE, ARROW_WIDTH } from './constants.js';
 import {
   getPopoverMarginStyles,
   getArrowPositionStyles,
   getStartPosition,
   getEndPosition,
 } from './utils.js';
-import type {
-  ArrowStylePropsArgT,
-  BodyStylePropsArgT,
-  InnerStylePropsArgT,
-} from './types.js';
-import type {ThemeT} from '../styles/types.js';
+import type { ArrowStylePropsArgT, BodyStylePropsArgT, InnerStylePropsArgT } from './types.js';
+import type { ThemeT } from '../styles/types.js';
 
 /**
  * Main popover container element that gets positioned next to the anchor
  */
-export function getBodyStyles(props: BodyStylePropsArgT & {$theme: ThemeT}) {
+export function getBodyStyles(props: BodyStylePropsArgT & { $theme: ThemeT }) {
   const {
     $isOpen,
     $isAnimating,
@@ -54,24 +50,15 @@ export function getBodyStyles(props: BodyStylePropsArgT & {$theme: ThemeT}) {
     transform:
       $isAnimating && $isOpen
         ? getEndPosition($popoverOffset)
-        : getStartPosition(
-            $popoverOffset,
-            $placement,
-            $showArrow ? ARROW_SIZE : 0,
-            $popoverMargin,
-          ),
-    ...getPopoverMarginStyles(
-      $showArrow ? ARROW_SIZE : 0,
-      $placement,
-      $popoverMargin,
-    ),
+        : getStartPosition($popoverOffset, $placement, $showArrow ? ARROW_SIZE : 0, $popoverMargin),
+    ...getPopoverMarginStyles($showArrow ? ARROW_SIZE : 0, $placement, $popoverMargin),
     ...($isHoverTrigger
       ? {
           animationDuration: '.1s',
           animationName: {
-            '0%': {pointerEvents: 'none'},
-            '99%': {pointerEvents: 'none'},
-            '100%': {pointerEvents: 'auto'},
+            '0%': { pointerEvents: 'none' },
+            '99%': { pointerEvents: 'none' },
+            '100%': { pointerEvents: 'auto' },
           },
         }
       : {}),
@@ -83,8 +70,8 @@ export const Body = styled<BodyStylePropsArgT>('div', getBodyStyles);
 /**
  * Arrow shown between the popover and the anchor element
  */
-export function getArrowStyles(props: ArrowStylePropsArgT & {$theme: ThemeT}) {
-  const {$arrowOffset, $placement, $theme} = props;
+export function getArrowStyles(props: ArrowStylePropsArgT & { $theme: ThemeT }) {
+  const { $arrowOffset, $placement, $theme } = props;
   return {
     backgroundColor: $theme.colors.backgroundTertiary,
     boxShadow: $theme.lighting.shadow600,
@@ -104,7 +91,7 @@ export const Arrow = styled<ArrowStylePropsArgT>('div', getArrowStyles);
  * and rendering this extra element on top with a solid background
  * clips the part of the arrow that extends into the popover.
  */
-export function getInnerStyles({$theme}: {$theme: ThemeT}) {
+export function getInnerStyles({ $theme }: { $theme: ThemeT }) {
   return {
     backgroundColor: $theme.colors.backgroundTertiary,
     borderTopLeftRadius: $theme.borders.popoverBorderRadius,

package/popover/types.js.flow

@@ -7,25 +7,16 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import type {TetherPlacementT} from '../layer/types.js';
-import {
-  ACCESSIBILITY_TYPE,
-  STATE_CHANGE_TYPE,
-  TRIGGER_TYPE,
-} from './constants.js';
-
-export type {
-  PopperDataObjectT,
-  PopperOffsetT,
-  PopperOptionsT,
-} from '../layer/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { TetherPlacementT } from '../layer/types.js';
+import { ACCESSIBILITY_TYPE, STATE_CHANGE_TYPE, TRIGGER_TYPE } from './constants.js';
 
-export type PopoverPlacementT = TetherPlacementT;
+export type { PopperDataObjectT, PopperOffsetT, PopperOptionsT } from '../layer/types.js';
 
+export type PopoverPlacementT = TetherPlacementT;
 export type TriggerTypeT = $Keys<typeof TRIGGER_TYPE>;
-
 export type AccessibilityTypeT = $Keys<typeof ACCESSIBILITY_TYPE>;
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type StateT = {
   isOpen: boolean,
@@ -36,7 +27,7 @@ export type StateChangeTypeT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type StateReducerT = (
   stateChangeType: StateChangeTypeT,
   nextState: StateT,
-  currentState: StateT,
+  currentState: StateT
 ) => StateT;
 
 export type ContentRenderPropT = () => React.Node;
@@ -99,17 +90,14 @@ export type BasePopoverPropsT = {
   /** Popper options override
    * https://github.com/popperjs/popper.js/blob/v1.x/docs/_includes/popper-documentation.md
    */
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   popperOptions?: any,
   /** Renders all popover content for SEO purposes regardless of popover isOpen state */
   renderAll?: boolean,
   /** If true, focus will shift back to the original element that triggered the popover
    * Be careful with elements that open the popover on focus (e.g. input) this will cause the popover to reopen on close!
    */
-  returnFocus?:
-    | boolean
-    | FocusOptions
-    | ((returnTo: Element) => boolean | FocusOptions),
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions),
   /** Whether or not to show the arrow pointing from the popover to the trigger. */
   showArrow?: boolean,
   /** Whether to toggle the popover when trigger is clicked or hovered. */
@@ -159,15 +147,12 @@ export type StatefulPopoverPropsT = BasePopoverPropsT & {
 // Props for state container
 export type StatefulPopoverContainerPropsT = $Diff<
   StatefulPopoverPropsT,
-  {children: React.Node},
+  { children: React.Node }
 > & {
-  children: (props: $Diff<PopoverPropsT, {children: React.Node}>) => React.Node,
+  children: (props: $Diff<PopoverPropsT, { children: React.Node }>) => React.Node,
 };
 
-export type PopoverPropsWithoutChildrenT = $Diff<
-  PopoverPropsT,
-  {children: React.Node},
->;
+export type PopoverPropsWithoutChildrenT = $Diff<PopoverPropsT, { children: React.Node }>;
 
 export type OffsetT = {
   top: number,
@@ -221,7 +206,7 @@ export type AnchorPropsT = {
   onFocus?: (e: Event) => mixed,
   onMouseEnter?: (e: Event) => mixed,
   onMouseLeave?: (e: Event) => mixed,
-  ref?: React.Ref<*>,
+  ref?: ReactRefT<HTMLElement>,
   tabIndex?: number,
 };