@bwp-web/components 0.13.1 → 0.13.3

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,144 @@ function cellSx(sticky, minWidth, zIndex) {
   const mw = minWidth ?? 40;
   return { minWidth: mw, maxWidth: mw };
 }
+var rowCursorPointerSx = { cursor: "pointer" };
+var selectionCellSx = {
+  position: "sticky",
+  left: 0,
+  zIndex: 2,
+  bgcolor: "background.paper",
+  ...stickyHoverBg
+};
+var checkboxHiddenSx = { visibility: "hidden" };
+var expandCellBaseSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1
+};
+var chevronExpandedSx = {
+  color: ({ palette }) => palette.text.secondary,
+  transition: "transform 150ms ease",
+  transform: "rotate(90deg)",
+  width: 16,
+  height: 16,
+  cursor: "pointer"
+};
+var chevronCollapsedSx = {
+  color: ({ palette }) => palette.text.secondary,
+  transition: "transform 150ms ease",
+  transform: "rotate(0deg)",
+  width: 16,
+  height: 16,
+  cursor: "pointer"
+};
+var expandPlaceholderSx = { width: 16 };
+var headerSelectionCellSx = {
+  position: "sticky",
+  left: 0,
+  zIndex: 3,
+  bgcolor: "background.paper"
+};
+var checkboxHiddenHeaderSx = { visibility: "hidden" };
+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: clickable ? rowCursorPointerSx : 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: selectionCellSx, 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() ? 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);
+          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: row.depth > 0 ? { ...expandCellBaseSx, pl: `${row.depth * 12}px` } : expandCellBaseSx,
+                    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: row.getIsExpanded() ? chevronExpandedSx : chevronCollapsedSx
+                        }
+                      ) : hasExpandableRows ? /* @__PURE__ */ jsx8(Box4, { sx: expandPlaceholderSx }) : 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,
@@ -699,28 +836,16 @@ function BiampTable({
             sx: { minWidth: tableMinWidth, tableLayout: "auto" },
             children: [
               /* @__PURE__ */ jsx8(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(TableRow, { children: [
-                enableRowSelection && /* @__PURE__ */ jsx8(
-                  TableCell,
+                enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx8(
+                  Checkbox,
                   {
-                    padding: "checkbox",
-                    sx: {
-                      position: "sticky",
-                      left: 0,
-                      zIndex: 3,
-                      bgcolor: "background.paper"
-                    },
-                    children: !hideSelectAll && /* @__PURE__ */ jsx8(
-                      Checkbox,
-                      {
-                        checked: table.getIsAllPageRowsSelected(),
-                        indeterminate: table.getIsSomePageRowsSelected(),
-                        onChange: table.getToggleAllPageRowsSelectedHandler(),
-                        sx: rows.length === 0 ? { visibility: "hidden" } : void 0,
-                        slotProps: { input: { "aria-label": "Select all rows" } }
-                      }
-                    )
+                    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(
@@ -759,125 +884,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 +943,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 +954,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 +1097,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 +1108,7 @@ function BiampTableToolbarActionButton({
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
   return /* @__PURE__ */ jsx12(
-    IconButton3,
+    IconButton2,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
@@ -1291,7 +1311,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 +1388,7 @@ function BiampTableToolbarFilters({
                         )
                       ] }),
                       /* @__PURE__ */ jsx18(
-                        IconButton4,
+                        IconButton3,
                         {
                           size: "medium",
                           onClick: handleClose,
@@ -1429,7 +1449,7 @@ function BiampTableToolbarFilters({
 import {
   Box as Box9,
   Collapse,
-  IconButton as IconButton5,
+  IconButton as IconButton4,
   InputAdornment as InputAdornment2,
   InputBase,
   TextField as TextField2,
@@ -1508,7 +1528,7 @@ function BiampTableToolbarSearch({
     }
   };
   const clearButton = inputValue ? /* @__PURE__ */ jsx19(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx19(
-    IconButton5,
+    IconButton4,
     {
       size: "small",
       onClick: handleClear,
@@ -1578,7 +1598,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),
@@ -1671,10 +1691,11 @@ function getDirtyColumnVisibility(visibility, defaults) {
 // src/BiampTable/useBiampServerSideTable.ts
 var coreRowModel = getCoreRowModel();
 var expandedRowModel = getExpandedRowModel();
+var defaultGetRowId = (row) => row.id;
 function useBiampServerSideTable({
   data,
   columns,
-  getRowId = (row) => row.id,
+  getRowId = defaultGetRowId,
   order,
   onOrderChange,
   page,
@@ -1690,12 +1711,11 @@ function useBiampServerSideTable({
   onExpandedChange,
   getSubRows
 }) {
-  const defaultColumnVisibility = useMemo(
-    () => getDefaultColumnVisibilityFromDefs(columns),
-    [columns]
-  );
-  const { columnIdToField, fieldToColumnId } = useMemo(
-    () => getOrderFieldMappings(columns),
+  const { defaultColumnVisibility, columnIdToField, fieldToColumnId } = useMemo(
+    () => ({
+      defaultColumnVisibility: getDefaultColumnVisibilityFromDefs(columns),
+      ...getOrderFieldMappings(columns)
+    }),
     [columns]
   );
   const sorting = useMemo(
@@ -1764,8 +1784,10 @@ function useBiampServerSideTable({
     },
     // Expanding — only when expanded state is provided
     ...expanded != null && {
-      getExpandedRowModel: expandedRowModel,
-      getSubRows,
+      // 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);