@khanacademy/wonder-blocks-search-field 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-search-field
 
+## 1.0.4
+
+### Patch Changes
+
+-   b3960766: Made SearchField not anonymous
+
 ## 1.0.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -15,7 +15,7 @@ const defaultLabels = {
 };
 
 const _excluded = ["clearAriaLabel", "disabled", "light", "id", "value", "placeholder", "style", "testId", "onClick", "onChange", "onFocus", "onBlur"];
-const SearchField = React.forwardRef((props, ref) => {
+const SearchField = React.forwardRef(function SearchField(props, ref) {
   const {
     clearAriaLabel = defaultLabels.clearSearch,
     disabled = false,

package/dist/index.js

@@ -2331,7 +2331,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,
@@ -6443,18 +6443,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 +6463,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 +6494,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 +6863,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 +7318,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__(27);
+  /***/
+},
+/* 6 */
+
+/***/
+function (module, exports) {
+  module.exports = __webpack_require__(8);
+  /***/
+},
 /* 7 */
 
 /***/
@@ -7442,7 +7441,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 +7457,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 +7465,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 +7473,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 +7503,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 +7589,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 +7667,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 +7731,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) */
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-search-field",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "design": "v1",
   "description": "Search Field components for Wonder Blocks.",
   "main": "dist/index.js",

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,