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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThemeWrapper = ThemeWrapper;
exports.default = Theme;
exports.getThemeClasses = getThemeClasses;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Context = _interopRequireDefault(require("./Context.js"));
var _Provider = _interopRequireDefault(require("./Provider.js"));
var _componentHelper = require("./component-helper.js");
var _withComponentMarkers = _interopRequireDefault(require("./helpers/withComponentMarkers.js"));
var _useMediaQuery = _interopRequireDefault(require("./useMediaQuery.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Theme(themeProps) {
  const context = _react.default.useContext(_Context.default);
  const {
    children,
    element,
    name,
    variant,
    size,
    contrastMode,
    colorScheme,
    surface,
    ...restProps
  } = themeProps;
  const prefersDarkColorScheme = (0, _useMediaQuery.default)({
    query: '(prefers-color-scheme: dark)',
    disabled: colorScheme !== 'auto'
  });
  const activeColorScheme = colorScheme === 'auto' ? prefersDarkColorScheme ? 'dark' : 'light' : colorScheme;
  const theme = (0, _componentHelper.extendPropsWithContext)({
    name,
    variant,
    size,
    contrastMode,
    colorScheme: activeColorScheme,
    surface
  }, null, context === null || context === void 0 ? void 0 : context.theme);
  if (surface === 'initial') {
    theme.surface = undefined;
  }
  return (0, _jsxRuntime.jsx)(_Provider.default, {
    theme: theme,
    children: (0, _jsxRuntime.jsx)(ThemeWrapper, {
      element: element,
      theme: theme,
      ...restProps,
      children: children
    })
  });
}
Theme.Context = ({
  element,
  ...themeProps
}) => {
  return (0, _jsxRuntime.jsx)(Theme, {
    ...themeProps,
    element: false
  });
};
(0, _withComponentMarkers.default)(Theme.Context, {
  _supportsSpacingProps: 'children'
});
function ThemeWrapper({
  children,
  theme,
  element = null,
  className = null,
  ...rest
}) {
  const Wrapper = element === false ? _react.default.Fragment : element || 'div';
  const ref = _react.default.useRef(null);
  if (Wrapper === _react.default.Fragment) {
    return children;
  }
  rest['ref'] = ref;
  const classNames = getThemeClasses(theme, className);
  const {
    name,
    variant,
    size
  } = theme;
  return (0, _jsxRuntime.jsx)(Wrapper, {
    "data-name": name,
    "data-variant": variant,
    "data-size": size,
    className: classNames,
    ...rest,
    children: children
  });
}
function getThemeClasses(theme, className = null) {
  if (!theme) {
    return className;
  }
  const {
    name,
    variant,
    size,
    contrastMode,
    colorScheme
  } = theme;
  return (0, _clsx.default)(className, 'eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), contrastMode && 'eufemia-theme__contrast-mode', colorScheme && `eufemia-theme__color-scheme--${colorScheme}`, size && `eufemia-theme__size--${size}`);
}
//# sourceMappingURL=Theme.js.map