@atlaskit/menu 1.1.3 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @atlaskit/menu
 
+## 1.2.2
+
+### Patch Changes
+
+- [`2eeb5c46710`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2eeb5c46710) - Menu items can take `data-testid` directly again however we recommend to still use the officially supported `testId` prop instead. The `data-testid` prop was unintentionally removed in a previous version however will be removed as a breaking change in a later major version and remains not officially typed.
+
+## 1.2.1
+
+### Patch Changes
+
+- [`2b2290121eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2290121eb) - Raised the minimum version carat range of focus ring to latest.
+
+## 1.2.0
+
+### Minor Changes
+
+- [`213bfd77e61`](https://bitbucket.org/atlassian/atlassian-frontend/commits/213bfd77e61) - The DOM structure of menu item components has been flattened.
+  If you used CSS hacks (via className or cssFn) that targetted specific DOM nodes you may be broken.
+
+  Previously the structure looked like:
+
+  ```jsx
+  <button>
+    <div> // <-- this intermediate div has been removed
+      <span>
+        <span />
+      </span>
+    </div>
+  </button>
+  ```
+
+  Now it looks like:
+
+  ```jsx
+  <button>
+    <span>
+      <span />
+    </span>
+  </button>
+  ```
+
+- [`63888b03b49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63888b03b49) - Internal refactor to align style declarations to common techstack.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.1.4
+
+### Patch Changes
+
+- [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
+
 ## 1.1.3
 
 ### Patch Changes

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

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _typography = require("@atlaskit/theme/typography");
+
+var _tokens = require("@atlaskit/tokens");
+
+/** @jsx jsx */
+var defaultRender = function defaultRender(Component, props) {
+  return (0, _core.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 itemDescriptionSpacing = gridSize * 0.375;
+var itemMinHeight = gridSize * 5;
+var beforeElementStyles = (0, _core.css)({
+  display: 'flex',
+  marginRight: itemElemSpacing,
+  alignItems: 'center',
+  flexShrink: 0
+});
+var afterElementStyles = (0, _core.css)({
+  display: 'flex',
+  marginLeft: itemElemSpacing,
+  alignItems: 'center',
+  flexShrink: 0
+});
+var contentStyles = (0, _core.css)({
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  flexGrow: 1,
+  // Fix - avoid clipped text descenders when using standard 16px line-height
+  lineHeight: 1.22,
+  outline: 'none',
+  overflow: 'hidden',
+  textAlign: 'left'
+});
+var truncateStyles = (0, _core.css)({
+  display: 'block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var wordBreakStyles = (0, _core.css)({
+  wordBreak: 'break-word'
+});
+var descriptionStyles = (0, _core.css)({
+  marginTop: itemDescriptionSpacing,
+  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  fontSize: _typography.headingSizes.h200.size
+});
+var primitiveStyles = (0, _core.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  width: '100%',
+  minHeight: itemMinHeight,
+  margin: 0,
+  padding: "".concat(itemTopBottomPadding, "px ").concat(itemSidePadding, "px"),
+  alignItems: 'center',
+  border: 0,
+  fontSize: fontSize,
+  outline: 0,
+  textDecoration: 'none',
+  userSelect: 'none',
+  '::-moz-focus-inner': {
+    border: 0
+  },
+  ':hover': {
+    textDecoration: 'none'
+  }
+});
+var interactiveStyles = (0, _core.css)({
+  cursor: 'pointer'
+});
+var unselectedStyles = (0, _core.css)({
+  backgroundColor: 'transparent',
+  color: 'currentColor',
+  ':visited': {
+    color: 'currentColor'
+  },
+  ':hover': {
+    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20),
+    color: 'currentColor'
+  },
+  ':active': {
+    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.N30),
+    boxShadow: 'none',
+    color: 'currentColor'
+  }
+});
+var disabledStyles = (0, _core.css)({
+  cursor: 'not-allowed',
+  '&, :hover, :active': {
+    backgroundColor: 'transparent',
+    color: (0, _tokens.token)('color.text.disabled', _colors.N200)
+  }
+});
+var selectedStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.N20),
+  // Suppress the need for a fallback as selected color isn't used in the non-tokens world.
+  // When removing fallbacks make sure to remove this supression.
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: (0, _tokens.token)('color.text.selected'),
+  ':visited': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: (0, _tokens.token)('color.text.selected')
+  },
+  ':hover': {
+    backgroundColor: (0, _tokens.token)('color.background.selected.hover', _colors.N20),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: (0, _tokens.token)('color.text.selected')
+  },
+  ':active': {
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.N30),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: (0, _tokens.token)('color.text.selected')
+  }
+});
+/**
+ * __Menu item primitive__
+ *
+ * Menu item primitive contains all the styles for menu items,
+ * including support for selected, disabled, and interaction states.
+ *
+ * Using children as function prop you wire up this to your own host element.
+ *
+ * ```jsx
+ * <MenuItemPrimitive>
+ *   {({ children, ...props }) => <button {...props}>{children}</button>}
+ * </MenuItemPrimitive>
+ * ```
+ */
+
+var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      description = _ref.description,
+      iconAfter = _ref.iconAfter,
+      iconBefore = _ref.iconBefore,
+      overrides = _ref.overrides,
+      className = _ref.className,
+      _ref$shouldTitleWrap = _ref.shouldTitleWrap,
+      shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
+      _ref$shouldDescriptio = _ref.shouldDescriptionWrap,
+      shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? false : _ref$shouldDescriptio,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _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) {
+    var cn = _ref2.css,
+        cx = _ref2.cx;
+    return (0, _core.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", {
+        "data-item-elem-before": true,
+        css: beforeElementStyles
+      }, iconBefore), title && (0, _core.jsx)("span", {
+        css: contentStyles
+      }, renderTitle('span', {
+        children: title,
+        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        'data-item-title': true
+      }), description && (0, _core.jsx)("span", {
+        "data-item-description": true,
+        css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+      }, description)), iconAfter && (0, _core.jsx)("span", {
+        "data-item-elem-after": true,
+        css: afterElementStyles
+      }, iconAfter))
+    }));
+  });
+};
+
+var _default = MenuItemPrimitive;
+exports.default = _default;

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

@@ -15,18 +15,18 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _baseItem = _interopRequireDefault(require("../internal/components/base-item"));
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
-var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
+var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
 
-var _buttonItem = require("../internal/styles/menu-item/button-item");
+var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
 
 /** @jsx jsx */
 
 /**
  * __Button item__
  *
- * A button item is used to populate a menu with items that need to be a button element.
+ * A button item is used to populate a menu with items that are buttons.
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
@@ -35,9 +35,7 @@ var ButtonItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
 function (props, ref) {
   var children = props.children,
       _props$cssFn = props.cssFn,
-      cssFn = _props$cssFn === void 0 ? function () {
-    return {};
-  } : _props$cssFn,
+      cssFn = _props$cssFn === void 0 ? _noop.default : _props$cssFn,
       description = props.description,
       iconAfter = props.iconAfter,
       iconBefore = props.iconBefore,
@@ -51,35 +49,43 @@ function (props, ref) {
       onMouseDown = props.onMouseDown,
       shouldTitleWrap = props.shouldTitleWrap,
       shouldDescriptionWrap = props.shouldDescriptionWrap,
-      others = (0, _objectWithoutProperties2.default)(props, ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = (0, _objectWithoutProperties2.default)(props, ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
   var onMouseDownHandler = (0, _useBlurOnMouseDown.useBlurOnMouseDown)(onMouseDown);
 
   if (!children) {
     return null;
   }
 
-  return (0, _core.jsx)("button", (0, _extends2.default)({
-    css: [// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _buttonItem.buttonItemCSS)(isDisabled, isSelected), // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn({
-      isSelected: isSelected,
-      isDisabled: isDisabled
-    })],
-    type: "button",
-    "data-testid": testId,
-    disabled: isDisabled,
-    onClick: onClick,
-    onMouseDown: onMouseDownHandler,
-    ref: ref
-  }, others), (0, _core.jsx)(_baseItem.default // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
+  return (0, _core.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
     description: description,
+    title: children,
     shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap
-  }, children));
+    shouldDescriptionWrap: shouldDescriptionWrap,
+    css: // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    cssFn({
+      isSelected: isSelected,
+      isDisabled: isDisabled
+    })
+  }), function (_ref) {
+    var children = _ref.children,
+        className = _ref.className;
+    return (0, _core.jsx)("button", (0, _extends2.default)({
+      "data-testid": testId
+    }, rest, {
+      className: className,
+      ref: ref,
+      disabled: isDisabled,
+      onClick: onClick,
+      onMouseDown: onMouseDownHandler,
+      type: "button"
+    }), children);
+  });
 }));
 var _default = ButtonItem;
 exports.default = _default;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,20 +11,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _baseItem = _interopRequireDefault(require("../internal/components/base-item"));
-
-var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
-var _customItem = require("../internal/styles/menu-item/custom-item");
+var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
 
+/** @jsx jsx */
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
 }; // Dirty hack to get generics working with forward ref [1/2]
@@ -35,7 +30,7 @@ var preventEvent = function preventEvent(e) {
 /**
  * __Custom item__
  *
- * A custom item is used to populate a menu with items that need to be a custom element.
+ * A custom item is used to populate a menu with items that can be any element.
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/custom-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
@@ -43,9 +38,7 @@ var preventEvent = function preventEvent(e) {
 var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var Component = _ref.component,
       _ref$cssFn = _ref.cssFn,
-      cssFn = _ref$cssFn === void 0 ? function () {
-    return {};
-  } : _ref$cssFn,
+      cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       _ref$isSelected = _ref.isSelected,
@@ -67,31 +60,37 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_core.ClassNames, null, function (_ref2) {
-    var css = _ref2.css;
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return (0, _core.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    overrides: overrides,
+    description: description,
+    iconAfter: iconAfter,
+    title: children,
+    iconBefore: iconBefore,
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    shouldTitleWrap: shouldTitleWrap,
+    shouldDescriptionWrap: shouldDescriptionWrap // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
+    css: (0, _core.css)(cssFn({
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }))
+  }), function (_ref2) {
+    var children = _ref2.children,
+        className = _ref2.className;
+    return (0, _core.jsx)(Component, (0, _extends2.default)({
+      "data-testid": testId
+    }, rest, {
+      className: className,
       ref: ref,
-      "data-testid": testId,
       draggable: false,
-      className: css([(0, _customItem.customItemCSS)(isDisabled, isSelected), cssFn({
-        isDisabled: isDisabled,
-        isSelected: isSelected
-      })]),
       onDragStart: preventEvent,
       onMouseDown: isDisabled ? preventEvent : onMouseDownHandler,
       onClick: isDisabled ? preventEvent : onClick,
       tabIndex: isDisabled ? -1 : undefined,
       "aria-disabled": isDisabled
-    }, rest), /*#__PURE__*/_react.default.createElement(_baseItem.default // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    , {
-      overrides: overrides,
-      children: children,
-      description: description,
-      iconAfter: iconAfter,
-      iconBefore: iconBefore,
-      shouldTitleWrap: shouldTitleWrap,
-      shouldDescriptionWrap: shouldDescriptionWrap
-    }));
+    }), children);
   });
 }) // Dirty hack to get generics working with forward ref [2/2]
 );

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

@@ -15,10 +15,29 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _headingItem = require("../internal/styles/menu-item/heading-item");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
-/** @jsx jsx */
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _typography = require("@atlaskit/theme/typography");
+
+var _tokens = require("@atlaskit/tokens");
 
+/** @jsx jsx */
+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)({
+  padding: "0 ".concat(itemSidePadding, "px"),
+  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  fontSize: itemHeadingFontSize,
+  fontWeight: 700,
+  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
+  textTransform: 'uppercase'
+});
 /**
  * __Heading item__
  *
@@ -27,18 +46,17 @@ var _headingItem = require("../internal/styles/menu-item/heading-item");
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
+
 var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var children = _ref.children,
       testId = _ref.testId,
       id = _ref.id,
       _ref$cssFn = _ref.cssFn,
-      cssFn = _ref$cssFn === void 0 ? function () {
-    return {};
-  } : _ref$cssFn,
+      cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
       rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "testId", "id", "cssFn"]);
   return (0, _core.jsx)("div", (0, _extends2.default)({
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: [_headingItem.headingItemCSS, cssFn(undefined)],
+    css: [headingStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    cssFn(undefined)],
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
     id: id

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

@@ -15,11 +15,11 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _baseItem = _interopRequireDefault(require("../internal/components/base-item"));
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
-var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
+var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
 
-var _linkItem = require("../internal/styles/menu-item/link-item");
+var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
 
 /** @jsx jsx */
 var preventEvent = function preventEvent(e) {
@@ -36,59 +36,64 @@ var preventEvent = function preventEvent(e) {
 
 
 var LinkItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
-function (_ref, ref) {
-  var href = _ref.href,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["href"]);
-  var children = rest.children,
-      _rest$cssFn = rest.cssFn,
-      cssFn = _rest$cssFn === void 0 ? function () {
-    return {};
-  } : _rest$cssFn,
-      description = rest.description,
-      iconAfter = rest.iconAfter,
-      iconBefore = rest.iconBefore,
-      _rest$isDisabled = rest.isDisabled,
-      isDisabled = _rest$isDisabled === void 0 ? false : _rest$isDisabled,
-      _rest$isSelected = rest.isSelected,
-      isSelected = _rest$isSelected === void 0 ? false : _rest$isSelected,
-      onClick = rest.onClick,
-      testId = rest.testId,
-      overrides = rest.overrides,
-      onMouseDown = rest.onMouseDown,
-      shouldTitleWrap = rest.shouldTitleWrap,
-      shouldDescriptionWrap = rest.shouldDescriptionWrap,
-      others = (0, _objectWithoutProperties2.default)(rest, ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+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, ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
   var onMouseDownHandler = (0, _useBlurOnMouseDown.useBlurOnMouseDown)(onMouseDown);
 
   if (!children) {
     return null;
   }
 
-  return (0, _core.jsx)("a", (0, _extends2.default)({
-    ref: ref,
-    css: [// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _linkItem.linkItemCSS)(isDisabled, isSelected), // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn({
-      isSelected: isSelected,
-      isDisabled: isDisabled
-    })],
-    draggable: false,
-    href: isDisabled ? undefined : href,
-    "data-testid": testId,
-    onDragStart: preventEvent,
-    onMouseDown: isDisabled ? preventEvent : onMouseDownHandler,
-    onClick: isDisabled ? preventEvent : onClick,
-    "aria-current": isSelected ? 'page' : undefined,
-    "aria-disabled": isDisabled
-  }, others), (0, _core.jsx)(_baseItem.default // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
+  return (0, _core.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
+    isSelected: isSelected,
+    isDisabled: isDisabled,
     description: description,
     shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap
-  }, children));
+    shouldDescriptionWrap: shouldDescriptionWrap,
+    css: // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    cssFn({
+      isSelected: isSelected,
+      isDisabled: isDisabled
+    }),
+    title: children
+  }), function (_ref) {
+    var children = _ref.children,
+        className = _ref.className;
+    return (0, _core.jsx)("a", (0, _extends2.default)({
+      "data-testid": testId
+    }, rest, {
+      className: className,
+      href: isDisabled ? undefined : href,
+      draggable: false,
+      onDragStart: preventEvent,
+      onMouseDown: isDisabled ? preventEvent : onMouseDownHandler,
+      onClick: isDisabled ? preventEvent : onClick,
+      "aria-current": isSelected ? 'page' : undefined,
+      "aria-disabled": isDisabled,
+      ref: ref
+    }), children);
+  });
 }));
 var _default = LinkItem;
 exports.default = _default;