focus-trap-react - npm Package Compare versions

Comparing version 11.0.0 to 11.0.1

CHANGELOG.md

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

dist/focus-trap-react.js

@@ -402,2 +402,7 @@ "use strict";
 };
-module.exports = FocusTrap;
+
+// 🔺 DEPRECATED: default export
+module.exports = FocusTrap;
+
+// named export
+module.exports.FocusTrap = FocusTrap;

index.d.ts

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

 {
   "name": "focus-trap-react",
-  "version": "11.0.0",
+  "version": "11.0.1",
   "description": "A React component that traps focus.",
@@ -60,3 +60,3 @@ "main": "dist/focus-trap-react.js",
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
+    "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
@@ -66,3 +66,3 @@ "@babel/eslint-parser": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@changesets/cli": "^2.27.10",
@@ -82,3 +82,3 @@ "@testing-library/cypress": "^10.0.2",
     "budo": "^11.8.4",
-    "cypress": "^13.16.0",
+    "cypress": "^13.16.1",
     "cypress-plugin-tab": "^1.0.5",
@@ -94,7 +94,7 @@ "eslint": "^8.57.0",
     "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"
@@ -101,0 +101,0 @@ },

README.md

 # 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 -->
@@ -87,6 +87,5 @@
 ```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';
 
@@ -154,3 +153,2 @@ class Demo extends React.Component {
 
-ReactDOM.render(<Demo />, document.getElementById('root')); // React 16-17
 createRoot(document.getElementById('root')).render(<Demo />); // React 18
@@ -197,10 +195,9 @@ ```
 ```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 (
@@ -229,3 +226,3 @@ <div ref={ref}>
 
-class DemoFunctionChild extends React.Component {
+class DemoFunctionChild extends Component {
   constructor(props) {
@@ -366,2 +363,3 @@ super(props);
     <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>
@@ -373,5 +371,5 @@ <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://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>
@@ -383,2 +381,4 @@ <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="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>
@@ -385,0 +385,0 @@ </tr>

src/focus-trap-react.js

@@ -428,2 +428,6 @@ const React = require('react');
 
+// 🔺 DEPRECATED: default export
 module.exports = FocusTrap;
+
+// named export
+module.exports.FocusTrap = FocusTrap;

No alert changes

Improved metrics

Total package byte prevSize

91784

2.66%

Lines of code

811

5.46%

No dependency changes