@panneau/lists 5.0.0-alpha.16 → 5.0.0-alpha.17

package/dist/actions/ActionButton.js

@@ -1,7 +1,8 @@
-import { getActionIcon } from "./icons.js";
+import Actions_module_default from "./Actions.module.js";
+import { getActionIcon, getActionTone } from "./icons.js";
 import { c } from "react/compiler-runtime";
 import { getActionLabel } from "@panneau/intl";
-import { Button, LinkButton, usePanneauIntl } from "@panneau/ui";
+import { Button, LinkButton, Tooltip, usePanneauIntl } from "@panneau/ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/actions/ActionButton.tsx
 /** Whether a link leaves the admin: it opens in a new tab. */
@@ -10,93 +11,94 @@ function isExternal(href) {
 }
 /** An action as a button, or as a link for a `link` action with a URL. */
 function ActionButton(t0) {
-	const $ = c(29);
-	const { action, icons, href, onPress, isPending: t1, isDisabled: t2, size: t3, "aria-label": ariaLabel } = t0;
+	const $ = c(27);
+	const { action, icons, href, onPress, isPending: t1, isDisabled: t2, size: t3, iconOnly: t4, "aria-label": ariaLabel } = t0;
 	const isPending = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
 	const size = t3 === void 0 ? "sm" : t3;
+	const iconOnly = t4 === void 0 ? false : t4;
 	const intl = usePanneauIntl();
-	let t4;
+	let t5;
 	if ($[0] !== action || $[1] !== icons) {
-		t4 = getActionIcon(action, icons);
+		t5 = getActionIcon(action, icons);
 		$[0] = action;
 		$[1] = icons;
-		$[2] = t4;
-	} else t4 = $[2];
-	const icon = t4;
-	let t5;
+		$[2] = t5;
+	} else t5 = $[2];
+	const icon = t5;
+	let t6;
 	if ($[3] !== action || $[4] !== intl) {
-		t5 = getActionLabel(action, intl);
+		t6 = getActionLabel(action, intl);
 		$[3] = action;
 		$[4] = intl;
-		$[5] = t5;
-	} else t5 = $[5];
-	const label = t5;
-	const variant = action.destructive === true ? "danger" : size === "sm" ? "ghost" : "secondary";
-	if (href !== null) {
-		let t6;
-		if ($[6] !== icon) {
-			t6 = icon !== void 0 ? { icon } : {};
-			$[6] = icon;
-			$[7] = t6;
-		} else t6 = $[7];
-		let t7;
-		if ($[8] !== href) {
-			t7 = isExternal(href);
-			$[8] = href;
-			$[9] = t7;
-		} else t7 = $[9];
-		let t8;
-		if ($[10] !== ariaLabel || $[11] !== href || $[12] !== label || $[13] !== size || $[14] !== t6 || $[15] !== t7 || $[16] !== variant) {
-			t8 = /* @__PURE__ */ jsx(LinkButton, {
-				href,
-				size,
-				variant,
-				...t6,
-				external: t7,
-				"aria-label": ariaLabel,
-				children: label
-			});
-			$[10] = ariaLabel;
-			$[11] = href;
-			$[12] = label;
-			$[13] = size;
-			$[14] = t6;
-			$[15] = t7;
-			$[16] = variant;
-			$[17] = t8;
-		} else t8 = $[17];
-		return t8;
-	}
-	let t6;
-	if ($[18] !== icon) {
-		t6 = icon !== void 0 ? { icon } : {};
-		$[18] = icon;
-		$[19] = t6;
-	} else t6 = $[19];
+		$[5] = t6;
+	} else t6 = $[5];
+	const label = t6;
+	const destructive = action.destructive === true;
+	const inRow = size === "sm";
 	let t7;
-	if ($[20] !== ariaLabel || $[21] !== isDisabled || $[22] !== isPending || $[23] !== label || $[24] !== onPress || $[25] !== size || $[26] !== t6 || $[27] !== variant) {
-		t7 = /* @__PURE__ */ jsx(Button, {
+	if ($[6] !== action || $[7] !== destructive || $[8] !== inRow) {
+		t7 = inRow ? getActionTone(action) : destructive ? "danger" : "neutral";
+		$[6] = action;
+		$[7] = destructive;
+		$[8] = inRow;
+		$[9] = t7;
+	} else t7 = $[9];
+	const tone = t7;
+	const appearance = inRow ? "subtle" : destructive ? "solid" : "outline";
+	const onlyIcon = iconOnly && icon !== void 0;
+	const name = ariaLabel ?? (onlyIcon ? label : void 0);
+	let t8;
+	if ($[10] !== appearance || $[11] !== href || $[12] !== icon || $[13] !== isDisabled || $[14] !== isPending || $[15] !== label || $[16] !== name || $[17] !== onPress || $[18] !== onlyIcon || $[19] !== size || $[20] !== tone) {
+		t8 = href !== null ? /* @__PURE__ */ jsx(LinkButton, {
+			href,
+			size,
+			tone,
+			appearance,
+			...icon !== void 0 ? { icon } : {},
+			external: isExternal(href),
+			"aria-label": name,
+			className: onlyIcon ? Actions_module_default.iconOnly : void 0,
+			children: onlyIcon ? null : label
+		}) : /* @__PURE__ */ jsx(Button, {
 			size,
-			variant,
-			...t6,
+			tone,
+			appearance,
+			...icon !== void 0 ? { icon } : {},
 			isPending,
 			isDisabled,
-			"aria-label": ariaLabel,
+			"aria-label": name,
+			className: onlyIcon ? Actions_module_default.iconOnly : void 0,
 			onPress,
-			children: label
+			children: onlyIcon ? null : label
 		});
-		$[20] = ariaLabel;
-		$[21] = isDisabled;
-		$[22] = isPending;
+		$[10] = appearance;
+		$[11] = href;
+		$[12] = icon;
+		$[13] = isDisabled;
+		$[14] = isPending;
+		$[15] = label;
+		$[16] = name;
+		$[17] = onPress;
+		$[18] = onlyIcon;
+		$[19] = size;
+		$[20] = tone;
+		$[21] = t8;
+	} else t8 = $[21];
+	const button = t8;
+	let t9;
+	if ($[22] !== button || $[23] !== label || $[24] !== name || $[25] !== onlyIcon) {
+		t9 = onlyIcon ? /* @__PURE__ */ jsx(Tooltip, {
+			content: name ?? label,
+			children: button
+		}) : button;
+		$[22] = button;
 		$[23] = label;
-		$[24] = onPress;
-		$[25] = size;
-		$[26] = t6;
-		$[27] = variant;
-		$[28] = t7;
-	} else t7 = $[28];
-	return t7;
+		$[24] = name;
+		$[25] = onlyIcon;
+		$[26] = t9;
+	} else t9 = $[26];
+	return t9;
 }
 //#endregion
 export { ActionButton };

package/dist/actions/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["getActionLabel","Action","Button","LinkButton","usePanneauIntl","ActionIcons","getActionIcon","ActionButtonProps","action","icons","href","onPress","isPending","isDisabled","size","isExternal","test","ActionButton","t0","$","_c","t1","t2","t3","ariaLabel","undefined","intl","t4","icon","t5","label","variant","destructive","t6","t7","t8","_c"],"sources":["../../src/actions/ActionButton.tsx"],"sourcesContent":["import { getActionLabel } from '@panneau/intl';\nimport type { Action } from '@panneau/protocol';\nimport { Button, LinkButton, usePanneauIntl } from '@panneau/ui';\n\nimport { type ActionIcons, getActionIcon } from './icons';\n\nexport interface ActionButtonProps {\n    action: Action;\n    /** Icons of actions by id, over the icon the action names. */\n    icons?: ActionIcons | undefined;\n    /** The link of a `link` action. Links go through React Aria, so an app's router handles them. */\n    href: string | null;\n    onPress: () => void;\n    isPending?: boolean;\n    isDisabled?: boolean;\n    size?: 'sm' | 'md';\n    /** Accessible label, when the label alone isn't enough (`Edit Ada Lovelace`). */\n    'aria-label'?: string;\n}\n\n/** Whether a link leaves the admin: it opens in a new tab. */\nfunction isExternal(href: string): boolean {\n    return /^https?:\\/\\//.test(href);\n}\n\n/** An action as a button, or as a link for a `link` action with a URL. */\nexport function ActionButton({\n    action,\n    icons,\n    href,\n    onPress,\n    isPending = false,\n    isDisabled = false,\n    size = 'sm',\n    'aria-label': ariaLabel,\n}: ActionButtonProps) {\n    const intl = usePanneauIntl();\n    const icon = getActionIcon(action, icons);\n    const label = getActionLabel(action, intl);\n    // Small actions sit in rows, as ghost buttons; others beside the buttons of a toolbar.\n    const variant = action.destructive === true ? 'danger' : size === 'sm' ? 'ghost' : 'secondary';\n    if (href !== null) {\n        return (\n            <LinkButton\n                href={href}\n                size={size}\n                variant={variant}\n                {...(icon !== undefined ? { icon } : {})}\n                external={isExternal(href)}\n                aria-label={ariaLabel}\n            >\n                {label}\n            </LinkButton>\n        );\n    }\n    return (\n        <Button\n            size={size}\n            variant={variant}\n            {...(icon !== undefined ? { icon } : {})}\n            isPending={isPending}\n            isDisabled={isDisabled}\n            aria-label={ariaLabel}\n            onPress={onPress}\n        >\n            {label}\n        </Button>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ActionButton.js","names":["getActionLabel","Action","Button","LinkButton","Tooltip","usePanneauIntl","styles","ActionIcons","getActionIcon","getActionTone","ActionButtonProps","action","icons","href","onPress","isPending","isDisabled","size","iconOnly","isExternal","test","ActionButton","t0","$","_c","t1","t2","t3","t4","ariaLabel","undefined","intl","t5","icon","t6","label","destructive","inRow","t7","tone","appearance","onlyIcon","name","t8","button","t9","_c","styles"],"sources":["../../src/actions/ActionButton.tsx"],"sourcesContent":["import { getActionLabel } from '@panneau/intl';\nimport type { Action } from '@panneau/protocol';\nimport { Button, LinkButton, Tooltip, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './Actions.module.css';\nimport { type ActionIcons, getActionIcon, getActionTone } from './icons';\n\nexport interface ActionButtonProps {\n    action: Action;\n    /** Icons of actions by id, over the icon the action names. */\n    icons?: ActionIcons | undefined;\n    /** The link of a `link` action. Links go through React Aria, so an app's router handles them. */\n    href: string | null;\n    onPress: () => void;\n    isPending?: boolean;\n    isDisabled?: boolean;\n    size?: 'sm' | 'md';\n    /**\n     * Only the icon, in the color of the action, with the label as its accessible name and\n     * tooltip, as rows show their actions (decision 0060). An action without an icon keeps its\n     * label.\n     */\n    iconOnly?: boolean;\n    /** Accessible label, when the label alone isn't enough (`Edit Ada Lovelace`). */\n    'aria-label'?: string;\n}\n\n/** Whether a link leaves the admin: it opens in a new tab. */\nfunction isExternal(href: string): boolean {\n    return /^https?:\\/\\//.test(href);\n}\n\n/** An action as a button, or as a link for a `link` action with a URL. */\nexport function ActionButton({\n    action,\n    icons,\n    href,\n    onPress,\n    isPending = false,\n    isDisabled = false,\n    size = 'sm',\n    iconOnly = false,\n    'aria-label': ariaLabel,\n}: ActionButtonProps) {\n    const intl = usePanneauIntl();\n    const icon = getActionIcon(action, icons);\n    const label = getActionLabel(action, intl);\n    const destructive = action.destructive === true;\n    // In rows, the color of the action, tinted (decision 0060); beside the buttons of a toolbar,\n    // outlined (solid when it destroys).\n    const inRow = size === 'sm';\n    const tone = inRow ? getActionTone(action) : destructive ? 'danger' : 'neutral';\n    const appearance = inRow ? 'subtle' : destructive ? 'solid' : 'outline';\n    const onlyIcon = iconOnly && icon !== undefined;\n    const name = ariaLabel ?? (onlyIcon ? label : undefined);\n    const button =\n        href !== null ? (\n            <LinkButton\n                href={href}\n                size={size}\n                tone={tone}\n                appearance={appearance}\n                {...(icon !== undefined ? { icon } : {})}\n                external={isExternal(href)}\n                aria-label={name}\n                className={onlyIcon ? styles.iconOnly : undefined}\n            >\n                {onlyIcon ? null : label}\n            </LinkButton>\n        ) : (\n            <Button\n                size={size}\n                tone={tone}\n                appearance={appearance}\n                {...(icon !== undefined ? { icon } : {})}\n                isPending={isPending}\n                isDisabled={isDisabled}\n                aria-label={name}\n                className={onlyIcon ? styles.iconOnly : undefined}\n                onPress={onPress}\n            >\n                {onlyIcon ? null : label}\n            </Button>\n        );\n    return onlyIcon ? <Tooltip content={name ?? label}>{button}</Tooltip> : button;\n}\n"],"mappings":"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"}

package/dist/actions/Actions.css

@@ -22,3 +22,15 @@
     margin: var(--panneau-space-2) 0 0;
     color: var(--panneau-color-warning);
 }
+
+/* An action shown by its icon alone, square. Doubled: over the padding of the button. */
+.panneau-actions-icon-only.panneau-actions-icon-only {
+    width: var(--panneau-control-height-sm);
+    padding: 0;
+}
+
+/* The place of an action that other rows have: the rows' actions line up (decision 0060). */
+.panneau-actions-placeholder {
+    display: inline-flex;
+    visibility: hidden;
+}

package/dist/actions/Actions.module.js

@@ -4,13 +4,17 @@ var row = "panneau-actions-row";
 var toolbar = "panneau-actions-toolbar";
 var message = "panneau-actions-message";
 var skipped = "panneau-actions-skipped";
+var iconOnly = "panneau-actions-icon-only";
+var placeholder = "panneau-actions-placeholder";
 var Actions_module_default = {
 	row,
 	toolbar,
 	message,
-	skipped
+	skipped,
+	iconOnly,
+	placeholder
 };
 //#endregion
-export { Actions_module_default as default, message, row, skipped, toolbar };
+export { Actions_module_default as default, iconOnly, message, placeholder, row, skipped, toolbar };
 
 //# sourceMappingURL=Actions.module.js.map

package/dist/actions/Actions.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.module.js","names":[],"sources":["../../src/actions/Actions.module.css"],"sourcesContent":["/* The actions of a row wrap where they don't fit, in a narrow list or a card. */\n.row {\n    display: inline-flex;\n    flex-wrap: wrap;\n    max-width: 100%;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.message {\n    margin: 0;\n}\n\n.skipped {\n    margin: var(--panneau-space-2) 0 0;\n    color: var(--panneau-color-warning);\n}\n"],"mappings":""}
+{"version":3,"file":"Actions.module.js","names":[],"sources":["../../src/actions/Actions.module.css"],"sourcesContent":["/* The actions of a row wrap where they don't fit, in a narrow list or a card. */\n.row {\n    display: inline-flex;\n    flex-wrap: wrap;\n    max-width: 100%;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.message {\n    margin: 0;\n}\n\n.skipped {\n    margin: var(--panneau-space-2) 0 0;\n    color: var(--panneau-color-warning);\n}\n\n/* An action shown by its icon alone, square. Doubled: over the padding of the button. */\n.iconOnly.iconOnly {\n    width: var(--panneau-control-height-sm);\n    padding: 0;\n}\n\n/* The place of an action that other rows have: the rows' actions line up (decision 0060). */\n.placeholder {\n    display: inline-flex;\n    visibility: hidden;\n}\n"],"mappings":""}

package/dist/actions/RowActions.d.ts

@@ -4,16 +4,33 @@ import { type ActionIcons } from './icons.js';
 export interface RowActionsProps {
     /** The label of the item, for the accessible names of its actions. */
     itemLabel: string;
-    /** Actions shown as buttons, with their links (`getItemActions()` of `@panneau/core`). */
+    /** Actions placed in `row`, with their links (`selectItemActions()` of `@panneau/core`). */
     actions: readonly ItemAction[];
-    /** Actions in the overflow menu. */
+    /** Actions placed in `menu`: icons too while they fit, the first to go in the menu. */
     menu: readonly ItemAction[];
     /** Id of the action that is running on this item, if any. */
     pending: string | null;
     onRun: (action: Action) => void;
     /** Icons of actions by id, over the icon the action names. */
     icons?: ActionIcons | undefined;
+    /**
+     * The actions of every row of the list, in order (`orderRowActions()`): a row keeps the place
+     * of those it doesn't have, so the actions of the rows line up. Without it, its own.
+     */
+    slots?: readonly ItemAction[] | undefined;
+    /** The id of the main action of rows, which keeps its label (`show` or `edit`). */
+    primary?: string | null | undefined;
 }
-/** The actions of a row: buttons, then an overflow menu. */
-export declare function RowActions({ itemLabel, actions, menu, pending, onRun, icons }: RowActionsProps): import("react").JSX.Element;
+/**
+ * The actions of a row in their order: those placed in `row`, then those placed in `menu`, and
+ * those that destroy last. The last ones are the first to go in the menu.
+ */
+export declare function orderRowActions(actions: readonly ItemAction[], menu: readonly ItemAction[]): ItemAction[];
+/**
+ * The actions of a row (decision 0060): their icons, in their colors, with their labels as names
+ * and tooltips, but the main action, which keeps its label while the row has room; and when the
+ * icons don't fit, the last ones in an overflow menu, which never holds a single action. How they fit is the same for every row of the list (`RowActionsFit`), and a
+ * row keeps the place of the actions of other rows that it doesn't have, so they line up.
+ */
+export declare function RowActions({ itemLabel, actions, menu, pending, onRun, icons, slots, primary, }: RowActionsProps): import("react").JSX.Element;
 //# sourceMappingURL=RowActions.d.ts.map

package/dist/actions/RowActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowActions.d.ts","sourceRoot":"","sources":["../../src/actions/RowActions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAMhD,OAAO,EAAE,KAAK,WAAW,EAAiB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC5B,sEAAsE;IACtE,SAAS,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,oCAAoC;IACpC,IAAI,EAAE,SAAS,UAAU,EAAE,CAAC;IAC5B,6DAA6D;IAC7D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACnC;AAED,4DAA4D;AAC5D,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,+BAyD9F"}
+{"version":3,"file":"RowActions.d.ts","sourceRoot":"","sources":["../../src/actions/RowActions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAOhD,OAAO,EAAE,KAAK,WAAW,EAAiB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC5B,sEAAsE;IACtE,SAAS,EAAE,MAAM,CAAC;IAClB,4FAA4F;IAC5F,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,uFAAuF;IACvF,IAAI,EAAE,SAAS,UAAU,EAAE,CAAC;IAC5B,6DAA6D;IAC7D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,CAAC;IAC1C,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACvC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,OAAO,EAAE,SAAS,UAAU,EAAE,EAC9B,IAAI,EAAE,SAAS,UAAU,EAAE,GAC5B,UAAU,EAAE,CASd;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACvB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAc,GACjB,EAAE,eAAe,+BA0FjB"}

package/dist/actions/RowActions.js

@@ -1,105 +1,170 @@
 import { messages } from "../messages.js";
 import Actions_module_default from "./Actions.module.js";
 import { getActionIcon } from "./icons.js";
+import { RowActionsFit } from "./fit.js";
 import { ActionButton } from "./ActionButton.js";
 import { c } from "react/compiler-runtime";
 import { getActionLabel } from "@panneau/intl";
 import { IconButton, Menu, MenuItem, MenuTrigger, usePanneauIntl } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Ellipsis } from "lucide-react";
+import { use } from "react";
 //#region src/actions/RowActions.tsx
-/** The actions of a row: buttons, then an overflow menu. */
+/**
+* The actions of a row in their order: those placed in `row`, then those placed in `menu`, and
+* those that destroy last. The last ones are the first to go in the menu.
+*/
+function orderRowActions(actions, menu) {
+	const all = [...actions, ...menu].filter((entry, index, list) => list.findIndex((other) => other.action.id === entry.action.id) === index);
+	return [...all.filter(({ action }) => action.destructive !== true), ...all.filter(({ action }) => action.destructive === true)];
+}
+/**
+* The actions of a row (decision 0060): their icons, in their colors, with their labels as names
+* and tooltips, but the main action, which keeps its label while the row has room; and when the
+* icons don't fit, the last ones in an overflow menu, which never holds a single action. How they fit is the same for every row of the list (`RowActionsFit`), and a
+* row keeps the place of the actions of other rows that it doesn't have, so they line up.
+*/
 function RowActions(t0) {
-	const $ = c(23);
-	const { itemLabel, actions, menu, pending, onRun, icons } = t0;
+	const $ = c(30);
+	const { itemLabel, actions, menu, pending, onRun, icons, slots, primary: t1 } = t0;
+	const primary = t1 === void 0 ? null : t1;
 	const intl = usePanneauIntl();
-	let t1;
-	if ($[0] !== actions || $[1] !== icons || $[2] !== intl || $[3] !== itemLabel || $[4] !== onRun || $[5] !== pending) {
-		let t2;
-		if ($[7] !== icons || $[8] !== intl || $[9] !== itemLabel || $[10] !== onRun || $[11] !== pending) {
-			t2 = (t3) => {
-				const { action, href } = t3;
-				return /* @__PURE__ */ jsx(ActionButton, {
-					action,
-					icons,
-					href,
-					isPending: pending === action.id,
-					isDisabled: pending !== null && pending !== action.id,
-					"aria-label": intl.formatMessage(messages.actionOnItem, {
-						action: getActionLabel(action, intl),
-						item: itemLabel
-					}),
-					onPress: () => onRun(action)
-				}, action.id);
+	const level = use(RowActionsFit);
+	let t2;
+	if ($[0] !== actions || $[1] !== icons || $[2] !== intl || $[3] !== itemLabel || $[4] !== level || $[5] !== menu || $[6] !== onRun || $[7] !== pending || $[8] !== primary || $[9] !== slots) {
+		const own = orderRowActions(actions, menu);
+		let t3;
+		if ($[11] !== slots) {
+			t3 = (t4) => {
+				const { action } = t4;
+				return slots?.some((slot) => slot.action.id === action.id) !== true;
 			};
-			$[7] = icons;
-			$[8] = intl;
-			$[9] = itemLabel;
-			$[10] = onRun;
-			$[11] = pending;
-			$[12] = t2;
-		} else t2 = $[12];
-		t1 = actions.map(t2);
+			$[11] = slots;
+			$[12] = t3;
+		} else t3 = $[12];
+		const all = [...slots ?? [], ...own.filter(t3)];
+		const find = (slot_0) => own.find((t4) => {
+			const { action: action_0 } = t4;
+			return action_0.id === slot_0.action.id;
+		});
+		const inMenu = level >= 2 && all.length >= 2 ? Math.min(level, all.length) : 0;
+		const shown = all.slice(0, all.length - inMenu);
+		const overflow = all.slice(all.length - inMenu).flatMap((slot_1) => find(slot_1) ?? []);
+		let t5;
+		if ($[13] !== intl || $[14] !== itemLabel) {
+			t5 = (action_1) => intl.formatMessage(messages.actionOnItem, {
+				action: getActionLabel(action_1, intl),
+				item: itemLabel
+			});
+			$[13] = intl;
+			$[14] = itemLabel;
+			$[15] = t5;
+		} else t5 = $[15];
+		const name = t5;
+		let t6;
+		if ($[16] !== icons || $[17] !== level || $[18] !== name || $[19] !== onRun || $[20] !== pending || $[21] !== primary) {
+			t6 = (entry) => /* @__PURE__ */ jsx(ActionButton, {
+				action: entry.action,
+				icons,
+				href: entry.href,
+				iconOnly: level >= 1 || entry.action.id !== primary,
+				isPending: pending === entry.action.id,
+				isDisabled: pending !== null && pending !== entry.action.id,
+				"aria-label": name(entry.action),
+				onPress: () => onRun(entry.action)
+			}, entry.action.id);
+			$[16] = icons;
+			$[17] = level;
+			$[18] = name;
+			$[19] = onRun;
+			$[20] = pending;
+			$[21] = primary;
+			$[22] = t6;
+		} else t6 = $[22];
+		const button = t6;
+		const placeholder = _temp;
+		let t7;
+		if ($[23] !== intl || $[24] !== itemLabel) {
+			t7 = intl.formatMessage(messages.itemActions, { item: itemLabel });
+			$[23] = intl;
+			$[24] = itemLabel;
+			$[25] = t7;
+		} else t7 = $[25];
+		const t8 = overflow.length >= 2;
+		const t9 = pending !== null && overflow.some((t10) => {
+			const { action: action_2 } = t10;
+			return action_2.id === pending;
+		});
+		let t11;
+		if ($[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+			t11 = /* @__PURE__ */ jsx(IconButton, {
+				icon: Ellipsis,
+				size: "sm",
+				appearance: "subtle",
+				label: t7,
+				showTooltip: t8,
+				isPending: t9
+			});
+			$[26] = t7;
+			$[27] = t8;
+			$[28] = t9;
+			$[29] = t11;
+		} else t11 = $[29];
+		const menuButton = t11;
+		t2 = /* @__PURE__ */ jsxs("div", {
+			className: Actions_module_default.row,
+			"data-row-actions": all.length,
+			children: [shown.map((slot_2) => {
+				const entry_0 = find(slot_2);
+				return entry_0 !== void 0 ? button(entry_0) : placeholder(slot_2.action.id, button({
+					...slot_2,
+					href: null
+				}));
+			}), overflow.length >= 2 ? /* @__PURE__ */ jsxs(MenuTrigger, { children: [menuButton, /* @__PURE__ */ jsx(Menu, {
+				placement: "bottom end",
+				onAction: (key_0) => {
+					const entry_1 = overflow.find((t12) => {
+						const { action: action_3 } = t12;
+						return action_3.id === key_0;
+					});
+					if (entry_1 !== void 0 && entry_1.href === null) onRun(entry_1.action);
+				},
+				children: overflow.map((t13) => {
+					const { action: action_4, href } = t13;
+					const icon = getActionIcon(action_4, icons);
+					return /* @__PURE__ */ jsx(MenuItem, {
+						id: action_4.id,
+						isDanger: action_4.destructive === true,
+						...icon !== void 0 ? { icon } : {},
+						...href !== null ? { href } : {},
+						children: getActionLabel(action_4, intl)
+					}, action_4.id);
+				})
+			})] }) : overflow.length === 1 && overflow[0] !== void 0 ? button(overflow[0]) : inMenu > 0 ? placeholder("menu", menuButton) : null]
+		});
 		$[0] = actions;
 		$[1] = icons;
 		$[2] = intl;
 		$[3] = itemLabel;
-		$[4] = onRun;
-		$[5] = pending;
-		$[6] = t1;
-	} else t1 = $[6];
-	let t2;
-	if ($[13] !== icons || $[14] !== intl || $[15] !== itemLabel || $[16] !== menu || $[17] !== onRun || $[18] !== pending) {
-		t2 = menu.length > 0 ? /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsx(IconButton, {
-			icon: Ellipsis,
-			size: "sm",
-			label: intl.formatMessage(messages.itemActions, { item: itemLabel }),
-			isPending: pending !== null && menu.some((t3) => {
-				const { action: action_0 } = t3;
-				return action_0.id === pending;
-			})
-		}), /* @__PURE__ */ jsx(Menu, {
-			placement: "bottom end",
-			onAction: (key) => {
-				const entry = menu.find((t4) => {
-					const { action: action_1 } = t4;
-					return action_1.id === key;
-				});
-				if (entry !== void 0 && entry.href === null) onRun(entry.action);
-			},
-			children: menu.map((t5) => {
-				const { action: action_2, href: href_0 } = t5;
-				const icon = getActionIcon(action_2, icons);
-				return /* @__PURE__ */ jsx(MenuItem, {
-					id: action_2.id,
-					isDanger: action_2.destructive === true,
-					...icon !== void 0 ? { icon } : {},
-					...href_0 !== null ? { href: href_0 } : {},
-					children: getActionLabel(action_2, intl)
-				}, action_2.id);
-			})
-		})] }) : null;
-		$[13] = icons;
-		$[14] = intl;
-		$[15] = itemLabel;
-		$[16] = menu;
-		$[17] = onRun;
-		$[18] = pending;
-		$[19] = t2;
-	} else t2 = $[19];
-	let t3;
-	if ($[20] !== t1 || $[21] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: Actions_module_default.row,
-			children: [t1, t2]
-		});
-		$[20] = t1;
-		$[21] = t2;
-		$[22] = t3;
-	} else t3 = $[22];
-	return t3;
+		$[4] = level;
+		$[5] = menu;
+		$[6] = onRun;
+		$[7] = pending;
+		$[8] = primary;
+		$[9] = slots;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+}
+function _temp(key, content) {
+	return /* @__PURE__ */ jsx("span", {
+		className: Actions_module_default.placeholder,
+		"aria-hidden": "true",
+		inert: true,
+		children: content
+	}, key);
 }
 //#endregion
-export { RowActions };
+export { RowActions, orderRowActions };
 
 //# sourceMappingURL=RowActions.js.map

package/dist/actions/RowActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowActions.js","names":["Ellipsis","ItemAction","getActionLabel","Action","IconButton","Menu","MenuItem","MenuTrigger","usePanneauIntl","messages","ActionButton","styles","ActionIcons","getActionIcon","RowActionsProps","itemLabel","actions","menu","pending","onRun","action","icons","RowActions","t0","$","_c","intl","t1","t2","t3","href","id","formatMessage","actionOnItem","item","map","length","itemActions","some","action_0","key","entry","find","t4","action_1","undefined","t5","action_2","href_0","icon","destructive","row","_c","styles"],"sources":["../../src/actions/RowActions.tsx"],"sourcesContent":["import { Ellipsis } from 'lucide-react';\n\nimport type { ItemAction } from '@panneau/core';\nimport { getActionLabel } from '@panneau/intl';\nimport type { Action } from '@panneau/protocol';\nimport { IconButton, Menu, MenuItem, MenuTrigger, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { ActionButton } from './ActionButton';\nimport styles from './Actions.module.css';\nimport { type ActionIcons, getActionIcon } from './icons';\n\nexport interface RowActionsProps {\n    /** The label of the item, for the accessible names of its actions. */\n    itemLabel: string;\n    /** Actions shown as buttons, with their links (`getItemActions()` of `@panneau/core`). */\n    actions: readonly ItemAction[];\n    /** Actions in the overflow menu. */\n    menu: readonly ItemAction[];\n    /** Id of the action that is running on this item, if any. */\n    pending: string | null;\n    onRun: (action: Action) => void;\n    /** Icons of actions by id, over the icon the action names. */\n    icons?: ActionIcons | undefined;\n}\n\n/** The actions of a row: buttons, then an overflow menu. */\nexport function RowActions({ itemLabel, actions, menu, pending, onRun, icons }: RowActionsProps) {\n    const intl = usePanneauIntl();\n    return (\n        <div className={styles.row}>\n            {actions.map(({ action, href }) => (\n                <ActionButton\n                    key={action.id}\n                    action={action}\n                    icons={icons}\n                    href={href}\n                    isPending={pending === action.id}\n                    isDisabled={pending !== null && pending !== action.id}\n                    aria-label={intl.formatMessage(messages.actionOnItem, {\n                        action: getActionLabel(action, intl),\n                        item: itemLabel,\n                    })}\n                    onPress={() => onRun(action)}\n                />\n            ))}\n            {menu.length > 0 ? (\n                <MenuTrigger>\n                    <IconButton\n                        icon={Ellipsis}\n                        size=\"sm\"\n                        label={intl.formatMessage(messages.itemActions, { item: itemLabel })}\n                        isPending={\n                            pending !== null && menu.some(({ action }) => action.id === pending)\n                        }\n                    />\n                    <Menu\n                        placement=\"bottom end\"\n                        onAction={(key) => {\n                            const entry = menu.find(({ action }) => action.id === key);\n                            if (entry !== undefined && entry.href === null) {\n                                onRun(entry.action);\n                            }\n                        }}\n                    >\n                        {menu.map(({ action, href }) => {\n                            const icon = getActionIcon(action, icons);\n                            return (\n                                <MenuItem\n                                    key={action.id}\n                                    id={action.id}\n                                    isDanger={action.destructive === true}\n                                    {...(icon !== undefined ? { icon } : {})}\n                                    {...(href !== null ? { href } : {})}\n                                >\n                                    {getActionLabel(action, intl)}\n                                </MenuItem>\n                            );\n                        })}\n                    </Menu>\n                </MenuTrigger>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"RowActions.js","names":["Ellipsis","ReactNode","use","ItemAction","getActionLabel","Action","IconButton","Menu","MenuItem","MenuTrigger","usePanneauIntl","messages","ActionButton","styles","RowActionsFit","ActionIcons","getActionIcon","RowActionsProps","itemLabel","actions","menu","pending","onRun","action","icons","slots","primary","orderRowActions","all","filter","entry","index","list","findIndex","other","id","destructive","RowActions","t0","$","_c","t1","undefined","intl","level","t2","own","t3","t4","some","slot","find","slot_0","action_0","inMenu","length","Math","min","shown","slice","overflow","flatMap","slot_1","t5","action_1","formatMessage","actionOnItem","item","name","t6","href","button","placeholder","_temp","t7","itemActions","t8","t9","t10","action_2","t11","menuButton","row","map","slot_2","entry_0","key_0","entry_1","t12","action_3","key","t13","action_4","icon","content","_c","styles"],"sources":["../../src/actions/RowActions.tsx"],"sourcesContent":["import { Ellipsis } from 'lucide-react';\nimport { type ReactNode, use } from 'react';\n\nimport type { ItemAction } from '@panneau/core';\nimport { getActionLabel } from '@panneau/intl';\nimport type { Action } from '@panneau/protocol';\nimport { IconButton, Menu, MenuItem, MenuTrigger, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { ActionButton } from './ActionButton';\nimport styles from './Actions.module.css';\nimport { RowActionsFit } from './fit';\nimport { type ActionIcons, getActionIcon } from './icons';\n\nexport interface RowActionsProps {\n    /** The label of the item, for the accessible names of its actions. */\n    itemLabel: string;\n    /** Actions placed in `row`, with their links (`selectItemActions()` of `@panneau/core`). */\n    actions: readonly ItemAction[];\n    /** Actions placed in `menu`: icons too while they fit, the first to go in the menu. */\n    menu: readonly ItemAction[];\n    /** Id of the action that is running on this item, if any. */\n    pending: string | null;\n    onRun: (action: Action) => void;\n    /** Icons of actions by id, over the icon the action names. */\n    icons?: ActionIcons | undefined;\n    /**\n     * The actions of every row of the list, in order (`orderRowActions()`): a row keeps the place\n     * of those it doesn't have, so the actions of the rows line up. Without it, its own.\n     */\n    slots?: readonly ItemAction[] | undefined;\n    /** The id of the main action of rows, which keeps its label (`show` or `edit`). */\n    primary?: string | null | undefined;\n}\n\n/**\n * The actions of a row in their order: those placed in `row`, then those placed in `menu`, and\n * those that destroy last. The last ones are the first to go in the menu.\n */\nexport function orderRowActions(\n    actions: readonly ItemAction[],\n    menu: readonly ItemAction[],\n): ItemAction[] {\n    const all = [...actions, ...menu].filter(\n        (entry, index, list) =>\n            list.findIndex((other) => other.action.id === entry.action.id) === index,\n    );\n    return [\n        ...all.filter(({ action }) => action.destructive !== true),\n        ...all.filter(({ action }) => action.destructive === true),\n    ];\n}\n\n/**\n * The actions of a row (decision 0060): their icons, in their colors, with their labels as names\n * and tooltips, but the main action, which keeps its label while the row has room; and when the\n * icons don't fit, the last ones in an overflow menu, which never holds a single action. How they fit is the same for every row of the list (`RowActionsFit`), and a\n * row keeps the place of the actions of other rows that it doesn't have, so they line up.\n */\nexport function RowActions({\n    itemLabel,\n    actions,\n    menu,\n    pending,\n    onRun,\n    icons,\n    slots,\n    primary = null,\n}: RowActionsProps) {\n    const intl = usePanneauIntl();\n    const level = use(RowActionsFit);\n    const own = orderRowActions(actions, menu);\n    const all = [\n        ...(slots ?? []),\n        ...own.filter(({ action }) => slots?.some((slot) => slot.action.id === action.id) !== true),\n    ];\n    const find = (slot: ItemAction) => own.find(({ action }) => action.id === slot.action.id);\n    const inMenu = level >= 2 && all.length >= 2 ? Math.min(level, all.length) : 0;\n    const shown = all.slice(0, all.length - inMenu);\n    const overflow = all.slice(all.length - inMenu).flatMap((slot) => find(slot) ?? []);\n    const name = (action: Action) =>\n        intl.formatMessage(messages.actionOnItem, {\n            action: getActionLabel(action, intl),\n            item: itemLabel,\n        });\n    const button = (entry: ItemAction) => (\n        <ActionButton\n            key={entry.action.id}\n            action={entry.action}\n            icons={icons}\n            href={entry.href}\n            iconOnly={level >= 1 || entry.action.id !== primary}\n            isPending={pending === entry.action.id}\n            isDisabled={pending !== null && pending !== entry.action.id}\n            aria-label={name(entry.action)}\n            onPress={() => onRun(entry.action)}\n        />\n    );\n    // The place of an action of other rows: the same button, unseen and out of reach\n    const placeholder = (key: string, content: ReactNode) => (\n        <span key={key} className={styles.placeholder} aria-hidden=\"true\" inert>\n            {content}\n        </span>\n    );\n    const menuButton = (\n        <IconButton\n            icon={Ellipsis}\n            size=\"sm\"\n            appearance=\"subtle\"\n            label={intl.formatMessage(messages.itemActions, { item: itemLabel })}\n            showTooltip={overflow.length >= 2}\n            isPending={pending !== null && overflow.some(({ action }) => action.id === pending)}\n        />\n    );\n    return (\n        <div className={styles.row} data-row-actions={all.length}>\n            {shown.map((slot) => {\n                const entry = find(slot);\n                return entry !== undefined\n                    ? button(entry)\n                    : placeholder(slot.action.id, button({ ...slot, href: null }));\n            })}\n            {overflow.length >= 2 ? (\n                <MenuTrigger>\n                    {menuButton}\n                    <Menu\n                        placement=\"bottom end\"\n                        onAction={(key) => {\n                            const entry = overflow.find(({ action }) => action.id === key);\n                            if (entry !== undefined && entry.href === null) {\n                                onRun(entry.action);\n                            }\n                        }}\n                    >\n                        {overflow.map(({ action, href }) => {\n                            const icon = getActionIcon(action, icons);\n                            return (\n                                <MenuItem\n                                    key={action.id}\n                                    id={action.id}\n                                    isDanger={action.destructive === true}\n                                    {...(icon !== undefined ? { icon } : {})}\n                                    {...(href !== null ? { href } : {})}\n                                >\n                                    {getActionLabel(action, intl)}\n                                </MenuItem>\n                            );\n                        })}\n                    </Menu>\n                </MenuTrigger>\n            ) : overflow.length === 1 && overflow[0] !== undefined ? (\n                // A single action is no menu: its button, in the menu's place\n                button(overflow[0])\n            ) : inMenu > 0 ? (\n                placeholder('menu', menuButton)\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/actions/fit.d.ts

@@ -0,0 +1,25 @@
+/**
+ * How the actions of rows fit (decision 0060), the same for every row of a list: `0`, every
+ * action as an icon but the main one, with its label; `1`, every action as an icon; `n` from 2,
+ * the last `n` actions of each row in its menu.
+ */
+export declare const RowActionsFit: import("react").Context<number>;
+/** What the fit of a list depends on, besides its width: its items and its columns. */
+export declare function fitContent(items: readonly {
+    id: string;
+}[], columns: readonly {
+    id: string;
+}[]): string;
+/**
+ * Fits the actions of the rows of a list in the room they have (decision 0060). It draws each
+ * level in turn, from every action as an icon but the main one, labelled, then the main one as an
+ * icon too, then a menu of two actions, three…, while the next one may help, and keeps the best:
+ * where the actions crowd least (the list overflows, the actions of a row wrap or take more than
+ * 40% of it), then, on rows of five actions or more, where the rows are shortest (their content
+ * wraps or is cut less), then the fewest actions in the menu.
+ *
+ * @returns the level, and a callback ref for the element to measure: the list, which holds the
+ * actions.
+ */
+export declare function useRowActionsFit(content: string): [level: number, measure: (element: HTMLElement | null) => void];
+//# sourceMappingURL=fit.d.ts.map

package/dist/actions/fit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fit.d.ts","sourceRoot":"","sources":["../../src/actions/fit.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,aAAa,iCAAmB,CAAC;AAE9C,uFAAuF;AACvF,wBAAgB,UAAU,CACtB,KAAK,EAAE,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,EAChC,OAAO,EAAE,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,GACnC,MAAM,CAER;AAgKD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC5B,OAAO,EAAE,MAAM,GAChB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC,CA8BjE"}