carbon-react 118.5.0 → 118.5.2

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

@@ -1,42 +1,24 @@
 import Events from "../../../../__internal__/utils/helpers/events";
 import { MENU_ITEM, SCROLLABLE_BLOCK_PARENT } from "../locators";
-
 function characterNavigation(inputString, focusableItems) {
   if (!inputString || !focusableItems) return undefined;
-
-  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 => {
-    var _getInnerText;
-
-    return (_getInnerText = getInnerText(element)) === null || _getInnerText === void 0 ? void 0 : _getInnerText.toLowerCase();
-  };
-
+  const getInnerText = element => element?.textContent?.split("\n")?.map(text => text.trim()).join(" ");
+  const getMenuText = element => getInnerText(element)?.toLowerCase();
   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()));
+    if (!item?.getAttribute("data-component")) return false;
+    return [MENU_ITEM, SCROLLABLE_BLOCK_PARENT].includes(item.getAttribute("data-component")) && getMenuText(item)?.startsWith(inputString.toLowerCase());
   });
   return matchingItem;
 }
-
 function menuKeyboardNavigation(event, focusableItems) {
   if (Events.isHomeKey(event)) {
     event.preventDefault();
     return 0;
   }
-
   if (Events.isEndKey(event)) {
     event.preventDefault();
     return focusableItems.length - 1;
   }
-
   return undefined;
 }
-
 export { characterNavigation, menuKeyboardNavigation };

package/esm/components/menu/__internal__/spec-helper/index.js

@@ -7,8 +7,8 @@ const events = {
     preventDefault: jest.fn()
   }
 };
-
-const openSubmenu = (wrapper, index = 0) => {
+const openSubmenu = function (wrapper) {
+  let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   const menuWrapper = wrapper.find(StyledSubmenuWrapper).at(index);
   const menuItem = menuWrapper.exists("a") ? menuWrapper.find("a") : menuWrapper.find("button");
   menuItem.getDOMNode().focus();
@@ -17,5 +17,4 @@ const openSubmenu = (wrapper, index = 0) => {
   });
   wrapper.update();
 };
-
 export default openSubmenu;

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

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useCallback, useEffect, useContext, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
@@ -11,24 +10,26 @@ 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,
-  title,
-  icon,
-  submenuDirection = "right",
-  onKeyDown,
-  variant = "default",
-  showDropdownArrow = true,
-  clickToOpen,
-  href,
-  maxWidth,
-  asPassiveItem,
-  onSubmenuOpen,
-  onSubmenuClose,
-  onClick,
-  ...rest
-}, ref) => {
+import useStableCallback from "../../../../hooks/__internal__/useStableCallback/useStableCallback";
+const Submenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    title,
+    icon,
+    submenuDirection = "right",
+    onKeyDown,
+    variant = "default",
+    showDropdownArrow = true,
+    clickToOpen,
+    href,
+    maxWidth,
+    asPassiveItem,
+    onSubmenuOpen: onSubmenuOpenProp,
+    onSubmenuClose,
+    onClick,
+    ...rest
+  } = _ref;
   const submenuRef = useRef(null);
   const submenuId = useRef(guid());
   const menuContext = useContext(MenuContext);
@@ -45,20 +46,15 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const shiftTabPressed = useRef(false);
   const focusFirstMenuItemOnOpen = useRef(false);
   const numberOfChildren = submenuItemIds.length;
+  const onSubmenuOpen = useStableCallback(onSubmenuOpenProp);
   const blockIndex = useMemo(() => {
-    var _submenuRef$current;
-
-    const items = (_submenuRef$current = submenuRef.current) === null || _submenuRef$current === void 0 ? void 0 : _submenuRef$current.querySelectorAll(BLOCK_INDEX_SELECTOR);
-
+    const items = submenuRef.current?.querySelectorAll(BLOCK_INDEX_SELECTOR);
     if (items && submenuOpen && numberOfChildren) {
-      var _submenuRef$current2;
-
       const childrenArray = Array.from(items);
-      const scrollableBlock = (_submenuRef$current2 = submenuRef.current) === null || _submenuRef$current2 === void 0 ? void 0 : _submenuRef$current2.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
+      const scrollableBlock = submenuRef.current?.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
       const index = scrollableBlock ? childrenArray.indexOf(scrollableBlock) : -1;
-      return scrollableBlock !== null && scrollableBlock !== void 0 && scrollableBlock.querySelector(`[data-component='${SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
+      return scrollableBlock?.querySelector(`[data-component='${SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
     }
-
     return -1;
   }, [submenuOpen, numberOfChildren]);
   const characterTimer = useRef(null);
@@ -72,26 +68,24 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     if (characterTimer.current) {
       clearTimeout(characterTimer.current);
     }
-
     startCharacterTimeout();
   }, [startCharacterTimeout]);
   const openSubmenu = useCallback(() => {
     setSubmenuOpen(true);
     setOpenSubmenuId(submenuId.current);
-
-    if (onSubmenuOpen) {
+  }, [setOpenSubmenuId]);
+  useEffect(() => {
+    if (submenuOpen && onSubmenuOpen) {
       onSubmenuOpen();
     }
-  }, [onSubmenuOpen, setOpenSubmenuId]);
+  }, [submenuOpen, onSubmenuOpen]);
   const closeSubmenu = useCallback(() => {
     shiftTabPressed.current = false;
     setSubmenuOpen(false);
     setSubmenuFocusId(null);
-
     if (onSubmenuClose) {
       onSubmenuClose();
     }
-
     setCharacterString("");
   }, [onSubmenuClose]);
   useEffect(() => {
@@ -111,11 +105,9 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
         focusFirstMenuItemOnOpen.current = !href;
       }
     }
-
     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();
@@ -123,89 +115,72 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
           return;
         }
       }
-
       if (Events.isTabKey(event) && !Events.isShiftKey(event)) {
         if (nextIndex === numberOfChildren - 1) {
           closeSubmenu();
           return;
         }
-
         shiftTabPressed.current = false;
         nextIndex += 1;
       }
-
       if (Events.isTabKey(event) && Events.isShiftKey(event)) {
         if (nextIndex <= 0) {
           closeSubmenu();
           return;
         }
-
         shiftTabPressed.current = true;
         nextIndex -= 1;
       }
-
       if (Events.isDownKey(event)) {
         event.preventDefault();
         shiftTabPressed.current = false;
-
         if (nextIndex < numberOfChildren - 1) {
           nextIndex += 1;
         }
       }
-
       if (Events.isUpKey(event)) {
         event.preventDefault();
         shiftTabPressed.current = false;
-
         if (nextIndex > 0) {
           nextIndex -= 1;
         }
       }
-
       if (Events.isEscKey(event)) {
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown?.(event);
         closeSubmenu();
         return;
       }
-
       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();
         } else {
           startCharacterTimeout();
         }
-
         setCharacterString(`${characterString}${event.key.toLowerCase()}`);
       } else {
         setCharacterString("");
       }
-
       if (Events.isEnterKey(event)) {
         /* timeout enforces that the "closeSubmenu" method will be run after 
           the browser navigates to the specified href of the menu-item. */
         setTimeout(() => closeSubmenu());
       }
-
       if (href && Events.isEnterKey(event)) {
         closeSubmenu();
         return;
       }
-
       if (nextIndex !== index) {
         setSubmenuFocusId(submenuItemIds[nextIndex]);
       }
@@ -214,11 +189,9 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     /* istanbul ignore else */
     if (submenuRef.current && children) {
-      var _submenuRef$current3;
+      const items = submenuRef.current?.querySelectorAll(ALL_CHILDREN_SELECTOR);
 
-      const items = (_submenuRef$current3 = submenuRef.current) === null || _submenuRef$current3 === void 0 ? void 0 : _submenuRef$current3.querySelectorAll(ALL_CHILDREN_SELECTOR);
       /* istanbul ignore else */
-
       if (items) {
         setSubmenuItemIds(Array.from(items).map(item => item.getAttribute("id")));
       }
@@ -230,37 +203,27 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       setSubmenuFocusId(submenuItemIds[0]);
     }
   }, [submenuOpen, submenuFocusId, submenuItemIds]);
-
   const handleClickAway = () => {
     document.removeEventListener("click", handleClickAway);
     closeSubmenu();
   };
-
   const handleClickInside = useClickAwayListener(handleClickAway);
-
   const handleClick = event => {
     openSubmenu();
-
     if (onClick) {
       onClick(event);
     }
   };
-
   useEffect(() => {
-    var _submenuRef$current4;
-
-    const items = (_submenuRef$current4 = submenuRef.current) === null || _submenuRef$current4 === void 0 ? void 0 : _submenuRef$current4.querySelectorAll(ALL_CHILDREN_SELECTOR);
-
+    const items = submenuRef.current?.querySelectorAll(ALL_CHILDREN_SELECTOR);
     if (items && characterString !== "") {
       const submenuChildren = Array.from(items);
       const nextItem = characterNavigation(characterString, submenuChildren);
-
       if (nextItem) {
         setSubmenuFocusId(nextItem.id);
       }
     }
   }, [characterString, submenuItemIds]);
-
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
@@ -291,7 +254,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
     }, children)));
   }
-
   return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,

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

@@ -11,18 +11,23 @@ const StyledSubmenuWrapper = styled.div`
   width: fit-content;
   max-width: inherit;
 
-  ${({
-  isSubmenuOpen,
-  theme
-}) => isSubmenuOpen && css`
+  ${_ref => {
+  let {
+    isSubmenuOpen,
+    theme
+  } = _ref;
+  return isSubmenuOpen && css`
       z-index: ${theme.zIndex.popover};
-    `}
-
-  ${({
-  inFullscreenView,
-  menuType,
-  asPassiveItem
-}) => inFullscreenView && css`
+    `;
+}}
+
+  ${_ref2 => {
+  let {
+    inFullscreenView,
+    menuType,
+    asPassiveItem
+  } = _ref2;
+  return inFullscreenView && css`
       width: 100%;
 
       ${asPassiveItem && menuType && css`
@@ -31,15 +36,18 @@ const StyledSubmenuWrapper = styled.div`
           color: ${menuConfigVariants[menuType].title};
         }
       `}
-    `}
+    `;
+}}
 `;
 const StyledSubmenu = styled.ul`
-  ${({
-  menuType,
-  submenuDirection,
-  variant,
-  inFullscreenView
-}) => css`
+  ${_ref3 => {
+  let {
+    menuType,
+    submenuDirection,
+    variant,
+    inFullscreenView
+  } = _ref3;
+  return css`
     ${!inFullscreenView && menuType && css`
       box-shadow: var(--boxShadow100);
       position: absolute;
@@ -164,7 +172,8 @@ const StyledSubmenu = styled.ul`
     ${submenuDirection === "left" && css`
       right: 0;
     `}
-  `}
+  `;
+}}
 `;
 StyledSubmenuWrapper.defaultProps = {
   theme: baseTheme

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

@@ -1,15 +1,15 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 StyledDivider from "./menu-divider.style";
 import MenuContext from "../menu.context";
 import { StyledMenuItem } from "../menu.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
-const MenuDivider = /*#__PURE__*/React.forwardRef(({
-  size = "default",
-  ...rest
-}, ref) => {
+const MenuDivider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    size = "default",
+    ...rest
+  } = _ref;
   const menuContext = useContext(MenuContext);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true

package/esm/components/menu/menu-divider/menu-divider.style.js

@@ -2,13 +2,16 @@ import styled, { css } from "styled-components";
 import menuConfigVariants from "../menu.config";
 const StyledDivider = styled.div`
   cursor: default;
-  ${({
-  menuType,
-  size
-}) => css`
+  ${_ref => {
+  let {
+    menuType,
+    size
+  } = _ref;
+  return css`
     margin: 0px ${size === "large" ? "" : "16px"};
     height: ${size === "large" ? "4px" : "1px"};
     background-color: ${menuConfigVariants[menuType].divider};
-  `}
+  `;
+}}
 `;
 export default StyledDivider;

package/esm/components/menu/menu-full-screen/menu-full-screen.component.d.ts

@@ -10,5 +10,5 @@ export interface MenuFullscreenProps extends TagProps {
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
     onClose: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const MenuFullscreen: ({ children, isOpen, startPosition, onClose, ...rest }: MenuFullscreenProps) => JSX.Element;
+export declare const MenuFullscreen: ({ children, isOpen, startPosition, onClose, ...rest }: MenuFullscreenProps) => React.JSX.Element;
 export default MenuFullscreen;

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

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, useRef } from "react";
 import PropTypes from "prop-types";
 import { StyledMenuFullscreen, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
@@ -13,46 +12,40 @@ import Icon from "../../icon";
 import Portal from "../../portal";
 import MenuDivider from "../menu-divider/menu-divider.component";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
-
-const MenuFullscreen = ({
-  children,
-  isOpen,
-  startPosition = "left",
-  onClose,
-  ...rest
-}) => {
+export const MenuFullscreen = _ref => {
+  let {
+    children,
+    isOpen,
+    startPosition = "left",
+    onClose,
+    ...rest
+  } = _ref;
   const menuWrapperRef = useRef(null);
   const menuContentRef = useRef(null);
   const {
     menuType
   } = useContext(MenuContext);
   const isDarkVariant = ["dark", "black"].includes(menuType);
-
   const handleKeyDown = ev => {
     /* istanbul ignore else */
     if (Events.isEscKey(ev)) {
       onClose(ev);
     }
-
     if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
-      var _menuWrapperRef$curre;
+      const search = menuWrapperRef.current?.querySelector('[data-component="search"');
+      const searchInput = search?.querySelector("input");
+      const searchButton = search?.querySelector("button");
 
-      const search = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.querySelector('[data-component="search"');
-      const searchInput = search === null || search === void 0 ? void 0 : search.querySelector("input");
-      const searchButton = search === null || search === void 0 ? void 0 : search.querySelector("button"); // if there is no value in the search input the button disappears when the input blurs
+      // if there is no value in the search input the button disappears when the input blurs
       // this means we need to programatically set focus to the next menu item
-
       if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
-        var _menuWrapperRef$curre2, _elements;
-
         ev.preventDefault();
-        const elements = Array.from((_menuWrapperRef$curre2 = menuWrapperRef.current) === null || _menuWrapperRef$curre2 === void 0 ? void 0 : _menuWrapperRef$curre2.querySelectorAll("a, input, button"));
+        const elements = Array.from(menuWrapperRef.current?.querySelectorAll("a, input, button"));
         const index = elements.indexOf(searchInput);
-        (_elements = elements[index + 2]) === null || _elements === void 0 ? void 0 : _elements.focus();
+        elements[index + 2]?.focus();
       }
     }
   };
-
   return /*#__PURE__*/React.createElement("li", {
     "aria-label": "menu-fullscreen"
   }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
@@ -94,21 +87,8 @@ const MenuFullscreen = ({
       menuType,
       inMenu: true,
       openSubmenuId: null,
-      setOpenSubmenuId:
-      /* istanbul ignore next */
-      () => {}
+      setOpenSubmenuId: /* istanbul ignore next */() => {}
     }
   }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, child, index < React.Children.count(children) - 1 && /*#__PURE__*/React.createElement(MenuDivider, null))))))))));
 };
-
-MenuFullscreen.propTypes = {
-  "children": PropTypes.node,
-  "data-component": PropTypes.string,
-  "data-element": PropTypes.string,
-  "data-role": PropTypes.string,
-  "isOpen": PropTypes.bool,
-  "onClose": PropTypes.func.isRequired,
-  "startPosition": PropTypes.oneOf(["left", "right"])
-};
-export { MenuFullscreen };
 export default MenuFullscreen;

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

@@ -20,12 +20,14 @@ const StyledMenuFullscreen = styled.div`
     font-size: 16px;
   }
 
-  ${({
-  isOpen,
-  menuType,
-  startPosition,
-  theme
-}) => css`
+  ${_ref => {
+  let {
+    isOpen,
+    menuType,
+    startPosition,
+    theme
+  } = _ref;
+  return css`
     background-color: ${menuConfigVariants[menuType].background};
     z-index: ${theme.zIndex.fullScreenModal};
 
@@ -81,7 +83,8 @@ const StyledMenuFullscreen = styled.div`
       ${startPosition}: -100%;
       transition: all 0.3s ease;
     `}
-  `}
+  `;
+}}
 
   ${Box} {
     &::-webkit-scrollbar {
@@ -99,11 +102,14 @@ const StyledMenuFullscreenHeader = styled.div`
     top: 8px;
   }
 
-  ${({
-  menuType
-}) => css`
+  ${_ref2 => {
+  let {
+    menuType
+  } = _ref2;
+  return css`
     background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-  `}
+  `;
+}}
 `;
 StyledMenuFullscreen.defaultProps = {
   theme: baseTheme

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

@@ -61,7 +61,7 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     children?: React.ReactNode;
 }
 export declare const MenuItem: {
-    ({ submenu, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, ...rest }: MenuWithChildren | MenuWithIcon): JSX.Element;
+    ({ submenu, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
     displayName: string;
 };
 export default MenuItem;