@atlaskit/button 17.21.0 → 17.22.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/button
 
+## 17.22.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.22.0
+
+### Minor Changes
+
+- [`5081c9ca53507`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5081c9ca53507) -
+  Correctly handle render props for icons in order to prevent unintentional renders.
+
 ## 17.21.0
 
 ### Minor Changes

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _content = _interopRequireDefault(require("../shared/content"));
+var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
 var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -29,8 +30,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
     children = _ref.children,
-    IconAfter = _ref.iconAfter,
-    IconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    iconBefore = _ref.iconBefore,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     _ref$isLoading = _ref.isLoading,
@@ -61,24 +62,22 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     buttonType: buttonType,
-    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, IconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
+    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       position: "before",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/_react.default.createElement(IconBefore, {
-      label: "",
-      size: UNSAFE_iconBefore_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+      icon: iconBefore,
+      size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/_react.default.createElement(_content.default, {
       hasOverlay: hasOverlay
-    }, children), IconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
+    }, children), iconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       position: "after",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/_react.default.createElement(IconAfter, {
-      label: "",
-      size: UNSAFE_iconAfter_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+      icon: iconAfter,
+      size: UNSAFE_iconAfter_size
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -104,8 +103,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
-    hasIconBefore: Boolean(IconBefore),
-    hasIconAfter: Boolean(IconAfter)
+    hasIconBefore: Boolean(iconBefore),
+    hasIconAfter: Boolean(iconAfter)
   });
   return baseProps;
 };

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _content = _interopRequireDefault(require("../shared/content"));
+var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
 var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 /**
@@ -26,7 +27,7 @@ var useIconButton = function useIconButton(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
-    Icon = _ref.icon,
+    icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isLoading = _ref.isLoading,
@@ -61,10 +62,9 @@ var useIconButton = function useIconButton(_ref) {
     children: /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/_react.default.createElement(Icon, {
-      label: "",
-      size: UNSAFE_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+      icon: icon,
+      size: UNSAFE_size
     }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+var IconRenderer = function IconRenderer(_ref) {
+  var Icon = _ref.icon,
+    size = _ref.size;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-render-prop-fix_lyo55') && isIconRenderProp(Icon) ? Icon({
+    label: '',
+    size: size,
+    color: 'currentColor'
+  }) : /*#__PURE__*/_react.default.createElement(Icon, {
+    label: "",
+    size: size,
+    color: 'currentColor'
+  }));
+};
+var _default = exports.default = IconRenderer;

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

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

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

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -19,8 +20,8 @@ const useDefaultButton = ({
   autoFocus,
   buttonType,
   children,
-  iconAfter: IconAfter,
-  iconBefore: IconBefore,
+  iconAfter,
+  iconBefore,
   interactionName,
   isDisabled,
   isLoading = false,
@@ -51,24 +52,22 @@ const useDefaultButton = ({
     ariaLabel,
     ariaLabelledBy,
     buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, IconBefore && /*#__PURE__*/React.createElement(Content, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "before",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(IconBefore, {
-      label: "",
-      size: UNSAFE_iconBefore_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: iconBefore,
+      size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/React.createElement(Content, {
       hasOverlay: hasOverlay
-    }, children), IconAfter && /*#__PURE__*/React.createElement(Content, {
+    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "after",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(IconAfter, {
-      label: "",
-      size: UNSAFE_iconAfter_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: iconAfter,
+      size: UNSAFE_iconAfter_size
     }))),
     interactionName,
     isDisabled,
@@ -94,8 +93,8 @@ const useDefaultButton = ({
     ref,
     shouldFitContainer,
     spacing,
-    hasIconBefore: Boolean(IconBefore),
-    hasIconAfter: Boolean(IconAfter)
+    hasIconBefore: Boolean(iconBefore),
+    hasIconAfter: Boolean(iconAfter)
   });
   return baseProps;
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -19,7 +20,7 @@ const useIconButton = ({
   ariaLabelledBy,
   autoFocus,
   buttonType,
-  icon: Icon,
+  icon,
   interactionName,
   isDisabled,
   isLoading,
@@ -55,10 +56,9 @@ const useIconButton = ({
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(Icon, {
-      label: "",
-      size: UNSAFE_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: icon,
+      size: UNSAFE_size
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName,
     isDisabled,

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+const IconRenderer = ({
+  icon: Icon,
+  size
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getBooleanFF('platform.design-system-team.button-render-prop-fix_lyo55') && isIconRenderProp(Icon) ? Icon({
+    label: '',
+    size: size,
+    color: 'currentColor'
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    label: "",
+    size: size,
+    color: 'currentColor'
+  }));
+};
+export default IconRenderer;

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

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

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

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -19,8 +20,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
     children = _ref.children,
-    IconAfter = _ref.iconAfter,
-    IconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    iconBefore = _ref.iconBefore,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     _ref$isLoading = _ref.isLoading,
@@ -51,24 +52,22 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     buttonType: buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, IconBefore && /*#__PURE__*/React.createElement(Content, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "before",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(IconBefore, {
-      label: "",
-      size: UNSAFE_iconBefore_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: iconBefore,
+      size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/React.createElement(Content, {
       hasOverlay: hasOverlay
-    }, children), IconAfter && /*#__PURE__*/React.createElement(Content, {
+    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "after",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(IconAfter, {
-      label: "",
-      size: UNSAFE_iconAfter_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: iconAfter,
+      size: UNSAFE_iconAfter_size
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -94,8 +93,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
-    hasIconBefore: Boolean(IconBefore),
-    hasIconAfter: Boolean(IconAfter)
+    hasIconBefore: Boolean(iconBefore),
+    hasIconAfter: Boolean(iconAfter)
   });
   return baseProps;
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -19,7 +20,7 @@ var useIconButton = function useIconButton(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
-    Icon = _ref.icon,
+    icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isLoading = _ref.isLoading,
@@ -54,10 +55,9 @@ var useIconButton = function useIconButton(_ref) {
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(Icon, {
-      label: "",
-      size: UNSAFE_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: icon,
+      size: UNSAFE_size
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+var IconRenderer = function IconRenderer(_ref) {
+  var Icon = _ref.icon,
+    size = _ref.size;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getBooleanFF('platform.design-system-team.button-render-prop-fix_lyo55') && isIconRenderProp(Icon) ? Icon({
+    label: '',
+    size: size,
+    color: 'currentColor'
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    label: "",
+    size: size,
+    color: 'currentColor'
+  }));
+};
+export default IconRenderer;

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type IconProps, type UNSAFE_NewIconProps } from '@atlaskit/icon/types';
+import { type IconProp } from '../types';
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+declare const IconRenderer: ({ icon: Icon, size, }: {
+    icon: IconProp;
+    size: IconProps['size'] | UNSAFE_NewIconProps['LEGACY_size'];
+}) => JSX.Element;
+export default IconRenderer;

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

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type IconProps, type UNSAFE_NewIconProps } from '@atlaskit/icon/types';
+import { type IconProp } from '../types';
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+declare const IconRenderer: ({ icon: Icon, size, }: {
+    icon: IconProp;
+    size: IconProps['size'] | UNSAFE_NewIconProps['LEGACY_size'];
+}) => JSX.Element;
+export default IconRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "17.21.0",
+	"version": "17.22.1",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -135,7 +135,7 @@
 		"@atlaskit/icon": "^22.4.0",
 		"@atlaskit/interaction-context": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^0.2.5",
-		"@atlaskit/primitives": "^7.4.0",
+		"@atlaskit/primitives": "^8.0.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/theme": "^12.10.0",
 		"@atlaskit/tokens": "^1.51.0",
@@ -155,9 +155,11 @@
 		"@atlaskit/app-provider": "^1.3.0",
 		"@atlaskit/calendar": "^14.3.0",
 		"@atlaskit/checkbox": "^13.5.0",
+		"@atlaskit/dropdown-menu": "^12.12.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^13.2.0",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "^0.2.1",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/react-router-dom": "^4.3.1",
@@ -201,6 +203,9 @@
 		},
 		"platform.design-system-team.component-visual-refresh_t8zbo": {
 			"type": "boolean"
+		},
+		"platform.design-system-team.button-render-prop-fix_lyo55": {
+			"type": "boolean"
 		}
 	}
 }