@bwp-web/components 0.11.3 → 0.11.4

package/dist/BiampTable/BiampTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BiampTable.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,QAAQ,EAUd,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,iBAAiB,CAAC;AAGzB,MAAM,MAAM,eAAe,CAAC,KAAK,IAAI,QAAQ,GAAG;IAC9C,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC;IACzC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wKAAwK;IACxK,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACpC,6IAA6I;IAC7I,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gIAAgI;IAChI,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;CACtC,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,EAChC,KAAK,EACL,UAAU,EACV,cAAc,EACd,OAAO,EACP,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,EAAE,EACF,GAAG,QAAQ,EACZ,EAAE,eAAe,CAAC,KAAK,CAAC,2CAmQxB"}
+{"version":3,"file":"BiampTable.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,QAAQ,EAUd,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAc,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AAG9E,OAAO,iBAAiB,CAAC;AAGzB,MAAM,MAAM,eAAe,CAAC,KAAK,IAAI,QAAQ,GAAG;IAC9C,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC;IACzC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wKAAwK;IACxK,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACpC,6IAA6I;IAC7I,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gIAAgI;IAChI,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;CACtC,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,EAChC,KAAK,EACL,UAAU,EACV,cAAc,EACd,OAAO,EACP,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,EAAE,EACF,GAAG,QAAQ,EACZ,EAAE,eAAe,CAAC,KAAK,CAAC,2CAgTxB"}

package/dist/BiampTable/BiampTablePagination.d.ts

@@ -1,4 +1,4 @@
-import { Box, type TablePaginationProps } from '@mui/material';
+import { type TablePaginationProps } from '@mui/material';
 import type { Table } from '@tanstack/react-table';
 export type BiampTablePaginationProps<TData> = {
     /** TanStack Table instance to connect to. */
@@ -9,6 +9,8 @@ export type BiampTablePaginationProps<TData> = {
     loading?: boolean;
     /** Hide pagination when all rows fit on one page. @default true */
     autoHide?: boolean;
-} & Omit<TablePaginationProps<typeof Box>, 'component' | 'count' | 'page' | 'rowsPerPage' | 'onPageChange' | 'onRowsPerPageChange' | 'rowsPerPageOptions'>;
-export declare function BiampTablePagination<TData>({ table, rowsPerPageOptions, loading, autoHide, sx, ...paginationProps }: BiampTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+    /** Horizontal alignment of the pagination controls. @default 'center' */
+    position?: 'left' | 'center' | 'right';
+} & Omit<TablePaginationProps<'div'>, 'component' | 'count' | 'page' | 'rowsPerPage' | 'onPageChange' | 'onRowsPerPageChange' | 'rowsPerPageOptions' | 'position'>;
+export declare function BiampTablePagination<TData>({ table, rowsPerPageOptions, loading, autoHide, position, sx, ...paginationProps }: BiampTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=BiampTablePagination.d.ts.map

package/dist/BiampTable/BiampTablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BiampTablePagination.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTablePagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAmB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,MAAM,yBAAyB,CAAC,KAAK,IAAI;IAC7C,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CACN,oBAAoB,CAAC,OAAO,GAAG,CAAC,EAC9B,WAAW,GACX,OAAO,GACP,MAAM,GACN,aAAa,GACb,cAAc,GACd,qBAAqB,GACrB,oBAAoB,CACvB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,kBAAkB,EAClB,OAAO,EACP,QAAe,EACf,EAAE,EACF,GAAG,eAAe,EACnB,EAAE,yBAAyB,CAAC,KAAK,CAAC,kDAwClC"}
+{"version":3,"file":"BiampTablePagination.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTablePagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,MAAM,yBAAyB,CAAC,KAAK,IAAI;IAC7C,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,GAAG,IAAI,CACN,oBAAoB,CAAC,KAAK,CAAC,EACzB,WAAW,GACX,OAAO,GACP,MAAM,GACN,aAAa,GACb,cAAc,GACd,qBAAqB,GACrB,oBAAoB,GACpB,UAAU,CACb,CAAC;AAQF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,kBAAkB,EAClB,OAAO,EACP,QAAe,EACf,QAAmB,EACnB,EAAE,EACF,GAAG,eAAe,EACnB,EAAE,yBAAyB,CAAC,KAAK,CAAC,kDA0ClC"}

package/dist/BiampTable/BiampTableToolbarSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BiampTableToolbarSearch.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTableToolbarSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,4BAA4B,GAAG;IACzC,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uGAAuG;IACvG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+GAA+G;IAC/G,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC,CAAC;AAShE,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,YAAiB,EACjB,aAA0C,EAC1C,SAAe,EACf,QAAc,EACd,WAAsB,EACtB,UAA2B,EAC3B,UAAkB,EAClB,WAAW,EACX,EAAE,EACF,GAAG,cAAc,EAClB,EAAE,4BAA4B,2CAmG9B"}
+{"version":3,"file":"BiampTableToolbarSearch.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTableToolbarSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,4BAA4B,GAAG;IACzC,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uGAAuG;IACvG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+GAA+G;IAC/G,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC,CAAC;AAYhE,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,YAAiB,EACjB,aAA0C,EAC1C,SAAe,EACf,QAAc,EACd,WAAsB,EACtB,UAA2B,EAC3B,UAAkB,EAClB,WAAW,EACX,EAAE,EACF,GAAG,cAAc,EAClB,EAAE,4BAA4B,2CAmG9B"}

package/dist/index.cjs

@@ -517,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");
@@ -625,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" } })
+          }
+        )
+      ]
     }
   );
 }
@@ -985,7 +1030,7 @@ function BiampTableColumnVisibility({
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
 var import_assets6 = require("@bwp-web/assets");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 var import_material10 = require("@mui/material");
@@ -1035,7 +1080,7 @@ function BiampTableToolbarColumnVisibility({
   showAllLabel,
   ...actionButtonProps
 }) {
-  const [anchorEl, setAnchorEl] = (0, import_react3.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react4.useState)(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
@@ -1062,19 +1107,25 @@ function BiampTableToolbarColumnVisibility({
 }
 
 // src/BiampTable/BiampTablePagination.tsx
-var import_react4 = require("react");
+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,
+  position = "center",
   sx,
   ...paginationProps
 }) {
   const rowCount = table.getRowCount();
-  const lastRowCountRef = (0, import_react4.useRef)(rowCount);
+  const lastRowCountRef = (0, import_react5.useRef)(rowCount);
   if (!loading && rowCount >= 0) {
     lastRowCountRef.current = rowCount;
   }
@@ -1084,7 +1135,7 @@ function BiampTablePagination({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_material11.TablePagination,
     {
-      component: import_material11.Box,
+      component: "div",
       count: stableCount,
       page: table.getState().pagination.pageIndex,
       rowsPerPage: table.getState().pagination.pageSize,
@@ -1097,6 +1148,8 @@ function BiampTablePagination({
       showFirstButton: true,
       showLastButton: true,
       sx: {
+        display: "flex",
+        justifyContent: positionMap[position],
         height: 40,
         minHeight: 40,
         "& .MuiToolbar-root": {
@@ -1172,7 +1225,7 @@ function BiampTableToolbarExport({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 var import_material15 = require("@mui/material");
 var import_assets8 = require("@bwp-web/assets");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function BiampTableToolbarFilters({
   activeFilterCount,
@@ -1187,8 +1240,8 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const titleId = (0, import_react5.useId)();
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const titleId = (0, import_react6.useId)();
   function handleClose() {
     onApply?.();
     setOpen(false);
@@ -1305,21 +1358,21 @@ function BiampTableToolbarFilters({
 // src/BiampTable/BiampTableToolbarSearch.tsx
 var import_material16 = require("@mui/material");
 var import_assets9 = require("@bwp-web/assets");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/BiampTable/useDebouncedCallback.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
-  const timeoutRef = (0, import_react6.useRef)(null);
-  const callbackRef = (0, import_react6.useRef)(callback);
+  const timeoutRef = (0, import_react7.useRef)(null);
+  const callbackRef = (0, import_react7.useRef)(callback);
   callbackRef.current = callback;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
   }, []);
-  return (0, import_react6.useCallback)(
+  return (0, import_react7.useCallback)(
     (...args) => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(
@@ -1335,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({
@@ -1352,10 +1408,10 @@ function BiampTableToolbarSearch({
   sx,
   ...textFieldProps
 }) {
-  const [inputValue, setInputValue] = (0, import_react7.useState)(defaultValue);
-  const [isExpanded, setIsExpanded] = (0, import_react7.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react8.useState)(defaultValue);
+  const [isExpanded, setIsExpanded] = (0, import_react8.useState)(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setInputValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (e) => {