refactor!: Migrate to new JSX transform (react-bootstrap#5695)

* refactor: Migrate to import * as React from 'react'

* Bump deps
Remove import * from docs

* Fix yarn lock

Author: kyletsang

package.json

@@ -67,7 +67,7 @@
     "@types/classnames": "^2.2.10",
     "@types/invariant": "^2.2.33",
     "@types/prop-types": "^15.7.3",
-    "@types/react": ">=16.9.35",
+    "@types/react": ">=16.14.4",
     "@types/react-transition-group": "^4.4.1",
     "@types/warning": "^3.0.0",
     "classnames": "^2.2.6",
@@ -87,8 +87,8 @@
     "@babel/core": "^7.13.8",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/register": "^7.13.8",
-    "@react-bootstrap/babel-preset": "^1.2.0",
-    "@react-bootstrap/eslint-config": "^1.3.2",
+    "@react-bootstrap/babel-preset": "^2.0.0",
+    "@react-bootstrap/eslint-config": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
     "babel-eslint": "^10.1.0",
@@ -141,8 +141,8 @@
     "webpack": "^5.24.3"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
   },
   "publishConfig": {
     "directory": "lib"

src/AbstractNav.tsx

@@ -1,6 +1,7 @@
 import qsa from 'dom-helpers/querySelectorAll';
 import PropTypes from 'prop-types';
-import React, { useContext, useEffect, useRef } from 'react';
+import * as React from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import useForceUpdate from '@restart/hooks/useForceUpdate';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import NavContext from './NavContext';

src/AbstractNavItem.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import useEventCallback from '@restart/hooks/useEventCallback';
 
 import warning from 'warning';

src/Accordion.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
+import * as React from 'react';
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useUncontrolled } from 'uncontrollable';
 import { useBootstrapPrefix } from './ThemeProvider';

src/AccordionBody.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import AccordionCollapse from './AccordionCollapse';

src/AccordionButton.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import AccordionContext from './AccordionContext';

src/AccordionCollapse.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import Collapse, { CollapseProps } from './Collapse';

src/AccordionContext.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SelectCallback } from './helpers';
 
 export interface AccordionContextValue {

src/AccordionHeader.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import AccordionButton from './AccordionButton';

src/AccordionItem.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
+import * as React from 'react';
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import AccordionItemContext, {

src/AccordionItemContext.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export interface AccordionItemContextValue {
   eventKey: string;

src/Alert.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { elementType } from 'prop-types-extra';
 import { useUncontrolled } from 'uncontrollable';

src/Badge.tsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

src/Breadcrumb.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';

src/BreadcrumbItem.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import SafeAnchor from './SafeAnchor';

src/Button.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';

src/ButtonGroup.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';

src/ButtonToolbar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 
 import { useBootstrapPrefix } from './ThemeProvider';
 

src/Card.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
+import * as React from 'react';
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';

src/CardContext.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 interface CardContextType {
   cardHeaderBsPrefix: string;

src/CardImg.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';

src/Carousel.tsx

@@ -6,7 +6,8 @@ import classNames from 'classnames';
 import transitionEnd from 'dom-helpers/transitionEnd';
 import Transition from 'react-transition-group/Transition';
 import PropTypes from 'prop-types';
-import React, {
+import * as React from 'react';
+import {
   useCallback,
   useEffect,
   useImperativeHandle,

src/CarouselItem.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

src/CloseButton.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 
 export type CloseButtonVariant = 'white';

src/Col.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';

src/Collapse.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import css from 'dom-helpers/css';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import * as React from 'react';
+import { useMemo } from 'react';
 import Transition, {
   ENTERED,
   ENTERING,

src/Container.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';

src/Dropdown.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import BaseDropdown from 'react-overlays/Dropdown';
 import { DropDirection } from 'react-overlays/DropdownContext';
 import { useUncontrolled } from 'uncontrollable';

src/DropdownButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import Dropdown, { DropdownProps } from './Dropdown';

src/DropdownItem.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import useEventCallback from '@restart/hooks/useEventCallback';
 
 import SelectableContext, { makeEventKey } from './SelectableContext';

src/DropdownMenu.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import {
   useDropdownMenu,
   UseDropdownMenuOptions,

src/DropdownToggle.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
-import React from 'react';
+import * as React from 'react';
 import { useDropdownToggle } from 'react-overlays/DropdownToggle';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import Button, { ButtonProps, CommonButtonProps } from './Button';

src/ElementChildren.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 /**
  * Iterates through children that are typically specified as `props.children`,

src/Fade.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback } from 'react';
+import * as React from 'react';
+import { useCallback } from 'react';
 import Transition, {
   ENTERED,
   ENTERING,

src/Feedback.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { AsProp, BsPrefixRefForwardingComponent } from './helpers';
 

src/FigureImage.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 
 import Image, { ImageProps, propTypes as imagePropTypes } from './Image';
 

src/Form.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 import FormCheck from './FormCheck';
 import FormControl from './FormControl';
 import FormGroup from './FormGroup';

src/FormCheck.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import * as React from 'react';
+import { useContext, useMemo } from 'react';
 import Feedback from './Feedback';
 import FormCheckInput from './FormCheckInput';
 import FormCheckLabel from './FormCheckLabel';

src/FormCheckInput.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import FormContext from './FormContext';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

src/FormCheckLabel.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import FormContext from './FormContext';
 import { useBootstrapPrefix } from './ThemeProvider';
 

src/FormContext.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 // TODO
 interface FormContextType {

src/FormControl.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import warning from 'warning';
 import Feedback from './Feedback';
 import FormContext from './FormContext';

src/FormGroup.tsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import * as React from 'react';
+import { useMemo } from 'react';
 
 import FormContext from './FormContext';
 import { AsProp, BsPrefixRefForwardingComponent } from './helpers';

src/FormLabel.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import warning from 'warning';
 
 import Col, { ColProps } from './Col';

src/FormRange.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixAndClassNameOnlyProps } from './helpers';
 

src/FormSelect.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 import { useBootstrapPrefix } from './ThemeProvider';
 import {
   BsPrefixAndClassNameOnlyProps,

src/FormText.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import React from 'react';
+import * as React from 'react';
 
 import { useBootstrapPrefix } from './ThemeProvider';
 

src/Image.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';