sea-react-components 1.3.16 → 1.3.18

package/dist/components/confirm/index.js

@@ -16,7 +16,7 @@ const ConfirmModal = ({ options, onClose, }) => {
     };
     return (_jsx("div", { className: `fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 transition-opacity duration-200 ${show ? "opacity-100" : "opacity-0"}`, children: _jsxs("div", { className: `bg-white rounded-xl shadow-lg w-[90%] max-w-sm p-5 transform transition-all duration-200 ${show ? "scale-100" : "scale-95"}`, children: [options.title && (_jsx("h2", { className: "text-lg font-semibold mb-2", children: options.title })), _jsx("p", { className: "text-gray-700 mb-4", children: options.message }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { onClick: () => handleClose(false), variant: "secondary", children: options.cancelText || "Cancel" }), _jsx(Button, { onClick: () => handleClose(true), children: options.confirmText || "Confirm" })] })] }) }));
 };
-let isOpen = false;
+let isOpen = true;
 export default function showConfirm(messageOrOptions) {
     const options = typeof messageOrOptions === "string"
         ? { message: messageOrOptions }
@@ -27,10 +27,10 @@ export default function showConfirm(messageOrOptions) {
         document.body.appendChild(div);
     }
     const root = ReactDOM.createRoot(div);
-    isOpen = true;
+    isOpen = false;
     return new Promise((resolve) => {
         const handleClose = (result) => {
-            isOpen = false;
+            isOpen = true;
             root.unmount();
             div.remove();
             resolve(result);

package/dist/components/drawer/index.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 export type Placement = "top" | "left" | "right" | "bottom";
+export type DrawerSize = "sm" | "md" | "lg" | "xl";
 export type Props = {
     isOpen: boolean;
     onClose: () => void;
@@ -7,6 +8,7 @@ export type Props = {
     overlay?: boolean;
     className?: string;
     children: React.ReactNode;
+    size?: DrawerSize;
 };
-export default function Drawer({ isOpen, onClose, placement, overlay, className, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Drawer({ isOpen, onClose, placement, overlay, className, children, size, }: Props): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5D,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,SAAmB,EACnB,OAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,KAAK,2CAoDP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,SAAmB,EACnB,OAAc,EACd,SAAS,EACT,QAAQ,EACR,IAAW,GACZ,EAAE,KAAK,2CAyDP"}

package/dist/components/drawer/index.js

@@ -1,15 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import { Icon } from "@iconify/react";
-export default function Drawer({ isOpen, onClose, placement = "right", overlay = true, className, children, }) {
+const sizeClass = {
+    sm: "w-[320px] md:w-[320px]",
+    md: "sm:w-[85%]  xl:w-[25%] lg:w-[40%] md:w-[40%]",
+    lg: "sm:w-[95%] md:w-[60%]",
+    xl: "sm:w-full md:w-[80%]",
+};
+export default function Drawer({ isOpen, onClose, placement = "right", overlay = true, className, children, size = "md", // NEW
+ }) {
+    // Only apply width for left/right placements
+    const widthClass = placement === "left" || placement === "right" ? sizeClass[size] : "";
     return (_jsxs(_Fragment, { children: [overlay && isOpen && (_jsx("div", { className: clsx("fixed z-50 inset-0 bg-black bg-opacity-50 transition-opacity duration-300", { "opacity-0 pointer-events-none": !isOpen }), onClick: onClose })), _jsxs("div", { className: clsx("fixed bg-white shadow-lg z-50 transition-transform duration-300 py-7 px-2 max-h-screen overflow-y-auto", {
                     "top-0 left-0 w-full h-auto transform -translate-y-full": placement === "top" && !isOpen,
                     "top-0 left-0 w-full h-auto translate-y-0": placement === "top" && isOpen,
-                    "top-0 right-0 max-h-screen h-full transform translate-x-full w-[85%] md:w-[40%]": placement === "right" && !isOpen,
-                    "top-0 right-0 max-h-screen h-full translate-x-0 w-[85%] md:w-[40%]": placement === "right" && isOpen,
-                    "top-0 left-0 max-h-screen h-full transform -translate-x-full w-[85%] md:w-[40%]": placement === "left" && !isOpen,
-                    "top-0 left-0 max-h-screen h-full translate-x-0 w-[85%] md:w-[40%]": placement === "left" && isOpen,
+                    "top-0 right-0 max-h-screen h-full transform translate-x-full": placement === "right" && !isOpen,
+                    "top-0 right-0 max-h-screen h-full translate-x-0": placement === "right" && isOpen,
+                    "top-0 left-0 max-h-screen h-full transform -translate-x-full": placement === "left" && !isOpen,
+                    "top-0 left-0 max-h-screen h-full translate-x-0": placement === "left" && isOpen,
                     "bottom-0 left-0 w-full h-auto transform translate-y-full": placement === "bottom" && !isOpen,
                     "bottom-0 left-0 w-full h-auto translate-y-0": placement === "bottom" && isOpen,
-                }, className), children: [_jsx("button", { onClick: onClose, className: "absolute top-2 right-2 text-secondary-dark", children: _jsx(Icon, { icon: "line-md:close-small", className: "h-5 w-5 hover:scale-110 transition-all duration-300 ease-in-out" }) }), children] })] }));
+                }, widthClass, className), children: [_jsx("button", { onClick: onClose, className: "absolute top-2 right-2 text-secondary-dark", children: _jsx(Icon, { icon: "line-md:close-small", className: "h-5 w-5 hover:scale-110 transition-all duration-300 ease-in-out" }) }), children] })] }));
 }

package/dist/components/expandable-text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/expandable-text/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAI,EACJ,QAAY,EACZ,SAAS,EACT,cAAqB,EACrB,YAA0B,EAC1B,YAA0B,GAC3B,EAAE,KAAK,2CAoDP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/expandable-text/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAI,EACJ,QAAY,EACZ,SAAS,EACT,cAAqB,EACrB,YAA0B,EAC1B,YAA0B,GAC3B,EAAE,KAAK,2CAuDP"}

package/dist/components/expandable-text/index.js

@@ -1,33 +1,34 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useLayoutEffect } from "react";
 import clsx from "clsx";
 export default function ExpandableText({ text, maxLines = 2, className, showMoreButton = true, showMoreText = "Show more", showLessText = "Show less", }) {
-    var _a;
     const [expanded, setExpanded] = useState(false);
     const [truncated, setTruncated] = useState(false);
     const [collapsedHeight, setCollapsedHeight] = useState(0);
+    const [expandedHeight, setExpandedHeight] = useState(0);
     const textRef = useRef(null);
-    // Measure collapsed height (max lines)
-    useEffect(() => {
-        if (textRef.current) {
-            const lineHeight = parseFloat(getComputedStyle(textRef.current).lineHeight || "16");
-            setCollapsedHeight(lineHeight * maxLines);
-            if (textRef.current.scrollHeight > lineHeight * maxLines) {
-                setTruncated(true);
-            }
-            else {
-                setTruncated(false);
-            }
-        }
+    useLayoutEffect(() => {
+        if (!textRef.current)
+            return;
+        const el = textRef.current;
+        const lineHeight = parseFloat(getComputedStyle(el).lineHeight || "16");
+        const maxHeight = lineHeight * maxLines;
+        // Temporarily remove clamping to measure full height
+        el.style.webkitLineClamp = "unset";
+        el.style.maxHeight = "none";
+        const fullHeight = el.scrollHeight;
+        setExpandedHeight(fullHeight);
+        setCollapsedHeight(maxHeight);
+        setTruncated(fullHeight > maxHeight);
+        // Reapply clamping
+        el.style.webkitLineClamp = String(maxLines);
     }, [text, maxLines]);
-    const toggleExpanded = () => {
-        setExpanded((prev) => !prev);
-    };
-    return (_jsxs("div", { className: clsx("relative", className), children: [_jsx("div", { ref: textRef, className: "overflow-hidden transition-all duration-300 ease-in-out", style: {
-                    maxHeight: expanded ? (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight : collapsedHeight,
+    const toggleExpanded = () => setExpanded((prev) => !prev);
+    return (_jsxs("div", { className: clsx("relative", className), children: [_jsx("div", { ref: textRef, className: "overflow-hidden transition-[max-height] duration-300 ease-in-out", style: {
+                    maxHeight: expanded ? expandedHeight : collapsedHeight,
                     display: "-webkit-box",
                     WebkitBoxOrient: "vertical",
-                    WebkitLineClamp: !expanded ? maxLines : "unset",
+                    WebkitLineClamp: expanded ? "unset" : String(maxLines),
                 }, children: text }), truncated && showMoreButton && (_jsx("button", { type: "button", onClick: toggleExpanded, className: "mt-1 text-primary hover:underline text-sm font-medium", children: expanded ? showLessText : showMoreText }))] }));
 }

package/dist/components/input/index.d.ts

@@ -5,7 +5,8 @@ export type Props = {
     start?: React.ReactNode | null;
     end?: React.ReactNode | null;
     label?: string;
+    showErrorMessage?: boolean;
     containerClassName?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;
-export default function Input({ errorMessage, containerClassName, className, start, end, ref, type, label, required, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Input({ errorMessage, containerClassName, className, start, end, ref, type, label, required, showErrorMessage, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,KAAY,EACZ,GAAU,EACV,GAAG,EACH,IAAI,EACJ,KAAK,EACL,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,2CAmEP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,KAAY,EACZ,GAAU,EACV,GAAG,EACH,IAAI,EACJ,KAAK,EACL,QAAgB,EAChB,gBAAuB,EACvB,GAAG,KAAK,EACT,EAAE,KAAK,2CAmEP"}

package/dist/components/input/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from "@iconify/react";
 import clsx from "clsx";
 import { useState } from "react";
-export default function Input({ errorMessage, containerClassName, className, start = null, end = null, ref, type, label, required = false, ...props }) {
+export default function Input({ errorMessage, containerClassName, className, start = null, end = null, ref, type, label, required = false, showErrorMessage = true, ...props }) {
     const [isFocused, setIsFocused] = useState(false);
     const [currentType, setCurrentType] = useState(type);
     if (type === "password") {
@@ -17,5 +17,5 @@ export default function Input({ errorMessage, containerClassName, className, sta
                     ? "border-error"
                     : isFocused
                         ? "border-primary"
-                        : "border-gray-200", containerClassName), children: [start, _jsx("input", { ref: ref, id: props.id, type: currentType, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "aria-invalid": !!errorMessage || undefined, className: clsx("outline-none text-text flex-1 bg-white", className), ...props }), end] }), errorMessage && (_jsx("p", { className: "pl-1 text-sm text-error", children: typeof errorMessage === "string" ? errorMessage : "Invalid value" }))] }));
+                        : "border-gray-200", containerClassName), children: [start, _jsx("input", { ref: ref, id: props.id, type: currentType, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "aria-invalid": !!errorMessage || undefined, className: clsx("outline-none text-text flex-1 bg-white", className), ...props }), end] }), showErrorMessage && errorMessage && (_jsx("p", { className: "pl-1 text-sm text-error", children: typeof errorMessage === "string" ? errorMessage : "Invalid value" }))] }));
 }

package/dist/components/menu/index.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 import { MenuProps } from "@szhsin/react-menu";
+import "@szhsin/react-menu/dist/index.css";
+import "@szhsin/react-menu/dist/transitions/zoom.css";
 export type Props = {
     menuButton: React.ReactNode;
     children: React.ReactNode;

package/dist/components/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA6B,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1E,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,GAAG,SAAS,CAAC;AACd,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,2CAQP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA6B,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1E,OAAO,mCAAmC,CAAC;AAC3C,OAAO,8CAA8C,CAAC;AAEtD,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,GAAG,SAAS,CAAC;AACd,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,2CAUP"}

package/dist/components/menu/index.js

@@ -2,6 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu as SMenu, MenuButton } from "@szhsin/react-menu";
 import clsx from "clsx";
+import "@szhsin/react-menu/dist/index.css";
+import "@szhsin/react-menu/dist/transitions/zoom.css";
 export default function Menu({ menuButton, children, className, ...props }) {
-    return (_jsx(SMenu, { menuButton: _jsx(MenuButton, { children: menuButton }), ...props, children: _jsx("div", { className: clsx("bg-white rounded-xl shadow-lg", className), children: children }) }));
+    return (_jsx(SMenu, { menuButton: _jsx(MenuButton, { children: menuButton }), transition: true, ...props, children: _jsx("div", { className: clsx(className), children: children }) }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sea-react-components",
   "description": "SEA react components library",
-  "version": "1.3.16",
+  "version": "1.3.18",
   "main": "dist/index.js",
   "scripts": {
     "build": "tsc --build && npx postcss src/styles.css -o dist/styles.css && npx postcss src/components/text-editor/style.css -o dist/components/text-editor/style.css",
@@ -48,7 +48,7 @@
     "jwt-decode": "^4.0.0",
     "lowlight": "^3.3.0",
     "react-dom": "^18.3.1",
-    "sea-platform-helpers": "^1.5.13",
+    "sea-platform-helpers": "^1.5.16",
     "sea-react-components": "file:",
     "uuid": "^13.0.0",
     "yup": "^1.5.0"