@atlaskit/menu 1.3.11 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/menu
 
+## 1.4.0
+
+### Minor Changes
+
+- [`3acf8a89149`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3acf8a89149) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.3.12
+
+### Patch Changes
+
+- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+
 ## 1.3.11
 
 ### Patch Changes

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 
@@ -22,30 +22,30 @@ var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 var defaultRender = function defaultRender(Component, props) {
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)(Component, props)
+    (0, _react2.jsx)(Component, props)
   );
 };
 
 var gridSize = (0, _constants.gridSize)();
 var fontSize = (0, _constants.fontSize)();
-var itemTopBottomPadding = gridSize;
-var itemSidePadding = gridSize * 2.5;
-var itemElemSpacing = gridSize * 1.5;
+var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
+var itemSidePadding = "var(--ds-scale-250, 20px)";
+var itemElemSpacing = "var(--ds-scale-150, 12px)";
 var itemDescriptionSpacing = gridSize * 0.375;
-var itemMinHeight = gridSize * 5;
-var beforeElementStyles = (0, _core.css)({
+var itemMinHeight = "var(--ds-scale-500, 40px)";
+var beforeElementStyles = (0, _react2.css)({
   display: 'flex',
   marginRight: itemElemSpacing,
   alignItems: 'center',
   flexShrink: 0
 });
-var afterElementStyles = (0, _core.css)({
+var afterElementStyles = (0, _react2.css)({
   display: 'flex',
   marginLeft: itemElemSpacing,
   alignItems: 'center',
   flexShrink: 0
 });
-var contentStyles = (0, _core.css)({
+var contentStyles = (0, _react2.css)({
   display: 'flex',
   justifyContent: 'center',
   flexDirection: 'column',
@@ -56,27 +56,28 @@ var contentStyles = (0, _core.css)({
   overflow: 'hidden',
   textAlign: 'left'
 });
-var truncateStyles = (0, _core.css)({
+var truncateStyles = (0, _react2.css)({
   display: 'block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var wordBreakStyles = (0, _core.css)({
+var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
 });
-var descriptionStyles = (0, _core.css)({
+var descriptionStyles = (0, _react2.css)({
   marginTop: itemDescriptionSpacing,
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
   fontSize: _typography.headingSizes.h200.size
 });
-var primitiveStyles = (0, _core.css)({
+var primitiveStyles = (0, _react2.css)({
   display: 'flex',
   boxSizing: 'border-box',
   width: '100%',
   minHeight: itemMinHeight,
-  margin: 0,
-  padding: "".concat(itemTopBottomPadding, "px ").concat(itemSidePadding, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
   alignItems: 'center',
   border: 0,
   fontSize: fontSize,
@@ -90,10 +91,10 @@ var primitiveStyles = (0, _core.css)({
     textDecoration: 'none'
   }
 });
-var interactiveStyles = (0, _core.css)({
+var interactiveStyles = (0, _react2.css)({
   cursor: 'pointer'
 });
-var unselectedStyles = (0, _core.css)({
+var unselectedStyles = (0, _react2.css)({
   backgroundColor: 'transparent',
   color: 'currentColor',
   ':visited': {
@@ -109,14 +110,14 @@ var unselectedStyles = (0, _core.css)({
     color: 'currentColor'
   }
 });
-var disabledStyles = (0, _core.css)({
+var disabledStyles = (0, _react2.css)({
   cursor: 'not-allowed',
   '&, :hover, :active': {
     backgroundColor: 'transparent',
     color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
   }
 });
-var selectedStyles = (0, _core.css)({
+var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, ".concat(_colors.N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
   color: "var(--ds-text-selected, currentColor)",
@@ -164,26 +165,26 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
       _ref$isSelected = _ref.isSelected,
       isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
   var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
-  return (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
+  return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref2) {
     var cn = _ref2.css,
         cx = _ref2.cx;
-    return (0, _core.jsx)(_focusRing.default, {
+    return (0, _react2.jsx)(_focusRing.default, {
       isInset: true
     }, children({
       className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
-      children: (0, _core.jsx)(_react.Fragment, null, iconBefore && (0, _core.jsx)("span", {
+      children: (0, _react2.jsx)(_react.Fragment, null, iconBefore && (0, _react2.jsx)("span", {
         "data-item-elem-before": true,
         css: beforeElementStyles
-      }, iconBefore), title && (0, _core.jsx)("span", {
+      }, iconBefore), title && (0, _react2.jsx)("span", {
         css: contentStyles
       }, renderTitle('span', {
         children: title,
         className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
         'data-item-title': true
-      }), description && (0, _core.jsx)("span", {
+      }), description && (0, _react2.jsx)("span", {
         "data-item-description": true,
         css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
-      }, description)), iconAfter && (0, _core.jsx)("span", {
+      }, description)), iconAfter && (0, _react2.jsx)("span", {
         "data-item-elem-after": true,
         css: afterElementStyles
       }, iconAfter))

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -17,7 +17,7 @@ var _colors = require("@atlaskit/theme/colors");
  *
  * Please update both.
  */
-var shimmerKeyframes = (0, _core.keyframes)({
+var shimmerKeyframes = (0, _react.keyframes)({
   from: {
     backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")")
   },
@@ -32,7 +32,7 @@ var shimmerKeyframes = (0, _core.keyframes)({
  * Please update both.
  */
 
-var shimmerStyles = (0, _core.css)({
+var shimmerStyles = (0, _react.css)({
   '::before, ::after': {
     animationDirection: 'alternate',
     animationDuration: '1.5s',
@@ -60,7 +60,7 @@ 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) {
+  return (0, _react.jsx)(_react.ClassNames, null, function (_ref2) {
     var css = _ref2.css;
     return children({
       className: isShimmering ? css(shimmerStyles) : undefined

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
@@ -54,7 +54,7 @@ function (props, ref) {
     return null;
   }
 
-  return (0, _core.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
     iconBefore: iconBefore,
@@ -73,7 +73,7 @@ function (props, ref) {
   }), function (_ref) {
     var children = _ref.children,
         className = _ref.className;
-    return (0, _core.jsx)("button", (0, _extends2.default)({
+    return (0, _react2.jsx)("button", (0, _extends2.default)({
       "data-testid": testId
     }, rest, {
       className: className,

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
@@ -59,7 +59,7 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     return null;
   }
 
-  return (0, _core.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
     description: description,
@@ -71,14 +71,14 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     ,
-    css: (0, _core.css)(cssFn({
+    css: (0, _react2.css)(cssFn({
       isDisabled: isDisabled,
       isSelected: isSelected
     }))
   }), function (_ref2) {
     var children = _ref2.children,
         className = _ref2.className;
-    return (0, _core.jsx)(Component, (0, _extends2.default)({
+    return (0, _react2.jsx)(Component, (0, _extends2.default)({
       "data-testid": testId
     }, rest, {
       className: className,

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
@@ -28,7 +28,7 @@ var gridSize = (0, _constants.gridSize)();
 var itemSidePadding = gridSize * 2.5;
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
-var headingStyles = (0, _core.css)({
+var headingStyles = (0, _react2.css)({
   padding: "0 ".concat(itemSidePadding, "px"),
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: itemHeadingFontSize,
@@ -52,9 +52,9 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: [headingStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
+    (0, _react2.css)(cssFn(undefined))],
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
     id: id

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
@@ -60,7 +60,7 @@ function (props, ref) {
     return null;
   }
 
-  return (0, _core.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
     iconBefore: iconBefore,
@@ -79,7 +79,7 @@ function (props, ref) {
   }), function (_ref) {
     var children = _ref.children,
         className = _ref.className;
-    return (0, _core.jsx)("a", (0, _extends2.default)({
+    return (0, _react2.jsx)("a", (0, _extends2.default)({
       "data-testid": testId
     }, rest, {
       className: className,

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

@@ -7,34 +7,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 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"),
+var skeletonStyles = (0, _react.css)({
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-250, 20px)"),
   '::after': {
     display: 'block',
     width: '30%',
-    height: (0, _constants.gridSize)(),
+    height: "var(--ds-scale-100, 8px)",
     backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
     borderRadius: 100,
     content: '""'
   }
 });
-var defaultWidthStyles = (0, _core.css)({
+var defaultWidthStyles = (0, _react.css)({
   '::after': {
     width: '30%'
   }
 });
-var customWidthStyles = (0, _core.css)({
+var customWidthStyles = (0, _react.css)({
   '::after': {
     width: 'var(--width)'
   }
@@ -55,17 +53,17 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
       width = _ref.width,
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
-  return (0, _core.jsx)(_skeletonShimmer.default, {
+  return (0, _react.jsx)(_skeletonShimmer.default, {
     isShimmering: isShimmering
   }, function (_ref2) {
     var className = _ref2.className;
-    return (0, _core.jsx)("div", {
+    return (0, _react.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)],
+      (0, _react.css)(cssFn(undefined))],
       "data-ds--menu--skeleton-heading-item": true,
       "data-testid": testId
     });

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
@@ -29,7 +29,7 @@ var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
 var skeletonColor = "var(--ds-skeleton, ".concat(_colors.N20A, ")");
-var skeletonStyles = (0, _core.css)({
+var skeletonStyles = (0, _react.css)({
   display: 'flex',
   minHeight: itemMinHeight,
   padding: "0 ".concat(itemPadding, "px"),
@@ -46,7 +46,7 @@ var skeletonStyles = (0, _core.css)({
     content: '""'
   }
 });
-var defaultWidthStyles = (0, _core.css)({
+var defaultWidthStyles = (0, _react.css)({
   ':nth-of-type(1n)::after': {
     flexBasis: '70%'
   },
@@ -66,12 +66,12 @@ var defaultWidthStyles = (0, _core.css)({
     flexBasis: '77%'
   }
 });
-var customWidthStyles = (0, _core.css)({
+var customWidthStyles = (0, _react.css)({
   '::after': {
     flexBasis: 'var(--width)'
   }
 });
-var beforeElementStyles = (0, _core.css)({
+var beforeElementStyles = (0, _react.css)({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
@@ -82,12 +82,12 @@ var beforeElementStyles = (0, _core.css)({
     content: '""'
   }
 });
-var avatarStyles = (0, _core.css)({
+var avatarStyles = (0, _react.css)({
   '::before': {
     borderRadius: '100%'
   }
 });
-var iconStyles = (0, _core.css)({
+var iconStyles = (0, _react.css)({
   '::before': {
     borderRadius: borderRadius
   }
@@ -110,17 +110,17 @@ var SkeletonItem = function SkeletonItem(_ref) {
       width = _ref.width,
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
-  return (0, _core.jsx)(_skeletonShimmer.default, {
+  return (0, _react.jsx)(_skeletonShimmer.default, {
     isShimmering: isShimmering
   }, function (_ref2) {
     var className = _ref2.className;
-    return (0, _core.jsx)("div", {
+    return (0, _react.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()],
+      (0, _react.css)(cssFn())],
       "data-testid": testId
     });
   });

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

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _dsExplorations = require("@atlaskit/ds-explorations");
 
@@ -34,7 +34,7 @@ var MenuGroup = function MenuGroup(_ref) {
       role = _ref.role,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (// @ts-ignore type of rest/children needs to be made stricter to fit in Box -- string shouldn't be allowed
-    (0, _core.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+    (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
       UNSAFE_style: {
         minWidth: minWidth,
         maxWidth: maxWidth,

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

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _menuGroup = _interopRequireDefault(require("./menu-group"));
 
@@ -27,7 +27,7 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
       minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)(_menuGroup.default, (0, _extends2.default)({
+    (0, _react.jsx)(_menuGroup.default, (0, _extends2.default)({
       maxWidth: maxWidth,
       minWidth: minWidth
     }, rest))

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -38,7 +38,7 @@ var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight
 var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
 var sectionPaddingTopBottom = gridSize * 0.75;
 var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-var sectionStyles = (0, _core.css)({
+var sectionStyles = (0, _react2.css)({
   '&::before, &::after': {
     display: 'block',
     height: sectionPaddingTopBottom,
@@ -68,17 +68,17 @@ var sectionStyles = (0, _core.css)({
     outlineOffset: -1
   }
 });
-var scrollableStyles = (0, _core.css)({
+var scrollableStyles = (0, _react2.css)({
   flexShrink: 1,
   overflow: 'auto'
 });
-var unscrollableStyles = (0, _core.css)({
+var unscrollableStyles = (0, _react2.css)({
   flexShrink: 0
 });
-var separatorStyles = (0, _core.css)({
+var separatorStyles = (0, _react2.css)({
   borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
 });
-var noSeparatorStyles = (0, _core.css)({
+var noSeparatorStyles = (0, _react2.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '[data-section] + &': {
@@ -103,13 +103,13 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       hasSeparator = _ref.hasSeparator,
       id = _ref.id,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var childrenMarkup = title !== undefined ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_headingItem.default // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+  var childrenMarkup = title !== undefined ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_headingItem.default // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
     cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
   }, title), children) : children;
-  return (0, _core.jsx)("div", (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
     id: id // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,

package/dist/cjs/version.json

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
-import { ClassNames, css, jsx } from '@emotion/core';
+import { ClassNames, css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -11,11 +11,11 @@ jsx(Component, props);
 
 const gridSize = gridSizeFn();
 const fontSize = fontSizeFn();
-const itemTopBottomPadding = gridSize;
-const itemSidePadding = gridSize * 2.5;
-const itemElemSpacing = gridSize * 1.5;
+const itemTopBottomPadding = "var(--ds-scale-100, 8px)";
+const itemSidePadding = "var(--ds-scale-250, 20px)";
+const itemElemSpacing = "var(--ds-scale-150, 12px)";
 const itemDescriptionSpacing = gridSize * 0.375;
-const itemMinHeight = gridSize * 5;
+const itemMinHeight = "var(--ds-scale-500, 40px)";
 const beforeElementStyles = css({
   display: 'flex',
   marginRight: itemElemSpacing,
@@ -58,8 +58,9 @@ const primitiveStyles = css({
   boxSizing: 'border-box',
   width: '100%',
   minHeight: itemMinHeight,
-  margin: 0,
-  padding: `${itemTopBottomPadding}px ${itemSidePadding}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  padding: `${itemTopBottomPadding} ${itemSidePadding}`,
   alignItems: 'center',
   border: 0,
   fontSize: fontSize,

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ClassNames, css, jsx, keyframes } from '@emotion/core';
+import { ClassNames, css, jsx, keyframes } from '@emotion/react';
 import { N20A, N30A } from '@atlaskit/theme/colors';
 
 /**

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N300 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -37,7 +37,7 @@ const HeadingItem = /*#__PURE__*/memo(({
 }) => {
   return jsx("div", _extends({
     css: [headingStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
+    css(cssFn(undefined))],
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
     id: id

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';