primereact 8.7.3 → 9.0.0-beta.1

package/knob/knob.d.ts

@@ -1,31 +1,138 @@
+/**
+ *
+ * Knob is a form component to define number inputs with a dial.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/knob/)
+ *
+ * @module knob
+ *
+ */
 import * as React from 'react';
 
-interface KnobChangeParams {
+/**
+ * Custom change event.
+ * @see {@link KnobProps.onChange}
+ * @event
+ */
+interface KnobChangeEvent {
+    /**
+     * New value
+     */
     value: number;
 }
 
+/**
+ * Defines valid properties in Knob component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface KnobProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
-    id?: string;
-    style?: React.CSSProperties;
-    className?: string;
-    value?: number;
-    size?: number;
-    disabled?: boolean;
-    readOnly?: boolean;
-    showValue?: boolean;
-    step?: number;
-    min?: number;
-    max?: number;
-    strokeWidth?: number;
-    name?: string;
-    valueColor?: string;
-    rangeColor?: string;
-    textColor?: string;
-    valueTemplate?: string;
-    onChange?(e: KnobChangeParams): void;
-    children?: React.ReactNode;
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * Value of the component.
+     */
+    value?: number | undefined;
+    /**
+     * Size of the component in pixels.
+     * @defaultValue 100
+     */
+    size?: number | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the component value cannot be edited.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the show the value inside the knob.
+     * @defaultValue true
+     */
+    showValue?: boolean | undefined;
+    /**
+     * Step factor to increment/decrement the value.
+     * @defaultValue 1
+     */
+    step?: number | undefined;
+    /**
+     * Mininum boundary value.
+     * @defaultValue 0
+     */
+    min?: number | undefined;
+    /**
+     * Maximum boundary value.
+     * @defaultValue 100
+     */
+    max?: number | undefined;
+    /**
+     * Width of the knob stroke.
+     * @defaultValue 14
+     */
+    strokeWidth?: number | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Background of the value.
+     * @defaultValue var(--primary-color, Black)
+     */
+    valueColor?: string | undefined;
+    /**
+     * Background color of the range.
+     * @defaultValue var(--surface-border, LightGray)
+     */
+    rangeColor?: string | undefined;
+    /**
+     * Color of the value text.
+     * @defaultValue var(--text-color-secondary, Black)
+     */
+    textColor?: string | undefined;
+    /**
+     * Template string of the value.
+     * @defaultValue &#123;value&#125;
+     */
+    valueTemplate?: string | undefined;
+    /**
+     * Callback to invoke on value change.
+     * @param {KnobChangeEvent} event - Custom change event
+     */
+    onChange?(event: KnobChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - Knob**
+ *
+ * _Knob is a form component to define number inputs with a dial._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/knob/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class Knob extends React.Component<KnobProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }

package/listbox/listbox.cjs.js

@@ -510,6 +510,9 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return utils.DomHandler.focusFirstElement(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },

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/ripple");function u(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 c=u(e);function s(){return s=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},s.apply(this,arguments)}function p(e){return p="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},p(e)}function f(e,t){if("object"!==p(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function m(e){var t=f(e,"string");return"symbol"===p(t)?t:String(t)}function d(e,t,r){return(t=m(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(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 v(e){if(Array.isArray(e))return b(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function g(e,t){if(e){if("string"==typeof e)return b(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)?b(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e){return v(e)||y(e)||g(e)||h()}function j(e){if(Array.isArray(e))return e}function E(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 S(){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 x=c.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=c.createElement("div",{className:"p-listbox-filter-container"},c.createElement(o.InputText,s({type:"text",value:e.filter,onChange:r,className:"p-listbox-filter",disabled:e.disabled,placeholder:e.filterPlaceholder},e.filterInputProps)),c.createElement("span",{className:"p-listbox-filter-icon pi pi-search"}));e.filterTemplate&&(n=l.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-listbox-filter-container",element:n,filterOptions:t,filterInputChange:r,filterIconClassName:"p-dropdown-filter-icon pi pi-search",props:e}));return c.createElement("div",{className:"p-listbox-header"},n)}();return c.createElement(c.Fragment,null,n)}));x.displayName="ListBoxHeader";var D=c.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 c.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,c.createElement(a.Ripple,null))}));function P(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?P(Object(r),!0).forEach((function(t){d(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):P(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function N(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=T(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 T(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 F=c.memo(c.forwardRef((function(e,o){var a,u,p=c.useState(""),f=(u=2,j(a=p)||E(a,u)||g(a,u)||S()),m=f[0],d=f[1],b=c.useRef(null),v=c.useRef(null),y=c.useRef(!1),h=(e.onFilterValueChange?e.filterValue:m)||"",P=h&&h.trim().length>0,T=function(t){var r=t.option;e.disabled||H(r)||(e.multiple?L(t.originalEvent,r):I(t.originalEvent,r),y.current=!1)},C=function(){e.disabled||(y.current=!0)},I=function(t,r){var n=G(r),l=!1,i=null;!y.current&&e.metaKeySelection?n?(t.metaKey||t.ctrlKey)&&(i=null,l=!0):(i=B(r),l=!0):(i=n?null:B(r),l=!0);l&&M(t,i)},L=function(t,r){var n=G(r),l=!1,i=null;if(!y&&e.metaKeySelection){var o=t.metaKey||t.ctrlKey;n?(i=o?K(r):[B(r)],l=!0):(i=[].concat(O(i=o&&e.value||[]),[B(r)]),l=!0)}else i=n?K(r):[].concat(O(e.value||[]),[B(r)]),l=!0;l&&e.onChange({originalEvent:t,value:i,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:i}})},U=function(t){v.current&&v.current.scrollToIndex(0);var r=t.value;e.onFilterValueChange?e.onFilterValueChange({originalEvent:t.originalEvent,value:r}):d(r)},A=function(){d(""),e.onFilter&&e.onFilter({filter:""})},M=function(t,r){e.onChange&&e.onChange({originalEvent:t,value:r,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:r}})},K=function(t){return e.value.filter((function(r){return!l.ObjectUtils.equals(r,B(t),e.dataKey)}))},k=function(){if(null!=e.value&&Z){if(!e.optionGroupLabel)return V(e.value,Z);for(var t=0;t<Z.length;t++){var r=V(e.value,X(Z[t]));if(-1!==r)return{group:t,option:r}}}return-1},q=function(){return e.optionValue?null:e.dataKey},V=function(e,t){var r=q();return t.findIndex((function(t){return l.ObjectUtils.equals(e,B(t),r)}))},G=function(t){var r=B(t),n=q();return e.multiple&&e.value?e.value.some((function(e){return l.ObjectUtils.equals(e,r,n)})):l.ObjectUtils.equals(e.value,r,n)},_=function(t){return e.optionLabel?l.ObjectUtils.resolveFieldData(t,e.optionLabel):t&&void 0!==t.label?t.label:t},B=function(t){return e.optionValue?l.ObjectUtils.resolveFieldData(t,e.optionValue):t&&void 0!==t.value?t.value:t},R=function(t){return e.dataKey?l.ObjectUtils.resolveFieldData(t,e.dataKey):_(t)},H=function(t){return e.optionDisabled?l.ObjectUtils.isFunction(e.optionDisabled)?e.optionDisabled(t):l.ObjectUtils.resolveFieldData(t,e.optionDisabled):!(!t||void 0===t.disabled)&&t.disabled},z=function(t){return l.ObjectUtils.resolveFieldData(t,e.optionGroupLabel)},J=function(t){return l.ObjectUtils.resolveFieldData(t,e.optionGroupLabel)},X=function(t){return l.ObjectUtils.resolveFieldData(t,e.optionGroupChildren)},$=function(){if(v.current){var e=k();-1!==e&&setTimeout((function(){return v.current.scrollToIndex(e)}),0)}};c.useImperativeHandle(o,(function(){return{props:e,getElement:function(){return b.current},getVirtualScroller:function(){return v.current}}})),r.useMountEffect((function(){$()}));var Y=function(t,r){return X(t).map((function(t,n){var l=_(t),i=n+"_"+R(t),o=H(t),a=o?null:e.tabIndex||0;return c.createElement(D,{key:i,label:l,option:t,style:r,template:e.itemTemplate,selected:G(t),onClick:T,onTouchEnd:C,tabIndex:a,disabled:o})}))},Q=function(t,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i={height:n.props?n.props.itemSize:void 0};if(e.optionGroupLabel){var o=e.optionGroupTemplate?l.ObjectUtils.getJSXElement(e.optionGroupTemplate,t,r):J(t),a=Y(t,i),u=r+"_"+z(t);return c.createElement(c.Fragment,{key:u},c.createElement("li",{className:"p-listbox-item-group",style:i,role:"group"},o),a)}var s=_(t),p=r+"_"+R(t),f=H(t),m=f?null:e.tabIndex||0;return c.createElement(D,{key:p,label:s,option:t,style:i,template:e.itemTemplate,selected:G(t),onClick:T,onTouchEnd:C,tabIndex:m,disabled:f})},W=function(r,n){var i=l.ObjectUtils.getJSXElement(r,e)||t.localeOption(n?"emptyFilterMessage":"emptyMessage");return c.createElement("li",{className:"p-listbox-empty-message"},i)},Z=function(){if(P){var r=h.trim().toLocaleLowerCase(e.filterLocale),n=e.filterBy?e.filterBy.split(","):[e.optionLabel||"label"];if(e.optionGroupLabel){var l,i=[],o=N(e.options);try{for(o.s();!(l=o.n()).done;){var a=l.value,u=t.FilterService.filter(X(a),n,r,e.filterMatchMode,e.filterLocale);u&&u.length&&i.push(w(w({},a),{items:u}))}}catch(e){o.e(e)}finally{o.f()}return i}return t.FilterService.filter(e.options,n,r,e.filterMatchMode,e.filterLocale)}return e.options}(),ee=l.ObjectUtils.isNotEmpty(e.tooltip),te=l.ObjectUtils.findDiffKeys(e,F.defaultProps),re=l.ObjectUtils.reduceKeys(te,l.DomHandler.ARIA_PROPS),ne=l.classNames("p-listbox p-component",{"p-disabled":e.disabled},e.className),le=l.classNames("p-listbox-list-wrapper",e.listClassName),ie=function(){if(e.virtualScrollerOptions){var t=w(w({},e.virtualScrollerOptions),{items:Z,onLazyLoad:function(t){return e.virtualScrollerOptions.onLazyLoad(w(w({},t),{filter:Z}))},itemTemplate:function(e,t){return e&&Q(e,t.index,t)},contentTemplate:function(t){var r=l.classNames("p-listbox-list",t.className);return c.createElement("ul",s({ref:t.contentRef,className:r,role:"listbox","aria-multiselectable":e.multiple},re),t.children)}});return c.createElement(i.VirtualScroller,s({ref:v},t))}var r=l.ObjectUtils.isNotEmpty(Z)?Z.map(Q):P?W(e.emptyFilterMessage,!0):W(e.emptyMessage);return c.createElement("ul",s({className:"p-listbox-list",role:"listbox","aria-multiselectable":e.multiple},re),r)}(),oe=e.filter?c.createElement(x,{filter:h,onFilter:U,resetFilter:A,filterTemplate:e.filterTemplate,disabled:e.disabled,filterPlaceholder:e.filterPlaceholder,filterInputProps:e.filterInputProps}):null;return c.createElement(c.Fragment,null,c.createElement("div",s({ref:b,id:e.id,className:ne,style:e.style},te),oe,c.createElement("div",{className:le,style:e.listStyle},ie)),ee&&c.createElement(n.Tooltip,s({target:b,content:e.tooltip},e.tooltipOptions)))})));F.displayName="ListBox",F.defaultProps={__TYPE:"ListBox",className:null,dataKey:null,disabled:null,emptyFilterMessage:null,emptyMessage:null,filter:!1,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},exports.ListBox=F;
+"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/ripple");function u(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 c=u(e);function s(){return s=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},s.apply(this,arguments)}function p(e){return p="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},p(e)}function f(e,t){if("object"!==p(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function m(e){var t=f(e,"string");return"symbol"===p(t)?t:String(t)}function d(e,t,r){return(t=m(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(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 v(e){if(Array.isArray(e))return b(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function g(e,t){if(e){if("string"==typeof e)return b(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)?b(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e){return v(e)||y(e)||g(e)||h()}function E(e){if(Array.isArray(e))return e}function j(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 S(){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 x=c.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=c.createElement("div",{className:"p-listbox-filter-container"},c.createElement(o.InputText,s({type:"text",value:e.filter,onChange:r,className:"p-listbox-filter",disabled:e.disabled,placeholder:e.filterPlaceholder},e.filterInputProps)),c.createElement("span",{className:"p-listbox-filter-icon pi pi-search"}));e.filterTemplate&&(n=l.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-listbox-filter-container",element:n,filterOptions:t,filterInputChange:r,filterIconClassName:"p-dropdown-filter-icon pi pi-search",props:e}));return c.createElement("div",{className:"p-listbox-header"},n)}();return c.createElement(c.Fragment,null,n)}));x.displayName="ListBoxHeader";var D=c.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 c.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,c.createElement(a.Ripple,null))}));function P(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?P(Object(r),!0).forEach((function(t){d(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):P(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function N(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=T(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 T(e,t){if(e){if("string"==typeof e)return F(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)?F(e,t):void 0}}function F(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 C=c.memo(c.forwardRef((function(e,o){var a,u,p=c.useState(""),f=(u=2,E(a=p)||j(a,u)||g(a,u)||S()),m=f[0],d=f[1],b=c.useRef(null),v=c.useRef(null),y=c.useRef(!1),h=(e.onFilterValueChange?e.filterValue:m)||"",P=h&&h.trim().length>0,T=function(t){var r=t.option;e.disabled||R(r)||(e.multiple?L(t.originalEvent,r):I(t.originalEvent,r),y.current=!1)},F=function(){e.disabled||(y.current=!0)},I=function(t,r){var n=G(r),l=!1,i=null;!y.current&&e.metaKeySelection?n?(t.metaKey||t.ctrlKey)&&(i=null,l=!0):(i=B(r),l=!0):(i=n?null:B(r),l=!0);l&&M(t,i)},L=function(t,r){var n=G(r),l=!1,i=null;if(!y&&e.metaKeySelection){var o=t.metaKey||t.ctrlKey;n?(i=o?K(r):[B(r)],l=!0):(i=[].concat(O(i=o&&e.value||[]),[B(r)]),l=!0)}else i=n?K(r):[].concat(O(e.value||[]),[B(r)]),l=!0;l&&e.onChange({originalEvent:t,value:i,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:i}})},U=function(t){v.current&&v.current.scrollToIndex(0);var r=t.value;e.onFilterValueChange?e.onFilterValueChange({originalEvent:t.originalEvent,value:r}):d(r)},A=function(){d(""),e.onFilter&&e.onFilter({filter:""})},M=function(t,r){e.onChange&&e.onChange({originalEvent:t,value:r,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:r}})},K=function(t){return e.value.filter((function(r){return!l.ObjectUtils.equals(r,B(t),e.dataKey)}))},k=function(){if(null!=e.value&&Z){if(!e.optionGroupLabel)return V(e.value,Z);for(var t=0;t<Z.length;t++){var r=V(e.value,X(Z[t]));if(-1!==r)return{group:t,option:r}}}return-1},q=function(){return e.optionValue?null:e.dataKey},V=function(e,t){var r=q();return t.findIndex((function(t){return l.ObjectUtils.equals(e,B(t),r)}))},G=function(t){var r=B(t),n=q();return e.multiple&&e.value?e.value.some((function(e){return l.ObjectUtils.equals(e,r,n)})):l.ObjectUtils.equals(e.value,r,n)},_=function(t){return e.optionLabel?l.ObjectUtils.resolveFieldData(t,e.optionLabel):t&&void 0!==t.label?t.label:t},B=function(t){return e.optionValue?l.ObjectUtils.resolveFieldData(t,e.optionValue):t&&void 0!==t.value?t.value:t},H=function(t){return e.dataKey?l.ObjectUtils.resolveFieldData(t,e.dataKey):_(t)},R=function(t){return e.optionDisabled?l.ObjectUtils.isFunction(e.optionDisabled)?e.optionDisabled(t):l.ObjectUtils.resolveFieldData(t,e.optionDisabled):!(!t||void 0===t.disabled)&&t.disabled},z=function(t){return l.ObjectUtils.resolveFieldData(t,e.optionGroupLabel)},J=function(t){return l.ObjectUtils.resolveFieldData(t,e.optionGroupLabel)},X=function(t){return l.ObjectUtils.resolveFieldData(t,e.optionGroupChildren)},$=function(){if(v.current){var e=k();-1!==e&&setTimeout((function(){return v.current.scrollToIndex(e)}),0)}};c.useImperativeHandle(o,(function(){return{props:e,focus:function(){return l.DomHandler.focusFirstElement(b.current)},getElement:function(){return b.current},getVirtualScroller:function(){return v.current}}})),r.useMountEffect((function(){$()}));var Y=function(t,r){return X(t).map((function(t,n){var l=_(t),i=n+"_"+H(t),o=R(t),a=o?null:e.tabIndex||0;return c.createElement(D,{key:i,label:l,option:t,style:r,template:e.itemTemplate,selected:G(t),onClick:T,onTouchEnd:F,tabIndex:a,disabled:o})}))},Q=function(t,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i={height:n.props?n.props.itemSize:void 0};if(e.optionGroupLabel){var o=e.optionGroupTemplate?l.ObjectUtils.getJSXElement(e.optionGroupTemplate,t,r):J(t),a=Y(t,i),u=r+"_"+z(t);return c.createElement(c.Fragment,{key:u},c.createElement("li",{className:"p-listbox-item-group",style:i,role:"group"},o),a)}var s=_(t),p=r+"_"+H(t),f=R(t),m=f?null:e.tabIndex||0;return c.createElement(D,{key:p,label:s,option:t,style:i,template:e.itemTemplate,selected:G(t),onClick:T,onTouchEnd:F,tabIndex:m,disabled:f})},W=function(r,n){var i=l.ObjectUtils.getJSXElement(r,e)||t.localeOption(n?"emptyFilterMessage":"emptyMessage");return c.createElement("li",{className:"p-listbox-empty-message"},i)},Z=function(){if(P){var r=h.trim().toLocaleLowerCase(e.filterLocale),n=e.filterBy?e.filterBy.split(","):[e.optionLabel||"label"];if(e.optionGroupLabel){var l,i=[],o=N(e.options);try{for(o.s();!(l=o.n()).done;){var a=l.value,u=t.FilterService.filter(X(a),n,r,e.filterMatchMode,e.filterLocale);u&&u.length&&i.push(w(w({},a),{items:u}))}}catch(e){o.e(e)}finally{o.f()}return i}return t.FilterService.filter(e.options,n,r,e.filterMatchMode,e.filterLocale)}return e.options}(),ee=l.ObjectUtils.isNotEmpty(e.tooltip),te=l.ObjectUtils.findDiffKeys(e,C.defaultProps),re=l.ObjectUtils.reduceKeys(te,l.DomHandler.ARIA_PROPS),ne=l.classNames("p-listbox p-component",{"p-disabled":e.disabled},e.className),le=l.classNames("p-listbox-list-wrapper",e.listClassName),ie=function(){if(e.virtualScrollerOptions){var t=w(w({},e.virtualScrollerOptions),{items:Z,onLazyLoad:function(t){return e.virtualScrollerOptions.onLazyLoad(w(w({},t),{filter:Z}))},itemTemplate:function(e,t){return e&&Q(e,t.index,t)},contentTemplate:function(t){var r=l.classNames("p-listbox-list",t.className);return c.createElement("ul",s({ref:t.contentRef,className:r,role:"listbox","aria-multiselectable":e.multiple},re),t.children)}});return c.createElement(i.VirtualScroller,s({ref:v},t))}var r=l.ObjectUtils.isNotEmpty(Z)?Z.map(Q):P?W(e.emptyFilterMessage,!0):W(e.emptyMessage);return c.createElement("ul",s({className:"p-listbox-list",role:"listbox","aria-multiselectable":e.multiple},re),r)}(),oe=e.filter?c.createElement(x,{filter:h,onFilter:U,resetFilter:A,filterTemplate:e.filterTemplate,disabled:e.disabled,filterPlaceholder:e.filterPlaceholder,filterInputProps:e.filterInputProps}):null;return c.createElement(c.Fragment,null,c.createElement("div",s({ref:b,id:e.id,className:ne,style:e.style},te),oe,c.createElement("div",{className:le,style:e.listStyle},ie)),ee&&c.createElement(n.Tooltip,s({target:b,content:e.tooltip},e.tooltipOptions)))})));C.displayName="ListBox",C.defaultProps={__TYPE:"ListBox",className:null,dataKey:null,disabled:null,emptyFilterMessage:null,emptyMessage:null,filter:!1,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},exports.ListBox=C;

package/listbox/listbox.d.ts

@@ -1,93 +1,315 @@
+/**
+ *
+ * ListBox is used to select one or more values from a list of items.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/listbox/)
+ *
+ * @module listbox
+ *
+ */
 import * as React from 'react';
 import { SelectItemOptionsType } from '../selectitem/selectitem';
-import TooltipOptions from '../tooltip/tooltipoptions';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller';
 
-type ListBoxOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
-
-type ListBoxItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
-
-type ListBoxFilterTemplateType = React.ReactNode | ((options: ListBoxFilterTemplateOptions) => React.ReactNode);
-
-type ListBoxEmptyMessageType = React.ReactNode | ((props: ListBoxProps) => React.ReactNode);
-
-type ListBoxEmptyFilterMessageType = React.ReactNode | ((props: ListBoxProps) => React.ReactNode);
-
-type ListBoxOptionDisabledType = string | ((option: any) => boolean);
-
+/**
+ * Custom change target options.
+ * @group Misc
+ */
 interface ListBoxChangeTargetOptions {
+    /**
+     * The name of the target.
+     */
     name: string;
+    /**
+     * Unique identifier of the element.
+     */
     id: string;
+    /**
+     * New value of the element.
+     */
     value: any;
 }
 
-interface ListBoxChangeParams {
+/**
+ * Custom change event.
+ * @see {@link ListBoxProps.onChange}
+ * @event
+ */
+interface ListBoxChangeEvent {
+    /**
+     * Browser event.
+     */
     originalEvent: React.SyntheticEvent;
+    /**
+     * Single value or an array of values depending on the selection mode
+     */
     value: any;
+    /**
+     * Stops the event from propagating.
+     */
     stopPropagation(): void;
+    /**
+     * Prevents the default action of the event.
+     */
     preventDefault(): void;
+    /**
+     * Target element.
+     */
     target: ListBoxChangeTargetOptions;
 }
 
-interface ListBoxFilterValueChangeParams {
+/**
+ * Custom filter value change event.
+ * @see {@link ListBoxProps.onFilterValueChange}
+ * @event
+ */
+interface ListBoxFilterValueChangeEvent {
+    /**
+     * Browser event.
+     */
     originalEvent: React.SyntheticEvent;
+    /**
+     * The filtered value
+     */
     value: any;
 }
 
+/**
+ * Custom filter template options.
+ * @group Misc
+ */
 interface ListBoxFilterTemplateOptions {
+    /**
+     * Style class of the filter.
+     */
     className: string;
+    /**
+     * Whether the option is disabled or not
+     */
     disabled?: boolean;
+    /**
+     * The filter element.
+     */
     element: HTMLDivElement;
+    /**
+     * The filter.
+     */
     filter?: string;
+    /**
+     * Style class of the filter icon.
+     */
     filterIconClassName: string;
+    /**
+     * Browser change event for the filter input element.
+     */
     filterInputChange?: React.ChangeEvent<HTMLInputElement>;
+    /**
+     * The props of the filter input element.
+     */
     filterInputProps?: any;
+    /**
+     * The filter input options.
+     */
     filterOptions?: ListBoxFilterOptions;
+    /**
+     * The placeholder of the filter element.
+     */
     filterPlaceholder?: string;
-    filterTemplate?: ListBoxFilterTemplateType;
+    /**
+     * Custom filter template.
+     */
+    filterTemplate?: React.ReactNode | ((options: ListBoxFilterTemplateOptions) => React.ReactNode);
 }
 
+/**
+ * Custom filter options.
+ * @group Misc
+ */
 interface ListBoxFilterOptions {
+    /**
+     * Used to filter options
+     * @param { React.ChangeEvent<HTMLInputElement>} event - Browser event.
+     */
     filter?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Used to reset the filtered options
+     */
     reset?: () => void;
 }
 
+/**
+ * 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'> {
-    ariaLabelledBy?: string;
-    children?: React.ReactNode;
-    dataKey?: string;
-    disabled?: boolean;
-    emptyMessage?: ListBoxEmptyMessageType;
-    emptyFilterMessage?: ListBoxEmptyFilterMessageType;
-    filter?: boolean;
-    filterBy?: string;
-    filterInputProps?: any;
-    filterLocale?: string;
-    filterMatchMode?: string;
-    filterPlaceholder?: string;
-    filterTemplate?: ListBoxFilterTemplateType;
-    filterValue?: string;
-    itemTemplate?: ListBoxItemTemplateType;
-    listClassName?: string;
-    listStyle?: React.CSSProperties;
-    metaKeySelection?: boolean;
-    multiple?: boolean;
-    optionDisabled?: ListBoxOptionDisabledType;
-    optionGroupChildren?: string;
-    optionGroupLabel?: string;
-    optionGroupTemplate?: ListBoxOptionGroupTemplateType;
-    optionLabel?: string;
-    optionValue?: string;
-    options?: SelectItemOptionsType;
-    tooltip?: string;
-    tooltipOptions?: TooltipOptions;
-    value?: any;
-    virtualScrollerOptions?: VirtualScrollerProps;
-    onChange?(e: ListBoxChangeParams): void;
-    onFilterValueChange?(e: ListBoxFilterValueChangeParams): void;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * A property to uniquely match the value in options for better performance.
+     * @defaultValue false
+     */
+    dataKey?: string | undefined;
+    /**
+     * When specified, disables the component.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Text to display when there is no data.
+     */
+    emptyMessage?: React.ReactNode | ((props: ListBoxProps) => React.ReactNode);
+    /**
+     * Template to display when filtering does not return any results.
+     */
+    emptyFilterMessage?: React.ReactNode | ((props: ListBoxProps) => React.ReactNode);
+    /**
+     * When specified, displays a filter input at header.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filterBy?: string | undefined;
+    /**
+     * Props for the filter input, any prop is passed implicity to the filter input element.
+     * @defaultValue undefined
+     */
+    filterInputProps?: any | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
+     * @defaultValue contains
+     */
+    filterMatchMode?: string | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * Custom template for the filter element.
+     */
+    filterTemplate?: React.ReactNode | ((options: ListBoxFilterTemplateOptions) => React.ReactNode);
+    /**
+     * When specified, filter displays with this value.
+     */
+    filterValue?: string | undefined;
+    /**
+     * Custom template for the items.
+     */
+    itemTemplate?: React.ReactNode | ((option: any) => React.ReactNode);
+    /**
+     * Inline style class of inner list element.
+     */
+    listClassName?: string | undefined;
+    /**
+     * Inline style of inner list element.
+     */
+    listStyle?: React.CSSProperties | undefined;
+    /**
+     * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @defaultValue true
+     */
+    metaKeySelection?: boolean | undefined;
+    /**
+     * When specified, allows selecting multiple values.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     */
+    optionDisabled?: string | ((option: any) => boolean) | undefined;
+    /**
+     * Property name or getter function that refers to the children options of option group.
+     */
+    optionGroupChildren?: string | undefined;
+    /**
+     * Property name or getter function to use as the label of an option group.
+     */
+    optionGroupLabel?: string | undefined;
+    /**
+     * Template of an option group item.
+     */
+    optionGroupTemplate?: React.ReactNode | ((option: any, index: number) => React.ReactNode);
+    /**
+     * Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
+     */
+    optionLabel?: string | undefined;
+    /**
+     * Name of the value field of an option when arbitrary objects are used as options instead of SelectItems.
+     */
+    optionValue?: string | undefined;
+    /**
+     * An array of objects to display as the available options.
+     */
+    options?: SelectItemOptionsType | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Selected value to display.
+     */
+    value?: any | undefined;
+    /**
+     * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
+     * @type {VirtualScrollerProps}
+     */
+    virtualScrollerOptions?: VirtualScrollerProps | undefined;
+    /**
+     * Callback to invoke when value of listbox changes.
+     * @param {ListBoxChangeEvent} event - Custom change event.
+     */
+    onChange?(event: ListBoxChangeEvent): void;
+    /**
+     * Callback to invoke when filter value changes.
+     * @param {ListBoxFilterValueChangeEvent} event - Custom filter value change event.
+     */
+    onFilterValueChange?(event: ListBoxFilterValueChangeEvent): void;
 }
 
+/**
+ * **PrimeReact - ListBox**
+ *
+ * _ListBox is used to select one or more values from a list of items._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/listbox/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class ListBox extends React.Component<ListBoxProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement} Container element
+     */
     public getElement(): HTMLDivElement;
+    /**
+     * Used to get the virtual scroller instance.
+     * @return {VirtualScroller} Virtual Scroller instance
+     */
     public getVirtualScroller(): VirtualScroller;
 }

package/listbox/listbox.esm.js

@@ -486,6 +486,9 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focusFirstElement(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },