@atlaskit/menu 1.11.1 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/menu
 
+## 2.0.0
+
+### Major Changes
+
+- [#41355](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41355) [`cd1c813da18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd1c813da18) - Menu items now have a secondary selected state (border or notch), this was previously feature flagged for Atlassian experiences and is now available for everyone.
+
+  This change makes all menu items are now relatively positioned, if you had any child elements that leaned on this behaviour your experiences will now be broken!
+
+  For example the below code code previously the `div` would be positioned relatively to the menu group element. Now, it is positioned relatively to the button item element.
+
+  ```jsx
+  <MenuGroup>
+    <ButtonItem>
+      <div style={{ position: 'absolute', top: '100%' }} />
+    </ButtonItem>
+  </MenuGroup>
+  ```
+
+  As a path forward you should not be leaning on this behaviour. If you need a popup experience use `@atlaskit/dropdown-menu` or `@atlaskit/popup`.
+
 ## 1.11.1
 
 ### Patch Changes

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

@@ -214,7 +214,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return (0, _react2.jsx)(_focusRing.default, {
       isInset: true
     }, children({
-      className: cx([cn([(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: (0, _react2.jsx)(_inline.default, {
         as: "span",
         spread: "space-between",

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

@@ -201,7 +201,7 @@ const MenuItemPrimitive = ({
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",

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

@@ -206,7 +206,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.11.1",
+  "version": "2.0.0",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -104,9 +104,6 @@
     ".": "./src/index.tsx"
   },
   "platform-feature-flags": {
-    "platform.design-system-team.menu-selected-state-change_0see9": {
-      "type": "boolean"
-    },
     "platform.design-system-team.unsafe-overrides-killswitch_c8j9m": {
       "type": "boolean"
     }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/// <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

@@ -1,18 +0,0 @@
-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

@@ -1,24 +0,0 @@
-/** @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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,18 +0,0 @@
-/// <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

@@ -1,13 +0,0 @@
-/// <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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,13 +0,0 @@
-/** @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

@@ -1,8 +0,0 @@
-/** @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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,396 +0,0 @@
-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/tmp/api-report-tmp.d.ts

@@ -1,222 +0,0 @@
-## 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)
-
-```