/** * SPDX-FileCopyrightText: © 2021 Liferay, Inc. * SPDX-License-Identifier: BSD-3-Clause */ import { Key } from 'react'; import { ITreeProps } from './useTree'; import type { ICollectionProps } from './Collection'; import type { LayoutInfo } from './useLayout'; export interface IMultipleSelection { /** * Property to set the initial value of `selectedKeys`. */ defaultSelectedKeys?: Set; /** * Handler that is called when the selection changes. */ onSelectionChange?: (keys: Set) => void; /** * The currently selected keys in the collection. */ selectedKeys?: Set; /** * Flag to disable indeterminate state when selectionMode is multiple-recursive. */ indeterminate?: boolean; } declare type SelectionMode = 'single' | 'multiple' | 'multiple-recursive' | null; declare type SelectionToggleOptions = { selectionMode?: SelectionMode; parentSelection?: boolean; }; export interface IMultipleSelectionState { isIndeterminate: (key: Key) => boolean; replaceIndeterminateKeys: (keys: Array) => void; selectedKeys: Set; toggleSelection: (key: Key, options?: SelectionToggleOptions) => void; } export interface IMultipleSelectionProps> extends IMultipleSelection, Pick, 'nestedKey'>, Pick, 'items'> { selectionMode?: SelectionMode; layoutKeys: React.MutableRefObject>; } /** * The selection hook implementation handles the responsibility of optimizing * the tree selection in more complex scenarios like multiple recursive * selection, recursively selecting in two directions from the point where the * item is in the tree. * * Root * ├─ Item 0 * ├─ Item 1 * │ ├─ Item 2 <- Select this item. * │ │ ├─ Item 3 * │ │ ├─ Item 4 * │ ├─ Item 5 * * Selecting the item must recursively navigate up and down from the item's * point in the tree to the end at each end, the selection rules are different * when navigating up and down. * * { * 'Item 1': { * children: ['Item 2', 'Item 5'], * parentKey: 'Root' * } * } * * Navigation in the tree is supported by a hashmap structure with linked list * that avoids the operation of traversing the tree in search of all parent and * childs items. Navigation done this way lets you go from 1 to 1. * * Assembling the `layoutKeys` structure is also optimized to avoid traversing * the entire tree and blocking rendering until the operation is finished, * instead, the hook embodies the concept of building the structure in * React flow, i.e. when the item component is rendered, the record is added * to `layoutKeys` and and keeping the structure up to date is free because the * method is called on component mount and unmount. The trade-off is that we * don't get the complete mirror of the tree in the hashmap but only what is * rendered, this decreases the amount of data when there is a big tree but we * have problems recursively selecting to down. * * Root [0] * ├─ Item 0 [0, 0] * ├─ Item 1 [0, 1] * │ ├─ Item 2 [0, 1, 0] * │ │ ├─ Item 3 [0, 1, 0, 0] * │ │ ├─ Item 4 [0, 1, 0, 1] * │ ├─ Item 5 [0, 1, 1] * * The implementation solves this with a fallback approach of identifying if * the item has unrendered children and using the tree to navigate but using * the item path to avoid traversing the entire tree. */ export declare function useMultipleSelection>(props: IMultipleSelectionProps): IMultipleSelectionState; export {};