@atlaskit/button 16.1.2

package/dist/esm/entry-points/button-group.js

@@ -0,0 +1 @@
+export { default } from '../button-group';

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

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

package/dist/esm/entry-points/loading-button.js

@@ -0,0 +1 @@
+export { default } from '../loading-button';

package/dist/esm/entry-points/standard-button.js

@@ -0,0 +1 @@
+export { default } from '../button';

package/dist/esm/entry-points/types.js

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

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+// Ideally this file is not used directly. But rather, you go through the entry points
+export { // default export is Button
+default } from './entry-points/standard-button';
+export { default as LoadingButton } from './entry-points/loading-button';
+export { default as CustomThemeButton, Theme } from './entry-points/custom-theme-button';
+export { default as ButtonGroup } from './entry-points/button-group';

package/dist/esm/loading-button.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import Button from './button';
+import LoadingSpinner from './shared/loading-spinner';
+var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(_ref, ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      rest = _objectWithoutProperties(_ref, ["isLoading"]);
+
+  // Button already has React.memo, so just leaning on that
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    ref: ref,
+    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, rest) : null
+  }));
+}); // Tools including enzyme rely on components having a display name
+
+LoadingButton.displayName = 'LoadingButton';
+export default LoadingButton;

package/dist/esm/shared/block-events.js

@@ -0,0 +1,36 @@
+function abort(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+var tabKeyCode = 9;
+
+function onKey(event) {
+  // Allowing tab so that a user can move focus away
+  if (event.keyCode === tabKeyCode) {
+    return;
+  }
+
+  abort(event);
+}
+
+var block = {
+  onMouseDownCapture: abort,
+  onMouseUpCapture: abort,
+  // because we have tabIndex = -1 when disabled,
+  // keyboard events can only occur when there is an overlay
+  onKeyDownCapture: onKey,
+  onKeyUpCapture: onKey,
+  onTouchStartCapture: abort,
+  onTouchEndCapture: abort,
+  onPointerDownCapture: abort,
+  onPointerUpCapture: abort,
+  onClickCapture: abort,
+  // Just smashing the existing onClick for good measure
+  onClick: abort
+};
+var doNotBlock = {};
+export default function blockEvents(_ref) {
+  var isInteractive = _ref.isInteractive;
+  return isInteractive ? doNotBlock : block;
+}

package/dist/esm/shared/button-base.js

@@ -0,0 +1,135 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+/** @jsx jsx */
+import React, { useCallback, useEffect, useRef } from 'react';
+import { jsx } from '@emotion/core';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import blockEvents from './block-events';
+import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
+
+function noop() {} // Disabled buttons will still publish events for nested elements in webkit.
+// We are disabling pointer events on child elements so that
+// the button will always be the target of events
+// Note: firefox does not have this behaviour for child elements
+
+
+var noPointerEventsOnChildrenCss = {
+  '> *': {
+    pointerEvents: 'none'
+  }
+};
+export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
+  var _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+      buttonCss = props.buttonCss,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
+      _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$shouldFitConta = props.shouldFitContainer,
+      shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
+      _props$isSelected = props.isSelected,
+      isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
+      iconBefore = props.iconBefore,
+      iconAfter = props.iconAfter,
+      children = props.children,
+      className = props.className,
+      href = props.href,
+      overlay = props.overlay,
+      _props$tabIndex = props.tabIndex,
+      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+      _props$type = props.type,
+      type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
+      _props$onMouseDown = props.onMouseDown,
+      providedOnMouseDown = _props$onMouseDown === void 0 ? noop : _props$onMouseDown,
+      _props$onClick = props.onClick,
+      providedOnClick = _props$onClick === void 0 ? noop : _props$onClick,
+      _props$component = props.component,
+      Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
+      testId = props.testId,
+      analyticsContext = props.analyticsContext,
+      rest = _objectWithoutProperties(props, ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "analyticsContext"]);
+
+  var ourRef = useRef();
+  var setRef = useCallback(function (node) {
+    ourRef.current = node;
+
+    if (ref == null) {
+      return;
+    }
+
+    if (typeof ref === 'function') {
+      ref(node);
+      return;
+    } // @ts-ignore
+
+
+    ref.current = node;
+  }, [ourRef, ref]); // Cross browser auto focusing is pretty broken, so we are doing it ourselves
+
+  useAutoFocus(ourRef, autoFocus);
+  var onClick = usePlatformLeafEventHandler({
+    fn: providedOnClick,
+    action: 'clicked',
+    componentName: 'button',
+    packageName: "@atlaskit/button",
+    packageVersion: "16.1.2",
+    analyticsData: analyticsContext
+  }); // Button currently calls preventDefault, which is not standard button behaviour
+
+  var onMouseDown = useCallback(function (event) {
+    event.preventDefault();
+    providedOnMouseDown(event);
+  }, [providedOnMouseDown]); // Lose focus when becoming disabled (standard button behaviour)
+
+  useEffect(function () {
+    var el = ourRef.current;
+
+    if (isDisabled && el && el === document.activeElement) {
+      el.blur();
+    }
+  }, [isDisabled]); // we are 'disabling' input with a button when there is an overlay
+
+  var hasOverlay = Boolean(overlay);
+  var fadeCss = getFadingCss({
+    hasOverlay: hasOverlay
+  });
+  var isInteractive = !isDisabled && !hasOverlay;
+  return jsx(Component, _extends({}, rest, {
+    css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
+    className: className,
+    ref: setRef,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    disabled: isDisabled,
+    href: isInteractive ? href : undefined // using undefined so that the property doesn't exist when false
+    ,
+    "data-has-overlay": hasOverlay ? true : undefined,
+    "data-testid": testId,
+    type: type // Adding a tab index so element is always focusable, even when not a <button> or <a>
+    // Disabling focus via keyboard navigation when disabled
+    // as this is standard button behaviour
+    ,
+    tabIndex: isDisabled ? -1 : tabIndex
+  }, blockEvents({
+    isInteractive: isInteractive
+  })), iconBefore ? jsx("span", {
+    css: [fadeCss, getIconStyle({
+      spacing: spacing
+    })]
+  }, iconBefore) : null, children ? jsx("span", {
+    css: [fadeCss, getContentStyle({
+      spacing: spacing
+    })]
+  }, children) : null, iconAfter ? jsx("span", {
+    css: [fadeCss, getIconStyle({
+      spacing: spacing
+    })]
+  }, iconAfter) : null, overlay ? jsx("span", {
+    css: overlayCss
+  }, overlay) : null);
+});

package/dist/esm/shared/colors.js

@@ -0,0 +1,393 @@
+import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+// Hard coding the active rgba color value rather than using a helper to convert it
+// With helper it would be: hex2rgba(colors.B75, 0.6)
+var fadedB75 = 'rgba(179, 212, 255, 0.6)';
+var values = {
+  // Default appearance
+  background: {
+    default: {
+      default: {
+        light: token('color.background.subtleNeutral.resting', colors.N20A),
+        dark: token('color.background.subtleNeutral.resting', colors.DN70)
+      },
+      hover: {
+        light: token('color.background.subtleNeutral.hover', colors.N30A),
+        dark: token('color.background.subtleNeutral.hover', colors.DN60)
+      },
+      active: {
+        light: token('color.background.subtleNeutral.pressed', fadedB75),
+        dark: token('color.background.subtleNeutral.pressed', colors.B75)
+      },
+      disabled: {
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      }
+    },
+    primary: {
+      default: {
+        light: token('color.background.boldBrand.resting', colors.B400),
+        dark: token('color.background.boldBrand.resting', colors.B100)
+      },
+      hover: {
+        light: token('color.background.boldBrand.hover', colors.B300),
+        dark: token('color.background.boldBrand.hover', colors.B75)
+      },
+      active: {
+        light: token('color.background.boldBrand.pressed', colors.B500),
+        dark: token('color.background.boldBrand.pressed', colors.B200)
+      },
+      disabled: {
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      }
+    },
+    warning: {
+      default: {
+        light: token('color.background.boldWarning.resting', colors.Y300),
+        dark: token('color.background.boldWarning.resting', colors.Y300)
+      },
+      hover: {
+        light: token('color.background.boldWarning.hover', colors.Y200),
+        dark: token('color.background.boldWarning.hover', colors.Y200)
+      },
+      active: {
+        light: token('color.background.boldWarning.pressed', colors.Y400),
+        dark: token('color.background.boldWarning.pressed', colors.Y400)
+      },
+      disabled: {
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.Y400),
+        dark: token('color.background.selected.resting', colors.Y400)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.Y400),
+        dark: token('color.background.selected.resting', colors.Y400)
+      }
+    },
+    danger: {
+      default: {
+        light: token('color.background.boldDanger.resting', colors.R400),
+        dark: token('color.background.boldDanger.resting', colors.R400)
+      },
+      hover: {
+        light: token('color.background.boldDanger.hover', colors.R300),
+        dark: token('color.background.boldDanger.hover', colors.R300)
+      },
+      active: {
+        light: token('color.background.boldDanger.pressed', colors.R500),
+        dark: token('color.background.boldDanger.pressed', colors.R500)
+      },
+      disabled: {
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.R500),
+        dark: token('color.background.selected.resting', colors.R500)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.R500),
+        dark: token('color.background.selected.resting', colors.R500)
+      }
+    },
+    link: {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
+      }
+    },
+    subtle: {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      hover: {
+        light: token('color.background.transparentNeutral.hover', colors.N30A),
+        dark: token('color.background.transparentNeutral.hover', colors.DN60)
+      },
+      active: {
+        light: token('color.background.transparentNeutral.pressed', fadedB75),
+        dark: token('color.background.transparentNeutral.pressed', colors.B75)
+      },
+      disabled: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      }
+    },
+    'subtle-link': {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
+      }
+    }
+  },
+  boxShadowColor: {
+    default: {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    },
+    primary: {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    },
+    warning: {
+      focus: {
+        light: token('color.border.focus', colors.Y500),
+        dark: token('color.border.focus', colors.Y500)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.Y500),
+        dark: token('color.border.focus', colors.Y500)
+      }
+    },
+    danger: {
+      focus: {
+        light: token('color.border.focus', colors.R100),
+        dark: token('color.border.focus', colors.R100)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.R100),
+        dark: token('color.border.focus', colors.R100)
+      }
+    },
+    link: {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    },
+    subtle: {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    },
+    'subtle-link': {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    }
+  },
+  color: {
+    default: {
+      default: {
+        light: token('color.text.highEmphasis', colors.N500),
+        dark: token('color.text.highEmphasis', colors.DN400)
+      },
+      active: {
+        light: token('color.text.highEmphasis', colors.B400),
+        dark: token('color.text.highEmphasis', colors.B400)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      }
+    },
+    primary: {
+      default: {
+        light: token('color.text.onBold', colors.N0),
+        dark: token('color.text.onBold', colors.DN30)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      }
+    },
+    warning: {
+      default: {
+        light: token('color.text.onBoldWarning', colors.N800),
+        dark: token('color.text.onBoldWarning', colors.N800)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N800),
+        dark: token('color.text.selected', colors.N800)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N800),
+        dark: token('color.text.selected', colors.N800)
+      }
+    },
+    danger: {
+      default: {
+        light: token('color.text.onBold', colors.N0),
+        dark: token('color.text.onBold', colors.N0)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N0),
+        dark: token('color.text.selected', colors.N0)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N0),
+        dark: token('color.text.selected', colors.N0)
+      }
+    },
+    link: {
+      default: {
+        light: token('color.text.link.resting', colors.B400),
+        dark: token('color.text.link.resting', colors.B100)
+      },
+      hover: {
+        light: token('color.text.link.resting', colors.B300),
+        dark: token('color.text.link.resting', colors.B75)
+      },
+      active: {
+        light: token('color.text.link.pressed', colors.B500),
+        dark: token('color.text.link.pressed', colors.B200)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.N700)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.N700)
+      }
+    },
+    subtle: {
+      default: {
+        light: token('color.text.highEmphasis', colors.N500),
+        dark: token('color.text.highEmphasis', colors.DN400)
+      },
+      active: {
+        light: token('color.text.highEmphasis', colors.B400),
+        dark: token('color.text.highEmphasis', colors.B400)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      }
+    },
+    'subtle-link': {
+      default: {
+        light: token('color.text.mediumEmphasis', colors.N200),
+        dark: token('color.text.mediumEmphasis', colors.DN400)
+      },
+      hover: {
+        light: token('color.text.mediumEmphasis', colors.N90),
+        dark: token('color.text.mediumEmphasis', colors.B50)
+      },
+      active: {
+        light: token('color.text.highEmphasis', colors.N400),
+        dark: token('color.text.highEmphasis', colors.DN300)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      }
+    }
+  }
+};
+export default values;