@rjsf/core 6.2.5 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.2.5",
+  "version": "6.3.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",
@@ -70,17 +70,17 @@
     "react": ">=18"
   },
   "dependencies": {
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
+    "lodash": "^4.17.23",
+    "lodash-es": "^4.17.23",
     "markdown-to-jsx": "^8.0.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rjsf/snapshot-tests": "^6.2.0",
-    "@rjsf/utils": "^6.2.0",
-    "@rjsf/validator-ajv8": "^6.2.0",
+    "@rjsf/snapshot-tests": "^6.2.5",
+    "@rjsf/utils": "^6.2.5",
+    "@rjsf/validator-ajv8": "^6.2.5",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react-portal": "^4.0.7",
     "ajv": "^8.17.1",

package/src/components/Form.tsx

@@ -6,6 +6,7 @@ import {
   ErrorSchema,
   ErrorSchemaBuilder,
   ErrorTransformer,
+  expandUiSchemaDefinitions,
   FieldPathId,
   FieldPathList,
   FormContextType,
@@ -28,6 +29,7 @@ import {
   toErrorList,
   toFieldPathId,
   UiSchema,
+  UI_DEFINITIONS_KEY,
   UI_GLOBAL_OPTIONS_KEY,
   UI_OPTIONS_KEY,
   ValidationData,
@@ -311,11 +313,14 @@ export interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 /** The event data passed when changes have been made to the form, includes everything from the `FormState` except
  * the schema validation errors. An additional `status` is added when returned from `onSubmit`
  */
-export interface IChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>
-  extends Pick<
-    FormState<T, S, F>,
-    'schema' | 'uiSchema' | 'fieldPathId' | 'schemaUtils' | 'formData' | 'edit' | 'errors' | 'errorSchema'
-  > {
+export interface IChangeEvent<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> extends Pick<
+  FormState<T, S, F>,
+  'schema' | 'uiSchema' | 'fieldPathId' | 'schemaUtils' | 'formData' | 'edit' | 'errors' | 'errorSchema'
+> {
   /** The status of the form when submitted */
   status?: 'submitted';
 }
@@ -620,6 +625,12 @@ export default class Form<
     // Only store a new registry when the props cause a different one to be created
     const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
     const registry = deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
+
+    // Pre-expand ui:definitions into the uiSchema structure (must happen after registry is created)
+    const expandedUiSchema: UiSchema<T, S, F> = registry.uiSchemaDefinitions
+      ? expandUiSchemaDefinitions<T, S, F>(rootSchema, uiSchema, registry)
+      : uiSchema;
+
     // Only compute a new `fieldPathId` when the `idPrefix` is different than the existing fieldPathId's ID_KEY
     const fieldPathId =
       state.fieldPathId && state.fieldPathId?.[ID_KEY] === registry.globalFormOptions.idPrefix
@@ -628,7 +639,7 @@ export default class Form<
     const nextState: FormState<T, S, F> = {
       schemaUtils,
       schema: rootSchema,
-      uiSchema,
+      uiSchema: expandedUiSchema,
       fieldPathId,
       formData,
       edit,
@@ -1149,6 +1160,7 @@ export default class Form<
       translateString: customTranslateString || translateString,
       globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY],
       globalFormOptions: this.getGlobalFormOptions(props),
+      uiSchemaDefinitions: uiSchema[UI_DEFINITIONS_KEY] ?? {},
     };
   }
 

package/src/components/SchemaExamples.tsx

@@ -0,0 +1,36 @@
+import { examplesId, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export interface SchemaExamplesProps<S extends StrictRJSFSchema = RJSFSchema> {
+  /** The id of the input element this datalist is for */
+  id: string;
+  /** The JSON schema object containing examples and default value */
+  schema: S;
+}
+
+/** Renders a `<datalist>` element containing options from schema examples and default value.
+ * Normalizes types to prevent duplicate keys when examples and default have different types.
+ * For example, if examples are strings ["5432"] and default is number 5432, the default
+ * will not be added as a duplicate option.
+ *
+ * @param props - The `SchemaExamplesProps` for this component
+ */
+export default function SchemaExamples<S extends StrictRJSFSchema = RJSFSchema>(props: SchemaExamplesProps<S>) {
+  const { id, schema } = props;
+  const { examples, default: schemaDefault } = schema;
+  if (!Array.isArray(examples)) {
+    return null;
+  }
+  return (
+    <datalist key={`datalist_${id}`} id={examplesId(id)}>
+      {(examples as string[])
+        .concat(
+          schemaDefault !== undefined && !examples.map(String).includes(String(schemaDefault))
+            ? ([schemaDefault] as string[])
+            : [],
+        )
+        .map((example: any) => {
+          return <option key={String(example)} value={example} />;
+        })}
+    </datalist>
+  );
+}

package/src/components/fields/ArrayField.tsx

@@ -166,8 +166,11 @@ function getNewFormDataRow<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 }
 
 /** Props used for ArrayAsXxxx type components*/
-interface ArrayAsFieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>
-  extends FieldProps<T, S, F> {
+interface ArrayAsFieldProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> extends FieldProps<T, S, F> {
   /** The callback used to update the array when the selector changes */
   onSelectChange: (value: T) => void;
 }
@@ -522,8 +525,11 @@ function ArrayFieldItem<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
 }
 
 /** The properties required by the stateless components that render the items using the `ArrayFieldItem` */
-interface InternalArrayFieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>
-  extends FieldProps<T[], S, F> {
+interface InternalArrayFieldProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> extends FieldProps<T[], S, F> {
   /** The keyedFormData from the `ArrayField` state */
   keyedFormData: KeyedFormDataType<T>[];
   /** The callback used to handle the adding of an item at the given index (or the end, if missing) */

package/src/components/fields/LayoutGridField.tsx

@@ -83,8 +83,11 @@ export type GridSchemaType = {
  */
 export type LayoutGridSchemaType = GridSchemaType | ConfigObject | string;
 
-export interface LayoutGridFieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>
-  extends FieldProps<T, S, F> {
+export interface LayoutGridFieldProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> extends FieldProps<T, S, F> {
   /** Optional string or object used to describe the current level of the `LayoutGridField`
    */
   layoutGridSchema?: LayoutGridSchemaType;

package/src/components/fields/ObjectField.tsx

@@ -69,8 +69,11 @@ function getDefaultValue<T = any, S extends StrictRJSFSchema = RJSFSchema, F ext
 }
 
 /** Props for the `ObjectFieldProperty` component */
-interface ObjectFieldPropertyProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>
-  extends Omit<FieldProps<T, S, F>, 'name'> {
+interface ObjectFieldPropertyProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> extends Omit<FieldProps<T, S, F>, 'name'> {
   /** The name of the property within the parent object */
   propertyName: string;
   /** Flag indicating whether this property was added by the additionalProperties UI */

package/src/components/fields/SchemaField.tsx

@@ -17,6 +17,7 @@ import {
   isFormDataAvailable,
   ONE_OF_KEY,
   Registry,
+  resolveUiSchema,
   RJSFSchema,
   shouldRender,
   shouldRenderOptionalField,
@@ -93,7 +94,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const {
     schema: _schema,
     fieldPathId,
-    uiSchema,
+    uiSchema: _uiSchema,
     formData,
     errorSchema,
     name,
@@ -107,6 +108,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   } = props;
   const { schemaUtils, globalFormOptions, globalUiOptions, fields } = registry;
   const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields;
+  const uiSchema = resolveUiSchema<T, S, F>(_schema, _uiSchema, registry);
   const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions);
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(

package/src/components/templates/BaseInputTemplate.tsx

@@ -9,6 +9,8 @@ import {
   StrictRJSFSchema,
 } from '@rjsf/utils';
 
+import SchemaExamples from '../SchemaExamples';
+
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
  * It can be customized/overridden for other themes or individual implementations as needed.
@@ -103,15 +105,7 @@ export default function BaseInputTemplate<
       {options.allowClearTextInputs && !readonly && !disabled && inputValue && (
         <ClearButton registry={registry} onClick={_onClear} />
       )}
-      {Array.isArray(schema.examples) && (
-        <datalist key={`datalist_${id}`} id={examplesId(id)}>
-          {(schema.examples as string[])
-            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
-            .map((example: any) => {
-              return <option key={example} value={example} />;
-            })}
-        </datalist>
-      )}
+      <SchemaExamples id={id} schema={schema} />
     </>
   );
 }

package/src/index.ts

@@ -1,11 +1,20 @@
 import Form, { FormProps, FormState, IChangeEvent } from './components/Form';
 import RichDescription, { RichDescriptionProps } from './components/RichDescription';
 import RichHelp, { RichHelpProps } from './components/RichHelp';
+import SchemaExamples, { SchemaExamplesProps } from './components/SchemaExamples';
 import withTheme, { ThemeProps } from './withTheme';
 import getDefaultRegistry from './getDefaultRegistry';
 import getTestRegistry from './getTestRegistry';
 
-export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps, RichHelpProps };
+export type {
+  FormProps,
+  FormState,
+  IChangeEvent,
+  ThemeProps,
+  RichDescriptionProps,
+  RichHelpProps,
+  SchemaExamplesProps,
+};
 
-export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription, RichHelp };
+export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription, RichHelp, SchemaExamples };
 export default Form;