[@mantine/styles] Fix components props with undefined value from coll…

…istions with default props (#985)

src/mantine-styles/src/theme/MantineProvider.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_THEME } from './default-theme';
 import type { MantineThemeOverride, MantineTheme } from './types';
 import type { CSSObject } from '../tss';
 import { mergeThemeWithFunctions } from './utils/merge-theme/merge-theme';
+import { filterProps } from './utils/filter-props/filter-props';
 import { NormalizeCSS } from './NormalizeCSS';
 
 type ProviderStyles = Record<
@@ -47,7 +48,7 @@ export function useMantineDefaultProps<T extends Record<string, any>>(
   props: T
 ): T {
   const contextProps = useContext(MantineProviderContext)?.defaultProps?.[component] || {};
-  return { ...defaultProps, ...contextProps, ...props };
+  return { ...defaultProps, ...contextProps, ...filterProps(props) };
 }
 
 function GlobalStyles() {

src/mantine-styles/src/theme/utils/filter-props/filter-props.test.ts

@@ -0,0 +1,22 @@
+import { filterProps } from './filter-props';
+
+describe('@mantine/styles filterProps', () => {
+  it('filters out props with undefined value', () => {
+    expect(
+      filterProps({
+        a: undefined,
+        b: null,
+        c: 0,
+        d: '',
+        e: {},
+        f: [],
+      })
+    ).toStrictEqual({
+      b: null,
+      c: 0,
+      d: '',
+      e: {},
+      f: [],
+    });
+  });
+});

src/mantine-styles/src/theme/utils/filter-props/filter-props.ts

@@ -0,0 +1,8 @@
+export function filterProps<T extends Record<string, any>>(props: T) {
+  return Object.keys(props).reduce<T>((acc, key: keyof T) => {
+    if (props[key] !== undefined) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {} as T);
+}