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

…types
react-bootstrap · Apr 20, 2020 · 7d31d53 · 7d31d53
1 parent 5869799
commit 7d31d53
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 70 deletions.
diff --git a/package.json b/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.0",
     "react-transition-group": "^4.0.0",
     "uncontrollable": "^7.0.0",
     "warning": "^4.0.3"

diff --git a/src/Overlay.js b/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 }) {

diff --git a/src/OverlayTrigger.js b/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),
     [],
   );
 

diff --git a/types/components/Dropdown.d.ts b/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;
 }
 

diff --git a/types/components/Modal.d.ts b/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<

diff --git a/types/components/Overlay.d.ts b/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'> {
   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;
diff --git a/types/components/OverlayTrigger.d.ts b/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;

diff --git a/types/components/Popover.d.ts b/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;
diff --git a/types/components/Tooltip.d.ts b/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;
diff --git a/yarn.lock b/yarn.lock
@@ -1078,6 +1078,11 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -6855,14 +6860,15 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-overlays@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-3.0.1.tgz#0a007d8d8b97d8e85bb23b2fbe2fb336d82422db"
-  integrity sha512-QEt6I3Cjy06pe2FwY/tuWaXEzSVOuXfP8zsC6oWHJhMYpEJQgZV/TCwbCw5slMW6VcgwcWPc4HrBzN0yfxf5Xw==
+react-overlays@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-3.1.0.tgz#87a3891a192ee0662e73e35f3d880eae90b09ba3"
+  integrity sha512-YIoOG8tUvYHUHHazFDusm2f0UM78Wb47QD8eCNAUW3nTyp1NnGcH22Lzq80G1lUxtCPBrocVxjftdc0zAElgvA==
   dependencies:
     "@babel/runtime" "^7.4.5"
     "@popperjs/core" "^2.0.0"
     "@restart/hooks" "^0.3.12"
+    "@types/warning" "^3.0.0"
     dom-helpers "^5.1.0"
     prop-types "^15.7.2"
     uncontrollable "^7.0.0"