@recursica/mantine-adapter 0.42.1 → 0.43.0

package/src/components/Dropdown/Dropdown.tsx

@@ -6,6 +6,8 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -28,6 +30,14 @@ export interface RecursicaDropdownProps
 
 export type DropdownProps = RecursicaOverStyled<RecursicaDropdownProps>;
 
+// 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 the `size` variant + design tokens, not raw dimensions.
+  "variant", // Colors/variants are token-driven; the library's native palette isn't exposed.
+  "radius", // Recursica does not expose the library's native corner-radius system.
+] as const satisfies readonly (keyof MantineSelectProps)[];
+
 export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
   function Dropdown(props, ref) {
     const {
@@ -60,46 +70,23 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       data,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
-
     // Securely map core native blocks down ensuring nested CSS modules map precisely
-    const mergedClassNames: Partial<Record<string, string>> = {
-      wrapper: styles.root, // The nested Input internal relative wrapper bounding box
-      input: styles.input,
-      section: styles.section,
-      dropdown: styles.dropdown,
-      option: styles.option,
-    };
-
-    const classNamesProp = restRecord.classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.wrapper = o.wrapper
-        ? `${styles.root} ${o.wrapper}`
-        : styles.root;
-      mergedClassNames.input = o.input
-        ? `${styles.input} ${o.input}`
-        : styles.input;
-      mergedClassNames.section = o.section
-        ? `${styles.section} ${o.section}`
-        : styles.section;
-      mergedClassNames.dropdown = o.dropdown
-        ? `${styles.dropdown} ${o.dropdown}`
-        : styles.dropdown;
-      mergedClassNames.option = o.option
-        ? `${styles.option} ${o.option}`
-        : styles.option;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+        input: styles.input,
+        section: styles.section,
+        dropdown: styles.dropdown,
+        option: styles.option,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     const injectedStyles = {
       ...((style as React.CSSProperties) || {}),
@@ -146,6 +133,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           /* Naked Select execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
           <MantineSelect
             ref={ref}
+            {...(sanitizedProps as unknown as MantineSelectProps)}
             classNames={mergedClassNames}
             disabled={disabled}
             value={value}
@@ -169,7 +157,6 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
                 "data-error": error ? "true" : undefined,
               },
             }}
-            {...(sanitizedProps as unknown as MantineSelectProps)}
           />
         }
       />

package/src/components/FileInput/FileInput.tsx

@@ -309,6 +309,7 @@ export const FileInput = forwardRef<HTMLDivElement, FileInputProps>(
       >
         <div
           ref={ref}
+          {...restRecord}
           className={styles.root}
           role="button"
           aria-label={browseLabel}
@@ -324,7 +325,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

@@ -268,10 +268,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/HoverCard/HoverCard.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./HoverCard.module.css";
@@ -42,54 +43,37 @@ export type HoverCardProps = RecursicaOverStyled<
 const HoverCardBase = function HoverCard({
   overStyled = false,
   withBeak = true,
+  position = "top", // Recursica default; Mantine defaults to "bottom". Consumers can still override.
+  // arrowSize must be a JS number prop — Mantine uses it for inline width/height
+  // and positioning offset (-arrowSize/2) calculations that cannot be CSS-driven.
+  // Default to 16 to match the Recursica beak-size token (16px). Consumers can still override.
+  arrowSize = 16,
+  withArrow,
   ...rest
 }: HoverCardProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
   // Bind CSS module classes to Mantine's internal classNames API
-  const mergedClassNames: Partial<Record<string, string>> = {
-    dropdown: styles.dropdown,
-    arrow: styles.arrow,
-  };
-
-  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];
-      }
-    });
-  }
-
-  // arrowSize must be a JS number prop — Mantine uses it for inline width/height
-  // and positioning offset (-arrowSize/2) calculations that cannot be CSS-driven.
-  // Default to 16 to match the Recursica beak-size token (16px).
-  const arrowSize =
-    ((sanitizedProps as Record<string, unknown>).arrowSize as
-      | number
-      | undefined) ?? 16;
+  const mergedClassNames = mergeClassNames(
+    {
+      dropdown: styles.dropdown,
+      arrow: styles.arrow,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   // Resolve withBeak (Recursica) vs withArrow (Mantine).
   // withBeak takes precedence when both are provided.
-  const withArrow = (sanitizedProps as Record<string, unknown>).withArrow as
-    | boolean
-    | undefined;
   const resolvedWithArrow = withBeak ?? withArrow;
 
   return (
     <MantineHoverCard
-      position="top" /* Recursica default; Mantine defaults to "bottom" */
+      {...(sanitizedProps as unknown as MantineHoverCardProps)}
+      position={position}
       arrowSize={arrowSize}
       withArrow={resolvedWithArrow}
       classNames={mergedClassNames}
-      {...(sanitizedProps as unknown as MantineHoverCardProps)}
     />
   );
 };
@@ -128,8 +112,8 @@ const HoverCardDropdown = function HoverCardDropdown({
 
   return (
     <MantineHoverCard.Dropdown
-      className={classNameProp}
       {...(sanitizedProps as unknown as MantineHoverCardDropdownProps)}
+      className={classNameProp}
     />
   );
 };

package/src/components/Label/Label.tsx

@@ -2,6 +2,8 @@ import React, { forwardRef } from "react";
 import { Input, type InputLabelProps } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Label.module.css";
@@ -35,28 +37,25 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
     else if (labelOptionalText) resolvedOptionalText = labelOptionalText;
   }
 
-  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 label sizing via `labelSize` + design tokens, not Mantine's native `size`.
+  ] as const satisfies readonly (keyof InputLabelProps)[];
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    label: styles.root,
-    required: styles.required,
-  };
+  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.label = o.label
-      ? `${styles.root} ${o.label}`
-      : styles.root;
-    mergedClassNames.required = o.required
-      ? `${styles.required} ${o.required}`
-      : styles.required;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      label: styles.root,
+      required: styles.required,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -66,12 +65,12 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   return (
     <Input.Label
       ref={ref}
+      {...sanitizedProps}
       className={finalClass}
       classNames={mergedClassNames}
       data-size={labelSize}
       data-alignment={resolvedAlignment}
       required={required && !labelWithEditIcon}
-      {...sanitizedProps}
     >
       <span className={styles.labelText}>{children}</span>
       {resolvedOptionalText && (

package/src/components/Link/Link.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Link.module.css";
@@ -23,19 +24,10 @@ const _Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   const sanitizedProps = filterStylingProps(rest, overStyled);
   const restRecord = sanitizedProps as Record<string, unknown>;
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-  };
-
-  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;
-  }
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -45,11 +37,11 @@ const _Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   return (
     <MantineAnchor
       ref={ref}
+      {...(sanitizedProps as Record<string, unknown>)}
       className={finalClass}
       classNames={mergedClassNames}
       underline="never"
       {...(icon ? { "data-has-icon": "" } : {})}
-      {...(sanitizedProps as Record<string, unknown>)}
     >
       {icon && (
         <span className={styles.iconWrapper} aria-hidden>

package/src/components/Loader/Loader.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Loader.module.css";
@@ -33,23 +34,14 @@ export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
   // Strip all visual override injections unless developer has specifically opted into overStyling.
   // External layout props like margins are safely preserved.
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
-  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;
-  }
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
-  const classNameProp = (sanitizedProps as Record<string, unknown>)
-    .className as string | undefined;
+  const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
     ? `${styles.root} ${classNameProp}`
     : styles.root;
@@ -57,10 +49,10 @@ export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
   return (
     <MantineLoader
       ref={ref}
+      {...sanitizedProps}
       type={variant}
       data-variant={variant}
       data-size={resolvedSize}
-      {...sanitizedProps}
       className={finalClass}
       classNames={mergedClassNames}
     />

package/src/components/Menu/Menu.tsx

@@ -14,6 +14,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Menu.module.css";
@@ -46,38 +48,26 @@ export type MenuProps = RecursicaOverStyled<
 
 const MenuBase = function Menu({ overStyled = false, ...rest }: MenuProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
   // Bind CSS module classes to Mantine's internal classNames API
-  const mergedClassNames: Partial<Record<string, string>> = {
-    dropdown: styles.dropdown,
-    item: styles.item,
-    itemLabel: styles.itemLabel,
-    itemSection: styles.itemSection,
-    divider: styles.divider,
-    label: styles.label,
-    chevron: styles.chevron,
-  };
-
-  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];
-      }
-    });
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      dropdown: styles.dropdown,
+      item: styles.item,
+      itemLabel: styles.itemLabel,
+      itemSection: styles.itemSection,
+      divider: styles.divider,
+      label: styles.label,
+      chevron: styles.chevron,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   return (
     <MantineMenu
-      classNames={mergedClassNames}
       {...(sanitizedProps as unknown as MantineMenuProps)}
+      classNames={mergedClassNames}
     />
   );
 };
@@ -91,10 +81,19 @@ MenuBase.displayName = "Menu";
  * Wrapper for the element that triggers the menu.
  * Requires a single child element that supports ref forwarding.
  */
-export type MenuTargetProps = MantineMenuTargetProps;
+export type MenuTargetProps = RecursicaOverStyled<MantineMenuTargetProps>;
 
-const MenuTarget = function MenuTarget(props: MenuTargetProps) {
-  return <MantineMenu.Target {...props} />;
+const MenuTarget = function MenuTarget({
+  overStyled = false,
+  ...rest
+}: MenuTargetProps) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+
+  return (
+    <MantineMenu.Target
+      {...(sanitizedProps as unknown as MantineMenuTargetProps)}
+    />
+  );
 };
 MenuTarget.displayName = "MenuTarget";
 
@@ -113,9 +112,9 @@ const MenuDropdown = forwardRef<HTMLDivElement, MenuDropdownProps>(
 
     return (
       <MantineMenu.Dropdown
+        {...(sanitizedProps as unknown as MantineMenuDropdownProps)}
         ref={ref}
         className={classNameProp}
-        {...(sanitizedProps as unknown as MantineMenuDropdownProps)}
       />
     );
   },
@@ -129,8 +128,7 @@ MenuDropdown.displayName = "MenuDropdown";
 /**
  * An individual actionable item within the menu dropdown.
  *
- * **Note:** Mantine's `color` prop is stripped in strict mode to enforce
- * design token adherence. Use `overStyled={true}` if you need to bypass.
+ * **Note:** Mantine's `color` prop is stripped to enforce design token adherence.
  */
 export type MenuItemProps = RecursicaOverStyled<
   Omit<MantineMenuItemProps, "color">
@@ -138,21 +136,25 @@ export type MenuItemProps = RecursicaOverStyled<
 
 const _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
   function MenuItem({ overStyled = false, ...rest }, ref) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    // 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", // Colors are token-driven; the library's native palette isn't exposed.
+    ] as const satisfies readonly (keyof MantineMenuItemProps)[];
+
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Strip Mantine's `color` prop to enforce token-driven styling
-    if (!overStyled) {
-      delete restRecord["color"];
-    }
-
     const classNameProp = restRecord.className as string | undefined;
 
     return (
       <MantineMenu.Item
+        {...(sanitizedProps as unknown as MantineMenuItemProps)}
         ref={ref}
         className={classNameProp}
-        {...(sanitizedProps as unknown as MantineMenuItemProps)}
       />
     );
   },
@@ -185,9 +187,9 @@ const MenuDivider = forwardRef<HTMLHRElement, MenuDividerProps>(
 
     return (
       <MantineMenu.Divider
+        {...(sanitizedProps as unknown as MantineMenuDividerProps)}
         ref={ref}
         className={classNameProp}
-        {...(sanitizedProps as unknown as MantineMenuDividerProps)}
       />
     );
   },
@@ -211,9 +213,9 @@ const MenuLabel = forwardRef<HTMLDivElement, MenuLabelProps>(function MenuLabel(
 
   return (
     <MantineMenu.Label
+      {...(sanitizedProps as unknown as MantineMenuLabelProps)}
       ref={ref}
       className={classNameProp}
-      {...(sanitizedProps as unknown as MantineMenuLabelProps)}
     />
   );
 });
@@ -257,20 +259,25 @@ export type MenuSubItemProps = RecursicaOverStyled<
 
 const _MenuSubItem = forwardRef<HTMLButtonElement, MenuSubItemProps>(
   function MenuSubItem({ overStyled = false, ...rest }, ref) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    // 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", // Colors are token-driven; the library's native palette isn't exposed.
+    ] as const satisfies readonly (keyof MantineMenuItemProps)[];
+
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    if (!overStyled) {
-      delete restRecord["color"];
-    }
-
     const classNameProp = restRecord.className as string | undefined;
 
     return (
       <MantineMenu.Sub.Item
+        {...(sanitizedProps as unknown as MantineMenuItemProps)}
         ref={ref}
         className={classNameProp}
-        {...(sanitizedProps as unknown as MantineMenuItemProps)}
       />
     );
   },
@@ -302,9 +309,9 @@ const MenuSubDropdown = forwardRef<HTMLDivElement, MenuSubDropdownProps>(
 
     return (
       <MantineMenu.Sub.Dropdown
+        {...(sanitizedProps as unknown as MantineMenuSubDropdownProps)}
         ref={ref}
         className={classNameProp}
-        {...(sanitizedProps as unknown as MantineMenuSubDropdownProps)}
       />
     );
   },