@ryuzaki13/react-foundation-ui 3.8.2 → 3.9.0

package/dist/multi-select/index.js

@@ -1,6 +1,6 @@
 import { Text as e } from "../text/index.js";
 import { t } from "../chunks/ui.module-oRwY3Zli.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 { 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-DagDe9OH.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";
@@ -94,7 +94,9 @@ function ce({ option: e, index: t, listId: n, activeIndex: r, selectedKeys: i, q
 		children: [/* @__PURE__ */ x("div", {
 			role: "gridcell",
 			className: O.optionCheckBox,
-			onMouseDown: (e) => e.stopPropagation(),
+			onMouseDown: (e) => {
+				e.preventDefault(), e.stopPropagation();
+			},
 			onClick: (e) => e.stopPropagation(),
 			children: /* @__PURE__ */ x(h, {
 				value: y,
@@ -168,19 +170,19 @@ function ue({ isNoData: e, error: t, children: n }) {
 }
 //#endregion
 //#region src/multi-select/ui/MultiSelectCore.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,
+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, fieldError: F, required: I, isLoading: L, renderToken: R, renderToolbar: z, renderOption: de, preserveOptionArrayReference: fe = !1 }) {
+	let pe = ee(null), [B, me] = te(!1), V = "search-multi", H = T(() => E(u, fe), [fe, u]), he = T(() => new Set(H.map(m)), [H, m]), ge = T(() => t.filter((e) => !he.has(m(e))), [
+		he,
 		m,
 		t
-	]), { query: H, setQuery: ge, resetQueryOnClose: _e } = s({
+	]), { query: U, setQuery: _e, resetQueryOnClose: ve } = s({
 		query: ie,
 		defaultQuery: ae,
 		onQuery: ce,
-		triggerMode: B
-	}), ve = (e) => {
-		z && !e && _e && ge(""), pe(e);
-	}, ye = w((e) => v?.(e) ?? [
+		triggerMode: V
+	}), ye = (e) => {
+		B && !e && ve && _e(""), me(e);
+	}, be = w((e) => v?.(e) ?? [
 		h(e),
 		g?.(e),
 		a(_?.(e)?.label)
@@ -189,98 +191,98 @@ function A({ ref: e, options: t, value: u, onChange: p, getOptionKey: m, getOpti
 		_,
 		h,
 		v
-	]), U = n({
-		options: V,
-		query: H,
+	]), W = n({
+		options: H,
+		query: U,
 		enabled: k,
-		getSearchText: ye
-	}), W = n({
-		options: he,
-		query: H,
+		getSearchText: be
+	}), G = n({
+		options: ge,
+		query: U,
 		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,
+		getSearchText: be
+	}), K = T(() => [...W, ...G], [G, W]), xe = W.length > 0 ? 0 : -1, Se = w((e, t) => oe(e, t, m), [m]), { draftValue: q, setDraftValue: J, prepareOpen: Ce } = o({
+		value: H,
+		open: B,
 		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
+		isEqual: Se
+	}), Y = T(() => new Set(q.map(m)), [q, m]), we = T(() => ({
+		selectedOptions: q,
+		committedSelectedOptions: H,
+		selectedKeys: Y,
+		open: B
 	}), [
-		V,
-		K,
-		z,
-		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,
+		H,
+		q,
+		B,
+		Y
+	]), X = w((e) => M?.(e, we) ?? !1, [M, we]), { activeIndex: Z, context: Te, floatingStyles: Ee, getFloatingProps: De, setReference: Oe, setFloating: ke, setOptionRef: Ae, close: je, openList: Me, toggleOpen: Ne, handleReferenceKeyDown: Pe, handleFloatingKeyDown: Fe, getOptionId: Ie, getActiveOptionId: Le } = i({
+		options: K,
+		selectedIndex: xe,
+		open: B,
+		onOpenChange: ye,
 		onSelect: void 0,
 		disabled: N,
-		getOptionDisabled: Y,
+		getOptionDisabled: X,
 		closeOnSelect: !1,
 		allowOpenWithoutOptions: !0,
-		triggerMode: B
-	}), Le = se ?? H, Z = (e) => {
+		triggerMode: V
+	}), Re = se ?? U, ze = (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") {
+		J((n) => n.some((e) => m(e) === t) ? n.filter((e) => m(e) !== t) : X(e) ? n : [...n, e]);
+	}, Be = w((t) => {
+		if (pe.current = t, typeof e == "function") {
 			e(t);
 			return;
 		}
 		e && (e.current = t);
-	}, [e]), ze = () => {
-		q([]), z || p([]);
-	}, Be = () => {
-		q((e) => {
+	}, [e]), Ve = () => {
+		J([]), B || p([]);
+	}, He = () => {
+		J((e) => {
 			let t = [...e], n = new Set(e.map(m));
-			for (let e of G) {
+			for (let e of K) {
 				let r = m(e);
-				!n.has(r) && !Y(e) && (n.add(r), t.push(e));
+				!n.has(r) && !X(e) && (n.add(r), t.push(e));
 			}
 			return t;
 		});
-	}, Ve = () => {
-		q([]);
-	}, He = (e) => {
-		Y(e) || (q([e]), Ae());
-	}, Q = z ? K : V, Ue = Q.length > 0, We = {
+	}, Ue = () => {
+		J([]);
+	}, We = (e) => {
+		X(e) || (J([e]), je());
+	}, Q = B ? q : H, Ge = Q.length > 0, Ke = {
 		selectedOptions: Q,
-		committedSelectedOptions: V,
-		availableOptions: W,
-		query: H,
-		open: z,
-		clearSelection: ze,
-		selectAll: Be,
-		deselectAll: Ve
-	}, 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) => ({
+		committedSelectedOptions: H,
+		availableOptions: G,
+		query: U,
+		open: B,
+		clearSelection: Ve,
+		selectAll: He,
+		deselectAll: Ue
+	}, qe = Q.length > 1 ? y(Q.length) : Q.length === 1 ? h(Q[0]) : void 0, Je = R === void 0 ? qe : typeof R == "function" ? R(Ke) : null, Ye = typeof z == "function" ? z(Ke) : z, Xe = w((e) => ({
 		text: h(e),
 		code: g?.(e)
-	}), [g, h]), Ye = de ?? Je, Xe = U.map((e, t) => ({
+	}), [g, h]), Ze = de ?? Xe, Qe = W.map((e, t) => ({
 		option: e,
 		index: t
-	})), Ze = W.map((e, t) => ({
+	})), $e = G.map((e, t) => ({
 		option: e,
-		index: t + Xe.length
-	})), Qe = !F && !P && G.length === 0, $ = l({
-		mode: B,
-		open: z,
-		currentQuery: H,
+		index: t + Qe.length
+	})), et = !L && !P && K.length === 0, $ = l({
+		mode: V,
+		open: B,
+		currentQuery: U,
 		hasDisplayValue: !1,
-		inputRef: fe,
-		setQuery: ge,
-		openList: je,
-		close: Ae,
-		toggleOpen: Me,
+		inputRef: pe,
+		setQuery: _e,
+		openList: Me,
+		close: je,
+		toggleOpen: Ne,
 		onBeforeOpen: () => {
-			z || Se();
+			B || Ce();
 		}
 	});
 	return /* @__PURE__ */ x(d, {
@@ -289,38 +291,42 @@ function A({ ref: e, options: t, value: u, onChange: p, getOptionKey: m, getOpti
 		disabled: N,
 		size: D,
 		className: O.multiSelect,
+		error: F,
+		required: I,
 		children: ({ controlId: e, labelId: n, describedBy: i }) => {
 			let a = `${e}-grid`;
 			return /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(c, {
-				ref: Re,
-				rootRef: De,
+				ref: Be,
+				rootRef: Oe,
 				id: e,
 				type: "text",
 				role: "combobox",
 				autoComplete: "off",
-				isLoading: F,
+				isLoading: L,
 				disabled: N,
-				open: z,
+				open: B,
 				optionCount: t.length,
 				label: C,
 				placeholder: re,
 				placeholderFallback: "Выберите значения",
-				value: H,
-				selectedValue: Ke,
-				hasSelection: Ue,
-				showSelectedValue: Ue && H.length === 0,
+				value: U,
+				selectedValue: Je,
+				hasSelection: Ge,
+				showSelectedValue: Ge && U.length === 0,
 				clearable: !0,
-				onClear: ze,
+				onClear: Ve,
 				clearAriaLabel: "Очистить все",
 				onToggleMouseDown: $.handleToggleMouseDown,
 				onToggleClick: $.handleToggleClick,
 				"aria-labelledby": n,
 				"aria-describedby": i,
+				"aria-required": I || void 0,
+				"aria-invalid": !!F || void 0,
 				"aria-haspopup": "grid",
-				"aria-expanded": z,
-				"aria-controls": z ? a : void 0,
+				"aria-expanded": B,
+				"aria-controls": B ? a : void 0,
 				"aria-autocomplete": "list",
-				"aria-activedescendant": z ? Ie(a) : void 0,
+				"aria-activedescendant": B ? Le(a) : void 0,
 				rootClassName: "flex alignItemsCenter",
 				onChange: (e) => {
 					$.handleTriggerInputChange(e.target.value);
@@ -330,18 +336,18 @@ function A({ ref: e, options: t, value: u, onChange: p, getOptionKey: m, getOpti
 					$.handleTriggerFocus(e.currentTarget);
 				},
 				onKeyDown: (e) => {
-					if (Ne(e), !e.defaultPrevented) {
-						if (z && e.ctrlKey && e.key === " ") {
+					if (Pe(e), !e.defaultPrevented) {
+						if (B && e.ctrlKey && e.key === " ") {
 							e.preventDefault();
-							let t = G[X];
-							X >= 0 && X < G.length && Z(t);
+							let t = K[Z];
+							Z >= 0 && Z < K.length && ze(t);
 							return;
 						}
 						$.handleTriggerKeyDown({
 							event: e,
 							onActivateWhenOpen: () => {
-								let e = G[X];
-								X >= 0 && X < G.length && He(e);
+								let e = K[Z];
+								Z >= 0 && Z < K.length && We(e);
 							},
 							enableClosedArrowDownOpen: !0,
 							suppressClosedArrowUp: !0
@@ -349,70 +355,70 @@ function A({ ref: e, options: t, value: u, onChange: p, getOptionKey: m, getOpti
 					}
 				}
 			}), /* @__PURE__ */ x(r, {
-				open: z,
-				context: we,
-				floatingStyles: Te,
+				open: B,
+				context: Te,
+				floatingStyles: Ee,
 				listId: a,
 				labelId: n,
 				descriptionId: i,
-				activeOptionId: z ? Ie(a) : void 0,
+				activeOptionId: B ? Le(a) : void 0,
 				ariaMultiselectable: !0,
 				popupRole: "grid",
-				setFloating: Oe,
-				getFloatingProps: Ee,
-				onKeyDown: Pe,
+				setFloating: ke,
+				getFloatingProps: De,
+				onKeyDown: Fe,
 				initialFocus: -1,
 				returnFocus: !1,
 				tabIndex: -1,
-				toolbar: qe,
-				selectionActions: L === void 0 ? {
-					onSelectAll: Be,
-					onDeselectAll: Ve
+				toolbar: Ye,
+				selectionActions: z === void 0 ? {
+					onSelectAll: He,
+					onDeselectAll: Ue
 				} : void 0,
 				children: /* @__PURE__ */ x(ue, {
-					isNoData: Qe,
+					isNoData: et,
 					error: P,
 					children: /* @__PURE__ */ S("div", {
 						role: "presentation",
 						className: "scrollable overscroll h100",
 						children: [
 							/* @__PURE__ */ x(le, {
-								entries: Xe,
+								entries: Qe,
 								sectionId: `${a}-selected`,
 								listId: a,
-								activeIndex: X,
-								selectedKeys: J,
-								query: H,
-								highlightQuery: Le,
+								activeIndex: Z,
+								selectedKeys: Y,
+								query: U,
+								highlightQuery: Re,
 								getOptionKey: m,
 								getOptionGroup: _,
-								getOptionDisabled: Y,
-								getOptionId: Fe,
-								setOptionRef: ke,
-								toggleOption: Z,
-								selectOnlyOption: He,
-								renderOption: Ye
+								getOptionDisabled: X,
+								getOptionId: Ie,
+								setOptionRef: Ae,
+								toggleOption: ze,
+								selectOnlyOption: We,
+								renderOption: Ze
 							}),
-							Xe.length > 0 && Ze.length > 0 && /* @__PURE__ */ x(f, {
+							Qe.length > 0 && $e.length > 0 && /* @__PURE__ */ x(f, {
 								"aria-hidden": "true",
 								className: "marginBlockSm"
 							}),
 							/* @__PURE__ */ x(le, {
-								entries: Ze,
+								entries: $e,
 								sectionId: `${a}-available`,
 								listId: a,
-								activeIndex: X,
-								selectedKeys: J,
-								query: H,
-								highlightQuery: Le,
+								activeIndex: Z,
+								selectedKeys: Y,
+								query: U,
+								highlightQuery: Re,
 								getOptionKey: m,
 								getOptionGroup: _,
-								getOptionDisabled: Y,
-								getOptionId: Fe,
-								setOptionRef: ke,
-								toggleOption: Z,
-								selectOnlyOption: He,
-								renderOption: Ye
+								getOptionDisabled: X,
+								getOptionId: Ie,
+								setOptionRef: Ae,
+								toggleOption: ze,
+								selectOnlyOption: We,
+								renderOption: Ze
 							})
 						]
 					})
@@ -480,57 +486,61 @@ function N({ odata: e, segment: t, model: n, value: r, dependencies: i, onChange
 }
 //#endregion
 //#region src/multi-select/ui/ODataMultiSelect.tsx
-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({
+function P({ odata: e, segment: t, model: n, label: r, description: i, disabled: a, required: o, fieldError: s, value: c, dependencies: l, onChange: u, size: d }) {
+	let f = N({
 		odata: e,
 		segment: t,
 		model: re(n),
-		value: o,
-		dependencies: s,
-		onChange: c
+		value: c,
+		dependencies: l,
+		onChange: u
 	});
 	return /* @__PURE__ */ x(j, {
 		label: r,
 		description: i,
-		size: l,
-		codeKey: u.codeKey,
-		textKey: u.textKey,
+		required: o,
+		fieldError: s,
+		size: d,
+		codeKey: f.codeKey,
+		textKey: f.textKey,
 		hideCode: t.hideCode ?? e.hideCode,
-		items: u.filteredItems,
-		value: u.selectedItems,
-		onChange: u.handleChange,
-		onQuery: u.setQuery,
-		query: u.query,
+		items: f.filteredItems,
+		value: f.selectedItems,
+		onChange: f.handleChange,
+		onQuery: f.setQuery,
+		query: f.query,
 		defaultFilter: !1,
-		highlightQuery: u.debouncedQuery,
-		isLoading: u.isLoading,
+		highlightQuery: f.debouncedQuery,
+		isLoading: f.isLoading,
 		disabled: a,
-		placeholder: u.placeholder,
-		error: u.isError ? "Ошибка загрузки" : void 0
+		placeholder: f.placeholder,
+		error: f.isError ? "Ошибка загрузки" : void 0
 	});
 }
 //#endregion
 //#region src/multi-select/ui/ODataDependentSegmentMultiSelect.tsx
 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]);
+	let { item: t, disabled: n, label: r, description: i, required: a, fieldError: o, size: s, width: c = 15 } = e, l = g(e), { updateSegment: u } = l, d = `calc(${c}em + var(--width-add))`, f = w((e) => {
+		u(t.id, e);
+	}, [t.id, u]);
 	return /* @__PURE__ */ x("div", {
 		style: {
-			maxWidth: l,
-			minWidth: l
+			maxWidth: d,
+			minWidth: d
 		},
 		children: /* @__PURE__ */ x(P, {
 			odata: t.odata,
 			segment: t.segment,
 			model: t.model,
-			dependencies: s.values,
-			value: s.values[t.id],
-			onChange: u,
-			disabled: n || s.isSegmentDisabled(t.id),
+			dependencies: l.values,
+			value: l.values[t.id],
+			onChange: f,
+			disabled: n || l.isSegmentDisabled(t.id),
 			label: r,
 			description: i,
-			size: a
+			required: a,
+			fieldError: o,
+			size: s
 		})
 	});
 }
@@ -565,32 +575,34 @@ function I(e) {
 function L(e, t) {
 	return e[t];
 }
-function de(e, t, n) {
+function R(e, t, n) {
 	let r = e[t];
 	if (typeof r == "string") return r;
 	let i = L(e, n);
 	return typeof i == "string" ? i : String(i);
 }
-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) => ({
+function z({ label: e, description: t, disabled: n, placeholder: r, size: i, options: a, value: o, onChange: s, optionKey: c, optionLabel: l, renderCode: u, required: d, fieldError: f }) {
+	let p = a.map((e) => ({
 		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));
+		text: R(e, l, c)
+	})), m = new Set((o ?? []).map((e) => String(e))), h = p.filter((e) => m.has(e.key));
 	return /* @__PURE__ */ x(j, {
 		label: e,
 		description: t,
+		required: d,
+		fieldError: f,
 		disabled: n,
 		placeholder: r,
 		size: i,
-		items: d,
+		items: p,
 		codeKey: "key",
 		textKey: "text",
 		hideCode: !u || void 0,
-		value: p,
+		value: h,
 		onChange: (e) => s(e.map((e) => e.key))
 	});
 }
 //#endregion
-export { j as DeprecatedMultiSelect, M as MultiSelect, I as ODataDependentMultiSelect, F as ODataDependentSegmentMultiSelect, P as ODataMultiSelect, R as SerializableMultiSelect };
+export { j as DeprecatedMultiSelect, M as MultiSelect, I as ODataDependentMultiSelect, F as ODataDependentSegmentMultiSelect, P as ODataMultiSelect, z as SerializableMultiSelect };
 
 //# sourceMappingURL=index.js.map