refactor: do not use Host in functional components

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

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

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