@atlaskit/button 17.9.0 → 17.11.0

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

@@ -1,34 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo } from 'react';
 import UNSAFE_ANCHOR from '@atlaskit/primitives/anchor';
+import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
 const LinkIconButtonBase = ({
+  // Prevent duplicate labels being added.
+  'aria-label': preventedAriaLabel,
   analyticsContext,
-  interactionName,
-  autoFocus,
   appearance,
-  spacing,
+  autoFocus,
+  href,
+  icon,
+  interactionName,
   isDisabled,
   isSelected,
-  icon,
+  isTooltipDisabled = true,
   label,
-  overlay,
   onClick,
-  onMouseDownCapture,
-  onMouseUpCapture,
+  onClickCapture,
   onKeyDownCapture,
   onKeyUpCapture,
-  onTouchStartCapture,
-  onTouchEndCapture,
+  onMouseDownCapture,
+  onMouseUpCapture,
   onPointerDownCapture,
   onPointerUpCapture,
-  onClickCapture,
+  onTouchEndCapture,
+  onTouchStartCapture,
+  overlay,
   shape,
+  spacing,
   testId,
+  tooltip,
   UNSAFE_size,
-  href,
-  // Prevent duplicate labels being added.
-  'aria-label': preventedAriaLabel,
   ...rest
 }, ref) => {
   const baseProps = useIconButton({
@@ -57,6 +60,97 @@ const LinkIconButtonBase = ({
     spacing,
     UNSAFE_size
   });
+  if (!isTooltipDisabled) {
+    var _tooltip$content;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
+      testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
+      position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
+      delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
+      onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
+      onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
+      mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
+      analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
+      strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
+      tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
+      truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
+      component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
+      hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
+      hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
+    }, triggerProps => /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    , _extends({}, rest, {
+      testId: testId,
+      componentName: "LinkIconButton",
+      analyticsContext: analyticsContext,
+      interactionName: interactionName
+      // Shared between tooltip and native props
+      ,
+      onMouseOver: e => {
+        var _triggerProps$onMouse, _rest$onMouseOver;
+        (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
+        (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 ? void 0 : _rest$onMouseOver.call(rest, e);
+      },
+      onMouseOut: e => {
+        var _triggerProps$onMouse2, _rest$onMouseOut;
+        (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
+        (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 ? void 0 : _rest$onMouseOut.call(rest, e);
+      },
+      onMouseMove: e => {
+        var _triggerProps$onMouse3, _rest$onMouseMove;
+        (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
+        (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 ? void 0 : _rest$onMouseMove.call(rest, e);
+      },
+      onMouseDown: e => {
+        var _triggerProps$onMouse4, _rest$onMouseDown;
+        (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
+        (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 ? void 0 : _rest$onMouseDown.call(rest, e);
+      },
+      onFocus: e => {
+        var _triggerProps$onFocus, _rest$onFocus;
+        (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
+        (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, e);
+      },
+      onBlur: e => {
+        var _triggerProps$onBlur, _rest$onBlur;
+        (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
+        (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 ? void 0 : _rest$onBlur.call(rest, e);
+      }
+      // Shared between tooltip and base props
+      ,
+      onClick: (event, analyticsEvent) => {
+        var _baseProps$onClick, _triggerProps$onClick;
+        baseProps === null || baseProps === void 0 ? void 0 : (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 ? void 0 : _baseProps$onClick.call(baseProps, event, analyticsEvent);
+        triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
+      },
+      ref: ref => {
+        var _triggerProps$ref;
+        baseProps.ref(ref);
+        triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 ? void 0 : _triggerProps$ref.call(triggerProps, ref);
+      }
+      // Base props only
+      ,
+      xcss: baseProps.xcss,
+      onMouseDownCapture: baseProps.onMouseDownCapture,
+      onMouseUpCapture: baseProps.onMouseUpCapture,
+      onKeyDownCapture: baseProps.onKeyDownCapture,
+      onKeyUpCapture: baseProps.onKeyUpCapture,
+      onTouchStartCapture: baseProps.onTouchStartCapture,
+      onTouchEndCapture: baseProps.onTouchEndCapture,
+      onPointerDownCapture: baseProps.onPointerDownCapture,
+      onPointerUpCapture: baseProps.onPointerUpCapture,
+      onClickCapture: baseProps.onClickCapture
+      /**
+       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+       */
+      // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+      ,
+      href: baseProps.isDisabled ? undefined : href,
+      role: baseProps.isDisabled ? 'link' : undefined,
+      "aria-disabled": baseProps.isDisabled === true ? true : undefined
+    }), baseProps.children));
+  }
   return /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, rest, {

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

@@ -56,6 +56,7 @@ const useIconButton = ({
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName,
     isDisabled,
+    isLoading,
     isSelected,
     isIconButton: true,
     isCircle,

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

@@ -15,12 +15,9 @@ function getSpinnerAppearance({
   isDisabled,
   isSelected
 }) {
-  if (isDisabled) {
+  if (isDisabled || isSelected) {
     return 'inherit';
   }
-  if (isSelected) {
-    return 'invert';
-  }
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -33,6 +33,7 @@ const useButtonBase = ({
   autoFocus = false,
   buttonType,
   isDisabled: propIsDisabled = false,
+  isLoading = false,
   isSelected = false,
   // TODO: Separate Icon Button styling from button base
   isIconButton = false,
@@ -83,6 +84,7 @@ const useButtonBase = ({
     appearance,
     spacing,
     isDisabled,
+    isLoading,
     isSelected,
     isHighlighted,
     isActiveOverSelected,
@@ -95,7 +97,7 @@ const useButtonBase = ({
     hasIconAfter,
     isSplit: isSplitButton,
     isNavigationSplit: isNavigationSplitButton
-  }), [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }), [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   const isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return {
     ref: setRef,

package/dist/es2019/new-button/variants/shared/xcss.js

@@ -80,6 +80,7 @@ export function getXCSS({
   spacing,
   isDisabled,
   isSelected,
+  isLoading,
   isHighlighted,
   isActiveOverSelected,
   isIconButton,
@@ -157,8 +158,8 @@ export function getXCSS({
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center',
     ...combinedBaseColorStyles,
-    ...(isDisabled || hasOverlay ? {
-      cursor: 'not-allowed'
+    ...(isDisabled || hasOverlay || isLoading ? {
+      cursor: isLoading ? 'progress' : 'not-allowed'
     } : {}),
     ':hover': {
       ...getColors({
@@ -185,6 +186,11 @@ export function getXCSS({
       // background, box-shadow
       transitionDuration: '0s, 0s'
     },
+    ':focus': {
+      // Required due to Jira's AUI CSS reset
+      // See https://product-fabric.atlassian.net/browse/DSP-15687
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
+    },
     ...splitButtonStyles
   });
 }

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.9.0",
+    packageVersion: "17.11.0",
     analyticsData: analyticsContext
   });
 

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

@@ -63,6 +63,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

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

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
+var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
+import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
 /**
  * __Icon Button__
@@ -14,33 +15,36 @@ import useIconButton from './use-icon-button';
  * - [Usage](https://atlassian.design/components/button/usage)
  */
 var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
-  var analyticsContext = _ref.analyticsContext,
-    interactionName = _ref.interactionName,
-    autoFocus = _ref.autoFocus,
+  var preventedAriaLabel = _ref['aria-label'],
+    analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
-    spacing = _ref.spacing,
+    autoFocus = _ref.autoFocus,
+    icon = _ref.icon,
+    interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
-    isSelected = _ref.isSelected,
     isLoading = _ref.isLoading,
-    icon = _ref.icon,
+    isSelected = _ref.isSelected,
+    _ref$isTooltipDisable = _ref.isTooltipDisabled,
+    isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
     label = _ref.label,
-    overlay = _ref.overlay,
     onClick = _ref.onClick,
-    onMouseDownCapture = _ref.onMouseDownCapture,
-    onMouseUpCapture = _ref.onMouseUpCapture,
+    onClickCapture = _ref.onClickCapture,
     onKeyDownCapture = _ref.onKeyDownCapture,
     onKeyUpCapture = _ref.onKeyUpCapture,
-    onTouchStartCapture = _ref.onTouchStartCapture,
-    onTouchEndCapture = _ref.onTouchEndCapture,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
-    onClickCapture = _ref.onClickCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    overlay = _ref.overlay,
     shape = _ref.shape,
+    spacing = _ref.spacing,
+    testId = _ref.testId,
+    tooltip = _ref.tooltip,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
-    testId = _ref.testId,
     UNSAFE_size = _ref.UNSAFE_size,
-    preventedAriaLabel = _ref['aria-label'],
     rest = _objectWithoutProperties(_ref, _excluded);
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
@@ -73,6 +77,92 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     spacing: spacing,
     UNSAFE_size: UNSAFE_size
   });
+  if (!isTooltipDisabled) {
+    var _tooltip$content;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
+      testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
+      position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
+      delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
+      onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
+      onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
+      mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
+      analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
+      strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
+      tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
+      truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
+      component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
+      hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
+      hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
+    }, function (triggerProps) {
+      return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE
+      // Top level props
+      , _extends({}, rest, {
+        type: type,
+        testId: testId,
+        componentName: "IconButton",
+        analyticsContext: analyticsContext,
+        interactionName: interactionName
+        // Shared between tooltip and native props
+        ,
+        onMouseOver: function onMouseOver(e) {
+          var _triggerProps$onMouse, _rest$onMouseOver;
+          (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
+          (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 || _rest$onMouseOver.call(rest, e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          var _triggerProps$onMouse2, _rest$onMouseOut;
+          (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
+          (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 || _rest$onMouseOut.call(rest, e);
+        },
+        onMouseMove: function onMouseMove(e) {
+          var _triggerProps$onMouse3, _rest$onMouseMove;
+          (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
+          (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 || _rest$onMouseMove.call(rest, e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          var _triggerProps$onMouse4, _rest$onMouseDown;
+          (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
+          (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 || _rest$onMouseDown.call(rest, e);
+        },
+        onFocus: function onFocus(e) {
+          var _triggerProps$onFocus, _rest$onFocus;
+          (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
+          (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, e);
+        },
+        onBlur: function onBlur(e) {
+          var _triggerProps$onBlur, _rest$onBlur;
+          (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
+          (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, e);
+        }
+        // Shared between tooltip and base props
+        ,
+        onClick: function onClick(event, analyticsEvent) {
+          var _baseProps$onClick, _triggerProps$onClick;
+          baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
+        },
+        ref: function ref(_ref2) {
+          var _triggerProps$ref;
+          baseProps.ref(_ref2);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
+        }
+        // Base props only
+        ,
+        xcss: baseProps.xcss,
+        isDisabled: baseProps.isDisabled,
+        onMouseDownCapture: baseProps.onMouseDownCapture,
+        onMouseUpCapture: baseProps.onMouseUpCapture,
+        onKeyDownCapture: baseProps.onKeyDownCapture,
+        onKeyUpCapture: baseProps.onKeyUpCapture,
+        onTouchStartCapture: baseProps.onTouchStartCapture,
+        onTouchEndCapture: baseProps.onTouchEndCapture,
+        onPointerDownCapture: baseProps.onPointerDownCapture,
+        onPointerUpCapture: baseProps.onPointerUpCapture,
+        onClickCapture: baseProps.onClickCapture
+      }), baseProps.children);
+    });
+  }
   return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
     ref: baseProps.ref,
     xcss: baseProps.xcss,

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

@@ -1,35 +1,39 @@
 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", "testId", "UNSAFE_size", "href", "aria-label"];
+var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
 import React, { forwardRef, memo } from 'react';
 import UNSAFE_ANCHOR from '@atlaskit/primitives/anchor';
+import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
 var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
-  var analyticsContext = _ref.analyticsContext,
-    interactionName = _ref.interactionName,
-    autoFocus = _ref.autoFocus,
+  var preventedAriaLabel = _ref['aria-label'],
+    analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
-    spacing = _ref.spacing,
+    autoFocus = _ref.autoFocus,
+    href = _ref.href,
+    icon = _ref.icon,
+    interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
-    icon = _ref.icon,
+    _ref$isTooltipDisable = _ref.isTooltipDisabled,
+    isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
     label = _ref.label,
-    overlay = _ref.overlay,
     onClick = _ref.onClick,
-    onMouseDownCapture = _ref.onMouseDownCapture,
-    onMouseUpCapture = _ref.onMouseUpCapture,
+    onClickCapture = _ref.onClickCapture,
     onKeyDownCapture = _ref.onKeyDownCapture,
     onKeyUpCapture = _ref.onKeyUpCapture,
-    onTouchStartCapture = _ref.onTouchStartCapture,
-    onTouchEndCapture = _ref.onTouchEndCapture,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
-    onClickCapture = _ref.onClickCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    overlay = _ref.overlay,
     shape = _ref.shape,
+    spacing = _ref.spacing,
     testId = _ref.testId,
+    tooltip = _ref.tooltip,
     UNSAFE_size = _ref.UNSAFE_size,
-    href = _ref.href,
-    preventedAriaLabel = _ref['aria-label'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var baseProps = useIconButton({
     analyticsContext: analyticsContext,
@@ -57,6 +61,99 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     spacing: spacing,
     UNSAFE_size: UNSAFE_size
   });
+  if (!isTooltipDisabled) {
+    var _tooltip$content;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
+      testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
+      position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
+      delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
+      onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
+      onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
+      mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
+      analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
+      strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
+      tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
+      truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
+      component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
+      hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
+      hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
+    }, function (triggerProps) {
+      return /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      , _extends({}, rest, {
+        testId: testId,
+        componentName: "LinkIconButton",
+        analyticsContext: analyticsContext,
+        interactionName: interactionName
+        // Shared between tooltip and native props
+        ,
+        onMouseOver: function onMouseOver(e) {
+          var _triggerProps$onMouse, _rest$onMouseOver;
+          (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
+          (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 || _rest$onMouseOver.call(rest, e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          var _triggerProps$onMouse2, _rest$onMouseOut;
+          (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
+          (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 || _rest$onMouseOut.call(rest, e);
+        },
+        onMouseMove: function onMouseMove(e) {
+          var _triggerProps$onMouse3, _rest$onMouseMove;
+          (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
+          (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 || _rest$onMouseMove.call(rest, e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          var _triggerProps$onMouse4, _rest$onMouseDown;
+          (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
+          (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 || _rest$onMouseDown.call(rest, e);
+        },
+        onFocus: function onFocus(e) {
+          var _triggerProps$onFocus, _rest$onFocus;
+          (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
+          (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, e);
+        },
+        onBlur: function onBlur(e) {
+          var _triggerProps$onBlur, _rest$onBlur;
+          (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
+          (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, e);
+        }
+        // Shared between tooltip and base props
+        ,
+        onClick: function onClick(event, analyticsEvent) {
+          var _baseProps$onClick, _triggerProps$onClick;
+          baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
+        },
+        ref: function ref(_ref2) {
+          var _triggerProps$ref;
+          baseProps.ref(_ref2);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
+        }
+        // Base props only
+        ,
+        xcss: baseProps.xcss,
+        onMouseDownCapture: baseProps.onMouseDownCapture,
+        onMouseUpCapture: baseProps.onMouseUpCapture,
+        onKeyDownCapture: baseProps.onKeyDownCapture,
+        onKeyUpCapture: baseProps.onKeyUpCapture,
+        onTouchStartCapture: baseProps.onTouchStartCapture,
+        onTouchEndCapture: baseProps.onTouchEndCapture,
+        onPointerDownCapture: baseProps.onPointerDownCapture,
+        onPointerUpCapture: baseProps.onPointerUpCapture,
+        onClickCapture: baseProps.onClickCapture
+        /**
+         * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+         * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+         */
+        // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+        ,
+        href: baseProps.isDisabled ? undefined : href,
+        role: baseProps.isDisabled ? 'link' : undefined,
+        "aria-disabled": baseProps.isDisabled === true ? true : undefined
+      }), baseProps.children);
+    });
+  }
   return /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, rest, {

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

@@ -55,6 +55,7 @@ var useIconButton = function useIconButton(_ref) {
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     isIconButton: true,
     isCircle: isCircle,

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

@@ -14,12 +14,9 @@ function getSpinnerAppearance(_ref) {
   var appearance = _ref.appearance,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected;
-  if (isDisabled) {
+  if (isDisabled || isSelected) {
     return 'inherit';
   }
-  if (isSelected) {
-    return 'invert';
-  }
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }

package/dist/esm/new-button/variants/shared/use-button-base.js

@@ -39,6 +39,8 @@ var useButtonBase = function useButtonBase(_ref) {
     buttonType = _ref.buttonType,
     _ref$isDisabled = _ref.isDisabled,
     propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
@@ -94,6 +96,7 @@ var useButtonBase = function useButtonBase(_ref) {
       appearance: appearance,
       spacing: spacing,
       isDisabled: isDisabled,
+      isLoading: isLoading,
       isSelected: isSelected,
       isHighlighted: isHighlighted,
       isActiveOverSelected: isActiveOverSelected,
@@ -107,7 +110,7 @@ var useButtonBase = function useButtonBase(_ref) {
       isSplit: isSplitButton,
       isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }, [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,

package/dist/esm/new-button/variants/shared/xcss.js

@@ -82,6 +82,7 @@ export function getXCSS(_ref3) {
     spacing = _ref3.spacing,
     isDisabled = _ref3.isDisabled,
     isSelected = _ref3.isSelected,
+    isLoading = _ref3.isLoading,
     isHighlighted = _ref3.isHighlighted,
     isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
@@ -154,8 +155,8 @@ export function getXCSS(_ref3) {
     width: width,
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center'
-  }, combinedBaseColorStyles), isDisabled || hasOverlay ? {
-    cursor: 'not-allowed'
+  }, combinedBaseColorStyles), isDisabled || hasOverlay || isLoading ? {
+    cursor: isLoading ? 'progress' : 'not-allowed'
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
@@ -179,6 +180,11 @@ export function getXCSS(_ref3) {
     })), {}, {
       // background, box-shadow
       transitionDuration: '0s, 0s'
-    })
+    }),
+    ':focus': {
+      // Required due to Jira's AUI CSS reset
+      // See https://product-fabric.atlassian.net/browse/DSP-15687
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
+    }
   }, splitButtonStyles));
 }

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.9.0",
+    packageVersion: "17.11.0",
     analyticsData: analyticsContext
   });