@react-typed-forms/schemas 7.3.2 → 8.1.0

package/lib/renderers.d.ts

@@ -65,6 +65,7 @@ export declare function createFormRenderer(customRenderers?: RendererRegistratio
 interface DefaultLabelRendererOptions {
     className?: string;
     groupLabelClass?: string;
+    controlLabelClass?: string;
     requiredElement?: ReactNode;
 }
 interface DefaultActionRendererOptions {
@@ -174,7 +175,7 @@ type InputConversion = [string, (s: any) => any, (a: any) => string | number];
 export declare function createInputConversion(ft: string): InputConversion;
 export declare function createDefaultVisibilityRenderer(): VisibilityRendererRegistration;
 export declare function DefaultVisibility({ visibility, children, className, style, divRef, }: VisibilityRendererProps): React.JSX.Element;
-export declare function DefaultLayout({ errorClass, className, layout: { controlEnd, controlStart, label, children, errorControl }, }: DefaultLayoutRendererOptions & {
+export declare function DefaultLayout({ errorClass, layout: { controlEnd, controlStart, label, children, errorControl }, }: DefaultLayoutRendererOptions & {
     layout: RenderedLayout;
 }): React.JSX.Element;
 export {};

package/lib/schemaBuilder.d.ts

@@ -87,4 +87,5 @@ export declare function defaultScalarField(field: string, displayName: string):
 export declare function defaultCompoundField(field: string, displayName: string, collection: boolean): CompoundField & {
     type: FieldType.Compound;
 };
+export declare function mergeField(field: SchemaField, mergeInto: SchemaField[]): SchemaField[];
 export {};

package/lib/tailwind.d.ts

@@ -1,2 +1,27 @@
-import { DefaultRendererOptions } from "./renderers";
-export declare const defaultTailwindTheme: DefaultRendererOptions;
+import React from "react";
+export declare const defaultTailwindTheme: {
+    label: {
+        groupLabelClass: string;
+        requiredElement: React.JSX.Element;
+    };
+    array: {
+        removableClass: string;
+        childClass: string;
+        addActionClass: string;
+    };
+    group: {
+        standardClassName: string;
+        gridClassName: string;
+        flexClassName: string;
+    };
+    action: {
+        className: string;
+    };
+    layout: {
+        className: string;
+        errorClass: string;
+    };
+    data: {
+        displayOnlyClass: string;
+    };
+};

package/lib/types.d.ts

@@ -51,6 +51,7 @@ export interface ControlDefinition {
     title?: string | null;
     styleClass?: string | null;
     layoutClass?: string | null;
+    labelClass?: string | null;
     dynamic?: DynamicProperty[] | null;
     adornments?: ControlAdornment[] | null;
     children?: ControlDefinition[] | null;
@@ -73,7 +74,8 @@ export declare enum DynamicPropertyType {
     Display = "Display",
     Style = "Style",
     LayoutStyle = "LayoutStyle",
-    AllowedOptions = "AllowedOptions"
+    AllowedOptions = "AllowedOptions",
+    Label = "Label"
 }
 export interface EntityExpression {
     type: string;

package/lib/util.d.ts

@@ -38,4 +38,7 @@ export declare function cleanDataForSchema(v: {
     [k: string]: any;
 } | undefined, fields: SchemaField[]): any;
 export declare function getAllReferencedClasses(c: ControlDefinition): string[];
-export declare function jsonPathString(jsonPath: JsonPath[]): string;
+export declare function jsonPathString(jsonPath: JsonPath[], customIndex?: (n: number) => string): string;
+export declare function findChildDefinition(parent: ControlDefinition, childPath: number | number[]): ControlDefinition;
+export declare function getOverrideClass(className?: string | null): string | null | undefined;
+export declare function rendererClass(controlClass?: string | null, globalClass?: string | null): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas",
-  "version": "7.3.2",
+  "version": "8.1.0",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/controlBuilder.ts

@@ -1,4 +1,5 @@
 import {
+  CompoundField,
   ControlDefinition,
   ControlDefinitionType,
   DataControlDefinition,
@@ -18,7 +19,8 @@ import {
 } from "./types";
 import { ActionRendererProps } from "./controlRender";
 import { useMemo } from "react";
-import { addMissingControls } from "./util";
+import { addMissingControls, isCompoundField } from "./util";
+import { mergeField } from "./schemaBuilder";
 
 export function dataControl(
   field: string,
@@ -128,3 +130,46 @@ export function useControlDefinitionForSchema(
     [sf, definition],
   );
 }
+
+export interface CustomRenderOptions {
+  value: string;
+  name: string;
+  fields: SchemaField[];
+}
+
+export function addCustomDataRenderOptions(
+  controlFields: SchemaField[],
+  customRenderOptions: CustomRenderOptions[],
+): SchemaField[] {
+  return controlFields.map((x) =>
+    x.field === "renderOptions" && isCompoundField(x) ? addRenderOptions(x) : x,
+  );
+
+  function addRenderOptions(roField: CompoundField): CompoundField {
+    const children = roField.children;
+    const withTypes = children.map((x) =>
+      x.field === "type" ? addRenderOptionType(x) : x,
+    );
+    return {
+      ...roField,
+      children: customRenderOptions.reduce(
+        (renderOptionFields, ro) =>
+          ro.fields
+            .map((x) => ({ ...x, onlyForTypes: [ro.value] }))
+            .reduce((af, x) => mergeField(x, af), renderOptionFields),
+        withTypes,
+      ),
+    };
+  }
+
+  function addRenderOptionType(typeField: SchemaField): SchemaField {
+    const options = typeField.options ?? [];
+    return {
+      ...typeField,
+      options: [
+        ...options,
+        ...customRenderOptions.map(({ name, value }) => ({ name, value })),
+      ],
+    };
+  }
+}

package/src/controlRender.tsx

@@ -26,6 +26,7 @@ import {
   DisplayData,
   DynamicPropertyType,
   FieldOption,
+  GroupedControlsDefinition,
   GroupRenderOptions,
   isActionControlsDefinition,
   isDataControlDefinition,
@@ -39,6 +40,7 @@ import {
   ControlDataContext,
   elementValueForField,
   fieldDisplayName,
+  findChildDefinition,
   findField,
   isCompoundField,
   useUpdatedRef,
@@ -51,6 +53,7 @@ import {
   useEvalDisabledHook,
   useEvalDisplayHook,
   UseEvalExpressionHook,
+  useEvalLabelText,
   useEvalReadonlyHook,
   useEvalStyleHook,
   useEvalVisibilityHook,
@@ -99,7 +102,7 @@ export interface ArrayRendererProps {
   elementCount: number;
   renderElement: (elemIndex: number) => ReactNode;
   elementKey: (elemIndex: number) => Key;
-  arrayControl?: Control<any[] | undefined | null>;
+  arrayControl: Control<any[] | undefined | null>;
   className?: string;
   style?: React.CSSProperties;
 }
@@ -151,6 +154,7 @@ export interface LabelRendererProps {
   label: ReactNode;
   required?: boolean | null;
   forId?: string;
+  className?: string;
 }
 export interface DisplayRendererProps {
   data: DisplayData;
@@ -160,15 +164,14 @@ export interface DisplayRendererProps {
 }
 
 export interface GroupRendererProps {
+  children: ControlDefinition[];
   renderOptions: GroupRenderOptions;
-  childCount: number;
-  renderChild: (child: number) => ReactNode;
+  renderChild: ChildRenderer;
   className?: string;
   style?: React.CSSProperties;
 }
 
 export interface DataRendererProps {
-  definition: DataControlDefinition;
   renderOptions: RenderOptions;
   field: SchemaField;
   id: string;
@@ -180,7 +183,7 @@ export interface DataRendererProps {
   className?: string;
   style?: React.CSSProperties;
   dataContext: ControlDataContext;
-  childCount: number;
+  children: ControlDefinition[];
   renderChild: ChildRenderer;
   toArrayProps?: () => ArrayRendererProps;
 }
@@ -211,7 +214,6 @@ export interface DataControlProps {
   control: Control<any>;
   options: FormContextOptions;
   style: React.CSSProperties | undefined;
-  childCount: number;
   renderChild: ChildRenderer;
   allowedOptions?: Control<any[] | undefined>;
   elementRenderer?: (elemIndex: number) => ReactNode;
@@ -252,6 +254,7 @@ export function useControlRenderer(
   const useIsReadonly = useEvalReadonlyHook(useExpr, definition);
   const useIsDisabled = useEvalDisabledHook(useExpr, definition);
   const useAllowedOptions = useEvalAllowedOptionsHook(useExpr, definition);
+  const useLabelText = useEvalLabelText(useExpr, definition);
   const useCustomStyle = useEvalStyleHook(
     useExpr,
     DynamicPropertyType.Style,
@@ -283,6 +286,7 @@ export function useControlRenderer(
         const displayControl = useDynamicDisplay(parentDataContext);
         const customStyle = useCustomStyle(parentDataContext).value;
         const layoutStyle = useLayoutStyle(parentDataContext).value;
+        const labelText = useLabelText(parentDataContext);
         const visible = visibleControl.current.value;
         const visibility = useControl<Visibility | undefined>(() =>
           visible != null
@@ -343,13 +347,7 @@ export function useControlRenderer(
           !!myOptions.hidden,
           parentDataContext,
         );
-        const childRenderers: FC<ControlRenderProps>[] =
-          c.children?.map((cd) =>
-            useControlRenderer(cd, controlDataContext.fields, renderer, {
-              ...options,
-              ...myOptions,
-            }),
-          ) ?? [];
+        const childOptions: ControlRenderOptions = { ...options, ...myOptions };
 
         useEffect(() => {
           if (control && typeof myOptions.disabled === "boolean")
@@ -364,15 +362,26 @@ export function useControlRenderer(
         const labelAndChildren = renderControlLayout({
           definition: c,
           renderer,
-          childCount: childRenderers.length,
-          renderChild: (k, i, props) => {
-            const RenderChild = childRenderers[i];
-            return <RenderChild key={k} {...props} />;
-          },
+          renderChild: (k, child, path) => (
+            <ControlRenderer
+              key={k}
+              control={controlDataContext.data}
+              fields={controlDataContext.fields}
+              definition={findChildDefinition(c, child)}
+              parentPath={
+                path
+                  ? [...controlDataContext.path, ...path]
+                  : controlDataContext.path
+              }
+              renderer={renderer}
+              options={childOptions}
+            />
+          ),
           createDataProps: dataProps,
           formOptions: myOptions,
           dataContext: controlDataContext,
           control: displayControl ?? control,
+          labelText,
           schemaField,
           displayControl,
           style: customStyle,
@@ -399,6 +408,7 @@ export function useControlRenderer(
       useCustomStyle,
       useLayoutStyle,
       useAllowedOptions,
+      useLabelText,
       useDynamicDisplay,
       useValidation,
       renderer,
@@ -445,19 +455,36 @@ export function getControlData(
   ];
 }
 
+export function ControlRenderer({
+  definition,
+  fields,
+  renderer,
+  options,
+  control,
+  parentPath,
+}: {
+  definition: ControlDefinition;
+  fields: SchemaField[];
+  renderer: FormRenderer;
+  options?: ControlRenderOptions;
+  control: Control<any>;
+  parentPath?: JsonPath[];
+}) {
+  const Render = useControlRenderer(definition, fields, renderer, options);
+  return <Render control={control} parentPath={parentPath} />;
+}
+
 function groupProps(
-  renderOptions: GroupRenderOptions = { type: "Standard" },
-  childCount: number,
+  definition: GroupedControlsDefinition,
   renderChild: ChildRenderer,
   data: DataContext,
   className: string | null | undefined,
   style: React.CSSProperties | undefined,
 ): GroupRendererProps {
   return {
-    childCount,
-    renderChild: (i) =>
-      renderChild(i, i, { control: data.data, parentPath: data.path }),
-    renderOptions,
+    children: definition.children ?? [],
+    renderChild,
+    renderOptions: definition.groupOptions ?? { type: "Standard" },
     className: cc(className),
     style,
   };
@@ -479,7 +506,7 @@ export function defaultDataProps({
     (field.options?.length ?? 0) === 0 ? null : field.options;
   const allowed = allowedOptions?.value ?? [];
   return {
-    definition,
+    children: definition.children ?? [],
     control,
     field,
     id: "c" + control.uniqueId,
@@ -541,19 +568,19 @@ export function defaultArrayProps(
 
 export type ChildRenderer = (
   k: Key,
-  childIndex: number,
-  props: ControlRenderProps,
+  child: number | number[],
+  parentPath?: JsonPath[],
 ) => ReactNode;
 
 export interface RenderControlProps {
   definition: ControlDefinition;
   renderer: FormRenderer;
-  childCount: number;
   renderChild: ChildRenderer;
   createDataProps: CreateDataProps;
   formOptions: FormContextOptions;
   dataContext: ControlDataContext;
   control?: Control<any>;
+  labelText?: Control<string | null | undefined>;
   schemaField?: SchemaField;
   displayControl?: Control<string | undefined>;
   style?: React.CSSProperties;
@@ -562,7 +589,6 @@ export interface RenderControlProps {
 export function renderControlLayout({
   definition: c,
   renderer,
-  childCount,
   renderChild: childRenderer,
   control: childControl,
   schemaField,
@@ -571,6 +597,7 @@ export function renderControlLayout({
   createDataProps: dataProps,
   displayControl,
   style,
+  labelText,
   allowedOptions,
 }: RenderControlProps): ControlLayoutProps {
   if (isDataControlDefinition(c)) {
@@ -587,17 +614,11 @@ export function renderControlLayout({
     }
     return {
       processLayout: renderer.renderGroup(
-        groupProps(
-          c.groupOptions,
-          childCount,
-          childRenderer,
-          dataContext,
-          c.styleClass,
-          style,
-        ),
+        groupProps(c, childRenderer, dataContext, c.styleClass, style),
       ),
       label: {
-        label: c.title,
+        label: labelText?.value ?? c.title,
+        className: cc(c.labelClass),
         type: LabelType.Group,
         hide: c.groupOptions?.hideTitle,
       },
@@ -606,7 +627,7 @@ export function renderControlLayout({
   if (isActionControlsDefinition(c)) {
     return {
       children: renderer.renderAction({
-        actionText: c.title ?? c.actionId,
+        actionText: labelText?.value ?? c.title ?? c.actionId,
         actionId: c.actionId,
         onClick: () => {},
         className: cc(c.styleClass),
@@ -640,26 +661,30 @@ export function renderControlLayout({
         elemIndex != null ? childControl!.elements[elemIndex] : childControl,
       options: dataOptions,
       style,
-      childCount,
       allowedOptions,
-      renderChild: childRenderer,
+      renderChild:
+        elemIndex != null
+          ? (k, d, p) =>
+              childRenderer(k, d, p ? [elemIndex, ...p] : [elemIndex])
+          : childRenderer,
       elementRenderer:
         elemIndex == null && schemaField.collection
           ? (ei) => renderLayoutParts(renderData(c, ei), renderer).children
           : undefined,
     });
 
-    const labelText = !c.hideTitle
-      ? controlTitle(c.title, schemaField)
+    const label = !c.hideTitle
+      ? controlTitle(labelText?.value ?? c.title, schemaField)
       : undefined;
     return {
       processLayout: renderer.renderData(props),
       label: {
         type: LabelType.Control,
-        label: labelText,
+        label,
         forId: props.id,
         required: c.required,
         hide: c.hideTitle,
+        className: cc(c.labelClass),
       },
       errorControl: childControl,
     };

package/src/hooks.tsx

@@ -306,15 +306,16 @@ export function useJsonataExpression(
   dataContext: DataContext,
   bindings?: () => Record<string, any>,
 ): Control<any> {
-  const pathString = jsonPathString(dataContext.path);
+  const pathString = jsonPathString(dataContext.path, (x) => `#$i[${x}]`);
+  const fullExpr = pathString ? pathString + ".(" + jExpr + ")" : jExpr;
   const compiledExpr = useMemo(() => {
     try {
-      return jsonata(pathString ? pathString + ".(" + jExpr + ")" : jExpr);
+      return jsonata(fullExpr);
     } catch (e) {
       console.error(e);
       return jsonata("null");
     }
-  }, [jExpr, pathString]);
+  }, [fullExpr]);
   const control = useControl();
   const listenerRef = useRef<() => void>();
   const [ref] = useRefState(() =>
@@ -350,3 +351,23 @@ export function useJsonataExpression(
   }, [compiledExpr]);
   return control;
 }
+
+export function useEvalLabelText(
+  useExpr: UseEvalExpressionHook,
+  definition: ControlDefinition,
+): EvalExpressionHook<string | null> {
+  const dynamicValue = useEvalDynamicHook(
+    definition,
+    DynamicPropertyType.Label,
+    useExpr,
+  );
+  return useCallback(
+    (ctx) => {
+      if (dynamicValue) {
+        return dynamicValue(ctx);
+      }
+      return useControl(null);
+    },
+    [dynamicValue],
+  );
+}

package/src/renderers.tsx

@@ -31,6 +31,7 @@ import {
   AdornmentPlacement,
   ControlAdornment,
   ControlAdornmentType,
+  ControlDefinitionType,
   DataRenderType,
   DisplayDataType,
   FieldOption,
@@ -47,7 +48,7 @@ import {
   SchemaInterface,
   TextDisplay,
 } from "./types";
-import { hasOptions } from "./util";
+import { getOverrideClass, hasOptions, rendererClass } from "./util";
 
 export interface DefaultRenderers {
   data: DataRendererRegistration;
@@ -264,6 +265,7 @@ export function createFormRenderer(
 interface DefaultLabelRendererOptions {
   className?: string;
   groupLabelClass?: string;
+  controlLabelClass?: string;
   requiredElement?: ReactNode;
 }
 
@@ -286,16 +288,21 @@ export function createDefaultActionRenderer(
 export function createDefaultLabelRenderer(
   options: DefaultLabelRendererOptions = { requiredElement: <span> *</span> },
 ): LabelRendererRegistration {
-  const { className, groupLabelClass, requiredElement } = options;
+  const { className, groupLabelClass, controlLabelClass, requiredElement } =
+    options;
   return {
     render: (props, labelStart, labelEnd) => (
       <>
         {labelStart}
         <label
           htmlFor={props.forId}
-          className={clsx(
-            className,
-            props.type === LabelType.Group && groupLabelClass,
+          className={rendererClass(
+            props.className,
+            clsx(
+              className,
+              props.type === LabelType.Group && groupLabelClass,
+              props.type === LabelType.Control && controlLabelClass,
+            ),
           )}
         >
           {props.label}
@@ -423,7 +430,7 @@ export function createDefaultGroupRenderer(
   }
 
   function render(props: GroupRendererProps) {
-    const { childCount, renderChild, renderOptions } = props;
+    const { renderChild, renderOptions, children } = props;
 
     const { style, className: gcn } = isGridRenderer(renderOptions)
       ? gridStyles(renderOptions)
@@ -435,8 +442,11 @@ export function createDefaultGroupRenderer(
       return {
         ...cp,
         children: (
-          <div className={clsx(props.className, className, gcn)} style={style}>
-            {Array.from({ length: childCount }, (_, x) => renderChild(x))}
+          <div
+            className={rendererClass(props.className, clsx(className, gcn))}
+            style={style}
+          >
+            {children?.map((c, i) => renderChild(i, i))}
           </div>
         ),
       };
@@ -471,14 +481,17 @@ export function DefaultDisplay({
         <i
           style={style}
           className={clsx(
-            className,
+            getOverrideClass(className),
             display ? display.value : (data as IconDisplay).iconClass,
           )}
         />
       );
     case DisplayDataType.Text:
       return (
-        <div style={style} className={clsx(className, options.textClassName)}>
+        <div
+          style={style}
+          className={rendererClass(className, options.textClassName)}
+        >
           {display ? display.value : (data as TextDisplay).text}
         </div>
       );
@@ -486,7 +499,7 @@ export function DefaultDisplay({
       return (
         <div
           style={style}
-          className={clsx(className, options.htmlClassName)}
+          className={rendererClass(className, options.htmlClassName)}
           dangerouslySetInnerHTML={{
             __html: display ? display.value ?? "" : (data as HtmlDisplay).html,
           }}
@@ -530,13 +543,9 @@ export function createDefaultDataRenderer(
       return renderers.renderGroup({
         style: props.style,
         className: props.className,
+        children: props.children,
         renderOptions: { type: "Standard", hideTitle: true },
-        renderChild: (i) =>
-          props.renderChild(i, i, {
-            control: props.dataContext.data,
-            parentPath: props.dataContext.path,
-          }),
-        childCount: props.childCount,
+        renderChild: props.renderChild,
       });
     }
     const renderOptions = props.renderOptions;
@@ -576,7 +585,7 @@ export function createDefaultDataRenderer(
       />
     ) : (
       <ControlInput
-        className={clsx(props.className, inputClass)}
+        className={rendererClass(props.className, inputClass)}
         style={props.style}
         id={props.id}
         readOnly={props.readonly}
@@ -608,7 +617,7 @@ export function DefaultDisplayOnly({
       ? emptyText
       : schemaInterface.textValue(field, v)) ?? "";
   return (
-    <div style={style} className={className}>
+    <div style={style} className={rendererClass(className)}>
       {text}
     </div>
   );
@@ -696,7 +705,10 @@ function createDefaultLayoutRenderer(
 ) {
   return createLayoutRenderer((props, renderers) => {
     const layout = renderLayoutParts(
-      { ...props, className: clsx(props.className, options.className) },
+      {
+        ...props,
+        className: rendererClass(props.className, options.className),
+      },
       renderers,
     );
     return {
@@ -835,7 +847,7 @@ export function createSelectRenderer(options: SelectRendererOptions = {}) {
   return createDataRenderer(
     (props, asArray) => (
       <SelectDataRenderer
-        className={clsx(props.className, options.className)}
+        className={rendererClass(props.className, options.className)}
         state={props.control}
         id={props.id}
         options={props.options!}
@@ -966,7 +978,6 @@ export function DefaultVisibility({
 
 export function DefaultLayout({
   errorClass,
-  className,
   layout: { controlEnd, controlStart, label, children, errorControl },
 }: DefaultLayoutRendererOptions & {
   layout: RenderedLayout;

package/src/schemaBuilder.ts

@@ -144,3 +144,28 @@ export function defaultCompoundField(
     children: [],
   };
 }
+
+export function mergeField(
+  field: SchemaField,
+  mergeInto: SchemaField[],
+): SchemaField[] {
+  const existing = mergeInto.find((x) => x.field === field.field);
+  if (existing) {
+    return mergeInto.map((x) =>
+      x !== existing
+        ? x
+        : {
+            ...x,
+            onlyForTypes: mergeTypes(x.onlyForTypes, field.onlyForTypes),
+          },
+    );
+  }
+  return [...mergeInto, field];
+
+  function mergeTypes(f?: string[] | null, s?: string[] | null) {
+    if (!f) return s;
+    if (!s) return f;
+    const extras = s.filter((x) => !f.includes(x));
+    return extras.length ? [...f, ...extras] : f;
+  }
+}