@atlaskit/dropdown-menu 12.0.0 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/dropdown-menu
 
+## 12.1.0
+
+### Minor Changes
+
+- [#41586](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41586) [`ef0466f92d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef0466f92d9) - We are removing previously added feature flag and unsafe entry point usage of the new Button inside DropdownMenu.
+
 ## 12.0.0
 
 ### Major Changes

package/dist/cjs/dropdown-menu.js

@@ -12,14 +12,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _unsafe = require("@atlaskit/button/unsafe");
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useControlled = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
@@ -201,21 +199,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
           testId: testId && "".concat(testId, "--trigger")
         }));
       }
-      return (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/_react.default.createElement(_unsafe.UNSAFE_BUTTON, {
-        iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-          size: "medium",
-          label: ""
-        }),
-        onFocus: bindFocus.onFocus,
-        onBlur: bindFocus.onBlur,
-        ref: (0, _mergeRefs.default)([ref, itemRef]),
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
-      }, _trigger) : /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
+      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
         ref: (0, _mergeRefs.default)([ref, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,

package/dist/es2019/dropdown-menu.js

@@ -2,14 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
-import { UNSAFE_BUTTON } from '@atlaskit/button/unsafe';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
@@ -175,21 +173,7 @@ const DropdownMenu = ({
           testId: testId && `${testId}--trigger`
         });
       }
-      return getBooleanFF('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/React.createElement(UNSAFE_BUTTON, {
-        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
-          size: "medium",
-          label: ""
-        }),
-        onFocus: bindFocus.onFocus,
-        onBlur: bindFocus.onBlur,
-        ref: mergeRefs([ref, itemRef]),
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && `${testId}--trigger`
-      }, trigger) : /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
+      return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
         ref: mergeRefs([ref, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,

package/dist/esm/dropdown-menu.js

@@ -6,14 +6,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
-import { UNSAFE_BUTTON } from '@atlaskit/button/unsafe';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
@@ -192,21 +190,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
           testId: testId && "".concat(testId, "--trigger")
         }));
       }
-      return getBooleanFF('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/React.createElement(UNSAFE_BUTTON, {
-        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
-          size: "medium",
-          label: ""
-        }),
-        onFocus: bindFocus.onFocus,
-        onBlur: bindFocus.onBlur,
-        ref: mergeRefs([ref, itemRef]),
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
-      }, _trigger) : /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
+      return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
         ref: mergeRefs([ref, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,

package/dist/types-ts4.5/checkbox/dropdown-item-checkbox-group.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { SectionProps } from '@atlaskit/menu';
+interface DropdownItemCheckboxGroupProps extends SectionProps {
+    /**
+     * Unique identifier for the checkbox group.
+     */
+    id: string;
+}
+/**
+ * __Dropdown item checkbox group__
+ *
+ * A wrapping element for dropdown menu checkbox items.
+ *
+ */
+declare const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemCheckboxGroupProps) => JSX.Element;
+export default DropdownItemCheckboxGroup;

package/dist/types-ts4.5/checkbox/dropdown-item-checkbox.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DropdownItemCheckboxProps } from '../types';
+/**
+ * __Dropdown item checkbox__
+ *
+ * A dropdown item checkbox creates groups that have multiple selections.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
+ */
+declare const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, }: DropdownItemCheckboxProps) => JSX.Element;
+export default DropdownItemCheckbox;

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

@@ -0,0 +1,11 @@
+/**
+ * __Section__
+ *
+ * A dropdown item group includes all the actions or items in a dropdown menu.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-group/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-group/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-group/usage)
+ */
+import Section from '@atlaskit/menu/section';
+export default Section;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DropdownItemProps } from './types';
+/**
+ * __Dropdown menu item__
+ *
+ * A dropdown item populates the dropdown menu with items. Every item should be inside a dropdown item group.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-item/examples)
+ * - [Code](https://atlassian.design/components/dropdown-item/code)
+ * - [Usage](https://atlassian.design/components/dropdown-item/usage)
+ */
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLElement>>;
+export default DropdownMenuItem;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { DropdownMenuProps } from './types';
+/**
+ * __Dropdown menu__
+ *
+ * A dropdown menu displays a list of actions or options to a user.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
+ */
+declare const DropdownMenu: <T extends HTMLElement = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, }: DropdownMenuProps<T>) => JSX.Element;
+export default DropdownMenu;

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

@@ -0,0 +1,8 @@
+export { default } from './dropdown-menu';
+export { default as DropdownItemGroup } from './dropdown-menu-item-group';
+export { default as DropdownItem } from './dropdown-menu-item';
+export { default as DropdownItemCheckbox } from './checkbox/dropdown-item-checkbox';
+export { default as DropdownItemCheckboxGroup } from './checkbox/dropdown-item-checkbox-group';
+export { default as DropdownItemRadio } from './radio/dropdown-item-radio';
+export { default as DropdownItemRadioGroup } from './radio/dropdown-item-radio-group';
+export type { DropdownMenuProps, DropdownMenuGroupProps, DropdownItemProps, OnOpenChangeArgs, CustomTriggerProps, } from './types';

package/dist/types-ts4.5/internal/components/checkbox-icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * __Checkbox icon__
+ *
+ * Used to visually represent the selected state in DropdownItemCheckbox
+ *
+ * @internal
+ */
+declare const CheckboxIcon: ({ checked }: {
+    checked: boolean;
+}) => JSX.Element;
+export default CheckboxIcon;

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

@@ -0,0 +1,27 @@
+import React, { FC, MutableRefObject } from 'react';
+/**
+ *
+ *  @internal
+ * Context which maintains the current level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export declare const NestedLevelContext: React.Context<number>;
+/**
+ *
+ * @internal
+ * Context which maintains the maximun level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export declare const TrackMaxLevelContext: React.Context<{
+    maxLevelRef: MutableRefObject<number>;
+    setMaxLevel: (level: number, isMin?: boolean) => void;
+}>;
+/**
+ *
+ *  @internal
+ * Context provider which maintains the maximun level of dropdown menu if it is nested
+ *
+ */
+export declare const TrackLevelProvider: FC;

package/dist/types-ts4.5/internal/components/focus-manager.d.ts

@@ -0,0 +1,21 @@
+import React, { FC, ReactNode } from 'react';
+import { FocusableElement } from '../../types';
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+export declare const FocusManagerContext: React.Context<{
+    menuItemRefs: FocusableElement[];
+    registerRef: (ref: FocusableElement) => void;
+}>;
+/**
+ * Focus manager logic
+ */
+declare const FocusManager: FC<{
+    children: ReactNode;
+}>;
+export default FocusManager;

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

@@ -0,0 +1,11 @@
+import { jsx } from '@emotion/react';
+import { MenuWrapperProps } from '../../types';
+/**
+ *
+ * MenuWrapper wraps all the menu items.
+ * It handles the logic to close the menu when a MenuItem is clicked, but leaves it open
+ * if a CheckboxItem or RadioItem is clicked.
+ * It also sets focus to the first menu item when opened.
+ */
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, spacing, testId, }: MenuWrapperProps) => jsx.JSX.Element;
+export default MenuWrapper;

package/dist/types-ts4.5/internal/components/radio-icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * __Radio icon__
+ *
+ * Used to visually represent the selected state in DropdownItemRadio
+ *
+ * @internal
+ */
+declare const RadioIcon: ({ checked }: {
+    checked: boolean;
+}) => JSX.Element;
+export default RadioIcon;

package/dist/types-ts4.5/internal/context/checkbox-group-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Holds the unique identifier for the checkbox group.
+ */
+export declare const CheckboxGroupContext: import("react").Context<string>;

package/dist/types-ts4.5/internal/context/selection-store.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+type OptionsInGroup = {
+    [key: string]: boolean | undefined;
+};
+type SelectionStoreContextProps = {
+    setItemState: (group: string, id: string, value: boolean | undefined) => void;
+    getItemState: (group: string, id: string) => boolean | undefined;
+    setGroupState: (group: string, value: OptionsInGroup) => void;
+    getGroupState: (group: string) => OptionsInGroup;
+};
+/**
+ *
+ * SelectionStoreContext maintains the state of the selected items
+ * and getter setters.
+ *
+ */
+export declare const SelectionStoreContext: React.Context<SelectionStoreContextProps>;
+type SelectionStoreProps = {
+    children: React.ReactNode;
+};
+/**
+ * Selection store will persist data as long as it remains mounted.
+ * It handles the uncontrolled story for dropdown menu when the menu
+ * items can be mounted/unmounted depending if the menu is open or closed.
+ */
+declare const SelectionStore: (props: SelectionStoreProps) => JSX.Element;
+export default SelectionStore;

package/dist/types-ts4.5/internal/hooks/use-checkbox-state.d.ts

@@ -0,0 +1,17 @@
+type CheckboxStateArgs = {
+    id: string;
+    isSelected: boolean | undefined;
+    defaultSelected: boolean | undefined;
+};
+type SetStateCallback = (value: boolean | undefined) => boolean;
+type CheckboxStateValue = [
+    boolean,
+    (newValue: SetStateCallback) => void
+];
+/**
+ * Custom hook to handle checkbox state for dropdown menu.
+ * It works in tandem with the selection store context when the
+ * component is uncontrolled.
+ */
+declare const useCheckboxState: ({ isSelected, id, defaultSelected, }: CheckboxStateArgs) => CheckboxStateValue;
+export default useCheckboxState;

package/dist/types-ts4.5/internal/hooks/use-radio-state.d.ts

@@ -0,0 +1,12 @@
+type RadioStateArgs = {
+    id: string;
+    isSelected: boolean | undefined;
+    defaultSelected: boolean | undefined;
+};
+type SetStateCallback = (value: boolean | undefined) => boolean;
+type RadioStateValue = [
+    boolean,
+    (newValue: SetStateCallback) => void
+];
+declare function useRadioState({ id, isSelected, defaultSelected, }: RadioStateArgs): RadioStateValue;
+export default useRadioState;

package/dist/types-ts4.5/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FocusableElement } from '../../types';
+declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
+export default useRegisterItemWithFocusManager;

package/dist/types-ts4.5/internal/utils/handle-focus.d.ts

@@ -0,0 +1,2 @@
+import { FocusableElement } from '../../types';
+export default function handleFocus(refs: Array<FocusableElement>, isLayerDisabled: () => boolean): (e: KeyboardEvent) => void;

package/dist/types-ts4.5/internal/utils/is-checkbox-item.d.ts

@@ -0,0 +1 @@
+export default function isCheckboxItem(element: HTMLElement): boolean;

package/dist/types-ts4.5/internal/utils/is-radio-item.d.ts

@@ -0,0 +1 @@
+export default function isCheckboxItem(element: HTMLElement): boolean;

package/dist/types-ts4.5/internal/utils/is-voice-over-supported.d.ts

@@ -0,0 +1,2 @@
+declare const isVoiceOverSupported: () => boolean;
+export default isVoiceOverSupported;

package/dist/types-ts4.5/internal/utils/reset-options-in-group.d.ts

@@ -0,0 +1,4 @@
+declare const resetOptionsInGroup: (group: {
+    [key: string]: boolean | undefined;
+}) => {};
+export default resetOptionsInGroup;

package/dist/types-ts4.5/internal/utils/use-generated-id.d.ts

@@ -0,0 +1,6 @@
+export declare const PREFIX = "ds--dropdown--";
+/**
+ * useGeneratedId generates a random string which remains constant across
+ * renders when called without any parameter.
+ */
+export default function useGeneratedId(): string;

package/dist/types-ts4.5/radio/dropdown-item-radio-group.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { SectionProps } from '@atlaskit/menu';
+interface DropdownItemRadioGroupProps extends SectionProps {
+    id: string;
+}
+interface RadioGroupContextProps {
+    id: string;
+    radioGroupState: {
+        [key: string]: boolean | undefined;
+    };
+    selectRadioItem: (id: string, value: boolean) => void;
+}
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
+/**
+ * __Dropdown item radio group__
+ *  Store which manages the selection state for each DropdownItemRadio
+ *  across mount and unmounts.
+ *
+ */
+declare const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemRadioGroupProps) => JSX.Element;
+export default DropdownItemRadioGroup;

package/dist/types-ts4.5/radio/dropdown-item-radio.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DropdownItemRadioProps } from '../types';
+/**
+ * __Dropdown item radio__
+ *
+ * A dropdown item radio displays groups that have a single selection.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
+ */
+declare const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, }: DropdownItemRadioProps) => JSX.Element;
+export default DropdownItemRadio;

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

@@ -0,0 +1,303 @@
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
+import type { CustomItemProps, MenuGroupProps, SectionProps } from '@atlaskit/menu/types';
+import type { ContentProps, TriggerProps } from '@atlaskit/popup/types';
+export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
+export type Action = 'next' | 'prev' | 'first' | 'last';
+export type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+export type ItemId = string;
+export type GroupId = string;
+export type CachedItem = {
+    id: ItemId;
+    groupId: GroupId;
+};
+export type FocusItem = {
+    itemId: ItemId;
+    itemNode: HTMLElement;
+};
+export type Behaviors = 'checkbox' | 'radio' | 'menuitemcheckbox' | 'menuitemradio';
+export interface CustomTriggerProps<TriggerElement extends HTMLElement = HTMLElement> extends Omit<TriggerProps, 'ref'> {
+    /**
+     * Ref that should be applied to the trigger. This is used to calculate the menu position.
+     */
+    triggerRef: Ref<TriggerElement>;
+    /**
+     * Makes the trigger appear selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Event that is triggered when the element is clicked.
+     */
+    onClick?: (e: MouseEvent | KeyboardEvent) => void;
+    /**
+     * 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.
+     *
+     * As dropdown-menu is composed of different components, we passed down the testId to the sub component you want to test:
+     * - `testId--trigger` to get the menu trigger.
+     * - `testId--content` to get the dropdown content trigger.
+     */
+    testId?: string;
+}
+export interface OnOpenChangeArgs {
+    isOpen: boolean;
+    event: MouseEvent | KeyboardEvent;
+}
+export interface MenuWrapperProps extends MenuGroupProps {
+    setInitialFocusRef?: ContentProps['setInitialFocusRef'];
+    onClose?: ContentProps['onClose'];
+    onUpdate: ContentProps['update'];
+    isLoading?: DropdownMenuProps['isLoading'];
+    statusLabel?: DropdownMenuProps['statusLabel'];
+}
+export interface DropdownMenuGroupProps extends SectionProps {
+}
+export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
+    /**
+     * Controls the appearance of the menu.
+     * Default menu has scroll after its height exceeds the pre-defined amount.
+     * Tall menu has no scroll until the height exceeds the height of the viewport.
+     */
+    appearance?: 'default' | 'tall';
+    /**
+     * Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock
+     * which traps the focus within the menu. Also, the first item gets fouced automatically
+     * if the menu is triggered using the keyboard.
+     *
+     */
+    autoFocus?: boolean;
+    /**
+     * Content that will be rendered inside the layer element. Should typically be
+     * `DropdownItemGroup` or `DropdownItem`, or checkbox / radio variants of those.
+     */
+    children?: ReactNode;
+    /**
+     * If true, a Spinner is rendered instead of the items
+     */
+    isLoading?: boolean;
+    /**
+     * Text to be used as status for assistive technologies. Defaults to "Loading".
+     */
+    statusLabel?: string;
+    /**
+     * Controls the open state of the dropdown.
+     */
+    isOpen?: boolean;
+    /**
+     * Position of the menu.
+     */
+    placement?: Placement;
+    /**
+     * Allows the dropdown menu to be placed on the opposite side of its trigger if it does not
+     * fit in the viewport.
+     */
+    shouldFlip?: boolean;
+    /**
+     * The root element where the DropdownMenu content should be rendered.
+     * `true` - rendering in the DOM node closest to the trigger. `false` - rendering in React.Portal.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
+    /**
+     * Controls the spacing density of the menu.
+     */
+    spacing?: Extract<MenuGroupProps['spacing'], 'cozy' | 'compact'>;
+    /**
+     * Content which will trigger the dropdown menu to open and close. Use with `triggerType`
+     * to easily get a button trigger.
+     */
+    trigger?: string | ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement);
+    /**
+     * 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.
+     *
+     * As dropdown-menu is composed of different components, we passed down the testId to the sub component you want to test:
+     * - `testId--trigger` to get the menu trigger.
+     * - `testId--content` to get the dropdown content trigger.
+     */
+    testId?: string;
+    /**
+     * Controls the initial open state of the dropdown. If provided, the component is considered to be controlled
+     * which means that the user is responsible for managing the open and close state of the menu.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the menu should be open/closed. Receives an object with `isOpen` state.
+     */
+    onOpenChange?: (args: OnOpenChangeArgs) => void;
+    /**
+     * Z-index that the popup should be displayed in.
+     * This is passed to the portal component.
+     * Defaults to `layers.modal()` from `@atlaskit/theme` which is 510.
+     */
+    zIndex?: number;
+}
+export interface DropdownItemProps {
+    /**
+     * Primary content for the item.
+     */
+    children: React.ReactNode;
+    /**
+     * Custom component to render as an item.
+     * Should be wrapped in `forwardRef` to avoid accessibility issues when controlling keyboard focus.
+     */
+    component?: CustomItemProps['component'];
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Event that is triggered when the element is clicked.
+     */
+    onClick?: (e: MouseEvent | KeyboardEvent) => void;
+    /**
+     * Makes the element appear selected.
+     */
+    isSelected?: boolean;
+    /**
+     * 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;
+    /**
+     * Adds a title attribute to the root item element.
+     */
+    title?: string;
+    /**
+     * Element to render before the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    elemBefore?: React.ReactNode;
+    /**
+     * Element to render after the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    elemAfter?: React.ReactNode;
+    /**
+     * 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;
+    /**
+     * 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 DropdownItemCheckboxProps {
+    /**
+     * Primary content for the item.
+     */
+    children: React.ReactNode;
+    /**
+     * 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 checkbox appear disabled as well as removing interactivity.
+     */
+    isDisabled?: boolean;
+    /**
+     * 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;
+    /**
+     * Event that is triggered when the checkbox is clicked.
+     */
+    onClick?: (e: MouseEvent | KeyboardEvent) => void;
+    /**
+     * Sets whether the checkbox is checked or unchecked.
+     */
+    isSelected?: boolean;
+    /**
+     * Sets whether the checkbox begins selected.
+     */
+    defaultSelected?: boolean;
+    /**
+     * Unique id of a checkbox
+     */
+    id: string;
+    /**
+     * Adds a title attribute to the root item element.
+     */
+    title?: 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 DropdownItemRadioProps {
+    /**
+     * Primary content for the item.
+     */
+    children: React.ReactNode;
+    /**
+     * 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 checkbox appear disabled as well as removing interactivity.
+     */
+    isDisabled?: boolean;
+    /**
+     * 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;
+    /**
+     * Event that is triggered when the checkbox is clicked.
+     */
+    onClick?: (e: MouseEvent | KeyboardEvent) => void;
+    /**
+     * Sets whether the checkbox is checked or unchecked.
+     */
+    isSelected?: boolean;
+    /**
+     * Sets whether the checkbox begins selected.
+     */
+    defaultSelected?: boolean;
+    /**
+     * Unique id of a checkbox
+     */
+    id: string;
+    /**
+     * Adds a title attribute to the root item element.
+     */
+    title?: 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,11 +30,11 @@
     "@atlaskit/layering": "^0.2.0",
     "@atlaskit/menu": "^2.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/popup": "^1.10.0",
+    "@atlaskit/popup": "^1.11.0",
     "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/spinner": "^15.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",
     "bind-event-listener": "^2.1.1"
@@ -105,9 +105,6 @@
     "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     },
-    "platform.design-system-team.new-button-adoption-in-dropdown_p8sn4": {
-      "type": "boolean"
-    },
     "platform.design-system-team.icon-button-spacing-fix_o1zc5": {
       "type": "boolean",
       "referenceOnly": "true"

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

@@ -0,0 +1,147 @@
+## API Report File for "@atlaskit/dropdown-menu"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import type { CustomItemProps } from '@atlaskit/menu/types';
+import { default as DropdownItemGroup } from '@atlaskit/menu/section';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import type { MenuGroupProps } from '@atlaskit/menu/types';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { default as React_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import type { SectionProps } from '@atlaskit/menu';
+import type { SectionProps as SectionProps_2 } from '@atlaskit/menu/types';
+import type { TriggerProps } from '@atlaskit/popup/types';
+
+// @public (undocumented)
+export interface CustomTriggerProps<TriggerElement extends HTMLElement = HTMLElement> extends Omit<TriggerProps, 'ref'> {
+    isSelected?: boolean;
+    onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
+    testId?: string;
+    triggerRef: Ref<TriggerElement>;
+}
+
+// @public
+export const DropdownItem: React_2.ForwardRefExoticComponent<DropdownItemProps & React_2.RefAttributes<HTMLElement>>;
+
+// @public
+export const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, }: DropdownItemCheckboxProps) => JSX.Element;
+
+// @public
+export const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemCheckboxGroupProps) => JSX.Element;
+
+// @public (undocumented)
+interface DropdownItemCheckboxGroupProps extends SectionProps {
+    id: string;
+}
+
+// @public (undocumented)
+interface DropdownItemCheckboxProps {
+    children: React.ReactNode;
+    defaultSelected?: boolean;
+    description?: JSX.Element | string;
+    id: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
+    shouldDescriptionWrap?: boolean;
+    shouldTitleWrap?: boolean;
+    testId?: string;
+    title?: string;
+}
+
+export { DropdownItemGroup }
+
+// @public (undocumented)
+export interface DropdownItemProps {
+    children: React.ReactNode;
+    component?: CustomItemProps['component'];
+    description?: JSX.Element | string;
+    elemAfter?: React.ReactNode;
+    elemBefore?: React.ReactNode;
+    href?: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
+    rel?: string;
+    shouldDescriptionWrap?: boolean;
+    shouldTitleWrap?: boolean;
+    target?: string;
+    testId?: string;
+    title?: string;
+}
+
+// @public
+export const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, }: DropdownItemRadioProps) => JSX.Element;
+
+// @public
+export const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemRadioGroupProps) => JSX.Element;
+
+// @public (undocumented)
+interface DropdownItemRadioGroupProps extends SectionProps {
+    // (undocumented)
+    id: string;
+}
+
+// @public (undocumented)
+interface DropdownItemRadioProps {
+    children: React.ReactNode;
+    defaultSelected?: boolean;
+    description?: JSX.Element | string;
+    id: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
+    shouldDescriptionWrap?: boolean;
+    shouldTitleWrap?: boolean;
+    testId?: string;
+    title?: string;
+}
+
+// @public
+const DropdownMenu: <T extends HTMLElement = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, }: DropdownMenuProps<T>) => JSX.Element;
+export default DropdownMenu;
+
+// @public (undocumented)
+export interface DropdownMenuGroupProps extends SectionProps_2 {
+}
+
+// @public (undocumented)
+export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
+    appearance?: 'default' | 'tall';
+    autoFocus?: boolean;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    isLoading?: boolean;
+    isOpen?: boolean;
+    onOpenChange?: (args: OnOpenChangeArgs) => void;
+    placement?: Placement;
+    shouldFlip?: boolean;
+    shouldRenderToParent?: boolean;
+    spacing?: Extract<MenuGroupProps['spacing'], 'compact' | 'cozy'>;
+    statusLabel?: string;
+    testId?: string;
+    trigger?: ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement) | string;
+    zIndex?: number;
+}
+
+// @public (undocumented)
+export interface OnOpenChangeArgs {
+    // (undocumented)
+    event: KeyboardEvent_2 | MouseEvent_2;
+    // (undocumented)
+    isOpen: boolean;
+}
+
+// @public (undocumented)
+type Placement = 'auto' | 'auto-end' | 'auto-start' | 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start';
+
+// (No @packageDocumentation comment for this package)
+
+```