@atlaskit/menu 2.3.0 → 2.4.0

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
+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 */
 /** @jsx jsx */
 import { Children, forwardRef, Fragment } from 'react';
@@ -89,6 +89,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     overrides = _ref.overrides,
     title = _ref.title,
+    titleId = _ref.titleId,
     testId = _ref.testId,
     isScrollable = _ref.isScrollable,
     hasSeparator = _ref.hasSeparator,
@@ -102,11 +103,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 +127,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")
@@ -130,6 +135,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ,
     css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
+    "aria-labelledby": titleId,
     "data-testid": testId,
     role: "group",
     "data-section": true,

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;
@@ -114,6 +114,11 @@ export interface SectionProps {
      * the `HeadingItem` won't be rendered, and this component will act as a regular `Section`.
      */
     title?: string;
+    /**
+     * ID referenced by the menu group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
     /**
      * If your menu contains a list, use this to add `<ul>` and `<li>` tags around the items. This is essential for offering better, accessible semantic markup in a list of items.
      */

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;
@@ -114,6 +114,11 @@ export interface SectionProps {
      * the `HeadingItem` won't be rendered, and this component will act as a regular `Section`.
      */
     title?: string;
+    /**
+     * ID referenced by the menu group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
     /**
      * If your menu contains a list, use this to add `<ul>` and `<li>` tags around the items. This is essential for offering better, accessible semantic markup in a list of items.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "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.2.0",
+    "@atlaskit/primitives": "^6.5.0",
     "@atlaskit/theme": "^12.8.0",
-    "@atlaskit/tokens": "^1.48.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",
@@ -131,6 +130,5 @@
       "type": "boolean"
     }
   },
-  "homepage": "https://atlassian.design/components/menu/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "homepage": "https://atlassian.design/components/menu/"
 }