@plasmicpkgs/antd5 0.0.42 → 0.0.44

package/skinny/registerForm.js

@@ -151,46 +151,80 @@ const Internal = (props) => {
   React__default.default.useEffect(() => {
     fireOnValuesChange();
   }, []);
-  return /* @__PURE__ */ React__default.default.createElement(InternalFormInstanceContext.Provider, {
-    value: {
-      fireOnValuesChange,
-      forceRemount: () => props.setRemountKey((k) => k + 1),
-      formProps: props
-    }
-  }, /* @__PURE__ */ React__default.default.createElement(Form__default.default, __spreadProps(__spreadValues({}, props), {
-    onValuesChange: (...args) => {
-      var _a2, _b2;
-      (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
-      (_b2 = props.extendedOnValuesChange) == null ? void 0 : _b2.call(props, args[1]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    InternalFormInstanceContext.Provider,
+    {
+      value: {
+        fireOnValuesChange,
+        forceRemount: () => props.setRemountKey((k) => k + 1),
+        formProps: props
+      }
     },
-    form,
-    labelCol: ((_a = props.labelCol) == null ? void 0 : _a.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
-    wrapperCol: ((_b = props.wrapperCol) == null ? void 0 : _b.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
-  }), /* @__PURE__ */ React__default.default.createElement("style", null, `
+    /* @__PURE__ */ React__default.default.createElement(
+      Form__default.default,
+      __spreadProps(__spreadValues({}, props), {
+        onValuesChange: (...args) => {
+          var _a2, _b2;
+          (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
+          (_b2 = props.extendedOnValuesChange) == null ? void 0 : _b2.call(props, args[1]);
+        },
+        form,
+        labelCol: ((_a = props.labelCol) == null ? void 0 : _a.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
+        wrapperCol: ((_b = props.wrapperCol) == null ? void 0 : _b.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));
+        `),
+      childrenNode
+    )
+  );
 };
 function FormWrapper(props) {
   const [remountKey, setRemountKey] = React__default.default.useState(0);
-  return /* @__PURE__ */ React__default.default.createElement(Internal, __spreadProps(__spreadValues({
-    key: remountKey
-  }, props), {
-    setRemountKey
-  }));
+  return /* @__PURE__ */ React__default.default.createElement(Internal, __spreadProps(__spreadValues({ key: remountKey }, props), { setRemountKey }));
 }
 const COMMON_ACTIONS = [
   {
     type: "button-action",
     label: "Append new Form Item",
     onClick: ({ studioOps }) => {
-      studioOps.appendToSlot({
-        type: "component",
-        name: "plasmic-antd5-form-item"
-      }, "children");
+      studioOps.appendToSlot(
+        {
+          type: "component",
+          name: "plasmic-antd5-form-item"
+        },
+        "children"
+      );
     }
   }
+  // {
+  //   type: "button-action" as const,
+  //   label: "Append new Form Group",
+  //   onClick: ({ studioOps }: ActionProps<any>) => {
+  //     studioOps.appendToSlot(
+  //       {
+  //         type: "component",
+  //         name: "plasmic-antd5-form-group",
+  //       },
+  //       "children"
+  //     );
+  //   },
+  // },
+  // {
+  //   type: "button-action" as const,
+  //   label: "Append new Form List",
+  //   onClick: ({ studioOps }: ActionProps<any>) => {
+  //     studioOps.appendToSlot(
+  //       {
+  //         type: "component",
+  //         name: "plasmic-antd5-form-list",
+  //       },
+  //       "children"
+  //     );
+  //   },
+  // },
 ];
 function registerForm(loader) {
   const colProp = (displayName, defaultValue) => ({
@@ -347,6 +381,7 @@ function registerForm(loader) {
         ]
       },
       onFinishFailed: {
+        // function({ values, errorFields, outOfDate })
         type: "eventHandler",
         displayName: "On invalid submit",
         argTypes: [
@@ -465,13 +500,18 @@ function FormItemWrapper(props) {
       fireOnValuesChange == null ? void 0 : fireOnValuesChange();
     }, [form, props.initialValue, fullFormItemName]);
   }
-  return /* @__PURE__ */ React__default.default.createElement(FormItem__default.default, __spreadValues(__spreadProps(__spreadValues({}, utils.omit(props, "rules")), {
-    label: props.noLabel ? void 0 : props.label,
-    name: relativeFormItemName,
-    rules
-  }), props.helpTextMode === "extra" ? { extra: props.help } : props.helpTextMode === "help" ? { help: (_b = props.help) != null ? _b : "" } : {}), props.customizeProps ? /* @__PURE__ */ React__default.default.createElement(FormItemForwarder, {
-    formItemProps: props
-  }) : props.children);
+  return /* @__PURE__ */ React__default.default.createElement(
+    FormItem__default.default,
+    __spreadValues(__spreadProps(__spreadValues({}, utils.omit(props, "rules")), {
+      label: props.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 : "" }
+    ) : {}),
+    props.customizeProps ? /* @__PURE__ */ React__default.default.createElement(FormItemForwarder, { formItemProps: props }) : props.children
+  );
 }
 function FormItemForwarder(_a) {
   var _b = _a, { formItemProps } = _b, props = __objRest(_b, ["formItemProps"]);
@@ -488,7 +528,10 @@ function FormItemForwarder(_a) {
   return React__default.default.Children.map(formItemProps.children, (child, i) => {
     var _a3;
     const baseProps = __spreadValues(__spreadValues({}, (_a3 = child.props) != null ? _a3 : {}), props);
-    return i === 0 && React.isValidElement(child) ? React.cloneElement(child, mergeProps(baseProps, formItemProps.customizeProps(data, baseProps))) : child;
+    return i === 0 && React.isValidElement(child) ? React.cloneElement(
+      child,
+      mergeProps(baseProps, formItemProps.customizeProps(data, baseProps))
+    ) : child;
   });
 }
 function registerFormItem(loader) {
@@ -586,6 +629,7 @@ function registerFormItem(loader) {
           return !["extra", "help"].includes((_a = ps.helpTextMode) != null ? _a : "");
         },
         hidePlaceholder: true
+        // advanced: true,
       },
       customizeProps: {
         type: "function",
@@ -614,12 +658,16 @@ function registerFormItem(loader) {
 }
 function FormGroup(props) {
   const pathCtx = React__default.default.useContext(PathContext);
-  return /* @__PURE__ */ React__default.default.createElement(PathContext.Provider, {
-    value: {
-      relativePath: [...pathCtx.relativePath, props.name],
-      fullPath: [...pathCtx.fullPath, props.name]
-    }
-  }, props.children);
+  return /* @__PURE__ */ React__default.default.createElement(
+    PathContext.Provider,
+    {
+      value: {
+        relativePath: [...pathCtx.relativePath, props.name],
+        fullPath: [...pathCtx.fullPath, props.name]
+      }
+    },
+    props.children
+  );
 }
 function registerFormGroup(loader) {
   utils.registerComponentHelper(loader, FormGroup, {
@@ -643,27 +691,33 @@ const FormListWrapper = React__default.default.forwardRef(function FormListWrapp
   var _a;
   const relativeFormItemName = useFormItemRelativeName(props.name);
   const fullFormItemName = useFormItemFullName(props.name);
-  const operationsRef = React__default.default.useRef(void 0);
-  React__default.default.useImperativeHandle(ref, () => ({
-    add(defaultValue, insertIndex) {
-      if (operationsRef.current) {
-        const { add } = operationsRef.current[1];
-        add(defaultValue, insertIndex);
-      }
-    },
-    remove(index) {
-      if (operationsRef.current) {
-        const { remove } = operationsRef.current[1];
-        remove(index);
-      }
-    },
-    move(from, to) {
-      if (operationsRef.current) {
-        const { move } = operationsRef.current[1];
-        move(from, to);
+  const operationsRef = React__default.default.useRef(
+    void 0
+  );
+  React__default.default.useImperativeHandle(
+    ref,
+    () => ({
+      add(defaultValue, insertIndex) {
+        if (operationsRef.current) {
+          const { add } = operationsRef.current[1];
+          add(defaultValue, insertIndex);
+        }
+      },
+      remove(index) {
+        if (operationsRef.current) {
+          const { remove } = operationsRef.current[1];
+          remove(index);
+        }
+      },
+      move(from, to) {
+        if (operationsRef.current) {
+          const { move } = operationsRef.current[1];
+          move(from, to);
+        }
       }
-    }
-  }), [operationsRef]);
+    }),
+    [operationsRef]
+  );
   const inCanvas = !!host.usePlasmicCanvasContext();
   if (inCanvas) {
     const form = useFormInstanceMaybe();
@@ -683,22 +737,18 @@ const FormListWrapper = React__default.default.forwardRef(function FormListWrapp
       }
     }, [props.initialValue, fullFormItemName]);
   }
-  return /* @__PURE__ */ React__default.default.createElement(FormList__default.default, __spreadProps(__spreadValues({}, props), {
-    name: relativeFormItemName != null ? relativeFormItemName : []
-  }), (...args) => {
+  return /* @__PURE__ */ React__default.default.createElement(FormList__default.default, __spreadProps(__spreadValues({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
     operationsRef.current = args;
-    return args[0].map((field, index) => /* @__PURE__ */ React__default.default.createElement(PathContext.Provider, {
-      value: {
-        relativePath: [field.name],
-        fullPath: [...fullFormItemName != null ? fullFormItemName : [], field.name]
-      }
-    }, /* @__PURE__ */ React__default.default.createElement(host.DataProvider, {
-      name: "currentField",
-      data: field
-    }, /* @__PURE__ */ React__default.default.createElement(host.DataProvider, {
-      name: "currentFieldIndex",
-      data: index
-    }, host.repeatedElement(index, props.children)))));
+    return args[0].map((field, index) => /* @__PURE__ */ React__default.default.createElement(
+      PathContext.Provider,
+      {
+        value: {
+          relativePath: [field.name],
+          fullPath: [...fullFormItemName != null ? fullFormItemName : [], field.name]
+        }
+      },
+      /* @__PURE__ */ React__default.default.createElement(host.DataProvider, { name: "currentField", data: field }, /* @__PURE__ */ React__default.default.createElement(host.DataProvider, { name: "currentFieldIndex", data: index }, host.repeatedElement(index, props.children)))
+    ));
   });
 });
 function registerFormList(loader) {

package/skinny/registerInput.js

@@ -235,6 +235,7 @@ function registerNumberInput(loader) {
         advanced: true
       }
     }, COMMON_DECORATOR_PROPS), COMMON_ADVANCED_PROPS), COMMON_EVENT_HANDLERS), {
+      // onChange directly called with the number
       onChange: {
         type: "eventHandler",
         argTypes: [
@@ -246,6 +247,7 @@ function registerNumberInput(loader) {
       }
     }),
     states: __spreadValues({}, COMMON_STATES),
+    // don't need component helpers
     importPath: "@plasmicpkgs/antd5/skinny/registerInput",
     importName: "AntdInputNumber"
   });

package/skinny/registerModal.js

@@ -64,12 +64,15 @@ function AntdModal(props) {
       return void 0;
     }
   }, [onOpenChange, onCancel]);
-  return /* @__PURE__ */ React__default.default.createElement(Modal__default.default, __spreadProps(__spreadValues({}, rest), {
-    onOk: memoOnOk,
-    onCancel: memoOnCancel,
-    open,
-    footer: footer != null ? footer : void 0
-  }));
+  return /* @__PURE__ */ React__default.default.createElement(
+    Modal__default.default,
+    __spreadProps(__spreadValues({}, rest), {
+      onOk: memoOnOk,
+      onCancel: memoOnCancel,
+      open,
+      footer: footer != null ? footer : void 0
+    })
+  );
 }
 function registerModal(loader) {
   utils.registerComponentHelper(loader, AntdModal, {

package/skinny/registerRadio.js

@@ -57,9 +57,7 @@ function AntdRadioGroup(props) {
       return void 0;
     }
   }, [onChange]);
-  return /* @__PURE__ */ React__default.default.createElement(RadioGroup__default.default, __spreadProps(__spreadValues({}, rest), {
-    onChange: wrappedOnChange
-  }));
+  return /* @__PURE__ */ React__default.default.createElement(RadioGroup__default.default, __spreadProps(__spreadValues({}, rest), { onChange: wrappedOnChange }));
 }
 function registerRadio(loader) {
   utils.registerComponentHelper(loader, AntdRadio, {
@@ -157,6 +155,13 @@ function registerRadio(loader) {
           "plasmic-antd5-radio",
           "plasmic-antd5-radio-button"
         ]
+        // Error right now when using default slot content with stateful instances
+        // defaultValue: [
+        //   {
+        //     type: "component",
+        //     name: "plasmic-antd5-radio",
+        //   },
+        // ],
       },
       onChange: {
         type: "eventHandler",

package/skinny/registerSelect.js

@@ -64,10 +64,13 @@ function AntdSelect(props) {
   if (useChildren) {
     curated.options = void 0;
   }
-  return /* @__PURE__ */ React__default.default.createElement(Select__default.default, __spreadValues(__spreadProps(__spreadValues({}, curated), {
-    mode: !mode || mode === "single" ? void 0 : mode,
-    popupClassName: `${defaultStylesClassName} ${popupScopeClassName} ${popupClassName}`
-  }), suffixIcon && { suffixIcon }));
+  return /* @__PURE__ */ React__default.default.createElement(
+    Select__default.default,
+    __spreadValues(__spreadProps(__spreadValues({}, curated), {
+      mode: !mode || mode === "single" ? void 0 : mode,
+      popupClassName: `${defaultStylesClassName} ${popupScopeClassName} ${popupClassName}`
+    }), suffixIcon && { suffixIcon })
+  );
 }
 function registerSelect(loader) {
   utils.registerComponentHelper(loader, AntdSelect, {

package/skinny/registerTable.js

@@ -73,51 +73,58 @@ const AntdTable = React__default.default.forwardRef(function AntdTable2(props, r
     type: isSelectable === "single" ? "radio" : "checkbox",
     selectedRowKeys: isControlled ? utils.asArray(selectedRowKeys) : uncontrolledSelectedRowKeys
   } : void 0;
-  React__default.default.useImperativeHandle(ref, () => ({
-    selectRowByIndex(index) {
-      if (data.data && rowKey) {
-        const row = data.data[index];
-        const rows = row ? [row] : [];
-        this._setSelectedRows(rows);
-      }
-    },
-    selectRowsByIndexes(indexes) {
-      if (data.data && rowKey) {
-        const rows = indexes.map((x) => data.data[x]).filter((x) => !!x);
-        this._setSelectedRows(rows);
-      }
-    },
-    selectRowByKey(key) {
-      if (data.data && rowKey) {
-        const rows = data.data.filter((r) => r[rowKey] === key);
-        this._setSelectedRows(rows);
-      }
-    },
-    selectRowsByKeys(keys) {
-      if (data.data && rowKey) {
-        const rows = data.data.filter((r) => keys.includes(r[rowKey]));
-        this._setSelectedRows(rows);
-      }
-    },
-    clearSelection() {
-      this._setSelectedRows([]);
-    },
-    _setSelectedRows(rows) {
-      onSelectedRowsChange == null ? void 0 : onSelectedRowsChange(rows);
-      if (rowKey) {
-        onSelectedRowKeysChange == null ? void 0 : onSelectedRowKeysChange(rows.map((r) => r[rowKey]));
-      }
-      if (!isControlled) {
-        setUncontrolledSelectedRowKeys(rows.map((r) => r[rowKey]));
+  React__default.default.useImperativeHandle(
+    ref,
+    () => ({
+      selectRowByIndex(index) {
+        if (data.data && rowKey) {
+          const row = data.data[index];
+          const rows = row ? [row] : [];
+          this._setSelectedRows(rows);
+        }
+      },
+      selectRowsByIndexes(indexes) {
+        if (data.data && rowKey) {
+          const rows = indexes.map((x) => data.data[x]).filter((x) => !!x);
+          this._setSelectedRows(rows);
+        }
+      },
+      selectRowByKey(key) {
+        if (data.data && rowKey) {
+          const rows = data.data.filter((r) => r[rowKey] === key);
+          this._setSelectedRows(rows);
+        }
+      },
+      selectRowsByKeys(keys) {
+        if (data.data && rowKey) {
+          const rows = data.data.filter((r) => keys.includes(r[rowKey]));
+          this._setSelectedRows(rows);
+        }
+      },
+      clearSelection() {
+        this._setSelectedRows([]);
+      },
+      _setSelectedRows(rows) {
+        onSelectedRowsChange == null ? void 0 : onSelectedRowsChange(rows);
+        if (rowKey) {
+          onSelectedRowKeysChange == null ? void 0 : onSelectedRowKeysChange(rows.map((r) => r[rowKey]));
+        }
+        if (!isControlled) {
+          setUncontrolledSelectedRowKeys(rows.map((r) => r[rowKey]));
+        }
       }
-    }
-  }), [data, onSelectedRowKeysChange, onSelectedRowsChange, isSelectable, rowKey]);
-  return /* @__PURE__ */ React__default.default.createElement(Table__default.default, __spreadValues({
-    loading: data == null ? void 0 : data.isLoading,
-    dataSource: data == null ? void 0 : data.data,
-    rowSelection: selection,
-    rowKey
-  }, rest));
+    }),
+    [data, onSelectedRowKeysChange, onSelectedRowsChange, isSelectable, rowKey]
+  );
+  return /* @__PURE__ */ React__default.default.createElement(
+    Table__default.default,
+    __spreadValues({
+      loading: data == null ? void 0 : data.isLoading,
+      dataSource: data == null ? void 0 : data.data,
+      rowSelection: selection,
+      rowKey
+    }, rest)
+  );
 });
 const AntdColumnGroup = Table__default.default.ColumnGroup;
 const AntdColumn = Table__default.default.Column;
@@ -192,6 +199,10 @@ function registerTable(loader) {
         onChangeProp: "onSelectedRowKeysChange",
         variableType: "array"
       }
+      // selectedRows: {
+      //   type: "readonly",
+      //   onChangeProp: "onSelectedRowsChange",
+      // },
     },
     unstable__refActions: {
       selectRowByIndex: {

package/skinny/registerUpload.js

@@ -67,7 +67,10 @@ function UploadWrapper(props) {
       onFilesChange == null ? void 0 : onFilesChange([
         ...files.filter((f) => f.uid !== file.uid),
         __spreadProps(__spreadValues({}, metadata), {
-          contents: reader.result.replace(/^data:[^;]+;base64,/, ""),
+          contents: reader.result.replace(
+            /^data:[^;]+;base64,/,
+            ""
+          ),
           status: "success"
         })
       ]);
@@ -85,18 +88,21 @@ function UploadWrapper(props) {
   const handleRemove = (file) => {
     onFilesChange == null ? void 0 : onFilesChange(files.filter((f) => f.uid !== file.uid));
   };
-  return /* @__PURE__ */ React__default.default.createElement(Upload__default.default, __spreadProps(__spreadValues({}, rest), {
-    fileList: files,
-    beforeUpload: () => {
-      return false;
-    },
-    onChange: (info) => {
-      handleChange(info);
-    },
-    onRemove: (file) => {
-      handleRemove(file);
-    }
-  }));
+  return /* @__PURE__ */ React__default.default.createElement(
+    Upload__default.default,
+    __spreadProps(__spreadValues({}, rest), {
+      fileList: files,
+      beforeUpload: () => {
+        return false;
+      },
+      onChange: (info) => {
+        handleChange(info);
+      },
+      onRemove: (file) => {
+        handleRemove(file);
+      }
+    })
+  );
 }
 function registerUpload(loader) {
   utils.registerComponentHelper(loader, UploadWrapper, {
@@ -139,8 +145,14 @@ function registerUpload(loader) {
         type: "slot",
         defaultValue: [
           {
-            type: "text",
-            value: "Upload"
+            type: "default-component",
+            kind: "button",
+            props: {
+              children: {
+                type: "text",
+                value: "Upload"
+              }
+            }
           }
         ]
       },