@ryuzaki13/react-foundation-ui 3.7.6 → 3.8.0

package/dist/multi-select/index.js

@@ -1,23 +1,155 @@
 import { Text as e } from "../text/index.js";
 import { t } from "../chunks/ui.module-oRwY3Zli.js";
-import { a as n, f as r, i, n as a, r as o, s, t as c, u as l, v as u } from "../chunks/picker-SJXnHwsj.js";
-import { t as d } from "../chunks/separator-CHpBud1e.js";
-import { Option as f, OptionButton as p } from "../option/index.js";
-import { t as ee } from "../chunks/check-box-D_Y6iIWv.js";
-import { t as m } from "../chunks/odata-dependent-C_DCbKY2.js";
-import { n as h, t as g } from "../chunks/useODataSelectBase-DwR4Lfv-.js";
-import { i as _, n as v, t as y } from "../chunks/defaultRenderers-u_Vep6Pj.js";
+import { a as n, f as r, i, m as a, n as o, r as s, s as c, t as l, u, v as d } from "../chunks/picker-SJXnHwsj.js";
+import { t as f } from "../chunks/separator-CHpBud1e.js";
+import { Option as p, OptionButton as m } from "../option/index.js";
+import { t as h } from "../chunks/check-box-D_Y6iIWv.js";
+import { t as g } from "../chunks/odata-dependent-C_DCbKY2.js";
+import { n as _, t as v } from "../chunks/useODataSelectBase-DwR4Lfv-.js";
+import { t as y } from "../chunks/formatMultiSelectOptionCount-t-e8apob.js";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { useCallback as te, useMemo as C, useRef as ne, useState as re } from "react";
-import { flattenODataDependentServices as ie, useODataCollectionModel as w } from "@ryuzaki13/react-foundation-api/odata";
-var T = {
+import { Fragment as C, useCallback as w, useMemo as T, useRef as ee, useState as te } from "react";
+import { flattenODataDependentServices as ne, useODataCollectionModel as re } from "@ryuzaki13/react-foundation-api/odata";
+//#region src/multi-select/lib/materializeMultiSelectOptions.ts
+function E(e, t = !1) {
+	return t && Array.isArray(e) ? e : [...e];
+}
+//#endregion
+//#region src/multi-select/lib/adaptLegacyMultiSelectContext.ts
+function D(e) {
+	return {
+		selectedItems: E(e.selectedOptions, !0),
+		committedSelectedItems: E(e.committedSelectedOptions, !0),
+		availableItems: E(e.availableOptions, !0),
+		query: e.query,
+		open: e.open,
+		clearSelection: e.clearSelection,
+		selectAll: e.selectAll,
+		deselectAll: e.deselectAll
+	};
+}
+function ie(e) {
+	return {
+		selectedItems: E(e.selectedOptions, !0),
+		committedSelectedItems: E(e.committedSelectedOptions, !0),
+		selectedKeys: e.selectedKeys,
+		open: e.open
+	};
+}
+//#endregion
+//#region src/multi-select/lib/resolveLegacyMultiSelectTextKey.ts
+function ae(e, t, n) {
+	if (n) return n;
+	let r = e[0];
+	return r ? Object.keys(r).find((e) => e !== t) ?? t : t;
+}
+//#endregion
+//#region src/multi-select/lib/multiSelectSelection.ts
+function oe(e, t, n) {
+	if (e.length !== t.length) return !1;
+	let r = new Set(t.map(n));
+	return e.every((e) => r.has(n(e)));
+}
+var O = {
 	multiSelect: "_9oSdQi",
 	optionCheckBox: "d9SDKQ",
 	optionActionCell: "xCo7w9"
 };
 //#endregion
+//#region src/multi-select/lib/createMultiSelectOptionSections.ts
+function se(e, t) {
+	let n = [];
+	for (let r of e) {
+		let e = t(r.option), i = n.at(-1), a = i?.group?.key === e?.key;
+		if (i && a) {
+			i.entries.push(r);
+			continue;
+		}
+		n.push({
+			group: e,
+			entries: [r]
+		});
+	}
+	return n;
+}
+//#endregion
+//#region src/multi-select/ui/MultiSelectOptionRow.tsx
+function ce({ option: e, index: t, listId: n, activeIndex: r, selectedKeys: i, query: a, highlightQuery: o, getOptionKey: s, getOptionDisabled: c, getOptionId: l, setOptionRef: u, toggleOption: d, selectOnlyOption: f, renderOption: g }) {
+	let _ = t === r, v = s(e), y = i.has(v), b = c?.(e) ?? !1, C = g(e, {
+		selected: y,
+		active: _,
+		disabled: b,
+		query: a,
+		highlightQuery: o
+	});
+	return /* @__PURE__ */ S(p, {
+		id: l(n, t),
+		ref: (e) => u(t, e),
+		role: "row",
+		"aria-selected": y,
+		"aria-disabled": b || void 0,
+		selected: y,
+		active: _,
+		disabled: b,
+		children: [/* @__PURE__ */ x("div", {
+			role: "gridcell",
+			className: O.optionCheckBox,
+			onMouseDown: (e) => e.stopPropagation(),
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ x(h, {
+				value: y,
+				disabled: b,
+				"aria-label": `${y ? "Убрать" : "Добавить"} «${C.text}» ${y ? "из выбора" : "в выбор"}`,
+				onChange: () => d(e)
+			})
+		}), /* @__PURE__ */ x("div", {
+			role: "gridcell",
+			className: O.optionActionCell,
+			children: /* @__PURE__ */ x(m, {
+				tabIndex: -1,
+				disabled: b,
+				"aria-label": `Выбрать только «${C.text}»`,
+				text: C.text,
+				code: C.code,
+				searchText: o,
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => f(e)
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/multi-select/ui/MultiSelectOptionList.tsx
+function le({ entries: e, sectionId: n, getOptionGroup: r, ...i }) {
+	return (r ? se(e, r) : [{
+		group: void 0,
+		entries: e
+	}]).map((e, r) => {
+		let a = e.entries.map(({ option: e, index: t }) => /* @__PURE__ */ x(ce, {
+			option: e,
+			index: t,
+			...i
+		}, `${i.getOptionKey(e)}-${t}`));
+		if (!e.group) return /* @__PURE__ */ x(C, { children: a }, `${n}-ungrouped-${r}`);
+		let o = `${n}-group-${r}`;
+		return /* @__PURE__ */ S("div", {
+			role: "rowgroup",
+			"aria-labelledby": o,
+			children: [/* @__PURE__ */ x("div", {
+				id: o,
+				role: "row",
+				className: t.uiPopupGroupLabel,
+				children: /* @__PURE__ */ x("div", {
+					role: "gridcell",
+					children: e.group.label
+				})
+			}), a]
+		}, `${n}-${e.group.key}-${r}`);
+	});
+}
+//#endregion
 //#region src/multi-select/ui/MultiSelectOptionSkeleton.tsx
-function E({ text: n, isError: r }) {
+function k({ text: n, isError: r }) {
 	return /* @__PURE__ */ S("div", {
 		className: t.uiPopupOption,
 		children: [/* @__PURE__ */ x("span", { className: t.uiPopupOptionIcon }), /* @__PURE__ */ x(e, {
@@ -27,216 +159,156 @@ function E({ text: n, isError: r }) {
 	});
 }
 //#endregion
-//#region src/multi-select/ui/MultiSelect.tsx
-function ae({ isNoData: e, error: t, children: n }) {
-	return e ? /* @__PURE__ */ x(l, { emptyState: /* @__PURE__ */ x(E, { text: "Нет данных" }) }) : t ? /* @__PURE__ */ x(l, { errorState: /* @__PURE__ */ x(E, {
+//#region src/multi-select/ui/MultiSelectOptionsWrapper.tsx
+function ue({ isNoData: e, error: t, children: n }) {
+	return e ? /* @__PURE__ */ x(u, { emptyState: /* @__PURE__ */ x(k, { text: "Нет данных" }) }) : t ? /* @__PURE__ */ x(u, { errorState: /* @__PURE__ */ x(k, {
 		isError: !0,
 		text: "Ошибка загрузки"
 	}) }) : /* @__PURE__ */ x(b, { children: n });
 }
-var oe = [];
-function D(e, t) {
-	return e[t];
-}
-function se(e, t, n) {
-	return Array.from(/* @__PURE__ */ new Set([
-		e[n],
-		e[t],
-		...Object.values(e)
-	]));
-}
-function ce(e, t, n) {
-	if (e.length !== t.length) return !1;
-	let r = new Set(t.map((e) => D(e, n)));
-	return e.every((e) => r.has(D(e, n)));
-}
-function le({ entries: e, listId: t, activeIndex: n, selectedKeys: r, codeKey: i, query: a, highlightQuery: o, getOptionDisabled: s, getOptionId: c, setOptionRef: l, toggleOption: u, selectOnlyOption: d, renderItem: m }) {
-	return e.map(({ item: e, index: h }) => {
-		let g = h === n, _ = D(e, i), v = r.has(_), y = s?.(e) ?? !1, b = m(e, {
-			selected: v,
-			active: g,
-			disabled: y,
-			query: a,
-			highlightQuery: o
-		});
-		return /* @__PURE__ */ S(f, {
-			id: c(t, h),
-			ref: (e) => l(h, e),
-			role: "row",
-			"aria-selected": v,
-			"aria-disabled": y || void 0,
-			selected: v,
-			active: g,
-			disabled: y,
-			children: [/* @__PURE__ */ x("div", {
-				role: "gridcell",
-				className: T.optionCheckBox,
-				onMouseDown: (e) => e.stopPropagation(),
-				onClick: (e) => e.stopPropagation(),
-				children: /* @__PURE__ */ x(ee, {
-					value: v,
-					disabled: y,
-					"aria-label": `${v ? "Убрать" : "Добавить"} «${b.text}» ${v ? "из выбора" : "в выбор"}`,
-					onChange: () => u(e)
-				})
-			}), /* @__PURE__ */ x("div", {
-				role: "gridcell",
-				className: T.optionActionCell,
-				children: /* @__PURE__ */ x(p, {
-					tabIndex: -1,
-					disabled: y,
-					"aria-label": `Выбрать только «${b.text}»`,
-					text: b.text,
-					code: b.code,
-					searchText: o,
-					onMouseDown: (e) => e.preventDefault(),
-					onClick: () => d(e)
-				})
-			})]
-		}, `${_}-${h}`);
-	});
-}
-function O({ ref: e, codeKey: t, textKey: l, hideCode: f, items: p, value: ee, onChange: m, label: h, description: g, placeholder: ie, size: w, query: E, defaultQuery: O, highlightQuery: k, onQuery: A, defaultFilter: j = !0, onOpen: ue, onClose: M, getOptionDisabled: N, disabled: P, error: F, isLoading: de, renderToken: fe, renderToolbar: I, renderItem: pe }) {
-	let me = ne(null), [L, he] = re(!1), R = "search-multi", z = ee ?? oe, ge = C(() => new Set(z.map((e) => D(e, t))), [t, z]), _e = C(() => p.filter((e) => !ge.has(D(e, t))), [
-		t,
-		ge,
-		p
-	]), B = C(() => _([...z, ...p], t, l), [
-		t,
-		z,
-		p,
-		l
-	]), { query: V, setQuery: ve, resetQueryOnClose: ye } = o({
-		query: E,
-		defaultQuery: O,
-		onQuery: A,
-		triggerMode: R
-	}), be = (e) => {
-		L && !e && ye && ve(""), he(e);
-	}, H = n({
-		options: z,
-		query: V,
-		enabled: j,
-		getSearchText: (e) => se(e, t, B)
-	}), U = n({
-		options: _e,
-		query: V,
-		enabled: j,
-		getSearchText: (e) => se(e, t, B)
-	}), W = C(() => [...H, ...U], [U, H]), xe = H.length > 0 ? 0 : -1, { draftValue: G, setDraftValue: K, prepareOpen: Se } = a({
-		value: z,
-		open: L,
-		onCommit: m,
-		onOpen: ue,
-		onClose: M,
-		isEqual: (e, n) => ce(e, n, t)
-	}), q = C(() => new Set(G.map((e) => D(e, t))), [t, G]), Ce = C(() => ({
-		selectedItems: G,
-		committedSelectedItems: z,
-		selectedKeys: q,
-		open: L
+//#endregion
+//#region src/multi-select/ui/OptionMultiSelectCore.tsx
+function A({ ref: e, options: t, value: u, onChange: p, getOptionKey: m, getOptionLabel: h, getOptionCode: g, getOptionGroup: _, getOptionSearchText: v, label: C, description: ne, placeholder: re, size: D, query: ie, defaultQuery: ae, highlightQuery: se, onQuery: ce, defaultFilter: k = !0, onOpen: A, onClose: j, getOptionDisabled: M, disabled: N, error: P, isLoading: F, renderToken: I, renderToolbar: L, renderOption: de, preserveOptionArrayReference: R = !1 }) {
+	let fe = ee(null), [z, pe] = te(!1), B = "search-multi", V = T(() => E(u, R), [R, u]), me = T(() => new Set(V.map(m)), [V, m]), he = T(() => t.filter((e) => !me.has(m(e))), [
+		me,
+		m,
+		t
+	]), { query: H, setQuery: ge, resetQueryOnClose: _e } = s({
+		query: ie,
+		defaultQuery: ae,
+		onQuery: ce,
+		triggerMode: B
+	}), ve = (e) => {
+		z && !e && _e && ge(""), pe(e);
+	}, ye = w((e) => v?.(e) ?? [
+		h(e),
+		g?.(e),
+		a(_?.(e)?.label)
+	].filter((e) => !!e), [
+		g,
+		_,
+		h,
+		v
+	]), U = n({
+		options: V,
+		query: H,
+		enabled: k,
+		getSearchText: ye
+	}), W = n({
+		options: he,
+		query: H,
+		enabled: k,
+		getSearchText: ye
+	}), G = T(() => [...U, ...W], [W, U]), be = U.length > 0 ? 0 : -1, xe = w((e, t) => oe(e, t, m), [m]), { draftValue: K, setDraftValue: q, prepareOpen: Se } = o({
+		value: V,
+		open: z,
+		onCommit: p,
+		onOpen: A,
+		onClose: j,
+		isEqual: xe
+	}), J = T(() => new Set(K.map(m)), [K, m]), Ce = T(() => ({
+		selectedOptions: K,
+		committedSelectedOptions: V,
+		selectedKeys: J,
+		open: z
 	}), [
+		V,
+		K,
 		z,
-		G,
-		L,
-		q
-	]), J = te((e) => N?.(e, Ce) ?? !1, [N, Ce]), { activeIndex: Y, context: we, floatingStyles: Te, getFloatingProps: Ee, setReference: De, setFloating: Oe, setOptionRef: ke, close: Ae, openList: je, toggleOpen: Me, handleReferenceKeyDown: Ne, handleFloatingKeyDown: Pe, getOptionId: Fe, getActiveOptionId: Ie } = i({
-		options: W,
-		selectedIndex: xe,
-		open: L,
-		onOpenChange: be,
+		J
+	]), Y = w((e) => M?.(e, Ce) ?? !1, [M, Ce]), { activeIndex: X, context: we, floatingStyles: Te, getFloatingProps: Ee, setReference: De, setFloating: Oe, setOptionRef: ke, close: Ae, openList: je, toggleOpen: Me, handleReferenceKeyDown: Ne, handleFloatingKeyDown: Pe, getOptionId: Fe, getActiveOptionId: Ie } = i({
+		options: G,
+		selectedIndex: be,
+		open: z,
+		onOpenChange: ve,
 		onSelect: void 0,
-		disabled: P,
-		getOptionDisabled: J,
+		disabled: N,
+		getOptionDisabled: Y,
 		closeOnSelect: !1,
 		allowOpenWithoutOptions: !0,
-		triggerMode: R
-	}), Le = k ?? V, X = (e) => {
-		let n = D(e, t);
-		K((r) => r.some((e) => D(e, t) === n) ? r.filter((e) => D(e, t) !== n) : J(e) ? r : [...r, e]);
-	}, Re = (t) => {
-		if (me.current = t, typeof e == "function") {
+		triggerMode: B
+	}), Le = se ?? H, Z = (e) => {
+		let t = m(e);
+		q((n) => n.some((e) => m(e) === t) ? n.filter((e) => m(e) !== t) : Y(e) ? n : [...n, e]);
+	}, Re = w((t) => {
+		if (fe.current = t, typeof e == "function") {
 			e(t);
 			return;
 		}
 		e && (e.current = t);
-	}, ze = () => {
-		K([]), L || m([]);
+	}, [e]), ze = () => {
+		q([]), z || p([]);
 	}, Be = () => {
-		K((e) => {
-			let n = [...e], r = new Set(e.map((e) => D(e, t)));
-			for (let e of W) {
-				let i = D(e, t);
-				!r.has(i) && !J(e) && (r.add(i), n.push(e));
+		q((e) => {
+			let t = [...e], n = new Set(e.map(m));
+			for (let e of G) {
+				let r = m(e);
+				!n.has(r) && !Y(e) && (n.add(r), t.push(e));
 			}
-			return n;
+			return t;
 		});
 	}, Ve = () => {
-		K([]);
-	}, Z = (e) => {
-		J(e) || (K([e]), Ae());
-	}, He = L ? G : z, Ue = He.length > 0, We = {
-		selectedItems: He,
-		committedSelectedItems: z,
-		availableItems: U,
-		query: V,
-		open: L,
+		q([]);
+	}, He = (e) => {
+		Y(e) || (q([e]), Ae());
+	}, Q = z ? K : V, Ue = Q.length > 0, We = {
+		selectedOptions: Q,
+		committedSelectedOptions: V,
+		availableOptions: W,
+		query: H,
+		open: z,
 		clearSelection: ze,
 		selectAll: Be,
 		deselectAll: Ve
-	}, Ge = fe === void 0 ? v({
-		codeKey: t,
-		textKey: B
-	}) : fe, Ke = pe ?? y({
-		codeKey: t,
-		textKey: B,
-		hideCode: f
-	}), qe = typeof Ge == "function" ? Ge(We) : null, Je = typeof I == "function" ? I(We) : I, Q = H.map((e, t) => ({
-		item: e,
+	}, Ge = Q.length > 1 ? y(Q.length) : Q.length === 1 ? h(Q[0]) : void 0, Ke = I === void 0 ? Ge : typeof I == "function" ? I(We) : null, qe = typeof L == "function" ? L(We) : L, Je = w((e) => ({
+		text: h(e),
+		code: g?.(e)
+	}), [g, h]), Ye = de ?? Je, Xe = U.map((e, t) => ({
+		option: e,
 		index: t
-	})), Ye = U.map((e, t) => ({
-		item: e,
-		index: t + Q.length
-	})), Xe = !de && !F && W.length === 0, $ = c({
-		mode: R,
-		open: L,
-		currentQuery: V,
+	})), Ze = W.map((e, t) => ({
+		option: e,
+		index: t + Xe.length
+	})), Qe = !F && !P && G.length === 0, $ = l({
+		mode: B,
+		open: z,
+		currentQuery: H,
 		hasDisplayValue: !1,
-		inputRef: me,
-		setQuery: ve,
+		inputRef: fe,
+		setQuery: ge,
 		openList: je,
 		close: Ae,
 		toggleOpen: Me,
 		onBeforeOpen: () => {
-			L || Se();
+			z || Se();
 		}
 	});
-	return /* @__PURE__ */ x(u, {
-		label: h,
-		description: g,
-		disabled: P,
-		size: w,
-		className: T.multiSelect,
+	return /* @__PURE__ */ x(d, {
+		label: C,
+		description: ne,
+		disabled: N,
+		size: D,
+		className: O.multiSelect,
 		children: ({ controlId: e, labelId: n, describedBy: i }) => {
 			let a = `${e}-grid`;
-			return /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(s, {
+			return /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(c, {
 				ref: Re,
 				rootRef: De,
 				id: e,
 				type: "text",
 				role: "combobox",
 				autoComplete: "off",
-				isLoading: de,
-				disabled: P,
-				open: L,
-				optionCount: p.length,
-				label: h,
-				placeholder: ie,
+				isLoading: F,
+				disabled: N,
+				open: z,
+				optionCount: t.length,
+				label: C,
+				placeholder: re,
 				placeholderFallback: "Выберите значения",
-				value: V,
-				selectedValue: qe,
+				value: H,
+				selectedValue: Ke,
 				hasSelection: Ue,
-				showSelectedValue: Ue && V.length === 0,
+				showSelectedValue: Ue && H.length === 0,
 				clearable: !0,
 				onClear: ze,
 				clearAriaLabel: "Очистить все",
@@ -245,10 +317,10 @@ function O({ ref: e, codeKey: t, textKey: l, hideCode: f, items: p, value: ee, o
 				"aria-labelledby": n,
 				"aria-describedby": i,
 				"aria-haspopup": "grid",
-				"aria-expanded": L,
-				"aria-controls": L ? a : void 0,
+				"aria-expanded": z,
+				"aria-controls": z ? a : void 0,
 				"aria-autocomplete": "list",
-				"aria-activedescendant": L ? Ie(a) : void 0,
+				"aria-activedescendant": z ? Ie(a) : void 0,
 				rootClassName: "flex alignItemsCenter",
 				onChange: (e) => {
 					$.handleTriggerInputChange(e.target.value);
@@ -259,17 +331,17 @@ function O({ ref: e, codeKey: t, textKey: l, hideCode: f, items: p, value: ee, o
 				},
 				onKeyDown: (e) => {
 					if (Ne(e), !e.defaultPrevented) {
-						if (L && e.ctrlKey && e.key === " ") {
+						if (z && e.ctrlKey && e.key === " ") {
 							e.preventDefault();
-							let t = W[Y];
-							t && X(t);
+							let t = G[X];
+							X >= 0 && X < G.length && Z(t);
 							return;
 						}
 						$.handleTriggerKeyDown({
 							event: e,
 							onActivateWhenOpen: () => {
-								let e = W[Y];
-								e && Z(e);
+								let e = G[X];
+								X >= 0 && X < G.length && He(e);
 							},
 							enableClosedArrowDownOpen: !0,
 							suppressClosedArrowUp: !0
@@ -277,13 +349,13 @@ function O({ ref: e, codeKey: t, textKey: l, hideCode: f, items: p, value: ee, o
 					}
 				}
 			}), /* @__PURE__ */ x(r, {
-				open: L,
+				open: z,
 				context: we,
 				floatingStyles: Te,
 				listId: a,
 				labelId: n,
 				descriptionId: i,
-				activeOptionId: L ? Ie(a) : void 0,
+				activeOptionId: z ? Ie(a) : void 0,
 				ariaMultiselectable: !0,
 				popupRole: "grid",
 				setFloating: Oe,
@@ -292,51 +364,55 @@ function O({ ref: e, codeKey: t, textKey: l, hideCode: f, items: p, value: ee, o
 				initialFocus: -1,
 				returnFocus: !1,
 				tabIndex: -1,
-				toolbar: Je,
-				selectionActions: I === void 0 ? {
+				toolbar: qe,
+				selectionActions: L === void 0 ? {
 					onSelectAll: Be,
 					onDeselectAll: Ve
 				} : void 0,
-				children: /* @__PURE__ */ x(ae, {
-					isNoData: Xe,
-					error: F,
+				children: /* @__PURE__ */ x(ue, {
+					isNoData: Qe,
+					error: P,
 					children: /* @__PURE__ */ S("div", {
 						role: "presentation",
 						className: "scrollable overscroll h100",
 						children: [
 							/* @__PURE__ */ x(le, {
-								entries: Q,
+								entries: Xe,
+								sectionId: `${a}-selected`,
 								listId: a,
-								activeIndex: Y,
-								selectedKeys: q,
-								codeKey: t,
-								query: V,
+								activeIndex: X,
+								selectedKeys: J,
+								query: H,
 								highlightQuery: Le,
-								getOptionDisabled: J,
+								getOptionKey: m,
+								getOptionGroup: _,
+								getOptionDisabled: Y,
 								getOptionId: Fe,
 								setOptionRef: ke,
-								toggleOption: X,
-								selectOnlyOption: Z,
-								renderItem: Ke
+								toggleOption: Z,
+								selectOnlyOption: He,
+								renderOption: Ye
 							}),
-							Q.length > 0 && _e.length > 0 && /* @__PURE__ */ x(d, {
+							Xe.length > 0 && Ze.length > 0 && /* @__PURE__ */ x(f, {
 								"aria-hidden": "true",
 								className: "marginBlockSm"
 							}),
 							/* @__PURE__ */ x(le, {
-								entries: Ye,
+								entries: Ze,
+								sectionId: `${a}-available`,
 								listId: a,
-								activeIndex: Y,
-								selectedKeys: q,
-								codeKey: t,
-								query: V,
+								activeIndex: X,
+								selectedKeys: J,
+								query: H,
 								highlightQuery: Le,
-								getOptionDisabled: J,
+								getOptionKey: m,
+								getOptionGroup: _,
+								getOptionDisabled: Y,
 								getOptionId: Fe,
 								setOptionRef: ke,
-								toggleOption: X,
-								selectOnlyOption: Z,
-								renderItem: Ke
+								toggleOption: Z,
+								selectOnlyOption: He,
+								renderOption: Ye
 							})
 						]
 					})
@@ -345,18 +421,57 @@ function O({ ref: e, codeKey: t, textKey: l, hideCode: f, items: p, value: ee, o
 		}
 	});
 }
-O.displayName = "MultiSelect";
+//#endregion
+//#region src/multi-select/ui/MultiSelect.tsx
+function j({ ref: e, codeKey: t, textKey: n, hideCode: r, items: i, value: a, onChange: o, getOptionDisabled: s, onClose: c, renderToken: l, renderToolbar: u, renderItem: d, ...f }) {
+	let p = T(() => a ?? [], [a]), m = T(() => ae([...p, ...i], t, n), [
+		t,
+		i,
+		p,
+		n
+	]), h = typeof l == "function" ? (e) => l(D(e)) : l, g = typeof u == "function" ? (e) => u(D(e)) : u;
+	return /* @__PURE__ */ x(A, {
+		...f,
+		ref: e,
+		preserveOptionArrayReference: !0,
+		options: i,
+		value: p,
+		onChange: o,
+		getOptionKey: (e) => e[t],
+		getOptionLabel: (e) => e[m] ?? e[t] ?? "",
+		getOptionCode: r ? void 0 : (e) => e[t] ?? "",
+		getOptionSearchText: (e) => Array.from(/* @__PURE__ */ new Set([
+			e[m],
+			e[t],
+			...Object.values(e)
+		])),
+		getOptionDisabled: s ? (e, t) => s(e, ie(t)) : void 0,
+		onClose: c,
+		renderToken: h,
+		renderToolbar: g,
+		renderOption: d ? (e, t) => d(e, t) : (e) => ({
+			text: e[m] ?? "",
+			code: r ? void 0 : e[t] ?? ""
+		})
+	});
+}
+j.displayName = "MultiSelect";
+//#endregion
+//#region src/multi-select/ui/OptionMultiSelect.tsx
+function M(e) {
+	return /* @__PURE__ */ x(A, { ...e });
+}
 //#endregion
 //#region src/multi-select/model/useODataMultiSelect.ts
-function k({ odata: e, segment: t, model: n, value: r, dependencies: i, onChange: a }) {
-	let o = h({
+function N({ odata: e, segment: t, model: n, value: r, dependencies: i, onChange: a }) {
+	let o = _({
 		odata: e,
 		segment: t,
 		model: n,
 		value: r,
 		dependencies: i
 	}), s = (e) => {
-		a(g(e, o.selectionKey));
+		a(v(e, o.selectionKey));
 	};
 	return {
 		...o,
@@ -365,16 +480,16 @@ function k({ odata: e, segment: t, model: n, value: r, dependencies: i, onChange
 }
 //#endregion
 //#region src/multi-select/ui/ODataMultiSelect.tsx
-function A({ odata: e, segment: t, model: n, label: r, description: i, disabled: a, value: o, dependencies: s, onChange: c, size: l }) {
-	let u = k({
+function P({ odata: e, segment: t, model: n, label: r, description: i, disabled: a, value: o, dependencies: s, onChange: c, size: l }) {
+	let u = N({
 		odata: e,
 		segment: t,
-		model: w(n),
+		model: re(n),
 		value: o,
 		dependencies: s,
 		onChange: c
 	});
-	return /* @__PURE__ */ x(O, {
+	return /* @__PURE__ */ x(j, {
 		label: r,
 		description: i,
 		size: l,
@@ -396,8 +511,8 @@ function A({ odata: e, segment: t, model: n, label: r, description: i, disabled:
 }
 //#endregion
 //#region src/multi-select/ui/ODataDependentSegmentMultiSelect.tsx
-function j(e) {
-	let { item: t, disabled: n, label: r, description: i, size: a, width: o = 15 } = e, s = m(e), { updateSegment: c } = s, l = `calc(${o}em + var(--width-add))`, u = te((e) => {
+function F(e) {
+	let { item: t, disabled: n, label: r, description: i, size: a, width: o = 15 } = e, s = g(e), { updateSegment: c } = s, l = `calc(${o}em + var(--width-add))`, u = w((e) => {
 		c(t.id, e);
 	}, [t.id, c]);
 	return /* @__PURE__ */ x("div", {
@@ -405,7 +520,7 @@ function j(e) {
 			maxWidth: l,
 			minWidth: l
 		},
-		children: /* @__PURE__ */ x(A, {
+		children: /* @__PURE__ */ x(P, {
 			odata: t.odata,
 			segment: t.segment,
 			model: t.model,
@@ -421,8 +536,8 @@ function j(e) {
 }
 //#endregion
 //#region src/multi-select/ui/ODataDependentMultiSelect.tsx
-function ue(e) {
-	let { width: t = 15, odata: n, segments: r, model: i, values: a, defaultValues: o, onChange: s, selectionMode: c, segmentOrder: l } = e, u = m({
+function I(e) {
+	let { width: t = 15, odata: n, segments: r, model: i, values: a, defaultValues: o, onChange: s, selectionMode: c, segmentOrder: l } = e, u = g({
 		values: a,
 		defaultValues: o,
 		onChange: s
@@ -433,11 +548,11 @@ function ue(e) {
 		selectionMode: c,
 		segmentOrder: l
 	};
-	return ie([{
+	return ne([{
 		odata: n,
 		segments: r,
 		model: i
-	}]).map((e) => /* @__PURE__ */ x(j, {
+	}]).map((e) => /* @__PURE__ */ x(F, {
 		item: e,
 		values: u.values,
 		onChange: u.updateValues,
@@ -447,21 +562,21 @@ function ue(e) {
 }
 //#endregion
 //#region src/multi-select/ui/SerializableMultiSelect.tsx
-function M(e, t) {
+function L(e, t) {
 	return e[t];
 }
-function N(e, t, n) {
+function de(e, t, n) {
 	let r = e[t];
 	if (typeof r == "string") return r;
-	let i = M(e, n);
+	let i = L(e, n);
 	return typeof i == "string" ? i : String(i);
 }
-function P({ label: e, description: t, disabled: n, placeholder: r, size: i, options: a, value: o, onChange: s, optionKey: c, optionLabel: l, renderCode: u }) {
+function R({ label: e, description: t, disabled: n, placeholder: r, size: i, options: a, value: o, onChange: s, optionKey: c, optionLabel: l, renderCode: u }) {
 	let d = a.map((e) => ({
-		key: String(M(e, c)),
-		text: N(e, l, c)
+		key: String(L(e, c)),
+		text: de(e, l, c)
 	})), f = new Set((o ?? []).map((e) => String(e))), p = d.filter((e) => f.has(e.key));
-	return /* @__PURE__ */ x(O, {
+	return /* @__PURE__ */ x(j, {
 		label: e,
 		description: t,
 		disabled: n,
@@ -476,6 +591,6 @@ function P({ label: e, description: t, disabled: n, placeholder: r, size: i, opt
 	});
 }
 //#endregion
-export { O as MultiSelect, ue as ODataDependentMultiSelect, j as ODataDependentSegmentMultiSelect, A as ODataMultiSelect, P as SerializableMultiSelect };
+export { j as MultiSelect, I as ODataDependentMultiSelect, F as ODataDependentSegmentMultiSelect, P as ODataMultiSelect, M as OptionMultiSelect, R as SerializableMultiSelect };
 
 //# sourceMappingURL=index.js.map