@megha-ui/react 1.2.177 → 1.2.179

package/dist/components/chat/components/ChatDetails.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { User } from "./ChatList";
+export interface ChatDetailsProps {
+    selectedUser: User | null;
+    currentUserId: string;
+}
+declare const ChatDetails: React.FC<ChatDetailsProps>;
+export default ChatDetails;

package/dist/components/chat/components/ChatDetails.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { VscSend } from "react-icons/vsc";
+import { FaUsers } from "react-icons/fa";
+const ChatDetails = ({ selectedUser, currentUserId }) => {
+    const [messages, setMessages] = useState([]);
+    const [newMessage, setNewMessage] = useState("");
+    const endRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        (_a = endRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    useEffect(() => {
+        setMessages([]);
+        setNewMessage("");
+    }, [selectedUser]);
+    const handleSend = () => {
+        if (!newMessage.trim() || !selectedUser)
+            return;
+        const msg = {
+            id: Date.now().toString(),
+            senderId: currentUserId,
+            text: newMessage,
+            timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, msg]);
+        setNewMessage("");
+    };
+    if (!selectedUser) {
+        return _jsx("div", { className: "wk-chat-placeholder", style: { flex: 1, padding: 16 }, children: "Select a chat" });
+    }
+    return (_jsxs("div", { className: "wk-chat-details", style: { flex: 1, display: "flex", flexDirection: "column" }, children: [_jsxs("div", { className: "wk-chat-header", style: { display: "flex", alignItems: "center", padding: "8px", borderBottom: "1px solid #f5f5f5" }, children: [_jsx("div", { className: "wk-chat-user-icon", style: {
+                            width: 32,
+                            height: 32,
+                            borderRadius: "50%",
+                            backgroundColor: selectedUser.isGroup ? "#34a853" : "#0096c7",
+                            color: "#fff",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            marginRight: 8,
+                            textTransform: "uppercase",
+                        }, children: selectedUser.isGroup ? (_jsx(FaUsers, {})) : (`${selectedUser.firstName[0]}${selectedUser.lastName[0]}`) }), _jsx("div", { style: { fontWeight: "bold" }, children: selectedUser.isGroup
+                            ? selectedUser.firstName
+                            : `${selectedUser.firstName} ${selectedUser.lastName}` })] }), _jsxs("div", { className: "wk-chat-messages", style: { flex: 1, overflowY: "auto", padding: "8px" }, children: [messages.map((m) => (_jsx("div", { className: `wk-chat-message${m.senderId === currentUserId ? " wk-sent" : " wk-received"}`, style: {
+                            marginBottom: 8,
+                            display: "flex",
+                            justifyContent: m.senderId === currentUserId ? "flex-end" : "flex-start",
+                        }, children: _jsx("div", { style: {
+                                background: m.senderId === currentUserId ? "#F9F9F9" : "#EAF2FA",
+                                padding: "6px 8px",
+                                borderRadius: 4,
+                                maxWidth: "70%",
+                            }, children: m.text }) }, m.id))), _jsx("div", { ref: endRef })] }), _jsxs("div", { className: "wk-chat-input", style: { display: "flex", padding: 8, borderTop: "1px solid #f5f5f5" }, children: [_jsx("input", { type: "text", value: newMessage, onChange: (e) => setNewMessage(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                handleSend();
+                            }
+                        }, style: { flex: 1, border: "1px solid #dbdfe9", borderRadius: 4, padding: "6px" } }), _jsx("button", { onClick: handleSend, style: { marginLeft: 8, background: "transparent", border: "none", cursor: "pointer" }, children: _jsx(VscSend, { size: 20 }) })] })] }));
+};
+export default ChatDetails;

package/dist/components/chat/components/ChatList.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface User {
+    id: string;
+    firstName: string;
+    lastName: string;
+    roleType?: string;
+    latestMessageTimestamp?: number;
+    latestMessageText?: string;
+    isGroup?: boolean;
+}
+export interface ChatListProps {
+    users: User[];
+    onSelectUser: (user: User) => void;
+    selectedUserId?: string;
+    unreadCounts?: Record<string, number>;
+}
+declare const ChatList: React.FC<ChatListProps>;
+export default ChatList;

package/dist/components/chat/components/ChatList.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaUsers } from "react-icons/fa";
+import Loader from "../../loader";
+const formatTimestamp = (timestamp) => {
+    if (!timestamp)
+        return "";
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
+    if (diffInDays === 0) {
+        return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    }
+    else if (diffInDays === 1) {
+        return "Yesterday";
+    }
+    else if (diffInDays < 7) {
+        return date.toLocaleDateString([], { weekday: "long" });
+    }
+    else {
+        return date.toLocaleDateString();
+    }
+};
+const ChatList = ({ users, onSelectUser, selectedUserId, unreadCounts = {}, }) => {
+    return (_jsx("div", { className: "wk-chat-list", style: { width: "30%", overflowY: "auto" }, children: users.length > 0 ? (users.map((user) => {
+            var _a, _b;
+            return (_jsxs("div", { onClick: () => onSelectUser(user), className: `wk-chat-user-item${selectedUserId === user.id ? " wk-selected" : ""}`, style: {
+                    padding: "8px",
+                    cursor: "pointer",
+                    display: "flex",
+                    borderBottom: "1px solid #f5f5f5",
+                }, children: [_jsx("div", { className: "wk-chat-user-icon", style: {
+                            width: 32,
+                            height: 32,
+                            borderRadius: "50%",
+                            backgroundColor: user.isGroup ? "#34a853" : "#0096c7",
+                            color: "#fff",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            marginRight: 8,
+                            textTransform: "uppercase",
+                        }, children: user.isGroup ? (_jsx(FaUsers, {})) : (`${(_a = user.firstName) === null || _a === void 0 ? void 0 : _a[0]}${(_b = user.lastName) === null || _b === void 0 ? void 0 : _b[0]}`) }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: { fontWeight: "bold" }, children: user.isGroup
+                                    ? user.firstName
+                                    : `${user.firstName} ${user.lastName}` }), _jsx("div", { style: { fontSize: "0.8rem", color: "#555" }, children: user.latestMessageText || "No messages yet" })] }), unreadCounts[user.id] > 0 && (_jsx("span", { style: {
+                            marginLeft: "auto",
+                            background: "#0096c7",
+                            color: "#fff",
+                            borderRadius: "50%",
+                            width: 20,
+                            height: 20,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: "0.75rem",
+                        }, children: unreadCounts[user.id] })), _jsx("div", { style: { marginLeft: 8, fontSize: "0.75rem", color: "#888" }, children: formatTimestamp(user.latestMessageTimestamp) })] }, user.id));
+        })) : (_jsx("div", { style: { padding: 16, textAlign: "center" }, children: _jsx(Loader, { size: 24 }) })) }));
+};
+export default ChatList;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { User } from "./components/ChatList";
+export interface ChatProps {
+    users: User[];
+    currentUserId: string;
+}
+declare const Chat: React.FC<ChatProps>;
+export default Chat;

package/dist/components/chat/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import ChatList from "./components/ChatList";
+import ChatDetails from "./components/ChatDetails";
+const Chat = ({ users, currentUserId }) => {
+    const [selectedUser, setSelectedUser] = useState(null);
+    return (_jsxs("div", { className: "wk-chat-container", style: { display: "flex", border: "1px solid #dbdfe9", height: "400px" }, children: [_jsx(ChatList, { users: users, onSelectUser: setSelectedUser, selectedUserId: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.id }), _jsx(ChatDetails, { selectedUser: selectedUser, currentUserId: currentUserId })] }));
+};
+export default Chat;

package/dist/components/grid/utils/gridFilterDropdown.js

@@ -53,7 +53,7 @@ const GridFilterDropdown = ({ headerDropdownIndex, searchOptions, position, colu
         }
         onFilter(_uniqueSeach, columnKey);
     };
-    return (_jsxs("div", { style: Object.assign(Object.assign({ position: "absolute", top: "calc(100% + 5px)" }, (columnIndex > 1 ? { right: 0 } : { left: 0 })), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "white", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", listStyleType: "none", padding: "0.35rem 0", width: "max-content", maxWidth: "500px", borderRadius: "0.5rem", margin: 0 }), ref: headerDropdown, onClick: (e) => e.stopPropagation(), children: [searchInput && searchInput, sortingOps, _jsxs("div", { style: {
+    return (_jsxs("div", { style: Object.assign(Object.assign({ position: "absolute", top: "calc(100% + 5px)" }, (columnIndex > 1 ? { right: 0 } : { left: 0 })), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "var(--background)", color: "var(--foreground)", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", listStyleType: "none", padding: "0.35rem 0", width: "max-content", maxWidth: "500px", borderRadius: "0.5rem", margin: 0 }), ref: headerDropdown, onClick: (e) => e.stopPropagation(), children: [searchInput && searchInput, sortingOps, _jsxs("div", { style: {
                     padding: "0.5rem 0.75rem",
                     cursor: "pointer",
                     display: "flex",
@@ -64,7 +64,7 @@ const GridFilterDropdown = ({ headerDropdownIndex, searchOptions, position, colu
                     maxHeight: 300,
                     overflow: "auto",
                     padding: "0.5rem 0.75rem",
-                }, children: [_jsx("div", { className: "mb-2", children: _jsx(TextInput, { placeholder: `filter`, onChange: (e) => setFilterSearch(e.target.value), value: filterSearch, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" }) }), filterColumnData.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                }, children: [_jsx("div", { className: "mb-2", children: _jsx(TextInput, { placeholder: `filter`, onChange: (e) => setFilterSearch(e.target.value), value: filterSearch, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" }) }), filterColumnData.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                     cursor: "pointer",
                                     display: "flex",
                                     alignItems: "center",

package/dist/components/grid/utils/gridHeader.js

@@ -289,7 +289,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                     } })), _jsx(MdFilterList, { size: 18, style: {
                                                         color: activeFilters[((_q = headerColumns.find((column) => column.key === _groupBy)) === null || _q === void 0 ? void 0 : _q.key) || ""]
                                                             ? "#2377ba"
-                                                            : "#000",
+                                                            : "var(--row-header-text)",
                                                     } }), dropdownVisible ===
                                                     ((_r = headerColumns.find((column) => column.key === _groupBy)) === null || _r === void 0 ? void 0 : _r.key) &&
                                                     (((_s = headerColumns.find((column) => column.key === _groupBy)) === null || _s === void 0 ? void 0 : _s.uniqueDrop) ? (_jsx(GridFilterDropdown, { locale: locale, formatOptions: formatOptions, columnType: (_u = (_t = headerColumns.find((column) => column.key === _groupBy)) === null || _t === void 0 ? void 0 : _t.dataType) !== null && _u !== void 0 ? _u : "string", columnIndex: -1, searchable: ((_v = headerColumns.find((column) => column.key === _groupBy)) === null || _v === void 0 ? void 0 : _v.search) || false, headerDropdownIndex: headerDropdownIndex, searchInput: (search &&
@@ -321,7 +321,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                     background: ((_z = headerColumns.find((column) => column.key === _groupBy)) === null || _z === void 0 ? void 0 : _z.search)
                                                                         ? "var(--background)"
                                                                         : "var(--disabled-bg)",
-                                                                }, value: ((_1 = searchQueries[((_0 = headerColumns.find((column) => column.key === _groupBy)) === null || _0 === void 0 ? void 0 : _0.key) || ""]) === null || _1 === void 0 ? void 0 : _1.text) || "", disabled: !((_2 = headerColumns.find((column) => column.key === _groupBy)) === null || _2 === void 0 ? void 0 : _2.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))) ||
+                                                                }, value: ((_1 = searchQueries[((_0 = headerColumns.find((column) => column.key === _groupBy)) === null || _0 === void 0 ? void 0 : _0.key) || ""]) === null || _1 === void 0 ? void 0 : _1.text) || "", disabled: !((_2 = headerColumns.find((column) => column.key === _groupBy)) === null || _2 === void 0 ? void 0 : _2.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
                                                             null, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), searchOptions: searchOptions.filter((item) => {
                                                             var _a, _b;
                                                             return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number"
@@ -562,7 +562,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                         } })), _jsx(MdFilterList, { size: 18, style: {
                                                             color: activeFilters[column.key]
                                                                 ? "#2377ba"
-                                                                : "#000",
+                                                                : "var(--row-header-text)",
                                                         } }), dropdownVisible === column.key &&
                                                         (column.uniqueDrop ? (_jsx(GridFilterDropdown, { locale: locale, formatOptions: formatOptions, columnType: (_b = column.dataType) !== null && _b !== void 0 ? _b : "string", columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
                                                                 column.dataType === "currency"

package/dist/components/grid/utils/textFilterDropdown.js

@@ -22,7 +22,7 @@ const TextFilterDropdown = ({ headerDropdownIndex, searchOptions, combined, posi
             }
             : columnIndex > 1
                 ? { right: 0 }
-                : { left: 0 })), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "white", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", listStyleType: "none", padding: "0.25rem 0", width: 230, borderRadius: "0.5rem", margin: 0 }), id: "grid-dropdown", onClick: (e) => e.stopPropagation(), children: [searchInput && searchInput, sortingOps && sortingOps, _jsx("div", { style: {
+                : { left: 0 })), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "var(--background)", color: "var(--foreground)", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", listStyleType: "none", padding: "0.25rem 0", width: 230, borderRadius: "0.5rem", margin: 0 }), id: "grid-dropdown", onClick: (e) => e.stopPropagation(), children: [searchInput && searchInput, sortingOps && sortingOps, _jsx("div", { style: {
                     padding: "0.5rem 0.75rem",
                 }, children: _jsx(Dropdown, { options: searchOptions, selectedValues: [activeSearchType], onChange: (selected) => { var _a; return handleDropdownChange((_a = selected[0].toString()) !== null && _a !== void 0 ? _a : "", columnKey); }, searchEnabled: false, maxDropdownHeight: 350 }) }), !["blank", "notblank"].includes(activeSearchType.toLowerCase()) && (_jsx("div", { style: {
                     padding: "0.5rem 0.75rem",

package/dist/index.d.ts

@@ -14,3 +14,4 @@ export { default as TextEditor } from "./components/texteditor";
 export { default as Toggle } from "./components/toggle";
 export { Tabs, Tab, TabList, TabPanel } from "./components/tabs";
 export { formatValue } from "./services/commonService";
+export { default as Chat } from "./components/chat";

package/dist/index.js

@@ -14,3 +14,4 @@ export { default as TextEditor } from "./components/texteditor";
 export { default as Toggle } from "./components/toggle";
 export { Tabs, Tab, TabList, TabPanel } from "./components/tabs";
 export { formatValue } from "./services/commonService";
+export { default as Chat } from "./components/chat";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.2.177",
+  "version": "1.2.179",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,7 +30,7 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "jest": "^27.5.1",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^29.4.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {