[MISC] Retrieved change from older PR

Author: LFRW2K\lecmil2

CHANGELOG.md

@@ -15,6 +15,15 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 5.23.0
+
+## @rjsf/utils
+
+- Updated `getTemplate()` to allow per-field customization using string key from `Registry`.
+
+## Dev / docs / playground
+
+- Updated `advanced-customization/custom-templates` with the new feature.
 
 # 5.22.0
 

packages/docs/docs/advanced-customization/custom-templates.md

@@ -76,7 +76,7 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property with your Component or a string value from the `Registry`.
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
@@ -163,7 +163,7 @@ render(
 );
 ```
 
-You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property.
+You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component or a string value from the `Registry`.
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
@@ -261,7 +261,7 @@ render(
 );
 ```
 
-You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property.
+You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component or a string value from the `Registry`.
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
@@ -615,7 +615,7 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property with your Component or a string value from the `Registry`.
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
@@ -693,7 +693,7 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property with your Component or a string value from the `Registry`.
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';

packages/utils/src/getTemplate.ts

@@ -18,6 +18,17 @@ export default function getTemplate<
   if (name === 'ButtonTemplates') {
     return templates[name];
   }
+  // Allow templates to be customized per-field by using string keys from the registry
+  if (
+    Object.hasOwn(uiOptions, name) &&
+    typeof uiOptions[name] === 'string' &&
+    Object.hasOwn(templates, uiOptions[name] as string)
+  ) {
+    const key = uiOptions[name];
+    // Evaluating templates[key] results in TS2590: Expression produces a union type that is too complex to represent
+    // To avoid that, we cast templates to `any` before accessing the key field
+    return (templates as any)[key];
+  }
   return (
     // Evaluating uiOptions[name] results in TS2590: Expression produces a union type that is too complex to represent
     // To avoid that, we cast uiOptions to `any` before accessing the name field

packages/utils/test/getTemplate.test.ts

@@ -86,4 +86,19 @@ describe('getTemplate', () => {
       expect(getTemplate<typeof name>(name, registry, uiOptions)).toBe(CustomTemplate);
     });
   });
+  it('returns the template from registry using uiOptions key when available', () => {
+    KEYS.forEach((key) => {
+      const name = key as keyof TemplatesType;
+      expect(
+        getTemplate<typeof name>(
+          name,
+          registry,
+          Object.keys(uiOptions).reduce((uiOptions, key) => {
+            uiOptions[key] = key;
+            return uiOptions;
+          }, {})
+        )
+      ).toBe(FakeTemplate);
+    });
+  });
 });