@wavemaker-ai/react-runtime 1.0.0-next.27766

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

@@ -0,0 +1,213 @@
+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 isString from "lodash-es/isString";
+const 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"
+};
+const transformAPIResponse = (apiFields) => {
+  return apiFields.map((field) => transformSingleField(field));
+};
+const transformSingleField = (apiField) => {
+  const widget = API_TYPE_TO_WIDGET_MAP[apiField.type.toLowerCase()] || "text";
+  const formField = {
+    name: apiField.name,
+    widget,
+    label: apiField.label || apiField.name,
+    placeholder: apiField.placeholder,
+    required: apiField.required || false,
+    datavalue: apiField.value || apiField.defaultvalue,
+    defaultvalue: apiField.defaultvalue
+  };
+  if (apiField.validation) {
+    const { validation } = apiField;
+    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;
+  }
+  if (widget === "select" || widget === "radioset" || widget === "checkboxset") {
+    if (apiField.options) {
+      formField.dataset = apiField.options.map((option) => __spreadProps(__spreadValues({}, option), {
+        key: option.value,
+        value: option.label
+      }));
+      formField.datafield = "key";
+      formField.displayfield = "value";
+    }
+  }
+  Object.keys(apiField).forEach((key) => {
+    if (!formField.hasOwnProperty(key) && key !== "type" && key !== "validation" && key !== "options") {
+      formField[key] = apiField[key];
+    }
+  });
+  return formField;
+};
+const validateField = (field, value) => {
+  if (field.required && (value === null || value === void 0 || value === "")) {
+    return `${field.label || field.name} is required`;
+  }
+  if (value === null || value === void 0 || value === "") {
+    return null;
+  }
+  if (typeof value === "string") {
+    if (field.maxchars && value.length > field.maxchars) {
+      return `${field.label || field.name} must not exceed ${field.maxchars} characters`;
+    }
+    if (field.minchars && value.length < field.minchars) {
+      return `${field.label || field.name} must be at least ${field.minchars} characters`;
+    }
+  }
+  if (field.widget === "number" && typeof value === "number") {
+    if (field.minvalue !== void 0 && value < field.minvalue) {
+      return `${field.label || field.name} must be at least ${field.minvalue}`;
+    }
+    if (field.maxvalue !== void 0 && value > field.maxvalue) {
+      return `${field.label || field.name} must not exceed ${field.maxvalue}`;
+    }
+  }
+  if (field.regexp && typeof value === "string") {
+    const regex = new RegExp(field.regexp);
+    if (!regex.test(value)) {
+      return field.regexpmessage || `${field.label || field.name} format is invalid`;
+    }
+  }
+  return null;
+};
+const validateForm = (fields, formData) => {
+  const errors = {};
+  fields.forEach((field) => {
+    const error = validateField(field, formData[field.name]);
+    if (error) {
+      errors[field.name] = error;
+    }
+  });
+  return errors;
+};
+const getFormData = (fields) => {
+  const data = {};
+  fields.forEach((field) => {
+    data[field.name] = field.datavalue || field.defaultvalue || "";
+  });
+  return data;
+};
+const updateFieldValue = (fields, fieldName, value) => {
+  return fields.map((field) => field.name === fieldName ? __spreadProps(__spreadValues({}, field), { datavalue: value }) : field);
+};
+const getFieldByName = (fields, fieldName) => {
+  return fields.find((field) => field.name === fieldName);
+};
+const hasFormErrors = (fields, formData) => {
+  const errors = validateForm(fields, formData);
+  return Object.keys(errors).length > 0;
+};
+const createDefaultField = (name, widget = "text") => ({
+  name,
+  widget,
+  label: name.charAt(0).toUpperCase() + name.slice(1),
+  required: false,
+  datavalue: ""
+});
+const sortFields = (fields, sortBy = "name") => {
+  return [...fields].sort((a, b) => {
+    const aVal = a[sortBy];
+    const bVal = b[sortBy];
+    if (typeof aVal === "string" && typeof bVal === "string") {
+      return aVal.localeCompare(bVal);
+    }
+    return String(aVal).localeCompare(String(bVal));
+  });
+};
+const filterFieldsByWidget = (fields, widgetTypes) => {
+  return fields.filter((field) => widgetTypes.includes(field.widget));
+};
+function evalExpression(str, context = {}) {
+  try {
+    const argNames = Object.keys(context);
+    const argValues = Object.values(context);
+    const fn = new Function(...argNames, `return (${str});`);
+    return fn(...argValues);
+  } catch (error) {
+    console.error("Expression failed:", error);
+    return null;
+  }
+}
+function convertStringExpToJsx(expression, listener) {
+  if (!expression) return null;
+  if (typeof expression !== "string") return expression;
+  return evalExpression(expression.replace("bind:", "listener."), {
+    listener
+    // whatever your listener object is
+  });
+}
+function updateMetadata(metadata, listener) {
+  return metadata.map((field) => {
+    Object.keys(field).forEach((key) => {
+      if (isString(field[key]) && field[key].startsWith("bind:")) {
+        field[key] = convertStringExpToJsx(field[key], listener);
+      }
+    });
+    return field;
+  });
+}
+export {
+  createDefaultField,
+  filterFieldsByWidget,
+  getFieldByName,
+  getFormData,
+  hasFormErrors,
+  sortFields,
+  transformAPIResponse,
+  transformSingleField,
+  updateFieldValue,
+  updateMetadata,
+  validateField,
+  validateForm
+};

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

@@ -0,0 +1,143 @@
+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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: 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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;

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

@@ -0,0 +1,118 @@
+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 { useEffect, memo, useCallback } from "react";
+import { WmButton } from "../../../form/button";
+import { WmAnchor } from "../../../basic/anchor";
+import { useFormContext } from "../form-context";
+import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
+import withStandalone from "../../../../higherOrder/withStandalone";
+const WmFormActions = memo((props) => {
+  var _b;
+  const _a = props, {
+    position = "footer",
+    type = "button",
+    btnClass,
+    updateMode,
+    displayName,
+    headeraction = false,
+    showViewMode
+  } = _a, rest = __objRest(_a, [
+    "position",
+    "type",
+    "btnClass",
+    "updateMode",
+    "displayName",
+    "headeraction",
+    "showViewMode"
+  ]);
+  const isheaderaction = position === "header" && !headeraction;
+  const formRef = useFormContext();
+  const handleClick = useCallback(
+    (event) => {
+      var _a2, _b2, _c;
+      if (props.standalone) {
+        if (type === "submit") {
+          (_a2 = formRef == null ? void 0 : formRef.submit) == null ? void 0 : _a2.call(formRef, event);
+        } else if (type === "reset") {
+          (_b2 = formRef == null ? void 0 : formRef.formreset) == null ? void 0 : _b2.call(formRef);
+        }
+      }
+      (_c = props.onClick) == null ? void 0 : _c.call(props, event);
+    },
+    [formRef, props.onClick, type]
+  );
+  useEffect(() => {
+    if (formRef && position.includes("header") && formRef.registerHeaderAction) {
+      formRef.registerHeaderAction(props.name, props);
+    }
+  }, [formRef, props]);
+  if ((formRef == null ? void 0 : formRef.isViewMode) && updateMode || !(formRef == null ? void 0 : formRef.isViewMode) && !updateMode) return null;
+  else if (isheaderaction) return null;
+  if (props.widgettype === "anchor") {
+    return /* @__PURE__ */ jsx(
+      WmAnchor,
+      __spreadProps(__spreadValues({}, rest), {
+        hint: displayName,
+        caption: displayName,
+        className: clsx(btnClass, rest.className)
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    WmButton,
+    {
+      className: clsx(btnClass, rest.className),
+      caption: displayName,
+      iconclass: props.iconclass,
+      type,
+      disabled: props.disabled,
+      onClick: handleClick,
+      name: props.name,
+      show: (_b = props.show) == null ? void 0 : _b.toString(),
+      showindevice: props.showindevice,
+      styles: props.styles,
+      animation: props.animation,
+      listener: props.listener,
+      hint: props.displayName,
+      hidden: props.hidden
+    }
+  );
+});
+WmFormActions.displayName = "WmFormActions";
+const WmFormActionsStandalone = withStandalone(WmFormActions);
+var form_action_default = withBaseWrapper(WmFormActions);
+export {
+  WmFormActionsStandalone as WmFormAction,
+  form_action_default as default
+};

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,54 @@
+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 { removeInvalidAttributes } from "../../../../utils/attr";
+const DEFAULT_CLASS = "panel-body form-body";
+function FormBody(props) {
+  const _a = props, { children, className, styles } = _a, rest = __objRest(_a, ["children", "className", "styles"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      className: clsx(DEFAULT_CLASS, className),
+      style: styles
+    }, removeInvalidAttributes(rest)), {
+      children
+    })
+  );
+}
+const FormBodyStandalone = FormBody;
+var form_body_default = FormBody;
+export {
+  FormBody,
+  FormBodyStandalone as WmFormBody,
+  form_body_default as default
+};

package/components/data/form/form-context.d.ts

@@ -0,0 +1,91 @@
+import React from "react";
+export interface FormContextValue {
+    updateFormData?: (data: any) => void;
+    control?: any;
+    watch?: any;
+    registerFormField?: (formKey: string, fieldName: string, fieldInstance: any) => void;
+    registerFormWidget?: (widgetName: string, widgetInstance: any) => void;
+    registerHeaderAction?: (actionName: string, action: any) => void;
+    onChangeHandler?: (fieldName: string, value: any) => void;
+    getFieldValue?: (fieldName: string) => any;
+    trigger?: any;
+    errors?: any;
+    name?: string;
+    captionposition?: string;
+    captionCls?: string;
+    widgetCls?: string;
+    validationtype?: string;
+    isViewMode?: boolean;
+    resetField?: (fieldName: string) => void;
+    submitCount?: number;
+    ref?: any;
+    itemsPerRow?: string;
+    submit?: (e?: any) => Promise<boolean | undefined>;
+    formreset?: () => Promise<void>;
+}
+declare const FormContext: React.Context<FormContextValue>;
+/**
+ * ParentFormDataContext provides instance-specific form data to child forms.
+ *
+ * This solves the problem where multiple instances of the same form exist inside
+ * a list (e.g., DeptEmpContactForm2 at index 0, 1, 2). The shared Widgets proxy
+ * (Widgets["DeptEmpContactForm2"].formdata) is contaminated across instances.
+ *
+ * With this context, each form instance provides its own formdata, and child forms
+ * consume from the nearest parent provider - naturally scoping to the correct instance.
+ *
+ * Additionally, this context provides the ROOT parent form name and current data path
+ * so that deeply nested forms can emit data updates directly to the root form using
+ * the full data path (e.g., "employeeDetailses[0].emergencyContact").
+ */
+/** Data for registering a child form field in the parent's widget context */
+export interface ChildFieldRegistration {
+    childFormName: string;
+    widget: any;
+    formKey: string;
+    fieldName: string;
+}
+/**
+ * Origin of the last data update - used to prevent circular sync.
+ * - 'external': Data came from props, widget assignment, or API
+ * - 'child': Data came from a child form's onChildDataChange
+ */
+export type UpdateOrigin = "external" | "child";
+export interface ParentFormDataContextValue {
+    /** Current form data of this form instance */
+    formdata: any;
+    /** The form's name */
+    formName: string;
+    /** Whether the form is currently valid (all validations pass) */
+    isValid?: boolean;
+    /** The ROOT parent form name - all nested forms emit to this form */
+    rootParentForm?: string;
+    /** The current data path prefix for nested forms to build their full path */
+    parentDataPath?: string;
+    /**
+     * Origin of the last data update - used to prevent circular sync.
+     * Child forms skip sync when origin is 'child' (data already in their RHF).
+     */
+    lastUpdateOrigin?: UpdateOrigin;
+    /**
+     * Callback for child forms to send data UP to root parent.
+     * Called when child form data changes - root form uses setValue to update nested path.
+     */
+    onChildDataChange?: (fullDataPath: string, formData: any) => void;
+    /**
+     * Callback for child/prefab forms to register fields in parent's widget context.
+     * Used for cross-context field registration (e.g., prefab forms).
+     */
+    registerChildField?: (data: ChildFieldRegistration) => void;
+}
+export declare const ParentFormDataContext: React.Context<ParentFormDataContextValue>;
+export declare const useParentFormData: () => ParentFormDataContextValue;
+export declare const FormProvider: React.FC<{
+    value: FormContextValue;
+    isViewMode: boolean;
+    children: React.ReactNode;
+}>;
+export declare const useFormContext: () => FormContextValue;
+export declare const useIsViewMode: () => boolean;
+export declare const useFormRef: () => any;
+export default FormContext;

package/components/data/form/form-context.js

@@ -0,0 +1,49 @@
+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 { createContext, useContext } from "react";
+const FormContext = createContext(null);
+const ParentFormDataContext = createContext(null);
+const useParentFormData = () => useContext(ParentFormDataContext);
+const FormProvider = ({ value, isViewMode, children }) => {
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: __spreadProps(__spreadValues({}, value), { isViewMode }), children });
+};
+const useFormContext = () => {
+  const context = useContext(FormContext);
+  return context;
+};
+const useIsViewMode = () => {
+  const context = useFormContext();
+  return context == null ? void 0 : context.isViewMode;
+};
+const useFormRef = () => {
+  var _a, _b;
+  return (_b = (_a = useContext(FormContext)) == null ? void 0 : _a.ref) != null ? _b : null;
+};
+var form_context_default = FormContext;
+export {
+  FormProvider,
+  ParentFormDataContext,
+  form_context_default as default,
+  useFormContext,
+  useFormRef,
+  useIsViewMode,
+  useParentFormData
+};

package/components/data/form/form-controller/hooks/index.d.ts

@@ -0,0 +1,7 @@
+import { ValidationTypes, ValidatorConfig } from "../props";
+declare const useFormRegistration: (name: string, fieldProxy: any, contextFormRef: any) => void;
+declare const useExternalDataSync: (datavalue: any, fieldRef: React.RefObject<any>) => void;
+declare const useDefaultValueSync: (defaultvalue: any, datavalue: any, fieldRef: React.RefObject<any>) => void;
+declare const useValidationRules: (validationType: ValidationTypes, validators?: ValidatorConfig[], asyncValidators?: ValidatorConfig[], required?: boolean, maxchars?: number, regexp?: string | RegExp, validationmessage?: string, minvalue?: number | string, maxvalue?: number | string, form?: any, customValidationMsg?: string | null) => import("react-hook-form").RegisterOptions;
+declare const useHTMLValidationProps: (validationType: ValidationTypes, required?: boolean, maxchars?: number, regexp?: string | RegExp) => any;
+export { useFormRegistration, useExternalDataSync, useDefaultValueSync, useValidationRules, useHTMLValidationProps, };