@plasmicpkgs/antd5 0.0.82 → 0.0.84

package/dist/react-utils.d.ts

@@ -13,9 +13,10 @@ export declare function isReactText(child: React.ReactNode): child is React.Reac
 export declare function isReactChild(child: React.ReactNode): child is React.ReactChild;
 export declare function isReactFragment(child: React.ReactNode): child is React.ReactElement;
 export declare function isReactNode(x: any): boolean;
-export type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? {} : Partial<"Unexpected extraneous props">;
+export type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? any : Partial<"Unexpected extraneous props">;
 export type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<React.ComponentProps<T>["ref"], string>;
 export declare function mergeProps(props: Record<string, any>, ...restProps: Record<string, any>[]): Record<string, any>;
 export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): (value: T) => void;
 export declare function mergePropVals(name: string, val1: any, val2: any): any;
 export declare function getElementTypeName(element: React.ReactElement): any;
+export declare function reactNodeToString(reactNode: React.ReactNode): string;

package/dist/registerForm.d.ts

@@ -1,4 +1,5 @@
-import { CodeComponentMode } from "@plasmicapp/host";
+import { CodeComponentMode, ComponentHelpers } from "@plasmicapp/host";
+import { CanvasComponentProps } from "@plasmicapp/host/registerComponent";
 import { Form } from "antd";
 import type { FormInstance, FormProps } from "antd/es/form";
 import type { FormItemProps } from "antd/es/form/FormItem";
@@ -32,7 +33,10 @@ export interface SimplifiedFormItemsProp extends InternalFormItemProps {
     }[];
     optionType?: "default" | "button";
 }
-interface FormWrapperProps extends FormProps {
+interface FormWrapperControlContextData {
+    formInstance: FormInstance<any>;
+}
+interface FormWrapperProps extends FormProps, CanvasComponentProps<FormWrapperControlContextData> {
     /**
      * https://ant.design/components/form#setfieldsvalue-do-not-trigger-onfieldschange-or-onvalueschange
      * Because setFieldsValue doesn't trigger onValuesChange, we need to create our own onChange function.
@@ -54,7 +58,12 @@ interface FormLayoutContextValue {
     layout: React.ComponentProps<typeof Form>["layout"];
     labelSpan?: number;
 }
-export declare function FormWrapper(props: FormWrapperProps): JSX.Element;
+interface FormRefActions extends Pick<FormInstance<any>, "setFieldsValue" | "resetFields" | "setFieldValue"> {
+    clearFields: () => void;
+    formInstance: FormInstance<any>;
+}
+export declare const FormWrapper: React.ForwardRefExoticComponent<FormWrapperProps & React.RefAttributes<FormRefActions>>;
+export declare const formHelpers: ComponentHelpers<FormWrapperProps>;
 export declare const formComponentName = "plasmic-antd5-form";
 export declare function registerForm(loader?: Registerable): void;
 interface FormControlContextData {

package/dist/utils.d.ts

@@ -24,4 +24,6 @@ export declare function asArray<T>(x: T[] | T | undefined | null): T[];
 export declare function omit<T extends object>(obj: T, ...keys: (keyof T)[]): Partial<T>;
 export declare function usePrevious<T>(value: T | undefined): T | undefined;
 export declare function capitalize(value: string): string;
+export declare function ensureArray<T>(x: T | T[]): T[];
+export declare function setFieldsToUndefined(obj: any): void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicpkgs/antd5",
-  "version": "0.0.82",
+  "version": "0.0.84",
   "description": "Plasmic registration calls for antd components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -55,7 +55,7 @@
     "antd": "^5.1.6"
   },
   "devDependencies": {
-    "@plasmicapp/host": "1.0.149",
+    "@plasmicapp/host": "1.0.150",
     "@plasmicapp/query": "0.1.67",
     "@types/node": "^14.0.26",
     "@types/react": "^18.0.27",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fc14a289cb4bc982a00244efb8ade0b5b75030a1"
+  "gitHead": "d933fd1793c7b2d01af2400582593724ec364085"
 }

package/skinny/react-utils.d.ts

@@ -13,9 +13,10 @@ export declare function isReactText(child: React.ReactNode): child is React.Reac
 export declare function isReactChild(child: React.ReactNode): child is React.ReactChild;
 export declare function isReactFragment(child: React.ReactNode): child is React.ReactElement;
 export declare function isReactNode(x: any): boolean;
-export type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? {} : Partial<"Unexpected extraneous props">;
+export type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? any : Partial<"Unexpected extraneous props">;
 export type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<React.ComponentProps<T>["ref"], string>;
 export declare function mergeProps(props: Record<string, any>, ...restProps: Record<string, any>[]): Record<string, any>;
 export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): (value: T) => void;
 export declare function mergePropVals(name: string, val1: any, val2: any): any;
 export declare function getElementTypeName(element: React.ReactElement): any;
+export declare function reactNodeToString(reactNode: React.ReactNode): string;

package/skinny/registerButton.cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var antd = require('antd');
-var utils = require('./utils-403deb7b.cjs.js');
+var utils = require('./utils-838eeae8.cjs.js');
 require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');
 

package/skinny/registerButton.esm.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from 'antd';
-import { r as registerComponentHelper } from './utils-b2751954.esm.js';
+import { r as registerComponentHelper } from './utils-02582d7f.esm.js';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
 

package/skinny/registerCheckbox.cjs.js

@@ -2,7 +2,7 @@
 
 var antd = require('antd');
 var React = require('react');
-var utils = require('./utils-403deb7b.cjs.js');
+var utils = require('./utils-838eeae8.cjs.js');
 require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');
 

package/skinny/registerCheckbox.esm.js

@@ -1,6 +1,6 @@
 import { Checkbox } from 'antd';
 import React from 'react';
-import { r as registerComponentHelper, t as traverseReactEltTree } from './utils-b2751954.esm.js';
+import { r as registerComponentHelper, t as traverseReactEltTree } from './utils-02582d7f.esm.js';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
 

package/skinny/registerConfigProvider.cjs.js

@@ -6,7 +6,7 @@ var query = require('@plasmicapp/query');
 var antd = require('antd');
 var enUS = require('antd/lib/locale/en_US.js');
 var React = require('react');
-var utils = require('./utils-403deb7b.cjs.js');
+var utils = require('./utils-838eeae8.cjs.js');
 require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');
 

package/skinny/registerConfigProvider.esm.js

@@ -4,7 +4,7 @@ import { addLoadingStateListener } from '@plasmicapp/query';
 import { theme, ConfigProvider, message, notification } from 'antd';
 import enUS from 'antd/lib/locale/en_US.js';
 import React from 'react';
-import { m as makeRegisterGlobalContext } from './utils-b2751954.esm.js';
+import { m as makeRegisterGlobalContext } from './utils-02582d7f.esm.js';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
 

package/skinny/registerDatePicker.cjs.js

@@ -2,7 +2,7 @@
 
 var antd = require('antd');
 var React = require('react');
-var utils = require('./utils-403deb7b.cjs.js');
+var utils = require('./utils-838eeae8.cjs.js');
 var dayjs = require('dayjs');
 require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');

package/skinny/registerDatePicker.esm.js

@@ -1,6 +1,6 @@
 import { DatePicker } from 'antd';
 import React, { useState } from 'react';
-import { r as registerComponentHelper, c as capitalize } from './utils-b2751954.esm.js';
+import { r as registerComponentHelper, c as capitalize } from './utils-02582d7f.esm.js';
 import dayjs from 'dayjs';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';

package/skinny/registerDropdown.cjs.js

@@ -2,7 +2,7 @@
 
 var antd = require('antd');
 var React = require('react');
-var utils = require('./utils-403deb7b.cjs.js');
+var utils = require('./utils-838eeae8.cjs.js');
 var registerMenu = require('./registerMenu.cjs.js');
 require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');

package/skinny/registerDropdown.esm.js

@@ -1,6 +1,6 @@
 import { Dropdown, Menu } from 'antd';
 import React from 'react';
-import { r as registerComponentHelper } from './utils-b2751954.esm.js';
+import { r as registerComponentHelper } from './utils-02582d7f.esm.js';
 import { UNKEYED_MENU_ITEM_TYPE } from './registerMenu.esm.js';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';

package/skinny/registerForm.cjs.js

@@ -4,14 +4,14 @@ var host = require('@plasmicapp/host');
 var antd = require('antd');
 var equal = require('fast-deep-equal');
 var React = require('react');
-var classNames = require('classnames');
+var registerSelect = require('./registerSelect-2c9dfc05.cjs.js');
 var registerButton = require('./registerButton.cjs.js');
 var registerCheckbox = require('./registerCheckbox.cjs.js');
 var registerInput = require('./registerInput.cjs.js');
 var registerRadio = require('./registerRadio.cjs.js');
-var registerSelect = require('./registerSelect.cjs.js');
 var registerSwitch = require('./registerSwitch.cjs.js');
-var utils = require('./utils-403deb7b.cjs.js');
+var utils = require('./utils-838eeae8.cjs.js');
+require('classnames');
 require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');
 
@@ -19,88 +19,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var equal__default = /*#__PURE__*/_interopDefault(equal);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-const isBrowser = typeof window !== "undefined";
-const NONE = Symbol("NONE");
-isBrowser ? React__default.default.useLayoutEffect : React__default.default.useEffect;
-function mergeProps(props, ...restProps) {
-  if (restProps.every((rest) => Object.keys(rest).length === 0)) {
-    return props;
-  }
-  const result = __spreadValues$1({}, props);
-  for (const rest of restProps) {
-    for (const key of Object.keys(rest)) {
-      result[key] = mergePropVals(key, result[key], rest[key]);
-    }
-  }
-  return result;
-}
-function updateRef(ref, value) {
-  if (!ref) {
-    return;
-  }
-  if (typeof ref === "function") {
-    ref(value);
-  } else {
-    if (!Object.isFrozen(ref)) {
-      ref.current = value;
-    }
-  }
-}
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      updateRef(ref, value);
-    }
-  };
-}
-function mergePropVals(name, val1, val2) {
-  if (val1 === NONE || val2 === NONE) {
-    return null;
-  } else if (val1 == null) {
-    return val2;
-  } else if (val2 == null) {
-    return val1;
-  } else if (name === "className") {
-    return classNames__default.default(val1, val2);
-  } else if (name === "style") {
-    return __spreadValues$1(__spreadValues$1({}, val1), val2);
-  } else if (name === "ref") {
-    return mergeRefs(val1, val2);
-  } else if (typeof val1 !== typeof val2) {
-    return val2;
-  } else if (name.startsWith("on") && typeof val1 === "function") {
-    return (...args) => {
-      let res;
-      if (typeof val1 === "function") {
-        res = val1(...args);
-      }
-      if (typeof val2 === "function") {
-        res = val2(...args);
-      }
-      return res;
-    };
-  } else {
-    return val2;
-  }
-}
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -133,24 +51,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const reactNodeToString = function(reactNode) {
-  let string = "";
-  if (typeof reactNode === "string") {
-    string = reactNode;
-  } else if (typeof reactNode === "number") {
-    string = reactNode.toString();
-  } else if (reactNode instanceof Array) {
-    reactNode.forEach(function(child) {
-      string += reactNodeToString(child);
-    });
-  } else if (React.isValidElement(reactNode)) {
-    string += reactNodeToString(reactNode.props.children);
-  }
-  return string;
-};
-function ensureArray(x) {
-  return Array.isArray(x) ? x : [x];
-}
 const FormItem = antd.Form.Item;
 const FormList = antd.Form.List;
 var InputType = /* @__PURE__ */ ((InputType2) => {
@@ -170,93 +70,132 @@ var InputType = /* @__PURE__ */ ((InputType2) => {
 const PathContext = React__default.default.createContext({ relativePath: [], fullPath: [] });
 const InternalFormInstanceContext = React__default.default.createContext(void 0);
 const FormLayoutContext = React__default.default.createContext(void 0);
-const Internal = (props) => {
-  var _b, _c, _d, _e;
-  const [form] = antd.Form.useForm();
-  const values = form.getFieldsValue(true);
-  const lastValue = React__default.default.useRef(values);
-  const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest(_a, ["extendedOnValuesChange", "setRemountKey"]);
-  let childrenNode;
-  if (props.mode !== "simplified") {
-    childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
-  } else {
-    childrenNode = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, ((_b = props.formItems) != null ? _b : []).map((formItem) => /* @__PURE__ */ React__default.default.createElement(
-      FormItemWrapper,
-      __spreadProps(__spreadValues({}, formItem), {
-        noLabel: formItem.inputType === "Checkbox" /* Checkbox */ || formItem.noLabel,
-        style: { width: "100%" }
-      }),
-      formItem.inputType === "Text" /* Text */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input, null) : formItem.inputType === "Password" /* Password */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.Password, null) : formItem.inputType === "Text Area" /* TextArea */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.TextArea, null) : formItem.inputType === "Number" /* Number */ ? /* @__PURE__ */ React__default.default.createElement(antd.InputNumber, null) : formItem.inputType === "Checkbox" /* Checkbox */ ? /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, null, formItem.label) : formItem.inputType === "Select" /* Select */ ? /* @__PURE__ */ React__default.default.createElement(antd.Select, { options: formItem.options }) : formItem.inputType === "DatePicker" /* DatePicker */ ? /* @__PURE__ */ React__default.default.createElement(antd.DatePicker, null) : formItem.inputType === "Radio Group" /* RadioGroup */ ? /* @__PURE__ */ React__default.default.createElement(
-        antd.Radio.Group,
-        {
-          options: formItem.options,
-          optionType: formItem.optionType,
-          style: { padding: "8px" }
-        }
-      ) : null
-    )), props.submitSlot);
-  }
-  const fireOnValuesChange = React__default.default.useCallback(() => {
-    const values2 = form.getFieldsValue(true);
-    if (!equal__default.default(values2, lastValue.current)) {
-      extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
-      lastValue.current = values2;
+const Internal = React__default.default.forwardRef(
+  (props, ref) => {
+    var _b, _c, _d, _e, _f;
+    const [form] = antd.Form.useForm();
+    const values = form.getFieldsValue(true);
+    const lastValue = React__default.default.useRef(values);
+    const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest(_a, ["extendedOnValuesChange", "setRemountKey"]);
+    let childrenNode;
+    if (props.mode !== "simplified") {
+      childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
+    } else {
+      childrenNode = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, ((_b = props.formItems) != null ? _b : []).map((formItem) => /* @__PURE__ */ React__default.default.createElement(
+        FormItemWrapper,
+        __spreadProps(__spreadValues({}, formItem), {
+          noLabel: formItem.inputType === "Checkbox" /* Checkbox */ || formItem.noLabel,
+          style: { width: "100%" }
+        }),
+        formItem.inputType === "Text" /* Text */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input, null) : formItem.inputType === "Password" /* Password */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.Password, null) : formItem.inputType === "Text Area" /* TextArea */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.TextArea, null) : formItem.inputType === "Number" /* Number */ ? /* @__PURE__ */ React__default.default.createElement(antd.InputNumber, null) : formItem.inputType === "Checkbox" /* Checkbox */ ? /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, null, formItem.label) : formItem.inputType === "Select" /* Select */ ? /* @__PURE__ */ React__default.default.createElement(antd.Select, { options: formItem.options }) : formItem.inputType === "DatePicker" /* DatePicker */ ? /* @__PURE__ */ React__default.default.createElement(antd.DatePicker, null) : formItem.inputType === "Radio Group" /* RadioGroup */ ? /* @__PURE__ */ React__default.default.createElement(
+          antd.Radio.Group,
+          {
+            options: formItem.options,
+            optionType: formItem.optionType,
+            style: { padding: "8px" }
+          }
+        ) : null
+      )), props.submitSlot);
     }
-  }, [form, lastValue]);
-  React__default.default.useEffect(() => {
-    fireOnValuesChange();
-  }, []);
-  const formLayout = React__default.default.useMemo(
-    () => {
-      var _a2;
-      return {
-        layout: props.layout,
-        labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
-      };
-    },
-    [props.layout, (_c = props.labelCol) == null ? void 0 : _c.span]
-  );
-  return /* @__PURE__ */ React__default.default.createElement(
-    InternalFormInstanceContext.Provider,
-    {
-      value: {
-        layout: formLayout,
-        fireOnValuesChange,
-        forceRemount: () => setRemountKey((k) => k + 1)
+    const fireOnValuesChange = React__default.default.useCallback(() => {
+      const values2 = form.getFieldsValue(true);
+      if (!equal__default.default(values2, lastValue.current)) {
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
+        lastValue.current = values2;
       }
-    },
-    /* @__PURE__ */ React__default.default.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React__default.default.createElement(
-      antd.Form,
-      __spreadProps(__spreadValues({}, rest), {
-        key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
-        onValuesChange: (...args) => {
-          var _a2;
-          (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
-          extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
-        },
-        form,
-        labelCol: ((_d = props.labelCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
-        wrapperCol: ((_e = props.wrapperCol) == null ? void 0 : _e.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
-      }),
-      /* @__PURE__ */ React__default.default.createElement("style", null, `
+    }, [form, lastValue]);
+    React__default.default.useEffect(() => {
+      fireOnValuesChange();
+    }, []);
+    const formLayout = React__default.default.useMemo(
+      () => {
+        var _a2;
+        return {
+          layout: props.layout,
+          labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
+        };
+      },
+      [props.layout, (_c = props.labelCol) == null ? void 0 : _c.span]
+    );
+    (_d = props.setControlContextData) == null ? void 0 : _d.call(props, { formInstance: form });
+    React__default.default.useImperativeHandle(ref, () => ({
+      formInstance: form,
+      setFieldsValue: (newValues) => {
+        form.setFieldsValue(newValues);
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+      },
+      setFieldValue: (namePath, value) => {
+        form.setFieldValue(namePath, value);
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+      },
+      resetFields: () => {
+        form.resetFields();
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+      },
+      clearFields: () => {
+        const values2 = form.getFieldsValue(true);
+        utils.setFieldsToUndefined(values2);
+        form.setFieldsValue(values2);
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+      }
+    }));
+    return /* @__PURE__ */ React__default.default.createElement(
+      InternalFormInstanceContext.Provider,
+      {
+        value: {
+          layout: formLayout,
+          fireOnValuesChange,
+          forceRemount: () => setRemountKey((k) => k + 1)
+        }
+      },
+      /* @__PURE__ */ React__default.default.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React__default.default.createElement(
+        antd.Form,
+        __spreadProps(__spreadValues({}, rest), {
+          key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
+          onValuesChange: (...args) => {
+            var _a2;
+            (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
+            extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
+          },
+          form,
+          labelCol: ((_e = props.labelCol) == null ? void 0 : _e.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
+          wrapperCol: ((_f = props.wrapperCol) == null ? void 0 : _f.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
+        }),
+        /* @__PURE__ */ React__default.default.createElement("style", null, `
           .ant-form-item-explain + div, .ant-form-item-margin-offset {
             display: none;
           }
           `),
-      childrenNode
-    ))
-  );
-};
-function FormWrapper(props) {
-  const [remountKey, setRemountKey] = React__default.default.useState(0);
-  const previousInitialValues = utils.usePrevious(props.initialValues);
-  React__default.default.useEffect(() => {
-    if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
-      setRemountKey((k) => k + 1);
-    }
-  }, [previousInitialValues, props.initialValues]);
-  return /* @__PURE__ */ React__default.default.createElement(Internal, __spreadProps(__spreadValues({ key: remountKey }, props), { setRemountKey }));
-}
+        childrenNode
+      ))
+    );
+  }
+);
+const FormWrapper = React__default.default.forwardRef(
+  (props, ref) => {
+    const [remountKey, setRemountKey] = React__default.default.useState(0);
+    const previousInitialValues = utils.usePrevious(props.initialValues);
+    const wrapperRef = React__default.default.useRef(null);
+    React__default.default.useEffect(() => {
+      if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
+        setRemountKey((k) => k + 1);
+      }
+    }, [previousInitialValues, props.initialValues]);
+    React__default.default.useImperativeHandle(
+      ref,
+      () => wrapperRef.current ? __spreadValues({}, wrapperRef.current) : {}
+    );
+    return /* @__PURE__ */ React__default.default.createElement(
+      Internal,
+      __spreadProps(__spreadValues({
+        key: remountKey
+      }, props), {
+        setRemountKey,
+        ref: wrapperRef
+      })
+    );
+  }
+);
 const COMMON_ACTIONS = [
   {
     type: "button-action",
@@ -327,6 +266,16 @@ const colProp = (displayName, defaultValue, description) => ({
   description,
   defaultValue
 });
+const formHelpers = {
+  states: {
+    value: {
+      onMutate: (value, $ref) => {
+        var _a;
+        (_a = $ref == null ? void 0 : $ref.formInstance) == null ? void 0 : _a.setFieldsValue(value);
+      }
+    }
+  }
+};
 const formComponentName = "plasmic-antd5-form";
 function registerForm(loader) {
   utils.registerComponentHelper(loader, FormWrapper, {
@@ -584,6 +533,54 @@ function registerForm(loader) {
         onChangeProp: "extendedOnValuesChange"
       }
     },
+    componentHelpers: {
+      helpers: formHelpers,
+      importName: "formHelpers",
+      importPath: "@plasmicpkgs/antd5/skinny/registerForm"
+    },
+    refActions: {
+      setFieldsValue: {
+        displayName: "Set multiple fields",
+        argTypes: [
+          {
+            name: "newValues",
+            displayName: "New Values",
+            type: "exprEditor"
+          }
+        ]
+      },
+      setFieldValue: {
+        displayName: "Set field",
+        argTypes: [
+          {
+            name: "namePath",
+            displayName: "Name Path",
+            type: {
+              type: "dataSelector",
+              data: (_, ctx) => {
+                if (!(ctx == null ? void 0 : ctx.formInstance)) {
+                  return {};
+                }
+                return ctx.formInstance.getFieldsValue(true);
+              }
+            }
+          },
+          {
+            name: "value",
+            displayName: "New Value",
+            type: "exprEditor"
+          }
+        ]
+      },
+      resetFields: {
+        displayName: "Reset fields to initial value",
+        argTypes: []
+      },
+      clearFields: {
+        displayName: "Clear fields",
+        argTypes: []
+      }
+    },
     importPath: "@plasmicpkgs/antd5/skinny/registerForm",
     importName: "FormWrapper"
   });
@@ -677,7 +674,7 @@ function FormItemWrapper(props) {
   ]);
   const relativeFormItemName = useFormItemRelativeName(name);
   const fullFormItemName = useFormItemFullName(name);
-  const bestEffortLabel = !noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
+  const bestEffortLabel = !noLabel && registerSelect.reactNodeToString(props.label) || utils.ensureArray(props.name).slice(-1)[0];
   const rules = plasmicRules ? plasmicRulesToAntdRules(
     plasmicRules,
     typeof bestEffortLabel === "number" ? "" + bestEffortLabel : bestEffortLabel
@@ -766,7 +763,7 @@ function FormItemForwarder(_a) {
       __plasmicFormField: true
     });
     if (formItemProps.customizeProps) {
-      newProps = mergeProps(
+      newProps = registerSelect.mergeProps(
         newProps,
         formItemProps.customizeProps(data, newProps)
       );
@@ -1197,6 +1194,7 @@ exports.FormWrapper = FormWrapper;
 exports.InputType = InputType;
 exports.formComponentName = formComponentName;
 exports.formGroupComponentName = formGroupComponentName;
+exports.formHelpers = formHelpers;
 exports.formItemComponentName = formItemComponentName;
 exports.formListComponentName = formListComponentName;
 exports.registerForm = registerForm;