primereact 9.5.0 → 9.6.0

package/mention/mention.cjs.js

@@ -9,6 +9,7 @@ var hooks = require('primereact/hooks');
 var keyfilter = require('primereact/keyfilter');
 var tooltip = require('primereact/tooltip');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 var overlayservice = require('primereact/overlayservice');
 var portal = require('primereact/portal');
 var ripple = require('primereact/ripple');
@@ -36,21 +37,6 @@ function _interopNamespace(e) {
 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";
 
@@ -147,13 +133,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.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'InputTextarea',
     autoResize: false,
     keyfilter: null,
     onBlur: null,
     onFocus: null,
+    onBeforeInput: null,
     onInput: null,
     onKeyDown: null,
     onKeyUp: null,
@@ -162,19 +164,18 @@ var InputTextareaBase = {
     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();
@@ -199,6 +200,12 @@ var InputTextarea = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
       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) {
@@ -245,30 +252,32 @@ var InputTextarea = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
     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,
@@ -299,19 +308,14 @@ var MentionBase = {
     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],
@@ -333,6 +337,23 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   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,
@@ -354,7 +375,7 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     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() {
@@ -622,21 +643,23 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       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;
   };
@@ -648,6 +671,12 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     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",
@@ -663,12 +692,7 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       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"
@@ -681,24 +705,26 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   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';
 

package/mention/mention.cjs.min.js

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

package/mention/mention.d.ts

@@ -10,6 +10,80 @@
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 import { InputTextarea } from '../inputtextarea';
+import { PassThroughType } from '../utils/utils';
+
+export declare type MentionPassThroughType<T> = PassThroughType<T, MentionPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MentionPassThroughMethodOptions {
+    props: MentionProps;
+    state: MentionState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MentionProps.pt}
+ */
+export interface MentionPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MentionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the InputTextarea component.
+     * @see {@link InputTextareaPassThroughType}
+     */
+    input?: MentionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: MentionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: MentionPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the items' DOM element.
+     */
+    items?: MentionPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+}
+
+/**
+ * Defines current inline state in Mention component.
+ */
+export interface MentionState {
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current search state as a boolean.
+     * @defaultValue false
+     */
+    searching: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current trigger state.
+     */
+    trigger: any;
+}
+
+/**
+ * Defines current options in Mention component.
+ */
+export interface MentionContext {
+    /**
+     * Current trigger state.
+     */
+    trigger: any;
+}
 
 /**
  */
@@ -64,7 +138,7 @@ interface MentionSelectEvent {
  * Defines valid properties in Mention component. In addition to these, all properties of HTMLTextAreaElement can be used in this component.
  * @group Properties
  */
-export interface MentionProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'onSelect' | 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'ref'> {
+export interface MentionProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'onSelect' | 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'ref' | 'pt'> {
     /**
      * When enabled, highlights the first item in the list by default.
      * @defaultValue true
@@ -143,6 +217,11 @@ export interface MentionProps extends Omit<React.DetailedHTMLProps<React.Textare
      * @defaultValue "@"
      */
     trigger?: string | string[] | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MentionPassThroughOptions}
+     */
+    pt?: MentionPassThroughOptions;
     /**
      * Callback to invoke when the element loses focus.
      * @param {React.FocusEvent<HTMLInputElement>} event Browser event