primereact 9.5.0 → 9.6.0

package/knob/knob.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.knob=function(e,t,n,r){"use strict";function a(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 o=a(t);function i(){return i=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},i.apply(this,arguments)}function c(e){if(Array.isArray(e))return e}function l(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,c=[],l=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(c.push(r.value),c.length!==t);l=!0);}catch(e){u=!0,a=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw a}}return c}}function u(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 s(e,t){if(e){if("string"==typeof e)return u(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)?u(e,t):void 0}}function f(){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 c(e)||l(e,t)||s(e,t)||f()}var p={defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},getProps:function(e){return r.ObjectUtils.getMergedProps(e,p.defaultProps)},getOtherProps:function(e){return r.ObjectUtils.getDiffProps(e,p.defaultProps)}},d=40,m=4*Math.PI/3,v=-Math.PI/3,b=o.memo(o.forwardRef((function(e,t){var a=p.getProps(e),c=o.useRef(null),l=!a.disabled&&!a.readOnly,u=h(n.useEventListener({target:"window",type:"mousemove",listener:function(e){N(e.offsetX,e.offsetY),e.preventDefault()},when:l}),2),s=u[0],f=u[1],b=h(n.useEventListener({target:"window",type:"mouseup",listener:function(e){f(),g(),e.preventDefault()},when:l}),2),y=b[0],g=b[1],M=h(n.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=c.current.getBoundingClientRect(),n=e.targetTouches.item(0);N(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:l}),2),w=M[0],O=M[1],P=h(n.useEventListener({target:"window",type:"touchend",listener:function(){O(),j()},when:l}),2),k=P[0],j=P[1],E=function(e,t,n,r,a){return(e-t)*(a-r)/(n-t)+r},x=function(){return E(a.min>0&&a.max>0?a.min:0,a.min,a.max,m,v)},C=function(){return E(a.value,a.min,a.max,m,v)},I="M ".concat(50+Math.cos(m)*d," ").concat(50-Math.sin(m)*d," A ").concat(d," ").concat(d," 0 1 1 ").concat(50+Math.cos(v)*d," ").concat(50-Math.sin(v)*d),A="M ".concat(50+Math.cos(x())*d," ").concat(50-Math.sin(x())*d," A ").concat(d," ").concat(d," 0 ").concat(Math.abs(x()-C())<Math.PI?0:1," ").concat(C()>x()?0:1," ").concat(50+Math.cos(C())*d," ").concat(50-Math.sin(C())*d),N=function(e,t){var n=Math.atan2(a.size/2-t,e-a.size/2),r=-Math.PI/2-Math.PI/6;D(n,r)},D=function(e,t){var n;if(e>v)n=E(e,m,v,a.min,a.max);else{if(!(e<t))return;n=E(e+2*Math.PI,m,v,a.min,a.max)}a.onChange&&a.onChange({value:Math.round((n-a.min)/a.step)*a.step+a.min})};o.useImperativeHandle(t,(function(){return{props:a,getElement:function(){return c.current}}}));var S=p.getOtherProps(a),T=r.classNames("p-knob p-component",{"p-disabled":a.disabled},a.className),z=a.showValue&&o.createElement("text",{x:50,y:57,textAnchor:"middle",fill:a.textColor,className:"p-knob-text",name:a.name},a.valueTemplate.replace("{value}",a.value.toString()));return o.createElement("div",i({ref:c,id:a.id,className:T,style:a.style},S),o.createElement("svg",{viewBox:"0 0 100 100",width:a.size,height:a.size,onClick:function(e){a.disabled||a.readOnly||N(e.nativeEvent.offsetX,e.nativeEvent.offsetY)},onMouseDown:function(e){s(),y(),e.preventDefault()},onMouseUp:function(){f(),g()},onTouchStart:function(){w(),k()},onTouchEnd:function(){O(),j()}},o.createElement("path",{d:I,strokeWidth:a.strokeWidth,stroke:a.rangeColor,className:"p-knob-range"}),o.createElement("path",{d:A,strokeWidth:a.strokeWidth,stroke:a.valueColor,className:"p-knob-value"}),z))})));return b.displayName="Knob",e.Knob=b,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.knob=function(e,t,n,r,a,o){"use strict";function i(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 l=i(t);function c(e){if(Array.isArray(e))return e}function u(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],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)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw a}}return l}}function s(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 f(e,t){if(e){if("string"==typeof e)return s(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)?s(e,t):void 0}}function m(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function p(e,t){return c(e)||u(e,t)||f(e,t)||m()}var d=a.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0}}),h=40,v=4*Math.PI/3,g=-Math.PI/3,y=l.memo(l.forwardRef((function(e,t){var a=l.useContext(o.PrimeReactContext),i=d.getProps(e,a),c=d.setMetaData({props:i}).ptm,u=l.useRef(null),s=!i.disabled&&!i.readOnly,f=p(n.useEventListener({target:"window",type:"mousemove",listener:function(e){S(e.offsetX,e.offsetY),e.preventDefault()},when:s}),2),m=f[0],y=f[1],b=p(n.useEventListener({target:"window",type:"mouseup",listener:function(e){y(),w(),e.preventDefault()},when:s}),2),M=b[0],w=b[1],P=p(n.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=u.current.getBoundingClientRect(),n=e.targetTouches.item(0);S(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:s}),2),x=P[0],k=P[1],E=p(n.useEventListener({target:"window",type:"touchend",listener:function(){k(),O()},when:s}),2),C=E[0],O=E[1],j=function(e,t,n,r,a){return(e-t)*(a-r)/(n-t)+r},I=function(){return j(i.min>0&&i.max>0?i.min:0,i.min,i.max,v,g)},A=function(){return j(i.value,i.min,i.max,v,g)},N="M ".concat(50+Math.cos(v)*h," ").concat(50-Math.sin(v)*h," A ").concat(h," ").concat(h," 0 1 1 ").concat(50+Math.cos(g)*h," ").concat(50-Math.sin(g)*h),D="M ".concat(50+Math.cos(I())*h," ").concat(50-Math.sin(I())*h," A ").concat(h," ").concat(h," 0 ").concat(Math.abs(I()-A())<Math.PI?0:1," ").concat(A()>I()?0:1," ").concat(50+Math.cos(A())*h," ").concat(50-Math.sin(A())*h),S=function(e,t){var n=Math.atan2(i.size/2-t,e-i.size/2),r=-Math.PI/2-Math.PI/6;T(n,r)},T=function(e,t){var n;if(e>g)n=j(e,v,g,i.min,i.max);else{if(!(e<t))return;n=j(e+2*Math.PI,v,g,i.min,i.max)}i.onChange&&i.onChange({value:Math.round((n-i.min)/i.step)*i.step+i.min})};l.useImperativeHandle(t,(function(){return{props:i,getElement:function(){return u.current}}})),d.getOtherProps(i);var z=r.classNames("p-knob p-component",{"p-disabled":i.disabled},i.className),_=r.mergeProps({x:50,y:57,textAnchor:"middle",fill:i.textColor,className:"p-knob-text",name:i.name},c("label")),B=i.showValue&&l.createElement("text",_,i.valueTemplate.replace("{value}",i.value.toString())),L=r.mergeProps({ref:u,id:i.id,className:z,style:i.style},c("root")),R=r.mergeProps({viewBox:"0 0 100 100",width:i.size,height:i.size,onClick:function(e){return t=e,void(i.disabled||i.readOnly||S(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,m(),M(),void t.preventDefault();var t},onMouseUp:function(e){return y(),void w()},onTouchStart:function(e){return x(),void C()},onTouchEnd:function(e){return k(),void O()}},c("svg")),W=r.mergeProps({d:N,strokeWidth:i.strokeWidth,stroke:i.rangeColor,className:"p-knob-range"},c("range")),Y=r.mergeProps({d:D,strokeWidth:i.strokeWidth,stroke:i.valueColor,className:"p-knob-value"},c("value"));return l.createElement("div",L,l.createElement("svg",R,l.createElement("path",W),l.createElement("path",Y),B))})));return y.displayName="Knob",e.Knob=y,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.utils,primereact.componentbase,primereact.api);

package/listbox/listbox.cjs.js

@@ -8,8 +8,9 @@ var hooks = require('primereact/hooks');
 var tooltip = require('primereact/tooltip');
 var utils = require('primereact/utils');
 var virtualscroller = require('primereact/virtualscroller');
-var inputtext = require('primereact/inputtext');
+var componentbase = require('primereact/componentbase');
 var search = require('primereact/icons/search');
+var inputtext = require('primereact/inputtext');
 var ripple = require('primereact/ripple');
 
 function _interopNamespace(e) {
@@ -159,7 +160,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
 }
 
-var ListBoxBase = {
+var ListBoxBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'ListBox',
     className: null,
@@ -198,15 +199,11 @@ var ListBoxBase = {
     value: null,
     virtualScrollerOptions: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, ListBoxBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, ListBoxBase.defaultProps);
   }
-};
+});
 
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ListBoxHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   var filterOptions = {
     filter: function filter(e) {
@@ -226,24 +223,29 @@ var ListBoxHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var createHeader = function createHeader() {
     var iconClassName = 'p-listbox-filter-icon';
-    var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, {
-      className: iconClassName
-    });
-    var filterIcon = utils.IconUtils.getJSXIcon(icon, {
+    var filterIconProps = utils.mergeProps({
       className: iconClassName
-    }, {
+    }, props.ptm('filterIcon'));
+    var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, filterIconProps);
+    var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, filterIconProps), {
       props: props
     });
-    var content = /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-listbox-filter-container"
-    }, /*#__PURE__*/React__namespace.createElement(inputtext.InputText, _extends({
+    var headerProps = utils.mergeProps({
+      className: 'p-listbox-header'
+    }, props.ptm('header'));
+    var filterContainerProps = utils.mergeProps({
+      className: 'p-listbox-filter-container'
+    }, props.ptm('filterContainer'));
+    var content = /*#__PURE__*/React__namespace.createElement("div", filterContainerProps, /*#__PURE__*/React__namespace.createElement(inputtext.InputText, _extends({
       type: "text",
       value: props.filter,
       onChange: onFilter,
       className: "p-listbox-filter",
       disabled: props.disabled,
       placeholder: props.filterPlaceholder
-    }, props.filterInputProps)), filterIcon);
+    }, props.filterInputProps, {
+      pt: props.ptm('filterInput')
+    })), filterIcon);
     if (props.filterTemplate) {
       var defaultContentOptions = {
         className: 'p-listbox-filter-container',
@@ -255,9 +257,7 @@ var ListBoxHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       };
       content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
     }
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-listbox-header"
-    }, content);
+    return /*#__PURE__*/React__namespace.createElement("div", headerProps, content);
   };
   var content = createHeader();
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, content);
@@ -265,6 +265,14 @@ var ListBoxHeader = /*#__PURE__*/React__namespace.memo(function (props) {
 ListBoxHeader.displayName = 'ListBoxHeader';
 
 var ListBoxItem = /*#__PURE__*/React__namespace.memo(function (props) {
+  var getPTOptions = function getPTOptions(key) {
+    return props.ptm(key, {
+      context: {
+        selected: props.selected,
+        disabled: props.disabled
+      }
+    });
+  };
   var onClick = function onClick(event) {
     if (props.onClick) {
       props.onClick({
@@ -319,19 +327,20 @@ var ListBoxItem = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   }, props.option.className);
   var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props.option) : props.label;
-  return /*#__PURE__*/React__namespace.createElement("li", {
+  var itemProps = utils.mergeProps({
     className: className,
     style: props.style,
     onClick: onClick,
     onTouchEnd: onTouchEnd,
     onKeyDown: onKeyDown,
-    tabIndex: "-1",
-    "aria-label": props.label,
+    tabIndex: '-1',
+    'aria-label': props.label,
     key: props.label,
-    role: "option",
-    "aria-selected": props.selected,
-    "aria-disabled": props.disabled
-  }, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    role: 'option',
+    'aria-selected': props.selected,
+    'aria-disabled': props.disabled
+  }, getPTOptions('item'));
+  return /*#__PURE__*/React__namespace.createElement("li", itemProps, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
 });
 ListBoxItem.displayName = 'ListBoxItem';
 
@@ -341,7 +350,8 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-  var props = ListBoxBase.getProps(inProps);
+  var context = React__namespace.useContext(api.PrimeReactContext);
+  var props = ListBoxBase.getProps(inProps, context);
   var _React$useState = React__namespace.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     filterValueState = _React$useState2[0],
@@ -351,6 +361,13 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   var optionTouched = React__namespace.useRef(false);
   var filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
   var hasFilter = filteredValue && filteredValue.trim().length > 0;
+  var _ListBoxBase$setMetaD = ListBoxBase.setMetaData({
+      props: props,
+      state: {
+        filterValue: filteredValue
+      }
+    }),
+    ptm = _ListBoxBase$setMetaD.ptm;
   var onOptionSelect = function onOptionSelect(event) {
     var option = event.option;
     if (props.disabled || isOptionDisabled(option)) {
@@ -594,7 +611,8 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       filterTemplate: props.filterTemplate,
       disabled: props.disabled,
       filterPlaceholder: props.filterPlaceholder,
-      filterInputProps: props.filterInputProps
+      filterInputProps: props.filterInputProps,
+      ptm: ptm
     }) : null;
   };
   var createGroupChildren = function createGroupChildren(optionGroup, style) {
@@ -614,7 +632,8 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
         onClick: onOptionSelect,
         onTouchEnd: onOptionTouchEnd,
         tabIndex: tabIndex,
-        disabled: disabled
+        disabled: disabled,
+        ptm: ptm
       });
     });
   };
@@ -627,13 +646,14 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       var groupContent = props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : getOptionGroupLabel(option);
       var groupChildrenContent = createGroupChildren(option, style);
       var key = index + '_' + getOptionGroupRenderKey(option);
+      var itemGroupProps = utils.mergeProps({
+        className: 'p-listbox-item-group',
+        style: style,
+        role: 'group'
+      }, ptm('itemGroup'));
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
         key: key
-      }, /*#__PURE__*/React__namespace.createElement("li", {
-        className: "p-listbox-item-group",
-        style: style,
-        role: "group"
-      }, groupContent), groupChildrenContent);
+      }, /*#__PURE__*/React__namespace.createElement("li", itemGroupProps, groupContent), groupChildrenContent);
     } else {
       var optionLabel = getOptionLabel(option);
       var optionKey = index + '_' + getOptionRenderKey(option);
@@ -649,7 +669,8 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
         onClick: onOptionSelect,
         onTouchEnd: onOptionTouchEnd,
         tabIndex: tabIndex,
-        disabled: disabled
+        disabled: disabled,
+        ptm: ptm
       });
     }
   };
@@ -662,10 +683,11 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     return createEmptyMessage(props.emptyMessage);
   };
   var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
+    var emptyMessageProps = utils.mergeProps({
+      className: 'p-listbox-empty-message'
+    }, ptm('emptyMessage'));
     var message = utils.ObjectUtils.getJSXElement(emptyMessage, props) || api.localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
-    return /*#__PURE__*/React__namespace.createElement("li", {
-      className: "p-listbox-empty-message"
-    }, message);
+    return /*#__PURE__*/React__namespace.createElement("li", emptyMessageProps, message);
   };
   var createList = function createList() {
     if (props.virtualScrollerOptions) {
@@ -681,25 +703,29 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
         },
         contentTemplate: function contentTemplate(options) {
           var className = utils.classNames('p-listbox-list', options.className);
-          return /*#__PURE__*/React__namespace.createElement("ul", _extends({
+          var listProps = utils.mergeProps(_objectSpread({
             ref: options.contentRef,
             style: options.style,
             className: className,
-            role: "listbox",
-            "aria-multiselectable": props.multiple
-          }, ariaProps), options.children);
+            role: 'listbox',
+            'aria-multiselectable': props.multiple
+          }, ariaProps), ptm('list'));
+          return /*#__PURE__*/React__namespace.createElement("ul", listProps, options.children);
         }
       });
       return /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
         ref: virtualScrollerRef
-      }, virtualScrollerProps));
+      }, virtualScrollerProps, {
+        pt: ptm('virtualScroller')
+      }));
     } else {
       var items = createItems();
-      return /*#__PURE__*/React__namespace.createElement("ul", _extends({
-        className: "p-listbox-list",
-        role: "listbox",
-        "aria-multiselectable": props.multiple
-      }, ariaProps), items);
+      var listProps = utils.mergeProps(_objectSpread({
+        className: 'p-listbox-list',
+        role: 'listbox',
+        'aria-multiselectable': props.multiple
+      }, ariaProps), ptm('list'));
+      return /*#__PURE__*/React__namespace.createElement("ul", listProps, items);
     }
   };
   var visibleOptions = getVisibleOptions();
@@ -712,18 +738,22 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   var listClassName = utils.classNames('p-listbox-list-wrapper', props.listClassName);
   var list = createList();
   var header = createHeader();
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
+  var wrapperProps = utils.mergeProps({
+    className: listClassName,
+    style: props.listStyle
+  }, ptm('wrapper'));
+  var rootProps = utils.mergeProps({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), header, /*#__PURE__*/React__namespace.createElement("div", {
-    className: listClassName,
-    style: props.listStyle
-  }, list)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+  }, ListBoxBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, header, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, list)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
-  }, props.tooltipOptions)));
+  }, props.tooltipOptions, {
+    pt: ptm('tooltip')
+  })));
 }));
 ListBox.displayName = 'ListBox';
 

package/listbox/listbox.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/hooks"),n=require("primereact/tooltip"),l=require("primereact/utils"),i=require("primereact/virtualscroller"),o=require("primereact/inputtext"),a=require("primereact/icons/search"),u=require("primereact/ripple");function c(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 s=c(e);function p(){return p=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},p.apply(this,arguments)}function f(e){return f="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},f(e)}function m(e,t){if("object"!==f(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==f(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function d(e){var t=m(e,"string");return"symbol"===f(t)?t:String(t)}function b(e,t,r){return(t=d(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(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 y(e){if(Array.isArray(e))return v(e)}function g(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 v(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)?v(e,t):void 0}}function O(){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 j(e){return y(e)||g(e)||h(e)||O()}function E(e){if(Array.isArray(e))return e}function S(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,i,o,a=[],u=!0,c=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);u=!0);}catch(e){c=!0,l=e}finally{try{if(!u&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(c)throw l}}return a}}function x(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var P={defaultProps:{__TYPE:"ListBox",className:null,dataKey:null,disabled:null,emptyFilterMessage:null,emptyMessage:null,filter:!1,filterIcon:null,filterBy:null,filterInputProps:null,filterLocale:void 0,filterMatchMode:"contains",filterPlaceholder:null,filterTemplate:null,filterValue:null,id:null,itemTemplate:null,listClassName:null,listStyle:null,metaKeySelection:!1,multiple:!1,onChange:null,onFilterValueChange:null,optionDisabled:null,optionGroupChildren:null,optionGroupLabel:null,optionGroupTemplate:null,optionLabel:null,optionValue:null,options:null,style:null,tabIndex:0,tooltip:null,tooltipOptions:null,value:null,virtualScrollerOptions:null,children:void 0},getProps:function(e){return l.ObjectUtils.getMergedProps(e,P.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,P.defaultProps)}},I=s.memo((function(e){var t={filter:function(e){return r(e)},reset:function(){return e.resetFilter()}},r=function(t){e.onFilter&&e.onFilter({originalEvent:t,value:t.target.value})},n=function(){var n="p-listbox-filter-icon",i=l.IconUtils.getJSXIcon(e.filterIcon||s.createElement(a.SearchIcon,{className:n}),{className:n},{props:e}),u=s.createElement("div",{className:"p-listbox-filter-container"},s.createElement(o.InputText,p({type:"text",value:e.filter,onChange:r,className:"p-listbox-filter",disabled:e.disabled,placeholder:e.filterPlaceholder},e.filterInputProps)),i);e.filterTemplate&&(u=l.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-listbox-filter-container",element:u,filterOptions:t,filterInputChange:r,filterIconClassName:"p-dropdown-filter-icon",props:e}));return s.createElement("div",{className:"p-listbox-header"},u)}();return s.createElement(s.Fragment,null,n)}));I.displayName="ListBoxHeader";var D=s.memo((function(e){var t=function(t){e.onClick&&e.onClick({originalEvent:t,option:e.option}),t.preventDefault()},r=function e(t){var r=t.nextElementSibling;return r?l.DomHandler.hasClass(r,"p-disabled")||l.DomHandler.hasClass(r,"p-listbox-item-group")?e(r):r:null},n=function e(t){var r=t.previousElementSibling;return r?l.DomHandler.hasClass(r,"p-disabled")||l.DomHandler.hasClass(r,"p-listbox-item-group")?e(r):r:null},i=l.classNames("p-listbox-item",{"p-highlight":e.selected,"p-disabled":e.disabled},e.option.className),o=e.template?l.ObjectUtils.getJSXElement(e.template,e.option):e.label;return s.createElement("li",{className:i,style:e.style,onClick:t,onTouchEnd:function(t){e.onTouchEnd&&e.onTouchEnd({originalEvent:t,option:e.option})},onKeyDown:function(e){var l=e.currentTarget;switch(e.which){case 40:var i=r(l);i&&i.focus(),e.preventDefault();break;case 38:var o=n(l);o&&o.focus(),e.preventDefault();break;case 13:t(e),e.preventDefault()}},tabIndex:"-1","aria-label":e.label,key:e.label,role:"option","aria-selected":e.selected,"aria-disabled":e.disabled},o,s.createElement(u.Ripple,null))}));function N(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 w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?N(Object(r),!0).forEach((function(t){b(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):N(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function T(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=F(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,l=function(){};return{s:l,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:l}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,o=!0,a=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return o=e.done,e},e:function(e){a=!0,i=e},f:function(){try{o||null==r.return||r.return()}finally{if(a)throw i}}}}function F(e,t){if(e){if("string"==typeof e)return C(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?C(e,t):void 0}}function C(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}D.displayName="ListBoxItem";var L=s.memo(s.forwardRef((function(e,o){var a,u,c=P.getProps(e),f=s.useState(""),m=(u=2,E(a=f)||S(a,u)||h(a,u)||x()),d=m[0],b=m[1],v=s.useRef(null),y=s.useRef(null),g=s.useRef(!1),O=(c.onFilterValueChange?c.filterValue:d)||"",N=O&&O.trim().length>0,F=function(e){var t=e.option;c.disabled||J(t)||(c.multiple?U(e.originalEvent,t):L(e.originalEvent,t),g.current=!1)},C=function(){c.disabled||(g.current=!0)},L=function(e,t){var r=_(t),n=!1,l=null;!g.current&&c.metaKeySelection?r?(e.metaKey||e.ctrlKey)&&(l=null,n=!0):(l=H(t),n=!0):(l=r?null:H(t),n=!0);n&&k(e,l)},U=function(e,t){var r=_(t),n=!1,l=null;if(!g&&c.metaKeySelection){var i=e.metaKey||e.ctrlKey;r?(l=i?K(t):[H(t)],n=!0):(l=[].concat(j(l=i&&c.value||[]),[H(t)]),n=!0)}else l=r?K(t):[].concat(j(c.value||[]),[H(t)]),n=!0;n&&c.onChange({originalEvent:e,value:l,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:c.name,id:c.id,value:l}})},M=function(e){y.current&&y.current.scrollToIndex(0);var t=e.value;c.onFilterValueChange?c.onFilterValueChange({originalEvent:e.originalEvent,value:t}):b(t)},A=function(){b(""),c.onFilter&&c.onFilter({filter:""})},k=function(e,t){c.onChange&&c.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:c.name,id:c.id,value:t}})},K=function(e){return c.value.filter((function(t){return!l.ObjectUtils.equals(t,H(e),c.dataKey)}))},q=function(){if(null!=c.value&&Z){if(!c.optionGroupLabel)return G(c.value,Z);for(var e=0;e<Z.length;e++){var t=G(c.value,z(Z[e]));if(-1!==t)return{group:e,option:t}}}return-1},V=function(){return c.optionValue?null:c.dataKey},G=function(e,t){var r=V();return t.findIndex((function(t){return l.ObjectUtils.equals(e,H(t),r)}))},_=function(e){var t=H(e),r=V();return c.multiple&&c.value?c.value.some((function(e){return l.ObjectUtils.equals(e,t,r)})):l.ObjectUtils.equals(c.value,t,r)},B=function(e){return c.optionLabel?l.ObjectUtils.resolveFieldData(e,c.optionLabel):e&&void 0!==e.label?e.label:e},H=function(e){return c.optionValue?l.ObjectUtils.resolveFieldData(e,c.optionValue):e&&void 0!==e.value?e.value:e},R=function(e){return c.dataKey?l.ObjectUtils.resolveFieldData(e,c.dataKey):B(e)},J=function(e){return c.optionDisabled?l.ObjectUtils.isFunction(c.optionDisabled)?c.optionDisabled(e):l.ObjectUtils.resolveFieldData(e,c.optionDisabled):!(!e||void 0===e.disabled)&&e.disabled},X=function(e){return l.ObjectUtils.resolveFieldData(e,c.optionGroupLabel)},z=function(e){return l.ObjectUtils.resolveFieldData(e,c.optionGroupChildren)},$=function(){if(y.current){var e=q();-1!==e&&setTimeout((function(){return y.current.scrollToIndex(e)}),0)}};s.useImperativeHandle(o,(function(){return{props:c,focus:function(){return l.DomHandler.focusFirstElement(v.current)},getElement:function(){return v.current},getVirtualScroller:function(){return y.current}}})),r.useMountEffect((function(){$()}));var Y=function(e,t){return z(e).map((function(e,r){var n=B(e),l=r+"_"+R(e),i=J(e),o=i?null:c.tabIndex||0;return s.createElement(D,{key:l,label:n,option:e,style:t,template:c.itemTemplate,selected:_(e),onClick:F,onTouchEnd:C,tabIndex:o,disabled:i})}))},Q=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n={height:r.props?r.props.itemSize:void 0};if(c.optionGroupLabel){var i=c.optionGroupTemplate?l.ObjectUtils.getJSXElement(c.optionGroupTemplate,e,t):l.ObjectUtils.resolveFieldData(e,c.optionGroupLabel),o=Y(e,n),a=t+"_"+X(e);return s.createElement(s.Fragment,{key:a},s.createElement("li",{className:"p-listbox-item-group",style:n,role:"group"},i),o)}var u=B(e),p=t+"_"+R(e),f=J(e),m=f?null:c.tabIndex||0;return s.createElement(D,{key:p,label:u,option:e,style:n,template:c.itemTemplate,selected:_(e),onClick:F,onTouchEnd:C,tabIndex:m,disabled:f})},W=function(e,r){var n=l.ObjectUtils.getJSXElement(e,c)||t.localeOption(r?"emptyFilterMessage":"emptyMessage");return s.createElement("li",{className:"p-listbox-empty-message"},n)},Z=function(){if(N){var e=O.trim().toLocaleLowerCase(c.filterLocale),r=c.filterBy?c.filterBy.split(","):[c.optionLabel||"label"];if(c.optionGroupLabel){var n,l=[],i=T(c.options);try{for(i.s();!(n=i.n()).done;){var o=n.value,a=t.FilterService.filter(z(o),r,e,c.filterMatchMode,c.filterLocale);a&&a.length&&l.push(w(w({},o),{items:a}))}}catch(e){i.e(e)}finally{i.f()}return l}return t.FilterService.filter(c.options,r,e,c.filterMatchMode,c.filterLocale)}return c.options}(),ee=l.ObjectUtils.isNotEmpty(c.tooltip),te=P.getOtherProps(c),re=l.ObjectUtils.reduceKeys(te,l.DomHandler.ARIA_PROPS),ne=l.classNames("p-listbox p-component",{"p-disabled":c.disabled},c.className),le=l.classNames("p-listbox-list-wrapper",c.listClassName),ie=function(){if(c.virtualScrollerOptions){var e=w(w({},c.virtualScrollerOptions),{items:Z,onLazyLoad:function(e){return c.virtualScrollerOptions.onLazyLoad(w(w({},e),{filter:Z}))},itemTemplate:function(e,t){return e&&Q(e,t.index,t)},contentTemplate:function(e){var t=l.classNames("p-listbox-list",e.className);return s.createElement("ul",p({ref:e.contentRef,style:e.style,className:t,role:"listbox","aria-multiselectable":c.multiple},re),e.children)}});return s.createElement(i.VirtualScroller,p({ref:y},e))}var t=l.ObjectUtils.isNotEmpty(Z)?Z.map(Q):N?W(c.emptyFilterMessage,!0):W(c.emptyMessage);return s.createElement("ul",p({className:"p-listbox-list",role:"listbox","aria-multiselectable":c.multiple},re),t)}(),oe=c.filter?s.createElement(I,{filter:O,filterIcon:c.filterIcon,onFilter:M,resetFilter:A,filterTemplate:c.filterTemplate,disabled:c.disabled,filterPlaceholder:c.filterPlaceholder,filterInputProps:c.filterInputProps}):null;return s.createElement(s.Fragment,null,s.createElement("div",p({ref:v,id:c.id,className:ne,style:c.style},te),oe,s.createElement("div",{className:le,style:c.listStyle},ie)),ee&&s.createElement(n.Tooltip,p({target:v,content:c.tooltip},c.tooltipOptions)))})));L.displayName="ListBox",exports.ListBox=L;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/hooks"),n=require("primereact/tooltip"),l=require("primereact/utils"),o=require("primereact/virtualscroller"),i=require("primereact/componentbase"),a=require("primereact/icons/search"),u=require("primereact/inputtext"),c=require("primereact/ripple");function s(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 p=s(e);function f(){return f=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},f.apply(this,arguments)}function m(e){return m="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},m(e)}function b(e,t){if("object"!==m(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==m(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function d(e){var t=b(e,"string");return"symbol"===m(t)?t:String(t)}function v(e,t,r){return(t=d(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(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 g(e){if(Array.isArray(e))return y(e)}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function O(e,t){if(e){if("string"==typeof e)return y(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)?y(e,t):void 0}}function j(){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 g(e)||h(e)||O(e)||j()}function P(e){if(Array.isArray(e))return e}function S(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,o,i,a=[],u=!0,c=!1;try{if(o=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=o.call(r)).done)&&(a.push(n.value),a.length!==t);u=!0);}catch(e){c=!0,l=e}finally{try{if(!u&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw l}}return a}}function x(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var D=i.ComponentBase.extend({defaultProps:{__TYPE:"ListBox",className:null,dataKey:null,disabled:null,emptyFilterMessage:null,emptyMessage:null,filter:!1,filterIcon:null,filterBy:null,filterInputProps:null,filterLocale:void 0,filterMatchMode:"contains",filterPlaceholder:null,filterTemplate:null,filterValue:null,id:null,itemTemplate:null,listClassName:null,listStyle:null,metaKeySelection:!1,multiple:!1,onChange:null,onFilterValueChange:null,optionDisabled:null,optionGroupChildren:null,optionGroupLabel:null,optionGroupTemplate:null,optionLabel:null,optionValue:null,options:null,style:null,tabIndex:0,tooltip:null,tooltipOptions:null,value:null,virtualScrollerOptions:null,children:void 0}});function w(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 I(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach((function(t){v(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var C=p.memo((function(e){var t={filter:function(e){return r(e)},reset:function(){return e.resetFilter()}},r=function(t){e.onFilter&&e.onFilter({originalEvent:t,value:t.target.value})},n=function(){var n=l.mergeProps({className:"p-listbox-filter-icon"},e.ptm("filterIcon")),o=l.IconUtils.getJSXIcon(e.filterIcon||p.createElement(a.SearchIcon,n),I({},n),{props:e}),i=l.mergeProps({className:"p-listbox-header"},e.ptm("header")),c=l.mergeProps({className:"p-listbox-filter-container"},e.ptm("filterContainer")),s=p.createElement("div",c,p.createElement(u.InputText,f({type:"text",value:e.filter,onChange:r,className:"p-listbox-filter",disabled:e.disabled,placeholder:e.filterPlaceholder},e.filterInputProps,{pt:e.ptm("filterInput")})),o);e.filterTemplate&&(s=l.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-listbox-filter-container",element:s,filterOptions:t,filterInputChange:r,filterIconClassName:"p-dropdown-filter-icon",props:e}));return p.createElement("div",i,s)}();return p.createElement(p.Fragment,null,n)}));C.displayName="ListBoxHeader";var N=p.memo((function(e){var t=function(t){e.onClick&&e.onClick({originalEvent:t,option:e.option}),t.preventDefault()},r=function e(t){var r=t.nextElementSibling;return r?l.DomHandler.hasClass(r,"p-disabled")||l.DomHandler.hasClass(r,"p-listbox-item-group")?e(r):r:null},n=function e(t){var r=t.previousElementSibling;return r?l.DomHandler.hasClass(r,"p-disabled")||l.DomHandler.hasClass(r,"p-listbox-item-group")?e(r):r:null},o=l.classNames("p-listbox-item",{"p-highlight":e.selected,"p-disabled":e.disabled},e.option.className),i=e.template?l.ObjectUtils.getJSXElement(e.template,e.option):e.label,a=l.mergeProps({className:o,style:e.style,onClick:t,onTouchEnd:function(t){e.onTouchEnd&&e.onTouchEnd({originalEvent:t,option:e.option})},onKeyDown:function(e){var l=e.currentTarget;switch(e.which){case 40:var o=r(l);o&&o.focus(),e.preventDefault();break;case 38:var i=n(l);i&&i.focus(),e.preventDefault();break;case 13:t(e),e.preventDefault()}},tabIndex:"-1","aria-label":e.label,key:e.label,role:"option","aria-selected":e.selected,"aria-disabled":e.disabled},e.ptm("item",{context:{selected:e.selected,disabled:e.disabled}}));return p.createElement("li",a,i,p.createElement(c.Ripple,null))}));function T(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 F(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?T(Object(r),!0).forEach((function(t){v(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):T(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function L(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=U(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,l=function(){};return{s:l,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:l}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,i=!0,a=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return i=e.done,e},e:function(e){a=!0,o=e},f:function(){try{i||null==r.return||r.return()}finally{if(a)throw o}}}}function U(e,t){if(e){if("string"==typeof e)return M(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)?M(e,t):void 0}}function M(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}N.displayName="ListBoxItem";var A=p.memo(p.forwardRef((function(e,i){var a,u,c=p.useContext(t.PrimeReactContext),s=D.getProps(e,c),m=p.useState(""),b=(u=2,P(a=m)||S(a,u)||O(a,u)||x()),d=b[0],v=b[1],y=p.useRef(null),g=p.useRef(null),h=p.useRef(!1),j=(s.onFilterValueChange?s.filterValue:d)||"",w=j&&j.trim().length>0,I=D.setMetaData({props:s,state:{filterValue:j}}).ptm,T=function(e){var t=e.option;s.disabled||z(t)||(s.multiple?A(e.originalEvent,t):M(e.originalEvent,t),h.current=!1)},U=function(){s.disabled||(h.current=!0)},M=function(e,t){var r=R(t),n=!1,l=null;!h.current&&s.metaKeySelection?r?(e.metaKey||e.ctrlKey)&&(l=null,n=!0):(l=J(t),n=!0):(l=r?null:J(t),n=!0);n&&K(e,l)},A=function(e,t){var r=R(t),n=!1,l=null;if(!h&&s.metaKeySelection){var o=e.metaKey||e.ctrlKey;r?(l=o?V(t):[J(t)],n=!0):(l=[].concat(E(l=o&&s.value||[]),[J(t)]),n=!0)}else l=r?V(t):[].concat(E(s.value||[]),[J(t)]),n=!0;n&&s.onChange({originalEvent:e,value:l,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:s.name,id:s.id,value:l}})},k=function(e){g.current&&g.current.scrollToIndex(0);var t=e.value;s.onFilterValueChange?s.onFilterValueChange({originalEvent:e.originalEvent,value:t}):v(t)},q=function(){v(""),s.onFilter&&s.onFilter({filter:""})},K=function(e,t){s.onChange&&s.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:s.name,id:s.id,value:t}})},V=function(e){return s.value.filter((function(t){return!l.ObjectUtils.equals(t,J(e),s.dataKey)}))},G=function(){if(null!=s.value&&te){if(!s.optionGroupLabel)return B(s.value,te);for(var e=0;e<te.length;e++){var t=B(s.value,Y(te[e]));if(-1!==t)return{group:e,option:t}}}return-1},_=function(){return s.optionValue?null:s.dataKey},B=function(e,t){var r=_();return t.findIndex((function(t){return l.ObjectUtils.equals(e,J(t),r)}))},R=function(e){var t=J(e),r=_();return s.multiple&&s.value?s.value.some((function(e){return l.ObjectUtils.equals(e,t,r)})):l.ObjectUtils.equals(s.value,t,r)},H=function(e){return s.optionLabel?l.ObjectUtils.resolveFieldData(e,s.optionLabel):e&&void 0!==e.label?e.label:e},J=function(e){return s.optionValue?l.ObjectUtils.resolveFieldData(e,s.optionValue):e&&void 0!==e.value?e.value:e},X=function(e){return s.dataKey?l.ObjectUtils.resolveFieldData(e,s.dataKey):H(e)},z=function(e){return s.optionDisabled?l.ObjectUtils.isFunction(s.optionDisabled)?s.optionDisabled(e):l.ObjectUtils.resolveFieldData(e,s.optionDisabled):!(!e||void 0===e.disabled)&&e.disabled},$=function(e){return l.ObjectUtils.resolveFieldData(e,s.optionGroupLabel)},Y=function(e){return l.ObjectUtils.resolveFieldData(e,s.optionGroupChildren)},Q=function(){if(g.current){var e=G();-1!==e&&setTimeout((function(){return g.current.scrollToIndex(e)}),0)}};p.useImperativeHandle(i,(function(){return{props:s,focus:function(){return l.DomHandler.focusFirstElement(y.current)},getElement:function(){return y.current},getVirtualScroller:function(){return g.current}}})),r.useMountEffect((function(){Q()}));var W=function(e,t){return Y(e).map((function(e,r){var n=H(e),l=r+"_"+X(e),o=z(e),i=o?null:s.tabIndex||0;return p.createElement(N,{key:l,label:n,option:e,style:t,template:s.itemTemplate,selected:R(e),onClick:T,onTouchEnd:U,tabIndex:i,disabled:o,ptm:I})}))},Z=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n={height:r.props?r.props.itemSize:void 0};if(s.optionGroupLabel){var o=s.optionGroupTemplate?l.ObjectUtils.getJSXElement(s.optionGroupTemplate,e,t):l.ObjectUtils.resolveFieldData(e,s.optionGroupLabel),i=W(e,n),a=t+"_"+$(e),u=l.mergeProps({className:"p-listbox-item-group",style:n,role:"group"},I("itemGroup"));return p.createElement(p.Fragment,{key:a},p.createElement("li",u,o),i)}var c=H(e),f=t+"_"+X(e),m=z(e),b=m?null:s.tabIndex||0;return p.createElement(N,{key:f,label:c,option:e,style:n,template:s.itemTemplate,selected:R(e),onClick:T,onTouchEnd:U,tabIndex:b,disabled:m,ptm:I})},ee=function(e,r){var n=l.mergeProps({className:"p-listbox-empty-message"},I("emptyMessage")),o=l.ObjectUtils.getJSXElement(e,s)||t.localeOption(r?"emptyFilterMessage":"emptyMessage");return p.createElement("li",n,o)},te=function(){if(w){var e=j.trim().toLocaleLowerCase(s.filterLocale),r=s.filterBy?s.filterBy.split(","):[s.optionLabel||"label"];if(s.optionGroupLabel){var n,l=[],o=L(s.options);try{for(o.s();!(n=o.n()).done;){var i=n.value,a=t.FilterService.filter(Y(i),r,e,s.filterMatchMode,s.filterLocale);a&&a.length&&l.push(F(F({},i),{items:a}))}}catch(e){o.e(e)}finally{o.f()}return l}return t.FilterService.filter(s.options,r,e,s.filterMatchMode,s.filterLocale)}return s.options}(),re=l.ObjectUtils.isNotEmpty(s.tooltip),ne=D.getOtherProps(s),le=l.ObjectUtils.reduceKeys(ne,l.DomHandler.ARIA_PROPS),oe=l.classNames("p-listbox p-component",{"p-disabled":s.disabled},s.className),ie=l.classNames("p-listbox-list-wrapper",s.listClassName),ae=function(){if(s.virtualScrollerOptions){var e=F(F({},s.virtualScrollerOptions),{items:te,onLazyLoad:function(e){return s.virtualScrollerOptions.onLazyLoad(F(F({},e),{filter:te}))},itemTemplate:function(e,t){return e&&Z(e,t.index,t)},contentTemplate:function(e){var t=l.classNames("p-listbox-list",e.className),r=l.mergeProps(F({ref:e.contentRef,style:e.style,className:t,role:"listbox","aria-multiselectable":s.multiple},le),I("list"));return p.createElement("ul",r,e.children)}});return p.createElement(o.VirtualScroller,f({ref:g},e,{pt:I("virtualScroller")}))}var t=l.ObjectUtils.isNotEmpty(te)?te.map(Z):w?ee(s.emptyFilterMessage,!0):ee(s.emptyMessage),r=l.mergeProps(F({className:"p-listbox-list",role:"listbox","aria-multiselectable":s.multiple},le),I("list"));return p.createElement("ul",r,t)}(),ue=s.filter?p.createElement(C,{filter:j,filterIcon:s.filterIcon,onFilter:k,resetFilter:q,filterTemplate:s.filterTemplate,disabled:s.disabled,filterPlaceholder:s.filterPlaceholder,filterInputProps:s.filterInputProps,ptm:I}):null,ce=l.mergeProps({className:ie,style:s.listStyle},I("wrapper")),se=l.mergeProps({ref:y,id:s.id,className:oe,style:s.style},D.getOtherProps(s),I("root"));return p.createElement(p.Fragment,null,p.createElement("div",se,ue,p.createElement("div",ce,ae)),re&&p.createElement(n.Tooltip,f({target:y,content:s.tooltip},s.tooltipOptions,{pt:I("tooltip")})))})));A.displayName="ListBox",exports.ListBox=A;

package/listbox/listbox.d.ts

@@ -9,9 +9,104 @@
  */
 import * as React from 'react';
 import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
-import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type ListBoxPassThroughType<T> = PassThroughType<T, ListBoxPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ListBoxPassThroughMethodOptions {
+    props: ListBoxProps;
+    state: ListBoxState;
+    context: ListBoxContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ListboxProps.pt}
+ */
+export interface ListboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: ListBoxPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptions}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptions;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: ListBoxPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: ListBoxPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: ListBoxPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+}
+
+/**
+ * Defines current inline state in ListBox component.
+ */
+export interface ListBoxState {
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+}
+
+/**
+ * Defines current options in ListBox component.
+ */
+export interface ListBoxContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
 
 /**
  * Custom change target options.
@@ -144,7 +239,7 @@ interface ListBoxFilterOptions {
  * Defines valid properties in ListBox component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
@@ -276,6 +371,11 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
      * @type {VirtualScrollerProps}
      */
     virtualScrollerOptions?: VirtualScrollerProps | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ListboxPassThroughOptions}
+     */
+    pt?: ListboxPassThroughOptions;
     /**
      * Callback to invoke when value of listbox changes.
      * @param {ListBoxChangeEvent} event - Custom change event.