@wavemaker-ai/react-runtime 1.0.0-rc.322 → 1.0.0-rc.326

package/components/data/list/utils/list-helpers.js

@@ -42,6 +42,15 @@ function hasListGroupAutoLayoutClass(layoutProps) {
   const extra_LayoutAttrs = [wrap, alignment, gap, columngap];
   return extra_LayoutAttrs.some((v) => v !== void 0 && v !== null);
 }
+const resolveDisableItem = (disableitem, item, index) => {
+  if (!disableitem) {
+    return false;
+  }
+  if (typeof disableitem === "function") {
+    return !!disableitem(item, index);
+  }
+  return disableitem;
+};
 const flattenIfArrayOfArrays = (arr) => {
   if (arr.length === 0) return arr;
   const first = arr[0];
@@ -139,5 +148,6 @@ export {
   getSelectedItemWidgets,
   getTextAlignClass,
   hasListGroupAutoLayoutClass,
+  resolveDisableItem,
   saveListState
 };

package/components/data/pagination/components/PageSizeSelector.js

@@ -1,12 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, memo } from "react";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import Select from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
+import TablePagination from "@mui/material/TablePagination";
 import { APP_LOCALE } from "../../list/utils/constants";
 import { useAppSelector } from "../../../../store";
+const EmptyPaginationActions = () => null;
+EmptyPaginationActions.displayName = "EmptyPaginationActions";
 const PageSizeSelectorComponent = ({
   pagesizeoptions = "5,10,20,50,100",
   maxResults = 10,
@@ -25,164 +23,60 @@ const PageSizeSelectorComponent = ({
     }
     return parsedOptions;
   }, [pagesizeoptions, paginationMeta == null ? void 0 : paginationMeta.size]);
-  const effectiveMaxResults = useMemo(() => {
-    return (paginationMeta == null ? void 0 : paginationMeta.size) || maxResults;
-  }, [paginationMeta == null ? void 0 : paginationMeta.size, maxResults]);
-  const rowSummary = useMemo(() => {
-    if (!dataSize) {
-      return null;
-    }
-    const startIndex = Math.min((currentPage - 1) * effectiveMaxResults + 1, dataSize);
-    const endIndex = Math.min(currentPage * effectiveMaxResults, dataSize);
-    return {
-      startIndex,
-      endIndex,
-      totalRecords: dataSize
-    };
-  }, [currentPage, effectiveMaxResults, dataSize]);
-  const handleChange = (event) => {
+  const effectiveMaxResults = (paginationMeta == null ? void 0 : paginationMeta.size) || maxResults;
+  const handleRowsPerPageChange = (event) => {
     const newValue = Number(event.target.value);
     if (onPageSizeChange) {
       onPageSizeChange(event, newValue);
     }
   };
-  return /* @__PURE__ */ jsxs(
-    Box,
+  return /* @__PURE__ */ jsx(
+    TablePagination,
     {
-      sx: {
-        display: "flex",
-        flexWrap: "wrap",
-        alignItems: "center",
-        gap: 2
-      },
+      component: "div",
       className: "pagination page-size-selector",
-      children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                Typography,
-                {
-                  component: "label",
-                  sx: {
-                    fontSize: "14px",
-                    color: "text.primary",
-                    whiteSpace: "nowrap"
-                  },
-                  title: itemsPerPageLabel,
-                  children: [
-                    itemsPerPageLabel,
-                    " :"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                FormControl,
-                {
-                  size: "small",
-                  sx: {
-                    minWidth: 70,
-                    "& .MuiInputBase-root": {
-                      height: "auto"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      id: "page-size-select",
-                      value: effectiveMaxResults,
-                      onChange: handleChange,
-                      sx: {
-                        fontSize: "14px",
-                        minHeight: "auto",
-                        "& .MuiSelect-select": {
-                          paddingTop: "6px",
-                          paddingBottom: "6px",
-                          paddingLeft: "10px",
-                          paddingRight: "32px",
-                          // Space for dropdown arrow
-                          minHeight: "auto"
-                        },
-                        "& .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "rgba(0, 0, 0, 0.23)"
-                        }
-                      },
-                      MenuProps: {
-                        PaperProps: {
-                          sx: {
-                            maxHeight: 300,
-                            "& .MuiMenuItem-root": {
-                              fontSize: "14px",
-                              padding: "6px 16px",
-                              // Override any global padding
-                              margin: 0
-                              // Override any global margin
-                            },
-                            "& .MuiList-root": {
-                              padding: "8px 0"
-                              // Ensure proper list padding
-                            },
-                            "& li": {
-                              padding: 0,
-                              // Override global li padding
-                              margin: 0
-                              // Override global li margin
-                            }
-                          }
-                        },
-                        anchorOrigin: {
-                          vertical: "bottom",
-                          horizontal: "center"
-                        },
-                        transformOrigin: {
-                          vertical: "top",
-                          horizontal: "center"
-                        }
-                      },
-                      children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, option))
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        rowSummary && /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 0.5
-            },
-            className: "item-range",
-            children: /* @__PURE__ */ jsxs(
-              Typography,
-              {
-                sx: {
-                  fontSize: "14px",
-                  color: "text.primary"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(Box, { component: "span", children: [
-                    rowSummary.startIndex,
-                    " - ",
-                    rowSummary.endIndex
-                  ] }),
-                  /* @__PURE__ */ jsx(Box, { component: "span", sx: { mx: 0.5 }, children: "\xA0\xA0of\xA0\xA0" }),
-                  /* @__PURE__ */ jsx(Box, { component: "span", children: rowSummary.totalRecords })
-                ]
+      count: dataSize,
+      page: Math.max(0, currentPage - 1),
+      onPageChange: () => {
+      },
+      rowsPerPage: effectiveMaxResults,
+      onRowsPerPageChange: handleRowsPerPageChange,
+      rowsPerPageOptions: options,
+      labelRowsPerPage: `${itemsPerPageLabel} :`,
+      ActionsComponent: EmptyPaginationActions,
+      slotProps: {
+        toolbar: {
+          className: "items-per-page"
+        },
+        selectLabel: {
+          className: "app-label",
+          title: itemsPerPageLabel
+        },
+        select: {
+          id: "page-size-select",
+          size: "small",
+          className: "btn app-button dropdown-toggle page-size-select",
+          MenuProps: {
+            disableScrollLock: true,
+            anchorOrigin: { vertical: "top", horizontal: "left" },
+            transformOrigin: { vertical: "bottom", horizontal: "left" },
+            slotProps: {
+              paper: {
+                elevation: 0,
+                className: "dropdown-menu pagesize-options"
               }
-            )
+            }
           }
-        )
-      ]
+        },
+        menuItem: {
+          className: "dropdown-item"
+        },
+        displayedRows: dataSize ? {
+          className: "item-range"
+        } : {
+          className: "page-size-no-range"
+        }
+      }
     }
   );
 };

package/components/data/pagination/hooks/usePagination.js

@@ -821,12 +821,35 @@ const usePagination = ({
       }
     }
   }, [isServerSidePagination, totalItems, paginationMeta]);
+  const hasServerReportedPage = isServerSidePagination && (paginationMeta == null ? void 0 : paginationMeta.number) !== void 0 && (paginationMeta == null ? void 0 : paginationMeta.number) !== null;
   useEffect(() => {
+    if (hasServerReportedPage) {
+      return;
+    }
     if (initialPage !== void 0 && initialPage !== paginationState.currentPage) {
       setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: initialPage }));
       disableNavigation();
     }
-  }, [initialPage, paginationState.currentPage, disableNavigation]);
+  }, [initialPage, paginationState.currentPage, disableNavigation, hasServerReportedPage]);
+  useEffect(() => {
+    if (!isServerSidePagination) {
+      return;
+    }
+    const metaPageNumber = paginationMeta == null ? void 0 : paginationMeta.number;
+    if (metaPageNumber === void 0 || metaPageNumber === null) {
+      return;
+    }
+    const serverCurrentPage = metaPageNumber + 1;
+    if (serverCurrentPage > 0 && serverCurrentPage !== paginationState.currentPage) {
+      setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: serverCurrentPage }));
+      disableNavigation();
+    }
+  }, [
+    isServerSidePagination,
+    paginationMeta == null ? void 0 : paginationMeta.number,
+    paginationState.currentPage,
+    disableNavigation
+  ]);
   useEffect(() => {
     if (maxResults !== paginationState.currentMaxResults) {
       setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentMaxResults: maxResults }));

package/components/data/table/components/RowCells.js

@@ -33,7 +33,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, Fragment as Fragment2 } from "react";
 import { TableCell } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
-import { getColClass, TABLE_CSS_CLASSES } from "../utils";
+import { getColClass, TABLE_CSS_CLASSES, getDomHiddenCellStyle } from "../utils";
 const CustomExpressionRenderBody = memo(
   function CustomExpressionRenderBody2({ rowData, render }) {
     return /* @__PURE__ */ jsx(Fragment, { children: render(rowData) });
@@ -71,14 +71,28 @@ const RowCells = memo(
             tabIndex: 0,
             "data-col-id": cellIndex,
             className: `${TABLE_CSS_CLASSES.tableCell} ${colClass || ""}  ${((_e = cell.column.columnDef.meta) == null ? void 0 : _e.className) || ""}`.trim(),
-            style: __spreadProps(__spreadValues({
+            style: __spreadProps(__spreadValues(__spreadValues({
               width: cell.column.getSize(),
               textAlign: (_f = cell.column.columnDef.meta) == null ? void 0 : _f.textAlign,
               backgroundColor: (_g = cell.column.columnDef.meta) == null ? void 0 : _g.backgroundColor
             }, (() => {
-              const _a2 = cell.column.columnDef.meta || {}, { className, textAlign, backgroundColor } = _a2, otherMeta = __objRest(_a2, ["className", "textAlign", "backgroundColor"]);
+              const _a2 = cell.column.columnDef.meta || {}, {
+                className,
+                textAlign,
+                backgroundColor,
+                _cell,
+                _actions,
+                domHidden
+              } = _a2, otherMeta = __objRest(_a2, [
+                "className",
+                "textAlign",
+                "backgroundColor",
+                "_cell",
+                "_actions",
+                "domHidden"
+              ]);
               return otherMeta;
-            })()), {
+            })()), getDomHiddenCellStyle(cell.column.columnDef.meta)), {
               fontSize: "inherit",
               color: "inherit"
             }),

package/components/data/table/components/TableBody.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo, useCallback } from "react";
 import { TableBody, TableRow, TableCell, Box } from "@mui/material";
-import { TABLE_CSS_CLASSES, TABLE_MESSAGES } from "../utils";
+import { TABLE_CSS_CLASSES, TABLE_MESSAGES, getRowExpansionConfig } from "../utils";
 import { RowExpansionButton } from "./RowExpansionButton";
 import isEqual from "lodash-es/isEqual";
 import { TableDataRow } from "./TableDataRow";
@@ -180,7 +180,7 @@ const TableBodyComponentBase = ({
   customColumnsRevision = 0,
   columnsVersion = 0
 }) => {
-  const hasExpansion = !!((rowExpansionConfig == null ? void 0 : rowExpansionConfig.show) && toggleRowExpansion && isRowExpanded);
+  const hasExpansion = rowExpansionConfig ? true : false;
   const expansionInsertIndex = useExpansionPosition(
     hasExpansion,
     rowExpansionConfig || null,
@@ -190,6 +190,8 @@ const TableBodyComponentBase = ({
   const renderExpansionCell = useCallback(
     (rowId, rowData) => {
       if (!hasExpansion || !rowExpansionConfig) return null;
+      const rowConfig = getRowExpansionConfig(rowExpansionConfig, rowId, rowData);
+      if (!rowConfig) return null;
       return /* @__PURE__ */ jsx(
         ExpansionCell,
         {
@@ -197,7 +199,7 @@ const TableBodyComponentBase = ({
           rowData,
           isExpanded: isRowExpanded(rowId),
           onToggle: toggleRowExpansion,
-          config: rowExpansionConfig
+          config: rowConfig
         },
         `expansion-${rowId}`
       );

package/components/data/table/components/TableDataRow.js

@@ -15,7 +15,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, Fragment, useMemo } from "react";
+import { memo, Fragment, useMemo, useCallback } from "react";
 import { TableRow } from "@mui/material";
 import { RowCells } from "./RowCells";
 import { useEditedRow } from "../hooks/use-edited-rows";
@@ -44,6 +44,10 @@ const TableDataRowComponent = ({
   customColumnsRevision = 0,
   columnsVersion = 0
 }) => {
+  const handleClick = useCallback(
+    (event) => onRowClick(event, row.original, rowId),
+    [onRowClick, row.original, rowId]
+  );
   const editedTableData = useEditedRow(rowId);
   const mergedRowData = useMemo(() => {
     if (!editedTableData) {
@@ -65,7 +69,7 @@ const TableDataRowComponent = ({
       TableRow,
       {
         className: `${TABLE_CSS_CLASSES.tableRow} ${isActive ? "active" : ""} ${rowClass}`,
-        onClick: (event) => onRowClick(event, row.original, rowId),
+        onClick: handleClick,
         "data-row-id": row.index,
         role: "row",
         tabIndex: 0,
@@ -117,7 +121,16 @@ const TableDataRow = memo(TableDataRowComponent, (prev, next) => {
     "index",
     "customExpressionColumns",
     "customColumnsRevision",
-    "columnsVersion"
+    "columnsVersion",
+    // closure-captured props — stale closure if memo skips when these change
+    "onRowClick",
+    "renderExpansionCell",
+    "hasExpansion",
+    "expansionInsertIndex",
+    "ExpandedContent",
+    "onInstanceLoad",
+    "rowExpansionConfig",
+    "totalColumns"
   ];
   return keys.every((key) => prev[key] === next[key]);
 });

package/components/data/table/components/TableHeader.js

@@ -33,7 +33,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { memo, useMemo } from "react";
 import { TableHead, TableRow, TableCell, Box } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
-import { TABLE_CSS_CLASSES } from "../utils";
+import { TABLE_CSS_CLASSES, getDomHiddenCellStyle } from "../utils";
 import { TableFilterRow } from "./TableFilters";
 import { calculateMaxDepth, generateHeaderRows, hasTableGroups } from "../utils/groupHeaderUtils";
 const StandardHeaderCell = memo(
@@ -57,18 +57,19 @@ const StandardHeaderCell = memo(
       "title",
       "onClick"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c;
     const canSort = enablesort && header.column.getCanSort();
     const isSorted = header.column.getIsSorted();
     const metaClassName = ((_b2 = (_a2 = header.column.columnDef) == null ? void 0 : _a2.meta) == null ? void 0 : _b2.className) || "";
     const resizableClass = header.column.getCanResize() ? " ui-resizable" : "";
     const mergedClassName = `${TABLE_CSS_CLASSES.headerCell} ${metaClassName} ${className || ""} ${resizableClass}`.trim();
-    const mergedStyle = __spreadValues({
+    const headerMeta = (_c = header.column.columnDef) == null ? void 0 : _c.meta;
+    const mergedStyle = __spreadValues(__spreadValues({
       cursor: canSort ? "pointer" : "default",
       userSelect: "none",
       width: header.getSize(),
       position: "relative"
-    }, style);
+    }, getDomHiddenCellStyle(headerMeta)), style);
     const headerTitle = header.column.columnDef.header && typeof header.column.columnDef.header !== "function" ? header.column.columnDef.header.toString() : "";
     return /* @__PURE__ */ jsx(
       TableCell,
@@ -172,7 +173,7 @@ const TableHeaderComponent = memo(
     onHeaderclick,
     tableName
   }) => {
-    const hasExpansion = rowExpansionConfig && rowExpansionConfig.show;
+    const hasExpansion = rowExpansionConfig ? true : false;
     const hasGroups = useMemo(() => {
       return tableStructure && hasTableGroups(tableStructure);
     }, [tableStructure]);
@@ -378,12 +379,13 @@ const TableHeaderComponent = memo(
             };
             const isClickable = enablecolumnselection && !isSystemColumn || enablesort && header.column.getCanSort();
             const headerCellResizableClass = header.column.getCanResize() ? " ui-resizable" : "";
+            const headerMeta = header.column.columnDef.meta;
             cells.push(
               /* @__PURE__ */ jsxs(
                 TableCell,
                 {
                   className: `${TABLE_CSS_CLASSES.headerCell} ${((_b = (_a = header.column.columnDef) == null ? void 0 : _a.meta) == null ? void 0 : _b.className) || ""} ${headerCellResizableClass}`.trim(),
-                  style: {
+                  style: __spreadValues({
                     cursor: isClickable ? "pointer" : "default",
                     userSelect: "none",
                     width: header.getSize(),
@@ -392,7 +394,7 @@ const TableHeaderComponent = memo(
                     color: "inherit",
                     fontWeight: "bold",
                     lineHeight: "inherit"
-                  },
+                  }, getDomHiddenCellStyle(headerMeta)),
                   title: header.column.columnDef.header && typeof header.column.columnDef.header !== "function" ? header.column.columnDef.header.toString() : "",
                   onClick: handleHeaderClick,
                   role: "columnheader",
@@ -400,7 +402,7 @@ const TableHeaderComponent = memo(
                   tabIndex: 0,
                   "data-col-field": header.column.id,
                   children: [
-                    header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                    /* @__PURE__ */ jsx("span", { className: "header-data", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
                     enablesort && !enablecolumnselection && header.column.getCanSort() && /* @__PURE__ */ jsx(
                       Box,
                       {

package/components/data/table/components/TablePanelHeading.js

@@ -25,10 +25,13 @@ import { getButtonClasses } from "../utils";
 import WmMenu from "../../../navigation/menu";
 import { DataSource } from "../../types";
 import { isEmpty, values } from "lodash";
+import { WmAppIcon } from "../../../common/WmAppIcon";
 const TablePanelHeadingComponent = ({
   title,
   subheading,
   iconclass,
+  iconurl,
+  prefabName,
   exportformat = [],
   headerActions,
   spacing = "normal",
@@ -118,10 +121,19 @@ const TablePanelHeadingComponent = ({
         }
       }
     },
-    [datasource, columns, sortInfo, filterInfo, exportdatasize, onBeforeExport, listener]
+    [datasource, columns, sortInfo, filterInfo, exportdatasize, onBeforeExport]
   );
   return /* @__PURE__ */ jsx(Box, { className: "panel-heading", children: /* @__PURE__ */ jsxs(Box, { component: "h3", className: "panel-title", children: [
-    /* @__PURE__ */ jsx(Box, { className: "pull-left", children: iconclass && /* @__PURE__ */ jsx(Box, { component: "i", className: `app-icon panel-icon ${iconclass}` }) }),
+    /* @__PURE__ */ jsx(Box, { className: "pull-left", children: /* @__PURE__ */ jsx(
+      WmAppIcon,
+      {
+        iconclass,
+        iconurl,
+        prefabName,
+        defaultClasses: iconurl ? "panel-image-icon" : "panel-icon",
+        alt: "Table icon"
+      }
+    ) }),
     /* @__PURE__ */ jsxs(Box, { className: "pull-left", children: [
       title && /* @__PURE__ */ jsx(Box, { component: "div", className: "heading", children: title }),
       subheading && /* @__PURE__ */ jsx(Box, { component: "div", className: "description", children: subheading })
@@ -171,7 +183,7 @@ const TablePanelHeadingComponent = ({
 };
 TablePanelHeadingComponent.displayName = "TablePanelHeading";
 const TablePanelHeading = memo(TablePanelHeadingComponent, (prevProps, nextProps) => {
-  return prevProps.title === nextProps.title && prevProps.subheading === nextProps.subheading && prevProps.iconclass === nextProps.iconclass && prevProps.exportformat === nextProps.exportformat && prevProps.headerActions === nextProps.headerActions && prevProps.spacing === nextProps.spacing && prevProps.isGridEditMode === nextProps.isGridEditMode && prevProps.isLoading === nextProps.isLoading && prevProps.listener === nextProps.listener && prevProps.datasource === nextProps.datasource && prevProps.columns === nextProps.columns && prevProps.sortInfo === nextProps.sortInfo && prevProps.filterInfo === nextProps.filterInfo && prevProps.exportdatasize === nextProps.exportdatasize && prevProps.onBeforeExport === nextProps.onBeforeExport;
+  return prevProps.title === nextProps.title && prevProps.subheading === nextProps.subheading && prevProps.iconclass === nextProps.iconclass && prevProps.iconurl === nextProps.iconurl && prevProps.exportformat === nextProps.exportformat && prevProps.headerActions === nextProps.headerActions && prevProps.spacing === nextProps.spacing && prevProps.isGridEditMode === nextProps.isGridEditMode && prevProps.isLoading === nextProps.isLoading && prevProps.listener === nextProps.listener && prevProps.datasource === nextProps.datasource && prevProps.columns === nextProps.columns && prevProps.sortInfo === nextProps.sortInfo && prevProps.filterInfo === nextProps.filterInfo && prevProps.exportdatasize === nextProps.exportdatasize && prevProps.onBeforeExport === nextProps.onBeforeExport;
 });
 export {
   TablePanelHeading

package/components/data/table/hooks/useDynamicColumns.js

@@ -64,7 +64,7 @@ const useDynamicColumns = ({
       dynamicColumns: columnsWithListener,
       isDynamicTable: true
     };
-  }, [dataset, children, listener]);
+  }, [dataset, children]);
   return { dynamicColumns, isDynamicTable };
 };
 var useDynamicColumns_default = useDynamicColumns;

package/components/data/table/hooks/useResponsiveColumns.d.ts

@@ -83,4 +83,5 @@ export declare const useResponsiveColumns: (columns: WmTableColumnProps[]) => {
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }[];