primereact 9.4.0 → 9.6.0

package/chips/chips.cjs.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var hooks = require('primereact/hooks');
 var timescircle = require('primereact/icons/timescircle');
 var keyfilter = require('primereact/keyfilter');
 var tooltip = require('primereact/tooltip');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
+var api = require('primereact/api');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -155,54 +158,57 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var ChipsBase = {
+var ChipsBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Chips',
+    addOnBlur: null,
+    allowDuplicate: true,
+    ariaLabelledBy: null,
+    autoFocus: false,
+    className: null,
+    disabled: null,
     id: null,
-    inputRef: null,
     inputId: null,
+    inputRef: null,
+    itemTemplate: null,
+    keyfilter: null,
+    max: null,
     name: null,
+    onAdd: null,
+    onBlur: null,
+    onChange: null,
+    onFocus: null,
+    onKeyDown: null,
+    onRemove: null,
     placeholder: null,
-    value: null,
-    max: null,
-    disabled: null,
     readOnly: false,
     removable: true,
     removeIcon: null,
+    separator: null,
     style: null,
-    className: null,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
-    separator: null,
-    allowDuplicate: true,
-    itemTemplate: null,
-    keyfilter: null,
-    addOnBlur: null,
-    onAdd: null,
-    onRemove: null,
-    onChange: null,
-    onFocus: null,
-    onBlur: null,
-    onKeyDown: null,
+    value: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, ChipsBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, ChipsBase.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 Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-  var props = ChipsBase.getProps(inProps);
+  var context = React__namespace.useContext(api.PrimeReactContext);
+  var props = ChipsBase.getProps(inProps, context);
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var _ChipsBase$setMetaDat = ChipsBase.setMetaData({
+      props: props,
+      state: {
+        focused: focusedState
+      }
+    }),
+    ptm = _ChipsBase$setMetaDat.ptm;
   var elementRef = React__namespace.useRef(null);
   var listRef = React__namespace.useRef(null);
   var inputRef = React__namespace.useRef(props.inputRef);
@@ -260,7 +266,7 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   var onWrapperClick = function onWrapperClick() {
     utils.DomHandler.focus(inputRef.current);
   };
-  var onKeyDown = function onKeyDown(event) {
+  var _onKeyDown = function onKeyDown(event) {
     var inputValue = event.target.value;
     var values = props.value || [];
     props.onKeyDown && props.onKeyDown(event);
@@ -316,7 +322,7 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     inputRef.current.value = '';
     preventDefault && event.preventDefault();
   };
-  var onPaste = function onPaste(event) {
+  var _onPaste = function onPaste(event) {
     if (props.separator) {
       var pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
       if (props.keyfilter) {
@@ -333,11 +339,11 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
       }
     }
   };
-  var onFocus = function onFocus(event) {
+  var _onFocus = function onFocus(event) {
     setFocusedState(true);
     props.onFocus && props.onFocus(event);
   };
-  var onBlur = function onBlur(event) {
+  var _onBlur = function onBlur(event) {
     if (props.addOnBlur) {
       var inputValue = event.target.value;
       var values = props.value || [];
@@ -379,13 +385,18 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   React__namespace.useEffect(function () {
     utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
   }, [inputRef, props.inputRef]);
+  hooks.useMountEffect(function () {
+    if (props.autoFocus) {
+      utils.DomHandler.focus(inputRef.current, props.autoFocus);
+    }
+  });
   var createRemoveIcon = function createRemoveIcon(value, index) {
-    var iconProps = {
+    var iconProps = utils.mergeProps({
       className: 'p-chips-token-icon',
       onClick: function onClick(event) {
         return removeItem(event, index);
       }
-    };
+    }, ptm('removeTokenIcon'));
     var icon = props.removeIcon || /*#__PURE__*/React__namespace.createElement(timescircle.TimesCircleIcon, iconProps);
     var removeIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
       props: props
@@ -397,31 +408,43 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   };
   var createItem = function createItem(value, index) {
     var content = props.itemTemplate ? props.itemTemplate(value) : value;
-    var label = /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-chips-token-label"
-    }, content);
+    var labelProps = utils.mergeProps({
+      className: 'p-chips-token-label'
+    }, ptm('label'));
+    var label = /*#__PURE__*/React__namespace.createElement("span", labelProps, content);
     var icon = createRemoveIcon(value, index);
-    return /*#__PURE__*/React__namespace.createElement("li", {
+    var tokenProps = utils.mergeProps({
       key: index,
-      className: "p-chips-token p-highlight"
-    }, label, icon);
+      className: 'p-chips-token p-highlight'
+    }, ptm('token'));
+    return /*#__PURE__*/React__namespace.createElement("li", tokenProps, label, icon);
   };
   var createInput = function createInput() {
-    return /*#__PURE__*/React__namespace.createElement("li", {
-      className: "p-chips-input-token"
-    }, /*#__PURE__*/React__namespace.createElement("input", _extends({
-      ref: inputRef,
+    var inputTokenProps = utils.mergeProps({
+      className: 'p-chips-input-token'
+    }, ptm('inputToken'));
+    var inputProps = utils.mergeProps(_objectSpread({
       id: props.inputId,
+      ref: inputRef,
       placeholder: props.placeholder,
-      type: "text",
+      type: 'text',
       name: props.name,
       disabled: props.disabled || isMaxedOut(),
-      onKeyDown: onKeyDown,
-      onPaste: onPaste,
-      onFocus: onFocus,
-      onBlur: onBlur,
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      },
+      onPaste: function onPaste(e) {
+        return _onPaste(e);
+      },
+      onFocus: function onFocus(e) {
+        return _onFocus(e);
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur(e);
+      },
       readOnly: props.readOnly
-    }, ariaProps)));
+    }, ariaProps), ptm('input'));
+    return /*#__PURE__*/React__namespace.createElement("li", inputTokenProps, /*#__PURE__*/React__namespace.createElement("input", inputProps));
   };
   var createItems = function createItems() {
     return props.value ? props.value.map(createItem) : null;
@@ -433,11 +456,14 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     });
     var items = createItems();
     var input = createInput();
-    return /*#__PURE__*/React__namespace.createElement("ul", {
+    var containerProps = utils.mergeProps({
       ref: listRef,
       className: className,
-      onClick: onWrapperClick
-    }, items, input);
+      onClick: function onClick(e) {
+        return onWrapperClick();
+      }
+    }, ptm('container'));
+    return /*#__PURE__*/React__namespace.createElement("ul", containerProps, items, input);
   };
   var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = ChipsBase.getOtherProps(props);
@@ -447,15 +473,18 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     'p-inputwrapper-focus': focusedState
   }, props.className);
   var list = createList();
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: elementRef,
+  var rootProps = utils.mergeProps({
     id: props.id,
+    ref: elementRef,
     className: className,
     style: props.style
-  }, otherProps), list), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+  }, ptm('root'));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, list), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
     target: inputRef,
     content: props.tooltip
-  }, props.tooltipOptions)));
+  }, props.tooltipOptions, {
+    pt: ptm('tooltip')
+  })));
 }));
 Chips.displayName = 'Chips';
 

package/chips/chips.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/icons/timescircle"),n=require("primereact/keyfilter"),r=require("primereact/tooltip"),l=require("primereact/utils");function o(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 a=o(e);function i(){return i=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},i.apply(this,arguments)}function u(e){return u="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},u(e)}function c(e,t){if("object"!==u(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==u(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function p(e){var t=c(e,"string");return"symbol"===u(t)?t:String(t)}function s(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(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 m(e){if(Array.isArray(e))return f(e)}function d(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function y(e,t){if(e){if("string"==typeof e)return f(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)?f(e,t):void 0}}function v(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function b(e){return m(e)||d(e)||y(e)||v()}function g(e){if(Array.isArray(e))return e}function h(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,o,a,i=[],u=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=o.call(n)).done)&&(i.push(r.value),i.length!==t);u=!0);}catch(e){c=!0,l=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw l}}return i}}function O(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var j={defaultProps:{__TYPE:"Chips",id:null,inputRef:null,inputId:null,name:null,placeholder:null,value:null,max:null,disabled:null,readOnly:!1,removable:!0,removeIcon:null,style:null,className:null,tooltip:null,tooltipOptions:null,ariaLabelledBy:null,separator:null,allowDuplicate:!0,itemTemplate:null,keyfilter:null,addOnBlur:null,onAdd:null,onRemove:null,onChange:null,onFocus:null,onBlur:null,onKeyDown:null,children:void 0},getProps:function(e){return l.ObjectUtils.getMergedProps(e,j.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,j.defaultProps)}};function P(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 w(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?P(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):P(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var D=a.memo(a.forwardRef((function(e,o){var u,c,p=j.getProps(e),s=a.useState(!1),f=(c=2,g(u=s)||h(u,c)||y(u,c)||O()),m=f[0],d=f[1],v=a.useRef(null),P=a.useRef(null),D=a.useRef(p.inputRef),E=function(e,t){if(!p.disabled||!p.readOnly){var n=b(p.value),r=n.splice(t,1);B(r,t)&&(p.onRemove&&p.onRemove({originalEvent:e,value:r}),p.onChange&&p.onChange({originalEvent:e,value:n,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:p.name,id:p.id,value:n}}))}},S=function(e,t,n){if(t&&t.trim().length){var r=p.value?b(p.value):[];if(p.allowDuplicate||-1===r.indexOf(t)){var l=!0;p.onAdd&&(l=p.onAdd({originalEvent:e,value:t})),!1!==l&&r.push(t)}A(e,r,n)}},k=function(){l.DomHandler.focus(D.current)},x=function(e){var t=e.target.value,r=p.value||[];if(p.onKeyDown&&p.onKeyDown(e),!e.defaultPrevented)switch(e.key){case"Backspace":0===D.current.value.length&&r.length>0&&E(e,r.length-1);break;case"Enter":t&&t.trim().length&&(!p.max||p.max>r.length)&&S(e,t,!0);break;default:p.keyfilter&&n.KeyFilter.onKeyPress(e,p.keyfilter),C()?e.preventDefault():","===p.separator&&(e.key===p.separator||l.DomHandler.isAndroid()&&229===e.which)&&S(e,t,!0)}},A=function(e,t,n){p.onChange&&p.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:p.name,id:p.id,value:t}}),D.current.value="",n&&e.preventDefault()},I=function(e){if(p.separator){var t=(e.clipboardData||window.clipboardData).getData("Text");if(p.keyfilter&&n.KeyFilter.onPaste(e,p.keyfilter),t){var r=p.value||[],l=t.split(p.separator);l=l.filter((function(e){return(p.allowDuplicate||-1===r.indexOf(e))&&e.trim().length})),r=[].concat(b(r),b(l)),A(e,r,!0)}}},N=function(e){d(!0),p.onFocus&&p.onFocus(e)},R=function(e){if(p.addOnBlur){var t=e.target.value,n=p.value||[];t&&t.trim().length&&(!p.max||p.max>n.length)&&S(e,t,!0)}d(!1),p.onBlur&&p.onBlur(e)},C=function(){return p.max&&p.value&&p.max===p.value.length},T=D.current&&D.current.value,U=a.useMemo((function(){return l.ObjectUtils.isNotEmpty(p.value)||l.ObjectUtils.isNotEmpty(T)}),[p.value,T]),B=function(e,t){return l.ObjectUtils.getPropValue(p.removable,{value:e,index:t,props:p})};a.useImperativeHandle(o,(function(){return{props:p,focus:function(){return l.DomHandler.focus(D.current)},getElement:function(){return v.current},getInput:function(){return D.current}}})),a.useEffect((function(){l.ObjectUtils.combinedRefs(D,p.inputRef)}),[D,p.inputRef]);var K=function(e,n){var r={className:"p-chips-token-icon",onClick:function(e){return E(e,n)}},o=l.IconUtils.getJSXIcon(p.removeIcon||a.createElement(t.TimesCircleIcon,r),w({},r),{props:p});return p.disabled||p.readOnly||!B(e,n)?null:o},F=function(e,t){var n=p.itemTemplate?p.itemTemplate(e):e,r=a.createElement("span",{className:"p-chips-token-label"},n),l=K(e,t);return a.createElement("li",{key:t,className:"p-chips-token p-highlight"},r,l)},_=l.ObjectUtils.isNotEmpty(p.tooltip),q=j.getOtherProps(p),H=l.ObjectUtils.reduceKeys(q,l.DomHandler.ARIA_PROPS),M=l.classNames("p-chips p-component p-inputwrapper",{"p-inputwrapper-filled":U,"p-inputwrapper-focus":m},p.className),z=function(){var e=l.classNames("p-inputtext p-chips-multiple-container",{"p-disabled":p.disabled,"p-focus":m}),t=p.value?p.value.map(F):null,n=a.createElement("li",{className:"p-chips-input-token"},a.createElement("input",i({ref:D,id:p.inputId,placeholder:p.placeholder,type:"text",name:p.name,disabled:p.disabled||C(),onKeyDown:x,onPaste:I,onFocus:N,onBlur:R,readOnly:p.readOnly},H)));return a.createElement("ul",{ref:P,className:e,onClick:k},t,n)}();return a.createElement(a.Fragment,null,a.createElement("div",i({ref:v,id:p.id,className:M,style:p.style},q),z),_&&a.createElement(r.Tooltip,i({target:D,content:p.tooltip},p.tooltipOptions)))})));D.displayName="Chips",exports.Chips=D;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),r=require("primereact/icons/timescircle"),n=require("primereact/keyfilter"),o=require("primereact/tooltip"),l=require("primereact/utils"),a=require("primereact/componentbase"),i=require("primereact/api");function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(e);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(this,arguments)}function s(e){return s="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},s(e)}function f(e,t){if("object"!==s(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function m(e){var t=f(e,"string");return"symbol"===s(t)?t:String(t)}function d(e,t,r){return(t=m(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function y(e){if(Array.isArray(e))return v(e)}function b(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function g(e,t){if(e){if("string"==typeof e)return v(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?v(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e){return y(e)||b(e)||g(e)||h()}function P(e){if(Array.isArray(e))return e}function j(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l,a,i=[],u=!0,c=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=l.call(r)).done)&&(i.push(n.value),i.length!==t);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(c)throw o}}return i}}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.")}var D=a.ComponentBase.extend({defaultProps:{__TYPE:"Chips",addOnBlur:null,allowDuplicate:!0,ariaLabelledBy:null,autoFocus:!1,className:null,disabled:null,id:null,inputId:null,inputRef:null,itemTemplate:null,keyfilter:null,max:null,name:null,onAdd:null,onBlur:null,onChange:null,onFocus:null,onKeyDown:null,onRemove:null,placeholder:null,readOnly:!1,removable:!0,removeIcon:null,separator:null,style:null,tooltip:null,tooltipOptions:null,value:null,children:void 0}});function E(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function k(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?E(Object(r),!0).forEach((function(t){d(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var S=c.memo(c.forwardRef((function(e,a){var u,s,f=c.useContext(i.PrimeReactContext),m=D.getProps(e,f),d=c.useState(!1),v=(s=2,P(u=d)||j(u,s)||g(u,s)||w()),y=v[0],b=v[1],h=D.setMetaData({props:m,state:{focused:y}}).ptm,E=c.useRef(null),S=c.useRef(null),x=c.useRef(m.inputRef),I=function(e,t){if(!m.disabled||!m.readOnly){var r=O(m.value),n=r.splice(t,1);K(n,t)&&(m.onRemove&&m.onRemove({originalEvent:e,value:n}),m.onChange&&m.onChange({originalEvent:e,value:r,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:m.name,id:m.id,value:r}}))}},A=function(e,t,r){if(t&&t.trim().length){var n=m.value?O(m.value):[];if(m.allowDuplicate||-1===n.indexOf(t)){var o=!0;m.onAdd&&(o=m.onAdd({originalEvent:e,value:t})),!1!==o&&n.push(t)}N(e,n,r)}},C=function(e){var t=e.target.value,r=m.value||[];if(m.onKeyDown&&m.onKeyDown(e),!e.defaultPrevented)switch(e.key){case"Backspace":0===x.current.value.length&&r.length>0&&I(e,r.length-1);break;case"Enter":t&&t.trim().length&&(!m.max||m.max>r.length)&&A(e,t,!0);break;default:m.keyfilter&&n.KeyFilter.onKeyPress(e,m.keyfilter),F()?e.preventDefault():","===m.separator&&(e.key===m.separator||l.DomHandler.isAndroid()&&229===e.which)&&A(e,t,!0)}},N=function(e,t,r){m.onChange&&m.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:m.name,id:m.id,value:t}}),x.current.value="",r&&e.preventDefault()},R=function(e){if(m.separator){var t=(e.clipboardData||window.clipboardData).getData("Text");if(m.keyfilter&&n.KeyFilter.onPaste(e,m.keyfilter),t){var r=m.value||[],o=t.split(m.separator);o=o.filter((function(e){return(m.allowDuplicate||-1===r.indexOf(e))&&e.trim().length})),r=[].concat(O(r),O(o)),N(e,r,!0)}}},T=function(e){if(m.addOnBlur){var t=e.target.value,r=m.value||[];t&&t.trim().length&&(!m.max||m.max>r.length)&&A(e,t,!0)}b(!1),m.onBlur&&m.onBlur(e)},F=function(){return m.max&&m.value&&m.max===m.value.length},B=x.current&&x.current.value,q=c.useMemo((function(){return l.ObjectUtils.isNotEmpty(m.value)||l.ObjectUtils.isNotEmpty(B)}),[m.value,B]),K=function(e,t){return l.ObjectUtils.getPropValue(m.removable,{value:e,index:t,props:m})};c.useImperativeHandle(a,(function(){return{props:m,focus:function(){return l.DomHandler.focus(x.current)},getElement:function(){return E.current},getInput:function(){return x.current}}})),c.useEffect((function(){l.ObjectUtils.combinedRefs(x,m.inputRef)}),[x,m.inputRef]),t.useMountEffect((function(){m.autoFocus&&l.DomHandler.focus(x.current,m.autoFocus)}));var U=function(e,t){var n=l.mergeProps({className:"p-chips-token-icon",onClick:function(e){return I(e,t)}},h("removeTokenIcon")),o=l.IconUtils.getJSXIcon(m.removeIcon||c.createElement(r.TimesCircleIcon,n),k({},n),{props:m});return m.disabled||m.readOnly||!K(e,t)?null:o},_=function(e,t){var r=m.itemTemplate?m.itemTemplate(e):e,n=l.mergeProps({className:"p-chips-token-label"},h("label")),o=c.createElement("span",n,r),a=U(e,t),i=l.mergeProps({key:t,className:"p-chips-token p-highlight"},h("token"));return c.createElement("li",i,o,a)},H=l.ObjectUtils.isNotEmpty(m.tooltip),M=D.getOtherProps(m),z=l.ObjectUtils.reduceKeys(M,l.DomHandler.ARIA_PROPS),J=l.classNames("p-chips p-component p-inputwrapper",{"p-inputwrapper-filled":q,"p-inputwrapper-focus":y},m.className),L=function(){var e,t,r=l.classNames("p-inputtext p-chips-multiple-container",{"p-disabled":m.disabled,"p-focus":y}),n=m.value?m.value.map(_):null,o=(e=l.mergeProps({className:"p-chips-input-token"},h("inputToken")),t=l.mergeProps(k({id:m.inputId,ref:x,placeholder:m.placeholder,type:"text",name:m.name,disabled:m.disabled||F(),onKeyDown:function(e){return C(e)},onPaste:function(e){return R(e)},onFocus:function(e){return t=e,b(!0),void(m.onFocus&&m.onFocus(t));var t},onBlur:function(e){return T(e)},readOnly:m.readOnly},z),h("input")),c.createElement("li",e,c.createElement("input",t))),a=l.mergeProps({ref:S,className:r,onClick:function(e){l.DomHandler.focus(x.current)}},h("container"));return c.createElement("ul",a,n,o)}(),V=l.mergeProps({id:m.id,ref:E,className:J,style:m.style},h("root"));return c.createElement(c.Fragment,null,c.createElement("div",V,L),H&&c.createElement(o.Tooltip,p({target:x,content:m.tooltip},m.tooltipOptions,{pt:h("tooltip")})))})));S.displayName="Chips",exports.Chips=S;

package/chips/chips.d.ts

@@ -11,7 +11,69 @@ import * as React from 'react';
 import { KeyFilterType } from '../keyfilter';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { FormEvent } from '../ts-helpers';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+
+export declare type ChipsPassThroughType<T> = PassThroughType<T, ChipsPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChipsPassThroughMethodOptions {
+    props: ChipsProps;
+    state: ChipsState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChipsProps.pt}
+ */
+export interface ChipsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChipsPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: ChipsPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: ChipsPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ChipsPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: ChipsPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the input token's DOM element.
+     */
+    inputToken?: ChipsPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ChipsPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+}
+
+/**
+ * Defines current inline state in Chips component.
+ */
+export interface ChipsState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
 
 /**
  * @group Others
@@ -21,7 +83,7 @@ interface ChipsRemovableOptions {
     /**
      * Current value
      */
-    value: any;
+    value: string;
     /**
      * Current index
      */
@@ -44,7 +106,7 @@ interface ChipsAddEvent {
     /**
      * Added item value
      */
-    value: any;
+    value: string;
 }
 
 /**
@@ -59,7 +121,7 @@ interface ChipsRemoveEvent {
     /**
      * Removed item value
      */
-    value: any;
+    value: string;
 }
 
 /**
@@ -68,13 +130,18 @@ interface ChipsRemoveEvent {
  * @extends {FormEvent}
  * @event
  */
-interface ChipsChangeEvent extends FormEvent<any[]> {}
+interface ChipsChangeEvent extends FormEvent<string[]> {}
 
 /**
  * Defines valid properties in Chips component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
 export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'ref'> {
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
     /**
      * Reference of the input element.
      */
@@ -94,7 +161,7 @@ export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTML
     /**
      * Value of the component.
      */
-    value?: any[] | undefined;
+    value?: string[] | undefined;
     /**
      * Maximum number of entries allowed.
      */
@@ -190,6 +257,11 @@ export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTML
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipsPassThroughOptions}
+     */
+    pt?: ChipsPassThroughOptions;
 }
 
 /**