@panneau/lists 4.1.1 → 5.0.0-alpha.1

package/dist/ListView.js

@@ -0,0 +1,325 @@
+import { getActionHref, groupListActions, hasScope, isAllowedOn } from "./actions/actions.js";
+import { messages } from "./messages.js";
+import { ConfirmDialog, needsConfirmation } from "./actions/ConfirmDialog.js";
+import { getColumnValue, toText } from "./values.js";
+import { builtInDisplays } from "./displays/displays.js";
+import { cx } from "./cx.js";
+import { builtInLayouts } from "./layouts/builtIn.js";
+import ListView_module_default from "./ListView.module.js";
+import { ActionButton } from "./actions/ActionButton.js";
+import { RowActions } from "./actions/RowActions.js";
+import { FilterChips, FilterControls, useFilterLabels } from "./filters/Filters.js";
+import { countSelected, getPageSelection, isItemSelected } from "./selection.js";
+import { LayoutSwitch } from "./toolbar/LayoutSwitch.js";
+import { Pagination } from "./toolbar/Pagination.js";
+import { SearchField } from "./toolbar/SearchField.js";
+import { SortSelect } from "./toolbar/SortSelect.js";
+import { useListState } from "./useListState.js";
+import { usePlugins } from "@panneau/core";
+import { Alert, Button, Checkbox, Spinner, usePanneauIntl, useToast } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/ListView.tsx
+function keyOf(action, item) {
+	return item !== void 0 ? `${action.id}\u0000${item.id}` : action.id;
+}
+/**
+* Renders the list state of `@panneau/core`: the items of the current page in a layout (table or
+* cards), with sorting, search, filters and their chips, pagination, selection and actions. It
+* fetches nothing: the caller gives the items of the list's query and their total.
+*/
+function ListView({ list, items, columns, total, isLoading = false, error = null, onRetry, filters = [], fields = [], search = false, layouts: layoutsProp = ["table"], layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, actionIcons, itemTitle, getItemLabel: getItemLabelProp, getItemHref, displays, layoutComponents, filterControls, toolbar, emptyMessage, "aria-label": ariaLabel, className }) {
+	const intl = usePanneauIntl();
+	const toasts = useToast();
+	const plugins = usePlugins();
+	const { query, selection } = useListState(list);
+	const filterLabels = useFilterLabels();
+	const [uncontrolledLayout, setLayout] = useState(null);
+	const [confirming, setConfirming] = useState(null);
+	const [pending, setPending] = useState(null);
+	const label = ariaLabel ?? intl.formatMessage(messages.list);
+	const pageItems = items ?? [];
+	const count = total ?? pageItems.length;
+	const sort = query.sort ?? [];
+	const filterValues = query.filter ?? {};
+	const hasQuery = Object.keys(filterValues).length > 0 || (query.q ?? "") !== "";
+	const allDisplays = {
+		...builtInDisplays,
+		...Object.fromEntries(plugins.displays),
+		...displays
+	};
+	const allLayouts = {
+		...builtInLayouts,
+		...Object.fromEntries(plugins.listLayouts),
+		...layoutComponents
+	};
+	const available = layoutsProp.filter((id) => allLayouts[id] !== void 0);
+	const layouts = available.length > 0 ? available : ["table"];
+	const layout = controlledLayout ?? uncontrolledLayout ?? layouts[0] ?? "table";
+	const Layout = allLayouts[layout] ?? builtInLayouts.table;
+	const grouped = groupListActions(actionsProp);
+	const rowActions = grouped.row.filter((action) => hasScope(action, "item"));
+	const rowMenu = grouped.menu.filter((action_0) => hasScope(action_0, "item"));
+	const toolbarActions = [...grouped.toolbar, ...grouped.menu].filter((action_1, index, all) => (hasScope(action_1, "selection") || hasScope(action_1, "resource")) && all.findIndex((candidate) => candidate.id === action_1.id) === index);
+	const selectionActions = toolbarActions.filter((action_2) => hasScope(action_2, "selection"));
+	const resourceActions = toolbarActions.filter((action_3) => hasScope(action_3, "resource"));
+	const selectable = selectableProp ?? selectionActions.length > 0;
+	const selectedCount = selectable ? countSelected(selection, count) : 0;
+	const selectedItems = pageItems.filter((item) => isItemSelected(selection, item.id));
+	const pageSelection = getPageSelection(selection, pageItems);
+	const getItemLabel = (item_0) => {
+		if (getItemLabelProp !== void 0) return getItemLabelProp(item_0);
+		const titleColumn = columns.find((column) => column.id === itemTitle) ?? (itemTitle === void 0 ? columns[0] : void 0);
+		const title = titleColumn !== void 0 ? toText(getColumnValue(item_0, titleColumn, intl.locale), intl.locale) : itemTitle !== void 0 ? toText(item_0[itemTitle], intl.locale) : "";
+		return title !== "" ? title : item_0.id;
+	};
+	const renderValue = (item_1, column_0) => {
+		if (column_0.render !== void 0) return column_0.render(item_1);
+		const Display = (column_0.display !== void 0 && column_0.display !== null ? allDisplays[column_0.display] : void 0) ?? builtInDisplays.text;
+		if (Display === void 0) return null;
+		return /* @__PURE__ */ jsx(Display, {
+			value: getColumnValue(item_1, column_0, intl.locale),
+			item: item_1,
+			column: column_0,
+			field: column_0.field ?? null
+		});
+	};
+	const execute = async (event) => {
+		setConfirming(null);
+		setPending(keyOf(event.action, event.item));
+		try {
+			const outcome = await onAction?.(event);
+			if (event.scope === "selection" && outcome !== false) list.clearSelection();
+		} catch (caught) {
+			toasts.show({
+				title: intl.formatMessage(messages.actionFailed, { action: event.action.label }),
+				...caught instanceof Error && caught.message !== "" ? { description: caught.message } : {},
+				tone: "danger"
+			});
+		} finally {
+			setPending(null);
+		}
+	};
+	const run = (event_0) => {
+		if (needsConfirmation(event_0)) setConfirming(event_0);
+		else execute(event_0);
+	};
+	const runOnItem = (action_4, item_2) => run({
+		action: action_4,
+		scope: "item",
+		item: item_2,
+		count: 1,
+		skipped: []
+	});
+	const runOnSelection = (action_5) => {
+		const selected = list.getSelection();
+		if (selected === null) return;
+		run({
+			action: action_5,
+			scope: "selection",
+			selection: selected,
+			count: selectedCount,
+			skipped: selectedItems.filter((item_3) => !isAllowedOn(action_5, item_3))
+		});
+	};
+	const runOnResource = (action_6) => run({
+		action: action_6,
+		scope: "resource",
+		count,
+		skipped: []
+	});
+	const renderActions = (item_4) => {
+		const allowed = rowActions.filter((action_7) => isAllowedOn(action_7, item_4));
+		const menu = rowMenu.filter((action_8) => isAllowedOn(action_8, item_4));
+		if (allowed.length === 0 && menu.length === 0) return null;
+		const running = pending?.endsWith(`\u0000${item_4.id}`) === true ? pending.split("\0")[0] : null;
+		return /* @__PURE__ */ jsx(RowActions, {
+			item: item_4,
+			itemLabel: getItemLabel(item_4),
+			actions: allowed,
+			menu,
+			pending: running ?? null,
+			onRun: (action_9) => runOnItem(action_9, item_4),
+			icons: actionIcons
+		});
+	};
+	const pageCheckbox = /* @__PURE__ */ jsx(Checkbox, {
+		"aria-label": intl.formatMessage(messages.selectPage),
+		isSelected: pageSelection === "all",
+		isIndeterminate: pageSelection === "some",
+		isDisabled: pageItems.length === 0,
+		onChange: () => {
+			const ids = pageItems.map((item_5) => item_5.id);
+			if (pageSelection === "all") list.deselect(ids);
+			else list.select(ids);
+		}
+	});
+	const sortable = columns.some((column_1) => column_1.sortable === true);
+	const showToolbar = search || filters.length > 0 || sortable || layouts.length > 1 || resourceActions.length > 0 || toolbar !== void 0;
+	const body = (() => {
+		if (error !== null) return /* @__PURE__ */ jsx(Alert, {
+			tone: "danger",
+			title: intl.formatMessage(messages.loadFailed),
+			actions: onRetry !== void 0 ? /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onPress: onRetry,
+				children: intl.formatMessage(messages.retry)
+			}) : void 0,
+			children: error.message
+		});
+		if (items === void 0) return /* @__PURE__ */ jsx("div", {
+			className: ListView_module_default.state,
+			children: /* @__PURE__ */ jsx(Spinner, { showLabel: true })
+		});
+		if (pageItems.length === 0) return /* @__PURE__ */ jsxs("div", {
+			className: ListView_module_default.state,
+			children: [/* @__PURE__ */ jsx("p", { children: hasQuery ? intl.formatMessage(messages.noResults) : emptyMessage ?? intl.formatMessage(messages.empty) }), hasQuery ? /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onPress: () => clearFilters(),
+				children: intl.formatMessage(messages.clearFilters)
+			}) : null]
+		});
+		return /* @__PURE__ */ jsx(Layout, {
+			items: pageItems,
+			columns,
+			renderValue,
+			getItemLabel,
+			getItemHref,
+			selectable,
+			isSelected: (item_6) => isItemSelected(selection, item_6.id),
+			onToggle: (item_7) => list.toggle(item_7.id),
+			renderActions,
+			sort,
+			onSort: (column_2) => list.toggleSort(column_2.id),
+			label,
+			pageSelection: pageCheckbox
+		});
+	})();
+	function clearFilters() {
+		Object.keys(filterValues).forEach((id_0) => list.setFilter(id_0, void 0));
+		if ((query.q ?? "") !== "") list.setSearch("");
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(ListView_module_default.list, className),
+		children: [
+			showToolbar ? /* @__PURE__ */ jsxs("div", {
+				className: ListView_module_default.toolbar,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: ListView_module_default.toolbarStart,
+					children: [search ? /* @__PURE__ */ jsx(SearchField, {
+						value: query.q ?? "",
+						onChange: (q) => list.setSearch(q)
+					}) : null, filters.length > 0 ? /* @__PURE__ */ jsx(FilterControls, {
+						filters,
+						values: filterValues,
+						onChange: (id_1, value) => list.setFilter(id_1, value),
+						onLabel: filterLabels.remember,
+						controls: filterControls,
+						columns,
+						fields,
+						labels: filterLabels.labels
+					}) : null]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: ListView_module_default.toolbarEnd,
+					children: [
+						sortable ? /* @__PURE__ */ jsx("div", {
+							className: layout === "table" ? ListView_module_default.tableSort : void 0,
+							children: /* @__PURE__ */ jsx(SortSelect, {
+								columns,
+								sort,
+								onChange: (next) => list.setSort(next)
+							})
+						}) : null,
+						layouts.length > 1 ? /* @__PURE__ */ jsx(LayoutSwitch, {
+							layouts,
+							value: layout,
+							onChange: (next_0) => {
+								setLayout(next_0);
+								onLayoutChange?.(next_0);
+							}
+						}) : null,
+						resourceActions.filter((action_10) => selectedCount === 0 || !hasScope(action_10, "selection")).map((action_11) => /* @__PURE__ */ jsx(ActionButton, {
+							action: action_11,
+							icons: actionIcons,
+							size: "md",
+							href: getActionHref(action_11),
+							isPending: pending === keyOf(action_11),
+							onPress: () => runOnResource(action_11)
+						}, action_11.id)),
+						toolbar
+					]
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx(FilterChips, {
+				filters,
+				values: filterValues,
+				q: query.q,
+				onRemove: (id_2) => list.setFilter(id_2, void 0),
+				onClearSearch: () => list.setSearch(""),
+				onClear: clearFilters,
+				columns,
+				fields,
+				labels: filterLabels.labels
+			}),
+			selectedCount > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: ListView_module_default.selection,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: ListView_module_default.selectionCount,
+						role: "status",
+						children: selection.mode === "all" ? intl.formatMessage(messages.allMatchingSelected, { total: selectedCount }) : intl.formatMessage(messages.selectedCount, { count: selectedCount })
+					}),
+					selection.mode === "ids" && pageSelection === "all" && count > pageItems.length ? /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						onPress: () => list.selectAllMatching(),
+						children: intl.formatMessage(messages.selectAllMatching, { total: count })
+					}) : null,
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						onPress: () => list.clearSelection(),
+						children: intl.formatMessage(messages.clearSelection)
+					}),
+					selectionActions.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: ListView_module_default.selectionActions,
+						children: selectionActions.map((action_12) => {
+							const skipped = selectedItems.filter((item_8) => !isAllowedOn(action_12, item_8)).length;
+							return /* @__PURE__ */ jsx(ActionButton, {
+								action: action_12,
+								icons: actionIcons,
+								size: "md",
+								href: null,
+								isPending: pending === keyOf(action_12),
+								isDisabled: pending !== null && pending !== keyOf(action_12) || skipped >= selectedCount,
+								onPress: () => runOnSelection(action_12)
+							}, action_12.id);
+						})
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: ListView_module_default.body,
+				"aria-busy": isLoading && items !== void 0,
+				children: body
+			}),
+			total !== void 0 && error === null && total > 0 ? /* @__PURE__ */ jsx(Pagination, {
+				page: query.page ?? 1,
+				perPage: query.perPage ?? pageItems.length,
+				total,
+				onPageChange: (page) => list.setPage(page),
+				perPageOptions,
+				onPerPageChange: (perPage) => list.setPerPage(perPage)
+			}) : null,
+			/* @__PURE__ */ jsx(ConfirmDialog, {
+				event: confirming,
+				onConfirm: (event_1) => void execute(event_1),
+				onCancel: () => setConfirming(null)
+			})
+		]
+	});
+}
+//#endregion
+export { ListView };
+
+//# sourceMappingURL=ListView.js.map

package/dist/ListView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.js","names":["action","item","column","event","id","next","styles"],"sources":["../src/ListView.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport type { List } from '@panneau/core';\nimport { usePlugins } from '@panneau/core';\nimport type { Action, Field, Filter } from '@panneau/protocol';\nimport { Alert, Button, Checkbox, Spinner, usePanneauIntl, useToast } from '@panneau/ui';\n\nimport styles from './ListView.module.css';\nimport { ActionButton } from './actions/ActionButton';\nimport { ConfirmDialog, needsConfirmation } from './actions/ConfirmDialog';\nimport { RowActions } from './actions/RowActions';\nimport {\n    type ListActions,\n    getActionHref,\n    groupListActions,\n    hasScope,\n    isAllowedOn,\n} from './actions/actions';\nimport type { ActionIcons } from './actions/icons';\nimport { cx } from './cx';\nimport { builtInDisplays } from './displays/displays';\nimport { FilterChips, FilterControls, useFilterLabels } from './filters/Filters';\nimport { builtInLayouts } from './layouts/builtIn';\nimport { messages } from './messages';\nimport { countSelected, getPageSelection, isItemSelected } from './selection';\nimport { LayoutSwitch } from './toolbar/LayoutSwitch';\nimport { Pagination } from './toolbar/Pagination';\nimport { SearchField } from './toolbar/SearchField';\nimport { SortSelect } from './toolbar/SortSelect';\nimport type {\n    DisplayEntry,\n    FilterEntry,\n    ListActionEvent,\n    ListActionHandler,\n    ListColumn,\n    ListItem,\n    ListLayoutEntry,\n} from './types';\nimport { useListState } from './useListState';\nimport { getColumnValue, toText } from './values';\n\nexport interface ListViewProps {\n    /** The list state of `@panneau/core` (`useList()`): query and selection. */\n    list: List;\n    /** The items of the current page. `undefined` while they load for the first time. */\n    items: readonly ListItem[] | undefined;\n    columns: readonly ListColumn[];\n    /**\n     * How many items match the query, on every page (`meta.total`). With it, the list shows\n     * pagination and offers to select every matching item. Without it, `items` is the whole list.\n     */\n    total?: number | undefined;\n    /** Shows that items are loading. Items already shown stay, dimmed. */\n    isLoading?: boolean;\n    /** An error while loading: an alert with a retry replaces the items. */\n    error?: Error | null;\n    onRetry?: () => void;\n    /** Filter controls, with chips for the active filters. */\n    filters?: readonly Filter[];\n    /** Fields of the items, for the labels and options of filters that are not columns. */\n    fields?: readonly Field[];\n    /** Shows a search field (`q`). */\n    search?: boolean;\n    /** Layouts to choose from, the first one being the default. Defaults to `['table']`. */\n    layouts?: readonly string[];\n    /** The layout, controlled. */\n    layout?: string;\n    onLayoutChange?: (layout: string) => void;\n    /** Page sizes to choose from. */\n    perPageOptions?: readonly number[];\n    /** Shows checkboxes. Defaults to whether there are selection actions. */\n    selectable?: boolean;\n    /**\n     * Actions: a list (placed by their `placement`, or by scope), or grouped by placement as\n     * `resolveList()` does. Those the user can't run (`abilities.run`) are hidden.\n     */\n    actions?: ListActions;\n    /** Runs an action, after its confirmation. */\n    onAction?: ListActionHandler;\n    /**\n     * Icons of actions by action id (`{ archive: Archive }`), for actions written in code. They\n     * win over the Lucide icon an action names (`\"icon\": \"archive\"`).\n     */\n    actionIcons?: ActionIcons;\n    /** The field that titles items, for their label (`itemTitle` of the resource). */\n    itemTitle?: string;\n    /** The label of an item, for checkboxes and actions. Defaults to its title, then its id. */\n    getItemLabel?: (item: ListItem) => string;\n    /** A link to an item, on its title. */\n    getItemHref?: (item: ListItem) => string | null;\n    /** Displays by name, over the built-in ones and those of the plugins. */\n    displays?: Readonly<Record<string, DisplayEntry>>;\n    /** Layouts by id, over the built-in ones and those of the plugins. */\n    layoutComponents?: Readonly<Record<string, ListLayoutEntry>>;\n    /** Filter controls by filter type, over the built-in ones. */\n    filterControls?: Readonly<Record<string, FilterEntry>>;\n    /** Content at the end of the toolbar, such as a button to create an item. */\n    toolbar?: ReactNode;\n    /** Shown when the list has no items, without filters or search. */\n    emptyMessage?: ReactNode;\n    /** Accessible name of the list. Defaults to \"Items\". */\n    'aria-label'?: string;\n    className?: string;\n}\n\nfunction keyOf(action: Action, item?: ListItem): string {\n    return item !== undefined ? `${action.id}\\u0000${item.id}` : action.id;\n}\n\n/**\n * Renders the list state of `@panneau/core`: the items of the current page in a layout (table or\n * cards), with sorting, search, filters and their chips, pagination, selection and actions. It\n * fetches nothing: the caller gives the items of the list's query and their total.\n */\nexport function ListView({\n    list,\n    items,\n    columns,\n    total,\n    isLoading = false,\n    error = null,\n    onRetry,\n    filters = [],\n    fields = [],\n    search = false,\n    layouts: layoutsProp = ['table'],\n    layout: controlledLayout,\n    onLayoutChange,\n    perPageOptions,\n    selectable: selectableProp,\n    actions: actionsProp,\n    onAction,\n    actionIcons,\n    itemTitle,\n    getItemLabel: getItemLabelProp,\n    getItemHref,\n    displays,\n    layoutComponents,\n    filterControls,\n    toolbar,\n    emptyMessage,\n    'aria-label': ariaLabel,\n    className,\n}: ListViewProps) {\n    const intl = usePanneauIntl();\n    const toasts = useToast();\n    const plugins = usePlugins();\n    const { query, selection } = useListState(list);\n    const filterLabels = useFilterLabels();\n    const [uncontrolledLayout, setLayout] = useState<string | null>(null);\n    const [confirming, setConfirming] = useState<ListActionEvent | null>(null);\n    const [pending, setPending] = useState<string | null>(null);\n\n    const label = ariaLabel ?? intl.formatMessage(messages.list);\n    const pageItems = items ?? [];\n    const count = total ?? pageItems.length;\n    const sort = query.sort ?? [];\n    const filterValues = query.filter ?? {};\n    const hasQuery = Object.keys(filterValues).length > 0 || (query.q ?? '') !== '';\n\n    const allDisplays: Record<string, DisplayEntry> = {\n        ...builtInDisplays,\n        ...(Object.fromEntries(plugins.displays) as Record<string, DisplayEntry>),\n        ...displays,\n    };\n    const allLayouts: Record<string, ListLayoutEntry> = {\n        ...builtInLayouts,\n        ...(Object.fromEntries(plugins.listLayouts) as Record<string, ListLayoutEntry>),\n        ...layoutComponents,\n    };\n    // Layouts without a component (a plugin's that isn't installed) are left out.\n    const available = layoutsProp.filter((id) => allLayouts[id] !== undefined);\n    const layouts = available.length > 0 ? available : ['table'];\n    const layout = controlledLayout ?? uncontrolledLayout ?? layouts[0] ?? 'table';\n    const Layout = allLayouts[layout] ?? builtInLayouts.table;\n\n    const grouped = groupListActions(actionsProp);\n    const rowActions = grouped.row.filter((action) => hasScope(action, 'item'));\n    const rowMenu = grouped.menu.filter((action) => hasScope(action, 'item'));\n    // Actions placed in the menu also apply to selections, from the toolbar (once each).\n    const toolbarActions = [...grouped.toolbar, ...grouped.menu].filter(\n        (action, index, all) =>\n            (hasScope(action, 'selection') || hasScope(action, 'resource')) &&\n            all.findIndex((candidate) => candidate.id === action.id) === index,\n    );\n    const selectionActions = toolbarActions.filter((action) => hasScope(action, 'selection'));\n    const resourceActions = toolbarActions.filter((action) => hasScope(action, 'resource'));\n    const selectable = selectableProp ?? selectionActions.length > 0;\n\n    const selectedCount = selectable ? countSelected(selection, count) : 0;\n    const selectedItems = pageItems.filter((item) => isItemSelected(selection, item.id));\n    const pageSelection = getPageSelection(selection, pageItems);\n\n    const getItemLabel = (item: ListItem): string => {\n        if (getItemLabelProp !== undefined) {\n            return getItemLabelProp(item);\n        }\n        const titleColumn =\n            columns.find((column) => column.id === itemTitle) ??\n            (itemTitle === undefined ? columns[0] : undefined);\n        const title =\n            titleColumn !== undefined\n                ? toText(getColumnValue(item, titleColumn, intl.locale), intl.locale)\n                : itemTitle !== undefined\n                  ? toText(item[itemTitle], intl.locale)\n                  : '';\n        return title !== '' ? title : item.id;\n    };\n\n    const renderValue = (item: ListItem, column: ListColumn): ReactNode => {\n        if (column.render !== undefined) {\n            return column.render(item);\n        }\n        const Display =\n            (column.display !== undefined && column.display !== null\n                ? allDisplays[column.display]\n                : undefined) ?? builtInDisplays.text;\n        if (Display === undefined) {\n            return null;\n        }\n        return (\n            <Display\n                value={getColumnValue(item, column, intl.locale)}\n                item={item}\n                column={column}\n                field={column.field ?? null}\n            />\n        );\n    };\n\n    const execute = async (event: ListActionEvent) => {\n        setConfirming(null);\n        setPending(keyOf(event.action, event.item));\n        try {\n            const outcome = await onAction?.(event);\n            // `false`: the action didn't run (its parameters were cancelled).\n            if (event.scope === 'selection' && outcome !== false) {\n                list.clearSelection();\n            }\n        } catch (caught) {\n            toasts.show({\n                title: intl.formatMessage(messages.actionFailed, { action: event.action.label }),\n                ...(caught instanceof Error && caught.message !== ''\n                    ? { description: caught.message }\n                    : {}),\n                tone: 'danger',\n            });\n        } finally {\n            setPending(null);\n        }\n    };\n\n    const run = (event: ListActionEvent) => {\n        if (needsConfirmation(event)) {\n            setConfirming(event);\n        } else {\n            void execute(event);\n        }\n    };\n\n    const runOnItem = (action: Action, item: ListItem) =>\n        run({ action, scope: 'item', item, count: 1, skipped: [] });\n\n    const runOnSelection = (action: Action) => {\n        const selected = list.getSelection();\n        if (selected === null) {\n            return;\n        }\n        run({\n            action,\n            scope: 'selection',\n            selection: selected,\n            count: selectedCount,\n            skipped: selectedItems.filter((item) => !isAllowedOn(action, item)),\n        });\n    };\n\n    const runOnResource = (action: Action) =>\n        run({ action, scope: 'resource', count: count, skipped: [] });\n\n    const renderActions = (item: ListItem): ReactNode => {\n        const allowed = rowActions.filter((action) => isAllowedOn(action, item));\n        const menu = rowMenu.filter((action) => isAllowedOn(action, item));\n        if (allowed.length === 0 && menu.length === 0) {\n            return null;\n        }\n        const running =\n            pending?.endsWith(`\\u0000${item.id}`) === true ? pending.split('\\u0000')[0] : null;\n        return (\n            <RowActions\n                item={item}\n                itemLabel={getItemLabel(item)}\n                actions={allowed}\n                menu={menu}\n                pending={running ?? null}\n                onRun={(action) => runOnItem(action, item)}\n                icons={actionIcons}\n            />\n        );\n    };\n\n    const pageCheckbox = (\n        <Checkbox\n            aria-label={intl.formatMessage(messages.selectPage)}\n            isSelected={pageSelection === 'all'}\n            isIndeterminate={pageSelection === 'some'}\n            isDisabled={pageItems.length === 0}\n            onChange={() => {\n                const ids = pageItems.map((item) => item.id);\n                if (pageSelection === 'all') {\n                    list.deselect(ids);\n                } else {\n                    list.select(ids);\n                }\n            }}\n        />\n    );\n\n    const sortable = columns.some((column) => column.sortable === true);\n    const showToolbar =\n        search ||\n        filters.length > 0 ||\n        sortable ||\n        layouts.length > 1 ||\n        resourceActions.length > 0 ||\n        toolbar !== undefined;\n\n    const body = (() => {\n        if (error !== null) {\n            return (\n                <Alert\n                    tone=\"danger\"\n                    title={intl.formatMessage(messages.loadFailed)}\n                    actions={\n                        onRetry !== undefined ? (\n                            <Button size=\"sm\" onPress={onRetry}>\n                                {intl.formatMessage(messages.retry)}\n                            </Button>\n                        ) : undefined\n                    }\n                >\n                    {error.message}\n                </Alert>\n            );\n        }\n        if (items === undefined) {\n            return (\n                <div className={styles.state}>\n                    <Spinner showLabel />\n                </div>\n            );\n        }\n        if (pageItems.length === 0) {\n            return (\n                <div className={styles.state}>\n                    <p>\n                        {hasQuery\n                            ? intl.formatMessage(messages.noResults)\n                            : (emptyMessage ?? intl.formatMessage(messages.empty))}\n                    </p>\n                    {hasQuery ? (\n                        <Button size=\"sm\" onPress={() => clearFilters()}>\n                            {intl.formatMessage(messages.clearFilters)}\n                        </Button>\n                    ) : null}\n                </div>\n            );\n        }\n        return (\n            <Layout\n                items={pageItems}\n                columns={columns}\n                renderValue={renderValue}\n                getItemLabel={getItemLabel}\n                getItemHref={getItemHref}\n                selectable={selectable}\n                isSelected={(item) => isItemSelected(selection, item.id)}\n                onToggle={(item) => list.toggle(item.id)}\n                renderActions={renderActions}\n                sort={sort}\n                onSort={(column) => list.toggleSort(column.id)}\n                label={label}\n                pageSelection={pageCheckbox}\n            />\n        );\n    })();\n\n    function clearFilters() {\n        Object.keys(filterValues).forEach((id) => list.setFilter(id, undefined));\n        if ((query.q ?? '') !== '') {\n            list.setSearch('');\n        }\n    }\n\n    return (\n        <div className={cx(styles.list, className)}>\n            {showToolbar ? (\n                <div className={styles.toolbar}>\n                    <div className={styles.toolbarStart}>\n                        {search ? (\n                            <SearchField\n                                value={query.q ?? ''}\n                                onChange={(q) => list.setSearch(q)}\n                            />\n                        ) : null}\n                        {filters.length > 0 ? (\n                            <FilterControls\n                                filters={filters}\n                                values={filterValues}\n                                onChange={(id, value) => list.setFilter(id, value)}\n                                onLabel={filterLabels.remember}\n                                controls={filterControls}\n                                columns={columns}\n                                fields={fields}\n                                labels={filterLabels.labels}\n                            />\n                        ) : null}\n                    </div>\n                    <div className={styles.toolbarEnd}>\n                        {sortable ? (\n                            <div className={layout === 'table' ? styles.tableSort : undefined}>\n                                <SortSelect\n                                    columns={columns}\n                                    sort={sort}\n                                    onChange={(next) => list.setSort(next)}\n                                />\n                            </div>\n                        ) : null}\n                        {layouts.length > 1 ? (\n                            <LayoutSwitch\n                                layouts={layouts}\n                                value={layout}\n                                onChange={(next) => {\n                                    setLayout(next);\n                                    onLayoutChange?.(next);\n                                }}\n                            />\n                        ) : null}\n                        {resourceActions\n                            .filter(\n                                (action) => selectedCount === 0 || !hasScope(action, 'selection'),\n                            )\n                            .map((action) => (\n                                <ActionButton\n                                    key={action.id}\n                                    action={action}\n                                    icons={actionIcons}\n                                    size=\"md\"\n                                    href={getActionHref(action)}\n                                    isPending={pending === keyOf(action)}\n                                    onPress={() => runOnResource(action)}\n                                />\n                            ))}\n                        {toolbar}\n                    </div>\n                </div>\n            ) : null}\n            <FilterChips\n                filters={filters}\n                values={filterValues}\n                q={query.q}\n                onRemove={(id) => list.setFilter(id, undefined)}\n                onClearSearch={() => list.setSearch('')}\n                onClear={clearFilters}\n                columns={columns}\n                fields={fields}\n                labels={filterLabels.labels}\n            />\n            {selectedCount > 0 ? (\n                <div className={styles.selection}>\n                    <span className={styles.selectionCount} role=\"status\">\n                        {selection.mode === 'all'\n                            ? intl.formatMessage(messages.allMatchingSelected, {\n                                  total: selectedCount,\n                              })\n                            : intl.formatMessage(messages.selectedCount, { count: selectedCount })}\n                    </span>\n                    {selection.mode === 'ids' &&\n                    pageSelection === 'all' &&\n                    count > pageItems.length ? (\n                        <Button size=\"sm\" variant=\"ghost\" onPress={() => list.selectAllMatching()}>\n                            {intl.formatMessage(messages.selectAllMatching, { total: count })}\n                        </Button>\n                    ) : null}\n                    <Button size=\"sm\" variant=\"ghost\" onPress={() => list.clearSelection()}>\n                        {intl.formatMessage(messages.clearSelection)}\n                    </Button>\n                    {selectionActions.length > 0 ? (\n                        <div className={styles.selectionActions}>\n                            {selectionActions.map((action) => {\n                                const skipped = selectedItems.filter(\n                                    (item) => !isAllowedOn(action, item),\n                                ).length;\n                                return (\n                                    <ActionButton\n                                        key={action.id}\n                                        action={action}\n                                        icons={actionIcons}\n                                        size=\"md\"\n                                        href={null}\n                                        isPending={pending === keyOf(action)}\n                                        isDisabled={\n                                            (pending !== null && pending !== keyOf(action)) ||\n                                            skipped >= selectedCount\n                                        }\n                                        onPress={() => runOnSelection(action)}\n                                    />\n                                );\n                            })}\n                        </div>\n                    ) : null}\n                </div>\n            ) : null}\n            <div className={styles.body} aria-busy={isLoading && items !== undefined}>\n                {body}\n            </div>\n            {total !== undefined && error === null && total > 0 ? (\n                <Pagination\n                    page={query.page ?? 1}\n                    perPage={query.perPage ?? pageItems.length}\n                    total={total}\n                    onPageChange={(page) => list.setPage(page)}\n                    perPageOptions={perPageOptions}\n                    onPerPageChange={(perPage) => list.setPerPage(perPage)}\n                />\n            ) : null}\n            <ConfirmDialog\n                event={confirming}\n                onConfirm={(event) => void execute(event)}\n                onCancel={() => setConfirming(null)}\n            />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/ListView.module.js

@@ -0,0 +1,28 @@
+import "./ListView.css";
+//#region src/ListView.module.css
+var list = "panneau-list-BmsDb5";
+var toolbar = "panneau-toolbar-Q043Ps";
+var toolbarStart = "panneau-toolbarStart-hzlm5k";
+var toolbarEnd = "panneau-toolbarEnd-0mOtOR";
+var tableSort = "panneau-tableSort-w-YpFE";
+var selection = "panneau-selection-MHT4Rl";
+var selectionCount = "panneau-selectionCount-maD7mZ";
+var selectionActions = "panneau-selectionActions-lQgDIc";
+var body = "panneau-body-m0W7NQ";
+var state = "panneau-state-VVBIkb";
+var ListView_module_default = {
+	list,
+	toolbar,
+	toolbarStart,
+	toolbarEnd,
+	tableSort,
+	selection,
+	selectionCount,
+	selectionActions,
+	body,
+	state
+};
+//#endregion
+export { body, ListView_module_default as default, list, selection, selectionActions, selectionCount, state, tableSort, toolbar, toolbarEnd, toolbarStart };
+
+//# sourceMappingURL=ListView.module.js.map

package/dist/ListView.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.module.js","names":[],"sources":["../src/ListView.module.css"],"sourcesContent":[".list {\n    container: panneau-list / inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    min-width: 0;\n}\n\n.toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-end;\n    gap: var(--panneau-space-3);\n}\n\n.toolbarStart {\n    display: flex;\n    flex: 1 1 auto;\n    flex-wrap: wrap;\n    align-items: flex-end;\n    gap: var(--panneau-space-3);\n    min-width: 0;\n}\n\n.toolbarEnd {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-end;\n    gap: var(--panneau-space-2);\n    margin-inline-start: auto;\n}\n\n/* With the table layout, the column headers sort, until the list is too narrow to show them. */\n.tableSort {\n    display: none;\n}\n\n.selection {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--panneau-space-2) var(--panneau-space-3);\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n    background-color: var(--panneau-color-accent-subtle);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n}\n\n.selectionCount {\n    font-weight: var(--panneau-font-weight-medium);\n}\n\n.selectionActions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n    margin-inline-start: auto;\n}\n\n.body[aria-busy='true'] {\n    opacity: 0.6;\n    transition: opacity var(--panneau-duration);\n}\n\n.state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-10) var(--panneau-space-4);\n    color: var(--panneau-color-text-muted);\n    text-align: center;\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) dashed var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n}\n\n.state p {\n    margin: 0;\n}\n\n@container panneau-list (max-width: 40rem) {\n    .toolbarStart,\n    .toolbarEnd {\n        flex-basis: 100%;\n    }\n\n    .toolbarEnd {\n        margin-inline-start: 0;\n    }\n\n    .tableSort {\n        display: block;\n        width: 100%;\n    }\n\n    .selectionActions {\n        margin-inline-start: 0;\n    }\n}\n"],"mappings":""}

package/dist/actions/ActionButton.d.ts

@@ -0,0 +1,18 @@
+import type { Action } from '@panneau/protocol';
+import { type ActionIcons } from './icons';
+export interface ActionButtonProps {
+    action: Action;
+    /** Icons of actions by id, over the icon the action names. */
+    icons?: ActionIcons | undefined;
+    /** The link of a `link` action. Links go through React Aria, so an app's router handles them. */
+    href: string | null;
+    onPress: () => void;
+    isPending?: boolean;
+    isDisabled?: boolean;
+    size?: 'sm' | 'md';
+    /** Accessible label, when the label alone isn't enough (`Edit Ada Lovelace`). */
+    'aria-label'?: string;
+}
+/** An action as a button, or as a link for a `link` action with a URL. */
+export declare function ActionButton({ action, icons, href, onPress, isPending, isDisabled, size, 'aria-label': ariaLabel, }: ActionButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=ActionButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/actions/ActionButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAKhD,OAAO,EAAE,KAAK,WAAW,EAAiB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC,iGAAiG;IACjG,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,EACzB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,IAAW,EACX,YAAY,EAAE,SAAS,GAC1B,EAAE,iBAAiB,+BA2BnB"}

package/dist/actions/ActionButton.js

@@ -0,0 +1,34 @@
+import Actions_module_default from "./Actions.module.js";
+import { getActionIcon } from "./icons.js";
+import { cx } from "../cx.js";
+import { Button, Icon } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+//#region src/actions/ActionButton.tsx
+/** An action as a button, or as a link for a `link` action with a URL. */
+function ActionButton({ action, icons, href, onPress, isPending = false, isDisabled = false, size = "sm", "aria-label": ariaLabel }) {
+	const icon = getActionIcon(action, icons);
+	if (href !== null) return /* @__PURE__ */ jsxs(Link, {
+		href,
+		"aria-label": ariaLabel,
+		className: cx(Actions_module_default.link, size === "md" && Actions_module_default.linkMd),
+		children: [icon !== void 0 ? /* @__PURE__ */ jsx(Icon, {
+			icon,
+			size: "sm"
+		}) : null, action.label]
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		size,
+		variant: action.destructive === true ? "danger" : size === "sm" ? "ghost" : "secondary",
+		...icon !== void 0 ? { icon } : {},
+		isPending,
+		isDisabled,
+		"aria-label": ariaLabel,
+		onPress,
+		children: action.label
+	});
+}
+//#endregion
+export { ActionButton };
+
+//# sourceMappingURL=ActionButton.js.map

package/dist/actions/ActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.js","names":["styles"],"sources":["../../src/actions/ActionButton.tsx"],"sourcesContent":["import { Link } from 'react-aria-components';\n\nimport type { Action } from '@panneau/protocol';\nimport { Button, Icon } from '@panneau/ui';\n\nimport { cx } from '../cx';\nimport styles from './Actions.module.css';\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/** 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 icon = getActionIcon(action, icons);\n    if (href !== null) {\n        return (\n            <Link\n                href={href}\n                aria-label={ariaLabel}\n                className={cx(styles.link, size === 'md' && styles.linkMd)}\n            >\n                {icon !== undefined ? <Icon icon={icon} size=\"sm\" /> : null}\n                {action.label}\n            </Link>\n        );\n    }\n    return (\n        <Button\n            size={size}\n            variant={action.destructive === true ? 'danger' : size === 'sm' ? 'ghost' : 'secondary'}\n            {...(icon !== undefined ? { icon } : {})}\n            isPending={isPending}\n            isDisabled={isDisabled}\n            aria-label={ariaLabel}\n            onPress={onPress}\n        >\n            {action.label}\n        </Button>\n    );\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,aAAa,EACzB,QACA,OACA,MACA,SACA,YAAY,OACZ,aAAa,OACb,OAAO,MACP,cAAc,aACI;CAClB,MAAM,OAAO,cAAc,QAAQ,KAAK;CACxC,IAAI,SAAS,MACT,OACI,qBAAC,MAAD;EACU;EACN,cAAY;EACZ,WAAW,GAAGA,uBAAO,MAAM,SAAS,QAAQA,uBAAO,MAAM;EAH7D,UAAA,CAKK,SAAS,KAAA,IAAY,oBAAC,MAAD;GAAY;GAAM,MAAK;EAAI,CAAA,IAAM,MACtD,OAAO,KACN;;CAGd,OACI,oBAAC,QAAD;EACU;EACN,SAAS,OAAO,gBAAgB,OAAO,WAAW,SAAS,OAAO,UAAU;EAC5E,GAAK,SAAS,KAAA,IAAY,EAAE,KAAK,IAAI,CAAC;EAC3B;EACC;EACZ,cAAY;EACH;EAER,UAAA,OAAO;CACJ,CAAA;AAEhB"}

package/dist/actions/Actions.css

@@ -0,0 +1,58 @@
+.panneau-row-pbvXZj {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-toolbar-5p04f- {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--panneau-space-2);
+}
+
+/* A link that looks like a small ghost button (link actions: show, edit). */
+.panneau-link-XMNPUJ {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    height: var(--panneau-control-height-sm);
+    padding: 0 var(--panneau-space-2);
+    font-size: var(--panneau-font-size-sm);
+    font-weight: var(--panneau-font-weight-medium);
+    color: var(--panneau-color-text);
+    text-decoration: none;
+    white-space: nowrap;
+    border-radius: var(--panneau-radius-md);
+    cursor: pointer;
+}
+
+.panneau-link-XMNPUJ[data-hovered] {
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-link-XMNPUJ[data-pressed] {
+    background-color: var(--panneau-color-pressed);
+}
+
+.panneau-link-XMNPUJ[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 1px;
+}
+
+.panneau-linkMd-YBi7f4 {
+    height: var(--panneau-control-height);
+    padding: 0 var(--panneau-space-3);
+    font-size: var(--panneau-font-size-control);
+}
+
+.panneau-message-WzxhG9 {
+    margin: 0;
+}
+
+.panneau-skipped-T6-8Xh {
+    margin: var(--panneau-space-2) 0 0;
+    color: var(--panneau-color-warning);
+}

package/dist/actions/Actions.module.js

@@ -0,0 +1,20 @@
+import "./Actions.css";
+//#region src/actions/Actions.module.css
+var row = "panneau-row-pbvXZj";
+var toolbar = "panneau-toolbar-5p04f-";
+var link = "panneau-link-XMNPUJ";
+var linkMd = "panneau-linkMd-YBi7f4";
+var message = "panneau-message-WzxhG9";
+var skipped = "panneau-skipped-T6-8Xh";
+var Actions_module_default = {
+	row,
+	toolbar,
+	link,
+	linkMd,
+	message,
+	skipped
+};
+//#endregion
+export { Actions_module_default as default, link, linkMd, message, row, skipped, toolbar };
+
+//# sourceMappingURL=Actions.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.module.js","names":[],"sources":["../../src/actions/Actions.module.css"],"sourcesContent":[".row {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--panneau-space-1);\n}\n\n.toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n/* A link that looks like a small ghost button (link actions: show, edit). */\n.link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    height: var(--panneau-control-height-sm);\n    padding: 0 var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text);\n    text-decoration: none;\n    white-space: nowrap;\n    border-radius: var(--panneau-radius-md);\n    cursor: pointer;\n}\n\n.link[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.link[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.link[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.linkMd {\n    height: var(--panneau-control-height);\n    padding: 0 var(--panneau-space-3);\n    font-size: var(--panneau-font-size-control);\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":""}

package/dist/actions/ConfirmDialog.d.ts

@@ -0,0 +1,15 @@
+import type { ListActionEvent } from '../types';
+/** Whether an action needs a confirmation: it asks for one, or some selected items are skipped. */
+export declare function needsConfirmation(event: ListActionEvent): boolean;
+export interface ConfirmDialogProps {
+    /** The action to confirm, or `null` when the dialog is closed. */
+    event: ListActionEvent | null;
+    onConfirm: (event: ListActionEvent) => void;
+    onCancel: () => void;
+}
+/**
+ * Asks before running an action (decision 0017): the action's `confirm` title and message (an ICU
+ * message with `{count}`), or default ones, and how many selected items will be skipped.
+ */
+export declare function ConfirmDialog({ event, onConfirm, onCancel }: ConfirmDialogProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/actions/ConfirmDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAoBhD,mGAAmG;AACnG,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAGjE;AAED,MAAM,WAAW,kBAAkB;IAC/B,kEAAkE;IAClE,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,sCAmD/E"}