Merge pull request react-bootstrap#5717 from react-bootstrap/merge-master

Merge master into bs5-dev

Author: kyletsang

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.5.2](https://github.com/react-bootstrap/react-bootstrap/compare/v1.5.1...v1.5.2) (2021-03-11)
+
+
+### Bug Fixes
+
+* **Carousel:** fix crossfade animation ([#5671](https://github.com/react-bootstrap/react-bootstrap/issues/5671)) ([a24ab44](https://github.com/react-bootstrap/react-bootstrap/commit/a24ab44b0c80b38ad2efd9762f47a833cc2cf0ad))
+
+
+
+
+
 ## [1.5.1](https://github.com/react-bootstrap/react-bootstrap/compare/v1.5.0...v1.5.1) (2021-03-02)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Bootstrap 4 components built with React",
   "keywords": [
     "react",
@@ -46,12 +46,8 @@
     "tdd": "karma start",
     "test": "npm run lint && npm run test-browser && npm run test-node",
     "test-browser": "cross-env NODE_ENV=test karma start --single-run",
-    "test-node": "cross-env NODE_ENV=test-server mocha test/server/*Spec.js"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "test-node": "cross-env NODE_ENV=test-server mocha test/server/*Spec.js",
+    "prepare": "husky install"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix"
@@ -83,14 +79,14 @@
   "devDependencies": {
     "@4c/rollout": "^2.2.0",
     "@4c/tsconfig": "^0.3.1",
-    "@babel/cli": "^7.13.0",
-    "@babel/core": "^7.13.8",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/register": "^7.13.8",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
@@ -110,13 +106,13 @@
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-mocha": "^8.0.0",
+    "eslint-plugin-mocha": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "execa": "^5.0.0",
     "fs-extra": "^9.1.0",
-    "husky": "^4.3.8",
-    "karma": "^6.1.1",
+    "husky": "^5.1.3",
+    "karma": "^6.2.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-cli": "^2.0.0",
     "karma-coverage": "^2.0.3",
@@ -128,7 +124,7 @@
     "karma-webpack": "^5.0.0",
     "lint-staged": "^10.5.4",
     "lodash": "^4.17.21",
-    "mocha": "^8.3.0",
+    "mocha": "^8.3.1",
     "prettier": "^2.2.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
@@ -137,8 +133,8 @@
     "sinon": "^9.2.4",
     "sinon-chai": "^3.5.0",
     "stream-browserify": "^3.0.0",
-    "typescript": "^4.2.2",
-    "webpack": "^5.24.3"
+    "typescript": "^4.2.3",
+    "webpack": "^5.24.4"
   },
   "peerDependencies": {
     "react": ">=16.14.0",

src/Carousel.tsx

@@ -3,7 +3,6 @@ import useUpdateEffect from '@restart/hooks/useUpdateEffect';
 import useCommittedRef from '@restart/hooks/useCommittedRef';
 import useTimeout from '@restart/hooks/useTimeout';
 import classNames from 'classnames';
-import transitionEnd from 'dom-helpers/transitionEnd';
 import { TransitionStatus } from 'react-transition-group/Transition';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -21,6 +20,7 @@ import CarouselItem from './CarouselItem';
 import { map, forEach } from './ElementChildren';
 import SafeAnchor from './SafeAnchor';
 import { useBootstrapPrefix } from './ThemeProvider';
+import transitionEndListener from './transitionEndListener';
 import triggerBrowserReflow from './triggerBrowserReflow';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 import TransitionWrapper from './TransitionWrapper';
@@ -544,7 +544,7 @@ const Carousel: BsPrefixRefForwardingComponent<
               in={isActive}
               onEnter={isActive ? handleEnter : undefined}
               onEntered={isActive ? handleEntered : undefined}
-              addEndListener={transitionEnd}
+              addEndListener={transitionEndListener}
             >
               {(
                 status: TransitionStatus,

src/transitionEndListener.ts

@@ -1,13 +1,29 @@
+import css from 'dom-helpers/css';
 import transitionEnd from 'dom-helpers/transitionEnd';
 
+function parseDuration(
+  node: HTMLElement,
+  property: 'transitionDuration' | 'transitionDelay',
+) {
+  const str = css(node, property) || '';
+  const mult = str.indexOf('ms') === -1 ? 1000 : 1;
+  return parseFloat(str) * mult;
+}
+
 export default function transitionEndListener(
   element: HTMLElement,
   handler: (e: TransitionEvent) => void,
 ) {
-  const remove = transitionEnd(element, (e) => {
-    if (e.target === element) {
-      remove();
-      handler(e);
-    }
-  });
+  const duration = parseDuration(element, 'transitionDuration');
+  const delay = parseDuration(element, 'transitionDelay');
+  const remove = transitionEnd(
+    element,
+    (e) => {
+      if (e.target === element) {
+        remove();
+        handler(e);
+      }
+    },
+    duration + delay,
+  );
 }

www/package.json

@@ -48,7 +48,7 @@
     "dom-helpers": "^5.2.0",
     "fibers": "^5.0.0",
     "formik": "^2.2.6",
-    "gatsby": "^2.32.9",
+    "gatsby": "^2.32.11",
     "gatsby-plugin-astroturf": "^0.2.1",
     "gatsby-plugin-catch-links": "^2.10.0",
     "gatsby-plugin-mdx": "^1.10.1",

www/yarn.lock

@@ -6060,10 +6060,10 @@ gatsby-transformer-remark@^2.16.1:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.4.1"
 
-gatsby@^2.32.9:
-  version "2.32.9"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.32.9.tgz#8ce47133b143acaa577f8cf0907be89afa3fa514"
-  integrity sha512-4QyrOUGLG6V51YSOJW+cFmRDcey6DnF8YMbsOQ1efp9MJ91fSgOI3r6dYd6lc1lJwppN4KZWbqE9WOXtFgda7w==
+gatsby@^2.32.11:
+  version "2.32.11"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.32.11.tgz#2f4fdf5b8a007e5a3596107992388e6c4d1de4c7"
+  integrity sha512-y1L/WB6bEsbtr3cThykVG+ynParU6ndIQW5TWTvfajsBGSOpi8kcU5LNjIM4VWb1JzgHdzUM6kALII6+bRqZew==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/core" "^7.12.3"