@plasmicpkgs/antd5 0.0.55 → 0.0.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/antd.esm.js +2423 -1981
  3. package/dist/antd.esm.js.map +1 -1
  4. package/dist/index.d.ts +19 -0
  5. package/dist/index.js +2429 -1979
  6. package/dist/index.js.map +1 -1
  7. package/dist/registerButton.d.ts +1 -0
  8. package/dist/registerCheckbox.d.ts +7 -0
  9. package/dist/registerDropdown.d.ts +4 -1
  10. package/dist/registerForm.d.ts +34 -0
  11. package/dist/registerInput.d.ts +4 -0
  12. package/dist/registerMenu.d.ts +76 -0
  13. package/dist/registerRadio.d.ts +4 -0
  14. package/dist/registerSelect.d.ts +3 -0
  15. package/dist/registerSwitch.d.ts +11 -0
  16. package/package.json +4 -4
  17. package/skinny/registerButton.cjs.js +5 -3
  18. package/skinny/registerButton.cjs.js.map +1 -1
  19. package/skinny/registerButton.d.ts +1 -0
  20. package/skinny/registerButton.esm.js +5 -4
  21. package/skinny/registerButton.esm.js.map +1 -1
  22. package/skinny/registerCheckbox.cjs.js +13 -12
  23. package/skinny/registerCheckbox.cjs.js.map +1 -1
  24. package/skinny/registerCheckbox.d.ts +7 -0
  25. package/skinny/registerCheckbox.esm.js +12 -13
  26. package/skinny/registerCheckbox.esm.js.map +1 -1
  27. package/skinny/registerConfigProvider.cjs.js.map +1 -1
  28. package/skinny/registerConfigProvider.esm.js.map +1 -1
  29. package/skinny/registerDropdown.cjs.js +85 -38
  30. package/skinny/registerDropdown.cjs.js.map +1 -1
  31. package/skinny/registerDropdown.d.ts +4 -1
  32. package/skinny/registerDropdown.esm.js +85 -38
  33. package/skinny/registerDropdown.esm.js.map +1 -1
  34. package/skinny/registerForm.cjs.js +317 -158
  35. package/skinny/registerForm.cjs.js.map +1 -1
  36. package/skinny/registerForm.d.ts +34 -0
  37. package/skinny/registerForm.esm.js +314 -160
  38. package/skinny/registerForm.esm.js.map +1 -1
  39. package/skinny/registerInput.cjs.js +35 -21
  40. package/skinny/registerInput.cjs.js.map +1 -1
  41. package/skinny/registerInput.d.ts +4 -0
  42. package/skinny/registerInput.esm.js +32 -22
  43. package/skinny/registerInput.esm.js.map +1 -1
  44. package/skinny/registerMenu.cjs.js +74 -2
  45. package/skinny/registerMenu.cjs.js.map +1 -1
  46. package/skinny/registerMenu.d.ts +76 -0
  47. package/skinny/registerMenu.esm.js +73 -3
  48. package/skinny/registerMenu.esm.js.map +1 -1
  49. package/skinny/registerRadio.cjs.js +85 -24
  50. package/skinny/registerRadio.cjs.js.map +1 -1
  51. package/skinny/registerRadio.d.ts +4 -0
  52. package/skinny/registerRadio.esm.js +83 -25
  53. package/skinny/registerRadio.esm.js.map +1 -1
  54. package/skinny/registerSelect.cjs.js +60 -27
  55. package/skinny/registerSelect.cjs.js.map +1 -1
  56. package/skinny/registerSelect.d.ts +3 -0
  57. package/skinny/registerSelect.esm.js +58 -28
  58. package/skinny/registerSelect.esm.js.map +1 -1
  59. package/skinny/registerSwitch.cjs.js +79 -0
  60. package/skinny/registerSwitch.cjs.js.map +1 -0
  61. package/skinny/registerSwitch.d.ts +11 -0
  62. package/skinny/registerSwitch.esm.js +71 -0
  63. package/skinny/registerSwitch.esm.js.map +1 -0
  64. package/skinny/registerUpload.cjs.js +4 -3
  65. package/skinny/registerUpload.cjs.js.map +1 -1
  66. package/skinny/registerUpload.esm.js +4 -3
  67. package/skinny/registerUpload.esm.js.map +1 -1
package/dist/index.js CHANGED
@@ -74,33 +74,33 @@ function usePrevious(value) {
74
74
  return prevValue.current;
75
75
  }
76
76
 
77
- var __defProp$b = Object.defineProperty;
78
- var __defProps$9 = Object.defineProperties;
79
- var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
80
- var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
81
- var __hasOwnProp$b = Object.prototype.hasOwnProperty;
82
- var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
83
- var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
84
- var __spreadValues$b = (a, b) => {
77
+ var __defProp$d = Object.defineProperty;
78
+ var __defProps$a = Object.defineProperties;
79
+ var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
80
+ var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
81
+ var __hasOwnProp$d = Object.prototype.hasOwnProperty;
82
+ var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
83
+ var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
84
+ var __spreadValues$d = (a, b) => {
85
85
  for (var prop in b || (b = {}))
86
- if (__hasOwnProp$b.call(b, prop))
87
- __defNormalProp$b(a, prop, b[prop]);
88
- if (__getOwnPropSymbols$b)
89
- for (var prop of __getOwnPropSymbols$b(b)) {
90
- if (__propIsEnum$b.call(b, prop))
91
- __defNormalProp$b(a, prop, b[prop]);
86
+ if (__hasOwnProp$d.call(b, prop))
87
+ __defNormalProp$d(a, prop, b[prop]);
88
+ if (__getOwnPropSymbols$d)
89
+ for (var prop of __getOwnPropSymbols$d(b)) {
90
+ if (__propIsEnum$d.call(b, prop))
91
+ __defNormalProp$d(a, prop, b[prop]);
92
92
  }
93
93
  return a;
94
94
  };
95
- var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
95
+ var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
96
96
  var __objRest$9 = (source, exclude) => {
97
97
  var target = {};
98
98
  for (var prop in source)
99
- if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
99
+ if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
100
100
  target[prop] = source[prop];
101
- if (source != null && __getOwnPropSymbols$b)
102
- for (var prop of __getOwnPropSymbols$b(source)) {
103
- if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
101
+ if (source != null && __getOwnPropSymbols$d)
102
+ for (var prop of __getOwnPropSymbols$d(source)) {
103
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
104
104
  target[prop] = source[prop];
105
105
  }
106
106
  return target;
@@ -110,16 +110,17 @@ function AntdButton(props) {
110
110
  const target = props.target === true ? "_blank" : props.target === false ? void 0 : props.target;
111
111
  return /* @__PURE__ */ React__default.default.createElement(
112
112
  antd.Button,
113
- __spreadProps$9(__spreadValues$b(__spreadProps$9(__spreadValues$b({}, rest), {
113
+ __spreadProps$a(__spreadValues$d(__spreadProps$a(__spreadValues$d({}, rest), {
114
114
  htmlType: submitsForm ? "submit" : "button"
115
115
  }), rest), {
116
116
  target
117
117
  })
118
118
  );
119
119
  }
120
+ const buttonComponentName = "plasmic-antd5-button";
120
121
  function registerButton(loader) {
121
122
  registerComponentHelper(loader, AntdButton, {
122
- name: "plasmic-antd5-button",
123
+ name: buttonComponentName,
123
124
  displayName: "Button",
124
125
  props: {
125
126
  type: {
@@ -180,7 +181,7 @@ function registerButton(loader) {
180
181
  hidden: (props) => !props.href,
181
182
  defaultValueHint: false
182
183
  },
183
- children: {
184
+ children: __spreadValues$d({
184
185
  type: "slot",
185
186
  defaultValue: [
186
187
  {
@@ -188,7 +189,7 @@ function registerButton(loader) {
188
189
  value: "Button"
189
190
  }
190
191
  ]
191
- },
192
+ }, { mergeWithParent: true }),
192
193
  icon: {
193
194
  type: "slot",
194
195
  hidePlaceholder: true,
@@ -204,33 +205,33 @@ function registerButton(loader) {
204
205
  });
205
206
  }
206
207
 
207
- var __defProp$a = Object.defineProperty;
208
- var __defProps$8 = Object.defineProperties;
209
- var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
210
- var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
211
- var __hasOwnProp$a = Object.prototype.hasOwnProperty;
212
- var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
213
- var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
214
- var __spreadValues$a = (a, b) => {
208
+ var __defProp$c = Object.defineProperty;
209
+ var __defProps$9 = Object.defineProperties;
210
+ var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
211
+ var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
212
+ var __hasOwnProp$c = Object.prototype.hasOwnProperty;
213
+ var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
214
+ var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
215
+ var __spreadValues$c = (a, b) => {
215
216
  for (var prop in b || (b = {}))
216
- if (__hasOwnProp$a.call(b, prop))
217
- __defNormalProp$a(a, prop, b[prop]);
218
- if (__getOwnPropSymbols$a)
219
- for (var prop of __getOwnPropSymbols$a(b)) {
220
- if (__propIsEnum$a.call(b, prop))
221
- __defNormalProp$a(a, prop, b[prop]);
217
+ if (__hasOwnProp$c.call(b, prop))
218
+ __defNormalProp$c(a, prop, b[prop]);
219
+ if (__getOwnPropSymbols$c)
220
+ for (var prop of __getOwnPropSymbols$c(b)) {
221
+ if (__propIsEnum$c.call(b, prop))
222
+ __defNormalProp$c(a, prop, b[prop]);
222
223
  }
223
224
  return a;
224
225
  };
225
- var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
226
+ var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
226
227
  var __objRest$8 = (source, exclude) => {
227
228
  var target = {};
228
229
  for (var prop in source)
229
- if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
230
+ if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
230
231
  target[prop] = source[prop];
231
- if (source != null && __getOwnPropSymbols$a)
232
- for (var prop of __getOwnPropSymbols$a(source)) {
233
- if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
232
+ if (source != null && __getOwnPropSymbols$c)
233
+ for (var prop of __getOwnPropSymbols$c(source)) {
234
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
234
235
  target[prop] = source[prop];
235
236
  }
236
237
  return target;
@@ -244,12 +245,15 @@ function AntdCheckbox(props) {
244
245
  return void 0;
245
246
  }
246
247
  }, [onChange]);
247
- return /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, __spreadProps$8(__spreadValues$a({}, rest), { onChange: wrappedOnChange }));
248
+ return /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, __spreadProps$9(__spreadValues$c({}, rest), { onChange: wrappedOnChange }));
248
249
  }
250
+ AntdCheckbox.__plasmicFormFieldMeta = { valueProp: "checked" };
249
251
  const AntdCheckboxGroup = antd.Checkbox.Group;
252
+ const checkboxComponentName = "plasmic-antd5-checkbox";
253
+ const checkboxGroupComponentName = "plasmic-antd5-checkbox";
250
254
  function registerCheckbox(loader) {
251
255
  registerComponentHelper(loader, AntdCheckbox, {
252
- name: "plasmic-antd5-checkbox",
256
+ name: checkboxComponentName,
253
257
  displayName: "Checkbox",
254
258
  props: {
255
259
  checked: {
@@ -257,11 +261,12 @@ function registerCheckbox(loader) {
257
261
  editOnly: true,
258
262
  uncontrolledProp: "defaultChecked",
259
263
  description: "Specifies the initial state: whether or not the checkbox is selected",
260
- defaultValueHint: false
264
+ defaultValueHint: false,
265
+ hidden: (ps) => !!ps.__plasmicFormField
261
266
  },
262
267
  disabled: {
263
268
  type: "boolean",
264
- description: "If disable checkbox",
269
+ description: "If checkbox is disabled",
265
270
  defaultValueHint: false
266
271
  },
267
272
  indeterminate: {
@@ -269,18 +274,13 @@ function registerCheckbox(loader) {
269
274
  description: "The indeterminate checked state of checkbox",
270
275
  defaultValueHint: false
271
276
  },
272
- value: {
273
- type: "string",
274
- description: "The checkbox value",
275
- advanced: true
276
- },
277
277
  autoFocus: {
278
278
  type: "boolean",
279
279
  description: "If get focus when component mounted",
280
280
  defaultValueHint: false,
281
281
  advanced: true
282
282
  },
283
- children: {
283
+ children: __spreadValues$c({
284
284
  type: "slot",
285
285
  defaultValue: [
286
286
  {
@@ -288,7 +288,7 @@ function registerCheckbox(loader) {
288
288
  value: "Checkbox"
289
289
  }
290
290
  ]
291
- },
291
+ }, { mergeWithParent: true }),
292
292
  onChange: {
293
293
  type: "eventHandler",
294
294
  argTypes: [{ name: "checked", type: "boolean" }]
@@ -306,7 +306,7 @@ function registerCheckbox(loader) {
306
306
  importName: "AntdCheckbox"
307
307
  });
308
308
  registerComponentHelper(loader, AntdCheckboxGroup, {
309
- name: "plasmic-antd5-checkbox-group",
309
+ name: checkboxGroupComponentName,
310
310
  displayName: "Checkbox Group",
311
311
  props: {
312
312
  value: {
@@ -357,37 +357,37 @@ function registerCheckbox(loader) {
357
357
  },
358
358
  importPath: "@plasmicpkgs/antd5/skinny/registerCheckbox",
359
359
  importName: "AntdCheckboxGroup",
360
- parentComponentName: "plasmic-antd5-checkbox"
360
+ parentComponentName: checkboxComponentName
361
361
  });
362
362
  }
363
363
 
364
- var __defProp$9 = Object.defineProperty;
365
- var __defProps$7 = Object.defineProperties;
366
- var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
367
- var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
368
- var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
369
- var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
370
- var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
371
- var __spreadValues$9 = (a, b) => {
364
+ var __defProp$b = Object.defineProperty;
365
+ var __defProps$8 = Object.defineProperties;
366
+ var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
367
+ var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
368
+ var __hasOwnProp$b = Object.prototype.hasOwnProperty;
369
+ var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
370
+ var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
371
+ var __spreadValues$b = (a, b) => {
372
372
  for (var prop in b || (b = {}))
373
- if (__hasOwnProp$9.call(b, prop))
374
- __defNormalProp$9(a, prop, b[prop]);
375
- if (__getOwnPropSymbols$9)
376
- for (var prop of __getOwnPropSymbols$9(b)) {
377
- if (__propIsEnum$9.call(b, prop))
378
- __defNormalProp$9(a, prop, b[prop]);
373
+ if (__hasOwnProp$b.call(b, prop))
374
+ __defNormalProp$b(a, prop, b[prop]);
375
+ if (__getOwnPropSymbols$b)
376
+ for (var prop of __getOwnPropSymbols$b(b)) {
377
+ if (__propIsEnum$b.call(b, prop))
378
+ __defNormalProp$b(a, prop, b[prop]);
379
379
  }
380
380
  return a;
381
381
  };
382
- var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
382
+ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
383
383
  var __objRest$7 = (source, exclude) => {
384
384
  var target = {};
385
385
  for (var prop in source)
386
- if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
386
+ if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
387
387
  target[prop] = source[prop];
388
- if (source != null && __getOwnPropSymbols$9)
389
- for (var prop of __getOwnPropSymbols$9(source)) {
390
- if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
388
+ if (source != null && __getOwnPropSymbols$b)
389
+ for (var prop of __getOwnPropSymbols$b(source)) {
390
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
391
391
  target[prop] = source[prop];
392
392
  }
393
393
  return target;
@@ -438,9 +438,9 @@ function AntdConfigProvider(props) {
438
438
  const _a = props, { children, themeStyles } = _a, rest = __objRest$7(_a, ["children", "themeStyles"]);
439
439
  return /* @__PURE__ */ React__default.default.createElement(
440
440
  antd.ConfigProvider,
441
- __spreadValues$9({
441
+ __spreadValues$b({
442
442
  locale: defaultLocale
443
- }, themeToAntdConfig(__spreadProps$7(__spreadValues$9({}, rest), {
443
+ }, themeToAntdConfig(__spreadProps$8(__spreadValues$b({}, rest), {
444
444
  fontFamily: themeStyles.fontFamily,
445
445
  fontSize: themeStyles.fontSize ? parseInt(themeStyles.fontSize) : void 0,
446
446
  lineHeight: themeStyles.lineHeight ? parseInt(themeStyles.lineHeight) : void 0,
@@ -476,7 +476,7 @@ function InnerConfigProvider(props) {
476
476
  showNotification: (opts) => {
477
477
  var _b;
478
478
  const _a = opts, rest = __objRest$7(_a, ["type"]);
479
- app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$9({}, rest));
479
+ app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$b({}, rest));
480
480
  },
481
481
  hideNotifications: () => {
482
482
  app.notification.destroy();
@@ -773,7 +773,7 @@ function registerTokens(loader) {
773
773
  }
774
774
  const registerConfigProvider = makeRegisterGlobalContext(
775
775
  AntdConfigProvider,
776
- __spreadProps$7(__spreadValues$9({
776
+ __spreadProps$8(__spreadValues$b({
777
777
  name: "plasmic-antd5-config-provider",
778
778
  displayName: "Ant Design System Settings",
779
779
  props: {
@@ -875,1159 +875,1052 @@ const registerConfigProvider = makeRegisterGlobalContext(
875
875
  })
876
876
  );
877
877
 
878
- var __defProp$8 = Object.defineProperty;
879
- var __defProps$6 = Object.defineProperties;
880
- var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
881
- var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
882
- var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
883
- var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
884
- var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
885
- var __spreadValues$8 = (a, b) => {
878
+ var __defProp$a = Object.defineProperty;
879
+ var __defProps$7 = Object.defineProperties;
880
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
881
+ var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
882
+ var __hasOwnProp$a = Object.prototype.hasOwnProperty;
883
+ var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
884
+ var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
885
+ var __spreadValues$a = (a, b) => {
886
886
  for (var prop in b || (b = {}))
887
- if (__hasOwnProp$8.call(b, prop))
888
- __defNormalProp$8(a, prop, b[prop]);
889
- if (__getOwnPropSymbols$8)
890
- for (var prop of __getOwnPropSymbols$8(b)) {
891
- if (__propIsEnum$8.call(b, prop))
892
- __defNormalProp$8(a, prop, b[prop]);
887
+ if (__hasOwnProp$a.call(b, prop))
888
+ __defNormalProp$a(a, prop, b[prop]);
889
+ if (__getOwnPropSymbols$a)
890
+ for (var prop of __getOwnPropSymbols$a(b)) {
891
+ if (__propIsEnum$a.call(b, prop))
892
+ __defNormalProp$a(a, prop, b[prop]);
893
893
  }
894
894
  return a;
895
895
  };
896
- var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
897
- var __objRest$6 = (source, exclude) => {
898
- var target = {};
899
- for (var prop in source)
900
- if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
901
- target[prop] = source[prop];
902
- if (source != null && __getOwnPropSymbols$8)
903
- for (var prop of __getOwnPropSymbols$8(source)) {
904
- if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
905
- target[prop] = source[prop];
896
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
897
+ const AntdMenu = antd.Menu;
898
+ const AntdMenuDivider = antd.Menu.Divider;
899
+ const AntdMenuItem = antd.Menu.Item;
900
+ const AntdMenuItemGroup = antd.Menu.ItemGroup;
901
+ const AntdSubMenu = antd.Menu.SubMenu;
902
+ const allowedMenuComponents = [
903
+ "plasmic-antd5-menu-item",
904
+ "plasmic-antd5-menu-divider",
905
+ "plasmic-antd5-submenu",
906
+ "plasmic-antd5-menu-item-group"
907
+ ];
908
+ const MENU_ITEM_TYPE = {
909
+ type: "object",
910
+ nameFunc: (item) => {
911
+ if (item.type === "divider") {
912
+ return "Divider";
906
913
  }
907
- return target;
914
+ return item.label || item.value;
915
+ },
916
+ fields: {
917
+ type: {
918
+ type: "choice",
919
+ options: [
920
+ { value: "item", label: "Menu item" },
921
+ { value: "group", label: "Menu item group" },
922
+ { value: "submenu", label: "Sub-menu" },
923
+ { value: "divider", label: "Menu divider" }
924
+ ],
925
+ defaultValue: "item"
926
+ },
927
+ key: {
928
+ type: "string",
929
+ displayName: "Menu item key",
930
+ description: "Key of the menu item; the onClick will receive this as the value to indicate which item was clicked.",
931
+ hidden: (ps) => ps.type !== "item"
932
+ },
933
+ label: {
934
+ type: "string",
935
+ description: "Label of the menu item; will use the key if not specified.",
936
+ hidden: (ps) => ps.type === "divider"
937
+ },
938
+ children: {
939
+ type: "array",
940
+ displayName: "Menu items",
941
+ hidden: (ps) => ps.type !== "submenu" && ps.type !== "group"
942
+ },
943
+ onClick: {
944
+ type: "eventHandler",
945
+ displayName: "Action",
946
+ description: "Action to perform when this item is selected",
947
+ argTypes: [{ name: "info", type: "object" }],
948
+ hidden: (ps) => ps.type !== "item"
949
+ }
950
+ }
908
951
  };
909
- function AntdDropdown(props) {
910
- const _a = props, { children, onAction, menuItems } = _a, rest = __objRest$6(_a, ["children", "onAction", "menuItems"]);
911
- return /* @__PURE__ */ React__default.default.createElement(
912
- antd.Dropdown,
913
- __spreadProps$6(__spreadValues$8({}, rest), {
914
- overlay: () => {
915
- var _a2;
916
- const items = (_a2 = menuItems == null ? void 0 : menuItems()) != null ? _a2 : [];
917
- return /* @__PURE__ */ React__default.default.createElement(antd.Menu, { onClick: (event) => onAction == null ? void 0 : onAction(event.key) }, items);
918
- }
919
- }),
920
- typeof children === "string" ? /* @__PURE__ */ React__default.default.createElement("div", null, children) : children
921
- );
922
- }
923
- function registerDropdown(loader) {
924
- registerComponentHelper(loader, AntdDropdown, {
925
- name: "plasmic-antd5-dropdown",
926
- displayName: "Dropdown",
952
+ const UNKEYED_MENU_ITEM_TYPE = __spreadProps$7(__spreadValues$a({}, MENU_ITEM_TYPE), {
953
+ fields: Object.fromEntries(
954
+ Object.entries(MENU_ITEM_TYPE.fields).filter(([k]) => k !== "key")
955
+ )
956
+ });
957
+ MENU_ITEM_TYPE.fields.children.itemType = MENU_ITEM_TYPE;
958
+ UNKEYED_MENU_ITEM_TYPE.fields.children.itemType = UNKEYED_MENU_ITEM_TYPE;
959
+ function registerMenu(loader) {
960
+ registerComponentHelper(loader, AntdMenu, {
961
+ name: "plasmic-antd5-menu",
962
+ displayName: "Menu",
927
963
  props: {
928
- open: {
929
- type: "boolean",
930
- description: "Toggle visibility of dropdown menu in Plasmic Editor",
931
- editOnly: true,
932
- uncontrolledProp: "fakeOpen",
933
- defaultValueHint: false
964
+ expandIcon: {
965
+ type: "slot",
966
+ hidePlaceholder: true
934
967
  },
935
- disabled: {
936
- type: "boolean",
937
- description: "Whether the dropdown menu is disabled",
938
- defaultValueHint: false
968
+ mode: {
969
+ type: "choice",
970
+ options: ["horizontal", "vertical", "inline"],
971
+ description: "Type of menu",
972
+ defaultValueHint: "vertical"
939
973
  },
940
- arrow: {
974
+ multiple: {
941
975
  type: "boolean",
942
- description: "Whether the dropdown arrow should be visible",
943
- defaultValueHint: false,
944
- advanced: true
976
+ description: "Allows selection of multiple items",
977
+ defaultValueHint: false
945
978
  },
946
- placement: {
979
+ triggerSubMenuAction: {
947
980
  type: "choice",
948
- options: [
949
- "bottomLeft",
950
- "bottomCenter",
951
- "bottomRight",
952
- "topLeft",
953
- "topCenter",
954
- "topRight"
955
- ],
956
- description: "Placement of popup menu",
957
- defaultValueHint: "bottomLeft",
981
+ options: ["hover", "click"],
982
+ description: "Which action can trigger submenu open/close",
983
+ defaultValueHint: "hover",
958
984
  advanced: true
959
985
  },
960
- menuItems: {
986
+ children: {
961
987
  type: "slot",
962
- allowedComponents: [
963
- "plasmic-antd5-menu-item",
964
- "plasmic-antd5-menu-item-group",
965
- "plasmic-antd5-menu-divider",
966
- "plasmic-antd5-submenu"
967
- ],
988
+ allowedComponents: allowedMenuComponents,
968
989
  defaultValue: [
969
990
  {
970
991
  type: "component",
971
992
  name: "plasmic-antd5-menu-item",
972
993
  props: {
973
- key: "menu-item-1"
994
+ key: "menuItemKey1"
974
995
  }
975
996
  },
976
997
  {
977
998
  type: "component",
978
999
  name: "plasmic-antd5-menu-item",
979
1000
  props: {
980
- key: "menu-item-2"
981
- }
982
- }
983
- ],
984
- renderPropParams: []
985
- },
986
- trigger: {
987
- type: "choice",
988
- options: ["click", "hover", "contextMenu"],
989
- description: "The trigger mode which executes the dropdown action",
990
- defaultValueHint: "hover"
991
- },
992
- children: {
993
- type: "slot",
994
- defaultValue: [
995
- {
996
- type: "component",
997
- name: "plasmic-antd5-button",
998
- props: {
999
- children: {
1000
- type: "text",
1001
- value: "Dropdown"
1002
- }
1001
+ key: "menuItemKey2"
1003
1002
  }
1004
1003
  }
1005
1004
  ]
1006
1005
  },
1007
- onAction: {
1006
+ onSelect: {
1008
1007
  type: "eventHandler",
1009
1008
  argTypes: [{ name: "key", type: "string" }]
1010
1009
  }
1011
1010
  },
1012
- importPath: "@plasmicpkgs/antd5/skinny/registerDropdown",
1013
- importName: "AntdDropdown"
1011
+ importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
1012
+ importName: "AntdMenu"
1014
1013
  });
1015
- }
1016
-
1017
- var __defProp$7 = Object.defineProperty;
1018
- var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
1019
- var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
1020
- var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
1021
- var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1022
- var __spreadValues$7 = (a, b) => {
1023
- for (var prop in b || (b = {}))
1024
- if (__hasOwnProp$7.call(b, prop))
1025
- __defNormalProp$7(a, prop, b[prop]);
1026
- if (__getOwnPropSymbols$7)
1027
- for (var prop of __getOwnPropSymbols$7(b)) {
1028
- if (__propIsEnum$7.call(b, prop))
1029
- __defNormalProp$7(a, prop, b[prop]);
1030
- }
1031
- return a;
1032
- };
1033
- const isBrowser = typeof window !== "undefined";
1034
- const NONE = Symbol("NONE");
1035
- isBrowser ? React__default.default.useLayoutEffect : React__default.default.useEffect;
1036
- function mergeProps(props, ...restProps) {
1037
- if (restProps.every((rest) => Object.keys(rest).length === 0)) {
1038
- return props;
1039
- }
1040
- const result = __spreadValues$7({}, props);
1041
- for (const rest of restProps) {
1042
- for (const key of Object.keys(rest)) {
1043
- result[key] = mergePropVals(key, result[key], rest[key]);
1044
- }
1045
- }
1046
- return result;
1047
- }
1048
- function updateRef(ref, value) {
1049
- if (!ref) {
1050
- return;
1051
- }
1052
- if (typeof ref === "function") {
1053
- ref(value);
1054
- } else {
1055
- if (!Object.isFrozen(ref)) {
1056
- ref.current = value;
1057
- }
1058
- }
1059
- }
1060
- function mergeRefs(...refs) {
1061
- return (value) => {
1062
- for (const ref of refs) {
1063
- updateRef(ref, value);
1064
- }
1065
- };
1066
- }
1067
- function mergePropVals(name, val1, val2) {
1068
- if (val1 === NONE || val2 === NONE) {
1069
- return null;
1070
- } else if (val1 == null) {
1071
- return val2;
1072
- } else if (val2 == null) {
1073
- return val1;
1074
- } else if (name === "className") {
1075
- return classNames__default.default(val1, val2);
1076
- } else if (name === "style") {
1077
- return __spreadValues$7(__spreadValues$7({}, val1), val2);
1078
- } else if (name === "ref") {
1079
- return mergeRefs(val1, val2);
1080
- } else if (typeof val1 !== typeof val2) {
1081
- return val2;
1082
- } else if (name.startsWith("on") && typeof val1 === "function") {
1083
- return (...args) => {
1084
- let res;
1085
- if (typeof val1 === "function") {
1086
- res = val1(...args);
1014
+ registerComponentHelper(loader, AntdMenuItem, {
1015
+ name: "plasmic-antd5-menu-item",
1016
+ displayName: "Menu Item",
1017
+ props: {
1018
+ danger: {
1019
+ type: "boolean",
1020
+ description: "Display the danger style",
1021
+ defaultValueHint: false
1022
+ },
1023
+ disabled: {
1024
+ type: "boolean",
1025
+ description: "Whether disabled select",
1026
+ defaultValueHint: false
1027
+ },
1028
+ key: {
1029
+ type: "string",
1030
+ displayName: "Unique key",
1031
+ description: "Unique ID of the menu item. Used to determine which item is selected.",
1032
+ defaultValue: "menuItemKey"
1033
+ },
1034
+ title: {
1035
+ type: "string",
1036
+ description: "Set display title for collapsed item"
1037
+ },
1038
+ children: __spreadValues$a({
1039
+ type: "slot",
1040
+ defaultValue: [
1041
+ {
1042
+ type: "text",
1043
+ value: "Menu item"
1044
+ }
1045
+ ]
1046
+ }, { mergeWithParent: true }),
1047
+ onClick: {
1048
+ type: "eventHandler",
1049
+ argTypes: []
1087
1050
  }
1088
- if (typeof val2 === "function") {
1089
- res = val2(...args);
1051
+ },
1052
+ importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
1053
+ importName: "AntdMenuItem",
1054
+ parentComponentName: "plasmic-antd5-menu"
1055
+ });
1056
+ registerComponentHelper(loader, AntdMenuItemGroup, {
1057
+ name: "plasmic-antd5-menu-item-group",
1058
+ displayName: "Item Group",
1059
+ props: {
1060
+ title: {
1061
+ type: "slot",
1062
+ defaultValue: [
1063
+ {
1064
+ type: "text",
1065
+ value: "Group"
1066
+ }
1067
+ ]
1068
+ },
1069
+ children: {
1070
+ type: "slot",
1071
+ allowedComponents: allowedMenuComponents,
1072
+ defaultValue: [
1073
+ {
1074
+ type: "component",
1075
+ name: "plasmic-antd5-menu-item"
1076
+ }
1077
+ ]
1090
1078
  }
1091
- return res;
1092
- };
1093
- } else {
1094
- return val2;
1095
- }
1079
+ },
1080
+ importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
1081
+ importName: "AntdMenuItemGroup",
1082
+ parentComponentName: "plasmic-antd5-menu"
1083
+ });
1084
+ registerComponentHelper(loader, AntdMenuDivider, {
1085
+ name: "plasmic-antd5-menu-divider",
1086
+ displayName: "Menu Divider",
1087
+ props: {
1088
+ dashed: {
1089
+ type: "boolean",
1090
+ description: "Whether line is dashed",
1091
+ defaultValueHint: false
1092
+ }
1093
+ },
1094
+ importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
1095
+ importName: "AntdMenuDivider",
1096
+ parentComponentName: "plasmic-antd5-menu"
1097
+ });
1098
+ registerComponentHelper(loader, AntdSubMenu, {
1099
+ name: "plasmic-antd5-submenu",
1100
+ displayName: "Sub Menu",
1101
+ props: {
1102
+ disabled: {
1103
+ type: "boolean",
1104
+ description: "Whether sub-menu is disabled",
1105
+ defaultValueHint: false
1106
+ },
1107
+ key: {
1108
+ type: "string",
1109
+ displayName: "Unique key",
1110
+ description: "Unique ID of the sub-menu. Used to determine which item is selected.",
1111
+ advanced: true
1112
+ },
1113
+ title: {
1114
+ type: "slot",
1115
+ defaultValue: [
1116
+ {
1117
+ type: "text",
1118
+ value: "Sub-menu"
1119
+ }
1120
+ ]
1121
+ },
1122
+ children: {
1123
+ type: "slot",
1124
+ allowedComponents: allowedMenuComponents,
1125
+ defaultValue: [1, 2].map((i) => ({
1126
+ type: "component",
1127
+ name: "plasmic-antd5-menu-item",
1128
+ props: {
1129
+ key: `subMenuItemKey${i}`,
1130
+ children: [
1131
+ {
1132
+ type: "text",
1133
+ value: `Sub-menu item ${i}`
1134
+ }
1135
+ ]
1136
+ }
1137
+ }))
1138
+ }
1139
+ },
1140
+ importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
1141
+ importName: "AntdSubMenu",
1142
+ parentComponentName: "plasmic-antd5-menu"
1143
+ });
1096
1144
  }
1097
1145
 
1098
- var __defProp$6 = Object.defineProperty;
1099
- var __defProps$5 = Object.defineProperties;
1100
- var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
1101
- var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
1102
- var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
1103
- var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
1104
- var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1105
- var __spreadValues$6 = (a, b) => {
1146
+ var __defProp$9 = Object.defineProperty;
1147
+ var __defProps$6 = Object.defineProperties;
1148
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
1149
+ var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
1150
+ var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
1151
+ var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
1152
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1153
+ var __spreadValues$9 = (a, b) => {
1106
1154
  for (var prop in b || (b = {}))
1107
- if (__hasOwnProp$6.call(b, prop))
1108
- __defNormalProp$6(a, prop, b[prop]);
1109
- if (__getOwnPropSymbols$6)
1110
- for (var prop of __getOwnPropSymbols$6(b)) {
1111
- if (__propIsEnum$6.call(b, prop))
1112
- __defNormalProp$6(a, prop, b[prop]);
1155
+ if (__hasOwnProp$9.call(b, prop))
1156
+ __defNormalProp$9(a, prop, b[prop]);
1157
+ if (__getOwnPropSymbols$9)
1158
+ for (var prop of __getOwnPropSymbols$9(b)) {
1159
+ if (__propIsEnum$9.call(b, prop))
1160
+ __defNormalProp$9(a, prop, b[prop]);
1113
1161
  }
1114
1162
  return a;
1115
1163
  };
1116
- var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
1117
- var __objRest$5 = (source, exclude) => {
1164
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
1165
+ var __objRest$6 = (source, exclude) => {
1118
1166
  var target = {};
1119
1167
  for (var prop in source)
1120
- if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
1168
+ if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
1121
1169
  target[prop] = source[prop];
1122
- if (source != null && __getOwnPropSymbols$6)
1123
- for (var prop of __getOwnPropSymbols$6(source)) {
1124
- if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
1170
+ if (source != null && __getOwnPropSymbols$9)
1171
+ for (var prop of __getOwnPropSymbols$9(source)) {
1172
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
1125
1173
  target[prop] = source[prop];
1126
1174
  }
1127
1175
  return target;
1128
1176
  };
1129
- const reactNodeToString = function(reactNode) {
1130
- let string = "";
1131
- if (typeof reactNode === "string") {
1132
- string = reactNode;
1133
- } else if (typeof reactNode === "number") {
1134
- string = reactNode.toString();
1135
- } else if (reactNode instanceof Array) {
1136
- reactNode.forEach(function(child) {
1137
- string += reactNodeToString(child);
1138
- });
1139
- } else if (React.isValidElement(reactNode)) {
1140
- string += reactNodeToString(reactNode.props.children);
1141
- }
1142
- return string;
1143
- };
1144
- function ensureArray(x) {
1145
- return Array.isArray(x) ? x : [x];
1177
+ function AntdDropdown(props) {
1178
+ const _a = props, {
1179
+ children,
1180
+ onAction,
1181
+ menuItems,
1182
+ useMenuItemsSlot = false,
1183
+ menuItemsJson,
1184
+ trigger = "click"
1185
+ } = _a, rest = __objRest$6(_a, [
1186
+ "children",
1187
+ "onAction",
1188
+ "menuItems",
1189
+ "useMenuItemsSlot",
1190
+ "menuItemsJson",
1191
+ "trigger"
1192
+ ]);
1193
+ return /* @__PURE__ */ React__default.default.createElement(
1194
+ antd.Dropdown,
1195
+ __spreadProps$6(__spreadValues$9({}, rest), {
1196
+ trigger: [trigger],
1197
+ overlay: () => {
1198
+ var _a2;
1199
+ const itemsChildren = useMenuItemsSlot ? (_a2 = menuItems == null ? void 0 : menuItems()) != null ? _a2 : [] : void 0;
1200
+ const items = useMenuItemsSlot ? void 0 : menuItemsJson;
1201
+ return /* @__PURE__ */ React__default.default.createElement(antd.Menu, { onClick: (event) => onAction == null ? void 0 : onAction(event.key), items }, itemsChildren);
1202
+ }
1203
+ }),
1204
+ typeof children === "string" ? /* @__PURE__ */ React__default.default.createElement("div", null, children) : children
1205
+ );
1146
1206
  }
1147
- const FormItem = antd.Form.Item;
1148
- const FormList = antd.Form.List;
1149
- const PathContext = React__default.default.createContext({ relativePath: [], fullPath: [] });
1150
- const InternalFormInstanceContext = React__default.default.createContext(void 0);
1151
- const FormLayoutContext = React__default.default.createContext(void 0);
1152
- const Internal = (props) => {
1153
- var _b, _c, _d;
1154
- const [form] = antd.Form.useForm();
1155
- const values = form.getFieldsValue(true);
1156
- const lastValue = React__default.default.useRef(values);
1157
- const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$5(_a, ["extendedOnValuesChange", "setRemountKey"]);
1158
- const childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
1159
- const fireOnValuesChange = React__default.default.useCallback(() => {
1160
- const values2 = form.getFieldsValue(true);
1161
- if (!equal__default.default(values2, lastValue.current)) {
1162
- extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
1163
- lastValue.current = values2;
1164
- }
1165
- }, [form, lastValue]);
1166
- React__default.default.useEffect(() => {
1167
- fireOnValuesChange();
1168
- }, []);
1169
- const formLayout = React__default.default.useMemo(
1170
- () => {
1171
- var _a2;
1172
- return {
1173
- layout: props.layout,
1174
- labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
1175
- };
1176
- },
1177
- [props.layout, (_b = props.labelCol) == null ? void 0 : _b.span]
1178
- );
1179
- return /* @__PURE__ */ React__default.default.createElement(
1180
- InternalFormInstanceContext.Provider,
1181
- {
1182
- value: {
1183
- layout: formLayout,
1184
- fireOnValuesChange,
1185
- forceRemount: () => setRemountKey((k) => k + 1)
1186
- }
1187
- },
1188
- /* @__PURE__ */ React__default.default.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React__default.default.createElement(
1189
- antd.Form,
1190
- __spreadProps$5(__spreadValues$6({}, rest), {
1191
- key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
1192
- onValuesChange: (...args) => {
1193
- var _a2;
1194
- (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
1195
- extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
1196
- },
1197
- form,
1198
- labelCol: ((_c = props.labelCol) == null ? void 0 : _c.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
1199
- wrapperCol: ((_d = props.wrapperCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
1200
- }),
1201
- /* @__PURE__ */ React__default.default.createElement("style", null, `
1202
- .ant-form-item-explain + div, .ant-form-item-margin-offset {
1203
- display: none;
1204
- }
1205
- `),
1206
- childrenNode
1207
- ))
1208
- );
1209
- };
1210
- function FormWrapper(props) {
1211
- const [remountKey, setRemountKey] = React__default.default.useState(0);
1212
- const previousInitialValues = usePrevious(props.initialValues);
1213
- React__default.default.useEffect(() => {
1214
- if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
1215
- setRemountKey((k) => k + 1);
1216
- }
1217
- }, [previousInitialValues, props.initialValues]);
1218
- return /* @__PURE__ */ React__default.default.createElement(Internal, __spreadProps$5(__spreadValues$6({ key: remountKey }, props), { setRemountKey }));
1219
- }
1220
- const COMMON_ACTIONS = [
1221
- {
1222
- type: "button-action",
1223
- label: "Append new Form Item",
1224
- onClick: ({ studioOps }) => {
1225
- studioOps.appendToSlot(
1226
- {
1227
- type: "component",
1228
- name: "plasmic-antd5-form-item"
1229
- },
1230
- "children"
1231
- );
1232
- }
1233
- }
1234
- // {
1235
- // type: "button-action" as const,
1236
- // label: "Append new Form Group",
1237
- // onClick: ({ studioOps }: ActionProps<any>) => {
1238
- // studioOps.appendToSlot(
1239
- // {
1240
- // type: "component",
1241
- // name: "plasmic-antd5-form-group",
1242
- // },
1243
- // "children"
1244
- // );
1245
- // },
1246
- // },
1247
- // {
1248
- // type: "button-action" as const,
1249
- // label: "Append new Form List",
1250
- // onClick: ({ studioOps }: ActionProps<any>) => {
1251
- // studioOps.appendToSlot(
1252
- // {
1253
- // type: "component",
1254
- // name: "plasmic-antd5-form-list",
1255
- // },
1256
- // "children"
1257
- // );
1258
- // },
1259
- // },
1260
- ];
1261
- const colProp = (displayName, defaultValue, description) => ({
1262
- type: "object",
1263
- displayName,
1264
- advanced: true,
1265
- fields: {
1266
- span: {
1267
- type: "number",
1268
- displayName: "Width",
1269
- description: "The number of grid columns to span in width (out of 24 columns total)",
1270
- min: 1,
1271
- max: 24
1272
- },
1273
- offset: {
1274
- type: "number",
1275
- displayName: "Offset",
1276
- description: "Number of grid columns to skip from the left (out of 24 columns total)",
1277
- min: 0,
1278
- max: 23
1279
- },
1280
- horizontalOnly: {
1281
- type: "boolean",
1282
- displayName: "Horizontal only",
1283
- description: "Only apply to horizontal layout"
1284
- }
1285
- },
1286
- description,
1287
- defaultValue
1288
- });
1289
- function registerForm(loader) {
1290
- registerComponentHelper(loader, FormWrapper, {
1291
- name: "plasmic-antd5-form",
1292
- displayName: "Form",
1293
- defaultStyles: {
1294
- layout: "vbox",
1295
- alignItems: "flex-start"
1296
- },
1207
+ function registerDropdown(loader) {
1208
+ registerComponentHelper(loader, AntdDropdown, {
1209
+ name: "plasmic-antd5-dropdown",
1210
+ displayName: "Dropdown",
1297
1211
  props: {
1298
- children: {
1212
+ menuItems: {
1299
1213
  type: "slot",
1214
+ displayName: "Menu items",
1215
+ hidden: (ps) => !ps.useMenuItemsSlot,
1216
+ allowedComponents: [
1217
+ "plasmic-antd5-menu-item",
1218
+ "plasmic-antd5-menu-item-group",
1219
+ "plasmic-antd5-menu-divider",
1220
+ "plasmic-antd5-submenu"
1221
+ ],
1300
1222
  defaultValue: [
1301
1223
  {
1302
1224
  type: "component",
1303
- name: "plasmic-antd5-form-item",
1225
+ name: "plasmic-antd5-menu-item",
1304
1226
  props: {
1305
- label: {
1306
- type: "text",
1307
- value: "Name"
1308
- },
1309
- name: "name",
1310
- children: {
1311
- type: "component",
1312
- name: "plasmic-antd5-input"
1313
- }
1227
+ key: "menu-item-1"
1314
1228
  }
1315
1229
  },
1316
1230
  {
1317
1231
  type: "component",
1318
- name: "plasmic-antd5-form-item",
1232
+ name: "plasmic-antd5-menu-item",
1319
1233
  props: {
1320
- label: {
1321
- type: "text",
1322
- value: "Message"
1323
- },
1324
- name: "message",
1325
- children: {
1326
- type: "component",
1327
- name: "plasmic-antd5-textarea"
1328
- }
1234
+ key: "menu-item-2"
1329
1235
  }
1236
+ }
1237
+ ],
1238
+ renderPropParams: []
1239
+ },
1240
+ menuItemsJson: {
1241
+ type: "array",
1242
+ displayName: "Menu Items",
1243
+ hidden: (ps) => ps.useMenuItemsSlot,
1244
+ itemType: UNKEYED_MENU_ITEM_TYPE,
1245
+ defaultValue: [
1246
+ {
1247
+ type: "item",
1248
+ value: "action1",
1249
+ label: "Action 1"
1330
1250
  },
1331
1251
  {
1332
- type: "component",
1333
- name: "plasmic-antd5-form-item",
1334
- props: {
1335
- noLabel: true,
1336
- children: {
1337
- type: "component",
1338
- name: "plasmic-antd5-button",
1339
- props: {
1340
- children: {
1341
- type: "text",
1342
- value: "Submit"
1343
- },
1344
- type: "primary",
1345
- submitsForm: true
1346
- }
1347
- }
1348
- }
1252
+ type: "item",
1253
+ value: "action2",
1254
+ label: "Action 2"
1349
1255
  }
1350
1256
  ]
1351
1257
  },
1352
- initialValues: {
1353
- type: "object"
1258
+ open: {
1259
+ type: "boolean",
1260
+ description: "Toggle visibility of dropdown menu in Plasmic Editor",
1261
+ editOnly: true,
1262
+ uncontrolledProp: "fakeOpen",
1263
+ defaultValueHint: false
1354
1264
  },
1355
- layout: {
1265
+ disabled: {
1266
+ type: "boolean",
1267
+ description: "Whether the dropdown menu is disabled",
1268
+ defaultValueHint: false
1269
+ },
1270
+ placement: {
1356
1271
  type: "choice",
1357
- options: ["horizontal", "vertical", "inline"],
1358
- defaultValue: "vertical"
1272
+ options: [
1273
+ "bottomLeft",
1274
+ "bottomCenter",
1275
+ "bottomRight",
1276
+ "topLeft",
1277
+ "topCenter",
1278
+ "topRight"
1279
+ ],
1280
+ description: "Placement of popup menu",
1281
+ defaultValueHint: "bottomLeft",
1282
+ advanced: true
1359
1283
  },
1360
- labelAlign: {
1284
+ trigger: {
1361
1285
  type: "choice",
1362
- options: ["left", "right"],
1363
- defaultValueHint: "right",
1364
- advanced: true,
1365
- hidden: (ps) => ps.layout !== "horizontal"
1286
+ options: [
1287
+ { value: "click", label: "Click" },
1288
+ { value: "hover", label: "Hover" },
1289
+ { value: "contextMenu", label: "Right-click" }
1290
+ ],
1291
+ description: "The trigger mode which executes the dropdown action",
1292
+ defaultValueHint: "click"
1366
1293
  },
1367
- labelCol: colProp(
1368
- "Label layout",
1369
- {
1370
- span: 8,
1371
- horizontalOnly: true
1372
- },
1373
- "Set the width and offset of the labels"
1374
- ),
1375
- wrapperCol: colProp(
1376
- "Control layout",
1377
- {
1378
- span: 16,
1379
- horizontalOnly: true
1380
- },
1381
- "Set the width and offset of the form controls"
1382
- ),
1383
- colon: {
1294
+ useMenuItemsSlot: {
1384
1295
  type: "boolean",
1385
- description: `Show a colon after labels by default (only for horizontal layout)`,
1386
- defaultValueHint: true,
1296
+ displayName: "Use menu items slot",
1387
1297
  advanced: true,
1388
- hidden: (props) => {
1389
- var _a;
1390
- return ((_a = props.layout) != null ? _a : "horizontal") !== "horizontal";
1391
- }
1298
+ description: "Instead of configuring a list of menu items, build the menu items using MenuItem elements. This gives you greater control over item styling."
1392
1299
  },
1393
- requiredMark: {
1394
- displayName: "Required/optional mark",
1395
- type: "choice",
1396
- options: [
1300
+ children: __spreadValues$9({
1301
+ type: "slot",
1302
+ defaultValue: [
1397
1303
  {
1398
- value: "optional",
1399
- label: "Indicate optional fields"
1400
- },
1401
- {
1402
- value: true,
1403
- label: "Indicate required fields with asterisk"
1404
- },
1405
- {
1406
- value: false,
1407
- label: "Show no indicators"
1408
- }
1409
- ],
1410
- advanced: true,
1411
- defaultValueHint: true
1412
- },
1413
- extendedOnValuesChange: {
1414
- type: "eventHandler",
1415
- displayName: "On values change",
1416
- argTypes: [
1417
- {
1418
- name: "changedValues",
1419
- type: "object"
1420
- },
1421
- {
1422
- name: "allValues",
1423
- type: "object"
1424
- }
1425
- ]
1426
- },
1427
- onFinish: {
1428
- type: "eventHandler",
1429
- displayName: "On submit",
1430
- argTypes: [
1431
- {
1432
- name: "values",
1433
- type: "object"
1304
+ type: "component",
1305
+ name: "plasmic-antd5-button",
1306
+ props: {
1307
+ children: {
1308
+ type: "text",
1309
+ value: "Dropdown"
1310
+ }
1311
+ }
1434
1312
  }
1435
1313
  ]
1314
+ }, { mergeWithParent: true }),
1315
+ arrow: {
1316
+ type: "boolean",
1317
+ description: "Whether the dropdown arrow should be visible",
1318
+ defaultValueHint: false,
1319
+ advanced: true
1436
1320
  },
1437
- onFinishFailed: {
1438
- // function({ values, errorFields, outOfDate })
1321
+ onAction: {
1439
1322
  type: "eventHandler",
1440
- displayName: "On invalid submit",
1441
- argTypes: [
1442
- {
1443
- name: "data",
1444
- type: "object"
1445
- }
1446
- ]
1447
- },
1448
- validateTrigger: {
1449
- type: "choice",
1450
- options: ["onSubmit", "onChange", "onBlur"],
1451
- multiSelect: true,
1452
- defaultValueHint: ["onChange"],
1453
- advanced: true
1454
- }
1455
- },
1456
- actions: COMMON_ACTIONS,
1457
- states: {
1458
- value: {
1459
- type: "readonly",
1460
- variableType: "object",
1461
- onChangeProp: "extendedOnValuesChange"
1323
+ argTypes: [{ name: "key", type: "string" }]
1462
1324
  }
1463
1325
  },
1464
- importPath: "@plasmicpkgs/antd5/skinny/registerForm",
1465
- importName: "FormWrapper"
1326
+ importPath: "@plasmicpkgs/antd5/skinny/registerDropdown",
1327
+ importName: "AntdDropdown"
1466
1328
  });
1467
1329
  }
1468
- function plasmicRulesToAntdRules(plasmicRules, label) {
1469
- var _a, _b, _c, _d, _e, _f, _g, _h, _i;
1470
- const effectiveLabel = label || "This field";
1471
- const rules = [];
1472
- for (const plasmicRule of plasmicRules) {
1473
- switch (plasmicRule.ruleType) {
1474
- case "enum":
1475
- rules.push({
1476
- type: "enum",
1477
- enum: (_b = (_a = plasmicRule.options) == null ? void 0 : _a.map((opt) => opt.value)) != null ? _b : [],
1478
- message: (_c = plasmicRule.message) != null ? _c : `${effectiveLabel} must be a valid value`
1479
- });
1480
- break;
1481
- case "required":
1482
- rules.push({
1483
- required: true,
1484
- message: (_d = plasmicRule.message) != null ? _d : `${effectiveLabel} is required`
1485
- });
1486
- break;
1487
- case "regex":
1488
- rules.push({
1489
- pattern: new RegExp((_e = plasmicRule.pattern) != null ? _e : ""),
1490
- message: (_f = plasmicRule.message) != null ? _f : `${effectiveLabel} must be a valid value`
1491
- });
1492
- break;
1493
- case "whitespace":
1494
- rules.push({
1495
- whitespace: true,
1496
- message: (_g = plasmicRule.message) != null ? _g : `${effectiveLabel} is required`
1497
- });
1498
- break;
1499
- case "min":
1500
- rules.push({
1501
- [plasmicRule.ruleType]: plasmicRule.length,
1502
- message: (_h = plasmicRule.message) != null ? _h : `${effectiveLabel} must be at least ${plasmicRule.length} characters`
1503
- });
1504
- break;
1505
- case "max":
1506
- rules.push({
1507
- [plasmicRule.ruleType]: plasmicRule.length,
1508
- message: (_i = plasmicRule.message) != null ? _i : `${effectiveLabel} must be at most ${plasmicRule.length} characters`
1509
- });
1510
- break;
1511
- case "advanced":
1512
- rules.push({
1513
- validator: (...args) => {
1514
- var _a2;
1515
- return ((_a2 = plasmicRule.custom) == null ? void 0 : _a2.apply(null, args)) ? Promise.resolve() : Promise.reject();
1516
- },
1517
- message: plasmicRule.message
1518
- });
1330
+
1331
+ var __defProp$8 = Object.defineProperty;
1332
+ var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
1333
+ var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
1334
+ var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
1335
+ var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1336
+ var __spreadValues$8 = (a, b) => {
1337
+ for (var prop in b || (b = {}))
1338
+ if (__hasOwnProp$8.call(b, prop))
1339
+ __defNormalProp$8(a, prop, b[prop]);
1340
+ if (__getOwnPropSymbols$8)
1341
+ for (var prop of __getOwnPropSymbols$8(b)) {
1342
+ if (__propIsEnum$8.call(b, prop))
1343
+ __defNormalProp$8(a, prop, b[prop]);
1519
1344
  }
1520
- }
1521
- return rules;
1522
- }
1523
- const useFormItemRelativeName = (name) => {
1524
- const pathCtx = React__default.default.useContext(PathContext);
1525
- return typeof name === "object" ? [...pathCtx.relativePath, ...name] : typeof name === "string" ? [...pathCtx.relativePath, name] : void 0;
1526
- };
1527
- const useFormItemFullName = (name) => {
1528
- const pathCtx = React__default.default.useContext(PathContext);
1529
- return typeof name === "object" ? [...pathCtx.fullPath, ...name] : typeof name === "string" ? [...pathCtx.fullPath, name] : void 0;
1345
+ return a;
1530
1346
  };
1531
- function useFormInstanceMaybe() {
1532
- return antd.Form.useFormInstance();
1347
+ const isBrowser = typeof window !== "undefined";
1348
+ const NONE = Symbol("NONE");
1349
+ isBrowser ? React__default.default.useLayoutEffect : React__default.default.useEffect;
1350
+ function mergeProps(props, ...restProps) {
1351
+ if (restProps.every((rest) => Object.keys(rest).length === 0)) {
1352
+ return props;
1353
+ }
1354
+ const result = __spreadValues$8({}, props);
1355
+ for (const rest of restProps) {
1356
+ for (const key of Object.keys(rest)) {
1357
+ result[key] = mergePropVals(key, result[key], rest[key]);
1358
+ }
1359
+ }
1360
+ return result;
1533
1361
  }
1534
- function FormItemWrapper(props) {
1535
- var _b;
1536
- const _a = props, {
1537
- rules: plasmicRules,
1538
- description,
1539
- noLabel,
1540
- name,
1541
- hideValidationMessage,
1542
- customizeProps,
1543
- setControlContextData,
1544
- alignLabellessWithControls = true
1545
- } = _a, rest = __objRest$5(_a, [
1546
- "rules",
1547
- "description",
1548
- "noLabel",
1549
- "name",
1550
- "hideValidationMessage",
1551
- "customizeProps",
1552
- "setControlContextData",
1553
- "alignLabellessWithControls"
1554
- ]);
1555
- const relativeFormItemName = useFormItemRelativeName(name);
1556
- const fullFormItemName = useFormItemFullName(name);
1557
- const bestEffortLabel = !noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
1558
- const rules = plasmicRules ? plasmicRulesToAntdRules(
1559
- plasmicRules,
1560
- typeof bestEffortLabel === "number" ? "" + bestEffortLabel : bestEffortLabel
1561
- ) : void 0;
1562
- const layoutContext = React__default.default.useContext(FormLayoutContext);
1563
- const inCanvas = !!host.usePlasmicCanvasContext();
1564
- if (inCanvas) {
1565
- const form = useFormInstanceMaybe();
1566
- const prevPropValues = React__default.default.useRef({
1567
- initialValue: props.initialValue,
1568
- name: props.name
1569
- });
1570
- const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
1571
- const { fireOnValuesChange, forceRemount } = internalFormCtx != null ? internalFormCtx : {};
1572
- (_b = props.setControlContextData) == null ? void 0 : _b.call(props, {
1573
- internalFormCtx
1574
- });
1575
- React__default.default.useEffect(() => {
1576
- if (prevPropValues.current.name !== props.name) {
1577
- forceRemount == null ? void 0 : forceRemount();
1578
- }
1579
- if (!fullFormItemName || (form == null ? void 0 : form.getFieldValue(fullFormItemName)) !== prevPropValues.current.initialValue) {
1580
- return;
1581
- }
1582
- form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
1583
- prevPropValues.current.initialValue = props.initialValue;
1584
- fireOnValuesChange == null ? void 0 : fireOnValuesChange();
1585
- }, [form, props.initialValue, fullFormItemName]);
1362
+ function updateRef(ref, value) {
1363
+ if (!ref) {
1364
+ return;
1365
+ }
1366
+ if (typeof ref === "function") {
1367
+ ref(value);
1368
+ } else {
1369
+ if (!Object.isFrozen(ref)) {
1370
+ ref.current = value;
1371
+ }
1586
1372
  }
1587
- return /* @__PURE__ */ React__default.default.createElement(
1588
- FormItem,
1589
- __spreadProps$5(__spreadValues$6({}, rest), {
1590
- label: noLabel ? void 0 : props.label,
1591
- name: relativeFormItemName,
1592
- rules,
1593
- extra: description,
1594
- help: hideValidationMessage ? "" : props.help,
1595
- colon: noLabel ? false : void 0,
1596
- wrapperCol: (layoutContext == null ? void 0 : layoutContext.layout) === "horizontal" && noLabel && alignLabellessWithControls && layoutContext.labelSpan ? { offset: layoutContext.labelSpan } : void 0
1597
- }),
1598
- props.customizeProps ? /* @__PURE__ */ React__default.default.createElement(FormItemForwarder, { formItemProps: props }) : props.children
1599
- );
1600
1373
  }
1601
- function FormItemForwarder(_a) {
1602
- var _b = _a, { formItemProps } = _b, props = __objRest$5(_b, ["formItemProps"]);
1603
- var _a2;
1604
- const status = antd.Form.Item.useStatus();
1605
- const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
1606
- const data = {
1607
- status: status.status
1374
+ function mergeRefs(...refs) {
1375
+ return (value) => {
1376
+ for (const ref of refs) {
1377
+ updateRef(ref, value);
1378
+ }
1608
1379
  };
1609
- (_a2 = props.setControlContextData) == null ? void 0 : _a2.call(props, {
1610
- internalFormCtx,
1611
- status
1612
- });
1613
- return React__default.default.Children.map(formItemProps.children, (child, i) => {
1614
- var _a3;
1615
- const baseProps = __spreadValues$6(__spreadValues$6({}, (_a3 = child.props) != null ? _a3 : {}), props);
1616
- return i === 0 && React.isValidElement(child) ? React.cloneElement(
1617
- child,
1618
- mergeProps(baseProps, formItemProps.customizeProps(data, baseProps))
1619
- ) : child;
1620
- });
1621
1380
  }
1622
- function registerFormItem(loader) {
1623
- registerComponentHelper(loader, FormItemWrapper, {
1624
- name: "plasmic-antd5-form-item",
1625
- displayName: "Form Item",
1626
- parentComponentName: "plasmic-antd5-form",
1627
- defaultStyles: {
1628
- marginBottom: "24px",
1629
- width: "stretch"
1630
- },
1631
- props: {
1632
- label: {
1633
- type: "slot",
1634
- defaultValue: {
1635
- type: "text",
1636
- value: "Label"
1637
- },
1638
- hidden: (ps) => !!ps.noLabel
1639
- },
1640
- children: {
1641
- type: "slot",
1642
- defaultValue: {
1643
- type: "component",
1644
- name: "plasmic-antd5-input"
1645
- }
1381
+ function mergePropVals(name, val1, val2) {
1382
+ if (val1 === NONE || val2 === NONE) {
1383
+ return null;
1384
+ } else if (val1 == null) {
1385
+ return val2;
1386
+ } else if (val2 == null) {
1387
+ return val1;
1388
+ } else if (name === "className") {
1389
+ return classNames__default.default(val1, val2);
1390
+ } else if (name === "style") {
1391
+ return __spreadValues$8(__spreadValues$8({}, val1), val2);
1392
+ } else if (name === "ref") {
1393
+ return mergeRefs(val1, val2);
1394
+ } else if (typeof val1 !== typeof val2) {
1395
+ return val2;
1396
+ } else if (name.startsWith("on") && typeof val1 === "function") {
1397
+ return (...args) => {
1398
+ let res;
1399
+ if (typeof val1 === "function") {
1400
+ res = val1(...args);
1401
+ }
1402
+ if (typeof val2 === "function") {
1403
+ res = val2(...args);
1404
+ }
1405
+ return res;
1406
+ };
1407
+ } else {
1408
+ return val2;
1409
+ }
1410
+ }
1411
+
1412
+ var __defProp$7 = Object.defineProperty;
1413
+ var __defProps$5 = Object.defineProperties;
1414
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
1415
+ var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
1416
+ var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
1417
+ var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
1418
+ var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1419
+ var __spreadValues$7 = (a, b) => {
1420
+ for (var prop in b || (b = {}))
1421
+ if (__hasOwnProp$7.call(b, prop))
1422
+ __defNormalProp$7(a, prop, b[prop]);
1423
+ if (__getOwnPropSymbols$7)
1424
+ for (var prop of __getOwnPropSymbols$7(b)) {
1425
+ if (__propIsEnum$7.call(b, prop))
1426
+ __defNormalProp$7(a, prop, b[prop]);
1427
+ }
1428
+ return a;
1429
+ };
1430
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
1431
+ const AntdInput = antd.Input;
1432
+ const AntdTextArea = antd.Input.TextArea;
1433
+ const AntdPassword = antd.Input.Password;
1434
+ const AntdInputNumber = antd.InputNumber;
1435
+ const inputHelpers = {
1436
+ states: {
1437
+ value: {
1438
+ onChangeArgsToValue: (e) => {
1439
+ return e.target.value;
1440
+ }
1441
+ }
1442
+ }
1443
+ };
1444
+ const COMMON_HELPERS_CONFIG = {
1445
+ helpers: inputHelpers,
1446
+ importName: "inputHelpers",
1447
+ importPath: "@plasmicpkgs/antd5/skinny/registerInput"
1448
+ };
1449
+ const COMMON_STATES = {
1450
+ value: {
1451
+ type: "writable",
1452
+ valueProp: "value",
1453
+ variableType: "text",
1454
+ onChangeProp: "onChange"
1455
+ }
1456
+ };
1457
+ const COMMON_DECORATOR_PROPS = {
1458
+ prefix: {
1459
+ type: "slot",
1460
+ hidePlaceholder: true
1461
+ },
1462
+ suffix: {
1463
+ type: "slot",
1464
+ hidePlaceholder: true
1465
+ },
1466
+ addonAfter: {
1467
+ type: "slot",
1468
+ hidePlaceholder: true
1469
+ },
1470
+ addonBefore: {
1471
+ type: "slot",
1472
+ hidePlaceholder: true
1473
+ }
1474
+ };
1475
+ const COMMON_ADVANCED_PROPS = {
1476
+ maxLength: {
1477
+ type: "number",
1478
+ advanced: true
1479
+ },
1480
+ bordered: {
1481
+ type: "boolean",
1482
+ advanced: true,
1483
+ defaultValueHint: true
1484
+ },
1485
+ allowClear: {
1486
+ type: "boolean",
1487
+ advanced: true
1488
+ },
1489
+ autoFocus: {
1490
+ type: "boolean",
1491
+ advanced: true
1492
+ },
1493
+ readOnly: {
1494
+ type: "boolean",
1495
+ advanced: true
1496
+ }
1497
+ };
1498
+ const COMMON_EVENT_HANDLERS = {
1499
+ onChange: {
1500
+ type: "eventHandler",
1501
+ argTypes: [
1502
+ {
1503
+ name: "event",
1504
+ type: "object"
1505
+ }
1506
+ ]
1507
+ },
1508
+ onPressEnter: {
1509
+ type: "eventHandler",
1510
+ argTypes: [
1511
+ {
1512
+ name: "event",
1513
+ type: "object"
1514
+ }
1515
+ ]
1516
+ }
1517
+ };
1518
+ const inputComponentName = "plasmic-antd5-input";
1519
+ function registerInput(loader) {
1520
+ registerComponentHelper(loader, AntdInput, __spreadProps$5(__spreadValues$7({
1521
+ name: inputComponentName,
1522
+ displayName: "Input",
1523
+ props: __spreadValues$7(__spreadValues$7(__spreadValues$7({
1524
+ value: {
1525
+ type: "string",
1526
+ hidden: (ps) => !!ps.__plasmicFormField
1646
1527
  },
1647
- name: {
1528
+ placeholder: {
1648
1529
  type: "string"
1649
1530
  },
1650
- initialValue: {
1651
- type: "string"
1531
+ size: {
1532
+ type: "choice",
1533
+ options: ["large", "middle", "small"]
1652
1534
  },
1653
- rules: {
1654
- type: "formValidationRules"
1535
+ disabled: {
1536
+ type: "boolean"
1655
1537
  },
1656
- valuePropName: {
1538
+ type: {
1539
+ type: "choice",
1540
+ options: [
1541
+ "text",
1542
+ "password",
1543
+ "number",
1544
+ "date",
1545
+ "datetime-local",
1546
+ "time",
1547
+ "email",
1548
+ "tel",
1549
+ "hidden"
1550
+ ],
1551
+ defaultValueHint: "text"
1552
+ }
1553
+ }, COMMON_ADVANCED_PROPS), COMMON_DECORATOR_PROPS), COMMON_EVENT_HANDLERS),
1554
+ states: __spreadValues$7({}, COMMON_STATES)
1555
+ }, { trapsSelection: true }), {
1556
+ componentHelpers: COMMON_HELPERS_CONFIG,
1557
+ importPath: "@plasmicpkgs/antd5/skinny/registerInput",
1558
+ importName: "AntdInput"
1559
+ }));
1560
+ }
1561
+ const textAreaComponentName = "plasmic-antd5-textarea";
1562
+ function registerTextArea(loader) {
1563
+ registerComponentHelper(loader, AntdTextArea, {
1564
+ name: textAreaComponentName,
1565
+ parentComponentName: inputComponentName,
1566
+ displayName: "Text Area",
1567
+ props: __spreadValues$7({
1568
+ value: {
1657
1569
  type: "string",
1658
- advanced: true,
1659
- defaultValueHint: "value",
1660
- description: "The prop name for specifying the value of the form control component"
1570
+ hidden: (ps) => !!ps.__plasmicFormField
1661
1571
  },
1662
- noLabel: {
1663
- type: "boolean",
1664
- advanced: true
1572
+ placeholder: {
1573
+ type: "string"
1665
1574
  },
1666
- alignLabellessWithControls: {
1667
- type: "boolean",
1668
- displayName: "Align with controls?",
1669
- description: "Aligns the content with form controls in the grid",
1670
- hidden: (ps, ctx) => {
1671
- var _a;
1672
- return !ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
1673
- },
1674
- defaultValueHint: true
1575
+ disabled: {
1576
+ type: "boolean"
1675
1577
  },
1676
- colon: {
1578
+ maxLength: {
1579
+ type: "number",
1580
+ advanced: true
1581
+ },
1582
+ bordered: {
1677
1583
  type: "boolean",
1678
- defaultValueHint: true,
1679
1584
  advanced: true,
1680
- hidden: () => true
1585
+ defaultValueHint: true
1586
+ }
1587
+ }, COMMON_EVENT_HANDLERS),
1588
+ states: __spreadValues$7({}, COMMON_STATES),
1589
+ componentHelpers: COMMON_HELPERS_CONFIG,
1590
+ importPath: "@plasmicpkgs/antd5/skinny/registerInput",
1591
+ importName: "AntdTextArea"
1592
+ });
1593
+ }
1594
+ const passwordComponentName = "plasmic-antd5-input-password";
1595
+ function registerPasswordInput(loader) {
1596
+ registerComponentHelper(loader, AntdPassword, {
1597
+ name: passwordComponentName,
1598
+ parentComponentName: inputComponentName,
1599
+ displayName: "Password Input",
1600
+ props: __spreadValues$7({
1601
+ value: {
1602
+ type: "string",
1603
+ hidden: (ps) => !!ps.__plasmicFormField
1681
1604
  },
1682
- labelAlign: {
1683
- type: "choice",
1684
- options: ["left", "right"],
1685
- advanced: true,
1686
- hidden: (ps, ctx) => {
1687
- var _a;
1688
- return !!ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
1689
- }
1605
+ placeholder: {
1606
+ type: "string"
1690
1607
  },
1691
- hidden: {
1692
- type: "boolean",
1693
- advanced: true
1608
+ disabled: {
1609
+ type: "boolean"
1694
1610
  },
1695
- validateTrigger: {
1696
- type: "choice",
1697
- options: ["onSubmit", "onChange", "onBlur"],
1698
- multiSelect: true,
1611
+ maxLength: {
1612
+ type: "number",
1699
1613
  advanced: true
1700
1614
  },
1701
- shouldUpdate: {
1615
+ bordered: {
1702
1616
  type: "boolean",
1703
1617
  advanced: true,
1704
- displayName: "Always re-render",
1705
- description: "Form items normally only re-render when the corresponding form value changes, for performance. This forces it to always re-render."
1618
+ defaultValueHint: true
1619
+ }
1620
+ }, COMMON_EVENT_HANDLERS),
1621
+ states: __spreadValues$7({}, COMMON_STATES),
1622
+ componentHelpers: COMMON_HELPERS_CONFIG,
1623
+ importPath: "@plasmicpkgs/antd5/skinny/registerInput",
1624
+ importName: "AntdPassword"
1625
+ });
1626
+ }
1627
+ const inputNumberComponentName = "plasmic-antd5-input-number";
1628
+ function registerNumberInput(loader) {
1629
+ registerComponentHelper(loader, AntdInputNumber, __spreadProps$5(__spreadValues$7({
1630
+ name: inputNumberComponentName,
1631
+ parentComponentName: inputComponentName,
1632
+ displayName: "Number Input",
1633
+ props: __spreadProps$5(__spreadValues$7(__spreadValues$7(__spreadValues$7({
1634
+ value: {
1635
+ type: "number",
1636
+ hidden: (ps) => !!ps.__plasmicFormField
1706
1637
  },
1707
- dependencies: {
1708
- type: "array",
1709
- advanced: true,
1710
- displayName: "Dependencies",
1711
- description: "Form items can depend on other form items. This forces it to reevaluate the validation rules when the other form item changes."
1638
+ placeholder: {
1639
+ type: "string"
1640
+ },
1641
+ disabled: {
1642
+ type: "boolean"
1643
+ },
1644
+ max: {
1645
+ type: "number"
1646
+ },
1647
+ min: {
1648
+ type: "number"
1649
+ },
1650
+ step: {
1651
+ type: "number",
1652
+ helpText: "Increment or decrement step"
1653
+ },
1654
+ controls: {
1655
+ type: "boolean",
1656
+ displayName: "Show add/minus controls?",
1657
+ advanced: true
1658
+ }
1659
+ }, COMMON_DECORATOR_PROPS), COMMON_ADVANCED_PROPS), COMMON_EVENT_HANDLERS), {
1660
+ // onChange directly called with the number
1661
+ onChange: {
1662
+ type: "eventHandler",
1663
+ argTypes: [
1664
+ {
1665
+ name: "value",
1666
+ type: "number"
1667
+ }
1668
+ ]
1669
+ }
1670
+ }),
1671
+ states: __spreadValues$7({}, COMMON_STATES)
1672
+ }, { trapsSelection: true }), {
1673
+ // don't need component helpers
1674
+ importPath: "@plasmicpkgs/antd5/skinny/registerInput",
1675
+ importName: "AntdInputNumber"
1676
+ }));
1677
+ }
1678
+
1679
+ var __defProp$6 = Object.defineProperty;
1680
+ var __defProps$4 = Object.defineProperties;
1681
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
1682
+ var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
1683
+ var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
1684
+ var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
1685
+ var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1686
+ var __spreadValues$6 = (a, b) => {
1687
+ for (var prop in b || (b = {}))
1688
+ if (__hasOwnProp$6.call(b, prop))
1689
+ __defNormalProp$6(a, prop, b[prop]);
1690
+ if (__getOwnPropSymbols$6)
1691
+ for (var prop of __getOwnPropSymbols$6(b)) {
1692
+ if (__propIsEnum$6.call(b, prop))
1693
+ __defNormalProp$6(a, prop, b[prop]);
1694
+ }
1695
+ return a;
1696
+ };
1697
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
1698
+ var __objRest$5 = (source, exclude) => {
1699
+ var target = {};
1700
+ for (var prop in source)
1701
+ if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
1702
+ target[prop] = source[prop];
1703
+ if (source != null && __getOwnPropSymbols$6)
1704
+ for (var prop of __getOwnPropSymbols$6(source)) {
1705
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
1706
+ target[prop] = source[prop];
1707
+ }
1708
+ return target;
1709
+ };
1710
+ const RadioGroup = antd.Radio.Group;
1711
+ const AntdRadio = antd.Radio;
1712
+ const AntdRadioButton = antd.Radio.Button;
1713
+ function AntdRadioGroup(props) {
1714
+ const _a = props, { onChange, useChildren } = _a, rest = __objRest$5(_a, ["onChange", "useChildren"]);
1715
+ const wrappedOnChange = React__default.default.useMemo(() => {
1716
+ if (onChange) {
1717
+ return (event) => onChange(event.target.value);
1718
+ } else {
1719
+ return void 0;
1720
+ }
1721
+ }, [onChange]);
1722
+ return /* @__PURE__ */ React__default.default.createElement(
1723
+ RadioGroup,
1724
+ __spreadProps$4(__spreadValues$6({}, rest), {
1725
+ onChange: wrappedOnChange,
1726
+ options: useChildren ? void 0 : rest.options
1727
+ })
1728
+ );
1729
+ }
1730
+ const radioComponentName = "plasmic-antd5-radio";
1731
+ const radioButtonComponentName = "plasmic-antd5-radio-button";
1732
+ const radioGroupComponentName = "plasmic-antd5-radio-group";
1733
+ function registerRadio(loader) {
1734
+ registerComponentHelper(loader, AntdRadio, {
1735
+ name: radioComponentName,
1736
+ displayName: "Radio",
1737
+ props: {
1738
+ value: {
1739
+ type: "string",
1740
+ description: "The radio option value"
1741
+ },
1742
+ disabled: {
1743
+ type: "boolean",
1744
+ defaultValueHint: false
1712
1745
  },
1713
- hideValidationMessage: {
1746
+ autoFocus: {
1714
1747
  type: "boolean",
1715
- displayName: "Hide validation message?",
1716
- description: "If true, will hide the validation error message",
1748
+ description: "If focused when first shown",
1717
1749
  defaultValueHint: false,
1718
1750
  advanced: true
1719
1751
  },
1720
- description: {
1752
+ children: __spreadValues$6({
1721
1753
  type: "slot",
1722
- hidePlaceholder: true
1754
+ defaultValue: [
1755
+ {
1756
+ type: "text",
1757
+ value: "Radio"
1758
+ }
1759
+ ]
1760
+ }, { mergeWithParent: true })
1761
+ },
1762
+ importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
1763
+ importName: "AntdRadio",
1764
+ parentComponentName: radioGroupComponentName
1765
+ });
1766
+ registerComponentHelper(loader, AntdRadioButton, {
1767
+ name: radioButtonComponentName,
1768
+ displayName: "Radio Button",
1769
+ props: {
1770
+ value: {
1771
+ type: "string",
1772
+ description: "The radio option value"
1723
1773
  },
1724
- customizeProps: {
1725
- type: "function",
1726
- description: "Customize the props passed into the wrapped field component. Takes the current status ('success', 'warning', 'error', or 'validating').)",
1727
- argNames: ["fieldData"],
1728
- argValues: (_ps, ctx) => {
1729
- var _a;
1730
- return [
1731
- {
1732
- status: (_a = ctx == null ? void 0 : ctx.status) == null ? void 0 : _a.status
1733
- }
1734
- ];
1735
- },
1736
- advanced: true
1774
+ disabled: {
1775
+ type: "boolean",
1776
+ defaultValueHint: false
1737
1777
  },
1738
- noStyle: {
1778
+ autoFocus: {
1739
1779
  type: "boolean",
1740
- displayName: "Field control only",
1741
- description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
1780
+ description: "If focused when first shown",
1781
+ defaultValueHint: false,
1742
1782
  advanced: true
1743
- }
1744
- },
1745
- importPath: "@plasmicpkgs/antd5/skinny/registerForm",
1746
- importName: "FormItemWrapper",
1747
- templates: {
1748
- Text: {
1749
- props: {
1750
- children: {
1751
- type: "component",
1752
- name: "plasmic-antd5-input"
1753
- }
1754
- }
1755
1783
  },
1756
- "Long Text": {
1757
- props: {
1758
- children: {
1759
- type: "component",
1760
- name: "plasmic-antd5-textarea"
1784
+ children: __spreadValues$6({
1785
+ type: "slot",
1786
+ defaultValue: [
1787
+ {
1788
+ type: "text",
1789
+ value: "Radio"
1761
1790
  }
1762
- }
1763
- },
1764
- "Select dropdown": {
1765
- props: {
1766
- children: {
1767
- type: "component",
1768
- name: "plasmic-antd5-select"
1791
+ ]
1792
+ }, { mergeWithParent: true })
1793
+ },
1794
+ importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
1795
+ importName: "AntdRadioButton",
1796
+ parentComponentName: radioGroupComponentName
1797
+ });
1798
+ registerComponentHelper(loader, AntdRadioGroup, __spreadValues$6({
1799
+ name: radioGroupComponentName,
1800
+ displayName: "Radio Group",
1801
+ props: {
1802
+ options: {
1803
+ type: "array",
1804
+ hidden: (ps) => !!ps.useChildren,
1805
+ itemType: {
1806
+ type: "object",
1807
+ nameFunc: (item) => item.label || item.value,
1808
+ fields: {
1809
+ value: "string",
1810
+ label: "string"
1769
1811
  }
1770
- }
1771
- },
1772
- Number: {
1773
- props: {
1774
- children: {
1775
- type: "component",
1776
- name: "plasmic-antd5-input-number"
1812
+ },
1813
+ defaultValue: [
1814
+ {
1815
+ value: "option1",
1816
+ label: "Option 1"
1817
+ },
1818
+ {
1819
+ value: "option2",
1820
+ label: "Option 2"
1777
1821
  }
1778
- }
1822
+ ]
1779
1823
  },
1780
- Checkbox: {
1781
- props: {
1782
- children: {
1783
- type: "component",
1784
- name: "plasmic-antd5-checkbox"
1785
- },
1786
- valuePropName: "checked",
1787
- noLabel: true
1788
- }
1824
+ optionType: {
1825
+ type: "choice",
1826
+ options: [
1827
+ { value: "default", label: "Radio" },
1828
+ { value: "button", label: "Button" }
1829
+ ],
1830
+ hidden: (ps) => !!ps.useChildren,
1831
+ defaultValueHint: "default"
1789
1832
  },
1790
- Radios: {
1791
- props: {
1792
- children: {
1793
- type: "component",
1794
- name: "plasmic-antd5-radio-group"
1833
+ value: {
1834
+ type: "choice",
1835
+ editOnly: true,
1836
+ uncontrolledProp: "defaultValue",
1837
+ description: "Default selected value",
1838
+ options: (ps) => {
1839
+ var _a;
1840
+ if (ps.useChildren) {
1841
+ const options = /* @__PURE__ */ new Set();
1842
+ traverseReactEltTree(ps.children, (elt) => {
1843
+ var _a2;
1844
+ if (typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
1845
+ options.add(elt.props.value);
1846
+ }
1847
+ });
1848
+ return Array.from(options.keys());
1849
+ } else {
1850
+ return (_a = ps.options) != null ? _a : [];
1795
1851
  }
1796
- }
1852
+ },
1853
+ hidden: (ps) => !!ps.__plasmicFormField
1797
1854
  },
1798
- Password: {
1799
- props: {
1800
- children: {
1801
- type: "component",
1802
- name: "plasmic-antd5-input-password"
1803
- }
1804
- }
1855
+ disabled: {
1856
+ type: "boolean",
1857
+ description: "Disables all radios",
1858
+ defaultValueHint: false
1805
1859
  },
1806
- "Submit button": {
1807
- props: {
1808
- children: {
1860
+ useChildren: {
1861
+ displayName: "Use slot",
1862
+ type: "boolean",
1863
+ defaultValueHint: false,
1864
+ advanced: true,
1865
+ description: "Instead of configuring a list of options, customize the contents of the RadioGroup by dragging and dropping Radio in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Radio and RadioButton."
1866
+ },
1867
+ children: {
1868
+ type: "slot",
1869
+ allowedComponents: [
1870
+ "plasmic-antd5-radio",
1871
+ "plasmic-antd5-radio-button"
1872
+ ],
1873
+ defaultValue: [
1874
+ {
1809
1875
  type: "component",
1810
- name: "plasmic-antd5-button",
1876
+ name: "plasmic-antd5-radio",
1811
1877
  props: {
1812
- type: "primary"
1878
+ value: "op1",
1879
+ children: {
1880
+ type: "text",
1881
+ value: "Option 1"
1882
+ }
1813
1883
  }
1814
1884
  },
1815
- noLabel: true
1816
- }
1817
- }
1818
- }
1819
- });
1820
- }
1821
- function FormGroup(props) {
1822
- const pathCtx = React__default.default.useContext(PathContext);
1823
- return /* @__PURE__ */ React__default.default.createElement(
1824
- PathContext.Provider,
1825
- {
1826
- value: {
1827
- relativePath: [...pathCtx.relativePath, props.name],
1828
- fullPath: [...pathCtx.fullPath, props.name]
1829
- }
1830
- },
1831
- props.children
1832
- );
1833
- }
1834
- function registerFormGroup(loader) {
1835
- registerComponentHelper(loader, FormGroup, {
1836
- name: "plasmic-antd5-form-group",
1837
- displayName: "Form Group",
1838
- parentComponentName: "plasmic-antd5-form",
1839
- actions: COMMON_ACTIONS,
1840
- props: {
1841
- name: {
1842
- type: "string"
1843
- },
1844
- children: {
1845
- type: "slot"
1846
- }
1847
- },
1848
- importPath: "@plasmicpkgs/antd5/skinny/registerForm",
1849
- importName: "FormGroup"
1850
- });
1851
- }
1852
- const FormListWrapper = React__default.default.forwardRef(function FormListWrapper2(props, ref) {
1853
- var _a;
1854
- const relativeFormItemName = useFormItemRelativeName(props.name);
1855
- const fullFormItemName = useFormItemFullName(props.name);
1856
- const operationsRef = React__default.default.useRef(
1857
- void 0
1858
- );
1859
- React__default.default.useImperativeHandle(
1860
- ref,
1861
- () => ({
1862
- add(defaultValue, insertIndex) {
1863
- if (operationsRef.current) {
1864
- const { add } = operationsRef.current[1];
1865
- add(defaultValue, insertIndex);
1866
- }
1867
- },
1868
- remove(index) {
1869
- if (operationsRef.current) {
1870
- const { remove } = operationsRef.current[1];
1871
- remove(index);
1872
- }
1873
- },
1874
- move(from, to) {
1875
- if (operationsRef.current) {
1876
- const { move } = operationsRef.current[1];
1877
- move(from, to);
1878
- }
1879
- }
1880
- }),
1881
- [operationsRef]
1882
- );
1883
- const inCanvas = !!host.usePlasmicCanvasContext();
1884
- if (inCanvas) {
1885
- const form = useFormInstanceMaybe();
1886
- const prevPropValues = React__default.default.useRef({
1887
- initialValue: props.initialValue,
1888
- name: props.name
1889
- });
1890
- const { fireOnValuesChange, forceRemount } = (_a = React__default.default.useContext(InternalFormInstanceContext)) != null ? _a : {};
1891
- React__default.default.useEffect(() => {
1892
- if (prevPropValues.current.name !== props.name) {
1893
- forceRemount == null ? void 0 : forceRemount();
1894
- }
1895
- if (fullFormItemName) {
1896
- form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
1897
- prevPropValues.current.initialValue = props.initialValue;
1898
- fireOnValuesChange == null ? void 0 : fireOnValuesChange();
1899
- }
1900
- }, [props.initialValue, fullFormItemName]);
1901
- }
1902
- return /* @__PURE__ */ React__default.default.createElement(FormList, __spreadProps$5(__spreadValues$6({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
1903
- operationsRef.current = args;
1904
- return args[0].map((field, index) => /* @__PURE__ */ React__default.default.createElement(
1905
- PathContext.Provider,
1906
- {
1907
- value: {
1908
- relativePath: [field.name],
1909
- fullPath: [...fullFormItemName != null ? fullFormItemName : [], field.name]
1910
- }
1911
- },
1912
- /* @__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)))
1913
- ));
1914
- });
1915
- });
1916
- function registerFormList(loader) {
1917
- registerComponentHelper(loader, FormListWrapper, {
1918
- name: "plasmic-antd5-form-list",
1919
- parentComponentName: "plasmic-antd5-form",
1920
- displayName: "Form List",
1921
- actions: COMMON_ACTIONS,
1922
- props: {
1923
- children: {
1924
- type: "slot",
1925
- defaultValue: [
1926
1885
  {
1927
- type: "hbox",
1928
- children: [
1929
- {
1930
- type: "component",
1931
- name: "plasmic-antd5-form-item",
1932
- props: {
1933
- name: "firstName",
1934
- label: {
1935
- type: "text",
1936
- value: "First name"
1937
- },
1938
- children: {
1939
- type: "component",
1940
- name: "plasmic-antd5-input"
1941
- }
1942
- }
1943
- },
1944
- {
1945
- type: "component",
1946
- name: "plasmic-antd5-form-item",
1947
- props: {
1948
- name: "lastName",
1949
- label: {
1950
- type: "text",
1951
- value: "Last name"
1952
- },
1953
- children: {
1954
- type: "component",
1955
- name: "plasmic-antd5-input"
1956
- }
1957
- }
1886
+ type: "component",
1887
+ name: "plasmic-antd5-radio",
1888
+ props: {
1889
+ value: "op2",
1890
+ children: {
1891
+ type: "text",
1892
+ value: "Option 2"
1958
1893
  }
1959
- ]
1894
+ }
1960
1895
  }
1961
1896
  ]
1962
1897
  },
1963
- name: {
1964
- type: "string",
1965
- defaultValue: "guests"
1966
- },
1967
- initialValue: {
1968
- type: "array",
1969
- defaultValue: [
1970
- {
1971
- firstName: "Jane",
1972
- lastName: "Doe"
1973
- },
1974
- {
1975
- firstName: "John",
1976
- lastName: "Smith"
1977
- }
1978
- ]
1898
+ onChange: {
1899
+ type: "eventHandler",
1900
+ argTypes: [{ name: "value", type: "string" }]
1979
1901
  }
1980
1902
  },
1981
- refActions: {
1982
- add: {
1983
- displayName: "Add an item",
1984
- argTypes: [
1985
- {
1986
- name: "defaultValue",
1987
- displayName: "Default value",
1988
- type: "object"
1989
- },
1990
- {
1991
- name: "insertIndex",
1992
- displayName: "Insert index",
1993
- type: "number"
1994
- }
1995
- ]
1996
- },
1997
- remove: {
1998
- displayName: "Remove an item",
1999
- argTypes: [
2000
- {
2001
- name: "index",
2002
- displayName: "Index",
2003
- type: "number"
2004
- }
2005
- ]
2006
- },
2007
- move: {
2008
- displayName: "Move field",
2009
- argTypes: [
2010
- {
2011
- name: "from",
2012
- displayName: "From",
2013
- type: "number"
2014
- },
2015
- {
2016
- name: "to",
2017
- displayName: "To",
2018
- type: "number"
2019
- }
2020
- ]
1903
+ states: {
1904
+ value: {
1905
+ type: "writable",
1906
+ valueProp: "value",
1907
+ onChangeProp: "onChange",
1908
+ variableType: "text"
2021
1909
  }
2022
1910
  },
2023
- importPath: "@plasmicpkgs/antd5/skinny/registerForm",
2024
- importName: "FormListWrapper"
2025
- });
1911
+ importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
1912
+ importName: "AntdRadioGroup",
1913
+ defaultStyles: {
1914
+ layout: "hbox"
1915
+ }
1916
+ }, {
1917
+ trapsSelection: true
1918
+ }));
2026
1919
  }
2027
1920
 
2028
1921
  var __defProp$5 = Object.defineProperty;
2029
- var __defProps$4 = Object.defineProperties;
2030
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
1922
+ var __defProps$3 = Object.defineProperties;
1923
+ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
2031
1924
  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
2032
1925
  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
2033
1926
  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
@@ -2043,781 +1936,1481 @@ var __spreadValues$5 = (a, b) => {
2043
1936
  }
2044
1937
  return a;
2045
1938
  };
2046
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
2047
- const AntdInput = antd.Input;
2048
- const AntdTextArea = antd.Input.TextArea;
2049
- const AntdPassword = antd.Input.Password;
2050
- const AntdInputNumber = antd.InputNumber;
2051
- const inputHelpers = {
2052
- states: {
2053
- value: {
2054
- onChangeArgsToValue: (e) => {
2055
- return e.target.value;
2056
- }
1939
+ var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
1940
+ var __objRest$4 = (source, exclude) => {
1941
+ var target = {};
1942
+ for (var prop in source)
1943
+ if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
1944
+ target[prop] = source[prop];
1945
+ if (source != null && __getOwnPropSymbols$5)
1946
+ for (var prop of __getOwnPropSymbols$5(source)) {
1947
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
1948
+ target[prop] = source[prop];
2057
1949
  }
2058
- }
2059
- };
2060
- const COMMON_HELPERS_CONFIG = {
2061
- helpers: inputHelpers,
2062
- importName: "inputHelpers",
2063
- importPath: "@plasmicpkgs/antd5/skinny/registerInput"
2064
- };
2065
- const COMMON_STATES = {
2066
- value: {
2067
- type: "writable",
2068
- valueProp: "value",
2069
- variableType: "text",
2070
- onChangeProp: "onChange"
2071
- }
1950
+ return target;
2072
1951
  };
2073
- const COMMON_DECORATOR_PROPS = {
2074
- prefix: {
2075
- type: "slot",
2076
- hidePlaceholder: true
2077
- },
2078
- suffix: {
2079
- type: "slot",
2080
- hidePlaceholder: true
2081
- },
2082
- addonAfter: {
2083
- type: "slot",
2084
- hidePlaceholder: true
2085
- },
2086
- addonBefore: {
2087
- type: "slot",
2088
- hidePlaceholder: true
2089
- }
2090
- };
2091
- const COMMON_ADVANCED_PROPS = {
2092
- maxLength: {
2093
- type: "number",
2094
- advanced: true
2095
- },
2096
- bordered: {
2097
- type: "boolean",
2098
- advanced: true,
2099
- defaultValueHint: true
2100
- },
2101
- allowClear: {
2102
- type: "boolean",
2103
- advanced: true
2104
- },
2105
- autoFocus: {
2106
- type: "boolean",
2107
- advanced: true
2108
- },
2109
- readOnly: {
2110
- type: "boolean",
2111
- advanced: true
2112
- }
2113
- };
2114
- const COMMON_EVENT_HANDLERS = {
2115
- onChange: {
2116
- type: "eventHandler",
2117
- argTypes: [
2118
- {
2119
- name: "event",
2120
- type: "object"
2121
- }
2122
- ]
2123
- },
2124
- onPressEnter: {
2125
- type: "eventHandler",
2126
- argTypes: [
2127
- {
2128
- name: "event",
2129
- type: "object"
2130
- }
2131
- ]
1952
+ const AntdOption = antd.Select.Option;
1953
+ const AntdOptionGroup = antd.Select.OptGroup;
1954
+ function AntdSelect(props) {
1955
+ const _a = props, {
1956
+ popupClassName,
1957
+ popupScopeClassName,
1958
+ defaultStylesClassName,
1959
+ suffixIcon,
1960
+ mode,
1961
+ useChildren
1962
+ } = _a, rest = __objRest$4(_a, [
1963
+ "popupClassName",
1964
+ "popupScopeClassName",
1965
+ "defaultStylesClassName",
1966
+ "suffixIcon",
1967
+ "mode",
1968
+ "useChildren"
1969
+ ]);
1970
+ const curated = __spreadValues$5({}, rest);
1971
+ if (useChildren) {
1972
+ curated.options = void 0;
2132
1973
  }
2133
- };
2134
- function registerInput(loader) {
2135
- registerComponentHelper(loader, AntdInput, {
2136
- name: "plasmic-antd5-input",
2137
- displayName: "Input",
2138
- props: __spreadValues$5(__spreadValues$5(__spreadValues$5({
2139
- value: {
2140
- type: "string"
2141
- },
2142
- placholder: {
2143
- type: "string"
2144
- },
2145
- size: {
2146
- type: "choice",
2147
- options: ["large", "middle", "small"]
1974
+ return /* @__PURE__ */ React__default.default.createElement(
1975
+ antd.Select,
1976
+ __spreadValues$5(__spreadProps$3(__spreadValues$5({}, curated), {
1977
+ mode: !mode || mode === "single" ? void 0 : mode,
1978
+ popupClassName: `${defaultStylesClassName} ${popupScopeClassName} ${popupClassName}`
1979
+ }), suffixIcon && { suffixIcon })
1980
+ );
1981
+ }
1982
+ const selectComponentName = "plasmic-antd5-select";
1983
+ const optionComponentName = "plasmic-antd5-option";
1984
+ const optionGroupComponentName = "plasmic-antd5-option-group";
1985
+ function registerSelect(loader) {
1986
+ registerComponentHelper(loader, AntdSelect, __spreadProps$3(__spreadValues$5({
1987
+ name: selectComponentName,
1988
+ displayName: "Select",
1989
+ props: {
1990
+ options: {
1991
+ type: "array",
1992
+ hidden: (ps) => !!ps.useChildren,
1993
+ itemType: {
1994
+ type: "object",
1995
+ nameFunc: (item) => item.label || item.value,
1996
+ fields: {
1997
+ type: {
1998
+ type: "choice",
1999
+ options: [
2000
+ { value: "option", label: "Option" },
2001
+ { value: "option-group", label: "Option Group" }
2002
+ ],
2003
+ defaultValue: "option"
2004
+ },
2005
+ value: {
2006
+ type: "string",
2007
+ hidden: (ps) => ps.type !== "option"
2008
+ },
2009
+ label: "string",
2010
+ options: {
2011
+ type: "array",
2012
+ hidden: (ps) => {
2013
+ return ps.type !== "option-group";
2014
+ },
2015
+ itemType: {
2016
+ type: "object",
2017
+ nameFunc: (item) => item.label || item.value,
2018
+ fields: {
2019
+ value: "string",
2020
+ label: "string"
2021
+ }
2022
+ }
2023
+ }
2024
+ }
2025
+ },
2026
+ defaultValue: [
2027
+ {
2028
+ value: "option1",
2029
+ label: "Option 1"
2030
+ },
2031
+ {
2032
+ value: "option2",
2033
+ label: "Option 2"
2034
+ }
2035
+ ]
2148
2036
  },
2149
- disabled: {
2150
- type: "boolean"
2037
+ useChildren: {
2038
+ displayName: "Use slot",
2039
+ type: "boolean",
2040
+ defaultValueHint: false,
2041
+ advanced: true,
2042
+ description: "Instead of configuring a list of options, customize the contents of the Select by dragging and dropping options in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Options, and also use Option Groups."
2151
2043
  },
2152
- type: {
2153
- type: "choice",
2154
- options: [
2155
- "text",
2156
- "password",
2157
- "number",
2158
- "date",
2159
- "datetime-local",
2160
- "time",
2161
- "email",
2162
- "tel",
2163
- "hidden"
2044
+ children: {
2045
+ type: "slot",
2046
+ allowedComponents: [
2047
+ optionComponentName,
2048
+ optionGroupComponentName
2164
2049
  ],
2165
- defaultValueHint: "text"
2166
- }
2167
- }, COMMON_ADVANCED_PROPS), COMMON_DECORATOR_PROPS), COMMON_EVENT_HANDLERS),
2168
- states: __spreadValues$5({}, COMMON_STATES),
2169
- componentHelpers: COMMON_HELPERS_CONFIG,
2170
- importPath: "@plasmicpkgs/antd5/skinny/registerInput",
2171
- importName: "AntdInput"
2172
- });
2173
- }
2174
- function registerTextArea(loader) {
2175
- registerComponentHelper(loader, AntdTextArea, {
2176
- name: "plasmic-antd5-textarea",
2177
- parentComponentName: "plasmic-antd5-input",
2178
- displayName: "Text Area",
2179
- props: __spreadValues$5({
2180
- value: {
2181
- type: "string"
2182
- },
2183
- placholder: {
2184
- type: "string"
2050
+ hidden: (ps) => !ps.useChildren
2185
2051
  },
2186
- disabled: {
2187
- type: "boolean"
2052
+ placeholder: {
2053
+ type: "slot",
2054
+ defaultValue: "Select..."
2188
2055
  },
2189
- maxLength: {
2190
- type: "number",
2191
- advanced: true
2056
+ suffixIcon: {
2057
+ type: "slot",
2058
+ hidePlaceholder: true
2192
2059
  },
2193
- bordered: {
2060
+ open: {
2194
2061
  type: "boolean",
2195
- advanced: true,
2196
- defaultValueHint: true
2197
- }
2198
- }, COMMON_EVENT_HANDLERS),
2199
- states: __spreadValues$5({}, COMMON_STATES),
2200
- componentHelpers: COMMON_HELPERS_CONFIG,
2201
- importPath: "@plasmicpkgs/antd5/skinny/registerInput",
2202
- importName: "AntdTextArea"
2203
- });
2204
- }
2205
- function registerPasswordInput(loader) {
2206
- registerComponentHelper(loader, AntdPassword, {
2207
- name: "plasmic-antd5-input-password",
2208
- parentComponentName: "plasmic-antd5-input",
2209
- displayName: "Password Input",
2210
- props: __spreadValues$5({
2062
+ editOnly: true,
2063
+ uncontrolledProp: "defaultOpen"
2064
+ },
2211
2065
  value: {
2212
- type: "string"
2066
+ type: "choice",
2067
+ displayName: "Selected value",
2068
+ editOnly: true,
2069
+ uncontrolledProp: "defaultValue",
2070
+ description: "Initial selected option",
2071
+ multiSelect: (ps) => ps.mode === "multiple",
2072
+ options: (ps) => {
2073
+ var _a;
2074
+ const options = /* @__PURE__ */ new Set();
2075
+ if (!ps.useChildren) {
2076
+ const rec = (op) => {
2077
+ var _a2;
2078
+ if (typeof op === "string") {
2079
+ return [{ value: op, label: op }];
2080
+ } else if ("options" in op) {
2081
+ return ((_a2 = op.options) != null ? _a2 : []).flatMap((sub) => rec(sub));
2082
+ } else {
2083
+ return [{ value: op.value, label: op.label || op.value }];
2084
+ }
2085
+ };
2086
+ return ((_a = ps.options) != null ? _a : []).flatMap((o) => rec(o));
2087
+ } else {
2088
+ traverseReactEltTree(ps.children, (elt) => {
2089
+ var _a2;
2090
+ if ((elt == null ? void 0 : elt.type) === antd.Select.Option && typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
2091
+ options.add(elt.props.value);
2092
+ }
2093
+ });
2094
+ }
2095
+ return Array.from(options.keys());
2096
+ },
2097
+ hidden: (ps) => !!ps.__plasmicFormField
2213
2098
  },
2214
- placholder: {
2215
- type: "string"
2099
+ mode: {
2100
+ type: "choice",
2101
+ options: ["single", "multiple"],
2102
+ defaultValueHint: "single"
2103
+ },
2104
+ size: {
2105
+ type: "choice",
2106
+ options: ["small", "middle", "large"]
2216
2107
  },
2217
2108
  disabled: {
2218
- type: "boolean"
2109
+ type: "boolean",
2110
+ defaultValueHint: false
2219
2111
  },
2220
- maxLength: {
2221
- type: "number",
2112
+ showSearch: {
2113
+ type: "boolean",
2114
+ defaultValueHint: false,
2115
+ advanced: true
2116
+ },
2117
+ status: {
2118
+ type: "choice",
2119
+ options: ["error", "warning"],
2222
2120
  advanced: true
2223
2121
  },
2224
2122
  bordered: {
2225
2123
  type: "boolean",
2226
- advanced: true,
2227
2124
  defaultValueHint: true
2228
- }
2229
- }, COMMON_EVENT_HANDLERS),
2230
- states: __spreadValues$5({}, COMMON_STATES),
2231
- componentHelpers: COMMON_HELPERS_CONFIG,
2232
- importPath: "@plasmicpkgs/antd5/skinny/registerInput",
2233
- importName: "AntdPassword"
2234
- });
2235
- }
2236
- function registerNumberInput(loader) {
2237
- registerComponentHelper(loader, AntdInputNumber, {
2238
- name: "plasmic-antd5-input-number",
2239
- parentComponentName: "plasmic-antd5-input",
2240
- displayName: "Number Input",
2241
- props: __spreadProps$4(__spreadValues$5(__spreadValues$5(__spreadValues$5({
2242
- value: {
2243
- type: "number"
2244
- },
2245
- placholder: {
2246
- type: "string"
2247
- },
2248
- disabled: {
2249
- type: "boolean"
2250
- },
2251
- max: {
2252
- type: "number"
2253
2125
  },
2254
- min: {
2255
- type: "number"
2256
- },
2257
- step: {
2258
- type: "number",
2259
- helpText: "Increment or decrement step"
2260
- },
2261
- controls: {
2126
+ autoFocus: {
2262
2127
  type: "boolean",
2263
- displayName: "Show add/minus controls?",
2128
+ displayName: "Focus automatically",
2129
+ defaultValueHint: false,
2264
2130
  advanced: true
2265
- }
2266
- }, COMMON_DECORATOR_PROPS), COMMON_ADVANCED_PROPS), COMMON_EVENT_HANDLERS), {
2267
- // onChange directly called with the number
2131
+ },
2268
2132
  onChange: {
2269
2133
  type: "eventHandler",
2270
2134
  argTypes: [
2135
+ { name: "value", type: "string" },
2136
+ { name: "option", type: "object" }
2137
+ ]
2138
+ },
2139
+ dropdownMatchSelectWidth: {
2140
+ type: "boolean",
2141
+ displayName: "Should dropdown match trigger button width?",
2142
+ defaultValueHint: true,
2143
+ advanced: true
2144
+ },
2145
+ triggerClassName: {
2146
+ type: "class",
2147
+ displayName: "Trigger styles",
2148
+ noSelf: true,
2149
+ selectors: [
2271
2150
  {
2272
- name: "value",
2273
- type: "number"
2151
+ selector: ":component .ant-select-selector.ant-select-selector",
2152
+ label: "Base"
2153
+ },
2154
+ {
2155
+ selector: ":component .ant-select-selector:hover",
2156
+ label: "Hovered"
2274
2157
  }
2275
- ]
2276
- }
2277
- }),
2278
- states: __spreadValues$5({}, COMMON_STATES),
2279
- // don't need component helpers
2280
- importPath: "@plasmicpkgs/antd5/skinny/registerInput",
2281
- importName: "AntdInputNumber"
2282
- });
2283
- }
2284
-
2285
- const AntdMenu = antd.Menu;
2286
- const AntdMenuDivider = antd.Menu.Divider;
2287
- const AntdMenuItem = antd.Menu.Item;
2288
- const AntdMenuItemGroup = antd.Menu.ItemGroup;
2289
- const AntdSubMenu = antd.Menu.SubMenu;
2290
- const allowedMenuComponents = [
2291
- "plasmic-antd5-menu-item",
2292
- "plasmic-antd5-menu-divider",
2293
- "plasmic-antd5-submenu",
2294
- "plasmic-antd5-menu-item-group"
2295
- ];
2296
- function registerMenu(loader) {
2297
- registerComponentHelper(loader, AntdMenu, {
2298
- name: "plasmic-antd5-menu",
2299
- displayName: "Menu",
2300
- props: {
2301
- expandIcon: {
2302
- type: "slot",
2303
- hidePlaceholder: true
2158
+ ],
2159
+ advanced: true
2304
2160
  },
2305
- mode: {
2306
- type: "choice",
2307
- options: ["horizontal", "vertical", "inline"],
2308
- description: "Type of menu",
2309
- defaultValueHint: "vertical"
2161
+ popupScopeClassName: {
2162
+ type: "styleScopeClass",
2163
+ scopeName: "popup"
2310
2164
  },
2311
- multiple: {
2312
- type: "boolean",
2313
- description: "Allows selection of multiple items",
2314
- defaultValueHint: false
2165
+ popupClassName: {
2166
+ type: "class",
2167
+ displayName: "Popup styles",
2168
+ selectors: [],
2169
+ advanced: true
2315
2170
  },
2316
- triggerSubMenuAction: {
2317
- type: "choice",
2318
- options: ["hover", "click"],
2319
- description: "Which action can trigger submenu open/close",
2320
- defaultValueHint: "hover",
2171
+ optionClassName: {
2172
+ type: "class",
2173
+ displayName: "Option styles",
2174
+ noSelf: true,
2175
+ selectors: [
2176
+ {
2177
+ selector: ":popup.ant-select-dropdown .ant-select-item-option",
2178
+ label: "Base"
2179
+ },
2180
+ {
2181
+ selector: ":popup.ant-select-dropdown .ant-select-item-option-active",
2182
+ label: "Focused"
2183
+ },
2184
+ {
2185
+ selector: ":popup.ant-select-dropdown .ant-select-item-option-selected",
2186
+ label: "Selected"
2187
+ }
2188
+ ],
2189
+ advanced: true
2190
+ },
2191
+ placeholderClassName: {
2192
+ type: "class",
2193
+ displayName: "Placeholder styles",
2194
+ selectors: [
2195
+ {
2196
+ selector: ":component .ant-select-selector .ant-select-selection-placeholder",
2197
+ label: "Base"
2198
+ }
2199
+ ],
2321
2200
  advanced: true
2322
2201
  },
2202
+ defaultStylesClassName: {
2203
+ type: "themeResetClass"
2204
+ }
2205
+ },
2206
+ states: {
2207
+ value: {
2208
+ type: "writable",
2209
+ valueProp: "value",
2210
+ onChangeProp: "onChange",
2211
+ variableType: "text"
2212
+ }
2213
+ }
2214
+ }, { trapsSelection: true }), {
2215
+ importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
2216
+ importName: "AntdSelect"
2217
+ }));
2218
+ registerComponentHelper(loader, AntdOption, {
2219
+ name: optionComponentName,
2220
+ displayName: "Option",
2221
+ parentComponentName: selectComponentName,
2222
+ props: {
2223
+ children: __spreadValues$5({
2224
+ type: "slot",
2225
+ defaultValue: "Option"
2226
+ }, { mergeWithParent: true }),
2227
+ value: {
2228
+ type: "string"
2229
+ }
2230
+ },
2231
+ importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
2232
+ importName: "AntdOption"
2233
+ });
2234
+ registerComponentHelper(loader, AntdOptionGroup, {
2235
+ name: optionGroupComponentName,
2236
+ displayName: "Option Group",
2237
+ parentComponentName: selectComponentName,
2238
+ props: {
2323
2239
  children: {
2324
2240
  type: "slot",
2325
- allowedComponents: allowedMenuComponents,
2326
2241
  defaultValue: [
2327
2242
  {
2328
2243
  type: "component",
2329
- name: "plasmic-antd5-menu-item",
2244
+ name: "plasmic-antd5-option",
2330
2245
  props: {
2331
- key: "menuItemKey1"
2246
+ value: "option1",
2247
+ children: {
2248
+ type: "text",
2249
+ value: "Option 1"
2250
+ }
2332
2251
  }
2333
2252
  },
2334
2253
  {
2335
2254
  type: "component",
2336
- name: "plasmic-antd5-menu-item",
2255
+ name: "plasmic-antd5-option",
2337
2256
  props: {
2338
- key: "menuItemKey2"
2257
+ value: "option2",
2258
+ children: {
2259
+ type: "text",
2260
+ value: "Option 1"
2261
+ }
2339
2262
  }
2340
2263
  }
2341
2264
  ]
2342
2265
  },
2343
- onSelect: {
2344
- type: "eventHandler",
2345
- argTypes: [{ name: "key", type: "string" }]
2266
+ label: {
2267
+ type: "slot",
2268
+ defaultValue: "Group label"
2346
2269
  }
2347
2270
  },
2348
- importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
2349
- importName: "AntdMenu"
2271
+ importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
2272
+ importName: "AntdOptionGroup"
2350
2273
  });
2351
- registerComponentHelper(loader, AntdMenuItem, {
2352
- name: "plasmic-antd5-menu-item",
2353
- displayName: "Menu Item",
2274
+ }
2275
+
2276
+ var __defProp$4 = Object.defineProperty;
2277
+ var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
2278
+ var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
2279
+ var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
2280
+ var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2281
+ var __spreadValues$4 = (a, b) => {
2282
+ for (var prop in b || (b = {}))
2283
+ if (__hasOwnProp$4.call(b, prop))
2284
+ __defNormalProp$4(a, prop, b[prop]);
2285
+ if (__getOwnPropSymbols$4)
2286
+ for (var prop of __getOwnPropSymbols$4(b)) {
2287
+ if (__propIsEnum$4.call(b, prop))
2288
+ __defNormalProp$4(a, prop, b[prop]);
2289
+ }
2290
+ return a;
2291
+ };
2292
+ function AntdSwitch(props) {
2293
+ return /* @__PURE__ */ React__default.default.createElement(antd.Switch, __spreadValues$4({}, props));
2294
+ }
2295
+ AntdSwitch.__plasmicFormFieldMeta = { valueProp: "checked" };
2296
+ const switchComponentName = "plasmic-antd5-switch";
2297
+ function registerSwitch(loader) {
2298
+ registerComponentHelper(loader, AntdSwitch, {
2299
+ name: switchComponentName,
2300
+ displayName: "Switch",
2354
2301
  props: {
2355
- danger: {
2302
+ checked: {
2356
2303
  type: "boolean",
2357
- description: "Display the danger style",
2358
- defaultValueHint: false
2304
+ editOnly: true,
2305
+ uncontrolledProp: "defaultChecked",
2306
+ description: "Whether the switch is toggled on",
2307
+ defaultValueHint: false,
2308
+ hidden: (ps) => !!ps.__plasmicFormField
2359
2309
  },
2360
2310
  disabled: {
2361
2311
  type: "boolean",
2362
- description: "Whether disabled select",
2312
+ description: "If switch is disabled",
2363
2313
  defaultValueHint: false
2364
2314
  },
2365
- key: {
2366
- type: "string",
2367
- displayName: "Unique key",
2368
- description: "Unique ID of the menu item. Used to determine which item is selected.",
2369
- defaultValue: "menuItemKey"
2370
- },
2371
- title: {
2372
- type: "string",
2373
- description: "Set display title for collapsed item"
2374
- },
2375
- children: {
2376
- type: "slot",
2377
- defaultValue: [
2378
- {
2379
- type: "text",
2380
- value: "Menu item"
2381
- }
2382
- ]
2315
+ autoFocus: {
2316
+ type: "boolean",
2317
+ description: "If get focus when component mounted",
2318
+ defaultValueHint: false,
2319
+ advanced: true
2383
2320
  },
2384
- onClick: {
2321
+ onChange: {
2385
2322
  type: "eventHandler",
2386
- argTypes: []
2323
+ argTypes: [{ name: "checked", type: "boolean" }]
2387
2324
  }
2388
2325
  },
2389
- importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
2390
- importName: "AntdMenuItem",
2391
- parentComponentName: "plasmic-antd5-menu"
2392
- });
2393
- registerComponentHelper(loader, AntdMenuItemGroup, {
2394
- name: "plasmic-antd5-menu-item-group",
2395
- displayName: "Item Group",
2396
- props: {
2397
- title: {
2398
- type: "slot",
2399
- defaultValue: [
2400
- {
2401
- type: "text",
2402
- value: "Group"
2403
- }
2404
- ]
2405
- },
2406
- children: {
2407
- type: "slot",
2408
- allowedComponents: allowedMenuComponents,
2409
- defaultValue: [
2410
- {
2411
- type: "component",
2412
- name: "plasmic-antd5-menu-item"
2413
- }
2414
- ]
2326
+ states: {
2327
+ checked: {
2328
+ type: "writable",
2329
+ valueProp: "checked",
2330
+ onChangeProp: "onChange",
2331
+ variableType: "boolean"
2415
2332
  }
2416
2333
  },
2417
- importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
2418
- importName: "AntdMenuItemGroup",
2419
- parentComponentName: "plasmic-antd5-menu"
2420
- });
2421
- registerComponentHelper(loader, AntdMenuDivider, {
2422
- name: "plasmic-antd5-menu-divider",
2423
- displayName: "Menu Divider",
2424
- props: {
2425
- dashed: {
2426
- type: "boolean",
2427
- description: "Whether line is dashed",
2428
- defaultValueHint: false
2429
- }
2430
- },
2431
- importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
2432
- importName: "AntdMenuDivider",
2433
- parentComponentName: "plasmic-antd5-menu"
2434
- });
2435
- registerComponentHelper(loader, AntdSubMenu, {
2436
- name: "plasmic-antd5-submenu",
2437
- displayName: "Sub Menu",
2438
- props: {
2439
- disabled: {
2440
- type: "boolean",
2441
- description: "Whether sub-menu is disabled",
2442
- defaultValueHint: false
2443
- },
2444
- key: {
2445
- type: "string",
2446
- displayName: "Unique key",
2447
- description: "Unique ID of the sub-menu. Used to determine which item is selected.",
2448
- advanced: true
2449
- },
2450
- title: {
2451
- type: "slot",
2452
- defaultValue: [
2453
- {
2454
- type: "text",
2455
- value: "Sub-menu"
2456
- }
2457
- ]
2458
- },
2459
- children: {
2460
- type: "slot",
2461
- allowedComponents: allowedMenuComponents,
2462
- defaultValue: [1, 2].map((i) => ({
2463
- type: "component",
2464
- name: "plasmic-antd5-menu-item",
2465
- props: {
2466
- key: `subMenuItemKey${i}`,
2467
- children: [
2468
- {
2469
- type: "text",
2470
- value: `Sub-menu item ${i}`
2471
- }
2472
- ]
2473
- }
2474
- }))
2475
- }
2476
- },
2477
- importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
2478
- importName: "AntdSubMenu",
2479
- parentComponentName: "plasmic-antd5-menu"
2334
+ importPath: "@plasmicpkgs/antd5/skinny/registerSwitch",
2335
+ importName: "AntdSwitch"
2480
2336
  });
2481
2337
  }
2482
2338
 
2483
- var __defProp$4 = Object.defineProperty;
2484
- var __defProps$3 = Object.defineProperties;
2485
- var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
2486
- var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
2487
- var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
2488
- var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
2489
- var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2490
- var __spreadValues$4 = (a, b) => {
2339
+ var __defProp$3 = Object.defineProperty;
2340
+ var __defProps$2 = Object.defineProperties;
2341
+ var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
2342
+ var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
2343
+ var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
2344
+ var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
2345
+ var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2346
+ var __spreadValues$3 = (a, b) => {
2491
2347
  for (var prop in b || (b = {}))
2492
- if (__hasOwnProp$4.call(b, prop))
2493
- __defNormalProp$4(a, prop, b[prop]);
2494
- if (__getOwnPropSymbols$4)
2495
- for (var prop of __getOwnPropSymbols$4(b)) {
2496
- if (__propIsEnum$4.call(b, prop))
2497
- __defNormalProp$4(a, prop, b[prop]);
2348
+ if (__hasOwnProp$3.call(b, prop))
2349
+ __defNormalProp$3(a, prop, b[prop]);
2350
+ if (__getOwnPropSymbols$3)
2351
+ for (var prop of __getOwnPropSymbols$3(b)) {
2352
+ if (__propIsEnum$3.call(b, prop))
2353
+ __defNormalProp$3(a, prop, b[prop]);
2498
2354
  }
2499
2355
  return a;
2500
2356
  };
2501
- var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
2502
- var __objRest$4 = (source, exclude) => {
2357
+ var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
2358
+ var __objRest$3 = (source, exclude) => {
2503
2359
  var target = {};
2504
2360
  for (var prop in source)
2505
- if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
2361
+ if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
2506
2362
  target[prop] = source[prop];
2507
- if (source != null && __getOwnPropSymbols$4)
2508
- for (var prop of __getOwnPropSymbols$4(source)) {
2509
- if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
2363
+ if (source != null && __getOwnPropSymbols$3)
2364
+ for (var prop of __getOwnPropSymbols$3(source)) {
2365
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
2510
2366
  target[prop] = source[prop];
2511
2367
  }
2512
2368
  return target;
2513
2369
  };
2514
- function AntdModal(props) {
2515
- const _a = props, { onOpenChange, onOk, onCancel, open, footer } = _a, rest = __objRest$4(_a, ["onOpenChange", "onOk", "onCancel", "open", "footer"]);
2516
- const memoOnOk = React__default.default.useMemo(() => {
2517
- if (onOpenChange || onOk) {
2518
- return (e) => {
2519
- onOpenChange == null ? void 0 : onOpenChange(false);
2520
- onOk == null ? void 0 : onOk(e);
2521
- };
2522
- } else {
2523
- return void 0;
2370
+ const reactNodeToString = function(reactNode) {
2371
+ let string = "";
2372
+ if (typeof reactNode === "string") {
2373
+ string = reactNode;
2374
+ } else if (typeof reactNode === "number") {
2375
+ string = reactNode.toString();
2376
+ } else if (reactNode instanceof Array) {
2377
+ reactNode.forEach(function(child) {
2378
+ string += reactNodeToString(child);
2379
+ });
2380
+ } else if (React.isValidElement(reactNode)) {
2381
+ string += reactNodeToString(reactNode.props.children);
2382
+ }
2383
+ return string;
2384
+ };
2385
+ function ensureArray(x) {
2386
+ return Array.isArray(x) ? x : [x];
2387
+ }
2388
+ const FormItem = antd.Form.Item;
2389
+ const FormList = antd.Form.List;
2390
+ var InputType = /* @__PURE__ */ ((InputType2) => {
2391
+ InputType2["Text"] = "Text";
2392
+ InputType2["TextArea"] = "Text Area";
2393
+ InputType2["Password"] = "Password";
2394
+ InputType2["Number"] = "Number";
2395
+ InputType2["Select"] = "Select";
2396
+ InputType2["Option"] = "Option";
2397
+ InputType2["OptionGroup"] = "Option Group";
2398
+ InputType2["Radio"] = "Radio";
2399
+ InputType2["RadioGroup"] = "Radio Group";
2400
+ InputType2["Checkbox"] = "Checkbox";
2401
+ return InputType2;
2402
+ })(InputType || {});
2403
+ const PathContext = React__default.default.createContext({ relativePath: [], fullPath: [] });
2404
+ const InternalFormInstanceContext = React__default.default.createContext(void 0);
2405
+ const FormLayoutContext = React__default.default.createContext(void 0);
2406
+ const Internal = (props) => {
2407
+ var _b, _c, _d, _e;
2408
+ const [form] = antd.Form.useForm();
2409
+ const values = form.getFieldsValue(true);
2410
+ const lastValue = React__default.default.useRef(values);
2411
+ const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$3(_a, ["extendedOnValuesChange", "setRemountKey"]);
2412
+ let childrenNode;
2413
+ if (props.mode !== "simplified") {
2414
+ childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
2415
+ } else {
2416
+ childrenNode = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, ((_b = props.formItems) != null ? _b : []).map((formItem) => /* @__PURE__ */ React__default.default.createElement(
2417
+ FormItemWrapper,
2418
+ __spreadProps$2(__spreadValues$3({}, formItem), {
2419
+ noLabel: formItem.inputType === "Checkbox" /* Checkbox */ || formItem.noLabel,
2420
+ style: { width: "100%" }
2421
+ }),
2422
+ 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 === "Radio" /* Radio */ ? /* @__PURE__ */ React__default.default.createElement(
2423
+ antd.Radio.Group,
2424
+ {
2425
+ options: formItem.options,
2426
+ optionType: formItem.optionType
2427
+ }
2428
+ ) : null
2429
+ )), props.submitSlot);
2430
+ }
2431
+ const fireOnValuesChange = React__default.default.useCallback(() => {
2432
+ const values2 = form.getFieldsValue(true);
2433
+ if (!equal__default.default(values2, lastValue.current)) {
2434
+ extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
2435
+ lastValue.current = values2;
2524
2436
  }
2525
- }, [onOpenChange, onOk]);
2526
- const memoOnCancel = React__default.default.useMemo(() => {
2527
- if (onOpenChange || onCancel) {
2528
- return (e) => {
2529
- onOpenChange == null ? void 0 : onOpenChange(false);
2530
- onCancel == null ? void 0 : onCancel(e);
2437
+ }, [form, lastValue]);
2438
+ React__default.default.useEffect(() => {
2439
+ fireOnValuesChange();
2440
+ }, []);
2441
+ const formLayout = React__default.default.useMemo(
2442
+ () => {
2443
+ var _a2;
2444
+ return {
2445
+ layout: props.layout,
2446
+ labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
2531
2447
  };
2532
- } else {
2533
- return void 0;
2534
- }
2535
- }, [onOpenChange, onCancel]);
2448
+ },
2449
+ [props.layout, (_c = props.labelCol) == null ? void 0 : _c.span]
2450
+ );
2536
2451
  return /* @__PURE__ */ React__default.default.createElement(
2537
- antd.Modal,
2538
- __spreadProps$3(__spreadValues$4({}, rest), {
2539
- onOk: memoOnOk,
2540
- onCancel: memoOnCancel,
2541
- open,
2542
- footer: footer != null ? footer : void 0
2543
- })
2452
+ InternalFormInstanceContext.Provider,
2453
+ {
2454
+ value: {
2455
+ layout: formLayout,
2456
+ fireOnValuesChange,
2457
+ forceRemount: () => setRemountKey((k) => k + 1)
2458
+ }
2459
+ },
2460
+ /* @__PURE__ */ React__default.default.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React__default.default.createElement(
2461
+ antd.Form,
2462
+ __spreadProps$2(__spreadValues$3({}, rest), {
2463
+ key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
2464
+ onValuesChange: (...args) => {
2465
+ var _a2;
2466
+ (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
2467
+ extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
2468
+ },
2469
+ form,
2470
+ labelCol: ((_d = props.labelCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
2471
+ wrapperCol: ((_e = props.wrapperCol) == null ? void 0 : _e.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
2472
+ }),
2473
+ /* @__PURE__ */ React__default.default.createElement("style", null, `
2474
+ .ant-form-item-explain + div, .ant-form-item-margin-offset {
2475
+ display: none;
2476
+ }
2477
+ `),
2478
+ childrenNode
2479
+ ))
2544
2480
  );
2481
+ };
2482
+ function FormWrapper(props) {
2483
+ const [remountKey, setRemountKey] = React__default.default.useState(0);
2484
+ const previousInitialValues = usePrevious(props.initialValues);
2485
+ React__default.default.useEffect(() => {
2486
+ if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
2487
+ setRemountKey((k) => k + 1);
2488
+ }
2489
+ }, [previousInitialValues, props.initialValues]);
2490
+ return /* @__PURE__ */ React__default.default.createElement(Internal, __spreadProps$2(__spreadValues$3({ key: remountKey }, props), { setRemountKey }));
2545
2491
  }
2546
- function registerModal(loader) {
2547
- registerComponentHelper(loader, AntdModal, {
2548
- name: "plasmic-antd5-modal",
2549
- displayName: "Modal",
2550
- props: {
2551
- open: {
2552
- type: "boolean"
2553
- },
2554
- children: {
2555
- type: "slot",
2556
- defaultValue: {
2557
- type: "vbox",
2558
- children: ["Modal content"]
2492
+ const COMMON_ACTIONS = [
2493
+ {
2494
+ type: "button-action",
2495
+ label: "Append new Form Field",
2496
+ onClick: ({ studioOps }) => {
2497
+ studioOps.appendToSlot(
2498
+ {
2499
+ type: "component",
2500
+ name: "plasmic-antd5-form-item"
2501
+ },
2502
+ "children"
2503
+ );
2504
+ },
2505
+ hidden: (props) => props.mode !== "advanced"
2506
+ }
2507
+ // {
2508
+ // type: "button-action" as const,
2509
+ // label: "Append new Form Field Group",
2510
+ // onClick: ({ studioOps }: ActionProps<any>) => {
2511
+ // studioOps.appendToSlot(
2512
+ // {
2513
+ // type: "component",
2514
+ // name: "plasmic-antd5-form-group",
2515
+ // },
2516
+ // "children"
2517
+ // );
2518
+ // },
2519
+ // },
2520
+ // {
2521
+ // type: "button-action" as const,
2522
+ // label: "Append new Form List",
2523
+ // onClick: ({ studioOps }: ActionProps<any>) => {
2524
+ // studioOps.appendToSlot(
2525
+ // {
2526
+ // type: "component",
2527
+ // name: "plasmic-antd5-form-list",
2528
+ // },
2529
+ // "children"
2530
+ // );
2531
+ // },
2532
+ // },
2533
+ ];
2534
+ const colProp = (displayName, defaultValue, description) => ({
2535
+ type: "object",
2536
+ displayName,
2537
+ advanced: true,
2538
+ fields: {
2539
+ span: {
2540
+ type: "number",
2541
+ displayName: "Width",
2542
+ description: "The number of grid columns to span in width (out of 24 columns total)",
2543
+ min: 1,
2544
+ max: 24
2545
+ },
2546
+ offset: {
2547
+ type: "number",
2548
+ displayName: "Offset",
2549
+ description: "Number of grid columns to skip from the left (out of 24 columns total)",
2550
+ min: 0,
2551
+ max: 23
2552
+ },
2553
+ horizontalOnly: {
2554
+ type: "boolean",
2555
+ displayName: "Horizontal only",
2556
+ description: "Only apply to horizontal layout"
2557
+ }
2558
+ },
2559
+ description,
2560
+ defaultValue
2561
+ });
2562
+ const formComponentName = "plasmic-antd5-form";
2563
+ function registerForm(loader) {
2564
+ registerComponentHelper(loader, FormWrapper, {
2565
+ name: formComponentName,
2566
+ displayName: "Form",
2567
+ defaultStyles: {
2568
+ layout: "vbox",
2569
+ alignItems: "flex-start"
2570
+ },
2571
+ props: {
2572
+ mode: "controlMode",
2573
+ formItems: {
2574
+ type: "array",
2575
+ itemType: {
2576
+ type: "object",
2577
+ fields: __spreadValues$3({
2578
+ label: "string",
2579
+ inputType: {
2580
+ type: "choice",
2581
+ options: Object.values(InputType),
2582
+ defaultValue: "Text" /* Text */
2583
+ },
2584
+ options: {
2585
+ type: "array",
2586
+ itemType: {
2587
+ type: "object",
2588
+ fields: {
2589
+ type: {
2590
+ type: "choice",
2591
+ options: [
2592
+ { value: "option", label: "Option" },
2593
+ { value: "option-group", label: "Option Group" }
2594
+ ],
2595
+ defaultValue: "option"
2596
+ },
2597
+ label: "string",
2598
+ value: {
2599
+ type: "string",
2600
+ hidden: (ps) => ps.type !== "option-group"
2601
+ },
2602
+ options: {
2603
+ type: "array",
2604
+ itemType: {
2605
+ type: "object",
2606
+ nameFunc: (item) => item.label || item.value,
2607
+ fields: {
2608
+ value: "string",
2609
+ label: "string"
2610
+ }
2611
+ }
2612
+ }
2613
+ },
2614
+ nameFunc: (item) => item == null ? void 0 : item.label
2615
+ },
2616
+ hidden: (ps) => !["Select" /* Select */, "Radio" /* Radio */].includes(ps.inputType)
2617
+ },
2618
+ optionType: {
2619
+ type: "choice",
2620
+ options: [
2621
+ { value: "default", label: "Radio" },
2622
+ { value: "button", label: "Button" }
2623
+ ],
2624
+ hidden: (ps) => "Radio" /* Radio */ !== ps.inputType,
2625
+ defaultValueHint: "Radio",
2626
+ displayName: "Option Type"
2627
+ }
2628
+ }, commonFormItemProps),
2629
+ nameFunc: (item) => item.label
2630
+ },
2631
+ hidden: (props) => props.mode === "advanced"
2632
+ },
2633
+ submitSlot: __spreadValues$3({
2634
+ type: "slot",
2635
+ hidden: () => true,
2636
+ defaultValue: {
2637
+ type: "component",
2638
+ name: buttonComponentName,
2639
+ props: {
2640
+ type: "primary",
2641
+ submitsForm: true,
2642
+ children: {
2643
+ type: "text",
2644
+ value: "Submit"
2645
+ }
2646
+ }
2647
+ }
2648
+ }, {
2649
+ mergeWithParent: () => true,
2650
+ hiddenMergedProps: (ps) => !ps.mode
2651
+ }),
2652
+ children: {
2653
+ type: "slot",
2654
+ defaultValue: [
2655
+ {
2656
+ type: "component",
2657
+ name: formItemComponentName,
2658
+ props: {
2659
+ label: {
2660
+ type: "text",
2661
+ value: "Name"
2662
+ },
2663
+ name: "name",
2664
+ children: {
2665
+ type: "component",
2666
+ name: inputComponentName
2667
+ }
2668
+ }
2669
+ },
2670
+ {
2671
+ type: "component",
2672
+ name: formItemComponentName,
2673
+ props: {
2674
+ label: {
2675
+ type: "text",
2676
+ value: "Message"
2677
+ },
2678
+ name: "message",
2679
+ children: {
2680
+ type: "component",
2681
+ name: textAreaComponentName
2682
+ }
2683
+ }
2684
+ },
2685
+ {
2686
+ type: "component",
2687
+ name: buttonComponentName,
2688
+ props: {
2689
+ children: {
2690
+ type: "text",
2691
+ value: "Submit"
2692
+ },
2693
+ type: "primary",
2694
+ submitsForm: true
2695
+ }
2696
+ }
2697
+ ],
2698
+ hidden: (props) => props.mode !== "advanced"
2699
+ },
2700
+ initialValues: {
2701
+ type: "object"
2702
+ },
2703
+ layout: {
2704
+ type: "choice",
2705
+ options: ["horizontal", "vertical", "inline"],
2706
+ defaultValue: "vertical"
2707
+ },
2708
+ labelAlign: {
2709
+ type: "choice",
2710
+ options: ["left", "right"],
2711
+ defaultValueHint: "right",
2712
+ advanced: true,
2713
+ hidden: (ps) => ps.layout !== "horizontal"
2714
+ },
2715
+ labelCol: colProp(
2716
+ "Label layout",
2717
+ {
2718
+ span: 8,
2719
+ horizontalOnly: true
2720
+ },
2721
+ "Set the width and offset of the labels"
2722
+ ),
2723
+ wrapperCol: colProp(
2724
+ "Control layout",
2725
+ {
2726
+ span: 16,
2727
+ horizontalOnly: true
2728
+ },
2729
+ "Set the width and offset of the form controls"
2730
+ ),
2731
+ colon: {
2732
+ type: "boolean",
2733
+ description: `Show a colon after labels by default (only for horizontal layout)`,
2734
+ defaultValueHint: true,
2735
+ advanced: true,
2736
+ hidden: (props) => {
2737
+ var _a;
2738
+ return ((_a = props.layout) != null ? _a : "horizontal") !== "horizontal";
2739
+ }
2740
+ },
2741
+ requiredMark: {
2742
+ displayName: "Required/optional mark",
2743
+ type: "choice",
2744
+ options: [
2745
+ {
2746
+ value: "optional",
2747
+ label: "Indicate optional fields"
2748
+ },
2749
+ {
2750
+ value: true,
2751
+ label: "Indicate required fields with asterisk"
2752
+ },
2753
+ {
2754
+ value: false,
2755
+ label: "Show no indicators"
2756
+ }
2757
+ ],
2758
+ advanced: true,
2759
+ defaultValueHint: true
2760
+ },
2761
+ extendedOnValuesChange: {
2762
+ type: "eventHandler",
2763
+ displayName: "On values change",
2764
+ argTypes: [
2765
+ {
2766
+ name: "changedValues",
2767
+ type: "object"
2768
+ },
2769
+ {
2770
+ name: "allValues",
2771
+ type: "object"
2772
+ }
2773
+ ]
2774
+ },
2775
+ onFinish: {
2776
+ type: "eventHandler",
2777
+ displayName: "On submit",
2778
+ argTypes: [
2779
+ {
2780
+ name: "values",
2781
+ type: "object"
2782
+ }
2783
+ ]
2784
+ },
2785
+ onFinishFailed: {
2786
+ // function({ values, errorFields, outOfDate })
2787
+ type: "eventHandler",
2788
+ displayName: "On invalid submit",
2789
+ argTypes: [
2790
+ {
2791
+ name: "data",
2792
+ type: "object"
2793
+ }
2794
+ ]
2795
+ },
2796
+ validateTrigger: {
2797
+ type: "choice",
2798
+ options: ["onSubmit", "onChange", "onBlur"],
2799
+ multiSelect: true,
2800
+ defaultValueHint: ["onChange"],
2801
+ advanced: true
2802
+ }
2803
+ },
2804
+ actions: COMMON_ACTIONS,
2805
+ states: {
2806
+ value: {
2807
+ type: "readonly",
2808
+ variableType: "object",
2809
+ onChangeProp: "extendedOnValuesChange"
2810
+ }
2811
+ },
2812
+ importPath: "@plasmicpkgs/antd5/skinny/registerForm",
2813
+ importName: "FormWrapper"
2814
+ });
2815
+ }
2816
+ function plasmicRulesToAntdRules(plasmicRules, label) {
2817
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i;
2818
+ const effectiveLabel = label || "This field";
2819
+ const rules = [];
2820
+ for (const plasmicRule of plasmicRules) {
2821
+ switch (plasmicRule.ruleType) {
2822
+ case "enum":
2823
+ rules.push({
2824
+ type: "enum",
2825
+ enum: (_b = (_a = plasmicRule.options) == null ? void 0 : _a.map((opt) => opt.value)) != null ? _b : [],
2826
+ message: (_c = plasmicRule.message) != null ? _c : `${effectiveLabel} must be a valid value`
2827
+ });
2828
+ break;
2829
+ case "required":
2830
+ rules.push({
2831
+ required: true,
2832
+ message: (_d = plasmicRule.message) != null ? _d : `${effectiveLabel} is required`
2833
+ });
2834
+ break;
2835
+ case "regex":
2836
+ rules.push({
2837
+ pattern: new RegExp((_e = plasmicRule.pattern) != null ? _e : ""),
2838
+ message: (_f = plasmicRule.message) != null ? _f : `${effectiveLabel} must be a valid value`
2839
+ });
2840
+ break;
2841
+ case "whitespace":
2842
+ rules.push({
2843
+ whitespace: true,
2844
+ message: (_g = plasmicRule.message) != null ? _g : `${effectiveLabel} is required`
2845
+ });
2846
+ break;
2847
+ case "min":
2848
+ rules.push({
2849
+ [plasmicRule.ruleType]: plasmicRule.length,
2850
+ message: (_h = plasmicRule.message) != null ? _h : `${effectiveLabel} must be at least ${plasmicRule.length} characters`
2851
+ });
2852
+ break;
2853
+ case "max":
2854
+ rules.push({
2855
+ [plasmicRule.ruleType]: plasmicRule.length,
2856
+ message: (_i = plasmicRule.message) != null ? _i : `${effectiveLabel} must be at most ${plasmicRule.length} characters`
2857
+ });
2858
+ break;
2859
+ case "advanced":
2860
+ rules.push({
2861
+ validator: (...args) => {
2862
+ var _a2;
2863
+ return ((_a2 = plasmicRule.custom) == null ? void 0 : _a2.apply(null, args)) ? Promise.resolve() : Promise.reject();
2864
+ },
2865
+ message: plasmicRule.message
2866
+ });
2867
+ }
2868
+ }
2869
+ return rules;
2870
+ }
2871
+ const useFormItemRelativeName = (name) => {
2872
+ const pathCtx = React__default.default.useContext(PathContext);
2873
+ return typeof name === "object" ? [...pathCtx.relativePath, ...name] : typeof name === "string" ? [...pathCtx.relativePath, name] : void 0;
2874
+ };
2875
+ const useFormItemFullName = (name) => {
2876
+ const pathCtx = React__default.default.useContext(PathContext);
2877
+ return typeof name === "object" ? [...pathCtx.fullPath, ...name] : typeof name === "string" ? [...pathCtx.fullPath, name] : void 0;
2878
+ };
2879
+ function useFormInstanceMaybe() {
2880
+ return antd.Form.useFormInstance();
2881
+ }
2882
+ function FormItemWrapper(props) {
2883
+ var _b;
2884
+ const _a = props, {
2885
+ rules: plasmicRules,
2886
+ description,
2887
+ noLabel,
2888
+ name,
2889
+ hideValidationMessage,
2890
+ customizeProps,
2891
+ setControlContextData,
2892
+ alignLabellessWithControls = true
2893
+ } = _a, rest = __objRest$3(_a, [
2894
+ "rules",
2895
+ "description",
2896
+ "noLabel",
2897
+ "name",
2898
+ "hideValidationMessage",
2899
+ "customizeProps",
2900
+ "setControlContextData",
2901
+ "alignLabellessWithControls"
2902
+ ]);
2903
+ const relativeFormItemName = useFormItemRelativeName(name);
2904
+ const fullFormItemName = useFormItemFullName(name);
2905
+ const bestEffortLabel = !noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
2906
+ const rules = plasmicRules ? plasmicRulesToAntdRules(
2907
+ plasmicRules,
2908
+ typeof bestEffortLabel === "number" ? "" + bestEffortLabel : bestEffortLabel
2909
+ ) : void 0;
2910
+ const layoutContext = React__default.default.useContext(FormLayoutContext);
2911
+ const inCanvas = !!host.usePlasmicCanvasContext();
2912
+ if (inCanvas) {
2913
+ const form = useFormInstanceMaybe();
2914
+ const prevPropValues = React__default.default.useRef({
2915
+ initialValue: props.initialValue,
2916
+ name: props.name
2917
+ });
2918
+ const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
2919
+ const { fireOnValuesChange, forceRemount } = internalFormCtx != null ? internalFormCtx : {};
2920
+ (_b = props.setControlContextData) == null ? void 0 : _b.call(props, {
2921
+ internalFormCtx
2922
+ });
2923
+ React__default.default.useEffect(() => {
2924
+ if (prevPropValues.current.name !== props.name) {
2925
+ forceRemount == null ? void 0 : forceRemount();
2926
+ }
2927
+ if (!fullFormItemName || (form == null ? void 0 : form.getFieldValue(fullFormItemName)) !== prevPropValues.current.initialValue) {
2928
+ return;
2929
+ }
2930
+ form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
2931
+ prevPropValues.current.initialValue = props.initialValue;
2932
+ fireOnValuesChange == null ? void 0 : fireOnValuesChange();
2933
+ }, [form, props.initialValue, fullFormItemName]);
2934
+ }
2935
+ return /* @__PURE__ */ React__default.default.createElement(
2936
+ FormItem,
2937
+ __spreadProps$2(__spreadValues$3({}, rest), {
2938
+ label: noLabel ? void 0 : props.label,
2939
+ name: relativeFormItemName,
2940
+ rules,
2941
+ extra: description,
2942
+ help: hideValidationMessage ? "" : props.help,
2943
+ colon: noLabel ? false : void 0,
2944
+ valuePropName: deriveValuePropName(props),
2945
+ wrapperCol: (layoutContext == null ? void 0 : layoutContext.layout) === "horizontal" && noLabel && alignLabellessWithControls && layoutContext.labelSpan ? { offset: layoutContext.labelSpan } : void 0
2946
+ }),
2947
+ /* @__PURE__ */ React__default.default.createElement(FormItemForwarder, { formItemProps: props })
2948
+ );
2949
+ }
2950
+ function deriveValuePropName(props) {
2951
+ if (props.valuePropName) {
2952
+ return props.valuePropName;
2953
+ }
2954
+ const valueProps = React__default.default.Children.map(props.children, (child) => {
2955
+ var _a;
2956
+ if (React__default.default.isValidElement(child)) {
2957
+ const childType = child.type;
2958
+ if (childType) {
2959
+ const x = (_a = childType.__plasmicFormFieldMeta) == null ? void 0 : _a.valueProp;
2960
+ if (x) {
2961
+ return x;
2962
+ }
2963
+ const plumeType = childType.__plumeType;
2964
+ if (plumeType && (plumeType === "checkbox" || plumeType === "switch")) {
2965
+ return "isChecked";
2966
+ }
2967
+ }
2968
+ }
2969
+ return void 0;
2970
+ }).filter((x) => !!x);
2971
+ if (valueProps.length > 0) {
2972
+ return valueProps[0];
2973
+ }
2974
+ return void 0;
2975
+ }
2976
+ function FormItemForwarder(_a) {
2977
+ var _b = _a, { formItemProps } = _b, props = __objRest$3(_b, ["formItemProps"]);
2978
+ var _a2;
2979
+ const status = antd.Form.Item.useStatus();
2980
+ const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
2981
+ const data = {
2982
+ status: status.status
2983
+ };
2984
+ (_a2 = props.setControlContextData) == null ? void 0 : _a2.call(props, {
2985
+ internalFormCtx,
2986
+ status
2987
+ });
2988
+ return React__default.default.Children.map(formItemProps.children, (child, i) => {
2989
+ var _a3;
2990
+ let newProps = __spreadProps$2(__spreadValues$3(__spreadValues$3({}, (_a3 = child.props) != null ? _a3 : {}), props), {
2991
+ __plasmicFormField: true
2992
+ });
2993
+ if (formItemProps.customizeProps) {
2994
+ newProps = mergeProps(
2995
+ newProps,
2996
+ formItemProps.customizeProps(data, newProps)
2997
+ );
2998
+ }
2999
+ return i === 0 && React.isValidElement(child) ? React.cloneElement(child, newProps) : child;
3000
+ });
3001
+ }
3002
+ const commonFormItemProps = {
3003
+ name: {
3004
+ type: "string"
3005
+ },
3006
+ initialValue: {
3007
+ type: "string"
3008
+ },
3009
+ rules: {
3010
+ type: "formValidationRules"
3011
+ },
3012
+ valuePropName: {
3013
+ type: "string",
3014
+ advanced: true,
3015
+ defaultValueHint: "value",
3016
+ description: "The prop name for specifying the value of the form control component"
3017
+ },
3018
+ noLabel: {
3019
+ type: "boolean",
3020
+ advanced: true
3021
+ },
3022
+ alignLabellessWithControls: {
3023
+ type: "boolean",
3024
+ displayName: "Align with controls?",
3025
+ description: "Aligns the content with form controls in the grid",
3026
+ hidden: (ps, ctx) => {
3027
+ var _a;
3028
+ return !ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
3029
+ },
3030
+ defaultValueHint: true
3031
+ },
3032
+ colon: {
3033
+ type: "boolean",
3034
+ defaultValueHint: true,
3035
+ advanced: true,
3036
+ hidden: () => true
3037
+ },
3038
+ labelAlign: {
3039
+ type: "choice",
3040
+ options: ["left", "right"],
3041
+ advanced: true,
3042
+ hidden: (ps, ctx) => {
3043
+ var _a;
3044
+ return !!ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
3045
+ }
3046
+ },
3047
+ hidden: {
3048
+ type: "boolean",
3049
+ advanced: true
3050
+ },
3051
+ validateTrigger: {
3052
+ type: "choice",
3053
+ options: ["onSubmit", "onChange", "onBlur"],
3054
+ multiSelect: true,
3055
+ advanced: true
3056
+ },
3057
+ shouldUpdate: {
3058
+ type: "boolean",
3059
+ advanced: true,
3060
+ displayName: "Always re-render",
3061
+ description: "Form items normally only re-render when the corresponding form value changes, for performance. This forces it to always re-render."
3062
+ },
3063
+ dependencies: {
3064
+ type: "array",
3065
+ advanced: true,
3066
+ displayName: "Dependencies",
3067
+ description: "Form items can depend on other form items. This forces it to reevaluate the validation rules when the other form item changes."
3068
+ },
3069
+ hideValidationMessage: {
3070
+ type: "boolean",
3071
+ displayName: "Hide validation message?",
3072
+ description: "If true, will hide the validation error message",
3073
+ defaultValueHint: false,
3074
+ advanced: true
3075
+ },
3076
+ customizeProps: {
3077
+ type: "function",
3078
+ description: "Customize the props passed into the wrapped field component. Takes the current status ('success', 'warning', 'error', or 'validating').)",
3079
+ argNames: ["fieldData"],
3080
+ argValues: (_ps, ctx) => {
3081
+ var _a;
3082
+ return [
3083
+ {
3084
+ status: (_a = ctx == null ? void 0 : ctx.status) == null ? void 0 : _a.status
2559
3085
  }
2560
- },
2561
- title: {
2562
- type: "slot",
2563
- defaultValue: "Modal title"
2564
- },
2565
- footer: {
3086
+ ];
3087
+ },
3088
+ advanced: true
3089
+ },
3090
+ noStyle: {
3091
+ type: "boolean",
3092
+ displayName: "Field control only",
3093
+ description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
3094
+ advanced: true
3095
+ }
3096
+ };
3097
+ const formItemComponentName = "plasmic-antd5-form-item";
3098
+ function registerFormItem(loader) {
3099
+ registerComponentHelper(loader, FormItemWrapper, __spreadValues$3({
3100
+ name: formItemComponentName,
3101
+ displayName: "Form Field",
3102
+ parentComponentName: formComponentName,
3103
+ defaultStyles: {
3104
+ marginBottom: "24px",
3105
+ width: "stretch"
3106
+ },
3107
+ props: __spreadValues$3({
3108
+ label: __spreadValues$3({
2566
3109
  type: "slot",
2567
- hidePlaceholder: true
2568
- },
2569
- closeIcon: {
3110
+ defaultValue: {
3111
+ type: "text",
3112
+ value: "Label"
3113
+ },
3114
+ hidden: (ps) => !!ps.noLabel
3115
+ }, { mergeWithParent: true }),
3116
+ children: __spreadValues$3({
2570
3117
  type: "slot",
2571
- hidePlaceholder: true
2572
- },
2573
- onOk: {
2574
- type: "eventHandler",
2575
- argTypes: []
3118
+ defaultValue: {
3119
+ type: "component",
3120
+ name: inputComponentName
3121
+ }
3122
+ }, { mergeWithParent: true })
3123
+ }, commonFormItemProps),
3124
+ importPath: "@plasmicpkgs/antd5/skinny/registerForm",
3125
+ importName: "FormItemWrapper",
3126
+ templates: {
3127
+ Text: {
3128
+ props: {
3129
+ children: {
3130
+ type: "component",
3131
+ name: inputComponentName
3132
+ }
3133
+ }
2576
3134
  },
2577
- onCancel: {
2578
- type: "eventHandler",
2579
- argTypes: []
3135
+ "Long Text": {
3136
+ props: {
3137
+ children: {
3138
+ type: "component",
3139
+ name: textAreaComponentName
3140
+ }
3141
+ }
2580
3142
  },
2581
- okText: {
2582
- type: "string",
2583
- hidden: (ps) => !!ps.footer,
2584
- advanced: true
3143
+ "Select dropdown": {
3144
+ props: {
3145
+ children: {
3146
+ type: "component",
3147
+ name: selectComponentName
3148
+ }
3149
+ }
2585
3150
  },
2586
- cancelText: {
2587
- type: "string",
2588
- hidden: (ps) => !!ps.footer,
2589
- advanced: true
3151
+ Number: {
3152
+ props: {
3153
+ children: {
3154
+ type: "component",
3155
+ name: inputNumberComponentName
3156
+ }
3157
+ }
2590
3158
  },
2591
- onOpenChange: {
2592
- type: "eventHandler",
2593
- argTypes: [{ name: "open", type: "boolean" }]
3159
+ Checkbox: {
3160
+ props: {
3161
+ children: {
3162
+ type: "component",
3163
+ name: checkboxComponentName
3164
+ },
3165
+ noLabel: true
3166
+ }
2594
3167
  },
2595
- modalScopeClassName: {
2596
- type: "styleScopeClass",
2597
- scopeName: "modal"
3168
+ Switch: {
3169
+ props: {
3170
+ children: {
3171
+ type: "component",
3172
+ name: switchComponentName
3173
+ },
3174
+ noLabel: true
3175
+ }
2598
3176
  },
2599
- modalClassName: {
2600
- type: "class",
2601
- displayName: "Modal content styles",
2602
- noSelf: true,
2603
- selectors: [
2604
- {
2605
- selector: ":modal .ant-modal .ant-modal-content",
2606
- label: "Base"
3177
+ Radios: {
3178
+ props: {
3179
+ children: {
3180
+ type: "component",
3181
+ name: radioGroupComponentName
2607
3182
  }
2608
- ],
2609
- advanced: true
3183
+ }
2610
3184
  },
2611
- closeButtonClassName: {
2612
- type: "class",
2613
- displayName: "Close button styles",
2614
- noSelf: true,
2615
- selectors: [
2616
- {
2617
- selector: ":modal .ant-modal .ant-modal-close",
2618
- label: "Base"
3185
+ Password: {
3186
+ props: {
3187
+ children: {
3188
+ type: "component",
3189
+ name: passwordComponentName
2619
3190
  }
2620
- ],
2621
- advanced: true
3191
+ }
2622
3192
  },
2623
- defaultStylesClassName: {
2624
- type: "themeResetClass"
3193
+ "Submit button": {
3194
+ props: {
3195
+ children: {
3196
+ type: "component",
3197
+ name: buttonComponentName,
3198
+ props: {
3199
+ type: "primary"
3200
+ }
3201
+ },
3202
+ noLabel: true
3203
+ }
2625
3204
  }
2626
- },
2627
- states: {
2628
- open: {
2629
- type: "writable",
2630
- valueProp: "open",
2631
- onChangeProp: "onOpenChange",
2632
- variableType: "boolean"
3205
+ }
3206
+ }, { trapsSelection: true }));
3207
+ }
3208
+ function FormGroup(props) {
3209
+ const pathCtx = React__default.default.useContext(PathContext);
3210
+ return /* @__PURE__ */ React__default.default.createElement(
3211
+ PathContext.Provider,
3212
+ {
3213
+ value: {
3214
+ relativePath: [...pathCtx.relativePath, props.name],
3215
+ fullPath: [...pathCtx.fullPath, props.name]
2633
3216
  }
2634
3217
  },
2635
- importPath: "@plasmicpkgs/antd5/skinny/registerModal",
2636
- importName: "AntdModal"
2637
- });
2638
- }
2639
-
2640
- var __defProp$3 = Object.defineProperty;
2641
- var __defProps$2 = Object.defineProperties;
2642
- var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
2643
- var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
2644
- var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
2645
- var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
2646
- var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2647
- var __spreadValues$3 = (a, b) => {
2648
- for (var prop in b || (b = {}))
2649
- if (__hasOwnProp$3.call(b, prop))
2650
- __defNormalProp$3(a, prop, b[prop]);
2651
- if (__getOwnPropSymbols$3)
2652
- for (var prop of __getOwnPropSymbols$3(b)) {
2653
- if (__propIsEnum$3.call(b, prop))
2654
- __defNormalProp$3(a, prop, b[prop]);
2655
- }
2656
- return a;
2657
- };
2658
- var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
2659
- var __objRest$3 = (source, exclude) => {
2660
- var target = {};
2661
- for (var prop in source)
2662
- if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
2663
- target[prop] = source[prop];
2664
- if (source != null && __getOwnPropSymbols$3)
2665
- for (var prop of __getOwnPropSymbols$3(source)) {
2666
- if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
2667
- target[prop] = source[prop];
2668
- }
2669
- return target;
2670
- };
2671
- const RadioGroup = antd.Radio.Group;
2672
- const AntdRadio = antd.Radio;
2673
- antd.Radio.Button;
2674
- function AntdRadioGroup(props) {
2675
- const _a = props, { onChange } = _a, rest = __objRest$3(_a, ["onChange"]);
2676
- const wrappedOnChange = React__default.default.useMemo(() => {
2677
- if (onChange) {
2678
- return (event) => onChange(event.target.value);
2679
- } else {
2680
- return void 0;
2681
- }
2682
- }, [onChange]);
2683
- return /* @__PURE__ */ React__default.default.createElement(RadioGroup, __spreadProps$2(__spreadValues$3({}, rest), { onChange: wrappedOnChange }));
3218
+ props.children
3219
+ );
2684
3220
  }
2685
- function registerRadio(loader) {
2686
- registerComponentHelper(loader, AntdRadio, {
2687
- name: "plasmic-antd5-radio",
2688
- displayName: "Radio",
3221
+ const formGroupComponentName = "plasmic-antd5-form-group";
3222
+ function registerFormGroup(loader) {
3223
+ registerComponentHelper(loader, FormGroup, {
3224
+ name: formGroupComponentName,
3225
+ displayName: "Form Field Group",
3226
+ parentComponentName: formComponentName,
3227
+ actions: COMMON_ACTIONS,
2689
3228
  props: {
2690
- value: {
2691
- type: "string",
2692
- description: "The radio option value"
3229
+ name: {
3230
+ type: "string"
2693
3231
  },
2694
- disabled: {
2695
- type: "boolean",
2696
- defaultValueHint: false
3232
+ children: {
3233
+ type: "slot"
3234
+ }
3235
+ },
3236
+ importPath: "@plasmicpkgs/antd5/skinny/registerForm",
3237
+ importName: "FormGroup"
3238
+ });
3239
+ }
3240
+ const FormListWrapper = React__default.default.forwardRef(function FormListWrapper2(props, ref) {
3241
+ var _a;
3242
+ const relativeFormItemName = useFormItemRelativeName(props.name);
3243
+ const fullFormItemName = useFormItemFullName(props.name);
3244
+ const operationsRef = React__default.default.useRef(
3245
+ void 0
3246
+ );
3247
+ React__default.default.useImperativeHandle(
3248
+ ref,
3249
+ () => ({
3250
+ add(defaultValue, insertIndex) {
3251
+ if (operationsRef.current) {
3252
+ const { add } = operationsRef.current[1];
3253
+ add(defaultValue, insertIndex);
3254
+ }
2697
3255
  },
2698
- autoFocus: {
2699
- type: "boolean",
2700
- description: "If focused when first shown",
2701
- defaultValueHint: false,
2702
- advanced: true
3256
+ remove(index) {
3257
+ if (operationsRef.current) {
3258
+ const { remove } = operationsRef.current[1];
3259
+ remove(index);
3260
+ }
2703
3261
  },
3262
+ move(from, to) {
3263
+ if (operationsRef.current) {
3264
+ const { move } = operationsRef.current[1];
3265
+ move(from, to);
3266
+ }
3267
+ }
3268
+ }),
3269
+ [operationsRef]
3270
+ );
3271
+ const inCanvas = !!host.usePlasmicCanvasContext();
3272
+ if (inCanvas) {
3273
+ const form = useFormInstanceMaybe();
3274
+ const prevPropValues = React__default.default.useRef({
3275
+ initialValue: props.initialValue,
3276
+ name: props.name
3277
+ });
3278
+ const { fireOnValuesChange, forceRemount } = (_a = React__default.default.useContext(InternalFormInstanceContext)) != null ? _a : {};
3279
+ React__default.default.useEffect(() => {
3280
+ if (prevPropValues.current.name !== props.name) {
3281
+ forceRemount == null ? void 0 : forceRemount();
3282
+ }
3283
+ if (fullFormItemName) {
3284
+ form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
3285
+ prevPropValues.current.initialValue = props.initialValue;
3286
+ fireOnValuesChange == null ? void 0 : fireOnValuesChange();
3287
+ }
3288
+ }, [props.initialValue, fullFormItemName]);
3289
+ }
3290
+ return /* @__PURE__ */ React__default.default.createElement(FormList, __spreadProps$2(__spreadValues$3({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
3291
+ operationsRef.current = args;
3292
+ return args[0].map((field, index) => /* @__PURE__ */ React__default.default.createElement(
3293
+ PathContext.Provider,
3294
+ {
3295
+ value: {
3296
+ relativePath: [field.name],
3297
+ fullPath: [...fullFormItemName != null ? fullFormItemName : [], field.name]
3298
+ }
3299
+ },
3300
+ /* @__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)))
3301
+ ));
3302
+ });
3303
+ });
3304
+ const formListComponentName = "plasmic-antd5-form-list";
3305
+ function registerFormList(loader) {
3306
+ registerComponentHelper(loader, FormListWrapper, {
3307
+ name: formListComponentName,
3308
+ parentComponentName: formComponentName,
3309
+ displayName: "Form List",
3310
+ actions: COMMON_ACTIONS,
3311
+ props: {
2704
3312
  children: {
2705
3313
  type: "slot",
2706
3314
  defaultValue: [
2707
3315
  {
2708
- type: "text",
2709
- value: "Radio"
3316
+ type: "hbox",
3317
+ children: [
3318
+ {
3319
+ type: "component",
3320
+ name: formItemComponentName,
3321
+ props: {
3322
+ name: "firstName",
3323
+ label: {
3324
+ type: "text",
3325
+ value: "First name"
3326
+ },
3327
+ children: {
3328
+ type: "component",
3329
+ name: "plasmic-antd5-input"
3330
+ }
3331
+ }
3332
+ },
3333
+ {
3334
+ type: "component",
3335
+ name: formItemComponentName,
3336
+ props: {
3337
+ name: "lastName",
3338
+ label: {
3339
+ type: "text",
3340
+ value: "Last name"
3341
+ },
3342
+ children: {
3343
+ type: "component",
3344
+ name: "plasmic-antd5-input"
3345
+ }
3346
+ }
3347
+ }
3348
+ ]
2710
3349
  }
2711
3350
  ]
2712
- }
2713
- },
2714
- importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
2715
- importName: "AntdRadio",
2716
- parentComponentName: "plasmic-antd5-radio-group"
2717
- });
2718
- registerComponentHelper(loader, AntdRadio, {
2719
- name: "plasmic-antd5-radio-button",
2720
- displayName: "Radio Button",
2721
- props: {
2722
- value: {
2723
- type: "string",
2724
- description: "The radio option value"
2725
- },
2726
- disabled: {
2727
- type: "boolean",
2728
- defaultValueHint: false
2729
3351
  },
2730
- autoFocus: {
2731
- type: "boolean",
2732
- description: "If focused when first shown",
2733
- defaultValueHint: false,
2734
- advanced: true
3352
+ name: {
3353
+ type: "string",
3354
+ defaultValue: "guests"
2735
3355
  },
2736
- children: {
2737
- type: "slot",
3356
+ initialValue: {
3357
+ type: "array",
2738
3358
  defaultValue: [
2739
3359
  {
2740
- type: "text",
2741
- value: "Radio"
3360
+ firstName: "Jane",
3361
+ lastName: "Doe"
3362
+ },
3363
+ {
3364
+ firstName: "John",
3365
+ lastName: "Smith"
2742
3366
  }
2743
3367
  ]
2744
3368
  }
2745
3369
  },
2746
- importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
2747
- importName: "AntdRadioButton",
2748
- parentComponentName: "plasmic-antd5-radio-group"
2749
- });
2750
- registerComponentHelper(loader, AntdRadioGroup, {
2751
- name: "plasmic-antd5-radio-group",
2752
- displayName: "Radio Group",
2753
- props: {
2754
- value: {
2755
- type: "choice",
2756
- editOnly: true,
2757
- uncontrolledProp: "defaultValue",
2758
- description: "Default selected value",
2759
- options: (ps) => {
2760
- const options = /* @__PURE__ */ new Set();
2761
- traverseReactEltTree(ps.children, (elt) => {
2762
- var _a;
2763
- if (typeof ((_a = elt == null ? void 0 : elt.props) == null ? void 0 : _a.value) === "string") {
2764
- options.add(elt.props.value);
2765
- }
2766
- });
2767
- return Array.from(options.keys());
2768
- }
3370
+ refActions: {
3371
+ add: {
3372
+ displayName: "Add an item",
3373
+ argTypes: [
3374
+ {
3375
+ name: "defaultValue",
3376
+ displayName: "Default value",
3377
+ type: "object"
3378
+ },
3379
+ {
3380
+ name: "insertIndex",
3381
+ displayName: "Insert index",
3382
+ type: "number"
3383
+ }
3384
+ ]
2769
3385
  },
2770
- disabled: {
2771
- type: "boolean",
2772
- description: "Disables all radios",
2773
- defaultValueHint: false
3386
+ remove: {
3387
+ displayName: "Remove an item",
3388
+ argTypes: [
3389
+ {
3390
+ name: "index",
3391
+ displayName: "Index",
3392
+ type: "number"
3393
+ }
3394
+ ]
2774
3395
  },
2775
- children: {
2776
- type: "slot",
2777
- allowedComponents: [
2778
- "plasmic-antd5-radio",
2779
- "plasmic-antd5-radio-button"
2780
- ],
2781
- defaultValue: [
3396
+ move: {
3397
+ displayName: "Move field",
3398
+ argTypes: [
2782
3399
  {
2783
- type: "component",
2784
- name: "plasmic-antd5-radio",
2785
- props: {
2786
- value: "op1",
2787
- children: {
2788
- type: "text",
2789
- value: "Option 1"
2790
- }
2791
- }
3400
+ name: "from",
3401
+ displayName: "From",
3402
+ type: "number"
2792
3403
  },
2793
3404
  {
2794
- type: "component",
2795
- name: "plasmic-antd5-radio",
2796
- props: {
2797
- value: "op2",
2798
- children: {
2799
- type: "text",
2800
- value: "Option 2"
2801
- }
2802
- }
3405
+ name: "to",
3406
+ displayName: "To",
3407
+ type: "number"
2803
3408
  }
2804
3409
  ]
2805
- },
2806
- onChange: {
2807
- type: "eventHandler",
2808
- argTypes: [{ name: "value", type: "string" }]
2809
- }
2810
- },
2811
- states: {
2812
- value: {
2813
- type: "writable",
2814
- valueProp: "value",
2815
- onChangeProp: "onChange",
2816
- variableType: "text"
2817
3410
  }
2818
3411
  },
2819
- importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
2820
- importName: "AntdRadioGroup"
3412
+ importPath: "@plasmicpkgs/antd5/skinny/registerForm",
3413
+ importName: "FormListWrapper"
2821
3414
  });
2822
3415
  }
2823
3416
 
@@ -2852,217 +3445,110 @@ var __objRest$2 = (source, exclude) => {
2852
3445
  }
2853
3446
  return target;
2854
3447
  };
2855
- const AntdOption = antd.Select.Option;
2856
- const AntdOptionGroup = antd.Select.OptGroup;
2857
- function AntdSelect(props) {
2858
- const _a = props, {
2859
- popupClassName,
2860
- popupScopeClassName,
2861
- defaultStylesClassName,
2862
- suffixIcon,
2863
- mode,
2864
- useChildren
2865
- } = _a, rest = __objRest$2(_a, [
2866
- "popupClassName",
2867
- "popupScopeClassName",
2868
- "defaultStylesClassName",
2869
- "suffixIcon",
2870
- "mode",
2871
- "useChildren"
2872
- ]);
2873
- const curated = __spreadValues$2({}, rest);
2874
- if (useChildren) {
2875
- curated.options = void 0;
2876
- }
2877
- return /* @__PURE__ */ React__default.default.createElement(
2878
- antd.Select,
2879
- __spreadValues$2(__spreadProps$1(__spreadValues$2({}, curated), {
2880
- mode: !mode || mode === "single" ? void 0 : mode,
2881
- popupClassName: `${defaultStylesClassName} ${popupScopeClassName} ${popupClassName}`
2882
- }), suffixIcon && { suffixIcon })
3448
+ function AntdModal(props) {
3449
+ const _a = props, { onOpenChange, onOk, onCancel, open, footer } = _a, rest = __objRest$2(_a, ["onOpenChange", "onOk", "onCancel", "open", "footer"]);
3450
+ const memoOnOk = React__default.default.useMemo(() => {
3451
+ if (onOpenChange || onOk) {
3452
+ return (e) => {
3453
+ onOpenChange == null ? void 0 : onOpenChange(false);
3454
+ onOk == null ? void 0 : onOk(e);
3455
+ };
3456
+ } else {
3457
+ return void 0;
3458
+ }
3459
+ }, [onOpenChange, onOk]);
3460
+ const memoOnCancel = React__default.default.useMemo(() => {
3461
+ if (onOpenChange || onCancel) {
3462
+ return (e) => {
3463
+ onOpenChange == null ? void 0 : onOpenChange(false);
3464
+ onCancel == null ? void 0 : onCancel(e);
3465
+ };
3466
+ } else {
3467
+ return void 0;
3468
+ }
3469
+ }, [onOpenChange, onCancel]);
3470
+ return /* @__PURE__ */ React__default.default.createElement(
3471
+ antd.Modal,
3472
+ __spreadProps$1(__spreadValues$2({}, rest), {
3473
+ onOk: memoOnOk,
3474
+ onCancel: memoOnCancel,
3475
+ open,
3476
+ footer: footer != null ? footer : void 0
3477
+ })
2883
3478
  );
2884
3479
  }
2885
- function registerSelect(loader) {
2886
- registerComponentHelper(loader, AntdSelect, {
2887
- name: "plasmic-antd5-select",
2888
- displayName: "Select",
3480
+ function registerModal(loader) {
3481
+ registerComponentHelper(loader, AntdModal, {
3482
+ name: "plasmic-antd5-modal",
3483
+ displayName: "Modal",
2889
3484
  props: {
2890
- options: {
2891
- type: "array",
2892
- hidden: (ps) => !!ps.useChildren,
2893
- itemType: {
2894
- type: "object",
2895
- nameFunc: (item) => item.label,
2896
- fields: {
2897
- value: "string",
2898
- label: "string"
2899
- }
2900
- },
2901
- defaultValue: [
2902
- {
2903
- value: "option1",
2904
- label: "Option 1"
2905
- },
2906
- {
2907
- value: "option2",
2908
- label: "Option 2"
2909
- }
2910
- ]
2911
- },
2912
- useChildren: {
2913
- displayName: "Use slot",
2914
- type: "boolean",
2915
- defaultValueHint: false,
2916
- description: "Instead of configuring a list of options, customize the contents of the Select by dragging and dropping options in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Options, and also use Option Groups."
3485
+ open: {
3486
+ type: "boolean"
2917
3487
  },
2918
3488
  children: {
2919
3489
  type: "slot",
2920
- allowedComponents: [
2921
- "plasmic-antd5-option",
2922
- "plasmic-antd5-option-group"
2923
- ],
2924
- hidden: (ps) => !ps.useChildren
3490
+ defaultValue: {
3491
+ type: "vbox",
3492
+ children: ["Modal content"]
3493
+ }
2925
3494
  },
2926
- placeholder: {
3495
+ title: {
2927
3496
  type: "slot",
2928
- defaultValue: "Select..."
3497
+ defaultValue: "Modal title"
2929
3498
  },
2930
- suffixIcon: {
3499
+ footer: {
2931
3500
  type: "slot",
2932
3501
  hidePlaceholder: true
2933
3502
  },
2934
- open: {
2935
- type: "boolean",
2936
- editOnly: true,
2937
- uncontrolledProp: "defaultOpen"
2938
- },
2939
- value: {
2940
- type: "choice",
2941
- displayName: "Selected value",
2942
- editOnly: true,
2943
- uncontrolledProp: "defaultValue",
2944
- description: "Initial selected option",
2945
- multiSelect: (ps) => ps.mode === "multiple",
2946
- options: (ps) => {
2947
- var _a;
2948
- const options = /* @__PURE__ */ new Set();
2949
- if (!ps.useChildren) {
2950
- return ((_a = ps.options) != null ? _a : []).map((o) => {
2951
- var _a2;
2952
- return {
2953
- value: o.value || "",
2954
- label: (_a2 = o.label) != null ? _a2 : o.value || ""
2955
- };
2956
- });
2957
- } else {
2958
- traverseReactEltTree(ps.children, (elt) => {
2959
- var _a2;
2960
- if ((elt == null ? void 0 : elt.type) === antd.Select.Option && typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
2961
- options.add(elt.props.value);
2962
- }
2963
- });
2964
- }
2965
- return Array.from(options.keys());
2966
- }
2967
- },
2968
- mode: {
2969
- type: "choice",
2970
- options: ["single", "multiple"],
2971
- defaultValueHint: "single"
2972
- },
2973
- size: {
2974
- type: "choice",
2975
- options: ["small", "middle", "large"]
3503
+ closeIcon: {
3504
+ type: "slot",
3505
+ hidePlaceholder: true
2976
3506
  },
2977
- disabled: {
2978
- type: "boolean",
2979
- defaultValueHint: false
3507
+ onOk: {
3508
+ type: "eventHandler",
3509
+ argTypes: []
2980
3510
  },
2981
- showSearch: {
2982
- type: "boolean",
2983
- defaultValueHint: false,
2984
- advanced: true
3511
+ onCancel: {
3512
+ type: "eventHandler",
3513
+ argTypes: []
2985
3514
  },
2986
- status: {
2987
- type: "choice",
2988
- options: ["error", "warning"],
3515
+ okText: {
3516
+ type: "string",
3517
+ hidden: (ps) => !!ps.footer,
2989
3518
  advanced: true
2990
3519
  },
2991
- bordered: {
2992
- type: "boolean",
2993
- defaultValueHint: true
2994
- },
2995
- autoFocus: {
2996
- type: "boolean",
2997
- displayName: "Focus automatically",
2998
- defaultValueHint: false,
3520
+ cancelText: {
3521
+ type: "string",
3522
+ hidden: (ps) => !!ps.footer,
2999
3523
  advanced: true
3000
3524
  },
3001
- onChange: {
3525
+ onOpenChange: {
3002
3526
  type: "eventHandler",
3003
- argTypes: [
3004
- { name: "value", type: "string" },
3005
- { name: "option", type: "object" }
3006
- ]
3007
- },
3008
- dropdownMatchSelectWidth: {
3009
- type: "boolean",
3010
- displayName: "Should dropdown match trigger button width?",
3011
- defaultValueHint: true,
3012
- advanced: true
3013
- },
3014
- triggerClassName: {
3015
- type: "class",
3016
- displayName: "Trigger styles",
3017
- noSelf: true,
3018
- selectors: [
3019
- {
3020
- selector: ":component .ant-select-selector.ant-select-selector",
3021
- label: "Base"
3022
- },
3023
- {
3024
- selector: ":component .ant-select-selector:hover",
3025
- label: "Hovered"
3026
- }
3027
- ],
3028
- advanced: true
3527
+ argTypes: [{ name: "open", type: "boolean" }]
3029
3528
  },
3030
- popupScopeClassName: {
3529
+ modalScopeClassName: {
3031
3530
  type: "styleScopeClass",
3032
- scopeName: "popup"
3033
- },
3034
- popupClassName: {
3035
- type: "class",
3036
- displayName: "Popup styles",
3037
- selectors: [],
3038
- advanced: true
3531
+ scopeName: "modal"
3039
3532
  },
3040
- optionClassName: {
3533
+ modalClassName: {
3041
3534
  type: "class",
3042
- displayName: "Option styles",
3535
+ displayName: "Modal content styles",
3043
3536
  noSelf: true,
3044
3537
  selectors: [
3045
3538
  {
3046
- selector: ":popup.ant-select-dropdown .ant-select-item-option",
3539
+ selector: ":modal .ant-modal .ant-modal-content",
3047
3540
  label: "Base"
3048
- },
3049
- {
3050
- selector: ":popup.ant-select-dropdown .ant-select-item-option-active",
3051
- label: "Focused"
3052
- },
3053
- {
3054
- selector: ":popup.ant-select-dropdown .ant-select-item-option-selected",
3055
- label: "Selected"
3056
3541
  }
3057
3542
  ],
3058
3543
  advanced: true
3059
3544
  },
3060
- placeholderClassName: {
3545
+ closeButtonClassName: {
3061
3546
  type: "class",
3062
- displayName: "Placeholder styles",
3547
+ displayName: "Close button styles",
3548
+ noSelf: true,
3063
3549
  selectors: [
3064
3550
  {
3065
- selector: ":component .ant-select-selector .ant-select-selection-placeholder",
3551
+ selector: ":modal .ant-modal .ant-modal-close",
3066
3552
  label: "Base"
3067
3553
  }
3068
3554
  ],
@@ -3070,79 +3556,18 @@ function registerSelect(loader) {
3070
3556
  },
3071
3557
  defaultStylesClassName: {
3072
3558
  type: "themeResetClass"
3073
- },
3074
- tagRender: {
3075
- type: "slot",
3076
- renderPropParams: ["tagProps"],
3077
- hidePlaceholder: true
3078
3559
  }
3079
3560
  },
3080
3561
  states: {
3081
- value: {
3562
+ open: {
3082
3563
  type: "writable",
3083
- valueProp: "value",
3084
- onChangeProp: "onChange",
3085
- variableType: "text"
3086
- }
3087
- },
3088
- importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
3089
- importName: "AntdSelect"
3090
- });
3091
- registerComponentHelper(loader, AntdOption, {
3092
- name: "plasmic-antd5-option",
3093
- displayName: "Option",
3094
- parentComponentName: "plasmic-antd5-select",
3095
- props: {
3096
- children: {
3097
- type: "slot",
3098
- defaultValue: "Option"
3099
- },
3100
- value: {
3101
- type: "string"
3102
- }
3103
- },
3104
- importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
3105
- importName: "AntdOption"
3106
- });
3107
- registerComponentHelper(loader, AntdOptionGroup, {
3108
- name: "plasmic-antd5-option-group",
3109
- displayName: "Option Group",
3110
- parentComponentName: "plasmic-antd5-select",
3111
- props: {
3112
- children: {
3113
- type: "slot",
3114
- defaultValue: [
3115
- {
3116
- type: "component",
3117
- name: "plasmic-antd5-option",
3118
- props: {
3119
- value: "option1",
3120
- children: {
3121
- type: "text",
3122
- value: "Option 1"
3123
- }
3124
- }
3125
- },
3126
- {
3127
- type: "component",
3128
- name: "plasmic-antd5-option",
3129
- props: {
3130
- value: "option2",
3131
- children: {
3132
- type: "text",
3133
- value: "Option 1"
3134
- }
3135
- }
3136
- }
3137
- ]
3138
- },
3139
- label: {
3140
- type: "slot",
3141
- defaultValue: "Group label"
3564
+ valueProp: "open",
3565
+ onChangeProp: "onOpenChange",
3566
+ variableType: "boolean"
3142
3567
  }
3143
3568
  },
3144
- importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
3145
- importName: "AntdOptionGroup"
3569
+ importPath: "@plasmicpkgs/antd5/skinny/registerModal",
3570
+ importName: "AntdModal"
3146
3571
  });
3147
3572
  }
3148
3573
 
@@ -3512,7 +3937,7 @@ function UploadWrapper(props) {
3512
3937
  );
3513
3938
  }
3514
3939
  function registerUpload(loader) {
3515
- registerComponentHelper(loader, UploadWrapper, {
3940
+ registerComponentHelper(loader, UploadWrapper, __spreadProps(__spreadValues({
3516
3941
  name: "plasmic-antd5-upload",
3517
3942
  displayName: "Upload",
3518
3943
  props: {
@@ -3591,10 +4016,11 @@ function registerUpload(loader) {
3591
4016
  variableType: "array",
3592
4017
  onChangeProp: "onFilesChange"
3593
4018
  }
3594
- },
4019
+ }
4020
+ }, { trapsSelection: true }), {
3595
4021
  importPath: "@plasmicpkgs/antd5/skinny/registerUpload",
3596
4022
  importName: "UploadWrapper"
3597
- });
4023
+ }));
3598
4024
  }
3599
4025
 
3600
4026
  function registerAll(loader) {
@@ -3603,6 +4029,7 @@ function registerAll(loader) {
3603
4029
  registerSelect(loader);
3604
4030
  registerTable(loader);
3605
4031
  registerCheckbox(loader);
4032
+ registerSwitch(loader);
3606
4033
  registerRadio(loader);
3607
4034
  registerModal(loader);
3608
4035
  registerButton(loader);
@@ -3618,6 +4045,29 @@ function registerAll(loader) {
3618
4045
  registerNumberInput(loader);
3619
4046
  registerUpload(loader);
3620
4047
  }
4048
+ const componentNameToInputType = {
4049
+ [inputComponentName]: InputType.Text,
4050
+ [textAreaComponentName]: InputType.TextArea,
4051
+ [passwordComponentName]: InputType.Password,
4052
+ [inputNumberComponentName]: InputType.Number,
4053
+ [selectComponentName]: InputType.Select,
4054
+ [optionComponentName]: InputType.Option,
4055
+ [optionGroupComponentName]: InputType.OptionGroup,
4056
+ [radioComponentName]: InputType.Radio,
4057
+ [radioGroupComponentName]: InputType.RadioGroup,
4058
+ [checkboxComponentName]: InputType.Checkbox
4059
+ };
4060
+ const inputTypeToComponentName = Object.fromEntries(
4061
+ Object.entries(componentNameToInputType).reverse()
4062
+ );
3621
4063
 
4064
+ exports.InputType = InputType;
4065
+ exports.buttonComponentName = buttonComponentName;
4066
+ exports.componentNameToInputType = componentNameToInputType;
4067
+ exports.formComponentName = formComponentName;
4068
+ exports.formGroupComponentName = formGroupComponentName;
4069
+ exports.formItemComponentName = formItemComponentName;
4070
+ exports.formListComponentName = formListComponentName;
4071
+ exports.inputTypeToComponentName = inputTypeToComponentName;
3622
4072
  exports.registerAll = registerAll;
3623
4073
  //# sourceMappingURL=index.js.map