fix: Fix five different issues with this one PR (#3320)

fixes: #3302, #3314, #3315, #3316 and #3317

- In `@rjsf/antd`, pass the new `registry` prop into all of the `ButtonTemplates` usages, filtering it out when spreading props into the underlying button implementation
  - Also updated the `CheckboxWidget` tests to verify the label is passed correctly
- In `@rjsf/bootstrap-4`, pass the new `registry` prop into all of the `ButtonTemplates` usages, filtering it out when spreading props into the underlying button implementation
  - Updated `CheckboxWidget` to get the `required` state of the checkbox from the `schemaRequiresTrueValue()` utility function rather than the `required` prop
  - Also updated the `CheckboxWidget` tests to verify the label is passed correctly
  - Also, remove the one off tests for `AddButton` and `CheckboxWidget` since they are duplicated elsewhere
- In `@rjsf/chakra-ui`, pass the new `registry` prop into all of the `ButtonTemplates` usages, filtering it out when spreading props into the underlying button implementation
  - Updated `CheckboxWidget` to get the `required` state of the checkbox from the `schemaRequiresTrueValue()` utility function rather than the `required` prop
  - Also updated the `CheckboxWidget` tests to verify the label is passed correctly
- In `@rjsf/core`, pass the new `registry` prop into all of the `ButtonTemplates` usages, filtering it out when spreading props into the underlying button implementation
  - Also, passed `registry` into the `SubmitButton` inside of the `Form` as part of this fix
  - Updated `ArrayField` to pass the new `totalItems` prop to the `ArrayFieldItemTemplate` instances
    - Also refactored the near duplicate logic for `onAddClick` and `onAddIndexClick` into a new `_handleAddClick()` function
- In `@rjsf/fluent-ui`, pass the new `registry` prop into all of the `ButtonTemplates` usages, filtering it out when spreading props into the underlying button implementation
  - Also updated the `CheckboxWidget` tests to verify the label is passed correctly
- In `@rjsf/material-ui`, pass the new `registry` prop into all of the `ButtonTemplates` usages, filtering it out when spreading props into the underlying button implementation
  - Also updated the `CheckboxWidget` tests to verify the label is passed correctly
- In `@rjsf/mui`, pass the new `registry` prop into all of the `ButtonTemplates` usages, filtering it out when spreading props into the underlying button implementation
  - Also updated the `CheckboxWidget` tests to verify the label is passed correctly
- In `@rjsf/semantic-ui`, pass the new `registry` prop into all of the `ButtonTemplates` usages, filtering it out when spreading props into the underlying button implementation
  - Updated `CheckboxWidget` to get the `required` state of the checkbox from the `schemaRequiresTrueValue()` utility function rather than the `required` prop
  - Also fixed the `CheckboxWidget` missing label issue
  - Also updated the `CheckboxWidget` tests to verify the label is passed correctly
- In `@rjsf/utils`, updated the `SubmitButtonProps` and `IconButtonProps` to add required `registry` prop
  - Updated the `ArrayFieldTemplateItemType` to add the new `totalItems` prop
- Updated the `custom-templates.md` file to add documentation for the new props added to the types
- Updated the `CHANGELOG.md` file accordingly

CHANGELOG.md

@@ -15,6 +15,53 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 5.0.0-beta-16
+
+## @rjsf/antd
+- Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+- Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+
+## @rjsf/bootstrap-4
+- Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+- Updated `CheckboxWidget` to get the `required` state of the checkbox from the `schemaRequiresTrueValue()` utility function rather than the `required` prop, fixing [#3317](https://github.com/rjsf-team/react-jsonschema-form/issues/3317)
+- Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+
+## @rjsf/chakra-ui
+- Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+- Updated `CheckboxWidget` to get the `required` state of the checkbox from the `schemaRequiresTrueValue()` utility function rather than the `required` prop, fixing [#3317](https://github.com/rjsf-team/react-jsonschema-form/issues/3317)
+- Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+
+## @rjsf/core
+- Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+  - Also, passed `registry` into the `SubmitButton` inside of the `Form` as part of this fix
+- Updated `ArrayField` to pass the new `totalItems` prop to the `ArrayFieldItemTemplate` instances, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315)
+  - Also refactored the near duplicate logic for `onAddClick` and `onAddIndexClick` into a new `_handleAddClick()` function, fixing [#3316](https://github.com/rjsf-team/react-jsonschema-form/issues/3316)
+
+## @rjsf/fluent-ui
+- Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+- Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+
+## @rjsf/material-ui
+- Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+- Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+
+## @rjsf/mui
+- Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+- Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+
+## @rjsf/semantic-ui
+- Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+- Updated `CheckboxWidget` to get the `required` state of the checkbox from the `schemaRequiresTrueValue()` utility function rather than the `required` prop, fixing [#3317](https://github.com/rjsf-team/react-jsonschema-form/issues/3317)
+  - Also fixed the `CheckboxWidget` missing label issue [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+- Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+
+## @rjsf/utils
+- Updated the `SubmitButtonProps` and `IconButtonProps` to add required `registry` prop, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
+- Updated the `ArrayFieldTemplateItemType` to add the new `totalItems` prop, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315)
+
+## Dev / docs / playground
+- Fixed the documentation for `ArrayFieldItemTemplate`, `SubmitButtonProps` and `IconButtonProps` as part of the fix for [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314) and [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315) 
+
 # 5.0.0-beta-15
 
 ## @rjsf/core

docs/advanced-customization/custom-templates.md

@@ -217,6 +217,7 @@ The following props are passed to each `ArrayFieldItemTemplate`:
 - `hasRemove`: A boolean value stating whether the array item can be removed.
 - `hasToolbar`: A boolean value stating whether the array item has a toolbar.
 - `index`: A number stating the index the array item occurs in `items`.
+- `totalItems`: A number stating the total number `items` in the array.
 - `key`: A stable, unique key for the array item.
 - `onAddIndexClick: (index) => (event?) => void`: Returns a function that adds a new item at `index`.
 - `onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.
@@ -849,6 +850,7 @@ Each button template (except for the `SubmitButton`) accepts, as props, the stan
 - `iconType`: An alternative specification for the type of the icon button.
 - `icon`: The name representation or actual react element implementation for the icon.
 - `uiSchema`: The uiSchema object for this field.
+- `registry`: The `registry` object.
 
 ### AddButton
 
@@ -1003,3 +1005,4 @@ render((
 The following prop is passed to a `SubmitButton`:
 
 - `uiSchema`: The uiSchema object for this field, used to extract the `UISchemaSubmitButtonOptions`.
+- `registry`: The `registry` object.

packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx

@@ -43,6 +43,7 @@ const ArrayFieldItemTemplate = ({
                 onClick={onReorderClick(index, index - 1)}
                 style={BTN_STYLE}
                 uiSchema={uiSchema}
+                registry={registry}
               />
             )}
             {(hasMoveUp || hasMoveDown) && (
@@ -51,6 +52,7 @@ const ArrayFieldItemTemplate = ({
                 onClick={onReorderClick(index, index + 1)}
                 style={BTN_STYLE}
                 uiSchema={uiSchema}
+                registry={registry}
               />
             )}
             {hasRemove && (
@@ -59,6 +61,7 @@ const ArrayFieldItemTemplate = ({
                 onClick={onDropIndexClick(index)}
                 style={BTN_STYLE}
                 uiSchema={uiSchema}
+                registry={registry}
               />
             )}
           </Button.Group>

packages/antd/src/templates/ArrayFieldTemplate/index.tsx

@@ -105,6 +105,7 @@ const ArrayFieldTemplate = ({
                   disabled={disabled || readonly}
                   onClick={onAddClick}
                   uiSchema={uiSchema}
+                  registry={registry}
                 />
               </Col>
             </Row>

packages/antd/src/templates/IconButton/index.tsx

@@ -10,7 +10,13 @@ import PlusCircleOutlined from "@ant-design/icons/PlusCircleOutlined";
 export type AntdIconButtonProps = Omit<IconButtonProps, "type">;
 
 export default function IconButton(props: AntdIconButtonProps & ButtonProps) {
-  const { iconType = "default", icon, uiSchema, ...otherProps } = props;
+  const {
+    iconType = "default",
+    icon,
+    uiSchema,
+    registry,
+    ...otherProps
+  } = props;
   return <Button type={iconType as ButtonType} icon={icon} {...otherProps} />;
 }
 

packages/antd/src/templates/ObjectFieldTemplate/index.tsx

@@ -157,6 +157,7 @@ const ObjectFieldTemplate = ({
                 disabled={disabled || readonly}
                 onClick={onAddClick(schema)}
                 uiSchema={uiSchema}
+                registry={registry}
               />
             </Col>
           </Row>

packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx

@@ -97,6 +97,7 @@ const WrapIfAdditionalTemplate = ({
             disabled={disabled || readonly}
             onClick={onDropPropertyClick(label)}
             uiSchema={buttonUiOptions}
+            registry={registry}
           />
         </Col>
       </Row>

packages/antd/test/Form.test.tsx

@@ -192,9 +192,10 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  test("checkbox field", () => {
+  test("checkbox field with label", () => {
     const schema: RJSFSchema = {
       type: "boolean",
+      title: "test",
     };
     const tree = renderer
       .create(<Form schema={schema} validator={validator} />)

packages/antd/test/__snapshots__/Form.test.tsx.snap

@@ -53,7 +53,7 @@ exports[`single fields checkbox field 1`] = `
 </form>
 `;
 
-exports[`single fields checkbox field 2`] = `
+exports[`single fields checkbox field with label 1`] = `
 <form
   className="rjsf"
   noValidate={false}
@@ -89,7 +89,7 @@ exports[`single fields checkbox field 2`] = `
         />
       </span>
       <span>
-        
+        test
       </span>
     </label>
   </div>

packages/bootstrap-4/src/AddButton/AddButton.tsx

@@ -5,6 +5,7 @@ import { BsPlus } from "@react-icons/all-files/bs/BsPlus";
 
 const AddButton: React.ComponentType<IconButtonProps> = ({
   uiSchema,
+  registry,
   ...props
 }) => (
   <Button

packages/bootstrap-4/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -43,6 +43,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
                     disabled={disabled || readonly || !hasMoveUp}
                     onClick={onReorderClick(index, index - 1)}
                     uiSchema={uiSchema}
+                    registry={registry}
                   />
                 </div>
               )}
@@ -53,6 +54,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
                     disabled={disabled || readonly || !hasMoveDown}
                     onClick={onReorderClick(index, index + 1)}
                     uiSchema={uiSchema}
+                    registry={registry}
                   />
                 </div>
               )}
@@ -63,6 +65,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
                     disabled={disabled || readonly}
                     onClick={onDropIndexClick(index)}
                     uiSchema={uiSchema}
+                    registry={registry}
                   />
                 </div>
               )}

packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -82,6 +82,7 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
                       onClick={onAddClick}
                       disabled={disabled || readonly}
                       uiSchema={uiSchema}
+                      registry={registry}
                     />
                   </Col>
                 </Row>

packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 
-import { WidgetProps } from "@rjsf/utils";
+import { WidgetProps, schemaRequiresTrueValue } from "@rjsf/utils";
 import Form from "react-bootstrap/Form";
 
 const CheckboxWidget = (props: WidgetProps) => {
   const {
     id,
     value,
-    required,
     disabled,
     readonly,
     label,
@@ -17,6 +16,10 @@ const CheckboxWidget = (props: WidgetProps) => {
     onBlur,
     onFocus,
   } = props;
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  const required = schemaRequiresTrueValue(schema);
 
   const _onChange = ({
     target: { checked },

packages/bootstrap-4/src/IconButton/IconButton.tsx

@@ -6,7 +6,8 @@ import { AiOutlineArrowUp } from "@react-icons/all-files/ai/AiOutlineArrowUp";
 import { AiOutlineArrowDown } from "@react-icons/all-files/ai/AiOutlineArrowDown";
 
 const IconButton = (props: IconButtonProps & ButtonProps) => {
-  const { icon, iconType, className, uiSchema, ...otherProps } = props;
+  const { icon, iconType, className, uiSchema, registry, ...otherProps } =
+    props;
   return (
     <Button
       block={iconType === "block"}

packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -79,6 +79,7 @@ const ObjectFieldTemplate = ({
                 disabled={disabled || readonly}
                 className="object-property-expand"
                 uiSchema={uiSchema}
+                registry={registry}
               />
             </Col>
           </Row>

packages/bootstrap-4/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -60,6 +60,7 @@ const WrapIfAdditionalTemplate = ({
           disabled={disabled || readonly}
           onClick={onDropPropertyClick(label)}
           uiSchema={uiSchema}
+          registry={registry}
         />
       </Col>
     </Row>

packages/bootstrap-4/test/Form.test.tsx

@@ -191,9 +191,10 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  test("checkbox field", () => {
+  test("checkbox field with label", () => {
     const schema: RJSFSchema = {
       type: "boolean",
+      title: "test",
     };
     const tree = renderer
       .create(<Form schema={schema} validator={validator} />)