@khanacademy/wonder-blocks-form 4.9.2 → 4.9.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.9.4
+
+### Patch Changes
+
+-   61dc4448: Allow `TextField` to be focusable when disabled. It now sets `aria-disabled` instead of the `disabled` attribute based on the `disabled` prop. This makes it so screenreaders will continue to communicate that the component is disabled, while allowing focus on the disabled component. Focus styling is also added to the disabled state.
+-   2dfd5eb6: - Update `TextField` state styling so that it is consistent with other components like `TextArea`, `SingleSelect`, `MultiSelect` (especially the focus styling). The styling also now uses CSS pseudo-classes for easier testing in Chromatic and debugging in browsers.
+    -   `TextField` and `TextArea` state styling has also been updated so that any outline styles outside of the component are now applied within the component to prevent cropped focus outlines in places where an ancestor element has `overflow: hidden`.
+
+## 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

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/labeled-text-field.d.ts

@@ -24,7 +24,15 @@ type CommonProps = {
      */
     value: string;
     /**
-     * Makes a read-only input field that cannot be focused. Defaults to false.
+     * Whether the input should be disabled. Defaults to false.
+     * If the disabled prop is set to `true`, LabeledTextField will have disabled
+     * styling and will not be interactable.
+     *
+     * Note: The `disabled` prop sets the `aria-disabled` attribute to `true`
+     * instead of setting the `disabled` attribute. This is so that the component
+     * remains focusable while communicating to screen readers that it is disabled.
+     * This `disabled` prop will also set the `readonly` attribute to prevent
+     * typing in the field.
      */
     disabled: boolean;
     /**

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

@@ -21,7 +21,15 @@ type CommonProps = AriaProps & {
      */
     name?: string;
     /**
-     * Makes a read-only input field that cannot be focused. Defaults to false.
+     * Whether the input should be disabled. Defaults to false.
+     * If the disabled prop is set to `true`, TextField will have disabled
+     * styling and will not be interactable.
+     *
+     * Note: The `disabled` prop sets the `aria-disabled` attribute to `true`
+     * instead of setting the `disabled` attribute. This is so that the component
+     * remains focusable while communicating to screen readers that it is disabled.
+     * This `disabled` prop will also set the `readonly` attribute to prevent
+     * typing in the field.
      */
     disabled: boolean;
     /**
@@ -133,10 +141,6 @@ 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.
@@ -150,6 +154,7 @@ 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,15 +592,14 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "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,
-      focused: false
+      error: null
     };
     this.maybeValidate = newValue => {
       const {
@@ -641,25 +640,30 @@ class TextField extends React.Component {
       const {
         onFocus
       } = this.props;
-      this.setState({
-        focused: true
-      }, () => {
-        if (onFocus) {
-          onFocus(event);
-        }
-      });
+      if (onFocus) {
+        onFocus(event);
+      }
     };
     this.handleBlur = event => {
       const {
         onBlur
       } = this.props;
-      this.setState({
-        focused: false
-      }, () => {
-        if (onBlur) {
-          onBlur(event);
-        }
-      });
+      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)];
     };
     if (props.validate && props.value !== "") {
       this.state.error = props.validate(props.value) || null;
@@ -680,7 +684,6 @@ class TextField extends React.Component {
         disabled,
         onKeyDown,
         placeholder,
-        light,
         style,
         testId,
         readOnly,
@@ -693,19 +696,19 @@ class TextField extends React.Component {
       id: id,
       scope: "text-field"
     }, uniqueId => React.createElement(StyledInput, _extends({
-      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],
+      style: [this.getStyles(), style],
       id: uniqueId,
       type: type,
       placeholder: placeholder,
       value: value,
       name: name,
-      disabled: disabled,
+      "aria-disabled": disabled,
       onChange: this.handleChange,
-      onKeyDown: onKeyDown,
+      onKeyDown: disabled ? undefined : onKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       "data-testid": testId,
-      readOnly: readOnly,
+      readOnly: readOnly || disabled,
       autoFocus: autoFocus,
       autoComplete: autoComplete,
       ref: forwardedRef
@@ -723,12 +726,10 @@ const styles$2 = StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
-    borderRadius: 4,
+    borderRadius: border.radius.medium_4,
     boxSizing: "border-box",
     paddingLeft: spacing.medium_16,
-    margin: 0,
-    outline: "none",
-    boxShadow: "none"
+    margin: 0
   },
   default: {
     background: color.white,
@@ -738,12 +739,23 @@ const styles$2 = StyleSheet.create({
       color: color.offBlack64
     }
   },
+  defaultFocus: {
+    ":focus-visible": {
+      borderColor: color.blue,
+      outline: `1px solid ${color.blue}`,
+      outlineOffset: "-2px"
+    }
+  },
   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: {
@@ -751,22 +763,56 @@ const styles$2 = StyleSheet.create({
     border: `1px solid ${color.offBlack16}`,
     color: color.offBlack64,
     "::placeholder": {
-      color: color.offBlack32
+      color: color.offBlack64
+    },
+    cursor: "not-allowed",
+    ":focus-visible": {
+      outline: `2px solid ${color.offBlack32}`,
+      outlineOffset: "-3px"
     }
   },
-  focused: {
+  light: {
     background: color.white,
-    border: `1px solid ${color.blue}`,
+    border: `1px solid ${color.offBlack16}`,
     color: color.offBlack,
     "::placeholder": {
       color: color.offBlack64
     }
   },
-  defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`
+  lightFocus: {
+    ":focus-visible": {
+      outline: `3px solid ${color.blue}`,
+      outlineOffset: "-4px",
+      borderColor: 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: `3px solid ${color.fadedBlue}`,
+      outlineOffset: "-4px"
+    }
   },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`
+  lightError: {
+    background: color.fadedRed8,
+    border: `1px solid ${color.white}`,
+    outline: `2px solid ${color.red}`,
+    outlineOffset: "-3px",
+    color: color.offBlack,
+    "::placeholder": {
+      color: color.offBlack64
+    },
+    ":focus-visible": {
+      outline: `3px solid ${color.red}`,
+      outlineOffset: "-4px"
+    }
   }
 });
 var TextField$1 = React.forwardRef((props, ref) => React.createElement(TextField, _extends({}, props, {
@@ -1062,7 +1108,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,
@@ -1106,7 +1152,7 @@ const styles = StyleSheet.create({
     ":focus-visible": {
       borderColor: color.blue,
       outline: `1px solid ${color.blue}`,
-      outlineOffset: 0
+      outlineOffset: "-2px"
     }
   },
   disabled: {
@@ -1118,8 +1164,8 @@ const styles = StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: "none",
-      boxShadow: `0 0 0 1px ${color.white}, 0 0 0 3px ${color.offBlack32}`
+      outline: `2px solid ${color.offBlack32}`,
+      outlineOffset: "-3px"
     }
   },
   error: {
@@ -1144,10 +1190,9 @@ const styles = StyleSheet.create({
   },
   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}`
+      outline: `3px solid ${color.blue}`,
+      outlineOffset: "-4px",
+      borderColor: color.white
     }
   },
   lightDisabled: {
@@ -1160,22 +1205,22 @@ const styles = StyleSheet.create({
     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}`
+      outline: `3px solid ${color.fadedBlue}`,
+      outlineOffset: "-4px"
     }
   },
   lightError: {
     background: color.fadedRed8,
-    border: `1px solid ${color.red}`,
-    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`,
+    border: `1px solid ${color.white}`,
+    outline: `2px solid ${color.red}`,
+    outlineOffset: "-3px",
     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}`
+      outline: `3px solid ${color.red}`,
+      outlineOffset: "-4px"
     }
   }
 });