@bwp-web/components 0.11.1 → 0.11.3

package/dist/index.js

@@ -791,6 +791,7 @@ function BiampTableContainer({
   withBorderTop = true,
   withBorderBottom = false,
   children,
+  sx,
   ...props
 }) {
   return /* @__PURE__ */ jsx8(
@@ -799,10 +800,12 @@ function BiampTableContainer({
       direction: "column",
       height: "100%",
       overflow: "hidden",
+      px: { xs: 2, sm: 3, xl: 12.5 },
       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,
+      sx: { ...sx },
       ...props,
       children
     }
@@ -837,14 +840,25 @@ import {
   Popover as Popover2,
   Typography as Typography3
 } from "@mui/material";
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function getColumnVisibilityDirtyCount(table, defaultVisibility = {}) {
+function toVisibilityState(visibility) {
+  return visibility;
+}
+function getDefaultColumnVisibility(table) {
+  const result = {};
+  for (const col of table.getAllLeafColumns()) {
+    const dv = col.columnDef.meta?.defaultVisible;
+    if (dv !== void 0) result[col.id] = dv;
+  }
+  return result;
+}
+function getColumnVisibilityDirtyCount(table, defaultVisibility) {
   const current = table.getState().columnVisibility;
+  const defaults = defaultVisibility ?? getDefaultColumnVisibility(table);
   let count = 0;
   for (const col of table.getAllLeafColumns()) {
     const isVisible = current[col.id] ?? true;
-    const wasVisible = defaultVisibility[col.id] ?? true;
+    const wasVisible = defaults[col.id] ?? true;
     if (isVisible !== wasVisible) count++;
   }
   return count;
@@ -861,7 +875,6 @@ var columnListItemSx = {
 };
 function BiampTableColumnVisibility({
   table,
-  onChange,
   showAllLabel = "Show all",
   anchorEl,
   anchorOrigin = { vertical: "bottom", horizontal: "right" },
@@ -869,13 +882,6 @@ function BiampTableColumnVisibility({
   slotProps,
   ...popoverProps
 }) {
-  const visibility = table.getState().columnVisibility;
-  const prevVisibilityRef = useRef2(visibility);
-  useEffect2(() => {
-    if (prevVisibilityRef.current === visibility) return;
-    prevVisibilityRef.current = visibility;
-    onChange?.(visibility);
-  }, [visibility, onChange]);
   const allVisible = table.getAllLeafColumns().every((col) => col.getIsVisible());
   const someVisible = table.getAllLeafColumns().some((col) => col.getIsVisible());
   return /* @__PURE__ */ jsx10(
@@ -949,29 +955,111 @@ function BiampTableColumnVisibility({
   );
 }
 
+// src/BiampTable/BiampTableToolbarColumnVisibility.tsx
+import { ColumnsIcon } from "@bwp-web/assets";
+import { useState as useState2 } from "react";
+
+// src/BiampTable/BiampTableToolbarActionButton.tsx
+import {
+  Badge,
+  IconButton as IconButton2
+} from "@mui/material";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function BiampTableToolbarActionButton({
+  label,
+  icon,
+  badgeContent,
+  ...props
+}) {
+  const showBadge = badgeContent != null && badgeContent !== 0;
+  return /* @__PURE__ */ jsx11(
+    IconButton2,
+    {
+      "aria-label": showBadge ? `${label} (${badgeContent})` : label,
+      ...props,
+      children: showBadge ? /* @__PURE__ */ jsx11(
+        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/BiampTableToolbarColumnVisibility.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function BiampTableToolbarColumnVisibility({
+  table,
+  icon = /* @__PURE__ */ jsx12(ColumnsIcon, { variant: "xs" }),
+  label = "Columns",
+  defaultColumnVisibility,
+  showAllLabel,
+  ...actionButtonProps
+}) {
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
+  const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx12(
+      BiampTableToolbarActionButton,
+      {
+        label,
+        icon,
+        badgeContent: dirtyCount,
+        onClick: (e) => setAnchorEl(e.currentTarget),
+        ...actionButtonProps
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      BiampTableColumnVisibility,
+      {
+        table,
+        anchorEl,
+        onClose: () => setAnchorEl(null),
+        showAllLabel
+      }
+    )
+  ] });
+}
+
 // src/BiampTable/BiampTablePagination.tsx
-import { useRef as useRef3 } from "react";
+import { useRef as useRef2 } from "react";
 import { Box as Box5, TablePagination } from "@mui/material";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function BiampTablePagination({
   table,
   rowsPerPageOptions,
   loading,
   autoHide = true,
-  ...boxProps
+  sx,
+  ...paginationProps
 }) {
   const rowCount = table.getRowCount();
-  const lastRowCountRef = useRef3(rowCount);
+  const lastRowCountRef = useRef2(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(
+  return /* @__PURE__ */ jsx13(
     TablePagination,
     {
-      component: "div",
+      component: Box5,
       count: stableCount,
       page: table.getState().pagination.pageIndex,
       rowsPerPage: table.getState().pagination.pageSize,
@@ -982,99 +1070,73 @@ function BiampTablePagination({
       },
       rowsPerPageOptions: rowsPerPageOptions ?? [],
       showFirstButton: true,
-      showLastButton: true
+      showLastButton: true,
+      sx: {
+        height: 40,
+        minHeight: 40,
+        "& .MuiToolbar-root": {
+          minHeight: 40,
+          px: 0
+        },
+        ...sx
+      },
+      ...paginationProps
     }
-  ) });
+  );
 }
 
 // src/BiampTable/BiampTableToolbar.tsx
 import { Box as Box6 } from "@mui/material";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function BiampTableToolbar({
   children,
+  sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     Box6,
     {
       role: "toolbar",
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      gap: 1,
+      gap: { xs: 0, md: 1 },
+      minHeight: 44,
+      pl: { xs: 2, sm: 3, xl: 12.5 },
+      pr: { xs: 0, md: 3, xl: 12.5 },
+      sx: { ...sx },
       ...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";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function BiampTableToolbarActions({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(Box7, { display: "flex", alignItems: "center", gap: 1, ml: "auto", ...props, children });
+  return /* @__PURE__ */ jsx15(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";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function BiampTableToolbarExport({
   onExport,
   loading,
-  icon = /* @__PURE__ */ jsx15(DownloadIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx16(DownloadIcon, { variant: "xs" }),
   label = "Export",
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     BiampTableToolbarActionButton,
     {
       label: loading ? `${label}, loading` : label,
-      icon: loading ? /* @__PURE__ */ jsx15(CircularProgress, { size: 20, color: "inherit" }) : icon,
+      icon: loading ? /* @__PURE__ */ jsx16(CircularProgress, { size: 20, color: "inherit" }) : icon,
       disabled: loading,
       onClick: onExport,
       ...props
@@ -1093,14 +1155,14 @@ import {
   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";
+import { useId, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function BiampTableToolbarFilters({
   activeFilterCount,
   children,
   onReset,
   onApply,
-  icon = /* @__PURE__ */ jsx16(FilterIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx17(FilterIcon, { variant: "xs" }),
   title = "Filters",
   resetLabel = "Clear filters",
   applyLabel = "Apply",
@@ -1108,14 +1170,14 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = useState2(false);
+  const [open, setOpen] = useState3(false);
   const titleId = useId();
   function handleClose() {
     onApply?.();
     setOpen(false);
   }
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx17(
       BiampTableToolbarActionButton,
       {
         label: buttonLabel,
@@ -1124,7 +1186,7 @@ function BiampTableToolbarFilters({
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       Drawer,
       {
         anchor: "right",
@@ -1136,7 +1198,7 @@ function BiampTableToolbarFilters({
           sx: { width: { xs: "100%", sm: 480 } },
           ...drawerProps?.PaperProps
         },
-        children: /* @__PURE__ */ jsxs7(
+        children: /* @__PURE__ */ jsxs8(
           Box8,
           {
             height: "100%",
@@ -1144,8 +1206,8 @@ function BiampTableToolbarFilters({
             flexDirection: "column",
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsxs7(Box8, { children: [
-                /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsxs8(Box8, { children: [
+                /* @__PURE__ */ jsxs8(
                   Box8,
                   {
                     display: "flex",
@@ -1154,9 +1216,9 @@ function BiampTableToolbarFilters({
                     px: 3.5,
                     py: 2.5,
                     children: [
-                      /* @__PURE__ */ jsxs7(Typography4, { id: titleId, variant: "h2", children: [
+                      /* @__PURE__ */ jsxs8(Typography4, { id: titleId, variant: "h2", children: [
                         title,
-                        /* @__PURE__ */ jsx16(
+                        /* @__PURE__ */ jsx17(
                           Badge2,
                           {
                             badgeContent: activeFilterCount,
@@ -1165,20 +1227,20 @@ function BiampTableToolbarFilters({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         IconButton3,
                         {
                           size: "medium",
                           onClick: handleClose,
                           "aria-label": closeLabel,
-                          children: /* @__PURE__ */ jsx16(CloseIcon, {})
+                          children: /* @__PURE__ */ jsx17(CloseIcon, {})
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx16(Divider2, {}),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(Divider2, {}),
+                /* @__PURE__ */ jsx17(
                   Box8,
                   {
                     role: "group",
@@ -1192,8 +1254,8 @@ function BiampTableToolbarFilters({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs7(Box8, { display: "flex", children: [
-                /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsxs8(Box8, { display: "flex", children: [
+                /* @__PURE__ */ jsx17(
                   Button,
                   {
                     variant: "overlay",
@@ -1204,7 +1266,7 @@ function BiampTableToolbarFilters({
                     children: resetLabel
                   }
                 ),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(
                   Button,
                   {
                     variant: "overlay",
@@ -1225,21 +1287,23 @@ function BiampTableToolbarFilters({
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
 import {
+  Box as Box9,
+  Collapse,
   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";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/BiampTable/useDebouncedCallback.ts
-import { useCallback, useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useCallback, useEffect as useEffect2, useRef as useRef3 } from "react";
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
-  const timeoutRef = useRef4(null);
-  const callbackRef = useRef4(callback);
+  const timeoutRef = useRef3(null);
+  const callbackRef = useRef3(callback);
   callbackRef.current = callback;
-  useEffect3(() => {
+  useEffect2(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
@@ -1257,7 +1321,7 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
 }
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var searchFieldSx = {
   "& .MuiInputBase-root": {
     height: 36,
@@ -1272,12 +1336,15 @@ function BiampTableToolbarSearch({
   maxWidth = 280,
   placeholder = "Search",
   clearLabel = "Clear search",
+  expandable = false,
+  expandLabel,
   sx,
   ...textFieldProps
 }) {
-  const [inputValue, setInputValue] = useState3(defaultValue);
+  const [inputValue, setInputValue] = useState4(defaultValue);
+  const [isExpanded, setIsExpanded] = useState4(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  useEffect4(() => {
+  useEffect3(() => {
     setInputValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (e) => {
@@ -1288,7 +1355,22 @@ function BiampTableToolbarSearch({
     setInputValue("");
     debouncedOnChange("");
   };
-  return /* @__PURE__ */ jsx17(
+  const handleBlur = () => {
+    if (expandable && !inputValue) {
+      setIsExpanded(false);
+    }
+  };
+  const clearButton = inputValue ? /* @__PURE__ */ jsx18(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx18(
+    IconButton4,
+    {
+      size: "small",
+      onClick: handleClear,
+      "aria-label": clearLabel,
+      sx: { mr: 0.5 },
+      children: /* @__PURE__ */ jsx18(CloseIcon2, { variant: "xs", sx: { width: 20, height: 20 } })
+    }
+  ) }) : null;
+  const textField = /* @__PURE__ */ jsx18(
     TextField2,
     {
       name: "search",
@@ -1297,7 +1379,7 @@ function BiampTableToolbarSearch({
       slotProps: {
         htmlInput: { maxLength, "aria-label": placeholder },
         input: {
-          startAdornment: /* @__PURE__ */ jsx17(InputAdornment2, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ jsx17(
+          startAdornment: /* @__PURE__ */ jsx18(InputAdornment2, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ jsx18(
             SearchIcon2,
             {
               variant: "xs",
@@ -1305,30 +1387,89 @@ function BiampTableToolbarSearch({
               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
+          endAdornment: clearButton
         }
       },
       fullWidth: true,
       sx: [
         searchFieldSx,
-        { maxWidth },
+        expandable ? { width: 170 } : { maxWidth },
         ...Array.isArray(sx) ? sx : sx ? [sx] : []
       ],
       variant: "outlined",
       value: inputValue,
       onChange: handleChange,
+      onBlur: handleBlur,
+      ...expandable && isExpanded && !defaultValue && { autoFocus: true },
       ...textFieldProps
     }
   );
+  if (expandable) {
+    return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", minWidth: 28, children: [
+      /* @__PURE__ */ jsx18(
+        IconButton4,
+        {
+          "aria-label": expandLabel ?? placeholder,
+          onClick: () => setIsExpanded(true),
+          sx: { display: isExpanded || inputValue ? "none" : "flex" },
+          children: /* @__PURE__ */ jsx18(
+            SearchIcon2,
+            {
+              variant: "xs",
+              color: "inherit",
+              sx: { width: 16, height: 16 }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        Collapse,
+        {
+          in: isExpanded || !!inputValue,
+          orientation: "horizontal",
+          unmountOnExit: true,
+          children: textField
+        }
+      )
+    ] });
+  }
+  return textField;
+}
+
+// src/BiampTable/exportCsv.ts
+function exportToCsv(rows, columns, filename = "export") {
+  const csvContent = buildCsvString(rows, columns);
+  downloadCsv(csvContent, filename);
+}
+function buildCsvString(rows, columns) {
+  const header = columns.map((col) => escapeCsvField(col.header)).join(",");
+  const dataRows = rows.map(
+    (row) => columns.map((col) => escapeCsvField(formatCsvValue(col.accessor(row)))).join(",")
+  );
+  return [header, ...dataRows].join("\n");
+}
+function escapeCsvField(value) {
+  if (value.includes(",") || value.includes('"') || value.includes("\n")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function formatCsvValue(value) {
+  if (value == null) return "";
+  if (value instanceof Date) return value.toISOString();
+  return String(value);
+}
+function downloadCsv(csvContent, filename) {
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.setAttribute("href", url);
+  link.setAttribute("download", `${filename}.csv`);
+  link.style.display = "none";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
 }
 export {
   BIAMP_TABLE_DEBOUNCE_DELAY,
@@ -1358,11 +1499,16 @@ export {
   BiampTableToolbar,
   BiampTableToolbarActionButton,
   BiampTableToolbarActions,
+  BiampTableToolbarColumnVisibility,
   BiampTableToolbarExport,
   BiampTableToolbarFilters,
   BiampTableToolbarSearch,
   BiampWrapper,
+  buildCsvString,
+  exportToCsv,
   getColumnVisibilityDirtyCount,
+  getDefaultColumnVisibility,
+  toVisibilityState,
   useDebouncedCallback
 };
 //# sourceMappingURL=index.js.map