@recursica/mantine-adapter 0.42.1 → 0.44.0

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)}
       />
     );
   },

package/src/components/Modal/Modal.tsx

@@ -8,9 +8,12 @@ import {
   type ModalHeaderProps as MantineModalHeaderProps,
   type ModalTitleProps as MantineModalTitleProps,
   type ModalCloseButtonProps as MantineModalCloseButtonProps,
+  type ModalBodyProps as MantineModalBodyProps,
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Modal.module.css";
@@ -54,41 +57,40 @@ const ModalInner = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
   },
   ref,
 ) {
-  const sanitizedProps = filterStylingProps(rest, overStyled);
-
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    inner: styles.inner,
-    content: styles.content,
-    header: styles.header,
-    title: styles.title,
-    close: styles.close,
-  };
-
-  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];
-      }
-    });
-  }
+  // 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", // Modal width/height are enforced via CSS module tokens (min/max-width, min/max-height), not Mantine's `size` scale.
+    "radius", // Modal corner radius is token-driven via `.content` in Modal.module.css, not Mantine's `radius` prop.
+  ] as const satisfies readonly (keyof MantineModalProps)[];
+
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled) as Record<string, unknown>,
+    UNSUPPORTED_PROPS,
+  ) as Partial<typeof rest>;
+
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      inner: styles.inner,
+      content: styles.content,
+      header: styles.header,
+      title: styles.title,
+      close: styles.close,
+    },
+    (sanitizedProps as Record<string, unknown>).classNames as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   return (
     <MantineModal.Root
       ref={ref}
-      classNames={mergedClassNames}
       {...(sanitizedProps as unknown as Omit<
         MantineModalProps,
         "size" | "radius" | "shadow"
       >)}
+      classNames={mergedClassNames}
     >
       {withOverlay && <MantineModal.Overlay {...overlayProps} />}
       <MantineModal.Content>
@@ -130,81 +132,87 @@ const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(
     return (
       <div
         ref={ref}
-        className={`${styles.footer} ${className || ""}`}
         {...sanitizedProps}
+        className={`${styles.footer} ${className || ""}`}
       />
     );
   },
 );
 ModalFooter.displayName = "Modal.Footer";
 
-const ModalBody = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof MantineModal.Body>
->(function ModalBody({ className, onScroll, children, ...rest }, ref) {
-  const internalRef = React.useRef<HTMLDivElement>(null);
-  const [scrolledTop, setScrolledTop] = React.useState(false);
-  const [scrolledBottom, setScrolledBottom] = React.useState(false);
-
-  const checkScroll = React.useCallback(() => {
-    if (internalRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = internalRef.current;
-      setScrolledTop(scrollTop > 0);
-      setScrolledBottom(Math.ceil(scrollTop + clientHeight) < scrollHeight);
-    }
-  }, []);
-
-  // Re-check scroll on mount and window resize
-  React.useEffect(() => {
-    checkScroll();
-    window.addEventListener("resize", checkScroll);
-    return () => window.removeEventListener("resize", checkScroll);
-  }, [checkScroll, children]);
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    checkScroll();
-    onScroll?.(e);
-  };
-
-  // Intercept children to pull Modal.Footer out of the scrolling container
-  let footer: React.ReactNode = null;
-  const bodyChildren: React.ReactNode[] = [];
-
-  React.Children.forEach(children, (child) => {
-    if (
-      React.isValidElement(child) &&
-      (child.type === ModalFooter ||
-        (child.type as React.ComponentType)?.displayName === "Modal.Footer")
-    ) {
-      footer = child;
-    } else {
-      bodyChildren.push(child);
-    }
-  });
+export type ModalBodyProps = RecursicaOverStyled<MantineModalBodyProps>;
 
-  return (
-    <MantineModal.Body
-      {...rest}
-      ref={(node) => {
-        if (typeof ref === "function") ref(node);
-        else if (ref)
-          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
-      }}
-      className={`${styles.bodyWrapper} ${className || ""}`}
-    >
-      <div
-        ref={internalRef}
-        onScroll={handleScroll}
-        data-scrolled-top={scrolledTop || undefined}
-        data-scrolled-bottom={scrolledBottom || undefined}
-        className={styles.scrollArea}
+const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(
+  function ModalBody(
+    { overStyled = false, className, onScroll, children, ...rest },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const internalRef = React.useRef<HTMLDivElement>(null);
+    const [scrolledTop, setScrolledTop] = React.useState(false);
+    const [scrolledBottom, setScrolledBottom] = React.useState(false);
+
+    const checkScroll = React.useCallback(() => {
+      if (internalRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } = internalRef.current;
+        setScrolledTop(scrollTop > 0);
+        setScrolledBottom(Math.ceil(scrollTop + clientHeight) < scrollHeight);
+      }
+    }, []);
+
+    // Re-check scroll on mount and window resize
+    React.useEffect(() => {
+      checkScroll();
+      window.addEventListener("resize", checkScroll);
+      return () => window.removeEventListener("resize", checkScroll);
+    }, [checkScroll, children]);
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+      checkScroll();
+      onScroll?.(e);
+    };
+
+    // Intercept children to pull Modal.Footer out of the scrolling container
+    let footer: React.ReactNode = null;
+    const bodyChildren: React.ReactNode[] = [];
+
+    React.Children.forEach(children, (child) => {
+      if (
+        React.isValidElement(child) &&
+        (child.type === ModalFooter ||
+          (child.type as React.ComponentType)?.displayName === "Modal.Footer")
+      ) {
+        footer = child;
+      } else {
+        bodyChildren.push(child);
+      }
+    });
+
+    return (
+      <MantineModal.Body
+        {...sanitizedProps}
+        ref={(node) => {
+          if (typeof ref === "function") ref(node);
+          else if (ref)
+            (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+              node;
+        }}
+        className={`${styles.bodyWrapper} ${className || ""}`}
       >
-        {bodyChildren}
-      </div>
-      {footer}
-    </MantineModal.Body>
-  );
-});
+        <div
+          ref={internalRef}
+          onScroll={handleScroll}
+          data-scrolled-top={scrolledTop || undefined}
+          data-scrolled-bottom={scrolledBottom || undefined}
+          className={styles.scrollArea}
+        >
+          {bodyChildren}
+        </div>
+        {footer}
+      </MantineModal.Body>
+    );
+  },
+);
 ModalBody.displayName = "Modal.Body";
 
 // ============================================================
@@ -213,9 +221,20 @@ ModalBody.displayName = "Modal.Body";
 
 export type ModalRootProps = RecursicaOverStyled<MantineModalRootProps>;
 
+// 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. `Modal.Root` is used directly for
+// advanced composition, so it doesn't benefit from the top-level `Modal`'s `Omit<>` protection.
+const MODAL_ROOT_UNSUPPORTED_PROPS = [
+  "size", // Modal width/height are enforced via CSS module tokens, not Mantine's `size` scale.
+  "radius", // Modal corner radius is token-driven via `.content` in Modal.module.css, not Mantine's `radius` prop.
+] as const satisfies readonly (keyof MantineModalRootProps)[];
+
 const ModalRoot = React.forwardRef<HTMLDivElement, ModalRootProps>(
   function ModalRoot({ overStyled = false, ...rest }, ref) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      MODAL_ROOT_UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
     return (
       <MantineModal.Root
         ref={ref}
@@ -243,9 +262,18 @@ ModalOverlay.displayName = "Modal.Overlay";
 
 export type ModalContentProps = RecursicaOverStyled<MantineModalContentProps>;
 
+// Modal corner radius is token-driven via `.content` in Modal.module.css, not Mantine's
+// native `radius` prop — deleted at runtime so it can't leak through via plain JavaScript.
+const MODAL_CONTENT_UNSUPPORTED_PROPS = [
+  "radius",
+] as const satisfies readonly (keyof MantineModalContentProps)[];
+
 const ModalContent = React.forwardRef<HTMLDivElement, ModalContentProps>(
   function ModalContent({ overStyled = false, ...rest }, ref) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      MODAL_CONTENT_UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
     return (
       <MantineModal.Content
         ref={ref}
@@ -289,11 +317,21 @@ ModalTitle.displayName = "Modal.Title";
 export type ModalCloseButtonProps =
   RecursicaOverStyled<MantineModalCloseButtonProps>;
 
+// The close button's dimensions and corner radius are enforced by Modal.module.css's `.close`
+// (standard icon-button tokens), not Mantine's native `size`/`radius` scales.
+const MODAL_CLOSE_BUTTON_UNSUPPORTED_PROPS = [
+  "size",
+  "radius",
+] as const satisfies readonly (keyof MantineModalCloseButtonProps)[];
+
 const ModalCloseButton = React.forwardRef<
   HTMLButtonElement,
   ModalCloseButtonProps
 >(function ModalCloseButton({ overStyled = false, ...rest }, ref) {
-  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled) as Record<string, unknown>,
+    MODAL_CLOSE_BUTTON_UNSUPPORTED_PROPS,
+  ) as Partial<typeof rest>;
   return (
     <MantineModal.CloseButton
       ref={ref}

package/src/components/NumberInput/NumberInput.tsx

@@ -6,6 +6,7 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -35,6 +36,14 @@ export interface RecursicaNumberInputProps
 
 export type NumberInputProps = RecursicaOverStyled<RecursicaNumberInputProps>;
 
+// 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 MantineNumberInputProps)[];
+
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
   function NumberInput(props, ref) {
     const {
@@ -67,14 +76,12 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       ...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
@@ -120,6 +127,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
           <MantineNumberInput
             ref={ref}
+            {...(sanitizedProps as unknown as MantineNumberInputProps)}
             classNames={mergedClassNames}
             disabled={disabled}
             value={value}
@@ -139,7 +147,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
               "data-with-right-section":
                 restRecord.rightSection || !hideControls ? "true" : undefined,
             }}
-            {...(sanitizedProps as unknown as MantineNumberInputProps)}
           />
         }
       />