From aa1e9da8f662ca58f496366b900177013b9416d3 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 1 Oct 2024 10:24:18 -0700
Subject: [PATCH] fix(shell-center-row): fix rendering tied to named-slot
 content (#10451)

**Related Issue:** #6059

## Summary

- remove use of `getSlotted` utility
- replace with `slotchange` event and `@State` variables to update the
display of elements.
- existing tests should suffice
---
 .../shell-center-row/shell-center-row.e2e.ts  |  6 ++-
 .../shell-center-row/shell-center-row.tsx     | 43 +++++++------------
 2 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts b/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts
index eecce95910c..5b6beef2233 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts
@@ -39,7 +39,7 @@ describe("calcite-shell-center-row", () => {
 
     const actionBarContainer = await page.find(`calcite-shell-center-row >>> .${CSS.actionBarContainer}`);
 
-    expect(actionBarContainer).toBeNull();
+    expect(await actionBarContainer.isVisible()).toBe(false);
   });
 
   it("should render action bar container first when action bar has start position", async () => {
@@ -59,6 +59,10 @@ describe("calcite-shell-center-row", () => {
 
     await page.waitForChanges();
     expect(element).toHaveClass(CSS.actionBarContainer);
+
+    const actionBarContainer = await page.find(`calcite-shell-center-row >>> .${CSS.actionBarContainer}`);
+
+    expect(await actionBarContainer.isVisible()).toBe(true);
   });
 
   it("should render action bar container last when action bar has end position", async () => {
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 6c526f8ea27..8d6b7d17de0 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,11 +1,6 @@
-import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
-import {
-  ConditionalSlotComponent,
-  connectConditionalSlotComponent,
-  disconnectConditionalSlotComponent,
-} from "../../utils/conditionalSlot";
-import { getSlotted } from "../../utils/dom";
+import { Component, Element, Fragment, h, Prop, State, VNode } from "@stencil/core";
 import { Position, Scale } from "../interfaces";
+import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { CSS, SLOTS } from "./resources";
 
 /**
@@ -17,7 +12,7 @@ import { CSS, SLOTS } from "./resources";
   styleUrl: "shell-center-row.scss",
   shadow: true,
 })
-export class ShellCenterRow implements ConditionalSlotComponent {
+export class ShellCenterRow {
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -47,19 +42,7 @@ export class ShellCenterRow implements ConditionalSlotComponent {
 
   @Element() el: HTMLCalciteShellCenterRowElement;
 
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-
-  connectedCallback(): void {
-    connectConditionalSlotComponent(this);
-  }
-
-  disconnectedCallback(): void {
-    disconnectConditionalSlotComponent(this);
-  }
+  @State() actionBar: HTMLCalciteActionBarElement;
 
   // --------------------------------------------------------------------------
   //
@@ -68,7 +51,7 @@ export class ShellCenterRow implements ConditionalSlotComponent {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const { el } = this;
+    const { actionBar } = this;
 
     const contentNode = (
       <div class={CSS.content}>
@@ -76,13 +59,11 @@ export class ShellCenterRow implements ConditionalSlotComponent {
       </div>
     );
 
-    const actionBar = getSlotted<HTMLCalciteActionBarElement>(el, SLOTS.actionBar);
-
-    const actionBarNode = actionBar ? (
-      <div class={CSS.actionBarContainer} key="action-bar">
-        <slot name={SLOTS.actionBar} />
+    const actionBarNode = (
+      <div class={CSS.actionBarContainer} hidden={!this.actionBar} key="action-bar">
+        <slot name={SLOTS.actionBar} onSlotchange={this.handleActionBarSlotChange} />
       </div>
-    ) : null;
+    );
 
     const children: VNode[] = [actionBarNode, contentNode];
 
@@ -92,4 +73,10 @@ export class ShellCenterRow implements ConditionalSlotComponent {
 
     return <Fragment>{children}</Fragment>;
   }
+
+  private handleActionBarSlotChange = (event: Event): void => {
+    this.actionBar = slotChangeGetAssignedElements(event).filter(
+      (el): el is HTMLCalciteActionBarElement => el.matches("calcite-action-bar"),
+    )[0];
+  };
 }