@bwp-web/components 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/index.js

@@ -1939,6 +1939,7 @@ import {
   TableBody,
   TableCell as TableCell2,
   TableContainer,
+  TableFooter,
   TableHead,
   TableRow as TableRow2,
   TableSortLabel
@@ -2457,6 +2458,33 @@ var headerSelectionCellSx = {
   bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[900] : palette.background.paper
 };
 var checkboxHiddenHeaderSx = { visibility: "hidden" };
+var footerBg = ({ palette }) => palette.mode === "dark" ? palette.grey[900] : palette.grey[100];
+var footerRowSx = { bgcolor: footerBg };
+var footerCellSx = {
+  height: 44,
+  color: "text.primary",
+  fontSize: 14,
+  fontWeight: 600,
+  lineHeight: 1.5,
+  borderTop: ({ palette }) => `0.6px solid ${palette.divider}`,
+  borderBottom: "none"
+};
+var footerPinnedCellSx = { bgcolor: footerBg };
+var stickyFooterSx = {
+  position: "sticky",
+  bottom: 0,
+  zIndex: 2,
+  filter: "drop-shadow(0px -1px 3.5px rgba(0, 0, 0, 0.05))"
+};
+var fillerRowSx = { height: "100%" };
+var fitHeightBodySx = {
+  "& > tr:nth-last-of-type(2) > td": { borderBottom: "none" }
+};
+var fillerCellSx = {
+  height: "auto",
+  p: 0,
+  border: "none"
+};
 function BiampTable({
   table,
   onRowClick,
@@ -2473,6 +2501,8 @@ function BiampTable({
   getRowLabel,
   setRowColor,
   slotProps,
+  stickyFooter = false,
+  fitHeight = false,
   sx,
   ...boxProps
 }) {
@@ -2499,6 +2529,10 @@ function BiampTable({
   const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
   const showError = !!error && !loading;
   const showEmpty = !showError && !loading && rows.length === 0;
+  const footerGroup = table.getFooterGroups()[0];
+  const hasFooter = table.getVisibleLeafColumns().some((col) => col.columnDef.footer !== void 0);
+  const { sx: userFooterSx, ...restFooterSlotProps } = slotProps?.footer ?? {};
+  const { sx: userFooterRowSx, ...restFooterRowSlotProps } = slotProps?.footerRow ?? {};
   return /* @__PURE__ */ jsxs9(
     TableContainer,
     {
@@ -2521,7 +2555,11 @@ function BiampTable({
             "aria-busy": showLoading || void 0,
             ...restTableSlotProps,
             sx: mergeSx(
-              { minWidth: tableMinWidth, tableLayout: "auto" },
+              {
+                minWidth: tableMinWidth,
+                tableLayout: "auto",
+                ...fitHeight && { height: "100%" }
+              },
               userTableSx
             ),
             children: [
@@ -2586,33 +2624,102 @@ function BiampTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs9(
                 TableBody,
                 {
                   ...restBodySlotProps,
-                  sx: mergeSx({ opacity: showLoading ? 0.3 : 1 }, userBodySx),
-                  children: !showError && rows.map((row) => /* @__PURE__ */ jsx15(
-                    BiampTableRow,
+                  sx: mergeSx(
+                    { opacity: showLoading ? 0.3 : 1 },
+                    fitHeight && !showError ? fitHeightBodySx : void 0,
+                    userBodySx
+                  ),
+                  children: [
+                    !showError && rows.map((row) => /* @__PURE__ */ jsx15(
+                      BiampTableRow,
+                      {
+                        row,
+                        visibleColumnsKey,
+                        isExpanded: row.getIsExpanded(),
+                        isSelected: row.getIsSelected(),
+                        onRowClick,
+                        isRowClickable,
+                        enableRowSelection,
+                        enableExpanding,
+                        alwaysExpanded,
+                        selectChildrenWithParent,
+                        showExpandGuidelines,
+                        getRowLabel,
+                        hasExpandableRows,
+                        customColor: setRowColor?.(row.original),
+                        rowSlotProps: slotProps?.row,
+                        cellSlotProps: slotProps?.cell
+                      },
+                      row.id
+                    )),
+                    fitHeight && !showError && /* @__PURE__ */ jsx15(TableRow2, { "aria-hidden": true, sx: fillerRowSx, children: /* @__PURE__ */ jsx15(
+                      TableCell2,
+                      {
+                        colSpan: table.getVisibleLeafColumns().length + (enableRowSelection ? 1 : 0),
+                        sx: fillerCellSx
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              hasFooter && footerGroup && !showError && /* @__PURE__ */ jsx15(
+                TableFooter,
+                {
+                  ...restFooterSlotProps,
+                  sx: mergeSx(
+                    stickyFooter ? stickyFooterSx : void 0,
+                    userFooterSx
+                  ),
+                  children: /* @__PURE__ */ jsxs9(
+                    TableRow2,
                     {
-                      row,
-                      visibleColumnsKey,
-                      isExpanded: row.getIsExpanded(),
-                      isSelected: row.getIsSelected(),
-                      onRowClick,
-                      isRowClickable,
-                      enableRowSelection,
-                      enableExpanding,
-                      alwaysExpanded,
-                      selectChildrenWithParent,
-                      showExpandGuidelines,
-                      getRowLabel,
-                      hasExpandableRows,
-                      customColor: setRowColor?.(row.original),
-                      rowSlotProps: slotProps?.row,
-                      cellSlotProps: slotProps?.cell
-                    },
-                    row.id
-                  ))
+                      ...restFooterRowSlotProps,
+                      sx: mergeSx(footerRowSx, userFooterRowSx),
+                      children: [
+                        enableRowSelection && /* @__PURE__ */ jsx15(
+                          TableCell2,
+                          {
+                            padding: "checkbox",
+                            sx: mergeSx(footerCellSx, footerPinnedCellSx, {
+                              position: "sticky",
+                              left: 0,
+                              zIndex: 1
+                            })
+                          }
+                        ),
+                        footerGroup.headers.map((header) => {
+                          const sticky = header.column.columnDef.meta?.sticky;
+                          const resolvedFooterCell = resolveSlot(slotProps?.footerCell, {
+                            header
+                          });
+                          const { sx: userFooterCellSx, ...restFooterCellProps } = resolvedFooterCell ?? {};
+                          return /* @__PURE__ */ jsx15(
+                            TableCell2,
+                            {
+                              ...restFooterCellProps,
+                              "data-sticky": sticky || void 0,
+                              sx: mergeSx(
+                                cellSx(sticky, header.column.columnDef.meta?.minWidth, 3),
+                                footerCellSx,
+                                sticky ? footerPinnedCellSx : void 0,
+                                sticky ? { zIndex: 1 } : void 0,
+                                userFooterCellSx
+                              ),
+                              children: header.isPlaceholder ? null : flexRender2(
+                                header.column.columnDef.footer,
+                                header.getContext()
+                              )
+                            },
+                            header.id
+                          );
+                        })
+                      ]
+                    }
+                  )
                 }
               )
             ]