@khanacademy/wonder-blocks-dropdown 2.6.7 → 2.6.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.6.8
+
+### Patch Changes
+
+-   f36d2f21: Use `react-window` conditionally (80+ items)
+
 ## 2.6.7
 
 ### Patch Changes

package/dist/es/index.js

@@ -11,11 +11,11 @@ import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import ReactDOM from 'react-dom';
-import { Popper } from 'react-popper';
 import { VariableSizeList } from 'react-window';
-import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import { Popper } from 'react-popper';
+import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 
 const keyCodes = {
@@ -299,7 +299,7 @@ const styles$7 = StyleSheet.create({
   }
 });
 
-const _excluded$6 = ["disabled", "label", "role", "selected", "testId", "style", "value", "onClick", "onToggle", "variant"];
+const _excluded$5 = ["disabled", "label", "role", "selected", "testId", "style", "value", "onClick", "onToggle", "variant"];
 
 /**
  * For option items that can be selected in a dropdown, selection denoted either
@@ -346,7 +346,7 @@ class OptionItem extends React.Component {
       testId,
       style
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$6);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
 
     const ClickableBehavior = getClickableBehavior();
     const CheckComponent = this.getCheckComponent();
@@ -909,7 +909,76 @@ class DropdownCoreVirtualized extends React.Component {
 
 var DropdownCoreVirtualized$1 = withActionScheduler(DropdownCoreVirtualized);
 
-const _excluded$5 = ["pointerEvents"];
+const modifiers = [{
+  name: "preventOverflow",
+  options: {
+    rootBoundary: "viewport",
+    // Allows to overlap the popper in case there's no more vertical
+    // room in the viewport.
+    altAxis: true,
+    // Also needed to make sure the Popper will be displayed correctly
+    // in different contexts (e.g inside a Modal)
+    tether: false
+  }
+}];
+
+/**
+ * A wrapper for PopperJS that renders the children inside a portal.
+ */
+function DropdownPopper({
+  children,
+  alignment = "left",
+  onPopperElement,
+  referenceElement
+}) {
+  // If we are in a modal, we find where we should be portalling the menu by
+  // using the helper function from the modal package on the opener element.
+  // If we are not in a modal, we use body as the location to portal to.
+  const modalHost = maybeGetPortalMountedModalHostElement(referenceElement) || document.querySelector("body");
+
+  if (!modalHost) {
+    return null;
+  }
+
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
+    innerRef: node => {
+      if (node && onPopperElement) {
+        onPopperElement(node);
+      }
+    },
+    referenceElement: referenceElement,
+    strategy: "fixed",
+    placement: alignment === "left" ? "bottom-start" : "bottom-end",
+    modifiers: modifiers
+  }, ({
+    placement,
+    ref,
+    style,
+    hasPopperEscaped,
+    isReferenceHidden
+  }) => {
+    const shouldHidePopper = !!(hasPopperEscaped || isReferenceHidden);
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      style: style,
+      "data-test-id": "dropdown-popper",
+      "data-placement": placement
+    }, children(shouldHidePopper));
+  }), modalHost);
+}
+
+/**
+ * The number of options to apply the virtualized list to.
+ *
+ * NOTE: The threshold is defined taking into account performance
+ * implications (e.g. process input events for users should not be longer
+ * than 100ms).
+ * @see https://web.dev/rail/?utm_source=devtools#goals-and-guidelines
+ *
+ * TODO(juan, WB-1263): Improve performance by refactoring this component.
+ */
+
+const VIRTUALIZE_THRESHOLD = 125;
 
 /**
  * A core dropdown component that takes an opener and children to display as
@@ -1092,6 +1161,18 @@ class DropdownCore extends React.Component {
       }
     };
 
+    this.handleItemClick = (focusIndex, item) => {
+      this.handleClickFocus(focusIndex);
+
+      if (item.component.props.onClick) {
+        item.component.props.onClick();
+      }
+
+      if (item.populatedProps.onClick) {
+        item.populatedProps.onClick();
+      }
+    };
+
     this.resetFocusedIndex();
     this.state = {
       prevItems: this.props.items,
@@ -1101,7 +1182,7 @@ class DropdownCore extends React.Component {
         noResults: defaultLabels.noResults
       }, props.labels)
     };
-    this.listRef = /*#__PURE__*/React.createRef();
+    this.virtualizedListRef = /*#__PURE__*/React.createRef();
   }
 
   componentDidMount() {
@@ -1225,8 +1306,13 @@ class DropdownCore extends React.Component {
   }
 
   scheduleToFocusCurrentItem() {
-    // wait for windowed items to be recalculated
-    this.props.schedule.animationFrame(() => this.focusCurrentItem());
+    if (this.shouldVirtualizeList()) {
+      // wait for windowed items to be recalculated
+      this.props.schedule.animationFrame(() => this.focusCurrentItem());
+    } else {
+      // immediately focus the current item if we're not virtualizing
+      this.focusCurrentItem();
+    }
   }
 
   focusCurrentItem() {
@@ -1234,12 +1320,12 @@ class DropdownCore extends React.Component {
 
     if (fousedItemRef) {
       // force react-window to scroll to ensure the focused item is visible
-      if (this.listRef.current) {
+      if (this.virtualizedListRef.current) {
         // Our focused index does not include disabled items, but the
         // react-window index system does include the disabled items
         // in the count.  So we need to use "originalIndex", which
         // does account for disabled items.
-        this.listRef.current.scrollToItem(fousedItemRef.originalIndex);
+        this.virtualizedListRef.current.scrollToItem(fousedItemRef.originalIndex);
       }
 
       const node = ReactDOM.findDOMNode(fousedItemRef.ref.current);
@@ -1323,13 +1409,86 @@ class DropdownCore extends React.Component {
 
     return null;
   }
+  /**
+   * Handles click events for each item in the dropdown.
+   */
+
+
+  /**
+   * Determines which rendering strategy we are going to apply to the options
+   * list.
+   */
+  shouldVirtualizeList() {
+    // Verify if the list is long enough to be virtualized (passes the
+    // threshold).
+    return this.props.items.length > VIRTUALIZE_THRESHOLD;
+  }
+  /**
+   * Renders the non-virtualized list of items.
+   */
+
+
+  renderList() {
+    let focusCounter = 0;
+    const itemRole = this.getItemRole(); // if we don't need to virtualize, we can render the list directly
+
+    return this.props.items.map((item, index) => {
+      if (SeparatorItem.isClassOf(item.component)) {
+        return item.component;
+      }
+
+      const {
+        component,
+        focusable,
+        populatedProps
+      } = item;
+
+      if (focusable) {
+        focusCounter += 1;
+      }
+
+      const focusIndex = focusCounter - 1; // The reference to the item is used to restore focus.
+
+      const currentRef = this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null; // Render the SearchField component.
+
+      if (SearchTextInput.isClassOf(component)) {
+        return /*#__PURE__*/React.cloneElement(component, _extends({}, populatedProps, {
+          key: "search-text-input",
+          // pass the current ref down to the input element
+          itemRef: currentRef,
+          // override to avoid losing focus when pressing a key
+          onClick: () => {
+            this.handleClickFocus(0);
+            this.focusCurrentItem();
+          },
+          // apply custom styles
+          style: searchInputStyle
+        }));
+      } // Render OptionItem and/or ActionItem elements.
+
+
+      return /*#__PURE__*/React.cloneElement(component, _extends({}, populatedProps, {
+        key: index,
+        onClick: () => {
+          this.handleItemClick(focusIndex, item);
+        },
+        // Only pass the ref if the item is focusable.
+        ref: focusable ? currentRef : null,
+        role: itemRole
+      }));
+    });
+  }
   /**
    * Process the items and wrap them into an array that react-window can
-   * interpret
+   * interpret.
+   *
+   * NOTE: The main difference with the collection in renderList() is that we
+   * massage the items to be able to clone them later in
+   * DropdownVirtualizedItem, where as renderList() clones the items directly.
    */
 
 
-  parseItemsList() {
+  parseVirtualizedItems() {
     let focusCounter = 0;
     const itemRole = this.getItemRole();
     return this.props.items.map((item, index) => {
@@ -1358,21 +1517,26 @@ class DropdownCore extends React.Component {
         role: itemRole,
         ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
         onClick: () => {
-          this.handleClickFocus(focusIndex);
-
-          if (item.component.props.onClick) {
-            item.component.props.onClick();
-          }
-
-          if (item.populatedProps.onClick) {
-            item.populatedProps.onClick();
-          }
+          this.handleItemClick(focusIndex, item);
         }
       });
     });
   }
+  /**
+   * Render the items using a virtualized list
+   */
+
+
+  renderVirtualizedList() {
+    // preprocess items data to pass it to the renderer
+    const virtualizedItems = this.parseVirtualizedItems();
+    return /*#__PURE__*/React.createElement(DropdownCoreVirtualized$1, {
+      data: virtualizedItems,
+      listRef: this.virtualizedListRef
+    });
+  }
 
-  renderItems(isReferenceHidden) {
+  renderDropdownMenu(listRenderer, isReferenceHidden) {
     const {
       dropdownStyle,
       light,
@@ -1381,9 +1545,7 @@ class DropdownCore extends React.Component {
     // It's only used if the element exists in the DOM
 
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
-    const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0; // preprocess items data to pass it to the renderer
-
-    const itemsList = this.parseItemsList();
+    const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
     return /*#__PURE__*/React.createElement(View // Stop propagation to prevent the mouseup listener on the
     // document from closing the menu.
     , {
@@ -1392,66 +1554,27 @@ class DropdownCore extends React.Component {
       style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, {
         minWidth: minDropdownWidth
       }, dropdownStyle]
-    }, /*#__PURE__*/React.createElement(DropdownCoreVirtualized$1, {
-      data: itemsList,
-      listRef: this.listRef
-    }), this.maybeRenderNoResults());
+    }, listRenderer, this.maybeRenderNoResults());
   }
 
   renderDropdown() {
     const {
       alignment,
       openerElement
-    } = this.props; // If we are in a modal, we find where we should be portalling the menu
-    // by using the helper function from the modal package on the opener
-    // element.
-    // If we are not in a modal, we use body as the location to portal to.
-
-    const modalHost = maybeGetPortalMountedModalHostElement(openerElement) || document.querySelector("body");
-
-    if (modalHost) {
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
-        innerRef: node => {
-          if (node) {
-            this.popperElement = node;
-          }
-        },
-        referenceElement: this.props.openerElement,
-        strategy: "fixed",
-        placement: alignment === "left" ? "bottom-start" : "bottom-end",
-        modifiers: [{
-          name: "preventOverflow",
-          options: {
-            rootBoundary: "viewport",
-            // Allows to overlap the popper in case there's
-            // no more vertical room in the viewport.
-            altAxis: true,
-            // Also needed to make sure the Popper will be
-            // displayed correctly in different contexts
-            // (e.g inside a Modal)
-            tether: false
-          }
-        }]
-      }, ({
-        placement,
-        ref,
-        style,
-        hasPopperEscaped,
-        isReferenceHidden
-      }) => {
-        // For some reason react-popper includes `pointerEvents: "none"`
-        // in the `style` it passes to us, but only when running the tests.
-        const restStyle = _objectWithoutPropertiesLoose(style, _excluded$5);
-
-        return /*#__PURE__*/React.createElement("div", {
-          ref: ref,
-          style: restStyle,
-          "data-placement": placement
-        }, this.renderItems(hasPopperEscaped || isReferenceHidden));
-      }), modalHost);
-    }
-
-    return null;
+    } = this.props; // Preprocess the items that are used inside the Popper instance. By
+    // doing this, we optimize the list to be processed only one time
+    // instead of every time popper changes.
+    // NOTE: This improves the performance impact of the dropdown by
+    // reducing the execution time up to 2.5X.
+
+    const listRenderer = this.shouldVirtualizeList() ? this.renderVirtualizedList() : this.renderList();
+    return /*#__PURE__*/React.createElement(DropdownPopper, {
+      alignment: alignment,
+      onPopperElement: popperElement => {
+        this.popperElement = popperElement;
+      },
+      referenceElement: openerElement
+    }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
   }
 
   render() {