focus-trap-react - npm Package Compare versions

Comparing version 10.3.1 to 11.0.0

CHANGELOG.md

 # 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
@@ -4,0 +10,0 @@

dist/focus-trap-react.js

@@ -18,3 +18,2 @@ "use strict";
 var React = require('react');
-var PropTypes = require('prop-types');
 var _require = require('focus-trap'),
@@ -24,2 +23,6 @@ createFocusTrap = _require.createFocusTrap;
   isFocusable = _require2.isFocusable;
+
+/**
+ * @type {import('../index.d.ts').FocusTrap}
+ */
 var FocusTrap = /*#__PURE__*/function (_React$Component) {
@@ -391,48 +394,6 @@ function FocusTrap(props) {
   }]);
-}(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 = {
@@ -439,0 +400,0 @@ active: true,

index.d.ts

 import { Options as FocusTrapOptions } from 'focus-trap';
 import * as React from 'react';
 
-export = FocusTrap;
-
 declare namespace FocusTrap {
@@ -16,2 +14,2 @@ export interface Props extends React.AllHTMLAttributes<any> {
 
-declare class FocusTrap extends React.Component<FocusTrap.Props> { }
+export declare class FocusTrap extends React.Component<FocusTrap.Props> { }

package.json

 {
   "name": "focus-trap-react",
-  "version": "10.3.1",
+  "version": "11.0.0",
   "description": "A React component that traps focus.",
@@ -66,9 +66,11 @@ "main": "dist/focus-trap-react.js",
     "@babel/preset-react": "^7.25.9",
-    "@changesets/cli": "^2.27.9",
+    "@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",
@@ -79,3 +81,3 @@ "babel-jest": "^29.7.0",
     "budo": "^11.8.4",
-    "cypress": "^13.15.2",
+    "cypress": "^13.16.0",
     "cypress-plugin-tab": "^1.0.5",
@@ -91,4 +93,3 @@ "eslint": "^8.57.0",
     "onchange": "^7.1.0",
-    "prettier": "^3.3.3",
-    "prop-types": "^15.8.1",
+    "prettier": "^3.4.1",
     "react": "^18.3.1",
@@ -98,13 +99,14 @@ "react-dom": "^18.3.1",
     "start-server-and-test": "^2.0.8",
-    "typescript": "^5.6.3"
+    "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"
   }
 }

README.md

@@ -36,10 +36,19 @@ # 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)
 
-React `>= 16.3.0`
+React `>= 18.0.0`
 
+> 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`)
+
+> 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
 
-As old and as broad as _reasonably_ possible, excluding browsers that are out of support or have nearly no user base.
-
 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.
@@ -46,0 +55,0 @@

src/focus-trap-react.js

 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 {
@@ -415,70 +417,6 @@ constructor(props) {
 
-// 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 = {
@@ -485,0 +423,0 @@ active: true,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

386

increased by2.39%

Worsened metrics

Total package byte prevSize

89405

decreased by-2.65%

Dependency count

6

increased by20%

Dev dependency count

37

increased by2.78%

Lines of code

769

decreased by-11.41%

Dependency changes

• + Added@types/react@19.0.1(transitive)

• + Added@types/react-dom@19.0.2(transitive)

• + Addedcsstype@3.1.3(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• Updatedfocus-trap@^7.6.2