@khanacademy/wonder-blocks-search-field 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @khanacademy/wonder-blocks-search-field
+
+## 1.0.0
+### Major Changes
+
+- 2d9198ff: Create SearchField component
+
+### Minor Changes
+
+- 80aebdc2: Adds `wonder-blocks-search-field` package

package/dist/es/index.js

@@ -0,0 +1,139 @@
+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 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 {
+    clearAriaLabel = defaultLabels.clearSearch,
+    disabled = false,
+    light = false,
+    id,
+    value,
+    placeholder,
+    style,
+    testId,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const handleClear = () => {
+    // Empty the search text.
+    onChange(""); // Focus back on the text field since the clear button disappears after
+    // the field is cleared.
+
+    const currentField = ReactDOM.findDOMNode(document.getElementById(id));
+    currentField.focus();
+  };
+
+  const maybeRenderClearIconButton = () => {
+    if (!value.length) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(IconButton, {
+      icon: icons.dismiss,
+      kind: "tertiary",
+      onClick: handleClear,
+      style: styles.dismissIcon,
+      "aria-label": clearAriaLabel
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: onClick,
+    style: [styles.inputContainer, style]
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icons.search,
+    size: "medium",
+    color: Color.offBlack64,
+    style: styles.searchIcon,
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement(TextField, _extends({
+    id: id,
+    type: "text",
+    disabled: disabled,
+    light: light,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    placeholder: placeholder,
+    value: value,
+    style: [styles.inputStyleReset, styles$1.LabelMedium],
+    testId: testId
+  }, otherProps)), maybeRenderClearIconButton());
+}
+const styles = StyleSheet.create({
+  inputContainer: {
+    boxSizing: "border-box",
+    flexDirection: "row",
+    borderRadius: Spacing.xxxSmall_4,
+    alignItems: "center",
+    height: 40
+  },
+  searchIcon: {
+    marginLeft: Spacing.xSmall_8,
+    marginRight: Spacing.xSmall_8,
+    position: "absolute"
+  },
+  dismissIcon: {
+    margin: 0,
+    position: "absolute",
+    right: 0,
+    ":hover": {
+      border: "none"
+    }
+  },
+  inputStyleReset: {
+    display: "flex",
+    flex: 1,
+    "::placeholder": {
+      color: Color.offBlack64
+    },
+    width: "100%",
+    color: "inherit",
+    paddingLeft: Spacing.large_24 + Spacing.medium_16,
+    paddingRight: Spacing.large_24 + Spacing.medium_16
+  }
+});
+
+export { SearchField as default };