@cripty2001/utils 0.0.224 → 0.0.225

package/dist/react-ui/index.d.ts

@@ -3,7 +3,7 @@ import BaseCopiable, { type CopiableProps as BaseCopiableProps } from './copiabl
 import BaseForm, { type FormComponentProps as BaseFormProps } from './form';
 import BaseInput, { type InputComponentProps as BaseInputProps } from './input';
 import BaseLoader, { type LoaderProps as BaseLoaderProps } from './loader';
-import BaseModal, { type ModalComponentProps as BaseModalProps } from './modal';
+import BaseModal, { type ModalActions as BaseModalActions, type ModalContent as BaseModalContent, type ModalComponentProps as BaseModalProps } from './modal';
 import BaseTable, { type TableProps as BaseTableProps } from './table';
 import BaseTextButton, { type TextButtonProps as BaseTextButtonProps } from './textButton';
-export { BaseButton, BaseButtonProps, BaseCopiable, BaseCopiableProps, BaseForm, BaseFormProps, BaseInput, BaseInputProps, BaseLoader, BaseLoaderProps, BaseModal, BaseModalProps, BaseTable, BaseTableProps, BaseTextButton, BaseTextButtonProps };
+export { BaseButton, BaseButtonProps, BaseCopiable, BaseCopiableProps, BaseForm, BaseFormProps, BaseInput, BaseInputProps, BaseLoader, BaseLoaderProps, BaseModal, BaseModalActions, BaseModalContent, BaseModalProps, BaseTable, BaseTableProps, BaseTextButton, BaseTextButtonProps };

package/dist/react-ui/modal.d.ts

@@ -1,7 +1,13 @@
+import { type ReactNode } from "react";
+export type ModalActions = {
+    dismiss: () => void;
+};
+export type ModalContent = ReactNode | ((actions: ModalActions) => ReactNode);
 export type ModalComponentProps = {
-    children: React.ReactNode;
+    children: ModalContent;
     open: boolean;
     setOpen: (open: boolean) => void;
-    animate: boolean;
+    animate?: boolean;
+    panelClassName?: string;
 };
-export default function ModalComponent(props: ModalComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ModalComponent({ children, open, setOpen, animate, panelClassName, }: ModalComponentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react-ui/modal.js

@@ -24,11 +24,23 @@ if (typeof document !== 'undefined') {
     }
 }
 let modalCount = 0;
-function ModalComponent(props) {
+function ModalComponent({ children, open, setOpen, animate = false, panelClassName = "", }) {
     const zIndex = (0, react_1.useRef)(1000 + modalCount++).current;
     const id = (0, react_1.useRef)(`modal-${zIndex}`).current;
-    if (!props.open)
+    const dismiss = (0, react_1.useCallback)(() => setOpen(false), [setOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                dismiss();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [open, dismiss]);
+    if (!open)
         return null;
+    const content = typeof children === "function" ? children({ dismiss }) : children;
     return ((0, jsx_runtime_1.jsx)("div", { id: id, style: {
             position: 'fixed',
             top: 0,
@@ -42,6 +54,6 @@ function ModalComponent(props) {
             padding: '1.5rem',
             height: '100vh',
             width: '100vw',
-            zIndex: zIndex
-        }, onClick: () => props.setOpen(false), children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '100%', animation: props.animate ? 'slide-up 0.3s ease-out' : '' }, onClick: (e) => e.stopPropagation(), children: props.children }) }));
+            zIndex: zIndex,
+        }, onClick: dismiss, children: (0, jsx_runtime_1.jsx)("div", { role: "dialog", "aria-modal": "true", className: panelClassName, style: { maxWidth: '100%', animation: animate ? 'slide-up 0.3s ease-out' : undefined }, onClick: (e) => e.stopPropagation(), children: content }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cripty2001/utils",
-  "version": "0.0.224",
+  "version": "0.0.225",
   "description": "Internal Set of utils. If you need them use them, otherwise go to the next package ;)",
   "homepage": "https://github.com/cripty2001/utils#readme",
   "bugs": {