@atlaskit/menu 1.2.5 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/menu
 
+## 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
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+- [`27467f65f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27467f65f68) - [ux] Update headingStyle to color that passes WCAG AA color contrast
+- [`2066efabc65`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2066efabc65) - A fix for the `StatelessCSSFn` type so that it now correctly accetps a void argument.
+- [`96cfc6c1c7f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96cfc6c1c7f) - Deprecates the `cssFn` and `overrides` APIs in '@atlaskit/menu'. These APIs are not performant and allow unbounded customisation of the Menu components. These APIs will be removed in a future release.
+- Updated dependencies
+
 ## 1.2.5
 
 ### Patch Changes

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

@@ -21,7 +21,9 @@ var _typography = require("@atlaskit/theme/typography");
 
 /** @jsx jsx */
 var defaultRender = function defaultRender(Component, props) {
-  return (0, _core.jsx)(Component, props);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _core.jsx)(Component, props)
+  );
 };
 
 var gridSize = (0, _constants.gridSize)();
@@ -115,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/heading-item.js

@@ -30,7 +30,7 @@ var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _core.css)({
   padding: "0 ".concat(itemSidePadding, "px"),
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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(undefined)],
-    "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,9 @@ var MenuGroup = function MenuGroup(_ref) {
       maxHeight: maxHeight
     },
     css: groupStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

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

@@ -26,10 +26,12 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
       _ref$minWidth = _ref.minWidth,
       minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)(_menuGroup.default, (0, _extends2.default)({
-    maxWidth: maxWidth,
-    minWidth: minWidth
-  }, rest));
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _core.jsx)(_menuGroup.default, (0, _extends2.default)({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
 };
 
 var _default = PopupMenuGroup;

package/dist/cjs/version.json

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

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

@@ -6,7 +6,8 @@ import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 
-const defaultRender = (Component, props) => jsx(Component, props);
+const defaultRender = (Component, props) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(Component, props);
 
 const gridSize = gridSizeFn();
 const fontSize = fontSizeFn();
@@ -99,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/heading-item.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { N200 } from '@atlaskit/theme/colors';
+import { N300 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 const gridSize = gridSizeFn();
@@ -13,7 +13,7 @@ const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
   padding: `0 ${itemSidePadding}px`,
-  color: `var(--ds-text-subtlest, ${N200})`,
+  color: `var(--ds-text-subtle, ${N300})`,
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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(undefined)],
+  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,9 @@ const MenuGroup = ({
     maxHeight
   },
   css: groupStyles,
-  "data-testid": testId
+  "data-testid": testId,
+  role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
 }, rest));
 
 export default MenuGroup;

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

@@ -11,7 +11,8 @@ const PopupMenuGroup = ({
   maxWidth = 800,
   minWidth = 320,
   ...rest
-}) => jsx(MenuGroup, _extends({
+}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(MenuGroup, _extends({
   maxWidth: maxWidth,
   minWidth: minWidth
 }, rest));

package/dist/es2019/version.json

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

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

@@ -7,7 +7,9 @@ import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/
 import { headingSizes } from '@atlaskit/theme/typography';
 
 var defaultRender = function defaultRender(Component, props) {
-  return jsx(Component, props);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(Component, props)
+  );
 };
 
 var gridSize = gridSizeFn();
@@ -101,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/heading-item.js

@@ -6,7 +6,7 @@ var _excluded = ["children", "testId", "id", "cssFn"];
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { N200 } from '@atlaskit/theme/colors';
+import { N300 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 var gridSize = gridSizeFn();
@@ -15,7 +15,7 @@ var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
   padding: "0 ".concat(itemSidePadding, "px"),
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  color: "var(--ds-text-subtle, ".concat(N300, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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(undefined)],
-    "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,9 @@ var MenuGroup = function MenuGroup(_ref) {
       maxHeight: maxHeight
     },
     css: groupStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

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

@@ -16,10 +16,12 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
       minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx(MenuGroup, _extends({
-    maxWidth: maxWidth,
-    minWidth: minWidth
-  }, rest));
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(MenuGroup, _extends({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
 };
 
 export default PopupMenuGroup;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.5",
+	"version": "1.3.1",
 	"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

@@ -3,6 +3,9 @@ import { CSSObject } from '@emotion/core';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
 export interface TitleOverrides {
     render?: RenderFunction<{
         className?: string;
@@ -10,6 +13,9 @@ export interface TitleOverrides {
         'data-item-title': boolean;
     }>;
 }
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
 export interface Overrides {
     Title?: TitleOverrides;
 }
@@ -39,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,
@@ -78,6 +88,9 @@ export interface SectionProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
     overrides?: {
         HeadingItem?: {
             /**
@@ -102,6 +115,9 @@ export interface MenuItemPrimitiveProps {
     description: React.ReactNode | undefined;
     iconAfter: React.ReactNode | undefined;
     iconBefore: React.ReactNode | undefined;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
     overrides: Overrides | undefined;
     shouldTitleWrap: boolean | undefined;
     shouldDescriptionWrap: boolean | undefined;
@@ -113,6 +129,8 @@ export interface MenuItemProps {
     /**
      * A function that can be used to override the styles of the component.
      * It receives the current styles and state and expects a styles object.
+     *
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     cssFn?: CSSFn;
     /**
@@ -158,6 +176,8 @@ export interface MenuItemProps {
     testId?: string;
     /**
      * Custom overrides for the composed components.
+     *
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     overrides?: Overrides;
     /**
@@ -294,6 +314,8 @@ export interface HeadingItemProps {
     /**
      * A function that can be used to override the styles.
      * It receives the current styles and returns a customised styles object.
+     *
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     cssFn?: StatelessCSSFn;
     /**
@@ -333,6 +355,8 @@ export interface SkeletonHeadingItemProps {
     /**
      * A function that can be used to override the styles of this component.
      * It receives the current styles and returns a customized styles object.
+     *
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     cssFn?: StatelessCSSFn;
 }
@@ -346,8 +370,12 @@ export declare type ItemState = {
  * and should return a CSSObject.
  *
  * @see @atlaskit/menu/docs/85-overriding-item-styles
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
  */
-export interface CSSFn<TState = ItemState> {
+export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
     (currentState: TState): CSSObject | CSSObject[];
 }
-export declare type StatelessCSSFn = CSSFn<undefined>;
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export declare type StatelessCSSFn = CSSFn<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.2.5",
+  "version": "1.3.1",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,10 +35,10 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.2.0",
-    "@atlaskit/focus-ring": "^0.2.4",
+    "@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.8.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",
@@ -89,5 +89,6 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "homepage": "https://atlassian.design/components/menu/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }