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

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCustomExpressionColumns = useCustomExpressionColumns;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _customExpression = require("../../../../utils/custom-expression");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Syncs parsed `customExpression` column renderers with the table column proxy:
+ * signature dedupe, stale async-merge guard, revision bumps for memoized cells.
+ */
+function useCustomExpressionColumns(_ref) {
+  var columnSource = _ref.columnSource,
+    listenerRef = _ref.listenerRef;
+  var mergeGenerationRef = (0, _react.useRef)(0);
+  var lastMergedSignatureRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)({}),
+    customColumns = _useState[0],
+    setCustomColumns = _useState[1];
+  var _useState2 = (0, _react.useState)(0),
+    customColumnsRevision = _useState2[0],
+    setCustomColumnsRevision = _useState2[1];
+  var customExpressionSignature = (0, _react.useMemo)(function () {
+    return (0, _customExpression.buildCustomExpressionSignature)(columnSource);
+  }, [columnSource]);
+  var mergeParsedCustomColumns = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var customExprKeys, sig, mergeGen, newColumns;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          customExprKeys = Object.keys(columnSource).filter(function (key) {
+            return columnSource[key].customExpression;
+          });
+          if (!(customExprKeys.length === 0)) {
+            _context.next = 4;
+            break;
+          }
+          lastMergedSignatureRef.current = null;
+          return _context.abrupt("return");
+        case 4:
+          sig = customExpressionSignature;
+          if (!(lastMergedSignatureRef.current === sig)) {
+            _context.next = 7;
+            break;
+          }
+          return _context.abrupt("return");
+        case 7:
+          mergeGen = ++mergeGenerationRef.current;
+          _context.next = 10;
+          return (0, _customExpression.buildCustomExpressionComponentsMap)({
+            columnSource: columnSource,
+            listener: listenerRef.current
+          });
+        case 10:
+          newColumns = _context.sent;
+          if (!(mergeGen !== mergeGenerationRef.current)) {
+            _context.next = 13;
+            break;
+          }
+          return _context.abrupt("return");
+        case 13:
+          lastMergedSignatureRef.current = sig;
+          setCustomColumns(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), newColumns);
+          });
+          setCustomColumnsRevision(function (r) {
+            return r + 1;
+          });
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [columnSource, customExpressionSignature, listenerRef]);
+  return {
+    customColumns: customColumns,
+    customColumnsRevision: customColumnsRevision,
+    customExpressionSignature: customExpressionSignature,
+    mergeParsedCustomColumns: mergeParsedCustomColumns
+  };
+}

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

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { WmTableColumnProps } from "../props";
+/**
+ * Props for useDynamicColumns hook
+ */
+interface UseDynamicColumnsProps {
+    dataset: any[];
+    children: ReactNode;
+    listener?: any;
+}
+/**
+ * Return type for useDynamicColumns hook
+ */
+interface UseDynamicColumnsReturn {
+    dynamicColumns: WmTableColumnProps[];
+    isDynamicTable: boolean;
+}
+/**
+ * Hook to generate dynamic table columns when no WmTableColumn children are provided
+ *
+ * This hook automatically detects when:
+ * - No WmTableColumn children are provided (WmTableRowAction alone does not make table static)
+ * - Dataset contains valid data
+ *
+ * When both conditions are met, it generates column definitions from the data,
+ * similar to Angular's dynamic table behavior.
+ *
+ * @param dataset - Array of data objects
+ * @param children - React children (WmTableColumn, WmTableRowAction, etc.)
+ * @param listener - Component listener for event handling
+ * @returns Object containing dynamicColumns and isDynamicTable flag
+ */
+export declare const useDynamicColumns: ({ dataset, children, listener, }: UseDynamicColumnsProps) => UseDynamicColumnsReturn;
+export default useDynamicColumns;

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

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDynamicColumns = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _dynamicColumns = require("../utils/dynamic-columns");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Props for useDynamicColumns hook
+ */
+
+/**
+ * Return type for useDynamicColumns hook
+ */
+
+/**
+ * Check if children contain WmTableColumn (or columns inside WmTableGroup).
+ * WmTableRowAction, WmTableAction, etc. do NOT make the table static.
+ */
+var _hasTableColumnsInChildren = function hasTableColumnsInChildren(children) {
+  var found = false;
+  _react["default"].Children.forEach(children, function (child) {
+    if (!(child !== null && child !== void 0 && child.props)) return;
+    var name = child.props.name || "";
+    if (name.includes("wm_table_column") || name.includes("col_")) {
+      found = true;
+    } else if (name.includes("group")) {
+      if (_hasTableColumnsInChildren(child.props.children)) {
+        found = true;
+      }
+    }
+  });
+  return found;
+};
+
+/**
+ * Hook to generate dynamic table columns when no WmTableColumn children are provided
+ *
+ * This hook automatically detects when:
+ * - No WmTableColumn children are provided (WmTableRowAction alone does not make table static)
+ * - Dataset contains valid data
+ *
+ * When both conditions are met, it generates column definitions from the data,
+ * similar to Angular's dynamic table behavior.
+ *
+ * @param dataset - Array of data objects
+ * @param children - React children (WmTableColumn, WmTableRowAction, etc.)
+ * @param listener - Component listener for event handling
+ * @returns Object containing dynamicColumns and isDynamicTable flag
+ */
+var useDynamicColumns = exports.useDynamicColumns = function useDynamicColumns(_ref) {
+  var dataset = _ref.dataset,
+    children = _ref.children,
+    listener = _ref.listener;
+  var _useMemo = (0, _react.useMemo)(function () {
+      // Check if WmTableColumn (or columns in groups) are present - only these make table static
+      var hasTableColumns = _hasTableColumnsInChildren(children);
+
+      // If WmTableColumn exists, don't generate dynamic columns
+      if (hasTableColumns) {
+        return {
+          dynamicColumns: [],
+          isDynamicTable: false
+        };
+      }
+
+      // Check if data is valid for column generation
+      if (!(0, _dynamicColumns.isValidDataForColumns)(dataset)) {
+        // For dynamic tables, return an empty state but mark as dynamic
+        // This prevents falling back to static columns when data is just loading
+        return {
+          dynamicColumns: [],
+          isDynamicTable: true // No WmTableColumn present, so dynamic
+        };
+      }
+
+      // Generate columns from data
+      var generatedColumns = (0, _dynamicColumns.generateColumnsFromData)(dataset);
+
+      // Set listener on all generated columns
+      var columnsWithListener = generatedColumns.map(function (col) {
+        return _objectSpread(_objectSpread({}, col), {}, {
+          listener: listener
+        });
+      });
+      return {
+        dynamicColumns: columnsWithListener,
+        isDynamicTable: true
+      };
+    }, [dataset, children, listener]),
+    dynamicColumns = _useMemo.dynamicColumns,
+    isDynamicTable = _useMemo.isDynamicTable;
+  return {
+    dynamicColumns: dynamicColumns,
+    isDynamicTable: isDynamicTable
+  };
+};
+var _default = exports["default"] = useDynamicColumns;

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

@@ -0,0 +1,5 @@
+import { UseEditingStateReturn } from "../props";
+/**
+ * Hook to manage editing state for table rows
+ */
+export declare const useEditingState: () => UseEditingStateReturn;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEditingState = void 0;
+var _react = require("react");
+/**
+ * Hook to manage editing state for table rows
+ */
+var useEditingState = exports.useEditingState = function useEditingState() {
+  var _useState = (0, _react.useState)(null),
+    editingRowId = _useState[0],
+    setEditingRowId = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isAddingNewRow = _useState2[0],
+    setIsAddingNewRow = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    sessionKey = _useState3[0],
+    setSessionKey = _useState3[1];
+  var editingRowDataRef = (0, _react.useRef)({});
+  var newRowDataRef = (0, _react.useRef)({});
+  var incrementSessionKey = (0, _react.useCallback)(function () {
+    setSessionKey(function (prev) {
+      return prev + 1;
+    });
+  }, []);
+  var resetEditingData = (0, _react.useCallback)(function () {
+    editingRowDataRef.current = {};
+    newRowDataRef.current = {};
+  }, []);
+  var isRowEditing = (0, _react.useCallback)(function (rowId) {
+    return editingRowId === rowId;
+  }, [editingRowId]);
+  return {
+    editingRowId: editingRowId,
+    isAddingNewRow: isAddingNewRow,
+    sessionKey: sessionKey,
+    editingRowDataRef: editingRowDataRef,
+    newRowDataRef: newRowDataRef,
+    setEditingRowId: setEditingRowId,
+    setIsAddingNewRow: setIsAddingNewRow,
+    incrementSessionKey: incrementSessionKey,
+    resetEditingData: resetEditingData,
+    isRowEditing: isRowEditing
+  };
+};

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

@@ -0,0 +1,2 @@
+import { UseFormWidgetProps, UseFormWidgetReturn } from "../props";
+export declare const useFormWidget: ({ listener }: UseFormWidgetProps) => UseFormWidgetReturn;

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

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormWidget = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../utils");
+var _text = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/text"));
+var _textarea = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/textarea"));
+var _number = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/number"));
+var _currency = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/currency"));
+var _datetime = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/epoch/datetime"));
+var _time = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/epoch/time"));
+var _date = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/epoch/date"));
+var _select = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/select"));
+var _slider = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/slider"));
+var _rating = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/rating"));
+var _colorPicker = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/color-picker"));
+var _fileupload = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/fileupload"));
+var _chips = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/chips"));
+var _richtexteditor = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/basic/richtexteditor"));
+var _search = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/basic/search"));
+var _checkbox = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/default/checkbox"));
+var _switch = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/default/switch"));
+var _checkboxset = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/default/checkboxset"));
+var _radioset = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/input/default/radioset"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Import form widgets
+function getDisabledValue(disabled, rowData) {
+  if (typeof disabled === "string") {
+    if (disabled.includes("rowData")) {
+      try {
+        return new Function("rowData", "return ".concat(disabled))(rowData);
+      } catch (error) {
+        console.warn("Failed to evaluate disabled expression:", disabled, error);
+        return false;
+      }
+    }
+    return (0, _get["default"])(rowData, disabled);
+  }
+  return disabled;
+}
+var useFormWidget = exports.useFormWidget = function useFormWidget(_ref) {
+  var listener = _ref.listener;
+  // Function to render the appropriate form widget based on editWidgetType
+  var renderFormWidget = (0, _react.useCallback)(function (fieldName, widgetType, value, fieldChangeCallback, widgetProps) {
+    var _widgetProps$column2;
+    // Use defaultvalue if value is null/undefined and defaultvalue is provided
+    var effectiveValue = value !== undefined && value !== null ? value : (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.defaultvalue) || "";
+    var sessionSuffix = widgetProps !== null && widgetProps !== void 0 && widgetProps.sessionKey ? "_".concat(widgetProps.sessionKey) : "";
+    var uniqueName = "edit_".concat(fieldName).concat(sessionSuffix);
+    var disabled = getDisabledValue(widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.disabled, widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData);
+    var commonProps = _objectSpread({
+      key: uniqueName,
+      // Add key to force component recreation
+      name: uniqueName,
+      datavalue: effectiveValue,
+      required: (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.required) || false,
+      disabled: disabled,
+      placeholder: (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.placeholder) || "Enter ".concat(fieldName),
+      onChange: function onChange(event, widget, newVal) {
+        var _widgetProps$column;
+        if (fieldChangeCallback) {
+          fieldChangeCallback(newVal);
+        }
+        // Call the custom onChange handler from column if provided
+        if (widgetProps !== null && widgetProps !== void 0 && (_widgetProps$column = widgetProps.column) !== null && _widgetProps$column !== void 0 && _widgetProps$column.onChange) {
+          widgetProps.column.onChange(event, {}, widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData);
+        }
+      },
+      listener: listener,
+      rowData: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData,
+      column: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.column,
+      updateon: "blur",
+      regexp: (widgetProps === null || widgetProps === void 0 || (_widgetProps$column2 = widgetProps.column) === null || _widgetProps$column2 === void 0 ? void 0 : _widgetProps$column2.regexp) || ".*"
+    }, widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.column);
+
+    // Helper function to wrap event handlers with the correct parameters
+    var wrapEventHandler = function wrapEventHandler(handler) {
+      return function (event) {
+        // Pass event, widget (empty for now), and rowData
+        handler(event, {}, widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData);
+      };
+    };
+
+    // Extract event handlers from column if they exist and wrap them
+    var column = widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.column;
+    if (column) {
+      if (column.onClick) {
+        commonProps.onClick = wrapEventHandler(column.onClick);
+      }
+      if (column.onFocus) {
+        commonProps.onFocus = wrapEventHandler(column.onFocus);
+      }
+      if (column.onBlur) {
+        commonProps.onBlur = wrapEventHandler(column.onBlur);
+      }
+      if (column.onKeypress) {
+        commonProps.onKeypress = wrapEventHandler(column.onKeypress);
+      }
+      if (column.onKeydown) {
+        commonProps.onKeydown = wrapEventHandler(column.onKeydown);
+      }
+      if (column.onKeyup) {
+        commonProps.onKeyup = wrapEventHandler(column.onKeyup);
+      }
+      if (column.onMouseEnter) {
+        commonProps.onMouseEnter = wrapEventHandler(column.onMouseEnter);
+      }
+      if (column.onMouseLeave) {
+        commonProps.onMouseLeave = wrapEventHandler(column.onMouseLeave);
+      }
+    }
+    var mappedWidgetType = (0, _utils.getWidgetMappingForType)(widgetType);
+
+    // Widget mapping with proper components
+    switch (mappedWidgetType) {
+      case "WmText":
+        // Check if column has editinputtype property
+        var editInputType = (column === null || column === void 0 ? void 0 : column.editinputtype) || "text";
+        return __jsx(_text["default"], (0, _extends2["default"])({}, commonProps, {
+          type: editInputType
+        }));
+      case "WmPassword":
+        return __jsx(_text["default"], (0, _extends2["default"])({}, commonProps, {
+          type: "password"
+        }));
+      case "WmTextarea":
+        return __jsx(_textarea["default"], commonProps);
+      case "WmCheckbox":
+        return __jsx(_checkbox["default"], commonProps);
+      case "WmToggle":
+        return __jsx(_checkbox["default"], (0, _extends2["default"])({}, commonProps, {
+          type: "toggle"
+        }));
+      case "WmSwitch":
+        return __jsx(_switch["default"], commonProps);
+      case "WmNumber":
+        return __jsx(_number["default"], commonProps);
+      case "WmCurrency":
+        return __jsx(_currency["default"], commonProps);
+      case "WmSlider":
+        return __jsx(_slider["default"], commonProps);
+      case "WmRichtext":
+      case "WmRichtexteditor":
+        return __jsx(_richtexteditor["default"], commonProps);
+      case "WmSelect":
+        return __jsx(_select["default"], commonProps);
+      case "WmCheckboxset":
+        return __jsx(_checkboxset["default"], commonProps);
+      case "WmRadioset":
+        return __jsx(_radioset["default"], commonProps);
+      case "WmDate":
+        return __jsx(_date["default"], commonProps);
+      case "WmTime":
+        return __jsx(_time["default"], commonProps);
+      case "WmTimestamp":
+      case "WmDatetime":
+      case "WmDateTime":
+        return __jsx(_datetime["default"], commonProps);
+      case "WmRating":
+        return __jsx(_rating["default"], commonProps);
+      case "WmAutocomplete":
+        return __jsx(_search["default"], (0, _extends2["default"])({}, commonProps, {
+          type: "autocomplete"
+        }));
+      case "WmChips":
+        return __jsx(_chips["default"], commonProps);
+      case "WmColorpicker":
+      case "WmColorPicker":
+        return __jsx(_colorPicker["default"], commonProps);
+      case "WmFileupload":
+        return __jsx(_fileupload["default"], commonProps);
+      default:
+        // Unknown widget types fallback to text input
+        return __jsx(_text["default"], commonProps);
+    }
+  }, []);
+  return {
+    renderFormWidget: renderFormWidget
+  };
+};

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

@@ -0,0 +1,6 @@
+import { UsePaginationStateProps, UsePaginationStateReturn } from "../props";
+/**
+ * Hook to manage pagination state and behavior for TanStack Table
+ * Provides controlled pagination state management
+ */
+export declare const usePaginationState: ({ initialPage, initialPageSize, editmode, internalDataset, datasource, isServerSidePagination, }: UsePaginationStateProps) => UsePaginationStateReturn;

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

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePaginationState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Hook to manage pagination state and behavior for TanStack Table
+ * Provides controlled pagination state management
+ */
+var usePaginationState = exports.usePaginationState = function usePaginationState(_ref) {
+  var initialPage = _ref.initialPage,
+    initialPageSize = _ref.initialPageSize,
+    editmode = _ref.editmode,
+    internalDataset = _ref.internalDataset,
+    datasource = _ref.datasource,
+    isServerSidePagination = _ref.isServerSidePagination;
+  // Local state for pagination - needed for controlled TanStack Table pagination
+  var _useState = (0, _react.useState)({
+      pageIndex: initialPage - 1,
+      // Convert to 0-based index
+      pageSize: initialPageSize
+    }),
+    paginationState = _useState[0],
+    setPaginationState = _useState[1];
+
+  // Direct pagination handler - avoids redundant table.setPageIndex() call
+  var handlePaginationChange = (0, _react.useCallback)(function (event, widget, index) {
+    var newPageIndex = index - 1; // Convert to 0-based index
+
+    // Handle quickedit edge case - prevent navigation to empty pages
+    if (editmode === "quickedit" && !isServerSidePagination) {
+      var pageSize = paginationState.pageSize;
+      var dataLength = internalDataset.length;
+      var startIdx = newPageIndex * pageSize;
+      if (startIdx >= dataLength && dataLength > 0) {
+        var correctPage = Math.ceil(dataLength / pageSize);
+        if (correctPage > 0) {
+          setPaginationState(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              pageIndex: correctPage - 1
+            });
+          });
+          return;
+        }
+      }
+    }
+
+    // Directly update pagination state - no need for table.setPageIndex() roundtrip
+    setPaginationState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        pageIndex: newPageIndex
+      });
+    });
+  }, [editmode, isServerSidePagination, internalDataset.length, paginationState.pageSize]);
+
+  // Page size change handler
+  var handlePageSizeChange = (0, _react.useCallback)(function (newPageSize) {
+    // Update datasource maxResults if datasource has paging capability
+    if (isServerSidePagination && datasource && datasource.maxResults !== undefined) {
+      datasource.maxResults = newPageSize;
+    }
+
+    // Directly update pagination state - pageSize and reset to first page
+    setPaginationState({
+      pageIndex: 0,
+      pageSize: newPageSize
+    });
+  }, [isServerSidePagination, datasource]);
+  return {
+    paginationState: paginationState,
+    setPaginationState: setPaginationState,
+    handlePaginationChange: handlePaginationChange,
+    handlePageSizeChange: handlePageSizeChange
+  };
+};

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

@@ -0,0 +1,2 @@
+import { UsePanelStructureProps, UsePanelStructureReturn } from "../props";
+export declare const usePanelStructure: ({ title, subheading, iconclass, exportformat, headerActions, footerActions, shownavigation, onDemandLoad, internalDataset, pagesize, allowpagesizechange, datasource, showrecordcount, }: UsePanelStructureProps) => UsePanelStructureReturn;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePanelStructure = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+var usePanelStructure = exports.usePanelStructure = function usePanelStructure(_ref) {
+  var title = _ref.title,
+    subheading = _ref.subheading,
+    iconclass = _ref.iconclass,
+    _ref$exportformat = _ref.exportformat,
+    exportformat = _ref$exportformat === void 0 ? [] : _ref$exportformat,
+    headerActions = _ref.headerActions,
+    footerActions = _ref.footerActions,
+    shownavigation = _ref.shownavigation,
+    onDemandLoad = _ref.onDemandLoad,
+    internalDataset = _ref.internalDataset,
+    pagesize = _ref.pagesize,
+    allowpagesizechange = _ref.allowpagesizechange,
+    datasource = _ref.datasource,
+    _ref$showrecordcount = _ref.showrecordcount,
+    showrecordcount = _ref$showrecordcount === void 0 ? false : _ref$showrecordcount;
+  var showPanelHeading = (0, _react.useMemo)(function () {
+    return (0, _utils.shouldShowPanelHeading)(title, subheading, iconclass, exportformat, headerActions);
+  }, [title, subheading, iconclass, exportformat, headerActions]);
+  var showPagination = (0, _react.useMemo)(function () {
+    return (0, _utils.shouldShowPagination)({
+      shownavigation: shownavigation,
+      onDemandLoad: onDemandLoad,
+      internalDataset: internalDataset,
+      pagesize: pagesize,
+      allowpagesizechange: allowpagesizechange,
+      datasource: datasource,
+      showrecordcount: showrecordcount
+    });
+  }, [shownavigation, onDemandLoad, internalDataset, pagesize, allowpagesizechange, datasource, showrecordcount]);
+  return {
+    showPanelHeading: showPanelHeading,
+    showPagination: showPagination
+  };
+};