carbon-react 162.12.0-beta.1 → 162.13.0

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

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+export interface SubmenuContextProps {
+    submenuFocusId?: string | null;
+    updateFocusId?: (id: string) => void;
+    handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    blockIndex?: number;
+    submenuMaxWidth?: string;
+    closeSubmenu?: () => void;
+}
+declare const SubmenuContext: React.Context<SubmenuContextProps>;
+export default SubmenuContext;

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

@@ -0,0 +1 @@
+import t from"react";const e=t.createContext({});export{e as default};

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

@@ -0,0 +1,18 @@
+interface StyledSubmenuWrapperProps {
+    $inFullscreenView?: boolean;
+}
+export declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & StyledSubmenuWrapperProps, "theme">;
+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/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -0,0 +1 @@
+import e,{css as t}from"styled-components";import i from"../../../../style/themes/apply-base-theme.js";import o from"../../menu.config.js";const r=e.div.attrs(i).withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"carbon_v162_12_0__sc-92487cd8-0"})(["position:relative;width:fit-content;max-width:inherit;height:inherit;",""],(({$inFullscreenView:e})=>t([""," ",""],e&&t(["width:100%;"]),!e&&t(["display:flex;"])))),a=e.ul.attrs(i).withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"carbon_v162_12_0__sc-92487cd8-1"})(["",""],(({$menuVariant:e,$submenuDirection:i,$inFullscreenView:r,$maxHeight:a,$submenuMaxWidth:n,$submenuMinWidth:d,theme:l})=>t(["display:block;list-style:none;margin:0;padding:0;background-color:",";"," ",""],o[e].submenuItemBackground,!r&&t(["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);}"],l.zIndex.popover,"white"===e&&t(["margin-top:-1px;border:var(--global-borderwidth-xs) solid var(--nav-tertiary-border-default);"]),n&&t(["max-width:",";"],n),d&&t(["min-width:",";"],d),"left"===i&&t(["right:0;"]),a&&`max-height: ${a};`),r&&t(["min-width:100%;"]))));export{a as StyledSubmenu,r as StyledSubmenuWrapper};

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

@@ -0,0 +1,12 @@
+export { default as Menu } from "./menu.component";
+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";
+export type { MenuDividerProps } from "./menu-divider";
+export { default as MenuSegmentTitle } from "./menu-segment-title";
+export type { MenuTitleProps } from "./menu-segment-title";
+export { default as MenuFullscreen } from "./menu-full-screen";
+export type { MenuFullscreenProps } from "./menu-full-screen";
+export { default as ScrollableBlock } from "./scrollable-block";
+export type { ScrollableBlockProps } from "./scrollable-block";

package/esm/components/menu/index.js

@@ -0,0 +1 @@
+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.d.ts

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

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuDividerProps extends TagProps {
+    size?: "default" | "large";
+}
+declare const MenuDivider: React.ForwardRefExoticComponent<MenuDividerProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuDivider;

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

@@ -0,0 +1 @@
+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 i}from"../menu-item/menu-item.style.js";import o 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 l=r.forwardRef(((r,c)=>{var{size:l="default"}=r,a=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(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)&&(i[t]=e[t])}return i}(r,["size"]);const{menuVariant:s,inFullscreenView:f}=n();return e(i,{$inSubmenu:!0,$removeHeight:!0,"aria-hidden":"true","data-role":"divider-container",children:e(t,(m=u({$size:l},o("menu-divider",a)),p={$menuVariant:s,$inFullscreenView:f,ref:c},p=null!=p?p:{},Object.getOwnPropertyDescriptors?Object.defineProperties(m,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(m,e,Object.getOwnPropertyDescriptor(p,e))})),m))});var m,p}));l.displayName="MenuDivider";export{l as default};

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

@@ -0,0 +1,8 @@
+import { MenuDividerProps } from "./menu-divider.component";
+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/esm/components/menu/menu-divider/menu-divider.style.js

@@ -0,0 +1 @@
+import e,{css as a}from"styled-components";import o from"../menu.config.js";const i=e.div.withConfig({displayName:"menu-divider.style__StyledDivider",componentId:"carbon_v162_12_0__sc-b48c8639-0"})(["",""],(({$menuVariant:e,$size:i,$inFullscreenView:n})=>a(["background-color:",";margin:var(--global-space-none) var(--global-space-comp-l);height:1px;"," ",""],o[e].divider,n&&a(["margin:var(--global-space-comp-s) var(--global-space-comp-l);"]),"large"===i&&a(["margin:var(--global-space-none);height:4px;"]))));export{i as default};

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

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

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

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import type { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuFullscreenProps extends TagProps {
+    /** Accessible name that conveys the purpose of the menu   */
+    "aria-label"?: string;
+    /** The child elements to render */
+    children?: React.ReactNode;
+    /** Sets whether the component is open or closed */
+    isOpen?: boolean;
+    /** The start position for the component to open from */
+    startPosition?: "left" | "right";
+    /** A callback to be called when the close icon is clicked or enter is pressed when focused */
+    onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
+    /** Manually override the internal modal stacking order to set this as top */
+    topModalOverride?: boolean;
+}
+export declare const MenuFullscreen: (props: MenuFullscreenProps) => React.JSX.Element;
+export default MenuFullscreen;

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

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

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

@@ -0,0 +1,16 @@
+interface StyledMenuFullscreenProps {
+    $transitionDuration: number;
+    $startPosition: "left" | "right";
+}
+export declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & StyledMenuFullscreenProps, "theme">;
+interface StyledMenuModalProps {
+    $menuVariant: "white" | "black";
+}
+export declare const StyledMenuModal: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & 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/esm/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -0,0 +1 @@
+import e,{css as i}from"styled-components";import n from"../../../style/themes/apply-base-theme.js";import t from"../menu.config.js";const l=e.div.attrs(n).withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreen",componentId:"carbon_v162_12_0__sc-9603f910-0"})(["",""],(({$startPosition:e,$transitionDuration:n,theme:t})=>i(["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;}"],t.zIndex.fullScreenModal,e,e,n,e,e,n))),o=e.div.attrs(n).withConfig({displayName:"menu-full-screen.style__StyledMenuModal",componentId:"carbon_v162_12_0__sc-9603f910-1"})(["",""],(({$menuVariant:e})=>i(["height:100vh;width:100vw;outline:none;background-color:",";"],t[e].background))),a=e.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenHeader",componentId:"carbon_v162_12_0__sc-9603f910-2"})(["",""],(({$menuVariant:e})=>i(["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:",";"],t[e].fullScreenHeader))),s=e.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenContent",componentId:"carbon_v162_12_0__sc-9603f910-3"})(["overflow-y:auto;width:100%;height:calc(100% - var(--global-size-m) - var(--global-space-comp-s));"]);export{l as StyledMenuFullscreen,s as StyledMenuFullscreenContent,a as StyledMenuFullscreenHeader,o as StyledMenuModal};

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

@@ -0,0 +1,2 @@
+export { default } from "./menu-item.component";
+export type { MenuWithChildren, MenuWithIcon, VariantType, MenuItemHandle, } from "./menu-item.component";

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

@@ -0,0 +1 @@
+export{MenuItem as default}from"./menu-item.component.js";

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

@@ -0,0 +1,83 @@
+import React from "react";
+import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-system";
+import { IconType } from "../../icon";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export type VariantType = "default" | "alternate";
+type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
+interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
+    /** onClick handler */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Defines which direction the submenu will hang eg. left/right */
+    submenuDirection?: string;
+    /** Is the menu item the currently selected item. */
+    selected?: boolean;
+    /** A title for the menu item that has a submenu. */
+    submenu?: React.ReactNode;
+    /** The href to use for the menu item. */
+    href?: string;
+    /** onKeyDown handler */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** The target to use for the menu item. */
+    target?: string;
+    /** The rel attribute to be used for the underlying <a> tag */
+    rel?: string;
+    /** Set the variant of the MenuItem  */
+    variant?: VariantType;
+    /** Flag to display the dropdown arrow when an item has a submenu */
+    showDropdownArrow?: boolean;
+    /** If no text is provided an ariaLabel should be given to facilitate accessibility. */
+    ariaLabel?: string;
+    /** Marks the element as the current item within a navigation context. */
+    ariaCurrent?: AriaCurrent;
+    /** Callback triggered when submenu opens. Only valid with submenu prop */
+    onSubmenuOpen?: () => void;
+    /** Callback triggered when submenu closes. Only valid with submenu prop */
+    onSubmenuClose?: () => void;
+    /** When set the submenu opens by click instead of hover */
+    clickToOpen?: boolean;
+    /**
+     * Sets the maxWidth of the MenuItem, setting this on a non-submenu
+     * item will truncate any text/content that may overflow
+     * */
+    maxWidth?: MaxWidthProps["maxWidth"];
+    /**
+     * @private @ignore @internal
+     * Renders MenuItem as a div element
+     * */
+    as?: "div";
+    /**
+     * Sets the maximum width for the item's submenu when it is opened.
+     * This prop is only applicable if the item has a submenu.
+     * Overrides the maximum width of any items within the submenu.
+     * Accepts any valid CSS width value (e.g. "200px", "50%").
+     * */
+    submenuMaxWidth?: string;
+    /**
+     * Sets a minimum width for the item's submenu when it is opened.
+     * Accepts any valid CSS width value (e.g. "200px", "50%").
+     * This prop is only applicable if the item has a submenu.
+     * */
+    submenuMinWidth?: string;
+}
+export interface MenuWithChildren extends MenuItemBaseProps {
+    children?: React.ReactNode;
+    /**
+     * @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 {
+    /**
+     * @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;
+}
+export type MenuItemHandle = {
+    /** Programmatically focus the MenuItem. */
+    focus: () => void;
+} | null;
+export declare const MenuItem: React.ForwardRefExoticComponent<(MenuWithChildren | MenuWithIcon) & React.RefAttributes<MenuItemHandle>>;
+export default MenuItem;

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

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

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

@@ -0,0 +1,33 @@
+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;
+}
+export declare const StyledMenuItem: import("styled-components").StyledComponent<"li", any, {
+    theme: object;
+} & 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/esm/components/menu/menu-item/menu-item.style.js

@@ -0,0 +1 @@
+import o,{css as e}from"styled-components";import{layout as t,flexbox as a,padding as r}from"styled-system";import i from"../menu.config.js";import n from"../../../style/themes/apply-base-theme.js";import l from"../../../style/utils/add-focus-styling.js";const s=o.li.attrs(n).withConfig({displayName:"menu-item.style__StyledMenuItem",componentId:"carbon_v162_12_0__sc-338885db-0"})(["display:flex;list-style:none;align-items:stretch;min-height:var(--global-size-m);"," "," ",""],t,a,(({$inSubmenu:o,$removeHeight:t,$inFullscreenView:a,$maxWidth:r})=>e([""," "," ",""],o&&e(["display:list-item;",""],a&&e(["width:100%;"])),t&&e(["min-height:0;"]),r&&e(["max-width:",";"],r)))),c=e(['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);}}}'],l(!0)),d=o.a.attrs(n).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"carbon_v162_12_0__sc-338885db-1"})(["",""],(({$menuVariant:o,$selected:t,$hasSubmenu:a,$isOpen:n,$menuItemVariant:s,$maxWidth:d,$inFullscreenView:m,$asPassiveItem:p,$asDiv:b,$inSubmenu:u,$submenuMaxWidth:g,theme:h})=>e(["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']){","}"],i[o].background,i[o].color,r,d&&e(["max-width:",";"],d),m&&e(["width:100%;font:var(--global-font-static-comp-medium-l);",""],a&&e(["color:",";"],i[o].title)),!p&&!b&&e(["&:hover{cursor:pointer;background-color:",";color:",";}&:focus{","}&:active{background-color:",";color:",";}"],i[o].backgroundHover,i[o].colorHover,l(!0),i[o].backgroundActive,i[o].colorActive),t&&e(['&::before{content:"";position:absolute;width:var(--global-size-xs);height:var(--global-size-6-xs);background-color:var(--nav-primary-bg-selected);'," ","}"],!m&&e(["bottom:0px;left:50%;transform:translate(-50%,0%);width:var(--global-size-xs);height:var(--global-size-6-xs);"]),m&&e(["left:0px;top:50%;transform:translate(0%,-50%);height:var(--global-size-xs);width:var(--global-size-6-xs);"])),!m&&e([""," ",""],a&&n&&e(["z-index:calc("," + 1);background-color:",";",""],h.zIndex.popover,i[o].submenuOpenedBackground,"white"===o&&e(["box-shadow:inset 1px 0 0 var(--nav-tertiary-border-default),inset -1px 0 0 var(--nav-tertiary-border-default);"])),u&&e(["width:100%;background-color:",";"," ",""],i[o].submenuItemBackground,"alternate"===s&&e(["background-color:",";"],i[o].alternate),g&&e(["max-width:",";"],g))),c))),m=o.span.withConfig({displayName:"menu-item.style__StyledMenuItemContent",componentId:"carbon_v162_12_0__sc-338885db-2"})(["",""],(({$hasMaxWidth:o})=>e(["display:flex;align-items:center;gap:var(--global-space-comp-s);width:100%;"," .search{width:100%;}"],o&&e(["display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:middle;"]))));export{s as StyledMenuItem,m as StyledMenuItemContent,d as StyledMenuItemWrapper,d as default};

package/esm/components/menu/menu-segment-title/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./menu-segment-title.component";
+export type { MenuTitleProps } from "./menu-segment-title.component";

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

@@ -0,0 +1 @@
+export{default}from"./menu-segment-title.component.js";

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { VariantType } from "../menu-item";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+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 variant of the MenuSegmentTitle  */
+    variant?: VariantType;
+    /** Set the heading level for the segment title */
+    as?: AllowedAsValues;
+    /** Data tag prop bag for segmented children */
+    segmentWrapperProps?: TagProps;
+}
+declare const MenuSegmentTitle: React.ForwardRefExoticComponent<MenuTitleProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuSegmentTitle;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useContext as n}from"react";import{StyledTitle as o,StyledSegmentChildren as i}from"./menu-segment-title.style.js";import{useStrictMenuContext as u}from"../__internal__/strict-menu.context.js";import a from"../__internal__/menu-item-variant.context.js";import{StyledMenuItem as l}from"../menu-item/menu-item.style.js";import c from"../../../__internal__/utils/helpers/tags/tags.js";import m from"../__internal__/submenu/submenu.context.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(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){s(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 b=r.forwardRef(((r,s)=>{var{children:b,variant:O="default",text:y,as:j="h2",segmentWrapperProps:g}=r,d=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(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)&&(o[r]=e[r])}return o}(r,["children","variant","text","as","segmentWrapperProps"]);const{menuVariant:h,inFullscreenView:v}=u(),{submenuMaxWidth:P}=n(m);return e(l,{$inSubmenu:!0,$removeHeight:!0,children:[t(o,f(p({as:j},c("menu-segment-title",d)),{$menuVariant:h,ref:s,$variant:v?void 0:O,$shouldWrap:!!P,$isInFullscreen:v,children:y})),b&&t(i,f(p({},c("menu-segment-title",p({"data-role":"menu-segment-children"},g))),{children:t(a.Provider,{value:{menuItemVariant:O},children:b})}))]})}));b.displayName="MenuSegmentTitle";export{b as default};

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

@@ -0,0 +1,11 @@
+import { MenuVariantType } from "../menu.component";
+import { VariantType } from "../menu-item";
+interface StyledTitleProps {
+    $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, {}, never>;
+export { StyledTitle, StyledSegmentChildren };

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

@@ -0,0 +1 @@
+import e,{css as o}from"styled-components";import a from"../menu.config.js";const n=e.h2.withConfig({displayName:"menu-segment-title.style__StyledTitle",componentId:"carbon_v162_12_0__sc-6f99340f-0"})(["",""],(({$menuVariant:e,$variant:n,$shouldWrap:t,$isInFullscreen:l})=>o(["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:",";"," ",""],t?"normal":"nowrap",a[e].title,a[e].submenuItemBackground,"alternate"===n&&o(["background-color:",";"],a[e].alternate),l&&o(["background-color:",";padding:var(--global-space-comp-s) var(--global-space-comp-l);"],a[e].background)))),t=e.ul.withConfig({displayName:"menu-segment-title.style__StyledSegmentChildren",componentId:"carbon_v162_12_0__sc-6f99340f-1"})(["padding:0;"]);export{t as StyledSegmentChildren,n as StyledTitle};

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

@@ -0,0 +1,18 @@
+import React from "react";
+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/esm/components/menu/menu.component.js

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

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

@@ -0,0 +1,31 @@
+declare const _default: {
+    black: {
+        background: string;
+        color: string;
+        backgroundHover: string;
+        colorHover: string;
+        backgroundActive: string;
+        colorActive: string;
+        submenuOpenedBackground: string;
+        submenuItemBackground: string;
+        title: string;
+        alternate: string;
+        divider: string;
+        fullScreenHeader: string;
+    };
+    white: {
+        background: string;
+        color: string;
+        backgroundHover: string;
+        colorHover: string;
+        backgroundActive: string;
+        colorActive: string;
+        submenuOpenedBackground: string;
+        submenuItemBackground: string;
+        title: string;
+        alternate: string;
+        divider: string;
+        fullScreenHeader: string;
+    };
+};
+export default _default;

package/esm/components/menu/menu.config.js

@@ -0,0 +1 @@
+var a={black:{background:"var(--nav-primary-bg-default)",color:"var(--nav-primary-label-default)",backgroundHover:"var(--nav-primary-bg-hover)",colorHover:"var(--nav-primary-label-hover)",backgroundActive:"var(--nav-primary-bg-active)",colorActive:"var(--nav-primary-label-active)",submenuOpenedBackground:"var(--nav-primary-bg-child)",submenuItemBackground:"var(--nav-primary-bg-child)",title:"var(--container-standard-inverse-txt-alt)",alternate:"var(--nav-primary-bg-child-alt)",divider:"var(--nav-primary-divider)",fullScreenHeader:"var(--nav-primary-bg-child)"},white:{background:"var(--nav-tertiary-bg-default)",color:"var(--nav-tertiary-label-default)",backgroundHover:"var(--nav-tertiary-bg-hover)",colorHover:"var(--nav-tertiary-label-hover)",backgroundActive:"var(--nav-tertiary-bg-active)",colorActive:"var(--nav-tertiary-label-active)",submenuOpenedBackground:"var(--nav-tertiary-bg-child)",submenuItemBackground:"var(--nav-tertiary-bg-child)",title:"var(--container-standard-txt-alt)",alternate:"var(--nav-tertiary-bg-child-alt)",divider:"var(--nav-tertiary-divider)",fullScreenHeader:"var(--nav-tertiary-bg-child-alt)"}};export{a as default};

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

@@ -0,0 +1,5 @@
+interface StyledMenuProps {
+    $inFullscreenView?: boolean;
+}
+export declare const StyledMenuWrapper: import("styled-components").StyledComponent<"ul", any, StyledMenuProps, never>;
+export default StyledMenuWrapper;

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

@@ -0,0 +1 @@
+import e,{css as n}from"styled-components";import{layout as t,flexbox as i}from"styled-system";const l=e.ul.withConfig({displayName:"menu.style__StyledMenuWrapper",componentId:"carbon_v162_12_0__sc-5b0dbbae-0"})(["list-style:none;margin:0;padding:0;outline:none;display:flex;align-items:stretch;min-height:var(--global-size-m);"," "," ",""],t,i,(({$inFullscreenView:e})=>e&&n(["flex-direction:column;"])));export{l as StyledMenuWrapper,l as default};

package/esm/components/menu/scrollable-block/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./scrollable-block.component";
+export type { ScrollableBlockProps } from "./scrollable-block.component";

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

@@ -0,0 +1 @@
+export{ScrollableBlock as default}from"./scrollable-block.component.js";

package/esm/components/menu/scrollable-block/scrollable-block.component.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { VariantType } from "../menu-item";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface ScrollableBlockProps extends TagProps {
+    /** Children elements */
+    children: React.ReactNode;
+    /** A custom height to be applied to the component. */
+    height?: string | number;
+    /** A custom max height to be applied to the component. */
+    maxHeight?: string | number;
+    /** Set the variant of the ScrollableBlock */
+    variant?: VariantType;
+    /** the element, if any, displayed at the top of the block to be its semantic "parent",
+     * but not part of the scrollable section
+     */
+    parent?: React.ReactElement;
+    /** the colour variant for the parent element, if different from the variant of the block */
+    parentVariant?: VariantType;
+}
+export declare const ScrollableBlock: ({ children, height, maxHeight, variant, parent, parentVariant, ...rest }: ScrollableBlockProps) => React.JSX.Element;
+export default ScrollableBlock;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import r from"../__internal__/menu-item-variant.context.js";import{MenuItem as n}from"../menu-item/menu-item.component.js";import{StyledScrollableBlock as o,ScrollableContainer as i}from"./scrollable-block.style.js";import a from"../../../__internal__/utils/helpers/tags/tags.js";function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{var p,u,{children:b,height:m,maxHeight:s,variant:f="default",parent:O,parentVariant:y}=c,j=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(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)&&(o[r]=e[r])}return o}(c,["children","height","maxHeight","variant","parent","parentVariant"]);return e(o,(p=function(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){l(e,t,r[t])}))}return e}({},j,a("submenu-scrollable-block",j)),u=null!=(u={children:[O&&t(n,{"data-component":"scrollable-block-parent",variant:y,as:"div","data-role":"scrollable-block-parent-menu-item",children:O}),t(i,{role:"list",$height:m,$maxHeight:s,children:t(r.Provider,{value:{menuItemVariant:f},children:b})})]})?u:{},Object.getOwnPropertyDescriptors?Object.defineProperties(p,Object.getOwnPropertyDescriptors(u)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(u)).forEach((function(e){Object.defineProperty(p,e,Object.getOwnPropertyDescriptor(u,e))})),p))};export{c as ScrollableBlock,c as default};

package/esm/components/menu/scrollable-block/scrollable-block.style.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledScrollableBlock: import("styled-components").StyledComponent<"li", any, {}, never>;
+interface ScrollableContainerProps {
+    $height?: string | number;
+    $maxHeight?: string | number;
+}
+export declare const ScrollableContainer: import("styled-components").StyledComponent<"ul", any, ScrollableContainerProps, never>;
+export default StyledScrollableBlock;

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

@@ -0,0 +1 @@
+import e,{css as o}from"styled-components";const l=e.li.withConfig({displayName:"scrollable-block.style__StyledScrollableBlock",componentId:"carbon_v162_12_0__sc-50e9ce29-0"})(['[data-last-menu-item="true"]{border-bottom-right-radius:var(--global-radius-none);}']),t=e.ul.withConfig({displayName:"scrollable-block.style__ScrollableContainer",componentId:"carbon_v162_12_0__sc-50e9ce29-1"})(["",""],(({$height:e,$maxHeight:l})=>o(["list-style:none;margin:0;padding:0;overflow-y:scroll;overscroll-behavior-y:none;"," ",""],e&&o(["height:",";"],"number"==typeof e?`${e}px`:e),l&&o(["max-height:",";"],"number"==typeof l?`${l}px`:l))));export{t as ScrollableContainer,l as StyledScrollableBlock,l as default};

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

@@ -0,0 +1,2 @@
+export { default } from "./message.component";
+export type { MessageProps } from "./message.component";

package/esm/components/message/index.js

@@ -0,0 +1 @@
+export{Message as default}from"./message.component.js";

package/esm/components/message/message.component.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai" | "error-subtle" | "info-subtle" | "success-subtle" | "warning-subtle" | "ai-subtle" | "callout-subtle";
+export type InternalMessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai" | "callout";
+export interface MessageProps extends MarginProps, TagProps {
+    /** Content to be rendered within the Message. */
+    children?: React.ReactNode;
+    /** Set custom aria-label for component's close button. */
+    closeButtonAriaLabel?: string;
+    /** Set custom id to component root. */
+    id?: string;
+    /**
+     * Callback triggered on dismiss, will render the close button.
+     */
+    onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Flag to determine if the message is rendered. */
+    open?: boolean;
+    /**
+     * Flag to determine if the close button is rendered.
+     * @deprecated Please use the `onDismiss` prop to determine whether the close button is rendered instead.
+     */
+    showCloseIcon?: boolean;
+    /** Set message title. */
+    title?: React.ReactNode;
+    /**
+     * Set transparent styling.
+     * @deprecated The transparent prop is deprecated and will be removed in a future release, please use the subtle variants instead.
+     */
+    transparent?: boolean;
+    /** Set the component's variant. */
+    variant?: MessageVariant;
+    /**
+     * Set the component's width, accepts any valid css string.
+     * Please note the component has a max-width of 720px.
+     */
+    width?: string;
+    /** Set the component's size. */
+    size?: "medium" | "large";
+}
+export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
+export default Message;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import n,{useRef as o}from"react";import{Typography as i}from"../typography/typography.component.js";import{MessageStyle as s,MessageWrapper as a,MessageContent as l,MessageContentWrapper as c,CloseButtonWrapper as p,TypeIconStyle as u,MessageTitle as d}from"./message.style.js";import m from"../../__internal__/utils/helpers/tags/tags.js";import f from"../icon/icon.component.js";import"../icon/icon.style.js";import{Button as b}from"../button/__next__/button.component.js";import{AiIcon as y,AiIconInverse as g}from"../../__internal__/ai-icon/ai-icon.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import h from"../../style/utils/filter-styled-system-margin-props.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import j from"../../__internal__/utils/logger/index.js";function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(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){w(e,t,r[t])}))}return e}function _(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}let P=!1,S=!1,x=!1;const z=n.forwardRef(((n,w)=>{var{open:z=!0,transparent:D=!1,title:k,variant:I="info",children:L,onDismiss:M,id:T,closeButtonAriaLabel:C,showCloseIcon:A=!0,width:B,size:E="medium"}=n,R=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(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)&&(o[r]=e[r])}return o}(n,["open","transparent","title","variant","children","onDismiss","id","closeButtonAriaLabel","showCloseIcon","width","size"]);D&&!P&&(j.deprecate("The 'transparent' prop in `Message` is deprecated and will soon be removed."),P=!0),"neutral"!==I||S||(j.deprecate("The 'neutral' variant in `Message` is deprecated and will soon be removed."),S=!0),!1!==A||x||(j.deprecate("The 'showCloseIcon' prop in `Message` is deprecated and will soon be removed. To prevent the close button from being rendered, don't pass the `onDismiss` prop."),x=!0);const N=o(null),W=w||N,q=O(),F=h(R),G={neutral:"info",success:"tick_circle",error:"error",warning:"warning",info:"info",callout:"tag"},H=I.endsWith("-subtle"),J=I.replace("-subtle",""),K=()=>{var n,o;return e(r,{children:[t(u,{"aria-hidden":"true",variant:J,isSubtle:H,transparent:D,children:"ai"===I?t(y,{"data-role":"ai-icon"}):"ai-subtle"===I?t(g,{"data-role":"ai-icon-subtle"}):t(f,{type:G[J]})}),t(i,{screenReaderOnly:!0,children:null===(n=(o=q.message)[J])||void 0===n?void 0:n.call(o)})]})};return z?e(s,_(v(_(v({},m("Message",R)),{transparent:D,variant:J,isSubtle:H,id:T,width:B,ref:W}),F),{tabIndex:-1,children:[!H&&K(),e(a,{children:[e(l,{"data-role":"message-content",size:E,isSubtle:H,children:[H&&K(),e(c,{size:E,children:[k?"string"==typeof k?t(d,{size:E,children:k}):k:null,L]})]}),A&&M&&t(p,{size:E,children:t(b,{"data-role":"close","data-element":"close","aria-label":C||q.message.closeButtonAriaLabel(),variantType:"subtle",size:"small",onClick:e=>{M(e)},children:t(f,{type:"cross"})})})]})]})):null}));z.displayName="Message";export{z as Message,z as default};