react-pure-modal 3.0.5 → 3.0.8

package/README.md

@@ -16,6 +16,7 @@ React pure modal is a simplest way to create dialog on your site.
 - [x] Mobile-friendly safe areas
 - [x] Smooth animations
 - [ ] Mobile-friendly gestures
+- [ ] Passing animation promise to onClose
 
 ## Demo
 
@@ -90,6 +91,7 @@ const portalRoot = document.getElementById("modal-root");
 
 ## Options
 
+- `id` (string) - optional identifier for the modal container. The modal element id is rendered as `pure-modal-${id}`; when omitted, it uses `useId()` for a unique suffix.
 - `isOpen` (boolean) - controls whether the modal is rendered; defaults to `false`.
 - `onClose` (VoidFunction) - called when the user clicks the close button, presses ESC, or (optionally) clicks the backdrop; set `isOpen` to `false` inside it. Any return value is ignored.
 - `closeOnBackdropClick` (boolean) - if `true`, clicking the backdrop calls `onClose` (default is `false`).
@@ -104,14 +106,22 @@ const portalRoot = document.getElementById("modal-root");
 
 ## CSS Variables
 
-All variables can be provided through the `style` prop (e.g. `style={{ "--radius": "16px" }}`). Close button variables apply when `Modal.Close` is rendered.
+All variables can be provided through the `style` prop (e.g. `style={{ "--radius-top-left": "16px" }}`). Close button variables apply when `Modal.Close` is rendered.
 
-- `--radius` - border radius of the modal container (mobile uses `12px 12px 0 0`).
+- `--radius-top-left` - border radius for the modal's top-left corner.
+- `--radius-top-right` - border radius for the modal's top-right corner.
+- `--radius-bottom-right` - border radius for the modal's bottom-right corner.
+- `--radius-bottom-left` - border radius for the modal's bottom-left corner.
+- `--radius` - shorthand border radius for all corners (used as the fallback for the four values above).
 - `--aspect-ratio` - forced aspect ratio for the modal grid.
 - `--backdrop-filter` - value for the backdrop `backdrop-filter` property.
 - `--backdrop-color` - background color of the overlay.
+- `--backdrop-justify-content` - vertical alignment of the modal inside the backdrop (`center`, `flex-end`, etc).
 - `--box-shadow` - shadow applied to the modal panel.
+- `--modal-animation` - animation shorthand for the modal panel (defaults to `panelSoftPop`).
 - `--width` - base width for the modal panel.
+- `--max-width` - min-width for the modal panel.
+- `--min-width` - max-width for the modal panel.
 - `--max-height` - maximum height of the modal.
 - `--background` - modal surface background.
 - `--background-panels` - background for header and footer panels.

package/dist/index.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as r,useCallback as o,useContext as t,useEffect as n,useId as a,useLayoutEffect as d,useMemo as i,useRef as l}from"react";import{createPortal as s}from"react-dom";var c={"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/compounds/Modal.module.css":function(e,r,o){o.d(r,{A:()=>i});var t=o("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/noSourceMaps.js"),n=o.n(t),a=o("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/api.js"),d=o.n(a)()(n());d.push([e.id,"body:has(.pureModalBackdrop-RW7tAF){overflow:hidden}.pureModalBackdrop-RW7tAF{--radius:12px;--aspect-ratio:auto;--backdrop-color:#0006;--box-shadow:0px 1px 2px #00000024,0px 8px 20px #0000002e,0px 20px 48px #00000038;--max-height:90dvh;--width:clamp(320px,60dvw,600px);--background:white;--background-panels:#ffffffe6;--top-content-padding:16px;--bottom-content-padding:16px;--top-footer-padding:16px;--bottom-footer-padding:16px;--left-padding:24px;--right-padding:24px;--header-background:var(--background-panels);--header-right-padding:var(--right-padding);--header-left-padding:var(--left-padding);--footer-background:var(--background-panels);--z-index:1041;--backdrop-filter:blur(3px);--top-header-padding:16px;--bottom-header-padding:16px;--dividers-color:silver;--dividers-border:1px solid var(--dividers-color);--close-button-background:var(--background-panels,white);--close-button-size:30px;--close-button-container-transform:translate(calc(0px - var(--radius)),var(--radius));--close-button-place-self:start end;--close-button-border:var(--dividers-border);--close-button-hover-transform:scale(1.05);--close-button-grid-row:1;backdrop-filter:var(--backdrop-filter);z-index:var(--z-index);background-color:var(--backdrop-color);flex-direction:column;justify-content:center;align-items:center;animation:.26s cubic-bezier(.16,.84,.44,1) both backdropFadeSmooth-ZnEuSQ;display:flex;position:fixed;inset:0;overflow:auto}@keyframes backdropFadeSmooth-ZnEuSQ{0%{opacity:0;-webkit-backdrop-filter:blur();background-color:#0000}to{opacity:1;backdrop-filter:var(--backdrop-filter);background-color:var(--backdrop-color)}}.pureModal-Hr1gWI{z-index:calc(var(--z-index) + 1);box-shadow:var(--box-shadow);border-radius:var(--radius);max-height:var(--max-height);width:var(--width);aspect-ratio:var(--aspect-ratio);grid-template-rows:auto minmax(0,1fr) minmax(0,max-content);grid-template-columns:1fr;grid-auto-flow:row;display:grid;overflow:visible;&:has(>.pureModalHeader-DahjVw)>.pureModalContent-t7nwPr{grid-row:2}&:not(:has(>.pureModalHeader-DahjVw))>.pureModalContent-t7nwPr{border-radius:var(--radius)var(--radius)0 0}&:not(:has(>.pureModalFooter-hj8jgh))>.pureModalContent-t7nwPr{border-radius:0 0 var(--radius)var(--radius)}&:not(:has(>.pureModalHeader-DahjVw)):not(:has(>.pureModalFooter-hj8jgh))>.pureModalContent-t7nwPr{border-radius:var(--radius)}animation:.24s cubic-bezier(.18,.77,.42,1) both panelSoftPop-JNSB6U}@keyframes panelSoftPop-JNSB6U{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.pureModalHeader-DahjVw{padding:var(--top-header-padding)var(--header-right-padding)var(--bottom-header-padding)var(--header-left-padding);border-bottom:var(--dividers-border);border-radius:var(--radius)var(--radius)0 0;background:var(--header-background);width:var(--width);box-sizing:border-box;text-align:left;grid-area:1/1;justify-content:flex-start;align-items:center;display:flex}.pureModalHeader-DahjVw[data-align=center]{text-align:center;justify-content:center}.pureModalHeader-DahjVw[data-align=end]{text-align:right;justify-content:flex-end}.pureModalContent-t7nwPr{padding:var(--top-content-padding)var(--right-padding)var(--bottom-content-padding)var(--left-padding);background:var(--background);box-sizing:border-box;overscroll-behavior:contain;width:var(--width);grid-area:1/1/2/-1;min-block-size:0;overflow:auto}.pureModalFooter-hj8jgh{padding:var(--top-footer-padding)var(--right-padding)calc(var(--bottom-footer-padding) + env(safe-area-inset-bottom))var(--left-padding);border-top:var(--dividers-border);border-radius:0 0 var(--radius)var(--radius);background:var(--footer-background);text-align:left;width:var(--width);box-sizing:border-box;grid-area:3/1/auto/-1;display:block}.pureModalFooter-hj8jgh[data-align=center]{text-align:center;justify-content:center}.pureModalFooter-hj8jgh[data-align=end]{text-align:right;justify-content:flex-end}@media (width<=600px){.pureModalBackdrop-RW7tAF{justify-content:end}.pureModalFooter-hj8jgh{border-radius:0}.pureModal-Hr1gWI{--aspect-ratio:auto;animation:.28s cubic-bezier(.25,.85,.35,1) panelSheetIn-loLXeB}@keyframes panelSheetIn-loLXeB{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}.pureCloseButton-Ac2K32{grid-row:var(--close-button-grid-row,1);place-self:var(--close-button-place-self,start end);transform:var(--close-button-container-transform,none);z-index:3;grid-column:1/-1;align-items:center;display:flex}.pureCloseButtonIcon-m_tk65{border-radius:calc(var(--radius)*2);font-weight:700;font-size:calc(var(--close-button-size)/2);line-height:calc(var(--close-button-size) - 1px);height:var(--close-button-size);color:var(--dividers-color);width:var(--close-button-size);cursor:pointer;text-align:center;aspect-ratio:1;border:var(--close-button-border);background:var(--close-button-background);padding:0;transition:all .1s ease-in-out;&:hover{transform:var(--close-button-hover-transform)}}",""]),d.locals={pureModalBackdrop:"pureModalBackdrop-RW7tAF",backdropFadeSmooth:"backdropFadeSmooth-ZnEuSQ",pureModal:"pureModal-Hr1gWI",panelSoftPop:"panelSoftPop-JNSB6U",pureModalHeader:"pureModalHeader-DahjVw",pureModalContent:"pureModalContent-t7nwPr",pureModalFooter:"pureModalFooter-hj8jgh",panelSheetIn:"panelSheetIn-loLXeB",pureCloseButton:"pureCloseButton-Ac2K32",pureCloseButtonIcon:"pureCloseButtonIcon-m_tk65"};let i=d},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/api.js":function(e){e.exports=function(e){var r=[];return r.toString=function(){return this.map(function(r){var o="",t=void 0!==r[5];return r[4]&&(o+="@supports (".concat(r[4],") {")),r[2]&&(o+="@media ".concat(r[2]," {")),t&&(o+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),o+=e(r),t&&(o+="}"),r[2]&&(o+="}"),r[4]&&(o+="}"),o}).join("")},r.i=function(e,o,t,n,a){"string"==typeof e&&(e=[[null,e,void 0]]);var d={};if(t)for(var i=0;i<this.length;i++){var l=this[i][0];null!=l&&(d[l]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);t&&d[c[0]]||(void 0!==a&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=a),o&&(c[2]&&(c[1]="@media ".concat(c[2]," {").concat(c[1],"}")),c[2]=o),n&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=n):c[4]="".concat(n)),r.push(c))}},r}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/noSourceMaps.js":function(e){e.exports=function(e){return e[1]}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js":function(e){var r=[];function o(e){for(var o=-1,t=0;t<r.length;t++)if(r[t].identifier===e){o=t;break}return o}function t(e,t){for(var n={},a=[],d=0;d<e.length;d++){var i=e[d],l=t.base?i[0]+t.base:i[0],s=n[l]||0,c="".concat(l," ").concat(s);n[l]=s+1;var u=o(c),p={css:i[1],media:i[2],sourceMap:i[3],supports:i[4],layer:i[5]};if(-1!==u)r[u].references++,r[u].updater(p);else{var m=function(e,r){var o=r.domAPI(r);return o.update(e),function(r){r?(r.css!==e.css||r.media!==e.media||r.sourceMap!==e.sourceMap||r.supports!==e.supports||r.layer!==e.layer)&&o.update(e=r):o.remove()}}(p,t);t.byIndex=d,r.splice(d,0,{identifier:c,updater:m,references:1})}a.push(c)}return a}e.exports=function(e,n){var a=t(e=e||[],n=n||{});return function(e){e=e||[];for(var d=0;d<a.length;d++){var i=o(a[d]);r[i].references--}for(var l=t(e,n),s=0;s<a.length;s++){var c=o(a[s]);0===r[c].references&&(r[c].updater(),r.splice(c,1))}a=l}}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertBySelector.js":function(e){var r={};e.exports=function(e,o){var t=function(e){if(void 0===r[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}r[e]=o}return r[e]}(e);if(!t)throw Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(o)}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertStyleElement.js":function(e){e.exports=function(e){var r=document.createElement("style");return e.setAttributes(r,e.attributes),e.insert(r,e.options),r}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/setAttributesWithoutAttributes.js":function(e,r,o){e.exports=function(e){var r=o.nc;r&&e.setAttribute("nonce",r)}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js":function(e){e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var r=e.insertStyleElement(e);return{update:function(o){var t,n,a;t="",o.supports&&(t+="@supports (".concat(o.supports,") {")),o.media&&(t+="@media ".concat(o.media," {")),(n=void 0!==o.layer)&&(t+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),t+=o.css,n&&(t+="}"),o.media&&(t+="}"),o.supports&&(t+="}"),(a=o.sourceMap)&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(t,r,e.options)},remove:function(){var e;null===(e=r).parentNode||e.parentNode.removeChild(e)}}}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleTagTransform.js":function(e){e.exports=function(e,r){if(r.styleSheet)r.styleSheet.cssText=e;else{for(;r.firstChild;)r.removeChild(r.firstChild);r.appendChild(document.createTextNode(e))}}}},u={};function p(e){var r=u[e];if(void 0!==r)return r.exports;var o=u[e]={id:e,exports:{}};return c[e](o,o.exports,p),o.exports}p.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return p.d(r,{a:r}),r},p.d=(e,r)=>{for(var o in r)p.o(r,o)&&!p.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},p.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),p.nc=void 0;var m=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js"),f=p.n(m),b=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js"),v=p.n(b),h=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertBySelector.js"),g=p.n(h),x=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/setAttributesWithoutAttributes.js"),y=p.n(x),k=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertStyleElement.js"),M=p.n(k),j=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleTagTransform.js"),w=p.n(j),S=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/compounds/Modal.module.css"),_={};_.styleTagTransform=w(),_.setAttributes=y(),_.insert=g().bind(null,"head"),_.domAPI=v(),_.insertStyleElement=M(),f()(S.A,_);let C=S.A&&S.A.locals?S.A.locals:void 0,B=r(void 0);function A(){return t(B)??{}}function I(e){if(!e)return -99999;let r=Number.parseInt(getComputedStyle(e).zIndex||"0",10);return Number.isNaN(r)?-99999:r}function z(e){return Math.max(Math.max(...Array.from(document.querySelectorAll(e)).map(e=>I(e))),1)}function N({children:r}){let{isOpen:t,onClose:a,style:i,closeOnBackdropClick:s}=A(),c=l(null),u=o(e=>{if(function(e){if(!e)return!1;let r=e.tagName.toLowerCase();return"input"===r||"textarea"===r||"select"===r||!!e.isContentEditable}(document.activeElement))return;let r=I(c.current),o=z(`.${C.pureModalBackdrop}`);return!!a&&"Escape"===e.key&&r===o&&(a(),!0)},[a]);return n(()=>{if(t)return document.addEventListener("keydown",u),()=>{document.removeEventListener("keydown",u)}},[t,u]),d(()=>{let e=i?.["--z-index"],r="number"==typeof e?e:"string"==typeof e?Number.parseFloat(e):NaN,o=Number.isFinite(r)?r:z(`.${C.pureModalBackdrop}`);c.current&&(c.current.style.zIndex=String(o+1))},[i?.["--z-index"]]),e("div",{ref:c,className:C.pureModalBackdrop,onMouseDown:e=>{if(s){if(e){if(!e.target.classList.contains(C.pureModalBackdrop))return;e.stopPropagation(),e.preventDefault()}a?.()}},"aria-modal":"true",role:"dialog",style:i,children:r})}function F(r){let o=a(),t=i(()=>({isOpen:!!r.isOpen,onClose:r.onClose,closeOnBackdropClick:!!r.closeOnBackdropClick,style:r.style}),[r.isOpen,r.onClose,r.closeOnBackdropClick,r.style]);if(!t.isOpen)return null;let n=e(B.Provider,{value:t,children:e(N,{children:e("div",{id:`pure-modal-${o}`,className:C.pureModal,children:r.children})})});return void 0!==r.portal?"undefined"!=typeof document&&r.portal?s(n,r.portal):null:n}F.Footer=function({align:r,children:o}){return e("div",{className:C.pureModalFooter,"data-align":r,children:o})},F.Header=function({align:r,children:o}){return e("div",{className:C.pureModalHeader,"data-align":r,children:o})},F.Content=function({children:r}){return e("div",{className:C.pureModalContent,children:r})},F.Close=function({children:r}){let{onClose:o}=A();return e("div",{className:C.pureCloseButton,children:r||e("button",{type:"button",onClick:o,className:C.pureCloseButtonIcon,children:"✕"})})};let P=F;export{B as ModalContext,P as default,A as useModalContext};
+import{jsx as e}from"react/jsx-runtime";import{createContext as r,useCallback as o,useContext as t,useEffect as a,useId as n,useLayoutEffect as d,useMemo as i,useRef as l}from"react";import{createPortal as s}from"react-dom";var u={"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/compounds/Modal.module.css":function(e,r,o){o.d(r,{A:()=>i});var t=o("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/noSourceMaps.js"),a=o.n(t),n=o("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/api.js"),d=o.n(n)()(a());d.push([e.id,"body:has(.pureModalBackdrop-RW7tAF){overflow:hidden}.pureModalBackdrop-RW7tAF{--radius:12px;--radius-top-left:var(--radius);--radius-top-right:var(--radius);--radius-bottom-left:var(--radius);--radius-bottom-right:var(--radius);--aspect-ratio:auto;--backdrop-color:#0006;--box-shadow:0px 1px 2px #00000024,0px 8px 20px #0000002e,0px 20px 48px #00000038;--max-height:90dvh;--min-width:280px;--max-width:95dvw;--width:auto;--background:white;--background-panels:#ffffffe6;--top-content-padding:16px;--bottom-content-padding:16px;--top-footer-padding:16px;--bottom-footer-padding:16px;--left-padding:24px;--right-padding:24px;--header-background:var(--background-panels);--header-right-padding:var(--right-padding);--header-left-padding:var(--left-padding);--footer-background:var(--background-panels);--backdrop-justify-content:center;--modal-animation:panelSoftPop-JNSB6U .24s cubic-bezier(.18,.77,.42,1)both;--z-index:1041;--backdrop-filter:blur(3px);--top-header-padding:16px;--bottom-header-padding:16px;--dividers-color:silver;--dividers-border:1px solid var(--dividers-color);--close-button-background:var(--background-panels,white);--close-button-size:30px;--close-button-container-transform:translate(calc(0px - var(--radius-top-right)),var(--radius-top-right));--close-button-place-self:start end;--close-button-border:var(--dividers-border);--close-button-hover-transform:scale(1.05);--close-button-grid-row:1;backdrop-filter:var(--backdrop-filter);z-index:var(--z-index);justify-content:var(--backdrop-justify-content);background-color:var(--backdrop-color);flex-direction:column;align-items:center;animation:.26s cubic-bezier(.16,.84,.44,1) both backdropFadeSmooth-ZnEuSQ;display:flex;position:fixed;inset:0;overflow:auto}@keyframes backdropFadeSmooth-ZnEuSQ{0%{opacity:0;-webkit-backdrop-filter:blur();background-color:#0000}to{opacity:1;backdrop-filter:var(--backdrop-filter);background-color:var(--backdrop-color)}}.pureModal-Hr1gWI{z-index:calc(var(--z-index) + 1);box-shadow:var(--box-shadow);border-radius:var(--radius-top-left)var(--radius-top-right)var(--radius-bottom-right)var(--radius-bottom-left);max-height:var(--max-height);min-width:var(--min-width);max-width:var(--max-width);width:var(--width);aspect-ratio:var(--aspect-ratio);grid-template-rows:auto minmax(0,1fr) minmax(0,max-content);grid-template-columns:1fr;grid-auto-flow:row;display:grid;overflow:visible;&:has(>.pureModalHeader-DahjVw)>.pureModalContent-t7nwPr{grid-row:2}&:not(:has(>.pureModalHeader-DahjVw))>.pureModalContent-t7nwPr{border-radius:var(--radius-top-left)var(--radius-top-right)0 0}&:not(:has(>.pureModalFooter-hj8jgh))>.pureModalContent-t7nwPr{border-radius:0 0 var(--radius-bottom-right)var(--radius-bottom-left)}&:not(:has(>.pureModalHeader-DahjVw)):not(:has(>.pureModalFooter-hj8jgh))>.pureModalContent-t7nwPr{border-radius:var(--radius-top-left)var(--radius-top-right)var(--radius-bottom-right)var(--radius-bottom-left)}animation:var(--modal-animation)}@keyframes panelSoftPop-JNSB6U{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.pureModalHeader-DahjVw{padding:var(--top-header-padding)var(--header-right-padding)var(--bottom-header-padding)var(--header-left-padding);border-bottom:var(--dividers-border);border-radius:var(--radius-top-left)var(--radius-top-right)0 0;background:var(--header-background);box-sizing:border-box;text-align:left;grid-area:1/1;justify-content:flex-start;align-items:center;width:100%;display:flex}.pureModalHeader-DahjVw[data-align=center]{text-align:center;justify-content:center}.pureModalHeader-DahjVw[data-align=end]{text-align:right;justify-content:flex-end}.pureModalContent-t7nwPr{padding:var(--top-content-padding)var(--right-padding)var(--bottom-content-padding)var(--left-padding);background:var(--background);box-sizing:border-box;overscroll-behavior:contain;width:100%;grid-area:1/1/2/-1;min-block-size:0;overflow:auto}.pureModalFooter-hj8jgh{padding:var(--top-footer-padding)var(--right-padding)calc(var(--bottom-footer-padding) + env(safe-area-inset-bottom))var(--left-padding);border-top:var(--dividers-border);border-radius:0 0 var(--radius-bottom-right)var(--radius-bottom-left);background:var(--footer-background);text-align:left;box-sizing:border-box;grid-area:3/1/auto/-1;width:100%;display:block}.pureModalFooter-hj8jgh[data-align=center]{text-align:center;justify-content:center}.pureModalFooter-hj8jgh[data-align=end]{text-align:right;justify-content:flex-end}.pureCloseButton-Ac2K32{grid-row:var(--close-button-grid-row,1);place-self:var(--close-button-place-self,start end);transform:var(--close-button-container-transform,none);z-index:3;grid-column:1/-1;align-items:center;display:flex}.pureCloseButtonIcon-m_tk65{border-radius:calc(var(--radius-top-right)*2);font-weight:700;font-size:calc(var(--close-button-size)/2);line-height:calc(var(--close-button-size) - 1px);height:var(--close-button-size);color:var(--dividers-color);width:var(--close-button-size);cursor:pointer;text-align:center;aspect-ratio:1;border:var(--close-button-border);background:var(--close-button-background);padding:0;transition:all .1s ease-in-out;&:hover{transform:var(--close-button-hover-transform)}}",""]),d.locals={pureModalBackdrop:"pureModalBackdrop-RW7tAF",panelSoftPop:"panelSoftPop-JNSB6U",backdropFadeSmooth:"backdropFadeSmooth-ZnEuSQ",pureModal:"pureModal-Hr1gWI",pureModalHeader:"pureModalHeader-DahjVw",pureModalContent:"pureModalContent-t7nwPr",pureModalFooter:"pureModalFooter-hj8jgh",pureCloseButton:"pureCloseButton-Ac2K32",pureCloseButtonIcon:"pureCloseButtonIcon-m_tk65"};let i=d},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/api.js":function(e){e.exports=function(e){var r=[];return r.toString=function(){return this.map(function(r){var o="",t=void 0!==r[5];return r[4]&&(o+="@supports (".concat(r[4],") {")),r[2]&&(o+="@media ".concat(r[2]," {")),t&&(o+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),o+=e(r),t&&(o+="}"),r[2]&&(o+="}"),r[4]&&(o+="}"),o}).join("")},r.i=function(e,o,t,a,n){"string"==typeof e&&(e=[[null,e,void 0]]);var d={};if(t)for(var i=0;i<this.length;i++){var l=this[i][0];null!=l&&(d[l]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);t&&d[u[0]]||(void 0!==n&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=n),o&&(u[2]&&(u[1]="@media ".concat(u[2]," {").concat(u[1],"}")),u[2]=o),a&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=a):u[4]="".concat(a)),r.push(u))}},r}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/noSourceMaps.js":function(e){e.exports=function(e){return e[1]}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js":function(e){var r=[];function o(e){for(var o=-1,t=0;t<r.length;t++)if(r[t].identifier===e){o=t;break}return o}function t(e,t){for(var a={},n=[],d=0;d<e.length;d++){var i=e[d],l=t.base?i[0]+t.base:i[0],s=a[l]||0,u="".concat(l," ").concat(s);a[l]=s+1;var c=o(u),p={css:i[1],media:i[2],sourceMap:i[3],supports:i[4],layer:i[5]};if(-1!==c)r[c].references++,r[c].updater(p);else{var m=function(e,r){var o=r.domAPI(r);return o.update(e),function(r){r?(r.css!==e.css||r.media!==e.media||r.sourceMap!==e.sourceMap||r.supports!==e.supports||r.layer!==e.layer)&&o.update(e=r):o.remove()}}(p,t);t.byIndex=d,r.splice(d,0,{identifier:u,updater:m,references:1})}n.push(u)}return n}e.exports=function(e,a){var n=t(e=e||[],a=a||{});return function(e){e=e||[];for(var d=0;d<n.length;d++){var i=o(n[d]);r[i].references--}for(var l=t(e,a),s=0;s<n.length;s++){var u=o(n[s]);0===r[u].references&&(r[u].updater(),r.splice(u,1))}n=l}}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertBySelector.js":function(e){var r={};e.exports=function(e,o){var t=function(e){if(void 0===r[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}r[e]=o}return r[e]}(e);if(!t)throw Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(o)}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertStyleElement.js":function(e){e.exports=function(e){var r=document.createElement("style");return e.setAttributes(r,e.attributes),e.insert(r,e.options),r}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/setAttributesWithoutAttributes.js":function(e,r,o){e.exports=function(e){var r=o.nc;r&&e.setAttribute("nonce",r)}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js":function(e){e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var r=e.insertStyleElement(e);return{update:function(o){var t,a,n;t="",o.supports&&(t+="@supports (".concat(o.supports,") {")),o.media&&(t+="@media ".concat(o.media," {")),(a=void 0!==o.layer)&&(t+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),t+=o.css,a&&(t+="}"),o.media&&(t+="}"),o.supports&&(t+="}"),(n=o.sourceMap)&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(n))))," */")),e.styleTagTransform(t,r,e.options)},remove:function(){var e;null===(e=r).parentNode||e.parentNode.removeChild(e)}}}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleTagTransform.js":function(e){e.exports=function(e,r){if(r.styleSheet)r.styleSheet.cssText=e;else{for(;r.firstChild;)r.removeChild(r.firstChild);r.appendChild(document.createTextNode(e))}}}},c={};function p(e){var r=c[e];if(void 0!==r)return r.exports;var o=c[e]={id:e,exports:{}};return u[e](o,o.exports,p),o.exports}p.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return p.d(r,{a:r}),r},p.d=(e,r)=>{for(var o in r)p.o(r,o)&&!p.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},p.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),p.nc=void 0;var m=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js"),f=p.n(m),b=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js"),v=p.n(b),g=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertBySelector.js"),h=p.n(g),x=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/setAttributesWithoutAttributes.js"),y=p.n(x),k=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertStyleElement.js"),w=p.n(k),M=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleTagTransform.js"),j=p.n(M),_=p("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/compounds/Modal.module.css"),C={};C.styleTagTransform=j(),C.setAttributes=y(),C.insert=h().bind(null,"head"),C.domAPI=v(),C.insertStyleElement=w(),f()(_.A,C);let S=_.A&&_.A.locals?_.A.locals:void 0,B=r(void 0);function A(){return t(B)??{}}function N(e){if(!e)return -99999;let r=Number.parseInt(getComputedStyle(e).zIndex||"0",10);return Number.isNaN(r)?-99999:r}function z(e){return Math.max(Math.max(...Array.from(document.querySelectorAll(e)).map(e=>N(e))),1)}function F({children:r}){let{isOpen:t,onClose:n,style:i,closeOnBackdropClick:s}=A(),u=l(null),c=o(e=>{if(function(e){if(!e)return!1;let r=e.tagName.toLowerCase();return"input"===r||"textarea"===r||"select"===r||!!e.isContentEditable}(document.activeElement))return;let r=N(u.current),o=z(`.${S.pureModalBackdrop}`);return!!n&&"Escape"===e.key&&r===o&&(n(),!0)},[n]);return a(()=>{if(t)return document.addEventListener("keydown",c),()=>{document.removeEventListener("keydown",c)}},[t,c]),d(()=>{let e=i?.["--z-index"],r="number"==typeof e?e:"string"==typeof e?Number.parseFloat(e):NaN,o=Number.isFinite(r)?r:z(`.${S.pureModalBackdrop}`);u.current&&(u.current.style.zIndex=String(o+1))},[i?.["--z-index"]]),e("div",{ref:u,className:S.pureModalBackdrop,onMouseDown:e=>{if(s){if(e){if(!e.target.classList.contains(S.pureModalBackdrop))return;e.stopPropagation(),e.preventDefault()}n?.()}},"aria-modal":"true",role:"dialog",style:i,children:r})}function I(r){let o=n(),t=r.id??o,a=i(()=>({isOpen:!!r.isOpen,onClose:r.onClose,closeOnBackdropClick:!!r.closeOnBackdropClick,style:r.style}),[r.isOpen,r.onClose,r.closeOnBackdropClick,r.style]);if(!a.isOpen)return null;let d=e(B.Provider,{value:a,children:e(F,{children:e("div",{id:`pure-modal-${t}`,className:S.pureModal,children:r.children})})});return void 0!==r.portal?"undefined"!=typeof document&&r.portal?s(d,r.portal):null:d}I.Footer=function({align:r,children:o}){return e("div",{className:S.pureModalFooter,"data-align":r,children:o})},I.Header=function({align:r,children:o}){return e("div",{className:S.pureModalHeader,"data-align":r,children:o})},I.Content=function({children:r}){return e("div",{className:S.pureModalContent,children:r})},I.Close=function({children:r}){let{onClose:o}=A();return e("div",{className:S.pureCloseButton,children:r||e("button",{type:"button",onClick:o,className:S.pureCloseButtonIcon,children:"✕"})})};let P=I;export{B as ModalContext,P as default,A as useModalContext};

package/dist/src/compounds/Modal.types.d.ts

@@ -5,12 +5,13 @@ import type { ModalContent } from "./Content";
 import type { ModalFooter } from "./Footer";
 import type { ModalHeader } from "./Header";
 export type ModalCompoundElement = ReactElement<typeof ModalBackdrop> | ReactElement<typeof ModalClose> | ReactElement<typeof ModalHeader> | ReactElement<typeof ModalContent> | ReactElement<typeof ModalFooter>;
-export type ModalChildren = ModalCompoundElement | ModalCompoundElement[] | null;
+export type ModalChildren = ModalCompoundElement | Array<ModalCompoundElement | null> | null;
 export type ModalSectionAlign = "start" | "center" | "end";
-export type ModalCssVariable = "--radius" | "--aspect-ratio" | "--backdrop-color" | "--box-shadow" | "--width" | "--max-height" | "--background" | "--background-panels" | "--header-background" | "--footer-background" | "--z-index" | "--top-content-padding" | "--bottom-content-padding" | "--top-header-padding" | "--bottom-header-padding" | "--header-left-padding" | "--header-right-padding" | "--top-footer-padding" | "--bottom-footer-padding" | "--left-padding" | "--right-padding" | "--close-button-background" | "--close-button-border" | "--close-button-size" | "--close-button-container-transform" | "--close-button-place-self" | "--close-button-grid-row" | "--close-button-hover-transform" | "--dividers-color" | "--dividers-border" | "--backdrop-filter";
+export type ModalCssVariable = "--radius" | "--radius-top-left" | "--radius-top-right" | "--radius-bottom-right" | "--radius-bottom-left" | "--aspect-ratio" | "--backdrop-color" | "--box-shadow" | "--width" | "--max-width" | "--min-width" | "--max-height" | "--background" | "--background-panels" | "--header-background" | "--footer-background" | "--backdrop-justify-content" | "--modal-animation" | "--z-index" | "--top-content-padding" | "--bottom-content-padding" | "--top-header-padding" | "--bottom-header-padding" | "--header-left-padding" | "--header-right-padding" | "--top-footer-padding" | "--bottom-footer-padding" | "--left-padding" | "--right-padding" | "--close-button-background" | "--close-button-border" | "--close-button-size" | "--close-button-container-transform" | "--close-button-place-self" | "--close-button-grid-row" | "--close-button-hover-transform" | "--dividers-color" | "--dividers-border" | "--backdrop-filter";
 export type ModalStyle = Partial<Record<ModalCssVariable, string | number>>;
 export type ModalProps = {
     children: ModalChildren;
+    id?: string;
     isOpen?: boolean;
     style?: ModalStyle;
     onClose?: VoidFunction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pure-modal",
-  "version": "3.0.5",
+  "version": "3.0.8",
   "description": "React modal",
   "type": "module",
   "exports": {
@@ -36,6 +36,7 @@
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build --watch",
+    "lint": "biome lint .",
     "typecheck": "tsc -p tsconfig.types.json",
     "storybook": "npx storybook dev",
     "storybook:build": "storybook build -o storybook-static",