@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.13

package/utils/css/context.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare function useCSSVariablesClass(): string;
+export declare function useCSSVariablesContext(): {
+  className: string;
+  tag: React.JSX.Element;
+};
+export declare function GridPortalWrapper({
+  children
+}: {
+  children: React.ReactNode;
+}): React.JSX.Element;
+export declare function GridCSSVariablesContext(props: {
+  children: any;
+}): React.JSX.Element;

package/utils/css/context.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridCSSVariablesContext = GridCSSVariablesContext;
+exports.GridPortalWrapper = GridPortalWrapper;
+exports.useCSSVariablesClass = useCSSVariablesClass;
+exports.useCSSVariablesContext = useCSSVariablesContext;
+var React = _interopRequireWildcard(require("react"));
+var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
+var _jsxRuntime = require("react/jsx-runtime");
+const CLASSNAME_PREFIX = 'MuiDataGridVariables';
+const CSSVariablesContext = /*#__PURE__*/React.createContext({
+  className: 'unset',
+  tag: /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+    href: "/unset"
+  })
+});
+function useCSSVariablesClass() {
+  return React.useContext(CSSVariablesContext).className;
+}
+function useCSSVariablesContext() {
+  return React.useContext(CSSVariablesContext);
+}
+function GridPortalWrapper({
+  children
+}) {
+  const className = useCSSVariablesClass();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: children
+  });
+}
+function GridCSSVariablesContext(props) {
+  const config = (0, _useGridConfiguration.useGridConfiguration)();
+  const description = config.hooks.useCSSVariables();
+  const context = React.useMemo(() => {
+    const className = `${CLASSNAME_PREFIX}-${description.id}`;
+    const cssString = `.${className}{${variablesToString(description.variables)}}`;
+    const tag = /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+      href: `/${className}`,
+      children: cssString
+    });
+    return {
+      className,
+      tag
+    };
+  }, [description]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CSSVariablesContext.Provider, {
+    value: context,
+    children: props.children
+  });
+}
+function variablesToString(variables) {
+  let output = '';
+  for (const key in variables) {
+    if (Object.hasOwn(variables, key)) {
+      output += `${key}:${variables[key]};`;
+    }
+  }
+  return output;
+}

package/utils/index.d.ts

@@ -1 +1,2 @@
-export type { OutputSelector } from './createSelector';
+export type { OutputSelector } from './createSelector';
+export { GridPortalWrapper } from "./css/context.js";

package/utils/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "GridPortalWrapper", {
+  enumerable: true,
+  get: function () {
+    return _context.GridPortalWrapper;
+  }
+});
+var _context = require("./css/context");