@ayseaistudio/ui-components 3.1.2 → 3.2.0

package/dist/MessageInputField/MessageInputField.d.ts

@@ -15,9 +15,14 @@ interface Props {
     withUnderline?: boolean;
     withStrikethrough?: boolean;
     withHash?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLDivElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onValueChange?: (value: string) => void;
+    onEnter?: () => void;
 }
 export declare const MessageInputField: {
-    ({ text, enter, richTextFormattingTools, className, placeholder, withPicture, withEmoji, withBold, withItalic, withUnderline, withStrikethrough, withHash, }: Props): React.JSX.Element;
+    ({ text, enter, richTextFormattingTools, className, placeholder, withPicture, withEmoji, withBold, withItalic, withUnderline, withStrikethrough, withHash, value, onChange, onKeyDown, onValueChange, onEnter, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
         enter: PropTypes.Requireable<boolean>;
@@ -31,6 +36,11 @@ export declare const MessageInputField: {
         withUnderline: PropTypes.Requireable<boolean>;
         withStrikethrough: PropTypes.Requireable<boolean>;
         withHash: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onEnter: PropTypes.Requireable<(...args: any[]) => any>;
     };
 };
 export {};

package/dist/MessageInputField/MessageInputField.js

@@ -4,7 +4,7 @@ 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";
-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, }) => {
+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);
@@ -20,6 +20,15 @@ export const MessageInputField = ({ text = "", enter = true, richTextFormattingT
             setIsEmpty(!editorRef.current.textContent || editorRef.current.textContent.trim().length === 0);
         }
     }, [text]);
+    // Keep editor content in sync when a controlled value is provided
+    useEffect(() => {
+        if (editorRef.current && value !== undefined) {
+            if (editorRef.current.textContent !== value) {
+                editorRef.current.textContent = value;
+            }
+            setIsEmpty(!value || value.trim().length === 0);
+        }
+    }, [value]);
     useEffect(() => {
         if (!showEmoji)
             return;
@@ -56,11 +65,26 @@ export const MessageInputField = ({ text = "", enter = true, richTextFormattingT
         "😀", "😁", "😂", "🤣", "😊", "😍", "🤔", "😎", "😅", "🙃",
         "👍", "🙏", "🎉", "🔥", "💡", "✅", "❌", "⚠️", "🚀", "❤️"
     ];
-    return (_jsxs("div", { className: `message-input-field ${className ?? ""}`, children: [_jsxs("div", { className: "frame", children: [_jsx("div", { ref: editorRef, className: `m-teri-sat-raporlar ${isEmpty ? "is-empty" : ""}`, contentEditable: true, suppressContentEditableWarning: true, tabIndex: 0, "data-placeholder": placeholder, onInput: () => {
+    return (_jsxs("div", { className: `message-input-field ${className ?? ""}`, children: [_jsxs("div", { className: "frame", children: [_jsx("div", { ref: editorRef, className: `m-teri-sat-raporlar ${isEmpty ? "is-empty" : ""}`, contentEditable: true, suppressContentEditableWarning: true, tabIndex: 0, "data-placeholder": placeholder, onKeyDown: (e) => {
+                            onKeyDown?.(e);
+                            if (enter && onEnter && e.key === "Enter" && !e.shiftKey) {
+                                e.preventDefault();
+                                onEnter?.();
+                            }
+                        }, onInput: (e) => {
                             if (editorRef.current) {
                                 setIsEmpty(!editorRef.current.textContent || editorRef.current.textContent.trim().length === 0);
                             }
-                        } }), enter && (_jsx("div", { className: "primary-button-wrapper", children: _jsx(PrimaryButton, { className: "primary-button-instance", color: "black", leftIcon: _jsx(IconArrowDown, { className: "icon-instance-node" }), size: "large", status: "default" }) }))] }), richTextFormattingTools && (_jsx("div", { className: "content", children: _jsxs("div", { className: "primary-feature", children: [_jsxs("div", { className: "text-feature", children: [withBold && _jsx(IconBold, { className: "icon-instance-node toolbar-icon", color: "#3D3D3D", size: 20, strokeWidth: 1.5, onMouseDown: onIconMouseDown, onClick: () => exec("bold") }), withItalic && _jsx(IconItalic, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("italic") }), withUnderline && _jsx(IconUnderline, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("underline") }), withStrikethrough && _jsx(IconStrikethrough, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("strikeThrough") })] }), _jsx("div", { className: "divide-vertical" }), _jsxs("div", { className: "text-feature", children: [withHash && _jsx(IconHash, { className: "icon-instance-node toolbar-icon", strokeWidth: 1.5, size: 20, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("insertText", "#") }), _jsxs("div", { className: "text-feature", children: [withPicture && _jsx(IconPhoto, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => fileInputRef.current?.click() }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden-file-input", onChange: (e) => {
+                            // Forward as a change-like event for consumers that use onChange
+                            if (onChange) {
+                                onChange(e);
+                            }
+                            // Convenience string callback
+                            if (onValueChange) {
+                                const currentText = e.currentTarget.textContent ?? "";
+                                onValueChange(currentText);
+                            }
+                        } }), enter && (_jsx("div", { className: "primary-button-wrapper", children: _jsx(PrimaryButton, { className: "primary-button-instance", color: "black", leftIcon: _jsx(IconArrowDown, { className: "icon-instance-node" }), size: "large", status: "default", onClick: () => onEnter?.() }) }))] }), richTextFormattingTools && (_jsx("div", { className: "content", children: _jsxs("div", { className: "primary-feature", children: [_jsxs("div", { className: "text-feature", children: [withBold && _jsx(IconBold, { className: "icon-instance-node toolbar-icon", color: "#3D3D3D", size: 20, strokeWidth: 1.5, onMouseDown: onIconMouseDown, onClick: () => exec("bold") }), withItalic && _jsx(IconItalic, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("italic") }), withUnderline && _jsx(IconUnderline, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("underline") }), withStrikethrough && _jsx(IconStrikethrough, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("strikeThrough") })] }), _jsx("div", { className: "divide-vertical" }), _jsxs("div", { className: "text-feature", children: [withHash && _jsx(IconHash, { className: "icon-instance-node toolbar-icon", strokeWidth: 1.5, size: 20, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("insertText", "#") }), _jsxs("div", { className: "text-feature", children: [withPicture && _jsx(IconPhoto, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => fileInputRef.current?.click() }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden-file-input", onChange: (e) => {
                                                 const file = e.target.files?.[0];
                                                 if (file)
                                                     handleInsertImage(file);
@@ -84,4 +108,9 @@ MessageInputField.propTypes = {
     withUnderline: PropTypes.bool,
     withStrikethrough: PropTypes.bool,
     withHash: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onValueChange: PropTypes.func,
+    onEnter: PropTypes.func,
 };

package/dist/MessageInputField/style.css

@@ -73,6 +73,8 @@
     height: 40px !important;
     padding: 12px 6px !important;
     width: 40px !important;
+    box-shadow: none !important;
+
   }
   
   .message-input-field .content {

package/dist/ProfileSelector/ProfileSelector.d.ts

@@ -7,14 +7,14 @@ interface AvatarData {
     version?: "default" | "half";
 }
 interface Props {
-    icon: boolean;
+    icon?: boolean;
     status?: "pressing" | "hover" | "default";
-    size: "large" | "medium";
+    size?: "large" | "medium";
     version: "multiple" | "single";
     className?: any;
-    text: string;
-    subtext: string;
-    avatarLetter: string;
+    text?: string;
+    subtext?: string;
+    avatarLetter?: string;
     avatars?: AvatarData[];
     multipleAvatarSize?: "large" | "medium" | "small";
     multipleAvatarClassName?: any;

package/dist/TabButtonForSidebar/TabButtonForSidebar.d.ts

@@ -0,0 +1,29 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text?: string;
+    withLeftIcon?: boolean;
+    withText?: boolean;
+    withRightIcon?: boolean;
+    size?: "medium";
+    status?: "selected" | "default";
+    align?: "left-align";
+    version?: "no-background";
+    className?: any;
+    icon?: React.JSX.Element;
+    divClassName?: any;
+}
+export declare const TabButtonForSidebar: {
+    ({ text, withLeftIcon, withText, withRightIcon, size, status, align, version, className, icon, divClassName, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        withLeftIcon: PropTypes.Requireable<boolean>;
+        withText: PropTypes.Requireable<boolean>;
+        withRightIcon: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        align: PropTypes.Requireable<string>;
+        version: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/TabButtonForSidebar/TabButtonForSidebar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { IconLayoutDashboard } from "@tabler/icons-react";
+export const TabButtonForSidebar = ({ text = "Button", withLeftIcon = true, withText = true, withRightIcon = true, size, status, align, version, className, icon = _jsx(IconLayoutDashboard, { className: "icons-18", color: "#6D6D6D" }), divClassName, }) => {
+    return (_jsxs("div", { className: `tab-button ${className}`, children: [withLeftIcon && _jsx(_Fragment, { children: icon }), withText && (_jsx("div", { className: `button ${status} ${divClassName}`, children: text })), withRightIcon && (_jsx(IconLayoutDashboard, { className: "icons-18", color: status === "selected" ? "#3D3D3D" : "#6D6D6D" }))] }));
+};
+TabButtonForSidebar.propTypes = {
+    text: PropTypes.string,
+    withLeftIcon: PropTypes.bool,
+    withText: PropTypes.bool,
+    withRightIcon: PropTypes.bool,
+    size: PropTypes.oneOf(["medium"]),
+    status: PropTypes.oneOf(["selected", "default"]),
+    align: PropTypes.oneOf(["left-align"]),
+    version: PropTypes.oneOf(["no-background"]),
+};

package/dist/TabButtonForSidebar/index.d.ts

@@ -0,0 +1 @@
+export { TabButtonForSidebar } from "./TabButtonForSidebar";

package/dist/TabButtonForSidebar/index.js

@@ -0,0 +1 @@
+export { TabButtonForSidebar } from "./TabButtonForSidebar";

package/dist/TabButtonForSidebar/style.css

@@ -0,0 +1,40 @@
+.tab-button {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  padding: 8px;
+  position: relative;
+  cursor: pointer;
+}
+
+.tab-button .button {
+  flex: 1;
+  font-family: var(--b1-medium-font-family);
+  font-size: var(--b1-medium-font-size);
+  font-style: var(--b1-medium-font-style);
+  font-weight: var(--b1-medium-font-weight);
+  letter-spacing: var(--b1-medium-letter-spacing);
+  line-height: var(--b1-medium-line-height);
+  position: relative;
+}
+
+.tab-button .icons-18 {
+  height: 20px !important;
+  position: relative !important;
+  width: 20px !important;
+}
+
+.tab-button .default {
+  color: #6d6d6d;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.tab-button .selected {
+  color: #3d3d3d;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}

package/dist/index.d.ts

@@ -35,3 +35,4 @@ export { MessageInput } from "./MessageInput/MessageInput";
 export { Flag } from "./Flag/Flag";
 export { MessageInputField } from "./MessageInputField/MessageInputField";
 export { TimeSelector } from "./TimeSelector/TimeSelector";
+export { TabButtonForSidebar } from "./TabButtonForSidebar/TabButtonForSidebar";

package/dist/index.js

@@ -35,3 +35,4 @@ export { MessageInput } from "./MessageInput/MessageInput";
 export { Flag } from "./Flag/Flag";
 export { MessageInputField } from "./MessageInputField/MessageInputField";
 export { TimeSelector } from "./TimeSelector/TimeSelector";
+export { TabButtonForSidebar } from "./TabButtonForSidebar/TabButtonForSidebar";

package/package.json

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