@react-aria/selection - npm Package Compare versions

Comparing version 3.0.0-nightly-e94e36431-241203 to 3.0.0-nightly-f90799b33-241206

dist/types.d.ts

@@ -1,2 +0,2 @@
-import { DOMAttributes, Key, KeyboardDelegate, FocusStrategy, RefObject, FocusableElement, LayoutDelegate, Rect, Size, Collection, Direction, DisabledBehavior, Node, Orientation } from "@react-types/shared";
+import { DOMAttributes, Key, KeyboardDelegate, FocusStrategy, RefObject, DOMProps, FocusableElement, LayoutDelegate, Rect, Size, Collection, Direction, DisabledBehavior, Node, Orientation } from "@react-types/shared";
 import { MultipleSelectionManager } from "@react-stately/selection";
@@ -104,3 +104,3 @@ export interface AriaTypeSelectOptions {
 export function useSelectableCollection(options: AriaSelectableCollectionOptions): SelectableCollectionAria;
-export interface SelectableItemOptions {
+export interface SelectableItemOptions extends DOMProps {
     /**
@@ -107,0 +107,0 @@ * An interface for reading and updating multiple selection state.

dist/useSelectableCollection.main.js

 var $ee0bdf4faa47f2a8$exports = require("./utils.main.js");
 var $a1189052f36475e8$exports = require("./useTypeSelect.main.js");
+var $bT8Bh$reactariautils = require("@react-aria/utils");
 var $bT8Bh$reactdom = require("react-dom");
 var $bT8Bh$react = require("react");
 var $bT8Bh$reactariafocus = require("@react-aria/focus");
-var $bT8Bh$reactariautils = require("@react-aria/utils");
 var $bT8Bh$reactariainteractions = require("@react-aria/interactions");
@@ -250,2 +250,27 @@ var $bT8Bh$reactariai18n = require("@react-aria/i18n");
     };
+    // Add event listeners for custom virtual events. These handle updating the focused key in response to various keyboard events
+    // at the autocomplete level
+    // TODO: fix type later
+    (0, $bT8Bh$reactariautils.useEvent)(ref, (0, $bT8Bh$reactariautils.FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        let { detail: detail } = e;
+        e.stopPropagation();
+        manager.setFocused(true);
+        // If the user is typing forwards, autofocus the first option in the list.
+        if ((detail === null || detail === void 0 ? void 0 : detail.focusStrategy) === 'first') {
+            var _delegate_getFirstKey, _ref_current;
+            var _delegate_getFirstKey1;
+            let keyToFocus = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null;
+            // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
+            if (keyToFocus == null) (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(new CustomEvent((0, $bT8Bh$reactariautils.UPDATE_ACTIVEDESCENDANT), {
+                cancelable: true,
+                bubbles: true
+            }));
+            manager.setFocusedKey(keyToFocus);
+        }
+    });
+    (0, $bT8Bh$reactariautils.useEvent)(ref, (0, $bT8Bh$reactariautils.CLEAR_FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        e.stopPropagation();
+        manager.setFocused(false);
+        manager.setFocusedKey(null);
+    });
     const autoFocusRef = (0, $bT8Bh$react.useRef)(autoFocus);
@@ -320,6 +345,5 @@ (0, $bT8Bh$react.useEffect)(()=>{
     // This will be marshalled to either the first or last item depending on where focus came from.
-    // If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
-    // to move real DOM focus to the element anyway.
     let tabIndex = undefined;
     if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
+    else tabIndex = -1;
     return {
@@ -326,0 +350,0 @@ collectionProps: {

dist/useSelectableCollection.module.js

 import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
 import {useTypeSelect as $fb3050f43d946246$export$e32c88dfddc6e1d8} from "./useTypeSelect.module.js";
+import {useRouter as $3H3GQ$useRouter, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, FOCUS_EVENT as $3H3GQ$FOCUS_EVENT, UPDATE_ACTIVEDESCENDANT as $3H3GQ$UPDATE_ACTIVEDESCENDANT, CLEAR_FOCUS_EVENT as $3H3GQ$CLEAR_FOCUS_EVENT, scrollIntoView as $3H3GQ$scrollIntoView, mergeProps as $3H3GQ$mergeProps} from "@react-aria/utils";
 import {flushSync as $3H3GQ$flushSync} from "react-dom";
 import {useRef as $3H3GQ$useRef, useEffect as $3H3GQ$useEffect} from "react";
 import {getFocusableTreeWalker as $3H3GQ$getFocusableTreeWalker, focusSafely as $3H3GQ$focusSafely} from "@react-aria/focus";
-import {useRouter as $3H3GQ$useRouter, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, scrollIntoView as $3H3GQ$scrollIntoView, mergeProps as $3H3GQ$mergeProps} from "@react-aria/utils";
 import {getInteractionModality as $3H3GQ$getInteractionModality} from "@react-aria/interactions";
@@ -244,2 +244,27 @@ import {useLocale as $3H3GQ$useLocale} from "@react-aria/i18n";
     };
+    // Add event listeners for custom virtual events. These handle updating the focused key in response to various keyboard events
+    // at the autocomplete level
+    // TODO: fix type later
+    (0, $3H3GQ$useEvent)(ref, (0, $3H3GQ$FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        let { detail: detail } = e;
+        e.stopPropagation();
+        manager.setFocused(true);
+        // If the user is typing forwards, autofocus the first option in the list.
+        if ((detail === null || detail === void 0 ? void 0 : detail.focusStrategy) === 'first') {
+            var _delegate_getFirstKey, _ref_current;
+            var _delegate_getFirstKey1;
+            let keyToFocus = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null;
+            // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
+            if (keyToFocus == null) (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(new CustomEvent((0, $3H3GQ$UPDATE_ACTIVEDESCENDANT), {
+                cancelable: true,
+                bubbles: true
+            }));
+            manager.setFocusedKey(keyToFocus);
+        }
+    });
+    (0, $3H3GQ$useEvent)(ref, (0, $3H3GQ$CLEAR_FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        e.stopPropagation();
+        manager.setFocused(false);
+        manager.setFocusedKey(null);
+    });
     const autoFocusRef = (0, $3H3GQ$useRef)(autoFocus);
@@ -314,6 +339,5 @@ (0, $3H3GQ$useEffect)(()=>{
     // This will be marshalled to either the first or last item depending on where focus came from.
-    // If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
-    // to move real DOM focus to the element anyway.
     let tabIndex = undefined;
     if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
+    else tabIndex = -1;
     return {
@@ -320,0 +344,0 @@ collectionProps: {

dist/useSelectableItem.main.js

@@ -29,4 +29,5 @@ var $ee0bdf4faa47f2a8$exports = require("./utils.main.js");
 function $433b1145b0781e10$export$ecf600387e221c37(options) {
-    let { selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
+    let { id: id, selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
     let router = (0, $i4XHw$reactariautils.useRouter)();
+    id = (0, $i4XHw$reactariautils.useId)(id);
     let onSelect = (e)=>{
@@ -57,5 +58,14 @@ if (e.pointerType === 'keyboard' && (0, $ee0bdf4faa47f2a8$exports.isNonContiguousSelectionModifier)(e)) manager.toggleSelection(key);
         let isFocused = key === manager.focusedKey;
-        if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
-            if (focus) focus();
-            else if (document.activeElement !== ref.current && ref.current) (0, $i4XHw$reactariafocus.focusSafely)(ref.current);
+        if (isFocused && manager.isFocused) {
+            if (!shouldUseVirtualFocus) {
+                if (focus) focus();
+                else if (document.activeElement !== ref.current && ref.current) (0, $i4XHw$reactariafocus.focusSafely)(ref.current);
+            } else {
+                var _ref_current;
+                let updateActiveDescendant = new CustomEvent((0, $i4XHw$reactariautils.UPDATE_ACTIVEDESCENDANT), {
+                    cancelable: true,
+                    bubbles: true
+                });
+                (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(updateActiveDescendant);
+            }
         }
@@ -197,3 +207,4 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
             onDragStartCapture: onDragStartCapture,
-            onClick: onClick
+            onClick: onClick,
+            id: id
         }),
@@ -200,0 +211,0 @@ isPressed: isPressed,

dist/useSelectableItem.module.js

 import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
 import {focusSafely as $581M0$focusSafely} from "@react-aria/focus";
-import {useRouter as $581M0$useRouter, openLink as $581M0$openLink, mergeProps as $581M0$mergeProps} from "@react-aria/utils";
+import {useRouter as $581M0$useRouter, useId as $581M0$useId, UPDATE_ACTIVEDESCENDANT as $581M0$UPDATE_ACTIVEDESCENDANT, openLink as $581M0$openLink, mergeProps as $581M0$mergeProps} from "@react-aria/utils";
 import {usePress as $581M0$usePress, useLongPress as $581M0$useLongPress} from "@react-aria/interactions";
@@ -23,4 +23,5 @@ import {useEffect as $581M0$useEffect, useRef as $581M0$useRef} from "react";
 function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
-    let { selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
+    let { id: id, selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
     let router = (0, $581M0$useRouter)();
+    id = (0, $581M0$useId)(id);
     let onSelect = (e)=>{
@@ -51,5 +52,14 @@ if (e.pointerType === 'keyboard' && (0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) manager.toggleSelection(key);
         let isFocused = key === manager.focusedKey;
-        if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
-            if (focus) focus();
-            else if (document.activeElement !== ref.current && ref.current) (0, $581M0$focusSafely)(ref.current);
+        if (isFocused && manager.isFocused) {
+            if (!shouldUseVirtualFocus) {
+                if (focus) focus();
+                else if (document.activeElement !== ref.current && ref.current) (0, $581M0$focusSafely)(ref.current);
+            } else {
+                var _ref_current;
+                let updateActiveDescendant = new CustomEvent((0, $581M0$UPDATE_ACTIVEDESCENDANT), {
+                    cancelable: true,
+                    bubbles: true
+                });
+                (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(updateActiveDescendant);
+            }
         }
@@ -191,3 +201,4 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
             onDragStartCapture: onDragStartCapture,
-            onClick: onClick
+            onClick: onClick,
+            id: id
         }),
@@ -194,0 +205,0 @@ isPressed: isPressed,

package.json

 {
   "name": "@react-aria/selection",
-  "version": "3.0.0-nightly-e94e36431-241203",
+  "version": "3.0.0-nightly-f90799b33-241206",
   "description": "Spectrum UI components in React",
@@ -25,8 +25,8 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/focus": "^3.0.0-nightly-e94e36431-241203",
-    "@react-aria/i18n": "^3.0.0-nightly-e94e36431-241203",
-    "@react-aria/interactions": "^3.0.0-nightly-e94e36431-241203",
-    "@react-aria/utils": "^3.0.0-nightly-e94e36431-241203",
-    "@react-stately/selection": "^3.0.0-nightly-e94e36431-241203",
-    "@react-types/shared": "^3.0.0-nightly-e94e36431-241203",
+    "@react-aria/focus": "^3.0.0-nightly-f90799b33-241206",
+    "@react-aria/i18n": "^3.0.0-nightly-f90799b33-241206",
+    "@react-aria/interactions": "^3.0.0-nightly-f90799b33-241206",
+    "@react-aria/utils": "^3.0.0-nightly-f90799b33-241206",
+    "@react-stately/selection": "^3.0.0-nightly-f90799b33-241206",
+    "@react-types/shared": "^3.0.0-nightly-f90799b33-241206",
     "@swc/helpers": "^0.5.0"
@@ -33,0 +33,0 @@ },

src/useSelectableCollection.ts

@@ -13,2 +13,3 @@ /*
 
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, focusWithoutScrolling,  mergeProps, scrollIntoView, scrollIntoViewport, UPDATE_ACTIVEDESCENDANT, useEvent, useRouter} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement, FocusStrategy, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
@@ -18,3 +19,2 @@ import {flushSync} from 'react-dom';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
-import {focusWithoutScrolling, mergeProps, scrollIntoView, scrollIntoViewport, useEvent, useRouter} from '@react-aria/utils';
 import {getInteractionModality} from '@react-aria/interactions';
@@ -396,2 +396,33 @@ import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils';
 
+  // Add event listeners for custom virtual events. These handle updating the focused key in response to various keyboard events
+  // at the autocomplete level
+  // TODO: fix type later
+  useEvent(ref, FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e: any) => {
+    let {detail} = e;
+    e.stopPropagation();
+    manager.setFocused(true);
+
+    // If the user is typing forwards, autofocus the first option in the list.
+    if (detail?.focusStrategy === 'first') {
+      let keyToFocus = delegate.getFirstKey?.() ?? null;
+      // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
+      if (keyToFocus == null) {
+        ref.current?.dispatchEvent(
+          new CustomEvent(UPDATE_ACTIVEDESCENDANT, {
+            cancelable: true,
+            bubbles: true
+          })
+        );
+      }
+
+      manager.setFocusedKey(keyToFocus);
+    }
+  });
+
+  useEvent(ref, CLEAR_FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e) => {
+    e.stopPropagation();
+    manager.setFocused(false);
+    manager.setFocusedKey(null);
+  });
+
   const autoFocusRef = useRef(autoFocus);
@@ -492,7 +523,7 @@ useEffect(() => {
   // This will be marshalled to either the first or last item depending on where focus came from.
-  // If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
-  // to move real DOM focus to the element anyway.
   let tabIndex: number | undefined = undefined;
   if (!shouldUseVirtualFocus) {
     tabIndex = manager.focusedKey == null ? 0 : -1;
+  } else {
+    tabIndex = -1;
   }
@@ -499,0 +530,0 @@

src/useSelectableItem.ts

@@ -13,6 +13,6 @@ /*
 
-import {DOMAttributes, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';
+import {DOMAttributes, DOMProps, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
 import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils';
-import {mergeProps, openLink, useRouter} from '@react-aria/utils';
+import {mergeProps, openLink, UPDATE_ACTIVEDESCENDANT, useId, useRouter} from '@react-aria/utils';
 import {MultipleSelectionManager} from '@react-stately/selection';
@@ -22,3 +22,3 @@ import {PressProps, useLongPress, usePress} from '@react-aria/interactions';
 
-export interface SelectableItemOptions {
+export interface SelectableItemOptions extends DOMProps {
   /**
@@ -113,2 +113,3 @@ * An interface for reading and updating multiple selection state.
   let {
+    id,
     selectionManager: manager,
@@ -126,3 +127,3 @@ key,
   let router = useRouter();
-
+  id = useId(id);
   let onSelect = (e: PressEvent | LongPressEvent | PointerEvent) => {
@@ -168,7 +169,16 @@ if (e.pointerType === 'keyboard' && isNonContiguousSelectionModifier(e)) {
     let isFocused = key === manager.focusedKey;
-    if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
-      if (focus) {
-        focus();
-      } else if (document.activeElement !== ref.current && ref.current) {
-        focusSafely(ref.current);
+    if (isFocused && manager.isFocused) {
+      if (!shouldUseVirtualFocus) {
+        if (focus) {
+          focus();
+        } else if (document.activeElement !== ref.current && ref.current) {
+          focusSafely(ref.current);
+        }
+      } else {
+        let updateActiveDescendant = new CustomEvent(UPDATE_ACTIVEDESCENDANT, {
+          cancelable: true,
+          bubbles: true
+        });
+
+        ref.current?.dispatchEvent(updateActiveDescendant);
       }
@@ -364,3 +374,3 @@ }
       longPressEnabled ? longPressProps : {},
-      {onDoubleClick, onDragStartCapture, onClick}
+      {onDoubleClick, onDragStartCapture, onClick, id}
     ),
@@ -367,0 +377,0 @@ isPressed,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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

406687

increased by3.12%

Lines of code

4553

increased by3.27%

Dependency changes

• Updated@react-aria/focus@^3.0.0-nightly-f90799b33-241206

• Updated@react-aria/i18n@^3.0.0-nightly-f90799b33-241206

• Updated@react-aria/interactions@^3.0.0-nightly-f90799b33-241206

• Updated@react-aria/utils@^3.0.0-nightly-f90799b33-241206

• Updated@react-stately/selection@^3.0.0-nightly-f90799b33-241206

• Updated@react-types/shared@^3.0.0-nightly-f90799b33-241206