@react-typed-forms/schemas 15.0.0 → 15.1.1

package/lib/controlRender.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, Key, ReactElement, ReactNode } from "react";
+import React, { ButtonHTMLAttributes, ElementType, FC, HTMLAttributes, InputHTMLAttributes, Key, LabelHTMLAttributes, ReactElement, ReactNode } from "react";
 import { Control } from "@react-typed-forms/core";
 import { AdornmentPlacement, ArrayActionOptions, ControlActionHandler, ControlAdornment, ControlDataContext, ControlDefinition, DataControlDefinition, DisplayData, FormContextData, FormNode, GroupRenderOptions, RenderOptions } from "./controlDefinition";
 import { ControlClasses, JsonPath } from "./util";
@@ -6,6 +6,16 @@ import { EvalExpressionHook, UseEvalExpressionHook } from "./hooks";
 import { ValidationContext } from "./validators";
 import { SchemaValidator } from "./schemaValidator";
 import { FieldOption, SchemaDataNode, SchemaField, SchemaInterface } from "./schemaField";
+export interface HtmlComponents {
+    Div: ElementType<HTMLAttributes<HTMLDivElement>, "div">;
+    Span: ElementType<HTMLAttributes<HTMLSpanElement>>;
+    Button: ElementType<ButtonHTMLAttributes<HTMLButtonElement>>;
+    I: ElementType<HTMLAttributes<HTMLElement>>;
+    Label: ElementType<LabelHTMLAttributes<HTMLLabelElement>>;
+    B: ElementType<HTMLAttributes<HTMLElement>>;
+    H1: ElementType<HTMLAttributes<HTMLElement>>;
+    Input: ElementType<InputHTMLAttributes<HTMLInputElement>, "input">;
+}
 /**
  * Interface for rendering different types of form controls.
  */
@@ -72,8 +82,8 @@ export interface FormRenderer {
      * @returns A React node.
      */
     renderLabelText: (props: ReactNode) => ReactNode;
-    renderText: (props: ReactNode) => ReactNode;
-    h: (type: any, props: any, ...children: any[]) => ReactElement;
+    renderText: (props: ReactNode, className?: string) => ReactNode;
+    html: HtmlComponents;
 }
 export interface AdornmentProps {
     adornment: ControlAdornment;
@@ -295,13 +305,13 @@ export declare function ControlRenderer({ definition, fields, renderer, options,
     options?: ControlRenderOptions;
     control: Control<any>;
     parentPath?: JsonPath[];
-}): React.JSX.Element;
+}): JSX.Element;
 export declare function NewControlRenderer({ definition, renderer, options, parentDataNode, }: {
     definition: ControlDefinition | FormNode;
     renderer: FormRenderer;
     options?: ControlRenderOptions;
     parentDataNode: SchemaDataNode;
-}): React.JSX.Element;
+}): JSX.Element;
 export declare function defaultDataProps({ definition, control, formOptions, style, allowedOptions, schemaInterface, styleClass, ...props }: DataControlProps): DataRendererProps;
 export interface ChildRendererOptions {
     elementIndex?: number;
@@ -356,5 +366,5 @@ export declare function applyArrayLengthRestrictions({ arrayControl, min, max, e
     addDisabled: boolean;
     removeDisabled: boolean;
 };
-export declare function fieldOptionAdornment(p: DataRendererProps): (o: FieldOption, i: number, selected: boolean) => React.JSX.Element;
+export declare function fieldOptionAdornment(p: DataRendererProps): (o: FieldOption, i: number, selected: boolean) => JSX.Element;
 export {};

package/lib/index.cjs

@@ -1,12 +1,12 @@
 var core = require('@react-typed-forms/core');
-var React = require('react');
+var react = require('react');
 var clsx = require('clsx');
 var jsonata = require('jsonata');
 var uuid = require('uuid');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 var jsonata__default = /*#__PURE__*/_interopDefaultLegacy(jsonata);
 
@@ -1140,7 +1140,7 @@ function addMissingControlsToForm(schema, tree, warning) {
  * @returns A mutable reference object.
  */
 function useUpdatedRef(a) {
-  var r = React.useRef(a);
+  var r = react.useRef(a);
   r.current = a;
   return r;
 }
@@ -1746,7 +1746,7 @@ function useControlDefinitionForSchema(sf, definition) {
   if (definition === void 0) {
     definition = emptyGroupDefinition;
   }
-  return React.useMemo(function () {
+  return react.useMemo(function () {
     var _definition$children;
     return _extends({}, definition, {
       children: addMissingControls(sf, (_definition$children = definition.children) != null ? _definition$children : [])
@@ -1810,12 +1810,12 @@ function useDynamicHooks(hooks) {
   var deps = makeHookDepString(hookEntries, function (x) {
     return x[1].deps;
   });
-  var ref = React.useRef({});
+  var ref = react.useRef({});
   var s = ref.current;
   hookEntries.forEach(function (x) {
     return s[x[0]] = x[1].state;
   });
-  return React.useCallback(function (p) {
+  return react.useCallback(function (p) {
     return Object.fromEntries(hookEntries.map(function (_ref) {
       var f = _ref[0],
         hg = _ref[1];
@@ -2041,7 +2041,7 @@ function useJsonataExpression(jExpr, data, path, bindings, coerce) {
     return "#$i[" + x + "]";
   });
   var fullExpr = pathString ? pathString + ".(" + jExpr + ")" : jExpr;
-  var compiledExpr = React.useMemo(function () {
+  var compiledExpr = react.useMemo(function () {
     try {
       return jsonata__default["default"](jExpr ? fullExpr : "null");
     } catch (e) {
@@ -2050,8 +2050,8 @@ function useJsonataExpression(jExpr, data, path, bindings, coerce) {
     }
   }, [fullExpr]);
   var control = core.useControl();
-  var listenerRef = React.useRef();
-  var updateRef = React.useRef(0);
+  var listenerRef = react.useRef();
+  var updateRef = react.useRef(0);
   var _useRefState = core.useRefState(function () {
       return new core.SubscriptionTracker(function () {
         var l = listenerRef.current;
@@ -2065,7 +2065,7 @@ function useJsonataExpression(jExpr, data, path, bindings, coerce) {
       });
     }),
     ref = _useRefState[0];
-  React.useEffect(function () {
+  react.useEffect(function () {
     var apply = function apply() {
       try {
         var tracker = ref.current;
@@ -2090,7 +2090,7 @@ function useJsonataExpression(jExpr, data, path, bindings, coerce) {
     listenerRef.current = apply;
     apply();
   }, [compiledExpr]);
-  React.useEffect(function () {
+  react.useEffect(function () {
     return function () {
       listenerRef.current = undefined;
       ref.current.cleanup();
@@ -2134,7 +2134,7 @@ function useMakeValidationHook(definition, useValidatorFor) {
   var depString = dd ? makeHookDepString((_dd$validators = dd.validators) != null ? _dd$validators : [], function (x) {
     return x.type;
   }) : "~";
-  return React.useCallback(function (ctx) {
+  return react.useCallback(function (ctx) {
     var _ctx$dataContext$data, _ctx$dataContext$data2, _dd$validators2;
     var dd = refData.current.dd;
     if (!dd) return;
@@ -2408,8 +2408,9 @@ var DefaultSchemaInterface = /*#__PURE__*/function () {
 }();
 var defaultSchemaInterface = new DefaultSchemaInterface();
 
-var _excluded = ["parentDataNode"],
-  _excluded2 = ["definition", "control", "formOptions", "style", "allowedOptions", "schemaInterface", "styleClass"];
+var _excluded = ["styleClass", "labelClass", "layoutClass"],
+  _excluded2 = ["parentDataNode"],
+  _excluded3 = ["definition", "control", "formOptions", "style", "allowedOptions", "schemaInterface", "styleClass"];
 var AppendAdornmentPriority = 0;
 var WrapAdornmentPriority = 1000;
 /**
@@ -2440,10 +2441,10 @@ function useControlRenderer(definition, fields, renderer, options) {
     renderer: renderer,
     options: options
   });
-  return React.useCallback(function (_ref) {
+  return react.useCallback(function (_ref) {
     var control = _ref.control,
       parentPath = _ref.parentPath;
-    return /*#__PURE__*/React__default["default"].createElement(ControlRenderer, _extends({}, r.current, {
+    return /*#__PURE__*/jsxRuntime.jsx(ControlRenderer, _extends({}, r.current, {
       control: control,
       parentPath: parentPath
     }));
@@ -2489,7 +2490,7 @@ function useControlRendererComponent(controlOrFormNode, renderer, options, paren
     formNode: formNode
   });
   if (formNode == null) debugger;
-  var Component = React.useCallback(function () {
+  var Component = react.useCallback(function () {
     var stopTracking = core.useComponentTracking();
     try {
       var _options$formData, _dataNode, _definition$adornment2, _definition$adornment3, _formNode$tree$getByR, _options$adjustLayout;
@@ -2584,14 +2585,17 @@ function useControlRendererComponent(controlOrFormNode, renderer, options, paren
         hiddenControl: myOptionsControl.fields.hidden,
         dataContext: dataContext
       });
-      var childOptions = _extends({}, _options, myOptions, {
-        elementIndex: undefined,
-        formData: formData
+      var styleClass = _options.styleClass,
+        labelClass = _options.labelClass,
+        layoutClass = _options.layoutClass,
+        inheritableOptions = _objectWithoutPropertiesLoose(_options, _excluded);
+      var childOptions = _extends({}, inheritableOptions, myOptions, {
+        elementIndex: undefined
       });
-      React.useEffect(function () {
+      react.useEffect(function () {
         if (control && typeof myOptions.disabled === "boolean" && control.disabled != myOptions.disabled) control.disabled = myOptions.disabled;
       }, [control, myOptions.disabled]);
-      if (parentControl.isNull) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+      if (parentControl.isNull) return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
       var adornments = (_definition$adornment2 = (_definition$adornment3 = definition.adornments) == null ? void 0 : _definition$adornment3.map(function (x) {
         return renderer.renderAdornment({
           adornment: x,
@@ -2610,15 +2614,16 @@ function useControlRendererComponent(controlOrFormNode, renderer, options, paren
           var overrideClasses = getGroupClassOverrides(c);
           var _ref4 = options != null ? options : {},
             parentDataNode = _ref4.parentDataNode,
-            renderOptions = _objectWithoutPropertiesLoose(_ref4, _excluded);
+            renderOptions = _objectWithoutPropertiesLoose(_ref4, _excluded2);
           var dContext = (_ref5 = parentDataNode != null ? parentDataNode : dataContext.dataNode) != null ? _ref5 : dataContext.parentNode;
-          return /*#__PURE__*/React__default["default"].createElement(NewControlRenderer, {
-            key: k,
+          var allChildOptions = _extends({}, childOptions, overrideClasses, renderOptions);
+          console.log(allChildOptions, overrideClasses);
+          return /*#__PURE__*/jsxRuntime.jsx(NewControlRenderer, {
             definition: child,
             renderer: renderer,
             parentDataNode: dContext,
-            options: _extends({}, childOptions, overrideClasses, renderOptions)
-          });
+            options: allChildOptions
+          }, k);
         },
         createDataProps: dataProps,
         formOptions: myOptions,
@@ -2670,7 +2675,7 @@ function ControlRenderer(_ref7) {
       "": fields
     }).getSchema(""), control);
     var Render = useControlRendererComponent(definition, renderer, options, schemaDataNode);
-    return /*#__PURE__*/React__default["default"].createElement(Render, null);
+    return /*#__PURE__*/jsxRuntime.jsx(Render, {});
   } finally {
     _effect();
   }
@@ -2683,7 +2688,7 @@ function NewControlRenderer(_ref8) {
       options = _ref8.options,
       parentDataNode = _ref8.parentDataNode;
     var Render = useControlRendererComponent(definition, renderer, options, parentDataNode);
-    return /*#__PURE__*/React__default["default"].createElement(Render, null);
+    return /*#__PURE__*/jsxRuntime.jsx(Render, {});
   } finally {
     _effect2();
   }
@@ -2698,7 +2703,7 @@ function defaultDataProps(_ref9) {
     _ref9$schemaInterface = _ref9.schemaInterface,
     schemaInterface = _ref9$schemaInterface === void 0 ? defaultSchemaInterface : _ref9$schemaInterface,
     styleClass = _ref9.styleClass,
-    props = _objectWithoutPropertiesLoose(_ref9, _excluded2);
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
   var dataNode = props.dataContext.dataNode;
   var field = dataNode.schema.field;
   var className = rendererClass(styleClass, definition.styleClass);
@@ -2844,7 +2849,9 @@ function renderControlLayout(props) {
 }
 function appendMarkup(k, markup) {
   return function (layout) {
-    return layout[k] = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, layout[k], markup);
+    return layout[k] = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [layout[k], markup]
+    });
   };
 }
 function wrapMarkup(k, wrap) {
@@ -3030,16 +3037,17 @@ function applyArrayLengthRestrictions(_ref13, disable) {
 }
 function fieldOptionAdornment(p) {
   return function (o, i, selected) {
-    return /*#__PURE__*/React__default["default"].createElement(core.RenderArrayElements, {
-      array: p.formNode.getChildNodes()
-    }, function (cd, i) {
-      return p.renderChild(i, cd, {
-        parentDataNode: p.dataContext.parentNode,
-        formData: {
-          option: o,
-          optionSelected: selected
-        }
-      });
+    return /*#__PURE__*/jsxRuntime.jsx(core.RenderArrayElements, {
+      array: p.formNode.getChildNodes(),
+      children: function children(cd, i) {
+        return p.renderChild(i, cd, {
+          parentDataNode: p.dataContext.parentNode,
+          formData: {
+            option: o,
+            optionSelected: selected
+          }
+        });
+      }
     });
   };
 }
@@ -3114,19 +3122,20 @@ function createAdornmentRenderer(render, options) {
 }
 
 function createFormRenderer(customRenderers, defaultRenderers) {
-  var _customRenderers$find;
+  var _defaultRenderers$ext, _allRenderers$find;
   if (customRenderers === void 0) {
     customRenderers = [];
   }
-  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 allRenderers = [].concat(customRenderers, (_defaultRenderers$ext = defaultRenderers.extraRenderers) != null ? _defaultRenderers$ext : []);
+  var dataRegistrations = allRenderers.filter(isDataRegistration);
+  var groupRegistrations = allRenderers.filter(isGroupRegistration);
+  var adornmentRegistrations = allRenderers.filter(isAdornmentRegistration);
+  var displayRegistrations = allRenderers.filter(isDisplayRegistration);
+  var labelRenderers = allRenderers.filter(isLabelRegistration);
+  var arrayRenderers = allRenderers.filter(isArrayRegistration);
+  var actionRenderers = allRenderers.filter(isActionRegistration);
+  var layoutRenderers = allRenderers.filter(isLayoutRegistration);
+  var visibilityRenderer = (_allRenderers$find = allRenderers.find(isVisibilityRegistration)) != null ? _allRenderers$find : defaultRenderers.visibility;
   var formRenderers = {
     renderAction: renderAction,
     renderData: renderData,
@@ -3139,7 +3148,7 @@ function createFormRenderer(customRenderers, defaultRenderers) {
     renderVisibility: renderVisibility,
     renderLabelText: renderLabelText,
     renderText: defaultRenderers.renderText,
-    h: defaultRenderers.h
+    html: defaultRenderers.html
   };
   function renderVisibility(props) {
     return visibilityRenderer.render(props, formRenderers);