@atlaskit/menu 1.4.7 → 1.4.8

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

@@ -1,29 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-
 var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
-
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
 };
+
 /**
  * __Link item__
  *
@@ -32,34 +24,31 @@ var preventEvent = function preventEvent(e) {
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/link-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-
-
-var LinkItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
+var LinkItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
+// Type needed on props to extract types with extract react types.
 function (props, ref) {
   var children = props.children,
-      href = props.href,
-      _props$cssFn = props.cssFn,
-      cssFn = _props$cssFn === void 0 ? _noop.default : _props$cssFn,
-      description = props.description,
-      iconAfter = props.iconAfter,
-      iconBefore = props.iconBefore,
-      _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      _props$isSelected = props.isSelected,
-      isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
-      onClick = props.onClick,
-      testId = props.testId,
-      overrides = props.overrides,
-      onMouseDown = props.onMouseDown,
-      shouldTitleWrap = props.shouldTitleWrap,
-      shouldDescriptionWrap = props.shouldDescriptionWrap,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    href = props.href,
+    _props$cssFn = props.cssFn,
+    cssFn = _props$cssFn === void 0 ? _noop.default : _props$cssFn,
+    description = props.description,
+    iconAfter = props.iconAfter,
+    iconBefore = props.iconBefore,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isSelected = props.isSelected,
+    isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
+    onClick = props.onClick,
+    testId = props.testId,
+    overrides = props.overrides,
+    onMouseDown = props.onMouseDown,
+    shouldTitleWrap = props.shouldTitleWrap,
+    shouldDescriptionWrap = props.shouldDescriptionWrap,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onMouseDownHandler = onMouseDown;
-
   if (!children) {
     return null;
   }
-
   return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
@@ -70,7 +59,8 @@ function (props, ref) {
     description: description,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
-    css: // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    css:
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     cssFn({
       isSelected: isSelected,
       isDisabled: isDisabled
@@ -78,7 +68,7 @@ function (props, ref) {
     title: children
   }), function (_ref) {
     var children = _ref.children,
-        className = _ref.className;
+      className = _ref.className;
     return (0, _react2.jsx)("a", (0, _extends2.default)({
       "data-testid": testId
     }, rest, {

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

@@ -1,27 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
-
 /** @jsx jsx */
+
 var skeletonStyles = (0, _react.css)({
-  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-250, 20px)"),
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-250, 20px)"),
   '::after': {
     display: 'block',
     width: '30%',
-    height: "var(--ds-scale-100, 8px)",
+    height: "var(--ds-space-100, 8px)",
     backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
     borderRadius: 100,
     content: '""'
@@ -37,6 +32,7 @@ var customWidthStyles = (0, _react.css)({
     width: 'var(--width)'
   }
 });
+
 /**
  * __Skeleton heading item__
  *
@@ -45,14 +41,13 @@ var customWidthStyles = (0, _react.css)({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-
 var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
   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;
+    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, _react.jsx)(_skeletonShimmer.default, {
     isShimmering: isShimmering
   }, function (_ref2) {
@@ -62,13 +57,13 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
       style: {
         '--width': width
       },
-      css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       (0, _react.css)(cssFn(undefined))],
       "data-ds--menu--skeleton-heading-item": true,
       "data-testid": testId
     });
   });
 };
-
 var _default = SkeletonHeadingItem;
 exports.default = _default;

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

@@ -1,23 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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 gridSize = (0, _constants.gridSize)();
 var borderRadius = (0, _constants.borderRadius)();
 var itemElemSpacing = gridSize * 1.5;
@@ -92,6 +86,7 @@ var iconStyles = (0, _react.css)({
     borderRadius: borderRadius
   }
 });
+
 /**
  * __Skeleton item__
  *
@@ -100,16 +95,15 @@ var iconStyles = (0, _react.css)({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-
 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;
+    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, _react.jsx)(_skeletonShimmer.default, {
     isShimmering: isShimmering
   }, function (_ref2) {
@@ -119,12 +113,12 @@ var SkeletonItem = function SkeletonItem(_ref) {
       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
+      css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles,
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       (0, _react.css)(cssFn())],
       "data-testid": testId
     });
   });
 };
-
 var _default = SkeletonItem;
 exports.default = _default;

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

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("@emotion/react");
-
 var _dsExplorations = require("@atlaskit/ds-explorations");
-
 var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
-
 /**
  * __Menu group__
  *
@@ -27,13 +20,14 @@ var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "ro
  */
 var MenuGroup = function MenuGroup(_ref) {
   var maxWidth = _ref.maxWidth,
-      minWidth = _ref.minWidth,
-      minHeight = _ref.minHeight,
-      maxHeight = _ref.maxHeight,
-      testId = _ref.testId,
-      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
+    minWidth = _ref.minWidth,
+    minHeight = _ref.minHeight,
+    maxHeight = _ref.maxHeight,
+    testId = _ref.testId,
+    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, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
       UNSAFE_style: {
         minWidth: minWidth,
@@ -46,11 +40,10 @@ var MenuGroup = function MenuGroup(_ref) {
       overflow: "auto",
       testId: testId,
       role: role,
-      position: "static" // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+      position: "static"
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, rest))
   );
 };
-
 var _default = MenuGroup;
 exports.default = _default;

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

@@ -1,38 +1,31 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("@emotion/react");
-
 var _menuGroup = _interopRequireDefault(require("./menu-group"));
-
 var _excluded = ["maxWidth", "minWidth"];
-
 /**
  * @deprecated
  */
 var PopupMenuGroup = function PopupMenuGroup(_ref) {
   var _ref$maxWidth = _ref.maxWidth,
-      maxWidth = _ref$maxWidth === void 0 ? 800 : _ref$maxWidth,
-      _ref$minWidth = _ref.minWidth,
-      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
+    maxWidth = _ref$maxWidth === void 0 ? 800 : _ref$maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    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, _react.jsx)(_menuGroup.default, (0, _extends2.default)({
       maxWidth: maxWidth,
       minWidth: minWidth
     }, rest))
   );
 };
-
 var _default = PopupMenuGroup;
 exports.default = _default;

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

@@ -1,40 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
-
 var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"];
 var gridSize = (0, _constants.gridSize)();
 var itemHeadingTopMargin = gridSize * 2.5;
-var itemHeadingBottomMargin = gridSize * 0.75; // Skeleton content is slightly shorter than the real content.
+var itemHeadingBottomMargin = gridSize * 0.75;
+// Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
-
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var skeletonHeadingHeight = gridSize;
 var skeletonHeadingMarginOffset = 3;
-var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
-
+var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
+// We want to move the entire body up by 3px without affecting the height of the skeleton container.
 var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
 var sectionPaddingTopBottom = gridSize * 0.75;
 var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
@@ -85,6 +75,7 @@ var noSeparatorStyles = (0, _react2.css)({
     marginTop: -6
   }
 });
+
 /**
  * __Section__
  *
@@ -93,24 +84,25 @@ var noSeparatorStyles = (0, _react2.css)({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-
 var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
-      overrides = _ref.overrides,
-      title = _ref.title,
-      testId = _ref.testId,
-      isScrollable = _ref.isScrollable,
-      hasSeparator = _ref.hasSeparator,
-      id = _ref.id,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  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
+    overrides = _ref.overrides,
+    title = _ref.title,
+    testId = _ref.testId,
+    isScrollable = _ref.isScrollable,
+    hasSeparator = _ref.hasSeparator,
+    id = _ref.id,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  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, _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")
+    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.
     ,
     css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],

package/dist/cjs/version.json

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

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

@@ -5,21 +5,20 @@ import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-
-const defaultRender = (Component, props) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+const defaultRender = (Component, props) =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(Component, props);
-
 const fontSize = fontSizeFn();
-const itemMinHeight = "var(--ds-scale-500, 40px)";
+const itemMinHeight = "var(--ds-space-500, 40px)";
 const beforeElementStyles = css({
   display: 'flex',
-  marginRight: "var(--ds-scale-150, 12px)",
+  marginRight: "var(--ds-space-150, 12px)",
   alignItems: 'center',
   flexShrink: 0
 });
 const afterElementStyles = css({
   display: 'flex',
-  marginLeft: "var(--ds-scale-150, 12px)",
+  marginLeft: "var(--ds-space-150, 12px)",
   alignItems: 'center',
   flexShrink: 0
 });
@@ -45,7 +44,7 @@ const wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 const descriptionStyles = css({
-  marginTop: "var(--ds-scale-050, 3px)",
+  marginTop: "var(--ds-space-050, 3px)",
   color: `var(--ds-text-subtlest, ${N200})`,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   fontSize: headingSizes.h200.size
@@ -58,10 +57,9 @@ const primitiveStyles = css({
   boxSizing: 'border-box',
   width: '100%',
   minHeight: itemMinHeight,
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  margin: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  padding: `${"var(--ds-scale-100, 8px)"} ${"var(--ds-scale-250, 20px)"}`,
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-250, 20px)"}`,
   alignItems: 'center',
   border: 0,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
@@ -118,6 +116,7 @@ const selectedStyles = css({
     color: "var(--ds-text-selected, currentColor)"
   }
 });
+
 /**
  * __Menu item primitive__
  *
@@ -132,7 +131,6 @@ const selectedStyles = css({
  * </MenuItemPrimitive>
  * ```
  */
-
 const MenuItemPrimitive = ({
   children,
   title,
@@ -174,5 +172,4 @@ const MenuItemPrimitive = ({
     }));
   });
 };
-
 export default MenuItemPrimitive;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
+
 import { ClassNames, css, jsx, keyframes } from '@emotion/react';
 import { N20A, N30A } from '@atlaskit/theme/colors';
-
 /**
  * These keyframes are mirrored in:
  * packages/design-system/theme/src/constants.tsx
@@ -16,13 +16,13 @@ const shimmerKeyframes = keyframes({
     backgroundColor: `var(--ds-skeleton-subtle, ${N30A})`
   }
 });
+
 /**
  * These styles are mirrored in:
  * packages/design-system/theme/src/constants.tsx
  *
  * Please update both.
  */
-
 const shimmerStyles = css({
   '::before, ::after': {
     animationDirection: 'alternate',
@@ -33,6 +33,7 @@ const shimmerStyles = css({
     backgroundColor: `var(--ds-skeleton, ${N20A})`
   }
 });
+
 /**
  * __Skeleton shimmer__
  *
@@ -46,7 +47,6 @@ const shimmerStyles = css({
  *
  * @internal
  */
-
 const SkeletonShimmer = ({
   children,
   isShimmering = false
@@ -57,5 +57,4 @@ const SkeletonShimmer = ({
     className: isShimmering ? css(shimmerStyles) : undefined
   }));
 };
-
 export default SkeletonShimmer;

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

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
-
 /**
  * __Button item__
  *
@@ -14,7 +12,8 @@ import MenuItemPrimitive from '../internal/components/menu-item-primitive';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
+// Type needed on props to extract types with extract react types.
 (props, ref) => {
   const {
     children,
@@ -33,11 +32,9 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on
     ...rest
   } = props;
   const onMouseDownHandler = onMouseDown;
-
   if (!children) {
     return null;
   }
-
   return jsx(MenuItemPrimitive, _extends({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
@@ -49,7 +46,8 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on
     title: children,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
-    css: // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    css:
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     cssFn({
       isSelected,
       isDisabled

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

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
-
 const preventEvent = e => {
   e.preventDefault();
-}; // Dirty hack to get generics working with forward ref [1/2]
+};
 
+// Dirty hack to get generics working with forward ref [1/2]
 
 /**
  * __Custom item__
@@ -37,11 +37,9 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   const onMouseDownHandler = onMouseDown;
-
   if (!Component) {
     return null;
   }
-
   return jsx(MenuItemPrimitive, _extends({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
@@ -52,7 +50,8 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     isSelected: isSelected,
     isDisabled: isDisabled,
     shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    shouldDescriptionWrap: shouldDescriptionWrap
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     ,
     css: css(cssFn({
       isDisabled,
@@ -73,6 +72,8 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     tabIndex: isDisabled ? -1 : undefined,
     "aria-disabled": isDisabled
   }), children));
-}) // Dirty hack to get generics working with forward ref [2/2]
+})
+// Dirty hack to get generics working with forward ref [2/2]
 );
+
 export default CustomItem;