primereact 9.5.0 → 9.6.0

package/mention/mention.esm.js

@@ -1,29 +1,15 @@
 import * as React from 'react';
-import PrimeReact from 'primereact/api';
+import PrimeReact, { PrimeReactContext } from 'primereact/api';
 import { CSSTransition } from 'primereact/csstransition';
 import { useOverlayListener, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { KeyFilter } from 'primereact/keyfilter';
 import { Tooltip } from 'primereact/tooltip';
-import { ObjectUtils, classNames, DomHandler, ZIndexUtils } from 'primereact/utils';
+import { ObjectUtils, classNames, mergeProps, DomHandler, ZIndexUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { OverlayService } from 'primereact/overlayservice';
 import { Portal } from 'primereact/portal';
 import { Ripple } from 'primereact/ripple';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -120,13 +106,29 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var InputTextareaBase = {
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+var InputTextareaBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'InputTextarea',
     autoResize: false,
     keyfilter: null,
     onBlur: null,
     onFocus: null,
+    onBeforeInput: null,
     onInput: null,
     onKeyDown: null,
     onKeyUp: null,
@@ -135,19 +137,18 @@ var InputTextareaBase = {
     tooltipOptions: null,
     validateOnly: false,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, InputTextareaBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, InputTextareaBase.defaultProps);
   }
-};
+});
 
 var InputTextarea = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = InputTextareaBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = InputTextareaBase.getProps(inProps, context);
   var elementRef = React.useRef(ref);
   var cachedScrollHeight = React.useRef(0);
+  var _InputTextareaBase$se = InputTextareaBase.setMetaData({
+      props: props
+    }),
+    ptm = _InputTextareaBase$se.ptm;
   var onFocus = function onFocus(event) {
     if (props.autoResize) {
       resize();
@@ -172,6 +173,12 @@ var InputTextarea = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
     }
   };
+  var onBeforeInput = function onBeforeInput(event) {
+    props.onBeforeInput && props.onBeforeInput(event);
+    if (props.keyfilter) {
+      KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
+    }
+  };
   var onPaste = function onPaste(event) {
     props.onPaste && props.onPaste(event);
     if (props.keyfilter) {
@@ -218,30 +225,32 @@ var InputTextarea = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
     return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue);
   }, [props.value, props.defaultValue]);
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-  var otherProps = InputTextareaBase.getOtherProps(props);
   var className = classNames('p-inputtextarea p-inputtext p-component', {
     'p-disabled': props.disabled,
     'p-filled': isFilled,
     'p-inputtextarea-resizable': props.autoResize
   }, props.className);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", _extends({
-    ref: elementRef
-  }, otherProps, {
+  var rootProps = mergeProps({
+    ref: elementRef,
     className: className,
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyUp: onKeyUp,
     onKeyDown: onKeyDown,
+    onBeforeInput: onBeforeInput,
     onInput: onInput,
     onPaste: onPaste
-  })), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, InputTextareaBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", rootProps), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
-  }, props.tooltipOptions)));
+  }, props.tooltipOptions, {
+    pt: ptm('tooltip')
+  })));
 }));
 InputTextarea.displayName = 'InputTextarea';
 
-var MentionBase = {
+var MentionBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Mention',
     autoHighlight: true,
@@ -272,19 +281,14 @@ var MentionBase = {
     onSelect: null,
     onShow: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, MentionBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, MentionBase.defaultProps);
   }
-};
+});
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = MentionBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = MentionBase.getProps(inProps, context);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     overlayVisibleState = _React$useState2[0],
@@ -306,6 +310,23 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   var inputRef = React.useRef(props.inputRef);
   var listRef = React.useRef(null);
   var timeout = React.useRef(null);
+  var _MentionBase$setMetaD = MentionBase.setMetaData({
+      props: props,
+      state: {
+        overlayVisible: overlayVisibleState,
+        focused: focusedState,
+        searching: searchingState,
+        trigger: triggerState
+      }
+    }),
+    ptm = _MentionBase$setMetaD.ptm;
+  var getPTOptions = function getPTOptions(item, suggestion) {
+    return ptm(suggestion, {
+      context: {
+        trigger: triggerState ? triggerState.key : ''
+      }
+    });
+  };
   var _useOverlayListener = useOverlayListener({
       target: elementRef,
       overlay: overlayRef,
@@ -327,7 +348,7 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     setTriggerState(null);
   };
   var onOverlayEnter = function onOverlayEnter() {
-    ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
+    ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex['overlay'] || PrimeReact.zIndex['overlay']);
     alignOverlay();
   };
   var onOverlayEntering = function onOverlayEntering() {
@@ -595,21 +616,23 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       trigger: triggerState ? triggerState.key : '',
       index: index
     }) : formatValue(suggestion);
-    return /*#__PURE__*/React.createElement("li", {
+    var itemProps = mergeProps({
       key: key,
-      className: "p-mention-item",
+      className: 'p-mention-item',
       onClick: function onClick(e) {
         return onItemClick(e, suggestion);
       }
-    }, content, /*#__PURE__*/React.createElement(Ripple, null));
+    }, getPTOptions(suggestion, 'item'));
+    return /*#__PURE__*/React.createElement("li", itemProps, content, /*#__PURE__*/React.createElement(Ripple, null));
   };
   var createList = function createList() {
+    var itemsProps = mergeProps({
+      ref: listRef,
+      className: 'p-mention-items'
+    }, ptm('items'));
     if (props.suggestions) {
       var items = props.suggestions.map(createItem);
-      return /*#__PURE__*/React.createElement("ul", {
-        ref: listRef,
-        className: "p-mention-items"
-      }, items);
+      return /*#__PURE__*/React.createElement("ul", itemsProps, items);
     }
     return null;
   };
@@ -621,6 +644,12 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     var header = ObjectUtils.getJSXElement(props.headerTemplate, props);
     var footer = ObjectUtils.getJSXElement(props.footerTemplate, props);
     var list = createList();
+    var panelProps = mergeProps({
+      ref: overlayRef,
+      className: panelClassName,
+      style: panelStyle,
+      onClick: onPanelClick
+    }, ptm('panel'));
     var panel = /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: overlayRef,
       classNames: "p-connected-overlay",
@@ -636,12 +665,7 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       onEntered: onOverlayEntered,
       onExit: onOverlayExit,
       onExited: onOverlayExited
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: overlayRef,
-      className: panelClassName,
-      style: panelStyle,
-      onClick: onPanelClick
-    }, header, list, footer));
+    }, /*#__PURE__*/React.createElement("div", panelProps, header, list, footer));
     return /*#__PURE__*/React.createElement(Portal, {
       element: panel,
       appendTo: "self"
@@ -654,24 +678,26 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   var inputClassName = classNames('p-mention-input', props.inputClassName);
   var inputProps = MentionBase.getOtherProps(props);
   var panel = createPanel();
-  return /*#__PURE__*/React.createElement("div", {
-    ref: elementRef,
-    id: props.id,
-    className: className,
-    style: props.style
-  }, /*#__PURE__*/React.createElement(InputTextarea, _extends({
+  var inputMentionProps = mergeProps(_objectSpread(_objectSpread({
     ref: inputRef,
     id: props.inputId,
     className: inputClassName,
     style: props.inputStyle
-  }, inputProps, {
+  }, inputProps), {}, {
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
     onInput: onInput,
     onKeyUp: onKeyUp,
     onChange: onChange
-  })), panel);
+  }), ptm('input'));
+  var rootProps = mergeProps({
+    ref: elementRef,
+    id: props.id,
+    className: className,
+    style: props.style
+  }, MentionBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(InputTextarea, inputMentionProps), panel);
 }));
 Mention.displayName = 'Mention';
 

package/mention/mention.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import t from"primereact/api";import{CSSTransition as n}from"primereact/csstransition";import{useOverlayListener as r,useUpdateEffect as i,useUnmountEffect as o}from"primereact/hooks";import{KeyFilter as l}from"primereact/keyfilter";import{Tooltip as u}from"primereact/tooltip";import{ObjectUtils as a,classNames as s,DomHandler as c,ZIndexUtils as f}from"primereact/utils";import{OverlayService as p}from"primereact/overlayservice";import{Portal as g}from"primereact/portal";import{Ripple as m}from"primereact/ripple";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d.apply(this,arguments)}function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function h(e,t){if("object"!==y(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==y(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function v(e){var t=h(e,"string");return"symbol"===y(t)?t:String(t)}function b(e,t,n){return(t=v(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function O(e){if(Array.isArray(e))return e}function E(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,l,u=[],a=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);a=!0);}catch(e){s=!0,i=e}finally{try{if(!a&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw i}}return u}}function x(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function S(e,t){if(e){if("string"==typeof e)return x(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?x(e,t):void 0}}function w(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function P(e,t){return O(e)||E(e,t)||S(e,t)||w()}var C={defaultProps:{__TYPE:"InputTextarea",autoResize:!1,keyfilter:null,onBlur:null,onFocus:null,onInput:null,onKeyDown:null,onKeyUp:null,onPaste:null,tooltip:null,tooltipOptions:null,validateOnly:!1,children:void 0},getProps:function(e){return a.getMergedProps(e,C.defaultProps)},getOtherProps:function(e){return a.getDiffProps(e,C.defaultProps)}},I=e.memo(e.forwardRef((function(t,n){var r=C.getProps(t),i=e.useRef(n),o=e.useRef(0),f=function(e){var t=i.current;t&&c.isVisible(t)&&(o.current||(o.current=t.scrollHeight,t.style.overflow="hidden"),(o.current!==t.scrollHeight||e)&&(t.style.height="",t.style.height=t.scrollHeight+"px",parseFloat(t.style.height)>=parseFloat(t.style.maxHeight)?(t.style.overflowY="scroll",t.style.height=t.style.maxHeight):t.style.overflow="hidden",o.current=t.scrollHeight))};e.useEffect((function(){a.combinedRefs(i,n)}),[i,n]),e.useEffect((function(){r.autoResize&&f(!0)}),[r.autoResize]);var p=e.useMemo((function(){return a.isNotEmpty(r.value)||a.isNotEmpty(r.defaultValue)}),[r.value,r.defaultValue]),g=a.isNotEmpty(r.tooltip),m=C.getOtherProps(r),y=s("p-inputtextarea p-inputtext p-component",{"p-disabled":r.disabled,"p-filled":p,"p-inputtextarea-resizable":r.autoResize},r.className);return e.createElement(e.Fragment,null,e.createElement("textarea",d({ref:i},m,{className:y,onFocus:function(e){r.autoResize&&f(),r.onFocus&&r.onFocus(e)},onBlur:function(e){r.autoResize&&f(),r.onBlur&&r.onBlur(e)},onKeyUp:function(e){r.autoResize&&f(),r.onKeyUp&&r.onKeyUp(e)},onKeyDown:function(e){r.onKeyDown&&r.onKeyDown(e),r.keyfilter&&l.onKeyPress(e,r.keyfilter,r.validateOnly)},onInput:function(e){var t=e.target;r.autoResize&&f(a.isEmpty(t.value)),r.onInput&&r.onInput(e),a.isNotEmpty(t.value)?c.addClass(t,"p-filled"):c.removeClass(t,"p-filled")},onPaste:function(e){r.onPaste&&r.onPaste(e),r.keyfilter&&l.onPaste(e,r.keyfilter,r.validateOnly)}})),g&&e.createElement(u,d({target:i,content:r.tooltip},r.tooltipOptions)))})));I.displayName="InputTextarea";var R={defaultProps:{__TYPE:"Mention",autoHighlight:!0,className:null,delay:0,field:null,footerTemplate:null,headerTemplate:null,id:null,inputClassName:null,inputId:null,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,onHide:null,onInput:null,onSearch:null,onSelect:null,onShow:null,children:void 0},getProps:function(e){return a.getMergedProps(e,R.defaultProps)},getOtherProps:function(e){return a.getDiffProps(e,R.defaultProps)}};function k(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?k(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):k(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var j=e.memo(e.forwardRef((function(l,u){var y=R.getProps(l),h=P(e.useState(!1),2),v=h[0],b=h[1],O=P(e.useState(!1),2),E=O[0],x=O[1],S=P(e.useState(!1),2),w=S[0],C=S[1],k=P(e.useState(null),2),j=k[0],D=k[1],T=e.useRef(null),H=e.useRef(null),A=e.useRef(y.inputRef),F=e.useRef(null),K=e.useRef(null),z=P(r({target:T,overlay:H,listener:function(e,t){t.valid&&U()},when:v}),2),B=z[0],M=z[1],V=function(){b(!0)},U=function(){b(!1),C(!1),D(null)},_=function(){f.set("overlay",H.current,t.autoZIndex,t.zIndex.overlay),Z()},J=function(){y.autoHighlight&&y.suggestions&&y.suggestions.length&&c.addClass(F.current.firstChild,"p-highlight")},X=function(){B(),y.onShow&&y.onShow()},Y=function(){M()},q=function(){f.clear(H.current),y.onHide&&y.onHide()},Z=function(){var e=j.key,t=j.index,n=A.current.value,r=c.getCursorOffset(A.current,n.substring(0,t-1),n.substring(t),e);H.current.style.transformOrigin="top",H.current.style.left="calc(".concat(r.left,"px + 1rem)"),H.current.style.top="calc(".concat(r.top,"px + 1.2rem)")},$=function(e){p.emit("overlay-click",{originalEvent:e,target:T.current})},G=function(e,t,n){if(!j){var r=Array.isArray(y.trigger)?y.trigger.find((function(e){return e===t})):y.trigger===t?y.trigger:null;if(r)return{key:r,index:n};var i=e.substring(0,n).lastIndexOf(" "),o=L(e,n);if(o.index>i)return o}return j},L=function(e,t){if(Array.isArray(y.trigger)){var n={};return y.trigger.forEach((function(r){var i=e.substring(0,t).lastIndexOf(r);-1!==i&&(i>n.index||!n.index)&&(n={key:r,index:-1!==i?i+1:-1})})),n}var r=e.substring(0,t).lastIndexOf(y.trigger);return{key:y.trigger,index:-1!==r?r+1:-1}},Q=function(e){K.current&&clearTimeout(K.current);var t=e.target,n=t.value,r=t.selectionStart,i=n.substring(r-1,r);if(" "!==i){var o=G(n,i,r);if(o&&o.index>-1){var l=n.substring(o.index,r);K.current=setTimeout((function(){W(e,l,o)}),y.delay)}}else U()},W=function(e,t,n){y.onSearch&&(C(!0),D(n),y.onSearch({originalEvent:e,trigger:n.key,query:t}))},ee=function(e,t){var n=A.current.value,r=e.target.selectionStart,i=n.indexOf(" ",j.index),o=n.substring(j.index,i>-1?i:r),l=te(t).replace(/\s+/g,"");if(o.trim()!==l){var u=n.substring(0,j.index),a=n.substring(j.index+o.length);A.current.value="".concat(u).concat(l," ").concat(a),e.target=A.current,y.onChange&&y.onChange(e)}var s=j.index+l.length+1;A.current.setSelectionRange(s,s),U(),y.onSelect&&y.onSelect({originalEvent:e,suggestion:t})},te=function(e){if(e){var t=Array.isArray(y.field)?y.field[y.trigger.findIndex((function(e){return e===j.key}))]:y.field;return t?a.resolveFieldData(e,t):e}return""},ne=function(e,t){c.focus(A.current),ee(e,t)},re=A.current&&A.current.value,ie=e.useMemo((function(){return a.isNotEmpty(y.value)||a.isNotEmpty(y.defaultValue)||a.isNotEmpty(re)}),[y.value,y.defaultValue,re]);e.useImperativeHandle(u,(function(){return{props:y,show:V,hide:U,focus:function(){return c.focus(A.current)},getElement:function(){return T.current},getOverlay:function(){return H.current},getInput:function(){return A.current}}})),e.useEffect((function(){a.combinedRefs(A,y.inputRef)}),[A,y.inputRef]),i((function(){w&&(y.suggestions&&y.suggestions.length?V():U(),v&&Z(),C(!1))}),[y.suggestions]),i((function(){!ie&&c.hasClass(T.current,"p-inputwrapper-filled")&&c.removeClass(T.current,"p-inputwrapper-filled")}),[ie]),o((function(){f.clear(H.current)}));var oe,le,ue,ae,se,ce=function(t,n){var r=n+"_item",i=y.itemTemplate?a.getJSXElement(y.itemTemplate,t,{trigger:j?j.key:"",index:n}):te(t);return e.createElement("li",{key:r,className:"p-mention-item",onClick:function(e){return ne(e,t)}},i,e.createElement(m,null))},fe=function(){if(y.suggestions){var t=y.suggestions.map(ce);return e.createElement("ul",{ref:F,className:"p-mention-items"},t)}return null},pe=s("p-mention p-component p-inputwrapper",{"p-inputwrapper-filled":ie,"p-inputwrapper-focus":E},y.className),ge=s("p-mention-input",y.inputClassName),me=R.getOtherProps(y),de=(oe=s("p-mention-panel p-component",y.panelClassName),le=N({maxHeight:y.scrollHeight},y.panelStyle),ue=a.getJSXElement(y.headerTemplate,y),ae=a.getJSXElement(y.footerTemplate,y),se=fe(),e.createElement(g,{element:e.createElement(n,{nodeRef:H,classNames:"p-connected-overlay",in:v,timeout:{enter:120,exit:100},options:y.transitionOptions,unmountOnExit:!0,onEnter:_,onEntering:J,onEntered:X,onExit:Y,onExited:q},e.createElement("div",{ref:H,className:oe,style:le,onClick:$},ue,se,ae)),appendTo:"self"}));return e.createElement("div",{ref:T,id:y.id,className:pe,style:y.style},e.createElement(I,d({ref:A,id:y.inputId,className:ge,style:y.inputStyle},me,{onFocus:function(e){x(!0),y.onFocus&&y.onFocus(e)},onBlur:function(e){x(!1),y.onBlur&&y.onBlur(e)},onKeyDown:function(e){if(v){var t=c.findSingle(H.current,"li.p-highlight");switch(e.which){case 40:if(t){var n=t.nextElementSibling;n&&(c.addClass(n,"p-highlight"),c.removeClass(t,"p-highlight"),c.scrollInView(H.current,n))}else(t=c.findSingle(H.current,"li"))&&c.addClass(t,"p-highlight");e.preventDefault();break;case 38:if(t){var r=t.previousElementSibling;r&&(c.addClass(r,"p-highlight"),c.removeClass(t,"p-highlight"),c.scrollInView(H.current,r))}e.preventDefault();break;case 8:var i=e.target,o=i.selectionStart;i.value.substring(o-1,o)===j.key&&U();break;case 13:t&&ee(e,y.suggestions[c.index(t)]),e.preventDefault();break;case 27:U(),e.preventDefault()}}},onInput:function(e){y.onInput&&y.onInput(e),e.target.value.length>0?c.addClass(T.current,"p-inputwrapper-filled"):c.removeClass(T.current,"p-inputwrapper-filled")},onKeyUp:function(e){37!==e.which&&39!==e.which||Q(e)},onChange:function(e){y.onChange&&y.onChange(e),Q(e)}})),de)})));j.displayName="Mention";export{j as Mention};
+import*as e from"react";import t,{PrimeReactContext as n}from"primereact/api";import{CSSTransition as r}from"primereact/csstransition";import{useOverlayListener as i,useUpdateEffect as o,useUnmountEffect as l}from"primereact/hooks";import{KeyFilter as u}from"primereact/keyfilter";import{Tooltip as a}from"primereact/tooltip";import{ObjectUtils as s,classNames as c,mergeProps as p,DomHandler as f,ZIndexUtils as g}from"primereact/utils";import{ComponentBase as m}from"primereact/componentbase";import{OverlayService as y}from"primereact/overlayservice";import{Portal as d}from"primereact/portal";import{Ripple as v}from"primereact/ripple";function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function b(e,t){if("object"!==h(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==h(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function x(e){var t=b(e,"string");return"symbol"===h(t)?t:String(t)}function O(e,t,n){return(t=x(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(e){if(Array.isArray(e))return e}function S(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,l,u=[],a=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);a=!0);}catch(e){s=!0,i=e}finally{try{if(!a&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw i}}return u}}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function I(e,t){if(e){if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?w(e,t):void 0}}function C(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function k(e,t){return E(e)||S(e,t)||I(e,t)||C()}function P(){return P=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},P.apply(this,arguments)}var R=m.extend({defaultProps:{__TYPE:"InputTextarea",autoResize:!1,keyfilter:null,onBlur:null,onFocus:null,onBeforeInput:null,onInput:null,onKeyDown:null,onKeyUp:null,onPaste:null,tooltip:null,tooltipOptions:null,validateOnly:!1,children:void 0}}),N=e.memo(e.forwardRef((function(t,r){var i=e.useContext(n),o=R.getProps(t,i),l=e.useRef(r),g=e.useRef(0),m=R.setMetaData({props:o}).ptm,y=function(e){var t=l.current;t&&f.isVisible(t)&&(g.current||(g.current=t.scrollHeight,t.style.overflow="hidden"),(g.current!==t.scrollHeight||e)&&(t.style.height="",t.style.height=t.scrollHeight+"px",parseFloat(t.style.height)>=parseFloat(t.style.maxHeight)?(t.style.overflowY="scroll",t.style.height=t.style.maxHeight):t.style.overflow="hidden",g.current=t.scrollHeight))};e.useEffect((function(){s.combinedRefs(l,r)}),[l,r]),e.useEffect((function(){o.autoResize&&y(!0)}),[o.autoResize]);var d=e.useMemo((function(){return s.isNotEmpty(o.value)||s.isNotEmpty(o.defaultValue)}),[o.value,o.defaultValue]),v=s.isNotEmpty(o.tooltip),h=c("p-inputtextarea p-inputtext p-component",{"p-disabled":o.disabled,"p-filled":d,"p-inputtextarea-resizable":o.autoResize},o.className),b=p({ref:l,className:h,onFocus:function(e){o.autoResize&&y(),o.onFocus&&o.onFocus(e)},onBlur:function(e){o.autoResize&&y(),o.onBlur&&o.onBlur(e)},onKeyUp:function(e){o.autoResize&&y(),o.onKeyUp&&o.onKeyUp(e)},onKeyDown:function(e){o.onKeyDown&&o.onKeyDown(e),o.keyfilter&&u.onKeyPress(e,o.keyfilter,o.validateOnly)},onBeforeInput:function(e){o.onBeforeInput&&o.onBeforeInput(e),o.keyfilter&&u.onBeforeInput(e,o.keyfilter,o.validateOnly)},onInput:function(e){var t=e.target;o.autoResize&&y(s.isEmpty(t.value)),o.onInput&&o.onInput(e),s.isNotEmpty(t.value)?f.addClass(t,"p-filled"):f.removeClass(t,"p-filled")},onPaste:function(e){o.onPaste&&o.onPaste(e),o.keyfilter&&u.onPaste(e,o.keyfilter,o.validateOnly)}},R.getOtherProps(o),m("root"));return e.createElement(e.Fragment,null,e.createElement("textarea",b),v&&e.createElement(a,P({target:l,content:o.tooltip},o.tooltipOptions,{pt:m("tooltip")})))})));N.displayName="InputTextarea";var j=m.extend({defaultProps:{__TYPE:"Mention",autoHighlight:!0,className:null,delay:0,field:null,footerTemplate:null,headerTemplate:null,id:null,inputClassName:null,inputId:null,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,onHide:null,onInput:null,onSearch:null,onSelect:null,onShow:null,children:void 0}});function D(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function T(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?D(Object(n),!0).forEach((function(t){O(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):D(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var H=e.memo(e.forwardRef((function(u,a){var m=e.useContext(n),h=j.getProps(u,m),b=k(e.useState(!1),2),x=b[0],O=b[1],E=k(e.useState(!1),2),S=E[0],w=E[1],I=k(e.useState(!1),2),C=I[0],P=I[1],R=k(e.useState(null),2),D=R[0],H=R[1],B=e.useRef(null),A=e.useRef(null),F=e.useRef(h.inputRef),z=e.useRef(null),K=e.useRef(null),V=j.setMetaData({props:h,state:{overlayVisible:x,focused:S,searching:C,trigger:D}}).ptm,M=function(e,t){return V(t,{context:{trigger:D?D.key:""}})},U=k(i({target:B,overlay:A,listener:function(e,t){t.valid&&Y()},when:x}),2),_=U[0],J=U[1],X=function(){O(!0)},Y=function(){O(!1),P(!1),H(null)},Z=function(){g.set("overlay",A.current,m&&m.autoZIndex||t.autoZIndex,m&&m.zIndex.overlay||t.zIndex.overlay),Q()},q=function(){h.autoHighlight&&h.suggestions&&h.suggestions.length&&f.addClass(z.current.firstChild,"p-highlight")},$=function(){_(),h.onShow&&h.onShow()},G=function(){J()},L=function(){g.clear(A.current),h.onHide&&h.onHide()},Q=function(){var e=D.key,t=D.index,n=F.current.value,r=f.getCursorOffset(F.current,n.substring(0,t-1),n.substring(t),e);A.current.style.transformOrigin="top",A.current.style.left="calc(".concat(r.left,"px + 1rem)"),A.current.style.top="calc(".concat(r.top,"px + 1.2rem)")},W=function(e){y.emit("overlay-click",{originalEvent:e,target:B.current})},ee=function(e,t,n){if(!D){var r=Array.isArray(h.trigger)?h.trigger.find((function(e){return e===t})):h.trigger===t?h.trigger:null;if(r)return{key:r,index:n};var i=e.substring(0,n).lastIndexOf(" "),o=te(e,n);if(o.index>i)return o}return D},te=function(e,t){if(Array.isArray(h.trigger)){var n={};return h.trigger.forEach((function(r){var i=e.substring(0,t).lastIndexOf(r);-1!==i&&(i>n.index||!n.index)&&(n={key:r,index:-1!==i?i+1:-1})})),n}var r=e.substring(0,t).lastIndexOf(h.trigger);return{key:h.trigger,index:-1!==r?r+1:-1}},ne=function(e){K.current&&clearTimeout(K.current);var t=e.target,n=t.value,r=t.selectionStart,i=n.substring(r-1,r);if(" "!==i){var o=ee(n,i,r);if(o&&o.index>-1){var l=n.substring(o.index,r);K.current=setTimeout((function(){re(e,l,o)}),h.delay)}}else Y()},re=function(e,t,n){h.onSearch&&(P(!0),H(n),h.onSearch({originalEvent:e,trigger:n.key,query:t}))},ie=function(e,t){var n=F.current.value,r=e.target.selectionStart,i=n.indexOf(" ",D.index),o=n.substring(D.index,i>-1?i:r),l=oe(t).replace(/\s+/g,"");if(o.trim()!==l){var u=n.substring(0,D.index),a=n.substring(D.index+o.length);F.current.value="".concat(u).concat(l," ").concat(a),e.target=F.current,h.onChange&&h.onChange(e)}var s=D.index+l.length+1;F.current.setSelectionRange(s,s),Y(),h.onSelect&&h.onSelect({originalEvent:e,suggestion:t})},oe=function(e){if(e){var t=Array.isArray(h.field)?h.field[h.trigger.findIndex((function(e){return e===D.key}))]:h.field;return t?s.resolveFieldData(e,t):e}return""},le=function(e,t){f.focus(F.current),ie(e,t)},ue=F.current&&F.current.value,ae=e.useMemo((function(){return s.isNotEmpty(h.value)||s.isNotEmpty(h.defaultValue)||s.isNotEmpty(ue)}),[h.value,h.defaultValue,ue]);e.useImperativeHandle(a,(function(){return{props:h,show:X,hide:Y,focus:function(){return f.focus(F.current)},getElement:function(){return B.current},getOverlay:function(){return A.current},getInput:function(){return F.current}}})),e.useEffect((function(){s.combinedRefs(F,h.inputRef)}),[F,h.inputRef]),o((function(){C&&(h.suggestions&&h.suggestions.length?X():Y(),x&&Q(),P(!1))}),[h.suggestions]),o((function(){!ae&&f.hasClass(B.current,"p-inputwrapper-filled")&&f.removeClass(B.current,"p-inputwrapper-filled")}),[ae]),l((function(){g.clear(A.current)}));var se,ce,pe,fe,ge,me,ye=function(t,n){var r=n+"_item",i=h.itemTemplate?s.getJSXElement(h.itemTemplate,t,{trigger:D?D.key:"",index:n}):oe(t),o=p({key:r,className:"p-mention-item",onClick:function(e){return le(e,t)}},M(0,"item"));return e.createElement("li",o,i,e.createElement(v,null))},de=function(){var t=p({ref:z,className:"p-mention-items"},V("items"));if(h.suggestions){var n=h.suggestions.map(ye);return e.createElement("ul",t,n)}return null},ve=c("p-mention p-component p-inputwrapper",{"p-inputwrapper-filled":ae,"p-inputwrapper-focus":S},h.className),he=c("p-mention-input",h.inputClassName),be=j.getOtherProps(h),xe=(se=c("p-mention-panel p-component",h.panelClassName),ce=T({maxHeight:h.scrollHeight},h.panelStyle),pe=s.getJSXElement(h.headerTemplate,h),fe=s.getJSXElement(h.footerTemplate,h),ge=de(),me=p({ref:A,className:se,style:ce,onClick:W},V("panel")),e.createElement(d,{element:e.createElement(r,{nodeRef:A,classNames:"p-connected-overlay",in:x,timeout:{enter:120,exit:100},options:h.transitionOptions,unmountOnExit:!0,onEnter:Z,onEntering:q,onEntered:$,onExit:G,onExited:L},e.createElement("div",me,pe,ge,fe)),appendTo:"self"})),Oe=p(T(T({ref:F,id:h.inputId,className:he,style:h.inputStyle},be),{},{onFocus:function(e){w(!0),h.onFocus&&h.onFocus(e)},onBlur:function(e){w(!1),h.onBlur&&h.onBlur(e)},onKeyDown:function(e){if(x){var t=f.findSingle(A.current,"li.p-highlight");switch(e.which){case 40:if(t){var n=t.nextElementSibling;n&&(f.addClass(n,"p-highlight"),f.removeClass(t,"p-highlight"),f.scrollInView(A.current,n))}else(t=f.findSingle(A.current,"li"))&&f.addClass(t,"p-highlight");e.preventDefault();break;case 38:if(t){var r=t.previousElementSibling;r&&(f.addClass(r,"p-highlight"),f.removeClass(t,"p-highlight"),f.scrollInView(A.current,r))}e.preventDefault();break;case 8:var i=e.target,o=i.selectionStart;i.value.substring(o-1,o)===D.key&&Y();break;case 13:t&&ie(e,h.suggestions[f.index(t)]),e.preventDefault();break;case 27:Y(),e.preventDefault()}}},onInput:function(e){h.onInput&&h.onInput(e),e.target.value.length>0?f.addClass(B.current,"p-inputwrapper-filled"):f.removeClass(B.current,"p-inputwrapper-filled")},onKeyUp:function(e){37!==e.which&&39!==e.which||ne(e)},onChange:function(e){h.onChange&&h.onChange(e),ne(e)}}),V("input")),Ee=p({ref:B,id:h.id,className:ve,style:h.style},j.getOtherProps(h),V("root"));return e.createElement("div",Ee,e.createElement(N,Oe),xe)})));H.displayName="Mention";export{H as Mention};

package/mention/mention.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.mention = (function (exports, React, PrimeReact, csstransition, hooks, keyfilter, tooltip, utils, overlayservice, portal, ripple) {
+this.primereact.mention = (function (exports, React, PrimeReact, csstransition, hooks, keyfilter, tooltip, utils, componentbase, overlayservice, portal, ripple) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,21 +25,6 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
@@ -136,13 +121,29 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var InputTextareaBase = {
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  var InputTextareaBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'InputTextarea',
       autoResize: false,
       keyfilter: null,
       onBlur: null,
       onFocus: null,
+      onBeforeInput: null,
       onInput: null,
       onKeyDown: null,
       onKeyUp: null,
@@ -151,19 +152,18 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
       tooltipOptions: null,
       validateOnly: false,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, InputTextareaBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, InputTextareaBase.defaultProps);
     }
-  };
+  });
 
   var InputTextarea = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = InputTextareaBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = InputTextareaBase.getProps(inProps, context);
     var elementRef = React__namespace.useRef(ref);
     var cachedScrollHeight = React__namespace.useRef(0);
+    var _InputTextareaBase$se = InputTextareaBase.setMetaData({
+        props: props
+      }),
+      ptm = _InputTextareaBase$se.ptm;
     var onFocus = function onFocus(event) {
       if (props.autoResize) {
         resize();
@@ -188,6 +188,12 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
         keyfilter.KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
       }
     };
+    var onBeforeInput = function onBeforeInput(event) {
+      props.onBeforeInput && props.onBeforeInput(event);
+      if (props.keyfilter) {
+        keyfilter.KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
+      }
+    };
     var onPaste = function onPaste(event) {
       props.onPaste && props.onPaste(event);
       if (props.keyfilter) {
@@ -234,30 +240,32 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
       return utils.ObjectUtils.isNotEmpty(props.value) || utils.ObjectUtils.isNotEmpty(props.defaultValue);
     }, [props.value, props.defaultValue]);
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
-    var otherProps = InputTextareaBase.getOtherProps(props);
     var className = utils.classNames('p-inputtextarea p-inputtext p-component', {
       'p-disabled': props.disabled,
       'p-filled': isFilled,
       'p-inputtextarea-resizable': props.autoResize
     }, props.className);
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("textarea", _extends({
-      ref: elementRef
-    }, otherProps, {
+    var rootProps = utils.mergeProps({
+      ref: elementRef,
       className: className,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyUp: onKeyUp,
       onKeyDown: onKeyDown,
+      onBeforeInput: onBeforeInput,
       onInput: onInput,
       onPaste: onPaste
-    })), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, InputTextareaBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("textarea", rootProps), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   InputTextarea.displayName = 'InputTextarea';
 
-  var MentionBase = {
+  var MentionBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Mention',
       autoHighlight: true,
@@ -288,19 +296,14 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
       onSelect: null,
       onShow: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, MentionBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, MentionBase.defaultProps);
     }
-  };
+  });
 
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = MentionBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = MentionBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       overlayVisibleState = _React$useState2[0],
@@ -322,6 +325,23 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
     var inputRef = React__namespace.useRef(props.inputRef);
     var listRef = React__namespace.useRef(null);
     var timeout = React__namespace.useRef(null);
+    var _MentionBase$setMetaD = MentionBase.setMetaData({
+        props: props,
+        state: {
+          overlayVisible: overlayVisibleState,
+          focused: focusedState,
+          searching: searchingState,
+          trigger: triggerState
+        }
+      }),
+      ptm = _MentionBase$setMetaD.ptm;
+    var getPTOptions = function getPTOptions(item, suggestion) {
+      return ptm(suggestion, {
+        context: {
+          trigger: triggerState ? triggerState.key : ''
+        }
+      });
+    };
     var _useOverlayListener = hooks.useOverlayListener({
         target: elementRef,
         overlay: overlayRef,
@@ -343,7 +363,7 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
       setTriggerState(null);
     };
     var onOverlayEnter = function onOverlayEnter() {
-      utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
+      utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['overlay'] || PrimeReact__default["default"].zIndex['overlay']);
       alignOverlay();
     };
     var onOverlayEntering = function onOverlayEntering() {
@@ -611,21 +631,23 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
         trigger: triggerState ? triggerState.key : '',
         index: index
       }) : formatValue(suggestion);
-      return /*#__PURE__*/React__namespace.createElement("li", {
+      var itemProps = utils.mergeProps({
         key: key,
-        className: "p-mention-item",
+        className: 'p-mention-item',
         onClick: function onClick(e) {
           return onItemClick(e, suggestion);
         }
-      }, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }, getPTOptions(suggestion, 'item'));
+      return /*#__PURE__*/React__namespace.createElement("li", itemProps, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     };
     var createList = function createList() {
+      var itemsProps = utils.mergeProps({
+        ref: listRef,
+        className: 'p-mention-items'
+      }, ptm('items'));
       if (props.suggestions) {
         var items = props.suggestions.map(createItem);
-        return /*#__PURE__*/React__namespace.createElement("ul", {
-          ref: listRef,
-          className: "p-mention-items"
-        }, items);
+        return /*#__PURE__*/React__namespace.createElement("ul", itemsProps, items);
       }
       return null;
     };
@@ -637,6 +659,12 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
       var header = utils.ObjectUtils.getJSXElement(props.headerTemplate, props);
       var footer = utils.ObjectUtils.getJSXElement(props.footerTemplate, props);
       var list = createList();
+      var panelProps = utils.mergeProps({
+        ref: overlayRef,
+        className: panelClassName,
+        style: panelStyle,
+        onClick: onPanelClick
+      }, ptm('panel'));
       var panel = /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: overlayRef,
         classNames: "p-connected-overlay",
@@ -652,12 +680,7 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
         onEntered: onOverlayEntered,
         onExit: onOverlayExit,
         onExited: onOverlayExited
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        ref: overlayRef,
-        className: panelClassName,
-        style: panelStyle,
-        onClick: onPanelClick
-      }, header, list, footer));
+      }, /*#__PURE__*/React__namespace.createElement("div", panelProps, header, list, footer));
       return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
         element: panel,
         appendTo: "self"
@@ -670,24 +693,26 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
     var inputClassName = utils.classNames('p-mention-input', props.inputClassName);
     var inputProps = MentionBase.getOtherProps(props);
     var panel = createPanel();
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      ref: elementRef,
-      id: props.id,
-      className: className,
-      style: props.style
-    }, /*#__PURE__*/React__namespace.createElement(InputTextarea, _extends({
+    var inputMentionProps = utils.mergeProps(_objectSpread(_objectSpread({
       ref: inputRef,
       id: props.inputId,
       className: inputClassName,
       style: props.inputStyle
-    }, inputProps, {
+    }, inputProps), {}, {
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
       onInput: onInput,
       onKeyUp: onKeyUp,
       onChange: onChange
-    })), panel);
+    }), ptm('input'));
+    var rootProps = utils.mergeProps({
+      ref: elementRef,
+      id: props.id,
+      className: className,
+      style: props.style
+    }, MentionBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement(InputTextarea, inputMentionProps), panel);
   }));
   Mention.displayName = 'Mention';
 
@@ -697,4 +722,4 @@ this.primereact.mention = (function (exports, React, PrimeReact, csstransition,
 
   return exports;
 
-})({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.keyfilter, primereact.tooltip, primereact.utils, primereact.overlayservice, primereact.portal, primereact.ripple);
+})({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.keyfilter, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.overlayservice, primereact.portal, primereact.ripple);