react-mention-input 1.0.4 → 1.0.5

package/dist/MentionInput.d.ts

@@ -6,6 +6,9 @@ interface User {
 interface MentionInputProps {
     users: User[];
     placeholder?: string;
+    inputStyle?: React.CSSProperties;
+    suggestionListStyle?: React.CSSProperties;
+    suggestionItemStyle?: React.CSSProperties;
 }
 declare const MentionInput: React.FC<MentionInputProps>;
 export default MentionInput;

package/dist/MentionInput.js

@@ -1,6 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { useState } from 'react';
 var MentionInput = function (_a) {
-    var users = _a.users, placeholder = _a.placeholder;
+    var users = _a.users, placeholder = _a.placeholder, inputStyle = _a.inputStyle, suggestionListStyle = _a.suggestionListStyle, suggestionItemStyle = _a.suggestionItemStyle;
     var _b = useState(''), inputValue = _b[0], setInputValue = _b[1];
     var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
     var _d = useState(false), showSuggestions = _d[0], setShowSuggestions = _d[1];
@@ -27,24 +38,7 @@ var MentionInput = function (_a) {
         setShowSuggestions(false);
     };
     return (React.createElement("div", { style: { position: 'relative' } },
-        React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: placeholder || 'Type a message...', style: { width: '100%', padding: '10px' } }),
-        showSuggestions && (React.createElement("ul", { style: {
-                position: 'absolute',
-                top: '100%',
-                left: 0,
-                right: 0,
-                backgroundColor: '#fff',
-                border: '1px solid #ddd',
-                listStyle: 'none',
-                margin: 0,
-                padding: 0,
-                maxHeight: '150px',
-                overflowY: 'auto',
-                zIndex: 1,
-            } }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, style: {
-                padding: '8px',
-                cursor: 'pointer',
-                borderBottom: '1px solid #ddd',
-            } }, user.name)); })))));
+        React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: placeholder || 'Type a message...', style: __assign({ width: '100%', padding: '10px' }, inputStyle) }),
+        showSuggestions && (React.createElement("ul", { style: __assign({ position: 'absolute', top: '100%', left: 0, right: 0, backgroundColor: '#fff', border: '1px solid #ddd', listStyle: 'none', margin: 0, padding: 0, maxHeight: '150px', overflowY: 'auto', zIndex: 1 }, suggestionListStyle) }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, style: __assign({ padding: '8px', cursor: 'pointer', borderBottom: '1px solid #ddd' }, suggestionItemStyle) }, user.name)); })))));
 };
 export default MentionInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent, KeyboardEvent } from 'react';
+import React, { useState, ChangeEvent } from 'react';
 
 interface User {
   id: number;
@@ -8,9 +8,18 @@ interface User {
 interface MentionInputProps {
   users: User[];
   placeholder?: string;
+  inputStyle?: React.CSSProperties;
+  suggestionListStyle?: React.CSSProperties;
+  suggestionItemStyle?: React.CSSProperties;
 }
 
-const MentionInput: React.FC<MentionInputProps> = ({ users, placeholder }) => {
+const MentionInput: React.FC<MentionInputProps> = ({
+  users,
+  placeholder,
+  inputStyle,
+  suggestionListStyle,
+  suggestionItemStyle,
+}) => {
   const [inputValue, setInputValue] = useState<string>('');
   const [suggestions, setSuggestions] = useState<User[]>([]);
   const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
@@ -46,7 +55,7 @@ const MentionInput: React.FC<MentionInputProps> = ({ users, placeholder }) => {
         value={inputValue}
         onChange={handleInputChange}
         placeholder={placeholder || 'Type a message...'}
-        style={{ width: '100%', padding: '10px' }}
+        style={{ width: '100%', padding: '10px', ...inputStyle }}
       />
       {showSuggestions && (
         <ul
@@ -63,6 +72,7 @@ const MentionInput: React.FC<MentionInputProps> = ({ users, placeholder }) => {
             maxHeight: '150px',
             overflowY: 'auto',
             zIndex: 1,
+            ...suggestionListStyle,
           }}
         >
           {suggestions.map((user) => (
@@ -73,6 +83,7 @@ const MentionInput: React.FC<MentionInputProps> = ({ users, placeholder }) => {
                 padding: '8px',
                 cursor: 'pointer',
                 borderBottom: '1px solid #ddd',
+                ...suggestionItemStyle,
               }}
             >
               {user.name}