fix(combobox, stepper, table): respect user hidden attribute

packages/calcite-components/src/assets/styles/includes.scss

@@ -97,10 +97,8 @@
 }
 
 @mixin base-component() {
-  :host([hidden]) {
-    @apply hidden;
-  }
-
+  :host([hidden]),
+  :host([hide-item]),
   [hidden] {
     @apply hidden;
   }

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

@@ -131,6 +131,12 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
    */
   @property() value: any;
 
+  /**
+   * Specifies whether the user set the hidden attribute in the HTML
+   *
+   */
+  @property() hideItem = false;
+
   // #endregion
 
   // #region Events

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -783,6 +783,56 @@ describe("calcite-combobox", () => {
     }
   });
 
+  it("should show correct number of items when child hidden", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <calcite-combobox label="custom values" allow-custom-values placeholder="placeholder" max-items="6">
+      <calcite-combobox-item value="Trees" text-label="Trees" selected>
+        <calcite-combobox-item value="Pine" text-label="Pine">
+          <calcite-combobox-item value="Pine Nested" text-label="Pine Nested"></calcite-combobox-item>
+        </calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" hide-item text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+    </calcite-combobox>
+    `);
+    await page.waitForChanges();
+
+    const element = await page.find("calcite-combobox");
+    await element.click();
+    await page.waitForChanges();
+    const items = await page.findAll("calcite-combobox-item, calcite-combobox-item-group");
+    for (let i = 0; i < items.length; i++) {
+      expect(await items[i].isIntersectingViewport()).toBe(i !== 3);
+    }
+  });
+
+  it("should show correct number of items when parent hidden", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <calcite-combobox label="custom values" allow-custom-values placeholder="placeholder" max-items="6">
+      <calcite-combobox-item value="Trees" text-label="Trees" hide-item>
+        <calcite-combobox-item value="Pine" text-label="Pine">
+          <calcite-combobox-item value="Pine Nested" text-label="Pine Nested"></calcite-combobox-item>
+        </calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+    </calcite-combobox>
+    `);
+    await page.waitForChanges();
+
+    const element = await page.find("calcite-combobox");
+    await element.click();
+    await page.waitForChanges();
+    const items = await page.findAll("calcite-combobox-item, calcite-combobox-item-group");
+    for (let i = 0; i < items.length; i++) {
+      expect(await items[i].isIntersectingViewport()).toBe(i === 5);
+    }
+  });
+
   it("should show correct max items after selection", async () => {
     const page = await newE2EPage();
     const maxItems = 6;

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -1299,7 +1299,7 @@ export class Combobox
     const items: HTMLCalciteComboboxItemElement["el"][] = Array.from(
       this.el.querySelectorAll(ComboboxItemSelector),
     );
-    return items.filter((item) => !item.disabled);
+    return items.filter((item) => !item.disabled && !item.hideItem);
   }
 
   private getGroupItems(): HTMLCalciteComboboxItemGroupElement["el"][] {

packages/calcite-components/src/components/stepper-item/stepper-item.tsx

@@ -91,6 +91,9 @@ export class StepperItem extends LitElement implements InteractiveComponent, Loa
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @property({ reflect: true }) iconFlipRtl = false;
 
+  /** When `true`, the item will be hidden */
+  @property({ reflect: true }) hideItem = false;
+
   /**
    * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.
    *
@@ -273,6 +276,7 @@ export class StepperItem extends LitElement implements InteractiveComponent, Loa
   private handleItemClick(event: MouseEvent): void {
     if (
       this.disabled ||
+      this.hideItem ||
       (this.layout === "horizontal" &&
         event
           .composedPath()
@@ -302,9 +306,9 @@ export class StepperItem extends LitElement implements InteractiveComponent, Loa
   }
 
   private getItemPosition(): number {
-    return Array.from(this.parentStepperEl?.querySelectorAll("calcite-stepper-item")).indexOf(
-      this.el,
-    );
+    return Array.from(this.parentStepperEl?.querySelectorAll("calcite-stepper-item"))
+      .filter((s) => !s.hidden && !s.hideItem)
+      .indexOf(this.el);
   }
 
   // #endregion

packages/calcite-components/src/components/stepper/stepper.e2e.ts

@@ -249,7 +249,7 @@ describe("calcite-stepper", () => {
       expect(await step4Content.isVisible()).toBe(false);
     });
 
-    it("navigates disabled items correctly with nextStep and prevStep methods", async () => {
+    it("navigates disabled and hidden items correctly with nextStep and prevStep methods", async () => {
       const page = await newE2EPage();
       await page.setContent(
         html`<calcite-stepper>
@@ -262,37 +262,48 @@ describe("calcite-stepper", () => {
           <calcite-stepper-item heading="Step 3" id="step-3">
             <div>Step 3 content</div>
           </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 4" id="step-4" hide-item>
+            <div>Step 4 content</div>
+          </calcite-stepper-item>
         </calcite-stepper>`,
       );
       const element = await page.find("calcite-stepper");
       const step1 = await page.find("#step-1");
       const step2 = await page.find("#step-2");
       const step3 = await page.find("#step-3");
+      const step4 = await page.find("#step-4");
       const step1Content = await page.find("#step-1 >>> .stepper-item-content");
       const step2Content = await page.find("#step-2 >>> .stepper-item-content");
       const step3Content = await page.find("#step-3 >>> .stepper-item-content");
+      const step4Content = await page.find("#step-4 >>> .stepper-item-content");
       expect(step1).toHaveAttribute("selected");
       expect(step2).not.toHaveAttribute("selected");
       expect(step3).not.toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");
       expect(await step1Content.isVisible()).toBe(true);
       expect(await step2Content.isVisible()).toBe(false);
       expect(await step3Content.isVisible()).toBe(false);
+      expect(await step4Content.isVisible()).toBe(false);
       await element.callMethod("nextStep");
       await page.waitForChanges();
       expect(step1).not.toHaveAttribute("selected");
       expect(step2).not.toHaveAttribute("selected");
       expect(step3).toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");
       expect(await step1Content.isVisible()).toBe(false);
       expect(await step2Content.isVisible()).toBe(false);
       expect(await step3Content.isVisible()).toBe(true);
+      expect(await step4Content.isVisible()).toBe(false);
       await element.callMethod("prevStep");
       await page.waitForChanges();
       expect(step1).toHaveAttribute("selected");
       expect(step2).not.toHaveAttribute("selected");
       expect(step3).not.toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");
       expect(await step1Content.isVisible()).toBe(true);
       expect(await step2Content.isVisible()).toBe(false);
       expect(await step3Content.isVisible()).toBe(false);
+      expect(await step4Content.isVisible()).toBe(false);
     });
 
     it("navigates correctly with startStep and endStep methods", async () => {
@@ -344,7 +355,7 @@ describe("calcite-stepper", () => {
       expect(await step4Content.isVisible()).toBe(true);
     });
 
-    it("navigates disabled items correctly with startStep and endStep methods", async () => {
+    it("navigates disabled and hidden items correctly with startStep and endStep methods", async () => {
       const page = await newE2EPage();
       await page.setContent(
         html`<calcite-stepper>
@@ -360,37 +371,46 @@ describe("calcite-stepper", () => {
           <calcite-stepper-item heading="Step 4" id="step-4" disabled>
             <div>Step 4 content</div>
           </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 5" id="step-5" hide-item>
+            <div>Step 5 content</div>
+          </calcite-stepper-item>
         </calcite-stepper>`,
       );
       const element = await page.find("calcite-stepper");
       const step1 = await page.find("#step-1");
       const step2 = await page.find("#step-2");
       const step3 = await page.find("#step-3");
       const step4 = await page.find("#step-4");
+      const step5 = await page.find("#step-5");
       const step1Content = await page.find("#step-1 >>> .stepper-item-content");
       const step2Content = await page.find("#step-2 >>> .stepper-item-content");
       const step3Content = await page.find("#step-3 >>> .stepper-item-content");
       const step4Content = await page.find("#step-4 >>> .stepper-item-content");
+      const step5Content = await page.find("#step-5 >>> .stepper-item-content");
       await element.callMethod("endStep");
       await page.waitForChanges();
       expect(step1).not.toHaveAttribute("selected");
       expect(step2).not.toHaveAttribute("selected");
       expect(step3).toHaveAttribute("selected");
       expect(step4).not.toHaveAttribute("selected");
+      expect(step5).not.toHaveAttribute("selected");
       expect(await step1Content.isVisible()).toBe(false);
       expect(await step2Content.isVisible()).toBe(false);
       expect(await step3Content.isVisible()).toBe(true);
       expect(await step4Content.isVisible()).toBe(false);
+      expect(await step5Content.isVisible()).toBe(false);
       await element.callMethod("startStep");
       await page.waitForChanges();
       expect(step1).not.toHaveAttribute("selected");
       expect(step2).toHaveAttribute("selected");
       expect(step3).not.toHaveAttribute("selected");
       expect(step4).not.toHaveAttribute("selected");
+      expect(step5).not.toHaveAttribute("selected");
       expect(await step1Content.isVisible()).toBe(false);
       expect(await step2Content.isVisible()).toBe(true);
       expect(await step3Content.isVisible()).toBe(false);
       expect(await step4Content.isVisible()).toBe(false);
+      expect(await step5Content.isVisible()).toBe(false);
     });
 
     it("navigates to requested step with goToStep method", async () => {
@@ -560,6 +580,10 @@ describe("calcite-stepper", () => {
       expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
       expect(await getSelectedItemId()).toBe("step-4");
 
+      await page.$eval("#step-5", itemClicker);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
+
       await element.callMethod("prevStep");
       await page.waitForChanges();
       expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
@@ -592,6 +616,9 @@ describe("calcite-stepper", () => {
             <calcite-stepper-item heading="Step 4" id="step-4">
               <div>Step 4 content</div>
             </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 5" id="step-5" hide-item>
+              <div>Step 5 content</div>
+            </calcite-stepper-item>
           </calcite-stepper>`,
         );
 
@@ -606,6 +633,7 @@ describe("calcite-stepper", () => {
             <calcite-stepper-item heading="Step 2" id="step-2"></calcite-stepper-item>
             <calcite-stepper-item heading="Step 3" id="step-3" disabled></calcite-stepper-item>
             <calcite-stepper-item heading="Step 4" id="step-4"></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 5" id="step-5" hide-item></calcite-stepper-item>
           </calcite-stepper>`,
         );
 
@@ -634,6 +662,9 @@ describe("calcite-stepper", () => {
             <calcite-stepper-item heading="Step 4" id="step-4">
               <div>Step 4 content</div>
             </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 5" id="step-5" hide-item>
+              <div>Step 5 content</div>
+            </calcite-stepper-item>
           </calcite-stepper>`,
         );
 
@@ -648,6 +679,7 @@ describe("calcite-stepper", () => {
             <calcite-stepper-item heading="Step 2" id="step-2"></calcite-stepper-item>
             <calcite-stepper-item heading="Step 3" id="step-3" disabled></calcite-stepper-item>
             <calcite-stepper-item heading="Step 4" id="step-4"></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 5" id="step-5" hide-item></calcite-stepper-item>
           </calcite-stepper>`,
         );
 
@@ -739,22 +771,24 @@ describe("calcite-stepper", () => {
     expect(await stepperItem3.getProperty("selected")).not.toBe(true);
   });
 
-  it("should select the next enabled stepper-item if first stepper-item is disabled", async () => {
-    const page = await newE2EPage();
-    await page.setContent(
-      html`<calcite-stepper>
-        <calcite-stepper-item heading="Step 1" id="step-1" disabled>
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2">
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`,
-    );
+  it("should select the next enabled stepper-item if first stepper-item is disabled or hidden", async () => {
+    for (const n of ["disabled", "hidden"]) {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-stepper>
+          <calcite-stepper-item heading="Step 1" id="step-1" ${n}>
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2">
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
 
-    const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
-    expect(await stepperItem1.getProperty("selected")).toBe(false);
-    expect(await stepperItem2.getProperty("selected")).toBe(true);
+      const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
+      expect(await stepperItem1.getProperty("selected")).toBe(false);
+      expect(await stepperItem2.getProperty("selected")).toBe(true);
+    }
   });
 
   describe("horizontal-single layout", () => {
@@ -843,6 +877,9 @@ describe("calcite-stepper", () => {
           <calcite-stepper-item heading="Step 2" id="step-2" disabled>
             <div>Step 2 content</div>
           </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2.1" id="step-2.1" hide-item>
+            <div>Step 2.1 content</div>
+          </calcite-stepper-item>
           <calcite-stepper-item heading="Step 3" id="step-2">
             <div>Step 3 content</div>
           </calcite-stepper-item>

packages/calcite-components/src/components/stepper/stepper.tsx

@@ -347,7 +347,7 @@ export class Stepper extends LitElement {
   }
 
   private filterItems(): StepperItem["el"][] {
-    return this.items.filter((item) => !item.disabled);
+    return this.items.filter((item) => !item.disabled && !item.hideItem);
   }
 
   private setStepperItemNumberingSystem(): void {
@@ -389,7 +389,8 @@ export class Stepper extends LitElement {
 
   private handleDefaultSlotChange(event: Event): void {
     const items = slotChangeGetAssignedElements(event).filter(
-      (el): el is StepperItem["el"] => el?.tagName === "CALCITE-STEPPER-ITEM",
+      (el): el is StepperItem["el"] =>
+        el?.tagName === "CALCITE-STEPPER-ITEM" && !(el as StepperItem["el"])?.hideItem,
     );
     this.items = items;
     const spacing = Array(items.length).fill("1fr").join(" ");

packages/calcite-components/src/components/table-row/table-row.tsx

@@ -48,6 +48,9 @@ export class TableRow extends LitElement implements InteractiveComponent {
   /** Specifies the alignment of the component. */
   @property({ reflect: true }) alignment: Alignment;
 
+  /** Specifies whether this row should be hidden */
+  @property() hideItem = false;
+
   /** @private */
   @property() bodyRowCount: number;