@atlaskit/menu 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/menu
 
+## 2.0.1
+
+### Patch Changes
+
+- [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650) [`07aa588c8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07aa588c8a4) - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -34,34 +34,22 @@ var contentStyles = (0, _react2.css)({
   flexGrow: 1,
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  textAlign: 'left',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  overflow: 'hidden',
+  textAlign: 'left'
 });
 var truncateStyles = (0, _react2.css)({
   display: 'block',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
 });
 var descriptionStyles = (0, _react2.css)({
+  marginTop: "var(--ds-space-050, 4px)",
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)",
-  marginBlockStart: "var(--ds-space-050, 4px)"
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 var disabledDescriptionStyles = (0, _react2.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
@@ -131,23 +119,23 @@ var selectedBorderStyles = (0, _react2.css)({
   '&::before': {
     width: 2,
     position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
+    content: '""'
   }
 });
 var selectedNotchStyles = (0, _react2.css)({
   '&::before': {
     width: 4,
     position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""',
-    insetBlockEnd: "var(--ds-space-150, 12px)",
-    insetBlockStart: "var(--ds-space-150, 12px)",
-    insetInlineStart: 0
+    content: '""'
   }
 });
 var selectedStyles = (0, _react2.css)({

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -23,34 +23,22 @@ const contentStyles = css({
   flexGrow: 1,
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  textAlign: 'left',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  overflow: 'hidden',
+  textAlign: 'left'
 });
 const truncateStyles = css({
   display: 'block',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 const wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 const descriptionStyles = css({
+  marginTop: "var(--ds-space-050, 4px)",
   color: `var(--ds-text-subtlest, ${N200})`,
-  fontSize: "var(--ds-font-size-075, 12px)",
-  marginBlockStart: "var(--ds-space-050, 4px)"
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 const disabledDescriptionStyles = css({
   color: `var(--ds-text-disabled, ${N200})`
@@ -120,23 +108,23 @@ const selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
+    content: '""'
   }
 });
 const selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: `0 ${"var(--ds-border-radius, 4px)"} ${"var(--ds-border-radius, 4px)"} 0`,
-    content: '""',
-    insetBlockEnd: "var(--ds-space-150, 12px)",
-    insetBlockStart: "var(--ds-space-150, 12px)",
-    insetInlineStart: 0
+    content: '""'
   }
 });
 const selectedStyles = css({

package/dist/esm/internal/components/menu-item-primitive.js

@@ -26,34 +26,22 @@ var contentStyles = css({
   flexGrow: 1,
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  textAlign: 'left',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  overflow: 'hidden',
+  textAlign: 'left'
 });
 var truncateStyles = css({
   display: 'block',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 var wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 var descriptionStyles = css({
+  marginTop: "var(--ds-space-050, 4px)",
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)",
-  marginBlockStart: "var(--ds-space-050, 4px)"
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 var disabledDescriptionStyles = css({
   color: "var(--ds-text-disabled, ".concat(N200, ")")
@@ -123,23 +111,23 @@ var selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
+    content: '""'
   }
 });
 var selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""',
-    insetBlockEnd: "var(--ds-space-150, 12px)",
-    insetBlockStart: "var(--ds-space-150, 12px)",
-    insetInlineStart: 0
+    content: '""'
   }
 });
 var selectedStyles = css({

package/dist/types-ts4.5/entry-points/menu-item/button-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/button-item';

package/dist/types-ts4.5/entry-points/menu-item/custom-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/custom-item';

package/dist/types-ts4.5/entry-points/menu-item/heading-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/heading-item';

package/dist/types-ts4.5/entry-points/menu-item/link-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/link-item';

package/dist/types-ts4.5/entry-points/menu-item/skeleton-heading-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/skeleton-heading-item';

package/dist/types-ts4.5/entry-points/menu-item/skeleton-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/skeleton-item';

package/dist/types-ts4.5/entry-points/menu-section/menu-group.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-section/menu-group';

package/dist/types-ts4.5/entry-points/menu-section/popup-menu-group.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-section/popup-menu-group';

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

@@ -0,0 +1 @@
+export { default } from '../../menu-section/section';

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,11 @@
+export { default as ButtonItem } from './menu-item/button-item';
+export { default as LinkItem } from './menu-item/link-item';
+export { default as CustomItem } from './menu-item/custom-item';
+export { default as SkeletonItem } from './menu-item/skeleton-item';
+export { SpacingContext, SELECTION_STYLE_CONTEXT_DO_NOT_USE, } from './internal/components/menu-context';
+export { default as HeadingItem } from './menu-item/heading-item';
+export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
+export { default as Section } from './menu-section/section';
+export { default as MenuGroup } from './menu-section/menu-group';
+export { default as PopupMenuGroup } from './menu-section/popup-menu-group';
+export type { ButtonItemProps, CSSFn, StatelessCSSFn, CustomItemComponentProps, CustomItemProps, HeadingItemProps, ItemState, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, Overrides, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, TitleOverrides, } from './types';

package/dist/types-ts4.5/internal/components/menu-context.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type SpacingMode = 'compact' | 'cozy';
+/**
+ * __Spacing context__
+ *
+ *  The spacing context is used to provide spacing values to menu item primitives.
+ *
+ * @internal Do not use directly.
+ */
+export declare const SpacingContext: import("react").Context<SpacingMode>;
+/**
+ * __Selection context__
+ *
+ * The selection context is used to set what selection mode the menu items display as.
+ *
+ * @internal Do not use directly.
+ */
+export declare const SELECTION_STYLE_CONTEXT_DO_NOT_USE: import("react").Context<"notch" | "border" | "none">;

package/dist/types-ts4.5/internal/components/menu-item-primitive.d.ts

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react';
+import type { MenuItemPrimitiveProps } from '../../types';
+/**
+ * __Menu item primitive__
+ *
+ * Menu item primitive contains all the styles for menu items,
+ * including support for selected, disabled, and interaction states.
+ *
+ * Using children as function prop you wire up this to your own host element.
+ *
+ * ```jsx
+ * <MenuItemPrimitive>
+ *   {({ children, ...props }) => <button {...props}>{children}</button>}
+ * </MenuItemPrimitive>
+ * ```
+ */
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+export default MenuItemPrimitive;

package/dist/types-ts4.5/internal/components/skeleton-shimmer.d.ts

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type SkeletonShimmerProps = {
+    children: ({ className }: {
+        className?: string;
+    }) => ReactNode;
+    isShimmering?: boolean;
+};
+/**
+ * __Skeleton shimmer__
+ *
+ * A skeleton shimmer is the animation shown on loading skeletons for
+ * perceived performance and user satisfaction.
+ *
+ * This component provides a `className` through render props. This value will
+ * have type:
+ * + `string`, when `isShimmering={true}`.
+ * + `undefined`, when `isShimmering={false}`.
+ *
+ * @internal
+ */
+declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => jsx.JSX.Element;
+export default SkeletonShimmer;

package/dist/types-ts4.5/menu-item/button-item.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ButtonItemProps } from '../types';
+/**
+ * __Button item__
+ *
+ * A button item is used to populate a menu with items that are buttons.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const ButtonItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonItemProps & import("react").RefAttributes<HTMLElement>>>;
+export default ButtonItem;

package/dist/types-ts4.5/menu-item/custom-item.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import type { CustomItemComponentProps, CustomItemProps } from '../types';
+interface CustomItemTypeGenericHackProps {
+    <TComponentProps>(props: CustomItemProps<TComponentProps> & {
+        ref?: any;
+    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
+}
+/**
+ * __Custom item__
+ *
+ * A custom item is used to populate a menu with items that can be any element.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/custom-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const CustomItem: CustomItemTypeGenericHackProps;
+export default CustomItem;

package/dist/types-ts4.5/menu-item/heading-item.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import type { HeadingItemProps } from '../types';
+/**
+ * __Heading item__
+ *
+ * A heading item is used to describe sibling menu items.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+export default HeadingItem;

package/dist/types-ts4.5/menu-item/link-item.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { LinkItemProps } from '../types';
+/**
+ * __Link item__
+ *
+ * A link item is used to populate a menu with items that are links.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/link-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const LinkItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<LinkItemProps & import("react").RefAttributes<HTMLElement>>>;
+export default LinkItem;

package/dist/types-ts4.5/menu-item/skeleton-heading-item.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import type { SkeletonHeadingItemProps } from '../types';
+/**
+ * __Skeleton heading item__
+ *
+ * A skeleton heading item is used in place of a heading item when its contents it not ready.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
+export default SkeletonHeadingItem;

package/dist/types-ts4.5/menu-item/skeleton-item.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import type { SkeletonItemProps } from '../types';
+/**
+ * __Skeleton item__
+ *
+ * A skeleton item is used in place of an item when its contents it not ready.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
+export default SkeletonItem;

package/dist/types-ts4.5/menu-section/menu-group.d.ts

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { MenuGroupProps } from '../types';
+/**
+ * __Menu group__
+ *
+ * A menu group includes all the actions or items in a menu.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+export default MenuGroup;

package/dist/types-ts4.5/menu-section/popup-menu-group.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { MenuGroupProps } from '../types';
+/**
+ * @deprecated
+ */
+declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+export default PopupMenuGroup;

package/dist/types-ts4.5/menu-section/section.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { SectionProps } from '../types';
+/**
+ * __Section__
+ *
+ * A section includes related actions or items in a menu.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
+export default Section;

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

@@ -0,0 +1,396 @@
+import { ComponentType, ReactNode, Ref } from 'react';
+import { CSSObject } from '@emotion/react';
+import type { SpacingMode } from './internal/components/menu-context';
+export interface RenderFunction<TProps = {}> {
+    (Component: ComponentType | string, props: TProps): React.ReactNode;
+}
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export interface TitleOverrides {
+    render?: RenderFunction<{
+        className?: string;
+        children: ReactNode;
+        'data-item-title': boolean;
+    }>;
+}
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export interface Overrides {
+    Title?: TitleOverrides;
+}
+export type Dimension = string | number;
+export interface MenuGroupSizing {
+    /**
+     * Useful to constrain the menu group minimum height to a specific value.
+     */
+    minHeight?: Dimension;
+    /**
+     * Useful to constrain the menu groups height to a specific value.
+     * Needs to be set when wanting to have scrollable sections.
+     */
+    maxHeight?: Dimension;
+    /**
+     * Useful to constrain the menu group minimum width to a specific value.
+     */
+    minWidth?: Dimension;
+    /**
+     * Useful to constrain the menu group width to a specific value.
+     */
+    maxWidth?: Dimension;
+}
+export interface MenuGroupProps extends MenuGroupSizing {
+    /**
+     * Children of the menu group,
+     * should generally be `Section` components.
+     */
+    children: React.ReactNode;
+    /**
+     * Used for telling assistive technologies that the menu group is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Configure the density of the MenuGroup content.
+     */
+    spacing?: SpacingMode;
+    /**
+     * Used to override the accessibility role for the element.
+     */
+    role?: string;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Handler called when clicking on this element,
+     * or any children elements.
+     * Useful when needing to stop propagation of child events.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+}
+export interface SectionProps {
+    /**
+     * Unique identifier for the element.
+     */
+    id?: string;
+    /**
+     * Enables scrolling within the section.
+     * Make sure to set `maxHeight` on the parent `MenuGroup` component else it will not work.
+     */
+    isScrollable?: boolean;
+    /**
+     * Will render a border at the top of the section.
+     */
+    hasSeparator?: boolean;
+    /**
+     * Children of the section,
+     * should generally be `Item` or `Heading` components,
+     * but can also be [`EmptyState`](https://atlaskit.atlassian.com/packages/design-system/empty-state)s when wanting to render errors.
+     */
+    children: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    overrides?: {
+        HeadingItem?: {
+            /**
+             * A function that overrides the styles of the component.
+             * It receives the current styles and state and expects a styles object.
+             */
+            cssFn?: StatelessCSSFn;
+        };
+    };
+    /**
+     * The text passed into the internal HeadingItem. If a title is not provided,
+     * the HeadingItem will not be rendered, and this component acts as a regular Section
+     */
+    title?: string;
+    /**
+     * Adds `<ul>` and `<li>` tags around the items for better semantic markup in a list of items.
+     */
+    isList?: boolean;
+}
+export interface MenuItemPrimitiveProps {
+    children: (props: {
+        className: string;
+        children: React.ReactNode;
+    }) => JSX.Element;
+    title: React.ReactNode | undefined;
+    description: React.ReactNode | undefined;
+    iconAfter: React.ReactNode | undefined;
+    iconBefore: React.ReactNode | undefined;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    overrides: Overrides | undefined;
+    shouldTitleWrap: boolean | undefined;
+    shouldDescriptionWrap: boolean | undefined;
+    isDisabled: boolean | undefined;
+    isSelected: boolean | undefined;
+    className?: string;
+}
+export interface MenuItemProps {
+    /**
+      A function that overrides the styles of the component.
+      It receives the current styles and state and expects a styles object.
+  
+      @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    cssFn?: CSSFn;
+    /**
+     * Element to render before the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    iconBefore?: React.ReactNode;
+    /**
+     * Element to render after the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    iconAfter?: React.ReactNode;
+    /**
+     * Event that is triggered when the element is clicked.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Event that is triggered when the element has been pressed.
+     */
+    onMouseDown?: React.MouseEventHandler;
+    /**
+     * Description of the item.
+     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
+     */
+    description?: string | JSX.Element;
+    /**
+     * Makes the element appear disabled as well as removing interactivity.
+     */
+    isDisabled?: boolean;
+    /**
+     * Makes the element appear selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Primary content for the item.
+     */
+    children?: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+      Custom overrides for the composed components.
+  
+      @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    overrides?: Overrides;
+    /**
+     * When `true` the title of the item will wrap multiple lines if it's long enough.
+     */
+    shouldTitleWrap?: boolean;
+    /**
+     * When `true` the description of the item will wrap multiple lines if it's long enough.
+     */
+    shouldDescriptionWrap?: boolean;
+}
+export interface ButtonItemProps extends MenuItemProps {
+    /**
+     * Unique identifier for the element.
+     */
+    id?: string;
+    /**
+     * Used to override the accessibility role for the element.
+     */
+    role?: string;
+}
+export interface LinkItemProps extends MenuItemProps {
+    /**
+     * Link to another page.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL,
+     * see [anchor information](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) on mdn for more information.
+     */
+    target?: string;
+    /**
+     * The relationship of the linked URL as space-separated link types.
+     * Generally you'll want to set this to "noopener noreferrer" when `target` is "_blank".
+     */
+    rel?: string;
+    /**
+     * Used to override the accessibility role for the element.
+     */
+    role?: string;
+}
+export interface CustomItemComponentProps {
+    /**
+     * The children of the item.
+     */
+    children: React.ReactNode;
+    /**
+     * Class to apply to the root container of the custom component,
+     * ensure this has been applied so the consistent item styling is applied.
+     */
+    className: string;
+    /**
+     * Test id that is passed through to the custom component.
+     */
+    'data-testid'?: string;
+    /**
+     * Event handler that is passed through to the custom component.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Event handler that is passed through to the custom component.
+     */
+    onMouseDown?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Event handler that is passed through to the custom component.
+     * Used to disable the element from being draggable.
+     */
+    onDragStart?: (event: React.DragEvent) => void;
+    /**
+     * Turns off the element being draggable.
+     */
+    draggable: boolean;
+    /**
+     * React ref for the raw DOM element,
+     * make sure to place this on the outer most DOM element.
+     */
+    ref?: Ref<any>;
+    /**
+     * Makes the element appear disabled as well as removing interactivity.
+     */
+    tabIndex?: number;
+    /**
+     * Disabled attribute.
+     */
+    disabled?: boolean;
+}
+export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProps> extends MenuItemProps {
+    /**
+      Custom component to render as an item. This can be both a functional component or a class component.
+  
+      __Will return `null` if no component is defined.__
+  
+      Props passed to `CustomItem` will be passed down to this component. If the props for `component` have TypeScript types,
+      CustomItem will extend them, providing type safety for your custom item.
+  
+      e.g. `<CustomItem to="/link" component={RouterLink} />`
+  
+      __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
+     */
+    component?: React.ComponentType<TCustomComponentProps>;
+}
+export interface SkeletonItemProps {
+    /**
+     * Renders a skeleton circle in the `iconBefore` location.
+     * Takes priority over `hasIcon.
+     */
+    hasAvatar?: boolean;
+    /**
+     * Renders a skeleton square in the `iconBefore` location.
+     */
+    hasIcon?: boolean;
+    /**
+     *
+     * Width of the skeleton item.
+     * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
+     */
+    width?: Dimension;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Causes to the skeleton to have a slight horizontal shimmer.
+     * Only use this when you want to bring more attention to the loading content.
+     */
+    isShimmering?: boolean;
+    /**
+     * A function that overrides the styles of this component.
+     * It receives the current styles and returns a customized styles object.
+     */
+    cssFn?: StatelessCSSFn;
+}
+export interface HeadingItemProps {
+    /**
+     A function that overrides the styles.
+     It receives the current styles and returns a customized styles object.
+  
+     @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    cssFn?: StatelessCSSFn;
+    /**
+     * The text of the heading.
+     */
+    children: React.ReactNode;
+    /**
+     * A unique identifier that can be referenced in the `labelledby` prop of a
+     * section to allow screen readers to announce the name of groups.
+     */
+    id?: string;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+export interface SkeletonHeadingItemProps {
+    /**
+     *
+     * Width of the skeleton heading item.
+     * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
+     */
+    width?: Dimension;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Causes to the skeleton to have a slight horizontal shimmer.
+     * Only use this when you want to bring more attention to the loading content.
+     */
+    isShimmering?: boolean;
+    /**
+      A function that overrides the styles of this component.
+      It receives the current styles and returns a customized styles object.
+  
+      @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    cssFn?: StatelessCSSFn;
+}
+export type ItemState = {
+    isSelected: boolean;
+    isDisabled: boolean;
+};
+/**
+  A function that overrides the styles of
+  menu components. It receives the current state
+  and should return a CSSObject.
+
+  @see @atlaskit/menu/docs/85-overriding-item-styles
+  @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
+    (currentState: TState): CSSObject | CSSObject[];
+}
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export type StatelessCSSFn = CSSFn<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.26.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,222 @@
+## API Report File for "@atlaskit/menu"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { ComponentType } from 'react';
+import { Context } from 'react';
+import { CSSObject } from '@emotion/react';
+import { ForwardRefExoticComponent } from 'react';
+import { jsx } from '@emotion/react';
+import { MemoExoticComponent } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { RefAttributes } from 'react';
+
+// @public (undocumented)
+export interface BaseItemProps {
+    children?: React.ReactNode;
+    // @deprecated
+    cssFn?: CSSFn;
+    description?: JSX.Element | string;
+    iconAfter?: React.ReactNode;
+    iconBefore?: React.ReactNode;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
+    onMouseDown?: React.MouseEventHandler;
+    // @deprecated
+    overrides?: Overrides;
+    shouldDescriptionWrap?: boolean;
+    shouldTitleWrap?: boolean;
+    testId?: string;
+}
+
+// @public
+export const ButtonItem: MemoExoticComponent<ForwardRefExoticComponent<ButtonItemProps & RefAttributes<HTMLElement>>>;
+
+// @public (undocumented)
+export interface ButtonItemProps extends BaseItemProps {
+    id?: string;
+    role?: string;
+}
+
+// @public @deprecated
+export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
+    // (undocumented)
+    (currentState: TState): CSSObject | CSSObject[];
+}
+
+// @public
+export const CustomItem: CustomItemTypeGenericHackProps;
+
+// @public (undocumented)
+export interface CustomItemComponentProps {
+    'data-testid'?: string;
+    children: React.ReactNode;
+    className: string;
+    disabled?: boolean;
+    draggable: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onDragStart?: (event: React.DragEvent) => void;
+    onMouseDown?: (event: React.MouseEvent<HTMLElement>) => void;
+    ref?: Ref<any>;
+    tabIndex?: number;
+}
+
+// @public (undocumented)
+export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProps> extends BaseItemProps {
+    component?: React.ComponentType<TCustomComponentProps>;
+}
+
+// @public (undocumented)
+interface CustomItemTypeGenericHackProps {
+    // (undocumented)
+    <TComponentProps>(props: CustomItemProps<TComponentProps> & {
+        ref?: any;
+    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
+}
+
+// @public (undocumented)
+export type Dimension = number | string;
+
+// @public
+export const HeadingItem: MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+
+// @public (undocumented)
+export interface HeadingItemProps {
+    children: React.ReactNode;
+    // @deprecated
+    cssFn?: StatelessCSSFn;
+    id?: string;
+    testId?: string;
+}
+
+// @public (undocumented)
+export type ItemState = {
+    isSelected: boolean;
+    isDisabled: boolean;
+};
+
+// @public
+export const LinkItem: MemoExoticComponent<ForwardRefExoticComponent<LinkItemProps & RefAttributes<HTMLElement>>>;
+
+// @public (undocumented)
+export interface LinkItemProps extends BaseItemProps {
+    href?: string;
+    rel?: string;
+    role?: string;
+    target?: string;
+}
+
+// @public
+export const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface MenuGroupProps extends MenuGroupSizing {
+    children: React.ReactNode;
+    isLoading?: boolean;
+    onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
+    role?: string;
+    spacing?: SpacingMode;
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface MenuGroupSizing {
+    maxHeight?: Dimension;
+    maxWidth?: Dimension;
+    minHeight?: Dimension;
+    minWidth?: Dimension;
+}
+
+// @public @deprecated (undocumented)
+export interface Overrides {
+    // (undocumented)
+    Title?: TitleOverrides;
+}
+
+// @public @deprecated (undocumented)
+export const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface RenderFunction<TProps = {}> {
+    // (undocumented)
+    (Component: ComponentType | string, props: TProps): React.ReactNode;
+}
+
+// @public
+export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+interface SectionProps {
+    children: React.ReactNode;
+    hasSeparator?: boolean;
+    id?: string;
+    isList?: boolean;
+    isScrollable?: boolean;
+    // @deprecated (undocumented)
+    overrides?: {
+        HeadingItem?: {
+            cssFn?: StatelessCSSFn;
+        };
+    };
+    testId?: string;
+    title?: string;
+}
+export { SectionProps as SectionBaseProps }
+export { SectionProps }
+
+// @internal
+export const SELECTION_STYLE_CONTEXT_DO_NOT_USE: Context<"border" | "none" | "notch">;
+
+// @public
+export const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface SkeletonHeadingItemProps {
+    // @deprecated
+    cssFn?: StatelessCSSFn;
+    isShimmering?: boolean;
+    testId?: string;
+    width?: Dimension;
+}
+
+// @public
+export const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface SkeletonItemProps {
+    cssFn?: StatelessCSSFn;
+    hasAvatar?: boolean;
+    hasIcon?: boolean;
+    isShimmering?: boolean;
+    testId?: string;
+    width?: Dimension;
+}
+
+// @internal
+export const SpacingContext: Context<SpacingMode>;
+
+// @public (undocumented)
+type SpacingMode = 'compact' | 'cozy';
+
+// @public @deprecated (undocumented)
+export type StatelessCSSFn = CSSFn<void>;
+
+// @public @deprecated (undocumented)
+export interface TitleOverrides {
+    // (undocumented)
+    render?: RenderFunction<{
+        className?: string;
+        children: ReactNode;
+        'data-item-title': boolean;
+    }>;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```