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