carbon-react 111.12.3 → 111.12.4

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

@@ -1,4 +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";
@@ -44,22 +45,28 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   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 blockIndex = useMemo(() => {
     var _childrenArray$index;
+
     const childrenArray = React.Children.toArray(children);
     let index = childrenArray.findIndex(item => item.type === ScrollableBlock);
+
     if ((_childrenArray$index = childrenArray[index]) !== null && _childrenArray$index !== void 0 && _childrenArray$index.props.parent) {
       index += 1;
     }
+
     return index;
   }, [children]);
   const characterTimer = useRef();
@@ -79,9 +86,11 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   }, [onSubmenuOpen, indexInMenu, setOpenSubmenuIndex]);
   const closeSubmenu = useCallback(() => {
     setSubmenuOpen(false);
+
     if (openSubmenuIndex === indexInMenu) {
       setOpenSubmenuIndex(null);
     }
+
     if (onSubmenuClose) onSubmenuClose();
     setSubmenuFocusIndex(undefined);
     setBlockDoubleFocus(false);
@@ -97,92 +106,114 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       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) {
       let nextIndex = index;
+
       if (Events.isTabKey(event) && !Events.isShiftKey(event)) {
         if (index === numberOfChildren - 1) {
           closeSubmenu();
           return;
         }
+
         nextIndex = index + 1;
         setBlockDoubleFocus(true);
       }
+
       if (Events.isTabKey(event) && Events.isShiftKey(event)) {
         if (index === 0) {
           closeSubmenu();
           return;
         }
+
         nextIndex = index - 1;
         setBlockDoubleFocus(true);
       }
+
       if (Events.isDownKey(event)) {
         event.preventDefault();
+
         if (index < numberOfChildren - 1) {
           nextIndex = index + 1;
         }
+
         setBlockDoubleFocus(false);
       }
+
       if (Events.isUpKey(event)) {
         event.preventDefault();
+
         if (index > 0) {
           nextIndex = index - 1;
         }
+
         setBlockDoubleFocus(false);
       }
+
       if (Events.isEscKey(event)) {
         onKeyDown(event);
         closeSubmenu();
         return;
       }
+
       if (Events.isHomeKey(event)) {
         event.preventDefault();
         nextIndex = 0;
       }
+
       if (Events.isEndKey(event)) {
         event.preventDefault();
         nextIndex = numberOfChildren - 1;
       }
+
       if (event.key.length === 1) {
         event.stopPropagation();
+
         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 && 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
+      } // 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 (!nextIndex && nextIndex !== 0) return; // Check that next index contains a MenuItem
       // If not, call handleKeyDown again
+
       const nextChild = arrayOfFormattedChildren[nextIndex];
+
       if ((nextChild === null || nextChild === void 0 ? void 0 : nextChild.type) === MenuItem) {
         setSubmenuFocusIndex(nextIndex);
       } else {
@@ -190,24 +221,29 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
     }
   }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+
   const handleClickAway = () => {
     document.removeEventListener("click", handleClickAway);
     closeSubmenu();
   };
+
   const handleClick = event => {
     openSubmenu();
+
     if (onClick) {
       onClick(event);
     }
   };
+
   useEffect(() => {
     if (characterString !== "") {
       const nextIndex = characterNavigation(characterString, React.Children.toArray(formattedChildren), submenuFocusIndex);
       setSubmenuFocusIndex(nextIndex);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [characterString]);
   const handleClickInside = useClickAwayListener(handleClickAway);
+
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
@@ -239,6 +275,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
     }, child))));
   }
+
   return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
@@ -282,38 +319,53 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
 Submenu.propTypes = {
   /** Children elements */
   children: PropTypes.node.isRequired,
+
   /** Custom className */
   className: PropTypes.string,
+
   /**
    * * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
    *
    * Adds an icon to the menu item.
    * */
   icon: PropTypes.string,
+
   /** Defines which direction the submenu will hang eg. left/right */
   submenuDirection: PropTypes.string,
+
   /** A title for the menu item that has a submenu. */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
   /** onKeyDown handler */
   onKeyDown: PropTypes.func,
+
   /** set the colour variant for a menuType */
   variant: PropTypes.oneOf(["default", "alternate"]),
+
   /** Flag to display the dropdown arrow when an item has a submenu */
   showDropdownArrow: PropTypes.bool,
+
   /** When set the submenu opens by click instead of hover */
   clickToOpen: PropTypes.bool,
+
   /** The href to use for the menu item. */
   href: PropTypes.string,
+
   /** Maximum width. Any valid CSS string */
   maxWidth: PropTypes.string,
+
   /** Used to set a submenu parent to passive styling in MenuFullscreen */
   asPassiveItem: PropTypes.bool,
+
   /** Callback triggered when submenu opens. Only valid with submenu prop */
   onSubmenuOpen: PropTypes.func,
+
   /** Callback triggered when submenu closes. Only valid with submenu prop */
   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
 };

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

@@ -1,4 +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, useRef } from "react";
 import PropTypes from "prop-types";
 import { StyledMenuFullscreen, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
@@ -11,6 +12,7 @@ import IconButton from "../../icon-button";
 import Icon from "../../icon";
 import Portal from "../../portal";
 import MenuDivider from "../menu-divider/menu-divider.component";
+
 const MenuFullscreen = ({
   children,
   isOpen,
@@ -23,12 +25,14 @@ const MenuFullscreen = ({
   const {
     menuType
   } = useContext(MenuContext);
+
   const handleKeyDown = ev => {
     /* istanbul ignore else */
     if (Events.isEscKey(ev)) {
       onClose(ev);
     }
   };
+
   const scrollVariants = {
     light: "light",
     dark: "dark",
@@ -85,13 +89,17 @@ const MenuFullscreen = ({
     }
   }, child, index < React.Children.count(children) - 1 && /*#__PURE__*/React.createElement(MenuDivider, null)))))))));
 };
+
 MenuFullscreen.propTypes = {
   /** The child elements to render */
   children: PropTypes.node,
+
   /** Sets whether the component is open or closed */
   isOpen: PropTypes.bool,
+
   /** The start position for the component to open from */
   startPosition: PropTypes.oneOf(["left", "right"]),
+
   /** A callback to be called when the close icon is clicked or enter is pressed when focused */
   onClose: PropTypes.func.isRequired
 };

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

@@ -1,4 +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, { useMemo, useRef, useEffect, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
@@ -11,6 +12,7 @@ import Submenu from "../__internal__/submenu/submenu.component";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
 import { StyledMenuItem } from "../menu.style";
 import Search from "../../search";
+
 const MenuItem = ({
   submenu,
   children,
@@ -48,6 +50,7 @@ const MenuItem = ({
     if ((child === null || child === void 0 ? void 0 : child.type) === Search) {
       isChildSearch.current = true;
     }
+
     return child;
   });
   const focusRef = isChildSearch.current ? childRef : ref;
@@ -68,11 +71,14 @@ const MenuItem = ({
     if (onKeyDown) {
       onKeyDown(event);
     }
+
     if (Events.isEscKey(event)) {
       ref.current.focus();
     }
+
     if (submenuContext.handleKeyDown !== undefined) {
       var _focusRef$current;
+
       if (!(isChildSearch.current && document.activeElement === focusRef.current && (_focusRef$current = focusRef.current) !== null && _focusRef$current !== void 0 && _focusRef$current.value)) {
         submenuContext.handleKeyDown(event);
       }
@@ -99,8 +105,11 @@ const MenuItem = ({
   const clonedChildren = isChildSearch.current ? childrenItems.map(child => /*#__PURE__*/React.cloneElement(child, {
     inputRef: childRef
   })) : children;
+
   const getTitle = title => maxWidth && typeof title === "string" ? title : "";
+
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
+
   if (submenu) {
     const asPassiveItem = !(onClick || href);
     return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
@@ -125,6 +134,7 @@ const MenuItem = ({
       onSubmenuClose: onSubmenuClose
     }, elementProps, rest), childrenItems));
   }
+
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
     "data-component": "menu-item",
     menuType: menuContext.menuType,
@@ -145,11 +155,14 @@ const MenuItem = ({
     inFullscreenView: inFullscreenView
   }), clonedChildren));
 };
+
 MenuItem.propTypes = {
   /** Styled system flex props */
   ...propTypes.flexbox,
+
   /** Styled system layout props */
   ...propTypes.layout,
+
   /** Either prop `icon` must be defined or this node must have children.
    * @type node
    */
@@ -157,12 +170,16 @@ MenuItem.propTypes = {
     if (!props.icon && !props.children) {
       return new Error("Either prop `icon` must be defined or this node must have children.");
     }
+
     return PropTypes.node(props, propName, ...rest);
   },
+
   /** Custom className */
   className: PropTypes.string,
+
   /** onClick handler */
   onClick: PropTypes.func,
+
   /**
    * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
    *
@@ -172,43 +189,61 @@ MenuItem.propTypes = {
     if (!props.icon && !props.children) {
       return new Error("Either prop `icon` must be defined or this node must have children.");
     }
+
     return PropTypes.oneOfType([PropTypes.string, PropTypes.node])(props, propName, ...rest);
   },
+
   /** Defines which direction the submenu will hang eg. left/right */
   submenuDirection: PropTypes.string,
+
   /** Is the menu item the currently selected item. */
   selected: PropTypes.bool,
+
   /** A title for the menu item that has a submenu. */
   submenu: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
+
   /** When set the submenu opens by click instead of hover */
   clickToOpen: PropTypes.bool,
+
   /** The href to use for the menu item. */
   href: PropTypes.string,
+
   /** onKeyDown handler */
   onKeyDown: PropTypes.func,
+
   /** The target to use for the menu item. */
   target: PropTypes.string,
+
   /** The rel attribute to be used for the underlying <a> tag */
   rel: PropTypes.string,
+
   /** Flag to display the dropdown arrow when an item has a submenu */
   showDropdownArrow: PropTypes.bool,
+
   /** set the colour variant for a menuType */
   variant: PropTypes.oneOf(["default", "alternate"]),
+
   /** If no text is provided an ariaLabel should be given to facilitate accessibility. */
   ariaLabel: (props, ...rest) => {
     if (!props.children && typeof props.submenu !== "string" && !props.ariaLabel) {
       return new Error("If no text is provided an ariaLabel should be given to facilitate accessibility.");
     }
+
     return PropTypes.string(props, ...rest);
   },
+
   /** Callback triggered when submenu opens. Only valid with submenu prop */
   onSubmenuOpen: PropTypes.func,
+
   /** Callback triggered when submenu closes. Only valid with submenu prop */
   onSubmenuClose: PropTypes.func,
+
   /** @ignore @private */
   overrideColor: PropTypes.bool,
+
   /** @ignore @private */
   isFocused: PropTypes.bool,
+
   /** @ignore @private */
   indexInMenu: PropTypes.number
 };

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -20,6 +20,7 @@ const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
 MenuSegmentTitle.propTypes = {
   /** set the colour variant for a menuType */
   variant: PropTypes.oneOf(["default", "alternate"]),
+
   /** the text to be displayed */
   children: PropTypes.string.isRequired
 };

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

@@ -1,4 +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, { useEffect, useState, useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
@@ -6,6 +7,7 @@ import { StyledMenuWrapper } from "./menu.style";
 import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation";
 import Events from "../../__internal__/utils/helpers/events";
 import MenuContext from "./menu.context";
+
 const Menu = ({
   menuType = "light",
   children,
@@ -47,22 +49,28 @@ const Menu = ({
     }
   }, 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;
   })));
 };
+
 Menu.propTypes = {
   /** Styled system flex props */
   ...propTypes.flexbox,
+
   /** Styled system layout props */
   ...propTypes.layout,
+
   /** Defines the color scheme of the component */
   menuType: PropTypes.oneOf(["light", "dark", "white", "black"]),
+
   /** Children elements */
   children: PropTypes.node.isRequired
 };

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

@@ -3,5 +3,7 @@ export default /*#__PURE__*/React.createContext({
   menuType: "light",
   inMenu: false,
   openSubmenuIndex: null,
-  setOpenSubmenuIndex: /* istanbul ignore next */() => {}
+  setOpenSubmenuIndex:
+  /* istanbul ignore next */
+  () => {}
 });

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

@@ -1,4 +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 MenuContext from "../menu.context";
@@ -6,6 +7,7 @@ import MenuItem from "../menu-item";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
 import StyledScrollableBlock from "./scrollable-block.style";
 import Box from "../../box";
+
 const ScrollableBlock = ({
   children,
   height,
@@ -46,9 +48,11 @@ const ScrollableBlock = ({
   }, 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,
@@ -57,17 +61,22 @@ const ScrollableBlock = ({
     }, child);
   })));
 };
+
 ScrollableBlock.propTypes = {
   /** Children elements */
   children: PropTypes.node.isRequired,
+
   /** Styled system height prop */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** set the colour variant for a menuType */
   variant: PropTypes.oneOf(["default", "alternate"]),
+
   /** the element, if any, displayed at the top of the block to be its semantic "parent",
    * but not part of the scrollable section
    */
   parent: PropTypes.node,
+
   /** the colour variant for the parent element, if different from the variant of the block */
   parentVariant: PropTypes.oneOf(["default", "alternate"])
 };

package/esm/components/message/message-content/message-content.component.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Content from "../../content";
 import MessageContentStyle from "./message-content.style";
+
 const MessageContent = ({
   title,
   children
@@ -10,6 +11,7 @@ const MessageContent = ({
     title: title
   }, children));
 };
+
 MessageContent.propTypes = {
   "children": PropTypes.node,
   "title": PropTypes.node

package/esm/components/message/message.component.js

@@ -1,4 +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 from "react";
 import PropTypes from "prop-types";
 import MessageStyle from "./message.style";
@@ -9,6 +10,7 @@ import Icon from "../icon";
 import IconButton from "../icon-button";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
+
 const Message = ({
   open = true,
   transparent = false,
@@ -24,6 +26,7 @@ const Message = ({
 }) => {
   const marginProps = filterStyledSystemMarginProps(props);
   const l = useLocale();
+
   const renderCloseIcon = () => {
     if (!showCloseIcon || !onDismiss) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -34,6 +37,7 @@ const Message = ({
       type: "close"
     }));
   };
+
   return open ? /*#__PURE__*/React.createElement(MessageStyle, _extends({}, tagComponent("Message", props), {
     className: className,
     transparent: transparent,
@@ -47,6 +51,7 @@ const Message = ({
     title: title
   }, children), renderCloseIcon()) : null;
 };
+
 Message.propTypes = {
   "children": PropTypes.node,
   "className": PropTypes.string,

package/esm/components/message/type-icon/type-icon.component.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import TypeIconStyle from "./type-icon.style";
 import Icon from "../../icon";
+
 const TypeIcon = ({
   variant = "info",
   transparent = false
@@ -13,6 +14,7 @@ const TypeIcon = ({
     type: variant
   }));
 };
+
 TypeIcon.propTypes = {
   "transparent": PropTypes.bool,
   "variant": PropTypes.oneOf(["error", "info", "success", "warning"])