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

package/components/data/form/form-dynamic-section/index.js

@@ -1,46 +1,52 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _formBody = _interopRequireDefault(require("../form-body"));
-var _container = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/container"));
-var _dynamicFields = _interopRequireDefault(require("../dynamic-fields"));
-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;
-var DYNAMIC_FORM_BODY_SUFFIX = "_dynamic_form_body";
-var DYNAMIC_FORM_CONTAINER_SUFFIX = "_dynamic_form_container";
-var DYNAMIC_FIELDS_SUFFIX = "_dynamic_fields";
-function FormDynamicFieldsSectionComponent(_ref) {
-  var formName = _ref.formName,
-    metadata = _ref.metadata,
-    listener = _ref.listener;
-  var formBodyName = formName + DYNAMIC_FORM_BODY_SUFFIX;
-  var containerName = formName + DYNAMIC_FORM_CONTAINER_SUFFIX;
-  var dynamicFieldsName = formName + DYNAMIC_FIELDS_SUFFIX;
-  return __jsx(_formBody["default"], {
-    name: formBodyName,
-    listener: listener,
-    "data-widget-id": "widget-".concat(formName, "-dynamic-body")
-  }, __jsx(_container["default"], {
-    name: containerName,
-    listener: listener,
-    "data-widget-id": "widget-".concat(formName, "-dynamic-container"),
-    className: "dynamic-form-container"
-  }, __jsx(_dynamicFields["default"], {
-    name: dynamicFieldsName,
-    metadata: metadata,
-    listener: listener,
-    "data-widget-id": "widget-".concat(formName, "-dynamic-fields")
-  })));
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import WmFormBody from "../form-body";
+import WmContainer from "../../../container";
+import WmDynamicFields from "../dynamic-fields";
+const DYNAMIC_FORM_BODY_SUFFIX = "_dynamic_form_body";
+const DYNAMIC_FORM_CONTAINER_SUFFIX = "_dynamic_form_container";
+const DYNAMIC_FIELDS_SUFFIX = "_dynamic_fields";
+function FormDynamicFieldsSectionComponent({
+  formName,
+  metadata,
+  listener
+}) {
+  const formBodyName = formName + DYNAMIC_FORM_BODY_SUFFIX;
+  const containerName = formName + DYNAMIC_FORM_CONTAINER_SUFFIX;
+  const dynamicFieldsName = formName + DYNAMIC_FIELDS_SUFFIX;
+  return /* @__PURE__ */ jsx(
+    WmFormBody,
+    {
+      name: formBodyName,
+      listener,
+      "data-widget-id": `widget-${formName}-dynamic-body`,
+      children: /* @__PURE__ */ jsx(
+        WmContainer,
+        {
+          name: containerName,
+          listener,
+          "data-widget-id": `widget-${formName}-dynamic-container`,
+          className: "dynamic-form-container",
+          children: /* @__PURE__ */ jsx(
+            WmDynamicFields,
+            {
+              name: dynamicFieldsName,
+              metadata,
+              listener,
+              "data-widget-id": `widget-${formName}-dynamic-fields`
+            }
+          )
+        }
+      )
+    }
+  );
 }
 function propsAreEqual(prev, next) {
   return prev.formName === next.formName && prev.metadata === next.metadata;
 }
-var FormDynamicFieldsSection = /*#__PURE__*/(0, _react.memo)(FormDynamicFieldsSectionComponent, propsAreEqual);
+const FormDynamicFieldsSection = memo(FormDynamicFieldsSectionComponent, propsAreEqual);
 FormDynamicFieldsSection.displayName = "FormDynamicFieldsSection";
-var _default = exports["default"] = FormDynamicFieldsSection;
+var form_dynamic_section_default = FormDynamicFieldsSection;
+export {
+  form_dynamic_section_default as default
+};

package/components/data/form/form-dynamic-section/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/components/data/form/form-field/base-field.js

@@ -1,55 +1,46 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _filterFieldUtil = require("../../utils/filter-field-util");
-var _formContext = require("@wavemaker-ai/react-runtime/components/data/form/form-context");
-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; }
-var initialRelatedData = {
+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 { useState, useMemo, useRef, useCallback } from "react";
+import { LIVE_CONSTANTS } from "../../utils/filter-field-util";
+import { useFormContext } from "../form-context";
+const initialRelatedData = {
   dataset: [],
   displayfield: "",
   displaylabel: "",
   datafield: "",
   searchkey: ""
 };
-var BaseField = function BaseField(WrappedComponent) {
-  var FormField = function FormField(props) {
-    var formContext = (0, _formContext.useFormContext)();
-    var fieldRef = (0, _react.useRef)(null);
-    var _ref = formContext || {},
-      widgetCls = _ref.widgetCls,
-      captionCls = _ref.captionCls,
-      captionposition = _ref.captionposition;
-    var _useState = (0, _react.useState)(props.validators || []),
-      validators = _useState[0],
-      setValidators = _useState[1];
-    var _useState2 = (0, _react.useState)([]),
-      asyncValidators = _useState2[0],
-      setAsyncValidators = _useState2[1];
-    var _useState3 = (0, _react.useState)([]),
-      observe = _useState3[0],
-      observeOn = _useState3[1];
-    var _useState4 = (0, _react.useState)(false),
-      isDataSetBound = _useState4[0],
-      setIsDataSetBound = _useState4[1];
-    var _useState5 = (0, _react.useState)(initialRelatedData),
-      relatedData = _useState5[0],
-      setRelatedData = _useState5[1];
-    var _useState6 = (0, _react.useState)(null),
-      customValidationMsg = _useState6[0],
-      setCustomValidationMsg = _useState6[1];
-    var setValidationMessage = (0, _react.useCallback)(function (val) {
-      setTimeout(function () {
+const BaseField = (WrappedComponent) => {
+  const FormField = (props) => {
+    const formContext = useFormContext();
+    const fieldRef = useRef(null);
+    const { widgetCls, captionCls, captionposition } = formContext || {};
+    const [validators, setValidators] = useState(props.validators || []);
+    const [asyncValidators, setAsyncValidators] = useState([]);
+    const [observe, observeOn] = useState([]);
+    const [isDataSetBound, setIsDataSetBound] = useState(false);
+    const [relatedData, setRelatedData] = useState(initialRelatedData);
+    const [customValidationMsg, setCustomValidationMsg] = useState(null);
+    const setValidationMessage = useCallback((val) => {
+      setTimeout(() => {
         setCustomValidationMsg(val || null);
       });
     }, []);
@@ -59,29 +50,23 @@ var BaseField = function BaseField(WrappedComponent) {
         displayfield: displayField || props.displayfield,
         datafield: "All Fields"
       });
-
-      // After updating the dataset, we need to ensure the form field value is synced
-      // This is especially important for related fields where the datafield changes
-      if (formContext !== null && formContext !== void 0 && formContext.trigger && props.formKey) {
-        // Trigger validation for this field to force react-hook-form to re-evaluate
-        setTimeout(function () {
+      if ((formContext == null ? void 0 : formContext.trigger) && props.formKey) {
+        setTimeout(() => {
           formContext.trigger(props.formKey);
         }, 0);
       }
     }
     function setFieldDataSet(dataset, options) {
       setRelatedData({
-        displaylabel: props.displayfield = options.aliasColumn || _filterFieldUtil.LIVE_CONSTANTS.LABEL_VALUE,
-        displayfield: props.displayfield = options.aliasColumn || _filterFieldUtil.LIVE_CONSTANTS.LABEL_VALUE,
-        datafield: options.aliasColumn || _filterFieldUtil.LIVE_CONSTANTS.LABEL_KEY,
-        searchkey: options.distinctField || _filterFieldUtil.LIVE_CONSTANTS.LABEL_KEY,
-        dataset: dataset
+        displaylabel: props.displayfield = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE,
+        displayfield: props.displayfield = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE,
+        datafield: options.aliasColumn || LIVE_CONSTANTS.LABEL_KEY,
+        searchkey: options.distinctField || LIVE_CONSTANTS.LABEL_KEY,
+        dataset
       });
     }
-
-    // Check if there's a required validator and update the required prop
-    var hasRequiredValidator = function hasRequiredValidator() {
-      var checkRequiredValidator = function checkRequiredValidator(validator) {
+    const hasRequiredValidator = () => {
+      const checkRequiredValidator = (validator) => {
         if (validator.type === "required") {
           if (typeof validator.validator === "function") {
             try {
@@ -97,76 +82,79 @@ var BaseField = function BaseField(WrappedComponent) {
       };
       return validators.some(checkRequiredValidator) || asyncValidators.some(checkRequiredValidator);
     };
-
-    // Use the required prop from validators if present, otherwise use the original required prop
-    // If validators indicate required, that takes precedence
-    var isRequired = hasRequiredValidator() || props.required || false;
-
-    // Transform formKey to match actual data keys
-    var transformedFormKey = (0, _react.useMemo)(function () {
-      // Check if this is a child form (has parentForm or formKey contains child form pattern)
-      var isChildForm = props.parentForm;
+    const isRequired = hasRequiredValidator() || props.required || false;
+    const transformedFormKey = useMemo(() => {
+      const isChildForm = props.parentForm;
       if (isChildForm) {
-        // For child forms, use searchkey directly as it contains the actual field name
         if (props.searchkey) {
           return props.searchkey;
         }
       }
-
-      // Prefer searchkey over formKey only for dotted form paths (related / nested binding).
-      // Chips and other widgets set searchkey for dataset lookup (e.g. "name"); that must not
-      // become the react-hook-form field id or every such field collides on the same key.
       if (props.formKey && props.searchkey && props.searchkey !== props.formKey) {
         return props.searchkey;
       }
-
-      // For parent forms or when no transformation needed, use original formKey
       return props.formKey;
     }, [props.formKey, props.searchkey, props.formName, props.name, props.parentForm]);
     function resetField() {
-      var fieldName = props.formKey || props.name;
-      (formContext === null || formContext === void 0 ? void 0 : formContext.resetField) && (formContext === null || formContext === void 0 ? void 0 : formContext.resetField(fieldName));
+      const fieldName = props.formKey || props.name;
+      (formContext == null ? void 0 : formContext.resetField) && (formContext == null ? void 0 : formContext.resetField(fieldName));
     }
-    var modifiedProps = (0, _react.useMemo)(function () {
-      var _relatedData$dataset;
-      return _objectSpread(_objectSpread({}, props), {}, {
+    const modifiedProps = useMemo(() => {
+      var _a;
+      return __spreadValues(__spreadProps(__spreadValues({}, props), {
         formRef: formContext,
-        itemsPerRow: formContext === null || formContext === void 0 ? void 0 : formContext.itemsPerRow,
-        validators: validators,
-        asyncValidators: asyncValidators,
-        observe: observe,
-        observeOn: observeOn,
-        setValidators: setValidators,
-        setAsyncValidators: setAsyncValidators,
-        widgetCls: widgetCls,
-        captionCls: captionCls,
-        fieldRef: fieldRef,
+        itemsPerRow: formContext == null ? void 0 : formContext.itemsPerRow,
+        validators,
+        asyncValidators,
+        observe,
+        observeOn,
+        setValidators,
+        setAsyncValidators,
+        widgetCls,
+        captionCls,
+        fieldRef,
         reset: resetField,
-        setValidationMessage: setValidationMessage,
-        customValidationMsg: customValidationMsg,
+        setValidationMessage,
+        customValidationMsg,
         fieldName: props.name,
         formKey: transformedFormKey,
         // Use transformed formKey
-        setIsDataSetBound: setIsDataSetBound,
-        isDataSetBound: isDataSetBound,
-        updateFormWidgetDataset: updateFormWidgetDataset,
-        setFieldDataSet: setFieldDataSet,
+        setIsDataSetBound,
+        isDataSetBound,
+        updateFormWidgetDataset,
+        setFieldDataSet,
         required: isRequired,
-        captionposition: captionposition
-      }, relatedData.dataset && ((_relatedData$dataset = relatedData.dataset) === null || _relatedData$dataset === void 0 ? void 0 : _relatedData$dataset.length) > 0 ? {
+        captionposition
+      }), relatedData.dataset && ((_a = relatedData.dataset) == null ? void 0 : _a.length) > 0 ? {
         datafield: relatedData.datafield,
         dataset: relatedData.dataset,
         displayfield: relatedData.displayfield
       } : {});
-    }, [props, validators, asyncValidators, observe, observeOn, relatedData, isRequired, transformedFormKey, customValidationMsg]);
-    return __jsx(WrappedComponent, (0, _extends2["default"])({}, modifiedProps, {
-      validators: validators,
-      asyncValidators: asyncValidators,
-      setValidators: setValidators,
-      datavalue: props.datavalue || props.defaultvalue,
-      key: "".concat(props.formKey, "-").concat(relatedData.displayfield || "initial")
-    }));
+    }, [
+      props,
+      validators,
+      asyncValidators,
+      observe,
+      observeOn,
+      relatedData,
+      isRequired,
+      transformedFormKey,
+      customValidationMsg
+    ]);
+    return /* @__PURE__ */ createElement(
+      WrappedComponent,
+      __spreadProps(__spreadValues({}, modifiedProps), {
+        validators,
+        asyncValidators,
+        setValidators,
+        datavalue: props.datavalue || props.defaultvalue,
+        key: `${props.formKey}-${relatedData.displayfield || "initial"}`
+      })
+    );
   };
   return FormField;
 };
-var _default = exports["default"] = BaseField;
+var base_field_default = BaseField;
+export {
+  base_field_default as default
+};

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

@@ -1,87 +1,96 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmFormField = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
-var _get = _interopRequireDefault(require("lodash-es/get"));
-var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
-var _baseField = _interopRequireDefault(require("./base-field"));
-var _composite = require("@wavemaker-ai/react-runtime/components/input/composite");
-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; }
-var DEFAULT_CLASS = "ng-pristine ng-invalid ng-touched";
-var DEFAULT_COMPOSITE_CLASS = "app-composite-widget caption-left clearfix form-group live-field";
-var WmFormField = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$formRef2;
-  (0, _react.useEffect)(function () {
-    // destroy form field when component unmounts
-    if (props.name && props.destroy) {
-      props.destroy([props.name]);
+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]);
     }
-  }, []);
-
-  // Use renderFormFields prop to render the actual form field component
-  // This allows parent components to pass in form fields wrapped with withFormController
-  function renderFormFields() {
-    if (props.formRef) {
-      var _props$formRef, _formKey, _props$renderFormFiel;
-      var errors = (_props$formRef = props.formRef) === null || _props$formRef === void 0 ? void 0 : _props$formRef.errors;
-      var formKey = (_formKey = props.formKey) !== null && _formKey !== void 0 ? _formKey : props.name;
-      var fieldError = formKey && errors ? (0, _get["default"])(errors, formKey) : undefined;
-      var invalid = Boolean(fieldError);
-      var invalidCls = invalid ? " text-danger " : "";
-      return __jsx(_react["default"].Fragment, null, props === null || props === void 0 || (_props$renderFormFiel = props.renderFormFields) === null || _props$renderFormFiel === void 0 ? void 0 : _props$renderFormFiel.call(props, _objectSpread(_objectSpread({}, props), {}, {
-        fieldError: fieldError,
-        invalid: invalid,
-        invalidCls: invalidCls
-      })));
-    } else {
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx } from "react/jsx-runtime";
+import { memo, useEffect } from "react";
+import clsx from "clsx";
+import isEqual from "lodash-es/isEqual";
+import get from "lodash-es/get";
+import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
+import BaseField from "./base-field";
+import { WmComposite } from "../../../input/composite";
+const DEFAULT_CLASS = "ng-pristine ng-invalid ng-touched";
+const DEFAULT_COMPOSITE_CLASS = "app-composite-widget caption-left clearfix form-group live-field";
+const WmFormField = memo(
+  (props) => {
+    var _a;
+    useEffect(() => {
+      if (props.name && props.destroy) {
+        props.destroy([props.name]);
+      }
+    }, []);
+    function renderFormFields() {
+      var _a2, _b, _c;
+      if (props.formRef) {
+        const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
+        const formKey = (_b = props.formKey) != null ? _b : props.name;
+        const fieldError = formKey && errors ? get(errors, formKey) : void 0;
+        const invalid = Boolean(fieldError);
+        const invalidCls = invalid ? " text-danger " : "";
+        return /* @__PURE__ */ jsx(Fragment, { children: (_c = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _c.call(props, __spreadProps(__spreadValues({}, props), {
+          fieldError,
+          invalid,
+          invalidCls
+        })) });
+      } else {
+        return null;
+      }
+    }
+    const itemsPerRow = ((_a = props == null ? void 0 : props.formRef) == null ? void 0 : _a.itemsPerRow) || "";
+    if (props.hidden) {
       return null;
     }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(props.className, itemsPerRow, DEFAULT_CLASS),
+        id: props.id,
+        style: __spreadValues(__spreadValues({}, props.conditionalstyle), props.styles),
+        "data-displayname": props.displayname,
+        "data-name": props.name,
+        "data-placeholder": props.placeholder,
+        name: props.name,
+        displayname: props.displayname,
+        placeholder: props.placeholder,
+        hidden: props.hidden,
+        "data-role": props.role || "form-field",
+        children: /* @__PURE__ */ jsx(
+          WmComposite,
+          {
+            captionposition: props.captionposition || "left",
+            listener: {},
+            name: "",
+            className: DEFAULT_COMPOSITE_CLASS,
+            children: renderFormFields()
+          }
+        )
+      }
+    );
+  },
+  (prev, next) => {
+    return isEqual(prev, next);
   }
-  var itemsPerRow = (props === null || props === void 0 || (_props$formRef2 = props.formRef) === null || _props$formRef2 === void 0 ? void 0 : _props$formRef2.itemsPerRow) || "";
-  if (props.hidden) {
-    return null;
-  }
-  return __jsx("div", {
-    className: (0, _clsx["default"])(props.className, itemsPerRow, DEFAULT_CLASS),
-    id: props.id,
-    style: _objectSpread(_objectSpread({}, props.conditionalstyle), props.styles),
-    "data-displayname": props.displayname,
-    "data-name": props.name,
-    "data-placeholder": props.placeholder,
-    name: props.name,
-    displayname: props.displayname,
-    placeholder: props.placeholder,
-    hidden: props.hidden,
-    "data-role": props.role || "form-field"
-  }, __jsx(_composite.WmComposite, {
-    captionposition: props.captionposition || "left",
-    listener: {},
-    name: "",
-    className: DEFAULT_COMPOSITE_CLASS
-  }, renderFormFields()));
-}, function (prev, next) {
-  return (0, _isEqual["default"])(prev, next);
-});
+);
 WmFormField.displayName = "WmFormField";
-var WmFormFieldStandalone = exports.WmFormField = (0, _baseField["default"])(WmFormField);
-/**
- * The WmFormField component represents a single field within a form.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-form-field--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-form-field--docs#tab-overview)
- *
- * @param props - {@link WmFormFieldProps}
- */
-var _default = exports["default"] = (0, _baseField["default"])((0, _withBaseWrapper["default"])(WmFormField));
+const WmFormFieldStandalone = BaseField(WmFormField);
+var form_field_default = BaseField(withBaseWrapper(WmFormField));
+export {
+  WmFormFieldStandalone as WmFormField,
+  form_field_default as default
+};

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

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

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

@@ -1,27 +1,54 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmFormFooter = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
-var _excluded = ["className", "children"];
-var __jsx = _react["default"].createElement;
-var DEFAULT_CLASS = "basic-btn-grp form-action panel-footer clearfix";
-var WmFormFooter = exports.WmFormFooter = function WmFormFooter(props) {
-  var className = props.className,
-    children = props.children,
-    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return __jsx(_Box["default"], (0, _extends2["default"])({
-    component: "div",
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className)
-  }, (0, _attr.removeInvalidAttributes)(rest)), children);
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { removeInvalidAttributes } from "../../../../utils/attr";
+const DEFAULT_CLASS = "basic-btn-grp form-action panel-footer clearfix";
+const WmFormFooter = (props) => {
+  const _a = props, { className, children } = _a, rest = __objRest(_a, ["className", "children"]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps(__spreadValues({
+      component: "div",
+      className: clsx(DEFAULT_CLASS, className)
+    }, removeInvalidAttributes(rest)), {
+      children
+    })
+  );
 };
 WmFormFooter.displayName = "WmFormFooter";
-var _default = exports["default"] = WmFormFooter;
+var form_footer_default = WmFormFooter;
+export {
+  WmFormFooter,
+  form_footer_default as default
+};