@bwp-web/components 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BIAMP_TABLE_DEBOUNCE_DELAY: () => BIAMP_TABLE_DEBOUNCE_DELAY,
   BiampAppDialog: () => BiampAppDialog,
   BiampAppDialogItem: () => BiampAppDialogItem,
   BiampAppPopover: () => BiampAppPopover,
@@ -35,7 +36,23 @@ __export(index_exports, {
   BiampSidebarComponent: () => BiampSidebarComponent,
   BiampSidebarIcon: () => BiampSidebarIcon,
   BiampSidebarIconList: () => BiampSidebarIconList,
-  BiampWrapper: () => BiampWrapper
+  BiampTable: () => BiampTable,
+  BiampTableCellActionButton: () => BiampTableCellActionButton,
+  BiampTableColumnVisibility: () => BiampTableColumnVisibility,
+  BiampTableContainer: () => BiampTableContainer,
+  BiampTableEmptyState: () => BiampTableEmptyState,
+  BiampTableErrorState: () => BiampTableErrorState,
+  BiampTablePagination: () => BiampTablePagination,
+  BiampTableStatusMessage: () => BiampTableStatusMessage,
+  BiampTableToolbar: () => BiampTableToolbar,
+  BiampTableToolbarActionButton: () => BiampTableToolbarActionButton,
+  BiampTableToolbarActions: () => BiampTableToolbarActions,
+  BiampTableToolbarExport: () => BiampTableToolbarExport,
+  BiampTableToolbarFilters: () => BiampTableToolbarFilters,
+  BiampTableToolbarSearch: () => BiampTableToolbarSearch,
+  BiampWrapper: () => BiampWrapper,
+  getColumnVisibilityDirtyCount: () => getColumnVisibilityDirtyCount,
+  useDebouncedCallback: () => useDebouncedCallback
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -490,8 +507,840 @@ function BiampLayout({
     }
   );
 }
+
+// src/BiampTable/BiampTable.tsx
+var import_material6 = require("@mui/material");
+var import_assets5 = require("@bwp-web/assets");
+var import_react_table = require("@tanstack/react-table");
+
+// src/BiampTable/BiampTableEmptyState.tsx
+var import_assets3 = require("@bwp-web/assets");
+
+// src/BiampTable/BiampTableStatusMessage.tsx
+var import_material5 = require("@mui/material");
+var import_react = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function BiampTableStatusMessage({
+  icon,
+  title,
+  description,
+  children,
+  ...stackProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Stack, { alignItems: "center", gap: 2, ...stackProps, children: [
+    (0, import_react.cloneElement)(icon, {
+      "aria-hidden": true,
+      sx: { width: 56, height: 56, ...icon.props.sx }
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "h2", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "body1", children: description }),
+    children
+  ] });
+}
+
+// src/BiampTable/BiampTableEmptyState.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function BiampTableEmptyState({
+  icon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_assets3.NoResultsIcon, {}),
+  title = "Nothing to show",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    BiampTableStatusMessage,
+    {
+      role: "status",
+      icon,
+      title,
+      ...rest
+    }
+  );
+}
+
+// src/BiampTable/BiampTableErrorState.tsx
+var import_assets4 = require("@bwp-web/assets");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function BiampTableErrorState({
+  icon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_assets4.ServiceNotReachableIcon, {}),
+  title = "Failed to load",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BiampTableStatusMessage, { role: "alert", icon, title, ...rest });
+}
+
+// src/BiampTable/useLoadingDelay.ts
+var import_react2 = require("react");
+function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
+  const [status, setStatus] = (0, import_react2.useState)("idle");
+  const timeoutRef = (0, import_react2.useRef)(null);
+  function clearPending() {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }
+  (0, import_react2.useEffect)(() => {
+    if (loading && status === "idle") {
+      clearPending();
+      timeoutRef.current = setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
+          setStatus("ending");
+        }, minDuration);
+        setStatus("loading");
+      }, delay);
+      setStatus("delaying");
+    }
+    if (!loading && status !== "loading") {
+      clearPending();
+      setStatus("idle");
+    }
+  }, [loading, delay, minDuration, status]);
+  (0, import_react2.useEffect)(() => clearPending, []);
+  return status === "loading" || status === "ending";
+}
+
+// src/BiampTable/BiampTable.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function BiampTable({
+  table,
+  onRowClick,
+  isRowClickable,
+  loading,
+  error,
+  empty,
+  hideSelectAll,
+  getRowLabel,
+  sx,
+  ...boxProps
+}) {
+  const enableRowSelection = table.options.enableRowSelection === true || typeof table.options.enableRowSelection === "function";
+  const tableMinWidth = table.getVisibleLeafColumns().reduce(
+    (sum, col) => {
+      const mw = col.columnDef.meta?.minWidth;
+      return sum + (typeof mw === "number" ? mw : 40);
+    },
+    enableRowSelection ? 48 : 0
+  );
+  const totalColumns = table.getVisibleLeafColumns().length + (enableRowSelection ? 1 : 0);
+  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)(
+    import_material6.TableContainer,
+    {
+      component: import_material6.Box,
+      ...boxProps,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "auto",
+        overscrollBehavior: "none",
+        ...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)(
+                  import_material6.TableCell,
+                  {
+                    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",
+                        [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 ? /* @__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
+              }
+            ) }) : 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: {
+                          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}`
+                              }
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    row.getVisibleCells().map((cell) => {
+                      const sticky = cell.column.columnDef.meta?.sticky;
+                      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        import_material6.TableCell,
+                        {
+                          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
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/BiampTable/BiampTableContainer.tsx
+var import_material7 = require("@mui/material");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function BiampTableContainer({
+  withBorderTop = true,
+  withBorderBottom = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_material7.Stack,
+    {
+      direction: "column",
+      height: "100%",
+      overflow: "hidden",
+      py: { xs: 0, md: 1.5 },
+      gap: { xs: 0, md: 1 },
+      borderTop: withBorderTop ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0,
+      borderBottom: withBorderBottom ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/BiampTable/BiampTableCellActionButton.tsx
+var import_material8 = require("@mui/material");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function BiampTableCellActionButton({ label, icon, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_material8.Tooltip,
+    {
+      title: label,
+      placement: "top",
+      enterDelay: 500,
+      enterNextDelay: 500,
+      disableInteractive: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material8.IconButton, { "aria-label": label, ...props, children: icon }) })
+    }
+  );
+}
+
+// src/BiampTable/BiampTableColumnVisibility.tsx
+var import_material9 = require("@mui/material");
+var import_react3 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function getColumnVisibilityDirtyCount(table, defaultVisibility = {}) {
+  const current = table.getState().columnVisibility;
+  let count = 0;
+  for (const col of table.getAllLeafColumns()) {
+    const isVisible = current[col.id] ?? true;
+    const wasVisible = defaultVisibility[col.id] ?? true;
+    if (isVisible !== wasVisible) count++;
+  }
+  return count;
+}
+var columnListItemSx = {
+  py: 0,
+  pr: 1.5,
+  pl: 0,
+  alignItems: "center",
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
+  }
+};
+function BiampTableColumnVisibility({
+  table,
+  onChange,
+  showAllLabel = "Show all",
+  anchorEl,
+  anchorOrigin = { vertical: "bottom", horizontal: "right" },
+  transformOrigin = { vertical: "top", horizontal: "right" },
+  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)(
+    import_material9.Popover,
+    {
+      anchorEl,
+      open: Boolean(anchorEl),
+      anchorOrigin,
+      transformOrigin,
+      slotProps: {
+        ...slotProps,
+        paper: {
+          sx: ({ palette }) => ({
+            borderRadius: "6px",
+            backgroundImage: "none",
+            border: `0.6px solid ${palette.dividers.secondary}`,
+            boxShadow: `0px 1px 1px 0px ${(0, import_material9.alpha)(palette.common.black, 0.05)}`,
+            minWidth: "150px"
+          }),
+          ...slotProps?.paper ?? {}
+        }
+      },
+      ...popoverProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material9.List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          import_material9.ListItem,
+          {
+            sx: columnListItemSx,
+            onClick: () => table.toggleAllColumnsVisible(!allVisible),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_material9.Checkbox,
+                {
+                  checked: allVisible,
+                  indeterminate: !allVisible && someVisible,
+                  size: "small",
+                  slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Typography, { variant: "caption", children: showAllLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Box, { sx: { maxHeight: 340, overflow: "auto" }, children: table.getAllLeafColumns().map((column) => {
+          const columnName = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_material9.ListItem,
+            {
+              sx: columnListItemSx,
+              onClick: column.getToggleVisibilityHandler(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_material9.Checkbox,
+                  {
+                    checked: column.getIsVisible(),
+                    size: "small",
+                    slotProps: {
+                      input: { "aria-label": `Show ${columnName}` }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Typography, { variant: "caption", children: columnName })
+              ]
+            },
+            column.id
+          );
+        }) })
+      ] })
+    }
+  );
+}
+
+// src/BiampTable/BiampTablePagination.tsx
+var import_react4 = require("react");
+var import_material10 = require("@mui/material");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function BiampTablePagination({
+  table,
+  rowsPerPageOptions,
+  loading,
+  autoHide = true,
+  ...boxProps
+}) {
+  const rowCount = table.getRowCount();
+  const lastRowCountRef = (0, import_react4.useRef)(rowCount);
+  if (!loading && rowCount >= 0) {
+    lastRowCountRef.current = rowCount;
+  }
+  const stableCount = loading ? lastRowCountRef.current : rowCount;
+  const pageSize = table.getState().pagination.pageSize;
+  if (autoHide && !loading && stableCount <= pageSize) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Box, { ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_material10.TablePagination,
+    {
+      component: "div",
+      count: stableCount,
+      page: table.getState().pagination.pageIndex,
+      rowsPerPage: table.getState().pagination.pageSize,
+      onPageChange: (_, page) => table.setPageIndex(page),
+      onRowsPerPageChange: (e) => {
+        table.setPageSize(Number(e.target.value));
+        table.setPageIndex(0);
+      },
+      rowsPerPageOptions: rowsPerPageOptions ?? [],
+      showFirstButton: true,
+      showLastButton: true
+    }
+  ) });
+}
+
+// src/BiampTable/BiampTableToolbar.tsx
+var import_material11 = require("@mui/material");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function BiampTableToolbar({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_material11.Box,
+    {
+      role: "toolbar",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: 1,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/BiampTable/BiampTableToolbarActionButton.tsx
+var import_material12 = require("@mui/material");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function BiampTableToolbarActionButton({
+  label,
+  icon,
+  badgeContent,
+  ...props
+}) {
+  const showBadge = badgeContent != null && badgeContent !== 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_material12.IconButton,
+    {
+      "aria-label": showBadge ? `${label} (${badgeContent})` : label,
+      ...props,
+      children: showBadge ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_material12.Badge,
+        {
+          badgeContent,
+          color: "info",
+          variant: "dot",
+          sx: {
+            "& .MuiBadge-badge": {
+              width: 6,
+              height: 6,
+              minWidth: 6,
+              borderRadius: "50%",
+              top: 0,
+              right: -3
+            }
+          },
+          children: icon
+        }
+      ) : icon
+    }
+  );
+}
+
+// src/BiampTable/BiampTableToolbarActions.tsx
+var import_material13 = require("@mui/material");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function BiampTableToolbarActions({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Box, { display: "flex", alignItems: "center", gap: 1, ml: "auto", ...props, children });
+}
+
+// src/BiampTable/BiampTableToolbarExport.tsx
+var import_material14 = require("@mui/material");
+var import_assets6 = require("@bwp-web/assets");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function BiampTableToolbarExport({
+  onExport,
+  loading,
+  icon = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_assets6.DownloadIcon, { variant: "xs" }),
+  label = "Export",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    BiampTableToolbarActionButton,
+    {
+      label: loading ? `${label}, loading` : label,
+      icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.CircularProgress, { size: 20, color: "inherit" }) : icon,
+      disabled: loading,
+      onClick: onExport,
+      ...props
+    }
+  );
+}
+
+// src/BiampTable/BiampTableToolbarFilters.tsx
+var import_material15 = require("@mui/material");
+var import_assets7 = require("@bwp-web/assets");
+var import_react5 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function BiampTableToolbarFilters({
+  activeFilterCount,
+  children,
+  onReset,
+  onApply,
+  icon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_assets7.FilterIcon, { variant: "xs" }),
+  title = "Filters",
+  resetLabel = "Clear filters",
+  applyLabel = "Apply",
+  closeLabel = "Close",
+  buttonLabel = "Filters",
+  DrawerProps: drawerProps
+}) {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const titleId = (0, import_react5.useId)();
+  function handleClose() {
+    onApply?.();
+    setOpen(false);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      BiampTableToolbarActionButton,
+      {
+        label: buttonLabel,
+        icon,
+        badgeContent: activeFilterCount,
+        onClick: () => setOpen(true)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_material15.Drawer,
+      {
+        anchor: "right",
+        open,
+        onClose: handleClose,
+        "aria-labelledby": titleId,
+        ...drawerProps,
+        PaperProps: {
+          sx: { width: { xs: "100%", sm: 480 } },
+          ...drawerProps?.PaperProps
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          import_material15.Box,
+          {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                  import_material15.Box,
+                  {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    px: 3.5,
+                    py: 2.5,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Typography, { id: titleId, variant: "h2", children: [
+                        title,
+                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                          import_material15.Badge,
+                          {
+                            badgeContent: activeFilterCount,
+                            color: "secondary",
+                            sx: { ml: 1.5, mb: 0.5 }
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                        import_material15.IconButton,
+                        {
+                          size: "medium",
+                          onClick: handleClose,
+                          "aria-label": closeLabel,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_assets7.CloseIcon, {})
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Divider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_material15.Box,
+                  {
+                    role: "group",
+                    "aria-label": "Filter options",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 2,
+                    p: 3.5,
+                    overflow: "auto",
+                    children
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Box, { display: "flex", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_material15.Button,
+                  {
+                    variant: "overlay",
+                    color: "secondary",
+                    fullWidth: true,
+                    onClick: onReset,
+                    disabled: activeFilterCount === 0,
+                    children: resetLabel
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_material15.Button,
+                  {
+                    variant: "overlay",
+                    color: "primary",
+                    fullWidth: true,
+                    onClick: handleClose,
+                    children: applyLabel
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/BiampTable/BiampTableToolbarSearch.tsx
+var import_material16 = require("@mui/material");
+var import_assets8 = require("@bwp-web/assets");
+var import_react7 = require("react");
+
+// src/BiampTable/useDebouncedCallback.ts
+var import_react6 = 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);
+  callbackRef.current = callback;
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return (0, import_react6.useCallback)(
+    (...args) => {
+      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(
+        () => callbackRef.current(...args),
+        delay
+      );
+    },
+    [delay]
+  );
+}
+
+// src/BiampTable/BiampTableToolbarSearch.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var searchFieldSx = {
+  "& .MuiInputBase-root": {
+    height: 36,
+    minHeight: 36
+  }
+};
+function BiampTableToolbarSearch({
+  onChange,
+  defaultValue = "",
+  debounceDelay = BIAMP_TABLE_DEBOUNCE_DELAY,
+  maxLength = 120,
+  maxWidth = 280,
+  placeholder = "Search",
+  clearLabel = "Clear search",
+  sx,
+  ...textFieldProps
+}) {
+  const [inputValue, setInputValue] = (0, import_react7.useState)(defaultValue);
+  const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
+  (0, import_react7.useEffect)(() => {
+    setInputValue(defaultValue);
+  }, [defaultValue]);
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+    debouncedOnChange(e.target.value);
+  };
+  const handleClear = () => {
+    setInputValue("");
+    debouncedOnChange("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_material16.TextField,
+    {
+      name: "search",
+      type: "text",
+      placeholder,
+      slotProps: {
+        htmlInput: { maxLength, "aria-label": placeholder },
+        input: {
+          startAdornment: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.InputAdornment, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_assets8.SearchIcon,
+            {
+              variant: "xs",
+              color: "inherit",
+              sx: { width: 16, height: 16 }
+            }
+          ) }),
+          endAdornment: inputValue ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_material16.IconButton,
+            {
+              size: "small",
+              onClick: handleClear,
+              "aria-label": clearLabel,
+              sx: { mr: 0.5 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_assets8.CloseIcon, { variant: "xs", sx: { width: 20, height: 20 } })
+            }
+          ) }) : null
+        }
+      },
+      fullWidth: true,
+      sx: [
+        searchFieldSx,
+        { maxWidth },
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ],
+      variant: "outlined",
+      value: inputValue,
+      onChange: handleChange,
+      ...textFieldProps
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BIAMP_TABLE_DEBOUNCE_DELAY,
   BiampAppDialog,
   BiampAppDialogItem,
   BiampAppPopover,
@@ -507,6 +1356,22 @@ function BiampLayout({
   BiampSidebarComponent,
   BiampSidebarIcon,
   BiampSidebarIconList,
-  BiampWrapper
+  BiampTable,
+  BiampTableCellActionButton,
+  BiampTableColumnVisibility,
+  BiampTableContainer,
+  BiampTableEmptyState,
+  BiampTableErrorState,
+  BiampTablePagination,
+  BiampTableStatusMessage,
+  BiampTableToolbar,
+  BiampTableToolbarActionButton,
+  BiampTableToolbarActions,
+  BiampTableToolbarExport,
+  BiampTableToolbarFilters,
+  BiampTableToolbarSearch,
+  BiampWrapper,
+  getColumnVisibilityDirtyCount,
+  useDebouncedCallback
 });
 //# sourceMappingURL=index.cjs.map