@atlaskit/dropdown-menu 10.1.8 → 11.0.2

package/dist/types/types.d.ts

@@ -1,6 +1,9 @@
-import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { CustomThemeButtonProps } from '@atlaskit/button/types';
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
+import type { 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 = {
@@ -12,93 +15,265 @@ export declare type FocusItem = {
     itemNode: HTMLElement;
 };
 export declare type Behaviors = 'checkbox' | 'radio' | 'menuitemcheckbox' | 'menuitemradio';
-export interface DeprecatedItem {
-    content?: string;
-    elemBefore?: ReactNode;
-    href?: string;
-    isChecked?: boolean;
-    isDisabled?: boolean;
-    target?: '_blank' | '_self';
-    type?: string;
+export interface CustomTriggerProps extends Omit<TriggerProps, 'ref'> {
+    /**
+     * Ref that should be applied to the trigger. This is used to calculate the menu position.
+     */
+    triggerRef: Ref<HTMLElement>;
+    /**
+     * 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 DeprecatedItemGroup {
-    elemAfter?: ReactNode;
-    heading?: string;
-    items: Array<DeprecatedItem>;
+export interface MenuWrapperProps extends MenuGroupProps {
+    setInitialFocusRef?: ContentProps['setInitialFocusRef'];
+    onClose?: ContentProps['onClose'];
 }
-export interface OnItemActivatedArgs {
-    event?: Event;
-    item: DeprecatedItem;
+export interface DropdownMenuGroupProps extends SectionProps {
 }
-interface DropdownMenuBaseProps {
+export interface DropdownMenuProps {
     /**
      * 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';
-    /** Value passed to the Layer component to determine when to reposition the droplist */
-    boundariesElement: 'viewport' | 'window' | 'scrollParent';
-    /** Content that will be rendered inside the layer element. Should typically be
-     * `DropdownItemGroup` or `DropdownItem`, or checkbox / radio variants of those. */
+    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;
-    /** Controls the open state of the dropdown. */
-    isOpen: boolean;
-    /** Deprecated. An array of groups. Every group must contain an array of items */
-    items: Array<DeprecatedItemGroup>;
-    /** Deprecated. Called when an item is activated. Receives an object with the activated item. */
-    onItemActivated: (args: OnItemActivatedArgs) => void;
-    /** Position of the menu. See the documentation of @atlaskit/layer for more details. */
-    position: string;
-    /** Determines if the dropdown menu should be positioned fixed. Useful for breaking out of overflow scroll/hidden containers, however, extra layout
-     management will be required to control scroll behaviour when this property is enabled as the menu will not update position with the target on scroll. */
-    isMenuFixed: boolean;
-    /** Deprecated. Option to display multiline items when content is too long.
-     * Instead of ellipsing the overflown text it causes item to flow over multiple lines.
-     */
-    shouldAllowMultilineItems: boolean;
-    /** Option to fit dropdown menu width to its parent width */
-    shouldFitContainer: boolean;
-    /** 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?: ReactNode;
-    /** Props to pass through to the trigger button. See @atlaskit/button for allowed props. */
-    triggerButtonProps?: CustomThemeButtonProps;
-    /** Controls the interface of trigger to be used for the dropdown menu. The default trigger allows
-     * you to supply your own trigger component. Setting this prop to `button` will render a
-     * Button component with an 'expand' icon, and the `trigger` prop contents inside the
-     * button. */
-    triggerType: 'default' | 'button';
-    /** Callback to know when the menu is correctly positioned after it is opened */
-    onPositioned?: Function;
-    /**
-     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.
-      */
+    /**
+     * 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) => 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;
 }
-export interface OnOpenChangeArgs {
-    isOpen: boolean;
-    event?: MouseEvent | KeyboardEvent;
+export interface DropdownItemProps {
+    /**
+     * 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 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 DropdownMenuStatelessProps extends DropdownMenuBaseProps, WithAnalyticsEventsProps {
-    /** Called when the menu should be open/closed. Received an object with `isOpen` state. */
-    onOpenChange: (args: OnOpenChangeArgs) => void;
+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 DropdownMenuStatefulProps extends DropdownMenuBaseProps {
-    /** Controls the initial open state of the dropdown. */
-    defaultOpen: boolean;
-    /** Called when the menu is open or closed. Received an object with `isOpen` state. */
-    onOpenChange: (args: OnOpenChangeArgs, ...restArgs: any) => void;
+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;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "10.1.8",
+  "version": "11.0.2",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,49 +13,50 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Dropdown menu"
     }
   },
-  "af:exports": {
-    ".": "./src/index.ts",
-    "./types": "./src/types.tsx"
-  },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.0.0",
-    "@atlaskit/droplist": "^11.0.0",
-    "@atlaskit/icon": "^21.7.0",
-    "@atlaskit/item": "^12.0.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/codemod-utils": "^3.2.0",
+    "@atlaskit/ds-lib": "^1.1.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/menu": "^1.0.0",
+    "@atlaskit/popup": "^1.3.0",
+    "@atlaskit/spinner": "^15.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/visually-hidden": "^0.1.1",
     "@babel/runtime": "^7.0.0",
-    "array-find": "^1.0.0",
-    "prop-types": "^15.5.10"
+    "@emotion/core": "^10.0.9"
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^20.1.0",
-    "@atlaskit/build-utils": "*",
+    "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "11.0.0",
-    "@atlaskit/modal-dialog": "^11.5.0",
+    "@atlaskit/lozenge": "11.1.5",
+    "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.3.0",
+    "@atlaskit/tooltip": "^17.5.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",
-    "enzyme": "^3.10.0",
+    "@testing-library/react-hooks": "^1.0.4",
+    "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
+    "storybook-addon-performance": "^0.16.0",
+    "tiny-invariant": "^0.0.3",
     "typescript": "3.9.6"
   },
   "keywords": [
@@ -66,8 +67,23 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "ui-components": "lite-mode",
+      "design-system": "v1",
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "analytics": "analytics-next",
+      "deprecation": "no-deprecated-imports",
+      "theming": "tokens"
     }
   },
+  "af:exports": {
+    ".": "./src/index.tsx",
+    "./types": "./src/types.tsx"
+  },
   "homepage": "https://atlassian.design/components/dropdown-menu/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }