focus-trap-react 10.3.1 → 11.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 11.0.1
+
+### Patch Changes
+
+- cd75caa: Fix missing default export in typings; props no longer extend `React.AllHTMLAttributes<any>` to allow things like `className` (those extra props have always been ignored anyway); deprecate default export; add named export in code ([#1396](https://github.com/focus-trap/focus-trap-react/issues/1396))
+
+## 11.0.0
+
+### Major Changes
+
+- 4a37dae: Dropping `propTypes` and `defaultProps` no longer supported by React 19 and long deprecated in React 18 (going forward, use TypeScript for prop typings, and if necessary, a runtime library to validate props); Increasing minimum supported React version up to >=18; Bumping `focus-trap` dependency to v7.6.2
+
 ## 10.3.1
 
 ### Patch Changes

package/README.md

@@ -1,7 +1,7 @@
 # focus-trap-react [![CI](https://github.com/focus-trap/focus-trap-react/workflows/CI/badge.svg?branch=master&event=push)](https://github.com/focus-trap/focus-trap-react/actions?query=workflow:CI+branch:master) [![Codecov](https://img.shields.io/codecov/c/github/focus-trap/focus-trap-react)](https://codecov.io/gh/focus-trap/focus-trap-react) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-28-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-29-orange.svg?style=flat-square)](#contributors)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 A React component that traps focus.
@@ -33,14 +33,23 @@ npm install focus-trap-react
 
 ### React dependency
 
-React `>= 16.3.0`
+React `>= 18.0.0`
 
-## Browser Support
+> Note that while React 18.x still supported `propTypes` and `defaultProps`, they had long-since been deprecated, and are completely dropped in React 19.
+
+Therefore, this library no longer assigns these properties to the `<FocusTrap>` element for runtime validation and initialization. The same techniques you would now use in React 19 are backward-compatible with React 18:
+
+- Use TypeScript for static prop type validation
+- Use a runtime validation library such as [RTV.js](https://rtvjs.stefcameron.com/), [JSON Schema](https://json-schema.org/), or [yup](https://github.com/jquense/yup) for runtime prop validation to replace `prop-types`)
 
-As old and as broad as _reasonably_ possible, excluding browsers that are out of support or have nearly no user base.
+> This library aims to support one major version of React _behind_ the current major version, since React major releases are typically years apart -- to the extent that the feature drift is not too great and remains reasonably surmountable.
+
+## Browser Support
 
 Focused on desktop browsers, particularly Chrome, Edge, FireFox, Safari, and Opera.
 
+Gated by what React [supports](https://legacy.reactjs.org/docs/javascript-environment-requirements.html) in the version [currently](#react-dependency) supported.
+
 Focus-trap-react is not officially tested on any mobile browsers or devices.
 
 > ⚠️ Microsoft [no longer supports](https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/) any version of IE, so IE is no longer supported by this library.
@@ -75,10 +84,9 @@ You can read further code examples in `demo/` (it's very simple), and [see how i
 Here's one more simple example:
 
 ```jsx
-const React = require('react');
-const ReactDOM = require('react-dom'); // React 16-17
-const { createRoot } = require('react-dom/client'); // React 18
-const FocusTrap = require('focus-trap-react');
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { FocusTrap } from 'focus-trap-react';
 
 class Demo extends React.Component {
   constructor(props) {
@@ -141,7 +149,6 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('root')); // React 16-17
 createRoot(document.getElementById('root')).render(<Demo />); // React 18
 ```
 
@@ -183,14 +190,13 @@ The result can be that (depending on how you render the trap) in Strict Mode, th
 Example:
 
 ```jsx
-const React = require('react');
-const { createRoot } = require('react-dom/client');
-const propTypes = require('prop-types');
-const FocusTrap = require('../../dist/focus-trap-react');
+import { forwardRef, Component } from 'react';
+import { createRoot } from 'react-dom/client';
+import { FocusTrap } from 'focus-trap-react';
 
 const container = document.getElementById('demo-function-child');
 
-const TrapChild = React.forwardRef(function ({ onDeactivate }, ref) {
+const TrapChild = forwardRef(function ({ onDeactivate }, ref) {
   return (
     <div ref={ref}>
       <p>
@@ -214,7 +220,7 @@ TrapChild.propTypes = {
   onDeactivate: propTypes.func,
 };
 
-class DemoFunctionChild extends React.Component {
+class DemoFunctionChild extends Component {
   constructor(props) {
     super(props);
 
@@ -350,21 +356,24 @@ In alphabetical order:
       <td align="center" valign="top" width="14.28%"><a href="https://marais.io/"><img src="https://avatars2.githubusercontent.com/u/599459?v=4?s=100" width="100px;" alt="Marais Rossouw"/><br /><sub><b>Marais Rossouw</b></sub></a><br /><a href="#infra-maraisr" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Mathias-S"><img src="https://avatars.githubusercontent.com/u/225531?v=4?s=100" width="100px;" alt="Mathias Stang"/><br /><sub><b>Mathias Stang</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3AMathias-S" title="Bug reports">🐛</a> <a href="https://github.com/focus-trap/focus-trap-react/pulls?q=is%3Apr+reviewed-by%3AMathias-S" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/StackOverflowIsBetterThanAnyAI"><img src="https://avatars.githubusercontent.com/u/140268904?v=4?s=100" width="100px;" alt="Michael"/><br /><sub><b>Michael</b></sub></a><br /><a href="#example-StackOverflowIsBetterThanAnyAI" title="Examples">💡</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.moroshko.me"><img src="https://avatars.githubusercontent.com/u/259753?v=4?s=100" width="100px;" alt="Misha Moroshko"/><br /><sub><b>Misha Moroshko</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Amoroshko" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/liunate"><img src="https://avatars2.githubusercontent.com/u/38996291?v=4?s=100" width="100px;" alt="Nate Liu"/><br /><sub><b>Nate Liu</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=liunate" title="Tests">⚠️</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/rivajunior/"><img src="https://avatars1.githubusercontent.com/u/11370172?v=4?s=100" width="100px;" alt="Rivaldo Junior"/><br /><sub><b>Rivaldo Junior</b></sub></a><br /><a href="#maintenance-rivajunior" title="Maintenance">🚧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://scottrippey.github.io/"><img src="https://avatars3.githubusercontent.com/u/430608?v=4?s=100" width="100px;" alt="Scott Rippey"/><br /><sub><b>Scott Rippey</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=scottrippey" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Ascottrippey" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://seanmcp.com/"><img src="https://avatars1.githubusercontent.com/u/6360367?v=4?s=100" width="100px;" alt="Sean McPherson"/><br /><sub><b>Sean McPherson</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=SeanMcP" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="http://smoores.dev"><img src="https://avatars.githubusercontent.com/u/5354254?v=4?s=100" width="100px;" alt="Shane Moore"/><br /><sub><b>Shane Moore</b></sub></a><br /><a href="#platform-SMores" title="Packaging/porting to new platform">📦</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="http://smoores.dev"><img src="https://avatars.githubusercontent.com/u/5354254?v=4?s=100" width="100px;" alt="Shane Moore"/><br /><sub><b>Shane Moore</b></sub></a><br /><a href="#platform-SMores" title="Packaging/porting to new platform">📦</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://recollectr.io"><img src="https://avatars2.githubusercontent.com/u/6835891?v=4?s=100" width="100px;" alt="Slapbox"/><br /><sub><b>Slapbox</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=Slapbox" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3ASlapbox" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://stefancameron.com/"><img src="https://avatars3.githubusercontent.com/u/2855350?v=4?s=100" width="100px;" alt="Stefan Cameron"/><br /><sub><b>Stefan Cameron</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Astefcameron" title="Bug reports">🐛</a> <a href="#infra-stefcameron" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Documentation">📖</a> <a href="#maintenance-stefcameron" title="Maintenance">🚧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://tylerhawkins.info/201R/"><img src="https://avatars0.githubusercontent.com/u/13806458?v=4?s=100" width="100px;" alt="Tyler Hawkins"/><br /><sub><b>Tyler Hawkins</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3" title="Documentation">📖</a> <a href="#example-thawkin3" title="Examples">💡</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3" title="Tests">⚠️</a> <a href="#tool-thawkin3" title="Tools">🔧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/wandroll"><img src="https://avatars.githubusercontent.com/u/4492317?v=4?s=100" width="100px;" alt="Wandrille Verlut"/><br /><sub><b>Wandrille Verlut</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Tests">⚠️</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/krikienoid"><img src="https://avatars3.githubusercontent.com/u/8528227?v=4?s=100" width="100px;" alt="krikienoid"/><br /><sub><b>krikienoid</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Akrikienoid" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/robert-westenberger"><img src="https://avatars.githubusercontent.com/u/44252092?v=4?s=100" width="100px;" alt="robert-westenberger"/><br /><sub><b>robert-westenberger</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=robert-westenberger" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Arobert-westenberger" title="Bug reports">🐛</a></td>
+    </tr>
+    <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/syntactic-salt"><img src="https://avatars.githubusercontent.com/u/9385662?v=4?s=100" width="100px;" alt="syntactic-salt"/><br /><sub><b>syntactic-salt</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Asyntactic-salt" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>

package/dist/focus-trap-react.js

@@ -15,11 +15,14 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var React = require('react');
-var PropTypes = require('prop-types');
 var _require = require('focus-trap'),
   createFocusTrap = _require.createFocusTrap;
 var _require2 = require('tabbable'),
   isFocusable = _require2.isFocusable;
+
+/**
+ * @type {import('../index.d.ts').FocusTrap}
+ */
 var FocusTrap = /*#__PURE__*/function (_React$Component) {
   function FocusTrap(props) {
     var _this;
@@ -386,56 +389,19 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
       return null;
     }
   }]);
-}(React.Component); // support server-side rendering where `Element` will not be defined
-var ElementType = typeof Element === 'undefined' ? Function : Element;
-FocusTrap.propTypes = {
-  active: PropTypes.bool,
-  paused: PropTypes.bool,
-  focusTrapOptions: PropTypes.shape({
-    document: PropTypes.object,
-    onActivate: PropTypes.func,
-    onPostActivate: PropTypes.func,
-    checkCanFocusTrap: PropTypes.func,
-    onPause: PropTypes.func,
-    onPostPause: PropTypes.func,
-    onUnpause: PropTypes.func,
-    onPostUnpause: PropTypes.func,
-    onDeactivate: PropTypes.func,
-    onPostDeactivate: PropTypes.func,
-    checkCanReturnFocus: PropTypes.func,
-    initialFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.bool, PropTypes.func]),
-    fallbackFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string,
-    // NOTE: does not support `false` as value (or return value from function)
-    PropTypes.func]),
-    escapeDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-    clickOutsideDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-    returnFocusOnDeactivate: PropTypes.bool,
-    setReturnFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.bool, PropTypes.func]),
-    allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-    preventScroll: PropTypes.bool,
-    tabbableOptions: PropTypes.shape({
-      displayCheck: PropTypes.oneOf(['full', 'legacy-full', 'non-zero-area', 'none']),
-      getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])
-    }),
-    trapStack: PropTypes.array,
-    isKeyForward: PropTypes.func,
-    isKeyBackward: PropTypes.func
-  }),
-  containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)),
-  // DOM element ONLY
-  children: PropTypes.oneOfType([PropTypes.element,
-  // React element
-  PropTypes.instanceOf(ElementType) // DOM element
-  ])
-
-  // NOTE: _createFocusTrap is internal, for testing purposes only, so we don't
-  //  specify it here. It's expected to be set to the function returned from
-  //  require('focus-trap'), or one with a compatible interface.
-};
+}(React.Component); // NOTE: While React 19 REMOVED support for `propTypes`, support for `defaultProps`
+//  __for class components ONLY__ remains: "Class components will continue to support
+//  defaultProps since there is no ES6 alternative."
+//  @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops
 FocusTrap.defaultProps = {
   active: true,
   paused: false,
   focusTrapOptions: {},
   _createFocusTrap: createFocusTrap
 };
-module.exports = FocusTrap;
+
+// 🔺 DEPRECATED: default export
+module.exports = FocusTrap;
+
+// named export
+module.exports.FocusTrap = FocusTrap;

package/index.d.ts

@@ -1,16 +1,56 @@
 import { Options as FocusTrapOptions } from 'focus-trap';
 import * as React from 'react';
 
-export = FocusTrap;
+export interface FocusTrapProps {
+  /**
+    * __Single container child__ for the trap. Use `containerElements` instead
+    *  if you need a trap with multiple containers.
+    */
+  children?: React.ReactNode;
 
+  /**
+    * By default, the trap will be active when it mounts, so it's activated by
+    *  mounting, and deactivated by unmounting. Use this prop to control when
+    *  it's active while it's mounted, or if it's initially inactive.
+    */
+  active?: boolean;
+
+  /**
+    * To pause or unpause the trap while it's `active`. Primarily for use when
+    *  you need to manage multiple traps in the same view. When paused, the trap
+    *  retains its various event listeners, but ignores all events.
+    */
+  paused?: boolean;
+
+  /**
+    * See Focus-trap's [createOptions](https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions)
+    *  for more details on available options.
+    */
+  focusTrapOptions?: FocusTrapOptions;
+
+  /**
+    * If specified, these elements will be used as the boundaries for the
+    *  trap, __instead of the child__ specified in `children` (though
+    *  `children` will still be rendered).
+    */
+  containerElements?: Array<HTMLElement>;
+}
+
+export declare class FocusTrap extends React.Component<FocusTrapProps> { }
+
+/**
+ * Default export of the FocusTrap component.
+ * @deprecated 🔺 Use the named import `{ FocusTrap }` instead.
+ * @description 🔺 The default export will be removed in a future release. Migrate to the named
+ *  import `{ FocusTrap }` today to ensure future compatibility.
+ */
 declare namespace FocusTrap {
-  export interface Props extends React.AllHTMLAttributes<any> {
-    children?: React.ReactNode;
-    active?: boolean;
-    paused?: boolean;
-    focusTrapOptions?: FocusTrapOptions;
-    containerElements?: Array<HTMLElement>;
-  }
+  export type Props = FocusTrapProps;
 }
 
-declare class FocusTrap extends React.Component<FocusTrap.Props> { }
+/**
+ * @deprecated 🔺 Use the named import `{ FocusTrap }` instead.
+ * @description 🔺 The default export will be removed in a future release. Migrate to the named
+ *  import `{ FocusTrap }` today to ensure future compatibility.
+ */
+export default FocusTrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "10.3.1",
+  "version": "11.0.1",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -57,25 +57,27 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap-react#readme",
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
+    "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.25.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@changesets/cli": "^2.27.9",
+    "@babel/preset-react": "^7.26.3",
+    "@changesets/cli": "^2.27.10",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jquery": "^3.5.32",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "all-contributors-cli": "^6.26.1",
     "babel-jest": "^29.7.0",
     "babelify": "^10.0.0",
     "browserify": "^17.0.1",
     "budo": "^11.8.4",
-    "cypress": "^13.15.2",
+    "cypress": "^13.16.1",
     "cypress-plugin-tab": "^1.0.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -86,21 +88,21 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
     "onchange": "^7.1.0",
-    "prettier": "^3.3.3",
-    "prop-types": "^15.8.1",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "regenerator-runtime": "^0.14.1",
-    "start-server-and-test": "^2.0.8",
-    "typescript": "^5.6.3"
+    "start-server-and-test": "^2.0.9",
+    "typescript": "^5.7.2"
   },
   "dependencies": {
-    "focus-trap": "^7.6.1",
+    "focus-trap": "^7.6.2",
     "tabbable": "^6.2.0"
   },
   "peerDependencies": {
-    "prop-types": "^15.8.1",
-    "react": ">=16.3.0",
-    "react-dom": ">=16.3.0"
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }

package/src/focus-trap-react.js

@@ -1,8 +1,10 @@
 const React = require('react');
-const PropTypes = require('prop-types');
 const { createFocusTrap } = require('focus-trap');
 const { isFocusable } = require('tabbable');
 
+/**
+ * @type {import('../index.d.ts').FocusTrap}
+ */
 class FocusTrap extends React.Component {
   constructor(props) {
     super(props);
@@ -412,74 +414,10 @@ class FocusTrap extends React.Component {
   }
 }
 
-// support server-side rendering where `Element` will not be defined
-const ElementType = typeof Element === 'undefined' ? Function : Element;
-
-FocusTrap.propTypes = {
-  active: PropTypes.bool,
-  paused: PropTypes.bool,
-  focusTrapOptions: PropTypes.shape({
-    document: PropTypes.object,
-    onActivate: PropTypes.func,
-    onPostActivate: PropTypes.func,
-    checkCanFocusTrap: PropTypes.func,
-    onPause: PropTypes.func,
-    onPostPause: PropTypes.func,
-    onUnpause: PropTypes.func,
-    onPostUnpause: PropTypes.func,
-    onDeactivate: PropTypes.func,
-    onPostDeactivate: PropTypes.func,
-    checkCanReturnFocus: PropTypes.func,
-    initialFocus: PropTypes.oneOfType([
-      PropTypes.instanceOf(ElementType),
-      PropTypes.string,
-      PropTypes.bool,
-      PropTypes.func,
-    ]),
-    fallbackFocus: PropTypes.oneOfType([
-      PropTypes.instanceOf(ElementType),
-      PropTypes.string,
-      // NOTE: does not support `false` as value (or return value from function)
-      PropTypes.func,
-    ]),
-    escapeDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-    clickOutsideDeactivates: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.func,
-    ]),
-    returnFocusOnDeactivate: PropTypes.bool,
-    setReturnFocus: PropTypes.oneOfType([
-      PropTypes.instanceOf(ElementType),
-      PropTypes.string,
-      PropTypes.bool,
-      PropTypes.func,
-    ]),
-    allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-    preventScroll: PropTypes.bool,
-    tabbableOptions: PropTypes.shape({
-      displayCheck: PropTypes.oneOf([
-        'full',
-        'legacy-full',
-        'non-zero-area',
-        'none',
-      ]),
-      getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-    }),
-    trapStack: PropTypes.array,
-    isKeyForward: PropTypes.func,
-    isKeyBackward: PropTypes.func,
-  }),
-  containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)), // DOM element ONLY
-  children: PropTypes.oneOfType([
-    PropTypes.element, // React element
-    PropTypes.instanceOf(ElementType), // DOM element
-  ]),
-
-  // NOTE: _createFocusTrap is internal, for testing purposes only, so we don't
-  //  specify it here. It's expected to be set to the function returned from
-  //  require('focus-trap'), or one with a compatible interface.
-};
-
+// NOTE: While React 19 REMOVED support for `propTypes`, support for `defaultProps`
+//  __for class components ONLY__ remains: "Class components will continue to support
+//  defaultProps since there is no ES6 alternative."
+//  @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops
 FocusTrap.defaultProps = {
   active: true,
   paused: false,
@@ -487,4 +425,8 @@ FocusTrap.defaultProps = {
   _createFocusTrap: createFocusTrap,
 };
 
+// 🔺 DEPRECATED: default export
 module.exports = FocusTrap;
+
+// named export
+module.exports.FocusTrap = FocusTrap;