primereact 9.2.2 → 9.3.0

package/picklist/picklist.esm.js

@@ -1,9 +1,18 @@
 import * as React from 'react';
 import PrimeReact, { FilterService } from 'primereact/api';
-import { useMountEffect, useUpdateEffect } from 'primereact/hooks';
-import { ObjectUtils, classNames, DomHandler, UniqueComponentId } from 'primereact/utils';
+import { useMatchMedia, useMountEffect, useUpdateEffect } from 'primereact/hooks';
+import { ObjectUtils, classNames, IconUtils, DomHandler, UniqueComponentId } from 'primereact/utils';
 import { Button } from 'primereact/button';
+import { AngleDownIcon } from 'primereact/icons/angledown';
+import { AngleDoubleUpIcon } from 'primereact/icons/angledoubleup';
+import { AngleUpIcon } from 'primereact/icons/angleup';
+import { AngleDoubleDownIcon } from 'primereact/icons/angledoubledown';
 import { Ripple } from 'primereact/ripple';
+import { SearchIcon } from 'primereact/icons/search';
+import { AngleLeftIcon } from 'primereact/icons/angleleft';
+import { AngleDoubleLeftIcon } from 'primereact/icons/angledoubleleft';
+import { AngleDoubleRightIcon } from 'primereact/icons/angledoubleright';
+import { AngleRightIcon } from 'primereact/icons/angleright';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -95,6 +104,16 @@ var PickListBase = {
     filter: false,
     filterBy: null,
     filterMatchMode: 'contains',
+    targetFilterIcon: null,
+    sourceFilterIcon: null,
+    moveAllToSourceIcon: null,
+    moveToSourceIcon: null,
+    moveAllToTargetIcon: null,
+    moveToTargetIcon: null,
+    moveBottomIcon: null,
+    moveUpIcon: null,
+    moveTopIcon: null,
+    moveDownIcon: null,
     filterLocale: undefined,
     sourceFilterValue: null,
     targetFilterValue: null,
@@ -146,6 +165,10 @@ function _toConsumableArray(arr) {
 }
 
 var PickListControls = /*#__PURE__*/React.memo(function (props) {
+  var moveUpIcon = props.moveUpIcon || /*#__PURE__*/React.createElement(AngleUpIcon, null);
+  var moveTopIcon = props.moveTopIcon || /*#__PURE__*/React.createElement(AngleDoubleUpIcon, null);
+  var moveDownIcon = props.moveDownIcon || /*#__PURE__*/React.createElement(AngleDownIcon, null);
+  var moveBottomIcon = props.moveBottomIcon || /*#__PURE__*/React.createElement(AngleDoubleDownIcon, null);
   var moveDisabled = !props.selection || !props.selection.length;
   var moveUp = function moveUp(event) {
     var selectedItems = props.selection;
@@ -249,22 +272,22 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: moveDisabled,
     type: "button",
-    icon: "pi pi-angle-up",
+    icon: moveUpIcon,
     onClick: moveUp
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveDisabled,
     type: "button",
-    icon: "pi pi-angle-double-up",
+    icon: moveTopIcon,
     onClick: moveTop
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveDisabled,
     type: "button",
-    icon: "pi pi-angle-down",
+    icon: moveDownIcon,
     onClick: moveDown
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveDisabled,
     type: "button",
-    icon: "pi pi-angle-double-down",
+    icon: moveBottomIcon,
     onClick: moveBottom
   }));
 });
@@ -414,6 +437,17 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     return null;
   };
   var createFilter = function createFilter() {
+    var iconClassName = 'p-picklist-filter-icon';
+    var icon = props.type === 'source' ? props.sourceFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, {
+      className: iconClassName
+    }) : props.targetFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, {
+      className: iconClassName
+    });
+    var filterIcon = IconUtils.getJSXIcon(icon, {
+      className: iconClassName
+    }, {
+      props: props
+    });
     if (props.showFilter) {
       var content = /*#__PURE__*/React.createElement("div", {
         className: "p-picklist-filter"
@@ -424,9 +458,7 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
         onKeyDown: onFilterInputKeyDown,
         placeholder: props.placeholder,
         className: "p-picklist-filter-input p-inputtext p-component"
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "p-picklist-filter-icon pi pi-search"
-      }));
+      }), /*#__PURE__*/React.createElement("span", null, " ", filterIcon, " "));
       if (props.filterTemplate) {
         var defaultContentOptions = {
           className: 'p-picklist-filter',
@@ -435,7 +467,7 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
             onChange: onFilter,
             onKeyDown: onFilterInputKeyDown
           },
-          iconClassName: 'p-picklist-filter-icon pi pi-search',
+          iconClassName: iconClassName,
           element: content,
           props: props
         };
@@ -469,6 +501,37 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
 PickListSubList.displayName = 'PickListSubList';
 
 var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
+  var viewChanged = useMatchMedia("(max-width: ".concat(props.breakpoint, ")"), props.breakpoint);
+  function getIconComponent(iconType) {
+    switch (iconType) {
+      case 'moveToTargetIcon':
+        return props.moveToTargetIcon || viewChanged ? /*#__PURE__*/React.createElement(AngleDownIcon, null) : /*#__PURE__*/React.createElement(AngleRightIcon, null);
+      case 'moveAllToTargetIcon':
+        return props.moveAllToTargetIcon || viewChanged ? /*#__PURE__*/React.createElement(AngleDoubleDownIcon, null) : /*#__PURE__*/React.createElement(AngleDoubleRightIcon, null);
+      case 'moveToSourceIcon':
+        return props.moveToSourceIcon || viewChanged ? /*#__PURE__*/React.createElement(AngleUpIcon, null) : /*#__PURE__*/React.createElement(AngleLeftIcon, null);
+      case 'moveAllToSourceIcon':
+        return props.moveAllToSourceIcon || viewChanged ? /*#__PURE__*/React.createElement(AngleDoubleUpIcon, null) : /*#__PURE__*/React.createElement(AngleDoubleLeftIcon, null);
+      default:
+        return null;
+    }
+  }
+  var moveToTargetIcon = IconUtils.getJSXIcon(getIconComponent('moveToTargetIcon'), undefined, {
+    props: props,
+    viewChanged: viewChanged
+  });
+  var moveAllToTargetIcon = IconUtils.getJSXIcon(getIconComponent('moveAllToTargetIcon'), undefined, {
+    props: props,
+    viewChanged: viewChanged
+  });
+  var moveToSourceIcon = IconUtils.getJSXIcon(getIconComponent('moveToSourceIcon'), undefined, {
+    props: props,
+    viewChanged: viewChanged
+  });
+  var moveAllToSourceIcon = IconUtils.getJSXIcon(getIconComponent('moveAllToSourceIcon'), undefined, {
+    props: props,
+    viewChanged: viewChanged
+  });
   var moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection) || ObjectUtils.isEmpty(props.visibleSourceList);
   var moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection) || ObjectUtils.isEmpty(props.visibleTargetList);
   var moveAllRightDisabled = ObjectUtils.isEmpty(props.visibleSourceList);
@@ -557,22 +620,22 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: moveRightDisabled,
     type: "button",
-    icon: "pi pi-angle-right",
+    icon: moveToTargetIcon,
     onClick: moveRight
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveAllRightDisabled,
     type: "button",
-    icon: "pi pi-angle-double-right",
+    icon: moveAllToTargetIcon,
     onClick: moveAllRight
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveLeftDisabled,
     type: "button",
-    icon: "pi pi-angle-left",
+    icon: moveToSourceIcon,
     onClick: moveLeft
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveAllLeftDisabled,
     type: "button",
-    icon: "pi pi-angle-double-left",
+    icon: moveAllToSourceIcon,
     onClick: moveAllLeft
   }));
 });
@@ -767,7 +830,7 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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");
+      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");
       styleElementRef.current.innerHTML = innerHTML;
     }
   };
@@ -817,7 +880,11 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     selection: sourceSelection,
     onReorder: onSourceReorder,
     className: "p-picklist-source-controls",
-    dataKey: props.dataKey
+    dataKey: props.dataKey,
+    moveUpIcon: props.moveUpIcon,
+    moveTopIcon: props.moveTopIcon,
+    moveDownIcon: props.moveDownIcon,
+    moveBottomIcon: props.moveBottomIcon
   }), /*#__PURE__*/React.createElement(PickListSubList, {
     ref: sourceListElementRef,
     type: "source",
@@ -838,16 +905,22 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     onFilter: onFilter,
     showFilter: showSourceFilter,
     placeholder: props.sourceFilterPlaceholder,
-    template: props.sourceFilterTemplate
+    template: props.sourceFilterTemplate,
+    sourceFilterIcon: props.sourceFilterIcon
   }), /*#__PURE__*/React.createElement(PickListTransferControls, {
     onTransfer: onTransfer,
     source: props.source,
     visibleSourceList: sourceList,
     target: props.target,
+    breakpoint: props.breakpoint,
     visibleTargetList: targetList,
     sourceSelection: sourceSelection,
     targetSelection: targetSelection,
-    dataKey: props.dataKey
+    dataKey: props.dataKey,
+    moveToTargetIcon: props.moveToTargetIcon,
+    moveAllToTargetIcon: props.moveAllToTargetIcon,
+    moveToSourceIcon: props.moveToSourceIcon,
+    moveAllToSourceIcon: props.moveAllToSourceIcon
   }), /*#__PURE__*/React.createElement(PickListSubList, {
     ref: targetListElementRef,
     type: "target",
@@ -868,13 +941,18 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     onFilter: onFilter,
     showFilter: showTargetFilter,
     placeholder: props.targetFilterPlaceholder,
-    template: props.targetFilterTemplate
+    template: props.targetFilterTemplate,
+    targetFilterIcon: props.targetFilterIcon
   }), props.showTargetControls && /*#__PURE__*/React.createElement(PickListControls, {
     list: props.target,
     selection: targetSelection,
     onReorder: onTargetReorder,
     className: "p-picklist-target-controls",
-    dataKey: props.dataKey
+    dataKey: props.dataKey,
+    moveUpIcon: props.moveUpIcon,
+    moveTopIcon: props.moveTopIcon,
+    moveDownIcon: props.moveDownIcon,
+    moveBottomIcon: props.moveBottomIcon
   }));
 }));
 PickList.displayName = 'PickList';

package/picklist/picklist.esm.min.js

@@ -1 +1 @@
-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]:"").trim().toLocaleLowerCase(f.filterLocale);return ee(f.source,e)},Z=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").trim().toLocaleLowerCase(f.filterLocale);return ee(f.target,e)},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};
+import*as e from"react";import t,{FilterService as n}from"primereact/api";import{useMatchMedia as r,useMountEffect as o,useUpdateEffect as l}from"primereact/hooks";import{ObjectUtils as i,classNames as a,IconUtils as c,DomHandler as u,UniqueComponentId as s}from"primereact/utils";import{Button as m}from"primereact/button";import{AngleDownIcon as p}from"primereact/icons/angledown";import{AngleDoubleUpIcon as v}from"primereact/icons/angledoubleup";import{AngleUpIcon as f}from"primereact/icons/angleup";import{AngleDoubleDownIcon as g}from"primereact/icons/angledoubledown";import{Ripple as d}from"primereact/ripple";import{SearchIcon as h}from"primereact/icons/search";import{AngleLeftIcon as T}from"primereact/icons/angleleft";import{AngleDoubleLeftIcon as y}from"primereact/icons/angledoubleleft";import{AngleDoubleRightIcon as I}from"primereact/icons/angledoubleright";import{AngleRightIcon as S}from"primereact/icons/angleright";function b(){return b=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},b.apply(this,arguments)}function E(e){if(Array.isArray(e))return e}function k(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,l,i,a=[],c=!0,u=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=l.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw o}}return a}}function w(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 C(e,t){if(e){if("string"==typeof e)return w(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)?w(e,t):void 0}}function N(){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 F(e,t){return E(e)||k(e,t)||C(e,t)||N()}var L={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",targetFilterIcon:null,sourceFilterIcon:null,moveAllToSourceIcon:null,moveToSourceIcon:null,moveAllToTargetIcon:null,moveToTargetIcon:null,moveBottomIcon:null,moveUpIcon:null,moveTopIcon:null,moveDownIcon:null,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,L.defaultProps)},getOtherProps:function(e){return i.getDiffProps(e,L.defaultProps)}};function K(e){if(Array.isArray(e))return w(e)}function x(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function A(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function P(e){return K(e)||x(e)||C(e)||A()}var R=e.memo((function(t){var n=t.moveUpIcon||e.createElement(f,null),r=t.moveTopIcon||e.createElement(v,null),o=t.moveDownIcon||e.createElement(p,null),l=t.moveBottomIcon||e.createElement(g,null),c=!t.selection||!t.selection.length,u=a("p-picklist-buttons",t.className);return e.createElement("div",{className:u},e.createElement(m,{disabled:c,type:"button",icon:n,onClick:function(e){var n=t.selection;if(n&&n.length){for(var r=P(t.list),o=0;o<n.length;o++){var l=i.findIndexInList(n[o],r,t.dataKey);if(0===l)break;var a=r[l-1];r[l-1]=r[l],r[l]=a}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"up"})}}}),e.createElement(m,{disabled:c,type:"button",icon:r,onClick:function(e){var n=t.selection;if(n&&n.length){for(var r=P(t.list),o=0;o<n.length;o++){var l=i.findIndexInList(n[o],r,t.dataKey);if(0===l)break;var a=r.splice(l,1)[0];r.unshift(a)}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"top"})}}}),e.createElement(m,{disabled:c,type:"button",icon:o,onClick:function(e){var n=t.selection;if(n&&n.length){for(var r=P(t.list),o=n.length-1;o>=0;o--){var l=i.findIndexInList(n[o],r,t.dataKey);if(l===r.length-1)break;var a=r[l+1];r[l+1]=r[l],r[l]=a}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"down"})}}}),e.createElement(m,{disabled:c,type:"button",icon:l,onClick:function(e){var n=t.selection;if(n&&n.length){for(var r=P(t.list),o=n.length-1;o>=0;o--){var l=i.findIndexInList(n[o],r,t.dataKey);if(l===r.length-1)break;var a=r.splice(l,1)[0];r.push(a)}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"bottom"})}}}))}));R.displayName="PickListControls";var M=e.memo((function(t){var n=t.template?t.template(t.value):t.value,r=a("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(d,null))}));M.displayName="PickListItem";var D=e.memo(e.forwardRef((function(t,n){var r=e.useRef(null),o=function(e){var n=e.originalEvent,r=e.value,o=P(t.selection),l=i.findIndexInList(r,o,t.dataKey),a=-1!==l;if(t.metaKeySelection){var c=n.metaKey||n.ctrlKey;a&&c?o.splice(l,1):(c||(o.length=0),o.push(r))}else a?o.splice(l,1):o.push(r);t.onSelectionChange&&t.onSelectionChange({event:n,value:o})},l=function(e){var t=e.originalEvent,n=t.currentTarget;switch(t.which){case 40:var r=s(n);r&&r.focus(),t.preventDefault();break;case 38:var l=m(n);l&&l.focus(),t.preventDefault();break;case 13:o(e),t.preventDefault()}},s=function e(t){var n=t.nextElementSibling;return n?u.hasClass(n,"p-picklist-item")?n:e(n):null},m=function e(t){var n=t.previousElementSibling;return n?u.hasClass(n,"p-picklist-item")?n:e(n):null},p=function(e){return-1!==i.findIndexInList(e,t.selection,t.dataKey)},v=function(e){t.onFilter&&t.onFilter({originalEvent:e,value:e.target.value,type:t.type})},f=function(e){13===e.which&&e.preventDefault()};e.useImperativeHandle(n,(function(){return{listElementRef:r}}));var g=a("p-picklist-list-wrapper",t.className),d=t.header?e.createElement("div",{className:"p-picklist-header"},i.getJSXElement(t.header,t)):null,T=function(){var n="p-picklist-filter-icon",r=c.getJSXIcon("source"===t.type?t.sourceFilterIcon||e.createElement(h,{className:n}):t.targetFilterIcon||e.createElement(h,{className:n}),{className:n},{props:t});if(t.showFilter){var o=e.createElement("div",{className:"p-picklist-filter"},e.createElement("input",{type:"text",value:t.filterValue,onChange:v,onKeyDown:f,placeholder:t.placeholder,className:"p-picklist-filter-input p-inputtext p-component"}),e.createElement("span",null," ",r," "));if(t.filterTemplate)o=i.getJSXElement(t.filterTemplate,{className:"p-picklist-filter",inputProps:{className:"p-picklist-filter-input p-inputtext p-component",onChange:v,onKeyDown:f},iconClassName:n,element:o,props:t});return e.createElement("div",{className:"p-picklist-filter-container"},o)}return null}(),y=function(){var n=t.list?t.list.map((function(n){var r=JSON.stringify(n),i=p(n);return e.createElement(M,{key:r,value:n,template:t.itemTemplate,selected:i,onClick:o,onKeyDown:l,tabIndex:t.tabIndex})})):null,r=a("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,T,y)})));D.displayName="PickListSubList";var O=e.memo((function(t){var n=r("(max-width: ".concat(t.breakpoint,")"),t.breakpoint);function o(r){switch(r){case"moveToTargetIcon":return e.createElement(t.moveToTargetIcon||n?p:S,null);case"moveAllToTargetIcon":return e.createElement(t.moveAllToTargetIcon||n?g:I,null);case"moveToSourceIcon":return e.createElement(t.moveToSourceIcon||n?f:T,null);case"moveAllToSourceIcon":return e.createElement(t.moveAllToSourceIcon||n?v:y,null);default:return null}}var l=c.getJSXIcon(o("moveToTargetIcon"),void 0,{props:t,viewChanged:n}),u=c.getJSXIcon(o("moveAllToTargetIcon"),void 0,{props:t,viewChanged:n}),s=c.getJSXIcon(o("moveToSourceIcon"),void 0,{props:t,viewChanged:n}),d=c.getJSXIcon(o("moveAllToSourceIcon"),void 0,{props:t,viewChanged:n}),h=i.isEmpty(t.sourceSelection)||i.isEmpty(t.visibleSourceList),b=i.isEmpty(t.targetSelection)||i.isEmpty(t.visibleTargetList),E=i.isEmpty(t.visibleSourceList),k=i.isEmpty(t.visibleTargetList),w=a("p-picklist-buttons p-picklist-transfer-buttons",t.className);return e.createElement("div",{className:w},e.createElement(m,{disabled:h,type:"button",icon:l,onClick:function(e){var n=t.sourceSelection;if(i.isNotEmpty(n)){for(var r=P(t.target),o=P(t.source),l=0;l<n.length;l++){var a=n[l];-1===i.findIndexInList(a,r,t.dataKey)&&r.push(o.splice(i.findIndexInList(a,o,t.dataKey),1)[0])}t.onTransfer&&t.onTransfer({originalEvent:e,source:o,target:r,direction:"toTarget"})}}}),e.createElement(m,{disabled:E,type:"button",icon:u,onClick:function(e){if(t.source){var n=[].concat(P(t.target),P(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(m,{disabled:b,type:"button",icon:s,onClick:function(e){var n=t.targetSelection;if(i.isNotEmpty(n)){for(var r=P(t.target),o=P(t.source),l=0;l<n.length;l++){var a=n[l];-1===i.findIndexInList(a,o,t.dataKey)&&o.push(r.splice(i.findIndexInList(a,r,t.dataKey),1)[0])}t.onTransfer&&t.onTransfer({originalEvent:e,source:o,target:r,direction:"toSource"})}}}),e.createElement(m,{disabled:k,type:"button",icon:d,onClick:function(e){if(t.source){var n=[].concat(P(t.source),P(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"})}}}))}));O.displayName="PickListTransferControls";var B=e.memo(e.forwardRef((function(r,c){var m=L.getProps(r),p=F(e.useState([]),2),v=p[0],f=p[1],g=F(e.useState([]),2),d=g[0],h=g[1],T=F(e.useState(""),2),y=T[0],I=T[1],S=F(e.useState(""),2),E=S[0],k=S[1],w=F(e.useState(null),2),C=w[0],N=w[1],K=e.useRef(null),x=e.useRef(null),A=e.useRef(null),P=e.useRef(null),M=e.useRef(null),B=e.useRef(null),j=m.sourceSelection?m.sourceSelection:v,H=m.targetSelection?m.targetSelection:d,J=m.onSourceFilterChange?m.sourceFilterValue:y,V=m.onTargetFilterChange?m.targetFilterValue:E,U=i.isNotEmpty(m.filterBy),X=U&&m.showSourceFilter,_=U&&m.showTargetFilter,Y=function(e,t){if(e){var n=u.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){m.onChange&&m.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)&&u.scrollInView(e,-1===t?n[0]:n[n.length-1])},z=function(e,t,n){"sourceSelection"===t?f(e.value):h(e.value),n&&n(e),i.isNotEmpty(j)&&"targetSelection"===t?f([]):i.isNotEmpty(H)&&"sourceSelection"===t&&h([])},G=function(e){var t=e.originalEvent,n=e.value,r=F("source"===e.type?[I,m.onSourceFilterChange]:[k,m.onTargetFilterChange],2),o=r[0],l=r[1];l?l({originalEvent:t,value:n}):o(n)},Q=function(e,t){var n=F("source"===t?[J,W]:[V,Z],2),r=n[0],o=n[1];return U&&i.isNotEmpty(r)?o(r):e},W=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").trim().toLocaleLowerCase(m.filterLocale);return ee(m.source,e)},Z=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").trim().toLocaleLowerCase(m.filterLocale);return ee(m.target,e)},ee=function(e,t){var r=U?m.filterBy.split(","):[];return n.filter(e,r,t,m.filterMatchMode,m.filterLocale)},te=function(){if(!B.current){B.current=u.createInlineStyle(t.nonce);var e="\n@media screen and (max-width: ".concat(m.breakpoint,") {\n    .p-picklist[").concat(C,"] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(C,"] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(C,"] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(C,"] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");B.current.innerHTML=e}};e.useImperativeHandle(c,(function(){return{props:m,getElement:function(){return K.current}}})),o((function(){!C&&N(s())})),l((function(){return C&&(K.current.setAttribute(C,""),te()),function(){B.current=u.removeInlineStyle(B.current)}}),[C,m.breakpoint]),l((function(){P.current&&(Y(P.current,M.current),P.current=null,M.current=null)}));var ne=L.getOtherProps(m),re=a("p-picklist p-component",m.className),oe=m.sourceItemTemplate?m.sourceItemTemplate:m.itemTemplate,le=m.targetItemTemplate?m.targetItemTemplate:m.itemTemplate,ie=Q(m.source,"source"),ae=Q(m.target,"target");return e.createElement("div",b({id:m.id,ref:K,className:re,style:m.style},ne),m.showSourceControls&&e.createElement(R,{list:m.source,selection:j,onReorder:function(e){$(e,e.value,m.target),P.current=x.current.listElementRef.current,M.current=e.direction},className:"p-picklist-source-controls",dataKey:m.dataKey,moveUpIcon:m.moveUpIcon,moveTopIcon:m.moveTopIcon,moveDownIcon:m.moveDownIcon,moveBottomIcon:m.moveBottomIcon}),e.createElement(D,{ref:x,type:"source",list:ie,selection:j,onSelectionChange:function(e){return z(e,"sourceSelection",m.onSourceSelectionChange)},itemTemplate:oe,header:m.sourceHeader,style:m.sourceStyle,className:"p-picklist-source-wrapper",listClassName:"p-picklist-source",metaKeySelection:m.metaKeySelection,tabIndex:m.tabIndex,dataKey:m.dataKey,filterValue:J,onFilter:G,showFilter:X,placeholder:m.sourceFilterPlaceholder,template:m.sourceFilterTemplate,sourceFilterIcon:m.sourceFilterIcon}),e.createElement(O,{onTransfer:function(e){var t=e.originalEvent,n=e.source,r=e.target,o=[];switch(e.direction){case"toTarget":o=j,m.onMoveToTarget&&m.onMoveToTarget({originalEvent:t,value:o});break;case"allToTarget":o=m.source,m.onMoveAllToTarget&&m.onMoveAllToTarget({originalEvent:t,value:o});break;case"toSource":o=H,m.onMoveToSource&&m.onMoveToSource({originalEvent:t,value:o});break;case"allToSource":o=m.target,m.onMoveAllToSource&&m.onMoveAllToSource({originalEvent:t,value:o})}z({originalEvent:t,value:o},"sourceSelection",m.onSourceSelectionChange),z({originalEvent:t,value:o},"targetSelection",m.onTargetSelectionChange),$(e,n,r)},source:m.source,visibleSourceList:ie,target:m.target,breakpoint:m.breakpoint,visibleTargetList:ae,sourceSelection:j,targetSelection:H,dataKey:m.dataKey,moveToTargetIcon:m.moveToTargetIcon,moveAllToTargetIcon:m.moveAllToTargetIcon,moveToSourceIcon:m.moveToSourceIcon,moveAllToSourceIcon:m.moveAllToSourceIcon}),e.createElement(D,{ref:A,type:"target",list:ae,selection:H,onSelectionChange:function(e){return z(e,"targetSelection",m.onTargetSelectionChange)},itemTemplate:le,header:m.targetHeader,style:m.targetStyle,className:"p-picklist-target-wrapper",listClassName:"p-picklist-target",metaKeySelection:m.metaKeySelection,tabIndex:m.tabIndex,dataKey:m.dataKey,filterValue:V,onFilter:G,showFilter:_,placeholder:m.targetFilterPlaceholder,template:m.targetFilterTemplate,targetFilterIcon:m.targetFilterIcon}),m.showTargetControls&&e.createElement(R,{list:m.target,selection:H,onReorder:function(e){$(e,m.source,e.value),P.current=A.current.listElementRef.current,M.current=e.direction},className:"p-picklist-target-controls",dataKey:m.dataKey,moveUpIcon:m.moveUpIcon,moveTopIcon:m.moveTopIcon,moveDownIcon:m.moveDownIcon,moveBottomIcon:m.moveBottomIcon}))})));B.displayName="PickList";export{B as PickList};

package/picklist/picklist.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils, button, ripple) {
+this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils, button, angledown, angledoubleup, angleup, angledoubledown, ripple, search, angleleft, angledoubleleft, angledoubleright, angleright) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -115,6 +115,16 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
       filter: false,
       filterBy: null,
       filterMatchMode: 'contains',
+      targetFilterIcon: null,
+      sourceFilterIcon: null,
+      moveAllToSourceIcon: null,
+      moveToSourceIcon: null,
+      moveAllToTargetIcon: null,
+      moveToTargetIcon: null,
+      moveBottomIcon: null,
+      moveUpIcon: null,
+      moveTopIcon: null,
+      moveDownIcon: null,
       filterLocale: undefined,
       sourceFilterValue: null,
       targetFilterValue: null,
@@ -166,6 +176,10 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
   }
 
   var PickListControls = /*#__PURE__*/React__namespace.memo(function (props) {
+    var moveUpIcon = props.moveUpIcon || /*#__PURE__*/React__namespace.createElement(angleup.AngleUpIcon, null);
+    var moveTopIcon = props.moveTopIcon || /*#__PURE__*/React__namespace.createElement(angledoubleup.AngleDoubleUpIcon, null);
+    var moveDownIcon = props.moveDownIcon || /*#__PURE__*/React__namespace.createElement(angledown.AngleDownIcon, null);
+    var moveBottomIcon = props.moveBottomIcon || /*#__PURE__*/React__namespace.createElement(angledoubledown.AngleDoubleDownIcon, null);
     var moveDisabled = !props.selection || !props.selection.length;
     var moveUp = function moveUp(event) {
       var selectedItems = props.selection;
@@ -269,22 +283,22 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
     }, /*#__PURE__*/React__namespace.createElement(button.Button, {
       disabled: moveDisabled,
       type: "button",
-      icon: "pi pi-angle-up",
+      icon: moveUpIcon,
       onClick: moveUp
     }), /*#__PURE__*/React__namespace.createElement(button.Button, {
       disabled: moveDisabled,
       type: "button",
-      icon: "pi pi-angle-double-up",
+      icon: moveTopIcon,
       onClick: moveTop
     }), /*#__PURE__*/React__namespace.createElement(button.Button, {
       disabled: moveDisabled,
       type: "button",
-      icon: "pi pi-angle-down",
+      icon: moveDownIcon,
       onClick: moveDown
     }), /*#__PURE__*/React__namespace.createElement(button.Button, {
       disabled: moveDisabled,
       type: "button",
-      icon: "pi pi-angle-double-down",
+      icon: moveBottomIcon,
       onClick: moveBottom
     }));
   });
@@ -434,6 +448,17 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
       return null;
     };
     var createFilter = function createFilter() {
+      var iconClassName = 'p-picklist-filter-icon';
+      var icon = props.type === 'source' ? props.sourceFilterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, {
+        className: iconClassName
+      }) : props.targetFilterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, {
+        className: iconClassName
+      });
+      var filterIcon = utils.IconUtils.getJSXIcon(icon, {
+        className: iconClassName
+      }, {
+        props: props
+      });
       if (props.showFilter) {
         var content = /*#__PURE__*/React__namespace.createElement("div", {
           className: "p-picklist-filter"
@@ -444,9 +469,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
           onKeyDown: onFilterInputKeyDown,
           placeholder: props.placeholder,
           className: "p-picklist-filter-input p-inputtext p-component"
-        }), /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-picklist-filter-icon pi pi-search"
-        }));
+        }), /*#__PURE__*/React__namespace.createElement("span", null, " ", filterIcon, " "));
         if (props.filterTemplate) {
           var defaultContentOptions = {
             className: 'p-picklist-filter',
@@ -455,7 +478,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
               onChange: onFilter,
               onKeyDown: onFilterInputKeyDown
             },
-            iconClassName: 'p-picklist-filter-icon pi pi-search',
+            iconClassName: iconClassName,
             element: content,
             props: props
           };
@@ -489,6 +512,37 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
   PickListSubList.displayName = 'PickListSubList';
 
   var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (props) {
+    var viewChanged = hooks.useMatchMedia("(max-width: ".concat(props.breakpoint, ")"), props.breakpoint);
+    function getIconComponent(iconType) {
+      switch (iconType) {
+        case 'moveToTargetIcon':
+          return props.moveToTargetIcon || viewChanged ? /*#__PURE__*/React__namespace.createElement(angledown.AngleDownIcon, null) : /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, null);
+        case 'moveAllToTargetIcon':
+          return props.moveAllToTargetIcon || viewChanged ? /*#__PURE__*/React__namespace.createElement(angledoubledown.AngleDoubleDownIcon, null) : /*#__PURE__*/React__namespace.createElement(angledoubleright.AngleDoubleRightIcon, null);
+        case 'moveToSourceIcon':
+          return props.moveToSourceIcon || viewChanged ? /*#__PURE__*/React__namespace.createElement(angleup.AngleUpIcon, null) : /*#__PURE__*/React__namespace.createElement(angleleft.AngleLeftIcon, null);
+        case 'moveAllToSourceIcon':
+          return props.moveAllToSourceIcon || viewChanged ? /*#__PURE__*/React__namespace.createElement(angledoubleup.AngleDoubleUpIcon, null) : /*#__PURE__*/React__namespace.createElement(angledoubleleft.AngleDoubleLeftIcon, null);
+        default:
+          return null;
+      }
+    }
+    var moveToTargetIcon = utils.IconUtils.getJSXIcon(getIconComponent('moveToTargetIcon'), undefined, {
+      props: props,
+      viewChanged: viewChanged
+    });
+    var moveAllToTargetIcon = utils.IconUtils.getJSXIcon(getIconComponent('moveAllToTargetIcon'), undefined, {
+      props: props,
+      viewChanged: viewChanged
+    });
+    var moveToSourceIcon = utils.IconUtils.getJSXIcon(getIconComponent('moveToSourceIcon'), undefined, {
+      props: props,
+      viewChanged: viewChanged
+    });
+    var moveAllToSourceIcon = utils.IconUtils.getJSXIcon(getIconComponent('moveAllToSourceIcon'), undefined, {
+      props: props,
+      viewChanged: viewChanged
+    });
     var moveRightDisabled = utils.ObjectUtils.isEmpty(props.sourceSelection) || utils.ObjectUtils.isEmpty(props.visibleSourceList);
     var moveLeftDisabled = utils.ObjectUtils.isEmpty(props.targetSelection) || utils.ObjectUtils.isEmpty(props.visibleTargetList);
     var moveAllRightDisabled = utils.ObjectUtils.isEmpty(props.visibleSourceList);
@@ -577,22 +631,22 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
     }, /*#__PURE__*/React__namespace.createElement(button.Button, {
       disabled: moveRightDisabled,
       type: "button",
-      icon: "pi pi-angle-right",
+      icon: moveToTargetIcon,
       onClick: moveRight
     }), /*#__PURE__*/React__namespace.createElement(button.Button, {
       disabled: moveAllRightDisabled,
       type: "button",
-      icon: "pi pi-angle-double-right",
+      icon: moveAllToTargetIcon,
       onClick: moveAllRight
     }), /*#__PURE__*/React__namespace.createElement(button.Button, {
       disabled: moveLeftDisabled,
       type: "button",
-      icon: "pi pi-angle-left",
+      icon: moveToSourceIcon,
       onClick: moveLeft
     }), /*#__PURE__*/React__namespace.createElement(button.Button, {
       disabled: moveAllLeftDisabled,
       type: "button",
-      icon: "pi pi-angle-double-left",
+      icon: moveAllToSourceIcon,
       onClick: moveAllLeft
     }));
   });
@@ -787,7 +841,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
     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");
+        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");
         styleElementRef.current.innerHTML = innerHTML;
       }
     };
@@ -837,7 +891,11 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
       selection: sourceSelection,
       onReorder: onSourceReorder,
       className: "p-picklist-source-controls",
-      dataKey: props.dataKey
+      dataKey: props.dataKey,
+      moveUpIcon: props.moveUpIcon,
+      moveTopIcon: props.moveTopIcon,
+      moveDownIcon: props.moveDownIcon,
+      moveBottomIcon: props.moveBottomIcon
     }), /*#__PURE__*/React__namespace.createElement(PickListSubList, {
       ref: sourceListElementRef,
       type: "source",
@@ -858,16 +916,22 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
       onFilter: onFilter,
       showFilter: showSourceFilter,
       placeholder: props.sourceFilterPlaceholder,
-      template: props.sourceFilterTemplate
+      template: props.sourceFilterTemplate,
+      sourceFilterIcon: props.sourceFilterIcon
     }), /*#__PURE__*/React__namespace.createElement(PickListTransferControls, {
       onTransfer: onTransfer,
       source: props.source,
       visibleSourceList: sourceList,
       target: props.target,
+      breakpoint: props.breakpoint,
       visibleTargetList: targetList,
       sourceSelection: sourceSelection,
       targetSelection: targetSelection,
-      dataKey: props.dataKey
+      dataKey: props.dataKey,
+      moveToTargetIcon: props.moveToTargetIcon,
+      moveAllToTargetIcon: props.moveAllToTargetIcon,
+      moveToSourceIcon: props.moveToSourceIcon,
+      moveAllToSourceIcon: props.moveAllToSourceIcon
     }), /*#__PURE__*/React__namespace.createElement(PickListSubList, {
       ref: targetListElementRef,
       type: "target",
@@ -888,13 +952,18 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
       onFilter: onFilter,
       showFilter: showTargetFilter,
       placeholder: props.targetFilterPlaceholder,
-      template: props.targetFilterTemplate
+      template: props.targetFilterTemplate,
+      targetFilterIcon: props.targetFilterIcon
     }), props.showTargetControls && /*#__PURE__*/React__namespace.createElement(PickListControls, {
       list: props.target,
       selection: targetSelection,
       onReorder: onTargetReorder,
       className: "p-picklist-target-controls",
-      dataKey: props.dataKey
+      dataKey: props.dataKey,
+      moveUpIcon: props.moveUpIcon,
+      moveTopIcon: props.moveTopIcon,
+      moveDownIcon: props.moveDownIcon,
+      moveBottomIcon: props.moveBottomIcon
     }));
   }));
   PickList.displayName = 'PickList';
@@ -905,4 +974,4 @@ this.primereact.picklist = (function (exports, React, PrimeReact, hooks, utils,
 
   return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.utils, primereact.button, primereact.ripple);
+})({}, React, primereact.api, primereact.hooks, primereact.utils, primereact.button, primereact.icons/angledown, primereact.icons/angledoubleup, primereact.icons/angleup, primereact.icons/angledoubledown, primereact.ripple, primereact.icons/search, primereact.icons/angleleft, primereact.icons/angledoubleleft, primereact.icons/angledoubleright, primereact.icons/angleright);