Fix TypeScript complexity issues for MUI v5

demos/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-shared",
-  "version": "2.0.3",
+  "version": "2.0.4-rc.0",
   "description": "Shared components for mui-flexy demos",
   "private": true,
   "dependencies": {

demos/v5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v5",
-  "version": "2.0.3",
+  "version": "2.0.4-rc.0",
   "description": "Demo server for mui-flexy v5",
   "private": true,
   "scripts": {

demos/v6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v6",
-  "version": "2.0.3",
+  "version": "2.0.4-rc.0",
   "description": "Demo server for mui-flexy v6",
   "private": true,
   "scripts": {

demos/v7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-demo-v7",
-  "version": "2.0.3",
+  "version": "2.0.4-rc.0",
   "description": "Demo server for mui-flexy v7",
   "private": true,
   "scripts": {

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-flexy-docs",
-  "version": "2.0.3",
+  "version": "2.0.4-rc.0",
   "description": "Documentation for mui-flexy",
   "private": true,
   "type": "module",

docs/static/core.js

@@ -65,21 +65,29 @@ const stringOrArrayValue = (value, index)=>{
     }
 };
 const mapResponsiveObject = (direction, main, cross)=>{
-    return Object.fromEntries(Object.entries(direction ?? []).map(([key, d])=>{
+    return Object.fromEntries(Object.entries(direction ?? {}).map(([key, d])=>{
         if (typeof d !== "string") {
             throw new Error("Values for a flex direction ResponsiveStyleObject must be strings, e.g. { xs: 'row', sm: 'column' }");
         }
-        if (d.startsWith("column")) {
+        const target = d.startsWith("column") ? cross : main;
+        const aligned = mapAlignment(target);
+        if (aligned === undefined || aligned === null || typeof aligned === "string") {
             return [
                 key,
-                typeof cross === "string" ? cross : mapAlignment(cross)?.[key]
+                aligned
             ];
-        } else {
+        }
+        if (Array.isArray(aligned)) {
+            const index = Number(key);
             return [
                 key,
-                typeof main === "string" ? main : mapAlignment(main)?.[key]
+                Number.isNaN(index) ? undefined : aligned[index]
             ];
         }
+        return [
+            key,
+            aligned[key]
+        ];
     }));
 };
 const resolveAlignment = (direction, x, y)=>{

docs/static/v5.js

@@ -70,21 +70,29 @@ const stringOrArrayValue = (value, index)=>{
     }
 };
 const mapResponsiveObject = (direction, main, cross)=>{
-    return Object.fromEntries(Object.entries(direction ?? []).map(([key, d])=>{
+    return Object.fromEntries(Object.entries(direction ?? {}).map(([key, d])=>{
         if (typeof d !== "string") {
             throw new Error("Values for a flex direction ResponsiveStyleObject must be strings, e.g. { xs: 'row', sm: 'column' }");
         }
-        if (d.startsWith("column")) {
+        const target = d.startsWith("column") ? cross : main;
+        const aligned = mapAlignment(target);
+        if (aligned === undefined || aligned === null || typeof aligned === "string") {
             return [
                 key,
-                typeof cross === "string" ? cross : mapAlignment(cross)?.[key]
+                aligned
             ];
-        } else {
+        }
+        if (Array.isArray(aligned)) {
+            const index = Number(key);
             return [
                 key,
-                typeof main === "string" ? main : mapAlignment(main)?.[key]
+                Number.isNaN(index) ? undefined : aligned[index]
             ];
         }
+        return [
+            key,
+            aligned[key]
+        ];
     }));
 };
 const resolveAlignment = (direction, x, y)=>{

docs/static/v6.js

@@ -74,21 +74,29 @@ const stringOrArrayValue = (value, index)=>{
     }
 };
 const mapResponsiveObject = (direction, main, cross)=>{
-    return Object.fromEntries(Object.entries(direction ?? []).map(([key, d])=>{
+    return Object.fromEntries(Object.entries(direction ?? {}).map(([key, d])=>{
         if (typeof d !== "string") {
             throw new Error("Values for a flex direction ResponsiveStyleObject must be strings, e.g. { xs: 'row', sm: 'column' }");
         }
-        if (d.startsWith("column")) {
+        const target = d.startsWith("column") ? cross : main;
+        const aligned = mapAlignment(target);
+        if (aligned === undefined || aligned === null || typeof aligned === "string") {
             return [
                 key,
-                typeof cross === "string" ? cross : mapAlignment(cross)?.[key]
+                aligned
             ];
-        } else {
+        }
+        if (Array.isArray(aligned)) {
+            const index = Number(key);
             return [
                 key,
-                typeof main === "string" ? main : mapAlignment(main)?.[key]
+                Number.isNaN(index) ? undefined : aligned[index]
             ];
         }
+        return [
+            key,
+            aligned[key]
+        ];
     }));
 };
 const resolveAlignment = (direction, x, y)=>{

docs/static/v7.js

@@ -70,21 +70,29 @@ const stringOrArrayValue = (value, index)=>{
     }
 };
 const mapResponsiveObject = (direction, main, cross)=>{
-    return Object.fromEntries(Object.entries(direction ?? []).map(([key, d])=>{
+    return Object.fromEntries(Object.entries(direction ?? {}).map(([key, d])=>{
         if (typeof d !== "string") {
             throw new Error("Values for a flex direction ResponsiveStyleObject must be strings, e.g. { xs: 'row', sm: 'column' }");
         }
-        if (d.startsWith("column")) {
+        const target = d.startsWith("column") ? cross : main;
+        const aligned = mapAlignment(target);
+        if (aligned === undefined || aligned === null || typeof aligned === "string") {
             return [
                 key,
-                typeof cross === "string" ? cross : mapAlignment(cross)?.[key]
+                aligned
             ];
-        } else {
+        }
+        if (Array.isArray(aligned)) {
+            const index = Number(key);
             return [
                 key,
-                typeof main === "string" ? main : mapAlignment(main)?.[key]
+                Number.isNaN(index) ? undefined : aligned[index]
             ];
         }
+        return [
+            key,
+            aligned[key]
+        ];
     }));
 };
 const resolveAlignment = (direction, x, y)=>{

eslint.config.js

@@ -23,16 +23,15 @@ export default tseslint.config(
   eslint.configs.recommended,
   tseslint.configs.recommended,
 
-  reactConfigs,
+  // Global ignores
   {
-    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
     ignores: [
       "**/node_modules/**",
       "**/.next/**",
       "**/out/**",
       "**/dist/**",
       "**/build/**",
-      "**/docs/static/*.js",
+      "**/docs/static/**",
       "**/demos/*/dist/**",
       "*.json",
       "*.code-workspace",
@@ -41,6 +40,10 @@ export default tseslint.config(
       "**/bundle.js.map",
       "**/*.d.ts.map",
     ],
+  },
+  reactConfigs,
+  {
+    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
     plugins: {
       "import-x": importPlugin,
       "simple-import-sort": sisPlugin,

package.json

@@ -1,7 +1,15 @@
 {
   "name": "mui-flexy",
-  "version": "2.0.3",
+  "version": "2.0.4-rc.0",
   "description": "A flexbox convenience component for Material UI Box and Grid with handy shorthand props",
+  "keywords": [
+    "react",
+    "material-ui",
+    "mui",
+    "flexbox",
+    "responsive",
+    "layout"
+  ],
   "type": "module",
   "workspaces": [
     "packages/*",
@@ -36,7 +44,7 @@
     "precommit": "./.husky/pre-commit",
     "publish": "./scripts/publish.sh",
     "publish:dry-run": "./scripts/publish.sh --dry-run",
-    "test": "yarn test:unit && yarn test:e2e",
+    "test": "yarn test:unit && yarn test:types && yarn test:e2e",
     "test:e2e": "playwright test",
     "test:e2e:clean": "PLAYWRIGHT_FORCE_CLEAN=1 playwright test",
     "test:e2e:console": "playwright test tests/e2e/console-validation.spec.ts",
@@ -57,6 +65,11 @@
     "test:unit:v5": "yarn jest --selectProjects=v5-tests",
     "test:unit:v6": "yarn jest --selectProjects=v6-tests",
     "test:unit:v7": "yarn jest --selectProjects=v7-tests",
+    "test:types:core": "yarn tsc --noEmit -p tests/unit/core/tsconfig.json",
+    "test:types:v5": "yarn tsc --noEmit -p tests/unit/v5/tsconfig.json",
+    "test:types:v6": "yarn tsc --noEmit -p tests/unit/v6/tsconfig.json",
+    "test:types:v7": "yarn tsc --noEmit -p tests/unit/v7/tsconfig.json",
+    "test:types": "yarn test:types:core && yarn test:types:v5 && yarn test:types:v6 && yarn test:types:v7",
     "typecheck": "yarn workspaces foreach -p -A run typecheck",
     "set-version": "./scripts/version.sh"
   },

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/core",
-  "version": "2.0.3",
+  "version": "2.0.4-rc.0",
   "description": "Core utilities and types for mui-flexy",
   "type": "module",
   "main": "dist/index.js",

packages/core/src/Flex.core.types.ts

@@ -33,11 +33,6 @@ export type ResponsiveArray<T> = (T | null | undefined)[] | readonly (T | null |
 export type ResponsiveObject<T> = Partial<{ [key in Breakpoint]: T | null }>;
 export type StrictResponsiveStyleValue<T> = ResponsiveArray<T> | ResponsiveObject<T>;
 
-type FlexCommonProps = {
-  reverse?: boolean;
-  nowrap?: boolean;
-};
-
 // Generic ResponsiveStyleValue type - each version will provide their own implementation
 export type ResponsiveStyleValue<T> = T | ResponsiveArray<T> | ResponsiveObject<T>;
 
@@ -52,35 +47,23 @@ export type ResponsiveFlexPosition = ResponsiveStyleValue<
 >;
 
 // row === true
-export type FlexRowProps = FlexCommonProps & {
-  row?: true;
+export type FlexRowProps = {
+  row?: true | undefined;
   column?: false | never;
   x?: XRowAlign | StrictResponsiveStyleValue<XRowAlign>;
   y?: YRowAlign | StrictResponsiveStyleValue<YRowAlign>;
+  reverse?: boolean;
+  nowrap?: boolean;
 };
 
 // column === true
-export type FlexColumnProps = FlexCommonProps & {
+export type FlexColumnProps = {
   column: true;
   row?: false | never;
   x?: XColumnAlign | StrictResponsiveStyleValue<XColumnAlign>;
   y?: YColumnAlign | StrictResponsiveStyleValue<YColumnAlign>;
-};
-
-// row is responsive, column is unknown
-type RowIsResponsive = FlexCommonProps & {
-  row: StrictResponsiveStyleValue<boolean>;
-  column?: boolean | never | StrictResponsiveStyleValue<boolean>;
-  x?: XRowAlign | XColumnAlign | ResponsiveAlign;
-  y?: YColumnAlign | YRowAlign | ResponsiveAlign;
-};
-
-// column is responsive, row is unknown
-type ColumnIsResponsive = FlexCommonProps & {
-  column: StrictResponsiveStyleValue<boolean>;
-  row?: boolean | never | StrictResponsiveStyleValue<boolean>;
-  x?: XRowAlign | XColumnAlign | ResponsiveAlign;
-  y?: YColumnAlign | YRowAlign | ResponsiveAlign;
+  reverse?: boolean;
+  nowrap?: boolean;
 };
 
 // MUI v5 - only supports root xs, sm, md, lg, xl props
@@ -154,7 +137,39 @@ export type BaseFlexProps<T extends _Any = _Any> = {
   className?: string | ((theme: T) => string);
 } & (V5GridSizeProps | V6GridSizeProps | V7GridSizeProps);
 
-export type InferFlexProps = FlexColumnProps | ColumnIsResponsive | FlexRowProps | RowIsResponsive;
+export type InferFlexProps = (
+  | {
+      row?: true | undefined;
+      column?: false | never;
+      x?: XRowAlign | StrictResponsiveStyleValue<XRowAlign>;
+      y?: YRowAlign | StrictResponsiveStyleValue<YRowAlign>;
+    }
+  | {
+      row?: false | never;
+      column: true;
+      x?: XColumnAlign | StrictResponsiveStyleValue<XColumnAlign>;
+      y?: YColumnAlign | StrictResponsiveStyleValue<YColumnAlign>;
+    }
+  | {
+      row: StrictResponsiveStyleValue<boolean>;
+      column?: boolean | never | StrictResponsiveStyleValue<boolean>;
+      x?: XRowAlign | XColumnAlign | ResponsiveAlign;
+      y?: YColumnAlign | YRowAlign | ResponsiveAlign;
+      reverse?: boolean;
+      nowrap?: boolean;
+    }
+  | {
+      column: StrictResponsiveStyleValue<boolean>;
+      row?: boolean | never | StrictResponsiveStyleValue<boolean>;
+      x?: XRowAlign | XColumnAlign | ResponsiveAlign;
+      y?: YColumnAlign | YRowAlign | ResponsiveAlign;
+      reverse?: boolean;
+      nowrap?: boolean;
+    }
+) & {
+  reverse?: boolean;
+  nowrap?: boolean;
+};
 
 // restricts the props to only row
 export type OnlyRow<T> = Omit<T, "row" | "column"> & {

packages/core/src/Flex.core.utils.ts

@@ -89,17 +89,26 @@ const mapResponsiveObject = (
   cross: ResponsiveFlexPosition,
 ) => {
   return Object.fromEntries(
-    Object.entries(direction ?? []).map(([key, d]) => {
+    Object.entries(direction ?? {}).map(([key, d]) => {
       if (typeof d !== "string") {
         throw new Error(
           "Values for a flex direction ResponsiveStyleObject must be strings, e.g. { xs: 'row', sm: 'column' }",
         );
       }
-      if (d.startsWith("column")) {
-        return [key, typeof cross === "string" ? cross : mapAlignment(cross)?.[key as keyof typeof cross]];
-      } else {
-        return [key, typeof main === "string" ? main : mapAlignment(main)?.[key as keyof typeof main]];
+
+      const target = d.startsWith("column") ? cross : main;
+      const aligned = mapAlignment(target);
+
+      if (aligned === undefined || aligned === null || typeof aligned === "string") {
+        return [key, aligned];
       }
+
+      if (Array.isArray(aligned)) {
+        const index = Number(key);
+        return [key, Number.isNaN(index) ? undefined : aligned[index]];
+      }
+
+      return [key, aligned[key as keyof typeof aligned]];
     }),
   );
 };

packages/v5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui-flexy/v5",
-  "version": "2.0.3",
+  "version": "2.0.4-rc.0",
   "description": "A flexbox convenience component for Material UI v5 Box and Grid with handy shorthand props",
   "type": "module",
   "main": "dist/index.js",