@khanacademy/wonder-blocks-form 4.0.7 → 4.0.9

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,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,
@@ -75,7 +74,7 @@ const {
   offBlack32: offBlack32$1,
   offBlack50: offBlack50$1
 } = Color__default["default"];
-const StyledInput$1 = wonderBlocksCore.addStyle("input");
+const StyledInput$2 = wonderBlocksCore.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"
 };
@@ -94,18 +93,15 @@ 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, {
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$2, _extends({}, sharedProps, {
       type: "checkbox",
       "aria-invalid": error,
       checked: checked,
@@ -180,31 +176,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
+        }
       }
     };
   }
@@ -212,7 +216,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 +226,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,18 +242,15 @@ 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,
@@ -327,31 +328,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 +368,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 +391,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,36 +416,31 @@ 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));
     });
   }
 }
@@ -457,7 +456,6 @@ const styles$3 = aphrodite.StyleSheet.create({
     outline: "none"
   },
   label: {
-    userSelect: "none",
     marginTop: -2
   },
   disabledLabel: {
@@ -655,6 +653,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 +746,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

@@ -15,6 +15,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

@@ -40,6 +40,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.7",
+  "version": "4.0.9",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,19 +16,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.0.7",
+    "@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.7",
-    "@khanacademy/wonder-blocks-layout": "^2.0.7",
+    "@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.7"
+    "@khanacademy/wonder-blocks-typography": "^2.0.9"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.6"
+    "wb-dev-build-settings": "^0.9.7"
   }
 }