beez-ui 2.7.1 → 3.0.1

package/dist/components/primitives/dropdown-menu-items.js

@@ -0,0 +1,265 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { Link } from "../link.js";
+import { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut } from "./dropdown-menu.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Picks the key of a row: its id, its string label, or its position as a last resort.
+* @param item - The row.
+* @param index - Position of the row in the list.
+* @returns The React key.
+*/
+function keyOf(item, index) {
+	if (item.id !== undefined) return item.id;
+	return typeof item.label === "string" ? item.label : String(index);
+}
+/**
+* Renders the body shared by every kind of row: icon, label and trailing content.
+* @param item - The row.
+* @returns The row body.
+*/
+function ItemBody(t0) {
+	const $ = _c(8);
+	const { item } = t0;
+	let t1;
+	if ($[0] !== item.label) {
+		t1 = /* @__PURE__ */ _jsx("span", {
+			className: "min-w-0 truncate",
+			children: item.label
+		});
+		$[0] = item.label;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== item.trailing) {
+		t2 = item.trailing === undefined ? null : /* @__PURE__ */ _jsx(DropdownMenuShortcut, { children: item.trailing });
+		$[2] = item.trailing;
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== item.icon || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ _jsxs(_Fragment, { children: [
+			item.icon,
+			t1,
+			t2
+		] });
+		$[4] = item.icon;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	return t3;
+}
+/**
+* Renders one row as a radio, checkbox, link or action item, depending on its fields.
+* @param props - The row and whether the menu has a single selection.
+* @returns The row.
+*/
+function ItemRow(t0) {
+	const $ = _c(36);
+	const { item, hasSelection } = t0;
+	let t1;
+	if ($[0] !== item.className || $[1] !== item.disabled || $[2] !== item.itemProps || $[3] !== item.onSelect) {
+		t1 = {
+			...item.itemProps,
+			className: item.className,
+			disabled: item.disabled,
+			onSelect: item.onSelect
+		};
+		$[0] = item.className;
+		$[1] = item.disabled;
+		$[2] = item.itemProps;
+		$[3] = item.onSelect;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	const shared = t1;
+	const variant = item.destructive ? "destructive" : "default";
+	if (hasSelection && item.value !== undefined) {
+		let t2;
+		if ($[5] !== item) {
+			t2 = /* @__PURE__ */ _jsx(ItemBody, { item });
+			$[5] = item;
+			$[6] = t2;
+		} else {
+			t2 = $[6];
+		}
+		let t3;
+		if ($[7] !== item.value || $[8] !== shared || $[9] !== t2 || $[10] !== variant) {
+			t3 = /* @__PURE__ */ _jsx(DropdownMenuRadioItem, {
+				...shared,
+				variant,
+				value: item.value,
+				children: t2
+			});
+			$[7] = item.value;
+			$[8] = shared;
+			$[9] = t2;
+			$[10] = variant;
+			$[11] = t3;
+		} else {
+			t3 = $[11];
+		}
+		return t3;
+	}
+	if (item.checked !== undefined) {
+		let t2;
+		if ($[12] !== item) {
+			t2 = /* @__PURE__ */ _jsx(ItemBody, { item });
+			$[12] = item;
+			$[13] = t2;
+		} else {
+			t2 = $[13];
+		}
+		let t3;
+		if ($[14] !== item.checked || $[15] !== shared || $[16] !== t2 || $[17] !== variant) {
+			t3 = /* @__PURE__ */ _jsx(DropdownMenuCheckboxItem, {
+				...shared,
+				variant,
+				checked: item.checked,
+				children: t2
+			});
+			$[14] = item.checked;
+			$[15] = shared;
+			$[16] = t2;
+			$[17] = variant;
+			$[18] = t3;
+		} else {
+			t3 = $[18];
+		}
+		return t3;
+	}
+	if (item.href !== undefined) {
+		let t2;
+		if ($[19] !== item) {
+			t2 = /* @__PURE__ */ _jsx(ItemBody, { item });
+			$[19] = item;
+			$[20] = t2;
+		} else {
+			t2 = $[20];
+		}
+		let t3;
+		if ($[21] !== item.href || $[22] !== item.rel || $[23] !== item.target || $[24] !== t2) {
+			t3 = /* @__PURE__ */ _jsx(Link, {
+				href: item.href,
+				target: item.target,
+				rel: item.rel,
+				children: t2
+			});
+			$[21] = item.href;
+			$[22] = item.rel;
+			$[23] = item.target;
+			$[24] = t2;
+			$[25] = t3;
+		} else {
+			t3 = $[25];
+		}
+		let t4;
+		if ($[26] !== shared || $[27] !== t3 || $[28] !== variant) {
+			t4 = /* @__PURE__ */ _jsx(DropdownMenuItem, {
+				...shared,
+				variant,
+				asChild: true,
+				children: t3
+			});
+			$[26] = shared;
+			$[27] = t3;
+			$[28] = variant;
+			$[29] = t4;
+		} else {
+			t4 = $[29];
+		}
+		return t4;
+	}
+	let t2;
+	if ($[30] !== item) {
+		t2 = /* @__PURE__ */ _jsx(ItemBody, { item });
+		$[30] = item;
+		$[31] = t2;
+	} else {
+		t2 = $[31];
+	}
+	let t3;
+	if ($[32] !== shared || $[33] !== t2 || $[34] !== variant) {
+		t3 = /* @__PURE__ */ _jsx(DropdownMenuItem, {
+			...shared,
+			variant,
+			children: t2
+		});
+		$[32] = shared;
+		$[33] = t2;
+		$[34] = variant;
+		$[35] = t3;
+	} else {
+		t3 = $[35];
+	}
+	return t3;
+}
+/**
+* Renders a list of rows inside a dropdown menu content, with the separators they ask for. With a `selection`, the
+* rows live in one radio group and the rows that carry a `value` become its radio items.
+* @param props - The rows and the optional single selection.
+* @returns The rows.
+*/
+export function DropdownMenuItems(t0) {
+	const $ = _c(11);
+	const { items, selection } = t0;
+	let t1;
+	if ($[0] !== items || $[1] !== selection) {
+		let t2;
+		if ($[3] !== selection) {
+			t2 = (item, index) => {
+				const key = keyOf(item, index);
+				const row = /* @__PURE__ */ _jsx(ItemRow, {
+					item,
+					hasSelection: selection !== undefined
+				}, key);
+				return item.separatorBefore && index > 0 ? [/* @__PURE__ */ _jsx(DropdownMenuSeparator, {}, `${key}-separator`), row] : [row];
+			};
+			$[3] = selection;
+			$[4] = t2;
+		} else {
+			t2 = $[4];
+		}
+		t1 = items.flatMap(t2);
+		$[0] = items;
+		$[1] = selection;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	const rows = t1;
+	if (!selection) {
+		let t2;
+		if ($[5] !== rows) {
+			t2 = /* @__PURE__ */ _jsx(_Fragment, { children: rows });
+			$[5] = rows;
+			$[6] = t2;
+		} else {
+			t2 = $[6];
+		}
+		return t2;
+	}
+	let t2;
+	if ($[7] !== rows || $[8] !== selection.onValueChange || $[9] !== selection.value) {
+		t2 = /* @__PURE__ */ _jsx(DropdownMenuRadioGroup, {
+			value: selection.value,
+			onValueChange: selection.onValueChange,
+			children: rows
+		});
+		$[7] = rows;
+		$[8] = selection.onValueChange;
+		$[9] = selection.value;
+		$[10] = t2;
+	} else {
+		t2 = $[10];
+	}
+	return t2;
+}

package/dist/components/primitives/dropdown-menu.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Internal primitive of Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Arc's raised
+ * panel, item rows, danger tone, separators, placement defaults and staggered item entrance on its tokens, with
+ * beez-ui's reveal from the trigger edge and the highlight that glides between items with the keyboard. Internal: the
+ * Radix composition behind the public closed `DropdownMenu` and beez-ui's composite components; the package does not
+ * export it.
+ */
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+/**
+ * Arc's menu panel. It sizes action menus by their content, at least 12rem unless the viewport is narrower, instead
+ * of narrowing them to an icon trigger.
+ * @param props - Primitive properties. Arc's defaults: `align="start"`, a 6px `sideOffset`, a 12px
+ *   `collisionPadding` and `loop`, so arrow keys wrap from the last item to the first.
+ * @returns The portaled menu, animated in and out with its open state.
+ */
+declare function DropdownMenuContent({ className, align, sideOffset, collisionPadding, loop, onClick, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+/**
+ * Renders an action row. `destructive` draws Arc's danger tone: danger text and icon over a faint danger fill when
+ * highlighted.
+ * @param props - Primitive properties, `inset` to align with rows that carry an icon, and the `variant`.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+/**
+ * Renders a selectable checkbox action with its check at the end of the row. `destructive` draws Arc's danger tone.
+ * @param props - Primitive properties, `inset` to align with rows that carry an icon, and the `variant`.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+/**
+ * Renders a mutually exclusive action with its check at the end of the row. `destructive` draws Arc's danger tone.
+ * @param props - Primitive properties, `inset` to align with rows that carry an icon, and the `variant`.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function DropdownMenuRadioItem({ className, children, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+/**
+ * Renders a muted group label aligned with the item text.
+ * @param props - Primitive properties and `inset` to align with rows that carry an icon.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+/**
+ * Renders trailing content at the end of a row, such as a shortcut or a count, muted until the row is highlighted.
+ * @param props - Span properties.
+ * @returns The trailing slot.
+ */
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, };