primereact 9.0.0 → 9.1.0

package/picklist/picklist.cjs.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var api = require('primereact/api');
+var PrimeReact = require('primereact/api');
 var hooks = require('primereact/hooks');
 var utils = require('primereact/utils');
 var button = require('primereact/button');
 var ripple = require('primereact/ripple');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -28,6 +30,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -116,6 +119,7 @@ var PickListBase = {
     showSourceControls: true,
     showTargetControls: true,
     metaKeySelection: true,
+    filter: false,
     filterBy: null,
     filterMatchMode: 'contains',
     filterLocale: undefined,
@@ -129,6 +133,7 @@ var PickListBase = {
     targetFilterTemplate: null,
     tabIndex: 0,
     dataKey: null,
+    breakpoint: '960px',
     itemTemplate: null,
     sourceItemTemplate: null,
     targetItemTemplate: null,
@@ -618,11 +623,16 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     targetFilterValueState = _React$useState8[0],
     setTargetFilterValueState = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    attributeSelectorState = _React$useState10[0],
+    setAttributeSelectorState = _React$useState10[1];
   var elementRef = React__namespace.useRef(null);
   var sourceListElementRef = React__namespace.useRef(null);
   var targetListElementRef = React__namespace.useRef(null);
   var reorderedListElementRef = React__namespace.useRef(null);
   var reorderDirection = React__namespace.useRef(null);
+  var styleElementRef = React__namespace.useRef(null);
   var sourceSelection = props.sourceSelection ? props.sourceSelection : sourceSelectionState;
   var targetSelection = props.targetSelection ? props.targetSelection : targetSelectionState;
   var sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
@@ -779,7 +789,17 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var filter = function filter(list, filterValue) {
     var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
-    return api.FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+    return PrimeReact.FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+  };
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-picklist[").concat(attributeSelectorState, "] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-right:before {\n        content: \"\\e930\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-right:before {\n        content: \"\\e92c\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-left:before {\n        content: \"\\e933\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-left:before {\n        content: \"\\e92f\"\n    }\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = utils.DomHandler.removeInlineStyle(styleElementRef.current);
   };
   React__namespace.useImperativeHandle(ref, function () {
     return {
@@ -789,6 +809,18 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }
     };
   });
+  hooks.useMountEffect(function () {
+    !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
+  });
+  hooks.useUpdateEffect(function () {
+    if (attributeSelectorState) {
+      elementRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   hooks.useUpdateEffect(function () {
     if (reorderedListElementRef.current) {
       handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);

package/picklist/picklist.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/hooks"),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 c(){return c=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},c.apply(this,arguments)}function s(e){if(Array.isArray(e))return e}function u(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,i,a,o=[],c=!0,s=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(o.push(n.value),o.length!==t);c=!0);}catch(e){s=!0,l=e}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(s)throw l}}return o}}function p(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 f(e,t){if(e){if("string"==typeof e)return p(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)?p(e,t):void 0}}function m(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){return s(e)||u(e,t)||f(e,t)||m()}var d={defaultProps:{__TYPE:"PickList",id:null,source:null,target:null,sourceHeader:null,targetHeader:null,style:null,className:null,sourceStyle:null,targetStyle:null,sourceSelection:null,targetSelection:null,showSourceControls:!0,showTargetControls:!0,metaKeySelection:!0,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,sourceFilterValue:null,targetFilterValue:null,showSourceFilter:!0,showTargetFilter:!0,sourceFilterPlaceholder:null,targetFilterPlaceholder:null,sourceFilterTemplate:null,targetFilterTemplate:null,tabIndex:0,dataKey:null,itemTemplate:null,sourceItemTemplate:null,targetItemTemplate:null,onChange:null,onMoveToSource:null,onMoveAllToSource:null,onMoveToTarget:null,onMoveAllToTarget:null,onSourceSelectionChange:null,onTargetSelectionChange:null,onSourceFilterChange:null,onTargetFilterChange:null,children:void 0},getProps:function(e){return n.ObjectUtils.getMergedProps(e,d.defaultProps)},getOtherProps:function(e){return n.ObjectUtils.getDiffProps(e,d.defaultProps)}};function v(e){if(Array.isArray(e))return p(e)}function b(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function y(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e){return v(e)||b(e)||f(e)||y()}var S=o.memo((function(e){var t=!e.selection||!e.selection.length,r=n.classNames("p-picklist-buttons",e.className);return o.createElement("div",{className:r},o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-up",onClick:function(t){var r=e.selection;if(r&&r.length){for(var l=h(e.list),i=0;i<r.length;i++){var a=n.ObjectUtils.findIndexInList(r[i],l,e.dataKey);if(0===a)break;var o=l[a-1];l[a-1]=l[a],l[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"up"})}}}),o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-up",onClick:function(t){var r=e.selection;if(r&&r.length){for(var l=h(e.list),i=0;i<r.length;i++){var a=n.ObjectUtils.findIndexInList(r[i],l,e.dataKey);if(0===a)break;var o=l.splice(a,1)[0];l.unshift(o)}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"top"})}}}),o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-down",onClick:function(t){var r=e.selection;if(r&&r.length){for(var l=h(e.list),i=r.length-1;i>=0;i--){var a=n.ObjectUtils.findIndexInList(r[i],l,e.dataKey);if(a===l.length-1)break;var o=l[a+1];l[a+1]=l[a],l[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"down"})}}}),o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-down",onClick:function(t){var r=e.selection;if(r&&r.length){for(var l=h(e.list),i=r.length-1;i>=0;i--){var a=n.ObjectUtils.findIndexInList(r[i],l,e.dataKey);if(a===l.length-1)break;var o=l.splice(a,1)[0];l.push(o)}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"bottom"})}}}))}));S.displayName="PickListControls";var E=o.memo((function(e){var t=e.template?e.template(e.value):e.value,r=n.classNames("p-picklist-item",{"p-highlight":e.selected},e.className);return o.createElement("li",{className:r,onClick:function(t){e.onClick&&e.onClick({originalEvent:t,value:e.value})},onKeyDown:function(t){e.onKeyDown&&e.onKeyDown({originalEvent:t,value:e.value})},tabIndex:e.tabIndex,role:"option","aria-selected":e.selected},t,o.createElement(i.Ripple,null))}));E.displayName="PickListItem";var T=o.memo(o.forwardRef((function(e,t){var r=o.useRef(null),l=function(t){var r=t.originalEvent,l=t.value,i=h(e.selection),a=n.ObjectUtils.findIndexInList(l,i,e.dataKey),o=-1!==a;if(e.metaKeySelection){var c=r.metaKey||r.ctrlKey;o&&c?i.splice(a,1):(c||(i.length=0),i.push(l))}else o?i.splice(a,1):i.push(l);e.onSelectionChange&&e.onSelectionChange({event:r,value:i})},i=function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=a(r);n&&n.focus(),t.preventDefault();break;case 38:var i=c(r);i&&i.focus(),t.preventDefault();break;case 13:l(e),t.preventDefault()}},a=function e(t){var r=t.nextElementSibling;return r?n.DomHandler.hasClass(r,"p-picklist-item")?r:e(r):null},c=function e(t){var r=t.previousElementSibling;return r?n.DomHandler.hasClass(r,"p-picklist-item")?r:e(r):null},s=function(t){return-1!==n.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},u=function(t){e.onFilter&&e.onFilter({originalEvent:t,value:t.target.value,type:e.type})},p=function(e){13===e.which&&e.preventDefault()};o.useImperativeHandle(t,(function(){return{listElementRef:r}}));var f=n.classNames("p-picklist-list-wrapper",e.className),m=e.header?o.createElement("div",{className:"p-picklist-header"},n.ObjectUtils.getJSXElement(e.header,e)):null,g=function(){if(e.showFilter){var t=o.createElement("div",{className:"p-picklist-filter"},o.createElement("input",{type:"text",value:e.filterValue,onChange:u,onKeyDown:p,placeholder:e.placeholder,className:"p-picklist-filter-input p-inputtext p-component"}),o.createElement("span",{className:"p-picklist-filter-icon pi pi-search"}));if(e.filterTemplate)t=n.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-picklist-filter",inputProps:{className:"p-picklist-filter-input p-inputtext p-component",onChange:u,onKeyDown:p},iconClassName:"p-picklist-filter-icon pi pi-search",element:t,props:e});return o.createElement("div",{className:"p-picklist-filter-container"},t)}return null}(),d=function(){var t=e.list?e.list.map((function(t){var r=JSON.stringify(t),n=s(t);return o.createElement(E,{key:r,value:t,template:e.itemTemplate,selected:n,onClick:l,onKeyDown:i,tabIndex:e.tabIndex})})):null,r=n.classNames("p-picklist-list",e.listClassName);return o.createElement("ul",{className:r,style:e.style,role:"listbox","aria-multiselectable":!0},t)}();return o.createElement("div",{ref:r,className:f},m,g,d)})));T.displayName="PickListSubList";var k=o.memo((function(e){var t=n.ObjectUtils.isEmpty(e.sourceSelection)||n.ObjectUtils.isEmpty(e.visibleSourceList),r=n.ObjectUtils.isEmpty(e.targetSelection)||n.ObjectUtils.isEmpty(e.visibleTargetList),i=n.ObjectUtils.isEmpty(e.visibleSourceList),a=n.ObjectUtils.isEmpty(e.visibleTargetList),c=n.classNames("p-picklist-buttons p-picklist-transfer-buttons",e.className);return o.createElement("div",{className:c},o.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-right",onClick:function(t){var r=e.sourceSelection;if(n.ObjectUtils.isNotEmpty(r)){for(var l=h(e.target),i=h(e.source),a=0;a<r.length;a++){var o=r[a];-1===n.ObjectUtils.findIndexInList(o,l,e.dataKey)&&l.push(i.splice(n.ObjectUtils.findIndexInList(o,i,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:l,direction:"toTarget"})}}}),o.createElement(l.Button,{disabled:i,type:"button",icon:"pi pi-angle-double-right",onClick:function(t){if(e.source){var r=[].concat(h(e.target),h(e.visibleSourceList)),n=e.source.filter((function(t){return!e.visibleSourceList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:n,target:r,direction:"allToTarget"})}}}),o.createElement(l.Button,{disabled:r,type:"button",icon:"pi pi-angle-left",onClick:function(t){var r=e.targetSelection;if(n.ObjectUtils.isNotEmpty(r)){for(var l=h(e.target),i=h(e.source),a=0;a<r.length;a++){var o=r[a];-1===n.ObjectUtils.findIndexInList(o,i,e.dataKey)&&i.push(l.splice(n.ObjectUtils.findIndexInList(o,l,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:l,direction:"toSource"})}}}),o.createElement(l.Button,{disabled:a,type:"button",icon:"pi pi-angle-double-left",onClick:function(t){if(e.source){var r=[].concat(h(e.source),h(e.visibleTargetList)),n=e.target.filter((function(t){return!e.visibleTargetList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:r,target:n,direction:"allToSource"})}}}))}));k.displayName="PickListTransferControls";var C=o.memo(o.forwardRef((function(e,l){var i=d.getProps(e),a=g(o.useState([]),2),s=a[0],u=a[1],p=g(o.useState([]),2),f=p[0],m=p[1],v=g(o.useState(""),2),b=v[0],y=v[1],h=g(o.useState(""),2),E=h[0],C=h[1],N=o.useRef(null),O=o.useRef(null),I=o.useRef(null),j=o.useRef(null),w=o.useRef(null),L=i.sourceSelection?i.sourceSelection:s,K=i.targetSelection?i.targetSelection:f,F=i.onSourceFilterChange?i.sourceFilterValue:b,U=i.onTargetFilterChange?i.targetFilterValue:E,x=n.ObjectUtils.isNotEmpty(i.filterBy),P=x&&i.showSourceFilter,R=x&&i.showTargetFilter,M=function(e,t){if(e){var r=n.DomHandler.findSingle(e,".p-picklist-list");switch(t){case"up":A(r,-1);break;case"top":r.scrollTop=0;break;case"down":A(r,1);break;case"bottom":setTimeout((function(){return r.scrollTop=r.scrollHeight}),100)}}},D=function(e,t,r){i.onChange&&i.onChange({originalEvent:e.originalEvent,source:t,target:r})},A=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=e.getElementsByClassName("p-highlight");n.ObjectUtils.isNotEmpty(r)&&n.DomHandler.scrollInView(e,-1===t?r[0]:r[r.length-1])},B=function(e,t,r){"sourceSelection"===t?u(e.value):m(e.value),r&&r(e),n.ObjectUtils.isNotEmpty(L)&&"targetSelection"===t?u([]):n.ObjectUtils.isNotEmpty(K)&&"sourceSelection"===t&&m([])},H=function(e){var t=e.originalEvent,r=e.value,n=g("source"===e.type?[y,i.onSourceFilterChange]:[C,i.onTargetFilterChange],2),l=n[0],a=n[1];a?a({originalEvent:t,value:r}):l(r)},V=function(e,t){var r=g("source"===t?[F,q]:[U,_],2),l=r[0],i=r[1];return x&&n.ObjectUtils.isNotEmpty(l)?i(l):e},q=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(i.filterLocale);return J(i.source,t)},_=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(i.filterLocale);return J(i.target,t)},J=function(e,r){var n=x?i.filterBy.split(","):[];return t.FilterService.filter(e,n,r,i.filterMatchMode,i.filterLocale)};o.useImperativeHandle(l,(function(){return{props:i,getElement:function(){return N.current}}})),r.useUpdateEffect((function(){j.current&&(M(j.current,w.current),j.current=null,w.current=null)}));var X=d.getOtherProps(i),z=n.classNames("p-picklist p-component",i.className),Y=i.sourceItemTemplate?i.sourceItemTemplate:i.itemTemplate,$=i.targetItemTemplate?i.targetItemTemplate:i.itemTemplate,G=V(i.source,"source"),Q=V(i.target,"target");return o.createElement("div",c({id:i.id,ref:N,className:z,style:i.style},X),i.showSourceControls&&o.createElement(S,{list:i.source,selection:L,onReorder:function(e){D(e,e.value,i.target),j.current=O.current.listElementRef.current,w.current=e.direction},className:"p-picklist-source-controls",dataKey:i.dataKey}),o.createElement(T,{ref:O,type:"source",list:G,selection:L,onSelectionChange:function(e){return B(e,"sourceSelection",i.onSourceSelectionChange)},itemTemplate:Y,header:i.sourceHeader,style:i.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:i.metaKeySelection,tabIndex:i.tabIndex,dataKey:i.dataKey,filterValue:F,onFilter:H,showFilter:P,placeholder:i.sourceFilterPlaceholder,template:i.sourceFilterTemplate}),o.createElement(k,{onTransfer:function(e){var t=e.originalEvent,r=e.source,n=e.target,l=[];switch(e.direction){case"toTarget":l=L,i.onMoveToTarget&&i.onMoveToTarget({originalEvent:t,value:l});break;case"allToTarget":l=i.source,i.onMoveAllToTarget&&i.onMoveAllToTarget({originalEvent:t,value:l});break;case"toSource":l=K,i.onMoveToSource&&i.onMoveToSource({originalEvent:t,value:l});break;case"allToSource":l=i.target,i.onMoveAllToSource&&i.onMoveAllToSource({originalEvent:t,value:l})}B({originalEvent:t,value:l},"sourceSelection",i.onSourceSelectionChange),B({originalEvent:t,value:l},"targetSelection",i.onTargetSelectionChange),D(e,r,n)},source:i.source,visibleSourceList:G,target:i.target,visibleTargetList:Q,sourceSelection:L,targetSelection:K,dataKey:i.dataKey}),o.createElement(T,{ref:I,type:"target",list:Q,selection:K,onSelectionChange:function(e){return B(e,"targetSelection",i.onTargetSelectionChange)},itemTemplate:$,header:i.targetHeader,style:i.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:i.metaKeySelection,tabIndex:i.tabIndex,dataKey:i.dataKey,filterValue:U,onFilter:H,showFilter:R,placeholder:i.targetFilterPlaceholder,template:i.targetFilterTemplate}),i.showTargetControls&&o.createElement(S,{list:i.target,selection:K,onReorder:function(e){D(e,i.source,e.value),j.current=I.current.listElementRef.current,w.current=e.direction},className:"p-picklist-target-controls",dataKey:i.dataKey}))})));C.displayName="PickList",exports.PickList=C;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/hooks"),r=require("primereact/utils"),l=require("primereact/button"),i=require("primereact/ripple");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=o(e),s=a(t);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}function p(e){if(Array.isArray(e))return e}function f(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,i,a,o=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);c=!0);}catch(e){s=!0,l=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw l}}return o}}function m(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(e,t){if(e){if("string"==typeof e)return m(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?m(e,t):void 0}}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.")}function v(e,t){return p(e)||f(e,t)||d(e,t)||g()}var b={defaultProps:{__TYPE:"PickList",id:null,source:null,target:null,sourceHeader:null,targetHeader:null,style:null,className:null,sourceStyle:null,targetStyle:null,sourceSelection:null,targetSelection:null,showSourceControls:!0,showTargetControls:!0,metaKeySelection:!0,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,sourceFilterValue:null,targetFilterValue:null,showSourceFilter:!0,showTargetFilter:!0,sourceFilterPlaceholder:null,targetFilterPlaceholder:null,sourceFilterTemplate:null,targetFilterTemplate:null,tabIndex:0,dataKey:null,breakpoint:"960px",itemTemplate:null,sourceItemTemplate:null,targetItemTemplate:null,onChange:null,onMoveToSource:null,onMoveAllToSource:null,onMoveToTarget:null,onMoveAllToTarget:null,onSourceSelectionChange:null,onTargetSelectionChange:null,onSourceFilterChange:null,onTargetFilterChange:null,children:void 0},getProps:function(e){return r.ObjectUtils.getMergedProps(e,b.defaultProps)},getOtherProps:function(e){return r.ObjectUtils.getDiffProps(e,b.defaultProps)}};function y(e){if(Array.isArray(e))return m(e)}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}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 E(e){return y(e)||h(e)||d(e)||S()}var T=c.memo((function(e){var t=!e.selection||!e.selection.length,n=r.classNames("p-picklist-buttons",e.className);return c.createElement("div",{className:n},c.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-up",onClick:function(t){var n=e.selection;if(n&&n.length){for(var l=E(e.list),i=0;i<n.length;i++){var a=r.ObjectUtils.findIndexInList(n[i],l,e.dataKey);if(0===a)break;var o=l[a-1];l[a-1]=l[a],l[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"up"})}}}),c.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-up",onClick:function(t){var n=e.selection;if(n&&n.length){for(var l=E(e.list),i=0;i<n.length;i++){var a=r.ObjectUtils.findIndexInList(n[i],l,e.dataKey);if(0===a)break;var o=l.splice(a,1)[0];l.unshift(o)}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"top"})}}}),c.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-down",onClick:function(t){var n=e.selection;if(n&&n.length){for(var l=E(e.list),i=n.length-1;i>=0;i--){var a=r.ObjectUtils.findIndexInList(n[i],l,e.dataKey);if(a===l.length-1)break;var o=l[a+1];l[a+1]=l[a],l[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"down"})}}}),c.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-down",onClick:function(t){var n=e.selection;if(n&&n.length){for(var l=E(e.list),i=n.length-1;i>=0;i--){var a=r.ObjectUtils.findIndexInList(n[i],l,e.dataKey);if(a===l.length-1)break;var o=l.splice(a,1)[0];l.push(o)}e.onReorder&&e.onReorder({originalEvent:t,value:l,direction:"bottom"})}}}))}));T.displayName="PickListControls";var k=c.memo((function(e){var t=e.template?e.template(e.value):e.value,n=r.classNames("p-picklist-item",{"p-highlight":e.selected},e.className);return c.createElement("li",{className:n,onClick:function(t){e.onClick&&e.onClick({originalEvent:t,value:e.value})},onKeyDown:function(t){e.onKeyDown&&e.onKeyDown({originalEvent:t,value:e.value})},tabIndex:e.tabIndex,role:"option","aria-selected":e.selected},t,c.createElement(i.Ripple,null))}));k.displayName="PickListItem";var C=c.memo(c.forwardRef((function(e,t){var n=c.useRef(null),l=function(t){var n=t.originalEvent,l=t.value,i=E(e.selection),a=r.ObjectUtils.findIndexInList(l,i,e.dataKey),o=-1!==a;if(e.metaKeySelection){var c=n.metaKey||n.ctrlKey;o&&c?i.splice(a,1):(c||(i.length=0),i.push(l))}else o?i.splice(a,1):i.push(l);e.onSelectionChange&&e.onSelectionChange({event:n,value:i})},i=function(e){var t=e.originalEvent,n=t.currentTarget;switch(t.which){case 40:var r=a(n);r&&r.focus(),t.preventDefault();break;case 38:var i=o(n);i&&i.focus(),t.preventDefault();break;case 13:l(e),t.preventDefault()}},a=function e(t){var n=t.nextElementSibling;return n?r.DomHandler.hasClass(n,"p-picklist-item")?n:e(n):null},o=function e(t){var n=t.previousElementSibling;return n?r.DomHandler.hasClass(n,"p-picklist-item")?n:e(n):null},s=function(t){return-1!==r.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},u=function(t){e.onFilter&&e.onFilter({originalEvent:t,value:t.target.value,type:e.type})},p=function(e){13===e.which&&e.preventDefault()};c.useImperativeHandle(t,(function(){return{listElementRef:n}}));var f=r.classNames("p-picklist-list-wrapper",e.className),m=e.header?c.createElement("div",{className:"p-picklist-header"},r.ObjectUtils.getJSXElement(e.header,e)):null,d=function(){if(e.showFilter){var t=c.createElement("div",{className:"p-picklist-filter"},c.createElement("input",{type:"text",value:e.filterValue,onChange:u,onKeyDown:p,placeholder:e.placeholder,className:"p-picklist-filter-input p-inputtext p-component"}),c.createElement("span",{className:"p-picklist-filter-icon pi pi-search"}));if(e.filterTemplate)t=r.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-picklist-filter",inputProps:{className:"p-picklist-filter-input p-inputtext p-component",onChange:u,onKeyDown:p},iconClassName:"p-picklist-filter-icon pi pi-search",element:t,props:e});return c.createElement("div",{className:"p-picklist-filter-container"},t)}return null}(),g=function(){var t=e.list?e.list.map((function(t){var n=JSON.stringify(t),r=s(t);return c.createElement(k,{key:n,value:t,template:e.itemTemplate,selected:r,onClick:l,onKeyDown:i,tabIndex:e.tabIndex})})):null,n=r.classNames("p-picklist-list",e.listClassName);return c.createElement("ul",{className:n,style:e.style,role:"listbox","aria-multiselectable":!0},t)}();return c.createElement("div",{ref:n,className:f},m,d,g)})));C.displayName="PickListSubList";var I=c.memo((function(e){var t=r.ObjectUtils.isEmpty(e.sourceSelection)||r.ObjectUtils.isEmpty(e.visibleSourceList),n=r.ObjectUtils.isEmpty(e.targetSelection)||r.ObjectUtils.isEmpty(e.visibleTargetList),i=r.ObjectUtils.isEmpty(e.visibleSourceList),a=r.ObjectUtils.isEmpty(e.visibleTargetList),o=r.classNames("p-picklist-buttons p-picklist-transfer-buttons",e.className);return c.createElement("div",{className:o},c.createElement(l.Button,{disabled:t,type:"button",icon:"pi pi-angle-right",onClick:function(t){var n=e.sourceSelection;if(r.ObjectUtils.isNotEmpty(n)){for(var l=E(e.target),i=E(e.source),a=0;a<n.length;a++){var o=n[a];-1===r.ObjectUtils.findIndexInList(o,l,e.dataKey)&&l.push(i.splice(r.ObjectUtils.findIndexInList(o,i,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:l,direction:"toTarget"})}}}),c.createElement(l.Button,{disabled:i,type:"button",icon:"pi pi-angle-double-right",onClick:function(t){if(e.source){var n=[].concat(E(e.target),E(e.visibleSourceList)),r=e.source.filter((function(t){return!e.visibleSourceList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:r,target:n,direction:"allToTarget"})}}}),c.createElement(l.Button,{disabled:n,type:"button",icon:"pi pi-angle-left",onClick:function(t){var n=e.targetSelection;if(r.ObjectUtils.isNotEmpty(n)){for(var l=E(e.target),i=E(e.source),a=0;a<n.length;a++){var o=n[a];-1===r.ObjectUtils.findIndexInList(o,i,e.dataKey)&&i.push(l.splice(r.ObjectUtils.findIndexInList(o,l,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:l,direction:"toSource"})}}}),c.createElement(l.Button,{disabled:a,type:"button",icon:"pi pi-angle-double-left",onClick:function(t){if(e.source){var n=[].concat(E(e.source),E(e.visibleTargetList)),r=e.target.filter((function(t){return!e.visibleTargetList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:n,target:r,direction:"allToSource"})}}}))}));I.displayName="PickListTransferControls";var N=c.memo(c.forwardRef((function(e,l){var i=b.getProps(e),a=v(c.useState([]),2),o=a[0],p=a[1],f=v(c.useState([]),2),m=f[0],d=f[1],g=v(c.useState(""),2),y=g[0],h=g[1],S=v(c.useState(""),2),E=S[0],k=S[1],N=v(c.useState(null),2),O=N[0],w=N[1],j=c.useRef(null),L=c.useRef(null),K=c.useRef(null),x=c.useRef(null),U=c.useRef(null),F=c.useRef(null),P=i.sourceSelection?i.sourceSelection:o,R=i.targetSelection?i.targetSelection:m,M=i.onSourceFilterChange?i.sourceFilterValue:y,D=i.onTargetFilterChange?i.targetFilterValue:E,A=r.ObjectUtils.isNotEmpty(i.filterBy),H=A&&i.showSourceFilter,B=A&&i.showTargetFilter,V=function(e,t){if(e){var n=r.DomHandler.findSingle(e,".p-picklist-list");switch(t){case"up":_(n,-1);break;case"top":n.scrollTop=0;break;case"down":_(n,1);break;case"bottom":setTimeout((function(){return n.scrollTop=n.scrollHeight}),100)}}},q=function(e,t,n){i.onChange&&i.onChange({originalEvent:e.originalEvent,source:t,target:n})},_=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=e.getElementsByClassName("p-highlight");r.ObjectUtils.isNotEmpty(n)&&r.DomHandler.scrollInView(e,-1===t?n[0]:n[n.length-1])},J=function(e,t,n){"sourceSelection"===t?p(e.value):d(e.value),n&&n(e),r.ObjectUtils.isNotEmpty(P)&&"targetSelection"===t?p([]):r.ObjectUtils.isNotEmpty(R)&&"sourceSelection"===t&&d([])},X=function(e){var t=e.originalEvent,n=e.value,r=v("source"===e.type?[h,i.onSourceFilterChange]:[k,i.onTargetFilterChange],2),l=r[0],a=r[1];a?a({originalEvent:t,value:n}):l(n)},z=function(e,t){var n=v("source"===t?[M,Y]:[D,$],2),l=n[0],i=n[1];return A&&r.ObjectUtils.isNotEmpty(l)?i(l):e},Y=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(i.filterLocale);return G(i.source,t)},$=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(i.filterLocale);return G(i.target,t)},G=function(e,n){var r=A?i.filterBy.split(","):[];return t.FilterService.filter(e,r,n,i.filterMatchMode,i.filterLocale)},Q=function(){if(!F.current){F.current=r.DomHandler.createInlineStyle(s.default.nonce);var e="\n@media screen and (max-width: ".concat(i.breakpoint,") {\n    .p-picklist[").concat(O,"] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(O,"] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(O,"] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(O,"] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n\n    .p-picklist[").concat(O,'] .pi-angle-right:before {\n        content: "\\e930"\n    }\n\n    .p-picklist[').concat(O,'] .pi-angle-double-right:before {\n        content: "\\e92c"\n    }\n\n    .p-picklist[').concat(O,'] .pi-angle-left:before {\n        content: "\\e933"\n    }\n\n    .p-picklist[').concat(O,'] .pi-angle-double-left:before {\n        content: "\\e92f"\n    }\n}\n');F.current.innerHTML=e}};c.useImperativeHandle(l,(function(){return{props:i,getElement:function(){return j.current}}})),n.useMountEffect((function(){!O&&w(r.UniqueComponentId())})),n.useUpdateEffect((function(){return O&&(j.current.setAttribute(O,""),Q()),function(){F.current=r.DomHandler.removeInlineStyle(F.current)}}),[O,i.breakpoint]),n.useUpdateEffect((function(){x.current&&(V(x.current,U.current),x.current=null,U.current=null)}));var W=b.getOtherProps(i),Z=r.classNames("p-picklist p-component",i.className),ee=i.sourceItemTemplate?i.sourceItemTemplate:i.itemTemplate,te=i.targetItemTemplate?i.targetItemTemplate:i.itemTemplate,ne=z(i.source,"source"),re=z(i.target,"target");return c.createElement("div",u({id:i.id,ref:j,className:Z,style:i.style},W),i.showSourceControls&&c.createElement(T,{list:i.source,selection:P,onReorder:function(e){q(e,e.value,i.target),x.current=L.current.listElementRef.current,U.current=e.direction},className:"p-picklist-source-controls",dataKey:i.dataKey}),c.createElement(C,{ref:L,type:"source",list:ne,selection:P,onSelectionChange:function(e){return J(e,"sourceSelection",i.onSourceSelectionChange)},itemTemplate:ee,header:i.sourceHeader,style:i.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:i.metaKeySelection,tabIndex:i.tabIndex,dataKey:i.dataKey,filterValue:M,onFilter:X,showFilter:H,placeholder:i.sourceFilterPlaceholder,template:i.sourceFilterTemplate}),c.createElement(I,{onTransfer:function(e){var t=e.originalEvent,n=e.source,r=e.target,l=[];switch(e.direction){case"toTarget":l=P,i.onMoveToTarget&&i.onMoveToTarget({originalEvent:t,value:l});break;case"allToTarget":l=i.source,i.onMoveAllToTarget&&i.onMoveAllToTarget({originalEvent:t,value:l});break;case"toSource":l=R,i.onMoveToSource&&i.onMoveToSource({originalEvent:t,value:l});break;case"allToSource":l=i.target,i.onMoveAllToSource&&i.onMoveAllToSource({originalEvent:t,value:l})}J({originalEvent:t,value:l},"sourceSelection",i.onSourceSelectionChange),J({originalEvent:t,value:l},"targetSelection",i.onTargetSelectionChange),q(e,n,r)},source:i.source,visibleSourceList:ne,target:i.target,visibleTargetList:re,sourceSelection:P,targetSelection:R,dataKey:i.dataKey}),c.createElement(C,{ref:K,type:"target",list:re,selection:R,onSelectionChange:function(e){return J(e,"targetSelection",i.onTargetSelectionChange)},itemTemplate:te,header:i.targetHeader,style:i.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:i.metaKeySelection,tabIndex:i.tabIndex,dataKey:i.dataKey,filterValue:D,onFilter:X,showFilter:B,placeholder:i.targetFilterPlaceholder,template:i.targetFilterTemplate}),i.showTargetControls&&c.createElement(T,{list:i.target,selection:R,onReorder:function(e){q(e,i.source,e.value),x.current=K.current.listElementRef.current,U.current=e.direction},className:"p-picklist-target-controls",dataKey:i.dataKey}))})));N.displayName="PickList",exports.PickList=N;

package/picklist/picklist.d.ts

@@ -162,6 +162,11 @@ export interface PickListProps {
      * @defaultValue true
      */
     metaKeySelection?: boolean | undefined;
+    /**
+     * When specified, displays an input field to filter the items on keyup.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
     /**
      * When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).
      */
@@ -218,6 +223,11 @@ export interface PickListProps {
      * Name of the field that uniquely identifies the a record in the data.
      */
     dataKey?: string | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     * @defaultValue '960px'.
+     */
+    breakpoint?: string | undefined;
     /**
      * Template that gets the options for both source and target items and returns the content for it. Useful if you want the same template for both lists else use the custom sourceItemTemplate or targetItemTemplate properties.
      */

package/picklist/picklist.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { FilterService } from 'primereact/api';
-import { useUpdateEffect } from 'primereact/hooks';
-import { ObjectUtils, classNames, DomHandler } from 'primereact/utils';
+import PrimeReact, { FilterService } from 'primereact/api';
+import { useMountEffect, useUpdateEffect } from 'primereact/hooks';
+import { ObjectUtils, classNames, DomHandler, UniqueComponentId } from 'primereact/utils';
 import { Button } from 'primereact/button';
 import { Ripple } from 'primereact/ripple';
 
@@ -92,6 +92,7 @@ var PickListBase = {
     showSourceControls: true,
     showTargetControls: true,
     metaKeySelection: true,
+    filter: false,
     filterBy: null,
     filterMatchMode: 'contains',
     filterLocale: undefined,
@@ -105,6 +106,7 @@ var PickListBase = {
     targetFilterTemplate: null,
     tabIndex: 0,
     dataKey: null,
+    breakpoint: '960px',
     itemTemplate: null,
     sourceItemTemplate: null,
     targetItemTemplate: null,
@@ -594,11 +596,16 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     targetFilterValueState = _React$useState8[0],
     setTargetFilterValueState = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    attributeSelectorState = _React$useState10[0],
+    setAttributeSelectorState = _React$useState10[1];
   var elementRef = React.useRef(null);
   var sourceListElementRef = React.useRef(null);
   var targetListElementRef = React.useRef(null);
   var reorderedListElementRef = React.useRef(null);
   var reorderDirection = React.useRef(null);
+  var styleElementRef = React.useRef(null);
   var sourceSelection = props.sourceSelection ? props.sourceSelection : sourceSelectionState;
   var targetSelection = props.targetSelection ? props.targetSelection : targetSelectionState;
   var sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
@@ -757,6 +764,16 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
     return FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
   };
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-picklist[").concat(attributeSelectorState, "] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-right:before {\n        content: \"\\e930\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-right:before {\n        content: \"\\e92c\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-left:before {\n        content: \"\\e933\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-left:before {\n        content: \"\\e92f\"\n    }\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+  };
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -765,6 +782,18 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
     };
   });
+  useMountEffect(function () {
+    !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+  });
+  useUpdateEffect(function () {
+    if (attributeSelectorState) {
+      elementRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   useUpdateEffect(function () {
     if (reorderedListElementRef.current) {
       handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);

package/picklist/picklist.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{FilterService as t}from"primereact/api";import{useUpdateEffect as r}from"primereact/hooks";import{ObjectUtils as n,classNames as l,DomHandler as i}from"primereact/utils";import{Button as a}from"primereact/button";import{Ripple as o}from"primereact/ripple";function c(){return c=Object.assign?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},c.apply(this,arguments)}function s(e){if(Array.isArray(e))return e}function u(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,i,a,o=[],c=!0,s=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(o.push(n.value),o.length!==t);c=!0);}catch(e){s=!0,l=e}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(s)throw l}}return o}}function p(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 f(e,t){if(e){if("string"==typeof e)return p(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)?p(e,t):void 0}}function m(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){return s(e)||u(e,t)||f(e,t)||m()}var d={defaultProps:{__TYPE:"PickList",id:null,source:null,target:null,sourceHeader:null,targetHeader:null,style:null,className:null,sourceStyle:null,targetStyle:null,sourceSelection:null,targetSelection:null,showSourceControls:!0,showTargetControls:!0,metaKeySelection:!0,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,sourceFilterValue:null,targetFilterValue:null,showSourceFilter:!0,showTargetFilter:!0,sourceFilterPlaceholder:null,targetFilterPlaceholder:null,sourceFilterTemplate:null,targetFilterTemplate:null,tabIndex:0,dataKey:null,itemTemplate:null,sourceItemTemplate:null,targetItemTemplate:null,onChange:null,onMoveToSource:null,onMoveAllToSource:null,onMoveToTarget:null,onMoveAllToTarget:null,onSourceSelectionChange:null,onTargetSelectionChange:null,onSourceFilterChange:null,onTargetFilterChange:null,children:void 0},getProps:function(e){return n.getMergedProps(e,d.defaultProps)},getOtherProps:function(e){return n.getDiffProps(e,d.defaultProps)}};function v(e){if(Array.isArray(e))return p(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function h(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function b(e){return v(e)||y(e)||f(e)||h()}var S=e.memo((function(t){var r=!t.selection||!t.selection.length,i=l("p-picklist-buttons",t.className);return e.createElement("div",{className:i},e.createElement(a,{disabled:r,type:"button",icon:"pi pi-angle-up",onClick:function(e){var r=t.selection;if(r&&r.length){for(var l=b(t.list),i=0;i<r.length;i++){var a=n.findIndexInList(r[i],l,t.dataKey);if(0===a)break;var o=l[a-1];l[a-1]=l[a],l[a]=o}t.onReorder&&t.onReorder({originalEvent:e,value:l,direction:"up"})}}}),e.createElement(a,{disabled:r,type:"button",icon:"pi pi-angle-double-up",onClick:function(e){var r=t.selection;if(r&&r.length){for(var l=b(t.list),i=0;i<r.length;i++){var a=n.findIndexInList(r[i],l,t.dataKey);if(0===a)break;var o=l.splice(a,1)[0];l.unshift(o)}t.onReorder&&t.onReorder({originalEvent:e,value:l,direction:"top"})}}}),e.createElement(a,{disabled:r,type:"button",icon:"pi pi-angle-down",onClick:function(e){var r=t.selection;if(r&&r.length){for(var l=b(t.list),i=r.length-1;i>=0;i--){var a=n.findIndexInList(r[i],l,t.dataKey);if(a===l.length-1)break;var o=l[a+1];l[a+1]=l[a],l[a]=o}t.onReorder&&t.onReorder({originalEvent:e,value:l,direction:"down"})}}}),e.createElement(a,{disabled:r,type:"button",icon:"pi pi-angle-double-down",onClick:function(e){var r=t.selection;if(r&&r.length){for(var l=b(t.list),i=r.length-1;i>=0;i--){var a=n.findIndexInList(r[i],l,t.dataKey);if(a===l.length-1)break;var o=l.splice(a,1)[0];l.push(o)}t.onReorder&&t.onReorder({originalEvent:e,value:l,direction:"bottom"})}}}))}));S.displayName="PickListControls";var T=e.memo((function(t){var r=t.template?t.template(t.value):t.value,n=l("p-picklist-item",{"p-highlight":t.selected},t.className);return e.createElement("li",{className:n,onClick:function(e){t.onClick&&t.onClick({originalEvent:e,value:t.value})},onKeyDown:function(e){t.onKeyDown&&t.onKeyDown({originalEvent:e,value:t.value})},tabIndex:t.tabIndex,role:"option","aria-selected":t.selected},r,e.createElement(o,null))}));T.displayName="PickListItem";var E=e.memo(e.forwardRef((function(t,r){var a=e.useRef(null),o=function(e){var r=e.originalEvent,l=e.value,i=b(t.selection),a=n.findIndexInList(l,i,t.dataKey),o=-1!==a;if(t.metaKeySelection){var c=r.metaKey||r.ctrlKey;o&&c?i.splice(a,1):(c||(i.length=0),i.push(l))}else o?i.splice(a,1):i.push(l);t.onSelectionChange&&t.onSelectionChange({event:r,value:i})},c=function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=s(r);n&&n.focus(),t.preventDefault();break;case 38:var l=u(r);l&&l.focus(),t.preventDefault();break;case 13:o(e),t.preventDefault()}},s=function e(t){var r=t.nextElementSibling;return r?i.hasClass(r,"p-picklist-item")?r:e(r):null},u=function e(t){var r=t.previousElementSibling;return r?i.hasClass(r,"p-picklist-item")?r:e(r):null},p=function(e){return-1!==n.findIndexInList(e,t.selection,t.dataKey)},f=function(e){t.onFilter&&t.onFilter({originalEvent:e,value:e.target.value,type:t.type})},m=function(e){13===e.which&&e.preventDefault()};e.useImperativeHandle(r,(function(){return{listElementRef:a}}));var g=l("p-picklist-list-wrapper",t.className),d=t.header?e.createElement("div",{className:"p-picklist-header"},n.getJSXElement(t.header,t)):null,v=function(){if(t.showFilter){var r=e.createElement("div",{className:"p-picklist-filter"},e.createElement("input",{type:"text",value:t.filterValue,onChange:f,onKeyDown:m,placeholder:t.placeholder,className:"p-picklist-filter-input p-inputtext p-component"}),e.createElement("span",{className:"p-picklist-filter-icon pi pi-search"}));if(t.filterTemplate)r=n.getJSXElement(t.filterTemplate,{className:"p-picklist-filter",inputProps:{className:"p-picklist-filter-input p-inputtext p-component",onChange:f,onKeyDown:m},iconClassName:"p-picklist-filter-icon pi pi-search",element:r,props:t});return e.createElement("div",{className:"p-picklist-filter-container"},r)}return null}(),y=function(){var r=t.list?t.list.map((function(r){var n=JSON.stringify(r),l=p(r);return e.createElement(T,{key:n,value:r,template:t.itemTemplate,selected:l,onClick:o,onKeyDown:c,tabIndex:t.tabIndex})})):null,n=l("p-picklist-list",t.listClassName);return e.createElement("ul",{className:n,style:t.style,role:"listbox","aria-multiselectable":!0},r)}();return e.createElement("div",{ref:a,className:g},d,v,y)})));E.displayName="PickListSubList";var k=e.memo((function(t){var r=n.isEmpty(t.sourceSelection)||n.isEmpty(t.visibleSourceList),i=n.isEmpty(t.targetSelection)||n.isEmpty(t.visibleTargetList),o=n.isEmpty(t.visibleSourceList),c=n.isEmpty(t.visibleTargetList),s=l("p-picklist-buttons p-picklist-transfer-buttons",t.className);return e.createElement("div",{className:s},e.createElement(a,{disabled:r,type:"button",icon:"pi pi-angle-right",onClick:function(e){var r=t.sourceSelection;if(n.isNotEmpty(r)){for(var l=b(t.target),i=b(t.source),a=0;a<r.length;a++){var o=r[a];-1===n.findIndexInList(o,l,t.dataKey)&&l.push(i.splice(n.findIndexInList(o,i,t.dataKey),1)[0])}t.onTransfer&&t.onTransfer({originalEvent:e,source:i,target:l,direction:"toTarget"})}}}),e.createElement(a,{disabled:o,type:"button",icon:"pi pi-angle-double-right",onClick:function(e){if(t.source){var r=[].concat(b(t.target),b(t.visibleSourceList)),n=t.source.filter((function(e){return!t.visibleSourceList.some((function(t){return t===e}))}));t.onTransfer&&t.onTransfer({originalEvent:e,source:n,target:r,direction:"allToTarget"})}}}),e.createElement(a,{disabled:i,type:"button",icon:"pi pi-angle-left",onClick:function(e){var r=t.targetSelection;if(n.isNotEmpty(r)){for(var l=b(t.target),i=b(t.source),a=0;a<r.length;a++){var o=r[a];-1===n.findIndexInList(o,i,t.dataKey)&&i.push(l.splice(n.findIndexInList(o,l,t.dataKey),1)[0])}t.onTransfer&&t.onTransfer({originalEvent:e,source:i,target:l,direction:"toSource"})}}}),e.createElement(a,{disabled:c,type:"button",icon:"pi pi-angle-double-left",onClick:function(e){if(t.source){var r=[].concat(b(t.source),b(t.visibleTargetList)),n=t.target.filter((function(e){return!t.visibleTargetList.some((function(t){return t===e}))}));t.onTransfer&&t.onTransfer({originalEvent:e,source:r,target:n,direction:"allToSource"})}}}))}));k.displayName="PickListTransferControls";var C=e.memo(e.forwardRef((function(a,o){var s=d.getProps(a),u=g(e.useState([]),2),p=u[0],f=u[1],m=g(e.useState([]),2),v=m[0],y=m[1],h=g(e.useState(""),2),b=h[0],T=h[1],C=g(e.useState(""),2),I=C[0],w=C[1],N=e.useRef(null),K=e.useRef(null),L=e.useRef(null),F=e.useRef(null),x=e.useRef(null),P=s.sourceSelection?s.sourceSelection:p,R=s.targetSelection?s.targetSelection:v,M=s.onSourceFilterChange?s.sourceFilterValue:b,A=s.onTargetFilterChange?s.targetFilterValue:I,D=n.isNotEmpty(s.filterBy),O=D&&s.showSourceFilter,j=D&&s.showTargetFilter,V=function(e,t){if(e){var r=i.findSingle(e,".p-picklist-list");switch(t){case"up":B(r,-1);break;case"top":r.scrollTop=0;break;case"down":B(r,1);break;case"bottom":setTimeout((function(){return r.scrollTop=r.scrollHeight}),100)}}},H=function(e,t,r){s.onChange&&s.onChange({originalEvent:e.originalEvent,source:t,target:r})},B=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=e.getElementsByClassName("p-highlight");n.isNotEmpty(r)&&i.scrollInView(e,-1===t?r[0]:r[r.length-1])},J=function(e,t,r){"sourceSelection"===t?f(e.value):y(e.value),r&&r(e),n.isNotEmpty(P)&&"targetSelection"===t?f([]):n.isNotEmpty(R)&&"sourceSelection"===t&&y([])},X=function(e){var t=e.originalEvent,r=e.value,n=g("source"===e.type?[T,s.onSourceFilterChange]:[w,s.onTargetFilterChange],2),l=n[0],i=n[1];i?i({originalEvent:t,value:r}):l(r)},_=function(e,t){var r=g("source"===t?[M,U]:[A,Y],2),l=r[0],i=r[1];return D&&n.isNotEmpty(l)?i(l):e},U=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(s.filterLocale);return $(s.source,t)},Y=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(s.filterLocale);return $(s.target,t)},$=function(e,r){var n=D?s.filterBy.split(","):[];return t.filter(e,n,r,s.filterMatchMode,s.filterLocale)};e.useImperativeHandle(o,(function(){return{props:s,getElement:function(){return N.current}}})),r((function(){F.current&&(V(F.current,x.current),F.current=null,x.current=null)}));var q=d.getOtherProps(s),z=l("p-picklist p-component",s.className),G=s.sourceItemTemplate?s.sourceItemTemplate:s.itemTemplate,Q=s.targetItemTemplate?s.targetItemTemplate:s.itemTemplate,W=_(s.source,"source"),Z=_(s.target,"target");return e.createElement("div",c({id:s.id,ref:N,className:z,style:s.style},q),s.showSourceControls&&e.createElement(S,{list:s.source,selection:P,onReorder:function(e){H(e,e.value,s.target),F.current=K.current.listElementRef.current,x.current=e.direction},className:"p-picklist-source-controls",dataKey:s.dataKey}),e.createElement(E,{ref:K,type:"source",list:W,selection:P,onSelectionChange:function(e){return J(e,"sourceSelection",s.onSourceSelectionChange)},itemTemplate:G,header:s.sourceHeader,style:s.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:s.metaKeySelection,tabIndex:s.tabIndex,dataKey:s.dataKey,filterValue:M,onFilter:X,showFilter:O,placeholder:s.sourceFilterPlaceholder,template:s.sourceFilterTemplate}),e.createElement(k,{onTransfer:function(e){var t=e.originalEvent,r=e.source,n=e.target,l=[];switch(e.direction){case"toTarget":l=P,s.onMoveToTarget&&s.onMoveToTarget({originalEvent:t,value:l});break;case"allToTarget":l=s.source,s.onMoveAllToTarget&&s.onMoveAllToTarget({originalEvent:t,value:l});break;case"toSource":l=R,s.onMoveToSource&&s.onMoveToSource({originalEvent:t,value:l});break;case"allToSource":l=s.target,s.onMoveAllToSource&&s.onMoveAllToSource({originalEvent:t,value:l})}J({originalEvent:t,value:l},"sourceSelection",s.onSourceSelectionChange),J({originalEvent:t,value:l},"targetSelection",s.onTargetSelectionChange),H(e,r,n)},source:s.source,visibleSourceList:W,target:s.target,visibleTargetList:Z,sourceSelection:P,targetSelection:R,dataKey:s.dataKey}),e.createElement(E,{ref:L,type:"target",list:Z,selection:R,onSelectionChange:function(e){return J(e,"targetSelection",s.onTargetSelectionChange)},itemTemplate:Q,header:s.targetHeader,style:s.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:s.metaKeySelection,tabIndex:s.tabIndex,dataKey:s.dataKey,filterValue:A,onFilter:X,showFilter:j,placeholder:s.targetFilterPlaceholder,template:s.targetFilterTemplate}),s.showTargetControls&&e.createElement(S,{list:s.target,selection:R,onReorder:function(e){H(e,s.source,e.value),F.current=L.current.listElementRef.current,x.current=e.direction},className:"p-picklist-target-controls",dataKey:s.dataKey}))})));C.displayName="PickList";export{C as PickList};
+import*as e from"react";import t,{FilterService as n}from"primereact/api";import{useMountEffect as r,useUpdateEffect as l}from"primereact/hooks";import{ObjectUtils as i,classNames as o,DomHandler as a,UniqueComponentId as c}from"primereact/utils";import{Button as s}from"primereact/button";import{Ripple as u}from"primereact/ripple";function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p.apply(this,arguments)}function f(e){if(Array.isArray(e))return e}function m(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,i,o,a=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){s=!0,l=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw l}}return a}}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(e,t){if(e){if("string"==typeof e)return g(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}function v(){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 f(e)||m(e,t)||d(e,t)||v()}var y={defaultProps:{__TYPE:"PickList",id:null,source:null,target:null,sourceHeader:null,targetHeader:null,style:null,className:null,sourceStyle:null,targetStyle:null,sourceSelection:null,targetSelection:null,showSourceControls:!0,showTargetControls:!0,metaKeySelection:!0,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,sourceFilterValue:null,targetFilterValue:null,showSourceFilter:!0,showTargetFilter:!0,sourceFilterPlaceholder:null,targetFilterPlaceholder:null,sourceFilterTemplate:null,targetFilterTemplate:null,tabIndex:0,dataKey:null,breakpoint:"960px",itemTemplate:null,sourceItemTemplate:null,targetItemTemplate:null,onChange:null,onMoveToSource:null,onMoveAllToSource:null,onMoveToTarget:null,onMoveAllToTarget:null,onSourceSelectionChange:null,onTargetSelectionChange:null,onSourceFilterChange:null,onTargetFilterChange:null,children:void 0},getProps:function(e){return i.getMergedProps(e,y.defaultProps)},getOtherProps:function(e){return i.getDiffProps(e,y.defaultProps)}};function b(e){if(Array.isArray(e))return g(e)}function S(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function T(){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 E(e){return b(e)||S(e)||d(e)||T()}var k=e.memo((function(t){var n=!t.selection||!t.selection.length,r=o("p-picklist-buttons",t.className);return e.createElement("div",{className:r},e.createElement(s,{disabled:n,type:"button",icon:"pi pi-angle-up",onClick:function(e){var n=t.selection;if(n&&n.length){for(var r=E(t.list),l=0;l<n.length;l++){var o=i.findIndexInList(n[l],r,t.dataKey);if(0===o)break;var a=r[o-1];r[o-1]=r[o],r[o]=a}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"up"})}}}),e.createElement(s,{disabled:n,type:"button",icon:"pi pi-angle-double-up",onClick:function(e){var n=t.selection;if(n&&n.length){for(var r=E(t.list),l=0;l<n.length;l++){var o=i.findIndexInList(n[l],r,t.dataKey);if(0===o)break;var a=r.splice(o,1)[0];r.unshift(a)}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"top"})}}}),e.createElement(s,{disabled:n,type:"button",icon:"pi pi-angle-down",onClick:function(e){var n=t.selection;if(n&&n.length){for(var r=E(t.list),l=n.length-1;l>=0;l--){var o=i.findIndexInList(n[l],r,t.dataKey);if(o===r.length-1)break;var a=r[o+1];r[o+1]=r[o],r[o]=a}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"down"})}}}),e.createElement(s,{disabled:n,type:"button",icon:"pi pi-angle-double-down",onClick:function(e){var n=t.selection;if(n&&n.length){for(var r=E(t.list),l=n.length-1;l>=0;l--){var o=i.findIndexInList(n[l],r,t.dataKey);if(o===r.length-1)break;var a=r.splice(o,1)[0];r.push(a)}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"bottom"})}}}))}));k.displayName="PickListControls";var C=e.memo((function(t){var n=t.template?t.template(t.value):t.value,r=o("p-picklist-item",{"p-highlight":t.selected},t.className);return e.createElement("li",{className:r,onClick:function(e){t.onClick&&t.onClick({originalEvent:e,value:t.value})},onKeyDown:function(e){t.onKeyDown&&t.onKeyDown({originalEvent:e,value:t.value})},tabIndex:t.tabIndex,role:"option","aria-selected":t.selected},n,e.createElement(u,null))}));C.displayName="PickListItem";var I=e.memo(e.forwardRef((function(t,n){var r=e.useRef(null),l=function(e){var n=e.originalEvent,r=e.value,l=E(t.selection),o=i.findIndexInList(r,l,t.dataKey),a=-1!==o;if(t.metaKeySelection){var c=n.metaKey||n.ctrlKey;a&&c?l.splice(o,1):(c||(l.length=0),l.push(r))}else a?l.splice(o,1):l.push(r);t.onSelectionChange&&t.onSelectionChange({event:n,value:l})},c=function(e){var t=e.originalEvent,n=t.currentTarget;switch(t.which){case 40:var r=s(n);r&&r.focus(),t.preventDefault();break;case 38:var i=u(n);i&&i.focus(),t.preventDefault();break;case 13:l(e),t.preventDefault()}},s=function e(t){var n=t.nextElementSibling;return n?a.hasClass(n,"p-picklist-item")?n:e(n):null},u=function e(t){var n=t.previousElementSibling;return n?a.hasClass(n,"p-picklist-item")?n:e(n):null},p=function(e){return-1!==i.findIndexInList(e,t.selection,t.dataKey)},f=function(e){t.onFilter&&t.onFilter({originalEvent:e,value:e.target.value,type:t.type})},m=function(e){13===e.which&&e.preventDefault()};e.useImperativeHandle(n,(function(){return{listElementRef:r}}));var g=o("p-picklist-list-wrapper",t.className),d=t.header?e.createElement("div",{className:"p-picklist-header"},i.getJSXElement(t.header,t)):null,v=function(){if(t.showFilter){var n=e.createElement("div",{className:"p-picklist-filter"},e.createElement("input",{type:"text",value:t.filterValue,onChange:f,onKeyDown:m,placeholder:t.placeholder,className:"p-picklist-filter-input p-inputtext p-component"}),e.createElement("span",{className:"p-picklist-filter-icon pi pi-search"}));if(t.filterTemplate)n=i.getJSXElement(t.filterTemplate,{className:"p-picklist-filter",inputProps:{className:"p-picklist-filter-input p-inputtext p-component",onChange:f,onKeyDown:m},iconClassName:"p-picklist-filter-icon pi pi-search",element:n,props:t});return e.createElement("div",{className:"p-picklist-filter-container"},n)}return null}(),h=function(){var n=t.list?t.list.map((function(n){var r=JSON.stringify(n),i=p(n);return e.createElement(C,{key:r,value:n,template:t.itemTemplate,selected:i,onClick:l,onKeyDown:c,tabIndex:t.tabIndex})})):null,r=o("p-picklist-list",t.listClassName);return e.createElement("ul",{className:r,style:t.style,role:"listbox","aria-multiselectable":!0},n)}();return e.createElement("div",{ref:r,className:g},d,v,h)})));I.displayName="PickListSubList";var w=e.memo((function(t){var n=i.isEmpty(t.sourceSelection)||i.isEmpty(t.visibleSourceList),r=i.isEmpty(t.targetSelection)||i.isEmpty(t.visibleTargetList),l=i.isEmpty(t.visibleSourceList),a=i.isEmpty(t.visibleTargetList),c=o("p-picklist-buttons p-picklist-transfer-buttons",t.className);return e.createElement("div",{className:c},e.createElement(s,{disabled:n,type:"button",icon:"pi pi-angle-right",onClick:function(e){var n=t.sourceSelection;if(i.isNotEmpty(n)){for(var r=E(t.target),l=E(t.source),o=0;o<n.length;o++){var a=n[o];-1===i.findIndexInList(a,r,t.dataKey)&&r.push(l.splice(i.findIndexInList(a,l,t.dataKey),1)[0])}t.onTransfer&&t.onTransfer({originalEvent:e,source:l,target:r,direction:"toTarget"})}}}),e.createElement(s,{disabled:l,type:"button",icon:"pi pi-angle-double-right",onClick:function(e){if(t.source){var n=[].concat(E(t.target),E(t.visibleSourceList)),r=t.source.filter((function(e){return!t.visibleSourceList.some((function(t){return t===e}))}));t.onTransfer&&t.onTransfer({originalEvent:e,source:r,target:n,direction:"allToTarget"})}}}),e.createElement(s,{disabled:r,type:"button",icon:"pi pi-angle-left",onClick:function(e){var n=t.targetSelection;if(i.isNotEmpty(n)){for(var r=E(t.target),l=E(t.source),o=0;o<n.length;o++){var a=n[o];-1===i.findIndexInList(a,l,t.dataKey)&&l.push(r.splice(i.findIndexInList(a,r,t.dataKey),1)[0])}t.onTransfer&&t.onTransfer({originalEvent:e,source:l,target:r,direction:"toSource"})}}}),e.createElement(s,{disabled:a,type:"button",icon:"pi pi-angle-double-left",onClick:function(e){if(t.source){var n=[].concat(E(t.source),E(t.visibleTargetList)),r=t.target.filter((function(e){return!t.visibleTargetList.some((function(t){return t===e}))}));t.onTransfer&&t.onTransfer({originalEvent:e,source:n,target:r,direction:"allToSource"})}}}))}));w.displayName="PickListTransferControls";var N=e.memo(e.forwardRef((function(s,u){var f=y.getProps(s),m=h(e.useState([]),2),g=m[0],d=m[1],v=h(e.useState([]),2),b=v[0],S=v[1],T=h(e.useState(""),2),E=T[0],C=T[1],N=h(e.useState(""),2),L=N[0],K=N[1],x=h(e.useState(null),2),F=x[0],P=x[1],R=e.useRef(null),M=e.useRef(null),A=e.useRef(null),D=e.useRef(null),O=e.useRef(null),j=e.useRef(null),H=f.sourceSelection?f.sourceSelection:g,V=f.targetSelection?f.targetSelection:b,B=f.onSourceFilterChange?f.sourceFilterValue:E,J=f.onTargetFilterChange?f.targetFilterValue:L,X=i.isNotEmpty(f.filterBy),_=X&&f.showSourceFilter,U=X&&f.showTargetFilter,Y=function(e,t){if(e){var n=a.findSingle(e,".p-picklist-list");switch(t){case"up":q(n,-1);break;case"top":n.scrollTop=0;break;case"down":q(n,1);break;case"bottom":setTimeout((function(){return n.scrollTop=n.scrollHeight}),100)}}},$=function(e,t,n){f.onChange&&f.onChange({originalEvent:e.originalEvent,source:t,target:n})},q=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=e.getElementsByClassName("p-highlight");i.isNotEmpty(n)&&a.scrollInView(e,-1===t?n[0]:n[n.length-1])},z=function(e,t,n){"sourceSelection"===t?d(e.value):S(e.value),n&&n(e),i.isNotEmpty(H)&&"targetSelection"===t?d([]):i.isNotEmpty(V)&&"sourceSelection"===t&&S([])},G=function(e){var t=e.originalEvent,n=e.value,r=h("source"===e.type?[C,f.onSourceFilterChange]:[K,f.onTargetFilterChange],2),l=r[0],i=r[1];i?i({originalEvent:t,value:n}):l(n)},Q=function(e,t){var n=h("source"===t?[B,W]:[J,Z],2),r=n[0],l=n[1];return X&&i.isNotEmpty(r)?l(r):e},W=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(f.filterLocale);return ee(f.source,t)},Z=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(f.filterLocale);return ee(f.target,t)},ee=function(e,t){var r=X?f.filterBy.split(","):[];return n.filter(e,r,t,f.filterMatchMode,f.filterLocale)},te=function(){if(!j.current){j.current=a.createInlineStyle(t.nonce);var e="\n@media screen and (max-width: ".concat(f.breakpoint,") {\n    .p-picklist[").concat(F,"] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(F,"] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(F,"] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(F,"] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n\n    .p-picklist[").concat(F,'] .pi-angle-right:before {\n        content: "\\e930"\n    }\n\n    .p-picklist[').concat(F,'] .pi-angle-double-right:before {\n        content: "\\e92c"\n    }\n\n    .p-picklist[').concat(F,'] .pi-angle-left:before {\n        content: "\\e933"\n    }\n\n    .p-picklist[').concat(F,'] .pi-angle-double-left:before {\n        content: "\\e92f"\n    }\n}\n');j.current.innerHTML=e}};e.useImperativeHandle(u,(function(){return{props:f,getElement:function(){return R.current}}})),r((function(){!F&&P(c())})),l((function(){return F&&(R.current.setAttribute(F,""),te()),function(){j.current=a.removeInlineStyle(j.current)}}),[F,f.breakpoint]),l((function(){D.current&&(Y(D.current,O.current),D.current=null,O.current=null)}));var ne=y.getOtherProps(f),re=o("p-picklist p-component",f.className),le=f.sourceItemTemplate?f.sourceItemTemplate:f.itemTemplate,ie=f.targetItemTemplate?f.targetItemTemplate:f.itemTemplate,oe=Q(f.source,"source"),ae=Q(f.target,"target");return e.createElement("div",p({id:f.id,ref:R,className:re,style:f.style},ne),f.showSourceControls&&e.createElement(k,{list:f.source,selection:H,onReorder:function(e){$(e,e.value,f.target),D.current=M.current.listElementRef.current,O.current=e.direction},className:"p-picklist-source-controls",dataKey:f.dataKey}),e.createElement(I,{ref:M,type:"source",list:oe,selection:H,onSelectionChange:function(e){return z(e,"sourceSelection",f.onSourceSelectionChange)},itemTemplate:le,header:f.sourceHeader,style:f.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:f.metaKeySelection,tabIndex:f.tabIndex,dataKey:f.dataKey,filterValue:B,onFilter:G,showFilter:_,placeholder:f.sourceFilterPlaceholder,template:f.sourceFilterTemplate}),e.createElement(w,{onTransfer:function(e){var t=e.originalEvent,n=e.source,r=e.target,l=[];switch(e.direction){case"toTarget":l=H,f.onMoveToTarget&&f.onMoveToTarget({originalEvent:t,value:l});break;case"allToTarget":l=f.source,f.onMoveAllToTarget&&f.onMoveAllToTarget({originalEvent:t,value:l});break;case"toSource":l=V,f.onMoveToSource&&f.onMoveToSource({originalEvent:t,value:l});break;case"allToSource":l=f.target,f.onMoveAllToSource&&f.onMoveAllToSource({originalEvent:t,value:l})}z({originalEvent:t,value:l},"sourceSelection",f.onSourceSelectionChange),z({originalEvent:t,value:l},"targetSelection",f.onTargetSelectionChange),$(e,n,r)},source:f.source,visibleSourceList:oe,target:f.target,visibleTargetList:ae,sourceSelection:H,targetSelection:V,dataKey:f.dataKey}),e.createElement(I,{ref:A,type:"target",list:ae,selection:V,onSelectionChange:function(e){return z(e,"targetSelection",f.onTargetSelectionChange)},itemTemplate:ie,header:f.targetHeader,style:f.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:f.metaKeySelection,tabIndex:f.tabIndex,dataKey:f.dataKey,filterValue:J,onFilter:G,showFilter:U,placeholder:f.targetFilterPlaceholder,template:f.targetFilterTemplate}),f.showTargetControls&&e.createElement(k,{list:f.target,selection:V,onReorder:function(e){$(e,f.source,e.value),D.current=A.current.listElementRef.current,O.current=e.direction},className:"p-picklist-target-controls",dataKey:f.dataKey}))})));N.displayName="PickList";export{N as PickList};

package/picklist/picklist.js

@@ -1,7 +1,9 @@
 this.primereact = this.primereact || {};
-this.primereact.picklist = (function (exports, React, api, hooks, utils, button, ripple) {
+this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils, button, ripple) {
   'use strict';
 
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -21,6 +23,7 @@ this.primereact.picklist = (function (exports, React, api, hooks, utils, button,
   }
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
+  var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -109,6 +112,7 @@ this.primereact.picklist = (function (exports, React, api, hooks, utils, button,
       showSourceControls: true,
       showTargetControls: true,
       metaKeySelection: true,
+      filter: false,
       filterBy: null,
       filterMatchMode: 'contains',
       filterLocale: undefined,
@@ -122,6 +126,7 @@ this.primereact.picklist = (function (exports, React, api, hooks, utils, button,
       targetFilterTemplate: null,
       tabIndex: 0,
       dataKey: null,
+      breakpoint: '960px',
       itemTemplate: null,
       sourceItemTemplate: null,
       targetItemTemplate: null,
@@ -611,11 +616,16 @@ this.primereact.picklist = (function (exports, React, api, hooks, utils, button,
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       targetFilterValueState = _React$useState8[0],
       setTargetFilterValueState = _React$useState8[1];
+    var _React$useState9 = React__namespace.useState(null),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      attributeSelectorState = _React$useState10[0],
+      setAttributeSelectorState = _React$useState10[1];
     var elementRef = React__namespace.useRef(null);
     var sourceListElementRef = React__namespace.useRef(null);
     var targetListElementRef = React__namespace.useRef(null);
     var reorderedListElementRef = React__namespace.useRef(null);
     var reorderDirection = React__namespace.useRef(null);
+    var styleElementRef = React__namespace.useRef(null);
     var sourceSelection = props.sourceSelection ? props.sourceSelection : sourceSelectionState;
     var targetSelection = props.targetSelection ? props.targetSelection : targetSelectionState;
     var sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
@@ -772,7 +782,17 @@ this.primereact.picklist = (function (exports, React, api, hooks, utils, button,
     };
     var filter = function filter(list, filterValue) {
       var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
-      return api.FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+      return PrimeReact.FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+    };
+    var createStyle = function createStyle() {
+      if (!styleElementRef.current) {
+        styleElementRef.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
+        var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-picklist[").concat(attributeSelectorState, "] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-right:before {\n        content: \"\\e930\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-right:before {\n        content: \"\\e92c\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-left:before {\n        content: \"\\e933\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-left:before {\n        content: \"\\e92f\"\n    }\n}\n");
+        styleElementRef.current.innerHTML = innerHTML;
+      }
+    };
+    var destroyStyle = function destroyStyle() {
+      styleElementRef.current = utils.DomHandler.removeInlineStyle(styleElementRef.current);
     };
     React__namespace.useImperativeHandle(ref, function () {
       return {
@@ -782,6 +802,18 @@ this.primereact.picklist = (function (exports, React, api, hooks, utils, button,
         }
       };
     });
+    hooks.useMountEffect(function () {
+      !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
+    });
+    hooks.useUpdateEffect(function () {
+      if (attributeSelectorState) {
+        elementRef.current.setAttribute(attributeSelectorState, '');
+        createStyle();
+      }
+      return function () {
+        destroyStyle();
+      };
+    }, [attributeSelectorState, props.breakpoint]);
     hooks.useUpdateEffect(function () {
       if (reorderedListElementRef.current) {
         handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);

package/picklist/picklist.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.picklist=function(e,t,n,r,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(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=o(t);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function u(e){if(Array.isArray(e))return e}function p(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,i,a,o=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);c=!0);}catch(e){s=!0,l=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw l}}return o}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function m(e,t){if(e){if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}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.")}function d(e,t){return u(e)||p(e,t)||m(e,t)||g()}var v={defaultProps:{__TYPE:"PickList",id:null,source:null,target:null,sourceHeader:null,targetHeader:null,style:null,className:null,sourceStyle:null,targetStyle:null,sourceSelection:null,targetSelection:null,showSourceControls:!0,showTargetControls:!0,metaKeySelection:!0,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,sourceFilterValue:null,targetFilterValue:null,showSourceFilter:!0,showTargetFilter:!0,sourceFilterPlaceholder:null,targetFilterPlaceholder:null,sourceFilterTemplate:null,targetFilterTemplate:null,tabIndex:0,dataKey:null,itemTemplate:null,sourceItemTemplate:null,targetItemTemplate:null,onChange:null,onMoveToSource:null,onMoveAllToSource:null,onMoveToTarget:null,onMoveAllToTarget:null,onSourceSelectionChange:null,onTargetSelectionChange:null,onSourceFilterChange:null,onTargetFilterChange:null,children:void 0},getProps:function(e){return l.ObjectUtils.getMergedProps(e,v.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,v.defaultProps)}};function b(e){if(Array.isArray(e))return f(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function h(){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 S(e){return b(e)||y(e)||m(e)||h()}var E=c.memo((function(e){var t=!e.selection||!e.selection.length,n=l.classNames("p-picklist-buttons",e.className);return c.createElement("div",{className:n},c.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-up",onClick:function(t){var n=e.selection;if(n&&n.length){for(var r=S(e.list),i=0;i<n.length;i++){var a=l.ObjectUtils.findIndexInList(n[i],r,e.dataKey);if(0===a)break;var o=r[a-1];r[a-1]=r[a],r[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"up"})}}}),c.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-up",onClick:function(t){var n=e.selection;if(n&&n.length){for(var r=S(e.list),i=0;i<n.length;i++){var a=l.ObjectUtils.findIndexInList(n[i],r,e.dataKey);if(0===a)break;var o=r.splice(a,1)[0];r.unshift(o)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"top"})}}}),c.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-down",onClick:function(t){var n=e.selection;if(n&&n.length){for(var r=S(e.list),i=n.length-1;i>=0;i--){var a=l.ObjectUtils.findIndexInList(n[i],r,e.dataKey);if(a===r.length-1)break;var o=r[a+1];r[a+1]=r[a],r[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"down"})}}}),c.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-down",onClick:function(t){var n=e.selection;if(n&&n.length){for(var r=S(e.list),i=n.length-1;i>=0;i--){var a=l.ObjectUtils.findIndexInList(n[i],r,e.dataKey);if(a===r.length-1)break;var o=r.splice(a,1)[0];r.push(o)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"bottom"})}}}))}));E.displayName="PickListControls";var T=c.memo((function(e){var t=e.template?e.template(e.value):e.value,n=l.classNames("p-picklist-item",{"p-highlight":e.selected},e.className);return c.createElement("li",{className:n,onClick:function(t){e.onClick&&e.onClick({originalEvent:t,value:e.value})},onKeyDown:function(t){e.onKeyDown&&e.onKeyDown({originalEvent:t,value:e.value})},tabIndex:e.tabIndex,role:"option","aria-selected":e.selected},t,c.createElement(a.Ripple,null))}));T.displayName="PickListItem";var k=c.memo(c.forwardRef((function(e,t){var n=c.useRef(null),r=function(t){var n=t.originalEvent,r=t.value,i=S(e.selection),a=l.ObjectUtils.findIndexInList(r,i,e.dataKey),o=-1!==a;if(e.metaKeySelection){var c=n.metaKey||n.ctrlKey;o&&c?i.splice(a,1):(c||(i.length=0),i.push(r))}else o?i.splice(a,1):i.push(r);e.onSelectionChange&&e.onSelectionChange({event:n,value:i})},i=function(e){var t=e.originalEvent,n=t.currentTarget;switch(t.which){case 40:var l=a(n);l&&l.focus(),t.preventDefault();break;case 38:var i=o(n);i&&i.focus(),t.preventDefault();break;case 13:r(e),t.preventDefault()}},a=function e(t){var n=t.nextElementSibling;return n?l.DomHandler.hasClass(n,"p-picklist-item")?n:e(n):null},o=function e(t){var n=t.previousElementSibling;return n?l.DomHandler.hasClass(n,"p-picklist-item")?n:e(n):null},s=function(t){return-1!==l.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},u=function(t){e.onFilter&&e.onFilter({originalEvent:t,value:t.target.value,type:e.type})},p=function(e){13===e.which&&e.preventDefault()};c.useImperativeHandle(t,(function(){return{listElementRef:n}}));var f=l.classNames("p-picklist-list-wrapper",e.className),m=e.header?c.createElement("div",{className:"p-picklist-header"},l.ObjectUtils.getJSXElement(e.header,e)):null,g=function(){if(e.showFilter){var t=c.createElement("div",{className:"p-picklist-filter"},c.createElement("input",{type:"text",value:e.filterValue,onChange:u,onKeyDown:p,placeholder:e.placeholder,className:"p-picklist-filter-input p-inputtext p-component"}),c.createElement("span",{className:"p-picklist-filter-icon pi pi-search"}));if(e.filterTemplate)t=l.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-picklist-filter",inputProps:{className:"p-picklist-filter-input p-inputtext p-component",onChange:u,onKeyDown:p},iconClassName:"p-picklist-filter-icon pi pi-search",element:t,props:e});return c.createElement("div",{className:"p-picklist-filter-container"},t)}return null}(),d=function(){var t=e.list?e.list.map((function(t){var n=JSON.stringify(t),l=s(t);return c.createElement(T,{key:n,value:t,template:e.itemTemplate,selected:l,onClick:r,onKeyDown:i,tabIndex:e.tabIndex})})):null,n=l.classNames("p-picklist-list",e.listClassName);return c.createElement("ul",{className:n,style:e.style,role:"listbox","aria-multiselectable":!0},t)}();return c.createElement("div",{ref:n,className:f},m,g,d)})));k.displayName="PickListSubList";var C=c.memo((function(e){var t=l.ObjectUtils.isEmpty(e.sourceSelection)||l.ObjectUtils.isEmpty(e.visibleSourceList),n=l.ObjectUtils.isEmpty(e.targetSelection)||l.ObjectUtils.isEmpty(e.visibleTargetList),r=l.ObjectUtils.isEmpty(e.visibleSourceList),a=l.ObjectUtils.isEmpty(e.visibleTargetList),o=l.classNames("p-picklist-buttons p-picklist-transfer-buttons",e.className);return c.createElement("div",{className:o},c.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-right",onClick:function(t){var n=e.sourceSelection;if(l.ObjectUtils.isNotEmpty(n)){for(var r=S(e.target),i=S(e.source),a=0;a<n.length;a++){var o=n[a];-1===l.ObjectUtils.findIndexInList(o,r,e.dataKey)&&r.push(i.splice(l.ObjectUtils.findIndexInList(o,i,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:r,direction:"toTarget"})}}}),c.createElement(i.Button,{disabled:r,type:"button",icon:"pi pi-angle-double-right",onClick:function(t){if(e.source){var n=[].concat(S(e.target),S(e.visibleSourceList)),r=e.source.filter((function(t){return!e.visibleSourceList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:r,target:n,direction:"allToTarget"})}}}),c.createElement(i.Button,{disabled:n,type:"button",icon:"pi pi-angle-left",onClick:function(t){var n=e.targetSelection;if(l.ObjectUtils.isNotEmpty(n)){for(var r=S(e.target),i=S(e.source),a=0;a<n.length;a++){var o=n[a];-1===l.ObjectUtils.findIndexInList(o,i,e.dataKey)&&i.push(r.splice(l.ObjectUtils.findIndexInList(o,r,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:r,direction:"toSource"})}}}),c.createElement(i.Button,{disabled:a,type:"button",icon:"pi pi-angle-double-left",onClick:function(t){if(e.source){var n=[].concat(S(e.source),S(e.visibleTargetList)),r=e.target.filter((function(t){return!e.visibleTargetList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:n,target:r,direction:"allToSource"})}}}))}));C.displayName="PickListTransferControls";var N=c.memo(c.forwardRef((function(e,t){var i=v.getProps(e),a=d(c.useState([]),2),o=a[0],u=a[1],p=d(c.useState([]),2),f=p[0],m=p[1],g=d(c.useState(""),2),b=g[0],y=g[1],h=d(c.useState(""),2),S=h[0],T=h[1],N=c.useRef(null),O=c.useRef(null),I=c.useRef(null),j=c.useRef(null),w=c.useRef(null),L=i.sourceSelection?i.sourceSelection:o,K=i.targetSelection?i.targetSelection:f,F=i.onSourceFilterChange?i.sourceFilterValue:b,U=i.onTargetFilterChange?i.targetFilterValue:S,P=l.ObjectUtils.isNotEmpty(i.filterBy),x=P&&i.showSourceFilter,R=P&&i.showTargetFilter,M=function(e,t){if(e){var n=l.DomHandler.findSingle(e,".p-picklist-list");switch(t){case"up":A(n,-1);break;case"top":n.scrollTop=0;break;case"down":A(n,1);break;case"bottom":setTimeout((function(){return n.scrollTop=n.scrollHeight}),100)}}},D=function(e,t,n){i.onChange&&i.onChange({originalEvent:e.originalEvent,source:t,target:n})},A=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=e.getElementsByClassName("p-highlight");l.ObjectUtils.isNotEmpty(n)&&l.DomHandler.scrollInView(e,-1===t?n[0]:n[n.length-1])},B=function(e,t,n){"sourceSelection"===t?u(e.value):m(e.value),n&&n(e),l.ObjectUtils.isNotEmpty(L)&&"targetSelection"===t?u([]):l.ObjectUtils.isNotEmpty(K)&&"sourceSelection"===t&&m([])},H=function(e){var t=e.originalEvent,n=e.value,r=d("source"===e.type?[y,i.onSourceFilterChange]:[T,i.onTargetFilterChange],2),l=r[0],a=r[1];a?a({originalEvent:t,value:n}):l(n)},V=function(e,t){var n=d("source"===t?[F,_]:[U,J],2),r=n[0],i=n[1];return P&&l.ObjectUtils.isNotEmpty(r)?i(r):e},_=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(i.filterLocale);return X(i.source,t)},J=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(i.filterLocale);return X(i.target,t)},X=function(e,t){var r=P?i.filterBy.split(","):[];return n.FilterService.filter(e,r,t,i.filterMatchMode,i.filterLocale)};c.useImperativeHandle(t,(function(){return{props:i,getElement:function(){return N.current}}})),r.useUpdateEffect((function(){j.current&&(M(j.current,w.current),j.current=null,w.current=null)}));var z=v.getOtherProps(i),Y=l.classNames("p-picklist p-component",i.className),$=i.sourceItemTemplate?i.sourceItemTemplate:i.itemTemplate,q=i.targetItemTemplate?i.targetItemTemplate:i.itemTemplate,G=V(i.source,"source"),Q=V(i.target,"target");return c.createElement("div",s({id:i.id,ref:N,className:Y,style:i.style},z),i.showSourceControls&&c.createElement(E,{list:i.source,selection:L,onReorder:function(e){D(e,e.value,i.target),j.current=O.current.listElementRef.current,w.current=e.direction},className:"p-picklist-source-controls",dataKey:i.dataKey}),c.createElement(k,{ref:O,type:"source",list:G,selection:L,onSelectionChange:function(e){return B(e,"sourceSelection",i.onSourceSelectionChange)},itemTemplate:$,header:i.sourceHeader,style:i.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:i.metaKeySelection,tabIndex:i.tabIndex,dataKey:i.dataKey,filterValue:F,onFilter:H,showFilter:x,placeholder:i.sourceFilterPlaceholder,template:i.sourceFilterTemplate}),c.createElement(C,{onTransfer:function(e){var t=e.originalEvent,n=e.source,r=e.target,l=[];switch(e.direction){case"toTarget":l=L,i.onMoveToTarget&&i.onMoveToTarget({originalEvent:t,value:l});break;case"allToTarget":l=i.source,i.onMoveAllToTarget&&i.onMoveAllToTarget({originalEvent:t,value:l});break;case"toSource":l=K,i.onMoveToSource&&i.onMoveToSource({originalEvent:t,value:l});break;case"allToSource":l=i.target,i.onMoveAllToSource&&i.onMoveAllToSource({originalEvent:t,value:l})}B({originalEvent:t,value:l},"sourceSelection",i.onSourceSelectionChange),B({originalEvent:t,value:l},"targetSelection",i.onTargetSelectionChange),D(e,n,r)},source:i.source,visibleSourceList:G,target:i.target,visibleTargetList:Q,sourceSelection:L,targetSelection:K,dataKey:i.dataKey}),c.createElement(k,{ref:I,type:"target",list:Q,selection:K,onSelectionChange:function(e){return B(e,"targetSelection",i.onTargetSelectionChange)},itemTemplate:q,header:i.targetHeader,style:i.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:i.metaKeySelection,tabIndex:i.tabIndex,dataKey:i.dataKey,filterValue:U,onFilter:H,showFilter:R,placeholder:i.targetFilterPlaceholder,template:i.targetFilterTemplate}),i.showTargetControls&&c.createElement(E,{list:i.target,selection:K,onReorder:function(e){D(e,i.source,e.value),j.current=I.current.listElementRef.current,w.current=e.direction},className:"p-picklist-target-controls",dataKey:i.dataKey}))})));return N.displayName="PickList",e.PickList=N,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.hooks,primereact.utils,primereact.button,primereact.ripple);
+this.primereact=this.primereact||{},this.primereact.picklist=function(e,t,n,r,l,i,a){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=c(t),u=o(n);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p.apply(this,arguments)}function f(e){if(Array.isArray(e))return e}function m(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,i,a,o=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);c=!0);}catch(e){s=!0,l=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw l}}return o}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function g(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function v(){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 f(e)||m(e,t)||g(e,t)||v()}var h={defaultProps:{__TYPE:"PickList",id:null,source:null,target:null,sourceHeader:null,targetHeader:null,style:null,className:null,sourceStyle:null,targetStyle:null,sourceSelection:null,targetSelection:null,showSourceControls:!0,showTargetControls:!0,metaKeySelection:!0,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,sourceFilterValue:null,targetFilterValue:null,showSourceFilter:!0,showTargetFilter:!0,sourceFilterPlaceholder:null,targetFilterPlaceholder:null,sourceFilterTemplate:null,targetFilterTemplate:null,tabIndex:0,dataKey:null,breakpoint:"960px",itemTemplate:null,sourceItemTemplate:null,targetItemTemplate:null,onChange:null,onMoveToSource:null,onMoveAllToSource:null,onMoveToTarget:null,onMoveAllToTarget:null,onSourceSelectionChange:null,onTargetSelectionChange:null,onSourceFilterChange:null,onTargetFilterChange:null,children:void 0},getProps:function(e){return l.ObjectUtils.getMergedProps(e,h.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,h.defaultProps)}};function y(e){if(Array.isArray(e))return d(e)}function S(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function E(){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 T(e){return y(e)||S(e)||g(e)||E()}var k=s.memo((function(e){var t=!e.selection||!e.selection.length,n=l.classNames("p-picklist-buttons",e.className);return s.createElement("div",{className:n},s.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-up",onClick:function(t){var n=e.selection;if(n&&n.length){for(var r=T(e.list),i=0;i<n.length;i++){var a=l.ObjectUtils.findIndexInList(n[i],r,e.dataKey);if(0===a)break;var o=r[a-1];r[a-1]=r[a],r[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"up"})}}}),s.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-up",onClick:function(t){var n=e.selection;if(n&&n.length){for(var r=T(e.list),i=0;i<n.length;i++){var a=l.ObjectUtils.findIndexInList(n[i],r,e.dataKey);if(0===a)break;var o=r.splice(a,1)[0];r.unshift(o)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"top"})}}}),s.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-down",onClick:function(t){var n=e.selection;if(n&&n.length){for(var r=T(e.list),i=n.length-1;i>=0;i--){var a=l.ObjectUtils.findIndexInList(n[i],r,e.dataKey);if(a===r.length-1)break;var o=r[a+1];r[a+1]=r[a],r[a]=o}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"down"})}}}),s.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-double-down",onClick:function(t){var n=e.selection;if(n&&n.length){for(var r=T(e.list),i=n.length-1;i>=0;i--){var a=l.ObjectUtils.findIndexInList(n[i],r,e.dataKey);if(a===r.length-1)break;var o=r.splice(a,1)[0];r.push(o)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"bottom"})}}}))}));k.displayName="PickListControls";var C=s.memo((function(e){var t=e.template?e.template(e.value):e.value,n=l.classNames("p-picklist-item",{"p-highlight":e.selected},e.className);return s.createElement("li",{className:n,onClick:function(t){e.onClick&&e.onClick({originalEvent:t,value:e.value})},onKeyDown:function(t){e.onKeyDown&&e.onKeyDown({originalEvent:t,value:e.value})},tabIndex:e.tabIndex,role:"option","aria-selected":e.selected},t,s.createElement(a.Ripple,null))}));C.displayName="PickListItem";var I=s.memo(s.forwardRef((function(e,t){var n=s.useRef(null),r=function(t){var n=t.originalEvent,r=t.value,i=T(e.selection),a=l.ObjectUtils.findIndexInList(r,i,e.dataKey),o=-1!==a;if(e.metaKeySelection){var c=n.metaKey||n.ctrlKey;o&&c?i.splice(a,1):(c||(i.length=0),i.push(r))}else o?i.splice(a,1):i.push(r);e.onSelectionChange&&e.onSelectionChange({event:n,value:i})},i=function(e){var t=e.originalEvent,n=t.currentTarget;switch(t.which){case 40:var l=a(n);l&&l.focus(),t.preventDefault();break;case 38:var i=o(n);i&&i.focus(),t.preventDefault();break;case 13:r(e),t.preventDefault()}},a=function e(t){var n=t.nextElementSibling;return n?l.DomHandler.hasClass(n,"p-picklist-item")?n:e(n):null},o=function e(t){var n=t.previousElementSibling;return n?l.DomHandler.hasClass(n,"p-picklist-item")?n:e(n):null},c=function(t){return-1!==l.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},u=function(t){e.onFilter&&e.onFilter({originalEvent:t,value:t.target.value,type:e.type})},p=function(e){13===e.which&&e.preventDefault()};s.useImperativeHandle(t,(function(){return{listElementRef:n}}));var f=l.classNames("p-picklist-list-wrapper",e.className),m=e.header?s.createElement("div",{className:"p-picklist-header"},l.ObjectUtils.getJSXElement(e.header,e)):null,d=function(){if(e.showFilter){var t=s.createElement("div",{className:"p-picklist-filter"},s.createElement("input",{type:"text",value:e.filterValue,onChange:u,onKeyDown:p,placeholder:e.placeholder,className:"p-picklist-filter-input p-inputtext p-component"}),s.createElement("span",{className:"p-picklist-filter-icon pi pi-search"}));if(e.filterTemplate)t=l.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-picklist-filter",inputProps:{className:"p-picklist-filter-input p-inputtext p-component",onChange:u,onKeyDown:p},iconClassName:"p-picklist-filter-icon pi pi-search",element:t,props:e});return s.createElement("div",{className:"p-picklist-filter-container"},t)}return null}(),g=function(){var t=e.list?e.list.map((function(t){var n=JSON.stringify(t),l=c(t);return s.createElement(C,{key:n,value:t,template:e.itemTemplate,selected:l,onClick:r,onKeyDown:i,tabIndex:e.tabIndex})})):null,n=l.classNames("p-picklist-list",e.listClassName);return s.createElement("ul",{className:n,style:e.style,role:"listbox","aria-multiselectable":!0},t)}();return s.createElement("div",{ref:n,className:f},m,d,g)})));I.displayName="PickListSubList";var N=s.memo((function(e){var t=l.ObjectUtils.isEmpty(e.sourceSelection)||l.ObjectUtils.isEmpty(e.visibleSourceList),n=l.ObjectUtils.isEmpty(e.targetSelection)||l.ObjectUtils.isEmpty(e.visibleTargetList),r=l.ObjectUtils.isEmpty(e.visibleSourceList),a=l.ObjectUtils.isEmpty(e.visibleTargetList),o=l.classNames("p-picklist-buttons p-picklist-transfer-buttons",e.className);return s.createElement("div",{className:o},s.createElement(i.Button,{disabled:t,type:"button",icon:"pi pi-angle-right",onClick:function(t){var n=e.sourceSelection;if(l.ObjectUtils.isNotEmpty(n)){for(var r=T(e.target),i=T(e.source),a=0;a<n.length;a++){var o=n[a];-1===l.ObjectUtils.findIndexInList(o,r,e.dataKey)&&r.push(i.splice(l.ObjectUtils.findIndexInList(o,i,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:r,direction:"toTarget"})}}}),s.createElement(i.Button,{disabled:r,type:"button",icon:"pi pi-angle-double-right",onClick:function(t){if(e.source){var n=[].concat(T(e.target),T(e.visibleSourceList)),r=e.source.filter((function(t){return!e.visibleSourceList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:r,target:n,direction:"allToTarget"})}}}),s.createElement(i.Button,{disabled:n,type:"button",icon:"pi pi-angle-left",onClick:function(t){var n=e.targetSelection;if(l.ObjectUtils.isNotEmpty(n)){for(var r=T(e.target),i=T(e.source),a=0;a<n.length;a++){var o=n[a];-1===l.ObjectUtils.findIndexInList(o,i,e.dataKey)&&i.push(r.splice(l.ObjectUtils.findIndexInList(o,r,e.dataKey),1)[0])}e.onTransfer&&e.onTransfer({originalEvent:t,source:i,target:r,direction:"toSource"})}}}),s.createElement(i.Button,{disabled:a,type:"button",icon:"pi pi-angle-double-left",onClick:function(t){if(e.source){var n=[].concat(T(e.source),T(e.visibleTargetList)),r=e.target.filter((function(t){return!e.visibleTargetList.some((function(e){return e===t}))}));e.onTransfer&&e.onTransfer({originalEvent:t,source:n,target:r,direction:"allToSource"})}}}))}));N.displayName="PickListTransferControls";var O=s.memo(s.forwardRef((function(e,t){var i=h.getProps(e),a=b(s.useState([]),2),o=a[0],c=a[1],f=b(s.useState([]),2),m=f[0],d=f[1],g=b(s.useState(""),2),v=g[0],y=g[1],S=b(s.useState(""),2),E=S[0],T=S[1],C=b(s.useState(null),2),O=C[0],w=C[1],j=s.useRef(null),L=s.useRef(null),K=s.useRef(null),U=s.useRef(null),F=s.useRef(null),x=s.useRef(null),P=i.sourceSelection?i.sourceSelection:o,R=i.targetSelection?i.targetSelection:m,M=i.onSourceFilterChange?i.sourceFilterValue:v,D=i.onTargetFilterChange?i.targetFilterValue:E,A=l.ObjectUtils.isNotEmpty(i.filterBy),H=A&&i.showSourceFilter,B=A&&i.showTargetFilter,V=function(e,t){if(e){var n=l.DomHandler.findSingle(e,".p-picklist-list");switch(t){case"up":J(n,-1);break;case"top":n.scrollTop=0;break;case"down":J(n,1);break;case"bottom":setTimeout((function(){return n.scrollTop=n.scrollHeight}),100)}}},_=function(e,t,n){i.onChange&&i.onChange({originalEvent:e.originalEvent,source:t,target:n})},J=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=e.getElementsByClassName("p-highlight");l.ObjectUtils.isNotEmpty(n)&&l.DomHandler.scrollInView(e,-1===t?n[0]:n[n.length-1])},X=function(e,t,n){"sourceSelection"===t?c(e.value):d(e.value),n&&n(e),l.ObjectUtils.isNotEmpty(P)&&"targetSelection"===t?c([]):l.ObjectUtils.isNotEmpty(R)&&"sourceSelection"===t&&d([])},q=function(e){var t=e.originalEvent,n=e.value,r=b("source"===e.type?[y,i.onSourceFilterChange]:[T,i.onTargetFilterChange],2),l=r[0],a=r[1];a?a({originalEvent:t,value:n}):l(n)},z=function(e,t){var n=b("source"===t?[M,Y]:[D,$],2),r=n[0],i=n[1];return A&&l.ObjectUtils.isNotEmpty(r)?i(r):e},Y=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(i.filterLocale);return G(i.source,t)},$=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.trim().toLocaleLowerCase(i.filterLocale);return G(i.target,t)},G=function(e,t){var r=A?i.filterBy.split(","):[];return n.FilterService.filter(e,r,t,i.filterMatchMode,i.filterLocale)},Q=function(){if(!x.current){x.current=l.DomHandler.createInlineStyle(u.default.nonce);var e="\n@media screen and (max-width: ".concat(i.breakpoint,") {\n    .p-picklist[").concat(O,"] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(O,"] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(O,"] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(O,"] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n\n    .p-picklist[").concat(O,'] .pi-angle-right:before {\n        content: "\\e930"\n    }\n\n    .p-picklist[').concat(O,'] .pi-angle-double-right:before {\n        content: "\\e92c"\n    }\n\n    .p-picklist[').concat(O,'] .pi-angle-left:before {\n        content: "\\e933"\n    }\n\n    .p-picklist[').concat(O,'] .pi-angle-double-left:before {\n        content: "\\e92f"\n    }\n}\n');x.current.innerHTML=e}};s.useImperativeHandle(t,(function(){return{props:i,getElement:function(){return j.current}}})),r.useMountEffect((function(){!O&&w(l.UniqueComponentId())})),r.useUpdateEffect((function(){return O&&(j.current.setAttribute(O,""),Q()),function(){x.current=l.DomHandler.removeInlineStyle(x.current)}}),[O,i.breakpoint]),r.useUpdateEffect((function(){U.current&&(V(U.current,F.current),U.current=null,F.current=null)}));var W=h.getOtherProps(i),Z=l.classNames("p-picklist p-component",i.className),ee=i.sourceItemTemplate?i.sourceItemTemplate:i.itemTemplate,te=i.targetItemTemplate?i.targetItemTemplate:i.itemTemplate,ne=z(i.source,"source"),re=z(i.target,"target");return s.createElement("div",p({id:i.id,ref:j,className:Z,style:i.style},W),i.showSourceControls&&s.createElement(k,{list:i.source,selection:P,onReorder:function(e){_(e,e.value,i.target),U.current=L.current.listElementRef.current,F.current=e.direction},className:"p-picklist-source-controls",dataKey:i.dataKey}),s.createElement(I,{ref:L,type:"source",list:ne,selection:P,onSelectionChange:function(e){return X(e,"sourceSelection",i.onSourceSelectionChange)},itemTemplate:ee,header:i.sourceHeader,style:i.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:i.metaKeySelection,tabIndex:i.tabIndex,dataKey:i.dataKey,filterValue:M,onFilter:q,showFilter:H,placeholder:i.sourceFilterPlaceholder,template:i.sourceFilterTemplate}),s.createElement(N,{onTransfer:function(e){var t=e.originalEvent,n=e.source,r=e.target,l=[];switch(e.direction){case"toTarget":l=P,i.onMoveToTarget&&i.onMoveToTarget({originalEvent:t,value:l});break;case"allToTarget":l=i.source,i.onMoveAllToTarget&&i.onMoveAllToTarget({originalEvent:t,value:l});break;case"toSource":l=R,i.onMoveToSource&&i.onMoveToSource({originalEvent:t,value:l});break;case"allToSource":l=i.target,i.onMoveAllToSource&&i.onMoveAllToSource({originalEvent:t,value:l})}X({originalEvent:t,value:l},"sourceSelection",i.onSourceSelectionChange),X({originalEvent:t,value:l},"targetSelection",i.onTargetSelectionChange),_(e,n,r)},source:i.source,visibleSourceList:ne,target:i.target,visibleTargetList:re,sourceSelection:P,targetSelection:R,dataKey:i.dataKey}),s.createElement(I,{ref:K,type:"target",list:re,selection:R,onSelectionChange:function(e){return X(e,"targetSelection",i.onTargetSelectionChange)},itemTemplate:te,header:i.targetHeader,style:i.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:i.metaKeySelection,tabIndex:i.tabIndex,dataKey:i.dataKey,filterValue:D,onFilter:q,showFilter:B,placeholder:i.targetFilterPlaceholder,template:i.targetFilterTemplate}),i.showTargetControls&&s.createElement(k,{list:i.target,selection:R,onReorder:function(e){_(e,i.source,e.value),U.current=K.current.listElementRef.current,F.current=e.direction},className:"p-picklist-target-controls",dataKey:i.dataKey}))})));return O.displayName="PickList",e.PickList=O,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.hooks,primereact.utils,primereact.button,primereact.ripple);