@recursica/mantine-adapter 0.42.1 → 0.43.0

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

package/src/components/Pagination/Pagination.tsx

@@ -9,6 +9,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  withCallerOverride,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Pagination.module.css";
@@ -42,25 +44,14 @@ function usePaginationClassNames(restRecord: Record<string, unknown>): {
   className: string;
   classNames: Partial<Record<string, string>>;
 } {
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    control: styles.control,
-    dots: styles.dots,
-  };
-
-  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.control = o.control
-      ? `${styles.control} ${o.control}`
-      : styles.control;
-    mergedClassNames.dots = o.dots ? `${styles.dots} ${o.dots}` : styles.dots;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      control: styles.control,
+      dots: styles.dots,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -80,9 +71,9 @@ const _PaginationRoot = forwardRef<HTMLDivElement, PaginationRootProps>(
     return (
       <MantinePagination.Root
         ref={ref}
+        {...(sanitizedProps as MantinePaginationRootProps)}
         className={stylingParams.className}
         classNames={stylingParams.classNames}
-        {...(sanitizedProps as MantinePaginationRootProps)}
       />
     );
   },
@@ -97,13 +88,13 @@ const _PaginationNext = forwardRef<
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
-  const renderIcon = icon || (withLabel ? NextWithLabel : undefined);
+  const computedIcon = withLabel ? NextWithLabel : undefined;
   return (
     <MantinePagination.Next
       ref={ref}
-      data-variant="text"
-      icon={renderIcon as any}
       {...sanitizedProps}
+      data-variant="text"
+      icon={withCallerOverride(computedIcon, icon) as any}
     />
   );
 });
@@ -117,13 +108,13 @@ const _PaginationPrevious = forwardRef<
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
-  const renderIcon = icon || (withLabel ? PrevWithLabel : undefined);
+  const computedIcon = withLabel ? PrevWithLabel : undefined;
   return (
     <MantinePagination.Previous
       ref={ref}
-      data-variant="text"
-      icon={renderIcon as any}
       {...sanitizedProps}
+      data-variant="text"
+      icon={withCallerOverride(computedIcon, icon) as any}
     />
   );
 });
@@ -137,13 +128,13 @@ const _PaginationFirst = forwardRef<
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
-  const renderIcon = icon || (withLabel ? FirstWithLabel : undefined);
+  const computedIcon = withLabel ? FirstWithLabel : undefined;
   return (
     <MantinePagination.First
       ref={ref}
-      data-variant="text"
-      icon={renderIcon as any}
       {...sanitizedProps}
+      data-variant="text"
+      icon={withCallerOverride(computedIcon, icon) as any}
     />
   );
 });
@@ -157,13 +148,13 @@ const _PaginationLast = forwardRef<
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
-  const renderIcon = icon || (withLabel ? LastWithLabel : undefined);
+  const computedIcon = withLabel ? LastWithLabel : undefined;
   return (
     <MantinePagination.Last
       ref={ref}
-      data-variant="text"
-      icon={renderIcon as any}
       {...sanitizedProps}
+      data-variant="text"
+      icon={withCallerOverride(computedIcon, icon) as any}
     />
   );
 });
@@ -201,11 +192,11 @@ const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
     return (
       <MantinePagination
         ref={ref}
+        {...labelsIcons}
+        {...(sanitizedProps as MantinePaginationProps)}
         className={stylingParams.className}
         classNames={stylingParams.classNames}
         getControlProps={mergedGetControlProps}
-        {...labelsIcons}
-        {...(sanitizedProps as MantinePaginationProps)}
       />
     );
   },

package/src/components/Panel/Panel.tsx

@@ -12,6 +12,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
+  withCallerOverride,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Panel.module.css";
@@ -68,38 +70,29 @@ const PanelBase = function Panel({
   ...rest
 }: PanelProps) {
   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>> = {
-    content: styles.content,
-    header: styles.header,
-    title: wrapHeaderText ? styles.titleTruncate : styles.title,
-    body: styles.body,
-    inner: styles.inner,
-  };
-
-  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(
+    {
+      content: styles.content,
+      header: styles.header,
+      title: wrapHeaderText ? styles.titleTruncate : styles.title,
+      body: styles.body,
+      inner: styles.inner,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   return (
     <MantineDrawer
+      {...(sanitizedProps as unknown as MantineDrawerProps)}
       position={placement} /* Recursica default: right; Mantine default: left */
       keepMounted={keepMounted}
-      closeOnClickOutside={rest.closeOnClickOutside ?? Boolean(rest.opened)}
-      {...(sanitizedProps as unknown as MantineDrawerProps)}
+      closeOnClickOutside={withCallerOverride(
+        Boolean(rest.opened),
+        rest.closeOnClickOutside,
+      )}
       classNames={mergedClassNames}
     />
   );
@@ -130,7 +123,7 @@ export const PanelFooter = forwardRef<HTMLDivElement, PanelFooterProps>(
       ? `${styles.footer} ${classNameProp}`
       : styles.footer;
 
-    return <div ref={ref} className={finalClassName} {...sanitizedProps} />;
+    return <div ref={ref} {...sanitizedProps} className={finalClassName} />;
   },
 );
 PanelFooter.displayName = "PanelFooter";

package/src/components/Popover/Popover.tsx

@@ -6,6 +6,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
+  withCallerOverride,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Popover.module.css";
@@ -47,54 +49,40 @@ export type PopoverProps = Omit<
 const PopoverBase = function Popover({
   overStyled = false,
   withBeak = true,
+  position = "top", // Recursica default; Mantine defaults to "bottom"
   ...rest
 }: PopoverProps) {
   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];
-      }
-    });
-  }
+  const mergedClassNames = mergeClassNames(
+    { dropdown: styles.dropdown, arrow: styles.arrow },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   // 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 arrowSize = withCallerOverride<number>(
+    16,
+    restRecord.arrowSize as number | 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;
+  const resolvedWithArrow = withCallerOverride<boolean | undefined>(
+    withBeak,
+    restRecord.withArrow as boolean | undefined,
+  );
 
   return (
     <MantinePopover
-      position="top" /* Recursica default; Mantine defaults to "bottom" */
+      {...(sanitizedProps as unknown as MantinePopoverProps)}
+      position={position}
       arrowSize={arrowSize}
       withArrow={resolvedWithArrow}
       classNames={mergedClassNames}
-      {...(sanitizedProps as unknown as MantinePopoverProps)}
     />
   );
 };
@@ -133,8 +121,8 @@ const PopoverDropdown = function PopoverDropdown({
 
   return (
     <MantinePopover.Dropdown
-      className={classNameProp}
       {...(sanitizedProps as unknown as MantinePopoverDropdownProps)}
+      className={classNameProp}
     />
   );
 };