@styleless-ui/react/Dialog/Dialog.js

Completely unstyled, headless and accessible React UI components.

"use strict";var __assign=this&&this.__assign||function(){return __assign=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});var jsx_runtime_1=require("react/jsx-runtime"),React=__importStar(require("react")),Portal_1=__importDefault(require("../Portal")),utils_1=require("../utils"),context_1=__importDefault(require("./context")),slots_1=require("./slots"),DialogBase=function(e,t){var r=e.open,o=e.children,n=e.id,i=e.role,s=e.keepMounted,l=void 0!==s&&s,u=e.focusAfterClosed,a=e.classes,c=e.onBackdropClick,_=__rest(e,["open","children","id","role","keepMounted","focusAfterClosed","classes","onBackdropClick"]),d=(0,utils_1.useIsMounted)(),f=(0,utils_1.useDeterministicId)(n,"styleless-ui__dialog"),p=React.useRef(null),v=(0,utils_1.usePreviousValue)(r),b=(0,utils_1.useScrollGuard)(),g=b.disablePageScroll,h=b.enablePageScroll;React.useEffect((function(){var e,t;r||"boolean"!=typeof v||r===v||("string"==typeof u?null===(e=document.querySelector(u))||void 0===e||e.focus():"object"==typeof u?null===(t=u.current)||void 0===t||t.focus():p.current?p.current.focus():document.body.focus())}),[r,v]),React.useEffect((function(){return function(){return h()}}),[]),(0,utils_1.useOnChange)(r,(function(e){d()&&(p.current=document.activeElement,"boolean"==typeof v&&(e?g():h()))}));var m="function"==typeof a?a({openState:r}):a,y=React.useMemo((function(){return{open:r,role:i}}),[i,r]);return l||!l&&r?(0,jsx_runtime_1.jsx)(Portal_1.default,{children:(0,jsx_runtime_1.jsx)("div",__assign({"data-slot":"Portal:Root",role:"presentation",tabIndex:-1,"aria-hidden":!r,style:{position:"absolute",top:0,left:0,right:0}},{children:(0,jsx_runtime_1.jsxs)("div",__assign({},_,{id:f,ref:t,className:null==m?void 0:m.root,"data-slot":slots_1.Root,"data-open":r?"":void 0},{children:[(0,jsx_runtime_1.jsx)("div",{"aria-hidden":"true","data-slot":slots_1.Backdrop,className:null==m?void 0:m.backdrop,onClick:c}),(0,jsx_runtime_1.jsx)(context_1.default.Provider,__assign({value:y},{children:o}))]}))}))}):null},Dialog=(0,utils_1.componentWithForwardedRef)(DialogBase);exports.default=Dialog;