@khanacademy/wonder-blocks-form 4.0.7 → 4.0.9

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-form
 
+## 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
+
+-   @khanacademy/wonder-blocks-clickable@3.0.8
+-   @khanacademy/wonder-blocks-icon@2.0.8
+-   @khanacademy/wonder-blocks-layout@2.0.8
+-   @khanacademy/wonder-blocks-typography@2.0.8
+
 ## 4.0.7
 
 ### Patch Changes

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

@@ -1,16 +1,9 @@
 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> {
     handleChange: () => void;
     render(): React.ReactNode;
 }
-export {};

package/dist/components/checkbox-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 ☑️ Checkbox
  */
-declare export default class CheckboxCore extends React.Component<Props> {
+declare export default class CheckboxCore
+  extends React.Component<ChoiceCoreProps>
+{
   handleChange: () => void;
   render(): React.Node;
 }

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

@@ -53,10 +53,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

@@ -88,10 +88,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,7 @@ 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"];
 const {
   blue: blue$1,
   red: red$1,
@@ -46,7 +45,7 @@ const {
   offBlack32: offBlack32$1,
   offBlack50: offBlack50$1
 } = Color;
-const StyledInput$1 = addStyle("input");
+const StyledInput$2 = addStyle("input");
 const checkboxCheck = {
   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"
 };
@@ -65,18 +64,15 @@ 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, {
+    return React.createElement(React.Fragment, null, React.createElement(StyledInput$2, _extends({}, sharedProps, {
       type: "checkbox",
       "aria-invalid": error,
       checked: checked,
@@ -151,31 +147,39 @@ const _generateStyles$1 = (checked, error) => {
     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 +187,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 +197,7 @@ const {
   offBlack32,
   offBlack50
 } = Color;
-const StyledInput = addStyle("input");
+const StyledInput$1 = addStyle("input");
 class RadioCore extends React.Component {
   constructor(...args) {
     super(...args);
@@ -209,18 +213,15 @@ 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,
@@ -298,31 +299,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 +339,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 +362,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,36 +387,31 @@ 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));
     });
   }
 }
@@ -428,7 +427,6 @@ const styles$3 = StyleSheet.create({
     outline: "none"
   },
   label: {
-    userSelect: "none",
     marginTop: -2
   },
   disabledLabel: {
@@ -626,6 +624,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 +717,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,