@atlaskit/navigation-system 0.177.2 → 0.178.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @atlassian/navigation-system
 
+## 0.178.0
+
+### Minor Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`87e1e76c9c3aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87e1e76c9c3aa) -
+  The `elemBefore` chevron icon button in the link (selectable) variants of
+  `ExpandableMenuItemTrigger` is now labelled by the menu item (specifically, its anchor element)
+  through the `aria-labelledby` attribute. This is to provide context on what will be expanded or
+  collapsed to screen readers.
+
+  This change is behind a feature flag.
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`87e1e76c9c3aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87e1e76c9c3aa) -
+  The `ExpandableMenuItemTrigger` `testId` is now passed down to the `elemBefore` chevron icon
+  button in the link (selectable) variants of `ExpandableMenuItemTrigger`.
+
+### Patch Changes
+
+- [#199297](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199297)
+  [`3805d3e955d32`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3805d3e955d32) -
+  Improve menu item scaling with browser font size by using rem for height.
+- [`5bed2aeb9093f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5bed2aeb9093f) -
+  Internal refactoring of tests
+- Updated dependencies
+
+## 0.177.3
+
+### Patch Changes
+
+- [#197413](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197413)
+  [`6909340c54a0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6909340c54a0b) -
+  Minor internal refactor to cleanup unused styles. No external impact.
+- Updated dependencies
+
 ## 0.177.2
 
 ### Patch Changes

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItem = require("../menu-item");
 var _useScrollMenuItemIntoView = require("../use-scroll-menu-item-into-view");
 var _expandableMenuItemContext = require("./expandable-menu-item-context");
@@ -68,6 +69,7 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*
     isDragging = _ref2.isDragging,
     hasDragIndicator = _ref2.hasDragIndicator,
     dropIndicator = _ref2.dropIndicator;
+  var id = (0, _react.useId)();
   var onExpansionToggle = (0, _expandableMenuItemContext.useOnExpansionToggle)();
   var isExpanded = (0, _expandableMenuItemContext.useIsExpanded)();
   var setIsExpanded = (0, _expandableMenuItemContext.useSetIsExpanded)();
@@ -100,12 +102,22 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*
         providedElemBefore: providedElemBefore
       });
     },
-    "aria-expanded": isExpanded,
-    label: isExpanded ? 'Collapse' : 'Expand',
+    "aria-expanded": isExpanded
+    // We are labelling the icon button using the containing menu item's content, to provide context to
+    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+    // `aria-expanded` attribute to indicate the expanded state of the menu item.
+    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+    ,
+    "aria-labelledby": (0, _platformFeatureFlags.fg)('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
+    // `aria-labelledby`, which will be used instead.
+    ,
+    label: (0, _platformFeatureFlags.fg)('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,
-    interactionName: interactionName
+    interactionName: interactionName,
+    testId: testId ? "".concat(testId, "--elem-before-button") : undefined
   }) : /*#__PURE__*/_react.default.createElement(ExpandableMenuItemIcon, {
     isExpanded: isExpanded,
     isSelected: isSelected,
@@ -117,6 +129,7 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*
     ref: itemRef,
     className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
   }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItemBase, {
+    id: id,
     actions: actions,
     actionsOnHover: actionsOnHover,
     elemBefore: elemBefore,

package/dist/cjs/ui/menu-item/menu-item.compiled.css

@@ -46,8 +46,8 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1crf{height:9pt}
 ._4t3i1tcg{height:24px}
-._4t3ickbl{height:3pc}
-._4t3izwfg{height:2pc}
+._4t3i1wto{height:3rem}
+._4t3iviql{height:2rem}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._91ju1txw{--elem-after-display:flex}

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

@@ -146,14 +146,13 @@ var onTopOfButtonOrAnchorStyles = {
  */
 var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 var containerStyles = {
-  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3izwfg _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
+  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_ek6g1txw",
-  removeElemAfterOnHover: "_1mfcglyw _1sjuglyw",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
-  hasDescription: "_4t3ickbl",
+  hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
 var buttonOrAnchorStyles = {
@@ -223,7 +222,8 @@ function getTextColor(_ref2) {
  * This can be inferred from the type of the `onClick` prop.
  */
 var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
-  var testId = _ref3.testId,
+  var id = _ref3.id,
+    testId = _ref3.testId,
     actions = _ref3.actions,
     actionsOnHover = _ref3.actionsOnHover,
     children = _ref3.children,
@@ -348,6 +348,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
       'aria-controls': ariaControls,
       'aria-haspopup': ariaHasPopup,
       ref: (0, _mergeRefs.default)([forwardedRef, tooltipProps.ref]),
+      id: id,
       testId: testId,
       interactionName: interactionName
     });

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -2,10 +2,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./expandable-menu-item-trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
 import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
 import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
@@ -61,6 +62,7 @@ export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
   hasDragIndicator,
   dropIndicator
 }, forwardedRef) => {
+  const id = useId();
   const onExpansionToggle = useOnExpansionToggle();
   const isExpanded = useIsExpanded();
   const setIsExpanded = useSetIsExpanded();
@@ -91,12 +93,22 @@ export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
       isSelected: isSelected,
       providedElemBefore: providedElemBefore
     }),
-    "aria-expanded": isExpanded,
-    label: isExpanded ? 'Collapse' : 'Expand',
+    "aria-expanded": isExpanded
+    // We are labelling the icon button using the containing menu item's content, to provide context to
+    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+    // `aria-expanded` attribute to indicate the expanded state of the menu item.
+    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+    ,
+    "aria-labelledby": fg('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
+    // `aria-labelledby`, which will be used instead.
+    ,
+    label: fg('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,
-    interactionName: interactionName
+    interactionName: interactionName,
+    testId: testId ? `${testId}--elem-before-button` : undefined
   }) : /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
     isExpanded: isExpanded,
     isSelected: isSelected,
@@ -108,6 +120,7 @@ export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
     ref: itemRef,
     className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
   }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    id: id,
     actions: actions,
     actionsOnHover: actionsOnHover,
     elemBefore: elemBefore,

package/dist/es2019/ui/menu-item/menu-item.compiled.css

@@ -46,8 +46,8 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1crf{height:9pt}
 ._4t3i1tcg{height:24px}
-._4t3ickbl{height:3pc}
-._4t3izwfg{height:2pc}
+._4t3i1wto{height:3rem}
+._4t3iviql{height:2rem}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._91ju1txw{--elem-after-display:flex}

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

@@ -129,14 +129,13 @@ const onTopOfButtonOrAnchorStyles = {
  */
 export const nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 const containerStyles = {
-  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3izwfg _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
+  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_ek6g1txw",
-  removeElemAfterOnHover: "_1mfcglyw _1sjuglyw",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
-  hasDescription: "_4t3ickbl",
+  hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
 const buttonOrAnchorStyles = {
@@ -207,6 +206,7 @@ function getTextColor({
  * This can be inferred from the type of the `onClick` prop.
  */
 const MenuItemBaseNoRef = ({
+  id,
   testId,
   actions,
   actionsOnHover,
@@ -332,6 +332,7 @@ const MenuItemBaseNoRef = ({
       'aria-controls': ariaControls,
       'aria-haspopup': ariaHasPopup,
       ref: mergeRefs([forwardedRef, tooltipProps.ref]),
+      id,
       testId,
       interactionName
     };

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -2,10 +2,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./expandable-menu-item-trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
 import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
 import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
@@ -59,6 +60,7 @@ export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2,
     isDragging = _ref2.isDragging,
     hasDragIndicator = _ref2.hasDragIndicator,
     dropIndicator = _ref2.dropIndicator;
+  var id = useId();
   var onExpansionToggle = useOnExpansionToggle();
   var isExpanded = useIsExpanded();
   var setIsExpanded = useSetIsExpanded();
@@ -91,12 +93,22 @@ export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2,
         providedElemBefore: providedElemBefore
       });
     },
-    "aria-expanded": isExpanded,
-    label: isExpanded ? 'Collapse' : 'Expand',
+    "aria-expanded": isExpanded
+    // We are labelling the icon button using the containing menu item's content, to provide context to
+    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+    // `aria-expanded` attribute to indicate the expanded state of the menu item.
+    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+    ,
+    "aria-labelledby": fg('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
+    // `aria-labelledby`, which will be used instead.
+    ,
+    label: fg('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,
-    interactionName: interactionName
+    interactionName: interactionName,
+    testId: testId ? "".concat(testId, "--elem-before-button") : undefined
   }) : /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
     isExpanded: isExpanded,
     isSelected: isSelected,
@@ -108,6 +120,7 @@ export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2,
     ref: itemRef,
     className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
   }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    id: id,
     actions: actions,
     actionsOnHover: actionsOnHover,
     elemBefore: elemBefore,

package/dist/esm/ui/menu-item/menu-item.compiled.css

@@ -46,8 +46,8 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1crf{height:9pt}
 ._4t3i1tcg{height:24px}
-._4t3ickbl{height:3pc}
-._4t3izwfg{height:2pc}
+._4t3i1wto{height:3rem}
+._4t3iviql{height:2rem}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._91ju1txw{--elem-after-display:flex}

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

@@ -135,14 +135,13 @@ var onTopOfButtonOrAnchorStyles = {
  */
 export var nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 var containerStyles = {
-  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3izwfg _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
+  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_ek6g1txw",
-  removeElemAfterOnHover: "_1mfcglyw _1sjuglyw",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
-  hasDescription: "_4t3ickbl",
+  hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
 var buttonOrAnchorStyles = {
@@ -212,7 +211,8 @@ function getTextColor(_ref2) {
  * This can be inferred from the type of the `onClick` prop.
  */
 var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
-  var testId = _ref3.testId,
+  var id = _ref3.id,
+    testId = _ref3.testId,
     actions = _ref3.actions,
     actionsOnHover = _ref3.actionsOnHover,
     children = _ref3.children,
@@ -337,6 +337,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
       'aria-controls': ariaControls,
       'aria-haspopup': ariaHasPopup,
       ref: mergeRefs([forwardedRef, tooltipProps.ref]),
+      id: id,
       testId: testId,
       interactionName: interactionName
     });

package/dist/types/components/skip-links/skip-link.d.ts

@@ -12,5 +12,5 @@ import type { SkipLinkData } from '../../context/skip-links/types';
 export declare const SkipLink: ({ id, children, onBeforeNavigate, }: {
     id: string;
     children: ReactNode;
-    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
+    onBeforeNavigate?: SkipLinkData["onBeforeNavigate"];
 }) => JSX.Element;

package/dist/types/components/skip-links/skip-links-container.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * A container element for the skip links
  * The default label will be used when the `skipLinksLabel` attribute is not
@@ -9,5 +8,5 @@
  */
 export declare const SkipLinksContainer: ({ label, testId }: {
     label: string;
-    testId?: string | undefined;
+    testId?: string;
 }) => JSX.Element | null;

package/dist/types/context/skip-links/skip-links-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type SkipLinkData } from './types';
 export type SkipLinksContextData = {
     registerSkipLink: (skipLinkData: SkipLinkData) => void;
@@ -20,4 +19,18 @@ export declare const useSkipLinkInternal: ({ id, label, listIndex, onBeforeNavig
 /**
  * Call `useSkipLink` to register a skip link for important elements on the page.
  */
-export declare const useSkipLink: (id: string, label: string, listIndex?: number) => void;
+export declare const useSkipLink: (
+/**
+ * The unique ID for the skip link.
+ * You can use the `useSkipLinkId` hook to generate a unique ID.
+ */
+id: string, 
+/**
+ * The label for the skip link.
+ */
+label: string, 
+/**
+ * You can optionally set the position of the skip link in the list of skip links.
+ * Positions are zero-indexed.
+ */
+listIndex?: number) => void;

package/dist/types/context/skip-links/skip-links-data-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type SkipLinkData } from './types';
 /**
  * Provides a way to store skip links

package/dist/types/context/top-nav-start/top-nav-start-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Context for the TopNavStart container element
  * Used to power the side nav flyout by allowing the side nav to bind event listeners to the element, so we can

package/dist/types/ui/menu-item/button-menu-item.d.ts

@@ -31,8 +31,8 @@ export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
  * A menu item button. It should be used within a `ul`, as it renders a list item.
  */
 export declare const ButtonMenuItem: React.ForwardRefExoticComponent<import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string | undefined;
-    listItemRef?: React.Ref<HTMLDivElement> | undefined;
+    description?: string;
+    listItemRef?: React.Ref<HTMLDivElement>;
 } & {
     /**
      * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
@@ -47,9 +47,9 @@ export declare const ButtonMenuItem: React.ForwardRefExoticComponent<import("./t
      *
      * The menu item will not be interactive and will not respond to hover or focus.
      */
-    isDisabled?: boolean | undefined;
+    isDisabled?: boolean;
     /**
      * Called when the user has clicked on the trigger content.
      */
-    onClick?: MenuItemOnClick<HTMLButtonElement> | undefined;
+    onClick?: MenuItemOnClick<HTMLButtonElement>;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/ui/menu-item/container-avatar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ContainerAvatarProps = {
     /**
      * The source of the avatar image.

package/dist/types/ui/menu-item/drag-handle.d.ts

@@ -3,5 +3,4 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
 export default function DragHandle(): JSX.Element;

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type onExpansionToggle = (isExpanded: boolean) => void;
 /**
  * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
@@ -22,7 +21,7 @@ export declare const OnExpansionToggleContext: import("react").Context<onExpansi
  */
 export declare const LevelContext: import("react").Context<number>;
 export declare const useIsExpanded: () => boolean;
-export declare const useSetIsExpanded: () => (value: boolean) => void;
+export declare const useSetIsExpanded: () => ((value: boolean) => void);
 export declare const useOnExpansionToggle: () => onExpansionToggle | null;
 export declare const useLevel: () => number;
 /**

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * A context for storing the level value of the ExpandableMenuItem.
  */

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.d.ts

@@ -96,7 +96,7 @@ export declare const ExpandableMenuItemTrigger: React.ForwardRefExoticComponent<
     /**
      * Indicates that the menu item is selected.
      */
-    isSelected?: boolean | undefined;
+    isSelected?: boolean;
     /**
      * If provided, the chevron icon (expand/collapse symbol) will be rendered within a separate
      * icon button element. Clicking on this icon button will not trigger the `onClick` event. It
@@ -104,7 +104,7 @@ export declare const ExpandableMenuItemTrigger: React.ForwardRefExoticComponent<
      *
      * If a `href` is not provided, the chevron icon is rendered as part of the element.
      */
-    href?: string | undefined;
+    href?: string;
     /**
      * Called when the user has clicked on the trigger content.
      *
@@ -115,7 +115,7 @@ export declare const ExpandableMenuItemTrigger: React.ForwardRefExoticComponent<
      * If you need a callback for when the user expands or collapses the expandable, use
      * `onExpansionToggle` on the `ExpandableMenuItem` component instead.
      */
-    onClick?: ((event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent, analyticsAttributes: {
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent, analyticsAttributes: {
         isExpanded: boolean;
-    }) => void) | undefined;
-} & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    }) => void;
+} & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * __Is open context__
  *

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.d.ts

@@ -78,9 +78,9 @@ export declare const FlyoutMenuItemTrigger: import("react").ForwardRefExoticComp
      *
      * If you are controlling the open state of the flyout menu, use this to update your state.
      */
-    onClick?: MenuItemOnClick<HTMLButtonElement> | undefined;
+    onClick?: MenuItemOnClick<HTMLButtonElement>;
     /**
      * Indicates that the menu item is selected.
      */
-    isSelected?: boolean | undefined;
+    isSelected?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/ui/menu-item/link-menu-item.d.ts

@@ -1,8 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type Ref } from 'react';
 import type { RouterLinkComponentProps } from '@atlaskit/app-provider';
 import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
 export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = never> = MenuItemLinkOrButtonCommonProps & RouterLinkComponentProps<RouterLinkConfig> & {
@@ -25,19 +20,19 @@ export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = nev
  * A menu item link. It should be used within a `ul`.
  */
 export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string | undefined;
-    listItemRef?: Ref<HTMLDivElement> | undefined;
+    description?: string;
+    listItemRef?: React.Ref<HTMLDivElement>;
 } & RouterLinkComponentProps<RouterLinkConfig> & {
     /**
      * The native `target` attribute for the anchor element.
      */
-    target?: string | undefined;
+    target?: HTMLAnchorElement["target"];
     /**
      * Whether the menu item is selected.
      */
-    isSelected?: boolean | undefined;
+    isSelected?: boolean;
     /**
      * Called when the user has clicked on the trigger content.
      */
-    onClick?: MenuItemOnClick<HTMLAnchorElement> | undefined;
-} & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+    onClick?: MenuItemOnClick<HTMLAnchorElement>;
+} & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;

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

@@ -27,16 +27,21 @@ export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"
  * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
  * This can be inferred from the type of the `onClick` prop.
  */
-export declare const MenuItemBase: <T extends HTMLButtonElement | HTMLAnchorElement>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string | undefined;
-    listItemRef?: React.Ref<HTMLDivElement> | undefined;
+export declare const MenuItemBase: <T extends HTMLAnchorElement | HTMLButtonElement>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
+    description?: string;
+    listItemRef?: React.Ref<HTMLDivElement>;
 } & {
-    href?: string | Record<string, any> | undefined;
-    target?: string | undefined;
-    isDisabled?: boolean | undefined;
-    isSelected?: boolean | undefined;
-    ariaControls?: string | undefined;
-    ariaExpanded?: boolean | undefined;
-    ariaHasPopup?: boolean | "dialog" | undefined;
+    /**
+     * ID attribute, passed to the interactive element (anchor/button). This is not publicly exposed, and is currently only
+     * used internally by `ExpandableMenuItemTrigger` for the `aria-labelledby` attribute.
+     */
+    id?: string;
+    href?: string | Record<string, any>;
+    target?: HTMLAnchorElement["target"];
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    ariaHasPopup?: boolean | "dialog";
     onClick?: MenuItemOnClick<T> | undefined;
-} & React.RefAttributes<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+} & React.RefAttributes<T>) => React.ReactElement | null;

package/dist/types/ui/menu-item/menu-list-item.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * __Menu list item__
  *
@@ -6,6 +5,6 @@
  */
 export declare const MenuListItem: import("react").ForwardRefExoticComponent<{
     children: import("react").ReactNode;
-    testId?: string | undefined;
+    testId?: string;
     xcss?: import("@atlaskit/css").StrictXCSSProp<"display" | "scrollMarginInline", never>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/ui/menu-item/menu-list.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ListProps } from '../../components/list';
 /**
  * __Menu list__

package/dist/types/ui/menu-item/top-level-spacer.d.ts

@@ -2,7 +2,6 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
 /**
  * Use this component to create visual separation between the:
  *

package/dist/types/ui/menu-item/use-scroll-menu-item-into-view.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Scrolls the element into view once it is selected, and once all its ancestors (expandable
  * parent menu items) are expanded.

package/dist/types/ui/menu-section/divider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * __Divider__
  *

package/dist/types/ui/menu-section/menu-section-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Context for the current menu section. It holds a unique ID for the section, used for associating the section heading
  * as an accessible label for the group.

package/dist/types/ui/page-layout/aside.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { StrictXCSSProp } from '@atlaskit/css';
 import type { CommonSlotProps } from './types';
 /**

package/dist/types/ui/page-layout/banner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { StrictXCSSProp } from '@atlaskit/css';
 import type { CommonSlotProps } from './types';
 /**