carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 3.92 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useRef as r,useState as o,useContext as c,useMemo as i,useEffect as l,useCallback as a}from"react";import{onTabGuardFocus as u,defaultFocusableSelectors as s,setElementFocus as d,trapFunction as m}from"./focus-trap-utils.js";import f from"../modal/modal.context.js";import b from"../../hooks/__internal__/usePrevious/index.js";import p from"../../components/carbon-provider/__internal__/top-modal.context.js";function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const g="tab-guard-top",O="tab-guard-bottom",y=({children:y,autoFocus:h=!0,focusableSelectors:j,focusFirstElement:E,bespokeTrap:x,wrapperRef:w,isOpen:P,additionalWrapperRefs:S})=>{const A=r(null),[_,I]=o(),{isAnimationComplete:k=!0,triggerRefocusFlag:F}=c(f),{topModal:D}=c(p),L=!D||w.current&&D.contains(w.current),$=i((()=>(null==S?void 0:S.length)?[w,...S]:[w]),[S,w]),R=i((()=>u($,j,"top")),[j,$]),C=i((()=>u($,j,"bottom")),[j,$]);l((()=>(null==S||S.forEach((e=>{const{current:t}=e;if(t){var n,r;if(!(null===(n=t.previousElementSibling)||void 0===n?void 0:n.matches(`[data-element=${g}]`))){const n=document.createElement("div");n.tabIndex=0,n.dataset.element=g,t.insertAdjacentElement("beforebegin",n),n.addEventListener("focus",R(e))}if(!(null===(r=t.nextElementSibling)||void 0===r?void 0:r.matches(`[data-element=${O}]`))){const n=document.createElement("div");n.tabIndex=0,n.dataset.element=O,t.insertAdjacentElement("afterend",n),n.addEventListener("focus",C(e))}}})),()=>{null==S||S.forEach((e=>{var t,n;const r=null===(t=e.current)||void 0===t?void 0:t.previousElementSibling;(null==r?void 0:r.matches(`[data-element=${g}]`))&&r.remove();const o=null===(n=e.current)||void 0===n?void 0:n.nextElementSibling;(null==o?void 0:o.matches(`[data-element=${O}]`))&&o.remove()}))})),[S,R,C]);const q=h&&P&&k,B=b(q),M=a((e=>{const t=[];return $.forEach((n=>{n.current&&t.push(...Array.from(n.current.querySelectorAll(e)).filter((e=>-1!==Number(e.tabIndex))))})),t}),[$]);l((()=>{if(q&&!B){const e=E&&"current"in E?E.current:E,t=M(s).find((e=>"true"===e.getAttribute("data-has-autofocus"))),n=e||t||w.current;n&&d(n)}}),[q,B,M,E,w]),l((()=>{const e=e=>{if(!L||!P)return;const t=M(s);m(e,t,document.activeElement===w.current,j,x)};return document.addEventListener("keydown",e,!0),function(){document.removeEventListener("keydown",e,!0)}}),[x,w,j,M,L,P]);const N=a((()=>{const e=M(j||s),t=null==e?void 0:e.find((e=>e===document.activeElement));t&&I(t)}),[M,j]),T=a((()=>{var e;if(_&&!_.hasAttribute("disabled"))d(_);else if(null===(e=w.current)||void 0===e?void 0:e.hasAttribute("tabindex"))d(w.current);else{const e=M(j||s);e.length&&d(e[0])}}),[_,w,j,M]);l((()=>{F&&T()}),[F,T]);const[W,z]=o(0);l((()=>{P||z(0)}),[P]);const G=()=>{P&&z(void 0)},H=e=>{return t=function(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){v(e,t,n[t])}))}return e}({},e&&{tabIndex:W,onBlur:G}),n=null!=(n={onFocus:N})?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})),t;var t,n},J=n.Children.map(y,(e=>{var t;const r=e;return n.cloneElement(r,H(void 0===(null==r||null===(t=r.props)||void 0===t?void 0:t.tabIndex)))}));return e("div",{ref:A,children:[P&&t("div",{"data-element":g,tabIndex:0,onFocus:R(w)}),J,P&&t("div",{"data-element":O,tabIndex:0,onFocus:C(w)})]})};export{O as TAB_GUARD_BOTTOM,g as TAB_GUARD_TOP,y as default};