@camstack/ui-library 1.2.290 → 1.2.291

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

@@ -70,5 +70,13 @@ export interface DevicePickerProps<Id extends PickerId = number> {
 	* surface whose whole job is the list — the rule's Devices tab (R15).
 	*/
 	readonly showAll?: boolean;
+	/**
+	* Devices that are ALREADY part of the thing being edited (linked to the
+	* camera, assigned to the room): drawn checked and disabled with
+	* `lockedNote`, never part of `value`, never emitted by `onChange`.
+	*/
+	readonly lockedIds?: readonly Id[];
+	/** 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, emptyLabel, annotate, disabled, testId, showAll }: DevicePickerProps<Id>): JSX.Element;
+export declare function DevicePicker<Id extends PickerId = number>({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll, savedHadDevices, noun, groupTitle, emptyLabel, annotate, disabled, testId, showAll, lockedIds, lockedNote }: DevicePickerProps<Id>): JSX.Element;

package/dist/composites/option-select/OptionSelect.d.ts

@@ -17,6 +17,12 @@ type OptionSelectSharedProps = {
 };
 export type OptionSelectSingleProps = OptionSelectSharedProps & {
 	readonly mode: "single";
+	/**
+	* `chip` (default): the choice is a removable chip above the field.
+	* `field`: the field itself shows the current choice (placeholder-style, so
+	* typing searches), no chip and no clear — for a choice that always exists.
+	*/
+	readonly singleDisplay?: "chip" | "field";
 	readonly value: string;
 	readonly onChange: (next: string) => void;
 };

package/dist/index.cjs

@@ -13614,6 +13614,7 @@ function OptionSelect(props) {
 		}, opt.value);
 	}) });
 	const footerAddNewIndex = dropdownRows.length;
+	const fieldShowsChoice = mode === "single" && props.singleDisplay === "field" && selectedOptions.length > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "min-w-0 space-y-1",
 		"data-testid": testId,
@@ -13632,7 +13633,7 @@ function OptionSelect(props) {
 					...optionTestIdPrefix !== void 0 ? { testId: `${optionTestIdPrefix}-chip-${opt.value}` } : {}
 				}, opt.value))
 			}),
-			mode === "single" && selectedOptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			mode === "single" && props.singleDisplay !== "field" && selectedOptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex flex-wrap gap-1 mb-1.5",
 				children: selectedOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedChip, {
 					label: opt.label,
@@ -13655,8 +13656,8 @@ function OptionSelect(props) {
 						"aria-expanded": open,
 						"aria-controls": listboxId,
 						className: "min-w-0 flex-1 bg-transparent text-xs text-foreground outline-none placeholder:text-foreground-disabled",
-						value: query,
-						placeholder: triggerPlaceholder,
+						value: fieldShowsChoice && !open && query === "" ? selectedOptions[0]?.label ?? "" : query,
+						placeholder: fieldShowsChoice ? selectedOptions[0]?.label ?? "" : triggerPlaceholder,
 						disabled: isDisabled,
 						onChange: (e) => {
 							setQuery(e.target.value);
@@ -60755,12 +60756,14 @@ function noItemsSentence(noun, emptyMeansAll) {
 	if (noun === "camera" || noun === "device") return "No cameras available — the rule applies to all devices.";
 	return `No ${plural} available — the rule applies to every ${noun}.`;
 }
-function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle = deviceGroupTitle, emptyLabel, annotate, disabled = false, testId, showAll = false }) {
+function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle = deviceGroupTitle, emptyLabel, annotate, disabled = false, testId, showAll = false, lockedIds, lockedNote = "Already added" }) {
 	const devices = (0, react$1.useMemo)(() => withResolvedParentDetail(devicesIn), [devicesIn]);
 	const judge = fleet ?? {
 		state: listState,
 		devices: listState === "answered" ? devices : void 0
 	};
+	const locked = (0, react$1.useMemo)(() => new Set(lockedIds ?? []), [lockedIds]);
+	const emit = (next) => onChange(locked.size === 0 ? next : next.filter((id) => !locked.has(id)));
 	const [open, setOpen] = (0, react$1.useState)(false);
 	const [chipsExpanded, setChipsExpanded] = (0, react$1.useState)(false);
 	const [hadDevices, setHadDevices] = (0, react$1.useState)(savedHadDevices || value.length > 0);
@@ -60824,7 +60827,9 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 			listOpen && listState === "answered" && (isDeviceNoun(noun) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupedPickerPanel, {
 				devices,
 				value,
-				onChange,
+				onChange: emit,
+				locked,
+				lockedNote,
 				annotate,
 				groupTitle,
 				noun,
@@ -60833,7 +60838,9 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerPanel, {
 				devices,
 				value,
-				onChange,
+				onChange: emit,
+				locked,
+				lockedNote,
 				annotate,
 				groupTitle,
 				noun,
@@ -60873,7 +60880,7 @@ var NO_ZONES = {
 	zones: []
 };
 /** The searchable, grouped list — rendered one page at a time. */
-function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, showAll, grouping }) {
+function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, grouping }) {
 	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);
@@ -60970,7 +60977,9 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 					annotate,
 					groupTitle,
 					groupBy: shownBy,
-					disabled
+					disabled,
+					locked,
+					lockedNote
 				}, row.key)), page.remaining > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					className: "mt-1 w-full rounded border border-border py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover",
@@ -61003,7 +61012,7 @@ 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 }) {
+function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote }) {
 	if (row.kind === "header") {
 		const { group, expanded } = row;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -61050,15 +61059,16 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 			]
 		});
 	}
-	const note = annotate?.(row.device.id);
+	const isLocked = locked.has(row.device.id);
+	const note = isLocked ? lockedNote : annotate?.(row.device.id);
 	const second = secondLine(row.device, groupBy);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		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",
-			checked: row.selected,
-			disabled,
+			checked: row.selected || isLocked,
+			disabled: disabled || isLocked,
 			onChange: () => onChange(togglePickerDevice(value, row.device.id)),
 			className: "accent-primary",
 			"data-device-id": String(row.device.id)
@@ -61074,7 +61084,7 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 					children: second
 				}),
 				note !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-[10px] text-warning",
+					className: isLocked ? "text-[10px] text-foreground-subtle" : "text-[10px] text-warning",
 					children: note
 				})
 			]

package/dist/index.js

@@ -13590,6 +13590,7 @@ function OptionSelect(props) {
 		}, opt.value);
 	}) });
 	const footerAddNewIndex = dropdownRows.length;
+	const fieldShowsChoice = mode === "single" && props.singleDisplay === "field" && selectedOptions.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0 space-y-1",
 		"data-testid": testId,
@@ -13608,7 +13609,7 @@ function OptionSelect(props) {
 					...optionTestIdPrefix !== void 0 ? { testId: `${optionTestIdPrefix}-chip-${opt.value}` } : {}
 				}, opt.value))
 			}),
-			mode === "single" && selectedOptions.length > 0 && /* @__PURE__ */ jsx("div", {
+			mode === "single" && props.singleDisplay !== "field" && selectedOptions.length > 0 && /* @__PURE__ */ jsx("div", {
 				className: "flex flex-wrap gap-1 mb-1.5",
 				children: selectedOptions.map((opt) => /* @__PURE__ */ jsx(SelectedChip, {
 					label: opt.label,
@@ -13631,8 +13632,8 @@ function OptionSelect(props) {
 						"aria-expanded": open,
 						"aria-controls": listboxId,
 						className: "min-w-0 flex-1 bg-transparent text-xs text-foreground outline-none placeholder:text-foreground-disabled",
-						value: query,
-						placeholder: triggerPlaceholder,
+						value: fieldShowsChoice && !open && query === "" ? selectedOptions[0]?.label ?? "" : query,
+						placeholder: fieldShowsChoice ? selectedOptions[0]?.label ?? "" : triggerPlaceholder,
 						disabled: isDisabled,
 						onChange: (e) => {
 							setQuery(e.target.value);
@@ -60731,12 +60732,14 @@ function noItemsSentence(noun, emptyMeansAll) {
 	if (noun === "camera" || noun === "device") return "No cameras available — the rule applies to all devices.";
 	return `No ${plural} available — the rule applies to every ${noun}.`;
 }
-function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle = deviceGroupTitle, emptyLabel, annotate, disabled = false, testId, showAll = false }) {
+function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle = deviceGroupTitle, emptyLabel, annotate, disabled = false, testId, showAll = false, lockedIds, lockedNote = "Already added" }) {
 	const devices = useMemo(() => withResolvedParentDetail(devicesIn), [devicesIn]);
 	const judge = fleet ?? {
 		state: listState,
 		devices: listState === "answered" ? devices : void 0
 	};
+	const locked = useMemo(() => new Set(lockedIds ?? []), [lockedIds]);
+	const emit = (next) => onChange(locked.size === 0 ? next : next.filter((id) => !locked.has(id)));
 	const [open, setOpen] = useState(false);
 	const [chipsExpanded, setChipsExpanded] = useState(false);
 	const [hadDevices, setHadDevices] = useState(savedHadDevices || value.length > 0);
@@ -60800,7 +60803,9 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 			listOpen && listState === "answered" && (isDeviceNoun(noun) ? /* @__PURE__ */ jsx(GroupedPickerPanel, {
 				devices,
 				value,
-				onChange,
+				onChange: emit,
+				locked,
+				lockedNote,
 				annotate,
 				groupTitle,
 				noun,
@@ -60809,7 +60814,9 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 			}) : /* @__PURE__ */ jsx(PickerPanel, {
 				devices,
 				value,
-				onChange,
+				onChange: emit,
+				locked,
+				lockedNote,
 				annotate,
 				groupTitle,
 				noun,
@@ -60849,7 +60856,7 @@ var NO_ZONES = {
 	zones: []
 };
 /** The searchable, grouped list — rendered one page at a time. */
-function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, showAll, grouping }) {
+function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, grouping }) {
 	const [filters, setFilters] = useState(PICKER_NO_FILTERS);
 	const [toggles, setToggles] = useState(/* @__PURE__ */ new Map());
 	const [shown, setShown] = useState(60);
@@ -60946,7 +60953,9 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 					annotate,
 					groupTitle,
 					groupBy: shownBy,
-					disabled
+					disabled,
+					locked,
+					lockedNote
 				}, row.key)), page.remaining > 0 && /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					className: "mt-1 w-full rounded border border-border py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover",
@@ -60979,7 +60988,7 @@ 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 }) {
+function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote }) {
 	if (row.kind === "header") {
 		const { group, expanded } = row;
 		return /* @__PURE__ */ jsxs("div", {
@@ -61026,15 +61035,16 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 			]
 		});
 	}
-	const note = annotate?.(row.device.id);
+	const isLocked = locked.has(row.device.id);
+	const note = isLocked ? lockedNote : annotate?.(row.device.id);
 	const second = secondLine(row.device, groupBy);
 	return /* @__PURE__ */ jsxs("label", {
 		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",
-			checked: row.selected,
-			disabled,
+			checked: row.selected || isLocked,
+			disabled: disabled || isLocked,
 			onChange: () => onChange(togglePickerDevice(value, row.device.id)),
 			className: "accent-primary",
 			"data-device-id": String(row.device.id)
@@ -61050,7 +61060,7 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 					children: second
 				}),
 				note !== void 0 && /* @__PURE__ */ jsx("span", {
-					className: "text-[10px] text-warning",
+					className: isLocked ? "text-[10px] text-foreground-subtle" : "text-[10px] text-warning",
 					children: note
 				})
 			]

package/package.json

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