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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/primereact",
-  "version": "6.0.0-beta.19",
+  "version": "6.0.0-beta.21",
   "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.19",
-    "@rjsf/utils": "^6.0.0-beta.19",
+    "@rjsf/core": "^6.0.0-beta.21",
+    "@rjsf/utils": "^6.0.0-beta.21",
     "primeicons": ">=6.0.0",
     "primereact": ">=8.0.0",
     "react": ">=18"
   },
   "devDependencies": {
-    "@rjsf/core": "^6.0.0-beta.19",
-    "@rjsf/snapshot-tests": "^6.0.0-beta.19",
-    "@rjsf/utils": "^6.0.0-beta.19",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.19",
+    "@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",
     "@rollup/plugin-replace": "^6.0.2",
     "eslint": "^8.57.1",
     "primeflex": "^4.0.0",

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -24,11 +24,12 @@ export default function ArrayFieldTemplate<
 >(props: ArrayFieldTemplateProps<T, S, F>) {
   const {
     uiSchema,
-    idSchema,
+    fieldPathId,
     canAdd,
     className,
     disabled,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     schema,
@@ -54,41 +55,43 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
 
   return (
     <>
       <ArrayFieldTitleTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         title={uiOptions.title || title}
         schema={schema}
         uiSchema={uiSchema}
         required={required}
         registry={registry}
+        optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
       />
       <Fieldset
         {...rest}
-        id={idSchema.$id}
+        id={fieldPathId.$id}
         className={`${className}${isFixedItems<S>(schema) ? '' : ' sortable-form-fields'}`}
       >
         <ArrayFieldDescriptionTemplate
-          idSchema={idSchema}
+          fieldPathId={fieldPathId}
           description={uiOptions.description || schema.description}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
         />
-        <div key={`array-item-list-${idSchema.$id}`}>
+        <div key={`array-item-list-${fieldPathId.$id}`}>
           <div>
-            {items &&
-              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} />;
-              })}
+            {!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} />;
+            })}
           </div>
           {canAdd && (
             <div
@@ -99,7 +102,7 @@ export default function ArrayFieldTemplate<
               }}
             >
               <AddButton
-                id={buttonId<T>(idSchema, 'add')}
+                id={buttonId(fieldPathId, 'add')}
                 className='rjsf-array-item-add'
                 onClick={onAddClick}
                 disabled={disabled || readonly}

package/src/ArrayFieldTitleTemplate/ArrayFieldTitleTemplate.tsx

@@ -15,11 +15,20 @@ export default function ArrayFieldTitleTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ title, uiSchema, required, idSchema }: ArrayFieldTitleProps<T, S, F>) {
+>({ title, uiSchema, required, fieldPathId, optionalDataControl }: ArrayFieldTitleProps<T, S, F>) {
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
-  return (
-    <h5 id={titleId(idSchema)} style={{ margin: 0, fontSize: '1.5rem', marginBottom: '0.2rem' }}>
+  let heading = (
+    <h5 id={titleId(fieldPathId)} style={{ margin: 0, fontSize: '1.5rem', marginBottom: '0.2rem' }}>
       {uiOptions.title || title} {required ? '*' : ''}
     </h5>
   );
+  if (optionalDataControl) {
+    heading = (
+      <div style={{ display: 'flex' }}>
+        <div style={{ flexGrow: 1 }}>{heading}</div>
+        <div>{optionalDataControl}</div>
+      </div>
+    );
+  }
+  return heading;
 }

package/src/AutoCompleteWidget/AutoCompleteWidget.tsx

@@ -74,7 +74,7 @@ export default function AutoCompleteWidget<
       onChange={(onChangeOverride as any) || _onChange}
       onBlur={_onBlur}
       onFocus={_onFocus}
-      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       /* Make autocomplete look like a dropdown, which looks much nicer */
       pt={{
         root: {

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -59,13 +59,13 @@ export default function BaseInputTemplate<
       required={required}
       autoFocus={autofocus}
       disabled={disabled || readonly}
-      list={schema.examples ? examplesId<T>(id) : undefined}
+      list={schema.examples ? examplesId(id) : undefined}
       value={value || value === 0 ? value : ''}
       invalid={rawErrors.length > 0}
       onChange={onChangeOverride || _onChange}
       onBlur={_onBlur}
       onFocus={_onFocus}
-      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
     />
   );
 }

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -58,7 +58,7 @@ export default function CheckboxWidget<
     <>
       {!hideLabel && !!description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(id)}
+          id={descriptionId(id)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -77,7 +77,7 @@ export default function CheckboxWidget<
           onBlur={_onBlur}
           onFocus={_onFocus}
           required={required}
-          aria-describedby={ariaDescribedByIds<T>(id)}
+          aria-describedby={ariaDescribedByIds(id)}
         />
         {labelValue(<Label id={id} text={label} />, hideLabel, false)}
       </div>

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -70,7 +70,7 @@ export default function CheckboxesWidget<
     >
       {!hideLabel && !!description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(id)}
+          id={descriptionId(id)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -94,7 +94,7 @@ export default function CheckboxesWidget<
                 onChange={_onChange(index)}
                 onBlur={_onBlur}
                 onFocus={_onFocus}
-                aria-describedby={ariaDescribedByIds<T>(id)}
+                aria-describedby={ariaDescribedByIds(id)}
               />
               <Label id={optionId(id, index)} text={option.label} />
             </div>

package/src/ColorWidget/ColorWidget.tsx

@@ -56,7 +56,7 @@ export default function ColorWidget<T = any, S extends StrictRJSFSchema = RJSFSc
       onChange={onChangeOverride || _onChange}
       onBlur={_onBlur}
       onFocus={_onFocus}
-      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
     />
   );
 }

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -9,9 +9,9 @@ export default function FieldErrorTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ errors, idSchema }: FieldErrorProps<T, S, F>) {
+>({ errors, fieldPathId }: FieldErrorProps<T, S, F>) {
   if (errors && errors.length > 0) {
-    const id = errorId<T>(idSchema);
+    const id = errorId(fieldPathId);
     const content = errors.map((error, i: number) => {
       return <div key={i}>{error}</div>;
     });

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -9,9 +9,9 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (help) {
-    const id = helpId<T>(idSchema);
+    const id = helpId(fieldPathId);
     return <small id={id}>{help}</small>;
   }
   return null;

package/src/IconButton/IconButton.tsx

@@ -1,17 +1,21 @@
-import { Button } from 'primereact/button';
+import { Button, ButtonProps } from 'primereact/button';
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 
-function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+export type PrimeIconButtonProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = IconButtonProps<T, S, F> & Omit<ButtonProps, 'onClick'>;
+
+export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: PrimeIconButtonProps<T, S, F>,
 ) {
   const { icon, iconType, uiSchema, registry, ...otherProps } = props;
   return <Button icon={`pi pi-${icon}`} rounded text severity='secondary' {...otherProps} />;
 }
 
-export default IconButton;
-
 export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: PrimeIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -20,7 +24,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: PrimeIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -29,7 +33,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: PrimeIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -38,7 +42,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: PrimeIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -24,6 +24,7 @@ export default function ObjectFieldTemplate<
 >(props: ObjectFieldTemplateProps<T, S, F>) {
   const {
     description,
+    optionalDataControl,
     onAddClick,
     title,
     properties,
@@ -33,7 +34,7 @@ export default function ObjectFieldTemplate<
     uiSchema,
     schema,
     formData,
-    idSchema,
+    fieldPathId,
     registry,
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -43,6 +44,7 @@ export default function ObjectFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -51,18 +53,19 @@ export default function ObjectFieldTemplate<
     <>
       {title && (
         <TitleFieldTemplate
-          id={titleId<T>(idSchema)}
+          id={titleId(fieldPathId)}
           title={title}
           required={required}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
+          optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
         />
       )}
       {description && (
         <div style={{ marginBottom: '1rem' }}>
           <DescriptionFieldTemplate
-            id={descriptionId<T>(idSchema)}
+            id={descriptionId(fieldPathId)}
             description={description}
             schema={schema}
             uiSchema={uiSchema}
@@ -70,11 +73,12 @@ export default function ObjectFieldTemplate<
           />
         </div>
       )}
+      {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
       {properties.map((prop) => prop.content)}
       {canExpand<T, S, F>(schema, uiSchema, formData) && (
         <div style={{ marginTop: '1rem', textAlign: 'right' }}>
           <AddButton
-            id={buttonId<T>(idSchema, 'add')}
+            id={buttonId(fieldPathId, 'add')}
             className='rjsf-object-property-expand'
             icon='pi pi-plus'
             onClick={onAddClick(schema)}

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -0,0 +1,44 @@
+import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import IconButton, { RemoveButton } from '../IconButton';
+
+/** The OptionalDataControlsTemplate renders one of three different states. If
+ * there is an `onAddClick()` function, it renders the "Add" button. If there is
+ * an `onRemoveClick()` function, it renders the "Remove" button. Otherwise it
+ * renders the "No data found" section. All of them use the `label` as either
+ * the `title` of buttons or simply outputting it.
+ *
+ * @param props - The `OptionalDataControlsTemplateProps` for the template
+ */
+export default function OptionalDataControlsTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: OptionalDataControlsTemplateProps<T, S, F>) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return (
+      <IconButton
+        id={id}
+        registry={registry}
+        className='rjsf-add-optional-data'
+        onClick={onAddClick}
+        title={label}
+        icon='pi pi-plus'
+        style={{ height: '1.5rem', width: '1.5rem' }} // Shrink the button
+      />
+    );
+  } else if (onRemoveClick) {
+    return (
+      <RemoveButton
+        id={id}
+        registry={registry}
+        className='rjsf-remove-optional-data'
+        onClick={onRemoveClick}
+        title={label}
+        style={{ height: '1.5rem', width: '1.5rem' }} // Shrink the button
+      />
+    );
+  }
+  return <em id={id}>{label}</em>;
+}

package/src/OptionalDataControlsTemplate/index.ts

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

package/src/PasswordWidget/PasswordWidget.tsx

@@ -58,7 +58,7 @@ export default function PasswordWidget<
       onChange={onChangeOverride || _onChange}
       onBlur={_onBlur}
       onFocus={_onFocus}
-      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       pt={{ root: { style: { display: 'flex', flexDirection: 'column' } } }}
     />
   );

package/src/RadioWidget/RadioWidget.tsx

@@ -47,7 +47,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
                 value={String(index)}
                 checked={checked}
                 disabled={disabled || itemDisabled || readonly}
-                aria-describedby={ariaDescribedByIds<T>(id)}
+                aria-describedby={ariaDescribedByIds(id)}
               />
               <label htmlFor={optionId(id, index)} style={{ marginLeft: '8px' }}>
                 {option.label}

package/src/RangeWidget/RangeWidget.tsx

@@ -30,7 +30,7 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         onBlur={_onBlur}
         onFocus={_onFocus}
         {...sliderProps}
-        aria-describedby={ariaDescribedByIds<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       />
     </>
   );

package/src/SelectWidget/SelectWidget.tsx

@@ -82,7 +82,7 @@ function SingleSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F
       placeholder={placeholder}
       disabled={disabled || readonly}
       autoFocus={autofocus}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
       {...dropdownRemainingProps}
     />
   );
@@ -132,7 +132,7 @@ function MultiSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
       disabled={disabled || readonly}
       autoFocus={autofocus}
       display={options.display === 'chip' ? 'chip' : 'comma'}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
       pt={{ root: { style: { position: 'relative' } } }}
     />
   );

package/src/Templates/Templates.ts

@@ -12,6 +12,7 @@ import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
 import MultiSchemaFieldTemplate from '../MultiSchemaFieldTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
+import OptionalDataControlsTemplate from '../OptionalDataControlsTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
 import WrapIfAdditionalTemplate from '../WrapIfAdditionalTemplate';
@@ -43,6 +44,7 @@ export function generateTemplates<
     FieldTemplate,
     MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
     GridTemplate,

package/src/TitleField/TitleField.tsx

@@ -10,13 +10,25 @@ export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSch
   title,
   uiSchema,
   required,
+  optionalDataControl,
 }: TitleFieldProps<T, S, F>) {
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  let heading = (
+    <h5 style={{ margin: 0, fontSize: id === titleId('root') ? '1.5rem' : '1.2rem' }}>
+      {uiOptions.title || title} {required ? '*' : ''}
+    </h5>
+  );
+  if (optionalDataControl) {
+    heading = (
+      <div style={{ display: 'flex' }}>
+        <div style={{ flexGrow: 1 }}>{heading}</div>
+        <div style={{ marginLeft: '-5px' }}>{optionalDataControl}</div>
+      </div>
+    );
+  }
   return (
     <div id={id}>
-      <h5 style={{ margin: 0, fontSize: id === titleId<T>('root') ? '1.5rem' : '1.2rem' }}>
-        {uiOptions.title || title} {required ? '*' : ''}
-      </h5>
+      {heading}
       <Divider pt={{ root: { style: { marginTop: '0.5rem' } } }} />
     </div>
   );

package/src/UpDownWidget/UpDownWidget.tsx

@@ -64,7 +64,7 @@ export default function UpDownWidget<T = any, S extends StrictRJSFSchema = RJSFS
       onChange={(onChangeOverride as any) || _onChange}
       onBlur={_onBlur}
       onFocus={_onFocus}
-      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
     />
   );
 }

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -71,7 +71,7 @@ export default function WrapIfAdditionalTemplate<
       <div style={{ flex: 1 }}>{children}</div>
       <div>
         <RemoveButton
-          id={buttonId<T>(id, 'remove')}
+          id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'
           disabled={disabled || readonly}
           onClick={onDropPropertyClick(label)}