@recursica/mui-adapter 0.25.0 → 0.27.0

package/src/components/Toast/Toast.tsx

@@ -7,6 +7,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Toast.module.css";
@@ -63,29 +64,19 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
   ) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      message: styles.body,
-      icon: styles.icon,
-      action: styles.closeButton,
-    };
-
-    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,
+        message: styles.body,
+        icon: styles.icon,
+        action: styles.closeButton,
+      },
+      (sanitizedProps as Record<string, unknown>).classes as
+        | Partial<Record<string, string>>
+        | undefined,
+    );
 
     const handleClose = () => {
       if (onClose) onClose();

package/src/components/Tooltip/Tooltip.module.css

@@ -1,12 +1,3 @@
-/* EXEMPTIONS:
-   - beak-inset is ignored because Tooltip positioning calculations are handled dynamically by Mantine/Floating UI at the React runtime.
-   - beak-size is ignored because Mantine's tooltip arrows compute their sizing and positional offsets
-     dynamically within the React rendering engine (requires inline pixel number rather than standard CSS variables).
-     The beak size is checked in JS against a fixed value of 16px. If this variable changes, the TSX components
-     need to be reviewed/re-compiled. */
-/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-inset = 8px */
-/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-size = 16px */
-
 /* HARDCODED VALUES:
    - border-style: solid. Structural rendering rule for the tooltip border (Mantine uses Box
      which may not set border-style natively). Same pattern as Menu / HoverCard.

package/src/components/Tooltip/Tooltip.tsx

@@ -4,6 +4,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Tooltip.module.css";
@@ -48,32 +49,18 @@ const TooltipBase = function Tooltip({
   const { title, ...restProps } = rest;
   const sanitizedProps = filterStylingProps(restProps, overStyled);
 
-  // Bind CSS module classes to Mui'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];
-      }
-    });
-  }
-
-  const withArrow = (sanitizedProps as Record<string, unknown>).withArrow as
-    | boolean
-    | undefined;
-  const resolvedWithArrow = withBeak ?? withArrow;
+  // Bind CSS module classes to Mui's internal classNames API. 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(
+    {
+      tooltip: styles.tooltip,
+      arrow: styles.arrow,
+    },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   return (
     <MuiTooltip
@@ -81,7 +68,7 @@ const TooltipBase = function Tooltip({
       title={label || title || ""}
       open={opened}
       placement="top" /* Recursica default; Mui defaults to "bottom" */
-      arrow={resolvedWithArrow}
+      arrow={withBeak}
       classes={mergedClassNames}
     />
   );

package/src/components/TransferList/TransferList.module.css

@@ -1,11 +1,3 @@
-/* EXEMPTIONS:
-   - border-size variables are ignored because a uniform 1px border is applied globally to prevent
-     unexpected layout shift or flickering during disabled/error state transitions (same exemption
-     TextArea takes). */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_border-size */
-
 /* TOKEN INTERPRETATION NOTES (see TRANSFERLIST_IMPLEMENTATION_NOTES.md):
    - `properties_gap` is applied to the row that holds [source pane, transfer buttons, target pane] —
      it's the only unnested gap the schema defines at the component's own level.

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/utils/filterStylingProps.ts

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