@atlaskit/menu 2.2.1 → 2.3.1

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

@@ -4,7 +4,7 @@ import { ClassNames, css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import FocusRing from '@atlaskit/focus-ring';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import Inline from '@atlaskit/primitives/inline';
+import { Inline, Stack, xcss } from '@atlaskit/primitives';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
 var defaultRender = function defaultRender(Component, props) {
@@ -19,29 +19,35 @@ var beforeAfterElementStyles = css({
   justifyContent: 'center',
   flexShrink: 0
 });
-var contentStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  flexGrow: 1,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+var contentStyles = xcss({
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
 });
+var baseContentStyles = xcss({
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+});
 var truncateStyles = css({
   display: 'block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+var titleStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 var wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 var descriptionStyles = css({
-  marginTop: "var(--ds-space-050, 4px)",
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)"
+  color: "var(--ds-text-subtlest, ".concat(N200, ")")
+});
+var baseDescriptionStyles = css({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
+});
+var tokenizedDescriptionStyles = css({
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var disabledDescriptionStyles = css({
   color: "var(--ds-text-disabled, ".concat(N200, ")")
@@ -57,7 +63,6 @@ var primitiveStyles = css({
   margin: "var(--ds-space-0, 0px)",
   alignItems: 'center',
   border: 0,
-  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -68,6 +73,9 @@ var primitiveStyles = css({
     textDecoration: 'none'
   }
 });
+var primitiveBaseStyles = css({
+  fontSize: "var(--ds-font-size-100, 14px)"
+});
 var spacingMapStyles = {
   cozy: css({
     // 8 * 2 (16) + icon (24) === 40
@@ -111,23 +119,23 @@ var selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 var selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 var selectedStyles = css({
@@ -194,7 +202,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? undefined : primitiveBaseStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",
@@ -206,15 +214,17 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         "data-item-elem-before": true,
         css: beforeAfterElementStyles,
         "data-testid": testId && "".concat(testId, "--icon-before")
-      }, iconBefore), title && jsx("span", {
-        css: contentStyles
+      }, iconBefore), title && jsx(Stack, {
+        alignBlock: "center",
+        grow: "fill",
+        xcss: getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? contentStyles : [contentStyles, baseContentStyles]
       }, renderTitle('span', {
         children: title,
-        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: cn(getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? titleStyles : undefined, shouldTitleWrap ? wordBreakStyles : truncateStyles),
         'data-item-title': true
       }), description && jsx("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedDescriptionStyles : baseDescriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
         css: beforeAfterElementStyles,

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

@@ -43,7 +43,9 @@ function (props, ref) {
   }
   propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
-  return jsx(MenuItemPrimitive, _extends({
+  return jsx(MenuItemPrimitive
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , _extends({
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -69,6 +71,7 @@ function (props, ref) {
     return jsx("button", _extends({
       "data-testid": testId
     }, rest, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       ref: ref,
       disabled: isDisabled,

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

@@ -49,7 +49,9 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
   }
   propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
-  return jsx(MenuItemPrimitive, _extends({
+  return jsx(MenuItemPrimitive
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , _extends({
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -75,6 +77,7 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     return jsx(Component, _extends({
       "data-testid": testId
     }, rest, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       ref: ref,
       draggable: false,

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

@@ -13,13 +13,18 @@ var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
-  fontSize: itemHeadingFontSize,
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   paddingBlock: "var(--ds-space-0, 0px)",
   paddingInline: "var(--ds-space-200, 16px)",
   textTransform: 'uppercase'
 });
+var baseHeadingStyles = css({
+  fontSize: itemHeadingFontSize,
+  fontWeight: "var(--ds-font-weight-bold, 700)",
+  lineHeight: itemHeadingContentHeight / itemHeadingFontSize
+});
+var tokenizedHeadingStyles = css({
+  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * __Heading item__
@@ -43,14 +48,16 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
   );
   var UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));
   return jsx("div", _extends({
-    css: [headingStyles,
+    css: [headingStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedHeadingStyles : baseHeadingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
     role: "heading",
     "aria-level": headingLevel,
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
-    id: id,
+    id: id
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest), children);
 });

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

@@ -49,6 +49,7 @@ function (props, ref) {
   propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
   return jsx(MenuItemPrimitive, _extends({}, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
@@ -74,6 +75,7 @@ function (props, ref) {
     return jsx("a", _extends({
       "data-testid": testId
     }, rest, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       href: isDisabled ? undefined : href,
       draggable: false

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

@@ -52,7 +52,10 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
   }, function (_ref2) {
     var className = _ref2.className;
     return jsx("div", {
-      className: className,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: className
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: {
         '--width': width
       },

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

@@ -108,7 +108,10 @@ var SkeletonItem = function SkeletonItem(_ref) {
   }, function (_ref2) {
     var className = _ref2.className;
     return jsx("div", {
-      className: className,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: className
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: {
         '--width': width
       },

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

@@ -46,7 +46,9 @@ var MenuGroup = function MenuGroup(_ref) {
     },
     css: baseStyles,
     "data-testid": testId,
-    role: role,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));

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

@@ -102,11 +102,14 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var UNSAFE_headingOverrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
   var content = isList ? jsx("ul", {
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       padding: 0
     }
   }, Children.map(Children.toArray(children), function (child, index) {
     return jsx("li", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
         listStyleType: 'none',
         margin: 0,
@@ -123,6 +126,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-hidden": true
   }, title), content) : jsx(Fragment, null, content);
   return jsx("div", _extends({}, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className,
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")

package/dist/types/internal/components/skeleton-shimmer.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type SkeletonShimmerProps = {
     children: ({ className }: {

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
-import { CSSObject } from '@emotion/react';
+import { type ComponentType, type PropsWithChildren, type ReactNode, type Ref } from 'react';
+import { type CSSObject } from '@emotion/react';
 import type { SpacingMode } from './internal/components/menu-context';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;

package/dist/types-ts4.5/internal/components/skeleton-shimmer.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type SkeletonShimmerProps = {
     children: ({ className }: {

package/dist/types-ts4.5/types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
-import { CSSObject } from '@emotion/react';
+import { type ComponentType, type PropsWithChildren, type ReactNode, type Ref } from 'react';
+import { type CSSObject } from '@emotion/react';
 import type { SpacingMode } from './internal/components/menu-context';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "A list of options to help users navigate, or perform actions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -46,9 +46,9 @@
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/focus-ring": "^1.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^6.0.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/primitives": "^6.4.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -61,7 +61,6 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@emotion/jest": "^11.8.0",
     "@testing-library/dom": "^8.17.1",
@@ -126,8 +125,10 @@
     },
     "platform.design-system-team.section-1px-seperator-borders": {
       "type": "boolean"
+    },
+    "platform.design-system-team.menu-tokenised-typography-styles": {
+      "type": "boolean"
     }
   },
-  "homepage": "https://atlassian.design/components/menu/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "homepage": "https://atlassian.design/components/menu/"
 }