@recursica/mui-adapter 0.26.0 → 0.27.0

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mui-adapter"
   },
-  "version": "0.26.0",
+  "version": "0.27.0",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Autocomplete/Autocomplete.tsx

@@ -8,6 +8,8 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -77,42 +79,50 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
       ListboxProps,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
-
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+    const UNSUPPORTED_PROPS = [
+      "size", // Recursica controls sizing via design tokens, not MUI's native small/medium size
+    ] as const satisfies readonly (keyof MuiAutocompleteProps<
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any,
+      "div"
+    >)[];
 
-    // Securely map core native blocks down ensuring nested CSS modules map precisely
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      inputRoot: styles.input, // Map Mantine .input (wrapper) to MUI's inputRoot
-      listbox: styles.dropdown, // Map Mantine .dropdown to MUI's listbox
-      option: styles.option,
-    };
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
-    const classNamesProp = restRecord.classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.root = o.wrapper
-        ? `${styles.root} ${o.wrapper}`
-        : styles.root;
-      mergedClassNames.inputRoot = o.input
-        ? `${styles.input} ${o.input}`
-        : styles.input;
-      mergedClassNames.listbox = o.dropdown
-        ? `${styles.dropdown} ${o.dropdown}`
-        : styles.dropdown;
-      mergedClassNames.option = o.option
-        ? `${styles.option} ${o.option}`
-        : styles.option;
-    }
+    // Securely map core native blocks down ensuring nested CSS modules map precisely. Note MUI's
+    // actual prop is "classes", not "classNames" (that's Mantine's naming) — this used to read
+    // the wrong key, silently no-op-ing any caller-supplied classes. The caller-facing slot names
+    // below (wrapper/input/dropdown/option) mirror the mantine-adapter's own Autocomplete
+    // classNames slots, translated to MUI's real classes slot names (root/inputRoot/listbox/option).
+    const callerClasses = restRecord.classes as
+      | Partial<Record<string, string>>
+      | undefined;
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        inputRoot: styles.input, // Map Mantine .input (wrapper) to MUI's inputRoot
+        listbox: styles.dropdown, // Map Mantine .dropdown to MUI's listbox
+        option: styles.option,
+      },
+      callerClasses && {
+        root: callerClasses.wrapper,
+        inputRoot: callerClasses.input,
+        listbox: callerClasses.dropdown,
+        option: callerClasses.option,
+      },
+    );
 
     const wrapperClass = className
       ? `${styles.layoutOverride} ${className}`
@@ -148,6 +158,8 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
           /* Naked Input execution safely decoupled from Mui's macro Input.Wrapper DOM hooks */
           <MuiAutocomplete
             ref={ref}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {...(sanitizedProps as any)}
             freeSolo
             disableClearable
             classes={mergedClassNames}

package/src/components/Avatar/Avatar.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Avatar.module.css";
@@ -42,27 +43,16 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     computedStyle = "icon";
   }
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    image: styles.image,
-    placeholder: styles.placeholder,
-  };
-
-  const classNamesProp = restRecord.classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Partial<Record<string, string>>;
-    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-    mergedClassNames.image = o.image
-      ? `${styles.image} ${o.image}`
-      : styles.image;
-    mergedClassNames.placeholder = o.placeholder
-      ? `${styles.placeholder} ${o.placeholder}`
-      : styles.placeholder;
-  }
+  // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+  // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      image: styles.image,
+      placeholder: styles.placeholder,
+    },
+    restRecord.classes as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
 

package/src/components/Badge/Badge.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Badge.module.css";
@@ -24,19 +25,14 @@ const _Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   // External layout props like margins are safely preserved.
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-  };
-
-  const classNamesProp = (sanitizedProps as Record<string, unknown>).classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Partial<Record<string, string>>;
-    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-  }
+  // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+  // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Breadcrumb.module.css";
@@ -22,24 +23,17 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
       overStyled,
     );
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      separator: styles.separator,
-    };
-
-    const classNamesProp = (sanitizedProps as Record<string, unknown>)
-      .classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-      mergedClassNames.separator = o.separator
-        ? `${styles.separator} ${o.separator}`
-        : styles.separator;
-    }
+    // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+    // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        separator: styles.separator,
+      },
+      (sanitizedProps as Record<string, unknown>).classes as
+        | Partial<Record<string, string>>
+        | undefined,
+    );
 
     const classNameProp = (sanitizedProps as Record<string, unknown>)
       .className as string | undefined;

package/src/components/Button/Button.tsx

@@ -6,6 +6,8 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  withCallerOverride,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Button.module.css";
@@ -54,11 +56,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+    const UNSUPPORTED_PROPS = [
+      "color", // Recursica handles colors internally via tokens
+    ] as const satisfies readonly (keyof MuiButtonProps)[];
 
-    // Explicitly delete blocked semantic expansion dimension props that MUI uses natively
-    delete restRecord["color"]; // Recursica handles colors internally via tokens
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
     const hasStartIcon = !!icon || !!restRecord["startIcon"];
     const hasEndIcon = !!restRecord["endIcon"];
@@ -87,18 +95,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const finalClass = classNameProp
       ? `${styles.root} ${classNameProp}`
       : styles.root;
-    // className is merged explicitly above — don't let the {...sanitizedProps} spread below
-    // silently overwrite finalClass with just the caller's own class (same bug class as
-    // mui-adapter's Dropdown/BareDropdown.tsx had).
-    delete restRecord["className"];
 
     // We don't map Recursica variant/size to MUI's because we want to completely disable MUI's native
     // variant logic (e.g., elevation, shadows) and style everything strictly through our CSS Modules.
     // However, Mui Button requires some string, but we can just leave it as standard or ignore since
     // our CSS resets its properties anyway, but to be clean we just don't pass variant to MUI.
 
-    const resolvedLoaderSize =
-      loaderSize ?? (size === "small" ? "small" : "default");
+    const resolvedLoaderSize = withCallerOverride(
+      size === "small" ? "small" : "default",
+      loaderSize,
+    );
 
     let loadingIndicator = restRecord.loadingIndicator as React.ReactNode;
     if (useRecursicaLoader) {
@@ -110,6 +116,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <MuiButton
         ref={ref}
+        {...sanitizedProps}
         disableRipple
         disableElevation
         className={finalClass}
@@ -131,7 +138,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         data-size={size}
         data-content={contentType}
         {...(restRecord.loading ? { "data-loading": "true" } : {})}
-        {...sanitizedProps}
         disabled={!!restRecord.disabled || !!restRecord.loading}
       >
         <span className={styles.labelText}>{children}</span>

package/src/components/Card/Card.tsx

@@ -2,6 +2,7 @@ import { forwardRef } from "react";
 import { Card as MuiCard, type CardProps as MuiCardProps } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Card.module.css";
@@ -51,25 +52,14 @@ const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
     }
   });
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-  };
-
-  const classNamesProp = (sanitizedProps as Record<string, unknown>).classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Record<string, string>;
-    Object.keys(o).forEach((key) => {
-      if (mergedClassNames[key]) {
-        mergedClassNames[key] = `${mergedClassNames[key]} ${o[key]}`;
-      } else {
-        mergedClassNames[key] = o[key];
-      }
-    });
-  }
+  // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+  // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;

package/src/components/Checkbox/Checkbox.tsx

@@ -7,6 +7,8 @@ import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import { CheckboxGroup, CheckboxGroupContext } from "./CheckboxGroup";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import {
@@ -58,33 +60,27 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
       ...rest
     } = props;
 
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
-
-    delete restRecord["size"];
-    delete restRecord["color"];
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+    const UNSUPPORTED_PROPS = [
+      "size", // Recursica controls sizing via design tokens, not MUI's native small/medium size
+      "color", // Colors are token-driven; MUI's native palette isn't exposed
+    ] as const satisfies readonly (keyof MuiCheckboxProps)[];
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      checked: styles.checked,
-      disabled: styles.disabled,
-    };
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
-    const classesProp = restRecord.classes;
-    if (
-      classesProp &&
-      typeof classesProp === "object" &&
-      !Array.isArray(classesProp)
-    ) {
-      const o = classesProp as Partial<Record<string, string>>;
-      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-      mergedClassNames.checked = o.checked
-        ? `${styles.checked} ${o.checked}`
-        : styles.checked;
-      mergedClassNames.disabled = o.disabled
-        ? `${styles.disabled} ${o.disabled}`
-        : styles.disabled;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        checked: styles.checked,
+        disabled: styles.disabled,
+      },
+      restRecord.classes as Partial<Record<string, string>> | undefined,
+    );
 
     const classNameProp = restRecord.className as string | undefined;
     const finalClass = classNameProp
@@ -172,10 +168,10 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
     const checkboxNode = (
       <MuiCheckbox
         ref={ref}
+        {...(sanitizedProps as unknown as MuiCheckboxProps)}
         className={!label ? `${finalClass} ${styles.inner}` : styles.inner}
         classes={mergedClassNames}
         disabled={readOnly || disabled || isGroupReadOnly}
-        {...(sanitizedProps as unknown as MuiCheckboxProps)}
         {...(isControlled ? { checked: isChecked as boolean } : {})}
         onChange={handleChange}
         disableRipple

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -75,12 +75,12 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
       row,
       ...rest
     } = props;
+    // NOTE: this component's props surface (HTMLAttributes<HTMLDivElement>-based) has no native
+    // "size" (or other Recursica-unsupported) prop to leak through here — nothing to add to an
+    // UNSUPPORTED_PROPS list beyond what filterStylingProps already blocks.
     const sanitizedProps = filterStylingProps(rest, overStyled);
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Delete prohibited sizing hooks
-    delete restRecord["size"];
-
     const handleChange = (_event: React.SyntheticEvent, childValue: any) => {
       if (onChange) {
         onChange(childValue);

package/src/components/Chip/Chip.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
 import { Chip as MuiChip, type ChipProps as MuiChipProps } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Chip.module.css";
@@ -75,25 +76,17 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
   const sanitizedProps = filterStylingProps(rest, overStyled);
   const restRecord = sanitizedProps as Record<string, unknown>;
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    label: styles.label,
-    icon: styles.leadingIcon,
-    deleteIcon: styles.removeIconWrapper,
-  };
-
-  const classNamesProp = restRecord.classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Partial<Record<string, string>>;
-    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-    mergedClassNames.label = o.label
-      ? `${styles.label} ${o.label}`
-      : styles.label;
-  }
+  // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+  // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      label: styles.label,
+      icon: styles.leadingIcon,
+      deleteIcon: styles.removeIconWrapper,
+    },
+    restRecord.classes as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp

package/src/components/Dropdown/BareDropdown.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Dropdown.module.css";
@@ -52,14 +53,19 @@ export const BareDropdown = forwardRef<
     error,
     ...rest
   } = props;
-  const sanitizedProps = filterStylingProps(rest, overStyled);
-  const restRecord = sanitizedProps as Record<string, unknown>;
+  // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+  // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+  const UNSUPPORTED_PROPS = [
+    "size", // Recursica controls sizing via design tokens, not MUI's native small/medium size
+    "variant", // Recursica styles the naked select directly; MUI's standard/filled/outlined unused
+    "classes", // Recursica computes its own classes object below; caller's would silently clobber it
+  ] as const satisfies readonly (keyof MuiSelectProps)[];
 
-  delete restRecord["size"];
-  delete restRecord["variant"];
-  // className is merged explicitly below — don't let the spread further down silently overwrite
-  // styles.root with just the caller's own class.
-  delete restRecord["className"];
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled),
+    UNSUPPORTED_PROPS,
+  );
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
   const mergedClassName = className
     ? `${styles.root} ${className}`
@@ -100,6 +106,7 @@ export const BareDropdown = forwardRef<
   return (
     <MuiSelect
       ref={ref}
+      {...(sanitizedProps as unknown as MuiSelectProps)}
       disabled={disabled}
       value={value}
       defaultValue={defaultValue}
@@ -125,7 +132,6 @@ export const BareDropdown = forwardRef<
         "data-error": error ? "true" : undefined,
         ...(restRecord.inputProps as Record<string, unknown>),
       }}
-      {...(sanitizedProps as unknown as MuiSelectProps)}
     >
       {renderOptions()}
     </MuiSelect>

package/src/components/Dropdown/Dropdown.tsx

@@ -7,6 +7,7 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -73,12 +74,18 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       clearable, // Not natively supported by basic MUI Select, stubbed
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+    const UNSUPPORTED_PROPS = [
+      "size", // Recursica controls sizing via design tokens, not MUI's native small/medium size
+      "variant", // Recursica styles the naked select directly; MUI's standard/filled/outlined unused
+    ] as const satisfies readonly (keyof MuiSelectProps)[];
 
-    // Delete prohibited sizing hooks
-    delete restRecord["size"];
-    delete restRecord["variant"];
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
     const injectedStyles = {
       ...((style as React.CSSProperties) || {}),
@@ -159,6 +166,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         activeComponent={
           <MuiSelect
             ref={ref}
+            {...(sanitizedProps as unknown as MuiSelectProps)}
             disabled={disabled}
             value={value}
             defaultValue={defaultValue}
@@ -185,7 +193,6 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
               "data-error": error ? "true" : undefined,
               ...(restRecord.inputProps as Record<string, unknown>),
             }}
-            {...(sanitizedProps as unknown as MuiSelectProps)}
           >
             {renderOptions()}
           </MuiSelect>

package/src/components/FileInput/FileInput.tsx

@@ -308,6 +308,7 @@ export const FileInput = forwardRef<HTMLDivElement, FileInputProps>(
       >
         <div
           ref={ref}
+          {...restRecord}
           className={styles.root}
           role="button"
           aria-label={browseLabel}
@@ -323,7 +324,6 @@ export const FileInput = forwardRef<HTMLDivElement, FileInputProps>(
           onDragLeave={interactive ? handleDragLeave : undefined}
           onDragOver={interactive ? handleDragOver : undefined}
           onDrop={interactive ? handleDrop : undefined}
-          {...restRecord}
         >
           <span className={styles.leadingIcon} aria-hidden>
             {icon ?? <UploadIcon />}

package/src/components/FileUpload/FileUpload.tsx

@@ -267,10 +267,10 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
       >
         <div
           ref={ref}
+          {...restRecord}
           className={styles.root}
           data-disabled={disabled ? "true" : undefined}
           data-error={effectiveError ? "true" : undefined}
-          {...restRecord}
         >
           {!readOnly && (
             <div

package/src/components/FormControlLayout/FormControlLayout.tsx

@@ -32,6 +32,7 @@ export const FormControlLayout = React.forwardRef<
   return (
     <div
       ref={ref}
+      {...sanitizedProps}
       className={className ? `${styles.root} ${className}` : styles.root}
       data-form-layout={formLayout}
       style={
@@ -45,7 +46,6 @@ export const FormControlLayout = React.forwardRef<
             : {}),
         } as React.CSSProperties
       }
-      {...sanitizedProps}
     >
       {/* 
         The left section strictly enforces the Label boundary sizes 

package/src/components/FormControlWrapper/FormControlWrapper.tsx

@@ -94,6 +94,7 @@ export const FormControlWrapper = React.forwardRef<
   return (
     <FormControl
       ref={ref}
+      {...(sanitizedProps as FormControlProps)}
       error={!!error}
       required={required}
       disabled={disabled}
@@ -103,7 +104,6 @@ export const FormControlWrapper = React.forwardRef<
       data-error={error ? "true" : undefined}
       data-disabled={disabled ? "true" : undefined}
       data-focused={focused ? "true" : undefined}
-      {...(sanitizedProps as FormControlProps)}
     >
       <FormControlLayout
         formLayout={formLayout}