@react-stately/selection 3.16.2 → 3.18.0

package/src/SelectionManager.ts

@@ -15,6 +15,7 @@ import {
   FocusStrategy,
   Selection as ISelection,
   Key,
+  LayoutDelegate,
   LongPressEvent,
   Node,
   PressEvent,
@@ -26,23 +27,26 @@ import {MultipleSelectionManager, MultipleSelectionState} from './types';
 import {Selection} from './Selection';
 
 interface SelectionManagerOptions {
-  allowsCellSelection?: boolean
+  allowsCellSelection?: boolean,
+  layoutDelegate?: LayoutDelegate
 }
 
 /**
  * An interface for reading and updating multiple selection state.
  */
 export class SelectionManager implements MultipleSelectionManager {
-  private collection: Collection<Node<unknown>>;
+  collection: Collection<Node<unknown>>;
   private state: MultipleSelectionState;
   private allowsCellSelection: boolean;
-  private _isSelectAll: boolean;
+  private _isSelectAll: boolean | null;
+  private layoutDelegate: LayoutDelegate | null;
 
   constructor(collection: Collection<Node<unknown>>, state: MultipleSelectionState, options?: SelectionManagerOptions) {
     this.collection = collection;
     this.state = state;
     this.allowsCellSelection = options?.allowsCellSelection ?? false;
     this._isSelectAll = null;
+    this.layoutDelegate = options?.layoutDelegate || null;
   }
 
   /**
@@ -90,12 +94,12 @@ export class SelectionManager implements MultipleSelectionManager {
   /**
    * The current focused key in the collection.
    */
-  get focusedKey(): Key {
+  get focusedKey(): Key | null {
     return this.state.focusedKey;
   }
 
   /** Whether the first or last child of the focused key should receive focus. */
-  get childFocusStrategy(): FocusStrategy {
+  get childFocusStrategy(): FocusStrategy | null {
     return this.state.childFocusStrategy;
   }
 
@@ -133,10 +137,13 @@ export class SelectionManager implements MultipleSelectionManager {
       return false;
     }
 
-    key = this.getKey(key);
+    let mappedKey = this.getKey(key);
+    if (mappedKey == null) {
+      return false;
+    }
     return this.state.selectedKeys === 'all'
-      ? this.canSelectItem(key)
-      : this.state.selectedKeys.has(key);
+      ? this.canSelectItem(mappedKey)
+      : this.state.selectedKeys.has(mappedKey);
   }
 
   /**
@@ -177,7 +184,7 @@ export class SelectionManager implements MultipleSelectionManager {
       }
     }
 
-    return first?.key;
+    return first?.key ?? null;
   }
 
   get lastSelectedKey(): Key | null {
@@ -189,7 +196,7 @@ export class SelectionManager implements MultipleSelectionManager {
       }
     }
 
-    return last?.key;
+    return last?.key ?? null;
   }
 
   get disabledKeys(): Set<Key> {
@@ -213,22 +220,25 @@ export class SelectionManager implements MultipleSelectionManager {
       return;
     }
 
-    toKey = this.getKey(toKey);
+    let mappedToKey = this.getKey(toKey);
+    if (mappedToKey == null) {
+      return;
+    }
 
     let selection: Selection;
 
     // Only select the one key if coming from a select all.
     if (this.state.selectedKeys === 'all') {
-      selection = new Selection([toKey], toKey, toKey);
+      selection = new Selection([mappedToKey], mappedToKey, mappedToKey);
     } else {
       let selectedKeys = this.state.selectedKeys as Selection;
-      let anchorKey = selectedKeys.anchorKey || toKey;
-      selection = new Selection(selectedKeys, anchorKey, toKey);
-      for (let key of this.getKeyRange(anchorKey, selectedKeys.currentKey || toKey)) {
+      let anchorKey = selectedKeys.anchorKey ?? mappedToKey;
+      selection = new Selection(selectedKeys, anchorKey, mappedToKey);
+      for (let key of this.getKeyRange(anchorKey, selectedKeys.currentKey ?? mappedToKey)) {
         selection.delete(key);
       }
 
-      for (let key of this.getKeyRange(toKey, anchorKey)) {
+      for (let key of this.getKeyRange(mappedToKey, anchorKey)) {
         if (this.canSelectItem(key)) {
           selection.add(key);
         }
@@ -253,11 +263,15 @@ export class SelectionManager implements MultipleSelectionManager {
   }
 
   private getKeyRangeInternal(from: Key, to: Key) {
+    if (this.layoutDelegate?.getKeyRange) {
+      return this.layoutDelegate.getKeyRange(from, to);
+    }
+
     let keys: Key[] = [];
-    let key = from;
-    while (key) {
+    let key: Key | null = from;
+    while (key != null) {
       let item = this.collection.getItem(key);
-      if (item && item.type === 'item' || (item.type === 'cell' && this.allowsCellSelection)) {
+      if (item && (item.type === 'item' || (item.type === 'cell' && this.allowsCellSelection))) {
         keys.push(key);
       }
 
@@ -284,7 +298,7 @@ export class SelectionManager implements MultipleSelectionManager {
     }
 
     // Find a parent item to select
-    while (item.type !== 'item' && item.parentKey != null) {
+    while (item && item.type !== 'item' && item.parentKey != null) {
       item = this.collection.getItem(item.parentKey);
     }
 
@@ -308,20 +322,20 @@ export class SelectionManager implements MultipleSelectionManager {
       return;
     }
 
-    key = this.getKey(key);
-    if (key == null) {
+    let mappedKey = this.getKey(key);
+    if (mappedKey == null) {
       return;
     }
 
     let keys = new Selection(this.state.selectedKeys === 'all' ? this.getSelectAllKeys() : this.state.selectedKeys);
-    if (keys.has(key)) {
-      keys.delete(key);
+    if (keys.has(mappedKey)) {
+      keys.delete(mappedKey);
       // TODO: move anchor to last selected key...
       // Does `current` need to move here too?
-    } else if (this.canSelectItem(key)) {
-      keys.add(key);
-      keys.anchorKey = key;
-      keys.currentKey = key;
+    } else if (this.canSelectItem(mappedKey)) {
+      keys.add(mappedKey);
+      keys.anchorKey = mappedKey;
+      keys.currentKey = mappedKey;
     }
 
     if (this.disallowEmptySelection && keys.size === 0) {
@@ -339,13 +353,13 @@ export class SelectionManager implements MultipleSelectionManager {
       return;
     }
 
-    key = this.getKey(key);
-    if (key == null) {
+    let mappedKey = this.getKey(key);
+    if (mappedKey == null) {
       return;
     }
 
-    let selection = this.canSelectItem(key)
-      ? new Selection([key], key, key)
+    let selection = this.canSelectItem(mappedKey)
+      ? new Selection([mappedKey], mappedKey, mappedKey)
       : new Selection();
 
     this.state.setSelectedKeys(selection);
@@ -361,9 +375,9 @@ export class SelectionManager implements MultipleSelectionManager {
 
     let selection = new Selection();
     for (let key of keys) {
-      key = this.getKey(key);
-      if (key != null) {
-        selection.add(key);
+      let mappedKey = this.getKey(key);
+      if (mappedKey != null) {
+        selection.add(mappedKey);
         if (this.selectionMode === 'single') {
           break;
         }
@@ -375,17 +389,17 @@ export class SelectionManager implements MultipleSelectionManager {
 
   private getSelectAllKeys() {
     let keys: Key[] = [];
-    let addKeys = (key: Key) => {
+    let addKeys = (key: Key | null) => {
       while (key != null) {
         if (this.canSelectItem(key)) {
           let item = this.collection.getItem(key);
-          if (item.type === 'item') {
+          if (item?.type === 'item') {
             keys.push(key);
           }
 
           // Add child keys. If cell selection is allowed, then include item children too.
-          if (item.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) {
-            addKeys(getFirstItem(getChildNodes(item, this.collection)).key);
+          if (item?.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) {
+            addKeys(getFirstItem(getChildNodes(item, this.collection))?.key ?? null);
           }
         }
 

package/src/types.ts

@@ -19,11 +19,11 @@ export interface FocusState {
   /** Sets whether the collection is focused. */
   setFocused(isFocused: boolean): void,
   /** The current focused key in the collection. */
-  readonly focusedKey: Key,
+  readonly focusedKey: Key | null,
   /** Whether the first or last child of the focused key should receive focus. */
-  readonly childFocusStrategy: FocusStrategy,
+  readonly childFocusStrategy: FocusStrategy | null,
   /** Sets the focused key, and optionally, whether the first or last child of that key should receive focus. */
-  setFocusedKey(key: Key, child?: FocusStrategy): void
+  setFocusedKey(key: Key | null, child?: FocusStrategy): void
 }
 
 export interface SingleSelectionState extends FocusState {

package/src/useMultipleSelectionState.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DisabledBehavior, Key, MultipleSelection, SelectionBehavior, SelectionMode} from '@react-types/shared';
+import {DisabledBehavior, FocusStrategy, Key, MultipleSelection, SelectionBehavior, SelectionMode} from '@react-types/shared';
 import {MultipleSelectionState} from './types';
 import {Selection} from './Selection';
 import {useControlledState} from '@react-stately/utils';
@@ -45,7 +45,7 @@ export interface MultipleSelectionStateProps extends MultipleSelection {
 export function useMultipleSelectionState(props: MultipleSelectionStateProps): MultipleSelectionState {
   let {
     selectionMode = 'none' as SelectionMode,
-    disallowEmptySelection,
+    disallowEmptySelection = false,
     allowDuplicateSelectionEvents,
     selectionBehavior: selectionBehaviorProp = 'toggle',
     disabledBehavior = 'all'
@@ -55,14 +55,14 @@ export function useMultipleSelectionState(props: MultipleSelectionStateProps): M
   // But we also need to trigger a react re-render. So, we have both a ref (sync) and state (async).
   let isFocusedRef = useRef(false);
   let [, setFocused] = useState(false);
-  let focusedKeyRef = useRef(null);
-  let childFocusStrategyRef = useRef(null);
-  let [, setFocusedKey] = useState(null);
+  let focusedKeyRef = useRef<Key | null>(null);
+  let childFocusStrategyRef = useRef<FocusStrategy | null>(null);
+  let [, setFocusedKey] = useState<Key | null>(null);
   let selectedKeysProp = useMemo(() => convertSelection(props.selectedKeys), [props.selectedKeys]);
   let defaultSelectedKeys = useMemo(() => convertSelection(props.defaultSelectedKeys, new Selection()), [props.defaultSelectedKeys]);
   let [selectedKeys, setSelectedKeys] = useControlledState(
     selectedKeysProp,
-    defaultSelectedKeys,
+    defaultSelectedKeys!,
     props.onSelectionChange
   );
   let disabledKeysProp = useMemo(() =>
@@ -119,7 +119,7 @@ export function useMultipleSelectionState(props: MultipleSelectionStateProps): M
   };
 }
 
-function convertSelection(selection: 'all' | Iterable<Key>, defaultValue?: Selection): 'all' | Set<Key> {
+function convertSelection(selection: 'all' | Iterable<Key> | null | undefined, defaultValue?: Selection): 'all' | Set<Key> | undefined {
   if (!selection) {
     return defaultValue;
   }