@rjsf/react-bootstrap 6.0.0-alpha.0 → 6.0.0-beta.2

package/package.json

@@ -1,10 +1,38 @@
 {
   "name": "@rjsf/react-bootstrap",
-  "version": "6.0.0-alpha.0",
+  "version": "6.0.0-beta.2",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "type": "module",
   "description": "React Bootstrap theme, fields and widgets for react-jsonschema-form, powered by react-bootstrap",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./lib": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./lib/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./dist/*.js",
+      "import": "./lib/*.js"
+    },
+    "./dist": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./dist/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./dist/*.js",
+      "import": "./lib/*.js"
+    }
+  },
   "files": [
     "dist",
     "lib",
@@ -15,7 +43,7 @@
     "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
   },
   "scripts": {
-    "build:ts": "tsc -b",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/react-bootstrap.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/react-bootstrap.esm.js --format=umd --file=dist/react-bootstrap.umd.js --name=@rjsf/react-bootstrap",
@@ -33,42 +61,22 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^5.20.x",
-    "@rjsf/utils": "^5.20.x",
-    "react": "^16.14.0 || >=17",
-    "react-bootstrap": "^2.0.0"
+    "@rjsf/core": "^6.0.0-beta.x",
+    "@rjsf/utils": "^6.0.0-beta.x",
+    "react": ">=18",
+    "react-bootstrap": "^2.x"
   },
   "engineStrict": false,
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@rjsf/core": "^6.0.0-alpha.0",
-    "@rjsf/snapshot-tests": "^6.0.0-alpha.0",
-    "@rjsf/utils": "^6.0.0-alpha.0",
-    "@rjsf/validator-ajv8": "^6.0.0-alpha.0",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.58",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-test-renderer": "^18.0.7",
-    "babel-jest": "^29.7.0",
-    "esbuild": "^0.18.20",
+    "@rjsf/core": "^6.0.0-beta.2",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.2",
+    "@rjsf/utils": "^6.0.0-beta.2",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.2",
     "eslint": "^8.56.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.2.0",
-    "react-bootstrap": "^2.10.2",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
-    "typescript": "^4.9.5"
+    "react-bootstrap": "^2.10.9"
   },
   "publishConfig": {
     "access": "public"
@@ -93,6 +101,5 @@
   "license": "MIT",
   "dependencies": {
     "@react-icons/all-files": "^4.1.0"
-  },
-  "gitHead": "f4229bf6e067d31b24de3ef9d3ca754ee52529ac"
+  }
 }

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,30 +1,27 @@
 import { CSSProperties } from 'react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  ArrayFieldItemTemplateType,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
-  const {
-    children,
-    disabled,
-    hasToolbar,
-    hasCopy,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
+  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+    'ArrayFieldItemButtonsTemplate',
     registry,
-    uiSchema,
-  } = props;
-  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+    uiOptions,
+  );
   const btnStyle: CSSProperties = {
     flex: 1,
     paddingLeft: 6,
@@ -40,51 +37,7 @@ export default function ArrayFieldItemTemplate<
         <Col xs='3' lg='3' className='py-4'>
           {hasToolbar && (
             <div className='d-flex flex-row'>
-              {(hasMoveUp || hasMoveDown) && (
-                <div className='m-0 p-0'>
-                  <MoveUpButton
-                    className='array-item-move-up'
-                    style={btnStyle}
-                    disabled={disabled || readonly || !hasMoveUp}
-                    onClick={onReorderClick(index, index - 1)}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </div>
-              )}
-              {(hasMoveUp || hasMoveDown) && (
-                <div className='m-0 p-0'>
-                  <MoveDownButton
-                    style={btnStyle}
-                    disabled={disabled || readonly || !hasMoveDown}
-                    onClick={onReorderClick(index, index + 1)}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </div>
-              )}
-              {hasCopy && (
-                <div className='m-0 p-0'>
-                  <CopyButton
-                    style={btnStyle}
-                    disabled={disabled || readonly}
-                    onClick={onCopyIndexClick(index)}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </div>
-              )}
-              {hasRemove && (
-                <div className='m-0 p-0'>
-                  <RemoveButton
-                    style={btnStyle}
-                    disabled={disabled || readonly}
-                    onClick={onDropIndexClick(index)}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </div>
-              )}
+              <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
             </div>
           )}
         </Col>

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -2,8 +2,9 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
+  buttonId,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -14,7 +15,7 @@ import {
 export default function ArrayFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: ArrayFieldTemplateProps<T, S, F>) {
   const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
     props;
@@ -22,17 +23,17 @@ export default function ArrayFieldTemplate<
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
     'ArrayFieldDescriptionTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
     'ArrayFieldItemTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   // Button templates are not overridden in the uiSchema
   const {
@@ -59,7 +60,7 @@ export default function ArrayFieldTemplate<
           />
           <Container fluid key={`array-item-list-${idSchema.$id}`} className='p-0 m-0'>
             {items &&
-              items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+              items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
                 <ArrayFieldItemTemplate key={key} {...itemProps} />
               ))}
             {canAdd && (
@@ -68,7 +69,8 @@ export default function ArrayFieldTemplate<
                   <Col xs={9}></Col>
                   <Col xs={3} className='py-4 col-lg-3 col-3'>
                     <AddButton
-                      className='array-item-add'
+                      id={buttonId<T>(idSchema, 'add')}
+                      className='rjsf-array-item-add'
                       onClick={onAddClick}
                       disabled={disabled || readonly}
                       uiSchema={uiSchema}

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -13,7 +13,7 @@ import {
 export default function BaseInputTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   id,
   placeholder,

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -15,7 +15,7 @@ import Form from 'react-bootstrap/Form';
 export default function CheckboxWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
@@ -40,7 +40,7 @@ export default function CheckboxWidget<
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    options
+    options,
   );
 
   const _onChange = ({ target: { checked } }: FocusEvent<HTMLInputElement>) => onChange(checked);
@@ -49,11 +49,8 @@ export default function CheckboxWidget<
 
   const description = options.description || schema.description;
   return (
-    <Form.Group
-      className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}
-      aria-describedby={ariaDescribedByIds<T>(id)}
-    >
-      {!hideLabel && !!description && (
+    <Form.Group className={disabled || readonly ? 'disabled' : ''} aria-describedby={ariaDescribedByIds<T>(id)}>
+      {!hideLabel && description && (
         <DescriptionFieldTemplate
           id={descriptionId<T>(id)}
           description={description}

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -16,7 +16,7 @@ import {
 export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({ id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const checkboxesValues = Array.isArray(value) ? value : [value];

package/src/DescriptionField/DescriptionField.tsx

@@ -1,19 +1,24 @@
 import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { RichDescription } from '@rjsf/core';
 
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
 export default function DescriptionField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
->({ id, description }: DescriptionFieldProps<T, S, F>) {
-  if (description) {
-    return (
-      <div>
-        <div id={id} className='mb-3'>
-          {description}
-        </div>
-      </div>
-    );
+  F extends FormContextType = any,
+>({ id, description, registry, uiSchema }: DescriptionFieldProps<T, S, F>) {
+  if (!description) {
+    return null;
   }
 
-  return null;
+  return (
+    <div>
+      <div id={id} className='mb-3'>
+        <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+      </div>
+    </div>
+  );
 }

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -8,7 +8,7 @@ import ListGroup from 'react-bootstrap/ListGroup';
 export default function FieldErrorTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: FieldErrorProps<T, S, F>) {
   const { errors = [], idSchema } = props;
   if (errors.length === 0) {

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -8,7 +8,7 @@ import Form from 'react-bootstrap/Form';
 export default function FieldHelpTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
   const { idSchema, help, hasErrors } = props;
   if (!help) {

package/src/FieldTemplate/FieldTemplate.tsx

@@ -11,7 +11,7 @@ import Form from 'react-bootstrap/Form';
 export default function FieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   id,
   children,
@@ -38,7 +38,7 @@ export default function FieldTemplate<
   const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
     'WrapIfAdditionalTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   if (hidden) {
     return <div className='hidden'>{children}</div>;

package/src/Form/Form.tsx

@@ -7,7 +7,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 export function generateForm<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): ComponentType<FormProps<T, S, F>> {
   return withTheme<T, S, F>(generateTheme<T, S, F>());
 }

package/src/GridTemplate/GridTemplate.tsx

@@ -0,0 +1,16 @@
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { GridTemplateProps } from '@rjsf/utils';
+
+/** Renders a `GridTemplate` for react-bootstrap, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Row`/`Col`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the react-bootstrap grid positioning details
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+  const { children, column, ...rest } = props;
+  if (column) {
+    return <Col {...rest}>{children}</Col>;
+  }
+  return <Row {...rest}>{children}</Row>;
+}

package/src/GridTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './GridTemplate';
+export * from './GridTemplate';

package/src/IconButton/IconButton.tsx

@@ -6,7 +6,7 @@ import { AiOutlineArrowUp } from '@react-icons/all-files/ai/AiOutlineArrowUp';
 import { AiOutlineArrowDown } from '@react-icons/all-files/ai/AiOutlineArrowDown';
 
 export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F> & ButtonProps
+  props: IconButtonProps<T, S, F> & ButtonProps,
 ) {
   const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
   return (
@@ -17,7 +17,7 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
 }
 
 export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -26,7 +26,7 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 }
 
 export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -37,7 +37,7 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
 }
 
 export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -46,7 +46,7 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
 }
 
 export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -3,6 +3,7 @@ import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 
 import {
+  buttonId,
   canExpand,
   descriptionId,
   FormContextType,
@@ -17,7 +18,7 @@ import {
 export default function ObjectFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   description,
   title,
@@ -37,7 +38,7 @@ export default function ObjectFieldTemplate<
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   // Button templates are not overridden in the uiSchema
   const {
@@ -74,9 +75,10 @@ export default function ObjectFieldTemplate<
           <Row>
             <Col xs={{ offset: 9, span: 3 }} className='py-4'>
               <AddButton
+                id={buttonId<T>(idSchema, 'add')}
                 onClick={onAddClick(schema)}
                 disabled={disabled || readonly}
-                className='object-property-expand'
+                className='rjsf-object-property-expand'
                 uiSchema={uiSchema}
                 registry={registry}
               />

package/src/RangeWidget/RangeWidget.tsx

@@ -3,7 +3,7 @@ import { ChangeEvent, FocusEvent } from 'react';
 import FormRange from 'react-bootstrap/FormRange';
 
 export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { id, value, disabled, onChange, onBlur, onFocus, schema } = props;
 

package/src/SelectWidget/SelectWidget.tsx

@@ -13,7 +13,7 @@ import {
 export default function SelectWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   schema,
   id,

package/src/SubmitButton/SubmitButton.tsx

@@ -2,7 +2,7 @@ import Button from 'react-bootstrap/Button';
 import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
 
 export default function SubmitButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: SubmitButtonProps<T, S, F>
+  props: SubmitButtonProps<T, S, F>,
 ) {
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions<T, S, F>(props.uiSchema);
   if (norender) {

package/src/Templates/Templates.ts

@@ -8,6 +8,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB
 import FieldErrorTemplate from '../FieldErrorTemplate';
 import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
+import GridTemplate from '../GridTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
@@ -17,7 +18,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@r
 export function generateTemplates<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): Partial<TemplatesType<T, S, F>> {
   return {
     ArrayFieldItemTemplate,
@@ -36,6 +37,7 @@ export function generateTemplates<
     FieldErrorTemplate,
     FieldHelpTemplate,
     FieldTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

package/src/TextareaWidget/TextareaWidget.tsx

@@ -14,7 +14,7 @@ type CustomWidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
 export default function TextareaWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   id,
   placeholder,

package/src/Theme/Theme.tsx

@@ -7,7 +7,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 export function generateTheme<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): ThemeProps<T, S, F> {
   return {
     templates: generateTemplates<T, S, F>(),

package/src/Widgets/Widgets.ts

@@ -9,7 +9,7 @@ import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } fr
 export function generateWidgets<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): RegistryWidgetsType<T, S, F> {
   return {
     CheckboxWidget,

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,6 +1,7 @@
 import { FocusEvent } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
+  buttonId,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -15,7 +16,7 @@ import Form from 'react-bootstrap/Form';
 export default function WrapIfAdditionalTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   classNames,
   style,
@@ -67,7 +68,8 @@ export default function WrapIfAdditionalTemplate<
       <Col xs={5}>{children}</Col>
       <Col xs={2} className='py-4 d-grid gap-2'>
         <RemoveButton
-          className='w-100'
+          id={buttonId<T>(id, 'remove')}
+          className='rjsf-object-property-remove w-100'
           disabled={disabled || readonly}
           onClick={onDropPropertyClick(label)}
           uiSchema={uiSchema}