@atlaskit/button 17.7.1 → 17.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 17.8.0
+
+### Minor Changes
+
+- [#85228](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85228) [`9564de632638`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9564de632638) - Introduces isLoading prop to the new Button and IconButton components. When set to true a traditional loading spinner will be shown.
+
+## 17.7.2
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
 ## 17.7.1
 
 ### Patch Changes

package/button-group/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/button-group.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/entry-points/button-group.d.ts"
       ]

package/custom-theme-button/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/custom-theme-button.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/entry-points/custom-theme-button.d.ts"
       ]

package/dist/cjs/new-button/variants/default/button.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "UNSAFE_iconAfter_size", "iconAfter", "UNSAFE_iconBefore_size", "children", "shouldFitContainer", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
+var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "isLoading", "UNSAFE_iconAfter_size", "iconAfter", "UNSAFE_iconBefore_size", "children", "shouldFitContainer", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
 /**
  * __Button__
  *
@@ -29,6 +29,7 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     iconBefore = _ref.iconBefore,
+    isLoading = _ref.isLoading,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     iconAfter = _ref.iconAfter,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
@@ -62,6 +63,7 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isLoading: isLoading,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

package/dist/cjs/new-button/variants/default/use-default-button.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _content = _interopRequireDefault(require("../shared/content"));
+var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -32,6 +33,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     children = _ref.children,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -47,7 +50,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var hasOverlay = Boolean(overlay);
+  var hasOverlay = Boolean(overlay || isLoading);
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -81,7 +84,12 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: overlay,
+    overlay: isLoading ? (0, _loadingOverlay.default)({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

package/dist/cjs/new-button/variants/icon/button.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size", "aria-label"];
+var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "isLoading", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size", "aria-label"];
 /**
  * __Icon Button__
  *
@@ -28,6 +28,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     spacing = _ref.spacing,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    isLoading = _ref.isLoading,
     icon = _ref.icon,
     label = _ref.label,
     overlay = _ref.overlay,
@@ -61,6 +62,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isLoading: isLoading,
     label: label,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

package/dist/cjs/new-button/variants/icon/use-icon-button.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _content = _interopRequireDefault(require("../shared/content"));
+var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 /**
  * __Use icon button__
@@ -27,6 +28,7 @@ var useIconButton = function useIconButton(_ref) {
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    isLoading = _ref.isLoading,
     label = _ref.label,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -44,7 +46,7 @@ var useIconButton = function useIconButton(_ref) {
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     UNSAFE_size = _ref.UNSAFE_size;
-  var hasOverlay = Boolean(overlay);
+  var hasOverlay = Boolean(overlay || isLoading);
   var isCircle = shape === 'circle';
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
@@ -73,7 +75,12 @@ var useIconButton = function useIconButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: overlay,
+    overlay: isLoading ? (0, _loadingOverlay.default)({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing

package/dist/cjs/new-button/variants/shared/loading-overlay.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renderLoadingOverlay;
+var _react = _interopRequireDefault(require("react"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+function getIconSpacing(spacing) {
+  switch (spacing) {
+    case 'compact':
+      return 'small';
+    case 'none':
+      return 'xsmall';
+    default:
+      return 'medium';
+  }
+}
+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 renderLoadingOverlay(_ref2) {
+  var appearance = _ref2.appearance,
+    spacing = _ref2.spacing,
+    isDisabled = _ref2.isDisabled,
+    isSelected = _ref2.isSelected;
+  return /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    label: ", Loading",
+    size: getIconSpacing(spacing),
+    appearance: getSpinnerAppearance({
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    })
+  });
+}

package/dist/cjs/old-button/shared/button-base.js

@@ -117,7 +117,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.7.1",
+    packageVersion: "17.8.0",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/new-button/variants/default/button.js

@@ -20,6 +20,7 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   isDisabled,
   isSelected,
   iconBefore,
+  isLoading,
   UNSAFE_iconAfter_size,
   iconAfter,
   UNSAFE_iconBefore_size,
@@ -53,6 +54,7 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
     interactionName,
     isDisabled,
     isSelected,
+    isLoading,
     onClick,
     onMouseDownCapture,
     onMouseUpCapture,

package/dist/es2019/new-button/variants/default/use-default-button.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
+import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use default button base__
@@ -22,6 +23,7 @@ const useDefaultButton = ({
   interactionName,
   isDisabled,
   isSelected,
+  isLoading = false,
   children,
   onClick,
   onMouseDownCapture,
@@ -38,7 +40,7 @@ const useDefaultButton = ({
   shouldFitContainer,
   spacing
 }) => {
-  const hasOverlay = Boolean(overlay);
+  const hasOverlay = Boolean(overlay || isLoading);
   const baseProps = useButtonBase({
     analyticsContext,
     appearance,
@@ -72,7 +74,12 @@ const useDefaultButton = ({
     onPointerDownCapture,
     onPointerUpCapture,
     onClickCapture,
-    overlay,
+    overlay: isLoading ? renderLoadingOverlay({
+      spacing,
+      appearance,
+      isDisabled,
+      isSelected
+    }) : overlay,
     ref,
     shouldFitContainer,
     spacing,

package/dist/es2019/new-button/variants/icon/button.js

@@ -19,6 +19,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   spacing,
   isDisabled,
   isSelected,
+  isLoading,
   icon,
   label,
   overlay,
@@ -53,6 +54,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     interactionName,
     isDisabled,
     isSelected,
+    isLoading,
     label,
     onClick,
     onMouseDownCapture,

package/dist/es2019/new-button/variants/icon/use-icon-button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
+import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use icon button__
@@ -20,6 +21,7 @@ const useIconButton = ({
   interactionName,
   isDisabled,
   isSelected,
+  isLoading,
   label,
   onClick,
   onMouseDownCapture,
@@ -38,7 +40,7 @@ const useIconButton = ({
   spacing,
   UNSAFE_size
 }) => {
-  const hasOverlay = Boolean(overlay);
+  const hasOverlay = Boolean(overlay || isLoading);
   const isCircle = shape === 'circle';
   const baseProps = useButtonBase({
     analyticsContext,
@@ -67,7 +69,12 @@ const useIconButton = ({
     onPointerDownCapture,
     onPointerUpCapture,
     onClickCapture,
-    overlay,
+    overlay: isLoading ? renderLoadingOverlay({
+      spacing,
+      appearance,
+      isDisabled,
+      isSelected
+    }) : overlay,
     ref,
     shouldFitContainer,
     spacing

package/dist/es2019/new-button/variants/shared/loading-overlay.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Spinner from '@atlaskit/spinner';
+function getIconSpacing(spacing) {
+  switch (spacing) {
+    case 'compact':
+      return 'small';
+    case 'none':
+      return 'xsmall';
+    default:
+      return 'medium';
+  }
+}
+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 renderLoadingOverlay({
+  appearance,
+  spacing,
+  isDisabled,
+  isSelected
+}) {
+  return /*#__PURE__*/React.createElement(Spinner, {
+    label: ", Loading",
+    size: getIconSpacing(spacing),
+    appearance: getSpinnerAppearance({
+      appearance,
+      isDisabled,
+      isSelected
+    })
+  });
+}

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

@@ -102,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.7.1",
+    packageVersion: "17.8.0",
     analyticsData: analyticsContext
   });
 

package/dist/esm/new-button/variants/default/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "UNSAFE_iconAfter_size", "iconAfter", "UNSAFE_iconBefore_size", "children", "shouldFitContainer", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
+var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "isLoading", "UNSAFE_iconAfter_size", "iconAfter", "UNSAFE_iconBefore_size", "children", "shouldFitContainer", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
@@ -22,6 +22,7 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     iconBefore = _ref.iconBefore,
+    isLoading = _ref.isLoading,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     iconAfter = _ref.iconAfter,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
@@ -55,6 +56,7 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isLoading: isLoading,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

package/dist/esm/new-button/variants/default/use-default-button.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
+import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use default button base__
@@ -22,6 +23,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     children = _ref.children,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -37,7 +40,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var hasOverlay = Boolean(overlay);
+  var hasOverlay = Boolean(overlay || isLoading);
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -71,7 +74,12 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: overlay,
+    overlay: isLoading ? renderLoadingOverlay({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

package/dist/esm/new-button/variants/icon/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size", "aria-label"];
+var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "isLoading", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size", "aria-label"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
 import useIconButton from './use-icon-button';
@@ -21,6 +21,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     spacing = _ref.spacing,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    isLoading = _ref.isLoading,
     icon = _ref.icon,
     label = _ref.label,
     overlay = _ref.overlay,
@@ -54,6 +55,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isLoading: isLoading,
     label: label,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

package/dist/esm/new-button/variants/icon/use-icon-button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
+import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use icon button__
@@ -20,6 +21,7 @@ var useIconButton = function useIconButton(_ref) {
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    isLoading = _ref.isLoading,
     label = _ref.label,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -37,7 +39,7 @@ var useIconButton = function useIconButton(_ref) {
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     UNSAFE_size = _ref.UNSAFE_size;
-  var hasOverlay = Boolean(overlay);
+  var hasOverlay = Boolean(overlay || isLoading);
   var isCircle = shape === 'circle';
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
@@ -66,7 +68,12 @@ var useIconButton = function useIconButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: overlay,
+    overlay: isLoading ? renderLoadingOverlay({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing

package/dist/esm/new-button/variants/shared/loading-overlay.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Spinner from '@atlaskit/spinner';
+function getIconSpacing(spacing) {
+  switch (spacing) {
+    case 'compact':
+      return 'small';
+    case 'none':
+      return 'xsmall';
+    default:
+      return 'medium';
+  }
+}
+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';
+}
+export default function renderLoadingOverlay(_ref2) {
+  var appearance = _ref2.appearance,
+    spacing = _ref2.spacing,
+    isDisabled = _ref2.isDisabled,
+    isSelected = _ref2.isSelected;
+  return /*#__PURE__*/React.createElement(Spinner, {
+    label: ", Loading",
+    size: getIconSpacing(spacing),
+    appearance: getSpinnerAppearance({
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    })
+  });
+}

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

@@ -108,7 +108,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.7.1",
+    packageVersion: "17.8.0",
     analyticsData: analyticsContext
   });
 

package/dist/types/new-button/variants/default/link.d.ts

@@ -1,4 +1,4 @@
-import React, { type Ref } from 'react';
+import { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
@@ -12,7 +12,7 @@ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = ne
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonDefaultButtonProps & import("../types").AdditionalCommonLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & AdditionalDefaultLinkVariantProps & {
-    ref?: React.Ref<HTMLAnchorElement> | undefined;
+declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: LinkButtonProps<RouterLinkConfig> & {
+    ref?: Ref<HTMLAnchorElement>;
 }) => ReturnType<typeof LinkButtonBase>;
 export default LinkButton;

package/dist/types/new-button/variants/default/types.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { type ButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonDefaultButtonProps = {
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
     /**
      * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
      */

package/dist/types/new-button/variants/default/use-default-button.d.ts

@@ -11,5 +11,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore: IconBefore, UNSAFE_iconBefore_size, iconAfter: IconAfter, UNSAFE_iconAfter_size, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore: IconBefore, UNSAFE_iconBefore_size, iconAfter: IconAfter, UNSAFE_iconAfter_size, interactionName, isDisabled, isSelected, isLoading, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

package/dist/types/new-button/variants/icon/link.d.ts

@@ -1,4 +1,4 @@
-import React, { type Ref } from 'react';
+import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
@@ -12,7 +12,7 @@ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any>
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & import("../types").AdditionalCommonLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
-    ref?: React.Ref<HTMLAnchorElement> | undefined;
+declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: LinkIconButtonProps<RouterLinkConfig> & {
+    ref?: Ref<HTMLAnchorElement>;
 }) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

package/dist/types/new-button/variants/icon/types.d.ts

@@ -1,5 +1,9 @@
 import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonIconButtonProps = {
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
     /**
      * The button style variation.
      */

package/dist/types/new-button/variants/icon/use-icon-button.d.ts

@@ -11,5 +11,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isSelected, label, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shape, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isSelected, isLoading, label, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shape, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types/new-button/variants/shared/loading-overlay.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Appearance, type ButtonSpacing } from '../types';
+export default function renderLoadingOverlay({ appearance, spacing, isDisabled, isSelected, }: {
+    spacing?: ButtonSpacing;
+    appearance?: Appearance;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+}): JSX.Element;

package/dist/types/utils/variants.d.ts

@@ -37,14 +37,14 @@ type DefaultButtonVariants = DefaultButtonVariant | LinkButtonVariant;
 type LinkButtonVariants = LinkButtonVariant | LinkIconButtonVariant;
 type IconButtonVariants = IconButtonVariant | LinkIconButtonVariant;
 export type Variant = DefaultButtonVariant | LinkButtonVariant | IconButtonVariant | LinkIconButtonVariant;
-declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
+declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
     icon?: import("../new-button/variants/types").IconProp | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
-declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "label" | "href" | "icon"> & {
+declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
     href?: string | undefined;
     icon?: import("../new-button/variants/types").IconProp | undefined;
     label?: string | undefined;

package/dist/types-ts4.5/new-button/variants/default/link.d.ts

@@ -1,4 +1,4 @@
-import React, { type Ref } from 'react';
+import { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
@@ -12,7 +12,7 @@ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = ne
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonDefaultButtonProps & import("../types").AdditionalCommonLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & AdditionalDefaultLinkVariantProps & {
-    ref?: React.Ref<HTMLAnchorElement> | undefined;
+declare const LinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: LinkButtonProps<RouterLinkConfig> & {
+    ref?: Ref<HTMLAnchorElement>;
 }) => ReturnType<typeof LinkButtonBase>;
 export default LinkButton;

package/dist/types-ts4.5/new-button/variants/default/types.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { type ButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonDefaultButtonProps = {
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
     /**
      * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
      */

package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts

@@ -11,5 +11,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore: IconBefore, UNSAFE_iconBefore_size, iconAfter: IconAfter, UNSAFE_iconAfter_size, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore: IconBefore, UNSAFE_iconBefore_size, iconAfter: IconAfter, UNSAFE_iconAfter_size, interactionName, isDisabled, isSelected, isLoading, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -1,4 +1,4 @@
-import React, { type Ref } from 'react';
+import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
@@ -12,7 +12,7 @@ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any>
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & import("../types").AdditionalCommonLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
-    ref?: React.Ref<HTMLAnchorElement> | undefined;
+declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: LinkIconButtonProps<RouterLinkConfig> & {
+    ref?: Ref<HTMLAnchorElement>;
 }) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

package/dist/types-ts4.5/new-button/variants/icon/types.d.ts

@@ -1,5 +1,9 @@
 import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonIconButtonProps = {
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
     /**
      * The button style variation.
      */

package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts

@@ -11,5 +11,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isSelected, label, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shape, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isSelected, isLoading, label, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shape, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types-ts4.5/new-button/variants/shared/loading-overlay.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Appearance, type ButtonSpacing } from '../types';
+export default function renderLoadingOverlay({ appearance, spacing, isDisabled, isSelected, }: {
+    spacing?: ButtonSpacing;
+    appearance?: Appearance;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+}): JSX.Element;

package/dist/types-ts4.5/utils/variants.d.ts

@@ -37,14 +37,14 @@ type DefaultButtonVariants = DefaultButtonVariant | LinkButtonVariant;
 type LinkButtonVariants = LinkButtonVariant | LinkIconButtonVariant;
 type IconButtonVariants = IconButtonVariant | LinkIconButtonVariant;
 export type Variant = DefaultButtonVariant | LinkButtonVariant | IconButtonVariant | LinkIconButtonVariant;
-declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
+declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
     icon?: import("../new-button/variants/types").IconProp | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
-declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "label" | "href" | "icon"> & {
+declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
     href?: string | undefined;
     icon?: import("../new-button/variants/types").IconProp | undefined;
     label?: string | undefined;

package/loading-button/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/loading-button.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/entry-points/loading-button.d.ts"
       ]

package/new/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/new.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/entry-points/new.d.ts"
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.7.1",
+  "version": "17.8.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -87,10 +87,10 @@
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/interaction-context": "^2.1.0",
-    "@atlaskit/primitives": "^5.0.0",
+    "@atlaskit/primitives": "^5.1.0",
     "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.41.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -119,7 +119,7 @@
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "~4.9.5",
+    "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -144,4 +144,4 @@
   },
   "homepage": "https://atlassian.design/components/button/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/standard-button/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/standard-button.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/entry-points/standard-button.d.ts"
       ]

package/types/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/types.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/entry-points/types.d.ts"
       ]