From 461dd3aeae55eaec069fd29385380e8b7875ea9c Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 26 Aug 2024 20:52:21 -0700
Subject: [PATCH] refactor: fix `FunctionalComponent` return types

---
 .../components/functional/ExpandToggle.tsx    |  4 +--
 .../components/functional/FloatingArrow.tsx   |  4 +--
 .../src/components/functional/Heading.tsx     |  4 +--
 .../src/components/functional/Validation.tsx  |  4 +--
 .../src/components/functional/XButton.tsx     | 36 +++++++++----------
 .../src/components/rating/functional/star.tsx |  4 +--
 .../stepper/functional/step-bar.tsx           |  4 +--
 .../calcite-components/src/utils/form.tsx     |  4 +--
 .../src/utils/interactive.tsx                 | 18 +++++-----
 9 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/packages/calcite-components/src/components/functional/ExpandToggle.tsx b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
index b0608fbc241..d195cb139b7 100644
--- a/packages/calcite-components/src/components/functional/ExpandToggle.tsx
+++ b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
@@ -1,4 +1,4 @@
-import { FunctionalComponent, h } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { queryActions } from "../action-bar/utils";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources";
@@ -76,7 +76,7 @@ export const ExpandToggle: FunctionalComponent<ExpandToggleProps> = ({
   tooltip,
   ref,
   scale,
-}) => {
+}): VNode => {
   const rtl = getElementDir(el) === "rtl";
 
   const text = expanded ? collapseText : expandText;
diff --git a/packages/calcite-components/src/components/functional/FloatingArrow.tsx b/packages/calcite-components/src/components/functional/FloatingArrow.tsx
index 7f831272848..b2e4ca9d060 100644
--- a/packages/calcite-components/src/components/functional/FloatingArrow.tsx
+++ b/packages/calcite-components/src/components/functional/FloatingArrow.tsx
@@ -1,4 +1,4 @@
-import { FunctionalComponent, h } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { JSXAttributes } from "@stencil/core/internal";
 import { FloatingLayout } from "../../utils/floating-ui";
 
@@ -33,7 +33,7 @@ export const FloatingArrow: FunctionalComponent<FloatingArrowProps> = ({
   floatingLayout,
   key,
   ref,
-}) => {
+}): VNode => {
   const { width, height, strokeWidth } = DEFAULTS;
   const svgX = width / 2;
   const isVertical = floatingLayout === "vertical";
diff --git a/packages/calcite-components/src/components/functional/Heading.tsx b/packages/calcite-components/src/components/functional/Heading.tsx
index dbbbca673ee..e45f16f63a4 100644
--- a/packages/calcite-components/src/components/functional/Heading.tsx
+++ b/packages/calcite-components/src/components/functional/Heading.tsx
@@ -1,4 +1,4 @@
-import { FunctionalComponent, h } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { JSXBase } from "@stencil/core/internal";
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -11,7 +11,7 @@ export function constrainHeadingLevel(level: number): HeadingLevel {
   return Math.min(Math.max(Math.ceil(level), 1), 6) as HeadingLevel;
 }
 
-export const Heading: FunctionalComponent<HeadingProps> = (props, children) => {
+export const Heading: FunctionalComponent<HeadingProps> = (props, children): VNode => {
   const HeadingTag = props.level ? `h${props.level}` : "div";
 
   delete props.level;
diff --git a/packages/calcite-components/src/components/functional/Validation.tsx b/packages/calcite-components/src/components/functional/Validation.tsx
index 05d8b53636c..cae0133a2db 100644
--- a/packages/calcite-components/src/components/functional/Validation.tsx
+++ b/packages/calcite-components/src/components/functional/Validation.tsx
@@ -1,4 +1,4 @@
-import { FunctionalComponent, h } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { JSXBase } from "@stencil/core/internal";
 import { Scale, Status } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
@@ -21,7 +21,7 @@ export const Validation: FunctionalComponent<ValidationProps> = ({
   id,
   icon,
   message,
-}) => (
+}): VNode => (
   <div class={CSS.validationContainer}>
     <calcite-input-message aria-live="polite" icon={icon} id={id} scale={scale} status={status}>
       {message}
diff --git a/packages/calcite-components/src/components/functional/XButton.tsx b/packages/calcite-components/src/components/functional/XButton.tsx
index 4ba17018865..ef331fc6ed4 100644
--- a/packages/calcite-components/src/components/functional/XButton.tsx
+++ b/packages/calcite-components/src/components/functional/XButton.tsx
@@ -1,9 +1,9 @@
-import { FunctionalComponent, h } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { JSXAttributes, JSXBase } from "@stencil/core/internal";
 import { Scale } from "../interfaces";
 import { getIconScale } from "../../utils/component";
 
-export interface XButtonOptions extends JSXAttributes {
+export interface XButtonProps extends JSXAttributes {
   disabled: boolean;
   label: string;
   scale: Scale;
@@ -14,26 +14,24 @@ export const CSS = {
   button: "x-button",
 };
 
-export function XButton({
+export const XButton: FunctionalComponent<XButtonProps> = ({
   disabled,
   key,
   label,
   onClick,
   ref,
   scale,
-}: XButtonOptions): FunctionalComponent {
-  return (
-    <button
-      aria-label={label}
-      class={CSS.button}
-      disabled={disabled}
-      key={key}
-      onClick={onClick}
-      ref={ref}
-      tabIndex={-1}
-      type="button"
-    >
-      <calcite-icon icon="x" scale={getIconScale(scale)} />
-    </button>
-  );
-}
+}): VNode => (
+  <button
+    aria-label={label}
+    class={CSS.button}
+    disabled={disabled}
+    key={key}
+    onClick={onClick}
+    ref={ref}
+    tabIndex={-1}
+    type="button"
+  >
+    <calcite-icon icon="x" scale={getIconScale(scale)} />
+  </button>
+);
diff --git a/packages/calcite-components/src/components/rating/functional/star.tsx b/packages/calcite-components/src/components/rating/functional/star.tsx
index 405860e5122..c2ba2e97130 100644
--- a/packages/calcite-components/src/components/rating/functional/star.tsx
+++ b/packages/calcite-components/src/components/rating/functional/star.tsx
@@ -1,7 +1,7 @@
-import { FunctionalComponent, h } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { StarIconProps } from "../interfaces";
 
-export const StarIcon: FunctionalComponent<StarIconProps> = ({ full, scale, partial }) => (
+export const StarIcon: FunctionalComponent<StarIconProps> = ({ full, scale, partial }): VNode => (
   <calcite-icon
     {...{
       class: partial ? undefined : "icon",
diff --git a/packages/calcite-components/src/components/stepper/functional/step-bar.tsx b/packages/calcite-components/src/components/stepper/functional/step-bar.tsx
index d32e8add7fc..6ce26c5a314 100644
--- a/packages/calcite-components/src/components/stepper/functional/step-bar.tsx
+++ b/packages/calcite-components/src/components/stepper/functional/step-bar.tsx
@@ -1,4 +1,4 @@
-import { FunctionalComponent, h } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 
 interface StepBarProps {
   active: boolean;
@@ -23,7 +23,7 @@ export const StepBar: FunctionalComponent<StepBarProps> = ({
   complete,
   error,
   key,
-}) => (
+}): VNode => (
   <svg
     class={{
       [CSS.stepBar]: true,
diff --git a/packages/calcite-components/src/utils/form.tsx b/packages/calcite-components/src/utils/form.tsx
index 2154f2fb806..768dcfecfe2 100644
--- a/packages/calcite-components/src/utils/form.tsx
+++ b/packages/calcite-components/src/utils/form.tsx
@@ -1,4 +1,4 @@
-import { FunctionalComponent, h } from "@stencil/core";
+import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { Writable } from "type-fest";
 import { IconNameOrString, Status } from "../components";
 import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
@@ -597,7 +597,7 @@ interface HiddenFormInputSlotProps {
  */
 export const HiddenFormInputSlot: FunctionalComponent<HiddenFormInputSlotProps> = ({
   component,
-}) => {
+}): VNode => {
   syncHiddenFormInput(component);
 
   return <slot name={hiddenFormInputSlotName} />;
diff --git a/packages/calcite-components/src/utils/interactive.tsx b/packages/calcite-components/src/utils/interactive.tsx
index 1aebbded92a..47cd76a2202 100644
--- a/packages/calcite-components/src/utils/interactive.tsx
+++ b/packages/calcite-components/src/utils/interactive.tsx
@@ -218,7 +218,7 @@ export function disconnectInteractive(component: InteractiveComponent): void {
   restoreInteraction(component);
 }
 
-export interface InteractiveContainerOptions extends JSXAttributes {
+export interface InteractiveContainerProps extends JSXAttributes {
   disabled: boolean;
 }
 
@@ -226,13 +226,11 @@ export const CSS = {
   container: "interaction-container",
 };
 
-export function InteractiveContainer(
-  { disabled }: InteractiveContainerOptions,
+export const InteractiveContainer: FunctionalComponent<InteractiveContainerProps> = (
+  { disabled },
   children: VNode[],
-): FunctionalComponent {
-  return (
-    <div class={CSS.container} inert={disabled}>
-      {...children}
-    </div>
-  );
-}
+): VNode => (
+  <div class={CSS.container} inert={disabled}>
+    {...children}
+  </div>
+);