@khanacademy/wonder-blocks-form 3.1.11 → 3.1.13

package/dist/es/index.js

@@ -1,6 +1,4 @@
-import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { StyleSheet, css } from 'aphrodite';
 import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
 import { addStyle, UniqueIDProvider, View, IDProvider } from '@khanacademy/wonder-blocks-core';
@@ -10,6 +8,48 @@ import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { LabelMedium, LabelSmall, styles as styles$6 } from '@khanacademy/wonder-blocks-typography';
 import Icon from '@khanacademy/wonder-blocks-icon';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
 const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
 const {
   blue: blue$1,
@@ -24,32 +64,32 @@ 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"
 };
-class CheckboxCore extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleChange = () => {
+let CheckboxCore = function (_React$Component) {
+  _inheritsLoose(CheckboxCore, _React$Component);
+  function CheckboxCore(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.handleChange = () => {
       return;
     };
+    return _this;
   }
-
-  render() {
+  var _proto = CheckboxCore.prototype;
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      checked,
-      disabled,
-      error,
-      groupName,
-      id,
-      testId,
-      hovered,
-      focused,
-      pressed
-    } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
-
+      {
+        checked,
+        disabled,
+        error,
+        groupName,
+        id,
+        testId,
+        hovered,
+        focused,
+        pressed
+      } = _this$props,
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
     const stateStyles = _generateStyles$1(checked, error);
-
     const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles$1.disabled];
     const props = {
       "data-test-id": testId
@@ -69,9 +109,9 @@ class CheckboxCore extends React.Component {
       size: "small",
       style: sharedStyles$1.checkIcon
     }));
-  }
-
-}
+  };
+  return CheckboxCore;
+}(React.Component);
 const size$1 = 16;
 const sharedStyles$1 = StyleSheet.create({
   inputReset: {
@@ -119,17 +159,13 @@ const colors$1 = {
   }
 };
 const styles$5 = {};
-
 const _generateStyles$1 = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-
   if (styles$5[styleKey]) {
     return styles$5[styleKey];
   }
-
   const palette = error ? colors$1.error : colors$1.default;
   let newStyles = {};
-
   if (checked) {
     newStyles = {
       default: {
@@ -162,7 +198,6 @@ const _generateStyles$1 = (checked, error) => {
       }
     };
   }
-
   styles$5[styleKey] = StyleSheet.create(newStyles);
   return styles$5[styleKey];
 };
@@ -178,32 +213,32 @@ const {
   offBlack50
 } = Color;
 const StyledInput = addStyle("input");
-class RadioCore extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleChange = () => {
+let RadioCore = function (_React$Component) {
+  _inheritsLoose(RadioCore, _React$Component);
+  function RadioCore(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.handleChange = () => {
       return;
     };
+    return _this;
   }
-
-  render() {
+  var _proto = RadioCore.prototype;
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      checked,
-      disabled,
-      error,
-      groupName,
-      id,
-      testId,
-      hovered,
-      focused,
-      pressed
-    } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
-
+      {
+        checked,
+        disabled,
+        error,
+        groupName,
+        id,
+        testId,
+        hovered,
+        focused,
+        pressed
+      } = _this$props,
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     const stateStyles = _generateStyles(checked, error);
-
     const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles.disabled];
     const props = {
       "data-test-id": testId
@@ -220,9 +255,9 @@ class RadioCore extends React.Component {
     }, props)), disabled && checked && React.createElement("span", {
       style: disabledChecked
     }));
-  }
-
-}
+  };
+  return RadioCore;
+}(React.Component);
 const size = 16;
 const disabledChecked = {
   position: "absolute",
@@ -275,17 +310,13 @@ const colors = {
   }
 };
 const styles$4 = {};
-
 const _generateStyles = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-
   if (styles$4[styleKey]) {
     return styles$4[styleKey];
   }
-
   const palette = error ? colors.error : colors.default;
   let newStyles = {};
-
   if (checked) {
     newStyles = {
       default: {
@@ -319,44 +350,41 @@ const _generateStyles = (checked, error) => {
       }
     };
   }
-
   styles$4[styleKey] = StyleSheet.create(newStyles);
   return styles$4[styleKey];
 };
 
 const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
-class ChoiceInternal extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleLabelClick = event => {
+let ChoiceInternal = function (_React$Component) {
+  _inheritsLoose(ChoiceInternal, _React$Component);
+  function ChoiceInternal(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.handleLabelClick = event => {
       event.preventDefault();
     };
-
-    this.handleClick = () => {
+    _this.handleClick = () => {
       const {
         checked,
         onChange,
         variant
-      } = this.props;
-
+      } = _this.props;
       if (variant === "radio" && checked) {
         return;
       }
-
       onChange(!checked);
     };
+    return _this;
   }
-
-  getChoiceCoreComponent() {
+  var _proto = ChoiceInternal.prototype;
+  _proto.getChoiceCoreComponent = function getChoiceCoreComponent() {
     if (this.props.variant === "radio") {
       return RadioCore;
     } else {
       return CheckboxCore;
     }
-  }
-
-  getLabel() {
+  };
+  _proto.getLabel = function getLabel() {
     const {
       disabled,
       id,
@@ -368,9 +396,8 @@ class ChoiceInternal extends React.Component {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
-  }
-
-  getDescription(id) {
+  };
+  _proto.getDescription = function getDescription(id) {
     const {
       description
     } = this.props;
@@ -378,19 +405,17 @@ class ChoiceInternal extends React.Component {
       style: styles$3.description,
       id: id
     }, description);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      label,
-      description,
-      style,
-      className,
-      variant
-    } = _this$props,
-          coreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
-
+      {
+        label,
+        description,
+        style,
+        className,
+        variant
+      } = _this$props,
+      coreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     const ChoiceCore = this.getChoiceCoreComponent();
     const ClickableBehavior = getClickableBehavior();
     return React.createElement(UniqueIDProvider, {
@@ -417,9 +442,9 @@ class ChoiceInternal extends React.Component {
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
     });
-  }
-
-}
+  };
+  return ChoiceInternal;
+}(React.Component);
 ChoiceInternal.defaultProps = {
   checked: false,
   disabled: false,
@@ -445,54 +470,67 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-class Checkbox extends React.Component {
-  render() {
+let Checkbox = function (_React$Component) {
+  _inheritsLoose(Checkbox, _React$Component);
+  function Checkbox() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Checkbox.prototype;
+  _proto.render = function render() {
     return React.createElement(ChoiceInternal, _extends({
       variant: "checkbox"
     }, this.props));
-  }
-
-}
+  };
+  return Checkbox;
+}(React.Component);
 Checkbox.defaultProps = {
   disabled: false,
   error: false
 };
 
-class Radio extends React.Component {
-  render() {
+let Radio = function (_React$Component) {
+  _inheritsLoose(Radio, _React$Component);
+  function Radio() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Radio.prototype;
+  _proto.render = function render() {
     return React.createElement(ChoiceInternal, _extends({
       variant: "radio"
     }, this.props));
-  }
-
-}
+  };
+  return Radio;
+}(React.Component);
 Radio.defaultProps = {
   disabled: false,
   error: false
 };
 
 const _excluded$1 = ["value", "variant"];
-class Choice extends React.Component {
-  getChoiceComponent(variant) {
+let Choice = function (_React$Component) {
+  _inheritsLoose(Choice, _React$Component);
+  function Choice() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Choice.prototype;
+  _proto.getChoiceComponent = function getChoiceComponent(variant) {
     if (variant === "checkbox") {
       return Checkbox;
     } else {
       return Radio;
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      variant
-    } = _this$props,
-          remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-
+      {
+        variant
+      } = _this$props,
+      remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const ChoiceComponent = this.getChoiceComponent(variant);
     return React.createElement(ChoiceComponent, remainingProps);
-  }
-
-}
+  };
+  return Choice;
+}(React.Component);
 Choice.defaultProps = {
   checked: false,
   disabled: false,
@@ -523,13 +561,17 @@ const styles$2 = StyleSheet.create({
 
 const StyledFieldset$1 = addStyle("fieldset");
 const StyledLegend$1 = addStyle("legend");
-class CheckboxGroup extends React.Component {
-  handleChange(changedValue, originalCheckedState) {
+let CheckboxGroup = function (_React$Component) {
+  _inheritsLoose(CheckboxGroup, _React$Component);
+  function CheckboxGroup() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = CheckboxGroup.prototype;
+  _proto.handleChange = function handleChange(changedValue, originalCheckedState) {
     const {
       onChange,
       selectedValues
     } = this.props;
-
     if (originalCheckedState) {
       const index = selectedValues.indexOf(changedValue);
       const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
@@ -537,9 +579,8 @@ class CheckboxGroup extends React.Component {
     } else {
       onChange([].concat(selectedValues, [changedValue]));
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       children,
       label,
@@ -581,18 +622,22 @@ class CheckboxGroup extends React.Component {
         variant: "checkbox"
       });
     })));
-  }
-
-}
+  };
+  return CheckboxGroup;
+}(React.Component);
 
 const StyledFieldset = addStyle("fieldset");
 const StyledLegend = addStyle("legend");
-class RadioGroup extends React.Component {
-  handleChange(changedValue) {
-    this.props.onChange(changedValue);
+let RadioGroup = function (_React$Component) {
+  _inheritsLoose(RadioGroup, _React$Component);
+  function RadioGroup() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-  render() {
+  var _proto = RadioGroup.prototype;
+  _proto.handleChange = function handleChange(changedValue) {
+    this.props.onChange(changedValue);
+  };
+  _proto.render = function render() {
     const {
       children,
       label,
@@ -634,31 +679,30 @@ class RadioGroup extends React.Component {
         variant: "radio"
       });
     })));
-  }
-
-}
+  };
+  return RadioGroup;
+}(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.";
-
-class TextField extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
+let TextField = function (_React$Component) {
+  _inheritsLoose(TextField, _React$Component);
+  function TextField(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.state = {
       error: null,
       focused: false
     };
-
-    this.maybeValidate = newValue => {
+    _this.maybeValidate = newValue => {
       const {
         validate,
         onValidate,
         required
-      } = this.props;
-
+      } = _this.props;
       if (validate) {
         const maybeError = validate(newValue) || null;
-        this.setState({
+        _this.setState({
           error: maybeError
         }, () => {
           if (onValidate) {
@@ -668,7 +712,7 @@ class TextField extends React.Component {
       } else if (required) {
         const requiredString = typeof required === "string" ? required : defaultErrorMessage;
         const maybeError = newValue ? null : requiredString;
-        this.setState({
+        _this.setState({
           error: maybeError
         }, () => {
           if (onValidate) {
@@ -677,21 +721,19 @@ class TextField extends React.Component {
         });
       }
     };
-
-    this.handleChange = event => {
+    _this.handleChange = event => {
       const {
         onChange
-      } = this.props;
+      } = _this.props;
       const newValue = event.target.value;
-      this.maybeValidate(newValue);
+      _this.maybeValidate(newValue);
       onChange(newValue);
     };
-
-    this.handleFocus = event => {
+    _this.handleFocus = event => {
       const {
         onFocus
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         focused: true
       }, () => {
         if (onFocus) {
@@ -699,12 +741,11 @@ class TextField extends React.Component {
         }
       });
     };
-
-    this.handleBlur = event => {
+    _this.handleBlur = event => {
       const {
         onBlur
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         focused: false
       }, () => {
         if (onBlur) {
@@ -712,36 +753,34 @@ class TextField extends React.Component {
         }
       });
     };
-
     if (props.validate && props.value !== "") {
-      this.state.error = props.validate(props.value) || null;
+      _this.state.error = props.validate(props.value) || null;
     }
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = TextField.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (this.props.value !== "") {
       this.maybeValidate(this.props.value);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      id,
-      type,
-      value,
-      disabled,
-      onKeyDown,
-      placeholder,
-      light,
-      style,
-      testId,
-      readOnly,
-      autoComplete,
-      forwardedRef
-    } = _this$props,
-          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
+      {
+        id,
+        type,
+        value,
+        disabled,
+        onKeyDown,
+        placeholder,
+        light,
+        style,
+        testId,
+        readOnly,
+        autoComplete,
+        forwardedRef
+      } = _this$props,
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     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,
@@ -758,10 +797,9 @@ class TextField extends React.Component {
       autoComplete: autoComplete,
       ref: forwardedRef
     }, otherProps));
-  }
-
-}
-
+  };
+  return TextField;
+}(React.Component);
 TextField.defaultProps = {
   type: "text",
   disabled: false,
@@ -822,8 +860,13 @@ var TextField$1 = React.forwardRef((props, ref) => React.createElement(TextField
 })));
 
 const StyledSpan = addStyle("span");
-class FieldHeading extends React.Component {
-  renderLabel() {
+let FieldHeading = function (_React$Component) {
+  _inheritsLoose(FieldHeading, _React$Component);
+  function FieldHeading() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = FieldHeading.prototype;
+  _proto.renderLabel = function renderLabel() {
     const {
       label,
       id,
@@ -842,37 +885,31 @@ class FieldHeading extends React.Component {
     }, label, required && requiredIcon), React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
-  }
-
-  maybeRenderDescription() {
+  };
+  _proto.maybeRenderDescription = function maybeRenderDescription() {
     const {
       description,
       testId
     } = this.props;
-
     if (!description) {
       return null;
     }
-
     return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
       style: styles.description,
       testId: testId && `${testId}-description`
     }, description), React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
-  }
-
-  maybeRenderError() {
+  };
+  _proto.maybeRenderError = function maybeRenderError() {
     const {
       error,
       id,
       testId
     } = this.props;
-
     if (!error) {
       return null;
     }
-
     return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: Spacing.small_12
     }), React.createElement(LabelSmall, {
@@ -881,9 +918,8 @@ class FieldHeading extends React.Component {
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
     }, error));
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       field,
       style
@@ -893,9 +929,9 @@ class FieldHeading extends React.Component {
     }, this.renderLabel(), this.maybeRenderDescription(), React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), field, this.maybeRenderError());
-  }
-
-}
+  };
+  return FieldHeading;
+}(React.Component);
 const styles = StyleSheet.create({
   label: {
     color: Color.offBlack
@@ -911,15 +947,16 @@ const styles = StyleSheet.create({
   }
 });
 
-class LabeledTextField extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleValidate = errorMessage => {
+let LabeledTextField = function (_React$Component) {
+  _inheritsLoose(LabeledTextField, _React$Component);
+  function LabeledTextField(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.handleValidate = errorMessage => {
       const {
         onValidate
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         error: errorMessage
       }, () => {
         if (onValidate) {
@@ -927,12 +964,11 @@ class LabeledTextField extends React.Component {
         }
       });
     };
-
-    this.handleFocus = event => {
+    _this.handleFocus = event => {
       const {
         onFocus
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         focused: true
       }, () => {
         if (onFocus) {
@@ -940,12 +976,11 @@ class LabeledTextField extends React.Component {
         }
       });
     };
-
-    this.handleBlur = event => {
+    _this.handleBlur = event => {
       const {
         onBlur
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         focused: false
       }, () => {
         if (onBlur) {
@@ -953,14 +988,14 @@ class LabeledTextField extends React.Component {
         }
       });
     };
-
-    this.state = {
+    _this.state = {
       error: null,
       focused: false
     };
+    return _this;
   }
-
-  render() {
+  var _proto = LabeledTextField.prototype;
+  _proto.render = function render() {
     const {
       id,
       type,
@@ -1015,10 +1050,9 @@ class LabeledTextField extends React.Component {
       required: !!required,
       error: !this.state.focused && this.state.error || ""
     }));
-  }
-
-}
-
+  };
+  return LabeledTextField;
+}(React.Component);
 LabeledTextField.defaultProps = {
   type: "text",
   disabled: false,