Fix default props not being transformed

brandonscript · brandonscript · commit bf3c3ec867c4 · 2025-10-19T20:06:34.000-07:00
diff --git a/demos/shared/package.json b/demos/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-shared",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "Shared components for mui-flexy demos",
   "private": true,
   "dependencies": {
diff --git a/demos/v5/dist/bundle.js b/demos/v5/dist/bundle.js
diff --git a/demos/v5/package.json b/demos/v5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v5",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "Demo server for mui-flexy v5",
   "private": true,
   "scripts": {
diff --git a/demos/v6/dist/bundle.js b/demos/v6/dist/bundle.js
diff --git a/demos/v6/package.json b/demos/v6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v6",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "Demo server for mui-flexy v6",
   "private": true,
   "scripts": {
diff --git a/demos/v7/dist/bundle.js b/demos/v7/dist/bundle.js
diff --git a/demos/v7/package.json b/demos/v7/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v7",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "Demo server for mui-flexy v7",
   "private": true,
   "scripts": {
diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-docs",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "Documentation for mui-flexy",
   "private": true,
   "type": "module",
diff --git a/docs/static/v5.js b/docs/static/v5.js
@@ -321,8 +321,10 @@ const verifyGridSizeProps = (props, gridVersion)=>{
 // @ts-ignore
 const MuiBox = _MuiBox?.default ?? _MuiBox;
 const createFlexBox = (defaultProps = {})=>/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(MuiBox, {
-            ...defaultProps,
-            ...mapFlexProps(props, ref, "Box")
+            ...mapFlexProps({
+                ...defaultProps,
+                ...props
+            }, ref, "Box")
         }));
 const FlexBox = createFlexBox();
 const FlexRowBox = createFlexBox({
@@ -332,14 +334,14 @@ const FlexColumnBox = createFlexBox({
     column: true
 });
 
-const createFlexGrid = (defaultProps = {})=>{
-    return /*#__PURE__*/ forwardRef((props, ref)=>{
+const createFlexGrid = (defaultProps = {})=>/*#__PURE__*/ forwardRef((props, ref)=>{
         return /*#__PURE__*/ jsx(Grid, {
-            ...defaultProps,
-            ...mapFlexProps(verifyGridSizeProps(props, "legacy"), ref, "Grid")
+            ...mapFlexProps(verifyGridSizeProps({
+                ...defaultProps,
+                ...props
+            }, "legacy"), ref, "Grid")
         });
     });
-};
 const FlexGrid = createFlexGrid();
 const FlexGridRow = createFlexGrid({
     row: true
diff --git a/docs/static/v6.js b/docs/static/v6.js
@@ -325,8 +325,10 @@ const verifyGridSizeProps = (props, gridVersion)=>{
 // @ts-ignore
 const MuiBox = _MuiBox?.default ?? _MuiBox;
 const createFlexBox = (defaultProps = {})=>/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(MuiBox, {
-            ...defaultProps,
-            ...mapFlexProps(props, ref, "Box")
+            ...mapFlexProps({
+                ...defaultProps,
+                ...props
+            }, ref, "Box")
         }));
 const FlexBox = createFlexBox();
 const FlexRowBox = createFlexBox({
@@ -336,14 +338,12 @@ const FlexColumnBox = createFlexBox({
     column: true
 });
 
-const createFlexGrid = (defaultProps = {})=>{
-    return /*#__PURE__*/ forwardRef((props, ref)=>{
-        return /*#__PURE__*/ jsx(Grid, {
-            ...defaultProps,
-            ...mapFlexProps(verifyGridSizeProps(props, "legacy"), ref, "Grid")
-        });
-    });
-};
+const createFlexGrid = (defaultProps = {})=>/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Grid, {
+            ...mapFlexProps(verifyGridSizeProps({
+                ...defaultProps,
+                ...props
+            }, "legacy"), ref, "Grid")
+        }));
 const FlexGrid = createFlexGrid();
 const FlexGridRow = createFlexGrid({
     row: true
diff --git a/docs/static/v7.js b/docs/static/v7.js
@@ -321,8 +321,10 @@ const verifyGridSizeProps = (props, gridVersion)=>{
 // @ts-ignore
 const MuiBox = _MuiBox?.default ?? _MuiBox;
 const createFlexBox = (defaultProps = {})=>/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(MuiBox, {
-            ...defaultProps,
-            ...mapFlexProps(props, ref, "Box")
+            ...mapFlexProps({
+                ...defaultProps,
+                ...props
+            }, ref, "Box")
         }));
 const FlexBox = createFlexBox();
 const FlexRowBox = createFlexBox({
@@ -332,14 +334,12 @@ const FlexColumnBox = createFlexBox({
     column: true
 });
 
-const createFlexGrid = (defaultProps = {})=>{
-    return /*#__PURE__*/ forwardRef((props, ref)=>{
-        return /*#__PURE__*/ jsx(Grid, {
-            ...defaultProps,
-            ...mapFlexProps(verifyGridSizeProps(props, "new"), ref, "Grid2")
-        });
-    });
-};
+const createFlexGrid = (defaultProps = {})=>/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Grid, {
+            ...mapFlexProps(verifyGridSizeProps({
+                ...defaultProps,
+                ...props
+            }, "new"), ref, "Grid2")
+        }));
 const FlexGridRow = createFlexGrid({
     row: true
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "A flexbox convenience component for Material UI Box and Grid with handy shorthand props",
   "keywords": [
     "react",
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/core",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "Core utilities and types for mui-flexy",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/v5/package.json b/packages/v5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/v5",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "A flexbox convenience component for Material UI v5 Box and Grid with handy shorthand props",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/v5/src/FlexBox.tsx b/packages/v5/src/FlexBox.tsx
@@ -35,7 +35,7 @@ const createFlexBox = <
   defaultProps: FlexBoxProps<O, D, P> = {} as FlexBoxProps<O, D, P>,
 ) =>
   forwardRef<BoxProps["ref"], FlexBoxProps<O, D, P>>((props, ref) => (
-    <MuiBox {...defaultProps} {...mapFlexProps(props, ref, "Box")} />
+    <MuiBox {...mapFlexProps({ ...defaultProps, ...props } as FlexBoxProps<O, D, P>, ref, "Box")} />
   )) as R;
 export const FlexBox = createFlexBox();
 export const FlexRowBox = createFlexBox<"row">({ row: true });
diff --git a/packages/v5/src/FlexGrid.tsx b/packages/v5/src/FlexGrid.tsx
@@ -14,11 +14,18 @@ export const createFlexGrid = <
   P = {},
 >(
   defaultProps: FlexGridProps<O, D, P> = {} as FlexGridProps<O, D, P>,
-) => {
-  return forwardRef<GridProps["ref"], FlexGridProps<O, D, P>>((props, ref) => {
-    return <Grid {...defaultProps} {...mapFlexProps(verifyGridSizeProps(props, "legacy"), ref, "Grid")} />;
+) =>
+  forwardRef<GridProps["ref"], FlexGridProps<O, D, P>>((props, ref) => {
+    return (
+      <Grid
+        {...mapFlexProps(
+          verifyGridSizeProps({ ...defaultProps, ...props } as FlexGridProps<O, D, P>, "legacy"),
+          ref,
+          "Grid",
+        )}
+      />
+    );
   }) as OverridableComponent<FlexGridTypeMap<O, P, D>>;
-};
 export const FlexGrid = createFlexGrid();
 export const FlexGridRow = createFlexGrid<"row">({ row: true });
 export const FlexGridColumn = createFlexGrid<"column">({ column: true });
diff --git a/packages/v5/src/FlexGrid.types.ts b/packages/v5/src/FlexGrid.types.ts
@@ -1,7 +1,5 @@
-import type { GridOwnProps } from "@mui/material/Grid";
+import type { GridOwnProps } from "@mui/material/Grid/Grid";
 import type { OverrideProps } from "@mui/material/OverridableComponent";
-import type { Theme as MaterialTheme } from "@mui/material/styles";
-import type { SxProps } from "@mui/system/styleFunctionSx/styleFunctionSx";
 import {
   type FlexColumnProps,
   type FlexOrientation,
@@ -11,6 +9,12 @@ import {
   type OnlyRow,
 } from "@mui-flexy/core";
 
+type FlexGridOrientationProps<O extends FlexOrientation | undefined> = O extends "row"
+  ? OnlyRow<FlexRowProps>
+  : O extends "column"
+    ? OnlyColumn<FlexColumnProps>
+    : InferFlexProps;
+
 /**
  * @deprecated Grid will be replaced in MUI v7 (see [`Grid2`](https://mui.com/material-ui/react-grid2/)).
  */
@@ -19,13 +23,19 @@ export interface FlexGridTypeMap<
   P = {},
   D extends React.ElementType = "div",
 > {
-  props: P &
-    GridOwnProps & {
-      sx?: SxProps<MaterialTheme>;
-    } & (O extends "row" ? FlexRowProps : O extends "column" ? FlexColumnProps : InferFlexProps);
+  props: P & GridOwnProps & FlexGridOrientationProps<O>;
   defaultComponent: D;
 }
 
+export type FlexGridFixedOrientationTypeMap<
+  O extends FlexOrientation,
+  P = {},
+  D extends React.ElementType = FlexGridTypeMap<O, P>["defaultComponent"],
+> = {
+  props: Omit<FlexGridTypeMap<O, P, D>["props"], "row" | "column">;
+  defaultComponent: FlexGridTypeMap<O, P, D>["defaultComponent"];
+};
+
 /**
  * @deprecated Grid will be replaced in MUI v7 (see [`Grid2`](https://mui.com/material-ui/react-grid2/)).
  */
diff --git a/packages/v6/package.json b/packages/v6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/v6",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "A flexbox convenience component for Material UI v6 Box and Grid with handy shorthand props",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/v6/src/FlexBox.tsx b/packages/v6/src/FlexBox.tsx
@@ -35,7 +35,7 @@ const createFlexBox = <
   defaultProps: FlexBoxProps<O, D, P> = {} as FlexBoxProps<O, D, P>,
 ) =>
   forwardRef<BoxProps["ref"], FlexBoxProps<O, D, P>>((props, ref) => (
-    <MuiBox {...defaultProps} {...mapFlexProps(props, ref, "Box")} />
+    <MuiBox {...mapFlexProps({ ...defaultProps, ...props } as FlexBoxProps<O, D, P>, ref, "Box")} />
   )) as R;
 export const FlexBox = createFlexBox();
 export const FlexRowBox = createFlexBox<"row">({ row: true });
diff --git a/packages/v6/src/FlexGrid.tsx b/packages/v6/src/FlexGrid.tsx
@@ -14,11 +14,16 @@ export const createFlexGrid = <
   P = {},
 >(
   defaultProps: FlexGridProps<O, D, P> = {} as FlexGridProps<O, D, P>,
-) => {
-  return forwardRef<GridProps["ref"], FlexGridProps<O, D, P>>((props, ref) => {
-    return <Grid {...defaultProps} {...mapFlexProps(verifyGridSizeProps(props, "legacy"), ref, "Grid")} />;
-  }) as OverridableComponent<FlexGridTypeMap<O, P, D>>;
-};
+) =>
+  forwardRef<GridProps["ref"], FlexGridProps<O, D, P>>((props, ref) => (
+    <Grid
+      {...mapFlexProps(
+        verifyGridSizeProps({ ...defaultProps, ...props } as FlexGridProps<O, D, P>, "legacy"),
+        ref,
+        "Grid",
+      )}
+    />
+  )) as OverridableComponent<FlexGridTypeMap<O, P, D>>;
 export const FlexGrid = createFlexGrid();
 export const FlexGridRow = createFlexGrid<"row">({ row: true });
 export const FlexGridColumn = createFlexGrid<"column">({ column: true });
diff --git a/packages/v6/src/FlexGrid.types.ts b/packages/v6/src/FlexGrid.types.ts
@@ -11,6 +11,12 @@ import {
   type OnlyRow,
 } from "@mui-flexy/core";
 
+type FlexGridOrientationProps<O extends FlexOrientation | undefined> = O extends "row"
+  ? OnlyRow<FlexRowProps>
+  : O extends "column"
+    ? OnlyColumn<FlexColumnProps>
+    : InferFlexProps;
+
 /**
  * @deprecated Grid will be replaced with Grid2 in MUI v7 (see [`Grid2`](https://mui.com/material-ui/react-grid2/)). You can migrate to `Grid2` in v6.
  */
@@ -22,10 +28,19 @@ export interface FlexGridTypeMap<
   props: P &
     GridOwnProps & {
       sx?: SxProps<MaterialTheme>;
-    } & (O extends "row" ? FlexRowProps : O extends "column" ? FlexColumnProps : InferFlexProps);
+    } & FlexGridOrientationProps<O>;
   defaultComponent: D;
 }
 
+export type FlexGridFixedOrientationTypeMap<
+  O extends FlexOrientation,
+  P = {},
+  D extends React.ElementType = FlexGridTypeMap<O, P>["defaultComponent"],
+> = {
+  props: Omit<FlexGridTypeMap<O, P, D>["props"], "row" | "column">;
+  defaultComponent: FlexGridTypeMap<O, P, D>["defaultComponent"];
+};
+
 /**
  * @deprecated Grid will be replaced with Grid2 in MUI v7 (see [`Grid2`](https://mui.com/material-ui/react-grid2/)). You can migrate to `Grid2` in v6.
  */
diff --git a/packages/v7/package.json b/packages/v7/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/v7",
-  "version": "2.0.4-rc.1",
+  "version": "2.0.4-rc.2",
   "description": "A flexbox convenience component for Material UI v7 Box and Grid with handy shorthand props",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/v7/src/FlexBox.tsx b/packages/v7/src/FlexBox.tsx
@@ -35,7 +35,7 @@ const createFlexBox = <
   defaultProps: FlexBoxProps<O, D, P> = {} as FlexBoxProps<O, D, P>,
 ) =>
   forwardRef<BoxProps["ref"], FlexBoxProps<O, D, P>>((props, ref) => (
-    <MuiBox {...defaultProps} {...mapFlexProps(props, ref, "Box")} />
+    <MuiBox {...mapFlexProps({ ...defaultProps, ...props } as FlexBoxProps<O, D, P>, ref, "Box")} />
   )) as R;
 export const FlexBox = createFlexBox();
 export const FlexRowBox = createFlexBox<"row">({ row: true });
diff --git a/packages/v7/src/FlexGrid.tsx b/packages/v7/src/FlexGrid.tsx
@@ -14,16 +14,16 @@ export const createFlexGrid = <
   P = {},
 >(
   defaultProps: FlexGridProps<O, D, P> = {} as FlexGridProps<O, D, P>,
-) => {
-  return forwardRef<GridProps["ref"], FlexGridProps<O, D, P>>((props, ref) => {
-    return (
-      <Grid
-        {...defaultProps}
-        {...mapFlexProps(verifyGridSizeProps(props as FlexGridProps<O, D, P>, "new"), ref, "Grid2")}
-      />
-    );
-  }) as OverridableComponent<FlexGridTypeMap<O, P, D>>;
-};
+) =>
+  forwardRef<GridProps["ref"], FlexGridProps<O, D, P>>((props, ref) => (
+    <Grid
+      {...mapFlexProps(
+        verifyGridSizeProps({ ...defaultProps, ...props } as FlexGridProps<O, D, P>, "new"),
+        ref,
+        "Grid2",
+      )}
+    />
+  )) as OverridableComponent<FlexGridTypeMap<O, P, D>>;
 
 export const FlexGridRow = createFlexGrid<"row">({ row: true });
 export const FlexGridColumn = createFlexGrid<"column">({ column: true });
diff --git a/packages/v7/src/FlexGrid.types.ts b/packages/v7/src/FlexGrid.types.ts
@@ -13,6 +13,12 @@ import {
   type StrictGrid2Props,
 } from "@mui-flexy/core";
 
+type FlexGridOrientationProps<O extends FlexOrientation | undefined> = O extends "row"
+  ? OnlyRow<FlexRowProps>
+  : O extends "column"
+    ? OnlyColumn<FlexColumnProps>
+    : InferFlexProps;
+
 export interface FlexGridTypeMap<
   O extends FlexOrientation | undefined = undefined,
   P = {},
@@ -22,11 +28,20 @@ export interface FlexGridTypeMap<
     GridBaseProps & {
       sx?: SxProps<MaterialTheme>;
     } & SystemProps<MaterialTheme> &
-    (O extends "row" ? FlexRowProps : O extends "column" ? FlexColumnProps : InferFlexProps) &
+    FlexGridOrientationProps<O> &
     StrictGrid2Props;
   defaultComponent: D;
 }
 
+export type FlexGridFixedOrientationTypeMap<
+  O extends FlexOrientation,
+  P = {},
+  D extends React.ElementType = FlexGridTypeMap<O, P>["defaultComponent"],
+> = {
+  props: Omit<FlexGridTypeMap<O, P, D>["props"], "row" | "column">;
+  defaultComponent: FlexGridTypeMap<O, P, D>["defaultComponent"];
+};
+
 export type FlexGridProps<
   O extends FlexOrientation | undefined = undefined,
   D extends React.ElementType = FlexGridTypeMap<O>["defaultComponent"],
diff --git a/tests/unit/v5/Flex.rendered.test.tsx b/tests/unit/v5/Flex.rendered.test.tsx
diff --git a/tests/unit/v6/Flex.rendered.test.tsx b/tests/unit/v6/Flex.rendered.test.tsx
diff --git a/tests/unit/v7/Flex.rendered.test.tsx b/tests/unit/v7/Flex.rendered.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mui-flexy-demo-shared",`
`3`		`- "version": "2.0.4-rc.1",`
	`3`	`+ "version": "2.0.4-rc.2",`
`4`	`4`	`"description": "Shared components for mui-flexy demos",`
`5`	`5`	`"private": true,`
`6`	`6`	`"dependencies": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mui-flexy-demo-v5",`
`3`		`- "version": "2.0.4-rc.1",`
	`3`	`+ "version": "2.0.4-rc.2",`
`4`	`4`	`"description": "Demo server for mui-flexy v5",`
`5`	`5`	`"private": true,`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mui-flexy-demo-v6",`
`3`		`- "version": "2.0.4-rc.1",`
	`3`	`+ "version": "2.0.4-rc.2",`
`4`	`4`	`"description": "Demo server for mui-flexy v6",`
`5`	`5`	`"private": true,`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mui-flexy-demo-v7",`
`3`		`- "version": "2.0.4-rc.1",`
	`3`	`+ "version": "2.0.4-rc.2",`
`4`	`4`	`"description": "Demo server for mui-flexy v7",`
`5`	`5`	`"private": true,`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mui-flexy-docs",`
`3`		`- "version": "2.0.4-rc.1",`
	`3`	`+ "version": "2.0.4-rc.2",`
`4`	`4`	`"description": "Documentation for mui-flexy",`
`5`	`5`	`"private": true,`
`6`	`6`	`"type": "module",`