@wavemaker-ai/react-runtime 1.0.0-rc.324 → 1.0.0-rc.328

package/components/data/list/index.js

@@ -56,8 +56,7 @@ import {
   LIST_DEFAULTS,
   LIST_MESSAGES,
   LIST_ALIGN,
-  LIST_DIRECTION,
-  INSETION_POSITION
+  LIST_DIRECTION
 } from "./utils/constants";
 import {
   getItemsPerRowClass,
@@ -469,7 +468,16 @@ const WmList = (props) => {
   }, [datasource]);
   useLayoutSize(ListWrapperRef, props.layoutWidth, props.layoutHeight);
   const showHorizontalScrollSentinel = showNavigation && navigation === LIST_NAVIGATION_TYPES.SCROLL && (direction === LIST_DIRECTION.HORIZONTAL || direction === "row");
-  const hostAutoLayoutPrefixes = ["pos-", ...INSETION_POSITION, "zi-", "w-", "h-"];
+  const hostAutoLayoutPrefixes = [
+    "wm-pos-",
+    "wm-top",
+    "wm-bottom",
+    "wm-left",
+    "wm-right",
+    "wm-zi-",
+    "wm-w-",
+    "wm-h-"
+  ];
   const wrapper_autoLayout_Classes = useMemo(
     () => filterAutoLayoutClasses(layoutClassName, hostAutoLayoutPrefixes),
     [layoutClassName]
@@ -503,7 +511,7 @@ const WmList = (props) => {
     );
   return /* @__PURE__ */ jsxs(
     Box,
-    __spreadProps(__spreadValues({
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
       className: clsx(
         DEFAULT_CLS,
         "wm-position-relative",
@@ -515,7 +523,8 @@ const WmList = (props) => {
       "data-name": name
     }, { name }), {
       "data-navigation": navigation,
-      ref: ListWrapperRef,
+      ref: ListWrapperRef
+    }), direction ? { direction } : {}), {
       children: [
         /* @__PURE__ */ jsx(
           ListHeader,

package/components/data/list/utils/constants.d.ts

@@ -49,4 +49,3 @@ export declare const LIST_ALIGN: {
     readonly RIGHT: "right";
 };
 export declare const DEFAULT_PAGINATION_META: IPaginationMeta;
-export declare const INSETION_POSITION: readonly ["top", "bottom", "left", "right"];

package/components/data/list/utils/constants.js

@@ -56,12 +56,10 @@ const DEFAULT_PAGINATION_META = {
   number: 0,
   empty: true
 };
-const INSETION_POSITION = ["top", "bottom", "left", "right"];
 export {
   APP_LOCALE,
   DEFAULT_CLS,
   DEFAULT_PAGINATION_META,
-  INSETION_POSITION,
   LIST_ALIGN,
   LIST_DEFAULTS,
   LIST_DIRECTION,

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,16 +71,32 @@ 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: __spreadValues(__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, _cell } = _a2, otherMeta = __objRest(_a2, ["className", "textAlign", "backgroundColor", "_cell"]);
+              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"
+            }), hasCustomCellContent && {
+              textOverflow: "clip"
             }),
             children: customRender ? /* @__PURE__ */ jsx(CustomExpressionRenderBody, { rowData, render: customRender }) : ((_h = cell.column.columnDef.meta) == null ? void 0 : _h.renderCellContent) && !isEditingRow ? (_i = cell.column.columnDef.meta) == null ? void 0 : _i.renderCellContent(rowData, cell.column.columnDef) : flexRender(cell.column.columnDef.cell, cell.getContext())
           },

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/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,14 @@ const TableHeaderComponent = memo(
             };
             const isClickable = enablecolumnselection && !isSystemColumn || enablesort && header.column.getCanSort();
             const headerCellResizableClass = header.column.getCanResize() ? " ui-resizable" : "";
+            const headerMeta = header.column.columnDef.meta;
+            const isMultiSelectHeader = columnId === "multiSelect";
             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 +395,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 +403,10 @@ const TableHeaderComponent = memo(
                   tabIndex: 0,
                   "data-col-field": header.column.id,
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "header-data", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
+                    isMultiSelectHeader && !header.isPlaceholder ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      flexRender(header.column.columnDef.header, header.getContext()),
+                      /* @__PURE__ */ jsx("span", { className: "header-data", children: "\xA0" })
+                    ] }) : /* @__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

@@ -121,7 +121,7 @@ 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: /* @__PURE__ */ jsx(

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/useRowExpansion.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { cleanRowData } from "../utils";
+import { cleanRowData, getRowExpansionConfig } from "../utils";
 const useRowExpansion = ({
   rowExpansionConfig,
   internalDataset
@@ -8,36 +8,48 @@ const useRowExpansion = ({
   const expandedRowsRef = useRef(expandedRows);
   const rowDefInstancesRef = useRef({});
   const pendingRowExpandRef = useRef(/* @__PURE__ */ new Set());
+  const indexExpandedInstances = useCallback(() => {
+    const instances = rowDefInstancesRef.current;
+    Object.keys(instances).forEach((key) => {
+      if (/^\d+$/.test(key)) delete instances[key];
+    });
+    Array.from(expandedRowsRef.current).forEach((rowId, index) => {
+      if (instances[rowId]) instances[index] = instances[rowId];
+    });
+  }, []);
   useEffect(() => {
     expandedRowsRef.current = expandedRows;
-  }, [expandedRows]);
+    indexExpandedInstances();
+  }, [expandedRows, indexExpandedInstances]);
   useEffect(() => {
-    const instances = rowDefInstancesRef.current;
-    Object.keys(instances).forEach((k) => delete instances[k]);
+    rowDefInstancesRef.current = {};
     pendingRowExpandRef.current = /* @__PURE__ */ new Set();
   }, [internalDataset]);
   const registerRowDefInstance = useCallback(
     (rowId, instance, rowData) => {
       rowDefInstancesRef.current[rowId] = instance;
-      if (pendingRowExpandRef.current.has(rowId) && expandedRowsRef.current.has(rowId)) {
+      indexExpandedInstances();
+      if ((rowExpansionConfig == null ? void 0 : rowExpansionConfig.closeothers) || pendingRowExpandRef.current.has(rowId) && expandedRowsRef.current.has(rowId)) {
         pendingRowExpandRef.current.delete(rowId);
         if (rowExpansionConfig == null ? void 0 : rowExpansionConfig.onRowexpand) {
           setTimeout(() => {
             var _a;
             (_a = rowExpansionConfig.onRowexpand) == null ? void 0 : _a.call(rowExpansionConfig, {}, {}, cleanRowData(rowData), instance);
-          }, 500);
+          }, 0);
         }
       }
     },
-    [rowExpansionConfig]
+    [rowExpansionConfig, indexExpandedInstances]
   );
   const toggleRowExpansion = useCallback(
     (rowId, rowData) => {
       var _a, _b;
-      if (!rowExpansionConfig || !rowExpansionConfig.show) return;
+      if (!rowExpansionConfig) return;
+      const rowConfig = getRowExpansionConfig(rowExpansionConfig, rowId, rowData);
+      if (!(rowConfig == null ? void 0 : rowConfig.show)) return;
       const isCurrentlyExpanded = expandedRowsRef.current.has(rowId);
       if (!isCurrentlyExpanded) {
-        if (rowExpansionConfig.onBeforerowexpand) {
+        if (rowConfig.onBeforerowexpand) {
           let defaultPrevented = false;
           const event = {
             preventDefault: () => {
@@ -47,8 +59,8 @@ const useRowExpansion = ({
               return defaultPrevented;
             }
           };
-          (_a = rowExpansionConfig.onBeforerowexpand) == null ? void 0 : _a.call(
-            rowExpansionConfig,
+          (_a = rowConfig.onBeforerowexpand) == null ? void 0 : _a.call(
+            rowConfig,
             event,
             {},
             cleanRowData(rowData),
@@ -58,33 +70,31 @@ const useRowExpansion = ({
         }
         setExpandedRows((prev) => {
           const newExpandedRows = new Set(prev);
-          if (rowExpansionConfig.closeothers) {
+          if (rowConfig.closeothers) {
             newExpandedRows.forEach((otherId) => {
               pendingRowExpandRef.current.delete(otherId);
             });
             newExpandedRows.clear();
           }
           newExpandedRows.add(rowId);
-          if (rowExpansionConfig.renderPartial) {
+          if (rowConfig.renderPartial) {
             pendingRowExpandRef.current.add(rowId);
-          } else {
-            if (rowExpansionConfig.onRowexpand) {
-              setTimeout(() => {
-                var _a2;
-                (_a2 = rowExpansionConfig.onRowexpand) == null ? void 0 : _a2.call(
-                  rowExpansionConfig,
-                  {},
-                  {},
-                  cleanRowData(rowData),
-                  rowDefInstancesRef.current[rowId] || {}
-                );
-              }, 0);
-            }
+          } else if (rowConfig.onRowexpand) {
+            setTimeout(() => {
+              var _a2;
+              (_a2 = rowConfig.onRowexpand) == null ? void 0 : _a2.call(
+                rowConfig,
+                {},
+                {},
+                cleanRowData(rowData),
+                rowDefInstancesRef.current[rowId] || {}
+              );
+            }, 0);
           }
           return newExpandedRows;
         });
       } else {
-        if (rowExpansionConfig.onBeforerowcollapse) {
+        if (rowConfig.onBeforerowcollapse) {
           let defaultPrevented = false;
           const event = {
             preventDefault: () => {
@@ -94,8 +104,8 @@ const useRowExpansion = ({
               return defaultPrevented;
             }
           };
-          (_b = rowExpansionConfig.onBeforerowcollapse) == null ? void 0 : _b.call(
-            rowExpansionConfig,
+          (_b = rowConfig.onBeforerowcollapse) == null ? void 0 : _b.call(
+            rowConfig,
             event,
             {},
             cleanRowData(rowData),
@@ -107,10 +117,10 @@ const useRowExpansion = ({
           const newExpandedRows = new Set(prev);
           newExpandedRows.delete(rowId);
           pendingRowExpandRef.current.delete(rowId);
-          if (rowExpansionConfig.onRowcollapse) {
+          if (rowConfig.onRowcollapse) {
             setTimeout(() => {
               var _a2;
-              (_a2 = rowExpansionConfig.onRowcollapse) == null ? void 0 : _a2.call(rowExpansionConfig, {}, {}, cleanRowData(rowData));
+              (_a2 = rowConfig.onRowcollapse) == null ? void 0 : _a2.call(rowConfig, {}, {}, cleanRowData(rowData));
             }, 0);
           }
           return newExpandedRows;

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

@@ -1,5 +1,7 @@
 import { UseRowHandlersProps, UseRowHandlersReturn } from "../props";
 /**
- * Hook to consolidate all row click handlers
+ * Hook to consolidate all row click handlers.
+ * Angular rowSelectionHandler: callOnRowClickEvent first, then toggle + onRowSelect.
+ * Checkbox/radio clicks bubble to the row (rowclick), then onChange fires rowselect.
  */
-export declare const useRowHandlers: ({ editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, name, }: UseRowHandlersProps) => UseRowHandlersReturn;
+export declare const useRowHandlers: ({ editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, viewParent, name, widgetRegistrationKey, }: UseRowHandlersProps) => UseRowHandlersReturn;

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

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { cleanRowData } from "../utils";
+import { getWidgetForCallback } from "../utils/selectionUtils";
 const useRowHandlers = ({
   editingRowId,
   isAddingNewRow,
@@ -11,18 +12,29 @@ const useRowHandlers = ({
   useMultiSelect = false,
   isrowselectable = false,
   listener,
-  name
+  viewParent,
+  name,
+  widgetRegistrationKey
 }) => {
+  const widgetKey = widgetRegistrationKey != null ? widgetRegistrationKey : name;
+  const getWidgetRef = useCallback(
+    () => getWidgetForCallback(listener, viewParent, widgetKey),
+    [viewParent, widgetKey]
+  );
+  const invokeRowClick = useCallback(
+    (event, rowData) => {
+      if (!onRowclick) return;
+      const widget = getWidgetRef();
+      if (widget) {
+        widget.nativeElement = event.target;
+      }
+      onRowclick(event, widget, cleanRowData(rowData));
+    },
+    [onRowclick, getWidgetRef]
+  );
   const handleRowClick = useCallback(
     (event, rowData, rowId) => {
-      var _a, _b;
       const hasSelectionMode = useRadioSelect || useMultiSelect;
-      if (onRowclick) {
-        if ((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]) {
-          listener.Widgets[name].nativeElement = event.target;
-        }
-        onRowclick(event, (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name], cleanRowData(rowData));
-      }
       let isSelectionHandled = false;
       if (hasSelectionMode && isrowselectable) {
         isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
@@ -35,6 +47,7 @@ const useRowHandlers = ({
         return;
       }
       handleRowActiveClick(rowId, isSelectionHandled, isEditingOrAdding);
+      invokeRowClick(event, rowData);
     },
     [
       editingRowId,
@@ -42,12 +55,10 @@ const useRowHandlers = ({
       handleRowSelectionClick,
       handleTableEditRowClick,
       handleRowActiveClick,
-      onRowclick,
+      invokeRowClick,
       useRadioSelect,
       useMultiSelect,
-      isrowselectable,
-      listener,
-      name
+      isrowselectable
     ]
   );
   return {

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

@@ -1,2 +1,2 @@
 import { UseRowSelectionProps, UseRowSelectionReturn } from "../props";
-export declare const useRowSelection: ({ radioselect, multiselect, gridfirstrowselect, internalDataset, cellState, name, statehandler, initialActualPageSize, getTableState: getTableCurrentState, onRowselect, onRowdeselect, listener, navigation, onSyncSelectedItems, }: UseRowSelectionProps) => UseRowSelectionReturn;
+export declare const useRowSelection: ({ radioselect, multiselect, gridfirstrowselect, internalDataset, cellState, name, statehandler, initialActualPageSize, getTableState: getTableCurrentState, onRowselect, onRowdeselect, listener, navigation, viewParent, widgetRegistrationKey, onSyncSelectedItems, }: UseRowSelectionProps) => UseRowSelectionReturn;