@react-typed-forms/schemas 15.0.0 → 15.1.1

package/lib/renderers.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from "react";
-import { ActionRendererProps, AdornmentProps, AdornmentRenderer, ArrayRendererProps, ControlLayoutProps, DataRendererProps, DisplayRendererProps, FormRenderer, GroupRendererProps, LabelRendererProps, LabelType, RenderedControl, VisibilityRendererProps } from "./controlRender";
+import { ActionRendererProps, AdornmentProps, AdornmentRenderer, ArrayRendererProps, ControlLayoutProps, DataRendererProps, DisplayRendererProps, FormRenderer, GroupRendererProps, HtmlComponents, LabelRendererProps, LabelType, RenderedControl, VisibilityRendererProps } from "./controlRender";
 import { AccordionAdornment, ControlAdornment, IconAdornment, OptionalAdornment, RenderOptions, SetFieldAdornment } from "./controlDefinition";
 export interface DefaultRenderers {
     data: DataRendererRegistration;
@@ -11,8 +11,9 @@ export interface DefaultRenderers {
     adornment: AdornmentRendererRegistration;
     renderLayout: LayoutRendererRegistration;
     visibility: VisibilityRendererRegistration;
+    extraRenderers: RendererRegistration[];
     renderText: (props: ReactNode) => ReactNode;
-    h: (type: any, props: any, ...children: any[]) => ReactElement;
+    html: HtmlComponents;
 }
 export interface LayoutRendererRegistration {
     type: "layout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas",
-  "version": "15.0.0",
+  "version": "15.1.1",
   "description": "",
   "type": "module",
   "main": "lib/index.cjs",
@@ -60,8 +60,8 @@
   },
   "gitHead": "698e16cd3ab31b7dd0528fc76536f4d3205ce8c6",
   "scripts": {
-    "build": "rimraf ./lib/ node_modules/.cache && microbundle -f modern,cjs --no-compress --jsx React.createElement --jsxFragment React.Fragment",
-    "watch": "microbundle -w -f modern,cjs --no-compress --jsx React.createElement --jsxFragment React.Fragment",
+    "build": "rimraf ./lib/ node_modules/.cache && microbundle -f modern,cjs --no-compress --jsxImportSource=react",
+    "watch": "microbundle -w -f modern,cjs --no-compress --jsxImportSource=react",
     "test": "jest --coverage",
     "play": "tsx test/play.ts",
     "update-readme": "md-magic --path README.md",

package/src/controlRender.tsx

@@ -1,7 +1,12 @@
 import React, {
+  ButtonHTMLAttributes,
+  ElementType,
   FC,
   Fragment,
+  HTMLAttributes,
+  InputHTMLAttributes,
   Key,
+  LabelHTMLAttributes,
   ReactElement,
   ReactNode,
   useCallback,
@@ -89,6 +94,16 @@ import {
   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.
  */
@@ -172,9 +187,9 @@ export interface FormRenderer {
    * @returns A React node.
    */
   renderLabelText: (props: ReactNode) => ReactNode;
-  renderText: (props: ReactNode) => ReactNode;
+  renderText: (props: ReactNode, className?: string) => ReactNode;
 
-  h: (type: any, props: any, ...children: any[]) => ReactElement;
+  html: HtmlComponents;
 }
 
 export interface AdornmentProps {
@@ -618,11 +633,12 @@ export function useControlRendererComponent(
         hiddenControl: myOptionsControl.fields.hidden,
         dataContext,
       });
+      const { styleClass, labelClass, layoutClass, ...inheritableOptions } =
+        options;
       const childOptions: ControlRenderOptions = {
-        ...options,
+        ...inheritableOptions,
         ...myOptions,
         elementIndex: undefined,
-        formData,
       };
 
       useEffect(() => {
@@ -663,18 +679,19 @@ export function useControlRendererComponent(
           const { parentDataNode, ...renderOptions } = options ?? {};
           const dContext =
             parentDataNode ?? dataContext.dataNode ?? dataContext.parentNode;
-
+          const allChildOptions = {
+            ...childOptions,
+            ...overrideClasses,
+            ...renderOptions,
+          };
+          console.log(allChildOptions, overrideClasses);
           return (
             <NewControlRenderer
               key={k}
               definition={child}
               renderer={renderer}
               parentDataNode={dContext}
-              options={{
-                ...childOptions,
-                ...overrideClasses,
-                ...renderOptions,
-              }}
+              options={allChildOptions}
             />
           );
         },

package/src/createFormRenderer.tsx

@@ -33,19 +33,20 @@ export function createFormRenderer(
   customRenderers: RendererRegistration[] = [],
   defaultRenderers: DefaultRenderers,
 ): FormRenderer {
-  const dataRegistrations = customRenderers.filter(isDataRegistration);
-  const groupRegistrations = customRenderers.filter(isGroupRegistration);
-  const adornmentRegistrations = customRenderers.filter(
-    isAdornmentRegistration,
-  );
-  const displayRegistrations = customRenderers.filter(isDisplayRegistration);
-  const labelRenderers = customRenderers.filter(isLabelRegistration);
-  const arrayRenderers = customRenderers.filter(isArrayRegistration);
-  const actionRenderers = customRenderers.filter(isActionRegistration);
-  const layoutRenderers = customRenderers.filter(isLayoutRegistration);
+  const allRenderers = [
+    ...customRenderers,
+    ...(defaultRenderers.extraRenderers ?? []),
+  ];
+  const dataRegistrations = allRenderers.filter(isDataRegistration);
+  const groupRegistrations = allRenderers.filter(isGroupRegistration);
+  const adornmentRegistrations = allRenderers.filter(isAdornmentRegistration);
+  const displayRegistrations = allRenderers.filter(isDisplayRegistration);
+  const labelRenderers = allRenderers.filter(isLabelRegistration);
+  const arrayRenderers = allRenderers.filter(isArrayRegistration);
+  const actionRenderers = allRenderers.filter(isActionRegistration);
+  const layoutRenderers = allRenderers.filter(isLayoutRegistration);
   const visibilityRenderer =
-    customRenderers.find(isVisibilityRegistration) ??
-    defaultRenderers.visibility;
+    allRenderers.find(isVisibilityRegistration) ?? defaultRenderers.visibility;
 
   const formRenderers: FormRenderer = {
     renderAction,
@@ -59,7 +60,7 @@ export function createFormRenderer(
     renderVisibility,
     renderLabelText,
     renderText: defaultRenderers.renderText,
-    h: defaultRenderers.h,
+    html: defaultRenderers.html,
   };
 
   function renderVisibility(props: VisibilityRendererProps) {

package/src/renderers.tsx

@@ -9,6 +9,7 @@ import {
   DisplayRendererProps,
   FormRenderer,
   GroupRendererProps,
+  HtmlComponents,
   LabelRendererProps,
   LabelType,
   RenderedControl,
@@ -34,8 +35,9 @@ export interface DefaultRenderers {
   adornment: AdornmentRendererRegistration;
   renderLayout: LayoutRendererRegistration;
   visibility: VisibilityRendererRegistration;
+  extraRenderers: RendererRegistration[];
   renderText: (props: ReactNode) => ReactNode;
-  h: (type: any, props: any, ...children: any[]) => ReactElement;
+  html: HtmlComponents;
 }
 
 export interface LayoutRendererRegistration {