npm - @atlaskit/dropdown-menu - Versions diffs - 10.1.9 → 11.0.3 - Mend

@atlaskit/dropdown-menu 10.1.9 → 11.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (211) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,155 @@
 # @atlaskit/dropdown-menu
+## 11.0.3
+### Patch Changes
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump dependency tiny-invariant to latest"
+- Updated dependencies
+## 11.0.2
+### Patch Changes
+- Updated dependencies
+## 11.0.1
+### Patch Changes
+- [`c2dd770a743`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2dd770a743) - Add new prop which controls is outside click should be bound using capture
+- Updated dependencies
+## 11.0.0
+### Major Changes
+- [`d65d8a545af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d65d8a545af) - [ux] In this version, we have significantly reduced the bundle size, improved the runtime performance and simplified the API for dropdown menu. We've also removed deprecated dependencies, which bring consistency to the spacing and padding of dropdown menu items, which may require updating VR snapshots. We've also provided codemods to help you upgrade to the latest API.
+  ## Running the codemod cli
+  To run the codemod: You first need to have the latest version installed
+  yarn upgrade @atlaskit/dropdown-menu@^11.0.0
+  Once upgraded, use @atlaskit/codemod-cli:
+  npx @atlaskit/codemod-cli --parser {tsx|babylon} --extensions ts,tsx,js [relativePath]
+  The CLI will show a list of components and versions so select @atlaskit/dropdown-menu@11.0.0 and you will automatically be upgraded. If your usage of @atlaskit/modal-dialog cannot be upgraded a comment will be left that a manual change is required.
+  Run npx @atlaskit/codemod-cli -h for more details on usage. For Atlassians, refer to the documentation for more details on the codemod CLI.
+  ## Behaviour changes
+  - _Portaling_ – The dropdown menu is now rendered in a React Portal and is appended at the bottom of the `<body>`. In most cases, this shouldn't make much of a difference. But if you have any tests that assert on DOM/React tree like snapshot tests, those will need to be updated.
+  - _Focus lock_ – As the menu is not rendered next to the trigger, the focus is trapped within the menu when the menu is open.
+  - _Layering_ – Another sideeffect of poratling the menu is that it is now part of the global stacking context, rather than a local stacking context. We've provided a new `zIndex` prop incase the layering is off.
+  - _Title and description wrapping behaviour_ – Menu items which have a long title and description now wrap into multiple line by default, instead of cutting it off and showing ellipsis. You can override the default behaviour by setting shouldTitleWrap and shouldDescriptionWrap to false.
+  ## Visual changes
+  - _Menu item padding_ – Dropdown menu items have 16px more padding horizontally.
+  - _Removed elemAfter in group title_ – Icon after the group title has been removed.
+  ## API Changes
+  Dropdown menu items no longer `@atlaskit/item` as the underlying component, they use `@atlaskit/menu` instead. This mean that some of the props that used to be spread over an Item are no longer supported. In addition to that, the following API changes have been made:
+  - `shouldFitContainer` – Deprecated. This prop has been deprecated and the codemod will remove it.
+  - `shouldAllowMultiline` – This prop has been split up into two: shouldTitleWrap and shouldDescriptionWrap. The codemod replaces its occurance with the two new ones.
+  - `onItemActivated` – The prop has been deprecated and the codemod will remove it. Use `onClick` instead.
+  - `onPositionEnd` – The prop has been deprecated and the codemod will remove it. Use `onOpenChange` instead.
+  - `boundariesElement` – The prop has been deprecated and the codemod will remove it. It is not relevant anymore as the Menu is portaled.
+  - `isMenuFixed` – The prop has been deprecated and the codemod will remove it. It is not relevant anymore as the Menu is portaled.
+  - `position` – The placement values are now consistent with Popup. They have a 1:1 mapping with the old values. The codemod maps the old values to the new.
+  - `zIndex` – The zIndex prop will need to be applied as an escape hatch in case the menu runs into any layering clashes with other elements on the screen.
+  - `items` – This prop has been deprecated because it is poor bad for performance. Pass MenuItems as children instead. The codemod removes the item prop. You’ll need to manually change it to children.
+  - `trigger`, `triggerProps` and `triggerType` – This API has been simplified the most. triggerType and triggerProps have been deprecated. trigger now accepts either a string or custom react element. If a string is passed, it is rendered as an @atlaskit/button. If a react component is passed, it is used as a trigger. Make sure to spread the provided props onto the component, they are used to position the component and provide accessibility attributes. The codemod handles the simplest case where the the triggerType is a string. For every other case, the codemod leaves a comment. Look at the section below on how it can be fixed in most cases.
+  - `isCompact` on MenuItem – The prop has been deprecated and the codemod will remove it.
+  - `isHidden` on MenuItem – The prop has been deprecated and the codemod will remove it.
+  - `autoFocus` on MenuItem – The prop has been deprecated and the codemod will remove it. Focus is directly applied to the first menu item.
+  ## Entrypoint changes
+  - `DropdownMenuStateless` – DropdownMenuStateless has been deprecated. The default export DropdownMenu handles both stateless and stateful logic. The API for DropdownMenuStateless has been retained and works as expected with DropdownMenu.The codemod converts the named import into a default import.
+  - `DropdownItemGroupCheckbox` – Renamed to DropdownItemCheckboxGroup. Codemod updates the import declaration.
+  - `DropdownItemGroupRadio` – Renamed to DropdownItemRadioGroup. Codemod updates the import declaration.
+  ## Updating the trigger prop
+  **Before**
+  ```
+  const DropdownMenuCustomTriggerButtonExample = () => {
+    return (
+      <DropdownMenu
+        triggerButtonProps={{ iconBefore: <MoreIcon label="more" /> }}
+        triggerType="button"
+        trigger="Click to open"
+      >
+        <DropdownItemGroup>
+          <DropdownItem>Edit</DropdownItem>
+          <DropdownItem>Share</DropdownItem>
+          <DropdownItem>Move</DropdownItem>
+          <DropdownItem>Clone</DropdownItem>
+          <DropdownItem>Delete</DropdownItem>
+          <DropdownItem>Report</DropdownItem>
+        </DropdownItemGroup>
+      </DropdownMenu>
+    );
+  };
+  ```
+  **After**
+  ```
+  const DropdownMenuCustomTriggerButtonExample = () => {
+    return (
+      <DropdownMenu
+        trigger={({ triggerRef, ...props }) => (
+          // 1. use `@atlaskit/button` or any other custom component
+          <Button
+            // 2. Spread the provided props
+            {...props}
+            // 3. Apply `triggerButtonProps` directly to button
+            iconBefore={<MoreIcon label="more" />}
+            // 4. Make sure to pass the ref
+            ref={triggerRef}
+          >
+            // 5. Move trigger label to be children
+            Click to open
+          </Button>
+        )}
+      >
+        <DropdownItemGroup>
+          <DropdownItem>Edit</DropdownItem>
+          <DropdownItem>Share</DropdownItem>
+          <DropdownItem>Move</DropdownItem>
+          <DropdownItem>Clone</DropdownItem>
+          <DropdownItem>Delete</DropdownItem>
+          <DropdownItem>Report</DropdownItem>
+        </DropdownItemGroup>
+      </DropdownMenu>
+    );
+  };
+  ```
+### Minor Changes
+- [`36322cbce4d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/36322cbce4d) - Export CustomTriggerProps type from dropdown-menu
+### Patch Changes
+- [`7df1c79ae46`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7df1c79ae46) - Enables DS linting rules and updates the code to adhere to the new conventions
+- [`bc17a568ae8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc17a568ae8) - Update types to include rel attribute
+- [`e3a3d13a0b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3a3d13a0b8) - Added a performance test for use with `storybook-addon-performance`.
+- Updated dependencies
 ## 10.1.9
 ### Patch Changes

package/__perf__/default.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import React from 'react';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '../src';
 const DropdownMenuDefaultExample = () => (
-  <DropdownMenu trigger="Cities in Australia" triggerType="button">
+  <DropdownMenu trigger="Cities in Australia">
     <DropdownItemGroup>
       <DropdownItem>Sydney</DropdownItem>
       <DropdownItem>Melbourne</DropdownItem>

package/__perf__/dropdown-menu.tsx ADDED Viewed

@@ -0,0 +1,216 @@
+import React from 'react';
+import { fireEvent, screen, waitFor } from '@testing-library/dom';
+import type {
+  InteractionTaskArgs,
+  PublicInteractionTask,
+} from 'storybook-addon-performance';
+import invariant from 'tiny-invariant';
+import DropdownMenu, {
+  DropdownItem,
+  DropdownItemCheckbox,
+  DropdownItemCheckboxGroup,
+  DropdownItemGroup,
+  DropdownItemRadio,
+  DropdownItemRadioGroup,
+} from '../src';
+const DropdownMenuPerformance = () => (
+  <DropdownMenu trigger="Page actions" testId="dropdown-menu">
+    <DropdownItemGroup>
+      <DropdownItem>Edit</DropdownItem>
+      <DropdownItem>Copy</DropdownItem>
+      <DropdownItem>Delete</DropdownItem>
+    </DropdownItemGroup>
+    <DropdownItemCheckboxGroup id="flags" title="Flags">
+      <DropdownItemCheckbox id="tokens">Tokens</DropdownItemCheckbox>
+      <DropdownItemCheckbox id="dark-mode">Dark mode</DropdownItemCheckbox>
+    </DropdownItemCheckboxGroup>
+    <DropdownItemRadioGroup id="font-size" title="Font size">
+      <DropdownItemRadio id="smaller">Smaller</DropdownItemRadio>
+      <DropdownItemRadio id="default" defaultSelected>
+        Default
+      </DropdownItemRadio>
+      <DropdownItemRadio id="larger">Larger</DropdownItemRadio>
+    </DropdownItemRadioGroup>
+  </DropdownMenu>
+);
+const getTrigger = (container: HTMLElement): HTMLElement => {
+  const trigger: HTMLElement | null = container.querySelector(
+    '[data-testid="dropdown-menu--trigger"]',
+  );
+  if (trigger === null) {
+    throw new Error('Could not find the dropdown menu trigger');
+  }
+  return trigger;
+};
+const interactionTasks: PublicInteractionTask[] = [
+  {
+    name: 'Display dropdown',
+    description: 'Click to open the dropdown menu',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const trigger = getTrigger(container);
+      await controls.time(async () => {
+        fireEvent.click(trigger);
+        await screen.findByText('Edit');
+      });
+    },
+  },
+  {
+    name: 'Hide dropdown (trigger)',
+    description: 'Click the trigger to hide the dropdown menu',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const trigger = getTrigger(container);
+      fireEvent.click(trigger);
+      await screen.findByText('Edit');
+      await controls.time(async () => {
+        fireEvent.click(trigger);
+        await waitFor(() => invariant(screen.queryByText('Edit') === null));
+      });
+    },
+  },
+  {
+    name: 'Hide dropdown (escape)',
+    description: 'Press escape to hide the dropdown menu',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const trigger = getTrigger(container);
+      fireEvent.click(trigger);
+      await screen.findByText('Edit');
+      await controls.time(async () => {
+        fireEvent.keyDown(container, { key: 'Escape', code: 'Escape' });
+        await waitFor(() => invariant(screen.queryByText('Edit') === null));
+      });
+    },
+  },
+  {
+    name: 'Hide dropdown (outside click)',
+    description: 'Click outside to hide the dropdown menu',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const trigger = getTrigger(container);
+      fireEvent.click(trigger);
+      await screen.findByText('Edit');
+      await controls.time(async () => {
+        fireEvent.click(container);
+        await waitFor(() => invariant(screen.queryByText('Edit') === null));
+      });
+    },
+  },
+  {
+    name: 'Select item',
+    description: 'Click menu item to select it',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const trigger = getTrigger(container);
+      fireEvent.click(trigger);
+      const label = await screen.findByText('Edit');
+      await controls.time(async () => {
+        label.click();
+      });
+    },
+  },
+  {
+    /**
+     * NOTE:
+     * This test has an unhandled error on CI, but runs fine locally.
+     * It doesn't stop the pipeline, but its results aren't reported.
+     */
+    name: 'Select checkbox',
+    description: 'Click a checkbox menu item to select it',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const trigger = getTrigger(container);
+      fireEvent.click(trigger);
+      const label = await screen.findByText('Tokens');
+      const checkbox: HTMLElement | null = label.closest('[role="checkbox"]');
+      if (checkbox === null) {
+        throw new Error('Could not find the checkbox');
+      }
+      await controls.time(async () => {
+        checkbox.click();
+        await waitFor(
+          () => {
+            const ariaChecked = checkbox.getAttribute('aria-checked');
+            invariant(
+              ariaChecked === 'true',
+              `Checkbox should be checked (is "${ariaChecked}")`,
+            );
+          },
+          { timeout: 5000 },
+        );
+      });
+    },
+  },
+  {
+    /**
+     * NOTE:
+     * This test has an unhandled error on CI, but runs fine locally.
+     * It doesn't stop the pipeline, but its results aren't reported.
+     */
+    name: 'Select radio',
+    description: 'Click a radio menu item to select it',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const trigger = getTrigger(container);
+      fireEvent.click(trigger);
+      const label = await screen.findByText('Smaller');
+      const radio: HTMLElement | null = label.closest('[role="radio"]');
+      if (radio === null) {
+        throw new Error('Could not find the radio');
+      }
+      await controls.time(async () => {
+        radio.click();
+        await waitFor(
+          () => {
+            const ariaChecked = radio.getAttribute('aria-checked');
+            invariant(
+              ariaChecked === 'true',
+              `Radio should be checked (is "${ariaChecked}")`,
+            );
+          },
+          { timeout: 5000 },
+        );
+      });
+    },
+  },
+];
+DropdownMenuPerformance.story = {
+  name: 'Dropdown menu',
+  parameters: {
+    performance: {
+      interactions: interactionTasks,
+    },
+  },
+};
+export default DropdownMenuPerformance;

package/codemods/11.0.0-lite-mode.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+import convertTriggerType from './migrates/convert-trigger-type';
+import deprecateItems from './migrates/deprecate-items';
+import deprecateOnItemActivated from './migrates/deprecate-onItemActivated';
+import deprecateOnPositioned from './migrates/deprecate-onPositioned';
+import deprecateShouldFitContainer from './migrates/deprecate-shouldFitContainer';
+import {
+  renameDropdownItemGroupCheckbox,
+  renameDropdownItemGroupRadio,
+  renameDropdownMenuStateless,
+} from './migrates/rename-imports';
+import updatePositionValue from './migrates/replace-position-to-placement';
+import replaceShouldAllowMultiline from './migrates/replace-shouldAllowMultiline';
+import {
+  updateDropdownItemGroupCheckboxCallsite,
+  updateDropdownItemGroupRadioCallsite,
+} from './migrates/update-component-callsites';
+const transformer = createTransformer([
+  deprecateItems,
+  deprecateOnItemActivated,
+  deprecateOnPositioned,
+  deprecateShouldFitContainer,
+  replaceShouldAllowMultiline,
+  updatePositionValue,
+  renameDropdownItemGroupCheckbox,
+  renameDropdownItemGroupRadio,
+  renameDropdownMenuStateless,
+  updateDropdownItemGroupCheckboxCallsite,
+  updateDropdownItemGroupRadioCallsite,
+  convertTriggerType,
+]);
+export default transformer;

package/codemods/__tests__/11.0.0-lite-mode.test.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+jest.autoMockOff();
+import transformer from '../11.0.0-lite-mode';
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+describe('apply all needed codemods for version 11.0.0 major bump', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from "react";
+    import DropdownMenu, {
+      DropdownItemGroupCheckbox as MyComponent, DropdownItemCheckbox,
+    } from "@atlaskit/dropdown-menu";
+    export default () => (
+      <DropdownMenu
+        trigger="Click to open"
+        triggerType="button"
+        items={[]}
+        onItemActivated={() => {}}
+        onPositioned={() => {}}
+        position="bottom left"
+        shouldFitContainer={false}
+        shouldAllowMultiline>
+      </DropdownMenu>
+    );
+    `,
+    `
+    import React from "react";
+    import DropdownMenu, {
+      DropdownItemCheckboxGroup as MyComponent, DropdownItemCheckbox,
+    } from "@atlaskit/dropdown-menu";
+    export default () => (
+      <DropdownMenu
+        trigger="Click to open"
+        placement="bottom-start"
+        shouldTitleWrap
+        shouldDescriptionWrap>
+      </DropdownMenu>
+    );
+    `,
+    'should not change anything when items is not used ',
+  );
+});

package/codemods/__tests__/convert-position.test.tsx ADDED Viewed

@@ -0,0 +1,88 @@
+import convertPosition from '../utils/convert-position';
+describe('convert old position notation', () => {
+  describe('edge cases', () => {
+    it('fallback to bottom-start', () => {
+      const position = convertPosition('unknown');
+      expect(position).toBe('bottom-start');
+    });
+    it('fallback to bottom-start', () => {
+      const position = convertPosition();
+      expect(position).toBe('bottom-start');
+    });
+    it('trim', () => {
+      const position = convertPosition(' top left ');
+      expect(position).toBe('top-start');
+    });
+  });
+  describe('convert top', () => {
+    it('convert top left', () => {
+      const position = convertPosition('top left');
+      expect(position).toBe('top-start');
+    });
+    it('convert top center', () => {
+      const position = convertPosition('top center');
+      expect(position).toBe('top');
+    });
+    it('convert top right', () => {
+      const position = convertPosition('top right');
+      expect(position).toBe('top-end');
+    });
+  });
+  describe('convert right', () => {
+    it('convert right top', () => {
+      const position = convertPosition('right top');
+      expect(position).toBe('right-start');
+    });
+    it('convert right middle', () => {
+      const position = convertPosition('right middle');
+      expect(position).toBe('right');
+    });
+    it('convert right bottom', () => {
+      const position = convertPosition('right bottom');
+      expect(position).toBe('right-end');
+    });
+  });
+  describe('convert bottom', () => {
+    it('convert bottom left', () => {
+      const position = convertPosition('bottom left');
+      expect(position).toBe('bottom-start');
+    });
+    it('convert bottom center', () => {
+      const position = convertPosition('bottom center');
+      expect(position).toBe('bottom');
+    });
+    it('convert bottom right', () => {
+      const position = convertPosition('bottom right');
+      expect(position).toBe('bottom-end');
+    });
+  });
+  describe('convert left', () => {
+    it('convert left top', () => {
+      const position = convertPosition('left top');
+      expect(position).toBe('left-start');
+    });
+    it('convert left middle', () => {
+      const position = convertPosition('left middle');
+      expect(position).toBe('left');
+    });
+    it('convert left bottom', () => {
+      const position = convertPosition('left bottom');
+      expect(position).toBe('left-end');
+    });
+  });
+});

package/codemods/__tests__/convert-triggerType.test.tsx ADDED Viewed

@@ -0,0 +1,100 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+jest.autoMockOff();
+import { createTransformer } from '@atlaskit/codemod-utils';
+import convertTriggerType from '../migrates/convert-trigger-type';
+const transformer = createTransformer([convertTriggerType]);
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+describe('update position value', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+    export default () => (
+      <DropdownMenu trigger="Click to open">
+      </DropdownMenu>
+    );
+    `,
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+    export default () => (
+      <DropdownMenu trigger="Click to open">
+      </DropdownMenu>
+    );
+    `,
+    'should not convert when triggerType prop is not provided',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+    export default () => (
+      <DropdownMenu trigger="Click to open" triggerType="button">
+      </DropdownMenu>
+    );
+    `,
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+    export default () => (
+      <DropdownMenu trigger="Click to open">
+      </DropdownMenu>
+    );
+    `,
+    'should delete triggerType prop when trigger is a string - type is button',
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+    export default () => (
+      <DropdownMenu
+      trigger={
+        <div>
+          &lt;button/&gt; trigger
+        </div>
+      }
+      triggerType="button">
+      </DropdownMenu>
+    );
+    `,
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+    export default () => (
+      /* TODO: (from codemod)
+      The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
+      Since version 11.0.0, we simplified the API and lean towards to only use 'trigger' prop.
+      For more info please reach out to #help-design-system-code. */
+      (<DropdownMenu
+      trigger={
+        <div>
+          &lt;button/&gt; trigger
+        </div>
+      }
+      triggerType="button">
+      </DropdownMenu>)
+    );
+    `,
+    'should only add comments triggerType prop when trigger is an object',
+  );
+});