@povio/ui 2.3.0-rc.6 → 2.3.0-rc.8

package/dist/components/status/Toast/useToast.js

@@ -1,65 +1,70 @@
 import { Toast } from "./Toast.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
 import { toast } from "react-toastify";
 //#region src/components/status/Toast/useToast.tsx
 var useToast = () => {
-	const successToast = useCallback((params, options) => {
-		return toast.success(/* @__PURE__ */ jsx(Toast, {
-			color: "success",
-			...params
-		}), {
-			...options,
-			position: params.position,
-			data: { variant: params.variant }
-		});
-	}, []);
-	const errorToast = useCallback((params, options) => {
-		return toast.error(/* @__PURE__ */ jsx(Toast, {
-			color: "error",
-			...params
-		}), {
-			...options,
-			position: params.position,
-			data: { variant: params.variant }
-		});
-	}, []);
-	const warningToast = useCallback((params, options) => {
-		return toast.warning(/* @__PURE__ */ jsx(Toast, {
-			color: "warning",
-			...params
-		}), {
-			...options,
-			position: params.position,
-			data: { variant: params.variant }
-		});
-	}, []);
-	const neutralToast = useCallback((params, options) => {
-		return toast.info(/* @__PURE__ */ jsx(Toast, {
-			color: "neutral",
-			...params
-		}), {
-			...options,
-			position: params.position,
-			data: { variant: params.variant }
-		});
-	}, []);
-	const closeToast = useCallback((id) => {
-		toast.dismiss(id);
-	}, []);
-	return useMemo(() => ({
-		successToast,
-		errorToast,
-		warningToast,
-		neutralToast,
-		closeToast
-	}), [
-		successToast,
-		errorToast,
-		warningToast,
-		neutralToast,
-		closeToast
-	]);
+	const $ = c(1);
+	const successToast = _temp;
+	const errorToast = _temp2;
+	const warningToast = _temp3;
+	const neutralToast = _temp4;
+	const closeToast = _temp5;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			successToast,
+			errorToast,
+			warningToast,
+			neutralToast,
+			closeToast
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
 };
+function _temp(params, options) {
+	return toast.success(/* @__PURE__ */ jsx(Toast, {
+		color: "success",
+		...params
+	}), {
+		...options,
+		position: params.position,
+		data: { variant: params.variant }
+	});
+}
+function _temp2(params_0, options_0) {
+	return toast.error(/* @__PURE__ */ jsx(Toast, {
+		color: "error",
+		...params_0
+	}), {
+		...options_0,
+		position: params_0.position,
+		data: { variant: params_0.variant }
+	});
+}
+function _temp3(params_1, options_1) {
+	return toast.warning(/* @__PURE__ */ jsx(Toast, {
+		color: "warning",
+		...params_1
+	}), {
+		...options_1,
+		position: params_1.position,
+		data: { variant: params_1.variant }
+	});
+}
+function _temp4(params_2, options_2) {
+	return toast.info(/* @__PURE__ */ jsx(Toast, {
+		color: "neutral",
+		...params_2
+	}), {
+		...options_2,
+		position: params_2.position,
+		data: { variant: params_2.variant }
+	});
+}
+function _temp5(id) {
+	toast.dismiss(id);
+}
 //#endregion
 export { useToast };

package/dist/components/table/ColumnConfig.js

@@ -4,16 +4,37 @@ import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
 import { Modal } from "../overlays/Modal/Modal.js";
 import { Table } from "./Table.js";
 import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 //#region src/components/table/ColumnConfig.tsx
-var VisibilityCell = ({ original, onToggle }) => /* @__PURE__ */ jsx(Checkbox, {
-	isSelected: original.visible,
-	onChange: () => onToggle(original.id),
-	hideLabel: true,
-	children: original.label
-});
+var VisibilityCell = (t0) => {
+	const $ = c(7);
+	const { original, onToggle } = t0;
+	let t1;
+	if ($[0] !== onToggle || $[1] !== original.id) {
+		t1 = () => onToggle(original.id);
+		$[0] = onToggle;
+		$[1] = original.id;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = original.label;
+	let t3;
+	if ($[3] !== original.visible || $[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Checkbox, {
+			isSelected: original.visible,
+			onChange: t1,
+			hideLabel: true,
+			children: t2
+		});
+		$[3] = original.visible;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
 var getColumns = (t, handleToggleVisibility) => [{
 	id: "name",
 	header: t(($) => $.ui.table.column, { ns: "ui" }),
@@ -28,56 +49,139 @@ var getColumns = (t, handleToggleVisibility) => [{
 		onToggle: handleToggleVisibility
 	})
 }];
-function ColumnConfigModal({ isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange }) {
+function ColumnConfigModal(t0) {
+	const $ = c(27);
+	const { isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange } = t0;
 	const { t } = useTranslation("ui");
-	const [data, setData] = useState([]);
-	useEffect(() => {
-		setData(configColumns.map((column) => {
-			const columnId = column.id ?? column.accessorKey;
-			return {
-				id: columnId,
-				label: column.header,
-				visible: visibleColumns?.[columnId] ?? true
-			};
-		}));
-	}, [configColumns, visibleColumns]);
-	const handleToggleVisibility = useCallback((columnId) => {
-		onVisibilityChange({
-			...visibleColumns,
-			[columnId]: !visibleColumns[columnId]
-		});
-	}, [visibleColumns, onVisibilityChange]);
-	const columns = useTranslationMemo(useCallback((translateFn) => getColumns(translateFn, handleToggleVisibility), [handleToggleVisibility]));
-	const handleReorder = useCallback((reorderedItems) => {
-		setData(reorderedItems);
-		onOrderChange(reorderedItems.map((item) => item.id));
-	}, [onOrderChange]);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	const [data, setData] = useState(t1);
+	let t2;
+	let t3;
+	if ($[1] !== configColumns || $[2] !== visibleColumns) {
+		t2 = () => {
+			setData(configColumns.map((column) => {
+				const columnId = column.id ?? column.accessorKey;
+				return {
+					id: columnId,
+					label: column.header,
+					visible: visibleColumns?.[columnId] ?? true
+				};
+			}));
+		};
+		t3 = [configColumns, visibleColumns];
+		$[1] = configColumns;
+		$[2] = visibleColumns;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[5] !== onVisibilityChange || $[6] !== visibleColumns) {
+		t4 = (columnId_0) => {
+			onVisibilityChange({
+				...visibleColumns,
+				[columnId_0]: !visibleColumns[columnId_0]
+			});
+		};
+		$[5] = onVisibilityChange;
+		$[6] = visibleColumns;
+		$[7] = t4;
+	} else t4 = $[7];
+	const handleToggleVisibility = t4;
+	let t5;
+	if ($[8] !== handleToggleVisibility) {
+		t5 = (translateFn) => getColumns(translateFn, handleToggleVisibility);
+		$[8] = handleToggleVisibility;
+		$[9] = t5;
+	} else t5 = $[9];
+	const columns = useTranslationMemo(t5);
+	let t6;
+	if ($[10] !== onOrderChange) {
+		t6 = (reorderedItems) => {
+			setData(reorderedItems);
+			onOrderChange(reorderedItems.map(_temp));
+		};
+		$[10] = onOrderChange;
+		$[11] = t6;
+	} else t6 = $[11];
+	const handleReorder = t6;
 	if (!isOpen) return null;
-	return /* @__PURE__ */ jsx(Modal, {
-		isOpen,
-		onClose,
-		showCloseIcon: true,
-		children: /* @__PURE__ */ jsxs("div", {
+	let t7;
+	if ($[12] !== t) {
+		t7 = t(_temp2);
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Typography, {
+			as: "h2",
+			variant: "prominent-1",
+			size: "title-5",
+			children: t7
+		});
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== columns || $[17] !== data || $[18] !== handleReorder) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: "max-h-96 overflow-y-auto",
+			children: /* @__PURE__ */ jsx(Table, {
+				items: data,
+				columns,
+				showCellBorder: true,
+				className: "w-full",
+				enableDragDrop: true,
+				getRowId: _temp3,
+				onReorder: handleReorder
+			})
+		});
+		$[16] = columns;
+		$[17] = data;
+		$[18] = handleReorder;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t8 || $[21] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-2 p-4",
-			children: [/* @__PURE__ */ jsx(Typography, {
-				as: "h2",
-				variant: "prominent-1",
-				size: "title-5",
-				children: t(($) => $.ui.table.configureColumns)
-			}), /* @__PURE__ */ jsx("div", {
-				className: "max-h-96 overflow-y-auto",
-				children: /* @__PURE__ */ jsx(Table, {
-					items: data,
-					columns,
-					showCellBorder: true,
-					className: "w-full",
-					enableDragDrop: true,
-					getRowId: (row) => row.id,
-					onReorder: handleReorder
-				})
-			})]
-		})
-	});
+			children: [t8, t9]
+		});
+		$[20] = t8;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== isOpen || $[24] !== onClose || $[25] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Modal, {
+			isOpen,
+			onClose,
+			showCloseIcon: true,
+			children: t10
+		});
+		$[23] = isOpen;
+		$[24] = onClose;
+		$[25] = t10;
+		$[26] = t11;
+	} else t11 = $[26];
+	return t11;
+}
+function _temp3(row) {
+	return row.id;
+}
+function _temp2($) {
+	return $.ui.table.configureColumns;
+}
+function _temp(item) {
+	return item.id;
 }
 //#endregion
 export { ColumnConfigModal };

package/dist/components/table/InfiniteTable.js

@@ -1,28 +1,79 @@
 import { Loader } from "../status/Loader/Loader.js";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
 import { Table } from "./Table.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
 //#region src/components/table/InfiniteTable.tsx
-var InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage, ...rest }) => {
-	const { ref } = useIntersectionObserver({
-		onIntersection: useCallback(() => {
+var InfiniteTable = (t0) => {
+	const $ = c(20);
+	let fetchNextPage;
+	let hasNextPage;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({hasNextPage, isFetchingNextPage: t1, fetchNextPage, ...rest} = t0);
+		$[0] = t0;
+		$[1] = fetchNextPage;
+		$[2] = hasNextPage;
+		$[3] = rest;
+		$[4] = t1;
+	} else {
+		fetchNextPage = $[1];
+		hasNextPage = $[2];
+		rest = $[3];
+		t1 = $[4];
+	}
+	const isFetchingNextPage = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[5] !== fetchNextPage || $[6] !== hasNextPage || $[7] !== isFetchingNextPage) {
+		t2 = () => {
 			if (!isFetchingNextPage && hasNextPage) fetchNextPage();
-		}, [
-			isFetchingNextPage,
-			hasNextPage,
-			fetchNextPage
-		]),
-		rootMargin: "100px"
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col",
-		children: [/* @__PURE__ */ jsx(Table, { ...rest }), (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx("div", {
+		};
+		$[5] = fetchNextPage;
+		$[6] = hasNextPage;
+		$[7] = isFetchingNextPage;
+		$[8] = t2;
+	} else t2 = $[8];
+	const handleLoadMore = t2;
+	let t3;
+	if ($[9] !== handleLoadMore) {
+		t3 = {
+			onIntersection: handleLoadMore,
+			rootMargin: "100px"
+		};
+		$[9] = handleLoadMore;
+		$[10] = t3;
+	} else t3 = $[10];
+	const { ref } = useIntersectionObserver(t3);
+	let t4;
+	if ($[11] !== rest) {
+		t4 = /* @__PURE__ */ jsx(Table, { ...rest });
+		$[11] = rest;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== hasNextPage || $[14] !== isFetchingNextPage || $[15] !== ref) {
+		t5 = (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx("div", {
 			ref,
 			className: "flex justify-center py-4",
 			children: /* @__PURE__ */ jsx(Loader, {})
-		})]
-	});
+		});
+		$[13] = hasNextPage;
+		$[14] = isFetchingNextPage;
+		$[15] = ref;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t4 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col",
+			children: [t4, t5]
+		});
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
 };
 //#endregion
 export { InfiniteTable };

package/dist/components/table/PaginatedTable.js

@@ -1,28 +1,94 @@
 import { Pagination } from "../shared/pagination/Pagination.js";
 import { Table } from "./Table.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table/PaginatedTable.tsx
-var PaginatedTable = ({ pagination, setPagination, items, totalItems, ...rest }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-4",
-		children: [/* @__PURE__ */ jsx(Table, {
+var PaginatedTable = (t0) => {
+	const $ = c(24);
+	let items;
+	let pagination;
+	let rest;
+	let setPagination;
+	let totalItems;
+	if ($[0] !== t0) {
+		({pagination, setPagination, items, totalItems, ...rest} = t0);
+		$[0] = t0;
+		$[1] = items;
+		$[2] = pagination;
+		$[3] = rest;
+		$[4] = setPagination;
+		$[5] = totalItems;
+	} else {
+		items = $[1];
+		pagination = $[2];
+		rest = $[3];
+		setPagination = $[4];
+		totalItems = $[5];
+	}
+	let t1;
+	if ($[6] !== items) {
+		t1 = items ?? [];
+		$[6] = items;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== rest || $[9] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Table, {
 			...rest,
-			items: items ?? []
-		}), /* @__PURE__ */ jsx(Pagination, {
+			items: t1
+		});
+		$[8] = rest;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	const t3 = totalItems ?? 0;
+	let t4;
+	let t5;
+	if ($[11] !== pagination || $[12] !== setPagination) {
+		t4 = (page) => setPagination({
+			...pagination,
+			pageIndex: page
+		});
+		t5 = (pageSize) => setPagination({
+			...pagination,
+			pageSize,
+			pageIndex: 1
+		});
+		$[11] = pagination;
+		$[12] = setPagination;
+		$[13] = t4;
+		$[14] = t5;
+	} else {
+		t4 = $[13];
+		t5 = $[14];
+	}
+	let t6;
+	if ($[15] !== pagination.pageIndex || $[16] !== pagination.pageSize || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Pagination, {
 			page: pagination.pageIndex,
 			pageSize: pagination.pageSize,
-			totalItems: totalItems ?? 0,
-			onPageChange: (page) => setPagination({
-				...pagination,
-				pageIndex: page
-			}),
-			onPageSizeChange: (pageSize) => setPagination({
-				...pagination,
-				pageSize,
-				pageIndex: 1
-			})
-		})]
-	});
+			totalItems: t3,
+			onPageChange: t4,
+			onPageSizeChange: t5
+		});
+		$[15] = pagination.pageIndex;
+		$[16] = pagination.pageSize;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== t2 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [t2, t6]
+		});
+		$[21] = t2;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
 };
 //#endregion
 export { PaginatedTable };

package/dist/components/table/Table.js

@@ -155,8 +155,8 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 		if (!active || !over || active.id === over.id) return;
 		if (getRowId && (onReorder || onDragEnd)) {
 			if (onReorder) {
-				const oldIndex = items.findIndex((item) => getRowId(item) === active.id);
-				const newIndex = items.findIndex((item) => getRowId(item) === over.id);
+				const oldIndex = items.findIndex((item_0) => getRowId(item_0) === active.id);
+				const newIndex = items.findIndex((item_1) => getRowId(item_1) === over.id);
 				if (oldIndex !== -1 && newIndex !== -1) onReorder(arrayMove(items, oldIndex, newIndex));
 			}
 			onDragEnd?.(event);
@@ -186,18 +186,18 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 				children: headerGroup.headers.filter((header) => {
 					if (isAnyRowSelected && header.index > 0) return false;
 					return header.column.getIsVisible();
-				}).map((header, index) => {
-					const columnMeta = header.column.columnDef.meta ?? {};
+				}).map((header_0, index) => {
+					const columnMeta = header_0.column.columnDef.meta ?? {};
 					return /* @__PURE__ */ jsx("th", {
-						colSpan: isAnyRowSelected ? columnCount : header.colSpan,
+						colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
 						tabIndex: -1,
 						className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
 						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							"aria-label": "Sort column",
-							className: clsx("flex select-none items-center gap-1 text-text-default-1", header.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
-							onClick: header.column.getToggleSortingHandler(),
-							children: [typeof header.column.columnDef.header === "function" ? flexRender(header.column.columnDef.header, header.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header.column.columnDef.header }), {
+							className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
+							onClick: header_0.column.getToggleSortingHandler(),
+							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
 								asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
 									width: 18,
 									height: 18
@@ -206,9 +206,9 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 									width: 18,
 									height: 18
 								})
-							}[header.column.getIsSorted()] ?? null]
+							}[header_0.column.getIsSorted()] ?? null]
 						})
-					}, header.id);
+					}, header_0.id);
 				})
 			}, headerGroup.id))]
 		}), /* @__PURE__ */ jsx("tbody", {
@@ -217,8 +217,8 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
 				items: dataIds,
 				strategy: verticalListSortingStrategy,
-				children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(DraggableRow, {
-					row,
+				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {
+					row: row_0,
 					showCellBorder,
 					onRowClick,
 					onDoubleClick,
@@ -227,29 +227,29 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 					tableDataCva,
 					hasOnClick,
 					...props
-				}, row.id))
-			}) : table.getRowModel().rows.map((row) => {
+				}, row_0.id))
+			}) : table.getRowModel().rows.map((row_1) => {
 				return /* @__PURE__ */ jsx("tr", {
 					className: clsx(tableRowCva({ ...props })),
 					onClick: () => {
 						if (onRowClick) {
-							onRowClick(row.original);
+							onRowClick(row_1.original);
 							return;
 						}
-						if (row.getCanSelect()) row.toggleSelected();
+						if (row_1.getCanSelect()) row_1.toggleSelected();
 					},
-					onDoubleClick: () => onDoubleClick?.(row.original),
-					"data-clickable": hasOnClick || row.getCanSelect() || void 0,
-					"data-selected": row.getIsSelected() || void 0,
-					children: row.getVisibleCells().map((cell, cellIndex) => {
-						const columnMeta = cell.column.columnDef.meta ?? {};
+					onDoubleClick: () => onDoubleClick?.(row_1.original),
+					"data-clickable": hasOnClick || row_1.getCanSelect() || void 0,
+					"data-selected": row_1.getIsSelected() || void 0,
+					children: row_1.getVisibleCells().map((cell, cellIndex) => {
+						const columnMeta_0 = cell.column.columnDef.meta ?? {};
 						return /* @__PURE__ */ jsx("td", {
 							tabIndex: -1,
-							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta_0.cellClass, columnMeta_0.width),
 							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 						}, cell.id);
 					})
-				}, row.id);
+				}, row_1.id);
 			})
 		})]
 	});