@khanacademy/wonder-blocks-form 4.0.8 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.1.0
+
+### Minor Changes
+
+-   ffe3758d: Add indeterminate state to checkbox
+
+## 4.0.9
+
+### Patch Changes
+
+-   d0f0ce7e: Updates input to StyledInput and uses style prop
+-   1269f6e0: Allow text highlighting on choice components
+-   f71343d6: Remove ClickableBehavior from Choice to improve screenreader a11y
+-   Updated dependencies [3c400719]
+-   Updated dependencies [a6164ed0]
+    -   @khanacademy/wonder-blocks-core@5.1.0
+    -   @khanacademy/wonder-blocks-clickable@3.0.9
+    -   @khanacademy/wonder-blocks-icon@2.0.9
+    -   @khanacademy/wonder-blocks-layout@2.0.9
+    -   @khanacademy/wonder-blocks-typography@2.0.9
+
 ## 4.0.8
 
 ### Patch Changes

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

@@ -1,16 +1,12 @@
 import * as React from "react";
 import type { ChoiceCoreProps } from "../util/types";
-type Props = ChoiceCoreProps & {
-    hovered: boolean;
-    focused: boolean;
-    pressed: boolean;
-    waiting: boolean;
-};
 /**
  * The internal stateless ☑️ Checkbox
  */
-export default class CheckboxCore extends React.Component<Props> {
+export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<ChoiceCoreProps>): void;
+    inputRef: React.RefObject<HTMLInputElement>;
     handleChange: () => void;
     render(): React.ReactNode;
 }
-export {};

package/dist/components/checkbox-core.js.flow

@@ -6,19 +6,16 @@
  */
 import * as React from "react";
 import type { ChoiceCoreProps } from "../util/types";
-declare type Props = {|
-  ...ChoiceCoreProps,
-  ...{|
-    hovered: boolean,
-    focused: boolean,
-    pressed: boolean,
-    waiting: boolean,
-  |},
-|};
+
 /**
  * The internal stateless ☑️ Checkbox
  */
-declare export default class CheckboxCore extends React.Component<Props> {
+declare export default class CheckboxCore
+  extends React.Component<ChoiceCoreProps>
+{
+  componentDidMount(): void;
+  componentDidUpdate(prevProps: $ReadOnly<ChoiceCoreProps>): void;
+  inputRef: React.RefObject<HTMLInputElement>;
   handleChange: () => void;
   render(): React.Node;
 }

package/dist/components/checkbox.d.ts

@@ -1,10 +1,11 @@
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Checked } from "../util/types";
 type ChoiceComponentProps = AriaProps & {
     /**
-     * Whether this component is checked
+     * Whether this component is checked or indeterminate
      */
-    checked: boolean;
+    checked: Checked;
     /**
      * Whether this component is disabled
      */

package/dist/components/checkbox.js.flow

@@ -6,13 +6,14 @@
  */
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Checked } from "../util/types";
 declare type ChoiceComponentProps = {|
   ...AriaProps,
   ...{|
     /**
-     * Whether this component is checked
+     * Whether this component is checked or indeterminate
      */
-    checked: boolean,
+    checked: Checked,
 
     /**
      * Whether this component is disabled

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

@@ -4,7 +4,7 @@ import CheckboxCore from "./checkbox-core";
 import RadioCore from "./radio-core";
 type Props = AriaProps & {
     /** Whether this choice is checked. */
-    checked: boolean;
+    checked: boolean | null | undefined;
     /** Whether this choice option is disabled. */
     disabled: boolean;
     /** Whether this choice is in error mode. */
@@ -40,7 +40,6 @@ type Props = AriaProps & {
     variant: "radio" | "checkbox";
 };
 type DefaultProps = {
-    checked: Props["checked"];
     disabled: Props["disabled"];
     error: Props["error"];
 };
@@ -53,10 +52,9 @@ type DefaultProps = {
  * (because for Choice, that prop would be auto-populated by CheckboxGroup).
  */ export default class ChoiceInternal extends React.Component<Props> {
     static defaultProps: DefaultProps;
-    handleLabelClick: (event: React.SyntheticEvent) => void;
     handleClick: () => void;
     getChoiceCoreComponent(): typeof RadioCore | typeof CheckboxCore;
-    getLabel(): React.ReactNode;
+    getLabel(id: string): React.ReactNode;
     getDescription(id?: string): React.ReactNode;
     render(): React.ReactNode;
 }

package/dist/components/choice-internal.js.flow

@@ -14,7 +14,7 @@ declare type Props = {|
     /**
      * Whether this choice is checked.
      */
-    checked: boolean,
+    checked: boolean | null | void,
 
     /**
      * Whether this choice option is disabled.
@@ -74,7 +74,6 @@ declare type Props = {|
   |},
 |};
 declare type DefaultProps = {|
-  checked: $PropertyType<Props, "checked">,
   disabled: $PropertyType<Props, "disabled">,
   error: $PropertyType<Props, "error">,
 |};
@@ -88,10 +87,9 @@ declare type DefaultProps = {|
  */
 declare export default class ChoiceInternal extends React.Component<Props> {
   static defaultProps: DefaultProps;
-  handleLabelClick: (event: SyntheticEvent<>) => void;
   handleClick: () => void;
   getChoiceCoreComponent(): typeof RadioCore | typeof CheckboxCore;
-  getLabel(): React.Node;
+  getLabel(id: string): React.Node;
   getDescription(id?: string): React.Node;
   render(): React.Node;
 }

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

@@ -1,15 +1,8 @@
 import * as React from "react";
 import type { ChoiceCoreProps } from "../util/types";
-type Props = ChoiceCoreProps & {
-    hovered: boolean;
-    focused: boolean;
-    pressed: boolean;
-    waiting: boolean;
-};
 /**
  * The internal stateless 🔘 Radio button
- */ export default class RadioCore extends React.Component<Props> {
+ */ export default class RadioCore extends React.Component<ChoiceCoreProps> {
     handleChange: () => void;
     render(): React.ReactNode;
 }
-export {};

package/dist/components/radio-core.js.flow

@@ -6,19 +6,13 @@
  */
 import * as React from "react";
 import type { ChoiceCoreProps } from "../util/types";
-declare type Props = {|
-  ...ChoiceCoreProps,
-  ...{|
-    hovered: boolean,
-    focused: boolean,
-    pressed: boolean,
-    waiting: boolean,
-  |},
-|};
+
 /**
  * The internal stateless 🔘 Radio button
  */
-declare export default class RadioCore extends React.Component<Props> {
+declare export default class RadioCore
+  extends React.Component<ChoiceCoreProps>
+{
   handleChange: () => void;
   render(): React.Node;
 }

package/dist/es/index.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import { StyleSheet } from 'aphrodite';
 import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
 import { addStyle, UniqueIDProvider, View, IDProvider } from '@khanacademy/wonder-blocks-core';
-import { getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { LabelMedium, LabelSmall, styles as styles$6 } from '@khanacademy/wonder-blocks-typography';
@@ -36,7 +35,17 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+function mapCheckedToAriaChecked(value) {
+  switch (value) {
+    case true:
+      return "true";
+    case false:
+      return "false";
+    default:
+      return "mixed";
+  }
+}
 const {
   blue: blue$1,
   red: red$1,
@@ -46,17 +55,31 @@ const {
   offBlack32: offBlack32$1,
   offBlack50: offBlack50$1
 } = Color;
-const StyledInput$1 = addStyle("input");
-const checkboxCheck = {
+const StyledInput$2 = addStyle("input");
+const checkPath = {
   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"
 };
+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.Component {
   constructor(...args) {
     super(...args);
+    this.inputRef = React.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;
+    }
+  }
   render() {
     const _this$props = this.props,
       {
@@ -65,32 +88,33 @@ class CheckboxCore extends React.Component {
         error,
         groupName,
         id,
-        testId,
-        hovered,
-        focused,
-        pressed
+        testId
       } = _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 defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
     const props = {
       "data-test-id": testId
     };
-    return React.createElement(React.Fragment, null, React.createElement(StyledInput$1, _extends({}, sharedProps, {
+    const checkboxIcon = React.createElement(Icon, {
+      color: disabled ? offBlack32$1 : white$1,
+      icon: checked ? checkPath : indeterminatePath,
+      size: "small",
+      style: sharedStyles$1.checkboxIcon
+    });
+    const ariaChecked = mapCheckedToAriaChecked(checked);
+    return React.createElement(React.Fragment, null, React.createElement(StyledInput$2, _extends({}, sharedProps, {
+      ref: this.inputRef,
       type: "checkbox",
+      "aria-checked": ariaChecked,
       "aria-invalid": error,
-      checked: checked,
+      checked: checked != null ? checked : undefined,
       disabled: disabled,
       id: id,
       name: groupName,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), checked && React.createElement(Icon, {
-      color: disabled ? offBlack32$1 : white$1,
-      icon: checkboxCheck,
-      size: "small",
-      style: sharedStyles$1.checkIcon
-    }));
+    }, props)), checked || checked == null ? checkboxIcon : React.createElement(React.Fragment, null));
   }
 }
 const size$1 = 16;
@@ -118,7 +142,7 @@ const sharedStyles$1 = StyleSheet.create({
     borderColor: offBlack16$1,
     borderWidth: 1
   },
-  checkIcon: {
+  checkboxIcon: {
     position: "absolute",
     pointerEvents: "none"
   }
@@ -147,35 +171,43 @@ const _generateStyles$1 = (checked, error) => {
   }
   const palette = error ? colors$1.error : colors$1.default;
   let newStyles = {};
-  if (checked) {
+  if (checked || checked == null) {
     newStyles = {
       default: {
         backgroundColor: palette.base,
-        borderWidth: 0
-      },
-      focus: {
-        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
-      },
-      active: {
-        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
-        background: palette.active
+        borderWidth: 0,
+        ":focus-visible": {
+          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+        },
+        ":hover": {
+          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+        },
+        ":active": {
+          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
+          background: palette.active
+        }
       }
     };
   } else {
     newStyles = {
       default: {
         backgroundColor: error ? fadedRed$1 : white$1,
-        borderColor: error ? red$1 : offBlack50$1
-      },
-      focus: {
-        backgroundColor: error ? fadedRed$1 : white$1,
-        borderColor: palette.base,
-        borderWidth: 2
-      },
-      active: {
-        backgroundColor: palette.faded,
-        borderColor: error ? activeRed$1 : blue$1,
-        borderWidth: 2
+        borderColor: error ? red$1 : offBlack50$1,
+        ":focus-visible": {
+          backgroundColor: error ? fadedRed$1 : white$1,
+          borderColor: palette.base,
+          borderWidth: 2
+        },
+        ":hover": {
+          backgroundColor: error ? fadedRed$1 : white$1,
+          borderColor: palette.base,
+          borderWidth: 2
+        },
+        ":active": {
+          backgroundColor: palette.faded,
+          borderColor: error ? activeRed$1 : blue$1,
+          borderWidth: 2
+        }
       }
     };
   }
@@ -183,7 +215,7 @@ const _generateStyles$1 = (checked, error) => {
   return styles$5[styleKey];
 };
 
-const _excluded$3 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+const _excluded$3 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 const {
   blue,
   red,
@@ -193,7 +225,7 @@ const {
   offBlack32,
   offBlack50
 } = Color;
-const StyledInput = addStyle("input");
+const StyledInput$1 = addStyle("input");
 class RadioCore extends React.Component {
   constructor(...args) {
     super(...args);
@@ -209,21 +241,18 @@ class RadioCore extends React.Component {
         error,
         groupName,
         id,
-        testId,
-        hovered,
-        focused,
-        pressed
+        testId
       } = _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 defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
     const props = {
       "data-test-id": testId
     };
-    return React.createElement(React.Fragment, null, React.createElement(StyledInput, _extends({}, sharedProps, {
+    return React.createElement(React.Fragment, null, React.createElement(StyledInput$1, _extends({}, sharedProps, {
       type: "radio",
       "aria-invalid": error,
-      checked: checked,
+      checked: checked != null ? checked : undefined,
       disabled: disabled,
       id: id,
       name: groupName,
@@ -298,31 +327,39 @@ const _generateStyles = (checked, error) => {
       default: {
         backgroundColor: white,
         borderColor: palette.base,
-        borderWidth: size / 4
-      },
-      focus: {
-        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
-      },
-      active: {
-        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
-        borderColor: palette.active
+        borderWidth: size / 4,
+        ":focus-visible": {
+          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+        },
+        ":hover": {
+          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+        },
+        ":active": {
+          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+          borderColor: palette.active
+        }
       }
     };
   } else {
     newStyles = {
       default: {
         backgroundColor: error ? fadedRed : white,
-        borderColor: error ? red : offBlack50
-      },
-      focus: {
-        backgroundColor: error ? fadedRed : white,
-        borderColor: palette.base,
-        borderWidth: 2
-      },
-      active: {
-        backgroundColor: palette.faded,
-        borderColor: error ? activeRed : blue,
-        borderWidth: 2
+        borderColor: error ? red : offBlack50,
+        ":focus-visible": {
+          backgroundColor: error ? fadedRed : white,
+          borderColor: palette.base,
+          borderWidth: 2
+        },
+        ":hover": {
+          backgroundColor: error ? fadedRed : white,
+          borderColor: palette.base,
+          borderWidth: 2
+        },
+        ":active": {
+          backgroundColor: palette.faded,
+          borderColor: error ? activeRed : blue,
+          borderWidth: 2
+        }
       }
     };
   }
@@ -330,13 +367,10 @@ const _generateStyles = (checked, error) => {
   return styles$4[styleKey];
 };
 
-const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
+const _excluded$2 = ["label", "description", "id", "onChange", "style", "className", "variant"];
 class ChoiceInternal extends React.Component {
   constructor(...args) {
     super(...args);
-    this.handleLabelClick = event => {
-      event.preventDefault();
-    };
     this.handleClick = () => {
       const {
         checked,
@@ -356,17 +390,15 @@ class ChoiceInternal extends React.Component {
       return CheckboxCore;
     }
   }
-  getLabel() {
+  getLabel(id) {
     const {
       disabled,
-      id,
       label
     } = this.props;
     return React.createElement(LabelMedium, {
       style: [styles$3.label, disabled && styles$3.disabledLabel]
     }, React.createElement("label", {
-      htmlFor: id,
-      onClick: this.handleLabelClick
+      htmlFor: id
     }, label));
   }
   getDescription(id) {
@@ -383,41 +415,35 @@ class ChoiceInternal extends React.Component {
       {
         label,
         description,
+        id,
         style,
-        className,
-        variant
+        className
       } = _this$props,
       coreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     const ChoiceCore = this.getChoiceCoreComponent();
-    const ClickableBehavior = getClickableBehavior();
     return React.createElement(UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "choice"
     }, ids => {
+      const uniqueId = id || ids.get("main");
       const descriptionId = description ? ids.get("description") : undefined;
       return React.createElement(View, {
         style: style,
         className: className
-      }, React.createElement(ClickableBehavior, {
-        disabled: coreProps.disabled,
-        onClick: this.handleClick,
-        role: variant
-      }, (state, childrenProps) => {
-        return React.createElement(View, _extends({
-          style: styles$3.wrapper
-        }, childrenProps, {
-          tabIndex: -1
-        }), React.createElement(ChoiceCore, _extends({}, coreProps, state, {
-          "aria-describedby": descriptionId
-        })), React.createElement(Strut, {
-          size: Spacing.xSmall_8
-        }), label && this.getLabel());
-      }), description && this.getDescription(descriptionId));
+      }, React.createElement(View, {
+        style: styles$3.wrapper,
+        tabIndex: -1
+      }, React.createElement(ChoiceCore, _extends({}, coreProps, {
+        id: uniqueId,
+        "aria-describedby": descriptionId,
+        onClick: this.handleClick
+      })), React.createElement(Strut, {
+        size: Spacing.xSmall_8
+      }), label && this.getLabel(uniqueId)), description && this.getDescription(descriptionId));
     });
   }
 }
 ChoiceInternal.defaultProps = {
-  checked: false,
   disabled: false,
   error: false
 };
@@ -428,7 +454,6 @@ const styles$3 = StyleSheet.create({
     outline: "none"
   },
   label: {
-    userSelect: "none",
     marginTop: -2
   },
   disabledLabel: {
@@ -626,6 +651,7 @@ class RadioGroup extends 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.";
+const StyledInput = addStyle("input");
 class TextField extends React.Component {
   constructor(props) {
     super(props);
@@ -718,8 +744,8 @@ class TextField extends React.Component {
         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]),
+    return 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],
       id: id,
       type: type,
       placeholder: placeholder,