@stratakit/mui 0.3.0 → 0.4.0

package/dist/{createTheme.js → ~createTheme.js}

@@ -1,14 +1,19 @@
-import { Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Role } from "@ariakit/react/role";
 import OutlinedInput from "@mui/material/OutlinedInput";
+import StepConnector from "@mui/material/StepConnector";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
+import cx from "classnames";
 import { MuiBadge } from "./~components/MuiBadge.js";
+import { MuiBottomNavigationAction } from "./~components/MuiBottomNavigation.js";
 import { MuiButtonBase } from "./~components/MuiButtonBase.js";
-import { MuiCard, MuiCardActionArea } from "./~components/MuiCard.js";
+import { MuiCard, MuiCardActionArea, MuiCardMedia } from "./~components/MuiCard.js";
 import { MuiChip, MuiChipDeleteIcon, MuiChipLabel } from "./~components/MuiChip.js";
+import { MuiDivider } from "./~components/MuiDivider.js";
 import { MuiIconButton } from "./~components/MuiIconButton.js";
 import { MuiSnackbar } from "./~components/MuiSnackbar.js";
+import { MuiStepIcon } from "./~components/MuiStepper.js";
 import { MuiTableCell, MuiTableHead } from "./~components/MuiTable.js";
 import { ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, DismissIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./Icon.js";
 function createTheme() {
@@ -124,6 +129,7 @@ function createTheme() {
       MuiAccordionSummary: {
         defaultProps: {
           component: Role.div,
+          nativeButton: false,
           expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {})
         }
       },
@@ -148,21 +154,47 @@ function createTheme() {
         defaultProps: {
           popupIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
           clearIcon: /* @__PURE__ */ jsx(DismissIcon, {}),
+          renderOption: ({
+            key,
+            ...props
+          }, option, _, ownerState) => /* @__PURE__ */ jsx("li", {
+            ...props,
+            className: cx("MuiMenuItem-root", props.className),
+            children: ownerState.getOptionLabel(option)
+          }, key),
           slotProps: {
             paper: {
               elevation: 8
               // match Menu elevation
             },
+            chip: {
+              size: "small"
+            },
             clearIndicator: {
-              tabIndex: 0
+              tabIndex: 0,
               // make clear indicator focusable
+              size: "small"
+            },
+            popupIndicator: {
+              size: "small"
             }
           }
         }
       },
       MuiAvatar: {
         defaultProps: {
-          component: Role.div
+          component: Role.div,
+          slotProps: {
+            img: {
+              draggable: false
+            }
+          }
+        },
+        styleOverrides: {
+          root: {
+            width: "var(--_MuiAvatar-size, 2rem)",
+            height: "var(--_MuiAvatar-size, 2rem)"
+          }
         }
       },
       MuiAvatarGroup: {
@@ -186,6 +218,11 @@ function createTheme() {
           component: Role.div
         }
       },
+      MuiBottomNavigationAction: {
+        defaultProps: {
+          component: MuiBottomNavigationAction
+        }
+      },
       MuiBreadcrumbs: {
         defaultProps: {
           component: Role.nav,
@@ -234,6 +271,7 @@ function createTheme() {
           component: Role.div,
           slotProps: {
             title: {
+              // biome-ignore lint/suspicious/noExplicitAny: MUI's CardHeader.title.component is hardcoded to "span"
               component: Role.h2
             }
           }
@@ -241,7 +279,7 @@ function createTheme() {
       },
       MuiCardMedia: {
         defaultProps: {
-          component: Role.div
+          component: MuiCardMedia
         }
       },
       MuiCheckbox: {
@@ -249,9 +287,9 @@ function createTheme() {
           component: Role.span,
           disableRipple: true,
           // Checkbox doesn't inherit from ButtonBase
-          icon: /* @__PURE__ */ jsx(Fragment, {}),
-          checkedIcon: /* @__PURE__ */ jsx(Fragment, {}),
-          indeterminateIcon: /* @__PURE__ */ jsx(Fragment, {})
+          icon: /* @__PURE__ */ jsx(Nothing, {}),
+          checkedIcon: /* @__PURE__ */ jsx(Nothing, {}),
+          indeterminateIcon: /* @__PURE__ */ jsx(Nothing, {})
         }
       },
       MuiChip: {
@@ -287,7 +325,7 @@ function createTheme() {
       },
       MuiDivider: {
         defaultProps: {
-          component: withRenderProp(Role, "hr")
+          component: MuiDivider
         }
       },
       MuiDrawer: {
@@ -321,11 +359,6 @@ function createTheme() {
           component: Role.div
         }
       },
-      MuiGridLegacy: {
-        defaultProps: {
-          component: Role.div
-        }
-      },
       MuiIcon: {
         defaultProps: {
           component: Role.span
@@ -420,7 +453,8 @@ function createTheme() {
       },
       MuiListItemButton: {
         defaultProps: {
-          component: MuiButtonBase
+          component: MuiButtonBase,
+          nativeButton: true
         }
       },
       MuiListItemText: {
@@ -468,9 +502,15 @@ function createTheme() {
           // Removes masked border from Select
         }
       },
+      MuiPagination: {
+        defaultProps: {
+          shape: "rounded"
+        }
+      },
       MuiPaginationItem: {
         defaultProps: {
           component: MuiButtonBase,
+          shape: "rounded",
           slots: {
             previous: ChevronLeftIcon,
             next: ChevronRightIcon,
@@ -494,8 +534,8 @@ function createTheme() {
           component: Role.span,
           disableRipple: true,
           // Radio doesn't inherit from ButtonBase
-          icon: /* @__PURE__ */ jsx(Fragment, {}),
-          checkedIcon: /* @__PURE__ */ jsx(Fragment, {})
+          icon: /* @__PURE__ */ jsx(Nothing, {}),
+          checkedIcon: /* @__PURE__ */ jsx(Nothing, {})
         }
       },
       MuiRating: {
@@ -545,7 +585,7 @@ function createTheme() {
       },
       MuiStep: {
         defaultProps: {
-          component: Role.div
+          component: Role.li
         }
       },
       MuiSwitch: {
@@ -555,7 +595,23 @@ function createTheme() {
       },
       MuiStepper: {
         defaultProps: {
-          component: Role.div
+          component: Role.ol,
+          connector: /* @__PURE__ */ jsx(StepConnector, {
+            "aria-hidden": "true"
+          })
+          // hiding the connector to prevent invalid markup
+        }
+      },
+      MuiStepLabel: {
+        defaultProps: {
+          slotProps: {
+            root: {
+              component: Role.div
+            },
+            stepIcon: {
+              component: MuiStepIcon
+            }
+          }
         }
       },
       MuiSvgIcon: {
@@ -580,7 +636,9 @@ function createTheme() {
       },
       MuiTableBody: {
         defaultProps: {
-          component: withRenderProp(Role, "tbody")
+          component: withRenderProp(Role, "tbody"),
+          role: void 0
+          // Removing role="rowgroup". See https://github.com/iTwin/stratakit/pull/1361
         }
       },
       MuiTableCell: {
@@ -652,7 +710,18 @@ function createTheme() {
       },
       MuiTooltip: {
         defaultProps: {
-          describeChild: true
+          placement: "top",
+          describeChild: true,
+          slotProps: {
+            popper: {
+              modifiers: [{
+                name: "offset",
+                options: {
+                  offset: [0, 2]
+                }
+              }]
+            }
+          }
         }
       },
       MuiTypography: {
@@ -688,6 +757,9 @@ function withRenderProp(Role2, DefaultTagName) {
     });
   });
 }
+function Nothing() {
+  return null;
+}
 export {
   createTheme
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stratakit/mui",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@stratakit/foundations": "^0.4.7",
+    "@stratakit/foundations": "^0.4.8",
     "@stratakit/icons": "^0.3.1",
     "classnames": "^2.5.1",
     "react-compiler-runtime": "^1.0.0"
@@ -63,7 +63,7 @@
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
-    "@mui/material": "^7.3.6",
+    "@mui/material": "^9.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/dist/createTheme.d.ts

@@ -1,16 +0,0 @@
-/**
- * Creates a StrataKit theme for MUI. Should be used with MUI's `ThemeProvider`.
- *
- * Example:
- * ```tsx
- * import { ThemeProvider } from "@mui/material/styles";
- * import { createTheme } from "@stratakit/mui";
- *
- * const theme = createTheme();
- * <ThemeProvider theme={theme}>
- *   <App />
- * </ThemeProvider>
- * ```
- */
-declare function createTheme(): import("@mui/material/styles").Theme;
-export { createTheme };