primereact 8.7.2 → 9.0.0-beta.1

package/orderlist/orderlist.cjs.js

@@ -33,14 +33,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -48,11 +46,9 @@ function _extends() {
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) {
     arr2[i] = arr[i];
   }
-
   return arr2;
 }
 
@@ -86,33 +82,33 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+        ;
+      }
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-
-  return _arr;
 }
 
 function _nonIterableRest() {
@@ -127,11 +123,9 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
   var moveUp = function moveUp(event) {
     if (props.selection) {
       var value = _toConsumableArray(props.value);
-
       for (var i = 0; i < props.selection.length; i++) {
         var selectedItem = props.selection[i];
         var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
-
         if (selectedItemIndex !== 0) {
           var movedItem = value[selectedItemIndex];
           var temp = value[selectedItemIndex - 1];
@@ -141,7 +135,6 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
           break;
         }
       }
-
       if (props.onReorder) {
         props.onReorder({
           originalEvent: event,
@@ -151,15 +144,12 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     }
   };
-
   var moveTop = function moveTop(event) {
     if (props.selection) {
       var value = _toConsumableArray(props.value);
-
       for (var i = 0; i < props.selection.length; i++) {
         var selectedItem = props.selection[i];
         var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
-
         if (selectedItemIndex !== 0) {
           var movedItem = value.splice(selectedItemIndex, 1)[0];
           value.unshift(movedItem);
@@ -167,7 +157,6 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
           break;
         }
       }
-
       if (props.onReorder) {
         props.onReorder({
           originalEvent: event,
@@ -177,15 +166,12 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     }
   };
-
   var moveDown = function moveDown(event) {
     if (props.selection) {
       var value = _toConsumableArray(props.value);
-
       for (var i = props.selection.length - 1; i >= 0; i--) {
         var selectedItem = props.selection[i];
         var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
-
         if (selectedItemIndex !== value.length - 1) {
           var movedItem = value[selectedItemIndex];
           var temp = value[selectedItemIndex + 1];
@@ -195,7 +181,6 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
           break;
         }
       }
-
       if (props.onReorder) {
         props.onReorder({
           originalEvent: event,
@@ -205,15 +190,12 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     }
   };
-
   var moveBottom = function moveBottom(event) {
     if (props.selection) {
       var value = _toConsumableArray(props.value);
-
       for (var i = props.selection.length - 1; i >= 0; i--) {
         var selectedItem = props.selection[i];
         var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
-
         if (selectedItemIndex !== value.length - 1) {
           var movedItem = value.splice(selectedItemIndex, 1)[0];
           value.push(movedItem);
@@ -221,7 +203,6 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
           break;
         }
       }
-
       if (props.onReorder) {
         props.onReorder({
           originalEvent: event,
@@ -231,7 +212,6 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     }
   };
-
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: "p-orderlist-controls"
   }, /*#__PURE__*/React__namespace.createElement(button.Button, {
@@ -267,20 +247,16 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
       return props.resetFilter();
     }
   };
-
   var isSelected = function isSelected(item) {
     return utils.ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
   };
-
   var _onDragStart = function onDragStart(event, index) {
     dragging.current = true;
     draggedItemIndex.current = index;
-
     if (props.dragdropScope) {
       event.dataTransfer.setData('text', 'orderlist');
     }
   };
-
   var _onDragOver = function onDragOver(event, index) {
     if (draggedItemIndex.current !== index && draggedItemIndex.current + 1 !== index) {
       dragOverItemIndex.current = index;
@@ -288,21 +264,16 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
       event.preventDefault();
     }
   };
-
   var onDragLeave = function onDragLeave(event) {
     dragOverItemIndex.current = null;
     utils.DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
   };
-
   var onDrop = function onDrop(event) {
     var dropIndex = draggedItemIndex.current > dragOverItemIndex.current ? dragOverItemIndex.current : dragOverItemIndex.current === 0 ? 0 : dragOverItemIndex.current - 1;
-
     var value = _toConsumableArray(props.value);
-
     utils.ObjectUtils.reorderArray(value, draggedItemIndex.current, dropIndex);
     dragOverItemIndex.current = null;
     utils.DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
-
     if (props.onChange) {
       props.onChange({
         originalEvent: event,
@@ -310,11 +281,9 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
       });
     }
   };
-
   var onDragEnd = function onDragEnd(event) {
     dragging.current = false;
   };
-
   var onListMouseMove = function onListMouseMove(event) {
     if (dragging.current) {
       var offsetY = listElementRef.current.getBoundingClientRect().top + utils.DomHandler.getWindowScrollTop();
@@ -323,14 +292,12 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
       if (bottomDiff < 25 && bottomDiff > 0) listElementRef.current.scrollTop += 15;else if (topDiff < 25 && topDiff > 0) listElementRef.current.scrollTop -= 15;
     }
   };
-
   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,
@@ -342,13 +309,11 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
       onDrop: onDrop
     });
   };
-
   var createHeader = function createHeader() {
     return props.header ? /*#__PURE__*/React__namespace.createElement("div", {
       className: "p-orderlist-header"
     }, props.header) : null;
   };
-
   var createItems = function createItems() {
     if (props.value) {
       return props.value.map(function (item, i) {
@@ -357,9 +322,12 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
           'p-highlight': isSelected(item)
         }, props.className);
         var key = JSON.stringify(item);
-
         if (props.dragdrop) {
-          var items = [createDropPoint(i, key + '_droppoint'), /*#__PURE__*/React__namespace.createElement("li", {
+          var items = [];
+          if (i === 0) {
+            items.push(createDropPoint(item, i));
+          }
+          items.push( /*#__PURE__*/React__namespace.createElement("li", {
             key: key,
             className: itemClassName,
             onClick: function onClick(e) {
@@ -384,12 +352,8 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
             },
             onDragEnd: onDragEnd,
             tabIndex: props.tabIndex
-          }, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null))];
-
-          if (i === props.value.length - 1) {
-            items.push(createDropPoint(item, i));
-          }
-
+          }, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+          items.push(createDropPoint(i, key + '_droppoint'));
           return items;
         } else {
           return /*#__PURE__*/React__namespace.createElement("li", {
@@ -416,10 +380,8 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
         }
       });
     }
-
     return null;
   };
-
   var createList = function createList() {
     var items = createItems();
     return /*#__PURE__*/React__namespace.createElement("ul", {
@@ -431,7 +393,6 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
       "aria-multiselectable": true
     }, items);
   };
-
   var createFilter = function createFilter() {
     if (props.filter) {
       var content = /*#__PURE__*/React__namespace.createElement("div", {
@@ -446,7 +407,6 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
       }), /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-orderlist-filter-icon pi pi-search"
       }));
-
       if (props.filterTemplate) {
         var defaultContentOptions = {
           className: 'p-orderlist-filter',
@@ -462,15 +422,12 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (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();
@@ -482,19 +439,16 @@ OrderListSubList.displayName = 'OrderListSubList';
 
 var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var _React$useState = React__namespace.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectionState = _React$useState2[0],
-      setSelectionState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    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];
-
+    _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);
-
   var onItemClick = function onItemClick(event) {
     var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
     var index = utils.ObjectUtils.findIndexInList(event.value, selectionState, props.dataKey);
@@ -505,11 +459,9 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }) : [event.value];else newSelection = metaKey ? [].concat(_toConsumableArray(selectionState), [event.value]) : [event.value];
     setSelectionState(newSelection);
   };
-
   var onItemKeyDown = function onItemKeyDown(event) {
     var originalEvent = event.originalEvent;
     var listItem = originalEvent.currentTarget;
-
     switch (originalEvent.which) {
       //down
       case 40:
@@ -517,26 +469,24 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         nextItem && nextItem.focus();
         originalEvent.preventDefault();
         break;
-      //up
 
+      //up
       case 38:
         var prevItem = findPrevItem(listItem);
         prevItem && prevItem.focus();
         originalEvent.preventDefault();
         break;
-      //enter
 
+      //enter
       case 13:
         onItemClick(event);
         originalEvent.preventDefault();
         break;
     }
   };
-
   var onFilter = function onFilter(event) {
     var _filterValue = event.target.value;
     setFilterValueState(_filterValue);
-
     if (props.onFilter) {
       props.onFilter({
         originalEvent: event,
@@ -544,18 +494,15 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       });
     }
   };
-
   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,
@@ -563,27 +510,22 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       });
     }
   };
-
   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;
   };
-
   var findPrevItem = function findPrevItem(item) {
     var prevItem = item.previousElementSibling;
     return prevItem ? !utils.DomHandler.hasClass(prevItem, 'p-orderlist-item') ? findPrevItem(prevItem) : prevItem : null;
   };
-
   var onReorder = function onReorder(event) {
     if (props.onChange) {
       props.onChange({
@@ -591,28 +533,22 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         value: event.value
       });
     }
-
     reorderDirection.current = event.direction;
   };
-
   var updateListScroll = function updateListScroll() {
     var list = utils.DomHandler.findSingle(elementRef.current, '.p-orderlist-list');
     var listItems = utils.DomHandler.find(list, '.p-orderlist-item.p-highlight');
-
     if (listItems && listItems.length) {
       switch (reorderDirection.current) {
         case 'up':
           utils.DomHandler.scrollInView(list, listItems[0]);
           break;
-
         case 'top':
           list.scrollTop = 0;
           break;
-
         case 'down':
           utils.DomHandler.scrollInView(list, listItems[listItems.length - 1]);
           break;
-
         case 'bottom':
           /* TODO: improve this code block */
           setTimeout(function () {
@@ -622,7 +558,6 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       }
     }
   };
-
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,

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/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?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function c(e,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)},O=function e(t){var r=t.nextElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},C=function e(t){var r=t.previousElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},D=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&&(D(),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=O(r);n&&n.focus(),t.preventDefault();break;case 38:var l=C(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;
+"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?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function c(e,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,o=[],u=!0,c=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=i.call(r)).done)&&(o.push(n.value),o.length!==t);u=!0);}catch(e){c=!0,l=e}finally{try{if(!u&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(c)throw l}}return o}}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)||f(e,t)||h()}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)}},h=function(e){13===e.which&&e.preventDefault()},y=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:h,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:h},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=[];return 0===a&&f.push(y(t,a)),f.push(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))),f.push(y(a,d+"_droppoint")),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=y(o.useState([]),2),a=i[0],c=i[1],s=y(o.useState(""),2),d=s[0],f=s[1],p=n.ObjectUtils.isNotEmpty(d),v=o.useRef(null),g=o.useRef(null),h=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)},O=function e(t){var r=t.nextElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},C=function e(t){var r=t.previousElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},D=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&&(D(),g.current=null)}));var w=n.ObjectUtils.findDiffKeys(e,I.defaultProps),x=n.classNames("p-orderlist p-component",e.className),j=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:j,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:j,selection:a,onItemClick:h,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=C(r);l&&l.focus(),t.preventDefault();break;case 13:h(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,34 +1,131 @@
+/**
+ *
+ * OrderList is used to sort a collection.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/orderlist/)
+ *
+ * @module orderlist
+ *
+ */
 import * as React from 'react';
 
-type OrderListFilterTemplateType = React.ReactNode | ((options: OrderListFilterOptions) => React.ReactNode);
-
-interface OrderListChangeParams {
+/**
+ * Custom change event.
+ * @see {@link OrderListProps.onChange}
+ * @event
+ */
+interface OrderListChangeEvent {
+    /**
+     * Browser event
+     */
     originalEvent: React.SyntheticEvent;
+    /**
+     * Reordered list
+     */
     value: any;
 }
 
+/**
+ * Custom filter options.
+ * @group Misc
+ */
 interface OrderListFilterOptions {
+    /**
+     * Browser keyboard event for the filter orderlist element.
+     */
     filter?: (event?: KeyboardEvent) => void;
+    /**
+     * Used to reset the filter.
+     */
     reset?: () => void;
 }
 
+/**
+ * Defines valid properties in OrderList component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
-    value?: any[];
-    header?: React.ReactNode;
-    listStyle?: React.CSSProperties;
-    dragdrop?: boolean;
-    dataKey?: string;
-    filter?: boolean;
-    filterBy?: string;
-    filterMatchMode?: string;
-    filterPlaceholder?: string;
-    filterLocale?: string;
-    filterTemplate?: OrderListFilterTemplateType;
-    onChange?(e: OrderListChangeParams): void;
+    /**
+     * An array of objects to reorder.
+     */
+    value?: any[] | undefined;
+    /**
+     * Text for the caption.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Inline style of the list element.
+     */
+    listStyle?: React.CSSProperties | undefined;
+    /**
+     * Whether to enable dragdrop based reordering.
+     * @defaultValue false
+     */
+    dragdrop?: boolean | undefined;
+    /**
+     * Name of the field that uniquely identifies the a record in the data.
+     */
+    dataKey?: string | undefined;
+    /**
+     * When specified, displays an input field to filter the items on keyup.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filterBy?: string | undefined;
+    /**
+     * Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
+     * @defaultValue contains
+     */
+    filterMatchMode?: string | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Custom template of filter element.
+     */
+    filterTemplate?: React.ReactNode | ((options: OrderListFilterOptions) => React.ReactNode);
+    /**
+     * Callback to invoke to when a mouse button is pressed.
+     * @param {OrderListChangeEvent} event - Browser event.
+     */
+    onChange?(event: OrderListChangeEvent): void;
+    /**
+     * The template of each item
+     * @param {*} item - Current item
+     */
     itemTemplate?(item: any): React.ReactNode;
-    children?: React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - OrderList**
+ *
+ * _OrderList is used to sort a collection._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/orderlist/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class OrderList extends React.Component<OrderListProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }