@bwp-web/components 0.11.2 → 0.11.4

package/dist/index.cjs

@@ -56,6 +56,7 @@ __export(index_exports, {
   exportToCsv: () => exportToCsv,
   getColumnVisibilityDirtyCount: () => getColumnVisibilityDirtyCount,
   getDefaultColumnVisibility: () => getDefaultColumnVisibility,
+  toVisibilityState: () => toVisibilityState,
   useDebouncedCallback: () => useDebouncedCallback
 });
 module.exports = __toCommonJS(index_exports);
@@ -516,6 +517,7 @@ function BiampLayout({
 var import_material6 = require("@mui/material");
 var import_assets5 = require("@bwp-web/assets");
 var import_react_table = require("@tanstack/react-table");
+var import_react3 = require("react");
 
 // src/BiampTable/BiampTableEmptyState.tsx
 var import_assets3 = require("@bwp-web/assets");
@@ -624,198 +626,242 @@ function BiampTable({
     },
     enableRowSelection ? 48 : 0
   );
-  const totalColumns = table.getVisibleLeafColumns().length + (enableRowSelection ? 1 : 0);
+  const containerRef = (0, import_react3.useRef)(null);
+  const lastScrollLeftRef = (0, import_react3.useRef)(null);
+  const onContainerScroll = (0, import_react3.useCallback)((target) => {
+    const { scrollLeft, scrollWidth, clientWidth } = target;
+    if (!containerRef.current || lastScrollLeftRef.current === scrollLeft)
+      return;
+    containerRef.current.dataset["rightShadow"] = scrollWidth - clientWidth > scrollLeft ? "true" : "false";
+    lastScrollLeftRef.current = scrollLeft;
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver(
+      ([{ target }]) => onContainerScroll(target)
+    );
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [onContainerScroll]);
   const showLoading = useLoadingDelay(!!loading);
   const rows = table.getRowModel().rows;
-  const showError = !!error;
-  const showEmpty = !showError && rows.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const showError = !!error && !loading;
+  const showEmpty = !showError && !loading && rows.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     import_material6.TableContainer,
     {
       component: import_material6.Box,
       ...boxProps,
+      ref: containerRef,
+      onScroll: (e) => onContainerScroll(e.currentTarget),
       sx: {
         display: "flex",
         flexDirection: "column",
         height: "100%",
         overflow: "auto",
         overscrollBehavior: "none",
+        position: "relative",
+        '& [data-sticky="right"]': {
+          transition: "box-shadow .2s"
+        },
+        '&[data-right-shadow="true"] [data-sticky="right"]': {
+          boxShadow: ({ palette }) => `-16px 0px 12px -2px ${palette.background.default}`
+        },
         ...sx
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-        import_material6.Table,
-        {
-          "aria-busy": showLoading || void 0,
-          sx: {
-            minWidth: tableMinWidth,
-            height: showError || showEmpty ? "100%" : void 0
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.TableRow, { children: [
-              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                import_material6.TableCell,
-                {
-                  padding: "checkbox",
-                  sx: {
-                    position: "sticky",
-                    left: 0,
-                    zIndex: 3,
-                    bgcolor: "background.paper"
-                  },
-                  children: !hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    import_material6.Checkbox,
-                    {
-                      checked: table.getIsAllPageRowsSelected(),
-                      indeterminate: table.getIsSomePageRowsSelected(),
-                      onChange: table.getToggleAllPageRowsSelectedHandler(),
-                      slotProps: { input: { "aria-label": "Select all rows" } }
-                    }
-                  )
-                }
-              ),
-              headerGroup.headers.map((header) => {
-                const sticky = header.column.columnDef.meta?.sticky;
-                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          import_material6.Table,
+          {
+            "aria-busy": showLoading || void 0,
+            sx: { minWidth: tableMinWidth },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.TableRow, { children: [
+                enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   import_material6.TableCell,
                   {
-                    sortDirection: header.column.getIsSorted() || false,
-                    ...header.column.getCanSort() && {
-                      "aria-sort": header.column.getIsSorted() ? header.column.getIsSorted() === "asc" ? "ascending" : "descending" : "none"
-                    },
+                    padding: "checkbox",
                     sx: {
-                      minWidth: header.column.columnDef.meta?.minWidth ?? 40,
-                      ...sticky && {
-                        position: "sticky",
-                        [sticky]: 0,
-                        zIndex: 3,
-                        bgcolor: "background.paper"
-                      }
+                      position: "sticky",
+                      left: 0,
+                      zIndex: 3,
+                      bgcolor: "background.paper"
                     },
-                    children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      import_material6.TableSortLabel,
+                    children: !hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      import_material6.Checkbox,
                       {
-                        active: !!header.column.getIsSorted(),
-                        direction: header.column.getIsSorted() || "asc",
-                        onClick: header.column.getToggleSortingHandler(),
-                        ...header.column.getIsSorted() && {
-                          IconComponent: header.column.getIsSorted() === "asc" ? import_assets5.DropdownChevronUpIcon : import_assets5.DropdownChevronDownIcon
-                        },
-                        children: (0, import_react_table.flexRender)(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )
+                        checked: table.getIsAllPageRowsSelected(),
+                        indeterminate: table.getIsSomePageRowsSelected(),
+                        onChange: table.getToggleAllPageRowsSelectedHandler(),
+                        slotProps: { input: { "aria-label": "Select all rows" } }
                       }
-                    ) : (0, import_react_table.flexRender)(
-                      header.column.columnDef.header,
-                      header.getContext()
                     )
-                  },
-                  header.id
-                );
-              })
-            ] }, headerGroup.id)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: showError ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              import_material6.TableCell,
-              {
-                colSpan: totalColumns,
-                sx: {
-                  textAlign: "center",
-                  verticalAlign: "middle",
-                  height: "100%"
-                },
-                children: error === true ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BiampTableErrorState, {}) : error instanceof Error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BiampTableErrorState, { description: error.message }) : error
-              }
-            ) }) : showEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              import_material6.TableCell,
-              {
-                colSpan: totalColumns,
-                sx: {
-                  textAlign: "center",
-                  verticalAlign: "middle",
-                  height: "100%"
-                },
-                children: empty && empty !== true ? empty : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BiampTableEmptyState, {})
-              }
-            ) }) : rows.map((row) => {
-              const clickable = onRowClick ? isRowClickable ? isRowClickable(row.original) : true : false;
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                import_material6.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__ */ (0, import_jsx_runtime8.jsx)(
-                      import_material6.TableCell,
-                      {
-                        padding: "checkbox",
-                        sx: {
+                  }
+                ),
+                headerGroup.headers.map((header) => {
+                  const sticky = header.column.columnDef.meta?.sticky;
+                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    import_material6.TableCell,
+                    {
+                      "data-sticky": sticky || void 0,
+                      sortDirection: header.column.getIsSorted() || false,
+                      ...header.column.getCanSort() && {
+                        "aria-sort": header.column.getIsSorted() ? header.column.getIsSorted() === "asc" ? "ascending" : "descending" : "none"
+                      },
+                      sx: {
+                        minWidth: header.column.columnDef.meta?.minWidth ?? 40,
+                        ...sticky && {
                           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__ */ (0, import_jsx_runtime8.jsx)(
-                          import_material6.Checkbox,
-                          {
-                            checked: row.getIsSelected(),
-                            disabled: !row.getCanSelect(),
-                            onChange: row.getToggleSelectedHandler(),
-                            onClick: (e) => e.stopPropagation(),
-                            slotProps: {
-                              input: {
-                                "aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${row.index + 1}`
-                              }
-                            }
-                          }
-                        )
+                          [sticky]: 0,
+                          zIndex: 3,
+                          bgcolor: "background.paper"
+                        }
+                      },
+                      children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        import_material6.TableSortLabel,
+                        {
+                          active: !!header.column.getIsSorted(),
+                          direction: header.column.getIsSorted() || "asc",
+                          onClick: header.column.getToggleSortingHandler(),
+                          ...header.column.getIsSorted() && {
+                            IconComponent: header.column.getIsSorted() === "asc" ? import_assets5.DropdownChevronUpIcon : import_assets5.DropdownChevronDownIcon
+                          },
+                          children: (0, import_react_table.flexRender)(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        }
+                      ) : (0, import_react_table.flexRender)(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )
+                    },
+                    header.id
+                  );
+                })
+              ] }, headerGroup.id)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => {
+                const clickable = onRowClick ? isRowClickable ? isRowClickable(row.original) : true : false;
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  import_material6.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);
                       }
-                    ),
-                    row.getVisibleCells().map((cell) => {
-                      const sticky = cell.column.columnDef.meta?.sticky;
-                      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    } : void 0,
+                    children: [
+                      enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         import_material6.TableCell,
                         {
+                          padding: "checkbox",
                           sx: {
-                            minWidth: cell.column.columnDef.meta?.minWidth ?? 40,
-                            ...sticky && {
-                              position: "sticky",
-                              [sticky]: 0,
-                              zIndex: 2,
-                              bgcolor: "background.paper",
-                              ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
-                                bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
-                              }
+                            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: (0, import_react_table.flexRender)(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
+                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            import_material6.Checkbox,
+                            {
+                              checked: row.getIsSelected(),
+                              disabled: !row.getCanSelect(),
+                              onChange: row.getToggleSelectedHandler(),
+                              onClick: (e) => e.stopPropagation(),
+                              slotProps: {
+                                input: {
+                                  "aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${row.index + 1}`
+                                }
+                              }
+                            }
                           )
-                        },
-                        cell.id
-                      );
-                    })
-                  ]
-                },
-                row.id
-              );
-            }) })
-          ]
-        }
-      )
+                        }
+                      ),
+                      row.getVisibleCells().map((cell) => {
+                        const sticky = cell.column.columnDef.meta?.sticky;
+                        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          import_material6.TableCell,
+                          {
+                            "data-sticky": sticky || void 0,
+                            sx: {
+                              minWidth: cell.column.columnDef.meta?.minWidth ?? 40,
+                              ...sticky && {
+                                position: "sticky",
+                                [sticky]: 0,
+                                zIndex: 2,
+                                bgcolor: "background.paper",
+                                ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
+                                  bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
+                                }
+                              }
+                            },
+                            children: (0, import_react_table.flexRender)(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )
+                          },
+                          cell.id
+                        );
+                      })
+                    ]
+                  },
+                  row.id
+                );
+              }) })
+            ]
+          }
+        ),
+        showError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_material6.Box,
+          {
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none"
+            },
+            children: error === true ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              BiampTableErrorState,
+              {
+                description: error.message,
+                sx: { pointerEvents: "auto" }
+              }
+            ) : error
+          }
+        ),
+        showEmpty && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_material6.Box,
+          {
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none"
+            },
+            children: empty && empty !== true ? empty : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BiampTableEmptyState, { sx: { pointerEvents: "auto" } })
+          }
+        )
+      ]
     }
   );
 }
@@ -867,8 +913,10 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
 
 // src/BiampTable/BiampTableColumnVisibility.tsx
 var import_material9 = require("@mui/material");
-var import_react3 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function toVisibilityState(visibility) {
+  return visibility;
+}
 function getDefaultColumnVisibility(table) {
   const result = {};
   for (const col of table.getAllLeafColumns()) {
@@ -900,7 +948,6 @@ var columnListItemSx = {
 };
 function BiampTableColumnVisibility({
   table,
-  onChange,
   showAllLabel = "Show all",
   anchorEl,
   anchorOrigin = { vertical: "bottom", horizontal: "right" },
@@ -908,13 +955,6 @@ function BiampTableColumnVisibility({
   slotProps,
   ...popoverProps
 }) {
-  const visibility = table.getState().columnVisibility;
-  const prevVisibilityRef = (0, import_react3.useRef)(visibility);
-  (0, import_react3.useEffect)(() => {
-    if (prevVisibilityRef.current === visibility) return;
-    prevVisibilityRef.current = visibility;
-    onChange?.(visibility);
-  }, [visibility, onChange]);
   const allVisible = table.getAllLeafColumns().every((col) => col.getIsVisible());
   const someVisible = table.getAllLeafColumns().some((col) => col.getIsVisible());
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -1037,7 +1077,6 @@ function BiampTableToolbarColumnVisibility({
   icon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_assets6.ColumnsIcon, { variant: "xs" }),
   label = "Columns",
   defaultColumnVisibility,
-  onChange,
   showAllLabel,
   ...actionButtonProps
 }) {
@@ -1061,7 +1100,6 @@ function BiampTableToolbarColumnVisibility({
         table,
         anchorEl,
         onClose: () => setAnchorEl(null),
-        onChange,
         showAllLabel
       }
     )
@@ -1072,12 +1110,19 @@ function BiampTableToolbarColumnVisibility({
 var import_react5 = require("react");
 var import_material11 = require("@mui/material");
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var positionMap = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
 function BiampTablePagination({
   table,
   rowsPerPageOptions,
   loading,
   autoHide = true,
-  ...boxProps
+  position = "center",
+  sx,
+  ...paginationProps
 }) {
   const rowCount = table.getRowCount();
   const lastRowCountRef = (0, import_react5.useRef)(rowCount);
@@ -1087,7 +1132,7 @@ function BiampTablePagination({
   const stableCount = loading ? lastRowCountRef.current : rowCount;
   const pageSize = table.getState().pagination.pageSize;
   if (autoHide && !loading && stableCount <= pageSize) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material11.Box, { ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_material11.TablePagination,
     {
       component: "div",
@@ -1101,9 +1146,21 @@ function BiampTablePagination({
       },
       rowsPerPageOptions: rowsPerPageOptions ?? [],
       showFirstButton: true,
-      showLastButton: true
+      showLastButton: true,
+      sx: {
+        display: "flex",
+        justifyContent: positionMap[position],
+        height: 40,
+        minHeight: 40,
+        "& .MuiToolbar-root": {
+          minHeight: 40,
+          px: 0
+        },
+        ...sx
+      },
+      ...paginationProps
     }
-  ) });
+  );
 }
 
 // src/BiampTable/BiampTableToolbar.tsx
@@ -1331,8 +1388,11 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var searchFieldSx = {
   "& .MuiInputBase-root": {
-    height: 36,
-    minHeight: 36
+    height: "36px !important",
+    minHeight: "36px !important"
+  },
+  "& .MuiOutlinedInput-notchedOutline": {
+    height: "36px !important"
   }
 };
 function BiampTableToolbarSearch({
@@ -1516,6 +1576,7 @@ function downloadCsv(csvContent, filename) {
   exportToCsv,
   getColumnVisibilityDirtyCount,
   getDefaultColumnVisibility,
+  toVisibilityState,
   useDebouncedCallback
 });
 //# sourceMappingURL=index.cjs.map