@mui/x-data-grid/esm/utils/css/context.js

The Community plan edition of the Data Grid components (MUI X).

import * as React from 'react';
import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
import { jsx as _jsx } from "react/jsx-runtime";
const CLASSNAME_PREFIX = 'MuiDataGridVariables';
const CSSVariablesContext = /*#__PURE__*/React.createContext({
  className: 'unset',
  tag: /*#__PURE__*/_jsx("style", {
    href: "/unset"
  })
});
export function useCSSVariablesClass() {
  return React.useContext(CSSVariablesContext).className;
}
export function useCSSVariablesContext() {
  return React.useContext(CSSVariablesContext);
}
export function GridPortalWrapper({
  children
}) {
  const className = useCSSVariablesClass();
  return /*#__PURE__*/_jsx("div", {
    className: className,
    children: children
  });
}
export function GridCSSVariablesContext(props) {
  const config = 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__*/_jsx("style", {
      href: `/${className}`,
      children: cssString
    });
    return {
      className,
      tag
    };
  }, [description]);
  return /*#__PURE__*/_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;
}