@khanacademy/wonder-blocks-form 3.1.0 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-form
 
+## 3.1.1
+
+### Patch Changes
+
+-   c13dc28e: Don't wrap Choices in a Fragment to so that each child has a 'key' prop
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -570,7 +570,7 @@ class CheckboxGroup extends React.Component {
         value
       } = child.props;
       const checked = selectedValues.includes(value);
-      return React.createElement(React.Fragment, null, React.cloneElement(child, {
+      return React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -579,7 +579,7 @@ class CheckboxGroup extends React.Component {
         onChange: () => this.handleChange(value, checked),
         style: [index > 0 && styles$2.defaultLineGap, style],
         variant: "checkbox"
-      }));
+      });
     })));
   }
 
@@ -623,7 +623,7 @@ class RadioGroup extends React.Component {
         value
       } = child.props;
       const checked = selectedValue === value;
-      return React.createElement(React.Fragment, null, React.cloneElement(child, {
+      return React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -632,7 +632,7 @@ class RadioGroup extends React.Component {
         onChange: () => this.handleChange(value),
         style: [index > 0 && styles$2.defaultLineGap, style],
         variant: "radio"
-      }));
+      });
     })));
   }
 

package/dist/index.js

@@ -868,7 +868,7 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         value
       } = child.props;
       const checked = selectedValues.includes(value);
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -877,7 +877,7 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         onChange: () => this.handleChange(value, checked),
         style: [index > 0 && _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].defaultLineGap, style],
         variant: "checkbox"
-      }));
+      });
     })));
   }
 
@@ -980,7 +980,7 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         value
       } = child.props;
       const checked = selectedValue === value;
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -989,7 +989,7 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         onChange: () => this.handleChange(value),
         style: [index > 0 && _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].defaultLineGap, style],
         variant: "radio"
-      }));
+      });
     })));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",

package/src/components/checkbox-group.js

@@ -156,24 +156,16 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
                     {allChildren.map((child, index) => {
                         const {style, value} = child.props;
                         const checked = selectedValues.includes(value);
-                        return (
-                            <React.Fragment>
-                                {React.cloneElement(child, {
-                                    checked: checked,
-                                    error: !!errorMessage,
-                                    groupName: groupName,
-                                    id: `${groupName}-${value}`,
-                                    key: value,
-                                    onChange: () =>
-                                        this.handleChange(value, checked),
-                                    style: [
-                                        index > 0 && styles.defaultLineGap,
-                                        style,
-                                    ],
-                                    variant: "checkbox",
-                                })}
-                            </React.Fragment>
-                        );
+                        return React.cloneElement(child, {
+                            checked: checked,
+                            error: !!errorMessage,
+                            groupName: groupName,
+                            id: `${groupName}-${value}`,
+                            key: value,
+                            onChange: () => this.handleChange(value, checked),
+                            style: [index > 0 && styles.defaultLineGap, style],
+                            variant: "checkbox",
+                        });
                     })}
                 </View>
             </StyledFieldset>

package/src/components/radio-group.js

@@ -146,23 +146,16 @@ export default class RadioGroup extends React.Component<RadioGroupProps> {
                     {allChildren.map((child, index) => {
                         const {style, value} = child.props;
                         const checked = selectedValue === value;
-                        return (
-                            <React.Fragment>
-                                {React.cloneElement(child, {
-                                    checked: checked,
-                                    error: !!errorMessage,
-                                    groupName: groupName,
-                                    id: `${groupName}-${value}`,
-                                    key: value,
-                                    onChange: () => this.handleChange(value),
-                                    style: [
-                                        index > 0 && styles.defaultLineGap,
-                                        style,
-                                    ],
-                                    variant: "radio",
-                                })}
-                            </React.Fragment>
-                        );
+                        return React.cloneElement(child, {
+                            checked: checked,
+                            error: !!errorMessage,
+                            groupName: groupName,
+                            id: `${groupName}-${value}`,
+                            key: value,
+                            onChange: () => this.handleChange(value),
+                            style: [index > 0 && styles.defaultLineGap, style],
+                            variant: "radio",
+                        });
                     })}
                 </View>
             </StyledFieldset>