carbon-react/lib/components/dialog/dialog.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("./dialog.style.js"),l=require("../heading/heading.style.js"),a=require("../icon/icon.component.js"),o=require("../icon-button/icon-button.component.js"),n=require("../typography/typography.component.js"),i=require("../../__internal__/modal/modal.component.js"),s=require("../../__internal__/focus-trap/focus-trap.component.js"),d=require("../../__internal__/full-screen-heading/full-screen-heading.component.js"),c=require("../../__internal__/utils/helpers/guid/index.js"),u=require("../../__internal__/utils/helpers/tags/tags.js"),p=require("../../__internal__/utils/logger/index.js"),g=require("../../hooks/__internal__/useLocale/useLocale.js"),b=require("../../hooks/__internal__/useModalAria/useModalAria.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 h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},l=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),l.forEach((function(t){f(e,t,r[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 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}let j=!1,m=!1;const O=t.forwardRef(((f,O)=>{var{className:_,"data-component":x="dialog","data-element":v="dialog","data-role":w,children:C,open:P,height:S,size:k="medium",title:q,disableEscKey:D,subtitle:F,disableAutoFocus:R=!1,focusFirstElement:E,focusableSelectors:T,onCancel:B,showCloseIcon:I=!0,bespokeFocusTrap:M,disableClose:H,help:A,highlightVariant:z="default",role:K="dialog",contentPadding:L,greyBackground:N=!1,focusableContainers:V,topModalOverride:W,closeButtonDataProps:U,restoreFocusOnClose:$=!0,"aria-labelledby":Y,"aria-describedby":G,"aria-label":J,pagesStyling:Q,headerChildren:X,disableContentPadding:Z,contentRef:ee,fullscreen:te=!1}=f,re=function(e,t){if(null==e)return{};var r,l,a=function(e,t){if(null==e)return{};var r,l,a={},o=Object.keys(e);for(l=0;l<o.length;l++)r=o[l],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(l=0;l<o.length;l++)r=o[l],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(f,["className","data-component","data-element","data-role","children","open","height","size","title","disableEscKey","subtitle","disableAutoFocus","focusFirstElement","focusableSelectors","onCancel","showCloseIcon","bespokeFocusTrap","disableClose","help","highlightVariant","role","contentPadding","greyBackground","focusableContainers","topModalOverride","closeButtonDataProps","restoreFocusOnClose","aria-labelledby","aria-describedby","aria-label","pagesStyling","headerChildren","disableContentPadding","contentRef","fullscreen"]);const le=g.default(),ae=t.useRef(null),oe=t.useRef(null),ne=t.useRef(null),{current:ie}=t.useRef(c.default()),{current:se}=t.useRef(c.default()),de=b.default(ae);!j&&H&&(j=!0,p.default.deprecate("The disableClose prop in Dialog is deprecated and will soon be removed.")),!m&&Q&&(m=!0,p.default.deprecate("The pagesStyling prop in Dialog is deprecated and will soon be removed.")),t.useImperativeHandle(O,(()=>({focus(){var e;null===(e=ae.current)||void 0===e||e.focus()}})),[]);const ce=I&&B&&e.jsx(o.default,y(h({"aria-label":le.dialog.ariaLabels.close(),disabled:H,onClick:B},u.default("close",h({"data-element":"close"},U))),{children:e.jsx(a.default,{type:"close"})}));let ue=S;S&&S.match(/px$/)&&(ue=S.replace("px",""));const pe={"aria-describedby":F&&"string"==typeof F?se:G,"aria-label":J,"aria-labelledby":q&&"string"==typeof q?ie:Y};return e.jsx(i.default,y(h({className:_?`${_} carbon-dialog`:"carbon-dialog",disableClose:H,disableEscKey:D,onCancel:B,open:P,restoreFocusOnClose:$,topModalOverride:W},u.default("dialog",re),re),{children:e.jsx(s.default,{additionalWrapperRefs:V,autoFocus:!R,bespokeTrap:M,focusableSelectors:T,focusFirstElement:E,isOpen:P,wrapperRef:ae,children:e.jsx(r.DialogPositioner,{fullscreen:te,children:e.jsxs(r.StyledDialog,y(h(y(h({"aria-modal":!("dialog"!==K||!de)||void 0},pe),{backgroundColor:N?"var(--colorsUtilityMajor025)":"var(--colorsUtilityYang100)","data-component":x,"data-element":v,"data-role":w,dialogHeight:ue,fullscreen:te,highlightVariant:z,pagesStyling:Q,ref:ae,role:K,size:k,tabIndex:-1}),L),{children:[q||X?(()=>{const t=e.jsxs("div",{"data-element":"dialog-title-container",children:["string"==typeof q?e.jsx(e.Fragment,{children:A?e.jsxs("div",{"data-element":"dialog-title-help-wrapper",children:[e.jsx(n.Typography,{wordWrap:"break-word",wordBreak:"normal",variant:"h1",marginRight:"16px","data-element":"dialog-title",id:ie,children:q}),e.jsx(l.StyledHeaderHelp,{"data-element":"help",tooltipPosition:"right",children:A})]}):e.jsx(n.Typography,{wordWrap:"break-word",wordBreak:"normal",variant:"h1","data-element":"dialog-title",id:ie,children:q})}):q,F&&e.jsx("div",{style:{marginTop:"5px",width:"100%",flexBasis:"100%"},"data-element":"subtitle","data-role":"subtitle",id:se,children:F})]});return te?e.jsxs(d.default,{hasContent:!!q,hasCloseButton:I,ref:oe,children:[t,X]}):e.jsxs(r.StyledDialogTitle,{hasSubtitle:!!F,ref:ne,showCloseIcon:I,children:[t,X]})})():null,ce,e.jsx(r.StyledDialogContent,y(h({},L),{"data-role":"dialog-content",disableContentPadding:Z,fullscreen:te,hasHeader:void 0!==q,tabIndex:-1,ref:ee,children:C}))]}))})})}))}));exports.Dialog=O,exports.default=O;