@khanacademy/wonder-blocks-search-field 1.0.2 → 1.0.5

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @khanacademy/wonder-blocks-search-field
 
+## 1.0.5
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+    -   @khanacademy/wonder-blocks-icon@1.2.28
+    -   @khanacademy/wonder-blocks-icon-button@3.4.7
+    -   @khanacademy/wonder-blocks-typography@1.1.32
+
+## 1.0.4
+
+### Patch Changes
+
+-   b3960766: Made SearchField not anonymous
+
+## 1.0.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-icon@1.2.27
+-   @khanacademy/wonder-blocks-icon-button@3.4.6
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -10,35 +10,12 @@ import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import Color from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 
-// The default labels that will be used by different components
 const defaultLabels = {
   clearSearch: "Clear search"
 };
 
 const _excluded = ["clearAriaLabel", "disabled", "light", "id", "value", "placeholder", "style", "testId", "onClick", "onChange", "onFocus", "onBlur"];
-
-/**
- * Search Field. A TextField with a search icon on its left side
- * and an X icon on its right side.
- *
- * ### Usage
- * ```jsx
- * import {SearchField} from "@khanacademy/wonder-blocks-search-field";
- *
- * const [value, setValue] = React.useState("");
- *
- * const handleChange = (newValue: string) => {
- *     setValue(newValue);
- * };
- *
- * <SearchField
- *     id="some-id"
- *     value={value}
- *     onChange={handleChange}
- * />
- * ```
- */
-const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
+const SearchField = React.forwardRef(function SearchField(props, ref) {
   const {
     clearAriaLabel = defaultLabels.clearSearch,
     disabled = false,
@@ -53,20 +30,14 @@ const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, _excluded); // We can't just use ref.current to clear the input because ref isn't
-  // always being passed in, so we use an innerRef to allow the
-  // handleClear() function to focus on the input element ref.
-
+        otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   const innerRef = React.useRef(null);
 
   const handleClear = () => {
     var _innerRef$current;
 
-    // Empty the search text.
-    onChange(""); // Focus back on the text field since the clear button disappears after
-    // the field is cleared.
-
+    onChange("");
     innerRef == null ? void 0 : (_innerRef$current = innerRef.current) == null ? void 0 : _innerRef$current.focus();
   };
 
@@ -75,7 +46,7 @@ const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(IconButton, {
+    return React.createElement(IconButton, {
       icon: icons.dismiss,
       kind: "tertiary",
       onClick: handleClear,
@@ -84,19 +55,19 @@ const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
   };
 
-  return /*#__PURE__*/React.createElement(IDProvider, {
+  return React.createElement(IDProvider, {
     id: id,
     scope: "search-field"
-  }, uniqueId => /*#__PURE__*/React.createElement(View, {
+  }, uniqueId => React.createElement(View, {
     onClick: onClick,
     style: [styles.inputContainer, style]
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, React.createElement(Icon, {
     icon: icons.search,
     size: "medium",
     color: Color.offBlack64,
     style: styles.searchIcon,
     "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement(TextField, _extends({
+  }), React.createElement(TextField, _extends({
     id: `${uniqueId}-field`,
     type: "text",
     disabled: disabled,
@@ -106,10 +77,7 @@ const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
     onBlur: onBlur,
     placeholder: placeholder,
     ref: node => {
-      // We have to set the value of both refs to
-      // the HTMLInputElement from TextField.
       if (ref) {
-        // $FlowIgnore[prop-missing]
         ref.current = node;
       }
 

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 24);
+/******/ 	return __webpack_require__(__webpack_require__.s = 26);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -119,15 +119,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var history__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
-/* harmony import */ var mini_create_react_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
+/* harmony import */ var mini_create_react_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21);
 /* harmony import */ var tiny_invariant__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2);
-/* harmony import */ var path_to_regexp__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(14);
+/* harmony import */ var path_to_regexp__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(15);
 /* harmony import */ var path_to_regexp__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(path_to_regexp__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(32);
+/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(16);
 /* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react_is__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(7);
-/* harmony import */ var hoist_non_react_statics__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(20);
+/* harmony import */ var hoist_non_react_statics__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(22);
 /* harmony import */ var hoist_non_react_statics__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(hoist_non_react_statics__WEBPACK_IMPORTED_MODULE_10__);
 
 
@@ -806,8 +806,8 @@ function _extends() {
 /* unused harmony export parsePath */
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return createPath; });
 /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var resolve_pathname__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
-/* harmony import */ var value_equal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(22);
+/* harmony import */ var resolve_pathname__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
+/* harmony import */ var value_equal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24);
 /* harmony import */ var tiny_invariant__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
 
 
@@ -1736,7 +1736,7 @@ function createMemoryHistory(props) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _inheritsLoose; });
-/* harmony import */ var _setPrototypeOf_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(18);
+/* harmony import */ var _setPrototypeOf_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20);
 
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
@@ -1819,7 +1819,7 @@ module.exports = require("aphrodite");
 if (false) { var throwOnDirectAccess, ReactIs; } else {
   // By explicitly using `prop-types` you are opting into new production behavior.
   // http://fb.me/prop-types-in-prod
-  module.exports = __webpack_require__(28)();
+  module.exports = __webpack_require__(30)();
 }
 
 
@@ -1836,16 +1836,17 @@ module.exports = require("@khanacademy/wonder-blocks-icon");
 module.exports = require("@khanacademy/wonder-blocks-color");
 
 /***/ }),
-/* 13 */
+/* 13 */,
+/* 14 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-typography");
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var isarray = __webpack_require__(31)
+var isarray = __webpack_require__(33)
 
 /**
  * Expose `pathToRegexp`.
@@ -2274,7 +2275,19 @@ function pathToRegexp (path, keys, options) {
 
 
 /***/ }),
-/* 15 */
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+if (true) {
+  module.exports = __webpack_require__(34);
+} else {}
+
+
+/***/ }),
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2282,13 +2295,13 @@ function pathToRegexp (path, keys, options) {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);
+/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(18);
 /* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_form__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
+/* harmony import */ var _khanacademy_wonder_blocks_form__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19);
 /* harmony import */ var _khanacademy_wonder_blocks_form__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_form__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(11);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__);
@@ -2296,7 +2309,7 @@ function pathToRegexp (path, keys, options) {
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(6);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(23);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(25);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -2331,7 +2344,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * />
  * ```
  */
-const SearchField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => {
+const SearchField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"](function SearchField(props, ref) {
   const {
     clearAriaLabel = _util_constants_js__WEBPACK_IMPORTED_MODULE_9__[/* defaultLabels */ "a"].clearSearch,
     disabled = false,
@@ -2448,13 +2461,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* harmony default export */ __webpack_exports__["a"] = (SearchField);
 
 /***/ }),
-/* 16 */
+/* 18 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon-button");
 
 /***/ }),
-/* 17 */
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports =
@@ -2742,7 +2755,7 @@ function (module, exports) {
 
 /***/
 function (module, exports) {
-  module.exports = __webpack_require__(13);
+  module.exports = __webpack_require__(14);
   /***/
 },
 /* 5 */
@@ -2811,7 +2824,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 
 /***/
 function (module, exports) {
-  module.exports = __webpack_require__(25);
+  module.exports = __webpack_require__(27);
   /***/
 },
 /* 8 */
@@ -2859,8 +2872,22 @@ function (module, __webpack_exports__, __webpack_require__) {
    * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
    * label and description props.
    *
+   * If used by itself, a checkbox provides two options - checked and unchecked.
+   * A group of checkboxes can be used to allow a user to select multiple values
+   * from a list of options.
+   *
    * If you want a whole group of Checkbox[es] that are related, see the Choice
    * and CheckboxGroup components.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {Checkbox} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [checked, setChecked] = React.useState(false);
+   *
+   * <Checkbox checked={checked} onChange={setChecked} />
+   * ```
    */
 
 
@@ -3978,7 +4005,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 
 /***/
 function (module, exports) {
-  module.exports = __webpack_require__(26);
+  module.exports = __webpack_require__(28);
   /***/
 },
 /* 17 */
@@ -4703,7 +4730,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 ]);
 
 /***/ }),
-/* 18 */
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4718,7 +4745,7 @@ function _setPrototypeOf(o, p) {
 }
 
 /***/ }),
-/* 19 */
+/* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4902,16 +4929,16 @@ var index = react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext || create
 
 /* harmony default export */ __webpack_exports__["a"] = (index);
 
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(30)))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(32)))
 
 /***/ }),
-/* 20 */
+/* 22 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var reactIs = __webpack_require__(34);
+var reactIs = __webpack_require__(16);
 
 /**
  * Copyright 2015, Yahoo! Inc.
@@ -5015,7 +5042,7 @@ module.exports = hoistNonReactStatics;
 
 
 /***/ }),
-/* 21 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5097,7 +5124,7 @@ function resolvePathname(to, from) {
 
 
 /***/ }),
-/* 22 */
+/* 24 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5140,7 +5167,7 @@ function valueEqual(a, b) {
 
 
 /***/ }),
-/* 23 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5151,17 +5178,17 @@ const defaultLabels = {
 };
 
 /***/ }),
-/* 24 */
+/* 26 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_search_field_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(15);
+/* harmony import */ var _components_search_field_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(17);
 
 /* harmony default export */ __webpack_exports__["default"] = (_components_search_field_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
 
 /***/ }),
-/* 25 */
+/* 27 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports =
@@ -6053,7 +6080,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 ]);
 
 /***/ }),
-/* 26 */
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports =
@@ -6443,18 +6470,19 @@ function (module, __webpack_exports__, __webpack_require__) {
    * 3. Keyup (spacebar/enter) -> focus state
    *
    * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
-   * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
-   * onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the component
-   * that has the ClickableBehavior. You cannot override these handlers without
-   * potentially breaking the functionality of ClickableBehavior.
+   * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel,
+   * onKeyDown, onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the
+   * component that has the ClickableBehavior. You cannot override these handlers
+   * without potentially breaking the functionality of ClickableBehavior.
    *
-   * There are internal props triggerOnEnter and triggerOnSpace that can be set
-   * to false if one of those keys shouldn't count as a click on this component.
-   * Be careful about setting those to false -- make certain that the component
+   * There are internal props triggerOnEnter and triggerOnSpace that can be set to
+   * false if one of those keys shouldn't count as a click on this component. Be
+   * careful about setting those to false -- make certain that the component
    * shouldn't process that key.
    *
-   * See [this document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
-   * for a more thorough explanation of expected behaviors and potential cavaets.
+   * See [this
+     document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
+     for a more thorough explanation of expected behaviors and potential cavaets.
    *
    * `ClickableBehavior` accepts a function as `children` which is passed state
    * and an object containing event handlers and some other props. The `children`
@@ -6462,32 +6490,30 @@ function (module, __webpack_exports__, __webpack_require__) {
    *
    * Example:
    *
-   * ```js
-   * class MyClickableComponent extends React.Component<Props> {
-   *     render(): React.Node {
-   *         const ClickableBehavior = getClickableBehavior();
-   *         return <ClickableBehavior
-   *             disabled={this.props.disabled}
-   *             onClick={this.props.onClick}
-   *         >
-   *             {({hovered}, childrenProps) =>
-   *                 <RoundRect
-   *                      textcolor='white'
-   *                      backgroundColor={hovered ? 'red' : 'blue'}}
-   *                      {...childrenProps}
-   *                 >
-   *                      {this.props.children}
-   *                 </RoundRect>
-   *             }
-   *         </ClickableBehavior>
-   *     }
+   * ```jsx
+   * function MyClickableComponent(props: Props) {
+   *   const ClickableBehavior = getClickableBehavior();
+   *
+   *   return (
+   *       <ClickableBehavior disabled={props.disabled} onClick={props.onClick}>
+   *           {({hovered}, childrenProps) => (
+   *               <RoundRect
+   *                   textcolor="white"
+   *                   backgroundColor={hovered ? "red" : "blue"}
+   *                   {...childrenProps}
+   *               >
+   *                   {props.children}
+   *               </RoundRect>
+   *           )}
+   *      </ClickableBehavior>
+   *   );
    * }
    * ```
    *
-   * This follows a pattern called [Function as Child Components]
-   * (https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
+   * This follows a pattern called [Function as Child
+   * Components](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
    *
-   * WARNING: Do not use this component directly, use getClickableBehavior
+   * **WARNING:** Do not use this component directly, use getClickableBehavior
    * instead. getClickableBehavior takes three arguments (href, directtNav, and
    * router) and returns either the default ClickableBehavior or a react-router
    * aware version.
@@ -6495,9 +6521,9 @@ function (module, __webpack_exports__, __webpack_require__) {
    * The react-router aware version is returned if `router` is a react-router-dom
    * router, `skipClientNav` is not `true`, and `href` is an internal URL.
    *
-   * The `router` can be accessed via __RouterContext (imported from 'react-router')
-   * from a component rendered as a descendant of a BrowserRouter.
-   * See https://reacttraining.com/react-router/web/guides/basic-components.
+   * The `router` can be accessed via __RouterContext (imported from
+     'react-router') from a component rendered as a descendant of a BrowserRouter.
+     See https://reacttraining.com/react-router/web/guides/basic-components.
    */
 
   class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -6864,100 +6890,6 @@ function (module, __webpack_exports__, __webpack_require__) {
 },
 /* 3 */
 
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return getClickableBehavior;
-  });
-  /* harmony import */
-
-
-  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-  /* harmony import */
-
-
-  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-  /* harmony import */
-
-
-  var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-  /* harmony import */
-
-
-  var react_router_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_1__);
-  /* harmony import */
-
-
-  var _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-  /* harmony import */
-
-
-  var _is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
-  /**
-   * Returns either the default ClickableBehavior or a react-router aware version.
-   *
-   * The react-router aware version is returned if `router` is a react-router-dom
-   * router, `skipClientNav` is not `true`, and `href` is an internal URL.
-   *
-   * The `router` can be accessed via __RouterContext (imported from 'react-router')
-   * from a component rendered as a descendant of a BrowserRouter.
-   * See https://reacttraining.com/react-router/web/guides/basic-components.
-   */
-
-
-  const ClickableBehaviorWithRouter = Object(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["withRouter"])(_components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[
-  /* default */
-  "a"]);
-
-  function getClickableBehavior(
-  /**
-   * The URL to navigate to.
-   */
-  href,
-  /**
-   * Should we skip using the react router and go to the page directly.
-   */
-  skipClientNav,
-  /**
-   * router object added to the React context object by react-router-dom.
-   */
-  router) {
-    if (router && skipClientNav !== true && href && Object(_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__[
-    /* isClientSideUrl */
-    "a"])(href)) {
-      // We cast to `any` here since the type of ClickableBehaviorWithRouter
-      // is slightly different from the return type of this function.
-      // TODO(WB-1037): Always return the wrapped version once all routes have
-      // been ported to the app-shell in webapp.
-      return ClickableBehaviorWithRouter;
-    }
-
-    return _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[
-    /* default */
-    "a"];
-  }
-  /***/
-
-},
-/* 4 */
-
-/***/
-function (module, exports) {
-  module.exports = __webpack_require__(27);
-  /***/
-},
-/* 5 */
-
-/***/
-function (module, exports) {
-  module.exports = __webpack_require__(8);
-  /***/
-},
-/* 6 */
-
 /***/
 function (module, exports) {
   module.exports =
@@ -7413,6 +7345,100 @@ function (module, exports) {
   /***/
 
 },
+/* 4 */
+
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony export (binding) */
+
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return getClickableBehavior;
+  });
+  /* harmony import */
+
+
+  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+  /* harmony import */
+
+
+  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+  /* harmony import */
+
+
+  var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+  /* harmony import */
+
+
+  var react_router_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_1__);
+  /* harmony import */
+
+
+  var _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+  /* harmony import */
+
+
+  var _is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
+  /**
+   * Returns either the default ClickableBehavior or a react-router aware version.
+   *
+   * The react-router aware version is returned if `router` is a react-router-dom
+   * router, `skipClientNav` is not `true`, and `href` is an internal URL.
+   *
+   * The `router` can be accessed via __RouterContext (imported from 'react-router')
+   * from a component rendered as a descendant of a BrowserRouter.
+   * See https://reacttraining.com/react-router/web/guides/basic-components.
+   */
+
+
+  const ClickableBehaviorWithRouter = Object(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["withRouter"])(_components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[
+  /* default */
+  "a"]);
+
+  function getClickableBehavior(
+  /**
+   * The URL to navigate to.
+   */
+  href,
+  /**
+   * Should we skip using the react router and go to the page directly.
+   */
+  skipClientNav,
+  /**
+   * router object added to the React context object by react-router-dom.
+   */
+  router) {
+    if (router && skipClientNav !== true && href && Object(_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__[
+    /* isClientSideUrl */
+    "a"])(href)) {
+      // We cast to `any` here since the type of ClickableBehaviorWithRouter
+      // is slightly different from the return type of this function.
+      // TODO(WB-1037): Always return the wrapped version once all routes have
+      // been ported to the app-shell in webapp.
+      return ClickableBehaviorWithRouter;
+    }
+
+    return _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[
+    /* default */
+    "a"];
+  }
+  /***/
+
+},
+/* 5 */
+
+/***/
+function (module, exports) {
+  module.exports = __webpack_require__(29);
+  /***/
+},
+/* 6 */
+
+/***/
+function (module, exports) {
+  module.exports = __webpack_require__(8);
+  /***/
+},
 /* 7 */
 
 /***/
@@ -7442,7 +7468,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /* harmony import */
 
 
-  var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+  var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
   /* harmony import */
 
 
@@ -7458,7 +7484,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /* harmony import */
 
 
-  var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
+  var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
   /* harmony import */
 
 
@@ -7466,7 +7492,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /* harmony import */
 
 
-  var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
+  var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
   /* harmony import */
 
 
@@ -7474,7 +7500,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /* harmony import */
 
 
-  var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
+  var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4);
   /* harmony import */
 
 
@@ -7504,11 +7530,20 @@ function (module, __webpack_exports__, __webpack_require__) {
   /**
    * A component to turn any custom component into a clickable one.
    *
-   * Works by wrapping ClickableBehavior around the child element and styling the
-   * child appropriately and encapsulates routing logic which can be customized.
-   * Expects a function which returns an element as it's child.
+   * Works by wrapping `ClickableBehavior` around the child element and styling
+   * the child appropriately and encapsulates routing logic which can be
+   * customized. Expects a function which returns an element as its child.
+   *
+   * Clickable allows your components to:
+   *
+   * - Handle mouse / touch / keyboard events
+   * - Match the standard behavior of the given role
+   * - Apply custom styles based on pressed / focused / hovered state
+   * - Perform Client Side Navigation when href is passed and the component is a
+   *   descendent of a react-router Router.
+   *
+   * ### Usage
    *
-   * Example usage:
    * ```jsx
    * <Clickable onClick={() => alert("You clicked me!")}>
    *     {({hovered, focused, pressed}) =>
@@ -7581,7 +7616,7 @@ function (module, __webpack_exports__, __webpack_require__) {
       /* default */
       "a"])(href, skipClientNav, router);
 
-      const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
+      const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
 
       if (beforeNav) {
         return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
@@ -7659,10 +7694,22 @@ function (module, __webpack_exports__, __webpack_require__) {
       cursor: "pointer"
     },
     focused: {
-      outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.blue}`
+      ":focus": {
+        outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.blue}`
+      }
     },
     focusedLight: {
       outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.white}`
+    },
+    disabled: {
+      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.offBlack32,
+      cursor: "not-allowed",
+      ":focus": {
+        outline: "none"
+      },
+      ":focus-visible": {
+        outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.blue}`
+      }
     }
   });
   /***/
@@ -7711,7 +7758,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   /* harmony import */
 
 
-  var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+  var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
   /* harmony reexport (safe) */
 
 
@@ -7735,7 +7782,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 ]);
 
 /***/ }),
-/* 27 */
+/* 29 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8051,7 +8098,7 @@ if (false) { var ariaCurrentType; }
 
 
 /***/ }),
-/* 28 */
+/* 30 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -8064,7 +8111,7 @@ if (false) { var ariaCurrentType; }
 
 
 
-var ReactPropTypesSecret = __webpack_require__(29);
+var ReactPropTypesSecret = __webpack_require__(31);
 
 function emptyFunction() {}
 function emptyFunctionWithReset() {}
@@ -8122,7 +8169,7 @@ module.exports = function() {
 
 
 /***/ }),
-/* 29 */
+/* 31 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -8141,7 +8188,7 @@ module.exports = ReactPropTypesSecret;
 
 
 /***/ }),
-/* 30 */
+/* 32 */
 /***/ (function(module, exports) {
 
 var g;
@@ -8167,7 +8214,7 @@ module.exports = g;
 
 
 /***/ }),
-/* 31 */
+/* 33 */
 /***/ (function(module, exports) {
 
 module.exports = Array.isArray || function (arr) {
@@ -8176,19 +8223,7 @@ module.exports = Array.isArray || function (arr) {
 
 
 /***/ }),
-/* 32 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (true) {
-  module.exports = __webpack_require__(33);
-} else {}
-
-
-/***/ }),
-/* 33 */
+/* 34 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -8209,39 +8244,5 @@ exports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return
 exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z;
 
 
-/***/ }),
-/* 34 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (true) {
-  module.exports = __webpack_require__(35);
-} else {}
-
-
-/***/ }),
-/* 35 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/** @license React v16.12.0
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-Object.defineProperty(exports,"__esModule",{value:!0});
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.suspense_list"):
-60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.fundamental"):60117,w=b?Symbol.for("react.responder"):60118,x=b?Symbol.for("react.scope"):60119;function y(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function z(a){return y(a)===m}
-exports.typeOf=y;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;
-exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===v||a.$$typeof===w||a.$$typeof===x)};exports.isAsyncMode=function(a){return z(a)||y(a)===l};exports.isConcurrentMode=z;exports.isContextConsumer=function(a){return y(a)===k};exports.isContextProvider=function(a){return y(a)===h};
-exports.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return y(a)===n};exports.isFragment=function(a){return y(a)===e};exports.isLazy=function(a){return y(a)===t};exports.isMemo=function(a){return y(a)===r};exports.isPortal=function(a){return y(a)===d};exports.isProfiler=function(a){return y(a)===g};exports.isStrictMode=function(a){return y(a)===f};exports.isSuspense=function(a){return y(a)===p};
-
-
 /***/ })
 /******/ ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-search-field",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "design": "v1",
   "description": "Search Field components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -17,17 +17,17 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.26",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.5",
+    "@khanacademy/wonder-blocks-core": "^4.3.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.28",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.7",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }

package/src/components/search-field.js

@@ -108,7 +108,10 @@ type Props = {|
  * ```
  */
 const SearchField: React.AbstractComponent<Props, HTMLInputElement> =
-    React.forwardRef<Props, HTMLInputElement>((props: Props, ref) => {
+    React.forwardRef<Props, HTMLInputElement>(function SearchField(
+        props: Props,
+        ref,
+    ) {
         const {
             clearAriaLabel = defaultLabels.clearSearch,
             disabled = false,