Fix #7864: Mention add variant (#7865)

Author: melloware

components/lib/mention/Mention.js

@@ -537,6 +537,7 @@ export const Mention = React.memo(
                 style: props.inputStyle,
                 ...inputProps,
                 unstyled: props.unstyled,
+                variant: props.variant,
                 autoResize: props.autoResize,
                 onFocus: onFocus,
                 onBlur: onBlur,

components/lib/mention/MentionBase.js

@@ -76,13 +76,6 @@ export const MentionBase = ComponentBase.extend({
         inputRef: null,
         inputStyle: null,
         itemTemplate: null,
-        panelClassName: null,
-        panelStyle: null,
-        scrollHeight: '200px',
-        style: null,
-        suggestions: null,
-        transitionOptions: null,
-        trigger: '@',
         onBlur: null,
         onChange: null,
         onFocus: null,
@@ -91,6 +84,14 @@ export const MentionBase = ComponentBase.extend({
         onSearch: null,
         onSelect: null,
         onShow: null,
+        panelClassName: null,
+        panelStyle: null,
+        scrollHeight: '200px',
+        style: null,
+        suggestions: null,
+        transitionOptions: null,
+        trigger: '@',
+        variant: null,
         children: undefined
     },
     css: {

components/lib/mention/mention.d.ts

@@ -234,6 +234,11 @@ export interface MentionProps extends Omit<React.DetailedHTMLProps<React.Textare
      * @defaultValue "@"
      */
     trigger?: string | string[] | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {MentionPassThroughOptions}