@patternfly/react-core 4.214.5 → 4.216.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.214.5",
+  "version": "4.216.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.65.5",
-    "@patternfly/react-styles": "^4.64.5",
-    "@patternfly/react-tokens": "^4.66.5",
+    "@patternfly/react-icons": "^4.67.1",
+    "@patternfly/react-styles": "^4.66.1",
+    "@patternfly/react-tokens": "^4.68.1",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f5ee87ffe8b88ade3018d145fba33f0579c85c61"
+  "gitHead": "5bbf5776f7146b03c36382aa0e8de32781ded672"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -28,6 +28,8 @@ export interface CheckboxProps
   description?: React.ReactNode;
   /** Body text of the checkbox */
   body?: React.ReactNode;
+  /** Sets the input wrapper component to render. Defaults to <div> */
+  component?: React.ElementType;
 }
 
 // tslint:disable-next-line:no-empty
@@ -45,7 +47,8 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     isDisabled: false,
     isChecked: false,
     onChange: defaultOnChange,
-    ouiaSafe: true
+    ouiaSafe: true,
+    component: 'div'
   };
 
   constructor(props: any) {
@@ -74,6 +77,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       body,
       ouiaId,
       ouiaSafe,
+      component: Component,
       ...props
     } = this.props;
     if (!props.id) {
@@ -93,7 +97,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
 
     checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
     return (
-      <div className={css(styles.check, !label && styles.modifiers.standalone, className)}>
+      <Component className={css(styles.check, !label && styles.modifiers.standalone, className)}>
         <input
           {...props}
           className={css(styles.checkInput)}
@@ -113,7 +117,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         )}
         {description && <span className={css(styles.checkDescription)}>{description}</span>}
         {body && <span className={css(styles.checkBody)}>{body}</span>}
-      </div>
+      </Component>
     );
   }
 }

package/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -82,4 +82,13 @@ describe('Checkbox', () => {
     render(<Checkbox id={undefined} />);
     expect(myMock).toHaveBeenCalled();
   });
+
+  test('renders component wrapper as span', () => {
+    const { container } = render(
+      <Checkbox component="span" label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
+    );
+    const span = container.querySelector('span');
+    expect(span).toHaveClass('pf-c-check');
+   
+  });
 });