@stella-source/stellasource-dsl 4.0.0 → 5.1.1

package/dist/cjs/index.js

@@ -22115,6 +22115,7 @@ const HeaderRow = styled.tr `
   background-color: ${Styles.color.grey.pale};
   min-height: 50px;
   height: 50px;
+  display: ${({ $isEmpty }) => ($isEmpty ? "none" : "table-row")};
 `;
 const CellRow = styled.tr `
   min-height: 50px;
@@ -22328,6 +22329,7 @@ const LoadingShimmer = styled.div `
 `;
 const CustomPagination = styled(Pagination) `
   border-top: ${({ $hasData }) => $hasData ? "0px" : `1px solid ${Styles.color.grey.light}`};
+  display: ${({ $isEmpty }) => ($isEmpty ? "none" : "flex")};
 `;
 const KebabAlign = styled.div `
   display: flex;
@@ -22344,12 +22346,8 @@ const EmptyTableSection = styled.section `
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  position: absolute;
   gap: 20px;
-  top: 50px;
-  left: 0;
-  right: 0;
-  margin: 80px auto 0;
+  margin: 0 auto;
 `;
 const EmptyTableHeader = styled.p `
   display: flex;
@@ -22378,6 +22376,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 +22647,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 +22707,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 +22788,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 +22831,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         onRowSelect,
         showSelection,
         showRowOptions,
+        expandedRows,
     ]);
     const table = useReactTable({
         data: localData,
@@ -22887,7 +22937,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();
@@ -22949,7 +22999,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                     }, key: index + "loading-row" }, Array.from({
                     length: 10,
                 }).map((_, i) => (a$n.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a$n.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
-                a$n.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a$n.createElement(HeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header, i) => {
+                a$n.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a$n.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getRowModel().rows.length === 0 }, headerGroup.headers.map((header, i) => {
                     return (a$n.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
                             setFilterMenuOpen((prev) => ({
                                 ...prev,
@@ -22965,45 +23015,57 @@ 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));
-                    })))))))),
-            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) => {
+                                        : 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, "$isEmpty": 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);
                     setPagination((prev) => ({