An updated version of withJsonFormsCellProps that adds a translated error message

CustomFormsContext.tsx

import {
  CellProps, ControlElement,
  getCombinedErrorMessage,
  getErrorAt,
  getErrorTranslator,
  getSchema,
  getTranslator,
  JsonFormsState,
  OwnPropsOfCell,
  Resolve
} from "@jsonforms/core";
import {
  ctxDispatchToControlProps,
  ctxToCellProps,
  ctxToDispatchCellProps,
  ctxToEnumCellProps,
  ctxToOneOfEnumCellProps,
  JsonFormsStateContext,
  withJsonFormsContext
} from "@jsonforms/react";
import React, { ComponentType } from "react";

/**
 * Get the translated error message for a cell.
 * 
 * An enhanced version of withJsonFormsCellProps which translates the errors string for display within a cell
 * which is necessary due to the following issue:
 * @see https://github.com/eclipsesource/jsonforms/issues/2090
 */
export function withJsonFormsCellPropsWithI18nError(Component: ComponentType<CellProps>, memoize = true): ComponentType<OwnPropsOfCell> {
  return withJsonFormsPropsWithI18nError(Component, ctxToCellProps, memoize);
}

export function withJsonFormsDispatchCellPropsWithI18nError(Component: ComponentType<CellProps>, memoize = true): ComponentType<OwnPropsOfCell> {
  return withJsonFormsPropsWithI18nError(Component, ctxToDispatchCellProps, memoize);
}

export function withJsonFormsEnumCellPropsWithI18nError(Component: ComponentType<CellProps>, memoize = true): ComponentType<OwnPropsOfCell> {
  return withJsonFormsPropsWithI18nError(Component, ctxToEnumCellProps, memoize);
}

export function withJsonFormsOneOfEnumCellPropsWithI18nError(Component: ComponentType<CellProps>, memoize = true): ComponentType<OwnPropsOfCell> {
  return withJsonFormsPropsWithI18nError(Component, ctxToOneOfEnumCellProps, memoize);
}

interface CtxToProps {
  (ctx: JsonFormsStateContext, props: any): any
}

function withJsonFormsPropsWithI18nError(Component: ComponentType<CellProps>, ctxToProps: CtxToProps, memoize = true) {
  return withJsonFormsContext(withContextToPropsWithI18nError(memoize ? React.memo(Component) : Component, ctxToProps));
}

function withContextToPropsWithI18nError(Component: ComponentType<any>, ctxToProps: CtxToProps): ComponentType<any> {
  return function WrapperComponent({ ctx, props }) {
    const cellProps = ctxToProps(ctx, props);
    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch as React.Dispatch<unknown>);
    return (
      <Component {...props} {...dispatchProps} {...cellProps} errors={getErrorMessage(ctx, props)} />
    );
  };
}

function getErrorMessage(ctx: JsonFormsStateContext, ownProps: OwnPropsOfCell): string {
  const { uischema, path } = ownProps;
  const controlElement = uischema as ControlElement;
  const state: JsonFormsState = { jsonforms: { ...ctx } };
  const rootSchema = getSchema(state);
  const resolvedSchema = Resolve.schema(ownProps.schema || rootSchema, controlElement.scope, rootSchema);
  const schema = resolvedSchema ?? rootSchema;
  const errors = getErrorAt(path as string, resolvedSchema)(state);
  const t = getTranslator()(state);
  const te = getErrorTranslator()(state);
  return getCombinedErrorMessage(errors, te, t, schema, uischema, path);
}