@awsui/collection-hooks - npm Package Compare versions

Comparing version 1.0.68 to 1.0.69

dist/cjs/interfaces.d.ts

@@ -46,3 +46,9 @@ import * as React from 'react';
     };
+    expandableRows?: ExpandableRowsProps<T>;
 }
+export interface ExpandableRowsProps<ItemType> {
+    getId(item: ItemType): string;
+    getParentId(item: ItemType): null | string;
+    defaultExpandedItems?: ReadonlyArray<ItemType>;
+}
 export interface CollectionState<T> {
@@ -54,2 +60,3 @@ filteringText: string;
     selectedItems: ReadonlyArray<T>;
+    expandedItems: ReadonlyArray<T>;
 }
@@ -62,2 +69,3 @@ export interface CollectionActions<T> {
     setPropertyFiltering(query: PropertyFilterQuery): void;
+    setExpandedItems(items: ReadonlyArray<T>): void;
 }
@@ -75,2 +83,11 @@ interface UseCollectionResultBase<T> {
         onSelectionChange?(event: CustomEventLike<SelectionChangeDetail<T>>): void;
+        expandableRows?: {
+            getItemChildren: (item: T) => T[];
+            isItemExpandable: (item: T) => boolean;
+            expandedItems: ReadonlyArray<T>;
+            onExpandableItemToggle(event: CustomEventLike<{
+                item: T;
+                expanded: boolean;
+            }>): void;
+        };
         trackBy?: string | ((item: T) => string);
@@ -77,0 +94,0 @@ ref: React.RefObject<CollectionRef>;

dist/cjs/operations/index.d.ts

 import { UseCollectionOptions, CollectionState, TrackBy } from '../interfaces';
-export declare function processItems<T>(items: ReadonlyArray<T>, { filteringText, sortingState, currentPageIndex, propertyFilteringQuery }: Partial<CollectionState<T>>, { filtering, sorting, pagination, propertyFiltering }: UseCollectionOptions<T>): {
+import { ItemsTree } from './items-tree.js';
+export declare function processItems<T>(items: ReadonlyArray<T>, { filteringText, sortingState, currentPageIndex, propertyFilteringQuery }: Partial<CollectionState<T>>, { filtering, sorting, pagination, propertyFiltering, expandableRows }: UseCollectionOptions<T>): {
     items: ReadonlyArray<T>;
@@ -8,5 +9,6 @@ allPageItems: ReadonlyArray<T>;
     filteredItemsCount: number | undefined;
+    itemsTree: ItemsTree<T>;
 };
-export declare const getTrackableValue: <T>(trackBy: TrackBy<T> | undefined, item: T) => any;
+export declare const getTrackableValue: <T>(trackBy: TrackBy<T> | undefined, item: T) => string | T;
 export declare const processSelectedItems: <T>(items: readonly T[], selectedItems: readonly T[], trackBy?: TrackBy<T> | undefined) => T[];
 export declare const itemsAreEqual: <T>(items1: readonly T[], items2: readonly T[], trackBy?: TrackBy<T> | undefined) => boolean;

dist/cjs/operations/index.js

@@ -8,26 +8,36 @@ "use strict";
 var pagination_js_1 = require("./pagination.js");
+var items_tree_js_1 = require("./items-tree.js");
 var compose_filters_js_1 = require("./compose-filters.js");
 function processItems(items, _a, _b) {
     var filteringText = _a.filteringText, sortingState = _a.sortingState, currentPageIndex = _a.currentPageIndex, propertyFilteringQuery = _a.propertyFilteringQuery;
-    var filtering = _b.filtering, sorting = _b.sorting, pagination = _b.pagination, propertyFiltering = _b.propertyFiltering;
+    var filtering = _b.filtering, sorting = _b.sorting, pagination = _b.pagination, propertyFiltering = _b.propertyFiltering, expandableRows = _b.expandableRows;
+    var itemsTree = new items_tree_js_1.ItemsTree(items, expandableRows);
     var filterPredicate = (0, compose_filters_js_1.composeFilters)((0, property_filter_js_1.createPropertyFilterPredicate)(propertyFiltering, propertyFilteringQuery), (0, filter_js_1.createFilterPredicate)(filtering, filteringText));
     if (filterPredicate) {
-        items = items.filter(filterPredicate);
+        itemsTree.filter(filterPredicate);
     }
-    var filteredItemsCount = filterPredicate ? items.length : undefined;
     var comparator = (0, sort_js_1.createComparator)(sorting, sortingState);
     if (comparator) {
-        items = items.slice().sort(comparator);
+        itemsTree.sort(comparator);
     }
-    var allPageItems = items;
-    var pageProps = (0, pagination_js_1.createPageProps)(pagination, currentPageIndex, items);
+    var allPageItems = itemsTree.getItems();
+    var filteredItemsCount = filterPredicate ? itemsTree.getSize() : undefined;
+    var pageProps = (0, pagination_js_1.createPageProps)(pagination, currentPageIndex, allPageItems);
     if (pageProps) {
-        items = items.slice((pageProps.pageIndex - 1) * pageProps.pageSize, pageProps.pageIndex * pageProps.pageSize);
+        return {
+            items: allPageItems.slice((pageProps.pageIndex - 1) * pageProps.pageSize, pageProps.pageIndex * pageProps.pageSize),
+            allPageItems: allPageItems,
+            filteredItemsCount: filteredItemsCount,
+            pagesCount: pageProps === null || pageProps === void 0 ? void 0 : pageProps.pagesCount,
+            actualPageIndex: pageProps === null || pageProps === void 0 ? void 0 : pageProps.pageIndex,
+            itemsTree: itemsTree,
+        };
     }
     return {
-        items: items,
+        items: allPageItems,
         allPageItems: allPageItems,
         filteredItemsCount: filteredItemsCount,
-        pagesCount: pageProps === null || pageProps === void 0 ? void 0 : pageProps.pagesCount,
-        actualPageIndex: pageProps === null || pageProps === void 0 ? void 0 : pageProps.pageIndex,
+        pagesCount: undefined,
+        actualPageIndex: undefined,
+        itemsTree: itemsTree,
     };
@@ -34,0 +44,0 @@ }

dist/cjs/use-collection-state.d.ts

 /// <reference types="react" />
-import { UseCollectionOptions, CollectionState, CollectionActions, CollectionRef } from './interfaces';
+import { UseCollectionOptions, CollectionState, CollectionRef, CollectionActions } from './interfaces';
 export declare function useCollectionState<T>(options: UseCollectionOptions<T>, collectionRef: React.RefObject<CollectionRef>): readonly [CollectionState<T>, CollectionActions<T>];

dist/cjs/use-collection-state.js

@@ -9,10 +9,11 @@ "use strict";
 function useCollectionState(options, collectionRef) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var _k = (0, react_1.useReducer)(utils_js_1.collectionReducer, {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _m = (0, react_1.useReducer)(utils_js_1.collectionReducer, {
         selectedItems: (_b = (_a = options.selection) === null || _a === void 0 ? void 0 : _a.defaultSelectedItems) !== null && _b !== void 0 ? _b : [],
-        sortingState: (_c = options.sorting) === null || _c === void 0 ? void 0 : _c.defaultState,
-        currentPageIndex: (_e = (_d = options.pagination) === null || _d === void 0 ? void 0 : _d.defaultPage) !== null && _e !== void 0 ? _e : 1,
-        filteringText: (_g = (_f = options.filtering) === null || _f === void 0 ? void 0 : _f.defaultFilteringText) !== null && _g !== void 0 ? _g : '',
-        propertyFilteringQuery: (_j = (_h = options.propertyFiltering) === null || _h === void 0 ? void 0 : _h.defaultQuery) !== null && _j !== void 0 ? _j : { tokens: [], operation: 'and' },
-    }), state = _k[0], dispatch = _k[1];
+        expandedItems: (_d = (_c = options.expandableRows) === null || _c === void 0 ? void 0 : _c.defaultExpandedItems) !== null && _d !== void 0 ? _d : [],
+        sortingState: (_e = options.sorting) === null || _e === void 0 ? void 0 : _e.defaultState,
+        currentPageIndex: (_g = (_f = options.pagination) === null || _f === void 0 ? void 0 : _f.defaultPage) !== null && _g !== void 0 ? _g : 1,
+        filteringText: (_j = (_h = options.filtering) === null || _h === void 0 ? void 0 : _h.defaultFilteringText) !== null && _j !== void 0 ? _j : '',
+        propertyFilteringQuery: (_l = (_k = options.propertyFiltering) === null || _k === void 0 ? void 0 : _k.defaultQuery) !== null && _l !== void 0 ? _l : { tokens: [], operation: 'and' },
+    }), state = _m[0], dispatch = _m[1];
     return [
@@ -19,0 +20,0 @@ state,

dist/cjs/use-collection.js

@@ -24,5 +24,29 @@ "use strict";
     var _a = (0, use_collection_state_js_1.useCollectionState)(options, collectionRef), state = _a[0], actions = _a[1];
-    var _b = (0, index_js_1.processItems)(allItems, state, options), items = _b.items, allPageItems = _b.allPageItems, pagesCount = _b.pagesCount, filteredItemsCount = _b.filteredItemsCount, actualPageIndex = _b.actualPageIndex;
+    var _b = (0, index_js_1.processItems)(allItems, state, options), items = _b.items, allPageItems = _b.allPageItems, pagesCount = _b.pagesCount, filteredItemsCount = _b.filteredItemsCount, actualPageIndex = _b.actualPageIndex, itemsTree = _b.itemsTree;
+    var expandedItemsSet = new Set();
+    if (options.expandableRows) {
+        for (var _i = 0, _c = state.expandedItems; _i < _c.length; _i++) {
+            var item = _c[_i];
+            expandedItemsSet.add(options.expandableRows.getId(item));
+        }
+    }
+    var visibleItems = items;
+    if (options.expandableRows) {
+        var flatItems_1 = new Array();
+        var getId_1 = options.expandableRows.getId;
+        var traverse_1 = function (items) {
+            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+                var item = items_1[_i];
+                flatItems_1.push(item);
+                if (expandedItemsSet.has(getId_1(item))) {
+                    traverse_1(itemsTree.getChildren(item));
+                }
+            }
+        };
+        traverse_1(items);
+        visibleItems = flatItems_1;
+    }
+    // Removing selected items that are no longer present in items unless keepSelection=true.
     if (options.selection && !options.selection.keepSelection) {
-        var newSelectedItems = (0, index_js_1.processSelectedItems)(items, state.selectedItems, options.selection.trackBy);
+        var newSelectedItems = (0, index_js_1.processSelectedItems)(visibleItems, state.selectedItems, options.selection.trackBy);
         if (!(0, index_js_1.itemsAreEqual)(newSelectedItems, state.selectedItems, options.selection.trackBy)) {
@@ -34,2 +58,9 @@ // This is a recommended pattern for how to handle the state, dependent on the incoming props
     }
+    // Removing expanded items that are no longer present in items.
+    if (options.expandableRows) {
+        var newExpandedItems = visibleItems.filter(function (item) { return expandedItemsSet.has(options.expandableRows.getId(item)); });
+        if (!(0, index_js_1.itemsAreEqual)(newExpandedItems, state.expandedItems, options.expandableRows.getId)) {
+            actions.setExpandedItems(newExpandedItems);
+        }
+    }
     return __assign({ items: items, allPageItems: allPageItems, filteredItemsCount: filteredItemsCount, actions: actions }, (0, utils_js_1.createSyncProps)(options, state, actions, collectionRef, {
@@ -40,4 +71,5 @@ actualPageIndex: actualPageIndex,
         allPageItems: allPageItems,
+        itemsTree: itemsTree,
     }));
 }
 exports.useCollection = useCollection;

dist/cjs/utils.d.ts

 import { Dispatch, Reducer } from 'react';
-import { CollectionActions, UseCollectionOptions, CollectionState, SortingState, UseCollectionResult, CollectionRef, PropertyFilterQuery } from './interfaces';
+import { UseCollectionOptions, CollectionState, SortingState, UseCollectionResult, CollectionRef, PropertyFilterQuery, CollectionActions } from './interfaces';
+import { ItemsTree } from './operations/items-tree';
 interface SelectionAction<T> {
@@ -7,2 +8,6 @@ type: 'selection';
 }
+interface ExpansionAction<T> {
+    type: 'expansion';
+    expandedItems: ReadonlyArray<T>;
+}
 interface SortingAction<T> {
@@ -24,3 +29,3 @@ type: 'sorting';
 }
-type Action<T> = SelectionAction<T> | SortingAction<T> | PaginationAction | FilteringAction | PropertyFilteringAction;
+type Action<T> = SelectionAction<T> | ExpansionAction<T> | SortingAction<T> | PaginationAction | FilteringAction | PropertyFilteringAction;
 export type CollectionReducer<T> = Reducer<CollectionState<T>, Action<T>>;
@@ -32,3 +37,3 @@ export declare function collectionReducer<T>(state: CollectionState<T>, action: Action<T>): CollectionState<T>;
 }): CollectionActions<T>;
-export declare function createSyncProps<T>(options: UseCollectionOptions<T>, { filteringText, sortingState, selectedItems, currentPageIndex, propertyFilteringQuery }: CollectionState<T>, actions: CollectionActions<T>, collectionRef: React.RefObject<CollectionRef>, { pagesCount, actualPageIndex, allItems, allPageItems, }: {
+export declare function createSyncProps<T>(options: UseCollectionOptions<T>, { filteringText, sortingState, selectedItems, expandedItems, currentPageIndex, propertyFilteringQuery, }: CollectionState<T>, actions: CollectionActions<T>, collectionRef: React.RefObject<CollectionRef>, { pagesCount, actualPageIndex, allItems, allPageItems, itemsTree, }: {
     pagesCount?: number;
@@ -38,3 +43,4 @@ actualPageIndex?: number;
     allPageItems: ReadonlyArray<T>;
+    itemsTree: ItemsTree<T>;
 }): Pick<UseCollectionResult<T>, 'collectionProps' | 'filterProps' | 'paginationProps' | 'propertyFilterProps'>;
 export {};

dist/cjs/utils.js

@@ -13,2 +13,11 @@ "use strict";
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -23,2 +32,5 @@ exports.createSyncProps = exports.createActions = exports.collectionReducer = void 0;
             break;
+        case 'expansion':
+            newState.expandedItems = action.expandedItems;
+            break;
         case 'filtering':
@@ -65,2 +77,5 @@ newState.currentPageIndex = 1;
         },
+        setExpandedItems: function (expandedItems) {
+            dispatch({ type: 'expansion', expandedItems: expandedItems });
+        },
     };
@@ -71,4 +86,4 @@ }
     var _c, _d;
-    var filteringText = _a.filteringText, sortingState = _a.sortingState, selectedItems = _a.selectedItems, currentPageIndex = _a.currentPageIndex, propertyFilteringQuery = _a.propertyFilteringQuery;
-    var pagesCount = _b.pagesCount, actualPageIndex = _b.actualPageIndex, allItems = _b.allItems, allPageItems = _b.allPageItems;
+    var filteringText = _a.filteringText, sortingState = _a.sortingState, selectedItems = _a.selectedItems, expandedItems = _a.expandedItems, currentPageIndex = _a.currentPageIndex, propertyFilteringQuery = _a.propertyFilteringQuery;
+    var pagesCount = _b.pagesCount, actualPageIndex = _b.actualPageIndex, allItems = _b.allItems, allPageItems = _b.allPageItems, itemsTree = _b.itemsTree;
     var empty = options.filtering
@@ -101,3 +116,3 @@ ? allItems.length
     return {
-        collectionProps: __assign(__assign(__assign(__assign({ empty: empty }, (options.sorting
+        collectionProps: __assign(__assign(__assign(__assign(__assign({ empty: empty }, (options.sorting
             ? {
@@ -111,2 +126,35 @@ onSortingChange: function (_a) {
             }
+            : {})), (options.expandableRows
+            ? {
+                expandableRows: {
+                    getItemChildren: function (item) {
+                        return itemsTree.getChildren(item);
+                    },
+                    isItemExpandable: function (item) {
+                        return itemsTree.getChildren(item).length > 0;
+                    },
+                    expandedItems: expandedItems,
+                    onExpandableItemToggle: function (_a) {
+                        var _b = _a.detail, item = _b.item, expanded = _b.expanded;
+                        var getId = options.expandableRows.getId;
+                        if (expanded) {
+                            for (var _i = 0, expandedItems_1 = expandedItems; _i < expandedItems_1.length; _i++) {
+                                var stateItem = expandedItems_1[_i];
+                                if (getId(stateItem) === getId(item)) {
+                                    return;
+                                }
+                            }
+                            actions.setExpandedItems(__spreadArray(__spreadArray([], expandedItems, true), [item], false));
+                        }
+                        else {
+                            actions.setExpandedItems(expandedItems.filter(function (stateItem) { return getId(stateItem) !== getId(item); }));
+                        }
+                    },
+                },
+                // The trackBy property is used to match expanded items by ID and not by object reference.
+                // The property can be overridden by the explicitly provided selection.trackBy.
+                // If that is the case, we assume both selection.trackBy and expandableRows.getId have the same result.
+                // If not, the expandable state won't be matched correctly by the table.
+                trackBy: options.expandableRows.getId,
+            }
             : {})), (options.selection
@@ -113,0 +161,0 @@ ? {

dist/mjs/interfaces.d.ts

@@ -46,3 +46,9 @@ import * as React from 'react';
     };
+    expandableRows?: ExpandableRowsProps<T>;
 }
+export interface ExpandableRowsProps<ItemType> {
+    getId(item: ItemType): string;
+    getParentId(item: ItemType): null | string;
+    defaultExpandedItems?: ReadonlyArray<ItemType>;
+}
 export interface CollectionState<T> {
@@ -54,2 +60,3 @@ filteringText: string;
     selectedItems: ReadonlyArray<T>;
+    expandedItems: ReadonlyArray<T>;
 }
@@ -62,2 +69,3 @@ export interface CollectionActions<T> {
     setPropertyFiltering(query: PropertyFilterQuery): void;
+    setExpandedItems(items: ReadonlyArray<T>): void;
 }
@@ -75,2 +83,11 @@ interface UseCollectionResultBase<T> {
         onSelectionChange?(event: CustomEventLike<SelectionChangeDetail<T>>): void;
+        expandableRows?: {
+            getItemChildren: (item: T) => T[];
+            isItemExpandable: (item: T) => boolean;
+            expandedItems: ReadonlyArray<T>;
+            onExpandableItemToggle(event: CustomEventLike<{
+                item: T;
+                expanded: boolean;
+            }>): void;
+        };
         trackBy?: string | ((item: T) => string);
@@ -77,0 +94,0 @@ ref: React.RefObject<CollectionRef>;

dist/mjs/operations/index.d.ts

 import { UseCollectionOptions, CollectionState, TrackBy } from '../interfaces';
-export declare function processItems<T>(items: ReadonlyArray<T>, { filteringText, sortingState, currentPageIndex, propertyFilteringQuery }: Partial<CollectionState<T>>, { filtering, sorting, pagination, propertyFiltering }: UseCollectionOptions<T>): {
+import { ItemsTree } from './items-tree.js';
+export declare function processItems<T>(items: ReadonlyArray<T>, { filteringText, sortingState, currentPageIndex, propertyFilteringQuery }: Partial<CollectionState<T>>, { filtering, sorting, pagination, propertyFiltering, expandableRows }: UseCollectionOptions<T>): {
     items: ReadonlyArray<T>;
@@ -8,5 +9,6 @@ allPageItems: ReadonlyArray<T>;
     filteredItemsCount: number | undefined;
+    itemsTree: ItemsTree<T>;
 };
-export declare const getTrackableValue: <T>(trackBy: TrackBy<T> | undefined, item: T) => any;
+export declare const getTrackableValue: <T>(trackBy: TrackBy<T> | undefined, item: T) => string | T;
 export declare const processSelectedItems: <T>(items: readonly T[], selectedItems: readonly T[], trackBy?: TrackBy<T> | undefined) => T[];
 export declare const itemsAreEqual: <T>(items1: readonly T[], items2: readonly T[], trackBy?: TrackBy<T> | undefined) => boolean;

dist/mjs/operations/index.js

@@ -5,26 +5,36 @@ import { createFilterPredicate } from './filter.js';
 import { createPageProps } from './pagination.js';
+import { ItemsTree } from './items-tree.js';
 import { composeFilters } from './compose-filters.js';
 export function processItems(items, _a, _b) {
     var filteringText = _a.filteringText, sortingState = _a.sortingState, currentPageIndex = _a.currentPageIndex, propertyFilteringQuery = _a.propertyFilteringQuery;
-    var filtering = _b.filtering, sorting = _b.sorting, pagination = _b.pagination, propertyFiltering = _b.propertyFiltering;
+    var filtering = _b.filtering, sorting = _b.sorting, pagination = _b.pagination, propertyFiltering = _b.propertyFiltering, expandableRows = _b.expandableRows;
+    var itemsTree = new ItemsTree(items, expandableRows);
     var filterPredicate = composeFilters(createPropertyFilterPredicate(propertyFiltering, propertyFilteringQuery), createFilterPredicate(filtering, filteringText));
     if (filterPredicate) {
-        items = items.filter(filterPredicate);
+        itemsTree.filter(filterPredicate);
     }
-    var filteredItemsCount = filterPredicate ? items.length : undefined;
     var comparator = createComparator(sorting, sortingState);
     if (comparator) {
-        items = items.slice().sort(comparator);
+        itemsTree.sort(comparator);
     }
-    var allPageItems = items;
-    var pageProps = createPageProps(pagination, currentPageIndex, items);
+    var allPageItems = itemsTree.getItems();
+    var filteredItemsCount = filterPredicate ? itemsTree.getSize() : undefined;
+    var pageProps = createPageProps(pagination, currentPageIndex, allPageItems);
     if (pageProps) {
-        items = items.slice((pageProps.pageIndex - 1) * pageProps.pageSize, pageProps.pageIndex * pageProps.pageSize);
+        return {
+            items: allPageItems.slice((pageProps.pageIndex - 1) * pageProps.pageSize, pageProps.pageIndex * pageProps.pageSize),
+            allPageItems: allPageItems,
+            filteredItemsCount: filteredItemsCount,
+            pagesCount: pageProps === null || pageProps === void 0 ? void 0 : pageProps.pagesCount,
+            actualPageIndex: pageProps === null || pageProps === void 0 ? void 0 : pageProps.pageIndex,
+            itemsTree: itemsTree,
+        };
     }
     return {
-        items: items,
+        items: allPageItems,
         allPageItems: allPageItems,
         filteredItemsCount: filteredItemsCount,
-        pagesCount: pageProps === null || pageProps === void 0 ? void 0 : pageProps.pagesCount,
-        actualPageIndex: pageProps === null || pageProps === void 0 ? void 0 : pageProps.pageIndex,
+        pagesCount: undefined,
+        actualPageIndex: undefined,
+        itemsTree: itemsTree,
     };
@@ -31,0 +41,0 @@ }

dist/mjs/use-collection-state.d.ts

 /// <reference types="react" />
-import { UseCollectionOptions, CollectionState, CollectionActions, CollectionRef } from './interfaces';
+import { UseCollectionOptions, CollectionState, CollectionRef, CollectionActions } from './interfaces';
 export declare function useCollectionState<T>(options: UseCollectionOptions<T>, collectionRef: React.RefObject<CollectionRef>): readonly [CollectionState<T>, CollectionActions<T>];

dist/mjs/use-collection-state.js

@@ -6,10 +6,11 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 export function useCollectionState(options, collectionRef) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var _k = useReducer(collectionReducer, {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _m = useReducer(collectionReducer, {
         selectedItems: (_b = (_a = options.selection) === null || _a === void 0 ? void 0 : _a.defaultSelectedItems) !== null && _b !== void 0 ? _b : [],
-        sortingState: (_c = options.sorting) === null || _c === void 0 ? void 0 : _c.defaultState,
-        currentPageIndex: (_e = (_d = options.pagination) === null || _d === void 0 ? void 0 : _d.defaultPage) !== null && _e !== void 0 ? _e : 1,
-        filteringText: (_g = (_f = options.filtering) === null || _f === void 0 ? void 0 : _f.defaultFilteringText) !== null && _g !== void 0 ? _g : '',
-        propertyFilteringQuery: (_j = (_h = options.propertyFiltering) === null || _h === void 0 ? void 0 : _h.defaultQuery) !== null && _j !== void 0 ? _j : { tokens: [], operation: 'and' },
-    }), state = _k[0], dispatch = _k[1];
+        expandedItems: (_d = (_c = options.expandableRows) === null || _c === void 0 ? void 0 : _c.defaultExpandedItems) !== null && _d !== void 0 ? _d : [],
+        sortingState: (_e = options.sorting) === null || _e === void 0 ? void 0 : _e.defaultState,
+        currentPageIndex: (_g = (_f = options.pagination) === null || _f === void 0 ? void 0 : _f.defaultPage) !== null && _g !== void 0 ? _g : 1,
+        filteringText: (_j = (_h = options.filtering) === null || _h === void 0 ? void 0 : _h.defaultFilteringText) !== null && _j !== void 0 ? _j : '',
+        propertyFilteringQuery: (_l = (_k = options.propertyFiltering) === null || _k === void 0 ? void 0 : _k.defaultQuery) !== null && _l !== void 0 ? _l : { tokens: [], operation: 'and' },
+    }), state = _m[0], dispatch = _m[1];
     return [
@@ -16,0 +17,0 @@ state,

dist/mjs/use-collection.js

@@ -21,5 +21,29 @@ var __assign = (this && this.__assign) || function () {
     var _a = useCollectionState(options, collectionRef), state = _a[0], actions = _a[1];
-    var _b = processItems(allItems, state, options), items = _b.items, allPageItems = _b.allPageItems, pagesCount = _b.pagesCount, filteredItemsCount = _b.filteredItemsCount, actualPageIndex = _b.actualPageIndex;
+    var _b = processItems(allItems, state, options), items = _b.items, allPageItems = _b.allPageItems, pagesCount = _b.pagesCount, filteredItemsCount = _b.filteredItemsCount, actualPageIndex = _b.actualPageIndex, itemsTree = _b.itemsTree;
+    var expandedItemsSet = new Set();
+    if (options.expandableRows) {
+        for (var _i = 0, _c = state.expandedItems; _i < _c.length; _i++) {
+            var item = _c[_i];
+            expandedItemsSet.add(options.expandableRows.getId(item));
+        }
+    }
+    var visibleItems = items;
+    if (options.expandableRows) {
+        var flatItems_1 = new Array();
+        var getId_1 = options.expandableRows.getId;
+        var traverse_1 = function (items) {
+            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+                var item = items_1[_i];
+                flatItems_1.push(item);
+                if (expandedItemsSet.has(getId_1(item))) {
+                    traverse_1(itemsTree.getChildren(item));
+                }
+            }
+        };
+        traverse_1(items);
+        visibleItems = flatItems_1;
+    }
+    // Removing selected items that are no longer present in items unless keepSelection=true.
     if (options.selection && !options.selection.keepSelection) {
-        var newSelectedItems = processSelectedItems(items, state.selectedItems, options.selection.trackBy);
+        var newSelectedItems = processSelectedItems(visibleItems, state.selectedItems, options.selection.trackBy);
         if (!itemsAreEqual(newSelectedItems, state.selectedItems, options.selection.trackBy)) {
@@ -31,2 +55,9 @@ // This is a recommended pattern for how to handle the state, dependent on the incoming props
     }
+    // Removing expanded items that are no longer present in items.
+    if (options.expandableRows) {
+        var newExpandedItems = visibleItems.filter(function (item) { return expandedItemsSet.has(options.expandableRows.getId(item)); });
+        if (!itemsAreEqual(newExpandedItems, state.expandedItems, options.expandableRows.getId)) {
+            actions.setExpandedItems(newExpandedItems);
+        }
+    }
     return __assign({ items: items, allPageItems: allPageItems, filteredItemsCount: filteredItemsCount, actions: actions }, createSyncProps(options, state, actions, collectionRef, {
@@ -37,3 +68,4 @@ actualPageIndex: actualPageIndex,
         allPageItems: allPageItems,
+        itemsTree: itemsTree,
     }));
 }

dist/mjs/utils.d.ts

 import { Dispatch, Reducer } from 'react';
-import { CollectionActions, UseCollectionOptions, CollectionState, SortingState, UseCollectionResult, CollectionRef, PropertyFilterQuery } from './interfaces';
+import { UseCollectionOptions, CollectionState, SortingState, UseCollectionResult, CollectionRef, PropertyFilterQuery, CollectionActions } from './interfaces';
+import { ItemsTree } from './operations/items-tree';
 interface SelectionAction<T> {
@@ -7,2 +8,6 @@ type: 'selection';
 }
+interface ExpansionAction<T> {
+    type: 'expansion';
+    expandedItems: ReadonlyArray<T>;
+}
 interface SortingAction<T> {
@@ -24,3 +29,3 @@ type: 'sorting';
 }
-type Action<T> = SelectionAction<T> | SortingAction<T> | PaginationAction | FilteringAction | PropertyFilteringAction;
+type Action<T> = SelectionAction<T> | ExpansionAction<T> | SortingAction<T> | PaginationAction | FilteringAction | PropertyFilteringAction;
 export type CollectionReducer<T> = Reducer<CollectionState<T>, Action<T>>;
@@ -32,3 +37,3 @@ export declare function collectionReducer<T>(state: CollectionState<T>, action: Action<T>): CollectionState<T>;
 }): CollectionActions<T>;
-export declare function createSyncProps<T>(options: UseCollectionOptions<T>, { filteringText, sortingState, selectedItems, currentPageIndex, propertyFilteringQuery }: CollectionState<T>, actions: CollectionActions<T>, collectionRef: React.RefObject<CollectionRef>, { pagesCount, actualPageIndex, allItems, allPageItems, }: {
+export declare function createSyncProps<T>(options: UseCollectionOptions<T>, { filteringText, sortingState, selectedItems, expandedItems, currentPageIndex, propertyFilteringQuery, }: CollectionState<T>, actions: CollectionActions<T>, collectionRef: React.RefObject<CollectionRef>, { pagesCount, actualPageIndex, allItems, allPageItems, itemsTree, }: {
     pagesCount?: number;
@@ -38,3 +43,4 @@ actualPageIndex?: number;
     allPageItems: ReadonlyArray<T>;
+    itemsTree: ItemsTree<T>;
 }): Pick<UseCollectionResult<T>, 'collectionProps' | 'filterProps' | 'paginationProps' | 'propertyFilterProps'>;
 export {};

dist/mjs/utils.js

@@ -12,2 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { fixupFalsyValues } from './operations/property-filter.js';
@@ -20,2 +29,5 @@ export function collectionReducer(state, action) {
             break;
+        case 'expansion':
+            newState.expandedItems = action.expandedItems;
+            break;
         case 'filtering':
@@ -61,2 +73,5 @@ newState.currentPageIndex = 1;
         },
+        setExpandedItems: function (expandedItems) {
+            dispatch({ type: 'expansion', expandedItems: expandedItems });
+        },
     };
@@ -66,4 +81,4 @@ }
     var _c, _d;
-    var filteringText = _a.filteringText, sortingState = _a.sortingState, selectedItems = _a.selectedItems, currentPageIndex = _a.currentPageIndex, propertyFilteringQuery = _a.propertyFilteringQuery;
-    var pagesCount = _b.pagesCount, actualPageIndex = _b.actualPageIndex, allItems = _b.allItems, allPageItems = _b.allPageItems;
+    var filteringText = _a.filteringText, sortingState = _a.sortingState, selectedItems = _a.selectedItems, expandedItems = _a.expandedItems, currentPageIndex = _a.currentPageIndex, propertyFilteringQuery = _a.propertyFilteringQuery;
+    var pagesCount = _b.pagesCount, actualPageIndex = _b.actualPageIndex, allItems = _b.allItems, allPageItems = _b.allPageItems, itemsTree = _b.itemsTree;
     var empty = options.filtering
@@ -96,3 +111,3 @@ ? allItems.length
     return {
-        collectionProps: __assign(__assign(__assign(__assign({ empty: empty }, (options.sorting
+        collectionProps: __assign(__assign(__assign(__assign(__assign({ empty: empty }, (options.sorting
             ? {
@@ -106,2 +121,35 @@ onSortingChange: function (_a) {
             }
+            : {})), (options.expandableRows
+            ? {
+                expandableRows: {
+                    getItemChildren: function (item) {
+                        return itemsTree.getChildren(item);
+                    },
+                    isItemExpandable: function (item) {
+                        return itemsTree.getChildren(item).length > 0;
+                    },
+                    expandedItems: expandedItems,
+                    onExpandableItemToggle: function (_a) {
+                        var _b = _a.detail, item = _b.item, expanded = _b.expanded;
+                        var getId = options.expandableRows.getId;
+                        if (expanded) {
+                            for (var _i = 0, expandedItems_1 = expandedItems; _i < expandedItems_1.length; _i++) {
+                                var stateItem = expandedItems_1[_i];
+                                if (getId(stateItem) === getId(item)) {
+                                    return;
+                                }
+                            }
+                            actions.setExpandedItems(__spreadArray(__spreadArray([], expandedItems, true), [item], false));
+                        }
+                        else {
+                            actions.setExpandedItems(expandedItems.filter(function (stateItem) { return getId(stateItem) !== getId(item); }));
+                        }
+                    },
+                },
+                // The trackBy property is used to match expanded items by ID and not by object reference.
+                // The property can be overridden by the explicitly provided selection.trackBy.
+                // If that is the case, we assume both selection.trackBy and expandableRows.getId have the same result.
+                // If not, the expandable state won't be matched correctly by the table.
+                trackBy: options.expandableRows.getId,
+            }
             : {})), (options.selection
@@ -108,0 +156,0 @@ ? {

internal/manifest.json

 {
-  "commit": "82e3d5405eddf135c7fc0bf6af3a84c811be040b"
+  "commit": "643424102e85b73ce44cdaf8814fbf7974daa8cb"
 }

package.json

@@ -50,5 +50,5 @@ {
   "type": "module",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "license": "Apache-2.0",
   "scripts": {}
 }

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

106966

increased by23.36%

Number of package files

67

increased by6.35%

Lines of code

2091

increased by29.55%

No dependency changes