primereact 9.4.0 → 9.6.0

package/orderlist/orderlist.cjs.min.js

@@ -1 +1 @@
-"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"),o=require("primereact/icons/angledown"),i=require("primereact/icons/angledoubleup"),a=require("primereact/icons/angleup"),c=require("primereact/icons/angledoubledown"),u=require("primereact/ripple"),s=require("primereact/icons/search");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(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 f=p(e),m=d(t);function v(){return v=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},v.apply(this,arguments)}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 h(e){if(Array.isArray(e))return g(e)}function b(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function y(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 I(){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 h(e)||b(e)||y(e)||I()}function D(e){if(Array.isArray(e))return e}function O(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,o,i,a=[],c=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=o.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){u=!0,l=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw l}}return a}}function w(){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 C(e,t){return D(e)||O(e,t)||y(e,t)||w()}var x={defaultProps:{__TYPE:"OrderList",id:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,filterIcon:null,moveUpIcon:null,moveTopIcon:null,moveDownIcon:null,moveBottomIcon:null,dataKey:null,breakpoint:"960px",onChange:null,itemTemplate:null,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,filterPlaceholder:null,filterTemplate:null,onFilter:null,children:void 0},getProps:function(e){return r.ObjectUtils.getMergedProps(e,x.defaultProps)},getOtherProps:function(e){return r.ObjectUtils.getDiffProps(e,x.defaultProps)}},S=f.memo((function(e){var t=e.moveUpIcon||f.createElement(a.AngleUpIcon,null),n=e.moveTopIcon||f.createElement(i.AngleDoubleUpIcon,null),u=e.moveDownIcon||f.createElement(o.AngleDownIcon,null),s=e.moveBottomIcon||f.createElement(c.AngleDoubleDownIcon,null);return f.createElement("div",{className:"p-orderlist-controls"},f.createElement(l.Button,{type:"button",icon:t,onClick:function(t){if(e.selection){for(var n=E(e.value),l=0;l<e.selection.length;l++){var o=r.ObjectUtils.findIndexInList(e.selection[l],n,e.dataKey);if(0===o)break;var i=n[o-1];n[o-1]=n[o],n[o]=i}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"up"})}}}),f.createElement(l.Button,{type:"button",icon:n,onClick:function(t){if(e.selection){for(var n=E(e.value),l=0;l<e.selection.length;l++){var o=r.ObjectUtils.findIndexInList(e.selection[l],n,e.dataKey);if(0===o)break;var i=n.splice(o,1)[0];n.unshift(i)}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"top"})}}}),f.createElement(l.Button,{type:"button",icon:u,onClick:function(t){if(e.selection){for(var n=E(e.value),l=e.selection.length-1;l>=0;l--){var o=r.ObjectUtils.findIndexInList(e.selection[l],n,e.dataKey);if(o===n.length-1)break;var i=n[o+1];n[o+1]=n[o],n[o]=i}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"down"})}}}),f.createElement(l.Button,{type:"button",icon:s,onClick:function(t){if(e.selection){for(var n=E(e.value),l=e.selection.length-1;l>=0;l--){var o=r.ObjectUtils.findIndexInList(e.selection[l],n,e.dataKey);if(o===n.length-1)break;var i=n.splice(o,1)[0];n.push(i)}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"bottom"})}}}))}));S.displayName="OrderListControls";var j=f.memo((function(e){var t,n=f.useRef(null),l=f.useRef(null),o=f.useRef(null),i=f.useRef(null),a={filter:function(t){return e.onFilterInputChange(t)},reset:function(){return e.resetFilter()}},c=function(t){return-1!==r.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},d=function(e,t){l.current!==t&&l.current+1!==t&&(o.current=t,r.DomHandler.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},p=function(e){o.current=null,r.DomHandler.removeClass(e.target,"p-orderlist-droppoint-highlight")},m=function(t){var n=l.current>o.current?o.current:0===o.current?0:o.current-1,i=E(e.value);r.ObjectUtils.reorderArray(i,l.current,n),o.current=null,r.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),e.onChange&&e.onChange({originalEvent:t,value:i})},v=function(e){n.current=!1},g=function(e){if(n.current){var t=i.current.getBoundingClientRect().top+r.DomHandler.getWindowScrollTop(),l=t+i.current.clientHeight-e.pageY,o=e.pageY-t;l<25&&l>0?i.current.scrollTop+=15:o<25&&o>0&&(i.current.scrollTop-=15)}},h=function(e){13===e.which&&e.preventDefault()},b=function(e,t){return f.createElement("li",{key:t,className:"p-orderlist-droppoint",onDragOver:function(t){return d(t,e+1)},onDragLeave:p,onDrop:m})},y=e.header?f.createElement("div",{className:"p-orderlist-header"},e.header):null,I=function(){var t="p-orderlist-filter",n=r.IconUtils.getJSXIcon(e.filterIcon||f.createElement(s.SearchIcon,{className:t}),{className:t},{props:e});if(e.filter){var l=f.createElement("div",{className:"p-orderlist-filter"},f.createElement("input",{type:"text",value:e.filterValue,onChange:e.onFilter,onKeyDown:h,placeholder:e.placeholder,className:"p-orderlist-filter-input p-inputtext p-component"}),f.createElement("span",{className:"p-orderlist-filter-icon"},n));if(e.filterTemplate)l=r.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-orderlist-filter",inputProps:{inputClassName:"p-orderlist-filter-input p-inputtext p-component",onChange:e.onFilter,onKeyDown:h},filterOptions:a,iconClassName:"p-orderlist-filter-icon",element:l,props:e});return f.createElement("div",{className:"p-orderlist-filter-container"},l)}return null}(),D=(t=e.value?e.value.map((function(t,o){var i=e.itemTemplate?e.itemTemplate(t):t,a=r.classNames("p-orderlist-item",{"p-highlight":c(t)},e.className),s=JSON.stringify(t);if(e.dragdrop){var d=[];return 0===o&&d.push(b(t,o)),d.push(f.createElement("li",{key:s,className:a,onClick:function(n){return e.onItemClick({originalEvent:n,value:t,index:o})},onKeyDown:function(n){return e.onItemKeyDown({originalEvent:n,value:t,index:o})},role:"option","aria-selected":c(t),draggable:"true",onDragStart:function(t){return r=t,i=o,n.current=!0,l.current=i,void(e.dragdropScope&&r.dataTransfer.setData("text","orderlist"));var r,i},onDragEnd:v,tabIndex:e.tabIndex},i,f.createElement(u.Ripple,null))),d.push(b(o,s+"_droppoint")),d}return f.createElement("li",{key:s,className:a,role:"option","aria-selected":c(t),onClick:function(n){return e.onItemClick({originalEvent:n,value:t,index:o})},onKeyDown:function(n){return e.onItemKeyDown({originalEvent:n,value:t,index:o})},tabIndex:e.tabIndex},i)})):null,f.createElement("ul",{ref:i,className:"p-orderlist-list",style:e.listStyle,onDragOver:g,role:"listbox","aria-multiselectable":!0},t));return f.createElement("div",{className:"p-orderlist-list-container"},y,I,D)}));j.displayName="OrderListSubList";var N=f.memo(f.forwardRef((function(e,l){var o=x.getProps(e),i=C(f.useState([]),2),a=i[0],c=i[1],u=C(f.useState(""),2),s=u[0],d=u[1],p=C(f.useState(null),2),g=p[0],h=p[1],b=r.ObjectUtils.isNotEmpty(s),y=f.useRef(null),I=f.useRef(null),D=f.useRef(null),O=function(e){var t,n=e.originalEvent.metaKey||e.originalEvent.ctrlKey,l=r.ObjectUtils.findIndexInList(e.value,a,o.dataKey);t=-1!==l?n?a.filter((function(e,t){return t!==l})):[e.value]:n?[].concat(E(a),[e.value]):[e.value],c(t)},w=function e(t){var n=t.nextElementSibling;return n?r.DomHandler.hasClass(n,"p-orderlist-item")?n:e(n):null},N=function e(t){var n=t.previousElementSibling;return n?r.DomHandler.hasClass(n,"p-orderlist-item")?n:e(n):null},k=function(){var e=r.DomHandler.findSingle(y.current,".p-orderlist-list"),t=r.DomHandler.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(D.current){case"up":r.DomHandler.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":r.DomHandler.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}},T=function(){if(!I.current){I.current=r.DomHandler.createInlineStyle(m.default.nonce);var e="\n@media screen and (max-width: ".concat(o.breakpoint,") {\n    .p-orderlist[").concat(g,"] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[").concat(g,"] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[").concat(g,"] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[").concat(g,"] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");I.current.innerHTML=e}};f.useImperativeHandle(l,(function(){return{props:o,getElement:function(){return y.current}}})),n.useMountEffect((function(){!g&&h(r.UniqueComponentId())})),n.useUpdateEffect((function(){return g&&(y.current.setAttribute(g,""),T()),function(){I.current=r.DomHandler.removeInlineStyle(I.current)}}),[g,o.breakpoint]),n.useUpdateEffect((function(){D.current&&(k(),D.current=null)}));var U=x.getOtherProps(o),K=r.classNames("p-orderlist p-component",o.className),L=function(){if(b){var e=s.trim().toLocaleLowerCase(o.filterLocale),n=o.filterBy?o.filterBy.split(","):[];return t.FilterService.filter(o.value,n,e,o.filterMatchMode,o.filterLocale)}return o.value}();return f.createElement("div",v({ref:y,id:o.id,className:K,style:o.style},U),f.createElement(S,{value:L,selection:a,onReorder:function(e){o.onChange&&o.onChange({event:e.originalEvent,value:e.value}),D.current=e.direction},dataKey:o.dataKey,moveUpIcon:o.moveUpIcon,moveTopIcon:o.moveTopIcon,moveDownIcon:o.moveDownIcon,moveBottomIcon:o.moveBottomIcon}),f.createElement(j,{value:L,selection:a,onItemClick:O,onItemKeyDown:function(e){var t=e.originalEvent,n=t.currentTarget;switch(t.which){case 40:var r=w(n);r&&r.focus(),t.preventDefault();break;case 38:var l=N(n);l&&l.focus(),t.preventDefault();break;case 13:O(e),t.preventDefault()}},onFilterInputChange:function(e){var t=e.target.value;d(t),o.onFilter&&o.onFilter({originalEvent:e,filter:t})},itemTemplate:o.itemTemplate,filter:o.filter,onFilter:function(e){var t=e.target.value;d(t),o.onFilter&&o.onFilter({originalEvent:e,value:t})},resetFilter:function(){d(""),o.onFilter&&o.onFilter({filter:""})},filterTemplate:o.filterTemplate,header:o.header,listStyle:o.listStyle,dataKey:o.dataKey,dragdrop:o.dragdrop,onChange:o.onChange,tabIndex:o.tabIndex,filterIcon:o.filterIcon}))})));N.displayName="OrderList",exports.OrderList=N;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/hooks"),n=require("primereact/utils"),o=require("primereact/componentbase"),l=require("primereact/button"),i=require("primereact/icons/angledoubledown"),a=require("primereact/icons/angledoubleup"),c=require("primereact/icons/angledown"),u=require("primereact/icons/angleup"),s=require("primereact/icons/search"),p=require("primereact/ripple");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(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 d=f(e),v=m(t);function g(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 b(e){if(Array.isArray(e))return g(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function h(e,t){if(e){if("string"==typeof e)return g(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)?g(e,t):void 0}}function I(){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)||y(e)||h(e)||I()}function O(e){if(Array.isArray(e))return e}function w(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l,i,a=[],c=!0,u=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=l.call(r)).done)&&(a.push(n.value),a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(u)throw o}}return a}}function D(){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 S(e,t){return O(e)||w(e,t)||h(e,t)||D()}var j=o.ComponentBase.extend({defaultProps:{__TYPE:"OrderList",id:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,filterIcon:null,moveUpIcon:null,moveTopIcon:null,moveDownIcon:null,moveBottomIcon:null,dataKey:null,breakpoint:"960px",onChange:null,itemTemplate:null,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,filterPlaceholder:null,filterTemplate:null,onFilter:null,children:void 0}}),P=d.memo((function(e){var r=e.moveUpIcon||d.createElement(u.AngleUpIcon,null),o=e.moveTopIcon||d.createElement(a.AngleDoubleUpIcon,null),s=e.moveDownIcon||d.createElement(c.AngleDownIcon,null),p=e.moveBottomIcon||d.createElement(i.AngleDoubleDownIcon,null),m=n.mergeProps({className:"p-orderlist-controls"},e.ptm("control")),f=n.mergeProps({type:"button",icon:r,onClick:function(t){if(e.selection){for(var r=E(e.value),o=0;o<e.selection.length;o++){var l=n.ObjectUtils.findIndexInList(e.selection[o],r,e.dataKey);if(0===l)break;var i=r[l-1];r[l-1]=r[l],r[l]=i}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"up"})}},"aria-label":t.ariaLabel("moveUp")},e.ptm("moveUpButton")),v=n.mergeProps({type:"button",icon:o,onClick:function(t){if(e.selection){for(var r=E(e.value),o=0;o<e.selection.length;o++){var l=n.ObjectUtils.findIndexInList(e.selection[o],r,e.dataKey);if(0===l)break;var i=r.splice(l,1)[0];r.unshift(i)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"top"})}},"aria-label":t.ariaLabel("moveTop")},e.ptm("moveTopButton")),g=n.mergeProps({type:"button",icon:s,onClick:function(t){if(e.selection){for(var r=E(e.value),o=e.selection.length-1;o>=0;o--){var l=n.ObjectUtils.findIndexInList(e.selection[o],r,e.dataKey);if(l===r.length-1)break;var i=r[l+1];r[l+1]=r[l],r[l]=i}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"down"})}},"aria-label":t.ariaLabel("moveDown")},e.ptm("moveDownButton")),b=n.mergeProps({type:"button",icon:p,onClick:function(t){if(e.selection){for(var r=E(e.value),o=e.selection.length-1;o>=0;o--){var l=n.ObjectUtils.findIndexInList(e.selection[o],r,e.dataKey);if(l===r.length-1)break;var i=r.splice(l,1)[0];r.push(i)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"bottom"})}},"aria-label":t.ariaLabel("moveBottom")},e.ptm("moveBottomButton"));return d.createElement("div",m,d.createElement(l.Button,f),d.createElement(l.Button,v),d.createElement(l.Button,g),d.createElement(l.Button,b))}));function C(e){return C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},C(e)}function x(e,t){if("object"!==C(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==C(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function T(e){var t=x(e,"string");return"symbol"===C(t)?t:String(t)}function k(e,t,r){return(t=T(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function N(){return N=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},N.apply(this,arguments)}function L(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function U(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?L(Object(r),!0).forEach((function(t){k(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}P.displayName="OrderListControls";var K=d.memo((function(e){var t,r,o,l=function(t,r){return e.ptm(r,{context:{selected:f(t)}})},i=d.useRef(null),a=d.useRef(null),c=d.useRef(null),u=d.useRef(null),m={filter:function(t){return e.onFilterInputChange(t)},reset:function(){return e.resetFilter()}},f=function(t){return-1!==n.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},v=function(e,t){a.current!==t&&a.current+1!==t&&(c.current=t,n.DomHandler.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},g=function(e){c.current=null,n.DomHandler.removeClass(e.target,"p-orderlist-droppoint-highlight")},b=function(t){var r=a.current>c.current?c.current:0===c.current?0:c.current-1,o=E(e.value);n.ObjectUtils.reorderArray(o,a.current,r),c.current=null,n.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),e.onChange&&e.onChange({originalEvent:t,value:o})},y=function(e){i.current=!1},h=function(e){if(i.current){var t=u.current.getBoundingClientRect().top+n.DomHandler.getWindowScrollTop(),r=t+u.current.clientHeight-e.pageY,o=e.pageY-t;r<25&&r>0?u.current.scrollTop+=15:o<25&&o>0&&(u.current.scrollTop-=15)}},I=function(e){13===e.which&&e.preventDefault()},O=function(t,r){var o=n.mergeProps({className:"p-orderlist-droppoint",onDragOver:function(e){return v(e,t+1)},onDragLeave:g,onDrop:b},e.ptm("droppoint"));return d.createElement("li",N({key:r},o))},w=(t=n.mergeProps({className:"p-orderlist-header"},e.ptm("header")),e.header?d.createElement("div",t,e.header):null),D=function(){var t=n.mergeProps({className:"p-orderlist-filter"},e.ptm("icon")),r=n.IconUtils.getJSXIcon(e.filterIcon||d.createElement(s.SearchIcon,t),U({},t),{props:e});if(e.filter){var o=n.mergeProps({className:"p-orderlist-filter"},e.ptm("filter")),l=n.mergeProps({type:"text",value:e.filterValue,onChange:e.onFilter,onKeyDown:I,placeholder:e.placeholder,className:"p-orderlist-filter-input p-inputtext p-component"},e.ptm("filterInput")),i=n.mergeProps({className:"p-orderlist-filter-icon"},e.ptm("filterIcon")),a=d.createElement("div",o,d.createElement("input",l),d.createElement("span",i,r));if(e.filterTemplate)a=n.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-orderlist-filter",inputProps:{inputClassName:"p-orderlist-filter-input p-inputtext p-component",onChange:e.onFilter,onKeyDown:I},filterOptions:m,iconClassName:"p-orderlist-filter-icon",element:a,props:e});var c=n.mergeProps({className:"p-orderlist-filter-container"},e.ptm("filterContainer"));return d.createElement("div",c,a)}return null}(),S=(r=e.value?e.value.map((function(t,r){var o=e.itemTemplate?e.itemTemplate(t):t,c=n.classNames("p-orderlist-item",{"p-highlight":f(t)},e.className),u=JSON.stringify(t),s=n.mergeProps({className:c,onClick:function(n){return e.onItemClick({originalEvent:n,value:t,index:r})},onKeyDown:function(n){return e.onItemKeyDown({originalEvent:n,value:t,index:r})},role:"option","aria-selected":f(t),draggable:"true",onDragStart:function(t){return n=t,o=r,i.current=!0,a.current=o,void(e.dragdropScope&&n.dataTransfer.setData("text","orderlist"));var n,o},onDragEnd:y,tabIndex:e.tabIndex},l(t,"item"));if(e.dragdrop){var m=[];return 0===r&&m.push(O(t,r)),m.push(d.createElement("li",N({key:u},s),o,d.createElement(p.Ripple,null))),m.push(O(r,u+"_droppoint")),m}var v=n.mergeProps({className:c,onClick:function(n){return e.onItemClick({originalEvent:n,value:t,index:r})},onKeyDown:function(n){return e.onItemKeyDown({originalEvent:n,value:t,index:r})},role:"option","aria-selected":f(t),tabIndex:e.tabIndex},l(t,"item"));return d.createElement("li",N({key:u},v),o)})):null,o=n.mergeProps({ref:u,className:"p-orderlist-list",style:e.listStyle,onDragOver:h,role:"listbox","aria-multiselectable":!0},e.ptm("list")),d.createElement("ul",o,r)),j=n.mergeProps({className:"p-orderlist-list-container"},e.ptm("container"));return d.createElement("div",j,w,D,S)}));K.displayName="OrderListSubList";var R=d.memo(d.forwardRef((function(e,o){var l=d.useContext(t.PrimeReactContext),i=j.getProps(e,l),a=S(d.useState([]),2),c=a[0],u=a[1],s=S(d.useState(""),2),p=s[0],m=s[1],f=S(d.useState(null),2),g=f[0],b=f[1],y=n.ObjectUtils.isNotEmpty(p),h=d.useRef(null),I=d.useRef(null),O=d.useRef(null),w=j.setMetaData({props:i,state:{selection:c,filterValue:p,attributeSelector:g}}).ptm,D=function(e){var t,r=e.originalEvent.metaKey||e.originalEvent.ctrlKey,o=n.ObjectUtils.findIndexInList(e.value,c,i.dataKey);t=-1!==o?r?c.filter((function(e,t){return t!==o})):[e.value]:r?[].concat(E(c),[e.value]):[e.value],u(t)},C=function e(t){var r=t.nextElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},x=function e(t){var r=t.previousElementSibling;return r?n.DomHandler.hasClass(r,"p-orderlist-item")?r:e(r):null},T=function(){var e=n.DomHandler.findSingle(h.current,".p-orderlist-list"),t=n.DomHandler.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(O.current){case"up":n.DomHandler.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":n.DomHandler.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}},k=function(){if(!I.current){I.current=n.DomHandler.createInlineStyle(l&&l.nonce||v.default.nonce);var e="\n@media screen and (max-width: ".concat(i.breakpoint,") {\n    .p-orderlist[").concat(g,"] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[").concat(g,"] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[").concat(g,"] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[").concat(g,"] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");I.current.innerHTML=e}};d.useImperativeHandle(o,(function(){return{props:i,getElement:function(){return h.current}}})),r.useMountEffect((function(){!g&&b(n.UniqueComponentId())})),r.useUpdateEffect((function(){return g&&(h.current.setAttribute(g,""),k()),function(){I.current=n.DomHandler.removeInlineStyle(I.current)}}),[g,i.breakpoint]),r.useUpdateEffect((function(){O.current&&(T(),O.current=null)}));var N=n.classNames("p-orderlist p-component",i.className),L=function(){if(y){var e=p.trim().toLocaleLowerCase(i.filterLocale),r=i.filterBy?i.filterBy.split(","):[];return t.FilterService.filter(i.value,r,e,i.filterMatchMode,i.filterLocale)}return i.value}(),U=n.mergeProps({ref:h,id:i.id,className:N,style:i.style},j.getOtherProps(i),w("root"));return d.createElement("div",U,d.createElement(P,{value:L,selection:c,onReorder:function(e){i.onChange&&i.onChange({event:e.originalEvent,value:e.value}),O.current=e.direction},dataKey:i.dataKey,moveUpIcon:i.moveUpIcon,moveTopIcon:i.moveTopIcon,moveDownIcon:i.moveDownIcon,moveBottomIcon:i.moveBottomIcon,ptm:w}),d.createElement(K,{value:L,selection:c,onItemClick:D,onItemKeyDown:function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=C(r);n&&n.focus(),t.preventDefault();break;case 38:var o=x(r);o&&o.focus(),t.preventDefault();break;case 13:D(e),t.preventDefault()}},onFilterInputChange:function(e){var t=e.target.value;m(t),i.onFilter&&i.onFilter({originalEvent:e,filter:t})},itemTemplate:i.itemTemplate,filter:i.filter,onFilter:function(e){var t=e.target.value;m(t),i.onFilter&&i.onFilter({originalEvent:e,value:t})},resetFilter:function(){m(""),i.onFilter&&i.onFilter({filter:""})},filterTemplate:i.filterTemplate,header:i.header,listStyle:i.listStyle,dataKey:i.dataKey,dragdrop:i.dragdrop,onChange:i.onChange,tabIndex:i.tabIndex,filterIcon:i.filterIcon,ptm:w}))})));R.displayName="OrderList",exports.OrderList=R;

package/orderlist/orderlist.d.ts

@@ -8,7 +8,118 @@
  *
  */
 import * as React from 'react';
-import { IconType } from '../utils/utils';
+import { ButtonPassThroughOptions } from '../button/button';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type OrderListPassThroughType<T> = PassThroughType<T, OrderListPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OrderListPassThroughMethodOptions {
+    props: OrderListProps;
+    state: OrderListState;
+    context: OrderListContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OrderListProps.pt}
+ */
+export interface OrderListPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the controls' DOM element.
+     */
+    controls?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveUpButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveTopButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveDownButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveBottomButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: OrderListPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: OrderListPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    droppoint?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    icon?: OrderListPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    filterInput?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    filterIcon?: OrderListPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    filter?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    filterContainer?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in OrderList component.
+ */
+export interface OrderListState {
+    /**
+     * Current selection state as a boolean.
+     */
+    selection: [];
+    /**
+     * Current filter value as a string.s
+     */
+    filterValue: string;
+    /**
+     * Current attribute selector state as a string.
+     */
+    attributeSelector: string;
+}
+
+/**
+ * Defines current options in OrderList component.
+ */
+export interface OrderListContext {
+    /**
+     * Current selection state of the item as a boolean.
+     */
+    selected: boolean;
+}
 
 /**
  * Custom change event.
@@ -44,7 +155,7 @@ interface OrderListFilterOptions {
  * Defines valid properties in OrderList component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
     /**
      * An array of objects to reorder.
      */
@@ -134,6 +245,11 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OrderListPassThroughOptions}
+     */
+    pt?: OrderListPassThroughOptions;
 }
 
 /**

package/orderlist/orderlist.esm.js

@@ -1,29 +1,15 @@
 import * as React from 'react';
-import PrimeReact, { FilterService } from 'primereact/api';
+import PrimeReact, { ariaLabel, PrimeReactContext, FilterService } from 'primereact/api';
 import { useMountEffect, useUpdateEffect } from 'primereact/hooks';
-import { ObjectUtils, IconUtils, DomHandler, classNames, UniqueComponentId } from 'primereact/utils';
+import { mergeProps, ObjectUtils, IconUtils, DomHandler, classNames, UniqueComponentId } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { Button } from 'primereact/button';
-import { AngleDownIcon } from 'primereact/icons/angledown';
+import { AngleDoubleDownIcon } from 'primereact/icons/angledoubledown';
 import { AngleDoubleUpIcon } from 'primereact/icons/angledoubleup';
+import { AngleDownIcon } from 'primereact/icons/angledown';
 import { AngleUpIcon } from 'primereact/icons/angleup';
-import { AngleDoubleDownIcon } from 'primereact/icons/angledoubledown';
-import { Ripple } from 'primereact/ripple';
 import { SearchIcon } from 'primereact/icons/search';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+import { Ripple } from 'primereact/ripple';
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -96,7 +82,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var OrderListBase = {
+var OrderListBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'OrderList',
     id: null,
@@ -124,14 +110,8 @@ var OrderListBase = {
     filterTemplate: null,
     onFilter: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, OrderListBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, OrderListBase.defaultProps);
   }
-};
+});
 
 var OrderListControls = /*#__PURE__*/React.memo(function (props) {
   var moveUpIcon = props.moveUpIcon || /*#__PURE__*/React.createElement(AngleUpIcon, null);
@@ -230,29 +210,103 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
       }
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "p-orderlist-controls"
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "button",
+  var controlProps = mergeProps({
+    className: 'p-orderlist-controls'
+  }, props.ptm('control'));
+  var moveUpButtonProps = mergeProps({
+    type: 'button',
     icon: moveUpIcon,
-    onClick: moveUp
-  }), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
+    onClick: moveUp,
+    'aria-label': ariaLabel('moveUp')
+  }, props.ptm('moveUpButton'));
+  var moveTopButtonProps = mergeProps({
+    type: 'button',
     icon: moveTopIcon,
-    onClick: moveTop
-  }), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
+    onClick: moveTop,
+    'aria-label': ariaLabel('moveTop')
+  }, props.ptm('moveTopButton'));
+  var moveDownButtonProps = mergeProps({
+    type: 'button',
     icon: moveDownIcon,
-    onClick: moveDown
-  }), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
+    onClick: moveDown,
+    'aria-label': ariaLabel('moveDown')
+  }, props.ptm('moveDownButton'));
+  var moveBottomButtonProps = mergeProps({
+    type: 'button',
     icon: moveBottomIcon,
-    onClick: moveBottom
-  }));
+    onClick: moveBottom,
+    'aria-label': ariaLabel('moveBottom')
+  }, props.ptm('moveBottomButton'));
+  return /*#__PURE__*/React.createElement("div", controlProps, /*#__PURE__*/React.createElement(Button, moveUpButtonProps), /*#__PURE__*/React.createElement(Button, moveTopButtonProps), /*#__PURE__*/React.createElement(Button, moveDownButtonProps), /*#__PURE__*/React.createElement(Button, moveBottomButtonProps));
 });
 OrderListControls.displayName = 'OrderListControls';
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
+  var getPTOptions = function getPTOptions(item, key) {
+    return props.ptm(key, {
+      context: {
+        selected: isSelected(item)
+      }
+    });
+  };
   var dragging = React.useRef(null);
   var draggedItemIndex = React.useRef(null);
   var dragOverItemIndex = React.useRef(null);
@@ -317,20 +371,23 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var createDropPoint = function createDropPoint(index, key) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: key,
-      className: "p-orderlist-droppoint",
+    var droppointProps = mergeProps({
+      className: 'p-orderlist-droppoint',
       onDragOver: function onDragOver(e) {
         return _onDragOver(e, index + 1);
       },
       onDragLeave: onDragLeave,
       onDrop: onDrop
-    });
+    }, props.ptm('droppoint'));
+    return /*#__PURE__*/React.createElement("li", _extends({
+      key: key
+    }, droppointProps));
   };
   var createHeader = function createHeader() {
-    return props.header ? /*#__PURE__*/React.createElement("div", {
-      className: "p-orderlist-header"
-    }, props.header) : null;
+    var headerProps = mergeProps({
+      className: 'p-orderlist-header'
+    }, props.ptm('header'));
+    return props.header ? /*#__PURE__*/React.createElement("div", headerProps, props.header) : null;
   };
   var createItems = function createItems() {
     if (props.value) {
@@ -340,45 +397,44 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
           'p-highlight': isSelected(item)
         }, props.className);
         var key = JSON.stringify(item);
+        var itemProps = mergeProps({
+          className: itemClassName,
+          onClick: function onClick(e) {
+            return props.onItemClick({
+              originalEvent: e,
+              value: item,
+              index: i
+            });
+          },
+          onKeyDown: function onKeyDown(e) {
+            return props.onItemKeyDown({
+              originalEvent: e,
+              value: item,
+              index: i
+            });
+          },
+          role: 'option',
+          'aria-selected': isSelected(item),
+          draggable: 'true',
+          onDragStart: function onDragStart(e) {
+            return _onDragStart(e, i);
+          },
+          onDragEnd: onDragEnd,
+          tabIndex: props.tabIndex
+        }, getPTOptions(item, 'item'));
         if (props.dragdrop) {
           var items = [];
           if (i === 0) {
             items.push(createDropPoint(item, i));
           }
-          items.push( /*#__PURE__*/React.createElement("li", {
-            key: key,
-            className: itemClassName,
-            onClick: function onClick(e) {
-              return props.onItemClick({
-                originalEvent: e,
-                value: item,
-                index: i
-              });
-            },
-            onKeyDown: function onKeyDown(e) {
-              return props.onItemKeyDown({
-                originalEvent: e,
-                value: item,
-                index: i
-              });
-            },
-            role: "option",
-            "aria-selected": isSelected(item),
-            draggable: "true",
-            onDragStart: function onDragStart(e) {
-              return _onDragStart(e, i);
-            },
-            onDragEnd: onDragEnd,
-            tabIndex: props.tabIndex
-          }, content, /*#__PURE__*/React.createElement(Ripple, null)));
+          items.push( /*#__PURE__*/React.createElement("li", _extends({
+            key: key
+          }, itemProps), content, /*#__PURE__*/React.createElement(Ripple, null)));
           items.push(createDropPoint(i, key + '_droppoint'));
           return items;
         } else {
-          return /*#__PURE__*/React.createElement("li", {
-            key: key,
+          var _itemProps = mergeProps({
             className: itemClassName,
-            role: "option",
-            "aria-selected": isSelected(item),
             onClick: function onClick(e) {
               return props.onItemClick({
                 originalEvent: e,
@@ -393,8 +449,13 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
                 index: i
               });
             },
+            role: 'option',
+            'aria-selected': isSelected(item),
             tabIndex: props.tabIndex
-          }, content);
+          }, getPTOptions(item, 'item'));
+          return /*#__PURE__*/React.createElement("li", _extends({
+            key: key
+          }, _itemProps), content);
         }
       });
     }
@@ -402,38 +463,41 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
   };
   var createList = function createList() {
     var items = createItems();
-    return /*#__PURE__*/React.createElement("ul", {
+    var listProps = mergeProps({
       ref: listElementRef,
-      className: "p-orderlist-list",
+      className: 'p-orderlist-list',
       style: props.listStyle,
       onDragOver: onListMouseMove,
-      role: "listbox",
-      "aria-multiselectable": true
-    }, items);
+      role: 'listbox',
+      'aria-multiselectable': true
+    }, props.ptm('list'));
+    return /*#__PURE__*/React.createElement("ul", listProps, items);
   };
   var createFilter = function createFilter() {
     var iconClassName = 'p-orderlist-filter';
-    var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, {
+    var searchIconProps = mergeProps({
       className: iconClassName
-    });
-    var filterIcon = IconUtils.getJSXIcon(icon, {
-      className: iconClassName
-    }, {
+    }, props.ptm('icon'));
+    var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, searchIconProps);
+    var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, searchIconProps), {
       props: props
     });
     if (props.filter) {
-      var content = /*#__PURE__*/React.createElement("div", {
-        className: "p-orderlist-filter"
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "text",
+      var filterProps = mergeProps({
+        className: 'p-orderlist-filter'
+      }, props.ptm('filter'));
+      var filterInputProps = mergeProps({
+        type: 'text',
         value: props.filterValue,
         onChange: props.onFilter,
         onKeyDown: onFilterInputKeyDown,
         placeholder: props.placeholder,
-        className: "p-orderlist-filter-input p-inputtext p-component"
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "p-orderlist-filter-icon"
-      }, filterIcon));
+        className: 'p-orderlist-filter-input p-inputtext p-component'
+      }, props.ptm('filterInput'));
+      var filterIconProps = mergeProps({
+        className: 'p-orderlist-filter-icon'
+      }, props.ptm('filterIcon'));
+      var content = /*#__PURE__*/React.createElement("div", filterProps, /*#__PURE__*/React.createElement("input", filterInputProps), /*#__PURE__*/React.createElement("span", filterIconProps, filterIcon));
       if (props.filterTemplate) {
         var defaultContentOptions = {
           className: 'p-orderlist-filter',
@@ -449,23 +513,26 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
         };
         content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
       }
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-orderlist-filter-container"
-      }, content);
+      var filterContainerProps = mergeProps({
+        className: 'p-orderlist-filter-container'
+      }, props.ptm('filterContainer'));
+      return /*#__PURE__*/React.createElement("div", filterContainerProps, content);
     }
     return null;
   };
   var header = createHeader();
   var filter = createFilter();
   var list = createList();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "p-orderlist-list-container"
-  }, header, filter, list);
+  var containerProps = mergeProps({
+    className: 'p-orderlist-list-container'
+  }, props.ptm('container'));
+  return /*#__PURE__*/React.createElement("div", containerProps, header, filter, list);
 });
 OrderListSubList.displayName = 'OrderListSubList';
 
 var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = OrderListBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = OrderListBase.getProps(inProps, context);
   var _React$useState = React.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     selectionState = _React$useState2[0],
@@ -482,6 +549,15 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var elementRef = React.useRef(null);
   var styleElementRef = React.useRef(null);
   var reorderDirection = React.useRef(null);
+  var _OrderListBase$setMet = OrderListBase.setMetaData({
+      props: props,
+      state: {
+        selection: selectionState,
+        filterValue: filterValueState,
+        attributeSelector: attributeSelectorState
+      }
+    }),
+    ptm = _OrderListBase$setMet.ptm;
   var onItemClick = function onItemClick(event) {
     var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
     var index = ObjectUtils.findIndexInList(event.value, selectionState, props.dataKey);
@@ -593,7 +669,7 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
   var createStyle = function createStyle() {
     if (!styleElementRef.current) {
-      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
       var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-orderlist[").concat(attributeSelectorState, "] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");
       styleElementRef.current.innerHTML = innerHTML;
     }
@@ -627,15 +703,15 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       reorderDirection.current = null;
     }
   });
-  var otherProps = OrderListBase.getOtherProps(props);
   var className = classNames('p-orderlist p-component', props.className);
   var visibleList = getVisibleList();
-  return /*#__PURE__*/React.createElement("div", _extends({
+  var rootProps = mergeProps({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), /*#__PURE__*/React.createElement(OrderListControls, {
+  }, OrderListBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(OrderListControls, {
     value: visibleList,
     selection: selectionState,
     onReorder: onReorder,
@@ -643,7 +719,8 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     moveUpIcon: props.moveUpIcon,
     moveTopIcon: props.moveTopIcon,
     moveDownIcon: props.moveDownIcon,
-    moveBottomIcon: props.moveBottomIcon
+    moveBottomIcon: props.moveBottomIcon,
+    ptm: ptm
   }), /*#__PURE__*/React.createElement(OrderListSubList, {
     value: visibleList,
     selection: selectionState,
@@ -661,7 +738,8 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     dragdrop: props.dragdrop,
     onChange: props.onChange,
     tabIndex: props.tabIndex,
-    filterIcon: props.filterIcon
+    filterIcon: props.filterIcon,
+    ptm: ptm
   }));
 }));
 OrderList.displayName = 'OrderList';