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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["children", "element", "name", "variant", "size", "propMapping", "contrastMode", "darkMode", "darkBackground"],
  _excluded2 = ["element"],
  _excluded3 = ["children", "theme", "element", "className"];
import React from 'react';
import classnames from 'classnames';
import Context from './Context';
import Provider from './Provider';
import { extendPropsWithContext } from './component-helper';
export default function Theme(themeProps) {
  const context = React.useContext(Context);
  const {
      children,
      element,
      name,
      variant,
      size,
      propMapping,
      contrastMode,
      darkMode,
      darkBackground
    } = themeProps,
    restProps = _objectWithoutProperties(themeProps, _excluded);
  const theme = extendPropsWithContext({
    name,
    variant,
    size,
    propMapping,
    contrastMode,
    darkMode,
    darkBackground
  }, null, context === null || context === void 0 ? void 0 : context.theme);
  return React.createElement(Provider, {
    theme: theme
  }, React.createElement(ThemeWrapper, _extends({
    element: element,
    theme: theme
  }, restProps), children));
}
Theme.Provider = _ref => {
  let {
      element
    } = _ref,
    themeProps = _objectWithoutProperties(_ref, _excluded2);
  return React.createElement(Theme, _extends({}, themeProps, {
    element: false
  }));
};
Theme.Provider['_supportsSpacingProps'] = 'children';
export function ThemeWrapper(_ref2) {
  let {
      children,
      theme,
      element = null,
      className = null
    } = _ref2,
    rest = _objectWithoutProperties(_ref2, _excluded3);
  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