@atlaskit/dropdown-menu 11.5.0 → 11.5.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/dropdown-menu
 
+## 11.5.2
+
+### Patch Changes
+
+- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+
+## 11.5.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 11.5.0
 
 ### Minor Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.5.0",
+	"version": "11.5.2",
 	"sideEffects": false
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.5.0",
+	"version": "11.5.2",
 	"sideEffects": false
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.5.0",
+	"version": "11.5.2",
 	"sideEffects": false
 }

package/dist/types-ts4.0/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: (props: DropdownItemCheckboxGroupProps) => JSX.Element;
+export default DropdownItemCheckboxGroup;

package/dist/types-ts4.0/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: (props: DropdownItemCheckboxProps) => JSX.Element;
+export default DropdownItemCheckbox;

package/dist/types-ts4.0/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.0/dropdown-menu-item.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="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: (props: DropdownItemProps) => JSX.Element;
+export default DropdownMenuItem;

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

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/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>(props: DropdownMenuProps<T>) => jsx.JSX.Element;
+export default DropdownMenu;

package/dist/types-ts4.0/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.0/internal/components/focus-manager.d.ts

@@ -0,0 +1,19 @@
+import React, { FC } 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;
+export default FocusManager;

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

@@ -0,0 +1,11 @@
+/// <reference types="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: ({ onClose, setInitialFocusRef, ...props }: MenuWrapperProps) => JSX.Element;
+export default MenuWrapper;

package/dist/types-ts4.0/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.0/internal/context/selection-store.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+declare type OptionsInGroup = {
+    [key: string]: boolean | undefined;
+};
+declare 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>;
+declare 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.0/internal/hooks/use-checkbox-state.d.ts

@@ -0,0 +1,17 @@
+declare type CheckboxStateArgs = {
+    id: string;
+    isSelected: boolean | undefined;
+    defaultSelected: boolean | undefined;
+};
+declare type SetStateCallback = (value: boolean | undefined) => boolean;
+declare 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.0/internal/hooks/use-radio-state.d.ts

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

package/dist/types-ts4.0/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.0/internal/utils/get-icon-colors.d.ts

@@ -0,0 +1,8 @@
+declare const getIconColors: (isSelected: boolean | undefined) => {
+    primary: "var(--ds-background-brand-bold)";
+    secondary: "var(--ds-icon-inverse)";
+} | {
+    primary: "var(--ds-background-neutral)";
+    secondary: "var(--ds-UNSAFE_util-transparent)";
+};
+export default getIconColors;

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

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

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

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

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

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

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

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

package/dist/types-ts4.0/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.0/internal/utils/use-generated-id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * useGeneratedId generates a random string which remains constant across
+ * renders when called without any parameter.
+ */
+export default function useGeneratedId(): string;

package/dist/types-ts4.0/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: (props: DropdownItemRadioGroupProps) => JSX.Element;
+export default DropdownItemRadioGroup;

package/dist/types-ts4.0/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: (props: DropdownItemRadioProps) => JSX.Element;
+export default DropdownItemRadio;

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

@@ -0,0 +1,289 @@
+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 declare type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
+export declare type Action = 'next' | 'prev' | 'first' | 'last';
+export declare 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 declare type ItemId = string;
+export declare type GroupId = string;
+export declare type CachedItem = {
+    id: ItemId;
+    groupId: GroupId;
+};
+export declare type FocusItem = {
+    itemId: ItemId;
+    itemNode: HTMLElement;
+};
+export declare 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'];
+}
+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;
+    /**
+     * 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.
+     */
+    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": "11.5.0",
+  "version": "11.5.2",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,9 +12,18 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -26,9 +35,9 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/popup": "^1.4.0",
+    "@atlaskit/popup": "^1.5.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -42,25 +51,25 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "11.2.0",
-    "@atlaskit/modal-dialog": "^12.3.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/lozenge": "11.2.5",
+    "@atlaskit/modal-dialog": "^12.4.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/react": "^8.0.1",
-    "@testing-library/react-hooks": "^1.0.4",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "jscodeshift": "^0.13.0",
     "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
     "tiny-invariant": "^1.2.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "keywords": [
     "atlaskit",
@@ -75,6 +84,7 @@
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "design-system": "v1",
+      "design-tokens": "spacing",
       "styling": [
         "static",
         "emotion"

package/report.api.md

@@ -1,12 +1,15 @@
-## API Report File for "@atlaskit/dropdown-menu"
+## API Report File for "@atlaskit/dropdown-menu".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
 
 import type { CustomItemProps } from '@atlaskit/menu/types';
 import { default as DropdownItemGroup } from '@atlaskit/menu/section';
+import { jsx } from '@emotion/react';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { ReactElement } from 'react';
@@ -290,7 +293,7 @@ declare interface DropdownItemRadioProps {
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;
+declare const DropdownMenu: (props: DropdownMenuProps) => jsx.JSX.Element;
 export default DropdownMenu;
 
 export declare interface DropdownMenuGroupProps extends SectionProps_2 {}
@@ -369,7 +372,7 @@ export declare interface DropdownMenuProps {
 
 export declare interface OnOpenChangeArgs {
   isOpen: boolean;
-  event?: MouseEvent_2 | KeyboardEvent_2;
+  event: MouseEvent_2 | KeyboardEvent_2;
 }
 
 declare type Placement =

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/visual-regression/index.js

@@ -1,93 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _helper = require("@atlaskit/visual-regression/helper");
-
-var dropdownTrigger = '[data-testid="dropdown--trigger"]';
-var dropdownContent = '[data-testid="dropdown--content"]';
-describe('Snapshot Test', function () {
-  it('it should match visual snapshot for dropdown', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-    var url, _global, page, dropdownImage;
-
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            url = (0, _helper.getExampleUrl)('design-system', 'dropdown-menu', 'default-dropdown-menu', global.__BASEURL__);
-            _global = global, page = _global.page;
-            _context.next = 4;
-            return (0, _helper.loadPage)(page, url);
-
-          case 4:
-            _context.next = 6;
-            return page.waitForSelector(dropdownContent);
-
-          case 6:
-            _context.next = 8;
-            return page.screenshot();
-
-          case 8:
-            dropdownImage = _context.sent;
-            expect(dropdownImage).toMatchProdImageSnapshot();
-
-          case 10:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  })));
-  it('should accept custom zIndex', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-    var url, _global2, page, button, popupImage;
-
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            url = (0, _helper.getExampleUrl)('design-system', 'dropdown-menu', 'setting-z-index', global.__BASEURL__);
-            _global2 = global, page = _global2.page;
-            button = "[data-testid='popup--trigger']";
-            _context2.next = 5;
-            return (0, _helper.loadPage)(page, url);
-
-          case 5:
-            _context2.next = 7;
-            return page.waitForSelector(button);
-
-          case 7:
-            _context2.next = 9;
-            return page.click(button);
-
-          case 9:
-            _context2.next = 11;
-            return page.waitForSelector(dropdownTrigger);
-
-          case 11:
-            _context2.next = 13;
-            return page.click(dropdownTrigger);
-
-          case 13:
-            _context2.next = 15;
-            return page.waitForSelector(dropdownContent);
-
-          case 15:
-            _context2.next = 17;
-            return page.screenshot();
-
-          case 17:
-            popupImage = _context2.sent;
-            expect(popupImage).toMatchProdImageSnapshot();
-
-          case 19:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })));
-});

package/dist/es2019/visual-regression/index.js

@@ -1,30 +0,0 @@
-import { getExampleUrl, loadPage } from '@atlaskit/visual-regression/helper';
-const dropdownTrigger = '[data-testid="dropdown--trigger"]';
-const dropdownContent = '[data-testid="dropdown--content"]';
-describe('Snapshot Test', () => {
-  it('it should match visual snapshot for dropdown', async () => {
-    const url = getExampleUrl('design-system', 'dropdown-menu', 'default-dropdown-menu', global.__BASEURL__);
-    const {
-      page
-    } = global;
-    await loadPage(page, url);
-    await page.waitForSelector(dropdownContent);
-    const dropdownImage = await page.screenshot();
-    expect(dropdownImage).toMatchProdImageSnapshot();
-  });
-  it('should accept custom zIndex', async () => {
-    const url = getExampleUrl('design-system', 'dropdown-menu', 'setting-z-index', global.__BASEURL__);
-    const {
-      page
-    } = global;
-    const button = "[data-testid='popup--trigger']";
-    await loadPage(page, url);
-    await page.waitForSelector(button);
-    await page.click(button);
-    await page.waitForSelector(dropdownTrigger);
-    await page.click(dropdownTrigger);
-    await page.waitForSelector(dropdownContent);
-    const popupImage = await page.screenshot();
-    expect(popupImage).toMatchProdImageSnapshot();
-  });
-});

package/dist/esm/visual-regression/index.js

@@ -1,86 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { getExampleUrl, loadPage } from '@atlaskit/visual-regression/helper';
-var dropdownTrigger = '[data-testid="dropdown--trigger"]';
-var dropdownContent = '[data-testid="dropdown--content"]';
-describe('Snapshot Test', function () {
-  it('it should match visual snapshot for dropdown', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var url, _global, page, dropdownImage;
-
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            url = getExampleUrl('design-system', 'dropdown-menu', 'default-dropdown-menu', global.__BASEURL__);
-            _global = global, page = _global.page;
-            _context.next = 4;
-            return loadPage(page, url);
-
-          case 4:
-            _context.next = 6;
-            return page.waitForSelector(dropdownContent);
-
-          case 6:
-            _context.next = 8;
-            return page.screenshot();
-
-          case 8:
-            dropdownImage = _context.sent;
-            expect(dropdownImage).toMatchProdImageSnapshot();
-
-          case 10:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  })));
-  it('should accept custom zIndex', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var url, _global2, page, button, popupImage;
-
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            url = getExampleUrl('design-system', 'dropdown-menu', 'setting-z-index', global.__BASEURL__);
-            _global2 = global, page = _global2.page;
-            button = "[data-testid='popup--trigger']";
-            _context2.next = 5;
-            return loadPage(page, url);
-
-          case 5:
-            _context2.next = 7;
-            return page.waitForSelector(button);
-
-          case 7:
-            _context2.next = 9;
-            return page.click(button);
-
-          case 9:
-            _context2.next = 11;
-            return page.waitForSelector(dropdownTrigger);
-
-          case 11:
-            _context2.next = 13;
-            return page.click(dropdownTrigger);
-
-          case 13:
-            _context2.next = 15;
-            return page.waitForSelector(dropdownContent);
-
-          case 15:
-            _context2.next = 17;
-            return page.screenshot();
-
-          case 17:
-            popupImage = _context2.sent;
-            expect(popupImage).toMatchProdImageSnapshot();
-
-          case 19:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })));
-});

package/dist/types/visual-regression/index.d.ts

@@ -1 +0,0 @@
-export {};