@atlaskit/menu 1.2.6 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/menu
 
+## 1.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.3.1
+
+### Patch Changes
+
+- [`59e2178901f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/59e2178901f) - The `isShimmering` prop for skeleton items has been fixed, resolving a regression in version 1.2.0.
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
+## 1.3.0
+
+### Minor Changes
+
+- [`77c46ec96a7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/77c46ec96a7) - Adds a prop for `role` to the MenuGroup component that acts as you'd expect the HTML attribute to act. You are now able to override the accessibility role for the element.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.6
 
 ### Patch Changes

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -117,19 +117,19 @@ var disabledStyles = (0, _core.css)({
   }
 });
 var selectedStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-brand, ".concat(_colors.N20, ")"),
+  backgroundColor: "var(--ds-background-selected, ".concat(_colors.N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
-  color: "var(--ds-text-brand, currentColor)",
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    color: "var(--ds-text-brand, currentColor)"
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: "var(--ds-background-brand-hovered, ".concat(_colors.N20, ")"),
-    color: "var(--ds-text-brand, currentColor)"
+    backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.N20, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.N30, ")"),
-    color: "var(--ds-text-brand, currentColor)"
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.N30, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**

package/dist/cjs/internal/components/skeleton-shimmer.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+/** @jsx jsx */
+
+/**
+ * This color is mirrored in:
+ * packages/design-system/theme/src/colors.tsx
+ *
+ * Please update both.
+ */
+var skeletonColor = "var(--ds-background-neutral, ".concat(_colors.N20A, ")");
+/**
+ * These keyframes are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ *
+ * Please update both.
+ */
+
+var shimmerKeyframes = (0, _core.keyframes)({
+  from: {
+    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColor, ")")
+  },
+  to: {
+    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")
+  }
+});
+/**
+ * These styles are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ *
+ * Please update both.
+ */
+
+var shimmerStyles = (0, _core.css)({
+  '::before, ::after': {
+    animationDirection: 'alternate',
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationName: "".concat(shimmerKeyframes),
+    animationTimingFunction: 'linear',
+    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColor, ")")
+  }
+});
+/**
+ * __Skeleton shimmer__
+ *
+ * A skeleton shimmer is the animation shown on loading skeletons for
+ * perceived performance and user satisfaction.
+ *
+ * This component provides a `className` through render props. This value will
+ * have type:
+ * + `string`, when `isShimmering={true}`.
+ * + `undefined`, when `isShimmering={false}`.
+ *
+ * @internal
+ */
+
+var SkeletonShimmer = function SkeletonShimmer(_ref) {
+  var children = _ref.children,
+      _ref$isShimmering = _ref.isShimmering,
+      isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering;
+  return (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
+    var css = _ref2.css;
+    return children({
+      className: isShimmering ? css(shimmerStyles) : undefined
+    });
+  });
+};
+
+var _default = SkeletonShimmer;
+exports.default = _default;

package/dist/cjs/menu-item/skeleton-heading-item.js

@@ -15,6 +15,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
+
 /** @jsx jsx */
 var skeletonStyles = (0, _core.css)({
   padding: "0 ".concat((0, _constants.gridSize)() * 2.5, "px"),
@@ -47,18 +49,26 @@ var customWidthStyles = (0, _core.css)({
  */
 
 var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
-  var testId = _ref.testId,
+  var _ref$isShimmering = _ref.isShimmering,
+      isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
+      testId = _ref.testId,
       width = _ref.width,
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
-  return (0, _core.jsx)("div", {
-    style: {
-      '--width': width
-    },
-    css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
-    "data-ds--menu--skeleton-heading-item": true,
-    "data-testid": testId
+  return (0, _core.jsx)(_skeletonShimmer.default, {
+    isShimmering: isShimmering
+  }, function (_ref2) {
+    var className = _ref2.className;
+    return (0, _core.jsx)("div", {
+      className: className,
+      style: {
+        '--width': width
+      },
+      css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      cssFn(undefined)],
+      "data-ds--menu--skeleton-heading-item": true,
+      "data-testid": testId
+    });
   });
 };
 

package/dist/cjs/menu-item/skeleton-item.js

@@ -15,6 +15,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
+
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var borderRadius = (0, _constants.borderRadius)();
@@ -102,17 +104,25 @@ var iconStyles = (0, _core.css)({
 var SkeletonItem = function SkeletonItem(_ref) {
   var hasAvatar = _ref.hasAvatar,
       hasIcon = _ref.hasIcon,
+      _ref$isShimmering = _ref.isShimmering,
+      isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
       testId = _ref.testId,
       width = _ref.width,
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
-  return (0, _core.jsx)("div", {
-    style: {
-      '--width': width
-    },
-    css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn()],
-    "data-testid": testId
+  return (0, _core.jsx)(_skeletonShimmer.default, {
+    isShimmering: isShimmering
+  }, function (_ref2) {
+    var className = _ref2.className;
+    return (0, _core.jsx)("div", {
+      className: className,
+      style: {
+        '--width': width
+      },
+      css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      cssFn()],
+      "data-testid": testId
+    });
   });
 };
 

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _core = require("@emotion/core");
 
-var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId"];
+var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
 var groupStyles = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column',
@@ -34,6 +34,7 @@ var MenuGroup = function MenuGroup(_ref) {
       minHeight = _ref.minHeight,
       maxHeight = _ref.maxHeight,
       testId = _ref.testId,
+      role = _ref.role,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)("div", (0, _extends2.default)({
     style: {
@@ -43,7 +44,8 @@ var MenuGroup = function MenuGroup(_ref) {
       maxHeight: maxHeight
     },
     css: groupStyles,
-    "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    "data-testid": testId,
+    role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, rest));
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.6",
+	"version": "1.3.2",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -100,19 +100,19 @@ const disabledStyles = css({
   }
 });
 const selectedStyles = css({
-  backgroundColor: `var(--ds-background-brand, ${N20})`,
+  backgroundColor: `var(--ds-background-selected, ${N20})`,
   // Fallback set as babel plugin inserts one otherwise
-  color: "var(--ds-text-brand, currentColor)",
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    color: "var(--ds-text-brand, currentColor)"
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: `var(--ds-background-brand-hovered, ${N20})`,
-    color: "var(--ds-text-brand, currentColor)"
+    backgroundColor: `var(--ds-background-selected-hovered, ${N20})`,
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: `var(--ds-background-brand-pressed, ${N30})`,
-    color: "var(--ds-text-brand, currentColor)"
+    backgroundColor: `var(--ds-background-selected-pressed, ${N30})`,
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**

package/dist/es2019/internal/components/skeleton-shimmer.js

@@ -0,0 +1,69 @@
+/** @jsx jsx */
+import { ClassNames, css, jsx, keyframes } from '@emotion/core';
+import { N20A, N30A } from '@atlaskit/theme/colors';
+
+/**
+ * This color is mirrored in:
+ * packages/design-system/theme/src/colors.tsx
+ *
+ * Please update both.
+ */
+const skeletonColor = `var(--ds-background-neutral, ${N20A})`;
+/**
+ * These keyframes are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ *
+ * Please update both.
+ */
+
+const shimmerKeyframes = keyframes({
+  from: {
+    backgroundColor: `var(--ds-background-neutral, ${skeletonColor})`
+  },
+  to: {
+    backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`
+  }
+});
+/**
+ * These styles are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ *
+ * Please update both.
+ */
+
+const shimmerStyles = css({
+  '::before, ::after': {
+    animationDirection: 'alternate',
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationName: `${shimmerKeyframes}`,
+    animationTimingFunction: 'linear',
+    backgroundColor: `var(--ds-background-neutral, ${skeletonColor})`
+  }
+});
+/**
+ * __Skeleton shimmer__
+ *
+ * A skeleton shimmer is the animation shown on loading skeletons for
+ * perceived performance and user satisfaction.
+ *
+ * This component provides a `className` through render props. This value will
+ * have type:
+ * + `string`, when `isShimmering={true}`.
+ * + `undefined`, when `isShimmering={false}`.
+ *
+ * @internal
+ */
+
+const SkeletonShimmer = ({
+  children,
+  isShimmering = false
+}) => {
+  return jsx(ClassNames, null, ({
+    css
+  }) => children({
+    className: isShimmering ? css(shimmerStyles) : undefined
+  }));
+};
+
+export default SkeletonShimmer;

package/dist/es2019/menu-item/skeleton-heading-item.js

@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 const skeletonStyles = css({
   padding: `0 ${gridSize() * 2.5}px`,
   '::after': {
@@ -34,10 +35,16 @@ const customWidthStyles = css({
  */
 
 const SkeletonHeadingItem = ({
+  isShimmering = false,
   testId,
   width,
   cssFn = noop
+}) => jsx(SkeletonShimmer, {
+  isShimmering: isShimmering
+}, ({
+  className
 }) => jsx("div", {
+  className: className,
   style: {
     '--width': width
   },
@@ -45,6 +52,6 @@ const SkeletonHeadingItem = ({
   cssFn(undefined)],
   "data-ds--menu--skeleton-heading-item": true,
   "data-testid": testId
-});
+}));
 
 export default SkeletonHeadingItem;

package/dist/es2019/menu-item/skeleton-item.js

@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 const gridSize = gridSizeFn();
 const borderRadius = borderRadiusFn();
 const itemElemSpacing = gridSize * 1.5;
@@ -89,16 +90,22 @@ const iconStyles = css({
 const SkeletonItem = ({
   hasAvatar,
   hasIcon,
+  isShimmering = false,
   testId,
   width,
   cssFn = noop
+}) => jsx(SkeletonShimmer, {
+  isShimmering: isShimmering
+}, ({
+  className
 }) => jsx("div", {
+  className: className,
   style: {
     '--width': width
   },
   css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
   cssFn()],
   "data-testid": testId
-});
+}));
 
 export default SkeletonItem;

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

@@ -22,6 +22,7 @@ const MenuGroup = ({
   minHeight,
   maxHeight,
   testId,
+  role,
   ...rest
 }) => jsx("div", _extends({
   style: {
@@ -31,7 +32,8 @@ const MenuGroup = ({
     maxHeight
   },
   css: groupStyles,
-  "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  "data-testid": testId,
+  role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
 }, rest));
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.6",
+	"version": "1.3.2",
 	"sideEffects": false
 }

package/dist/esm/internal/components/menu-item-primitive.js

@@ -103,19 +103,19 @@ var disabledStyles = css({
   }
 });
 var selectedStyles = css({
-  backgroundColor: "var(--ds-background-brand, ".concat(N20, ")"),
+  backgroundColor: "var(--ds-background-selected, ".concat(N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
-  color: "var(--ds-text-brand, currentColor)",
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    color: "var(--ds-text-brand, currentColor)"
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: "var(--ds-background-brand-hovered, ".concat(N20, ")"),
-    color: "var(--ds-text-brand, currentColor)"
+    backgroundColor: "var(--ds-background-selected-hovered, ".concat(N20, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: "var(--ds-background-brand-pressed, ".concat(N30, ")"),
-    color: "var(--ds-text-brand, currentColor)"
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(N30, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**

package/dist/esm/internal/components/skeleton-shimmer.js

@@ -0,0 +1,70 @@
+/** @jsx jsx */
+import { ClassNames, css, jsx, keyframes } from '@emotion/core';
+import { N20A, N30A } from '@atlaskit/theme/colors';
+
+/**
+ * This color is mirrored in:
+ * packages/design-system/theme/src/colors.tsx
+ *
+ * Please update both.
+ */
+var skeletonColor = "var(--ds-background-neutral, ".concat(N20A, ")");
+/**
+ * These keyframes are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ *
+ * Please update both.
+ */
+
+var shimmerKeyframes = keyframes({
+  from: {
+    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColor, ")")
+  },
+  to: {
+    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30A, ")")
+  }
+});
+/**
+ * These styles are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ *
+ * Please update both.
+ */
+
+var shimmerStyles = css({
+  '::before, ::after': {
+    animationDirection: 'alternate',
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationName: "".concat(shimmerKeyframes),
+    animationTimingFunction: 'linear',
+    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColor, ")")
+  }
+});
+/**
+ * __Skeleton shimmer__
+ *
+ * A skeleton shimmer is the animation shown on loading skeletons for
+ * perceived performance and user satisfaction.
+ *
+ * This component provides a `className` through render props. This value will
+ * have type:
+ * + `string`, when `isShimmering={true}`.
+ * + `undefined`, when `isShimmering={false}`.
+ *
+ * @internal
+ */
+
+var SkeletonShimmer = function SkeletonShimmer(_ref) {
+  var children = _ref.children,
+      _ref$isShimmering = _ref.isShimmering,
+      isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering;
+  return jsx(ClassNames, null, function (_ref2) {
+    var css = _ref2.css;
+    return children({
+      className: isShimmering ? css(shimmerStyles) : undefined
+    });
+  });
+};
+
+export default SkeletonShimmer;

package/dist/esm/menu-item/skeleton-heading-item.js

@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 var skeletonStyles = css({
   padding: "0 ".concat(gridSize() * 2.5, "px"),
   '::after': {
@@ -34,18 +35,26 @@ var customWidthStyles = css({
  */
 
 var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
-  var testId = _ref.testId,
+  var _ref$isShimmering = _ref.isShimmering,
+      isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
+      testId = _ref.testId,
       width = _ref.width,
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn;
-  return jsx("div", {
-    style: {
-      '--width': width
-    },
-    css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
-    "data-ds--menu--skeleton-heading-item": true,
-    "data-testid": testId
+  return jsx(SkeletonShimmer, {
+    isShimmering: isShimmering
+  }, function (_ref2) {
+    var className = _ref2.className;
+    return jsx("div", {
+      className: className,
+      style: {
+        '--width': width
+      },
+      css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      cssFn(undefined)],
+      "data-ds--menu--skeleton-heading-item": true,
+      "data-testid": testId
+    });
   });
 };
 

package/dist/esm/menu-item/skeleton-item.js

@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 var gridSize = gridSizeFn();
 var borderRadius = borderRadiusFn();
 var itemElemSpacing = gridSize * 1.5;
@@ -89,17 +90,25 @@ var iconStyles = css({
 var SkeletonItem = function SkeletonItem(_ref) {
   var hasAvatar = _ref.hasAvatar,
       hasIcon = _ref.hasIcon,
+      _ref$isShimmering = _ref.isShimmering,
+      isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
       testId = _ref.testId,
       width = _ref.width,
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn;
-  return jsx("div", {
-    style: {
-      '--width': width
-    },
-    css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn()],
-    "data-testid": testId
+  return jsx(SkeletonShimmer, {
+    isShimmering: isShimmering
+  }, function (_ref2) {
+    var className = _ref2.className;
+    return jsx("div", {
+      className: className,
+      style: {
+        '--width': width
+      },
+      css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      cssFn()],
+      "data-testid": testId
+    });
   });
 };
 

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId"];
+var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
@@ -24,6 +24,7 @@ var MenuGroup = function MenuGroup(_ref) {
       minHeight = _ref.minHeight,
       maxHeight = _ref.maxHeight,
       testId = _ref.testId,
+      role = _ref.role,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return jsx("div", _extends({
@@ -34,7 +35,8 @@ var MenuGroup = function MenuGroup(_ref) {
       maxHeight: maxHeight
     },
     css: groupStyles,
-    "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    "data-testid": testId,
+    role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, rest));
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.6",
+	"version": "1.3.2",
 	"sideEffects": false
 }

package/dist/types/internal/components/skeleton-shimmer.d.ts

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+declare type SkeletonShimmerProps = {
+    children: ({ className }: {
+        className?: string;
+    }) => ReactNode;
+    isShimmering?: boolean;
+};
+/**
+ * __Skeleton shimmer__
+ *
+ * A skeleton shimmer is the animation shown on loading skeletons for
+ * perceived performance and user satisfaction.
+ *
+ * This component provides a `className` through render props. This value will
+ * have type:
+ * + `string`, when `isShimmering={true}`.
+ * + `undefined`, when `isShimmering={false}`.
+ *
+ * @internal
+ */
+declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => JSX.Element;
+export default SkeletonShimmer;

package/dist/types/menu-item/skeleton-heading-item.d.ts

@@ -8,5 +8,5 @@ import type { SkeletonHeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonHeadingItem: ({ testId, width, cssFn, }: SkeletonHeadingItemProps) => JSX.Element;
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => JSX.Element;
 export default SkeletonHeadingItem;

package/dist/types/menu-item/skeleton-item.d.ts

@@ -8,5 +8,5 @@ import type { SkeletonItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonItem: ({ hasAvatar, hasIcon, testId, width, cssFn, }: SkeletonItemProps) => JSX.Element;
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => JSX.Element;
 export default SkeletonItem;

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

@@ -8,5 +8,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, ...rest }: MenuGroupProps) => JSX.Element;
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, ...rest }: MenuGroupProps) => JSX.Element;
 export default MenuGroup;

package/dist/types/types.d.ts

@@ -45,6 +45,10 @@ export interface MenuGroupProps extends MenuGroupSizing {
      * should generally be `Section` components.
      */
     children: React.ReactNode;
+    /**
+     * Used to override the accessibility role for the element.
+     */
+    role?: string;
     /**
      * A `testId` prop is provided for specified elements,
      * which is a unique string that appears as a data attribute `data-testid` in the rendered code,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.2.6",
+  "version": "1.3.2",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
     "@atlaskit/ds-lib": "^1.4.0",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.0.0",
@@ -66,7 +66,7 @@
     "jscodeshift": "^0.13.0",
     "react-router-dom": "^4.2.2",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "3.9.6"
+    "typescript": "3.9.10"
   },
   "keywords": [
     "atlaskit",
@@ -89,5 +89,6 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "homepage": "https://atlassian.design/components/menu/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }