@khanacademy/wonder-blocks-dropdown 2.6.9 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.7.1
+
+### Patch Changes
+
+-   9c2580e6: Fixed the search field focus bug in dropdowns
+
+## 2.7.0
+
+### Minor Changes
+
+-   b3960766: Replaced core elements with Wonder Blocks SearchField (added dependency to SearchField)
+
+### Patch Changes
+
+-   Updated dependencies [b3960766]
+    -   @khanacademy/wonder-blocks-search-field@1.0.4
+
+## 2.6.10
+
+### Patch Changes
+
+-   0b94d616: Adds a max-height value to the dropdown menu to avoid displaying long lists that might cut off on small screen resolutions
+
 ## 2.6.9
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,11 +1,11 @@
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
 import { __RouterContext } from 'react-router';
 import Color, { mix, fade, SemanticColor } from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
-import { LabelMedium, styles as styles$a, LabelLarge } from '@khanacademy/wonder-blocks-typography';
+import { LabelMedium, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import { getClickableBehavior, isClientSideUrl, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
@@ -13,7 +13,7 @@ import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import ReactDOM from 'react-dom';
 import { VariableSizeList } from 'react-window';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
-import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import SearchField from '@khanacademy/wonder-blocks-search-field';
 import { Popper } from 'react-popper';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
@@ -31,14 +31,15 @@ const selectDropdownStyle = {
   marginBottom: Spacing.xSmall_8
 };
 const filterableDropdownStyle = {
-  minHeight: 100,
-  maxHeight: 384
+  minHeight: 100
 };
 const searchInputStyle = {
   margin: Spacing.xSmall_8,
-  marginTop: Spacing.xxxSmall_4
+  marginTop: Spacing.xxxSmall_4,
+  minHeight: "auto"
 };
 const DROPDOWN_ITEM_HEIGHT = 40;
+const MAX_VISIBLE_ITEMS = 9;
 const SEPARATOR_ITEM_HEIGHT = 9;
 const SEARCH_ITEM_HEIGHT = DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop;
 const defaultLabels = {
@@ -93,7 +94,7 @@ class ActionItem extends React.Component {
         hovered,
         focused
       } = state;
-      const defaultStyle = [styles$9.shared, disabled && styles$9.disabled, !disabled && (pressed ? styles$9.active : (hovered || focused) && styles$9.focus), style];
+      const defaultStyle = [styles$8.shared, disabled && styles$8.disabled, !disabled && (pressed ? styles$8.active : (hovered || focused) && styles$8.focus), style];
 
       const props = _extends({
         "data-test-id": testId,
@@ -104,7 +105,7 @@ class ActionItem extends React.Component {
 
       const children = React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
         lang: lang,
-        style: [indent && styles$9.indent, styles$9.label]
+        style: [indent && styles$8.indent, styles$8.label]
       }, label));
 
       if (href && !disabled) {
@@ -135,7 +136,7 @@ ActionItem.defaultProps = {
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
-const styles$9 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   shared: {
     background: white$4,
     color: offBlack$3,
@@ -189,10 +190,10 @@ function Check(props) {
     icon: icons.check,
     size: "small",
     color: disabled ? offBlack32$3 : pressed || hovered || focused ? white$3 : offBlack$2,
-    style: [styles$8.bounds, !selected && styles$8.hide]
+    style: [styles$7.bounds, !selected && styles$7.hide]
   });
 }
-const styles$8 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   bounds: {
     minHeight: 16,
     minWidth: 16
@@ -226,17 +227,17 @@ function Checkbox(props) {
   const bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$2 : white$2;
   const checkColor = disabled ? offBlack32$2 : clickInteraction ? pressed ? activeBlue : blue$2 : white$2;
   return React.createElement(View, {
-    style: [styles$7.checkbox, (clickInteraction || selected && !disabled) && styles$7.noBorder, disabled && styles$7.disabledCheckbox, {
+    style: [styles$6.checkbox, (clickInteraction || selected && !disabled) && styles$6.noBorder, disabled && styles$6.disabledCheckbox, {
       backgroundColor: bgColor
     }]
   }, selected && React.createElement(Icon, {
     icon: checkboxCheck,
     size: "small",
     color: checkColor,
-    style: [disabled && selected && styles$7.disabledCheckFormatting]
+    style: [disabled && selected && styles$6.disabledCheckFormatting]
   }));
 }
-const styles$7 = StyleSheet.create({
+const styles$6 = StyleSheet.create({
   checkbox: {
     minHeight: 16,
     minWidth: 16,
@@ -314,7 +315,7 @@ class OptionItem extends React.Component {
         hovered,
         focused
       } = state;
-      const defaultStyle = [styles$6.itemContainer, pressed ? styles$6.active : (hovered || focused) && styles$6.focus, disabled && styles$6.disabled, style];
+      const defaultStyle = [styles$5.itemContainer, pressed ? styles$5.active : (hovered || focused) && styles$5.focus, disabled && styles$5.disabled, style];
       return React.createElement(View, _extends({}, sharedProps, {
         testId: testId,
         style: defaultStyle,
@@ -327,7 +328,7 @@ class OptionItem extends React.Component {
         hovered: hovered,
         focused: focused
       }), React.createElement(LabelMedium, {
-        style: styles$6.label
+        style: styles$5.label
       }, label));
     });
   }
@@ -346,7 +347,7 @@ const {
   offBlack: offBlack$1,
   offBlack32: offBlack32$1
 } = Color;
-const styles$6 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   itemContainer: {
     flexDirection: "row",
     background: white$1,
@@ -392,14 +393,14 @@ class SeparatorItem extends React.Component {
 
   render() {
     return React.createElement(View, {
-      style: [styles$5.separator, this.props.style],
+      style: [styles$4.separator, this.props.style],
       "aria-hidden": "true"
     });
   }
 
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const styles$5 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   separator: {
     boxShadow: `0 -1px ${Color.offBlack16}`,
     height: 1,
@@ -487,110 +488,38 @@ class DropdownVirtualizedItem extends React.Component {
 }
 
 class SearchTextInput extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      focused: false,
-      labels: _extends({
-        clearSearch: defaultLabels.clearSearch,
-        filter: defaultLabels.filter
-      }, this.props.labels)
-    };
-
-    this.handleChange = e => {
-      e.preventDefault();
-      this.props.onChange(e.target.value);
-    };
-
-    this.handleDismiss = () => {
-      const {
-        onClick,
-        onChange
-      } = this.props;
-      onChange("");
-
-      if (onClick) {
-        onClick();
-      }
-    };
-
-    this.handleBlur = e => {
-      this.setState({
-        focused: false
-      });
-    };
-
-    this.handleFocus = e => {
-      this.setState({
-        focused: true
-      });
-    };
-  }
-
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.labels !== prevProps.labels) {
-      this.setState({
-        labels: _extends({}, this.state.labels, this.props.labels)
-      });
-    }
-  }
-
-  maybeRenderDismissIconButton() {
-    const {
-      searchText
-    } = this.props;
-    const {
-      clearSearch
-    } = this.state.labels;
+  componentDidMount() {
+    if (this.props.autofocus) {
+      var _this$props$itemRef;
 
-    if (searchText.length > 0) {
-      return React.createElement(IconButton, {
-        icon: icons.dismiss,
-        kind: "tertiary",
-        onClick: this.handleDismiss,
-        style: styles$4.dismissIcon,
-        "aria-label": clearSearch
-      });
+      (_this$props$itemRef = this.props.itemRef) == null ? void 0 : _this$props$itemRef.current.focus();
     }
-
-    return null;
   }
 
   render() {
     const {
+      labels,
+      onChange,
       onClick,
       itemRef,
       searchText,
       style,
       testId
     } = this.props;
-    const {
-      filter
-    } = this.state.labels;
-    return React.createElement(View, {
+    return React.createElement(SearchField, {
+      clearAriaLabel: labels.clearSearch,
+      onChange: onChange,
       onClick: onClick,
-      style: [styles$4.inputContainer, this.state.focused && styles$4.focused, style]
-    }, React.createElement(Icon, {
-      icon: icons.search,
-      size: "medium",
-      color: Color.offBlack64,
-      style: styles$4.searchIcon,
-      "aria-hidden": "true"
-    }), React.createElement("input", {
-      type: "text",
-      onChange: this.handleChange,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
+      placeholder: labels.filter,
       ref: itemRef,
-      placeholder: filter,
-      value: searchText,
-      className: css(styles$4.inputStyleReset, styles$a.LabelMedium),
-      "data-test-id": testId
-    }), this.maybeRenderDismissIconButton());
+      style: style,
+      testId: testId,
+      value: searchText
+    });
   }
 
 }
@@ -601,51 +530,31 @@ SearchTextInput.defaultProps = {
   }
 };
 SearchTextInput.__IS_SEARCH_TEXT_INPUT__ = true;
-const styles$4 = StyleSheet.create({
-  inputContainer: {
-    flexDirection: "row",
-    border: `1px solid ${Color.offBlack16}`,
-    borderRadius: Spacing.xxxSmall_4,
-    alignItems: "center",
-    height: DROPDOWN_ITEM_HEIGHT,
-    minHeight: DROPDOWN_ITEM_HEIGHT
-  },
-  focused: {
-    border: `1px solid ${Color.blue}`
-  },
-  searchIcon: {
-    marginLeft: Spacing.xSmall_8,
-    marginRight: Spacing.xSmall_8
-  },
-  dismissIcon: {
-    margin: 0,
-    ":hover": {
-      border: "none"
-    }
-  },
-  inputStyleReset: {
-    display: "flex",
-    flex: 1,
-    background: "inherit",
-    border: "none",
-    outline: "none",
-    "::placeholder": {
-      color: Color.offBlack64
-    },
-    width: "100%",
-    color: "inherit"
-  }
-});
 
-const MAX_VISIBLE_ITEMS = 9;
+function getDropdownMenuHeight(items, initialHeight = 0) {
+  return items.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
+    if (SeparatorItem.isClassOf(item.component)) {
+      return sum + SEPARATOR_ITEM_HEIGHT;
+    } else if (SearchTextInput.isClassOf(item.component)) {
+      return sum + SEARCH_ITEM_HEIGHT;
+    } else {
+      return sum + DROPDOWN_ITEM_HEIGHT;
+    }
+  }, initialHeight);
+}
+function generateDropdownMenuStyles(minWidth, maxHeight) {
+  const styles = StyleSheet.create({
+    dropdownMenu: {
+      minWidth,
+      maxHeight
+    }
+  });
+  return styles.dropdownMenu;
+}
 
 class DropdownCoreVirtualized extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      height: this.getHeight(),
-      width: this.props.width
-    };
+  constructor(props) {
+    super(props);
 
     this.getItemSize = index => {
       const item = this.props.data[index];
@@ -658,6 +567,11 @@ class DropdownCoreVirtualized extends React.Component {
         return DROPDOWN_ITEM_HEIGHT;
       }
     };
+
+    this.state = {
+      height: getDropdownMenuHeight(props.data),
+      width: props.width
+    };
   }
 
   componentDidMount() {
@@ -697,24 +611,12 @@ class DropdownCoreVirtualized extends React.Component {
   }
 
   setHeight() {
-    const height = this.getHeight();
+    const height = getDropdownMenuHeight(this.props.data);
     this.setState({
       height
     });
   }
 
-  getHeight() {
-    return this.props.data.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
-      if (SeparatorItem.isClassOf(item.component)) {
-        return sum + SEPARATOR_ITEM_HEIGHT;
-      } else if (SearchTextInput.isClassOf(item.component)) {
-        return sum + SEARCH_ITEM_HEIGHT;
-      } else {
-        return sum + DROPDOWN_ITEM_HEIGHT;
-      }
-    }, 0);
-  }
-
   renderInitialItems() {
     const {
       data
@@ -1209,7 +1111,8 @@ class DropdownCore extends React.Component {
             this.handleClickFocus(0);
             this.focusCurrentItem();
           },
-          style: searchInputStyle
+          style: searchInputStyle,
+          autofocus: this.focusedIndex === 0
         }));
       }
 
@@ -1242,7 +1145,8 @@ class DropdownCore extends React.Component {
           },
           populatedProps: {
             style: searchInputStyle,
-            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null
+            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
+            autofocus: this.focusedIndex === 0
           }
         });
       }
@@ -1273,12 +1177,12 @@ class DropdownCore extends React.Component {
     } = this.props;
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
+    const initialHeight = 12;
+    const maxDropdownHeight = getDropdownMenuHeight(this.props.items, initialHeight);
     return React.createElement(View, {
       onMouseUp: this.handleDropdownMouseUp,
       role: this.props.role,
-      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, {
-        minWidth: minDropdownWidth
-      }, dropdownStyle]
+      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, generateDropdownMenuStyles(minDropdownWidth, maxDropdownHeight), dropdownStyle]
     }, listRenderer, this.maybeRenderNoResults());
   }