From 0ec614830691c4b2605661d736fc4be7add06314 Mon Sep 17 00:00:00 2001 From: Cristian Necula Date: Wed, 28 Feb 2024 00:40:55 +0200 Subject: [PATCH] feat!: upgrade to lit-virtualizer BREAKING CHANGE: drop polymer iron-list BREAKING CHANGE: drop updateSize and scrollTarget --- package-lock.json | 95 +++++++++---------------- package.json | 4 +- test/basic.test.js | 29 +++----- use-collapsible-items.js | 16 ++--- use-cosmoz-grouped-list.js | 139 +++++++++++-------------------------- 5 files changed, 95 insertions(+), 188 deletions(-) diff --git a/package-lock.json b/package-lock.json index 39af7ec..ea5f1cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,9 @@ "version": "7.0.0", "license": "Apache-2.0", "dependencies": { + "@lit-labs/virtualizer": "^2.0.12", "@neovici/cosmoz-utils": "^6.0.0", "@pionjs/pion": "^2.0.0", - "@polymer/iron-list": "github:Neovici/iron-list", - "@polymer/polymer": "^3.3.1", "lit-html": "^2.0.0 || ^3.0.0" }, "devDependencies": { @@ -26,6 +25,7 @@ "@polymer/paper-dropdown-menu": "^3.1.0", "@polymer/paper-item": "^3.0.0", "@polymer/paper-listbox": "^3.0.0", + "@polymer/polymer": "^3.5.1", "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.0", "husky": "^4.3.0", @@ -594,14 +594,21 @@ "node_modules/@lit-labs/ssr-dom-shim": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz", - "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==", - "dev": true + "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==" + }, + "node_modules/@lit-labs/virtualizer": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/@lit-labs/virtualizer/-/virtualizer-2.0.12.tgz", + "integrity": "sha512-sL7AXhacSdzOJLEQFcPCrV7tu2rZQ10upeGMAxKmTT0Ae4kBFV8nwlFiUEQPBt1idUsAkiDG1yN91IgUWQXVNQ==", + "dependencies": { + "lit": "^3.1.0", + "tslib": "^2.0.3" + } }, "node_modules/@lit/reactive-element": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.3.tgz", "integrity": "sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==", - "dev": true, "dependencies": { "@lit-labs/ssr-dom-shim": "^1.1.2" } @@ -1100,6 +1107,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.1.tgz", "integrity": "sha512-lnrjKq3ysbBPT/74l0Fj0U9H9C35Tpw2C/tpJ8a+5g8Y3YJs1WSZYnEl1yOkw6sEyaxOq/1DkzH0+60gGu5/PQ==", + "dev": true, "dependencies": { "@polymer/polymer": "^3.0.0" } @@ -1219,18 +1227,6 @@ "@polymer/polymer": "^3.0.0" } }, - "node_modules/@polymer/iron-list": { - "version": "3.1.0", - "resolved": "git+ssh://git@github.com/Neovici/iron-list.git#8183790a6703c8451459141f2cf0d70e376614d6", - "license": "BSD-3-Clause", - "dependencies": { - "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", - "@polymer/iron-resizable-behavior": "^3.0.0-pre.26", - "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.26", - "@polymer/polymer": "^3.0.0", - "lit-html": "^1 || ^2" - } - }, "node_modules/@polymer/iron-menu-behavior": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@polymer/iron-menu-behavior/-/iron-menu-behavior-3.0.2.tgz", @@ -1268,14 +1264,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-3.0.1.tgz", "integrity": "sha512-FyHxRxFspVoRaeZSWpT3y0C9awomb4tXXolIJcZ7RvXhMP632V5lez+ch5G5SwK0LpnAPkg35eB0LPMFv+YMMQ==", - "dependencies": { - "@polymer/polymer": "^3.0.0" - } - }, - "node_modules/@polymer/iron-scroll-target-behavior": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@polymer/iron-scroll-target-behavior/-/iron-scroll-target-behavior-3.0.1.tgz", - "integrity": "sha512-xg1WanG25BIkQE8rhuReqY9zx1K5M7F+YAIYpswEp5eyDIaZ1Y3vUmVeQ3KG+hiSugzI1M752azXN7kvyhOBcQ==", + "dev": true, "dependencies": { "@polymer/polymer": "^3.0.0" } @@ -1429,6 +1418,7 @@ "version": "3.5.1", "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.5.1.tgz", "integrity": "sha512-JlAHuy+1qIC6hL1ojEUfIVD58fzTpJAoCxFwV5yr0mYTXV1H8bz5zy0+rC963Cgr9iNXQ4T9ncSjC2fkF9BQfw==", + "dev": true, "dependencies": { "@webcomponents/shadycss": "^1.9.1" } @@ -2810,7 +2800,8 @@ "node_modules/@webcomponents/shadycss": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.11.0.tgz", - "integrity": "sha512-L5O/+UPum8erOleNjKq6k58GVl3fNsEQdSOyh0EUhNmi7tHUyRuCJy1uqJiWydWcLARE5IPsMoPYMZmUGrz1JA==" + "integrity": "sha512-L5O/+UPum8erOleNjKq6k58GVl3fNsEQdSOyh0EUhNmi7tHUyRuCJy1uqJiWydWcLARE5IPsMoPYMZmUGrz1JA==", + "dev": true }, "node_modules/accepts": { "version": "1.3.8", @@ -7249,7 +7240,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.1.tgz", "integrity": "sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==", - "dev": true, "dependencies": { "@lit/reactive-element": "^2.0.0", "lit-element": "^4.0.0", @@ -7260,7 +7250,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.3.tgz", "integrity": "sha512-2vhidmC7gGLfnVx41P8UZpzyS0Fb8wYhS5RCm16cMW3oERO0Khd3EsKwtRpOnttuByI5rURjT2dfoA7NlInCNw==", - "dev": true, "dependencies": { "@lit-labs/ssr-dom-shim": "^1.1.2", "@lit/reactive-element": "^2.0.0", @@ -7271,7 +7260,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz", "integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==", - "dev": true, "dependencies": { "@types/trusted-types": "^2.0.2" } @@ -7288,7 +7276,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz", "integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==", - "dev": true, "dependencies": { "@types/trusted-types": "^2.0.2" } @@ -12946,8 +12933,7 @@ "node_modules/tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", - "dev": true + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "node_modules/tsscmp": { "version": "1.0.6", @@ -13903,14 +13889,21 @@ "@lit-labs/ssr-dom-shim": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz", - "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==", - "dev": true + "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==" + }, + "@lit-labs/virtualizer": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/@lit-labs/virtualizer/-/virtualizer-2.0.12.tgz", + "integrity": "sha512-sL7AXhacSdzOJLEQFcPCrV7tu2rZQ10upeGMAxKmTT0Ae4kBFV8nwlFiUEQPBt1idUsAkiDG1yN91IgUWQXVNQ==", + "requires": { + "lit": "^3.1.0", + "tslib": "^2.0.3" + } }, "@lit/reactive-element": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.3.tgz", "integrity": "sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==", - "dev": true, "requires": { "@lit-labs/ssr-dom-shim": "^1.1.2" } @@ -14327,6 +14320,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.1.tgz", "integrity": "sha512-lnrjKq3ysbBPT/74l0Fj0U9H9C35Tpw2C/tpJ8a+5g8Y3YJs1WSZYnEl1yOkw6sEyaxOq/1DkzH0+60gGu5/PQ==", + "dev": true, "requires": { "@polymer/polymer": "^3.0.0" } @@ -14446,17 +14440,6 @@ "@polymer/polymer": "^3.0.0" } }, - "@polymer/iron-list": { - "version": "git+ssh://git@github.com/Neovici/iron-list.git#8183790a6703c8451459141f2cf0d70e376614d6", - "from": "@polymer/iron-list@github:Neovici/iron-list", - "requires": { - "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", - "@polymer/iron-resizable-behavior": "^3.0.0-pre.26", - "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.26", - "@polymer/polymer": "^3.0.0", - "lit-html": "^1 || ^2" - } - }, "@polymer/iron-menu-behavior": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@polymer/iron-menu-behavior/-/iron-menu-behavior-3.0.2.tgz", @@ -14494,14 +14477,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-3.0.1.tgz", "integrity": "sha512-FyHxRxFspVoRaeZSWpT3y0C9awomb4tXXolIJcZ7RvXhMP632V5lez+ch5G5SwK0LpnAPkg35eB0LPMFv+YMMQ==", - "requires": { - "@polymer/polymer": "^3.0.0" - } - }, - "@polymer/iron-scroll-target-behavior": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@polymer/iron-scroll-target-behavior/-/iron-scroll-target-behavior-3.0.1.tgz", - "integrity": "sha512-xg1WanG25BIkQE8rhuReqY9zx1K5M7F+YAIYpswEp5eyDIaZ1Y3vUmVeQ3KG+hiSugzI1M752azXN7kvyhOBcQ==", + "dev": true, "requires": { "@polymer/polymer": "^3.0.0" } @@ -14655,6 +14631,7 @@ "version": "3.5.1", "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.5.1.tgz", "integrity": "sha512-JlAHuy+1qIC6hL1ojEUfIVD58fzTpJAoCxFwV5yr0mYTXV1H8bz5zy0+rC963Cgr9iNXQ4T9ncSjC2fkF9BQfw==", + "dev": true, "requires": { "@webcomponents/shadycss": "^1.9.1" } @@ -15701,7 +15678,8 @@ "@webcomponents/shadycss": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.11.0.tgz", - "integrity": "sha512-L5O/+UPum8erOleNjKq6k58GVl3fNsEQdSOyh0EUhNmi7tHUyRuCJy1uqJiWydWcLARE5IPsMoPYMZmUGrz1JA==" + "integrity": "sha512-L5O/+UPum8erOleNjKq6k58GVl3fNsEQdSOyh0EUhNmi7tHUyRuCJy1uqJiWydWcLARE5IPsMoPYMZmUGrz1JA==", + "dev": true }, "accepts": { "version": "1.3.8", @@ -18896,7 +18874,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.1.tgz", "integrity": "sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==", - "dev": true, "requires": { "@lit/reactive-element": "^2.0.0", "lit-element": "^4.0.0", @@ -18907,7 +18884,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz", "integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==", - "dev": true, "requires": { "@types/trusted-types": "^2.0.2" } @@ -18918,7 +18894,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.3.tgz", "integrity": "sha512-2vhidmC7gGLfnVx41P8UZpzyS0Fb8wYhS5RCm16cMW3oERO0Khd3EsKwtRpOnttuByI5rURjT2dfoA7NlInCNw==", - "dev": true, "requires": { "@lit-labs/ssr-dom-shim": "^1.1.2", "@lit/reactive-element": "^2.0.0", @@ -18929,7 +18904,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz", "integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==", - "dev": true, "requires": { "@types/trusted-types": "^2.0.2" } @@ -22900,8 +22874,7 @@ "tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", - "dev": true + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "tsscmp": { "version": "1.0.6", diff --git a/package.json b/package.json index ad444c4..305fc2b 100644 --- a/package.json +++ b/package.json @@ -55,10 +55,9 @@ } }, "dependencies": { + "@lit-labs/virtualizer": "^2.0.12", "@neovici/cosmoz-utils": "^6.0.0", "@pionjs/pion": "^2.0.0", - "@polymer/iron-list": "github:Neovici/iron-list", - "@polymer/polymer": "^3.3.1", "lit-html": "^2.0.0 || ^3.0.0" }, "devDependencies": { @@ -72,6 +71,7 @@ "@polymer/paper-dropdown-menu": "^3.1.0", "@polymer/paper-item": "^3.0.0", "@polymer/paper-listbox": "^3.0.0", + "@polymer/polymer": "^3.5.1", "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.0", "husky": "^4.3.0", diff --git a/test/basic.test.js b/test/basic.test.js index a8655dd..fc68518 100644 --- a/test/basic.test.js +++ b/test/basic.test.js @@ -1,6 +1,7 @@ /* eslint-disable max-lines */ import { spy as sinonSpy } from 'sinon'; import { assert, html, fixture, nextFrame } from '@open-wc/testing'; +import { setupIgnoreWindowResizeObserverLoopErrors } from '@lit-labs/virtualizer/support/resize-observer-errors.js'; import '../cosmoz-grouped-list.js'; @@ -19,6 +20,8 @@ const renderItem = (item, index, { selected, expanded }) => html` `; suite('empty', () => { + setupIgnoreWindowResizeObserverLoopErrors(setup, teardown); + let element; setup(async () => { element = await fixture(basicHtmlFixture); @@ -115,6 +118,8 @@ suite('empty', () => { }); suite('flat data', () => { + setupIgnoreWindowResizeObserverLoopErrors(setup, teardown); + let element, items; @@ -181,6 +186,8 @@ suite('flat data', () => { }); suite('empty-groups', () => { + setupIgnoreWindowResizeObserverLoopErrors(setup, teardown); + let element; setup(async () => { element = await fixture(basicHtmlFixture); @@ -232,6 +239,8 @@ suite('empty-groups', () => { }); suite('basic', () => { + setupIgnoreWindowResizeObserverLoopErrors(setup, teardown); + let element, groups; @@ -519,6 +528,8 @@ suite('basic', () => { }); suite('compare items function', () => { + setupIgnoreWindowResizeObserverLoopErrors(setup, teardown); + let element; setup(async () => { @@ -563,21 +574,3 @@ suite('compare items function', () => { ); }); }); - -suite('update item size', () => { - test('updates item size with index from composed path', async () => { - const el = await fixture(html` - html`
id: ${ item.idex }
` } - > - `); - - await nextFrame(); - - const updateSpy = sinonSpy(el.querySelector('#list'), 'updateSizeForIndex'); - el.querySelector(`[data-id="${ 2 }"]`).dispatchEvent(new CustomEvent('update-item-size', { bubbles: true })); - assert.isTrue(updateSpy.calledOnceWith(2)); - }); -}); diff --git a/use-collapsible-items.js b/use-collapsible-items.js index f690f9e..e0f5ca3 100644 --- a/use-collapsible-items.js +++ b/use-collapsible-items.js @@ -2,35 +2,31 @@ import { useCallback } from '@pionjs/pion'; import { useWeakState } from './use-weak-state'; import { isGroup } from './utils'; -export const useCollapsibleItems = (callback, foldCallback) => { +export const useCollapsibleItems = () => { const { setItemState, state, signal } = useWeakState(), toggleFold = useCallback((item, folded) => { if (!isGroup(item)) { return; } - setItemState(item, state => ({ - folded: folded !== undefined ? folded : !state.folded + setItemState(item, (state) => ({ + folded: folded !== undefined ? folded : !state.folded, })); - - foldCallback(item); }, []), toggleCollapse = useCallback((item, collapsed) => { if (isGroup(item)) { return; } - setItemState(item, state => ({ - expanded: collapsed !== undefined ? !collapsed : !state.expanded + setItemState(item, (state) => ({ + expanded: collapsed !== undefined ? !collapsed : !state.expanded, })); - - callback(item); }, []); return { state, signal, toggleFold, - toggleCollapse + toggleCollapse, }; }; diff --git a/use-cosmoz-grouped-list.js b/use-cosmoz-grouped-list.js index 4a8e897..61bdd8b 100644 --- a/use-cosmoz-grouped-list.js +++ b/use-cosmoz-grouped-list.js @@ -1,51 +1,30 @@ -import { html } from 'lit-html'; -import { useMemo, useLayoutEffect, useCallback, useEffect } from '@pionjs/pion'; -import { prepareData, isFolded, isExpanded, byReference } from './utils'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; -import '@polymer/iron-list/iron-list.js'; -import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property'; import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api'; +import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property'; +import { useCallback, useLayoutEffect, useMemo } from '@pionjs/pion'; +import { html } from 'lit-html'; +import './cosmoz-grouped-list-row'; import { useCollapsibleItems } from './use-collapsible-items'; import { useSelectedItems } from './use-selected-items'; -import './cosmoz-grouped-list-row'; +import { byReference, isExpanded, isFolded, prepareData } from './utils'; +import { virtualize } from '@lit-labs/virtualizer/virtualize.js'; const styles = { host: { position: 'relative', display: 'flex', - flexDirection: 'column' - }, - hasScrollTargettrue: { - flex: 1, - position: 'static' + flexDirection: 'column', }, - hasScrollTargetfalse: { - flex: 'initial', - position: 'absolute', - top: 0, - right: 0, - bottom: 0, - left: 0 - } }, // eslint-disable-next-line max-lines-per-function - useCosmozGroupedList = host => { + useCosmozGroupedList = (host) => { const { data, renderItem, renderGroup, - scrollTarget, displayEmptyGroups, - compareItemsFn = byReference + compareItemsFn = byReference, } = host, - updateSize = useCallback( - item => host.querySelector('#list').updateSizeForItem(item), - [] - ), - { toggleFold, toggleCollapse, state, signal } = useCollapsibleItems( - item => requestAnimationFrame(() => updateSize(item)), - () => requestAnimationFrame(() => host.querySelector('#list')._update()) - ), + { toggleFold, toggleCollapse, state, signal } = useCollapsibleItems(), // TODO: state changes trigger recalculation, which is slow (200ms with 10k items) // it only makes sense to do it when a group is folded // suggested fix: separate signal for item collapse and group fold @@ -64,71 +43,46 @@ const styles = { selectAll, deselectAll, toggleSelect, - toggleSelectTo + toggleSelectTo, } = useSelectedItems({ initial: [], compareItemsFn, data, - flatData + flatData, }), renderRow = useCallback( (item, index) => // eslint-disable-next-line no-nested-ternary Array.isArray(item.items) ? renderGroup(item, index, { - selected: isGroupSelected(item, selectedItems), - folded: isFolded(item, state), - toggleSelect: selected => - toggleSelect( - item, - typeof selected === 'boolean' ? selected : undefined - ), - toggleFold: () => toggleFold(item) - }) + selected: isGroupSelected(item, selectedItems), + folded: isFolded(item, state), + toggleSelect: (selected) => + toggleSelect( + item, + typeof selected === 'boolean' ? selected : undefined + ), + toggleFold: () => toggleFold(item), + }) : renderItem(item, index, { - selected: selectedItems.includes(item), - expanded: isExpanded(item, state), - toggleSelect: selected => - toggleSelect( - item, - typeof selected === 'boolean' ? selected : undefined - ), - toggleCollapse: () => toggleCollapse(item) - }), + selected: selectedItems.includes(item), + expanded: isExpanded(item, state), + toggleSelect: (selected) => + toggleSelect( + item, + typeof selected === 'boolean' ? selected : undefined + ), + toggleCollapse: () => toggleCollapse(item), + }), [renderItem, renderGroup, selectedItems, toggleSelect, signal] ); useLayoutEffect(() => Object.assign(host.style, styles.host), []); - useLayoutEffect( - () => - Object.assign( - host.querySelector('#list').style, - styles['hasScrollTarget' + !!scrollTarget] - ), - [scrollTarget] - ); - - useEffect(() => { - const handler = e => { - let index = e.detail?.index; - if (index == null) { - const path = e.composedPath(); - index = path.slice(0, path.indexOf(host)) - .find(e => e.tagName.toLowerCase() === 'cosmoz-grouped-list-row')?.index; - } - if (index != null) { - host.querySelector('#list').updateSizeForIndex(index); - } - }; - host.addEventListener('update-item-size', handler); - return () => host.removeEventListener('update-item-size', handler); - }, []); useNotifyProperty('selectedItems', selectedItems); const api = { toggleFold, toggleCollapse, - updateSize, isItemSelected, isGroupSelected, isSelected, @@ -138,33 +92,24 @@ const styles = { selectAll, deselectAll, toggleSelect, - toggleSelectTo + toggleSelectTo, }; useImperativeApi(api, Object.values(api)); return { renderRow, - scrollTarget, - flatData + flatData, }; }, - renderCosmozGroupedList = ({ renderRow, flatData, scrollTarget }) => - html` - - `; + renderCosmozGroupedList = ({ renderRow, flatData }) => + virtualize({ + items: flatData, + renderItem: (item, index) => html``, + }); -export { useCosmozGroupedList, renderCosmozGroupedList }; +export { renderCosmozGroupedList, useCosmozGroupedList };