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

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

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