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