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