@atlaskit/menu 3.2.0 → 5.0.0

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

@@ -1,17 +1,11 @@
+/* link-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["children", "href", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { useRouterLink } from '@atlaskit/app-provider';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
@@ -34,8 +28,6 @@ var LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
 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,
@@ -45,7 +37,6 @@ function (props, ref) {
     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,
@@ -78,33 +69,23 @@ function (props, ref) {
    */
   var isRouterLink = !UNSAFE_shouldDisableRouterLink && RouterLink && !isExternal && !isNonHttpBased && !isEmptyHref;
   var Component = isRouterLink ? RouterLink : 'a';
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-  return jsx(MenuItemPrimitive, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(MenuItemPrimitive, _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    overrides: overrides,
+    className: UNSAFE_className,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isSelected: isSelected,
     isDisabled: isDisabled,
+    isTitleHeading: false,
     description: description,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
-    css:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    cssFn({
-      isSelected: isSelected,
-      isDisabled: isDisabled
-    }),
     title: children,
     testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;
-    return jsx(Component, _extends({
+    return /*#__PURE__*/React.createElement(Component, _extends({
       "data-testid": testId,
       "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
       "data-vc": "link-item"

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

@@ -61,12 +61,9 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
     var className = _ref2.className;
     return jsx("div", {
       // 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
-      ,
+      className: className,
       style: {
         '--width': width
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       },
       css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

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

@@ -130,12 +130,9 @@ var SkeletonItem = function SkeletonItem(_ref) {
     var className = _ref2.className;
     return jsx("div", {
       // 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
-      ,
+      className: className,
       style: {
         '--width': width
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       },
       css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "overrides", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -140,9 +139,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // 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 ?
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    thinSeparatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? thinSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "aria-labelledby": titleId,
     "data-testid": testId,

package/dist/types/internal/components/menu-item-primitive.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, isTitleHeading, testId, }: MenuItemPrimitiveProps) => JSX.Element;
 export default MenuItemPrimitive;

package/dist/types/types.d.ts

@@ -126,32 +126,25 @@ export interface SectionProps {
 }
 export interface MenuItemPrimitiveProps {
     children: (props: {
-        className: string;
+        className?: string;
         children: React.ReactNode;
     }) => JSX.Element;
     title: React.ReactNode | undefined;
     description: React.ReactNode | undefined;
     iconAfter: React.ReactNode | undefined;
     iconBefore: React.ReactNode | undefined;
-    /**
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides: Overrides | undefined;
     shouldTitleWrap: boolean | undefined;
     shouldDescriptionWrap: boolean | undefined;
     isDisabled: boolean | undefined;
     isSelected: boolean | undefined;
+    /**
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isTitleHeading: boolean | undefined;
     className?: string;
     testId?: string;
 }
 export interface MenuItemProps {
-    /**
-     * A function that overrides the styles of the component.
-     * It receives the current styles and state and expects a styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    cssFn?: CSSFn;
     /**
      * Not recommended for general use as it enables unsafe style overrides.
      */
@@ -197,12 +190,6 @@ export interface MenuItemProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Custom overrides for the composed components.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides?: Overrides;
     /**
      * When `true`, the title of the item will wrap multiple lines if it's long enough.
      */
@@ -211,6 +198,11 @@ export interface MenuItemProps {
      * When `true`, the description of the item will wrap multiple lines if it's long enough.
      */
     shouldDescriptionWrap?: boolean;
+    /**
+     * When `true`, the title of the item will render as a `h2` rather than a `span`
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isTitleHeading?: boolean;
     /**
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
@@ -265,7 +257,7 @@ export interface CustomItemComponentProps {
      * Class to apply to the root container of the custom component.
      * Ensure this has been applied so the item styling is consistent.
      */
-    className: string;
+    className?: string;
     /**
      * Test ID that's passed through to the custom component.
      */

package/dist/types-ts4.5/internal/components/menu-item-primitive.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, isTitleHeading, testId, }: MenuItemPrimitiveProps) => JSX.Element;
 export default MenuItemPrimitive;

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

@@ -126,32 +126,25 @@ export interface SectionProps {
 }
 export interface MenuItemPrimitiveProps {
     children: (props: {
-        className: string;
+        className?: string;
         children: React.ReactNode;
     }) => JSX.Element;
     title: React.ReactNode | undefined;
     description: React.ReactNode | undefined;
     iconAfter: React.ReactNode | undefined;
     iconBefore: React.ReactNode | undefined;
-    /**
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides: Overrides | undefined;
     shouldTitleWrap: boolean | undefined;
     shouldDescriptionWrap: boolean | undefined;
     isDisabled: boolean | undefined;
     isSelected: boolean | undefined;
+    /**
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isTitleHeading: boolean | undefined;
     className?: string;
     testId?: string;
 }
 export interface MenuItemProps {
-    /**
-     * A function that overrides the styles of the component.
-     * It receives the current styles and state and expects a styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    cssFn?: CSSFn;
     /**
      * Not recommended for general use as it enables unsafe style overrides.
      */
@@ -197,12 +190,6 @@ export interface MenuItemProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Custom overrides for the composed components.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides?: Overrides;
     /**
      * When `true`, the title of the item will wrap multiple lines if it's long enough.
      */
@@ -211,6 +198,11 @@ export interface MenuItemProps {
      * When `true`, the description of the item will wrap multiple lines if it's long enough.
      */
     shouldDescriptionWrap?: boolean;
+    /**
+     * When `true`, the title of the item will render as a `h2` rather than a `span`
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isTitleHeading?: boolean;
     /**
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
@@ -265,7 +257,7 @@ export interface CustomItemComponentProps {
      * Class to apply to the root container of the custom component.
      * Ensure this has been applied so the item styling is consistent.
      */
-    className: string;
+    className?: string;
     /**
      * Test ID that's passed through to the custom component.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "3.2.0",
+	"version": "5.0.0",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,15 +41,16 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^2.0.0",
+		"@atlaskit/app-provider": "^2.1.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
@@ -57,17 +58,17 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "^2.0.0",
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^22.0.0",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-object": "^7.0.0",
-		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/icon-object": "^7.1.0",
+		"@atlaskit/link": "^3.1.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@emotion/jest": "^11.8.0",
 		"@testing-library/react": "^13.4.0",
@@ -126,6 +127,9 @@
 		},
 		"platform_button_item-add-ufo-metrics": {
 			"type": "boolean"
+		},
+		"platform_fix_a11y_selected_and_hovered_state_color": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/menu/"