carbon-react 114.13.1 → 114.14.0

package/esm/components/select/option-row/option-row.component.js

@@ -1,3 +1,5 @@
+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); }
+
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledOptionRow from "./option-row.style";
@@ -9,7 +11,9 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
   onSelect,
   value,
   index,
-  hidden
+  hidden,
+  style,
+  ...rest
 }, ref) => {
   const handleClick = () => {
     onSelect({
@@ -26,7 +30,7 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     isSelected = selectListContext.multiselectValues.includes(value);
   }
 
-  return /*#__PURE__*/React.createElement(StyledOptionRow, {
+  return /*#__PURE__*/React.createElement(StyledOptionRow, _extends({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
@@ -34,8 +38,9 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
-    hidden: hidden
-  }, children);
+    hidden: hidden,
+    style: style
+  }, rest), children);
 });
 OptionRow.propTypes = {
   /** The option's visible text, displayed within Textbox of Select */
@@ -70,6 +75,12 @@ OptionRow.propTypes = {
    * @private
    * @ignore
    * True when option should be hidden from the view (prop added by the SelectList component) */
-  hidden: PropTypes.bool
+  hidden: PropTypes.bool,
+
+  /**
+   * @private
+   * @ignore
+   * object containing CSS styles to be passed to the underlying DOM element */
+  style: PropTypes.object
 };
 export default OptionRow;

package/esm/components/select/option-row/option-row.style.js

@@ -1,6 +1,10 @@
 import styled, { css } from "styled-components";
 const StyledOptionRow = styled.tr`
   cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
 
   ${({
   hidden

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

@@ -3,12 +3,22 @@ import { baseTheme } from "../../../style/themes";
 const StyledSelectListContainer = styled.div`
   background-color: white;
   box-shadow: var(--boxShadow100);
-  overflow: hidden;
   animation: fadeIn 250ms ease-out;
   position: absolute;
   z-index: ${({
   theme
 }) => theme.zIndex.popover};
+  max-height: ${({
+  maxHeight
+}) => `${maxHeight}px`};
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  ${({
+  isLoading
+}) => isLoading && "min-height: 150px"};
 
   @keyframes fadeIn {
     0% {

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/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -72,7 +72,8 @@ const InputIconToggle = ({
       onFocus: onFocus,
       onBlur: onBlur,
       onMouseDown: onMouseDown,
-      tabIndex: iconTabIndex
+      tabIndex: iconTabIndex,
+      "data-element": "input-icon-toggle"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: type
     }));

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

@@ -26,6 +26,8 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     ariaLabel?: string;
     /** allows to set rel property in <a> tag */
     rel?: string;
+    /** @ignore @private internal prop to be set when no href or onClick passed */
+    placeholderTabIndex?: boolean;
 }
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLButtonElement | HTMLLinkElement>>;
 export default Link;

package/lib/components/link/link.component.js

@@ -45,6 +45,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   target,
   variant = "default",
   isDarkBackground,
+  placeholderTabIndex,
   ...rest
 }, ref) => {
   const l = (0, _useLocale.default)();
@@ -104,7 +105,11 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
       type = "button";
     }
 
-    return /*#__PURE__*/_react.default.createElement(type, componentProps, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLinkIcon(), /*#__PURE__*/_react.default.createElement(_link.StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
+    return /*#__PURE__*/_react.default.createElement(type, { ...componentProps,
+      ...(placeholderTabIndex && href === undefined && !onClick && {
+        tabIndex: -1
+      })
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLinkIcon(), /*#__PURE__*/_react.default.createElement(_link.StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
   };
 
   return /*#__PURE__*/_react.default.createElement(_link.StyledLink, _extends({
@@ -182,6 +187,7 @@ Link.propTypes = {
   "onClick": _propTypes.default.func,
   "onKeyDown": _propTypes.default.func,
   "onMouseDown": _propTypes.default.func,
+  "placeholderTabIndex": _propTypes.default.bool,
   "rel": _propTypes.default.string,
   "target": _propTypes.default.string,
   "tooltipMessage": _propTypes.default.string,

package/lib/components/menu/__internal__/keyboard-navigation/index.d.ts

@@ -1,2 +1,4 @@
-export function characterNavigation(inputString: any, focusableItems: any, currentFocusedIndex: any): any;
-export function menuKeyboardNavigation(event: any, focusableItems: any): number | undefined;
+import React from "react";
+declare function characterNavigation(inputString?: string, focusableItems?: Element[]): Element | undefined;
+declare function menuKeyboardNavigation(event: React.KeyboardEvent, focusableItems: Element[]): number | undefined;
+export { characterNavigation, menuKeyboardNavigation };

package/lib/components/menu/__internal__/keyboard-navigation/index.js

@@ -8,31 +8,32 @@ exports.menuKeyboardNavigation = menuKeyboardNavigation;
 
 var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
 
-var _menuItem = _interopRequireDefault(require("../../menu-item"));
+var _locators = require("../locators");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function characterNavigation(inputString, focusableItems, currentFocusedIndex) {
-  if (!inputString) return currentFocusedIndex;
+function characterNavigation(inputString, focusableItems) {
+  if (!inputString || !focusableItems) return undefined;
 
-  const getNodeText = node => {
-    if (node instanceof Array) return node.map(getNodeText).join("");
-    if (typeof node === "object" && node) return getNodeText(node.props.children);
-    return node;
+  const getInnerText = element => {
+    var _element$textContent, _element$textContent$;
+
+    return element === null || element === void 0 ? void 0 : (_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : (_element$textContent$ = _element$textContent.split("\n")) === null || _element$textContent$ === void 0 ? void 0 : _element$textContent$.map(text => text.trim()).join(" ");
   };
 
   const getMenuText = element => {
-    if (element.submenu) {
-      return element.submenu;
-    }
+    var _getInnerText;
 
-    return getNodeText(element.children);
+    return (_getInnerText = getInnerText(element)) === null || _getInnerText === void 0 ? void 0 : _getInnerText.toLowerCase();
   };
 
-  const itemsList = focusableItems.map(item => item && item.type === _menuItem.default && getMenuText(item.props) && getMenuText(item.props).toLowerCase());
-  const matchingItem = itemsList.find(item => item && item.startsWith(inputString));
-  const matchingIndex = itemsList.indexOf(matchingItem);
-  return matchingIndex === -1 ? currentFocusedIndex : matchingIndex;
+  const matchingItem = focusableItems.find(item => {
+    var _getMenuText;
+
+    if (!(item !== null && item !== void 0 && item.getAttribute("data-component"))) return false;
+    return [_locators.MENU_ITEM, _locators.SCROLLABLE_BLOCK_PARENT].includes(item.getAttribute("data-component")) && ((_getMenuText = getMenuText(item)) === null || _getMenuText === void 0 ? void 0 : _getMenuText.startsWith(inputString.toLowerCase()));
+  });
+  return matchingItem;
 }
 
 function menuKeyboardNavigation(event, focusableItems) {