@bwp-web/components 0.13.0 → 0.13.2

package/dist/index.js

@@ -467,7 +467,6 @@ function BiampLayout({
 import {
   Box as Box4,
   Checkbox,
-  IconButton,
   Table as MuiTable,
   TableBody,
   TableCell,
@@ -482,7 +481,7 @@ import {
   DropdownChevronUpIcon
 } from "@bwp-web/assets";
 import { flexRender } from "@tanstack/react-table";
-import { useRef as useRef3 } from "react";
+import React2, { useRef as useRef3 } from "react";
 
 // src/BiampTable/BiampTableEmptyState.tsx
 import { NoResultsIcon } from "@bwp-web/assets";
@@ -648,6 +647,133 @@ function cellSx(sticky, minWidth, zIndex) {
   const mw = minWidth ?? 40;
   return { minWidth: mw, maxWidth: mw };
 }
+function BiampTableRowInner({
+  row,
+  onRowClick,
+  isRowClickable,
+  enableRowSelection,
+  enableExpanding,
+  selectChildrenWithParent,
+  getRowLabel,
+  hasExpandableRows
+}) {
+  const clickable = onRowClick ? isRowClickable ? isRowClickable(row.original) : true : false;
+  return /* @__PURE__ */ jsxs5(
+    TableRow,
+    {
+      hover: clickable,
+      selected: enableRowSelection ? row.getIsSelected() : void 0,
+      role: clickable ? "button" : void 0,
+      tabIndex: clickable ? 0 : void 0,
+      sx: { cursor: clickable ? "pointer" : void 0 },
+      onClick: clickable && onRowClick ? () => onRowClick(row.original) : void 0,
+      onKeyDown: clickable && onRowClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onRowClick(row.original);
+        }
+      } : void 0,
+      children: [
+        enableRowSelection && /* @__PURE__ */ jsx8(
+          TableCell,
+          {
+            padding: "checkbox",
+            sx: {
+              position: "sticky",
+              left: 0,
+              zIndex: 2,
+              bgcolor: "background.paper",
+              ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
+                bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
+              }
+            },
+            children: /* @__PURE__ */ jsx8(
+              Checkbox,
+              {
+                checked: row.getIsSelected(),
+                disabled: !row.getCanSelect(),
+                onChange: (e) => row.toggleSelected(e.target.checked, {
+                  selectChildren: selectChildrenWithParent
+                }),
+                onClick: (e) => e.stopPropagation(),
+                sx: !row.getCanSelect() ? { visibility: "hidden" } : 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);
+          return /* @__PURE__ */ jsx8(
+            TableCell,
+            {
+              "data-sticky": sticky || void 0,
+              sx: cellSx(sticky, cell.column.columnDef.meta?.minWidth, 2),
+              children: (() => {
+                const content = flexRender(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                );
+                if (sticky) return content;
+                const truncated = /* @__PURE__ */ jsx8(BiampTableTruncatedCell, { children: content });
+                if (!isExpandCell) return truncated;
+                const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
+                return /* @__PURE__ */ jsxs5(
+                  Box4,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      pl: `${row.depth * 12}px`,
+                      gap: 1
+                    },
+                    children: [
+                      row.getCanExpand() ? /* @__PURE__ */ jsx8(
+                        ChevronRightIcon,
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            row.toggleExpanded();
+                          },
+                          "aria-label": row.getIsExpanded() ? `Collapse ${rowLabel}` : `Expand ${rowLabel}`,
+                          "aria-expanded": row.getIsExpanded(),
+                          variant: "xs",
+                          sx: {
+                            color: ({ palette }) => palette.text.secondary,
+                            transition: "transform 150ms ease",
+                            transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)",
+                            width: 16,
+                            height: 16,
+                            cursor: "pointer"
+                          }
+                        }
+                      ) : hasExpandableRows ? /* @__PURE__ */ jsx8(Box4, { sx: { width: 16 } }) : null,
+                      truncated
+                    ]
+                  }
+                );
+              })()
+            },
+            cell.id
+          );
+        })
+      ]
+    },
+    row.id
+  );
+}
+function biampTableRowPropsAreEqual(prev, next) {
+  return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.row.getIsSelected() === next.row.getIsSelected() && prev.row.getIsExpanded() === next.row.getIsExpanded() && 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;
+}
+var BiampTableRow = React2.memo(
+  BiampTableRowInner,
+  biampTableRowPropsAreEqual
+);
 function BiampTable({
   table,
   onRowClick,
@@ -759,125 +885,20 @@ function BiampTable({
                   );
                 })
               ] }, headerGroup.id)) }),
-              /* @__PURE__ */ jsx8(TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => {
-                const clickable = onRowClick ? isRowClickable ? isRowClickable(row.original) : true : false;
-                return /* @__PURE__ */ jsxs5(
-                  TableRow,
-                  {
-                    hover: clickable,
-                    selected: enableRowSelection ? row.getIsSelected() : void 0,
-                    role: clickable ? "button" : void 0,
-                    tabIndex: clickable ? 0 : void 0,
-                    sx: { cursor: clickable ? "pointer" : void 0 },
-                    onClick: clickable && onRowClick ? () => onRowClick(row.original) : void 0,
-                    onKeyDown: clickable && onRowClick ? (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        onRowClick(row.original);
-                      }
-                    } : void 0,
-                    children: [
-                      enableRowSelection && /* @__PURE__ */ jsx8(
-                        TableCell,
-                        {
-                          padding: "checkbox",
-                          sx: {
-                            position: "sticky",
-                            left: 0,
-                            zIndex: 2,
-                            bgcolor: "background.paper",
-                            ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
-                              bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
-                            }
-                          },
-                          children: /* @__PURE__ */ jsx8(
-                            Checkbox,
-                            {
-                              checked: row.getIsSelected(),
-                              disabled: !row.getCanSelect(),
-                              onChange: (e) => row.toggleSelected(e.target.checked, {
-                                selectChildren: selectChildrenWithParent
-                              }),
-                              onClick: (e) => e.stopPropagation(),
-                              sx: !row.getCanSelect() ? { visibility: "hidden" } : 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
-                        );
-                        return /* @__PURE__ */ jsx8(
-                          TableCell,
-                          {
-                            "data-sticky": sticky || void 0,
-                            sx: cellSx(
-                              sticky,
-                              cell.column.columnDef.meta?.minWidth,
-                              2
-                            ),
-                            children: (() => {
-                              const content = flexRender(
-                                cell.column.columnDef.cell,
-                                cell.getContext()
-                              );
-                              if (sticky) return content;
-                              const truncated = /* @__PURE__ */ jsx8(BiampTableTruncatedCell, { children: content });
-                              if (!isExpandCell) return truncated;
-                              const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
-                              return /* @__PURE__ */ jsxs5(
-                                Box4,
-                                {
-                                  sx: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    pl: `${row.depth * 12}px`
-                                  },
-                                  children: [
-                                    row.getCanExpand() ? /* @__PURE__ */ jsx8(
-                                      IconButton,
-                                      {
-                                        variant: "none",
-                                        onClick: (e) => {
-                                          e.stopPropagation();
-                                          row.toggleExpanded();
-                                        },
-                                        "aria-label": row.getIsExpanded() ? `Collapse ${rowLabel}` : `Expand ${rowLabel}`,
-                                        "aria-expanded": row.getIsExpanded(),
-                                        children: /* @__PURE__ */ jsx8(
-                                          ChevronRightIcon,
-                                          {
-                                            variant: "xs",
-                                            sx: {
-                                              color: ({ palette }) => palette.text.secondary,
-                                              transition: "transform 150ms ease",
-                                              transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)"
-                                            }
-                                          }
-                                        )
-                                      }
-                                    ) : hasExpandableRows ? /* @__PURE__ */ jsx8(Box4, { sx: { width: 28 } }) : null,
-                                    truncated
-                                  ]
-                                }
-                              );
-                            })()
-                          },
-                          cell.id
-                        );
-                      })
-                    ]
-                  },
-                  row.id
-                );
-              }) })
+              /* @__PURE__ */ jsx8(TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => /* @__PURE__ */ jsx8(
+                BiampTableRow,
+                {
+                  row,
+                  onRowClick,
+                  isRowClickable,
+                  enableRowSelection,
+                  enableExpanding,
+                  selectChildrenWithParent,
+                  getRowLabel,
+                  hasExpandableRows
+                },
+                row.id
+              )) })
             ]
           }
         ),
@@ -923,7 +944,7 @@ function BiampTableContainer({
 }
 
 // src/BiampTable/BiampTableCellActionButton.tsx
-import { IconButton as IconButton2, Tooltip as Tooltip2 } from "@mui/material";
+import { IconButton, Tooltip as Tooltip2 } from "@mui/material";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function BiampTableCellActionButton({ label, icon, ...props }) {
   return /* @__PURE__ */ jsx10(
@@ -934,7 +955,7 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
       enterDelay: 500,
       enterNextDelay: 500,
       disableInteractive: true,
-      children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(IconButton2, { "aria-label": label, ...props, children: icon }) })
+      children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(IconButton, { "aria-label": label, ...props, children: icon }) })
     }
   );
 }
@@ -1077,7 +1098,7 @@ import { useState as useState3 } from "react";
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 import {
   Badge,
-  IconButton as IconButton3
+  IconButton as IconButton2
 } from "@mui/material";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function BiampTableToolbarActionButton({
@@ -1088,7 +1109,7 @@ function BiampTableToolbarActionButton({
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
   return /* @__PURE__ */ jsx12(
-    IconButton3,
+    IconButton2,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
@@ -1291,7 +1312,7 @@ import {
   Button,
   Divider as Divider2,
   Drawer,
-  IconButton as IconButton4,
+  IconButton as IconButton3,
   Typography as Typography4
 } from "@mui/material";
 import { CloseIcon, FilterIcon } from "@bwp-web/assets";
@@ -1368,7 +1389,7 @@ function BiampTableToolbarFilters({
                         )
                       ] }),
                       /* @__PURE__ */ jsx18(
-                        IconButton4,
+                        IconButton3,
                         {
                           size: "medium",
                           onClick: handleClose,
@@ -1429,7 +1450,7 @@ function BiampTableToolbarFilters({
 import {
   Box as Box9,
   Collapse,
-  IconButton as IconButton5,
+  IconButton as IconButton4,
   InputAdornment as InputAdornment2,
   InputBase,
   TextField as TextField2,
@@ -1508,7 +1529,7 @@ function BiampTableToolbarSearch({
     }
   };
   const clearButton = inputValue ? /* @__PURE__ */ jsx19(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx19(
-    IconButton5,
+    IconButton4,
     {
       size: "small",
       onClick: handleClear,
@@ -1578,7 +1599,7 @@ function BiampTableToolbarSearch({
   if (expandable) {
     return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", minWidth: 28, children: [
       /* @__PURE__ */ jsx19(
-        IconButton5,
+        IconButton4,
         {
           "aria-label": expandLabel ?? placeholder,
           onClick: () => setIsExpanded(true),
@@ -1610,6 +1631,7 @@ function BiampTableToolbarSearch({
 // src/BiampTable/useBiampServerSideTable.ts
 import {
   getCoreRowModel,
+  getExpandedRowModel,
   useReactTable
 } from "@tanstack/react-table";
 import { useMemo } from "react";
@@ -1669,6 +1691,7 @@ function getDirtyColumnVisibility(visibility, defaults) {
 
 // src/BiampTable/useBiampServerSideTable.ts
 var coreRowModel = getCoreRowModel();
+var expandedRowModel = getExpandedRowModel();
 function useBiampServerSideTable({
   data,
   columns,
@@ -1683,7 +1706,10 @@ function useBiampServerSideTable({
   onColumnVisibilityChange,
   selectedRowIds,
   onSelectedRowIdsChange,
-  enableRowSelection
+  enableRowSelection,
+  expanded,
+  onExpandedChange,
+  getSubRows
 }) {
   const defaultColumnVisibility = useMemo(
     () => getDefaultColumnVisibilityFromDefs(columns),
@@ -1726,7 +1752,8 @@ function useBiampServerSideTable({
       sorting,
       ...pagination && { pagination },
       columnVisibility: mergedVisibility,
-      ...rowSelection && { rowSelection }
+      ...rowSelection && { rowSelection },
+      ...expanded != null && { expanded }
     },
     onSortingChange: onOrderChange ? (updater) => {
       const next = typeof updater === "function" ? updater(sorting) : updater;
@@ -1755,6 +1782,17 @@ function useBiampServerSideTable({
         const next = typeof updater === "function" ? updater(rowSelection) : updater;
         onSelectedRowIdsChange(rowSelectionToSelectedIds(next));
       } : void 0
+    },
+    // Expanding — only when expanded state is provided
+    ...expanded != null && {
+      // Only attach getExpandedRowModel when getSubRows is provided.
+      // Without it, the expanded model recomputes on every state change
+      // (including selection), adding unnecessary overhead.
+      ...getSubRows && { getExpandedRowModel: expandedRowModel, getSubRows },
+      onExpandedChange: onExpandedChange ? (updater) => {
+        const next = typeof updater === "function" ? updater(expanded) : updater;
+        onExpandedChange(next);
+      } : void 0
     }
   });
 }