react-bootstrap · kyletsang · Apr 14, 2025 · Feb 10, 2025 · Feb 11, 2025 · Feb 15, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -12,8 +12,8 @@ permissions:
   contents: read
 
 jobs:
-  ci:
-    name: CI
+  test:
+    name: Run tests
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -26,20 +26,17 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           cache: yarn
 
       - name: Install Dependencies
-        run: yarn bootstrap
+        run: yarn --network-timeout 100000
         env:
           YARN_CACHE_FOLDER: .cache/yarn
 
       - name: Install Playwright Browsers
         run: yarn playwright install --with-deps
 
-      - name: Run lint
-        run: yarn lint
-
       - name: Run Tests
         run: yarn test-browser --browser.name=${{ env.BROWSER }} --browser.headless --coverage
         env:
@@ -48,5 +45,26 @@ jobs:
       - name: Codecov
         uses: codecov/codecov-action@v4
 
+  build-lint:
+    name: Build and lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+
+      - name: Install Dependencies
+        run: yarn --network-timeout 100000
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Check types
+        run: yarn check-types
+
       - name: Build Project
         run: yarn build
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,5 @@
-
-
 lib/
+cjs/
 coverage/
 www/.cache/
 www/public/
@@ -93,3 +92,6 @@ typings/
 
 # Generated types
 /types
+
+.yalc
+yalc.lock
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "2.10.9",
+  "version": "3.0.0-beta.0",
   "description": "Bootstrap 5 components built with React",
   "keywords": [
     "bootstrap",
@@ -22,23 +22,47 @@
   "files": [
     "CHANGELOG.md",
     "lib",
-    "dist",
-    "es"
+    "cjs"
   ],
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/esm/index.d.ts",
+  "main": "cjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
+      },
+      "import": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
+      }
+    },
+    "./*": {
+      "require": {
+        "types": "./cjs/*.d.ts",
+        "default": "./cjs/*.js"
+      },
+      "import": {
+        "types": "./lib/*.d.ts",
+        "default": "./lib/*.js"
+      }
+    }
+  },
   "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "git+https://github.com/react-bootstrap/react-bootstrap.git"
   },
   "scripts": {
     "bootstrap": "yarn --network-timeout 100000 && yarn --cwd www --network-timeout 100000",
-    "build": "node tools/build.js",
+    "build": "rimraf lib && yarn build:esm && yarn build:esm:types && yarn build:cjs && yarn build:cjs:types",
+    "build:esm": "babel src --out-dir lib --delete-dir-on-start --env-name esm --extensions .ts,.tsx --ignore '**/*.d.ts' && echo {\"type\": \"module\"} > lib/package.json",
+    "build:cjs": "babel src --out-dir cjs --env-name cjs --delete-dir-on-start --extensions .ts,.tsx --ignore '**/*.d.ts' && echo {\"type\": \"commonjs\"} > cjs/package.json",
+    "build:esm:types": "tsc --emitDeclarationOnly",
+    "build:cjs:types": "tsc --emitDeclarationOnly --outDir cjs",
     "build-docs": "yarn --cwd www build",
-    "build-types": "yarn tsc -d --emitDeclarationOnly --outDir types",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "check-types": "tsc -p ./test/tsconfig.json --noEmit",
     "deploy-docs": "yarn --cwd www deploy",
     "lint": "eslint src test",
@@ -57,60 +81,53 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
-    "@restart/hooks": "^0.4.9",
-    "@restart/ui": "^1.9.4",
-    "@types/prop-types": "^15.7.12",
-    "@types/react-transition-group": "^4.4.6",
+    "@babel/runtime": "^7.26.7",
+    "@restart/hooks": "^0.6.2",
+    "@restart/ui": "^2.0.0-beta.2",
+    "@types/prop-types": "^15.7.14",
+    "@types/react-transition-group": "^4.4.12",
     "classnames": "^2.3.2",
     "dom-helpers": "^5.2.1",
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
     "prop-types-extra": "^1.1.0",
     "react-transition-group": "^4.4.5",
-    "uncontrollable": "^7.2.1",
+    "uncontrollable": "^9.0.0",
     "warning": "^4.0.3"
   },
   "devDependencies": {
     "@4c/rollout": "^4.0.2",
-    "@4c/tsconfig": "^0.4.1",
-    "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.5",
-    "@babel/preset-typescript": "^7.23.3",
-    "@babel/register": "^7.22.15",
-    "@react-bootstrap/babel-preset": "^2.2.0",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.8",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/register": "^7.25.9",
+    "@react-bootstrap/babel-preset": "^2.3.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/invariant": "^2.2.37",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/warning": "^3.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.0.4",
-    "@vitest/coverage-istanbul": "^3.0.4",
-    "babel-loader": "^9.1.3",
-    "chalk": "^4.1.2",
-    "cherry-pick": "^0.5.0",
-    "cpy-cli": "^5.0.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.19.0",
+    "@vitest/browser": "^3.0.5",
+    "@vitest/coverage-istanbul": "^3.0.5",
+    "babel-loader": "^9.2.1",
+    "eslint": "^9.20.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "execa": "^5.1.1",
-    "fs-extra": "^10.1.0",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
-    "playwright": "^1.50.0",
-    "prettier": "^3.4.2",
+    "playwright": "^1.50.1",
+    "prettier": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.22.0",
-    "vitest": "^3.0.4",
-    "webpack": "^5.93.0"
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.23.0",
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.8",
     }
   },
   "publishConfig": {
-    "directory": "lib"
+    "access": "public"
   },
   "release": {
     "conventionalCommits": true

diff --git a/src/AbstractModalHeader.tsx b/src/AbstractModalHeader.tsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useContext } from 'react';
 import useEventCallback from '@restart/hooks/useEventCallback';
-import CloseButton, { CloseButtonVariant } from './CloseButton';
+import CloseButton, { type CloseButtonVariant } from './CloseButton';
 import ModalContext from './ModalContext';
 
 export interface AbstractModalHeaderProps

diff --git a/src/Accordion.tsx b/src/Accordion.tsx
@@ -8,12 +8,12 @@ import AccordionBody from './AccordionBody';
 import AccordionButton from './AccordionButton';
 import AccordionCollapse from './AccordionCollapse';
 import AccordionContext, {
-  AccordionSelectCallback,
-  AccordionEventKey,
+  type AccordionSelectCallback,
+  type AccordionEventKey,
 } from './AccordionContext';
 import AccordionHeader from './AccordionHeader';
 import AccordionItem from './AccordionItem';
-import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
 export interface AccordionProps
   extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>,

diff --git a/src/AccordionBody.tsx b/src/AccordionBody.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames';
 import * as React from 'react';
    import { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { TransitionCallbacks } from '@restart/ui/types';
+import type { TransitionCallbacks } from '@restart/ui/types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import AccordionCollapse from './AccordionCollapse';
 import AccordionItemContext from './AccordionItemContext';
-import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+import type { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
 
 export interface AccordionBodyProps
   extends BsPrefixProps,

diff --git a/src/AccordionButton.tsx b/src/AccordionButton.tsx
@@ -4,10 +4,10 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import AccordionContext, {
   isAccordionItemSelected,
-  AccordionEventKey,
+  type AccordionEventKey,
 } from './AccordionContext';
 import AccordionItemContext from './AccordionItemContext';
-import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 import { useBootstrapPrefix } from './ThemeProvider';
 
 type EventHandler = React.EventHandler<React.SyntheticEvent>;

diff --git a/src/AccordionCollapse.tsx b/src/AccordionCollapse.tsx
@@ -4,9 +4,9 @@ import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { useBootstrapPrefix } from './ThemeProvider';
-import Collapse, { CollapseProps } from './Collapse';
+import Collapse, { type CollapseProps } from './Collapse';
 import AccordionContext, { isAccordionItemSelected } from './AccordionContext';
-import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+import type { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
 
 export interface AccordionCollapseProps extends BsPrefixProps, CollapseProps {
   eventKey: string;

diff --git a/src/AccordionHeader.tsx b/src/AccordionHeader.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import AccordionButton from './AccordionButton';
-import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+import type { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
 
 export interface AccordionHeaderProps
   extends BsPrefixProps,

diff --git a/src/AccordionItem.tsx b/src/AccordionItem.tsx
@@ -4,9 +4,9 @@ import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import AccordionItemContext, {
-  AccordionItemContextValue,
+  type AccordionItemContextValue,
 } from './AccordionItemContext';
-import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
+import type { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
 
 export interface AccordionItemProps
   extends BsPrefixProps,

diff --git a/src/Alert.tsx b/src/Alert.tsx
@@ -8,9 +8,9 @@ import { useBootstrapPrefix } from './ThemeProvider';
 import AlertHeading from './AlertHeading';
 import AlertLink from './AlertLink';
 import Fade from './Fade';
-import CloseButton, { CloseButtonVariant } from './CloseButton';
-import { Variant } from './types';
-import { TransitionType } from './helpers';
+import CloseButton, { type CloseButtonVariant } from './CloseButton';
+import type { Variant } from './types';
+import type { TransitionType } from './helpers';
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   bsPrefix?: string;

diff --git a/src/Anchor.tsx b/src/Anchor.tsx
@@ -1,4 +1,4 @@
-import Anchor, { AnchorProps } from '@restart/ui/Anchor';
+import Anchor, { type AnchorProps } from '@restart/ui/Anchor';
 
 export type { AnchorProps };
 

diff --git a/src/Badge.tsx b/src/Badge.tsx
@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import * as React from 'react';
 
 import { useBootstrapPrefix } from './ThemeProvider';
-import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
-import { Color, Variant } from './types';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import type { Color, Variant } from './types';
 
 export interface BadgeProps
   extends BsPrefixProps,

diff --git a/src/BootstrapModalManager.tsx b/src/BootstrapModalManager.tsx
@@ -3,8 +3,8 @@ import css from 'dom-helpers/css';
 import qsa from 'dom-helpers/querySelectorAll';
 import removeClass from 'dom-helpers/removeClass';
 import ModalManager, {
-  ContainerState,
-  ModalManagerOptions,
+  type ContainerState,
+  type ModalManagerOptions,
 } from '@restart/ui/ModalManager';
 
 const Selector = {

diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';
 import BreadcrumbItem from './BreadcrumbItem';
-import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
 export interface BreadcrumbProps
   extends BsPrefixProps,

diff --git a/src/BreadcrumbItem.tsx b/src/BreadcrumbItem.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Anchor from '@restart/ui/Anchor';
 import { useBootstrapPrefix } from './ThemeProvider';
-import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
 export interface BreadcrumbItemProps
   extends BsPrefixProps,

diff --git a/src/Button.tsx b/src/Button.tsx
@@ -3,11 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import {
   useButtonProps,
-  ButtonProps as BaseButtonProps,
+  type ButtonProps as BaseButtonProps,
 } from '@restart/ui/Button';
 import { useBootstrapPrefix } from './ThemeProvider';
-import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
-import { ButtonVariant } from './types';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import type { ButtonVariant } from './types';
 
 export interface ButtonProps
   extends BaseButtonProps,