@khanacademy/wonder-blocks-form 4.0.9 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.1.0
+
+### Minor Changes
+
+-   ffe3758d: Add indeterminate state to checkbox
+
 ## 4.0.9
 
 ### Patch Changes

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

@@ -4,6 +4,9 @@ import type { ChoiceCoreProps } from "../util/types";
  * The internal stateless ☑️ Checkbox
  */
 export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<ChoiceCoreProps>): void;
+    inputRef: React.RefObject<HTMLInputElement>;
     handleChange: () => void;
     render(): React.ReactNode;
 }

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

@@ -13,6 +13,9 @@ import type { ChoiceCoreProps } from "../util/types";
 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"];
 };

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">,
 |};

package/dist/es/index.js

@@ -36,6 +36,16 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 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,16 +56,30 @@ const {
   offBlack50: offBlack50$1
 } = Color;
 const StyledInput$2 = addStyle("input");
-const checkboxCheck = {
+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,
       {
@@ -72,21 +96,25 @@ class CheckboxCore extends React.Component {
     const props = {
       "data-test-id": testId
     };
+    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;
@@ -114,7 +142,7 @@ const sharedStyles$1 = StyleSheet.create({
     borderColor: offBlack16$1,
     borderWidth: 1
   },
-  checkIcon: {
+  checkboxIcon: {
     position: "absolute",
     pointerEvents: "none"
   }
@@ -143,7 +171,7 @@ 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,
@@ -224,7 +252,7 @@ class RadioCore extends React.Component {
     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,
@@ -416,7 +444,6 @@ class ChoiceInternal extends React.Component {
   }
 }
 ChoiceInternal.defaultProps = {
-  checked: false,
   disabled: false,
   error: false
 };

package/dist/index.js

@@ -65,6 +65,16 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 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,16 +85,30 @@ const {
   offBlack50: offBlack50$1
 } = Color__default["default"];
 const StyledInput$2 = wonderBlocksCore.addStyle("input");
-const checkboxCheck = {
+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,
       {
@@ -101,21 +125,25 @@ class CheckboxCore extends React__namespace.Component {
     const props = {
       "data-test-id": testId
     };
+    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;
@@ -143,7 +171,7 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
     borderColor: offBlack16$1,
     borderWidth: 1
   },
-  checkIcon: {
+  checkboxIcon: {
     position: "absolute",
     pointerEvents: "none"
   }
@@ -172,7 +200,7 @@ 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,
@@ -253,7 +281,7 @@ class RadioCore extends React__namespace.Component {
     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,
@@ -445,7 +473,6 @@ class ChoiceInternal extends React__namespace.Component {
   }
 }
 ChoiceInternal.defaultProps = {
-  checked: false,
   disabled: false,
   error: false
 };

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 */

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.0.9",
+  "version": "4.1.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",