@atlaskit/dropdown-menu 12.1.10 → 12.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/dropdown-menu
 
+## 12.3.0
+
+### Minor Changes
+
+- [#70040](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70040) [`d18ec4d7ce20`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d18ec4d7ce20) - [ux] Tidy up of the `platform.design-system-team.icon-button-spacing-fix_o1zc5` Platform Feature Flag which applies a small adjustment to icon spacing for buttons using `iconBefore` and `iconAfter` props. Small visual adjustment is to be expected — keep this in mind when reviewing any VR tests breaking. The spacing around the icons will be reduced.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.2.0
+
+### Minor Changes
+
+- [#69888](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69888) [`e710d215f768`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e710d215f768) - Add label prop to render aria-label on dropdown menu trigger.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.10
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -64,13 +64,11 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
 };
 
 /**
- * __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)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/usage).
  */
 var DropdownMenu = function DropdownMenu(_ref) {
   var _ref$autoFocus = _ref.autoFocus,
@@ -94,7 +92,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     testId = _ref.testId,
     _trigger = _ref.trigger,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? _constants.layers.modal() : _ref$zIndex;
+    zIndex = _ref$zIndex === void 0 ? _constants.layers.modal() : _ref$zIndex,
+    label = _ref.label;
   var _useControlledState = (0, _useControlled.default)(isOpen, function () {
       return defaultOpen;
     }),
@@ -226,7 +225,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
           label: ""
         }),
         onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
+        testId: testId && "".concat(testId, "--trigger"),
+        "aria-label": label
       }), _trigger);
     },
     content: function content(_ref3) {

package/dist/es2019/dropdown-menu.js

@@ -49,13 +49,11 @@ const getFallbackPlacements = placement => {
 };
 
 /**
- * __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)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/usage).
  */
 const DropdownMenu = ({
   autoFocus = false,
@@ -71,7 +69,8 @@ const DropdownMenu = ({
   statusLabel,
   testId,
   trigger,
-  zIndex = layers.modal()
+  zIndex = layers.modal(),
+  label
 }) => {
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
@@ -200,7 +199,8 @@ const DropdownMenu = ({
           label: ""
         }),
         onClick: handleTriggerClicked,
-        testId: testId && `${testId}--trigger`
+        testId: testId && `${testId}--trigger`,
+        "aria-label": label
       }), trigger);
     },
     content: ({

package/dist/esm/dropdown-menu.js

@@ -55,13 +55,11 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
 };
 
 /**
- * __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)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/usage).
  */
 var DropdownMenu = function DropdownMenu(_ref) {
   var _ref$autoFocus = _ref.autoFocus,
@@ -85,7 +83,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     testId = _ref.testId,
     _trigger = _ref.trigger,
     _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? layers.modal() : _ref$zIndex;
+    zIndex = _ref$zIndex === void 0 ? layers.modal() : _ref$zIndex,
+    label = _ref.label;
   var _useControlledState = useControlledState(isOpen, function () {
       return defaultOpen;
     }),
@@ -217,7 +216,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
           label: ""
         }),
         onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
+        testId: testId && "".concat(testId, "--trigger"),
+        "aria-label": label
       }), _trigger);
     },
     content: function content(_ref3) {

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

@@ -3,13 +3,11 @@ import type { DropdownMenuProps } from './types';
 export declare const KEY_SPACE = " ";
 export declare const KEY_ENTER = "Enter";
 /**
- * __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)
+ * - [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;
+declare const DropdownMenu: <T extends HTMLElement = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types/types.d.ts

@@ -72,7 +72,7 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      */
     children?: ReactNode;
     /**
-     * If true, a Spinner is rendered instead of the items
+     * If true, a Spinner is rendered instead of the items.
      */
     isLoading?: boolean;
     /**
@@ -135,6 +135,10 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      * Defaults to `layers.modal()` from `@atlaskit/theme` which is 510.
      */
     zIndex?: number;
+    /**
+     * Provide an accessible label via aria-label, used by assistive technologies.
+     */
+    label?: string;
 }
 export interface DropdownItemProps {
     /**
@@ -241,7 +245,7 @@ export interface DropdownItemCheckboxProps {
      */
     defaultSelected?: boolean;
     /**
-     * Unique id of a checkbox
+     * Unique id of a checkbox.
      */
     id: string;
     /**
@@ -290,7 +294,7 @@ export interface DropdownItemRadioProps {
      */
     defaultSelected?: boolean;
     /**
-     * Unique id of a checkbox
+     * Unique id of a checkbox.
      */
     id: string;
     /**

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

@@ -3,13 +3,11 @@ import type { DropdownMenuProps } from './types';
 export declare const KEY_SPACE = " ";
 export declare const KEY_ENTER = "Enter";
 /**
- * __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)
+ * - [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;
+declare const DropdownMenu: <T extends HTMLElement = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

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

@@ -72,7 +72,7 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      */
     children?: ReactNode;
     /**
-     * If true, a Spinner is rendered instead of the items
+     * If true, a Spinner is rendered instead of the items.
      */
     isLoading?: boolean;
     /**
@@ -135,6 +135,10 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      * Defaults to `layers.modal()` from `@atlaskit/theme` which is 510.
      */
     zIndex?: number;
+    /**
+     * Provide an accessible label via aria-label, used by assistive technologies.
+     */
+    label?: string;
 }
 export interface DropdownItemProps {
     /**
@@ -241,7 +245,7 @@ export interface DropdownItemCheckboxProps {
      */
     defaultSelected?: boolean;
     /**
-     * Unique id of a checkbox
+     * Unique id of a checkbox.
      */
     id: string;
     /**
@@ -290,7 +294,7 @@ export interface DropdownItemRadioProps {
      */
     defaultSelected?: boolean;
     /**
-     * Unique id of a checkbox
+     * Unique id of a checkbox.
      */
     id: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "12.1.10",
+  "version": "12.3.0",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^17.0.0",
+    "@atlaskit/button": "^17.3.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^22.0.0",
@@ -34,10 +34,10 @@
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/popup": "^1.11.0",
-    "@atlaskit/primitives": "^1.15.0",
+    "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1"
@@ -51,7 +51,6 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
@@ -109,10 +108,6 @@
     "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     },
-    "platform.design-system-team.icon-button-spacing-fix_o1zc5": {
-      "type": "boolean",
-      "referenceOnly": "true"
-    },
     "platform.design-system-team.layering_popup_1cnzt": {
       "type": "boolean"
     }