Merge pull request react-bootstrap#5698 from react-bootstrap/v5-merge

Merge master into bs5-dev

Author: kyletsang

.eslintrc

@@ -1,14 +1,6 @@
 {
-  "extends": [
-    "@react-bootstrap",
-    "4catalyzer-typescript",
-    "prettier",
-    "prettier/react",
-    "prettier/@typescript-eslint"
-  ],
-  "plugins": [
-    "prettier"
-  ],
+  "extends": ["@react-bootstrap", "4catalyzer-typescript", "prettier"],
+  "plugins": ["prettier"],
   "rules": {
     "import/extensions": "off",
     "prettier/prettier": "warn"

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.5.1](https://github.com/react-bootstrap/react-bootstrap/compare/v1.5.0...v1.5.1) (2021-03-02)
+
+
+
+
+
 # [1.5.0](https://github.com/react-bootstrap/react-bootstrap/compare/v1.4.3...v1.5.0) (2021-02-16)
 
 

karma.conf.js

@@ -32,14 +32,16 @@ module.exports = (config) => {
       resolve: {
         symlinks: false,
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        // for Enzyme/Cheerio
+        fallback: { stream: require.resolve('stream-browserify') },
       },
       plugins: [
         new DefinePlugin({
           __DEV__: true,
           'process.env.NODE_ENV': JSON.stringify('test'),
         }),
       ],
-      devtool: 'cheap-module-inline-source-map',
+      devtool: 'inline-cheap-module-source-map',
       stats: 'minimal',
     },
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Bootstrap 4 components built with React",
   "keywords": [
     "react",
@@ -61,51 +61,51 @@
     "trailingComma": "all"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.2",
+    "@babel/runtime": "^7.13.8",
     "@restart/context": "^2.1.4",
-    "@restart/hooks": "^0.3.21",
+    "@restart/hooks": "^0.3.26",
     "@types/classnames": "^2.2.10",
     "@types/invariant": "^2.2.33",
     "@types/prop-types": "^15.7.3",
     "@types/react": ">=16.9.35",
-    "@types/react-transition-group": "^4.4.0",
+    "@types/react-transition-group": "^4.4.1",
     "@types/warning": "^3.0.0",
     "classnames": "^2.2.6",
     "dom-helpers": "^5.1.2",
     "invariant": "^2.2.4",
     "prop-types": "^15.7.2",
     "prop-types-extra": "^1.1.0",
-    "react-overlays": "^4.1.1",
+    "react-overlays": "^5.0.0",
     "react-transition-group": "^4.4.1",
-    "uncontrollable": "^7.0.0",
+    "uncontrollable": "^7.2.1",
     "warning": "^4.0.3"
   },
   "devDependencies": {
     "@4c/rollout": "^2.2.0",
     "@4c/tsconfig": "^0.3.1",
-    "@babel/cli": "^7.12.13",
-    "@babel/core": "^7.12.13",
-    "@babel/preset-typescript": "^7.12.13",
-    "@babel/register": "^7.12.13",
+    "@babel/cli": "^7.13.0",
+    "@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",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
+    "@typescript-eslint/parser": "^4.16.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
-    "chai": "^4.3.0",
+    "chai": "^4.3.3",
     "chalk": "^4.1.0",
     "cherry-pick": "^0.5.0",
     "codecov": "^3.8.1",
     "conventional-changelog-cli": "^2.1.1",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "dtslint": "^4.0.6",
+    "dtslint": "^4.0.7",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "^7.19.0",
-    "eslint-config-4catalyzer-typescript": "^2.0.4",
+    "eslint": "^7.21.0",
+    "eslint-config-4catalyzer-typescript": "^3.0.3",
     "eslint-import-resolver-node": "^0.3.4",
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-import": "^2.22.1",
@@ -116,7 +116,7 @@
     "execa": "^5.0.0",
     "fs-extra": "^9.1.0",
     "husky": "^4.3.8",
-    "karma": "^5.2.3",
+    "karma": "^6.1.1",
     "karma-chrome-launcher": "^3.1.0",
     "karma-cli": "^2.0.0",
     "karma-coverage": "^2.0.3",
@@ -125,18 +125,20 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.8",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "lint-staged": "^10.5.4",
-    "lodash": "^4.17.20",
-    "mocha": "^8.2.1",
+    "lodash": "^4.17.21",
+    "mocha": "^8.3.0",
     "prettier": "^2.2.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-test-renderer": "^16.14.0",
+    "simulant": "^0.2.2",
     "sinon": "^9.2.4",
     "sinon-chai": "^3.5.0",
-    "typescript": "^4.1.3",
-    "webpack": "^4.46.0"
+    "stream-browserify": "^3.0.0",
+    "typescript": "^4.2.2",
+    "webpack": "^5.24.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

src/Carousel.tsx

@@ -70,7 +70,7 @@ const propTypes = {
    */
   slide: PropTypes.bool,
 
-  /** Cross fade slides instead of the default slide animation */
+  /** Animates slides with a crossfade animation instead of the default slide animation */
   fade: PropTypes.bool,
 
   /**

src/Dropdown.tsx

@@ -143,7 +143,11 @@ const Dropdown: BsPrefixRefForwardingComponent<
 
   const handleToggle = useEventCallback(
     (nextShow, event, source = event.type) => {
-      if (event.currentTarget === document) source = 'rootClose';
+      if (
+        event.currentTarget === document &&
+        (source !== 'keydown' || event.key === 'Escape')
+      )
+        source = 'rootClose';
       onToggle?.(nextShow, event, { source });
     },
   );
@@ -172,21 +176,18 @@ const Dropdown: BsPrefixRefForwardingComponent<
         focusFirstItemOnShow={focusFirstItemOnShow}
         itemSelector={`.${prefix}-item:not(.disabled):not(:disabled)`}
       >
-        {({ props: dropdownProps }) => (
-          <Component
-            {...props}
-            {...dropdownProps}
-            ref={ref}
-            className={classNames(
-              className,
-              show && 'show',
-              (!drop || drop === 'down') && prefix,
-              drop === 'up' && 'dropup',
-              drop === 'end' && 'dropend',
-              drop === 'start' && 'dropstart',
-            )}
-          />
-        )}
+        <Component
+          {...props}
+          ref={ref}
+          className={classNames(
+            className,
+            show && 'show',
+            (!drop || drop === 'down') && prefix,
+            drop === 'up' && 'dropup',
+            drop === 'end' && 'dropend',
+            drop === 'start' && 'dropstart',
+          )}
+        />
       </BaseDropdown>
     </SelectableContext.Provider>
   );

src/DropdownMenu.tsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
   useDropdownMenu,
-  UseDropdownMenuValue,
   UseDropdownMenuOptions,
 } from 'react-overlays/DropdownMenu';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
@@ -125,9 +124,6 @@ const defaultProps: Partial<DropdownMenuProps> = {
   flip: true,
 };
 
-// TODO: remove this hack
-type UseDropdownMenuValueHack = UseDropdownMenuValue & { placement: any };
-
 const DropdownMenu: BsPrefixRefForwardingComponent<
   'div',
   DropdownMenuProps
@@ -180,22 +176,18 @@ const DropdownMenu: BsPrefixRefForwardingComponent<
       }
     }
 
-    const {
-      hasShown,
-      placement,
-      show,
-      alignEnd,
-      close,
-      props: menuProps,
-    } = useDropdownMenu({
+    const [
+      menuProps,
+      { hasShown, popper, show, alignEnd, toggle },
+    ] = useDropdownMenu({
       flip,
       rootCloseEvent,
       show: showProps,
       alignEnd: alignRight,
       usePopper: !isNavbar && alignClasses.length === 0,
       offset: [0, 2],
       popperConfig,
-    }) as UseDropdownMenuValueHack;
+    });
 
     menuProps.ref = useMergedRefs(
       useWrappedRefWithWarning(ref, 'DropdownMenu'),
@@ -207,16 +199,16 @@ const DropdownMenu: BsPrefixRefForwardingComponent<
     // For custom components provide additional, non-DOM, props;
     if (typeof Component !== 'string') {
       (menuProps as any).show = show;
-      (menuProps as any).close = close;
+      (menuProps as any).close = () => toggle?.(false);
       (menuProps as any).alignRight = alignEnd;
     }
 
     let style = props.style;
-    if (placement) {
+    if (popper?.placement) {
       // we don't need the default popper style,
       // menus are display: none when not shown.
       style = { ...props.style, ...menuProps.style };
-      props['x-placement'] = placement;
+      props['x-placement'] = popper.placement;
     }
 
     return (

src/DropdownToggle.tsx

@@ -67,7 +67,7 @@ const DropdownToggle: DropdownToggleComponent = React.forwardRef(
       (props as any).bsPrefix = childBsPrefix;
     }
 
-    const [toggleProps, { toggle }] = useDropdownToggle();
+    const [toggleProps] = useDropdownToggle();
 
     toggleProps.ref = useMergedRefs(
       toggleProps.ref,
@@ -78,7 +78,6 @@ const DropdownToggle: DropdownToggleComponent = React.forwardRef(
     // underlying component, to allow it to render size and style variants.
     return (
       <Component
-        onClick={toggle}
         className={classNames(className, prefix, split && `${prefix}-split`)}
         {...toggleProps}
         {...props}

src/OverlayTrigger.tsx

@@ -56,6 +56,7 @@ function normalizeDelay(delay?: OverlayDelay) {
 // for cases when the trigger is disabled and mouseOut/Over can cause flicker
 // moving from one child element to another.
 function handleMouseOverOut(
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   handler: (...args: [React.MouseEvent, ...any[]]) => any,
   args: [React.MouseEvent, ...any[]],
   relatedNative: 'fromElement' | 'toElement',

src/ProgressBar.tsx

@@ -45,6 +45,7 @@ function onlyProgressBar(props, propName, componentName): Error | null {
      *
      * see https://github.com/gaearon/react-hot-loader#checking-element-types
      */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     const element = <ProgressBar />;
     if (child.type === element.type) return;
 

test/DropdownSpec.js

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import simulant from 'simulant';
 import Dropdown from '../src/Dropdown';
 
 describe('<Dropdown>', () => {
@@ -247,14 +248,17 @@ describe('<Dropdown>', () => {
       const spy = sinon.spy();
       const wrapper = mount(
         <Dropdown onToggle={spy}>{dropdownChildren}</Dropdown>,
+        { attachTo: focusableContainer },
       );
 
-      wrapper.find('button').simulate('keyDown', { key: 'ArrowDown' });
+      simulant.fire(wrapper.find('button').getDOMNode(), 'keydown', {
+        key: 'ArrowDown',
+      });
 
       expect(spy).to.have.been.calledOnce;
       expect(spy.getCall(0).args.length).to.equal(3);
       expect(spy.getCall(0).args[0]).to.equal(true);
-      expect(spy.getCall(0).args[1]).to.be.an('object');
+      expect(spy.getCall(0).args[1]).to.be.an('event');
       assert.deepEqual(spy.getCall(0).args[2], { source: 'keydown' });
     });
   });

www/package.json

@@ -43,27 +43,27 @@
     "bootstrap": "^5.0.0-beta2",
     "classnames": "^2.2.6",
     "common-tags": "^1.8.0",
-    "copy-text-to-clipboard": "^3.0.0",
+    "copy-text-to-clipboard": "^3.0.1",
     "docsearch.js": "^2.6.3",
     "dom-helpers": "^5.2.0",
     "fibers": "^5.0.0",
     "formik": "^2.2.6",
-    "gatsby": "^2.32.3",
+    "gatsby": "^2.32.9",
     "gatsby-plugin-astroturf": "^0.2.1",
     "gatsby-plugin-catch-links": "^2.10.0",
-    "gatsby-plugin-mdx": "^1.10.0",
+    "gatsby-plugin-mdx": "^1.10.1",
     "gatsby-plugin-react-helmet": "^3.10.0",
     "gatsby-plugin-sass": "^3.2.0",
     "gatsby-remark-prismjs": "^3.13.0",
-    "gatsby-source-filesystem": "2.11.0",
+    "gatsby-source-filesystem": "2.11.1",
     "gatsby-transformer-react-docgen": "^5.9.0",
-    "gatsby-transformer-remark": "^2.16.0",
+    "gatsby-transformer-remark": "^2.16.1",
     "gh-pages": "^3.1.0",
     "holderjs": "^2.9.9",
     "import-sort-cli": "^6.0.0",
     "import-sort-parser-4catalyzer": "^4.0.1",
     "import-sort-style-module": "^6.0.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "prismjs": "^1.23.0",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
@@ -72,8 +72,8 @@
     "react-helmet": "^6.1.0",
     "react-live": "^2.2.3",
     "remark-slug": "^6.0.0",
-    "sass": "^1.32.5",
+    "sass": "^1.32.8",
     "shakespeare-data": "^3.0.0",
-    "yup": "^0.32.8"
+    "yup": "^0.32.9"
   }
 }

www/src/components/CssCodeBlock.js

@@ -11,7 +11,7 @@ function CssCodeBlock() {
       codeText={`
 <link
   rel="stylesheet"
-  href="https://maxcdn.bootstrapcdn.com/bootstrap/${bootstrapVersion}/css/bootstrap.min.css"
+  href="https://cdn.jsdelivr.net/npm/bootstrap@${bootstrapVersion}/dist/css/bootstrap.min.css"
   integrity="${cssHash}"
   crossorigin="anonymous"
 />