@ayseaistudio/ui-components 3.11.2 → 3.11.4

package/dist/LoginInput/LoginInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import React, { useEffect, useReducer, useState } from "react";
 import "./style.css";
-import { IconLayoutDashboard, IconUser, IconPassword, IconEye, IconEyeOff } from "@tabler/icons-react";
+import { IconLayoutDashboard, IconUser, IconEye, IconEyeOff, IconLock } from "@tabler/icons-react";
 export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status = "default", className = "", icon = _jsx(IconLayoutDashboard, { size: 20, color: "#B0B0B0" }), value = "", onChange, inputType = "text", version, singleChar = false, inputRef, onKeyDown, }) => {
     let finalPlaceholder = placeholder;
     let finalInputType = inputType;
@@ -37,7 +37,7 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
         finalIcon = _jsx(IconUser, { size: 20, color: iconColor });
     }
     else if (version === "password") {
-        finalIcon = _jsx(IconPassword, { size: 20, color: iconColor });
+        finalIcon = _jsx(IconLock, { size: 20, color: iconColor });
     }
     else if (icon && React.isValidElement(icon) && icon.type === IconLayoutDashboard) {
         finalIcon = _jsx(IconLayoutDashboard, { size: 20, color: iconColor });

package/dist/MessageInputField/MessageInputField.js

@@ -2,15 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
 import "./style.css";
-import { IconArrowDown, IconBold, IconHash, IconItalic, IconMoodSmile, IconPhoto, IconStrikethrough, IconUnderline, } from "@tabler/icons-react";
 import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
+import { IconArrowDown, IconBold, IconHash, IconItalic, IconMoodSmile, IconPhoto, IconStrikethrough, IconUnderline, } from "@tabler/icons-react";
 export const MessageInputField = ({ text = "", enter = true, richTextFormattingTools = true, className, placeholder = "Mesaj yazın...", withPicture = true, withEmoji = true, withBold = true, withItalic = true, withUnderline = true, withStrikethrough = true, withHash = true, value, onChange, onKeyDown, onValueChange, onEnter, }) => {
     const editorRef = useRef(null);
     const fileInputRef = useRef(null);
     const [showEmoji, setShowEmoji] = useState(false);
+    const [emojiPanelAbove, setEmojiPanelAbove] = useState(false);
     const emojiTriggerRef = useRef(null);
     const emojiPanelRef = useRef(null);
     const [isEmpty, setIsEmpty] = useState(true);
+    /** Approximate height of emoji panel (content + padding) for viewport check */
+    const EMOJI_PANEL_HEIGHT = 220;
+    const EMOJI_PANEL_GAP = 8;
     useEffect(() => {
         if (editorRef.current) {
             const hasInitial = (text ?? "").length > 0;
@@ -90,7 +94,17 @@ export const MessageInputField = ({ text = "", enter = true, richTextFormattingT
                                                     handleInsertImage(file);
                                                 if (fileInputRef.current)
                                                     fileInputRef.current.value = "";
-                                            } })] }), _jsxs("div", { ref: emojiTriggerRef, className: "emoji-trigger", children: [withEmoji && _jsx(IconMoodSmile, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => setShowEmoji((s) => !s) }), withEmoji && showEmoji && (_jsx("div", { ref: emojiPanelRef, className: "emoji-panel", children: _jsx("div", { className: "emoji-grid", children: EMOJIS.map((e) => (_jsx("button", { type: "button", onMouseDown: (evt) => evt.preventDefault(), onClick: () => {
+                                            } })] }), _jsxs("div", { ref: emojiTriggerRef, className: "emoji-trigger", children: [withEmoji && _jsx(IconMoodSmile, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => {
+                                                if (!showEmoji) {
+                                                    const trigger = emojiTriggerRef.current;
+                                                    if (trigger) {
+                                                        const rect = trigger.getBoundingClientRect();
+                                                        const spaceBelow = typeof window !== "undefined" ? window.innerHeight - rect.bottom : EMOJI_PANEL_HEIGHT + EMOJI_PANEL_GAP;
+                                                        setEmojiPanelAbove(spaceBelow < EMOJI_PANEL_HEIGHT + EMOJI_PANEL_GAP);
+                                                    }
+                                                }
+                                                setShowEmoji((s) => !s);
+                                            } }), withEmoji && showEmoji && (_jsx("div", { ref: emojiPanelRef, className: `emoji-panel ${emojiPanelAbove ? "emoji-panel--above" : ""}`, children: _jsx("div", { className: "emoji-grid", children: EMOJIS.map((e) => (_jsx("button", { type: "button", onMouseDown: (evt) => evt.preventDefault(), onClick: () => {
                                                         exec("insertText", e);
                                                         setShowEmoji(false);
                                                     }, className: "emoji-btn", children: e }, e))) }) }))] })] })] }) }))] }));

package/dist/MessageInputField/style.css

@@ -47,7 +47,6 @@
     pointer-events: none;
   }
 
-  /* Hidden file input */
   .message-input-field .hidden-file-input {
     display: none;
   }
@@ -116,10 +115,12 @@
     width: 20px !important;
   }
   
-  .message-input-field .divider {
+  .message-input-field .divide-vertical {
     align-self: stretch;
     position: relative;
     width: 1px;
+    height: 20px;
+    background-color: rgba(176, 176, 176, 1);
   }
   
   .message-input-field .line-icons-arrow-down-filled-icons-default {
@@ -130,19 +131,16 @@
     width: 20px !important;
   }
   
-  /* Toolbar clickable icons */
   .message-input-field .toolbar-icon {
     cursor: pointer;
   }
   
-  /* Emoji trigger wrapper */
   .message-input-field .emoji-trigger {
     position: relative;
     display: inline-block;
     height: 20px;
   }
   
-  /* Emoji panel overlay */
   .message-input-field .emoji-panel {
     position: absolute;
     top: 28px;
@@ -156,8 +154,12 @@
     z-index: 1000;
     overflow-y: scroll;
   }
+
+  .message-input-field .emoji-panel.emoji-panel--above {
+    top: auto;
+    bottom: 28px;
+  }
   
-  /* Emoji grid */
   .message-input-field .emoji-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
@@ -165,9 +167,7 @@
     max-height: 180px;
     overflow-y: auto;
   }
-  
-  /* Emoji button */
-  .message-input-field .emoji-btn {
+    .message-input-field .emoji-btn {
     font-size: 18px;
     line-height: 24px;
     width: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.11.2",
+  "version": "3.11.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",