@atlaskit/menu 1.2.4 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/menu
 
+## 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
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
 ## 1.2.4
 
 ### 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)();
@@ -65,7 +67,7 @@ var wordBreakStyles = (0, _core.css)({
 });
 var descriptionStyles = (0, _core.css)({
   marginTop: itemDescriptionSpacing,
-  color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
   fontSize: _typography.headingSizes.h200.size
 });
 var primitiveStyles = (0, _core.css)({
@@ -98,11 +100,11 @@ var unselectedStyles = (0, _core.css)({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N20, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"),
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.N30, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -115,19 +117,19 @@ var disabledStyles = (0, _core.css)({
   }
 });
 var selectedStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-selected-resting, ".concat(_colors.N20, ")"),
+  backgroundColor: "var(--ds-background-brand, ".concat(_colors.N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
-  color: "var(--ds-text-selected, currentColor)",
+  color: "var(--ds-text-brand, currentColor)",
   ':visited': {
-    color: "var(--ds-text-selected, currentColor)"
+    color: "var(--ds-text-brand, currentColor)"
   },
   ':hover': {
-    backgroundColor: "var(--ds-background-selected-hover, ".concat(_colors.N20, ")"),
-    color: "var(--ds-text-selected, currentColor)"
+    backgroundColor: "var(--ds-background-brand-hovered, ".concat(_colors.N20, ")"),
+    color: "var(--ds-text-brand, currentColor)"
   },
   ':active': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.N30, ")"),
-    color: "var(--ds-text-selected, currentColor)"
+    backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.N30, ")"),
+    color: "var(--ds-text-brand, currentColor)"
   }
 });
 /**

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-lowEmphasis, ".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

@@ -22,7 +22,7 @@ var skeletonStyles = (0, _core.css)({
     display: 'block',
     width: '30%',
     height: (0, _constants.gridSize)(),
-    backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat((0, _colors.skeleton)(), ")"),
+    backgroundColor: "var(--ds-background-neutral, ".concat((0, _colors.skeleton)(), ")"),
     borderRadius: 100,
     content: '""'
   }

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

@@ -26,7 +26,7 @@ var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
-var skeletonColor = "var(--ds-background-subtleNeutral-resting, ".concat((0, _colors.skeleton)(), ")");
+var skeletonColor = "var(--ds-background-neutral, ".concat((0, _colors.skeleton)(), ")");
 var skeletonStyles = (0, _core.css)({
   display: 'flex',
   minHeight: itemMinHeight,
@@ -111,7 +111,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
       '--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
   });
 };

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/menu-section/section.js

@@ -76,7 +76,7 @@ var unscrollableStyles = (0, _core.css)({
   flexShrink: 0
 });
 var separatorStyles = (0, _core.css)({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30A, ")"), ")")
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30A, ")"), ")")
 });
 var noSeparatorStyles = (0, _core.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.4",
+	"version": "1.3.0",
 	"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();
@@ -49,7 +50,7 @@ const wordBreakStyles = css({
 });
 const descriptionStyles = css({
   marginTop: itemDescriptionSpacing,
-  color: `var(--ds-text-lowEmphasis, ${N200})`,
+  color: `var(--ds-text-subtlest, ${N200})`,
   fontSize: headingSizes.h200.size
 });
 const primitiveStyles = css({
@@ -82,11 +83,11 @@ const unselectedStyles = css({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: `var(--ds-background-transparentNeutral-hover, ${N20})`,
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`,
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${N30})`,
+    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`,
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -99,19 +100,19 @@ const disabledStyles = css({
   }
 });
 const selectedStyles = css({
-  backgroundColor: `var(--ds-background-selected-resting, ${N20})`,
+  backgroundColor: `var(--ds-background-brand, ${N20})`,
   // Fallback set as babel plugin inserts one otherwise
-  color: "var(--ds-text-selected, currentColor)",
+  color: "var(--ds-text-brand, currentColor)",
   ':visited': {
-    color: "var(--ds-text-selected, currentColor)"
+    color: "var(--ds-text-brand, currentColor)"
   },
   ':hover': {
-    backgroundColor: `var(--ds-background-selected-hover, ${N20})`,
-    color: "var(--ds-text-selected, currentColor)"
+    backgroundColor: `var(--ds-background-brand-hovered, ${N20})`,
+    color: "var(--ds-text-brand, currentColor)"
   },
   ':active': {
-    backgroundColor: `var(--ds-background-selected-pressed, ${N30})`,
-    color: "var(--ds-text-selected, currentColor)"
+    backgroundColor: `var(--ds-background-brand-pressed, ${N30})`,
+    color: "var(--ds-text-brand, currentColor)"
   }
 });
 /**

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-lowEmphasis, ${N200})`,
+  color: `var(--ds-text-subtle, ${N300})`,
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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

@@ -9,7 +9,7 @@ const skeletonStyles = css({
     display: 'block',
     width: '30%',
     height: gridSize(),
-    backgroundColor: `var(--ds-background-subtleNeutral-resting, ${skeletonColorFn()})`,
+    backgroundColor: `var(--ds-background-neutral, ${skeletonColorFn()})`,
     borderRadius: 100,
     content: '""'
   }

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

@@ -13,7 +13,7 @@ const skeletonItemElemSize = gridSize * 2.5;
 const itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 const skeletonTextBorderRadius = 100;
 const skeletonContentHeight = 9;
-const skeletonColor = `var(--ds-background-subtleNeutral-resting, ${skeletonColorFn()})`;
+const skeletonColor = `var(--ds-background-neutral, ${skeletonColorFn()})`;
 const skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,
@@ -97,7 +97,7 @@ const SkeletonItem = ({
     '--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
 });
 

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/menu-section/section.js

@@ -59,7 +59,7 @@ const unscrollableStyles = css({
   flexShrink: 0
 });
 const separatorStyles = css({
-  borderTop: `2px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30A})`})`
+  borderTop: `2px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
 });
 const noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.4",
+	"version": "1.3.0",
 	"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();
@@ -51,7 +53,7 @@ var wordBreakStyles = css({
 });
 var descriptionStyles = css({
   marginTop: itemDescriptionSpacing,
-  color: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
   fontSize: headingSizes.h200.size
 });
 var primitiveStyles = css({
@@ -84,11 +86,11 @@ var unselectedStyles = css({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(N20, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(N30, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -101,19 +103,19 @@ var disabledStyles = css({
   }
 });
 var selectedStyles = css({
-  backgroundColor: "var(--ds-background-selected-resting, ".concat(N20, ")"),
+  backgroundColor: "var(--ds-background-brand, ".concat(N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
-  color: "var(--ds-text-selected, currentColor)",
+  color: "var(--ds-text-brand, currentColor)",
   ':visited': {
-    color: "var(--ds-text-selected, currentColor)"
+    color: "var(--ds-text-brand, currentColor)"
   },
   ':hover': {
-    backgroundColor: "var(--ds-background-selected-hover, ".concat(N20, ")"),
-    color: "var(--ds-text-selected, currentColor)"
+    backgroundColor: "var(--ds-background-brand-hovered, ".concat(N20, ")"),
+    color: "var(--ds-text-brand, currentColor)"
   },
   ':active': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(N30, ")"),
-    color: "var(--ds-text-selected, currentColor)"
+    backgroundColor: "var(--ds-background-brand-pressed, ".concat(N30, ")"),
+    color: "var(--ds-text-brand, currentColor)"
   }
 });
 /**

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-lowEmphasis, ".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

@@ -9,7 +9,7 @@ var skeletonStyles = css({
     display: 'block',
     width: '30%',
     height: gridSize(),
-    backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(skeletonColorFn(), ")"),
+    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColorFn(), ")"),
     borderRadius: 100,
     content: '""'
   }

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

@@ -13,7 +13,7 @@ var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
-var skeletonColor = "var(--ds-background-subtleNeutral-resting, ".concat(skeletonColorFn(), ")");
+var skeletonColor = "var(--ds-background-neutral, ".concat(skeletonColorFn(), ")");
 var skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,
@@ -98,7 +98,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
       '--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
   });
 };

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/menu-section/section.js

@@ -61,7 +61,7 @@ var unscrollableStyles = css({
   flexShrink: 0
 });
 var separatorStyles = css({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30A, ")"), ")")
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30A, ")"), ")")
 });
 var noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/esm/version.json

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

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.4",
+  "version": "1.3.0",
   "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.5.0",
+    "@atlaskit/tokens": "^0.7.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",