carbon-react 162.10.0 → 162.11.0

package/lib/components/menu/__internal__/submenu/submenu.component.d.ts

@@ -6,22 +6,14 @@ export interface SubmenuProps {
     children: React.ReactNode;
     /** Custom className */
     className?: 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?: string;
     /** Defines which direction the submenu will hang eg. left/right */
     submenuDirection?: string;
     /** A title for the menu item that has a submenu. */
     title?: React.ReactNode;
     /** onKeyDown handler */
     onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
-    /** set the colour variant for a menuType */
+    /** Set the variant of the Submenu  */
     variant?: VariantType;
-    /** Flag to display the dropdown arrow when an item has a submenu */
-    showDropdownArrow?: boolean;
     /** When set the submenu opens by click instead of hover */
     clickToOpen?: boolean;
     /** The href to use for the menu item. */
@@ -36,12 +28,12 @@ export interface SubmenuProps {
     onSubmenuClose?: () => void;
     /** Callback triggered when the top-level menu item is clicked */
     onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
-    /** Accessible label for when no text children are passed to menu item */
-    ariaLabel?: string;
     /** Sets the max-width of the submenu container element */
     submenuMaxWidth?: string;
     /** Sets the min-width of the submenu container element */
     submenuMinWidth?: string;
+    /** Is the menu item the currently selected item. */
+    selected?: boolean;
 }
 declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Submenu;

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

@@ -1 +1 @@
-"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"),a=require("../strict-menu.context.js"),l=require("../keyboard-navigation/index.js"),o=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"),m=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function f(e){return e&&e.__esModule?e:{default:e}}function p(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){p(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 S=f(t).default.forwardRef(((f,p)=>{var{children:S,className:v,title:h,icon:O,submenuDirection:g="right",onKeyDown:j,variant:w="default",showDropdownArrow:x=!0,clickToOpen:_,href:C,maxWidth:E,asPassiveItem:A,onSubmenuOpen:D,onSubmenuClose:L,onClick:k,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={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[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}=a.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=U.length,{submenuMaxHeight:te}=t.useContext(d.default),ne=c.default(D),re=t.useMemo((()=>{const e=null==K?void 0:K.querySelectorAll(s.BLOCK_INDEX_SELECTOR);if(e&&N&&ee){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,ee,K]),ue=t.useRef(null),ae=t.useCallback((()=>{ue.current=setTimeout((()=>{G("")}),1500)}),[]),le=t.useCallback((()=>{ue.current&&clearTimeout(ue.current),ae()}),[ae]);t.useEffect((()=>()=>{ue.current&&clearTimeout(ue.current)}),[]);const oe=t.useCallback((()=>{H(!0),W(R.current)}),[W]),ie=t.useRef();t.useEffect((()=>{N&&K&&(()=>{var e;if(!K)return;const t=Array.from(K.querySelectorAll("[data-component='menu-item']")||[]),n=t.length>0?t[t.length-1]:null;ie.current=null!=n?n:void 0,K.querySelectorAll("[data-last-visible-menu-item]").forEach((e=>e.removeAttribute("data-last-visible-menu-item"))),n&&n.setAttribute("data-last-visible-menu-item","true");const r=Array.from(K.querySelectorAll("ul:not([data-component='submenu'])")||[]);if(0===r.length)return Q(!1),void Z(!1);const u=r[r.length-1],a=(null==u||null===(e=u.parentElement)||void 0===e?void 0:e.dataset.component)===s.SCROLLABLE_BLOCK,l=Array.from(u.querySelectorAll("[data-component='menu-item']")||[]),o=l.length>0?l[l.length-1]:null;let i=!1;o&&u&&(i=o.getBoundingClientRect().bottom<u.getBoundingClientRect().bottom);const c=!!o&&!!n&&o===n;Q(c),Z(c&&!a||c&&a&&!i)})()}),[N,K,ee]),t.useEffect((()=>{N&&ne&&ne()}),[N,ne]);const se=t.useCallback((()=>{H(!1),$(null),L&&L(),G("")}),[L]);t.useEffect((()=>{F&&F!==R.current&&se()}),[F,se]);const ce=t.useCallback((e=>U.findIndex((t=>t===e))),[U]),de=t.useCallback((e=>{const t=u.default.isEnterKey(e)||u.default.isSpaceKey(e);if(!t&&!u.default.isDownKey(e)||N||(e.preventDefault(),oe()),N){const n=ce(V);let r=n;if(V||((t&&!C||u.default.isSpaceKey(e)&&C)&&(e.preventDefault(),se()),u.default.isShiftKey(e)&&u.default.isTabKey(e)&&se()),u.default.isDownKey(e)&&(e.preventDefault(),r<ee-1&&(r+=1)),u.default.isUpKey(e)&&(e.preventDefault(),Q(!1),r>0&&(r-=1)),u.default.isEscKey(e))return null==j||j(e),void se();u.default.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),u.default.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ee-1),1===e.key.length?(e.stopPropagation(),ue.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((()=>se()),0),r!==n&&$(U[r])}}),[U,N,C,ee,V,ce,oe,se,j,z,le,ae]);return t.useEffect((()=>{if(K&&S){const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);e&&X(Array.from(e).filter((e=>e.querySelector(m.defaultFocusableSelectors))).map((e=>e.getAttribute("id"))))}}),[S,N,K]),t.useEffect((()=>{const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);if(e&&""!==z){const t=Array.from(e),n=l.characterNavigation(z,t);n&&$(n.id)}}),[K,z,U]),M?e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper",inFullscreenView:M,asPassiveItem:A,menuType:B,children:[e.jsx(n.default,y(b({},T),{onClick:A?void 0:k,className:v,menuType:B,ref:p,href:C,menuItemVariant:w,inFullscreenView:M,asDiv:A,children:h})),e.jsx(r.StyledSubmenu,{"data-component":"submenu",variant:w,menuType:B,inFullscreenView:M,ref:I,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:Y,children:e.jsx(o.default.Provider,{value:{handleKeyDown:de,blockIndex:re,updateFocusId:$},children:S})})]}):e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:_?void 0:()=>oe(),onMouseLeave:()=>se(),isSubmenuOpen:N,ref:I,children:[e.jsx(n.default,y(b({},T),{className:v,menuType:B,ref:p,icon:O,tabIndex:-1,menuItemVariant:w,isOpen:N,hasSubmenu:!0,showDropdownArrow:x,onKeyDown:de,onClick:e=>{oe(),k&&k(e)},clickToOpen:_,href:C,maxWidth:E,"aria-expanded":N,"data-role":"submenu-parent-item",children:h})),N&&e.jsx(r.StyledSubmenu,{"data-component":"submenu",submenuDirection:g,variant:w,menuType:B,role:0===re?"presentation":"list",maxHeight:te,applyFocusRadiusStyling:J,applyFocusRadiusStylingToLastItem:Y,submenuMaxWidth:P,submenuMinWidth:q,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||se()},children:e.jsx(o.default.Provider,{value:{submenuFocusId:V,handleKeyDown:de,blockIndex:re,updateFocusId:$,submenuHasMaxWidth:!!P,closeSubmenu:se},children:S})})]})}));S.displayName="submenu",exports.default=S;
+"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"),a=require("../strict-menu.context.js"),l=require("../keyboard-navigation/index.js"),i=require("./submenu.context.js"),s=require("../../../../__internal__/utils/helpers/guid/index.js"),o=require("../locators.js"),c=require("../../../../hooks/__internal__/useStableCallback/useStableCallback.js"),d=require("../../../navigation-bar/__internal__/fixed-navigation-bar.context.js"),m=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function f(e){return e&&e.__esModule?e:{default:e}}function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(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){b(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 S=f(t).default.forwardRef(((f,b)=>{var{children:S,className:h,title:O,submenuDirection:v="right",onKeyDown:j,variant:g="default",clickToOpen:x,href:_,maxWidth:w,asPassiveItem:E,onSubmenuOpen:C,onSubmenuClose:D,onClick:$,submenuMaxWidth:k,submenuMinWidth:P,selected:L}=f,q=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(f,["children","className","title","submenuDirection","onKeyDown","variant","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth","selected"]);const[K,I]=t.useState(null),A=t.useRef(s.default()),{inFullscreenView:M,openSubmenuId:T,setOpenSubmenuId:W,menuVariant:R}=a.useStrictMenuContext(),[V,N]=t.useState(!1),[F,B]=t.useState(null),[H,U]=t.useState([]),[X,z]=t.useState(""),G=H.length,{submenuMaxHeight:J}=t.useContext(d.default),Q=c.default(C),Y=t.useMemo((()=>{const e=null==K?void 0:K.querySelectorAll(o.BLOCK_INDEX_SELECTOR);if(e&&V&&G){const t=Array.from(e),n=null==K?void 0:K.querySelector(`[data-component='${o.SCROLLABLE_BLOCK}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${o.SCROLLABLE_BLOCK_PARENT}']`))?r+1:r}return-1}),[V,G,K]),Z=t.useRef(null),ee=t.useCallback((()=>{Z.current=setTimeout((()=>{z("")}),1500)}),[]),te=t.useCallback((()=>{Z.current&&clearTimeout(Z.current),ee()}),[ee]);t.useEffect((()=>()=>{Z.current&&clearTimeout(Z.current)}),[]);const ne=t.useCallback((()=>{N(!0),W(A.current)}),[W]);t.useEffect((()=>{V&&Q&&Q()}),[V,Q]);const re=t.useCallback((()=>{N(!1),B(null),D&&D(),z("")}),[D]);t.useEffect((()=>{T&&T!==A.current&&re()}),[T,re]);const ue=t.useCallback((e=>H.findIndex((t=>t===e))),[H]),ae=t.useCallback((e=>{const t=u.default.isEnterKey(e)||u.default.isSpaceKey(e);if(!t&&!u.default.isDownKey(e)||V||(e.preventDefault(),ne()),V){const n=ue(F);let r=n;if(F||((t&&!_||u.default.isSpaceKey(e)&&_)&&(e.preventDefault(),re()),u.default.isShiftKey(e)&&u.default.isTabKey(e)&&re()),u.default.isDownKey(e)&&(e.preventDefault(),r<G-1&&(r+=1)),u.default.isUpKey(e)&&(e.preventDefault(),r>0&&(r-=1)),u.default.isEscKey(e))return null==j||j(e),void re();u.default.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),u.default.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=G-1);const a=u.default.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))));1!==e.key.length||a?z(""):(e.stopPropagation(),Z.current?te():ee(),z(`${X}${e.key.toLowerCase()}`)),a||u.default.isEnterKey(e)&&setTimeout((()=>re()),0),r!==n&&B(H[r])}}),[H,V,_,G,F,ue,ne,re,j,X,te,ee]);return t.useEffect((()=>{if(K&&S){const e=null==K?void 0:K.querySelectorAll(o.ALL_CHILDREN_SELECTOR);e&&U(Array.from(e).filter((e=>e.querySelector(m.defaultFocusableSelectors))).map((e=>e.getAttribute("id"))))}}),[S,V,K]),t.useEffect((()=>{const e=null==K?void 0:K.querySelectorAll(o.ALL_CHILDREN_SELECTOR);if(e&&""!==X){const t=Array.from(e),n=l.characterNavigation(X,t);n&&B(n.id)}}),[K,X,H]),t.useLayoutEffect((()=>{const e=null==K?void 0:K.querySelectorAll('[data-element="menu-item-wrapper"]');null==e||e.forEach(((t,n)=>{n===e.length-1?t.setAttribute("data-last-menu-item","true"):t.removeAttribute("data-last-menu-item")}))}),[K,V,G]),M?e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper",$inFullscreenView:M,children:[e.jsx(n.StyledMenuItemWrapper,y(p({},q),{as:$&&!_?"button":"a",onClick:E?void 0:$,className:h,$menuVariant:R,ref:b,href:_,$menuItemVariant:g,$inFullscreenView:M,$asDiv:E,$hasSubmenu:!0,$selected:L,children:O})),e.jsx(r.StyledSubmenu,{"data-component":"submenu",$menuVariant:R,$inFullscreenView:M,ref:I,children:e.jsx(i.default.Provider,{value:{handleKeyDown:ae,blockIndex:Y,updateFocusId:B},children:S})})]}):e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:x?void 0:()=>ne(),onMouseLeave:()=>re(),ref:I,children:[e.jsx(n.StyledMenuItemWrapper,y(p({},q),{as:_?"a":"button",className:h,$menuVariant:R,ref:b,$menuItemVariant:g,$isOpen:V,$hasSubmenu:!0,onKeyDown:ae,onClick:e=>{ne(),$&&$(e)},href:_,$maxWidth:w,$selected:L,"aria-expanded":V,"data-element":"submenu-parent-item","data-role":"submenu-parent-item",children:O})),V&&e.jsx(r.StyledSubmenu,{"data-component":"submenu","data-role":"submenu",$submenuDirection:v,$menuVariant:R,role:0===Y?"presentation":"list",$maxHeight:J,$submenuMaxWidth:k,$submenuMinWidth:P,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||re()},children:e.jsx(i.default.Provider,{value:{submenuFocusId:F,handleKeyDown:ae,blockIndex:Y,updateFocusId:B,submenuMaxWidth:k,closeSubmenu:re},children:S})})]})}));S.displayName="submenu",exports.default=S;

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

@@ -4,7 +4,7 @@ export interface SubmenuContextProps {
     updateFocusId?: (id: string) => void;
     handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     blockIndex?: number;
-    submenuHasMaxWidth?: boolean;
+    submenuMaxWidth?: string;
     closeSubmenu?: () => void;
 }
 declare const SubmenuContext: React.Context<SubmenuContextProps>;

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

@@ -1,21 +1,18 @@
-import { SubmenuProps } from "./submenu.component";
-import type { MenuType } from "../../menu.types";
-interface SharedStyleProps {
-    inFullscreenView?: boolean;
-    menuType?: MenuType;
+interface StyledSubmenuWrapperProps {
+    $inFullscreenView?: boolean;
 }
-interface StyledSubmenuWrapperProps extends SharedStyleProps {
-    isSubmenuOpen?: boolean;
-    asPassiveItem?: boolean;
-}
-interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth" | "submenuMinWidth"> {
-    submenuDirection?: string;
-    maxHeight?: string;
-    applyFocusRadiusStyling: boolean;
-    applyFocusRadiusStylingToLastItem: boolean;
-}
-declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, {
     theme: object;
 } & StyledSubmenuWrapperProps, "theme">;
-declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;
-export { StyledSubmenu, StyledSubmenuWrapper };
+interface StyledSubmenuProps {
+    $submenuDirection?: string;
+    $maxHeight?: string;
+    $inFullscreenView?: boolean;
+    $menuVariant: "white" | "black";
+    $submenuMaxWidth?: string;
+    $submenuMinWidth?: string;
+}
+export declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, {
+    theme: object;
+} & StyledSubmenuProps, "theme">;
+export {};

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

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("../../scrollable-block/scrollable-block.style.js"),r=require("../../../../style/themes/apply-base-theme.js"),i=require("../../../link/link.style.js"),a=require("../../menu.style.js"),o=require("../../menu-item/menu-item.style.js"),d=require("../../../icon/icon.style.js"),s=require("../../menu.config.js"),u=require("../../menu-segment-title/menu-segment-title.style.js");function n(e){return e&&e.__esModule?e:{default:e}}var l=n(e);const b=l.default.div.attrs(r.default).withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"carbon_v162_9_1__sc-5ce62130-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,s.default[r].title)),!t&&e.css(["display:flex;"])))),m=l.default.ul.withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"carbon_v162_9_1__sc-5ce62130-1"})(["",""],(({menuType:r,submenuDirection:n,variant:l,inFullscreenView:b,maxHeight:m,applyFocusRadiusStyling:c,applyFocusRadiusStylingToLastItem:h,submenuMaxWidth:p,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%;}',""],!b&&r&&e.css(["box-shadow:var(--boxShadow100);position:absolute;top:100%;background-color:",";min-width:",";"," a,button,"," a,"," button{width:100%;}"],"default"===l?s.default[r].submenuItemBackground:s.default[r].background,null!=g?g:"100%",p&&e.css(["width:max-content;max-width:",";li{max-width:",";}&&&{a,button,"," a,"," button{white-space:normal;height:auto;}}"],p,p,i.StyledLink,i.StyledLink),i.StyledLink,i.StyledLink),b&&e.css(["min-width:100%;","{width:100%;}"],a.StyledMenuItem),!b&&e.css(["border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);overflow-y:auto;"," & "," > ",":last-of-type:not([data-last-visible-menu-item='true']){a,button,> span,> div{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);:focus{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);}}}[data-last-visible-menu-item=\"true\"]{a,button,> span,> div{border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);:focus{border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);}}}&&&& ",'{[data-element="scrollable-block-list"]{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:",";}}}"],m&&`max-height: ${m};`,u.StyledSegmentChildren,a.StyledMenuItem,t.default,c?"var(--borderRadius100)":"var(--borderRadius000)",a.StyledMenuItem,i.StyledLink,a.StyledMenuItem,a.StyledMenuItem,h?"var(--borderRadius100)":"var(--borderRadius000)"),o.default,o.default,o.default,b&&e.css(["white-space:normal;height:auto;"]),p&&e.css(["height:auto;min-height:40px;"]),!b&&r&&e.css(["background-color:",";> a:focus,> button:focus{background-color:",";}> a,> button{padding:11px 16px 12px;}"],s.default[r].submenuItemBackground,s.default[r].submenuItemBackground),d.default,"left"===n&&e.css(["right:0;"]))));exports.StyledSubmenu=m,exports.StyledSubmenuWrapper=b;
+"use strict";var e=require("styled-components"),t=require("../../../../style/themes/apply-base-theme.js"),i=require("../../menu.config.js");function r(e){return e&&e.__esModule?e:{default:e}}var a=r(e);const s=a.default.div.attrs(t.default).withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"carbon_v162_10_0__sc-92487cd8-0"})(["position:relative;width:fit-content;max-width:inherit;height:inherit;",""],(({$inFullscreenView:t})=>e.css([""," ",""],t&&e.css(["width:100%;"]),!t&&e.css(["display:flex;"])))),n=a.default.ul.attrs(t.default).withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"carbon_v162_10_0__sc-92487cd8-1"})(["",""],(({$menuVariant:t,$submenuDirection:r,$inFullscreenView:a,$maxHeight:s,$submenuMaxWidth:n,$submenuMinWidth:o,theme:d})=>e.css(["display:block;list-style:none;margin:0;padding:0;background-color:",";"," ",""],i.default[t].submenuItemBackground,!a&&e.css(["position:absolute;top:100%;z-index:",";box-shadow:var(--global-depth-lvl1);width:max-content;min-width:100%;box-sizing:border-box;border-radius:var(--global-radius-none) var(--global-radius-none) var(--global-radius-container-m) var(--global-radius-container-m);overflow-y:auto;"," "," "," "," "," [data-last-menu-item='true']{border-bottom-left-radius:var(--global-radius-container-m);border-bottom-right-radius:var(--global-radius-container-m);}"],d.zIndex.popover,"white"===t&&e.css(["margin-top:-1px;border:var(--global-borderwidth-xs) solid var(--nav-tertiary-border-default);"]),n&&e.css(["max-width:",";"],n),o&&e.css(["min-width:",";"],o),"left"===r&&e.css(["right:0;"]),s&&`max-height: ${s};`),a&&e.css(["min-width:100%;"]))));exports.StyledSubmenu=n,exports.StyledSubmenuWrapper=s;

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

@@ -1,5 +1,5 @@
 export { default as Menu } from "./menu.component";
-export type { MenuProps } from "./menu.types";
+export type { MenuProps } from "./menu.component";
 export { default as MenuItem } from "./menu-item";
 export type { MenuWithIcon, MenuWithChildren, MenuItemHandle, } from "./menu-item";
 export { default as MenuDivider } from "./menu-divider";

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./menu-divider.style.js"),n=require("../__internal__/strict-menu.context.js"),u=require("../menu.style.js"),i=require("../../../__internal__/utils/helpers/tags/tags.js");function o(e){return e&&e.__esModule?e:{default:e}}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 l(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 s=o(r).default.forwardRef(((r,o)=>{var{size:c="default"}=r,s=function(e,r){if(null==e)return{};var t,n,u=function(e,r){if(null==e)return{};var t,n,u={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(u[t]=e[t]);return u}(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)&&(u[t]=e[t])}return u}(r,["size"]);const{menuType:a}=n.useStrictMenuContext();return e.jsx(u.StyledMenuItem,{inSubmenu:!0,"aria-hidden":"true","data-role":"divider-container",children:e.jsx(t.default,(f=l({size:c},i.default("menu-divider",s)),p={menuType:a,ref:o},p=null!=p?p:{},Object.getOwnPropertyDescriptors?Object.defineProperties(f,Object.getOwnPropertyDescriptors(p)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(p)).forEach((function(e){Object.defineProperty(f,e,Object.getOwnPropertyDescriptor(p,e))})),f))});var f,p}));s.displayName="MenuDivider",exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./menu-divider.style.js"),n=require("../__internal__/strict-menu.context.js"),i=require("../menu-item/menu-item.style.js"),u=require("../../../__internal__/utils/helpers/tags/tags.js");function o(e){return e&&e.__esModule?e:{default:e}}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 l(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 s=o(r).default.forwardRef(((r,o)=>{var{size:c="default"}=r,s=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},u=Object.keys(e);for(n=0;n<u.length;n++)t=u[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)t=u[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(r,["size"]);const{menuVariant:a,inFullscreenView:f}=n.useStrictMenuContext();return e.jsx(i.StyledMenuItem,{$inSubmenu:!0,$removeHeight:!0,"aria-hidden":"true","data-role":"divider-container",children:e.jsx(t.default,(b=l({$size:c},u.default("menu-divider",s)),O={$menuVariant:a,$inFullscreenView:f,ref:o},O=null!=O?O:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(O)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(O)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(O,e))})),b))});var b,O}));s.displayName="MenuDivider",exports.default=s;

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

@@ -1,6 +1,8 @@
 import { MenuDividerProps } from "./menu-divider.component";
-import type { MenuType } from "../menu.types";
-declare const StyledDivider: import("styled-components").StyledComponent<"div", any, MenuDividerProps & {
-    menuType: MenuType;
-}, never>;
+interface StyledDividerProps {
+    $menuVariant: "white" | "black";
+    $size: MenuDividerProps["size"];
+    $inFullscreenView?: boolean;
+}
+declare const StyledDivider: import("styled-components").StyledComponent<"div", any, StyledDividerProps, never>;
 export default StyledDivider;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../menu.config.js");function t(e){return e&&e.__esModule?e:{default:e}}const d=t(e).default.div.withConfig({displayName:"menu-divider.style__StyledDivider",componentId:"carbon_v162_9_1__sc-ce8f3542-0"})(["cursor:default;",""],(({menuType:t,size:d})=>e.css(["margin:0px ",";height:",";background-color:",";"],"large"===d?"":"16px","large"===d?"4px":"1px",r.default[t].divider)));exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),a=require("../menu.config.js");function r(e){return e&&e.__esModule?e:{default:e}}const l=r(e).default.div.withConfig({displayName:"menu-divider.style__StyledDivider",componentId:"carbon_v162_10_0__sc-b48c8639-0"})(["",""],(({$menuVariant:r,$size:l,$inFullscreenView:o})=>e.css(["background-color:",";margin:var(--global-space-none) var(--global-space-comp-l);height:1px;"," ",""],a.default[r].divider,o&&e.css(["margin:var(--global-space-comp-s) var(--global-space-comp-l);"]),"large"===l&&e.css(["margin:var(--global-space-none);height:4px;"]))));exports.default=l;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),n=require("react-transition-group"),t=require("./menu-full-screen.style.js"),l=require("../menu.style.js"),o=require("../__internal__/strict-menu.context.js"),i=require("../../../__internal__/utils/helpers/events/events.js"),a=require("../../box/box.component.js"),u=require("../../icon-button/icon-button.component.js"),s=require("../../icon/icon.component.js");require("../../icon/icon.style.js");var c=require("../../portal/portal.js"),d=require("../../../__internal__/focus-trap/focus-trap.component.js"),p=require("../menu-divider/menu-divider.component.js"),m=require("../../../__internal__/dom/globals.js"),f=require("../../../hooks/__internal__/useLocale/useLocale.js"),j=require("../../../hooks/__internal__/useModalAria/useModalAria.js"),_=require("../../../hooks/__internal__/useModalManager/useModalManager.js");function x(e){return e&&e.__esModule?e:{default:e}}var b=x(r);function y(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function h(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){y(e,r,n[r])}))}return e}const v=({"aria-label":c="Fullscreen menu","data-element":x,"data-role":y,children:h,isOpen:v=!1,onClose:M,startPosition:q="left",topModalOverride:g})=>{var O;const S=r.useRef(null),P=r.useRef(null),w=r.useRef(null),k=j.default(P),{menuType:C}=o.useStrictMenuContext(),F=["dark","black"].includes(C),T=f.default(),R=b.default.Children.toArray(h),A=b.default.Children.toArray(R.map(((r,n)=>n<R.length-1?e.jsxs(e.Fragment,{children:[r,e.jsx(p.default,{"data-role":"divider"})]}):r))),E=r.useCallback((e=>{M&&i.default.isEscKey(e)&&(e.stopImmediatePropagation(),M(e))}),[M]);return _.default({open:v,closeModal:E,modalRef:S,topModalOverride:g,focusCallToActionElement:null===(O=m.getDocument())||void 0===O?void 0:O.activeElement}),e.jsx(n.CSSTransition,{nodeRef:S,in:v,timeout:200,unmountOnExit:!0,children:e.jsx(t.StyledMenuFullscreen,{ref:S,startPosition:q,transitionDuration:200,children:e.jsx(d.default,{wrapperRef:P,isOpen:v,children:e.jsxs(t.StyledMenuModal,{"aria-label":c,"aria-modal":!!k||void 0,"data-component":"menu-fullscreen","data-element":x,"data-role":y,menuType:C,ref:P,role:"dialog",tabIndex:-1,children:[e.jsx(t.StyledMenuFullscreenHeader,{menuType:C,children:e.jsx(u.default,{"aria-label":T.menuFullscreen.ariaLabels.closeButton(),onClick:M,"data-element":"close",children:e.jsx(s.default,{type:"close",inverse:F})})}),e.jsx(a.Box,{overflowY:"auto",width:"100%",height:"calc(100% - 40px)",children:e.jsx(l.StyledMenuWrapper,{"data-component":"menu",menuType:C,ref:w,display:"flex",flexDirection:"column",role:"list",inFullscreenView:!0,children:e.jsx(o.StrictMenuProvider,{value:{inFullscreenView:!0,menuType:C,openSubmenuId:null,setOpenSubmenuId:()=>{}},children:A})})})]})})})})},M=r=>e.jsx("li",{children:e.jsx(c.Portal,{children:e.jsx(v,h({},r))})});exports.MenuFullscreen=M,exports.default=M;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),r=require("react-transition-group"),t=require("./menu-full-screen.style.js"),l=require("../menu.style.js"),a=require("../__internal__/strict-menu.context.js"),o=require("../../../__internal__/utils/helpers/events/events.js"),i=require("../../button/__next__/button.component.js"),u=require("../../icon/icon.component.js");require("../../icon/icon.style.js");var s=require("../../portal/portal.js"),c=require("../../../__internal__/focus-trap/focus-trap.component.js"),d=require("../menu-divider/menu-divider.component.js"),m=require("../../../__internal__/dom/globals.js"),f=require("../../../hooks/__internal__/useLocale/useLocale.js"),p=require("../../../hooks/__internal__/useModalAria/useModalAria.js"),j=require("../../../hooks/__internal__/useModalManager/useModalManager.js");function _(e){return e&&e.__esModule?e:{default:e}}var b=_(n);function x(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function v(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(n){x(e,n,r[n])}))}return e}const h=({"aria-label":s="Fullscreen menu","data-element":_,"data-role":x,children:v,isOpen:h=!1,onClose:y,startPosition:M="left",topModalOverride:q})=>{var O;const g=n.useRef(null),S=n.useRef(null),P=n.useRef(null),C=p.default(S),{menuVariant:F}=a.useStrictMenuContext(),k=f.default(),w=b.default.Children.toArray(v),R=b.default.Children.toArray(w.map(((n,r)=>r<w.length-1?e.jsxs(e.Fragment,{children:[n,e.jsx(d.default,{"data-role":"divider"})]}):n))),V=n.useCallback((e=>{y&&o.default.isEscKey(e)&&(e.stopImmediatePropagation(),y(e))}),[y]);return j.default({open:h,closeModal:V,modalRef:g,topModalOverride:q,focusCallToActionElement:null===(O=m.getDocument())||void 0===O?void 0:O.activeElement}),e.jsx(r.CSSTransition,{nodeRef:g,in:h,timeout:200,unmountOnExit:!0,children:e.jsx(t.StyledMenuFullscreen,{ref:g,$startPosition:M,$transitionDuration:200,children:e.jsx(c.default,{wrapperRef:S,isOpen:h,children:e.jsxs(t.StyledMenuModal,{"aria-label":s,"aria-modal":!!C||void 0,"data-component":"menu-fullscreen","data-element":_,"data-role":x,$menuVariant:F,ref:S,role:"dialog",tabIndex:-1,children:[e.jsx(t.StyledMenuFullscreenHeader,{$menuVariant:F,children:e.jsx(i.Button,{variantType:"subtle",size:"small",inverse:Boolean("black"===F),"aria-label":k.menuFullscreen.ariaLabels.closeButton(),onClick:e=>y(e),"data-element":"close",children:e.jsx(u.default,{type:"close"})})}),e.jsx(t.StyledMenuFullscreenContent,{children:e.jsx(l.StyledMenuWrapper,{"data-component":"menu",ref:P,role:"list",$inFullscreenView:!0,children:e.jsx(a.StrictMenuProvider,{value:{inFullscreenView:!0,menuVariant:F,openSubmenuId:null,setOpenSubmenuId:()=>{}},children:R})})})]})})})})},y=n=>e.jsx("li",{children:e.jsx(s.Portal,{children:e.jsx(h,v({},n))})});exports.MenuFullscreen=y,exports.default=y;

package/lib/components/menu/menu-full-screen/menu-full-screen.style.d.ts

@@ -1,16 +1,16 @@
-import type { MenuType } from "../menu.types";
-declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, {
+interface StyledMenuFullscreenProps {
+    $transitionDuration: number;
+    $startPosition: "left" | "right";
+}
+export declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, {
     theme: object;
-} & {
-    transitionDuration: number;
-    startPosition: "left" | "right";
-}, "theme">;
-declare const StyledMenuModal: import("styled-components").StyledComponent<"div", any, {
+} & StyledMenuFullscreenProps, "theme">;
+interface StyledMenuModalProps {
+    $menuVariant: "white" | "black";
+}
+export declare const StyledMenuModal: import("styled-components").StyledComponent<"div", any, {
     theme: object;
-} & {
-    menuType: MenuType;
-}, "theme">;
-declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, {
-    menuType: MenuType;
-}, never>;
-export { StyledMenuModal, StyledMenuFullscreen, StyledMenuFullscreenHeader };
+} & StyledMenuModalProps, "theme">;
+export declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, StyledMenuModalProps, never>;
+export declare const StyledMenuFullscreenContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

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

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("../../../style/themes/apply-base-theme.js"),i=require("../../icon-button/icon-button.style.js"),l=require("../../box/box.style.js"),r=require("../../search/__internal__/legacy/search.style.js"),s=require("../../icon/icon.style.js"),o=require("../../button/button.style.js"),n=require("../menu.config.js"),a=require("../../../style/utils/add-focus-styling.js"),d=require("../../link/link.style.js");function u(e){return e&&e.__esModule?e:{default:e}}var c=u(e);const b=c.default.div.attrs(t.default).withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreen",componentId:"carbon_v162_9_1__sc-f9ae5d65-0"})(["position:fixed;top:0;bottom:0;"," ",""],(({theme:t})=>e.css(["z-index:",";"],t.zIndex.fullScreenModal)),(({startPosition:t,transitionDuration:i})=>e.css(["&.enter{visibility:hidden;",":-100%;}&.enter-active{visibility:visible;",":0;transition:all ","ms ease;}&.exit{visibility:visible;",":0;}&.exit-active{visibility:hidden;",":-100%;transition:all ","ms ease;}"],t,t,i,t,t,i))),f=c.default.div.attrs(t.default).withConfig({displayName:"menu-full-screen.style__StyledMenuModal",componentId:"carbon_v162_9_1__sc-f9ae5d65-1"})(["height:100vh;width:100vw;outline:none;&&{","{max-width:100vw;}"," > a,"," > button,> div{font-size:var(--fontSizes200);}}",""],d.StyledLink,d.StyledLink,d.StyledLink,(({menuType:t})=>e.css(["background-color:",";&&&{","{","{display:inline-flex;bottom:auto;}","{display:flex;line-height:normal;padding-bottom:0;&:focus{border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);","}}}}","{scrollbar-color:",";&::-webkit-scrollbar{width:var(--sizing150);}&::-webkit-scrollbar-thumb{background-color:",";}&::-webkit-scrollbar-track{background-color:",";}}"],n.default[t].background,r.default,s.default,o.default,a.default(),l.default,n.default[t].scrollbarColor,n.default[t].scrollbarThumb,n.default[t].scrollbarTrack))),y=c.default.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenHeader",componentId:"carbon_v162_9_1__sc-f9ae5d65-2"})(["height:40px;","{position:absolute;z-index:1;right:16px;top:8px;}",""],i.default,(({menuType:t})=>e.css(["background-color:",";"],n.default[t].submenuItemBackground)));exports.StyledMenuFullscreen=b,exports.StyledMenuFullscreenHeader=y,exports.StyledMenuModal=f;
+"use strict";var e=require("styled-components"),t=require("../../../style/themes/apply-base-theme.js"),l=require("../menu.config.js");function n(e){return e&&e.__esModule?e:{default:e}}var i=n(e);const a=i.default.div.attrs(t.default).withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreen",componentId:"carbon_v162_10_0__sc-9603f910-0"})(["",""],(({$startPosition:t,$transitionDuration:l,theme:n})=>e.css(["position:fixed;top:0;bottom:0;z-index:",";&.enter{visibility:hidden;",":-100%;}&.enter-active{visibility:visible;",":0;transition:all ","ms ease;}&.exit{visibility:visible;",":0;}&.exit-active{visibility:hidden;",":-100%;transition:all ","ms ease;}"],n.zIndex.fullScreenModal,t,t,l,t,t,l))),s=i.default.div.attrs(t.default).withConfig({displayName:"menu-full-screen.style__StyledMenuModal",componentId:"carbon_v162_10_0__sc-9603f910-1"})(["",""],(({$menuVariant:t})=>e.css(["height:100vh;width:100vw;outline:none;background-color:",";"],l.default[t].background))),o=i.default.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenHeader",componentId:"carbon_v162_10_0__sc-9603f910-2"})(["",""],(({$menuVariant:t})=>e.css(["height:var(--global-size-m);display:flex;justify-content:flex-end;align-items:center;padding:var(--global-space-none) var(--global-space-comp-l);margin-bottom:var(--global-space-comp-s);background-color:",";"],l.default[t].fullScreenHeader))),r=i.default.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenContent",componentId:"carbon_v162_10_0__sc-9603f910-3"})(["overflow-y:auto;width:100%;height:calc(100% - var(--global-size-m) - var(--global-space-comp-s));"]);exports.StyledMenuFullscreen=a,exports.StyledMenuFullscreenContent=r,exports.StyledMenuFullscreenHeader=o,exports.StyledMenuModal=s;

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

@@ -21,7 +21,7 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
     target?: string;
     /** The rel attribute to be used for the underlying <a> tag */
     rel?: string;
-    /** set the colour variant for a menuType */
+    /** Set the variant of the MenuItem  */
     variant?: VariantType;
     /** Flag to display the dropdown arrow when an item has a submenu */
     showDropdownArrow?: boolean;
@@ -33,12 +33,6 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
     onSubmenuOpen?: () => void;
     /** Callback triggered when submenu closes. Only valid with submenu prop */
     onSubmenuClose?: () => void;
-    /**
-      @ignore @private
-      private prop, used inside ScrollableBlock to ensure the MenuItem's color variant overrides the CSS
-      for other MenuItems inside the block
-     */
-    overrideColor?: boolean;
     /** When set the submenu opens by click instead of hover */
     clickToOpen?: boolean;
     /**
@@ -47,7 +41,7 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
      * */
     maxWidth?: MaxWidthProps["maxWidth"];
     /**
-     * @private @ignore
+     * @private @ignore @internal
      * Renders MenuItem as a div element
      * */
     as?: "div";
@@ -67,11 +61,17 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
 }
 export interface MenuWithChildren extends MenuItemBaseProps {
     children?: React.ReactNode;
-    /** Either prop `icon` must be defined or this node must have children. */
+    /**
+     * @deprecated Please pass any desired icons as children instead.
+     * Either prop `icon` must be defined or this node must have children.
+     */
     icon?: IconType;
 }
 export interface MenuWithIcon extends MenuItemBaseProps {
-    /** Either prop `icon` must be defined or this node must have children. */
+    /**
+     * @deprecated Please pass any desired icons as children instead.
+     * Either prop `icon` must be defined or this node must have children.
+     */
     icon: IconType;
     children?: React.ReactNode;
 }

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),i=require("./menu-item.style.js"),o=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),a=require("../__internal__/submenu/submenu.component.js"),s=require("../__internal__/submenu/submenu.context.js"),c=require("../menu-segment-title/menu-segment-title.context.js"),d=require("../menu.style.js"),m=require("../../../__internal__/utils/helpers/guid/index.js");function f(e){return e&&e.__esModule?e:{default:e}}var b=f(t),p=f(n);function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(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){h(e,t,n[t])}))}return e}function v(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 O=t.forwardRef(((n,f)=>{var{submenu:h,submenuMaxWidth:O,submenuMinWidth:g,children:j,href:w,onClick:x,target:_,submenuDirection:S="right",icon:C,selected:I,onKeyDown:P,variant:q="default",showDropdownArrow:D=!0,ariaLabel:M,ariaCurrent:k,clickToOpen:W,maxWidth:F,onSubmenuOpen:E,onSubmenuClose:L,overrideColor:T,rel:V,as:K,"data-element":A,"data-role":H}=n,R=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","ariaCurrent","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);p.default(C||j,"Either prop `icon` must be defined or this node must have `children`."),p.default(j||M||h||"string"==typeof h&&h.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),p.default("boolean"==typeof h||void 0===h||b.default.isValidElement(h)||j&&"string"==typeof h&&h.length,"You should not pass `children` when `submenu` is an empty string");const N=t.useRef(m.default()),{isChildOfSegment:Y,overriddenVariant:z}=t.useContext(c.MenuSegmentContext),{inFullscreenView:B,registerItem:G,unregisterItem:J,focusId:Q,updateFocusId:U,menuType:X}=l.useStrictMenuContext(),Z=t.useContext(s.default),$=Object.keys(Z).length>0,{submenuFocusId:ee,updateFocusId:te,handleKeyDown:ne,submenuHasMaxWidth:re,closeSubmenu:ue}=Z,ie=Q===N.current,oe=ee?ee===N.current:void 0,[le,ae]=t.useState(null),[se,ce]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==le?void 0:le.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==se&&ce(t)}),[se,le]),t.useEffect((()=>{const e=N.current;return G&&G(e),()=>{J&&J(e)}}),[G,J]),t.useEffect((()=>{if(ie&&!oe||oe){if(se)return void se.focus();null==le||le.focus()}}),[se,ie,oe,le]),t.useImperativeHandle(f,(()=>({focus(){null==le||le.focus()}})),[le]);const de=e=>{$?(e.stopPropagation(),null==te||te(N.current)):null==U||U(N.current)},me={className:w||x?"carbon-menu-item--has-link":"",href:se?void 0:w,onClick:se||!w&&!x?void 0:e=>{null==x||x(e),null==ue||ue()},target:_,rel:V,icon:C,removeAriaLabelOnIcon:!0,selected:I,onKeyDown:B?void 0:e=>{null==P||P(e),o.default.isEscKey(e)&&(null==le||le.focus()),null==ne||ne(e)},overrideColor:T,ref:ae};"alternate"===z&&Y&&"alternate"===q&&["white","black"].includes(X)&&(me.overrideColor=!0);const fe=e=>F&&"string"==typeof e?e:void 0,be=B?void 0:F,pe=!(x||w||se);if(h)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":A,"data-role":H,menuType:X,title:fe(h),maxWidth:be},R),{inFullscreenView:B,id:N.current,as:K,onFocus:de,children:e.jsx(a.default,v(y(v(y(v(y({},"boolean"!=typeof h&&{title:h}),{submenuDirection:S,showDropdownArrow:D,clickToOpen:W,maxWidth:F,asPassiveItem:pe,ariaLabel:M,onSubmenuOpen:E,onSubmenuClose:L,submenuMaxWidth:O,submenuMinWidth:g}),me),{variant:q}),R),{children:j}))}));const he=u.default(R),ye=!!(null==le?void 0:le.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":A,"data-role":H,menuType:X,inSubmenu:$,title:fe(j),maxWidth:be},R),{inFullscreenView:B&&!Object.keys(Z).length,id:N.current,as:K,onFocus:de,children:e.jsx(i.default,v(y(v(y({menuType:X,"data-role":"menu-item-wrapper"},me),{menuItemVariant:q,ariaLabel:M,"aria-current":k,maxWidth:re?void 0:be,inFullscreenView:B,asPassiveItem:pe}),he),{asDiv:ye||"div"===K,hasFocusableChild:!!se,hasInput:ye,inSubmenu:$,children:j}))}))}));exports.MenuItem=O,exports.default=O;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),i=require("./menu-item.style.js"),o=require("../../../__internal__/utils/helpers/events/events.js"),a=require("../__internal__/strict-menu.context.js"),l=require("../__internal__/submenu/submenu.component.js"),s=require("../__internal__/submenu/submenu.context.js"),c=require("../../../__internal__/utils/helpers/guid/index.js"),d=require("../../icon/icon.component.js");require("../../icon/icon.style.js");var m=require("../__internal__/menu-item-variant.context.js");function f(e){return e&&e.__esModule?e:{default:e}}var p=f(t),b=f(n);function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(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){h(e,t,n[t])}))}return e}function j(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=t.forwardRef(((n,f)=>{var{submenu:h,submenuMaxWidth:v,submenuMinWidth:x,children:O,href:g,onClick:_,target:w,submenuDirection:S="right",icon:I,selected:M,onKeyDown:P,variant:W="default",showDropdownArrow:q=!0,ariaLabel:$,ariaCurrent:D,clickToOpen:C,maxWidth:k,onSubmenuOpen:F,onSubmenuClose:E,rel:V,as:K,"data-element":L,"data-role":T}=n,A=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","ariaCurrent","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","rel","as","data-element","data-role"]);b.default(I||O,"Either prop `icon` must be defined or this node must have `children`."),b.default(O||$||h||"string"==typeof h&&h.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),b.default("boolean"==typeof h||void 0===h||p.default.isValidElement(h)||O&&"string"==typeof h&&h.length,"You should not pass `children` when `submenu` is an empty string");const R=t.useRef(c.default()),{inFullscreenView:H,registerItem:N,unregisterItem:Y,focusId:z,updateFocusId:B,menuVariant:G}=a.useStrictMenuContext(),J=t.useContext(s.default),Q=Object.keys(J).length>0,{submenuFocusId:U,updateFocusId:X,handleKeyDown:Z,submenuMaxWidth:ee,closeSubmenu:te}=J,{menuItemVariant:ne}=t.useContext(m.default),re=z===R.current,ue=U?U===R.current:void 0,[ie,oe]=t.useState(null),[ae,le]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==ie?void 0:ie.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==ae&&le(t)}),[ae,ie]),t.useEffect((()=>{const e=R.current;return N&&N(e),()=>{Y&&Y(e)}}),[N,Y]),t.useEffect((()=>{if(re&&!ue||ue){if(ae)return void ae.focus();null==ie||ie.focus()}}),[ae,re,ue,ie]),t.useImperativeHandle(f,(()=>({focus(){null==ie||ie.focus()}})),[ie]);const se=e=>{Q?(e.stopPropagation(),null==X||X(R.current)):null==B||B(R.current)},ce={className:g||_?"carbon-menu-item--has-link":"",href:ae?void 0:g,onClick:ae||!g&&!_?void 0:e=>{null==_||_(e),null==te||te()},target:w,rel:V,onKeyDown:H?void 0:e=>{null==P||P(e),o.default.isEscKey(e)&&(null==ie||ie.focus()),null==Z||Z(e)},ref:oe},de=e=>k&&"string"==typeof e?e:void 0,me=H?void 0:k,fe=!(_||g||ae);if(h){const t=e.jsxs(e.Fragment,{children:[e.jsxs(i.StyledMenuItemContent,{$hasMaxWidth:!!me,children:[I&&e.jsx(d.default,{type:I}),h]}),q&&!H&&e.jsx(d.default,{ml:"4px",type:"dropdown"})]});return e.jsx(i.StyledMenuItem,j(y({"data-component":"menu-item","data-element":L,"data-role":T,title:de(h),$maxWidth:me},A),{$inFullscreenView:H,id:R.current,as:K,onFocus:se,children:e.jsx(l.default,j(y(j(y({title:t,submenuDirection:S,clickToOpen:C,maxWidth:k,asPassiveItem:fe,"aria-label":$,onSubmenuOpen:F,onSubmenuClose:E,submenuMaxWidth:v,submenuMinWidth:x,selected:M},ce),{variant:W}),A),{children:O}))}))}const pe=u.default(A),be=!!(null==ie?void 0:ie.querySelector("[data-element='input']"));return e.jsx(i.StyledMenuItem,j(y({"data-component":"menu-item","data-element":L,"data-role":T,$inSubmenu:Q,title:de(O),$maxWidth:me},A),{$inFullscreenView:H,id:R.current,as:K,onFocus:se,children:e.jsx(i.StyledMenuItemWrapper,j(y(j(y({as:_&&!g?"button":"a",$menuVariant:G,"data-element":"menu-item-wrapper","data-role":"menu-item-wrapper"},ce),{$menuItemVariant:ne||W,"aria-label":$,"aria-current":D,$maxWidth:me,$submenuMaxWidth:ee,$inFullscreenView:H,$asPassiveItem:fe}),pe),{$asDiv:be||"div"===K,$inSubmenu:Q,$selected:M,children:e.jsxs(i.StyledMenuItemContent,{$hasMaxWidth:!!me,children:[I&&e.jsx(d.default,{type:I}),O]})}))}))}));exports.MenuItem=v,exports.default=v;

package/lib/components/menu/menu-item/menu-item.style.d.ts

@@ -1,24 +1,33 @@
-import { PaddingProps } from "styled-system";
-import { MenuWithChildren } from "./menu-item.component";
-import type { MenuType } from "../menu.types";
-interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth" | "ariaCurrent">, PaddingProps {
-    menuType: MenuType;
-    selected?: boolean;
-    hasSubmenu?: boolean;
-    isOpen?: boolean;
-    inFullscreenView?: boolean;
-    asPassiveItem?: boolean;
-    icon?: string;
-    ariaLabel?: string;
-    asDiv?: boolean;
-    hasFocusableChild?: boolean;
-    hasInput?: boolean;
-    menuItemVariant?: Pick<MenuWithChildren, "variant">["variant"];
-    inSubmenu?: boolean;
+import { MaxWidthProps } from "styled-system";
+import { MenuVariantType } from "../menu.component";
+import { VariantType } from "./menu-item.component";
+export interface StyledMenuItemProps {
+    $maxWidth?: MaxWidthProps["maxWidth"];
+    $inFullscreenView?: boolean;
+    $inSubmenu?: boolean;
+    $removeHeight?: boolean;
 }
-declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"a", any, {
+export declare const StyledMenuItem: import("styled-components").StyledComponent<"li", any, {
     theme: object;
-} & {
-    as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-} & StyledMenuItemWrapperProps, "theme" | "as">;
+} & StyledMenuItemProps, "theme">;
+export interface StyledMenuItemWrapperProps {
+    $menuVariant: MenuVariantType;
+    $selected?: boolean;
+    $hasSubmenu?: boolean;
+    $isOpen?: boolean;
+    $inFullscreenView?: boolean;
+    $asPassiveItem?: boolean;
+    $asDiv?: boolean;
+    $menuItemVariant?: VariantType;
+    $inSubmenu?: boolean;
+    $submenuMaxWidth?: string;
+    $maxWidth?: MaxWidthProps["maxWidth"];
+}
+export declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"a", any, {
+    theme: object;
+} & StyledMenuItemWrapperProps, "theme">;
+interface StyledMenuItemContentProps {
+    $hasMaxWidth?: boolean;
+}
+export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"span", any, StyledMenuItemContentProps, never>;
 export default StyledMenuItemWrapper;

package/lib/components/menu/menu-item/menu-item.style.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),n=require("styled-system"),t=require("../menu.config.js"),e=require("../../link/link.component.js"),a=require("../../button/button.style.js"),r=require("../../icon-button/icon-button.style.js"),c=require("../../icon/icon.style.js"),i=require("../../link/link.style.js"),s=require("../../../style/themes/apply-base-theme.js"),u=require("../../../style/utils/add-focus-styling.js");function d(o){return o&&o.__esModule?o:{default:o}}const l=o=>{var n,t;const{paddingRight:e}=o,a=null===(t=String(e))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===e||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(e){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:e};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:e};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:e};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:e};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:e};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:e};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:e};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:e};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},p=d(o).default.a.attrs(s.default).attrs({as:e.Link}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"carbon_v162_9_1__sc-3770d50b-0"})([""," &&&{> a,> button{","}}"],(({menuType:e,selected:s,hasSubmenu:d,isOpen:p,menuItemVariant:g,showDropdownArrow:b,href:h,clickToOpen:f,maxWidth:m,inFullscreenView:v,overrideColor:x,asPassiveItem:k,asDiv:y,hasFocusableChild:S,hasInput:w,inSubmenu:C})=>o.css(["display:flex;align-items:center;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;font-size:14px;font-weight:500;&:not(.legacy-search-button) > ","{margin-right:var(--spacing050);}}&& a:focus,&& button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],c.default,u.default(!0),i.StyledContent,!x&&o.css(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],t.default[e].background),x&&!v&&o.css(["&&&&{background-color:",";}"],"alternate"===g?t.default[e].alternate:t.default[e].submenuItemBackground),!v&&o.css(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],C?"":"justify-content: center;",t.default[e].background,t.default[e].color,m&&o.css(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),a.default,!y&&!k&&o.css(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&o.css(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!v&&o.css(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.legacy-search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],a.default,i.StyledContent,a.default),r.default,t.default[e].color),!S&&!v&&o.css(["",""],d||m?o.css(["& > a,& > button{padding:11px 16px ",";}"],d&&m?"12px":"10px"):o.css(["& > a,& > button{padding:11px 16px;}"])),i.StyledLink,i.StyledLink,v&&o.css(["height:auto;white-space:normal;","{top:-2px;}"],c.default),i.StyledLink,i.StyledLink,i.StyledLink,!w&&`color: ${t.default[e].color};`,!v&&o.css(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c.default,c.default),s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],t.default[e].selected,t.default[e].selected),"alternate"===g&&!v&&o.css(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],t.default[e].alternate,t.default[e].alternate,!w&&o.css(["&&& a:hover,&&& button:hover{background-color:",";}"],t.default[e].alternateHover)),p&&o.css(["a,button{background-color:",";color:",";}"],t.default[e].submenuItemBackground,t.default[e].color),d&&o.css(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],t.default[e].submenuBackground,t.default[e].submenuBackground,t.default[e].color,t.default[e].color,f&&p&&o.css(["background-color:",";"],t.default[e].submenuOpenedBackground),t.default[e].submenuOpenedBackground,!(h||f)&&o.css(["cursor:default;background-color:",";color:",";"],t.default[e].submenuItemBackground,t.default[e].color),t.default[e].color,s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],t.default[e].submenuSelected,t.default[e].submenuSelected),b&&o.css(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],r.default,(o=>l(n.padding(o)).padding),(o=>l(n.padding(o)).iconSpacing))),v&&o.css([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&o.css(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],t.default[e].title,t.default[e].title),!k&&o.css(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!w&&o.css(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),n.padding);exports.default=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../menu.config.js"),a=require("../../../style/themes/apply-base-theme.js"),s=require("../../../style/utils/add-focus-styling.js");function r(e){return e&&e.__esModule?e:{default:e}}var l=r(e);const n=l.default.li.attrs(a.default).withConfig({displayName:"menu-item.style__StyledMenuItem",componentId:"carbon_v162_10_0__sc-338885db-0"})(["display:flex;list-style:none;align-items:stretch;min-height:var(--global-size-m);"," "," ",""],t.layout,t.flexbox,(({$inSubmenu:t,$removeHeight:o,$inFullscreenView:a,$maxWidth:s})=>e.css([""," "," ",""],t&&e.css(["display:list-item;",""],a&&e.css(["width:100%;"])),o&&e.css(["min-height:0;"]),s&&e.css(["max-width:",";"],s)))),i=e.css(['padding:0;.popover-open-component{[data-component="button"]{background-color:inherit;color:inherit;border-radius:inherit;border:none;padding:var(--global-space-comp-xs) var(--global-space-comp-l);&:focus{','}}[data-popover-container-button="true"]{background-color:var(--colorsActionMajor500);&:focus{background-color:var(--colorsActionMajor500);}}}'],s.default(!0)),c=l.default.a.attrs(a.default).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"carbon_v162_10_0__sc-338885db-1"})(["",""],(({$menuVariant:a,$selected:r,$hasSubmenu:l,$isOpen:n,$menuItemVariant:c,$maxWidth:d,$inFullscreenView:u,$asPassiveItem:m,$asDiv:p,$inSubmenu:b,$submenuMaxWidth:g,theme:f})=>e.css(["position:relative;display:flex;align-items:center;box-sizing:border-box;min-height:var(--global-size-m);text-decoration:none;text-align:left;font:var(--global-font-static-comp-medium-m);padding:var(--global-space-comp-xs) var(--global-space-comp-l);background-color:",";color:",";border:none;"," "," "," "," "," "," &:has([data-component='popover-container']){","}"],o.default[a].background,o.default[a].color,t.padding,d&&e.css(["max-width:",";"],d),u&&e.css(["width:100%;font:var(--global-font-static-comp-medium-l);",""],l&&e.css(["color:",";"],o.default[a].title)),!m&&!p&&e.css(["&:hover{cursor:pointer;background-color:",";color:",";}&:focus{","}&:active{background-color:",";color:",";}"],o.default[a].backgroundHover,o.default[a].colorHover,s.default(!0),o.default[a].backgroundActive,o.default[a].colorActive),r&&e.css(['&::before{content:"";position:absolute;width:var(--global-size-xs);height:var(--global-size-6-xs);background-color:var(--nav-primary-bg-selected);'," ","}"],!u&&e.css(["bottom:0px;left:50%;transform:translate(-50%,0%);width:var(--global-size-xs);height:var(--global-size-6-xs);"]),u&&e.css(["left:0px;top:50%;transform:translate(0%,-50%);height:var(--global-size-xs);width:var(--global-size-6-xs);"])),!u&&e.css([""," ",""],l&&n&&e.css(["z-index:calc("," + 1);background-color:",";",""],f.zIndex.popover,o.default[a].submenuOpenedBackground,"white"===a&&e.css(["box-shadow:inset 1px 0 0 var(--nav-tertiary-border-default),inset -1px 0 0 var(--nav-tertiary-border-default);"])),b&&e.css(["width:100%;background-color:",";"," ",""],o.default[a].submenuItemBackground,"alternate"===c&&e.css(["background-color:",";"],o.default[a].alternate),g&&e.css(["max-width:",";"],g))),i))),d=l.default.span.withConfig({displayName:"menu-item.style__StyledMenuItemContent",componentId:"carbon_v162_10_0__sc-338885db-2"})(["",""],(({$hasMaxWidth:t})=>e.css(["display:flex;align-items:center;gap:var(--global-space-comp-s);width:100%;"," .search{width:100%;}"],t&&e.css(["display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:middle;"]))));exports.StyledMenuItem=n,exports.StyledMenuItemContent=d,exports.StyledMenuItemWrapper=c,exports.default=c;

package/lib/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 import { VariantType } from "../menu-item";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-declare const AS_VALUES: readonly ["h2", "h3", "h4", "h5", "h6"];
-type AllowedAsValues = (typeof AS_VALUES)[number];
+type AllowedAsValues = "h2" | "h3" | "h4" | "h5" | "h6";
 export interface MenuTitleProps extends TagProps {
+    /** MenuItem children to be rendered within the segment */
     children?: React.ReactNode;
+    /** The text content for the segment title */
     text: string;
-    /** Set the colour variant for a menuType */
+    /** Set the variant of the MenuSegmentTitle  */
     variant?: VariantType;
     /** Set the heading level for the segment title */
     as?: AllowedAsValues;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./menu-segment-title.style.js"),n=require("../__internal__/strict-menu.context.js"),u=require("../menu.style.js"),i=require("../../../__internal__/utils/helpers/tags/tags.js"),l=require("../__internal__/submenu/submenu.context.js"),s=require("./menu-segment-title.context.js");function o(e){return e&&e.__esModule?e:{default:e}}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}function f(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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const p=["h2","h3","h4","h5","h6"],d=o(t).default.forwardRef(((o,a)=>{var{children:d,variant:m="default",text:b,as:y="h2",segmentWrapperProps:O}=o,j=function(e,t){if(null==e)return{};var r,n,u=function(e,t){if(null==e)return{};var r,n,u={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(u[r]=e[r]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(u[r]=e[r])}return u}(o,["children","variant","text","as","segmentWrapperProps"]);const{menuType:g,inFullscreenView:h}=n.useStrictMenuContext(),{submenuHasMaxWidth:v}=t.useContext(l.default),x=!!h,P=t.useMemo((()=>x&&"alternate"===m&&["white","black"].includes(g)?"default":m),[x,g,m]);return e.jsxs(u.StyledMenuItem,{inSubmenu:!0,children:[e.jsx(r.StyledTitle,f(c({as:p.includes(y)?y:"h2"},i.default("menu-segment-title",j)),{menuType:g,ref:a,variant:P,shouldWrap:v,children:b})),d&&e.jsx(r.StyledSegmentChildren,f(c({menuType:g,variant:P},i.default("menu-segment-title",c({"data-role":"menu-segment-children"},O))),{children:e.jsx(s.MenuSegmentContext.Provider,{value:{isChildOfSegment:!0,overriddenVariant:P},children:d})}))]})}));d.displayName="MenuSegmentTitle",exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./menu-segment-title.style.js"),n=require("../__internal__/strict-menu.context.js"),u=require("../__internal__/menu-item-variant.context.js"),i=require("../menu-item/menu-item.style.js"),l=require("../../../__internal__/utils/helpers/tags/tags.js"),s=require("../__internal__/submenu/submenu.context.js");function o(e){return e&&e.__esModule?e:{default:e}}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}function f(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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const m=o(t).default.forwardRef(((o,a)=>{var{children:m,variant:p="default",text:b,as:d="h2",segmentWrapperProps:y}=o,O=function(e,t){if(null==e)return{};var r,n,u=function(e,t){if(null==e)return{};var r,n,u={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(u[r]=e[r]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(u[r]=e[r])}return u}(o,["children","variant","text","as","segmentWrapperProps"]);const{menuVariant:j,inFullscreenView:g}=n.useStrictMenuContext(),{submenuMaxWidth:_}=t.useContext(s.default);return e.jsxs(i.StyledMenuItem,{$inSubmenu:!0,$removeHeight:!0,children:[e.jsx(r.StyledTitle,f(c({as:d},l.default("menu-segment-title",O)),{$menuVariant:j,ref:a,$variant:g?void 0:p,$shouldWrap:!!_,$isInFullscreen:g,children:b})),m&&e.jsx(r.StyledSegmentChildren,f(c({},l.default("menu-segment-title",c({"data-role":"menu-segment-children"},y))),{children:e.jsx(u.default.Provider,{value:{menuItemVariant:p},children:m})}))]})}));m.displayName="MenuSegmentTitle",exports.default=m;

package/lib/components/menu/menu-segment-title/menu-segment-title.style.d.ts

@@ -1,13 +1,11 @@
+import { MenuVariantType } from "../menu.component";
 import { VariantType } from "../menu-item";
-import type { MenuType } from "../menu.types";
 interface StyledTitleProps {
-    variant?: VariantType;
-    menuType: MenuType;
-    shouldWrap?: boolean;
+    $variant?: VariantType;
+    $menuVariant: MenuVariantType;
+    $shouldWrap?: boolean;
+    $isInFullscreen?: boolean;
 }
 declare const StyledTitle: import("styled-components").StyledComponent<"h2", any, StyledTitleProps, never>;
-declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {
-    variant?: VariantType;
-    menuType: MenuType;
-}, never>;
+declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export { StyledTitle, StyledSegmentChildren };

package/lib/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("../menu.config.js");function n(e){return e&&e.__esModule?e:{default:e}}var a=n(e);const l=a.default.h2.withConfig({displayName:"menu-segment-title.style__StyledTitle",componentId:"carbon_v162_9_1__sc-41a2d76d-0"})(["",""],(({menuType:n,variant:a,shouldWrap:l})=>e.css(["margin:0px;padding:16px 16px 8px;font-size:12px;font-weight:500;text-transform:uppercase;line-height:14px;cursor:default;color:",";"," white-space:",";"],t.default[n].title,"alternate"===a&&`background-color: ${t.default[n].alternate};`,l?"normal":"nowrap"))),r=a.default.ul.withConfig({displayName:"menu-segment-title.style__StyledSegmentChildren",componentId:"carbon_v162_9_1__sc-41a2d76d-1"})(["",""],(({menuType:n,variant:a})=>e.css(["padding:0;li{list-style:none;"," &:not(&:last-child) a,&:not(&:last-child) button,&:not(&:last-child) > span,&:not(&:last-child) > div{border-radius:var(--borderRadius000);}}"],"alternate"===a&&e.css(["background-color:",";"],t.default[n].alternate))));exports.StyledSegmentChildren=r,exports.StyledTitle=l;
+"use strict";var e=require("styled-components"),a=require("../menu.config.js");function t(e){return e&&e.__esModule?e:{default:e}}var l=t(e);const n=l.default.h2.withConfig({displayName:"menu-segment-title.style__StyledTitle",componentId:"carbon_v162_10_0__sc-6f99340f-0"})(["",""],(({$menuVariant:t,$variant:l,$shouldWrap:n,$isInFullscreen:o})=>e.css(["margin:var(--global-space-none);padding:var(--global-space-comp-s) var(--global-space-comp-l) var(--global-space-none);text-transform:uppercase;cursor:default;white-space:",";font-size:12px;font-weight:500;line-height:150%;color:",";background-color:",";"," ",""],n?"normal":"nowrap",a.default[t].title,a.default[t].submenuItemBackground,"alternate"===l&&e.css(["background-color:",";"],a.default[t].alternate),o&&e.css(["background-color:",";padding:var(--global-space-comp-s) var(--global-space-comp-l);"],a.default[t].background)))),o=l.default.ul.withConfig({displayName:"menu-segment-title.style__StyledSegmentChildren",componentId:"carbon_v162_10_0__sc-6f99340f-1"})(["padding:0;"]);exports.StyledSegmentChildren=o,exports.StyledTitle=n;

package/lib/components/menu/menu.component.d.ts

@@ -1,4 +1,18 @@
 import React from "react";
-import type { MenuProps } from "./menu.types";
-export declare const Menu: ({ menuType, children, ...rest }: MenuProps) => React.JSX.Element;
+import { FlexboxProps, LayoutProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+/** @deprecated */
+export type MenuType = "light" | "dark" | "white" | "black";
+export type MenuVariantType = "white" | "black";
+export interface MenuProps extends TagProps, Pick<LayoutProps, "width" | "minWidth" | "maxWidth" | "overflow" | "overflowX" | "verticalAlign">, FlexboxProps {
+    /** Children elements */
+    children: React.ReactNode;
+    /**
+     * @deprecated Please use the `variant` prop instead.
+     */
+    menuType?: MenuType;
+    /** Set the color variant of the component */
+    variant?: MenuVariantType;
+}
+export declare const Menu: ({ menuType, variant, children, ...rest }: MenuProps) => React.JSX.Element;
 export default Menu;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../__internal__/utils/helpers/tags/tags.js"),n=require("./menu.style.js"),u=require("./__internal__/strict-menu.context.js"),o=require("./__internal__/menu.context.js"),i=require("./__internal__/keyboard-navigation/index.js"),l=require("./__internal__/locators.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}const s=s=>{var{menuType:a="light",children:p}=s,f=function(e,r){if(null==e)return{};var t,n,u=function(e,r){if(null==e)return{};var t,n,u={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(u[t]=e[t]);return u}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(u[t]=e[t])}return u}(s,["menuType","children"]);const[y,b]=r.useState(null),O=r.useRef(null),[j,d]=r.useState(void 0),[_,m]=r.useState([]),g=r.useCallback((e=>{m((r=>[...r,e]))}),[]),v=r.useCallback((e=>{m((r=>r.filter((r=>r!==e))))}),[]);return e.jsx(n.StyledMenuWrapper,(P=function(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}({menuType:a},f,t.default("menu",f)),S=null!=(S={ref:O,role:"list",onKeyDown:e=>{if(O.current){const r=O.current.querySelectorAll(l.MENU_ITEM_CHILDREN_LOCATOR);if(r){const t=i.menuKeyboardNavigation(e,Array.from(r));void 0!==t&&d(_[t])}}},children:e.jsx(u.StrictMenuProvider,{value:{menuType:a,openSubmenuId:y,setOpenSubmenuId:b,focusId:j,updateFocusId:d,registerItem:g,unregisterItem:v},children:e.jsx(o.default.Provider,{value:{inMenu:!0},children:p})})})?S:{},Object.getOwnPropertyDescriptors?Object.defineProperties(P,Object.getOwnPropertyDescriptors(S)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(S)).forEach((function(e){Object.defineProperty(P,e,Object.getOwnPropertyDescriptor(S,e))})),P));var P,S};exports.Menu=s,exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../__internal__/utils/helpers/tags/tags.js"),n=require("./menu.style.js"),u=require("./__internal__/strict-menu.context.js"),i=require("./__internal__/menu.context.js"),o=require("./__internal__/keyboard-navigation/index.js"),l=require("./__internal__/locators.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}const a=a=>{var{menuType:s,variant:b="white",children:f}=a,p=function(e,r){if(null==e)return{};var t,n,u=function(e,r){if(null==e)return{};var t,n,u={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(u[t]=e[t]);return u}(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)&&(u[t]=e[t])}return u}(a,["menuType","variant","children"]);const[y,O]=r.useState(null),d=r.useRef(null),[j,_]=r.useState(void 0),[m,v]=r.useState([]);let g=b;"light"===s||"white"===s?g="white":"dark"!==s&&"black"!==s||(g="black");const h=r.useCallback((e=>{v((r=>[...r,e]))}),[]),P=r.useCallback((e=>{v((r=>r.filter((r=>r!==e))))}),[]);return e.jsx(n.StyledMenuWrapper,(w=function(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}({},p,t.default("menu",p)),S=null!=(S={ref:d,role:"list",onKeyDown:e=>{if(d.current){const r=d.current.querySelectorAll(l.MENU_ITEM_CHILDREN_LOCATOR);if(r){const t=o.menuKeyboardNavigation(e,Array.from(r));void 0!==t&&_(m[t])}}},children:e.jsx(u.StrictMenuProvider,{value:{menuVariant:g,openSubmenuId:y,setOpenSubmenuId:O,focusId:j,updateFocusId:_,registerItem:h,unregisterItem:P},children:e.jsx(i.default.Provider,{value:{inMenu:!0},children:f})})})?S:{},Object.getOwnPropertyDescriptors?Object.defineProperties(w,Object.getOwnPropertyDescriptors(S)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(S)).forEach((function(e){Object.defineProperty(w,e,Object.getOwnPropertyDescriptor(S,e))})),w));var w,S};exports.Menu=a,exports.default=a;