@khanacademy/wonder-blocks-form 4.2.2 → 4.3.0

package/dist/index.js

@@ -91,61 +91,55 @@ const checkPath = {
 const indeterminatePath = {
   small: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z"
 };
-class CheckboxCore extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.inputRef = React__namespace.createRef();
-    this.handleChange = () => {
-      return;
-    };
-  }
-  componentDidMount() {
-    if (this.props.checked == null && this.inputRef.current != null) {
-      this.inputRef.current.indeterminate = true;
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (this.inputRef.current != null) {
-      this.inputRef.current.indeterminate = this.props.checked == null;
+const CheckboxCore = React__namespace.forwardRef((props, ref) => {
+  const {
+      checked,
+      disabled,
+      error,
+      groupName,
+      id,
+      testId
+    } = props,
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const innerRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    if (innerRef.current != null) {
+      innerRef.current.indeterminate = checked == null;
     }
-  }
-  render() {
-    const _this$props = this.props,
-      {
-        checked,
-        disabled,
-        error,
-        groupName,
-        id,
-        testId
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
-    const stateStyles = _generateStyles$1(checked, error);
-    const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
-    const props = {
-      "data-test-id": testId
-    };
-    const checkboxIcon = React__namespace.createElement(Icon__default["default"], {
-      color: disabled ? offBlack32$1 : white$1,
-      icon: checked ? checkPath : indeterminatePath,
-      size: "small",
-      style: sharedStyles$1.checkboxIcon
-    });
-    const ariaChecked = mapCheckedToAriaChecked(checked);
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$2, _extends({}, sharedProps, {
-      ref: this.inputRef,
-      type: "checkbox",
-      "aria-checked": ariaChecked,
-      "aria-invalid": error,
-      checked: checked != null ? checked : undefined,
-      disabled: disabled,
-      id: id,
-      name: groupName,
-      onChange: this.handleChange,
-      style: defaultStyle
-    }, props)), checked || checked == null ? checkboxIcon : React__namespace.createElement(React__namespace.Fragment, null));
-  }
-}
+  }, [checked, innerRef]);
+  const handleChange = () => {
+    return;
+  };
+  const stateStyles = _generateStyles$1(checked, error);
+  const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
+  const checkboxIcon = React__namespace.createElement(Icon__default["default"], {
+    color: disabled ? offBlack32$1 : white$1,
+    icon: checked ? checkPath : indeterminatePath,
+    size: "small",
+    style: sharedStyles$1.checkboxIcon
+  });
+  const ariaChecked = mapCheckedToAriaChecked(checked);
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$2, _extends({}, sharedProps, {
+    ref: node => {
+      innerRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref != null) {
+        ref.current = node;
+      }
+    },
+    type: "checkbox",
+    "aria-checked": ariaChecked,
+    "aria-invalid": error,
+    checked: checked != null ? checked : undefined,
+    disabled: disabled,
+    id: id,
+    name: groupName,
+    onChange: handleChange,
+    style: defaultStyle,
+    "data-test-id": testId
+  })), checked || checked == null ? checkboxIcon : React__namespace.createElement(React__namespace.Fragment, null));
+});
 const size$1 = 16;
 const sharedStyles$1 = aphrodite.StyleSheet.create({
   inputReset: {
@@ -255,43 +249,36 @@ const {
   offBlack50
 } = Color__default["default"];
 const StyledInput$1 = wonderBlocksCore.addStyle("input");
-class RadioCore extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.handleChange = () => {
-      return;
-    };
-  }
-  render() {
-    const _this$props = this.props,
-      {
-        checked,
-        disabled,
-        error,
-        groupName,
-        id,
-        testId
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
-    const stateStyles = _generateStyles(checked, error);
-    const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
-    const props = {
-      "data-test-id": testId
-    };
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends({}, sharedProps, {
-      type: "radio",
-      "aria-invalid": error,
-      checked: checked != null ? checked : undefined,
-      disabled: disabled,
-      id: id,
-      name: groupName,
-      onChange: this.handleChange,
-      style: defaultStyle
-    }, props)), disabled && checked && React__namespace.createElement("span", {
-      style: disabledChecked
-    }));
-  }
-}
+const RadioCore = React__namespace.forwardRef((props, ref) => {
+  const handleChange = () => {
+    return;
+  };
+  const {
+      checked,
+      disabled,
+      error,
+      groupName,
+      id,
+      testId
+    } = props,
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const stateStyles = _generateStyles(checked, error);
+  const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends({}, sharedProps, {
+    type: "radio",
+    "aria-invalid": error,
+    checked: checked != null ? checked : undefined,
+    disabled: disabled,
+    id: id,
+    name: groupName,
+    onChange: handleChange,
+    style: defaultStyle,
+    "data-test-id": testId,
+    ref: ref
+  })), disabled && checked && React__namespace.createElement("span", {
+    style: disabledChecked
+  }));
+});
 const size = 16;
 const disabledChecked = {
   position: "absolute",
@@ -396,86 +383,70 @@ const _generateStyles = (checked, error) => {
   return styles$4[styleKey];
 };
 
-const _excluded$2 = ["label", "description", "id", "onChange", "style", "className", "variant"];
-class ChoiceInternal extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.handleClick = () => {
-      const {
-        checked,
-        onChange,
-        variant
-      } = this.props;
-      if (variant === "radio" && checked) {
-        return;
-      }
-      onChange(!checked);
-    };
-  }
-  getChoiceCoreComponent() {
-    if (this.props.variant === "radio") {
+const ChoiceInternal = React__namespace.forwardRef((props, ref) => {
+  const {
+    checked,
+    description,
+    disabled = false,
+    error = false,
+    id,
+    label,
+    onChange,
+    style,
+    className,
+    variant
+  } = props;
+  const handleClick = () => {
+    if (variant === "radio" && checked) {
+      return;
+    }
+    onChange(!checked);
+  };
+  const getChoiceCoreComponent = () => {
+    if (variant === "radio") {
       return RadioCore;
     } else {
       return CheckboxCore;
     }
-  }
-  getLabel(id) {
-    const {
-      disabled,
-      label
-    } = this.props;
+  };
+  const getLabel = id => {
     return React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       style: [styles$3.label, disabled && styles$3.disabledLabel]
     }, React__namespace.createElement("label", {
       htmlFor: id
     }, label));
-  }
-  getDescription(id) {
-    const {
-      description
-    } = this.props;
+  };
+  const getDescription = id => {
     return React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
       style: styles$3.description,
       id: id
     }, description);
-  }
-  render() {
-    const _this$props = this.props,
-      {
-        label,
-        description,
-        id,
-        style,
-        className
-      } = _this$props,
-      coreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
-    const ChoiceCore = this.getChoiceCoreComponent();
-    return React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
-      mockOnFirstRender: true,
-      scope: "choice"
-    }, ids => {
-      const uniqueId = id || ids.get("main");
-      const descriptionId = description ? ids.get("description") : undefined;
-      return React__namespace.createElement(wonderBlocksCore.View, {
-        style: style,
-        className: className
-      }, React__namespace.createElement(wonderBlocksCore.View, {
-        style: styles$3.wrapper,
-        tabIndex: -1
-      }, React__namespace.createElement(ChoiceCore, _extends({}, coreProps, {
-        id: uniqueId,
-        "aria-describedby": descriptionId,
-        onClick: this.handleClick
-      })), React__namespace.createElement(wonderBlocksLayout.Strut, {
-        size: Spacing__default["default"].xSmall_8
-      }), label && this.getLabel(uniqueId)), description && this.getDescription(descriptionId));
-    });
-  }
-}
-ChoiceInternal.defaultProps = {
-  disabled: false,
-  error: false
-};
+  };
+  const ChoiceCore = getChoiceCoreComponent();
+  return React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
+    mockOnFirstRender: true,
+    scope: "choice"
+  }, ids => {
+    const uniqueId = id || ids.get("main");
+    const descriptionId = description ? ids.get("description") : undefined;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: style,
+      className: className
+    }, React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$3.wrapper,
+      tabIndex: -1
+    }, React__namespace.createElement(ChoiceCore, _extends({}, props, {
+      id: uniqueId,
+      "aria-describedby": descriptionId,
+      onClick: handleClick,
+      disabled: disabled,
+      error: error,
+      ref: ref
+    })), React__namespace.createElement(wonderBlocksLayout.Strut, {
+      size: Spacing__default["default"].xSmall_8
+    }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
+  });
+});
 const styles$3 = aphrodite.StyleSheet.create({
   wrapper: {
     flexDirection: "row",
@@ -495,54 +466,58 @@ const styles$3 = aphrodite.StyleSheet.create({
   }
 });
 
-class Checkbox extends React__namespace.Component {
-  render() {
-    return React__namespace.createElement(ChoiceInternal, _extends({
-      variant: "checkbox"
-    }, this.props));
-  }
-}
-Checkbox.defaultProps = {
-  disabled: false,
-  error: false
-};
+const Checkbox = React__namespace.forwardRef((props, ref) => {
+  const {
+    disabled = false,
+    error = false
+  } = props;
+  return React__namespace.createElement(ChoiceInternal, _extends({}, props, {
+    variant: "checkbox",
+    disabled: disabled,
+    error: error,
+    ref: ref
+  }));
+});
 
-class Radio extends React__namespace.Component {
-  render() {
-    return React__namespace.createElement(ChoiceInternal, _extends({
-      variant: "radio"
-    }, this.props));
-  }
-}
-Radio.defaultProps = {
-  disabled: false,
-  error: false
-};
+const _excluded$2 = ["disabled", "error"];
+const Radio = React__namespace.forwardRef((props, ref) => {
+  const {
+      disabled = false,
+      error = false
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+  return React__namespace.createElement(ChoiceInternal, _extends({}, otherProps, {
+    variant: "radio",
+    disabled: disabled,
+    error: error,
+    ref: ref
+  }));
+});
 
-const _excluded$1 = ["value", "variant"];
-class Choice extends React__namespace.Component {
-  getChoiceComponent(variant) {
+const _excluded$1 = ["checked", "disabled", "onChange", "value", "variant"];
+const Choice = React__namespace.forwardRef((props, ref) => {
+  const {
+      checked = false,
+      disabled = false,
+      onChange = () => {},
+      variant
+    } = props,
+    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const getChoiceComponent = variant => {
     if (variant === "checkbox") {
       return Checkbox;
     } else {
       return Radio;
     }
-  }
-  render() {
-    const _this$props = this.props,
-      {
-        variant
-      } = _this$props,
-      remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-    const ChoiceComponent = this.getChoiceComponent(variant);
-    return React__namespace.createElement(ChoiceComponent, remainingProps);
-  }
-}
-Choice.defaultProps = {
-  checked: false,
-  disabled: false,
-  onChange: () => {}
-};
+  };
+  const ChoiceComponent = getChoiceComponent(variant);
+  return React__namespace.createElement(ChoiceComponent, _extends({}, remainingProps, {
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange,
+    ref: ref
+  }));
+});
 
 const styles$2 = aphrodite.StyleSheet.create({
   fieldset: {
@@ -568,12 +543,19 @@ const styles$2 = aphrodite.StyleSheet.create({
 
 const StyledFieldset$1 = wonderBlocksCore.addStyle("fieldset");
 const StyledLegend$1 = wonderBlocksCore.addStyle("legend");
-class CheckboxGroup extends React__namespace.Component {
-  handleChange(changedValue, originalCheckedState) {
-    const {
-      onChange,
-      selectedValues
-    } = this.props;
+const CheckboxGroup = React__namespace.forwardRef((props, ref) => {
+  const {
+    children,
+    label,
+    description,
+    errorMessage,
+    groupName,
+    onChange,
+    selectedValues,
+    style,
+    testId
+  } = props;
+  const handleChange = (changedValue, originalCheckedState) => {
     if (originalCheckedState) {
       const index = selectedValues.indexOf(changedValue);
       const updatedSelection = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
@@ -581,102 +563,88 @@ class CheckboxGroup extends React__namespace.Component {
     } else {
       onChange([...selectedValues, changedValue]);
     }
-  }
-  render() {
+  };
+  const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
+  return React__namespace.createElement(StyledFieldset$1, {
+    "data-test-id": testId,
+    style: styles$2.fieldset,
+    ref: ref
+  }, React__namespace.createElement(wonderBlocksCore.View, {
+    style: style
+  }, label && React__namespace.createElement(StyledLegend$1, {
+    style: styles$2.legend
+  }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: styles$2.description
+  }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: styles$2.error
+  }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
+    size: Spacing__default["default"].small_12
+  }), allChildren.map((child, index) => {
     const {
-      children,
-      label,
-      description,
-      errorMessage,
-      groupName,
-      selectedValues,
       style,
-      testId
-    } = this.props;
-    const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
-    return React__namespace.createElement(StyledFieldset$1, {
-      "data-test-id": testId,
-      style: styles$2.fieldset
-    }, React__namespace.createElement(wonderBlocksCore.View, {
-      style: style
-    }, label && React__namespace.createElement(StyledLegend$1, {
-      style: styles$2.legend
-    }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles$2.description
-    }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles$2.error
-    }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].small_12
-    }), allChildren.map((child, index) => {
-      const {
-        style,
-        value
-      } = child.props;
-      const checked = selectedValues.includes(value);
-      return React__namespace.cloneElement(child, {
-        checked: checked,
-        error: !!errorMessage,
-        groupName: groupName,
-        id: `${groupName}-${value}`,
-        key: value,
-        onChange: () => this.handleChange(value, checked),
-        style: [index > 0 && styles$2.defaultLineGap, style],
-        variant: "checkbox"
-      });
-    })));
-  }
-}
+      value
+    } = child.props;
+    const checked = selectedValues.includes(value);
+    return React__namespace.cloneElement(child, {
+      checked: checked,
+      error: !!errorMessage,
+      groupName: groupName,
+      id: `${groupName}-${value}`,
+      key: value,
+      onChange: () => handleChange(value, checked),
+      style: [index > 0 && styles$2.defaultLineGap, style],
+      variant: "checkbox"
+    });
+  })));
+});
 
 const StyledFieldset = wonderBlocksCore.addStyle("fieldset");
 const StyledLegend = wonderBlocksCore.addStyle("legend");
-class RadioGroup extends React__namespace.Component {
-  handleChange(changedValue) {
-    this.props.onChange(changedValue);
-  }
-  render() {
+const RadioGroup = React__namespace.forwardRef((props, ref) => {
+  const {
+    children,
+    label,
+    description,
+    errorMessage,
+    groupName,
+    onChange,
+    selectedValue,
+    style,
+    testId
+  } = props;
+  const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
+  return React__namespace.createElement(StyledFieldset, {
+    "data-test-id": testId,
+    style: styles$2.fieldset,
+    ref: ref
+  }, React__namespace.createElement(wonderBlocksCore.View, {
+    style: style
+  }, label && React__namespace.createElement(StyledLegend, {
+    style: styles$2.legend
+  }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: styles$2.description
+  }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: styles$2.error
+  }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
+    size: Spacing__default["default"].small_12
+  }), allChildren.map((child, index) => {
     const {
-      children,
-      label,
-      description,
-      errorMessage,
-      groupName,
-      selectedValue,
       style,
-      testId
-    } = this.props;
-    const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
-    return React__namespace.createElement(StyledFieldset, {
-      "data-test-id": testId,
-      style: styles$2.fieldset
-    }, React__namespace.createElement(wonderBlocksCore.View, {
-      style: style
-    }, label && React__namespace.createElement(StyledLegend, {
-      style: styles$2.legend
-    }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles$2.description
-    }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles$2.error
-    }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].small_12
-    }), allChildren.map((child, index) => {
-      const {
-        style,
-        value
-      } = child.props;
-      const checked = selectedValue === value;
-      return React__namespace.cloneElement(child, {
-        checked: checked,
-        error: !!errorMessage,
-        groupName: groupName,
-        id: `${groupName}-${value}`,
-        key: value,
-        onChange: () => this.handleChange(value),
-        style: [index > 0 && styles$2.defaultLineGap, style],
-        variant: "radio"
-      });
-    })));
-  }
-}
+      value
+    } = child.props;
+    const checked = selectedValue === value;
+    return React__namespace.cloneElement(child, {
+      checked: checked,
+      error: !!errorMessage,
+      groupName: groupName,
+      id: `${groupName}-${value}`,
+      key: value,
+      onChange: () => onChange(value),
+      style: [index > 0 && styles$2.defaultLineGap, style],
+      variant: "radio"
+    });
+  })));
+});
 
 const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";

package/dist/util/types.d.ts

@@ -34,7 +34,7 @@ export type ChoiceComponentProps = ChoiceCoreProps & {
 };
 export type SharedGroupProps = {
     /** Children should be Choice components. */
-    children: Choice;
+    children: typeof Choice;
     /** Group name for this checkbox or radio group. Should be unique for all
      * such groups displayed on a page. */
     groupName: string;

package/dist/util/types.js.flow

@@ -82,7 +82,7 @@ export type SharedGroupProps = {|
   /**
    * Children should be Choice components.
    */
-  children: Choice,
+  children: typeof Choice,
 
   /**
    * Group name for this checkbox or radio group. Should be unique for all