@bwp-web/components 0.13.4 → 0.13.6

package/dist/index.js

@@ -467,6 +467,7 @@ function BiampLayout({
 import {
   Box as Box4,
   Checkbox,
+  IconButton,
   Table as MuiTable,
   TableBody,
   TableCell,
@@ -476,6 +477,7 @@ import {
   TableSortLabel
 } from "@mui/material";
 import {
+  ChevronDownIcon,
   ChevronRightIcon,
   DropdownChevronDownIcon,
   DropdownChevronUpIcon
@@ -566,6 +568,7 @@ function BiampTableTruncatedCell({
       children: /* @__PURE__ */ jsx7(
         Box3,
         {
+          "data-truncate": true,
           ref: textRef,
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
@@ -645,7 +648,11 @@ function cellSx(sticky, minWidth, zIndex) {
     };
   }
   const mw = minWidth ?? 40;
-  return { minWidth: mw, maxWidth: mw };
+  return {
+    minWidth: mw,
+    whiteSpace: "nowrap",
+    "&:has([data-truncate])": { maxWidth: mw, whiteSpace: "normal" }
+  };
 }
 var rowCursorPointerSx = { cursor: "pointer" };
 var selectionCellSx = {
@@ -659,25 +666,9 @@ 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"
+  gap: "2px"
 };
-var expandPlaceholderSx = { width: 16 };
+var expandPlaceholderSx = { width: 28 };
 var headerSelectionCellSx = {
   position: "sticky",
   left: 0,
@@ -687,6 +678,8 @@ var headerSelectionCellSx = {
 var checkboxHiddenHeaderSx = { visibility: "hidden" };
 function BiampTableRowInner({
   row,
+  isExpanded,
+  isSelected,
   onRowClick,
   isRowClickable,
   enableRowSelection,
@@ -700,7 +693,7 @@ function BiampTableRowInner({
     TableRow,
     {
       hover: clickable,
-      selected: enableRowSelection ? row.getIsSelected() : void 0,
+      selected: enableRowSelection ? isSelected : void 0,
       role: clickable ? "button" : void 0,
       tabIndex: clickable ? 0 : void 0,
       sx: clickable ? rowCursorPointerSx : void 0,
@@ -715,7 +708,7 @@ function BiampTableRowInner({
         enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: selectionCellSx, children: /* @__PURE__ */ jsx8(
           Checkbox,
           {
-            checked: row.getIsSelected(),
+            checked: isSelected,
             disabled: !row.getCanSelect(),
             onChange: (e) => row.toggleSelected(e.target.checked, {
               selectChildren: selectChildrenWithParent
@@ -732,19 +725,22 @@ function BiampTableRowInner({
         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);
+          const content = flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          );
           return /* @__PURE__ */ jsx8(
             TableCell,
             {
               "data-sticky": sticky || void 0,
-              sx: cellSx(sticky, cell.column.columnDef.meta?.minWidth, 2),
+              sx: {
+                ...cellSx(sticky, cell.column.columnDef.meta?.minWidth, 2),
+                pl: isExpandCell ? "6px" : "12px"
+              },
               children: (() => {
-                const content = flexRender(
-                  cell.column.columnDef.cell,
-                  cell.getContext()
-                );
                 if (sticky) return content;
-                const isText = typeof content === "string" || typeof content === "number" || typeof content === "bigint";
-                const truncated = isText ? /* @__PURE__ */ jsx8(BiampTableTruncatedCell, { children: content }) : content;
+                const truncate = cell.column.columnDef.meta?.truncate ?? true;
+                const truncated = truncate ? /* @__PURE__ */ jsx8(BiampTableTruncatedCell, { children: content }) : content;
                 if (!isExpandCell) return truncated;
                 const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
                 return /* @__PURE__ */ jsxs5(
@@ -753,16 +749,32 @@ function BiampTableRowInner({
                     sx: row.depth > 0 ? { ...expandCellBaseSx, pl: `${row.depth * 12}px` } : expandCellBaseSx,
                     children: [
                       row.getCanExpand() ? /* @__PURE__ */ jsx8(
-                        ChevronRightIcon,
+                        IconButton,
                         {
+                          variant: "none",
                           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
+                          "aria-label": isExpanded ? `Collapse ${rowLabel}` : `Expand ${rowLabel}`,
+                          "aria-expanded": isExpanded,
+                          children: isExpanded ? /* @__PURE__ */ jsx8(
+                            ChevronDownIcon,
+                            {
+                              variant: "xs",
+                              sx: {
+                                color: ({ palette }) => palette.text.secondary
+                              }
+                            }
+                          ) : /* @__PURE__ */ jsx8(
+                            ChevronRightIcon,
+                            {
+                              variant: "xs",
+                              sx: {
+                                color: ({ palette }) => palette.text.secondary
+                              }
+                            }
+                          )
                         }
                       ) : hasExpandableRows ? /* @__PURE__ */ jsx8(Box4, { sx: expandPlaceholderSx }) : null,
                       truncated
@@ -780,7 +792,7 @@ function BiampTableRowInner({
   );
 }
 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;
+  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;
 }
 var BiampTableRow = React2.memo(
   BiampTableRowInner,
@@ -824,8 +836,6 @@ function BiampTable({
         display: "flex",
         flexDirection: "column",
         height: "100%",
-        overflow: "auto",
-        overscrollBehavior: "none",
         position: "relative",
         ...sx
       },
@@ -889,6 +899,8 @@ function BiampTable({
                 BiampTableRow,
                 {
                   row,
+                  isExpanded: row.getIsExpanded(),
+                  isSelected: row.getIsSelected(),
                   onRowClick,
                   isRowClickable,
                   enableRowSelection,
@@ -944,7 +956,7 @@ function BiampTableContainer({
 }
 
 // src/BiampTable/BiampTableCellActionButton.tsx
-import { IconButton, Tooltip as Tooltip2 } from "@mui/material";
+import { IconButton as IconButton2, Tooltip as Tooltip2 } from "@mui/material";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function BiampTableCellActionButton({ label, icon, ...props }) {
   return /* @__PURE__ */ jsx10(
@@ -955,7 +967,7 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
       enterDelay: 500,
       enterNextDelay: 500,
       disableInteractive: true,
-      children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(IconButton, { "aria-label": label, ...props, children: icon }) })
+      children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(IconButton2, { "aria-label": label, ...props, children: icon }) })
     }
   );
 }
@@ -1098,7 +1110,7 @@ import { useState as useState3 } from "react";
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 import {
   Badge,
-  IconButton as IconButton2
+  IconButton as IconButton3
 } from "@mui/material";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function BiampTableToolbarActionButton({
@@ -1109,7 +1121,7 @@ function BiampTableToolbarActionButton({
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
   return /* @__PURE__ */ jsx12(
-    IconButton2,
+    IconButton3,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
@@ -1312,7 +1324,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";
@@ -1389,7 +1401,7 @@ function BiampTableToolbarFilters({
                         )
                       ] }),
                       /* @__PURE__ */ jsx18(
-                        IconButton3,
+                        IconButton4,
                         {
                           size: "medium",
                           onClick: handleClose,
@@ -1450,7 +1462,7 @@ function BiampTableToolbarFilters({
 import {
   Box as Box9,
   Collapse,
-  IconButton as IconButton4,
+  IconButton as IconButton5,
   InputAdornment as InputAdornment2,
   InputBase,
   TextField as TextField2,
@@ -1529,7 +1541,7 @@ function BiampTableToolbarSearch({
     }
   };
   const clearButton = inputValue ? /* @__PURE__ */ jsx19(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx19(
-    IconButton4,
+    IconButton5,
     {
       size: "small",
       onClick: handleClear,
@@ -1599,7 +1611,7 @@ function BiampTableToolbarSearch({
   if (expandable) {
     return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", minWidth: 28, children: [
       /* @__PURE__ */ jsx19(
-        IconButton4,
+        IconButton5,
         {
           "aria-label": expandLabel ?? placeholder,
           onClick: () => setIsExpanded(true),