@oliasoft-open-source/react-ui-library 5.8.0-beta-3 → 5.8.0-beta-5

package/dist/index.js

@@ -3502,87 +3502,77 @@ const Cell = ({ cell: e, isHeader: t, columnHeaderAlignment: n, columnAlignment:
 			testId: a
 		})
 	});
-}, Row$1 = ({ row: e, rowIndex: t, isHeader: n = !1, columnCount: r, colSpan: i, columnHeaderAlignments: a = [], columnAlignment: o = [], hasRowActions: s, draggableTable: l = !1, columnWidths: u, dropDisabled: d = !1, height: f, triggerScrollToActiveRow: p, testId: m }) => {
-	let h = getHeaderAlignment(a, n, t), { onRowClick: _, onRowFocus: v, onRowMouseEnter: y, onRowMouseLeave: b, expandedContent: x, error: S, warning: C, active: w } = e;
-	useEffect(() => {
-		if (w && p) {
-			let e = document.querySelector("tr[data-active=\"true\"]");
-			e && e.scrollIntoView({
-				behavior: "smooth",
-				block: "center"
-			});
-		}
-	}, [w, p]);
-	let T = e.cells.map((e, r) => {
+}, Row$1 = ({ row: e, rowIndex: t, isHeader: n = !1, columnCount: r, colSpan: i, columnHeaderAlignments: a = [], columnAlignment: o = [], hasRowActions: s, draggableTable: c = !1, columnWidths: l, dropDisabled: u = !1, height: d, testId: f }) => {
+	let p = getHeaderAlignment(a, n, t), { onRowClick: m, onRowFocus: h, onRowMouseEnter: _, onRowMouseLeave: v, expandedContent: y, error: b, warning: x, active: S } = e, C = e.cells.map((e, r) => {
 		let i = `${n ? 0 : 1}_${t}_${r}`;
 		return /* @__PURE__ */ jsx(Cell, {
 			cell: e,
 			isHeader: n,
 			columnAlignment: o[r],
-			columnHeaderAlignment: h[r],
-			width: u ? u[r] : void 0,
+			columnHeaderAlignment: p[r],
+			width: l ? l[r] : void 0,
 			testId: e.testId
 		}, i);
-	}), E = s && /* @__PURE__ */ jsx(Cell, {
+	}), w = s && /* @__PURE__ */ jsx(Cell, {
 		cell: {
 			type: CellType.ACTIONS,
 			actions: e.actions
 		},
 		isHeader: n
-	}, r), { attributes: D, listeners: O, setNodeRef: k, transform: A, transition: j, isDragging: M } = useSortable({
+	}, r), { attributes: T, listeners: E, setNodeRef: D, transform: O, transition: k, isDragging: A } = useSortable({
 		id: t.toString(),
 		animateLayoutChanges: () => !1
-	}), N = {
-		transform: d ? void 0 : CSS.Translate.toString(A),
-		height: f,
-		transition: j,
-		opacity: M ? 0 : void 0
-	}, P = () => e.noDrag ? /* @__PURE__ */ jsx("td", { "aria-labelledby": "unique-label-id" }) : /* @__PURE__ */ jsx("td", {
+	}), j = {
+		transform: u ? void 0 : CSS.Translate.toString(O),
+		height: d,
+		transition: k,
+		opacity: A ? 0 : void 0
+	}, M = () => e.noDrag ? /* @__PURE__ */ jsx("td", { "aria-labelledby": "unique-label-id" }) : /* @__PURE__ */ jsx("td", {
 		className: row_module_default$1.dragIconCell,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cx(row_module_default$1.dragIcon, d ? row_module_default$1.dragIconDisabled : ""),
-			...D,
-			...O,
+			className: cx(row_module_default$1.dragIcon, u ? row_module_default$1.dragIconDisabled : ""),
+			...T,
+			...E,
 			children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG })
 		})
 	});
 	return n ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", {
-		onClick: _,
-		onMouseEnter: y,
-		onMouseLeave: b,
-		onFocus: v,
-		className: cx(_ ? row_module_default$1.clickableRow : null, y ? row_module_default$1.hoverableRow : null),
+		onClick: m,
+		onMouseEnter: _,
+		onMouseLeave: v,
+		onFocus: h,
+		className: cx(m ? row_module_default$1.clickableRow : null, _ ? row_module_default$1.hoverableRow : null),
 		children: [
-			l ? /* @__PURE__ */ jsx("th", {}) : null,
-			T,
-			E
+			c ? /* @__PURE__ */ jsx("th", {}) : null,
+			C,
+			w
 		]
-	}, t), x && x.content ? /* @__PURE__ */ jsx(ExpandedContentRow, {
+	}, t), y && y.content ? /* @__PURE__ */ jsx(ExpandedContentRow, {
 		colSpan: i,
-		flush: x.flush === !0,
-		children: x.content
+		flush: y.flush === !0,
+		children: y.content
 	}, `${t}_expanded_content`) : null] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", {
-		ref: e.noDrag ? null : k,
-		onClick: _,
-		onMouseEnter: y,
-		onMouseLeave: b,
-		onFocus: v,
-		className: cx(_ && !_.noStyle ? row_module_default$1.clickableRow : null, y && !y.noStyle ? row_module_default$1.hoverableRow : null, w ? row_module_default$1.rowActive : null),
-		"data-active": w || null,
-		"data-error": S || null,
-		"data-warning": C || null,
+		ref: e.noDrag ? null : D,
+		onClick: m,
+		onMouseEnter: _,
+		onMouseLeave: v,
+		onFocus: h,
+		className: cx(m && !m.noStyle ? row_module_default$1.clickableRow : null, _ && !_.noStyle ? row_module_default$1.hoverableRow : null, S ? row_module_default$1.rowActive : null),
+		"data-active": S || null,
+		"data-error": b || null,
+		"data-warning": x || null,
 		"data-index": t,
 		"data-even": t % 2 == 0,
-		style: N,
+		style: j,
 		children: [
-			l ? P() : null,
-			T,
-			E
+			c ? M() : null,
+			C,
+			w
 		]
-	}, t), x && x.content ? /* @__PURE__ */ jsx(ExpandedContentRow, {
+	}, t), y && y.content ? /* @__PURE__ */ jsx(ExpandedContentRow, {
 		colSpan: i,
-		flush: x.flush === !0,
-		children: x.content
+		flush: y.flush === !0,
+		children: y.content
 	}, `${t}_expanded_content`) : null] });
 }, TableDragWrapper = (e) => {
 	let { children: t, colSpan: n, columnAlignment: r, columnCount: i, draggable: a, onListReorder: o = () => {}, canListReorder: s = () => !0, rowActions: c, rows: l = [], tbodyRef: u } = e, [f, p] = useState(null), [h, _] = useState(!1), v = useMemo(() => l.map((e, t) => t.toString()), [l]);
@@ -3662,23 +3652,61 @@ const Cell = ({ cell: e, isHeader: t, columnHeaderAlignment: n, columnAlignment:
 			})()
 		})
 	});
-}, TableScrollWrapper = ({ table: e, theadRef: t, children: n }) => {
-	let { infiniteScroll: r = !1 } = e;
+};
+var ScrollToActiveRow = ({ activeIndex: e, triggerScrollToActiveRow: t, isVirtualized: n, virtualizer: r }) => {
+	let i = useRef(null), a = useMemo(() => debounce((e) => {
+		if (n && r) r.scrollToIndex(e, {
+			align: "center",
+			behavior: "auto"
+		});
+		else {
+			let t = document.querySelector(`tr[data-index="${e}"]`);
+			t && t.scrollIntoView({
+				behavior: "auto",
+				block: "center"
+			});
+		}
+		i.current = e;
+	}, 100, {
+		leading: !1,
+		trailing: !0
+	}), [n, r]);
+	return useEffect(() => {
+		if (t && !(e == null || e < 0) && i.current !== e) return a(e), () => {
+			a.cancel();
+		};
+	}, [
+		e,
+		t,
+		a
+	]), null;
+};
+const TableScrollWrapper = ({ table: e, theadRef: t, children: n }) => {
+	let { infiniteScroll: r = !1, triggerScrollToActiveRow: i = !1, rows: a } = e, o = useMemo(() => typeof e.activeRowIndex == "number" ? e.activeRowIndex : Array.isArray(a) && a.length ? a.findIndex((e) => e && e.active) : -1, [a, e.activeRowIndex]);
 	return r ? /* @__PURE__ */ jsx(TableVirtualScrollWrapper, {
 		table: e,
 		theadRef: t,
-		children: ({ virtualizer: e, tableStyle: t }) => n({
+		children: ({ virtualizer: e, tableStyle: t }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScrollToActiveRow, {
+			isVirtualized: !0,
+			virtualizer: e,
+			activeIndex: o,
+			triggerScrollToActiveRow: i
+		}), n({
 			virtualizer: e,
 			tableStyle: t
-		})
-	}) : /* @__PURE__ */ jsx("div", {
+		})] })
+	}) : /* @__PURE__ */ jsxs("div", {
 		id: "scrollWrapper",
 		className: table_module_default.scroll,
-		children: n({})
+		children: [/* @__PURE__ */ jsx(ScrollToActiveRow, {
+			isVirtualized: !1,
+			activeIndex: o,
+			triggerScrollToActiveRow: i
+		}), n({})]
 	});
 }, Table = (e) => {
-	let { onListReorder: t = () => {}, canListReorder: n = () => !0, beforeRenderRow: r, table: i } = e, { columnWidths: a, footer: o, name: s, rows: c = [], actions: l, actionsRight: u, columnHeaderAlignments: d, columnAlignment: f, striped: m = !0, testId: h, draggable: _, defaultEmptyRow: v = null, onAddRow: y = null, bordered: b = !0, maxHeight: x, fixedWidth: S, triggerScrollToActiveRow: C = !1 } = i, w = useRef(null), T = useRef(null), E = get(e, "table.headers", []), D = getColumnCount(c, E), O = hasRowActions(c, E), k = D + (O ? 1 : 0), A = o ? o?.pagination?.rowsPerPage?.value === 0 || Number(o?.pagination?.selectedPage) >= Number(o?.pagination?.rowCount) / Number(o?.pagination?.rowsPerPage?.value) : !0, j = v?.cells?.length && y && A, M = {
-		cells: j ? v.cells.map((e, t) => e?.type === "Input" ? {
+	let { onListReorder: t = () => {}, canListReorder: n = () => !0, beforeRenderRow: r, table: i } = e, { columnWidths: a, footer: o, name: s, rows: c = [], actions: l, actionsRight: u, columnHeaderAlignments: d, columnAlignment: f, striped: m = !0, testId: h, draggable: _, defaultEmptyRow: v = null, onAddRow: y = null, bordered: b = !0, maxHeight: x, fixedWidth: S } = i, C = useRef(null), w = useRef(null), T = get(e, "table.headers", []), E = getColumnCount(c, T), D = hasRowActions(c, T), O = E + (D ? 1 : 0), k = o ? o?.pagination?.rowsPerPage?.value === 0 || Number(o?.pagination?.selectedPage) >= Number(o?.pagination?.rowCount) / Number(o?.pagination?.rowsPerPage?.value) : !0, A = v?.cells?.length && y && k, j = {
+		cells: A ? v.cells.map((e, t) => e?.type === "Input" ? {
 			...e,
 			onChange: (e) => {
 				let n = e?.target?.value, r = {
@@ -3695,12 +3723,12 @@ const Cell = ({ cell: e, isHeader: t, columnHeaderAlignment: n, columnAlignment:
 			disabled: !0
 		}) : null,
 		testId: h ? `${h}-last-empty-row` : void 0
-	}, N = j ? c.concat(M) : c, P = {
+	}, M = A ? c.concat(j) : c, N = {
 		...i,
-		rows: N
-	}, F = cx(table_module_default.wrapper, b ? table_module_default.bordered : "");
+		rows: M
+	}, P = cx(table_module_default.wrapper, b ? table_module_default.bordered : "");
 	return /* @__PURE__ */ jsxs("div", {
-		className: F,
+		className: P,
 		style: {
 			maxHeight: x,
 			width: S,
@@ -3714,57 +3742,56 @@ const Cell = ({ cell: e, isHeader: t, columnHeaderAlignment: n, columnAlignment:
 				testId: h && `${h}-title`
 			}),
 			/* @__PURE__ */ jsx(TableDragWrapper, {
-				colSpan: k,
+				colSpan: O,
 				columnAlignment: f,
-				columnCount: D,
+				columnCount: E,
 				draggable: _,
 				onListReorder: t,
-				rowActions: O,
-				rows: N,
-				tbodyRef: T,
+				rowActions: D,
+				rows: M,
+				tbodyRef: w,
 				canListReorder: n,
 				children: ({ dropDisabled: e }) => /* @__PURE__ */ jsx(TableScrollWrapper, {
-					table: P,
-					theadRef: w,
+					table: N,
+					theadRef: C,
 					children: ({ virtualizer: t, tableStyle: n }) => /* @__PURE__ */ jsxs("table", {
 						className: cx(table_module_default.table, m ? table_module_default.striped : ""),
 						"data-testid": h,
 						style: n,
 						children: [/* @__PURE__ */ jsx("thead", {
-							ref: w,
-							children: E.map((e, t) => /* @__PURE__ */ jsx(Row$1, {
+							ref: C,
+							children: T.map((e, t) => /* @__PURE__ */ jsx(Row$1, {
 								rowIndex: t,
 								isHeader: !0,
 								row: e,
-								columnCount: D,
+								columnCount: E,
 								columnWidths: a,
-								colSpan: k,
-								hasRowActions: O,
+								colSpan: O,
+								hasRowActions: D,
 								columnAlignment: f,
 								columnHeaderAlignments: d,
 								draggableTable: _
 							}, `0_${t}`))
 						}), /* @__PURE__ */ jsx("tbody", {
-							ref: T,
+							ref: w,
 							children: t ? t.getVirtualItems().map((t) => {
-								let n = t.index, i = N[n], o = r ? r({
+								let n = t.index, i = M[n], o = r ? r({
 									row: i,
 									rowIndex: n
 								}) : i;
 								return /* @__PURE__ */ jsx(Row$1, {
 									rowIndex: n,
 									row: o,
-									columnCount: D,
+									columnCount: E,
 									columnWidths: a,
-									colSpan: k,
-									hasRowActions: O,
+									colSpan: O,
+									hasRowActions: D,
 									columnAlignment: f,
 									draggableTable: _,
 									height: t.size,
-									dropDisabled: e,
-									triggerScrollToActiveRow: C
+									dropDisabled: e
 								}, `1_${n}`);
-							}) : N.map((t, n) => {
+							}) : M.map((t, n) => {
 								let i = r ? r({
 									row: t,
 									rowIndex: n
@@ -3772,14 +3799,13 @@ const Cell = ({ cell: e, isHeader: t, columnHeaderAlignment: n, columnAlignment:
 								return /* @__PURE__ */ jsx(Row$1, {
 									rowIndex: n,
 									row: i,
-									columnCount: D,
+									columnCount: E,
 									columnWidths: a,
-									colSpan: k,
-									hasRowActions: O,
+									colSpan: O,
+									hasRowActions: D,
 									columnAlignment: f,
 									draggableTable: _,
-									dropDisabled: e,
-									triggerScrollToActiveRow: C
+									dropDisabled: e
 								}, `1_${n}`);
 							})
 						})]
@@ -6582,7 +6608,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 	} : {
 		value: G,
 		unit: U
-	}), Od = k || K?.value === void 0, [J, kd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), Ad = !!(O || n), Y = C && C.find((e) => {
+	}), kd = k || K?.value === void 0, [J, Ad] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), jd = !!(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({
@@ -6591,7 +6617,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			toUnit: t
 		});
 		return withUnit(n, t) === e.value;
-	}), jd = () => {
+	}), Md = () => {
 		let e = l ?? "", t = K.unit;
 		if (checkConversion({
 			value: e,
@@ -6605,7 +6631,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 				return null;
 			}
 		} else return getAltUnitsListByQuantity(u)?.map((e) => ["", e?.unit]);
-	}, Md = (t) => {
+	}, Nd = (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,
@@ -6618,7 +6644,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		}), R(() => {
 			r.selectionStart = a, r.selectionEnd = a;
 		});
-	}, Nd = (e, t) => {
+	}, Pd = (e, t) => {
 		t === K.unit || isNaN(Number(e)) || (q({
 			value: e,
 			unit: t
@@ -6649,7 +6675,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			e !== void 0 && q({
 				value: e,
 				unit: t
-			}), C && kd(Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
+			}), C && Ad(Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
 		}
 	}, [
 		U,
@@ -6657,7 +6683,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		i,
 		T
 	]);
-	let X = jd(), Z = label(K.unit) || K.unit || "", Pd = p || !X || X && X.length === 1, Q = getStringName(e), $, Fd = (t) => {
+	let X = Md(), Z = label(K.unit) || K.unit || "", Fd = p || !X || X && X.length === 1, Q = getStringName(e), $, Id = (t) => {
 		let r = t?.value ? t.value : "", [i = "", a = ""] = isValueWithUnit(r) ? split(r) : [r], o = withPrettyUnitLabel(r);
 		if (checkConversion({
 			value: r,
@@ -6677,7 +6703,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			type: MenuType.OPTION,
 			inline: !0,
 			onClick: () => {
-				validateNumber(i).valid && !n && (kd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
+				validateNumber(i).valid && !n && (Ad(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
 					value: r,
 					name: typeof e == "string" ? e : e?.fieldName || "",
 					predefinedSelected: !0,
@@ -6704,10 +6730,10 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		label: "Custom",
 		selected: J === PredefinedOptionsMenuState.CUSTOM
 	}], C?.length) {
-		let e = C.map(Fd);
+		let e = C.map(Id);
 		$ = [...$, ...e];
 	}
-	let Id = (e) => {
+	let Ld = (e) => {
 		if (isValueWithUnit(e)) {
 			let t = getUnit(e), { value: n } = safeConvertValue({
 				value: e,
@@ -6719,7 +6745,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			return n;
 		}
 		return e;
-	}, Ld = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, Rd = !F || F === GroupOrder.LAST ? GroupOrder.LAST : GroupOrder.MIDDLE;
+	}, Rd = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, zd = !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, {
@@ -6751,31 +6777,31 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 						name: Q,
 						testId: x,
 						disabled: n,
-						placeholder: Id(t),
+						placeholder: Ld(t),
 						value: K.value,
-						onChange: Md,
+						onChange: Nd,
 						onFocus: v,
 						error: i === null ? void 0 : i,
 						warning: S === null ? void 0 : S,
 						left: a,
-						allowEmpty: Od,
+						allowEmpty: kd,
 						validationCallback: (e, t) => D(Q, t),
 						enableCosmeticRounding: j,
 						enableDisplayRounding: M,
 						roundDisplayValue: N,
-						groupOrder: Ld,
-						disableInternalErrorValidationMessages: Ad,
+						groupOrder: Rd,
+						disableInternalErrorValidationMessages: jd,
 						small: o,
 						selectOnFocus: P,
 						tooltip: I
 					}, Q)
 				}),
-				Z && (Pd || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
-					groupOrder: Rd,
+				Z && (Fd || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
+					groupOrder: zd,
 					small: o,
 					children: Z
 				}) : /* @__PURE__ */ jsx(Menu, {
-					groupOrder: Rd,
+					groupOrder: zd,
 					maxHeight: 380,
 					disabled: r,
 					testId: x && `${x}-menu`,
@@ -6791,7 +6817,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 								label: j ? safeRoundNumbers(i) : i,
 								inline: !0,
 								onClick: (n) => {
-									n.stopPropagation(), Nd(e, t);
+									n.stopPropagation(), Pd(e, t);
 								},
 								description: r,
 								selected: r === Z,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "5.8.0-beta-3",
+  "version": "5.8.0-beta-5",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {