@xcritical/button/dist/button.cjs.development.js

<>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var theme = require('@xcritical/theme');
var polished = require('polished');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var get = _interopDefault(require('lodash.get'));
var memoize = _interopDefault(require('micro-memoize'));
var fastEquals = require('fast-equals');

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

var generateApperance = function generateApperance(_ref) {
  var _ref$background = _ref.background,
      background = _ref$background === void 0 ? '' : _ref$background,
      color = _ref.color,
      boxShadowColor = _ref.boxShadowColor,
      fontWeight = _ref.fontWeight,
      _outline = _ref.outline,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? '' : _ref$borderColor;
  return _extends({
    background: background,
    color: color,
    fill: color,
    boxShadowColor: boxShadowColor != null ? boxShadowColor : polished.darken(0.1, background)
  }, fontWeight && {
    fontWeight: fontWeight
  }, {
    _outline: _outline,
    borderColor: borderColor || background,
    hover: _extends({
      background: polished.darken(0.1, background),
      color: color,
      boxShadowColor: boxShadowColor != null ? boxShadowColor : polished.darken(0.1, background)
    }, fontWeight && {
      fontWeight: fontWeight
    }),
    selected: _extends({
      background: polished.darken(0.1, background),
      color: color,
      boxShadowColor: boxShadowColor != null ? boxShadowColor : polished.darken(0.1, background)
    }, fontWeight && {
      fontWeight: fontWeight
    }, {
      _outline: _outline,
      borderColor: borderColor || background
    }),
    active: _extends({
      background: polished.darken(0.1, background),
      color: color,
      boxShadowColor: boxShadowColor != null ? boxShadowColor : polished.darken(0.1, background)
    }, fontWeight && {
      fontWeight: fontWeight
    }, {
      _outline: _outline,
      borderColor: borderColor || background
    }),
    disabled: _extends({
      background: background,
      color: color,
      boxShadowColor: boxShadowColor != null ? boxShadowColor : polished.darken(0.1, background)
    }, fontWeight && {
      fontWeight: fontWeight
    }, {
      _outline: _outline,
      borderColor: borderColor || background
    })
  });
};

var buttonThemeNamespace = '@xcritical\\button';
var buttonGroupThemeNamespace = '@xcritical\\button-group';
var buttonThemeStyle = {
  paddingBottom: '7px',
  paddingLeft: '20px',
  paddingRight: '20px',
  paddingTop: '7px',
  appearance: {
    "default": /*#__PURE__*/_extends({}, /*#__PURE__*/generateApperance({
      background: theme.colors.GRAY_LIGHT,
      color: theme.colors.CHAROCOAL,
      outline: {
        background: theme.colors.WHITE,
        color: theme.colors.CHAROCOAL
      }
    })),
    primary: /*#__PURE__*/generateApperance({
      background: theme.colors.PRIMARY,
      color: theme.colors.WHITE
    }),
    secondary: /*#__PURE__*/generateApperance({
      background: theme.colors.SECONDARY,
      color: theme.colors.WHITE
    }),
    success: /*#__PURE__*/generateApperance({
      background: theme.colors.SUCCESS,
      color: theme.colors.WHITE
    }),
    danger: /*#__PURE__*/generateApperance({
      background: theme.colors.DANGER,
      color: theme.colors.WHITE
    }),
    warning: /*#__PURE__*/generateApperance({
      background: theme.colors.WARNING,
      color: theme.colors.WHITE
    }),
    info: /*#__PURE__*/generateApperance({
      background: theme.colors.INFO,
      color: theme.colors.WHITE
    }),
    dark: /*#__PURE__*/generateApperance({
      background: theme.colors.DARK,
      color: theme.colors.WHITE
    }),
    light: /*#__PURE__*/generateApperance({
      background: theme.colors.LIGHT,
      color: theme.colors.CHAROCOAL
    }),
    link: /*#__PURE__*/generateApperance({
      background: 'transparent',
      color: theme.colors.PRIMARY,
      fontWeight: 'inherit',
      borderColor: 'transparent',
      outline: {
        background: 'transparent',
        color: theme.colors.PRIMARY,
        borderColor: 'transparent'
      }
    })
  },
  lineHeight: 1.69,
  prefixSpacing: 15,
  postfixSpacing: 15,
  fontWeight: 600,
  fontSize: '14px',
  borderRadius: '3px'
};
var defaultButtonGroupTheme = {
  display: 'inline-block',
  borderRadius: '5px'
};

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var _excluded = ["_outline"],
    _excluded2 = ["appearance", "prefixSpacing", "postfixSpacing"],
    _excluded3 = ["background", "borderColor", "outline", "hover", "active", "disabled", "selected"];
var buttonTheme = /*#__PURE__*/memoize(function (theme$1, propertyPath) {
  if (theme$1 === void 0) {
    theme$1 = {};
  }

  var func = theme.getThemedState(buttonThemeNamespace, buttonThemeStyle);
  return func(theme$1, propertyPath);
}, {
  isEqual: fastEquals.shallowEqual
});
var buttonAppearanceTheme = /*#__PURE__*/memoize(function (theme$1, appearanceName, baseAppearance, propertyPath) {
  if (theme$1 === void 0) {
    theme$1 = {};
  }

  var func = theme.getAppearanceTheme(buttonThemeNamespace, buttonThemeStyle);
  return func(theme$1, appearanceName, propertyPath, baseAppearance);
}, {
  isEqual: fastEquals.shallowEqual
});

var getTransition = function getTransition(state) {
  if (state === void 0) {
    state = 'default';
  }

  return state === 'hover' ? 'background 0s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)' : 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)';
};

var getCursor = function getCursor(state) {
  if (state === void 0) {
    state = 'default';
  }

  return state === 'hover' || state === 'active' || state === 'selected' ? 'pointer' : state === 'disabled' ? 'not-allowed' : 'default';
};

var getAppearanceStyleProperty = /*#__PURE__*/memoize(function (theme$1, baseAppearance, appearance, stateName, ghost) {
  if (theme$1 === void 0) {
    theme$1 = {};
  }

  var appearanceTheme = buttonAppearanceTheme(theme$1, appearance, baseAppearance);
  var statesTheme = theme.getStatesTheme(appearanceTheme, stateName);

  if (ghost) {
    var outline = statesTheme('outline', {
      background: 'white',
      color: get(appearanceTheme, 'background')
    });
    return _extends({}, statesTheme(), outline);
  }

  return statesTheme();
}, {
  isEqual: fastEquals.shallowEqual
});

var getVerticalAlign = function getVerticalAlign(spacing) {
  if (spacing === void 0) {
    spacing = 'default';
  }

  return spacing === 'none' ? 'baseline' : 'middle';
};

var getWidth = function getWidth(shouldFitContent) {
  if (shouldFitContent === void 0) {
    shouldFitContent = false;
  }

  return shouldFitContent ? '100%' : 'auto';
};

var getButtonStatesStyle = function getButtonStatesStyle(stateName) {
  return function (_ref) {
    var theme = _ref.theme,
        baseAppearance = _ref.baseAppearance,
        appearance = _ref.appearance,
        ghost = _ref.ghost;

    var _getAppearanceStylePr = getAppearanceStyleProperty(theme, baseAppearance, appearance, stateName, ghost),
        _outline = _getAppearanceStylePr._outline,
        styles = _objectWithoutPropertiesLoose(_getAppearanceStylePr, _excluded);

    return styled.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      ", "\n    \n    cursor: ", ";\n      transition: ", ";\n    "])), styles, ghost ? _outline : {}, getCursor(stateName), getTransition(stateName));
  };
};

var getItemInteractiveStyles = /*#__PURE__*/memoize(function (disabled, selected) {
  if (disabled === void 0) {
    disabled = false;
  }

  if (selected === void 0) {
    selected = false;
  }

  if (disabled) {
    return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        cursor: not-allowed;\n        opacity: 0.5;\n        ", "\n      "])), getButtonStatesStyle('disabled'));
  }

  if (selected) {
    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", "\n\n        &:hover {\n          ", ";\n        }\n\n        &:active {\n          ", ";\n        }\n      "])), getButtonStatesStyle('selected'), getButtonStatesStyle('hover'), getButtonStatesStyle('active'));
  }

  return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", ";\n      }\n    "])), getButtonStatesStyle('hover'), getButtonStatesStyle('active'));
}, {
  isEqual: fastEquals.shallowEqual
});
var getButtonStyles = /*#__PURE__*/memoize(function (theme, baseAppearance, appearance, spacing, ghost, shouldFitContent) {
  var _buttonTheme = buttonTheme(theme),
      rootStyles = _objectWithoutPropertiesLoose(_buttonTheme, _excluded2);

  var _buttonAppearanceThem = buttonAppearanceTheme(theme, appearance, baseAppearance),
      background = _buttonAppearanceThem.background,
      borderColor = _buttonAppearanceThem.borderColor,
      outline = _buttonAppearanceThem.outline,
      styles = _objectWithoutPropertiesLoose(_buttonAppearanceThem, _excluded3);

  return _extends({
    background: background,
    fill: background,
    border: '1px solid transparent',
    borderColor: borderColor || 'transparent',
    cursor: getCursor(),
    transition: getTransition(),
    textAlign: 'center',
    justifyContent: 'center',
    boxSizing: 'border-box',
    flex: 'none',
    height: 'auto',
    verticalAlign: getVerticalAlign(spacing),
    width: getWidth(shouldFitContent)
  }, rootStyles, styles, ghost && (outline || {
    background: 'white',
    color: background
  }));
}, {
  isEqual: fastEquals.shallowEqual
});

var getElement = function getElement(disabled, href) {
  if (href) {
    return disabled ? 'span' : 'a';
  }

  return 'button';
};

var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7;
var style = /*#__PURE__*/styled.css(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  ", "\n  ", "\n  direction: ", ";\n"])), function (_ref) {
  var theme = _ref.theme,
      baseAppearance = _ref.baseAppearance,
      appearance = _ref.appearance,
      spacing = _ref.spacing,
      ghost = _ref.ghost,
      shouldFitContent = _ref.shouldFitContent;
  return getButtonStyles(theme, baseAppearance, appearance, spacing, ghost, shouldFitContent);
}, function (_ref2) {
  var disabled = _ref2.disabled,
      selected = _ref2.selected;
  return getItemInteractiveStyles(disabled, selected);
}, function (_ref3) {
  var height = _ref3.height;
  return height ? "height: " + height : null;
}, function (_ref4) {
  var cssInner = _ref4.css;
  return cssInner || null;
}, function (_ref5) {
  var isRTL = _ref5.isRTL;
  return isRTL ? 'rtl' : 'ltr';
});
var StyledButton = /*#__PURE__*/styled__default.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n  box-sizing: border-box;\n  display: inline-flex;\n  font-size: inherit;\n  font-style: normal;\n  font-weight: normal;\n  max-width: 100%;\n  outline: none !important;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid transparent;\n  ", "\n"])), style);
var PrefixPostfixBase = /*#__PURE__*/styled__default.span(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  direction: inherit;\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n"])));
var Prefix = /*#__PURE__*/styled__default(PrefixPostfixBase)(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-", ": ", "px;\n"])), function (_ref6) {
  var isRTL = _ref6.isRTL;
  return isRTL ? 'left' : 'right';
}, function (_ref7) {
  var theme = _ref7.theme,
      appearance = _ref7.appearance,
      baseAppearance = _ref7.baseAppearance;
  return buttonAppearanceTheme(theme, appearance, baseAppearance, 'prefixSpacing');
});
var Postfix = /*#__PURE__*/styled__default(PrefixPostfixBase)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-", ": ", "px;\n"])), function (_ref8) {
  var isRTL = _ref8.isRTL;
  return isRTL ? 'right' : 'left';
}, function (_ref9) {
  var theme = _ref9.theme,
      appearance = _ref9.appearance,
      baseAppearance = _ref9.baseAppearance;
  return buttonAppearanceTheme(theme, appearance, baseAppearance, 'postfixSpacing');
});
var ContentWrapper = /*#__PURE__*/styled__default.span(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  direction: inherit;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin: 0;\n  overflow: hidden;\n\n  &:first-child {\n    margin: 0;\n  }\n\n  ", "\n"])), function (_ref10) {
  var theme = _ref10.theme,
      appearance = _ref10.appearance,
      baseAppearance = _ref10.baseAppearance;
  return buttonAppearanceTheme(theme, appearance, baseAppearance, 'buttonContentWrapper');
});
var Content = /*#__PURE__*/styled__default.span(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  direction: inherit;\n  display: block;\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: ", ";\n  ", "\n"])), function (_ref11) {
  var isRTL = _ref11.isRTL,
      _ref11$textPosition = _ref11.textPosition,
      textPosition = _ref11$textPosition === void 0 ? 'center' : _ref11$textPosition;
  return theme.rtlSide(isRTL != null ? isRTL : false, textPosition);
}, function (_ref12) {
  var theme = _ref12.theme,
      appearance = _ref12.appearance,
      baseAppearance = _ref12.baseAppearance;
  return buttonAppearanceTheme(theme, appearance, baseAppearance, 'buttonContent');
});

var getButtonGroupStyles = /*#__PURE__*/memoize(function (theme$1, propertyPath) {
  if (theme$1 === void 0) {
    theme$1 = {};
  }

  var func = theme.getThemedState(buttonGroupThemeNamespace, defaultButtonGroupTheme); // TODO: need return type improvements

  return func(theme$1, propertyPath);
});

var _templateObject$2;
var StyledButtonGroup = /*#__PURE__*/styled__default.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    border-radius: 0;\n  }\n\n  ", ":first-child {\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  ", ":last-child {\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n  }\n\n  ", ":not(:last-child) {\n    border-right: none;\n  }\n\n  ", ";\n"])), StyledButton, StyledButton, function (_ref) {
  var theme = _ref.theme;
  return getButtonGroupStyles(theme, 'borderRadius');
}, function (_ref2) {
  var theme = _ref2.theme;
  return getButtonGroupStyles(theme, 'borderRadius');
}, StyledButton, function (_ref3) {
  var theme = _ref3.theme;
  return getButtonGroupStyles(theme, 'borderRadius');
}, function (_ref4) {
  var theme = _ref4.theme;
  return getButtonGroupStyles(theme, 'borderRadius');
}, StyledButton, function (_ref5) {
  var theme = _ref5.theme;
  return getButtonGroupStyles(theme);
});

var ButtonGroup = function ButtonGroup(_ref) {
  var children = _ref.children,
      theme = _ref.theme,
      className = _ref.className;
  return React__default.createElement(StyledButtonGroup, {
    className: className,
    theme: theme
  }, children);
};

var _excluded$1 = ["prefix", "postfix", "children", "href", "theme", "type", "role", "textPosition", "appearance", "baseAppearance", "spacing", "ghost", "disabled", "selected", "isRTL", "shouldFitContent", "component", "onClick", "className", "classNamePrefix"];
var PureButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
  var prefix = _ref.prefix,
      postfix = _ref.postfix,
      children = _ref.children,
      href = _ref.href,
      theme = _ref.theme,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'button' : _ref$type,
      _ref$role = _ref.role,
      role = _ref$role === void 0 ? 'button' : _ref$role,
      _ref$textPosition = _ref.textPosition,
      textPosition = _ref$textPosition === void 0 ? 'center' : _ref$textPosition,
      _ref$appearance = _ref.appearance,
      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
      _ref$baseAppearance = _ref.baseAppearance,
      baseAppearance = _ref$baseAppearance === void 0 ? 'default' : _ref$baseAppearance,
      _ref$spacing = _ref.spacing,
      spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
      _ref$ghost = _ref.ghost,
      ghost = _ref$ghost === void 0 ? false : _ref$ghost,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$selected = _ref.selected,
      selected = _ref$selected === void 0 ? false : _ref$selected,
      _ref$isRTL = _ref.isRTL,
      isRTL = _ref$isRTL === void 0 ? false : _ref$isRTL,
      _ref$shouldFitContent = _ref.shouldFitContent,
      shouldFitContent = _ref$shouldFitContent === void 0 ? false : _ref$shouldFitContent,
      CustomComponent = _ref.component,
      onClickProps = _ref.onClick,
      className = _ref.className,
      classNamePrefix = _ref.classNamePrefix,
      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);

  var themeContext = React.useContext(styled.ThemeContext);
  var innerTheme = (theme != null ? theme : themeContext) || {};
  var innerRef = React.useRef(null);
  var combinedRef = ref || innerRef;
  var onClick = React.useCallback(function (e) {
    if (onClickProps && !disabled) {
      onClickProps(e);
    }
  }, [disabled, onClickProps]);
  var element = React.useMemo(function () {
    return CustomComponent != null ? CustomComponent : getElement(disabled, href);
  }, [CustomComponent, disabled, href]);
  return React__default.createElement(styled.ThemeProvider, {
    theme: innerTheme
  }, React__default.createElement(StyledButton, _extends({
    className: className,
    as: element,
    ref: combinedRef,
    role: role,
    spacing: spacing,
    isRTL: isRTL,
    ghost: ghost,
    disabled: disabled,
    selected: selected,
    shouldFitContent: shouldFitContent,
    baseAppearance: baseAppearance,
    appearance: appearance,
    onClick: onClick,
    type: type
  }, href ? {
    href: href
  } : null, rest), !!prefix && React__default.createElement(Prefix, {
    className: classNamePrefix && classNamePrefix + "__prefix",
    isRTL: isRTL,
    appearance: appearance,
    baseAppearance: baseAppearance
  }, prefix), React__default.createElement(ContentWrapper, {
    className: classNamePrefix && classNamePrefix + "__content-wrapper",
    appearance: appearance,
    baseAppearance: baseAppearance
  }, React__default.createElement(Content, {
    className: classNamePrefix && classNamePrefix + "__content",
    textPosition: textPosition,
    isRTL: isRTL,
    appearance: appearance,
    baseAppearance: baseAppearance
  }, children)), !!postfix && React__default.createElement(Postfix, {
    className: classNamePrefix && classNamePrefix + "__postfix",
    isRTL: isRTL,
    appearance: appearance,
    baseAppearance: baseAppearance
  }, postfix)));
});
var Button = /*#__PURE__*/React.memo(PureButton);

exports.ButtonGroup = ButtonGroup;
exports.buttonGroupThemeNamespace = buttonGroupThemeNamespace;
exports.buttonThemeNamespace = buttonThemeNamespace;
exports.default = Button;
//# sourceMappingURL=button.cjs.development.js.map