@react-aria/combobox - npm Package Compare versions

Comparing version 3.0.0-nightly-987f174ba-241015 to 3.0.0-nightly-988096cf3-250215

dist/useComboBox.main.js

@@ -49,2 +49,4 @@ var $8d1e5da058b86bb9$exports = require("./intlStrings.main.js");
     shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
+    let backupBtnRef = (0, $BGXP4$react.useRef)(null);
+    buttonRef = buttonRef !== null && buttonRef !== void 0 ? buttonRef : backupBtnRef;
     let stringFormatter = (0, $BGXP4$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($8d1e5da058b86bb9$exports))), '@react-aria/combobox');
@@ -96,9 +98,7 @@ let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $BGXP4$reactariamenu.useMenuTrigger)({
                 // If the focused item is a link, trigger opening it. Items that are links are not selectable.
-                if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
-                    if (e.key === 'Enter') {
-                        let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
-                        if (item instanceof HTMLAnchorElement) {
-                            let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
-                            router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions);
-                        }
+                if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
+                    let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
+                    if (e.key === 'Enter' && item instanceof HTMLAnchorElement) {
+                        let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+                        if (collectionItem) router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions);
                     }
@@ -153,4 +153,5 @@ state.close();
         if (e.pointerType === 'touch') {
-            // Focus the input field in case it isn't focused yet
-            inputRef.current.focus();
+            var // Focus the input field in case it isn't focused yet
+            _inputRef_current;
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
             state.toggle(null, 'manual');
@@ -161,3 +162,4 @@ }
         if (e.pointerType !== 'touch') {
-            inputRef.current.focus();
+            var _inputRef_current;
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
             state.toggle(e.pointerType === 'keyboard' || e.pointerType === 'virtual' ? 'first' : null, 'manual');
@@ -182,4 +184,5 @@ }
         if (e.timeStamp - lastEventTime.current < 500) {
+            var _inputRef_current;
             e.preventDefault();
-            inputRef.current.focus();
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
             return;
@@ -192,4 +195,5 @@ }
         if (touch.clientX === centerX && touch.clientY === centerY) {
+            var _inputRef_current1;
             e.preventDefault();
-            inputRef.current.focus();
+            (_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : _inputRef_current1.focus();
             state.toggle(null, 'manual');
@@ -210,8 +214,9 @@ lastEventTime.current = e.timeStamp;
     (0, $BGXP4$react.useEffect)(()=>{
-        if ((0, $BGXP4$reactariautils.isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
+        if ((0, $BGXP4$reactariautils.isAppleDevice)() && focusedItem != null && itemKey != null && itemKey !== lastItem.current) {
             let isSelected = state.selectionManager.isSelected(itemKey);
             let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
             let sectionTitle = (section === null || section === void 0 ? void 0 : section['aria-label']) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === 'string' ? section.rendered : '') || '';
+            var _ref;
             let announcement = stringFormatter.format('focusAnnouncement', {
-                isGroupChange: section && sectionKey !== lastSection.current,
+                isGroupChange: (_ref = section && sectionKey !== lastSection.current) !== null && _ref !== void 0 ? _ref : false,
                 groupTitle: sectionTitle,
@@ -263,3 +268,3 @@ groupCount: section ? [
             popoverRef.current
-        ]);
+        ].filter((element)=>element != null));
     }, [
@@ -266,0 +271,0 @@ state.isOpen,

dist/useComboBox.module.js

@@ -6,3 +6,3 @@ import $dShfP$intlStringsmodulejs from "./intlStrings.module.js";
 import {useRouter as $dShfP$useRouter, chain as $dShfP$chain, useLabels as $dShfP$useLabels, isAppleDevice as $dShfP$isAppleDevice, mergeProps as $dShfP$mergeProps} from "@react-aria/utils";
-import {useMemo as $dShfP$useMemo, useRef as $dShfP$useRef, useEffect as $dShfP$useEffect} from "react";
+import {useRef as $dShfP$useRef, useMemo as $dShfP$useMemo, useEffect as $dShfP$useEffect} from "react";
 import {getChildNodes as $dShfP$getChildNodes, getItemCount as $dShfP$getItemCount} from "@react-stately/collections";
@@ -44,2 +44,4 @@ import {ListKeyboardDelegate as $dShfP$ListKeyboardDelegate, useSelectableCollection as $dShfP$useSelectableCollection} from "@react-aria/selection";
     shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
+    let backupBtnRef = (0, $dShfP$useRef)(null);
+    buttonRef = buttonRef !== null && buttonRef !== void 0 ? buttonRef : backupBtnRef;
     let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))), '@react-aria/combobox');
@@ -91,9 +93,7 @@ let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $dShfP$useMenuTrigger)({
                 // If the focused item is a link, trigger opening it. Items that are links are not selectable.
-                if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
-                    if (e.key === 'Enter') {
-                        let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
-                        if (item instanceof HTMLAnchorElement) {
-                            let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
-                            router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions);
-                        }
+                if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
+                    let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
+                    if (e.key === 'Enter' && item instanceof HTMLAnchorElement) {
+                        let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+                        if (collectionItem) router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions);
                     }
@@ -148,4 +148,5 @@ state.close();
         if (e.pointerType === 'touch') {
-            // Focus the input field in case it isn't focused yet
-            inputRef.current.focus();
+            var // Focus the input field in case it isn't focused yet
+            _inputRef_current;
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
             state.toggle(null, 'manual');
@@ -156,3 +157,4 @@ }
         if (e.pointerType !== 'touch') {
-            inputRef.current.focus();
+            var _inputRef_current;
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
             state.toggle(e.pointerType === 'keyboard' || e.pointerType === 'virtual' ? 'first' : null, 'manual');
@@ -177,4 +179,5 @@ }
         if (e.timeStamp - lastEventTime.current < 500) {
+            var _inputRef_current;
             e.preventDefault();
-            inputRef.current.focus();
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
             return;
@@ -187,4 +190,5 @@ }
         if (touch.clientX === centerX && touch.clientY === centerY) {
+            var _inputRef_current1;
             e.preventDefault();
-            inputRef.current.focus();
+            (_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : _inputRef_current1.focus();
             state.toggle(null, 'manual');
@@ -205,8 +209,9 @@ lastEventTime.current = e.timeStamp;
     (0, $dShfP$useEffect)(()=>{
-        if ((0, $dShfP$isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
+        if ((0, $dShfP$isAppleDevice)() && focusedItem != null && itemKey != null && itemKey !== lastItem.current) {
             let isSelected = state.selectionManager.isSelected(itemKey);
             let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
             let sectionTitle = (section === null || section === void 0 ? void 0 : section['aria-label']) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === 'string' ? section.rendered : '') || '';
+            var _ref;
             let announcement = stringFormatter.format('focusAnnouncement', {
-                isGroupChange: section && sectionKey !== lastSection.current,
+                isGroupChange: (_ref = section && sectionKey !== lastSection.current) !== null && _ref !== void 0 ? _ref : false,
                 groupTitle: sectionTitle,
@@ -258,3 +263,3 @@ groupCount: section ? [
             popoverRef.current
-        ]);
+        ].filter((element)=>element != null));
     }, [
@@ -261,0 +266,0 @@ state.isOpen,

package.json

 {
   "name": "@react-aria/combobox",
-  "version": "3.0.0-nightly-987f174ba-241015",
+  "version": "3.0.0-nightly-988096cf3-250215",
   "description": "Spectrum UI components in React",
@@ -25,26 +25,25 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/i18n": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/listbox": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/live-announcer": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/menu": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/overlays": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/selection": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/textfield": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/utils": "^3.0.0-nightly-987f174ba-241015",
-    "@react-stately/collections": "^3.0.0-nightly-987f174ba-241015",
-    "@react-stately/combobox": "^3.0.0-nightly-987f174ba-241015",
-    "@react-stately/form": "^3.0.0-nightly-987f174ba-241015",
-    "@react-types/button": "^3.0.0-nightly-987f174ba-241015",
-    "@react-types/combobox": "^3.0.0-nightly-987f174ba-241015",
-    "@react-types/shared": "^3.0.0-nightly-987f174ba-241015",
+    "@react-aria/i18n": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/listbox": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/live-announcer": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/menu": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/overlays": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/selection": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/textfield": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/utils": "3.0.0-nightly-988096cf3-250215",
+    "@react-stately/collections": "3.0.0-nightly-988096cf3-250215",
+    "@react-stately/combobox": "3.0.0-nightly-988096cf3-250215",
+    "@react-stately/form": "3.0.0-nightly-988096cf3-250215",
+    "@react-types/button": "3.0.0-nightly-988096cf3-250215",
+    "@react-types/combobox": "3.0.0-nightly-988096cf3-250215",
+    "@react-types/shared": "3.0.0-nightly-988096cf3-250215",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "stableVersion": "3.10.5"
+  }
 }

README.md

 # @react-aria/combobox
 
-This package is part of [react-spectrum](https://github.com/adobe-private/react-spectrum-v3). See the repo for more details.
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

src/useComboBox.ts

@@ -84,2 +84,4 @@ /*
   } = props;
+  let backupBtnRef = useRef(null);
+  buttonRef = buttonRef ?? backupBtnRef;
 
@@ -140,7 +142,7 @@ let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/combobox');
         // If the focused item is a link, trigger opening it. Items that are links are not selectable.
-        if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
-          if (e.key === 'Enter') {
-            let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
-            if (item instanceof HTMLAnchorElement) {
-              let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+        if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
+          let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
+          if (e.key === 'Enter' && item instanceof HTMLAnchorElement) {
+            let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+            if (collectionItem) {
               router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions as RouterOptions);
@@ -222,3 +224,3 @@ }
       // Focus the input field in case it isn't focused yet
-      inputRef.current.focus();
+      inputRef.current?.focus();
       state.toggle(null, 'manual');
@@ -230,3 +232,3 @@ }
     if (e.pointerType !== 'touch') {
-      inputRef.current.focus();
+      inputRef.current?.focus();
       state.toggle((e.pointerType === 'keyboard' || e.pointerType === 'virtual') ? 'first' : null, 'manual');
@@ -258,3 +260,3 @@ }
       e.preventDefault();
-      inputRef.current.focus();
+      inputRef.current?.focus();
       return;
@@ -271,3 +273,3 @@ }
       e.preventDefault();
-      inputRef.current.focus();
+      inputRef.current?.focus();
       state.toggle(null, 'manual');
@@ -290,3 +292,3 @@
   useEffect(() => {
-    if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {
+    if (isAppleDevice() && focusedItem != null && itemKey != null && itemKey !== lastItem.current) {
       let isSelected = state.selectionManager.isSelected(itemKey);
@@ -297,3 +299,3 @@ let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
       let announcement = stringFormatter.format('focusAnnouncement', {
-        isGroupChange: section && sectionKey !== lastSection.current,
+        isGroupChange: (section && sectionKey !== lastSection.current) ?? false,
         groupTitle: sectionTitle,
@@ -347,3 +349,3 @@ groupCount: section ? [...getChildNodes(section, state.collection)].length : 0,
     if (state.isOpen) {
-      return ariaHideOutside([inputRef.current, popoverRef.current]);
+      return ariaHideOutside([inputRef.current, popoverRef.current].filter(element => element != null));
     }
@@ -350,0 +352,0 @@ }, [state.isOpen, inputRef, popoverRef]);

No alert changes

Improved metrics

Lines of code

3705

increased by0.46%

Worsened metrics

Total package byte prevSize

348537

decreased by-0.2%

Dependency changes

• + Added@internationalized/date@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@internationalized/message@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@internationalized/number@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@internationalized/string@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/focus@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/form@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/i18n@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/interactions@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/label@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/listbox@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/live-announcer@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/menu@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/overlays@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/selection@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/ssr@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/textfield@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/utils@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/visually-hidden@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/collections@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/combobox@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/flags@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/form@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/list@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/menu@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/overlays@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/select@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/selection@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/tree@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/utils@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/button@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/combobox@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/listbox@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/menu@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/overlays@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/select@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/shared@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/textfield@3.0.0-nightly-988096cf3-250215(transitive)

• - Removed@internationalized/date@3.7.0(transitive)

• - Removed@internationalized/message@3.1.6(transitive)

• - Removed@internationalized/number@3.6.0(transitive)

• - Removed@internationalized/string@3.2.5(transitive)

• - Removed@react-aria/focus@3.19.1(transitive)

• - Removed@react-aria/form@3.0.12(transitive)

• - Removed@react-aria/i18n@3.12.5(transitive)

• - Removed@react-aria/interactions@3.23.0(transitive)

• - Removed@react-aria/label@3.7.14(transitive)

• - Removed@react-aria/listbox@3.14.0(transitive)

• - Removed@react-aria/live-announcer@3.4.1(transitive)

• - Removed@react-aria/menu@3.17.0(transitive)

• - Removed@react-aria/overlays@3.25.0(transitive)

• - Removed@react-aria/selection@3.22.0(transitive)

• - Removed@react-aria/ssr@3.9.7(transitive)

• - Removed@react-aria/textfield@3.16.0(transitive)

• - Removed@react-aria/utils@3.27.0(transitive)

• - Removed@react-aria/visually-hidden@3.8.19(transitive)

• - Removed@react-stately/collections@3.12.1(transitive)

• - Removed@react-stately/combobox@3.10.2(transitive)

• - Removed@react-stately/form@3.1.1(transitive)

• - Removed@react-stately/list@3.11.2(transitive)

• - Removed@react-stately/menu@3.9.1(transitive)

• - Removed@react-stately/overlays@3.6.13(transitive)

• - Removed@react-stately/select@3.6.10(transitive)

• - Removed@react-stately/selection@3.19.0(transitive)

• - Removed@react-stately/tree@3.8.7(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/button@3.10.2(transitive)

• - Removed@react-types/combobox@3.13.2(transitive)

• - Removed@react-types/listbox@3.5.4(transitive)

• - Removed@react-types/menu@3.9.14(transitive)

• - Removed@react-types/overlays@3.8.12(transitive)

• - Removed@react-types/select@3.9.9(transitive)

• - Removed@react-types/shared@3.27.0(transitive)

• - Removed@react-types/textfield@3.11.0(transitive)

• Updated@react-aria/i18n@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/listbox@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/live-announcer@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/menu@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/overlays@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/selection@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/textfield@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/utils@3.0.0-nightly-988096cf3-250215

• Updated@react-stately/collections@3.0.0-nightly-988096cf3-250215

• Updated@react-stately/combobox@3.0.0-nightly-988096cf3-250215

• Updated@react-stately/form@3.0.0-nightly-988096cf3-250215

• Updated@react-types/button@3.0.0-nightly-988096cf3-250215

• Updated@react-types/combobox@3.0.0-nightly-988096cf3-250215

• Updated@react-types/shared@3.0.0-nightly-988096cf3-250215