carbon-react 114.13.2 → 114.14.1

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

@@ -3,11 +3,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useEffect, useState, useCallback, useLayoutEffect, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
 import { flip, offset, size } from "@floating-ui/dom";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import findLastIndex from "lodash/findLastIndex";
 import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
 import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
 import Popover from "../../../__internal__/popover";
 import OptionRow from "../option-row/option-row.component";
-import updateListScrollTop from "./update-list-scroll";
 import getNextChildByText from "../utils/get-next-child-by-text";
 import getNextIndexByKey from "../utils/get-next-index-by-key";
 import isNavigationKey from "../utils/is-navigation-key";
@@ -17,6 +18,11 @@ import Loader from "../../loader";
 import Option from "../option/option.component";
 import guid from "../../../__internal__/utils/helpers/guid";
 import SelectListContext from "../__internal__/select-list-context";
+const TABLE_HEADER_HEIGHT = 48;
+const SCROLL_OPTIONS = {
+  smoothScroll: false,
+  align: "end"
+};
 const SelectList = /*#__PURE__*/React.forwardRef(({
   listMaxHeight = 180,
   listActionButton,
@@ -39,8 +45,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   flipEnabled = true,
   isOpen,
   multiselectValues,
+  enableVirtualScroll,
+  virtualScrollOverscan = 5,
   ...listProps
 }, listContainerRef) => {
+  var _childIdsRef$current;
+
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
   const lastFilter = useRef("");
@@ -51,6 +61,19 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     blockScroll,
     allowScroll
   } = useScrollBlock();
+  const actionButtonHeight = useRef(0);
+  const overscan = enableVirtualScroll ? virtualScrollOverscan : React.Children.count(children);
+  const virtualizer = useVirtualizer({
+    count: React.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();
   useEffect(() => {
     if (isOpen) {
       blockScroll();
@@ -70,43 +93,67 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const anchorRef = useMemo(() => ({
     current: anchorElement
   }), [anchorElement]);
-  const optionRefList = useMemo(() => React.Children.map(children, child => {
-    if ((child === null || child === void 0 ? void 0 : child.type) === Option || (child === null || child === void 0 ? void 0 : child.type) === OptionRow) {
-      return /*#__PURE__*/React.createRef();
-    }
-
-    return null;
-  }).filter(child => child), [children]);
   const handleSelect = useCallback(optionData => {
     onSelect({ ...optionData,
       selectionType: "click"
     });
   }, [onSelect]);
-  const childIds = useMemo(() => React.Children.map(children, () => guid()), [children]);
-  const childrenWithListProps = useMemo(() => React.Children.map(children, (child, index) => {
-    if (!child || child.type !== Option && child.type !== OptionRow) {
+  const childIdsRef = 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.Children.map(children, () => guid());
+  };
+
+  if (((_childIdsRef$current = childIdsRef.current) === null || _childIdsRef$current === void 0 ? void 0 : _childIdsRef$current.length) !== React.Children.count(children)) {
+    setChildIds();
+  }
+
+  const childIds = childIdsRef.current;
+  const childrenList = useMemo(() => React.Children.toArray(children), [children]);
+  const optionChildrenList = useMemo(() => childrenList.filter(child => child.type === Option || child.type === OptionRow), [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.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.cloneElement(child, newProps);
-  }), [children, handleSelect, isLoading, optionRefList, childIds]);
-  const childrenList = useMemo(() => React.Children.toArray(childrenWithListProps), [childrenWithListProps]);
-  const lastOptionIndex = useMemo(() => {
-    let lastIndex = 0;
-    childrenList.forEach((element, index) => {
-      if (element.type === Option || element.type === OptionRow) {
-        lastIndex = index;
-      }
-    });
-    return lastIndex;
-  }, [childrenList]);
+  });
+  const lastOptionIndex = findLastIndex(childrenList, child => child.type === Option || child.type === OptionRow);
   const getNextHighlightableItemIndex = useCallback((key, indexOfHighlighted) => {
     const lastIndex = lastOptionIndex;
     let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
@@ -137,16 +184,15 @@ const SelectList = /*#__PURE__*/React.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 = useCallback((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
@@ -186,12 +232,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       }
 
       const {
-        id: itemId,
         text,
         value
       } = currentOption.props;
       onSelect({
-        id: itemId,
+        id: childIds[currentOptionsListIndex],
         text,
         value,
         selectionType: "enterKey"
@@ -200,9 +245,10 @@ const SelectList = /*#__PURE__*/React.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 = useCallback(event => {
     const element = event.target;
+    /* istanbul ignore else */
 
     if (onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
       onListScrollBottom();
@@ -210,14 +256,14 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }, [onListScrollBottom]);
   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]);
   useEffect(() => {
     if (!filterText || filterText === lastFilter.current) {
       lastFilter.current = filterText;
@@ -233,10 +279,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       }
 
       const indexOfMatch = getIndexOfMatch(match.props.value);
-      updateListScrollTop(indexOfMatch, multiColumn ? tableRef.current : listRef.current, optionRefList);
+      virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
       return indexOfMatch;
     });
-  }, [childrenList, filterText, getIndexOfMatch, lastFilter, multiColumn, optionRefList]);
+  }, [childrenList, filterText, getIndexOfMatch, virtualizer]);
   useEffect(() => {
     if (!highlightedValue) {
       return;
@@ -244,13 +290,19 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
 
     const indexOfMatch = getIndexOfMatch(highlightedValue);
     setCurrentOptionsListIndex(indexOfMatch);
-    updateListScrollTop(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]);
   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 = useMemo(() => [offset(3), size({
     apply({
       rects,
@@ -265,21 +317,37 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
 
-  const loader = () => /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
-    key: "loader",
-    as: multiColumn ? "div" : "li"
-  }, /*#__PURE__*/React.createElement(Loader, {
-    "data-role": loaderDataRole
-  }));
+  const loader = () => {
+    return /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
+      key: "loader"
+    }, /*#__PURE__*/React.createElement(Loader, {
+      "data-role": loaderDataRole
+    }));
+  };
+
+  let selectListContent = renderedChildren;
+  const listBoxProps = {
+    role: "listbox",
+    id,
+    "aria-labelledby": labelId,
+    "aria-multiselectable": multiselectValues ? true : undefined
+  };
+  useLayoutEffect(() => {
+    if (listActionButton && isOpen) {
+      var _listActionButtonRef$, _listActionButtonRef$2;
 
-  let selectListContent = childrenWithListProps;
+      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.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, {
       scrollbarWidth: scrollbarWidth
-    }, tableHeader), /*#__PURE__*/React.createElement(StyledSelectListTableBody, {
-      ref: tableRef
-    }, childrenWithListProps));
+    }, tableHeader), /*#__PURE__*/React.createElement(StyledSelectListTableBody, _extends({}, listBoxProps, {
+      "aria-labelledby": labelId,
+      ref: tableRef,
+      listHeight: listHeight - TABLE_HEADER_HEIGHT
+    }), renderedChildren));
   }
 
   return /*#__PURE__*/React.createElement(SelectListContext.Provider, {
@@ -297,20 +365,17 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     animationFrame: true
   }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper",
-    ref: listContainerRef
-  }, listProps), /*#__PURE__*/React.createElement(StyledSelectList, {
-    id: id,
+    ref: listContainerRef,
+    maxHeight: listMaxHeight + actionButtonHeight.current,
+    isLoading: isLoading
+  }, listProps), /*#__PURE__*/React.createElement(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.createElement(ListActionButton, {
+    listHeight: multiColumn ? undefined : listHeight
+  }), selectListContent), isLoading && loader(), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction
@@ -380,6 +445,15 @@ SelectList.propTypes = {
   isOpen: PropTypes.bool,
 
   /** array of selected values, if rendered as part of a MultiSelect */
-  multiselectValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)])
+  multiselectValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.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.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.number
 };
 export default SelectList;

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

@@ -1,39 +1,29 @@
 import styled, { css } from "styled-components";
 const StyledSelectList = styled.ul`
   ${({
-  isLoading,
-  multiColumn
+  listHeight
 }) => 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 && css`
-        min-height: 150px;
-      `}}
+    position: relative;
+    width: 100%;
+    ${listHeight === undefined ? "" : `height: ${listHeight}px;`}
   `}
 `;
-StyledSelectList.defaultProps = {
-  maxHeight: "180px"
-};
-const StyledSelectLoaderContainer = styled.li`
+const StyledSelectLoaderContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-grow: 1;
   padding-top: 24px;
   padding-bottom: 24px;
   width: 100%;
+  flex-grow: 1;
 `;
 const StyledSelectListTable = styled.table`
   background-color: var(--colorsUtilityYang100);
@@ -43,6 +33,7 @@ const StyledSelectListTable = styled.table`
   min-width: 100%;
   white-space: nowrap;
   height: 180px;
+  overflow-y: auto;
 
   thead,
   tr {
@@ -54,6 +45,10 @@ const StyledSelectListTable = styled.table`
 
 const StyledSelectListTableHeader = styled.thead`
   border-bottom: 1px solid var(--colorsUtilityMajor050);
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 1;
 
   tr {
     width: ${({
@@ -89,9 +84,11 @@ const StyledSelectListTableHeader = styled.thead`
 `;
 const StyledSelectListTableBody = styled.tbody`
   display: block;
-  overflow-y: auto;
   width: 100%;
   table-layout: fixed;
-  max-height: 132px;
+  width: 100%;
+  height: ${({
+  listHeight
+}) => `${listHeight}px`};
 `;
 export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody };

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

@@ -43,6 +43,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   listPlacement = "bottom",
   flipEnabled = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...props
 }, ref) => {
   const selectListId = useRef(guid());
@@ -350,7 +352,9 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     loaderDataRole: "simple-select-list-loader",
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     transparent: transparent,
@@ -429,7 +433,16 @@ SimpleSelect.propTypes = {
   listPlacement: PropTypes.oneOf(["top", "bottom", "right", "left"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: PropTypes.bool
+  flipEnabled: PropTypes.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.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.number
 };
 SimpleSelect.defaultProps = {
   disablePortal: false,

package/esm/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/lib/components/link/link.component.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _menu = _interopRequireDefault(require("../menu/menu.context"));
+
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _link = require("./link.style");
@@ -49,6 +51,9 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const l = (0, _useLocale.default)();
+  const {
+    inMenu
+  } = (0, _react.useContext)(_menu.default);
 
   const handleOnKeyDown = ev => {
     if (onKeyDown) {
@@ -119,7 +124,8 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     iconAlign: iconAlign,
     hasContent: Boolean(children),
     variant: variant,
-    isDarkBackground: isDarkBackground
+    isDarkBackground: isDarkBackground,
+    isMenuItem: inMenu
   }, (0, _tags.default)("link", rest), isSkipLink && {
     "data-element": "skip-link"
   }), createLinkBasedOnType());

package/lib/components/link/link.style.d.ts

@@ -13,6 +13,7 @@ export interface StyledLinkProps {
 }
 interface PrivateStyledLinkProps {
     hasContent: boolean;
+    isMenuItem?: boolean;
 }
 declare const StyledLink: import("styled-components").StyledComponent<"span", any, StyledLinkProps & PrivateStyledLinkProps, never>;
 declare const StyledContent: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/link/link.style.js

@@ -61,7 +61,8 @@ const StyledLink = _styledComponents.default.span`
   hasContent,
   disabled,
   variant,
-  isDarkBackground
+  isDarkBackground,
+  isMenuItem
 }) => {
   const colorMapKey = isDarkBackground ? "dark" : "light";
   const {
@@ -70,8 +71,6 @@ const StyledLink = _styledComponents.default.span`
     disabledColor
   } = colorMap[colorMapKey](variant);
   return (0, _styledComponents.css)`
-      display: inline-block;
-
       ${isSkipLink && (0, _styledComponents.css)`
         a {
           position: absolute;
@@ -142,7 +141,7 @@ const StyledLink = _styledComponents.default.span`
       a,
       button {
         text-decoration: underline;
-        display: inline-block;
+        ${isMenuItem && "display: inline-block;"}
 
         ${_icon.default} {
           display: inline-block;

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

@@ -73,6 +73,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   listPlacement = "bottom",
   flipEnabled = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -455,7 +457,9 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     loaderDataRole: "filterable-select-list-loader",
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -543,7 +547,16 @@ FilterableSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
   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
 };
 FilterableSelect.defaultProps = {
   "data-component": "filterable-select"

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

@@ -51,6 +51,13 @@ export interface FilterableSelectProps
   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 FilterableSelect(

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

@@ -16,13 +16,16 @@ const StyledListActionButtonWrapper = _styledComponents.default.div`
   padding-bottom: var(--spacing100);
   border-top: 1px solid var(--colorsUtilityDisabled600);
   box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0), 0 -8px 8px 0 rgba(0, 0, 0, 0.03);
+  width: 100%;
+  position: sticky;
+  bottom: 0;
+  background-color: inherit;
 
   ${_button.default} {
     border: none;
     justify-content: left;
     padding-left: var(--spacing200);
     padding-right: var(--spacing200);
-    width: 100%;
   }
 `;
 var _default = StyledListActionButtonWrapper;

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

@@ -76,6 +76,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   flipEnabled = true,
   wrapPillText = true,
   inputRef,
+  enableVirtualScroll,
+  virtualScrollOverscan,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -468,7 +470,9 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
     multiselectValues: actualValue,
-    isOpen: isOpen
+    isOpen: isOpen,
+    enableVirtualScroll: enableVirtualScroll,
+    virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
@@ -555,7 +559,16 @@ MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
   flipEnabled: _propTypes.default.bool,
 
   /** Wraps the pill text when it would overflow the input width */
-  wrapPillText: _propTypes.default.bool
+  wrapPillText: _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
 };
 MultiSelect.defaultProps = {
   "data-component": "multiselect"

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

@@ -48,6 +48,13 @@ export interface MultiSelectProps
   flipEnabled?: boolean;
   /** Wraps the pill text when it would overflow the input width */
   wrapPillText?: 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 MultiSelect(