@wavemaker-ai/react-runtime 1.0.0-rc.309

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

@@ -0,0 +1,84 @@
+import { WmTableColumnProps } from "../props";
+export declare const useResponsiveColumns: (columns: WmTableColumnProps[]) => {
+    listener: any;
+    binding: string;
+    field: string;
+    caption: string;
+    colClass?: string;
+    displayName?: string;
+    widgetType: "label" | "button" | string;
+    editWidgetType?: import("../utils").EditWidgetType;
+    show?: boolean;
+    pcdisplay?: boolean;
+    mobiledisplay?: boolean;
+    tabletdisplay?: boolean;
+    index: number;
+    headerindex: string;
+    sortable?: boolean;
+    sortby?: string;
+    textalignment?: import("../../list/props").IAlignment;
+    backgroundcolor?: string;
+    textcolor?: string;
+    width?: string;
+    className?: string;
+    styles?: import("react").CSSProperties;
+    required?: boolean;
+    defaultvalue?: string | number | boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    readonly?: boolean;
+    editinputtype?: "color" | "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
+    rowactionsposition?: number;
+    type?: string;
+    columntype?: string;
+    searchable?: boolean;
+    showinfilter?: boolean;
+    children?: import("react").ReactNode;
+    validationmessage?: string;
+    exportexpression?: string;
+    renderCellContent?: Function;
+    onClick?: (($event: any, widget: any, row: any) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onFocus?: (($event: any, widget: any, row: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onBlur?: (($event: any, widget: any, row: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onChange?: ($event: any, widget: any, row: any) => void;
+    onKeypress?: (($event: any, widget: any, row: any) => void) & ((event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onKeydown?: (($event: any, widget: any, row: any) => void) & ((event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onKeyup?: (($event: any, widget: any, row: any) => void) & ((event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseEnter?: (($event: any, widget: any, row: any) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseLeave?: (($event: any, widget: any, row: any) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    padding?: string;
+    margin?: string;
+    height?: number | string;
+    conditionalstyle?: import("react").CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+}[];

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsiveColumns = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+var useResponsiveColumns = exports.useResponsiveColumns = function useResponsiveColumns(columns) {
+  // Get viewport width once at initialization
+  var viewportWidth = (0, _react.useMemo)(function () {
+    if (typeof window !== "undefined") {
+      return window.innerWidth;
+    }
+    return 1024; // Default desktop width for SSR
+  }, []); // Empty dependency array - only calculated once
+
+  // Filter columns based on initial viewport
+  var visibleColumns = (0, _react.useMemo)(function () {
+    if (!columns || !Array.isArray(columns)) {
+      return [];
+    }
+    try {
+      return columns.filter(function (column) {
+        if (!column) return false;
+        return (0, _utils.isColumnVisibleForViewport)(column, viewportWidth);
+      });
+    } catch (error) {
+      console.error("Error filtering columns:", error);
+      return columns; // Return all columns if filtering fails
+    }
+  }, [columns, viewportWidth]);
+  return visibleColumns;
+};

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

@@ -0,0 +1,5 @@
+import { UseRowExpansionProps, UseRowExpansionReturn } from "../props";
+/**
+ * Hook to manage row expansion state
+ */
+export declare const useRowExpansion: ({ rowExpansionConfig, internalDataset, }: UseRowExpansionProps) => UseRowExpansionReturn;

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

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowExpansion = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+/**
+ * Hook to manage row expansion state
+ */
+var useRowExpansion = exports.useRowExpansion = function useRowExpansion(_ref) {
+  var rowExpansionConfig = _ref.rowExpansionConfig,
+    internalDataset = _ref.internalDataset;
+  var _useState = (0, _react.useState)(new Set()),
+    expandedRows = _useState[0],
+    setExpandedRows = _useState[1];
+  var expandedRowsRef = (0, _react.useRef)(expandedRows);
+  var rowDefInstancesRef = (0, _react.useRef)({});
+  var pendingRowExpandRef = (0, _react.useRef)(new Set());
+  // Keep expandedRows ref in sync with state
+  (0, _react.useEffect)(function () {
+    expandedRowsRef.current = expandedRows;
+  }, [expandedRows]);
+  (0, _react.useEffect)(function () {
+    var instances = rowDefInstancesRef.current;
+    Object.keys(instances).forEach(function (k) {
+      return delete instances[k];
+    });
+    pendingRowExpandRef.current = new Set();
+  }, [internalDataset]);
+  var registerRowDefInstance = (0, _react.useCallback)(function (rowId, instance, rowData) {
+    rowDefInstancesRef.current[rowId] = instance;
+    if (pendingRowExpandRef.current.has(rowId) && expandedRowsRef.current.has(rowId)) {
+      pendingRowExpandRef.current["delete"](rowId);
+      if (rowExpansionConfig !== null && rowExpansionConfig !== void 0 && rowExpansionConfig.onRowexpand) {
+        setTimeout(function () {
+          var _rowExpansionConfig$o;
+          (_rowExpansionConfig$o = rowExpansionConfig.onRowexpand) === null || _rowExpansionConfig$o === void 0 || _rowExpansionConfig$o.call(rowExpansionConfig, {}, {}, (0, _utils.cleanRowData)(rowData), instance);
+        }, 500);
+      }
+    }
+  }, [rowExpansionConfig]);
+  var toggleRowExpansion = (0, _react.useCallback)(function (rowId, rowData) {
+    if (!rowExpansionConfig || !rowExpansionConfig.show) return;
+    var isCurrentlyExpanded = expandedRowsRef.current.has(rowId);
+
+    // Handle before expand/collapse events
+    if (!isCurrentlyExpanded) {
+      // Before expand event
+      if (rowExpansionConfig.onBeforerowexpand) {
+        var _rowExpansionConfig$o2;
+        var defaultPrevented = false;
+        var event = {
+          preventDefault: function preventDefault() {
+            defaultPrevented = true;
+          },
+          get defaultPrevented() {
+            return defaultPrevented;
+          }
+        };
+        (_rowExpansionConfig$o2 = rowExpansionConfig.onBeforerowexpand) === null || _rowExpansionConfig$o2 === void 0 || _rowExpansionConfig$o2.call(rowExpansionConfig, event, {}, (0, _utils.cleanRowData)(rowData), (0, _utils.cleanRowData)(internalDataset));
+        if (defaultPrevented) return;
+      }
+      setExpandedRows(function (prev) {
+        var newExpandedRows = new Set(prev);
+        if (rowExpansionConfig.closeothers) {
+          // Clear pending state for all rows being force-collapsed
+          newExpandedRows.forEach(function (otherId) {
+            pendingRowExpandRef.current["delete"](otherId);
+          });
+          newExpandedRows.clear();
+        }
+        newExpandedRows.add(rowId);
+        if (rowExpansionConfig.renderPartial) {
+          // Partial content loads asynchronously — onRowexpand fires from registerRowDefInstance
+          pendingRowExpandRef.current.add(rowId);
+        } else {
+          // Plain children/content — fire onRowexpand immediately with cached instance or {}
+          if (rowExpansionConfig.onRowexpand) {
+            setTimeout(function () {
+              var _rowExpansionConfig$o3;
+              (_rowExpansionConfig$o3 = rowExpansionConfig.onRowexpand) === null || _rowExpansionConfig$o3 === void 0 || _rowExpansionConfig$o3.call(rowExpansionConfig, {}, {}, (0, _utils.cleanRowData)(rowData), rowDefInstancesRef.current[rowId] || {});
+            }, 0);
+          }
+        }
+        return newExpandedRows;
+      });
+    } else {
+      // Before collapse event
+      if (rowExpansionConfig.onBeforerowcollapse) {
+        var _rowExpansionConfig$o4;
+        var _defaultPrevented = false;
+        var _event = {
+          preventDefault: function preventDefault() {
+            _defaultPrevented = true;
+          },
+          get defaultPrevented() {
+            return _defaultPrevented;
+          }
+        };
+        (_rowExpansionConfig$o4 = rowExpansionConfig.onBeforerowcollapse) === null || _rowExpansionConfig$o4 === void 0 || _rowExpansionConfig$o4.call(rowExpansionConfig, _event, {}, (0, _utils.cleanRowData)(rowData), rowDefInstancesRef.current[rowId] || {} // $data = cached widget instance
+        );
+        if (_defaultPrevented) return;
+      }
+      setExpandedRows(function (prev) {
+        var newExpandedRows = new Set(prev);
+        newExpandedRows["delete"](rowId);
+
+        // Remove from pending — guards against stale onLoad firing after collapse
+        pendingRowExpandRef.current["delete"](rowId);
+
+        // Fire rowcollapse — no $data (matches Angular: invokeEventCallback('rowcollapse', {$event, row}))
+        if (rowExpansionConfig.onRowcollapse) {
+          setTimeout(function () {
+            var _rowExpansionConfig$o5;
+            (_rowExpansionConfig$o5 = rowExpansionConfig.onRowcollapse) === null || _rowExpansionConfig$o5 === void 0 || _rowExpansionConfig$o5.call(rowExpansionConfig, {}, {}, (0, _utils.cleanRowData)(rowData));
+          }, 0);
+        }
+        return newExpandedRows;
+      });
+    }
+  }, [rowExpansionConfig, internalDataset]);
+  var isRowExpanded = (0, _react.useCallback)(function (rowId) {
+    return expandedRows.has(rowId);
+  }, [expandedRows]);
+  var collapseAllRows = (0, _react.useCallback)(function () {
+    setExpandedRows(new Set());
+    pendingRowExpandRef.current = new Set();
+  }, []);
+  return {
+    expandedRows: expandedRows,
+    toggleRowExpansion: toggleRowExpansion,
+    isRowExpanded: isRowExpanded,
+    collapseAllRows: collapseAllRows,
+    rowExpansionConfig: rowExpansionConfig,
+    registerRowDefInstance: registerRowDefInstance,
+    rowDefInstances: rowDefInstancesRef.current
+  };
+};

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

@@ -0,0 +1,5 @@
+import { UseRowHandlersProps, UseRowHandlersReturn } from "../props";
+/**
+ * Hook to consolidate all row click handlers
+ */
+export declare const useRowHandlers: ({ editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, name, }: UseRowHandlersProps) => UseRowHandlersReturn;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowHandlers = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+/**
+ * Hook to consolidate all row click handlers
+ */
+var useRowHandlers = exports.useRowHandlers = function useRowHandlers(_ref) {
+  var editingRowId = _ref.editingRowId,
+    isAddingNewRow = _ref.isAddingNewRow,
+    handleRowSelectionClick = _ref.handleRowSelectionClick,
+    handleTableEditRowClick = _ref.handleTableEditRowClick,
+    handleRowActiveClick = _ref.handleRowActiveClick,
+    onRowclick = _ref.onRowclick,
+    _ref$useRadioSelect = _ref.useRadioSelect,
+    useRadioSelect = _ref$useRadioSelect === void 0 ? false : _ref$useRadioSelect,
+    _ref$useMultiSelect = _ref.useMultiSelect,
+    useMultiSelect = _ref$useMultiSelect === void 0 ? false : _ref$useMultiSelect,
+    _ref$isrowselectable = _ref.isrowselectable,
+    isrowselectable = _ref$isrowselectable === void 0 ? false : _ref$isrowselectable,
+    listener = _ref.listener,
+    name = _ref.name;
+  var handleRowClick = (0, _react.useCallback)(function (event, rowData, rowId) {
+    // Determine if selection mode is enabled
+    var hasSelectionMode = useRadioSelect || useMultiSelect;
+
+    // Fire onRowclick FIRST - before any selection changes (matches Angular behavior)
+    if (onRowclick) {
+      var _listener$Widgets, _listener$Widgets2;
+      if (listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name]) {
+        listener.Widgets[name].nativeElement = event.target;
+      }
+      onRowclick(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name], (0, _utils.cleanRowData)(rowData));
+    }
+
+    // Handle row selection based on isrowselectable setting
+    // When isrowselectable is false and selection mode is enabled,
+    // only allow selection through the radio/checkbox column (not row click)
+    var isSelectionHandled = false;
+    if (hasSelectionMode && isrowselectable) {
+      // Current behavior: clicking anywhere on row selects it
+      isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
+    } else if (!hasSelectionMode) {
+      // No selection mode enabled, just handle as normal (makes row active)
+      isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
+    }
+    // When hasSelectionMode && !isrowselectable, skip row selection from row click
+    // Selection will only happen through the radio/checkbox column click
+
+    // Handle table edit row click (works for both inline and quickedit)
+    handleTableEditRowClick(rowData, rowId);
+
+    // Don't change active row if currently editing or adding new row
+    var isEditingOrAdding = editingRowId !== null || isAddingNewRow;
+
+    // Handle active row state
+    // When isrowselectable is false and selection mode is enabled,
+    // don't set the active class on row click - only through radio/checkbox column
+    if (hasSelectionMode && !isrowselectable) {
+      // Skip setting active row when isrowselectable is false with selection mode
+      return;
+    }
+    handleRowActiveClick(rowId, isSelectionHandled, isEditingOrAdding);
+  }, [editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, name]);
+  return {
+    handleRowClick: handleRowClick
+  };
+};

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

@@ -0,0 +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;