@rjsf/primereact 6.0.0-beta.21 → 6.0.0-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/primereact",
-  "version": "6.0.0-beta.21",
+  "version": "6.0.0-beta.23",
   "description": "PrimeReact theme, fields and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
@@ -61,17 +61,17 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.0.0-beta.21",
-    "@rjsf/utils": "^6.0.0-beta.21",
+    "@rjsf/core": "^6.0.0-beta.23",
+    "@rjsf/utils": "^6.0.0-beta.23",
     "primeicons": ">=6.0.0",
     "primereact": ">=8.0.0",
     "react": ">=18"
   },
   "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.23",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.23",
+    "@rjsf/utils": "^6.0.0-beta.23",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.23",
     "@rollup/plugin-replace": "^6.0.2",
     "eslint": "^8.57.1",
     "primeflex": "^4.0.0",

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,5 +1,5 @@
 import {
-  ArrayFieldItemTemplateType,
+  ArrayFieldItemTemplateProps,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -9,13 +9,13 @@ import {
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldItemTemplateProps` props for the component
  */
 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

@@ -3,11 +3,9 @@ import {
   getUiOptions,
   isFixedItems,
   ArrayFieldTemplateProps,
-  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
-  UI_OPTIONS_KEY,
   buttonId,
 } from '@rjsf/utils';
 import { Fieldset } from 'primereact/fieldset';
@@ -15,7 +13,7 @@ import AddButton from '../AddButton';
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldTemplateProps` props for the component
  */
 export default function ArrayFieldTemplate<
   T = any,
@@ -45,11 +43,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,
@@ -83,15 +76,7 @@ export default function ArrayFieldTemplate<
         <div key={`array-item-list-${fieldPathId.$id}`}>
           <div>
             {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
-            {items.map(({ key, uiSchema: itemUiSchema = {}, ...props }: ArrayFieldItemTemplateType<T, S, F>) => {
-              const mergedUiSchema = {
-                ...itemUiSchema,
-                [UI_OPTIONS_KEY]: {
-                  ...itemUiSchema[UI_OPTIONS_KEY],
-                },
-              };
-              return <ArrayFieldItemTemplate key={key} {...props} uiSchema={mergedUiSchema} />;
-            })}
+            {items}
           </div>
           {canAdd && (
             <div

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -19,6 +19,7 @@ export default function BaseInputTemplate<
 >(props: BaseInputTemplateProps<T, S, F>) {
   const {
     id,
+    htmlName,
     placeholder,
     value,
     required,
@@ -52,7 +53,7 @@ export default function BaseInputTemplate<
   return (
     <InputText
       id={id}
-      name={id}
+      name={htmlName || id}
       placeholder={placeholder}
       {...primeProps}
       {...inputProps}

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -25,6 +25,7 @@ export default function CheckboxWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -68,7 +69,7 @@ export default function CheckboxWidget<
       <div style={{ display: 'flex', flexDirection: 'row', gap: '0.5rem', alignItems: 'center' }}>
         <Checkbox
           inputId={id}
-          name={id}
+          name={htmlName || id}
           {...primeProps}
           disabled={disabled || readonly}
           autoFocus={autofocus}

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -27,6 +27,7 @@ export default function CheckboxesWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -85,7 +86,7 @@ export default function CheckboxesWidget<
             <div key={index} style={{ display: 'flex', flexDirection: 'row', gap: '0.5rem', alignItems: 'center' }}>
               <Checkbox
                 inputId={optionId(id, index)}
-                name={id}
+                name={htmlName || id}
                 {...primeProps}
                 value={option.value}
                 checked={checked}

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -25,7 +25,7 @@ export default function ObjectFieldTemplate<
   const {
     description,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     title,
     properties,
     disabled,
@@ -81,7 +81,7 @@ export default function ObjectFieldTemplate<
             id={buttonId(fieldPathId, 'add')}
             className='rjsf-object-property-expand'
             icon='pi pi-plus'
-            onClick={onAddClick(schema)}
+            onClick={onAddProperty}
             disabled={disabled || readonly}
             registry={registry}
           />

package/src/RadioWidget/RadioWidget.tsx

@@ -18,7 +18,7 @@ import { RadioButton, RadioButtonChangeEvent } from 'primereact/radiobutton';
 export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>,
 ) {
-  const { id, value, disabled, readonly, onChange, onBlur, onFocus, options } = props;
+  const { id, htmlName, value, disabled, readonly, onChange, onBlur, onFocus, options } = props;
   const primeProps = (options.prime || {}) as object;
   const { enumOptions, enumDisabled, emptyValue } = options;
 
@@ -39,7 +39,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
             <div key={index} style={{ display: 'flex', alignItems: 'center' }}>
               <RadioButton
                 inputId={optionId(id, index)}
-                name={id}
+                name={htmlName || id}
                 {...primeProps}
                 onFocus={_onFocus}
                 onBlur={_onBlur}

package/src/SelectWidget/SelectWidget.tsx

@@ -27,6 +27,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
 function SingleSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   schema,
   id,
+  htmlName,
   name, // remove this from dropdownProps
   options,
   label,
@@ -46,7 +47,6 @@ function SingleSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   registry,
   uiSchema,
   hideError,
-  formContext,
   ...dropdownProps
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
@@ -68,7 +68,7 @@ function SingleSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   return (
     <Dropdown
       id={id}
-      name={id}
+      name={htmlName || id}
       {...primeProps}
       value={!isEmpty && typeof selectedIndexes !== 'undefined' ? selectedIndexes : emptyValue}
       options={(enumOptions ?? []).map(({ value, label }, i: number) => ({
@@ -90,6 +90,7 @@ function SingleSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F
 
 function MultiSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
+  htmlName,
   options,
   disabled,
   placeholder,
@@ -117,7 +118,7 @@ function MultiSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   return (
     <MultiSelect
       id={id}
-      name={id}
+      name={htmlName || id}
       {...primeProps}
       value={!isEmpty && typeof selectedIndexes !== 'undefined' ? selectedIndexes : emptyValue}
       options={(enumOptions ?? []).map(({ value, label }, i: number) => ({

package/src/TextareaWidget/TextareaWidget.tsx

@@ -11,7 +11,7 @@ export default function TextareaWidget<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
-  const { id, value, required, disabled, readonly, autofocus, onChange, onBlur, onFocus, options } = props;
+  const { id, htmlName, value, required, disabled, readonly, autofocus, onChange, onBlur, onFocus, options } = props;
   const primeProps = (options.prime || {}) as object;
 
   let rows = 5;
@@ -27,6 +27,7 @@ export default function TextareaWidget<
   return (
     <InputTextarea
       id={id}
+      name={htmlName || id}
       {...primeProps}
       value={value || ''}
       required={required}

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,4 +1,3 @@
-import { FocusEvent } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   buttonId,
@@ -26,8 +25,8 @@ export default function WrapIfAdditionalTemplate<
   disabled,
   id,
   label,
-  onDropPropertyClick,
-  onKeyChange,
+  onRemoveProperty,
+  onKeyRenameBlur,
   readonly,
   required,
   schema,
@@ -46,8 +45,6 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
-
   return (
     <div
       className={classNames}
@@ -63,7 +60,7 @@ export default function WrapIfAdditionalTemplate<
           name={`${id}-key`}
           defaultValue={label}
           disabled={disabled || readonly}
-          onBlur={!readonly ? handleBlur : undefined}
+          onBlur={!readonly ? onKeyRenameBlur : undefined}
           required={required}
           style={{ width: '100%' }}
         />
@@ -74,7 +71,7 @@ export default function WrapIfAdditionalTemplate<
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'
           disabled={disabled || readonly}
-          onClick={onDropPropertyClick(label)}
+          onClick={onRemoveProperty}
           registry={registry}
         />
       </div>