Fixed #3039 | FilterTemplate support for components (#3071)

* Fixed #3039 | FilterTemplate support for components

* Update documentation of Tree

* Dropdown | Remove unnecessary check

* Dropdown | Refactor

* Dropdown | Re-add autoSize

* ListBox | Remove unnecessary check

* Refactor

api-generator/components/dropdown.js

@@ -65,6 +65,12 @@ const DropdownProps = [
         default: 'null',
         description: 'The template of items.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of filter element.'
+    },
     {
         name: 'optionGroupTemplate',
         type: 'any',
@@ -337,6 +343,22 @@ const DropdownEvents = [
                 description: 'Browser event'
             }
         ]
+    },
+    {
+        name: 'onFilter',
+        description: 'Callback to invoke when the value is filtered.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'event.filter',
+                type: 'any',
+                description: 'Value of the filter input'
+            }
+        ]
     }
 ];
 

api-generator/components/listbox.js

@@ -53,6 +53,12 @@ const ListBoxProps = [
         default: 'null',
         description: 'Custom template for the items.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'Custom template for the filter element.'
+    },
     {
         name: 'optionGroupTemplate',
         type: 'any',

api-generator/components/multiselect.js

@@ -185,6 +185,12 @@ const MultiSelectProps = [
         default: 'null',
         description: 'Function that gets the option and returns the content for it.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of filter element.'
+    },
     {
         name: 'optionGroupTemplate',
         type: 'any',

api-generator/components/orderlist.js

@@ -59,6 +59,42 @@ const OrderListProps = [
         default: 'null',
         description: 'Function that gets an item in the list and returns the content for it.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of filter element.'
+    },
+    {
+        name: 'filter',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, displays an input field to filter the items on keyup.'
+    },
+    {
+        name: 'filterBy',
+        type: 'string',
+        default: 'label',
+        description: 'When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.'
+    },
+    {
+        name: 'filterMatchMode',
+        type: 'string',
+        default: 'contains',
+        description: 'Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".'
+    },
+    {
+        name: 'filterPlaceholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text to show when filter input is empty.'
+    },
+    {
+        name: 'filterLocale',
+        type: 'string',
+        default: 'undefined',
+        description: "Locale to use in filtering. The default locale is the host environment's current locale."
+    },
     {
         name: 'tabIndex',
         type: 'number',
@@ -83,13 +119,32 @@ const OrderListEvents = [
                 description: 'Reordered list'
             }
         ]
+    },
+    {
+        name: 'onFilter',
+        description: 'Callback to invoke when the value is filtered.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'event.filter',
+                type: 'any',
+                description: 'Value of the filter input'
+            }
+        ]
     }
 ];
 
 const OrderListStyles = [
     { name: 'p-orderlist', description: 'Container element.' },
     { name: 'p-orderlist-list', description: 'List container.' },
-    { name: 'p-orderlist-item', description: 'An item in the list' }
+    { name: 'p-orderlist-item', description: 'An item in the list' },
+    { name: 'p-orderlist-filter-container', description: 'Container of filter input.' },
+    { name: 'p-orderlist-filter', description: 'Filter element.' },
+    { name: 'p-orderlist-filter-icon', description: 'Icon of the filter element.' },
 ];
 
 module.exports = {

api-generator/components/tree.js

@@ -131,6 +131,12 @@ const TreeProps = [
         default: 'null',
         description: 'Template of toggler element.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'Template of filter element.'
+    },
     {
         name: 'showHeader',
         type: 'boolean',

api-generator/components/treeselect.js

@@ -137,6 +137,12 @@ const TreeSelectProps = [
         default: 'null',
         description: 'The template of footer.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of filter element'
+    },
     {
         name: 'transitionOptions',
         type: 'object',

components/doc/dropdown/index.js

@@ -897,16 +897,19 @@ const cities = [
 </CodeHighlight>
 
                     <h5>Custom Content</h5>
-                    <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> function that gets the option instance as a parameter and returns the content.</p>
+                    <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> function that gets the option instance as a parameter and returns the content. For custom filter support define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element.</p>
 <CodeHighlight>
 {`
 <Dropdown value={selectedCountry} options={countries} onChange={(e) => setSelectedCountry(e.value)} optionLabel="name" placeholder="Select a Country"
-    valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
+    valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} filter filterTemplate={filterTemplate}/>
 `}
 </CodeHighlight>
 
 <CodeHighlight lang="js">
 {`
+const [filterValue, setFilterValue] = useState('');
+const filterInputRef = useRef();
+
 const selectedCountryTemplate = (option, props) => {
     if (option) {
         return (
@@ -932,6 +935,29 @@ const countryOptionTemplate = (option) => {
         </div>
     );
 }
+
+const filterTemplate = (options) => {
+    let {filterOptions} = options;
+
+    return (
+        <div className="flex gap-2">
+            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+        </div>
+    )
+}
+
+const myResetFunction = (options) => {
+    setFilterValue('');
+    options.reset();
+    filterInputRef && filterInputRef.current.focus()
+}
+
+const myFilterFunction = (event, options) => {
+    let _filterValue = event.target.value;
+    setFilterValue(_filterValue);
+    options.filter(event);
+}
 `}
 </CodeHighlight>
 
@@ -1101,6 +1127,12 @@ const groupedCities = [
                                     <td>null</td>
                                     <td>The template of items.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template of filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>optionGroupTemplate</td>
                                     <td>any</td>
@@ -1352,6 +1384,12 @@ const groupedCities = [
                                     <td>event: Browser event.</td>
                                     <td>Callback to invoke when the element loses focus.</td>
                                 </tr>
+                                <tr>
+                                    <td>onFilter</td>
+                                    <td>event.originalEvent: Original event <br />
+                                        event.filter: Value of the filter input</td>
+                                    <td>Callback to invoke when the value is filtered.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>

components/doc/listbox/index.js

@@ -516,19 +516,45 @@ const cities = [
 </CodeHighlight>
 
                     <h5>Custom Content</h5>
-                    <p>Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate property. Its value can be JSXElement, function or string.</p>
+                    <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> property. Its value can be JSXElement, function or string.  For custom filter support, define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element.</p>
 
 <CodeHighlight>
 {`
-<ListBox value={city} options={cities} onChange={(e) => setCity(e.value)} itemTemplate={itemTemplate} />
+<ListBox value={city} options={cities} onChange={(e) => setCity(e.value)} itemTemplate={itemTemplate} filter filterTemplate={filterTemplate}/>
 `}
 </CodeHighlight>
 
 <CodeHighlight lang="js">
 {`
+const [filterValue, setFilterValue] = useState('');
+const filterInputRef = React.useRef();
+
 itemTemplate(option) {
     // custom item content
 }
+
+const filterTemplate = (options) => {
+    let {filterOptions} = options;
+
+    return (
+        <div className="flex flex-column gap-2">
+            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+        </div>
+    )
+}
+
+const myResetFunction = (options) => {
+    setFilterValue('');
+    options.reset();
+    filterInputRef && filterInputRef.current.focus()
+}
+
+const myFilterFunction = (event, options) => {
+    let _filterValue = event.target.value;
+    setFilterValue(_filterValue);
+    options.filter(event);
+}
 `}
 </CodeHighlight>
                     <h5>Filtering</h5>
@@ -704,6 +730,12 @@ const groupedCities = [
                                     <td>null</td>
                                     <td>Custom template for the items.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>Custom template for the filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>optionGroupTemplate</td>
                                     <td>any</td>

components/doc/multiselect/index.js

@@ -830,19 +830,45 @@ const cities = [
 </CodeHighlight>
 
                     <h5>Custom Content</h5>
-                    <p>Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option as a parameter and returns the content.</p>
+                    <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> function that gets the option instance as a parameter and returns the content. For custom filter support define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element.</p>
 
 <CodeHighlight>
 {`
-<MultiSelect value={cities} options={citySelectItems} onChange={(e) => setCities(e.value)} itemTemplate={itemTemplate} />
+<MultiSelect value={cities} options={citySelectItems} onChange={(e) => setCities(e.value)} itemTemplate={itemTemplate} filter filterTemplate={filterTemplate}/>
 `}
 </CodeHighlight>
 
 <CodeHighlight lang="js">
 {`
+const [filterValue, setFilterValue] = useState('');
+const filterInputRef = useRef();
+
 itemTemplate(option) {
     // custom item content
 }
+
+const filterTemplate = (options) => {
+    let {filterOptions} = options;
+
+    return (
+        <div className="flex gap-2">
+            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+        </div>
+    )
+}
+
+const myResetFunction = (options) => {
+    setFilterValue('');
+    options.reset();
+    filterInputRef && filterInputRef.current.focus()
+}
+
+const myFilterFunction = (event, options) => {
+    let _filterValue = event.target.value;
+    setFilterValue(_filterValue);
+    options.filter(event);
+}
 `}
 </CodeHighlight>
                     <p><i>selectedItemTemplate</i> can be used to customize the selected values display instead of the default comma separated list.</p>
@@ -1188,6 +1214,12 @@ const groupedCities = [
                                     <td>null</td>
                                     <td>Function that gets the option and returns the content for it.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template of filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>optionGroupTemplate</td>
                                     <td>any</td>