@atlaskit/button 16.5.3 → 16.5.4

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

@@ -5,7 +5,6 @@ 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({
   isDisabled = false,
   isActive = false,
@@ -17,36 +16,30 @@ function getInteractionState({
   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';
 }
-
 const initial = {
   isHover: false,
   isActive: false,
   isFocus: false
 };
+
 /**
  * __Custom theme button__
  *
@@ -54,7 +47,6 @@ const initial = {
  *
  * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
  */
-
 const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function CustomThemeButton({
   // Calculate default props for use in custom themes
   appearance = 'default',
@@ -86,56 +78,56 @@ const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef
   };
   const [state, setState] = useState(initial);
   const onMouseEnter = useCallback(event => {
-    setState(current => ({ ...current,
+    setState(current => ({
+      ...current,
       isHover: true
     }));
-
     if (providedOnMouseEnter) {
       providedOnMouseEnter(event);
     }
   }, [providedOnMouseEnter]);
   const onMouseLeave = useCallback(event => {
-    setState(current => ({ ...current,
+    setState(current => ({
+      ...current,
       isHover: false,
       isActive: false
     }));
-
     if (providedOnMouseLeave) {
       providedOnMouseLeave(event);
     }
   }, [providedOnMouseLeave]);
   const onMouseDown = useCallback(event => {
-    setState(current => ({ ...current,
+    setState(current => ({
+      ...current,
       isActive: true
     }));
-
     if (providedOnMouseDown) {
       providedOnMouseDown(event);
     }
   }, [providedOnMouseDown]);
   const onMouseUp = useCallback(event => {
-    setState(current => ({ ...current,
+    setState(current => ({
+      ...current,
       isActive: false
     }));
-
     if (providedOnMouseUp) {
       providedOnMouseUp(event);
     }
   }, [providedOnMouseUp]);
   const onFocus = useCallback(event => {
-    setState(current => ({ ...current,
+    setState(current => ({
+      ...current,
       isFocus: true
     }));
-
     if (providedOnFocus) {
       providedOnFocus(event);
     }
   }, [providedOnFocus]);
   const onBlur = useCallback(event => {
-    setState(current => ({ ...current,
+    setState(current => ({
+      ...current,
       isFocus: false
     }));
-
     if (providedOnBlur) {
       providedOnBlur(event);
     }
@@ -146,7 +138,8 @@ const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef
     mode
   }) => /*#__PURE__*/React.createElement(Theme.Consumer, _extends({
     mode: mode,
-    state: getInteractionState({ ...state,
+    state: getInteractionState({
+      ...state,
       isLoading,
       isSelected: restProps.isSelected,
       isDisabled: restProps.isDisabled
@@ -166,7 +159,8 @@ const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef
     onBlur: onBlur,
     buttonCss: getSpecifiers(buttonStyles)
   })))));
-})); // 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/es2019/custom-theme-button/theme.js

@@ -6,10 +6,11 @@ const 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({
   appearance = 'default',
   spacing = 'default',
@@ -27,42 +28,45 @@ export function getCustomCss({
     isSelected,
     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
   const selector = stateToSelectorMap[state];
-
   if (selector) {
-    result = { ...result,
+    result = {
+      ...result,
       ...result[selector]
     };
   }
-
   if (isLoading) {
-    result = { ...result,
+    result = {
+      ...result,
       // Pull overlay styles up to the top
       ...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(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
@@ -77,6 +81,7 @@ const Theme = createTheme(themeProps => ({
   // Keeping this for legacy compat. We could remove it, but given
   // 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/es2019/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/es2019/loading-button.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from './button';
 import LoadingSpinner from './shared/loading-spinner';
-
 /**
  * __Loading button__
  *
@@ -19,7 +18,8 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton({
     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/es2019/shared/block-events.js

@@ -2,18 +2,14 @@ function abort(event) {
   event.preventDefault();
   event.stopPropagation();
 }
-
 const tabKeyCode = 9;
-
 function onKey(event) {
   // Allowing tab so that a user can move focus away
   if (event.keyCode === tabKeyCode) {
     return;
   }
-
   abort(event);
 }
-
 const block = {
   onMouseDownCapture: abort,
   onMouseUpCapture: abort,

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -10,11 +9,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
-
 const noPointerEventsOnChildrenCss = {
   '> *': {
     pointerEvents: 'none'
@@ -51,20 +51,19 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   const ourRef = useRef();
   const setRef = useCallback(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);
   const interactionContext = useContext(InteractionContext);
   const handleClick = useCallback((e, analyticsEvent) => {
@@ -76,36 +75,37 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.5.3",
+    packageVersion: "16.5.4",
     analyticsData: analyticsContext
-  }); // Button currently calls preventDefault, which is not standard button behaviour
+  });
 
+  // Button currently calls preventDefault, which is not standard button behaviour
   const onMouseDown = useCallback(event => {
     event.preventDefault();
     providedOnMouseDown(event);
-  }, [providedOnMouseDown]); // Lose focus when becoming disabled (standard button behaviour)
+  }, [providedOnMouseDown]);
 
+  // Lose focus when becoming disabled (standard button behaviour)
   useEffect(() => {
     const 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
   const hasOverlay = Boolean(overlay);
   const fadeCss = css(getFadingCss({
     hasOverlay
   }));
   const 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': {
@@ -113,7 +113,6 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       }
     };
   }
-
   return jsx(Component, _extends({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -121,11 +120,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/es2019/shared/css.js

@@ -3,7 +3,9 @@ import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as g
 import colors from './colors';
 const borderRadius = getBorderRadius();
 const gridSize = getGridSize();
-const fontSize = getFontSize(); // ## Button layout
+const fontSize = getFontSize();
+
+// ## Button layout
 //
 // /------------------------------------------------------------------------------------------------------------------\
 // |       →  |  ←      |          |      →  |  ←      |           |      →  |  ←      |         |      →  |  ←       |
@@ -15,7 +17,6 @@ const fontSize = getFontSize(); // ## Button layout
 //                                           ↑                               ↑
 //                                        Margins don't collapse with inline-flex
 //
-
 const heights = {
   default: `${gridSize * 4 / fontSize}em`,
   // 32px
@@ -48,7 +49,6 @@ const innerMargin = {
   content: `0 ${gridSize / 4}px`,
   icon: `0 ${gridSize / 4}px`
 };
-
 function getColor({
   group,
   key,
@@ -57,7 +57,6 @@ function getColor({
   const rule = group[key] || group.default;
   return rule[mode];
 }
-
 function getColors({
   appearance,
   key,
@@ -77,7 +76,6 @@ function getColors({
     })} !important`
   };
 }
-
 export function getCss({
   appearance,
   spacing,
@@ -123,10 +121,13 @@ export function getCss({
     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': { ...baseColors
+    '&:visited': {
+      ...baseColors
     },
-    '&:hover': { ...getColors({
+    '&:hover': {
+      ...getColors({
         appearance,
         key: isSelected ? 'selected' : 'hover',
         mode
@@ -135,7 +136,8 @@ export function getCss({
       // background, box-shadow
       transitionDuration: '0s, 0.15s'
     },
-    '&:focus': { ...getColors({
+    '&:focus': {
+      ...getColors({
         appearance,
         key: isSelected ? 'focusSelected' : 'focus',
         mode
@@ -147,7 +149,8 @@ export function getCss({
       outline: 'none'
     },
     // giving active styles preference by listing them after focus
-    '&:active': { ...getColors({
+    '&:active': {
+      ...getColors({
         appearance,
         key: isSelected ? 'selected' : 'active',
         mode
@@ -156,7 +159,8 @@ export function getCss({
       transitionDuration: '0s, 0s'
     },
     // preventDefault prevents regular active styles from applying in Firefox
-    '&[data-firefox-is-active="true"]': { ...getColors({
+    '&[data-firefox-is-active="true"]': {
+      ...getColors({
         appearance,
         key: isSelected ? 'selected' : 'active',
         mode
@@ -168,7 +172,8 @@ export function getCss({
     // 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]': { // always using 'disabled' even when selected
+    '&[disabled]': {
+      // always using 'disabled' even when selected
       ...getColors({
         appearance,
         key: 'disabled',
@@ -182,7 +187,8 @@ export function getCss({
       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': { ...getColors({
+    '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
+      ...getColors({
         appearance,
         key: isSelected ? 'selected' : 'default',
         mode
@@ -194,8 +200,9 @@ export function getCss({
       padding: 0
     }
   };
-} // inline-flex child
+}
 
+// inline-flex child
 export function getIconStyle({
   spacing
 }) {
@@ -210,8 +217,9 @@ export function getIconStyle({
     lineHeight: 0,
     userSelect: 'none'
   });
-} // inline-flex child
+}
 
+// inline-flex child
 export function getContentStyle({
   spacing
 }) {

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

@@ -6,14 +6,11 @@ export default function getIsOnlySingleIcon({
   if (children) {
     return false;
   }
-
   if (iconBefore && !iconAfter) {
     return true;
   }
-
   if (!iconBefore && iconAfter) {
     return true;
   }
-
   return false;
 }

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import Spinner from '@atlaskit/spinner';
-
 function getSpinnerAppearance({
   appearance,
   isDisabled,
@@ -9,18 +8,14 @@ function getSpinnerAppearance({
   if (isDisabled) {
     return 'inherit';
   }
-
   if (isSelected) {
     return 'invert';
   }
-
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }
-
   return 'inherit';
 }
-
 export default function LoadingSpinner({
   spacing = 'default',
   ...rest

package/dist/es2019/version.json

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

package/dist/esm/button-group.js

@@ -3,22 +3,20 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 var buttonGroupStyles = css({
   display: 'inline-flex',
-  // TODO Delete this comment after verifying spacing token -> previous value `4`
-  gap: "var(--ds-scale-050, 4px)",
+  gap: "var(--ds-space-050, 4px)",
   '> *': {
     flex: '1 0 auto'
   }
 });
 export default function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
-      children = _ref.children;
+    children = _ref.children;
   return jsx("div", {
     css: buttonGroupStyles
   }, React.Children.map(React.Children.toArray(children), function (child, idx) {
     if (!child) {
       return null;
     }
-
     return jsx(Fragment, {
       key: idx
     }, appearance ?

package/dist/esm/button.js

@@ -9,7 +9,6 @@ import ButtonBase from './shared/button-base';
 import { getCss } from './shared/css';
 import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
 /**
  * __Button__
  *
@@ -21,37 +20,32 @@ var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerC
  */
 var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var _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, _excluded);
-
+    providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
+    _ref$onMouseUp = _ref.onMouseUp,
+    providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   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
-
+    _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);
     }
@@ -68,14 +62,16 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
   }, [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
+    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
   }));
-})); // Tools including enzyme rely on components having a display name
+}));
 
+// Tools including enzyme rely on components having a display name
 Button.displayName = 'Button';
 export default Button;