Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-aria/focus
Advanced tools
@react-aria/focus - npm Package Compare versions
Comparing version 3.0.0-rc.2 to 3.0.0-rc.3
550
dist/main.js
@@ -1,7 +0,11 @@ | ||
| var _babelRuntimeHelpersToConsumableArray = $parcel$interopDefault(require("@babel/runtime/helpers/toConsumableArray")); | ||
| var { | ||
| useFocus, | ||
| useFocusVisible, | ||
| useFocusWithin, | ||
| useKeyboard | ||
| } = require("@react-aria/interactions"); | ||
| var _temp = require("@react-aria/utils"); | ||
| var _classnames = $parcel$interopDefault(require("classnames")); | ||
| var focusWithoutScrolling = _temp.focusWithoutScrolling; | ||
| var mergeProps = _temp.mergeProps; | ||
| var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends")); | ||
@@ -12,23 +16,15 @@ var _react2 = require("react"); | ||
| var useContext = _react2.useContext; | ||
| var useEffect = _react2.useEffect; | ||
| var useLayoutEffect = _react2.useLayoutEffect; | ||
| var useRef = _react2.useRef; | ||
| var useState = _react2.useState; | ||
| var { | ||
| useContext, | ||
| useEffect, | ||
| useLayoutEffect, | ||
| useRef, | ||
| useState | ||
| } = _react2; | ||
| var _babelRuntimeHelpersDefineProperty = $parcel$interopDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var { | ||
| focusWithoutScrolling, | ||
| mergeProps | ||
| } = require("@react-aria/utils"); | ||
| var _babelRuntimeHelpersObjectSpread = $parcel$interopDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
| var _babelRuntimeHelpersSlicedToArray = $parcel$interopDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
| var _classnames = $parcel$interopDefault(require("classnames")); | ||
| var _temp2 = require("@react-aria/interactions"); | ||
| var useFocus = _temp2.useFocus; | ||
| var useFocusVisible = _temp2.useFocusVisible; | ||
| var useFocusWithin = _temp2.useFocusWithin; | ||
| var useKeyboard = _temp2.useKeyboard; | ||
| function $parcel$interopDefault(a) { | ||
@@ -38,80 +34,6 @@ return a && a.__esModule ? a.default : a; | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$_createForOfIteratorHelper(o) { | ||
| if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { | ||
| if (Array.isArray(o) || (o = $d3981abf5e4a9c633e711ab7782f0c73$var$_unsupportedIterableToArray(o))) { | ||
| var i = 0; | ||
| const $bdceb2956edbee43435a9382ef97283f$var$FocusContext = _react.createContext(null); | ||
| var F = function F() {}; | ||
| return { | ||
| s: F, | ||
| n: function n() { | ||
| if (i >= o.length) return { | ||
| done: true | ||
| }; | ||
| return { | ||
| done: false, | ||
| value: o[i++] | ||
| }; | ||
| }, | ||
| e: function e(_e) { | ||
| throw _e; | ||
| }, | ||
| f: F | ||
| }; | ||
| } | ||
| throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| var it, | ||
| normalCompletion = true, | ||
| didErr = false, | ||
| err; | ||
| return { | ||
| s: function s() { | ||
| it = o[Symbol.iterator](); | ||
| }, | ||
| n: function n() { | ||
| var step = it.next(); | ||
| normalCompletion = step.done; | ||
| return step; | ||
| }, | ||
| e: function e(_e2) { | ||
| didErr = true; | ||
| err = _e2; | ||
| }, | ||
| f: function f() { | ||
| try { | ||
| if (!normalCompletion && it.return != null) it.return(); | ||
| } finally { | ||
| if (didErr) throw err; | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$_unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return $d3981abf5e4a9c633e711ab7782f0c73$var$_arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(n); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return $d3981abf5e4a9c633e711ab7782f0c73$var$_arrayLikeToArray(o, minLen); | ||
| } | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$_arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) { | ||
| arr2[i] = arr[i]; | ||
| } | ||
| return arr2; | ||
| } | ||
| var $d3981abf5e4a9c633e711ab7782f0c73$var$FocusContext = _react.createContext(null); | ||
| var $d3981abf5e4a9c633e711ab7782f0c73$var$activeScope = null; | ||
| var $d3981abf5e4a9c633e711ab7782f0c73$var$scopes = new Set(); // This is a hacky DOM-based implementation of a FocusScope until this RFC lands in React: | ||
| let $bdceb2956edbee43435a9382ef97283f$var$activeScope = null; | ||
| let $bdceb2956edbee43435a9382ef97283f$var$scopes = new Set(); // This is a hacky DOM-based implementation of a FocusScope until this RFC lands in React: | ||
| // https://github.com/reactjs/rfcs/pull/109 | ||
@@ -121,14 +43,24 @@ // For now, it relies on the DOM tree order rather than the React tree order, and is probably | ||
| /** | ||
| * A FocusScope manages focus for its descendants. It supports containing focus inside | ||
| * the scope, restoring focus to the previously focused element on unmount, and auto | ||
| * focusing children on mount. It also acts as a container for a programmatic focus | ||
| * management interface that can be used to move focus forward and back in response | ||
| * to user events. | ||
| */ | ||
| function FocusScope(props) { | ||
| var children = props.children, | ||
| contain = props.contain, | ||
| restoreFocus = props.restoreFocus, | ||
| autoFocus = props.autoFocus; | ||
| var startRef = useRef(); | ||
| var endRef = useRef(); | ||
| var scopeRef = useRef([]); | ||
| useLayoutEffect(function () { | ||
| let { | ||
| children, | ||
| contain, | ||
| restoreFocus, | ||
| autoFocus | ||
| } = props; | ||
| let startRef = useRef(); | ||
| let endRef = useRef(); | ||
| let scopeRef = useRef([]); | ||
| useLayoutEffect(() => { | ||
| // Find all rendered nodes between the sentinels and add them to the scope. | ||
| var node = startRef.current.nextSibling; | ||
| var nodes = []; | ||
| let node = startRef.current.nextSibling; | ||
| let nodes = []; | ||
@@ -141,12 +73,12 @@ while (node && node !== endRef.current) { | ||
| scopeRef.current = nodes; | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$scopes.add(scopeRef); | ||
| return function () { | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$scopes.delete(scopeRef); | ||
| $bdceb2956edbee43435a9382ef97283f$var$scopes.add(scopeRef); | ||
| return () => { | ||
| $bdceb2956edbee43435a9382ef97283f$var$scopes.delete(scopeRef); | ||
| }; | ||
| }, [children]); | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$useFocusContainment(scopeRef, contain); | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$useRestoreFocus(scopeRef, restoreFocus, contain); | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$useAutoFocus(scopeRef, autoFocus); | ||
| var focusManager = $d3981abf5e4a9c633e711ab7782f0c73$var$createFocusManager(scopeRef); | ||
| return (/*#__PURE__*/_react.createElement($d3981abf5e4a9c633e711ab7782f0c73$var$FocusContext.Provider, { | ||
| $bdceb2956edbee43435a9382ef97283f$var$useFocusContainment(scopeRef, contain); | ||
| $bdceb2956edbee43435a9382ef97283f$var$useRestoreFocus(scopeRef, restoreFocus, contain); | ||
| $bdceb2956edbee43435a9382ef97283f$var$useAutoFocus(scopeRef, autoFocus); | ||
| let focusManager = $bdceb2956edbee43435a9382ef97283f$var$createFocusManager(scopeRef); | ||
| return (/*#__PURE__*/_react.createElement($bdceb2956edbee43435a9382ef97283f$var$FocusContext.Provider, { | ||
| value: focusManager | ||
@@ -162,7 +94,13 @@ }, /*#__PURE__*/_react.createElement("span", { | ||
| } | ||
| /** | ||
| * Returns a FocusManager interface for the parent FocusScope. | ||
| * A FocusManager can be used to programmatically move focus within | ||
| * a FocusScope, e.g. in response to user events like keyboard navigation. | ||
| */ | ||
| exports.FocusScope = FocusScope; | ||
| function useFocusManager() { | ||
| return useContext($d3981abf5e4a9c633e711ab7782f0c73$var$FocusContext); | ||
| return useContext($bdceb2956edbee43435a9382ef97283f$var$FocusContext); | ||
| } | ||
@@ -172,12 +110,13 @@ | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$createFocusManager(scopeRef) { | ||
| function $bdceb2956edbee43435a9382ef97283f$var$createFocusManager(scopeRef) { | ||
| return { | ||
| focusNext: function focusNext() { | ||
| var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var node = opts.from || document.activeElement; | ||
| var focusable = $d3981abf5e4a9c633e711ab7782f0c73$var$getFocusableElementsInScope(scopeRef.current, opts); | ||
| var nextNode = focusable.find(function (n) { | ||
| return !!(node.compareDocumentPosition(n) & (Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY)); | ||
| }); | ||
| focusNext(opts) { | ||
| if (opts === void 0) { | ||
| opts = {}; | ||
| } | ||
| let node = opts.from || document.activeElement; | ||
| let focusable = $bdceb2956edbee43435a9382ef97283f$var$getFocusableElementsInScope(scopeRef.current, opts); | ||
| let nextNode = focusable.find(n => !!(node.compareDocumentPosition(n) & (Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY))); | ||
| if (!nextNode && opts.wrap) { | ||
@@ -193,10 +132,12 @@ nextNode = focusable[0]; | ||
| }, | ||
| focusPrevious: function focusPrevious() { | ||
| var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var node = opts.from || document.activeElement; | ||
| var focusable = $d3981abf5e4a9c633e711ab7782f0c73$var$getFocusableElementsInScope(scopeRef.current, opts).reverse(); | ||
| var previousNode = focusable.find(function (n) { | ||
| return !!(node.compareDocumentPosition(n) & (Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINED_BY)); | ||
| }); | ||
| focusPrevious(opts) { | ||
| if (opts === void 0) { | ||
| opts = {}; | ||
| } | ||
| let node = opts.from || document.activeElement; | ||
| let focusable = $bdceb2956edbee43435a9382ef97283f$var$getFocusableElementsInScope(scopeRef.current, opts).reverse(); | ||
| let previousNode = focusable.find(n => !!(node.compareDocumentPosition(n) & (Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINED_BY))); | ||
| if (!previousNode && opts.wrap) { | ||
@@ -212,31 +153,21 @@ previousNode = focusable[0]; | ||
| } | ||
| }; | ||
| } | ||
| var $d3981abf5e4a9c633e711ab7782f0c73$var$focusableElements = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]']; | ||
| var $d3981abf5e4a9c633e711ab7782f0c73$var$FOCUSABLE_ELEMENT_SELECTOR = $d3981abf5e4a9c633e711ab7782f0c73$var$focusableElements.join(',') + ',[tabindex]'; | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$focusableElements.push('[tabindex]:not([tabindex="-1"])'); | ||
| var $d3981abf5e4a9c633e711ab7782f0c73$var$TABBABLE_ELEMENT_SELECTOR = $d3981abf5e4a9c633e711ab7782f0c73$var$focusableElements.join(':not([tabindex="-1"]),'); | ||
| const $bdceb2956edbee43435a9382ef97283f$var$focusableElements = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]']; | ||
| const $bdceb2956edbee43435a9382ef97283f$var$FOCUSABLE_ELEMENT_SELECTOR = $bdceb2956edbee43435a9382ef97283f$var$focusableElements.join(',') + ',[tabindex]'; | ||
| $bdceb2956edbee43435a9382ef97283f$var$focusableElements.push('[tabindex]:not([tabindex="-1"])'); | ||
| const $bdceb2956edbee43435a9382ef97283f$var$TABBABLE_ELEMENT_SELECTOR = $bdceb2956edbee43435a9382ef97283f$var$focusableElements.join(':not([tabindex="-1"]),'); | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$getFocusableElementsInScope(scope, opts) { | ||
| var res = []; | ||
| var selector = opts.tabbable ? $d3981abf5e4a9c633e711ab7782f0c73$var$TABBABLE_ELEMENT_SELECTOR : $d3981abf5e4a9c633e711ab7782f0c73$var$FOCUSABLE_ELEMENT_SELECTOR; | ||
| function $bdceb2956edbee43435a9382ef97283f$var$getFocusableElementsInScope(scope, opts) { | ||
| let res = []; | ||
| let selector = opts.tabbable ? $bdceb2956edbee43435a9382ef97283f$var$TABBABLE_ELEMENT_SELECTOR : $bdceb2956edbee43435a9382ef97283f$var$FOCUSABLE_ELEMENT_SELECTOR; | ||
| var _iterator = $d3981abf5e4a9c633e711ab7782f0c73$var$_createForOfIteratorHelper(scope), | ||
| _step; | ||
| for (let node of scope) { | ||
| if (node.matches(selector)) { | ||
| res.push(node); | ||
| } | ||
| try { | ||
| for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
| var node = _step.value; | ||
| if (node.matches(selector)) { | ||
| res.push(node); | ||
| } | ||
| res.push.apply(res, _babelRuntimeHelpersToConsumableArray(Array.from(node.querySelectorAll(selector)))); | ||
| } | ||
| } catch (err) { | ||
| _iterator.e(err); | ||
| } finally { | ||
| _iterator.f(); | ||
| res.push(...Array.from(node.querySelectorAll(selector))); | ||
| } | ||
@@ -247,6 +178,6 @@ | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$useFocusContainment(scopeRef, contain) { | ||
| var focusedNode = useRef(); | ||
| useEffect(function () { | ||
| var scope = scopeRef.current; | ||
| function $bdceb2956edbee43435a9382ef97283f$var$useFocusContainment(scopeRef, contain) { | ||
| let focusedNode = useRef(); | ||
| useEffect(() => { | ||
| let scope = scopeRef.current; | ||
@@ -258,3 +189,3 @@ if (!contain) { | ||
| var onKeyDown = function onKeyDown(e) { | ||
| let onKeyDown = e => { | ||
| if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey) { | ||
@@ -264,14 +195,14 @@ return; | ||
| var focusedElement = document.activeElement; | ||
| let focusedElement = document.activeElement; | ||
| if (!$d3981abf5e4a9c633e711ab7782f0c73$var$isElementInScope(focusedElement, scope)) { | ||
| if (!$bdceb2956edbee43435a9382ef97283f$var$isElementInScope(focusedElement, scope)) { | ||
| return; | ||
| } | ||
| var elements = $d3981abf5e4a9c633e711ab7782f0c73$var$getFocusableElementsInScope(scope, { | ||
| let elements = $bdceb2956edbee43435a9382ef97283f$var$getFocusableElementsInScope(scope, { | ||
| tabbable: true | ||
| }); | ||
| var position = elements.indexOf(focusedElement); | ||
| var lastPosition = elements.length - 1; | ||
| var nextElement = null; | ||
| let position = elements.indexOf(focusedElement); | ||
| let lastPosition = elements.length - 1; | ||
| let nextElement = null; | ||
@@ -295,10 +226,10 @@ if (e.shiftKey) { | ||
| if (nextElement) { | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$focusElement(nextElement); | ||
| $bdceb2956edbee43435a9382ef97283f$var$focusElement(nextElement, true); | ||
| } | ||
| }; | ||
| var onFocus = function onFocus(e) { | ||
| let onFocus = e => { | ||
| // If a focus event occurs outside the active scope (e.g. user tabs from browser location bar), | ||
| // restore focus to the previously focused node or the first tabbable element in the active scope. | ||
| var isInAnyScope = $d3981abf5e4a9c633e711ab7782f0c73$var$isElementInAnyScope(e.target, $d3981abf5e4a9c633e711ab7782f0c73$var$scopes); | ||
| let isInAnyScope = $bdceb2956edbee43435a9382ef97283f$var$isElementInAnyScope(e.target, $bdceb2956edbee43435a9382ef97283f$var$scopes); | ||
@@ -308,8 +239,8 @@ if (!isInAnyScope) { | ||
| focusedNode.current.focus(); | ||
| } else if ($d3981abf5e4a9c633e711ab7782f0c73$var$activeScope) { | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$focusFirstInScope($d3981abf5e4a9c633e711ab7782f0c73$var$activeScope.current); | ||
| } else if ($bdceb2956edbee43435a9382ef97283f$var$activeScope) { | ||
| $bdceb2956edbee43435a9382ef97283f$var$focusFirstInScope($bdceb2956edbee43435a9382ef97283f$var$activeScope.current); | ||
| } | ||
| } else { | ||
| e.stopPropagation(); | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$activeScope = scopeRef; | ||
| $bdceb2956edbee43435a9382ef97283f$var$activeScope = scopeRef; | ||
| focusedNode.current = e.target; | ||
@@ -319,11 +250,11 @@ } | ||
| var onBlur = function onBlur(e) { | ||
| let onBlur = e => { | ||
| e.stopPropagation(); | ||
| var isInAnyScope = $d3981abf5e4a9c633e711ab7782f0c73$var$isElementInAnyScope(e.relatedTarget, $d3981abf5e4a9c633e711ab7782f0c73$var$scopes); | ||
| let isInAnyScope = $bdceb2956edbee43435a9382ef97283f$var$isElementInAnyScope(e.relatedTarget, $bdceb2956edbee43435a9382ef97283f$var$scopes); | ||
| if (!isInAnyScope) { | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$activeScope = scopeRef; | ||
| focusedNode.current = e.target; // Firefox doesn't shift focus back to the Dialog properly without this | ||
| $bdceb2956edbee43435a9382ef97283f$var$activeScope = scopeRef; | ||
| focusedNode.current = e.target; // Firefox doesn't shift focus back to the Dialog properly without this | ||
| requestAnimationFrame(function () { | ||
| requestAnimationFrame(() => { | ||
| focusedNode.current.focus(); | ||
@@ -336,17 +267,9 @@ }); | ||
| document.addEventListener('focusin', onFocus, false); | ||
| scope.forEach(function (element) { | ||
| return element.addEventListener('focusin', onFocus, false); | ||
| }); | ||
| scope.forEach(function (element) { | ||
| return element.addEventListener('focusout', onBlur, false); | ||
| }); | ||
| return function () { | ||
| scope.forEach(element => element.addEventListener('focusin', onFocus, false)); | ||
| scope.forEach(element => element.addEventListener('focusout', onBlur, false)); | ||
| return () => { | ||
| document.removeEventListener('keydown', onKeyDown, false); | ||
| document.removeEventListener('focusin', onFocus, false); | ||
| scope.forEach(function (element) { | ||
| return element.removeEventListener('focusin', onFocus, false); | ||
| }); | ||
| scope.forEach(function (element) { | ||
| return element.removeEventListener('focusout', onBlur, false); | ||
| }); | ||
| scope.forEach(element => element.removeEventListener('focusin', onFocus, false)); | ||
| scope.forEach(element => element.removeEventListener('focusout', onBlur, false)); | ||
| }; | ||
@@ -356,18 +279,7 @@ }, [scopeRef, contain]); | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$isElementInAnyScope(element, scopes) { | ||
| var _iterator2 = $d3981abf5e4a9c633e711ab7782f0c73$var$_createForOfIteratorHelper(scopes.values()), | ||
| _step2; | ||
| try { | ||
| for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { | ||
| var scope = _step2.value; | ||
| if ($d3981abf5e4a9c633e711ab7782f0c73$var$isElementInScope(element, scope.current)) { | ||
| return true; | ||
| } | ||
| function $bdceb2956edbee43435a9382ef97283f$var$isElementInAnyScope(element, scopes) { | ||
| for (let scope of scopes.values()) { | ||
| if ($bdceb2956edbee43435a9382ef97283f$var$isElementInScope(element, scope.current)) { | ||
| return true; | ||
| } | ||
| } catch (err) { | ||
| _iterator2.e(err); | ||
| } finally { | ||
| _iterator2.f(); | ||
| } | ||
@@ -378,10 +290,12 @@ | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$isElementInScope(element, scope) { | ||
| return scope.some(function (node) { | ||
| return node.contains(element); | ||
| }); | ||
| function $bdceb2956edbee43435a9382ef97283f$var$isElementInScope(element, scope) { | ||
| return scope.some(node => node.contains(element)); | ||
| } | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$focusElement(element) { | ||
| if (element != null) { | ||
| function $bdceb2956edbee43435a9382ef97283f$var$focusElement(element, scroll) { | ||
| if (scroll === void 0) { | ||
| scroll = false; | ||
| } | ||
| if (element != null && !scroll) { | ||
| try { | ||
@@ -391,19 +305,24 @@ focusWithoutScrolling(element); | ||
| } | ||
| } else if (element != null) { | ||
| try { | ||
| element.focus(); | ||
| } catch (err) {// ignore | ||
| } | ||
| } | ||
| } | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$focusFirstInScope(scope) { | ||
| var elements = $d3981abf5e4a9c633e711ab7782f0c73$var$getFocusableElementsInScope(scope, { | ||
| function $bdceb2956edbee43435a9382ef97283f$var$focusFirstInScope(scope) { | ||
| let elements = $bdceb2956edbee43435a9382ef97283f$var$getFocusableElementsInScope(scope, { | ||
| tabbable: true | ||
| }); | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$focusElement(elements[0]); | ||
| $bdceb2956edbee43435a9382ef97283f$var$focusElement(elements[0]); | ||
| } | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$useAutoFocus(scopeRef, autoFocus) { | ||
| useEffect(function () { | ||
| function $bdceb2956edbee43435a9382ef97283f$var$useAutoFocus(scopeRef, autoFocus) { | ||
| useEffect(() => { | ||
| if (autoFocus) { | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$activeScope = scopeRef; | ||
| $bdceb2956edbee43435a9382ef97283f$var$activeScope = scopeRef; | ||
| if (!$d3981abf5e4a9c633e711ab7782f0c73$var$isElementInScope(document.activeElement, $d3981abf5e4a9c633e711ab7782f0c73$var$activeScope.current)) { | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$focusFirstInScope(scopeRef.current); | ||
| if (!$bdceb2956edbee43435a9382ef97283f$var$isElementInScope(document.activeElement, $bdceb2956edbee43435a9382ef97283f$var$activeScope.current)) { | ||
| $bdceb2956edbee43435a9382ef97283f$var$focusFirstInScope(scopeRef.current); | ||
| } | ||
@@ -414,7 +333,7 @@ } | ||
| function $d3981abf5e4a9c633e711ab7782f0c73$var$useRestoreFocus(scopeRef, restoreFocus, contain) { | ||
| function $bdceb2956edbee43435a9382ef97283f$var$useRestoreFocus(scopeRef, restoreFocus, contain) { | ||
| // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously. | ||
| useLayoutEffect(function () { | ||
| var scope = scopeRef.current; | ||
| var nodeToRestore = document.activeElement; // Handle the Tab key so that tabbing out of the scope goes to the next element | ||
| useLayoutEffect(() => { | ||
| let scope = scopeRef.current; | ||
| let nodeToRestore = document.activeElement; // Handle the Tab key so that tabbing out of the scope goes to the next element | ||
| // after the node that had focus when the scope mounted. This is important when | ||
@@ -424,3 +343,3 @@ // using portals for overlays, so that focus goes to the expected element when | ||
| var onKeyDown = function onKeyDown(e) { | ||
| let onKeyDown = e => { | ||
| if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey) { | ||
@@ -430,5 +349,5 @@ return; | ||
| var focusedElement = document.activeElement; | ||
| let focusedElement = document.activeElement; | ||
| if (!$d3981abf5e4a9c633e711ab7782f0c73$var$isElementInScope(focusedElement, scope)) { | ||
| if (!$bdceb2956edbee43435a9382ef97283f$var$isElementInScope(focusedElement, scope)) { | ||
| return; | ||
@@ -438,20 +357,15 @@ } // Create a DOM tree walker that matches all tabbable elements | ||
| var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, { | ||
| acceptNode: function acceptNode(node) { | ||
| if (node.matches($d3981abf5e4a9c633e711ab7782f0c73$var$TABBABLE_ELEMENT_SELECTOR)) { | ||
| return NodeFilter.FILTER_ACCEPT; | ||
| } | ||
| let walker = getFocusableTreeWalker(document.body, { | ||
| tabbable: true | ||
| }); // Find the next tabbable element after the currently focused element | ||
| return NodeFilter.FILTER_SKIP; | ||
| } | ||
| }, false); // Find the next tabbable element after the currently focused element | ||
| walker.currentNode = focusedElement; | ||
| var nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode(); // If there is no next element, or it is outside the current scope, move focus to the | ||
| let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode(); // If there is no next element, or it is outside the current scope, move focus to the | ||
| // next element after the node to restore to instead. | ||
| if ((!nextElement || !$d3981abf5e4a9c633e711ab7782f0c73$var$isElementInScope(nextElement, scope)) && nodeToRestore) { | ||
| if ((!nextElement || !$bdceb2956edbee43435a9382ef97283f$var$isElementInScope(nextElement, scope)) && nodeToRestore) { | ||
| walker.currentNode = nodeToRestore; | ||
| nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode(); | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
@@ -468,14 +382,14 @@ if (nextElement) { | ||
| if (!contain) { | ||
| document.addEventListener('keydown', onKeyDown, false); | ||
| document.addEventListener('keydown', onKeyDown, true); | ||
| } | ||
| return function () { | ||
| return () => { | ||
| if (!contain) { | ||
| document.removeEventListener('keydown', onKeyDown, false); | ||
| document.removeEventListener('keydown', onKeyDown, true); | ||
| } | ||
| if (restoreFocus && nodeToRestore && $d3981abf5e4a9c633e711ab7782f0c73$var$isElementInScope(document.activeElement, scope)) { | ||
| requestAnimationFrame(function () { | ||
| if (restoreFocus && nodeToRestore && $bdceb2956edbee43435a9382ef97283f$var$isElementInScope(document.activeElement, scope)) { | ||
| requestAnimationFrame(() => { | ||
| if (document.body.contains(nodeToRestore)) { | ||
| $d3981abf5e4a9c633e711ab7782f0c73$var$focusElement(nodeToRestore); | ||
| $bdceb2956edbee43435a9382ef97283f$var$focusElement(nodeToRestore); | ||
| } | ||
@@ -488,51 +402,95 @@ }); | ||
| function FocusRing(props) { | ||
| var _classNames; | ||
| function getFocusableTreeWalker(root, opts) { | ||
| // Create a DOM tree walker that matches all focusable/tabbable elements | ||
| let selector = (opts == null ? void 0 : opts.tabbable) ? $bdceb2956edbee43435a9382ef97283f$var$TABBABLE_ELEMENT_SELECTOR : $bdceb2956edbee43435a9382ef97283f$var$FOCUSABLE_ELEMENT_SELECTOR; | ||
| let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, { | ||
| acceptNode(node) { | ||
| var _opts$from; | ||
| var children = props.children, | ||
| focusClass = props.focusClass, | ||
| focusRingClass = props.focusRingClass, | ||
| within = props.within; | ||
| // Skip nodes inside the starting node. | ||
| if (opts == null ? void 0 : (_opts$from = opts.from) == null ? void 0 : _opts$from.contains(node)) { | ||
| return NodeFilter.FILTER_REJECT; | ||
| } | ||
| var _useState = useState(false), | ||
| _useState2 = _babelRuntimeHelpersSlicedToArray(_useState, 2), | ||
| isFocused = _useState2[0], | ||
| setFocused = _useState2[1]; | ||
| if (node.matches(selector)) { | ||
| return NodeFilter.FILTER_ACCEPT; | ||
| } | ||
| var _useState3 = useState(false), | ||
| _useState4 = _babelRuntimeHelpersSlicedToArray(_useState3, 2), | ||
| isFocusWithin = _useState4[0], | ||
| setFocusWithin = _useState4[1]; | ||
| return NodeFilter.FILTER_SKIP; | ||
| } | ||
| var _useFocusVisible = useFocusVisible(props), | ||
| isFocusVisible = _useFocusVisible.isFocusVisible; | ||
| }, false); | ||
| var _useFocus = useFocus({ | ||
| if (opts == null ? void 0 : opts.from) { | ||
| walker.currentNode = opts.from; | ||
| } | ||
| return walker; | ||
| } | ||
| exports.getFocusableTreeWalker = getFocusableTreeWalker; | ||
| /** | ||
| * Determines whether a focus ring should be shown to indicate keyboard focus. | ||
| * Focus rings are visible only when the user is interacting with a keyboard, | ||
| * not with a mouse, touch, or other input methods. | ||
| */ | ||
| function useFocusRing(props) { | ||
| if (props === void 0) { | ||
| props = {}; | ||
| } | ||
| let { | ||
| within | ||
| } = props; | ||
| let [isFocused, setFocused] = useState(false); | ||
| let [isFocusWithin, setFocusWithin] = useState(false); | ||
| let { | ||
| isFocusVisible | ||
| } = useFocusVisible(props); | ||
| let { | ||
| focusProps | ||
| } = useFocus({ | ||
| isDisabled: within, | ||
| onFocusChange: setFocused, | ||
| onFocus: function onFocus(e) { | ||
| return e.continuePropagation(); | ||
| }, | ||
| onBlur: function onBlur(e) { | ||
| return e.continuePropagation(); | ||
| } | ||
| }), | ||
| focusProps = _useFocus.focusProps; | ||
| var _useFocusWithin = useFocusWithin({ | ||
| onFocusChange: setFocused | ||
| }); | ||
| let { | ||
| focusWithinProps | ||
| } = useFocusWithin({ | ||
| isDisabled: !within, | ||
| onFocusWithinChange: setFocusWithin, | ||
| onFocusWithin: function onFocusWithin(e) { | ||
| return e.continuePropagation(); | ||
| }, | ||
| onBlurWithin: function onBlurWithin(e) { | ||
| return e.continuePropagation(); | ||
| } | ||
| }), | ||
| focusWithinProps = _useFocusWithin.focusWithinProps; | ||
| onFocusWithinChange: setFocusWithin | ||
| }); | ||
| return { | ||
| isFocused: within ? isFocusWithin : isFocused, | ||
| isFocusVisible: (within ? isFocusWithin : isFocused) && isFocusVisible, | ||
| focusProps: within ? focusWithinProps : focusProps | ||
| }; | ||
| } | ||
| var child = _react.Children.only(children); | ||
| exports.useFocusRing = useFocusRing; | ||
| return _react.cloneElement(child, mergeProps(child.props, _babelRuntimeHelpersObjectSpread({}, within ? focusWithinProps : focusProps, { | ||
| className: _classnames((_classNames = {}, _babelRuntimeHelpersDefineProperty(_classNames, focusClass || '', within ? isFocusWithin : isFocused), _babelRuntimeHelpersDefineProperty(_classNames, focusRingClass || '', (within ? isFocusWithin : isFocused) && isFocusVisible), _classNames)) | ||
| /** | ||
| * A utility component that applies a CSS class when an element has keyboard focus. | ||
| * Focus rings are visible only when the user is interacting with a keyboard, | ||
| * not with a mouse, touch, or other input methods. | ||
| */ | ||
| function FocusRing(props) { | ||
| let { | ||
| children, | ||
| focusClass, | ||
| focusRingClass | ||
| } = props; | ||
| let { | ||
| isFocused, | ||
| isFocusVisible, | ||
| focusProps | ||
| } = useFocusRing(props); | ||
| let child = _react.Children.only(children); | ||
| return _react.cloneElement(child, mergeProps(child.props, _babelRuntimeHelpersExtends({}, focusProps, { | ||
| className: _classnames({ | ||
| [focusClass || '']: isFocused, | ||
| [focusRingClass || '']: isFocusVisible | ||
| }) | ||
| }))); | ||
@@ -544,9 +502,10 @@ } | ||
| function useFocusable(props, domRef) { | ||
| var _useFocus = useFocus(props), | ||
| focusProps = _useFocus.focusProps; | ||
| var _useKeyboard = useKeyboard(props), | ||
| keyboardProps = _useKeyboard.keyboardProps; | ||
| useEffect(function () { | ||
| let { | ||
| focusProps | ||
| } = useFocus(props); | ||
| let { | ||
| keyboardProps | ||
| } = useKeyboard(props); | ||
| let interactions = mergeProps(focusProps, keyboardProps); | ||
| useEffect(() => { | ||
| if (props.autoFocus && domRef && domRef.current) { | ||
@@ -557,6 +516,9 @@ domRef.current.focus(); | ||
| return { | ||
| focusableProps: mergeProps(focusProps, keyboardProps) | ||
| focusableProps: _babelRuntimeHelpersExtends({}, interactions, { | ||
| tabIndex: props.tabIndex | ||
| }) | ||
| }; | ||
| } | ||
| exports.useFocusable = useFocusable; | ||
| exports.useFocusable = useFocusable; | ||
| //# sourceMappingURL=main.js.map |
@@ -0,11 +1,11 @@ | ||
| import { useFocus, useFocusVisible, useFocusWithin, useKeyboard } from "@react-aria/interactions"; | ||
| import _classnames from "classnames"; | ||
| import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends"; | ||
| import _react, { useContext, useEffect, useLayoutEffect, useRef, useState } from "react"; | ||
| import { focusWithoutScrolling, mergeProps } from "@react-aria/utils"; | ||
| import _react, { useContext, useEffect, useLayoutEffect, useRef, useState } from "react"; | ||
| import _babelRuntimeHelpersEsmObjectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
| import _classnames from "classnames"; | ||
| import { useFocus, useFocusVisible, useFocusWithin, useKeyboard } from "@react-aria/interactions"; | ||
| const $a00625b63ff86478b58931762d548$var$FocusContext = _react.createContext(null); | ||
| const $c9e8f80f5bb1841844f54e4ad30b$var$FocusContext = _react.createContext(null); | ||
| let $a00625b63ff86478b58931762d548$var$activeScope = null; | ||
| let $a00625b63ff86478b58931762d548$var$scopes = new Set(); // This is a hacky DOM-based implementation of a FocusScope until this RFC lands in React: | ||
| let $c9e8f80f5bb1841844f54e4ad30b$var$activeScope = null; | ||
| let $c9e8f80f5bb1841844f54e4ad30b$var$scopes = new Set(); // This is a hacky DOM-based implementation of a FocusScope until this RFC lands in React: | ||
| // https://github.com/reactjs/rfcs/pull/109 | ||
@@ -15,2 +15,10 @@ // For now, it relies on the DOM tree order rather than the React tree order, and is probably | ||
| /** | ||
| * A FocusScope manages focus for its descendants. It supports containing focus inside | ||
| * the scope, restoring focus to the previously focused element on unmount, and auto | ||
| * focusing children on mount. It also acts as a container for a programmatic focus | ||
| * management interface that can be used to move focus forward and back in response | ||
| * to user events. | ||
| */ | ||
| export function FocusScope(props) { | ||
@@ -37,12 +45,12 @@ let { | ||
| scopeRef.current = nodes; | ||
| $a00625b63ff86478b58931762d548$var$scopes.add(scopeRef); | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$scopes.add(scopeRef); | ||
| return () => { | ||
| $a00625b63ff86478b58931762d548$var$scopes.delete(scopeRef); | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$scopes.delete(scopeRef); | ||
| }; | ||
| }, [children]); | ||
| $a00625b63ff86478b58931762d548$var$useFocusContainment(scopeRef, contain); | ||
| $a00625b63ff86478b58931762d548$var$useRestoreFocus(scopeRef, restoreFocus, contain); | ||
| $a00625b63ff86478b58931762d548$var$useAutoFocus(scopeRef, autoFocus); | ||
| let focusManager = $a00625b63ff86478b58931762d548$var$createFocusManager(scopeRef); | ||
| return (/*#__PURE__*/_react.createElement($a00625b63ff86478b58931762d548$var$FocusContext.Provider, { | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$useFocusContainment(scopeRef, contain); | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$useRestoreFocus(scopeRef, restoreFocus, contain); | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$useAutoFocus(scopeRef, autoFocus); | ||
| let focusManager = $c9e8f80f5bb1841844f54e4ad30b$var$createFocusManager(scopeRef); | ||
| return (/*#__PURE__*/_react.createElement($c9e8f80f5bb1841844f54e4ad30b$var$FocusContext.Provider, { | ||
| value: focusManager | ||
@@ -58,11 +66,21 @@ }, /*#__PURE__*/_react.createElement("span", { | ||
| } | ||
| /** | ||
| * Returns a FocusManager interface for the parent FocusScope. | ||
| * A FocusManager can be used to programmatically move focus within | ||
| * a FocusScope, e.g. in response to user events like keyboard navigation. | ||
| */ | ||
| export function useFocusManager() { | ||
| return useContext($a00625b63ff86478b58931762d548$var$FocusContext); | ||
| return useContext($c9e8f80f5bb1841844f54e4ad30b$var$FocusContext); | ||
| } | ||
| function $a00625b63ff86478b58931762d548$var$createFocusManager(scopeRef) { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$createFocusManager(scopeRef) { | ||
| return { | ||
| focusNext(opts = {}) { | ||
| focusNext(opts) { | ||
| if (opts === void 0) { | ||
| opts = {}; | ||
| } | ||
| let node = opts.from || document.activeElement; | ||
| let focusable = $a00625b63ff86478b58931762d548$var$getFocusableElementsInScope(scopeRef.current, opts); | ||
| let focusable = $c9e8f80f5bb1841844f54e4ad30b$var$getFocusableElementsInScope(scopeRef.current, opts); | ||
| let nextNode = focusable.find(n => !!(node.compareDocumentPosition(n) & (Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY))); | ||
@@ -81,5 +99,9 @@ | ||
| focusPrevious(opts = {}) { | ||
| focusPrevious(opts) { | ||
| if (opts === void 0) { | ||
| opts = {}; | ||
| } | ||
| let node = opts.from || document.activeElement; | ||
| let focusable = $a00625b63ff86478b58931762d548$var$getFocusableElementsInScope(scopeRef.current, opts).reverse(); | ||
| let focusable = $c9e8f80f5bb1841844f54e4ad30b$var$getFocusableElementsInScope(scopeRef.current, opts).reverse(); | ||
| let previousNode = focusable.find(n => !!(node.compareDocumentPosition(n) & (Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINED_BY))); | ||
@@ -101,10 +123,10 @@ | ||
| const $a00625b63ff86478b58931762d548$var$focusableElements = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]']; | ||
| const $a00625b63ff86478b58931762d548$var$FOCUSABLE_ELEMENT_SELECTOR = $a00625b63ff86478b58931762d548$var$focusableElements.join(',') + ',[tabindex]'; | ||
| $a00625b63ff86478b58931762d548$var$focusableElements.push('[tabindex]:not([tabindex="-1"])'); | ||
| const $a00625b63ff86478b58931762d548$var$TABBABLE_ELEMENT_SELECTOR = $a00625b63ff86478b58931762d548$var$focusableElements.join(':not([tabindex="-1"]),'); | ||
| const $c9e8f80f5bb1841844f54e4ad30b$var$focusableElements = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]']; | ||
| const $c9e8f80f5bb1841844f54e4ad30b$var$FOCUSABLE_ELEMENT_SELECTOR = $c9e8f80f5bb1841844f54e4ad30b$var$focusableElements.join(',') + ',[tabindex]'; | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$focusableElements.push('[tabindex]:not([tabindex="-1"])'); | ||
| const $c9e8f80f5bb1841844f54e4ad30b$var$TABBABLE_ELEMENT_SELECTOR = $c9e8f80f5bb1841844f54e4ad30b$var$focusableElements.join(':not([tabindex="-1"]),'); | ||
| function $a00625b63ff86478b58931762d548$var$getFocusableElementsInScope(scope, opts) { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$getFocusableElementsInScope(scope, opts) { | ||
| let res = []; | ||
| let selector = opts.tabbable ? $a00625b63ff86478b58931762d548$var$TABBABLE_ELEMENT_SELECTOR : $a00625b63ff86478b58931762d548$var$FOCUSABLE_ELEMENT_SELECTOR; | ||
| let selector = opts.tabbable ? $c9e8f80f5bb1841844f54e4ad30b$var$TABBABLE_ELEMENT_SELECTOR : $c9e8f80f5bb1841844f54e4ad30b$var$FOCUSABLE_ELEMENT_SELECTOR; | ||
@@ -122,3 +144,3 @@ for (let node of scope) { | ||
| function $a00625b63ff86478b58931762d548$var$useFocusContainment(scopeRef, contain) { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$useFocusContainment(scopeRef, contain) { | ||
| let focusedNode = useRef(); | ||
@@ -140,7 +162,7 @@ useEffect(() => { | ||
| if (!$a00625b63ff86478b58931762d548$var$isElementInScope(focusedElement, scope)) { | ||
| if (!$c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(focusedElement, scope)) { | ||
| return; | ||
| } | ||
| let elements = $a00625b63ff86478b58931762d548$var$getFocusableElementsInScope(scope, { | ||
| let elements = $c9e8f80f5bb1841844f54e4ad30b$var$getFocusableElementsInScope(scope, { | ||
| tabbable: true | ||
@@ -169,3 +191,3 @@ }); | ||
| if (nextElement) { | ||
| $a00625b63ff86478b58931762d548$var$focusElement(nextElement); | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$focusElement(nextElement, true); | ||
| } | ||
@@ -177,3 +199,3 @@ }; | ||
| // restore focus to the previously focused node or the first tabbable element in the active scope. | ||
| let isInAnyScope = $a00625b63ff86478b58931762d548$var$isElementInAnyScope(e.target, $a00625b63ff86478b58931762d548$var$scopes); | ||
| let isInAnyScope = $c9e8f80f5bb1841844f54e4ad30b$var$isElementInAnyScope(e.target, $c9e8f80f5bb1841844f54e4ad30b$var$scopes); | ||
@@ -183,8 +205,8 @@ if (!isInAnyScope) { | ||
| focusedNode.current.focus(); | ||
| } else if ($a00625b63ff86478b58931762d548$var$activeScope) { | ||
| $a00625b63ff86478b58931762d548$var$focusFirstInScope($a00625b63ff86478b58931762d548$var$activeScope.current); | ||
| } else if ($c9e8f80f5bb1841844f54e4ad30b$var$activeScope) { | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$focusFirstInScope($c9e8f80f5bb1841844f54e4ad30b$var$activeScope.current); | ||
| } | ||
| } else { | ||
| e.stopPropagation(); | ||
| $a00625b63ff86478b58931762d548$var$activeScope = scopeRef; | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$activeScope = scopeRef; | ||
| focusedNode.current = e.target; | ||
@@ -196,7 +218,7 @@ } | ||
| e.stopPropagation(); | ||
| let isInAnyScope = $a00625b63ff86478b58931762d548$var$isElementInAnyScope(e.relatedTarget, $a00625b63ff86478b58931762d548$var$scopes); | ||
| let isInAnyScope = $c9e8f80f5bb1841844f54e4ad30b$var$isElementInAnyScope(e.relatedTarget, $c9e8f80f5bb1841844f54e4ad30b$var$scopes); | ||
| if (!isInAnyScope) { | ||
| $a00625b63ff86478b58931762d548$var$activeScope = scopeRef; | ||
| focusedNode.current = e.target; // Firefox doesn't shift focus back to the Dialog properly without this | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$activeScope = scopeRef; | ||
| focusedNode.current = e.target; // Firefox doesn't shift focus back to the Dialog properly without this | ||
@@ -222,5 +244,5 @@ requestAnimationFrame(() => { | ||
| function $a00625b63ff86478b58931762d548$var$isElementInAnyScope(element, scopes) { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$isElementInAnyScope(element, scopes) { | ||
| for (let scope of scopes.values()) { | ||
| if ($a00625b63ff86478b58931762d548$var$isElementInScope(element, scope.current)) { | ||
| if ($c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(element, scope.current)) { | ||
| return true; | ||
@@ -233,8 +255,12 @@ } | ||
| function $a00625b63ff86478b58931762d548$var$isElementInScope(element, scope) { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(element, scope) { | ||
| return scope.some(node => node.contains(element)); | ||
| } | ||
| function $a00625b63ff86478b58931762d548$var$focusElement(element) { | ||
| if (element != null) { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$focusElement(element, scroll) { | ||
| if (scroll === void 0) { | ||
| scroll = false; | ||
| } | ||
| if (element != null && !scroll) { | ||
| try { | ||
@@ -244,19 +270,24 @@ focusWithoutScrolling(element); | ||
| } | ||
| } else if (element != null) { | ||
| try { | ||
| element.focus(); | ||
| } catch (err) {// ignore | ||
| } | ||
| } | ||
| } | ||
| function $a00625b63ff86478b58931762d548$var$focusFirstInScope(scope) { | ||
| let elements = $a00625b63ff86478b58931762d548$var$getFocusableElementsInScope(scope, { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$focusFirstInScope(scope) { | ||
| let elements = $c9e8f80f5bb1841844f54e4ad30b$var$getFocusableElementsInScope(scope, { | ||
| tabbable: true | ||
| }); | ||
| $a00625b63ff86478b58931762d548$var$focusElement(elements[0]); | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$focusElement(elements[0]); | ||
| } | ||
| function $a00625b63ff86478b58931762d548$var$useAutoFocus(scopeRef, autoFocus) { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$useAutoFocus(scopeRef, autoFocus) { | ||
| useEffect(() => { | ||
| if (autoFocus) { | ||
| $a00625b63ff86478b58931762d548$var$activeScope = scopeRef; | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$activeScope = scopeRef; | ||
| if (!$a00625b63ff86478b58931762d548$var$isElementInScope(document.activeElement, $a00625b63ff86478b58931762d548$var$activeScope.current)) { | ||
| $a00625b63ff86478b58931762d548$var$focusFirstInScope(scopeRef.current); | ||
| if (!$c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(document.activeElement, $c9e8f80f5bb1841844f54e4ad30b$var$activeScope.current)) { | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$focusFirstInScope(scopeRef.current); | ||
| } | ||
@@ -267,3 +298,3 @@ } | ||
| function $a00625b63ff86478b58931762d548$var$useRestoreFocus(scopeRef, restoreFocus, contain) { | ||
| function $c9e8f80f5bb1841844f54e4ad30b$var$useRestoreFocus(scopeRef, restoreFocus, contain) { | ||
| // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously. | ||
@@ -284,3 +315,3 @@ useLayoutEffect(() => { | ||
| if (!$a00625b63ff86478b58931762d548$var$isElementInScope(focusedElement, scope)) { | ||
| if (!$c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(focusedElement, scope)) { | ||
| return; | ||
@@ -290,13 +321,6 @@ } // Create a DOM tree walker that matches all tabbable elements | ||
| let walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, { | ||
| acceptNode(node) { | ||
| if (node.matches($a00625b63ff86478b58931762d548$var$TABBABLE_ELEMENT_SELECTOR)) { | ||
| return NodeFilter.FILTER_ACCEPT; | ||
| } | ||
| let walker = getFocusableTreeWalker(document.body, { | ||
| tabbable: true | ||
| }); // Find the next tabbable element after the currently focused element | ||
| return NodeFilter.FILTER_SKIP; | ||
| } | ||
| }, false); // Find the next tabbable element after the currently focused element | ||
| walker.currentNode = focusedElement; | ||
@@ -306,6 +330,7 @@ let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode(); // If there is no next element, or it is outside the current scope, move focus to the | ||
| if ((!nextElement || !$a00625b63ff86478b58931762d548$var$isElementInScope(nextElement, scope)) && nodeToRestore) { | ||
| if ((!nextElement || !$c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(nextElement, scope)) && nodeToRestore) { | ||
| walker.currentNode = nodeToRestore; | ||
| nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode(); | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
@@ -322,3 +347,3 @@ if (nextElement) { | ||
| if (!contain) { | ||
| document.addEventListener('keydown', onKeyDown, false); | ||
| document.addEventListener('keydown', onKeyDown, true); | ||
| } | ||
@@ -328,9 +353,9 @@ | ||
| if (!contain) { | ||
| document.removeEventListener('keydown', onKeyDown, false); | ||
| document.removeEventListener('keydown', onKeyDown, true); | ||
| } | ||
| if (restoreFocus && nodeToRestore && $a00625b63ff86478b58931762d548$var$isElementInScope(document.activeElement, scope)) { | ||
| if (restoreFocus && nodeToRestore && $c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(document.activeElement, scope)) { | ||
| requestAnimationFrame(() => { | ||
| if (document.body.contains(nodeToRestore)) { | ||
| $a00625b63ff86478b58931762d548$var$focusElement(nodeToRestore); | ||
| $c9e8f80f5bb1841844f54e4ad30b$var$focusElement(nodeToRestore); | ||
| } | ||
@@ -343,7 +368,41 @@ }); | ||
| export function FocusRing(props) { | ||
| export function getFocusableTreeWalker(root, opts) { | ||
| // Create a DOM tree walker that matches all focusable/tabbable elements | ||
| let selector = (opts == null ? void 0 : opts.tabbable) ? $c9e8f80f5bb1841844f54e4ad30b$var$TABBABLE_ELEMENT_SELECTOR : $c9e8f80f5bb1841844f54e4ad30b$var$FOCUSABLE_ELEMENT_SELECTOR; | ||
| let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, { | ||
| acceptNode(node) { | ||
| var _opts$from; | ||
| // Skip nodes inside the starting node. | ||
| if (opts == null ? void 0 : (_opts$from = opts.from) == null ? void 0 : _opts$from.contains(node)) { | ||
| return NodeFilter.FILTER_REJECT; | ||
| } | ||
| if (node.matches(selector)) { | ||
| return NodeFilter.FILTER_ACCEPT; | ||
| } | ||
| return NodeFilter.FILTER_SKIP; | ||
| } | ||
| }, false); | ||
| if (opts == null ? void 0 : opts.from) { | ||
| walker.currentNode = opts.from; | ||
| } | ||
| return walker; | ||
| } | ||
| /** | ||
| * Determines whether a focus ring should be shown to indicate keyboard focus. | ||
| * Focus rings are visible only when the user is interacting with a keyboard, | ||
| * not with a mouse, touch, or other input methods. | ||
| */ | ||
| export function useFocusRing(props) { | ||
| if (props === void 0) { | ||
| props = {}; | ||
| } | ||
| let { | ||
| children, | ||
| focusClass, | ||
| focusRingClass, | ||
| within | ||
@@ -360,5 +419,3 @@ } = props; | ||
| isDisabled: within, | ||
| onFocusChange: setFocused, | ||
| onFocus: e => e.continuePropagation(), | ||
| onBlur: e => e.continuePropagation() | ||
| onFocusChange: setFocused | ||
| }); | ||
@@ -369,13 +426,34 @@ let { | ||
| isDisabled: !within, | ||
| onFocusWithinChange: setFocusWithin, | ||
| onFocusWithin: e => e.continuePropagation(), | ||
| onBlurWithin: e => e.continuePropagation() | ||
| onFocusWithinChange: setFocusWithin | ||
| }); | ||
| return { | ||
| isFocused: within ? isFocusWithin : isFocused, | ||
| isFocusVisible: (within ? isFocusWithin : isFocused) && isFocusVisible, | ||
| focusProps: within ? focusWithinProps : focusProps | ||
| }; | ||
| } | ||
| /** | ||
| * A utility component that applies a CSS class when an element has keyboard focus. | ||
| * Focus rings are visible only when the user is interacting with a keyboard, | ||
| * not with a mouse, touch, or other input methods. | ||
| */ | ||
| export function FocusRing(props) { | ||
| let { | ||
| children, | ||
| focusClass, | ||
| focusRingClass | ||
| } = props; | ||
| let { | ||
| isFocused, | ||
| isFocusVisible, | ||
| focusProps | ||
| } = useFocusRing(props); | ||
| let child = _react.Children.only(children); | ||
| return _react.cloneElement(child, mergeProps(child.props, _babelRuntimeHelpersEsmObjectSpread({}, within ? focusWithinProps : focusProps, { | ||
| return _react.cloneElement(child, mergeProps(child.props, _babelRuntimeHelpersEsmExtends({}, focusProps, { | ||
| className: _classnames({ | ||
| [focusClass || '']: within ? isFocusWithin : isFocused, | ||
| [focusRingClass || '']: (within ? isFocusWithin : isFocused) && isFocusVisible | ||
| [focusClass || '']: isFocused, | ||
| [focusRingClass || '']: isFocusVisible | ||
| }) | ||
@@ -391,2 +469,3 @@ }))); | ||
| } = useKeyboard(props); | ||
| let interactions = mergeProps(focusProps, keyboardProps); | ||
| useEffect(() => { | ||
@@ -398,4 +477,7 @@ if (props.autoFocus && domRef && domRef.current) { | ||
| return { | ||
| focusableProps: mergeProps(focusProps, keyboardProps) | ||
| focusableProps: _babelRuntimeHelpersEsmExtends({}, interactions, { | ||
| tabIndex: props.tabIndex | ||
| }) | ||
| }; | ||
| } | ||
| } | ||
| //# sourceMappingURL=module.js.map |
@@ -1,37 +0,363 @@ | ||
| import { ReactNode, ReactElement, RefObject } from "react"; | ||
| import { FocusEvents, KeyboardEvents } from "@react-types/shared"; | ||
| import { ReactNode, HTMLAttributes, ReactElement, RefObject } from "react"; | ||
| import { FocusableDOMProps, FocusableProps } from "@react-types/shared"; | ||
| interface FocusScopeProps { | ||
| /** The contents of the focus scope. */ | ||
| children: ReactNode; | ||
| /** | ||
| * Whether to contain focus inside the scope, so users cannot | ||
| * move focus outside, for example in a modal dialog. | ||
| */ | ||
| contain?: boolean; | ||
| /** | ||
| * Whether to restore focus back to the element that was focused | ||
| * when the focus scope mounted, after the focus scope unmounts. | ||
| */ | ||
| restoreFocus?: boolean; | ||
| /** Whether to auto focus the first focusable element in the focus scope on mount. */ | ||
| autoFocus?: boolean; | ||
| } | ||
| interface FocusManagerOptions { | ||
| /** The element to start searching from. The currently focused element by default. */ | ||
| from?: HTMLElement; | ||
| /** Whether to only include tabbable elements, or all focusable elements. */ | ||
| tabbable?: boolean; | ||
| /** Whether focus should wrap around when it reaches the end of the scope. */ | ||
| wrap?: boolean; | ||
| } | ||
| interface FocusManager { | ||
| /** Moves focus to the next focusable or tabbable element in the focus scope. */ | ||
| focusNext(opts?: FocusManagerOptions): HTMLElement; | ||
| /** Moves focus to the previous focusable or tabbable element in the focus scope. */ | ||
| focusPrevious(opts?: FocusManagerOptions): HTMLElement; | ||
| } | ||
| /** | ||
| * A FocusScope manages focus for its descendants. It supports containing focus inside | ||
| * the scope, restoring focus to the previously focused element on unmount, and auto | ||
| * focusing children on mount. It also acts as a container for a programmatic focus | ||
| * management interface that can be used to move focus forward and back in response | ||
| * to user events. | ||
| */ | ||
| export function FocusScope(props: FocusScopeProps): JSX.Element; | ||
| /** | ||
| * Returns a FocusManager interface for the parent FocusScope. | ||
| * A FocusManager can be used to programmatically move focus within | ||
| * a FocusScope, e.g. in response to user events like keyboard navigation. | ||
| */ | ||
| export function useFocusManager(): FocusManager; | ||
| export function getFocusableTreeWalker(root: HTMLElement, opts?: FocusManagerOptions): TreeWalker; | ||
| interface FocusRingProps { | ||
| children?: ReactElement; | ||
| /** | ||
| * Whether to show the focus ring when something | ||
| * inside the container element has focus (true), or | ||
| * only if the container itself has focus (false). | ||
| * @default 'false' | ||
| */ | ||
| within?: boolean; | ||
| /** Whether the element is a text input. */ | ||
| isTextInput?: boolean; | ||
| /** Whether the element will be auto focused. */ | ||
| autoFocus?: boolean; | ||
| } | ||
| interface FocusRingAria { | ||
| /** Whether the element is currently focused. */ | ||
| isFocused: boolean; | ||
| /** Whether keyboard focus should be visible. */ | ||
| isFocusVisible: boolean; | ||
| /** Props to apply to the container element with the focus ring. */ | ||
| focusProps: HTMLAttributes<HTMLElement>; | ||
| } | ||
| /** | ||
| * Determines whether a focus ring should be shown to indicate keyboard focus. | ||
| * Focus rings are visible only when the user is interacting with a keyboard, | ||
| * not with a mouse, touch, or other input methods. | ||
| */ | ||
| export function useFocusRing(props?: FocusRingProps): FocusRingAria; | ||
| interface _FocusRingProps1 { | ||
| /** Child element to apply CSS classes to. */ | ||
| children: ReactElement; | ||
| /** CSS class to apply when the element is focused. */ | ||
| focusClass?: string; | ||
| /** CSS class to apply when the element has keyboard focus. */ | ||
| focusRingClass?: string; | ||
| /** | ||
| * Whether to show the focus ring when something | ||
| * inside the container element has focus (true), or | ||
| * only if the container itself has focus (false). | ||
| * @default false | ||
| */ | ||
| within?: boolean; | ||
| /** Whether the element is a text input. */ | ||
| isTextInput?: boolean; | ||
| /** Whether the element will be auto focused. */ | ||
| autoFocus?: boolean; | ||
| } | ||
| export function FocusRing(props: FocusRingProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>; | ||
| interface FocusableProps extends FocusEvents, KeyboardEvents { | ||
| /** | ||
| * A utility component that applies a CSS class when an element has keyboard focus. | ||
| * Focus rings are visible only when the user is interacting with a keyboard, | ||
| * not with a mouse, touch, or other input methods. | ||
| */ | ||
| export function FocusRing(props: _FocusRingProps1): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>; | ||
| interface FocusableOptions extends FocusableProps, FocusableDOMProps { | ||
| isDisabled?: boolean; | ||
| autoFocus?: boolean; | ||
| } | ||
| export function useFocusable(props: FocusableProps, domRef?: RefObject<HTMLElement>): { | ||
| focusableProps: import("react").HTMLAttributes<HTMLElement>; | ||
| export function useFocusable(props: FocusableOptions, domRef?: RefObject<HTMLElement>): { | ||
| focusableProps: { | ||
| tabIndex: number; | ||
| defaultChecked?: boolean; | ||
| defaultValue?: string | number | string[]; | ||
| suppressContentEditableWarning?: boolean; | ||
| suppressHydrationWarning?: boolean; | ||
| accessKey?: string; | ||
| className?: string; | ||
| contentEditable?: boolean; | ||
| contextMenu?: string; | ||
| dir?: string; | ||
| draggable?: boolean; | ||
| hidden?: boolean; | ||
| id?: string; | ||
| lang?: string; | ||
| placeholder?: string; | ||
| slot?: string; | ||
| spellCheck?: boolean; | ||
| style?: import("react").CSSProperties; | ||
| title?: string; | ||
| radioGroup?: string; | ||
| role?: string; | ||
| about?: string; | ||
| datatype?: string; | ||
| inlist?: any; | ||
| prefix?: string; | ||
| property?: string; | ||
| resource?: string; | ||
| typeof?: string; | ||
| vocab?: string; | ||
| autoCapitalize?: string; | ||
| autoCorrect?: string; | ||
| autoSave?: string; | ||
| color?: string; | ||
| itemProp?: string; | ||
| itemScope?: boolean; | ||
| itemType?: string; | ||
| itemID?: string; | ||
| itemRef?: string; | ||
| results?: number; | ||
| security?: string; | ||
| unselectable?: "on" | "off"; | ||
| inputMode?: "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"; | ||
| is?: string; | ||
| 'aria-activedescendant'?: string; | ||
| 'aria-atomic'?: boolean | "false" | "true"; | ||
| 'aria-autocomplete'?: "none" | "inline" | "list" | "both"; | ||
| 'aria-busy'?: boolean | "false" | "true"; | ||
| 'aria-checked'?: boolean | "false" | "true" | "mixed"; | ||
| 'aria-colcount'?: number; | ||
| 'aria-colindex'?: number; | ||
| 'aria-colspan'?: number; | ||
| 'aria-controls'?: string; | ||
| 'aria-current'?: boolean | "time" | "false" | "true" | "page" | "step" | "location" | "date"; | ||
| 'aria-describedby'?: string; | ||
| 'aria-details'?: string; | ||
| 'aria-disabled'?: boolean | "false" | "true"; | ||
| 'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup"; | ||
| 'aria-errormessage'?: string; | ||
| 'aria-expanded'?: boolean | "false" | "true"; | ||
| 'aria-flowto'?: string; | ||
| 'aria-grabbed'?: boolean | "false" | "true"; | ||
| 'aria-haspopup'?: boolean | "dialog" | "menu" | "false" | "true" | "listbox" | "tree" | "grid"; | ||
| 'aria-hidden'?: boolean | "false" | "true"; | ||
| 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling"; | ||
| 'aria-keyshortcuts'?: string; | ||
| 'aria-label'?: string; | ||
| 'aria-labelledby'?: string; | ||
| 'aria-level'?: number; | ||
| 'aria-live'?: "off" | "assertive" | "polite"; | ||
| 'aria-modal'?: boolean | "false" | "true"; | ||
| 'aria-multiline'?: boolean | "false" | "true"; | ||
| 'aria-multiselectable'?: boolean | "false" | "true"; | ||
| 'aria-orientation'?: "horizontal" | "vertical"; | ||
| 'aria-owns'?: string; | ||
| 'aria-placeholder'?: string; | ||
| 'aria-posinset'?: number; | ||
| 'aria-pressed'?: boolean | "false" | "true" | "mixed"; | ||
| 'aria-readonly'?: boolean | "false" | "true"; | ||
| 'aria-relevant'?: "text" | "additions" | "additions text" | "all" | "removals"; | ||
| 'aria-required'?: boolean | "false" | "true"; | ||
| 'aria-roledescription'?: string; | ||
| 'aria-rowcount'?: number; | ||
| 'aria-rowindex'?: number; | ||
| 'aria-rowspan'?: number; | ||
| 'aria-selected'?: boolean | "false" | "true"; | ||
| 'aria-setsize'?: number; | ||
| 'aria-sort'?: "none" | "ascending" | "descending" | "other"; | ||
| 'aria-valuemax'?: number; | ||
| 'aria-valuemin'?: number; | ||
| 'aria-valuenow'?: number; | ||
| 'aria-valuetext'?: string; | ||
| children?: import("react").ReactNode; | ||
| dangerouslySetInnerHTML?: { | ||
| __html: string; | ||
| }; | ||
| onCopy?: (event: import("react").ClipboardEvent<HTMLElement>) => void; | ||
| onCopyCapture?: (event: import("react").ClipboardEvent<HTMLElement>) => void; | ||
| onCut?: (event: import("react").ClipboardEvent<HTMLElement>) => void; | ||
| onCutCapture?: (event: import("react").ClipboardEvent<HTMLElement>) => void; | ||
| onPaste?: (event: import("react").ClipboardEvent<HTMLElement>) => void; | ||
| onPasteCapture?: (event: import("react").ClipboardEvent<HTMLElement>) => void; | ||
| onCompositionEnd?: (event: import("react").CompositionEvent<HTMLElement>) => void; | ||
| onCompositionEndCapture?: (event: import("react").CompositionEvent<HTMLElement>) => void; | ||
| onCompositionStart?: (event: import("react").CompositionEvent<HTMLElement>) => void; | ||
| onCompositionStartCapture?: (event: import("react").CompositionEvent<HTMLElement>) => void; | ||
| onCompositionUpdate?: (event: import("react").CompositionEvent<HTMLElement>) => void; | ||
| onCompositionUpdateCapture?: (event: import("react").CompositionEvent<HTMLElement>) => void; | ||
| onFocus?: (event: import("react").FocusEvent<HTMLElement>) => void; | ||
| onFocusCapture?: (event: import("react").FocusEvent<HTMLElement>) => void; | ||
| onBlur?: (event: import("react").FocusEvent<HTMLElement>) => void; | ||
| onBlurCapture?: (event: import("react").FocusEvent<HTMLElement>) => void; | ||
| onChange?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onChangeCapture?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onBeforeInput?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onBeforeInputCapture?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onInput?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onInputCapture?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onReset?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onResetCapture?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onSubmit?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onSubmitCapture?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onInvalid?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onInvalidCapture?: (event: import("react").FormEvent<HTMLElement>) => void; | ||
| onLoad?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onLoadCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onError?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onErrorCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onKeyDown?: (event: import("react").KeyboardEvent<HTMLElement>) => void; | ||
| onKeyDownCapture?: (event: import("react").KeyboardEvent<HTMLElement>) => void; | ||
| onKeyPress?: (event: import("react").KeyboardEvent<HTMLElement>) => void; | ||
| onKeyPressCapture?: (event: import("react").KeyboardEvent<HTMLElement>) => void; | ||
| onKeyUp?: (event: import("react").KeyboardEvent<HTMLElement>) => void; | ||
| onKeyUpCapture?: (event: import("react").KeyboardEvent<HTMLElement>) => void; | ||
| onAbort?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onAbortCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onCanPlay?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onCanPlayCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onCanPlayThrough?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onCanPlayThroughCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onDurationChange?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onDurationChangeCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onEmptied?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onEmptiedCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onEncrypted?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onEncryptedCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onEnded?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onEndedCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onLoadedData?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onLoadedDataCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onLoadedMetadata?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onLoadedMetadataCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onLoadStart?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onLoadStartCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onPause?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onPauseCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onPlay?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onPlayCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onPlaying?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onPlayingCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onProgress?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onProgressCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onRateChange?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onRateChangeCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onSeeked?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onSeekedCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onSeeking?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onSeekingCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onStalled?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onStalledCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onSuspend?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onSuspendCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onTimeUpdate?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onTimeUpdateCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onVolumeChange?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onVolumeChangeCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onWaiting?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onWaitingCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onAuxClick?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onAuxClickCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onClick?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onClickCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onContextMenu?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onContextMenuCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onDoubleClick?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onDoubleClickCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onDrag?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragCapture?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragEnd?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragEndCapture?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragEnter?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragEnterCapture?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragExit?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragExitCapture?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragLeave?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragLeaveCapture?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragOver?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragOverCapture?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragStart?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDragStartCapture?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDrop?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onDropCapture?: (event: import("react").DragEvent<HTMLElement>) => void; | ||
| onMouseDown?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseDownCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseEnter?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseLeave?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseMove?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseMoveCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseOut?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseOutCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseOver?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseOverCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseUp?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onMouseUpCapture?: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| onSelect?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onSelectCapture?: (event: import("react").SyntheticEvent<HTMLElement, Event>) => void; | ||
| onTouchCancel?: (event: import("react").TouchEvent<HTMLElement>) => void; | ||
| onTouchCancelCapture?: (event: import("react").TouchEvent<HTMLElement>) => void; | ||
| onTouchEnd?: (event: import("react").TouchEvent<HTMLElement>) => void; | ||
| onTouchEndCapture?: (event: import("react").TouchEvent<HTMLElement>) => void; | ||
| onTouchMove?: (event: import("react").TouchEvent<HTMLElement>) => void; | ||
| onTouchMoveCapture?: (event: import("react").TouchEvent<HTMLElement>) => void; | ||
| onTouchStart?: (event: import("react").TouchEvent<HTMLElement>) => void; | ||
| onTouchStartCapture?: (event: import("react").TouchEvent<HTMLElement>) => void; | ||
| onPointerDown?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerDownCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerMove?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerMoveCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerUp?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerUpCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerCancel?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerCancelCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerEnter?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerEnterCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerLeave?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerLeaveCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerOver?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerOverCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerOut?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onPointerOutCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onGotPointerCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onGotPointerCaptureCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onLostPointerCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onLostPointerCaptureCapture?: (event: import("react").PointerEvent<HTMLElement>) => void; | ||
| onScroll?: (event: import("react").UIEvent<HTMLElement>) => void; | ||
| onScrollCapture?: (event: import("react").UIEvent<HTMLElement>) => void; | ||
| onWheel?: (event: import("react").WheelEvent<HTMLElement>) => void; | ||
| onWheelCapture?: (event: import("react").WheelEvent<HTMLElement>) => void; | ||
| onAnimationStart?: (event: import("react").AnimationEvent<HTMLElement>) => void; | ||
| onAnimationStartCapture?: (event: import("react").AnimationEvent<HTMLElement>) => void; | ||
| onAnimationEnd?: (event: import("react").AnimationEvent<HTMLElement>) => void; | ||
| onAnimationEndCapture?: (event: import("react").AnimationEvent<HTMLElement>) => void; | ||
| onAnimationIteration?: (event: import("react").AnimationEvent<HTMLElement>) => void; | ||
| onAnimationIterationCapture?: (event: import("react").AnimationEvent<HTMLElement>) => void; | ||
| onTransitionEnd?: (event: import("react").TransitionEvent<HTMLElement>) => void; | ||
| onTransitionEndCapture?: (event: import("react").TransitionEvent<HTMLElement>) => void; | ||
| }; | ||
| }; | ||
| //# sourceMappingURL=types.d.ts.map |
| { | ||
| "name": "@react-aria/focus", | ||
| "version": "3.0.0-rc.2", | ||
| "version": "3.0.0-rc.3", | ||
| "description": "Spectrum UI components in React", | ||
@@ -20,5 +20,5 @@ "license": "Apache-2.0", | ||
| "@babel/runtime": "^7.6.2", | ||
| "@react-aria/interactions": "^3.0.0-rc.2", | ||
| "@react-aria/utils": "^3.0.0-rc.2", | ||
| "@react-types/shared": "^3.0.0-rc.2", | ||
| "@react-aria/interactions": "3.0.0-rc.3", | ||
| "@react-aria/utils": "3.0.0-rc.3", | ||
| "@react-types/shared": "3.0.0-rc.3", | ||
| "classnames": "^2.2.5" | ||
@@ -32,3 +32,3 @@ }, | ||
| }, | ||
| "gitHead": "207e6ee9076905c96638a7f81a367758872e1410" | ||
| "gitHead": "461d6321126ae9b4f1508aa912f7b36bf8a603f8" | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by190.86%
135656
- Number of package files
- increased by28.57%
9
- Lines of code
- increased by46.29%
1163
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@react-aria/interactions@3.0.0-rc.3(transitive)
+ Added@react-aria/utils@3.0.0-rc.3(transitive)
+ Added@react-types/shared@3.0.0-rc.3(transitive)
- Removed@react-aria/interactions@3.22.4(transitive)
- Removed@react-aria/ssr@3.9.6(transitive)
- Removed@react-aria/utils@3.25.3(transitive)
- Removed@react-stately/utils@3.10.4(transitive)
- Removed@react-types/shared@3.25.0(transitive)
- Removed@swc/helpers@0.5.15(transitive)
- Removedclsx@2.1.1(transitive)
- Removedtslib@2.8.1(transitive)
Updated@react-aria/utils@3.0.0-rc.3