@atlaskit/button 16.1.2

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

@@ -0,0 +1,19 @@
+export default function getIsOnlySingleIcon({
+  children,
+  iconBefore,
+  iconAfter
+}) {
+  if (children) {
+    return false;
+  }
+
+  if (iconBefore && !iconAfter) {
+    return true;
+  }
+
+  if (!iconBefore && iconAfter) {
+    return true;
+  }
+
+  return false;
+}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import Spinner from '@atlaskit/spinner';
+
+function getSpinnerAppearance({
+  appearance,
+  isDisabled,
+  isSelected
+}) {
+  if (isDisabled) {
+    return 'inherit';
+  }
+
+  if (isSelected) {
+    return 'invert';
+  }
+
+  if (appearance === 'primary' || appearance === 'danger') {
+    return 'invert';
+  }
+
+  return 'inherit';
+}
+
+export default function LoadingSpinner({
+  spacing = 'default',
+  ...rest
+}) {
+  const size = spacing === 'default' ? 'medium' : 'small';
+  return /*#__PURE__*/React.createElement(Spinner, {
+    size: size,
+    appearance: getSpinnerAppearance(rest)
+  });
+}

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

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

package/dist/esm/button-group.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import { gridSize } from '@atlaskit/theme/constants';
+export var 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: "".concat(gridSize() / 2, "px")
+  }
+};
+export default function ButtonGroup(_ref) {
+  var appearance = _ref.appearance,
+      children = _ref.children;
+  return jsx("div", {
+    css: {
+      display: 'inline-flex'
+    }
+  }, React.Children.map(children, function (child, idx) {
+    if (!child) {
+      return null;
+    }
+
+    return jsx("div", {
+      key: idx,
+      css: groupItemStyles
+    }, appearance ? /*#__PURE__*/React.cloneElement(child, {
+      appearance: appearance
+    }) : child);
+  }));
+}

package/dist/esm/button.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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() {}
+
+var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+var ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode(_ref, ref) {
+  var mode = _ref.mode,
+      _ref$onMouseDown = _ref.onMouseDown,
+      providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
+      _ref$onMouseUp = _ref.onMouseUp,
+      providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
+      rest = _objectWithoutProperties(_ref, ["mode", "onMouseDown", "onMouseUp"]);
+
+  var appearance = rest.appearance || 'default';
+  var spacing = rest.spacing || 'default';
+  var shouldFitContainer = Boolean(rest.shouldFitContainer);
+  var isSelected = Boolean(rest.isSelected);
+  var isOnlySingleIcon = getIsOnlySingleIcon(rest);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isActive = _useState2[0],
+      setIsActive = _useState2[1]; // Wrap onMouseDown / onMouseUp to manually trigger active state
+  //  in Firefox
+
+
+  var onMouseDown = useCallback(function (event) {
+    providedOnMouseDown(event);
+
+    if (isFirefox) {
+      setIsActive(true);
+    }
+  }, [providedOnMouseDown, setIsActive]);
+  var onMouseUp = useCallback(function (event) {
+    providedOnMouseUp(event);
+
+    if (isFirefox) {
+      setIsActive(false);
+    }
+  }, [providedOnMouseUp, setIsActive]);
+  var buttonCss = useMemo(function () {
+    return getCss({
+      appearance: appearance,
+      spacing: spacing,
+      mode: mode,
+      isSelected: isSelected,
+      shouldFitContainer: shouldFitContainer,
+      isOnlySingleIcon: 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
+  }));
+});
+var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+  return /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, function (_ref2) {
+    var mode = _ref2.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;

package/dist/esm/custom-theme-button/custom-theme-button-types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/custom-theme-button/custom-theme-button.js

@@ -0,0 +1,203 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+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) { _defineProperty(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; }
+
+import React, { useCallback, useState } from 'react';
+import GlobalTheme from '@atlaskit/theme/components';
+import ButtonBase from '../shared/button-base';
+import getIsOnlySingleIcon from '../shared/get-is-only-single-icon';
+import LoadingSpinner from '../shared/loading-spinner';
+import Theme, { defaultThemeFn, getSpecifiers } from './theme';
+
+function getInteractionState(_ref) {
+  var _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$isFocus = _ref.isFocus,
+      isFocus = _ref$isFocus === void 0 ? false : _ref$isFocus,
+      _ref$isHover = _ref.isHover,
+      isHover = _ref$isHover === void 0 ? false : _ref$isHover,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+
+  if (isDisabled) {
+    return 'disabled';
+  }
+
+  if (isSelected && isFocus) {
+    return 'focusSelected';
+  }
+
+  if (isSelected) {
+    return 'selected';
+  } // not allowing active or focus style changes while loading
+
+
+  if (!isLoading && isActive) {
+    return 'active';
+  }
+
+  if (!isLoading && isHover) {
+    return 'hover';
+  }
+
+  if (isFocus) {
+    return 'focus';
+  }
+
+  return 'default';
+}
+
+var initial = {
+  isHover: false,
+  isActive: false,
+  isFocus: false
+};
+var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function CustomThemeButton(_ref2, ref) {
+  var _ref2$appearance = _ref2.appearance,
+      appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+      _ref2$autoFocus = _ref2.autoFocus,
+      autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+      _ref2$isDisabled = _ref2.isDisabled,
+      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+      _ref2$isSelected = _ref2.isSelected,
+      isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
+      _ref2$shouldFitContai = _ref2.shouldFitContainer,
+      shouldFitContainer = _ref2$shouldFitContai === void 0 ? false : _ref2$shouldFitContai,
+      _ref2$spacing = _ref2.spacing,
+      spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
+      _ref2$isLoading = _ref2.isLoading,
+      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+      providedOnMouseEnter = _ref2.onMouseEnter,
+      providedOnMouseLeave = _ref2.onMouseLeave,
+      providedOnMouseDown = _ref2.onMouseDown,
+      providedOnMouseUp = _ref2.onMouseUp,
+      providedOnFocus = _ref2.onFocus,
+      providedOnBlur = _ref2.onBlur,
+      _ref2$theme = _ref2.theme,
+      theme = _ref2$theme === void 0 ? defaultThemeFn : _ref2$theme,
+      rest = _objectWithoutProperties(_ref2, ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"]);
+
+  // TODO is there a nicer way to do this?
+  // Add default props back into object for spreading
+  var restProps = _objectSpread({
+    appearance: appearance,
+    autoFocus: autoFocus,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    shouldFitContainer: shouldFitContainer,
+    spacing: spacing
+  }, rest);
+
+  var _useState = useState(initial),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var onMouseEnter = useCallback(function (event) {
+    setState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        isHover: true
+      });
+    });
+
+    if (providedOnMouseEnter) {
+      providedOnMouseEnter(event);
+    }
+  }, [providedOnMouseEnter]);
+  var onMouseLeave = useCallback(function (event) {
+    setState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        isHover: false,
+        isActive: false
+      });
+    });
+
+    if (providedOnMouseLeave) {
+      providedOnMouseLeave(event);
+    }
+  }, [providedOnMouseLeave]);
+  var onMouseDown = useCallback(function (event) {
+    setState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        isActive: true
+      });
+    });
+
+    if (providedOnMouseDown) {
+      providedOnMouseDown(event);
+    }
+  }, [providedOnMouseDown]);
+  var onMouseUp = useCallback(function (event) {
+    setState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        isActive: false
+      });
+    });
+
+    if (providedOnMouseUp) {
+      providedOnMouseUp(event);
+    }
+  }, [providedOnMouseUp]);
+  var onFocus = useCallback(function (event) {
+    setState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        isFocus: true
+      });
+    });
+
+    if (providedOnFocus) {
+      providedOnFocus(event);
+    }
+  }, [providedOnFocus]);
+  var onBlur = useCallback(function (event) {
+    setState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        isFocus: false
+      });
+    });
+
+    if (providedOnBlur) {
+      providedOnBlur(event);
+    }
+  }, [providedOnBlur]);
+  return /*#__PURE__*/React.createElement(Theme.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, function (_ref3) {
+    var mode = _ref3.mode;
+    return /*#__PURE__*/React.createElement(Theme.Consumer, _extends({
+      mode: mode,
+      state: getInteractionState(_objectSpread(_objectSpread({}, state), {}, {
+        isLoading: isLoading,
+        isSelected: restProps.isSelected,
+        isDisabled: restProps.isDisabled
+      })),
+      iconIsOnlyChild: getIsOnlySingleIcon(restProps),
+      isLoading: isLoading
+    }, restProps), function (_ref4) {
+      var buttonStyles = _ref4.buttonStyles;
+      return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, restProps, {
+        ref: ref,
+        overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        buttonCss: getSpecifiers(buttonStyles)
+      }));
+    });
+  }));
+})); // Tools including enzyme rely on components having a display name
+
+CustomThemeButton.displayName = 'CustomThemeButton';
+export default CustomThemeButton;

package/dist/esm/custom-theme-button/index.js

@@ -0,0 +1,2 @@
+export { default } from './custom-theme-button';
+export { default as Theme } from './theme';

package/dist/esm/custom-theme-button/theme.js

@@ -0,0 +1,90 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { createTheme } from '@atlaskit/theme/components';
+import { getCss } from '../shared/css';
+var stateToSelectorMap = {
+  focus: '&:focus',
+  focusSelected: '&:focus',
+  hover: '&:hover',
+  active: '&:active',
+  disabled: '&[disabled]'
+}; // Mapping the new clean css back to the legacy theme format.
+// The legacy theme format has all styles at the top level (no nested selectors)
+// and uses `getSpecifiers()` to apply the style to all pseudo states
+
+export function getCustomCss(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      _ref$spacing = _ref.spacing,
+      spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'light' : _ref$mode,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$shouldFitContain = _ref.shouldFitContainer,
+      shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
+      _ref$iconIsOnlyChild = _ref.iconIsOnlyChild,
+      iconIsOnlyChild = _ref$iconIsOnlyChild === void 0 ? false : _ref$iconIsOnlyChild,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      state = _ref.state;
+  var result = getCss({
+    appearance: appearance,
+    spacing: spacing,
+    mode: mode,
+    isSelected: isSelected,
+    shouldFitContainer: shouldFitContainer,
+    isOnlySingleIcon: iconIsOnlyChild
+  }); // we need to disable the default browser focus styles always
+  // this is because we are not expressing that we can have two pseudo states at a time
+
+  result.outline = 'none'; // Pulling relevant styles up to the top level
+
+  var selector = stateToSelectorMap[state];
+
+  if (selector) {
+    result = _objectSpread(_objectSpread({}, result), result[selector]);
+  }
+
+  if (isLoading) {
+    result = _objectSpread(_objectSpread({}, result), result['&[data-has-overlay="true"]']);
+  } // Delete all selectors and just keep root styles
+
+
+  Object.keys(result).forEach(function (key) {
+    // want to keep this one
+    if (key === '&::-moz-focus-inner') {
+      return;
+    } // Not using .startsWith for ie11
+
+
+    if (key.indexOf('&') === 0) {
+      delete result[key];
+    }
+  });
+  return result;
+} // This styling approach works by generating a 'style' and applying with maximum specificity
+// To do this we are overwriting all pseudo selectors
+
+export function getSpecifiers(styles) {
+  return {
+    '&, &:hover, &:active, &:focus, &:visited, &:disabled, &[disabled]': styles
+  };
+}
+export function defaultThemeFn(current, values) {
+  return current(values);
+}
+var Theme = createTheme(function (themeProps) {
+  return {
+    buttonStyles: getCustomCss(themeProps),
+    // No styles being applied directly to spinner by default
+    // Keeping this for legacy compat. We could remove it, but given
+    // that we are changing theme soon there is no point
+    spinnerStyles: {}
+  };
+});
+export default Theme;