@edu-tosel/design 1.0.87 → 1.0.88

package/modal/design/Modal.design.d.ts

@@ -1,2 +1,2 @@
 import { ModalProps } from "../../interface/Modal";
-export default function ModalDesign({ titles, showAction, children, option, debug, }: ModalProps): import("react").ReactPortal | null;
+export default function ModalProvider(props: ModalProps): JSX.Element | null;

package/modal/design/Modal.design.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import { useTransition, animated } from "react-spring";
 import { useActionStore } from "../../store";
 import { cn } from "../../util";
@@ -25,22 +25,40 @@ const heightSize = {
     "2xl": "max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ titles, showAction, children, option, debug, }) {
-    const { isVisible, event } = showAction ?? {};
-    const { position, width, height, noClose, noBackground, isShadow } = option ?? {};
+export default function ModalProvider(props) {
+    const { isVisible } = props.showAction ?? {};
+    const { position, noBackground } = props.option ?? {};
     const [detection, setDetection] = useState(null);
-    const { setIsOwn, removeModal } = useActionStore();
+    const { setIsOwn } = useActionStore();
     useEffect(() => {
         setDetection(document.getElementById("portal"));
     }, []);
+    const transitions = useTransition(isVisible, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 200 },
+    });
     const background = {
         positions: "z-50 fixed top-0 left-0",
         displays: !position && "flex items-center justify-center ",
         sizes: "min-h-screen w-full ",
         styles: !noBackground && "bg-black/10 backdrop-blur-sm ",
     };
+    const positionContainer = {
+        positions: "absolute z-45",
+        position,
+    };
+    return (detection &&
+        (!position
+            ? createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsx(ModalDesign, { ...props }) }))), document.body)
+            : transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(positionContainer), onClick: () => setIsOwn(true), children: _jsx(ModalDesign, { ...props }) })))));
+}
+function ModalDesign({ titles, showAction, children, option, debug, }) {
+    const { removeModal } = useActionStore();
+    const { width, height, noClose, isShadow } = option ?? {};
+    const { event } = showAction ?? {};
     const container = {
-        positions: position,
         paddings: "p-5",
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "md"]}`,
         styles: "rounded-xl bg-white relative overflow-hidden",
@@ -51,12 +69,5 @@ export default function ModalDesign({ titles, showAction, children, option, debu
         displays: "flex flex-col items-end",
         sizes: "w-full min-h-[83px]",
     };
-    const transitions = useTransition(isVisible, {
-        from: { opacity: 0 },
-        enter: { opacity: 1 },
-        leave: { opacity: 0 },
-        config: { duration: 200 },
-    });
-    return (detection &&
-        ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }), children, !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-5 left-5" }))] }) }))), document.body));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }), children, !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-5 left-5" }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.87",
+  "version": "1.0.88",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.87
+1.0.88