@atlaskit/menu 1.1.2 → 1.2.1

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

@@ -0,0 +1,186 @@
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { ClassNames, css, jsx } from '@emotion/core';
+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';
+import { headingSizes } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
+
+var defaultRender = function defaultRender(Component, props) {
+  return jsx(Component, props);
+};
+
+var gridSize = gridSizeFn();
+var fontSize = fontSizeFn();
+var itemTopBottomPadding = gridSize;
+var itemSidePadding = gridSize * 2.5;
+var itemElemSpacing = gridSize * 1.5;
+var itemDescriptionSpacing = gridSize * 0.375;
+var itemMinHeight = gridSize * 5;
+var beforeElementStyles = css({
+  display: 'flex',
+  marginRight: itemElemSpacing,
+  alignItems: 'center',
+  flexShrink: 0
+});
+var afterElementStyles = css({
+  display: 'flex',
+  marginLeft: itemElemSpacing,
+  alignItems: 'center',
+  flexShrink: 0
+});
+var contentStyles = 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 = css({
+  display: 'block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var wordBreakStyles = css({
+  wordBreak: 'break-word'
+});
+var descriptionStyles = css({
+  marginTop: itemDescriptionSpacing,
+  color: token('color.text.lowEmphasis', N200),
+  fontSize: headingSizes.h200.size
+});
+var primitiveStyles = 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 = css({
+  cursor: 'pointer'
+});
+var unselectedStyles = css({
+  backgroundColor: 'transparent',
+  color: 'currentColor',
+  ':visited': {
+    color: 'currentColor'
+  },
+  ':hover': {
+    backgroundColor: token('color.background.transparentNeutral.hover', N20),
+    color: 'currentColor'
+  },
+  ':active': {
+    backgroundColor: token('color.background.transparentNeutral.pressed', N30),
+    boxShadow: 'none',
+    color: 'currentColor'
+  }
+});
+var disabledStyles = css({
+  cursor: 'not-allowed',
+  '&, :hover, :active': {
+    backgroundColor: 'transparent',
+    color: token('color.text.disabled', N200)
+  }
+});
+var selectedStyles = css({
+  backgroundColor: token('color.background.selected.resting', 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: token('color.text.selected'),
+  ':visited': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: token('color.text.selected')
+  },
+  ':hover': {
+    backgroundColor: token('color.background.selected.hover', N20),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: token('color.text.selected')
+  },
+  ':active': {
+    backgroundColor: token('color.background.selected.pressed', N30),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: 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,
+      testId = _ref.testId,
+      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 jsx(ClassNames, null, function (_ref2) {
+    var cn = _ref2.css,
+        cx = _ref2.cx;
+    return jsx(FocusRing, {
+      isInset: true
+    }, children({
+      'data-testid': testId,
+      className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
+      children: jsx(Fragment, null, iconBefore && jsx("span", {
+        "data-item-elem-before": true,
+        css: beforeElementStyles
+      }, iconBefore), title && jsx("span", {
+        css: contentStyles
+      }, renderTitle('span', {
+        children: title,
+        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        'data-item-title': true
+      }), description && jsx("span", {
+        "data-item-description": true,
+        css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+      }, description)), iconAfter && jsx("span", {
+        "data-item-elem-after": true,
+        css: afterElementStyles
+      }, iconAfter))
+    }));
+  });
+};
+
+export default MenuItemPrimitive;

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

@@ -4,14 +4,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/core';
-import BaseItem from '../internal/components/base-item';
+import noop from '@atlaskit/ds-lib/noop';
+import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 import { useBlurOnMouseDown } from '../internal/hooks/use-blur-on-mouse-down';
-import { buttonItemCSS } from '../internal/styles/menu-item/button-item';
 
 /**
  * __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)
@@ -20,9 +20,7 @@ var ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on p
 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 : _props$cssFn,
       description = props.description,
       iconAfter = props.iconAfter,
       iconBefore = props.iconBefore,
@@ -36,7 +34,7 @@ function (props, ref) {
       onMouseDown = props.onMouseDown,
       shouldTitleWrap = props.shouldTitleWrap,
       shouldDescriptionWrap = props.shouldDescriptionWrap,
-      others = _objectWithoutProperties(props, ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = _objectWithoutProperties(props, ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
 
   var onMouseDownHandler = useBlurOnMouseDown(onMouseDown);
 
@@ -44,26 +42,34 @@ function (props, ref) {
     return null;
   }
 
-  return jsx("button", _extends({
-    css: [// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    buttonItemCSS(isDisabled, isSelected), // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn({
-      isSelected: isSelected,
-      isDisabled: isDisabled
-    })],
-    "data-testid": testId,
-    disabled: isDisabled,
-    onClick: onClick,
-    onMouseDown: onMouseDownHandler,
-    ref: ref
-  }, others), jsx(BaseItem // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
+  return jsx(MenuItemPrimitive, _extends({}, rest, {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
+    testId: testId,
     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,
+        props = _objectWithoutProperties(_ref, ["children"]);
+
+    return jsx("button", _extends({}, rest, props, {
+      ref: ref,
+      disabled: isDisabled,
+      onClick: onClick,
+      onMouseDown: onMouseDownHandler,
+      type: "button"
+    }), children);
+  });
 }));
 export default ButtonItem;

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import React, { forwardRef, memo } from 'react';
-import { ClassNames } from '@emotion/core';
-import BaseItem from '../internal/components/base-item';
+
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/core';
+import noop from '@atlaskit/ds-lib/noop';
+import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 import { useBlurOnMouseDown } from '../internal/hooks/use-blur-on-mouse-down';
-import { customItemCSS } from '../internal/styles/menu-item/custom-item';
 
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
@@ -14,7 +16,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)
@@ -22,9 +24,7 @@ var preventEvent = function preventEvent(e) {
 var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/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 : _ref$cssFn,
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       _ref$isSelected = _ref.isSelected,
@@ -47,31 +47,37 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(ClassNames, null, function (_ref2) {
-    var css = _ref2.css;
-    return /*#__PURE__*/React.createElement(Component, _extends({
+  return jsx(MenuItemPrimitive, _extends({}, 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,
+    testId: testId // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
+    css: css(cssFn({
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }))
+  }), function (_ref2) {
+    var children = _ref2.children,
+        props = _objectWithoutProperties(_ref2, ["children"]);
+
+    return jsx(Component, _extends({}, rest, props, {
       ref: ref,
       "data-testid": testId,
       draggable: false,
-      className: css([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.createElement(BaseItem // 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/esm/menu-item/heading-item.js

@@ -3,9 +3,24 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 
 /** @jsx jsx */
 import { memo } from 'react';
-import { jsx } from '@emotion/core';
-import { headingItemCSS } from '../internal/styles/menu-item/heading-item';
-
+import { css, jsx } from '@emotion/core';
+import noop from '@atlaskit/ds-lib/noop';
+import { N200 } from '@atlaskit/theme/colors';
+import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import { headingSizes } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
+var gridSize = gridSizeFn();
+var itemSidePadding = gridSize * 2.5;
+var itemHeadingContentHeight = headingSizes.h100.lineHeight;
+var itemHeadingFontSize = headingSizes.h100.size;
+var headingStyles = css({
+  padding: "0 ".concat(itemSidePadding, "px"),
+  color: token('color.text.lowEmphasis', N200),
+  fontSize: itemHeadingFontSize,
+  fontWeight: 700,
+  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
+  textTransform: 'uppercase'
+});
 /**
  * __Heading item__
  *
@@ -14,19 +29,18 @@ import { headingItemCSS } from '../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__*/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 : _ref$cssFn,
       rest = _objectWithoutProperties(_ref, ["children", "testId", "id", "cssFn"]);
 
   return jsx("div", _extends({
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: [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/esm/menu-item/link-item.js

@@ -4,9 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/core';
-import BaseItem from '../internal/components/base-item';
+import noop from '@atlaskit/ds-lib/noop';
+import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 import { useBlurOnMouseDown } from '../internal/hooks/use-blur-on-mouse-down';
-import { linkItemCSS } from '../internal/styles/menu-item/link-item';
 
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
@@ -22,29 +22,25 @@ var preventEvent = function preventEvent(e) {
 
 
 var LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
-function (_ref, ref) {
-  var href = _ref.href,
-      rest = _objectWithoutProperties(_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 = _objectWithoutProperties(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 : _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 = _objectWithoutProperties(props, ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
 
   var onMouseDownHandler = useBlurOnMouseDown(onMouseDown);
 
@@ -52,30 +48,37 @@ function (_ref, ref) {
     return null;
   }
 
-  return jsx("a", _extends({
-    ref: ref,
-    css: [// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    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), jsx(BaseItem // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
+  return jsx(MenuItemPrimitive, _extends({}, 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,
+    testId: testId
+  }), function (_ref) {
+    var children = _ref.children,
+        props = _objectWithoutProperties(_ref, ["children"]);
+
+    return jsx("a", _extends({}, rest, props, {
+      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);
+  });
 }));
 export default LinkItem;

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

@@ -1,8 +1,30 @@
 /** @jsx jsx */
-import { memo } from 'react';
-import { jsx } from '@emotion/core';
-import { skeletonHeadingItemCSS } from '../internal/styles/menu-item/skeleton-heading-item';
-
+import { css, jsx } from '@emotion/core';
+import noop from '@atlaskit/ds-lib/noop';
+import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+var skeletonStyles = css({
+  padding: "0 ".concat(gridSize() * 2.5, "px"),
+  '::after': {
+    display: 'block',
+    width: '30%',
+    height: gridSize(),
+    backgroundColor: token('color.background.subtleNeutral.resting', skeletonColorFn()),
+    borderRadius: 100,
+    content: '""'
+  }
+});
+var defaultWidthStyles = css({
+  '::after': {
+    width: '30%'
+  }
+});
+var customWidthStyles = css({
+  '::after': {
+    width: 'var(--width)'
+  }
+});
 /**
  * __Skeleton heading item__
  *
@@ -11,19 +33,21 @@ import { skeletonHeadingItemCSS } from '../internal/styles/menu-item/skeleton-he
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var SkeletonHeadingItem = /*#__PURE__*/memo(function (_ref) {
-  var width = _ref.width,
-      testId = _ref.testId,
-      isShimmering = _ref.isShimmering,
+
+var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
+  var testId = _ref.testId,
+      width = _ref.width,
       _ref$cssFn = _ref.cssFn,
-      cssFn = _ref$cssFn === void 0 ? function () {
-    return {};
-  } : _ref$cssFn;
+      cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn;
   return jsx("div", {
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: [skeletonHeadingItemCSS(width, isShimmering), cssFn(undefined)],
+    style: {
+      '--width': width
+    },
+    css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    cssFn(undefined)],
     "data-ds--menu--skeleton-heading-item": true,
     "data-testid": testId
   });
-});
+};
+
 export default SkeletonHeadingItem;