primereact 8.0.1 → 8.2.0

package/panelmenu/panelmenu.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.panelmenu=function(e,t,n,a,l){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=r(t);function o(){return o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(this,arguments)}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function u(e){if(Array.isArray(e))return s(e)}function m(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function c(e,t){if(e){if("string"==typeof e)return s(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)?s(e,t):void 0}}function p(){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 d(e){return u(e)||m(e)||c(e)||p()}function f(e){if(Array.isArray(e))return e}function b(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,l,r=[],i=!0,o=!1;try{for(n=n.call(e);!(i=(a=n.next()).done)&&(r.push(a.value),!t||r.length!==t);i=!0);}catch(e){o=!0,l=e}finally{try{i||null==n.return||n.return()}finally{if(o)throw l}}return r}}function y(){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 N(e,t){return f(e)||b(e,t)||c(e,t)||y()}var v=i.memo((function(e){var t=N(i.useState(null),2),r=t[0],o=t[1],s=function(){if(e.model){if(e.multiple)return e.model.filter((function(e){return e.expanded}));var t=null;return e.model.forEach((function(e){e.expanded&&(t?e.expanded=!1:t=e)})),t}return null},u=function(t,n){if(n.disabled)t.preventDefault();else{n.url||t.preventDefault(),n.command&&n.command({originalEvent:t,item:n});var a=r;m(n)?(n.expanded=!1,o(e.multiple?a.filter((function(e){return e!==n})):null)):(!e.multiple&&a&&(a.expanded=!1),n.expanded=!0,o(e.multiple?[].concat(d(a||[]),[n]):n))}},m=function(t){return r&&(e.multiple?r.indexOf(t)>-1:r===t)};a.useMountEffect((function(){o(s())}));var c=function(e){return i.createElement("li",{key:"separator_"+e,className:"p-menu-separator"})},p=function(t,a){var r=l.classNames("p-toggleable-content",{"p-toggleable-content-collapsed":!a}),o=i.createRef();return t.items?i.createElement(n.CSSTransition,{nodeRef:o,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:a,unmountOnExit:!0},i.createElement("div",{ref:o,className:r},i.createElement(v,{menuProps:e.menuProps,model:t.items,multiple:e.multiple}))):null},f=function(t,n){var a=t.label+"_"+n,r=m(t),o=l.classNames("p-menuitem",t.className),s=l.classNames("p-menuitem-link",{"p-disabled":t.disabled}),c=l.classNames("p-menuitem-icon",t.icon),d=l.classNames("p-panelmenu-icon pi pi-fw",{"pi-angle-right":!r,"pi-angle-down":r}),f=l.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e.menuProps}),b=t.label&&i.createElement("span",{className:"p-menuitem-text"},t.label),y=t.items&&i.createElement("span",{className:d}),N=p(t,r),v=i.createElement("a",{href:t.url||"#",className:s,target:t.target,onClick:function(e){return u(e,t)},role:"menuitem","aria-disabled":t.disabled},y,f,b);t.template&&(v=l.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return u(e,t)},className:s,labelClassName:"p-menuitem-text",iconClassName:c,submenuIconClassName:d,element:v,props:e,leaf:!t.items,active:r}));return i.createElement("li",{key:a,className:o,style:t.style,role:"none"},v,N)},b=function(e,t){return e.separator?c(t):f(e,t)},y=l.classNames("p-submenu-list",e.className),g=e.model?e.model.map(b):null;return i.createElement("ul",{className:y,role:"tree"},g)}));v.displayName="PanelMenuSub";var g=i.memo(i.forwardRef((function(e,t){var r=N(i.useState(e.id),2),s=r[0],u=r[1],m=N(i.useState(null),2),c=m[0],p=m[1],f=s+"_header",b=s+"_content",y=function(){if(e.model){if(e.multiple)return e.model.filter((function(e){return e.expanded}));var t=null;return e.model.forEach((function(e){e.expanded&&(t?e.expanded=!1:t=e)})),t}return null},h=function(t,n){if(n.disabled)t.preventDefault();else{n.url||t.preventDefault(),n.command&&n.command({originalEvent:t,item:n});var a=c;E(n)?(n.expanded=!1,p(e.multiple?a.filter((function(e){return e!==n})):null)):(!e.multiple&&a&&(a.expanded=!1),n.expanded=!0,p(e.multiple?[].concat(d(a||[]),[n]):n))}},E=function(t){return c&&(e.multiple?c.indexOf(t)>-1:c===t)};a.useMountEffect((function(){s||u(l.UniqueComponentId()),p(y())}));var x=function(t,a){var r=t.label+"_"+a,o=E(t),s=l.classNames("p-panelmenu-panel",t.className),u=l.classNames("p-component p-panelmenu-header",{"p-highlight":o,"p-disabled":t.disabled}),m=l.classNames("p-panelmenu-icon pi",{"pi-chevron-right":!o," pi-chevron-down":o}),c=l.classNames("p-menuitem-icon",t.icon),p=l.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e}),d=t.items&&i.createElement("span",{className:m}),y=t.label&&i.createElement("span",{className:"p-menuitem-text"},t.label),N=l.classNames("p-toggleable-content",{"p-toggleable-content-collapsed":!o}),g=i.createRef(),x=i.createElement("a",{href:t.url||"#",className:"p-panelmenu-header-link",onClick:function(e){return h(e,t)},"aria-expanded":o,id:f,"aria-controls":b,"aria-disabled":t.disabled},d,p,y);t.template&&(x=l.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return h(e,t)},className:"p-panelmenu-header-link",labelClassName:"p-menuitem-text",submenuIconClassName:m,iconClassName:c,element:x,props:e,leaf:!t.items,active:o}));return i.createElement("div",{key:r,className:s,style:t.style},i.createElement("div",{className:u,style:t.style},x),i.createElement(n.CSSTransition,{nodeRef:g,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:o,unmountOnExit:!0,options:e.transitionOptions},i.createElement("div",{ref:g,className:N,role:"region",id:b,"aria-labelledby":f},i.createElement("div",{className:"p-panelmenu-content"},i.createElement(v,{menuProps:e,model:t.items,className:"p-panelmenu-root-submenu",multiple:e.multiple})))))},O=l.ObjectUtils.findDiffKeys(e,g.defaultProps),S=l.classNames("p-panelmenu p-component",e.className),j=e.model?e.model.map(x):null;return i.createElement("div",o({id:e.id,className:S,style:e.style},O),j)})));return g.displayName="PanelMenu",g.defaultProps={__TYPE:"Panel",id:null,model:null,style:null,className:null,multiple:!1,transitionOptions:null},e.PanelMenu=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.csstransition,primereact.hooks,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.panelmenu=function(e,t,n,a,l){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=r(t);function o(){return o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(this,arguments)}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function u(e){if(Array.isArray(e))return s(e)}function m(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function c(e,t){if(e){if("string"==typeof e)return s(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)?s(e,t):void 0}}function p(){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 d(e){return u(e)||m(e)||c(e)||p()}function f(e){if(Array.isArray(e))return e}function b(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,l,r=[],i=!0,o=!1;try{for(n=n.call(e);!(i=(a=n.next()).done)&&(r.push(a.value),!t||r.length!==t);i=!0);}catch(e){o=!0,l=e}finally{try{i||null==n.return||n.return()}finally{if(o)throw l}}return r}}function y(){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 N(e,t){return f(e)||b(e,t)||c(e,t)||y()}var v=i.memo((function(e){var t=N(i.useState(null),2),r=t[0],o=t[1],s=function(){if(e.model){if(e.multiple)return e.model.filter((function(e){return e.expanded}));var t=null;return e.model.forEach((function(e){e.expanded&&(t?e.expanded=!1:t=e)})),t}return null},u=function(t,n){if(n.disabled)t.preventDefault();else{n.url||t.preventDefault(),n.command&&n.command({originalEvent:t,item:n});var a=r;m(n)?(n.expanded=!1,o(e.multiple?a.filter((function(e){return e!==n})):null)):(!e.multiple&&a&&(a.expanded=!1),n.expanded=!0,o(e.multiple?[].concat(d(a||[]),[n]):n))}},m=function(t){return r&&(e.multiple?r.indexOf(t)>-1:r===t)};a.useMountEffect((function(){o(s())}));var c=function(e){return i.createElement("li",{key:"separator_"+e,className:"p-menu-separator"})},p=function(t,a){var r=l.classNames("p-toggleable-content",{"p-toggleable-content-collapsed":!a}),o=i.createRef();return t.items?i.createElement(n.CSSTransition,{nodeRef:o,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:a,unmountOnExit:!0},i.createElement("div",{ref:o,className:r},i.createElement(v,{menuProps:e.menuProps,model:t.items,multiple:e.multiple}))):null},f=function(t,n){var a=t.label+"_"+n,r=m(t),o=l.classNames("p-menuitem",t.className),s=l.classNames("p-menuitem-link",{"p-disabled":t.disabled}),c=l.classNames("p-menuitem-icon",t.icon),d=l.classNames("p-panelmenu-icon pi pi-fw",{"pi-angle-right":!r,"pi-angle-down":r}),f=l.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e.menuProps}),b=t.label&&i.createElement("span",{className:"p-menuitem-text"},t.label),y=t.items&&i.createElement("span",{className:d}),N=p(t,r),v=i.createElement("a",{href:t.url||"#",className:s,target:t.target,onClick:function(e){return u(e,t)},role:"menuitem","aria-disabled":t.disabled},y,f,b);t.template&&(v=l.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return u(e,t)},className:s,labelClassName:"p-menuitem-text",iconClassName:c,submenuIconClassName:d,element:v,props:e,leaf:!t.items,active:r}));return i.createElement("li",{key:a,id:t.id,className:o,style:t.style,role:"none"},v,N)},b=function(e,t){return e.separator?c(t):f(e,t)},y=l.classNames("p-submenu-list",e.className),g=e.model?e.model.map(b):null;return i.createElement("ul",{className:y,role:"tree"},g)}));v.displayName="PanelMenuSub";var g=i.memo(i.forwardRef((function(e,t){var r=N(i.useState(e.id),2),s=r[0],u=r[1],m=N(i.useState(null),2),c=m[0],p=m[1],f=N(i.useState(!1),2),b=f[0],y=f[1],h=s+"_header",E=s+"_content",x=function(){if(e.model){if(e.multiple)return e.model.filter((function(e){return e.expanded}));var t=null;return e.model.forEach((function(e){e.expanded&&(t?e.expanded=!1:t=e)})),t}return null},O=function(t,n){if(n.disabled)t.preventDefault();else{n.url||t.preventDefault(),n.command&&n.command({originalEvent:t,item:n});var a=c;S(n)?(n.expanded=!1,p(e.multiple?a.filter((function(e){return e!==n})):null)):(!e.multiple&&a&&(a.expanded=!1),n.expanded=!0,p(e.multiple?[].concat(d(a||[]),[n]):n))}},S=function(t){return c&&(e.multiple?c.indexOf(t)>-1:c===t)};a.useMountEffect((function(){s||u(l.UniqueComponentId()),p(x())})),a.useUpdateEffect((function(){y(!0),p(x())}),[e.model]);var j=function(){y(!1)},P=function(t,a){var r=t.label+"_"+a,o=S(t),s=l.classNames("p-panelmenu-panel",t.className),u=l.classNames("p-component p-panelmenu-header",{"p-highlight":o,"p-disabled":t.disabled}),m=l.classNames("p-panelmenu-icon pi",{"pi-chevron-right":!o," pi-chevron-down":o}),c=l.classNames("p-menuitem-icon",t.icon),p=l.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e}),d=t.items&&i.createElement("span",{className:m}),f=t.label&&i.createElement("span",{className:"p-menuitem-text"},t.label),y=l.classNames("p-toggleable-content",{"p-toggleable-content-collapsed":!o}),N=i.createRef(),g=i.createElement("a",{href:t.url||"#",className:"p-panelmenu-header-link",onClick:function(e){return O(e,t)},"aria-expanded":o,id:h,"aria-controls":E,"aria-disabled":t.disabled},d,p,f);t.template&&(g=l.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return O(e,t)},className:"p-panelmenu-header-link",labelClassName:"p-menuitem-text",submenuIconClassName:m,iconClassName:c,element:g,props:e,leaf:!t.items,active:o}));return i.createElement("div",{key:r,className:s,style:t.style},i.createElement("div",{className:u,style:t.style},g),i.createElement(n.CSSTransition,{nodeRef:N,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},onEnter:j,disabled:b,in:o,unmountOnExit:!0,options:e.transitionOptions},i.createElement("div",{ref:N,className:y,role:"region",id:E,"aria-labelledby":h},i.createElement("div",{className:"p-panelmenu-content"},i.createElement(v,{menuProps:e,model:t.items,className:"p-panelmenu-root-submenu",multiple:e.multiple})))))},C=l.ObjectUtils.findDiffKeys(e,g.defaultProps),k=l.classNames("p-panelmenu p-component",e.className),w=e.model?e.model.map(P):null;return i.createElement("div",o({id:e.id,className:k,style:e.style},C),w)})));return g.displayName="PanelMenu",g.defaultProps={__TYPE:"Panel",id:null,model:null,style:null,className:null,multiple:!1,transitionOptions:null},e.PanelMenu=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.csstransition,primereact.hooks,primereact.utils);

package/picklist/picklist.cjs.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var api = require('primereact/api');
 var hooks = require('primereact/hooks');
 var utils = require('primereact/utils');
 var button = require('primereact/button');
@@ -381,6 +382,23 @@ var PickListSubList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     return utils.ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
   };
 
+  var onFilter = function onFilter(event) {
+    if (props.onFilter) {
+      props.onFilter({
+        originalEvent: event,
+        value: event.target.value,
+        type: props.type
+      });
+    }
+  };
+
+  var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
+    //enter
+    if (event.which === 13) {
+      event.preventDefault();
+    }
+  };
+
   React__namespace.useImperativeHandle(ref, function () {
     return {
       listElementRef: listElementRef
@@ -417,6 +435,44 @@ var PickListSubList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     return null;
   };
 
+  var createFilter = function createFilter() {
+    if (props.showFilter) {
+      var content = /*#__PURE__*/React__namespace.createElement("div", {
+        className: "p-picklist-filter"
+      }, /*#__PURE__*/React__namespace.createElement("input", {
+        type: "text",
+        value: props.filterValue,
+        onChange: onFilter,
+        onKeyDown: onFilterInputKeyDown,
+        placeholder: props.placeholder,
+        className: "p-picklist-filter-input p-inputtext p-component"
+      }), /*#__PURE__*/React__namespace.createElement("span", {
+        className: "p-picklist-filter-icon pi pi-search"
+      }));
+
+      if (props.filterTemplate) {
+        var defaultContentOptions = {
+          className: 'p-picklist-filter',
+          inputProps: {
+            className: 'p-picklist-filter-input p-inputtext p-component',
+            onChange: onFilter,
+            onKeyDown: onFilterInputKeyDown
+          },
+          iconClassName: 'p-picklist-filter-icon pi pi-search',
+          element: content,
+          props: props
+        };
+        content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "p-picklist-filter-container"
+      }, content);
+    }
+
+    return null;
+  };
+
   var createList = function createList() {
     var items = createItems();
     var className = utils.classNames('p-picklist-list', props.listClassName);
@@ -430,19 +486,20 @@ var PickListSubList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
 
   var className = utils.classNames('p-picklist-list-wrapper', props.className);
   var header = createHeader();
+  var filter = createFilter();
   var list = createList();
   return /*#__PURE__*/React__namespace.createElement("div", {
     ref: listElementRef,
     className: className
-  }, header, list);
+  }, header, filter, list);
 }));
 PickListSubList.displayName = 'PickListSubList';
 
 var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (props) {
-  var moveRightDisabled = utils.ObjectUtils.isEmpty(props.sourceSelection);
-  var moveLeftDisabled = utils.ObjectUtils.isEmpty(props.targetSelection);
-  var moveAllRightDisabled = utils.ObjectUtils.isEmpty(props.source);
-  var moveAllLeftDisabled = utils.ObjectUtils.isEmpty(props.target);
+  var moveRightDisabled = utils.ObjectUtils.isEmpty(props.sourceSelection) || utils.ObjectUtils.isEmpty(props.visibleSourceList);
+  var moveLeftDisabled = utils.ObjectUtils.isEmpty(props.targetSelection) || utils.ObjectUtils.isEmpty(props.visibleTargetList);
+  var moveAllRightDisabled = utils.ObjectUtils.isEmpty(props.visibleSourceList);
+  var moveAllLeftDisabled = utils.ObjectUtils.isEmpty(props.visibleTargetList);
 
   var moveRight = function moveRight(event) {
     var selection = props.sourceSelection;
@@ -473,8 +530,12 @@ var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (prop
 
   var moveAllRight = function moveAllRight(event) {
     if (props.source) {
-      var targetList = [].concat(_toConsumableArray(props.target), _toConsumableArray(props.source));
-      var sourceList = [];
+      var targetList = [].concat(_toConsumableArray(props.target), _toConsumableArray(props.visibleSourceList));
+      var sourceList = props.source.filter(function (s) {
+        return !props.visibleSourceList.some(function (vs) {
+          return vs === s;
+        });
+      });
 
       if (props.onTransfer) {
         props.onTransfer({
@@ -516,8 +577,12 @@ var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (prop
 
   var moveAllLeft = function moveAllLeft(event) {
     if (props.source) {
-      var sourceList = [].concat(_toConsumableArray(props.source), _toConsumableArray(props.target));
-      var targetList = [];
+      var sourceList = [].concat(_toConsumableArray(props.source), _toConsumableArray(props.visibleTargetList));
+      var targetList = props.target.filter(function (t) {
+        return !props.visibleTargetList.some(function (vt) {
+          return vt === t;
+        });
+      });
 
       if (props.onTransfer) {
         props.onTransfer({
@@ -568,12 +633,27 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       targetSelectionState = _React$useState4[0],
       setTargetSelectionState = _React$useState4[1];
 
+  var _React$useState5 = React__namespace.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      sourceFilterValueState = _React$useState6[0],
+      setSourceFilterValueState = _React$useState6[1];
+
+  var _React$useState7 = React__namespace.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      targetFilterValueState = _React$useState8[0],
+      setTargetFilterValueState = _React$useState8[1];
+
   var sourceListElementRef = React__namespace.useRef(null);
   var targetListElementRef = React__namespace.useRef(null);
   var reorderedListElementRef = React__namespace.useRef(null);
   var reorderDirection = React__namespace.useRef(null);
   var sourceSelection = props.onSourceSelectionChange ? props.sourceSelection : sourceSelectionState;
   var targetSelection = props.onTargetSelectionChange ? props.targetSelection : targetSelectionState;
+  var sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
+  var targetFilteredValue = props.onTargetFilterChange ? props.targetFilterValue : targetFilterValueState;
+  var hasFilterBy = utils.ObjectUtils.isNotEmpty(props.filterBy);
+  var showSourceFilter = hasFilterBy && props.showSourceFilter;
+  var showTargetFilter = hasFilterBy && props.showTargetFilter;
 
   var onSourceReorder = function onSourceReorder(event) {
     handleChange(event, event.value, props.target);
@@ -708,6 +788,52 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
   };
 
+  var onFilter = function onFilter(event) {
+    var originalEvent = event.originalEvent,
+        value = event.value,
+        type = event.type;
+
+    var _ref = type === 'source' ? [setSourceFilterValueState, props.onSourceFilterChange] : [setTargetFilterValueState, props.onTargetFilterChange],
+        _ref2 = _slicedToArray(_ref, 2),
+        setFilterState = _ref2[0],
+        onFilterChange = _ref2[1];
+
+    if (onFilterChange) {
+      onFilterChange({
+        originalEvent: originalEvent,
+        value: value
+      });
+    } else {
+      setFilterState(value);
+    }
+  };
+
+  var getVisibleList = function getVisibleList(list, type) {
+    var _ref3 = type === 'source' ? [sourceFilteredValue, filterSource] : [targetFilteredValue, filterTarget],
+        _ref4 = _slicedToArray(_ref3, 2),
+        filteredValue = _ref4[0],
+        filterCallback = _ref4[1];
+
+    return hasFilterBy && utils.ObjectUtils.isNotEmpty(filteredValue) ? filterCallback(filteredValue) : list;
+  };
+
+  var filterSource = function filterSource() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
+    return filter(props.source, filteredValue);
+  };
+
+  var filterTarget = function filterTarget() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
+    return filter(props.target, filteredValue);
+  };
+
+  var filter = function filter(list, filterValue) {
+    var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
+    return api.FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+  };
+
   hooks.useUpdateEffect(function () {
     if (reorderedListElementRef.current) {
       handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
@@ -717,6 +843,10 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   });
   var otherProps = utils.ObjectUtils.findDiffKeys(props, PickList.defaultProps);
   var className = utils.classNames('p-picklist p-component', props.className);
+  var sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
+  var targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
+  var sourceList = getVisibleList(props.source, 'source');
+  var targetList = getVisibleList(props.target, 'target');
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     id: props.id,
     className: className,
@@ -729,41 +859,55 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     dataKey: props.dataKey
   }), /*#__PURE__*/React__namespace.createElement(PickListSubList, {
     ref: sourceListElementRef,
-    list: props.source,
+    type: "source",
+    list: sourceList,
     selection: sourceSelection,
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange);
     },
-    itemTemplate: props.itemTemplate,
+    itemTemplate: sourceItemTemplate,
     header: props.sourceHeader,
     style: props.sourceStyle,
     className: "p-picklist-source-wrapper",
     listClassName: "p-picklist-source",
     metaKeySelection: props.metaKeySelection,
     tabIndex: props.tabIndex,
-    dataKey: props.dataKey
+    dataKey: props.dataKey,
+    filterValue: sourceFilteredValue,
+    onFilter: onFilter,
+    showFilter: showSourceFilter,
+    placeholder: props.sourceFilterPlaceholder,
+    template: props.sourceFilterTemplate
   }), /*#__PURE__*/React__namespace.createElement(PickListTransferControls, {
     onTransfer: onTransfer,
     source: props.source,
+    visibleSourceList: sourceList,
     target: props.target,
+    visibleTargetList: targetList,
     sourceSelection: sourceSelection,
     targetSelection: targetSelection,
     dataKey: props.dataKey
   }), /*#__PURE__*/React__namespace.createElement(PickListSubList, {
     ref: targetListElementRef,
-    list: props.target,
+    type: "target",
+    list: targetList,
     selection: targetSelection,
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange);
     },
-    itemTemplate: props.itemTemplate,
+    itemTemplate: targetItemTemplate,
     header: props.targetHeader,
     style: props.targetStyle,
     className: "p-picklist-target-wrapper",
     listClassName: "p-picklist-target",
     metaKeySelection: props.metaKeySelection,
     tabIndex: props.tabIndex,
-    dataKey: props.dataKey
+    dataKey: props.dataKey,
+    filterValue: targetFilteredValue,
+    onFilter: onFilter,
+    showFilter: showTargetFilter,
+    placeholder: props.targetFilterPlaceholder,
+    template: props.targetFilterTemplate
   }), props.showTargetControls && /*#__PURE__*/React__namespace.createElement(PickListControls, {
     list: props.target,
     selection: targetSelection,
@@ -789,16 +933,31 @@ PickList.defaultProps = {
   showSourceControls: true,
   showTargetControls: true,
   metaKeySelection: true,
+  filterBy: null,
+  filterMatchMode: 'contains',
+  filterLocale: undefined,
+  sourceFilterValue: null,
+  targetFilterValue: null,
+  showSourceFilter: true,
+  showTargetFilter: true,
+  sourceFilterPlaceholder: null,
+  targetFilterPlaceholder: null,
+  sourceFilterTemplate: null,
+  targetFilterTemplate: null,
   tabIndex: 0,
   dataKey: null,
   itemTemplate: null,
+  sourceItemTemplate: null,
+  targetItemTemplate: null,
   onChange: null,
   onMoveToSource: null,
   onMoveAllToSource: null,
   onMoveToTarget: null,
   onMoveAllToTarget: null,
   onSourceSelectionChange: null,
-  onTargetSelectionChange: null
+  onTargetSelectionChange: null,
+  onSourceFilterChange: null,
+  onTargetFilterChange: null
 };
 
 exports.PickList = PickList;

package/picklist/picklist.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),n=require("primereact/utils"),r=require("primereact/button"),a=require("primereact/ripple");function l(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 o=l(e);function i(){return i=Object.assign||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 c(e){if(Array.isArray(e))return e}function s(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,l=[],o=!0,i=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);o=!0);}catch(e){i=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(i)throw a}}return l}}function u(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 d(e,t){if(e){if("string"==typeof e)return u(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)?u(e,t):void 0}}function p(){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 f(e,t){return c(e)||s(e,t)||d(e,t)||p()}function m(e){if(Array.isArray(e))return u(e)}function g(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}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 y(e){return m(e)||g(e)||d(e)||v()}var b=o.memo((function(e){var t=!e.selection.length,a=n.classNames("p-picklist-buttons",e.className);return o.createElement("div",{className:a},o.createElement(r.Button,{disabled:t,type:"button",icon:"pi pi-angle-up",onClick:function(t){var r=e.selection;if(r&&r.length){for(var a=y(e.list),l=0;l<r.length;l++){var o=n.ObjectUtils.findIndexInList(r[l],a,e.dataKey);if(0===o)break;var i=a[o-1];a[o-1]=a[o],a[o]=i}e.onReorder&&e.onReorder({originalEvent:t,value:a,direction:"up"})}}}),o.createElement(r.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-up",onClick:function(t){var r=e.selection;if(r&&r.length){for(var a=y(e.list),l=0;l<r.length;l++){var o=n.ObjectUtils.findIndexInList(r[l],a,e.dataKey);if(0===o)break;var i=a.splice(o,1)[0];a.unshift(i)}e.onReorder&&e.onReorder({originalEvent:t,value:a,direction:"top"})}}}),o.createElement(r.Button,{disabled:t,type:"button",icon:"pi pi-angle-down",onClick:function(t){var r=e.selection;if(r&&r.length){for(var a=y(e.list),l=r.length-1;l>=0;l--){var o=n.ObjectUtils.findIndexInList(r[l],a,e.dataKey);if(o===a.length-1)break;var i=a[o+1];a[o+1]=a[o],a[o]=i}e.onReorder&&e.onReorder({originalEvent:t,value:a,direction:"down"})}}}),o.createElement(r.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-down",onClick:function(t){var r=e.selection;if(r&&r.length){for(var a=y(e.list),l=r.length-1;l>=0;l--){var o=n.ObjectUtils.findIndexInList(r[l],a,e.dataKey);if(o===a.length-1)break;var i=a.splice(o,1)[0];a.push(i)}e.onReorder&&e.onReorder({originalEvent:t,value:a,direction:"bottom"})}}}))}));b.displayName="PickListControls";var h=o.memo((function(e){var t=e.template?e.template(e.value):e.value,r=n.classNames("p-picklist-item",{"p-highlight":e.selected},e.className);return o.createElement("li",{className:r,onClick:function(t){e.onClick&&e.onClick({originalEvent:t,value:e.value})},onKeyDown:function(t){e.onKeyDown&&e.onKeyDown({originalEvent:t,value:e.value})},tabIndex:e.tabIndex,role:"option","aria-selected":e.selected},t,o.createElement(a.Ripple,null))}));h.displayName="PickListItem";var S=o.memo(o.forwardRef((function(e,t){var r=o.useRef(null),a=function(t){var r=t.originalEvent,a=t.value,l=y(e.selection),o=n.ObjectUtils.findIndexInList(a,l,e.dataKey),i=-1!==o;if(e.metaKeySelection){var c=r.metaKey||r.ctrlKey;i&&c?l.splice(o,1):(c||(l.length=0),l.push(a))}else i?l.splice(o,1):l.push(a);e.onSelectionChange&&e.onSelectionChange({event:r,value:l})},l=function(e){var t=e.originalEvent,n=t.currentTarget;switch(t.which){case 40:var r=i(n);r&&r.focus(),t.preventDefault();break;case 38:var l=c(n);l&&l.focus(),t.preventDefault();break;case 13:a(e),t.preventDefault()}},i=function e(t){var r=t.nextElementSibling;return r?n.DomHandler.hasClass(r,"p-picklist-item")?r:e(r):null},c=function e(t){var r=t.previousElementSibling;return r?n.DomHandler.hasClass(r,"p-picklist-item")?r:e(r):null},s=function(t){return-1!==n.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)};o.useImperativeHandle(t,(function(){return{listElementRef:r}}));var u=n.classNames("p-picklist-list-wrapper",e.className),d=e.header?o.createElement("div",{className:"p-picklist-header"},n.ObjectUtils.getJSXElement(e.header,e)):null,p=function(){var t=e.list?e.list.map((function(t){var n=JSON.stringify(t),r=s(t);return o.createElement(h,{key:n,value:t,template:e.itemTemplate,selected:r,onClick:a,onKeyDown:l,tabIndex:e.tabIndex})})):null,r=n.classNames("p-picklist-list",e.listClassName);return o.createElement("ul",{className:r,style:e.style,role:"listbox","aria-multiselectable":!0},t)}();return o.createElement("div",{ref:r,className:u},d,p)})));S.displayName="PickListSubList";var E=o.memo((function(e){var t=n.ObjectUtils.isEmpty(e.sourceSelection),a=n.ObjectUtils.isEmpty(e.targetSelection),l=n.ObjectUtils.isEmpty(e.source),i=n.ObjectUtils.isEmpty(e.target),c=n.classNames("p-picklist-buttons p-picklist-transfer-buttons",e.className);return o.createElement("div",{className:c},o.createElement(r.Button,{disabled:t,type:"button",icon:"pi pi-angle-right",onClick:function(t){var r=e.sourceSelection;if(n.ObjectUtils.isNotEmpty(r)){for(var a=y(e.target),l=y(e.source),o=0;o<r.length;o++){var i=r[o];-1===n.ObjectUtils.findIndexInList(i,a,e.dataKey)&&a.push(l.splice(n.ObjectUtils.findIndexInList(i,l,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:l,target:a,direction:"toTarget"})}}}),o.createElement(r.Button,{disabled:l,type:"button",icon:"pi pi-angle-double-right",onClick:function(t){if(e.source){var n=[].concat(y(e.target),y(e.source));e.onTransfer&&e.onTransfer({originalEvent:t,source:[],target:n,direction:"allToTarget"})}}}),o.createElement(r.Button,{disabled:a,type:"button",icon:"pi pi-angle-left",onClick:function(t){var r=e.targetSelection;if(n.ObjectUtils.isNotEmpty(r)){for(var a=y(e.target),l=y(e.source),o=0;o<r.length;o++){var i=r[o];-1===n.ObjectUtils.findIndexInList(i,l,e.dataKey)&&l.push(a.splice(n.ObjectUtils.findIndexInList(i,a,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:l,target:a,direction:"toSource"})}}}),o.createElement(r.Button,{disabled:i,type:"button",icon:"pi pi-angle-double-left",onClick:function(t){if(e.source){var n=[].concat(y(e.source),y(e.target));e.onTransfer&&e.onTransfer({originalEvent:t,source:n,target:[],direction:"allToSource"})}}}))}));E.displayName="PickListTransferControls";var T=o.memo(o.forwardRef((function(e,r){var a=f(o.useState([]),2),l=a[0],c=a[1],s=f(o.useState([]),2),u=s[0],d=s[1],p=o.useRef(null),m=o.useRef(null),g=o.useRef(null),v=o.useRef(null),y=e.onSourceSelectionChange?e.sourceSelection:l,h=e.onTargetSelectionChange?e.targetSelection:u,k=function(e,t){if(e){var r=n.DomHandler.findSingle(e,".p-picklist-list");switch(t){case"up":N(r,-1);break;case"top":r.scrollTop=0;break;case"down":N(r,1);break;case"bottom":setTimeout((function(){return r.scrollTop=r.scrollHeight}),100)}}},C=function(t,n,r){e.onChange&&e.onChange({originalEvent:t.originalEvent,source:n,target:r})},N=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=e.getElementsByClassName("p-highlight");n.ObjectUtils.isNotEmpty(r)&&n.DomHandler.scrollInView(e,-1===t?r[0]:r[r.length-1])},I=function(e,t,r){r?r(e):"sourceSelection"===t?c(e.value):d(e.value),n.ObjectUtils.isNotEmpty(y)&&"targetSelection"===t?c([]):n.ObjectUtils.isNotEmpty(h)&&"sourceSelection"===t&&d([])};t.useUpdateEffect((function(){g.current&&(k(g.current,v.current),g.current=null,v.current=null)}));var K=n.ObjectUtils.findDiffKeys(e,T.defaultProps),O=n.classNames("p-picklist p-component",e.className);return o.createElement("div",i({id:e.id,className:O,style:e.style},K),e.showSourceControls&&o.createElement(b,{list:e.source,selection:y,onReorder:function(t){C(t,t.value,e.target),g.current=p.current.listElementRef.current,v.current=t.direction},className:"p-picklist-source-controls",dataKey:e.dataKey}),o.createElement(S,{ref:p,list:e.source,selection:y,onSelectionChange:function(t){return I(t,"sourceSelection",e.onSourceSelectionChange)},itemTemplate:e.itemTemplate,header:e.sourceHeader,style:e.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:e.metaKeySelection,tabIndex:e.tabIndex,dataKey:e.dataKey}),o.createElement(E,{onTransfer:function(t){var n=t.originalEvent,r=t.source,a=t.target;switch(t.direction){case"toTarget":e.onMoveToTarget&&e.onMoveToTarget({originalEvent:n,value:y});break;case"allToTarget":e.onMoveAllToTarget&&e.onMoveAllToTarget({originalEvent:n,value:e.source});break;case"toSource":e.onMoveToSource&&e.onMoveToSource({originalEvent:n,value:h});break;case"allToSource":e.onMoveAllToSource&&e.onMoveAllToSource({originalEvent:n,value:e.target})}I({originalEvent:n,value:[]},"sourceSelection",e.onSourceSelectionChange),I({originalEvent:n,value:[]},"targetSelection",e.onTargetSelectionChange),C(t,r,a)},source:e.source,target:e.target,sourceSelection:y,targetSelection:h,dataKey:e.dataKey}),o.createElement(S,{ref:m,list:e.target,selection:h,onSelectionChange:function(t){return I(t,"targetSelection",e.onTargetSelectionChange)},itemTemplate:e.itemTemplate,header:e.targetHeader,style:e.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:e.metaKeySelection,tabIndex:e.tabIndex,dataKey:e.dataKey}),e.showTargetControls&&o.createElement(b,{list:e.target,selection:h,onReorder:function(t){C(t,e.source,t.value),g.current=m.current.listElementRef.current,v.current=t.direction},className:"p-picklist-target-controls",dataKey:e.dataKey}))})));T.displayName="PickList",T.defaultProps={__TYPE:"PickList",id:null,source:null,target:null,sourceHeader:null,targetHeader:null,style:null,className:null,sourceStyle:null,targetStyle:null,sourceSelection:null,targetSelection:null,showSourceControls:!0,showTargetControls:!0,metaKeySelection:!0,tabIndex:0,dataKey:null,itemTemplate:null,onChange:null,onMoveToSource:null,onMoveAllToSource:null,onMoveToTarget:null,onMoveAllToTarget:null,onSourceSelectionChange:null,onTargetSelectionChange:null},exports.PickList=T;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/hooks"),r=require("primereact/utils"),l=require("primereact/button"),i=require("primereact/ripple");function a(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 o=a(e);function c(){return c=Object.assign||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 s(e){if(Array.isArray(e))return e}function u(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,i=[],a=!0,o=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){o=!0,l=e}finally{try{a||null==n.return||n.return()}finally{if(o)throw l}}return i}}function p(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 f(e,t){if(e){if("string"==typeof e)return p(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)?p(e,t):void 0}}function m(){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 d(e,t){return s(e)||u(e,t)||f(e,t)||m()}function g(e){if(Array.isArray(e))return p(e)}function v(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function y(){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 g(e)||v(e)||f(e)||y()}var h=o.memo((function(e){var t=!e.selection.length,n=r.classNames("p-picklist-buttons",e.className);return o.createElement("div",{className:n},o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-up",onClick:function(t){var n=e.selection;if(n&&n.length){for(var l=b(e.list),i=0;i<n.length;i++){var a=r.ObjectUtils.findIndexInList(n[i],l,e.dataKey);if(0===a)break;var o=l[a-1];l[a-1]=l[a],l[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"up"})}}}),o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-up",onClick:function(t){var n=e.selection;if(n&&n.length){for(var l=b(e.list),i=0;i<n.length;i++){var a=r.ObjectUtils.findIndexInList(n[i],l,e.dataKey);if(0===a)break;var o=l.splice(a,1)[0];l.unshift(o)}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"top"})}}}),o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-down",onClick:function(t){var n=e.selection;if(n&&n.length){for(var l=b(e.list),i=n.length-1;i>=0;i--){var a=r.ObjectUtils.findIndexInList(n[i],l,e.dataKey);if(a===l.length-1)break;var o=l[a+1];l[a+1]=l[a],l[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"down"})}}}),o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-down",onClick:function(t){var n=e.selection;if(n&&n.length){for(var l=b(e.list),i=n.length-1;i>=0;i--){var a=r.ObjectUtils.findIndexInList(n[i],l,e.dataKey);if(a===l.length-1)break;var o=l.splice(a,1)[0];l.push(o)}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"bottom"})}}}))}));h.displayName="PickListControls";var S=o.memo((function(e){var t=e.template?e.template(e.value):e.value,n=r.classNames("p-picklist-item",{"p-highlight":e.selected},e.className);return o.createElement("li",{className:n,onClick:function(t){e.onClick&&e.onClick({originalEvent:t,value:e.value})},onKeyDown:function(t){e.onKeyDown&&e.onKeyDown({originalEvent:t,value:e.value})},tabIndex:e.tabIndex,role:"option","aria-selected":e.selected},t,o.createElement(i.Ripple,null))}));S.displayName="PickListItem";var T=o.memo(o.forwardRef((function(e,t){var n=o.useRef(null),l=function(t){var n=t.originalEvent,l=t.value,i=b(e.selection),a=r.ObjectUtils.findIndexInList(l,i,e.dataKey),o=-1!==a;if(e.metaKeySelection){var c=n.metaKey||n.ctrlKey;o&&c?i.splice(a,1):(c||(i.length=0),i.push(l))}else o?i.splice(a,1):i.push(l);e.onSelectionChange&&e.onSelectionChange({event:n,value:i})},i=function(e){var t=e.originalEvent,n=t.currentTarget;switch(t.which){case 40:var r=a(n);r&&r.focus(),t.preventDefault();break;case 38:var i=c(n);i&&i.focus(),t.preventDefault();break;case 13:l(e),t.preventDefault()}},a=function e(t){var n=t.nextElementSibling;return n?r.DomHandler.hasClass(n,"p-picklist-item")?n:e(n):null},c=function e(t){var n=t.previousElementSibling;return n?r.DomHandler.hasClass(n,"p-picklist-item")?n:e(n):null},s=function(t){return-1!==r.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},u=function(t){e.onFilter&&e.onFilter({originalEvent:t,value:t.target.value,type:e.type})},p=function(e){13===e.which&&e.preventDefault()};o.useImperativeHandle(t,(function(){return{listElementRef:n}}));var f=r.classNames("p-picklist-list-wrapper",e.className),m=e.header?o.createElement("div",{className:"p-picklist-header"},r.ObjectUtils.getJSXElement(e.header,e)):null,d=function(){if(e.showFilter){var t=o.createElement("div",{className:"p-picklist-filter"},o.createElement("input",{type:"text",value:e.filterValue,onChange:u,onKeyDown:p,placeholder:e.placeholder,className:"p-picklist-filter-input p-inputtext p-component"}),o.createElement("span",{className:"p-picklist-filter-icon pi pi-search"}));if(e.filterTemplate)t=r.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-picklist-filter",inputProps:{className:"p-picklist-filter-input p-inputtext p-component",onChange:u,onKeyDown:p},iconClassName:"p-picklist-filter-icon pi pi-search",element:t,props:e});return o.createElement("div",{className:"p-picklist-filter-container"},t)}return null}(),g=function(){var t=e.list?e.list.map((function(t){var n=JSON.stringify(t),r=s(t);return o.createElement(S,{key:n,value:t,template:e.itemTemplate,selected:r,onClick:l,onKeyDown:i,tabIndex:e.tabIndex})})):null,n=r.classNames("p-picklist-list",e.listClassName);return o.createElement("ul",{className:n,style:e.style,role:"listbox","aria-multiselectable":!0},t)}();return o.createElement("div",{ref:n,className:f},m,d,g)})));T.displayName="PickListSubList";var E=o.memo((function(e){var t=r.ObjectUtils.isEmpty(e.sourceSelection)||r.ObjectUtils.isEmpty(e.visibleSourceList),n=r.ObjectUtils.isEmpty(e.targetSelection)||r.ObjectUtils.isEmpty(e.visibleTargetList),i=r.ObjectUtils.isEmpty(e.visibleSourceList),a=r.ObjectUtils.isEmpty(e.visibleTargetList),c=r.classNames("p-picklist-buttons p-picklist-transfer-buttons",e.className);return o.createElement("div",{className:c},o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-right",onClick:function(t){var n=e.sourceSelection;if(r.ObjectUtils.isNotEmpty(n)){for(var l=b(e.target),i=b(e.source),a=0;a<n.length;a++){var o=n[a];-1===r.ObjectUtils.findIndexInList(o,l,e.dataKey)&&l.push(i.splice(r.ObjectUtils.findIndexInList(o,i,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:l,direction:"toTarget"})}}}),o.createElement(l.Button,{disabled:i,type:"button",icon:"pi pi-angle-double-right",onClick:function(t){if(e.source){var n=[].concat(b(e.target),b(e.visibleSourceList)),r=e.source.filter((function(t){return!e.visibleSourceList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:r,target:n,direction:"allToTarget"})}}}),o.createElement(l.Button,{disabled:n,type:"button",icon:"pi pi-angle-left",onClick:function(t){var n=e.targetSelection;if(r.ObjectUtils.isNotEmpty(n)){for(var l=b(e.target),i=b(e.source),a=0;a<n.length;a++){var o=n[a];-1===r.ObjectUtils.findIndexInList(o,i,e.dataKey)&&i.push(l.splice(r.ObjectUtils.findIndexInList(o,l,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:l,direction:"toSource"})}}}),o.createElement(l.Button,{disabled:a,type:"button",icon:"pi pi-angle-double-left",onClick:function(t){if(e.source){var n=[].concat(b(e.source),b(e.visibleTargetList)),r=e.target.filter((function(t){return!e.visibleTargetList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:n,target:r,direction:"allToSource"})}}}))}));E.displayName="PickListTransferControls";var k=o.memo(o.forwardRef((function(e,l){var i=d(o.useState([]),2),a=i[0],s=i[1],u=d(o.useState([]),2),p=u[0],f=u[1],m=d(o.useState(""),2),g=m[0],v=m[1],y=d(o.useState(""),2),b=y[0],S=y[1],C=o.useRef(null),N=o.useRef(null),I=o.useRef(null),w=o.useRef(null),O=e.onSourceSelectionChange?e.sourceSelection:a,j=e.onTargetSelectionChange?e.targetSelection:p,K=e.onSourceFilterChange?e.sourceFilterValue:g,L=e.onTargetFilterChange?e.targetFilterValue:b,F=r.ObjectUtils.isNotEmpty(e.filterBy),U=F&&e.showSourceFilter,x=F&&e.showTargetFilter,R=function(e,t){if(e){var n=r.DomHandler.findSingle(e,".p-picklist-list");switch(t){case"up":P(n,-1);break;case"top":n.scrollTop=0;break;case"down":P(n,1);break;case"bottom":setTimeout((function(){return n.scrollTop=n.scrollHeight}),100)}}},M=function(t,n,r){e.onChange&&e.onChange({originalEvent:t.originalEvent,source:n,target:r})},P=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=e.getElementsByClassName("p-highlight");r.ObjectUtils.isNotEmpty(n)&&r.DomHandler.scrollInView(e,-1===t?n[0]:n[n.length-1])},D=function(e,t,n){n?n(e):"sourceSelection"===t?s(e.value):f(e.value),r.ObjectUtils.isNotEmpty(O)&&"targetSelection"===t?s([]):r.ObjectUtils.isNotEmpty(j)&&"sourceSelection"===t&&f([])},A=function(t){var n=t.originalEvent,r=t.value,l=d("source"===t.type?[v,e.onSourceFilterChange]:[S,e.onTargetFilterChange],2),i=l[0],a=l[1];a?a({originalEvent:n,value:r}):i(r)},B=function(e,t){var n=d("source"===t?[K,H]:[L,V],2),l=n[0],i=n[1];return F&&r.ObjectUtils.isNotEmpty(l)?i(l):e},H=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=t.trim().toLocaleLowerCase(e.filterLocale);return q(e.source,n)},V=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=t.trim().toLocaleLowerCase(e.filterLocale);return q(e.target,n)},q=function(n,r){var l=F?e.filterBy.split(","):[];return t.FilterService.filter(n,l,r,e.filterMatchMode,e.filterLocale)};n.useUpdateEffect((function(){I.current&&(R(I.current,w.current),I.current=null,w.current=null)}));var _=r.ObjectUtils.findDiffKeys(e,k.defaultProps),J=r.classNames("p-picklist p-component",e.className),X=e.sourceItemTemplate?e.sourceItemTemplate:e.itemTemplate,z=e.targetItemTemplate?e.targetItemTemplate:e.itemTemplate,Y=B(e.source,"source"),$=B(e.target,"target");return o.createElement("div",c({id:e.id,className:J,style:e.style},_),e.showSourceControls&&o.createElement(h,{list:e.source,selection:O,onReorder:function(t){M(t,t.value,e.target),I.current=C.current.listElementRef.current,w.current=t.direction},className:"p-picklist-source-controls",dataKey:e.dataKey}),o.createElement(T,{ref:C,type:"source",list:Y,selection:O,onSelectionChange:function(t){return D(t,"sourceSelection",e.onSourceSelectionChange)},itemTemplate:X,header:e.sourceHeader,style:e.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:e.metaKeySelection,tabIndex:e.tabIndex,dataKey:e.dataKey,filterValue:K,onFilter:A,showFilter:U,placeholder:e.sourceFilterPlaceholder,template:e.sourceFilterTemplate}),o.createElement(E,{onTransfer:function(t){var n=t.originalEvent,r=t.source,l=t.target;switch(t.direction){case"toTarget":e.onMoveToTarget&&e.onMoveToTarget({originalEvent:n,value:O});break;case"allToTarget":e.onMoveAllToTarget&&e.onMoveAllToTarget({originalEvent:n,value:e.source});break;case"toSource":e.onMoveToSource&&e.onMoveToSource({originalEvent:n,value:j});break;case"allToSource":e.onMoveAllToSource&&e.onMoveAllToSource({originalEvent:n,value:e.target})}D({originalEvent:n,value:[]},"sourceSelection",e.onSourceSelectionChange),D({originalEvent:n,value:[]},"targetSelection",e.onTargetSelectionChange),M(t,r,l)},source:e.source,visibleSourceList:Y,target:e.target,visibleTargetList:$,sourceSelection:O,targetSelection:j,dataKey:e.dataKey}),o.createElement(T,{ref:N,type:"target",list:$,selection:j,onSelectionChange:function(t){return D(t,"targetSelection",e.onTargetSelectionChange)},itemTemplate:z,header:e.targetHeader,style:e.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:e.metaKeySelection,tabIndex:e.tabIndex,dataKey:e.dataKey,filterValue:L,onFilter:A,showFilter:x,placeholder:e.targetFilterPlaceholder,template:e.targetFilterTemplate}),e.showTargetControls&&o.createElement(h,{list:e.target,selection:j,onReorder:function(t){M(t,e.source,t.value),I.current=N.current.listElementRef.current,w.current=t.direction},className:"p-picklist-target-controls",dataKey:e.dataKey}))})));k.displayName="PickList",k.defaultProps={__TYPE:"PickList",id:null,source:null,target:null,sourceHeader:null,targetHeader:null,style:null,className:null,sourceStyle:null,targetStyle:null,sourceSelection:null,targetSelection:null,showSourceControls:!0,showTargetControls:!0,metaKeySelection:!0,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,sourceFilterValue:null,targetFilterValue:null,showSourceFilter:!0,showTargetFilter:!0,sourceFilterPlaceholder:null,targetFilterPlaceholder:null,sourceFilterTemplate:null,targetFilterTemplate:null,tabIndex:0,dataKey:null,itemTemplate:null,sourceItemTemplate:null,targetItemTemplate:null,onChange:null,onMoveToSource:null,onMoveAllToSource:null,onMoveToTarget:null,onMoveAllToTarget:null,onSourceSelectionChange:null,onTargetSelectionChange:null,onSourceFilterChange:null,onTargetFilterChange:null},exports.PickList=k;

package/picklist/picklist.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 
+type PickListItemTemplateType = React.ReactNode | ((item: any) => React.ReactNode);
+
+type PickListFilterTemplateType = React.ReactNode | ((options: PickListFilterTemplateOptions) => React.ReactNode);
+
 interface PickListEventParams {
     originalEvent: React.SyntheticEvent;
     value: any;
@@ -11,6 +15,20 @@ interface PickListChangeParams {
     target: any;
 }
 
+interface PickListFilterTemplateOptions {
+    className: string;
+    inputProps: PickListFilterInputProps;
+    iconClassName: string;
+    element: React.ReactNode;
+    props: PickListProps;
+}
+
+interface PickListFilterInputProps {
+    className: string;
+    onChange(event: React.SyntheticEvent): void;
+    onKeyDown(event: React.SyntheticEvent): void;
+}
+
 export interface PickListProps {
     id?: string;
     source?: any[];
@@ -26,9 +44,22 @@ export interface PickListProps {
     showSourceControls?: boolean;
     showTargetControls?: boolean;
     metaKeySelection?: boolean;
+    filterBy?: string;
+    filterMatchMode?: string;
+    filterLocale?: string;
+    sourceFilterValue?: string;
+    targetFilterValue?: string;
+    showSourceFilter?: boolean;
+    showTargetFilter?: boolean;
+    sourceFilterPlaceholder?: string;
+    targetFilterPlaceholder?: string;
+    sourceFilterTemplate?: PickListFilterTemplateType;
+    targetFilterTemplate?: PickListFilterTemplateType;
     tabIndex?: number;
     dataKey?: string;
-    itemTemplate?(item: any): React.ReactNode;
+    itemTemplate?: PickListItemTemplateType;
+    sourceItemTemplate?: PickListItemTemplateType;
+    targetItemTemplate?: PickListItemTemplateType;
     onChange?(e: PickListChangeParams): void;
     onMoveToSource?(e: PickListEventParams): void;
     onMoveAllToSource?(e: PickListEventParams): void;
@@ -36,6 +67,8 @@ export interface PickListProps {
     onMoveAllToTarget?(e: PickListEventParams): void;
     onSourceSelectionChange?(e: PickListEventParams): void;
     onTargetSelectionChange?(e: PickListEventParams): void;
+    onSourceFilterChange?(e: PickListEventParams): void;
+    onTargetFilterChange?(e: PickListEventParams): void;
     children?: React.ReactNode;
 }