@khanacademy/wonder-blocks-form 4.7.5 → 4.8.0

package/dist/es/index.js

@@ -2,15 +2,15 @@ import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { StyleSheet } from 'aphrodite';
-import { addStyle, UniqueIDProvider, View, IDProvider } from '@khanacademy/wonder-blocks-core';
+import { addStyle, UniqueIDProvider, View, IDProvider, useUniqueIdWithMock, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { spacing, mix, color } from '@khanacademy/wonder-blocks-tokens';
-import { LabelMedium, LabelSmall, styles as styles$6 } from '@khanacademy/wonder-blocks-typography';
+import { spacing, mix, color, border } from '@khanacademy/wonder-blocks-tokens';
+import { LabelMedium, LabelSmall, styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
 import minusIcon from '@phosphor-icons/core/bold/minus-bold.svg';
 
-const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$7 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 function mapCheckedToAriaChecked(value) {
   switch (value) {
     case true:
@@ -42,7 +42,7 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$7);
   const innerRef = React.useRef(null);
   React.useEffect(() => {
     if (innerRef.current != null) {
@@ -131,11 +131,11 @@ const colors$1 = {
     active: activeRed
   }
 };
-const styles$5 = {};
+const styles$6 = {};
 const _generateStyles$1 = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-  if (styles$5[styleKey]) {
-    return styles$5[styleKey];
+  if (styles$6[styleKey]) {
+    return styles$6[styleKey];
   }
   const palette = error ? colors$1.error : colors$1.default;
   let newStyles = {};
@@ -179,11 +179,11 @@ const _generateStyles$1 = (checked, error) => {
       }
     };
   }
-  styles$5[styleKey] = StyleSheet.create(newStyles);
-  return styles$5[styleKey];
+  styles$6[styleKey] = StyleSheet.create(newStyles);
+  return styles$6[styleKey];
 };
 
-const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 const {
   blue,
   red,
@@ -206,7 +206,7 @@ const RadioCore = React.forwardRef(function RadioCore(props, ref) {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$5);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$6);
   const stateStyles = _generateStyles(checked, error);
   const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
   return React.createElement(React.Fragment, null, React.createElement(StyledInput$1, _extends({}, sharedProps, {
@@ -273,11 +273,11 @@ const colors = {
     active: color.activeRed
   }
 };
-const styles$4 = {};
+const styles$5 = {};
 const _generateStyles = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-  if (styles$4[styleKey]) {
-    return styles$4[styleKey];
+  if (styles$5[styleKey]) {
+    return styles$5[styleKey];
   }
   const palette = error ? colors.error : colors.default;
   let newStyles = {};
@@ -322,11 +322,11 @@ const _generateStyles = (checked, error) => {
       }
     };
   }
-  styles$4[styleKey] = StyleSheet.create(newStyles);
-  return styles$4[styleKey];
+  styles$5[styleKey] = StyleSheet.create(newStyles);
+  return styles$5[styleKey];
 };
 
-const _excluded$4 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
+const _excluded$5 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
 const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
   const {
       checked,
@@ -340,7 +340,7 @@ const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
       className,
       variant
     } = props,
-    coreProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded$5);
   const handleClick = () => {
     if (variant === "radio" && checked) {
       return;
@@ -356,14 +356,14 @@ const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
   };
   const getLabel = id => {
     return React.createElement(LabelMedium, {
-      style: [styles$3.label, disabled && styles$3.disabledLabel]
+      style: [styles$4.label, disabled && styles$4.disabledLabel]
     }, React.createElement("label", {
       htmlFor: id
     }, label));
   };
   const getDescription = id => {
     return React.createElement(LabelSmall, {
-      style: styles$3.description,
+      style: styles$4.description,
       id: id
     }, description);
   };
@@ -378,7 +378,7 @@ const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
       style: style,
       className: className
     }, React.createElement(View, {
-      style: styles$3.wrapper,
+      style: styles$4.wrapper,
       tabIndex: -1
     }, React.createElement(ChoiceCore, _extends({}, coreProps, {
       id: uniqueId,
@@ -393,7 +393,7 @@ const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
     }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
   });
 });
-const styles$3 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   wrapper: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -425,13 +425,13 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
   }));
 });
 
-const _excluded$3 = ["disabled", "error"];
+const _excluded$4 = ["disabled", "error"];
 const Radio = React.forwardRef(function Radio(props, ref) {
   const {
       disabled = false,
       error = false
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
   return React.createElement(ChoiceInternal, _extends({}, otherProps, {
     variant: "radio",
     disabled: disabled,
@@ -440,7 +440,7 @@ const Radio = React.forwardRef(function Radio(props, ref) {
   }));
 });
 
-const _excluded$2 = ["checked", "disabled", "onChange", "value", "variant"];
+const _excluded$3 = ["checked", "disabled", "onChange", "value", "variant"];
 const Choice = React.forwardRef(function Choice(props, ref) {
   const {
       checked = false,
@@ -448,7 +448,7 @@ const Choice = React.forwardRef(function Choice(props, ref) {
       onChange = () => {},
       variant
     } = props,
-    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$3);
   const getChoiceComponent = variant => {
     if (variant === "checkbox") {
       return Checkbox;
@@ -465,7 +465,7 @@ const Choice = React.forwardRef(function Choice(props, ref) {
   }));
 });
 
-const styles$2 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   fieldset: {
     border: "none",
     padding: 0,
@@ -513,16 +513,16 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(props, ref) {
   const allChildren = React.Children.toArray(children).filter(Boolean);
   return React.createElement(StyledFieldset$1, {
     "data-testid": testId,
-    style: styles$2.fieldset,
+    style: styles$3.fieldset,
     ref: ref
   }, React.createElement(View, {
     style: style
   }, label && React.createElement(StyledLegend$1, {
-    style: styles$2.legend
+    style: styles$3.legend
   }, React.createElement(LabelMedium, null, label)), description && React.createElement(LabelSmall, {
-    style: styles$2.description
+    style: styles$3.description
   }, description), errorMessage && React.createElement(LabelSmall, {
-    style: styles$2.error
+    style: styles$3.error
   }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
     size: spacing.small_12
   }), allChildren.map((child, index) => {
@@ -538,7 +538,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(props, ref) {
       id: `${groupName}-${value}`,
       key: value,
       onChange: () => handleChange(value, checked),
-      style: [index > 0 && styles$2.defaultLineGap, style],
+      style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "checkbox"
     });
   })));
@@ -561,16 +561,16 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   const allChildren = React.Children.toArray(children).filter(Boolean);
   return React.createElement(StyledFieldset, {
     "data-testid": testId,
-    style: styles$2.fieldset,
+    style: styles$3.fieldset,
     ref: ref
   }, React.createElement(View, {
     style: style
   }, label && React.createElement(StyledLegend, {
-    style: styles$2.legend
+    style: styles$3.legend
   }, React.createElement(LabelMedium, null, label)), description && React.createElement(LabelSmall, {
-    style: styles$2.description
+    style: styles$3.description
   }, description), errorMessage && React.createElement(LabelSmall, {
-    style: styles$2.error
+    style: styles$3.error
   }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
     size: spacing.small_12
   }), allChildren.map((child, index) => {
@@ -586,14 +586,14 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
       id: `${groupName}-${value}`,
       key: value,
       onChange: () => onChange(value),
-      style: [index > 0 && styles$2.defaultLineGap, style],
+      style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "radio"
     });
   })));
 });
 
-const _excluded$1 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
-const defaultErrorMessage = "This field is required.";
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const defaultErrorMessage$1 = "This field is required.";
 const StyledInput = addStyle("input");
 class TextField extends React.Component {
   constructor(props) {
@@ -618,7 +618,7 @@ class TextField extends React.Component {
           }
         });
       } else if (required) {
-        const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+        const requiredString = typeof required === "string" ? required : defaultErrorMessage$1;
         const maybeError = newValue ? null : requiredString;
         this.setState({
           error: maybeError
@@ -688,12 +688,12 @@ class TextField extends React.Component {
         autoComplete,
         forwardedRef
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     return React.createElement(IDProvider, {
       id: id,
       scope: "text-field"
     }, uniqueId => React.createElement(StyledInput, _extends({
-      style: [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], !!this.state.error && styles$1.error, style && style],
+      style: [styles$2.input, styles$7.LabelMedium, styles$2.default, disabled ? styles$2.disabled : this.state.focused ? [styles$2.focused, light && styles$2.defaultLight] : !!this.state.error && [styles$2.error, light && styles$2.errorLight], !!this.state.error && styles$2.error, style && style],
       id: uniqueId,
       type: type,
       placeholder: placeholder,
@@ -719,7 +719,7 @@ TextField.defaultProps = {
   disabled: false,
   light: false
 };
-const styles$1 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
@@ -783,11 +783,11 @@ class FieldHeading extends React.Component {
       testId
     } = this.props;
     const requiredIcon = React.createElement(StyledSpan, {
-      style: styles.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
-      style: styles.label,
+      style: styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -804,7 +804,7 @@ class FieldHeading extends React.Component {
       return null;
     }
     return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
-      style: styles.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React.createElement(Strut, {
       size: spacing.xxxSmall_4
@@ -822,7 +822,7 @@ class FieldHeading extends React.Component {
     return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: spacing.small_12
     }), React.createElement(LabelSmall, {
-      style: styles.error,
+      style: styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -840,7 +840,7 @@ class FieldHeading extends React.Component {
     }), field, this.maybeRenderError());
   }
 }
-const styles = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   label: {
     color: color.offBlack
   },
@@ -855,7 +855,7 @@ const styles = StyleSheet.create({
   }
 });
 
-const _excluded = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React.Component {
   constructor(props) {
     super(props);
@@ -922,7 +922,7 @@ class LabeledTextField extends React.Component {
         forwardedRef,
         ariaDescribedby
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     return React.createElement(IDProvider, {
       id: id,
       scope: "labeled-text-field"
@@ -967,4 +967,204 @@ var labeledTextField = React.forwardRef((props, ref) => React.createElement(Labe
   forwardedRef: ref
 })));
 
-export { Checkbox, CheckboxGroup, Choice, labeledTextField as LabeledTextField, RadioGroup, TextField$1 as TextField };
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light"];
+const defaultErrorMessage = "This field is required.";
+const StyledTextArea = addStyle("textarea");
+const TextArea = React.forwardRef(function TextArea(props, ref) {
+  const {
+      onChange,
+      value,
+      placeholder,
+      disabled,
+      id,
+      testId,
+      style,
+      readOnly,
+      autoComplete,
+      name,
+      className,
+      autoFocus,
+      rows,
+      spellCheck,
+      wrap,
+      minLength,
+      maxLength,
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      validate,
+      onValidate,
+      required,
+      resizeType,
+      light
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const [error, setError] = React.useState(null);
+  const ids = useUniqueIdWithMock("text-area");
+  const uniqueId = id != null ? id : ids.get("id");
+  const handleChange = event => {
+    const newValue = event.target.value;
+    onChange(newValue);
+    handleValidation(newValue);
+  };
+  const handleValidation = newValue => {
+    if (validate) {
+      const error = validate(newValue) || null;
+      setError(error);
+      if (onValidate) {
+        onValidate(error);
+      }
+    } else if (required) {
+      const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+      const error = newValue ? null : requiredString;
+      setError(error);
+      if (onValidate) {
+        onValidate(error);
+      }
+    }
+  };
+  useOnMountEffect(() => {
+    if (value !== "") {
+      handleValidation(value);
+    }
+  });
+  const getStyles = () => {
+    const baseStyles = [styles.textarea, styles$7.LabelMedium, resizeType && resizeStyles[resizeType]];
+    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, !!error && styles.error];
+    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, !!error && styles.lightError];
+    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
+  };
+  return React.createElement(View, {
+    style: {
+      width: "100%"
+    }
+  }, React.createElement(StyledTextArea, _extends({
+    id: uniqueId,
+    "data-testid": testId,
+    ref: ref,
+    className: className,
+    style: [...getStyles(), style],
+    value: value,
+    onChange: handleChange,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    autoComplete: autoComplete,
+    name: name,
+    autoFocus: autoFocus,
+    rows: rows,
+    spellCheck: spellCheck,
+    wrap: wrap,
+    minLength: minLength,
+    maxLength: maxLength,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    required: !!required
+  }, otherProps, {
+    "aria-invalid": !!error
+  })));
+});
+const styles = StyleSheet.create({
+  textarea: {
+    borderRadius: border.radius.medium_4,
+    boxSizing: "border-box",
+    padding: `10px ${spacing.medium_16}px`,
+    minHeight: "1em"
+  },
+  default: {
+    background: color.white,
+    border: `1px solid ${color.offBlack50}`,
+    color: color.offBlack,
+    "::placeholder": {
+      color: color.offBlack64
+    }
+  },
+  defaultFocus: {
+    ":focus-visible": {
+      borderColor: color.blue,
+      outline: `1px solid ${color.blue}`,
+      outlineOffset: 0
+    }
+  },
+  disabled: {
+    background: color.offWhite,
+    border: `1px solid ${color.offBlack16}`,
+    color: color.offBlack64,
+    "::placeholder": {
+      color: color.offBlack64
+    },
+    cursor: "not-allowed"
+  },
+  error: {
+    background: color.fadedRed8,
+    border: `1px solid ${color.red}`,
+    color: color.offBlack,
+    "::placeholder": {
+      color: color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: color.red,
+      borderColor: color.red
+    }
+  },
+  light: {
+    background: color.white,
+    border: `1px solid ${color.offBlack16}`,
+    color: color.offBlack,
+    "::placeholder": {
+      color: color.offBlack64
+    }
+  },
+  lightFocus: {
+    ":focus-visible": {
+      outline: `1px solid ${color.blue}`,
+      outlineOffset: 0,
+      borderColor: color.blue,
+      boxShadow: `0px 0px 0px 2px ${color.blue}, 0px 0px 0px 3px ${color.white}`
+    }
+  },
+  lightDisabled: {
+    backgroundColor: "transparent",
+    border: `1px solid ${color.white32}`,
+    color: color.white64,
+    "::placeholder": {
+      color: color.white64
+    },
+    cursor: "not-allowed"
+  },
+  lightError: {
+    background: color.fadedRed8,
+    border: `1px solid ${color.red}`,
+    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`,
+    color: color.offBlack,
+    "::placeholder": {
+      color: color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: color.red,
+      borderColor: color.red,
+      boxShadow: `0px 0px 0px 2px ${color.red}, 0px 0px 0px 3px ${color.white}`
+    }
+  }
+});
+const resizeStyles = StyleSheet.create({
+  both: {
+    resize: "both"
+  },
+  none: {
+    resize: "none"
+  },
+  horizontal: {
+    resize: "horizontal"
+  },
+  vertical: {
+    resize: "vertical"
+  }
+});
+
+export { Checkbox, CheckboxGroup, Choice, labeledTextField as LabeledTextField, RadioGroup, TextArea, TextField$1 as TextField };

package/dist/index.d.ts

@@ -4,4 +4,5 @@ import CheckboxGroup from "./components/checkbox-group";
 import RadioGroup from "./components/radio-group";
 import TextField from "./components/text-field";
 import LabeledTextField from "./components/labeled-text-field";
-export { Checkbox, Choice, CheckboxGroup, RadioGroup, TextField, LabeledTextField, };
+import TextArea from "./components/text-area";
+export { Checkbox, Choice, CheckboxGroup, RadioGroup, TextField, LabeledTextField, TextArea, };