primereact 8.1.1 → 8.2.0

package/picklist/picklist.esm.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { FilterService } from 'primereact/api';
 import { useUpdateEffect } from 'primereact/hooks';
 import { classNames, ObjectUtils, DomHandler } from 'primereact/utils';
 import { Button } from 'primereact/button';
@@ -357,6 +358,23 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     return 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.useImperativeHandle(ref, function () {
     return {
       listElementRef: listElementRef
@@ -393,6 +411,44 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     return null;
   };
 
+  var createFilter = function createFilter() {
+    if (props.showFilter) {
+      var content = /*#__PURE__*/React.createElement("div", {
+        className: "p-picklist-filter"
+      }, /*#__PURE__*/React.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.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 = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "p-picklist-filter-container"
+      }, content);
+    }
+
+    return null;
+  };
+
   var createList = function createList() {
     var items = createItems();
     var className = classNames('p-picklist-list', props.listClassName);
@@ -406,19 +462,20 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
 
   var className = classNames('p-picklist-list-wrapper', props.className);
   var header = createHeader();
+  var filter = createFilter();
   var list = createList();
   return /*#__PURE__*/React.createElement("div", {
     ref: listElementRef,
     className: className
-  }, header, list);
+  }, header, filter, list);
 }));
 PickListSubList.displayName = 'PickListSubList';
 
 var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
-  var moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection);
-  var moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection);
-  var moveAllRightDisabled = ObjectUtils.isEmpty(props.source);
-  var moveAllLeftDisabled = ObjectUtils.isEmpty(props.target);
+  var moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection) || ObjectUtils.isEmpty(props.visibleSourceList);
+  var moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection) || ObjectUtils.isEmpty(props.visibleTargetList);
+  var moveAllRightDisabled = ObjectUtils.isEmpty(props.visibleSourceList);
+  var moveAllLeftDisabled = ObjectUtils.isEmpty(props.visibleTargetList);
 
   var moveRight = function moveRight(event) {
     var selection = props.sourceSelection;
@@ -449,8 +506,12 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
 
   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({
@@ -492,8 +553,12 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
 
   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({
@@ -544,12 +609,27 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       targetSelectionState = _React$useState4[0],
       setTargetSelectionState = _React$useState4[1];
 
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      sourceFilterValueState = _React$useState6[0],
+      setSourceFilterValueState = _React$useState6[1];
+
+  var _React$useState7 = React.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      targetFilterValueState = _React$useState8[0],
+      setTargetFilterValueState = _React$useState8[1];
+
   var sourceListElementRef = React.useRef(null);
   var targetListElementRef = React.useRef(null);
   var reorderedListElementRef = React.useRef(null);
   var reorderDirection = React.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 = 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);
@@ -684,6 +764,52 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
 
+  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 && 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 FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+  };
+
   useUpdateEffect(function () {
     if (reorderedListElementRef.current) {
       handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
@@ -695,6 +821,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var className = 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.createElement("div", _extends({
     id: props.id,
     className: className,
@@ -707,7 +835,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     dataKey: props.dataKey
   }), /*#__PURE__*/React.createElement(PickListSubList, {
     ref: sourceListElementRef,
-    list: props.source,
+    type: "source",
+    list: sourceList,
     selection: sourceSelection,
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange);
@@ -719,17 +848,25 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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.createElement(PickListTransferControls, {
     onTransfer: onTransfer,
     source: props.source,
+    visibleSourceList: sourceList,
     target: props.target,
+    visibleTargetList: targetList,
     sourceSelection: sourceSelection,
     targetSelection: targetSelection,
     dataKey: props.dataKey
   }), /*#__PURE__*/React.createElement(PickListSubList, {
     ref: targetListElementRef,
-    list: props.target,
+    type: "target",
+    list: targetList,
     selection: targetSelection,
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange);
@@ -741,7 +878,12 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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.createElement(PickListControls, {
     list: props.target,
     selection: targetSelection,
@@ -767,6 +909,17 @@ 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,
@@ -778,7 +931,9 @@ PickList.defaultProps = {
   onMoveToTarget: null,
   onMoveAllToTarget: null,
   onSourceSelectionChange: null,
-  onTargetSelectionChange: null
+  onTargetSelectionChange: null,
+  onSourceFilterChange: null,
+  onTargetFilterChange: null
 };
 
 export { PickList };

package/picklist/picklist.esm.min.js

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

package/picklist/picklist.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.picklist = (function (exports, React, hooks, utils, button, ripple) {
+this.primereact.picklist = (function (exports, React, api, hooks, utils, button, ripple) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -375,6 +375,23 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
       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
@@ -411,6 +428,44 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
       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);
@@ -424,19 +479,20 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
 
     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;
@@ -467,8 +523,12 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
 
     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({
@@ -510,8 +570,12 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
 
     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({
@@ -562,12 +626,27 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
         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);
@@ -702,6 +781,52 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
       }
     };
 
+    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);
@@ -713,6 +838,8 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
     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,
@@ -725,7 +852,8 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
       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);
@@ -737,17 +865,25 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
       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);
@@ -759,7 +895,12 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
       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,
@@ -785,6 +926,17 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
     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,
@@ -796,7 +948,9 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
     onMoveToTarget: null,
     onMoveAllToTarget: null,
     onSourceSelectionChange: null,
-    onTargetSelectionChange: null
+    onTargetSelectionChange: null,
+    onSourceFilterChange: null,
+    onTargetFilterChange: null
   };
 
   exports.PickList = PickList;
@@ -805,4 +959,4 @@ this.primereact.picklist = (function (exports, React, hooks, utils, button, ripp
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.utils, primereact.button, primereact.ripple);
+})({}, React, primereact.api, primereact.hooks, primereact.utils, primereact.button, primereact.ripple);

package/picklist/picklist.min.css

@@ -1 +1 @@
-.p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;padding:0;overflow:auto;min-height:12rem;max-height:24rem}.p-picklist-item{cursor:pointer;overflow:hidden;position:relative}
+.p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;padding:0;overflow:auto;min-height:12rem;max-height:24rem}.p-picklist-item{cursor:pointer;overflow:hidden;position:relative}.p-picklist-filter{position:relative}.p-picklist-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-picklist-filter-input{width:100%}