@atlaskit/button 16.1.2

package/dist/cjs/shared/css.js

@@ -0,0 +1,265 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCss = getCss;
+exports.getIconStyle = getIconStyle;
+exports.getContentStyle = getContentStyle;
+exports.getFadingCss = getFadingCss;
+exports.overlayCss = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = _interopRequireDefault(require("./colors"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var borderRadius = (0, _constants.borderRadius)();
+var gridSize = (0, _constants.gridSize)();
+var fontSize = (0, _constants.fontSize)(); // ## Button layout
+//
+// /------------------------------------------------------------------------------------------------------------------\
+// |       →  |  ←      |          |      →  |  ←      |           |      →  |  ←      |         |      →  |  ←       |
+// |  10px →  |  ← 2px  |   icon   |  2px →  |  ← 2px  |           |  2px →  |  ← 2px  |  icon   |  2px →  |  ← 10px  |
+// |  padding |  margin |  before  |  margin |  margin |  content  |  margin |  margin |  after  |  margin |  padding |
+// |    (12px total)    |          |    (4px total)    |           |    (4px total)    |         |    (12px total)    |
+// |       →  |  ←      |          |      →  |  ←      |           |      →  |  ←      |         |      →  |  ←       |
+// \------------------------------------------------------------------------------------------------------------------/
+//                                           ↑                               ↑
+//                                        Margins don't collapse with inline-flex
+//
+
+var heights = {
+  default: "".concat(gridSize * 4 / fontSize, "em"),
+  // 32px
+  compact: "".concat(gridSize * 3 / fontSize, "em"),
+  none: 'auto'
+};
+var lineHeights = {
+  default: heights.default,
+  compact: heights.compact,
+  none: 'inherit'
+};
+var padding = {
+  // 10px gutter
+  default: "0 ".concat(gridSize + gridSize / 4, "px"),
+  compact: "0 ".concat(gridSize + gridSize / 4, "px"),
+  none: '0'
+};
+var singleIconPadding = {
+  // 2px gutter
+  compact: "0 ".concat(gridSize / 4, "px"),
+  default: "0 ".concat(gridSize / 4, "px"),
+  none: '0'
+};
+var verticalAlign = {
+  default: 'middle',
+  compact: 'middle',
+  none: 'baseline'
+};
+var innerMargin = {
+  content: "0 ".concat(gridSize / 4, "px"),
+  icon: "0 ".concat(gridSize / 4, "px")
+};
+
+function getColor(_ref) {
+  var group = _ref.group,
+      key = _ref.key,
+      mode = _ref.mode;
+  var rule = group[key] || group.default;
+  return rule[mode];
+}
+
+function getColors(_ref2) {
+  var appearance = _ref2.appearance,
+      key = _ref2.key,
+      mode = _ref2.mode;
+  return {
+    background: getColor({
+      group: _colors.default.background[appearance],
+      key: key,
+      mode: mode
+    }),
+    // Needing to add !important to overcome specificity issue caused by deprecated AtlaskitThemeProvider
+    color: "".concat(getColor({
+      group: _colors.default.color[appearance],
+      key: key,
+      mode: mode
+    }), " !important")
+  };
+}
+
+function getCss(_ref3) {
+  var appearance = _ref3.appearance,
+      spacing = _ref3.spacing,
+      mode = _ref3.mode,
+      isSelected = _ref3.isSelected,
+      shouldFitContainer = _ref3.shouldFitContainer,
+      isOnlySingleIcon = _ref3.isOnlySingleIcon;
+  var baseColors = getColors({
+    appearance: appearance,
+    key: isSelected ? 'selected' : 'default',
+    mode: mode
+  });
+  return _objectSpread(_objectSpread({
+    // 0px margin added to css-reset
+    alignItems: 'baseline',
+    borderWidth: 0,
+    borderRadius: borderRadius,
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    fontSize: 'inherit',
+    fontStyle: 'normal',
+    // Chrome recently changed button so that they use 'arial' as the font family
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    // margin for button has been applied to css reset
+    maxWidth: '100%',
+    // Needed to position overlay
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+    whiteSpace: 'nowrap'
+  }, baseColors), {}, {
+    cursor: 'pointer',
+    height: heights[spacing],
+    lineHeight: lineHeights[spacing],
+    padding: isOnlySingleIcon ? singleIconPadding[spacing] : padding[spacing],
+    verticalAlign: verticalAlign[spacing],
+    width: shouldFitContainer ? '100%' : 'auto',
+    // justifyContent required for shouldFitContainer buttons with an icon inside
+    justifyContent: 'center',
+    // Note: we cannot disable pointer events when there is an overlay.
+    // That would be easy for styling, but it would start letting events through on disabled buttons
+    // Disabling visited styles (just using the base colors)
+    '&:visited': _objectSpread({}, baseColors),
+    '&:hover': _objectSpread(_objectSpread({}, getColors({
+      appearance: appearance,
+      key: isSelected ? 'selected' : 'hover',
+      mode: mode
+    })), {}, {
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'inherit',
+      // background, box-shadow
+      transitionDuration: '0s, 0.15s'
+    }),
+    '&:focus': _objectSpread(_objectSpread({}, getColors({
+      appearance: appearance,
+      key: isSelected ? 'focusSelected' : 'focus',
+      mode: mode
+    })), {}, {
+      boxShadow: "0 0 0 2px ".concat(_colors.default.boxShadowColor[appearance].focus[mode]),
+      // background, box-shadow
+      transitionDuration: '0s, 0.2s',
+      // disabling browser focus outline
+      outline: 'none'
+    }),
+    // giving active styles preference by listing them after focus
+    '&:active': _objectSpread(_objectSpread({}, getColors({
+      appearance: appearance,
+      key: isSelected ? 'selected' : 'active',
+      mode: mode
+    })), {}, {
+      // background, box-shadow
+      transitionDuration: '0s, 0s'
+    }),
+    // preventDefault prevents regular active styles from applying in Firefox
+    '&[data-firefox-is-active="true"]': _objectSpread(_objectSpread({}, getColors({
+      appearance: appearance,
+      key: isSelected ? 'selected' : 'active',
+      mode: mode
+    })), {}, {
+      // background, box-shadow
+      transitionDuration: '0s, 0s'
+    }),
+    // Giving disabled styles preference over active by listing them after.
+    // Not using '&:disabled' because :disabled is not a valid state for all element types
+    // so we are targeting the attribute
+    // Attributes have the same specificity a pseudo classes so we are overriding :disabled here
+    '&[disabled]': _objectSpread(_objectSpread({}, getColors({
+      appearance: appearance,
+      key: 'disabled',
+      mode: mode
+    })), {}, {
+      cursor: 'not-allowed',
+      textDecoration: 'none'
+    }),
+    '&[data-has-overlay="true"]': {
+      cursor: 'default',
+      textDecoration: 'none'
+    },
+    // disabling hover and active color changes when there is an overlay, but the button is not disabled
+    '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': _objectSpread({}, getColors({
+      appearance: appearance,
+      key: isSelected ? 'selected' : 'default',
+      mode: mode
+    })),
+    '&::-moz-focus-inner': {
+      border: 0,
+      margin: 0,
+      padding: 0
+    }
+  });
+} // inline-flex child
+
+
+function getIconStyle(_ref4) {
+  var spacing = _ref4.spacing;
+  return {
+    alignSelf: 'center',
+    display: 'flex',
+    // icon size cannot grow and shrink
+    flexGrow: 0,
+    flexShrink: 0,
+    lineHeight: 0,
+    fontSize: 0,
+    userSelect: 'none',
+    margin: spacing === 'none' ? 0 : innerMargin.icon
+  };
+} // inline-flex child
+
+
+function getContentStyle(_ref5) {
+  var spacing = _ref5.spacing;
+  return {
+    margin: spacing === 'none' ? 0 : innerMargin.content,
+    // content can grow and shrink
+    flexGrow: 1,
+    flexShrink: 1,
+    // ellipsis for overflow text
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  };
+}
+
+function getFadingCss(_ref6) {
+  var hasOverlay = _ref6.hasOverlay;
+  return {
+    transition: 'opacity 0.3s',
+    opacity: hasOverlay ? 0 : 1
+  };
+}
+
+var overlayCss = {
+  // stretching to full width / height of button
+  // this is important as we need it to still block
+  // event if clicking in the button's own padding
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  // Putting all children in the center
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+exports.overlayCss = overlayCss;

package/dist/cjs/shared/get-is-only-single-icon.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getIsOnlySingleIcon;
+
+function getIsOnlySingleIcon(_ref) {
+  var children = _ref.children,
+      iconBefore = _ref.iconBefore,
+      iconAfter = _ref.iconAfter;
+
+  if (children) {
+    return false;
+  }
+
+  if (iconBefore && !iconAfter) {
+    return true;
+  }
+
+  if (!iconBefore && iconAfter) {
+    return true;
+  }
+
+  return false;
+}

package/dist/cjs/shared/loading-spinner.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = LoadingSpinner;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+function getSpinnerAppearance(_ref) {
+  var appearance = _ref.appearance,
+      isDisabled = _ref.isDisabled,
+      isSelected = _ref.isSelected;
+
+  if (isDisabled) {
+    return 'inherit';
+  }
+
+  if (isSelected) {
+    return 'invert';
+  }
+
+  if (appearance === 'primary' || appearance === 'danger') {
+    return 'invert';
+  }
+
+  return 'inherit';
+}
+
+function LoadingSpinner(_ref2) {
+  var _ref2$spacing = _ref2.spacing,
+      spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, ["spacing"]);
+  var size = spacing === 'default' ? 'medium' : 'small';
+  return /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: size,
+    appearance: getSpinnerAppearance(rest)
+  });
+}

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/button",
+	"version": "16.1.2",
+	"sideEffects": false
+}

package/dist/es2019/button-group.js

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import { gridSize } from '@atlaskit/theme/constants';
+export const groupItemStyles = {
+  flex: '1 0 auto',
+  display: 'flex',
+
+  /* margins don't flip when the layout uses dir="rtl", whereas pseudos do */
+  '& + &::before': {
+    content: `''`,
+    display: 'inline-block',
+    width: `${gridSize() / 2}px`
+  }
+};
+export default function ButtonGroup({
+  appearance,
+  children
+}) {
+  return jsx("div", {
+    css: {
+      display: 'inline-flex'
+    }
+  }, React.Children.map(children, (child, idx) => {
+    if (!child) {
+      return null;
+    }
+
+    return jsx("div", {
+      key: idx,
+      css: groupItemStyles
+    }, appearance ? /*#__PURE__*/React.cloneElement(child, {
+      appearance
+    }) : child);
+  }));
+}

package/dist/es2019/button.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useMemo, useState } from 'react';
+import GlobalTheme from '@atlaskit/theme/components';
+import ButtonBase from './shared/button-base';
+import { getCss } from './shared/css';
+import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
+
+function noop() {}
+
+const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+const ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode({
+  mode,
+  onMouseDown: providedOnMouseDown = noop,
+  onMouseUp: providedOnMouseUp = noop,
+  ...rest
+}, ref) {
+  const appearance = rest.appearance || 'default';
+  const spacing = rest.spacing || 'default';
+  const shouldFitContainer = Boolean(rest.shouldFitContainer);
+  const isSelected = Boolean(rest.isSelected);
+  const isOnlySingleIcon = getIsOnlySingleIcon(rest);
+  const [isActive, setIsActive] = useState(false); // Wrap onMouseDown / onMouseUp to manually trigger active state
+  //  in Firefox
+
+  const onMouseDown = useCallback(event => {
+    providedOnMouseDown(event);
+
+    if (isFirefox) {
+      setIsActive(true);
+    }
+  }, [providedOnMouseDown, setIsActive]);
+  const onMouseUp = useCallback(event => {
+    providedOnMouseUp(event);
+
+    if (isFirefox) {
+      setIsActive(false);
+    }
+  }, [providedOnMouseUp, setIsActive]);
+  const buttonCss = useMemo(() => getCss({
+    appearance,
+    spacing,
+    mode,
+    isSelected,
+    shouldFitContainer,
+    isOnlySingleIcon
+  }), [appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon]);
+  return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
+    ref: ref,
+    buttonCss: buttonCss // Due to how click events are set, we need to set active styles
+    //  manually in Firefox and wrap onMouseDown/onMouseUp
+    ,
+    "data-firefox-is-active": isActive ? true : undefined,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp
+  }));
+});
+const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+  return /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, ({
+    mode
+  }) => {
+    return /*#__PURE__*/React.createElement(ButtonWithMode, _extends({}, props, {
+      ref: ref,
+      mode: mode
+    }));
+  });
+})); // Tools including enzyme rely on components having a display name
+
+Button.displayName = 'Button';
+export default Button;