@camstack/ui-library 1.2.341 → 1.2.342

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.342] - 2026-10-28
+
+### Changed
+
+- Option lists can group options under headings, and a dropdown can be opened and closed from outside
+
 ## [1.2.341] - 2026-10-28
 
 ### Changed

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

@@ -13,6 +13,12 @@ export type OptionSelectOption = {
 	iconId?: string;
 	disabled?: boolean;
 	badge?: string;
+	/**
+	* Heading this option is listed under. Options of one group are expected
+	* together (the list keeps its order); a heading is drawn where the group
+	* changes.
+	*/
+	group?: string;
 };
 /** Number of options at/above which search is enabled by default (unless creatable). */
 export declare const OPTION_SELECT_SEARCH_MIN_OPTIONS = 8;

package/dist/index.cjs

@@ -12818,8 +12818,14 @@ function useDropdownContext() {
 	if (!ctx) throw new Error("Dropdown compound components must be used within <Dropdown>");
 	return ctx;
 }
-function Dropdown({ children }) {
-	const [open, setOpen] = (0, react$1.useState)(false);
+function Dropdown({ children, open: controlledOpen, onOpenChange }) {
+	const [innerOpen, setInnerOpen] = (0, react$1.useState)(false);
+	const controlled = controlledOpen !== void 0 && onOpenChange !== void 0;
+	const open = controlled ? controlledOpen : innerOpen;
+	const setOpen = (0, react$1.useCallback)((next) => {
+		if (controlled) onOpenChange(next);
+		else setInnerOpen(next);
+	}, [controlled, onOpenChange]);
 	const triggerId = (0, react$1.useId)();
 	const contentId = (0, react$1.useId)();
 	const triggerRef = (0, react$1.useRef)(null);
@@ -14010,7 +14016,13 @@ function OptionSelect(props) {
 		const checked = mode === "single" ? props.value === opt.value : props.value.includes(opt.value);
 		const blockedByMax = mode === "multi" && !checked && atMax === true;
 		const optionDisabled = opt.disabled === true || blockedByMax;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		const previous = dropdownRows[i - 1];
+		const previousGroup = previous !== void 0 && previous.kind === "option" ? previous.opt.group : void 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react$1.Fragment, { children: [opt.group !== void 0 && opt.group !== previousGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "presentation",
+			className: "px-2.5 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wide text-foreground-subtle",
+			children: opt.group
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
 			role: "option",
 			"aria-selected": checked,
@@ -14038,7 +14050,7 @@ function OptionSelect(props) {
 					children: opt.badge
 				}) : null
 			]
-		}, opt.value);
+		})] }, opt.value);
 	}) });
 	const footerAddNewIndex = dropdownRows.length;
 	const fieldShowsChoice = mode === "single" && props.singleDisplay === "field" && selectedOptions.length > 0;

package/dist/index.js

@@ -12794,8 +12794,14 @@ function useDropdownContext() {
 	if (!ctx) throw new Error("Dropdown compound components must be used within <Dropdown>");
 	return ctx;
 }
-function Dropdown({ children }) {
-	const [open, setOpen] = useState(false);
+function Dropdown({ children, open: controlledOpen, onOpenChange }) {
+	const [innerOpen, setInnerOpen] = useState(false);
+	const controlled = controlledOpen !== void 0 && onOpenChange !== void 0;
+	const open = controlled ? controlledOpen : innerOpen;
+	const setOpen = useCallback((next) => {
+		if (controlled) onOpenChange(next);
+		else setInnerOpen(next);
+	}, [controlled, onOpenChange]);
 	const triggerId = useId();
 	const contentId = useId();
 	const triggerRef = useRef(null);
@@ -13986,7 +13992,13 @@ function OptionSelect(props) {
 		const checked = mode === "single" ? props.value === opt.value : props.value.includes(opt.value);
 		const blockedByMax = mode === "multi" && !checked && atMax === true;
 		const optionDisabled = opt.disabled === true || blockedByMax;
-		return /* @__PURE__ */ jsxs("button", {
+		const previous = dropdownRows[i - 1];
+		const previousGroup = previous !== void 0 && previous.kind === "option" ? previous.opt.group : void 0;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [opt.group !== void 0 && opt.group !== previousGroup ? /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: "px-2.5 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wide text-foreground-subtle",
+			children: opt.group
+		}) : null, /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			role: "option",
 			"aria-selected": checked,
@@ -14014,7 +14026,7 @@ function OptionSelect(props) {
 					children: opt.badge
 				}) : null
 			]
-		}, opt.value);
+		})] }, opt.value);
 	}) });
 	const footerAddNewIndex = dropdownRows.length;
 	const fieldShowsChoice = mode === "single" && props.singleDisplay === "field" && selectedOptions.length > 0;

package/dist/primitives/dropdown.d.ts

@@ -1,8 +1,16 @@
 import { type JSX, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
 import { type LucideIcon } from "lucide-react";
-export declare function Dropdown({ children }: {
-	children: ReactNode;
-}): JSX.Element | null;
+export interface DropdownProps {
+	readonly children: ReactNode;
+	/**
+	* Controlled open state. Give both `open` and `onOpenChange` to drive the menu
+	* from outside (a "{" typed in a field opens the variable list); give neither
+	* and the dropdown keeps its own state.
+	*/
+	readonly open?: boolean;
+	readonly onOpenChange?: (open: boolean) => void;
+}
+export declare function Dropdown({ children, open: controlledOpen, onOpenChange }: DropdownProps): JSX.Element | null;
 export declare function DropdownTrigger({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element | null;
 interface DropdownContentProps extends HTMLAttributes<HTMLDivElement> {
 	/** Horizontal alignment relative to the trigger. Default: 'start' (left-aligned). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.341",
+  "version": "1.2.342",
   "repository": {
     "type": "git",
     "url": "https://github.com/camstack/server.git",