@atlaskit/dropdown-menu 11.14.1 → 11.14.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/dropdown-menu
 
+## 11.14.3
+
+### Patch Changes
+
+- [`a54578d2ea9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a54578d2ea9) - This removes the feature flag for the `shouldRenderToParent` prop. The prop is available for use.
+
+## 11.14.2
+
+### Patch Changes
+
+- [`9623c04c020`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9623c04c020) - [ux] Adds context to loading state for assistive technologies.
+- Updated dependencies
+
 ## 11.14.1
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -185,7 +185,7 @@ var DropdownMenu = function DropdownMenu(props) {
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
     shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent : undefined,
+    shouldRenderToParent: shouldRenderToParent,
     trigger: function trigger(triggerProps) {
       if (typeof _trigger === 'function') {
         var ref = triggerProps.ref,
@@ -236,7 +236,8 @@ var DropdownMenu = function DropdownMenu(props) {
         onUpdate: update,
         isLoading: isLoading,
         statusLabel: statusLabel,
-        setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
+        setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
+        testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }
   }));

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

@@ -5,19 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
 var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _focusManager = require("../components/focus-manager");
 var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"));
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
-var _excluded = ["onClose", "onUpdate", "isLoading", "statusLabel", "setInitialFocusRef", "children"];
 /** @jsx jsx */
+
 var spinnerContainerStyles = (0, _primitives.xcss)({
   display: 'flex',
   minWidth: '160px',
@@ -26,14 +23,15 @@ var spinnerContainerStyles = (0, _primitives.xcss)({
 });
 var LoadingIndicator = function LoadingIndicator(_ref) {
   var _ref$statusLabel = _ref.statusLabel,
-    statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel;
+    statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel,
+    testId = _ref.testId;
   return (0, _react2.jsx)(_primitives.Box, {
     xcss: spinnerContainerStyles
   }, (0, _react2.jsx)(_spinner.default, {
-    size: "small"
-  }), (0, _react2.jsx)(_visuallyHidden.default, {
-    role: "status"
-  }, statusLabel));
+    size: "small",
+    label: statusLabel,
+    testId: testId
+  }));
 };
 /**
  *
@@ -43,13 +41,16 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
  * It also sets focus to the first menu item when opened.
  */
 var MenuWrapper = function MenuWrapper(_ref2) {
-  var onClose = _ref2.onClose,
-    onUpdate = _ref2.onUpdate,
+  var children = _ref2.children,
     isLoading = _ref2.isLoading,
+    maxHeight = _ref2.maxHeight,
+    maxWidth = _ref2.maxWidth,
+    onClose = _ref2.onClose,
+    onUpdate = _ref2.onUpdate,
     statusLabel = _ref2.statusLabel,
     setInitialFocusRef = _ref2.setInitialFocusRef,
-    children = _ref2.children,
-    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    spacing = _ref2.spacing,
+    testId = _ref2.testId;
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
@@ -80,15 +81,18 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     })) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
     setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef]);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react2.jsx)(_menuGroup.default, (0, _extends2.default)({
-      role: "menu",
-      onClick: closeOnMenuItemClick
-    }, props), isLoading ? (0, _react2.jsx)(LoadingIndicator, {
-      statusLabel: statusLabel
-    }) : children)
-  );
+  return (0, _react2.jsx)(_menuGroup.default, {
+    isLoading: isLoading,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    onClick: closeOnMenuItemClick,
+    role: "menu",
+    spacing: spacing,
+    testId: testId && "".concat(testId, "--menu-group")
+  }, isLoading ? (0, _react2.jsx)(LoadingIndicator, {
+    statusLabel: statusLabel,
+    testId: testId && "".concat(testId, "--loading-indicator")
+  }) : children);
 };
 var _default = MenuWrapper;
 exports.default = _default;

package/dist/es2019/dropdown-menu.js

@@ -157,7 +157,7 @@ const DropdownMenu = props => {
     fallbackPlacements: fallbackPlacements,
     testId: testId && `${testId}--content`,
     shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent : undefined,
+    shouldRenderToParent: shouldRenderToParent,
     trigger: triggerProps => {
       if (typeof trigger === 'function') {
         const {
@@ -212,7 +212,8 @@ const DropdownMenu = props => {
       onUpdate: update,
       isLoading: isLoading,
       statusLabel: statusLabel,
-      setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
+      setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
+      testId: testId && `${testId}--menu-wrapper`
     }, children))
   }));
 };

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

@@ -1,11 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useContext, useEffect, useLayoutEffect } from 'react';
 import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import { FocusManagerContext } from '../components/focus-manager';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
@@ -16,14 +14,15 @@ const spinnerContainerStyles = xcss({
   justifyContent: 'center'
 });
 const LoadingIndicator = ({
-  statusLabel = 'Loading'
+  statusLabel = 'Loading',
+  testId
 }) => jsx(Box, {
   xcss: spinnerContainerStyles
 }, jsx(Spinner, {
-  size: "small"
-}), jsx(VisuallyHidden, {
-  role: "status"
-}, statusLabel));
+  size: "small",
+  label: statusLabel,
+  testId: testId
+}));
 /**
  *
  * MenuWrapper wraps all the menu items.
@@ -32,13 +31,16 @@ const LoadingIndicator = ({
  * It also sets focus to the first menu item when opened.
  */
 const MenuWrapper = ({
+  children,
+  isLoading,
+  maxHeight,
+  maxWidth,
   onClose,
   onUpdate,
-  isLoading,
   statusLabel,
   setInitialFocusRef,
-  children,
-  ...props
+  spacing,
+  testId
 }) => {
   const {
     menuItemRefs
@@ -69,14 +71,17 @@ const MenuWrapper = ({
     const firstFocusableRef = (_menuItemRefs$find = menuItemRefs.find(ref => !ref.hasAttribute('disabled'))) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
     setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef]);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(MenuGroup, _extends({
-      role: "menu",
-      onClick: closeOnMenuItemClick
-    }, props), isLoading ? jsx(LoadingIndicator, {
-      statusLabel: statusLabel
-    }) : children)
-  );
+  return jsx(MenuGroup, {
+    isLoading: isLoading,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    onClick: closeOnMenuItemClick,
+    role: "menu",
+    spacing: spacing,
+    testId: testId && `${testId}--menu-group`
+  }, isLoading ? jsx(LoadingIndicator, {
+    statusLabel: statusLabel,
+    testId: testId && `${testId}--loading-indicator`
+  }) : children);
 };
 export default MenuWrapper;

package/dist/esm/dropdown-menu.js

@@ -176,7 +176,7 @@ var DropdownMenu = function DropdownMenu(props) {
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
     shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent : undefined,
+    shouldRenderToParent: shouldRenderToParent,
     trigger: function trigger(triggerProps) {
       if (typeof _trigger === 'function') {
         var ref = triggerProps.ref,
@@ -227,7 +227,8 @@ var DropdownMenu = function DropdownMenu(props) {
         onUpdate: update,
         isLoading: isLoading,
         statusLabel: statusLabel,
-        setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
+        setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
+        testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }
   }));

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

@@ -1,13 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onClose", "onUpdate", "isLoading", "statusLabel", "setInitialFocusRef", "children"];
 /** @jsx jsx */
 import { useContext, useEffect, useLayoutEffect } from 'react';
 import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import { FocusManagerContext } from '../components/focus-manager';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
@@ -19,14 +15,15 @@ var spinnerContainerStyles = xcss({
 });
 var LoadingIndicator = function LoadingIndicator(_ref) {
   var _ref$statusLabel = _ref.statusLabel,
-    statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel;
+    statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel,
+    testId = _ref.testId;
   return jsx(Box, {
     xcss: spinnerContainerStyles
   }, jsx(Spinner, {
-    size: "small"
-  }), jsx(VisuallyHidden, {
-    role: "status"
-  }, statusLabel));
+    size: "small",
+    label: statusLabel,
+    testId: testId
+  }));
 };
 /**
  *
@@ -36,13 +33,16 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
  * It also sets focus to the first menu item when opened.
  */
 var MenuWrapper = function MenuWrapper(_ref2) {
-  var onClose = _ref2.onClose,
-    onUpdate = _ref2.onUpdate,
+  var children = _ref2.children,
     isLoading = _ref2.isLoading,
+    maxHeight = _ref2.maxHeight,
+    maxWidth = _ref2.maxWidth,
+    onClose = _ref2.onClose,
+    onUpdate = _ref2.onUpdate,
     statusLabel = _ref2.statusLabel,
     setInitialFocusRef = _ref2.setInitialFocusRef,
-    children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded);
+    spacing = _ref2.spacing,
+    testId = _ref2.testId;
   var _useContext = useContext(FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
@@ -73,14 +73,17 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     })) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
     setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef]);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(MenuGroup, _extends({
-      role: "menu",
-      onClick: closeOnMenuItemClick
-    }, props), isLoading ? jsx(LoadingIndicator, {
-      statusLabel: statusLabel
-    }) : children)
-  );
+  return jsx(MenuGroup, {
+    isLoading: isLoading,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    onClick: closeOnMenuItemClick,
+    role: "menu",
+    spacing: spacing,
+    testId: testId && "".concat(testId, "--menu-group")
+  }, isLoading ? jsx(LoadingIndicator, {
+    statusLabel: statusLabel,
+    testId: testId && "".concat(testId, "--loading-indicator")
+  }) : children);
 };
 export default MenuWrapper;

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

@@ -7,5 +7,5 @@ import { MenuWrapperProps } from '../../types';
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-declare const MenuWrapper: ({ onClose, onUpdate, isLoading, statusLabel, setInitialFocusRef, children, ...props }: MenuWrapperProps) => jsx.JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, spacing, testId, }: MenuWrapperProps) => jsx.JSX.Element;
 export default MenuWrapper;

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

@@ -7,5 +7,5 @@ import { MenuWrapperProps } from '../../types';
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-declare const MenuWrapper: ({ onClose, onUpdate, isLoading, statusLabel, setInitialFocusRef, children, ...props }: MenuWrapperProps) => jsx.JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, spacing, testId, }: MenuWrapperProps) => jsx.JSX.Element;
 export default MenuWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.14.1",
+  "version": "11.14.3",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,14 +36,13 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/layering": "^0.2.0",
-    "@atlaskit/menu": "^1.10.0",
+    "@atlaskit/menu": "^1.11.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/popup": "^1.10.0",
     "@atlaskit/primitives": "^1.6.0",
-    "@atlaskit/spinner": "^15.5.0",
+    "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.25.0",
-    "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1"
@@ -105,9 +104,6 @@
     "platform.design-system-team.menu-selected-state-change_0see9": {
       "type": "boolean"
     },
-    "platform.design-system-team.render-popup-in-parent_f73ij": {
-      "type": "boolean"
-    },
     "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     },