@greensight/gds/emotion/cjs/index-CjAXi4ow.js

Greensight Design System

var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-mkWCC7yp.js');
var emotionReact_esm = require('./emotion-react.esm-DjRiK_3N.js');
var React = require('react');

var extractCSSOption = function extractCSSOption(optionized, option) {
  return optionized[option];
};
var useThemeCSSPart = function useThemeCSSPart(theme, state) {
  var actualTheme = React.useMemo(function () {
    return typeof theme === 'function' ? theme(state) : theme;
  }, [state, theme]);
  return React.useCallback(function (key, extraData) {
    var element = actualTheme[key];
    if (typeof element === 'function') return element(extraData ? _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), extraData) : state);
    return element;
  }, [state, actualTheme]);
};
var useThemeCSS = function useThemeCSS(theme, state) {
  return React.useMemo(function () {
    var res = {};
    var keys = Object.keys(theme);
    keys.forEach(function (key) {
      var element = theme[key];
      if (typeof element === 'function') res[key] = element(state);else res[key] = element;
    });
    return res;
  }, [state, theme]);
};

var _excluded = ["children", "block", "size", "theme", "variant", "Icon", "iconAfter", "hidden", "type", "as", "external", "disabled", "rounded", "css", "typography", "wrap", "getTypographyCSS"],
  _excluded2 = ["theme", "variant", "size"];
/**
 * Button component.
 *
 * Renders <button /> or <a /> (pass `href`) or any custom element (pass `as`).
 *
 * Usage with themes:
 * @example
 * enum Variants {
 *  primary = 'primary',
 * }
 * enum Sizes {
 *  sm = 'sm',
 * }
 * const Button = createButtonWithTheme<typeof Variants, typeof Sizes>();
 * const Test = () => (
 *  <Button
 *   as="a"
 *   href="#"
 *   variant="primary"
 *   theme={{
 *    button: {},
 *    icon: {},
 *   }}
 *  >
 *   Content
 * </Button>
 *);
 */
var BaseButton = function BaseButton(_ref, ref) {
  var children = _ref.children,
    _ref$block = _ref.block,
    block = _ref$block === void 0 ? false : _ref$block,
    size = _ref.size,
    theme = _ref.theme,
    variant = _ref.variant,
    Icon = _ref.Icon,
    _ref$iconAfter = _ref.iconAfter,
    iconAfter = _ref$iconAfter === void 0 ? false : _ref$iconAfter,
    _ref$hidden = _ref.hidden,
    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'button' : _ref$type,
    as = _ref.as,
    _ref$external = _ref.external,
    external = _ref$external === void 0 ? false : _ref$external,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$rounded = _ref.rounded,
    rounded = _ref$rounded === void 0 ? true : _ref$rounded,
    css = _ref.css,
    typography = _ref.typography,
    _ref$wrap = _ref.wrap,
    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
    getTypographyCSS = _ref.getTypographyCSS,
    props = _rollupPluginBabelHelpers._objectWithoutProperties(_ref, _excluded);
  var hasChildren = !!children;
  var state = React.useMemo(function () {
    return {
      disabled: disabled,
      hasChildren: hasChildren,
      hidden: hidden,
      size: size,
      variant: variant,
      block: block,
      iconAfter: iconAfter,
      rounded: rounded,
      typography: typography,
      wrap: wrap
    };
  }, [disabled, hasChildren, hidden, size, variant, block, iconAfter, rounded, typography, wrap]);
  if (!theme) {
    throw new Error('[Button] theme is required');
  }

  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  var _useThemeCSS = useThemeCSS(theme, state),
    totalCSS = _useThemeCSS.button,
    iconCSS = _useThemeCSS.icon;
  var icon = Icon ? emotionReact_esm.jsx(Icon, {
    css: iconCSS
  }) : null;
  return emotionReact_esm.jsx(as || 'button', _rollupPluginBabelHelpers._objectSpread2({
    ref: ref,
    type: !as || as === 'button' ? type : null,
    target: external ? '_blank' : null,
    rel: external ? 'nofollow noopener' : null,
    css: [totalCSS, typography && getTypographyCSS ? getTypographyCSS(typography) : {}, css],
    disabled: disabled
  }, props), emotionReact_esm.jsx(React.Fragment, null, icon && !iconAfter && icon, hidden ? '' : children, icon && iconAfter && icon));
};
var ButtonRef = /*#__PURE__*/React.forwardRef(BaseButton);

/**
 * Proxy component setting initial values for theme, variant, and size for button in the used project.
 */
var createButtonWithTheme = function createButtonWithTheme(defaultTheme, defaultVariant, defaultSize, getTypographyCSS) {
  // as any нужны т.к. в новых версиях ts ругается в целом на такой компонент
  var renderThemedButton = function renderThemedButton(_ref2, ref) {
    var _ref2$theme = _ref2.theme,
      theme = _ref2$theme === void 0 ? defaultTheme : _ref2$theme,
      _ref2$variant = _ref2.variant,
      variant = _ref2$variant === void 0 ? defaultVariant : _ref2$variant,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? defaultSize : _ref2$size,
      props = _rollupPluginBabelHelpers._objectWithoutProperties(_ref2, _excluded2);
    return emotionReact_esm.jsx(ButtonRef, _rollupPluginBabelHelpers._extends({
      ref: ref,
      getTypographyCSS: getTypographyCSS,
      theme: theme,
      variant: variant,
      size: size
    }, props));
  };
  renderThemedButton.displayName = 'Button';
  return /*#__PURE__*/React.forwardRef(renderThemedButton);
};

exports.BaseButton = BaseButton;
exports.createButtonWithTheme = createButtonWithTheme;
exports.extractCSSOption = extractCSSOption;
exports.useThemeCSS = useThemeCSS;
exports.useThemeCSSPart = useThemeCSSPart;