@stella-source/stellasource-dsl 4.0.0 → 5.1.0

package/dist/cjs/index.js

@@ -22378,6 +22378,37 @@ const ClearFilterButtonRow = styled.div `
   align-items: "center";
   text-align: "center";
 `;
+const ExpandedContentRow = styled.tr `
+  background-color: ${Styles.color.grey.pale};
+`;
+const ExpandedContentCell = styled.td `
+  padding: 12px 16px;
+  border-bottom: 1px solid ${Styles.color.grey.light};
+  background-color: ${Styles.color.grey.pale};
+`;
+const ExpandChevronButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition:
+    transform 0.2s ease,
+    background-color 0.15s ease;
+
+  & > svg {
+    transition: transform 0.2s ease;
+    transform: ${({ $expanded }) => $expanded ? "rotate(90deg)" : "rotate(0deg)"};
+    fill: ${Styles.color.grey.charcoal};
+  }
+
+  &:hover {
+    background-color: ${Styles.color.grey.light};
+  }
+`;
 const ActionBar = styled.div `
   display: flex;
   justify-content: space-between;
@@ -22618,7 +22649,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     startingPage: 1,
     rowsPerPage: 10,
     totalRows: data.length,
-}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, enableShowHide, globalActions, }) {
+}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, enableShowHide, globalActions, showExpandedRowToggle = false, renderExpandedRow, }) {
     const [rowSelection, setRowSelection] = a$n.useState({});
     const [selectedRows] = a$n.useState({});
     const [pageIndex, setPageIndex] = a$n.useState(paginationDetails?.startingPage);
@@ -22678,6 +22709,14 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     });
     const [rowStatusesState, setRowStatusesState] = a$n.useState(rowStatuses || {});
     const [filterMenuOpen, setFilterMenuOpen] = a$n.useState({});
+    const [expandedRows, setExpandedRows] = a$n.useState(new Set());
+    const toggleRowExpanded = (rowId) => {
+        setExpandedRows((prev) => {
+            const next = new Set(prev);
+            next.has(rowId) ? next.delete(rowId) : next.add(rowId);
+            return next;
+        });
+    };
     a$n.useEffect(() => {
         setRowStatusesState(rowStatuses || {});
     }, [rowStatuses]);
@@ -22751,6 +22790,18 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     };
     const enhancedColumns = a$n.useMemo(() => {
         const cols = [];
+        if (showExpandedRowToggle) {
+            cols.push({
+                id: "expand",
+                header: "",
+                cell: ({ row }) => !!renderExpandedRow?.(row) ? (a$n.createElement(ExpandChevronButton, { "$expanded": expandedRows.has(row.id), onClick: (e) => {
+                        e.stopPropagation();
+                        toggleRowExpanded(row.id);
+                    }, "aria-label": expandedRows.has(row.id) ? "Collapse row" : "Expand row" },
+                    a$n.createElement(StellaIcon, { iconName: "chevron-right", size: 14 }))) : (a$n.createElement(a$n.Fragment, null)),
+                size: 36,
+            });
+        }
         if (showSelection) {
             cols.push({
                 id: "select",
@@ -22782,6 +22833,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         onRowSelect,
         showSelection,
         showRowOptions,
+        expandedRows,
     ]);
     const table = useReactTable({
         data: localData,
@@ -22887,7 +22939,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     };
     return (a$n.createElement(a$n.Fragment, null,
         !isLoading && (a$n.createElement(ActionBar, null,
-            a$n.createElement(GlobalActionWrapper, null, globalActions?.map((action) => action.element)),
+            a$n.createElement(GlobalActionWrapper, null, globalActions?.(table)),
             a$n.createElement(GlobalActionWrapper, null, enableShowHide && (a$n.createElement(a$n.Fragment, null,
                 a$n.createElement(IconButton, { ref: visibilityButtonRef, ariaLabel: "Column show hide button", variant: "tertiary", iconName: "table", onClick: () => {
                         const rect = visibilityButtonRef.current?.getBoundingClientRect();
@@ -22965,44 +23017,56 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                 }))))),
                 a$n.createElement("tbody", null,
                     table.getRowModel().rows.length === 0 && (a$n.createElement(EmptyTableState, { header: emptyTableState?.header || "No data available.", subHeader: emptyTableState?.subHeader, showClearFilterButton: emptyTableState?.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
-                    table.getRowModel().rows.map((row) => (a$n.createElement(CellRow, { key: row.id, onClick: () => onRowClick?.(row.original), "$isClickable": !!onRowClick }, row.getVisibleCells().map((cell) => {
-                        const value = flexRender(cell.column.columnDef.cell, {
-                            ...cell.getContext(),
-                            localValue: rowState[row.id]?.[cell.column.id],
-                            onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
-                        });
-                        const meta = cell.column.columnDef
-                            .meta;
-                        return (a$n.createElement(BodyCell, { key: cell.id, style: {
-                                width: cell.column.getSize(),
-                                textAlign: meta?.cellAlign ||
-                                    (typeof cell.getValue() === "number" ||
-                                        meta?.dataType === "number"
-                                        ? "right"
-                                        : "left"),
-                                boxShadow: scrollState.atLeft &&
-                                    cell.column.getIsPinned() === "left"
-                                    ? "none"
-                                    : scrollState.atRight &&
-                                        cell.column.getIsPinned() === "right"
+                    table.getRowModel().rows.map((row) => (a$n.createElement(a$n.Fragment, { key: row.id },
+                        a$n.createElement(CellRow, { onClick: () => {
+                                if (!showExpandedRowToggle &&
+                                    !!renderExpandedRow?.(row))
+                                    toggleRowExpanded(row.id);
+                                onRowClick?.(row.original);
+                            }, "$isClickable": !!onRowClick }, row.getVisibleCells().map((cell) => {
+                            const value = flexRender(cell.column.columnDef.cell, {
+                                ...cell.getContext(),
+                                localValue: rowState[row.id]?.[cell.column.id],
+                                onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
+                            });
+                            const meta = cell.column.columnDef
+                                .meta;
+                            return (a$n.createElement(BodyCell, { key: cell.id, style: {
+                                    width: cell.column.getSize(),
+                                    textAlign: meta?.cellAlign ||
+                                        (typeof cell.getValue() === "number" ||
+                                            meta?.dataType === "number"
+                                            ? "right"
+                                            : "left"),
+                                    boxShadow: scrollState.atLeft &&
+                                        cell.column.getIsPinned() === "left"
                                         ? "none"
-                                        : undefined,
-                                backgroundColor: table
-                                    .getSelectedRowModel()
-                                    .rows.find((r) => r.id === row.id)
-                                    ? "#EBF0FA"
-                                    : rowStatusesState?.[row.id] === "action-pending"
-                                        ? "#FFFDEB"
-                                        : rowStatusesState?.[row.id] === "completed"
-                                            ? "#F5F5F5"
-                                            : "",
-                            }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
-                                ? row.index ===
-                                    table.getRowModel().rows.length - 1
-                                : row.index -
-                                    pagination.pageSize * pagination.pageIndex ===
-                                    table.getRowModel().rows.length - 1 }, value));
-                    })))))))),
+                                        : scrollState.atRight &&
+                                            cell.column.getIsPinned() === "right"
+                                            ? "none"
+                                            : undefined,
+                                    backgroundColor: table
+                                        .getSelectedRowModel()
+                                        .rows.find((r) => r.id === row.id)
+                                        ? "#EBF0FA"
+                                        : rowStatusesState?.[row.id] ===
+                                            "action-pending"
+                                            ? "#FFFDEB"
+                                            : rowStatusesState?.[row.id] === "completed"
+                                                ? "#F5F5F5"
+                                                : "",
+                                }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
+                                    ? row.index ===
+                                        table.getRowModel().rows.length - 1
+                                    : row.index -
+                                        pagination.pageSize *
+                                            pagination.pageIndex ===
+                                        table.getRowModel().rows.length - 1 }, value));
+                        })),
+                        expandedRows.has(row.id) &&
+                            renderExpandedRow &&
+                            !!renderExpandedRow(row) && (a$n.createElement(ExpandedContentRow, null,
+                            a$n.createElement(ExpandedContentCell, { colSpan: table.getVisibleLeafColumns().length }, renderExpandedRow(row))))))))))),
             showPagination && paginationDetails?.totalRows > 0 && (a$n.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                     table.toggleAllRowsSelected(false);
                     setPageIndex(page);