@parallelworks/ui 0.4.0 → 0.5.0

package/dist/chunks/Modal-sOUEwebV.js

@@ -1,121 +0,0 @@
-import cx from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-//#region src/components/Modal.tsx
-var FOCUSABLE = "a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])";
-var noop = () => {};
-var actionClasses = {
-	destructive: "bg-red-600 text-white hover:bg-red-700",
-	warning: "bg-yellow-500 text-white hover:bg-yellow-700",
-	info: "bg-(--theme-element,#06354f) text-(--theme-element-text,#ffffff) hover:opacity-90"
-};
-function Modal({ isOpen, close, cancelAction = noop, children, title = "", text = "", actionLabel = "", cancelLabel = "Cancel", action, closeAfterAction = true, type = "destructive", className = "", showButtons = true, disableAction = false, loading = false, padding = true, fitWidth = false, dimScreen = true, ignoreOutsideClickClose = false }) {
-	const [pending, setPending] = useState(false);
-	const actionFiredRef = useRef(false);
-	const panelRef = useRef(null);
-	const titleId = useId();
-	const inFlight = loading || pending;
-	const inFlightRef = useRef(inFlight);
-	inFlightRef.current = inFlight;
-	useEffect(() => {
-		if (isOpen) actionFiredRef.current = false;
-	}, [isOpen]);
-	useEffect(() => {
-		if (!isOpen) return;
-		const previouslyFocused = document.activeElement;
-		const previousOverflow = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		panelRef.current?.focus();
-		return () => {
-			document.body.style.overflow = previousOverflow;
-			previouslyFocused?.focus?.();
-		};
-	}, [isOpen]);
-	const trapFocus = useCallback((e) => {
-		if (e.key !== "Tab" || !panelRef.current) return;
-		const focusable = panelRef.current.querySelectorAll(FOCUSABLE);
-		if (focusable.length === 0) {
-			e.preventDefault();
-			return;
-		}
-		const first = focusable[0];
-		const last = focusable[focusable.length - 1];
-		if (e.shiftKey && document.activeElement === first) {
-			e.preventDefault();
-			last.focus();
-		} else if (!e.shiftKey && document.activeElement === last) {
-			e.preventDefault();
-			first.focus();
-		}
-	}, []);
-	const closeRef = useRef(close);
-	closeRef.current = close;
-	useEffect(() => {
-		if (!isOpen) return;
-		const onKey = (e) => {
-			if (e.key === "Escape" && !inFlightRef.current) closeRef.current();
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [isOpen]);
-	const runAction = useCallback(async () => {
-		if (actionFiredRef.current) return;
-		actionFiredRef.current = true;
-		setPending(true);
-		try {
-			await action?.();
-			if (closeAfterAction) closeRef.current();
-			else actionFiredRef.current = false;
-		} finally {
-			setPending(false);
-		}
-	}, [action, closeAfterAction]);
-	if (!isOpen) return null;
-	return createPortal(/* @__PURE__ */ jsxs("div", {
-		className: "fixed z-250 inset-0 flex w-screen items-center justify-center p-4",
-		role: "dialog",
-		"aria-modal": "true",
-		...title ? { "aria-labelledby": titleId } : {},
-		onKeyDown: trapFocus,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cx("fixed inset-0", dimScreen && "bg-gray-500/75"),
-			onClick: inFlight || ignoreOutsideClickClose ? void 0 : close
-		}), /* @__PURE__ */ jsxs("div", {
-			ref: panelRef,
-			tabIndex: -1,
-			className: cx(className, "relative inline-block align-bottom rounded-lg text-left shadow-xl z-50 sm:my-8 sm:align-middle max-h-full overflow-y-auto", "bg-(--theme-panel-bg,#ffffff) text-(--theme-panel,#000000)", padding && "px-4 pt-5 pb-4 sm:p-6", fitWidth ? "sm:w-min-[32rem]" : "sm:max-w-lg sm:w-full"),
-			children: [/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("h3", {
-				id: titleId,
-				className: "text-center text-xl leading-6 font-semibold",
-				children: title
-			}), /* @__PURE__ */ jsxs("div", {
-				className: cx(title.length !== 0 && "mt-2"),
-				children: [text && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-center",
-					children: text
-				}), children]
-			})] }), showButtons && /* @__PURE__ */ jsxs("div", {
-				className: "mt-5 sm:mt-6 grid grid-cols-2 gap-3 grid-flow-row-dense",
-				children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: cx("self-center cursor-pointer px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap flex items-center justify-center", "border border-(--theme-border,#d1d5db) hover:bg-(--theme-hover,#f3f4f6)", inFlight && "cursor-wait"),
-					onClick: () => {
-						cancelAction();
-						close();
-					},
-					disabled: inFlight,
-					children: cancelLabel
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: cx("self-center cursor-pointer px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap flex items-center justify-center", "disabled:opacity-50 disabled:cursor-not-allowed", actionClasses[type], loading && "cursor-wait"),
-					onClick: runAction,
-					disabled: disableAction || inFlight,
-					children: actionLabel
-				})]
-			})]
-		})]
-	}), document.body);
-}
-//#endregion
-export { Modal as t };

package/dist/components/Modal.d.ts

@@ -1,26 +0,0 @@
-export interface ModalProps {
-    isOpen: boolean;
-    close: () => void;
-    cancelAction?: () => void;
-    closeAfterAction?: boolean;
-    className?: string;
-    actionLabel?: string;
-    cancelLabel?: string;
-    action?: () => void | Promise<unknown>;
-    title?: string;
-    text?: string;
-    type?: 'destructive' | 'info' | 'warning';
-    showButtons?: boolean;
-    children?: React.ReactNode;
-    disableAction?: boolean;
-    loading?: boolean;
-    /** When false, drops the panel's default padding. */
-    padding?: boolean;
-    /** Makes modal width fit to content instead of regular width. */
-    fitWidth?: boolean;
-    /** When false, the backdrop stays transparent. */
-    dimScreen?: boolean;
-    /** When true, clicking the backdrop does not close the modal. */
-    ignoreOutsideClickClose?: boolean;
-}
-export default function Modal({ isOpen, close, cancelAction, children, title, text, actionLabel, cancelLabel, action, closeAfterAction, type, className, showButtons, disableAction, loading, padding, fitWidth, dimScreen, ignoreOutsideClickClose, }: ModalProps): import("react").ReactPortal | null;