Fix Grid2 strict prop infering

brandonscript · brandonscript · commit 3cdc0eedeb05 · 2025-08-19T13:00:00.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.2",
+  "version": "2.0.3-rc.0",
   "description": "Shared components for mui-flexy demos",
   "private": true,
   "dependencies": {
diff --git a/demos/v5/package.json b/demos/v5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v5",
-  "version": "2.0.2",
+  "version": "2.0.3-rc.0",
   "description": "Demo server for mui-flexy v5",
   "private": true,
   "scripts": {
diff --git a/demos/v6/package.json b/demos/v6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v6",
-  "version": "2.0.2",
+  "version": "2.0.3-rc.0",
   "description": "Demo server for mui-flexy v6",
   "private": true,
   "scripts": {
diff --git a/demos/v7/package.json b/demos/v7/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v7",
-  "version": "2.0.2",
+  "version": "2.0.3-rc.0",
   "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.2",
+  "version": "2.0.3-rc.0",
   "description": "Documentation for mui-flexy",
   "private": true,
   "type": "module",
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy",
-  "version": "2.0.2",
+  "version": "2.0.3-rc.0",
   "description": "A flexbox convenience component for Material UI Box and Grid with handy shorthand props",
   "type": "module",
   "workspaces": [
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/core",
-  "version": "2.0.2",
+  "version": "2.0.3-rc.0",
   "description": "Core utilities and types for mui-flexy",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/core/src/Flex.core.types.ts b/packages/core/src/Flex.core.types.ts
@@ -122,7 +122,7 @@ export type V7GridSizeProps = {
 export type LegacyGridSizeProps = V5GridSizeProps;
 export type GridSizeProp = V7GridSizeProps;
 
-export type StrictGrid2Props<P = {}> = Omit<P, "item" | "zeroMinWidth" | "xs" | "sm" | "md" | "lg" | "xl"> & {
+export type StrictGrid2Props = {
   item?: never;
   zeroMinWidth?: never;
   xs?: never;
diff --git a/packages/v5/package.json b/packages/v5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/v5",
-  "version": "2.0.2",
+  "version": "2.0.3-rc.0",
   "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/v6/package.json b/packages/v6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/v6",
-  "version": "2.0.2",
+  "version": "2.0.3-rc.0",
   "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/FlexGrid2.types.ts b/packages/v6/src/FlexGrid2.types.ts
@@ -22,7 +22,8 @@ export interface FlexGrid2TypeMap<
     GridBaseProps & {
       sx?: SxProps<MaterialTheme>;
     } & SystemProps<MaterialTheme> &
-    (O extends "row" ? FlexRowProps : O extends "column" ? FlexColumnProps : InferFlexProps);
+    (O extends "row" ? FlexRowProps : O extends "column" ? FlexColumnProps : InferFlexProps) &
+    StrictGrid2Props;
   defaultComponent: D;
 }
 
@@ -32,18 +33,18 @@ export type FlexGrid2Props<
   P = {
     component?: React.ElementType;
   },
-> = StrictGrid2Props<OverrideProps<FlexGrid2TypeMap<O, P, D>, D>>;
+> = OverrideProps<FlexGrid2TypeMap<O, P, D>, D>;
 
 export type FlexGrid2RowProps<
   D extends React.ElementType = FlexGrid2TypeMap<"row">["defaultComponent"],
   P = {
     component?: React.ElementType;
   },
-> = StrictGrid2Props<OnlyRow<FlexGrid2Props<"row", D, P>>>;
+> = OnlyRow<FlexGrid2Props<"row", D, P>>;
 
 export type FlexGrid2ColumnProps<
   D extends React.ElementType = FlexGrid2TypeMap<"column">["defaultComponent"],
   P = {
     component?: React.ElementType;
   },
-> = StrictGrid2Props<OnlyColumn<FlexGrid2Props<"column", D, P>>>;
+> = OnlyColumn<FlexGrid2Props<"column", D, P>>;
diff --git a/packages/v7/package.json b/packages/v7/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/v7",
-  "version": "2.0.2",
+  "version": "2.0.3-rc.0",
   "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/FlexGrid.types.ts b/packages/v7/src/FlexGrid.types.ts
@@ -22,7 +22,8 @@ export interface FlexGridTypeMap<
     GridBaseProps & {
       sx?: SxProps<MaterialTheme>;
     } & SystemProps<MaterialTheme> &
-    (O extends "row" ? FlexRowProps : O extends "column" ? FlexColumnProps : InferFlexProps);
+    (O extends "row" ? FlexRowProps : O extends "column" ? FlexColumnProps : InferFlexProps) &
+    StrictGrid2Props;
   defaultComponent: D;
 }
 
@@ -32,18 +33,18 @@ export type FlexGridProps<
   P = {
     component?: React.ElementType;
   },
-> = StrictGrid2Props<OverrideProps<FlexGridTypeMap<O, P, D>, D>>;
+> = OverrideProps<FlexGridTypeMap<O, P, D>, D>;
 
 export type FlexGridRowProps<
   D extends React.ElementType = FlexGridTypeMap<"row">["defaultComponent"],
   P = {
     component?: React.ElementType;
   },
-> = StrictGrid2Props<OnlyRow<FlexGridProps<"row", D, P>>>;
+> = OnlyRow<FlexGridProps<"row", D, P>>;
 
 export type FlexGridColumnProps<
   D extends React.ElementType = FlexGridTypeMap<"column">["defaultComponent"],
   P = {
     component?: React.ElementType;
   },
-> = StrictGrid2Props<OnlyColumn<FlexGridProps<"column", D, P>>>;
+> = OnlyColumn<FlexGridProps<"column", D, P>>;
diff --git a/tests/unit/v5/FlexGrid.v5.test.tsx b/tests/unit/v5/FlexGrid.v5.test.tsx
@@ -1,6 +1,6 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid, styled, Typography } from "@mui/material";
 import { major as muiVersion } from "@mui/material/version";
-import { FlexGrid } from "@mui-flexy/v5";
+import { FlexGrid, type FlexGridProps } from "@mui-flexy/v5";
 
 console.log("Tests running with MUI version:", muiVersion);
 
@@ -42,3 +42,23 @@ describe("FlexGrid supports Grid props", () => {
     expect(() => GridPropsTest()).not.toThrow();
   });
 });
+
+const StyledFlexGrid = styled((props: FlexGridProps) => (
+  <FlexGrid row={{ xs: false, md: true }} x={{ xs: "left", md: "center" }} y="center" {...props} />
+))(({ theme }) =>
+  theme.unstable_sx({
+    display: "grid",
+    gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" },
+    gridTemplateRows: { xs: "repeat(2, 1fr)", md: "none" },
+    transition: theme.transitions.create(["margin"], { duration: 250, easing: "cubic-bezier(0.4, 0, 0.2, 1)" }),
+    rowGap: { xs: 1, md: 1 },
+    columnGap: { xs: 1, md: 3 },
+    flexWrap: "nowrap",
+  }),
+);
+
+describe("FlexGrid2 supports styled()", () => {
+  it("should wrap FlexGrid in styled() with correct type inference", () => {
+    expect(() => <StyledFlexGrid />).not.toThrow();
+  });
+});
diff --git a/tests/unit/v6/FlexGrid.v6.test.tsx b/tests/unit/v6/FlexGrid.v6.test.tsx
@@ -1,6 +1,6 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid, styled, Typography } from "@mui/material";
 import { major as muiVersion } from "@mui/material/version";
-import { FlexGrid } from "@mui-flexy/v6";
+import { FlexGrid, type FlexGridProps } from "@mui-flexy/v6";
 
 console.log("Tests running with MUI version:", muiVersion);
 
@@ -42,3 +42,23 @@ describe("FlexGrid supports Grid props", () => {
     expect(() => GridPropsTest()).not.toThrow();
   });
 });
+
+const StyledFlexGrid = styled((props: FlexGridProps) => (
+  <FlexGrid row={{ xs: false, md: true }} x={{ xs: "left", md: "center" }} y="center" {...props} />
+))(({ theme }) =>
+  theme.unstable_sx({
+    display: "grid",
+    gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" },
+    gridTemplateRows: { xs: "repeat(2, 1fr)", md: "none" },
+    transition: theme.transitions.create(["margin"], { duration: 250, easing: "cubic-bezier(0.4, 0, 0.2, 1)" }),
+    rowGap: { xs: 1, md: 1 },
+    columnGap: { xs: 1, md: 3 },
+    flexWrap: "nowrap",
+  }),
+);
+
+describe("FlexGrid supports styled()", () => {
+  it("should wrap FlexGrid in styled() with correct type inference", () => {
+    expect(() => <StyledFlexGrid />).not.toThrow();
+  });
+});
diff --git a/tests/unit/v6/FlexGrid2.v6.test.tsx b/tests/unit/v6/FlexGrid2.v6.test.tsx
@@ -1,6 +1,6 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid, styled, Typography } from "@mui/material";
 import { major as muiVersion } from "@mui/material/version";
-import { FlexGrid2 } from "@mui-flexy/v6";
+import { FlexGrid2, type FlexGrid2Props } from "@mui-flexy/v6";
 
 console.log("Tests running with MUI version:", muiVersion);
 
@@ -57,3 +57,54 @@ describe("FlexGrid supports MUIv6 Grid2 props", () => {
     expect(() => Grid2_v6PropsTest()).not.toThrow();
   });
 });
+
+describe("FlexGrid supports Grid props", () => {
+  it("should allow ref and component props", () => {
+    expect(() => GridPropsTest()).not.toThrow();
+  });
+});
+
+const StyledFlexGrid2 = styled((props: FlexGrid2Props) => (
+  <FlexGrid2 row={{ xs: false, md: true }} x={{ xs: "left", md: "center" }} y="center" {...props} />
+))(({ theme }) =>
+  theme.unstable_sx({
+    display: "grid",
+    gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" },
+    gridTemplateRows: { xs: "repeat(2, 1fr)", md: "none" },
+    transition: theme.transitions.create(["margin"], { duration: 250, easing: "cubic-bezier(0.4, 0, 0.2, 1)" }),
+    rowGap: { xs: 1, md: 1 },
+    columnGap: { xs: 1, md: 3 },
+    flexWrap: "nowrap",
+  }),
+);
+
+describe("FlexGrid2 supports styled()", () => {
+  it("should wrap FlexGrid in styled() with correct type inference", () => {
+    expect(() => <StyledFlexGrid2 />).not.toThrow();
+  });
+});
+
+describe("FlexGrid2 blocks legacy Grid props", () => {
+  it("should block item, zeroMinWidth, and breakpoint props with TypeScript errors", () => {
+    // These should all produce TypeScript errors and are tested for compilation
+    const BlockedPropsTests = [
+      // @ts-expect-error - item prop should be blocked
+      () => <FlexGrid2 item />,
+      // @ts-expect-error - zeroMinWidth prop should be blocked
+      () => <FlexGrid2 zeroMinWidth />,
+      // @ts-expect-error - xs prop should be blocked
+      () => <FlexGrid2 xs={12} />,
+      // @ts-expect-error - sm prop should be blocked
+      () => <FlexGrid2 sm={6} />,
+      // @ts-expect-error - md prop should be blocked
+      () => <FlexGrid2 md={4} />,
+      // @ts-expect-error - lg prop should be blocked
+      () => <FlexGrid2 lg={3} />,
+      // @ts-expect-error - xl prop should be blocked
+      () => <FlexGrid2 xl={2} />,
+    ];
+
+    // These functions exist to test TypeScript compilation, not runtime
+    expect(BlockedPropsTests.length).toEqual(7);
+  });
+});
diff --git a/tests/unit/v7/FlexGrid.v7.test.tsx b/tests/unit/v7/FlexGrid.v7.test.tsx
@@ -1,6 +1,6 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid, styled, Typography } from "@mui/material";
 import { major as muiVersion } from "@mui/material/version";
-import { FlexGrid } from "@mui-flexy/v7";
+import { FlexGrid, type FlexGridProps } from "@mui-flexy/v7";
 
 console.log("Tests running with MUI version:", muiVersion);
 
@@ -46,3 +46,48 @@ describe("FlexGrid supports Grid props", () => {
     expect(() => GridPropsTest()).not.toThrow();
   });
 });
+
+const StyledFlexGrid = styled((props: FlexGridProps) => (
+  <FlexGrid row={{ xs: false, md: true }} x={{ xs: "left", md: "center" }} y="center" {...props} />
+))(({ theme }) =>
+  theme.unstable_sx({
+    display: "grid",
+    gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" },
+    gridTemplateRows: { xs: "repeat(2, 1fr)", md: "none" },
+    transition: theme.transitions.create(["margin"], { duration: 250, easing: "cubic-bezier(0.4, 0, 0.2, 1)" }),
+    rowGap: { xs: 1, md: 1 },
+    columnGap: { xs: 1, md: 3 },
+    flexWrap: "nowrap",
+  }),
+);
+
+describe("FlexGrid supports styled()", () => {
+  it("should wrap FlexGrid in styled() with correct type inference", () => {
+    expect(() => <StyledFlexGrid />).not.toThrow();
+  });
+});
+
+describe("FlexGrid blocks legacy Grid props", () => {
+  it("should block item, zeroMinWidth, and breakpoint props with TypeScript errors", () => {
+    // These should all produce TypeScript errors and are tested for compilation
+    const BlockedPropsTests = [
+      // @ts-expect-error - item prop should be blocked
+      () => <FlexGrid item />,
+      // @ts-expect-error - zeroMinWidth prop should be blocked
+      () => <FlexGrid zeroMinWidth />,
+      // @ts-expect-error - xs prop should be blocked
+      () => <FlexGrid xs={12} />,
+      // @ts-expect-error - sm prop should be blocked
+      () => <FlexGrid sm={6} />,
+      // @ts-expect-error - md prop should be blocked
+      () => <FlexGrid md={4} />,
+      // @ts-expect-error - lg prop should be blocked
+      () => <FlexGrid lg={3} />,
+      // @ts-expect-error - xl prop should be blocked
+      () => <FlexGrid xl={2} />,
+    ];
+
+    // These functions exist to test TypeScript compilation, not runtime
+    expect(BlockedPropsTests.length).toEqual(7);
+  });
+});

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.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`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.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`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.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`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.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`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.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`4`	`4`	`"description": "Documentation for mui-flexy",`
`5`	`5`	`"private": true,`
`6`	`6`	`"type": "module",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mui-flexy",`
`3`		`- "version": "2.0.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`4`	`4`	`"description": "A flexbox convenience component for Material UI Box and Grid with handy shorthand props",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"workspaces": [`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mui-flexy/core",`
`3`		`- "version": "2.0.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`4`	`4`	`"description": "Core utilities and types for mui-flexy",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mui-flexy/v5",`
`3`		`- "version": "2.0.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`4`	`4`	`"description": "A flexbox convenience component for Material UI v5 Box and Grid with handy shorthand props",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mui-flexy/v6",`
`3`		`- "version": "2.0.2",`
	`3`	`+ "version": "2.0.3-rc.0",`
`4`	`4`	`"description": "A flexbox convenience component for Material UI v6 Box and Grid with handy shorthand props",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`