abaabil.dialog
Advanced tools
Comparing version 0.1.18 to 0.1.19
@@ -1,1 +0,1 @@ | ||
import*as e from"react";import N from"react-dom";import D from"abaabil.icon";import F from"abaabil.button";const I=({icon:m,label:b,title:y,subtitle:p,children:g,dialogContainerClassName:v,overlayClassName:h,dialogClassName:x,buttonClassName:k,isOpen:r,setIsOpen:n,onOpen:s,onClose:f,...E})=>{const[a,u]=e.useState(!1),o=e.useRef(null),l=e.useRef(null),c=e.useRef(null),d=e.useRef(null);e.useEffect(()=>{r!==void 0&&u(r)},[r]),e.useEffect(()=>{if(!(typeof window>"u"))if(a){if(d.current=document.activeElement,o.current.focus(),document.body.style.overflow="hidden",o.current){const i=o.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');i.length>0&&(l.current=i[0],l.current.focus()),i.length>1&&(c.current=i[i.length-1]),o.current.addEventListener("keydown",t=>{if(t.key==="Tab"||t.keyCode===9){if(i.length===1){t.preventDefault();return}t.shiftKey?document.activeElement===l.current&&(t.preventDefault(),c.current.focus()):document.activeElement===c.current&&(t.preventDefault(),l.current.focus())}else(t.key==="Escape"||t.keyCode===27)&&(typeof f=="function"&&f(),typeof n=="function"&&n(!1),u(!1))})}}else d.current?.focus(),document.body.style.overflow=""},[a]);const w=a&&typeof document<"u"?e.createElement("div",{className:`fixed inset-0 z-dialog flex items-center justify-center p-4 ${v}`},e.createElement("button",{className:`fixed inset-0 bg-black/50 backdrop-blur-none transition-all hover:backdrop-blur-[1px] hover:bg-black/60 ${h}`,onClick:()=>{typeof f=="function"&&f(),typeof n=="function"&&n(!1),u(!1)}}),e.createElement("div",{ref:o,role:"dialog","aria-modal":"true","aria-labelledby":y||"dialog-title","aria-describedby":p||"dialog-subtitle",className:`max-w-3xl w-full min-h-20 relative overflow-hidden bg-floating text-on-floating rounded-default shadow-floating ${x}`,...E},e.createElement("button",{onClick:()=>{typeof f=="function"&&f(),u(!1)},className:"text-stable p-2 absolute top-1 right-1","aria-label":"Close dialog"},e.createElement(D,{id:"x",className:"w-8 h-8"})),g)):null;return e.createElement(e.Fragment,null,e.createElement(F,{icon:m,className:k,onClick:()=>{typeof s=="function"&&s(),typeof n=="function"&&n(!0),u(!0)}},b),typeof document<"u"?N.createPortal(w,document.body):null)};var j=I;export{j as default}; | ||
"use client";import*as e from"react";import N from"react-dom";import D from"abaabil.icon";import F from"abaabil.button";const I=({icon:m,label:b,title:y,subtitle:p,children:g,dialogContainerClassName:v,overlayClassName:h,dialogClassName:x,buttonClassName:k,isOpen:r,setIsOpen:n,onOpen:s,onClose:f,...E})=>{const[a,u]=e.useState(!1),o=e.useRef(null),l=e.useRef(null),c=e.useRef(null),d=e.useRef(null);e.useEffect(()=>{r!==void 0&&u(r)},[r]),e.useEffect(()=>{if(!(typeof window>"u"))if(a){if(d.current=document.activeElement,o.current.focus(),document.body.style.overflow="hidden",o.current){const i=o.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');i.length>0&&(l.current=i[0],l.current.focus()),i.length>1&&(c.current=i[i.length-1]),o.current.addEventListener("keydown",t=>{if(t.key==="Tab"||t.keyCode===9){if(i.length===1){t.preventDefault();return}t.shiftKey?document.activeElement===l.current&&(t.preventDefault(),c.current.focus()):document.activeElement===c.current&&(t.preventDefault(),l.current.focus())}else(t.key==="Escape"||t.keyCode===27)&&(typeof f=="function"&&f(),typeof n=="function"&&n(!1),u(!1))})}}else d.current?.focus(),document.body.style.overflow=""},[a]);const w=a&&typeof document<"u"?e.createElement("div",{className:`fixed inset-0 z-dialog flex items-center justify-center p-4 ${v}`},e.createElement("button",{className:`fixed inset-0 bg-black/50 backdrop-blur-none transition-all hover:backdrop-blur-[1px] hover:bg-black/60 ${h}`,onClick:()=>{typeof f=="function"&&f(),typeof n=="function"&&n(!1),u(!1)}}),e.createElement("div",{ref:o,role:"dialog","aria-modal":"true","aria-labelledby":y||"dialog-title","aria-describedby":p||"dialog-subtitle",className:`max-w-3xl w-full min-h-20 relative overflow-hidden bg-floating text-on-floating rounded-default shadow-floating ${x}`,...E},e.createElement("button",{onClick:()=>{typeof f=="function"&&f(),u(!1)},className:"text-stable p-2 absolute top-1 right-1","aria-label":"Close dialog"},e.createElement(D,{id:"x",className:"w-8 h-8"})),g)):null;return e.createElement(e.Fragment,null,e.createElement(F,{icon:m,className:k,onClick:()=>{typeof s=="function"&&s(),typeof n=="function"&&n(!0),u(!0)}},b),typeof document<"u"?N.createPortal(w,document.body):null)};var j=I;export{j as default}; |
{ | ||
"name": "abaabil.dialog", | ||
"author": "Abaabil", | ||
"version": "0.1.18", | ||
"version": "0.1.19", | ||
"main": "dist/index.esm.min.js", | ||
@@ -36,3 +36,3 @@ "files": [ | ||
], | ||
"gitHead": "253b3467ca5b73d223ff652f699cb2ed2ee7a281" | ||
"gitHead": "cc80fc203e85b50db2b6a2702a625fa9b6b0574e" | ||
} |
4389