refactor: fix FunctionalComponent return types

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;

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";

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;

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}

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

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",

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,

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

packages/calcite-components/src/utils/interactive.tsx

@@ -218,21 +218,19 @@ export function disconnectInteractive(component: InteractiveComponent): void {
   restoreInteraction(component);
 }
 
-export interface InteractiveContainerOptions extends JSXAttributes {
+export interface InteractiveContainerProps extends JSXAttributes {
   disabled: boolean;
 }
 
 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>
+);