@dnb/eufemia/es/shared/Theme.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import classnames from 'classnames';
import Context from "./Context.js";
import Provider from "./Provider.js";
import { extendPropsWithContext } from "./component-helper.js";
export default function Theme(themeProps) {
  const context = React.useContext(Context);
  const {
    children,
    element,
    name,
    variant,
    size,
    propMapping,
    contrastMode,
    darkMode,
    darkBackground,
    ...restProps
  } = themeProps;
  const theme = extendPropsWithContext({
    name,
    variant,
    size,
    propMapping,
    contrastMode,
    darkMode,
    darkBackground
  }, null, context?.theme);
  return React.createElement(Provider, {
    theme: theme
  }, React.createElement(ThemeWrapper, _extends({
    element: element,
    theme: theme
  }, restProps), children));
}
Theme.Provider = ({
  element,
  ...themeProps
}) => {
  return React.createElement(Theme, _extends({}, themeProps, {
    element: false
  }));
};
Theme.Provider['_supportsSpacingProps'] = 'children';
export function ThemeWrapper({
  children,
  theme,
  element = null,
  className = null,
  ...rest
}) {
  const Wrapper = element === false ? React.Fragment : element || 'div';
  const ref = React.useRef(null);
  if (Wrapper === React.Fragment) {
    return children;
  }
  rest['ref'] = ref;
  const classNames = getThemeClasses(theme, className);
  const {
    name,
    variant,
    size
  } = theme;
  return React.createElement(Wrapper, _extends({
    "data-name": name,
    "data-variant": variant,
    "data-size": size,
    className: classNames
  }, rest), children);
}
export function getThemeClasses(theme, className = null) {
  if (!theme) {
    return className;
  }
  const {
    name,
    variant,
    size,
    propMapping,
    contrastMode,
    darkMode
  } = theme;
  return classnames(className, 'eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), propMapping && `eufemia-theme__prop-mapping--${propMapping}`, contrastMode && 'eufemia-theme__contrast-mode', darkMode && 'eufemia-theme__dark-mode', size && `eufemia-theme__size--${size}`);
}
//# sourceMappingURL=Theme.js.map