@atlaskit/button 16.10.1 → 16.11.0

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

@@ -5,7 +5,7 @@ import { xcss } from '@atlaskit/primitives';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 var fontSize = getFontSize();
-var heights = {
+export var heights = {
   default: "".concat(32 / fontSize, "em"),
   compact: "".concat(24 / fontSize, "em"),
   none: 'auto'
@@ -34,6 +34,19 @@ var verticalAlign = {
   compact: 'middle',
   none: 'baseline'
 };
+var splitBorderStyles = {
+  ':first-of-type': {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  ':last-of-type': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  ':focus-visible': {
+    zIndex: 1
+  }
+};
 function getColor(_ref) {
   var group = _ref.group,
     key = _ref.key;
@@ -45,11 +58,13 @@ function getColors(_ref2) {
     interactionState = _ref2$interactionStat === void 0 ? 'default' : _ref2$interactionStat,
     isDisabled = _ref2.isDisabled,
     isSelected = _ref2.isSelected,
+    isHighlighted = _ref2.isHighlighted,
+    isActiveOverSelected = _ref2.isActiveOverSelected,
     hasOverlay = _ref2.hasOverlay;
   var key = interactionState;
   // Overlay does not change color on interaction, revert to 'default' or resting state
   key = hasOverlay ? 'default' : key;
-  key = isSelected ? 'selected' : key;
+  key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
   // Disabled colors overrule everything else
   key = isDisabled ? 'disabled' : key;
   return {
@@ -68,27 +83,51 @@ export function getXCSS(_ref3) {
     spacing = _ref3.spacing,
     isDisabled = _ref3.isDisabled,
     isSelected = _ref3.isSelected,
+    isHighlighted = _ref3.isHighlighted,
+    isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
     shouldFitContainer = _ref3.shouldFitContainer,
     isLink = _ref3.isLink,
+    isSplit = _ref3.isSplit,
+    isNavigationSplit = _ref3.isNavigationSplit,
     hasOverlay = _ref3.hasOverlay,
     hasIconBefore = _ref3.hasIconBefore,
     hasIconAfter = _ref3.hasIconAfter;
   var baseColors = getColors({
     appearance: appearance,
     isSelected: isSelected,
+    isHighlighted: isHighlighted,
+    isActiveOverSelected: isActiveOverSelected,
     isDisabled: isDisabled
   });
   var combinedBaseColorStyles = isLink ? _objectSpread(_objectSpread({}, baseColors), {}, {
     textDecoration: 'none',
     // Disabling visited styles (by re-declaring the base colors)
     ':visited': baseColors
+  }) : isNavigationSplit && !isSelected ? _objectSpread(_objectSpread({}, baseColors), {}, {
+    backgroundColor: 'color.background.neutral.subtle'
   }) : baseColors;
   var height = heights[spacing];
   var width = shouldFitContainer ? '100%' : 'auto';
-  width = isIconButton ? height : width;
-  var paddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
-  var paddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  width = isIconButton ? isNavigationSplit ? '24px' : height : width;
+  var defaultPaddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
+  var defaultPaddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  var splitButtonStyles = isSplit ? splitBorderStyles : {};
+  var getNavigationSplitButtonPaddings = function getNavigationSplitButtonPaddings() {
+    if (isNavigationSplit) {
+      return {
+        paddingInlineStart: 'space.075',
+        paddingInlineEnd: 'space.075'
+      };
+    }
+    return {
+      paddingInlineStart: isIconButton ? 'space.0' : defaultPaddingInlineStart,
+      paddingInlineEnd: isIconButton ? 'space.0' : defaultPaddingInlineEnd
+    };
+  };
+  var _getNavigationSplitBu = getNavigationSplitButtonPaddings(),
+    paddingInlineStart = _getNavigationSplitBu.paddingInlineStart,
+    paddingInlineEnd = _getNavigationSplitBu.paddingInlineEnd;
   return xcss(_objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center',
     borderWidth: 'border.width.0',
@@ -107,8 +146,8 @@ export function getXCSS(_ref3) {
     whiteSpace: 'nowrap',
     height: height,
     paddingBlock: 'space.0',
-    paddingInlineStart: isIconButton ? 'space.0' : paddingInlineStart,
-    paddingInlineEnd: isIconButton ? 'space.0' : paddingInlineEnd,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
     columnGap: gap[spacing],
     verticalAlign: verticalAlign[spacing],
     width: width,
@@ -119,7 +158,8 @@ export function getXCSS(_ref3) {
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'hover',
       hasOverlay: hasOverlay
@@ -130,7 +170,8 @@ export function getXCSS(_ref3) {
     }),
     ':active': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'active',
       hasOverlay: hasOverlay
@@ -138,41 +179,5 @@ export function getXCSS(_ref3) {
       // background, box-shadow
       transitionDuration: '0s, 0s'
     })
-  }));
-}
-export var iconStyles = xcss({
-  display: 'flex',
-  // icon size cannot grow and shrink
-  flexGrow: 0,
-  flexShrink: 0,
-  alignSelf: 'center',
-  fontSize: 0,
-  lineHeight: 0,
-  userSelect: 'none'
-});
-export var contentStyles = xcss({
-  // content can grow and shrink
-  flexGrow: 1,
-  flexShrink: 1,
-  // ellipsis for overflow text
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-export function getFadingStyles(_ref4) {
-  var hasOverlay = _ref4.hasOverlay;
-  return xcss({
-    opacity: hasOverlay ? 0 : 1,
-    transition: 'opacity 0.3s'
-  });
-}
-export var overlayStyles = xcss({
-  position: 'absolute',
-  left: 'space.0',
-  top: 'space.0',
-  right: 'space.0',
-  bottom: 'space.0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
+  }, splitButtonStyles));
+}

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["analyticsContext", "appearance", "autoFocus", "buttonCss", "children", "className", "href", "component", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onBlur", "onClick", "onFocus", "onMouseDown", "overlay", "shouldFitContainer", "spacing", "tabIndex", "type", "testId"];
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /** @jsx jsx */
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -108,7 +109,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext
   });
 
@@ -128,7 +129,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
 
   // we are 'disabling' input with a button when there is an overlay
   var hasOverlay = Boolean(overlay);
-  var fadeCss = css(getFadingCss({
+  var fadeStyles = css(getFadingCss({
     hasOverlay: hasOverlay
   }));
   var isInteractive = !isDisabled && !hasOverlay;
@@ -169,17 +170,17 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, blockEvents({
     isInteractive: isInteractive
   })), iconBefore ? jsx("span", {
-    css: [fadeCss, getIconStyle({
+    css: [fadeStyles, getIconStyle({
       spacing: spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
   }, iconBefore) : null, !getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? jsx("span", {
-    css: [fadeCss, getContentStyle({
+    css: [fadeStyles, getContentStyle({
       spacing: spacing
     })]
-  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeCss, getContentStyle({
+  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeStyles, getContentStyle({
     spacing: spacing
   })]), iconAfter ? jsx("span", {
-    css: [fadeCss, getIconStyle({
+    css: [fadeStyles, getIconStyle({
       spacing: spacing
     }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? jsx("span", {

package/dist/types/entry-points/new.d.ts

@@ -2,4 +2,5 @@ export { default, type ButtonProps, } from '../new-button/variants/default/butto
 export { default as LinkButton, type LinkButtonProps, } from '../new-button/variants/default/link';
 export { default as IconButton, type IconButtonProps, } from '../new-button/variants/icon/button';
 export { default as LinkIconButton, type LinkIconButtonProps, } from '../new-button/variants/icon/link';
+export { SplitButton } from '../new-button/containers/split-button';
 export type { Appearance, Spacing } from '../new-button/variants/types';

package/dist/types/entry-points/unsafe.d.ts

@@ -1 +1,4 @@
 export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
+export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS, } from '../new-button/containers/split-button';
+export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';

package/dist/types/new-button/containers/split-button/index.d.ts

@@ -0,0 +1,3 @@
+export { SplitButton, SplitButtonWithSlots, Divider, SplitButtonContainer, } from './split-button';
+export { getActions } from './utils';
+export { SplitButtonContext, useSplitButtonContext, } from './split-button-context';

package/dist/types/new-button/containers/split-button/split-button-context.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { SplitButtonAppearance, SplitButtonSpacing } from './types';
+type NavigationSplitButtonContextProps = {
+    appearance: 'navigation';
+    isHighlighted: boolean;
+};
+type MainSplitButtonContextProps = {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+};
+type SplitButtonContextProps = NavigationSplitButtonContextProps | MainSplitButtonContextProps;
+/**
+ * TODO: Add jsdoc
+ */
+export declare const SplitButtonContext: import("react").Context<SplitButtonContextProps | undefined>;
+type UseSplitButtonContext = {
+    appearance: SplitButtonAppearance | 'subtle';
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    /**
+     * isSelected state has limited relevance (e.g. dropdown-menu trigger button).
+     * There is no isSelected state for color variants (e.g. primary, danger, warning).
+     * Hens we provide ability to override the isSelected state with isActiveOverSelected to display `active` state instead of `selected` state.
+     */
+    isActiveOverSelected: boolean;
+    isNavigationSplitButton: boolean;
+    isHighlighted: boolean;
+};
+type NavigationSplitButtonContext = UseSplitButtonContext & {
+    appearance: 'subtle';
+    spacing: 'default';
+    isDisabled: false;
+    isActiveOverSelected: false;
+    isNavigationSplitButton: true;
+    isHighlighted: boolean;
+};
+type MainSplitButtonContext = UseSplitButtonContext & {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    isActiveOverSelected: true;
+    isNavigationSplitButton: false;
+    isHighlighted: false;
+};
+export declare const useSplitButtonContext: () => NavigationSplitButtonContext | MainSplitButtonContext | undefined;
+export {};

package/dist/types/new-button/containers/split-button/split-button.d.ts

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonSpacing } from './types';
+type DividerProps = {
+    appearance: SplitButtonContextAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add JSDoc
+ */
+export declare const Divider: ({ appearance, spacing, isDisabled, }: DividerProps) => jsx.JSX.Element;
+/**
+ * TODO: Add JSdoc
+ */
+export declare const SplitButtonContainer: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+type SplitButtonProps = {
+    /**
+     * Only two children are allowed.
+     * First child is the primary action, second child is the secondary action.
+     * The assumption is that for both children trees there is a button reading the context.
+     */
+    children: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add description when adding docs
+ */
+export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
+type SplitButtonWithSlotsProps = {
+    primaryAction: ReactNode;
+    secondaryAction: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+/**
+ * TODO: Decide on API
+ */
+export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => jsx.JSX.Element;
+export {};

package/dist/types/new-button/containers/split-button/types.d.ts

@@ -0,0 +1,4 @@
+import type { Appearance, Spacing } from '../../variants/types';
+export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary' | 'danger' | 'warning'>;
+export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
+export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;

package/dist/types/new-button/containers/split-button/utils.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare const getActions: (children: ReactNode) => {
+    PrimaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+    SecondaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type ContentProps = {
+    children: React.ReactNode;
+    type?: 'text' | 'icon';
+    hasOverlay: boolean;
+};
+/**
+ * __Content__
+ *
+ * Used for slots within a Button, including icons and text content.
+ */
+declare const Content: ({ children, type, hasOverlay }: ContentProps) => JSX.Element;
+export default Content;

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

@@ -33,5 +33,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, interactionName, isDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance: propAppearance, autoFocus, buttonType, interactionName, isDisabled: propIsDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

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

@@ -1,10 +1,15 @@
 import { xcss } from '@atlaskit/primitives';
 import { type Appearance, type Spacing } from '../types';
+export declare const heights: {
+    [key in Spacing]: string;
+};
 export type GetXCSSArgs = {
     appearance: Appearance;
     spacing: Spacing;
     isDisabled: boolean;
     isSelected: boolean;
+    isHighlighted: boolean;
+    isActiveOverSelected: boolean;
     shouldFitContainer: boolean;
     hasOverlay: boolean;
     isIconButton: boolean;
@@ -14,11 +19,13 @@ export type GetXCSSArgs = {
      * If the button is a LinkButton
      */
     isLink: boolean;
+    /**
+     * If the button is a SplitButton
+     */
+    isSplit: boolean;
+    /**
+     * If the button is a PrimarySplitButton used in atlassian-navigation
+     */
+    isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, isLink, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
-export declare const iconStyles: ReturnType<typeof xcss>;
-export declare const contentStyles: ReturnType<typeof xcss>;
-export declare function getFadingStyles({ hasOverlay, }: {
-    hasOverlay: boolean;
-}): ReturnType<typeof xcss>;
-export declare const overlayStyles: ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

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

@@ -78,8 +78,8 @@ export type BaseOwnProps = {
     testId?: string;
     component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
     /**
-     * An optional name used to identify this component to press listeners. E.g. interaction tracing
-     * @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
+     * 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)
      */
     interactionName?: string;
     /**

package/dist/types-ts4.5/entry-points/new.d.ts

@@ -2,4 +2,5 @@ export { default, type ButtonProps, } from '../new-button/variants/default/butto
 export { default as LinkButton, type LinkButtonProps, } from '../new-button/variants/default/link';
 export { default as IconButton, type IconButtonProps, } from '../new-button/variants/icon/button';
 export { default as LinkIconButton, type LinkIconButtonProps, } from '../new-button/variants/icon/link';
+export { SplitButton } from '../new-button/containers/split-button';
 export type { Appearance, Spacing } from '../new-button/variants/types';

package/dist/types-ts4.5/entry-points/unsafe.d.ts

@@ -1 +1,4 @@
 export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
+export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS, } from '../new-button/containers/split-button';
+export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';

package/dist/types-ts4.5/new-button/containers/split-button/index.d.ts

@@ -0,0 +1,3 @@
+export { SplitButton, SplitButtonWithSlots, Divider, SplitButtonContainer, } from './split-button';
+export { getActions } from './utils';
+export { SplitButtonContext, useSplitButtonContext, } from './split-button-context';

package/dist/types-ts4.5/new-button/containers/split-button/split-button-context.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { SplitButtonAppearance, SplitButtonSpacing } from './types';
+type NavigationSplitButtonContextProps = {
+    appearance: 'navigation';
+    isHighlighted: boolean;
+};
+type MainSplitButtonContextProps = {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+};
+type SplitButtonContextProps = NavigationSplitButtonContextProps | MainSplitButtonContextProps;
+/**
+ * TODO: Add jsdoc
+ */
+export declare const SplitButtonContext: import("react").Context<SplitButtonContextProps | undefined>;
+type UseSplitButtonContext = {
+    appearance: SplitButtonAppearance | 'subtle';
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    /**
+     * isSelected state has limited relevance (e.g. dropdown-menu trigger button).
+     * There is no isSelected state for color variants (e.g. primary, danger, warning).
+     * Hens we provide ability to override the isSelected state with isActiveOverSelected to display `active` state instead of `selected` state.
+     */
+    isActiveOverSelected: boolean;
+    isNavigationSplitButton: boolean;
+    isHighlighted: boolean;
+};
+type NavigationSplitButtonContext = UseSplitButtonContext & {
+    appearance: 'subtle';
+    spacing: 'default';
+    isDisabled: false;
+    isActiveOverSelected: false;
+    isNavigationSplitButton: true;
+    isHighlighted: boolean;
+};
+type MainSplitButtonContext = UseSplitButtonContext & {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    isActiveOverSelected: true;
+    isNavigationSplitButton: false;
+    isHighlighted: false;
+};
+export declare const useSplitButtonContext: () => NavigationSplitButtonContext | MainSplitButtonContext | undefined;
+export {};

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

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonSpacing } from './types';
+type DividerProps = {
+    appearance: SplitButtonContextAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add JSDoc
+ */
+export declare const Divider: ({ appearance, spacing, isDisabled, }: DividerProps) => jsx.JSX.Element;
+/**
+ * TODO: Add JSdoc
+ */
+export declare const SplitButtonContainer: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+type SplitButtonProps = {
+    /**
+     * Only two children are allowed.
+     * First child is the primary action, second child is the secondary action.
+     * The assumption is that for both children trees there is a button reading the context.
+     */
+    children: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add description when adding docs
+ */
+export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
+type SplitButtonWithSlotsProps = {
+    primaryAction: ReactNode;
+    secondaryAction: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+/**
+ * TODO: Decide on API
+ */
+export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => jsx.JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+import type { Appearance, Spacing } from '../../variants/types';
+export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary' | 'danger' | 'warning'>;
+export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
+export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;

package/dist/types-ts4.5/new-button/containers/split-button/utils.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare const getActions: (children: ReactNode) => {
+    PrimaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+    SecondaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type ContentProps = {
+    children: React.ReactNode;
+    type?: 'text' | 'icon';
+    hasOverlay: boolean;
+};
+/**
+ * __Content__
+ *
+ * Used for slots within a Button, including icons and text content.
+ */
+declare const Content: ({ children, type, hasOverlay }: ContentProps) => JSX.Element;
+export default Content;

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

@@ -33,5 +33,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, interactionName, isDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance: propAppearance, autoFocus, buttonType, interactionName, isDisabled: propIsDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

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

@@ -1,10 +1,15 @@
 import { xcss } from '@atlaskit/primitives';
 import { type Appearance, type Spacing } from '../types';
+export declare const heights: {
+    [key in Spacing]: string;
+};
 export type GetXCSSArgs = {
     appearance: Appearance;
     spacing: Spacing;
     isDisabled: boolean;
     isSelected: boolean;
+    isHighlighted: boolean;
+    isActiveOverSelected: boolean;
     shouldFitContainer: boolean;
     hasOverlay: boolean;
     isIconButton: boolean;
@@ -14,11 +19,13 @@ export type GetXCSSArgs = {
      * If the button is a LinkButton
      */
     isLink: boolean;
+    /**
+     * If the button is a SplitButton
+     */
+    isSplit: boolean;
+    /**
+     * If the button is a PrimarySplitButton used in atlassian-navigation
+     */
+    isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, isLink, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
-export declare const iconStyles: ReturnType<typeof xcss>;
-export declare const contentStyles: ReturnType<typeof xcss>;
-export declare function getFadingStyles({ hasOverlay, }: {
-    hasOverlay: boolean;
-}): ReturnType<typeof xcss>;
-export declare const overlayStyles: ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

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

@@ -78,8 +78,8 @@ export type BaseOwnProps = {
     testId?: string;
     component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
     /**
-     * An optional name used to identify this component to press listeners. E.g. interaction tracing
-     * @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
+     * 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)
      */
     interactionName?: string;
     /**