diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 9a80a73867d..18760cd0c33 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -2845,6 +2845,10 @@ export namespace Components { * When `true`, the component's drag handle is selected. */ "dragSelected": boolean; + /** + * Hides the component when filtered. + */ + "filterHidden": boolean; /** * The label text of the component. Displays above the description text. */ @@ -2902,6 +2906,10 @@ export namespace Components { * When `true`, interaction is prevented and the component is displayed with lower opacity. */ "disabled": boolean; + /** + * Hides the component when filtered. + */ + "filterHidden": boolean; /** * The header text for all nested `calcite-list-item` rows. */ @@ -10218,6 +10226,10 @@ declare namespace LocalJSX { * When `true`, the component's drag handle is selected. */ "dragSelected"?: boolean; + /** + * Hides the component when filtered. + */ + "filterHidden"?: boolean; /** * The label text of the component. Displays above the description text. */ @@ -10294,6 +10306,10 @@ declare namespace LocalJSX { * When `true`, interaction is prevented and the component is displayed with lower opacity. */ "disabled"?: boolean; + /** + * Hides the component when filtered. + */ + "filterHidden"?: boolean; /** * The header text for all nested `calcite-list-item` rows. */ diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts index 0f60c7212e8..8a9cb3773d8 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts @@ -27,6 +27,10 @@ describe("calcite-list-item-group", () => { propertyName: "disabled", defaultValue: false, }, + { + propertyName: "filterHidden", + defaultValue: false, + }, ]); }); }); diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss index 6412b93b577..6765b8b06c5 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss @@ -3,6 +3,10 @@ --calcite-list-item-spacing-indent: theme("spacing.4"); } +:host([filter-hidden]) { + @apply hidden; +} + @include disabled(); .container { diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx index ed464630cfe..5497ffea0b6 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx @@ -39,6 +39,13 @@ export class ListItemGroup implements InteractiveComponent { */ @Prop({ reflect: true }) disabled = false; + /** + * Hides the component when filtered. + * + * @internal + */ + @Prop({ reflect: true }) filterHidden = false; + /** * The header text for all nested `calcite-list-item` rows. * diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts index 19807bb05bd..d86ff8299d0 100755 --- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts +++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts @@ -52,6 +52,10 @@ describe("calcite-list-item", () => { propertyName: "dragSelected", defaultValue: false, }, + { + propertyName: "filterHidden", + defaultValue: false, + }, ]); }); diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss index 68a6a2a33a6..aee5b7569e0 100755 --- a/packages/calcite-components/src/components/list-item/list-item.scss +++ b/packages/calcite-components/src/components/list-item/list-item.scss @@ -4,6 +4,10 @@ --calcite-list-item-spacing-indent: theme("spacing.4"); } +:host([filter-hidden]) { + @apply hidden; +} + @include disabled(); .container { diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index cabbd6cb52a..cd01bb67232 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -142,6 +142,13 @@ export class ListItem */ @Prop({ mutable: true, reflect: true }) dragSelected = false; + /** + * Hides the component when filtered. + * + * @internal + */ + @Prop({ reflect: true }) filterHidden = false; + /** * The label text of the component. Displays above the description text. */ diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 767783ea07d..2f369635118 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -306,7 +306,7 @@ describe("calcite-list", () => { expect(await list.getProperty("filteredItems")).toHaveLength(3); expect(await list.getProperty("filteredData")).toHaveLength(3); - const visibleItems = await page.findAll("calcite-list-item:not([hidden])"); + const visibleItems = await page.findAll("calcite-list-item:not([filter-hidden])"); expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match", "value-match"]); }); diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts index 2ff923d2f8f..de11db9d44f 100644 --- a/packages/calcite-components/src/components/list/list.stories.ts +++ b/packages/calcite-components/src/components/list/list.stories.ts @@ -346,6 +346,18 @@ export const richContentFilterEnabled = (): string => html` `; +export const filterEnabledWithHiddenItems = (): string => html` + + + + + + + +`; + export const darkModeRTL_TestOnly = (): string => html` @@ -505,6 +517,7 @@ export const filteredChildListItems_TestOnly = (): string => selection-appearance="border" selection-mode="single" > + diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 88166c77141..c542e38b874 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -444,7 +444,7 @@ export class List mutationObserver = createObserver("mutation", () => this.updateListItems()); - openItems: HTMLCalciteListItemElement[] = []; + visibleItems: HTMLCalciteListItemElement[] = []; parentListEl: HTMLCalciteListElement; @@ -666,7 +666,7 @@ export class List }; private updateSelectedItems = (emit = false): void => { - this.selectedItems = this.openItems.filter((item) => item.selected); + this.selectedItems = this.visibleItems.filter((item) => item.selected); if (emit) { this.calciteListChange.emit(); } @@ -681,10 +681,10 @@ export class List filteredItems: HTMLCalciteListItemElement[]; visibleParents: WeakSet; }): void { - const hidden = + const filterHidden = !visibleParents.has(el) && !filteredItems.includes(el as HTMLCalciteListItemElement); - el.hidden = hidden; + el.filterHidden = filterHidden; const closestParent = el.parentElement.closest(parentSelector) as | HTMLCalciteListItemElement @@ -694,7 +694,7 @@ export class List return; } - if (!hidden) { + if (!filterHidden) { visibleParents.add(closestParent); } @@ -706,16 +706,16 @@ export class List } private updateFilteredItems = (emit = false): void => { - const { openItems, filteredData, filterText } = this; + const { visibleItems, filteredData, filterText } = this; const values = filteredData.map((item) => item.value); - const lastDescendantItems = openItems?.filter((listItem) => - openItems.every((li) => li === listItem || !listItem.contains(li)), + const lastDescendantItems = visibleItems?.filter((listItem) => + visibleItems.every((li) => li === listItem || !listItem.contains(li)), ); const filteredItems = - openItems.filter((item) => !filterText || values.includes(item.value)) || []; + visibleItems.filter((item) => !filterText || values.includes(item.value)) || []; const visibleParents = new WeakSet(); @@ -811,7 +811,7 @@ export class List this.filterEl.items = this.dataForFilter; } } - this.openItems = this.listItems.filter((item) => !item.closed); + this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden); this.updateFilteredItems(emit); this.focusableItems = this.filteredItems.filter((item) => !item.disabled); this.setActiveListItem();