carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.46 kB
JavaScript
"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"),o=require("./menu-item.style.js"),i=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),s=require("../__internal__/submenu/submenu.component.js"),a=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:I,selected:P,onKeyDown:C,variant:q="default",showDropdownArrow:D=!0,ariaLabel:M,clickToOpen:k,maxWidth:W,onSubmenuOpen:F,onSubmenuClose:E,overrideColor:L,rel:T,as:V,"data-element":K,"data-role":A}=n,H=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[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","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);p.default(I||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 R=t.useRef(m.default()),{isChildOfSegment:N,overriddenVariant:Y}=t.useContext(c.MenuSegmentContext),{inFullscreenView:z,registerItem:B,unregisterItem:G,focusId:J,updateFocusId:Q,menuType:U}=l.useStrictMenuContext(),X=t.useContext(a.default),Z=Object.keys(X).length>0,{submenuFocusId:$,updateFocusId:ee,handleKeyDown:te,submenuHasMaxWidth:ne}=X,re=J===R.current,ue=$?$===R.current:void 0,[oe,ie]=t.useState(null),[le,se]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==oe?void 0:oe.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==le&&se(t)}),[le,oe]),t.useEffect((()=>{const e=R.current;return B&&B(e),()=>{G&&G(e)}}),[B,G]),t.useEffect((()=>{if(re&&!ue||ue){if(le)return void le.focus();null==oe||oe.focus()}}),[le,re,ue,oe]),t.useImperativeHandle(f,(()=>({focus(){null==oe||oe.focus()}})),[oe]);const ae=e=>{Z?(e.stopPropagation(),null==ee||ee(R.current)):null==Q||Q(R.current)},ce={className:w||x?"carbon-menu-item--has-link":"",href:le?void 0:w,onClick:le?void 0:x,target:_,rel:T,icon:I,removeAriaLabelOnIcon:!0,selected:P,onKeyDown:z?void 0:e=>{null==C||C(e),i.default.isEscKey(e)&&(null==oe||oe.focus()),null==te||te(e)},overrideColor:L,ref:ie};"alternate"===Y&&N&&"alternate"===q&&["white","black"].includes(U)&&(ce.overrideColor=!0);const de=e=>W&&"string"==typeof e?e:void 0,me=z?void 0:W,fe=!(x||w||le);if(h)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,title:de(h),maxWidth:me},H),{inFullscreenView:z,id:R.current,as:V,onFocus:ae,children:e.jsx(s.default,v(y(v(y(v(y({},"boolean"!=typeof h&&{title:h}),{submenuDirection:S,showDropdownArrow:D,clickToOpen:k,maxWidth:W,asPassiveItem:fe,ariaLabel:M,onSubmenuOpen:F,onSubmenuClose:E,submenuMaxWidth:O,submenuMinWidth:g}),ce),{variant:q}),H),{children:j}))}));const be=u.default(H),pe=!!(null==oe?void 0:oe.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,inSubmenu:Z,title:de(j),maxWidth:me},H),{inFullscreenView:z&&!Object.keys(X).length,id:R.current,as:V,onFocus:ae,children:e.jsx(o.default,v(y(v(y({menuType:U,"data-role":"menu-item-wrapper"},ce),{menuItemVariant:q,ariaLabel:M,maxWidth:ne?void 0:me,inFullscreenView:z,asPassiveItem:fe}),be),{asDiv:pe||"div"===V,hasFocusableChild:!!le,hasInput:pe,inSubmenu:Z,children:j}))}))}));exports.MenuItem=O,exports.default=O;