@oliasoft-open-source/react-ui-library 5.8.10-beta-1 → 5.8.10-beta-3

package/dist/index.js

@@ -5,7 +5,6 @@ import { TbAlertTriangle, TbArrowDown, TbArrowLeft, TbArrowRight, TbArrowUp, TbA
 import { VscCollapseAll, VscExpandAll } from "react-icons/vsc";
 import { AiOutlineMinusSquare, AiOutlinePlusSquare } from "react-icons/ai";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CSSTransition } from "react-transition-group";
 import ResizeObserver$1 from "resize-observer-polyfill";
 import { Arrow, mergeRefs, useHover, useLayer, useMousePositionAsTrigger } from "react-laag";
 import { cloneDeep, cloneDeepWith, debounce, get, isArray, isBoolean, isEmpty, isEqual, isFunction, isNil, isNumber, isObject, isPlainObject, isString, noop, set, toLower, toNumber } from "lodash";
@@ -51,8 +50,8 @@ let TriggerType = /* @__PURE__ */ function(e) {
 	return e.TEXT = "text", e.RADIO = "radio", e.CHECKBOX = "checkbox", e;
 }({});
 var chevron_module_default = {
-	chevron: "_chevron_dd6mn_1",
-	expanded: "_expanded_dd6mn_9"
+	chevron: "_chevron_1kw4m_1",
+	expanded: "_expanded_1kw4m_9"
 };
 const DisabledContext = React.createContext(!1);
 var icon_module_default = {
@@ -254,32 +253,8 @@ var accordion_module_default = {
 	expanded: "_expanded_15p8j_36",
 	padding: "_padding_15p8j_44",
 	squareBottom: "_squareBottom_15p8j_47"
-}, collapse_module_default = {
-	collapse: "_collapse_1m1n2_5",
-	enter: "_enter_1m1n2_9",
-	enterActive: "_enterActive_1m1n2_12",
-	exit: "_exit_1m1n2_15",
-	exitActive: "_exitActive_1m1n2_18",
-	collapseInner: "_collapseInner_1m1n2_21"
-};
-const Collapse = ({ children: e, expanded: t }) => /* @__PURE__ */ jsx(CSSTransition, {
-	in: t,
-	timeout: 100,
-	classNames: {
-		enter: collapse_module_default.enter,
-		enterActive: collapse_module_default.enterActive,
-		exit: collapse_module_default.exit,
-		exitActive: collapse_module_default.exitActive
-	},
-	unmountOnExit: !0,
-	children: /* @__PURE__ */ jsx("div", {
-		className: collapse_module_default.collapse,
-		children: /* @__PURE__ */ jsx("div", {
-			className: collapse_module_default.collapseInner,
-			children: /* @__PURE__ */ jsx("div", { children: e })
-		})
-	})
-}), AccordionBase = ({ heading: e, expanded: t = !1, bordered: n = !1, padding: r = !0, children: i, squareBottom: a = !1, onClick: o, testId: s }) => /* @__PURE__ */ jsxs("div", {
+};
+const AccordionBase = ({ heading: e, expanded: t = !1, bordered: n = !1, padding: r = !0, children: i, squareBottom: a = !1, onClick: o, testId: s }) => /* @__PURE__ */ jsxs("div", {
 	className: cx(accordion_module_default.accordion, n ? accordion_module_default.bordered : "", t ? accordion_module_default.expanded : "", a ? accordion_module_default.squareBottom : ""),
 	children: [/* @__PURE__ */ jsxs("div", {
 		className: cx(accordion_module_default.accordionHeader, o ? accordion_module_default.clickable : ""),
@@ -289,12 +264,9 @@ const Collapse = ({ children: e, expanded: t }) => /* @__PURE__ */ jsx(CSSTransi
 			className: accordion_module_default.heading,
 			children: e
 		})]
-	}), /* @__PURE__ */ jsx(Collapse, {
-		expanded: t,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cx(accordion_module_default.accordionContent, n && r ? accordion_module_default.padding : ""),
-			children: i
-		})
+	}), t && i && /* @__PURE__ */ jsx("div", {
+		className: cx(accordion_module_default.accordionContent, n && r ? accordion_module_default.padding : ""),
+		children: i
 	})]
 }), AccordionManaged = ({ heading: t, bordered: n, padding: r, expanded: i = !1, children: a, testId: o }) => {
 	let [s, c] = React.useState(i);
@@ -329,11 +301,9 @@ var check_box_module_default = {
 	isInTable: "_isInTable_oo4mp_99",
 	helpIconEnabled: "_helpIconEnabled_oo4mp_102"
 }, tooltip_module_default = {
-	tooltip: "_tooltip_1kuu4_1",
-	error: "_error_1kuu4_15",
-	warning: "_warning_1kuu4_19",
-	enter: "_enter_1kuu4_23",
-	enterActive: "_enterActive_1kuu4_27"
+	tooltip: "_tooltip_wli9z_1",
+	error: "_error_wli9z_15",
+	warning: "_warning_wli9z_19"
 };
 const TooltipLayer = ({ text: e = "", error: t = !1, warning: n = !1, maxWidth: r = "none", fontSize: i = "inherit", padding: a = "var(--padding-xxs) var(--padding-xs)", layerProps: o = { style: { position: "fixed" } }, arrowProps: s = { style: {
 	top: "100%",
@@ -374,25 +344,16 @@ const TooltipLayer = ({ text: e = "", error: t = !1, warning: n = !1, maxWidth:
 		possiblePlacements: a,
 		onParentClose: v
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CSSTransition, {
-		in: y,
-		timeout: 100,
-		classNames: {
-			enter: tooltip_module_default.enter,
-			enterActive: tooltip_module_default.enterActive
-		},
-		unmountOnExit: !0,
-		children: /* @__PURE__ */ jsx(Fragment$1, { children: y && b(/* @__PURE__ */ jsx(TooltipLayer, {
-			text: t,
-			error: n,
-			warning: s,
-			padding: d,
-			maxWidth: c,
-			fontSize: u,
-			layerProps: S,
-			arrowProps: C
-		})) })
-	}), /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [y && b(/* @__PURE__ */ jsx(TooltipLayer, {
+		text: t,
+		error: n,
+		warning: s,
+		padding: d,
+		maxWidth: c,
+		fontSize: u,
+		layerProps: S,
+		arrowProps: C
+	})), /* @__PURE__ */ jsx("span", {
 		...x,
 		..._,
 		style: {
@@ -625,37 +586,35 @@ var actions_module_default = {
 	actionComponentContainer: "_actionComponentContainer_1t7vd_14",
 	active: "_active_1t7vd_36"
 }, menu_module_default = {
-	wrapper: "_wrapper_15ymr_1",
-	layer: "_layer_15ymr_5",
-	layerContainer: "_layerContainer_15ymr_8",
-	enter: "_enter_15ymr_24",
-	enterActive: "_enterActive_15ymr_28",
-	nested: "_nested_15ymr_33",
-	fileInput: "_fileInput_15ymr_54",
-	trigger: "_trigger_15ymr_59",
-	middleAlignedInline: "_middleAlignedInline_15ymr_68",
-	heading: "_heading_15ymr_74",
-	headingIcon: "_headingIcon_15ymr_80",
-	clickable: "_clickable_15ymr_87",
-	option: "_option_15ymr_91",
-	active: "_active_15ymr_110",
-	disabled: "_disabled_15ymr_115",
-	selected: "_selected_15ymr_119",
-	optionContent: "_optionContent_15ymr_126",
-	inline: "_inline_15ymr_130",
-	icon: "_icon_15ymr_135",
-	check: "_check_15ymr_136",
-	text: "_text_15ymr_162",
-	label: "_label_15ymr_167",
-	description: "_description_15ymr_178",
-	arrow: "_arrow_15ymr_182",
-	divider: "_divider_15ymr_186",
-	deprecatedSemanticIcon: "_deprecatedSemanticIcon_15ymr_190",
-	buttonLabel: "_buttonLabel_15ymr_198",
-	buttonCaret: "_buttonCaret_15ymr_204",
-	component: "_component_15ymr_208",
-	right: "_right_15ymr_214",
-	actions: "_actions_15ymr_219"
+	wrapper: "_wrapper_9g7i6_1",
+	layer: "_layer_9g7i6_5",
+	layerContainer: "_layerContainer_9g7i6_8",
+	nested: "_nested_9g7i6_24",
+	fileInput: "_fileInput_9g7i6_36",
+	trigger: "_trigger_9g7i6_41",
+	middleAlignedInline: "_middleAlignedInline_9g7i6_50",
+	heading: "_heading_9g7i6_56",
+	headingIcon: "_headingIcon_9g7i6_62",
+	clickable: "_clickable_9g7i6_69",
+	option: "_option_9g7i6_73",
+	active: "_active_9g7i6_92",
+	disabled: "_disabled_9g7i6_97",
+	selected: "_selected_9g7i6_101",
+	optionContent: "_optionContent_9g7i6_108",
+	inline: "_inline_9g7i6_112",
+	icon: "_icon_9g7i6_117",
+	check: "_check_9g7i6_118",
+	text: "_text_9g7i6_144",
+	label: "_label_9g7i6_149",
+	description: "_description_9g7i6_160",
+	arrow: "_arrow_9g7i6_164",
+	divider: "_divider_9g7i6_168",
+	deprecatedSemanticIcon: "_deprecatedSemanticIcon_9g7i6_172",
+	buttonLabel: "_buttonLabel_9g7i6_180",
+	buttonCaret: "_buttonCaret_9g7i6_186",
+	component: "_component_9g7i6_190",
+	right: "_right_9g7i6_196",
+	actions: "_actions_9g7i6_201"
 };
 const Heading$3 = ({ label: e, onClick: t, icon: n, testId: r }) => /* @__PURE__ */ jsxs("div", {
 	onClick: (e) => e.stopPropagation(),
@@ -1064,33 +1023,24 @@ const DropDownMenu = ({ menu: e, width: t, disabled: n = !1, badgeTitle: r, badg
 		testId: g,
 		selected: S,
 		tabIndex: C
-	}), /* @__PURE__ */ jsx(CSSTransition, {
-		in: L,
-		timeout: 100,
-		classNames: {
-			enter: menu_module_default.enter,
-			enterActive: menu_module_default.enterActive
-		},
-		unmountOnExit: !0,
-		children: /* @__PURE__ */ jsx(Fragment$1, { children: L && U(/* @__PURE__ */ jsx("div", {
-			...H,
-			className: menu_module_default.layerContainer,
-			"data-testid": e.testId,
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ jsx(Layer$2, {
-				sections: M,
-				isNested: o,
-				width: t,
-				closeOnOptionClick: c,
-				close: l || z,
-				tree: u,
-				path: d,
-				maxHeight: h,
-				showAllButton: F,
-				testId: g && `${g}-layer`
-			})
-		})) })
-	})] });
+	}), L && U(/* @__PURE__ */ jsx("div", {
+		...H,
+		className: menu_module_default.layerContainer,
+		"data-testid": e.testId,
+		onClick: (e) => e.stopPropagation(),
+		children: /* @__PURE__ */ jsx(Layer$2, {
+			sections: M,
+			isNested: o,
+			width: t,
+			closeOnOptionClick: c,
+			close: l || z,
+			tree: u,
+			path: d,
+			maxHeight: h,
+			showAllButton: F,
+			testId: g && `${g}-layer`
+		})
+	}))] });
 }, Menu = (e) => e.contextMenu ? /* @__PURE__ */ jsx(ContextMenu, {
 	...e,
 	tree: {},
@@ -1760,37 +1710,22 @@ const FileInput = ({ label: e = "Select", loading: t = !1, placeholder: n = "No
 	}, [e]), n ? createPortal(t, n) : null;
 };
 var modal_module_default = {
-	wrapper: "_wrapper_1sv3a_1",
-	enter: "_enter_1sv3a_15",
-	enterActive: "_enterActive_1sv3a_18",
-	exit: "_exit_1sv3a_22",
-	exitActive: "_exitActive_1sv3a_25",
-	contentContainer: "_contentContainer_1sv3a_29",
-	centered: "_centered_1sv3a_52",
-	newLine: "_newLine_1sv3a_56"
-}, Wrapper = ({ children: e, visible: t }) => {
-	let n = useRef(null);
+	wrapper: "_wrapper_sb0hc_1",
+	contentContainer: "_contentContainer_sb0hc_15",
+	centered: "_centered_sb0hc_24",
+	newLine: "_newLine_sb0hc_28"
+}, Wrapper = ({ children: e }) => {
+	let t = useRef(null);
 	return useEffect(() => {
-		if (n.current) {
-			let e = n.current.querySelector("[tabindex=\"0\"]");
-			e ? e.focus() : n.current.focus();
+		if (t.current) {
+			let e = t.current.querySelector("[tabindex=\"0\"]");
+			e ? e.focus() : t.current.focus();
 		}
-	}, []), /* @__PURE__ */ jsx(CSSTransition, {
-		in: t,
-		timeout: 100,
-		classNames: {
-			enter: modal_module_default.enter,
-			enterActive: modal_module_default.enterActive,
-			exit: modal_module_default.exit,
-			exitActive: modal_module_default.exitActive
-		},
-		unmountOnExit: !0,
-		children: /* @__PURE__ */ jsx("div", {
-			ref: n,
-			tabIndex: -1,
-			className: cx(modal_module_default.wrapper),
-			children: e
-		})
+	}, []), /* @__PURE__ */ jsx("div", {
+		ref: t,
+		tabIndex: -1,
+		className: cx(modal_module_default.wrapper),
+		children: e
 	});
 }, Content$2 = ({ children: e, width: t, centered: n }) => /* @__PURE__ */ jsx("div", {
 	className: cx(modal_module_default.contentContainer, n ? modal_module_default.centered : ""),
@@ -1809,17 +1744,14 @@ const Modal = ({ children: e, visible: t = !1, centered: n = !1, width: r = "100
 		t && i && i();
 	}, [t, i]), useKeyboardEvent("Escape", () => {
 		t && a && a();
-	}, [t, a]), /* @__PURE__ */ jsx(Portal, {
+	}, [t, a]), /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Portal, {
 		id: o,
-		children: /* @__PURE__ */ jsx(Wrapper, {
-			visible: t,
-			children: /* @__PURE__ */ jsx(Content$2, {
-				width: r,
-				centered: n,
-				children: e
-			})
-		})
-	});
+		children: t ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, {
+			width: r,
+			centered: n,
+			children: e
+		}) }) : null
+	}) });
 };
 var progress_bar_module_default = {
 	progress: "_progress_23ror_1",
@@ -2034,13 +1966,10 @@ var reducer$1 = (e, t) => {
 	className: cx(message_module_default.legendToggle),
 	onClick: n,
 	children: t ? "Hide details" : "Show details"
-}), /* @__PURE__ */ jsx(Collapse, {
-	expanded: t,
-	children: /* @__PURE__ */ jsx("div", {
-		className: message_module_default.detailsText,
-		children: e
-	})
-})] }), DialogIcon = ({ type: e }) => {
+}), t ? /* @__PURE__ */ jsx("div", {
+	className: message_module_default.detailsText,
+	children: e
+}) : null] }), DialogIcon = ({ type: e }) => {
 	switch (e) {
 		case MessageType.SUCCESS: return /* @__PURE__ */ jsx(Icon, {
 			icon: IconType.SUCCESS,
@@ -2225,22 +2154,20 @@ const useWindowWidth = () => {
 	}), []), e;
 };
 var custom_select_module_default = {
-	layerContainer: "_layerContainer_q5iac_1",
-	layer: "_layer_q5iac_1",
-	enter: "_enter_q5iac_14",
-	enterActive: "_enterActive_q5iac_18",
-	small: "_small_q5iac_32",
-	heading: "_heading_q5iac_35",
-	option: "_option_q5iac_36",
-	message: "_message_q5iac_37",
-	focused: "_focused_q5iac_76",
-	selected: "_selected_q5iac_80",
-	disabled: "_disabled_q5iac_83",
-	check: "_check_q5iac_87",
-	optionContent: "_optionContent_q5iac_104",
-	label: "_label_q5iac_109",
-	icon: "_icon_q5iac_116",
-	details: "_details_q5iac_121"
+	layerContainer: "_layerContainer_41zze_1",
+	layer: "_layer_41zze_1",
+	small: "_small_41zze_23",
+	heading: "_heading_41zze_26",
+	option: "_option_41zze_27",
+	message: "_message_41zze_28",
+	focused: "_focused_41zze_67",
+	selected: "_selected_41zze_71",
+	disabled: "_disabled_41zze_74",
+	check: "_check_41zze_78",
+	optionContent: "_optionContent_41zze_95",
+	label: "_label_41zze_100",
+	icon: "_icon_41zze_107",
+	details: "_details_41zze_112"
 };
 const Heading$2 = ({ label: e }) => /* @__PURE__ */ jsx("div", {
 	onClick: (e) => e.stopPropagation(),
@@ -2783,36 +2710,27 @@ const useCustomSelectLogic = ({ state: e, dispatch: t, options: n, setTriggerFoc
 			placeholder: u,
 			right: w,
 			testId: T
-		}), /* @__PURE__ */ jsx(CSSTransition, {
-			in: M.isLayerOpen,
-			timeout: 100,
-			classNames: {
-				enter: custom_select_module_default.enter,
-				enterActive: custom_select_module_default.enterActive
-			},
-			unmountOnExit: !0,
-			children: /* @__PURE__ */ jsx(Fragment$1, { children: M.isLayerOpen && H(/* @__PURE__ */ jsx("div", {
-				...U,
-				className: custom_select_module_default.layerContainer,
-				children: /* @__PURE__ */ jsx(Layer$1, {
-					listRef: O,
-					isMulti: t,
-					sections: M.visibleOptions,
-					selectedOptions: c,
-					onSelectOption: (e, n) => {
-						G(e, n, t ? void 0 : W);
-					},
-					closeLayer: () => {
-						b && W();
-					},
-					width: K(q),
-					small: d,
-					focusedOptionIndex: M.layerFocus.current,
-					firstSelectedOptionIndex: C ?? 0,
-					testId: T && `${T}-layer`
-				})
-			})) })
-		})]
+		}), M.isLayerOpen && H(/* @__PURE__ */ jsx("div", {
+			...U,
+			className: custom_select_module_default.layerContainer,
+			children: /* @__PURE__ */ jsx(Layer$1, {
+				listRef: O,
+				isMulti: t,
+				sections: M.visibleOptions,
+				selectedOptions: c,
+				onSelectOption: (e, n) => {
+					G(e, n, t ? void 0 : W);
+				},
+				closeLayer: () => {
+					b && W();
+				},
+				width: K(q),
+				small: d,
+				focusedOptionIndex: M.layerFocus.current,
+				firstSelectedOptionIndex: C ?? 0,
+				testId: T && `${T}-layer`
+			})
+		}))]
 	});
 }, isEmptyNullOrUndefined = (e) => e == null || e === "", isNumericLike = (e) => /^-?\d+(\.\d+)?$/.test(e.trim()), isMulti = (e) => e instanceof Array, standardizeOptions = (e, t) => t && Array.isArray(e) ? e.map((e) => typeof e == "string" || typeof e == "number" ? {
 	label: e,
@@ -3409,11 +3327,9 @@ const Slider = ({ name: e, label: t, width: n = "100%", labelWidth: r = "auto",
 	});
 }, ActionsCell = ({ cell: e }) => /* @__PURE__ */ jsx(Actions, { actions: e.actions });
 var popover_module_default = {
-	toggleBox: "_toggleBox_rwod1_1",
-	enter: "_enter_rwod1_8",
-	enterActive: "_enterActive_rwod1_12",
-	fullWidthStyleFix: "_fullWidthStyleFix_rwod1_17",
-	dismiss: "_dismiss_rwod1_22"
+	toggleBox: "_toggleBox_lhie5_1",
+	fullWidthStyleFix: "_fullWidthStyleFix_lhie5_8",
+	dismiss: "_dismiss_lhie5_13"
 };
 const Popover = ({ children: t, content: n, placement: r = "top-center", closeOnOutsideClick: i = !0, fullWidth: a = !1, showCloseButton: o = !1, testId: l, disabled: u = !1, overflowContainer: d = !1, isOpen: f, onToggle: p }) => {
 	let h = useContext(DisabledContext), [_, v] = f === void 0 ? useState(!1) : [f, p], y = () => {
@@ -3438,34 +3354,25 @@ const Popover = ({ children: t, content: n, placement: r = "top-center", closeOn
 		onClick: b,
 		"data-testid": l,
 		children: t
-	}), /* @__PURE__ */ jsx(CSSTransition, {
-		in: _,
-		timeout: 100,
-		classNames: {
-			enter: popover_module_default.enter,
-			enterActive: popover_module_default.enterActive
-		},
-		unmountOnExit: !0,
-		children: /* @__PURE__ */ jsx(Fragment$1, { children: _ && x(/* @__PURE__ */ jsxs("div", {
-			className: a ? cx(popover_module_default.toggleBox, popover_module_default.fullWidthStyleFix) : cx(popover_module_default.toggleBox),
-			...C,
-			children: [/* @__PURE__ */ jsxs("div", { children: [React.isValidElement(n) ? React.cloneElement(n, { close: y }) : n, o && /* @__PURE__ */ jsx("div", {
-				className: popover_module_default.dismiss,
-				children: /* @__PURE__ */ jsx(Button, {
-					small: !0,
-					round: !0,
-					onClick: y,
-					icon: IconType.CLOSE
-				})
-			})] }), /* @__PURE__ */ jsx(Arrow, {
-				...S,
-				backgroundColor: "var(--color-background-layer)",
-				borderColor: "var(--color-border)",
-				borderWidth: 1,
-				size: 6
-			})]
-		})) })
-	})] });
+	}), _ && x(/* @__PURE__ */ jsxs("div", {
+		className: a ? cx(popover_module_default.toggleBox, popover_module_default.fullWidthStyleFix) : cx(popover_module_default.toggleBox),
+		...C,
+		children: [/* @__PURE__ */ jsxs("div", { children: [React.isValidElement(n) ? React.cloneElement(n, { close: y }) : n, o && /* @__PURE__ */ jsx("div", {
+			className: popover_module_default.dismiss,
+			children: /* @__PURE__ */ jsx(Button, {
+				small: !0,
+				round: !0,
+				onClick: y,
+				icon: IconType.CLOSE
+			})
+		})] }), /* @__PURE__ */ jsx(Arrow, {
+			...S,
+			backgroundColor: "var(--color-background-layer)",
+			borderColor: "var(--color-border)",
+			borderWidth: 1,
+			size: 6
+		})]
+	}))] });
 }, CellHelpIcon = ({ cell: e }) => {
 	let { helpIcon: t } = e;
 	return t ? /* @__PURE__ */ jsx("div", {
@@ -6689,7 +6596,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 	} : {
 		value: G,
 		unit: U
-	}), Nd = k || K?.value === void 0, [J, Pd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), Fd = !!(O || n), Y = C && C.find((e) => {
+	}), Ad = k || K?.value === void 0, [J, jd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), Md = !!(O || n), Y = C && C.find((e) => {
 		if (!e?.value) return;
 		if (E) return E === e.valueKey;
 		let t = isValueWithUnit(e.value) ? getUnit(e.value) : "", { value: n = l } = convertUnit({
@@ -6698,7 +6605,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			toUnit: t
 		});
 		return withUnit(n, t) === e.value;
-	}), Id = () => {
+	}), Nd = () => {
 		let e = l ?? "", t = K.unit;
 		if (checkConversion({
 			value: e,
@@ -6712,7 +6619,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 				return null;
 			}
 		} else return getAltUnitsListByQuantity(u)?.map((e) => ["", e?.unit]);
-	}, Ld = (t) => {
+	}, Pd = (t) => {
 		let n = getStringName(e), r = t.target, { value: i, selectionStart: a } = r, o = withUnit(i, K?.unit || ""), s = A ? withUnit(convertAndGetValue(o, B), B) : o;
 		h({ target: {
 			value: s,
@@ -6725,7 +6632,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		}), R(() => {
 			r.selectionStart = a, r.selectionEnd = a;
 		});
-	}, Rd = (e, t) => {
+	}, Fd = (e, t) => {
 		t === K.unit || isNaN(Number(e)) || (q({
 			value: e,
 			unit: t
@@ -6756,7 +6663,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			e !== void 0 && q({
 				value: e,
 				unit: t
-			}), C && Pd(Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
+			}), C && jd(Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
 		}
 	}, [
 		U,
@@ -6764,7 +6671,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		i,
 		T
 	]);
-	let X = Id(), Z = label(K.unit) || K.unit || "", zd = p || !X || X && X.length === 1, Q = getStringName(e), $, Bd = (t) => {
+	let X = Nd(), Z = label(K.unit) || K.unit || "", Id = p || !X || X && X.length === 1, Q = getStringName(e), $, Ld = (t) => {
 		let r = t?.value ? t.value : "", [i = "", a = ""] = isValueWithUnit(r) ? split(r) : [r], o = withPrettyUnitLabel(r);
 		if (checkConversion({
 			value: r,
@@ -6784,7 +6691,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			type: MenuType.OPTION,
 			inline: !0,
 			onClick: () => {
-				validateNumber(i).valid && !n && (Pd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
+				validateNumber(i).valid && !n && (jd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
 					value: r,
 					name: typeof e == "string" ? e : e?.fieldName || "",
 					predefinedSelected: !0,
@@ -6811,10 +6718,10 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		label: "Custom",
 		selected: J === PredefinedOptionsMenuState.CUSTOM
 	}], C?.length) {
-		let e = C.map(Bd);
+		let e = C.map(Ld);
 		$ = [...$, ...e];
 	}
-	let Vd = (e) => {
+	let Rd = (e) => {
 		if (isValueWithUnit(e)) {
 			let t = getUnit(e), { value: n } = safeConvertValue({
 				value: e,
@@ -6826,7 +6733,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			return n;
 		}
 		return e;
-	}, Hd = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, Ud = !F || F === GroupOrder.LAST ? GroupOrder.LAST : GroupOrder.MIDDLE;
+	}, zd = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, Bd = !F || F === GroupOrder.LAST ? GroupOrder.LAST : GroupOrder.MIDDLE;
 	return /* @__PURE__ */ jsx("div", {
 		className: J === PredefinedOptionsMenuState.PREDEFINED ? cx(unit_input_module_default.predefinedMenuActive) : "",
 		children: /* @__PURE__ */ jsxs(InputGroup, {
@@ -6858,31 +6765,31 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 						name: Q,
 						testId: x,
 						disabled: n,
-						placeholder: Vd(t),
+						placeholder: Rd(t),
 						value: K.value,
-						onChange: Ld,
+						onChange: Pd,
 						onFocus: v,
 						error: i === null ? void 0 : i,
 						warning: S === null ? void 0 : S,
 						left: a,
-						allowEmpty: Nd,
+						allowEmpty: Ad,
 						validationCallback: (e, t) => D(Q, t),
 						enableCosmeticRounding: j,
 						enableDisplayRounding: M,
 						roundDisplayValue: N,
-						groupOrder: Hd,
-						disableInternalErrorValidationMessages: Fd,
+						groupOrder: zd,
+						disableInternalErrorValidationMessages: Md,
 						small: o,
 						selectOnFocus: P,
 						tooltip: I
 					}, Q)
 				}),
-				Z && (zd || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
-					groupOrder: Ud,
+				Z && (Id || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
+					groupOrder: Bd,
 					small: o,
 					children: Z
 				}) : /* @__PURE__ */ jsx(Menu, {
-					groupOrder: Ud,
+					groupOrder: Bd,
 					maxHeight: 380,
 					disabled: r,
 					testId: x && `${x}-menu`,
@@ -6898,7 +6805,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 								label: j ? safeRoundNumbers(i) : i,
 								inline: !0,
 								onClick: (n) => {
-									n.stopPropagation(), Rd(e, t);
+									n.stopPropagation(), Fd(e, t);
 								},
 								description: r,
 								selected: r === Z,
@@ -8523,7 +8430,7 @@ const countDeltas = (e) => (Array.isArray(e) ? e : e ? [e] : []).reduce((e, t) =
 		if (i) return i;
 	}
 	return "";
-}, toText = (e) => e && typeof e == "object" && !Array.isArray(e) ? Object.keys(e).length === 0 ? "" : "Multiple changes..." : String(e), defaultMessage = (e) => {
+}, toText = (e) => Array.isArray(e) ? e.length === 0 ? "" : e.some((e) => e && typeof e == "object") ? "Multiple changes..." : String(e) : e && typeof e == "object" ? Object.keys(e).length === 0 ? "" : "Multiple changes..." : String(e), defaultMessage = (e) => {
 	switch (e.length) {
 		case 1: {
 			let [t] = e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "5.8.10-beta-1",
+  "version": "5.8.10-beta-3",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {
@@ -81,7 +81,6 @@
     "react-router-dom": "^7.2.0",
     "react-svg": "^16.3.0",
     "react-toastify": "^9.1.3",
-    "react-transition-group": "^4.4.5",
     "react-window": "^1.8.11",
     "remirror": "^2.0.31",
     "resize-observer-polyfill": "^1.5.1",
@@ -111,7 +110,6 @@
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/react-redux": "^7.1.34",
-    "@types/react-transition-group": "^4.4.12",
     "@types/seamless-immutable": "^7.1.19",
     "@typescript-eslint/eslint-plugin": "^8.26.0",
     "@typescript-eslint/parser": "^8.26.0",