carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.34 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useState as n,useRef as o,useCallback as i,useEffect as u}from"react";import c from"invariant";import{StyledMenuItemWrapper as l,StyledMenuItem as a,SubMenuItemIcon as s,MenuItemIcon as p,StyledMenuItemInnerText as f}from"../action-popover.style.js";import m from"../../../__internal__/utils/helpers/events/events.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import{useActionPopoverContext as v}from"../__internal__/action-popover.context.js";import b from"../action-popover-menu/action-popover-menu.component.js";function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){y(e,t,r[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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function g(e){return Boolean(e&&e.current)}const O=y=>{var{children:O,icon:j,disabled:w=!1,onClick:_,submenu:S,focusItem:D,download:E,href:x,currentSubmenuPosition:I,setCurrentSubmenuPosition:k}=y,K=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(y,["children","icon","disabled","onClick","submenu","focusItem","download","href","currentSubmenuPosition","setCurrentSubmenuPosition"]);c(!r.isValidElement(S)||S.type===b,"ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`");const{setOpenPopover:C,focusButton:T,submenuPosition:A,selectedSubmenuRef:L,setSelectedSubmenuRef:M}=v(),R=!!x,[B,W]=n(void 0),[$]=n(d()),[V,z]=n(!1),[F,N]=n(0),q=o(null),G=o(null),H=o(null),J=o(null),Q=i((()=>{const e=function(e,t,r,n){if(!e.current||!t.current)return n||r;const{left:o,right:i}=e.current.getBoundingClientRect(),{offsetWidth:u}=t.current,c=document.body.clientWidth;return"left"===r?o>=u?"left":"right":c>=i+u?"right":"left"}(G,q,A,I);return null==k||k(e),g(G)&&g(q)&&S}),[S,k,A,I]);u((()=>{!w&&q.current&&z(L===q.current)}),[w,L]),u((()=>{W((()=>{if(!G.current||!q.current)return;const{offsetWidth:e}=q.current,t="left"===I;return{left:t?-e:"auto",right:t?"auto":-e}}))}),[S,I]),u((()=>{S&&Q()}),[Q,S]),u((()=>{D&&setTimeout((()=>{var e;null===(e=G.current)||void 0===e||e.focus()}),0)}),[D]),u((()=>function(){H.current&&clearTimeout(H.current),J.current&&clearTimeout(J.current)}),[]),u((()=>{const e="resize";return window.addEventListener(e,Q),function(){window.removeEventListener(e,Q)}}),[Q]);const U=i((e=>{var t;e.stopPropagation(),w?(null===(t=G.current)||void 0===t||t.focus(),e.preventDefault()):(C(!1),T(),_&&_(e))}),[w,T,_,C]),X=i((e=>{if(m.isSpaceKey(e))e.preventDefault(),e.stopPropagation();else if(w)m.isEnterKey(e)&&e.stopPropagation();else if(S){var t;if("left"===I){if(m.isLeftKey(e)||m.isEnterKey(e))M(q.current),z(!0),N(0),e.stopPropagation();else if(m.isRightKey(e)){var r;z(!1),null===(r=G.current)||void 0===r||r.focus(),e.stopPropagation()}}else(m.isRightKey(e)||m.isEnterKey(e))&&(z(!0),N(0),e.stopPropagation()),m.isLeftKey(e)&&(z(!1),null===(t=G.current)||void 0===t||t.focus(),e.stopPropagation());e.preventDefault()}else if(m.isEnterKey(e)){var n;R&&E&&(null===(n=G.current)||void 0===n||n.click()),e.preventDefault(),U(e)}}),[w,S,I,M,R,E,U]),Y=P(h({},!w&&{onClick:e=>{var t;M(q.current),z(!0),null===(t=G.current)||void 0===t||t.focus(),e.preventDefault(),e.stopPropagation()}}),{"aria-haspopup":"true","aria-controls":`ActionPopoverMenu_${$}`,"aria-expanded":V}),Z=h({},!w&&{onMouseEnter:e=>{H.current&&clearTimeout(H.current),N(-1),H.current=setTimeout((()=>{z(!0),M(q.current)}),150),e.stopPropagation()},onMouseLeave:e=>{J.current&&clearTimeout(J.current),J.current=setTimeout((()=>{z(!1)}),150),e.stopPropagation()}});return e(l,P(h({onKeyDown:X},S&&Z),{children:[e(a,P(h(P(h({},K),{ref:G,onClick:U,type:"button",tabIndex:0,isDisabled:w}),w&&{"aria-disabled":!0},R&&{as:"a",download:E,href:x},S&&Y),{children:[S&&g(G)&&t(s,{"aria-hidden":!0,"data-element":"action-popover-menu-item-chevron","data-role":"chevron-icon",type:"left"===I?"chevron_left_thick":"chevron_right_thick"}),j&&t(p,{"aria-hidden":!0,type:j,"data-element":"action-popover-menu-item-icon","data-role":"item-icon"}),t(f,{"data-element":"action-popover-menu-item-inner-text",children:O})]})),r.isValidElement(S)?r.cloneElement(S,{parentID:`ActionPopoverItem_${$}`,menuID:`ActionPopoverMenu_${$}`,"data-element":"action-popover-submenu",isOpen:V,ref:q,style:B,setOpen:z,setFocusIndex:N,focusIndex:F}):null]}))};O.displayName="ActionPopoverItem";export{O as ActionPopoverItem,O as default};