carbon-react 104.34.0 → 104.36.0

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

@@ -0,0 +1,325 @@
+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";
+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";
+const Submenu = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  title,
+  icon,
+  submenuDirection = "right",
+  onKeyDown,
+  variant = "default",
+  showDropdownArrow = true,
+  clickToOpen,
+  href,
+  maxWidth,
+  asPassiveItem,
+  onSubmenuOpen,
+  onSubmenuClose,
+  ...rest
+}, ref) => {
+  const [blockDoubleFocus, setBlockDoubleFocus] = useState(false);
+  const menuContext = useContext(MenuContext);
+  const {
+    inFullscreenView
+  } = menuContext;
+  const [submenuOpen, setSubmenuOpen] = useState(false);
+  const [submenuFocusIndex, setSubmenuFocusIndex] = useState(undefined);
+  const [characterString, setCharacterString] = useState("");
+  const submenuRef = useRef();
+  const formattedChildren = React.Children.map(children, child => {
+    if (child.type === ScrollableBlock) {
+      return [...child.props.children];
+    }
+
+    return child;
+  });
+  const arrayOfFormattedChildren = React.Children.toArray(formattedChildren);
+  const numberOfChildren = useMemo(() => React.Children.count(formattedChildren), [formattedChildren]);
+  const characterTimer = useRef();
+  const startCharacterTimeout = useCallback(() => {
+    characterTimer.current = setTimeout(() => {
+      setCharacterString("");
+    }, 1500);
+  }, []);
+  const restartCharacterTimeout = useCallback(() => {
+    clearTimeout(characterTimer.current);
+    startCharacterTimeout();
+  }, [startCharacterTimeout]);
+  const openSubmenu = useCallback(() => {
+    setSubmenuOpen(true);
+    if (onSubmenuOpen) onSubmenuOpen();
+  }, [onSubmenuOpen]);
+  const closeSubmenu = useCallback(() => {
+    setSubmenuOpen(false);
+    if (onSubmenuClose) onSubmenuClose();
+    setSubmenuFocusIndex(undefined);
+    setBlockDoubleFocus(false);
+    setCharacterString("");
+  }, [onSubmenuClose]);
+  const handleKeyDown = useCallback((event, index = submenuFocusIndex) => {
+    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) {
+      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 (Events.isAlphabetKey(event) || Events.isNumberKey(event)) {
+        event.stopPropagation();
+
+        if (characterTimer.current) {
+          restartCharacterTimeout();
+        } else {
+          startCharacterTimeout();
+        }
+
+        setCharacterString(`${characterString}${event.key.toLowerCase()}`);
+      } else {
+        setCharacterString("");
+      }
+
+      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 ((nextChild === null || nextChild === void 0 ? void 0 : nextChild.type) === MenuItem) {
+        setSubmenuFocusIndex(nextIndex);
+      } else {
+        handleKeyDown(event, nextIndex);
+      }
+    }
+  }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+  const onClickOutside = useCallback(event => {
+    if (!Events.composedPath(event).includes(submenuRef.current)) {
+      document.removeEventListener("click", onClickOutside);
+      closeSubmenu();
+    }
+  }, [closeSubmenu]);
+  useEffect(() => {
+    if (characterString !== "") {
+      const nextIndex = characterNavigation(characterString, React.Children.toArray(formattedChildren), submenuFocusIndex);
+      setSubmenuFocusIndex(nextIndex);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [characterString]);
+  useEffect(() => {
+    if (submenuOpen) {
+      document.addEventListener("click", onClickOutside);
+    }
+
+    return function cleanup() {
+      document.removeEventListener("click", onClickOutside);
+    };
+  }, [onClickOutside, submenuOpen]);
+
+  if (inFullscreenView) {
+    return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
+      "data-component": "submenu-wrapper",
+      ref: submenuRef,
+      inFullscreenView: inFullscreenView,
+      menuType: menuContext.menuType,
+      asPassiveItem: asPassiveItem
+    }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
+      className: className,
+      menuType: menuContext.menuType,
+      ref: ref,
+      as: asPassiveItem ? "div" : Link,
+      href: !asPassiveItem ? href : undefined,
+      icon: icon,
+      tabIndex: asPassiveItem ? -1 : 0,
+      variant: variant,
+      inFullscreenView: inFullscreenView
+    }), title), /*#__PURE__*/React.createElement(StyledSubmenu, {
+      "data-component": "submenu",
+      variant: variant,
+      menuType: menuContext.menuType,
+      inFullscreenView: inFullscreenView
+    }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
+      value: {
+        isFocused: submenuFocusIndex === index,
+        focusIndex: submenuFocusIndex,
+        handleKeyDown,
+        blockIndex: React.Children.toArray(children).findIndex(item => item.type === ScrollableBlock)
+      }
+    }, child))));
+  }
+
+  return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
+    "data-component": "submenu-wrapper",
+    onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
+    onMouseLeave: () => closeSubmenu(),
+    onClick: clickToOpen ? () => openSubmenu() : undefined,
+    ref: submenuRef,
+    isSubmenuOpen: submenuOpen
+  }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
+    className: className,
+    menuType: menuContext.menuType,
+    ref: ref,
+    icon: icon,
+    tabIndex: -1,
+    variant: variant,
+    isOpen: submenuOpen,
+    as: Link,
+    hasSubmenu: true,
+    showDropdownArrow: showDropdownArrow,
+    onKeyDown: handleKeyDown,
+    clickToOpen: clickToOpen,
+    href: href,
+    maxWidth: maxWidth
+  }), title), submenuOpen && /*#__PURE__*/React.createElement(StyledSubmenu, {
+    "data-component": "submenu",
+    submenuDirection: submenuDirection,
+    variant: variant,
+    menuType: menuContext.menuType
+  }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
+    value: {
+      isFocused: !blockDoubleFocus && submenuFocusIndex === index,
+      focusIndex: submenuFocusIndex,
+      handleKeyDown,
+      blockIndex: React.Children.toArray(children).findIndex(item => item.type === ScrollableBlock),
+      updateFocusIndex: setSubmenuFocusIndex,
+      itemIndex: child.type === MenuItem ? index : undefined
+    }
+  }, child))));
+});
+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
+};
+export default Submenu;

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

@@ -0,0 +1,3 @@
+export default SubmenuContext;
+declare const SubmenuContext: React.Context<{}>;
+import React from "react";

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

@@ -0,0 +1,3 @@
+import React from "react";
+const SubmenuContext = /*#__PURE__*/React.createContext({});
+export default SubmenuContext;

package/esm/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -0,0 +1,2 @@
+export const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,159 @@
+import styled, { css } from "styled-components";
+import { baseTheme } from "../../../../style/themes";
+import { StyledLink } from "../../../link/link.style";
+import { StyledMenuItem } from "../../menu.style";
+import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
+import StyledIcon from "../../../icon/icon.style";
+import StyledSearch from "../../../search/search.style";
+import menuConfigVariants from "../../menu.config";
+const StyledSubmenuWrapper = styled.div`
+  position: relative;
+  width: fit-content;
+  max-width: inherit;
+
+  ${({
+  isSubmenuOpen,
+  theme
+}) => isSubmenuOpen && css`
+      z-index: ${theme.zIndex.popover};
+    `}
+
+  ${({
+  inFullscreenView,
+  menuType,
+  asPassiveItem
+}) => inFullscreenView && css`
+      width: 100%;
+
+      ${asPassiveItem && css`
+        ${StyledMenuItemWrapper} {
+          outline: none;
+          color: ${menuConfigVariants[menuType].title};
+        }
+      `}
+    `}
+`;
+const StyledSubmenu = styled.ul`
+  ${({
+  menuType,
+  submenuDirection,
+  variant,
+  inFullscreenView
+}) => css`
+    ${!inFullscreenView && css`
+      box-shadow: var(--boxShadow100);
+      position: absolute;
+      background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].background};
+      a,
+      button,
+      ${StyledLink} a,
+      ${StyledLink} button {
+        width: 100%;
+      }
+    `}
+
+    ${inFullscreenView && css`
+      ${StyledMenuItem} {
+        width: 100%;
+      }
+    `}
+
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    min-width: 100%;
+
+    ${StyledMenuItemWrapper}:after, ${StyledMenuItemWrapper}:hover:after {
+      display: none;
+    }
+
+    ${StyledMenuItemWrapper} {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      line-height: 40px;
+      white-space: nowrap;
+      cursor: pointer;
+
+      ${!inFullscreenView && css`
+        background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+
+        a:focus,
+        button:focus {
+          background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+        }
+
+        a:hover,
+        button:hover {
+          background-color: ${menuConfigVariants[menuType].submenuItemBackgroundHover};
+          color: var(--colorsComponentsMenuYang100);
+
+          [data-component="icon"] {
+            color: var(--colorsComponentsMenuYang100);
+          }
+        }
+      `}
+
+      a {
+        text-decoration: none;
+      }
+
+      ${StyledIcon} {
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
+      }
+
+      ${StyledSearch} span > [data-component="icon"] {
+        color: var(--colorsUtilityMajor200);
+
+        &:hover {
+          color: var(--colorsUtilityMajor150);
+        }
+      }
+
+      ${StyledSearch} {
+        :hover {
+          border-bottom-color: var(--colorsUtilityMajor150);
+        }
+      }
+    }
+
+    [data-component="icon"] {
+      line-height: 16px;
+      top: -1px;
+
+      &:before {
+        line-height: unset;
+      }
+
+      span {
+        vertical-align: middle;
+
+        svg {
+          height: 16px;
+          width: 16px;
+        }
+      }
+    }
+
+    &:before {
+      background-color: transparent;
+      border-radius: 0 0 4px 4px;
+      content: "";
+      height: 5px;
+      position: absolute;
+      top: -5px;
+      width: 100%;
+    }
+
+    ${submenuDirection === "left" && css`
+      right: 0;
+    `}
+  `}
+`;
+StyledSubmenuWrapper.defaultProps = {
+  theme: baseTheme
+};
+export { StyledSubmenu, StyledSubmenuWrapper };

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

@@ -0,0 +1,6 @@
+export { default as Menu } from "./menu";
+export { default as MenuItem } from "./menu-item/menu-item";
+export { default as ScrollableBlock } from "./scrollable-block/scrollable-block";
+export { default as SubmenuBlock } from "./submenu-block/submenu-block";
+export { default as MenuDivider } from "./menu-divider/menu-divider";
+export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title";

package/esm/components/menu/index.js

@@ -0,0 +1,7 @@
+export { default as Menu } from "./menu.component";
+export { default as MenuItem } from "./menu-item/menu-item.component";
+export { default as SubmenuBlock } from "./submenu-block/submenu-block.component";
+export { default as MenuDivider } from "./menu-divider/menu-divider.component";
+export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title.component";
+export { default as MenuFullscreen } from "./menu-full-screen/menu-full-screen.component";
+export { default as ScrollableBlock } from "./scrollable-block/scrollable-block.component";

package/esm/components/menu/menu-divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./menu-divider";
+export * from "./menu-divider";

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

@@ -0,0 +1,3 @@
+export default MenuDivider;
+declare const MenuDivider: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

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

@@ -0,0 +1,23 @@
+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";
+const MenuDivider = /*#__PURE__*/React.forwardRef(({
+  size = "default"
+}, ref) => {
+  const menuContext = useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(StyledMenuItem, {
+    inSubmenu: true
+  }, /*#__PURE__*/React.createElement(StyledDivider, {
+    size: size,
+    "data-component": "menu-divider",
+    menuType: menuContext.menuType,
+    ref: ref
+  }));
+});
+MenuDivider.propTypes = {
+  /** sets the size of the MenuDivider */
+  size: PropTypes.oneOf(["default", "large"])
+};
+export default MenuDivider;

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface MenuDividerProps {
+  size?: "default" | "large";
+}
+
+declare function MenuDivider(
+  props: MenuDividerProps & React.RefAttributes<HTMLDivElement>
+): JSX.Element;
+
+export default MenuDivider;

package/esm/components/menu/menu-divider/menu-divider.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledDivider;
+declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,14 @@
+import styled, { css } from "styled-components";
+import menuConfigVariants from "../menu.config";
+const StyledDivider = styled.div`
+  cursor: default;
+  ${({
+  menuType,
+  size
+}) => 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/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./menu-full-screen";
+export * from "./menu-full-screen";

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

@@ -0,0 +1 @@
+export { default } from "./menu-full-screen.component";

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

@@ -0,0 +1,17 @@
+export default MenuFullscreen;
+declare function MenuFullscreen({ children, isOpen, startPosition, onClose, ...rest }: {
+    [x: string]: any;
+    children: any;
+    isOpen: any;
+    startPosition?: string | undefined;
+    onClose: any;
+}): JSX.Element;
+declare namespace MenuFullscreen {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const isOpen: PropTypes.Requireable<boolean>;
+        const startPosition: PropTypes.Requireable<string>;
+        const onClose: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";