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