fix: use upstream types and fix Overlay, Modal, Tooltip, and Popover … (

#5124)

* fix: use upstream types and fix Overlay, Modal, Tooltip, and Popover types

* fix types

* fix lint

package.json

@@ -72,7 +72,7 @@
     "invariant": "^2.2.4",
     "prop-types": "^15.7.2",
     "prop-types-extra": "^1.1.0",
-    "react-overlays": "^3.0.1",
+    "react-overlays": "^3.1.2",
     "react-transition-group": "^4.0.0",
     "uncontrollable": "^7.0.0",
     "warning": "^4.0.3"

src/FormCheck.js

@@ -117,10 +117,11 @@ const FormCheck = React.forwardRef(
     ref,
   ) => {
     const custom = type === 'switch' ? true : propCustom;
+    let [prefix, defaultPrefix] = custom
+      ? [bsCustomPrefix, 'custom-control']
+      : [bsPrefix, 'form-check'];
 
-    bsPrefix = custom
-      ? useBootstrapPrefix(bsCustomPrefix, 'custom-control')
-      : useBootstrapPrefix(bsPrefix, 'form-check');
+    bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);
 
     const { controlId } = useContext(FormContext);
     const innerFormContext = useMemo(

src/FormCheckInput.js

@@ -64,9 +64,11 @@ const FormCheckInput = React.forwardRef(
     ref,
   ) => {
     const { controlId, custom } = useContext(FormContext);
-    bsPrefix = custom
-      ? useBootstrapPrefix(bsCustomPrefix, 'custom-control-input')
-      : useBootstrapPrefix(bsPrefix, 'form-check-input');
+    const [prefix, defaultPrefix] = custom
+      ? [bsCustomPrefix, 'custom-control-input']
+      : [bsPrefix, 'form-check-input'];
+
+    bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);
 
     return (
       <Component

src/FormCheckLabel.js

@@ -24,9 +24,11 @@ const propTypes = {
 const FormCheckLabel = React.forwardRef(
   ({ bsPrefix, bsCustomPrefix, className, htmlFor, ...props }, ref) => {
     const { controlId, custom } = useContext(FormContext);
-    bsPrefix = custom
-      ? useBootstrapPrefix(bsCustomPrefix, 'custom-control-label')
-      : useBootstrapPrefix(bsPrefix, 'form-check-label');
+    const [prefix, defaultPrefix] = custom
+      ? [bsCustomPrefix, 'custom-control-label']
+      : [bsPrefix, 'form-check-label'];
+
+    bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);
 
     return (
       <label // eslint-disable-line jsx-a11y/label-has-associated-control

src/FormControl.js

@@ -118,9 +118,12 @@ const FormControl = React.forwardRef(
     ref,
   ) => {
     const { controlId } = useContext(FormContext);
-    bsPrefix = custom
-      ? useBootstrapPrefix(bsCustomPrefix, 'custom')
-      : useBootstrapPrefix(bsPrefix, 'form-control');
+    const [prefix, defaultPrefix] = custom
+      ? [bsCustomPrefix, 'custom']
+      : [bsPrefix, 'form-control'];
+
+    bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);
+
     let classes;
     if (plaintext) {
       classes = { [`${bsPrefix}-plaintext`]: true };

src/FormFile.js

@@ -129,9 +129,11 @@ const FormFile = React.forwardRef(
     },
     ref,
   ) => {
-    bsPrefix = custom
-      ? useBootstrapPrefix(bsCustomPrefix, 'custom')
-      : useBootstrapPrefix(bsPrefix, 'form-file');
+    const [prefix, defaultPrefix] = custom
+      ? [bsCustomPrefix, 'custom']
+      : [bsPrefix, 'form-file'];
+
+    bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);
 
     const type = 'file';
     const { controlId } = useContext(FormContext);

src/FormFileInput.js

@@ -55,9 +55,12 @@ const FormFileInput = React.forwardRef(
   ) => {
     const { controlId, custom } = useContext(FormContext);
     const type = 'file';
-    bsPrefix = custom
-      ? useBootstrapPrefix(bsCustomPrefix, 'custom-file-input')
-      : useBootstrapPrefix(bsPrefix, 'form-control-file');
+
+    const [prefix, defaultPrefix] = custom
+      ? [bsCustomPrefix, 'custom-file-input']
+      : [bsPrefix, 'form-control-file'];
+
+    bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);
 
     return (
       <Component

src/FormFileLabel.js

@@ -27,9 +27,11 @@ const propTypes = {
 const FormFileLabel = React.forwardRef(
   ({ bsPrefix, bsCustomPrefix, className, htmlFor, ...props }, ref) => {
     const { controlId, custom } = useContext(FormContext);
-    bsPrefix = custom
-      ? useBootstrapPrefix(bsCustomPrefix, 'custom-file-label')
-      : useBootstrapPrefix(bsPrefix, 'form-file-label');
+    const [prefix, defaultPrefix] = custom
+      ? [bsCustomPrefix, 'custom-file-label']
+      : [bsPrefix, 'form-file-label'];
+
+    bsPrefix = useBootstrapPrefix(prefix, defaultPrefix);
 
     return (
       <label // eslint-disable-line jsx-a11y/label-has-associated-control

src/Overlay.js

@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
-import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import BaseOverlay from 'react-overlays/Overlay';
+import safeFindDOMNode from 'react-overlays/safeFindDOMNode';
 import { componentOrElement, elementType } from 'prop-types-extra';
 
 import Fade from './Fade';
@@ -115,9 +115,9 @@ function wrapRefs(props, arrowProps) {
   const { ref } = props;
   const { ref: aRef } = arrowProps;
 
-  props.ref = ref.__wrapped || (ref.__wrapped = (r) => ref(findDOMNode(r)));
+  props.ref = ref.__wrapped || (ref.__wrapped = (r) => ref(safeFindDOMNode(r)));
   arrowProps.ref =
-    aRef.__wrapped || (aRef.__wrapped = (r) => aRef(findDOMNode(r)));
+    aRef.__wrapped || (aRef.__wrapped = (r) => aRef(safeFindDOMNode(r)));
 }
 
 function Overlay({ children: overlay, transition, ...outerProps }) {

src/OverlayTrigger.js

@@ -2,7 +2,7 @@ import contains from 'dom-helpers/contains';
 import PropTypes from 'prop-types';
 import React, { cloneElement, useCallback, useRef, useState } from 'react';
 import useTimeout from '@restart/hooks/useTimeout';
-import ReactDOM from 'react-dom';
+import safeFindDOMNode from 'react-overlays/safeFindDOMNode';
 import warning from 'warning';
 import Overlay from './Overlay';
 
@@ -142,7 +142,7 @@ function OverlayTrigger({
   const { onFocus, onBlur, onClick } = child.props;
 
   const getTarget = useCallback(
-    () => ReactDOM.findDOMNode(triggerNodeRef.current),
+    () => safeFindDOMNode(triggerNodeRef.current),
     [],
   );
 

types/components/Dropdown.d.ts

@@ -24,6 +24,7 @@ export interface DropdownProps {
     event: React.SyntheticEvent<Dropdown>,
     metadata: { source: 'select' | 'click' | 'rootClose' | 'keydown' },
   ) => void;
+  focusFirstItemOnShow?: boolean | 'keyboard';
   onSelect?: SelectCallback;
 }
 

types/components/Modal.d.ts

@@ -1,33 +1,30 @@
 import * as React from 'react';
+import * as BaseModal from 'react-overlays/Modal';
 
 import ModalBody from './ModalBody';
 import ModalDialog from './ModalDialog';
 import ModalFooter from './ModalFooter';
 import ModalHeader from './ModalHeader';
 import ModalTitle from './ModalTitle';
 
-import { BsPrefixComponent, TransitionCallbacks } from './helpers';
+import { BsPrefixComponent } from './helpers';
 
-export interface ModalProps extends TransitionCallbacks {
+export interface ModalProps
+  extends Omit<
+    BaseModal.ModalProps,
+    | 'role'
+    | 'renderBackdrop'
+    | 'renderDialog'
+    | 'transition'
+    | 'backdropTransition'
+  > {
   size?: 'sm' | 'lg' | 'xl';
   centered?: boolean;
-  backdrop?: 'static' | boolean;
   backdropClassName?: string;
-  keyboard?: boolean;
   animation?: boolean;
   dialogClassName?: string;
   dialogAs?: React.ElementType;
-  autoFocus?: boolean;
-  enforceFocus?: boolean;
-  restoreFocus?: boolean;
-  restoreFocusOptions?: FocusOptions;
-  show?: boolean;
-  onShow?: () => void;
-  onHide?: () => void;
-  container?: any;
   scrollable?: boolean;
-  onEscapeKeyDown?: () => void;
-  manager?: any;
 }
 
 declare class Modal<

types/components/Overlay.d.ts

@@ -1,28 +1,16 @@
 import * as React from 'react';
+import * as BaseOverlay from 'react-overlays/Overlay';
 
-import { TransitionCallbacks } from './helpers';
-
-type ComponentOrElement = React.ReactInstance | Node;
-export type Placement =
-  | 'auto-start'
-  | 'auto'
-  | 'auto-end'
-  | 'top-start'
-  | 'top'
-  | 'top-end'
-  | 'right-start'
-  | 'right'
-  | 'right-end'
-  | 'bottom-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'left-end'
-  | 'left'
-  | 'left-start';
+export type Placement = import('react-overlays/usePopper').Placement;
 
 export interface OverlayInjectedProps {
-  show: boolean;
+  ref: (instance: HTMLElement) => void;
+  style: React.CSSProperties;
+  'aria-labelledby'?: string;
+
   arrowProps: { ref: any; style: object };
+
+  show: boolean;
   popper: {
     state: any;
     outOfBoundaries: boolean;
@@ -36,19 +24,13 @@ export type OverlayChildren =
   | React.ReactElement<OverlayInjectedProps>
   | ((injected: OverlayInjectedProps) => React.ReactNode);
 
-export interface OverlayProps extends TransitionCallbacks {
+export interface OverlayProps
+  extends Omit<BaseOverlay.OverlayProps, 'children' | 'transition'> {
   children: OverlayChildren;
-  container?: ComponentOrElement | ((props: object) => ComponentOrElement);
-  target?: ComponentOrElement | ((props: object) => ComponentOrElement);
-  show?: boolean;
-  popperConfig?: object;
-  rootClose?: boolean;
-  rootCloseEvent?: 'click' | 'mousedown';
-  onHide?: (event: React.SyntheticEvent) => void;
-  transition?: boolean | React.ElementType;
+  transition?: boolean | BaseOverlay.OverlayProps['transition'];
   placement?: Placement;
 }
 
-declare class Overlay extends React.Component<OverlayProps> {}
+declare const Overlay: React.FunctionComponent<OverlayProps>;
 
 export default Overlay;

types/components/OverlayTrigger.d.ts

@@ -2,11 +2,12 @@ import * as React from 'react';
 
 import { OverlayChildren, OverlayProps } from './Overlay';
 
-type TriggerType = 'hover' | 'click' | 'focus';
+export type OverlayTriggerType = 'hover' | 'click' | 'focus';
 
-export interface OverlayTriggerProps extends Omit<OverlayProps, 'children'> {
+export interface OverlayTriggerProps
+  extends Omit<OverlayProps, 'children' | 'target'> {
   children: React.ReactNode;
-  trigger?: TriggerType | TriggerType[];
+  trigger?: OverlayTriggerType | OverlayTriggerType[];
   delay?: number | { show: number; hide: number };
   defaultShow?: boolean;
   flip?: boolean;

types/components/Popover.d.ts

@@ -4,19 +4,21 @@ import { Placement } from './Overlay';
 import PopoverContent from './PopoverContent';
 import PopoverTitle from './PopoverTitle';
 
-import { BsPrefixComponent } from './helpers';
-
-export interface PopoverProps {
-  id: string | number;
+export interface PopoverProps extends React.ComponentPropsWithoutRef<'div'> {
+  bsPrefix?: string;
+  id: string;
   placement?: Placement;
-  title?: React.ReactNode;
+  title?: string;
   arrowProps?: { ref: any; style: object };
   content?: boolean;
 }
 
-declare class Popover extends BsPrefixComponent<'div', PopoverProps> {
-  static Title: typeof PopoverTitle;
-  static Content: typeof PopoverContent;
+declare interface Popover
+  extends React.ForwardRefRenderFunction<HTMLDivElement, PopoverProps> {
+  Title: typeof PopoverTitle;
+  Content: typeof PopoverContent;
 }
 
+declare const Popover: Popover;
+
 export default Popover;

types/components/Tooltip.d.ts

@@ -1,13 +1,15 @@
 import { Placement } from './Overlay';
 
-import { BsPrefixComponent } from './helpers';
-
-export interface TooltipProps {
-  id: string | number;
+export interface TooltipProps extends React.ComponentPropsWithoutRef<'div'> {
+  bsPrefix?: string;
+  id: string;
   placement?: Placement;
   arrowProps?: { ref: any; style: object };
 }
 
-declare class Tooltip extends BsPrefixComponent<'div', TooltipProps> {}
+declare const Tooltip: React.ForwardRefRenderFunction<
+  HTMLDivElement,
+  TooltipProps
+>;
 
 export default Tooltip;

types/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["es2016", "dom"],