@atlaskit/button 17.14.2 → 17.15.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/button
 
+## 17.15.0
+
+### Minor Changes
+
+-   [#99861](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99861)
+    [`452b917ff365`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/452b917ff365) -
+    Add support for React 18.
+
+## 17.14.3
+
+### Patch Changes
+
+-   [#95202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95202)
+    [`99bd29123e13`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/99bd29123e13) -
+    Internal change to support experimental icon components
+-   Updated dependencies
+
 ## 17.14.2
 
 ### Patch Changes

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

@@ -58,18 +58,22 @@ var useDefaultButton = function useDefaultButton(_ref) {
     buttonType: buttonType,
     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
+      size: UNSAFE_iconBefore_size,
+      color: 'currentColor'
     })), children && /*#__PURE__*/_react.default.createElement(_content.default, {
       hasOverlay: hasOverlay
     }, children), IconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
+      position: "after",
       hasOverlay: hasOverlay
     }, /*#__PURE__*/_react.default.createElement(IconAfter, {
       label: "",
-      size: UNSAFE_iconAfter_size
+      size: UNSAFE_iconAfter_size,
+      color: 'currentColor'
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,

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

@@ -58,7 +58,8 @@ var useIconButton = function useIconButton(_ref) {
       hasOverlay: hasOverlay
     }, /*#__PURE__*/_react.default.createElement(Icon, {
       label: "",
-      size: UNSAFE_size
+      size: UNSAFE_size,
+      color: 'currentColor'
     }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,

package/dist/cjs/new-button/variants/shared/content.js

@@ -33,6 +33,27 @@ var commonStyles = (0, _primitives.xcss)({
 var fadeStyles = (0, _primitives.xcss)({
   opacity: 0
 });
+
+/**
+ * These CSS variables consumed by the new icons, to allow them to have appropriate
+ * padding inside Button while also maintaining spacing for the existing icons.
+ *
+ * These styles can be removed once the new icons are fully rolled out, feature flag
+ * platform.design-system-team.enable-new-icons is cleaned up,
+ * and we bump Button to set padding based on the new icons.
+ */
+var beforeIconStyles = (0, _primitives.xcss)({
+  // @ts-ignore
+  '--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
+  // @ts-ignore
+  '--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)"
+});
+var afterIconStyles = (0, _primitives.xcss)({
+  // @ts-ignore
+  '--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
+  // @ts-ignore
+  '--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)"
+});
 /**
  * __Content__
  *
@@ -42,10 +63,11 @@ var Content = function Content(_ref) {
   var children = _ref.children,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
-    hasOverlay = _ref.hasOverlay;
+    hasOverlay = _ref.hasOverlay,
+    position = _ref.position;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     as: "span",
-    xcss: [commonStyles].concat((0, _toConsumableArray2.default)(type === 'text' ? [textStyles] : [iconStyles]), (0, _toConsumableArray2.default)(hasOverlay ? [fadeStyles] : []))
+    xcss: [commonStyles].concat((0, _toConsumableArray2.default)(type === 'text' ? [textStyles] : [iconStyles]), (0, _toConsumableArray2.default)(hasOverlay ? [fadeStyles] : []), (0, _toConsumableArray2.default)(position === 'before' ? [beforeIconStyles] : []), (0, _toConsumableArray2.default)(position === 'after' ? [afterIconStyles] : []))
   }, children);
 };
 var _default = exports.default = Content;

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

@@ -34,10 +34,22 @@ var noPointerEventsOnChildrenCss = {
     pointerEvents: 'none'
   }
 };
+/**
+ * These CSS variables consumed by the new icons, to allow them to have appropriate
+ * padding inside Button while also maintaining spacing for the existing icons.
+ *
+ * These styles can be removed once the new icons are fully rolled out, feature flag
+ * platform.design-system-team.enable-new-icons is cleaned up,
+ * and we bump Button to set padding based on the new icons.
+ */
 var iconBeforeSpacingFixStyle = (0, _react2.css)({
+  '--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)",
+  '--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
   marginInlineStart: "var(--ds-space-negative-025, -2px)"
 });
 var iconAfterSpacingFixStyle = (0, _react2.css)({
+  '--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)",
+  '--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
   marginInlineEnd: "var(--ds-space-negative-025, -2px)"
 });
 var getSpacingFix = function getSpacingFix(children, spacingStyles) {
@@ -117,7 +129,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.14.2",
+    packageVersion: "17.15.0",
     analyticsData: analyticsContext
   });
 

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

@@ -48,18 +48,22 @@ const useDefaultButton = ({
     buttonType,
     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
+      size: UNSAFE_iconBefore_size,
+      color: 'currentColor'
     })), children && /*#__PURE__*/React.createElement(Content, {
       hasOverlay: hasOverlay
     }, children), IconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
+      position: "after",
       hasOverlay: hasOverlay
     }, /*#__PURE__*/React.createElement(IconAfter, {
       label: "",
-      size: UNSAFE_iconAfter_size
+      size: UNSAFE_iconAfter_size,
+      color: 'currentColor'
     }))),
     interactionName,
     isDisabled,

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

@@ -52,7 +52,8 @@ const useIconButton = ({
       hasOverlay: hasOverlay
     }, /*#__PURE__*/React.createElement(Icon, {
       label: "",
-      size: UNSAFE_size
+      size: UNSAFE_size,
+      color: 'currentColor'
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName,
     isDisabled,

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

@@ -25,6 +25,27 @@ const commonStyles = xcss({
 const fadeStyles = xcss({
   opacity: 0
 });
+
+/**
+ * These CSS variables consumed by the new icons, to allow them to have appropriate
+ * padding inside Button while also maintaining spacing for the existing icons.
+ *
+ * These styles can be removed once the new icons are fully rolled out, feature flag
+ * platform.design-system-team.enable-new-icons is cleaned up,
+ * and we bump Button to set padding based on the new icons.
+ */
+const beforeIconStyles = xcss({
+  // @ts-ignore
+  '--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
+  // @ts-ignore
+  '--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)"
+});
+const afterIconStyles = xcss({
+  // @ts-ignore
+  '--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
+  // @ts-ignore
+  '--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)"
+});
 /**
  * __Content__
  *
@@ -33,11 +54,12 @@ const fadeStyles = xcss({
 const Content = ({
   children,
   type = 'text',
-  hasOverlay
+  hasOverlay,
+  position
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: [commonStyles, ...(type === 'text' ? [textStyles] : [iconStyles]), ...(hasOverlay ? [fadeStyles] : [])]
+    xcss: [commonStyles, ...(type === 'text' ? [textStyles] : [iconStyles]), ...(hasOverlay ? [fadeStyles] : []), ...(position === 'before' ? [beforeIconStyles] : []), ...(position === 'after' ? [afterIconStyles] : [])]
   }, children);
 };
 export default Content;

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

@@ -23,10 +23,22 @@ const noPointerEventsOnChildrenCss = {
     pointerEvents: 'none'
   }
 };
+/**
+ * These CSS variables consumed by the new icons, to allow them to have appropriate
+ * padding inside Button while also maintaining spacing for the existing icons.
+ *
+ * These styles can be removed once the new icons are fully rolled out, feature flag
+ * platform.design-system-team.enable-new-icons is cleaned up,
+ * and we bump Button to set padding based on the new icons.
+ */
 const iconBeforeSpacingFixStyle = css({
+  '--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)",
+  '--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
   marginInlineStart: "var(--ds-space-negative-025, -2px)"
 });
 const iconAfterSpacingFixStyle = css({
+  '--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)",
+  '--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
   marginInlineEnd: "var(--ds-space-negative-025, -2px)"
 });
 const getSpacingFix = (children, spacingStyles) => {
@@ -102,7 +114,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.14.2",
+    packageVersion: "17.15.0",
     analyticsData: analyticsContext
   });
 

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

@@ -48,18 +48,22 @@ var useDefaultButton = function useDefaultButton(_ref) {
     buttonType: buttonType,
     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
+      size: UNSAFE_iconBefore_size,
+      color: 'currentColor'
     })), children && /*#__PURE__*/React.createElement(Content, {
       hasOverlay: hasOverlay
     }, children), IconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
+      position: "after",
       hasOverlay: hasOverlay
     }, /*#__PURE__*/React.createElement(IconAfter, {
       label: "",
-      size: UNSAFE_iconAfter_size
+      size: UNSAFE_iconAfter_size,
+      color: 'currentColor'
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,

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

@@ -51,7 +51,8 @@ var useIconButton = function useIconButton(_ref) {
       hasOverlay: hasOverlay
     }, /*#__PURE__*/React.createElement(Icon, {
       label: "",
-      size: UNSAFE_size
+      size: UNSAFE_size,
+      color: 'currentColor'
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,

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

@@ -26,6 +26,27 @@ var commonStyles = xcss({
 var fadeStyles = xcss({
   opacity: 0
 });
+
+/**
+ * These CSS variables consumed by the new icons, to allow them to have appropriate
+ * padding inside Button while also maintaining spacing for the existing icons.
+ *
+ * These styles can be removed once the new icons are fully rolled out, feature flag
+ * platform.design-system-team.enable-new-icons is cleaned up,
+ * and we bump Button to set padding based on the new icons.
+ */
+var beforeIconStyles = xcss({
+  // @ts-ignore
+  '--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
+  // @ts-ignore
+  '--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)"
+});
+var afterIconStyles = xcss({
+  // @ts-ignore
+  '--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
+  // @ts-ignore
+  '--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)"
+});
 /**
  * __Content__
  *
@@ -35,10 +56,11 @@ var Content = function Content(_ref) {
   var children = _ref.children,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
-    hasOverlay = _ref.hasOverlay;
+    hasOverlay = _ref.hasOverlay,
+    position = _ref.position;
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(hasOverlay ? [fadeStyles] : []))
+    xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(hasOverlay ? [fadeStyles] : []), _toConsumableArray(position === 'before' ? [beforeIconStyles] : []), _toConsumableArray(position === 'after' ? [afterIconStyles] : []))
   }, children);
 };
 export default Content;

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

@@ -25,10 +25,22 @@ var noPointerEventsOnChildrenCss = {
     pointerEvents: 'none'
   }
 };
+/**
+ * These CSS variables consumed by the new icons, to allow them to have appropriate
+ * padding inside Button while also maintaining spacing for the existing icons.
+ *
+ * These styles can be removed once the new icons are fully rolled out, feature flag
+ * platform.design-system-team.enable-new-icons is cleaned up,
+ * and we bump Button to set padding based on the new icons.
+ */
 var iconBeforeSpacingFixStyle = css({
+  '--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)",
+  '--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
   marginInlineStart: "var(--ds-space-negative-025, -2px)"
 });
 var iconAfterSpacingFixStyle = css({
+  '--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)",
+  '--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
   marginInlineEnd: "var(--ds-space-negative-025, -2px)"
 });
 var getSpacingFix = function getSpacingFix(children, spacingStyles) {
@@ -108,7 +120,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.14.2",
+    packageVersion: "17.15.0",
     analyticsData: analyticsContext
   });
 

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

@@ -3,11 +3,12 @@ type ContentProps = {
     children: React.ReactNode;
     type?: 'text' | 'icon';
     hasOverlay: boolean;
+    position?: 'before' | 'after';
 };
 /**
  * __Content__
  *
  * Used for slots within a Button, including icons and text content.
  */
-declare const Content: ({ children, type, hasOverlay }: ContentProps) => JSX.Element;
+declare const Content: ({ children, type, hasOverlay, position, }: ContentProps) => JSX.Element;
 export default Content;

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type IconProps } from '@atlaskit/icon/types';
+import type React from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type IconProps, type UNSAFE_NewIconProps } from '@atlaskit/icon/types';
 export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery';
 export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning' | 'discovery';
 export type IconButtonAppearance = 'default' | 'primary' | 'discovery' | 'subtle';
@@ -8,7 +8,7 @@ export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonApp
 export type ButtonSpacing = 'compact' | 'default' | 'none';
 export type IconButtonSpacing = 'compact' | 'default';
 export type Spacing = ButtonSpacing | IconButtonSpacing;
-export type IconProp = React.ComponentType<IconProps>;
+export type IconProp = React.ComponentType<IconProps | UNSAFE_NewIconProps>;
 export type IconSize = 'small' | 'large' | 'xlarge';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
@@ -29,30 +29,29 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     isSelected?: boolean;
     /**
-     * Handler to be called on blur.
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
-    onBlur?: React.FocusEventHandler<TagName>;
+    testId?: string;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     * Handler called on blur.
      */
-    onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
+    onBlur?: React.FocusEventHandler<TagName>;
     /**
-     * Handler to be called on focus.
+     * Handler called on focus.
      */
     onFocus?: React.FocusEventHandler<TagName>;
     /**
-     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
      */
-    testId?: string;
+    onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from button. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
      */
-    interactionName?: string;
+    analyticsContext?: Record<string, any>;
     /**
-     * Additional information to be included in the `context` of analytics events that come from button.
+     * An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
      */
-    analyticsContext?: Record<string, any>;
+    interactionName?: string;
 };
 export type SupportedElements = HTMLButtonElement | HTMLAnchorElement;
 type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;

package/dist/types/old-button/shared/button-base.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { CSSObject } from '@emotion/react';
+import { type CSSObject } from '@emotion/react';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.AllHTMLAttributes<HTMLElement>, "disabled">, "data-testid" | "data-has-overlay"> & {
     'data-testid'?: undefined;
     'data-has-overlay'?: undefined;

package/dist/types/old-button/types.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type React from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
 export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
@@ -41,15 +41,15 @@ export type BaseOwnProps = {
      */
     isSelected?: boolean;
     /**
-     * Handler to be called on blur.
+     * Handler called on blur.
      */
     onBlur?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
     onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Handler to be called on focus.
+     * Handler called on focus.
      */
     onFocus?: React.FocusEventHandler<HTMLElement>;
     /**

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

@@ -41,12 +41,12 @@ declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonP
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
-    icon?: import("../new-button/variants/types").IconProp | undefined;
+    icon?: React.ComponentType<import("@atlaskit/icon").IconProps | import("@atlaskit/icon").UNSAFE_NewIconProps> | undefined;
     label?: IconButtonProps['label'];
 } & React.RefAttributes<HTMLButtonElement>>;
 declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
     href?: string | undefined;
-    icon?: import("../new-button/variants/types").IconProp | undefined;
+    icon?: React.ComponentType<import("@atlaskit/icon").IconProps | import("@atlaskit/icon").UNSAFE_NewIconProps> | undefined;
     label?: LinkIconButtonProps['label'];
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const variants: Variant[];

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

@@ -3,11 +3,12 @@ type ContentProps = {
     children: React.ReactNode;
     type?: 'text' | 'icon';
     hasOverlay: boolean;
+    position?: 'before' | 'after';
 };
 /**
  * __Content__
  *
  * Used for slots within a Button, including icons and text content.
  */
-declare const Content: ({ children, type, hasOverlay }: ContentProps) => JSX.Element;
+declare const Content: ({ children, type, hasOverlay, position, }: ContentProps) => JSX.Element;
 export default Content;

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type IconProps } from '@atlaskit/icon/types';
+import type React from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type IconProps, type UNSAFE_NewIconProps } from '@atlaskit/icon/types';
 export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery';
 export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning' | 'discovery';
 export type IconButtonAppearance = 'default' | 'primary' | 'discovery' | 'subtle';
@@ -8,7 +8,7 @@ export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonApp
 export type ButtonSpacing = 'compact' | 'default' | 'none';
 export type IconButtonSpacing = 'compact' | 'default';
 export type Spacing = ButtonSpacing | IconButtonSpacing;
-export type IconProp = React.ComponentType<IconProps>;
+export type IconProp = React.ComponentType<IconProps | UNSAFE_NewIconProps>;
 export type IconSize = 'small' | 'large' | 'xlarge';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
@@ -29,30 +29,29 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     isSelected?: boolean;
     /**
-     * Handler to be called on blur.
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
-    onBlur?: React.FocusEventHandler<TagName>;
+    testId?: string;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     * Handler called on blur.
      */
-    onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
+    onBlur?: React.FocusEventHandler<TagName>;
     /**
-     * Handler to be called on focus.
+     * Handler called on focus.
      */
     onFocus?: React.FocusEventHandler<TagName>;
     /**
-     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
      */
-    testId?: string;
+    onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from button. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
      */
-    interactionName?: string;
+    analyticsContext?: Record<string, any>;
     /**
-     * Additional information to be included in the `context` of analytics events that come from button.
+     * An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
      */
-    analyticsContext?: Record<string, any>;
+    interactionName?: string;
 };
 export type SupportedElements = HTMLButtonElement | HTMLAnchorElement;
 type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;

package/dist/types-ts4.5/old-button/shared/button-base.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { CSSObject } from '@emotion/react';
+import { type CSSObject } from '@emotion/react';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.AllHTMLAttributes<HTMLElement>, "disabled">, "data-testid" | "data-has-overlay"> & {
     'data-testid'?: undefined;
     'data-has-overlay'?: undefined;

package/dist/types-ts4.5/old-button/types.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type React from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
 export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
@@ -41,15 +41,15 @@ export type BaseOwnProps = {
      */
     isSelected?: boolean;
     /**
-     * Handler to be called on blur.
+     * Handler called on blur.
      */
     onBlur?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
     onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Handler to be called on focus.
+     * Handler called on focus.
      */
     onFocus?: React.FocusEventHandler<HTMLElement>;
     /**

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

@@ -41,12 +41,12 @@ declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonP
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
-    icon?: import("../new-button/variants/types").IconProp | undefined;
+    icon?: React.ComponentType<import("@atlaskit/icon").IconProps | import("@atlaskit/icon").UNSAFE_NewIconProps> | undefined;
     label?: IconButtonProps['label'];
 } & React.RefAttributes<HTMLButtonElement>>;
 declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
     href?: string | undefined;
-    icon?: import("../new-button/variants/types").IconProp | undefined;
+    icon?: React.ComponentType<import("@atlaskit/icon").IconProps | import("@atlaskit/icon").UNSAFE_NewIconProps> | undefined;
     label?: LinkIconButtonProps['label'];
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const variants: Variant[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.14.2",
+  "version": "17.15.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -70,7 +70,8 @@
           "sortKey": 5
         }
       ]
-    }
+    },
+    "runReact18": true
   },
   "af:exports": {
     "./button-group": "./src/entry-points/button-group.tsx",
@@ -85,19 +86,19 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/focus-ring": "^1.4.0",
-    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/interaction-context": "^2.1.0",
-    "@atlaskit/primitives": "^6.0.0",
+    "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/spinner": "^16.1.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/visually-hidden": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
@@ -107,7 +108,7 @@
     "@atlaskit/calendar": "^14.2.0",
     "@atlaskit/checkbox": "^13.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^13.0.0",
+    "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",