@plasmicpkgs/antd5 0.0.54 → 0.0.55

package/dist/registerForm.d.ts

@@ -1,3 +1,4 @@
+import { Form } from "antd";
 import type { FormProps } from "antd/es/form";
 import type { FormItemProps } from "antd/es/form/FormItem";
 import type { FormListOperation, FormListProps } from "antd/es/form/FormList";
@@ -16,6 +17,11 @@ interface FormWrapperProps extends FormProps {
 interface InternalFormInstanceContextData {
     fireOnValuesChange: () => void;
     forceRemount: () => void;
+    layout: FormLayoutContextValue;
+}
+interface FormLayoutContextValue {
+    layout: React.ComponentProps<typeof Form>["layout"];
+    labelSpan?: number;
 }
 export declare function FormWrapper(props: FormWrapperProps): JSX.Element;
 export declare function registerForm(loader?: Registerable): void;
@@ -27,10 +33,12 @@ interface CuratedFieldData {
 }
 interface InternalFormItemProps extends Omit<FormItemProps, "rules"> {
     rules?: PlasmicRule[];
-    helpTextMode?: string;
+    description?: React.ReactNode;
     noLabel?: boolean;
+    hideValidationMessage?: boolean;
     customizeProps?: (fieldData: CuratedFieldData, props: InternalFormItemProps) => FormItemProps;
     setControlContextData?: (data: FormControlContextData) => void;
+    alignLabellessWithControls?: boolean;
 }
 interface PlasmicRule {
     ruleType: "enum" | "len" | "max" | "min" | "regex" | "required" | "whitespace" | "advanced";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicpkgs/antd5",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "description": "Plasmic registration calls for antd components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "807918caa253def6a79afdc3439b6d0a924c119e"
+  "gitHead": "9046e96d5d51d83325652cfb6b8d160aabdfb201"
 }

package/skinny/registerButton.cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var antd = require('antd');
-var utils = require('./utils-dff55ae0.cjs.js');
+var utils = require('./utils-2d964db8.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-94b1c934.esm.js';
+import { r as registerComponentHelper } from './utils-d0e80a56.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-dff55ae0.cjs.js');
+var utils = require('./utils-2d964db8.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-94b1c934.esm.js';
+import { r as registerComponentHelper, t as traverseReactEltTree } from './utils-d0e80a56.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-dff55ae0.cjs.js');
+var utils = require('./utils-2d964db8.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 { ConfigProvider, theme, message, notification } from 'antd';
 import enUS from 'antd/lib/locale/en_US.js';
 import React from 'react';
-import { m as makeRegisterGlobalContext } from './utils-94b1c934.esm.js';
+import { m as makeRegisterGlobalContext } from './utils-d0e80a56.esm.js';
 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-dff55ae0.cjs.js');
+var utils = require('./utils-2d964db8.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-94b1c934.esm.js';
+import { r as registerComponentHelper } from './utils-d0e80a56.esm.js';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
 

package/skinny/registerForm.cjs.js

@@ -5,7 +5,7 @@ var antd = require('antd');
 var equal = require('fast-deep-equal');
 var React = require('react');
 var classNames = require('classnames');
-var utils = require('./utils-dff55ae0.cjs.js');
+var utils = require('./utils-2d964db8.cjs.js');
 require('@plasmicapp/host/registerComponent');
 require('@plasmicapp/host/registerGlobalContext');
 
@@ -149,8 +149,9 @@ const FormItem = antd.Form.Item;
 const FormList = antd.Form.List;
 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;
+  var _b, _c, _d;
   const [form] = antd.Form.useForm();
   const values = form.getFieldsValue(true);
   const lastValue = React__default.default.useRef(values);
@@ -166,15 +167,26 @@ const Internal = (props) => {
   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, (_b = props.labelCol) == null ? void 0 : _b.span]
+  );
   return /* @__PURE__ */ React__default.default.createElement(
     InternalFormInstanceContext.Provider,
     {
       value: {
+        layout: formLayout,
         fireOnValuesChange,
         forceRemount: () => setRemountKey((k) => k + 1)
       }
     },
-    /* @__PURE__ */ React__default.default.createElement(
+    /* @__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,
@@ -184,16 +196,16 @@ const Internal = (props) => {
           extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
         },
         form,
-        labelCol: ((_b = props.labelCol) == null ? void 0 : _b.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
-        wrapperCol: ((_c = props.wrapperCol) == null ? void 0 : _c.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
+        labelCol: ((_c = props.labelCol) == null ? void 0 : _c.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
+        wrapperCol: ((_d = props.wrapperCol) == null ? void 0 : _d.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;
-        }
-        `),
+          .ant-form-item-explain + div, .ant-form-item-margin-offset {
+            display: none;
+          }
+          `),
       childrenNode
-    )
+    ))
   );
 };
 function FormWrapper(props) {
@@ -247,40 +259,41 @@ const COMMON_ACTIONS = [
   //   },
   // },
 ];
-function registerForm(loader) {
-  const colProp = (displayName, defaultValue) => ({
-    type: "object",
-    displayName,
-    advanced: true,
-    fields: {
-      span: {
-        type: "number",
-        displayName: "Grid columns",
-        description: "The number of grid columns to span (24 columns available)",
-        min: 1,
-        max: 24
-      },
-      offset: {
-        type: "number",
-        displayName: "Offset columns",
-        description: "Number of grid columns to skip from the left",
-        min: 0,
-        max: 23
-      },
-      horizontalOnly: {
-        type: "boolean",
-        displayName: "Horizontal only",
-        description: "Only apply to horizontal layout"
-      }
+const colProp = (displayName, defaultValue, description) => ({
+  type: "object",
+  displayName,
+  advanced: true,
+  fields: {
+    span: {
+      type: "number",
+      displayName: "Width",
+      description: "The number of grid columns to span in width (out of 24 columns total)",
+      min: 1,
+      max: 24
     },
-    defaultValue
-  });
+    offset: {
+      type: "number",
+      displayName: "Offset",
+      description: "Number of grid columns to skip from the left (out of 24 columns total)",
+      min: 0,
+      max: 23
+    },
+    horizontalOnly: {
+      type: "boolean",
+      displayName: "Horizontal only",
+      description: "Only apply to horizontal layout"
+    }
+  },
+  description,
+  defaultValue
+});
+function registerForm(loader) {
   utils.registerComponentHelper(loader, FormWrapper, {
     name: "plasmic-antd5-form",
     displayName: "Form",
     defaultStyles: {
-      display: "plasmic-content-layout",
-      gridRowGap: "10px"
+      layout: "vbox",
+      alignItems: "flex-start"
     },
     props: {
       children: {
@@ -318,13 +331,21 @@ function registerForm(loader) {
           },
           {
             type: "component",
-            name: "plasmic-antd5-button",
+            name: "plasmic-antd5-form-item",
             props: {
+              noLabel: true,
               children: {
-                type: "text",
-                value: "Submit"
-              },
-              submitsForm: true
+                type: "component",
+                name: "plasmic-antd5-button",
+                props: {
+                  children: {
+                    type: "text",
+                    value: "Submit"
+                  },
+                  type: "primary",
+                  submitsForm: true
+                }
+              }
             }
           }
         ]
@@ -341,16 +362,25 @@ function registerForm(loader) {
         type: "choice",
         options: ["left", "right"],
         defaultValueHint: "right",
-        advanced: true
+        advanced: true,
+        hidden: (ps) => ps.layout !== "horizontal"
       },
-      labelCol: colProp("Label layout", {
-        span: 8,
-        horizontalOnly: true
-      }),
-      wrapperCol: colProp("Field layout", {
-        span: 16,
-        horizontalOnly: true
-      }),
+      labelCol: colProp(
+        "Label layout",
+        {
+          span: 8,
+          horizontalOnly: true
+        },
+        "Set the width and offset of the labels"
+      ),
+      wrapperCol: colProp(
+        "Control layout",
+        {
+          span: 16,
+          horizontalOnly: true
+        },
+        "Set the width and offset of the form controls"
+      ),
       colon: {
         type: "boolean",
         description: `Show a colon after labels by default (only for horizontal layout)`,
@@ -503,14 +533,34 @@ function useFormInstanceMaybe() {
   return antd.Form.useFormInstance();
 }
 function FormItemWrapper(props) {
-  var _a, _b;
-  const relativeFormItemName = useFormItemRelativeName(props.name);
-  const fullFormItemName = useFormItemFullName(props.name);
-  const bestEffortLabel = !props.noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
-  const rules = props.rules ? plasmicRulesToAntdRules(
-    props.rules,
+  var _b;
+  const _a = props, {
+    rules: plasmicRules,
+    description,
+    noLabel,
+    name,
+    hideValidationMessage,
+    customizeProps,
+    setControlContextData,
+    alignLabellessWithControls = true
+  } = _a, rest = __objRest(_a, [
+    "rules",
+    "description",
+    "noLabel",
+    "name",
+    "hideValidationMessage",
+    "customizeProps",
+    "setControlContextData",
+    "alignLabellessWithControls"
+  ]);
+  const relativeFormItemName = useFormItemRelativeName(name);
+  const fullFormItemName = useFormItemFullName(name);
+  const bestEffortLabel = !noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
+  const rules = plasmicRules ? plasmicRulesToAntdRules(
+    plasmicRules,
     typeof bestEffortLabel === "number" ? "" + bestEffortLabel : bestEffortLabel
   ) : void 0;
+  const layoutContext = React__default.default.useContext(FormLayoutContext);
   const inCanvas = !!host.usePlasmicCanvasContext();
   if (inCanvas) {
     const form = useFormInstanceMaybe();
@@ -520,7 +570,7 @@ function FormItemWrapper(props) {
     });
     const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
     const { fireOnValuesChange, forceRemount } = internalFormCtx != null ? internalFormCtx : {};
-    (_a = props.setControlContextData) == null ? void 0 : _a.call(props, {
+    (_b = props.setControlContextData) == null ? void 0 : _b.call(props, {
       internalFormCtx
     });
     React__default.default.useEffect(() => {
@@ -537,14 +587,15 @@ function FormItemWrapper(props) {
   }
   return /* @__PURE__ */ React__default.default.createElement(
     FormItem,
-    __spreadValues(__spreadProps(__spreadValues({}, utils.omit(props, "rules")), {
-      label: props.noLabel ? void 0 : props.label,
+    __spreadProps(__spreadValues({}, rest), {
+      label: noLabel ? void 0 : props.label,
       name: relativeFormItemName,
-      rules
-    }), props.helpTextMode === "extra" ? { extra: props.help } : props.helpTextMode === "help" ? (
-      // Never show validation errors in this mode, even if user didn't specify help
-      { help: (_b = props.help) != null ? _b : "" }
-    ) : {}),
+      rules,
+      extra: description,
+      help: hideValidationMessage ? "" : props.help,
+      colon: noLabel ? false : void 0,
+      wrapperCol: (layoutContext == null ? void 0 : layoutContext.layout) === "horizontal" && noLabel && alignLabellessWithControls && layoutContext.labelSpan ? { offset: layoutContext.labelSpan } : void 0
+    }),
     props.customizeProps ? /* @__PURE__ */ React__default.default.createElement(FormItemForwarder, { formItemProps: props }) : props.children
   );
 }
@@ -574,13 +625,18 @@ function registerFormItem(loader) {
     name: "plasmic-antd5-form-item",
     displayName: "Form Item",
     parentComponentName: "plasmic-antd5-form",
+    defaultStyles: {
+      marginBottom: "24px",
+      width: "stretch"
+    },
     props: {
       label: {
         type: "slot",
         defaultValue: {
           type: "text",
           value: "Label"
-        }
+        },
+        hidden: (ps) => !!ps.noLabel
       },
       children: {
         type: "slot",
@@ -598,10 +654,26 @@ function registerFormItem(loader) {
       rules: {
         type: "formValidationRules"
       },
+      valuePropName: {
+        type: "string",
+        advanced: true,
+        defaultValueHint: "value",
+        description: "The prop name for specifying the value of the form control component"
+      },
       noLabel: {
         type: "boolean",
         advanced: true
       },
+      alignLabellessWithControls: {
+        type: "boolean",
+        displayName: "Align with controls?",
+        description: "Aligns the content with form controls in the grid",
+        hidden: (ps, ctx) => {
+          var _a;
+          return !ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+        },
+        defaultValueHint: true
+      },
       colon: {
         type: "boolean",
         defaultValueHint: true,
@@ -611,7 +683,11 @@ function registerFormItem(loader) {
       labelAlign: {
         type: "choice",
         options: ["left", "right"],
-        advanced: true
+        advanced: true,
+        hidden: (ps, ctx) => {
+          var _a;
+          return !!ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+        }
       },
       hidden: {
         type: "boolean",
@@ -635,34 +711,16 @@ function registerFormItem(loader) {
         displayName: "Dependencies",
         description: "Form items can depend on other form items. This forces it to reevaluate the validation rules when the other form item changes."
       },
-      helpTextMode: {
-        type: "choice",
-        displayName: "Help text",
-        options: [
-          {
-            value: "errors",
-            label: "Validation errors"
-          },
-          {
-            value: "extra",
-            label: "Custom help text and validation errors"
-          },
-          {
-            value: "help",
-            label: "Custom help text, no validation errors"
-          }
-        ],
-        defaultValueHint: "Show validation errors",
-        description: "What to show in the help text. Edit help text by editing the 'help' slot in the outline."
+      hideValidationMessage: {
+        type: "boolean",
+        displayName: "Hide validation message?",
+        description: "If true, will hide the validation error message",
+        defaultValueHint: false,
+        advanced: true
       },
-      help: {
+      description: {
         type: "slot",
-        hidden: (ps) => {
-          var _a;
-          return !["extra", "help"].includes((_a = ps.helpTextMode) != null ? _a : "");
-        },
         hidePlaceholder: true
-        // advanced: true,
       },
       customizeProps: {
         type: "function",
@@ -680,13 +738,85 @@ function registerFormItem(loader) {
       },
       noStyle: {
         type: "boolean",
-        displayName: "Field only",
-        description: "Don't render anything but the wrapped field component - so no label, help text, validation error, etc.",
+        displayName: "Field control only",
+        description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
         advanced: true
       }
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormItemWrapper"
+    importName: "FormItemWrapper",
+    templates: {
+      Text: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-input"
+          }
+        }
+      },
+      "Long Text": {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-textarea"
+          }
+        }
+      },
+      "Select dropdown": {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-select"
+          }
+        }
+      },
+      Number: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-input-number"
+          }
+        }
+      },
+      Checkbox: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-checkbox"
+          },
+          valuePropName: "checked",
+          noLabel: true
+        }
+      },
+      Radios: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-radio-group"
+          }
+        }
+      },
+      Password: {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-input-password"
+          }
+        }
+      },
+      "Submit button": {
+        props: {
+          children: {
+            type: "component",
+            name: "plasmic-antd5-button",
+            props: {
+              type: "primary"
+            }
+          },
+          noLabel: true
+        }
+      }
+    }
   });
 }
 function FormGroup(props) {