@atlaskit/dropdown-menu 16.2.0 → 16.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/dropdown-menu
 
+## 16.3.0
+
+### Minor Changes
+
+- [#187451](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187451)
+  [`c40feaf938dc1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c40feaf938dc1) -
+  This cleans up the feature flag references for focus improvements when interactive elements are
+  clicked outside of the menu, making them fully available to all people.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.2.1
+
+### Patch Changes
+
+- [#188621](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188621)
+  [`94981059e9ba8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/94981059e9ba8) -
+  Added accessible label for MenuGroup in DropdownMenu
+- Updated dependencies
+
 ## 16.2.0
 
 ### Minor Changes

package/dist/cjs/dropdown-menu.js

@@ -19,7 +19,6 @@ 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/core/migration/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"));
@@ -101,7 +100,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     zIndex = _ref$zIndex === void 0 ? _constants.layers.modal() : _ref$zIndex,
     label = _ref.label,
     interactionName = _ref.interactionName,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    menuLabel = _ref.menuLabel;
   var _useControlledState = (0, _useControlled.default)(isOpen, function () {
       return defaultOpen;
     }),
@@ -187,9 +187,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       var _event$target$closest2, _event$target2;
       // Don't focus the trigger if the click was outside of the menu
       var isClickOutsideMenu = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && ((_event$target$closest2 = (_event$target2 = event.target).closest) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.call(_event$target2, '[role="menu"]')) === null;
-      var shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body &&
-      // except if clicking on the body
-      (0, _platformFeatureFlags.fg)('platform_design_system_team_dropdown_return_focus');
+      var shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body; // except if clicking on the body
       if (!shouldPreventFocus) {
         requestAnimationFrame(function () {
           var _triggerRef$current;
@@ -331,7 +329,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
         shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
         isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
         autoFocus: autoFocus,
-        testId: testId && "".concat(testId, "--menu-wrapper")
+        testId: testId && "".concat(testId, "--menu-wrapper"),
+        menuLabel: menuLabel
       }, children));
     }
   })));

package/dist/cjs/internal/components/menu-wrapper.js

@@ -54,7 +54,8 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     spacing = _ref2.spacing,
     testId = _ref2.testId,
     isTriggeredUsingKeyboard = _ref2.isTriggeredUsingKeyboard,
-    autoFocus = _ref2.autoFocus;
+    autoFocus = _ref2.autoFocus,
+    menuLabel = _ref2.menuLabel;
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
@@ -102,7 +103,8 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     onClick: closeOnMenuItemClick,
     role: "menu",
     spacing: spacing,
-    testId: testId && "".concat(testId, "--menu-group")
+    testId: testId && "".concat(testId, "--menu-group"),
+    menuLabel: menuLabel
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && "".concat(testId, "--loading-indicator")

package/dist/es2019/dropdown-menu.js

@@ -8,7 +8,6 @@ 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/core/migration/chevron-down';
-import { fg } 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';
@@ -78,7 +77,8 @@ const DropdownMenu = ({
   zIndex = layers.modal(),
   label,
   interactionName,
-  strategy
+  strategy,
+  menuLabel
 }) => {
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
   const triggerRef = useRef(null);
@@ -157,9 +157,7 @@ const DropdownMenu = ({
       var _event$target$closest2, _event$target2;
       // Don't focus the trigger if the click was outside of the menu
       const isClickOutsideMenu = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && ((_event$target$closest2 = (_event$target2 = event.target).closest) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.call(_event$target2, '[role="menu"]')) === null;
-      const shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body &&
-      // except if clicking on the body
-      fg('platform_design_system_team_dropdown_return_focus');
+      const shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body; // except if clicking on the body
       if (!shouldPreventFocus) {
         requestAnimationFrame(() => {
           var _triggerRef$current;
@@ -303,7 +301,8 @@ const DropdownMenu = ({
       shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
       isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
       autoFocus: autoFocus,
-      testId: testId && `${testId}--menu-wrapper`
+      testId: testId && `${testId}--menu-wrapper`,
+      menuLabel: menuLabel
     }, children))
   })));
 };

package/dist/es2019/internal/components/menu-wrapper.js

@@ -43,7 +43,8 @@ const MenuWrapper = ({
   spacing,
   testId,
   isTriggeredUsingKeyboard,
-  autoFocus
+  autoFocus,
+  menuLabel
 }) => {
   const {
     menuItemRefs
@@ -92,7 +93,8 @@ const MenuWrapper = ({
     onClick: closeOnMenuItemClick,
     role: "menu",
     spacing: spacing,
-    testId: testId && `${testId}--menu-group`
+    testId: testId && `${testId}--menu-group`,
+    menuLabel: menuLabel
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && `${testId}--loading-indicator`

package/dist/esm/dropdown-menu.js

@@ -14,7 +14,6 @@ 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/core/migration/chevron-down';
-import { fg } 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';
@@ -93,7 +92,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     zIndex = _ref$zIndex === void 0 ? layers.modal() : _ref$zIndex,
     label = _ref.label,
     interactionName = _ref.interactionName,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    menuLabel = _ref.menuLabel;
   var _useControlledState = useControlledState(isOpen, function () {
       return defaultOpen;
     }),
@@ -179,9 +179,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       var _event$target$closest2, _event$target2;
       // Don't focus the trigger if the click was outside of the menu
       var isClickOutsideMenu = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && ((_event$target$closest2 = (_event$target2 = event.target).closest) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.call(_event$target2, '[role="menu"]')) === null;
-      var shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body &&
-      // except if clicking on the body
-      fg('platform_design_system_team_dropdown_return_focus');
+      var shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body; // except if clicking on the body
       if (!shouldPreventFocus) {
         requestAnimationFrame(function () {
           var _triggerRef$current;
@@ -323,7 +321,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
         shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
         isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
         autoFocus: autoFocus,
-        testId: testId && "".concat(testId, "--menu-wrapper")
+        testId: testId && "".concat(testId, "--menu-wrapper"),
+        menuLabel: menuLabel
       }, children));
     }
   })));

package/dist/esm/internal/components/menu-wrapper.js

@@ -45,7 +45,8 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     spacing = _ref2.spacing,
     testId = _ref2.testId,
     isTriggeredUsingKeyboard = _ref2.isTriggeredUsingKeyboard,
-    autoFocus = _ref2.autoFocus;
+    autoFocus = _ref2.autoFocus,
+    menuLabel = _ref2.menuLabel;
   var _useContext = useContext(FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
@@ -93,7 +94,8 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     onClick: closeOnMenuItemClick,
     role: "menu",
     spacing: spacing,
-    testId: testId && "".concat(testId, "--menu-group")
+    testId: testId && "".concat(testId, "--menu-group"),
+    menuLabel: menuLabel
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && "".concat(testId, "--loading-indicator")

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

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, }: DropdownMenuProps<T>) => React.JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, menuLabel, }: DropdownMenuProps<T>) => React.JSX.Element;
 export default DropdownMenu;

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

@@ -7,5 +7,5 @@ import { type MenuWrapperProps } from '../../types';
  * 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, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, }: MenuWrapperProps) => JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, menuLabel, }: MenuWrapperProps) => JSX.Element;
 export default MenuWrapper;

package/dist/types/types.d.ts

@@ -181,6 +181,10 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * The default is `fixed`.
      */
     strategy?: 'absolute' | 'fixed';
+    /**
+     * Provide an accessible label for the menu element for assistive technology.
+     */
+    menuLabel?: string;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;

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

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, }: DropdownMenuProps<T>) => React.JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, menuLabel, }: DropdownMenuProps<T>) => React.JSX.Element;
 export default DropdownMenu;

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

@@ -7,5 +7,5 @@ import { type MenuWrapperProps } from '../../types';
  * 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, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, }: MenuWrapperProps) => JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, menuLabel, }: MenuWrapperProps) => JSX.Element;
 export default MenuWrapper;

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

@@ -181,6 +181,10 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * The default is `fixed`.
      */
     strategy?: 'absolute' | 'fixed';
+    /**
+     * Provide an accessible label for the menu element for assistive technology.
+     */
+    menuLabel?: string;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "16.2.0",
+	"version": "16.3.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^4.1.0",
-		"@atlaskit/icon": "^27.3.0",
+		"@atlaskit/icon": "^27.6.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tokens": "^5.5.0",
+		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
@@ -57,8 +57,8 @@
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
-		"@atlaskit/modal-dialog": "^14.2.0",
-		"@atlaskit/section-message": "^8.2.0",
+		"@atlaskit/modal-dialog": "^14.3.0",
+		"@atlaskit/section-message": "^8.3.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
@@ -89,7 +89,7 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_design_system_team_dropdown_return_focus": {
+		"platform_dst_dropdown_radio_default_selected_fix": {
 			"type": "boolean"
 		}
 	},