From 53cae990b43d66981380e0ce264cf5e596e0b9da Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Tue, 24 Sep 2024 12:10:42 -0700
Subject: [PATCH] refactor: do not use Host in functional components

Lumina does not have a `<Host>` element, but there is an equivalent
syntax.

The codemod can take care of migrating to the alternative syntax, as
long as the `<Host>` element appears in the `render()` methods.

This PR moves the `<Host>` element from the `<List>` functional
component into the parent `render()` methods.

With this change, all `<Host>` elements in Calcite's codebase are
migrated automatically.
---
 .../src/components/pick-list/pick-list.tsx    |  8 ++-
 .../pick-list/shared-list-render.tsx          | 62 +++++++------------
 .../src/components/value-list/value-list.tsx  | 12 ++--
 3 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/packages/calcite-components/src/components/pick-list/pick-list.tsx b/packages/calcite-components/src/components/pick-list/pick-list.tsx
index 5449bbf0bee..2a467744db9 100644
--- a/packages/calcite-components/src/components/pick-list/pick-list.tsx
+++ b/packages/calcite-components/src/components/pick-list/pick-list.tsx
@@ -4,6 +4,7 @@ import {
   Event,
   EventEmitter,
   h,
+  Host,
   Listen,
   Method,
   Prop,
@@ -21,6 +22,7 @@ import { createObserver } from "../../utils/observers";
 import { HeadingLevel } from "../functional/Heading";
 import type { ValueUnion } from "../types";
 import { logger } from "../../utils/logger";
+import { toAriaBoolean } from "../../utils/dom";
 import { ICON_TYPES } from "./resources";
 import {
   calciteInternalListItemValueChangeHandler,
@@ -302,6 +304,10 @@ export class PickList<
   }
 
   render(): VNode {
-    return <List onKeyDown={this.keyDownHandler} props={this} />;
+    return (
+      <Host aria-busy={toAriaBoolean(this.loading)} onKeyDown={this.keyDownHandler} role="menu">
+        <List props={this} />
+      </Host>
+    );
   }
 }
diff --git a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
index cf36af27894..a5df081cf86 100644
--- a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
+++ b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
@@ -1,6 +1,5 @@
-import { FunctionalComponent, h, Host, VNode } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { JSXBase } from "@stencil/core/internal";
-import { toAriaBoolean } from "../../utils/dom";
 import { InteractiveContainer } from "../../utils/interactive";
 import { CSS, SLOTS } from "./resources";
 import { handleFilter, handleFilterEvent } from "./shared-list-logic";
@@ -25,9 +24,7 @@ interface ListProps extends DOMAttributes {
   storeAssistiveEl?: (el: HTMLSpanElement) => void;
 }
 
-export const List: FunctionalComponent<
-  { props: ListProps } & Pick<DOMAttributes, "onBlur" | "onFocusin" | "onKeyDown">
-> = ({
+export const List: FunctionalComponent<{ props: ListProps }> = ({
   props: {
     disabled,
     loading,
@@ -40,43 +37,32 @@ export const List: FunctionalComponent<
     dragEnabled,
     storeAssistiveEl,
   },
-  onBlur,
-  onFocusin,
-  onKeyDown,
 }): VNode => {
   const defaultSlot = <slot />;
   return (
-    <Host
-      aria-busy={toAriaBoolean(loading)}
-      onBlur={onBlur}
-      onFocusin={onFocusin}
-      onKeyDown={onKeyDown}
-      role="menu"
-    >
-      <InteractiveContainer disabled={disabled}>
-        <section>
-          {dragEnabled ? (
-            <span aria-live="assertive" class="assistive-text" ref={storeAssistiveEl} />
+    <InteractiveContainer disabled={disabled}>
+      <section>
+        {dragEnabled ? (
+          <span aria-live="assertive" class="assistive-text" ref={storeAssistiveEl} />
+        ) : null}
+        <header class={{ [CSS.sticky]: true }}>
+          {filterEnabled ? (
+            <calcite-filter
+              aria-label={filterPlaceholder}
+              disabled={disabled}
+              items={dataForFilter}
+              onCalciteFilterChange={handleFilterEvent}
+              placeholder={filterPlaceholder}
+              ref={setFilterEl}
+              value={filterText}
+            />
           ) : null}
-          <header class={{ [CSS.sticky]: true }}>
-            {filterEnabled ? (
-              <calcite-filter
-                aria-label={filterPlaceholder}
-                disabled={disabled}
-                items={dataForFilter}
-                onCalciteFilterChange={handleFilterEvent}
-                placeholder={filterPlaceholder}
-                ref={setFilterEl}
-                value={filterText}
-              />
-            ) : null}
-            <slot name={SLOTS.menuActions} />
-          </header>
-          {loading ? <calcite-scrim loading={loading} /> : null}
-          {defaultSlot}
-        </section>
-      </InteractiveContainer>
-    </Host>
+          <slot name={SLOTS.menuActions} />
+        </header>
+        {loading ? <calcite-scrim loading={loading} /> : null}
+        {defaultSlot}
+      </section>
+    </InteractiveContainer>
   );
 };
 
diff --git a/packages/calcite-components/src/components/value-list/value-list.tsx b/packages/calcite-components/src/components/value-list/value-list.tsx
index e219543dba7..9bd7dfb1def 100644
--- a/packages/calcite-components/src/components/value-list/value-list.tsx
+++ b/packages/calcite-components/src/components/value-list/value-list.tsx
@@ -4,6 +4,7 @@ import {
   Event,
   EventEmitter,
   h,
+  Host,
   Listen,
   Method,
   Prop,
@@ -59,7 +60,7 @@ import {
   disconnectSortableComponent,
   SortableComponent,
 } from "../../utils/sortableComponent";
-import { focusElement } from "../../utils/dom";
+import { focusElement, toAriaBoolean } from "../../utils/dom";
 import { logger } from "../../utils/logger";
 import { ValueListMessages } from "./assets/value-list/t9n";
 import { CSS, ICON_TYPES } from "./resources";
@@ -511,12 +512,15 @@ export class ValueList<
 
   render(): VNode {
     return (
-      <List
+      <Host
+        aria-busy={toAriaBoolean(this.loading)}
         onBlur={this.handleBlur}
         onFocusin={this.handleFocusIn}
         onKeyDown={this.keyDownHandler}
-        props={this}
-      />
+        role="menu"
+      >
+        <List props={this} />
+      </Host>
     );
   }
 }