@react-typed-forms/schemas 14.3.0 → 14.4.0

package/lib/renderers.d.ts

@@ -11,6 +11,8 @@ export interface DefaultRenderers {
     adornment: AdornmentRendererRegistration;
     renderLayout: LayoutRendererRegistration;
     visibility: VisibilityRendererRegistration;
+    renderText: (props: ReactNode) => ReactNode;
+    h: (type: any, props: any, ...children: any[]) => ReactElement;
 }
 export interface LayoutRendererRegistration {
     type: "layout";
@@ -57,7 +59,7 @@ export interface AdornmentRendererRegistration {
 }
 export interface VisibilityRendererRegistration {
     type: "visibility";
-    render: (props: VisibilityRendererProps) => ReactNode;
+    render: (props: VisibilityRendererProps, renderer: FormRenderer) => ReactNode;
 }
 export type RendererRegistration = DataRendererRegistration | GroupRendererRegistration | DisplayRendererRegistration | ActionRendererRegistration | LabelRendererRegistration | ArrayRendererRegistration | AdornmentRendererRegistration | LayoutRendererRegistration | VisibilityRendererRegistration;
 export declare function isIconAdornment(a: ControlAdornment): a is IconAdornment;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas",
-  "version": "14.3.0",
+  "version": "14.4.0",
   "description": "",
   "type": "module",
   "main": "lib/index.cjs",

package/src/controlDefinition.ts

@@ -356,8 +356,9 @@ export interface GridRenderer extends GroupRenderOptions {
   columns?: number | null;
 }
 
-export interface TabsGroupRenderer extends GroupRenderOptions {
+export interface TabsRenderOptions extends GroupRenderOptions {
   type: GroupRenderType.Tabs;
+  contentClass?: string;
 }
 
 export interface SelectChildRenderer extends GroupRenderOptions {
@@ -444,7 +445,7 @@ export function isSelectChildRenderer(
 
 export function isTabsRenderer(
   options: GroupRenderOptions,
-): options is TabsGroupRenderer {
+): options is TabsRenderOptions {
   return options.type === GroupRenderType.Tabs;
 }
 
@@ -545,63 +546,59 @@ export function isCheckEntryClasses(
 
 export type ControlMap = { [k: string]: ControlDefinition };
 
-export class FormNode {
-  constructor(
-    public id: string,
-    public definition: ControlDefinition,
-    public tree: FormTree,
-    public parent?: FormNode,
-    public overrideChildren?: FormNode[],
-  ) {
-    this.id = id;
-    this.definition = definition;
-  }
-
-  getChildNodes(): FormNode[] {
-    if (this.overrideChildren) return this.overrideChildren;
-    let children = this.definition.children;
-    if (this.definition.childRefId) {
-      const ref = this.tree.controlMap[this.definition.childRefId];
-      children = ref?.children;
-    }
-    return (
-      children?.map(
-        (x, i) => new FormNode(this.id + "/" + i, x, this.tree, this),
-      ) ?? []
-    );
-  }
+export interface FormNode {
+  id: string;
+  definition: ControlDefinition;
+  tree: FormTree;
+  parent?: FormNode;
+  getChildNodes(dontFollowRef?: boolean): FormNode[];
+}
 
-  withOverrideChildren(children: ControlDefinition[]) {
-    return new FormNode(
-      this.id,
-      this.definition,
-      this.tree,
-      this.parent,
-      children.map((x) => nodeForControl(x, this.tree)),
-    );
-  }
+export function defaultGetChildNodes(
+  parent: FormNode,
+  children?: ControlDefinition[] | null,
+) {
+  return (
+    children?.map((x, i) => nodeForControl(x, parent.tree, i, parent)) ?? []
+  );
 }
 
-export interface FormTreeLookup<A = string> {
-  getForm(formId: A): FormTree | undefined;
+export interface FormTreeLookup {
+  getForm(formId: string): FormTree | undefined;
 }
 export interface FormTree extends FormTreeLookup {
   rootNode: FormNode;
-  controlMap: ControlMap;
+  getChildrenForId(id: string, parent: FormNode): FormNode[];
 }
 
+export function wrapFormNode(
+  node: FormNode,
+  getChildren?: (dontFollowRef?: boolean) => FormNode[],
+): FormNode {
+  return {
+    ...node,
+    getChildNodes: getChildren ?? ((dfr) => node.getChildNodes(dfr)),
+  };
+}
 export function nodeForControl(
   definition: ControlDefinition,
   tree: FormTree,
   indexOrId?: number | string,
   parent?: FormNode,
 ): FormNode {
-  return new FormNode(
-    parent ? parent.id + "/" + indexOrId : "",
+  return {
+    id: parent ? parent.id + "/" + indexOrId : "",
     definition,
     tree,
     parent,
-  );
+    getChildNodes(dontFollowRef?: boolean): FormNode[] {
+      let children = this.definition.children;
+      if (!dontFollowRef && this.definition.childRefId) {
+        return this.tree.getChildrenForId(this.definition.childRefId, this);
+      }
+      return defaultGetChildNodes(this, children);
+    },
+  };
 }
 
 export function legacyFormNode(definition: ControlDefinition) {
@@ -619,36 +616,56 @@ function getControlIds(
     : [[definition.id, definition], ...childEntries];
 }
 
-function makeFormTree(
-  controls: ControlDefinition[],
-  getForm: FormTreeLookup,
+export function createFormTreeWithRoot(
+  createRootNode: (tree: FormTree) => FormNode,
+  getChildrenForId: (id: string, parent: FormNode) => FormNode[],
+  getForm: FormTreeLookup = { getForm: () => undefined },
 ): FormTree {
   const tree = {
-    getForm,
-    controlMap: Object.fromEntries(controls.flatMap(getControlIds)),
-  } as unknown as FormTree;
-  tree.rootNode = nodeForControl(
-    {
-      children: controls,
-      type: ControlDefinitionType.Group,
+    ...getForm,
+    getChildrenForId,
+    rootNode: undefined! as FormNode,
+  } satisfies FormTree;
+  tree.rootNode = createRootNode(tree);
+  return tree;
+}
+
+export function createFormTree(
+  controls: ControlDefinition[],
+  getForm: FormTreeLookup = { getForm: () => undefined },
+): FormTree {
+  const controlMap = Object.fromEntries(controls.flatMap(getControlIds));
+  return createFormTreeWithRoot(
+    (tree) =>
+      nodeForControl(
+        { children: controls, type: ControlDefinitionType.Group },
+        tree,
+      ),
+    (id: string, parent: FormNode) => {
+      return (
+        controlMap[id]?.children?.map((x, i) =>
+          nodeForControl(x, parent.tree, i, parent),
+        ) ?? []
+      );
     },
-    tree,
+    getForm,
   );
-  return tree;
 }
 
 export function createFormLookup<A extends Record<string, ControlDefinition[]>>(
   formMap: A,
-): FormTreeLookup<keyof A> {
+): {
+  getForm(formId: keyof A): FormTree;
+} {
   const lookup = {
     getForm,
   };
   const forms = Object.fromEntries(
-    Object.entries(formMap).map(([k, v]) => [k, makeFormTree(v, lookup)]),
+    Object.entries(formMap).map(([k, v]) => [k, createFormTree(v, lookup)]),
   );
   return lookup;
 
-  function getForm(formId: keyof A): FormTree | undefined {
+  function getForm(formId: keyof A): FormTree {
     return forms[formId as string];
   }
 }

package/src/controlRender.tsx

@@ -148,8 +148,8 @@ export interface FormRenderer {
    */
   renderLabel: (
     props: LabelRendererProps,
-    labelStart: ReactNode,
-    labelEnd: ReactNode,
+    labelStart?: ReactNode,
+    labelEnd?: ReactNode,
   ) => ReactNode;
 
   /**
@@ -172,6 +172,9 @@ export interface FormRenderer {
    * @returns A React node.
    */
   renderLabelText: (props: ReactNode) => ReactNode;
+  renderText: (props: ReactNode) => ReactNode;
+
+  h: (type: any, props: any, ...children: any[]) => ReactElement;
 }
 
 export interface AdornmentProps {
@@ -463,7 +466,7 @@ export function useControlRendererComponent(
   parentDataNode: SchemaDataNode,
 ): FC<{}> {
   const [definition, formNode] =
-    controlOrFormNode instanceof FormNode
+    "definition" in controlOrFormNode
       ? [controlOrFormNode.definition, controlOrFormNode]
       : [controlOrFormNode, legacyFormNode(controlOrFormNode)];
   const dataProps = options.useDataHook?.(definition) ?? defaultDataProps;

package/src/createFormRenderer.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import {
   ActionRendererProps,
   AdornmentProps,
@@ -11,6 +11,7 @@ import {
   GroupRendererProps,
   LabelRendererProps,
   LabelType,
+  VisibilityRendererProps,
 } from "./controlRender";
 import { hasOptions } from "./util";
 import {
@@ -55,10 +56,16 @@ export function createFormRenderer(
     renderArray,
     renderAdornment,
     renderLayout,
-    renderVisibility: visibilityRenderer.render,
+    renderVisibility,
     renderLabelText,
+    renderText: defaultRenderers.renderText,
+    h: defaultRenderers.h,
   };
 
+  function renderVisibility(props: VisibilityRendererProps) {
+    return visibilityRenderer.render(props, formRenderers);
+  }
+
   function renderLabelText(label: ReactNode) {
     return renderLabel({ label, type: LabelType.Text }, undefined, undefined);
   }
@@ -103,28 +110,33 @@ export function createFormRenderer(
 
     const options = hasOptions(props);
     const renderType = renderOptions.type;
-    const renderer =
-      dataRegistrations.find(matchesRenderer) ?? defaultRenderers.data;
+    const renderer = dataRegistrations.find(matchesRenderer);
 
-    const result = renderer.render(props, formRenderers);
+    const result = (renderer ?? defaultRenderers.data).render(
+      props,
+      formRenderers,
+    );
     if (typeof result === "function") return result;
     return (l) => ({ ...l, children: result });
 
     function matchesRenderer(x: DataRendererRegistration) {
+      const noMatch = x.match ? !x.match(props, renderOptions) : undefined;
+      if (noMatch === true) return false;
       const matchCollection =
         (x.collection ?? false) ===
         (props.elementIndex == null && (field.collection ?? false));
-      const matchSchemaType =
-        x.schemaType &&
-        renderType == DataRenderType.Standard &&
-        isOneOf(x.schemaType, field.type);
-      const matchRenderType =
-        !x.renderType || isOneOf(x.renderType, renderType);
+      const isSchemaAllowed =
+        !!x.schemaType && renderType == DataRenderType.Standard
+          ? isOneOf(x.schemaType, field.type)
+          : undefined;
+      const isRendererAllowed =
+        !!x.renderType && isOneOf(x.renderType, renderType);
       return (
         matchCollection &&
         (x.options ?? false) === options &&
-        (matchSchemaType || matchRenderType) &&
-        (!x.match || x.match(props, renderOptions))
+        (isSchemaAllowed ||
+          isRendererAllowed ||
+          (!x.renderType && !x.schemaType && noMatch === false))
       );
     }
   }

package/src/renderers.tsx

@@ -19,7 +19,8 @@ import {
   ControlAdornment,
   ControlAdornmentType,
   IconAdornment,
-  OptionalAdornment, RenderOptions,
+  OptionalAdornment,
+  RenderOptions,
   SetFieldAdornment,
 } from "./controlDefinition";
 
@@ -33,6 +34,8 @@ export interface DefaultRenderers {
   adornment: AdornmentRendererRegistration;
   renderLayout: LayoutRendererRegistration;
   visibility: VisibilityRendererRegistration;
+  renderText: (props: ReactNode) => ReactNode;
+  h: (type: any, props: any, ...children: any[]) => ReactElement;
 }
 
 export interface LayoutRendererRegistration {
@@ -104,7 +107,7 @@ export interface AdornmentRendererRegistration {
 
 export interface VisibilityRendererRegistration {
   type: "visibility";
-  render: (props: VisibilityRendererProps) => ReactNode;
+  render: (props: VisibilityRendererProps, renderer: FormRenderer) => ReactNode;
 }
 
 export type RendererRegistration =

package/tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react",
+    "jsx": "preserve",
     "outDir": "lib"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],