@recursica/mantine-adapter 0.42.1 → 0.44.0

package/src/components/Toast/Toast.tsx

@@ -5,6 +5,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Toast.module.css";
@@ -31,48 +33,47 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     },
     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 via `data-variant`; Mantine's native palette isn't exposed.
+      "radius", // Toast corner radius is controlled by design tokens, not a raw radius prop.
+      "loading", // Toast never renders a loading state; always forced off via `loading={false}` below.
+    ] as const satisfies readonly (keyof MantineNotificationProps)[];
 
-    // Bind CSS module classes to Mantine's internal classNames API
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      body: styles.body,
-      title: styles.title,
-      description: styles.description,
-      closeButton: styles.closeButton,
-      icon: styles.icon,
-      loader: styles.loader,
-    };
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
 
-    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];
-        }
-      });
-    }
+    // Bind CSS module classes to Mantine's internal classNames API
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        body: styles.body,
+        title: styles.title,
+        description: styles.description,
+        closeButton: styles.closeButton,
+        icon: styles.icon,
+        loader: styles.loader,
+      },
+      (sanitizedProps as Record<string, unknown>).classNames as
+        | Partial<Record<string, string>>
+        | undefined,
+    );
 
     return (
       <MantineNotification
         ref={ref}
+        {...(sanitizedProps as unknown as Omit<
+          MantineNotificationProps,
+          "color" | "radius" | "variant" | "loading"
+        >)}
         withCloseButton={withCloseButton}
         withBorder={false} // Border is handled via CSS or tokens if needed
         data-variant={variant}
         classNames={mergedClassNames}
         loading={false}
-        {...(sanitizedProps as unknown as Omit<
-          MantineNotificationProps,
-          "color" | "radius" | "variant" | "loading"
-        >)}
       />
     );
   },

package/src/components/Tooltip/Tooltip.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Tooltip.module.css";
@@ -43,55 +44,38 @@ export type TooltipProps = RecursicaOverStyled<
 const TooltipBase = function Tooltip({
   overStyled = false,
   withBeak = true,
+  position = "top", // Recursica default; Mantine defaults to "bottom"
+  // 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).
+  arrowSize = 16,
   ...rest
 }: TooltipProps) {
   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>> = {
-    tooltip: styles.tooltip,
-    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(
+    {
+      tooltip: styles.tooltip,
+      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 withArrow = restRecord.withArrow as boolean | undefined;
   const resolvedWithArrow = withBeak ?? withArrow;
 
   return (
     <MantineTooltip
-      position="top" /* Recursica default; Mantine defaults to "bottom" */
-      multiline /* Always allow text wrapping within max-width */
+      {...(sanitizedProps as unknown as MantineTooltipProps)}
+      position={position}
       arrowSize={arrowSize}
       withArrow={resolvedWithArrow}
+      multiline /* Always allow text wrapping within max-width */
       classNames={mergedClassNames}
-      {...(sanitizedProps as unknown as MantineTooltipProps)}
     />
   );
 };

package/src/components/TransferList/TransferList.tsx

@@ -346,10 +346,10 @@ export const TransferList = forwardRef<HTMLDivElement, TransferListProps>(
         readOnlyNativeProps={props}
         activeComponent={
           <div
+            {...(sanitizedProps as Record<string, unknown>)}
             className={styles.root}
             data-disabled={disabled ? "true" : undefined}
             data-error={error ? "true" : undefined}
-            {...(sanitizedProps as Record<string, unknown>)}
           >
             <div className={styles.panes}>
               {renderPane(

package/src/components/Tree/Tree.tsx

@@ -8,6 +8,7 @@ import {
 import { useMergedRef } from "@mantine/hooks";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaTreeProps } from "@recursica/adapter-common";
@@ -186,8 +187,8 @@ export const Tree = forwardRef<HTMLUListElement, TreeProps>(function Tree(
   }, [disabled]);
   const mergedRef = useMergedRef(ref, rootRef);
 
-  const classNameProp = (sanitizedProps as Record<string, unknown>)
-    .className as string | undefined;
+  const restRecord = sanitizedProps as Record<string, unknown>;
+  const classNameProp = restRecord.className as string | undefined;
   const rootClass = classNameProp
     ? `${styles.root} ${classNameProp}`
     : styles.root;
@@ -195,6 +196,7 @@ export const Tree = forwardRef<HTMLUListElement, TreeProps>(function Tree(
   return (
     <MantineTree
       ref={mergedRef}
+      {...(sanitizedProps as unknown as Record<string, unknown>)}
       data={data}
       tree={tree}
       expandOnClick={false}
@@ -202,12 +204,10 @@ export const Tree = forwardRef<HTMLUListElement, TreeProps>(function Tree(
       expandOnSpace={false}
       renderNode={createRenderTreeNode(disabled)}
       data-disabled={disabled || undefined}
-      classNames={{
-        root: rootClass,
-        node: styles.node,
-        subtree: styles.subtree,
-      }}
-      {...(sanitizedProps as unknown as Record<string, unknown>)}
+      classNames={mergeClassNames(
+        { root: rootClass, node: styles.node, subtree: styles.subtree },
+        restRecord.classNames as Partial<Record<string, string>> | undefined,
+      )}
     />
   );
 });

package/src/utils/filterStylingProps.ts

@@ -67,6 +67,10 @@ export {
   type BlockedStylingKeys,
   type ForbiddenStyles,
   type WithRecursicaSpacing,
+  omitUnsupportedProps,
+  withCallerOverride,
+  mergeClassNames,
+  mergeStyles,
 } from "@recursica/adapter-common";
 
 const LAYOUT_PROPS = new Set([