@khanacademy/wonder-blocks-form 4.0.8 → 4.1.0

package/dist/index.js

@@ -6,7 +6,6 @@ var React = require('react');
 var aphrodite = require('aphrodite');
 var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var Spacing = require('@khanacademy/wonder-blocks-spacing');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
@@ -65,7 +64,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,
@@ -75,17 +84,31 @@ const {
   offBlack32: offBlack32$1,
   offBlack50: offBlack50$1
 } = Color__default["default"];
-const StyledInput$1 = wonderBlocksCore.addStyle("input");
-const checkboxCheck = {
+const StyledInput$2 = wonderBlocksCore.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__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;
+    }
+  }
   render() {
     const _this$props = this.props,
       {
@@ -94,32 +117,33 @@ class CheckboxCore extends React__namespace.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__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends({}, sharedProps, {
+    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,
+      checked: checked != null ? checked : undefined,
       disabled: disabled,
       id: id,
       name: groupName,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), checked && React__namespace.createElement(Icon__default["default"], {
-      color: disabled ? offBlack32$1 : white$1,
-      icon: checkboxCheck,
-      size: "small",
-      style: sharedStyles$1.checkIcon
-    }));
+    }, props)), checked || checked == null ? checkboxIcon : React__namespace.createElement(React__namespace.Fragment, null));
   }
 }
 const size$1 = 16;
@@ -147,7 +171,7 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
     borderColor: offBlack16$1,
     borderWidth: 1
   },
-  checkIcon: {
+  checkboxIcon: {
     position: "absolute",
     pointerEvents: "none"
   }
@@ -176,35 +200,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
+        }
       }
     };
   }
@@ -212,7 +244,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,
@@ -222,7 +254,7 @@ const {
   offBlack32,
   offBlack50
 } = Color__default["default"];
-const StyledInput = wonderBlocksCore.addStyle("input");
+const StyledInput$1 = wonderBlocksCore.addStyle("input");
 class RadioCore extends React__namespace.Component {
   constructor(...args) {
     super(...args);
@@ -238,21 +270,18 @@ class RadioCore extends React__namespace.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__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput, _extends({}, sharedProps, {
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends({}, sharedProps, {
       type: "radio",
       "aria-invalid": error,
-      checked: checked,
+      checked: checked != null ? checked : undefined,
       disabled: disabled,
       id: id,
       name: groupName,
@@ -327,31 +356,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
+        }
       }
     };
   }
@@ -359,13 +396,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__namespace.Component {
   constructor(...args) {
     super(...args);
-    this.handleLabelClick = event => {
-      event.preventDefault();
-    };
     this.handleClick = () => {
       const {
         checked,
@@ -385,17 +419,15 @@ class ChoiceInternal extends React__namespace.Component {
       return CheckboxCore;
     }
   }
-  getLabel() {
+  getLabel(id) {
     const {
       disabled,
-      id,
       label
     } = this.props;
     return React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       style: [styles$3.label, disabled && styles$3.disabledLabel]
     }, React__namespace.createElement("label", {
-      htmlFor: id,
-      onClick: this.handleLabelClick
+      htmlFor: id
     }, label));
   }
   getDescription(id) {
@@ -412,41 +444,35 @@ class ChoiceInternal extends React__namespace.Component {
       {
         label,
         description,
+        id,
         style,
-        className,
-        variant
+        className
       } = _this$props,
       coreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     const ChoiceCore = this.getChoiceCoreComponent();
-    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior();
     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(ClickableBehavior, {
-        disabled: coreProps.disabled,
-        onClick: this.handleClick,
-        role: variant
-      }, (state, childrenProps) => {
-        return React__namespace.createElement(wonderBlocksCore.View, _extends({
-          style: styles$3.wrapper
-        }, childrenProps, {
-          tabIndex: -1
-        }), React__namespace.createElement(ChoiceCore, _extends({}, coreProps, state, {
-          "aria-describedby": descriptionId
-        })), React__namespace.createElement(wonderBlocksLayout.Strut, {
-          size: Spacing__default["default"].xSmall_8
-        }), label && this.getLabel());
-      }), description && this.getDescription(descriptionId));
+      }, 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 = {
-  checked: false,
   disabled: false,
   error: false
 };
@@ -457,7 +483,6 @@ const styles$3 = aphrodite.StyleSheet.create({
     outline: "none"
   },
   label: {
-    userSelect: "none",
     marginTop: -2
   },
   disabledLabel: {
@@ -655,6 +680,7 @@ class RadioGroup extends React__namespace.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 = wonderBlocksCore.addStyle("input");
 class TextField extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -747,8 +773,8 @@ class TextField extends React__namespace.Component {
         forwardedRef
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-    return React__namespace.createElement("input", _extends({
-      className: aphrodite.css([styles$1.input, wonderBlocksTypography.styles.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__namespace.createElement(StyledInput, _extends({
+      style: [styles$1.input, wonderBlocksTypography.styles.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,

package/dist/util/types.d.ts

@@ -1,8 +1,9 @@
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import Choice from "../components/choice";
+export type Checked = boolean | null | undefined;
 export type ChoiceCoreProps = AriaProps & {
     /** Whether this component is checked */
-    checked: boolean;
+    checked: Checked;
     /** Whether this component is disabled */
     disabled: boolean;
     /** Whether this component should show an error state */
@@ -15,6 +16,8 @@ export type ChoiceCoreProps = AriaProps & {
     id?: string;
     /** Optional test ID for e2e testing */
     testId?: string;
+    /** Function that executes when the choice is clicked. */
+    onClick: () => void;
 };
 export type ChoiceComponentProps = ChoiceCoreProps & {
     /** Callback when this component is selected. The newCheckedState is the

package/dist/util/types.js.flow

@@ -6,13 +6,14 @@
  */
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import Choice from "../components/choice";
+export type Checked = boolean | null | void;
 export type ChoiceCoreProps = {|
   ...AriaProps,
   ...{|
     /**
      * Whether this component is checked
      */
-    checked: boolean,
+    checked: Checked,
 
     /**
      * Whether this component is disabled
@@ -40,6 +41,11 @@ export type ChoiceCoreProps = {|
      * Optional test ID for e2e testing
      */
     testId?: string,
+
+    /**
+     * Function that executes when the choice is clicked.
+     */
+    onClick: () => void,
   |},
 |};
 export type ChoiceComponentProps = {|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.0.8",
+  "version": "4.1.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.0.8",
+    "@khanacademy/wonder-blocks-clickable": "^3.0.9",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.0.4",
-    "@khanacademy/wonder-blocks-icon": "^2.0.8",
-    "@khanacademy/wonder-blocks-layout": "^2.0.8",
+    "@khanacademy/wonder-blocks-core": "^5.1.0",
+    "@khanacademy/wonder-blocks-icon": "^2.0.9",
+    "@khanacademy/wonder-blocks-layout": "^2.0.9",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.0.8"
+    "@khanacademy/wonder-blocks-typography": "^2.0.9"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",