carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.63 kB
JavaScript
import{jsxs as e,Fragment as o,jsx as n}from"react/jsx-runtime";import r,{useRef as l,useCallback as t}from"react";import{CSSTransition as i}from"react-transition-group";import{StyledMenuFullscreen as a,StyledMenuModal as m,StyledMenuFullscreenHeader as s}from"./menu-full-screen.style.js";import{StyledMenuWrapper as c}from"../menu.style.js";import{useStrictMenuContext as d,StrictMenuProvider as u}from"../__internal__/strict-menu.context.js";import p from"../../../__internal__/utils/helpers/events/events.js";import{Box as f}from"../../box/box.component.js";import _ from"../../icon-button/icon-button.component.js";import h from"../../icon/icon.component.js";import{Portal as j}from"../../portal/portal.js";import v from"../../../__internal__/focus-trap/focus-trap.component.js";import b from"../menu-divider/menu-divider.component.js";import{getDocument as y}from"../../../__internal__/dom/globals.js";import g from"../../../hooks/__internal__/useLocale/useLocale.js";import x from"../../../hooks/__internal__/useModalAria/useModalAria.js";import M from"../../../hooks/__internal__/useModalManager/useModalManager.js";const k=({"aria-label":k="Fullscreen menu","data-element":O,"data-role":T,children:w,isOpen:A=!1,onClose:C,startPosition:E="left",topModalOverride:F})=>{var I;const L=l(null),P=l(null),R=l(null),V=x(P),{menuType:D}=d(),S=["dark","black"].includes(D),Y=g(),B=r.Children.toArray(w),K=r.Children.toArray(B.map(((r,l)=>l<B.length-1?e(o,{children:[r,n(b,{"data-role":"divider"})]}):r))),q=t((e=>{C&&p.isEscKey(e)&&(e.stopImmediatePropagation(),C(e))}),[C]);return M({open:A,closeModal:q,modalRef:L,topModalOverride:F,focusCallToActionElement:null===(I=y())||void 0===I?void 0:I.activeElement}),n("li",{children:n(j,{children:n(i,{nodeRef:L,in:A,timeout:200,unmountOnExit:!0,children:n(a,{ref:L,startPosition:E,transitionDuration:200,children:n(v,{wrapperRef:P,isOpen:A,children:e(m,{"aria-label":k,"aria-modal":!!V||void 0,"data-component":"menu-fullscreen","data-element":O,"data-role":T,menuType:D,ref:P,role:"dialog",tabIndex:-1,children:[n(s,{menuType:D,children:n(_,{"aria-label":Y.menuFullscreen.ariaLabels.closeButton(),onClick:C,"data-element":"close",children:n(h,{type:"close",color:S?"--colorsYang100":void 0})})}),n(f,{overflowY:"auto",scrollVariant:S?"dark":"light",width:"100%",height:"calc(100% - 40px)",children:n(c,{"data-component":"menu",menuType:D,ref:R,display:"flex",flexDirection:"column",role:"list",inFullscreenView:!0,children:n(u,{value:{inFullscreenView:!0,menuType:D,openSubmenuId:null,setOpenSubmenuId:()=>{}},children:K})})})]})})})})})})};export{k as MenuFullscreen,k as default};