Type re-exports on WC autoInputs to forward the props

MillanWangGadget · MillanWangGadget · commit 6121563a9087 · 2026-02-12T18:31:17.000-05:00
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoBooleanInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoBooleanInput.tsx
@@ -1,11 +1,9 @@
-import React, { useCallback } from "react";
+import React, { type ComponentProps, useCallback } from "react";
 import { autoInput } from "../../AutoInput.js";
 import { useBooleanInputController } from "../../hooks/useBooleanInputController.js";
-import { type AutoBooleanInputProps } from "../../shared/AutoInputTypes.js";
+import type { StringOnlyLabel, AutoBooleanInputProps } from "../../shared/AutoInputTypes.js";
 
-export type PolarisWCAutoBooleanInputProps = AutoBooleanInputProps & {
-  disabled?: boolean;
-};
+export type PolarisWCAutoBooleanInputProps = StringOnlyLabel<AutoBooleanInputProps> & Partial<ComponentProps<"s-checkbox">>;
 
 /**
  * A boolean checkbox within AutoForm using Polaris Web Components.
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoDateTimePicker.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoDateTimePicker.tsx
@@ -3,9 +3,9 @@ import { isValidDate, utcToZonedTime, zonedTimeToUtc } from "../../../dateTimeUt
 import type { GadgetDateTimeConfig } from "../../../internal/gql/graphql.js";
 import { autoInput } from "../../AutoInput.js";
 import { useDateTimeField } from "../../hooks/useDateTimeField.js";
-import type { AutoDateTimeInputProps } from "../../shared/AutoInputTypes.js";
+import type { AutoDateTimeInputProps, StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 
-export interface PolarisWCAutoDateTimePickerProps extends AutoDateTimeInputProps {
+export type PolarisWCAutoDateTimePickerProps = StringOnlyLabel<AutoDateTimeInputProps> & {
   /**
    * The HTML ID of the DateTime field.
    */
@@ -14,7 +14,7 @@ export interface PolarisWCAutoDateTimePickerProps extends AutoDateTimeInputProps
    * Hides the time input.
    */
   hideTime?: boolean;
-}
+};
 
 /**
  * A date and time picker within AutoForm using Polaris Web Components.
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoEncryptedStringInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoEncryptedStringInput.tsx
@@ -1,12 +1,10 @@
-import React, { useCallback } from "react";
+import React, { type ComponentProps, useCallback } from "react";
 import { autoInput } from "../../AutoInput.js";
 import { useStringInputController } from "../../hooks/useStringInputController.js";
-import { type AutoEncryptedStringInputProps } from "../../shared/AutoInputTypes.js";
+import { type AutoEncryptedStringInputProps, type StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 
-export type PolarisWCAutoEncryptedStringInputProps = AutoEncryptedStringInputProps & {
-  placeholder?: string;
-  disabled?: boolean;
-};
+export type PolarisWCAutoEncryptedStringInputProps = StringOnlyLabel<AutoEncryptedStringInputProps> &
+  Partial<ComponentProps<"s-password-field">>;
 
 /**
  * An encrypted string input within AutoForm using Polaris Web Components.
@@ -21,7 +19,7 @@ export type PolarisWCAutoEncryptedStringInputProps = AutoEncryptedStringInputPro
  * @returns The AutoEncryptedStringInput component.
  */
 export const PolarisWCAutoEncryptedStringInput = autoInput((props: PolarisWCAutoEncryptedStringInputProps) => {
-  const { placeholder, disabled, ...restProps } = props;
+  const { placeholder, disabled, label: _label, ...restProps } = props;
   const stringInputController = useStringInputController(restProps);
 
   const handleChange = useCallback(
@@ -36,7 +34,7 @@ export const PolarisWCAutoEncryptedStringInput = autoInput((props: PolarisWCAuto
   );
 
   // Ensure label is always a string
-  const label: string = typeof props.label === "string" ? props.label : String(stringInputController.metadata.name ?? "");
+  const label: string = (props.label ?? String(stringInputController.metadata.name ?? "")) as string;
 
   return (
     <>
@@ -50,6 +48,7 @@ export const PolarisWCAutoEncryptedStringInput = autoInput((props: PolarisWCAuto
         required={stringInputController.metadata.requiredArgumentForInput}
         error={stringInputController.errorMessage}
         onChange={handleChange}
+        {...restProps}
       />
       {/* Hidden native input for form registration and testability (Cypress can type into it; WC does not sync from shadow DOM to React in tests) */}
       <input
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoEnumInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoEnumInput.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo } from "react";
 import { autoInput } from "../../AutoInput.js";
 import { useEnumInputController } from "../../hooks/useEnumInputController.js";
-import { type AutoEnumInputProps } from "../../shared/AutoInputTypes.js";
+import { type AutoEnumInputProps, type StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 import { PolarisWCDismissibleBadge } from "../commonComponents/PolarisWCDismissibleBadge.js";
 import { PolarisWCTruncatedTextWithTooltip } from "../commonComponents/PolarisWCTruncatedTextWithTooltip.js";
 import { PolarisWCCombobox, PolarisWCComboboxOption } from "./PolarisWCCombobox.js";
 
-export type PolarisWCAutoEnumInputProps = AutoEnumInputProps & {
+export type PolarisWCAutoEnumInputProps = StringOnlyLabel<AutoEnumInputProps> & {
   placeholder?: string;
   disabled?: boolean;
 };
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoFileInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoFileInput.tsx
@@ -1,12 +1,10 @@
-import React, { useCallback, useMemo } from "react";
+import React, { type ComponentProps, useCallback, useMemo } from "react";
 import { isAutoFileFieldValue } from "../../../validationSchema.js";
 import { autoInput } from "../../AutoInput.js";
 import { imageFileTypes, useFileInputController } from "../../hooks/useFileInputController.js";
-import { type AutoFileInputProps } from "../../shared/AutoInputTypes.js";
+import { type AutoFileInputProps, type StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 
-export type PolarisWCAutoFileInputProps = AutoFileInputProps & {
-  disabled?: boolean;
-};
+export type PolarisWCAutoFileInputProps = StringOnlyLabel<AutoFileInputProps> & Partial<ComponentProps<"s-drop-zone">>;
 
 /**
  * A file input within AutoForm using Polaris Web Components.
@@ -21,7 +19,7 @@ export type PolarisWCAutoFileInputProps = AutoFileInputProps & {
  * @returns The AutoFileInput component.
  */
 export const PolarisWCAutoFileInput = autoInput((props: PolarisWCAutoFileInputProps) => {
-  const { field: fieldApiIdentifier, control, disabled, ...rest } = props;
+  const { field: fieldApiIdentifier, control, disabled, label: _label, ...rest } = props;
 
   const {
     fieldProps,
@@ -82,7 +80,7 @@ export const PolarisWCAutoFileInput = autoInput((props: PolarisWCAutoFileInputPr
   }, [canClearFileValue, clearFileValue, fieldProps.value, imageThumbnailURL]);
 
   // Ensure label is always a string
-  const label: string = typeof props.label === "string" ? props.label : String(metadata.name ?? "");
+  const label: string = (props.label ?? String(metadata.name ?? "")) as string;
 
   return (
     <div style={{ position: "relative" }}>
@@ -93,6 +91,7 @@ export const PolarisWCAutoFileInput = autoInput((props: PolarisWCAutoFileInputPr
         label={label}
         error={errorMessage}
         required={metadata.requiredArgumentForInput}
+        {...rest}
       >
         {!filePreview && actionHintParts ? (
           <>
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoIdInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoIdInput.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FieldType } from "../../../metadata.js";
 import { autoInput } from "../../AutoInput.js";
 import { useStringInputController } from "../../hooks/useStringInputController.js";
-import { type AutoIdInputProps } from "../../shared/AutoInputTypes.js";
+import type { StringOnlyLabel, AutoIdInputProps } from "../../shared/AutoInputTypes.js";
 import { PolarisWCAutoTextInput } from "./PolarisWCAutoTextInput.js";
 
 /**
@@ -17,13 +17,13 @@ import { PolarisWCAutoTextInput } from "./PolarisWCAutoTextInput.js";
  * @param props.label - Label of the Id input.
  * @returns The AutoIdInput component
  */
-export const PolarisWCAutoIdInput = autoInput((props: AutoIdInputProps) => {
-  const { field, label } = props;
+export const PolarisWCAutoIdInput = autoInput((props: StringOnlyLabel<AutoIdInputProps>) => {
+  const { field, label, ...rest } = props;
   const { name, metadata } = useStringInputController({ field });
 
   if (metadata.fieldType !== FieldType.Id || field !== "id") {
     throw new Error(`PolarisWCAutoIdInput: field ${field} is not of type Id`);
   }
 
-  return <PolarisWCAutoTextInput step={1} field={field} min={1} type="number" label={label || "ID"} />;
+  return <PolarisWCAutoTextInput field={field} label={label || "ID"} min={1} step={1} type="number" {...rest} />;
 });
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoInput.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FieldType } from "../../../metadata.js";
 import { autoInput } from "../../AutoInput.js";
 import { useFieldMetadata } from "../../hooks/useFieldMetadata.js";
-import { type AutoInputProps } from "../../shared/AutoInputTypes.js";
+import { type AutoInputProps, type StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 import { PolarisWCAutoRichTextInput } from "./LazyLoadedPolarisWCAutoRichTextInput.js";
 import { PolarisWCAutoBooleanInput } from "./PolarisWCAutoBooleanInput.js";
 import { PolarisWCAutoDateTimePicker } from "./PolarisWCAutoDateTimePicker.js";
@@ -35,7 +35,7 @@ import { PolarisWCAutoHasOneInput } from "./relationships/PolarisWCAutoHasOneInp
  * @param props.label - Label of the component.
  * @returns The AutoInput component.
  */
-export const PolarisWCAutoInput = autoInput((props: AutoInputProps) => {
+export const PolarisWCAutoInput = autoInput((props: StringOnlyLabel<AutoInputProps>) => {
   const { metadata } = useFieldMetadata(props.field);
   const config = metadata.configuration;
 
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoJSONInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoJSONInput.tsx
@@ -1,14 +1,10 @@
-// import type * as PolarisTypes from "@shopify/polaris-types";
-import React, { useCallback } from "react";
+import React, { type ComponentProps, useCallback } from "react";
 import { useFocus } from "../../../useFocus.js";
 import { autoInput } from "../../AutoInput.js";
 import { useJSONInputController } from "../../hooks/useJSONInputController.js";
-import { type AutoJSONInputProps } from "../../shared/AutoInputTypes.js";
+import { type AutoJSONInputProps, type StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 
-export type PolarisWCAutoJSONInputProps = AutoJSONInputProps & {
-  placeholder?: string;
-  disabled?: boolean;
-};
+export type PolarisWCAutoJSONInputProps = StringOnlyLabel<AutoJSONInputProps> & Partial<ComponentProps<"s-text-area">>;
 
 /**
  * A JSON editor within AutoForm using Polaris Web Components.
@@ -23,7 +19,7 @@ export type PolarisWCAutoJSONInputProps = AutoJSONInputProps & {
  * @returns The AutoJSONInput component
  */
 export const PolarisWCAutoJSONInput = autoInput((props: PolarisWCAutoJSONInputProps) => {
-  const { placeholder, disabled, ...restProps } = props;
+  const { placeholder, disabled, label: _label, ...restProps } = props;
   const [isFocused, focusProps] = useFocus();
   const { type: _type, id, errorMessage, label: controllerLabel, metadata, value, onChange } = useJSONInputController(restProps);
 
@@ -36,7 +32,7 @@ export const PolarisWCAutoJSONInput = autoInput((props: PolarisWCAutoJSONInputPr
   );
 
   // Ensure label is always a string
-  const label: string = typeof props.label === "string" ? props.label : String(controllerLabel ?? "");
+  const label: string = (props.label ?? String(controllerLabel ?? "")) as string;
   const displayError = !isFocused && errorMessage ? `Invalid JSON: ${errorMessage}` : undefined;
   const { onFocus, onBlur } = focusProps;
   const handleFocus = useCallback(
@@ -66,6 +62,7 @@ export const PolarisWCAutoJSONInput = autoInput((props: PolarisWCAutoJSONInputPr
       onChange={handleChange}
       onFocus={handleFocus}
       onBlur={handleBlur}
+      {...restProps}
     />
   );
 });
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoNumberInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoNumberInput.tsx
@@ -1,13 +1,10 @@
-import React from "react";
+import React, { type ComponentProps } from "react";
 import { countNumberOfDecimals, getStepFromNumberOfDecimals } from "../../../utils.js";
 import { autoInput } from "../../AutoInput.js";
-import type { AutoNumberInputProps } from "../../shared/AutoInputTypes.js";
+import type { AutoNumberInputProps, StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 import { usePolarisWCTextInputProps } from "./PolarisWCAutoTextInput.js";
 
-export type PolarisWCAutoNumberInputProps = AutoNumberInputProps & {
-  placeholder?: string;
-  disabled?: boolean;
-};
+export type PolarisWCAutoNumberInputProps = StringOnlyLabel<AutoNumberInputProps> & Partial<ComponentProps<"s-number-field">>;
 
 /**
  * A number input within AutoForm using Polaris Web Components.
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoPasswordInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoPasswordInput.tsx
@@ -1,13 +1,11 @@
-import React from "react";
+import React, { type ComponentProps } from "react";
 import { autoInput } from "../../AutoInput.js";
 import { existingPasswordPlaceholder, usePasswordController } from "../../hooks/usePasswordController.js";
-import type { AutoPasswordInputProps } from "../../shared/AutoInputTypes.js";
+import type { AutoPasswordInputProps, StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 import { PolarisWCAutoEncryptedStringInput } from "./PolarisWCAutoEncryptedStringInput.js";
 
-export type PolarisWCAutoPasswordInputProps = AutoPasswordInputProps & {
-  placeholder?: string;
-  disabled?: boolean;
-};
+export type PolarisWCAutoPasswordInputProps = StringOnlyLabel<AutoPasswordInputProps> &
+  Partial<ComponentProps<typeof PolarisWCAutoEncryptedStringInput>>;
 
 /**
  * A password input within AutoForm using Polaris Web Components.
@@ -27,13 +25,17 @@ export const PolarisWCAutoPasswordInput = autoInput((props: PolarisWCAutoPasswor
   if (!isEditing) {
     return (
       <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
-        <PolarisWCAutoEncryptedStringInput {...props} placeholder={existingPasswordPlaceholder} disabled />
+        <PolarisWCAutoEncryptedStringInput
+          placeholder={existingPasswordPlaceholder}
+          {...props}
+          disabled={true} // must be disabled to prevent password from being shown
+        />
         <div style={{ marginBottom: "2px" }}>
           <s-button variant="tertiary" onClick={startEditing} icon="edit" {...{ role: `${props.field}EditPasswordButton` }}></s-button>
         </div>
       </div>
     );
   }
 
-  return <PolarisWCAutoEncryptedStringInput {...props} placeholder="Password" />;
+  return <PolarisWCAutoEncryptedStringInput placeholder="Password" {...props} />;
 });
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoRolesInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoRolesInput.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { autoInput } from "../../AutoInput.js";
 import { useRoleInputController } from "../../hooks/useRoleInputController.js";
-import { type AutoRolesInputProps } from "../../shared/AutoInputTypes.js";
+import { type AutoRolesInputProps, type StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 import { PolarisWCDismissibleBadge } from "../commonComponents/PolarisWCDismissibleBadge.js";
 import { PolarisWCTruncatedTextWithTooltip } from "../commonComponents/PolarisWCTruncatedTextWithTooltip.js";
 import { PolarisWCCombobox, PolarisWCComboboxOption } from "./PolarisWCCombobox.js";
 
-export type PolarisWCAutoRolesInputProps = AutoRolesInputProps & {
+export type PolarisWCAutoRolesInputProps = StringOnlyLabel<AutoRolesInputProps> & {
   placeholder?: string;
   disabled?: boolean;
 };
diff --git a/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoTextInput.tsx b/packages/react/src/auto/polaris-wc/inputs/PolarisWCAutoTextInput.tsx
@@ -1,15 +1,11 @@
-import React, { useCallback } from "react";
+import React, { type ComponentProps, useCallback } from "react";
 import { autoInput } from "../../AutoInput.js";
 import { useStringInputController } from "../../hooks/useStringInputController.js";
-import { type AutoTextInputProps } from "../../shared/AutoInputTypes.js";
+import { type AutoTextInputProps, type StringOnlyLabel } from "../../shared/AutoInputTypes.js";
 
-export type PolarisWCAutoTextInputProps = AutoTextInputProps & {
-  type?: string;
-  step?: number;
-  min?: number;
-  placeholder?: string;
-  disabled?: boolean;
-};
+export type PolarisWCAutoTextInputProps = StringOnlyLabel<AutoTextInputProps> &
+  Partial<ComponentProps<"s-text-field">> &
+  Partial<Pick<ComponentProps<"input">, "step" | "min" | "type">>;
 
 export type PolarisWCTextInputPropsParams = (
   | AutoTextInputProps
@@ -48,7 +44,7 @@ export function usePolarisWCTextInputProps(props: PolarisWCTextInputPropsParams)
     [onChange]
   );
 
-  const label: string = typeof props.label === "string" ? props.label : String(stringInputController.metadata.name ?? "");
+  const label: string = (props.label ?? String(stringInputController.metadata.name ?? "")) as string;
 
   const textFieldProps: PolarisWCTextInputPropsResult["textFieldProps"] = {
     label,
@@ -76,11 +72,12 @@ export function usePolarisWCTextInputProps(props: PolarisWCTextInputPropsParams)
  * @returns The AutoTextInput component.
  */
 export const PolarisWCAutoTextInput = autoInput((props: PolarisWCAutoTextInputProps) => {
+  const { field: _field, label: _label, control: _control, ...rest } = props;
   const { textFieldProps, stringInputController } = usePolarisWCTextInputProps(props);
 
   const finalTextFieldProps: Record<string, unknown> = { ...textFieldProps, id: stringInputController.id };
 
-  return <s-text-field {...finalTextFieldProps} autocomplete="off" />;
+  return <s-text-field {...finalTextFieldProps} autocomplete="off" {...rest} />;
 });
 
 /**
diff --git a/packages/react/src/auto/shared/AutoInputTypes.tsx b/packages/react/src/auto/shared/AutoInputTypes.tsx
@@ -195,3 +195,8 @@ export interface AutoTextInputProps extends ControllableWithReactHookForm {
    */
   afterChange?: (...event: any[]) => void;
 }
+
+/** Replaces any existing `label` prop with `label?: string`; adds it if missing. */
+export type StringOnlyLabel<T extends object> = Omit<T, "label"> & {
+  label?: string;
+};
