@react-aria/focus 3.16.1 → 3.17.0

package/dist/useHasTabbableChild.main.js

@@ -0,0 +1,62 @@
+var $a7a032acae3ddda9$exports = require("./FocusScope.main.js");
+var $6RLDH$react = require("react");
+var $6RLDH$reactariautils = require("@react-aria/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useHasTabbableChild", () => $259c6413a286f2e6$export$eac1895992b9f3d6);
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+function $259c6413a286f2e6$export$eac1895992b9f3d6(ref, options) {
+    let isDisabled = options === null || options === void 0 ? void 0 : options.isDisabled;
+    let [hasTabbableChild, setHasTabbableChild] = (0, $6RLDH$react.useState)(false);
+    (0, $6RLDH$reactariautils.useLayoutEffect)(()=>{
+        if ((ref === null || ref === void 0 ? void 0 : ref.current) && !isDisabled) {
+            let update = ()=>{
+                if (ref.current) {
+                    let walker = (0, $a7a032acae3ddda9$exports.getFocusableTreeWalker)(ref.current, {
+                        tabbable: true
+                    });
+                    setHasTabbableChild(!!walker.nextNode());
+                }
+            };
+            update();
+            // Update when new elements are inserted, or the tabIndex/disabled attribute updates.
+            let observer = new MutationObserver(update);
+            observer.observe(ref.current, {
+                subtree: true,
+                childList: true,
+                attributes: true,
+                attributeFilter: [
+                    "tabIndex",
+                    "disabled"
+                ]
+            });
+            return ()=>{
+                // Disconnect mutation observer when a React update occurs on the top-level component
+                // so we update synchronously after re-rendering. Otherwise React will emit act warnings
+                // in tests since mutation observers fire asynchronously. The mutation observer is necessary
+                // so we also update if a child component re-renders and adds/removes something tabbable.
+                observer.disconnect();
+            };
+        }
+    });
+    return isDisabled ? false : hasTabbableChild;
+}
+
+
+//# sourceMappingURL=useHasTabbableChild.main.js.map

package/dist/useHasTabbableChild.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,SAAS,0CAAoB,GAAuB,EAAE,OAAqC;IAChG,IAAI,aAAa,oBAAA,8BAAA,QAAS,UAAU;IACpC,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEvD,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,CAAA,gBAAA,0BAAA,IAAK,OAAO,KAAI,CAAC,YAAY;YAC/B,IAAI,SAAS;gBACX,IAAI,IAAI,OAAO,EAAE;oBACf,IAAI,SAAS,CAAA,GAAA,gDAAqB,EAAE,IAAI,OAAO,EAAE;wBAAC,UAAU;oBAAI;oBAChE,oBAAoB,CAAC,CAAC,OAAO,QAAQ;gBACvC;YACF;YAEA;YAEA,qFAAqF;YACrF,IAAI,WAAW,IAAI,iBAAiB;YACpC,SAAS,OAAO,CAAC,IAAI,OAAO,EAAE;gBAC5B,SAAS;gBACT,WAAW;gBACX,YAAY;gBACZ,iBAAiB;oBAAC;oBAAY;iBAAW;YAC3C;YAEA,OAAO;gBACL,qFAAqF;gBACrF,wFAAwF;gBACxF,4FAA4F;gBAC5F,yFAAyF;gBACzF,SAAS,UAAU;YACrB;QACF;IACF;IAEA,OAAO,aAAa,QAAQ;AAC9B","sources":["packages/@react-aria/focus/src/useHasTabbableChild.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {getFocusableTreeWalker} from './FocusScope';\nimport {RefObject, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface AriaHasTabbableChildOptions {\n  isDisabled?: boolean\n}\n\n// This was created for a special empty case of a component that can have child or\n// be empty, like Collection/Virtualizer/Table/ListView/etc. When these components\n// are empty they can have a message with a tabbable element, which is like them\n// being not empty, when it comes to focus and tab order.\n\n/**\n * Returns whether an element has a tabbable child, and updates as children change.\n * @private\n */\nexport function useHasTabbableChild(ref: RefObject<Element>, options?: AriaHasTabbableChildOptions): boolean {\n  let isDisabled = options?.isDisabled;\n  let [hasTabbableChild, setHasTabbableChild] = useState(false);\n\n  useLayoutEffect(() => {\n    if (ref?.current && !isDisabled) {\n      let update = () => {\n        if (ref.current) {\n          let walker = getFocusableTreeWalker(ref.current, {tabbable: true});\n          setHasTabbableChild(!!walker.nextNode());\n        }\n      };\n\n      update();\n\n      // Update when new elements are inserted, or the tabIndex/disabled attribute updates.\n      let observer = new MutationObserver(update);\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n        attributes: true,\n        attributeFilter: ['tabIndex', 'disabled']\n      });\n\n      return () => {\n        // Disconnect mutation observer when a React update occurs on the top-level component\n        // so we update synchronously after re-rendering. Otherwise React will emit act warnings\n        // in tests since mutation observers fire asynchronously. The mutation observer is necessary\n        // so we also update if a child component re-renders and adds/removes something tabbable.\n        observer.disconnect();\n      };\n    }\n  });\n\n  return isDisabled ? false : hasTabbableChild;\n}\n"],"names":[],"version":3,"file":"useHasTabbableChild.main.js.map"}

package/dist/useHasTabbableChild.mjs

@@ -0,0 +1,57 @@
+import {getFocusableTreeWalker as $9bf71ea28793e738$export$2d6ec8fc375ceafa} from "./FocusScope.mjs";
+import {useState as $hGAaG$useState} from "react";
+import {useLayoutEffect as $hGAaG$useLayoutEffect} from "@react-aria/utils";
+
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+function $83013635b024ae3d$export$eac1895992b9f3d6(ref, options) {
+    let isDisabled = options === null || options === void 0 ? void 0 : options.isDisabled;
+    let [hasTabbableChild, setHasTabbableChild] = (0, $hGAaG$useState)(false);
+    (0, $hGAaG$useLayoutEffect)(()=>{
+        if ((ref === null || ref === void 0 ? void 0 : ref.current) && !isDisabled) {
+            let update = ()=>{
+                if (ref.current) {
+                    let walker = (0, $9bf71ea28793e738$export$2d6ec8fc375ceafa)(ref.current, {
+                        tabbable: true
+                    });
+                    setHasTabbableChild(!!walker.nextNode());
+                }
+            };
+            update();
+            // Update when new elements are inserted, or the tabIndex/disabled attribute updates.
+            let observer = new MutationObserver(update);
+            observer.observe(ref.current, {
+                subtree: true,
+                childList: true,
+                attributes: true,
+                attributeFilter: [
+                    "tabIndex",
+                    "disabled"
+                ]
+            });
+            return ()=>{
+                // Disconnect mutation observer when a React update occurs on the top-level component
+                // so we update synchronously after re-rendering. Otherwise React will emit act warnings
+                // in tests since mutation observers fire asynchronously. The mutation observer is necessary
+                // so we also update if a child component re-renders and adds/removes something tabbable.
+                observer.disconnect();
+            };
+        }
+    });
+    return isDisabled ? false : hasTabbableChild;
+}
+
+
+export {$83013635b024ae3d$export$eac1895992b9f3d6 as useHasTabbableChild};
+//# sourceMappingURL=useHasTabbableChild.mjs.map

package/dist/useHasTabbableChild.module.js

@@ -0,0 +1,57 @@
+import {getFocusableTreeWalker as $9bf71ea28793e738$export$2d6ec8fc375ceafa} from "./FocusScope.module.js";
+import {useState as $hGAaG$useState} from "react";
+import {useLayoutEffect as $hGAaG$useLayoutEffect} from "@react-aria/utils";
+
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+function $83013635b024ae3d$export$eac1895992b9f3d6(ref, options) {
+    let isDisabled = options === null || options === void 0 ? void 0 : options.isDisabled;
+    let [hasTabbableChild, setHasTabbableChild] = (0, $hGAaG$useState)(false);
+    (0, $hGAaG$useLayoutEffect)(()=>{
+        if ((ref === null || ref === void 0 ? void 0 : ref.current) && !isDisabled) {
+            let update = ()=>{
+                if (ref.current) {
+                    let walker = (0, $9bf71ea28793e738$export$2d6ec8fc375ceafa)(ref.current, {
+                        tabbable: true
+                    });
+                    setHasTabbableChild(!!walker.nextNode());
+                }
+            };
+            update();
+            // Update when new elements are inserted, or the tabIndex/disabled attribute updates.
+            let observer = new MutationObserver(update);
+            observer.observe(ref.current, {
+                subtree: true,
+                childList: true,
+                attributes: true,
+                attributeFilter: [
+                    "tabIndex",
+                    "disabled"
+                ]
+            });
+            return ()=>{
+                // Disconnect mutation observer when a React update occurs on the top-level component
+                // so we update synchronously after re-rendering. Otherwise React will emit act warnings
+                // in tests since mutation observers fire asynchronously. The mutation observer is necessary
+                // so we also update if a child component re-renders and adds/removes something tabbable.
+                observer.disconnect();
+            };
+        }
+    });
+    return isDisabled ? false : hasTabbableChild;
+}
+
+
+export {$83013635b024ae3d$export$eac1895992b9f3d6 as useHasTabbableChild};
+//# sourceMappingURL=useHasTabbableChild.module.js.map

package/dist/useHasTabbableChild.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,SAAS,0CAAoB,GAAuB,EAAE,OAAqC;IAChG,IAAI,aAAa,oBAAA,8BAAA,QAAS,UAAU;IACpC,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvD,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,CAAA,gBAAA,0BAAA,IAAK,OAAO,KAAI,CAAC,YAAY;YAC/B,IAAI,SAAS;gBACX,IAAI,IAAI,OAAO,EAAE;oBACf,IAAI,SAAS,CAAA,GAAA,yCAAqB,EAAE,IAAI,OAAO,EAAE;wBAAC,UAAU;oBAAI;oBAChE,oBAAoB,CAAC,CAAC,OAAO,QAAQ;gBACvC;YACF;YAEA;YAEA,qFAAqF;YACrF,IAAI,WAAW,IAAI,iBAAiB;YACpC,SAAS,OAAO,CAAC,IAAI,OAAO,EAAE;gBAC5B,SAAS;gBACT,WAAW;gBACX,YAAY;gBACZ,iBAAiB;oBAAC;oBAAY;iBAAW;YAC3C;YAEA,OAAO;gBACL,qFAAqF;gBACrF,wFAAwF;gBACxF,4FAA4F;gBAC5F,yFAAyF;gBACzF,SAAS,UAAU;YACrB;QACF;IACF;IAEA,OAAO,aAAa,QAAQ;AAC9B","sources":["packages/@react-aria/focus/src/useHasTabbableChild.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {getFocusableTreeWalker} from './FocusScope';\nimport {RefObject, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface AriaHasTabbableChildOptions {\n  isDisabled?: boolean\n}\n\n// This was created for a special empty case of a component that can have child or\n// be empty, like Collection/Virtualizer/Table/ListView/etc. When these components\n// are empty they can have a message with a tabbable element, which is like them\n// being not empty, when it comes to focus and tab order.\n\n/**\n * Returns whether an element has a tabbable child, and updates as children change.\n * @private\n */\nexport function useHasTabbableChild(ref: RefObject<Element>, options?: AriaHasTabbableChildOptions): boolean {\n  let isDisabled = options?.isDisabled;\n  let [hasTabbableChild, setHasTabbableChild] = useState(false);\n\n  useLayoutEffect(() => {\n    if (ref?.current && !isDisabled) {\n      let update = () => {\n        if (ref.current) {\n          let walker = getFocusableTreeWalker(ref.current, {tabbable: true});\n          setHasTabbableChild(!!walker.nextNode());\n        }\n      };\n\n      update();\n\n      // Update when new elements are inserted, or the tabIndex/disabled attribute updates.\n      let observer = new MutationObserver(update);\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n        attributes: true,\n        attributeFilter: ['tabIndex', 'disabled']\n      });\n\n      return () => {\n        // Disconnect mutation observer when a React update occurs on the top-level component\n        // so we update synchronously after re-rendering. Otherwise React will emit act warnings\n        // in tests since mutation observers fire asynchronously. The mutation observer is necessary\n        // so we also update if a child component re-renders and adds/removes something tabbable.\n        observer.disconnect();\n      };\n    }\n  });\n\n  return isDisabled ? false : hasTabbableChild;\n}\n"],"names":[],"version":3,"file":"useHasTabbableChild.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/focus",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,9 +22,9 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/interactions": "^3.21.0",
-    "@react-aria/utils": "^3.23.1",
-    "@react-types/shared": "^3.22.0",
+    "@react-aria/interactions": "^3.21.2",
+    "@react-aria/utils": "^3.24.0",
+    "@react-types/shared": "^3.23.0",
     "@swc/helpers": "^0.5.0",
     "clsx": "^2.0.0"
   },
@@ -34,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f040ff62678e6a31375b96c05396df0bae660350"
+  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
 }

package/src/FocusScope.tsx

@@ -278,6 +278,10 @@ const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]),') + '
 focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
 const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 
+export function isFocusable(element: HTMLElement) {
+  return element.matches(FOCUSABLE_ELEMENT_SELECTOR);
+}
+
 function getScopeRoot(scope: Element[]) {
   return scope[0].parentElement!;
 }
@@ -314,7 +318,7 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain?: boolean)
 
     // Handle the Tab key to contain focus within the scope
     let onKeyDown = (e) => {
-      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef)) {
+      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef) || e.isComposing) {
         return;
       }
 
@@ -585,7 +589,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
     // using portals for overlays, so that focus goes to the expected element when
     // tabbing out of the overlay.
     let onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef)) {
+      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !shouldContainFocus(scopeRef) || e.isComposing) {
         return;
       }
 

package/src/index.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager, isElementInChildOfActiveScope} from './FocusScope';
+export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager, isElementInChildOfActiveScope, isFocusable} from './FocusScope';
 export {FocusRing} from './FocusRing';
 export {FocusableProvider, useFocusable} from './useFocusable';
 export {useFocusRing} from './useFocusRing';

package/src/isElementVisible.ts

@@ -43,6 +43,8 @@ function isStyleVisible(element: Element) {
 function isAttributeVisible(element: Element, childElement?: Element) {
   return (
     !element.hasAttribute('hidden') &&
+    // Ignore HiddenSelect when tree walking.
+    !element.hasAttribute('data-react-aria-prevent-focus') &&
     (element.nodeName === 'DETAILS' &&
       childElement &&
       childElement.nodeName !== 'SUMMARY'