@stratakit/mui 0.4.1 → 0.5.0

package/dist/DEV/~components/MuiAutocomplete.js

@@ -1,23 +1,146 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { Role } from "@ariakit/react/role";
-import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { ThemeProvider } from "@mui/material/styles";
+import {
+  forwardRef,
+  useEventHandlers,
+  useMergedRefs
+} from "@stratakit/foundations/secret-internals";
+import { MuiChip, MuiChipDeleteIcon } from "./MuiChip.js";
 import { MuiInputLabelContext } from "./MuiInputLabel.js";
-const MuiAutocomplete = forwardRef(
+const MuiAutocompleteContext = React.createContext(void 0);
+const MuiAutocomplete = forwardRef((props, forwardedRef) => {
+  const [labelId, setLabelId] = React.useState(void 0);
+  const [inputRootRef, setInputRootRef] = React.useState(
+    null
+  );
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      theme: (outerTheme) => ({
+        ...outerTheme,
+        components: {
+          ...outerTheme.components,
+          MuiTextField: {
+            defaultProps: {
+              slotProps: {
+                input: {
+                  component: MuiAutocompleteTextFieldInput
+                },
+                htmlInput: {
+                  slot: "input"
+                  // Assign input element to the slot named "input"
+                }
+              }
+            }
+          }
+        }
+      }),
+      children: /* @__PURE__ */ jsx(
+        MuiAutocompleteContext.Provider,
+        {
+          value: { inputRootRef, setInputRootRef },
+          children: /* @__PURE__ */ jsx(MuiInputLabelContext.Provider, { value: { setLabelId }, children: /* @__PURE__ */ jsx(
+            Role.div,
+            {
+              role: "group",
+              "aria-labelledby": labelId,
+              ...props,
+              onKeyDown: useEventHandlers((e) => {
+                if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+                  e.defaultMuiPrevented = true;
+                }
+              }, props.onKeyDown),
+              ref: forwardedRef
+            }
+          ) })
+        }
+      )
+    }
+  );
+});
+DEV: MuiAutocomplete.displayName = "MuiAutocomplete";
+const MuiAutocompleteClearIndicator = forwardRef(
   (props, forwardedRef) => {
-    const [labelId, setLabelId] = React.useState(void 0);
-    return /* @__PURE__ */ jsx(MuiInputLabelContext.Provider, { value: { setLabelId }, children: /* @__PURE__ */ jsx(
-      Role.div,
+    return /* @__PURE__ */ jsx(
+      Role.button,
       {
-        role: "group",
-        "aria-labelledby": labelId,
         ...props,
+        onKeyDown: useEventHandlers(props.onKeyDown, (e) => {
+          e.stopPropagation();
+        }),
         ref: forwardedRef
       }
-    ) });
+    );
   }
 );
-DEV: MuiAutocomplete.displayName = "MuiAutocomplete";
+DEV: MuiAutocompleteClearIndicator.displayName = "MuiAutocompleteClearIndicator";
+const MuiAutocompleteChip = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(MuiChip, { slot: "chips", ...props, role: "listitem", ref: forwardedRef });
+  }
+);
+DEV: MuiAutocompleteChip.displayName = "MuiAutocompleteChip";
+const MuiAutocompleteChipDeleteIcon = forwardRef((props, forwardedRef) => {
+  const { inputRootRef } = React.useContext(MuiAutocompleteContext) ?? {};
+  return /* @__PURE__ */ jsx(
+    MuiChipDeleteIcon,
+    {
+      ...props,
+      onKeyDown: useEventHandlers(props.onKeyDown, (e) => {
+        e.stopPropagation();
+      }),
+      onClick: useEventHandlers(props.onClick, () => {
+        if (!inputRootRef) return;
+        const htmlInput = inputRootRef.getElementsByClassName(
+          "MuiAutocomplete-input"
+        )[0];
+        if (!htmlInput) return;
+        htmlInput.focus();
+      }),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: MuiAutocompleteChipDeleteIcon.displayName = "MuiAutocompleteChipDeleteIcon";
+const MuiAutocompleteTextFieldInput = forwardRef(
+  (props, forwardedRef) => {
+    const { setInputRootRef } = React.useContext(MuiAutocompleteContext) ?? {};
+    const [host, setHost] = React.useState(null);
+    const [shadow, setShadow] = React.useState(null);
+    React.useEffect(() => {
+      if (!host) return;
+      if (!host.shadowRoot) {
+        host.attachShadow({ mode: "open" });
+      }
+      setShadow(host.shadowRoot);
+    }, [host]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Role,
+        {
+          ...props,
+          ref: useMergedRefs(setHost, setInputRootRef, forwardedRef)
+        }
+      ),
+      shadow && ReactDOM.createPortal(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("slot", { name: "input" }),
+          /* @__PURE__ */ jsx("slot", { role: "list", name: "chips" }),
+          /* @__PURE__ */ jsx("slot", {}),
+          " "
+        ] }),
+        shadow
+      )
+    ] });
+  }
+);
+DEV: MuiAutocompleteTextFieldInput.displayName = "MuiAutocompleteTextFieldInput";
 export {
-  MuiAutocomplete
+  MuiAutocomplete,
+  MuiAutocompleteChip,
+  MuiAutocompleteChipDeleteIcon,
+  MuiAutocompleteClearIndicator
 };

package/dist/DEV/~components/MuiBadge.js

@@ -1,20 +1,38 @@
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { Role } from "@ariakit/react/role";
 import {
-  forwardRef
+  forwardRef,
+  useSafeContext
 } from "@stratakit/foundations/secret-internals";
+const MuiBadgeContext = React.createContext(
+  void 0
+);
 const MuiBadge = forwardRef((props, forwardedRef) => {
   const { inline, ...rest } = props;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MuiBadgeContext.Provider, { value: { inline }, children: /* @__PURE__ */ jsx(
     Role.span,
     {
       ...rest,
       "data-_sk-inline": inline ? "" : void 0,
       ref: forwardedRef
     }
-  );
+  ) });
 });
 DEV: MuiBadge.displayName = "MuiBadge";
+const MuiBadgeBadge = forwardRef((props, forwardedRef) => {
+  const { inline } = useSafeContext(MuiBadgeContext);
+  return /* @__PURE__ */ jsx(
+    Role.span,
+    {
+      ...props,
+      "aria-hidden": inline ? void 0 : props["aria-hidden"],
+      ref: forwardedRef
+    }
+  );
+});
+DEV: MuiBadgeBadge.displayName = "MuiBadgeBadge";
 export {
-  MuiBadge
+  MuiBadge,
+  MuiBadgeBadge
 };

package/dist/DEV/~components/MuiCard.js

@@ -1,5 +1,6 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { Role } from "@ariakit/react/role";
 import {
   forwardRef,
@@ -10,7 +11,6 @@ import { MuiButtonBase } from "./MuiButtonBase.js";
 const MuiCardContext = React.createContext(void 0);
 const MuiCard = forwardRef(
   (props, forwardedRef) => {
-    const { role, ...rest } = props;
     const [actionAreaElement, setActionAreaElement] = React.useState(void 0);
     const handleActionAreaClick = (event) => {
       if (!actionAreaElement) return;
@@ -28,7 +28,7 @@ const MuiCard = forwardRef(
           Role,
           {
             render: /* @__PURE__ */ jsx("article", {}),
-            ...rest,
+            ...props,
             "data-_sk-actionable": actionAreaElement ? "" : void 0,
             onClick: useEventHandlers(props.onClick, handleActionAreaClick),
             ref: forwardedRef
@@ -39,20 +39,63 @@ const MuiCard = forwardRef(
   }
 );
 DEV: MuiCard.displayName = "MuiCard";
-const MuiCardActionArea = forwardRef(
+const MuiCardHeaderTitle = forwardRef(
   (props, forwardedRef) => {
-    const { role, ...rest } = props;
-    const context = React.useContext(MuiCardContext);
+    const cardContext = React.useContext(MuiCardContext);
+    const cardActionAreaContext = React.useContext(MuiCardActionAreaContext);
+    const { children, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      MuiButtonBase,
+      Role.h2,
       {
         ...rest,
-        ref: useMergedRefs(context?.setActionAreaElement, forwardedRef)
+        ref: useMergedRefs(
+          cardActionAreaContext?.setTitleElement,
+          forwardedRef
+        ),
+        children: (() => {
+          if (cardActionAreaContext) {
+            return cardContext?.actionAreaElement ? ReactDOM.createPortal(children, cardContext.actionAreaElement) : null;
+          }
+          return children;
+        })()
       }
     );
   }
 );
+DEV: MuiCardHeaderTitle.displayName = "MuiCardHeaderTitle";
+const MuiCardActionAreaContext = React.createContext(void 0);
+const MuiCardActionArea = forwardRef(
+  (props, forwardedRef) => {
+    const { children, ...rest } = props;
+    const [titleElement, setTitleElement] = React.useState(void 0);
+    return /* @__PURE__ */ jsx(MuiCardActionAreaContext.Provider, { value: { setTitleElement }, children: (() => {
+      if (titleElement) {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          ReactDOM.createPortal(
+            /* @__PURE__ */ jsx(MuiCardActionAreaButton, { ...rest, ref: forwardedRef }),
+            titleElement
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsx(MuiCardActionAreaButton, { ...rest, ref: forwardedRef, children });
+    })() });
+  }
+);
 DEV: MuiCardActionArea.displayName = "MuiCardActionArea";
+const MuiCardActionAreaButton = forwardRef(
+  (props, forwardedRef) => {
+    const cardContext = React.useContext(MuiCardContext);
+    return /* @__PURE__ */ jsx(
+      MuiButtonBase,
+      {
+        ...props,
+        ref: useMergedRefs(cardContext?.setActionAreaElement, forwardedRef)
+      }
+    );
+  }
+);
+DEV: MuiCardActionAreaButton.displayName = "MuiCardActionAreaButton";
 const MEDIA_COMPONENTS = ["audio", "iframe", "img", "picture", "video"];
 function extractBackgroundImageUrl(style) {
   const backgroundImage = style?.backgroundImage;
@@ -98,5 +141,6 @@ DEV: MuiCardMedia.displayName = "MuiCardMedia";
 export {
   MuiCard,
   MuiCardActionArea,
+  MuiCardHeaderTitle,
   MuiCardMedia
 };

package/dist/DEV/~components/MuiDivider.js

@@ -4,7 +4,8 @@ import { forwardRef } from "@stratakit/foundations/secret-internals";
 const MuiDivider = forwardRef((props, forwardedRef) => {
   const { children, ...rest } = props;
   const defaultRender = (() => {
-    if (children || props["aria-orientation"] === "vertical") return /* @__PURE__ */ jsx("div", {});
+    if (children || props["aria-orientation"] === "vertical" || props.role === "presentation")
+      return /* @__PURE__ */ jsx("div", {});
     return /* @__PURE__ */ jsx("hr", {});
   })();
   return /* @__PURE__ */ jsx(Role, { render: defaultRender, ...rest, ref: forwardedRef, children });

package/dist/DEV/~components/MuiMenu.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import MenuList from "@mui/material/MenuList";
+import {
+  forwardRef,
+  useMergedRefs
+} from "@stratakit/foundations/secret-internals";
+import { useFallbackLabel } from "./MuiPopover.js";
+const MuiMenuListSlot = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      MenuList,
+      {
+        ...props,
+        ref: useMergedRefs(forwardedRef, useFallbackLabel(props))
+      }
+    );
+  }
+);
+DEV: MuiMenuListSlot.displayName = "MuiMenuListSlot";
+export {
+  MuiMenuListSlot
+};

package/dist/DEV/~components/MuiPopover.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { PopoverPaper } from "@mui/material/Popover";
+import {
+  forwardRef,
+  useMergedRefs
+} from "@stratakit/foundations/secret-internals";
+function useFallbackLabel(props) {
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ownerState = {}
+  } = props;
+  return React.useCallback(
+    (element) => {
+      if (!element || !(ownerState.anchorEl instanceof HTMLElement)) return;
+      if (ariaLabel || ariaLabelledBy || element.ariaLabel || element.ariaLabelledByElements?.length) {
+        return;
+      }
+      element.ariaLabelledByElements = [ownerState.anchorEl];
+    },
+    [ownerState.anchorEl, ariaLabel, ariaLabelledBy]
+  );
+}
+const MuiPopoverPaperSlot = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      PopoverPaper,
+      {
+        ...props,
+        ref: useMergedRefs(forwardedRef, useFallbackLabel(props))
+      }
+    );
+  }
+);
+DEV: MuiPopoverPaperSlot.displayName = "MuiPopoverPaperSlot";
+export {
+  MuiPopoverPaperSlot,
+  useFallbackLabel
+};

package/dist/DEV/~components/MuiTabs.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import {
+  forwardRef,
+  useEventHandlers
+} from "@stratakit/foundations/secret-internals";
+const MuiTabs = forwardRef((props, forwardedRef) => {
+  const { size = "medium", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      ...rest,
+      "data-_sk-size": size !== "medium" ? size : void 0,
+      ref: forwardedRef
+    }
+  );
+});
+DEV: MuiTabs.displayName = "MuiTabs";
+const MuiTab = forwardRef(
+  (props, forwardedRef) => {
+    const motionOk = useMediaQuery("(prefers-reduced-motion: no-preference)");
+    return /* @__PURE__ */ jsx(
+      Role.button,
+      {
+        ...props,
+        onFocus: useEventHandlers(props.onFocus, (event) => {
+          event?.currentTarget?.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+            behavior: motionOk ? "smooth" : "auto"
+          });
+        }),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: MuiTab.displayName = "MuiTab";
+export {
+  MuiTab,
+  MuiTabs
+};

package/dist/DEV/~components/MuiTypography.js

@@ -4,12 +4,12 @@ import { forwardRef } from "@stratakit/foundations/secret-internals";
 const variantMapping = {
   h1: "h1",
   h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
+  h3: "h2",
+  h4: "h2",
+  h5: "h2",
+  h6: "h2",
+  subtitle1: "h2",
+  subtitle2: "h2",
   body1: "p",
   body2: "p",
   inherit: "p",
@@ -17,28 +17,31 @@ const variantMapping = {
   caption: "span",
   overline: "span"
 };
-const variants = Object.keys(variantMapping);
+const muiVariants = Object.keys(
+  variantMapping
+);
 const headings = ["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2"];
 const MuiTypography = forwardRef((props, forwardedRef) => {
   const classList = props.className?.split(" ").filter(Boolean);
-  const variant = (() => {
-    const variant2 = variants.find(
+  const muiVariant = (() => {
+    const variant = muiVariants.find(
       (name) => classList?.includes(`MuiTypography-${name}`)
     );
-    return variant2 || "body2";
+    return variant || "body2";
   })();
-  DEV: if (!props.render && headings.includes(variant)) {
+  DEV: if (!props.render && headings.includes(muiVariant)) {
     console.warn(
       "MuiTypography: Please explicitly set the `render` prop to ensure correct heading structure."
     );
   }
   const render = (() => {
-    const Element = variantMapping[variant] || "p";
+    const Element = muiVariant in variantMapping ? variantMapping[muiVariant] : "p";
     return /* @__PURE__ */ jsx(Element, {});
   })();
   return /* @__PURE__ */ jsx(Role, { render, ...props, ref: forwardedRef });
 });
 DEV: MuiTypography.displayName = "MuiTypography";
 export {
-  MuiTypography
+  MuiTypography,
+  variantMapping
 };