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

package/components/data/form/dynamic-fields/props.d.ts

@@ -0,0 +1,70 @@
+export type WidgetType = "text" | "textarea" | "number" | "currency" | "select" | "slider" | "rating" | "checkbox" | "checkboxset" | "radioset" | "switch" | "date" | "datetime" | "time" | "chips" | "colorpicker" | "fileupload" | "calendar";
+export type CaptionPosition = "left" | "top" | "floating" | "right";
+export type FormLayout = "1-column" | "2-column" | "3-column" | "custom";
+export interface FormFieldMetadata {
+    name: string;
+    widget: WidgetType;
+    displayname?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean | string;
+    disabled?: boolean;
+    readonly?: boolean;
+    datavalue?: any;
+    defaultvalue?: any;
+    maxchars?: number;
+    minvalue?: number;
+    maxvalue?: number;
+    step?: number;
+    dataset?: any[];
+    datafield?: string;
+    displayfield?: string;
+    displayExpression?: string;
+    multiple?: boolean;
+    columnwidth?: number;
+    regexp?: string;
+    regexpmessage?: string;
+    className?: string;
+    styles?: React.CSSProperties;
+    onChange?: (value: any) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    [key: string]: any;
+    class?: string;
+}
+export interface DynamicFormProps {
+    metadata: FormFieldMetadata[];
+    listener?: any;
+    captionposition?: CaptionPosition;
+    layout?: FormLayout;
+    noOfColumns?: number;
+    isHorizontal?: boolean;
+    className?: string;
+    name?: string;
+    formRef?: any;
+    onBeforeRender?: (metadata: FormFieldMetadata[], widget: DynamicFormProps) => FormFieldMetadata[];
+    onFieldChange?: (fieldName: string, value: any) => void;
+    onFormChange?: (formData: Record<string, any>) => void;
+    onValidation?: (errors: Record<string, string>) => void;
+}
+export interface APIFieldResponse {
+    name: string;
+    type: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    validation?: {
+        minLength?: number;
+        maxLength?: number;
+        pattern?: string;
+        min?: number;
+        max?: number;
+    };
+    options?: Array<{
+        value: any;
+        label: string;
+        [key: string]: any;
+    }>;
+    [key: string]: any;
+}
+export type APIResponseTransformer = (apiResponse: APIFieldResponse[]) => FormFieldMetadata[];

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

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

package/components/data/form/dynamic-fields/utils.d.ts

@@ -0,0 +1,46 @@
+import { FormFieldMetadata, APIFieldResponse, WidgetType } from "./props";
+/**
+ * Transform API response fields to FormFieldMetadata
+ */
+export declare const transformAPIResponse: (apiFields: APIFieldResponse[]) => FormFieldMetadata[];
+/**
+ * Transform a single API field to FormFieldMetadata
+ */
+export declare const transformSingleField: (apiField: APIFieldResponse) => FormFieldMetadata;
+/**
+ * Validate a form field value
+ */
+export declare const validateField: (field: FormFieldMetadata, value: any) => string | null;
+/**
+ * Validate all fields in a form
+ */
+export declare const validateForm: (fields: FormFieldMetadata[], formData: Record<string, any>) => Record<string, string>;
+/**
+ * Get form data values from fields
+ */
+export declare const getFormData: (fields: FormFieldMetadata[]) => Record<string, any>;
+/**
+ * Update a field's value in the fields array
+ */
+export declare const updateFieldValue: (fields: FormFieldMetadata[], fieldName: string, value: any) => FormFieldMetadata[];
+/**
+ * Get field by name
+ */
+export declare const getFieldByName: (fields: FormFieldMetadata[], fieldName: string) => FormFieldMetadata | undefined;
+/**
+ * Check if form has any validation errors
+ */
+export declare const hasFormErrors: (fields: FormFieldMetadata[], formData: Record<string, any>) => boolean;
+/**
+ * Create default field metadata
+ */
+export declare const createDefaultField: (name: string, widget?: WidgetType) => FormFieldMetadata;
+/**
+ * Sort fields by a given property
+ */
+export declare const sortFields: (fields: FormFieldMetadata[], sortBy?: keyof FormFieldMetadata) => FormFieldMetadata[];
+/**
+ * Filter fields by widget type
+ */
+export declare const filterFieldsByWidget: (fields: FormFieldMetadata[], widgetTypes: WidgetType[]) => FormFieldMetadata[];
+export declare function updateMetadata(metadata: FormFieldMetadata[], listener: any): FormFieldMetadata[];

package/components/data/form/dynamic-fields/utils.js

@@ -0,0 +1,272 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateFieldValue = exports.transformSingleField = exports.transformAPIResponse = exports.sortFields = exports.hasFormErrors = exports.getFormData = exports.getFieldByName = exports.filterFieldsByWidget = exports.createDefaultField = void 0;
+exports.updateMetadata = updateMetadata;
+exports.validateForm = exports.validateField = void 0;
+var _construct2 = _interopRequireDefault(require("@babel/runtime/helpers/construct"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isString = _interopRequireDefault(require("lodash-es/isString"));
+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; }
+// Widget type mapping from API types to component types
+var API_TYPE_TO_WIDGET_MAP = {
+  text: "text",
+  string: "text",
+  email: "text",
+  password: "text",
+  textarea: "textarea",
+  number: "number",
+  integer: "number",
+  decimal: "number",
+  "float": "number",
+  currency: "currency",
+  select: "select",
+  dropdown: "select",
+  choice: "select",
+  radio: "radioset",
+  radioset: "radioset",
+  checkbox: "checkbox",
+  checkboxset: "checkboxset",
+  "switch": "switch",
+  toggle: "switch",
+  slider: "slider",
+  range: "slider",
+  rating: "rating",
+  date: "date",
+  datetime: "datetime",
+  time: "time",
+  color: "colorpicker",
+  file: "fileupload",
+  upload: "fileupload",
+  chips: "chips",
+  tags: "chips",
+  calendar: "calendar"
+};
+
+/**
+ * Transform API response fields to FormFieldMetadata
+ */
+var transformAPIResponse = exports.transformAPIResponse = function transformAPIResponse(apiFields) {
+  return apiFields.map(function (field) {
+    return transformSingleField(field);
+  });
+};
+
+/**
+ * Transform a single API field to FormFieldMetadata
+ */
+var transformSingleField = exports.transformSingleField = function transformSingleField(apiField) {
+  var widget = API_TYPE_TO_WIDGET_MAP[apiField.type.toLowerCase()] || "text";
+  var formField = {
+    name: apiField.name,
+    widget: widget,
+    label: apiField.label || apiField.name,
+    placeholder: apiField.placeholder,
+    required: apiField.required || false,
+    datavalue: apiField.value || apiField.defaultvalue,
+    defaultvalue: apiField.defaultvalue
+  };
+
+  // Handle validation properties
+  if (apiField.validation) {
+    var validation = apiField.validation;
+    if (validation.maxLength) formField.maxchars = validation.maxLength;
+    if (validation.minLength) formField.minchars = validation.minLength;
+    if (validation.min) formField.minvalue = validation.min;
+    if (validation.max) formField.maxvalue = validation.max;
+    if (validation.pattern) formField.regexp = validation.pattern;
+  }
+
+  // Handle select/choice fields
+  if (widget === "select" || widget === "radioset" || widget === "checkboxset") {
+    if (apiField.options) {
+      formField.dataset = apiField.options.map(function (option) {
+        return _objectSpread(_objectSpread({}, option), {}, {
+          key: option.value,
+          value: option.label
+        });
+      });
+      formField.datafield = "key";
+      formField.displayfield = "value";
+    }
+  }
+
+  // Copy any additional properties
+  Object.keys(apiField).forEach(function (key) {
+    if (!formField.hasOwnProperty(key) && key !== "type" && key !== "validation" && key !== "options") {
+      formField[key] = apiField[key];
+    }
+  });
+  return formField;
+};
+
+/**
+ * Validate a form field value
+ */
+var validateField = exports.validateField = function validateField(field, value) {
+  // Required field validation
+  if (field.required && (value === null || value === undefined || value === "")) {
+    return "".concat(field.label || field.name, " is required");
+  }
+
+  // Skip other validations if value is empty and field is not required
+  if (value === null || value === undefined || value === "") {
+    return null;
+  }
+
+  // String length validation
+  if (typeof value === "string") {
+    if (field.maxchars && value.length > field.maxchars) {
+      return "".concat(field.label || field.name, " must not exceed ").concat(field.maxchars, " characters");
+    }
+    if (field.minchars && value.length < field.minchars) {
+      return "".concat(field.label || field.name, " must be at least ").concat(field.minchars, " characters");
+    }
+  }
+
+  // Number validation
+  if (field.widget === "number" && typeof value === "number") {
+    if (field.minvalue !== undefined && value < field.minvalue) {
+      return "".concat(field.label || field.name, " must be at least ").concat(field.minvalue);
+    }
+    if (field.maxvalue !== undefined && value > field.maxvalue) {
+      return "".concat(field.label || field.name, " must not exceed ").concat(field.maxvalue);
+    }
+  }
+
+  // Regex validation
+  if (field.regexp && typeof value === "string") {
+    var regex = new RegExp(field.regexp);
+    if (!regex.test(value)) {
+      return field.regexpmessage || "".concat(field.label || field.name, " format is invalid");
+    }
+  }
+  return null;
+};
+
+/**
+ * Validate all fields in a form
+ */
+var validateForm = exports.validateForm = function validateForm(fields, formData) {
+  var errors = {};
+  fields.forEach(function (field) {
+    var error = validateField(field, formData[field.name]);
+    if (error) {
+      errors[field.name] = error;
+    }
+  });
+  return errors;
+};
+
+/**
+ * Get form data values from fields
+ */
+var getFormData = exports.getFormData = function getFormData(fields) {
+  var data = {};
+  fields.forEach(function (field) {
+    data[field.name] = field.datavalue || field.defaultvalue || "";
+  });
+  return data;
+};
+
+/**
+ * Update a field's value in the fields array
+ */
+var updateFieldValue = exports.updateFieldValue = function updateFieldValue(fields, fieldName, value) {
+  return fields.map(function (field) {
+    return field.name === fieldName ? _objectSpread(_objectSpread({}, field), {}, {
+      datavalue: value
+    }) : field;
+  });
+};
+
+/**
+ * Get field by name
+ */
+var getFieldByName = exports.getFieldByName = function getFieldByName(fields, fieldName) {
+  return fields.find(function (field) {
+    return field.name === fieldName;
+  });
+};
+
+/**
+ * Check if form has any validation errors
+ */
+var hasFormErrors = exports.hasFormErrors = function hasFormErrors(fields, formData) {
+  var errors = validateForm(fields, formData);
+  return Object.keys(errors).length > 0;
+};
+
+/**
+ * Create default field metadata
+ */
+var createDefaultField = exports.createDefaultField = function createDefaultField(name) {
+  var widget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "text";
+  return {
+    name: name,
+    widget: widget,
+    label: name.charAt(0).toUpperCase() + name.slice(1),
+    required: false,
+    datavalue: ""
+  };
+};
+
+/**
+ * Sort fields by a given property
+ */
+var sortFields = exports.sortFields = function sortFields(fields) {
+  var sortBy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "name";
+  return (0, _toConsumableArray2["default"])(fields).sort(function (a, b) {
+    var aVal = a[sortBy];
+    var bVal = b[sortBy];
+    if (typeof aVal === "string" && typeof bVal === "string") {
+      return aVal.localeCompare(bVal);
+    }
+    return String(aVal).localeCompare(String(bVal));
+  });
+};
+
+/**
+ * Filter fields by widget type
+ */
+var filterFieldsByWidget = exports.filterFieldsByWidget = function filterFieldsByWidget(fields, widgetTypes) {
+  return fields.filter(function (field) {
+    return widgetTypes.includes(field.widget);
+  });
+};
+function evalExpression(str) {
+  var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  try {
+    var argNames = Object.keys(context);
+    var argValues = Object.values(context);
+
+    // eslint-disable-next-line no-new-func
+    var fn = (0, _construct2["default"])(Function, argNames.concat(["return (".concat(str, ");")]));
+    return fn.apply(void 0, argValues);
+  } catch (error) {
+    console.error("Expression failed:", error);
+    return null; // or fallback
+  }
+}
+function convertStringExpToJsx(expression, listener) {
+  if (!expression) return null;
+  if (typeof expression !== "string") return expression;
+  return evalExpression(expression.replace("bind:", "listener."), {
+    listener: listener // whatever your listener object is
+  });
+}
+function updateMetadata(metadata, listener) {
+  return metadata.map(function (field) {
+    Object.keys(field).forEach(function (key) {
+      if ((0, _isString["default"])(field[key]) && field[key].startsWith("bind:")) {
+        field[key] = convertStringExpToJsx(field[key], listener);
+      }
+    });
+    return field;
+  });
+}

package/components/data/form/form-action/index.d.ts

@@ -0,0 +1,137 @@
+declare const WmFormActionsStandalone: import("react").ComponentType<{
+    onClick: ((event: any) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    formKey: string;
+    name: string;
+    displayName: string;
+    btnClass: string;
+    className: string;
+    iconclass: string;
+    type: "submit" | "reset" | "button";
+    disabled: boolean;
+    widgettype: "button" | "anchor";
+    formaction?: boolean;
+    position?: "header" | "footer";
+    updateMode?: unknown;
+    headeraction?: boolean;
+    showViewMode?: boolean;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | 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;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (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;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<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;
+    styles?: import("react").CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    listener?: Record<string, any>;
+    "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;
+} & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmFormActionsStandalone as WmFormAction };
+/**
+ * The WmFormActions component is a container for form action buttons (Submit, Cancel, etc.).
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-form--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-form--docs#tab-overview)
+ *
+ * @param props - {@link WmFormActionsProps}
+ */
+declare const _default: import("react").ComponentType<{
+    onClick: ((event: any) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    formKey: string;
+    name: string;
+    displayName: string;
+    btnClass: string;
+    className: string;
+    iconclass: string;
+    type: "submit" | "reset" | "button";
+    disabled: boolean;
+    widgettype: "button" | "anchor";
+    formaction?: boolean;
+    position?: "header" | "footer";
+    updateMode?: unknown;
+    headeraction?: boolean;
+    showViewMode?: boolean;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | 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;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (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;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<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;
+    styles?: import("react").CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    listener?: Record<string, any>;
+    "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;
+}>;
+export default _default;

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

@@ -0,0 +1,94 @@
+"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.WmFormAction = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _button = require("@wavemaker-ai/react-runtime/components/form/button");
+var _anchor = require("@wavemaker-ai/react-runtime/components/basic/anchor");
+var _formContext = require("@wavemaker-ai/react-runtime/components/data/form/form-context");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+var _excluded = ["position", "btnClass", "updateMode", "displayName", "headeraction", "showViewMode"];
+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 WmFormActions = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$show;
+  var _props$position = props.position,
+    position = _props$position === void 0 ? "footer" : _props$position,
+    btnClass = props.btnClass,
+    updateMode = props.updateMode,
+    displayName = props.displayName,
+    _props$headeraction = props.headeraction,
+    headeraction = _props$headeraction === void 0 ? false : _props$headeraction,
+    showViewMode = props.showViewMode,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var isheaderaction = position === "header" && !headeraction;
+
+  // Get formRef from context
+  var formRef = (0, _formContext.useFormContext)();
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var _props$onClick;
+    if (props.standalone) {
+      if (props.type === "submit") {
+        var _formRef$submit;
+        formRef === null || formRef === void 0 || (_formRef$submit = formRef.submit) === null || _formRef$submit === void 0 || _formRef$submit.call(formRef, event);
+      } else if (props.type === "reset") {
+        var _formRef$formreset;
+        formRef === null || formRef === void 0 || (_formRef$formreset = formRef.formreset) === null || _formRef$formreset === void 0 || _formRef$formreset.call(formRef);
+      }
+    }
+    (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event);
+  }, [formRef, props.onClick, props.type]);
+
+  // register header action
+  (0, _react.useEffect)(function () {
+    if (formRef && position.includes("header") && formRef.registerHeaderAction) {
+      formRef.registerHeaderAction(props.name, props);
+    }
+  }, [formRef, props]);
+
+  // check for view mode and update mode
+  if (formRef !== null && formRef !== void 0 && formRef.isViewMode && updateMode || !(formRef !== null && formRef !== void 0 && formRef.isViewMode) && !updateMode) return null;else if (isheaderaction) return null;
+  if (props.widgettype === "anchor") {
+    return __jsx(_anchor.WmAnchor, (0, _extends2["default"])({}, rest, {
+      hint: displayName,
+      caption: displayName,
+      className: (0, _clsx["default"])(btnClass, rest.className)
+    }));
+  }
+  return __jsx(_button.WmButton, {
+    className: (0, _clsx["default"])(btnClass, rest.className),
+    caption: displayName,
+    iconclass: props.iconclass,
+    type: props.type,
+    disabled: props.disabled,
+    onClick: handleClick,
+    name: props.name,
+    show: (_props$show = props.show) === null || _props$show === void 0 ? void 0 : _props$show.toString(),
+    showindevice: props.showindevice,
+    styles: props.styles,
+    animation: props.animation,
+    listener: props.listener,
+    hint: props.displayName,
+    hidden: props.hidden
+  });
+});
+WmFormActions.displayName = "WmFormActions";
+var WmFormActionsStandalone = exports.WmFormAction = (0, _withStandalone["default"])(WmFormActions);
+/**
+ * The WmFormActions component is a container for form action buttons (Submit, Cancel, etc.).
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-form--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-form--docs#tab-overview)
+ *
+ * @param props - {@link WmFormActionsProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmFormActions);

package/components/data/form/form-body/index.d.ts

@@ -0,0 +1,5 @@
+import BaseProps from "@wavemaker-ai/react-runtime/higherOrder/props";
+export declare function FormBody(props: BaseProps): import("react/jsx-runtime").JSX.Element;
+declare const FormBodyStandalone: typeof FormBody;
+export { FormBodyStandalone as WmFormBody };
+export default FormBody;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormBody = FormBody;
+exports["default"] = exports.WmFormBody = 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 _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["children", "className", "styles"];
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "panel-body form-body";
+function FormBody(props) {
+  var children = props.children,
+    className = props.className,
+    styles = props.styles,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return __jsx("div", (0, _extends2["default"])({
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    style: styles
+  }, (0, _attr.removeInvalidAttributes)(rest)), children);
+}
+var FormBodyStandalone = exports.WmFormBody = FormBody;
+var _default = exports["default"] = FormBody;