carbon-react 154.3.2 → 154.4.0-beta.0

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

@@ -1,340 +1 @@
-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); }
-import React, { useCallback, useEffect, useContext, useMemo, useRef, useState } from "react";
-import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
-import { StyledSubmenu, StyledSubmenuWrapper } from "./submenu.style";
-import Events from "../../../../__internal__/utils/helpers/events";
-import { useStrictMenuContext } from "../strict-menu.context";
-import { characterNavigation } from "../keyboard-navigation";
-import SubmenuContext from "./submenu.context";
-import guid from "../../../../__internal__/utils/helpers/guid";
-import { SCROLLABLE_BLOCK, SCROLLABLE_BLOCK_PARENT, BLOCK_INDEX_SELECTOR, ALL_CHILDREN_SELECTOR } from "../locators";
-import useStableCallback from "../../../../hooks/__internal__/useStableCallback/useStableCallback";
-import FixedNavigationBarContext from "../../../navigation-bar/__internal__/fixed-navigation-bar.context";
-import { defaultFocusableSelectors as focusableSelectors } from "../../../../__internal__/focus-trap/focus-trap-utils";
-const Submenu = /*#__PURE__*/React.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] = useState(null);
-  const submenuId = useRef(guid());
-  const {
-    inFullscreenView,
-    openSubmenuId,
-    setOpenSubmenuId,
-    menuType
-  } = useStrictMenuContext();
-  const [submenuOpen, setSubmenuOpen] = useState(false);
-  const [submenuFocusId, setSubmenuFocusId] = useState(null);
-  const [submenuItemIds, setSubmenuItemIds] = useState([]);
-  const [characterString, setCharacterString] = useState("");
-  const [applyFocusRadius, setApplyFocusRadius] = useState(false);
-  const [applyFocusRadiusToLastItem, setApplyFocusRadiusToLastItem] = useState(false);
-  const focusFirstMenuItemOnOpen = useRef(false);
-  const numberOfChildren = submenuItemIds.length;
-  const {
-    submenuMaxHeight
-  } = useContext(FixedNavigationBarContext);
-  const onSubmenuOpen = useStableCallback(onSubmenuOpenProp);
-  const blockIndex = useMemo(() => {
-    const items = submenuRef?.querySelectorAll(BLOCK_INDEX_SELECTOR);
-    if (items && submenuOpen && numberOfChildren) {
-      const childrenArray = Array.from(items);
-      const scrollableBlock = submenuRef?.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
-      const index = scrollableBlock ? childrenArray.indexOf(scrollableBlock) : -1;
-      return scrollableBlock?.querySelector(`[data-component='${SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
-    }
-    return -1;
-  }, [submenuOpen, numberOfChildren, submenuRef]);
-  const characterTimer = useRef(null);
-  const startCharacterTimeout = useCallback(() => {
-    characterTimer.current = setTimeout(() => {
-      setCharacterString("");
-    }, 1500);
-  }, []);
-  const restartCharacterTimeout = useCallback(() => {
-    /* istanbul ignore else */
-    if (characterTimer.current) {
-      clearTimeout(characterTimer.current);
-    }
-    startCharacterTimeout();
-  }, [startCharacterTimeout]);
-  useEffect(() => {
-    return () => {
-      if (characterTimer.current) {
-        clearTimeout(characterTimer.current);
-      }
-    };
-  }, []);
-  const openSubmenu = useCallback(() => {
-    setSubmenuOpen(true);
-    setOpenSubmenuId(submenuId.current);
-  }, [setOpenSubmenuId]);
-  const lastMenuItemElement = useRef();
-  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 === 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]);
-  useEffect(() => {
-    if (submenuOpen && onSubmenuOpen) {
-      onSubmenuOpen();
-    }
-  }, [submenuOpen, onSubmenuOpen]);
-  const closeSubmenu = useCallback(() => {
-    setSubmenuOpen(false);
-    setSubmenuFocusId(null);
-    if (onSubmenuClose) {
-      onSubmenuClose();
-    }
-    setCharacterString("");
-  }, [onSubmenuClose]);
-  useEffect(() => {
-    if (openSubmenuId && openSubmenuId !== submenuId.current) {
-      closeSubmenu();
-    }
-  }, [openSubmenuId, closeSubmenu]);
-  const findCurrentIndex = useCallback(id => {
-    const index = submenuItemIds.findIndex(itemId => itemId === id);
-    return index;
-  }, [submenuItemIds]);
-  const handleKeyDown = useCallback(event => {
-    if (!submenuOpen) {
-      if (Events.isEnterKey(event) || Events.isSpaceKey(event) || Events.isDownKey(event) || Events.isUpKey(event)) {
-        event.preventDefault();
-        openSubmenu();
-        focusFirstMenuItemOnOpen.current = !href;
-      }
-    }
-    if (submenuOpen) {
-      const index = findCurrentIndex(submenuFocusId);
-      let nextIndex = index;
-      if (href && !submenuFocusId) {
-        if (Events.isDownKey(event) || Events.isUpKey(event)) {
-          event.preventDefault();
-          setSubmenuFocusId(submenuItemIds[0]);
-          return;
-        }
-      }
-      if (Events.isDownKey(event)) {
-        event.preventDefault();
-        if (nextIndex < numberOfChildren - 1) {
-          nextIndex += 1;
-        }
-      }
-      if (Events.isUpKey(event)) {
-        event.preventDefault();
-        setApplyFocusRadius(false);
-        if (nextIndex > 0) {
-          nextIndex -= 1;
-        }
-      }
-      if (Events.isEscKey(event)) {
-        onKeyDown?.(event);
-        closeSubmenu();
-        return;
-      }
-      if (Events.isHomeKey(event)) {
-        event.preventDefault();
-        event.stopPropagation();
-        nextIndex = 0;
-      }
-      if (Events.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.composedPath(event.nativeEvent).find(p => p instanceof HTMLElement && (p.getAttribute("data-element") === "input" || p.getAttribute("data-element") === "input-icon-toggle"));
-      if (!eventIsFromInput) {
-        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(), 0);
-        }
-      }
-      if (nextIndex !== index) {
-        setSubmenuFocusId(submenuItemIds[nextIndex]);
-      }
-    }
-  }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
-  useEffect(() => {
-    /* istanbul ignore else */
-    if (submenuRef && children) {
-      const items = submenuRef?.querySelectorAll(ALL_CHILDREN_SELECTOR);
-
-      /* istanbul ignore else */
-      if (items) {
-        setSubmenuItemIds(Array.from(items).filter(item => item.querySelector(focusableSelectors)).map(item => item.getAttribute("id")));
-      }
-    }
-  }, [children, submenuOpen, submenuRef]);
-  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);
-    }
-  };
-  useEffect(() => {
-    const items = submenuRef?.querySelectorAll(ALL_CHILDREN_SELECTOR);
-    if (items && characterString !== "") {
-      const submenuChildren = Array.from(items);
-      const nextItem = 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.createElement(StyledSubmenuWrapper, {
-      "data-component": "submenu-wrapper",
-      inFullscreenView: inFullscreenView,
-      asPassiveItem: asPassiveItem,
-      menuType: menuType
-    }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
-      onClick: asPassiveItem ? undefined : onClick,
-      className: className,
-      menuType: menuType,
-      ref: ref,
-      href: href,
-      menuItemVariant: variant,
-      inFullscreenView: inFullscreenView,
-      asDiv: asPassiveItem
-    }), title), /*#__PURE__*/React.createElement(StyledSubmenu, {
-      "data-component": "submenu",
-      variant: variant,
-      menuType: menuType,
-      inFullscreenView: inFullscreenView,
-      ref: setSubmenuRef,
-      applyFocusRadiusStyling: false,
-      applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem
-    }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
-      value: {
-        handleKeyDown,
-        blockIndex,
-        updateFocusId: setSubmenuFocusId
-      }
-    }, children)));
-  }
-  return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
-    "data-component": "submenu-wrapper",
-    "data-role": "submenu-wrapper",
-    onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
-    onMouseLeave: () => closeSubmenu(),
-    isSubmenuOpen: submenuOpen,
-    ref: setSubmenuRef
-  }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _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.createElement(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.createElement(SubmenuContext.Provider, {
-    value: {
-      submenuFocusId,
-      handleKeyDown,
-      blockIndex,
-      updateFocusId: setSubmenuFocusId,
-      submenuHasMaxWidth: !!submenuMaxWidth
-    }
-  }, children)));
-});
-Submenu.displayName = "submenu";
-export default Submenu;
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import t,{useState as r,useRef as o,useContext as i,useMemo as u,useCallback as l,useEffect as a}from"react";import s from"../../menu-item/menu-item.style.js";import{StyledSubmenuWrapper as c,StyledSubmenu as m}from"./submenu.style.js";import p from"../../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as d}from"../strict-menu.context.js";import{characterNavigation as f}from"../keyboard-navigation/index.js";import y from"./submenu.context.js";import b from"../../../../__internal__/utils/helpers/guid/index.js";import{BLOCK_INDEX_SELECTOR as v,SCROLLABLE_BLOCK as h,SCROLLABLE_BLOCK_PARENT as g,ALL_CHILDREN_SELECTOR as O}from"../locators.js";import{useStableCallback as w}from"../../../../hooks/__internal__/useStableCallback/useStableCallback.js";import j from"../../../navigation-bar/__internal__/fixed-navigation-bar.context.js";import{defaultFocusableSelectors as S}from"../../../../__internal__/focus-trap/focus-trap-utils.js";function x(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function D(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){x(e,n,t[n])}))}return e}function P(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}const _=t.forwardRef(((t,x)=>{var{children:_,className:k,title:A,icon:T,submenuDirection:I="right",onKeyDown:K,variant:C="default",showDropdownArrow:F=!0,clickToOpen:M,href:E,maxWidth:W,asPassiveItem:q,onSubmenuOpen:R,onSubmenuClose:V,onClick:H,submenuMaxWidth:L,submenuMinWidth:N}=t,B=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[$,U]=r(null),z=o(b()),{inFullscreenView:G,openSubmenuId:J,setOpenSubmenuId:Q,menuType:X}=d(),[Y,Z]=r(!1),[ee,ne]=r(null),[te,re]=r([]),[oe,ie]=r(""),[ue,le]=r(!1),[ae,se]=r(!1),ce=o(!1),me=te.length,{submenuMaxHeight:pe}=i(j),de=w(R),fe=u((()=>{const e=null==$?void 0:$.querySelectorAll(v);if(e&&Y&&me){const n=Array.from(e),t=null==$?void 0:$.querySelector(`[data-component='${h}']`),r=t?n.indexOf(t):-1;return(null==t?void 0:t.querySelector(`[data-component='${g}']`))?r+1:r}return-1}),[Y,me,$]),ye=o(null),be=l((()=>{ye.current=setTimeout((()=>{ie("")}),1500)}),[]),ve=l((()=>{ye.current&&clearTimeout(ye.current),be()}),[be]);a((()=>()=>{ye.current&&clearTimeout(ye.current)}),[]);const he=l((()=>{Z(!0),Q(z.current)}),[Q]),ge=o();a((()=>{Y&&$&&(()=>{var e;const n=Array.from((null==$?void 0:$.querySelectorAll("ul:not([data-component='submenu'])"))||[]);if(0===n.length)return;const t=Array.from((null==$?void 0:$.querySelectorAll("[data-component='menu-item']"))||[]).pop();ge.current=t;const r=n.pop(),o=Boolean((null==r||null===(e=r.parentElement)||void 0===e?void 0:e.dataset.component)===h),i=Array.from((null==r?void 0:r.querySelectorAll("[data-component='menu-item']"))||[]).pop();let u=!1;i&&r&&(u=i.getBoundingClientRect().bottom<r.getBoundingClientRect().bottom);const l=!!i&&i===t;le(l),se(l&&!o||l&&o&&!u)})()}),[Y,$,me]),a((()=>{Y&&de&&de()}),[Y,de]);const Oe=l((()=>{Z(!1),ne(null),V&&V(),ie("")}),[V]);a((()=>{J&&J!==z.current&&Oe()}),[J,Oe]);const we=l((e=>te.findIndex((n=>n===e))),[te]),je=l((e=>{if(Y||(p.isEnterKey(e)||p.isSpaceKey(e)||p.isDownKey(e)||p.isUpKey(e))&&(e.preventDefault(),he(),ce.current=!E),Y){const n=we(ee);let t=n;if(E&&!ee&&(p.isDownKey(e)||p.isUpKey(e)))return e.preventDefault(),void ne(te[0]);if(p.isDownKey(e)&&(e.preventDefault(),t<me-1&&(t+=1)),p.isUpKey(e)&&(e.preventDefault(),le(!1),t>0&&(t-=1)),p.isEscKey(e))return null==K||K(e),void Oe();p.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),t=0),p.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),t=me-1),1===e.key.length?(e.stopPropagation(),ye.current?ve():be(),ie(`${oe}${e.key.toLowerCase()}`)):ie(""),p.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))))||p.isEnterKey(e)&&setTimeout((()=>Oe()),0),t!==n&&ne(te[t])}}),[te,Y,E,me,ee,we,he,Oe,K,oe,ve,be]);return a((()=>{if($&&_){const e=null==$?void 0:$.querySelectorAll(O);e&&re(Array.from(e).filter((e=>e.querySelector(S))).map((e=>e.getAttribute("id"))))}}),[_,Y,$]),a((()=>{ce.current&&Y&&!ee&&te.length&&(ce.current=!1,ne(te[0]))}),[Y,ee,te]),a((()=>{const e=null==$?void 0:$.querySelectorAll(O);if(e&&""!==oe){const n=Array.from(e),t=f(oe,n);t&&ne(t.id)}}),[$,oe,te]),e(c,G?{"data-component":"submenu-wrapper",inFullscreenView:G,asPassiveItem:q,menuType:X,children:[n(s,P(D({},B),{onClick:q?void 0:H,className:k,menuType:X,ref:x,href:E,menuItemVariant:C,inFullscreenView:G,asDiv:q,children:A})),n(m,{"data-component":"submenu",variant:C,menuType:X,inFullscreenView:G,ref:U,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:ae,children:n(y.Provider,{value:{handleKeyDown:je,blockIndex:fe,updateFocusId:ne},children:_})})]}:{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:M?void 0:()=>he(),onMouseLeave:()=>Oe(),isSubmenuOpen:Y,ref:U,children:[n(s,P(D({},B),{className:k,menuType:X,ref:x,icon:T,tabIndex:-1,menuItemVariant:C,isOpen:Y,hasSubmenu:!0,showDropdownArrow:F,onKeyDown:je,onClick:e=>{he(),H&&H(e)},clickToOpen:M,href:E,maxWidth:W,"aria-expanded":Y,"data-role":"submenu-parent-item",children:A})),Y&&n(m,{"data-component":"submenu",submenuDirection:I,variant:C,menuType:X,role:0===fe?"presentation":"list",maxHeight:pe,applyFocusRadiusStyling:ue,applyFocusRadiusStylingToLastItem:ae,submenuMaxWidth:L,submenuMinWidth:N,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||Oe()},children:n(y.Provider,{value:{submenuFocusId:ee,handleKeyDown:je,blockIndex:fe,updateFocusId:ne,submenuHasMaxWidth:!!L},children:_})})]})}));_.displayName="submenu";export{_ as default};

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

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

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

@@ -1,224 +1 @@
-import styled, { css } from "styled-components";
-import StyledScrollableBlock from "../../../menu/scrollable-block/scrollable-block.style";
-import { baseTheme } from "../../../../style/themes";
-import { StyledLink } from "../../../link/link.style";
-import { StyledMenuItem } from "../../menu.style";
-import StyledBox from "../../../box/box.style";
-import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
-import StyledIcon from "../../../icon/icon.style";
-import menuConfigVariants from "../../menu.config";
-import { StyledSegmentChildren } from "../../menu-segment-title/menu-segment-title.style";
-const StyledSubmenuWrapper = styled.div`
-  position: relative;
-  width: fit-content;
-  max-width: inherit;
-  height: inherit;
-
-  ${({
-  isSubmenuOpen,
-  theme
-}) => isSubmenuOpen && css`
-      z-index: ${theme.zIndex.popover};
-    `}
-
-  ${({
-  inFullscreenView,
-  menuType,
-  asPassiveItem
-}) => css`
-    ${inFullscreenView && css`
-      width: 100%;
-
-      ${asPassiveItem && menuType && css`
-        ${StyledMenuItemWrapper} {
-          outline: none;
-          color: ${menuConfigVariants[menuType].title};
-        }
-      `}
-    `}
-    ${!inFullscreenView && css`
-      display: flex;
-    `}
-  `}
-`;
-const StyledSubmenu = styled.ul`
-  ${({
-  menuType,
-  submenuDirection,
-  variant,
-  inFullscreenView,
-  maxHeight,
-  applyFocusRadiusStyling,
-  applyFocusRadiusStylingToLastItem,
-  submenuMaxWidth,
-  submenuMinWidth
-}) => css`
-    ${!inFullscreenView && menuType && css`
-      box-shadow: var(--boxShadow100);
-      position: absolute;
-      top: 100%;
-      background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].background};
-
-      min-width: ${submenuMinWidth ?? "100%"};
-
-      ${submenuMaxWidth && css`
-        width: max-content;
-        max-width: ${submenuMaxWidth};
-
-        li {
-          max-width: ${submenuMaxWidth};
-        }
-
-        &&& {
-          a,
-          button,
-          ${StyledLink} a,
-          ${StyledLink} button {
-            white-space: normal;
-            height: auto;
-          }
-        }
-      `}
-
-      a,
-      button,
-      ${StyledLink} a,
-      ${StyledLink} button {
-        width: 100%;
-      }
-    `}
-
-    ${inFullscreenView && css`
-      min-width: 100%;
-
-      ${StyledMenuItem} {
-        width: 100%;
-      }
-    `}
-
-    ${!inFullscreenView && css`
-      border-bottom-right-radius: var(--borderRadius100);
-      border-bottom-left-radius: var(--borderRadius100);
-      overflow-y: auto;
-      ${maxHeight && `max-height: ${maxHeight};`}
-
-      ${StyledMenuItem}:last-child a,
-      ${StyledMenuItem}:last-child button,
-      ${StyledMenuItem}:last-child > span,
-      ${StyledMenuItem}:last-child > div {
-        border-bottom-left-radius: var(--borderRadius100);
-        border-bottom-right-radius: var(--borderRadius100);
-      }
-
-      & ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type a,
-      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type button,
-      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type > span,
-      ${StyledSegmentChildren} > ${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)"};
-        }
-      }
-
-      &&&& ${StyledScrollableBlock} {
-        ${StyledBox} {
-          border-bottom-right-radius: var(--borderRadius000);
-          border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
-
-          ${StyledMenuItem}:last-child ${StyledLink}, ${StyledMenuItem}:last-child a,
-          ${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;
-
-    ${StyledMenuItemWrapper}:after, ${StyledMenuItemWrapper}:hover:after {
-      display: none;
-    }
-
-    ${StyledMenuItemWrapper} {
-      display: flex;
-      align-items: center;
-      white-space: nowrap;
-
-      ${inFullscreenView && css`
-        white-space: normal;
-        height: auto;
-      `}
-
-      ${submenuMaxWidth && css`
-        height: auto;
-        min-height: 40px;
-      `}
-
-      ${!inFullscreenView && menuType && css`
-        background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-
-        > a:focus,
-        > button:focus {
-          background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-        }
-
-        > a,
-        > button {
-          padding: 11px 16px 12px;
-        }
-      `}
-
-      a {
-        text-decoration: none;
-      }
-
-      > ${StyledIcon} {
-        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" && css`
-      right: 0;
-    `}
-  `}
-`;
-StyledSubmenuWrapper.defaultProps = {
-  theme: baseTheme
-};
-export { StyledSubmenu, StyledSubmenuWrapper };
+import t,{css as e}from"styled-components";import o from"../../scrollable-block/scrollable-block.style.js";import"../../../../style/themes/sage/index.js";import r from"../../../../style/themes/base/index.js";import"../../../../style/themes/none/index.js";import{StyledLink as i}from"../../../link/link.style.js";import{StyledMenuItem as a}from"../../menu.style.js";import s from"../../../box/box.style.js";import d from"../../menu-item/menu-item.style.js";import n from"../../../icon/icon.style.js";import u from"../../menu.config.js";import{StyledSegmentChildren as l}from"../../menu-segment-title/menu-segment-title.style.js";const m=t.div.withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"sc-b76c43ec-0"})(["position:relative;width:fit-content;max-width:inherit;height:inherit;"," ",""],(({isSubmenuOpen:t,theme:o})=>t&&e(["z-index:",";"],o.zIndex.popover)),(({inFullscreenView:t,menuType:o,asPassiveItem:r})=>e([""," ",""],t&&e(["width:100%;",""],r&&o&&e(["","{outline:none;color:",";}"],d,u[o].title)),!t&&e(["display:flex;"])))),b=t.ul.withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"sc-b76c43ec-1"})(["",""],(({menuType:t,submenuDirection:r,variant:m,inFullscreenView:b,maxHeight:h,applyFocusRadiusStyling:p,applyFocusRadiusStylingToLastItem:c,submenuMaxWidth:g,submenuMinWidth:f})=>e([""," "," "," 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%;}',""],!b&&t&&e(["box-shadow:var(--boxShadow100);position:absolute;top:100%;background-color:",";min-width:",";"," a,button,"," a,"," button{width:100%;}"],"default"===m?u[t].submenuItemBackground:u[t].background,null!=f?f:"100%",g&&e(["width:max-content;max-width:",";li{max-width:",";}&&&{a,button,"," a,"," button{white-space:normal;height:auto;}}"],g,g,i,i),i,i),b&&e(["min-width:100%;","{width:100%;}"],a),!b&&e(["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:",";}}}"],h&&`max-height: ${h};`,a,a,a,a,l,a,l,a,l,a,l,a,c?"var(--borderRadius100)":"var(--borderRadius000)",c?"var(--borderRadius100)":"var(--borderRadius000)",o,s,p?"var(--borderRadius100)":"var(--borderRadius000)",a,i,a,a,c?"var(--borderRadius100)":"var(--borderRadius000)"),d,d,d,b&&e(["white-space:normal;height:auto;"]),g&&e(["height:auto;min-height:40px;"]),!b&&t&&e(["background-color:",";> a:focus,> button:focus{background-color:",";}> a,> button{padding:11px 16px 12px;}"],u[t].submenuItemBackground,u[t].submenuItemBackground),n,"left"===r&&e(["right:0;"]))));m.defaultProps={theme:r};export{b as StyledSubmenu,m as StyledSubmenuWrapper};

package/esm/components/menu/index.js

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

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

@@ -1 +1 @@
-export { default } from "./menu-divider.component";
+export{default}from"./menu-divider.component.js";

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

@@ -1,24 +1 @@
-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); }
-import React from "react";
-import StyledDivider from "./menu-divider.style";
-import { useStrictMenuContext } from "../__internal__/strict-menu.context";
-import { StyledMenuItem } from "../menu.style";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-const MenuDivider = /*#__PURE__*/React.forwardRef(({
-  size = "default",
-  ...rest
-}, ref) => {
-  const {
-    menuType
-  } = useStrictMenuContext();
-  return /*#__PURE__*/React.createElement(StyledMenuItem, {
-    inSubmenu: true
-  }, /*#__PURE__*/React.createElement(StyledDivider, _extends({
-    size: size
-  }, tagComponent("menu-divider", rest), {
-    menuType: menuType,
-    ref: ref
-  })));
-});
-MenuDivider.displayName = "MenuDivider";
-export default MenuDivider;
+import{jsx as e}from"react/jsx-runtime";import r from"react";import t from"./menu-divider.style.js";import{useStrictMenuContext as n}from"../__internal__/strict-menu.context.js";import{StyledMenuItem as o}from"../menu.style.js";import i from"../../../__internal__/utils/helpers/tags/tags.js";function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){c(e,r,t[r])}))}return e}const f=r.forwardRef(((r,c)=>{var{size:f="default"}=r,l=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(r,["size"]);const{menuType:s}=n();return e(o,{inSubmenu:!0,children:e(t,(p=u({size:f},i("menu-divider",l)),a={menuType:s,ref:c},a=null!=a?a:{},Object.getOwnPropertyDescriptors?Object.defineProperties(p,Object.getOwnPropertyDescriptors(a)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(a)).forEach((function(e){Object.defineProperty(p,e,Object.getOwnPropertyDescriptor(a,e))})),p))});var p,a}));f.displayName="MenuDivider";export{f as default};

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

@@ -1,14 +1 @@
-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;
+import e,{css as i}from"styled-components";import o from"../menu.config.js";const r=e.div.withConfig({displayName:"menu-divider.style__StyledDivider",componentId:"sc-ce8f3542-0"})(["cursor:default;",""],(({menuType:e,size:r})=>i(["margin:0px ",";height:",";background-color:",";"],"large"===r?"":"16px","large"===r?"4px":"1px",o[e].divider)));export{r as default};

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

@@ -1 +1 @@
-export { default } from "./menu-full-screen.component";
+export{MenuFullscreen as default}from"./menu-full-screen.component.js";