@bwp-web/components 0.10.0 → 0.11.0

package/dist/index.js

@@ -462,7 +462,876 @@ function BiampLayout({
     }
   );
 }
+
+// src/BiampTable/BiampTable.tsx
+import {
+  Box as Box3,
+  Checkbox,
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableSortLabel
+} from "@mui/material";
+import {
+  DropdownChevronDownIcon,
+  DropdownChevronUpIcon
+} from "@bwp-web/assets";
+import { flexRender } from "@tanstack/react-table";
+
+// src/BiampTable/BiampTableEmptyState.tsx
+import { NoResultsIcon } from "@bwp-web/assets";
+
+// src/BiampTable/BiampTableStatusMessage.tsx
+import { Stack as Stack5, Typography as Typography2 } from "@mui/material";
+import { cloneElement } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function BiampTableStatusMessage({
+  icon,
+  title,
+  description,
+  children,
+  ...stackProps
+}) {
+  return /* @__PURE__ */ jsxs4(Stack5, { alignItems: "center", gap: 2, ...stackProps, children: [
+    cloneElement(icon, {
+      "aria-hidden": true,
+      sx: { width: 56, height: 56, ...icon.props.sx }
+    }),
+    /* @__PURE__ */ jsx4(Typography2, { variant: "h2", children: title }),
+    description && /* @__PURE__ */ jsx4(Typography2, { variant: "body1", children: description }),
+    children
+  ] });
+}
+
+// src/BiampTable/BiampTableEmptyState.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function BiampTableEmptyState({
+  icon = /* @__PURE__ */ jsx5(NoResultsIcon, {}),
+  title = "Nothing to show",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx5(
+    BiampTableStatusMessage,
+    {
+      role: "status",
+      icon,
+      title,
+      ...rest
+    }
+  );
+}
+
+// src/BiampTable/BiampTableErrorState.tsx
+import { ServiceNotReachableIcon } from "@bwp-web/assets";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function BiampTableErrorState({
+  icon = /* @__PURE__ */ jsx6(ServiceNotReachableIcon, {}),
+  title = "Failed to load",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx6(BiampTableStatusMessage, { role: "alert", icon, title, ...rest });
+}
+
+// src/BiampTable/useLoadingDelay.ts
+import { useEffect, useRef, useState } from "react";
+function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
+  const [status, setStatus] = useState("idle");
+  const timeoutRef = useRef(null);
+  function clearPending() {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }
+  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]);
+  useEffect(() => clearPending, []);
+  return status === "loading" || status === "ending";
+}
+
+// src/BiampTable/BiampTable.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "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__ */ jsx7(
+    TableContainer,
+    {
+      component: Box3,
+      ...boxProps,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "auto",
+        overscrollBehavior: "none",
+        ...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(
+                  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__ */ 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 ? /* @__PURE__ */ jsx7(TableRow, { children: /* @__PURE__ */ jsx7(
+              TableCell,
+              {
+                colSpan: totalColumns,
+                sx: {
+                  textAlign: "center",
+                  verticalAlign: "middle",
+                  height: "100%"
+                },
+                children: error === true ? /* @__PURE__ */ jsx7(BiampTableErrorState, {}) : 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: {
+                          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}`
+                              }
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    row.getVisibleCells().map((cell) => {
+                      const sticky = cell.column.columnDef.meta?.sticky;
+                      return /* @__PURE__ */ jsx7(
+                        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: flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )
+                        },
+                        cell.id
+                      );
+                    })
+                  ]
+                },
+                row.id
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/BiampTable/BiampTableContainer.tsx
+import { Stack as Stack6 } from "@mui/material";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function BiampTableContainer({
+  withBorderTop = true,
+  withBorderBottom = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    Stack6,
+    {
+      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
+import { IconButton, Tooltip } from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function BiampTableCellActionButton({ label, icon, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    Tooltip,
+    {
+      title: label,
+      placement: "top",
+      enterDelay: 500,
+      enterNextDelay: 500,
+      disableInteractive: true,
+      children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(IconButton, { "aria-label": label, ...props, children: icon }) })
+    }
+  );
+}
+
+// src/BiampTable/BiampTableColumnVisibility.tsx
+import {
+  alpha as alpha2,
+  Box as Box4,
+  Checkbox as Checkbox2,
+  Divider,
+  List,
+  ListItem,
+  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 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 = 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(
+    Popover2,
+    {
+      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 ${alpha2(palette.common.black, 0.05)}`,
+            minWidth: "150px"
+          }),
+          ...slotProps?.paper ?? {}
+        }
+      },
+      ...popoverProps,
+      children: /* @__PURE__ */ jsxs6(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs6(
+          ListItem,
+          {
+            sx: columnListItemSx,
+            onClick: () => table.toggleAllColumnsVisible(!allVisible),
+            children: [
+              /* @__PURE__ */ jsx10(
+                Checkbox2,
+                {
+                  checked: allVisible,
+                  indeterminate: !allVisible && someVisible,
+                  size: "small",
+                  slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
+                }
+              ),
+              /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: showAllLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx10(Divider, {}),
+        /* @__PURE__ */ jsx10(Box4, { sx: { maxHeight: 340, overflow: "auto" }, children: table.getAllLeafColumns().map((column) => {
+          const columnName = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+          return /* @__PURE__ */ jsxs6(
+            ListItem,
+            {
+              sx: columnListItemSx,
+              onClick: column.getToggleVisibilityHandler(),
+              children: [
+                /* @__PURE__ */ jsx10(
+                  Checkbox2,
+                  {
+                    checked: column.getIsVisible(),
+                    size: "small",
+                    slotProps: {
+                      input: { "aria-label": `Show ${columnName}` }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: columnName })
+              ]
+            },
+            column.id
+          );
+        }) })
+      ] })
+    }
+  );
+}
+
+// src/BiampTable/BiampTablePagination.tsx
+import { useRef as useRef3 } from "react";
+import { Box as Box5, TablePagination } from "@mui/material";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function BiampTablePagination({
+  table,
+  rowsPerPageOptions,
+  loading,
+  autoHide = true,
+  ...boxProps
+}) {
+  const rowCount = table.getRowCount();
+  const lastRowCountRef = useRef3(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__ */ jsx11(Box5, { ...boxProps, children: /* @__PURE__ */ jsx11(
+    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
+import { Box as Box6 } from "@mui/material";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function BiampTableToolbar({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    Box6,
+    {
+      role: "toolbar",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: 1,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/BiampTable/BiampTableToolbarActionButton.tsx
+import {
+  Badge,
+  IconButton as IconButton2
+} from "@mui/material";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function BiampTableToolbarActionButton({
+  label,
+  icon,
+  badgeContent,
+  ...props
+}) {
+  const showBadge = badgeContent != null && badgeContent !== 0;
+  return /* @__PURE__ */ jsx13(
+    IconButton2,
+    {
+      "aria-label": showBadge ? `${label} (${badgeContent})` : label,
+      ...props,
+      children: showBadge ? /* @__PURE__ */ jsx13(
+        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
+import { Box as Box7 } from "@mui/material";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function BiampTableToolbarActions({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(Box7, { display: "flex", alignItems: "center", gap: 1, ml: "auto", ...props, children });
+}
+
+// src/BiampTable/BiampTableToolbarExport.tsx
+import { CircularProgress } from "@mui/material";
+import { DownloadIcon } from "@bwp-web/assets";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function BiampTableToolbarExport({
+  onExport,
+  loading,
+  icon = /* @__PURE__ */ jsx15(DownloadIcon, { variant: "xs" }),
+  label = "Export",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    BiampTableToolbarActionButton,
+    {
+      label: loading ? `${label}, loading` : label,
+      icon: loading ? /* @__PURE__ */ jsx15(CircularProgress, { size: 20, color: "inherit" }) : icon,
+      disabled: loading,
+      onClick: onExport,
+      ...props
+    }
+  );
+}
+
+// src/BiampTable/BiampTableToolbarFilters.tsx
+import {
+  Badge as Badge2,
+  Box as Box8,
+  Button,
+  Divider as Divider2,
+  Drawer,
+  IconButton as IconButton3,
+  Typography as Typography4
+} from "@mui/material";
+import { CloseIcon, FilterIcon } from "@bwp-web/assets";
+import { useId, useState as useState2 } from "react";
+import { Fragment, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+function BiampTableToolbarFilters({
+  activeFilterCount,
+  children,
+  onReset,
+  onApply,
+  icon = /* @__PURE__ */ jsx16(FilterIcon, { variant: "xs" }),
+  title = "Filters",
+  resetLabel = "Clear filters",
+  applyLabel = "Apply",
+  closeLabel = "Close",
+  buttonLabel = "Filters",
+  DrawerProps: drawerProps
+}) {
+  const [open, setOpen] = useState2(false);
+  const titleId = useId();
+  function handleClose() {
+    onApply?.();
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx16(
+      BiampTableToolbarActionButton,
+      {
+        label: buttonLabel,
+        icon,
+        badgeContent: activeFilterCount,
+        onClick: () => setOpen(true)
+      }
+    ),
+    /* @__PURE__ */ jsx16(
+      Drawer,
+      {
+        anchor: "right",
+        open,
+        onClose: handleClose,
+        "aria-labelledby": titleId,
+        ...drawerProps,
+        PaperProps: {
+          sx: { width: { xs: "100%", sm: 480 } },
+          ...drawerProps?.PaperProps
+        },
+        children: /* @__PURE__ */ jsxs7(
+          Box8,
+          {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ jsxs7(Box8, { children: [
+                /* @__PURE__ */ jsxs7(
+                  Box8,
+                  {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    px: 3.5,
+                    py: 2.5,
+                    children: [
+                      /* @__PURE__ */ jsxs7(Typography4, { id: titleId, variant: "h2", children: [
+                        title,
+                        /* @__PURE__ */ jsx16(
+                          Badge2,
+                          {
+                            badgeContent: activeFilterCount,
+                            color: "secondary",
+                            sx: { ml: 1.5, mb: 0.5 }
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx16(
+                        IconButton3,
+                        {
+                          size: "medium",
+                          onClick: handleClose,
+                          "aria-label": closeLabel,
+                          children: /* @__PURE__ */ jsx16(CloseIcon, {})
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx16(Divider2, {}),
+                /* @__PURE__ */ jsx16(
+                  Box8,
+                  {
+                    role: "group",
+                    "aria-label": "Filter options",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 2,
+                    p: 3.5,
+                    overflow: "auto",
+                    children
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs7(Box8, { display: "flex", children: [
+                /* @__PURE__ */ jsx16(
+                  Button,
+                  {
+                    variant: "overlay",
+                    color: "secondary",
+                    fullWidth: true,
+                    onClick: onReset,
+                    disabled: activeFilterCount === 0,
+                    children: resetLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx16(
+                  Button,
+                  {
+                    variant: "overlay",
+                    color: "primary",
+                    fullWidth: true,
+                    onClick: handleClose,
+                    children: applyLabel
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/BiampTable/BiampTableToolbarSearch.tsx
+import {
+  IconButton as IconButton4,
+  InputAdornment as InputAdornment2,
+  TextField as TextField2
+} from "@mui/material";
+import { CloseIcon as CloseIcon2, SearchIcon as SearchIcon2 } from "@bwp-web/assets";
+import { useEffect as useEffect4, useState as useState3 } from "react";
+
+// src/BiampTable/useDebouncedCallback.ts
+import { useCallback, 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);
+  const callbackRef = useRef4(callback);
+  callbackRef.current = callback;
+  useEffect3(() => {
+    return () => {
+      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return useCallback(
+    (...args) => {
+      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(
+        () => callbackRef.current(...args),
+        delay
+      );
+    },
+    [delay]
+  );
+}
+
+// src/BiampTable/BiampTableToolbarSearch.tsx
+import { jsx as jsx17 } from "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] = useState3(defaultValue);
+  const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
+  useEffect4(() => {
+    setInputValue(defaultValue);
+  }, [defaultValue]);
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+    debouncedOnChange(e.target.value);
+  };
+  const handleClear = () => {
+    setInputValue("");
+    debouncedOnChange("");
+  };
+  return /* @__PURE__ */ jsx17(
+    TextField2,
+    {
+      name: "search",
+      type: "text",
+      placeholder,
+      slotProps: {
+        htmlInput: { maxLength, "aria-label": placeholder },
+        input: {
+          startAdornment: /* @__PURE__ */ jsx17(InputAdornment2, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ jsx17(
+            SearchIcon2,
+            {
+              variant: "xs",
+              color: "inherit",
+              sx: { width: 16, height: 16 }
+            }
+          ) }),
+          endAdornment: inputValue ? /* @__PURE__ */ jsx17(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx17(
+            IconButton4,
+            {
+              size: "small",
+              onClick: handleClear,
+              "aria-label": clearLabel,
+              sx: { mr: 0.5 },
+              children: /* @__PURE__ */ jsx17(CloseIcon2, { 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
+    }
+  );
+}
 export {
+  BIAMP_TABLE_DEBOUNCE_DELAY,
   BiampAppDialog,
   BiampAppDialogItem,
   BiampAppPopover,
@@ -478,6 +1347,22 @@ export {
   BiampSidebarComponent,
   BiampSidebarIcon,
   BiampSidebarIconList,
-  BiampWrapper
+  BiampTable,
+  BiampTableCellActionButton,
+  BiampTableColumnVisibility,
+  BiampTableContainer,
+  BiampTableEmptyState,
+  BiampTableErrorState,
+  BiampTablePagination,
+  BiampTableStatusMessage,
+  BiampTableToolbar,
+  BiampTableToolbarActionButton,
+  BiampTableToolbarActions,
+  BiampTableToolbarExport,
+  BiampTableToolbarFilters,
+  BiampTableToolbarSearch,
+  BiampWrapper,
+  getColumnVisibilityDirtyCount,
+  useDebouncedCallback
 };
 //# sourceMappingURL=index.js.map