@khanacademy/wonder-blocks-form 2.4.2 → 2.4.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @khanacademy/wonder-blocks-form
 
+## 2.4.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.2.6
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-icon@1.2.27
+-   @khanacademy/wonder-blocks-layout@1.4.9
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
 ## 2.4.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -24,16 +24,11 @@ const StyledInput$1 = addStyle("input");
 const checkboxCheck = {
   small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
 };
-/**
- * The internal stateless ☑️ Checkbox
- */
-
 class CheckboxCore extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.handleChange = () => {
-      // Empty because change is handled by ClickableBehavior
       return;
     };
   }
@@ -59,18 +54,16 @@ class CheckboxCore extends React.Component {
     const props = {
       "data-test-id": testId
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledInput$1, _extends({}, sharedProps, {
+    return React.createElement(React.Fragment, null, React.createElement(StyledInput$1, _extends({}, sharedProps, {
       type: "checkbox",
       "aria-invalid": error,
       checked: checked,
       disabled: disabled,
       id: id,
-      name: groupName // Need to specify because this is a controlled React form
-      // component, but we handle the click via ClickableBehavior
-      ,
+      name: groupName,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), checked && /*#__PURE__*/React.createElement(Icon, {
+    }, props)), checked && React.createElement(Icon, {
       color: disabled ? offBlack32$1 : white$1,
       icon: checkboxCheck,
       size: "small",
@@ -81,7 +74,6 @@ class CheckboxCore extends React.Component {
 }
 const size$1 = 16;
 const sharedStyles$1 = StyleSheet.create({
-  // Reset the default styled input element
   inputReset: {
     appearance: "none",
     WebkitAppearance: "none",
@@ -129,7 +121,6 @@ const colors$1 = {
 const styles$5 = {};
 
 const _generateStyles$1 = (checked, error) => {
-  // "hash" the parameters
   const styleKey = `${String(checked)}-${String(error)}`;
 
   if (styles$5[styleKey]) {
@@ -187,16 +178,11 @@ const {
   offBlack50
 } = Color;
 const StyledInput = addStyle("input");
-/**
- * The internal stateless 🔘 Radio button
- */
-
 class RadioCore extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.handleChange = () => {
-      // Empty because change is handled by ClickableBehavior
       return;
     };
   }
@@ -222,25 +208,22 @@ class RadioCore extends React.Component {
     const props = {
       "data-test-id": testId
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledInput, _extends({}, sharedProps, {
+    return React.createElement(React.Fragment, null, React.createElement(StyledInput, _extends({}, sharedProps, {
       type: "radio",
       "aria-invalid": error,
       checked: checked,
       disabled: disabled,
       id: id,
-      name: groupName // Need to specify because this is a controlled React form
-      // component, but we handle the click via ClickableBehavior
-      ,
+      name: groupName,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), disabled && checked && /*#__PURE__*/React.createElement("span", {
+    }, props)), disabled && checked && React.createElement("span", {
       style: disabledChecked
     }));
   }
 
 }
-const size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
-
+const size = 16;
 const disabledChecked = {
   position: "absolute",
   top: size / 4,
@@ -251,7 +234,6 @@ const disabledChecked = {
   backgroundColor: offBlack32
 };
 const sharedStyles = StyleSheet.create({
-  // Reset the default styled input element
   inputReset: {
     appearance: "none",
     WebkitAppearance: "none",
@@ -295,7 +277,6 @@ const colors = {
 const styles$4 = {};
 
 const _generateStyles = (checked, error) => {
-  // "hash" the parameters
   const styleKey = `${String(checked)}-${String(error)}`;
 
   if (styles$4[styleKey]) {
@@ -344,22 +325,11 @@ const _generateStyles = (checked, error) => {
 };
 
 const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
-
-/**
- * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
- * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
- * Radio with many of its props auto-populated, to be used with CheckboxGroup
- * and RadioGroup. This design allows for more explicit prop typing. For
- * example, we can make onChange a required prop on Checkbox but not on Choice
- * (because for Choice, that prop would be auto-populated by CheckboxGroup).
- */
 class ChoiceInternal extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.handleLabelClick = event => {
-      // Browsers automatically use the for attribute to select the input,
-      // but we use ClickableBehavior to handle this.
       event.preventDefault();
     };
 
@@ -368,7 +338,7 @@ class ChoiceInternal extends React.Component {
         checked,
         onChange,
         variant
-      } = this.props; // Radio buttons cannot be unchecked
+      } = this.props;
 
       if (variant === "radio" && checked) {
         return;
@@ -392,9 +362,9 @@ class ChoiceInternal extends React.Component {
       id,
       label
     } = this.props;
-    return /*#__PURE__*/React.createElement(LabelMedium, {
+    return React.createElement(LabelMedium, {
       style: [styles$3.label, disabled && styles$3.disabledLabel]
-    }, /*#__PURE__*/React.createElement("label", {
+    }, React.createElement("label", {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
@@ -404,7 +374,7 @@ class ChoiceInternal extends React.Component {
     const {
       description
     } = this.props;
-    return /*#__PURE__*/React.createElement(LabelSmall, {
+    return React.createElement(LabelSmall, {
       style: styles$3.description,
       id: id
     }, description);
@@ -423,29 +393,26 @@ class ChoiceInternal extends React.Component {
 
     const ChoiceCore = this.getChoiceCoreComponent();
     const ClickableBehavior = getClickableBehavior();
-    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
+    return React.createElement(UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "choice"
     }, ids => {
       const descriptionId = description && ids.get("description");
-      return /*#__PURE__*/React.createElement(View, {
+      return React.createElement(View, {
         style: style,
         className: className
-      }, /*#__PURE__*/React.createElement(ClickableBehavior, {
+      }, React.createElement(ClickableBehavior, {
         disabled: coreProps.disabled,
         onClick: this.handleClick,
         role: variant
       }, (state, childrenProps) => {
-        return /*#__PURE__*/React.createElement(View, _extends({
+        return React.createElement(View, _extends({
           style: styles$3.wrapper
         }, childrenProps, {
-          // We are resetting the tabIndex=0 from handlers
-          // because the ChoiceCore component will receive
-          // focus on basis of it being an input element.
           tabIndex: -1
-        }), /*#__PURE__*/React.createElement(ChoiceCore, _extends({}, coreProps, state, {
+        }), React.createElement(ChoiceCore, _extends({}, coreProps, state, {
           "aria-describedby": descriptionId
-        })), /*#__PURE__*/React.createElement(Strut, {
+        })), React.createElement(Strut, {
           size: Spacing.xSmall_8
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
@@ -466,33 +433,21 @@ const styles$3 = StyleSheet.create({
   },
   label: {
     userSelect: "none",
-    // NOTE: The checkbox/radio button (height 16px) should be center
-    // aligned with the first line of the label. However, LabelMedium has a
-    // declared line height of 20px, so we need to adjust the top to get the
-    // desired alignment.
     marginTop: -2
   },
   disabledLabel: {
     color: Color.offBlack32
   },
   description: {
-    // 16 for icon + 8 for spacing strut
     marginLeft: Spacing.medium_16 + Spacing.xSmall_8,
     marginTop: Spacing.xxxSmall_4,
     color: Color.offBlack64
   }
 });
 
-/**
- * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
- * label and description props.
- *
- * If you want a whole group of Checkbox[es] that are related, see the Choice
- * and CheckboxGroup components.
- */
 class Checkbox extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(ChoiceInternal, _extends({
+    return React.createElement(ChoiceInternal, _extends({
       variant: "checkbox"
     }, this.props));
   }
@@ -503,16 +458,9 @@ Checkbox.defaultProps = {
   error: false
 };
 
-/**
- * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
- * optionally take label and description props.
- *
- * This component should not really be used by itself because radio buttons are
- * often grouped together. See RadioGroup.
- */
 class Radio extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(ChoiceInternal, _extends({
+    return React.createElement(ChoiceInternal, _extends({
       variant: "radio"
     }, this.props));
   }
@@ -524,16 +472,6 @@ Radio.defaultProps = {
 };
 
 const _excluded$1 = ["value", "variant"];
-
-/**
- * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
- * CheckboxGroup and RadioGroup because many of its props are auto-populated
- * and not shown in the documentation here. See those components for usage
- * examples.
- *
- * If you wish to use just a single field, use Checkbox or Radio with the
- * optional label and description props.
- */
 class Choice extends React.Component {
   getChoiceComponent(variant) {
     if (variant === "checkbox") {
@@ -544,8 +482,6 @@ class Choice extends React.Component {
   }
 
   render() {
-    // we don't need this going into the ChoiceComponent
-    // eslint-disable-next-line no-unused-vars
     const _this$props = this.props,
           {
       variant
@@ -553,7 +489,7 @@ class Choice extends React.Component {
           remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
     const ChoiceComponent = this.getChoiceComponent(variant);
-    return /*#__PURE__*/React.createElement(ChoiceComponent, remainingProps);
+    return React.createElement(ChoiceComponent, remainingProps);
   }
 
 }
@@ -587,13 +523,6 @@ const styles$2 = StyleSheet.create({
 
 const StyledFieldset$1 = addStyle("fieldset");
 const StyledLegend$1 = addStyle("legend");
-/**
- * A checkbox group allows multiple selection. This component auto-populates
- * many props for its children Choice components. The Choice component is
- * exposed for the user to apply custom styles or to indicate which choices are
- * disabled.
- */
-
 class CheckboxGroup extends React.Component {
   handleChange(changedValue, originalCheckedState) {
     const {
@@ -621,18 +550,18 @@ class CheckboxGroup extends React.Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/React.createElement(StyledFieldset$1, {
+    return React.createElement(StyledFieldset$1, {
       "data-test-id": testId,
       style: styles$2.fieldset
-    }, /*#__PURE__*/React.createElement(View, {
+    }, React.createElement(View, {
       style: style
-    }, typeof label === "string" ? /*#__PURE__*/React.createElement(StyledLegend$1, {
+    }, typeof label === "string" ? React.createElement(StyledLegend$1, {
       style: styles$2.legend
-    }, /*#__PURE__*/React.createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+    }, React.createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? React.createElement(LabelSmall, {
       style: styles$2.description
-    }, description) : description && description, errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
+    }, description) : description && description, errorMessage && React.createElement(LabelSmall, {
       style: styles$2.error
-    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/React.createElement(Strut, {
+    }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
       size: Spacing.small_12
     }), React.Children.map(children, (child, index) => {
       const {
@@ -640,7 +569,7 @@ class CheckboxGroup extends React.Component {
         value
       } = child.props;
       const checked = selectedValues.includes(value);
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
+      return React.createElement(React.Fragment, null, React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -657,15 +586,6 @@ class CheckboxGroup extends React.Component {
 
 const StyledFieldset = addStyle("fieldset");
 const StyledLegend = addStyle("legend");
-/**
- * A radio group allows only single selection. Like CheckboxGroup, this
- * component auto-populates many props for its children Choice components. The
- * Choice component is exposed for the user to apply custom styles or to
- * indicate which choices are disabled. The use of the groupName prop is
- * important to maintain expected keyboard navigation behavior for
- * accessibility.
- */
-
 class RadioGroup extends React.Component {
   handleChange(changedValue) {
     this.props.onChange(changedValue);
@@ -682,18 +602,18 @@ class RadioGroup extends React.Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/React.createElement(StyledFieldset, {
+    return React.createElement(StyledFieldset, {
       "data-test-id": testId,
       style: styles$2.fieldset
-    }, /*#__PURE__*/React.createElement(View, {
+    }, React.createElement(View, {
       style: style
-    }, label && /*#__PURE__*/React.createElement(StyledLegend, {
+    }, label && React.createElement(StyledLegend, {
       style: styles$2.legend
-    }, /*#__PURE__*/React.createElement(LabelMedium, null, label)), description && /*#__PURE__*/React.createElement(LabelSmall, {
+    }, React.createElement(LabelMedium, null, label)), description && React.createElement(LabelSmall, {
       style: styles$2.description
-    }, description), errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
+    }, description), errorMessage && React.createElement(LabelSmall, {
       style: styles$2.error
-    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/React.createElement(Strut, {
+    }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
       size: Spacing.small_12
     }), React.Children.map(children, (child, index) => {
       const {
@@ -701,7 +621,7 @@ class RadioGroup extends React.Component {
         value
       } = child.props;
       const checked = selectedValue === value;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
+      return React.createElement(React.Fragment, null, React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -719,11 +639,6 @@ class RadioGroup extends React.Component {
 const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";
 
-// TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
-
-/**
- * A TextField is an element used to accept a single line of text from the user.
- */
 class TextFieldInternal extends React.Component {
   constructor(props) {
     super(props);
@@ -797,7 +712,6 @@ class TextFieldInternal extends React.Component {
     };
 
     if (props.validate && props.value !== "") {
-      // Ensures error is updated on unmounted server-side renders
       this.state.error = props.validate(props.value) || null;
     }
   }
@@ -826,9 +740,8 @@ class TextFieldInternal extends React.Component {
     } = _this$props,
           otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    return /*#__PURE__*/React.createElement("input", _extends({
-      className: css([styles$1.input, styles$6.LabelMedium, styles$1.default, // Prioritizes disabled, then focused, then error (if any)
-      disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : this.state.error && [styles$1.error, light && styles$1.errorLight], style && style]),
+    return React.createElement("input", _extends({
+      className: css([styles$1.input, styles$6.LabelMedium, styles$1.default, disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : this.state.error && [styles$1.error, light && styles$1.errorLight], style && style]),
       id: id,
       type: type,
       placeholder: placeholder,
@@ -902,16 +815,11 @@ const styles$1 = StyleSheet.create({
     boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`
   }
 });
-const TextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(TextFieldInternal, _extends({}, props, {
+const TextField = React.forwardRef((props, ref) => React.createElement(TextFieldInternal, _extends({}, props, {
   forwardedRef: ref
 })));
 
 const StyledSpan = addStyle("span");
-/**
- * A FieldHeading is an element that provides a label, description, and error element
- * to present better context and hints to any type of form field component.
- */
-
 class FieldHeading extends React.Component {
   renderLabel() {
     const {
@@ -920,16 +828,16 @@ class FieldHeading extends React.Component {
       required,
       testId
     } = this.props;
-    const requiredIcon = /*#__PURE__*/React.createElement(StyledSpan, {
+    const requiredIcon = React.createElement(StyledSpan, {
       style: styles.required,
       "aria-hidden": true
     }, " ", "*");
-    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof label === "string" ? /*#__PURE__*/React.createElement(LabelMedium, {
+    return React.createElement(React.Fragment, null, typeof label === "string" ? React.createElement(LabelMedium, {
       style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label, required && requiredIcon) : label, /*#__PURE__*/React.createElement(Strut, {
+    }, label, required && requiredIcon) : label, React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -944,10 +852,10 @@ class FieldHeading extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof description === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+    return React.createElement(React.Fragment, null, typeof description === "string" ? React.createElement(LabelSmall, {
       style: styles.description,
       testId: testId && `${testId}-description`
-    }, description) : description, /*#__PURE__*/React.createElement(Strut, {
+    }, description) : description, React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -963,9 +871,9 @@ class FieldHeading extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
+    return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: Spacing.small_12
-    }), typeof error === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+    }), typeof error === "string" ? React.createElement(LabelSmall, {
       style: styles.error,
       role: "alert",
       id: id && `${id}-error`,
@@ -978,9 +886,9 @@ class FieldHeading extends React.Component {
       field,
       style
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       style: style
-    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/React.createElement(Strut, {
+    }, this.renderLabel(), this.maybeRenderDescription(), React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), field, this.maybeRenderError());
   }
@@ -1001,12 +909,6 @@ const styles = StyleSheet.create({
   }
 });
 
-// TODO(WB-1081): Change class name back to LabeledTextField after Styleguidist is gone.
-
-/**
- * A LabeledTextField is an element used to accept a single line of text
- * from the user paired with a label, description, and error field elements.
- */
 class LabeledTextFieldInternal extends React.Component {
   constructor(props) {
     super(props);
@@ -1077,14 +979,14 @@ class LabeledTextFieldInternal extends React.Component {
       forwardedRef,
       ariaDescribedby
     } = this.props;
-    return /*#__PURE__*/React.createElement(IDProvider, {
+    return React.createElement(IDProvider, {
       id: id,
       scope: "labeled-text-field"
-    }, uniqueId => /*#__PURE__*/React.createElement(FieldHeading, {
+    }, uniqueId => React.createElement(FieldHeading, {
       id: uniqueId,
       testId: testId,
       style: style,
-      field: /*#__PURE__*/React.createElement(TextField, {
+      field: React.createElement(TextField, {
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
@@ -1120,7 +1022,7 @@ LabeledTextFieldInternal.defaultProps = {
   disabled: false,
   light: false
 };
-const LabeledTextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(LabeledTextFieldInternal, _extends({}, props, {
+const LabeledTextField = React.forwardRef((props, ref) => React.createElement(LabeledTextFieldInternal, _extends({}, props, {
   forwardedRef: ref
 })));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,19 +16,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.5",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.6",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.26",
-    "@khanacademy/wonder-blocks-layout": "^1.4.8",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
+    "@khanacademy/wonder-blocks-icon": "^1.2.27",
+    "@khanacademy/wonder-blocks-layout": "^1.4.9",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-typography": "^1.1.31"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }