carbon-react/esm/components/popover-container/popover-container.component.js

A library of reusable React components for easily building user interfaces.

import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as o,useRef as a,useContext as i,useCallback as l,useEffect as s,useImperativeHandle as c,useMemo as p}from"react";import{CSSTransition as d}from"react-transition-group";import{offset as u,flip as m,shift as f}from"@floating-ui/dom";import b from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerWrapperStyle as v,PopoverContainerOpenIcon as h,PopoverContainerCloseIcon as y,PopoverContainerContentStyle as _,PopoverContainerHeaderStyle as O,PopoverContainerTitleStyle as g}from"./popover-container.style.js";import j from"../icon/icon.component.js";import x from"../../__internal__/popover/popover.component.js";import P from"../../__internal__/utils/helpers/guid/index.js";import C from"../../style/utils/filter-styled-system-padding-props.js";import w from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import k from"../../__internal__/utils/helpers/events/events.js";import A from"../../__internal__/focus-trap/focus-trap.component.js";import B from"../../__internal__/modal/modal.context.js";import I from"../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js";import D from"../../__internal__/utils/helpers/tags/tags.js";import{defaultFocusableSelectors as L}from"../../__internal__/focus-trap/focus-trap-utils.js";import E from"../flat-table/__internal__/flat-table.context.js";import{useGlobalHeader as S}from"../global-header/__internal__/global-header.context.js";function F(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function R(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){F(e,t,r[t])}))}return e}function M(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}const W=({tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":a,id:i,"aria-expanded":l,"aria-haspopup":s})=>e(h,{tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":a,"aria-haspopup":s,"aria-expanded":l,id:i,children:e(j,{type:"settings"})}),$=({"data-element":t,tabIndex:r,onClick:n,ref:o,"aria-label":a,closeButtonDataProps:i})=>e(y,M(R({tabIndex:r,onClick:n,ref:o,"aria-label":a},D("close",R({"data-element":t},i))),{children:e(j,{type:"close"})}));function H(e,t,r){return p((()=>[u(e?({rects:e})=>({mainAxis:-e.reference.height}):r),m({fallbackStrategy:"initialPlacement"}),...t?[f()]:[]]),[e,t,r])}const Q=n(((n,p)=>{var{children:u,title:m,borderRadius:f,position:h="right",offset:y=6,open:j,onOpen:F,onClose:Q,renderOpenComponent:T=W,renderCloseComponent:q=$,shouldCoverButton:z=!1,ariaDescribedBy:G,openButtonAriaLabel:K,closeButtonAriaLabel:N="close",containerAriaLabel:U,closeButtonDataProps:J,disableAnimation:V=!1,hasFullWidth:X=!1}=n,Y=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(n,["children","title","borderRadius","position","offset","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const Z=void 0!==j,[ee,te]=o(!1),re=a(null),ne=a(null),oe=a(null),ae=a(P()),ie=a(null),le=m?`PopoverContainer_${ae.current}`:void 0,se=Z?j:ee,ce=!b("screen and (prefers-reduced-motion: no-preference)"),pe=H(z,"center"===h,y),{isInFlatTable:de}=i(E),ue=l((e=>{var t;Z||te(!1),null==Q||Q(e),se&&(null===(t=ne.current)||void 0===t||t.focus())}),[Z,se,Q]),me=l((e=>{!k.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&se&&k.isEscKey(e)&&ue(e)}),[ue,se]);s((()=>(document.addEventListener("keydown",me),()=>{document.removeEventListener("keydown",me)})),[me]),s((()=>{var e;!z&&se&&(null===(e=ie.current)||void 0===e||e.focus({preventScroll:!0}))}),[se,z,ie]),I(z?void 0:ie,z?void 0:ne,ue);const fe=l((e=>{const t=Array.from(document.querySelectorAll(L)||[]).filter((e=>e===ne.current||-1!==Number(e.tabIndex))),r=t.indexOf(ne.current);t[r+1].focus(),ue(e)}),[]),be=(e,t)=>{var r;"next"===e&&fe?fe(t):"prev"===e&&(null===(r=ne.current)||void 0===r||r.focus())},ve={tabIndex:0,"aria-expanded":se,"aria-haspopup":"dialog",isOpen:se,"data-element":"popover-container-open-component",onClick:e=>{Z||te(!se),se?null==Q||Q(e):null==F||F(e)},ref:ne,"aria-label":K||m,id:se?void 0:le,"data-popover-container-button":"true"},he={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{ue(e)},ref:re,"aria-label":N,closeButtonDataProps:J},ye=w((e=>{Z||te(!1),se&&(null==Q||Q(e))}),"mousedown"),[_e,Oe]=o(!1),{isWithinGlobalHeader:ge}=S();c(p,(()=>({focusButton(){var e;null===(e=ne.current)||void 0===e||e.focus()}})),[]);const je=()=>t(_,M(R({"data-element":"popover-container-content",role:"dialog","aria-labelledby":le,"aria-label":U,"aria-describedby":G,p:"16px 24px",$borderRadius:f,$popoverOffset:y,ref:ie,tabIndex:-1,disableAnimation:V||ce,zIndex:ge?1e4:2e3},C(Y)),{children:[t(O,{children:[m&&e(g,{id:le,"data-element":"popover-container-title",children:m}),q(he)]}),u]}));return t(v,M(R({onMouseDown:ye,hasFullWidth:X},D("popover-container",Y)),{children:[e("div",{ref:oe,children:T(ve)}),e(d,{nodeRef:ie,timeout:{exit:V?0:300},in:se,unmountOnExit:!0,onEntered:z?()=>Oe(!0):void 0,onExiting:z?()=>Oe(!1):void 0,children:e(x,{reference:oe,placement:"center"===h?"bottom":"right"===h?"bottom-start":"bottom-end",popoverStrategy:V||ce?"fixed":"absolute",middleware:pe,childRefOverride:ie,disableBackgroundUI:de,children:z?e(B.Provider,{value:{isAnimationComplete:_e},children:e(A,{wrapperRef:ie,isOpen:se,children:je()})}):t(r,{children:[e("div",{"data-element":"tab-guard-top",tabIndex:0,onFocus:e=>be("prev",e)}),je(),e("div",{"data-element":"tab-guard-bottom",tabIndex:0,onFocus:e=>be("next",e)})]})})})]}))}));export{Q as PopoverContainer,Q as default,$ as renderClose,W as renderOpen};