carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,349 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"));
-var _submenu = require("./submenu.style");
-var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
-var _strictMenu = require("../strict-menu.context");
-var _keyboardNavigation = require("../keyboard-navigation");
-var _submenu2 = _interopRequireDefault(require("./submenu.context"));
-var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
-var _locators = require("../locators");
-var _useStableCallback = _interopRequireDefault(require("../../../../hooks/__internal__/useStableCallback/useStableCallback"));
-var _fixedNavigationBar = _interopRequireDefault(require("../../../navigation-bar/__internal__/fixed-navigation-bar.context"));
-var _focusTrapUtils = require("../../../../__internal__/focus-trap/focus-trap-utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const Submenu = /*#__PURE__*/_react.default.forwardRef(({
-  children,
-  className,
-  title,
-  icon,
-  submenuDirection = "right",
-  onKeyDown,
-  variant = "default",
-  showDropdownArrow = true,
-  clickToOpen,
-  href,
-  maxWidth,
-  asPassiveItem,
-  onSubmenuOpen: onSubmenuOpenProp,
-  onSubmenuClose,
-  onClick,
-  submenuMaxWidth,
-  submenuMinWidth,
-  ...rest
-}, ref) => {
-  const [submenuRef, setSubmenuRef] = (0, _react.useState)(null);
-  const submenuId = (0, _react.useRef)((0, _guid.default)());
-  const {
-    inFullscreenView,
-    openSubmenuId,
-    setOpenSubmenuId,
-    menuType
-  } = (0, _strictMenu.useStrictMenuContext)();
-  const [submenuOpen, setSubmenuOpen] = (0, _react.useState)(false);
-  const [submenuFocusId, setSubmenuFocusId] = (0, _react.useState)(null);
-  const [submenuItemIds, setSubmenuItemIds] = (0, _react.useState)([]);
-  const [characterString, setCharacterString] = (0, _react.useState)("");
-  const [applyFocusRadius, setApplyFocusRadius] = (0, _react.useState)(false);
-  const [applyFocusRadiusToLastItem, setApplyFocusRadiusToLastItem] = (0, _react.useState)(false);
-  const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
-  const numberOfChildren = submenuItemIds.length;
-  const {
-    submenuMaxHeight
-  } = (0, _react.useContext)(_fixedNavigationBar.default);
-  const onSubmenuOpen = (0, _useStableCallback.default)(onSubmenuOpenProp);
-  const blockIndex = (0, _react.useMemo)(() => {
-    const items = submenuRef?.querySelectorAll(_locators.BLOCK_INDEX_SELECTOR);
-    if (items && submenuOpen && numberOfChildren) {
-      const childrenArray = Array.from(items);
-      const scrollableBlock = submenuRef?.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK}']`);
-      const index = scrollableBlock ? childrenArray.indexOf(scrollableBlock) : -1;
-      return scrollableBlock?.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
-    }
-    return -1;
-  }, [submenuOpen, numberOfChildren, submenuRef]);
-  const characterTimer = (0, _react.useRef)(null);
-  const startCharacterTimeout = (0, _react.useCallback)(() => {
-    characterTimer.current = setTimeout(() => {
-      setCharacterString("");
-    }, 1500);
-  }, []);
-  const restartCharacterTimeout = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (characterTimer.current) {
-      clearTimeout(characterTimer.current);
-    }
-    startCharacterTimeout();
-  }, [startCharacterTimeout]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (characterTimer.current) {
-        clearTimeout(characterTimer.current);
-      }
-    };
-  }, []);
-  const openSubmenu = (0, _react.useCallback)(() => {
-    setSubmenuOpen(true);
-    setOpenSubmenuId(submenuId.current);
-  }, [setOpenSubmenuId]);
-  const lastMenuItemElement = (0, _react.useRef)();
-  (0, _react.useEffect)(() => {
-    const handleBorderRadiusStyling = () => {
-      // Finds all ul elements that are not submenus
-      const ulElements = Array.from(submenuRef?.querySelectorAll("ul:not([data-component='submenu'])") || /* istanbul ignore next */[]);
-
-      // Terminate early if there are no ul elements as we have nothing we need to apply styles to.
-      if (ulElements.length === 0) return;
-
-      // Get the last menu item in the submenu
-      const lastMenuItem = Array.from(submenuRef?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]).pop();
-      lastMenuItemElement.current = lastMenuItem;
-
-      // Get the last segment block
-      const lastSegmentBlock = ulElements.pop();
-
-      // Check if the last segment block is a scrollable block
-      const isLastSegmentBlockScrollableBlock = Boolean(lastSegmentBlock?.parentElement?.dataset.component === _locators.SCROLLABLE_BLOCK);
-
-      // Get all the menu items from the last segment block
-      const segmentBlockMenuItems = Array.from(lastSegmentBlock?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]);
-
-      // Get the last menu item in the last segment block
-      const lastMenuItemInSegmentBlock = segmentBlockMenuItems.pop();
-
-      // Check to see if the last menu item in the last segment block is visible
-      let isLastMenuItemInSegmentBlockVisible = false;
-      if (lastMenuItemInSegmentBlock && lastSegmentBlock) {
-        isLastMenuItemInSegmentBlockVisible = lastMenuItemInSegmentBlock.getBoundingClientRect().bottom < lastSegmentBlock.getBoundingClientRect().bottom;
-      }
-
-      // Check if the last item in the segment block is the same as the last MenuItem in the submenu
-      const menuItemsMatch = !!lastMenuItemInSegmentBlock && lastMenuItemInSegmentBlock === lastMenuItem;
-
-      // Applies the focus radius to the StyledBox of the StyledScrollableBlock
-      setApplyFocusRadius(menuItemsMatch);
-
-      // Applies border radius to the last item in the segment block
-      setApplyFocusRadiusToLastItem(menuItemsMatch && !isLastSegmentBlockScrollableBlock || menuItemsMatch && isLastSegmentBlockScrollableBlock && !isLastMenuItemInSegmentBlockVisible);
-    };
-    if (submenuOpen && submenuRef) {
-      handleBorderRadiusStyling();
-    }
-  }, [submenuOpen, submenuRef, numberOfChildren]);
-  (0, _react.useEffect)(() => {
-    if (submenuOpen && onSubmenuOpen) {
-      onSubmenuOpen();
-    }
-  }, [submenuOpen, onSubmenuOpen]);
-  const closeSubmenu = (0, _react.useCallback)(() => {
-    setSubmenuOpen(false);
-    setSubmenuFocusId(null);
-    if (onSubmenuClose) {
-      onSubmenuClose();
-    }
-    setCharacterString("");
-  }, [onSubmenuClose]);
-  (0, _react.useEffect)(() => {
-    if (openSubmenuId && openSubmenuId !== submenuId.current) {
-      closeSubmenu();
-    }
-  }, [openSubmenuId, closeSubmenu]);
-  const findCurrentIndex = (0, _react.useCallback)(id => {
-    const index = submenuItemIds.findIndex(itemId => itemId === id);
-    return index;
-  }, [submenuItemIds]);
-  const handleKeyDown = (0, _react.useCallback)(event => {
-    if (!submenuOpen) {
-      if (_events.default.isEnterKey(event) || _events.default.isSpaceKey(event) || _events.default.isDownKey(event) || _events.default.isUpKey(event)) {
-        event.preventDefault();
-        openSubmenu();
-        focusFirstMenuItemOnOpen.current = !href;
-      }
-    }
-    if (submenuOpen) {
-      const index = findCurrentIndex(submenuFocusId);
-      let nextIndex = index;
-      if (href && !submenuFocusId) {
-        if (_events.default.isDownKey(event) || _events.default.isUpKey(event)) {
-          event.preventDefault();
-          setSubmenuFocusId(submenuItemIds[0]);
-          return;
-        }
-      }
-      if (_events.default.isDownKey(event)) {
-        event.preventDefault();
-        if (nextIndex < numberOfChildren - 1) {
-          nextIndex += 1;
-        }
-      }
-      if (_events.default.isUpKey(event)) {
-        event.preventDefault();
-        setApplyFocusRadius(false);
-        if (nextIndex > 0) {
-          nextIndex -= 1;
-        }
-      }
-      if (_events.default.isEscKey(event)) {
-        onKeyDown?.(event);
-        closeSubmenu();
-        return;
-      }
-      if (_events.default.isHomeKey(event)) {
-        event.preventDefault();
-        event.stopPropagation();
-        nextIndex = 0;
-      }
-      if (_events.default.isEndKey(event)) {
-        event.preventDefault();
-        event.stopPropagation();
-        nextIndex = numberOfChildren - 1;
-      }
-      if (event.key.length === 1) {
-        event.stopPropagation();
-        if (characterTimer.current) {
-          restartCharacterTimeout();
-        } else {
-          startCharacterTimeout();
-        }
-        setCharacterString(`${characterString}${event.key.toLowerCase()}`);
-      } else {
-        setCharacterString("");
-      }
-      const eventIsFromInput = _events.default.composedPath(event.nativeEvent).find(p => p instanceof HTMLElement && (p.getAttribute("data-element") === "input" || p.getAttribute("data-element") === "input-icon-toggle"));
-      if (!eventIsFromInput) {
-        if (_events.default.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(), 0);
-        }
-      }
-      if (nextIndex !== index) {
-        setSubmenuFocusId(submenuItemIds[nextIndex]);
-      }
-    }
-  }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
-  (0, _react.useEffect)(() => {
-    /* istanbul ignore else */
-    if (submenuRef && children) {
-      const items = submenuRef?.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR);
-
-      /* istanbul ignore else */
-      if (items) {
-        setSubmenuItemIds(Array.from(items).filter(item => item.querySelector(_focusTrapUtils.defaultFocusableSelectors)).map(item => item.getAttribute("id")));
-      }
-    }
-  }, [children, submenuOpen, submenuRef]);
-  (0, _react.useEffect)(() => {
-    if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
-      focusFirstMenuItemOnOpen.current = false;
-      setSubmenuFocusId(submenuItemIds[0]);
-    }
-  }, [submenuOpen, submenuFocusId, submenuItemIds]);
-  const handleClick = event => {
-    openSubmenu();
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    const items = submenuRef?.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR);
-    if (items && characterString !== "") {
-      const submenuChildren = Array.from(items);
-      const nextItem = (0, _keyboardNavigation.characterNavigation)(characterString, submenuChildren);
-      if (nextItem) {
-        setSubmenuFocusId(nextItem.id);
-      }
-    }
-  }, [submenuRef, characterString, submenuItemIds]);
-  const handleSubmenuBlur = event => {
-    if (!event.currentTarget.contains(event.relatedTarget)) {
-      closeSubmenu();
-    }
-  };
-  if (inFullscreenView) {
-    return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
-      "data-component": "submenu-wrapper",
-      inFullscreenView: inFullscreenView,
-      asPassiveItem: asPassiveItem,
-      menuType: menuType
-    }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
-      onClick: asPassiveItem ? undefined : onClick,
-      className: className,
-      menuType: menuType,
-      ref: ref,
-      href: href,
-      menuItemVariant: variant,
-      inFullscreenView: inFullscreenView,
-      asDiv: asPassiveItem
-    }), title), /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenu, {
-      "data-component": "submenu",
-      variant: variant,
-      menuType: menuType,
-      inFullscreenView: inFullscreenView,
-      ref: setSubmenuRef,
-      applyFocusRadiusStyling: false,
-      applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem
-    }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
-      value: {
-        handleKeyDown,
-        blockIndex,
-        updateFocusId: setSubmenuFocusId
-      }
-    }, children)));
-  }
-  return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
-    "data-component": "submenu-wrapper",
-    "data-role": "submenu-wrapper",
-    onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
-    onMouseLeave: () => closeSubmenu(),
-    isSubmenuOpen: submenuOpen,
-    ref: setSubmenuRef
-  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
-    className: className,
-    menuType: menuType,
-    ref: ref,
-    icon: icon,
-    tabIndex: -1,
-    menuItemVariant: variant,
-    isOpen: submenuOpen,
-    hasSubmenu: true,
-    showDropdownArrow: showDropdownArrow,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    clickToOpen: clickToOpen,
-    href: href,
-    maxWidth: maxWidth,
-    "aria-expanded": submenuOpen,
-    "data-role": "submenu-parent-item"
-  }), title), submenuOpen && /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenu, {
-    "data-component": "submenu",
-    submenuDirection: submenuDirection,
-    variant: variant,
-    menuType: menuType,
-    role: blockIndex === 0 ? "presentation" : "list",
-    maxHeight: submenuMaxHeight,
-    applyFocusRadiusStyling: applyFocusRadius,
-    applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem,
-    submenuMaxWidth: submenuMaxWidth,
-    submenuMinWidth: submenuMinWidth,
-    onBlur: handleSubmenuBlur
-  }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
-    value: {
-      submenuFocusId,
-      handleKeyDown,
-      blockIndex,
-      updateFocusId: setSubmenuFocusId,
-      submenuHasMaxWidth: !!submenuMaxWidth
-    }
-  }, children)));
-});
-Submenu.displayName = "submenu";
-var _default = exports.default = Submenu;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../menu-item/menu-item.style.js"),r=require("./submenu.style.js"),u=require("../../../../__internal__/utils/helpers/events/events.js"),o=require("../strict-menu.context.js"),a=require("../keyboard-navigation/index.js"),l=require("./submenu.context.js"),i=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../locators.js"),c=require("../../../../hooks/__internal__/useStableCallback/useStableCallback.js"),d=require("../../../navigation-bar/__internal__/fixed-navigation-bar.context.js"),p=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function f(e){return e&&e.__esModule?e:{default:e}}function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){m(e,t,n[t])}))}return e}function y(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const v=f(t).default.forwardRef(((f,m)=>{var{children:v,className:S,title:O,icon:h,submenuDirection:g="right",onKeyDown:j,variant:w="default",showDropdownArrow:x=!0,clickToOpen:_,href:C,maxWidth:E,asPassiveItem:D,onSubmenuOpen:L,onSubmenuClose:k,onClick:A,submenuMaxWidth:P,submenuMinWidth:q}=f,T=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(f,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[K,I]=t.useState(null),R=t.useRef(i.default()),{inFullscreenView:M,openSubmenuId:F,setOpenSubmenuId:W,menuType:B}=o.useStrictMenuContext(),[N,H]=t.useState(!1),[V,$]=t.useState(null),[U,X]=t.useState([]),[z,G]=t.useState(""),[J,Q]=t.useState(!1),[Y,Z]=t.useState(!1),ee=t.useRef(!1),te=U.length,{submenuMaxHeight:ne}=t.useContext(d.default),re=c.useStableCallback(L),ue=t.useMemo((()=>{const e=null==K?void 0:K.querySelectorAll(s.BLOCK_INDEX_SELECTOR);if(e&&N&&te){const t=Array.from(e),n=null==K?void 0:K.querySelector(`[data-component='${s.SCROLLABLE_BLOCK}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${s.SCROLLABLE_BLOCK_PARENT}']`))?r+1:r}return-1}),[N,te,K]),oe=t.useRef(null),ae=t.useCallback((()=>{oe.current=setTimeout((()=>{G("")}),1500)}),[]),le=t.useCallback((()=>{oe.current&&clearTimeout(oe.current),ae()}),[ae]);t.useEffect((()=>()=>{oe.current&&clearTimeout(oe.current)}),[]);const ie=t.useCallback((()=>{H(!0),W(R.current)}),[W]),se=t.useRef();t.useEffect((()=>{N&&K&&(()=>{var e;const t=Array.from((null==K?void 0:K.querySelectorAll("ul:not([data-component='submenu'])"))||[]);if(0===t.length)return;const n=Array.from((null==K?void 0:K.querySelectorAll("[data-component='menu-item']"))||[]).pop();se.current=n;const r=t.pop(),u=Boolean((null==r||null===(e=r.parentElement)||void 0===e?void 0:e.dataset.component)===s.SCROLLABLE_BLOCK),o=Array.from((null==r?void 0:r.querySelectorAll("[data-component='menu-item']"))||[]).pop();let a=!1;o&&r&&(a=o.getBoundingClientRect().bottom<r.getBoundingClientRect().bottom);const l=!!o&&o===n;Q(l),Z(l&&!u||l&&u&&!a)})()}),[N,K,te]),t.useEffect((()=>{N&&re&&re()}),[N,re]);const ce=t.useCallback((()=>{H(!1),$(null),k&&k(),G("")}),[k]);t.useEffect((()=>{F&&F!==R.current&&ce()}),[F,ce]);const de=t.useCallback((e=>U.findIndex((t=>t===e))),[U]),pe=t.useCallback((e=>{if(N||(u.default.isEnterKey(e)||u.default.isSpaceKey(e)||u.default.isDownKey(e)||u.default.isUpKey(e))&&(e.preventDefault(),ie(),ee.current=!C),N){const t=de(V);let n=t;if(C&&!V&&(u.default.isDownKey(e)||u.default.isUpKey(e)))return e.preventDefault(),void $(U[0]);if(u.default.isDownKey(e)&&(e.preventDefault(),n<te-1&&(n+=1)),u.default.isUpKey(e)&&(e.preventDefault(),Q(!1),n>0&&(n-=1)),u.default.isEscKey(e))return null==j||j(e),void ce();u.default.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),n=0),u.default.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),n=te-1),1===e.key.length?(e.stopPropagation(),oe.current?le():ae(),G(`${z}${e.key.toLowerCase()}`)):G(""),u.default.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))))||u.default.isEnterKey(e)&&setTimeout((()=>ce()),0),n!==t&&$(U[n])}}),[U,N,C,te,V,de,ie,ce,j,z,le,ae]);return t.useEffect((()=>{if(K&&v){const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);e&&X(Array.from(e).filter((e=>e.querySelector(p.defaultFocusableSelectors))).map((e=>e.getAttribute("id"))))}}),[v,N,K]),t.useEffect((()=>{ee.current&&N&&!V&&U.length&&(ee.current=!1,$(U[0]))}),[N,V,U]),t.useEffect((()=>{const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);if(e&&""!==z){const t=Array.from(e),n=a.characterNavigation(z,t);n&&$(n.id)}}),[K,z,U]),M?e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper",inFullscreenView:M,asPassiveItem:D,menuType:B,children:[e.jsx(n.default,y(b({},T),{onClick:D?void 0:A,className:S,menuType:B,ref:m,href:C,menuItemVariant:w,inFullscreenView:M,asDiv:D,children:O})),e.jsx(r.StyledSubmenu,{"data-component":"submenu",variant:w,menuType:B,inFullscreenView:M,ref:I,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:Y,children:e.jsx(l.default.Provider,{value:{handleKeyDown:pe,blockIndex:ue,updateFocusId:$},children:v})})]}):e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:_?void 0:()=>ie(),onMouseLeave:()=>ce(),isSubmenuOpen:N,ref:I,children:[e.jsx(n.default,y(b({},T),{className:S,menuType:B,ref:m,icon:h,tabIndex:-1,menuItemVariant:w,isOpen:N,hasSubmenu:!0,showDropdownArrow:x,onKeyDown:pe,onClick:e=>{ie(),A&&A(e)},clickToOpen:_,href:C,maxWidth:E,"aria-expanded":N,"data-role":"submenu-parent-item",children:O})),N&&e.jsx(r.StyledSubmenu,{"data-component":"submenu",submenuDirection:g,variant:w,menuType:B,role:0===ue?"presentation":"list",maxHeight:ne,applyFocusRadiusStyling:J,applyFocusRadiusStylingToLastItem:Y,submenuMaxWidth:P,submenuMinWidth:q,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ce()},children:e.jsx(l.default.Provider,{value:{submenuFocusId:V,handleKeyDown:pe,blockIndex:ue,updateFocusId:$,submenuHasMaxWidth:!!P},children:v})})]})}));v.displayName="submenu",exports.default=v;

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

@@ -1,10 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SubmenuContext = /*#__PURE__*/_react.default.createContext({});
-var _default = exports.default = SubmenuContext;
+"use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")).default.createContext({});exports.default=t;

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

@@ -1,232 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSubmenuWrapper = exports.StyledSubmenu = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _scrollableBlock = _interopRequireDefault(require("../../../menu/scrollable-block/scrollable-block.style"));
-var _themes = require("../../../../style/themes");
-var _link = require("../../../link/link.style");
-var _menu = require("../../menu.style");
-var _box = _interopRequireDefault(require("../../../box/box.style"));
-var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"));
-var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
-var _menu2 = _interopRequireDefault(require("../../menu.config"));
-var _menuSegmentTitle = require("../../menu-segment-title/menu-segment-title.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledSubmenuWrapper = exports.StyledSubmenuWrapper = _styledComponents.default.div`
-  position: relative;
-  width: fit-content;
-  max-width: inherit;
-  height: inherit;
-
-  ${({
-  isSubmenuOpen,
-  theme
-}) => isSubmenuOpen && (0, _styledComponents.css)`
-      z-index: ${theme.zIndex.popover};
-    `}
-
-  ${({
-  inFullscreenView,
-  menuType,
-  asPassiveItem
-}) => (0, _styledComponents.css)`
-    ${inFullscreenView && (0, _styledComponents.css)`
-      width: 100%;
-
-      ${asPassiveItem && menuType && (0, _styledComponents.css)`
-        ${_menuItem.default} {
-          outline: none;
-          color: ${_menu2.default[menuType].title};
-        }
-      `}
-    `}
-    ${!inFullscreenView && (0, _styledComponents.css)`
-      display: flex;
-    `}
-  `}
-`;
-const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
-  ${({
-  menuType,
-  submenuDirection,
-  variant,
-  inFullscreenView,
-  maxHeight,
-  applyFocusRadiusStyling,
-  applyFocusRadiusStylingToLastItem,
-  submenuMaxWidth,
-  submenuMinWidth
-}) => (0, _styledComponents.css)`
-    ${!inFullscreenView && menuType && (0, _styledComponents.css)`
-      box-shadow: var(--boxShadow100);
-      position: absolute;
-      top: 100%;
-      background-color: ${variant === "default" ? _menu2.default[menuType].submenuItemBackground : _menu2.default[menuType].background};
-
-      min-width: ${submenuMinWidth ?? "100%"};
-
-      ${submenuMaxWidth && (0, _styledComponents.css)`
-        width: max-content;
-        max-width: ${submenuMaxWidth};
-
-        li {
-          max-width: ${submenuMaxWidth};
-        }
-
-        &&& {
-          a,
-          button,
-          ${_link.StyledLink} a,
-          ${_link.StyledLink} button {
-            white-space: normal;
-            height: auto;
-          }
-        }
-      `}
-
-      a,
-      button,
-      ${_link.StyledLink} a,
-      ${_link.StyledLink} button {
-        width: 100%;
-      }
-    `}
-
-    ${inFullscreenView && (0, _styledComponents.css)`
-      min-width: 100%;
-
-      ${_menu.StyledMenuItem} {
-        width: 100%;
-      }
-    `}
-
-    ${!inFullscreenView && (0, _styledComponents.css)`
-      border-bottom-right-radius: var(--borderRadius100);
-      border-bottom-left-radius: var(--borderRadius100);
-      overflow-y: auto;
-      ${maxHeight && `max-height: ${maxHeight};`}
-
-      ${_menu.StyledMenuItem}:last-child a,
-      ${_menu.StyledMenuItem}:last-child button,
-      ${_menu.StyledMenuItem}:last-child > span,
-      ${_menu.StyledMenuItem}:last-child > div {
-        border-bottom-left-radius: var(--borderRadius100);
-        border-bottom-right-radius: var(--borderRadius100);
-      }
-
-      & ${_menuSegmentTitle.StyledSegmentChildren} > ${_menu.StyledMenuItem}:last-of-type a,
-      ${_menuSegmentTitle.StyledSegmentChildren} > ${_menu.StyledMenuItem}:last-of-type button,
-      ${_menuSegmentTitle.StyledSegmentChildren} > ${_menu.StyledMenuItem}:last-of-type > span,
-      ${_menuSegmentTitle.StyledSegmentChildren} > ${_menu.StyledMenuItem}:last-of-type > div {
-        border-bottom-right-radius: var(--borderRadius000);
-        border-bottom-left-radius: var(--borderRadius000);
-
-        :focus {
-          border-bottom-right-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
-          border-bottom-left-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
-        }
-      }
-
-      &&&& ${_scrollableBlock.default} {
-        ${_box.default} {
-          border-bottom-right-radius: var(--borderRadius000);
-          border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
-
-          ${_menu.StyledMenuItem}:last-child ${_link.StyledLink}, ${_menu.StyledMenuItem}:last-child a,
-          ${_menu.StyledMenuItem}:last-child button {
-            border-bottom-right-radius: var(--borderRadius000);
-            border-bottom-left-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
-          }
-        }
-      }
-    `}
-
-    display: block;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    ${_menuItem.default}:after, ${_menuItem.default}:hover:after {
-      display: none;
-    }
-
-    ${_menuItem.default} {
-      display: flex;
-      align-items: center;
-      white-space: nowrap;
-
-      ${inFullscreenView && (0, _styledComponents.css)`
-        white-space: normal;
-        height: auto;
-      `}
-
-      ${submenuMaxWidth && (0, _styledComponents.css)`
-        height: auto;
-        min-height: 40px;
-      `}
-
-      ${!inFullscreenView && menuType && (0, _styledComponents.css)`
-        background-color: ${_menu2.default[menuType].submenuItemBackground};
-
-        > a:focus,
-        > button:focus {
-          background-color: ${_menu2.default[menuType].submenuItemBackground};
-        }
-
-        > a,
-        > button {
-          padding: 11px 16px 12px;
-        }
-      `}
-
-      a {
-        text-decoration: none;
-      }
-
-      > ${_icon.default} {
-        width: 16px;
-        height: 16px;
-        margin-right: 5px;
-      }
-    }
-
-    [data-component="icon"] {
-      line-height: 20px;
-
-      &: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" && (0, _styledComponents.css)`
-      right: 0;
-    `}
-  `}
-`;
-StyledSubmenuWrapper.defaultProps = {
-  theme: _themes.baseTheme
-};
+"use strict";var e=require("styled-components"),t=require("../../scrollable-block/scrollable-block.style.js");require("../../../../style/themes/sage/index.js");var r=require("../../../../style/themes/base/index.js");require("../../../../style/themes/none/index.js");var i=require("../../../link/link.style.js"),d=require("../../menu.style.js"),a=require("../../../box/box.style.js"),o=require("../../menu-item/menu-item.style.js"),s=require("../../../icon/icon.style.js"),n=require("../../menu.config.js"),u=require("../../menu-segment-title/menu-segment-title.style.js");function l(e){return e&&e.__esModule?e:{default:e}}var b=l(e);const m=b.default.div.withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"sc-b76c43ec-0"})(["position:relative;width:fit-content;max-width:inherit;height:inherit;"," ",""],(({isSubmenuOpen:t,theme:r})=>t&&e.css(["z-index:",";"],r.zIndex.popover)),(({inFullscreenView:t,menuType:r,asPassiveItem:i})=>e.css([""," ",""],t&&e.css(["width:100%;",""],i&&r&&e.css(["","{outline:none;color:",";}"],o.default,n.default[r].title)),!t&&e.css(["display:flex;"])))),c=b.default.ul.withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"sc-b76c43ec-1"})(["",""],(({menuType:r,submenuDirection:l,variant:b,inFullscreenView:m,maxHeight:c,applyFocusRadiusStyling:h,applyFocusRadiusStylingToLastItem:p,submenuMaxWidth:y,submenuMinWidth:g})=>e.css([""," "," "," display:block;list-style:none;margin:0;padding:0;",":after,",":hover:after{display:none;}","{display:flex;align-items:center;white-space:nowrap;"," "," "," a{text-decoration:none;}> ",'{width:16px;height:16px;margin-right:5px;}}[data-component="icon"]{line-height:20px;&: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%;}',""],!m&&r&&e.css(["box-shadow:var(--boxShadow100);position:absolute;top:100%;background-color:",";min-width:",";"," a,button,"," a,"," button{width:100%;}"],"default"===b?n.default[r].submenuItemBackground:n.default[r].background,null!=g?g:"100%",y&&e.css(["width:max-content;max-width:",";li{max-width:",";}&&&{a,button,"," a,"," button{white-space:normal;height:auto;}}"],y,y,i.StyledLink,i.StyledLink),i.StyledLink,i.StyledLink),m&&e.css(["min-width:100%;","{width:100%;}"],d.StyledMenuItem),!m&&e.css(["border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);overflow-y:auto;"," ",":last-child a,",":last-child button,",":last-child > span,",":last-child > div{border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);}& "," > ",":last-of-type a,"," > ",":last-of-type button,"," > ",":last-of-type > span,"," > ",":last-of-type > div{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);:focus{border-bottom-right-radius:",";border-bottom-left-radius:",";}}&&&& ","{","{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";",":last-child ",",",":last-child a,",":last-child button{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";}}}"],c&&`max-height: ${c};`,d.StyledMenuItem,d.StyledMenuItem,d.StyledMenuItem,d.StyledMenuItem,u.StyledSegmentChildren,d.StyledMenuItem,u.StyledSegmentChildren,d.StyledMenuItem,u.StyledSegmentChildren,d.StyledMenuItem,u.StyledSegmentChildren,d.StyledMenuItem,p?"var(--borderRadius100)":"var(--borderRadius000)",p?"var(--borderRadius100)":"var(--borderRadius000)",t.default,a.default,h?"var(--borderRadius100)":"var(--borderRadius000)",d.StyledMenuItem,i.StyledLink,d.StyledMenuItem,d.StyledMenuItem,p?"var(--borderRadius100)":"var(--borderRadius000)"),o.default,o.default,o.default,m&&e.css(["white-space:normal;height:auto;"]),y&&e.css(["height:auto;min-height:40px;"]),!m&&r&&e.css(["background-color:",";> a:focus,> button:focus{background-color:",";}> a,> button{padding:11px 16px 12px;}"],n.default[r].submenuItemBackground,n.default[r].submenuItemBackground),s.default,"left"===l&&e.css(["right:0;"]))));m.defaultProps={theme:r.default},exports.StyledSubmenu=c,exports.StyledSubmenuWrapper=m;

package/lib/components/menu/index.js

@@ -1,48 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Menu", {
-  enumerable: true,
-  get: function () {
-    return _menu.default;
-  }
-});
-Object.defineProperty(exports, "MenuDivider", {
-  enumerable: true,
-  get: function () {
-    return _menuDivider.default;
-  }
-});
-Object.defineProperty(exports, "MenuFullscreen", {
-  enumerable: true,
-  get: function () {
-    return _menuFullScreen.default;
-  }
-});
-Object.defineProperty(exports, "MenuItem", {
-  enumerable: true,
-  get: function () {
-    return _menuItem.default;
-  }
-});
-Object.defineProperty(exports, "MenuSegmentTitle", {
-  enumerable: true,
-  get: function () {
-    return _menuSegmentTitle.default;
-  }
-});
-Object.defineProperty(exports, "ScrollableBlock", {
-  enumerable: true,
-  get: function () {
-    return _scrollableBlock.default;
-  }
-});
-var _menu = _interopRequireDefault(require("./menu.component"));
-var _menuItem = _interopRequireDefault(require("./menu-item"));
-var _menuDivider = _interopRequireDefault(require("./menu-divider"));
-var _menuSegmentTitle = _interopRequireDefault(require("./menu-segment-title"));
-var _menuFullScreen = _interopRequireDefault(require("./menu-full-screen"));
-var _scrollableBlock = _interopRequireDefault(require("./scrollable-block"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";var e=require("./menu.component.js"),n=require("./menu-item/menu-item.component.js"),r=require("./menu-divider/menu-divider.component.js"),u=require("./menu-segment-title/menu-segment-title.component.js"),l=require("./menu-full-screen/menu-full-screen.component.js"),t=require("./scrollable-block/scrollable-block.component.js");exports.Menu=e.Menu,exports.MenuItem=n.MenuItem,exports.MenuDivider=r.default,exports.MenuSegmentTitle=u.default,exports.MenuFullscreen=l.MenuFullscreen,exports.ScrollableBlock=t.ScrollableBlock;