@react-stately/selection - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

dist/main.js

@@ -61,2 +61,3 @@ var {
   let [selectedKeys, setSelectedKeys] = useControlledState(selectedKeysProp, defaultSelectedKeys, props.onSelectionChange);
+  let disabledKeysProp = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
   return {
@@ -85,3 +86,4 @@ selectionMode,
     selectedKeys,
-    setSelectedKeys
+    setSelectedKeys,
+    disabledKeys: disabledKeysProp
   };
@@ -182,2 +184,3 @@ }
 
+    key = this.getKey(key);
     return this.state.selectedKeys === 'all' || this.state.selectedKeys.has(key);
@@ -270,3 +273,5 @@ }
       for (let key of this.getKeyRange(toKey, anchorKey)) {
-        keys.add(key);
+        if (!this.state.disabledKeys.has(key)) {
+          keys.add(key);
+        }
       }
@@ -385,11 +390,13 @@
       while (key) {
-        let item = this.collection.getItem(key);
+        if (!this.state.disabledKeys.has(key)) {
+          let item = this.collection.getItem(key);
 
-        if (item.type === 'item') {
-          keys.push(key);
-        } // Add child keys. If cell selection is allowed, then include item children too.
+          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([...item.childNodes][0].key);
+          if (item.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) {
+            addKeys([...item.childNodes][0].key);
+          }
         }
@@ -420,3 +427,5 @@
   clearSelection() {
-    this.state.setSelectedKeys(new $cc81f14158b02e1e259a5a46d24f0c$export$Selection());
+    if (this.state.selectedKeys === 'all' || this.state.selectedKeys.size > 0) {
+      this.state.setSelectedKeys(new $cc81f14158b02e1e259a5a46d24f0c$export$Selection());
+    }
   }
@@ -436,2 +445,20 @@ /**
 
+  select(key, e) {
+    if (this.selectionMode === 'none') {
+      return;
+    }
+
+    if (this.selectionMode === 'single') {
+      if (this.isSelected(key) && !this.disallowEmptySelection) {
+        this.toggleSelection(key);
+      } else {
+        this.replaceSelection(key);
+      }
+    } else if (e && e.shiftKey) {
+      this.extendSelection(key);
+    } else {
+      this.toggleSelection(key);
+    }
+  }
+
 }
@@ -438,0 +465,0 @@

dist/module.js

@@ -54,2 +54,3 @@ import { useControlledState } from "@react-stately/utils";
   let [selectedKeys, setSelectedKeys] = useControlledState(selectedKeysProp, defaultSelectedKeys, props.onSelectionChange);
+  let disabledKeysProp = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
   return {
@@ -78,3 +79,4 @@ selectionMode,
     selectedKeys,
-    setSelectedKeys
+    setSelectedKeys,
+    disabledKeys: disabledKeysProp
   };
@@ -173,2 +175,3 @@ }
 
+    key = this.getKey(key);
     return this.state.selectedKeys === 'all' || this.state.selectedKeys.has(key);
@@ -261,3 +264,5 @@ }
       for (let key of this.getKeyRange(toKey, anchorKey)) {
-        keys.add(key);
+        if (!this.state.disabledKeys.has(key)) {
+          keys.add(key);
+        }
       }
@@ -376,11 +381,13 @@
       while (key) {
-        let item = this.collection.getItem(key);
+        if (!this.state.disabledKeys.has(key)) {
+          let item = this.collection.getItem(key);
 
-        if (item.type === 'item') {
-          keys.push(key);
-        } // Add child keys. If cell selection is allowed, then include item children too.
+          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([...item.childNodes][0].key);
+          if (item.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) {
+            addKeys([...item.childNodes][0].key);
+          }
         }
@@ -411,3 +418,5 @@
   clearSelection() {
-    this.state.setSelectedKeys(new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection());
+    if (this.state.selectedKeys === 'all' || this.state.selectedKeys.size > 0) {
+      this.state.setSelectedKeys(new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection());
+    }
   }
@@ -427,3 +436,21 @@ /**
 
+  select(key, e) {
+    if (this.selectionMode === 'none') {
+      return;
+    }
+
+    if (this.selectionMode === 'single') {
+      if (this.isSelected(key) && !this.disallowEmptySelection) {
+        this.toggleSelection(key);
+      } else {
+        this.replaceSelection(key);
+      }
+    } else if (e && e.shiftKey) {
+      this.extendSelection(key);
+    } else {
+      this.toggleSelection(key);
+    }
+  }
+
 }
 //# sourceMappingURL=module.js.map

dist/types.d.ts

 import { Key } from "react";
-import { Selection, SelectionMode, MultipleSelection, Collection, Node } from "@react-types/shared";
+import { PressEvent, Selection, SelectionMode, MultipleSelection, Collection, Node } from "@react-types/shared";
 export interface FocusState {
@@ -30,2 +30,4 @@ /** Whether the collection is currently focused. */
     setSelectedKeys(keys: Selection | ((v: Selection) => Selection)): void;
+    /** The currently disabled keys in the collection. */
+    readonly disabledKeys: Set<Key>;
 }
@@ -61,2 +63,7 @@ export interface MultipleSelectionManager extends FocusState {
     toggleSelectAll(): void;
+    /**
+     * Toggles, replaces, or extends selection to the given key depending
+     * on the pointer event and collection's selection mode.
+     */
+    select(key: Key, e?: PressEvent | PointerEvent): void;
 }
@@ -141,4 +148,5 @@ /**
     toggleSelectAll(): void;
+    select(key: Key, e?: PressEvent | PointerEvent): void;
 }
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-stately/selection",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Spectrum UI components in React",
@@ -23,3 +23,3 @@ "license": "Apache-2.0",
     "@react-stately/utils": "^3.1.1",
-    "@react-types/shared": "^3.2.1"
+    "@react-types/shared": "^3.3.0"
   },
@@ -32,3 +32,3 @@ "peerDependencies": {
   },
-  "gitHead": "0778f71a3c13e1e24388a23b6d525e3b9f5b98f1"
+  "gitHead": "9f738a06ea4e256c8d975f00502b4b0bbabb8f65"
 }

src/SelectionManager.ts

@@ -13,3 +13,3 @@ /*
 
-import {Collection, Node, SelectionMode} from '@react-types/shared';
+import {Collection, Node, PressEvent, SelectionMode} from '@react-types/shared';
 import {Key} from 'react';
@@ -98,2 +98,3 @@ import {MultipleSelectionManager, MultipleSelectionState} from './types';
 
+    key = this.getKey(key);
     return this.state.selectedKeys === 'all' || this.state.selectedKeys.has(key);
@@ -174,3 +175,5 @@ }
       for (let key of this.getKeyRange(toKey, anchorKey)) {
-        keys.add(key);
+        if (!this.state.disabledKeys.has(key)) {
+          keys.add(key);
+        }
       }
@@ -280,10 +283,12 @@
       while (key) {
-        let item = this.collection.getItem(key);
-        if (item.type === 'item') {
-          keys.push(key);
-        }
+        if (!this.state.disabledKeys.has(key)) {
+          let item = this.collection.getItem(key);
+          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([...item.childNodes][0].key);
+          // Add child keys. If cell selection is allowed, then include item children too.
+          if (item.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) {
+            addKeys([...item.childNodes][0].key);
+          }
         }
@@ -312,3 +317,5 @@
   clearSelection() {
-    this.state.setSelectedKeys(new Selection());
+    if (this.state.selectedKeys === 'all' || this.state.selectedKeys.size > 0) {
+      this.state.setSelectedKeys(new Selection());
+    }
   }
@@ -326,2 +333,20 @@
   }
+
+  select(key: Key, e?: PressEvent | PointerEvent) {
+    if (this.selectionMode === 'none') {
+      return;
+    }
+
+    if (this.selectionMode === 'single') {
+      if (this.isSelected(key) && !this.disallowEmptySelection) {
+        this.toggleSelection(key);
+      } else {
+        this.replaceSelection(key);
+      }
+    } else if (e && e.shiftKey) {
+      this.extendSelection(key);
+    } else {
+      this.toggleSelection(key);
+    }
+  }
 }

src/types.ts

@@ -14,3 +14,3 @@ /*
 import {Key} from 'react';
-import {Selection, SelectionMode} from '@react-types/shared';
+import {PressEvent, Selection, SelectionMode} from '@react-types/shared';
 
@@ -45,3 +45,5 @@ export interface FocusState {
   /** Sets the selected keys in the collection. */
-  setSelectedKeys(keys: Selection | ((v: Selection) => Selection)): void
+  setSelectedKeys(keys: Selection | ((v: Selection) => Selection)): void,
+  /** The currently disabled keys in the collection. */
+  readonly disabledKeys: Set<Key>
 }
@@ -77,3 +79,8 @@
   /** Toggles between select all and an empty selection. */
-  toggleSelectAll(): void
+  toggleSelectAll(): void,
+  /**
+   * Toggles, replaces, or extends selection to the given key depending
+   * on the pointer event and collection's selection mode.
+   */
+  select(key: Key, e?: PressEvent | PointerEvent): void
 }

src/useMultipleSelectionState.ts

@@ -41,2 +41,5 @@ /*
   );
+  let disabledKeysProp = useMemo(() =>
+    props.disabledKeys ? new Set(props.disabledKeys) : new Set<Key>()
+  , [props.disabledKeys]);
 
@@ -61,3 +64,4 @@ return {
     selectedKeys,
-    setSelectedKeys
+    setSelectedKeys,
+    disabledKeys: disabledKeysProp
   };
@@ -64,0 +68,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

106368

7.37%

Lines of code

1342

7.36%

Dependency changes

• Updated

  @react-types/shared@^3.3.0