@rjsf/semantic-ui 6.0.0-beta.8 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/semantic-ui",
-  "version": "6.0.0-beta.8",
+  "version": "6.0.0",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -9,27 +9,27 @@
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "import": "./lib/index.js"
     },
     "./lib": {
       "types": "./lib/index.d.ts",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "import": "./lib/index.js"
     },
     "./lib/*.js": {
       "types": "./lib/*.d.ts",
-      "require": "./dist/*.js",
+      "require": "./dist/*.cjs",
       "import": "./lib/*.js"
     },
     "./dist": {
       "types": "./lib/index.d.ts",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "import": "./lib/index.js"
     },
-    "./dist/*.js": {
+    "./dist/*.cjs": {
       "types": "./lib/*.d.ts",
-      "require": "./dist/*.js",
+      "require": "./dist/*.cjs",
       "import": "./lib/*.js"
     }
   },
@@ -44,7 +44,7 @@
   },
   "scripts": {
     "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:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.cjs --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/semantic-ui.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/semantic-ui.esm.js --format=umd --file=dist/semantic-ui.umd.js --name=@rjsf/semantic-ui",
     "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
@@ -61,20 +61,19 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.0.0-beta",
-    "@rjsf/utils": "^6.0.0-beta",
+    "@rjsf/core": "^6.0.0-beta.23",
+    "@rjsf/utils": "^6.0.0-beta.23",
     "react": ">=18",
     "semantic-ui-react": "^2.1.3"
   },
   "devDependencies": {
-    "@rjsf/core": "^6.0.0-beta.8",
-    "@rjsf/snapshot-tests": "^6.0.0-beta.8",
-    "@rjsf/utils": "^6.0.0-beta.8",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.8",
+    "@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",
     "atob": "^2.1.2",
-    "eslint": "^8.56.0",
-    "nanoid": "^5.1.5",
-    "semantic-ui-react": "^2.1.3"
+    "eslint": "^8.57.1",
+    "semantic-ui-react": "^2.1.5"
   },
   "publishConfig": {
     "access": "public"

package/src/AddButton/AddButton.tsx

@@ -1,5 +1,7 @@
 import { Button, Icon, ButtonProps } from 'semantic-ui-react';
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+import { SemanticIconButtonProps } from '../IconButton';
 
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
@@ -8,15 +10,15 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
   registry,
   color,
   ...props
-}: IconButtonProps<T, S, F>) {
+}: SemanticIconButtonProps<T, S, F>) {
   const { translateString } = registry;
   return (
     <Button
       title={translateString(TranslatableString.AddItemButton)}
       color={color as ButtonProps['color']}
+      size='tiny'
       {...props}
       icon
-      size='tiny'
     >
       <Icon name='plus' />
     </Button>

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,7 +1,6 @@
 import {
-  ArrayFieldItemTemplateType,
+  ArrayFieldItemTemplateProps,
   FormContextType,
-  GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
   getUiOptions,
@@ -9,7 +8,7 @@ import {
 } from '@rjsf/utils';
 import { Button, Grid, Segment } from 'semantic-ui-react';
 
-import { MaybeWrap } from '../util';
+import { getSemanticProps, MaybeWrap } from '../util';
 
 const gridStyle = (vertical: boolean) => ({
   display: 'grid',
@@ -18,22 +17,26 @@ const gridStyle = (vertical: boolean) => ({
 
 /** 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>) {
-  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+>(props: ArrayFieldItemTemplateProps<T, S, F>) {
+  const { children, buttonsProps, hasToolbar, uiSchema, registry, parentUiSchema } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
     registry,
     uiOptions,
   );
-  // Pull the semantic props out of the uiOptions that were put in via the ArrayFieldTemplate
-  const { horizontalButtons = true, wrapItem = false } = uiOptions.semantic as GenericObjectType;
+  const semanticProps = getSemanticProps<T, S, F>({
+    uiSchema: parentUiSchema,
+    formContext: registry.formContext,
+    defaultSchemaProps: { horizontalButtons: true, wrapItem: false },
+  });
+  const { horizontalButtons = true, wrapItem = false } = semanticProps;
   return (
     <div className='rjsf-array-item'>
       <MaybeWrap wrap={wrapItem} component={Segment}>

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -3,19 +3,17 @@ import {
   getUiOptions,
   isFixedItems,
   ArrayFieldTemplateProps,
-  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
-  UI_OPTIONS_KEY,
   buttonId,
 } from '@rjsf/utils';
 
-import { cleanClassNames, getSemanticProps } from '../util';
+import { cleanClassNames } from '../util';
 
 /** 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,
@@ -24,13 +22,13 @@ export default function ArrayFieldTemplate<
 >(props: ArrayFieldTemplateProps<T, S, F>) {
   const {
     uiSchema,
-    idSchema,
+    fieldPathId,
     canAdd,
     className,
     // classNames, This is not part of the type, so it is likely never passed in
     disabled,
-    formContext,
     items,
+    optionalDataControl,
     onAddClick,
     // options, This is not part of the type, so it is likely never passed in
     readonly,
@@ -39,29 +37,18 @@ export default function ArrayFieldTemplate<
     title,
     registry,
   } = props;
-  const semanticProps = getSemanticProps<T, S, F>({
-    uiSchema,
-    formContext,
-    defaultSchemaProps: { horizontalButtons: true, wrapItem: false },
-  });
-  const { horizontalButtons, wrapItem } = semanticProps;
-  const semantic = { horizontalButtons, wrapItem };
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
     'ArrayFieldDescriptionTemplate',
     registry,
     uiOptions,
   );
-  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
-    'ArrayFieldItemTemplate',
-    registry,
-    uiOptions,
-  );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -69,34 +56,25 @@ export default function ArrayFieldTemplate<
   return (
     <div className={cleanClassNames([className, isFixedItems<S>(schema) ? '' : 'sortable-form-fields'])}>
       <ArrayFieldTitleTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         title={uiOptions.title || title}
         schema={schema}
         uiSchema={uiSchema}
         required={required}
         registry={registry}
+        optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
       />
       <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 className='row array-item-list'>
-          {items &&
-            items.map(({ key, uiSchema: itemUiSchema = {}, ...props }: ArrayFieldItemTemplateType<T, S, F>) => {
-              // Merge in the semantic props from the ArrayFieldTemplate into each of the items
-              const mergedUiSchema = {
-                ...itemUiSchema,
-                [UI_OPTIONS_KEY]: {
-                  ...itemUiSchema[UI_OPTIONS_KEY],
-                  semantic,
-                },
-              };
-              return <ArrayFieldItemTemplate key={key} {...props} uiSchema={mergedUiSchema} />;
-            })}
+          {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+          {items}
         </div>
         {canAdd && (
           <div
@@ -107,7 +85,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/BaseInputTemplate/BaseInputTemplate.tsx

@@ -25,6 +25,7 @@ export default function BaseInputTemplate<
 >(props: BaseInputTemplateProps<T, S, F>) {
   const {
     id,
+    htmlName,
     placeholder,
     label,
     hideLabel,
@@ -40,14 +41,14 @@ export default function BaseInputTemplate<
     options,
     schema,
     uiSchema,
-    formContext,
+    registry,
     type,
     rawErrors = [],
   } = props;
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   const semanticProps = getSemanticProps<T, S, F>({
     uiSchema,
-    formContext,
+    formContext: registry.formContext,
     options,
   });
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
@@ -60,24 +61,24 @@ export default function BaseInputTemplate<
       <Form.Input
         key={id}
         id={id}
-        name={id}
+        name={htmlName || id}
         placeholder={placeholder}
         {...inputProps}
         label={labelValue(label || undefined, hideLabel, false)}
         required={required}
         autoFocus={autofocus}
         disabled={disabled || readonly}
-        list={schema.examples ? examplesId<T>(id) : undefined}
+        list={schema.examples ? examplesId(id) : undefined}
         {...semanticProps}
         value={value || value === 0 ? value : ''}
         error={rawErrors.length > 0}
         onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {Array.isArray(schema.examples) && (
-        <datalist id={examplesId<T>(id)}>
+        <datalist id={examplesId(id)}>
           {(schema.examples as string[])
             .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
             .map((example) => {

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -25,6 +25,7 @@ export default function CheckboxWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -35,7 +36,6 @@ export default function CheckboxWidget<
     onBlur,
     options,
     onFocus,
-    formContext,
     schema,
     uiSchema,
     rawErrors = [],
@@ -43,7 +43,7 @@ export default function CheckboxWidget<
   } = props;
   const semanticProps = getSemanticProps<T, S, F>({
     options,
-    formContext,
+    formContext: registry.formContext,
     uiSchema,
     defaultSchemaProps: {
       inverted: 'false',
@@ -58,17 +58,17 @@ export default function CheckboxWidget<
   // the "required" attribute if the field value must be "true", due to the
   // "const" or "enum" keywords
   const required = schemaRequiresTrueValue<S>(schema);
-  const _onChange = (_: FormEvent<HTMLInputElement>, data: CheckboxProps) => onChange && onChange(data.checked);
-  const _onBlur = () => onBlur && onBlur(id, value);
-  const _onFocus = () => onFocus && onFocus(id, value);
   const checked = value == 'true' || value == true;
+  const _onChange = (_: FormEvent<HTMLInputElement>, data: CheckboxProps) => onChange && onChange(data.checked);
+  const _onBlur: React.FocusEventHandler<HTMLInputElement> = () => onBlur && onBlur(id, value);
+  const _onFocus: React.FocusEventHandler<HTMLInputElement> = () => onFocus && onFocus(id, value);
   const description = options.description ?? schema.description;
 
   return (
     <>
       {!hideLabel && description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(id)}
+          id={descriptionId(id)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -77,7 +77,7 @@ export default function CheckboxWidget<
       )}
       <Form.Checkbox
         id={id}
-        name={id}
+        name={htmlName || id}
         disabled={disabled || readonly}
         autoFocus={autofocus}
         {...semanticProps}
@@ -88,7 +88,7 @@ export default function CheckboxWidget<
         onFocus={_onFocus}
         required={required}
         label={labelValue(label, hideLabel, false)}
-        aria-describedby={ariaDescribedByIds<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       />
     </>
   );

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -27,6 +27,7 @@ export default function CheckboxesWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -37,7 +38,6 @@ export default function CheckboxesWidget<
     onChange,
     onBlur,
     onFocus,
-    formContext,
     schema,
     uiSchema,
     rawErrors = [],
@@ -48,7 +48,7 @@ export default function CheckboxesWidget<
   const checkboxesValues = Array.isArray(value) ? value : [value];
   const semanticProps = getSemanticProps<T, S, F>({
     options,
-    formContext,
+    formContext: registry.formContext,
     uiSchema,
     defaultSchemaProps: {
       inverted: 'false',
@@ -71,9 +71,9 @@ export default function CheckboxesWidget<
   return (
     <>
       {!hideLabel && !!label && (
-        <TitleFieldTemplate id={titleId<T>(id)} title={label} schema={schema} uiSchema={uiSchema} registry={registry} />
+        <TitleFieldTemplate id={titleId(id)} title={label} schema={schema} uiSchema={uiSchema} registry={registry} />
       )}
-      <Form.Group id={id} name={id} {...inlineOption}>
+      <Form.Group id={id} name={htmlName || id} {...inlineOption}>
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, index) => {
             const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
@@ -81,7 +81,7 @@ export default function CheckboxesWidget<
             return (
               <Form.Checkbox
                 id={optionId(id, index)}
-                name={id}
+                name={htmlName || id}
                 key={index}
                 label={option.label}
                 {...semanticProps}
@@ -92,7 +92,7 @@ export default function CheckboxesWidget<
                 onChange={_onChange(index)}
                 onBlur={_onBlur}
                 onFocus={_onFocus}
-                aria-describedby={ariaDescribedByIds<T>(id)}
+                aria-describedby={ariaDescribedByIds(id)}
               />
             );
           })}

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -1,5 +1,5 @@
 import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-import { nanoid } from 'nanoid';
+import uniqueId from 'lodash/uniqueId';
 import { Label, List } from 'semantic-ui-react';
 
 import { getSemanticErrorProps } from '../util';
@@ -19,7 +19,7 @@ export default function FieldErrorTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ errors, idSchema, uiSchema, registry }: FieldErrorProps<T, S, F>) {
+>({ errors, fieldPathId, uiSchema, registry }: FieldErrorProps<T, S, F>) {
   const { formContext } = registry;
   const options = getSemanticErrorProps<T, S, F>({
     formContext,
@@ -28,12 +28,12 @@ export default function FieldErrorTemplate<
   });
   const { pointing, size } = options;
   if (errors && errors.length > 0) {
-    const id = errorId<T>(idSchema);
+    const id = errorId(fieldPathId);
     return (
       <Label id={id} color='red' pointing={pointing || 'above'} size={size || 'small'} basic>
         <List bulleted>
           {errors.map((error) => (
-            <List.Item key={nanoid()}>{error}</List.Item>
+            <List.Item key={uniqueId('field-error-')}>{error}</List.Item>
           ))}
         </List>
       </Label>

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -10,9 +10,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 <Message size='mini' info id={id} content={help} />;
   }
   return null;

package/src/FieldTemplate/FieldTemplate.tsx

@@ -36,7 +36,10 @@ export default function FieldTemplate<
     uiSchema,
     ...otherProps
   } = props;
-  const semanticProps = getSemanticProps<T, S, F>(otherProps);
+  const semanticProps = getSemanticProps<T, S, F>({
+    ...otherProps,
+    formContext: registry.formContext,
+  });
   const { wrapLabel, wrapContent } = semanticProps;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(

package/src/IconButton/IconButton.tsx

@@ -1,8 +1,14 @@
 import { Button, ButtonProps } from 'semantic-ui-react';
 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 SemanticIconButtonProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = IconButtonProps<T, S, F> & Omit<ButtonProps, 'onChange'>;
+
+export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: SemanticIconButtonProps<T, S, F>,
 ) {
   const { icon, iconType, color, className, uiSchema, registry, ...otherProps } = props;
   return (
@@ -16,10 +22,8 @@ function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   );
 }
 
-export default IconButton;
-
 export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -28,7 +32,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: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -37,7 +41,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: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -46,7 +50,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: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },

package/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,16 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
+  const { selector, optionSchemaField } = props;
+
+  return (
+    <div>
+      <div>{selector}</div>
+      {optionSchemaField}
+    </div>
+  );
+}

package/src/MultiSchemaFieldTemplate/index.ts

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

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -25,7 +25,8 @@ export default function ObjectFieldTemplate<
 >(props: ObjectFieldTemplateProps<T, S, F>) {
   const {
     description,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     title,
     properties,
     disabled,
@@ -34,7 +35,7 @@ export default function ObjectFieldTemplate<
     uiSchema,
     schema,
     formData,
-    idSchema,
+    fieldPathId,
     registry,
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -44,6 +45,7 @@ export default function ObjectFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -52,23 +54,25 @@ 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 && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(idSchema)}
+          id={descriptionId(fieldPathId)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
         />
       )}
+      {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
       {properties.map((prop) => prop.content)}
       {canExpand<T, S, F>(schema, uiSchema, formData) && (
         <Grid.Column width={16} verticalAlign='middle'>
@@ -81,9 +85,9 @@ export default function ObjectFieldTemplate<
               }}
             >
               <AddButton
-                id={buttonId<T>(idSchema, 'add')}
+                id={buttonId(fieldPathId, 'add')}
                 className='rjsf-object-property-expand'
-                onClick={onAddClick(schema)}
+                onClick={onAddProperty}
                 disabled={disabled || readonly}
                 uiSchema={uiSchema}
                 registry={registry}