@stratakit/mui 0.4.2 → 0.5.1

package/dist/DEV/~createTheme.js

@@ -5,14 +5,25 @@ 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 { MuiAutocomplete } from "./~components/MuiAutocomplete.js";
+import {
+  MuiAccordionRootSlot,
+  MuiAccordionSummary
+} from "./~components/MuiAccordion.js";
+import { MuiAlert, MuiAlertTitle } from "./~components/MuiAlert.js";
+import {
+  MuiAutocomplete,
+  MuiAutocompleteChip,
+  MuiAutocompleteChipDeleteIcon,
+  MuiAutocompleteClearIndicator
+} from "./~components/MuiAutocomplete.js";
 import { MuiAvatarGroup } from "./~components/MuiAvatarGroup.js";
-import { MuiBadge } from "./~components/MuiBadge.js";
+import { MuiBadge, MuiBadgeBadge } from "./~components/MuiBadge.js";
 import { MuiBottomNavigationAction } from "./~components/MuiBottomNavigation.js";
 import { MuiButtonBase } from "./~components/MuiButtonBase.js";
 import {
   MuiCard,
   MuiCardActionArea,
+  MuiCardHeaderTitle,
   MuiCardMedia
 } from "./~components/MuiCard.js";
 import {
@@ -23,6 +34,8 @@ import {
 import { MuiDivider } from "./~components/MuiDivider.js";
 import { MuiIconButton } from "./~components/MuiIconButton.js";
 import { MuiInputLabel } from "./~components/MuiInputLabel.js";
+import { MuiMenuListSlot } from "./~components/MuiMenu.js";
+import { MuiPopoverPaperSlot } from "./~components/MuiPopover.js";
 import { MuiSnackbar } from "./~components/MuiSnackbar.js";
 import { MuiStepIcon } from "./~components/MuiStepper.js";
 import {
@@ -30,8 +43,9 @@ import {
   MuiTableCell,
   MuiTableHead
 } from "./~components/MuiTable.js";
+import { MuiTab, MuiTabs } from "./~components/MuiTabs.js";
 import { MuiToggleButton } from "./~components/MuiToggleButton.js";
-import { MuiTypography } from "./~components/MuiTypography.js";
+import { MuiTypography, variantMapping } from "./~components/MuiTypography.js";
 import {
   ArrowDownIcon,
   CaretsUpDownIcon,
@@ -46,7 +60,8 @@ import {
   SuccessIcon,
   WarningIcon
 } from "./Icon.js";
-function createTheme() {
+function createTheme(args) {
+  const { portalContainer: container } = args;
   const palette = {
     primary: { main: "var(--stratakit-mui-palette-primary-main)" },
     secondary: { main: "var(--stratakit-mui-palette-secondary-main)" },
@@ -80,15 +95,19 @@ function createTheme() {
       // These are only hardcoded here as fallback. The CSS will take precedence.
       body1: { fontSize: 16 },
       body2: { fontSize: 14 },
-      h1: { fontSize: 48 },
-      h2: { fontSize: 40 },
-      h3: { fontSize: 32 },
-      h4: { fontSize: 28 },
-      h5: { fontSize: 24 },
-      h6: { fontSize: 20 },
+      h1: { fontSize: 20 },
+      h2: { fontSize: 18 },
+      h3: { fontSize: 16 },
+      h4: { fontSize: 14 },
+      h5: { fontSize: 12 },
+      h6: { fontSize: 12 },
       caption: { fontSize: 12 },
-      subtitle1: { fontSize: 12 },
-      subtitle2: { fontSize: 11 }
+      overline: {
+        fontSize: 12,
+        textTransform: "none"
+      },
+      subtitle1: { fontSize: 16 },
+      subtitle2: { fontSize: 14 }
     },
     shadows: [
       "none",
@@ -110,6 +129,10 @@ function createTheme() {
       MuiAccordion: {
         defaultProps: {
           component: Role.div,
+          disableGutters: true,
+          slots: {
+            root: MuiAccordionRootSlot
+          },
           slotProps: {
             region: {
               role: void 0,
@@ -120,24 +143,32 @@ function createTheme() {
       },
       MuiAccordionSummary: {
         defaultProps: {
-          component: Role.div,
+          component: MuiAccordionSummary,
           nativeButton: false,
           expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {})
         }
       },
       MuiAlert: {
         defaultProps: {
-          component: Role.div,
+          component: MuiAlert,
           variant: "outlined",
+          severity: "none",
+          role: "group",
+          // Overriding role="alert".
           iconMapping: {
             error: /* @__PURE__ */ jsx(ErrorIcon, {}),
             info: /* @__PURE__ */ jsx(InfoIcon, {}),
             success: /* @__PURE__ */ jsx(SuccessIcon, {}),
             warning: /* @__PURE__ */ jsx(WarningIcon, {})
+          },
+          slotProps: {
+            closeButton: {
+              edge: "end"
+            }
           }
         }
       },
-      MuiAlertTitle: { defaultProps: { component: Role.div } },
+      MuiAlertTitle: { defaultProps: { component: MuiAlertTitle } },
       MuiAutocomplete: {
         defaultProps: {
           popupIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
@@ -147,6 +178,7 @@ function createTheme() {
             {
               ...props,
               className: cx("MuiMenuItem-root", props.className),
+              "data-_sk-dense": ownerState.size === "small" ? "" : void 0,
               children: ownerState.getOptionLabel(option)
             },
             key
@@ -160,9 +192,12 @@ function createTheme() {
               // match Menu elevation
             },
             chip: {
-              size: "small"
+              size: "small",
+              component: MuiAutocompleteChip,
+              deleteIcon: /* @__PURE__ */ jsx(MuiAutocompleteChipDeleteIcon, {})
             },
             clearIndicator: {
+              component: MuiAutocompleteClearIndicator,
               tabIndex: 0,
               // make clear indicator focusable
               size: "small"
@@ -199,7 +234,8 @@ function createTheme() {
       MuiBadge: {
         defaultProps: {
           component: MuiBadge,
-          color: "secondary"
+          color: "secondary",
+          slotProps: { badge: { component: MuiBadgeBadge } }
         }
       },
       MuiBottomNavigation: { defaultProps: { component: Role.div } },
@@ -236,8 +272,18 @@ function createTheme() {
           // ButtonGroup overrides Button's disableRipple so we need to set it here as well
         }
       },
-      MuiCard: { defaultProps: { component: MuiCard } },
-      MuiCardActionArea: { defaultProps: { component: MuiCardActionArea } },
+      MuiCard: {
+        defaultProps: {
+          component: MuiCard,
+          variant: "outlined"
+        }
+      },
+      MuiCardActionArea: {
+        defaultProps: {
+          component: MuiCardActionArea,
+          slots: { focusHighlight: Nothing }
+        }
+      },
       MuiCardContent: { defaultProps: { component: Role.div } },
       MuiCardHeader: {
         defaultProps: {
@@ -245,7 +291,7 @@ function createTheme() {
           slotProps: {
             title: {
               // biome-ignore lint/suspicious/noExplicitAny: MUI's CardHeader.title.component is hardcoded to "span"
-              component: Role.h2
+              component: MuiCardHeaderTitle
             }
           }
         }
@@ -280,7 +326,12 @@ function createTheme() {
           variant: "inherit"
         }
       },
-      MuiDialogTitle: { defaultProps: { component: Role.h2 } },
+      MuiDialogTitle: {
+        defaultProps: {
+          component: Role.h2,
+          variant: "body-lg"
+        }
+      },
       MuiDivider: { defaultProps: { component: MuiDivider } },
       MuiDrawer: { defaultProps: { component: Role.div } },
       MuiFab: {
@@ -308,33 +359,7 @@ function createTheme() {
         }
       },
       MuiLink: {
-        defaultProps: { component: Role.a, color: "textPrimary" },
-        variants: [
-          {
-            props: { color: "primary" },
-            style: { color: "var(--stratakit-color-text-accent-strong)" }
-          },
-          {
-            props: { color: "secondary" },
-            style: { color: "var(--stratakit-color-text-neutral-primary)" }
-          },
-          {
-            props: { color: "error" },
-            style: { color: "var(--stratakit-color-text-critical-base)" }
-          },
-          {
-            props: { color: "info" },
-            style: { color: "var(--stratakit-color-text-info-base)" }
-          },
-          {
-            props: { color: "success" },
-            style: { color: "var(--stratakit-color-text-positive-base)" }
-          },
-          {
-            props: { color: "warning" },
-            style: { color: "var(--stratakit-color-text-attention-base)" }
-          }
-        ]
+        defaultProps: { component: Role.a, color: "textPrimary" }
       },
       MuiList: { defaultProps: { component: Role.ul } },
       MuiListItem: { defaultProps: { component: Role.li } },
@@ -355,6 +380,9 @@ function createTheme() {
       MuiMenu: {
         defaultProps: {
           component: Role.div,
+          slots: {
+            list: MuiMenuListSlot
+          },
           slotProps: {
             paper: {
               role: "presentation"
@@ -366,7 +394,7 @@ function createTheme() {
       MuiMenuItem: { defaultProps: { component: Role.li } },
       MuiMenuList: { defaultProps: { component: Role.ul } },
       MuiMobileStepper: { defaultProps: { component: Role.div } },
-      MuiModal: { defaultProps: { component: Role.div } },
+      MuiModal: { defaultProps: { component: Role.div, container } },
       MuiOutlinedInput: {
         defaultProps: {
           notched: false
@@ -390,7 +418,20 @@ function createTheme() {
       MuiPopover: {
         defaultProps: {
           component: Role.div,
-          slotProps: { paper: { role: "dialog" } }
+          disableScrollLock: true,
+          // Popover passes down `container` prop to `Modal` https://github.com/mui/material-ui/blob/708ef10e874efa63d2e4972bd902befa1912f2dc/packages/mui-material/src/Popover/Popover.js#L389
+          container,
+          slots: {
+            paper: MuiPopoverPaperSlot
+          },
+          slotProps: {
+            paper: { role: "dialog" }
+          }
+        }
+      },
+      MuiPopper: {
+        defaultProps: {
+          container
         }
       },
       MuiRadio: {
@@ -455,7 +496,24 @@ function createTheme() {
       },
       MuiSvgIcon: { defaultProps: { component: Role.svg } },
       MuiSwipeableDrawer: { defaultProps: { component: Role.div } },
-      MuiTabs: { defaultProps: { component: Role.div } },
+      MuiTabs: {
+        defaultProps: {
+          component: MuiTabs,
+          allowScrollButtonsMobile: true,
+          slotProps: {
+            scrollButtons: {
+              "aria-hidden": true
+            },
+            startScrollButtonIcon: {
+              component: ChevronLeftIcon
+            },
+            endScrollButtonIcon: {
+              component: ChevronRightIcon
+            }
+          }
+        }
+      },
+      MuiTab: { defaultProps: { component: MuiTab, iconPosition: "start" } },
       MuiTable: { defaultProps: { component: withRenderProp(Role, "table") } },
       MuiTableBody: {
         defaultProps: {
@@ -521,9 +579,40 @@ function createTheme() {
       },
       MuiTypography: {
         defaultProps: {
-          variant: "body2",
+          variant: "inherit",
+          variantMapping,
           component: MuiTypography
-        }
+        },
+        variants: [
+          {
+            props: { color: "primary" },
+            style: { color: "var(--stratakit-color-text-accent-strong)" }
+          },
+          {
+            props: { color: "secondary" },
+            style: { color: "var(--stratakit-color-text-neutral-primary)" }
+          },
+          {
+            props: { color: "textTertiary" },
+            style: { color: "var(--stratakit-color-text-neutral-tertiary)" }
+          },
+          {
+            props: { color: "error" },
+            style: { color: "var(--stratakit-color-text-critical-base)" }
+          },
+          {
+            props: { color: "info" },
+            style: { color: "var(--stratakit-color-text-info-base)" }
+          },
+          {
+            props: { color: "success" },
+            style: { color: "var(--stratakit-color-text-positive-base)" }
+          },
+          {
+            props: { color: "warning" },
+            style: { color: "var(--stratakit-color-text-attention-base)" }
+          }
+        ]
       }
     }
   });

package/dist/Root.internal.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
 /** This is similar to MUI's `StyledEngineProvider` but with a custom Emotion cache. */
-export declare function StyledEngineProvider({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function StyledEngineProvider({ children }: React.PropsWithChildren): React.JSX.Element;

package/dist/Root.internal.js

@@ -28,7 +28,7 @@ function _temp() {
 }
 function createEmotionCache() {
   const cache = createCache({
-    key: "css",
+    key: "mui",
     speedy: true,
     // This injects styles using the `insertRule` API.
     stylisPlugins: [prefixer]

package/dist/Root.js

@@ -8,9 +8,8 @@ import cx from "classnames";
 import { createTheme } from "./~createTheme.js";
 import { StyledEngineProvider } from "./Root.internal.js";
 import css from "./styles.css.js";
-const theme = createTheme();
 const packageName = "@stratakit/mui";
-const key = `${packageName}@${"0.4.2"}`;
+const key = `${packageName}@${"0.5.1"}`;
 const Root = forwardRef((props, forwardedRef) => {
   const {
     children,
@@ -18,16 +17,24 @@ const Root = forwardRef((props, forwardedRef) => {
     unstable_accentColor,
     ...rest
   } = props;
+  const [portalContainer, setPortalContainer] = React.useState();
+  const theme = React.useMemo(() => createTheme({
+    portalContainer
+  }), [portalContainer]);
   return /* @__PURE__ */ jsx(StyledEngineProvider, {
     children: /* @__PURE__ */ jsxs(ThemeProvider, {
       theme,
       defaultMode: colorScheme,
+      storageManager: null,
+      disableTransitionOnChange: true,
+      noSsr: true,
       children: [/* @__PURE__ */ jsx(ColorScheme, {
         colorScheme
       }), /* @__PURE__ */ jsxs(RootInner, {
         ...rest,
         colorScheme,
         unstable_accentColor,
+        portalContainerRef: setPortalContainer,
         ref: forwardedRef,
         children: [/* @__PURE__ */ jsx(Styles, {}), children]
       })]
@@ -40,13 +47,15 @@ const RootInner = forwardRef((props, forwardedRef) => {
     colorScheme,
     unstable_accentColor,
     rootNode,
+    portalContainerRef,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(StrataKitRoot, {
     ...rest,
     className: cx("\u{1F95D}MuiRoot", props.className),
     portalContainer: /* @__PURE__ */ jsx("div", {
-      className: "\u{1F95D}MuiRoot"
+      className: "\u{1F95D}MuiRoot",
+      ref: portalContainerRef
     }),
     colorScheme,
     unstable_accentColor,
@@ -86,7 +95,7 @@ function Styles() {
   const $ = _c(4);
   const rootContext = useSafeContext(RootContext);
   if (!rootContext.versions?.has(packageName)) {
-    rootContext.versions?.set(packageName, "0.4.2");
+    rootContext.versions?.set(packageName, "0.5.1");
   }
   const {
     rootNode,