@bwp-web/components 0.11.2 → 0.11.4

package/dist/index.js

@@ -480,6 +480,7 @@ import {
   DropdownChevronUpIcon
 } from "@bwp-web/assets";
 import { flexRender } from "@tanstack/react-table";
+import { useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
 
 // src/BiampTable/BiampTableEmptyState.tsx
 import { NoResultsIcon } from "@bwp-web/assets";
@@ -588,198 +589,242 @@ function BiampTable({
     },
     enableRowSelection ? 48 : 0
   );
-  const totalColumns = table.getVisibleLeafColumns().length + (enableRowSelection ? 1 : 0);
+  const containerRef = useRef2(null);
+  const lastScrollLeftRef = useRef2(null);
+  const onContainerScroll = 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;
+  }, []);
+  useEffect2(() => {
+    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__ */ jsx7(
+  const showError = !!error && !loading;
+  const showEmpty = !showError && !loading && rows.length === 0;
+  return /* @__PURE__ */ jsxs5(
     TableContainer,
     {
       component: Box3,
       ...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__ */ jsxs5(
-        MuiTable,
-        {
-          "aria-busy": showLoading || void 0,
-          sx: {
-            minWidth: tableMinWidth,
-            height: showError || showEmpty ? "100%" : void 0
-          },
-          children: [
-            /* @__PURE__ */ jsx7(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(TableRow, { children: [
-              enableRowSelection && /* @__PURE__ */ jsx7(
-                TableCell,
-                {
-                  padding: "checkbox",
-                  sx: {
-                    position: "sticky",
-                    left: 0,
-                    zIndex: 3,
-                    bgcolor: "background.paper"
-                  },
-                  children: !hideSelectAll && /* @__PURE__ */ jsx7(
-                    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__ */ jsx7(
+      children: [
+        /* @__PURE__ */ jsxs5(
+          MuiTable,
+          {
+            "aria-busy": showLoading || void 0,
+            sx: { minWidth: tableMinWidth },
+            children: [
+              /* @__PURE__ */ jsx7(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(TableRow, { children: [
+                enableRowSelection && /* @__PURE__ */ jsx7(
                   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__ */ jsx7(
-                      TableSortLabel,
+                    children: !hideSelectAll && /* @__PURE__ */ jsx7(
+                      Checkbox,
                       {
-                        active: !!header.column.getIsSorted(),
-                        direction: header.column.getIsSorted() || "asc",
-                        onClick: header.column.getToggleSortingHandler(),
-                        ...header.column.getIsSorted() && {
-                          IconComponent: header.column.getIsSorted() === "asc" ? DropdownChevronUpIcon : DropdownChevronDownIcon
-                        },
-                        children: flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )
+                        checked: table.getIsAllPageRowsSelected(),
+                        indeterminate: table.getIsSomePageRowsSelected(),
+                        onChange: table.getToggleAllPageRowsSelectedHandler(),
+                        slotProps: { input: { "aria-label": "Select all rows" } }
                       }
-                    ) : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
                     )
-                  },
-                  header.id
-                );
-              })
-            ] }, headerGroup.id)) }),
-            /* @__PURE__ */ jsx7(TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: showError ? /* @__PURE__ */ jsx7(TableRow, { children: /* @__PURE__ */ jsx7(
-              TableCell,
-              {
-                colSpan: totalColumns,
-                sx: {
-                  textAlign: "center",
-                  verticalAlign: "middle",
-                  height: "100%"
-                },
-                children: error === true ? /* @__PURE__ */ jsx7(BiampTableErrorState, {}) : error instanceof Error ? /* @__PURE__ */ jsx7(BiampTableErrorState, { description: error.message }) : error
-              }
-            ) }) : showEmpty ? /* @__PURE__ */ jsx7(TableRow, { children: /* @__PURE__ */ jsx7(
-              TableCell,
-              {
-                colSpan: totalColumns,
-                sx: {
-                  textAlign: "center",
-                  verticalAlign: "middle",
-                  height: "100%"
-                },
-                children: empty && empty !== true ? empty : /* @__PURE__ */ jsx7(BiampTableEmptyState, {})
-              }
-            ) }) : 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__ */ jsx7(
-                      TableCell,
-                      {
-                        padding: "checkbox",
-                        sx: {
+                  }
+                ),
+                headerGroup.headers.map((header) => {
+                  const sticky = header.column.columnDef.meta?.sticky;
+                  return /* @__PURE__ */ jsx7(
+                    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__ */ jsx7(
-                          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__ */ jsx7(
+                        TableSortLabel,
+                        {
+                          active: !!header.column.getIsSorted(),
+                          direction: header.column.getIsSorted() || "asc",
+                          onClick: header.column.getToggleSortingHandler(),
+                          ...header.column.getIsSorted() && {
+                            IconComponent: header.column.getIsSorted() === "asc" ? DropdownChevronUpIcon : DropdownChevronDownIcon
+                          },
+                          children: flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        }
+                      ) : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )
+                    },
+                    header.id
+                  );
+                })
+              ] }, headerGroup.id)) }),
+              /* @__PURE__ */ jsx7(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);
                       }
-                    ),
-                    row.getVisibleCells().map((cell) => {
-                      const sticky = cell.column.columnDef.meta?.sticky;
-                      return /* @__PURE__ */ jsx7(
+                    } : void 0,
+                    children: [
+                      enableRowSelection && /* @__PURE__ */ jsx7(
                         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: flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
+                          children: /* @__PURE__ */ jsx7(
+                            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__ */ jsx7(
+                          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: flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )
+                          },
+                          cell.id
+                        );
+                      })
+                    ]
+                  },
+                  row.id
+                );
+              }) })
+            ]
+          }
+        ),
+        showError && /* @__PURE__ */ jsx7(
+          Box3,
+          {
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none"
+            },
+            children: error === true ? /* @__PURE__ */ jsx7(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ jsx7(
+              BiampTableErrorState,
+              {
+                description: error.message,
+                sx: { pointerEvents: "auto" }
+              }
+            ) : error
+          }
+        ),
+        showEmpty && /* @__PURE__ */ jsx7(
+          Box3,
+          {
+            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__ */ jsx7(BiampTableEmptyState, { sx: { pointerEvents: "auto" } })
+          }
+        )
+      ]
     }
   );
 }
@@ -840,8 +885,10 @@ import {
   Popover as Popover2,
   Typography as Typography3
 } from "@mui/material";
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function toVisibilityState(visibility) {
+  return visibility;
+}
 function getDefaultColumnVisibility(table) {
   const result = {};
   for (const col of table.getAllLeafColumns()) {
@@ -873,7 +920,6 @@ var columnListItemSx = {
 };
 function BiampTableColumnVisibility({
   table,
-  onChange,
   showAllLabel = "Show all",
   anchorEl,
   anchorOrigin = { vertical: "bottom", horizontal: "right" },
@@ -881,13 +927,6 @@ function BiampTableColumnVisibility({
   slotProps,
   ...popoverProps
 }) {
-  const visibility = table.getState().columnVisibility;
-  const prevVisibilityRef = useRef2(visibility);
-  useEffect2(() => {
-    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__ */ jsx10(
@@ -1013,7 +1052,6 @@ function BiampTableToolbarColumnVisibility({
   icon = /* @__PURE__ */ jsx12(ColumnsIcon, { variant: "xs" }),
   label = "Columns",
   defaultColumnVisibility,
-  onChange,
   showAllLabel,
   ...actionButtonProps
 }) {
@@ -1037,7 +1075,6 @@ function BiampTableToolbarColumnVisibility({
         table,
         anchorEl,
         onClose: () => setAnchorEl(null),
-        onChange,
         showAllLabel
       }
     )
@@ -1046,14 +1083,21 @@ function BiampTableToolbarColumnVisibility({
 
 // src/BiampTable/BiampTablePagination.tsx
 import { useRef as useRef3 } from "react";
-import { Box as Box5, TablePagination } from "@mui/material";
+import { TablePagination } from "@mui/material";
 import { jsx as jsx13 } from "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 = useRef3(rowCount);
@@ -1063,7 +1107,7 @@ function BiampTablePagination({
   const stableCount = loading ? lastRowCountRef.current : rowCount;
   const pageSize = table.getState().pagination.pageSize;
   if (autoHide && !loading && stableCount <= pageSize) return null;
-  return /* @__PURE__ */ jsx13(Box5, { ...boxProps, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx13(
     TablePagination,
     {
       component: "div",
@@ -1077,13 +1121,25 @@ 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
-import { Box as Box6 } from "@mui/material";
+import { Box as Box5 } from "@mui/material";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function BiampTableToolbar({
   children,
@@ -1091,7 +1147,7 @@ function BiampTableToolbar({
   ...props
 }) {
   return /* @__PURE__ */ jsx14(
-    Box6,
+    Box5,
     {
       role: "toolbar",
       display: "flex",
@@ -1109,13 +1165,13 @@ function BiampTableToolbar({
 }
 
 // src/BiampTable/BiampTableToolbarActions.tsx
-import { Box as Box7 } from "@mui/material";
+import { Box as Box6 } from "@mui/material";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function BiampTableToolbarActions({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(Box7, { display: "flex", alignItems: "center", gap: 1, ml: "auto", ...props, children });
+  return /* @__PURE__ */ jsx15(Box6, { display: "flex", alignItems: "center", gap: 1, ml: "auto", ...props, children });
 }
 
 // src/BiampTable/BiampTableToolbarExport.tsx
@@ -1144,7 +1200,7 @@ function BiampTableToolbarExport({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 import {
   Badge as Badge2,
-  Box as Box8,
+  Box as Box7,
   Button,
   Divider as Divider2,
   Drawer,
@@ -1196,16 +1252,16 @@ function BiampTableToolbarFilters({
           ...drawerProps?.PaperProps
         },
         children: /* @__PURE__ */ jsxs8(
-          Box8,
+          Box7,
           {
             height: "100%",
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsxs8(Box8, { children: [
+              /* @__PURE__ */ jsxs8(Box7, { children: [
                 /* @__PURE__ */ jsxs8(
-                  Box8,
+                  Box7,
                   {
                     display: "flex",
                     justifyContent: "space-between",
@@ -1238,7 +1294,7 @@ function BiampTableToolbarFilters({
                 ),
                 /* @__PURE__ */ jsx17(Divider2, {}),
                 /* @__PURE__ */ jsx17(
-                  Box8,
+                  Box7,
                   {
                     role: "group",
                     "aria-label": "Filter options",
@@ -1251,7 +1307,7 @@ function BiampTableToolbarFilters({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs8(Box8, { display: "flex", children: [
+              /* @__PURE__ */ jsxs8(Box7, { display: "flex", children: [
                 /* @__PURE__ */ jsx17(
                   Button,
                   {
@@ -1284,7 +1340,7 @@ function BiampTableToolbarFilters({
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
 import {
-  Box as Box9,
+  Box as Box8,
   Collapse,
   IconButton as IconButton4,
   InputAdornment as InputAdornment2,
@@ -1294,7 +1350,7 @@ import { CloseIcon as CloseIcon2, SearchIcon as SearchIcon2 } from "@bwp-web/ass
 import { useEffect as useEffect4, useState as useState4 } from "react";
 
 // src/BiampTable/useDebouncedCallback.ts
-import { useCallback, useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef4 } from "react";
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
   const timeoutRef = useRef4(null);
@@ -1305,7 +1361,7 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useCallback(
+  return useCallback2(
     (...args) => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(
@@ -1321,8 +1377,11 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var searchFieldSx = {
   "& .MuiInputBase-root": {
-    height: 36,
-    minHeight: 36
+    height: "36px !important",
+    minHeight: "36px !important"
+  },
+  "& .MuiOutlinedInput-notchedOutline": {
+    height: "36px !important"
   }
 };
 function BiampTableToolbarSearch({
@@ -1402,7 +1461,7 @@ function BiampTableToolbarSearch({
     }
   );
   if (expandable) {
-    return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", minWidth: 28, children: [
+    return /* @__PURE__ */ jsxs9(Box8, { display: "flex", alignItems: "center", minWidth: 28, children: [
       /* @__PURE__ */ jsx18(
         IconButton4,
         {
@@ -1505,6 +1564,7 @@ export {
   exportToCsv,
   getColumnVisibilityDirtyCount,
   getDefaultColumnVisibility,
+  toVisibilityState,
   useDebouncedCallback
 };
 //# sourceMappingURL=index.js.map