@bwp-web/components 0.11.6 → 0.12.0

package/dist/index.js

@@ -467,6 +467,7 @@ function BiampLayout({
 import {
   Box as Box3,
   Checkbox,
+  IconButton,
   Table as MuiTable,
   TableBody,
   TableCell,
@@ -476,11 +477,12 @@ import {
   TableSortLabel
 } from "@mui/material";
 import {
+  ChevronRightIcon,
   DropdownChevronDownIcon,
   DropdownChevronUpIcon
 } from "@bwp-web/assets";
 import { flexRender } from "@tanstack/react-table";
-import { useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useRef as useRef2 } from "react";
 
 // src/BiampTable/BiampTableEmptyState.tsx
 import { NoResultsIcon } from "@bwp-web/assets";
@@ -577,6 +579,7 @@ function BiampTable({
   error,
   empty,
   enableRowSelection = false,
+  enableExpanding = false,
   hideSelectAll,
   getRowLabel,
   sx,
@@ -590,24 +593,9 @@ function BiampTable({
     enableRowSelection ? 48 : 0
   );
   const containerRef = useRef2(null);
-  const lastScrollLeftRef = useRef2(null);
-  const onContainerScroll = useCallback((target) => {
-    const { scrollLeft, scrollWidth, clientWidth } = target;
-    if (!containerRef.current || lastScrollLeftRef.current === scrollLeft)
-      return;
-    containerRef.current.dataset["rightShadow"] = scrollWidth - clientWidth > scrollLeft ? "true" : "false";
-    lastScrollLeftRef.current = scrollLeft;
-  }, []);
-  useEffect2(() => {
-    if (!containerRef.current) return;
-    const observer = new ResizeObserver(
-      ([{ target }]) => onContainerScroll(target)
-    );
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, [onContainerScroll]);
   const showLoading = useLoadingDelay(!!loading);
   const rows = table.getRowModel().rows;
+  const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
   const showError = !!error && !loading;
   const showEmpty = !showError && !loading && rows.length === 0;
   return /* @__PURE__ */ jsxs5(
@@ -616,7 +604,6 @@ function BiampTable({
       component: Box3,
       ...boxProps,
       ref: containerRef,
-      onScroll: (e) => onContainerScroll(e.currentTarget),
       sx: {
         display: "flex",
         flexDirection: "column",
@@ -624,12 +611,6 @@ function BiampTable({
         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: [
@@ -656,6 +637,7 @@ function BiampTable({
                         checked: table.getIsAllPageRowsSelected(),
                         indeterminate: table.getIsSomePageRowsSelected(),
                         onChange: table.getToggleAllPageRowsSelectedHandler(),
+                        sx: rows.length === 0 ? { visibility: "hidden" } : void 0,
                         slotProps: { input: { "aria-label": "Select all rows" } }
                       }
                     )
@@ -744,6 +726,7 @@ function BiampTable({
                               disabled: !row.getCanSelect(),
                               onChange: row.getToggleSelectedHandler(),
                               onClick: (e) => e.stopPropagation(),
+                              sx: !row.getCanSelect() ? { visibility: "hidden" } : void 0,
                               slotProps: {
                                 input: {
                                   "aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${row.index + 1}`
@@ -753,8 +736,11 @@ function BiampTable({
                           )
                         }
                       ),
-                      row.getVisibleCells().map((cell) => {
+                      row.getVisibleCells().map((cell, cellIndex, cells) => {
                         const sticky = cell.column.columnDef.meta?.sticky;
+                        const isExpandCell = enableExpanding && !sticky && cellIndex === cells.findIndex(
+                          (c) => !c.column.columnDef.meta?.sticky
+                        );
                         return /* @__PURE__ */ jsx7(
                           TableCell,
                           {
@@ -774,7 +760,45 @@ function BiampTable({
                                 }
                               }
                             },
-                            children: flexRender(
+                            children: isExpandCell ? /* @__PURE__ */ jsxs5(
+                              Box3,
+                              {
+                                sx: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  pl: `${row.depth * 12}px`
+                                },
+                                children: [
+                                  row.getCanExpand() ? /* @__PURE__ */ jsx7(
+                                    IconButton,
+                                    {
+                                      variant: "none",
+                                      onClick: (e) => {
+                                        e.stopPropagation();
+                                        row.toggleExpanded();
+                                      },
+                                      "aria-label": row.getIsExpanded() ? `Collapse ${getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`}` : `Expand ${getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`}`,
+                                      "aria-expanded": row.getIsExpanded(),
+                                      children: /* @__PURE__ */ jsx7(
+                                        ChevronRightIcon,
+                                        {
+                                          variant: "xs",
+                                          sx: {
+                                            color: ({ palette }) => palette.text.secondary,
+                                            transition: "transform 150ms ease",
+                                            transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)"
+                                          }
+                                        }
+                                      )
+                                    }
+                                  ) : hasExpandableRows ? /* @__PURE__ */ jsx7(Box3, { sx: { width: 28 } }) : null,
+                                  flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext()
+                                  )
+                                ]
+                              }
+                            ) : flexRender(
                               cell.column.columnDef.cell,
                               cell.getContext()
                             )
@@ -864,7 +888,7 @@ function BiampTableContainer({
 }
 
 // src/BiampTable/BiampTableCellActionButton.tsx
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton as IconButton2, Tooltip } from "@mui/material";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function BiampTableCellActionButton({ label, icon, ...props }) {
   return /* @__PURE__ */ jsx9(
@@ -875,7 +899,7 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
       enterDelay: 500,
       enterNextDelay: 500,
       disableInteractive: true,
-      children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(IconButton, { "aria-label": label, ...props, children: icon }) })
+      children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(IconButton2, { "aria-label": label, ...props, children: icon }) })
     }
   );
 }
@@ -960,6 +984,7 @@ function BiampTableColumnVisibility({
         /* @__PURE__ */ jsxs6(
           ListItem,
           {
+            dense: true,
             sx: columnListItemSx,
             onClick: () => table.toggleAllColumnsVisible(!allVisible),
             children: [
@@ -968,39 +993,45 @@ function BiampTableColumnVisibility({
                 {
                   checked: allVisible,
                   indeterminate: !allVisible && someVisible,
-                  size: "small",
                   slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
                 }
               ),
-              /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: showAllLabel })
+              /* @__PURE__ */ jsx10(Typography3, { variant: "caption", fontWeight: 600, 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
-          );
-        }) })
+        /* @__PURE__ */ jsx10(
+          Box4,
+          {
+            sx: { maxHeight: 340, overflow: "auto", overscrollBehavior: "none" },
+            children: table.getAllLeafColumns().map((column) => {
+              const columnName = column.columnDef.meta?.columnLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
+              return /* @__PURE__ */ jsxs6(
+                ListItem,
+                {
+                  dense: true,
+                  sx: columnListItemSx,
+                  onClick: column.getToggleVisibilityHandler(),
+                  children: [
+                    /* @__PURE__ */ jsx10(
+                      Checkbox2,
+                      {
+                        checked: column.getIsVisible(),
+                        sx: { py: 1 },
+                        slotProps: {
+                          input: { "aria-label": `Show ${columnName}` }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: columnName })
+                  ]
+                },
+                column.id
+              );
+            })
+          }
+        )
       ] })
     }
   );
@@ -1013,7 +1044,7 @@ import { useState as useState2 } from "react";
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 import {
   Badge,
-  IconButton as IconButton2
+  IconButton as IconButton3
 } from "@mui/material";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function BiampTableToolbarActionButton({
@@ -1024,7 +1055,7 @@ function BiampTableToolbarActionButton({
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
   return /* @__PURE__ */ jsx11(
-    IconButton2,
+    IconButton3,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
@@ -1181,7 +1212,18 @@ function BiampTableToolbarActions({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(Box6, { display: "flex", alignItems: "center", gap: 1, ml: "auto", ...props, children });
+  return /* @__PURE__ */ jsx15(
+    Box6,
+    {
+      display: "flex",
+      alignItems: "center",
+      ml: "auto",
+      gap: { xs: 0, md: 1 },
+      mr: { xs: 1, md: 0 },
+      ...props,
+      children
+    }
+  );
 }
 
 // src/BiampTable/BiampTableToolbarExport.tsx
@@ -1214,7 +1256,7 @@ import {
   Button,
   Divider as Divider2,
   Drawer,
-  IconButton as IconButton3,
+  IconButton as IconButton4,
   Typography as Typography4
 } from "@mui/material";
 import { CloseIcon, FilterIcon } from "@bwp-web/assets";
@@ -1291,7 +1333,7 @@ function BiampTableToolbarFilters({
                         )
                       ] }),
                       /* @__PURE__ */ jsx17(
-                        IconButton3,
+                        IconButton4,
                         {
                           size: "medium",
                           onClick: handleClose,
@@ -1352,26 +1394,28 @@ function BiampTableToolbarFilters({
 import {
   Box as Box8,
   Collapse,
-  IconButton as IconButton4,
+  IconButton as IconButton5,
   InputAdornment as InputAdornment2,
-  TextField as TextField2
+  InputBase,
+  TextField as TextField2,
+  useMediaQuery
 } from "@mui/material";
 import { CloseIcon as CloseIcon2, SearchIcon as SearchIcon2 } from "@bwp-web/assets";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/BiampTable/useDebouncedCallback.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useCallback, useEffect as useEffect2, 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(() => {
+  useEffect2(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useCallback2(
+  return useCallback(
     (...args) => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(
@@ -1404,13 +1448,15 @@ function BiampTableToolbarSearch({
   clearLabel = "Clear search",
   expandable = false,
   expandLabel,
+  enableMobileView = true,
   sx,
   ...textFieldProps
 }) {
+  const isMobile = useMediaQuery((t) => t.breakpoints.down("md"));
   const [inputValue, setInputValue] = useState4(defaultValue);
   const [isExpanded, setIsExpanded] = useState4(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  useEffect4(() => {
+  useEffect3(() => {
     setInputValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (e) => {
@@ -1427,7 +1473,7 @@ function BiampTableToolbarSearch({
     }
   };
   const clearButton = inputValue ? /* @__PURE__ */ jsx18(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx18(
-    IconButton4,
+    IconButton5,
     {
       size: "small",
       onClick: handleClear,
@@ -1470,10 +1516,34 @@ function BiampTableToolbarSearch({
       ...textFieldProps
     }
   );
+  if (isMobile && enableMobileView) {
+    return /* @__PURE__ */ jsxs9(Box8, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
+      /* @__PURE__ */ jsx18(SearchIcon2, { sx: { width: 16, height: 16 } }),
+      /* @__PURE__ */ jsx18(
+        InputBase,
+        {
+          name: "search",
+          type: "text",
+          placeholder,
+          inputProps: { maxLength, "aria-label": "Search" },
+          fullWidth: true,
+          value: inputValue,
+          sx: {
+            paddingLeft: 1,
+            height: "36px !important",
+            minHeight: "36px !important",
+            fontSize: (t) => t.typography.body2.fontSize
+          },
+          onChange: handleChange,
+          endAdornment: clearButton
+        }
+      )
+    ] });
+  }
   if (expandable) {
     return /* @__PURE__ */ jsxs9(Box8, { display: "flex", alignItems: "center", minWidth: 28, children: [
       /* @__PURE__ */ jsx18(
-        IconButton4,
+        IconButton5,
         {
           "aria-label": expandLabel ?? placeholder,
           onClick: () => setIsExpanded(true),