@bwp-web/components 0.11.7 → 0.12.0

package/dist/index.js

@@ -467,6 +467,7 @@ function BiampLayout({
 import {
   Box as Box3,
   Checkbox,
+  IconButton,
   Table as MuiTable,
   TableBody,
   TableCell,
@@ -476,6 +477,7 @@ import {
   TableSortLabel
 } from "@mui/material";
 import {
+  ChevronRightIcon,
   DropdownChevronDownIcon,
   DropdownChevronUpIcon
 } from "@bwp-web/assets";
@@ -577,6 +579,7 @@ function BiampTable({
   error,
   empty,
   enableRowSelection = false,
+  enableExpanding = false,
   hideSelectAll,
   getRowLabel,
   sx,
@@ -592,6 +595,7 @@ function BiampTable({
   const containerRef = useRef2(null);
   const showLoading = useLoadingDelay(!!loading);
   const rows = table.getRowModel().rows;
+  const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
   const showError = !!error && !loading;
   const showEmpty = !showError && !loading && rows.length === 0;
   return /* @__PURE__ */ jsxs5(
@@ -732,8 +736,11 @@ function BiampTable({
                           )
                         }
                       ),
-                      row.getVisibleCells().map((cell) => {
+                      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__ */ jsx7(
                           TableCell,
                           {
@@ -753,7 +760,45 @@ function BiampTable({
                                 }
                               }
                             },
-                            children: flexRender(
+                            children: isExpandCell ? /* @__PURE__ */ jsxs5(
+                              Box3,
+                              {
+                                sx: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  pl: `${row.depth * 12}px`
+                                },
+                                children: [
+                                  row.getCanExpand() ? /* @__PURE__ */ jsx7(
+                                    IconButton,
+                                    {
+                                      variant: "none",
+                                      onClick: (e) => {
+                                        e.stopPropagation();
+                                        row.toggleExpanded();
+                                      },
+                                      "aria-label": row.getIsExpanded() ? `Collapse ${getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`}` : `Expand ${getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`}`,
+                                      "aria-expanded": row.getIsExpanded(),
+                                      children: /* @__PURE__ */ jsx7(
+                                        ChevronRightIcon,
+                                        {
+                                          variant: "xs",
+                                          sx: {
+                                            color: ({ palette }) => palette.text.secondary,
+                                            transition: "transform 150ms ease",
+                                            transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)"
+                                          }
+                                        }
+                                      )
+                                    }
+                                  ) : hasExpandableRows ? /* @__PURE__ */ jsx7(Box3, { sx: { width: 28 } }) : null,
+                                  flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext()
+                                  )
+                                ]
+                              }
+                            ) : flexRender(
                               cell.column.columnDef.cell,
                               cell.getContext()
                             )
@@ -843,7 +888,7 @@ function BiampTableContainer({
 }
 
 // src/BiampTable/BiampTableCellActionButton.tsx
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton as IconButton2, Tooltip } from "@mui/material";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function BiampTableCellActionButton({ label, icon, ...props }) {
   return /* @__PURE__ */ jsx9(
@@ -854,7 +899,7 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
       enterDelay: 500,
       enterNextDelay: 500,
       disableInteractive: true,
-      children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(IconButton, { "aria-label": label, ...props, children: icon }) })
+      children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(IconButton2, { "aria-label": label, ...props, children: icon }) })
     }
   );
 }
@@ -939,6 +984,7 @@ function BiampTableColumnVisibility({
         /* @__PURE__ */ jsxs6(
           ListItem,
           {
+            dense: true,
             sx: columnListItemSx,
             onClick: () => table.toggleAllColumnsVisible(!allVisible),
             children: [
@@ -947,39 +993,45 @@ function BiampTableColumnVisibility({
                 {
                   checked: allVisible,
                   indeterminate: !allVisible && someVisible,
-                  size: "small",
                   slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
                 }
               ),
-              /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: showAllLabel })
+              /* @__PURE__ */ jsx10(Typography3, { variant: "caption", fontWeight: 600, children: showAllLabel })
             ]
           }
         ),
         /* @__PURE__ */ jsx10(Divider, {}),
-        /* @__PURE__ */ jsx10(Box4, { sx: { maxHeight: 340, overflow: "auto" }, children: table.getAllLeafColumns().map((column) => {
-          const columnName = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
-          return /* @__PURE__ */ jsxs6(
-            ListItem,
-            {
-              sx: columnListItemSx,
-              onClick: column.getToggleVisibilityHandler(),
-              children: [
-                /* @__PURE__ */ jsx10(
-                  Checkbox2,
-                  {
-                    checked: column.getIsVisible(),
-                    size: "small",
-                    slotProps: {
-                      input: { "aria-label": `Show ${columnName}` }
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: columnName })
-              ]
-            },
-            column.id
-          );
-        }) })
+        /* @__PURE__ */ jsx10(
+          Box4,
+          {
+            sx: { maxHeight: 340, overflow: "auto", overscrollBehavior: "none" },
+            children: table.getAllLeafColumns().map((column) => {
+              const columnName = column.columnDef.meta?.columnLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
+              return /* @__PURE__ */ jsxs6(
+                ListItem,
+                {
+                  dense: true,
+                  sx: columnListItemSx,
+                  onClick: column.getToggleVisibilityHandler(),
+                  children: [
+                    /* @__PURE__ */ jsx10(
+                      Checkbox2,
+                      {
+                        checked: column.getIsVisible(),
+                        sx: { py: 1 },
+                        slotProps: {
+                          input: { "aria-label": `Show ${columnName}` }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: columnName })
+                  ]
+                },
+                column.id
+              );
+            })
+          }
+        )
       ] })
     }
   );
@@ -992,7 +1044,7 @@ import { useState as useState2 } from "react";
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 import {
   Badge,
-  IconButton as IconButton2
+  IconButton as IconButton3
 } from "@mui/material";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function BiampTableToolbarActionButton({
@@ -1003,7 +1055,7 @@ function BiampTableToolbarActionButton({
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
   return /* @__PURE__ */ jsx11(
-    IconButton2,
+    IconButton3,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
@@ -1204,7 +1256,7 @@ import {
   Button,
   Divider as Divider2,
   Drawer,
-  IconButton as IconButton3,
+  IconButton as IconButton4,
   Typography as Typography4
 } from "@mui/material";
 import { CloseIcon, FilterIcon } from "@bwp-web/assets";
@@ -1281,7 +1333,7 @@ function BiampTableToolbarFilters({
                         )
                       ] }),
                       /* @__PURE__ */ jsx17(
-                        IconButton3,
+                        IconButton4,
                         {
                           size: "medium",
                           onClick: handleClose,
@@ -1342,7 +1394,7 @@ function BiampTableToolbarFilters({
 import {
   Box as Box8,
   Collapse,
-  IconButton as IconButton4,
+  IconButton as IconButton5,
   InputAdornment as InputAdornment2,
   InputBase,
   TextField as TextField2,
@@ -1421,7 +1473,7 @@ function BiampTableToolbarSearch({
     }
   };
   const clearButton = inputValue ? /* @__PURE__ */ jsx18(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx18(
-    IconButton4,
+    IconButton5,
     {
       size: "small",
       onClick: handleClear,
@@ -1491,7 +1543,7 @@ function BiampTableToolbarSearch({
   if (expandable) {
     return /* @__PURE__ */ jsxs9(Box8, { display: "flex", alignItems: "center", minWidth: 28, children: [
       /* @__PURE__ */ jsx18(
-        IconButton4,
+        IconButton5,
         {
           "aria-label": expandLabel ?? placeholder,
           onClick: () => setIsExpanded(true),