focus-trap-react 11.0.0 → 11.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

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.
@@ -84,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) {
@@ -150,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
 ```
 
@@ -192,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>
@@ -223,7 +220,7 @@ TrapChild.propTypes = {
   onDeactivate: propTypes.func,
 };
 
-class DemoFunctionChild extends React.Component {
+class DemoFunctionChild extends Component {
   constructor(props) {
     super(props);
 
@@ -359,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

@@ -399,4 +399,9 @@ FocusTrap.defaultProps = {
   focusTrapOptions: {},
   _createFocusTrap: createFocusTrap
 };
-module.exports = FocusTrap;
+
+// 🔺 DEPRECATED: default export
+module.exports = FocusTrap;
+
+// named export
+module.exports.FocusTrap = FocusTrap;

package/index.d.ts

@@ -1,14 +1,56 @@
 import { Options as FocusTrapOptions } from 'focus-trap';
 import * as React from 'react';
 
+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;
 }
 
-export 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": "11.0.0",
+  "version": "11.0.1",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -57,12 +57,12 @@
   },
   "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",
+    "@babel/preset-react": "^7.26.3",
     "@changesets/cli": "^2.27.10",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/dom": "^10.4.0",
@@ -77,7 +77,7 @@
     "babelify": "^10.0.0",
     "browserify": "^17.0.1",
     "budo": "^11.8.4",
-    "cypress": "^13.16.0",
+    "cypress": "^13.16.1",
     "cypress-plugin-tab": "^1.0.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -88,11 +88,11 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
     "onchange": "^7.1.0",
-    "prettier": "^3.4.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",
+    "start-server-and-test": "^2.0.9",
     "typescript": "^5.7.2"
   },
   "dependencies": {

package/src/focus-trap-react.js

@@ -425,4 +425,8 @@ FocusTrap.defaultProps = {
   _createFocusTrap: createFocusTrap,
 };
 
+// 🔺 DEPRECATED: default export
 module.exports = FocusTrap;
+
+// named export
+module.exports.FocusTrap = FocusTrap;