fix(list, list-item, list-item-group): honor hidden attribute on list-item and list-item-group

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.
          */
@@ -4526,7 +4534,7 @@ export namespace Components {
          */
         "scale": Scale;
         /**
-          * Specifies the component's selected tab-title.
+          * Specifies the component's selected `calcite-tab-title`.
           * @readonly
          */
         "selectedTitle": HTMLCalciteTabTitleElement;
@@ -4635,7 +4643,7 @@ export namespace Components {
          */
         "numberingSystem"?: NumberingSystem;
         /**
-          * Specifies the page size of the component. When `true`, renders `calcite-pagination`
+          * Specifies the page size of the component. When `true`, renders `calcite-pagination`.
          */
         "pageSize": number;
         /**
@@ -4648,7 +4656,7 @@ export namespace Components {
          */
         "selectedItems": HTMLCalciteTableRowElement[];
         /**
-          * Specifies the selection mode of the component.
+          * Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections).
          */
         "selectionMode": Extract<"none" | "multiple" | "single", SelectionMode>;
         /**
@@ -4779,11 +4787,11 @@ export namespace Components {
          */
         "layout": TabLayout;
         /**
-          * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`.
+          * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.
          */
         "position": TabPosition;
         /**
-          * Specifies the size of the component, defaults to `m`.
+          * Specifies the size of the component.
          */
         "scale": Scale;
     }
@@ -4984,7 +4992,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The selection mode of the component.  Use radio for single selection, and checkbox for multiple selections.
+          * The selection mode of the component.  Use `"radio"` for single selection, and `"checkbox"` for multiple selections.
          */
         "type": TileSelectType;
         /**
@@ -5142,7 +5150,7 @@ export namespace Components {
     interface CalciteTree {
         "child": boolean;
         /**
-          * Displays indentation guide lines.
+          * When `true`, displays indentation guide lines.
          */
         "lines": boolean;
         /**
@@ -5197,7 +5205,7 @@ export namespace Components {
      */
     interface CalciteValueList {
         /**
-          * When provided, the method will be called to determine whether the element can  move from the list.
+          * When provided, the method will be called to determine whether the element can move from the list.
          */
         "canPull": (detail: DragDetail) => boolean;
         /**
@@ -5235,7 +5243,7 @@ export namespace Components {
          */
         "filteredItems": HTMLCalciteValueListItemElement[];
         /**
-          * Returns the currently selected items
+          * Returns the component's selected items.
          */
         "getSelectedItems": () => Promise<Map<string, HTMLCalciteValueListItemElement>>;
         /**
@@ -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.
          */
@@ -11958,7 +11974,7 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
         /**
-          * Specifies the component's selected tab-title.
+          * Specifies the component's selected `calcite-tab-title`.
           * @readonly
          */
         "selectedTitle"?: HTMLCalciteTabTitleElement;
@@ -12090,7 +12106,7 @@ declare namespace LocalJSX {
          */
         "onCalciteTableSelect"?: (event: CalciteTableCustomEvent<void>) => void;
         /**
-          * Specifies the page size of the component. When `true`, renders `calcite-pagination`
+          * Specifies the page size of the component. When `true`, renders `calcite-pagination`.
          */
         "pageSize"?: number;
         /**
@@ -12103,7 +12119,7 @@ declare namespace LocalJSX {
          */
         "selectedItems"?: HTMLCalciteTableRowElement[];
         /**
-          * Specifies the selection mode of the component.
+          * Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections).
          */
         "selectionMode"?: Extract<"none" | "multiple" | "single", SelectionMode>;
         /**
@@ -12231,11 +12247,11 @@ declare namespace LocalJSX {
          */
         "layout"?: TabLayout;
         /**
-          * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`.
+          * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.
          */
         "position"?: TabPosition;
         /**
-          * Specifies the size of the component, defaults to `m`.
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
     }
@@ -12436,7 +12452,7 @@ declare namespace LocalJSX {
          */
         "onCalciteTileSelectChange"?: (event: CalciteTileSelectCustomEvent<void>) => void;
         /**
-          * The selection mode of the component.  Use radio for single selection, and checkbox for multiple selections.
+          * The selection mode of the component.  Use `"radio"` for single selection, and `"checkbox"` for multiple selections.
          */
         "type"?: TileSelectType;
         /**
@@ -12604,7 +12620,7 @@ declare namespace LocalJSX {
     interface CalciteTree {
         "child"?: boolean;
         /**
-          * Displays indentation guide lines.
+          * When `true`, displays indentation guide lines.
          */
         "lines"?: boolean;
         /**
@@ -12664,7 +12680,7 @@ declare namespace LocalJSX {
      */
     interface CalciteValueList {
         /**
-          * When provided, the method will be called to determine whether the element can  move from the list.
+          * When provided, the method will be called to determine whether the element can move from the list.
          */
         "canPull"?: (detail: DragDetail) => boolean;
         /**

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,
+      },
     ]);
   });
 });

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 {

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.
    *

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,
+      },
     ]);
   });
 

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 {

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.
    */

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"]);
   });

packages/calcite-components/src/components/list/list.stories.ts

@@ -346,6 +346,18 @@ export const richContentFilterEnabled = (): string => html`
   </calcite-list>
 `;
 
+export const filterEnabledWithHiddenItems = (): string => html`
+  <calcite-list filter-enabled>
+    <calcite-list-item-group hidden heading="Layers">
+      <calcite-list-item hidden label="Hidden item" description="I should not be displayed."> </calcite-list-item>
+    </calcite-list-item-group>
+    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom"> </calcite-list-item>
+    <calcite-list-item hidden label="Hidden item" description="I should not be displayed."> </calcite-list-item>
+    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom"> </calcite-list-item>
+    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom"> </calcite-list-item>
+  </calcite-list>
+`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-list class="calcite-mode-dark" dir="rtl" ${knobsHTML()}>
     <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
@@ -505,6 +517,7 @@ export const filteredChildListItems_TestOnly = (): string =>
       selection-appearance="border"
       selection-mode="single"
     >
+      <calcite-list-item label="Estuaries" value="estuaries" hidden></calcite-list-item>
       <calcite-list-item-group heading="Layers">
         <calcite-list-item selected label="Hiking trails" value="hiking-trails">
           <calcite-dropdown slot="actions-end" overlay-positioning="fixed" placement="bottom-end" scale="s">

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<HTMLCalciteListItemElement | HTMLCalciteListItemGroupElement>;
   }): 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<HTMLElement>();
 
@@ -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();