@payfit/unity-components 3.23.24 → 3.23.26

package/dist/esm/core/components/menu/Menu.context.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface MenuContextValue {
+    compact: boolean;
+}
+export declare function MenuProvider({ children, compact, }: PropsWithChildren<{
+    compact?: boolean;
+}>): import('react/jsx-runtime').JSX.Element;
+export declare function useMenuContext(): MenuContextValue;
+export {};

package/dist/esm/core/components/menu/Menu.context.js

@@ -0,0 +1,15 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/menu/Menu.context.tsx
+var r = e({ compact: !1 });
+function i({ children: e, compact: t = !1 }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: { compact: t },
+		children: e
+	});
+}
+function a() {
+	return t(r);
+}
+//#endregion
+export { i as MenuProvider, a as useMenuContext };

package/dist/esm/core/components/menu/Menu.d.ts

@@ -1,12 +1,57 @@
 import { MenuTriggerProps } from 'react-aria-components/Menu';
 import { PopoverProps } from 'react-aria-components/Popover';
-type MenuProps = Omit<MenuTriggerProps, 'className' | 'style'> & {
+export interface MenuProps extends Omit<MenuTriggerProps, 'className' | 'style'> {
+    /** Renders all menu content with a denser spacing treatment. */
+    compact?: boolean;
+    /** Positions the menu popover relative to its trigger. */
     placement?: PopoverProps['placement'];
+    /** Adds classes to the Unity popover that wraps the menu content. */
     popoverClassName?: string;
+    /** Forwards a ref to the element used to position the popover. */
     triggerRef?: PopoverProps['triggerRef'];
-};
-export declare function Menu({ defaultOpen, children, popoverClassName, triggerRef, placement, ...rest }: MenuProps): import('react/jsx-runtime').JSX.Element;
+}
+/**
+ * Gives people a keyboard-accessible list of actions or navigation choices.
+ *
+ * Compose `Menu` with exactly two children: a `MenuTrigger` and a
+ * `MenuContent`. React Aria manages opening, focus restoration, keyboard
+ * navigation, and dismissal while Unity supplies the menu surface and item
+ * styling.
+ * @param props - Trigger behavior, popover positioning, and menu content.
+ * @param props.children - A `MenuTrigger` followed by a `MenuContent`.
+ * @param props.compact - Renders all menu content with compact spacing.
+ * @param props.defaultOpen - Opens the menu when it first renders.
+ * @param props.placement - Positions the menu relative to its trigger.
+ * @param props.popoverClassName - Adds classes to the menu popover.
+ * @param props.triggerRef - Forwards a ref to the popover positioning element.
+ * @see {@link MenuProps} for all available props.
+ * @see {@link MenuSubmenu} for nested action menus.
+ * @example
+ * ```tsx
+ * import {
+ *   Menu,
+ *   MenuContent,
+ *   MenuTrigger,
+ *   RawMenuItem,
+ * } from '@payfit/unity-components'
+ *
+ * export function ActionsMenu() {
+ *   return (
+ *     <Menu>
+ *       <MenuTrigger>Actions</MenuTrigger>
+ *       <MenuContent>
+ *         <RawMenuItem onAction={() => console.log('Save')}>Save</RawMenuItem>
+ *         <RawMenuItem href="/settings">Settings</RawMenuItem>
+ *       </MenuContent>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * Keep the trigger and content as direct children of `Menu`. Use
+ * `MenuSubmenu` inside `MenuContent` instead of nesting a second `Menu`.
+ */
+export declare function Menu({ defaultOpen, compact, children, popoverClassName, triggerRef, placement, ...rest }: MenuProps): import('react/jsx-runtime').JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }
-export {};

package/dist/esm/core/components/menu/Menu.js

@@ -1,22 +1,25 @@
-import e from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { MenuTrigger as i, Popover as a } from "react-aria-components/Menu";
+import { MenuProvider as e } from "./Menu.context.js";
+import { menuPopover as t } from "./menu.variants.js";
+import n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { MenuTrigger as a, Popover as o } from "react-aria-components/Menu";
 //#region src/core/components/menu/Menu.tsx
-var o = t({ base: "uy:flex uy:flex-col uy:justify-end uy:items-start uy:p-100 uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-300" });
-function s({ defaultOpen: t, children: s, popoverClassName: c, triggerRef: l, placement: u, ...d }) {
-	let [f, p] = e.Children.toArray(s);
-	if (!f || !p) throw Error("Menu must have a trigger and a menu content");
-	return /* @__PURE__ */ r(i, {
-		defaultOpen: t,
-		...d,
-		children: [f, /* @__PURE__ */ n(a, {
-			triggerRef: l,
-			placement: u,
-			className: o({ className: c }),
-			"data-dd-privacy": "allow",
-			children: p
-		})]
+function s({ defaultOpen: s, compact: c = !1, children: l, popoverClassName: u, triggerRef: d, placement: f, ...p }) {
+	let [m, h] = n.Children.toArray(l);
+	if (!m || !h) throw Error("Menu must have a trigger and a menu content");
+	return /* @__PURE__ */ r(e, {
+		compact: c,
+		children: /* @__PURE__ */ i(a, {
+			defaultOpen: s,
+			...p,
+			children: [m, /* @__PURE__ */ r(o, {
+				triggerRef: d,
+				placement: f,
+				className: t({ className: u }),
+				"data-dd-privacy": "allow",
+				children: h
+			})]
+		})
 	});
 }
 s.displayName = "Menu";

package/dist/esm/core/components/menu/menu.variants.d.ts

@@ -0,0 +1 @@
+export declare const menuPopover: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;

package/dist/esm/core/components/menu/menu.variants.js

@@ -0,0 +1,9 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/menu/menu.variants.ts
+var t = e({ base: [
+	"uy:flex uy:flex-col uy:justify-start uy:items-start uy:p-100",
+	"uy:max-h-[var(--popover-available-height,100dvh)] uy:overflow-x-hidden uy:overflow-y-auto",
+	"uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-300"
+] });
+//#endregion
+export { t as menuPopover };

package/dist/esm/core/components/menu/parts/MenuContent.d.ts

@@ -1,14 +1,51 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { MenuProps as ReactAriaMenuProps } from 'react-aria-components/Menu';
-interface MenuContent {
+export interface MenuContentProps {
+    /** Sets a fixed width for the menu panel. */
     width?: number;
-    /** Add custom classes to the menu content */
+    /** Adds custom classes to the menu panel. */
     className?: string;
+    /** Controls whether items can be selected and which selection model to use. */
     selectionMode?: ReactAriaMenuProps<object>['selectionMode'];
+    /** Controls the selected item keys for selection-enabled menus. */
     selectedKeys?: ReactAriaMenuProps<object>['selectedKeys'];
+    /** Renders custom content when the menu has no items. */
+    renderEmptyState?: ReactNode | (() => ReactNode);
 }
-export declare function MenuContent({ children, width, className, selectionMode, selectedKeys, }: PropsWithChildren<MenuContent>): import('react/jsx-runtime').JSX.Element;
+/**
+ * Provides the keyboard-navigable list inside a `Menu` or `MenuSubmenu`.
+ *
+ * Use `MenuContent` for actions, links, sections, and custom empty states.
+ * The panel uses Unity's menu sizing by default and keeps item focus and
+ * selection semantics provided by React Aria.
+ * @param props - Menu items, sizing, selection, and empty-state content.
+ * @param props.children - `RawMenuItem`, `MenuSection`, `MenuSeparator`, or
+ *   `MenuSubmenu` elements.
+ * @param props.width - Sets a fixed panel width in pixels.
+ * @param props.className - Adds custom classes to the menu panel.
+ * @param props.selectionMode - Enables single or multiple item selection.
+ * @param props.selectedKeys - Controls the selected item keys.
+ * @param props.renderEmptyState - Renders when the menu contains no items.
+ * @see {@link MenuContentProps} for all available props.
+ * @see {@link RawMenuItem} for the standard item composition.
+ * @example
+ * ```tsx
+ * import {
+ *   MenuContent,
+ *   RawMenuItem,
+ * } from '@payfit/unity-components'
+ *
+ * <MenuContent>
+ *   <RawMenuItem>Cut</RawMenuItem>
+ *   <RawMenuItem>Copy</RawMenuItem>
+ * </MenuContent>
+ * ```
+ * @remarks
+ * The default panel width is at least 192px and at most 384px, including when
+ * the menu renders an empty state. Pass `renderEmptyState` when the menu can
+ * legitimately have no actions.
+ */
+export declare function MenuContent({ children, width, className, selectionMode, selectedKeys, renderEmptyState, }: PropsWithChildren<MenuContentProps>): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuContent {
     var displayName: string;
 }
-export {};

package/dist/esm/core/components/menu/parts/MenuContent.js

@@ -1,21 +1,26 @@
+import { useMenuContext as e } from "../Menu.context.js";
 import "react";
-import { uyMerge as e, uyTv as t } from "@payfit/unity-themes";
-import { jsx as n } from "react/jsx-runtime";
-import { Menu as r } from "react-aria-components/Menu";
+import { uyMerge as t, uyTv as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+import { Menu as i } from "react-aria-components/Menu";
 //#region src/core/components/menu/parts/MenuContent.tsx
-var i = t({ base: ["uy:outline-none", "uy:w-(--uy-menu-content-width) uy:min-w-(--uy-menu-content-min-width)"] });
-function a({ children: t, width: a, className: o, selectionMode: s, selectedKeys: c }) {
-	return /* @__PURE__ */ n(r, {
-		className: e(i(), o),
-		selectionMode: s,
-		selectedKeys: c,
+var a = n({ base: ["uy:outline-none", "uy:w-(--uy-menu-content-width) uy:min-w-(--uy-menu-content-min-width) uy:max-w-(--uy-menu-content-max-width)"] });
+function o({ children: n, width: o, className: s, selectionMode: c, selectedKeys: l, renderEmptyState: u }) {
+	let { compact: d } = e(), f = typeof u == "function" ? u : u === void 0 ? void 0 : () => u;
+	return /* @__PURE__ */ r(i, {
+		className: t(a(), s),
+		selectionMode: c,
+		selectedKeys: l,
+		renderEmptyState: f,
+		"data-compact": d,
 		style: {
-			"--uy-menu-content-width": a ? `${a}px` : "auto",
-			"--uy-menu-content-min-width": a ? "" : "calc(var(--uy-spacing) * 40)"
+			"--uy-menu-content-width": o ? `${o}px` : "auto",
+			"--uy-menu-content-min-width": o ? "0px" : "calc(var(--uy-spacing) * 24)",
+			"--uy-menu-content-max-width": o ? `${o}px` : "calc(var(--uy-spacing) * 48)"
 		},
-		children: t
+		children: n
 	});
 }
-a.displayName = "MenuContent";
+o.displayName = "MenuContent";
 //#endregion
-export { a as MenuContent };
+export { o as MenuContent };

package/dist/esm/core/components/menu/parts/MenuHeader.d.ts

@@ -1,9 +1,19 @@
 import { PropsWithChildren } from 'react';
-interface MenuHeaderProps {
+export interface MenuHeaderProps {
+    /** Adds classes to the header element. */
     className?: string;
 }
+/**
+ * Adds a non-interactive heading above a group of menu items.
+ *
+ * Use `MenuHeader` for contextual text that is not a selectable section
+ * heading. Use `MenuSection` when the heading labels a semantic group of
+ * actions.
+ * @param props - Header content and optional classes.
+ * @param props.children - The non-interactive heading content.
+ * @param props.className - Adds classes to the header element.
+ */
 export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuHeader {
     var displayName: string;
 }
-export {};

package/dist/esm/core/components/menu/parts/MenuHeader.js

@@ -1,14 +1,16 @@
-import { MenuSeparator as e } from "./MenuSeparator.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { MenuSection as r } from "react-aria-components/Menu";
-import { Header as i } from "react-aria-components/Header";
+import { useMenuContext as e } from "../Menu.context.js";
+import { MenuSeparator as t } from "./MenuSeparator.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { MenuSection as i } from "react-aria-components/Menu";
+import { Header as a } from "react-aria-components/Header";
 //#region src/core/components/menu/parts/MenuHeader.tsx
-function a({ children: a, className: o }) {
-	return /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ t(i, {
-		className: `uy:p-100 ${o}`,
-		children: a
-	}), /* @__PURE__ */ t(e, {})] });
+function o({ children: o, className: s }) {
+	let { compact: c } = e();
+	return /* @__PURE__ */ r(i, { children: [/* @__PURE__ */ n(a, {
+		className: `uy:px-100 ${c ? "uy:py-50" : "uy:py-100"} ${s ?? ""}`,
+		children: o
+	}), /* @__PURE__ */ n(t, {})] });
 }
-a.displayName = "MenuHeader";
+o.displayName = "MenuHeader";
 //#endregion
-export { a as MenuHeader };
+export { o as MenuHeader };

package/dist/esm/core/components/menu/parts/MenuSection.d.ts

@@ -1,5 +1,5 @@
 import { MenuSectionProps as AriaMenuSectionProps } from 'react-aria-components/Menu';
-interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProps<TItemType> {
+export interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProps<TItemType> {
     /**
      * The label rendered above the section's items.
      * Always present in the DOM for accessibility; use `isTitleHidden` to hide it visually.
@@ -10,13 +10,20 @@ interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProp
      * @default false
      */
     isTitleHidden?: boolean;
+    /**
+     * Adds a separator after the section.
+     * @default false
+     */
+    withDivider?: boolean;
+    /** Adds classes to the section root. */
     className?: string;
 }
 /**
  * `MenuSection` groups related menu items under a labelled heading inside a `MenuContent` panel.
  * The section title provides both visual context and an accessible label for assistive technologies.
  * Use multiple `MenuSection` blocks separated by `MenuSeparator` to divide a menu into distinct
- * named categories.
+ * named categories. Set `compact` on the parent `Menu` to use the compact
+ * spacing for the section and its items.
  *
  * For collection-based rendering pass an `items` array and a render function as children.
  * For static content pass `RawMenuItem` elements directly as children.
@@ -75,8 +82,7 @@ interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProp
  *   visually distinct groups within a single menu
  * @see {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/core/components/menu/parts/MenuSection.tsx Source code on GitHub}
  */
-export declare function MenuSection<TItemType extends object>({ children, items, className, title, isTitleHidden, ...rest }: MenuSectionProps<TItemType>): import('react/jsx-runtime').JSX.Element;
+export declare function MenuSection<TItemType extends object>({ children, items, className, title, isTitleHidden, withDivider, ...rest }: MenuSectionProps<TItemType>): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuSection {
     var displayName: string;
 }
-export {};

package/dist/esm/core/components/menu/parts/MenuSection.js

@@ -1,34 +1,53 @@
-import { uyTv as e } from "@payfit/unity-themes";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { MenuSection as r } from "react-aria-components/Menu";
-import { Header as i } from "react-aria-components/Header";
-import { Collection as a } from "react-aria-components/Collection";
+import { useMenuContext as e } from "../Menu.context.js";
+import { MenuSeparator as t } from "./MenuSeparator.js";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { MenuSection as a } from "react-aria-components/Menu";
+import { Header as o } from "react-aria-components/Header";
+import { Collection as s } from "react-aria-components/Collection";
 //#region src/core/components/menu/parts/MenuSection.tsx
-var o = e({
+var c = n({
 	slots: {
-		base: [""],
-		header: ["uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral-enabled"]
+		base: ["uy:group/menu-section uy:w-full"],
+		header: ["uy:w-full uy:overflow-clip uy:px-150 uy:py-125 uy:sm:py-100 uy:typography-body-strong uy:text-content-neutral-enabled"]
 	},
-	variants: { isTitleHidden: {
-		true: { header: "uy:sr-only" },
-		false: { header: "" }
-	} },
-	defaultVariants: { isTitleHidden: !1 }
+	variants: {
+		compact: {
+			true: { header: "uy:px-100 uy:py-100 uy:sm:py-50" },
+			false: { header: "" }
+		},
+		isTitleHidden: {
+			true: { header: "uy:sr-only" },
+			false: { header: "" }
+		}
+	},
+	defaultVariants: {
+		compact: !1,
+		isTitleHidden: !1
+	}
 });
-function s({ children: e, items: s, className: c, title: l, isTitleHidden: u, ...d }) {
-	let { base: f, header: p } = o({ isTitleHidden: u });
-	return /* @__PURE__ */ n(r, {
-		...d,
-		className: f({ className: c }),
-		children: [/* @__PURE__ */ t(i, {
-			className: p(),
-			children: l
-		}), /* @__PURE__ */ t(a, {
-			items: s,
-			children: e
-		})]
+function l({ children: n, items: l, className: u, title: d, isTitleHidden: f, withDivider: p = !1, ...m }) {
+	let { compact: h } = e(), { base: g, header: _ } = c({
+		isTitleHidden: f,
+		compact: h
+	});
+	return /* @__PURE__ */ i(a, {
+		...m,
+		"data-compact": h || void 0,
+		className: g({ className: u }),
+		children: [
+			/* @__PURE__ */ r(o, {
+				className: _(),
+				children: d
+			}),
+			/* @__PURE__ */ r(s, {
+				items: l,
+				children: n
+			}),
+			p && /* @__PURE__ */ r(t, {})
+		]
 	});
 }
-s.displayName = "MenuSection";
+l.displayName = "MenuSection";
 //#endregion
-export { s as MenuSection };
+export { l as MenuSection };

package/dist/esm/core/components/menu/parts/MenuSeparator.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Separates related groups of actions inside a `MenuContent` panel.
+ *
+ * Use `MenuSeparator` between item groups when spacing alone would not make
+ * the menu's categories clear.
+ */
 export declare function MenuSeparator(): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuSeparator {
     var displayName: string;

package/dist/esm/core/components/menu/parts/MenuSeparator.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import { Separator as t } from "react-aria-components/Separator";
 //#region src/core/components/menu/parts/MenuSeparator.tsx
 function n() {
-	return /* @__PURE__ */ e(t, { className: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mt-100 uy:mb-100" });
+	return /* @__PURE__ */ e(t, { className: "uy:h-[1px] uy:bg-border-neutral uy:w-full uy:mt-100 uy:mb-100" });
 }
 n.displayName = "MenuSeparator";
 //#endregion

package/dist/esm/core/components/menu/parts/MenuSubmenu.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement } from 'react';
+import { SubmenuTriggerProps as AriaSubmenuTriggerProps } from 'react-aria-components/Menu';
+export interface MenuSubmenuProps extends Omit<AriaSubmenuTriggerProps, 'children'> {
+    /**
+     * The submenu trigger item followed by its menu content.
+     */
+    children: [ReactElement, ReactElement];
+}
+/**
+ * Adds a keyboard-accessible nested menu to a `MenuContent` panel.
+ *
+ * Use `MenuSubmenu` when an action needs a second level of choices. React Aria
+ * manages focus, pointer interaction, arrow-key navigation, and `Escape`
+ * dismissal; Unity adds the submenu caret to the trigger item automatically.
+ * @param props - React Aria submenu behavior and the two-part composition.
+ * @param props.children - Exactly two children: the trigger `RawMenuItem`,
+ *   followed by its `MenuContent`.
+ * @see {@link MenuSubmenuProps} for all available props.
+ * @example
+ * ```tsx
+ * import {
+ *   MenuContent,
+ *   MenuSubmenu,
+ *   RawMenuItem,
+ * } from '@payfit/unity-components'
+ *
+ * <MenuContent>
+ *   <MenuSubmenu>
+ *     <RawMenuItem>Share</RawMenuItem>
+ *     <MenuContent>
+ *       <RawMenuItem>SMS</RawMenuItem>
+ *       <RawMenuItem>Email</RawMenuItem>
+ *     </MenuContent>
+ *   </MenuSubmenu>
+ * </MenuContent>
+ * ```
+ * @remarks
+ * Nest another `MenuSubmenu` inside the child `MenuContent` to create deeper
+ * levels. Add a `suffix` to the trigger item when it also needs a badge or
+ * other trailing content; Unity displays it before the submenu caret.
+ */
+export declare function MenuSubmenu({ children, ...rest }: MenuSubmenuProps): ReactElement;
+export declare namespace MenuSubmenu {
+    var displayName: string;
+}

package/dist/esm/core/components/menu/parts/MenuSubmenu.js

@@ -0,0 +1,22 @@
+import { menuPopover as e } from "../menu.variants.js";
+import t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Popover as i, SubmenuTrigger as a } from "react-aria-components/Menu";
+//#region src/core/components/menu/parts/MenuSubmenu.tsx
+function o({ children: o, ...s }) {
+	let [c, l] = t.Children.toArray(o);
+	if (!c || !l) throw Error("MenuSubmenu must have a trigger and a menu content");
+	return /* @__PURE__ */ r(a, {
+		...s,
+		children: [c, /* @__PURE__ */ n(i, {
+			offset: -8,
+			crossOffset: -8,
+			className: e(),
+			"data-dd-privacy": "allow",
+			children: l
+		})]
+	});
+}
+o.displayName = "MenuSubmenu";
+//#endregion
+export { o as MenuSubmenu };

package/dist/esm/core/components/menu/parts/MenuTrigger.d.ts

@@ -1,10 +1,31 @@
 import { PropsWithChildren } from 'react';
-interface MenuTriggerProps {
+export interface MenuTriggerProps {
+    /** Adds classes to the trigger element. */
     className?: string;
+    /** Renders the provided child as the trigger without an extra button. */
     asChild?: boolean;
 }
+/**
+ * Renders the control that opens a `Menu`.
+ *
+ * Use a text child for the default Unity trigger or set `asChild` to compose
+ * an existing Unity button or icon button without introducing a second
+ * interactive element.
+ * @param props - Trigger content and composition options.
+ * @param props.children - The text or control that opens the menu.
+ * @param props.asChild - Renders the child directly as the trigger element.
+ * @param props.className - Adds classes to the trigger element.
+ * @see {@link Menu} for the complete menu composition.
+ * @example
+ * ```tsx
+ * import { IconButton, MenuTrigger } from '@payfit/unity-components'
+ *
+ * <MenuTrigger asChild>
+ *   <IconButton icon="DotsThreeOutlined" label="More actions" />
+ * </MenuTrigger>
+ * ```
+ */
 export declare function MenuTrigger({ children, asChild, className, }: PropsWithChildren<MenuTriggerProps>): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuTrigger {
     var displayName: string;
 }
-export {};

package/dist/esm/core/components/menu/parts/RawMenuItem.d.ts

@@ -1,18 +1,61 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { MenuItemProps as MenuItemAriaComponentProps } from 'react-aria-components/Menu';
 import { DataAttributes } from '../../../types/DataAttributes.js';
 export interface MenuItemProps extends DataAttributes {
+    /** The visible label or a React Aria render function for the item. */
     children?: MenuItemAriaComponentProps['children'];
+    /** Identifies the item in a collection or selection model. */
     id?: MenuItemAriaComponentProps['id'];
+    /** Supplies the accessible text value and the browser title for truncated labels. */
     textValue?: MenuItemAriaComponentProps['textValue'];
+    /** Truncates a string label to one line when it exceeds the available width. */
+    isTruncated?: boolean;
+    /** Turns the item into a navigation link. */
     href?: MenuItemAriaComponentProps['href'];
     target?: MenuItemAriaComponentProps['target'];
     rel?: MenuItemAriaComponentProps['rel'];
+    /** Runs when the user activates the item. */
     onAction?: MenuItemAriaComponentProps['onAction'];
+    /** Disables activation and removes the item from keyboard interaction. */
     isDisabled?: MenuItemAriaComponentProps['isDisabled'];
+    /** Renders a fixed-size visual slot before the item content. */
     prefix?: ReactNode;
+    /** Adds classes to the item root. */
     className?: string;
+    /** Renders trailing content, such as a Unity `Badge`. */
+    suffix?: ReactNode;
 }
-export declare const RawMenuItem: import('react').ForwardRefExoticComponent<MenuItemProps & {
+/**
+ * Renders one action or link in a keyboard-navigable Unity menu.
+ *
+ * Compose `RawMenuItem` inside `MenuContent` for standard menu actions. Use
+ * `prefix` for a leading icon and `suffix` for trailing content such as a
+ * badge. When the item opens a `MenuSubmenu`, Unity appends the submenu caret
+ * after the suffix.
+ * @param props - Item label, action, link, and optional visual slots.
+ * @param props.children - The visible label or a React Aria render function.
+ * @param props.prefix - A leading icon or custom React node.
+ * @param props.suffix - A trailing badge or custom React node.
+ * @param props.textValue - The full accessible text and browser title for a truncated label.
+ * @param props.isTruncated - Truncates a string label within the available item width and uses `textValue` as its browser title.
+ * @see {@link MenuItemProps} for all available props.
+ * @see {@link MenuSubmenu} for nested menu actions.
+ * @example
+ * ```tsx
+ * import { Badge, MenuContent, RawMenuItem } from '@payfit/unity-components'
+ *
+ * <MenuContent>
+ *   <RawMenuItem suffix={<Badge variant="success">New</Badge>}>
+ *     Import
+ *   </RawMenuItem>
+ * </MenuContent>
+ * ```
+ * @remarks
+ * Set `isTruncated` to truncate a string label within the available item width.
+ * The native `title` attribute is taken directly from `textValue`, so provide
+ * the complete label there when the visual children are truncated or do not
+ * expose a plain text label to React Aria.
+ */
+export declare const RawMenuItem: React.ForwardRefExoticComponent<MenuItemProps & {
     children?: ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>;