carbon-react 114.13.1 → 114.14.0

package/lib/components/select/select-list/select-list.component.js

@@ -11,6 +11,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _dom = require("@floating-ui/dom");
 
+var _reactVirtual = require("@tanstack/react-virtual");
+
+var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
+
 var _useScrollBlock = _interopRequireDefault(require("../../../hooks/__internal__/useScrollBlock"));
 
 var _selectList = require("./select-list.style");
@@ -19,8 +23,6 @@ var _popover = _interopRequireDefault(require("../../../__internal__/popover"));
 
 var _optionRow = _interopRequireDefault(require("../option-row/option-row.component"));
 
-var _updateListScroll = _interopRequireDefault(require("./update-list-scroll"));
-
 var _getNextChildByText = _interopRequireDefault(require("../utils/get-next-child-by-text"));
 
 var _getNextIndexByKey = _interopRequireDefault(require("../utils/get-next-index-by-key"));
@@ -47,6 +49,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const TABLE_HEADER_HEIGHT = 48;
+const SCROLL_OPTIONS = {
+  smoothScroll: false,
+  align: "end"
+};
+
 const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   listMaxHeight = 180,
   listActionButton,
@@ -69,8 +77,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   flipEnabled = true,
   isOpen,
   multiselectValues,
+  enableVirtualScroll,
+  virtualScrollOverscan = 5,
   ...listProps
 }, listContainerRef) => {
+  var _childIdsRef$current;
+
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
   const [scrollbarWidth, setScrollbarWidth] = (0, _react.useState)(0);
   const lastFilter = (0, _react.useRef)("");
@@ -81,6 +93,19 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     blockScroll,
     allowScroll
   } = (0, _useScrollBlock.default)();
+  const actionButtonHeight = (0, _react.useRef)(0);
+  const overscan = enableVirtualScroll ? virtualScrollOverscan : _react.default.Children.count(children);
+  const virtualizer = (0, _reactVirtual.useVirtualizer)({
+    count: _react.default.Children.count(children),
+    getScrollElement: () => listContainerRef.current,
+    estimateSize: () => 40,
+    // value doesn't really seem to matter since we're dynamically measuring, but 40px is the height of a single-line option
+    overscan,
+    paddingStart: multiColumn ? TABLE_HEADER_HEIGHT : 0,
+    scrollPaddingEnd: actionButtonHeight.current
+  });
+  const items = virtualizer.getVirtualItems();
+  const listHeight = virtualizer.getTotalSize();
   (0, _react.useEffect)(() => {
     if (isOpen) {
       blockScroll();
@@ -100,43 +125,67 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const anchorRef = (0, _react.useMemo)(() => ({
     current: anchorElement
   }), [anchorElement]);
-  const optionRefList = (0, _react.useMemo)(() => _react.default.Children.map(children, child => {
-    if ((child === null || child === void 0 ? void 0 : child.type) === _option.default || (child === null || child === void 0 ? void 0 : child.type) === _optionRow.default) {
-      return /*#__PURE__*/_react.default.createRef();
-    }
-
-    return null;
-  }).filter(child => child), [children]);
   const handleSelect = (0, _react.useCallback)(optionData => {
     onSelect({ ...optionData,
       selectionType: "click"
     });
   }, [onSelect]);
-  const childIds = (0, _react.useMemo)(() => _react.default.Children.map(children, () => (0, _guid.default)()), [children]);
-  const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
-    if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
+  const childIdsRef = (0, _react.useRef)(null); // childIds should be stable except when children are added or removed - can't use useMemo
+  // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
+
+  const setChildIds = () => {
+    childIdsRef.current = _react.default.Children.map(children, () => (0, _guid.default)());
+  };
+
+  if (((_childIdsRef$current = childIdsRef.current) === null || _childIdsRef$current === void 0 ? void 0 : _childIdsRef$current.length) !== _react.default.Children.count(children)) {
+    setChildIds();
+  }
+
+  const childIds = childIdsRef.current;
+  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
+  const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => child.type === _option.default || child.type === _optionRow.default), [childrenList]);
+  const {
+    measureElement
+  } = virtualizer;
+
+  const measureCallback = element => {
+    // need a guard to prevent crash with too many rerenders when closing the list
+    if (isOpen) {
+      measureElement(element);
+    }
+  };
+
+  const renderedChildren = items.map(item => {
+    const {
+      index,
+      start
+    } = item;
+    const child = childrenList[index];
+
+    if (!child) {
       return child;
     }
 
+    const optionChildIndex = optionChildrenList.indexOf(child);
+    const isOption = optionChildIndex > -1;
     const newProps = {
       index,
       id: childIds[index],
       onSelect: handleSelect,
-      hidden: isLoading && _react.default.Children.count(children) === 1,
-      ref: optionRefList[index]
+      hidden: isLoading && childrenList.length === 1,
+      // these need to be inline styles rather than implemented in styled-components to avoid it generating thousands of classes
+      style: {
+        transform: `translateY(${start}px)`
+      },
+      "aria-setsize": isOption ? optionChildrenList.length : undefined,
+      "aria-posinset": isOption ? optionChildIndex + 1 : undefined,
+      // needed to dynamically compute the size
+      ref: measureCallback,
+      "data-index": index
     };
     return /*#__PURE__*/_react.default.cloneElement(child, newProps);
-  }), [children, handleSelect, isLoading, optionRefList, childIds]);
-  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(childrenWithListProps), [childrenWithListProps]);
-  const lastOptionIndex = (0, _react.useMemo)(() => {
-    let lastIndex = 0;
-    childrenList.forEach((element, index) => {
-      if (element.type === _option.default || element.type === _optionRow.default) {
-        lastIndex = index;
-      }
-    });
-    return lastIndex;
-  }, [childrenList]);
+  });
+  const lastOptionIndex = (0, _findLastIndex.default)(childrenList, child => child.type === _option.default || child.type === _optionRow.default);
   const getNextHighlightableItemIndex = (0, _react.useCallback)((key, indexOfHighlighted) => {
     const lastIndex = lastOptionIndex;
     let nextIndex = (0, _getNextIndexByKey.default)(key, indexOfHighlighted, lastIndex, isLoading);
@@ -167,16 +216,15 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     const {
       text,
-      value,
-      id: itemId
+      value
     } = childrenList[nextIndex].props;
     onSelect({
       text,
       value,
       selectionType: "navigationKey",
-      id: itemId
+      id: childIds[nextIndex]
     });
-  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
+  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
   const handleActionButtonTab = (0, _react.useCallback)((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
@@ -216,12 +264,11 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       }
 
       const {
-        id: itemId,
         text,
         value
       } = currentOption.props;
       onSelect({
-        id: itemId,
+        id: childIds[currentOptionsListIndex],
         text,
         value,
         selectionType: "enterKey"
@@ -230,9 +277,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       focusOnAnchor();
       highlightNextItem(key);
     }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
+  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen, childIds]);
   const handleListScroll = (0, _react.useCallback)(event => {
     const element = event.target;
+    /* istanbul ignore else */
 
     if (onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
       onListScrollBottom();
@@ -240,14 +288,14 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   }, [onListScrollBottom]);
   (0, _react.useEffect)(() => {
     const keyboardEvent = "keydown";
-    const listElement = listRef.current;
+    const listElement = listContainerRef.current;
     window.addEventListener(keyboardEvent, handleGlobalKeydown);
     listElement.addEventListener("scroll", handleListScroll);
     return function cleanup() {
       window.removeEventListener(keyboardEvent, handleGlobalKeydown);
       listElement.removeEventListener("scroll", handleListScroll);
     };
-  }, [handleGlobalKeydown, handleListScroll]);
+  }, [handleGlobalKeydown, handleListScroll, listContainerRef]);
   (0, _react.useEffect)(() => {
     if (!filterText || filterText === lastFilter.current) {
       lastFilter.current = filterText;
@@ -263,10 +311,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       }
 
       const indexOfMatch = getIndexOfMatch(match.props.value);
-      (0, _updateListScroll.default)(indexOfMatch, multiColumn ? tableRef.current : listRef.current, optionRefList);
+      virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
       return indexOfMatch;
     });
-  }, [childrenList, filterText, getIndexOfMatch, lastFilter, multiColumn, optionRefList]);
+  }, [childrenList, filterText, getIndexOfMatch, virtualizer]);
   (0, _react.useEffect)(() => {
     if (!highlightedValue) {
       return;
@@ -274,13 +322,19 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     const indexOfMatch = getIndexOfMatch(highlightedValue);
     setCurrentOptionsListIndex(indexOfMatch);
-    (0, _updateListScroll.default)(indexOfMatch, multiColumn ? tableRef.current : listRef.current, optionRefList);
-  }, [childrenList, getIndexOfMatch, highlightedValue, multiColumn, optionRefList]);
+    virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS); // TODO: is there a better way than calling handleListScroll manually?
+
+    handleListScroll({
+      target: listContainerRef.current
+    });
+  }, [getIndexOfMatch, highlightedValue, virtualizer, handleListScroll, listContainerRef]);
   (0, _react.useEffect)(() => {
-    if (isLoading && currentOptionsListIndex === lastOptionIndex) {
-      listRef.current.scrollTop = listRef.current.scrollHeight;
+    if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {
+      virtualizer.scrollToIndex(lastOptionIndex, { ...SCROLL_OPTIONS,
+        align: "start"
+      });
     }
-  }, [children, currentOptionsListIndex, isLoading, lastOptionIndex]);
+  }, [children, currentOptionsListIndex, isLoading, lastOptionIndex, listContainerRef, virtualizer]);
   const popoverMiddleware = (0, _react.useMemo)(() => [(0, _dom.offset)(3), (0, _dom.size)({
     apply({
       rects,
@@ -295,21 +349,37 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
 
-  const loader = () => /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
-    key: "loader",
-    as: multiColumn ? "div" : "li"
-  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
-    "data-role": loaderDataRole
-  }));
+  const loader = () => {
+    return /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
+      key: "loader"
+    }, /*#__PURE__*/_react.default.createElement(_loader.default, {
+      "data-role": loaderDataRole
+    }));
+  };
 
-  let selectListContent = childrenWithListProps;
+  let selectListContent = renderedChildren;
+  const listBoxProps = {
+    role: "listbox",
+    id,
+    "aria-labelledby": labelId,
+    "aria-multiselectable": multiselectValues ? true : undefined
+  };
+  (0, _react.useLayoutEffect)(() => {
+    if (listActionButton && isOpen) {
+      var _listActionButtonRef$, _listActionButtonRef$2;
+
+      actionButtonHeight.current = ((_listActionButtonRef$ = listActionButtonRef.current) === null || _listActionButtonRef$ === void 0 ? void 0 : (_listActionButtonRef$2 = _listActionButtonRef$.parentElement) === null || _listActionButtonRef$2 === void 0 ? void 0 : _listActionButtonRef$2.offsetHeight) || 0;
+    }
+  }, [listActionButton, isOpen]);
 
   if (multiColumn) {
     selectListContent = /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTable, null, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableHeader, {
       scrollbarWidth: scrollbarWidth
-    }, tableHeader), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableBody, {
-      ref: tableRef
-    }, childrenWithListProps));
+    }, tableHeader), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableBody, _extends({}, listBoxProps, {
+      "aria-labelledby": labelId,
+      ref: tableRef,
+      listHeight: listHeight - TABLE_HEADER_HEIGHT
+    }), renderedChildren));
   }
 
   return /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
@@ -327,20 +397,17 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     animationFrame: true
   }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
     "data-element": "select-list-wrapper",
-    ref: listContainerRef
-  }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, {
-    id: id,
+    ref: listContainerRef,
+    maxHeight: listMaxHeight + actionButtonHeight.current,
+    isLoading: isLoading
+  }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, _extends({
     as: multiColumn ? "div" : "ul",
-    "aria-labelledby": labelId,
-    "data-element": "select-list",
-    role: "listbox",
-    "aria-multiselectable": multiselectValues ? true : undefined,
+    "data-element": "select-list"
+  }, multiColumn ? {} : listBoxProps, {
     ref: listRef,
     tabIndex: "-1",
-    isLoading: isLoading,
-    multiColumn: multiColumn,
-    maxHeight: listMaxHeight
-  }, selectListContent, isLoading && loader()), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
+    listHeight: multiColumn ? undefined : listHeight
+  }), selectListContent), isLoading && loader(), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction
@@ -411,7 +478,16 @@ SelectList.propTypes = {
   isOpen: _propTypes.default.bool,
 
   /** array of selected values, if rendered as part of a MultiSelect */
-  multiselectValues: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.object)])
+  multiselectValues: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.object)]),
+
+  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+   * DOM at all times, which may cause performance problems on very large lists */
+  enableVirtualScroll: _propTypes.default.bool,
+
+  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+   * Higher values make for smoother scrolling but may impact performance.
+   * Only used if the `enableVirtualScroll` prop is set. */
+  virtualScrollOverscan: _propTypes.default.number
 };
 var _default = SelectList;
 exports.default = _default;

package/lib/components/select/select-list/select-list.style.js

@@ -13,40 +13,30 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledSelectList = _styledComponents.default.ul`
   ${({
-  isLoading,
-  multiColumn
+  listHeight
 }) => (0, _styledComponents.css)`
     box-sizing: border-box;
     display: flex;
     align-items: flex-start;
     flex-direction: column;
     list-style-type: none;
-    max-height: ${({
-  maxHeight
-}) => `${maxHeight}`}px;
     margin: 0;
     outline: none;
-    overflow-x: hidden;
-    overflow-y: ${multiColumn ? "hidden" : "auto"};
     padding: 0;
-
-    ${isLoading && (0, _styledComponents.css)`
-        min-height: 150px;
-      `}}
+    position: relative;
+    width: 100%;
+    ${listHeight === undefined ? "" : `height: ${listHeight}px;`}
   `}
 `;
 exports.StyledSelectList = StyledSelectList;
-StyledSelectList.defaultProps = {
-  maxHeight: "180px"
-};
-const StyledSelectLoaderContainer = _styledComponents.default.li`
+const StyledSelectLoaderContainer = _styledComponents.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-grow: 1;
   padding-top: 24px;
   padding-bottom: 24px;
   width: 100%;
+  flex-grow: 1;
 `;
 exports.StyledSelectLoaderContainer = StyledSelectLoaderContainer;
 const StyledSelectListTable = _styledComponents.default.table`
@@ -57,6 +47,7 @@ const StyledSelectListTable = _styledComponents.default.table`
   min-width: 100%;
   white-space: nowrap;
   height: 180px;
+  overflow-y: auto;
 
   thead,
   tr {
@@ -69,6 +60,10 @@ const StyledSelectListTable = _styledComponents.default.table`
 exports.StyledSelectListTable = StyledSelectListTable;
 const StyledSelectListTableHeader = _styledComponents.default.thead`
   border-bottom: 1px solid var(--colorsUtilityMajor050);
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 1;
 
   tr {
     width: ${({
@@ -105,9 +100,11 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
 exports.StyledSelectListTableHeader = StyledSelectListTableHeader;
 const StyledSelectListTableBody = _styledComponents.default.tbody`
   display: block;
-  overflow-y: auto;
   width: 100%;
   table-layout: fixed;
-  max-height: 132px;
+  width: 100%;
+  height: ${({
+  listHeight
+}) => `${listHeight}px`};
 `;
 exports.StyledSelectListTableBody = StyledSelectListTableBody;

package/lib/components/select/simple-select/simple-select.component.js

@@ -70,6 +70,8 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   listPlacement = "bottom",
   flipEnabled = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...props
 }, ref) => {
   const selectListId = (0, _react.useRef)((0, _guid.default)());
@@ -378,7 +380,9 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     loaderDataRole: "simple-select-list-loader",
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -459,7 +463,16 @@ SimpleSelect.propTypes = {
   listPlacement: _propTypes.default.oneOf(["top", "bottom", "right", "left"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: _propTypes.default.bool
+  flipEnabled: _propTypes.default.bool,
+
+  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+   * DOM at all times, which may cause performance problems on very large lists */
+  enableVirtualScroll: _propTypes.default.bool,
+
+  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+   * Higher values make for smoother scrolling but may impact performance.
+   * Only used if the `enableVirtualScroll` prop is set. */
+  virtualScrollOverscan: _propTypes.default.number
 };
 SimpleSelect.defaultProps = {
   disablePortal: false,

package/lib/components/select/simple-select/simple-select.d.ts

@@ -44,6 +44,13 @@ export interface SimpleSelectProps
   listPlacement?: Side;
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: boolean;
+  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+   * DOM at all times, which may cause performance problems on very large lists */
+  enableVirtualScroll?: boolean;
+  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+   * Higher values make for smoother scrolling but may impact performance.
+   * Only used if the `enableVirtualScroll` prop is set. */
+  virtualScrollOverscan?: number;
 }
 
 declare function SimpleSelect(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.13.1",
+  "version": "114.14.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -166,6 +166,7 @@
     "@floating-ui/react-dom": "^1.0.1",
     "@octokit/rest": "^18.12.0",
     "@styled-system/prop-types": "^5.1.5",
+    "@tanstack/react-virtual": "^3.0.0-beta.39",
     "@types/styled-system": "^5.1.11",
     "chalk": "^4.1.1",
     "ci-info": "^3.3.2",

package/esm/components/select/select-list/update-list-scroll.js

@@ -1,21 +0,0 @@
-export default function updateListScrollTop(indexOfCurrent, list, options) {
-  if (!list || !options[indexOfCurrent] || options[indexOfCurrent].current === null) {
-    list.scrollTop = 0;
-    return;
-  }
-
-  let newPosition = 0;
-  const {
-    offsetHeight: listHeight
-  } = list;
-  const {
-    offsetTop: itemTop,
-    offsetHeight: currentItemHeight
-  } = options[indexOfCurrent].current;
-
-  if (itemTop + currentItemHeight > listHeight) {
-    newPosition = itemTop + currentItemHeight - listHeight;
-  }
-
-  list.scrollTop = newPosition;
-}

package/lib/components/select/select-list/update-list-scroll.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = updateListScrollTop;
-
-function updateListScrollTop(indexOfCurrent, list, options) {
-  if (!list || !options[indexOfCurrent] || options[indexOfCurrent].current === null) {
-    list.scrollTop = 0;
-    return;
-  }
-
-  let newPosition = 0;
-  const {
-    offsetHeight: listHeight
-  } = list;
-  const {
-    offsetTop: itemTop,
-    offsetHeight: currentItemHeight
-  } = options[indexOfCurrent].current;
-
-  if (itemTop + currentItemHeight > listHeight) {
-    newPosition = itemTop + currentItemHeight - listHeight;
-  }
-
-  list.scrollTop = newPosition;
-}