@atlaskit/menu 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 1.11.0
+
+### Minor Changes
+
+- [`5545e5a6ab2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5545e5a6ab2) - [ux] Adds `isLoading` prop to menu group for better context for assistive technology users.
+
+## 1.10.1
+
+### Patch Changes
+
+- [`a962b1b24eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a962b1b24eb) - The internal composition of this component has changed. There is no expected change in behavior.
+
 ## 1.10.0
 
 ### Minor Changes

package/dist/cjs/menu-section/menu-group.js

@@ -8,11 +8,17 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuContext = require("../internal/components/menu-context");
-var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
+var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
 /** @jsx jsx */
+var baseStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'static',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
+
 /**
  * __Menu group__
  *
@@ -22,7 +28,8 @@ var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "ro
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
 var MenuGroup = function MenuGroup(_ref) {
-  var maxWidth = _ref.maxWidth,
+  var isLoading = _ref.isLoading,
+    maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
     minHeight = _ref.minHeight,
     maxHeight = _ref.maxHeight,
@@ -36,19 +43,17 @@ var MenuGroup = function MenuGroup(_ref) {
     value: spacing
   }, (0, _react.jsx)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "border"
-  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
-    UNSAFE_style: {
+  }, (0, _react.jsx)("div", (0, _extends2.default)({
+    "aria-busy": isLoading,
+    style: {
       minWidth: minWidth,
       maxWidth: maxWidth,
       minHeight: minHeight,
       maxHeight: maxHeight
     },
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    testId: testId,
+    css: baseStyles,
+    "data-testid": testId,
     role: role,
-    position: "static",
     className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));

package/dist/es2019/menu-section/menu-group.js

@@ -1,9 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
+const baseStyles = css({
+  display: 'flex',
+  position: 'static',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
+
 /**
  * __Menu group__
  *
@@ -13,6 +19,7 @@ import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
 const MenuGroup = ({
+  isLoading,
   maxWidth,
   minWidth,
   minHeight,
@@ -30,19 +37,17 @@ const MenuGroup = ({
   value: spacing
 }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
   value: "border"
-}, jsx(Box, _extends({
-  UNSAFE_style: {
+}, jsx("div", _extends({
+  "aria-busy": isLoading,
+  style: {
     minWidth,
     maxWidth,
     minHeight,
     maxHeight
   },
-  display: "flex",
-  flexDirection: "column",
-  overflow: "auto",
-  testId: testId,
+  css: baseStyles,
+  "data-testid": testId,
   role: role,
-  position: "static",
   className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, rest))));

package/dist/esm/menu-section/menu-group.js

@@ -1,11 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
+var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
+var baseStyles = css({
+  display: 'flex',
+  position: 'static',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
+
 /**
  * __Menu group__
  *
@@ -15,7 +21,8 @@ import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
 var MenuGroup = function MenuGroup(_ref) {
-  var maxWidth = _ref.maxWidth,
+  var isLoading = _ref.isLoading,
+    maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
     minHeight = _ref.minHeight,
     maxHeight = _ref.maxHeight,
@@ -29,19 +36,17 @@ var MenuGroup = function MenuGroup(_ref) {
     value: spacing
   }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "border"
-  }, jsx(Box, _extends({
-    UNSAFE_style: {
+  }, jsx("div", _extends({
+    "aria-busy": isLoading,
+    style: {
       minWidth: minWidth,
       maxWidth: maxWidth,
       minHeight: minHeight,
       maxHeight: maxHeight
     },
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    testId: testId,
+    css: baseStyles,
+    "data-testid": testId,
     role: role,
-    position: "static",
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));

package/dist/types/menu-section/menu-group.d.ts

@@ -9,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

package/dist/types/types.d.ts

@@ -46,6 +46,10 @@ export interface MenuGroupProps extends MenuGroupSizing {
      * should generally be `Section` components.
      */
     children: React.ReactNode;
+    /**
+     * Used for telling assistive technologies that the menu group is loading.
+     */
+    isLoading?: boolean;
     /**
      * Configure the density of the MenuGroup content.
      */

package/dist/types-ts4.5/menu-section/menu-group.d.ts

@@ -9,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

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

@@ -46,6 +46,10 @@ export interface MenuGroupProps extends MenuGroupSizing {
      * should generally be `Section` components.
      */
     children: React.ReactNode;
+    /**
+     * Used for telling assistive technologies that the menu group is loading.
+     */
+    isLoading?: boolean;
     /**
      * Configure the density of the MenuGroup content.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,13 +26,12 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^2.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.2.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.16.0",
+    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -142,6 +142,7 @@ export interface LinkItemProps extends BaseItemProps {
 
 // @public
 export const MenuGroup: ({
+  isLoading,
   maxWidth,
   minWidth,
   minHeight,
@@ -156,6 +157,7 @@ export const MenuGroup: ({
 // @public (undocumented)
 export interface MenuGroupProps extends MenuGroupSizing {
   children: React.ReactNode;
+  isLoading?: boolean;
   onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
   role?: string;
   spacing?: SpacingMode;

package/tmp/api-report-tmp.d.ts

@@ -113,11 +113,12 @@ export interface LinkItemProps extends BaseItemProps {
 }
 
 // @public
-export const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+export const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 export interface MenuGroupProps extends MenuGroupSizing {
     children: React.ReactNode;
+    isLoading?: boolean;
     onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
     role?: string;
     spacing?: SpacingMode;