@camstack/ui-library 1.2.321 → 1.2.322

package/dist/composites/device-picker/DevicePicker.d.ts

@@ -38,9 +38,11 @@
 */
 import { type JSX } from "react";
 import type { PickerFleetView } from "./device-fleet-view";
-import { type PickerGroup, type PickerId, type PickerItem } from "./device-picker-model";
+import { type PickerGroup, type PickerGroupBy, type PickerId, type PickerItem } from "./device-picker-model";
 import { type DeviceListState } from "./device-selection";
 import { type PickerNoun } from "./device-selection-rows";
+/** One device, or the checklist every rule editor uses. */
+export type DevicePickerSelection = "single" | "multiple";
 export interface DevicePickerProps<Id extends PickerId = number> {
 	/** The devices the list DRAWS — the caller's answered list, `[]` otherwise. */
 	readonly devices: readonly PickerItem<Id>[];
@@ -50,6 +52,16 @@ export interface DevicePickerProps<Id extends PickerId = number> {
 	readonly fleet?: PickerFleetView<Id>;
 	readonly value: readonly Id[];
 	readonly onChange: (next: Id[]) => void;
+	/**
+	* `single`: one radio, no All/Clear, no "N selected". Choosing a row
+	* replaces `value` with that id. Default is the checklist.
+	*/
+	readonly selection?: DevicePickerSelection;
+	/**
+	* Group this list by zone, location or none. Absent uses the remembered
+	* choice. A value here does not change that choice.
+	*/
+	readonly groupBy?: PickerGroupBy;
 	/** Empty selection means EVERY device: say so, and warn when it widens. */
 	readonly emptyMeansAll?: boolean;
 	/** Whether the saved rule had devices — the widening warning survives a remount. */
@@ -79,4 +91,4 @@ export interface DevicePickerProps<Id extends PickerId = number> {
 	/** The line under a locked device. Default "Already added". */
 	readonly lockedNote?: string;
 }
-export declare function DevicePicker<Id extends PickerId = number>({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll, savedHadDevices, noun, groupTitle: groupTitleProp, emptyLabel, annotate, disabled, testId, showAll, lockedIds, lockedNote: lockedNoteProp }: DevicePickerProps<Id>): JSX.Element;
+export declare function DevicePicker<Id extends PickerId = number>({ devices: devicesIn, listState, fleet, value, onChange, selection, groupBy: pinnedGroupBy, emptyMeansAll, savedHadDevices, noun, groupTitle: groupTitleProp, emptyLabel, annotate, disabled, testId, showAll, lockedIds, lockedNote: lockedNoteProp }: DevicePickerProps<Id>): JSX.Element;

package/dist/composites/device-picker/index.d.ts

@@ -1,4 +1,4 @@
-export { DevicePicker, type DevicePickerProps } from "./DevicePicker.js";
+export { DevicePicker, type DevicePickerProps, type DevicePickerSelection } from "./DevicePicker.js";
 export { DeviceFilterBar, typeLabel, type DeviceFilterBarGrouping, type DeviceFilterBarProps } from "./device-filter-bar.js";
 export { fleetViewOf, type DeviceFleetView, type PickerFleetView } from "./device-fleet-view.js";
 export { DEVICE_PICKER_GROUP_STORAGE_KEY, readStoredGroupBy, writeStoredGroupBy, useStoredGroupBy, usePickerSiteZones, type StoredGroupBy } from "./device-picker-grouping.js";

package/dist/index.cjs

@@ -65327,7 +65327,7 @@ function noItemsSentence(noun, emptyMeansAll, t) {
 		noun: pickerNounLabel(noun, t)
 	});
 }
-function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle: groupTitleProp, emptyLabel, annotate, disabled = false, testId, showAll = false, lockedIds, lockedNote: lockedNoteProp }) {
+function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, selection = "multiple", groupBy: pinnedGroupBy, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle: groupTitleProp, emptyLabel, annotate, disabled = false, testId, showAll = false, lockedIds, lockedNote: lockedNoteProp }) {
 	const t = useUiText();
 	const groupTitle = groupTitleProp ?? ((group) => deviceGroupTitle(group, t));
 	const lockedNote = lockedNoteProp ?? t("uiLibrary.devicePicker.alreadyAdded", "Already added");
@@ -65360,7 +65360,7 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 		children: [
 			listState === "pending" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevicesLoadingLine, { noun: plural }),
 			listState === "failed" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevicesFailedLine, { noun: noun === "camera" ? "devices" : plural }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			!(selection === "single" && chips.length === 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-wrap items-center gap-1",
 				children: [
 					chips.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -65404,7 +65404,9 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 				groupTitle,
 				noun,
 				disabled,
-				showAll
+				showAll,
+				selection,
+				...pinnedGroupBy !== void 0 ? { pinnedGroupBy } : {}
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerPanel, {
 				devices,
 				value,
@@ -65415,7 +65417,8 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 				groupTitle,
 				noun,
 				disabled,
-				showAll
+				showAll,
+				selection
 			})),
 			widening && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevicesWidenWarning, { noun })
 		]
@@ -65426,13 +65429,23 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 * read below happens only then (for Zone grouping and the Zone filter).
 */
 function GroupedPickerPanel(props) {
-	const { groupBy, setGroupBy } = useStoredGroupBy();
+	const stored = useStoredGroupBy();
+	const [localGroupBy, setLocalGroupBy] = (0, react$1.useState)(null);
+	const pinned = props.pinnedGroupBy;
+	const groupBy = pinned !== void 0 ? localGroupBy ?? pinned : stored.groupBy;
+	const onGroupByChange = (next) => {
+		if (pinned !== void 0) {
+			setLocalGroupBy(next);
+			return;
+		}
+		stored.setGroupBy(next);
+	};
 	const zones = usePickerSiteZones(true);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerPanel, {
 		...props,
 		grouping: {
 			groupBy,
-			onGroupByChange: setGroupBy,
+			onGroupByChange,
 			zones
 		}
 	});
@@ -65450,8 +65463,9 @@ var NO_ZONES = {
 	zones: []
 };
 /** The searchable, grouped list — rendered one page at a time. */
-function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, grouping }) {
+function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, selection, grouping }) {
 	const t = useUiText();
+	const radioName = (0, react$1.useId)();
 	const [filters, setFilters] = (0, react$1.useState)(PICKER_NO_FILTERS);
 	const [toggles, setToggles] = (0, react$1.useState)(/* @__PURE__ */ new Map());
 	const [shown, setShown] = (0, react$1.useState)(60);
@@ -65525,7 +65539,10 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "mt-1 text-[10px] text-foreground-subtle",
-				children: t("uiLibrary.devicePicker.shownOf", "{{shown}} of {{total}} shown · {{selected}} selected", {
+				children: selection === "single" ? t("uiLibrary.devicePicker.shownOfSingle", "{{shown}} of {{total}} shown", {
+					shown: matches.length,
+					total: devices.length
+				}) : t("uiLibrary.devicePicker.shownOf", "{{shown}} of {{total}} shown · {{selected}} selected", {
 					shown: matches.length,
 					total: devices.length,
 					selected: value.length
@@ -65547,7 +65564,9 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 					groupBy: shownBy,
 					disabled,
 					locked,
-					lockedNote
+					lockedNote,
+					selection,
+					radioName
 				}, row.key)), page.remaining > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: "mt-1 w-full rounded border border-border py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover",
@@ -65577,8 +65596,9 @@ function secondLine(device, groupBy) {
 	].filter((part) => part !== null);
 	return parts.length > 0 ? parts.join(" · ") : void 0;
 }
-function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote }) {
+function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote, selection, radioName }) {
 	const t = useUiText();
+	const single = selection === "single";
 	if (row.kind === "header") {
 		const { group, expanded } = row;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -65596,7 +65616,7 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 							className: "truncate",
 							children: groupTitle(group)
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						!single && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: "font-normal normal-case",
 							children: [
 								"(",
@@ -65608,14 +65628,14 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				!single && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					disabled,
 					className: "text-[10px] text-primary hover:underline disabled:opacity-50",
 					onClick: () => onChange(selectPickerGroup(value, group)),
 					children: t("uiLibrary.devicePicker.all", "All")
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				!single && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					disabled,
 					className: "text-[10px] text-foreground-subtle hover:underline disabled:opacity-50",
@@ -65632,10 +65652,11 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 		className: "flex cursor-pointer items-center gap-2.5 px-3 py-1 text-xs text-foreground hover:bg-surface-hover",
 		"data-testid": "device-picker-row",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			type: "checkbox",
+			type: single ? "radio" : "checkbox",
+			...single ? { name: radioName } : {},
 			checked: row.selected || isLocked,
 			disabled: disabled || isLocked,
-			onChange: () => onChange(togglePickerDevice(value, row.device.id)),
+			onChange: () => onChange(single ? [row.device.id] : togglePickerDevice(value, row.device.id)),
 			className: "accent-primary",
 			"data-device-id": String(row.device.id)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {

package/dist/index.js

@@ -65303,7 +65303,7 @@ function noItemsSentence(noun, emptyMeansAll, t) {
 		noun: pickerNounLabel(noun, t)
 	});
 }
-function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle: groupTitleProp, emptyLabel, annotate, disabled = false, testId, showAll = false, lockedIds, lockedNote: lockedNoteProp }) {
+function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, selection = "multiple", groupBy: pinnedGroupBy, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle: groupTitleProp, emptyLabel, annotate, disabled = false, testId, showAll = false, lockedIds, lockedNote: lockedNoteProp }) {
 	const t = useUiText();
 	const groupTitle = groupTitleProp ?? ((group) => deviceGroupTitle(group, t));
 	const lockedNote = lockedNoteProp ?? t("uiLibrary.devicePicker.alreadyAdded", "Already added");
@@ -65336,7 +65336,7 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 		children: [
 			listState === "pending" && /* @__PURE__ */ jsx(DevicesLoadingLine, { noun: plural }),
 			listState === "failed" && /* @__PURE__ */ jsx(DevicesFailedLine, { noun: noun === "camera" ? "devices" : plural }),
-			/* @__PURE__ */ jsxs("div", {
+			!(selection === "single" && chips.length === 0) && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-1",
 				children: [
 					chips.length === 0 ? /* @__PURE__ */ jsx("span", {
@@ -65380,7 +65380,9 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 				groupTitle,
 				noun,
 				disabled,
-				showAll
+				showAll,
+				selection,
+				...pinnedGroupBy !== void 0 ? { pinnedGroupBy } : {}
 			}) : /* @__PURE__ */ jsx(PickerPanel, {
 				devices,
 				value,
@@ -65391,7 +65393,8 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 				groupTitle,
 				noun,
 				disabled,
-				showAll
+				showAll,
+				selection
 			})),
 			widening && /* @__PURE__ */ jsx(DevicesWidenWarning, { noun })
 		]
@@ -65402,13 +65405,23 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 * read below happens only then (for Zone grouping and the Zone filter).
 */
 function GroupedPickerPanel(props) {
-	const { groupBy, setGroupBy } = useStoredGroupBy();
+	const stored = useStoredGroupBy();
+	const [localGroupBy, setLocalGroupBy] = useState(null);
+	const pinned = props.pinnedGroupBy;
+	const groupBy = pinned !== void 0 ? localGroupBy ?? pinned : stored.groupBy;
+	const onGroupByChange = (next) => {
+		if (pinned !== void 0) {
+			setLocalGroupBy(next);
+			return;
+		}
+		stored.setGroupBy(next);
+	};
 	const zones = usePickerSiteZones(true);
 	return /* @__PURE__ */ jsx(PickerPanel, {
 		...props,
 		grouping: {
 			groupBy,
-			onGroupByChange: setGroupBy,
+			onGroupByChange,
 			zones
 		}
 	});
@@ -65426,8 +65439,9 @@ var NO_ZONES = {
 	zones: []
 };
 /** The searchable, grouped list — rendered one page at a time. */
-function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, grouping }) {
+function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, selection, grouping }) {
 	const t = useUiText();
+	const radioName = useId();
 	const [filters, setFilters] = useState(PICKER_NO_FILTERS);
 	const [toggles, setToggles] = useState(/* @__PURE__ */ new Map());
 	const [shown, setShown] = useState(60);
@@ -65501,7 +65515,10 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "mt-1 text-[10px] text-foreground-subtle",
-				children: t("uiLibrary.devicePicker.shownOf", "{{shown}} of {{total}} shown · {{selected}} selected", {
+				children: selection === "single" ? t("uiLibrary.devicePicker.shownOfSingle", "{{shown}} of {{total}} shown", {
+					shown: matches.length,
+					total: devices.length
+				}) : t("uiLibrary.devicePicker.shownOf", "{{shown}} of {{total}} shown · {{selected}} selected", {
 					shown: matches.length,
 					total: devices.length,
 					selected: value.length
@@ -65523,7 +65540,9 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 					groupBy: shownBy,
 					disabled,
 					locked,
-					lockedNote
+					lockedNote,
+					selection,
+					radioName
 				}, row.key)), page.remaining > 0 && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: "mt-1 w-full rounded border border-border py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover",
@@ -65553,8 +65572,9 @@ function secondLine(device, groupBy) {
 	].filter((part) => part !== null);
 	return parts.length > 0 ? parts.join(" · ") : void 0;
 }
-function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote }) {
+function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote, selection, radioName }) {
 	const t = useUiText();
+	const single = selection === "single";
 	if (row.kind === "header") {
 		const { group, expanded } = row;
 		return /* @__PURE__ */ jsxs("div", {
@@ -65572,7 +65592,7 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 							className: "truncate",
 							children: groupTitle(group)
 						}),
-						/* @__PURE__ */ jsxs("span", {
+						!single && /* @__PURE__ */ jsxs("span", {
 							className: "font-normal normal-case",
 							children: [
 								"(",
@@ -65584,14 +65604,14 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 						})
 					]
 				}),
-				/* @__PURE__ */ jsx("button", {
+				!single && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					disabled,
 					className: "text-[10px] text-primary hover:underline disabled:opacity-50",
 					onClick: () => onChange(selectPickerGroup(value, group)),
 					children: t("uiLibrary.devicePicker.all", "All")
 				}),
-				/* @__PURE__ */ jsx("button", {
+				!single && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					disabled,
 					className: "text-[10px] text-foreground-subtle hover:underline disabled:opacity-50",
@@ -65608,10 +65628,11 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 		className: "flex cursor-pointer items-center gap-2.5 px-3 py-1 text-xs text-foreground hover:bg-surface-hover",
 		"data-testid": "device-picker-row",
 		children: [/* @__PURE__ */ jsx("input", {
-			type: "checkbox",
+			type: single ? "radio" : "checkbox",
+			...single ? { name: radioName } : {},
 			checked: row.selected || isLocked,
 			disabled: disabled || isLocked,
-			onChange: () => onChange(togglePickerDevice(value, row.device.id)),
+			onChange: () => onChange(single ? [row.device.id] : togglePickerDevice(value, row.device.id)),
 			className: "accent-primary",
 			"data-device-id": String(row.device.id)
 		}), /* @__PURE__ */ jsxs("span", {

package/package.json

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