@atlaskit/navigation-system 5.2.0 → 5.3.1

package/dist/es2019/ui/page-layout/side-nav/toggle-button.js

@@ -3,6 +3,7 @@ import "./toggle-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -45,7 +46,7 @@ export const SideNavToggleButton = ({
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
-  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop);
+  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop);
   const ref = useContext(SideNavToggleButtonAttachRef);
   const elementRef = useRef(null);
 
@@ -88,12 +89,37 @@ export const SideNavToggleButton = ({
   const toggleVisibility = useToggleSideNav({
     trigger: 'toggle-button'
   });
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const handleClick = useCallback((event, analyticsEvent) => {
     onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, toggleVisibility, isSideNavExpanded]);
+  }, [onClick, isSideNavExpanded, toggleVisibility]);
+  const handlePointerEnter = useCallback(() => {
+    if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
+      return;
+    }
+
+    // Hovers don't do anything on mobile, so not capturing
+    const isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+    if (!isDesktop) {
+      return;
+    }
+    const navigationAnalyticsEvent = createAnalyticsEvent({
+      source: 'topNav',
+      actionSubject: 'sideNav',
+      action: 'hovered',
+      actionSubjectId: 'sideNavButton',
+      attributes: {
+        itemState: isSideNavExpanded ? 'expanded' : 'collapsed',
+        screen: 'desktop'
+      }
+    });
+    navigationAnalyticsEvent.fire('navigation');
+  }, [createAnalyticsEvent, isSideNavExpanded]);
 
   /**
    * ## Behaviour
@@ -127,6 +153,7 @@ export const SideNavToggleButton = ({
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
     onClick: handleClick,
+    onPointerEnter: handlePointerEnter,
     testId: testId,
     isTooltipDisabled: false,
     interactionName: interactionName,

package/dist/es2019/ui/page-layout/side-nav/use-side-nav-visibility-callbacks.js

@@ -32,7 +32,7 @@ export function useSideNavVisibilityCallbacks({
       return;
     }
     if (isExpandedOnDesktop) {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current;
         (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 ? void 0 : _onExpandRef$current.call(onExpandRef, {
           screen: 'desktop',
@@ -45,7 +45,7 @@ export function useSideNavVisibilityCallbacks({
         });
       }
     } else {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren;
         (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 ? void 0 : _onCollapseRef$curren.call(onCollapseRef, {
           screen: 'desktop',
@@ -72,7 +72,7 @@ export function useSideNavVisibilityCallbacks({
       return;
     }
     if (isExpandedOnMobile) {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current3;
         (_onExpandRef$current3 = onExpandRef.current) === null || _onExpandRef$current3 === void 0 ? void 0 : _onExpandRef$current3.call(onExpandRef, {
           screen: 'mobile',
@@ -85,7 +85,7 @@ export function useSideNavVisibilityCallbacks({
         });
       }
     } else {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren3;
         (_onCollapseRef$curren3 = onCollapseRef.current) === null || _onCollapseRef$curren3 === void 0 ? void 0 : _onCollapseRef$curren3.call(onCollapseRef, {
           screen: 'mobile',

package/dist/es2019/ui/page-layout/side-nav/visibility-provider.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
@@ -8,7 +9,7 @@ export const SideNavVisibilityProvider = ({
   children,
   defaultCollapsed
 }) => {
-  const initialState = typeof defaultCollapsed === 'boolean' ? {
+  const initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -1,13 +1,7 @@
 import React, { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase } from './menu-item';
 import { MenuListItem } from './menu-list-item';
-
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
-
 /**
  * __ButtonMenuItem__
  *
@@ -20,9 +14,13 @@ export var ButtonMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     description = _ref.description,
     elemAfter = _ref.elemAfter,
     isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
     elemBefore = _ref.elemBefore,
     actionsOnHover = _ref.actionsOnHover,
     onClick = _ref.onClick,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'],
     interactionName = _ref.interactionName,
     isContentTooltipDisabled = _ref.isContentTooltipDisabled,
     visualContentRef = _ref.visualContentRef,
@@ -45,6 +43,10 @@ export var ButtonMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     actions: isDisabled ? undefined : actions,
     actionsOnHover: isDisabled ? undefined : actionsOnHover,
     onClick: onClick,
+    ariaControls: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaControls : undefined,
+    ariaExpanded: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaExpanded : undefined,
+    ariaHasPopup: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaHasPopup : undefined,
+    isSelected: fg('platform-dst-buttonmenuitem-selected-state-support') ? isSelected : undefined,
     ref: forwardedRef,
     visualContentRef: visualContentRef,
     interactionName: interactionName,

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

@@ -57,6 +57,7 @@
 ._bfhk1o0g{background-color:var(--notch-color)}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhkn7od{background-color:unset}
 ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
@@ -96,6 +97,7 @@
 ._11om6b4r:hover{animation-name:k1xyysw3}
 ._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}
+._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
 ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._7psyru3m:hover{animation-duration:0s}
 ._bir2q7pw:hover{animation-fill-mode:forwards}

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

@@ -143,7 +143,7 @@ var containerStyles = {
   showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
-  disabled: "_syaz1lh4 _irr3n7od",
+  disabled: "_syaz1lh4 _bfhkn7od _irr3n7od _30l31lh4",
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -10,6 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
@@ -134,15 +135,43 @@ function SideNavInternal(_ref) {
   var _useState = useState(defaultCollapsed),
     _useState2 = _slicedToArray(_useState, 1),
     initialDefaultCollapsed = _useState2[0];
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useState3 = useState(isExpandedOnDesktop),
+    _useState4 = _slicedToArray(_useState3, 1),
+    initialIsExpandedOnDesktop = _useState4[0];
+
+  /**
+   * Captures the initial collapsed/expanded state of the side nav.
+   *
+   * Only firing on desktop because the nav is never open by default on mobile.
+   */
+  useEffect(function () {
+    if (initialIsExpandedOnDesktop && fg('platform_dst_nav4_fhs_instrumentation_1')) {
+      var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+      if (isDesktop) {
+        var navigationAnalyticsEvent = createAnalyticsEvent({
+          source: 'topNav',
+          actionSubject: 'sideNav',
+          action: 'viewed',
+          actionSubjectId: 'sideNavMenu',
+          attributes: {
+            screen: 'desktop'
+          }
+        });
+        navigationAnalyticsEvent.fire('navigation');
+      }
+    }
+  }, [createAnalyticsEvent, initialIsExpandedOnDesktop]);
   var defaultWidth = useSafeDefaultWidth({
     defaultWidthProp: defaultWidthProp,
     fallbackDefaultWidth: fallbackDefaultWidth,
     slotName: 'SideNav'
   });
-  var _useState3 = useState(defaultWidth),
-    _useState4 = _slicedToArray(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState5 = useState(defaultWidth),
+    _useState6 = _slicedToArray(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   var clampedWidth = "clamp(".concat(widthResizeBounds.min, ", ").concat(width, "px, ").concat(widthResizeBounds.max, ")");
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var navRef = useRef(null);
@@ -294,10 +323,29 @@ function SideNavInternal(_ref) {
   var toggleVisibilityByClickOutsideOnMobile = useToggleSideNav({
     trigger: 'click-outside-on-mobile'
   });
+  useEffect(function () {
+    if (fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the old version of the hook, so we skip it when the flag is enabled
+      return;
+    }
+
+    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
+    // after SSR hydration. This should only run once, after the initial render on the client.
+    setSideNavState({
+      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+      mobile: 'collapsed',
+      flyout: 'closed',
+      lastTrigger: null
+    });
+  }, [initialDefaultCollapsed, setSideNavState]);
 
   // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
   // For SSR the new API is still necessary
   useLayoutEffect(function () {
+    if (!fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the new version of the hook, so we skip it when the flag is disabled
+      return;
+    }
     if (sideNavState !== null) {
       // Only need to do an initial sync if it hasn't been initialized from Root
       return;
@@ -315,11 +363,21 @@ function SideNavInternal(_ref) {
   var handleExpand = useCallback(function (_ref2) {
     var screen = _ref2.screen,
       trigger = _ref2.trigger;
-    if (fg('navx-full-height-sidebar')) {
+    if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
       onExpand === null || onExpand === void 0 || onExpand({
         screen: screen,
         trigger: trigger
       });
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'topNav',
+        actionSubject: 'sideNav',
+        action: 'expanded',
+        actionSubjectId: 'sideNavMenu',
+        attributes: {
+          trigger: trigger
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
     } else {
       onExpand === null || onExpand === void 0 || onExpand({
         screen: screen
@@ -329,15 +387,25 @@ function SideNavInternal(_ref) {
     // When the side nav gets expanded, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
     updateFlyoutState('force-close');
-  }, [onExpand, updateFlyoutState]);
+  }, [onExpand, updateFlyoutState, createAnalyticsEvent]);
   var handleCollapse = useCallback(function (_ref3) {
     var screen = _ref3.screen,
       trigger = _ref3.trigger;
-    if (fg('navx-full-height-sidebar')) {
+    if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
       onCollapse === null || onCollapse === void 0 || onCollapse({
         screen: screen,
         trigger: trigger
       });
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'topNav',
+        actionSubject: 'sideNav',
+        action: 'collapsed',
+        actionSubjectId: 'sideNavMenu',
+        attributes: {
+          trigger: trigger
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
     } else {
       onCollapse === null || onCollapse === void 0 || onCollapse({
         screen: screen
@@ -347,7 +415,7 @@ function SideNavInternal(_ref) {
     // When the side nav gets collapsed, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to collapse.
     updateFlyoutState('force-close');
-  }, [onCollapse, updateFlyoutState]);
+  }, [onCollapse, updateFlyoutState, createAnalyticsEvent]);
   useSideNavVisibilityCallbacks({
     onExpand: handleExpand,
     onCollapse: handleCollapse,

package/dist/esm/ui/page-layout/side-nav/toggle-button.js

@@ -7,6 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -48,7 +49,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
-  var _useState = useState(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop),
+  var _useState = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = _slicedToArray(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];
@@ -96,12 +97,36 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   var toggleVisibility = useToggleSideNav({
     trigger: 'toggle-button'
   });
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleClick = useCallback(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, toggleVisibility, isSideNavExpanded]);
+  }, [onClick, isSideNavExpanded, toggleVisibility]);
+  var handlePointerEnter = useCallback(function () {
+    if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
+      return;
+    }
+
+    // Hovers don't do anything on mobile, so not capturing
+    var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+    if (!isDesktop) {
+      return;
+    }
+    var navigationAnalyticsEvent = createAnalyticsEvent({
+      source: 'topNav',
+      actionSubject: 'sideNav',
+      action: 'hovered',
+      actionSubjectId: 'sideNavButton',
+      attributes: {
+        itemState: isSideNavExpanded ? 'expanded' : 'collapsed',
+        screen: 'desktop'
+      }
+    });
+    navigationAnalyticsEvent.fire('navigation');
+  }, [createAnalyticsEvent, isSideNavExpanded]);
 
   /**
    * ## Behaviour
@@ -136,6 +161,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
     onClick: handleClick,
+    onPointerEnter: handlePointerEnter,
     testId: testId,
     isTooltipDisabled: false,
     interactionName: interactionName,

package/dist/esm/ui/page-layout/side-nav/use-side-nav-visibility-callbacks.js

@@ -31,7 +31,7 @@ export function useSideNavVisibilityCallbacks(_ref) {
       return;
     }
     if (isExpandedOnDesktop) {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current;
         (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 || _onExpandRef$current.call(onExpandRef, {
           screen: 'desktop',
@@ -44,7 +44,7 @@ export function useSideNavVisibilityCallbacks(_ref) {
         });
       }
     } else {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren;
         (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 || _onCollapseRef$curren.call(onCollapseRef, {
           screen: 'desktop',
@@ -71,7 +71,7 @@ export function useSideNavVisibilityCallbacks(_ref) {
       return;
     }
     if (isExpandedOnMobile) {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current3;
         (_onExpandRef$current3 = onExpandRef.current) === null || _onExpandRef$current3 === void 0 || _onExpandRef$current3.call(onExpandRef, {
           screen: 'mobile',
@@ -84,7 +84,7 @@ export function useSideNavVisibilityCallbacks(_ref) {
         });
       }
     } else {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren3;
         (_onCollapseRef$curren3 = onCollapseRef.current) === null || _onCollapseRef$curren3 === void 0 || _onCollapseRef$curren3.call(onCollapseRef, {
           screen: 'mobile',

package/dist/esm/ui/page-layout/side-nav/visibility-provider.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
@@ -8,7 +9,7 @@ import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-
 export var SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed;
-  var initialState = typeof defaultCollapsed === 'boolean' ? {
+  var initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -1,10 +1,5 @@
 import React from 'react';
 import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
 export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
     /**
      * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
@@ -24,6 +19,20 @@ export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
      * Called when the user has clicked on the trigger content.
      */
     onClick?: MenuItemOnClick<HTMLButtonElement>;
+    /**
+     * Identifies the popup element that this element controls when it is used as a popup trigger.
+     * Should match the `id` of the popup content for screen readers to understand the relationship.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the popup is currently open or closed,
+     * when this element is used as a popup trigger.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 };
 /**
  * __ButtonMenuItem__

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

@@ -34,10 +34,6 @@ export type ExpandableMenuItemTriggerProps = MenuItemCommonProps & Omit<MenuItem
      * will always be displayed.
      */
     elemBefore?: ReactNode;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    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

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

@@ -37,10 +37,6 @@ export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
      * If you are controlling the open state of the flyout menu, use this to update your state.
      */
     onClick?: MenuItemOnClick<HTMLButtonElement>;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
 };
 /**
  * __FlyoutMenuItemTrigger__

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

@@ -34,7 +34,6 @@ type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> = MenuIt
     href?: string | Record<string, any>;
     target?: HTMLAnchorElement['target'];
     isDisabled?: boolean;
-    isSelected?: boolean;
     ariaControls?: string;
     ariaExpanded?: boolean;
     ariaHasPopup?: boolean | 'dialog';

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

@@ -33,6 +33,10 @@ export type MenuItemCommonProps = {
      * to display the full menu content and description of a menu item close by (eg with another popup)
      */
     isContentTooltipDisabled?: boolean;
+    /**
+     * Indicates that the menu item is selected.
+     */
+    isSelected?: boolean;
     /**
      * Exposes the visually complete menu item, including:
      *

package/dist/types/ui/page-layout/panel-splitter/context.d.ts

@@ -50,7 +50,7 @@ export type PanelSplitterContextType = {
     isEnabled?: boolean;
     /**
      * The keyboard shortcut to display in the tooltip.
-     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
+     *
      * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
      */
     shortcut?: TooltipProps['shortcut'];

package/dist/types/ui/page-layout/side-nav/side-nav.d.ts

@@ -44,13 +44,13 @@ type SideNavProps = CommonSlotProps & {
     /**
      * Called when the side nav is expanded.
      *
-     * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
+     * Note: The trigger parameter is only provided when the `platform_dst_nav4_fhs_instrumentation_1` feature flag is enabled.
      */
     onExpand?: VisibilityCallback;
     /**
      * Called when the side nav is collapsed.
      *
-     * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
+     * Note: The trigger parameter is only provided when the `platform_dst_nav4_fhs_instrumentation_1` feature flag is enabled.
      */
     onCollapse?: VisibilityCallback;
     /**

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

@@ -1,10 +1,5 @@
 import React from 'react';
 import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
 export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
     /**
      * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
@@ -24,6 +19,20 @@ export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
      * Called when the user has clicked on the trigger content.
      */
     onClick?: MenuItemOnClick<HTMLButtonElement>;
+    /**
+     * Identifies the popup element that this element controls when it is used as a popup trigger.
+     * Should match the `id` of the popup content for screen readers to understand the relationship.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the popup is currently open or closed,
+     * when this element is used as a popup trigger.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 };
 /**
  * __ButtonMenuItem__

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

@@ -34,10 +34,6 @@ export type ExpandableMenuItemTriggerProps = MenuItemCommonProps & Omit<MenuItem
      * will always be displayed.
      */
     elemBefore?: ReactNode;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    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

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

@@ -37,10 +37,6 @@ export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
      * If you are controlling the open state of the flyout menu, use this to update your state.
      */
     onClick?: MenuItemOnClick<HTMLButtonElement>;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
 };
 /**
  * __FlyoutMenuItemTrigger__

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

@@ -34,7 +34,6 @@ type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> = MenuIt
     href?: string | Record<string, any>;
     target?: HTMLAnchorElement['target'];
     isDisabled?: boolean;
-    isSelected?: boolean;
     ariaControls?: string;
     ariaExpanded?: boolean;
     ariaHasPopup?: boolean | 'dialog';

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

@@ -33,6 +33,10 @@ export type MenuItemCommonProps = {
      * to display the full menu content and description of a menu item close by (eg with another popup)
      */
     isContentTooltipDisabled?: boolean;
+    /**
+     * Indicates that the menu item is selected.
+     */
+    isSelected?: boolean;
     /**
      * Exposes the visually complete menu item, including:
      *

package/dist/types-ts4.5/ui/page-layout/panel-splitter/context.d.ts

@@ -50,7 +50,7 @@ export type PanelSplitterContextType = {
     isEnabled?: boolean;
     /**
      * The keyboard shortcut to display in the tooltip.
-     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
+     *
      * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
      */
     shortcut?: TooltipProps['shortcut'];

package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav.d.ts

@@ -44,13 +44,13 @@ type SideNavProps = CommonSlotProps & {
     /**
      * Called when the side nav is expanded.
      *
-     * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
+     * Note: The trigger parameter is only provided when the `platform_dst_nav4_fhs_instrumentation_1` feature flag is enabled.
      */
     onExpand?: VisibilityCallback;
     /**
      * Called when the side nav is collapsed.
      *
-     * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
+     * Note: The trigger parameter is only provided when the `platform_dst_nav4_fhs_instrumentation_1` feature flag is enabled.
      */
     onCollapse?: VisibilityCallback;
     /**