@react-aria/focus 3.0.0-nightly-641446f65-240905

package/dist/useHasTabbableChild.mjs

@@ -0,0 +1,57 @@
+import {getFocusableTreeWalker as $9bf71ea28793e738$export$2d6ec8fc375ceafa} from "./FocusScope.mjs";
+import {useLayoutEffect as $hGAaG$useLayoutEffect} from "@react-aria/utils";
+import {useState as $hGAaG$useState} from "react";
+
+/*
+ * 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

@@ -0,0 +1,57 @@
+import {getFocusableTreeWalker as $9bf71ea28793e738$export$2d6ec8fc375ceafa} from "./FocusScope.module.js";
+import {useLayoutEffect as $hGAaG$useLayoutEffect} from "@react-aria/utils";
+import {useState as $hGAaG$useState} from "react";
+
+/*
+ * 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;;;AAoBM,SAAS,0CAAoB,GAA8B,EAAE,OAAqC;IACvG,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} from '@react-types/shared';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useState} from 'react';\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 | null>, 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

@@ -0,0 +1,38 @@
+{
+  "name": "@react-aria/focus",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/interactions": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0",
+    "clsx": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.18.2"
+}

package/src/FocusRing.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2020 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.
+ */
+
+import clsx from 'clsx';
+import {mergeProps} from '@react-aria/utils';
+import React, {ReactElement} from 'react';
+import {useFocusRing} from './useFocusRing';
+
+export interface FocusRingProps {
+  /** 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
+}
+
+/**
+ * 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: FocusRingProps) {
+  let {children, focusClass, focusRingClass} = props;
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing(props);
+  let child = React.Children.only(children);
+
+  return React.cloneElement(child, mergeProps(child.props as any, {
+    ...focusProps,
+    className: clsx({
+      [focusClass || '']: isFocused,
+      [focusRingClass || '']: isFocusVisible
+    })
+  }));
+}