@react-typed-forms/schemas 8.0.0 → 8.2.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/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

@@ -37,6 +37,8 @@ export declare function lookupChildControl(data: DataContext, child: JsonPath):
 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 getAllReferencedClasses(c: ControlDefinition, collectExtra?: (c: ControlDefinition) => (string | undefined | null)[]): 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": "8.0.0",
+  "version": "8.2.0",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/controlRender.tsx

@@ -53,6 +53,7 @@ import {
   useEvalDisabledHook,
   useEvalDisplayHook,
   UseEvalExpressionHook,
+  useEvalLabelText,
   useEvalReadonlyHook,
   useEvalStyleHook,
   useEvalVisibilityHook,
@@ -101,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;
 }
@@ -153,6 +154,7 @@ export interface LabelRendererProps {
   label: ReactNode;
   required?: boolean | null;
   forId?: string;
+  className?: string;
 }
 export interface DisplayRendererProps {
   data: DisplayData;
@@ -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
@@ -377,6 +381,7 @@ export function useControlRenderer(
           formOptions: myOptions,
           dataContext: controlDataContext,
           control: displayControl ?? control,
+          labelText,
           schemaField,
           displayControl,
           style: customStyle,
@@ -403,6 +408,7 @@ export function useControlRenderer(
       useCustomStyle,
       useLayoutStyle,
       useAllowedOptions,
+      useLabelText,
       useDynamicDisplay,
       useValidation,
       renderer,
@@ -574,6 +580,7 @@ export interface RenderControlProps {
   formOptions: FormContextOptions;
   dataContext: ControlDataContext;
   control?: Control<any>;
+  labelText?: Control<string | null | undefined>;
   schemaField?: SchemaField;
   displayControl?: Control<string | undefined>;
   style?: React.CSSProperties;
@@ -590,6 +597,7 @@ export function renderControlLayout({
   createDataProps: dataProps,
   displayControl,
   style,
+  labelText,
   allowedOptions,
 }: RenderControlProps): ControlLayoutProps {
   if (isDataControlDefinition(c)) {
@@ -609,7 +617,8 @@ export function renderControlLayout({
         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,
       },
@@ -618,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),
@@ -664,17 +673,18 @@ export function renderControlLayout({
           : 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,7 +306,7 @@ 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 {
@@ -351,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

@@ -48,7 +48,7 @@ import {
   SchemaInterface,
   TextDisplay,
 } from "./types";
-import { hasOptions } from "./util";
+import { getOverrideClass, hasOptions, rendererClass } from "./util";
 
 export interface DefaultRenderers {
   data: DataRendererRegistration;
@@ -265,6 +265,7 @@ export function createFormRenderer(
 interface DefaultLabelRendererOptions {
   className?: string;
   groupLabelClass?: string;
+  controlLabelClass?: string;
   requiredElement?: ReactNode;
 }
 
@@ -287,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}
@@ -436,7 +442,10 @@ export function createDefaultGroupRenderer(
       return {
         ...cp,
         children: (
-          <div className={clsx(props.className, className, gcn)} style={style}>
+          <div
+            className={rendererClass(props.className, clsx(className, gcn))}
+            style={style}
+          >
             {children?.map((c, i) => renderChild(i, i))}
           </div>
         ),
@@ -472,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>
       );
@@ -487,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,
           }}
@@ -573,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}
@@ -605,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>
   );
@@ -693,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 {
@@ -832,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!}
@@ -963,7 +978,6 @@ export function DefaultVisibility({
 
 export function DefaultLayout({
   errorClass,
-  className,
   layout: { controlEnd, controlStart, label, children, errorControl },
 }: DefaultLayoutRendererOptions & {
   layout: RenderedLayout;

package/src/tailwind.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { DefaultRendererOptions } from "./renderers";
 
-export const defaultTailwindTheme: DefaultRendererOptions = {
+export const defaultTailwindTheme = {
   label: {
     groupLabelClass: "font-bold",
     requiredElement: <span className="text-red-500"> *</span>,
@@ -26,4 +26,4 @@ export const defaultTailwindTheme: DefaultRendererOptions = {
   data: {
     displayOnlyClass: "flex flex-row items-center gap-2",
   },
-};
+} satisfies DefaultRendererOptions;

package/src/types.ts

@@ -65,6 +65,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;
@@ -90,7 +91,8 @@ export enum DynamicPropertyType {
   Display = "Display",
   Style = "Style",
   LayoutStyle = "LayoutStyle",
-  AllowedOptions = "AllowedOptions"
+  AllowedOptions = "AllowedOptions",
+  Label = "Label",
 }
 
 export interface EntityExpression {

package/src/util.ts

@@ -387,20 +387,35 @@ export function cleanDataForSchema(
   return out;
 }
 
-export function getAllReferencedClasses(c: ControlDefinition): string[] {
-  const childClasses = c.children?.flatMap(getAllReferencedClasses);
-  const tc = clsx(c.styleClass, c.layoutClass);
+export function getAllReferencedClasses(
+  c: ControlDefinition,
+  collectExtra?: (c: ControlDefinition) => (string | undefined | null)[],
+): string[] {
+  const childClasses = c.children?.flatMap((x) =>
+    getAllReferencedClasses(x, collectExtra),
+  );
+  const tc = clsx(
+    [
+      c.styleClass,
+      c.layoutClass,
+      c.labelClass,
+      ...(collectExtra?.(c) ?? []),
+    ].map(getOverrideClass),
+  );
   if (childClasses && !tc) return childClasses;
   if (!tc) return [];
   if (childClasses) return [tc, ...childClasses];
   return [tc];
 }
 
-export function jsonPathString(jsonPath: JsonPath[]) {
+export function jsonPathString(
+  jsonPath: JsonPath[],
+  customIndex?: (n: number) => string,
+) {
   let out = "";
   jsonPath.forEach((v, i) => {
     if (typeof v === "number") {
-      out += "[" + v + "]";
+      out += customIndex?.(v) ?? "[" + v + "]";
     } else {
       if (i > 0) out += ".";
       out += v;
@@ -420,3 +435,19 @@ export function findChildDefinition(
   }
   return parent.children![childPath];
 }
+
+export function getOverrideClass(className?: string | null) {
+  if (className && className.startsWith("@ ")) {
+    return className.substring(2);
+  }
+  return className;
+}
+
+export function rendererClass(
+  controlClass?: string | null,
+  globalClass?: string | null,
+) {
+  const oc = getOverrideClass(controlClass);
+  if (oc === controlClass) return clsx(controlClass, globalClass);
+  return oc ? oc : undefined;
+}