@atlaskit/navigation-system 0.166.0

package/dist/types/entry-points/side-nav-items/container-avatar.d.ts

@@ -0,0 +1 @@
+export { ContainerAvatar, type ContainerAvatarProps } from '../../ui/menu-item/container-avatar';

package/dist/types/entry-points/side-nav-items/drag-and-drop/drag-preview.d.ts

@@ -0,0 +1 @@
+export { DragPreview } from '../../../ui/menu-item/drag-and-drop/drag-preview';

package/dist/types/entry-points/side-nav-items/drag-and-drop/drop-indicator.d.ts

@@ -0,0 +1 @@
+export { DropIndicator, type Instruction, type Operation, } from '../../../ui/menu-item/drag-and-drop/drop-indicator';

package/dist/types/entry-points/side-nav-items/drag-and-drop/group-drop-indicator.d.ts

@@ -0,0 +1 @@
+export { GroupDropIndicator } from '../../../ui/menu-item/drag-and-drop/group-drop-indicator';

package/dist/types/entry-points/side-nav-items/drag-and-drop/hitbox.d.ts

@@ -0,0 +1 @@
+export { attachInstruction, extractInstruction, type Availability, type Operation, type Instruction, } from '../../../ui/menu-item/drag-and-drop/hitbox';

package/dist/types/entry-points/side-nav-items/drag-and-drop/use-menu-item-drag-and-drop.d.ts

@@ -0,0 +1 @@
+export { useMenuItemDragAndDrop, type TMenuItemDragAndDropState, } from '../../../ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop';

package/dist/types/entry-points/side-nav-items/expandable-menu-item.d.ts

@@ -0,0 +1,4 @@
+export { ExpandableMenuItem, type ExpandableMenuItemProps, } from '../../ui/menu-item/expandable-menu-item/expandable-menu-item';
+export { ExpandableMenuItemTrigger, type ExpandableMenuItemTriggerProps, } from '../../ui/menu-item/expandable-menu-item/expandable-menu-item-trigger';
+export { ExpandableMenuItemContent, type ExpandableMenuItemContentProps, } from '../../ui/menu-item/expandable-menu-item/expandable-menu-item-content';
+export { useIsExpanded } from '../../ui/menu-item/expandable-menu-item/expandable-menu-item-context';

package/dist/types/entry-points/side-nav-items/flyout-menu-item.d.ts

@@ -0,0 +1,3 @@
+export { FlyoutMenuItem, type FlyoutMenuItemProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item';
+export { FlyoutMenuItemContent, type FlyoutMenuItemContentProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-content';
+export { FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';

package/dist/types/entry-points/side-nav-items/link-menu-item.d.ts

@@ -0,0 +1,3 @@
+export { LinkMenuItem, type LinkMenuItemProps } from '../../ui/menu-item/link-menu-item';
+export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
+export type { MenuItemOnClick } from '../../ui/menu-item/types';

package/dist/types/entry-points/side-nav-items/menu-list-item.d.ts

@@ -0,0 +1 @@
+export { MenuListItem } from '../../ui/menu-item/menu-list-item';

package/dist/types/entry-points/side-nav-items/menu-list.d.ts

@@ -0,0 +1 @@
+export { MenuList } from '../../ui/menu-item/menu-list';

package/dist/types/entry-points/side-nav-items/menu-section.d.ts

@@ -0,0 +1,3 @@
+export { MenuSection } from '../../ui/menu-section/menu-section';
+export { MenuSectionHeading } from '../../ui/menu-section/menu-section-heading';
+export { Divider } from '../../ui/menu-section/divider';

package/dist/types/entry-points/side-nav-items/top-level-spacer.d.ts

@@ -0,0 +1 @@
+export { TopLevelSpacer } from '../../ui/menu-item/top-level-spacer';

package/dist/types/entry-points/top-nav-items/create-button.d.ts

@@ -0,0 +1 @@
+export { CreateButton } from '../../ui/top-nav-items/create-button';

package/dist/types/entry-points/top-nav-items/custom-title.d.ts

@@ -0,0 +1 @@
+export { CustomTitle } from '../../ui/top-nav-items/custom-title';

package/dist/types/entry-points/top-nav-items/help.d.ts

@@ -0,0 +1 @@
+export { Help } from '../../ui/top-nav-items/help';

package/dist/types/entry-points/top-nav-items/index.d.ts

@@ -0,0 +1,13 @@
+export { AppSwitcher } from '../../ui/top-nav-items/app-switcher';
+export { NavLogo } from '../../ui/top-nav-items/nav-logo';
+export { Search } from '../../ui/top-nav-items/search';
+export { ChatButton } from '../../ui/top-nav-items/chat-button';
+export { EndItem } from '../../ui/top-nav-items/end-item';
+export { Notifications } from '../../ui/top-nav-items/notifications';
+export { CreateButton } from '../../ui/top-nav-items/create-button';
+export { Help } from '../../ui/top-nav-items/help';
+export { Profile } from '../../ui/top-nav-items/profile';
+export { Settings } from '../../ui/top-nav-items/settings';
+export { LogIn } from '../../ui/top-nav-items/log-in';
+export { CustomTitle } from '../../ui/top-nav-items/custom-title';
+export { MenuListItem } from '../../ui/menu-item/menu-list-item';

package/dist/types/entry-points/top-nav-items/log-in.d.ts

@@ -0,0 +1 @@
+export { LogIn } from '../../ui/top-nav-items/log-in';

package/dist/types/entry-points/top-nav-items/notifications.d.ts

@@ -0,0 +1 @@
+export { Notifications } from '../../ui/top-nav-items/notifications';

package/dist/types/entry-points/top-nav-items/profile.d.ts

@@ -0,0 +1 @@
+export { Profile } from '../../ui/top-nav-items/profile';

package/dist/types/entry-points/top-nav-items/settings.d.ts

@@ -0,0 +1 @@
+export { Settings } from '../../ui/top-nav-items/settings';

package/dist/types/index.d.ts

@@ -0,0 +1,47 @@
+export { ExpandableMenuItem, type ExpandableMenuItemProps, } from './ui/menu-item/expandable-menu-item/expandable-menu-item';
+export { ExpandableMenuItemTrigger, type ExpandableMenuItemTriggerProps, } from './ui/menu-item/expandable-menu-item/expandable-menu-item-trigger';
+export { ExpandableMenuItemContent, type ExpandableMenuItemContentProps, } from './ui/menu-item/expandable-menu-item/expandable-menu-item-content';
+export { useIsExpanded } from './ui/menu-item/expandable-menu-item/expandable-menu-item-context';
+export { FlyoutMenuItem, type FlyoutMenuItemProps, } from './ui/menu-item/flyout-menu-item/flyout-menu-item';
+export { FlyoutMenuItemContent, type FlyoutMenuItemContentProps, } from './ui/menu-item/flyout-menu-item/flyout-menu-item-content';
+export { FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, } from './ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';
+export { ButtonMenuItem, type ButtonMenuItemProps } from './ui/menu-item/button-menu-item';
+export { LinkMenuItem, type LinkMenuItemProps } from './ui/menu-item/link-menu-item';
+export { COLLAPSE_ELEM_BEFORE } from './ui/menu-item/menu-item-signals';
+export { MenuListItem } from './ui/menu-item/menu-list-item';
+export { ContainerAvatar, type ContainerAvatarProps } from './ui/menu-item/container-avatar';
+export { MenuList } from './ui/menu-item/menu-list';
+export { TopLevelSpacer } from './ui/menu-item/top-level-spacer';
+export { MenuSection } from './ui/menu-section/menu-section';
+export { MenuSectionHeading } from './ui/menu-section/menu-section-heading';
+export { Divider } from './ui/menu-section/divider';
+export { Aside } from './ui/page-layout/aside';
+export { Banner } from './ui/page-layout/banner';
+export { Main } from './ui/page-layout/main/main';
+export { Panel } from './ui/page-layout/panel';
+export { Root } from './ui/page-layout/root';
+export { SideNav } from './ui/page-layout/side-nav/side-nav';
+export { TopNav } from './ui/page-layout/top-nav/top-nav';
+export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
+export { SideNavToggleButton, type SideNavVisibilityChangeAnalyticsAttributes, } from './ui/page-layout/side-nav/toggle-button';
+export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
+export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
+export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
+export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
+export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';
+export type { ResizeBounds } from './ui/page-layout/panel-splitter/types';
+export { TopNavStart } from './ui/page-layout/top-nav/top-nav-start';
+export { AppSwitcher } from './ui/top-nav-items/app-switcher';
+export { NavLogo } from './ui/top-nav-items/nav-logo';
+export { TopNavMiddle } from './ui/page-layout/top-nav/top-nav-middle';
+export { Search } from './ui/top-nav-items/search';
+export { ChatButton } from './ui/top-nav-items/chat-button';
+export { TopNavEnd } from './ui/page-layout/top-nav/top-nav-end';
+export { EndItem } from './ui/top-nav-items/end-item';
+export { CreateButton } from './ui/top-nav-items/create-button';
+export { Help } from './ui/top-nav-items/help';
+export { Notifications } from './ui/top-nav-items/notifications';
+export { Profile } from './ui/top-nav-items/profile';
+export { Settings } from './ui/top-nav-items/settings';
+export { LogIn } from './ui/top-nav-items/log-in';

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

@@ -0,0 +1,55 @@
+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`
+     * props are not used when `isDisabled` is true due to ergonomic type issues with `boolean`
+     * types (as oppposed to literal `true` or `false` types), e.g. if a conditional boolean
+     * variable is passed to `isDisabled`.
+     */
+    /**
+     * Whether the menu item is disabled.
+     *
+     * When disabled, content in the `actions` and `actionsOnHover` props will not be rendered.
+     *
+     * The menu item will not be interactive and will not respond to hover or focus.
+     */
+    isDisabled?: boolean;
+    /**
+     * Called when the user has clicked on the trigger content.
+     */
+    onClick?: MenuItemOnClick<HTMLButtonElement>;
+};
+/**
+ * __ButtonMenuItem__
+ *
+ * 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;
+} & {
+    /**
+     * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
+     * props are not used when `isDisabled` is true due to ergonomic type issues with `boolean`
+     * types (as oppposed to literal `true` or `false` types), e.g. if a conditional boolean
+     * variable is passed to `isDisabled`.
+     */
+    /**
+     * Whether the menu item is disabled.
+     *
+     * When disabled, content in the `actions` and `actionsOnHover` props will not be rendered.
+     *
+     * The menu item will not be interactive and will not respond to hover or focus.
+     */
+    isDisabled?: boolean | undefined;
+    /**
+     * Called when the user has clicked on the trigger content.
+     */
+    onClick?: MenuItemOnClick<HTMLButtonElement> | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,15 @@
+/**
+ * _Internally_ shared value for the menu item indentation. Used in:
+ * - Expandable menu item content, to add padding for each expandable level
+ * - The base menu item, to set the negative inset to extend the clickable area of nested menu items
+ * to the root level menu items.
+ *
+ * Internal to the package only. Should not be exported from the package.
+ *
+ * Note: We're unable to use a token() call here, as Compiled complains about function calls in imported
+ * values - it requires statically defined values only.
+ *
+ * @private
+ * @internal
+ */
+export declare const expandableMenuItemIndentation = "12px";

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type ContainerAvatarProps = {
+    /**
+     * The source of the avatar image.
+     */
+    src: string;
+};
+/**
+ * __Container avatar__
+ *
+ * This component has been introduced specifically for the Nav4 sidebar because the existing Avatar component
+ * did not offer the correct sizes to align with the designs. It was necessary to create a new component rather than
+ * using the ADS image component because that did not allow the ability to set the border and radius and the desired
+ * presentation was not achievable through nesting within another styled component. At some point this component maybe
+ * removed if the Avatar component is updated to allow for the desired presentation.
+ *
+ * A container avatar to be used in sidebar navigation items.
+ */
+export declare const ContainerAvatar: ({ src }: ContainerAvatarProps) => JSX.Element;

package/dist/types/ui/menu-item/drag-and-drop/drag-preview.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * A drag preview for sidebar menu items.
+ *
+ * The limited API corresponds with the limited amount of information we
+ * want to show in drag previews.
+ *
+ * If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
+ * There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
+ * need to maintain vertical side navigation vertical alignment in the drag preview.
+ *
+ * Please ensure the drag preview is pushed away from the users pointer
+ * (with `pointerOutsideOfPreview()` from Pragmatic drag and drop) by our
+ * standard amount (`{x: token('space.200'), y: token('space.100')`)
+ */
+export declare function DragPreview({ elemBefore, children, }: {
+    elemBefore?: ReactNode;
+    children: ReactNode;
+}): JSX.Element;

package/dist/types/ui/menu-item/drag-and-drop/drop-indicator.d.ts

@@ -0,0 +1,6 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+export { type Instruction, type Operation, DropIndicator, } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/list-item';

package/dist/types/ui/menu-item/drag-and-drop/group-drop-indicator.d.ts

@@ -0,0 +1,6 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+export { GroupDropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/group';

package/dist/types/ui/menu-item/drag-and-drop/hitbox.d.ts

@@ -0,0 +1,6 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+export { type Availability, type Operation, type Instruction, attachInstruction, extractInstruction, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';

package/dist/types/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { attachInstruction } from './hitbox';
+type TInternalState = {
+    type: 'idle';
+} | {
+    type: 'preview';
+    container: HTMLElement;
+    ui: {
+        elemBefore?: ReactNode;
+        content: ReactNode;
+    };
+} | {
+    type: 'dragging';
+} | {
+    type: 'is-over';
+    instruction: Instruction | null;
+};
+export type TMenuItemDragAndDropState = Exclude<TInternalState, {
+    type: 'preview';
+}> | {
+    type: 'preview';
+};
+type TPDNDDraggableArgs = Required<Parameters<typeof draggable>[0]>;
+type TPDNDDropTargetArgs = Required<Parameters<typeof dropTargetForElements>[0]>;
+type TDraggableArgs = {
+    getDragPreviewPieces: (args: Parameters<TPDNDDraggableArgs['getInitialData']>[0]) => {
+        elemBefore?: ReactNode;
+        content: ReactNode;
+    };
+    getInitialData: (args: Parameters<TPDNDDraggableArgs['getInitialData']>[0]) => Record<string | symbol, unknown>;
+    canDrag?: TPDNDDraggableArgs['canDrag'];
+};
+type TDropTargetArgs = {
+    getOperations: (args: Parameters<TPDNDDropTargetArgs['getData']>[0]) => Parameters<typeof attachInstruction>[1]['operations'];
+    getData: TPDNDDropTargetArgs['getData'];
+    canDrop: TPDNDDropTargetArgs['canDrop'];
+};
+/**
+ * A convenience helper for setting up drag and drop for menu items
+ *
+ * - Don't include the `draggable` property if you don't want the menu item to be a draggable
+ * - Don't include the `dropTarget` property if you don't want the menu item to be a drop target
+ */
+export declare function useMenuItemDragAndDrop({ draggable: draggableArgs, dropTarget: dropTargetArgs, }: {
+    draggable?: TDraggableArgs;
+    dropTarget?: TDropTargetArgs;
+}): {
+    state: TMenuItemDragAndDropState;
+    draggableButtonRef: import("react").MutableRefObject<HTMLButtonElement | null>;
+    dropTargetRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    draggableAnchorRef: import("react").MutableRefObject<HTMLAnchorElement | null>;
+    dragPreview: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null;
+    dropIndicator: false | JSX.Element | null;
+};
+export {};

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

@@ -0,0 +1,7 @@
+/**
+ * @jsxFrag
+ * @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-content.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export type ExpandableMenuItemContentProps = {
+    /**
+     * The contents of the expandable menu item.
+     */
+    children: ReactNode;
+};
+/**
+ * __ExpandableMenuItemContent__
+ *
+ * The expandable and collapsable section of the expandable menu item. It should contain the nested menu items.
+ */
+export declare const ExpandableMenuItemContent: import("react").ForwardRefExoticComponent<ExpandableMenuItemContentProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+/// <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
+ * shown within the menu item tree.
+ */
+export declare const AreAllAncestorsExpandedContext: import("react").Context<boolean | null>;
+/**
+ * A context for storing the isExpanded value of the ExpandableMenuItem.
+ */
+export declare const IsExpandedContext: import("react").Context<boolean | null>;
+/**
+ * A context for storing a function that sets isExpanded value of the ExpandableMenuItem.
+ */
+export declare const SetIsExpandedContext: import("react").Context<((value: boolean) => void) | null>;
+/**
+ * A context for storing a function that triggers when isExpanded value of the ExpandableMenuItem is changed.
+ */
+export declare const OnExpansionToggleContext: import("react").Context<onExpansionToggle | null>;
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export declare const LevelContext: import("react").Context<number>;
+export declare const useIsExpanded: () => boolean;
+export declare const useSetIsExpanded: () => (value: boolean) => void;
+export declare const useOnExpansionToggle: () => onExpansionToggle | null;
+export declare const useLevel: () => number;
+/**
+ * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
+ * shown within the menu item tree.
+ *
+ * It works by combining (using &&) all the expansion states of the current menu item's ancestors.
+ *
+ * Using `true` as the fallback for cases when the menu item does not have ancestors.
+ */
+export declare const useAreAllAncestorsExpanded: () => boolean;
+export {};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export declare const ExpandableMenuItemLevelContext: import("react").Context<number>;

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

@@ -0,0 +1,121 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { type ReactNode } from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { MenuItemCommonProps, MenuItemSlots } from '../types';
+export type ExpandableMenuItemTriggerProps = MenuItemCommonProps & Omit<MenuItemSlots, 'actionsOnHover' | 'elemBefore'> & {
+    /**
+     * `ReactNode` to be placed visually after the `children` and will
+     * only be displayed on hover or focus, or when the expandable menu item
+     * is expanded.
+     *
+     * It is intended for additional actions (e.g. IconButtons).
+     *
+     * This `ReactNode` will replace `elemAfter` on hover/focus or when expanded.
+     *
+     * This `ReactNode` will be rendered visually on top of the main
+     * interactive element for the menu item. If this element does not
+     * contain an interactive element (`button` or `a`) then `pointer-events`
+     * will be set to `none` on this slot so that users can click through
+     * this element onto the main interactive element of the menu item.
+     */
+    actionsOnHover?: ReactNode;
+    /**
+     * The element to display before the content of the menu item.
+     *
+     * By default, a chevron icon will be displayed in this slot. If a custom `elemBefore`
+     * is provided, the custom element will replaced by the chevron icon while the user is
+     * hovering or focused on the item.
+     *
+     * `ExpandableMenuItemTrigger` does not respect `COLLAPSE_ELEM_BEFORE` as a chevron
+     * 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
+     * will only expand or collapse the expandable.
+     *
+     * If a `href` is not provided, the chevron icon is rendered as part of the element.
+     */
+    href?: string;
+    /**
+     * Called when the user has clicked on the trigger content.
+     *
+     * __It is not called when the user clicks on the expand/collapse chevron icon button.__
+     * This is to differentiate a click that will only "expand" the menu item _without selecting it_,
+     * from a click to expand _and_ "select" or navigate to the menu item.
+     *
+     * 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: {
+        isExpanded: boolean;
+    }) => void;
+};
+/**
+ * __ExpandableMenuItemTrigger__
+ *
+ * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
+ */
+export declare const ExpandableMenuItemTrigger: React.ForwardRefExoticComponent<MenuItemCommonProps & Omit<MenuItemSlots, "actionsOnHover" | "elemBefore"> & {
+    /**
+     * `ReactNode` to be placed visually after the `children` and will
+     * only be displayed on hover or focus, or when the expandable menu item
+     * is expanded.
+     *
+     * It is intended for additional actions (e.g. IconButtons).
+     *
+     * This `ReactNode` will replace `elemAfter` on hover/focus or when expanded.
+     *
+     * This `ReactNode` will be rendered visually on top of the main
+     * interactive element for the menu item. If this element does not
+     * contain an interactive element (`button` or `a`) then `pointer-events`
+     * will be set to `none` on this slot so that users can click through
+     * this element onto the main interactive element of the menu item.
+     */
+    actionsOnHover?: ReactNode;
+    /**
+     * The element to display before the content of the menu item.
+     *
+     * By default, a chevron icon will be displayed in this slot. If a custom `elemBefore`
+     * is provided, the custom element will replaced by the chevron icon while the user is
+     * hovering or focused on the item.
+     *
+     * `ExpandableMenuItemTrigger` does not respect `COLLAPSE_ELEM_BEFORE` as a chevron
+     * will always be displayed.
+     */
+    elemBefore?: ReactNode;
+    /**
+     * Indicates that the menu item is selected.
+     */
+    isSelected?: boolean | undefined;
+    /**
+     * 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
+     * will only expand or collapse the expandable.
+     *
+     * If a `href` is not provided, the chevron icon is rendered as part of the element.
+     */
+    href?: string | undefined;
+    /**
+     * Called when the user has clicked on the trigger content.
+     *
+     * __It is not called when the user clicks on the expand/collapse chevron icon button.__
+     * This is to differentiate a click that will only "expand" the menu item _without selecting it_,
+     * from a click to expand _and_ "select" or navigate to the menu item.
+     *
+     * 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: {
+        isExpanded: boolean;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

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

@@ -0,0 +1,61 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export type ExpandableMenuItemProps = {
+    /**
+     * The controlled expanded state of the menu item. Allows you to control the expanded state of
+     * the menu item externally.
+     *
+     * If you are controlling the state, you should update your state using `onExpansionToggle`.
+     */
+    isExpanded?: boolean;
+    /**
+     * The default expanded state of the menu item.
+     *
+     * You can use this to set the default expanded state without needing to entirely control the state.
+     */
+    isDefaultExpanded?: boolean;
+    /**
+     * Called when the user has interacted with the menu item to expand or collapse it.
+     *
+     * It is not called when the `isExpanded` controlled state prop is changed.
+     *
+     * If you are controlling the expanded state, you should use this callback to update your state.
+     */
+    onExpansionToggle?: (isExpanded: boolean) => void;
+    /**
+     * Should contain `ExpandableMenuItemTrigger` and `ExpandableMenuItemContent`.
+     */
+    children: ReactNode;
+    /**
+     * A slot to render a drop indicator on an entire menu item (trigger + content).
+     *
+     * This should only be used when the **whole `ExpandableMenuItem` is a drop target**,
+     * and not when only the `ExpandableMenuItemTrigger` is a drop target.
+     */
+    dropIndicator?: ReactNode;
+};
+/**
+ * __ExpandableMenuItem__
+ *
+ * A composable component for nested menu items that can be revealed and hidden by interacting witih the parent menu item.
+ *
+ * Follows the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+ *
+ * Should be used with `ExpandableMenuItemTrigger` as the parent menu item, and children menu items should be wrapped in a `ExpandableMenuItemContent`.
+ *
+ * Usage example:
+ * ```jsx
+ * <ExpandableMenuItem>
+ *   <ExpandableMenuItemTrigger>Parent menu item</ExpandableMenuItemTrigger>
+ *   <ExpandableMenuItemContent>
+ *     <ButtonMenuItem>Item 1</ButtonMenuItem>
+ *     <ButtonMenuItem>Item 2</ButtonMenuItem>
+ *   </ExpandableMenuItemContent>
+ * </ExpandableMenuItem>
+ * ```
+ */
+export declare const ExpandableMenuItem: import("react").ForwardRefExoticComponent<ExpandableMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,32 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export type FlyoutMenuItemContentProps = {
+    /**
+     * The contents of the flyout menu.
+     */
+    children: React.ReactNode;
+    /**
+     * A `testId` that is applied to the container element as the `data-testid` attribute.
+     */
+    containerTestId?: string;
+    /**
+     * Called when the flyout menu is closed.
+     *
+     * If you are controlling the open state of the flyout menu, use this to update your state.
+     */
+    onClose?: () => void;
+    /**
+     * Whether the flyout menu should be focused when opened.
+     * @default true
+     */
+    autoFocus?: boolean;
+};
+/**
+ * __FlyoutMenuItemContent__
+ *
+ * The content that appears when the flyout menu is open.
+ */
+export declare const FlyoutMenuItemContent: React.ForwardRefExoticComponent<FlyoutMenuItemContentProps & React.RefAttributes<HTMLDivElement>>;