@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/esm/plugins/type-ahead/ui/TypeAheadList.js

@@ -0,0 +1,168 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
+import { themed } from '@atlaskit/theme/components';
+import { ThemeProvider } from 'styled-components';
+import { ICON_HEIGHT } from './TypeAheadListItem';
+import { VariableSizeList as List } from 'react-window';
+import { ResizeObserverProvider } from './hooks/use-resize-observer';
+import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
+import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
+var ITEM_PADDING = 12;
+var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
+var LIST_MAX_HEIGHT = 380;
+var LIST_WIDTH = 320;
+
+var itemTheme = _defineProperty({}, itemThemeNamespace, {
+  padding: {
+    default: {
+      bottom: ITEM_PADDING,
+      left: ITEM_PADDING,
+      right: ITEM_PADDING,
+      top: ITEM_PADDING
+    }
+  },
+  beforeItemSpacing: {
+    default: function _default() {
+      return ITEM_PADDING;
+    }
+  },
+  borderRadius: function borderRadius() {
+    return 0;
+  },
+  hover: {
+    // background: colors.transparent, transparent is not a thing
+    text: colorsText,
+    secondaryText: N200
+  },
+  selected: {
+    background: themed({
+      light: N20,
+      dark: DN70
+    }),
+    text: themed({
+      light: N800,
+      dark: DN600
+    }),
+    secondaryText: themed({
+      light: N200,
+      dark: DN300
+    })
+  }
+});
+
+export var TypeAheadList = /*#__PURE__*/React.memo(function (_ref) {
+  var items = _ref.items,
+      selectedIndex = _ref.selectedIndex,
+      onItemHover = _ref.onItemHover,
+      onItemClick = _ref.onItemClick;
+  var listRef = useRef();
+  var redrawListAtIndex = useCallback(function (index) {
+    listRef.current.resetAfterIndex(index);
+  }, []);
+  var lastVisibleIndexes = useRef({
+    overscanStartIndex: 0,
+    overscanStopIndex: 0,
+    visibleStartIndex: 0,
+    visibleStopIndex: 0
+  });
+  var getFirstVisibleIndex = useCallback(function () {
+    return lastVisibleIndexes.current.overscanStartIndex;
+  }, []);
+
+  var _useDynamicListHeight = useDynamicListHeightCalculation({
+    redrawListAtIndex: redrawListAtIndex,
+    getFirstVisibleIndex: getFirstVisibleIndex,
+    listLength: items.length,
+    listMaxHeight: LIST_MAX_HEIGHT,
+    listItemEstimatedHeight: LIST_ITEM_ESTIMATED_HEIGHT
+  }),
+      getListItemHeight = _useDynamicListHeight.getListItemHeight,
+      setListItemHeight = _useDynamicListHeight.setListItemHeight,
+      renderedListHeight = _useDynamicListHeight.renderedListHeight;
+
+  var onItemsRendered = useCallback(function (props) {
+    lastVisibleIndexes.current = props;
+  }, []);
+  var actions = useMemo(function () {
+    return {
+      onItemClick: onItemClick,
+      onItemHover: onItemHover
+    };
+  }, [onItemClick, onItemHover]);
+  var onScroll = useCallback(function (_ref2) {
+    var scrollUpdateWasRequested = _ref2.scrollUpdateWasRequested;
+
+    if (!scrollUpdateWasRequested) {
+      return;
+    } // In case the user scroll to a non-visible item like press ArrowUp from the first index
+    // We will force the scroll calling the scrollToItem in the useEffect hook
+    // When the scroll happens and we render the elements,
+    // we still need calculate the items height and re-draw the List.
+    // It is possible the item selected became invisible again (because the items height changed)
+    // So, we need to wait for height to be calculated. Then we need to check
+    // if the selected item is visible or not. If it isn't visible we call the scrollToItem again.
+    //
+    // We can't do this check in the first frame because that frame is being used by the resetScreenThrottled
+    // to calculate each height. THen, we can schedule a new frame when this one finishs.
+
+
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        var indexes = lastVisibleIndexes.current;
+        var isSelectedItemVisible = selectedIndex >= indexes.visibleStartIndex && selectedIndex <= indexes.visibleStopIndex;
+
+        if (!isSelectedItemVisible) {
+          listRef.current.scrollToItem(selectedIndex);
+        }
+      });
+    });
+  }, [selectedIndex]);
+  useEffect(function () {
+    if (!listRef.current) {
+      return;
+    }
+
+    listRef.current.scrollToItem(selectedIndex);
+  }, [selectedIndex]);
+  useLayoutEffect(function () {
+    requestAnimationFrame(function () {
+      listRef.current.resetAfterIndex(lastVisibleIndexes.current.overscanStartIndex);
+    });
+  }, [items]);
+
+  if (!Array.isArray(items)) {
+    return null;
+  }
+
+  var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
+  var height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, LIST_MAX_HEIGHT);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: itemTheme
+  }, /*#__PURE__*/React.createElement(ItemGroup, {
+    role: "listbox",
+    "aria-live": "polite",
+    "aria-label": "TypeAhead results",
+    "aria-relevant": "additions removals"
+  }, /*#__PURE__*/React.createElement(ResizeObserverProvider, null, /*#__PURE__*/React.createElement(UpdateListItemHeightContext.Provider, {
+    value: setListItemHeight
+  }, /*#__PURE__*/React.createElement(ListItemActionsContext.Provider, {
+    value: actions
+  }, /*#__PURE__*/React.createElement(SelectedIndexContext.Provider, {
+    value: selectedIndex
+  }, /*#__PURE__*/React.createElement(List, {
+    useIsScrolling: true,
+    ref: listRef,
+    itemData: items,
+    itemCount: items.length,
+    estimatedItemSize: LIST_ITEM_ESTIMATED_HEIGHT,
+    onScroll: onScroll,
+    onItemsRendered: onItemsRendered,
+    itemSize: getListItemHeight,
+    width: LIST_WIDTH,
+    height: height,
+    overscanCount: 3
+  }, DynamicHeightListItem)))))));
+});
+TypeAheadList.displayName = 'TypeAheadList';

package/dist/esm/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -0,0 +1,105 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
+import { N200 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import Item from '@atlaskit/item';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import styled from 'styled-components';
+import IconFallback from '../../quick-insert/assets/fallback';
+import { Shortcut } from '../../../ui/styles';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+export var ICON_HEIGHT = 40;
+export var ICON_WIDTH = 40;
+export var ItemIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, borderRadius(), ICON_WIDTH, ICON_HEIGHT);
+var ItemBody = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
+var ItemText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
+var ItemAfter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
+var hidden = {
+  overflow: 'hidden'
+};
+var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
+  var label = _ref.label;
+  return /*#__PURE__*/React.createElement(IconFallback, null);
+});
+
+var noop = function noop() {};
+
+export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
+  var item = _ref2.item,
+      selectedIndex = _ref2.selectedIndex,
+      onItemHover = _ref2.onItemHover,
+      onItemClick = _ref2.onItemClick,
+      itemIndex = _ref2.itemIndex;
+  var isSelected = itemIndex === selectedIndex; // It's possible for onMouseMove to be called multiple times in quick
+  // succession because the mousemove event can fire very rapidly. This
+  // provides an additional safety net to prevent that.
+
+  var mouseMoveCalled = useRef(false);
+  var onMouseMove = useCallback(function () {
+    if (isSelected || mouseMoveCalled.current) {
+      return;
+    }
+
+    mouseMoveCalled.current = true;
+    onItemHover({
+      item: item,
+      index: itemIndex
+    });
+  }, [item, itemIndex, onItemHover, isSelected]);
+  useLayoutEffect(function () {
+    if (!isSelected) {
+      mouseMoveCalled.current = false;
+    }
+  }, [isSelected]);
+  var icon = item.icon,
+      title = item.title,
+      customRenderItem = item.render;
+  var elementIcon = useMemo(function () {
+    return /*#__PURE__*/React.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(FallbackIcon, {
+      label: title
+    }));
+  }, [icon, title]);
+  var insertSelectedItem = useCallback(function () {
+    onItemClick(SelectItemMode.SELECTED, itemIndex);
+  }, [onItemClick, itemIndex]);
+  var customItem = useMemo(function () {
+    if (!customRenderItem) {
+      return null;
+    }
+
+    var Comp = customRenderItem;
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-selected": isSelected,
+      "aria-label": title,
+      role: "option",
+      tabIndex: 0,
+      style: hidden,
+      onMouseMove: onMouseMove
+    }, /*#__PURE__*/React.createElement(Comp, {
+      onClick: insertSelectedItem,
+      isSelected: isSelected,
+      onHover: noop
+    }));
+  }, [customRenderItem, insertSelectedItem, onMouseMove, isSelected, title]);
+
+  if (customItem) {
+    return customItem;
+  }
+
+  return /*#__PURE__*/React.createElement(Item, {
+    onClick: insertSelectedItem,
+    onMouseMove: onMouseMove,
+    elemBefore: elementIcon,
+    isSelected: isSelected,
+    "aria-selected": isSelected,
+    "aria-label": item.title,
+    role: "option"
+  }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+    className: "item-title"
+  }, item.title), item.description && /*#__PURE__*/React.createElement("div", {
+    className: "item-description"
+  }, item.description)), /*#__PURE__*/React.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/React.createElement(Shortcut, null, item.keyshortcut))));
+};

package/dist/esm/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -0,0 +1,114 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React, { useEffect, useMemo } from 'react';
+import styled from 'styled-components';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { Popup } from '@atlaskit/editor-common';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { N0, N60A, N50A } from '@atlaskit/theme/colors';
+import { divide } from '@atlaskit/theme/math';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { TypeAheadList } from './TypeAheadList';
+var TypeAheadContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, divide(gridSize, 2));
+
+var Highlight = function Highlight(_ref) {
+  var state = _ref.state,
+      triggerHandler = _ref.triggerHandler;
+
+  if (!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getHighlight)) {
+    return null;
+  }
+
+  var highlight = triggerHandler.getHighlight(state);
+  return highlight;
+};
+
+var OFFSET = [0, 8];
+export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
+  var editorView = props.editorView,
+      triggerHandler = props.triggerHandler,
+      anchorElement = props.anchorElement,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsScrollableElement = props.popupsScrollableElement,
+      items = props.items,
+      selectedIndex = props.selectedIndex,
+      setSelectedItem = props.setSelectedItem,
+      onItemInsert = props.onItemInsert,
+      fireAnalyticsCallback = props.fireAnalyticsCallback,
+      isEmptyQuery = props.isEmptyQuery;
+  var startTime = useMemo(function () {
+    return performance.now();
+  }, // In case those props changes
+  // we need to recreate the startTime
+  [items, isEmptyQuery, fireAnalyticsCallback, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  useEffect(function () {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+
+    var stopTime = performance.now();
+    var time = stopTime - startTime;
+    fireAnalyticsCallback({
+      payload: {
+        action: ACTION.RENDERED,
+        actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          time: time,
+          items: items.length,
+          initial: isEmptyQuery
+        }
+      }
+    });
+  }, [startTime, items, fireAnalyticsCallback, isEmptyQuery, // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  useEffect(function () {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+
+    fireAnalyticsCallback({
+      payload: {
+        action: ACTION.VIEWED,
+        actionSubject: ACTION_SUBJECT.TYPEAHEAD_ITEM,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          index: selectedIndex,
+          items: items.length
+        }
+      }
+    });
+  }, [items, fireAnalyticsCallback, selectedIndex, // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    zIndex: akEditorFloatingDialogZIndex,
+    target: anchorElement,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    fitHeight: 300,
+    fitWidth: 340,
+    offset: OFFSET
+  }, /*#__PURE__*/React.createElement(TypeAheadContent, {
+    className: "fabric-editor-typeahead"
+  }, /*#__PURE__*/React.createElement(Highlight, {
+    state: editorView.state,
+    triggerHandler: triggerHandler
+  }), /*#__PURE__*/React.createElement(TypeAheadList, {
+    items: items,
+    selectedIndex: selectedIndex,
+    onItemHover: setSelectedItem,
+    onItemClick: onItemInsert
+  })));
+});
+TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/esm/plugins/type-ahead/ui/WrapperTypeAhead.js

@@ -0,0 +1,125 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useMemo, useEffect, useLayoutEffect, useCallback, useRef, useState } from 'react';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { moveSelectedIndex, getPluginState } from '../utils';
+import { updateQuery } from '../commands/update-query';
+import { InputQuery } from './InputQuery';
+import { useLoadItems } from './hooks/use-load-items';
+import { useItemInsert } from './hooks/use-item-insert';
+import { useOnForceSelect } from './hooks/use-on-force-select';
+export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
+  var triggerHandler = _ref.triggerHandler,
+      editorView = _ref.editorView,
+      anchorElement = _ref.anchorElement,
+      shouldFocusCursorInsideQuery = _ref.shouldFocusCursorInsideQuery,
+      popupsMountPoint = _ref.popupsMountPoint,
+      popupsBoundariesElement = _ref.popupsBoundariesElement,
+      popupsScrollableElement = _ref.popupsScrollableElement,
+      createAnalyticsEvent = _ref.createAnalyticsEvent,
+      inputMethod = _ref.inputMethod,
+      getDecorationPosition = _ref.getDecorationPosition,
+      reopenQuery = _ref.reopenQuery,
+      onUndoRedo = _ref.onUndoRedo;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      closed = _useState2[0],
+      setClosed = _useState2[1];
+
+  var _useState3 = useState(reopenQuery || ''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      query = _useState4[0],
+      setQuery = _useState4[1];
+
+  var queryRef = useRef(query);
+  var editorViewRef = useRef(editorView);
+  var items = useLoadItems(triggerHandler, editorView, query);
+  useLayoutEffect(function () {
+    queryRef.current = query;
+  }, [query]);
+
+  var _useItemInsert = useItemInsert(triggerHandler, editorView, items),
+      _useItemInsert2 = _slicedToArray(_useItemInsert, 2),
+      onItemInsert = _useItemInsert2[0],
+      onTextInsert = _useItemInsert2[1];
+
+  var selectNextItem = useMemo(function () {
+    return moveSelectedIndex({
+      editorView: editorView,
+      direction: 'next'
+    });
+  }, [editorView]);
+  var selectPreviousItem = useMemo(function () {
+    return moveSelectedIndex({
+      editorView: editorView,
+      direction: 'previous'
+    });
+  }, [editorView]);
+  var cancel = useCallback(function (_ref2) {
+    var setSelectionAt = _ref2.setSelectionAt,
+        addPrefixTrigger = _ref2.addPrefixTrigger,
+        text = _ref2.text,
+        forceFocusOnEditor = _ref2.forceFocusOnEditor;
+    setClosed(true);
+    var fullquery = addPrefixTrigger ? "".concat(triggerHandler.trigger).concat(text) : text;
+    onTextInsert({
+      forceFocusOnEditor: forceFocusOnEditor,
+      setSelectionAt: setSelectionAt,
+      text: fullquery
+    });
+  }, [triggerHandler, onTextInsert]);
+  var insertSelectedItem = useCallback(function () {
+    var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectItemMode.SELECTED;
+    var view = editorViewRef.current;
+
+    var _getPluginState = getPluginState(view.state),
+        selectedIndex = _getPluginState.selectedIndex;
+
+    setClosed(true);
+    queueMicrotask(function () {
+      onItemInsert({
+        mode: mode,
+        index: selectedIndex,
+        query: queryRef.current
+      });
+    });
+  }, [onItemInsert]);
+  var showTypeAheadPopupList = useCallback(function () {}, []);
+  var closePopup = useCallback(function () {
+    setClosed(true);
+  }, []);
+  useEffect(function () {
+    var view = editorViewRef.current;
+    var pluginState = getPluginState(view.state);
+
+    if (query.length === 0 || query === pluginState.query || !pluginState.triggerHandler) {
+      return;
+    }
+
+    updateQuery(query)(view.state, view.dispatch);
+  }, [query, reopenQuery]);
+  useOnForceSelect({
+    triggerHandler: triggerHandler,
+    items: items,
+    query: query,
+    editorView: editorView,
+    closePopup: closePopup
+  });
+
+  if (closed) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(InputQuery, {
+    triggerQueryPrefix: triggerHandler.trigger,
+    onQueryChange: setQuery,
+    onItemSelect: insertSelectedItem,
+    selectNextItem: selectNextItem,
+    selectPreviousItem: selectPreviousItem,
+    onQueryFocus: showTypeAheadPopupList,
+    cancel: cancel,
+    forceFocus: shouldFocusCursorInsideQuery,
+    onUndoRedo: onUndoRedo,
+    reopenQuery: reopenQuery
+  });
+});

package/dist/esm/plugins/type-ahead/ui/hooks/use-dynamic-list-height-calculation.js

@@ -0,0 +1,101 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useMemo, useState, useRef, useCallback, useLayoutEffect } from 'react';
+import throttle from 'lodash/throttle';
+export var calcVisibleListHeight = function calcVisibleListHeight(_ref) {
+  var startIndex = _ref.startIndex,
+      indexHeightMap = _ref.indexHeightMap,
+      limit = _ref.limit,
+      listMaxHeight = _ref.listMaxHeight,
+      listItemEstimatedHeight = _ref.listItemEstimatedHeight;
+  var hasSpace = true;
+  var totalHeight = 0;
+  var i = startIndex;
+
+  while (hasSpace && i < limit) {
+    var nextHeight = indexHeightMap[i] || listItemEstimatedHeight;
+
+    if (totalHeight < listMaxHeight) {
+      totalHeight += nextHeight;
+    }
+
+    i++;
+    hasSpace = totalHeight <= listMaxHeight;
+  }
+
+  return totalHeight;
+};
+export var useDynamicListHeightCalculation = function useDynamicListHeightCalculation(_ref2) {
+  var redrawListAtIndex = _ref2.redrawListAtIndex,
+      getFirstVisibleIndex = _ref2.getFirstVisibleIndex,
+      listLength = _ref2.listLength,
+      listMaxHeight = _ref2.listMaxHeight,
+      listItemEstimatedHeight = _ref2.listItemEstimatedHeight;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      renderedListHeight = _useState2[0],
+      setRenderedListHeight = _useState2[1];
+
+  var indexHeightMap = useRef([]);
+  var resetScreenThrottled = useMemo(function () {
+    return throttle(function () {
+      requestAnimationFrame(function () {
+        var startIndex = getFirstVisibleIndex();
+        var lastItemRenderer = indexHeightMap.current[startIndex];
+
+        if (!lastItemRenderer) {
+          return;
+        } // This is an expensive method
+        // So, we are calling it only
+        // for the last top one visible
+
+
+        redrawListAtIndex(startIndex);
+        var nextListHeight = calcVisibleListHeight({
+          startIndex: startIndex,
+          limit: listLength,
+          indexHeightMap: indexHeightMap.current,
+          listMaxHeight: listMaxHeight,
+          listItemEstimatedHeight: listItemEstimatedHeight
+        });
+
+        if (nextListHeight) {
+          setRenderedListHeight(nextListHeight);
+        }
+      });
+    }, 16 // wait for one frame
+    );
+  }, [redrawListAtIndex, listLength, listMaxHeight, listItemEstimatedHeight, getFirstVisibleIndex]);
+  var setListItemHeight = useCallback(function (_ref3) {
+    var index = _ref3.index,
+        height = _ref3.height;
+
+    if (typeof height !== 'number') {
+      return;
+    }
+
+    indexHeightMap.current[index] = height;
+    resetScreenThrottled();
+  }, [resetScreenThrottled]);
+  var getListItemHeight = useCallback(function (index) {
+    var result = indexHeightMap.current[index];
+
+    if (result && typeof result === 'number') {
+      return result;
+    }
+
+    return listItemEstimatedHeight;
+  }, [listItemEstimatedHeight]);
+  useLayoutEffect(function () {
+    indexHeightMap.current = [];
+    return function () {
+      indexHeightMap.current = [];
+    };
+  }, [listLength]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    getListItemHeight: getListItemHeight,
+    setListItemHeight: setListItemHeight,
+    renderedListHeight: renderedListHeight
+  };
+};