@bwp-web/components 0.13.2 → 0.13.3

package/dist/index.js

@@ -647,6 +647,44 @@ 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,
@@ -665,7 +703,7 @@ function BiampTableRowInner({
       selected: enableRowSelection ? row.getIsSelected() : void 0,
       role: clickable ? "button" : void 0,
       tabIndex: clickable ? 0 : void 0,
-      sx: { cursor: clickable ? "pointer" : 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 === " ") {
@@ -674,38 +712,23 @@ function BiampTableRowInner({
         }
       } : void 0,
       children: [
-        enableRowSelection && /* @__PURE__ */ jsx8(
-          TableCell,
+        enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: selectionCellSx, children: /* @__PURE__ */ jsx8(
+          Checkbox,
           {
-            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]
+            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}`
               }
-            },
-            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);
@@ -726,12 +749,7 @@ function BiampTableRowInner({
                 return /* @__PURE__ */ jsxs5(
                   Box4,
                   {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      pl: `${row.depth * 12}px`,
-                      gap: 1
-                    },
+                    sx: row.depth > 0 ? { ...expandCellBaseSx, pl: `${row.depth * 12}px` } : expandCellBaseSx,
                     children: [
                       row.getCanExpand() ? /* @__PURE__ */ jsx8(
                         ChevronRightIcon,
@@ -743,16 +761,9 @@ function BiampTableRowInner({
                           "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"
-                          }
+                          sx: row.getIsExpanded() ? chevronExpandedSx : chevronCollapsedSx
                         }
-                      ) : hasExpandableRows ? /* @__PURE__ */ jsx8(Box4, { sx: { width: 16 } }) : null,
+                      ) : hasExpandableRows ? /* @__PURE__ */ jsx8(Box4, { sx: expandPlaceholderSx }) : null,
                       truncated
                     ]
                   }
@@ -825,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(
@@ -1692,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,
@@ -1711,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(