@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/data/live-form/index.js

@@ -1,108 +1,90 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _props = require("./props");
-var _form = _interopRequireDefault(require("../form"));
-var _fieldDataUtils = require("../utils/field-data-utils");
-var _replace = _interopRequireDefault(require("lodash-es/replace"));
-var _utils = require("../utils");
-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" != _typeof3(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; }
-var WmLiveForm = function WmLiveForm(prop) {
-  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), prop);
-  var dynamicFieldsRef = (0, _react.useRef)([]);
-  var isDataSourceUpdatedRef = (0, _react.useRef)(false);
-  // FIX: Store formFields ref to get current field references at API response time
-  // This prevents stale closure issue where old component's updateFormWidgetDataset is called
-  var formFieldsRef = (0, _react.useRef)([]);
-  var dataSource = props.datasource;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createElement } from "react";
+import { DEFAULT_PROPS } from "./props";
+import Form from "../form";
+import { isDataSetWidget } from "../utils/field-data-utils";
+import replace from "lodash-es/replace";
+import { useCallback, useEffect, useRef } from "react";
+import { findOperationType } from "../utils";
+const WmLiveForm = (prop) => {
+  const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), prop);
+  const dynamicFieldsRef = useRef([]);
+  const isDataSourceUpdatedRef = useRef(false);
+  const formFieldsRef = useRef([]);
+  const dataSource = props.datasource;
   function formSubmit(formData, success, error, operation) {
-    var primaryKeys = dataSource.execute("getPrimaryKey");
-    var operationType = operation !== null && operation !== void 0 ? operation : (0, _utils.findOperationType)(formData, primaryKeys);
+    const primaryKeys = dataSource.execute("getPrimaryKey");
+    const operationType = operation != null ? operation : findOperationType(formData, primaryKeys);
     if (dynamicFieldsRef.current.length > 0) {
-      dynamicFieldsRef.current.forEach(function (field) {
-        var item = field.formKey;
+      dynamicFieldsRef.current.forEach((field) => {
+        const item = field.formKey;
         formData[item] = field.dataset[formData[item] - 1];
       });
     }
-    var successWithOperationType = function successWithOperationType(res) {
-      var payload = res && (0, _typeof2["default"])(res) === "object" ? _objectSpread(_objectSpread({}, res), {}, {
-        operationType: operationType
-      }) : {
-        operationType: operationType
-      };
+    const successWithOperationType = (res) => {
+      const payload = res && typeof res === "object" ? __spreadProps(__spreadValues({}, res), { operationType }) : { operationType };
       if (typeof success === "function") {
         success(payload);
       }
       return payload;
     };
     if (operationType === "delete") {
-      formData = _objectSpread(_objectSpread({}, formData), {}, {
-        row: formData
-      });
+      formData = __spreadProps(__spreadValues({}, formData), { row: formData });
     } else {
-      formData = {
-        inputFields: formData
-      };
+      formData = { inputFields: formData };
     }
     if (props.onBeforeservicecall) {
-      var event = new Event("submit");
+      const event = new Event("submit");
       props.onBeforeservicecall(event, operationType, formData, dataSource.options);
     }
     props.formSubmit(formData, operationType, successWithOperationType, error);
   }
   function getRelatedTableData(formField) {
-    // Capture formKey to look up current field at response time (not the captured formField object)
-    var formKey = formField.formKey;
+    const formKey = formField.formKey;
     dataSource && dataSource.execute("getRelatedTableData", {
       relatedField: formKey,
       pagesize: formField.limit,
-      orderBy: formField.orderby ? (0, _replace["default"])(formField.orderby, /:/g, " ") : "",
+      orderBy: formField.orderby ? replace(formField.orderby, /:/g, " ") : "",
       filterFields: {},
       filterExpr: formField.filterexpressions ? formField.filterexpressions : {}
-    }).then(function (response) {
-      var primaryKeys = dataSource.execute("getRelatedTablePrimaryKeys", formKey);
-      var displayField = primaryKeys.length < 0 ? undefined : primaryKeys[0];
-
-      // FIX: Look up the CURRENT field from formFieldsRef at response time
-      // This ensures we call the current component's updateFormWidgetDataset, not a stale one
-      var currentField = formFieldsRef.current.find(function (f) {
-        return f.formKey === formKey;
-      });
-
-      // Check if updateFormWidgetDataset is a function before calling it
+    }).then((response) => {
+      const primaryKeys = dataSource.execute("getRelatedTablePrimaryKeys", formKey);
+      const displayField = primaryKeys.length < 0 ? void 0 : primaryKeys[0];
+      const currentField = formFieldsRef.current.find((f) => f.formKey === formKey);
       if (currentField && typeof currentField.updateFormWidgetDataset === "function") {
         currentField.updateFormWidgetDataset(response, displayField);
       }
       dynamicFieldsRef.current.push({
-        formKey: formKey,
+        formKey,
         dataset: response.data,
-        displayField: displayField
+        displayField
       });
     });
   }
-  var onDataSourceChange = (0, _react.useCallback)(function (formFields) {
-    // FIX: Always update formFieldsRef with latest fields so async callbacks get current references
+  const onDataSourceChange = useCallback((formFields) => {
     formFieldsRef.current = formFields;
     if (isDataSourceUpdatedRef.current) return;
-    formFields.forEach(function (field) {
-      // FIX: Ignore field.isDataSetBound since isDataSourceUpdatedRef already guards against re-processing.
-      // The field's isDataSetBound state persists across dialog close/reopen, causing the bug.
-      // isDataSourceUpdatedRef is the correct source of truth for whether this LiveForm session has processed fields.
-      if ((0, _fieldDataUtils.isDataSetWidget)(field.widget) && field["isRelated"]) {
+    formFields.forEach((field) => {
+      if (isDataSetWidget(field.widget) && field["isRelated"]) {
         getRelatedTableData(field);
-        // Check if setIsDataSetBound is a function before calling it
         if (typeof field.setIsDataSetBound === "function") {
           field.setIsDataSetBound(true);
         }
@@ -112,32 +94,27 @@ var WmLiveForm = function WmLiveForm(prop) {
       isDataSourceUpdatedRef.current = true;
     }
   }, []);
-
-  // Destroy widget when component unmounts
-  (0, _react.useEffect)(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       if (props.destroy) {
         props.destroy([props.name]);
       }
       isDataSourceUpdatedRef.current = false;
     };
   }, [props.destroy, props.name]);
-  return __jsx(_form["default"], (0, _extends2["default"])({}, props, {
-    formSubmit: formSubmit,
-    onDataSourceChange: onDataSourceChange,
-    widgettype: "live-form",
-    key: "live-form-".concat(props.name)
-  }), props.children);
+  return /* @__PURE__ */ createElement(
+    Form,
+    __spreadProps(__spreadValues({}, props), {
+      formSubmit,
+      onDataSourceChange,
+      widgettype: "live-form",
+      key: `live-form-${props.name}`
+    }),
+    props.children
+  );
 };
 WmLiveForm.displayName = "WmLiveForm";
-
-/**
- * The WmLiveForm component is used to create and manage forms with live data.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-live-form--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-live-form--docs)
- *
- * @param props - {@link WmLiveFormProps}
- */
-var _default = exports["default"] = WmLiveForm;
+var live_form_default = WmLiveForm;
+export {
+  live_form_default as default
+};

package/components/data/live-form/props.js

@@ -1,14 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEFAULT_PROPS = void 0;
-/**
- * Combined props for the WmLiveForm component, including base WaveMaker props.
- */
-
-var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+const DEFAULT_PROPS = {
   validationtype: "default",
   defaultmode: "view",
   formlayout: "inline",
@@ -17,4 +7,7 @@ var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   deletemessage: "Record deleted successfully",
   errormessage: "An error occured. Please try again!",
   messagelayout: "Toaster"
-};
+};
+export {
+  DEFAULT_PROPS
+};

package/components/data/pagination/components/BasicPagination.js

@@ -1,26 +1,41 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BasicPagination = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Pagination = _interopRequireDefault(require("@mui/material/Pagination"));
-var _PaginationItem = _interopRequireDefault(require("@mui/material/PaginationItem"));
-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;
-// Constants for class names
-var CUSTOM_CLASSES = ["active", "disabled", "pagination-page", "pagination-prev", "pagination-next", "pagination-first", "pagination-last", "page-item"];
-var PAGE_ITEM_CLASS = "page-item";
-var PAGE_LINK_CLASS = "page-link";
-
-// Map MUI icon test IDs to pagination class names
-var ICON_TO_CLASS_MAP = {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import Pagination from "@mui/material/Pagination";
+import PaginationItem from "@mui/material/PaginationItem";
+const CUSTOM_CLASSES = [
+  "active",
+  "disabled",
+  "pagination-page",
+  "pagination-prev",
+  "pagination-next",
+  "pagination-first",
+  "pagination-last",
+  "page-item"
+];
+const PAGE_ITEM_CLASS = "page-item";
+const PAGE_LINK_CLASS = "page-link";
+const ICON_TO_CLASS_MAP = {
   NavigateBeforeIcon: "pagination-prev",
   KeyboardArrowLeftIcon: "pagination-prev",
   NavigateNextIcon: "pagination-next",
@@ -28,46 +43,45 @@ var ICON_TO_CLASS_MAP = {
   FirstPageIcon: "pagination-first",
   LastPageIcon: "pagination-last"
 };
-var BasicPagination = exports.BasicPagination = function BasicPagination(_ref) {
-  var pageCount = _ref.pageCount,
-    currentPage = _ref.currentPage,
-    dataSize = _ref.dataSize,
-    maxResults = _ref.maxResults,
-    _ref$boundarylinks = _ref.boundarylinks,
-    boundarylinks = _ref$boundarylinks === void 0 ? false : _ref$boundarylinks,
-    _ref$directionlinks = _ref.directionlinks,
-    directionlinks = _ref$directionlinks === void 0 ? true : _ref$directionlinks,
-    navigationsize = _ref.navigationsize,
-    navigationClass = _ref.navigationClass,
-    _ref$maxsize = _ref.maxsize,
-    maxsize = _ref$maxsize === void 0 ? 5 : _ref$maxsize,
-    onPageChange = _ref.onPageChange;
-  var paginationRef = (0, _react.useRef)(null);
-  var addNavigationClasses = (0, _react.useCallback)(function (li, anchor, testId, isDisabled) {
-    if (!testId || !ICON_TO_CLASS_MAP[testId]) return;
-    var paginationClass = ICON_TO_CLASS_MAP[testId];
-    li.classList.add(paginationClass, PAGE_ITEM_CLASS);
-    if (isDisabled) {
-      li.classList.add("disabled");
-    }
-  }, []);
-  var updateClasses = (0, _react.useCallback)(function () {
+const BasicPagination = ({
+  pageCount,
+  currentPage,
+  dataSize,
+  maxResults,
+  boundarylinks = false,
+  directionlinks = true,
+  navigationsize,
+  navigationClass,
+  maxsize = 5,
+  onPageChange
+}) => {
+  const paginationRef = useRef(null);
+  const addNavigationClasses = useCallback(
+    (li, anchor, testId, isDisabled) => {
+      if (!testId || !ICON_TO_CLASS_MAP[testId]) return;
+      const paginationClass = ICON_TO_CLASS_MAP[testId];
+      li.classList.add(paginationClass, PAGE_ITEM_CLASS);
+      if (isDisabled) {
+        li.classList.add("disabled");
+      }
+    },
+    []
+  );
+  const updateClasses = useCallback(() => {
     if (!paginationRef.current) return;
-    var allLis = paginationRef.current.querySelectorAll(".MuiPagination-ul > li");
-    allLis.forEach(function (li) {
-      var _li$classList;
-      // Remove all custom classes first
-      (_li$classList = li.classList).remove.apply(_li$classList, CUSTOM_CLASSES);
-      var anchor = li.querySelector("a");
+    const allLis = paginationRef.current.querySelectorAll(".MuiPagination-ul > li");
+    allLis.forEach((li) => {
+      var _a;
+      li.classList.remove(...CUSTOM_CLASSES);
+      const anchor = li.querySelector("a");
       if (!anchor) return;
-      var isNavigationButton = anchor.classList.contains("MuiPaginationItem-previousNext");
-      var isPageButton = anchor.classList.contains("MuiPaginationItem-page");
-      var isDisabled = anchor.classList.contains("Mui-disabled");
-      var isSelected = anchor.classList.contains("Mui-selected");
+      const isNavigationButton = anchor.classList.contains("MuiPaginationItem-previousNext");
+      const isPageButton = anchor.classList.contains("MuiPaginationItem-page");
+      const isDisabled = anchor.classList.contains("Mui-disabled");
+      const isSelected = anchor.classList.contains("Mui-selected");
       if (isNavigationButton) {
-        var _svg$getAttribute;
-        var svg = anchor.querySelector("svg");
-        var testId = (_svg$getAttribute = svg === null || svg === void 0 ? void 0 : svg.getAttribute("data-testid")) !== null && _svg$getAttribute !== void 0 ? _svg$getAttribute : null;
+        const svg = anchor.querySelector("svg");
+        const testId = (_a = svg == null ? void 0 : svg.getAttribute("data-testid")) != null ? _a : null;
         addNavigationClasses(li, anchor, testId, isDisabled);
       } else if (isPageButton) {
         li.classList.add("pagination-page", PAGE_ITEM_CLASS);
@@ -75,59 +89,65 @@ var BasicPagination = exports.BasicPagination = function BasicPagination(_ref) {
           li.classList.add("active");
         }
       }
-
-      // Add page-link class to anchor if not already present
       if (!anchor.classList.contains(PAGE_LINK_CLASS)) {
         anchor.classList.add(PAGE_LINK_CLASS);
       }
     });
   }, [addNavigationClasses]);
-  (0, _react.useEffect)(function () {
-    // Update classes immediately for instant visual feedback
+  useEffect(() => {
     updateClasses();
-
-    // Also schedule an update after a frame to catch any delayed MUI updates
-    var rafId = requestAnimationFrame(function () {
+    const rafId = requestAnimationFrame(() => {
       updateClasses();
     });
-    return function () {
+    return () => {
       cancelAnimationFrame(rafId);
     };
   }, [currentPage, pageCount, updateClasses]);
-  return __jsx(_Box["default"], {
-    ref: paginationRef,
-    component: "nav",
-    role: "navigation",
-    className: "pagination basic",
-    "aria-label": "Showing Page ".concat(currentPage, " of ").concat(pageCount, " pages"),
-    sx: {
-      // Hide MUI SVG icons for navigation buttons since CSS ::before will provide the icons
-      "& .MuiPaginationItem-previousNext .MuiPaginationItem-icon": {
-        display: "none"
-      }
-    }
-  }, __jsx(_Pagination["default"], {
-    count: pageCount,
-    page: currentPage,
-    onChange: onPageChange,
-    showFirstButton: boundarylinks,
-    showLastButton: boundarylinks,
-    hidePrevButton: !directionlinks,
-    hideNextButton: !directionlinks,
-    size: navigationsize === "small" ? "small" : "medium",
-    siblingCount: Math.floor(maxsize / 2),
-    classes: {
-      ul: (0, _clsx["default"])("pagination", "basic", navigationClass)
-    },
-    renderItem: function renderItem(item) {
-      return __jsx(_PaginationItem["default"], (0, _extends2["default"])({}, item, {
-        sx: {
-          cursor: "pointer"
-        },
-        component: "a",
-        "aria-current": item.selected ? "true" : undefined,
-        "aria-disabled": item.disabled ? "true" : undefined
-      }));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: paginationRef,
+      component: "nav",
+      role: "navigation",
+      className: "pagination basic",
+      "aria-label": `Showing Page ${currentPage} of ${pageCount} pages`,
+      sx: {
+        // Hide MUI SVG icons for navigation buttons since CSS ::before will provide the icons
+        "& .MuiPaginationItem-previousNext .MuiPaginationItem-icon": {
+          display: "none"
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          count: pageCount,
+          page: currentPage,
+          onChange: onPageChange,
+          showFirstButton: boundarylinks,
+          showLastButton: boundarylinks,
+          hidePrevButton: !directionlinks,
+          hideNextButton: !directionlinks,
+          size: navigationsize === "small" ? "small" : "medium",
+          siblingCount: Math.floor(maxsize / 2),
+          classes: {
+            ul: clsx("pagination", "basic", navigationClass)
+          },
+          renderItem: (item) => /* @__PURE__ */ jsx(
+            PaginationItem,
+            __spreadProps(__spreadValues({}, item), {
+              sx: {
+                cursor: "pointer"
+              },
+              component: "a",
+              "aria-current": item.selected ? "true" : void 0,
+              "aria-disabled": item.disabled ? "true" : void 0
+            })
+          )
+        }
+      )
     }
-  }));
-};
+  );
+};
+export {
+  BasicPagination
+};