Add fixed restrictive types, 2.0.4-rc.1

brandonscript · brandonscript · commit e55ba6913459 · 2025-10-16T17:04:40.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.0",
+  "version": "2.0.4-rc.1",
   "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.0",
+  "version": "2.0.4-rc.1",
   "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.0",
+  "version": "2.0.4-rc.1",
   "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.0",
+  "version": "2.0.4-rc.1",
   "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.0",
+  "version": "2.0.4-rc.1",
   "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.4-rc.0",
+  "version": "2.0.4-rc.1",
   "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.0",
+  "version": "2.0.4-rc.1",
   "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.0",
+  "version": "2.0.4-rc.1",
   "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
@@ -6,7 +6,13 @@ import type { FlexOrientation } from "@mui-flexy/core";
 import { mapFlexProps } from "@mui-flexy/core";
 import { forwardRef } from "react";
 
-import type { FlexBoxColumnProps, FlexBoxProps, FlexBoxRowProps, FlexBoxTypeMap } from "./FlexBox.types";
+import type {
+  FlexBoxColumnProps,
+  FlexBoxProps,
+  FlexBoxRowProps,
+  FlexBoxTypeMap,
+  FlexFixedOrientationTypeMap,
+} from "./FlexBox.types";
 
 export type { FlexBoxColumnProps, FlexBoxProps, FlexBoxRowProps };
 
@@ -20,12 +26,17 @@ const createFlexBox = <
   D extends React.ElementType = "div",
   P = {},
   T extends object = MaterialTheme,
+  R extends object = O extends "row"
+    ? OverridableComponent<FlexFixedOrientationTypeMap<"row">>
+    : O extends "column"
+      ? OverridableComponent<FlexFixedOrientationTypeMap<"column">>
+      : OverridableComponent<FlexBoxTypeMap<O, P, D, T>>,
 >(
   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")} />
-  )) as OverridableComponent<FlexBoxTypeMap<O, P, D, T>>;
+  )) as R;
 export const FlexBox = createFlexBox();
 export const FlexRowBox = createFlexBox<"row">({ row: true });
 export const FlexColumnBox = createFlexBox<"column">({ column: true });
diff --git a/packages/v5/src/FlexBox.types.ts b/packages/v5/src/FlexBox.types.ts
@@ -72,6 +72,16 @@ export interface FlexBoxTypeMap<
   defaultComponent: D;
 }
 
+export type FlexFixedOrientationTypeMap<
+  O extends FlexOrientation,
+  P = {},
+  D extends React.ElementType = FlexBoxTypeMap<O, P>["defaultComponent"],
+  T extends object = MaterialTheme,
+> = {
+  props: Omit<FlexBoxTypeMap<O, P, D, T>["props"], "row" | "column">;
+  defaultComponent: FlexBoxTypeMap<O, P, D, T>["defaultComponent"];
+};
+
 export type FlexBoxProps<
   O extends FlexOrientation | undefined = undefined,
   D extends React.ElementType = FlexBoxTypeMap<O>["defaultComponent"],
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.0",
+  "version": "2.0.4-rc.1",
   "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
@@ -6,7 +6,13 @@ import type { FlexOrientation } from "@mui-flexy/core";
 import { mapFlexProps } from "@mui-flexy/core";
 import { forwardRef } from "react";
 
-import type { FlexBoxColumnProps, FlexBoxProps, FlexBoxRowProps, FlexBoxTypeMap } from "./FlexBox.types";
+import type {
+  FlexBoxColumnProps,
+  FlexBoxProps,
+  FlexBoxRowProps,
+  FlexBoxTypeMap,
+  FlexFixedOrientationTypeMap,
+} from "./FlexBox.types";
 
 export type { FlexBoxColumnProps, FlexBoxProps, FlexBoxRowProps };
 
@@ -20,12 +26,17 @@ const createFlexBox = <
   D extends React.ElementType = "div",
   P = {},
   T extends object = MaterialTheme,
+  R extends object = O extends "row"
+    ? OverridableComponent<FlexFixedOrientationTypeMap<"row">>
+    : O extends "column"
+      ? OverridableComponent<FlexFixedOrientationTypeMap<"column">>
+      : OverridableComponent<FlexBoxTypeMap<O, P, D, T>>,
 >(
   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")} />
-  )) as OverridableComponent<FlexBoxTypeMap<O, P, D, T>>;
+  )) as R;
 export const FlexBox = createFlexBox();
 export const FlexRowBox = createFlexBox<"row">({ row: true });
 export const FlexColumnBox = createFlexBox<"column">({ column: true });
diff --git a/packages/v6/src/FlexBox.types.ts b/packages/v6/src/FlexBox.types.ts
@@ -24,6 +24,16 @@ export interface FlexBoxTypeMap<
   defaultComponent: D;
 }
 
+export type FlexFixedOrientationTypeMap<
+  O extends FlexOrientation,
+  P = {},
+  D extends React.ElementType = FlexBoxTypeMap<O, P>["defaultComponent"],
+  T extends object = MaterialTheme,
+> = {
+  props: Omit<FlexBoxTypeMap<O, P, D, T>["props"], "row" | "column">;
+  defaultComponent: FlexBoxTypeMap<O, P, D, T>["defaultComponent"];
+};
+
 export type FlexBoxProps<
   O extends FlexOrientation | undefined = undefined,
   D extends React.ElementType = FlexBoxTypeMap<O>["defaultComponent"],
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.0",
+  "version": "2.0.4-rc.1",
   "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
@@ -6,7 +6,13 @@ import type { FlexOrientation } from "@mui-flexy/core";
 import { mapFlexProps } from "@mui-flexy/core";
 import { forwardRef } from "react";
 
-import type { FlexBoxColumnProps, FlexBoxProps, FlexBoxRowProps, FlexBoxTypeMap } from "./FlexBox.types";
+import type {
+  FlexBoxColumnProps,
+  FlexBoxProps,
+  FlexBoxRowProps,
+  FlexBoxTypeMap,
+  FlexFixedOrientationTypeMap,
+} from "./FlexBox.types";
 
 export type { FlexBoxColumnProps, FlexBoxProps, FlexBoxRowProps };
 
@@ -20,12 +26,17 @@ const createFlexBox = <
   D extends React.ElementType = "div",
   P = {},
   T extends object = MaterialTheme,
+  R extends object = O extends "row"
+    ? OverridableComponent<FlexFixedOrientationTypeMap<"row">>
+    : O extends "column"
+      ? OverridableComponent<FlexFixedOrientationTypeMap<"column">>
+      : OverridableComponent<FlexBoxTypeMap<O, P, D, T>>,
 >(
   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")} />
-  )) as OverridableComponent<FlexBoxTypeMap<O, P, D, T>>;
+  )) as R;
 export const FlexBox = createFlexBox();
 export const FlexRowBox = createFlexBox<"row">({ row: true });
 export const FlexColumnBox = createFlexBox<"column">({ column: true });
diff --git a/packages/v7/src/FlexBox.types.ts b/packages/v7/src/FlexBox.types.ts
@@ -24,6 +24,16 @@ export interface FlexBoxTypeMap<
   defaultComponent: D;
 }
 
+export type FlexFixedOrientationTypeMap<
+  O extends FlexOrientation,
+  P = {},
+  D extends React.ElementType = FlexBoxTypeMap<O, P>["defaultComponent"],
+  T extends object = MaterialTheme,
+> = {
+  props: Omit<FlexBoxTypeMap<O, P, D, T>["props"], "row" | "column">;
+  defaultComponent: FlexBoxTypeMap<O, P, D, T>["defaultComponent"];
+};
+
 export type FlexBoxProps<
   O extends FlexOrientation | undefined = undefined,
   D extends React.ElementType = FlexBoxTypeMap<O>["defaultComponent"],
diff --git a/tests/unit/v5/Flex.complexity.test.tsx b/tests/unit/v5/Flex.complexity.test.tsx
@@ -1,5 +1,5 @@
-import { Menu, MenuList, type MenuListProps, type MenuProps, styled } from "@mui/material";
-import { FlexBox } from "@mui-flexy/v5";
+import { CardContent, Menu, MenuList, type MenuListProps, type MenuProps, styled } from "@mui/material";
+import { FlexBox, FlexColumnBox, FlexRowBox } from "@mui-flexy/v5";
 import { type FlexBoxColumnProps, type FlexBoxProps } from "@mui-flexy/v5";
 import type * as React from "react";
 import { type ComponentProps, forwardRef, type PropsWithChildren } from "react";
@@ -54,9 +54,9 @@ const StyledSelect = forwardRef<
   ComponentProps<typeof StyledSelectContainer> & {
     button?: React.ReactNode;
   }
->(({ button, ..._props }, ref) => {
+>(({ button, ...props }, ref) => {
   return (
-    <StyledSelectContainer component={FlexBox} column ref={ref}>
+    <StyledSelectContainer component={FlexBox} column {...props} ref={ref}>
       {button}
     </StyledSelectContainer>
   );
@@ -93,4 +93,26 @@ describe("StyledMenu", () => {
   });
 });
 
+describe("Flex[Orientation]Box integration", () => {
+  it("allows CardContent to use all FlexBox variants as its component", () => {
+    const AnyCard = () => (
+      <CardContent component={FlexBox} x="center" y="center">
+        <div />
+      </CardContent>
+    );
+    const RowCard = () => (
+      <CardContent component={FlexRowBox} x="center" y="center">
+        <div />
+      </CardContent>
+    );
+    const ColumnCard = () => (
+      <CardContent component={FlexColumnBox} x="center" y="center">
+        <div />
+      </CardContent>
+    );
+
+    [AnyCard, RowCard, ColumnCard].forEach((factory) => expect(factory).toBeDefined());
+  });
+});
+
 export default {};
diff --git a/tests/unit/v5/FlexBox.v5.test.tsx b/tests/unit/v5/FlexBox.v5.test.tsx
@@ -1,7 +1,7 @@
 import { Box, styled, type SxProps, type Theme, Typography } from "@mui/material";
 import { major as muiVersion } from "@mui/material/version";
 import type { FlexBoxColumnProps, FlexBoxProps, FlexBoxRowProps } from "@mui-flexy/v5";
-import { FlexBox } from "@mui-flexy/v5";
+import { FlexBox, FlexColumnBox, FlexRowBox } from "@mui-flexy/v5";
 
 console.log("Tests running with MUI version:", muiVersion);
 
@@ -128,6 +128,24 @@ const ColumnTests = [
   () => <FlexBox column="invalid-column" />,
 ];
 
+const FixedOrientationValidTests = [
+  () => <FlexRowBox />,
+  () => <FlexRowBox x="center" y="center" />,
+  () => <FlexColumnBox />,
+  () => <FlexColumnBox x="center" y="center" />,
+];
+
+const FixedOrientationInvalidTests = [
+  // @ts-expect-error
+  () => <FlexRowBox row />,
+  // @ts-expect-error
+  () => <FlexRowBox column />,
+  // @ts-expect-error
+  () => <FlexColumnBox row />,
+  // @ts-expect-error
+  () => <FlexColumnBox column />,
+];
+
 const OverrideBoxTests = [
   () => <Box component="div" />,
   () => <Box component="div" className="myClass" />,
@@ -155,6 +173,18 @@ describe("FlexBox JSX tests", () => {
     });
   });
 
+  it("should exec FixedOrientationValidTests without errors", () => {
+    FixedOrientationValidTests.forEach((TestComponent) => {
+      expect(() => TestComponent()).not.toThrow();
+    });
+  });
+
+  it("should flag FixedOrientationInvalidTests", () => {
+    FixedOrientationInvalidTests.forEach((TestComponent) => {
+      expect(() => TestComponent()).not.toThrow();
+    });
+  });
+
   it("should exec OverrideBoxTests without errors", () => {
     OverrideBoxTests.forEach((TestComponent) => {
       expect(() => TestComponent()).not.toThrow();
diff --git a/tests/unit/v6/Flex.complexity.test.tsx b/tests/unit/v6/Flex.complexity.test.tsx
@@ -1,5 +1,5 @@
-import { Menu, MenuList, type MenuListProps, type MenuProps, styled } from "@mui/material";
-import { FlexBox } from "@mui-flexy/v6";
+import { CardContent, Menu, MenuList, type MenuListProps, type MenuProps, styled } from "@mui/material";
+import { FlexBox, FlexColumnBox, FlexRowBox } from "@mui-flexy/v6";
 import { type FlexBoxColumnProps, type FlexBoxProps } from "@mui-flexy/v6";
 import type * as React from "react";
 import { type ComponentProps, forwardRef, type PropsWithChildren } from "react";
@@ -93,4 +93,26 @@ describe("StyledMenu", () => {
   });
 });
 
+describe("Flex[Orientation]Box integration", () => {
+  it("allows CardContent to use all FlexBox variants as its component", () => {
+    const AnyCard = () => (
+      <CardContent component={FlexBox} x="center" y="center">
+        <div />
+      </CardContent>
+    );
+    const RowCard = () => (
+      <CardContent component={FlexRowBox} x="center" y="center">
+        <div />
+      </CardContent>
+    );
+    const ColumnCard = () => (
+      <CardContent component={FlexColumnBox} x="center" y="center">
+        <div />
+      </CardContent>
+    );
+
+    [AnyCard, RowCard, ColumnCard].forEach((factory) => expect(factory).toBeDefined());
+  });
+});
+
 export default {};
diff --git a/tests/unit/v6/FlexBox.v6.test.tsx b/tests/unit/v6/FlexBox.v6.test.tsx
diff --git a/tests/unit/v7/Flex.complexity.test.tsx b/tests/unit/v7/Flex.complexity.test.tsx
diff --git a/tests/unit/v7/FlexBox.v7.test.tsx b/tests/unit/v7/FlexBox.v7.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.0",`
	`3`	`+ "version": "2.0.4-rc.1",`
`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.0",`
	`3`	`+ "version": "2.0.4-rc.1",`
`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.0",`
	`3`	`+ "version": "2.0.4-rc.1",`
`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.0",`
	`3`	`+ "version": "2.0.4-rc.1",`
`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.0",`
	`3`	`+ "version": "2.0.4-rc.1",`
`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.4-rc.0",`
	`3`	`+ "version": "2.0.4-rc.1",`
`4`	`4`	`"description": "A flexbox convenience component for Material UI Box and Grid with handy shorthand props",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"react",`
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.4-rc.0",`
	`3`	`+ "version": "2.0.4-rc.1",`
`4`	`4`	`"description": "Core utilities and types for mui-flexy",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`