focus-trap - npm Package Compare versions

Comparing version 6.9.3 to 6.9.4

CHANGELOG.md

		# Changelog

		## 6.9.4

		### Patch Changes

		- f68882e: Fix docs and typings to clarify that initialFocus, fallbackFocus, and setReturnFocus options can be functions that also return selector strings.

		## 6.9.3
		@@ -4,0 +10,0 @@

dist/focus-trap.esm.js

		/*!
		* focus-trap 6.9.3
		* focus-trap 6.9.4
		* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
		@@ -4,0 +4,0 @@ */

dist/focus-trap.esm.min.js

		/*!
		* focus-trap 6.9.3
		* focus-trap 6.9.4
		* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
		@@ -4,0 +4,0 @@ */

dist/focus-trap.js

		/*!
		* focus-trap 6.9.3
		* focus-trap 6.9.4
		* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
		@@ -4,0 +4,0 @@ */

dist/focus-trap.min.js

		/*!
		* focus-trap 6.9.3
		* focus-trap 6.9.4
		* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
		@@ -4,0 +4,0 @@ */

dist/focus-trap.umd.js

		/*!
		* focus-trap 6.9.3
		* focus-trap 6.9.4
		* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
		@@ -4,0 +4,0 @@ */

dist/focus-trap.umd.min.js

		/*!
		* focus-trap 6.9.3
		* focus-trap 6.9.4
		* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
		@@ -4,0 +4,0 @@ */

index.d.ts

		import { CheckOptions as TabbableCheckOptions } from 'tabbable';

		declare module 'focus-trap' {
		export type FocusTargetValue = HTMLElement \| SVGElement \| string;
		export type FocusTargetValueOrFalse = FocusTargetValue \| false;

		/**
		@@ -9,3 +12,3 @@ * A DOM node, a selector string (which will be passed to
		*/
		export type FocusTarget = HTMLElement \| SVGElement \| string \| (() => HTMLElement \| SVGElement);
		export type FocusTarget = FocusTargetValue \| (() => FocusTargetValue);

		@@ -17,3 +20,3 @@ /**
		*/
		export type FocusTargetOrFalse = HTMLElement \| SVGElement \| string \| false \| (() => HTMLElement \| SVGElement \| false);
		export type FocusTargetOrFalse = FocusTargetValueOrFalse \| (() => FocusTargetValueOrFalse);

		@@ -117,3 +120,3 @@ type MouseEventToBoolean = (event: MouseEvent \| TouchEvent) => boolean;
		*/
		setReturnFocus?: HTMLElement \| SVGElement \| string \| false \| ((nodeFocusedBeforeActivation: HTMLElement \| SVGElement) => HTMLElement \| SVGElement \| false);
		setReturnFocus?: FocusTargetValueOrFalse \| ((nodeFocusedBeforeActivation: HTMLElement \| SVGElement) => FocusTargetValueOrFalse);
		/**
		@@ -120,0 +123,0 @@ * Default: `true`. If `false` or returns `false`, the `Escape` key will not trigger

package.json

		{
		"name": "focus-trap",
		"version": "6.9.3",
		"version": "6.9.4",
		"description": "Trap focus within a DOM node.",
		@@ -70,4 +70,4 @@ "main": "dist/focus-trap.js",
		"@babel/cli": "^7.17.10",
		"@babel/core": "^7.18.0",
		"@babel/eslint-parser": "^7.17.0",
		"@babel/core": "^7.18.2",
		"@babel/eslint-parser": "^7.18.2",
		"@babel/preset-env": "^7.18.2",
		@@ -78,3 +78,3 @@ "@changesets/cli": "^2.22.0",
		"@rollup/plugin-node-resolve": "^13.3.0",
		"@testing-library/cypress": "^8.0.2",
		"@testing-library/cypress": "^8.0.3",
		"@types/jquery": "^3.5.14",
		@@ -86,9 +86,9 @@ "all-contributors-cli": "^6.20.0",
		"cypress-plugin-tab": "^1.0.5",
		"eslint": "^8.16.0",
		"eslint": "^8.17.0",
		"eslint-config-prettier": "^8.5.0",
		"eslint-plugin-cypress": "^2.12.1",
		"eslint-plugin-jest": "^26.2.2",
		"eslint-plugin-jest": "^26.5.3",
		"onchange": "^7.1.0",
		"prettier": "^2.6.2",
		"rollup": "^2.74.1",
		"rollup": "^2.75.6",
		"rollup-plugin-inject-process-env": "^1.3.1",
		@@ -100,4 +100,4 @@ "rollup-plugin-livereload": "^2.0.5",
		"start-server-and-test": "^1.14.0",
		"typescript": "^4.7.2"
		"typescript": "^4.7.3"
		}
		}

README.md

		@@ -92,6 +92,6 @@ # focus-trap [![CI](https://github.com/focus-trap/focus-trap/workflows/CI/badge.svg?branch=master&event=push)](https://github.com/focus-trap/focus-trap/actions?query=workflow:CI+branch:master) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
		- checkCanReturnFocus `{(trigger: HTMLElement \| SVGElement) => Promise<void>}`: An animated trigger button will have a small delay between when `onDeactivate` is called and when the focus is able to be sent back to the trigger. `checkCanReturnFocus` expects a promise to be returned. When that promise settles (resolves or rejects), focus will be sent to to the node that had focus prior to the activation of the trap (or the node configured in the `setReturnFocus` option). Due to the lack of Promise support, `checkCanReturnFocus` is not supported in IE unless you provide a Promise polyfill.
		- initialFocus `{HTMLElement \| SVGElement \| string \| false \| (() => HTMLElement \| SVGElement \| false)}`: By default, when a focus trap is activated the first element in the focus trap's tab order will receive focus. With this option you can specify a different element to receive that initial focus. Can be a DOM node, or a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns a DOM node. You can also set this option to `false` (or to a function that returns `false`) to prevent any initial focus at all when the trap activates.
		- initialFocus `{HTMLElement \| SVGElement \| string \| false \| (() => HTMLElement \| SVGElement \| string \| false)}`: By default, when a focus trap is activated the first element in the focus trap's tab order will receive focus. With this option you can specify a different element to receive that initial focus. Can be a DOM node, or a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns any of these. You can also set this option to `false` (or to a function that returns `false`) to prevent any initial focus at all when the trap activates.
		- 💬 Setting this option to `false` (or a function that returns `false`) will prevent the `fallbackFocus` option from being used.
		- ⚠️ See warning below about Shadow DOM and selector strings.
		- fallbackFocus `{HTMLElement \| SVGElement \| string \| () => HTMLElement \| SVGElement}`: By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements. Make sure the fallback element has a negative `tabindex` so it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns a DOM node.
		- fallbackFocus `{HTMLElement \| SVGElement \| string \| () => HTMLElement \| SVGElement \| string}`: By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements. Make sure the fallback element has a negative `tabindex` so it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns any of these.
		- 💬 If `initialFocus` is `false` (or a function that returns `false`), this function will not be called when the trap is activated, and no element will be initially focused. This function may still be called while the trap is active if things change such that there are no longer any tabbable nodes in the trap.
		@@ -108,4 +108,4 @@ - ⚠️ See warning below about Shadow DOM and selector strings.
		- returnFocusOnDeactivate `{boolean}`: Default: `true`. If `false`, when the trap is deactivated, focus will not return to the element that had focus before activation.
		- setReturnFocus `{HTMLElement \| SVGElement \| string \| (previousActiveElement: HTMLElement \| SVGElement) => HTMLElement \| SVGElement \| false}`: By default, on deactivation, if `returnFocusOnDeactivate=true` (or if `returnFocus=true` in the [deactivation options](#trapdeactivatedeactivateoptions)), focus will be returned to the element that was focused just before activation. With this option, you can specify another element to programmatically receive focus after deactivation. It can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node upon deactivation), or a function that returns a DOM node to call upon deactivation (i.e. the selector and function options are only executed at the time the trap is deactivated), or `false` to leave focus where it is at the time of deactivation.
		- 💬 Using the selector or function options is a good way to return focus to a DOM node that may not even exist at the time the trap is activated.
		- setReturnFocus `{HTMLElement \| SVGElement \| string \| (previousActiveElement: HTMLElement \| SVGElement) => HTMLElement \| SVGElement \| string \| false}`: By default, on deactivation, if `returnFocusOnDeactivate=true` (or if `returnFocus=true` in the [deactivation options](#trapdeactivatedeactivateoptions)), focus will be returned to the element that was focused just before activation. With this option, you can specify another element to programmatically receive focus after deactivation. It can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node upon deactivation), or a function that returns any of these to call upon deactivation (i.e. the selector and function options are only executed at the time the trap is deactivated). Can also be `false` (or return `false`) to leave focus where it is at the time of deactivation.
		- 💬 Using the selector or function options is a good way to return focus to a DOM node that may not exist at the time the trap is activated.
		- ⚠️ See warning below about Shadow DOM and selector strings.
		@@ -112,0 +112,0 @@ - preventScroll `{boolean}`: By default, focus() will scroll to the element if not in viewport. It can produce unintended effects like scrolling back to the top of a modal. If set to `true`, no scroll will happen.

		@@ -92,6 +92,6 @@ # focus-trap [![CI](https://github.com/focus-trap/focus-trap/workflows/CI/badge.svg?branch=master&event=push)](https://github.com/focus-trap/focus-trap/actions?query=workflow:CI+branch:master) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
		- checkCanReturnFocus `{(trigger: HTMLElement \| SVGElement) => Promise<void>}`: An animated trigger button will have a small delay between when `onDeactivate` is called and when the focus is able to be sent back to the trigger. `checkCanReturnFocus` expects a promise to be returned. When that promise settles (resolves or rejects), focus will be sent to to the node that had focus prior to the activation of the trap (or the node configured in the `setReturnFocus` option). Due to the lack of Promise support, `checkCanReturnFocus` is not supported in IE unless you provide a Promise polyfill.
		- initialFocus `{HTMLElement \| SVGElement \| string \| false \| (() => HTMLElement \| SVGElement \| false)}`: By default, when a focus trap is activated the first element in the focus trap's tab order will receive focus. With this option you can specify a different element to receive that initial focus. Can be a DOM node, or a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns a DOM node. You can also set this option to `false` (or to a function that returns `false`) to prevent any initial focus at all when the trap activates.
		- initialFocus `{HTMLElement \| SVGElement \| string \| false \| (() => HTMLElement \| SVGElement \| string \| false)}`: By default, when a focus trap is activated the first element in the focus trap's tab order will receive focus. With this option you can specify a different element to receive that initial focus. Can be a DOM node, or a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns any of these. You can also set this option to `false` (or to a function that returns `false`) to prevent any initial focus at all when the trap activates.
		- 💬 Setting this option to `false` (or a function that returns `false`) will prevent the `fallbackFocus` option from being used.
		- ⚠️ See warning below about Shadow DOM and selector strings.
		- fallbackFocus `{HTMLElement \| SVGElement \| string \| () => HTMLElement \| SVGElement}`: By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements. Make sure the fallback element has a negative `tabindex` so it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns a DOM node.
		- fallbackFocus `{HTMLElement \| SVGElement \| string \| () => HTMLElement \| SVGElement \| string}`: By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements. Make sure the fallback element has a negative `tabindex` so it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns any of these.
		- 💬 If `initialFocus` is `false` (or a function that returns `false`), this function will not be called when the trap is activated, and no element will be initially focused. This function may still be called while the trap is active if things change such that there are no longer any tabbable nodes in the trap.
		@@ -108,4 +108,4 @@ - ⚠️ See warning below about Shadow DOM and selector strings.
		- returnFocusOnDeactivate `{boolean}`: Default: `true`. If `false`, when the trap is deactivated, focus will not return to the element that had focus before activation.
		- setReturnFocus `{HTMLElement \| SVGElement \| string \| (previousActiveElement: HTMLElement \| SVGElement) => HTMLElement \| SVGElement \| false}`: By default, on deactivation, if `returnFocusOnDeactivate=true` (or if `returnFocus=true` in the [deactivation options](#trapdeactivatedeactivateoptions)), focus will be returned to the element that was focused just before activation. With this option, you can specify another element to programmatically receive focus after deactivation. It can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node upon deactivation), or a function that returns a DOM node to call upon deactivation (i.e. the selector and function options are only executed at the time the trap is deactivated), or `false` to leave focus where it is at the time of deactivation.
		- 💬 Using the selector or function options is a good way to return focus to a DOM node that may not even exist at the time the trap is activated.
		- setReturnFocus `{HTMLElement \| SVGElement \| string \| (previousActiveElement: HTMLElement \| SVGElement) => HTMLElement \| SVGElement \| string \| false}`: By default, on deactivation, if `returnFocusOnDeactivate=true` (or if `returnFocus=true` in the [deactivation options](#trapdeactivatedeactivateoptions)), focus will be returned to the element that was focused just before activation. With this option, you can specify another element to programmatically receive focus after deactivation. It can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node upon deactivation), or a function that returns any of these to call upon deactivation (i.e. the selector and function options are only executed at the time the trap is deactivated). Can also be `false` (or return `false`) to leave focus where it is at the time of deactivation.
		- 💬 Using the selector or function options is a good way to return focus to a DOM node that may not exist at the time the trap is activated.
		- ⚠️ See warning below about Shadow DOM and selector strings.
		@@ -112,0 +112,0 @@ - preventScroll `{boolean}`: By default, focus() will scroll to the element if not in viewport. It can produce unintended effects like scrolling back to the top of a modal. If set to `true`, no scroll will happen.

focus-trap - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics