@react-stately/selection
Advanced tools
Comparing version 3.2.1 to 3.3.0
@@ -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 @@ |
@@ -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 |
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 |
{ | ||
"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" | ||
} |
@@ -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); | ||
} | ||
} | ||
} |
@@ -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 | ||
} |
@@ -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 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
106368
1342
Updated@react-types/shared@^3.3.0