@react-typed-forms/schemas 9.1.0 → 9.2.0

package/lib/index.js

@@ -66,6 +66,7 @@ exports.ControlAdornmentType = void 0;
 exports.DataRenderType = void 0;
 (function (DataRenderType) {
   DataRenderType["Standard"] = "Standard";
+  DataRenderType["Textfield"] = "Textfield";
   DataRenderType["Radio"] = "Radio";
   DataRenderType["HtmlEditor"] = "HtmlEditor";
   DataRenderType["IconList"] = "IconList";
@@ -143,6 +144,9 @@ function isFlexRenderer(options) {
 function isDisplayOnlyRenderer(options) {
   return options.type === exports.DataRenderType.DisplayOnly;
 }
+function isTextfieldRenderer(options) {
+  return options.type === exports.DataRenderType.Textfield;
+}
 function isDataGroupRenderer(options) {
   return options.type === exports.DataRenderType.Group;
 }
@@ -857,7 +861,7 @@ function trackedStructure(c, tracker) {
         if (nc == null) return null;
         return trackedStructure(nc, tracker);
       }
-      if (p in cv) return trackedStructure(cc.fields[p], tracker);
+      if (p in cc.fields || p in cv) return trackedStructure(cc.fields[p], tracker);
       return undefined;
     }
   });
@@ -1149,7 +1153,7 @@ function defaultTextValue(f, value) {
   }
 }
 
-var _excluded$1 = ["definition", "field", "control", "options", "elementRenderer", "style", "allowedOptions"];
+var _excluded$3 = ["definition", "field", "control", "options", "elementRenderer", "style", "allowedOptions"];
 var AppendAdornmentPriority = 0;
 var WrapAdornmentPriority = 1000;
 exports.LabelType = void 0;
@@ -1375,12 +1379,13 @@ function defaultDataProps(_ref4) {
     elementRenderer = _ref4.elementRenderer,
     style = _ref4.style,
     allowedOptions = _ref4.allowedOptions,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded$3);
   var className = cc(definition.styleClass);
   var required = !!definition.required;
   var fieldOptions = ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options;
   var allowed = (_allowedOptions$value = allowedOptions == null ? void 0 : allowedOptions.value) != null ? _allowedOptions$value : [];
   return _extends({
+    definition: definition,
     childDefinitions: (_definition$children2 = definition.children) != null ? _definition$children2 : [],
     control: control,
     field: field,
@@ -1593,119 +1598,424 @@ function controlTitle(title, field) {
   return title ? title : fieldDisplayName(field);
 }
 
-var _excluded = ["data", "display", "className", "style"],
-  _excluded2 = ["control", "convert"],
-  _excluded3 = ["errorText", "value", "onChange"],
-  _excluded4 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText"];
-function createFormRenderer(customRenderers, defaultRenderers) {
-  var _customRenderers$find;
-  if (customRenderers === void 0) {
-    customRenderers = [];
+function isIconAdornment(a) {
+  return a.type === exports.ControlAdornmentType.Icon;
+}
+function createLayoutRenderer(render, options) {
+  return _extends({
+    type: "layout",
+    render: render
+  }, options);
+}
+function createArrayRenderer(render, options) {
+  return _extends({
+    type: "array",
+    render: render
+  }, options);
+}
+function createDataRenderer(render, options) {
+  return _extends({
+    type: "data",
+    render: render
+  }, options);
+}
+function createGroupRenderer(render, options) {
+  return _extends({
+    type: "group",
+    render: render
+  }, options);
+}
+function createDisplayRenderer(render, options) {
+  return _extends({
+    type: "display",
+    render: render
+  }, options);
+}
+function createLabelRenderer(render, options) {
+  return _extends({
+    type: "label",
+    render: render
+  }, options);
+}
+function createVisibilityRenderer(render, options) {
+  return _extends({
+    type: "visibility",
+    render: render
+  }, options);
+}
+function createAdornmentRenderer(render, options) {
+  return _extends({
+    type: "adornment"
+  }, options, {
+    render: render
+  });
+}
+
+var defaultTailwindTheme = {
+  label: {
+    groupLabelClass: "font-bold",
+    requiredElement: /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "text-red-500"
+    }, " *")
+  },
+  array: {
+    removableClass: "grid grid-cols-[1fr_auto] items-center gap-x-2",
+    childClass: "grow my-2",
+    addActionClass: "my-2"
+  },
+  group: {
+    standardClassName: "flex flex-col gap-4",
+    gridClassName: "gap-x-2 gap-y-4",
+    flexClassName: "gap-2"
+  },
+  action: {
+    className: "bg-primary-500 rounded-lg p-3 text-white"
+  },
+  layout: {
+    className: "flex flex-col",
+    errorClass: "text-sm text-danger-500"
+  },
+  data: {
+    displayOnlyClass: "flex flex-row items-center gap-2"
   }
-  if (defaultRenderers === void 0) {
-    defaultRenderers = createClassStyledRenderers();
+};
+
+var _excluded$2 = ["data", "display", "className", "style"];
+function createDefaultDisplayRenderer(options) {
+  if (options === void 0) {
+    options = {};
   }
-  var dataRegistrations = customRenderers.filter(isDataRegistration);
-  var groupRegistrations = customRenderers.filter(isGroupRegistration);
-  var adornmentRegistrations = customRenderers.filter(isAdornmentRegistration);
-  var displayRegistrations = customRenderers.filter(isDisplayRegistration);
-  var labelRenderers = customRenderers.filter(isLabelRegistration);
-  var arrayRenderers = customRenderers.filter(isArrayRegistration);
-  var actionRenderers = customRenderers.filter(isActionRegistration);
-  var layoutRenderers = customRenderers.filter(isLayoutRegistration);
-  var visibilityRenderer = (_customRenderers$find = customRenderers.find(isVisibilityRegistration)) != null ? _customRenderers$find : defaultRenderers.visibility;
-  var formRenderers = {
-    renderAction: renderAction,
-    renderData: renderData,
-    renderGroup: renderGroup,
-    renderDisplay: renderDisplay,
-    renderLabel: renderLabel,
-    renderArray: renderArray,
-    renderAdornment: renderAdornment,
-    renderLayout: renderLayout,
-    renderVisibility: visibilityRenderer.render
+  return {
+    render: function render(props) {
+      return /*#__PURE__*/React__default["default"].createElement(DefaultDisplay, _extends({}, options, props));
+    },
+    type: "display"
   };
-  function renderLayout(props) {
-    var _layoutRenderers$find;
-    var renderer = (_layoutRenderers$find = layoutRenderers.find(function (x) {
-      return !x.match || x.match(props);
-    })) != null ? _layoutRenderers$find : defaultRenderers.renderLayout;
-    return renderer.render(props, formRenderers);
-  }
-  function renderAdornment(props) {
-    var _adornmentRegistratio;
-    var renderer = (_adornmentRegistratio = adornmentRegistrations.find(function (x) {
-      return isOneOf(x.adornmentType, props.adornment.type);
-    })) != null ? _adornmentRegistratio : defaultRenderers.adornment;
-    return renderer.render(props);
-  }
-  function renderArray(props) {
-    var _arrayRenderers$;
-    return ((_arrayRenderers$ = arrayRenderers[0]) != null ? _arrayRenderers$ : defaultRenderers.array).render(props, formRenderers);
-  }
-  function renderLabel(props, labelStart, labelEnd) {
-    var _labelRenderers$find;
-    var renderer = (_labelRenderers$find = labelRenderers.find(function (x) {
-      return isOneOf(x.labelType, props.type);
-    })) != null ? _labelRenderers$find : defaultRenderers.label;
-    return renderer.render(props, labelStart, labelEnd, formRenderers);
-  }
-  function renderData(props) {
-    var _dataRegistrations$fi;
-    var renderType = props.renderOptions.type,
-      field = props.field;
-    var options = hasOptions(props);
-    var renderer = (_dataRegistrations$fi = dataRegistrations.find(function (x) {
-      var _x$collection, _field$collection, _x$options;
-      return ((_x$collection = x.collection) != null ? _x$collection : false) === ((_field$collection = field.collection) != null ? _field$collection : false) && ((_x$options = x.options) != null ? _x$options : false) === options && isOneOf(x.schemaType, field.type) && isOneOf(x.renderType, renderType) && (!x.match || x.match(props));
-    })) != null ? _dataRegistrations$fi : defaultRenderers.data;
-    var result = renderer.render(props, formRenderers);
-    if (typeof result === "function") return result;
-    return function (l) {
-      return _extends({}, l, {
-        children: result
-      });
-    };
-  }
-  function renderGroup(props) {
-    var _groupRegistrations$f;
-    var renderType = props.renderOptions.type;
-    var renderer = (_groupRegistrations$f = groupRegistrations.find(function (x) {
-      return isOneOf(x.renderType, renderType);
-    })) != null ? _groupRegistrations$f : defaultRenderers.group;
-    var result = renderer.render(props, formRenderers);
-    if (typeof result === "function") return result;
-    return function (l) {
-      return _extends({}, l, {
-        children: result
-      });
-    };
+}
+function DefaultDisplay(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var _display$value;
+    var data = _ref.data,
+      display = _ref.display,
+      className = _ref.className,
+      style = _ref.style,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    switch (data.type) {
+      case exports.DisplayDataType.Icon:
+        return /*#__PURE__*/React__default["default"].createElement("i", {
+          style: style,
+          className: clsx__default["default"](getOverrideClass(className), display ? display.value : data.iconClass)
+        });
+      case exports.DisplayDataType.Text:
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          style: style,
+          className: rendererClass(className, options.textClassName)
+        }, display ? display.value : data.text);
+      case exports.DisplayDataType.Html:
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          style: style,
+          className: rendererClass(className, options.htmlClassName),
+          dangerouslySetInnerHTML: {
+            __html: display ? (_display$value = display.value) != null ? _display$value : "" : data.html
+          }
+        });
+      default:
+        return /*#__PURE__*/React__default["default"].createElement("h1", null, "Unknown display type: ", data.type);
+    }
+  } finally {
+    _effect();
   }
-  function renderAction(props) {
-    var _actionRenderers$find;
-    var renderer = (_actionRenderers$find = actionRenderers.find(function (x) {
-      return isOneOf(x.actionType, props.actionId);
-    })) != null ? _actionRenderers$find : defaultRenderers.action;
-    return renderer.render(props, formRenderers);
+}
+
+function DefaultLayout(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var errorClass = _ref.errorClass,
+      _ref$layout = _ref.layout,
+      controlEnd = _ref$layout.controlEnd,
+      controlStart = _ref$layout.controlStart,
+      label = _ref$layout.label,
+      children = _ref$layout.children,
+      errorControl = _ref$layout.errorControl;
+    var ec = errorControl;
+    var errorText = ec && ec.touched ? ec.error : undefined;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label, controlStart, children, errorText && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: errorClass
+    }, errorText), controlEnd);
+  } finally {
+    _effect();
   }
-  function renderDisplay(props) {
-    var _displayRegistrations;
-    var renderType = props.data.type;
-    var renderer = (_displayRegistrations = displayRegistrations.find(function (x) {
-      return isOneOf(x.renderType, renderType);
-    })) != null ? _displayRegistrations : defaultRenderers.display;
-    return renderer.render(props, formRenderers);
+}
+
+function createDefaultVisibilityRenderer() {
+  return createVisibilityRenderer(function (props) {
+    return /*#__PURE__*/React__default["default"].createElement(DefaultVisibility, props);
+  });
+}
+function DefaultVisibility(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var visibility = _ref.visibility,
+      children = _ref.children,
+      className = _ref.className,
+      style = _ref.style,
+      divRef = _ref.divRef;
+    var v = visibility.value;
+    React.useEffect(function () {
+      if (v) {
+        visibility.setValue(function (ex) {
+          return {
+            visible: v.visible,
+            showing: v.visible
+          };
+        });
+      }
+    }, [v == null ? void 0 : v.visible]);
+    return v != null && v.visible ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: clsx__default["default"](className),
+      style: style,
+      ref: divRef
+    }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+  } finally {
+    _effect();
   }
-  return formRenderers;
 }
-function createDefaultActionRenderer(options) {
+
+var _excluded$1 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
+function createSelectRenderer(options) {
   if (options === void 0) {
     options = {};
   }
-  function render(_ref) {
-    var onClick = _ref.onClick,
-      actionText = _ref.actionText;
-    return /*#__PURE__*/React__default["default"].createElement("button", {
+  return createDataRenderer(function (props, asArray) {
+    return /*#__PURE__*/React__default["default"].createElement(SelectDataRenderer, {
+      className: rendererClass(props.className, options.className),
+      state: props.control,
+      id: props.id,
+      readonly: props.readonly,
+      options: props.options,
+      required: props.required,
+      emptyText: options.emptyText,
+      requiredText: options.requiredText,
+      convert: createSelectConversion(props.field.type)
+    });
+  }, {
+    options: true
+  });
+}
+function SelectDataRenderer(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var state = _ref.state,
+      options = _ref.options,
+      className = _ref.className,
+      convert = _ref.convert,
+      required = _ref.required,
+      _ref$emptyText = _ref.emptyText,
+      emptyText = _ref$emptyText === void 0 ? "N/A" : _ref$emptyText,
+      _ref$requiredText = _ref.requiredText,
+      requiredText = _ref$requiredText === void 0 ? "<please select>" : _ref$requiredText,
+      readonly = _ref.readonly,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    var value = state.value,
+      disabled = state.disabled;
+    var _useState = React.useState(!required || value == null),
+      showEmpty = _useState[0];
+    var optionStringMap = React.useMemo(function () {
+      return Object.fromEntries(options.map(function (x) {
+        return [convert(x.value), x.value];
+      }));
+    }, [options]);
+    return /*#__PURE__*/React__default["default"].createElement("select", _extends({}, props, {
+      className: className,
+      onChange: function onChange(v) {
+        return state.value = optionStringMap[v.target.value];
+      },
+      value: convert(value),
+      disabled: disabled || readonly
+    }), showEmpty && /*#__PURE__*/React__default["default"].createElement("option", {
+      value: ""
+    }, required ? requiredText : emptyText), options.map(function (x, i) {
+      return /*#__PURE__*/React__default["default"].createElement("option", {
+        key: i,
+        value: convert(x.value),
+        disabled: !!x.disabled
+      }, x.name);
+    }));
+  } finally {
+    _effect();
+  }
+}
+function createSelectConversion(ft) {
+  switch (ft) {
+    case exports.FieldType.String:
+    case exports.FieldType.Int:
+    case exports.FieldType.Double:
+      return function (a) {
+        return a;
+      };
+    default:
+      return function (a) {
+        var _a$toString;
+        return (_a$toString = a == null ? void 0 : a.toString()) != null ? _a$toString : "";
+      };
+  }
+}
+
+function DefaultDisplayOnly(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var _ref2;
+    var control = _ref.control,
+      className = _ref.className,
+      emptyText = _ref.emptyText,
+      schemaInterface = _ref.schemaInterface,
+      field = _ref.field,
+      style = _ref.style;
+    var v = control.value;
+    var text = (_ref2 = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref2 : "";
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style,
+      className: rendererClass(className)
+    }, text);
+  } finally {
+    _effect();
+  }
+}
+
+var _excluded = ["control", "convert"],
+  _excluded2 = ["errorText", "value", "onChange"];
+function ControlInput(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var control = _ref.control,
+      convert = _ref.convert,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    var _formControlProps = core.formControlProps(control),
+      errorText = _formControlProps.errorText,
+      value = _formControlProps.value,
+      onChange = _formControlProps.onChange,
+      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
+    return /*#__PURE__*/React__default["default"].createElement("input", _extends({}, inputProps, {
+      type: convert[0],
+      value: value == null ? "" : convert[2](value),
+      onChange: function onChange(e) {
+        control.value = convert[1](e.target.value);
+      }
+    }, props));
+  } finally {
+    _effect();
+  }
+}
+function createInputConversion(ft) {
+  switch (ft) {
+    case exports.FieldType.String:
+      return ["text", function (a) {
+        return a;
+      }, function (a) {
+        return a;
+      }];
+    case exports.FieldType.Bool:
+      return ["text", function (a) {
+        return a === "true";
+      }, function (a) {
+        var _a$toString;
+        return (_a$toString = a == null ? void 0 : a.toString()) != null ? _a$toString : "";
+      }];
+    case exports.FieldType.Int:
+      return ["number", function (a) {
+        return a !== "" ? parseInt(a) : null;
+      }, function (a) {
+        return a == null ? "" : a;
+      }];
+    case exports.FieldType.Date:
+      return ["date", function (a) {
+        return a;
+      }, function (a) {
+        return a;
+      }];
+    case exports.FieldType.Double:
+      return ["number", function (a) {
+        return parseFloat(a);
+      }, function (a) {
+        return a;
+      }];
+    default:
+      return ["text", function (a) {
+        return a;
+      }, function (a) {
+        return a;
+      }];
+  }
+}
+
+function createRadioRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return createDataRenderer(function (p) {
+    return /*#__PURE__*/React__default["default"].createElement(RadioButtons, _extends({}, options, p, {
+      className: rendererClass(p.className, options.className),
+      control: p.control
+    }));
+  }, {
+    renderType: exports.DataRenderType.Radio
+  });
+}
+function RadioButtons(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var control = _ref.control,
+      options = _ref.options,
+      labelClass = _ref.labelClass,
+      radioClass = _ref.radioClass,
+      readonly = _ref.readonly,
+      entryClass = _ref.entryClass,
+      className = _ref.className,
+      id = _ref.id;
+    var disabled = control.disabled;
+    var canChange = !disabled && !readonly;
+    var name = "r" + control.uniqueId;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: className,
+      id: id
+    }, /*#__PURE__*/React__default["default"].createElement(core.RenderArrayElements, {
+      array: options == null ? void 0 : options.filter(function (x) {
+        return x.value != null;
+      })
+    }, function (o, i) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: i,
+        className: entryClass
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        id: name + "_" + i,
+        className: radioClass,
+        type: "radio",
+        name: name,
+        readOnly: readonly,
+        disabled: disabled,
+        checked: control.value == o.value,
+        onChange: function onChange(x) {
+          return control.value = o.value;
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("label", {
+        className: labelClass,
+        htmlFor: name + "_" + i
+      }, o.name));
+    }));
+  } finally {
+    _effect();
+  }
+}
+
+function createDefaultActionRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  function render(_ref) {
+    var onClick = _ref.onClick,
+      actionText = _ref.actionText;
+    return /*#__PURE__*/React__default["default"].createElement("button", {
       className: options.className,
       onClick: onClick
     }, actionText);
@@ -1715,27 +2025,6 @@ function createDefaultActionRenderer(options) {
     type: "action"
   };
 }
-function createDefaultLabelRenderer(options) {
-  if (options === void 0) {
-    options = {
-      requiredElement: /*#__PURE__*/React__default["default"].createElement("span", null, " *")
-    };
-  }
-  var _options = options,
-    className = _options.className,
-    groupLabelClass = _options.groupLabelClass,
-    controlLabelClass = _options.controlLabelClass,
-    requiredElement = _options.requiredElement;
-  return {
-    render: function render(props, labelStart, labelEnd) {
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, labelStart, /*#__PURE__*/React__default["default"].createElement("label", {
-        htmlFor: props.forId,
-        className: rendererClass(props.className, clsx__default["default"](className, props.type === exports.LabelType.Group && groupLabelClass, props.type === exports.LabelType.Control && controlLabelClass))
-      }, props.label, props.required && requiredElement), labelEnd);
-    },
-    type: "label"
-  };
-}
 function createDefaultArrayRenderer(options) {
   var _ref2 = options != null ? options : {},
     className = _ref2.className,
@@ -1834,52 +2123,6 @@ function createDefaultGroupRenderer(options) {
     render: render
   };
 }
-function createDefaultDisplayRenderer(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    render: function render(props) {
-      return /*#__PURE__*/React__default["default"].createElement(DefaultDisplay, _extends({}, options, props));
-    },
-    type: "display"
-  };
-}
-function DefaultDisplay(_ref8) {
-  var _effect = core.useComponentTracking();
-  try {
-    var _display$value;
-    var data = _ref8.data,
-      display = _ref8.display,
-      className = _ref8.className,
-      style = _ref8.style,
-      options = _objectWithoutPropertiesLoose(_ref8, _excluded);
-    switch (data.type) {
-      case exports.DisplayDataType.Icon:
-        return /*#__PURE__*/React__default["default"].createElement("i", {
-          style: style,
-          className: clsx__default["default"](getOverrideClass(className), display ? display.value : data.iconClass)
-        });
-      case exports.DisplayDataType.Text:
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          style: style,
-          className: rendererClass(className, options.textClassName)
-        }, display ? display.value : data.text);
-      case exports.DisplayDataType.Html:
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          style: style,
-          className: rendererClass(className, options.htmlClassName),
-          dangerouslySetInnerHTML: {
-            __html: display ? (_display$value = display.value) != null ? _display$value : "" : data.html
-          }
-        });
-      default:
-        return /*#__PURE__*/React__default["default"].createElement("h1", null, "Unknown display type: ", data.type);
-    }
-  } finally {
-    _effect();
-  }
-}
 var DefaultBoolOptions = [{
   name: "Yes",
   value: true
@@ -1888,11 +2131,11 @@ var DefaultBoolOptions = [{
   value: false
 }];
 function createDefaultDataRenderer(options) {
-  var _options$selectOption;
   if (options === void 0) {
     options = {};
   }
-  var selectRenderer = createSelectRenderer((_options$selectOption = options.selectOptions) != null ? _options$selectOption : {});
+  var selectRenderer = createSelectRenderer(options.selectOptions);
+  var radioRenderer = createRadioRenderer(options.radioOptions);
   var _optionRenderer$boole = _extends({
       optionRenderer: selectRenderer,
       booleanOptions: DefaultBoolOptions
@@ -1959,68 +2202,32 @@ function createDefaultDataRenderer(options) {
     switch (renderType) {
       case exports.DataRenderType.Dropdown:
         return selectRenderer.render(props, renderers);
+      case exports.DataRenderType.Radio:
+        return radioRenderer.render(props, renderers);
+      case exports.DataRenderType.Checkbox:
+        return /*#__PURE__*/React__default["default"].createElement(core.Fcheckbox, {
+          style: props.style,
+          className: props.className,
+          control: props.control
+        });
     }
-    return renderType === exports.DataRenderType.Checkbox ? /*#__PURE__*/React__default["default"].createElement(core.Fcheckbox, {
-      style: props.style,
-      className: props.className,
-      control: props.control
-    }) : /*#__PURE__*/React__default["default"].createElement(ControlInput, {
+    var placeholder = isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
+    return /*#__PURE__*/React__default["default"].createElement(ControlInput, {
       className: rendererClass(props.className, inputClass),
       style: props.style,
       id: props.id,
       readOnly: props.readonly,
       control: props.control,
+      placeholder: placeholder != null ? placeholder : undefined,
       convert: createInputConversion(props.field.type)
     });
   });
 }
-function DefaultDisplayOnly(_ref9) {
-  var _effect2 = core.useComponentTracking();
-  try {
-    var _ref10;
-    var control = _ref9.control,
-      className = _ref9.className,
-      emptyText = _ref9.emptyText,
-      schemaInterface = _ref9.schemaInterface,
-      field = _ref9.field,
-      style = _ref9.style;
-    var v = control.value;
-    var text = (_ref10 = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref10 : "";
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      style: style,
-      className: rendererClass(className)
-    }, text);
-  } finally {
-    _effect2();
-  }
-}
-function ControlInput(_ref11) {
-  var _effect3 = core.useComponentTracking();
-  try {
-    var control = _ref11.control,
-      convert = _ref11.convert,
-      props = _objectWithoutPropertiesLoose(_ref11, _excluded2);
-    var _formControlProps = core.formControlProps(control),
-      errorText = _formControlProps.errorText,
-      value = _formControlProps.value,
-      onChange = _formControlProps.onChange,
-      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded3);
-    return /*#__PURE__*/React__default["default"].createElement("input", _extends({}, inputProps, {
-      type: convert[0],
-      value: value == null ? "" : convert[2](value),
-      onChange: function onChange(e) {
-        control.value = convert[1](e.target.value);
-      }
-    }, props));
-  } finally {
-    _effect3();
-  }
-}
 function createDefaultAdornmentRenderer(options) {
   return {
     type: "adornment",
-    render: function render(_ref12) {
-      var adornment = _ref12.adornment;
+    render: function render(_ref8) {
+      var adornment = _ref8.adornment;
       return {
         apply: function apply(rl) {
           if (isIconAdornment(adornment)) {
@@ -2036,22 +2243,6 @@ function createDefaultAdornmentRenderer(options) {
     }
   };
 }
-function createDefaultRenderers(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    data: createDefaultDataRenderer(options.data),
-    display: createDefaultDisplayRenderer(options.display),
-    action: createDefaultActionRenderer(options.action),
-    array: createDefaultArrayRenderer(options.array),
-    group: createDefaultGroupRenderer(options.group),
-    label: createDefaultLabelRenderer(options.label),
-    adornment: createDefaultAdornmentRenderer(),
-    renderLayout: createDefaultLayoutRenderer(options.layout),
-    visibility: createDefaultVisibilityRenderer()
-  };
-}
 function createDefaultLayoutRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -2072,7 +2263,147 @@ function createDefaultLayoutRenderer(options) {
     };
   });
 }
-function createClassStyledRenderers() {
+function createDefaultLabelRenderer(options) {
+  var _requiredElement$labe = _extends({
+      requiredElement: /*#__PURE__*/React__default["default"].createElement("span", null, " *"),
+      labelContainer: function labelContainer(c) {
+        return c;
+      }
+    }, options),
+    className = _requiredElement$labe.className,
+    groupLabelClass = _requiredElement$labe.groupLabelClass,
+    controlLabelClass = _requiredElement$labe.controlLabelClass,
+    requiredElement = _requiredElement$labe.requiredElement,
+    labelContainer = _requiredElement$labe.labelContainer;
+  return {
+    render: function render(props, labelStart, labelEnd) {
+      return labelContainer( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, labelStart, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: props.forId,
+        className: rendererClass(props.className, clsx__default["default"](className, props.type === exports.LabelType.Group && groupLabelClass, props.type === exports.LabelType.Control && controlLabelClass))
+      }, props.label, props.required && requiredElement), labelEnd));
+    },
+    type: "label"
+  };
+}
+function createDefaultRenderers(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    data: createDefaultDataRenderer(options.data),
+    display: createDefaultDisplayRenderer(options.display),
+    action: createDefaultActionRenderer(options.action),
+    array: createDefaultArrayRenderer(options.array),
+    group: createDefaultGroupRenderer(options.group),
+    label: createDefaultLabelRenderer(options.label),
+    adornment: createDefaultAdornmentRenderer(),
+    renderLayout: createDefaultLayoutRenderer(options.layout),
+    visibility: createDefaultVisibilityRenderer()
+  };
+}
+
+function createFormRenderer(customRenderers, defaultRenderers) {
+  var _customRenderers$find;
+  if (customRenderers === void 0) {
+    customRenderers = [];
+  }
+  if (defaultRenderers === void 0) {
+    defaultRenderers = createClassStyledRenderers();
+  }
+  var dataRegistrations = customRenderers.filter(isDataRegistration);
+  var groupRegistrations = customRenderers.filter(isGroupRegistration);
+  var adornmentRegistrations = customRenderers.filter(isAdornmentRegistration);
+  var displayRegistrations = customRenderers.filter(isDisplayRegistration);
+  var labelRenderers = customRenderers.filter(isLabelRegistration);
+  var arrayRenderers = customRenderers.filter(isArrayRegistration);
+  var actionRenderers = customRenderers.filter(isActionRegistration);
+  var layoutRenderers = customRenderers.filter(isLayoutRegistration);
+  var visibilityRenderer = (_customRenderers$find = customRenderers.find(isVisibilityRegistration)) != null ? _customRenderers$find : defaultRenderers.visibility;
+  var formRenderers = {
+    renderAction: renderAction,
+    renderData: renderData,
+    renderGroup: renderGroup,
+    renderDisplay: renderDisplay,
+    renderLabel: renderLabel,
+    renderArray: renderArray,
+    renderAdornment: renderAdornment,
+    renderLayout: renderLayout,
+    renderVisibility: visibilityRenderer.render
+  };
+  function renderLayout(props) {
+    var _layoutRenderers$find;
+    var renderer = (_layoutRenderers$find = layoutRenderers.find(function (x) {
+      return !x.match || x.match(props);
+    })) != null ? _layoutRenderers$find : defaultRenderers.renderLayout;
+    return renderer.render(props, formRenderers);
+  }
+  function renderAdornment(props) {
+    var _adornmentRegistratio;
+    var renderer = (_adornmentRegistratio = adornmentRegistrations.find(function (x) {
+      return isOneOf(x.adornmentType, props.adornment.type);
+    })) != null ? _adornmentRegistratio : defaultRenderers.adornment;
+    return renderer.render(props);
+  }
+  function renderArray(props) {
+    var _arrayRenderers$;
+    return ((_arrayRenderers$ = arrayRenderers[0]) != null ? _arrayRenderers$ : defaultRenderers.array).render(props, formRenderers);
+  }
+  function renderLabel(props, labelStart, labelEnd) {
+    var _labelRenderers$find;
+    var renderer = (_labelRenderers$find = labelRenderers.find(function (x) {
+      return isOneOf(x.labelType, props.type);
+    })) != null ? _labelRenderers$find : defaultRenderers.label;
+    return renderer.render(props, labelStart, labelEnd, formRenderers);
+  }
+  function renderData(props) {
+    var _dataRegistrations$fi;
+    var renderType = props.renderOptions.type,
+      field = props.field;
+    var options = hasOptions(props);
+    var renderer = (_dataRegistrations$fi = dataRegistrations.find(function (x) {
+      var _x$collection, _field$collection, _x$options;
+      return ((_x$collection = x.collection) != null ? _x$collection : false) === ((_field$collection = field.collection) != null ? _field$collection : false) && ((_x$options = x.options) != null ? _x$options : false) === options && (x.schemaType && isOneOf(x.schemaType, field.type) || x.renderType && isOneOf(x.renderType, renderType) || x.match && x.match(props));
+    })) != null ? _dataRegistrations$fi : defaultRenderers.data;
+    var result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return function (l) {
+      return _extends({}, l, {
+        children: result
+      });
+    };
+  }
+  function renderGroup(props) {
+    var _groupRegistrations$f;
+    var renderType = props.renderOptions.type;
+    var renderer = (_groupRegistrations$f = groupRegistrations.find(function (x) {
+      return isOneOf(x.renderType, renderType);
+    })) != null ? _groupRegistrations$f : defaultRenderers.group;
+    var result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return function (l) {
+      return _extends({}, l, {
+        children: result
+      });
+    };
+  }
+  function renderAction(props) {
+    var _actionRenderers$find;
+    var renderer = (_actionRenderers$find = actionRenderers.find(function (x) {
+      return isOneOf(x.actionType, props.actionId);
+    })) != null ? _actionRenderers$find : defaultRenderers.action;
+    return renderer.render(props, formRenderers);
+  }
+  function renderDisplay(props) {
+    var _displayRegistrations;
+    var renderType = props.data.type;
+    var renderer = (_displayRegistrations = displayRegistrations.find(function (x) {
+      return isOneOf(x.renderType, renderType);
+    })) != null ? _displayRegistrations : defaultRenderers.display;
+    return renderer.render(props, formRenderers);
+  }
+  return formRenderers;
+}
+function createClassStyledRenderers() {
   return createDefaultRenderers({
     layout: {
       className: "control"
@@ -2095,6 +2426,9 @@ function createClassStyledRenderers() {
     }
   });
 }
+function isOneOf(x, v) {
+  return x == null ? true : Array.isArray(x) ? x.includes(v) : v === x;
+}
 function isAdornmentRegistration(x) {
   return x.type === "adornment";
 }
@@ -2122,259 +2456,6 @@ function isDisplayRegistration(x) {
 function isArrayRegistration(x) {
   return x.type === "array";
 }
-function isOneOf(x, v) {
-  return x == null ? true : Array.isArray(x) ? x.includes(v) : v === x;
-}
-function isIconAdornment(a) {
-  return a.type === exports.ControlAdornmentType.Icon;
-}
-function createLayoutRenderer(render, options) {
-  return _extends({
-    type: "layout",
-    render: render
-  }, options);
-}
-function createArrayRenderer(render, options) {
-  return _extends({
-    type: "array",
-    render: render
-  }, options);
-}
-function createDataRenderer(render, options) {
-  return _extends({
-    type: "data",
-    render: render
-  }, options);
-}
-function createGroupRenderer(render, options) {
-  return _extends({
-    type: "group",
-    render: render
-  }, options);
-}
-function createDisplayRenderer(render, options) {
-  return _extends({
-    type: "display",
-    render: render
-  }, options);
-}
-function createLabelRenderer(render, options) {
-  return _extends({
-    type: "label",
-    render: render
-  }, options);
-}
-function createVisibilityRenderer(render, options) {
-  return _extends({
-    type: "visibility",
-    render: render
-  }, options);
-}
-function createAdornmentRenderer(render, options) {
-  return _extends({
-    type: "adornment"
-  }, options, {
-    render: render
-  });
-}
-function createSelectRenderer(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return createDataRenderer(function (props, asArray) {
-    return /*#__PURE__*/React__default["default"].createElement(SelectDataRenderer, {
-      className: rendererClass(props.className, options.className),
-      state: props.control,
-      id: props.id,
-      options: props.options,
-      required: props.required,
-      emptyText: options.emptyText,
-      requiredText: options.requiredText,
-      convert: createSelectConversion(props.field.type)
-    });
-  }, {
-    options: true
-  });
-}
-function SelectDataRenderer(_ref13) {
-  var _effect4 = core.useComponentTracking();
-  try {
-    var state = _ref13.state,
-      options = _ref13.options,
-      className = _ref13.className,
-      convert = _ref13.convert,
-      required = _ref13.required,
-      _ref13$emptyText = _ref13.emptyText,
-      emptyText = _ref13$emptyText === void 0 ? "N/A" : _ref13$emptyText,
-      _ref13$requiredText = _ref13.requiredText,
-      requiredText = _ref13$requiredText === void 0 ? "<please select>" : _ref13$requiredText,
-      props = _objectWithoutPropertiesLoose(_ref13, _excluded4);
-    var value = state.value,
-      disabled = state.disabled;
-    var _useState = React.useState(!required || value == null),
-      showEmpty = _useState[0];
-    var optionStringMap = React.useMemo(function () {
-      return Object.fromEntries(options.map(function (x) {
-        return [convert(x.value), x.value];
-      }));
-    }, [options]);
-    return /*#__PURE__*/React__default["default"].createElement("select", _extends({}, props, {
-      className: className,
-      onChange: function onChange(v) {
-        return state.value = optionStringMap[v.target.value];
-      },
-      value: convert(value),
-      disabled: disabled
-    }), showEmpty && /*#__PURE__*/React__default["default"].createElement("option", {
-      value: ""
-    }, required ? requiredText : emptyText), options.map(function (x, i) {
-      return /*#__PURE__*/React__default["default"].createElement("option", {
-        key: i,
-        value: convert(x.value),
-        disabled: x.disabled
-      }, x.name);
-    }));
-  } finally {
-    _effect4();
-  }
-}
-function createSelectConversion(ft) {
-  switch (ft) {
-    case exports.FieldType.String:
-    case exports.FieldType.Int:
-    case exports.FieldType.Double:
-      return function (a) {
-        return a;
-      };
-    default:
-      return function (a) {
-        var _a$toString;
-        return (_a$toString = a == null ? void 0 : a.toString()) != null ? _a$toString : "";
-      };
-  }
-}
-function createInputConversion(ft) {
-  switch (ft) {
-    case exports.FieldType.String:
-      return ["text", function (a) {
-        return a;
-      }, function (a) {
-        return a;
-      }];
-    case exports.FieldType.Bool:
-      return ["text", function (a) {
-        return a === "true";
-      }, function (a) {
-        var _a$toString2;
-        return (_a$toString2 = a == null ? void 0 : a.toString()) != null ? _a$toString2 : "";
-      }];
-    case exports.FieldType.Int:
-      return ["number", function (a) {
-        return a !== "" ? parseInt(a) : null;
-      }, function (a) {
-        return a == null ? "" : a;
-      }];
-    case exports.FieldType.Date:
-      return ["date", function (a) {
-        return a;
-      }, function (a) {
-        return a;
-      }];
-    case exports.FieldType.Double:
-      return ["number", function (a) {
-        return parseFloat(a);
-      }, function (a) {
-        return a;
-      }];
-    default:
-      return ["text", function (a) {
-        return a;
-      }, function (a) {
-        return a;
-      }];
-  }
-}
-function createDefaultVisibilityRenderer() {
-  return createVisibilityRenderer(function (props) {
-    return /*#__PURE__*/React__default["default"].createElement(DefaultVisibility, props);
-  });
-}
-function DefaultVisibility(_ref14) {
-  var _effect5 = core.useComponentTracking();
-  try {
-    var visibility = _ref14.visibility,
-      children = _ref14.children,
-      className = _ref14.className,
-      style = _ref14.style,
-      divRef = _ref14.divRef;
-    var v = visibility.value;
-    React.useEffect(function () {
-      if (v) {
-        visibility.setValue(function (ex) {
-          return {
-            visible: v.visible,
-            showing: v.visible
-          };
-        });
-      }
-    }, [v == null ? void 0 : v.visible]);
-    return v != null && v.visible ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: clsx__default["default"](className),
-      style: style,
-      ref: divRef
-    }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
-  } finally {
-    _effect5();
-  }
-}
-function DefaultLayout(_ref15) {
-  var _effect6 = core.useComponentTracking();
-  try {
-    var errorClass = _ref15.errorClass,
-      _ref15$layout = _ref15.layout,
-      controlEnd = _ref15$layout.controlEnd,
-      controlStart = _ref15$layout.controlStart,
-      label = _ref15$layout.label,
-      children = _ref15$layout.children,
-      errorControl = _ref15$layout.errorControl;
-    var ec = errorControl;
-    var errorText = ec && ec.touched ? ec.error : undefined;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label, controlStart, children, errorText && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: errorClass
-    }, errorText), controlEnd);
-  } finally {
-    _effect6();
-  }
-}
-
-var defaultTailwindTheme = {
-  label: {
-    groupLabelClass: "font-bold",
-    requiredElement: /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "text-red-500"
-    }, " *")
-  },
-  array: {
-    removableClass: "grid grid-cols-[1fr_auto] items-center gap-x-2",
-    childClass: "grow my-2",
-    addActionClass: "my-2"
-  },
-  group: {
-    standardClassName: "flex flex-col gap-4",
-    gridClassName: "gap-x-2 gap-y-4",
-    flexClassName: "gap-2"
-  },
-  action: {
-    className: "bg-primary rounded-lg p-3 text-white"
-  },
-  layout: {
-    className: "flex flex-col",
-    errorClass: "text-sm text-danger-500"
-  },
-  data: {
-    displayOnlyClass: "flex flex-row items-center gap-2"
-  }
-};
 
 exports.AppendAdornmentPriority = AppendAdornmentPriority;
 exports.ControlInput = ControlInput;
@@ -2384,6 +2465,7 @@ exports.DefaultDisplay = DefaultDisplay;
 exports.DefaultDisplayOnly = DefaultDisplayOnly;
 exports.DefaultLayout = DefaultLayout;
 exports.DefaultVisibility = DefaultVisibility;
+exports.RadioButtons = RadioButtons;
 exports.SelectDataRenderer = SelectDataRenderer;
 exports.WrapAdornmentPriority = WrapAdornmentPriority;
 exports.addFieldOption = addFieldOption;
@@ -2419,6 +2501,7 @@ exports.createGroupRenderer = createGroupRenderer;
 exports.createInputConversion = createInputConversion;
 exports.createLabelRenderer = createLabelRenderer;
 exports.createLayoutRenderer = createLayoutRenderer;
+exports.createRadioRenderer = createRadioRenderer;
 exports.createSelectConversion = createSelectConversion;
 exports.createSelectRenderer = createSelectRenderer;
 exports.createVisibilityRenderer = createVisibilityRenderer;
@@ -2473,6 +2556,7 @@ exports.isGroupControl = isGroupControl;
 exports.isGroupControlsDefinition = isGroupControlsDefinition;
 exports.isIconAdornment = isIconAdornment;
 exports.isScalarField = isScalarField;
+exports.isTextfieldRenderer = isTextfieldRenderer;
 exports.jsonPathString = jsonPathString;
 exports.jsonataExpr = jsonataExpr;
 exports.layoutKeyForPlacement = layoutKeyForPlacement;