primereact 8.2.0 → 8.5.0

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};

package/orderlist/orderlist.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.orderlist = (function (exports, React, hooks, utils, button, ripple) {
+this.primereact.orderlist = (function (exports, React, hooks, api, utils, button, ripple) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -253,6 +253,14 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
     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;
@@ -310,6 +318,13 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
       }
     };
 
+    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,
@@ -411,11 +426,51 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
       }, 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';
 
@@ -425,6 +480,12 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
         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);
 
@@ -466,6 +527,47 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
       }
     };
 
+    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;
@@ -515,6 +617,14 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
       }
     };
 
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      };
+    });
     hooks.useUpdateEffect(function () {
       if (reorderDirection.current) {
         updateListScroll();
@@ -523,22 +633,28 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
     });
     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,
@@ -560,7 +676,14 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
     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;
@@ -569,4 +692,4 @@ this.primereact.orderlist = (function (exports, React, hooks, utils, button, rip
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.utils, primereact.button, primereact.ripple);
+})({}, React, primereact.hooks, primereact.api, primereact.utils, primereact.button, primereact.ripple);

package/orderlist/orderlist.min.css

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

package/orderlist/orderlist.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.orderlist=function(e,t,r,n,l,a){"use strict";function i(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=i(t);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 v(e){return s(e)||d(e)||f(e)||p()}function m(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,a=[],i=!0,o=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);i=!0);}catch(e){o=!0,l=e}finally{try{i||null==r.return||r.return()}finally{if(o)throw l}}return a}}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.")}var h=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=v(e.value),l=0;l<e.selection.length;l++){var a=n.ObjectUtils.findIndexInList(e.selection[l],r,e.dataKey);if(0===a)break;var i=r[a-1];r[a-1]=r[a],r[a]=i}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=v(e.value),l=0;l<e.selection.length;l++){var a=n.ObjectUtils.findIndexInList(e.selection[l],r,e.dataKey);if(0===a)break;var i=r.splice(a,1)[0];r.unshift(i)}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=v(e.value),l=e.selection.length-1;l>=0;l--){var a=n.ObjectUtils.findIndexInList(e.selection[l],r,e.dataKey);if(a===r.length-1)break;var i=r[a+1];r[a+1]=r[a],r[a]=i}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=v(e.value),l=e.selection.length-1;l>=0;l--){var a=n.ObjectUtils.findIndexInList(e.selection[l],r,e.dataKey);if(a===r.length-1)break;var i=r.splice(a,1)[0];r.push(i)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"bottom"})}}}))}));h.displayName="OrderListControls";var b=o.memo((function(e){var t,r=o.useRef(null),l=o.useRef(null),i=o.useRef(null),u=o.useRef(null),c=function(t){return-1!==n.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},s=function(e,t){l.current!==t&&l.current+1!==t&&(i.current=t,n.DomHandler.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},d=function(e){i.current=null,n.DomHandler.removeClass(e.target,"p-orderlist-droppoint-highlight")},f=function(t){var r=l.current>i.current?i.current:0===i.current?0:i.current-1,a=v(e.value);n.ObjectUtils.reorderArray(a,l.current,r),i.current=null,n.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),e.onChange&&e.onChange({originalEvent:t,value:a})},p=function(e){r.current=!1},m=function(e){if(r.current){var t=u.current.getBoundingClientRect().top+n.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=n.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 n=t,a=i,r.current=!0,l.current=a,void(e.dragdropScope&&n.dataTransfer.setData("text","orderlist"));var n,a},onDragEnd:p,tabIndex:e.tabIndex},u,o.createElement(a.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)}));b.displayName="OrderListSubList";var E=o.memo(o.forwardRef((function(e,t){var l,a,i=o.useState([]),c=(a=2,m(l=i)||g(l,a)||f(l,a)||y()),s=c[0],d=c[1],p=o.useRef(null),I=o.useRef(null),D=function(t){var r,l=t.originalEvent.metaKey||t.originalEvent.ctrlKey,a=n.ObjectUtils.findIndexInList(t.value,s,e.dataKey);r=-1!==a?l?s.filter((function(e,t){return t!==a})):[t.value]:l?[].concat(v(s),[t.value]):[t.value],d(r)},O=function e(t){var r=t.nextElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},w=function e(t){var r=t.previousElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},C=function(){var e=n.DomHandler.findSingle(p.current,".p-orderlist-list"),t=n.DomHandler.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(I.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)}};r.useUpdateEffect((function(){I.current&&(C(),I.current=null)}));var k=n.ObjectUtils.findDiffKeys(e,E.defaultProps),x=n.classNames("p-orderlist p-component",e.className);return o.createElement("div",u({ref:p,id:e.id,className:x,style:e.style},k),o.createElement(h,{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(b,{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}))})));return E.displayName="OrderList",E.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},e.OrderList=E,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.utils,primereact.button,primereact.ripple);
+this.primereact=this.primereact||{},this.primereact.orderlist=function(e,t,r,n,l,i,a){"use strict";function o(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 u=o(t);function c(){return c=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},c.apply(this,arguments)}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function d(e){if(Array.isArray(e))return s(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 s(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)?s(e,t):void 0}}function m(){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 v(e){return d(e)||f(e)||p(e)||m()}function g(e){if(Array.isArray(e))return e}function h(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 b(e,t){return g(e)||h(e,t)||p(e,t)||y()}var E=u.memo((function(e){return u.createElement("div",{className:"p-orderlist-controls"},u.createElement(i.Button,{type:"button",icon:"pi pi-angle-up",onClick:function(t){if(e.selection){for(var r=v(e.value),n=0;n<e.selection.length;n++){var i=l.ObjectUtils.findIndexInList(e.selection[n],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"})}}}),u.createElement(i.Button,{type:"button",icon:"pi pi-angle-double-up",onClick:function(t){if(e.selection){for(var r=v(e.value),n=0;n<e.selection.length;n++){var i=l.ObjectUtils.findIndexInList(e.selection[n],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"})}}}),u.createElement(i.Button,{type:"button",icon:"pi pi-angle-down",onClick:function(t){if(e.selection){for(var r=v(e.value),n=e.selection.length-1;n>=0;n--){var i=l.ObjectUtils.findIndexInList(e.selection[n],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"})}}}),u.createElement(i.Button,{type:"button",icon:"pi pi-angle-double-down",onClick:function(t){if(e.selection){for(var r=v(e.value),n=e.selection.length-1;n>=0;n--){var i=l.ObjectUtils.findIndexInList(e.selection[n],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"})}}}))}));E.displayName="OrderListControls";var I=u.memo((function(e){var t,r=u.useRef(null),n=u.useRef(null),i=u.useRef(null),o=u.useRef(null),c={filter:function(t){return e.onFilterInputChange(t)},reset:function(){return e.resetFilter()}},s=function(t){return-1!==l.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},d=function(e,t){n.current!==t&&n.current+1!==t&&(i.current=t,l.DomHandler.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},f=function(e){i.current=null,l.DomHandler.removeClass(e.target,"p-orderlist-droppoint-highlight")},p=function(t){var r=n.current>i.current?i.current:0===i.current?0:i.current-1,a=v(e.value);l.ObjectUtils.reorderArray(a,n.current,r),i.current=null,l.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),e.onChange&&e.onChange({originalEvent:t,value:a})},m=function(e){r.current=!1},g=function(e){if(r.current){var t=o.current.getBoundingClientRect().top+l.DomHandler.getWindowScrollTop(),n=t+o.current.clientHeight-e.pageY,i=e.pageY-t;n<25&&n>0?o.current.scrollTop+=15:i<25&&i>0&&(o.current.scrollTop-=15)}},h=function(e){13===e.which&&e.preventDefault()},y=function(e,t){return u.createElement("li",{key:t,className:"p-orderlist-droppoint",onDragOver:function(t){return d(t,e+1)},onDragLeave:f,onDrop:p})},b=e.header?u.createElement("div",{className:"p-orderlist-header"},e.header):null,E=function(){if(e.filter){var t=u.createElement("div",{className:"p-orderlist-filter"},u.createElement("input",{type:"text",value:e.filterValue,onChange:e.onFilter,onKeyDown:h,placeholder:e.placeholder,className:"p-orderlist-filter-input p-inputtext p-component"}),u.createElement("span",{className:"p-orderlist-filter-icon pi pi-search"}));if(e.filterTemplate)t=l.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 u.createElement("div",{className:"p-orderlist-filter-container"},t)}return null}(),I=(t=e.value?e.value.map((function(t,i){var o=e.itemTemplate?e.itemTemplate(t):t,c=l.classNames("p-orderlist-item",{"p-highlight":s(t)},e.className),d=JSON.stringify(t);if(e.dragdrop){var f=[y(i,d+"_droppoint"),u.createElement("li",{key:d,className:c,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":s(t),draggable:"true",onDragStart:function(t){return l=t,a=i,r.current=!0,n.current=a,void(e.dragdropScope&&l.dataTransfer.setData("text","orderlist"));var l,a},onDragEnd:m,tabIndex:e.tabIndex},o,u.createElement(a.Ripple,null))];return i===e.value.length-1&&f.push(y(t,i)),f}return u.createElement("li",{key:d,className:c,role:"option","aria-selected":s(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},o)})):null,u.createElement("ul",{ref:o,className:"p-orderlist-list",style:e.listStyle,onDragOver:g,role:"listbox","aria-multiselectable":!0},t));return u.createElement("div",{className:"p-orderlist-list-container"},b,E,I)}));I.displayName="OrderListSubList";var C=u.memo(u.forwardRef((function(e,t){var i=b(u.useState([]),2),a=i[0],o=i[1],s=b(u.useState(""),2),d=s[0],f=s[1],p=l.ObjectUtils.isNotEmpty(d),m=u.useRef(null),g=u.useRef(null),h=function(t){var r,n=t.originalEvent.metaKey||t.originalEvent.ctrlKey,i=l.ObjectUtils.findIndexInList(t.value,a,e.dataKey);r=-1!==i?n?a.filter((function(e,t){return t!==i})):[t.value]:n?[].concat(v(a),[t.value]):[t.value],o(r)},y=function e(t){var r=t.nextElementSibling;return r?l.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},D=function e(t){var r=t.previousElementSibling;return r?l.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},O=function(){var e=l.DomHandler.findSingle(m.current,".p-orderlist-list"),t=l.DomHandler.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(g.current){case"up":l.DomHandler.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":l.DomHandler.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}};u.useImperativeHandle(t,(function(){return{props:e,getElement:function(){return m.current}}})),r.useUpdateEffect((function(){g.current&&(O(),g.current=null)}));var w=l.ObjectUtils.findDiffKeys(e,C.defaultProps),N=l.classNames("p-orderlist p-component",e.className),x=function(){if(p){var t=d.trim().toLocaleLowerCase(e.filterLocale),r=e.filterBy?e.filterBy.split(","):[];return n.FilterService.filter(e.value,r,t,e.filterMatchMode,e.filterLocale)}return e.value}();return u.createElement("div",c({ref:m,id:e.id,className:N,style:e.style},w),u.createElement(E,{value:x,selection:a,onReorder:function(t){e.onChange&&e.onChange({event:t.originalEvent,value:t.value}),g.current=t.direction},dataKey:e.dataKey}),u.createElement(I,{value:x,selection:a,onItemClick:h,onItemKeyDown:function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=y(r);n&&n.focus(),t.preventDefault();break;case 38:var l=D(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}))})));return C.displayName="OrderList",C.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},e.OrderList=C,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.api,primereact.utils,primereact.button,primereact.ripple);

package/organizationchart/organizationchart.cjs.js

@@ -265,6 +265,7 @@ var OrganizationChartNode = /*#__PURE__*/React__namespace.memo(function (props)
 OrganizationChartNode.displayName = 'OrganizationChartNode';
 
 var OrganizationChart = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  var elementRef = React__namespace.useRef(null);
   var root = props.value && props.value.length ? props.value[0] : null;
 
   var onNodeClick = function onNodeClick(event, node) {
@@ -334,10 +335,19 @@ var OrganizationChart = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
     return findIndexInSelection(node) !== -1;
   };
 
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      getElement: function getElement() {
+        return elementRef.current;
+      }
+    };
+  });
   var otherProps = utils.ObjectUtils.findDiffKeys(props, OrganizationChart.defaultProps);
   var className = utils.classNames('p-organizationchart p-component', props.className);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     id: props.id,
+    ref: elementRef,
     style: props.style,
     className: className
   }, otherProps), /*#__PURE__*/React__namespace.createElement(OrganizationChartNode, {

package/organizationchart/organizationchart.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/utils");function t(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var r=t(e);function l(){return l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},l.apply(this,arguments)}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function a(e){if(Array.isArray(e))return o(e)}function i(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function c(e,n){if(e){if("string"==typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(e,n):void 0}}function s(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function d(e){if(Array.isArray(e))return e}function u(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,l,o=[],a=!0,i=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);a=!0);}catch(e){i=!0,l=e}finally{try{a||null==t.return||t.return()}finally{if(i)throw l}}return o}}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.")}var f=r.memo((function(e){var t,l,o,a,i,s,p=e.node,h=r.useState(p.expanded),g=(l=2,d(t=h)||u(t,l)||c(t,l)||m()),v=g[0],y=g[1],b=!1!==p.leaf&&!(p.children&&p.children.length),N=p.children&&p.children.length?2*p.children.length:null,E=e.isSelected(p),S=!b&&v?"inherit":"hidden",z=function(n,t){e.onNodeClick(n,t)},O=function(){if(!b){var e=n.classNames("p-node-toggler-icon",{"pi pi-chevron-down":v,"pi pi-chevron-up":!v});return r.createElement("a",{href:"#",className:"p-node-toggler",onClick:function(e){return n=e,y((function(e){return!e})),void n.preventDefault();var n}},r.createElement("i",{className:e}))}return null},C=function(){var t=e.nodeTemplate&&n.ObjectUtils.getJSXElement(e.nodeTemplate,p)||p.label;return r.createElement("div",null,t)},M=(o=n.classNames("p-organizationchart-node-content",{"p-organizationchart-selectable-node":e.selectionMode&&!1!==p.selectable,"p-highlight":E},p.className),a=C(),i=O(),r.createElement("tr",null,r.createElement("td",{colSpan:N},r.createElement("div",{className:o,onClick:function(e){return z(e,p)}},a,i)))),j=r.createElement("tr",{style:{visibility:S},className:"p-organizationchart-lines"},r.createElement("td",{colSpan:N},r.createElement("div",{className:"p-organizationchart-line-down"}))),w=(s=p.children&&p.children.length,r.createElement("tr",{style:{visibility:S},className:"p-organizationchart-lines"},p.children&&1===p.children.length&&r.createElement("td",{colSpan:N},r.createElement("div",{className:"p-organizationchart-line-down"})),p.children&&p.children.length>1&&p.children.map((function(e,t){var l=n.classNames("p-organizationchart-line-left",{"p-organizationchart-line-top":0!==t}),o=n.classNames("p-organizationchart-line-right",{"p-organizationchart-line-top":t!==s-1});return[r.createElement("td",{key:t+"_lineleft",className:l}," "),r.createElement("td",{key:t+"_lineright",className:o}," ")]})))),k=r.createElement("tr",{style:{visibility:S},className:"p-organizationchart-nodes"},p.children&&p.children.map((function(n,t){return r.createElement("td",{key:t,colSpan:"2"},r.createElement(f,{node:n,nodeTemplate:e.nodeTemplate,selectionMode:e.selectionMode,onNodeClick:e.onNodeClick,isSelected:e.isSelected}))})));return r.createElement("table",{className:"p-organizationchart-table"},r.createElement("tbody",null,M,j,w,k))}));f.displayName="OrganizationChartNode";var p=r.memo(r.forwardRef((function(e,t){var o=e.value&&e.value.length?e.value[0]:null,d=function(n){if(e.selectionMode&&e.selection){if("single"===e.selectionMode)return e.selection===n?0:-1;if("multiple"===e.selectionMode)return e.selection.findIndex((function(e){return e===n}))}return-1},u=n.ObjectUtils.findDiffKeys(e,p.defaultProps),m=n.classNames("p-organizationchart p-component",e.className);return r.createElement("div",l({id:e.id,style:e.style,className:m},u),r.createElement(f,{node:o,nodeTemplate:e.nodeTemplate,selectionMode:e.selectionMode,onNodeClick:function(t,r){if(e.selectionMode){var l=t.target;if(!1===r.selectable||!n.DomHandler.hasClass(l,"p-node-toggler")||!n.DomHandler.hasClass(l,"p-node-toggler-icon"))return;var o,u=d(r),m=u>=0;"single"===e.selectionMode?m?(o=null,e.onNodeUnselect&&e.onNodeUnselect({originalEvent:t,node:r})):(o=r,e.onNodeSelect&&e.onNodeSelect({originalEvent:t,node:r})):"multiple"===e.selectionMode&&(m?(o=e.selection.filter((function(e,n){return n!==u})),e.onNodeUnselect&&e.onNodeUnselect({originalEvent:t,node:r})):(o=[].concat(a(f=e.selection||[])||i(f)||c(f)||s(),[r]),e.onNodeSelect&&e.onNodeSelect({originalEvent:t,node:r}))),e.onSelectionChange&&e.onSelectionChange({originalEvent:t,data:o})}var f},isSelected:function(e){return-1!==d(e)}}))})));p.displayName="OrganizationChart",p.defaultProps={__TYPE:"OrganizationChart",id:null,value:null,style:null,className:null,selectionMode:null,selection:null,nodeTemplate:null,onSelectionChange:null,onNodeSelect:null,onNodeUnselect:null},exports.OrganizationChart=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/utils");function t(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var r=t(e);function l(){return l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},l.apply(this,arguments)}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function a(e){if(Array.isArray(e))return o(e)}function i(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function c(e,n){if(e){if("string"==typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(e,n):void 0}}function s(){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 u(e){if(Array.isArray(e))return e}function d(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,l,o=[],a=!0,i=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);a=!0);}catch(e){i=!0,l=e}finally{try{a||null==t.return||t.return()}finally{if(i)throw l}}return o}}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.")}var f=r.memo((function(e){var t,l,o,a,i,s,p=e.node,h=r.useState(p.expanded),g=(l=2,u(t=h)||d(t,l)||c(t,l)||m()),v=g[0],y=g[1],b=!1!==p.leaf&&!(p.children&&p.children.length),N=p.children&&p.children.length?2*p.children.length:null,E=e.isSelected(p),S=!b&&v?"inherit":"hidden",z=function(n,t){e.onNodeClick(n,t)},O=function(){if(!b){var e=n.classNames("p-node-toggler-icon",{"pi pi-chevron-down":v,"pi pi-chevron-up":!v});return r.createElement("a",{href:"#",className:"p-node-toggler",onClick:function(e){return n=e,y((function(e){return!e})),void n.preventDefault();var n}},r.createElement("i",{className:e}))}return null},C=function(){var t=e.nodeTemplate&&n.ObjectUtils.getJSXElement(e.nodeTemplate,p)||p.label;return r.createElement("div",null,t)},M=(o=n.classNames("p-organizationchart-node-content",{"p-organizationchart-selectable-node":e.selectionMode&&!1!==p.selectable,"p-highlight":E},p.className),a=C(),i=O(),r.createElement("tr",null,r.createElement("td",{colSpan:N},r.createElement("div",{className:o,onClick:function(e){return z(e,p)}},a,i)))),j=r.createElement("tr",{style:{visibility:S},className:"p-organizationchart-lines"},r.createElement("td",{colSpan:N},r.createElement("div",{className:"p-organizationchart-line-down"}))),w=(s=p.children&&p.children.length,r.createElement("tr",{style:{visibility:S},className:"p-organizationchart-lines"},p.children&&1===p.children.length&&r.createElement("td",{colSpan:N},r.createElement("div",{className:"p-organizationchart-line-down"})),p.children&&p.children.length>1&&p.children.map((function(e,t){var l=n.classNames("p-organizationchart-line-left",{"p-organizationchart-line-top":0!==t}),o=n.classNames("p-organizationchart-line-right",{"p-organizationchart-line-top":t!==s-1});return[r.createElement("td",{key:t+"_lineleft",className:l}," "),r.createElement("td",{key:t+"_lineright",className:o}," ")]})))),k=r.createElement("tr",{style:{visibility:S},className:"p-organizationchart-nodes"},p.children&&p.children.map((function(n,t){return r.createElement("td",{key:t,colSpan:"2"},r.createElement(f,{node:n,nodeTemplate:e.nodeTemplate,selectionMode:e.selectionMode,onNodeClick:e.onNodeClick,isSelected:e.isSelected}))})));return r.createElement("table",{className:"p-organizationchart-table"},r.createElement("tbody",null,M,j,w,k))}));f.displayName="OrganizationChartNode";var p=r.memo(r.forwardRef((function(e,t){var o=r.useRef(null),u=e.value&&e.value.length?e.value[0]:null,d=function(n){if(e.selectionMode&&e.selection){if("single"===e.selectionMode)return e.selection===n?0:-1;if("multiple"===e.selectionMode)return e.selection.findIndex((function(e){return e===n}))}return-1};r.useImperativeHandle(t,(function(){return{props:e,getElement:function(){return o.current}}}));var m=n.ObjectUtils.findDiffKeys(e,p.defaultProps),h=n.classNames("p-organizationchart p-component",e.className);return r.createElement("div",l({id:e.id,ref:o,style:e.style,className:h},m),r.createElement(f,{node:u,nodeTemplate:e.nodeTemplate,selectionMode:e.selectionMode,onNodeClick:function(t,r){if(e.selectionMode){var l=t.target;if(!1===r.selectable||!n.DomHandler.hasClass(l,"p-node-toggler")||!n.DomHandler.hasClass(l,"p-node-toggler-icon"))return;var o,u=d(r),m=u>=0;"single"===e.selectionMode?m?(o=null,e.onNodeUnselect&&e.onNodeUnselect({originalEvent:t,node:r})):(o=r,e.onNodeSelect&&e.onNodeSelect({originalEvent:t,node:r})):"multiple"===e.selectionMode&&(m?(o=e.selection.filter((function(e,n){return n!==u})),e.onNodeUnselect&&e.onNodeUnselect({originalEvent:t,node:r})):(o=[].concat(a(f=e.selection||[])||i(f)||c(f)||s(),[r]),e.onNodeSelect&&e.onNodeSelect({originalEvent:t,node:r}))),e.onSelectionChange&&e.onSelectionChange({originalEvent:t,data:o})}var f},isSelected:function(e){return-1!==d(e)}}))})));p.displayName="OrganizationChart",p.defaultProps={__TYPE:"OrganizationChart",id:null,value:null,style:null,className:null,selectionMode:null,selection:null,nodeTemplate:null,onSelectionChange:null,onNodeSelect:null,onNodeUnselect:null},exports.OrganizationChart=p;

package/organizationchart/organizationchart.d.ts

@@ -11,7 +11,7 @@ interface OrganizationChartNodeSelectParams {
     node: OrganizationChartNodeDataType;
 }
 
-interface OrganizationChartNodeUnselectParams extends OrganizationChartNodeSelectParams { }
+interface OrganizationChartNodeUnselectParams extends OrganizationChartNodeSelectParams {}
 
 interface OrganizationChartNodeData {
     className?: string;
@@ -21,11 +21,8 @@ interface OrganizationChartNodeData {
     label?: string;
 }
 
-export interface OrganizationChartProps {
-    id?: string;
+export interface OrganizationChartProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
     value?: OrganizationChartNodeData[];
-    style?: object;
-    className?: string;
     selectionMode?: OrganizationChartSelectionModeType;
     selection?: OrganizationChartSelectionNodeDataType;
     nodeTemplate?(node: OrganizationChartNodeData): React.ReactNode;
@@ -35,4 +32,6 @@ export interface OrganizationChartProps {
     children?: React.ReactNode;
 }
 
-export declare class OrganizationChart extends React.Component<OrganizationChartProps, any> { }
+export declare class OrganizationChart extends React.Component<OrganizationChartProps, any> {
+    public getElement(): HTMLDivElement;
+}

package/organizationchart/organizationchart.esm.js

@@ -241,6 +241,7 @@ var OrganizationChartNode = /*#__PURE__*/React.memo(function (props) {
 OrganizationChartNode.displayName = 'OrganizationChartNode';
 
 var OrganizationChart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var elementRef = React.useRef(null);
   var root = props.value && props.value.length ? props.value[0] : null;
 
   var onNodeClick = function onNodeClick(event, node) {
@@ -310,10 +311,19 @@ var OrganizationChart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
     return findIndexInSelection(node) !== -1;
   };
 
+  React.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      getElement: function getElement() {
+        return elementRef.current;
+      }
+    };
+  });
   var otherProps = ObjectUtils.findDiffKeys(props, OrganizationChart.defaultProps);
   var className = classNames('p-organizationchart p-component', props.className);
   return /*#__PURE__*/React.createElement("div", _extends({
     id: props.id,
+    ref: elementRef,
     style: props.style,
     className: className
   }, otherProps), /*#__PURE__*/React.createElement(OrganizationChartNode, {