primereact 8.1.1 → 8.4.0

package/orderlist/orderlist.cjs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var hooks = require('primereact/hooks');
+var api = require('primereact/api');
 var utils = require('primereact/utils');
 var button = require('primereact/button');
 var ripple = require('primereact/ripple');
@@ -259,6 +260,14 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
   var draggedItemIndex = React__namespace.useRef(null);
   var dragOverItemIndex = React__namespace.useRef(null);
   var listElementRef = React__namespace.useRef(null);
+  var filterOptions = {
+    filter: function filter(e) {
+      return props.onFilterInputChange(e);
+    },
+    reset: function reset() {
+      return props.resetFilter();
+    }
+  };
 
   var isSelected = function isSelected(item) {
     return utils.ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
@@ -316,6 +325,13 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
 
+  var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
+    //enter
+    if (event.which === 13) {
+      event.preventDefault();
+    }
+  };
+
   var createDropPoint = function createDropPoint(index, key) {
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
@@ -417,11 +433,51 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
     }, items);
   };
 
+  var createFilter = function createFilter() {
+    if (props.filter) {
+      var content = /*#__PURE__*/React__namespace.createElement("div", {
+        className: "p-orderlist-filter"
+      }, /*#__PURE__*/React__namespace.createElement("input", {
+        type: "text",
+        value: props.filterValue,
+        onChange: props.onFilter,
+        onKeyDown: onFilterInputKeyDown,
+        placeholder: props.placeholder,
+        className: "p-orderlist-filter-input p-inputtext p-component"
+      }), /*#__PURE__*/React__namespace.createElement("span", {
+        className: "p-orderlist-filter-icon pi pi-search"
+      }));
+
+      if (props.filterTemplate) {
+        var defaultContentOptions = {
+          className: 'p-orderlist-filter',
+          inputProps: {
+            inputClassName: 'p-orderlist-filter-input p-inputtext p-component',
+            onChange: props.onFilter,
+            onKeyDown: onFilterInputKeyDown
+          },
+          filterOptions: filterOptions,
+          iconClassName: 'p-orderlist-filter-icon pi pi-search',
+          element: content,
+          props: props
+        };
+        content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "p-orderlist-filter-container"
+      }, content);
+    }
+
+    return null;
+  };
+
   var header = createHeader();
+  var filter = createFilter();
   var list = createList();
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: "p-orderlist-list-container"
-  }, header, list);
+  }, header, filter, list);
 });
 OrderListSubList.displayName = 'OrderListSubList';
 
@@ -431,6 +487,12 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       selectionState = _React$useState2[0],
       setSelectionState = _React$useState2[1];
 
+  var _React$useState3 = React__namespace.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      filterValueState = _React$useState4[0],
+      setFilterValueState = _React$useState4[1];
+
+  var hasFilter = utils.ObjectUtils.isNotEmpty(filterValueState);
   var elementRef = React__namespace.useRef(null);
   var reorderDirection = React__namespace.useRef(null);
 
@@ -472,6 +534,47 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
   };
 
+  var onFilter = function onFilter(event) {
+    var _filterValue = event.target.value;
+    setFilterValueState(_filterValue);
+
+    if (props.onFilter) {
+      props.onFilter({
+        originalEvent: event,
+        value: _filterValue
+      });
+    }
+  };
+
+  var resetFilter = function resetFilter() {
+    setFilterValueState('');
+    props.onFilter && props.onFilter({
+      filter: ''
+    });
+  };
+
+  var onFilterInputChange = function onFilterInputChange(event) {
+    var filter = event.target.value;
+    setFilterValueState(filter);
+
+    if (props.onFilter) {
+      props.onFilter({
+        originalEvent: event,
+        filter: filter
+      });
+    }
+  };
+
+  var getVisibleList = function getVisibleList() {
+    if (hasFilter) {
+      var filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
+      var searchFields = props.filterBy ? props.filterBy.split(',') : [];
+      return api.FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+    }
+
+    return props.value;
+  };
+
   var findNextItem = function findNextItem(item) {
     var nextItem = item.nextElementSibling;
     return nextItem ? !utils.DomHandler.hasClass(nextItem, 'p-orderlist-item') ? findNextItem(nextItem) : nextItem : null;
@@ -521,6 +624,14 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
   };
 
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      getElement: function getElement() {
+        return elementRef.current;
+      }
+    };
+  });
   hooks.useUpdateEffect(function () {
     if (reorderDirection.current) {
       updateListScroll();
@@ -529,22 +640,28 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   });
   var otherProps = utils.ObjectUtils.findDiffKeys(props, OrderList.defaultProps);
   var className = utils.classNames('p-orderlist p-component', props.className);
+  var visibleList = getVisibleList();
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
   }, otherProps), /*#__PURE__*/React__namespace.createElement(OrderListControls, {
-    value: props.value,
+    value: visibleList,
     selection: selectionState,
     onReorder: onReorder,
     dataKey: props.dataKey
   }), /*#__PURE__*/React__namespace.createElement(OrderListSubList, {
-    value: props.value,
+    value: visibleList,
     selection: selectionState,
     onItemClick: onItemClick,
     onItemKeyDown: onItemKeyDown,
+    onFilterInputChange: onFilterInputChange,
     itemTemplate: props.itemTemplate,
+    filter: props.filter,
+    onFilter: onFilter,
+    resetFilter: resetFilter,
+    filterTemplate: props.filterTemplate,
     header: props.header,
     listStyle: props.listStyle,
     dataKey: props.dataKey,
@@ -566,7 +683,14 @@ OrderList.defaultProps = {
   tabIndex: 0,
   dataKey: null,
   onChange: null,
-  itemTemplate: null
+  itemTemplate: null,
+  filter: false,
+  filterBy: null,
+  filterMatchMode: 'contains',
+  filterLocale: undefined,
+  filterPlaceholder: null,
+  filterTemplate: null,
+  onFilter: null
 };
 
 exports.OrderList = OrderList;

package/orderlist/orderlist.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),r=require("primereact/utils"),n=require("primereact/button"),l=require("primereact/ripple");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i.apply(this,arguments)}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function c(e){if(Array.isArray(e))return u(e)}function s(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e,t){if(e){if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?u(e,t):void 0}}function f(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function p(e){return c(e)||s(e)||d(e)||f()}function v(e){if(Array.isArray(e))return e}function m(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,a=[],o=!0,i=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);o=!0);}catch(e){i=!0,l=e}finally{try{o||null==r.return||r.return()}finally{if(i)throw l}}return a}}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var y=o.memo((function(e){return o.createElement("div",{className:"p-orderlist-controls"},o.createElement(n.Button,{type:"button",icon:"pi pi-angle-up",onClick:function(t){if(e.selection){for(var n=p(e.value),l=0;l<e.selection.length;l++){var a=r.ObjectUtils.findIndexInList(e.selection[l],n,e.dataKey);if(0===a)break;var o=n[a-1];n[a-1]=n[a],n[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"up"})}}}),o.createElement(n.Button,{type:"button",icon:"pi pi-angle-double-up",onClick:function(t){if(e.selection){for(var n=p(e.value),l=0;l<e.selection.length;l++){var a=r.ObjectUtils.findIndexInList(e.selection[l],n,e.dataKey);if(0===a)break;var o=n.splice(a,1)[0];n.unshift(o)}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"top"})}}}),o.createElement(n.Button,{type:"button",icon:"pi pi-angle-down",onClick:function(t){if(e.selection){for(var n=p(e.value),l=e.selection.length-1;l>=0;l--){var a=r.ObjectUtils.findIndexInList(e.selection[l],n,e.dataKey);if(a===n.length-1)break;var o=n[a+1];n[a+1]=n[a],n[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"down"})}}}),o.createElement(n.Button,{type:"button",icon:"pi pi-angle-double-down",onClick:function(t){if(e.selection){for(var n=p(e.value),l=e.selection.length-1;l>=0;l--){var a=r.ObjectUtils.findIndexInList(e.selection[l],n,e.dataKey);if(a===n.length-1)break;var o=n.splice(a,1)[0];n.push(o)}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"bottom"})}}}))}));y.displayName="OrderListControls";var h=o.memo((function(e){var t,n=o.useRef(null),a=o.useRef(null),i=o.useRef(null),u=o.useRef(null),c=function(t){return-1!==r.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},s=function(e,t){a.current!==t&&a.current+1!==t&&(i.current=t,r.DomHandler.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},d=function(e){i.current=null,r.DomHandler.removeClass(e.target,"p-orderlist-droppoint-highlight")},f=function(t){var n=a.current>i.current?i.current:0===i.current?0:i.current-1,l=p(e.value);r.ObjectUtils.reorderArray(l,a.current,n),i.current=null,r.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),e.onChange&&e.onChange({originalEvent:t,value:l})},v=function(e){n.current=!1},m=function(e){if(n.current){var t=u.current.getBoundingClientRect().top+r.DomHandler.getWindowScrollTop(),l=t+u.current.clientHeight-e.pageY,a=e.pageY-t;l<25&&l>0?u.current.scrollTop+=15:a<25&&a>0&&(u.current.scrollTop-=15)}},g=function(e,t){return o.createElement("li",{key:t,className:"p-orderlist-droppoint",onDragOver:function(t){return s(t,e+1)},onDragLeave:d,onDrop:f})},y=e.header?o.createElement("div",{className:"p-orderlist-header"},e.header):null,h=(t=e.value?e.value.map((function(t,i){var u=e.itemTemplate?e.itemTemplate(t):t,s=r.classNames("p-orderlist-item",{"p-highlight":c(t)},e.className),d=JSON.stringify(t);if(e.dragdrop){var f=[g(i,d+"_droppoint"),o.createElement("li",{key:d,className:s,onClick:function(r){return e.onItemClick({originalEvent:r,value:t,index:i})},onKeyDown:function(r){return e.onItemKeyDown({originalEvent:r,value:t,index:i})},role:"option","aria-selected":c(t),draggable:"true",onDragStart:function(t){return r=t,l=i,n.current=!0,a.current=l,void(e.dragdropScope&&r.dataTransfer.setData("text","orderlist"));var r,l},onDragEnd:v,tabIndex:e.tabIndex},u,o.createElement(l.Ripple,null))];return i===e.value.length-1&&f.push(g(t,i)),f}return o.createElement("li",{key:d,className:s,role:"option","aria-selected":c(t),onClick:function(r){return e.onItemClick({originalEvent:r,value:t,index:i})},onKeyDown:function(r){return e.onItemKeyDown({originalEvent:r,value:t,index:i})},tabIndex:e.tabIndex},u)})):null,o.createElement("ul",{ref:u,className:"p-orderlist-list",style:e.listStyle,onDragOver:m,role:"listbox","aria-multiselectable":!0},t));return o.createElement("div",{className:"p-orderlist-list-container"},y,h)}));h.displayName="OrderListSubList";var b=o.memo(o.forwardRef((function(e,n){var l,a,u=o.useState([]),c=(a=2,v(l=u)||m(l,a)||d(l,a)||g()),s=c[0],f=c[1],E=o.useRef(null),I=o.useRef(null),D=function(t){var n,l=t.originalEvent.metaKey||t.originalEvent.ctrlKey,a=r.ObjectUtils.findIndexInList(t.value,s,e.dataKey);n=-1!==a?l?s.filter((function(e,t){return t!==a})):[t.value]:l?[].concat(p(s),[t.value]):[t.value],f(n)},O=function e(t){var n=t.nextElementSibling;return n?r.DomHandler.hasClass(n,"p-orderlist-item")?n:e(n):null},w=function e(t){var n=t.previousElementSibling;return n?r.DomHandler.hasClass(n,"p-orderlist-item")?n:e(n):null},C=function(){var e=r.DomHandler.findSingle(E.current,".p-orderlist-list"),t=r.DomHandler.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(I.current){case"up":r.DomHandler.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":r.DomHandler.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}};t.useUpdateEffect((function(){I.current&&(C(),I.current=null)}));var k=r.ObjectUtils.findDiffKeys(e,b.defaultProps),x=r.classNames("p-orderlist p-component",e.className);return o.createElement("div",i({ref:E,id:e.id,className:x,style:e.style},k),o.createElement(y,{value:e.value,selection:s,onReorder:function(t){e.onChange&&e.onChange({event:t.originalEvent,value:t.value}),I.current=t.direction},dataKey:e.dataKey}),o.createElement(h,{value:e.value,selection:s,onItemClick:D,onItemKeyDown:function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=O(r);n&&n.focus(),t.preventDefault();break;case 38:var l=w(r);l&&l.focus(),t.preventDefault();break;case 13:D(e),t.preventDefault()}},itemTemplate:e.itemTemplate,header:e.header,listStyle:e.listStyle,dataKey:e.dataKey,dragdrop:e.dragdrop,onChange:e.onChange,tabIndex:e.tabIndex}))})));b.displayName="OrderList",b.defaultProps={__TYPE:"OrderList",id:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,dataKey:null,onChange:null,itemTemplate:null},exports.OrderList=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),r=require("primereact/api"),n=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(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e);function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function s(e){if(Array.isArray(e))return c(e)}function d(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function f(e,t){if(e){if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(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 m(e){return s(e)||d(e)||f(e)||p()}function v(e){if(Array.isArray(e))return e}function g(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,i=[],a=!0,o=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(e){o=!0,l=e}finally{try{a||null==r.return||r.return()}finally{if(o)throw l}}return i}}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 h(e,t){return v(e)||g(e,t)||f(e,t)||y()}var b=o.memo((function(e){return o.createElement("div",{className:"p-orderlist-controls"},o.createElement(l.Button,{type:"button",icon:"pi pi-angle-up",onClick:function(t){if(e.selection){for(var r=m(e.value),l=0;l<e.selection.length;l++){var i=n.ObjectUtils.findIndexInList(e.selection[l],r,e.dataKey);if(0===i)break;var a=r[i-1];r[i-1]=r[i],r[i]=a}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"up"})}}}),o.createElement(l.Button,{type:"button",icon:"pi pi-angle-double-up",onClick:function(t){if(e.selection){for(var r=m(e.value),l=0;l<e.selection.length;l++){var i=n.ObjectUtils.findIndexInList(e.selection[l],r,e.dataKey);if(0===i)break;var a=r.splice(i,1)[0];r.unshift(a)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"top"})}}}),o.createElement(l.Button,{type:"button",icon:"pi pi-angle-down",onClick:function(t){if(e.selection){for(var r=m(e.value),l=e.selection.length-1;l>=0;l--){var i=n.ObjectUtils.findIndexInList(e.selection[l],r,e.dataKey);if(i===r.length-1)break;var a=r[i+1];r[i+1]=r[i],r[i]=a}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"down"})}}}),o.createElement(l.Button,{type:"button",icon:"pi pi-angle-double-down",onClick:function(t){if(e.selection){for(var r=m(e.value),l=e.selection.length-1;l>=0;l--){var i=n.ObjectUtils.findIndexInList(e.selection[l],r,e.dataKey);if(i===r.length-1)break;var a=r.splice(i,1)[0];r.push(a)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"bottom"})}}}))}));b.displayName="OrderListControls";var E=o.memo((function(e){var t,r=o.useRef(null),l=o.useRef(null),a=o.useRef(null),u=o.useRef(null),c={filter:function(t){return e.onFilterInputChange(t)},reset:function(){return e.resetFilter()}},s=function(t){return-1!==n.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},d=function(e,t){l.current!==t&&l.current+1!==t&&(a.current=t,n.DomHandler.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},f=function(e){a.current=null,n.DomHandler.removeClass(e.target,"p-orderlist-droppoint-highlight")},p=function(t){var r=l.current>a.current?a.current:0===a.current?0:a.current-1,i=m(e.value);n.ObjectUtils.reorderArray(i,l.current,r),a.current=null,n.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),e.onChange&&e.onChange({originalEvent:t,value:i})},v=function(e){r.current=!1},g=function(e){if(r.current){var t=u.current.getBoundingClientRect().top+n.DomHandler.getWindowScrollTop(),l=t+u.current.clientHeight-e.pageY,i=e.pageY-t;l<25&&l>0?u.current.scrollTop+=15:i<25&&i>0&&(u.current.scrollTop-=15)}},y=function(e){13===e.which&&e.preventDefault()},h=function(e,t){return o.createElement("li",{key:t,className:"p-orderlist-droppoint",onDragOver:function(t){return d(t,e+1)},onDragLeave:f,onDrop:p})},b=e.header?o.createElement("div",{className:"p-orderlist-header"},e.header):null,E=function(){if(e.filter){var t=o.createElement("div",{className:"p-orderlist-filter"},o.createElement("input",{type:"text",value:e.filterValue,onChange:e.onFilter,onKeyDown:y,placeholder:e.placeholder,className:"p-orderlist-filter-input p-inputtext p-component"}),o.createElement("span",{className:"p-orderlist-filter-icon pi pi-search"}));if(e.filterTemplate)t=n.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-orderlist-filter",inputProps:{inputClassName:"p-orderlist-filter-input p-inputtext p-component",onChange:e.onFilter,onKeyDown:y},filterOptions:c,iconClassName:"p-orderlist-filter-icon pi pi-search",element:t,props:e});return o.createElement("div",{className:"p-orderlist-filter-container"},t)}return null}(),I=(t=e.value?e.value.map((function(t,a){var u=e.itemTemplate?e.itemTemplate(t):t,c=n.classNames("p-orderlist-item",{"p-highlight":s(t)},e.className),d=JSON.stringify(t);if(e.dragdrop){var f=[h(a,d+"_droppoint"),o.createElement("li",{key:d,className:c,onClick:function(r){return e.onItemClick({originalEvent:r,value:t,index:a})},onKeyDown:function(r){return e.onItemKeyDown({originalEvent:r,value:t,index:a})},role:"option","aria-selected":s(t),draggable:"true",onDragStart:function(t){return n=t,i=a,r.current=!0,l.current=i,void(e.dragdropScope&&n.dataTransfer.setData("text","orderlist"));var n,i},onDragEnd:v,tabIndex:e.tabIndex},u,o.createElement(i.Ripple,null))];return a===e.value.length-1&&f.push(h(t,a)),f}return o.createElement("li",{key:d,className:c,role:"option","aria-selected":s(t),onClick:function(r){return e.onItemClick({originalEvent:r,value:t,index:a})},onKeyDown:function(r){return e.onItemKeyDown({originalEvent:r,value:t,index:a})},tabIndex:e.tabIndex},u)})):null,o.createElement("ul",{ref:u,className:"p-orderlist-list",style:e.listStyle,onDragOver:g,role:"listbox","aria-multiselectable":!0},t));return o.createElement("div",{className:"p-orderlist-list-container"},b,E,I)}));E.displayName="OrderListSubList";var I=o.memo(o.forwardRef((function(e,l){var i=h(o.useState([]),2),a=i[0],c=i[1],s=h(o.useState(""),2),d=s[0],f=s[1],p=n.ObjectUtils.isNotEmpty(d),v=o.useRef(null),g=o.useRef(null),y=function(t){var r,l=t.originalEvent.metaKey||t.originalEvent.ctrlKey,i=n.ObjectUtils.findIndexInList(t.value,a,e.dataKey);r=-1!==i?l?a.filter((function(e,t){return t!==i})):[t.value]:l?[].concat(m(a),[t.value]):[t.value],c(r)},C=function e(t){var r=t.nextElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},D=function e(t){var r=t.previousElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},O=function(){var e=n.DomHandler.findSingle(v.current,".p-orderlist-list"),t=n.DomHandler.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(g.current){case"up":n.DomHandler.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":n.DomHandler.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}};o.useImperativeHandle(l,(function(){return{props:e,getElement:function(){return v.current}}})),t.useUpdateEffect((function(){g.current&&(O(),g.current=null)}));var w=n.ObjectUtils.findDiffKeys(e,I.defaultProps),x=n.classNames("p-orderlist p-component",e.className),N=function(){if(p){var t=d.trim().toLocaleLowerCase(e.filterLocale),n=e.filterBy?e.filterBy.split(","):[];return r.FilterService.filter(e.value,n,t,e.filterMatchMode,e.filterLocale)}return e.value}();return o.createElement("div",u({ref:v,id:e.id,className:x,style:e.style},w),o.createElement(b,{value:N,selection:a,onReorder:function(t){e.onChange&&e.onChange({event:t.originalEvent,value:t.value}),g.current=t.direction},dataKey:e.dataKey}),o.createElement(E,{value:N,selection:a,onItemClick:y,onItemKeyDown:function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=C(r);n&&n.focus(),t.preventDefault();break;case 38:var l=D(r);l&&l.focus(),t.preventDefault();break;case 13:y(e),t.preventDefault()}},onFilterInputChange:function(t){var r=t.target.value;f(r),e.onFilter&&e.onFilter({originalEvent:t,filter:r})},itemTemplate:e.itemTemplate,filter:e.filter,onFilter:function(t){var r=t.target.value;f(r),e.onFilter&&e.onFilter({originalEvent:t,value:r})},resetFilter:function(){f(""),e.onFilter&&e.onFilter({filter:""})},filterTemplate:e.filterTemplate,header:e.header,listStyle:e.listStyle,dataKey:e.dataKey,dragdrop:e.dragdrop,onChange:e.onChange,tabIndex:e.tabIndex}))})));I.displayName="OrderList",I.defaultProps={__TYPE:"OrderList",id:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,dataKey:null,onChange:null,itemTemplate:null,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,filterPlaceholder:null,filterTemplate:null,onFilter:null},exports.OrderList=I;

package/orderlist/orderlist.d.ts

@@ -1,23 +1,34 @@
 import * as React from 'react';
 
+type OrderListFilterTemplateType = React.ReactNode | ((options: OrderListFilterOptions) => React.ReactNode);
+
 interface OrderListChangeParams {
     originalEvent: React.SyntheticEvent;
     value: any;
 }
 
-export interface OrderListProps {
-    id?: string;
+interface OrderListFilterOptions {
+    filter?: (event?: KeyboardEvent) => void;
+    reset?: () => void;
+}
+
+export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
     value?: any[];
     header?: React.ReactNode;
-    style?: object;
-    className?: string;
     listStyle?: object;
     dragdrop?: boolean;
-    tabIndex?: number;
     dataKey?: string;
+    filter?: boolean;
+    filterBy?: string;
+    filterMatchMode?: string;
+    filterPlaceholder?: string;
+    filterLocale?: string;
+    filterTemplate?: OrderListFilterTemplateType;
     onChange?(e: OrderListChangeParams): void;
     itemTemplate?(item: any): React.ReactNode;
     children?: React.ReactNode;
 }
 
-export declare class OrderList extends React.Component<OrderListProps, any> { }
+export declare class OrderList extends React.Component<OrderListProps, any> { 
+    public getElement(): HTMLDivElement;
+}

package/orderlist/orderlist.esm.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useUpdateEffect } from 'primereact/hooks';
+import { FilterService } from 'primereact/api';
 import { ObjectUtils, DomHandler, classNames } from 'primereact/utils';
 import { Button } from 'primereact/button';
 import { Ripple } from 'primereact/ripple';
@@ -235,6 +236,14 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
   var draggedItemIndex = React.useRef(null);
   var dragOverItemIndex = React.useRef(null);
   var listElementRef = React.useRef(null);
+  var filterOptions = {
+    filter: function filter(e) {
+      return props.onFilterInputChange(e);
+    },
+    reset: function reset() {
+      return props.resetFilter();
+    }
+  };
 
   var isSelected = function isSelected(item) {
     return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
@@ -292,6 +301,13 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
     }
   };
 
+  var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
+    //enter
+    if (event.which === 13) {
+      event.preventDefault();
+    }
+  };
+
   var createDropPoint = function createDropPoint(index, key) {
     return /*#__PURE__*/React.createElement("li", {
       key: key,
@@ -393,11 +409,51 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
     }, items);
   };
 
+  var createFilter = function createFilter() {
+    if (props.filter) {
+      var content = /*#__PURE__*/React.createElement("div", {
+        className: "p-orderlist-filter"
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        value: props.filterValue,
+        onChange: props.onFilter,
+        onKeyDown: onFilterInputKeyDown,
+        placeholder: props.placeholder,
+        className: "p-orderlist-filter-input p-inputtext p-component"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "p-orderlist-filter-icon pi pi-search"
+      }));
+
+      if (props.filterTemplate) {
+        var defaultContentOptions = {
+          className: 'p-orderlist-filter',
+          inputProps: {
+            inputClassName: 'p-orderlist-filter-input p-inputtext p-component',
+            onChange: props.onFilter,
+            onKeyDown: onFilterInputKeyDown
+          },
+          filterOptions: filterOptions,
+          iconClassName: 'p-orderlist-filter-icon pi pi-search',
+          element: content,
+          props: props
+        };
+        content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "p-orderlist-filter-container"
+      }, content);
+    }
+
+    return null;
+  };
+
   var header = createHeader();
+  var filter = createFilter();
   var list = createList();
   return /*#__PURE__*/React.createElement("div", {
     className: "p-orderlist-list-container"
-  }, header, list);
+  }, header, filter, list);
 });
 OrderListSubList.displayName = 'OrderListSubList';
 
@@ -407,6 +463,12 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       selectionState = _React$useState2[0],
       setSelectionState = _React$useState2[1];
 
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      filterValueState = _React$useState4[0],
+      setFilterValueState = _React$useState4[1];
+
+  var hasFilter = ObjectUtils.isNotEmpty(filterValueState);
   var elementRef = React.useRef(null);
   var reorderDirection = React.useRef(null);
 
@@ -448,6 +510,47 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
   };
 
+  var onFilter = function onFilter(event) {
+    var _filterValue = event.target.value;
+    setFilterValueState(_filterValue);
+
+    if (props.onFilter) {
+      props.onFilter({
+        originalEvent: event,
+        value: _filterValue
+      });
+    }
+  };
+
+  var resetFilter = function resetFilter() {
+    setFilterValueState('');
+    props.onFilter && props.onFilter({
+      filter: ''
+    });
+  };
+
+  var onFilterInputChange = function onFilterInputChange(event) {
+    var filter = event.target.value;
+    setFilterValueState(filter);
+
+    if (props.onFilter) {
+      props.onFilter({
+        originalEvent: event,
+        filter: filter
+      });
+    }
+  };
+
+  var getVisibleList = function getVisibleList() {
+    if (hasFilter) {
+      var filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
+      var searchFields = props.filterBy ? props.filterBy.split(',') : [];
+      return FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+    }
+
+    return props.value;
+  };
+
   var findNextItem = function findNextItem(item) {
     var nextItem = item.nextElementSibling;
     return nextItem ? !DomHandler.hasClass(nextItem, 'p-orderlist-item') ? findNextItem(nextItem) : nextItem : null;
@@ -497,6 +600,14 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
   };
 
+  React.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      getElement: function getElement() {
+        return elementRef.current;
+      }
+    };
+  });
   useUpdateEffect(function () {
     if (reorderDirection.current) {
       updateListScroll();
@@ -505,22 +616,28 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   });
   var otherProps = ObjectUtils.findDiffKeys(props, OrderList.defaultProps);
   var className = classNames('p-orderlist p-component', props.className);
+  var visibleList = getVisibleList();
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
   }, otherProps), /*#__PURE__*/React.createElement(OrderListControls, {
-    value: props.value,
+    value: visibleList,
     selection: selectionState,
     onReorder: onReorder,
     dataKey: props.dataKey
   }), /*#__PURE__*/React.createElement(OrderListSubList, {
-    value: props.value,
+    value: visibleList,
     selection: selectionState,
     onItemClick: onItemClick,
     onItemKeyDown: onItemKeyDown,
+    onFilterInputChange: onFilterInputChange,
     itemTemplate: props.itemTemplate,
+    filter: props.filter,
+    onFilter: onFilter,
+    resetFilter: resetFilter,
+    filterTemplate: props.filterTemplate,
     header: props.header,
     listStyle: props.listStyle,
     dataKey: props.dataKey,
@@ -542,7 +659,14 @@ OrderList.defaultProps = {
   tabIndex: 0,
   dataKey: null,
   onChange: null,
-  itemTemplate: null
+  itemTemplate: null,
+  filter: false,
+  filterBy: null,
+  filterMatchMode: 'contains',
+  filterLocale: undefined,
+  filterPlaceholder: null,
+  filterTemplate: null,
+  onFilter: null
 };
 
 export { OrderList };

package/orderlist/orderlist.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{useUpdateEffect as t}from"primereact/hooks";import{ObjectUtils as r,DomHandler as n,classNames as l}from"primereact/utils";import{Button as a}from"primereact/button";import{Ripple as o}from"primereact/ripple";function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i.apply(this,arguments)}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function c(e){if(Array.isArray(e))return u(e)}function s(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e,t){if(e){if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?u(e,t):void 0}}function f(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function p(e){return c(e)||s(e)||d(e)||f()}function v(e){if(Array.isArray(e))return e}function m(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,a=[],o=!0,i=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);o=!0);}catch(e){i=!0,l=e}finally{try{o||null==r.return||r.return()}finally{if(i)throw l}}return a}}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var y=e.memo((function(t){return e.createElement("div",{className:"p-orderlist-controls"},e.createElement(a,{type:"button",icon:"pi pi-angle-up",onClick:function(e){if(t.selection){for(var n=p(t.value),l=0;l<t.selection.length;l++){var a=r.findIndexInList(t.selection[l],n,t.dataKey);if(0===a)break;var o=n[a-1];n[a-1]=n[a],n[a]=o}t.onReorder&&t.onReorder({originalEvent:e,value:n,direction:"up"})}}}),e.createElement(a,{type:"button",icon:"pi pi-angle-double-up",onClick:function(e){if(t.selection){for(var n=p(t.value),l=0;l<t.selection.length;l++){var a=r.findIndexInList(t.selection[l],n,t.dataKey);if(0===a)break;var o=n.splice(a,1)[0];n.unshift(o)}t.onReorder&&t.onReorder({originalEvent:e,value:n,direction:"top"})}}}),e.createElement(a,{type:"button",icon:"pi pi-angle-down",onClick:function(e){if(t.selection){for(var n=p(t.value),l=t.selection.length-1;l>=0;l--){var a=r.findIndexInList(t.selection[l],n,t.dataKey);if(a===n.length-1)break;var o=n[a+1];n[a+1]=n[a],n[a]=o}t.onReorder&&t.onReorder({originalEvent:e,value:n,direction:"down"})}}}),e.createElement(a,{type:"button",icon:"pi pi-angle-double-down",onClick:function(e){if(t.selection){for(var n=p(t.value),l=t.selection.length-1;l>=0;l--){var a=r.findIndexInList(t.selection[l],n,t.dataKey);if(a===n.length-1)break;var o=n.splice(a,1)[0];n.push(o)}t.onReorder&&t.onReorder({originalEvent:e,value:n,direction:"bottom"})}}}))}));y.displayName="OrderListControls";var h=e.memo((function(t){var a,i=e.useRef(null),u=e.useRef(null),c=e.useRef(null),s=e.useRef(null),d=function(e){return-1!==r.findIndexInList(e,t.selection,t.dataKey)},f=function(e,t){u.current!==t&&u.current+1!==t&&(c.current=t,n.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},v=function(e){c.current=null,n.removeClass(e.target,"p-orderlist-droppoint-highlight")},m=function(e){var l=u.current>c.current?c.current:0===c.current?0:c.current-1,a=p(t.value);r.reorderArray(a,u.current,l),c.current=null,n.removeClass(e.target,"p-orderlist-droppoint-highlight"),t.onChange&&t.onChange({originalEvent:e,value:a})},g=function(e){i.current=!1},y=function(e){if(i.current){var t=s.current.getBoundingClientRect().top+n.getWindowScrollTop(),r=t+s.current.clientHeight-e.pageY,l=e.pageY-t;r<25&&r>0?s.current.scrollTop+=15:l<25&&l>0&&(s.current.scrollTop-=15)}},h=function(t,r){return e.createElement("li",{key:r,className:"p-orderlist-droppoint",onDragOver:function(e){return f(e,t+1)},onDragLeave:v,onDrop:m})},b=t.header?e.createElement("div",{className:"p-orderlist-header"},t.header):null,E=(a=t.value?t.value.map((function(r,n){var a=t.itemTemplate?t.itemTemplate(r):r,c=l("p-orderlist-item",{"p-highlight":d(r)},t.className),s=JSON.stringify(r);if(t.dragdrop){var f=[h(n,s+"_droppoint"),e.createElement("li",{key:s,className:c,onClick:function(e){return t.onItemClick({originalEvent:e,value:r,index:n})},onKeyDown:function(e){return t.onItemKeyDown({originalEvent:e,value:r,index:n})},role:"option","aria-selected":d(r),draggable:"true",onDragStart:function(e){return r=e,l=n,i.current=!0,u.current=l,void(t.dragdropScope&&r.dataTransfer.setData("text","orderlist"));var r,l},onDragEnd:g,tabIndex:t.tabIndex},a,e.createElement(o,null))];return n===t.value.length-1&&f.push(h(r,n)),f}return e.createElement("li",{key:s,className:c,role:"option","aria-selected":d(r),onClick:function(e){return t.onItemClick({originalEvent:e,value:r,index:n})},onKeyDown:function(e){return t.onItemKeyDown({originalEvent:e,value:r,index:n})},tabIndex:t.tabIndex},a)})):null,e.createElement("ul",{ref:s,className:"p-orderlist-list",style:t.listStyle,onDragOver:y,role:"listbox","aria-multiselectable":!0},a));return e.createElement("div",{className:"p-orderlist-list-container"},b,E)}));h.displayName="OrderListSubList";var b=e.memo(e.forwardRef((function(a,o){var u,c,s=e.useState([]),f=(c=2,v(u=s)||m(u,c)||d(u,c)||g()),E=f[0],I=f[1],C=e.useRef(null),w=e.useRef(null),k=function(e){var t,n=e.originalEvent.metaKey||e.originalEvent.ctrlKey,l=r.findIndexInList(e.value,E,a.dataKey);t=-1!==l?n?E.filter((function(e,t){return t!==l})):[e.value]:n?[].concat(p(E),[e.value]):[e.value],I(t)},x=function e(t){var r=t.nextElementSibling;return r?n.hasClass(r,"p-orderlist-item")?r:e(r):null},S=function e(t){var r=t.previousElementSibling;return r?n.hasClass(r,"p-orderlist-item")?r:e(r):null},K=function(){var e=n.findSingle(C.current,".p-orderlist-list"),t=n.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(w.current){case"up":n.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":n.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}};t((function(){w.current&&(K(),w.current=null)}));var D=r.findDiffKeys(a,b.defaultProps),R=l("p-orderlist p-component",a.className);return e.createElement("div",i({ref:C,id:a.id,className:R,style:a.style},D),e.createElement(y,{value:a.value,selection:E,onReorder:function(e){a.onChange&&a.onChange({event:e.originalEvent,value:e.value}),w.current=e.direction},dataKey:a.dataKey}),e.createElement(h,{value:a.value,selection:E,onItemClick:k,onItemKeyDown:function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=x(r);n&&n.focus(),t.preventDefault();break;case 38:var l=S(r);l&&l.focus(),t.preventDefault();break;case 13:k(e),t.preventDefault()}},itemTemplate:a.itemTemplate,header:a.header,listStyle:a.listStyle,dataKey:a.dataKey,dragdrop:a.dragdrop,onChange:a.onChange,tabIndex:a.tabIndex}))})));b.displayName="OrderList",b.defaultProps={__TYPE:"OrderList",id:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,dataKey:null,onChange:null,itemTemplate:null};export{b as OrderList};
+import*as e from"react";import{useUpdateEffect as t}from"primereact/hooks";import{FilterService as r}from"primereact/api";import{ObjectUtils as n,DomHandler as l,classNames as i}from"primereact/utils";import{Button as o}from"primereact/button";import{Ripple as a}from"primereact/ripple";function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function s(e){if(Array.isArray(e))return c(e)}function f(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function p(e,t){if(e){if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,t):void 0}}function d(){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 m(e){return s(e)||f(e)||p(e)||d()}function v(e){if(Array.isArray(e))return e}function g(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,i=[],o=!0,a=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);o=!0);}catch(e){a=!0,l=e}finally{try{o||null==r.return||r.return()}finally{if(a)throw l}}return i}}function h(){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 y(e,t){return v(e)||g(e,t)||p(e,t)||h()}var b=e.memo((function(t){return e.createElement("div",{className:"p-orderlist-controls"},e.createElement(o,{type:"button",icon:"pi pi-angle-up",onClick:function(e){if(t.selection){for(var r=m(t.value),l=0;l<t.selection.length;l++){var i=n.findIndexInList(t.selection[l],r,t.dataKey);if(0===i)break;var o=r[i-1];r[i-1]=r[i],r[i]=o}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"up"})}}}),e.createElement(o,{type:"button",icon:"pi pi-angle-double-up",onClick:function(e){if(t.selection){for(var r=m(t.value),l=0;l<t.selection.length;l++){var i=n.findIndexInList(t.selection[l],r,t.dataKey);if(0===i)break;var o=r.splice(i,1)[0];r.unshift(o)}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"top"})}}}),e.createElement(o,{type:"button",icon:"pi pi-angle-down",onClick:function(e){if(t.selection){for(var r=m(t.value),l=t.selection.length-1;l>=0;l--){var i=n.findIndexInList(t.selection[l],r,t.dataKey);if(i===r.length-1)break;var o=r[i+1];r[i+1]=r[i],r[i]=o}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"down"})}}}),e.createElement(o,{type:"button",icon:"pi pi-angle-double-down",onClick:function(e){if(t.selection){for(var r=m(t.value),l=t.selection.length-1;l>=0;l--){var i=n.findIndexInList(t.selection[l],r,t.dataKey);if(i===r.length-1)break;var o=r.splice(i,1)[0];r.push(o)}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"bottom"})}}}))}));b.displayName="OrderListControls";var E=e.memo((function(t){var r,o=e.useRef(null),u=e.useRef(null),c=e.useRef(null),s=e.useRef(null),f={filter:function(e){return t.onFilterInputChange(e)},reset:function(){return t.resetFilter()}},p=function(e){return-1!==n.findIndexInList(e,t.selection,t.dataKey)},d=function(e,t){u.current!==t&&u.current+1!==t&&(c.current=t,l.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},v=function(e){c.current=null,l.removeClass(e.target,"p-orderlist-droppoint-highlight")},g=function(e){var r=u.current>c.current?c.current:0===c.current?0:c.current-1,i=m(t.value);n.reorderArray(i,u.current,r),c.current=null,l.removeClass(e.target,"p-orderlist-droppoint-highlight"),t.onChange&&t.onChange({originalEvent:e,value:i})},h=function(e){o.current=!1},y=function(e){if(o.current){var t=s.current.getBoundingClientRect().top+l.getWindowScrollTop(),r=t+s.current.clientHeight-e.pageY,n=e.pageY-t;r<25&&r>0?s.current.scrollTop+=15:n<25&&n>0&&(s.current.scrollTop-=15)}},b=function(e){13===e.which&&e.preventDefault()},E=function(t,r){return e.createElement("li",{key:r,className:"p-orderlist-droppoint",onDragOver:function(e){return d(e,t+1)},onDragLeave:v,onDrop:g})},I=t.header?e.createElement("div",{className:"p-orderlist-header"},t.header):null,C=function(){if(t.filter){var r=e.createElement("div",{className:"p-orderlist-filter"},e.createElement("input",{type:"text",value:t.filterValue,onChange:t.onFilter,onKeyDown:b,placeholder:t.placeholder,className:"p-orderlist-filter-input p-inputtext p-component"}),e.createElement("span",{className:"p-orderlist-filter-icon pi pi-search"}));if(t.filterTemplate)r=n.getJSXElement(t.filterTemplate,{className:"p-orderlist-filter",inputProps:{inputClassName:"p-orderlist-filter-input p-inputtext p-component",onChange:t.onFilter,onKeyDown:b},filterOptions:f,iconClassName:"p-orderlist-filter-icon pi pi-search",element:r,props:t});return e.createElement("div",{className:"p-orderlist-filter-container"},r)}return null}(),w=(r=t.value?t.value.map((function(r,n){var l=t.itemTemplate?t.itemTemplate(r):r,c=i("p-orderlist-item",{"p-highlight":p(r)},t.className),s=JSON.stringify(r);if(t.dragdrop){var f=[E(n,s+"_droppoint"),e.createElement("li",{key:s,className:c,onClick:function(e){return t.onItemClick({originalEvent:e,value:r,index:n})},onKeyDown:function(e){return t.onItemKeyDown({originalEvent:e,value:r,index:n})},role:"option","aria-selected":p(r),draggable:"true",onDragStart:function(e){return r=e,l=n,o.current=!0,u.current=l,void(t.dragdropScope&&r.dataTransfer.setData("text","orderlist"));var r,l},onDragEnd:h,tabIndex:t.tabIndex},l,e.createElement(a,null))];return n===t.value.length-1&&f.push(E(r,n)),f}return e.createElement("li",{key:s,className:c,role:"option","aria-selected":p(r),onClick:function(e){return t.onItemClick({originalEvent:e,value:r,index:n})},onKeyDown:function(e){return t.onItemKeyDown({originalEvent:e,value:r,index:n})},tabIndex:t.tabIndex},l)})):null,e.createElement("ul",{ref:s,className:"p-orderlist-list",style:t.listStyle,onDragOver:y,role:"listbox","aria-multiselectable":!0},r));return e.createElement("div",{className:"p-orderlist-list-container"},I,C,w)}));E.displayName="OrderListSubList";var I=e.memo(e.forwardRef((function(o,a){var c=y(e.useState([]),2),s=c[0],f=c[1],p=y(e.useState(""),2),d=p[0],v=p[1],g=n.isNotEmpty(d),h=e.useRef(null),C=e.useRef(null),w=function(e){var t,r=e.originalEvent.metaKey||e.originalEvent.ctrlKey,l=n.findIndexInList(e.value,s,o.dataKey);t=-1!==l?r?s.filter((function(e,t){return t!==l})):[e.value]:r?[].concat(m(s),[e.value]):[e.value],f(t)},x=function e(t){var r=t.nextElementSibling;return r?l.hasClass(r,"p-orderlist-item")?r:e(r):null},N=function e(t){var r=t.previousElementSibling;return r?l.hasClass(r,"p-orderlist-item")?r:e(r):null},S=function(){var e=l.findSingle(h.current,".p-orderlist-list"),t=l.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(C.current){case"up":l.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":l.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}};e.useImperativeHandle(a,(function(){return{props:o,getElement:function(){return h.current}}})),t((function(){C.current&&(S(),C.current=null)}));var k=n.findDiffKeys(o,I.defaultProps),K=i("p-orderlist p-component",o.className),T=function(){if(g){var e=d.trim().toLocaleLowerCase(o.filterLocale),t=o.filterBy?o.filterBy.split(","):[];return r.filter(o.value,t,e,o.filterMatchMode,o.filterLocale)}return o.value}();return e.createElement("div",u({ref:h,id:o.id,className:K,style:o.style},k),e.createElement(b,{value:T,selection:s,onReorder:function(e){o.onChange&&o.onChange({event:e.originalEvent,value:e.value}),C.current=e.direction},dataKey:o.dataKey}),e.createElement(E,{value:T,selection:s,onItemClick:w,onItemKeyDown:function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=x(r);n&&n.focus(),t.preventDefault();break;case 38:var l=N(r);l&&l.focus(),t.preventDefault();break;case 13:w(e),t.preventDefault()}},onFilterInputChange:function(e){var t=e.target.value;v(t),o.onFilter&&o.onFilter({originalEvent:e,filter:t})},itemTemplate:o.itemTemplate,filter:o.filter,onFilter:function(e){var t=e.target.value;v(t),o.onFilter&&o.onFilter({originalEvent:e,value:t})},resetFilter:function(){v(""),o.onFilter&&o.onFilter({filter:""})},filterTemplate:o.filterTemplate,header:o.header,listStyle:o.listStyle,dataKey:o.dataKey,dragdrop:o.dragdrop,onChange:o.onChange,tabIndex:o.tabIndex}))})));I.displayName="OrderList",I.defaultProps={__TYPE:"OrderList",id:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,dataKey:null,onChange:null,itemTemplate:null,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,filterPlaceholder:null,filterTemplate:null,onFilter:null};export{I as OrderList};