@atlaskit/button 16.5.3 → 16.5.5

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

@@ -3,65 +3,54 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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;
-
+    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
-
-
+  }
+  // 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
 };
+
 /**
  * __Custom theme button__
  *
@@ -69,32 +58,30 @@ var initial = {
  *
  * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
  */
-
 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, _excluded);
-
+    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, _excluded);
   // TODO is there a nicer way to do this?
   // Add default props back into object for spreading
   var restProps = _objectSpread({
@@ -105,19 +92,16 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
     shouldFitContainer: shouldFitContainer,
     spacing: spacing
   }, rest);
-
   var _useState = useState(initial),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+    _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);
     }
@@ -129,7 +113,6 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         isActive: false
       });
     });
-
     if (providedOnMouseLeave) {
       providedOnMouseLeave(event);
     }
@@ -140,7 +123,6 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         isActive: true
       });
     });
-
     if (providedOnMouseDown) {
       providedOnMouseDown(event);
     }
@@ -151,7 +133,6 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         isActive: false
       });
     });
-
     if (providedOnMouseUp) {
       providedOnMouseUp(event);
     }
@@ -162,7 +143,6 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         isFocus: true
       });
     });
-
     if (providedOnFocus) {
       providedOnFocus(event);
     }
@@ -173,7 +153,6 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         isFocus: false
       });
     });
-
     if (providedOnBlur) {
       providedOnBlur(event);
     }
@@ -206,7 +185,8 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       }));
     });
   }));
-})); // Tools including enzyme rely on components having a display name
+}));
 
+// Tools including enzyme rely on components having a display name
 CustomThemeButton.displayName = 'CustomThemeButton';
 export default CustomThemeButton;

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

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 = {
@@ -12,26 +9,27 @@ var stateToSelectorMap = {
   hover: '&:hover',
   active: '&:active',
   disabled: '&[disabled]'
-}; // Mapping the new clean css back to the legacy theme format.
+};
+
+// 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;
+    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,
@@ -39,37 +37,38 @@ export function getCustomCss(_ref) {
     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
+  // 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
-
+  }
 
+  // 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
-
+    }
 
+    // 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
+}
 
+// 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
@@ -86,6 +85,7 @@ var Theme = createTheme(function (themeProps) {
     // that we are changing theme soon there is no point
     spinnerStyles: {}
   };
-}); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+});
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default Theme;

package/dist/esm/index.js

@@ -1,5 +1,7 @@
 // Ideally this file is not used directly. But rather, you go through the entry points
-export { // default export is Button
+
+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';

package/dist/esm/loading-button.js

@@ -4,7 +4,6 @@ var _excluded = ["isLoading"];
 import React from 'react';
 import Button from './button';
 import LoadingSpinner from './shared/loading-spinner';
-
 /**
  * __Loading button__
  *
@@ -14,15 +13,15 @@ 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, _excluded);
-
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    rest = _objectWithoutProperties(_ref, _excluded);
   // 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
+});
 
+// Tools including enzyme rely on components having a display name
 LoadingButton.displayName = 'LoadingButton';
 export default LoadingButton;

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

@@ -2,18 +2,14 @@ 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,

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "interactionName", "analyticsContext"];
-
 /** @jsx jsx */
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -12,11 +11,12 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import InteractionContext from '@atlaskit/interaction-context';
 import { N500 } from '@atlaskit/theme/colors';
 import blockEvents from './block-events';
-import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css'; // Disabled buttons will still publish events for nested elements in webkit.
+import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
+
+// 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'
@@ -24,56 +24,54 @@ var noPointerEventsOnChildrenCss = {
 };
 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,
-      interactionName = props.interactionName,
-      analyticsContext = props.analyticsContext,
-      rest = _objectWithoutProperties(props, _excluded);
-
+    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,
+    interactionName = props.interactionName,
+    analyticsContext = props.analyticsContext,
+    rest = _objectWithoutProperties(props, _excluded);
   var ourRef = useRef();
   var setRef = useCallback(function (node) {
     ourRef.current = node;
-
     if (ref == null) {
       return;
     }
-
     if (typeof ref === 'function') {
       ref(node);
       return;
-    } // @ts-ignore
-
+    }
 
+    // @ts-ignore
     ref.current = node;
-  }, [ourRef, ref]); // Cross browser auto focusing is pretty broken, so we are doing it ourselves
+  }, [ourRef, ref]);
 
+  // Cross browser auto focusing is pretty broken, so we are doing it ourselves
   useAutoFocus(ourRef, autoFocus);
   var interactionContext = useContext(InteractionContext);
   var handleClick = useCallback(function (e, analyticsEvent) {
@@ -85,36 +83,37 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.5.3",
+    packageVersion: "16.5.5",
     analyticsData: analyticsContext
-  }); // Button currently calls preventDefault, which is not standard button behaviour
+  });
 
+  // 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)
+  }, [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
+  }, [isDisabled]);
 
+  // we are 'disabling' input with a button when there is an overlay
   var hasOverlay = Boolean(overlay);
   var fadeCss = css(getFadingCss({
     hasOverlay: hasOverlay
   }));
   var isInteractive = !isDisabled && !hasOverlay;
+
   /**
    * HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.
    * For now, while we support both, these styles reach into Spinner when a theme is set, applies the right color.
    * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067
    */
-
   var spinnerHackCss = {};
-
   if (isSelected || isDisabled || appearance === 'warning') {
     spinnerHackCss = {
       '[data-theme] & svg': {
@@ -122,7 +121,6 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       }
     };
   }
-
   return jsx(Component, _extends({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -130,11 +128,13 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     onClick: onClick,
     onMouseDown: onMouseDown,
     disabled: isDisabled,
-    href: isInteractive ? href : undefined // using undefined so that the property doesn't exist when false
+    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>
+    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
     ,

package/dist/esm/shared/css.js

@@ -1,15 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { css } from '@emotion/react';
 import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 var borderRadius = getBorderRadius();
 var gridSize = getGridSize();
-var fontSize = getFontSize(); // ## Button layout
+var fontSize = getFontSize();
+
+// ## Button layout
 //
 // /------------------------------------------------------------------------------------------------------------------\
 // |       →  |  ←      |          |      →  |  ←      |           |      →  |  ←      |         |      →  |  ←       |
@@ -21,7 +20,6 @@ var fontSize = getFontSize(); // ## Button layout
 //                                           ↑                               ↑
 //                                        Margins don't collapse with inline-flex
 //
-
 var heights = {
   default: "".concat(gridSize * 4 / fontSize, "em"),
   // 32px
@@ -54,19 +52,17 @@ 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;
+    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;
+    key = _ref2.key,
+    mode = _ref2.mode;
   return {
     background: getColor({
       group: colors.background[appearance],
@@ -81,14 +77,13 @@ function getColors(_ref2) {
     }), " !important")
   };
 }
-
 export function getCss(_ref3) {
   var appearance = _ref3.appearance,
-      spacing = _ref3.spacing,
-      mode = _ref3.mode,
-      isSelected = _ref3.isSelected,
-      shouldFitContainer = _ref3.shouldFitContainer,
-      isOnlySingleIcon = _ref3.isOnlySingleIcon;
+    spacing = _ref3.spacing,
+    mode = _ref3.mode,
+    isSelected = _ref3.isSelected,
+    shouldFitContainer = _ref3.shouldFitContainer,
+    isOnlySingleIcon = _ref3.isOnlySingleIcon;
   var baseColors = getColors({
     appearance: appearance,
     key: isSelected ? 'selected' : 'default',
@@ -125,6 +120,7 @@ export function getCss(_ref3) {
     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({
@@ -193,8 +189,9 @@ export function getCss(_ref3) {
       padding: 0
     }
   });
-} // inline-flex child
+}
 
+// inline-flex child
 export function getIconStyle(_ref4) {
   var spacing = _ref4.spacing;
   return css({
@@ -208,8 +205,9 @@ export function getIconStyle(_ref4) {
     lineHeight: 0,
     userSelect: 'none'
   });
-} // inline-flex child
+}
 
+// inline-flex child
 export function getContentStyle(_ref5) {
   var spacing = _ref5.spacing;
   return css({