@react-typed-forms/schemas 15.1.3 → 15.2.0

package/src/controlRender.tsx

@@ -1,10 +1,12 @@
 import React, {
-  ComponentType,
+  ButtonHTMLAttributes,
   ElementType,
   FC,
   Fragment,
   HTMLAttributes,
+  InputHTMLAttributes,
   Key,
+  LabelHTMLAttributes,
   ReactElement,
   ReactNode,
   useCallback,
@@ -23,7 +25,6 @@ import {
   useControlEffect,
 } from "@react-typed-forms/core";
 import {
-  ActionStyle,
   AdornmentPlacement,
   ArrayActionOptions,
   ControlActionHandler,
@@ -38,13 +39,14 @@ import {
   DisplayDataType,
   DynamicPropertyType,
   FormContextData,
+  FormNode,
   GroupRenderOptions,
-  IconPlacement,
-  IconReference,
   isActionControl,
   isDataControl,
   isDisplayControl,
   isGroupControl,
+  legacyFormNode,
+  lookupDataNode,
   RenderOptions,
 } from "./controlDefinition";
 import {
@@ -83,74 +85,24 @@ import {
   SchemaValidator,
   ValidatorType,
 } from "./schemaValidator";
-import { FieldOption, SchemaField } from "./schemaField";
-import { FormNode, legacyFormNode, lookupDataNode } from "./formNode";
-import { SchemaInterface } from "./schemaInterface";
-import { makeSchemaDataNode, SchemaDataNode } from "./schemaDataNode";
-import { createSchemaTree } from "./schemaNode";
-
-export interface HtmlIconProperties {
-  className?: string;
-  style?: React.CSSProperties;
-  iconLibrary?: string;
-  iconName?: string;
-}
-
-export interface HtmlLabelProperties {
-  htmlFor?: string;
-  className?: string;
-  textClass?: string;
-  children?: ReactNode;
-}
-
-export interface HtmlDivProperties {
-  id?: string;
-  className?: string;
-  textClass?: string;
-  style?: React.CSSProperties;
-  children?: ReactNode;
-  text?: string;
-  html?: string;
-  nativeRef?: (e: HTMLElement | null) => void;
-  inline?: boolean;
-}
-
-export interface HtmlInputProperties {
-  id?: string;
-  className?: string;
-  textClass?: string;
-  name?: string;
-  type?: string;
-  checked?: boolean;
-  style?: React.CSSProperties;
-  readOnly?: boolean;
-  placeholder?: string;
-  value?: string | number;
-  onBlur?: () => void;
-  disabled?: boolean;
-  inputRef?: (e: HTMLElement | null) => void;
-  onChangeValue?: (value: string) => void;
-  onChangeChecked?: (checked: boolean) => void;
-}
+import {
+  createSchemaLookup,
+  FieldOption,
+  makeSchemaDataNode,
+  SchemaDataNode,
+  SchemaField,
+  SchemaInterface,
+} from "./schemaField";
 
-export interface HtmlButtonProperties {
-  className?: string;
-  textClass?: string;
-  disabled?: boolean;
-  style?: React.CSSProperties;
-  onClick?: () => void;
-  inline?: boolean;
-  children?: ReactNode;
-}
 export interface HtmlComponents {
-  Div: ComponentType<HtmlDivProperties>;
+  Div: ElementType<HTMLAttributes<HTMLDivElement>, "div">;
   Span: ElementType<HTMLAttributes<HTMLSpanElement>>;
-  Button: ComponentType<HtmlButtonProperties>;
-  I: ComponentType<HtmlIconProperties>;
-  Label: ComponentType<HtmlLabelProperties>;
+  Button: ElementType<ButtonHTMLAttributes<HTMLButtonElement>>;
+  I: ElementType<HTMLAttributes<HTMLElement>>;
+  Label: ElementType<LabelHTMLAttributes<HTMLLabelElement>>;
   B: ElementType<HTMLAttributes<HTMLElement>>;
   H1: ElementType<HTMLAttributes<HTMLElement>>;
-  Input: ComponentType<HtmlInputProperties>;
+  Input: ElementType<InputHTMLAttributes<HTMLInputElement>, "input">;
 }
 /**
  * Interface for rendering different types of form controls.
@@ -235,6 +187,7 @@ export interface FormRenderer {
    * @returns A React node.
    */
   renderLabelText: (props: ReactNode) => ReactNode;
+  renderText: (props: ReactNode, className?: string) => ReactNode;
 
   html: HtmlComponents;
 }
@@ -288,7 +241,6 @@ export interface RenderedLayout {
   className?: string;
   style?: React.CSSProperties;
   wrapLayout: (layout: ReactElement) => ReactElement;
-  inline?: boolean;
 }
 
 export interface RenderedControl {
@@ -296,7 +248,6 @@ export interface RenderedControl {
   className?: string;
   style?: React.CSSProperties;
   divRef?: (cb: HTMLElement | null) => void;
-  inline?: boolean;
 }
 
 export interface VisibilityRendererProps extends RenderedControl {
@@ -311,7 +262,6 @@ export interface ControlLayoutProps {
   processLayout?: (props: ControlLayoutProps) => ControlLayoutProps;
   className?: string | null;
   style?: React.CSSProperties;
-  inline?: boolean;
 }
 
 /**
@@ -368,11 +318,6 @@ export interface LabelRendererProps {
    * The CSS class name for the label.
    */
   className?: string;
-
-  /**
-   * The CSS class name for the label text.
-   */
-  textClass?: string;
 }
 
 /**
@@ -399,13 +344,10 @@ export interface DisplayRendererProps {
    */
   className?: string;
 
-  textClass?: string;
-
   /**
    * The CSS styles for the display renderer.
    */
   style?: React.CSSProperties;
-  inline?: boolean;
 }
 
 export type ChildVisibilityFunc = (
@@ -417,7 +359,6 @@ export interface ParentRendererProps {
   formNode: FormNode;
   renderChild: ChildRenderer;
   className?: string;
-  textClass?: string;
   style?: React.CSSProperties;
   dataContext: ControlDataContext;
   useChildVisibility: ChildVisibilityFunc;
@@ -434,6 +375,7 @@ export interface DataRendererProps extends ParentRendererProps {
   renderOptions: RenderOptions;
   definition: DataControlDefinition;
   field: SchemaField;
+  elementIndex?: number;
   id: string;
   control: Control<any>;
   readonly: boolean;
@@ -442,22 +384,16 @@ export interface DataRendererProps extends ParentRendererProps {
   hidden: boolean;
   dataNode: SchemaDataNode;
   displayOnly: boolean;
-  inline: boolean;
 }
 
 export interface ActionRendererProps {
   actionId: string;
   actionText: string;
   actionData?: any;
-  actionStyle?: ActionStyle;
-  icon?: IconReference | null;
-  iconPlacement?: IconPlacement;
   onClick: () => void;
   className?: string | null;
-  textClass?: string | null;
   style?: React.CSSProperties;
   disabled?: boolean;
-  inline?: boolean;
 }
 
 export interface ControlRenderProps {
@@ -470,13 +406,28 @@ export interface FormContextOptions {
   hidden?: boolean | null;
   disabled?: boolean | null;
   displayOnly?: boolean;
-  inline?: boolean;
+}
+
+export interface DataControlProps {
+  formNode: FormNode;
+  definition: DataControlDefinition;
+  dataContext: ControlDataContext;
+  control: Control<any>;
+  formOptions: FormContextOptions;
+  style?: React.CSSProperties | undefined;
+  renderChild: ChildRenderer;
+  elementIndex?: number;
+  allowedOptions?: Control<any[] | undefined>;
+  useChildVisibility: ChildVisibilityFunc;
+  useEvalExpression: UseEvalExpressionHook;
+  schemaInterface?: SchemaInterface;
+  designMode?: boolean;
+  styleClass?: string;
+  layoutClass?: string;
 }
 
 export type CreateDataProps = (
-  controlProps: RenderLayoutProps,
-  definition: DataControlDefinition,
-  control: Control<any>,
+  controlProps: DataControlProps,
 ) => DataRendererProps;
 
 export interface ControlRenderOptions
@@ -499,6 +450,7 @@ export interface ControlRenderOptions
   ) => ControlLayoutProps;
   clearHidden?: boolean;
   schemaInterface?: SchemaInterface;
+  elementIndex?: number;
   formData?: FormContextData;
 }
 
@@ -533,10 +485,16 @@ export function useControlRendererComponent(
       ? [controlOrFormNode.definition, controlOrFormNode]
       : [controlOrFormNode, legacyFormNode(controlOrFormNode)];
   const dataProps = options.useDataHook?.(definition) ?? defaultDataProps;
+  const elementIndex = options.elementIndex;
   const schemaInterface = options.schemaInterface ?? defaultSchemaInterface;
   const useExpr = options.useEvalExpressionHook ?? defaultUseEvalExpressionHook;
 
-  let dataNode = lookupDataNode(definition, parentDataNode);
+  let dataNode: SchemaDataNode | undefined;
+  if (elementIndex != null) {
+    dataNode = parentDataNode.getChildElement(elementIndex);
+  } else {
+    dataNode = lookupDataNode(definition, parentDataNode);
+  }
   const useValidation = useMakeValidationHook(
     definition,
     options.useValidationHook,
@@ -565,6 +523,7 @@ export function useControlRendererComponent(
   const r = useUpdatedRef({
     options,
     definition,
+    elementIndex,
     parentDataNode,
     dataNode,
     formNode,
@@ -578,6 +537,7 @@ export function useControlRendererComponent(
       const {
         definition: c,
         options,
+        elementIndex,
         parentDataNode: pdn,
         dataNode: dn,
         formNode,
@@ -666,7 +626,6 @@ export function useControlRendererComponent(
         readonly: options.readonly || readonlyControl.value,
         disabled: options.disabled || disabledControl.value,
         displayOnly: options.displayOnly || isControlDisplayOnly(c),
-        inline: options.inline,
       }));
       const myOptions = trackedValue(myOptionsControl);
       useValidation({
@@ -674,17 +633,12 @@ export function useControlRendererComponent(
         hiddenControl: myOptionsControl.fields.hidden,
         dataContext,
       });
-      const {
-        styleClass,
-        labelClass,
-        layoutClass,
-        labelTextClass,
-        textClass,
-        ...inheritableOptions
-      } = options;
+      const { styleClass, labelClass, layoutClass, ...inheritableOptions } =
+        options;
       const childOptions: ControlRenderOptions = {
         ...inheritableOptions,
         ...myOptions,
+        elementIndex: undefined,
       };
 
       useEffect(() => {
@@ -695,6 +649,7 @@ export function useControlRendererComponent(
         )
           control.disabled = myOptions.disabled;
       }, [control, myOptions.disabled]);
+      if (parentControl.isNull) return <></>;
 
       const adornments =
         definition.adornments?.map((x) =>
@@ -705,9 +660,19 @@ export function useControlRendererComponent(
             formOptions: myOptions,
           }),
         ) ?? [];
+      const otherChildNodes =
+        definition.childRefId &&
+        formNode.tree.getByRefId(definition.childRefId)?.getChildNodes();
 
       const labelAndChildren = renderControlLayout({
-        formNode,
+        formNode: otherChildNodes
+          ? formNode.tree.createTempNode(
+              formNode.id,
+              definition,
+              otherChildNodes,
+            )
+          : formNode,
+        definition: c,
         renderer,
         renderChild: (k, child, options) => {
           const overrideClasses = getGroupClassOverrides(c);
@@ -733,6 +698,7 @@ export function useControlRendererComponent(
         formOptions: myOptions,
         dataContext,
         control: displayControl ?? control,
+        elementIndex,
         schemaInterface,
         labelText,
         displayControl,
@@ -743,7 +709,6 @@ export function useControlRendererComponent(
         actionOnClick: options.actionOnClick,
         styleClass: options.styleClass,
         labelClass: options.labelClass,
-        textClass: options.textClass,
         useEvalExpression: useExpr,
         useChildVisibility: (childDef, parentNode, dontOverride) => {
           return useEvalVisibilityHook(
@@ -792,7 +757,7 @@ export function ControlRenderer({
   parentPath?: JsonPath[];
 }) {
   const schemaDataNode = makeSchemaDataNode(
-    createSchemaTree(fields).rootNode,
+    createSchemaLookup({ "": fields }).getSchema("")!,
     control,
   );
   const Render = useControlRendererComponent(
@@ -824,23 +789,19 @@ export function NewControlRenderer({
   return <Render />;
 }
 
-export function defaultDataProps(
-  {
-    formOptions,
-    style,
-    allowedOptions,
-    schemaInterface = defaultSchemaInterface,
-    styleClass,
-    textClass: tc,
-    ...props
-  }: RenderLayoutProps,
-  definition: DataControlDefinition,
-  control: Control<any>,
-): DataRendererProps {
+export function defaultDataProps({
+  definition,
+  control,
+  formOptions,
+  style,
+  allowedOptions,
+  schemaInterface = defaultSchemaInterface,
+  styleClass,
+  ...props
+}: DataControlProps): DataRendererProps {
   const dataNode = props.dataContext.dataNode!;
   const field = dataNode.schema.field;
   const className = rendererClass(styleClass, definition.styleClass);
-  const textClass = rendererClass(tc, definition.textClass);
   const displayOnly = !!formOptions.displayOnly;
   const required = !!definition.required && !displayOnly;
   const fieldOptions = schemaInterface.getDataOptions(dataNode);
@@ -852,7 +813,6 @@ export function defaultDataProps(
     control,
     field,
     id: "c" + control.uniqueId,
-    inline: !!formOptions.inline,
     options:
       allowed.length > 0
         ? allowed
@@ -872,16 +832,15 @@ export function defaultDataProps(
     required,
     hidden: !!formOptions.hidden,
     className,
-    textClass,
     style,
     ...props,
   };
 }
 
 export interface ChildRendererOptions {
+  elementIndex?: number;
   parentDataNode?: SchemaDataNode;
   formData?: FormContextData;
-  inline?: boolean;
   displayOnly?: boolean;
   styleClass?: string;
   layoutClass?: string;
@@ -894,7 +853,8 @@ export type ChildRenderer = (
   options?: ChildRendererOptions,
 ) => ReactNode;
 
-export interface RenderLayoutProps {
+export interface RenderControlProps {
+  definition: ControlDefinition;
   formNode: FormNode;
   renderer: FormRenderer;
   renderChild: ChildRenderer;
@@ -903,6 +863,7 @@ export interface RenderLayoutProps {
   dataContext: ControlDataContext;
   control?: Control<any>;
   labelText?: Control<string | null | undefined>;
+  elementIndex?: number;
   displayControl?: Control<string | undefined>;
   style?: React.CSSProperties;
   allowedOptions?: Control<any[] | undefined>;
@@ -917,14 +878,13 @@ export interface RenderLayoutProps {
     displayProps: DisplayRendererProps,
   ) => ReactNode;
   labelClass?: string;
-  labelTextClass?: string;
   styleClass?: string;
-  textClass?: string;
 }
 export function renderControlLayout(
-  props: RenderLayoutProps,
+  props: RenderControlProps,
 ): ControlLayoutProps {
   const {
+    definition: c,
     renderer,
     renderChild,
     control,
@@ -938,13 +898,10 @@ export function renderControlLayout(
     customDisplay,
     useEvalExpression,
     labelClass,
-    labelTextClass,
     styleClass,
-    textClass,
     formNode,
-    formOptions,
   } = props;
-  const c = formNode.definition;
+
   if (isDataControl(c)) {
     return renderData(c);
   }
@@ -959,7 +916,6 @@ export function renderControlLayout(
     }
 
     return {
-      inline: formOptions.inline,
       processLayout: renderer.renderGroup({
         formNode,
         definition: c,
@@ -968,7 +924,6 @@ export function renderControlLayout(
         dataContext,
         renderOptions: c.groupOptions ?? { type: "Standard" },
         className: rendererClass(styleClass, c.styleClass),
-        textClass: rendererClass(textClass, c.textClass),
         useChildVisibility,
         style,
         designMode,
@@ -976,7 +931,6 @@ export function renderControlLayout(
       label: {
         label: labelText?.value ?? c.title,
         className: rendererClass(labelClass, c.labelClass),
-        textClass: rendererClass(labelTextClass, c.labelTextClass),
         type: LabelType.Group,
         hide: c.groupOptions?.hideTitle,
       },
@@ -985,15 +939,10 @@ export function renderControlLayout(
   if (isActionControl(c)) {
     const actionData = props.actionDataControl?.value ?? c.actionData;
     return {
-      inline: formOptions.inline,
       children: renderer.renderAction({
         actionText: labelText?.value ?? c.title ?? c.actionId,
         actionId: c.actionId,
         actionData,
-        actionStyle: c.actionStyle ?? ActionStyle.Button,
-        textClass: rendererClass(textClass, c.textClass),
-        icon: c.icon,
-        inline: formOptions.inline,
         onClick:
           props.actionOnClick?.(c.actionId, actionData, dataContext) ??
           (() => {}),
@@ -1007,20 +956,16 @@ export function renderControlLayout(
     const displayProps = {
       data,
       className: rendererClass(styleClass, c.styleClass),
-      textClass: rendererClass(textClass, c.textClass),
       style,
       display: displayControl,
       dataContext,
-      inline: formOptions.inline,
     };
     if (data.type === DisplayDataType.Custom && customDisplay) {
       return {
-        inline: formOptions.inline,
         children: customDisplay((data as CustomDisplay).customId, displayProps),
       };
     }
     return {
-      inline: formOptions.inline,
       children: renderer.renderDisplay(displayProps),
     };
   }
@@ -1028,7 +973,13 @@ export function renderControlLayout(
 
   function renderData(c: DataControlDefinition): ControlLayoutProps {
     if (!control) return { children: "No control for: " + c.field };
-    const rendererProps = dataProps(props, c, control);
+    const rendererProps = dataProps(
+      props as RenderControlProps & {
+        definition: DataControlDefinition;
+        control: Control<any>;
+      },
+    );
+
     const label = !c.hideTitle
       ? controlTitle(
           labelText?.value ?? c.title,
@@ -1036,7 +987,6 @@ export function renderControlLayout(
         )
       : undefined;
     return {
-      inline: formOptions.inline,
       processLayout: renderer.renderData(rendererProps),
       label: {
         type:
@@ -1046,7 +996,6 @@ export function renderControlLayout(
         required: c.required && !props.formOptions.displayOnly,
         hide: c.hideTitle,
         className: rendererClass(labelClass, c.labelClass),
-        textClass: rendererClass(labelTextClass, c.labelTextClass),
       },
       errorControl: control,
     };
@@ -1061,7 +1010,6 @@ type MarkupKeys = keyof Omit<
   | "wrapLayout"
   | "readonly"
   | "disabled"
-  | "inline"
 >;
 export function appendMarkup(
   k: MarkupKeys,
@@ -1123,21 +1071,13 @@ export function renderLayoutParts(
   props: ControlLayoutProps,
   renderer: FormRenderer,
 ): RenderedLayout {
-  const {
-    className,
-    children,
-    style,
-    errorControl,
-    label,
-    adornments,
-    inline,
-  } = props.processLayout?.(props) ?? props;
+  const { className, children, style, errorControl, label, adornments } =
+    props.processLayout?.(props) ?? props;
   const layout: RenderedLayout = {
     children,
     errorControl,
     style,
     className: className!,
-    inline,
     wrapLayout: (x) => x,
   };
   (adornments ?? [])
@@ -1330,14 +1270,13 @@ export function applyArrayLengthRestrictions(
 
 export function fieldOptionAdornment(p: DataRendererProps) {
   return (o: FieldOption, i: number, selected: boolean) => (
-    <RenderArrayElements
-      array={p.formNode.getChildNodes()}
-      children={(cd, i) =>
+    <RenderArrayElements array={p.formNode.getChildNodes()}>
+      {(cd, i) =>
         p.renderChild(i, cd, {
           parentDataNode: p.dataContext.parentNode,
           formData: { option: o, optionSelected: selected },
         })
       }
-    />
+    </RenderArrayElements>
   );
 }

package/src/createFormRenderer.tsx

@@ -59,6 +59,7 @@ export function createFormRenderer(
     renderLayout,
     renderVisibility,
     renderLabelText,
+    renderText: defaultRenderers.renderText,
     html: defaultRenderers.html,
   };
 
@@ -124,7 +125,7 @@ export function createFormRenderer(
       if (noMatch === true) return false;
       const matchCollection =
         (x.collection ?? false) ===
-        (props.dataNode.elementIndex == null && (field.collection ?? false));
+        (props.elementIndex == null && (field.collection ?? false));
       const isSchemaAllowed =
         !!x.schemaType && renderType == DataRenderType.Standard
           ? isOneOf(x.schemaType, field.type)

package/src/defaultSchemaInterface.ts

@@ -3,12 +3,12 @@ import {
   EqualityFunc,
   FieldOption,
   FieldType,
+  SchemaDataNode,
   SchemaField,
+  SchemaInterface,
+  SchemaNode,
   ValidationMessageType,
 } from "./schemaField";
-import { SchemaInterface } from "./schemaInterface";
-import { SchemaDataNode } from "./schemaDataNode";
-import { SchemaNode } from "./schemaNode";
 
 export class DefaultSchemaInterface implements SchemaInterface {
   constructor(
@@ -79,23 +79,13 @@ export class DefaultSchemaInterface implements SchemaInterface {
     return this.textValue(field, value)?.toLowerCase() ?? "";
   }
 
-  textValueForData(dataNode: SchemaDataNode): string | undefined {
-    const options = this.getDataOptions(dataNode);
-    return this.textValue(
-      dataNode.schema.field,
-      dataNode.control.value,
-      dataNode.elementIndex != null,
-      options,
-    );
-  }
   textValue(
     field: SchemaField,
     value: any,
     element?: boolean | undefined,
-    options?: FieldOption[] | null,
   ): string | undefined {
-    const actualOptions = options ?? this.getOptions(field);
-    const option = actualOptions?.find((x) => x.value === value);
+    const options = this.getOptions(field);
+    const option = options?.find((x) => x.value === value);
     if (option) return option.name;
     switch (field.type) {
       case FieldType.Date: