@atlaskit/menu 2.1.2 → 2.1.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 2.1.4
+
+### Patch Changes
+
+- [#58913](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58913) [`36796c121e2a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/36796c121e2a) - [ux] This change includes heading role for HeadingItem and new prop `headingLevel` to specify the level of heading to be defined by assistive technologies.
+
+## 2.1.3
+
+### Patch Changes
+
+- [#58188](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58188) [`e15a2a9480ee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e15a2a9480ee) - update deprecation guidance for PopupMenuGroup
+
 ## 2.1.2
 
 ### Patch Changes

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

@@ -14,7 +14,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
-var _excluded = ["children", "testId", "id", "cssFn", "className"];
+var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className"];
 /** @jsx jsx */
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
@@ -39,6 +39,8 @@ var headingStyles = (0, _react2.css)({
 var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var children = _ref.children,
     testId = _ref.testId,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     id = _ref.id,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
@@ -52,6 +54,8 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     css: [headingStyles,
     // 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,

package/dist/cjs/menu-section/popup-menu-group.js

@@ -12,7 +12,7 @@ var _menuGroup = _interopRequireDefault(require("./menu-group"));
 var _excluded = ["maxWidth", "minWidth"];
 /** @jsx jsx */
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 var PopupMenuGroup = function PopupMenuGroup(_ref) {
   var _ref$maxWidth = _ref.maxWidth,

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

@@ -30,6 +30,7 @@ const headingStyles = css({
 const HeadingItem = /*#__PURE__*/memo(({
   children,
   testId,
+  headingLevel = 2,
   id,
   cssFn = noop,
   // Although this isn't defined on props it is available because we've used
@@ -47,6 +48,8 @@ const HeadingItem = /*#__PURE__*/memo(({
     css: [headingStyles,
     // 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,

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

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import MenuGroup from './menu-group';
 
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 const PopupMenuGroup = ({
   maxWidth = 800,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "testId", "id", "cssFn", "className"];
+var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className"];
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -32,6 +32,8 @@ var headingStyles = css({
 var HeadingItem = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     testId = _ref.testId,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     id = _ref.id,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn,
@@ -45,6 +47,8 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
     css: [headingStyles,
     // 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,

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

@@ -6,7 +6,7 @@ import { jsx } from '@emotion/react';
 import MenuGroup from './menu-group';
 
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 var PopupMenuGroup = function PopupMenuGroup(_ref) {
   var _ref$maxWidth = _ref.maxWidth,

package/dist/types/menu-item/heading-item.d.ts

@@ -9,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

package/dist/types/menu-section/popup-menu-group.d.ts

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default PopupMenuGroup;

package/dist/types/types.d.ts

@@ -349,6 +349,11 @@ export interface HeadingItemProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, level 2 will be applied by default.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface SkeletonHeadingItemProps {
     /**

package/dist/types-ts4.5/menu-item/heading-item.d.ts

@@ -9,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

package/dist/types-ts4.5/menu-section/popup-menu-group.d.ts

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default PopupMenuGroup;

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

@@ -349,6 +349,11 @@ export interface HeadingItemProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, level 2 will be applied by default.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface SkeletonHeadingItemProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,6 +22,22 @@
     "releaseModel": "continuous",
     "website": {
       "name": "Menu",
+      "subPages": [
+        {
+          "title": "Popup menu group",
+          "id": "popup-menu-group",
+          "status": {
+            "type": "deprecated",
+            "description": "PopupMenuGroup has been deprecated. We recommend using the MenuGroup component instead.",
+            "actions": [
+              {
+                "text": "View MenuGroup documentation",
+                "href": "https://atlassian.design/components/menu/menu-group/examples"
+              }
+            ]
+          }
+        }
+      ],
       "category": "Components"
     }
   },
@@ -29,9 +45,9 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.9.0",
+    "@atlaskit/primitives": "^1.15.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -114,4 +130,4 @@
   },
   "homepage": "https://atlassian.design/components/menu/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/tmp/api-report-tmp.d.ts

@@ -1,222 +0,0 @@
-## API Report File for "@atlaskit/menu"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { ComponentType } from 'react';
-import { Context } from 'react';
-import { CSSObject } from '@emotion/react';
-import { ForwardRefExoticComponent } from 'react';
-import { jsx } from '@emotion/react';
-import { MemoExoticComponent } from 'react';
-import { ReactNode } from 'react';
-import { Ref } from 'react';
-import { RefAttributes } from 'react';
-
-// @public (undocumented)
-export interface BaseItemProps {
-    children?: React.ReactNode;
-    // @deprecated
-    cssFn?: CSSFn;
-    description?: JSX.Element | string;
-    iconAfter?: React.ReactNode;
-    iconBefore?: React.ReactNode;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
-    onMouseDown?: React.MouseEventHandler;
-    // @deprecated
-    overrides?: Overrides;
-    shouldDescriptionWrap?: boolean;
-    shouldTitleWrap?: boolean;
-    testId?: string;
-}
-
-// @public
-export const ButtonItem: MemoExoticComponent<ForwardRefExoticComponent<ButtonItemProps & RefAttributes<HTMLElement>>>;
-
-// @public (undocumented)
-export interface ButtonItemProps extends BaseItemProps {
-    id?: string;
-    role?: string;
-}
-
-// @public @deprecated
-export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
-    // (undocumented)
-    (currentState: TState): CSSObject | CSSObject[];
-}
-
-// @public
-export const CustomItem: CustomItemTypeGenericHackProps;
-
-// @public (undocumented)
-export interface CustomItemComponentProps {
-    'data-testid'?: string;
-    children: React.ReactNode;
-    className: string;
-    disabled?: boolean;
-    draggable: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    onDragStart?: (event: React.DragEvent) => void;
-    onMouseDown?: (event: React.MouseEvent<HTMLElement>) => void;
-    ref?: Ref<any>;
-    tabIndex?: number;
-}
-
-// @public (undocumented)
-export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProps> extends BaseItemProps {
-    component?: React.ComponentType<TCustomComponentProps>;
-}
-
-// @public (undocumented)
-interface CustomItemTypeGenericHackProps {
-    // (undocumented)
-    <TComponentProps>(props: CustomItemProps<TComponentProps> & {
-        ref?: any;
-    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
-}
-
-// @public (undocumented)
-export type Dimension = number | string;
-
-// @public
-export const HeadingItem: MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
-
-// @public (undocumented)
-export interface HeadingItemProps {
-    children: React.ReactNode;
-    // @deprecated
-    cssFn?: StatelessCSSFn;
-    id?: string;
-    testId?: string;
-}
-
-// @public (undocumented)
-export type ItemState = {
-    isSelected: boolean;
-    isDisabled: boolean;
-};
-
-// @public
-export const LinkItem: MemoExoticComponent<ForwardRefExoticComponent<LinkItemProps & RefAttributes<HTMLElement>>>;
-
-// @public (undocumented)
-export interface LinkItemProps extends BaseItemProps {
-    href?: string;
-    rel?: string;
-    role?: string;
-    target?: string;
-}
-
-// @public
-export const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface MenuGroupProps extends MenuGroupSizing {
-    children: React.ReactNode;
-    isLoading?: boolean;
-    onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
-    role?: string;
-    spacing?: SpacingMode;
-    testId?: string;
-}
-
-// @public (undocumented)
-export interface MenuGroupSizing {
-    maxHeight?: Dimension;
-    maxWidth?: Dimension;
-    minHeight?: Dimension;
-    minWidth?: Dimension;
-}
-
-// @public @deprecated (undocumented)
-export interface Overrides {
-    // (undocumented)
-    Title?: TitleOverrides;
-}
-
-// @public @deprecated (undocumented)
-export const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface RenderFunction<TProps = {}> {
-    // (undocumented)
-    (Component: ComponentType | string, props: TProps): React.ReactNode;
-}
-
-// @public
-export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLElement>>;
-
-// @public (undocumented)
-interface SectionProps {
-    children: React.ReactNode;
-    hasSeparator?: boolean;
-    id?: string;
-    isList?: boolean;
-    isScrollable?: boolean;
-    // @deprecated (undocumented)
-    overrides?: {
-        HeadingItem?: {
-            cssFn?: StatelessCSSFn;
-        };
-    };
-    testId?: string;
-    title?: string;
-}
-export { SectionProps as SectionBaseProps }
-export { SectionProps }
-
-// @internal
-export const SELECTION_STYLE_CONTEXT_DO_NOT_USE: Context<"border" | "none" | "notch">;
-
-// @public
-export const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface SkeletonHeadingItemProps {
-    // @deprecated
-    cssFn?: StatelessCSSFn;
-    isShimmering?: boolean;
-    testId?: string;
-    width?: Dimension;
-}
-
-// @public
-export const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface SkeletonItemProps {
-    cssFn?: StatelessCSSFn;
-    hasAvatar?: boolean;
-    hasIcon?: boolean;
-    isShimmering?: boolean;
-    testId?: string;
-    width?: Dimension;
-}
-
-// @internal
-export const SpacingContext: Context<SpacingMode>;
-
-// @public (undocumented)
-type SpacingMode = 'compact' | 'cozy';
-
-// @public @deprecated (undocumented)
-export type StatelessCSSFn = CSSFn<void>;
-
-// @public @deprecated (undocumented)
-export interface TitleOverrides {
-    // (undocumented)
-    render?: RenderFunction<{
-        className?: string;
-        children: ReactNode;
-        'data-item-title': boolean;
-    }>;
-}
-
-// (No @packageDocumentation comment for this package)
-
-```