primereact 9.5.0 → 9.6.1

package/chips/chips.cjs.min.js

@@ -1 +1 @@
-"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");function a(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 i=a(e);function u(){return u=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},u.apply(this,arguments)}function c(e){return c="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},c(e)}function s(e,t){if("object"!==c(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==c(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function p(e){var t=s(e,"string");return"symbol"===c(t)?t:String(t)}function f(e,t,r){return(t=p(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(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 d(e){if(Array.isArray(e))return m(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function v(e,t){if(e){if("string"==typeof e)return m(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)?m(e,t):void 0}}function b(){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 g(e){return d(e)||y(e)||v(e)||b()}function h(e){if(Array.isArray(e))return e}function O(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 j(){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 P={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},getProps:function(e){return l.ObjectUtils.getMergedProps(e,P.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,P.defaultProps)}};function w(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 D(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach((function(t){f(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var E=i.memo(i.forwardRef((function(e,a){var c,s,p=P.getProps(e),f=i.useState(!1),m=(s=2,h(c=f)||O(c,s)||v(c,s)||j()),d=m[0],y=m[1],b=i.useRef(null),w=i.useRef(null),E=i.useRef(p.inputRef),k=function(e,t){if(!p.disabled||!p.readOnly){var r=g(p.value),n=r.splice(t,1);B(n,t)&&(p.onRemove&&p.onRemove({originalEvent:e,value:n}),p.onChange&&p.onChange({originalEvent:e,value:r,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:p.name,id:p.id,value:r}}))}},S=function(e,t,r){if(t&&t.trim().length){var n=p.value?g(p.value):[];if(p.allowDuplicate||-1===n.indexOf(t)){var o=!0;p.onAdd&&(o=p.onAdd({originalEvent:e,value:t})),!1!==o&&n.push(t)}I(e,n,r)}},x=function(){l.DomHandler.focus(E.current)},A=function(e){var t=e.target.value,r=p.value||[];if(p.onKeyDown&&p.onKeyDown(e),!e.defaultPrevented)switch(e.key){case"Backspace":0===E.current.value.length&&r.length>0&&k(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),F()?e.preventDefault():","===p.separator&&(e.key===p.separator||l.DomHandler.isAndroid()&&229===e.which)&&S(e,t,!0)}},I=function(e,t,r){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}}),E.current.value="",r&&e.preventDefault()},N=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||[],o=t.split(p.separator);o=o.filter((function(e){return(p.allowDuplicate||-1===r.indexOf(e))&&e.trim().length})),r=[].concat(g(r),g(o)),I(e,r,!0)}}},R=function(e){y(!0),p.onFocus&&p.onFocus(e)},C=function(e){if(p.addOnBlur){var t=e.target.value,r=p.value||[];t&&t.trim().length&&(!p.max||p.max>r.length)&&S(e,t,!0)}y(!1),p.onBlur&&p.onBlur(e)},F=function(){return p.max&&p.value&&p.max===p.value.length},T=E.current&&E.current.value,U=i.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})};i.useImperativeHandle(a,(function(){return{props:p,focus:function(){return l.DomHandler.focus(E.current)},getElement:function(){return b.current},getInput:function(){return E.current}}})),i.useEffect((function(){l.ObjectUtils.combinedRefs(E,p.inputRef)}),[E,p.inputRef]),t.useMountEffect((function(){p.autoFocus&&l.DomHandler.focus(E.current,p.autoFocus)}));var K=function(e,t){var n={className:"p-chips-token-icon",onClick:function(e){return k(e,t)}},o=l.IconUtils.getJSXIcon(p.removeIcon||i.createElement(r.TimesCircleIcon,n),D({},n),{props:p});return p.disabled||p.readOnly||!B(e,t)?null:o},_=function(e,t){var r=p.itemTemplate?p.itemTemplate(e):e,n=i.createElement("span",{className:"p-chips-token-label"},r),o=K(e,t);return i.createElement("li",{key:t,className:"p-chips-token p-highlight"},n,o)},q=l.ObjectUtils.isNotEmpty(p.tooltip),H=P.getOtherProps(p),M=l.ObjectUtils.reduceKeys(H,l.DomHandler.ARIA_PROPS),z=l.classNames("p-chips p-component p-inputwrapper",{"p-inputwrapper-filled":U,"p-inputwrapper-focus":d},p.className),J=function(){var e=l.classNames("p-inputtext p-chips-multiple-container",{"p-disabled":p.disabled,"p-focus":d}),t=p.value?p.value.map(_):null,r=i.createElement("li",{className:"p-chips-input-token"},i.createElement("input",u({ref:E,id:p.inputId,placeholder:p.placeholder,type:"text",name:p.name,disabled:p.disabled||F(),onKeyDown:A,onPaste:N,onFocus:R,onBlur:C,readOnly:p.readOnly},M)));return i.createElement("ul",{ref:w,className:e,onClick:x},t,r)}();return i.createElement(i.Fragment,null,i.createElement("div",u({ref:b,id:p.id,className:z,style:p.style},H),J),q&&i.createElement(o.Tooltip,u({target:E,content:p.tooltip},p.tooltipOptions)))})));E.displayName="Chips",exports.Chips=E;
+"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,7 +130,7 @@ 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.
@@ -99,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.
      */
@@ -195,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;
 }
 
 /**

package/chips/chips.esm.js

@@ -3,7 +3,9 @@ import { useMountEffect } from 'primereact/hooks';
 import { TimesCircleIcon } from 'primereact/icons/timescircle';
 import { KeyFilter } from 'primereact/keyfilter';
 import { Tooltip } from 'primereact/tooltip';
-import { ObjectUtils, DomHandler, classNames, IconUtils } from 'primereact/utils';
+import { ObjectUtils, DomHandler, classNames, mergeProps, IconUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
+import { PrimeReactContext } from 'primereact/api';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -132,7 +134,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var ChipsBase = {
+var ChipsBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Chips',
     addOnBlur: null,
@@ -164,23 +166,25 @@ var ChipsBase = {
     tooltipOptions: null,
     value: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, ChipsBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return 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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = ChipsBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = ChipsBase.getProps(inProps, context);
   var _React$useState = React.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.useRef(null);
   var listRef = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
@@ -238,7 +242,7 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
   var onWrapperClick = function onWrapperClick() {
     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);
@@ -294,7 +298,7 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     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) {
@@ -311,11 +315,11 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
       }
     }
   };
-  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 || [];
@@ -363,12 +367,12 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     }
   });
   var createRemoveIcon = function createRemoveIcon(value, index) {
-    var iconProps = {
+    var iconProps = mergeProps({
       className: 'p-chips-token-icon',
       onClick: function onClick(event) {
         return removeItem(event, index);
       }
-    };
+    }, ptm('removeTokenIcon'));
     var icon = props.removeIcon || /*#__PURE__*/React.createElement(TimesCircleIcon, iconProps);
     var removeIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
       props: props
@@ -380,31 +384,43 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
   };
   var createItem = function createItem(value, index) {
     var content = props.itemTemplate ? props.itemTemplate(value) : value;
-    var label = /*#__PURE__*/React.createElement("span", {
-      className: "p-chips-token-label"
-    }, content);
+    var labelProps = mergeProps({
+      className: 'p-chips-token-label'
+    }, ptm('label'));
+    var label = /*#__PURE__*/React.createElement("span", labelProps, content);
     var icon = createRemoveIcon(value, index);
-    return /*#__PURE__*/React.createElement("li", {
+    var tokenProps = mergeProps({
       key: index,
-      className: "p-chips-token p-highlight"
-    }, label, icon);
+      className: 'p-chips-token p-highlight'
+    }, ptm('token'));
+    return /*#__PURE__*/React.createElement("li", tokenProps, label, icon);
   };
   var createInput = function createInput() {
-    return /*#__PURE__*/React.createElement("li", {
-      className: "p-chips-input-token"
-    }, /*#__PURE__*/React.createElement("input", _extends({
-      ref: inputRef,
+    var inputTokenProps = mergeProps({
+      className: 'p-chips-input-token'
+    }, ptm('inputToken'));
+    var inputProps = 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.createElement("li", inputTokenProps, /*#__PURE__*/React.createElement("input", inputProps));
   };
   var createItems = function createItems() {
     return props.value ? props.value.map(createItem) : null;
@@ -416,11 +432,14 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     });
     var items = createItems();
     var input = createInput();
-    return /*#__PURE__*/React.createElement("ul", {
+    var containerProps = mergeProps({
       ref: listRef,
       className: className,
-      onClick: onWrapperClick
-    }, items, input);
+      onClick: function onClick(e) {
+        return onWrapperClick();
+      }
+    }, ptm('container'));
+    return /*#__PURE__*/React.createElement("ul", containerProps, items, input);
   };
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = ChipsBase.getOtherProps(props);
@@ -430,15 +449,18 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     'p-inputwrapper-focus': focusedState
   }, props.className);
   var list = createList();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
-    ref: elementRef,
+  var rootProps = mergeProps({
     id: props.id,
+    ref: elementRef,
     className: className,
     style: props.style
-  }, otherProps), list), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, ptm('root'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, list), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: inputRef,
     content: props.tooltip
-  }, props.tooltipOptions)));
+  }, props.tooltipOptions, {
+    pt: ptm('tooltip')
+  })));
 }));
 Chips.displayName = 'Chips';
 

package/chips/chips.esm.min.js

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

package/chips/chips.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter, tooltip, utils) {
+this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter, tooltip, utils, componentbase, api) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -149,7 +149,7 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var ChipsBase = {
+  var ChipsBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Chips',
       addOnBlur: null,
@@ -181,23 +181,25 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
       tooltipOptions: 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);
@@ -255,7 +257,7 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
     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);
@@ -311,7 +313,7 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
       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) {
@@ -328,11 +330,11 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
         }
       }
     };
-    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 || [];
@@ -380,12 +382,12 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
       }
     });
     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 +399,43 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
     };
     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 +447,14 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
       });
       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 +464,18 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
       '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';
 
@@ -465,4 +485,4 @@ this.primereact.chips = (function (exports, React, hooks, timescircle, keyfilter
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.icons.timescircle, primereact.keyfilter, primereact.tooltip, primereact.utils);
+})({}, React, primereact.hooks, primereact.icons.timescircle, primereact.keyfilter, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.api);