@oliasoft-open-source/react-ui-library 5.10.0 → 5.11.1-beta-1

package/dist/index.js

@@ -5,6 +5,7 @@ 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, every, get, isArray, isBoolean, isEmpty, isEqual, isFunction, isNil, isNumber, isObject, isPlainObject, isString, keys, noop, set, toLower, toNumber, values } from "es-toolkit/compat";
@@ -50,8 +51,8 @@ let TriggerType = /* @__PURE__ */ function(e) {
 	return e.TEXT = "text", e.RADIO = "radio", e.CHECKBOX = "checkbox", e;
 }({});
 var chevron_module_default = {
-	chevron: "_chevron_1kw4m_1",
-	expanded: "_expanded_1kw4m_9"
+	chevron: "_chevron_dd6mn_1",
+	expanded: "_expanded_dd6mn_9"
 };
 const DisabledContext = React.createContext(!1);
 var icon_module_default = {
@@ -253,22 +254,57 @@ var accordion_module_default = {
 	expanded: "_expanded_15p8j_36",
 	padding: "_padding_15p8j_44",
 	squareBottom: "_squareBottom_15p8j_47"
-};
-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 : ""),
-		onClick: o,
-		"data-testid": s,
-		children: [/* @__PURE__ */ jsx(Chevron, { expanded: t }), /* @__PURE__ */ jsx("div", {
-			className: accordion_module_default.heading,
-			children: e
+}, 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 }) => {
+	let n = useRef(null);
+	return /* @__PURE__ */ jsx(CSSTransition, {
+		nodeRef: n,
+		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", {
+			ref: n,
+			className: collapse_module_default.collapse,
+			children: /* @__PURE__ */ jsx("div", {
+				className: collapse_module_default.collapseInner,
+				children: /* @__PURE__ */ jsx("div", { children: t && e })
+			})
+		})
+	});
+}, AccordionBase = ({ heading: e, expanded: t = !1, bordered: n = !1, padding: r = !0, children: i, squareBottom: a = !1, onClick: o, testId: s }) => {
+	let c = t && !!i;
+	return /* @__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 : ""),
+			onClick: o,
+			"data-testid": s,
+			children: [/* @__PURE__ */ jsx(Chevron, { expanded: t }), /* @__PURE__ */ jsx("div", {
+				className: accordion_module_default.heading,
+				children: e
+			})]
+		}), /* @__PURE__ */ jsx(Collapse, {
+			expanded: c,
+			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 }) => {
+	});
+}, AccordionManaged = ({ heading: t, bordered: n, padding: r, expanded: i = !1, children: a, testId: o }) => {
 	let [s, c] = React.useState(i);
 	return /* @__PURE__ */ jsx(AccordionBase, {
 		heading: t,
@@ -586,35 +622,37 @@ var actions_module_default = {
 	actionComponentContainer: "_actionComponentContainer_1t7vd_14",
 	active: "_active_1t7vd_36"
 }, menu_module_default = {
-	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"
+	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"
 };
 const Heading$3 = ({ label: e, onClick: t, icon: n, testId: r }) => /* @__PURE__ */ jsxs("div", {
 	onClick: (e) => e.stopPropagation(),
@@ -978,69 +1016,82 @@ var isMenuEmpty = (e) => {
 		}), y]
 	});
 };
-const DropDownMenu = ({ menu: e, width: t, disabled: n = !1, badgeTitle: r, badgeDot: i = !1, loading: a = !1, isNested: o = !1, closeOnOptionClick: c = !0, closeParent: l, tree: u, path: d, groupOrder: f, overflowContainer: p = !0, maxHeight: h, testId: g, open: _, setOpen: v, tooltip: y, error: b, warning: x, selected: S, tabIndex: C, active: w }) => {
-	let T = useContext(DisabledContext), { label: E, title: D, trigger: O, fullHeightTrigger: k, colored: A, small: j, sections: M, component: N, placement: P, showAllButton: F, possiblePlacements: I = ["bottom-start", "top-start"] } = e, [L, R] = isBoolean(_) && isFunction(v) ? [_, v] : useState(!1), z = () => R(!1), B = () => R(!0), { triggerProps: V, layerProps: H, renderLayer: U } = useLayer({
-		isOpen: L,
-		...placementOptions$1(P, o),
-		possiblePlacements: I,
+const DropDownMenu = ({ menu: e, width: t, disabled: n = !1, badgeTitle: r, badgeDot: i = !1, loading: a = !1, isNested: o = !1, closeOnOptionClick: c = !0, closeParent: l, tree: u, path: d, groupOrder: f, overflowContainer: h = !0, maxHeight: g, testId: _, open: v, setOpen: y, tooltip: b, error: x, warning: S, selected: C, tabIndex: w, active: T }) => {
+	let E = useContext(DisabledContext), D = useRef(null), { label: O, title: k, trigger: A, fullHeightTrigger: j, colored: M, small: N, sections: P, component: F, placement: I, showAllButton: L, possiblePlacements: R = ["bottom-start", "top-start"] } = e, [z, B] = isBoolean(v) && isFunction(y) ? [v, y] : useState(!1), V = () => B(!1), H = () => B(!0), { triggerProps: U, layerProps: W, renderLayer: G } = useLayer({
+		isOpen: z,
+		...placementOptions$1(I, o),
+		possiblePlacements: R,
 		ResizeObserver: ResizeObserver$1,
-		onOutsideClick: z,
-		overflowContainer: p,
-		onParentClose: z
-	}), W = n || isMenuEmpty(e) || T;
-	return registerClose(u, d, z), /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Trigger$1, {
-		ref: V.ref,
-		isDisabled: W,
+		onOutsideClick: V,
+		overflowContainer: h,
+		onParentClose: V
+	}), K = n || isMenuEmpty(e) || E;
+	return registerClose(u, d, V), /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Trigger$1, {
+		ref: U.ref,
+		isDisabled: K,
 		badgeTitle: r,
 		badgeDot: i,
 		loading: a,
 		width: t,
-		fullHeight: k,
-		trigger: O,
-		label: E,
-		title: D,
+		fullHeight: j,
+		trigger: A,
+		label: O,
+		title: k,
 		onClickTrigger: () => {
-			if (!W) {
-				if (L) {
-					z();
+			if (!K) {
+				if (z) {
+					V();
 					return;
 				}
 				siblings(u, d).forEach((e) => {
 					e.close && e.close();
-				}), B();
+				}), H();
 			}
 		},
-		colored: A,
-		small: j,
+		colored: M,
+		small: N,
 		isNested: o,
-		component: N,
+		component: F,
 		groupOrder: f,
-		isOpen: L,
-		active: w,
-		tooltip: y,
-		error: b,
-		warning: x,
-		testId: g,
-		selected: S,
-		tabIndex: C
-	}), 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`
-		})
-	}))] });
+		isOpen: z,
+		active: T,
+		tooltip: b,
+		error: x,
+		warning: S,
+		testId: _,
+		selected: C,
+		tabIndex: w
+	}), /* @__PURE__ */ jsx(CSSTransition, {
+		nodeRef: D,
+		in: z,
+		timeout: 100,
+		classNames: {
+			enter: menu_module_default.enter,
+			enterActive: menu_module_default.enterActive
+		},
+		unmountOnExit: !0,
+		children: /* @__PURE__ */ jsx(Fragment$1, { children: z && G(/* @__PURE__ */ jsx("div", {
+			...W,
+			ref: (e) => {
+				D.current = e, W.ref(e);
+			},
+			className: menu_module_default.layerContainer,
+			"data-testid": e.testId,
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(Layer$2, {
+				sections: P,
+				isNested: o,
+				width: t,
+				closeOnOptionClick: c,
+				close: l || V,
+				tree: u,
+				path: d,
+				maxHeight: g,
+				showAllButton: L,
+				testId: _ && `${_}-layer`
+			})
+		})) })
+	})] });
 }, Menu = (e) => e.contextMenu ? /* @__PURE__ */ jsx(ContextMenu, {
 	...e,
 	tree: {},
@@ -1710,22 +1761,38 @@ const FileInput = ({ label: e = "Select", loading: t = !1, placeholder: n = "No
 	}, [e]), n ? createPortal(t, n) : null;
 };
 var modal_module_default = {
-	wrapper: "_wrapper_sb0hc_1",
-	contentContainer: "_contentContainer_sb0hc_15",
-	centered: "_centered_sb0hc_24",
-	newLine: "_newLine_sb0hc_28"
-}, Wrapper = ({ children: e }) => {
-	let t = useRef(null);
+	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);
 	return useEffect(() => {
-		if (t.current) {
-			let e = t.current.querySelector("[tabindex=\"0\"]");
-			e ? e.focus() : t.current.focus();
+		if (n.current) {
+			let e = n.current.querySelector("[tabindex=\"0\"]");
+			e ? e.focus() : n.current.focus();
 		}
-	}, []), /* @__PURE__ */ jsx("div", {
-		ref: t,
-		tabIndex: -1,
-		className: cx(modal_module_default.wrapper),
-		children: e
+	}, []), /* @__PURE__ */ jsx(CSSTransition, {
+		nodeRef: n,
+		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: t && e
+		})
 	});
 }, Content$2 = ({ children: e, width: t, centered: n }) => /* @__PURE__ */ jsx("div", {
 	className: cx(modal_module_default.contentContainer, n ? modal_module_default.centered : ""),
@@ -1744,14 +1811,17 @@ 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(Fragment$1, { children: /* @__PURE__ */ jsx(Portal, {
+	}, [t, a]), /* @__PURE__ */ jsx(Portal, {
 		id: o,
-		children: t ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, {
-			width: r,
-			centered: n,
-			children: e
-		}) }) : null
-	}) });
+		children: /* @__PURE__ */ jsx(Wrapper, {
+			visible: t,
+			children: /* @__PURE__ */ jsx(Content$2, {
+				width: r,
+				centered: n,
+				children: e
+			})
+		})
+	});
 };
 var progress_bar_module_default = {
 	progress: "_progress_23ror_1",
@@ -1966,10 +2036,13 @@ var reducer$1 = (e, t) => {
 	className: cx(message_module_default.legendToggle),
 	onClick: n,
 	children: t ? "Hide details" : "Show details"
-}), t ? /* @__PURE__ */ jsx("div", {
-	className: message_module_default.detailsText,
-	children: e
-}) : null] }), DialogIcon = ({ type: e }) => {
+}), /* @__PURE__ */ jsx(Collapse, {
+	expanded: t,
+	children: /* @__PURE__ */ jsx("div", {
+		className: message_module_default.detailsText,
+		children: e
+	})
+})] }), DialogIcon = ({ type: e }) => {
 	switch (e) {
 		case MessageType.SUCCESS: return /* @__PURE__ */ jsx(Icon, {
 			icon: IconType.SUCCESS,
@@ -2154,20 +2227,22 @@ const useWindowWidth = () => {
 	}), []), e;
 };
 var custom_select_module_default = {
-	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"
+	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"
 };
 const Heading$2 = ({ label: e }) => /* @__PURE__ */ jsx("div", {
 	onClick: (e) => e.stopPropagation(),
@@ -2659,7 +2734,7 @@ const useCustomSelectLogic = ({ state: e, dispatch: t, options: n, setTriggerFoc
 		triggerBounds: k
 	};
 }, CustomSelect = (e) => {
-	let { multi: t = !1, disabled: n = !1, error: r = null, warning: i = null, tooltip: a = null, options: o, selectedOptions: c, onCreate: l = null, placeholder: u = "", small: d = !1, tabIndex: m = 0, onFocus: h = () => {}, onBlur: g = () => {}, searchable: _ = !0, clearable: v = !1, maxTooltipWidth: y, closeOnOptionActionClick: b, isInTable: x = !1, groupOrder: S, firstSelectedOptionIndex: C = 0, right: w = !1, testId: T = void 0 } = e, E = useContext(DisabledContext), D = l !== null, O = useRef(null), [k, A] = useFocus(), j = useFontsReady(), [M, N] = useReducer(reducer, {
+	let { multi: t = !1, disabled: n = !1, error: r = null, warning: i = null, tooltip: a = null, options: o, selectedOptions: c, onCreate: l = null, placeholder: u = "", small: d = !1, tabIndex: m = 0, onFocus: h = () => {}, onBlur: g = () => {}, searchable: _ = !0, clearable: v = !1, maxTooltipWidth: y, closeOnOptionActionClick: b, isInTable: x = !1, groupOrder: S, firstSelectedOptionIndex: C = 0, right: w = !1, testId: T = void 0 } = e, E = useContext(DisabledContext), D = l !== null, O = useRef(null), k = useRef(null), [A, j] = useFocus(), M = useFontsReady(), [N, P] = useReducer(reducer, {
 		options: o,
 		firstSelectedOptionIndex: C
 	}, ({ options: e }) => ({
@@ -2668,29 +2743,29 @@ const useCustomSelectLogic = ({ state: e, dispatch: t, options: n, setTriggerFoc
 		layerFocus: initialLayerFocus(e, C ?? 0),
 		triggerFocus: initialTriggerFocus,
 		isLayerOpen: !1
-	})), { getTriggerWidth: P, onKeyEvent: F, clearAllIsFocused: I, triggerProps: L, onClickTrigger: R, onChangeSearch: z, onClickDeselectOption: B, onClickClearAll: V, renderLayer: H, layerProps: U, closeLayer: W, onSelectOption: G, getLayerWidth: K, triggerBounds: q } = useCustomSelectLogic({
+	})), { getTriggerWidth: F, onKeyEvent: I, clearAllIsFocused: L, triggerProps: R, onClickTrigger: z, onChangeSearch: B, onClickDeselectOption: V, onClickClearAll: H, renderLayer: U, layerProps: W, closeLayer: G, onSelectOption: K, getLayerWidth: q, triggerBounds: Ld } = useCustomSelectLogic({
 		...e,
-		state: M,
-		dispatch: N,
-		setTriggerFocus: A,
+		state: N,
+		dispatch: P,
+		setTriggerFocus: j,
 		disabledContext: E,
-		isFontLoaded: j,
+		isFontLoaded: M,
 		createAble: D,
 		listRef: O
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		style: { width: P() },
+		style: { width: F() },
 		onKeyDown: (e) => {
-			Object.values(EventKey).includes(e.key) && F(e.key, e);
+			Object.values(EventKey).includes(e.key) && I(e.key, e);
 		},
 		children: [/* @__PURE__ */ jsx(Trigger, {
 			selectedOptions: c,
-			searchValue: M.searchValue,
-			isOpen: M.isLayerOpen,
-			focusedSelectedOptionIndex: M.triggerFocus.currentOption,
-			clearAllIsFocused: I,
+			searchValue: N.searchValue,
+			isOpen: N.isLayerOpen,
+			focusedSelectedOptionIndex: N.triggerFocus.currentOption,
+			clearAllIsFocused: L,
 			searchable: _,
-			triggerRef: mergeRefs(k, L.ref),
+			triggerRef: mergeRefs(A, R.ref),
 			error: r,
 			warning: i,
 			tooltip: a,
@@ -2699,10 +2774,10 @@ const useCustomSelectLogic = ({ state: e, dispatch: t, options: n, setTriggerFoc
 			disabled: n || E,
 			clearable: v,
 			tabIndex: m,
-			onClickTrigger: R,
-			onChangeSearch: z,
-			onClickDeselect: B,
-			onClickClear: V,
+			onClickTrigger: z,
+			onChangeSearch: B,
+			onClickDeselect: V,
+			onClickClear: H,
 			onFocus: h,
 			onBlur: g,
 			groupOrder: S,
@@ -2710,27 +2785,40 @@ const useCustomSelectLogic = ({ state: e, dispatch: t, options: n, setTriggerFoc
 			placeholder: u,
 			right: w,
 			testId: T
-		}), 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();
+		}), /* @__PURE__ */ jsx(CSSTransition, {
+			nodeRef: k,
+			in: N.isLayerOpen,
+			timeout: 100,
+			classNames: {
+				enter: custom_select_module_default.enter,
+				enterActive: custom_select_module_default.enterActive
+			},
+			unmountOnExit: !0,
+			children: /* @__PURE__ */ jsx(Fragment$1, { children: N.isLayerOpen && U(/* @__PURE__ */ jsx("div", {
+				...W,
+				ref: (e) => {
+					k.current = e, W.ref(e);
 				},
-				width: K(q),
-				small: d,
-				focusedOptionIndex: M.layerFocus.current,
-				firstSelectedOptionIndex: C ?? 0,
-				testId: T && `${T}-layer`
-			})
-		}))]
+				className: custom_select_module_default.layerContainer,
+				children: /* @__PURE__ */ jsx(Layer$1, {
+					listRef: O,
+					isMulti: t,
+					sections: N.visibleOptions,
+					selectedOptions: c,
+					onSelectOption: (e, n) => {
+						K(e, n, t ? void 0 : G);
+					},
+					closeLayer: () => {
+						b && G();
+					},
+					width: q(Ld),
+					small: d,
+					focusedOptionIndex: N.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,
@@ -3327,52 +3415,67 @@ 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_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 = () => {
-		!u && !h && v && v(!1);
-	}, b = () => {
-		u || h || v && v(!_);
+	toggleBox: "_toggleBox_rwod1_1",
+	enter: "_enter_rwod1_8",
+	enterActive: "_enterActive_rwod1_12",
+	fullWidthStyleFix: "_fullWidthStyleFix_rwod1_17",
+	dismiss: "_dismiss_rwod1_22"
+};
+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: h }) => {
+	let _ = useContext(DisabledContext), v = useRef(null), [y, b] = f === void 0 ? useState(!1) : [f, h], x = () => {
+		!u && !_ && b && b(!1);
+	}, S = () => {
+		u || _ || b && b(!y);
 	};
 	useEffect(() => {
-		(u || h) && y();
-	}, [u, h]);
-	let { renderLayer: x, arrowProps: S, layerProps: C, triggerProps: w } = useLayer({
-		isOpen: _,
+		(u || _) && x();
+	}, [u, _]);
+	let { renderLayer: C, arrowProps: w, layerProps: T, triggerProps: E } = useLayer({
+		isOpen: y,
 		placement: r,
 		auto: !0,
 		triggerOffset: 6,
-		onOutsideClick: i ? y : void 0,
+		onOutsideClick: i ? x : void 0,
 		ResizeObserver: ResizeObserver$1,
 		overflowContainer: d
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		ref: w.ref,
-		onClick: b,
+		ref: E.ref,
+		onClick: S,
 		"data-testid": l,
 		children: t
-	}), _ && 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
-		})]
-	}))] });
+	}), /* @__PURE__ */ jsx(CSSTransition, {
+		nodeRef: v,
+		in: y,
+		timeout: 100,
+		classNames: {
+			enter: popover_module_default.enter,
+			enterActive: popover_module_default.enterActive
+		},
+		unmountOnExit: !0,
+		children: /* @__PURE__ */ jsx(Fragment$1, { children: y && C(/* @__PURE__ */ jsxs("div", {
+			className: a ? cx(popover_module_default.toggleBox, popover_module_default.fullWidthStyleFix) : cx(popover_module_default.toggleBox),
+			...T,
+			ref: (e) => {
+				v.current = e, T.ref(e);
+			},
+			children: [/* @__PURE__ */ jsxs("div", { children: [React.isValidElement(n) ? React.cloneElement(n, { close: x }) : n, o && /* @__PURE__ */ jsx("div", {
+				className: popover_module_default.dismiss,
+				children: /* @__PURE__ */ jsx(Button, {
+					small: !0,
+					round: !0,
+					onClick: x,
+					icon: IconType.CLOSE
+				})
+			})] }), /* @__PURE__ */ jsx(Arrow, {
+				...w,
+				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", {
@@ -5324,13 +5427,19 @@ const ToggleNarrow = ({ toggleNarrow: e, onClickToggleNarrow: t }) => e ? /* @__
 }, MetaCount = ({ item: e }) => e.metaCount === void 0 ? null : /* @__PURE__ */ jsx(Badge, {
 	color: "rgba(0,0,0,0.25)",
 	title: e.metaCount
-}), ItemContent = ({ item: e, expanding: t }) => t && e.active && e.content ? /* @__PURE__ */ jsx("div", {
-	className: list_module_default.itemContent,
-	onClick: (e) => {
+}), ItemContent = ({ item: e, expanding: t }) => {
+	let n = (e) => {
 		e.preventDefault(), e.stopPropagation();
-	},
-	children: e.content
-}) : null, ListSubheading = forwardRef(({ item: e, index: t }, n) => {
+	}, r = !!t && !!e.active && !!e.content;
+	return /* @__PURE__ */ jsx(Collapse, {
+		expanded: r,
+		children: /* @__PURE__ */ jsx("div", {
+			className: list_module_default.itemContent,
+			onClick: n,
+			children: e.content
+		})
+	});
+}, ListSubheading = forwardRef(({ item: e, index: t }, n) => {
 	let r = useContext(DisabledContext), { actions: i, disabled: a, expanded: o, onClick: c, title: l, name: u, icon: d, testId: f } = e;
 	return /* @__PURE__ */ jsx("div", {
 		ref: (e) => {
@@ -6407,26 +6516,39 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 }, TreePlaceholder = ({ depth: e }) => /* @__PURE__ */ jsx("div", {
 	className: tree_module_default.placeholder,
 	style: { left: e * 24 }
-}), Tree = ({ list: e, draggable: t = !1, onListReorder: n, onChangeOpen: r, testId: i, isInitialOpen: a = !1, treeRef: o, itemHasChild: s, onItemToggle: c, icons: l, allowParentReassignment: u, stickyHeader: d, height: f }) => {
-	let p = (e) => {
+}), Tree = ({ list: e, draggable: t = !1, onListReorder: n, onChangeOpen: r, testId: i, isInitialOpen: a = !1, autoOpenActiveItems: o = !1, treeRef: s, itemHasChild: l, onItemToggle: u, icons: d, allowParentReassignment: f, stickyHeader: m, height: h }) => {
+	let g = s ?? useRef(null), _ = (e) => {
 		r && r(e);
-	}, m = (e, t) => e?.findIndex((e) => e?.id === t) ?? -1, h = (e, t) => {
-		let n = m(t, e?.parent);
+	}, v = (t) => {
+		let n = e.items.find((e) => e.id === t);
+		return n && n.parent ? [n.parent, ...v(n.parent)] : [];
+	};
+	useEffect(() => {
+		if (o) {
+			let t = e.items.find((e) => e.active);
+			if (t) {
+				let e = v(t.id);
+				g.current?.open(e);
+			}
+		}
+	}, [o, e.items]);
+	let y = (e, t) => e?.findIndex((e) => e?.id === t) ?? -1, b = (e, t) => {
+		let n = y(t, e?.parent);
 		if (n >= 0) {
 			let r = t?.find((e) => e?.id === t[n]?.parent);
 			e.parent = r ? r.id : 0;
 		}
-	}, g = (e, t) => t?.filter((t) => t?.id !== e?.id) ?? [], _ = (e, t, n) => (n?.splice(t, 0, e), n), v = (e) => e.map(({ id: e, parent: t, droppable: n, data: r }) => ({
+	}, x = (e, t) => t?.filter((t) => t?.id !== e?.id) ?? [], S = (e, t, n) => (n?.splice(t, 0, e), n), C = (e) => e.map(({ id: e, parent: t, droppable: n, data: r }) => ({
 		id: e,
 		parent: t,
 		droppable: n,
 		...r
-	})), y = (e, t) => {
+	})), w = (e, t) => {
 		let { dragSource: r, dropTarget: i } = t, a = [...e];
 		if (!n) return;
-		let o = m(a, r?.id), s = m(a, r?.parent), c = [];
-		r?.parent === i?.id && o === 0 && u && (h(r, a), a = g(r, a), a = _(r, s, a)), c = v(a), n(c);
-	}, b = e?.items?.map(({ id: e, droppable: t, parent: n, name: r, onDrop: i,...a }) => ({
+		let o = y(a, r?.id), s = y(a, r?.parent), c = [];
+		r?.parent === i?.id && o === 0 && f && (b(r, a), a = x(r, a), a = S(r, s, a)), c = C(a), n(c);
+	}, T = e?.items?.map(({ id: e, droppable: t, parent: n, name: r, onDrop: i,...a }) => ({
 		id: e,
 		text: r,
 		droppable: t,
@@ -6440,18 +6562,18 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": i,
 		className: list_module_default.list,
-		style: { height: f },
+		style: { height: h },
 		children: [e.name && !e.noHeader && /* @__PURE__ */ jsx(ListHeading, {
 			name: e.name,
 			actions: e.actions,
-			stickyHeader: d
+			stickyHeader: m
 		}), /* @__PURE__ */ jsx(DndProvider, {
 			backend: MultiBackend,
 			options: getBackendOptions(),
 			context: window,
 			children: /* @__PURE__ */ jsx(Tree$1, {
-				ref: o,
-				tree: b,
+				ref: g,
+				tree: T,
 				sort: !1,
 				insertDroppableFirst: !1,
 				canDrag: () => t,
@@ -6460,19 +6582,19 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 				},
 				rootId: 0,
 				render: (e, { depth: n, isOpen: r, onToggle: i, hasChild: a }) => /* @__PURE__ */ jsx(TreeItem, {
-					hasChild: s ? s(e) : a,
+					hasChild: l ? l(e) : a,
 					node: e,
 					depth: n,
 					isOpen: r,
 					onToggle: () => {
-						c?.(e, !r), i();
+						u?.(e, !r), i();
 					},
 					draggable: t,
-					icons: l,
+					icons: d,
 					onDrop: e.data?.onDrop
 				}),
-				onDrop: y,
-				onChangeOpen: p,
+				onDrop: w,
+				onChangeOpen: _,
 				dropTargetOffset: 10,
 				placeholderRender: (e, { depth: t }) => /* @__PURE__ */ jsx(TreePlaceholder, { depth: t }),
 				placeholderComponent: "div",
@@ -6611,7 +6733,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 	} : {
 		value: G,
 		unit: U
-	}), Pd = k || K?.value === void 0, [J, Fd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), Id = !!(O || n), Y = C && C.find((e) => {
+	}), Ld = k || K?.value === void 0, [J, Rd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), zd = !!(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({
@@ -6620,7 +6742,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			toUnit: t
 		});
 		return withUnit(n, t) === e.value;
-	}), Ld = () => {
+	}), Bd = () => {
 		let e = l ?? "", t = K.unit;
 		if (checkConversion({
 			value: e,
@@ -6634,7 +6756,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 				return null;
 			}
 		} else return getAltUnitsListByQuantity(u)?.map((e) => ["", e?.unit]);
-	}, Rd = (t) => {
+	}, Vd = (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,
@@ -6647,7 +6769,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		}), R(() => {
 			r.selectionStart = a, r.selectionEnd = a;
 		});
-	}, zd = (e, t) => {
+	}, Hd = (e, t) => {
 		t === K.unit || isNaN(Number(e)) || (q({
 			value: e,
 			unit: t
@@ -6678,7 +6800,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			e !== void 0 && q({
 				value: e,
 				unit: t
-			}), C && Fd(Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
+			}), C && Rd(Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
 		}
 	}, [
 		U,
@@ -6686,7 +6808,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		i,
 		T
 	]);
-	let X = Ld(), Z = label(K.unit) || K.unit || "", Bd = p || !X || X && X.length === 1, Q = getStringName(e), $, Vd = (t) => {
+	let X = Bd(), Z = label(K.unit) || K.unit || "", Ud = p || !X || X && X.length === 1, Q = getStringName(e), $, Wd = (t) => {
 		let r = t?.value ? t.value : "", [i = "", a = ""] = isValueWithUnit(r) ? split(r) : [r], o = withPrettyUnitLabel(r);
 		if (checkConversion({
 			value: r,
@@ -6706,7 +6828,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			type: MenuType.OPTION,
 			inline: !0,
 			onClick: () => {
-				validateNumber(i).valid && !n && (Fd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
+				validateNumber(i).valid && !n && (Rd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
 					value: r,
 					name: typeof e == "string" ? e : e?.fieldName || "",
 					predefinedSelected: !0,
@@ -6733,10 +6855,10 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		label: "Custom",
 		selected: J === PredefinedOptionsMenuState.CUSTOM
 	}], C?.length) {
-		let e = C.map(Vd);
+		let e = C.map(Wd);
 		$ = [...$, ...e];
 	}
-	let Hd = (e) => {
+	let Gd = (e) => {
 		if (isValueWithUnit(e)) {
 			let t = getUnit(e), { value: n } = safeConvertValue({
 				value: e,
@@ -6748,7 +6870,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			return n;
 		}
 		return e;
-	}, Ud = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, Wd = !F || F === GroupOrder.LAST ? GroupOrder.LAST : GroupOrder.MIDDLE;
+	}, Kd = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, qd = !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, {
@@ -6780,31 +6902,31 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 						name: Q,
 						testId: x,
 						disabled: n,
-						placeholder: Hd(t),
+						placeholder: Gd(t),
 						value: K.value,
-						onChange: Rd,
+						onChange: Vd,
 						onFocus: v,
 						error: i === null ? void 0 : i,
 						warning: S === null ? void 0 : S,
 						left: a,
-						allowEmpty: Pd,
+						allowEmpty: Ld,
 						validationCallback: (e, t) => D(Q, t),
 						enableCosmeticRounding: j,
 						enableDisplayRounding: M,
 						roundDisplayValue: N,
-						groupOrder: Ud,
-						disableInternalErrorValidationMessages: Id,
+						groupOrder: Kd,
+						disableInternalErrorValidationMessages: zd,
 						small: o,
 						selectOnFocus: P,
 						tooltip: I
 					}, Q)
 				}),
-				Z && (Bd || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
-					groupOrder: Wd,
+				Z && (Ud || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
+					groupOrder: qd,
 					small: o,
 					children: Z
 				}) : /* @__PURE__ */ jsx(Menu, {
-					groupOrder: Wd,
+					groupOrder: qd,
 					maxHeight: 380,
 					disabled: r,
 					testId: x && `${x}-menu`,
@@ -6820,7 +6942,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 								label: j ? safeRoundNumbers(i) : i,
 								inline: !0,
 								onClick: (n) => {
-									n.stopPropagation(), zd(e, t);
+									n.stopPropagation(), Hd(e, t);
 								},
 								description: r,
 								selected: r === Z,
@@ -8720,4 +8842,4 @@ const ComparisonViewModal = ({ auditLog: e, auditLogs: t, data: n, isOpen: r, se
 		}
 	});
 };
-export { Accordion, AccordionWithDefaultToggle, Actions, Align, AuditLog, Badge, Breadcrumb, BreadcrumbLinkType, Button, ButtonGroup, ButtonPosition, ButtonType, Card, CheckBox, Chevron, Color, Column, Dialog, DiffViewer, DisabledContext, Divider, Drawer, ElementType, Empty, Field, FileButton, FileInput, Flex, FormRow, Grid, GroupOrder, Heading, HelpIcon, Icon, IconType, Input, InputGroup, InputGroupAddon, InputReaderMethods, InputType, Label, List, ListHeading, ListSubheading, Loader, Menu, MenuCarat, MenuType, Message, MessageType, Modal, NativeSelect, NumberInput, OptionDropdown, Page, Pagination, PopConfirm, Popover, Portal, PrintHeader, ProgressBar, RadioButton, RichTextInput, Row, Select, SettingField, SideBar, Slider, SmartUploadModal, Spacer, Spinner, Table, TableImportExport, Tabs, Text, TextArea, TextLink, TextTransform, Theme, Toaster, Toggle, Tooltip, TopBar, Tree, TriggerType, UnitInput, UnitTable, UsageTracker, dismissToast, initializeContext, initializeGuiLibrary, readFile, toast, useFocus, useKeyboardEvent, useWindowWidth };
+export { Accordion, AccordionWithDefaultToggle, Actions, Align, AuditLog, Badge, Breadcrumb, BreadcrumbLinkType, Button, ButtonGroup, ButtonPosition, ButtonType, Card, CheckBox, Chevron, Collapse, Color, Column, Dialog, DiffViewer, DisabledContext, Divider, Drawer, ElementType, Empty, Field, FileButton, FileInput, Flex, FormRow, Grid, GroupOrder, Heading, HelpIcon, Icon, IconType, Input, InputGroup, InputGroupAddon, InputReaderMethods, InputType, Label, List, ListHeading, ListSubheading, Loader, Menu, MenuCarat, MenuType, Message, MessageType, Modal, NativeSelect, NumberInput, OptionDropdown, Page, Pagination, PopConfirm, Popover, Portal, PrintHeader, ProgressBar, RadioButton, RichTextInput, Row, Select, SettingField, SideBar, Slider, SmartUploadModal, Spacer, Spinner, Table, TableImportExport, Tabs, Text, TextArea, TextLink, TextTransform, Theme, Toaster, Toggle, Tooltip, TopBar, Tree, TriggerType, UnitInput, UnitTable, UsageTracker, dismissToast, initializeContext, initializeGuiLibrary, readFile, toast, useFocus, useKeyboardEvent, useWindowWidth };