@bwp-web/components 0.11.5 → 0.11.7

package/dist/index.js

@@ -480,7 +480,7 @@ import {
   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";
@@ -590,22 +590,6 @@ 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 showError = !!error && !loading;
@@ -616,7 +600,6 @@ function BiampTable({
       component: Box3,
       ...boxProps,
       ref: containerRef,
-      onScroll: (e) => onContainerScroll(e.currentTarget),
       sx: {
         display: "flex",
         flexDirection: "column",
@@ -624,12 +607,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 +633,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" } }
                       }
                     )
@@ -672,11 +650,14 @@ function BiampTable({
                         "aria-sort": header.column.getIsSorted() ? header.column.getIsSorted() === "asc" ? "ascending" : "descending" : "none"
                       },
                       sx: {
-                        minWidth: header.column.columnDef.meta?.minWidth ?? 40,
+                        minWidth: sticky ? void 0 : header.column.columnDef.meta?.minWidth ?? 40,
                         ...sticky && {
                           position: "sticky",
                           [sticky]: 0,
                           zIndex: 3,
+                          width: 0,
+                          whiteSpace: "nowrap",
+                          textAlign: "center",
                           bgcolor: "background.paper"
                         }
                       },
@@ -741,6 +722,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}`
@@ -757,11 +739,14 @@ function BiampTable({
                           {
                             "data-sticky": sticky || void 0,
                             sx: {
-                              minWidth: cell.column.columnDef.meta?.minWidth ?? 40,
+                              minWidth: sticky ? void 0 : cell.column.columnDef.meta?.minWidth ?? 40,
                               ...sticky && {
                                 position: "sticky",
                                 [sticky]: 0,
                                 zIndex: 2,
+                                width: 0,
+                                whiteSpace: "nowrap",
+                                textAlign: "center",
                                 bgcolor: "background.paper",
                                 ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
                                   bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
@@ -1110,8 +1095,7 @@ function BiampTablePagination({
   if (!loading && pageIndex > maxPage) {
     table.setPageIndex(maxPage);
   }
-  if (autoHide && !loading && (!stableCount || stableCount <= pageSize))
-    return null;
+  if (autoHide && (!stableCount || stableCount <= pageSize)) return null;
   return /* @__PURE__ */ jsx13(
     TablePagination,
     {
@@ -1176,7 +1160,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
@@ -1349,24 +1344,26 @@ import {
   Collapse,
   IconButton as IconButton4,
   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(
@@ -1399,13 +1396,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) => {
@@ -1465,6 +1464,30 @@ 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(