@khanacademy/wonder-blocks-form 4.9.1 → 4.9.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.9.3
+
+### Patch Changes
+
+-   02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
+-   Updated dependencies [02a1b298]
+    -   @khanacademy/wonder-blocks-clickable@4.2.8
+    -   @khanacademy/wonder-blocks-core@7.0.1
+    -   @khanacademy/wonder-blocks-icon@4.1.5
+    -   @khanacademy/wonder-blocks-layout@2.2.1
+    -   @khanacademy/wonder-blocks-tokens@2.0.1
+    -   @khanacademy/wonder-blocks-typography@2.1.16
+
+## 4.9.2
+
+### Patch Changes
+
+-   9ec147a9: Revert updated `TextField` state styling
+
 ## 4.9.1
 
 ### Patch Changes

package/dist/components/checkbox-core.d.ts

@@ -3,8 +3,8 @@ import type { Checked } from "../util/types";
 /**
  * The internal stateless ☑️ Checkbox
  */
-declare const CheckboxCore: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+declare const CheckboxCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     checked: Checked;
     disabled: boolean;

package/dist/components/checkbox.d.ts

@@ -22,8 +22,8 @@ import type { Checked } from "../util/types";
  * <Checkbox checked={checked} onChange={setChecked} />
  * ```
  */
-declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /**
      * Whether this component is checked or indeterminate

package/dist/components/choice-internal.d.ts

@@ -7,8 +7,8 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  * 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).
- */ declare const ChoiceInternal: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+ */ declare const ChoiceInternal: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /** Whether this choice is checked. */
     checked: boolean | null | undefined;

package/dist/components/choice.d.ts

@@ -66,8 +66,8 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  * </RadioGroup>
  * ```
  */
-declare const Choice: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+declare const Choice: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /** User-defined. Label for the field. */
     label: React.ReactNode;

package/dist/components/radio-core.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import type { Checked } from "../util/types";
 /**
  * The internal stateless 🔘 Radio button
- */ declare const RadioCore: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+ */ declare const RadioCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     checked: Checked;
     disabled: boolean;

package/dist/components/radio.d.ts

@@ -6,8 +6,8 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  *
  * This component should not really be used by itself because radio buttons are
  * often grouped together. See RadioGroup.
- */ declare const Radio: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+ */ declare const Radio: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /**
      * Whether this component is checked

package/dist/components/text-area.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
-declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /**
      * The text area value.

package/dist/components/text-field.d.ts

@@ -133,6 +133,10 @@ type State = {
      * Displayed when the validation fails.
      */
     error: string | null | undefined;
+    /**
+     * The user focuses on this field.
+     */
+    focused: boolean;
 };
 /**
  * A TextField is an element used to accept a single line of text from the user.
@@ -146,7 +150,6 @@ declare class TextField extends React.Component<PropsWithForwardRef, State> {
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
     handleFocus: (event: React.FocusEvent<HTMLInputElement>) => unknown;
     handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    getStyles: () => StyleType;
     render(): React.ReactNode;
 }
 type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof TextField, React.ComponentProps<typeof TextField>>, "forwardedRef">;

package/dist/es/index.js

@@ -592,14 +592,15 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "onFocus", "onBlur", "onValidate", "validate", "onChange", "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) {
     super(props);
     this.state = {
-      error: null
+      error: null,
+      focused: false
     };
     this.maybeValidate = newValue => {
       const {
@@ -640,30 +641,25 @@ class TextField extends React.Component {
       const {
         onFocus
       } = this.props;
-      if (onFocus) {
-        onFocus(event);
-      }
+      this.setState({
+        focused: true
+      }, () => {
+        if (onFocus) {
+          onFocus(event);
+        }
+      });
     };
     this.handleBlur = event => {
       const {
         onBlur
       } = this.props;
-      if (onBlur) {
-        onBlur(event);
-      }
-    };
-    this.getStyles = () => {
-      const {
-        disabled,
-        light
-      } = this.props;
-      const {
-        error
-      } = this.state;
-      const baseStyles = [styles$2.input, styles$7.LabelMedium];
-      const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, !!error && styles$2.error];
-      const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, !!error && styles$2.lightError];
-      return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
+      this.setState({
+        focused: false
+      }, () => {
+        if (onBlur) {
+          onBlur(event);
+        }
+      });
     };
     if (props.validate && props.value !== "") {
       this.state.error = props.validate(props.value) || null;
@@ -684,6 +680,7 @@ class TextField extends React.Component {
         disabled,
         onKeyDown,
         placeholder,
+        light,
         style,
         testId,
         readOnly,
@@ -696,7 +693,7 @@ class TextField extends React.Component {
       id: id,
       scope: "text-field"
     }, uniqueId => React.createElement(StyledInput, _extends({
-      style: [this.getStyles(), 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,
@@ -726,10 +723,12 @@ const styles$2 = StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
-    borderRadius: border.radius.medium_4,
+    borderRadius: 4,
     boxSizing: "border-box",
     paddingLeft: spacing.medium_16,
-    margin: 0
+    margin: 0,
+    outline: "none",
+    boxShadow: "none"
   },
   default: {
     background: color.white,
@@ -739,23 +738,12 @@ const styles$2 = StyleSheet.create({
       color: color.offBlack64
     }
   },
-  defaultFocus: {
-    ":focus-visible": {
-      borderColor: color.blue,
-      outline: `1px solid ${color.blue}`,
-      outlineOffset: 0
-    }
-  },
   error: {
     background: color.fadedRed8,
     border: `1px solid ${color.red}`,
     color: color.offBlack,
     "::placeholder": {
       color: color.offBlack64
-    },
-    ":focus-visible": {
-      outlineColor: color.red,
-      borderColor: color.red
     }
   },
   disabled: {
@@ -763,57 +751,22 @@ const styles$2 = StyleSheet.create({
     border: `1px solid ${color.offBlack16}`,
     color: color.offBlack64,
     "::placeholder": {
-      color: color.offBlack64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      outline: "none",
-      boxShadow: `0 0 0 1px ${color.white}, 0 0 0 3px ${color.offBlack32}`
+      color: color.offBlack32
     }
   },
-  light: {
+  focused: {
     background: color.white,
-    border: `1px solid ${color.offBlack16}`,
+    border: `1px solid ${color.blue}`,
     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",
-    ":focus-visible": {
-      borderColor: mix(color.white32, color.blue),
-      outline: "none",
-      boxShadow: `0 0 0 1px ${color.offBlack32}, 0 0 0 3px ${color.fadedBlue}`
-    }
+  defaultLight: {
+    boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`
   },
-  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}`
-    }
+  errorLight: {
+    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`
   }
 });
 var TextField$1 = React.forwardRef((props, ref) => React.createElement(TextField, _extends({}, props, {
@@ -1109,7 +1062,7 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [getStyles(), style],
+    style: [...getStyles(), style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,

package/dist/index.js

@@ -622,14 +622,15 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "onFocus", "onBlur", "onValidate", "validate", "onChange", "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 = wonderBlocksCore.addStyle("input");
 class TextField extends React__namespace.Component {
   constructor(props) {
     super(props);
     this.state = {
-      error: null
+      error: null,
+      focused: false
     };
     this.maybeValidate = newValue => {
       const {
@@ -670,30 +671,25 @@ class TextField extends React__namespace.Component {
       const {
         onFocus
       } = this.props;
-      if (onFocus) {
-        onFocus(event);
-      }
+      this.setState({
+        focused: true
+      }, () => {
+        if (onFocus) {
+          onFocus(event);
+        }
+      });
     };
     this.handleBlur = event => {
       const {
         onBlur
       } = this.props;
-      if (onBlur) {
-        onBlur(event);
-      }
-    };
-    this.getStyles = () => {
-      const {
-        disabled,
-        light
-      } = this.props;
-      const {
-        error
-      } = this.state;
-      const baseStyles = [styles$2.input, wonderBlocksTypography.styles.LabelMedium];
-      const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, !!error && styles$2.error];
-      const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, !!error && styles$2.lightError];
-      return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
+      this.setState({
+        focused: false
+      }, () => {
+        if (onBlur) {
+          onBlur(event);
+        }
+      });
     };
     if (props.validate && props.value !== "") {
       this.state.error = props.validate(props.value) || null;
@@ -714,6 +710,7 @@ class TextField extends React__namespace.Component {
         disabled,
         onKeyDown,
         placeholder,
+        light,
         style,
         testId,
         readOnly,
@@ -726,7 +723,7 @@ class TextField extends React__namespace.Component {
       id: id,
       scope: "text-field"
     }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
-      style: [this.getStyles(), style],
+      style: [styles$2.input, wonderBlocksTypography.styles.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,
@@ -756,10 +753,12 @@ const styles$2 = aphrodite.StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
-    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    borderRadius: 4,
     boxSizing: "border-box",
     paddingLeft: wonderBlocksTokens.spacing.medium_16,
-    margin: 0
+    margin: 0,
+    outline: "none",
+    boxShadow: "none"
   },
   default: {
     background: wonderBlocksTokens.color.white,
@@ -769,23 +768,12 @@ const styles$2 = aphrodite.StyleSheet.create({
       color: wonderBlocksTokens.color.offBlack64
     }
   },
-  defaultFocus: {
-    ":focus-visible": {
-      borderColor: wonderBlocksTokens.color.blue,
-      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: 0
-    }
-  },
   error: {
     background: wonderBlocksTokens.color.fadedRed8,
     border: `1px solid ${wonderBlocksTokens.color.red}`,
     color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
       color: wonderBlocksTokens.color.offBlack64
-    },
-    ":focus-visible": {
-      outlineColor: wonderBlocksTokens.color.red,
-      borderColor: wonderBlocksTokens.color.red
     }
   },
   disabled: {
@@ -793,57 +781,22 @@ const styles$2 = aphrodite.StyleSheet.create({
     border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
     color: wonderBlocksTokens.color.offBlack64,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      outline: "none",
-      boxShadow: `0 0 0 1px ${wonderBlocksTokens.color.white}, 0 0 0 3px ${wonderBlocksTokens.color.offBlack32}`
+      color: wonderBlocksTokens.color.offBlack32
     }
   },
-  light: {
+  focused: {
     background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    border: `1px solid ${wonderBlocksTokens.color.blue}`,
     color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
       color: wonderBlocksTokens.color.offBlack64
     }
   },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: 0,
-      borderColor: wonderBlocksTokens.color.blue,
-      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${wonderBlocksTokens.color.white32}`,
-    color: wonderBlocksTokens.color.white64,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
-      outline: "none",
-      boxShadow: `0 0 0 1px ${wonderBlocksTokens.color.offBlack32}, 0 0 0 3px ${wonderBlocksTokens.color.fadedBlue}`
-    }
+  defaultLight: {
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
   },
-  lightError: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.red}`,
-    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`,
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    ":focus-visible": {
-      outlineColor: wonderBlocksTokens.color.red,
-      borderColor: wonderBlocksTokens.color.red,
-      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.red}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
-    }
+  errorLight: {
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
   }
 });
 var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
@@ -1139,7 +1092,7 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [getStyles(), style],
+    style: [...getStyles(), style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.9.1",
+  "version": "4.9.3",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.7",
-    "@khanacademy/wonder-blocks-core": "^7.0.0",
-    "@khanacademy/wonder-blocks-icon": "^4.1.4",
-    "@khanacademy/wonder-blocks-layout": "^2.2.0",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.15"
+    "@khanacademy/wonder-blocks-clickable": "^4.2.8",
+    "@khanacademy/wonder-blocks-core": "^7.0.1",
+    "@khanacademy/wonder-blocks-icon": "^4.1.5",
+    "@khanacademy/wonder-blocks-layout": "^2.2.1",
+    "@khanacademy/wonder-blocks-tokens": "^2.0.1",
+    "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",