impact-ui 5.0.2-alpha.1 → 5.0.2-beta.2

package/dist/components/TableChat/components/TableChatRightSection/ChatHeader/ChatHeaderAction.js

@@ -1,21 +1,18 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import default_1 from "../../../../../node_modules/@mui/icons-material/Close.js";
-import default_1$2 from "../../../../../node_modules/@mui/icons-material/ExpandLessOutlined.js";
-import default_1$3 from "../../../../../node_modules/@mui/icons-material/ExpandMoreOutlined.js";
-import default_1$1 from "../../../../../node_modules/@mui/icons-material/Search.js";
-import { getAssetUrl } from "../../../../../utils/assetBase.js";
+import { SearchIcon as SearchIcon_default, PinnedIcon as PinnedIcon_default, UserPlusIcon1 as UserPlusIcon1_default, TreedotIcon as TreedotIcon_default } from "../../../../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
+import default_1$2 from "../../../../../node_modules/@mui/icons-material/Close.js";
+import default_1 from "../../../../../node_modules/@mui/icons-material/ExpandLessOutlined.js";
+import default_1$1 from "../../../../../node_modules/@mui/icons-material/ExpandMoreOutlined.js";
+import default_1$3 from "../../../../../node_modules/@mui/icons-material/Search.js";
 import { Button } from "../../../../Button/index.js";
+import { ImpactIcon, impactIconSource } from "../../../../ImpactIcon/index.js";
 import { Input } from "../../../../Input/index.js";
 import { Menu } from "../../../../Menu/index.js";
 import { chartConfig } from "../../chatConfig.js";
 import AvatarGroup from "../AvatarGroup/AvatarGroup.js";
 import { ChatNotificationSettings } from "../ChatNotificationSettings/ChatNotificationSettings.js";
 import { useTranslation } from "../../../../../i18n/useTranslation.js";
-const PinnedIcon = getAssetUrl("icons/pinnedIcon.svg");
-getAssetUrl("icons/searchIcon.svg");
-const UserPlusIcon = getAssetUrl("icons/userPlusIcon1.svg");
-const ThreedotIcon = getAssetUrl("icons/treedotIcon.svg");
 const ChatHeaderAction = ({
   enableSearch,
   messageSearchValue,
@@ -42,7 +39,7 @@ const ChatHeaderAction = ({
   setSelectedMenuItems,
   handleThreeDotMenuClose,
   notificationSettings,
-  maxAvatars = 3,
+  maxAvatars = 2,
   selectedRadioOption,
   chatId,
   menuOptions,
@@ -57,10 +54,9 @@ const ChatHeaderAction = ({
     showParticipants = chartConfig.tableChatRightSectionConfig.tableChatHeaderConfig.showParticipants,
     showThreeDotMenu = chartConfig.tableChatRightSectionConfig.tableChatHeaderConfig.showThreeDotMenu,
     className = chartConfig.tableChatRightSectionConfig.tableChatHeaderConfig.className,
-    searchPlaceholder: searchPlaceholderProp,
+    searchPlaceholder = chartConfig.tableChatRightSectionConfig.tableChatHeaderConfig.searchPlaceholder,
     isAddParticipantsAllowed = chartConfig.tableChatRightSectionConfig.tableChatHeaderConfig.isAddParticipantsAllowed
   } = restProps;
-  const searchPlaceholder = searchPlaceholderProp ?? t("tableChat.header.searchInHere");
   const [openMenu, setOpenMenu] = useState(false);
   const [threeDotAnchorEl, setThreeDotAnchorEl] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -129,83 +125,81 @@ const ChatHeaderAction = ({
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: `chat-header-right ${className} ${enableSearch ? "search-enabled" : ""}`, children: [
-    showSearch && /* @__PURE__ */ jsx("div", { className: `chat-search-container${enableSearch ? " chat-search-container--active" : ""}`, children: enableSearch ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "chat-search-input-container", children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          autoFocus: true,
-          className: "chat-header-search-input",
-          leftIcon: /* @__PURE__ */ jsx(default_1$1, { className: "chat-header-search-input__icon" }),
-          placeholder: searchPlaceholder,
-          rightIcon: /* @__PURE__ */ jsx(
+    showSearch && /* @__PURE__ */ jsx("div", { className: "chat-search-container", children: enableSearch ? /* @__PURE__ */ jsx("div", { className: "chat-search-input-container", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        autoFocus: true,
+        leftIcon: /* @__PURE__ */ jsx(default_1$3, {}),
+        placeholder: searchPlaceholder,
+        rightIcon: (messageSearchValue == null ? void 0 : messageSearchValue.length) > 0 ? /* @__PURE__ */ jsxs("div", { className: "chat-search-right-icon-container", children: [
+          /* @__PURE__ */ jsx(
             default_1,
             {
-              "aria-label": t("common.close"),
-              className: "chat-header-search-input__close",
-              fontSize: "inherit"
+              onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                e.preventDefault();
+                (_a = chatHeaderConfig == null ? void 0 : chatHeaderConfig.onSearchUp) == null ? void 0 : _a.call(chatHeaderConfig, messageSearchValue, chatId);
+              }
             }
           ),
-          rightIconClick: handleCloseMessageSearch,
-          size: "small",
-          type: "text",
-          value: messageSearchValue,
-          width: "100%",
-          onChange: (e) => handleMessageSearchChange(e)
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "chat-search-nav", role: "group", "aria-label": t("tableChat.header.searchNavigate"), children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            "aria-label": t("tableChat.header.searchPrevious"),
-            className: "chat-search-nav__btn",
-            type: "button",
-            onClick: (e) => {
-              var _a;
-              e.stopPropagation();
-              (_a = chatHeaderConfig == null ? void 0 : chatHeaderConfig.onSearchUp) == null ? void 0 : _a.call(chatHeaderConfig, messageSearchValue, chatId);
-            },
-            children: /* @__PURE__ */ jsx(default_1$2, { fontSize: "inherit" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            "aria-label": t("tableChat.header.searchNext"),
-            className: "chat-search-nav__btn",
-            type: "button",
-            onClick: (e) => {
-              var _a;
-              e.stopPropagation();
-              (_a = chatHeaderConfig == null ? void 0 : chatHeaderConfig.onSearchDown) == null ? void 0 : _a.call(chatHeaderConfig, messageSearchValue, chatId);
-            },
-            children: /* @__PURE__ */ jsx(default_1$3, { fontSize: "inherit" })
-          }
-        )
-      ] })
-    ] }) : /* @__PURE__ */ jsx(default_1$1, { onClick: handleOpenMessageSearch, sx: { color: "#60697D", cursor: "pointer" }, fontSize: "" }) }),
-    // <div className="chat-pinned">
-    /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
+            default_1$1,
+            {
+              onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                e.preventDefault();
+                (_a = chatHeaderConfig == null ? void 0 : chatHeaderConfig.onSearchDown) == null ? void 0 : _a.call(chatHeaderConfig, messageSearchValue, chatId);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(default_1$2, {})
+        ] }) : null,
+        rightIconClick: handleCloseMessageSearch,
+        type: "text",
+        value: messageSearchValue,
+        width: "100%",
+        onChange: (e) => handleMessageSearchChange(e)
+      }
+    ) }) : /* @__PURE__ */ jsx(
+      ImpactIcon,
+      {
+        className: "search-icon",
+        icon: impactIconSource(SearchIcon_default),
+        size: 16,
+        style: { cursor: "pointer" },
+        onClick: handleOpenMessageSearch
+      }
+    ) }),
+    showPinned && /* @__PURE__ */ jsx("div", { className: "chat-pinned", children: /* @__PURE__ */ jsx(
       Button,
       {
         className: "pinned_img",
-        icon: /* @__PURE__ */ jsx("img", { className: "participants-img", src: PinnedIcon }),
+        icon: /* @__PURE__ */ jsx(
+          ImpactIcon,
+          {
+            className: "participants-img",
+            icon: impactIconSource(PinnedIcon_default),
+            size: 16
+          }
+        ),
         iconPlacement: "left",
-        size: "small",
+        size: "large",
         type: "default",
         variant: "tertiary",
         onClick: onPinnedClick
       }
-    ),
-    showParticipants && /* @__PURE__ */ jsxs("div", { className: "chat-participants-container", children: [
-      participantsList.length > 0 && /* @__PURE__ */ jsx(
+    ) }),
+    showParticipants && /* @__PURE__ */ jsx("div", { className: "chat-participants", children: /* @__PURE__ */ jsxs("div", { className: "chat-participants-container", children: [
+      participantsList.length > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
         AvatarGroup,
         {
           avatars: participantsList,
           maxAvatars,
           size: "sm"
         }
-      ),
+      ) }),
       isAddParticipantsAllowed ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -214,7 +208,14 @@ const ChatHeaderAction = ({
               count: participants.length
             }),
             className: "btn_border participants-button ",
-            icon: /* @__PURE__ */ jsx("img", { className: "participants-img", src: UserPlusIcon }),
+            icon: /* @__PURE__ */ jsx(
+              ImpactIcon,
+              {
+                className: "participants-img",
+                icon: impactIconSource(UserPlusIcon1_default),
+                size: 16
+              }
+            ),
             iconPlacement: "left",
             size: "small",
             type: "default",
@@ -296,12 +297,12 @@ const ChatHeaderAction = ({
           }
         )
       ] }) : null
-    ] }),
+    ] }) }),
     showThreeDotMenu ? /* @__PURE__ */ jsx(
       Button,
       {
         className: "chat-header-right-button btn_border_participant ",
-        icon: /* @__PURE__ */ jsx("img", { src: ThreedotIcon }),
+        icon: /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(TreedotIcon_default), size: 16 }),
         iconPlacement: "left",
         size: "small",
         type: "default",

package/dist/components/TableChat/components/TableChatRightSection/ChatHeader/ChatHeaderInfo.d.ts

@@ -1,16 +1,9 @@
-declare const ChatHeaderInfo: ({ title, createdBy, createdAt, chatId, showChatId, showResolve, isResolved, onResolve, resolveLabel, displayId, isTitleEditable, onTitleChange, }: {
+declare const ChatHeaderInfo: ({ title, createdBy, createdAt, chatId, showChatId }: {
     title: any;
     createdBy: any;
     createdAt: any;
     chatId: any;
     showChatId?: boolean | undefined;
-    showResolve?: boolean | undefined;
-    isResolved?: boolean | undefined;
-    onResolve: any;
-    resolveLabel: any;
-    displayId: any;
-    isTitleEditable: any;
-    onTitleChange: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ChatHeaderInfo;
 //# sourceMappingURL=ChatHeaderInfo.d.ts.map

package/dist/components/TableChat/components/TableChatRightSection/ChatHeader/ChatHeaderInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeaderInfo.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatHeader/ChatHeaderInfo.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,cAAc,GAAI;;;;;;;;;;;;;CAavB,4CAsMA,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ChatHeaderInfo.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatHeader/ChatHeaderInfo.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,cAAc,GAAI;;;;;;CAA2D,gCAyClF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/TableChat/components/TableChatRightSection/ChatHeader/ChatHeaderInfo.js

@@ -1,183 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import default_1$1 from "../../../../../node_modules/@mui/icons-material/Check.js";
-import default_1$2 from "../../../../../node_modules/@mui/icons-material/CheckCircle.js";
-import default_1 from "../../../../../node_modules/@mui/icons-material/Close.js";
 import { useTextOverflow } from "../../../../../utils/useTextOverflow.js";
-import { Input } from "../../../../Input/index.js";
 import { Tooltip } from "../../../../Tooltip/index.js";
 import { useTranslation } from "../../../../../i18n/useTranslation.js";
-const ChatHeaderInfo = ({
-  title,
-  createdBy,
-  createdAt,
-  chatId,
-  showChatId = false,
-  showResolve = false,
-  isResolved = false,
-  onResolve,
-  resolveLabel,
-  displayId,
-  isTitleEditable,
-  onTitleChange
-}) => {
+const ChatHeaderInfo = ({ title, createdBy, createdAt, chatId, showChatId = false }) => {
   const { t } = useTranslation();
-  const idForMeta = displayId ?? chatId;
-  const isCommittingRef = useRef(false);
-  const [isEditing, setIsEditing] = useState(false);
-  const [draftTitle, setDraftTitle] = useState(title ?? "");
-  const [isSaving, setIsSaving] = useState(false);
-  const fullText = `${idForMeta && showChatId ? t("tableChat.header.idSegment", { id: idForMeta }) : ""}${createdBy ? t("tableChat.header.createdBySegment", { createdBy }) : ""}${createdAt ? t("tableChat.header.atSegment", { createdAt }) : ""}`;
+  const fullText = `${chatId && showChatId ? t("tableChat.header.idSegment", { id: chatId.slice(0, 6) }) : ""}${createdBy ? t("tableChat.header.createdBySegment", { createdBy }) : ""}${createdAt ? t("tableChat.header.atSegment", { createdAt }) : ""}`;
   const { textRef: fullTextRef, isOverflowing: isFullTextOverflowing } = useTextOverflow([
     fullText,
     title
   ]);
-  const shouldShowResolve = Boolean(showResolve || onResolve);
-  const canEditTitle = Boolean(isTitleEditable ?? onTitleChange);
-  const canConfirm = Boolean(draftTitle.trim()) && !isSaving;
-  useEffect(() => {
-    if (!isEditing) {
-      setDraftTitle(title ?? "");
-    }
-  }, [title, isEditing]);
-  const handleResolveClick = (e) => {
-    e.stopPropagation();
-    onResolve == null ? void 0 : onResolve(chatId);
-  };
-  const exitEditing = () => {
-    setDraftTitle(title ?? "");
-    setIsEditing(false);
-  };
-  const commitTitle = async () => {
-    if (isCommittingRef.current) return;
-    const nextTitle = draftTitle.trim();
-    if (!nextTitle || nextTitle === (title ?? "").trim()) {
-      exitEditing();
-      return;
-    }
-    if (!onTitleChange || isSaving) {
-      exitEditing();
-      return;
-    }
-    isCommittingRef.current = true;
-    setIsSaving(true);
-    try {
-      await onTitleChange(chatId, nextTitle);
-      setIsEditing(false);
-    } catch (error) {
-      console.error("[ChatHeaderInfo] Title update failed:", error);
-      setDraftTitle(title ?? "");
-    } finally {
-      setIsSaving(false);
-      isCommittingRef.current = false;
-    }
-  };
-  const handleTitleClick = () => {
-    if (!canEditTitle || isEditing || isSaving) return;
-    setDraftTitle(title ?? "");
-    setIsEditing(true);
-  };
-  const handleTitleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      if (canConfirm) {
-        commitTitle();
-      }
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      exitEditing();
-    }
-  };
-  const handleConfirmClick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!canConfirm) return;
-    commitTitle();
-  };
-  const handleCancelClick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isSaving) return;
-    exitEditing();
-  };
   return /* @__PURE__ */ jsxs("div", { className: "chat-header-content", children: [
-    /* @__PURE__ */ jsxs("div", { className: "chat-title-row", children: [
-      isEditing ? /* @__PURE__ */ jsx(
-        Input,
-        {
-          autoFocus: true,
-          "aria-label": t("tableChat.header.editTitle"),
-          className: "chat-title-input",
-          disabled: isSaving,
-          rightIcon: /* @__PURE__ */ jsxs("div", { className: "chat-title-input__actions", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "aria-label": t("common.cancel"),
-                className: "chat-title-input__btn chat-title-input__btn--cancel",
-                disabled: isSaving,
-                type: "button",
-                onClick: handleCancelClick,
-                onMouseDown: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ jsx(default_1, { fontSize: "inherit" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "aria-label": t("common.save"),
-                className: "chat-title-input__btn chat-title-input__btn--confirm",
-                disabled: !canConfirm,
-                type: "button",
-                onClick: handleConfirmClick,
-                onMouseDown: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ jsx(default_1$1, { fontSize: "inherit" })
-              }
-            )
-          ] }),
-          size: "small",
-          type: "text",
-          value: draftTitle,
-          width: "100%",
-          onChange: (e) => setDraftTitle(e.target.value),
-          onFocus: (e) => e.target.select(),
-          onKeyDown: handleTitleKeyDown
-        }
-      ) : /* @__PURE__ */ jsx(
-        "h1",
-        {
-          "aria-label": canEditTitle ? t("tableChat.header.editTitle") : void 0,
-          className: `chat-title chat-text-ellipsis${canEditTitle ? " chat-title--editable" : ""}`,
-          role: canEditTitle ? "button" : void 0,
-          tabIndex: canEditTitle ? 0 : void 0,
-          title,
-          onClick: handleTitleClick,
-          onKeyDown: (e) => {
-            if (!canEditTitle) return;
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleTitleClick();
-            }
-          },
-          children: title
-        }
-      ),
-      shouldShowResolve && !isEditing ? /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: `chat-resolve${isResolved ? " chat-resolve--resolved" : ""}`,
-          disabled: isResolved,
-          "aria-disabled": isResolved,
-          onClick: isResolved ? void 0 : handleResolveClick,
-          children: [
-            /* @__PURE__ */ jsx(default_1$2, { className: "chat-resolve__icon", fontSize: "inherit" }),
-            /* @__PURE__ */ jsx("span", { className: "chat-resolve__label", children: resolveLabel ?? (isResolved ? t("tableChat.header.resolved") : t("tableChat.header.resolve")) })
-          ]
-        }
-      ) : null
-    ] }),
-    fullText && !isEditing ? /* @__PURE__ */ jsx("div", { className: "chat-info-outer", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("h1", { className: "chat-title chat-text-ellipsis", title, children: title }),
+    fullText ? /* @__PURE__ */ jsx("div", { className: "chat-info-outer", children: /* @__PURE__ */ jsx(
       Tooltip,
       {
         isHoverEnabled: isFullTextOverflowing,

package/dist/components/TableChat/components/TableChatRightSection/ChatInput/ChatInput.d.ts

@@ -1,5 +1,6 @@
+import { default as React } from 'react';
 
-export declare const ChatInput: ({ placeholder, value, onChange, onSend, onAttach, onImageUpload, onEmojiClick, onQuickAction, showFormatting, showQuickAction, quickActionLabel, disabled, maxLength, className, messageConfig, isEditMode, editingMessage, onCancelEdit, isReplyMode, replyingToMessage, onCancelReply, chatId, }: {
+export declare const ChatInput: ({ placeholder, value, onChange, onSend, onAttach, onImageUpload, onEmojiClick, showFormatting, showQuickAction, quickActionLabel, disabled, maxLength, className, messageConfig, isEditMode, editingMessage, onCancelEdit, chatId, }: {
     placeholder: any;
     value: any;
     onChange: any;
@@ -7,7 +8,6 @@ export declare const ChatInput: ({ placeholder, value, onChange, onSend, onAttac
     onAttach: any;
     onImageUpload: any;
     onEmojiClick: any;
-    onQuickAction: any;
     showFormatting?: boolean | undefined;
     showQuickAction?: boolean | undefined;
     quickActionLabel: any;
@@ -18,9 +18,6 @@ export declare const ChatInput: ({ placeholder, value, onChange, onSend, onAttac
     isEditMode?: boolean | undefined;
     editingMessage?: null | undefined;
     onCancelEdit: any;
-    isReplyMode?: boolean | undefined;
-    replyingToMessage?: null | undefined;
-    onCancelReply: any;
     chatId: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 //# sourceMappingURL=ChatInput.d.ts.map

package/dist/components/TableChat/components/TableChatRightSection/ChatInput/ChatInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatInput/ChatInput.tsx"],"names":[],"mappings":"AAYA,OAAO,yBAAyB,CAAC;AAcjC,eAAO,MAAM,SAAS,GAAI;;;;;;;;;;;;;;;;;;;;;;;CAuBzB,4CA6tBA,CAAC"}
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatInput/ChatInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAuB3D,OAAO,yBAAyB,CAAC;AAEjC,eAAO,MAAM,SAAS,GAAI;;;;;;;;;;;;;;;;;;;CAmBzB,sBAyuBA,CAAC"}