@atlaskit/button 16.10.2 → 16.12.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/button
 
+## 16.12.0
+
+### Minor Changes
+
+- [#42305](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42305) [`4c9d4a7be34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c9d4a7be34) - - Link button variants (still in Alpha) `<LinkButton>` and `<LinkIconButton>` now support router link components through use of an app provider
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.11.0
+
+### Minor Changes
+
+- [#41859](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41859) [`7c662f243b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c662f243b9) - Expose more UNSAFE exports from UNSAFE entry point for internal work. PLEASE DO NO USE ANYTHING FROM "UNSAFE" ENTRY POINT WITH "UNSAFE" PREFIX.
+
 ## 16.10.2
 
 ### Patch Changes

package/dist/cjs/entry-points/new.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "LinkIconButton", {
     return _link2.default;
   }
 });
+Object.defineProperty(exports, "SplitButton", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButton;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -31,4 +37,5 @@ Object.defineProperty(exports, "default", {
 var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
 var _link = _interopRequireDefault(require("../new-button/variants/default/link"));
 var _button2 = _interopRequireDefault(require("../new-button/variants/icon/button"));
-var _link2 = _interopRequireDefault(require("../new-button/variants/icon/link"));
+var _link2 = _interopRequireDefault(require("../new-button/variants/icon/link"));
+var _splitButton = require("../new-button/containers/split-button");

package/dist/cjs/entry-points/unsafe.js

@@ -10,4 +10,43 @@ Object.defineProperty(exports, "UNSAFE_BUTTON", {
     return _button.default;
   }
 });
-var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
+Object.defineProperty(exports, "UNSAFE_DIVIDER", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.Divider;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_GET_ACTIONS", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.getActions;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_ICON_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _button2.default;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_SPLIT_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButton;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_SPLIT_BUTTON_CONTAINER", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButtonContainer;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_SPLIT_BUTTON_CONTEXT", {
+  enumerable: true,
+  get: function get() {
+    return _splitButtonContext.SplitButtonContext;
+  }
+});
+var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
+var _button2 = _interopRequireDefault(require("../new-button/variants/icon/button"));
+var _splitButton = require("../new-button/containers/split-button");
+var _splitButtonContext = require("../new-button/containers/split-button/split-button-context");

package/dist/cjs/new-button/containers/split-button/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.Divider;
+  }
+});
+Object.defineProperty(exports, "SplitButton", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButton;
+  }
+});
+Object.defineProperty(exports, "SplitButtonContainer", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButtonContainer;
+  }
+});
+Object.defineProperty(exports, "SplitButtonContext", {
+  enumerable: true,
+  get: function get() {
+    return _splitButtonContext.SplitButtonContext;
+  }
+});
+Object.defineProperty(exports, "SplitButtonWithSlots", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButtonWithSlots;
+  }
+});
+Object.defineProperty(exports, "getActions", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getActions;
+  }
+});
+Object.defineProperty(exports, "useSplitButtonContext", {
+  enumerable: true,
+  get: function get() {
+    return _splitButtonContext.useSplitButtonContext;
+  }
+});
+var _splitButton = require("./split-button");
+var _utils = require("./utils");
+var _splitButtonContext = require("./split-button-context");

package/dist/cjs/new-button/containers/split-button/split-button-context.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSplitButtonContext = exports.SplitButtonContext = void 0;
+var _react = require("react");
+/**
+ * TODO: Add jsdoc
+ */
+var SplitButtonContext = exports.SplitButtonContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useSplitButtonContext = exports.useSplitButtonContext = function useSplitButtonContext() {
+  var context = (0, _react.useContext)(SplitButtonContext);
+  if (!context) {
+    return undefined;
+  }
+  if (context.appearance === 'navigation') {
+    var newContext = {
+      spacing: 'default',
+      appearance: 'subtle',
+      isDisabled: false,
+      isActiveOverSelected: false,
+      isNavigationSplitButton: true,
+      isHighlighted: context.isHighlighted
+    };
+    return newContext;
+  }
+  var splitButtonContext = {
+    spacing: context.spacing,
+    appearance: context.appearance,
+    isDisabled: context.isDisabled,
+    isActiveOverSelected: true,
+    isNavigationSplitButton: false,
+    isHighlighted: false
+  };
+  return splitButtonContext;
+};

package/dist/cjs/new-button/containers/split-button/split-button.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
+var _react = require("@emotion/react");
+var _constants = require("@atlaskit/theme/constants");
+var _splitButtonContext = require("./split-button-context");
+var _utils = require("./utils");
+/** @jsx jsx */
+
+var fontSize = (0, _constants.fontSize)();
+var defaultDividerHeight = 20 / fontSize + 'em';
+var defaultDividerStyles = (0, _react.css)({
+  height: defaultDividerHeight,
+  margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
+});
+var compactDividerHeight = 16 / fontSize + 'em';
+var compactDividerStyles = (0, _react.css)({
+  height: compactDividerHeight,
+  margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
+});
+var baseDividerStyles = (0, _react.css)({
+  display: 'inline-flex',
+  width: '1px',
+  position: 'relative',
+  zIndex: 2
+});
+var disabledStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-border, #091E4224)",
+  cursor: 'not-allowed'
+});
+var navigationDividerStyles = (0, _react.css)({
+  height: compactDividerHeight,
+  margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
+  backgroundColor: "var(--ds-border, #0052cc)"
+});
+var dividerAppearance = {
+  default: (0, _react.css)({
+    backgroundColor: "var(--ds-text, #172B4D)"
+  }),
+  primary: (0, _react.css)({
+    backgroundColor: "var(--ds-text-inverse, #FFF)"
+  }),
+  danger: (0, _react.css)({
+    backgroundColor: "var(--ds-text-inverse, #FFF)"
+  }),
+  warning: (0, _react.css)({
+    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
+  }),
+  navigation: navigationDividerStyles
+};
+var dividerHeight = {
+  default: defaultDividerStyles,
+  compact: compactDividerStyles
+};
+/**
+ * TODO: Add JSDoc
+ */
+var Divider = exports.Divider = function Divider(_ref) {
+  var appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  return (
+    // I find it funny to provide a div for Divider
+    (0, _react.jsx)("div", {
+      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
+    })
+  );
+};
+var splitButtonStyles = (0, _react.css)({
+  display: 'inline-flex',
+  position: 'relative',
+  whiteSpace: 'nowrap'
+});
+
+/**
+ * TODO: Add JSdoc
+ */
+var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonContainer(_ref2) {
+  var children = _ref2.children;
+  return (0, _react.jsx)("div", {
+    css: splitButtonStyles
+  }, children);
+};
+/**
+ * TODO: Add description when adding docs
+ */
+var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
+  var children = _ref3.children,
+    _ref3$appearance = _ref3.appearance,
+    appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
+    _ref3$spacing = _ref3.spacing,
+    spacing = _ref3$spacing === void 0 ? 'default' : _ref3$spacing,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled;
+  var _getActions = (0, _utils.getActions)(children),
+    PrimaryAction = _getActions.PrimaryAction,
+    SecondaryAction = _getActions.SecondaryAction;
+  return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
+    value: {
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled
+    }
+  }, PrimaryAction, (0, _react.jsx)(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), SecondaryAction));
+};
+/**
+ * TODO: Decide on API
+ */
+var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
+  var primaryAction = _ref4.primaryAction,
+    secondaryAction = _ref4.secondaryAction,
+    _ref4$appearance = _ref4.appearance,
+    appearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
+    _ref4$spacing = _ref4.spacing,
+    spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
+    _ref4$isDisabled = _ref4.isDisabled,
+    isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
+  return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
+    value: {
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled
+    }
+  }, primaryAction, (0, _react.jsx)(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), secondaryAction));
+};

package/dist/cjs/new-button/containers/split-button/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/new-button/containers/split-button/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActions = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var getActions = exports.getActions = function getActions(children) {
+  var _Children$toArray = _react.Children.toArray(children),
+    _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 2),
+    PrimaryAction = _Children$toArray2[0],
+    SecondaryAction = _Children$toArray2[1];
+  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development' && (!PrimaryAction || !SecondaryAction)) {
+    // TODO: i18n?
+    throw new SyntaxError('SplitButton requires two children to be provided');
+  }
+  return {
+    PrimaryAction: PrimaryAction,
+    SecondaryAction: SecondaryAction
+  };
+};

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

@@ -1,26 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("@atlaskit/primitives/link"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
 var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "iconAfter", "children", "shouldFitContainer", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-var LinkButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function LinkButton(_ref, ref) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var LinkButtonBase = function LinkButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     autoFocus = _ref.autoFocus,
     appearance = _ref.appearance,
@@ -72,34 +66,45 @@ var LinkButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     shouldFitContainer: shouldFitContainer,
     spacing: spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Use Link primitive to allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    _react.default.createElement(_primitives.Box, (0, _extends2.default)({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      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,
-      as: "a",
-      testId: testId
-      /**
-       * 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
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkButton.displayName = 'LinkButton';
+  return /*#__PURE__*/_react.default.createElement(_link.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    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,
+    testId: testId
+    /**
+     * 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);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkButtonBase);
+
+/**
+ * __Link Button__
+ *
+ * Renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkButton = /*#__PURE__*/(0, _react.memo)(WithRef);
 var _default = exports.default = LinkButton;

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

@@ -1,26 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("@atlaskit/primitives/link"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
 var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
-/**
- * __Link Button__
- *
- * A link button renders a link in the style of a button.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-var LinkIconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function LinkIconButton(_ref, ref) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     autoFocus = _ref.autoFocus,
     appearance = _ref.appearance,
@@ -68,34 +62,45 @@ var LinkIconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     ref: ref,
     spacing: spacing
   });
-  return (
-    /*#__PURE__*/
-    // TODO: Allow custom components for routing (with context)
-    // https://product-fabric.atlassian.net/browse/DSP-12505
-    _react.default.createElement(_primitives.Box, (0, _extends2.default)({}, rest, {
-      ref: baseProps.ref,
-      xcss: baseProps.xcss,
-      onClick: baseProps.onClick,
-      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,
-      as: "a",
-      testId: testId
-      /**
-       * 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
-       */,
-      href: baseProps.isDisabled ? undefined : href,
-      role: baseProps.isDisabled ? 'link' : undefined,
-      "aria-disabled": baseProps.isDisabled === true ? true : undefined
-    }), baseProps.children)
-  );
-}));
-LinkIconButton.displayName = 'LinkIconButton';
+  return /*#__PURE__*/_react.default.createElement(_link.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    onClick: baseProps.onClick,
+    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,
+    testId: testId
+    /**
+     * 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);
+};
+
+// Workarounds to support generic types with forwardRef + memo
+var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkIconButtonBase);
+
+/**
+ * __Link Icon Button__
+ *
+ * Renders a link in the style of an icon button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkIconButton = /*#__PURE__*/(0, _react.memo)(WithRef);
 var _default = exports.default = LinkIconButton;

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

@@ -13,6 +13,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _primitives = require("@atlaskit/primitives");
+var _splitButtonContext = require("../../containers/split-button/split-button-context");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _xcss = require("./xcss");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -48,13 +49,13 @@ var overlayStyles = (0, _primitives.xcss)({
 var useButtonBase = function useButtonBase(_ref) {
   var analyticsContext = _ref.analyticsContext,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
     buttonType = _ref.buttonType,
     interactionName = _ref.interactionName,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
@@ -80,8 +81,16 @@ var useButtonBase = function useButtonBase(_ref) {
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
+    propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
   var ourRef = (0, _react.useRef)();
+  var splitButtonContext = (0, _splitButtonContext.useSplitButtonContext)();
+  var isSplitButton = Boolean(splitButtonContext);
+  var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
+  var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
+  var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
+  var isHighlighted = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isHighlighted) || false;
+  var isActiveOverSelected = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isActiveOverSelected) || false;
   var setRef = (0, _react.useCallback)(function (node) {
     ourRef.current = node;
     if (ref === null) {
@@ -106,7 +115,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.2",
+    packageVersion: "16.12.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -116,14 +125,18 @@ var useButtonBase = function useButtonBase(_ref) {
       spacing: spacing,
       isDisabled: isDisabled,
       isSelected: isSelected,
+      isHighlighted: isHighlighted,
+      isActiveOverSelected: isActiveOverSelected,
       shouldFitContainer: shouldFitContainer,
       isIconButton: isIconButton,
       hasOverlay: Boolean(overlay),
       isLink: buttonType === 'link',
       hasIconBefore: hasIconBefore,
-      hasIconAfter: hasIconAfter
+      hasIconAfter: hasIconAfter,
+      isSplit: isSplitButton,
+      isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter]);
+  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,