@camstack/ui-library 1.2.294 → 1.2.295

package/dist/composites/device-list/generic-mode.d.ts

@@ -86,8 +86,14 @@ export interface DeviceListGenericProps<T> {
 	* may include `PAGE_SIZE_ALL`. When set, `pageSize` is ignored.
 	*/
 	readonly pageSizeSelector?: GenericPageSizeSelector;
-	/** Optional control rendered next to the search box (e.g. a Refresh button). */
-	readonly toolbar?: ReactNode;
+	/**
+	* Optional control rendered next to the search box (e.g. a Refresh button).
+	* A function receives the rows the search and type filter currently leave
+	* (every page), for controls that act on "what is shown".
+	*/
+	readonly toolbar?: ReactNode | ((ctx: {
+		readonly filtered: readonly T[];
+	}) => ReactNode);
 }
 /**
 * Generic render-prop list: search + pagination chrome shared with the device

package/dist/composites/export-bulk-selection.d.ts

@@ -0,0 +1,35 @@
+/**
+* Bulk selection for the device-export table (D875): choose by role and by
+* provider, then select or deselect everything the filters leave on screen.
+*
+* Pure functions, so the rules are pinned without a DOM. Nothing here hides a
+* device by default: an empty filter keeps every row (the operator's table is
+* the only filter, D869).
+*/
+import type { MultiSelectOption } from "./device-list/multi-select";
+/** The slice of a device row the bulk filters read. */
+export interface ExportFilterable {
+	readonly id: number;
+	readonly addonId: string;
+	readonly role?: string | null;
+}
+export interface ExportBulkFilters {
+	/** Keep rows whose role is one of these; empty = no role filter. */
+	readonly roles: readonly string[];
+	/** Keep rows whose provider addon is one of these; empty = no provider filter. */
+	readonly providers: readonly string[];
+}
+/** The role filter value of a row that has no role. */
+export declare const NO_ROLE_FILTER_ID = "(none)";
+export declare const NO_EXPORT_FILTERS: ExportBulkFilters;
+export declare function roleFilterId(device: ExportFilterable): string;
+/** The rows the role / provider filters leave. */
+export declare function applyExportFilters<T extends ExportFilterable>(devices: readonly T[], filters: ExportBulkFilters): readonly T[];
+/** Distinct roles present among the rows (a roleless row counts as "(none)"). */
+export declare function roleFilterOptions(devices: readonly ExportFilterable[]): readonly MultiSelectOption[];
+/** Distinct provider addons present among the rows. */
+export declare function providerFilterOptions(devices: readonly ExportFilterable[]): readonly MultiSelectOption[];
+/** `current` plus every shown row. */
+export declare function selectShown(current: ReadonlySet<string>, shown: readonly ExportFilterable[]): ReadonlySet<string>;
+/** `current` minus every shown row; selections outside the filter are kept. */
+export declare function deselectShown(current: ReadonlySet<string>, shown: readonly ExportFilterable[]): ReadonlySet<string>;

package/dist/index.cjs

@@ -5368,6 +5368,11 @@ var DEVICE_ROLE_META = {
 		labelKey: "uiLibrary.deviceMeta.role.binaryHelper",
 		labelFallback: "Binary helper"
 	},
+	[_camstack_types.DeviceRole.Outlet]: {
+		icon: Plug,
+		labelKey: "uiLibrary.deviceMeta.role.outlet",
+		labelFallback: "Outlet"
+	},
 	[_camstack_types.DeviceRole.MotionSensor]: {
 		icon: Footprints,
 		labelKey: "uiLibrary.deviceMeta.role.motionSensor",
@@ -55003,7 +55008,7 @@ function GenericModeList(props) {
 							"aria-label": searchPlaceholder,
 							className: "h-7 pl-7 pr-2.5 rounded-md border border-border bg-surface text-[11px] text-foreground placeholder:text-foreground-subtle/60 focus:outline-none focus:ring-1 focus:ring-primary/40 w-56"
 						})]
-					}), toolbar]
+					}), typeof toolbar === "function" ? toolbar({ filtered }) : toolbar]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -55135,6 +55140,47 @@ function DeviceList(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceModeList, { ...props });
 }
 //#endregion
+//#region src/composites/export-bulk-selection.ts
+/** The role filter value of a row that has no role. */
+var NO_ROLE_FILTER_ID = "(none)";
+var NO_EXPORT_FILTERS = {
+	roles: [],
+	providers: []
+};
+function roleFilterId(device) {
+	const role = device.role;
+	return role === null || role === void 0 || role === "" ? NO_ROLE_FILTER_ID : role;
+}
+/** The rows the role / provider filters leave. */
+function applyExportFilters(devices, filters) {
+	const roles = new Set(filters.roles);
+	const providers = new Set(filters.providers);
+	return devices.filter((d) => (roles.size === 0 || roles.has(roleFilterId(d))) && (providers.size === 0 || providers.has(d.addonId)));
+}
+function distinctOptions(values) {
+	return [...new Set(values)].toSorted().map((id) => ({
+		id,
+		label: id
+	}));
+}
+/** Distinct roles present among the rows (a roleless row counts as "(none)"). */
+function roleFilterOptions(devices) {
+	return distinctOptions(devices.map(roleFilterId));
+}
+/** Distinct provider addons present among the rows. */
+function providerFilterOptions(devices) {
+	return distinctOptions(devices.map((d) => d.addonId));
+}
+/** `current` plus every shown row. */
+function selectShown(current, shown) {
+	return new Set([...current, ...shown.map((d) => String(d.id))]);
+}
+/** `current` minus every shown row; selections outside the filter are kept. */
+function deselectShown(current, shown) {
+	const drop = new Set(shown.map((d) => String(d.id)));
+	return new Set([...current].filter((id) => !drop.has(id)));
+}
+//#endregion
 //#region src/composites/device-export-panel.tsx
 /**
 * DeviceExportPanel — generic, addon-agnostic surface for the
@@ -55541,6 +55587,18 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		labelFor,
 		running
 	]);
+	const [bulkFilters, setBulkFilters] = (0, react$1.useState)(NO_EXPORT_FILTERS);
+	const roleOptions = (0, react$1.useMemo)(() => roleFilterOptions(candidateDevices), [candidateDevices]);
+	const providerOptions = (0, react$1.useMemo)(() => providerFilterOptions(candidateDevices), [candidateDevices]);
+	const shownDevices = (0, react$1.useMemo)(() => applyExportFilters(candidateDevices, bulkFilters), [candidateDevices, bulkFilters]);
+	const setRoleFilter = (0, react$1.useCallback)((roles) => setBulkFilters((f) => ({
+		...f,
+		roles
+	})), []);
+	const setProviderFilter = (0, react$1.useCallback)((providers) => setBulkFilters((f) => ({
+		...f,
+		providers
+	})), []);
 	const selectedList = (0, react$1.useMemo)(() => [...selectedIds], [selectedIds]);
 	const exposeSelected = (0, react$1.useCallback)(() => {
 		runExport("expose", selectedList);
@@ -55611,36 +55669,75 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		toggleSelection,
 		t
 	]);
-	const selectionToolbar = selectedIds.size === 0 ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "inline-flex items-center gap-1.5",
+	const renderToolbar = (0, react$1.useCallback)(({ filtered }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "inline-flex flex-wrap items-center gap-1.5",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"data-testid": "export-selection-count",
-				className: "text-[11px] text-foreground-subtle",
-				children: t("uiLibrary.deviceExport.selected", "{{count}} selected", { count: selectedIds.size })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				size: "sm",
-				variant: "primary",
-				disabled: busy,
-				onClick: exposeSelected,
-				children: t("uiLibrary.deviceExport.exposeN", "Expose {{count}}", { count: selectedIds.size })
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiSelectDropdown, {
+				label: t("uiLibrary.deviceExport.filterRole", "Role"),
+				options: roleOptions,
+				selected: bulkFilters.roles,
+				onChange: setRoleFilter
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiSelectDropdown, {
+				label: t("uiLibrary.deviceExport.filterProvider", "Provider"),
+				options: providerOptions,
+				selected: bulkFilters.providers,
+				onChange: setProviderFilter
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 				size: "sm",
 				variant: "secondary",
-				disabled: busy,
-				onClick: unexposeSelected,
-				children: t("uiLibrary.deviceExport.unexposeN", "Unexpose {{count}}", { count: selectedIds.size })
+				disabled: filtered.length === 0,
+				onClick: () => setSelectedIds((current) => selectShown(current, filtered)),
+				children: t("uiLibrary.deviceExport.selectShown", "Select {{count}} shown", { count: filtered.length })
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				size: "sm",
-				variant: "ghost",
-				onClick: clearSelection,
-				children: t("uiLibrary.deviceExport.clear", "Clear")
-			})
+			selectedIds.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: () => setSelectedIds((current) => deselectShown(current, filtered)),
+					children: t("uiLibrary.deviceExport.deselectShown", "Deselect shown")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-testid": "export-selection-count",
+					className: "text-[11px] text-foreground-subtle",
+					children: t("uiLibrary.deviceExport.selected", "{{count}} selected", { count: selectedIds.size })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					size: "sm",
+					variant: "primary",
+					disabled: busy,
+					onClick: exposeSelected,
+					children: t("uiLibrary.deviceExport.exposeN", "Expose {{count}}", { count: selectedIds.size })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					size: "sm",
+					variant: "secondary",
+					disabled: busy,
+					onClick: unexposeSelected,
+					children: t("uiLibrary.deviceExport.unexposeN", "Unexpose {{count}}", { count: selectedIds.size })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: clearSelection,
+					children: t("uiLibrary.deviceExport.clear", "Clear")
+				})
+			] })
 		]
-	});
+	}), [
+		t,
+		roleOptions,
+		providerOptions,
+		bulkFilters,
+		setRoleFilter,
+		setProviderFilter,
+		selectedIds.size,
+		busy,
+		exposeSelected,
+		unexposeSelected,
+		clearSelection
+	]);
 	const hasSupportedKinds = supportedKindList.length > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "rounded-lg border border-border bg-surface overflow-hidden",
@@ -55682,14 +55779,14 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), t("uiLibrary.deviceExport.loading", "Loading exportable devices…")]
 				}) : hasSupportedKinds && candidateDevices.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceList, {
 					mode: "generic",
-					items: candidateDevices,
+					items: shownDevices,
 					getKey,
 					getSearchText,
 					getFilterType,
 					filterOptions: supportedTypeOptions,
 					columns,
 					onRowClick: onOpenDevice ? onRowClick : void 0,
-					toolbar: selectionToolbar,
+					toolbar: renderToolbar,
 					pageSizeSelector: DEVICE_EXPORT_PAGE_SIZE,
 					searchPlaceholder: t("uiLibrary.deviceExport.search", "Search by name or stableId"),
 					emptyLabel: t("uiLibrary.deviceExport.noMatch", "No device matches this search.")

package/dist/index.js

@@ -5344,6 +5344,11 @@ var DEVICE_ROLE_META = {
 		labelKey: "uiLibrary.deviceMeta.role.binaryHelper",
 		labelFallback: "Binary helper"
 	},
+	[DeviceRole.Outlet]: {
+		icon: Plug,
+		labelKey: "uiLibrary.deviceMeta.role.outlet",
+		labelFallback: "Outlet"
+	},
 	[DeviceRole.MotionSensor]: {
 		icon: Footprints,
 		labelKey: "uiLibrary.deviceMeta.role.motionSensor",
@@ -54979,7 +54984,7 @@ function GenericModeList(props) {
 							"aria-label": searchPlaceholder,
 							className: "h-7 pl-7 pr-2.5 rounded-md border border-border bg-surface text-[11px] text-foreground placeholder:text-foreground-subtle/60 focus:outline-none focus:ring-1 focus:ring-primary/40 w-56"
 						})]
-					}), toolbar]
+					}), typeof toolbar === "function" ? toolbar({ filtered }) : toolbar]
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -55111,6 +55116,47 @@ function DeviceList(props) {
 	return /* @__PURE__ */ jsx(DeviceModeList, { ...props });
 }
 //#endregion
+//#region src/composites/export-bulk-selection.ts
+/** The role filter value of a row that has no role. */
+var NO_ROLE_FILTER_ID = "(none)";
+var NO_EXPORT_FILTERS = {
+	roles: [],
+	providers: []
+};
+function roleFilterId(device) {
+	const role = device.role;
+	return role === null || role === void 0 || role === "" ? NO_ROLE_FILTER_ID : role;
+}
+/** The rows the role / provider filters leave. */
+function applyExportFilters(devices, filters) {
+	const roles = new Set(filters.roles);
+	const providers = new Set(filters.providers);
+	return devices.filter((d) => (roles.size === 0 || roles.has(roleFilterId(d))) && (providers.size === 0 || providers.has(d.addonId)));
+}
+function distinctOptions(values) {
+	return [...new Set(values)].toSorted().map((id) => ({
+		id,
+		label: id
+	}));
+}
+/** Distinct roles present among the rows (a roleless row counts as "(none)"). */
+function roleFilterOptions(devices) {
+	return distinctOptions(devices.map(roleFilterId));
+}
+/** Distinct provider addons present among the rows. */
+function providerFilterOptions(devices) {
+	return distinctOptions(devices.map((d) => d.addonId));
+}
+/** `current` plus every shown row. */
+function selectShown(current, shown) {
+	return new Set([...current, ...shown.map((d) => String(d.id))]);
+}
+/** `current` minus every shown row; selections outside the filter are kept. */
+function deselectShown(current, shown) {
+	const drop = new Set(shown.map((d) => String(d.id)));
+	return new Set([...current].filter((id) => !drop.has(id)));
+}
+//#endregion
 //#region src/composites/device-export-panel.tsx
 /**
 * DeviceExportPanel — generic, addon-agnostic surface for the
@@ -55517,6 +55563,18 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		labelFor,
 		running
 	]);
+	const [bulkFilters, setBulkFilters] = useState(NO_EXPORT_FILTERS);
+	const roleOptions = useMemo(() => roleFilterOptions(candidateDevices), [candidateDevices]);
+	const providerOptions = useMemo(() => providerFilterOptions(candidateDevices), [candidateDevices]);
+	const shownDevices = useMemo(() => applyExportFilters(candidateDevices, bulkFilters), [candidateDevices, bulkFilters]);
+	const setRoleFilter = useCallback((roles) => setBulkFilters((f) => ({
+		...f,
+		roles
+	})), []);
+	const setProviderFilter = useCallback((providers) => setBulkFilters((f) => ({
+		...f,
+		providers
+	})), []);
 	const selectedList = useMemo(() => [...selectedIds], [selectedIds]);
 	const exposeSelected = useCallback(() => {
 		runExport("expose", selectedList);
@@ -55587,36 +55645,75 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		toggleSelection,
 		t
 	]);
-	const selectionToolbar = selectedIds.size === 0 ? void 0 : /* @__PURE__ */ jsxs("span", {
-		className: "inline-flex items-center gap-1.5",
+	const renderToolbar = useCallback(({ filtered }) => /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex flex-wrap items-center gap-1.5",
 		children: [
-			/* @__PURE__ */ jsx("span", {
-				"data-testid": "export-selection-count",
-				className: "text-[11px] text-foreground-subtle",
-				children: t("uiLibrary.deviceExport.selected", "{{count}} selected", { count: selectedIds.size })
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				size: "sm",
-				variant: "primary",
-				disabled: busy,
-				onClick: exposeSelected,
-				children: t("uiLibrary.deviceExport.exposeN", "Expose {{count}}", { count: selectedIds.size })
+			/* @__PURE__ */ jsx(MultiSelectDropdown, {
+				label: t("uiLibrary.deviceExport.filterRole", "Role"),
+				options: roleOptions,
+				selected: bulkFilters.roles,
+				onChange: setRoleFilter
+			}),
+			/* @__PURE__ */ jsx(MultiSelectDropdown, {
+				label: t("uiLibrary.deviceExport.filterProvider", "Provider"),
+				options: providerOptions,
+				selected: bulkFilters.providers,
+				onChange: setProviderFilter
 			}),
 			/* @__PURE__ */ jsx(Button, {
 				size: "sm",
 				variant: "secondary",
-				disabled: busy,
-				onClick: unexposeSelected,
-				children: t("uiLibrary.deviceExport.unexposeN", "Unexpose {{count}}", { count: selectedIds.size })
+				disabled: filtered.length === 0,
+				onClick: () => setSelectedIds((current) => selectShown(current, filtered)),
+				children: t("uiLibrary.deviceExport.selectShown", "Select {{count}} shown", { count: filtered.length })
 			}),
-			/* @__PURE__ */ jsx(Button, {
-				size: "sm",
-				variant: "ghost",
-				onClick: clearSelection,
-				children: t("uiLibrary.deviceExport.clear", "Clear")
-			})
+			selectedIds.size > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: () => setSelectedIds((current) => deselectShown(current, filtered)),
+					children: t("uiLibrary.deviceExport.deselectShown", "Deselect shown")
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-testid": "export-selection-count",
+					className: "text-[11px] text-foreground-subtle",
+					children: t("uiLibrary.deviceExport.selected", "{{count}} selected", { count: selectedIds.size })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "primary",
+					disabled: busy,
+					onClick: exposeSelected,
+					children: t("uiLibrary.deviceExport.exposeN", "Expose {{count}}", { count: selectedIds.size })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "secondary",
+					disabled: busy,
+					onClick: unexposeSelected,
+					children: t("uiLibrary.deviceExport.unexposeN", "Unexpose {{count}}", { count: selectedIds.size })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: clearSelection,
+					children: t("uiLibrary.deviceExport.clear", "Clear")
+				})
+			] })
 		]
-	});
+	}), [
+		t,
+		roleOptions,
+		providerOptions,
+		bulkFilters,
+		setRoleFilter,
+		setProviderFilter,
+		selectedIds.size,
+		busy,
+		exposeSelected,
+		unexposeSelected,
+		clearSelection
+	]);
 	const hasSupportedKinds = supportedKindList.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "rounded-lg border border-border bg-surface overflow-hidden",
@@ -55658,14 +55755,14 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 					children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), t("uiLibrary.deviceExport.loading", "Loading exportable devices…")]
 				}) : hasSupportedKinds && candidateDevices.length > 0 ? /* @__PURE__ */ jsx(DeviceList, {
 					mode: "generic",
-					items: candidateDevices,
+					items: shownDevices,
 					getKey,
 					getSearchText,
 					getFilterType,
 					filterOptions: supportedTypeOptions,
 					columns,
 					onRowClick: onOpenDevice ? onRowClick : void 0,
-					toolbar: selectionToolbar,
+					toolbar: renderToolbar,
 					pageSizeSelector: DEVICE_EXPORT_PAGE_SIZE,
 					searchPlaceholder: t("uiLibrary.deviceExport.search", "Search by name or stableId"),
 					emptyLabel: t("uiLibrary.deviceExport.noMatch", "No device matches this search.")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.294",
+  "version": "1.2.295",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",