carbon-react 114.13.1 → 114.14.0

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

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

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

@@ -25,6 +25,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
   target,
   variant = "default",
   isDarkBackground,
+  placeholderTabIndex,
   ...rest
 }, ref) => {
   const l = useLocale();
@@ -84,7 +85,11 @@ const Link = /*#__PURE__*/React.forwardRef(({
       type = "button";
     }
 
-    return /*#__PURE__*/React.createElement(type, componentProps, /*#__PURE__*/React.createElement(React.Fragment, null, renderLinkIcon(), /*#__PURE__*/React.createElement(StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
+    return /*#__PURE__*/React.createElement(type, { ...componentProps,
+      ...(placeholderTabIndex && href === undefined && !onClick && {
+        tabIndex: -1
+      })
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, renderLinkIcon(), /*#__PURE__*/React.createElement(StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
   };
 
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
@@ -160,6 +165,7 @@ Link.propTypes = {
   "onClick": PropTypes.func,
   "onKeyDown": PropTypes.func,
   "onMouseDown": PropTypes.func,
+  "placeholderTabIndex": PropTypes.bool,
   "rel": PropTypes.string,
   "target": PropTypes.string,
   "tooltipMessage": PropTypes.string,

package/esm/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/esm/components/menu/__internal__/keyboard-navigation/index.js

@@ -1,27 +1,28 @@
 import Events from "../../../../__internal__/utils/helpers/events";
-import MenuItem from "../../menu-item";
+import { MENU_ITEM, SCROLLABLE_BLOCK_PARENT } from "../locators";
 
-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 && 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 [MENU_ITEM, 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) {

package/esm/components/menu/__internal__/locators.d.ts

@@ -0,0 +1,6 @@
+export const MENU_ITEM: "menu-item";
+export const SCROLLABLE_BLOCK: "submenu-scrollable-block";
+export const SCROLLABLE_BLOCK_PARENT: "scrollable-block-parent";
+export const ALL_CHILDREN_SELECTOR: string;
+export const BLOCK_INDEX_SELECTOR: string;
+export const MENU_ITEM_CHILDREN_LOCATOR: string;

package/esm/components/menu/__internal__/locators.js

@@ -0,0 +1,6 @@
+export const MENU_ITEM = "menu-item";
+export const SCROLLABLE_BLOCK = "submenu-scrollable-block";
+export const SCROLLABLE_BLOCK_PARENT = "scrollable-block-parent";
+export const ALL_CHILDREN_SELECTOR = `[data-component='${MENU_ITEM}'], [data-component='${SCROLLABLE_BLOCK_PARENT}']`;
+export const BLOCK_INDEX_SELECTOR = `[data-component='${MENU_ITEM}'], [data-component='${SCROLLABLE_BLOCK}']`;
+export const MENU_ITEM_CHILDREN_LOCATOR = `[data-component='${MENU_ITEM}']`;

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -1,6 +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); }
 
-/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 import React, { useCallback, useEffect, useContext, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
@@ -8,11 +7,11 @@ import { StyledSubmenu, StyledSubmenuWrapper } from "./submenu.style";
 import Link from "../../../link";
 import Events from "../../../../__internal__/utils/helpers/events";
 import MenuContext from "../../menu.context";
-import MenuItem from "../../menu-item";
 import { characterNavigation } from "../keyboard-navigation";
-import ScrollableBlock from "../../scrollable-block";
 import SubmenuContext from "./submenu.context";
 import useClickAwayListener from "../../../../hooks/__internal__/useClickAwayListener";
+import guid from "../../../../__internal__/utils/helpers/guid";
+import { SCROLLABLE_BLOCK, SCROLLABLE_BLOCK_PARENT, BLOCK_INDEX_SELECTOR, ALL_CHILDREN_SELECTOR } from "../locators";
 const Submenu = /*#__PURE__*/React.forwardRef(({
   children,
   className,
@@ -29,46 +28,44 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   onSubmenuOpen,
   onSubmenuClose,
   onClick,
-  indexInMenu,
   ...rest
 }, ref) => {
-  const [blockDoubleFocus, setBlockDoubleFocus] = useState(false);
+  const submenuRef = useRef(null);
+  const submenuId = useRef(guid());
   const menuContext = useContext(MenuContext);
   const {
     inFullscreenView,
-    openSubmenuIndex,
-    setOpenSubmenuIndex
+    openSubmenuId,
+    setOpenSubmenuId
   } = menuContext;
   const [submenuOpen, setSubmenuOpen] = useState(false);
-  const [submenuFocusIndex, setSubmenuFocusIndex] = useState(undefined);
+  const [submenuFocusId, setSubmenuFocusId] = useState(null);
+  const [submenuItemIds, setSubmenuItemIds] = useState([]);
   const [characterString, setCharacterString] = useState("");
-  const formattedChildren = React.Children.map(children, child => {
-    if (child.type === ScrollableBlock) {
-      const blockChildren = [...child.props.children];
-
-      if (child.props.parent) {
-        blockChildren.unshift( /*#__PURE__*/React.createElement(MenuItem, null, child.props.parent));
-      }
-
-      return blockChildren;
-    }
-
-    return child;
-  });
-  const arrayOfFormattedChildren = React.Children.toArray(formattedChildren);
-  const numberOfChildren = useMemo(() => React.Children.count(formattedChildren), [formattedChildren]);
+  const shiftTabPressed = useRef(false);
+  const registerItem = useCallback(id => {
+    setSubmenuItemIds(prevState => {
+      return [...prevState, id];
+    });
+  }, []);
+  const unregisterItem = useCallback(id => {
+    setSubmenuItemIds(prevState => {
+      return prevState.filter(itemId => itemId !== id);
+    });
+  }, []);
+  const numberOfChildren = submenuItemIds.length;
   const blockIndex = useMemo(() => {
-    var _childrenArray$index;
-
-    const childrenArray = React.Children.toArray(children);
-    let index = childrenArray.findIndex(item => item.type === ScrollableBlock);
+    if (submenuOpen && numberOfChildren) {
+      var _submenuRef$current, _submenuRef$current2;
 
-    if ((_childrenArray$index = childrenArray[index]) !== null && _childrenArray$index !== void 0 && _childrenArray$index.props.parent) {
-      index += 1;
+      const childrenArray = Array.from((_submenuRef$current = submenuRef.current) === null || _submenuRef$current === void 0 ? void 0 : _submenuRef$current.querySelectorAll(BLOCK_INDEX_SELECTOR));
+      const scrollableBlock = (_submenuRef$current2 = submenuRef.current) === null || _submenuRef$current2 === void 0 ? void 0 : _submenuRef$current2.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
+      const index = childrenArray.indexOf(scrollableBlock);
+      return scrollableBlock !== null && scrollableBlock !== void 0 && scrollableBlock.querySelector(`[data-component='${SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
     }
 
-    return index;
-  }, [children]);
+    return -1;
+  }, [submenuOpen, numberOfChildren]);
   const characterTimer = useRef();
   const startCharacterTimeout = useCallback(() => {
     characterTimer.current = setTimeout(() => {
@@ -81,83 +78,88 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   }, [startCharacterTimeout]);
   const openSubmenu = useCallback(() => {
     setSubmenuOpen(true);
-    setOpenSubmenuIndex(indexInMenu);
-    if (onSubmenuOpen) onSubmenuOpen();
-  }, [onSubmenuOpen, indexInMenu, setOpenSubmenuIndex]);
+    setOpenSubmenuId(submenuId.current);
+
+    if (onSubmenuOpen) {
+      onSubmenuOpen();
+    }
+  }, [onSubmenuOpen, setOpenSubmenuId]);
   const closeSubmenu = useCallback(() => {
+    shiftTabPressed.current = false;
     setSubmenuOpen(false);
+    setSubmenuFocusId(null);
 
-    if (openSubmenuIndex === indexInMenu) {
-      setOpenSubmenuIndex(null);
+    if (onSubmenuClose) {
+      onSubmenuClose();
     }
 
-    if (onSubmenuClose) onSubmenuClose();
-    setSubmenuFocusIndex(undefined);
-    setBlockDoubleFocus(false);
     setCharacterString("");
-  }, [onSubmenuClose, setOpenSubmenuIndex, indexInMenu, openSubmenuIndex]);
+  }, [onSubmenuClose]);
   useEffect(() => {
-    if (openSubmenuIndex !== indexInMenu) {
+    if (openSubmenuId && openSubmenuId !== submenuId.current) {
       closeSubmenu();
     }
-  }, [openSubmenuIndex, indexInMenu, closeSubmenu]);
-  const handleKeyDown = useCallback((event, index = submenuFocusIndex) => {
+  }, [openSubmenuId, closeSubmenu]);
+  const findCurrentIndex = useCallback(id => {
+    const index = submenuItemIds.findIndex(itemId => itemId === id);
+    return index === -1 ? 0 : index;
+  }, [submenuItemIds]);
+  const handleKeyDown = useCallback(event => {
     if (!submenuOpen) {
       if (Events.isEnterKey(event) || Events.isSpaceKey(event) || Events.isDownKey(event) || Events.isUpKey(event)) {
         event.preventDefault();
         openSubmenu();
-
-        if (!href) {
-          setSubmenuFocusIndex(0);
-        }
-      }
-
-      if (!event.defaultPrevented) {
-        menuContext.handleKeyDown(event);
       }
     }
 
     if (submenuOpen) {
+      const index = findCurrentIndex(submenuFocusId);
       let nextIndex = index;
 
+      if (href && !submenuFocusId) {
+        if (Events.isDownKey(event) || Events.isUpKey(event) || Events.isTabKey(event) && !Events.isShiftKey(event)) {
+          event.preventDefault();
+          setSubmenuFocusId(submenuItemIds[0]);
+          return;
+        }
+      }
+
       if (Events.isTabKey(event) && !Events.isShiftKey(event)) {
-        if (index === numberOfChildren - 1) {
+        if (nextIndex === numberOfChildren - 1) {
           closeSubmenu();
           return;
         }
 
-        nextIndex = index + 1;
-        setBlockDoubleFocus(true);
+        shiftTabPressed.current = false;
+        nextIndex += 1;
       }
 
       if (Events.isTabKey(event) && Events.isShiftKey(event)) {
-        if (index === 0) {
+        if (nextIndex === 0) {
           closeSubmenu();
           return;
         }
 
-        nextIndex = index - 1;
-        setBlockDoubleFocus(true);
+        shiftTabPressed.current = true;
+        nextIndex -= 1;
       }
 
       if (Events.isDownKey(event)) {
         event.preventDefault();
+        shiftTabPressed.current = false;
 
-        if (index < numberOfChildren - 1) {
-          nextIndex = index + 1;
+        if (nextIndex < numberOfChildren - 1) {
+          nextIndex += 1;
         }
-
-        setBlockDoubleFocus(false);
       }
 
       if (Events.isUpKey(event)) {
         event.preventDefault();
+        shiftTabPressed.current = false;
 
-        if (index > 0) {
-          nextIndex = index - 1;
+        if (nextIndex > 0) {
+          nextIndex -= 1;
         }
-
-        setBlockDoubleFocus(false);
       }
 
       if (Events.isEscKey(event)) {
@@ -168,16 +170,19 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
 
       if (Events.isHomeKey(event)) {
         event.preventDefault();
+        shiftTabPressed.current = false;
         nextIndex = 0;
       }
 
       if (Events.isEndKey(event)) {
         event.preventDefault();
+        shiftTabPressed.current = false;
         nextIndex = numberOfChildren - 1;
       }
 
       if (event.key.length === 1) {
         event.stopPropagation();
+        shiftTabPressed.current = false;
 
         if (characterTimer.current) {
           restartCharacterTimeout();
@@ -196,31 +201,21 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
         setTimeout(() => closeSubmenu());
       }
 
-      if (href && index === undefined) {
-        if (Events.isEnterKey(event) || Events.isTabKey(event) && Events.isShiftKey(event)) {
-          closeSubmenu();
-          return;
-        }
-
-        if (Events.isSpaceKey(event) || Events.isDownKey(event) || Events.isUpKey(event) || Events.isTabKey(event)) {
-          nextIndex = 0;
-        }
-      } // Defensive check in case an unhandled key event from a child component
-      // has bubbled up
-
-
-      if (!nextIndex && nextIndex !== 0) return; // Check that next index contains a MenuItem
-      // If not, call handleKeyDown again
-
-      const nextChild = arrayOfFormattedChildren[nextIndex];
+      if (href && Events.isEnterKey(event)) {
+        closeSubmenu();
+        return;
+      }
 
-      if ((nextChild === null || nextChild === void 0 ? void 0 : nextChild.type) === MenuItem) {
-        setSubmenuFocusIndex(nextIndex);
-      } else {
-        handleKeyDown(event, nextIndex);
+      if (nextIndex !== index) {
+        setSubmenuFocusId(submenuItemIds[nextIndex]);
       }
     }
-  }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+  }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+  useEffect(() => {
+    if (submenuOpen && !href && !submenuFocusId && submenuItemIds.length) {
+      setSubmenuFocusId(submenuItemIds[0]);
+    }
+  }, [submenuOpen, href, submenuFocusId, submenuItemIds]);
 
   const handleClickAway = () => {
     document.removeEventListener("click", handleClickAway);
@@ -237,11 +232,16 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
 
   useEffect(() => {
     if (characterString !== "") {
-      const nextIndex = characterNavigation(characterString, React.Children.toArray(formattedChildren), submenuFocusIndex);
-      setSubmenuFocusIndex(nextIndex);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+      var _submenuRef$current3;
+
+      const submenuChildren = Array.from((_submenuRef$current3 = submenuRef.current) === null || _submenuRef$current3 === void 0 ? void 0 : _submenuRef$current3.querySelectorAll(ALL_CHILDREN_SELECTOR));
+      const nextItem = characterNavigation(characterString, submenuChildren);
 
-  }, [characterString]);
+      if (nextItem) {
+        setSubmenuFocusId(nextItem.id);
+      }
+    }
+  }, [characterString, submenuItemIds]);
   const handleClickInside = useClickAwayListener(handleClickAway);
 
   if (inFullscreenView) {
@@ -265,15 +265,17 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       "data-component": "submenu",
       variant: variant,
       menuType: menuContext.menuType,
-      inFullscreenView: inFullscreenView
-    }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
+      inFullscreenView: inFullscreenView,
+      ref: submenuRef
+    }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
       value: {
-        isFocused: submenuFocusIndex === index,
-        focusIndex: submenuFocusIndex,
         handleKeyDown,
-        blockIndex
+        blockIndex,
+        registerItem,
+        unregisterItem,
+        updateFocusId: setSubmenuFocusId
       }
-    }, child))));
+    }, children)));
   }
 
   return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
@@ -281,7 +283,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
     isSubmenuOpen: submenuOpen,
-    onClick: handleClickInside
+    onClick: handleClickInside,
+    ref: submenuRef
   }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
     className: className,
     menuType: menuContext.menuType,
@@ -305,16 +308,17 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     variant: variant,
     menuType: menuContext.menuType,
     role: blockIndex === 0 ? "presentation" : "list"
-  }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
+  }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
-      isFocused: !blockDoubleFocus && submenuFocusIndex === index,
-      focusIndex: submenuFocusIndex,
+      submenuFocusId,
       handleKeyDown,
       blockIndex,
-      updateFocusIndex: setSubmenuFocusIndex,
-      itemIndex: child.type === MenuItem ? index : undefined
+      registerItem,
+      unregisterItem,
+      updateFocusId: setSubmenuFocusId,
+      shiftTabPressed: shiftTabPressed.current
     }
-  }, child))));
+  }, children)));
 });
 Submenu.propTypes = {
   /** Children elements */
@@ -364,9 +368,6 @@ Submenu.propTypes = {
   onSubmenuClose: PropTypes.func,
 
   /** Callback triggered when the top-level menu item is clicked */
-  onClick: PropTypes.func,
-
-  /** index of child in the parent menu */
-  indexInMenu: PropTypes.number
+  onClick: PropTypes.func
 };
 export default Submenu;

package/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -85,8 +85,7 @@ const MenuFullscreen = ({
     value: {
       inFullscreenView: true,
       menuType,
-      inMenu: true,
-      setOpenSubmenuIndex: () => {}
+      inMenu: true
     }
   }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, child, index < React.Children.count(children) - 1 && /*#__PURE__*/React.createElement(MenuDivider, null))))))))));
 };

package/esm/components/menu/menu-item/index.js

@@ -1,2 +1 @@
-/* eslint-disable import/no-cycle */
 export { default } from "./menu-item.component";