@stratakit/mui 0.2.0 → 0.3.0

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

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { VisuallyHidden } from "@ariakit/react/visually-hidden";
+import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+import { DismissIcon } from "../Icon.js";
+import { MuiButtonBase } from "./MuiButtonBase.js";
+const MuiChipContext = React.createContext(void 0);
+const MuiChip = React.forwardRef(
+  (props, forwardedRef) => {
+    const { role, deleteLabel, ...rest } = props;
+    const clearId = React.useId();
+    const [labelId, setLabelId] = React.useState(void 0);
+    const isClickable = props.className?.includes("MuiChip-clickable") ?? false;
+    return /* @__PURE__ */ jsx(
+      MuiChipContext.Provider,
+      {
+        value: { labelId, setLabelId, clearId, isClickable, deleteLabel },
+        children: /* @__PURE__ */ jsx(
+          Role.div,
+          {
+            ...rest,
+            role: role === "button" ? void 0 : role,
+            tabIndex: void 0,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+DEV: MuiChip.displayName = "MuiChip";
+const MuiChipLabel = React.forwardRef((props, forwardedRef) => {
+  const defaultId = React.useId();
+  const { id = defaultId, ...rest } = props;
+  const { setLabelId, isClickable } = React.useContext(MuiChipContext) ?? {};
+  React.useEffect(() => {
+    if (!setLabelId) return;
+    setLabelId(id);
+    return () => {
+      setLabelId(void 0);
+    };
+  }, [id, setLabelId]);
+  const Component = isClickable ? MuiButtonBase : Role.span;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      id,
+      ...rest,
+      ref: forwardedRef
+    }
+  );
+});
+DEV: MuiChipLabel.displayName = "MuiChipLabel";
+const MuiChipDeleteIcon = React.forwardRef((props, forwardedRef) => {
+  const theme = useTheme();
+  const defaultLabel = theme.components?.MuiAutocomplete?.defaultProps?.clearText ?? "Clear";
+  const {
+    clearId,
+    labelId,
+    deleteLabel = defaultLabel
+  } = React.useContext(MuiChipContext) ?? {};
+  return /* @__PURE__ */ jsxs(
+    IconButton,
+    {
+      "aria-labelledby": `${clearId} ${labelId}`,
+      size: "small",
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { id: clearId, children: deleteLabel }),
+        /* @__PURE__ */ jsx(DismissIcon, {})
+      ]
+    }
+  );
+});
+DEV: MuiChipDeleteIcon.displayName = "MuiChipDeleteIcon";
+export {
+  MuiChip,
+  MuiChipDeleteIcon,
+  MuiChipLabel
+};

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

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { MuiButtonBase } from "./MuiButtonBase.js";
+const MuiIconButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label, ...rest } = props;
+    if (label) {
+      return /* @__PURE__ */ jsx(Tooltip, { title: label, describeChild: false, children: /* @__PURE__ */ jsx(MuiButtonBase, { ...rest, ref: forwardedRef }) });
+    }
+    return /* @__PURE__ */ jsx(MuiButtonBase, { ...rest, ref: forwardedRef });
+  }
+);
+DEV: MuiIconButton.displayName = "MuiIconButton";
+export {
+  MuiIconButton
+};

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@ariakit/react/portal";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const MuiSnackbar = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Portal, { ...props, ref: forwardedRef });
+  }
+);
+DEV: MuiSnackbar.displayName = "MuiSnackbar";
+export {
+  MuiSnackbar
+};

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

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const MuiTableHeadContext = React.createContext(false);
+const MuiTableHead = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(MuiTableHeadContext.Provider, { value: true, children: /* @__PURE__ */ jsx(Role, { render: /* @__PURE__ */ jsx("thead", {}), ...props, ref: forwardedRef }) });
+  }
+);
+DEV: MuiTableHead.displayName = "MuiTableHead";
+const MuiTableCell = forwardRef(
+  (props, forwardedRef) => {
+    const inHeader = React.useContext(MuiTableHeadContext);
+    const Component = inHeader ? "th" : "td";
+    return /* @__PURE__ */ jsx(Role, { render: /* @__PURE__ */ jsx(Component, {}), ...props, ref: forwardedRef });
+  }
+);
+DEV: MuiTableCell.displayName = "MuiTableCell";
+export {
+  MuiTableCell,
+  MuiTableHead
+};

package/dist/Root.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
-interface RootProps extends React.ComponentPropsWithoutRef<"div"> {
+import { Root as StrataKitRoot } from "@stratakit/foundations";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface RootProps extends BaseProps<"div">, Pick<React.ComponentProps<typeof StrataKitRoot>, "rootNode"> {
     children?: React.ReactNode;
     /**
      * The color scheme to use for all components on the page.

package/dist/Root.internal.d.ts

@@ -0,0 +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;

package/dist/Root.internal.js

@@ -0,0 +1,77 @@
+import { c as _c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+function StyledEngineProvider(t0) {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const [cache] = React.useState(_temp);
+  let t1;
+  if ($[0] !== cache || $[1] !== children) {
+    t1 = jsx(CacheProvider, {
+      value: cache,
+      children
+    });
+    $[0] = cache;
+    $[1] = children;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp() {
+  return createEmotionCache();
+}
+function createEmotionCache() {
+  const cache = createCache({
+    key: "css",
+    speedy: true,
+    // This injects styles using the `insertRule` API.
+    stylisPlugins: [prefixer]
+  });
+  const prevInsert = cache.insert;
+  cache.insert = (...args) => {
+    if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+      args[1].styles = `@layer mui {${args[1].styles}}`;
+    }
+    return prevInsert(...args);
+  };
+  return cache;
+}
+function prefixer(element) {
+  if (element.length > -1 && !element.return && element.type === "decl") {
+    element.return = prefix(element.value, element.length);
+  }
+}
+function prefix(value, length) {
+  switch (hash(value, length)) {
+    // color-adjust
+    case 5103:
+      return `-webkit-print-${value}${value}`;
+    // box-decoration-break
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // user-select, hyphens, text-size-adjust
+    case 4246:
+    case 6968:
+    case 2756:
+      return `-webkit-${value}${value}`;
+  }
+  return value;
+}
+function hash(value, length) {
+  return (value.charCodeAt(0) | 0) ^ 45 ? (((length << 2 ^ (value.charCodeAt(0) | 0)) << 2 ^ (value.charCodeAt(1) | 0)) << 2 ^ (value.charCodeAt(2) | 0)) << 2 ^ (value.charCodeAt(3) | 0) : 0;
+}
+export {
+  StyledEngineProvider
+};

package/dist/Root.js

@@ -1,15 +1,16 @@
 import { c as _c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { StyledEngineProvider, ThemeProvider, useColorScheme } from "@mui/material/styles";
+import { ThemeProvider, useColorScheme } from "@mui/material/styles";
 import { Root as StrataKitRoot } from "@stratakit/foundations";
 import { RootContext, useSafeContext } from "@stratakit/foundations/secret-internals";
 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.2.0"}`;
+const key = `${packageName}@${"0.3.0"}`;
 const Root = React.forwardRef((props, forwardedRef) => {
   const {
     children,
@@ -17,7 +18,6 @@ const Root = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(StyledEngineProvider, {
-    enableCssLayer: true,
     children: /* @__PURE__ */ jsxs(ThemeProvider, {
       theme,
       defaultMode: colorScheme,
@@ -36,12 +36,14 @@ const RootInner = React.forwardRef((props, forwardedRef) => {
   const {
     children,
     colorScheme,
+    rootNode,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(StrataKitRoot, {
     ...rest,
     className: cx("\u{1F95D}MuiRoot", props.className),
     colorScheme,
+    rootNode,
     synchronizeColorScheme: true,
     ref: forwardedRef,
     children
@@ -77,7 +79,7 @@ function Styles() {
   const $ = _c(4);
   const rootContext = useSafeContext(RootContext);
   if (!rootContext.versions?.has(packageName)) {
-    rootContext.versions?.set(packageName, "0.2.0");
+    rootContext.versions?.set(packageName, "0.3.0");
   }
   const {
     rootNode,