carbon-react 114.13.1 → 114.13.2

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

@@ -11,7 +11,7 @@ import MenuContext from "../menu.context";
 import Submenu from "../__internal__/submenu/submenu.component";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
 import { StyledMenuItem } from "../menu.style";
-import Search from "../../search";
+import guid from "../../../__internal__/utils/helpers/guid";
 
 const MenuItem = ({
   submenu,
@@ -33,41 +33,70 @@ const MenuItem = ({
   onSubmenuClose,
   overrideColor,
   rel,
-  isFocused,
   ...rest
 }) => {
-  const menuContext = useContext(MenuContext);
+  var _ref$current, _ref$current2;
+
+  const {
+    inFullscreenView,
+    registerItem,
+    unregisterItem,
+    focusId,
+    menuType,
+    openSubmenuId
+  } = useContext(MenuContext);
+  const menuItemId = useRef(guid());
   const submenuContext = useContext(SubmenuContext);
-  const ref = useRef(null);
-  const focusFromMenu = isFocused;
-  const focusFromSubmenu = submenuContext.isFocused;
-  const isChildSearch = useRef(false);
-  const childRef = useRef();
   const {
-    inFullscreenView
-  } = menuContext;
-  const childrenItems = React.Children.map(children, child => {
-    if ((child === null || child === void 0 ? void 0 : child.type) === Search) {
-      isChildSearch.current = true;
+    registerItem: registerSubmenuItem,
+    unregisterItem: unregisterSubmenuItem,
+    submenuFocusId,
+    updateFocusId: updateSubmenuFocusId,
+    handleKeyDown: handleSubmenuKeyDown,
+    shiftTabPressed
+  } = submenuContext;
+  const ref = useRef(null);
+  const focusFromMenu = focusId === menuItemId.current;
+  const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
+  const inputRef = useRef(null);
+  const inputIcon = useRef(null);
+  inputIcon.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[data-element='input-icon-toggle']");
+  inputRef.current = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelector("[data-element='input']");
+  const focusRef = inputRef.current ? inputRef : ref;
+  useEffect(() => {
+    const id = menuItemId.current;
+
+    if (registerSubmenuItem) {
+      registerSubmenuItem(id);
+    } else if (registerItem) {
+      registerItem(id);
     }
 
-    return child;
-  });
-  const focusRef = isChildSearch.current ? childRef : ref;
+    return () => {
+      if (unregisterSubmenuItem) {
+        unregisterSubmenuItem(id);
+      } else if (unregisterItem) {
+        unregisterItem(id);
+      }
+    };
+  }, [registerSubmenuItem, registerItem, unregisterSubmenuItem, unregisterItem]);
   useEffect(() => {
-    if (focusFromSubmenu === undefined && focusFromMenu) {
+    var _inputIcon$current;
+
+    if (!openSubmenuId && focusFromSubmenu === undefined && focusFromMenu) {
       focusRef.current.focus();
-    } else if (focusFromSubmenu) {
+    } else if (focusFromSubmenu && !(shiftTabPressed && ((_inputIcon$current = inputIcon.current) === null || _inputIcon$current === void 0 ? void 0 : _inputIcon$current.getAttribute("tabindex")) === "0")) {
       focusRef.current.focus();
     }
-  }, [focusFromMenu, focusFromSubmenu, focusRef]);
+  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, inputIcon, shiftTabPressed, focusRef]);
   const updateFocusOnClick = useCallback(() => {
-    /* istanbul ignore else */
-    if (submenuContext.updateFocusIndex) {
-      submenuContext.updateFocusIndex(submenuContext.itemIndex);
+    if (updateSubmenuFocusId) {
+      updateSubmenuFocusId(menuItemId.current);
     }
-  }, [submenuContext]);
+  }, [updateSubmenuFocusId]);
   const handleKeyDown = useCallback(event => {
+    var _inputIcon$current2, _inputRef$current;
+
     if (onKeyDown) {
       onKeyDown(event);
     }
@@ -76,16 +105,16 @@ const MenuItem = ({
       ref.current.focus();
     }
 
-    if (submenuContext.handleKeyDown !== undefined) {
-      var _focusRef$current;
+    const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable
 
-      if (!(isChildSearch.current && document.activeElement === focusRef.current && (_focusRef$current = focusRef.current) !== null && _focusRef$current !== void 0 && _focusRef$current.value)) {
-        submenuContext.handleKeyDown(event);
-      }
-    } else {
-      menuContext.handleKeyDown(event);
+    if (Events.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.isShiftKey(event) && document.activeElement === inputIcon.current)) {
+      return;
     }
-  }, [focusRef, menuContext, onKeyDown, submenuContext]);
+
+    if (handleSubmenuKeyDown) {
+      handleSubmenuKeyDown(event);
+    }
+  }, [onKeyDown, handleSubmenuKeyDown, inputIcon]);
   const classes = useMemo(() => classNames({
     "carbon-menu-item--has-link": href || onClick
   }), [href, onClick]);
@@ -94,7 +123,7 @@ const MenuItem = ({
     href,
     target,
     rel,
-    onClick: onClick || (isChildSearch.current ? updateFocusOnClick : undefined),
+    onClick: onClick || (inputRef.current ? updateFocusOnClick : undefined),
     icon,
     selected,
     variant,
@@ -102,11 +131,8 @@ const MenuItem = ({
     overrideColor,
     ref
   };
-  const clonedChildren = isChildSearch.current ? childrenItems.map(child => /*#__PURE__*/React.cloneElement(child, {
-    ref: childRef
-  })) : children;
 
-  const getTitle = title => maxWidth && typeof title === "string" ? title : "";
+  const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
 
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
   const asPassiveItem = !(onClick || href);
@@ -114,13 +140,14 @@ const MenuItem = ({
   if (submenu) {
     return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
       "data-component": "menu-item",
-      menuType: menuContext.menuType,
+      menuType: menuType,
       display: "inline-block",
       title: getTitle(submenu),
       maxWidth: itemMaxWidth,
       onClick: updateFocusOnClick
     }, rest, {
-      inFullscreenView: inFullscreenView
+      inFullscreenView: inFullscreenView,
+      id: menuItemId.current
     }), /*#__PURE__*/React.createElement(Submenu, _extends({}, typeof submenu !== "boolean" && {
       title: submenu
     }, {
@@ -132,29 +159,31 @@ const MenuItem = ({
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
       onSubmenuClose: onSubmenuClose
-    }, elementProps, rest), childrenItems));
+    }, elementProps, rest), children));
   }
 
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
     "data-component": "menu-item",
-    menuType: menuContext.menuType,
-    inSubmenu: submenuContext.handleKeyDown !== undefined,
+    menuType: menuType,
+    inSubmenu: !!handleSubmenuKeyDown,
     display: "inline-block",
     title: getTitle(children),
     maxWidth: itemMaxWidth
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
-    menuOpen: menuOpen
+    menuOpen: menuOpen,
+    id: menuItemId.current
   }), /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({
-    as: isChildSearch.current ? "div" : Link,
-    isSearch: isChildSearch.current,
-    menuType: menuContext.menuType
+    as: inputRef.current ? "div" : Link,
+    isSearch: inputRef.current,
+    menuType: menuType
   }, elementProps, {
     ariaLabel: ariaLabel,
     maxWidth: maxWidth,
     inFullscreenView: inFullscreenView,
-    asPassiveItem: asPassiveItem
-  }), clonedChildren));
+    asPassiveItem: asPassiveItem,
+    placeholderTabIndex: asPassiveItem
+  }), children));
 };
 
 MenuItem.propTypes = {
@@ -243,10 +272,7 @@ MenuItem.propTypes = {
   overrideColor: PropTypes.bool,
 
   /** @ignore @private */
-  isFocused: PropTypes.bool,
-
-  /** @ignore @private */
-  indexInMenu: PropTypes.number
+  "data-component": PropTypes.string
 };
 MenuItem.displayName = "MenuItem";
 export default MenuItem;

package/esm/components/menu/menu-item/menu-item.d.ts

@@ -31,10 +31,14 @@ export interface MenuItemBaseProps extends LayoutProps, FlexboxProps {
   onSubmenuOpen?: () => void;
   /** Callback triggered when submenu closes. Only valid with submenu prop */
   onSubmenuClose?: () => void;
-  /** @ignore @private
-  private prop, used inside ScrollableBlock to ensure the MenuItem's color variant overrides the CSS
-  for other MenuItems inside the block */
+  /** 
+    @ignore @private
+    private prop, used inside ScrollableBlock to ensure the MenuItem's color variant overrides the CSS
+    for other MenuItems inside the block
+   */
   overrideColor?: boolean;
+  /** @private @ignore */
+  "data-component"?: string;
 }
 
 export interface MenuWithChildren extends MenuItemBaseProps {

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

@@ -1,64 +1,60 @@
 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, { useEffect, useState, useCallback, useRef } from "react";
+import React, { useCallback, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import { StyledMenuWrapper } from "./menu.style";
-import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation";
-import Events from "../../__internal__/utils/helpers/events";
 import MenuContext from "./menu.context";
+import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation";
+import { MENU_ITEM_CHILDREN_LOCATOR } from "./__internal__/locators";
 
 const Menu = ({
   menuType = "light",
   children,
   ...rest
 }) => {
-  const [focusedItemIndex, setFocusedItemIndex] = useState(undefined);
-  const [openSubmenuIndex, setOpenSubmenuIndex] = useState(null);
+  const [openSubmenuId, setOpenSubmenuId] = useState(null);
   const ref = useRef();
-  const handleKeyDown = useCallback(event => {
-    const newIndex = menuKeyboardNavigation(event, React.Children.toArray(children));
-    setFocusedItemIndex(newIndex);
-  }, [children]);
-  const onClickOutside = useCallback(event => {
-    // Reset the state of the menu when clicking elsewhere
-    if (!Events.composedPath(event).includes(ref.current)) {
-      setFocusedItemIndex(undefined);
-      document.removeEventListener("click", onClickOutside);
-    }
+  const [focusId, setFocusId] = useState(undefined);
+  const [itemIds, setItemIds] = useState([]);
+  const registerItem = useCallback(id => {
+    setItemIds(prevState => {
+      return [...prevState, id];
+    });
   }, []);
-  useEffect(() => {
-    document.addEventListener("click", onClickOutside);
-    return function cleanup() {
-      document.removeEventListener("click", onClickOutside);
-    };
-  });
+  const unregisterItem = useCallback(id => {
+    setItemIds(prevState => {
+      return prevState.filter(itemId => itemId !== id);
+    });
+  }, []);
+
+  const handleKeyDown = event => {
+    /* istanbul ignore else */
+    if (ref.current) {
+      const focusableItems = Array.from(ref.current.querySelectorAll(MENU_ITEM_CHILDREN_LOCATOR));
+      const newIndex = menuKeyboardNavigation(event, focusableItems);
+      setFocusId(itemIds[newIndex]);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(StyledMenuWrapper, _extends({
     "data-component": "menu",
     menuType: menuType
   }, rest, {
     ref: ref,
-    role: "list"
+    role: "list",
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: {
       menuType,
-      handleKeyDown,
       inMenu: true,
-      openSubmenuIndex,
-      setOpenSubmenuIndex
+      openSubmenuId,
+      setOpenSubmenuId,
+      focusId,
+      registerItem,
+      unregisterItem
     }
-  }, React.Children.map(children, (child, index) => {
-    const isFocused = focusedItemIndex === index;
-
-    if ( /*#__PURE__*/React.isValidElement(child) && child.type.displayName === "MenuItem" && child.props.submenu) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        isFocused,
-        indexInMenu: index
-      });
-    }
-
-    return child;
-  })));
+  }, children));
 };
 
 Menu.propTypes = {

package/esm/components/menu/menu.context.d.ts

@@ -1,8 +1,8 @@
 declare var _default: React.Context<{
     menuType: string;
     inMenu: boolean;
-    openSubmenuIndex: null;
-    setOpenSubmenuIndex: () => void;
+    openSubmenuId: null;
+    setOpenSubmenuId: () => void;
 }>;
 export default _default;
 import React from "react";

package/esm/components/menu/menu.context.js

@@ -2,8 +2,8 @@ import React from "react";
 export default /*#__PURE__*/React.createContext({
   menuType: "light",
   inMenu: false,
-  openSubmenuIndex: null,
-  setOpenSubmenuIndex:
+  openSubmenuId: null,
+  setOpenSubmenuId:
   /* istanbul ignore next */
   () => {}
 });

package/esm/components/menu/scrollable-block/scrollable-block.component.js

@@ -4,7 +4,6 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import MenuContext from "../menu.context";
 import MenuItem from "../menu-item";
-import SubmenuContext from "../__internal__/submenu/submenu.context";
 import StyledScrollableBlock from "./scrollable-block.style";
 import Box from "../../box";
 
@@ -16,13 +15,9 @@ const ScrollableBlock = ({
   parentVariant,
   ...rest
 }) => {
-  const menuContext = useContext(MenuContext);
-  const submenuContext = useContext(SubmenuContext);
   const {
-    blockIndex,
-    focusIndex,
-    handleKeyDown
-  } = submenuContext;
+    menuType
+  } = useContext(MenuContext);
   const scrollVariants = {
     light: "light",
     dark: "dark",
@@ -31,35 +26,22 @@ const ScrollableBlock = ({
   };
   return /*#__PURE__*/React.createElement(StyledScrollableBlock, _extends({
     "data-component": "submenu-scrollable-block",
-    menuType: menuContext.menuType,
+    menuType: menuType,
     variant: variant
   }, rest), parent && /*#__PURE__*/React.createElement(MenuItem, {
+    "data-component": "scrollable-block-parent",
     overrideColor: true,
     variant: parentVariant,
     as: "div",
     href: "#"
   }, parent), /*#__PURE__*/React.createElement(Box, {
     overflowY: "scroll",
-    scrollVariant: scrollVariants[menuContext.menuType],
+    scrollVariant: scrollVariants[menuType],
     height: height,
     p: 0,
     as: "ul",
     role: "list"
-  }, React.Children.map(children, (child, index) => {
-    let isFocused = false;
-    const blockItemFocused = focusIndex >= blockIndex;
-
-    if (blockItemFocused) {
-      isFocused = focusIndex - blockIndex === index;
-    }
-
-    return /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
-      value: {
-        isFocused,
-        handleKeyDown
-      }
-    }, child);
-  })));
+  }, children));
 };
 
 ScrollableBlock.propTypes = {

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) {

package/lib/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/lib/components/menu/__internal__/locators.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MENU_ITEM_CHILDREN_LOCATOR = exports.BLOCK_INDEX_SELECTOR = exports.ALL_CHILDREN_SELECTOR = exports.SCROLLABLE_BLOCK_PARENT = exports.SCROLLABLE_BLOCK = exports.MENU_ITEM = void 0;
+const MENU_ITEM = "menu-item";
+exports.MENU_ITEM = MENU_ITEM;
+const SCROLLABLE_BLOCK = "submenu-scrollable-block";
+exports.SCROLLABLE_BLOCK = SCROLLABLE_BLOCK;
+const SCROLLABLE_BLOCK_PARENT = "scrollable-block-parent";
+exports.SCROLLABLE_BLOCK_PARENT = SCROLLABLE_BLOCK_PARENT;
+const ALL_CHILDREN_SELECTOR = `[data-component='${MENU_ITEM}'], [data-component='${SCROLLABLE_BLOCK_PARENT}']`;
+exports.ALL_CHILDREN_SELECTOR = ALL_CHILDREN_SELECTOR;
+const BLOCK_INDEX_SELECTOR = `[data-component='${MENU_ITEM}'], [data-component='${SCROLLABLE_BLOCK}']`;
+exports.BLOCK_INDEX_SELECTOR = BLOCK_INDEX_SELECTOR;
+const MENU_ITEM_CHILDREN_LOCATOR = `[data-component='${MENU_ITEM}']`;
+exports.MENU_ITEM_CHILDREN_LOCATOR = MENU_ITEM_CHILDREN_LOCATOR;