@rjsf/react-bootstrap 6.0.0-beta.21 → 6.0.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/react-bootstrap",
-  "version": "6.0.0-beta.21",
+  "version": "6.0.0-beta.22",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -61,8 +61,8 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.0.0-beta.21",
-    "@rjsf/utils": "^6.0.0-beta.21",
+    "@rjsf/core": "^6.0.0-beta.22",
+    "@rjsf/utils": "^6.0.0-beta.22",
     "react": ">=18",
     "react-bootstrap": "^2.x"
   },
@@ -71,10 +71,10 @@
     "node": ">=20"
   },
   "devDependencies": {
-    "@rjsf/core": "^6.0.0-beta.21",
-    "@rjsf/snapshot-tests": "^6.0.0-beta.21",
-    "@rjsf/utils": "^6.0.0-beta.21",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.21",
+    "@rjsf/core": "^6.0.0-beta.22",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.22",
+    "@rjsf/utils": "^6.0.0-beta.22",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.22",
     "eslint": "^8.57.1",
     "react-bootstrap": "^2.10.10"
   },

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import {
-  ArrayFieldItemTemplateType,
+  ArrayFieldItemTemplateProps,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -14,7 +14,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: ArrayFieldItemTemplateType<T, S, F>) {
+>(props: ArrayFieldItemTemplateProps<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -2,7 +2,6 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import {
-  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
   buttonId,
   FormContextType,
@@ -37,11 +36,6 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions,
   );
-  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
-    'ArrayFieldItemTemplate',
-    registry,
-    uiOptions,
-  );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
@@ -74,9 +68,7 @@ export default function ArrayFieldTemplate<
           />
           <Container fluid key={`array-item-list-${fieldPathId.$id}`} className='p-0 m-0'>
             {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
-            {items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
-              <ArrayFieldItemTemplate key={key} {...itemProps} />
-            ))}
+            {items}
             {canAdd && (
               <Container className=''>
                 <Row className='mt-2'>

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -16,6 +16,7 @@ export default function BaseInputTemplate<
   F extends FormContextType = any,
 >({
   id,
+  htmlName,
   placeholder,
   required,
   readonly,
@@ -47,7 +48,7 @@ export default function BaseInputTemplate<
     <>
       <Form.Control
         id={id}
-        name={id}
+        name={htmlName || id}
         placeholder={placeholder}
         autoFocus={autofocus}
         required={required}

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -19,6 +19,7 @@ export default function CheckboxWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -61,7 +62,7 @@ export default function CheckboxWidget<
       )}
       <Form.Check
         id={id}
-        name={id}
+        name={htmlName || id}
         label={labelValue(label, hideLabel || !label)}
         checked={typeof value === 'undefined' ? false : value}
         required={required}

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -17,7 +17,19 @@ export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus }: WidgetProps<T, S, F>) {
+>({
+  id,
+  htmlName,
+  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];
 
@@ -52,7 +64,7 @@ export default function CheckboxesWidget<
               className='bg-transparent border-0'
               type={'checkbox'}
               id={optionId(id, index)}
-              name={id}
+              name={htmlName || id}
               label={option.label}
               autoFocus={autofocus && index === 0}
               onChange={_onChange(index)}

package/src/FieldTemplate/FieldTemplate.tsx

@@ -26,8 +26,9 @@ export default function FieldTemplate<
   disabled,
   label,
   hidden,
-  onDropPropertyClick,
-  onKeyChange,
+  onKeyRename,
+  onKeyRenameBlur,
+  onRemoveProperty,
   readonly,
   required,
   schema,
@@ -50,8 +51,9 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
-      onDropPropertyClick={onDropPropertyClick}
-      onKeyChange={onKeyChange}
+      onKeyRename={onKeyRename}
+      onKeyRenameBlur={onKeyRenameBlur}
+      onRemoveProperty={onRemoveProperty}
       readonly={readonly}
       required={required}
       schema={schema}

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -29,7 +29,7 @@ export default function ObjectFieldTemplate<
   schema,
   formData,
   optionalDataControl,
-  onAddClick,
+  onAddProperty,
   disabled,
   readonly,
   registry,
@@ -80,7 +80,7 @@ export default function ObjectFieldTemplate<
             <Col xs={{ offset: 9, span: 3 }} className='py-4'>
               <AddButton
                 id={buttonId(fieldPathId, 'add')}
-                onClick={onAddClick(schema)}
+                onClick={onAddProperty}
                 disabled={disabled || readonly}
                 className='rjsf-object-property-expand'
                 uiSchema={uiSchema}

package/src/RadioWidget/RadioWidget.tsx

@@ -13,6 +13,7 @@ import {
 
 export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -46,7 +47,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               label={option.label}
               id={optionId(id, index)}
               key={index}
-              name={id}
+              name={htmlName || id}
               type='radio'
               disabled={disabled || itemDisabled || readonly}
               checked={checked}

package/src/SelectWidget/SelectWidget.tsx

@@ -17,6 +17,7 @@ export default function SelectWidget<
 >({
   schema,
   id,
+  htmlName,
   options,
   required,
   disabled,
@@ -50,7 +51,7 @@ export default function SelectWidget<
   return (
     <FormSelect
       id={id}
-      name={id}
+      name={htmlName || id}
       value={typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes}
       required={required}
       multiple={multiple}

package/src/TextareaWidget/TextareaWidget.tsx

@@ -17,6 +17,7 @@ export default function TextareaWidget<
   F extends FormContextType = any,
 >({
   id,
+  htmlName,
   placeholder,
   value,
   required,
@@ -37,7 +38,7 @@ export default function TextareaWidget<
     <InputGroup>
       <FormControl
         id={id}
-        name={id}
+        name={htmlName || id}
         as='textarea'
         placeholder={placeholder}
         disabled={disabled}

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,4 +1,3 @@
-import { FocusEvent } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   buttonId,
@@ -24,8 +23,8 @@ export default function WrapIfAdditionalTemplate<
   disabled,
   id,
   label,
-  onDropPropertyClick,
-  onKeyChange,
+  onRemoveProperty,
+  onKeyRenameBlur,
   readonly,
   required,
   schema,
@@ -46,7 +45,6 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
   const keyId = `${id}-key`;
 
   return (
@@ -60,7 +58,7 @@ export default function WrapIfAdditionalTemplate<
             disabled={disabled || readonly}
             id={keyId}
             name={keyId}
-            onBlur={!readonly ? handleBlur : undefined}
+            onBlur={!readonly ? onKeyRenameBlur : undefined}
             type='text'
           />
         </Form.Group>
@@ -71,7 +69,7 @@ export default function WrapIfAdditionalTemplate<
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove w-100'
           disabled={disabled || readonly}
-          onClick={onDropPropertyClick(label)}
+          onClick={onRemoveProperty}
           uiSchema={uiSchema}
           registry={registry}
         />