@bwp-web/components 1.2.0 → 1.3.1

package/dist/index.js

@@ -909,7 +909,9 @@ import {
   DropdownChevronDownIcon,
   DropdownChevronUpIcon
 } from "@bwp-web/assets";
-import { flexRender } from "@tanstack/react-table";
+import {
+  flexRender
+} from "@tanstack/react-table";
 import React2, { useRef as useRef3 } from "react";
 
 // src/BiampTable/BiampTableEmptyState.tsx
@@ -1043,6 +1045,15 @@ function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
   return status === "loading" || status === "ending";
 }
 
+// src/BiampTable/slotProps.ts
+function resolveSlot(slot, ctx) {
+  if (!slot) return void 0;
+  return typeof slot === "function" ? slot(ctx) : slot;
+}
+function mergeSx(...inputs) {
+  return inputs.filter((v) => Boolean(v)).flatMap((v) => Array.isArray(v) ? v : [v]);
+}
+
 // src/BiampTable/BiampTable.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var overlaySx = {
@@ -1113,42 +1124,71 @@ function BiampTableRowInner({
   enableExpanding,
   selectChildrenWithParent,
   getRowLabel,
-  hasExpandableRows
+  hasExpandableRows,
+  customColor,
+  rowSlotProps,
+  cellSlotProps
 }) {
   const clickable = onRowClick ? isRowClickable ? isRowClickable(row.original) : true : false;
+  const resolvedRow = resolveSlot(rowSlotProps, { row });
+  const {
+    sx: userRowSx,
+    onClick: userRowOnClick,
+    onKeyDown: userRowOnKeyDown,
+    ...restRowProps
+  } = resolvedRow ?? {};
   return /* @__PURE__ */ jsxs5(
     TableRow,
     {
+      ...restRowProps,
       hover: clickable,
       selected: enableRowSelection ? isSelected : void 0,
       role: clickable ? "button" : void 0,
       tabIndex: clickable ? 0 : void 0,
-      sx: clickable ? rowCursorPointerSx : void 0,
-      onClick: clickable && onRowClick ? () => onRowClick(row.original) : void 0,
+      sx: mergeSx(
+        clickable && rowCursorPointerSx,
+        customColor ? { backgroundColor: customColor } : void 0,
+        userRowSx
+      ),
+      onClick: clickable && onRowClick ? (e) => {
+        onRowClick(row.original);
+        userRowOnClick?.(e);
+      } : userRowOnClick,
       onKeyDown: clickable && onRowClick ? (e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           onRowClick(row.original);
         }
-      } : void 0,
+        userRowOnKeyDown?.(e);
+      } : userRowOnKeyDown,
       children: [
-        enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: selectionCellSx, children: /* @__PURE__ */ jsx8(
-          Checkbox,
+        enableRowSelection && /* @__PURE__ */ jsx8(
+          TableCell,
           {
-            checked: isSelected,
-            disabled: !row.getCanSelect(),
-            onChange: (e) => row.toggleSelected(e.target.checked, {
-              selectChildren: selectChildrenWithParent
-            }),
-            onClick: (e) => e.stopPropagation(),
-            sx: !row.getCanSelect() ? checkboxHiddenSx : void 0,
-            slotProps: {
-              input: {
-                "aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${row.index + 1}`
+            padding: "checkbox",
+            sx: mergeSx(
+              selectionCellSx,
+              customColor ? { backgroundColor: customColor } : void 0
+            ),
+            children: /* @__PURE__ */ jsx8(
+              Checkbox,
+              {
+                checked: isSelected,
+                disabled: !row.getCanSelect(),
+                onChange: (e) => row.toggleSelected(e.target.checked, {
+                  selectChildren: selectChildrenWithParent
+                }),
+                onClick: (e) => e.stopPropagation(),
+                sx: !row.getCanSelect() ? checkboxHiddenSx : void 0,
+                slotProps: {
+                  input: {
+                    "aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${row.index + 1}`
+                  }
+                }
               }
-            }
+            )
           }
-        ) }),
+        ),
         row.getVisibleCells().map((cell, cellIndex, cells) => {
           const sticky = cell.column.columnDef.meta?.sticky;
           const isExpandCell = enableExpanding && !sticky && cellIndex === cells.findIndex((c) => !c.column.columnDef.meta?.sticky);
@@ -1156,14 +1196,19 @@ function BiampTableRowInner({
             cell.column.columnDef.cell,
             cell.getContext()
           );
+          const resolvedCell = resolveSlot(cellSlotProps, { cell });
+          const { sx: userCellSx, ...restCellProps } = resolvedCell ?? {};
           return /* @__PURE__ */ jsx8(
             TableCell,
             {
+              ...restCellProps,
               "data-sticky": sticky || void 0,
-              sx: {
-                ...cellSx(sticky, cell.column.columnDef.meta?.minWidth, 2),
-                pl: isExpandCell ? "6px" : "12px"
-              },
+              sx: mergeSx(
+                cellSx(sticky, cell.column.columnDef.meta?.minWidth, 2),
+                { pl: isExpandCell ? "6px" : "12px" },
+                sticky && customColor ? { backgroundColor: customColor } : void 0,
+                userCellSx
+              ),
               children: (() => {
                 if (sticky) return content;
                 const truncate = cell.column.columnDef.meta?.truncate ?? true;
@@ -1219,7 +1264,7 @@ function BiampTableRowInner({
   );
 }
 function biampTableRowPropsAreEqual(prev, next) {
-  return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.isExpanded === next.isExpanded && prev.row.getVisibleCells().length === next.row.getVisibleCells().length && prev.enableRowSelection === next.enableRowSelection && prev.enableExpanding === next.enableExpanding && prev.hasExpandableRows === next.hasExpandableRows && prev.selectChildrenWithParent === next.selectChildrenWithParent && prev.onRowClick === next.onRowClick && prev.isRowClickable === next.isRowClickable && prev.getRowLabel === next.getRowLabel;
+  return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.isExpanded === next.isExpanded && prev.row.getVisibleCells().length === next.row.getVisibleCells().length && prev.enableRowSelection === next.enableRowSelection && prev.enableExpanding === next.enableExpanding && prev.hasExpandableRows === next.hasExpandableRows && prev.selectChildrenWithParent === next.selectChildrenWithParent && prev.onRowClick === next.onRowClick && prev.isRowClickable === next.isRowClickable && prev.getRowLabel === next.getRowLabel && prev.customColor === next.customColor && prev.rowSlotProps === next.rowSlotProps && prev.cellSlotProps === next.cellSlotProps;
 }
 var BiampTableRow = React2.memo(
   BiampTableRowInner,
@@ -1237,9 +1282,15 @@ function BiampTable({
   hideSelectAll,
   selectChildrenWithParent = false,
   getRowLabel,
+  setRowColor,
+  slotProps,
   sx,
   ...boxProps
 }) {
+  const { sx: userTableSx, ...restTableSlotProps } = slotProps?.table ?? {};
+  const { sx: userHeadSx, ...restHeadSlotProps } = slotProps?.head ?? {};
+  const { sx: userBodySx, ...restBodySlotProps } = slotProps?.body ?? {};
+  const { sx: userHeaderRowSx, ...restHeaderRowSlotProps } = slotProps?.headerRow ?? {};
   const tableMinWidth = table.getVisibleLeafColumns().reduce(
     (sum, col) => {
       const mw = col.columnDef.meta?.minWidth;
@@ -1271,73 +1322,99 @@ function BiampTable({
           MuiTable,
           {
             "aria-busy": showLoading || void 0,
-            sx: { minWidth: tableMinWidth, tableLayout: "auto" },
+            ...restTableSlotProps,
+            sx: mergeSx(
+              { minWidth: tableMinWidth, tableLayout: "auto" },
+              userTableSx
+            ),
             children: [
-              /* @__PURE__ */ jsx8(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(TableRow, { children: [
-                enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx8(
-                  Checkbox,
-                  {
-                    checked: table.getIsAllPageRowsSelected(),
-                    indeterminate: table.getIsSomePageRowsSelected(),
-                    onChange: table.getToggleAllPageRowsSelectedHandler(),
-                    sx: rows.length === 0 ? checkboxHiddenHeaderSx : void 0,
-                    slotProps: { input: { "aria-label": "Select all rows" } }
-                  }
-                ) }),
-                headerGroup.headers.map((header) => {
-                  const sticky = header.column.columnDef.meta?.sticky;
-                  return /* @__PURE__ */ jsx8(
-                    TableCell,
-                    {
-                      "data-sticky": sticky || void 0,
-                      sortDirection: header.column.getIsSorted() || false,
-                      ...header.column.getCanSort() && {
-                        "aria-sort": header.column.getIsSorted() ? header.column.getIsSorted() === "asc" ? "ascending" : "descending" : "none"
-                      },
-                      sx: cellSx(
-                        sticky,
-                        header.column.columnDef.meta?.minWidth,
-                        3
-                      ),
-                      children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx8(
-                        TableSortLabel,
+              /* @__PURE__ */ jsx8(TableHead, { ...restHeadSlotProps, sx: mergeSx(userHeadSx), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(
+                TableRow,
+                {
+                  ...restHeaderRowSlotProps,
+                  sx: mergeSx(userHeaderRowSx),
+                  children: [
+                    enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx8(
+                      Checkbox,
+                      {
+                        checked: table.getIsAllPageRowsSelected(),
+                        indeterminate: table.getIsSomePageRowsSelected(),
+                        onChange: table.getToggleAllPageRowsSelectedHandler(),
+                        sx: rows.length === 0 ? checkboxHiddenHeaderSx : void 0,
+                        slotProps: { input: { "aria-label": "Select all rows" } }
+                      }
+                    ) }),
+                    headerGroup.headers.map((header) => {
+                      const sticky = header.column.columnDef.meta?.sticky;
+                      const resolvedHeaderCell = resolveSlot(slotProps?.headerCell, {
+                        header
+                      });
+                      const { sx: userHeaderCellSx, ...restHeaderCellProps } = resolvedHeaderCell ?? {};
+                      return /* @__PURE__ */ jsx8(
+                        TableCell,
                         {
-                          active: !!header.column.getIsSorted(),
-                          direction: header.column.getIsSorted() || "asc",
-                          onClick: header.column.getToggleSortingHandler(),
-                          ...header.column.getIsSorted() && {
-                            IconComponent: header.column.getIsSorted() === "asc" ? DropdownChevronUpIcon : DropdownChevronDownIcon
+                          ...restHeaderCellProps,
+                          "data-sticky": sticky || void 0,
+                          sortDirection: header.column.getIsSorted() || false,
+                          ...header.column.getCanSort() && {
+                            "aria-sort": header.column.getIsSorted() ? header.column.getIsSorted() === "asc" ? "ascending" : "descending" : "none"
                           },
-                          children: flexRender(
+                          sx: mergeSx(
+                            cellSx(sticky, header.column.columnDef.meta?.minWidth, 3),
+                            userHeaderCellSx
+                          ),
+                          children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx8(
+                            TableSortLabel,
+                            {
+                              active: !!header.column.getIsSorted(),
+                              direction: header.column.getIsSorted() || "asc",
+                              onClick: header.column.getToggleSortingHandler(),
+                              ...header.column.getIsSorted() && {
+                                IconComponent: header.column.getIsSorted() === "asc" ? DropdownChevronUpIcon : DropdownChevronDownIcon
+                              },
+                              children: flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )
+                            }
+                          ) : flexRender(
                             header.column.columnDef.header,
                             header.getContext()
                           )
-                        }
-                      ) : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )
-                    },
-                    header.id
-                  );
-                })
-              ] }, headerGroup.id)) }),
-              /* @__PURE__ */ jsx8(TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => /* @__PURE__ */ jsx8(
-                BiampTableRow,
-                {
-                  row,
-                  isExpanded: row.getIsExpanded(),
-                  isSelected: row.getIsSelected(),
-                  onRowClick,
-                  isRowClickable,
-                  enableRowSelection,
-                  enableExpanding,
-                  selectChildrenWithParent,
-                  getRowLabel,
-                  hasExpandableRows
+                        },
+                        header.id
+                      );
+                    })
+                  ]
                 },
-                row.id
-              )) })
+                headerGroup.id
+              )) }),
+              /* @__PURE__ */ jsx8(
+                TableBody,
+                {
+                  ...restBodySlotProps,
+                  sx: mergeSx({ opacity: showLoading ? 0.3 : 1 }, userBodySx),
+                  children: !showError && rows.map((row) => /* @__PURE__ */ jsx8(
+                    BiampTableRow,
+                    {
+                      row,
+                      isExpanded: row.getIsExpanded(),
+                      isSelected: row.getIsSelected(),
+                      onRowClick,
+                      isRowClickable,
+                      enableRowSelection,
+                      enableExpanding,
+                      selectChildrenWithParent,
+                      getRowLabel,
+                      hasExpandableRows,
+                      customColor: setRowColor?.(row.original),
+                      rowSlotProps: slotProps?.row,
+                      cellSlotProps: slotProps?.cell
+                    },
+                    row.id
+                  ))
+                }
+              )
             ]
           }
         ),