@rjsf/core 6.0.0-beta.9 → 6.0.1

package/src/components/fields/LayoutGridField.tsx

@@ -1,8 +1,8 @@
-import { ComponentType, PureComponent, ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import {
   ANY_OF_KEY,
-  ErrorSchema,
   FieldProps,
+  FieldPathId,
   FormContextType,
   GenericObjectType,
   getDiscriminatorFieldFromSchema,
@@ -11,21 +11,20 @@ import {
   getUiOptions,
   hashObject,
   ID_KEY,
-  IdSchema,
   lookupFromFormContext,
-  mergeObjects,
   ONE_OF_KEY,
   PROPERTIES_KEY,
   READONLY_KEY,
   RJSFSchema,
   Registry,
-  SchemaUtilsType,
   StrictRJSFSchema,
+  toFieldPathId,
   UI_OPTIONS_KEY,
   UI_GLOBAL_OPTIONS_KEY,
   UiSchema,
+  ITEMS_KEY,
+  useDeepCompareMemo,
 } from '@rjsf/utils';
-import cloneDeep from 'lodash/cloneDeep';
 import each from 'lodash/each';
 import flatten from 'lodash/flatten';
 import get from 'lodash/get';
@@ -39,6 +38,7 @@ import isObject from 'lodash/isObject';
 import isPlainObject from 'lodash/isPlainObject';
 import isString from 'lodash/isString';
 import isUndefined from 'lodash/isUndefined';
+import last from 'lodash/last';
 import set from 'lodash/set';
 
 /** The enumeration of the three different Layout GridTemplate type values
@@ -130,6 +130,603 @@ function getNonNullishValue<T = unknown>(value?: T, fallback?: T): T | undefined
   return value ?? fallback;
 }
 
+/** Detects if a `str` is made up entirely of numeric characters
+ *
+ * @param str - The string to check to see if it is a numeric index
+ * @return - True if the string consists entirely of numeric characters
+ */
+function isNumericIndex(str: string) {
+  return /^\d+?$/.test(str); // Matches positive integers
+}
+
+const LAYOUT_GRID_FIELD_TEST_IDS = getTestIds();
+
+/** Computes the uiSchema for the field with `name` from the `uiProps` and `uiSchema` provided. The field UI Schema
+ * will always contain a copy of the global options from the `uiSchema` (so they can be passed down) as well as
+ * copying them into the local ui options. When the `forceReadonly` flag is true, then the field UI Schema is
+ * updated to make "readonly" be true. When the `schemaReadonly` flag is true AND the field UI Schema does NOT have
+ * the flag already provided, then we also make "readonly" true. We always make sure to return the final value of the
+ * field UI Schema's "readonly" flag as `uiReadonly` along with the `fieldUiSchema` in the return value.
+ *
+ * @param field - The name of the field to pull the existing UI Schema for
+ * @param uiProps - Any props that should be put into the field's uiSchema
+ * @param [uiSchema] - The optional UI Schema from which to get the UI schema for the field
+ * @param [schemaReadonly] - Optional flag indicating whether the schema indicates the field is readonly
+ * @param [forceReadonly] - Optional flag indicating whether the Form itself is in readonly mode
+ */
+export function computeFieldUiSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  field: string,
+  uiProps: ConfigObject,
+  uiSchema?: UiSchema<T, S, F>,
+  schemaReadonly?: boolean,
+  forceReadonly?: boolean,
+) {
+  const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS_KEY], {});
+  const localUiSchema = get(uiSchema, field);
+  const localUiOptions = { ...get(localUiSchema, [UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
+  const fieldUiSchema = { ...localUiSchema };
+  if (!isEmpty(localUiOptions)) {
+    set(fieldUiSchema, [UI_OPTIONS_KEY], localUiOptions);
+  }
+  if (!isEmpty(globalUiOptions)) {
+    // pass the global uiOptions down to the field uiSchema so that they can be applied to all nested fields
+    set(fieldUiSchema, [UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
+  }
+  let { readonly: uiReadonly } = getUiOptions<T, S, F>(fieldUiSchema);
+  if (forceReadonly === true || (isUndefined(uiReadonly) && schemaReadonly === true)) {
+    // If we are forcing all widgets to be readonly, OR the schema indicates it is readonly AND the uiSchema does not
+    // have an overriding value, then update the uiSchema to set readonly to true. Doing this will
+    uiReadonly = true;
+    if (has(localUiOptions, READONLY_KEY)) {
+      // If the local options has the key value provided in it, then set that one to true
+      set(fieldUiSchema, [UI_OPTIONS_KEY, READONLY_KEY], true);
+    } else {
+      // otherwise set the `ui:` version
+      set(fieldUiSchema, `ui:${READONLY_KEY}`, true);
+    }
+  }
+  return { fieldUiSchema, uiReadonly };
+}
+
+/** Given an `operator`, `datum` and `value` determines whether this condition is considered matching. Matching
+ * depends on the `operator`. The `datum` and `value` are converted into arrays if they aren't already and then the
+ * contents of the two arrays are compared using the `operator`. When `operator` is All, then the two arrays must be
+ * equal to match. When `operator` is SOME then the intersection of the two arrays must have at least one value in
+ * common to match. When `operator` is NONE then the intersection of the two arrays must not have any values in common
+ * to match.
+ *
+ * @param [operator] - The optional operator for the condition
+ * @param [datum] - The optional datum for the condition, this can be an item or a list of items of type unknown
+ * @param [value='$0m3tH1nG Un3xP3cT3d'] The optional value for the condition, defaulting to a highly unlikely value
+ *        to avoid comparing two undefined elements when `value` was forgotten in the condition definition.
+ *        This can be an item or a list of items of type unknown
+ * @returns - True if the condition matches, false otherwise
+ */
+export function conditionMatches(
+  operator?: Operators,
+  datum?: unknown,
+  value: unknown = '$0m3tH1nG Un3xP3cT3d',
+): boolean {
+  const data = flatten([datum]).sort();
+  const values = flatten([value]).sort();
+  switch (operator) {
+    case Operators.ALL:
+      return isEqual(data, values);
+    case Operators.SOME:
+      return intersection(data, values).length > 0;
+    case Operators.NONE:
+      return intersection(data, values).length === 0;
+    default:
+      return false;
+  }
+}
+
+/** From within the `layoutGridSchema` finds the `children` and any extra `gridProps` from the object keyed by
+ * `schemaKey`. If the `children` contains extra `gridProps` and those props contain a `className` string, try to
+ * lookup whether that `className` has a replacement value in the `registry` using the `FORM_CONTEXT_LOOKUP_BASE`.
+ * When the `className` value contains multiple classNames separated by a space, the lookup will look for a
+ * replacement value for each `className` and combine them into one.
+ *
+ * @param layoutGridSchema - The GridSchemaType instance from which to obtain the `schemaKey` children and extra props
+ * @param schemaKey - A `GridType` value, used to get the children and extra props from within the `layoutGridSchema`
+ * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+ * @returns - An object containing the list of `LayoutGridSchemaType` `children` and any extra `gridProps`
+ * @throws - A `TypeError` when the `children` is not an array
+ */
+export function findChildrenAndProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  layoutGridSchema: GridSchemaType,
+  schemaKey: GridType,
+  registry: Registry<T, S, F>,
+) {
+  let gridProps: GridProps = {};
+  let children = layoutGridSchema[schemaKey];
+  if (isPlainObject(children)) {
+    const { children: elements, className: toMapClassNames, ...otherProps } = children as ConfigObject;
+    children = elements;
+    if (toMapClassNames) {
+      const classes = toMapClassNames.split(' ');
+      const className = classes.map((ele: string) => lookupFromFormContext<T, S, F>(registry, ele, ele)).join(' ');
+      gridProps = { ...otherProps, className };
+    } else {
+      gridProps = otherProps;
+    }
+  }
+  if (!Array.isArray(children)) {
+    throw new TypeError(`Expected array for "${schemaKey}" in ${JSON.stringify(layoutGridSchema)}`);
+  }
+  return { children: children as LayoutGridSchemaType[], gridProps };
+}
+
+/** Computes the `rawSchema` and `fieldPathId` for a `schema` and a `potentialIndex`. If the `schema` is of type array,
+ * has an `ITEMS_KEY` element and `potentialIndex` represents a numeric value, the element at `ITEMS_KEY` is checked
+ * to see if it is an array. If it is AND the `potentialIndex`th element is available, it is used as the `rawSchema`,
+ * otherwise the last value of the element is used. If it is not, then the element is used as the `rawSchema`. In
+ * either case, an `fieldPathId` is computed for the array index. If the `schema` does not represent an array or the
+ * `potentialIndex` is not a numeric value, then `rawSchema` is returned as undefined and given `fieldPathId` is returned
+ * as is.
+ *
+ * @param schema - The schema to generate the fieldPathId for
+ * @param fieldPathId - The FieldPathId for the schema
+ * @param potentialIndex - A string containing a potential index
+ * @returns - An object containing the `rawSchema` and `fieldPathId` of an array item, otherwise an undefined `rawSchema`
+ */
+export function computeArraySchemasIfPresent<S extends StrictRJSFSchema = RJSFSchema>(
+  schema: S | undefined,
+  fieldPathId: FieldPathId,
+  potentialIndex: string,
+): {
+  rawSchema?: S;
+  fieldPathId: FieldPathId;
+} {
+  let rawSchema: S | undefined;
+  if (isNumericIndex(potentialIndex) && schema && schema?.type === 'array' && has(schema, ITEMS_KEY)) {
+    const index = Number(potentialIndex);
+    const items = schema[ITEMS_KEY];
+    if (Array.isArray(items)) {
+      if (index > items.length) {
+        rawSchema = last(items) as S;
+      } else {
+        rawSchema = items[index] as S;
+      }
+    } else {
+      rawSchema = items as S;
+    }
+    fieldPathId = {
+      [ID_KEY]: fieldPathId[ID_KEY],
+      path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index],
+    };
+  }
+  return { rawSchema, fieldPathId };
+}
+
+/** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
+ * the leaf path is found and returned (along with whether that leaf path `isRequired`) OR no schema exists for an
+ * element in the path. If the leaf schema element happens to be a oneOf/anyOf then also return the oneOf/anyOf as
+ * `options`.
+ *
+ * @param registry - The registry
+ * @param dottedPath - The dotted-path to the field for which to get the schema
+ * @param initialSchema - The initial schema to start the search from
+ * @param formData - The formData, useful for resolving a oneOf/anyOf selection in the path hierarchy
+ * @param initialFieldIdPath - The initial fieldPathId to start the search from
+ * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
+ *            info if a oneOf/anyOf
+ */
+export function getSchemaDetailsForField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(
+  registry: Registry<T, S, F>,
+  dottedPath: string,
+  initialSchema: S,
+  formData: FieldProps<T, S, F>['formData'],
+  initialFieldIdPath: FieldPathId,
+): {
+  schema?: S;
+  isRequired: boolean;
+  isReadonly?: boolean;
+  optionsInfo?: OneOfOptionsInfoType<S>;
+  fieldPathId: FieldPathId;
+} {
+  const { schemaUtils, globalFormOptions } = registry;
+  let rawSchema: S = initialSchema;
+  let fieldPathId = initialFieldIdPath;
+  const parts: string[] = dottedPath.split('.');
+  const leafPath: string | undefined = parts.pop(); // pop off the last element in the list as the leaf
+  let schema: S | undefined = schemaUtils.retrieveSchema(rawSchema, formData); // always returns an object
+  let innerData = formData;
+  let isReadonly: boolean | undefined = schema.readOnly;
+
+  // For all the remaining path parts
+  parts.forEach((part) => {
+    // dive into the properties of the current schema (when it exists) and get the schema for the next part
+    fieldPathId = toFieldPathId(part, globalFormOptions, fieldPathId);
+    if (has(schema, PROPERTIES_KEY)) {
+      rawSchema = get(schema, [PROPERTIES_KEY, part], {}) as S;
+    } else if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
+      const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+      // When the schema represents a oneOf/anyOf, find the selected schema for it and grab the inner part
+      const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
+      rawSchema = get(selectedSchema, [PROPERTIES_KEY, part], {}) as S;
+    } else {
+      const result = computeArraySchemasIfPresent<S>(schema, fieldPathId, part);
+      rawSchema = result.rawSchema ?? ({} as S);
+      fieldPathId = result.fieldPathId;
+    }
+    // Now drill into the innerData for the part, returning an empty object by default if it doesn't exist
+    innerData = get(innerData, part, {}) as T;
+    // Resolve any `$ref`s for the current rawSchema
+    schema = schemaUtils.retrieveSchema(rawSchema, innerData);
+    isReadonly = getNonNullishValue(schema.readOnly, isReadonly);
+  });
+
+  let optionsInfo: OneOfOptionsInfoType<S> | undefined;
+  let isRequired = false;
+  // retrieveSchema will return an empty schema in the worst case scenario, convert it to undefined
+  if (isEmpty(schema)) {
+    schema = undefined;
+  }
+  if (schema && leafPath) {
+    // When we have both a schema and a leafPath...
+    if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
+      const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+      // Grab the selected schema for the oneOf/anyOf value for the leafPath using the innerData
+      schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
+    }
+    fieldPathId = toFieldPathId(leafPath, globalFormOptions, fieldPathId);
+    isRequired = schema !== undefined && Array.isArray(schema.required) && includes(schema.required, leafPath);
+    const result = computeArraySchemasIfPresent<S>(schema, fieldPathId, leafPath);
+    if (result.rawSchema) {
+      schema = result.rawSchema;
+      fieldPathId = result.fieldPathId;
+    } else {
+      // Now grab the schema from the leafPath of the current schema properties
+      schema = get(schema, [PROPERTIES_KEY, leafPath]) as S | undefined;
+      // Resolve any `$ref`s for the current schema
+      schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+    }
+    isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
+    if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
+      const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+      // Set the options if we have a schema with a oneOf/anyOf
+      const discriminator = getDiscriminatorFieldFromSchema(schema);
+      optionsInfo = { options: schema[xxx] as S[], hasDiscriminator: !!discriminator };
+    }
+  }
+
+  return { schema, isRequired, isReadonly, optionsInfo, fieldPathId };
+}
+
+/** Gets the custom render component from the `render`, by either determining that it is either already a function or
+ * it is a non-function value that can be used to look up the function in the registry. If no function can be found,
+ * null is returned.
+ *
+ * @param render - The potential render function or lookup name to one
+ * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+ * @returns - Either a render function if available, or null if not
+ */
+export function getCustomRenderComponent<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(render: string | RenderComponent, registry: Registry<T, S, F>): RenderComponent | null {
+  let customRenderer = render;
+  if (isString(customRenderer)) {
+    customRenderer = lookupFromFormContext<T, S, F>(registry, customRenderer);
+  }
+  if (isFunction(customRenderer)) {
+    return customRenderer;
+  }
+  return null;
+}
+
+/** Extract the `name`, and optional `render` and all other props from the `gridSchema`. We look up the `render` to
+ * see if can be resolved to a UIComponent. If `name` does not exist and there is an optional `render` UIComponent, we
+ * set the `rendered` component with only specified props for that component in the object.
+ *
+ * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+ * @param gridSchema - The string or object that represents the configuration for the grid field
+ * @returns - The UIComponentPropsType computed from the gridSchema
+ */
+export function computeUIComponentPropsFromGridSchema<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(registry: Registry<T, S, F>, gridSchema?: string | ConfigObject): UIComponentPropsType {
+  let name: string;
+  let UIComponent: RenderComponent | null = null;
+  let uiProps: ConfigObject = {};
+  let rendered: ReactNode | undefined;
+  if (isString(gridSchema) || isUndefined(gridSchema)) {
+    name = gridSchema ?? '';
+  } else {
+    const { name: innerName = '', render, ...innerProps } = gridSchema;
+    name = innerName;
+    uiProps = innerProps;
+    if (!isEmpty(uiProps)) {
+      // Transform any `$lookup=` in the uiProps props with the appropriate value
+      each(uiProps, (prop: ConfigObject, key: string) => {
+        if (isString(prop)) {
+          const match: string[] | null = LOOKUP_REGEX.exec(prop);
+          if (Array.isArray(match) && match.length > 1) {
+            const name = match[1];
+            uiProps[key] = lookupFromFormContext(registry, name, name);
+          }
+        }
+      });
+    }
+    UIComponent = getCustomRenderComponent<T, S, F>(render, registry);
+    if (!innerName && UIComponent) {
+      rendered = <UIComponent {...innerProps} data-testid={LAYOUT_GRID_FIELD_TEST_IDS.uiComponent} />;
+    }
+  }
+  return { name, UIComponent, uiProps, rendered };
+}
+
+/**
+ * The props for the LayoutGridFieldChildren component.
+ */
+type LayoutGridFieldChildrenProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = LayoutGridFieldProps<T, S, F> & {
+  /** The list of strings or objects that represents the configurations for the children fields */
+  childrenLayoutGridSchemaId: LayoutGridSchemaType[];
+};
+
+/** Iterates through all the `childrenLayoutGridSchemaId`, rendering a nested `LayoutGridField` for each item in the
+ * list, passing all the props for the current `LayoutGridField` along, updating the `schema` by calling
+ * `retrieveSchema()` on it to resolve any `$ref`s. In addition to the updated `schema`, each item in
+ * `childrenLayoutGridSchemaId` is passed as `layoutGridSchema`.
+ *
+ * @returns - The nested `LayoutGridField`s
+ */
+function LayoutGridFieldChildren<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: LayoutGridFieldChildrenProps<T, S, F>,
+) {
+  const { childrenLayoutGridSchemaId, ...layoutGridFieldProps } = props;
+  const { registry, schema: rawSchema, formData } = layoutGridFieldProps;
+  const { schemaUtils } = registry;
+  const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+  return childrenLayoutGridSchemaId.map((layoutGridSchema) => (
+    <LayoutGridField<T, S, F>
+      {...layoutGridFieldProps}
+      key={`layoutGrid-${hashObject(layoutGridSchema)}`}
+      schema={schema}
+      layoutGridSchema={layoutGridSchema}
+    />
+  ));
+}
+
+/**
+ * Describes the props for LayoutGridCondition, LayoutGridCol, LayoutGridColumns, and LayoutGridRow. This is typically
+ * the original props passed through from the nearest ancestor LayoutGridField, plus the layoutGridSchema for the
+ * current node.
+ */
+type LayoutFieldProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = LayoutGridFieldProps<T, S, F> & {
+  /**  The string or object that represents the configuration for the grid field */
+  layoutGridSchema: GridSchemaType;
+};
+
+/** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
+ * `GridType.CONDITION` is separated into the `children` and other `gridProps`. The `gridProps` are used to extract
+ * the `operator`, `field` and `value` of the condition. If the condition matches, then all of the `children` are
+ * rendered, otherwise null is returned.
+ *
+ * @returns - The rendered the children for the `GridType.CONDITION` or null
+ */
+function LayoutGridCondition<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: LayoutFieldProps<T, S, F>,
+) {
+  const { layoutGridSchema, ...layoutGridFieldProps } = props;
+  const { formData, registry } = layoutGridFieldProps;
+  const { children, gridProps } = findChildrenAndProps<T, S, F>(layoutGridSchema, GridType.CONDITION, registry);
+  const { operator, field = '', value } = gridProps;
+  const fieldData = get(formData, field, null);
+  if (conditionMatches(operator, fieldData, value)) {
+    return <LayoutGridFieldChildren {...layoutGridFieldProps} childrenLayoutGridSchemaId={children} />;
+  }
+  return null;
+}
+
+/** Renders a `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMN` is separated into the
+ * `children` and other `gridProps`. The `gridProps` will be spread onto the outer `GridTemplate`. Inside the
+ * `GridTemplate` all the `children` are rendered.
+ *
+ * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMN`
+ */
+function LayoutGridCol<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: LayoutFieldProps<T, S, F>,
+) {
+  const { layoutGridSchema, ...layoutGridFieldProps } = props;
+  const { registry, uiSchema } = layoutGridFieldProps;
+  const { children, gridProps } = findChildrenAndProps<T, S, F>(layoutGridSchema, GridType.COLUMN, registry);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const GridTemplate = getTemplate<'GridTemplate', T, S, F>('GridTemplate', registry, uiOptions);
+
+  return (
+    <GridTemplate column data-testid={LAYOUT_GRID_FIELD_TEST_IDS.col} {...gridProps}>
+      <LayoutGridFieldChildren {...layoutGridFieldProps} childrenLayoutGridSchemaId={children} />
+    </GridTemplate>
+  );
+}
+
+/** Renders a `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMNS` is separated into the
+ *  `children` and other `gridProps`. The `children` is iterated on and `gridProps` will be spread onto the outer
+ *  `GridTemplate`. Each child will have their own rendered `GridTemplate`.
+ *
+ * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMNS`
+ */
+function LayoutGridColumns<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: LayoutFieldProps<T, S, F>,
+) {
+  const { layoutGridSchema, ...layoutGridFieldProps } = props;
+
+  const { registry, uiSchema } = layoutGridFieldProps;
+  const { children, gridProps } = findChildrenAndProps<T, S, F>(layoutGridSchema, GridType.COLUMNS, registry);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const GridTemplate = getTemplate<'GridTemplate', T, S, F>('GridTemplate', registry, uiOptions);
+
+  return children.map((child) => (
+    <GridTemplate
+      column
+      key={`column-${hashObject(child)}`}
+      data-testid={LAYOUT_GRID_FIELD_TEST_IDS.col}
+      {...gridProps}
+    >
+      <LayoutGridFieldChildren {...layoutGridFieldProps} childrenLayoutGridSchemaId={[child]} />
+    </GridTemplate>
+  ));
+}
+
+/** Renders a `GridTemplate` as a container. The `layoutGridSchema` for the `GridType.ROW` is separated into the
+ * `children` and other `gridProps`. The `gridProps` will be spread onto the outer `GridTemplate`. Inside of the
+ * `GridTemplate` all of the `children` are rendered.
+ *
+ * @returns - The rendered `GridTemplate` containing the children for the `GridType.ROW`
+ */
+function LayoutGridRow<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: LayoutFieldProps<T, S, F>,
+) {
+  const { layoutGridSchema, ...layoutGridFieldProps } = props;
+
+  const { registry, uiSchema } = layoutGridFieldProps;
+  const { children, gridProps } = findChildrenAndProps<T, S, F>(layoutGridSchema, GridType.ROW, registry);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const GridTemplate = getTemplate<'GridTemplate', T, S, F>('GridTemplate', registry, uiOptions);
+
+  return (
+    <GridTemplate {...gridProps} data-testid={LAYOUT_GRID_FIELD_TEST_IDS.row}>
+      <LayoutGridFieldChildren {...layoutGridFieldProps} childrenLayoutGridSchemaId={children} />
+    </GridTemplate>
+  );
+}
+
+/**
+ * The props for the LayoutGridFieldComponent.
+ */
+type LayoutGridFieldComponentProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = LayoutGridFieldProps<T, S, F> & {
+  /** The string or object that represents the configuration for the grid field */
+  gridSchema?: ConfigObject | string;
+};
+
+/** Renders the field described by `gridSchema`. If `gridSchema` is not an object, then is will be assumed
+ * to be the dotted-path to the field in the schema. Otherwise, we extract the `name`, and optional `render` and all
+ * other props. If `name` does not exist and there is an optional `render`, we return the `render` component with only
+ * specified props for that component. If `name` exists, we take the name, the initial & root schemas and the formData
+ * and get the destination schema, is required state and optional oneOf/anyOf options for it. If the destination
+ * schema was located along with oneOf/anyOf options then a `LayoutMultiSchemaField` will be rendered with the
+ * `uiSchema`, `errorSchema`, `fieldPathId` and `formData` drilled down to the dotted-path field, spreading any other
+ * props from `gridSchema` into the `ui:options`. If the destination schema located without any oneOf/anyOf options,
+ * then a `SchemaField` will be rendered with the same props as mentioned in the previous sentence. If no destination
+ * schema was located, but a custom render component was found, then it will be rendered with many of the non-event
+ * handling props. If none of the previous render paths are valid, then a null is returned.
+ *
+ * @returns - One of `LayoutMultiSchemaField`, `SchemaField`, a custom render component or null, depending
+ */
+function LayoutGridFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: LayoutGridFieldComponentProps<T, S, F>,
+) {
+  const {
+    gridSchema,
+    schema: initialSchema,
+    uiSchema,
+    errorSchema,
+    fieldPathId,
+    onBlur,
+    onFocus,
+    formData,
+    readonly,
+    registry,
+    layoutGridSchema, // Used to pull this out of otherProps since we don't want to pass it through
+    ...otherProps
+  } = props;
+  const { onChange } = otherProps;
+  const { fields } = registry;
+  const { SchemaField, LayoutMultiSchemaField } = fields;
+
+  const uiComponentProps = computeUIComponentPropsFromGridSchema(registry, gridSchema);
+  const { name, UIComponent, uiProps } = uiComponentProps;
+  const {
+    schema,
+    isRequired,
+    isReadonly,
+    optionsInfo,
+    fieldPathId: fieldIdSchema,
+  } = getSchemaDetailsForField<T, S, F>(registry, name, initialSchema, formData, fieldPathId);
+  const memoFieldPathId = useDeepCompareMemo<FieldPathId>(fieldIdSchema);
+
+  if (uiComponentProps.rendered) {
+    return uiComponentProps.rendered;
+  }
+
+  if (schema) {
+    const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField : SchemaField;
+    // Call this function to get the appropriate UISchema, which will always have its `readonly` state matching the
+    // `uiReadonly` flag that it returns. This is done since the `SchemaField` will always defer to the `readonly`
+    // state in the uiSchema over anything in the props or schema. Because we are implementing the "readonly" state of
+    // the `Form` via the prop passed to `LayoutGridField` we need to make sure the uiSchema always has a true value
+    // when it is needed
+    const { fieldUiSchema, uiReadonly } = computeFieldUiSchema<T, S, F>(name, uiProps, uiSchema, isReadonly, readonly);
+
+    return (
+      <Field
+        data-testid={
+          optionsInfo?.hasDiscriminator
+            ? LAYOUT_GRID_FIELD_TEST_IDS.layoutMultiSchemaField
+            : LAYOUT_GRID_FIELD_TEST_IDS.field
+        }
+        {...otherProps}
+        name={name}
+        required={isRequired}
+        readonly={uiReadonly}
+        schema={schema}
+        uiSchema={fieldUiSchema}
+        errorSchema={get(errorSchema, name)}
+        fieldPathId={memoFieldPathId}
+        formData={get(formData, name)}
+        onChange={onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        options={optionsInfo?.options}
+        registry={registry}
+      />
+    );
+  }
+
+  if (UIComponent) {
+    return (
+      <UIComponent
+        data-testid={LAYOUT_GRID_FIELD_TEST_IDS.uiComponent}
+        {...otherProps}
+        name={name}
+        required={isRequired}
+        formData={formData}
+        readOnly={!!isReadonly || readonly}
+        errorSchema={errorSchema}
+        uiSchema={uiSchema}
+        schema={initialSchema}
+        fieldPathId={fieldPathId}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        registry={registry}
+        {...uiProps}
+      />
+    );
+  }
+  return null;
+}
+
 /** The `LayoutGridField` will render a schema, uiSchema and formData combination out into a GridTemplate in the shape
  * described in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in
  * the uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):
@@ -353,612 +950,38 @@ function getNonNullishValue<T = unknown>(value?: T, fallback?: T): T | undefined
  * ]
  * ```
  */
-export default class LayoutGridField<
+export default function LayoutGridField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
-> extends PureComponent<LayoutGridFieldProps<T, S, F>> {
-  static defaultProps = {
-    layoutGridSchema: undefined,
-  };
-
-  static TEST_IDS = getTestIds();
-  /** Computes the uiSchema for the field with `name` from the `uiProps` and `uiSchema` provided. The field UI Schema
-   * will always contain a copy of the global options from the `uiSchema` (so they can be passed down) as well as
-   * copying them into the local ui options. When the `forceReadonly` flag is true, then the field UI Schema is
-   * updated to make "readonly" be true. When the `schemaReadonly` flag is true AND the field UI Schema does NOT have
-   * the flag already provided, then we also make "readonly" true. We always make sure to return the final value of the
-   * field UI Schema's "readonly" flag as `uiReadonly` along with the `fieldUiSchema` in the return value.
-   *
-   * @param field - The name of the field to pull the existing UI Schema for
-   * @param uiProps - Any props that should be put into the field's uiSchema
-   * @param [uiSchema] - The optional UI Schema from which to get the UI schema for the field
-   * @param [schemaReadonly] - Optional flag indicating whether the schema indicates the field is readonly
-   * @param [forceReadonly] - Optional flag indicating whether the Form itself is in readonly mode
-   */
-  static computeFieldUiSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-    field: string,
-    uiProps: ConfigObject,
-    uiSchema?: UiSchema<T, S, F>,
-    schemaReadonly?: boolean,
-    forceReadonly?: boolean,
-  ) {
-    const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS_KEY], {});
-    const localUiSchema = get(uiSchema, field);
-    const localUiOptions = { ...get(localUiSchema, [UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
-    const fieldUiSchema = { ...localUiSchema };
-    if (!isEmpty(localUiOptions)) {
-      set(fieldUiSchema, [UI_OPTIONS_KEY], localUiOptions);
-    }
-    if (!isEmpty(globalUiOptions)) {
-      // pass the global uiOptions down to the field uiSchema so that they can be applied to all nested fields
-      set(fieldUiSchema, [UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
-    }
-    let { readonly: uiReadonly } = getUiOptions<T, S, F>(fieldUiSchema);
-    if (forceReadonly === true || (isUndefined(uiReadonly) && schemaReadonly === true)) {
-      // If we are forcing all widgets to be readonly, OR the schema indicates it is readonly AND the uiSchema does not
-      // have an overriding value, then update the uiSchema to set readonly to true. Doing this will
-      uiReadonly = true;
-      if (has(localUiOptions, READONLY_KEY)) {
-        // If the local options has the key value provided in it, then set that one to true
-        set(fieldUiSchema, [UI_OPTIONS_KEY, READONLY_KEY], true);
-      } else {
-        // otherwise set the `ui:` version
-        set(fieldUiSchema, `ui:${READONLY_KEY}`, true);
-      }
-    }
-    return { fieldUiSchema, uiReadonly };
-  }
-
-  /** Given an `operator`, `datum` and `value` determines whether this condition is considered matching. Matching
-   * depends on the `operator`. The `datum` and `value` are converted into arrays if they aren't already and then the
-   * contents of the two arrays are compared using the `operator`. When `operator` is All, then the two arrays must be
-   * equal to match. When `operator` is SOME then the intersection of the two arrays must have at least one value in
-   * common to match. When `operator` is NONE then the intersection of the two arrays must not have any values in common
-   * to match.
-   *
-   * @param [operator] - The optional operator for the condition
-   * @param [datum] - The optional datum for the condition, this can be an item or a list of items of type unknown
-   * @param [value='$0m3tH1nG Un3xP3cT3d'] The optional value for the condition, defaulting to a highly unlikely value
-   *        to avoid comparing two undefined elements when `value` was forgotten in the condition definition.
-   *        This can be an item or a list of items of type unknown
-   * @returns - True if the condition matches, false otherwise
-   */
-  static conditionMatches(operator?: Operators, datum?: unknown, value: unknown = '$0m3tH1nG Un3xP3cT3d'): boolean {
-    const data = flatten([datum]).sort();
-    const values = flatten([value]).sort();
-    switch (operator) {
-      case Operators.ALL:
-        return isEqual(data, values);
-      case Operators.SOME:
-        return intersection(data, values).length > 0;
-      case Operators.NONE:
-        return intersection(data, values).length === 0;
-      default:
-        return false;
-    }
-  }
-
-  /** From within the `layoutGridSchema` finds the `children` and any extra `gridProps` from the object keyed by
-   * `schemaKey`. If the `children` contains extra `gridProps` and those props contain a `className` string, try to
-   * lookup whether that `className` has a replacement value in the `registry` using the `FORM_CONTEXT_LOOKUP_BASE`.
-   * When the `className` value contains multiple classNames separated by a space, the lookup will look for a
-   * replacement value for each `className` and combine them into one.
-   *
-   * @param layoutGridSchema - The GridSchemaType instance from which to obtain the `schemaKey` children and extra props
-   * @param schemaKey - A `GridType` value, used to get the children and extra props from within the `layoutGridSchema`
-   * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
-   * @returns - An object containing the list of `LayoutGridSchemaType` `children` and any extra `gridProps`
-   * @throws - A `TypeError` when the `children` is not an array
-   */
-  static findChildrenAndProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-    layoutGridSchema: GridSchemaType,
-    schemaKey: GridType,
-    registry: Registry<T, S, F>,
-  ) {
-    let gridProps: GridProps = {};
-    let children = layoutGridSchema[schemaKey];
-    if (isPlainObject(children)) {
-      const { children: elements, className: toMapClassNames, ...otherProps } = children as ConfigObject;
-      children = elements;
-      if (toMapClassNames) {
-        const classes = toMapClassNames.split(' ');
-        const className = classes.map((ele: string) => lookupFromFormContext<T, S, F>(registry, ele, ele)).join(' ');
-        gridProps = { ...otherProps, className };
-      } else {
-        gridProps = otherProps;
-      }
-    }
-    if (!Array.isArray(children)) {
-      throw new TypeError(`Expected array for "${schemaKey}" in ${JSON.stringify(layoutGridSchema)}`);
-    }
-    return { children: children as LayoutGridSchemaType[], gridProps };
-  }
-
-  /** Generates an idSchema for the `schema` using `@rjsf`'s `toIdSchema` util, passing the `baseIdSchema`'s `$id` value
-   * as the id prefix.
-   *
-   * @param schemaUtils - The `SchemaUtilsType` used to call `toIdSchema`
-   * @param schema - The schema to generate the idSchema for
-   * @param baseIdSchema - The IdSchema for the base
-   * @param formData - The formData to pass the `toIdSchema`
-   * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
-   * @returns - The generated `idSchema` for the `schema`
-   */
-  static getIdSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-    schemaUtils: SchemaUtilsType<T, S, F>,
-    baseIdSchema: IdSchema<T>,
-    formData: FieldProps['formData'],
-    schema: S = {} as S,
-    idSeparator?: string,
-  ): FieldProps<T, S, F>['idSchema'] {
-    const baseId = get(baseIdSchema, ID_KEY);
-    return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
-  }
-
-  /** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
-   * the leaf path is found and returned (along with whether that leaf path `isRequired`) OR no schema exists for an
-   * element in the path. If the leaf schema element happens to be a oneOf/anyOf then also return the oneOf/anyOf as
-   * `options`.
-   *
-   * @param schemaUtils - The `SchemaUtilsType` used to call `retrieveSchema`
-   * @param dottedPath - The dotted-path to the field for which to get the schema
-   * @param initialSchema - The initial schema to start the search from
-   * @param formData - The formData, useful for resolving a oneOf/anyOf selection in the path hierarchy
-   * @param initialIdSchema - The initial idSchema to start the search from
-   * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
-   * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
-   *            info if a oneOf/anyOf
-   */
-  static getSchemaDetailsForField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-    schemaUtils: SchemaUtilsType<T, S, F>,
-    dottedPath: string,
-    initialSchema: S,
-    formData: FieldProps<T, S, F>['formData'],
-    initialIdSchema: IdSchema<T>,
-    idSeparator?: string,
-  ): {
-    schema?: S;
-    isRequired: boolean;
-    isReadonly?: boolean;
-    optionsInfo?: OneOfOptionsInfoType<S>;
-    idSchema: IdSchema<T>;
-  } {
-    let rawSchema: S = initialSchema;
-    let idSchema = initialIdSchema;
-    const parts: string[] = dottedPath.split('.');
-    const leafPath: string | undefined = parts.pop(); // pop off the last element in the list as the leaf
-    let schema: S | undefined = schemaUtils.retrieveSchema(rawSchema, formData); // always returns an object
-    let innerData = formData;
-    let isReadonly: boolean | undefined = schema.readOnly;
-
-    // For all the remaining path parts
-    parts.forEach((part) => {
-      // dive into the properties of the current schema (when it exists) and get the schema for the next part
-      if (has(schema, PROPERTIES_KEY)) {
-        rawSchema = get(schema, [PROPERTIES_KEY, part], {}) as S;
-        idSchema = get(idSchema, part, {}) as IdSchema<T>;
-      } else if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
-        const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
-        // When the schema represents a oneOf/anyOf, find the selected schema for it and grab the inner part
-        const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
-        const selectedIdSchema = LayoutGridField.getIdSchema<T, S, F>(
-          schemaUtils,
-          idSchema,
-          formData,
-          selectedSchema,
-          idSeparator,
-        );
-        rawSchema = get(selectedSchema, [PROPERTIES_KEY, part], {}) as S;
-        idSchema = get(selectedIdSchema, part, {}) as IdSchema<T>;
-      } else {
-        rawSchema = {} as S;
-      }
-      // Now drill into the innerData for the part, returning an empty object by default if it doesn't exist
-      innerData = get(innerData, part, {}) as T;
-      // Resolve any `$ref`s for the current rawSchema
-      schema = schemaUtils.retrieveSchema(rawSchema, innerData);
-      isReadonly = getNonNullishValue(schema.readOnly, isReadonly);
-    });
-
-    let optionsInfo: OneOfOptionsInfoType<S> | undefined;
-    let isRequired = false;
-    // retrieveSchema will return an empty schema in the worst case scenario, convert it to undefined
-    if (isEmpty(schema)) {
-      schema = undefined;
-    }
-    if (schema && leafPath) {
-      // When we have both a schema and a leafPath...
-      if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
-        const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
-        // Grab the selected schema for the oneOf/anyOf value for the leafPath using the innerData
-        schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
-        // Generate the idSchema for the oneOf/anyOf value then merge with the existing `idSchema`
-        const rawIdSchema = LayoutGridField.getIdSchema<T, S, F>(schemaUtils, idSchema, formData, schema, idSeparator);
-        idSchema = mergeObjects(rawIdSchema, idSchema) as IdSchema<T>;
-      }
-      isRequired = schema !== undefined && Array.isArray(schema.required) && includes(schema.required, leafPath);
-      // Now grab the schema from the leafPath of the current schema properties
-      schema = get(schema, [PROPERTIES_KEY, leafPath]) as S | undefined;
-      // Resolve any `$ref`s for the current schema
-      schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
-      idSchema = get(idSchema, leafPath, {}) as IdSchema<T>;
-      isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
-      if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
-        const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
-        // Set the options if we have a schema with a oneOf/anyOf
-        const discriminator = getDiscriminatorFieldFromSchema(schema);
-        optionsInfo = { options: schema[xxx] as S[], hasDiscriminator: !!discriminator };
-      }
-    }
-
-    return { schema, isRequired, isReadonly, optionsInfo, idSchema };
-  }
-
-  /** Gets the custom render component from the `render`, by either determining that it is either already a function or
-   * it is a non-function value that can be used to look up the function in the registry. If no function can be found,
-   * null is returned.
-   *
-   * @param render - The potential render function or lookup name to one
-   * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
-   * @returns - Either a render function if available, or null if not
-   */
-  static getCustomRenderComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-    render: string | RenderComponent,
-    registry: Registry<T, S, F>,
-  ): RenderComponent | null {
-    let customRenderer = render;
-    if (isString(customRenderer)) {
-      customRenderer = lookupFromFormContext<T, S, F>(registry, customRenderer);
-    }
-    if (isFunction(customRenderer)) {
-      return customRenderer;
-    }
-    return null;
-  }
-
-  /** Extract the `name`, and optional `render` and all other props from the `gridSchema`. We look up the `render` to
-   * see if can be resolved to a UIComponent. If `name` does not exist and there is an optional `render` UIComponent, we
-   * set the `rendered` component with only specified props for that component in the object.
-   *
-   * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
-   * @param gridSchema - The string or object that represents the configuration for the grid field
-   * @returns - The UIComponentPropsType computed from the gridSchema
-   */
-  static computeUIComponentPropsFromGridSchema<
-    T = any,
-    S extends StrictRJSFSchema = RJSFSchema,
-    F extends FormContextType = any,
-  >(registry: Registry<T, S, F>, gridSchema?: string | ConfigObject): UIComponentPropsType {
-    let name: string;
-    let UIComponent: RenderComponent | null = null;
-    let uiProps: ConfigObject = {};
-    let rendered: ReactNode | undefined;
-    if (isString(gridSchema) || isUndefined(gridSchema)) {
-      name = gridSchema ?? '';
-    } else {
-      const { name: innerName = '', render, ...innerProps } = gridSchema;
-      name = innerName;
-      uiProps = innerProps;
-      if (!isEmpty(uiProps)) {
-        // Transform any `$lookup=` in the uiProps props with the appropriate value
-        each(uiProps, (prop: ConfigObject, key: string) => {
-          if (isString(prop)) {
-            const match: string[] | null = LOOKUP_REGEX.exec(prop);
-            if (Array.isArray(match) && match.length > 1) {
-              const name = match[1];
-              uiProps[key] = lookupFromFormContext(registry, name, name);
-            }
-          }
-        });
-      }
-      UIComponent = LayoutGridField.getCustomRenderComponent<T, S, F>(render, registry);
-      if (!innerName && UIComponent) {
-        rendered = <UIComponent {...innerProps} data-testid={LayoutGridField.TEST_IDS.uiComponent} />;
-      }
-    }
-    return { name, UIComponent, uiProps, rendered };
-  }
-
-  /** Constructs an `LayoutGridField` with the given `props`
-   *
-   * @param props - The `LayoutGridField` for this template
-   */
-  constructor(props: LayoutGridFieldProps<T, S, F>) {
-    super(props);
-  }
-
-  /** Generates an `onChange` handler for the field associated with the `dottedPath`. This handler will clone and update
-   * the `formData` with the new `value` and the `errorSchema` if an `errSchema` is provided. After updating those two
-   * elements, they will then be passed on to the `onChange` handler of the `LayoutFieldGrid`.
-   *
-   * @param dottedPath - The dotted-path to the field for which to generate the onChange handler
-   * @returns - The `onChange` handling function for the `dottedPath` field
-   */
-  onFieldChange = (dottedPath: string) => {
-    return (value: unknown, errSchema?: ErrorSchema<T>, id?: string) => {
-      const { onChange, errorSchema, formData } = this.props;
-      const newFormData = cloneDeep(formData || ({} as T));
-      let newErrorSchema = errorSchema;
-      if (errSchema && errorSchema) {
-        newErrorSchema = cloneDeep(errorSchema);
-        set(newErrorSchema, dottedPath, errSchema);
-      }
-      set(newFormData as object, dottedPath, value);
-      onChange(newFormData, newErrorSchema, id);
-    };
-  };
-
-  /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
-   * `GridType.CONDITION` is separated into the `children` and other `gridProps`. The `gridProps` are used to extract
-   * the `operator`, `field` and `value` of the condition. If the condition matches, then all of the `children` are
-   * rendered, otherwise null is returned.
-   *
-   * @param layoutGridSchema - The string or object that represents the configuration for the grid field
-   * @returns - The rendered the children for the `GridType.CONDITION` or null
-   */
-  renderCondition(layoutGridSchema: GridSchemaType) {
-    const { formData, registry } = this.props;
-    const { children, gridProps } = LayoutGridField.findChildrenAndProps<T, S, F>(
-      layoutGridSchema,
-      GridType.CONDITION,
-      registry,
-    );
-    const { operator, field = '', value } = gridProps;
-    const fieldData = get(formData, field, null);
-    if (LayoutGridField.conditionMatches(operator, fieldData, value)) {
-      return this.renderChildren(children);
-    }
-    return null;
-  }
-
-  /** Renders a material-ui `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMN` is separated
-   * into the `children` and other `gridProps`. The `gridProps` will be spread onto the outer `GridTemplate`. Inside
-   * the `GridTemplate` all the `children` are rendered.
-   *
-   * @param layoutGridSchema - The string or object that represents the configuration for the grid field
-   * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMN`
-   */
-  renderCol(layoutGridSchema: GridSchemaType) {
-    const { registry, uiSchema } = this.props;
-    const { children, gridProps } = LayoutGridField.findChildrenAndProps<T, S, F>(
-      layoutGridSchema,
-      GridType.COLUMN,
-      registry,
-    );
-    const uiOptions = getUiOptions<T, S, F>(uiSchema);
-    const GridTemplate = getTemplate<'GridTemplate', T, S, F>('GridTemplate', registry, uiOptions);
-
-    return (
-      <GridTemplate column data-testid={LayoutGridField.TEST_IDS.col} {...gridProps}>
-        {this.renderChildren(children)}
-      </GridTemplate>
-    );
-  }
-
-  /** Renders a material-ui `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMNS` is separated
-   * into the `children` and other `gridProps`. The `children` is iterated on and `gridProps` will be spread onto the
-   * outer `GridTemplate`. Each child will have their own rendered `GridTemplate`.
-   *
-   * @param layoutGridSchema - The string or object that represents the configuration for the grid field
-   * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMNS`
-   */
-  renderColumns(layoutGridSchema: GridSchemaType) {
-    const { registry, uiSchema } = this.props;
-    const { children, gridProps } = LayoutGridField.findChildrenAndProps<T, S, F>(
-      layoutGridSchema,
-      GridType.COLUMNS,
-      registry,
-    );
-    const uiOptions = getUiOptions<T, S, F>(uiSchema);
-    const GridTemplate = getTemplate<'GridTemplate', T, S, F>('GridTemplate', registry, uiOptions);
-
-    return children.map((child) => (
-      <GridTemplate
-        column
-        key={`column-${hashObject(child)}`}
-        data-testid={LayoutGridField.TEST_IDS.col}
-        {...gridProps}
-      >
-        {this.renderChildren([child])}
-      </GridTemplate>
-    ));
-  }
-
-  /** Renders a material-ui `GridTemplate` as a container. The
-   * `layoutGridSchema` for the `GridType.ROW` is separated into the `children` and other `gridProps`. The `gridProps`
-   * will be spread onto the outer `GridTemplate`. Inside of the `GridTemplate` all of the `children` are rendered.
-   *
-   * @param layoutGridSchema - The string or object that represents the configuration for the grid field
-   * @returns - The rendered `GridTemplate` containing the children for the `GridType.ROW`
-   */
-  renderRow(layoutGridSchema: GridSchemaType) {
-    const { registry, uiSchema } = this.props;
-    const { children, gridProps } = LayoutGridField.findChildrenAndProps<T, S, F>(
-      layoutGridSchema,
-      GridType.ROW,
-      registry,
-    );
-    const uiOptions = getUiOptions<T, S, F>(uiSchema);
-    const GridTemplate = getTemplate<'GridTemplate', T, S, F>('GridTemplate', registry, uiOptions);
-
-    return (
-      <GridTemplate {...gridProps} data-testid={LayoutGridField.TEST_IDS.row}>
-        {this.renderChildren(children)}
-      </GridTemplate>
-    );
-  }
-
-  /** Iterates through all the `childrenLayoutGridSchema`, rendering a nested `LayoutGridField` for each item in the
-   * list, passing all the props for the current `LayoutGridField` along, updating the `schema` by calling
-   * `retrieveSchema()` on it to resolve any `$ref`s. In addition to the updated `schema`, each item in
-   * `childrenLayoutGridSchema` is passed as `layoutGridSchema`.
-   *
-   * @param childrenLayoutGridSchema - The list of strings or objects that represents the configurations for the
-   *          children fields
-   * @returns - The nested `LayoutGridField`s
+>(props: LayoutGridFieldProps<T, S, F>) {
+  /** Render the `LayoutGridField`. If there isn't a `layoutGridSchema` prop defined, then try pulling it out of the
+   * `uiSchema` via `ui:LayoutGridField`. If `layoutGridSchema` is an object, then check to see if any of the properties
+   * match one of the `GridType`s. If so, call the appropriate render function for the type. Otherwise, just call the
+   * generic `renderField()` function with the `layoutGridSchema`.
    */
-  renderChildren(childrenLayoutGridSchema: LayoutGridSchemaType[]) {
-    const { registry, schema: rawSchema, formData } = this.props;
-    const { schemaUtils } = registry;
-    const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-
-    return childrenLayoutGridSchema.map((layoutGridSchema) => (
-      <LayoutGridField<T, S, F>
-        {...this.props}
-        key={`layoutGrid-${hashObject(layoutGridSchema)}`}
-        schema={schema}
-        layoutGridSchema={layoutGridSchema}
-      />
-    ));
+  const { uiSchema } = props;
+  let { layoutGridSchema } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  if (!layoutGridSchema && LAYOUT_GRID_UI_OPTION in uiOptions && isObject(uiOptions[LAYOUT_GRID_UI_OPTION])) {
+    layoutGridSchema = uiOptions[LAYOUT_GRID_UI_OPTION];
   }
 
-  /** Renders the field described by `gridSchema`. If `gridSchema` is not an object, then is will be assumed
-   * to be the dotted-path to the field in the schema. Otherwise, we extract the `name`, and optional `render` and all
-   * other props. If `name` does not exist and there is an optional `render`, we return the `render` component with only
-   * specified props for that component. If `name` exists, we take the name, the initial & root schemas and the formData
-   * and get the destination schema, is required state and optional oneOf/anyOf options for it. If the destination
-   * schema was located along with oneOf/anyOf options then a `LayoutMultiSchemaField` will be rendered with the
-   * `uiSchema`, `errorSchema`, `idSchema` and `formData` drilled down to the dotted-path field, spreading any other
-   * props from `gridSchema` into the `ui:options`. If the destination schema located without any oneOf/anyOf options,
-   * then a `SchemaField` will be rendered with the same props as mentioned in the previous sentence. If no destination
-   * schema was located, but a custom render component was found, then it will be rendered with many of the non-event
-   * handling props. If none of the previous render paths are valid, then a null is returned.
-   *
-   * @param gridSchema - The string or object that represents the configuration for the grid field
-   * @returns - One of `LayoutMultiSchemaField`, `SchemaField`, a custom render component or null, depending
-   */
-  renderField(gridSchema?: ConfigObject | string) {
-    const {
-      schema: initialSchema,
-      uiSchema,
-      errorSchema,
-      idSchema,
-      onBlur,
-      onFocus,
-      formData,
-      readonly,
-      registry,
-      idSeparator,
-      layoutGridSchema, // Used to pull this out of otherProps since we don't want to pass it through
-      ...otherProps
-    } = this.props;
-    const { fields, schemaUtils } = registry;
-    const { SchemaField, LayoutMultiSchemaField } = fields;
-    const uiComponentProps = LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
-    if (uiComponentProps.rendered) {
-      return uiComponentProps.rendered;
+  if (isObject(layoutGridSchema)) {
+    if (GridType.ROW in layoutGridSchema) {
+      return <LayoutGridRow {...props} layoutGridSchema={layoutGridSchema} />;
     }
-    const { name, UIComponent, uiProps } = uiComponentProps;
-    const {
-      schema,
-      isRequired,
-      isReadonly,
-      optionsInfo,
-      idSchema: fieldIdSchema,
-    } = LayoutGridField.getSchemaDetailsForField<T, S, F>(
-      schemaUtils,
-      name,
-      initialSchema,
-      formData,
-      idSchema,
-      idSeparator,
-    );
-
-    if (schema) {
-      const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField : SchemaField;
-      // Call this function to get the appropriate UISchema, which will always have its `readonly` state matching the
-      // `uiReadonly` flag that it returns. This is done since the `SchemaField` will always defer to the `readonly`
-      // state in the uiSchema over anything in the props or schema. Because we are implementing the "readonly" state of
-      // the `Form` via the prop passed to `LayoutGridField` we need to make sure the uiSchema always has a true value
-      // when it is needed
-      const { fieldUiSchema, uiReadonly } = LayoutGridField.computeFieldUiSchema<T, S, F>(
-        name,
-        uiProps,
-        uiSchema,
-        isReadonly,
-        readonly,
-      );
-
-      return (
-        <Field
-          data-testid={
-            optionsInfo?.hasDiscriminator
-              ? LayoutGridField.TEST_IDS.layoutMultiSchemaField
-              : LayoutGridField.TEST_IDS.field
-          }
-          {...otherProps}
-          name={name}
-          required={isRequired}
-          readonly={uiReadonly}
-          schema={schema}
-          uiSchema={fieldUiSchema}
-          errorSchema={get(errorSchema, name)}
-          idSchema={fieldIdSchema}
-          idSeparator={idSeparator}
-          formData={get(formData, name)}
-          onChange={this.onFieldChange(name)}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          options={optionsInfo?.options}
-          registry={registry}
-        />
-      );
+    if (GridType.COLUMN in layoutGridSchema) {
+      return <LayoutGridCol {...props} layoutGridSchema={layoutGridSchema} />;
     }
-
-    if (UIComponent) {
-      return (
-        <UIComponent
-          data-testid={LayoutGridField.TEST_IDS.uiComponent}
-          {...otherProps}
-          name={name}
-          required={isRequired}
-          formData={formData}
-          readOnly={!!isReadonly || readonly}
-          errorSchema={errorSchema}
-          uiSchema={uiSchema}
-          schema={initialSchema}
-          idSchema={idSchema}
-          idSeparator={idSeparator}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          registry={registry}
-          {...uiProps}
-        />
-      );
-    }
-    return null;
-  }
-
-  /** Renders the `LayoutGridField`. If there isn't a `layoutGridSchema` prop defined, then try pulling it out of the
-   * `uiSchema` via `ui:LayoutGridField`. If `layoutGridSchema` is an object, then check to see if any of the properties
-   * match one of the `GridType`s. If so, call the appropriate render function for the type. Otherwise, just call the
-   * generic `renderField()` function with the `layoutGridSchema`.
-   *
-   * @returns - the rendered `LayoutGridField`
-   */
-  render() {
-    const { uiSchema } = this.props;
-    let { layoutGridSchema } = this.props;
-    const uiOptions = getUiOptions<T, S, F>(uiSchema);
-    if (!layoutGridSchema && LAYOUT_GRID_UI_OPTION in uiOptions && isObject(uiOptions[LAYOUT_GRID_UI_OPTION])) {
-      layoutGridSchema = uiOptions[LAYOUT_GRID_UI_OPTION];
+    if (GridType.COLUMNS in layoutGridSchema) {
+      return <LayoutGridColumns {...props} layoutGridSchema={layoutGridSchema} />;
     }
-
-    if (isObject(layoutGridSchema)) {
-      if (GridType.ROW in layoutGridSchema) {
-        return this.renderRow(layoutGridSchema as GridSchemaType);
-      }
-      if (GridType.COLUMN in layoutGridSchema) {
-        return this.renderCol(layoutGridSchema as GridSchemaType);
-      }
-      if (GridType.COLUMNS in layoutGridSchema) {
-        return this.renderColumns(layoutGridSchema as GridSchemaType);
-      }
-      if (GridType.CONDITION in layoutGridSchema) {
-        return this.renderCondition(layoutGridSchema as GridSchemaType);
-      }
+    if (GridType.CONDITION in layoutGridSchema) {
+      return <LayoutGridCondition {...props} layoutGridSchema={layoutGridSchema} />;
     }
-    return this.renderField(layoutGridSchema);
   }
+  return <LayoutGridFieldComponent {...props} gridSchema={layoutGridSchema} />;
 }
+
+LayoutGridField.TEST_IDS = LAYOUT_GRID_FIELD_TEST_IDS;