@konoma-development/react-components 0.3.14 → 0.3.16

package/dist/@konoma-development/react-components.js

@@ -16630,11 +16630,15 @@ var baseClasses$2 = {
 	columnsRightClasses: "flex flex-row h-fit overflow-x-auto border-l first:rounded-tl-krc-table last:rounded-tr-krc-table",
 	noDataClasses: "flex h-16 items-center justify-start pl-16 rounded-b-krc-table bg-white text-secondary-500 w-full text-sm",
 	rowClasses: "group relative flex flex-row justify-between bg-white last:rounded-b-krc-table hover:bg-primary-100 h-fit",
+	subRowClasses: "group relative flex flex-row justify-between bg-base-200 last:rounded-b-krc-table hover:bg-primary-100 h-fit",
 	rowLeftWrapperClasses: "bg-white group-hover:bg-primary-100 h-fit",
 	rowCenterWrapperClasses: "bg-white first:grow group-hover:bg-primary-100 h-fit",
-	rowRightWrapperClasses: "bg-white group-hover:bg-primary-100 h-fit"
+	rowRightWrapperClasses: "bg-white group-hover:bg-primary-100 h-fit",
+	subRowLeftWrapperClasses: "bg-base-200 group-hover:bg-primary-100 h-fit",
+	subRowCenterWrapperClasses: "bg-base-200 first:grow group-hover:bg-primary-100 h-fit",
+	subRowRightWrapperClasses: "bg-base-200 group-hover:bg-primary-100 h-fit"
 };
-function Table({ noDataClasses = baseClasses$2.noDataClasses, wrapperClasses = baseClasses$2.wrapperClasses, tableClasses = baseClasses$2.tableClasses, rowClasses = baseClasses$2.rowClasses, rowLeftWrapperClasses = baseClasses$2.rowLeftWrapperClasses, rowCenterWrapperClasses = baseClasses$2.rowCenterWrapperClasses, rowRightWrapperClasses = baseClasses$2.rowRightWrapperClasses, headerClasses = baseClasses$2.headerClasses, paginationClasses, filterComponents, columnsCenter, columnsRight, columnsLeft, cellRenderer, filters = {}, data, pagination, totalRows, totalPagesProp, detailsRow, currentPage = 0, noEntryLabel, allowReorder, showFilters, pagesize = 10, xToY, isInfinite = true, name = "", firstPageIconName, firstPageIconPath, previousPageIconName, previousPageIconPath, nextPageIconName, nextPageIconPath, lastPageIconName, lastPageIconPath, sortingAscIconName, sortingAscIconPath, sortingDescIconName, sortingDescIconPath, removeFilterIconName, removeFilterIconPath, triggeredFilter, setTriggeredFilter, onDragRow = () => {}, onDropRow = () => {}, onRowClick = () => {}, onRowDoubleClick = () => {}, onScroll = () => {}, onUpdateFilters = async () => {}, onSort = () => {}, onFirstPage = () => {}, onPreviousPage = () => {}, onNextPage = () => {}, onLastPage = () => {}, toPage = (page) => {} }) {
+function Table({ noDataClasses = baseClasses$2.noDataClasses, wrapperClasses = baseClasses$2.wrapperClasses, tableClasses = baseClasses$2.tableClasses, rowClasses = baseClasses$2.rowClasses, rowLeftWrapperClasses = baseClasses$2.rowLeftWrapperClasses, rowCenterWrapperClasses = baseClasses$2.rowCenterWrapperClasses, rowRightWrapperClasses = baseClasses$2.rowRightWrapperClasses, subRowClasses = baseClasses$2.subRowClasses, subRowLeftWrapperClasses = baseClasses$2.subRowLeftWrapperClasses, subRowCenterWrapperClasses = baseClasses$2.subRowCenterWrapperClasses, subRowRightWrapperClasses = baseClasses$2.subRowRightWrapperClasses, headerClasses = baseClasses$2.headerClasses, paginationClasses, filterComponents, columnsCenter, columnsRight, columnsLeft, cellRenderer, filters = {}, data, pagination, totalRows, totalPagesProp, detailsRow, currentPage = 0, noEntryLabel, allowReorder, showFilters, pagesize = 10, xToY, isInfinite = true, name = "", firstPageIconName, firstPageIconPath, previousPageIconName, previousPageIconPath, nextPageIconName, nextPageIconPath, lastPageIconName, lastPageIconPath, sortingAscIconName, sortingAscIconPath, sortingDescIconName, sortingDescIconPath, removeFilterIconName, removeFilterIconPath, triggeredFilter, setTriggeredFilter, onDragRow = () => {}, onDropRow = () => {}, onRowClick = () => {}, onRowDoubleClick = () => {}, onScroll = () => {}, onUpdateFilters = async () => {}, onSort = () => {}, onFirstPage = () => {}, onPreviousPage = () => {}, onNextPage = () => {}, onLastPage = () => {}, toPage = (page) => {} }) {
 	const { locale } = useContext(i18nContext);
 	const hasFilters = !!(showFilters && (columnsCenter.some((column) => column.filterable) || columnsLeft?.some((column) => column.filterable) || columnsRight?.some((column) => column.filterable)));
 	const totalPages = totalPagesProp || Math.ceil(totalRows / pagesize);
@@ -16846,7 +16850,7 @@ function Table({ noDataClasses = baseClasses$2.noDataClasses, wrapperClasses = b
 						})
 					]
 				}, locale),
-				allowReorder ? /* @__PURE__ */ jsx(DndProvider, {
+				/* @__PURE__ */ jsx(DndProvider, {
 					backend: HTML5Backend,
 					debugMode: true,
 					children: data.map((entry, i) => {
@@ -16868,99 +16872,14 @@ function Table({ noDataClasses = baseClasses$2.noDataClasses, wrapperClasses = b
 							rowLeftWrapperClasses,
 							rowCenterWrapperClasses,
 							rowRightWrapperClasses,
+							subRowClasses,
+							subRowLeftWrapperClasses,
+							subRowCenterWrapperClasses,
+							subRowRightWrapperClasses,
 							detailsRow
 						}, i);
 					})
-				}) : /* @__PURE__ */ jsx(Fragment$1, { children: data.map((entry, i) => {
-					return /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col",
-						children: [/* @__PURE__ */ jsxs("div", {
-							"data-testid": `${name}-table-row`,
-							"data-foo": "bar",
-							className: rowClasses,
-							onClick: () => onRowClick(entry),
-							onDoubleClick: () => onRowDoubleClick(entry),
-							children: [
-								(detailsRow || !!currentColumnsLeft.length) && /* @__PURE__ */ jsxs("div", {
-									className: "sticky left-0 flex flex-row border-r",
-									children: [detailsRow && /* @__PURE__ */ jsx("div", {
-										className: ["flex items-center justify-center w-12", rowLeftWrapperClasses].join(" "),
-										children: /* @__PURE__ */ jsx("button", {
-											className: "w-8 cursor-pointer",
-											onClick: (e) => {
-												e.stopPropagation();
-												e.preventDefault();
-												setDetailsOpen((prev) => {
-													const newDetailsOpen = [...prev];
-													newDetailsOpen[i] = !newDetailsOpen[i];
-													return newDetailsOpen;
-												});
-											},
-											children: /* @__PURE__ */ jsx(Icon, {
-												name: detailsOpen[i] ? "heroicons:chevron-down" : "heroicons:chevron-right",
-												className: "h-5 w-5"
-											})
-										})
-									}), currentColumnsLeft.map((column) => {
-										return /* @__PURE__ */ jsx("div", {
-											style: {
-												minWidth: column.initialWidth,
-												maxWidth: !column.grow ? column.initialWidth : void 0
-											},
-											className: [rowLeftWrapperClasses, column.grow ? "grow" : ""].join(" "),
-											title: entry[column.id] || "",
-											children: cellRenderer?.[column.id]?.(entry) || /* @__PURE__ */ jsx("div", {
-												"data-testid": `${name}-table-row-left-${column.id.toString()}`,
-												className: "h-14 truncate p-4 text-sm",
-												children: entry[column.id] || "-"
-											})
-										}, column.id.toString());
-									})]
-								}),
-								currentColumnsCenter.map((column) => {
-									return /* @__PURE__ */ jsx("div", {
-										style: {
-											minWidth: column.initialWidth,
-											maxWidth: !column.grow ? column.initialWidth : void 0
-										},
-										className: [rowCenterWrapperClasses, column.grow ? "grow" : ""].join(" "),
-										title: entry[column.id] ? entry[column.id].toString() : "",
-										children: cellRenderer?.[column.id]?.(entry) || /* @__PURE__ */ jsx("div", {
-											"data-testid": `${name}-table-row-center-${column.id.toString()}}`,
-											className: "h-14 truncate p-4 text-sm",
-											children: entry[column.id] || "-"
-										})
-									}, column.id.toString());
-								}),
-								!!currentColumnsRight.length && /* @__PURE__ */ jsx("div", {
-									className: "sticky -right-px flex flex-row border-l",
-									children: currentColumnsRight.map((column) => {
-										return /* @__PURE__ */ jsx("div", {
-											style: {
-												minWidth: column.initialWidth,
-												maxWidth: !column.grow ? column.initialWidth : void 0
-											},
-											className: [rowRightWrapperClasses, column.grow ? "grow" : ""].join(" "),
-											title: entry[column.id] || "",
-											children: cellRenderer?.[column.id]?.(entry) || /* @__PURE__ */ jsx("div", {
-												"data-testid": `${name}-table-row-right-${column.id.toString()}`,
-												className: "h-14 truncate p-4 text-sm",
-												children: entry[column.id] || "-"
-											})
-										}, column.id.toString());
-									})
-								}),
-								/* @__PURE__ */ jsx("div", {
-									style: { width: `${(header.current?.scrollWidth || 0) - 1}px` },
-									className: "absolute bottom-0 left-0 -right-px h-px bg-krc-table-header"
-								})
-							]
-						}), detailsRow && detailsOpen[i] && /* @__PURE__ */ jsx("div", {
-							className: "ml-12",
-							children: detailsRow(entry)
-						})]
-					}, i);
-				}) }),
+				}),
 				data.length === 0 && /* @__PURE__ */ jsx("div", {
 					"data-testid": name + "-table-no-data",
 					className: noDataClasses,
@@ -16994,7 +16913,7 @@ function Table({ noDataClasses = baseClasses$2.noDataClasses, wrapperClasses = b
 		})]
 	});
 }
-function Row({ index, entry, onDragRow, onDropRow, onRowClick, onRowDoubleClick, currentColumnsLeft, currentColumnsCenter, currentColumnsRight, cellRenderer, header, rowClasses, rowLeftWrapperClasses, rowCenterWrapperClasses, rowRightWrapperClasses, allowReorder, detailsRow, name }) {
+function Row({ index, entry, onDragRow, onDropRow, onRowClick, onRowDoubleClick, currentColumnsLeft, currentColumnsCenter, currentColumnsRight, cellRenderer, header, rowClasses, rowLeftWrapperClasses, rowCenterWrapperClasses, rowRightWrapperClasses, subRowClasses, subRowLeftWrapperClasses, subRowCenterWrapperClasses, subRowRightWrapperClasses, allowReorder, detailsRow, name }) {
 	const dragRef = useRef(null);
 	const previewRef = useRef(null);
 	const [detailsOpen, setDetailsOpen] = useState(false);
@@ -17052,7 +16971,7 @@ function Row({ index, entry, onDragRow, onDropRow, onRowClick, onRowDoubleClick,
 					className: "sticky left-0 flex flex-row border-r",
 					children: [detailsRow && /* @__PURE__ */ jsx("div", {
 						className: ["flex items-center justify-center w-12", rowLeftWrapperClasses].join(" "),
-						children: /* @__PURE__ */ jsx("button", {
+						children: detailsRow?.(entry) && /* @__PURE__ */ jsx("button", {
 							className: "w-8 cursor-pointer",
 							onClick: (e) => {
 								e.stopPropagation();
@@ -17124,10 +17043,32 @@ function Row({ index, entry, onDragRow, onDropRow, onRowClick, onRowDoubleClick,
 					className: "absolute bottom-0 left-0 -right-px h-px bg-secondary-50"
 				})
 			]
-		}), detailsRow && detailsOpen && /* @__PURE__ */ jsx("div", {
+		}), detailsRow && detailsOpen && (Array.isArray(detailsRow(entry)) ? detailsRow(entry)?.map((e, i) => /* @__PURE__ */ jsx("div", {
+			className: "group",
+			children: /* @__PURE__ */ jsx(Row, {
+				index: i,
+				name,
+				entry: e,
+				allowReorder,
+				onDragRow,
+				onDropRow,
+				currentColumnsCenter,
+				currentColumnsLeft,
+				currentColumnsRight,
+				cellRenderer,
+				header,
+				onRowClick,
+				onRowDoubleClick,
+				rowClasses: subRowClasses || rowClasses,
+				rowLeftWrapperClasses: subRowLeftWrapperClasses || rowLeftWrapperClasses,
+				rowCenterWrapperClasses: subRowCenterWrapperClasses || rowCenterWrapperClasses,
+				rowRightWrapperClasses: subRowRightWrapperClasses || rowRightWrapperClasses,
+				detailsRow: () => void 0
+			})
+		}, i)) : /* @__PURE__ */ jsx("div", {
 			className: "ml-12",
 			children: detailsRow(entry)
-		})]
+		}))]
 	});
 }