focus-trap-react 10.3.0 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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
+
+- ee62d91: Bump focus-trap to v7.6.1
+
 ## 10.3.0
 
 ### Minor Changes

package/README.md

@@ -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.

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,52 +389,10 @@ 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,

package/index.d.ts

@@ -1,8 +1,6 @@
 import { Options as FocusTrapOptions } from 'focus-trap';
 import * as React from 'react';
 
-export = FocusTrap;
-
 declare namespace FocusTrap {
   export interface Props extends React.AllHTMLAttributes<any> {
     children?: React.ReactNode;
@@ -13,4 +11,4 @@ declare namespace FocusTrap {
   }
 }
 
-declare class FocusTrap extends React.Component<FocusTrap.Props> { }
+export declare class FocusTrap extends React.Component<FocusTrap.Props> { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "10.3.0",
+  "version": "11.0.0",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -57,50 +57,52 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap-react#readme",
   "devDependencies": {
-    "@babel/cli": "^7.25.6",
-    "@babel/core": "^7.25.2",
-    "@babel/eslint-parser": "^7.25.1",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.25.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@changesets/cli": "^2.27.8",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@changesets/cli": "^2.27.10",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jquery": "^3.5.30",
+    "@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.0",
+    "browserify": "^17.0.1",
     "budo": "^11.8.4",
-    "cypress": "^13.14.2",
+    "cypress": "^13.16.0",
     "cypress-plugin-tab": "^1.0.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.5.0",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-cypress": "^3.6.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-react": "^7.37.2",
     "jest": "^29.7.0",
     "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.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "regenerator-runtime": "^0.14.1",
     "start-server-and-test": "^2.0.8",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.2"
   },
   "dependencies": {
-    "focus-trap": "^7.6.0",
+    "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,