@atlaskit/button 20.0.0 → 20.1.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/button
 
+## 20.1.1
+
+### Patch Changes
+
+- [#139966](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139966)
+  [`1e6883fdd5111`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1e6883fdd5111) -
+  Change `react-uid` to use ID generator that is compatible with React16 and React 18; Strict React
+  18 behind a flag.
+
+## 20.1.0
+
+### Minor Changes
+
+- [#131274](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131274)
+  [`1a59a1dc3f2f2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1a59a1dc3f2f2) -
+  Correct hover states for old loading button
+
 ## 20.0.0
 
 ### Major Changes

package/__perf__/customised.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-20398 */
 import React from 'react';
 
 import AddIcon from '@atlaskit/icon/glyph/editor/add';

package/dist/cjs/containers/button-group.js

@@ -8,7 +8,7 @@ exports.default = ButtonGroup;
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 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; }
+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 && {}.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; }
 /**
  * @jsxRuntime classic
  * @jsx jsx

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

@@ -18,4 +18,4 @@ Object.defineProperty(exports, "default", {
 });
 var _customThemeButton = _interopRequireWildcard(require("../old-button/custom-theme-button"));
 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; }
+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 && {}.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; }

package/dist/cjs/index.js

@@ -40,4 +40,4 @@ var _loadingButton = _interopRequireDefault(require("./entry-points/loading-butt
 var _customThemeButton = _interopRequireWildcard(require("./entry-points/custom-theme-button"));
 var _buttonGroup = _interopRequireDefault(require("./entry-points/button-group"));
 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; }
+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 && {}.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; }

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

@@ -14,7 +14,7 @@ var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
 var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId"],
   _excluded2 = ["className", "css", "as", "style"];
 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; }
+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 && {}.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; }
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,

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

@@ -11,7 +11,7 @@ var _content = _interopRequireDefault(require("../shared/content"));
 var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
 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; }
+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 && {}.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; }
 /**
  * __Use default button base__
  *

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

@@ -15,7 +15,7 @@ var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
 var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip"],
   _excluded2 = ["className", "css", "as", "style"];
 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; }
+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 && {}.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; }
 var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var preventedAriaLabel = _ref['aria-label'],
     ariaLabelledBy = _ref['aria-labelledby'],

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

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUid = require("react-uid");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
@@ -20,7 +20,7 @@ var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _constants = require("./constants");
 var _loadingOverlay = _interopRequireDefault(require("./loading-overlay"));
 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; }
+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 && {}.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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buttonStyles = (0, _primitives.xcss)({
@@ -485,11 +485,7 @@ var useButtonBase = function useButtonBase(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy;
   var localRef = (0, _react.useRef)(null);
   var splitButtonContext = (0, _splitButtonContext.useSplitButtonContext)();
-  // TODO: Use React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var loadingLabelId = (0, _reactUid.uid)({
-    ariaLabelledBy: ariaLabelledBy
-  });
+  var loadingLabelId = (0, _reactUid.useId)();
   var isSplitButton = Boolean(splitButtonContext);
   var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';

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

@@ -17,7 +17,7 @@ var _css = require("./shared/css");
 var _getIsOnlySingleIcon = _interopRequireDefault(require("./shared/get-is-only-single-icon"));
 var _excluded = ["appearance", "children", "iconBefore", "iconAfter", "isSelected", "onMouseDown", "onMouseUp", "shouldFitContainer", "spacing"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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; }
+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 && {}.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; }
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 /**
  * __Button__

package/dist/cjs/old-button/custom-theme-button/custom-theme-button.js

@@ -18,7 +18,7 @@ var _loadingSpinner = _interopRequireDefault(require("../shared/loading-spinner"
 var _theme = _interopRequireWildcard(require("./theme"));
 var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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; }
+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 && {}.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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function getInteractionState(_ref) {

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

@@ -28,7 +28,7 @@ var _excluded = ["analyticsContext", "appearance", "autoFocus", "buttonCss", "ch
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line no-duplicate-imports
 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; }
+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 && {}.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; }
 // 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
@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.0.0",
+    packageVersion: "20.1.1",
     analyticsData: analyticsContext
   });
 

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 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; }
+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 && {}.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; }
 // Hard coding the active rgba color value rather than using a helper to convert it
 // With helper it would be: hex2rgba(colors.B75, 0.6)
 var fadedB75 = 'rgba(179, 212, 255, 0.6)';

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

@@ -83,6 +83,9 @@ var defaultStyles = {
   },
   '&:active': {
     background: "var(--ds-background-neutral-pressed, #091E424F)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-neutral-subtle, #00000000)"
   }
 };
 var primaryStyles = {
@@ -93,6 +96,9 @@ var primaryStyles = {
   },
   '&:active': {
     background: "var(--ds-background-brand-bold-pressed, #09326C)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-brand-bold, #0C66E4)"
   }
 };
 var linkStyles = {
@@ -115,6 +121,9 @@ var subtleStyles = {
   },
   '&:active': {
     background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: 'transparent'
   }
 };
 var subtleLinkStyles = {
@@ -139,6 +148,9 @@ var warningStyles = {
   },
   '&:active': {
     background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-warning-bold, #F5CD47)"
   }
 };
 var dangerStyles = {
@@ -149,6 +161,9 @@ var dangerStyles = {
   },
   '&:active': {
     background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-danger-bold, #C9372C)"
   }
 };
 var selectedStyles = {
@@ -280,7 +295,7 @@ function getCss(_ref3) {
       key: isSelected ? 'selected' : 'default',
       mode: mode
     }))
-  })), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
+  })), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
     '&[disabled]': {
       color: "var(--ds-text-disabled, #091E424F)",
       backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
@@ -293,12 +308,7 @@ function getCss(_ref3) {
         backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
       }
     }
-  }, hasOverlayStyles), {}, {
-    // 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': {
-      background: 'inherit'
-    }
-  }))), {}, {
+  }, hasOverlayStyles))), {}, {
     '&::-moz-focus-inner': {
       border: 0,
       margin: 0,

package/dist/cjs/utils/variants.js

@@ -19,8 +19,9 @@ var _spacing = require("./spacing");
 var _excluded = ["href", "children"],
   _excluded2 = ["icon", "label"],
   _excluded3 = ["href", "icon", "label"];
+/* eslint-disable @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-20398 */
 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; }
+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 && {}.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; }
 // Add required default props to variants
 var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$href = _ref.href,

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

@@ -1,6 +1,6 @@
 import React, { Fragment, useRef } from 'react';
-import { uid } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
@@ -464,11 +464,7 @@ const useButtonBase = ({
 }) => {
   const localRef = useRef(null);
   const splitButtonContext = useSplitButtonContext();
-  // TODO: Use React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  const loadingLabelId = uid({
-    ariaLabelledBy
-  });
+  const loadingLabelId = useId();
   const isSplitButton = Boolean(splitButtonContext);
   const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   const isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';

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

@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.0.0",
+    packageVersion: "20.1.1",
     analyticsData: analyticsContext
   });
 

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

@@ -73,6 +73,9 @@ const defaultStyles = {
   },
   '&:active': {
     background: "var(--ds-background-neutral-pressed, #091E424F)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-neutral-subtle, #00000000)"
   }
 };
 const primaryStyles = {
@@ -83,6 +86,9 @@ const primaryStyles = {
   },
   '&:active': {
     background: "var(--ds-background-brand-bold-pressed, #09326C)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-brand-bold, #0C66E4)"
   }
 };
 const linkStyles = {
@@ -105,6 +111,9 @@ const subtleStyles = {
   },
   '&:active': {
     background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: 'transparent'
   }
 };
 const subtleLinkStyles = {
@@ -129,6 +138,9 @@ const warningStyles = {
   },
   '&:active': {
     background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-warning-bold, #F5CD47)"
   }
 };
 const dangerStyles = {
@@ -139,6 +151,9 @@ const dangerStyles = {
   },
   '&:active': {
     background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-danger-bold, #C9372C)"
   }
 };
 const selectedStyles = {
@@ -309,11 +324,7 @@ export function getCss({
           backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
         }
       },
-      ...hasOverlayStyles,
-      // 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': {
-        background: 'inherit'
-      }
+      ...hasOverlayStyles
     })),
     '&::-moz-focus-inner': {
       border: 0,

package/dist/es2019/utils/variants.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-20398 */
 import React, { forwardRef } from 'react';
 import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
 import Button from '../new-button/variants/default/button';

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

@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { Fragment, useRef } from 'react';
-import { uid } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
@@ -475,11 +475,7 @@ var useButtonBase = function useButtonBase(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy;
   var localRef = useRef(null);
   var splitButtonContext = useSplitButtonContext();
-  // TODO: Use React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var loadingLabelId = uid({
-    ariaLabelledBy: ariaLabelledBy
-  });
+  var loadingLabelId = useId();
   var isSplitButton = Boolean(splitButtonContext);
   var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';

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

@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.0.0",
+    packageVersion: "20.1.1",
     analyticsData: analyticsContext
   });
 

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

@@ -75,6 +75,9 @@ var defaultStyles = {
   },
   '&:active': {
     background: "var(--ds-background-neutral-pressed, #091E424F)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-neutral-subtle, #00000000)"
   }
 };
 var primaryStyles = {
@@ -85,6 +88,9 @@ var primaryStyles = {
   },
   '&:active': {
     background: "var(--ds-background-brand-bold-pressed, #09326C)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-brand-bold, #0C66E4)"
   }
 };
 var linkStyles = {
@@ -107,6 +113,9 @@ var subtleStyles = {
   },
   '&:active': {
     background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: 'transparent'
   }
 };
 var subtleLinkStyles = {
@@ -131,6 +140,9 @@ var warningStyles = {
   },
   '&:active': {
     background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-warning-bold, #F5CD47)"
   }
 };
 var dangerStyles = {
@@ -141,6 +153,9 @@ var dangerStyles = {
   },
   '&:active': {
     background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
+  },
+  '&[data-has-overlay="true"]:not([disabled]):hover': {
+    background: "var(--ds-background-danger-bold, #C9372C)"
   }
 };
 var selectedStyles = {
@@ -272,7 +287,7 @@ export function getCss(_ref3) {
       key: isSelected ? 'selected' : 'default',
       mode: mode
     }))
-  })), fg('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
+  })), fg('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
     '&[disabled]': {
       color: "var(--ds-text-disabled, #091E424F)",
       backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
@@ -285,12 +300,7 @@ export function getCss(_ref3) {
         backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
       }
     }
-  }, hasOverlayStyles), {}, {
-    // 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': {
-      background: 'inherit'
-    }
-  }))), {}, {
+  }, hasOverlayStyles))), {}, {
     '&::-moz-focus-inner': {
       border: 0,
       margin: 0,

package/dist/esm/utils/variants.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["href", "children"],
   _excluded2 = ["icon", "label"],
   _excluded3 = ["href", "icon", "label"];
+/* eslint-disable @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-20398 */
 import React, { forwardRef } from 'react';
 import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
 import Button from '../new-button/variants/default/button';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "20.0.0",
+	"version": "20.1.1",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,10 +24,6 @@
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "Button",
 			"category": "Components",
@@ -87,20 +83,19 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/focus-ring": "^1.6.0",
-		"@atlaskit/icon": "^22.13.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/interaction-context": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
-		"react-uid": "^2.2.0"
+		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -110,11 +105,11 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/app-provider": "^1.4.0",
-		"@atlaskit/calendar": "^14.5.0",
-		"@atlaskit/checkbox": "^13.7.0",
-		"@atlaskit/dropdown-menu": "^12.17.0",
+		"@atlaskit/calendar": "^15.0.0",
+		"@atlaskit/checkbox": "^14.0.0",
+		"@atlaskit/dropdown-menu": "^12.18.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/toggle": "^13.3.0",
+		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "^0.2.1",
 		"@testing-library/react": "^12.1.5",
@@ -128,7 +123,6 @@
 		"lodash": "^4.17.21",
 		"react-dom": "^16.8.0",
 		"react-router-dom": "^4.2.2",
-		"react-test-renderer": "^16.8.0",
 		"storybook-addon-performance": "^0.16.0",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"