@edu-tosel/design 1.0.52 → 1.0.54

package/modal/template/Postcode.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DaumPostcodeEmbed from "react-daum-postcode";
 import ModalDesign from "../design/Modal.design";
 import { useActionStore } from "../../store";
+import { lazy, useEffect, useState, Suspense } from "react";
+import { Loading } from "../../interaction";
+const DaumPostcodeEmbed = lazy(() => import("react-daum-postcode"));
 export default function PostcodeModal({ state, showAction, }) {
     const { removeModal } = useActionStore();
     const [value, setValue] = state;
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        if (!isClient)
+            return setIsClient(true);
+    }, []);
     const handler = (data) => {
         setValue({
             address: data.address,
@@ -18,5 +25,5 @@ export default function PostcodeModal({ state, showAction, }) {
         }, showAction: showAction, options: {
             width: "lg",
             height: "xl",
-        }, children: _jsx(DaumPostcodeEmbed, { onComplete: handler, className: "mt-16" }) }));
+        }, children: _jsx(Suspense, { fallback: _jsx(Loading.Spinner, {}), children: isClient && (_jsx(DaumPostcodeEmbed, { onComplete: handler, className: "mt-16" })) }) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.52
+1.0.54

package/widget/template/Select/Select.LG.d.ts

@@ -1,2 +1,2 @@
 import { HTMLSelectElement } from "../../../interface";
-export default function SelectLG<T>({ state }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectLG<T>({ state, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.LG.js

@@ -12,10 +12,7 @@ const widthSize = {
 const heightSize = {
     xs: "h-6.5",
 };
-// selectOptions,
-// placeholder,
-// options,
-export default function SelectLG({ state }) {
+export default function SelectLG({ state, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;