@payfit/unity-components 3.23.23 → 3.23.25

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>>;

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

@@ -1,34 +1,75 @@
-import { forwardRef as e } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { MenuItem as i } from "react-aria-components/Menu";
+import { Icon as e } from "../../icon/Icon.js";
+import { useMenuContext as t } from "../Menu.context.js";
+import { forwardRef as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { MenuItem as s } from "react-aria-components/Menu";
 //#region src/core/components/menu/parts/RawMenuItem.tsx
-var a = t({ base: [
-	"uy:cursor-pointer uy:group",
-	"uy:flex uy:p-100 uy:items-start uy:gap-100 uy:rounded-25 uy:typography-body uy:text-content-neutral",
-	"uy:not-aria-disabled:data-[hovered=true]:bg-surface-neutral-hover",
-	"uy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-pressed",
-	"uy:active:bg-surface-neutral-active",
-	"uy:data-[focused=true]:not-data-[focus-visible=true]:outline-0 uy:data-[focus-visible=true]:outline-2 uy:data-[focus-visible=true]:outline-offset-2 uy:data-[focus-visible=true]:outline-utility-focus-ring",
-	"uy:aria-disabled:text-content-neutral-disabled uy:aria-disabled:cursor-not-allowed"
-] }), o = e(function({ prefix: e, children: t, id: o, textValue: s, href: c, target: l, rel: u, onAction: d, className: f, isDisabled: p, ...m }, h) {
-	return /* @__PURE__ */ r(i, {
-		ref: h,
-		id: o,
-		textValue: s,
-		href: c,
-		target: l,
-		rel: u,
-		isDisabled: p,
-		onAction: d,
-		className: a({ className: f }),
-		...m,
-		children: [/* @__PURE__ */ n("div", {
-			className: "uy:text-content-neutral-low uy:group-aria-disabled:text-content-neutral-disabled",
-			children: e || null
-		}), t]
+var c = r({
+	base: [
+		"uy:cursor-pointer uy:group",
+		"uy:flex uy:items-center uy:px-150 uy:py-125 uy:sm:py-100 uy:gap-100 uy:rounded-50 uy:typography-body uy:text-content-neutral",
+		"uy:data-[open=true]:bg-surface-neutral-active",
+		"uy:not-aria-disabled:data-[hovered=true]:bg-surface-neutral-hover",
+		"uy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-pressed",
+		"uy:active:bg-surface-neutral-active",
+		"uy:data-[focused=true]:not-data-[focus-visible=true]:outline-0 uy:data-[focus-visible=true]:outline-2 uy:data-[focus-visible=true]:outline-offset-2 uy:data-[focus-visible=true]:outline-utility-focus-ring",
+		"uy:aria-disabled:text-content-neutral-disabled uy:aria-disabled:cursor-not-allowed"
+	],
+	variants: { compact: {
+		true: "uy:px-100 uy:py-100 uy:sm:py-50",
+		false: ""
+	} },
+	defaultVariants: { compact: !1 }
+}), l = n(function({ prefix: n, children: r, id: l, textValue: u, isTruncated: d = !1, href: f, target: p, rel: m, onAction: h, className: g, isDisabled: _, suffix: v, ...y }, b) {
+	let { compact: x } = t(), S = d ? u : void 0;
+	return /* @__PURE__ */ a(s, {
+		ref: b,
+		id: l,
+		textValue: u,
+		href: f,
+		target: p,
+		rel: m,
+		isDisabled: _,
+		onAction: h,
+		className: c({
+			compact: x,
+			className: g
+		}),
+		...y,
+		children: (t) => /* @__PURE__ */ o(i, { children: [
+			n != null && /* @__PURE__ */ a("div", {
+				"data-unity-slot": "MenuItem.prefix",
+				className: "uy:flex uy:size-300 uy:shrink-0 uy:items-center uy:justify-center uy:text-content-neutral-low uy:group-aria-disabled:text-content-neutral-disabled",
+				children: n
+			}),
+			/* @__PURE__ */ a("div", {
+				"data-unity-slot": "MenuItem.content",
+				className: "uy:min-w-0 uy:min-h-300 uy:flex-1 uy:typography-body",
+				title: S,
+				children: typeof r == "function" ? r(t) : typeof r == "string" ? /* @__PURE__ */ a("span", {
+					className: d ? "uy:block uy:truncate" : "uy:block",
+					children: r
+				}) : r
+			}),
+			v != null && v !== !1 && /* @__PURE__ */ a("div", {
+				"data-unity-slot": "MenuItem.suffix",
+				className: "uy:flex uy:shrink-0 uy:items-center uy:justify-center uy:text-content-neutral-low uy:group-aria-disabled:text-content-neutral-disabled",
+				children: v
+			}),
+			t.hasSubmenu && /* @__PURE__ */ a("div", {
+				"data-unity-slot": "MenuItem.disclosure",
+				className: "uy:flex uy:shrink-0 uy:items-center uy:justify-center uy:text-content-neutral-low uy:group-aria-disabled:text-content-neutral-disabled",
+				children: /* @__PURE__ */ a(e, {
+					src: "CaretRightOutlined",
+					role: "presentation",
+					size: 20,
+					color: t.isDisabled ? "content.neutral.disabled" : "content.neutral.low"
+				})
+			})
+		] })
 	});
 });
-o.displayName = "RawMenuItem";
+l.displayName = "RawMenuItem";
 //#endregion
-export { o as RawMenuItem };
+export { l as RawMenuItem };

package/dist/esm/core/components/side-panel/parts/SidePanelDragIndicator.js

@@ -2,15 +2,15 @@ import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listen
 import { useContext as t, useRef as n } from "react";
 import { uyTv as r } from "@payfit/unity-themes";
 import { jsx as i } from "react/jsx-runtime";
-import { OverlayTriggerStateContext as a } from "react-aria-components/Dialog";
-import { useDrag as o } from "@use-gesture/react";
+import { useDrag as a } from "@use-gesture/react";
+import { OverlayTriggerStateContext as o } from "react-aria-components/Dialog";
 //#region src/core/components/side-panel/parts/SidePanelDragIndicator.tsx
 var s = r({ slots: {
 	base: ["uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500", "uy:cursor-grab uy:touch-action-none"],
 	indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
 } }), c = 100;
 function l() {
-	let r = n(null), l = t(a), u = e(), { base: d, indicator: f } = s(), p = u === "xs" || u === "sm", m = o((e) => {
+	let r = n(null), l = t(o), u = e(), { base: d, indicator: f } = s(), p = u === "xs" || u === "sm", m = a((e) => {
 		let { movement: [t, n], direction: [i, a], intentional: o, cancel: s, last: u, event: d } = e;
 		if (!p) {
 			s();

package/dist/esm/core/index.d.ts

@@ -126,6 +126,7 @@ export * from './components/menu/parts/MenuSection.js';
 export * from './components/menu/parts/RawMenuItem.js';
 export * from './components/menu/parts/MenuSeparator.js';
 export * from './components/menu/parts/MenuTrigger.js';
+export * from './components/menu/parts/MenuSubmenu.js';
 export * from './components/multi-select/MultiSelect.js';
 export * from './components/multi-select/parts/MultiSelectOptGroup.js';
 export * from './components/multi-select/parts/MultiSelectOption.js';