@atlaskit/menu 1.1.3 → 1.2.2

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

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-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';
 
 const preventEvent = e => {
   e.preventDefault();
@@ -13,14 +15,14 @@ const 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)
  */
 const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   component: Component,
-  cssFn = () => ({}),
+  cssFn = noop,
   isDisabled = false,
   isSelected = false,
   onClick,
@@ -41,31 +43,37 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(ClassNames, null, ({
-    css
-  }) => /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
-    "data-testid": testId,
-    draggable: false,
-    className: css([customItemCSS(isDisabled, isSelected), cssFn({
+  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 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
+    css: css(cssFn({
       isDisabled,
       isSelected
-    })]),
+    }))
+  }), ({
+    children,
+    className
+  }) => jsx(Component, _extends({
+    "data-testid": testId
+  }, rest, {
+    className: className,
+    ref: ref,
+    draggable: false,
     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]
 );
 export default CustomItem;

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

@@ -2,9 +2,24 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @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';
+const gridSize = gridSizeFn();
+const itemSidePadding = gridSize * 2.5;
+const itemHeadingContentHeight = headingSizes.h100.lineHeight;
+const itemHeadingFontSize = headingSizes.h100.size;
+const headingStyles = css({
+  padding: `0 ${itemSidePadding}px`,
+  color: token('color.text.lowEmphasis', N200),
+  fontSize: itemHeadingFontSize,
+  fontWeight: 700,
+  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
+  textTransform: 'uppercase'
+});
 /**
  * __Heading item__
  *
@@ -13,16 +28,17 @@ 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)
  */
+
 const HeadingItem = /*#__PURE__*/memo(({
   children,
   testId,
   id,
-  cssFn = () => ({}),
+  cssFn = noop,
   ...rest
 }) => {
   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/es2019/menu-item/link-item.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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';
 
 const preventEvent = e => {
   e.preventDefault();
@@ -21,13 +21,11 @@ const preventEvent = e => {
 
 
 const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
-({
-  href,
-  ...rest
-}, ref) => {
+(props, ref) => {
   const {
     children,
-    cssFn = () => ({}),
+    href,
+    cssFn = noop,
     description,
     iconAfter,
     iconBefore,
@@ -39,38 +37,45 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on p
     onMouseDown,
     shouldTitleWrap,
     shouldDescriptionWrap,
-    ...others
-  } = rest;
+    ...rest
+  } = props;
   const onMouseDownHandler = useBlurOnMouseDown(onMouseDown);
 
   if (!children) {
     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
+  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,
+    css: // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     cssFn({
       isSelected,
       isDisabled
-    })],
-    draggable: false,
+    }),
+    title: children
+  }), ({
+    children,
+    className
+  }) => jsx("a", _extends({
+    "data-testid": testId
+  }, rest, {
+    className: className,
     href: isDisabled ? undefined : href,
-    "data-testid": testId,
+    draggable: false,
     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
-  , {
-    overrides: overrides,
-    iconBefore: iconBefore,
-    iconAfter: iconAfter,
-    description: description,
-    shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap
-  }, children));
+    "aria-disabled": isDisabled,
+    ref: ref
+  }), children));
 }));
 export default LinkItem;

package/dist/es2019/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';
+const skeletonStyles = css({
+  padding: `0 ${gridSize() * 2.5}px`,
+  '::after': {
+    display: 'block',
+    width: '30%',
+    height: gridSize(),
+    backgroundColor: token('color.background.subtleNeutral.resting', skeletonColorFn()),
+    borderRadius: 100,
+    content: '""'
+  }
+});
+const defaultWidthStyles = css({
+  '::after': {
+    width: '30%'
+  }
+});
+const customWidthStyles = css({
+  '::after': {
+    width: 'var(--width)'
+  }
+});
 /**
  * __Skeleton heading item__
  *
@@ -11,15 +33,19 @@ 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)
  */
-const SkeletonHeadingItem = /*#__PURE__*/memo(({
-  width,
+
+const SkeletonHeadingItem = ({
   testId,
-  isShimmering,
-  cssFn = () => ({})
+  width,
+  cssFn = noop
 }) => 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;

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

@@ -1,8 +1,83 @@
 /** @jsx jsx */
-import { memo } from 'react';
-import { jsx } from '@emotion/core';
-import { skeletonItemCSS } from '../internal/styles/menu-item/skeleton-item';
-
+import { css, jsx } from '@emotion/core';
+import noop from '@atlaskit/ds-lib/noop';
+import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
+import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+const gridSize = gridSizeFn();
+const borderRadius = borderRadiusFn();
+const itemElemSpacing = gridSize * 1.5;
+const itemExpectedElemSize = gridSize * 3;
+const itemMinHeight = gridSize * 5;
+const itemPadding = gridSize * 2.5;
+const skeletonItemElemSize = gridSize * 2.5;
+const itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
+const skeletonTextBorderRadius = 100;
+const skeletonContentHeight = 9;
+const skeletonColor = token('color.background.subtleNeutral.resting', skeletonColorFn());
+const skeletonStyles = css({
+  display: 'flex',
+  minHeight: itemMinHeight,
+  padding: `0 ${itemPadding}px`,
+  alignItems: 'center',
+  pointerEvents: 'none',
+  '::after': {
+    height: skeletonContentHeight,
+    // This is a little bespoke but we need to push everything down 1px
+    // because the skeleton content should align to the bottom of the text.
+    // Confirm VR test failures before accepting a change.
+    marginTop: 1,
+    backgroundColor: skeletonColor,
+    borderRadius: skeletonTextBorderRadius,
+    content: '""'
+  }
+});
+const defaultWidthStyles = css({
+  ':nth-of-type(1n)::after': {
+    flexBasis: '70%'
+  },
+  ':nth-of-type(2n)::after': {
+    flexBasis: '50%'
+  },
+  ':nth-of-type(3n)::after': {
+    flexBasis: '60%'
+  },
+  ':nth-of-type(4n)::after': {
+    flexBasis: '90%'
+  },
+  ':nth-of-type(5n)::after': {
+    flexBasis: '35%'
+  },
+  ':nth-of-type(6n)::after': {
+    flexBasis: '77%'
+  }
+});
+const customWidthStyles = css({
+  '::after': {
+    flexBasis: 'var(--width)'
+  }
+});
+const beforeElementStyles = css({
+  '::before': {
+    width: skeletonItemElemSize,
+    height: skeletonItemElemSize,
+    marginRight: itemElemSpacing + itemElemSkeletonOffset,
+    marginLeft: itemElemSkeletonOffset,
+    flexShrink: 0,
+    backgroundColor: skeletonColor,
+    content: '""'
+  }
+});
+const avatarStyles = css({
+  '::before': {
+    borderRadius: '100%'
+  }
+});
+const iconStyles = css({
+  '::before': {
+    borderRadius
+  }
+});
 /**
  * __Skeleton item__
  *
@@ -11,17 +86,20 @@ import { skeletonItemCSS } from '../internal/styles/menu-item/skeleton-item';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-const SkeletonItem = /*#__PURE__*/memo(({
+
+const SkeletonItem = ({
   hasAvatar,
   hasIcon,
-  width,
   testId,
-  isShimmering,
-  cssFn = () => ({})
+  width,
+  cssFn = noop
 }) => jsx("div", {
-  css: [// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  skeletonItemCSS(hasAvatar, hasIcon, width, isShimmering), // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+  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(undefined)],
   "data-testid": testId
-}));
+});
+
 export default SkeletonItem;

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

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { menuGroupCSS } from '../internal/styles/menu-section/menu-group';
-
+import { css, jsx } from '@emotion/core';
+const groupStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
 /**
  * __Menu group__
  *
@@ -12,6 +15,7 @@ import { menuGroupCSS } from '../internal/styles/menu-section/menu-group';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
+
 const MenuGroup = ({
   maxWidth,
   minWidth,
@@ -20,13 +24,13 @@ const MenuGroup = ({
   testId,
   ...rest
 }) => jsx("div", _extends({
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  css: menuGroupCSS({
-    maxHeight,
+  style: {
+    minWidth,
     maxWidth,
     minHeight,
-    minWidth
-  }),
+    maxHeight
+  },
+  css: groupStyles,
   "data-testid": testId
 }, rest));
 

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

@@ -1,11 +1,74 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { forwardRef } from 'react';
-import { jsx } from '@emotion/core';
-import { sectionCSS } from '../internal/styles/menu-section/section';
+import { forwardRef, Fragment } from 'react';
+import { css, jsx } from '@emotion/core';
+import { N30A } from '@atlaskit/theme/colors';
+import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import { headingSizes } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import HeadingItem from '../menu-item/heading-item';
+const gridSize = gridSizeFn();
+const itemHeadingTopMargin = gridSize * 2.5;
+const 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.
 
+const itemHeadingContentHeight = headingSizes.h100.lineHeight;
+const skeletonHeadingHeight = gridSize;
+const skeletonHeadingMarginOffset = 3;
+const skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
+
+const skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
+const sectionPaddingTopBottom = gridSize * 0.75;
+const VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
+const sectionStyles = css({
+  '&::before, &::after': {
+    display: 'block',
+    height: sectionPaddingTopBottom,
+    content: '""'
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& [data-ds--menu--heading-item]': {
+    marginTop: itemHeadingTopMargin,
+    marginBottom: itemHeadingBottomMargin,
+    '&:first-of-type': {
+      marginTop: itemHeadingTopMargin - sectionPaddingTopBottom
+    }
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& [data-ds--menu--skeleton-heading-item]': {
+    marginTop: skeletonHeadingTopMargin,
+    marginBottom: skeletonHeadingBottomMargin,
+    '&:first-of-type': {
+      marginTop: skeletonHeadingTopMargin - sectionPaddingTopBottom
+    }
+  },
+  '&:focus': {
+    // 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.
+    // This makes the outline go inside by 1px so it can actually be displayed
+    // else it gets cut off from the overflow: scroll from the parent menu group.
+    outlineOffset: -1
+  }
+});
+const scrollableStyles = css({
+  flexShrink: 1,
+  overflow: 'auto'
+});
+const unscrollableStyles = css({
+  flexShrink: 0
+});
+const separatorStyles = css({
+  borderTop: `2px solid var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30A)})`
+});
+const noSeparatorStyles = 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] + &': {
+    marginTop: -6
+  }
+});
 /**
  * __Section__
  *
@@ -14,44 +77,33 @@ import HeadingItem from '../menu-item/heading-item';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-const Section = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
-({
+
+const Section = /*#__PURE__*/forwardRef(({
   children,
   overrides,
   title,
   testId,
+  isScrollable,
+  hasSeparator,
+  id,
   ...rest
 }, ref) => {
-  return title !== undefined ? jsx(SectionBase, _extends({}, rest, {
-    testId: testId,
-    ref: ref,
-    "aria-label": title
-  }), jsx(HeadingItem // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+  const childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
     cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
     testId: testId && `${testId}--heading`,
     "aria-hidden": true
-  }, title), children) : jsx(SectionBase, _extends({}, rest, {
+  }, title), children) : children;
+  return jsx("div", _extends({}, 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.
+    ,
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    "aria-label": title,
+    "data-testid": testId,
+    role: "group",
+    "data-section": true,
     ref: ref
-  }), children);
+  }), childrenMarkup);
 });
-const SectionBase = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
-({
-  isScrollable,
-  hasSeparator,
-  testId,
-  ...rest
-}, ref) => jsx("div", _extends({
-  // 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.
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  css: sectionCSS(isScrollable, hasSeparator),
-  "data-testid": testId,
-  role: "group" // this is being used to target CSS selectors
-  // where emotion's API was falling a little short.
-  ,
-  "data-section": true
-}, rest, {
-  ref: ref
-})));
 export default Section;

package/dist/es2019/version.json

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