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

package/CHANGELOG.md

@@ -1,10 +1,32 @@
 # @khanacademy/wonder-blocks-search-field
 
+## 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
+
+-   9ecc853d: Wrap the field in a UniqueIDProvider
+
+## 1.0.1
+
+### Patch Changes
+
+-   9f8ca907: Added forwardRef so it can be used by dropdown
+
 ## 1.0.0
+
 ### Major Changes
 
-- 2d9198ff: Create SearchField component
+-   2d9198ff: Create SearchField component
 
 ### Minor Changes
 
-- 80aebdc2: Adds `wonder-blocks-search-field` package
+-   80aebdc2: Adds `wonder-blocks-search-field` package

package/dist/es/index.js

@@ -1,45 +1,21 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { StyleSheet } from 'aphrodite';
 import { styles as styles$1 } from '@khanacademy/wonder-blocks-typography';
-import { View } from '@khanacademy/wonder-blocks-core';
+import { IDProvider, View } from '@khanacademy/wonder-blocks-core';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import { TextField } from '@khanacademy/wonder-blocks-form';
 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}
- * />
- * ```
- */
-function SearchField(props) {
+const SearchField = React.forwardRef((props, ref) => {
   const {
     clearAriaLabel = defaultLabels.clearSearch,
     disabled = false,
@@ -56,13 +32,13 @@ function SearchField(props) {
   } = props,
         otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const innerRef = React.useRef(null);
+
   const handleClear = () => {
-    // Empty the search text.
-    onChange(""); // Focus back on the text field since the clear button disappears after
-    // the field is cleared.
+    var _innerRef$current;
 
-    const currentField = ReactDOM.findDOMNode(document.getElementById(id));
-    currentField.focus();
+    onChange("");
+    innerRef == null ? void 0 : (_innerRef$current = innerRef.current) == null ? void 0 : _innerRef$current.focus();
   };
 
   const maybeRenderClearIconButton = () => {
@@ -70,7 +46,7 @@ function SearchField(props) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(IconButton, {
+    return React.createElement(IconButton, {
       icon: icons.dismiss,
       kind: "tertiary",
       onClick: handleClear,
@@ -79,17 +55,20 @@ function SearchField(props) {
     });
   };
 
-  return /*#__PURE__*/React.createElement(View, {
+  return React.createElement(IDProvider, {
+    id: id,
+    scope: "search-field"
+  }, 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({
-    id: id,
+  }), React.createElement(TextField, _extends({
+    id: `${uniqueId}-field`,
     type: "text",
     disabled: disabled,
     light: light,
@@ -97,11 +76,18 @@ function SearchField(props) {
     onFocus: onFocus,
     onBlur: onBlur,
     placeholder: placeholder,
+    ref: node => {
+      if (ref) {
+        ref.current = node;
+      }
+
+      innerRef.current = node;
+    },
     value: value,
     style: [styles.inputStyleReset, styles$1.LabelMedium],
     testId: testId
-  }, otherProps)), maybeRenderClearIconButton());
-}
+  }, otherProps)), maybeRenderClearIconButton()));
+});
 const styles = StyleSheet.create({
   inputContainer: {
     boxSizing: "border-box",