From 785f792b9712d46b58a75aca0907090e0c04df84 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 22 May 2023 10:19:34 -0400
Subject: [PATCH 01/34] Fix #4435: Image indicatorIcon docs (#4436)

---
 components/doc/image/templatedoc.js | 10 +++++-----
 components/lib/image/image.d.ts     |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/doc/image/templatedoc.js b/components/doc/image/templatedoc.js
index ec275257b5..1934501ae4 100644
--- a/components/doc/image/templatedoc.js
+++ b/components/doc/image/templatedoc.js
@@ -7,7 +7,7 @@ export function TemplateDoc(props) {
 
     const code = {
         basic: `
-<Image src="/images/galleria/galleria12.jpg" template={icon} alt="Image" preview width="250" />
+<Image src="/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />
         `,
         javascript: `
 import React from 'react'; 
@@ -18,7 +18,7 @@ export default function TemplateDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" template={icon} alt="Image" preview width="250" />
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />
         </div>
     )
 }
@@ -32,7 +32,7 @@ export default function TemplateDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" template={icon} alt="Image" preview width="250" />
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />
         </div>
     )
 }
@@ -43,11 +43,11 @@ export default function TemplateDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>template</i> prop for custom content.
+                    An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicatorIcon</i> prop for custom content.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" template={icon} alt="Image" preview width="250" />
+                <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/image/image.d.ts b/components/lib/image/image.d.ts
index 6a60c56343..be3fcf7268 100644
--- a/components/lib/image/image.d.ts
+++ b/components/lib/image/image.d.ts
@@ -217,7 +217,7 @@ export interface ImageProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      */
     src?: string | undefined;
     /**
-     * Changing the default icon when the image is hovered in preview mode.
+     * Changing the default icon when the image is hovered in preview mode. Since v9, use `indicatorIcon` instead.
      * @deprecated Since v9, use `indicatorIcon` instead.
      */
     template?: any | undefined;

From 533b5c758fed42cddac5ca50230c8aa258aaf3f8 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Mon, 22 May 2023 14:20:14 +0000
Subject: [PATCH 02/34] Update API doc

---
 components/doc/common/apidoc/index.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index e14ae5e4c6..e40d4060fd 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -20643,7 +20643,7 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Changing the default icon when the image is hovered in preview mode.",
+                            "description": "Changing the default icon when the image is hovered in preview mode. Since v9, use  `indicatorIcon`  instead.",
                             "deprecated": "Since v9, use "
                         },
                         {

From 5476c88697f8cf9c0326f96326033632f8524792 Mon Sep 17 00:00:00 2001
From: Rohit Bhatia <irohitbhatia@gmail.com>
Date: Mon, 22 May 2023 09:03:58 -0700
Subject: [PATCH 03/34] feat: added support for panelFooterTemplate for
 autocomplete (#4428)

* feat: added support for autocomplete

* chore: prettier fix

* Refactor: Panel footer template AutoComplete

* chore: intendation

* fix: p-multiselect-footer to autocomplete footer

* fix: autofocus to autocomplete

* fix: linting issue
---
 components/doc/autocomplete/templatedoc.js    | 56 +++++++++++++++++--
 components/doc/common/apidoc/index.json       |  8 +++
 components/lib/autocomplete/AutoComplete.css  |  5 +-
 .../lib/autocomplete/AutoCompleteBase.js      |  1 +
 .../lib/autocomplete/AutoCompletePanel.js     | 22 ++++++--
 components/lib/autocomplete/autocomplete.d.ts |  4 ++
 6 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/components/doc/autocomplete/templatedoc.js b/components/doc/autocomplete/templatedoc.js
index 6cb15d4a25..aca7cb8252 100644
--- a/components/doc/autocomplete/templatedoc.js
+++ b/components/doc/autocomplete/templatedoc.js
@@ -35,14 +35,30 @@ export function TemplateDoc(props) {
         );
     };
 
+    const panelFooterTemplate = () => {
+        const isCountrySelected = (filteredCountries || []).some((country) => country['name'] === selectedCountry);
+
+        return (
+            <div className="py-2 px-3">
+                {isCountrySelected ? (
+                    <span>
+                        <b>{selectedCountry}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
+
     useEffect(() => {
         CountryService.getCountries().then((data) => setCountries(data));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const code = {
         basic: `
-<AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} 
-    completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} />
+<AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries}  
+    completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} />
         `,
         javascript: `
 import React, { useEffect, useState } from 'react';
@@ -54,6 +70,21 @@ export default function TemplateDemo() {
     const [selectedCountry, setSelectedCountry] = useState(null);
     const [filteredCountries, setFilteredCountries] = useState(null);
 
+    const panelFooterTemplate = () => {
+        const isCountrySelected = (filteredCountries || []).some( country => country['name'] === selectedCountry );
+           return (
+            <div className="py-2 px-3">
+                {isCountrySelected ? (
+                    <span>
+                        <b>{selectedCountry}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
+
     const search = (event) => {
         // Timeout to emulate a network connection
         setTimeout(() => {
@@ -93,7 +124,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} 
-                completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} />
+                completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} />
         </div>
     )
 }
@@ -144,6 +175,21 @@ export default function TemplateDemo() {
             </div>
         );
     };
+    
+    const panelFooterTemplate = () => {
+        const isCountrySelected = (filteredCountries || []).some( country => country['name'] === selectedCountry );
+           return (
+            <div className="py-2 px-3">
+                {isCountrySelected ? (
+                    <span>
+                        <b>{selectedCountry}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
 
     useEffect(() => {
         CountryService.getCountries().then((data) => setCountries(data));
@@ -152,7 +198,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} 
-                completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} />
+                completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} />
         </div>
     )
 }
@@ -175,7 +221,7 @@ export default function TemplateDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} />
+                <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} />
             </div>
             <DocSectionCode code={code} service={['CountryService']} />
         </>
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index e40d4060fd..c86b541be5 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -2402,6 +2402,14 @@
                             "default": "",
                             "description": "Number of maximum options that can be selected."
                         },
+                        {
+                            "name": "panelFooterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the panel footer."
+                        },
                         {
                             "name": "name",
                             "optional": true,
diff --git a/components/lib/autocomplete/AutoComplete.css b/components/lib/autocomplete/AutoComplete.css
index 8215cbf60d..9bd79bef60 100644
--- a/components/lib/autocomplete/AutoComplete.css
+++ b/components/lib/autocomplete/AutoComplete.css
@@ -33,7 +33,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    overflow: auto;
 }
 
 .p-autocomplete-items {
@@ -94,3 +93,7 @@
 .p-fluid .p-autocomplete-dd .p-autocomplete-input {
     width: 1%;
 }
+
+.p-autocomplete-items-wrapper {
+    overflow: auto;
+} 
diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js
index e3edacfdbf..b8d847eeae 100644
--- a/components/lib/autocomplete/AutoCompleteBase.js
+++ b/components/lib/autocomplete/AutoCompleteBase.js
@@ -48,6 +48,7 @@ export const AutoCompleteBase = {
         optionGroupLabel: null,
         optionGroupTemplate: null,
         panelClassName: null,
+        panelFooterTemplate: null,
         panelStyle: null,
         placeholder: null,
         readOnly: false,
diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
index d870d0d5fe..9d3cda1f22 100644
--- a/components/lib/autocomplete/AutoCompletePanel.js
+++ b/components/lib/autocomplete/AutoCompletePanel.js
@@ -12,6 +12,16 @@ export const AutoCompletePanel = React.memo(
             return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
         };
 
+        const createFooter = () => {
+            if (props.panelFooterTemplate) {
+                const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
+
+                return <div className="p-autocomplete-footer">{content}</div>;
+            }
+
+            return null;
+        };
+
         const createGroupChildren = (optionGroup, i, style) => {
             const groupChildren = props.getOptionGroupChildren(optionGroup);
 
@@ -99,9 +109,11 @@ export const AutoCompletePanel = React.memo(
                 const items = createItems();
 
                 return (
-                    <ul className="p-autocomplete-items" role="listbox" id={props.listId}>
-                        {items}
-                    </ul>
+                    <div className="p-autocomplete-items-wrapper" style={{ maxHeight: props.scrollHeight || 'auto' }}>
+                        <ul className="p-autocomplete-items" role="listbox" id={props.listId}>
+                            {items}
+                        </ul>
+                    </div>
                 );
             }
         };
@@ -111,8 +123,9 @@ export const AutoCompletePanel = React.memo(
                 'p-input-filled': PrimeReact.inputStyle === 'filled',
                 'p-ripple-disabled': PrimeReact.ripple === false
             });
-            const style = { maxHeight: props.scrollHeight, ...(props.panelStyle || {}) };
+            const style = { ...(props.panelStyle || {}) };
             const content = createContent();
+            const footer = createFooter();
 
             return (
                 <CSSTransition
@@ -130,6 +143,7 @@ export const AutoCompletePanel = React.memo(
                 >
                     <div ref={ref} className={className} style={style} onClick={props.onClick}>
                         {content}
+                        {footer}
                     </div>
                 </CSSTransition>
             );
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index f1347982f3..4b11319b8e 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -216,6 +216,10 @@ export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.HT
      * Style class of the overlay panel element.
      */
     panelClassName?: string | undefined;
+    /**
+     * Template of the panel footer.
+     */
+    panelFooterTemplate?: React.ReactNode | ((props: AutoCompleteProps, hide: () => void) => React.ReactNode);
     /**
      * Inline style of the overlay panel element.
      */

From dc6fafd069e89f742b9763f05ed49f01ae9d0a29 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Mon, 22 May 2023 16:04:45 +0000
Subject: [PATCH 04/34] Update API doc

---
 components/doc/common/apidoc/index.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index c86b541be5..2bb36ed758 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -2402,14 +2402,6 @@
                             "default": "",
                             "description": "Number of maximum options that can be selected."
                         },
-                        {
-                            "name": "panelFooterTemplate",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ReactNode | Function",
-                            "default": "",
-                            "description": "Template of the panel footer."
-                        },
                         {
                             "name": "name",
                             "optional": true,
@@ -2450,6 +2442,14 @@
                             "default": "",
                             "description": "Style class of the overlay panel element."
                         },
+                        {
+                            "name": "panelFooterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the panel footer."
+                        },
                         {
                             "name": "panelStyle",
                             "optional": true,

From f8aaad736a1b79becc30b8548812a7d177907010 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Tue, 23 May 2023 11:36:09 +0300
Subject: [PATCH 05/34] Refactor #4393 - for Galleria

---
 components/doc/galleria/pt/ptdoc.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/doc/galleria/pt/ptdoc.js b/components/doc/galleria/pt/ptdoc.js
index 7ff24bdb03..5d969fb0b8 100644
--- a/components/doc/galleria/pt/ptdoc.js
+++ b/components/doc/galleria/pt/ptdoc.js
@@ -83,7 +83,7 @@ export default function PTDemo() {
     }
 
     return (
-        <div className="card md:flex md:justify-content-center">
+        <div className="card">
             <Galleria
                 value={images}
                 responsiveOptions={responsiveOptions}
@@ -134,7 +134,7 @@ export default function PTDemo() {
     }
 
     return (
-        <div className="card md:flex md:justify-content-center">
+        <div className="card">
             <Galleria
                 value={images}
                 responsiveOptions={responsiveOptions}
@@ -165,7 +165,7 @@ export default function PTDemo() {
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <div className="card md:flex md:justify-content-center">
+            <div className="card">
                 <Galleria
                     value={images}
                     responsiveOptions={responsiveOptions}

From 936f9644a29c75ab5df233120d966ec1786178a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Tue, 23 May 2023 14:40:29 +0300
Subject: [PATCH 06/34] Fix #4438 Refactor #4391 - For BreadCrumb

---
 components/doc/common/apidoc/index.json         |  7 +++++++
 components/lib/breadcrumb/BreadCrumb.css        |  5 +++++
 components/lib/breadcrumb/BreadCrumb.js         | 17 ++++++++++++++---
 components/lib/breadcrumb/breadcrumb.d.ts       |  4 ++++
 public/themes/arya-blue/theme.css               | 14 +++++++-------
 public/themes/arya-green/theme.css              | 14 +++++++-------
 public/themes/arya-orange/theme.css             | 14 +++++++-------
 public/themes/arya-purple/theme.css             | 14 +++++++-------
 public/themes/bootstrap4-dark-blue/theme.css    | 14 +++++++-------
 public/themes/bootstrap4-dark-purple/theme.css  | 14 +++++++-------
 public/themes/bootstrap4-light-blue/theme.css   | 14 +++++++-------
 public/themes/bootstrap4-light-purple/theme.css | 14 +++++++-------
 public/themes/fluent-light/theme.css            | 14 +++++++-------
 public/themes/lara-dark-blue/theme.css          | 14 +++++++-------
 public/themes/lara-dark-indigo/theme.css        | 14 +++++++-------
 public/themes/lara-dark-purple/theme.css        | 14 +++++++-------
 public/themes/lara-dark-teal/theme.css          | 14 +++++++-------
 public/themes/lara-light-blue/theme.css         | 14 +++++++-------
 public/themes/lara-light-indigo/theme.css       | 14 +++++++-------
 public/themes/lara-light-purple/theme.css       | 14 +++++++-------
 public/themes/lara-light-teal/theme.css         | 14 +++++++-------
 public/themes/luna-amber/theme.css              | 14 +++++++-------
 public/themes/luna-blue/theme.css               | 14 +++++++-------
 public/themes/luna-green/theme.css              | 14 +++++++-------
 public/themes/luna-pink/theme.css               | 14 +++++++-------
 public/themes/md-dark-deeppurple/theme.css      | 14 +++++++-------
 public/themes/md-dark-indigo/theme.css          | 14 +++++++-------
 public/themes/md-light-deeppurple/theme.css     | 14 +++++++-------
 public/themes/md-light-indigo/theme.css         | 14 +++++++-------
 public/themes/mdc-dark-deeppurple/theme.css     | 14 +++++++-------
 public/themes/mdc-dark-indigo/theme.css         | 14 +++++++-------
 public/themes/mdc-light-deeppurple/theme.css    | 14 +++++++-------
 public/themes/mdc-light-indigo/theme.css        | 14 +++++++-------
 public/themes/mira/theme.css                    | 14 +++++++-------
 public/themes/nano/theme.css                    | 14 +++++++-------
 public/themes/nova-accent/theme.css             | 14 +++++++-------
 public/themes/nova-alt/theme.css                | 14 +++++++-------
 public/themes/nova/theme.css                    | 14 +++++++-------
 public/themes/rhea/theme.css                    | 14 +++++++-------
 public/themes/saga-blue/theme.css               | 14 +++++++-------
 public/themes/saga-green/theme.css              | 14 +++++++-------
 public/themes/saga-orange/theme.css             | 14 +++++++-------
 public/themes/saga-purple/theme.css             | 14 +++++++-------
 public/themes/soho-dark/theme.css               | 14 +++++++-------
 public/themes/soho-light/theme.css              | 14 +++++++-------
 public/themes/tailwind-light/theme.css          | 14 +++++++-------
 public/themes/vela-blue/theme.css               | 14 +++++++-------
 public/themes/vela-green/theme.css              | 14 +++++++-------
 public/themes/vela-orange/theme.css             | 14 +++++++-------
 public/themes/vela-purple/theme.css             | 14 +++++++-------
 public/themes/viva-dark/theme.css               | 14 +++++++-------
 public/themes/viva-light/theme.css              | 14 +++++++-------
 52 files changed, 366 insertions(+), 339 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 2bb36ed758..c015961198 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -3607,6 +3607,13 @@
                             "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLSpanElement>>",
                             "description": "Uses to pass attributes to the label's DOM element."
                         },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
                         {
                             "name": "separatorIcon",
                             "optional": true,
diff --git a/components/lib/breadcrumb/BreadCrumb.css b/components/lib/breadcrumb/BreadCrumb.css
index 3015d625c5..a433ec4df2 100644
--- a/components/lib/breadcrumb/BreadCrumb.css
+++ b/components/lib/breadcrumb/BreadCrumb.css
@@ -21,6 +21,11 @@
     align-items: center;
 }
 
+.p-breadcrumb .p-menuitem-separator {
+    display: flex;
+    align-items: center;
+}
+
 .p-breadcrumb::-webkit-scrollbar {
     display: none;
 }
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index f37a960555..938732bdec 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -96,8 +96,14 @@ export const BreadCrumb = React.memo(
             );
             const icon = props.separatorIcon || <ChevronRightIcon {...separatorIconProps} />;
             const separatorIcon = IconUtils.getJSXIcon(icon, { ...separatorIconProps }, { props });
+            const separatorProps = mergeProps(
+                {
+                    className: 'p-menuitem-separator'
+                },
+                ptm('separator')
+            );
 
-            return separatorIcon;
+            return <li {...separatorProps}>{separatorIcon}</li>;
         };
 
         const createMenuitem = (item) => {
@@ -105,7 +111,7 @@ export const BreadCrumb = React.memo(
                 return null;
             }
 
-            const className = classNames(item.className, { 'p-disabled': item.disabled });
+            const className = classNames('p-menuitem', item.className, { 'p-disabled': item.disabled });
             const labelProps = mergeProps(
                 {
                     className: 'p-menuitem-text'
@@ -182,7 +188,12 @@ export const BreadCrumb = React.memo(
         const home = createHome();
         const items = createMenuitems();
         const separator = createSeparator();
-        const menuProps = mergeProps(ptm('menu'));
+        const menuProps = mergeProps(
+            {
+                className: 'p-breadcrumb-list'
+            },
+            ptm('menu')
+        );
         const rootProps = mergeProps(
             {
                 id: props.id,
diff --git a/components/lib/breadcrumb/breadcrumb.d.ts b/components/lib/breadcrumb/breadcrumb.d.ts
index f9ac34131e..5e5e643bb6 100644
--- a/components/lib/breadcrumb/breadcrumb.d.ts
+++ b/components/lib/breadcrumb/breadcrumb.d.ts
@@ -49,6 +49,10 @@ export interface BreadCrumbPassThroughOptions {
      * Uses to pass attributes to the label's DOM element.
      */
     label?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
     /**
      * Uses to pass attributes to the separator icon's DOM element.
      */
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 36c77e1533..3d796a1ed2 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #93cbf9;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index cc29517266..3ff8820922 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #a7d8a9;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 649a39805a..bd04da7cb8 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 4274d649fe..6d651a8ce3 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 075fa0326c..30f8eda5f0 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -4539,29 +4539,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.15s;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #e3f3fe;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #8dd0ff;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #8dd0ff;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.87);
 }
 
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index c21503d681..640a130995 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -4539,29 +4539,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.15s;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #f0e6f5;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #c298d8;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #c298d8;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.87);
 }
 
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 889b0a112b..eec6179423 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -4539,29 +4539,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.15s;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #007bff;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #007bff;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #6c757d;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #6c757d;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index f116ca4ad8..ad6aad56ca 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -4539,29 +4539,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.15s;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #883cae;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #883cae;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #6c757d;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #6c757d;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 7a0bedb701..fdfbe57577 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 2px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 2px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #605e5c;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #323130;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #0078d4;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #323130;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #323130;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #0078d4;
 }
 
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 400d584ce5..ae334c9b24 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index adcd2d0784..bfc1c31ec1 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 0042893f46..ff09549d4c 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 49dd84cec9..b9fa155b72 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 64551ae8ab..daa66ad4c0 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #BFDBFE;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index f388263e95..9be66e15a2 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #C7D2FE;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 3e220b73e1..16c3363e6f 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #DDD6FE;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 04959f3950..94a2f7c8c9 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #99F6E4;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 0230ee858c..7e5b8fc749 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -4514,29 +4514,29 @@
   border-radius: 3px;
   padding: 0.571rem 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #dedede;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #dedede;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #dedede;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #dedede;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #dedede;
 }
 
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 05c6ba7c01..edd7387b5c 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -4514,29 +4514,29 @@
   border-radius: 3px;
   padding: 0.571rem 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #dedede;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #dedede;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #dedede;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #dedede;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #dedede;
 }
 
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index a9ffa210e2..b8cad68a07 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -4514,29 +4514,29 @@
   border-radius: 3px;
   padding: 0.571rem 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #dedede;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #dedede;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #dedede;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #dedede;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #dedede;
 }
 
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 2753ff02f8..64a4636b1e 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -4514,29 +4514,29 @@
   border-radius: 3px;
   padding: 0.571rem 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #dedede;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #dedede;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #dedede;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #dedede;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #dedede;
 }
 
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index d0888f54ba..2a4ef06bab 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -4548,29 +4548,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 576f39e025..e6fb5ea4f8 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -4548,29 +4548,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 0f9b5f95f3..25d18eae4d 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -4548,29 +4548,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(0, 0, 0, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(0, 0, 0, 0.6);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(0, 0, 0, 0.6);
 }
 
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 046c3ccc74..194093f425 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -4548,29 +4548,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(0, 0, 0, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(0, 0, 0, 0.6);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(0, 0, 0, 0.6);
 }
 
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index e7893b2222..89a2751a72 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -4548,29 +4548,29 @@
   border-radius: 4px;
   padding: 0.75rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index cbf45d915a..51de39614e 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -4548,29 +4548,29 @@
   border-radius: 4px;
   padding: 0.75rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index aa4d39dcd0..e060f0d183 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -4548,29 +4548,29 @@
   border-radius: 4px;
   padding: 0.75rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(0, 0, 0, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(0, 0, 0, 0.6);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(0, 0, 0, 0.6);
 }
 
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 781cb73fcd..e84abefaf5 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -4548,29 +4548,29 @@
   border-radius: 4px;
   padding: 0.75rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(0, 0, 0, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(0, 0, 0, 0.6);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(0, 0, 0, 0.6);
 }
 
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 8035e1a787..0175a34054 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -4551,29 +4551,29 @@
   border-radius: 4px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 4px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #C0D0E0;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #4C566A;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #81A1C1;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #4C566A;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #4C566A;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #81A1C1;
 }
 
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 34813d8bbc..0f45e69382 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 1px;
   padding: 0.5rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 1px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #90c9f5;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #343a3f;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #697077;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #343a3f;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #343a3f;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #697077;
 }
 
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 13d1ffdac2..56bb5ac542 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 3px;
   padding: 0.571rem 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: background-color 0.2s, box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #333333;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #333333;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #333333;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #333333;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #333333;
 }
 
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index b00e23923a..ebbbf41042 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -4514,29 +4514,29 @@
   border-radius: 3px;
   padding: 0.571rem 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: background-color 0.2s, box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #333333;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #333333;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #333333;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #333333;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #333333;
 }
 
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 942e35481b..1747c14816 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -4514,29 +4514,29 @@
   border-radius: 3px;
   padding: 0.571rem 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: background-color 0.2s, box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #333333;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #333333;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #333333;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #333333;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #333333;
 }
 
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index d62cabad6b..efed71da9a 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -4502,29 +4502,29 @@
   border-radius: 2px;
   padding: 0.571rem 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   border-radius: 2px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #666666;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #666666;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #666666;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #666666;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #666666;
 }
 
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 15888b7204..20171e024a 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #a6d5fa;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 5d2685d9f5..01df1b76c1 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #b7e0b8;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index f7f19d6bba..3afafa77c0 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #ffe69c;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index f212149ab1..a4425bbf3f 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #df9eea;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #495057;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #6c757d;
 }
 
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index cea185b4d0..2509be0797 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -4523,29 +4523,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #e0d8fc;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 42ad7cb8fe..04a75e4b21 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -4523,29 +4523,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #c7bbfa;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #043d75;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #708da9;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #043d75;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #043d75;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #708da9;
 }
 
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 09c8cb3c28..b365f113de 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -4557,29 +4557,29 @@
   border-radius: 0.375rem;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: none;
   border-radius: 0.375rem;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #6366F1;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #3f3f46;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #71717A;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #3f3f46;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #3f3f46;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #71717A;
 }
 
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 2f5a1570c5..875eb87f29 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #93cbf9;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index f585a16e18..2480a6a3b7 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #a7d8a9;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 88f5948d54..95decaf305 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index f8f5d2d880..5cf7f86927 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -4527,29 +4527,29 @@
   border-radius: 3px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.2s;
   border-radius: 3px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index d369061ea9..b855517a0a 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -4555,29 +4555,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.3s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #9eade6;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: rgba(255, 255, 255, 0.6);
 }
 
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index b39f109257..4b8a712a57 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -4555,29 +4555,29 @@
   border-radius: 6px;
   padding: 1rem;
 }
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
   transition: box-shadow 0.3s;
   border-radius: 6px;
 }
-.p-breadcrumb ul li .p-menuitem-link:focus {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem #bbc7ee;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
   color: #6c6c6c;
 }
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
   color: #898989;
 }
-.p-breadcrumb ul li.p-breadcrumb-chevron {
+.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
   margin: 0 0.5rem 0 0.5rem;
   color: #6c6c6c;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-text {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
   color: #6c6c6c;
 }
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
+.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
   color: #898989;
 }
 

From b487db7de2dfc701184e2856322362a2cfb6e171 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 23 May 2023 08:05:01 -0400
Subject: [PATCH 07/34] Fix #4439: filterIcon and filterClearIcon not
 propagated (#4440)

---
 components/lib/datatable/TableHeader.js | 50 +++++++++++++------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js
index dc44c6f407..3a791be595 100644
--- a/components/lib/datatable/TableHeader.js
+++ b/components/lib/datatable/TableHeader.js
@@ -69,41 +69,43 @@ export const TableHeader = React.memo((props) => {
             return (
                 isVisible && (
                     <HeaderCell
-                        key={key}
-                        value={props.value}
-                        tableProps={props.tableProps}
+                        allRowsSelected={props.allRowsSelected}
+                        allSortableDisabled={isAllSortableDisabled}
                         column={col}
-                        tabIndex={props.tabIndex}
                         empty={props.empty}
-                        resizableColumns={props.resizableColumns}
-                        groupRowsBy={props.groupRowsBy}
-                        groupRowSortField={props.groupRowSortField}
-                        sortMode={props.sortMode}
-                        sortIcon={props.sortIcon}
-                        sortField={props.sortField}
-                        sortOrder={props.sortOrder}
-                        multiSortMeta={props.multiSortMeta}
-                        allSortableDisabled={isAllSortableDisabled}
-                        onSortableChange={onSortableChange}
-                        sortableDisabledFields={sortableDisabledFieldsState}
+                        filterClearIcon={props.filterClearIcon}
                         filterDisplay={props.filterDisplay}
+                        filterIcon={props.filterIcon}
                         filters={props.filters}
                         filtersStore={props.filtersStore}
-                        onFilterChange={props.onFilterChange}
-                        onFilterApply={props.onFilterApply}
-                        onColumnMouseDown={props.onColumnMouseDown}
-                        onColumnDragStart={props.onColumnDragStart}
-                        onColumnDragOver={props.onColumnDragOver}
+                        groupRowSortField={props.groupRowSortField}
+                        groupRowsBy={props.groupRowsBy}
+                        key={key}
+                        multiSortMeta={props.multiSortMeta}
+                        onColumnCheckboxChange={onCheckboxChange}
                         onColumnDragLeave={props.onColumnDragLeave}
+                        onColumnDragOver={props.onColumnDragOver}
+                        onColumnDragStart={props.onColumnDragStart}
                         onColumnDrop={props.onColumnDrop}
+                        onColumnMouseDown={props.onColumnMouseDown}
                         onColumnResizeStart={props.onColumnResizeStart}
                         onColumnResizerClick={props.onColumnResizerClick}
                         onColumnResizerDoubleClick={props.onColumnResizerDoubleClick}
-                        showSelectAll={props.showSelectAll}
-                        allRowsSelected={props.allRowsSelected}
-                        onColumnCheckboxChange={onCheckboxChange}
-                        reorderableColumns={props.reorderableColumns}
+                        onFilterApply={props.onFilterApply}
+                        onFilterChange={props.onFilterChange}
                         onSortChange={props.onSortChange}
+                        onSortableChange={onSortableChange}
+                        reorderableColumns={props.reorderableColumns}
+                        resizableColumns={props.resizableColumns}
+                        showSelectAll={props.showSelectAll}
+                        sortField={props.sortField}
+                        sortIcon={props.sortIcon}
+                        sortMode={props.sortMode}
+                        sortOrder={props.sortOrder}
+                        sortableDisabledFields={sortableDisabledFieldsState}
+                        tabIndex={props.tabIndex}
+                        tableProps={props.tableProps}
+                        value={props.value}
                     />
                 )
             );

From c23417123f7be6d1b7b7fe3a53c1dc3b92e6a5d7 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 23 May 2023 13:27:24 +0100
Subject: [PATCH 08/34] Fixed #4437 - DataTable: Filter Clear icon is missing

---
 components/lib/icons/filterslash/index.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/lib/icons/filterslash/index.js b/components/lib/icons/filterslash/index.js
index cfeb713f92..75e79bd65b 100644
--- a/components/lib/icons/filterslash/index.js
+++ b/components/lib/icons/filterslash/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const FilterSlashIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_408_20963)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const FilterSlashIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_408_20963">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>

From 8dc7d20b4726284d4f5912f72c1423f9e7a15897 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 23 May 2023 13:30:51 +0100
Subject: [PATCH 09/34] Update news.json

---
 data/news.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/data/news.json b/data/news.json
index 91ea0107d8..6e327d998e 100644
--- a/data/news.json
+++ b/data/news.json
@@ -2,7 +2,7 @@
     "id": 32,
     "content": "v9.4.0 is out!",
     "linkText": "Learn More",
-    "linkHref": "https://github.com/primefaces/primereact/blob/master/CHANGELOG.md#940-2023-05-12",
+    "linkHref": "https://github.com/primefaces/primereact/blob/master/CHANGELOG.md",
     "backgroundStyle": "background-color:#07c4e8",
     "textStyle": "color:#191919;font-weight:500",
     "linkStyle": "color:#191919;font-weight:700",

From 5e26baa61fb76a4b861c1620e3e01fdc1dc04f09 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 23 May 2023 08:54:03 -0400
Subject: [PATCH 10/34] Fix #2683: Overlays should close on browser scroll
 (#2757)

* Fix #2683: Overlays should close on browser scroll

* Fix #2683: Overlays should close on browser scroll

* Fix #2683: Overlays should close on browser scroll
---
 .../doc/configuration/hideoverlaysdoc.js      | 22 +++++++++++++++++
 components/layout/config.js                   |  5 ++++
 components/layout/layout.js                   | 24 ++++++++++++++++---
 components/lib/api/PrimeReact.js              |  2 ++
 components/lib/api/api.d.ts                   | 13 +++++-----
 .../lib/hooks/useOverlayScrollListener.js     |  3 ++-
 .../utils/ConnectedOverlayScrollHandler.js    |  3 ++-
 components/lib/utils/DomHandler.js            | 20 +++++++++++++---
 components/lib/utils/utils.d.ts               |  2 +-
 pages/configuration/index.js                  |  6 +++++
 10 files changed, 85 insertions(+), 15 deletions(-)
 create mode 100644 components/doc/configuration/hideoverlaysdoc.js

diff --git a/components/doc/configuration/hideoverlaysdoc.js b/components/doc/configuration/hideoverlaysdoc.js
new file mode 100644
index 0000000000..fe71da3714
--- /dev/null
+++ b/components/doc/configuration/hideoverlaysdoc.js
@@ -0,0 +1,22 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function HideOverlaysDoc(props) {
+    const code = {
+        basic: `
+PrimeReact.hideOverlaysOnDocumentScrolling = true;
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Define behavior if the browser window is scrolled while displaying an overlay panel like a Dropdown or Calendar. Depending on your organization's accessibility needs some prefer panels to be closed on scrolling and some prefer the
+                    overlay follow the scroll. The default behavior will be to close the overlay if you are scrolling the outer window as you are no longer interacting with the component.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/layout/config.js b/components/layout/config.js
index 3dc1169dcc..36c240b6bf 100644
--- a/components/layout/config.js
+++ b/components/layout/config.js
@@ -58,6 +58,11 @@ export default function Config(props) {
                     <InputSwitch checked={props.ripple} onChange={(e) => props.onRippleChange(e.value)} />
                 </section>
 
+                <section className="mb-5">
+                    <h3>Hide Overlays OnScroll</h3>
+                    <InputSwitch checked={props.hideOverlaysOnDocumentScrolling} onChange={(e) => props.onHideOverlaysOnDocumentScrolling(e.value)} />
+                </section>
+
                 <section>
                     <h3>Themes</h3>
                     <h4>Bootstrap</h4>
diff --git a/components/layout/layout.js b/components/layout/layout.js
index 5620301983..406157c4a4 100644
--- a/components/layout/layout.js
+++ b/components/layout/layout.js
@@ -13,6 +13,7 @@ import Topbar from './topbar';
 export default function Layout(props) {
     const [inputStyle, setInputStyle] = useState('outlined');
     const [ripple, setRipple] = useState(true);
+    const [hideOverlaysOnDocumentScrolling, setHideOverlaysOnDocumentScrolling] = useState(true);
     const [sidebarActive, setSidebarActive] = useState(false);
     const [configActive, setConfigActive] = useState(false);
     const router = useRouter();
@@ -52,6 +53,10 @@ export default function Layout(props) {
         setRipple(value);
     };
 
+    const onHideOverlaysOnDocumentScrolling = (value) => {
+        setHideOverlaysOnDocumentScrolling(value);
+    };
+
     const onConfigHide = () => {
         setConfigActive(false);
     };
@@ -77,7 +82,8 @@ export default function Layout(props) {
         };
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    PrimeReact.ripple = true;
+    PrimeReact.ripple = ripple;
+    PrimeReact.hideOverlaysOnDocumentScrolling = hideOverlaysOnDocumentScrolling;
 
     return (
         <div className={wrapperClassName}>
@@ -106,9 +112,11 @@ export default function Layout(props) {
                 value={{
                     ripple: ripple,
                     inputStyle: inputStyle,
+                    hideOverlaysOnDocumentScrolling: hideOverlaysOnDocumentScrolling,
                     darkTheme: props.dark,
                     onInputStyleChange: onInputStyleChange,
-                    onRippleChange: onRippleChange
+                    onRippleChange: onRippleChange,
+                    onHideOverlaysOnDocumentScrolling: onHideOverlaysOnDocumentScrolling
                 }}
             >
                 <div className="layout-content">
@@ -117,7 +125,17 @@ export default function Layout(props) {
                         <Footer></Footer>
                     </div>
                 </div>
-                <Config ripple={ripple} onRippleChange={onRippleChange} inputStyle={inputStyle} onInputStyleChange={onInputStyleChange} onThemeChange={onThemeChange} active={configActive} onHide={onConfigHide} />
+                <Config
+                    ripple={ripple}
+                    inputStyle={inputStyle}
+                    hideOverlaysOnDocumentScrolling={hideOverlaysOnDocumentScrolling}
+                    onRippleChange={onRippleChange}
+                    onHideOverlaysOnDocumentScrolling={onHideOverlaysOnDocumentScrolling}
+                    onInputStyleChange={onInputStyleChange}
+                    onThemeChange={onThemeChange}
+                    active={configActive}
+                    onHide={onConfigHide}
+                />
             </AppContentContext.Provider>
             <div className={maskClassName} onClick={onMaskClick}></div>
         </div>
diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js
index efa4d06694..2efea6f232 100644
--- a/components/lib/api/PrimeReact.js
+++ b/components/lib/api/PrimeReact.js
@@ -13,6 +13,8 @@ export default class PrimeReact {
 
     static autoZIndex = true;
 
+    static hideOverlaysOnDocumentScrolling = true;
+
     static nonce = null;
 
     static nullSortOrder = 1;
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 2c14ec8e80..ca69fd19c1 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -26,16 +26,17 @@ export interface FilterMatchModeOptions {
 }
 
 export interface APIOptions {
-    ripple?: boolean;
-    inputStyle?: InputStyleType;
-    nonce?: string;
-    locale?: string;
     appendTo?: AppendToType;
-    cssTransition?: boolean;
     autoZIndex?: boolean;
-    zIndex?: ZIndexOptions;
+    cssTransition?: boolean;
     filterMatchModeOptions?: FilterMatchModeOptions;
+    hideOverlaysOnViewportChange?: boolean;
+    inputStyle?: InputStyleType;
+    locale?: string;
+    nonce?: string;
     nullSortOrder?: number;
+    ripple?: boolean;
+    zIndex?: ZIndexOptions;
     changeTheme?(theme?: string, newTheme?: string, linkElementId?: string, callback?: () => void): void;
 }
 
diff --git a/components/lib/hooks/useOverlayScrollListener.js b/components/lib/hooks/useOverlayScrollListener.js
index 947ccc7459..641cc6258a 100644
--- a/components/lib/hooks/useOverlayScrollListener.js
+++ b/components/lib/hooks/useOverlayScrollListener.js
@@ -1,5 +1,6 @@
 /* eslint-disable */
 import * as React from 'react';
+import PrimeReact from '../api/PrimeReact';
 import { DomHandler, ObjectUtils } from '../utils/Utils';
 import { usePrevious } from './usePrevious';
 import { useUnmountEffect } from './useUnmountEffect';
@@ -17,7 +18,7 @@ export const useOverlayScrollListener = ({ target, listener, options, when = tru
         }
 
         if (!listenerRef.current && targetRef.current) {
-            const nodes = (scrollableParents.current = DomHandler.getScrollableParents(targetRef.current));
+            const nodes = (scrollableParents.current = DomHandler.getScrollableParents(targetRef.current, PrimeReact.hideOverlaysOnDocumentScrolling));
 
             listenerRef.current = (event) => listener && listener(event);
             nodes.forEach((node) => node.addEventListener('scroll', listenerRef.current, options));
diff --git a/components/lib/utils/ConnectedOverlayScrollHandler.js b/components/lib/utils/ConnectedOverlayScrollHandler.js
index 052d03cda2..883e9d1b43 100644
--- a/components/lib/utils/ConnectedOverlayScrollHandler.js
+++ b/components/lib/utils/ConnectedOverlayScrollHandler.js
@@ -1,3 +1,4 @@
+import PrimeReact from '../api/PrimeReact';
 import DomHandler from './DomHandler';
 
 export default class ConnectedOverlayScrollHandler {
@@ -7,7 +8,7 @@ export default class ConnectedOverlayScrollHandler {
     }
 
     bindScrollListener() {
-        this.scrollableParents = DomHandler.getScrollableParents(this.element);
+        this.scrollableParents = DomHandler.getScrollableParents(this.element, PrimeReact.hideOverlaysOnDocumentScrolling);
 
         for (let i = 0; i < this.scrollableParents.length; i++) {
             this.scrollableParents[i].addEventListener('scroll', this.listener);
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index a95dd3f076..b91e40b41a 100644
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -514,7 +514,7 @@ export default class DomHandler {
         return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
     }
 
-    static getScrollableParents(element) {
+    static getScrollableParents(element, hideOverlaysOnDocumentScrolling = true) {
         let scrollableParents = [];
 
         if (element) {
@@ -529,6 +529,15 @@ export default class DomHandler {
                 );
             };
 
+            const addScrollableParent = (node) => {
+                if (hideOverlaysOnDocumentScrolling && (node.nodeName === 'BODY' || node.nodeName === 'HTML' || node.nodeType === 9)) {
+                    // nodeType 9 is for document element
+                    scrollableParents.push(window);
+                } else {
+                    scrollableParents.push(node);
+                }
+            };
+
             for (let parent of parents) {
                 let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
 
@@ -539,17 +548,22 @@ export default class DomHandler {
                         let el = this.findSingle(parent, selector);
 
                         if (el && overflowCheck(el)) {
-                            scrollableParents.push(el);
+                            addScrollableParent(el);
                         }
                     }
                 }
 
                 if (parent.nodeType === 1 && overflowCheck(parent)) {
-                    scrollableParents.push(parent);
+                    addScrollableParent(parent);
                 }
             }
         }
 
+        // if no parents make it the window
+        if (scrollableParents.length === 0) {
+            scrollableParents.push(window);
+        }
+
         return scrollableParents;
     }
 
diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts
index bbc72a1d00..7dd48219fd 100644
--- a/components/lib/utils/utils.d.ts
+++ b/components/lib/utils/utils.d.ts
@@ -50,7 +50,7 @@ export declare class DomHandler {
     static flipfitCollision(el: HTMLElement, target: HTMLElement, my?: string, at?: string, callback?: any): void;
     static findCollisionPosition(position: string): void;
     static getParents(el: HTMLElement, parents?: any[]): any[];
-    static getScrollableParents(el: HTMLElement): any[];
+    static getScrollableParents(el: HTMLElement, hideOverlaysOnViewportChange?: boolean): any[];
     static getHiddenElementOuterHeight(el: HTMLElement): number;
     static getHiddenElementOuterWidth(el: HTMLElement): number;
     static getHiddenElementDimensions(el: HTMLElement): { width?: number; height?: number };
diff --git a/pages/configuration/index.js b/pages/configuration/index.js
index 12aa8809dd..6a16bfcde3 100644
--- a/pages/configuration/index.js
+++ b/pages/configuration/index.js
@@ -5,6 +5,7 @@ import { DocSections } from '../../components/doc/common/docsections';
 import { AppendToDoc } from '../../components/doc/configuration/appendtodoc';
 import { CSSTransitionDoc } from '../../components/doc/configuration/csstransitiondoc';
 import { FilterMatchModeDoc } from '../../components/doc/configuration/filtermatchmodedoc';
+import { HideOverlaysDoc } from '../../components/doc/configuration/hideoverlaysdoc';
 import { ImportDoc } from '../../components/doc/configuration/importdoc';
 import { InputStyleDoc } from '../../components/doc/configuration/inputstyledoc';
 import { LocaleDoc } from '../../components/doc/configuration/localedoc';
@@ -35,6 +36,11 @@ const InstallationPage = () => {
             label: 'Filter Mode',
             component: FilterMatchModeDoc
         },
+        {
+            id: 'hideoverlays',
+            label: 'Hide Overlays on Viewport Change',
+            component: HideOverlaysDoc
+        },
         {
             id: 'inputstyle',
             label: 'InputStyle',

From 14ba3509901f364b784927a7f7f13c9cc3d65c45 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 23 May 2023 12:54:43 +0000
Subject: [PATCH 11/34] Update API doc

---
 components/doc/common/apidoc/index.json | 44 ++++++++++++++-----------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index c015961198..39553557b0 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -600,64 +600,70 @@
                     "relatedProp": "",
                     "props": [
                         {
-                            "name": "ripple",
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AppendToType"
+                        },
+                        {
+                            "name": "autoZIndex",
                             "optional": true,
                             "readonly": false,
                             "type": "boolean"
                         },
                         {
-                            "name": "inputStyle",
+                            "name": "cssTransition",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputStyleType"
+                            "type": "boolean"
                         },
                         {
-                            "name": "nonce",
+                            "name": "filterMatchModeOptions",
                             "optional": true,
                             "readonly": false,
-                            "type": "string"
+                            "type": "FilterMatchModeOptions"
                         },
                         {
-                            "name": "locale",
+                            "name": "hideOverlaysOnViewportChange",
                             "optional": true,
                             "readonly": false,
-                            "type": "string"
+                            "type": "boolean"
                         },
                         {
-                            "name": "appendTo",
+                            "name": "inputStyle",
                             "optional": true,
                             "readonly": false,
-                            "type": "AppendToType"
+                            "type": "InputStyleType"
                         },
                         {
-                            "name": "cssTransition",
+                            "name": "locale",
                             "optional": true,
                             "readonly": false,
-                            "type": "boolean"
+                            "type": "string"
                         },
                         {
-                            "name": "autoZIndex",
+                            "name": "nonce",
                             "optional": true,
                             "readonly": false,
-                            "type": "boolean"
+                            "type": "string"
                         },
                         {
-                            "name": "zIndex",
+                            "name": "nullSortOrder",
                             "optional": true,
                             "readonly": false,
-                            "type": "ZIndexOptions"
+                            "type": "number"
                         },
                         {
-                            "name": "filterMatchModeOptions",
+                            "name": "ripple",
                             "optional": true,
                             "readonly": false,
-                            "type": "FilterMatchModeOptions"
+                            "type": "boolean"
                         },
                         {
-                            "name": "nullSortOrder",
+                            "name": "zIndex",
                             "optional": true,
                             "readonly": false,
-                            "type": "number"
+                            "type": "ZIndexOptions"
                         }
                     ],
                     "callbacks": [

From eddf2550b0478243b008c524605631cba71ef4df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Tue, 23 May 2023 16:45:46 +0300
Subject: [PATCH 12/34] Fix #4441 - Enhancement for SVG Icons with clipPath

---
 components/lib/icons/arrowdown/index.js           | 12 ++++++++++--
 components/lib/icons/arrowup/index.js             | 12 ++++++++++--
 components/lib/icons/ban/index.js                 | 12 ++++++++++--
 components/lib/icons/download/index.js            | 12 ++++++++++--
 components/lib/icons/exclamationtriangle/index.js | 12 ++++++++++--
 components/lib/icons/eyeslash/index.js            | 12 ++++++++++--
 components/lib/icons/filter/index.js              | 12 ++++++++++--
 components/lib/icons/infocircle/index.js          | 12 ++++++++++--
 components/lib/icons/pencil/index.js              | 12 ++++++++++--
 components/lib/icons/plus/index.js                | 12 ++++++++++--
 components/lib/icons/refresh/index.js             | 12 ++++++++++--
 components/lib/icons/search/index.js              | 12 ++++++++++--
 components/lib/icons/searchminus/index.js         | 12 ++++++++++--
 components/lib/icons/searchplus/index.js          | 12 ++++++++++--
 components/lib/icons/sortalt/index.js             | 12 ++++++++++--
 components/lib/icons/sortamountdown/index.js      | 12 ++++++++++--
 components/lib/icons/sortamountupalt/index.js     | 12 ++++++++++--
 components/lib/icons/spinner/index.js             | 12 ++++++++++--
 components/lib/icons/star/index.js                | 12 ++++++++++--
 components/lib/icons/starfill/index.js            | 12 ++++++++++--
 components/lib/icons/thlarge/index.js             | 12 ++++++++++--
 components/lib/icons/timescircle/index.js         | 12 ++++++++++--
 components/lib/icons/trash/index.js               | 12 ++++++++++--
 components/lib/icons/undo/index.js                | 12 ++++++++++--
 components/lib/icons/upload/index.js              | 12 ++++++++++--
 components/lib/icons/windowmaximize/index.js      | 12 ++++++++++--
 components/lib/icons/windowminimize/index.js      | 12 ++++++++++--
 27 files changed, 270 insertions(+), 54 deletions(-)

diff --git a/components/lib/icons/arrowdown/index.js b/components/lib/icons/arrowdown/index.js
index 9ebc688387..5e0242c8e8 100644
--- a/components/lib/icons/arrowdown/index.js
+++ b/components/lib/icons/arrowdown/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const ArrowDownIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_326_12468)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const ArrowDownIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_326_12468">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/arrowup/index.js b/components/lib/icons/arrowup/index.js
index 956407e527..fc7ca352f4 100644
--- a/components/lib/icons/arrowup/index.js
+++ b/components/lib/icons/arrowup/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const ArrowUpIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_326_12509)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const ArrowUpIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_326_12509">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/ban/index.js b/components/lib/icons/ban/index.js
index eaf95dbd30..3631e9527e 100644
--- a/components/lib/icons/ban/index.js
+++ b/components/lib/icons/ban/index.js
@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const BanIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_288_11866)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M7 0C5.61553 0 4.26215 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.00303296 5.6003 -0.13559 7.00776 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C14 5.14348 13.2625 3.36301 11.9497 2.05025C10.637 0.737498 8.85652 0 7 0ZM1.16667 7C1.16549 5.65478 1.63303 4.35118 2.48889 3.31333L10.6867 11.5111C9.83309 12.2112 8.79816 12.6544 7.70243 12.789C6.60669 12.9236 5.49527 12.744 4.49764 12.2713C3.50001 11.7986 2.65724 11.0521 2.06751 10.1188C1.47778 9.18558 1.16537 8.10397 1.16667 7ZM11.5111 10.6867L3.31334 2.48889C4.43144 1.57388 5.84966 1.10701 7.29265 1.1789C8.73565 1.2508 10.1004 1.85633 11.1221 2.87795C12.1437 3.89956 12.7492 5.26435 12.8211 6.70735C12.893 8.15034 12.4261 9.56856 11.5111 10.6867Z"
                         fill="currentColor"
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_288_11866">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/download/index.js b/components/lib/icons/download/index.js
index 59d004c580..2b4d48b44b 100644
--- a/components/lib/icons/download/index.js
+++ b/components/lib/icons/download/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const DownloadIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_407_20832)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const DownloadIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_407_20832">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/exclamationtriangle/index.js b/components/lib/icons/exclamationtriangle/index.js
index 18387c3f8d..db0105379a 100644
--- a/components/lib/icons/exclamationtriangle/index.js
+++ b/components/lib/icons/exclamationtriangle/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const ExclamationTriangleIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_323_12417)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M13.4018 13.1893H0.598161C0.49329 13.189 0.390283 13.1615 0.299143 13.1097C0.208003 13.0578 0.131826 12.9832 0.0780112 12.8932C0.0268539 12.8015 0 12.6982 0 12.5931C0 12.4881 0.0268539 12.3848 0.0780112 12.293L6.47985 1.08982C6.53679 1.00399 6.61408 0.933574 6.70484 0.884867C6.7956 0.836159 6.897 0.810669 7 0.810669C7.103 0.810669 7.2044 0.836159 7.29516 0.884867C7.38592 0.933574 7.46321 1.00399 7.52015 1.08982L13.922 12.293C13.9731 12.3848 14 12.4881 14 12.5931C14 12.6982 13.9731 12.8015 13.922 12.8932C13.8682 12.9832 13.792 13.0578 13.7009 13.1097C13.6097 13.1615 13.5067 13.189 13.4018 13.1893ZM1.63046 11.989H12.3695L7 2.59425L1.63046 11.989Z"
                         fill="currentColor"
@@ -22,7 +30,7 @@ export const ExclamationTriangleIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_323_12417">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/eyeslash/index.js b/components/lib/icons/eyeslash/index.js
index 4e62edbc90..ce4e0d1e26 100644
--- a/components/lib/icons/eyeslash/index.js
+++ b/components/lib/icons/eyeslash/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const EyeSlashIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_287_10550)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const EyeSlashIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_287_10550">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/filter/index.js b/components/lib/icons/filter/index.js
index b62249b300..ee1a0549ff 100644
--- a/components/lib/icons/filter/index.js
+++ b/components/lib/icons/filter/index.js
@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const FilterIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_390_17708)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M8.64708 14H5.35296C5.18981 13.9979 5.03395 13.9321 4.91858 13.8167C4.8032 13.7014 4.73745 13.5455 4.73531 13.3824V7L0.329431 0.98C0.259794 0.889466 0.217389 0.780968 0.20718 0.667208C0.19697 0.553448 0.219379 0.439133 0.271783 0.337647C0.324282 0.236453 0.403423 0.151519 0.500663 0.0920138C0.597903 0.0325088 0.709548 0.000692754 0.823548 0H13.1765C13.2905 0.000692754 13.4021 0.0325088 13.4994 0.0920138C13.5966 0.151519 13.6758 0.236453 13.7283 0.337647C13.7807 0.439133 13.8031 0.553448 13.7929 0.667208C13.7826 0.780968 13.7402 0.889466 13.6706 0.98L9.26472 7V13.3824C9.26259 13.5455 9.19683 13.7014 9.08146 13.8167C8.96609 13.9321 8.81022 13.9979 8.64708 14ZM5.97061 12.7647H8.02943V6.79412C8.02878 6.66289 8.07229 6.53527 8.15296 6.43177L11.9412 1.23529H2.05884L5.86355 6.43177C5.94422 6.53527 5.98773 6.66289 5.98708 6.79412L5.97061 12.7647Z"
                         fill="currentColor"
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_390_17708">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/infocircle/index.js b/components/lib/icons/infocircle/index.js
index 2300199fe8..467806c91c 100644
--- a/components/lib/icons/infocircle/index.js
+++ b/components/lib/icons/infocircle/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const InfoCircleIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_408_21102)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const InfoCircleIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_408_21102">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/pencil/index.js b/components/lib/icons/pencil/index.js
index f9f34fa79b..abb36c6cc7 100644
--- a/components/lib/icons/pencil/index.js
+++ b/components/lib/icons/pencil/index.js
@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const PencilIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_414_20836)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M0.609628 13.959C0.530658 13.9599 0.452305 13.9451 0.379077 13.9156C0.305849 13.8861 0.239191 13.8424 0.18294 13.787C0.118447 13.7234 0.0688234 13.6464 0.0376166 13.5614C0.00640987 13.4765 -0.00560954 13.3857 0.00241768 13.2956L0.25679 10.1501C0.267698 10.0041 0.331934 9.86709 0.437312 9.76516L9.51265 0.705715C10.0183 0.233014 10.6911 -0.0203041 11.3835 0.00127367C12.0714 0.00660201 12.7315 0.27311 13.2298 0.746671C13.7076 1.23651 13.9824 1.88848 13.9992 2.57201C14.0159 3.25554 13.7733 3.92015 13.32 4.4327L4.23648 13.5331C4.13482 13.6342 4.0017 13.6978 3.85903 13.7133L0.667067 14L0.609628 13.959ZM1.43018 10.4696L1.25787 12.714L3.50619 12.5092L12.4502 3.56444C12.6246 3.35841 12.7361 3.10674 12.7714 2.83933C12.8067 2.57193 12.7644 2.30002 12.6495 2.05591C12.5346 1.8118 12.3519 1.60575 12.1231 1.46224C11.8943 1.31873 11.6291 1.2438 11.3589 1.24633C11.1813 1.23508 11.0033 1.25975 10.8355 1.31887C10.6677 1.37798 10.5136 1.47033 10.3824 1.59036L1.43018 10.4696Z"
                         fill="currentColor"
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_414_20836">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/plus/index.js b/components/lib/icons/plus/index.js
index 4e3a0b822b..f56a29ee77 100644
--- a/components/lib/icons/plus/index.js
+++ b/components/lib/icons/plus/index.js
@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const PlusIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_306_11939)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
                         fill="currentColor"
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_306_11939">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/refresh/index.js b/components/lib/icons/refresh/index.js
index 482c8db666..82465671a4 100644
--- a/components/lib/icons/refresh/index.js
+++ b/components/lib/icons/refresh/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const RefreshIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_414_20758)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const RefreshIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_414_20758">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/search/index.js b/components/lib/icons/search/index.js
index 15ca41e51d..e05848a5c2 100644
--- a/components/lib/icons/search/index.js
+++ b/components/lib/icons/search/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const SearchIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_238_9909)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const SearchIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_238_9909">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/searchminus/index.js b/components/lib/icons/searchminus/index.js
index c12b678284..79745d8693 100644
--- a/components/lib/icons/searchminus/index.js
+++ b/components/lib/icons/searchminus/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const SearchMinusIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_417_21152)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const SearchMinusIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_417_21152">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/searchplus/index.js b/components/lib/icons/searchplus/index.js
index 38965317f8..b2f1f71454 100644
--- a/components/lib/icons/searchplus/index.js
+++ b/components/lib/icons/searchplus/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const SearchPlusIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_417_21164)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const SearchPlusIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_417_21164">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/sortalt/index.js b/components/lib/icons/sortalt/index.js
index 62e68c8fa5..7747bcc30e 100644
--- a/components/lib/icons/sortalt/index.js
+++ b/components/lib/icons/sortalt/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const SortAltIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_378_15529)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M5.64515 3.61291C5.47353 3.61291 5.30192 3.54968 5.16644 3.4142L3.38708 1.63484L1.60773 3.4142C1.34579 3.67613 0.912244 3.67613 0.650309 3.4142C0.388374 3.15226 0.388374 2.71871 0.650309 2.45678L2.90837 0.198712C3.17031 -0.0632236 3.60386 -0.0632236 3.86579 0.198712L6.12386 2.45678C6.38579 2.71871 6.38579 3.15226 6.12386 3.4142C5.98837 3.54968 5.81676 3.61291 5.64515 3.61291Z"
                         fill="currentColor"
@@ -20,7 +28,7 @@ export const SortAltIcon = React.memo(
                     <path d="M10.6129 14C10.2426 14 9.93552 13.6929 9.93552 13.3226V0.677419C9.93552 0.307097 10.2426 0 10.6129 0C10.9833 0 11.2904 0.307097 11.2904 0.677419V13.3226C11.2904 13.6929 10.9832 14 10.6129 14Z" fill="currentColor" />
                 </g>
                 <defs>
-                    <clipPath id="clip0_378_15529">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/sortamountdown/index.js b/components/lib/icons/sortamountdown/index.js
index 29750f6126..be4371e6f6 100644
--- a/components/lib/icons/sortamountdown/index.js
+++ b/components/lib/icons/sortamountdown/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const SortAmountDownIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_378_15544)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M2.59836 13.2009C2.44634 13.2009 2.29432 13.1449 2.1743 13.0248L0.174024 11.0246C-0.0580081 10.7925 -0.0580081 10.4085 0.174024 10.1764C0.406057 9.94441 0.79011 9.94441 1.02214 10.1764L2.59836 11.7527L4.17458 10.1764C4.40662 9.94441 4.79067 9.94441 5.0227 10.1764C5.25473 10.4085 5.25473 10.7925 5.0227 11.0246L3.02242 13.0248C2.90241 13.1449 2.75038 13.2009 2.59836 13.2009Z"
                         fill="currentColor"
@@ -34,7 +42,7 @@ export const SortAmountDownIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_378_15544">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/sortamountupalt/index.js b/components/lib/icons/sortamountupalt/index.js
index a2dcd965cc..dcead1c8f1 100644
--- a/components/lib/icons/sortamountupalt/index.js
+++ b/components/lib/icons/sortamountupalt/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const SortAmountUpAltIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_378_15578)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M4.59864 3.99958C4.44662 3.99958 4.2946 3.94357 4.17458 3.82356L2.59836 2.24734L1.02214 3.82356C0.79011 4.05559 0.406057 4.05559 0.174024 3.82356C-0.0580081 3.59152 -0.0580081 3.20747 0.174024 2.97544L2.1743 0.97516C2.40634 0.743127 2.79039 0.743127 3.02242 0.97516L5.0227 2.97544C5.25473 3.20747 5.25473 3.59152 5.0227 3.82356C4.90268 3.94357 4.75066 3.99958 4.59864 3.99958Z"
                         fill="currentColor"
@@ -34,7 +42,7 @@ export const SortAmountUpAltIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_378_15578">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/spinner/index.js b/components/lib/icons/spinner/index.js
index 20af5cc685..4534635788 100644
--- a/components/lib/icons/spinner/index.js
+++ b/components/lib/icons/spinner/index.js
@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const SpinnerIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_417_21408)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z"
                         fill="currentColor"
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_417_21408">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/star/index.js b/components/lib/icons/star/index.js
index 03f01a0c3e..a2499081bc 100644
--- a/components/lib/icons/star/index.js
+++ b/components/lib/icons/star/index.js
@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const StarIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_288_11830)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M10.9741 13.6721C10.8806 13.6719 10.7886 13.6483 10.7066 13.6033L7.00002 11.6545L3.29345 13.6033C3.19926 13.6539 3.09281 13.6771 2.98612 13.6703C2.87943 13.6636 2.77676 13.6271 2.6897 13.5651C2.60277 13.5014 2.53529 13.4147 2.4948 13.3148C2.45431 13.215 2.44241 13.1058 2.46042 12.9995L3.17881 8.87264L0.167699 5.95324C0.0922333 5.8777 0.039368 5.78258 0.0150625 5.67861C-0.00924303 5.57463 -0.00402231 5.46594 0.030136 5.36477C0.0621323 5.26323 0.122141 5.17278 0.203259 5.10383C0.284377 5.03488 0.383311 4.99023 0.488681 4.97501L4.63087 4.37126L6.48797 0.618832C6.54083 0.530159 6.61581 0.456732 6.70556 0.405741C6.79532 0.35475 6.89678 0.327942 7.00002 0.327942C7.10325 0.327942 7.20471 0.35475 7.29447 0.405741C7.38422 0.456732 7.4592 0.530159 7.51206 0.618832L9.36916 4.37126L13.5114 4.97501C13.6167 4.99023 13.7157 5.03488 13.7968 5.10383C13.8779 5.17278 13.9379 5.26323 13.9699 5.36477C14.0041 5.46594 14.0093 5.57463 13.985 5.67861C13.9607 5.78258 13.9078 5.8777 13.8323 5.95324L10.8212 8.87264L11.532 12.9995C11.55 13.1058 11.5381 13.215 11.4976 13.3148C11.4571 13.4147 11.3896 13.5014 11.3027 13.5651C11.2059 13.632 11.0917 13.6692 10.9741 13.6721ZM7.00002 10.4393C7.09251 10.4404 7.18371 10.4613 7.2675 10.5005L10.2098 12.029L9.65193 8.75036C9.6368 8.6584 9.64343 8.56418 9.6713 8.47526C9.69918 8.38633 9.74751 8.30518 9.81242 8.23832L12.1969 5.94559L8.90298 5.45648C8.81188 5.44198 8.72555 5.406 8.65113 5.35152C8.57671 5.29703 8.51633 5.2256 8.475 5.14314L7.00002 2.1626L5.52503 5.15078C5.4837 5.23324 5.42332 5.30467 5.3489 5.35916C5.27448 5.41365 5.18815 5.44963 5.09705 5.46412L1.80318 5.94559L4.18761 8.23832C4.25252 8.30518 4.30085 8.38633 4.32873 8.47526C4.3566 8.56418 4.36323 8.6584 4.3481 8.75036L3.7902 12.0519L6.73253 10.5234C6.81451 10.4762 6.9058 10.4475 7.00002 10.4393Z"
                         fill="currentColor"
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_288_11830">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/starfill/index.js b/components/lib/icons/starfill/index.js
index 59d7bfce2c..bf261727b2 100644
--- a/components/lib/icons/starfill/index.js
+++ b/components/lib/icons/starfill/index.js
@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const StarFillIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_288_11823)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         d="M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z"
                         fill="currentColor"
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_288_11823">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/thlarge/index.js b/components/lib/icons/thlarge/index.js
index 24220d3ff4..176a3a5890 100644
--- a/components/lib/icons/thlarge/index.js
+++ b/components/lib/icons/thlarge/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const ThLargeIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_397_19940)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const ThLargeIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_397_19940">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/timescircle/index.js b/components/lib/icons/timescircle/index.js
index 8a7a67a26b..3e14701474 100644
--- a/components/lib/icons/timescircle/index.js
+++ b/components/lib/icons/timescircle/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const TimesCircleIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_334_13179)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const TimesCircleIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_334_13179">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/trash/index.js b/components/lib/icons/trash/index.js
index 26b9ec54ee..117f1fe8aa 100644
--- a/components/lib/icons/trash/index.js
+++ b/components/lib/icons/trash/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const TrashIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_417_21589)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const TrashIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_417_21589">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/undo/index.js b/components/lib/icons/undo/index.js
index 37e8d97d08..c6ef10f7de 100644
--- a/components/lib/icons/undo/index.js
+++ b/components/lib/icons/undo/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const UndoIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_417_21625)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const UndoIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_417_21625">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/upload/index.js b/components/lib/icons/upload/index.js
index 1acd8cb8a5..eecd0a46b7 100644
--- a/components/lib/icons/upload/index.js
+++ b/components/lib/icons/upload/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const UploadIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_414_21072)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const UploadIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_414_21072">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/windowmaximize/index.js b/components/lib/icons/windowmaximize/index.js
index b298ce98cf..c2625423d7 100644
--- a/components/lib/icons/windowmaximize/index.js
+++ b/components/lib/icons/windowmaximize/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const WindowMaximizeIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_414_20927)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const WindowMaximizeIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_414_20927">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>
diff --git a/components/lib/icons/windowminimize/index.js b/components/lib/icons/windowminimize/index.js
index 03bfed9093..b29167c630 100644
--- a/components/lib/icons/windowminimize/index.js
+++ b/components/lib/icons/windowminimize/index.js
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
 
 export const WindowMinimizeIcon = React.memo(
     React.forwardRef((inProps, ref) => {
         const pti = IconBase.getPTI(inProps);
+        const [pathId, setPathId] = React.useState(inProps.id);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isEmpty(pathId)) {
+                setPathId(UniqueComponentId('pr_icon_clip_'));
+            }
+        }, [pathId]);
 
         return (
             <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
-                <g clipPath="url(#clip0_414_20939)">
+                <g clipPath={`url(#${pathId})`}>
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -16,7 +24,7 @@ export const WindowMinimizeIcon = React.memo(
                     />
                 </g>
                 <defs>
-                    <clipPath id="clip0_414_20939">
+                    <clipPath id={pathId}>
                         <rect width="14" height="14" fill="white" />
                     </clipPath>
                 </defs>

From 87b4db8166967715e6bf5fecc474c317cbb48b6b Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 23 May 2023 10:16:03 -0400
Subject: [PATCH 13/34] Fix #4441 - Enhancement for SVG Icons with clipPath
 (#4442)

---
 .../button/__snapshots__/Button.spec.js.snap  |  4 ++--
 .../lib/chip/__snapshots__/Chip.spec.js.snap  |  8 ++++----
 .../__snapshots__/Fieldset.spec.js.snap       |  6 ++----
 .../__snapshots__/Message.spec.js.snap        | 20 +++++++++----------
 .../panel/__snapshots__/Panel.spec.js.snap    |  6 ++----
 5 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/components/lib/button/__snapshots__/Button.spec.js.snap b/components/lib/button/__snapshots__/Button.spec.js.snap
index 0f5ed9e370..d88bac46e2 100644
--- a/components/lib/button/__snapshots__/Button.spec.js.snap
+++ b/components/lib/button/__snapshots__/Button.spec.js.snap
@@ -97,7 +97,7 @@ exports[`Button when click the button if loading is true it renders Button with
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#clip0_417_21408)"
+        clip-path="url(#pr_icon_clip_1)"
       >
         <path
           d="M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z"
@@ -106,7 +106,7 @@ exports[`Button when click the button if loading is true it renders Button with
       </g>
       <defs>
         <clippath
-          id="clip0_417_21408"
+          id="pr_icon_clip_1"
         >
           <rect
             fill="white"
diff --git a/components/lib/chip/__snapshots__/Chip.spec.js.snap b/components/lib/chip/__snapshots__/Chip.spec.js.snap
index a7d899e11b..f3baf5e054 100644
--- a/components/lib/chip/__snapshots__/Chip.spec.js.snap
+++ b/components/lib/chip/__snapshots__/Chip.spec.js.snap
@@ -78,7 +78,7 @@ exports[`Chip when removable is true it returns with remove icon: before remove
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#clip0_334_13179)"
+        clip-path="url(#pr_icon_clip_1)"
       >
         <path
           clip-rule="evenodd"
@@ -89,7 +89,7 @@ exports[`Chip when removable is true it returns with remove icon: before remove
       </g>
       <defs>
         <clippath
-          id="clip0_334_13179"
+          id="pr_icon_clip_1"
         >
           <rect
             fill="white"
@@ -121,7 +121,7 @@ exports[`Chip when removable is true the chip is removed when ENTER is pressed:
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#clip0_334_13179)"
+        clip-path="url(#pr_icon_clip_2)"
       >
         <path
           clip-rule="evenodd"
@@ -132,7 +132,7 @@ exports[`Chip when removable is true the chip is removed when ENTER is pressed:
       </g>
       <defs>
         <clippath
-          id="clip0_334_13179"
+          id="pr_icon_clip_2"
         >
           <rect
             fill="white"
diff --git a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
index 5590255272..43678c5113 100644
--- a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
+++ b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
@@ -79,7 +79,7 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
           xmlns="http://www.w3.org/2000/svg"
         >
           <g
-            clip-path="url(#clip0_306_11939)"
+            clip-path="url(#undefined)"
           >
             <path
               d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
@@ -87,9 +87,7 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
             />
           </g>
           <defs>
-            <clippath
-              id="clip0_306_11939"
-            >
+            <clippath>
               <rect
                 fill="white"
                 height="14"
diff --git a/components/lib/message/__snapshots__/Message.spec.js.snap b/components/lib/message/__snapshots__/Message.spec.js.snap
index f931318ef5..c487143168 100644
--- a/components/lib/message/__snapshots__/Message.spec.js.snap
+++ b/components/lib/message/__snapshots__/Message.spec.js.snap
@@ -31,7 +31,7 @@ exports[`Message default 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#clip0_408_21102)"
+        clip-path="url(#pr_icon_clip_1)"
       >
         <path
           clip-rule="evenodd"
@@ -42,7 +42,7 @@ exports[`Message default 1`] = `
       </g>
       <defs>
         <clippath
-          id="clip0_408_21102"
+          id="pr_icon_clip_1"
         >
           <rect
             fill="white"
@@ -93,7 +93,7 @@ exports[`Message severity error 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#clip0_334_13179)"
+        clip-path="url(#pr_icon_clip_4)"
       >
         <path
           clip-rule="evenodd"
@@ -104,7 +104,7 @@ exports[`Message severity error 1`] = `
       </g>
       <defs>
         <clippath
-          id="clip0_334_13179"
+          id="pr_icon_clip_4"
         >
           <rect
             fill="white"
@@ -140,7 +140,7 @@ exports[`Message severity info 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#clip0_408_21102)"
+        clip-path="url(#pr_icon_clip_2)"
       >
         <path
           clip-rule="evenodd"
@@ -151,7 +151,7 @@ exports[`Message severity info 1`] = `
       </g>
       <defs>
         <clippath
-          id="clip0_408_21102"
+          id="pr_icon_clip_2"
         >
           <rect
             fill="white"
@@ -217,7 +217,7 @@ exports[`Message severity warn 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#clip0_323_12417)"
+        clip-path="url(#pr_icon_clip_3)"
       >
         <path
           d="M13.4018 13.1893H0.598161C0.49329 13.189 0.390283 13.1615 0.299143 13.1097C0.208003 13.0578 0.131826 12.9832 0.0780112 12.8932C0.0268539 12.8015 0 12.6982 0 12.5931C0 12.4881 0.0268539 12.3848 0.0780112 12.293L6.47985 1.08982C6.53679 1.00399 6.61408 0.933574 6.70484 0.884867C6.7956 0.836159 6.897 0.810669 7 0.810669C7.103 0.810669 7.2044 0.836159 7.29516 0.884867C7.38592 0.933574 7.46321 1.00399 7.52015 1.08982L13.922 12.293C13.9731 12.3848 14 12.4881 14 12.5931C14 12.6982 13.9731 12.8015 13.922 12.8932C13.8682 12.9832 13.792 13.0578 13.7009 13.1097C13.6097 13.1615 13.5067 13.189 13.4018 13.1893ZM1.63046 11.989H12.3695L7 2.59425L1.63046 11.989Z"
@@ -234,7 +234,7 @@ exports[`Message severity warn 1`] = `
       </g>
       <defs>
         <clippath
-          id="clip0_323_12417"
+          id="pr_icon_clip_3"
         >
           <rect
             fill="white"
@@ -270,7 +270,7 @@ exports[`Message templating 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#clip0_408_21102)"
+        clip-path="url(#pr_icon_clip_5)"
       >
         <path
           clip-rule="evenodd"
@@ -281,7 +281,7 @@ exports[`Message templating 1`] = `
       </g>
       <defs>
         <clippath
-          id="clip0_408_21102"
+          id="pr_icon_clip_5"
         >
           <rect
             fill="white"
diff --git a/components/lib/panel/__snapshots__/Panel.spec.js.snap b/components/lib/panel/__snapshots__/Panel.spec.js.snap
index 7cfee09624..1302559f53 100644
--- a/components/lib/panel/__snapshots__/Panel.spec.js.snap
+++ b/components/lib/panel/__snapshots__/Panel.spec.js.snap
@@ -130,7 +130,7 @@ exports[`Panel when Panel is toggleable it must expand and collapse: expandable-
             xmlns="http://www.w3.org/2000/svg"
           >
             <g
-              clip-path="url(#clip0_306_11939)"
+              clip-path="url(#undefined)"
             >
               <path
                 d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
@@ -138,9 +138,7 @@ exports[`Panel when Panel is toggleable it must expand and collapse: expandable-
               />
             </g>
             <defs>
-              <clippath
-                id="clip0_306_11939"
-              >
+              <clippath>
                 <rect
                   fill="white"
                   height="14"

From 321755693418c3027355e4d05c03604f9988aafd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Tue, 23 May 2023 19:54:02 +0300
Subject: [PATCH 14/34] Fix #4427: MultiSelect clear icon not aligned correctly

---
 components/lib/multiselect/MultiSelect.js | 27 +++++++++++------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index c87de74b00..9f2247e306 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -194,12 +194,12 @@ export const MultiSelect = React.memo(
                         value = [];
                         options.forEach(
                             (optionGroup) =>
-                                (value = [
-                                    ...value,
-                                    ...getOptionGroupChildren(optionGroup)
-                                        .filter((option) => !isOptionDisabled(option))
-                                        .map((option) => getOptionValue(option))
-                                ])
+                            (value = [
+                                ...value,
+                                ...getOptionGroupChildren(optionGroup)
+                                    .filter((option) => !isOptionDisabled(option))
+                                    .map((option) => getOptionValue(option))
+                            ])
                         );
                     } else {
                         value = options.map((option) => getOptionValue(option));
@@ -577,16 +577,15 @@ export const MultiSelect = React.memo(
         });
 
         const createClearIcon = () => {
-            const iconClassName = 'p-icon p-multiselect-clear-icon';
-            const icon = props.clearIcon || <TimesIcon className={iconClassName} />;
-            const clearIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+            const clearIconProps = {
+                className: 'p-multiselect-clear-icon',
+                onClick: (e) => updateModel(e, null, null)
+            }
+            const icon = props.clearIcon || <TimesIcon {...clearIconProps} />;
+            const clearIcon = IconUtils.getJSXIcon(icon, { ...clearIconProps }, { props });
 
             if (!empty && props.showClear && !props.disabled) {
-                return (
-                    <i className={iconClassName} onClick={(e) => updateModel(e, null, null)}>
-                        {clearIcon}
-                    </i>
-                );
+                return clearIcon
             }
 
             return null;

From 127d5618e789c85c26cd487e1d37145347fd06d2 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 23 May 2023 16:50:57 -0400
Subject: [PATCH 15/34] Fixed formatting (#4445)

---
 components/lib/multiselect/MultiSelect.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 9f2247e306..2378c0a763 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -194,12 +194,12 @@ export const MultiSelect = React.memo(
                         value = [];
                         options.forEach(
                             (optionGroup) =>
-                            (value = [
-                                ...value,
-                                ...getOptionGroupChildren(optionGroup)
-                                    .filter((option) => !isOptionDisabled(option))
-                                    .map((option) => getOptionValue(option))
-                            ])
+                                (value = [
+                                    ...value,
+                                    ...getOptionGroupChildren(optionGroup)
+                                        .filter((option) => !isOptionDisabled(option))
+                                        .map((option) => getOptionValue(option))
+                                ])
                         );
                     } else {
                         value = options.map((option) => getOptionValue(option));
@@ -580,12 +580,12 @@ export const MultiSelect = React.memo(
             const clearIconProps = {
                 className: 'p-multiselect-clear-icon',
                 onClick: (e) => updateModel(e, null, null)
-            }
+            };
             const icon = props.clearIcon || <TimesIcon {...clearIconProps} />;
             const clearIcon = IconUtils.getJSXIcon(icon, { ...clearIconProps }, { props });
 
             if (!empty && props.showClear && !props.disabled) {
-                return clearIcon
+                return clearIcon;
             }
 
             return null;

From ca72ece9334a9d1df88db537c14283d388e76d75 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 23 May 2023 16:56:00 -0400
Subject: [PATCH 16/34] Dropdown footer was using wrong style name (#4447)

---
 components/lib/dropdown/DropdownPanel.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index 94e167dfa4..ae6f828f88 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import PrimeReact, { localeOption } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
+import { SearchIcon } from '../icons/search';
+import { TimesIcon } from '../icons/times';
 import { Portal } from '../portal/Portal';
 import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 import { VirtualScroller } from '../virtualscroller/VirtualScroller';
 import { DropdownItem } from './DropdownItem';
-import { TimesIcon } from '../icons/times';
-import { SearchIcon } from '../icons/search';
 
 export const DropdownPanel = React.memo(
     React.forwardRef((props, ref) => {
@@ -47,7 +47,7 @@ export const DropdownPanel = React.memo(
             if (props.panelFooterTemplate) {
                 const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
 
-                return <div className="p-multiselect-footer">{content}</div>;
+                return <div className="p-dropdown-footer">{content}</div>;
             }
 
             return null;

From b8302e9f998897b43071e1820107e9118baff76c Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 23 May 2023 16:57:01 -0400
Subject: [PATCH 17/34] Fix #4443: InputNumber preventing ripple on buttons
 (#4444)

---
 components/lib/inputnumber/InputNumber.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index 8153692c36..3beb365ace 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -220,7 +220,6 @@ export const InputNumber = React.memo(
             if (!props.disabled && !props.readOnly) {
                 props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
                 repeat(event, null, 1);
-                event.preventDefault();
             }
         };
 
@@ -252,8 +251,6 @@ export const InputNumber = React.memo(
             if (!props.disabled && !props.readOnly) {
                 props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
                 repeat(event, null, -1);
-
-                event.preventDefault();
             }
         };
 

From 1f67708045af6d5268a94224527b481ec15da7e8 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Wed, 24 May 2023 10:47:27 +0300
Subject: [PATCH 18/34] Fix #4077 : Messages Inconsistency

---
 public/themes/arya-blue/theme.css               | 6 ++++++
 public/themes/arya-green/theme.css              | 6 ++++++
 public/themes/arya-orange/theme.css             | 6 ++++++
 public/themes/arya-purple/theme.css             | 6 ++++++
 public/themes/bootstrap4-dark-blue/theme.css    | 6 ++++++
 public/themes/bootstrap4-dark-purple/theme.css  | 6 ++++++
 public/themes/bootstrap4-light-blue/theme.css   | 6 ++++++
 public/themes/bootstrap4-light-purple/theme.css | 6 ++++++
 public/themes/fluent-light/theme.css            | 6 ++++++
 public/themes/lara-dark-blue/theme.css          | 6 ++++++
 public/themes/lara-dark-indigo/theme.css        | 6 ++++++
 public/themes/lara-dark-purple/theme.css        | 6 ++++++
 public/themes/lara-dark-teal/theme.css          | 6 ++++++
 public/themes/lara-light-blue/theme.css         | 6 ++++++
 public/themes/lara-light-indigo/theme.css       | 6 ++++++
 public/themes/lara-light-purple/theme.css       | 6 ++++++
 public/themes/lara-light-teal/theme.css         | 6 ++++++
 public/themes/luna-amber/theme.css              | 6 ++++++
 public/themes/luna-blue/theme.css               | 6 ++++++
 public/themes/luna-green/theme.css              | 6 ++++++
 public/themes/luna-pink/theme.css               | 6 ++++++
 public/themes/md-dark-deeppurple/theme.css      | 6 ++++++
 public/themes/md-dark-indigo/theme.css          | 6 ++++++
 public/themes/md-light-deeppurple/theme.css     | 6 ++++++
 public/themes/md-light-indigo/theme.css         | 6 ++++++
 public/themes/mdc-dark-deeppurple/theme.css     | 6 ++++++
 public/themes/mdc-dark-indigo/theme.css         | 6 ++++++
 public/themes/mdc-light-deeppurple/theme.css    | 6 ++++++
 public/themes/mdc-light-indigo/theme.css        | 6 ++++++
 public/themes/mira/theme.css                    | 6 ++++++
 public/themes/nano/theme.css                    | 6 ++++++
 public/themes/nova-accent/theme.css             | 6 ++++++
 public/themes/nova-alt/theme.css                | 6 ++++++
 public/themes/nova/theme.css                    | 6 ++++++
 public/themes/rhea/theme.css                    | 6 ++++++
 public/themes/saga-blue/theme.css               | 6 ++++++
 public/themes/saga-green/theme.css              | 6 ++++++
 public/themes/saga-orange/theme.css             | 6 ++++++
 public/themes/saga-purple/theme.css             | 6 ++++++
 public/themes/soho-dark/theme.css               | 6 ++++++
 public/themes/soho-light/theme.css              | 6 ++++++
 public/themes/tailwind-light/theme.css          | 6 ++++++
 public/themes/vela-blue/theme.css               | 6 ++++++
 public/themes/vela-green/theme.css              | 6 ++++++
 public/themes/vela-orange/theme.css             | 6 ++++++
 public/themes/vela-purple/theme.css             | 6 ++++++
 public/themes/viva-dark/theme.css               | 6 ++++++
 public/themes/viva-light/theme.css              | 6 ++++++
 48 files changed, 288 insertions(+)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 3d796a1ed2..0f1af9e3f8 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 3ff8820922..36e2da565a 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index bd04da7cb8..ac41eaf936 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 6d651a8ce3..25855fedca 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 30f8eda5f0..97dbd42d3a 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -5742,6 +5742,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 1;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 640a130995..6faed4f0ff 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -5742,6 +5742,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 1;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index eec6179423..8c416e3501 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -5742,6 +5742,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 1;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index ad6aad56ca..0fd627ed19 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -5742,6 +5742,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 1;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index fdfbe57577..89b697fa2b 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -5681,6 +5681,12 @@
   width: 1rem;
   height: 1rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index ae334c9b24..1d467c807b 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index bfc1c31ec1..3ccaa4f022 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index ff09549d4c..5688fed758 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index b9fa155b72..6ef37a8b0f 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index daa66ad4c0..bf9b8f2c63 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 9be66e15a2..b869192bad 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 16c3363e6f..7d890d55b6 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 94a2f7c8c9..c9e76e4f9e 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 7e5b8fc749..650c2a4054 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -5693,6 +5693,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index edd7387b5c..94859e589c 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -5693,6 +5693,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index b8cad68a07..889efd17b1 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -5693,6 +5693,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 64a4636b1e..98a0b28588 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -5693,6 +5693,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 2a4ef06bab..cd07bdd43d 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -5751,6 +5751,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index e6fb5ea4f8..747b50f8d6 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -5751,6 +5751,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 25d18eae4d..23bb73b444 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -5751,6 +5751,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 194093f425..f13101779d 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -5751,6 +5751,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 89a2751a72..ad4432dba9 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -5751,6 +5751,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 51de39614e..06faeba33f 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -5751,6 +5751,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index e060f0d183..5cc2fe8942 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -5751,6 +5751,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index e84abefaf5..8e4b8a92a6 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -5751,6 +5751,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 0175a34054..f09e71d2ce 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -5754,6 +5754,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 0f45e69382..40868e2900 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 56bb5ac542..486f2907ce 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index ebbbf41042..049289c35c 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -5693,6 +5693,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 1747c14816..a78cc03d56 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -5693,6 +5693,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index efed71da9a..dd977ed8fe 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -5681,6 +5681,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 20171e024a..88306a96b5 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 01df1b76c1..80c6b8d907 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 3afafa77c0..0a1dee3091 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index a4425bbf3f..9eb8f962bb 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 2509be0797..231a989505 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -5702,6 +5702,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 04a75e4b21..f591b1c94e 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -5702,6 +5702,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index b365f113de..a62c4a0fc5 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -5760,6 +5760,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 875eb87f29..37f91c3b7f 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 2480a6a3b7..7eb005af46 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 95decaf305..00cfa6ce45 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 5cf7f86927..18143c362c 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -5730,6 +5730,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index b855517a0a..54eb93f6e6 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -5758,6 +5758,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 4b8a712a57..27e7a09a0e 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -5758,6 +5758,12 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}
 
 .p-toast {
   opacity: 0.9;

From ed64bec285b2fda14a84d66be6af900814991156 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 24 May 2023 09:47:49 +0100
Subject: [PATCH 19/34] Fixed #4448 - Add hideOverlaysOnDocumentScrolling
 option to PrimeReact config

---
 components/doc/configuration/hideoverlaysdoc.js       | 2 +-
 components/layout/config.js                           | 5 -----
 components/layout/layout.js                           | 4 ----
 components/lib/api/PrimeReact.js                      | 2 +-
 components/lib/hooks/useOverlayScrollListener.js      | 2 +-
 components/lib/utils/ConnectedOverlayScrollHandler.js | 2 +-
 components/lib/utils/DomHandler.js                    | 6 +++---
 7 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/components/doc/configuration/hideoverlaysdoc.js b/components/doc/configuration/hideoverlaysdoc.js
index fe71da3714..ecc4f2bb0c 100644
--- a/components/doc/configuration/hideoverlaysdoc.js
+++ b/components/doc/configuration/hideoverlaysdoc.js
@@ -13,7 +13,7 @@ PrimeReact.hideOverlaysOnDocumentScrolling = true;
             <DocSectionText {...props}>
                 <p>
                     Define behavior if the browser window is scrolled while displaying an overlay panel like a Dropdown or Calendar. Depending on your organization's accessibility needs some prefer panels to be closed on scrolling and some prefer the
-                    overlay follow the scroll. The default behavior will be to close the overlay if you are scrolling the outer window as you are no longer interacting with the component.
+                    overlay follow the scroll. Default value is false.
                 </p>
             </DocSectionText>
             <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
diff --git a/components/layout/config.js b/components/layout/config.js
index 36c240b6bf..3dc1169dcc 100644
--- a/components/layout/config.js
+++ b/components/layout/config.js
@@ -58,11 +58,6 @@ export default function Config(props) {
                     <InputSwitch checked={props.ripple} onChange={(e) => props.onRippleChange(e.value)} />
                 </section>
 
-                <section className="mb-5">
-                    <h3>Hide Overlays OnScroll</h3>
-                    <InputSwitch checked={props.hideOverlaysOnDocumentScrolling} onChange={(e) => props.onHideOverlaysOnDocumentScrolling(e.value)} />
-                </section>
-
                 <section>
                     <h3>Themes</h3>
                     <h4>Bootstrap</h4>
diff --git a/components/layout/layout.js b/components/layout/layout.js
index 406157c4a4..7a71bc7179 100644
--- a/components/layout/layout.js
+++ b/components/layout/layout.js
@@ -13,7 +13,6 @@ import Topbar from './topbar';
 export default function Layout(props) {
     const [inputStyle, setInputStyle] = useState('outlined');
     const [ripple, setRipple] = useState(true);
-    const [hideOverlaysOnDocumentScrolling, setHideOverlaysOnDocumentScrolling] = useState(true);
     const [sidebarActive, setSidebarActive] = useState(false);
     const [configActive, setConfigActive] = useState(false);
     const router = useRouter();
@@ -83,7 +82,6 @@ export default function Layout(props) {
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     PrimeReact.ripple = ripple;
-    PrimeReact.hideOverlaysOnDocumentScrolling = hideOverlaysOnDocumentScrolling;
 
     return (
         <div className={wrapperClassName}>
@@ -112,7 +110,6 @@ export default function Layout(props) {
                 value={{
                     ripple: ripple,
                     inputStyle: inputStyle,
-                    hideOverlaysOnDocumentScrolling: hideOverlaysOnDocumentScrolling,
                     darkTheme: props.dark,
                     onInputStyleChange: onInputStyleChange,
                     onRippleChange: onRippleChange,
@@ -128,7 +125,6 @@ export default function Layout(props) {
                 <Config
                     ripple={ripple}
                     inputStyle={inputStyle}
-                    hideOverlaysOnDocumentScrolling={hideOverlaysOnDocumentScrolling}
                     onRippleChange={onRippleChange}
                     onHideOverlaysOnDocumentScrolling={onHideOverlaysOnDocumentScrolling}
                     onInputStyleChange={onInputStyleChange}
diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js
index 2efea6f232..477604449a 100644
--- a/components/lib/api/PrimeReact.js
+++ b/components/lib/api/PrimeReact.js
@@ -13,7 +13,7 @@ export default class PrimeReact {
 
     static autoZIndex = true;
 
-    static hideOverlaysOnDocumentScrolling = true;
+    static hideOverlaysOnDocumentScrolling = false;
 
     static nonce = null;
 
diff --git a/components/lib/hooks/useOverlayScrollListener.js b/components/lib/hooks/useOverlayScrollListener.js
index 641cc6258a..0e85995bb5 100644
--- a/components/lib/hooks/useOverlayScrollListener.js
+++ b/components/lib/hooks/useOverlayScrollListener.js
@@ -1,6 +1,6 @@
 /* eslint-disable */
 import * as React from 'react';
-import PrimeReact from '../api/PrimeReact';
+import PrimeReact from '../api/Api';
 import { DomHandler, ObjectUtils } from '../utils/Utils';
 import { usePrevious } from './usePrevious';
 import { useUnmountEffect } from './useUnmountEffect';
diff --git a/components/lib/utils/ConnectedOverlayScrollHandler.js b/components/lib/utils/ConnectedOverlayScrollHandler.js
index 883e9d1b43..c57e6087f3 100644
--- a/components/lib/utils/ConnectedOverlayScrollHandler.js
+++ b/components/lib/utils/ConnectedOverlayScrollHandler.js
@@ -1,4 +1,4 @@
-import PrimeReact from '../api/PrimeReact';
+import PrimeReact from '../api/Api';
 import DomHandler from './DomHandler';
 
 export default class ConnectedOverlayScrollHandler {
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index b91e40b41a..67927def0a 100644
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -514,7 +514,7 @@ export default class DomHandler {
         return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
     }
 
-    static getScrollableParents(element, hideOverlaysOnDocumentScrolling = true) {
+    static getScrollableParents(element, hideOverlaysOnDocumentScrolling = false) {
         let scrollableParents = [];
 
         if (element) {
@@ -530,9 +530,9 @@ export default class DomHandler {
             };
 
             const addScrollableParent = (node) => {
-                if (hideOverlaysOnDocumentScrolling && (node.nodeName === 'BODY' || node.nodeName === 'HTML' || node.nodeType === 9)) {
+                if (hideOverlaysOnDocumentScrolling) {
                     // nodeType 9 is for document element
-                    scrollableParents.push(window);
+                    scrollableParents.push(node.nodeName === 'BODY' || node.nodeName === 'HTML' || node.nodeType === 9 ? window : node);
                 } else {
                     scrollableParents.push(node);
                 }

From 2d65a581f671f323ee6addb78417ae0c43dadbf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Wed, 24 May 2023 11:55:35 +0300
Subject: [PATCH 20/34] Update news

---
 data/news.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/data/news.json b/data/news.json
index 6e327d998e..321f078fa4 100644
--- a/data/news.json
+++ b/data/news.json
@@ -1,6 +1,6 @@
 {
-    "id": 32,
-    "content": "v9.4.0 is out!",
+    "id": 33,
+    "content": "v9.5.0 is out with new Pass Through feature!",
     "linkText": "Learn More",
     "linkHref": "https://github.com/primefaces/primereact/blob/master/CHANGELOG.md",
     "backgroundStyle": "background-color:#07c4e8",

From 0859ebaf189968ea8a7c7436553490a2cf664551 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Wed, 24 May 2023 12:02:49 +0300
Subject: [PATCH 21/34] =?UTF-8?q?CHANGELOG.md=20update=20for=209.5.0=C2=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0bce250b18..1b28236f1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,40 @@
 # Changelog
 
+## [9.5.0](https://github.com/primefaces/primereact/tree/9.5.0) (2023-05-24)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.4.0...9.5.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add `hideOverlaysOnDocumentScrolling` option to PrimeReact config [\#4448](https://github.com/primefaces/primereact/issues/4448)
+- Icons: clipPath improvements  [\#4441](https://github.com/primefaces/primereact/issues/4441)
+- AutoComplete: panelFooterTemplate prop [\#4426](https://github.com/primefaces/primereact/issues/4426)
+- MultiSelect: No way to disable filter auto focus [\#4423](https://github.com/primefaces/primereact/issues/4423)
+- New passthrough\(pt\) property implementation for Media Components [\#4393](https://github.com/primefaces/primereact/issues/4393)
+- New passthrough\(pt\) property implementation for Chart & FileUpload & Message Components [\#4392](https://github.com/primefaces/primereact/issues/4392)
+- New passthrough\(pt\) property implementation for Menu Components [\#4391](https://github.com/primefaces/primereact/issues/4391)
+- Mention: suggestion panel to hide when scrolling away [\#4223](https://github.com/primefaces/primereact/issues/4223)
+- Messages-Toast: Inconsistency [\#4077](https://github.com/primefaces/primereact/issues/4077)
+- Menu: Add ability to right align [\#3753](https://github.com/primefaces/primereact/issues/3753)
+
+**Fixed bugs:**
+
+- Dropdown: Footer using incorrect style name [\#4446](https://github.com/primefaces/primereact/issues/4446)
+- InputNumber: preventing ripple on buttons [\#4443](https://github.com/primefaces/primereact/issues/4443)
+- Datatable: filterIcon and filterClearIcon not propagated [\#4439](https://github.com/primefaces/primereact/issues/4439)
+- BreadCrumb: SVG location of the DOM [\#4438](https://github.com/primefaces/primereact/issues/4438)
+- DataTable: Filter Clear icon is missing [\#4437](https://github.com/primefaces/primereact/issues/4437)
+- Datatable: Setting rowEditorInitIcon has no effect. [\#4430](https://github.com/primefaces/primereact/issues/4430)
+- MultiSelect clear icon not aligned correctly [\#4427](https://github.com/primefaces/primereact/issues/4427)
+- TriStateCheckbox: "undefined" value render checkbox highlighted but without value [\#4422](https://github.com/primefaces/primereact/issues/4422)
+- Checkbox: Toggling value by clicking the label broken [\#4402](https://github.com/primefaces/primereact/issues/4402)
+- Image: Zoom out action disabled when fully zoomed in [\#4400](https://github.com/primefaces/primereact/issues/4400)
+- ConfirmDialog: Missing dialog header [\#4397](https://github.com/primefaces/primereact/issues/4397)
+- Autocomplete: multiple + forceSelection  [\#4363](https://github.com/primefaces/primereact/issues/4363)
+- DataTable: resizableColumns with stateStorage will not adjust saved column width after refresh. [\#4211](https://github.com/primefaces/primereact/issues/4211)
+- Autocomplete clears selected values onBlur when forceSelection and multiple are true [\#4203](https://github.com/primefaces/primereact/issues/4203)
+- Dropdown: rendering problem when used in a Dialog [\#2683](https://github.com/primefaces/primereact/issues/2683)
+
 ## [9.4.0](https://github.com/primefaces/primereact/tree/9.4.0) (2023-05-12)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/9.3.1...9.4.0)

From 3f6d141a4daed952bb694aeb226cdee3c3855e22 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Wed, 24 May 2023 12:04:05 +0300
Subject: [PATCH 22/34] Set version update

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0df8cb6584..9b0309946d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "primereact",
     "private": false,
-    "version": "9.5.0-SNAPSHOT",
+    "version": "9.5.0",
     "scripts": {
         "dev": "next dev",
         "start": "next start",

From 44d64dd23224bcf6ab7b7b0ada2a79cb6f575f53 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Wed, 24 May 2023 12:12:12 +0300
Subject: [PATCH 23/34] Add new iteration

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9b0309946d..19ea7c8ccd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "primereact",
     "private": false,
-    "version": "9.5.0",
+    "version": "9.6.0-SNAPSHOT",
     "scripts": {
         "dev": "next dev",
         "start": "next start",

From 172873342645c8d62946b980fb40eab79b27b100 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Wed, 24 May 2023 16:45:41 +0300
Subject: [PATCH 24/34] Refactor #4431 - for ToggleButton

---
 components/doc/common/apidoc/index.json       | 57 +++++++++++++
 components/doc/togglebutton/pt/ptdoc.js       | 84 +++++++++++++++++++
 components/doc/togglebutton/pt/wireframe.js   | 13 +++
 components/lib/togglebutton/ToggleButton.js   | 57 +++++++++----
 .../lib/togglebutton/ToggleButtonBase.js      | 10 +--
 components/lib/togglebutton/togglebutton.d.ts | 36 +++++++-
 pages/togglebutton/index.js                   | 22 ++++-
 7 files changed, 252 insertions(+), 27 deletions(-)
 create mode 100644 components/doc/togglebutton/pt/ptdoc.js
 create mode 100644 components/doc/togglebutton/pt/wireframe.js

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 39553557b0..4268fa52c8 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -35366,6 +35366,14 @@
                             "type": "TooltipOptions",
                             "default": "",
                             "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -35450,6 +35458,47 @@
         "interfaces": {
             "description": "Defines the custom interfaces used by the module.",
             "values": {
+                "ToggleButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToggleButtonProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ToggleButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
                 "ToggleButtonChangeTargetOptions": {
                     "description": "Custom toggle button change target options",
                     "relatedProp": "",
@@ -35479,6 +35528,14 @@
                     "callbacks": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ToggleButtonPassThroughType": {
+                    "values": "PassThroughType<T, ToggleButtonPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "toolbar": {
diff --git a/components/doc/togglebutton/pt/ptdoc.js b/components/doc/togglebutton/pt/ptdoc.js
new file mode 100644
index 0000000000..863193303a
--- /dev/null
+++ b/components/doc/togglebutton/pt/ptdoc.js
@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { ToggleButton } from '../../../lib/togglebutton/ToggleButton';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<ToggleButton
+    checked={checked}
+    onChange={(e) => setChecked(e.value)}
+    pt={{
+        root: {
+            className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
+        }
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function PTDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton
+                checked={checked}
+                onChange={(e) => setChecked(e.value)}
+                pt={{
+                    root: {
+                        className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
+                    }
+                }}
+            />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function PTDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton
+                checked={checked}
+                onChange={(e) => setChecked(e.value)}
+                pt={{
+                    root: {
+                        className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
+                    }
+                }}
+            />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <ToggleButton
+                    checked={checked}
+                    onChange={(e) => setChecked(e.value)}
+                    pt={{
+                        root: {
+                            className: `w-8rem ${checked ? 'bg-teal-400 border-white' : ''}`
+                        }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/pt/wireframe.js b/components/doc/togglebutton/pt/wireframe.js
new file mode 100644
index 0000000000..84d20957d2
--- /dev/null
+++ b/components/doc/togglebutton/pt/wireframe.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="togglebutton" />
+            </div>
+        </>
+    );
+};
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index 3aab71fe6e..455dca4d55 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useMountEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { ToggleButtonBase } from './ToggleButtonBase';
 
 export const ToggleButton = React.memo(
@@ -10,6 +10,9 @@ export const ToggleButton = React.memo(
         const props = ToggleButtonBase.getProps(inProps);
 
         const elementRef = React.useRef(null);
+        const { ptm } = ToggleButtonBase.setMetaData({
+            props
+        });
         const hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0;
         const hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
         const label = hasLabel ? (props.checked ? props.onLabel : props.offLabel) : '&nbsp;';
@@ -49,7 +52,14 @@ export const ToggleButton = React.memo(
                     'p-button-icon-right': props.iconPos === 'right' && label
                 });
 
-                return IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+                const iconProps = mergeProps(
+                    {
+                        className: iconClassName
+                    },
+                    ptm('icon')
+                );
+
+                return IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
             }
 
             return null;
@@ -69,7 +79,6 @@ export const ToggleButton = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const tabIndex = props.disabled ? -1 : props.tabIndex;
-        const otherProps = ToggleButtonBase.getOtherProps(props);
         const className = classNames(
             'p-button p-togglebutton p-component',
             {
@@ -81,24 +90,36 @@ export const ToggleButton = React.memo(
         );
         const iconElement = createIcon();
 
+        const labelProps = mergeProps(
+            {
+                className: 'p-button-label'
+            },
+            ptm('label')
+        );
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: className,
+                style: props.style,
+                onClick: toggle,
+                onFocus: props.onFocus,
+                onBlur: props.onBlur,
+                onKeyDown: onKeyDown,
+                tabIndex: tabIndex,
+                role: 'button',
+                'aria-pressed': props.checked
+            },
+            ToggleButtonBase.getOtherProps(props),
+            ptm('root')
+        );
+
         return (
             <>
-                <div
-                    ref={elementRef}
-                    id={props.id}
-                    className={className}
-                    style={props.style}
-                    {...otherProps}
-                    onClick={toggle}
-                    onFocus={props.onFocus}
-                    onBlur={props.onBlur}
-                    onKeyDown={onKeyDown}
-                    tabIndex={tabIndex}
-                    role="button"
-                    aria-pressed={props.checked}
-                >
+                <div {...rootProps}>
                     {iconElement}
-                    <span className="p-button-label">{label}</span>
+                    <span {...labelProps}>{label}</span>
                     <Ripple />
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js
index 5fe668b87d..caf22a3760 100644
--- a/components/lib/togglebutton/ToggleButtonBase.js
+++ b/components/lib/togglebutton/ToggleButtonBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const ToggleButtonBase = {
+export const ToggleButtonBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'ToggleButton',
         id: null,
@@ -19,7 +19,5 @@ export const ToggleButtonBase = {
         onFocus: null,
         onBlur: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, ToggleButtonBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, ToggleButtonBase.defaultProps)
-};
+    }
+});
diff --git a/components/lib/togglebutton/togglebutton.d.ts b/components/lib/togglebutton/togglebutton.d.ts
index d57f0e5ace..5578a6adbd 100644
--- a/components/lib/togglebutton/togglebutton.d.ts
+++ b/components/lib/togglebutton/togglebutton.d.ts
@@ -9,8 +9,35 @@
  */
 import * as React from 'react';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
-import { IconType } from '../utils';
+import { IconType, PassThroughType } from '../utils';
 
+export declare type ToggleButtonPassThroughType<T> = PassThroughType<T, ToggleButtonPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToggleButtonPassThroughMethodOptions {
+    props: ToggleButtonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToggleButtonProps.pt}
+ */
+export interface ToggleButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ToggleButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ToggleButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ToggleButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+}
 /**
  * Custom toggle button change target options
  */
@@ -61,7 +88,7 @@ interface ToggleButtonChangeEvent {
  * Defines valid properties in ToggleButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
     /**
      * Specifies the on/off state of the button.
      * @defaultValue false
@@ -118,6 +145,11 @@ export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.In
      * @param {React.FocusEvent<HTMLElement>} event - Browser event.
      */
     onFocus?(event: React.FocusEvent<HTMLElement>): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToggleButtonPassThroughOptions}
+     */
+    pt?: ToggleButtonPassThroughOptions;
 }
 
 /**
diff --git a/pages/togglebutton/index.js b/pages/togglebutton/index.js
index 41000fa120..9b3ed33b8a 100644
--- a/pages/togglebutton/index.js
+++ b/pages/togglebutton/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/togglebutton/pt/ptdoc';
+import { Wireframe } from '../../components/doc/togglebutton/pt/wireframe';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/togglebutton/accessibilitydoc';
 import { BasicDoc } from '../../components/doc/togglebutton/basicdoc';
@@ -52,8 +55,25 @@ const ToggleButtonDemo = () => {
             component: AccessibilityDoc
         }
     ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.togglebutton.options',
+            label: 'ToggleButton PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.demo',
+            label: 'Example',
+            component: PTDoc
+        }
+    ];
 
-    return <DocComponent title="React ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." componentDocs={docs} apiDocs={['ToggleButton']} />;
+    return <DocComponent title="React ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." componentDocs={docs} apiDocs={['ToggleButton']} ptDocs={ptDocs} />;
 };
 
 export default ToggleButtonDemo;

From e61cc0fad263e68ff8fbf4ee7a5b5b4251089f13 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Wed, 24 May 2023 13:47:04 +0000
Subject: [PATCH 25/34] Update API doc

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d0fb36d031..34ed0ccfc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primereact",
-    "version": "9.5.0-SNAPSHOT",
+    "version": "9.6.0-SNAPSHOT",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primereact",
-            "version": "9.5.0-SNAPSHOT",
+            "version": "9.6.0-SNAPSHOT",
             "dependencies": {
                 "@docsearch/react": "3.3.4",
                 "chart.js": "4.3.0",

From cd66b15c5de2b74cfe831832d6e6cac9a13f5b33 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Wed, 24 May 2023 17:54:54 +0300
Subject: [PATCH 26/34] Refactor #4431 - for TriStateCheckbox

---
 components/doc/common/apidoc/index.json       | 103 ++++++++++++++++++
 components/doc/tristatecheckbox/pt/ptdoc.js   |  91 ++++++++++++++++
 .../doc/tristatecheckbox/pt/wireframe.js      |  13 +++
 .../lib/tristatecheckbox/TriStateCheckbox.js  |  85 ++++++++++++---
 .../tristatecheckbox/TriStateCheckboxBase.js  |  10 +-
 .../tristatecheckbox/tristatecheckbox.d.ts    |  60 +++++++++-
 pages/tristatecheckbox/index.js               |  31 +++++-
 7 files changed, 371 insertions(+), 22 deletions(-)
 create mode 100644 components/doc/tristatecheckbox/pt/ptdoc.js
 create mode 100644 components/doc/tristatecheckbox/pt/wireframe.js

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 4268fa52c8..60482394e6 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -39427,6 +39427,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -39484,6 +39492,101 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TriStateCheckboxPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TriStateCheckboxProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TriStateCheckboxState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TriStateCheckboxPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the checkbox box's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "checkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the check icon's DOM element."
+                        },
+                        {
+                            "name": "uncheckIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the uncheck icon's DOM element."
+                        },
+                        {
+                            "name": "srOnlyAria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the sr only aria's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TriStateCheckboxState": {
+                    "description": "Defines current inline state in TriStateCheckbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Focused state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TriStateCheckboxPassThroughType": {
+                    "values": "PassThroughType<T, TriStateCheckboxPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "ts-helpers": {
diff --git a/components/doc/tristatecheckbox/pt/ptdoc.js b/components/doc/tristatecheckbox/pt/ptdoc.js
new file mode 100644
index 0000000000..b58da5fd91
--- /dev/null
+++ b/components/doc/tristatecheckbox/pt/ptdoc.js
@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { TriStateCheckbox } from '../../../lib/tristatecheckbox/TriStateCheckbox';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<TriStateCheckbox
+    value={value}
+    onChange={(e) => setValue(e.value)}
+    pt={{
+        checkbox: {
+            className: value ? 'bg-teal-500 border-white' : undefined
+        }
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+
+export default function PTDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox
+                value={value}
+                onChange={(e) => setValue(e.value)}
+                pt={{
+                    checkbox: {
+                        className: value ? 'bg-teal-500 border-white' : undefined
+                    }
+                }}
+            />
+            <label>{String(value)}</label>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+
+export default function PTDemo() {
+    const [value, setValue] = useState<boolean | undefined | null>(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox
+                value={value}
+                onChange={(e) => setValue(e.value)}
+                pt={{
+                    checkbox: {
+                        className: value ? 'bg-teal-500 border-white' : undefined
+                    }
+                }}
+            />
+            <label>{String(value)}</label>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TriStateCheckbox is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <TriStateCheckbox
+                    value={value}
+                    onChange={(e) => setValue(e.value)}
+                    pt={{
+                        checkbox: {
+                            className: value ? 'bg-teal-500 border-white' : undefined
+                        }
+                    }}
+                />
+                <label>{String(value)}</label>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/pt/wireframe.js b/components/doc/tristatecheckbox/pt/wireframe.js
new file mode 100644
index 0000000000..0699009feb
--- /dev/null
+++ b/components/doc/tristatecheckbox/pt/wireframe.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="tristatecheckbox" />
+            </div>
+        </>
+    );
+};
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index b65293e7b4..5b1a16bc84 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -4,7 +4,7 @@ import { useMountEffect } from '../hooks/Hooks';
 import { CheckIcon } from '../icons/check';
 import { TimesIcon } from '../icons/times';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { TriStateCheckboxBase } from './TriStateCheckboxBase';
 
 export const TriStateCheckbox = React.memo(
@@ -14,6 +14,13 @@ export const TriStateCheckbox = React.memo(
         const [focusedState, setFocusedState] = React.useState(false);
         const elementRef = React.useRef(null);
 
+        const { ptm } = TriStateCheckboxBase.setMetaData({
+            props,
+            state: {
+                focused: focusedState
+            }
+        });
+
         const onClick = (event) => {
             if (!props.disabled && !props.readOnly) {
                 toggle(event);
@@ -83,32 +90,82 @@ export const TriStateCheckbox = React.memo(
             'p-focus': focusedState
         });
         const iconClassName = 'p-checkbox-icon p-c';
+        const checkIconProps = mergeProps(
+            {
+                className: iconClassName
+            },
+            ptm('checkIcon')
+        );
+        const uncheckIconProps = mergeProps(
+            {
+                className: iconClassName
+            },
+            ptm('uncheckIcon')
+        );
+
         let icon;
 
         if (props.value === false) {
-            icon = props.uncheckIcon || <TimesIcon className={iconClassName} />;
+            icon = props.uncheckIcon || <TimesIcon {...uncheckIconProps} />;
         } else if (props.value === true) {
-            icon = props.checkIcon || <CheckIcon className={iconClassName} />;
+            icon = props.checkIcon || <CheckIcon {...checkIconProps} />;
         }
 
-        const checkIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+        const checkIcon = IconUtils.getJSXIcon(icon, { ...checkIconProps }, { props });
 
         const ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
         const ariaChecked = props.value ? 'true' : 'false';
 
+        const checkboxProps = mergeProps(
+            {
+                className: boxClassName,
+                tabIndex: props.tabIndex,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown,
+                role: 'checkbox',
+                'aria-checked': ariaChecked,
+                ...ariaProps
+            },
+            ptm('checkbox')
+        );
+
+        const srOnlyAriaProps = mergeProps(
+            {
+                className: 'p-sr-only',
+                'aria-live': 'polite'
+            },
+            ptm('srOnlyAria')
+        );
+
+        const tooltipProps = mergeProps(
+            {
+                target: elementRef,
+                content: props.tooltip,
+                ...props.tooltipOptions
+            },
+            ptm('tooltip')
+        );
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: className,
+                style: props.style,
+                onClick: onClick
+            },
+            TriStateCheckboxBase.getOtherProps(props),
+            ptm('root')
+        );
+
         return (
             <>
-                <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
-                    <div className={boxClassName} tabIndex={props.tabIndex} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} role="checkbox" aria-checked={ariaChecked} {...ariaProps}>
-                        {checkIcon}
-                    </div>
-                    {focusedState && (
-                        <span className="p-sr-only" aria-live="polite">
-                            {ariaValueLabel}
-                        </span>
-                    )}
+                <div {...rootProps}>
+                    <div {...checkboxProps}>{checkIcon}</div>
+                    {focusedState && <span {...srOnlyAriaProps}>{ariaValueLabel}</span>}
                 </div>
-                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+                {hasTooltip && <Tooltip {...tooltipProps} />}
             </>
         );
     })
diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
index f4b82d9b6c..27472b2952 100644
--- a/components/lib/tristatecheckbox/TriStateCheckboxBase.js
+++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const TriStateCheckboxBase = {
+export const TriStateCheckboxBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'TriStateCheckbox',
         autoFocus: false,
@@ -17,7 +17,5 @@ export const TriStateCheckboxBase = {
         uncheckIcon: null,
         value: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, TriStateCheckboxBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, TriStateCheckboxBase.defaultProps)
-};
+    }
+});
diff --git a/components/lib/tristatecheckbox/tristatecheckbox.d.ts b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
index e92db98bad..c7118ba856 100644
--- a/components/lib/tristatecheckbox/tristatecheckbox.d.ts
+++ b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
@@ -8,9 +8,62 @@
  *
  */
 import * as React from 'react';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { FormEvent } from '../ts-helpers';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TriStateCheckboxPassThroughType<T> = PassThroughType<T, TriStateCheckboxPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TriStateCheckboxPassThroughMethodOptions {
+    props: TriStateCheckboxProps;
+    state: TriStateCheckboxState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TriStateCheckboxProps.pt}
+ */
+export interface TriStateCheckboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TriStateCheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the checkbox box's DOM element.
+     */
+    checkbox?: TriStateCheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Uses to pass attributes to the check icon's DOM element.
+     */
+    checkIcon?: TriStateCheckboxPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the uncheck icon's DOM element.
+     */
+    uncheckIcon?: TriStateCheckboxPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the sr only aria's DOM element.
+     */
+    srOnlyAria?: TriStateCheckboxPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+}
+
+/**
+ * Defines current inline state in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxState {
+    /**
+     * Focused state as a boolean.
+     */
+    focused: boolean;
+}
 
 /**
  * Custom change event.
@@ -70,6 +123,11 @@ export interface TriStateCheckboxProps extends Omit<React.DetailedHTMLProps<Reac
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TriStateCheckboxPassThroughOptions}
+     */
+    pt?: TriStateCheckboxPassThroughOptions;
 }
 
 /**
diff --git a/pages/tristatecheckbox/index.js b/pages/tristatecheckbox/index.js
index 67e0be088a..ce56dd7b46 100644
--- a/pages/tristatecheckbox/index.js
+++ b/pages/tristatecheckbox/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/tristatecheckbox/pt/ptdoc';
+import { Wireframe } from '../../components/doc/tristatecheckbox/pt/wireframe';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/tristatecheckbox/accessibilitydoc';
 import { BasicDoc } from '../../components/doc/tristatecheckbox/basicdoc';
@@ -58,8 +61,34 @@ const TriStateCheckboxDemo = () => {
             component: AccessibilityDoc
         }
     ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.tristatecheckbox.options',
+            label: 'TriStateCheckbox PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.demo',
+            label: 'Example',
+            component: PTDoc
+        }
+    ];
 
-    return <DocComponent title="React TriStateCheckbox Component" header="TriStateCheckbox" description="TriStateCheckbox is an extension to the Checkbox component with an additional state." componentDocs={docs} apiDocs={['TriStateCheckbox']} />;
+    return (
+        <DocComponent
+            title="React TriStateCheckbox Component"
+            header="TriStateCheckbox"
+            description="TriStateCheckbox is an extension to the Checkbox component with an additional state."
+            componentDocs={docs}
+            apiDocs={['TriStateCheckbox']}
+            ptDocs={ptDocs}
+        />
+    );
 };
 
 export default TriStateCheckboxDemo;

From 365d0bd408300b2345c47f21e2416cf12eb4fa8a Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Wed, 24 May 2023 17:59:37 +0300
Subject: [PATCH 27/34] Refactor #4431 - for ToggleButton

---
 components/doc/common/apidoc/index.json       |  7 +++++++
 components/lib/togglebutton/ToggleButton.js   | 11 ++++++++++-
 components/lib/togglebutton/togglebutton.d.ts |  6 ++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 60482394e6..3a514e0e74 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -35495,6 +35495,13 @@
                             "readonly": false,
                             "type": "ToggleButtonPassThroughType<HTMLAttributes<HTMLSpanElement>>",
                             "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
                         }
                     ],
                     "callbacks": []
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index 455dca4d55..a4a0ec2f2f 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -97,6 +97,15 @@ export const ToggleButton = React.memo(
             ptm('label')
         );
 
+        const tooltipProps = mergeProps(
+            {
+                target: elementRef,
+                content: props.tooltip,
+                ...props.tooltipOptions
+            },
+            ptm('tooltip')
+        );
+
         const rootProps = mergeProps(
             {
                 ref: elementRef,
@@ -122,7 +131,7 @@ export const ToggleButton = React.memo(
                     <span {...labelProps}>{label}</span>
                     <Ripple />
                 </div>
-                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+                {hasTooltip && <Tooltip {...tooltipProps} />}
             </>
         );
     })
diff --git a/components/lib/togglebutton/togglebutton.d.ts b/components/lib/togglebutton/togglebutton.d.ts
index 5578a6adbd..0e155ebf8d 100644
--- a/components/lib/togglebutton/togglebutton.d.ts
+++ b/components/lib/togglebutton/togglebutton.d.ts
@@ -8,6 +8,7 @@
  *
  */
 import * as React from 'react';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { IconType, PassThroughType } from '../utils';
 
@@ -37,6 +38,11 @@ export interface ToggleButtonPassThroughOptions {
      * Uses to pass attributes to the label's DOM element.
      */
     label?: ToggleButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
 }
 /**
  * Custom toggle button change target options

From 85ae20b3615b1d677a52187d054d2a40664cd12c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Thu, 25 May 2023 11:13:26 +0300
Subject: [PATCH 28/34] Refactor #4431: For InputText

---
 components/doc/common/apidoc/index.json       |  63 +++
 components/doc/inputtext/pt/ptdoc.js          |  80 +++
 .../{slidemenu => inputtext}/pt/wireframe.js  |   2 +-
 components/doc/slidemenu/pt/ptdoc.js          | 463 ------------------
 components/lib/inputtext/InputText.js         |  23 +-
 components/lib/inputtext/InputTextBase.js     |  10 +-
 components/lib/inputtext/inputtext.d.ts       |  32 ++
 pages/inputtext/index.js                      |  22 +-
 pages/slidemenu/index.js                      |  23 +-
 9 files changed, 241 insertions(+), 477 deletions(-)
 create mode 100644 components/doc/inputtext/pt/ptdoc.js
 rename components/doc/{slidemenu => inputtext}/pt/wireframe.js (80%)
 delete mode 100644 components/doc/slidemenu/pt/ptdoc.js

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 3a514e0e74..bb84109ba5 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -21333,6 +21333,14 @@
                             "type": "string",
                             "default": "",
                             "description": "The value of component"
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -22258,6 +22266,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -22286,6 +22302,53 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputTextPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputTextProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputTextPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes to the Tooltip component."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputTextPassThroughType": {
+                    "values": "PassThroughType<T, InputTextPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "inputtextarea": {
diff --git a/components/doc/inputtext/pt/ptdoc.js b/components/doc/inputtext/pt/ptdoc.js
new file mode 100644
index 0000000000..9ced6af400
--- /dev/null
+++ b/components/doc/inputtext/pt/ptdoc.js
@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { InputText } from '../../../lib/inputtext/InputText';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputText
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    pt={{
+        root: { className: 'border-primary-400' }
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function PTDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                pt={{
+                    root: { className: 'border-primary-400' }
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function PTDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                pt={{
+                    root: { className: 'border-primary-400' }
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputText is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    pt={{
+                        root: { className: 'border-primary-400' }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/slidemenu/pt/wireframe.js b/components/doc/inputtext/pt/wireframe.js
similarity index 80%
rename from components/doc/slidemenu/pt/wireframe.js
rename to components/doc/inputtext/pt/wireframe.js
index 9bf2ca8d53..cee9de3ae4 100644
--- a/components/doc/slidemenu/pt/wireframe.js
+++ b/components/doc/inputtext/pt/wireframe.js
@@ -6,7 +6,7 @@ export const Wireframe = (props) => {
         <>
             <DocSectionText {...props} />
             <div>
-                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="slidemenu" />
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="inputtext" />
             </div>
         </>
     );
diff --git a/components/doc/slidemenu/pt/ptdoc.js b/components/doc/slidemenu/pt/ptdoc.js
deleted file mode 100644
index 86bb917424..0000000000
--- a/components/doc/slidemenu/pt/ptdoc.js
+++ /dev/null
@@ -1,463 +0,0 @@
-import { SlideMenu } from '../../../lib/slidemenu/SlideMenu';
-import { DocSectionCode } from '../../common/docsectioncode';
-import { DocSectionText } from '../../common/docsectiontext';
-
-export function PTDoc(props) {
-    const items = [
-        {
-            label: 'File',
-            icon: 'pi pi-fw pi-file',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-plus',
-                    items: [
-                        {
-                            label: 'Bookmark',
-                            icon: 'pi pi-fw pi-bookmark'
-                        },
-                        {
-                            label: 'Video',
-                            icon: 'pi pi-fw pi-video'
-                        }
-                    ]
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-trash'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label: 'Edit',
-            icon: 'pi pi-fw pi-pencil',
-            items: [
-                {
-                    label: 'Left',
-                    icon: 'pi pi-fw pi-align-left'
-                },
-                {
-                    label: 'Right',
-                    icon: 'pi pi-fw pi-align-right'
-                },
-                {
-                    label: 'Center',
-                    icon: 'pi pi-fw pi-align-center'
-                },
-                {
-                    label: 'Justify',
-                    icon: 'pi pi-fw pi-align-justify'
-                }
-            ]
-        },
-        {
-            label: 'Users',
-            icon: 'pi pi-fw pi-user',
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-fw pi-user-plus'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-fw pi-user-minus'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        {
-                            label: 'Filter',
-                            icon: 'pi pi-fw pi-filter',
-                            items: [
-                                {
-                                    label: 'Print',
-                                    icon: 'pi pi-fw pi-print'
-                                }
-                            ]
-                        },
-                        {
-                            icon: 'pi pi-fw pi-bars',
-                            label: 'List'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            label: 'Events',
-            icon: 'pi pi-fw pi-calendar',
-            items: [
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Save',
-                            icon: 'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                },
-                {
-                    label: 'Archive',
-                    icon: 'pi pi-fw pi-calendar-times',
-                    items: [
-                        {
-                            label: 'Remove',
-                            icon: 'pi pi-fw pi-calendar-minus'
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            separator: true
-        },
-        {
-            label: 'Quit',
-            icon: 'pi pi-fw pi-power-off'
-        }
-    ];
-
-    const code = {
-        basic: `
-<SlideMenu
-    model={items}
-    viewportHeight={220}
-    menuWidth={175}
-    pt={{
-        action: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-    }}
-></SlideMenu>
-`,
-        javascript: `
-import React from 'react'; 
-import { SlideMenu } from 'primereact/slidemenu';
-
-export default function PTDemo() {
-    const items = [
-        {
-            label:'File',
-            icon:'pi pi-fw pi-file',
-            items:[
-                {
-                    label:'New',
-                    icon:'pi pi-fw pi-plus',
-                    items:[
-                    {
-                        label:'Bookmark',
-                        icon:'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label:'Video',
-                        icon:'pi pi-fw pi-video'
-                    },
-
-                    ]
-                },
-                {
-                    label:'Delete',
-                    icon:'pi pi-fw pi-trash'
-                },
-                {
-                    separator:true
-                },
-                {
-                    label:'Export',
-                    icon:'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label:'Edit',
-            icon:'pi pi-fw pi-pencil',
-            items:[
-                {
-                    label:'Left',
-                    icon:'pi pi-fw pi-align-left'
-                },
-                {
-                    label:'Right',
-                    icon:'pi pi-fw pi-align-right'
-                },
-                {
-                    label:'Center',
-                    icon:'pi pi-fw pi-align-center'
-                },
-                {
-                    label:'Justify',
-                    icon:'pi pi-fw pi-align-justify'
-                },
-
-            ]
-        },
-        {
-            label:'Users',
-            icon:'pi pi-fw pi-user',
-            items:[
-                {
-                    label:'New',
-                    icon:'pi pi-fw pi-user-plus',
-
-                },
-                {
-                    label:'Delete',
-                    icon:'pi pi-fw pi-user-minus',
-
-                },
-                {
-                    label:'Search',
-                    icon:'pi pi-fw pi-users',
-                    items:[
-                    {
-                        label:'Filter',
-                        icon:'pi pi-fw pi-filter',
-                        items:[
-                            {
-                                label:'Print',
-                                icon:'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon:'pi pi-fw pi-bars',
-                        label:'List'
-                    }
-                    ]
-                }
-            ]
-        },
-        {
-            label:'Events',
-            icon:'pi pi-fw pi-calendar',
-            items:[
-                {
-                    label:'Edit',
-                    icon:'pi pi-fw pi-pencil',
-                    items:[
-                    {
-                        label:'Save',
-                        icon:'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label:'Delete',
-                        icon:'pi pi-fw pi-calendar-minus'
-                    }
-                    ]
-                },
-                {
-                    label:'Archive',
-                    icon:'pi pi-fw pi-calendar-times',
-                    items:[
-                    {
-                        label:'Remove',
-                        icon:'pi pi-fw pi-calendar-minus'
-                    }
-                    ]
-                }
-            ]
-        },
-        {
-            separator:true
-        },
-        {
-            label:'Quit',
-            icon:'pi pi-fw pi-power-off'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <SlideMenu
-                model={items}
-                viewportHeight={220}
-                menuWidth={175}
-                pt={{
-                    action: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                }}
-            ></SlideMenu>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React from 'react'; 
-import { SlideMenu } from 'primereact/slidemenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
-    const items: MenuItem[] = [
-        {
-            label:'File',
-            icon:'pi pi-fw pi-file',
-            items:[
-                {
-                    label:'New',
-                    icon:'pi pi-fw pi-plus',
-                    items:[
-                    {
-                        label:'Bookmark',
-                        icon:'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label:'Video',
-                        icon:'pi pi-fw pi-video'
-                    },
-
-                    ]
-                },
-                {
-                    label:'Delete',
-                    icon:'pi pi-fw pi-trash'
-                },
-                {
-                    separator:true
-                },
-                {
-                    label:'Export',
-                    icon:'pi pi-fw pi-external-link'
-                }
-            ]
-        },
-        {
-            label:'Edit',
-            icon:'pi pi-fw pi-pencil',
-            items:[
-                {
-                    label:'Left',
-                    icon:'pi pi-fw pi-align-left'
-                },
-                {
-                    label:'Right',
-                    icon:'pi pi-fw pi-align-right'
-                },
-                {
-                    label:'Center',
-                    icon:'pi pi-fw pi-align-center'
-                },
-                {
-                    label:'Justify',
-                    icon:'pi pi-fw pi-align-justify'
-                },
-
-            ]
-        },
-        {
-            label:'Users',
-            icon:'pi pi-fw pi-user',
-            items:[
-                {
-                    label:'New',
-                    icon:'pi pi-fw pi-user-plus',
-
-                },
-                {
-                    label:'Delete',
-                    icon:'pi pi-fw pi-user-minus',
-
-                },
-                {
-                    label:'Search',
-                    icon:'pi pi-fw pi-users',
-                    items:[
-                    {
-                        label:'Filter',
-                        icon:'pi pi-fw pi-filter',
-                        items:[
-                            {
-                                label:'Print',
-                                icon:'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon:'pi pi-fw pi-bars',
-                        label:'List'
-                    }
-                    ]
-                }
-            ]
-        },
-        {
-            label:'Events',
-            icon:'pi pi-fw pi-calendar',
-            items:[
-                {
-                    label:'Edit',
-                    icon:'pi pi-fw pi-pencil',
-                    items:[
-                    {
-                        label:'Save',
-                        icon:'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label:'Delete',
-                        icon:'pi pi-fw pi-calendar-minus'
-                    }
-                    ]
-                },
-                {
-                    label:'Archive',
-                    icon:'pi pi-fw pi-calendar-times',
-                    items:[
-                    {
-                        label:'Remove',
-                        icon:'pi pi-fw pi-calendar-minus'
-                    }
-                    ]
-                }
-            ]
-        },
-        {
-            separator:true
-        },
-        {
-            label:'Quit',
-            icon:'pi pi-fw pi-power-off'
-        }
-    ];
-
-    return (
-        <div className="card flex justify-content-center">
-            <SlideMenu
-                model={items}
-                viewportHeight={220}
-                menuWidth={175}
-                pt={{
-                    action: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                }}
-            ></SlideMenu>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}></DocSectionText>
-            <div className="card flex justify-content-center">
-                <SlideMenu
-                    model={items}
-                    viewportHeight={220}
-                    menuWidth={175}
-                    pt={{
-                        action: ({ context }) => ({ className: context.active ? 'bg-primary-200' : undefined })
-                    }}
-                ></SlideMenu>
-            </div>
-            <DocSectionCode code={code} />
-        </>
-    );
-}
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index 2f1b5fdb1a..d01c711e87 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { InputTextBase } from './InputTextBase';
 
 export const InputText = React.memo(
     React.forwardRef((inProps, ref) => {
         const props = InputTextBase.getProps(inProps);
-
+        const { ptm } = InputTextBase.setMetaData({
+            props
+        });
         const elementRef = React.useRef(ref);
 
         const onKeyDown = (event) => {
@@ -46,7 +48,6 @@ export const InputText = React.memo(
 
         const isFilled = React.useMemo(() => ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue), [props.value, props.defaultValue]);
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-        const otherProps = InputTextBase.getOtherProps(props);
         const className = classNames(
             'p-inputtext p-component',
             {
@@ -56,10 +57,22 @@ export const InputText = React.memo(
             props.className
         );
 
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className,
+                onInput: (e) => onInput(e),
+                onKeyDown: (e) => onKeyDown(e),
+                onPaste: (e) => onPaste(e)
+            },
+            InputTextBase.getOtherProps(props),
+            ptm('root')
+        );
+
         return (
             <>
-                <input ref={elementRef} {...otherProps} className={className} onInput={onInput} onKeyDown={onKeyDown} onPaste={onPaste} />
-                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+                <input {...rootProps} />
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} pt={ptm('tooltip')} />}
             </>
         );
     })
diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
index 274cee2c92..00bac38d44 100644
--- a/components/lib/inputtext/InputTextBase.js
+++ b/components/lib/inputtext/InputTextBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const InputTextBase = {
+export const InputTextBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'InputText',
         keyfilter: null,
@@ -11,7 +11,5 @@ export const InputTextBase = {
         onKeyDown: null,
         onPaste: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, InputTextBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, InputTextBase.defaultProps)
-};
+    }
+});
diff --git a/components/lib/inputtext/inputtext.d.ts b/components/lib/inputtext/inputtext.d.ts
index 1715c50b9d..9e121f2b3a 100644
--- a/components/lib/inputtext/inputtext.d.ts
+++ b/components/lib/inputtext/inputtext.d.ts
@@ -10,6 +10,33 @@
 import * as React from 'react';
 import { KeyFilterType } from '../keyfilter';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { PassThroughType } from '../utils/utils';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+
+export declare type InputTextPassThroughType<T> = PassThroughType<T, InputTextPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputTextPassThroughMethodOptions {
+    props: InputTextProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputTextProps.pt}
+ */
+export interface InputTextPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputTextPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     * @see {@link TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+}
 
 /**
  * Defines valid properties in InputText component. In addition to these, all properties of HTMLInputElement can be used in this component.
@@ -49,6 +76,11 @@ export interface InputTextProps extends Omit<React.DetailedHTMLProps<React.Input
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputTextPassThroughOptions}
+     */
+    pt?: InputTextPassThroughOptions;
 }
 
 /**
diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js
index 0dfdcf9f0d..b0fe18ea0e 100644
--- a/pages/inputtext/index.js
+++ b/pages/inputtext/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/inputtext/pt/ptdoc';
+import { Wireframe } from '../../components/doc/inputtext/pt/wireframe';
 import React from 'react';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/inputtext/accessibilitydoc';
@@ -89,8 +92,25 @@ const InputTextDemo = () => {
             component: AccessibilityDoc
         }
     ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.inputtext.options',
+            label: 'InputText PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.demo',
+            label: 'Example',
+            component: PTDoc
+        }
+    ];
 
-    return <DocComponent title="React Input Component" header="InputText" description="InputText is an extension to standard input element with theming and keyfiltering." componentDocs={docs} apiDocs={['InputText']} />;
+    return <DocComponent title="React Input Component" header="InputText" description="InputText is an extension to standard input element with theming and keyfiltering." componentDocs={docs} apiDocs={['InputText']} ptDocs={ptDocs} />;
 };
 
 export default InputTextDemo;
diff --git a/pages/slidemenu/index.js b/pages/slidemenu/index.js
index 6da77c4383..1e61ea756a 100644
--- a/pages/slidemenu/index.js
+++ b/pages/slidemenu/index.js
@@ -1,6 +1,9 @@
 import DocApiTable from '../../components/doc/common/docapitable';
 import { PTDoc } from '../../components/doc/slidemenu/pt/ptdoc';
 import { Wireframe } from '../../components/doc/slidemenu/pt/wireframe';
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/slidemenu/pt/ptdoc';
+import { Wireframe } from '../../components/doc/slidemenu/pt/wireframe';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/slidemenu/accessibilitydoc';
 import { BasicDoc } from '../../components/doc/slidemenu/basicdoc';
@@ -54,7 +57,25 @@ const SlideMenuDemo = () => {
         }
     ];
 
-    return <DocComponent title="React SlideMenu Component" header="SlideMenu" description="SlideMenu displays submenus with a slide animation." componentDocs={docs} apiDocs={['SlideMenu', 'MenuItem']} ptDocs={ptDocs} />;
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.slidemenu.options',
+            label: 'SlideMenu PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.demo',
+            label: 'Example',
+            component: PTDoc
+        }
+    ];
+
+    return <DocComponent title="React SlideMenu Component" header="SlideMenu" description="SlideMenu displays submenus with a slide animation." componentDocs={docs} apiDocs={['SlideMenu', 'MenuItem']} ptDocs={ptDocs} ptDocs={ptDocs} />;
 };
 
 export default SlideMenuDemo;

From 8d58d08d204efeb1e79ea3aaaf8b5d33d8cc80a1 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 25 May 2023 12:53:24 +0300
Subject: [PATCH 29/34] Refactor #4431 - for Slider

---
 components/doc/common/apidoc/index.json | 62 ++++++++++++++++++
 components/doc/slider/pt/ptdoc.js       | 84 +++++++++++++++++++++++++
 components/doc/slider/pt/wireframe.js   | 13 ++++
 components/lib/slider/Slider.js         | 76 +++++++++++++++-------
 components/lib/slider/SliderBase.js     | 10 ++-
 components/lib/slider/slider.d.ts       | 35 ++++++++++-
 pages/slider/index.js                   | 22 ++++++-
 7 files changed, 271 insertions(+), 31 deletions(-)
 create mode 100644 components/doc/slider/pt/ptdoc.js
 create mode 100644 components/doc/slider/pt/wireframe.js

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index bb84109ba5..c33f13953d 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -31793,6 +31793,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -31874,6 +31882,60 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SliderPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SliderProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SliderPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "range",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the range's DOM element."
+                        },
+                        {
+                            "name": "handle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the handle's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SliderPassThroughType": {
+                    "values": "PassThroughType<T, SliderPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "speeddial": {
diff --git a/components/doc/slider/pt/ptdoc.js b/components/doc/slider/pt/ptdoc.js
new file mode 100644
index 0000000000..cdfb4e1397
--- /dev/null
+++ b/components/doc/slider/pt/ptdoc.js
@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { Slider } from '../../../lib/slider/Slider';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<Slider
+    value={value}
+    onChange={(e) => setValue(e.value)}
+    pt={{
+        root: { className: 'w-14rem' },
+        handle: { className: 'bg-orange-400 border-900' },
+        range: { className: 'bg-orange-400' }
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+
+export default function PTDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider
+                value={value}
+                onChange={(e) => setValue(e.value)}
+                pt={{
+                    root: { className: 'w-14rem' },
+                    handle: { className: 'bg-orange-400 border-900' },
+                    range: { className: 'bg-orange-400' }
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+
+export default function PTDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider
+                value={value}
+                onChange={(e) => setValue(e.value)}
+                pt={{
+                    root: { className: 'w-14rem' },
+                    handle: { className: 'bg-orange-400 border-900' },
+                    range: { className: 'bg-orange-400' }
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <Slider
+                    value={value}
+                    onChange={(e) => setValue(e.value)}
+                    pt={{
+                        root: { className: 'w-14rem' },
+                        handle: { className: 'bg-orange-400 border-900' },
+                        range: { className: 'bg-orange-400' }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/slider/pt/wireframe.js b/components/doc/slider/pt/wireframe.js
new file mode 100644
index 0000000000..8b72479085
--- /dev/null
+++ b/components/doc/slider/pt/wireframe.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="slider" />
+            </div>
+        </>
+    );
+};
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index 0e5affd25d..7e409d316f 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEventListener } from '../hooks/Hooks';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { SliderBase } from './SliderBase';
 
 export const Slider = React.memo(
@@ -24,6 +24,10 @@ export const Slider = React.memo(
         const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({ type: 'touchmove', listener: (event) => onDrag(event) });
         const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({ type: 'touchend', listener: (event) => onDragEnd(event) });
 
+        const { ptm } = SliderBase.setMetaData({
+            props
+        });
+
         const spin = (event, dir) => {
             const val = props.range ? value[handleIndex.current] : value;
             const step = (props.step || 1) * dir;
@@ -189,22 +193,25 @@ export const Slider = React.memo(
                 'p-slider-handle-active': handleIndex.current === index
             });
 
-            return (
-                <span
-                    className={className}
-                    style={style}
-                    tabIndex={props.tabIndex}
-                    role="slider"
-                    onMouseDown={(event) => onMouseDown(event, index)}
-                    onTouchStart={(event) => onTouchStart(event, index)}
-                    onKeyDown={(event) => onKeyDown(event, index)}
-                    aria-valuemin={props.min}
-                    aria-valuemax={props.max}
-                    aria-valuenow={leftValue || bottomValue}
-                    aria-orientation={props.orientation}
-                    {...ariaProps}
-                ></span>
+            const handleProps = mergeProps(
+                {
+                    className: className,
+                    style: style,
+                    tabIndex: props.tabIndex,
+                    role: 'slider',
+                    onMouseDown: (event) => onMouseDown(event, index),
+                    onTouchStart: (event) => onTouchStart(event, index),
+                    onKeyDown: (event) => onKeyDown(event, index),
+                    'aria-valuemin': props.min,
+                    'aria-valuemax': props.max,
+                    'aria-valuenow': leftValue || bottomValue,
+                    'aria-orientation': props.orientation,
+                    ...ariaProps
+                },
+                ptm('handle')
             );
+
+            return <span {...handleProps}></span>;
         };
 
         const createRangeSlider = () => {
@@ -218,9 +225,17 @@ export const Slider = React.memo(
 
             const rangeStyle = horizontal ? { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' } : { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
 
+            const rangeProps = mergeProps(
+                {
+                    className: 'p-slider-range',
+                    style: rangeStyle
+                },
+                ptm('range')
+            );
+
             return (
                 <>
-                    <span className="p-slider-range" style={rangeStyle}></span>
+                    <span {...rangeProps}></span>
                     {rangeStartHandle}
                     {rangeEndHandle}
                 </>
@@ -237,9 +252,17 @@ export const Slider = React.memo(
             const rangeStyle = horizontal ? { width: handleValue + '%' } : { height: handleValue + '%' };
             const handle = horizontal ? createHandle(handleValue, null, null) : createHandle(null, handleValue, null);
 
+            const rangeProps = mergeProps(
+                {
+                    className: 'p-slider-range',
+                    style: rangeStyle
+                },
+                ptm('range')
+            );
+
             return (
                 <>
-                    <span className="p-slider-range" style={rangeStyle}></span>
+                    <span {...rangeProps}></span>
                     {handle}
                 </>
             );
@@ -258,12 +281,19 @@ export const Slider = React.memo(
             'p-slider-vertical': vertical
         });
         const content = props.range ? createRangeSlider() : createSingleSlider();
-
-        return (
-            <div ref={elementRef} id={props.id} style={props.style} className={className} {...otherProps} onClick={onBarClick}>
-                {content}
-            </div>
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                style: props.style,
+                className: className,
+                onClick: onBarClick
+            },
+            SliderBase.getOtherProps(props),
+            ptm('root')
         );
+
+        return <div {...rootProps}>{content}</div>;
     })
 );
 
diff --git a/components/lib/slider/SliderBase.js b/components/lib/slider/SliderBase.js
index 69a5b198c7..9d4fe75d42 100644
--- a/components/lib/slider/SliderBase.js
+++ b/components/lib/slider/SliderBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const SliderBase = {
+export const SliderBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Slider',
         id: null,
@@ -17,7 +17,5 @@ export const SliderBase = {
         onChange: null,
         onSlideEnd: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, SliderBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, SliderBase.defaultProps)
-};
+    }
+});
diff --git a/components/lib/slider/slider.d.ts b/components/lib/slider/slider.d.ts
index 38f54970e7..c2420f2d9d 100644
--- a/components/lib/slider/slider.d.ts
+++ b/components/lib/slider/slider.d.ts
@@ -8,6 +8,34 @@
  *
  */
 import * as React from 'react';
+import { PassThroughType } from '../utils/utils';
+export declare type SliderPassThroughType<T> = PassThroughType<T, SliderPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SliderPassThroughMethodOptions {
+    props: SliderProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SliderProps.pt}
+ */
+export interface SliderPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SliderPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: SliderPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the handle's DOM element.
+     */
+    handle?: SliderPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+}
 
 /**
  * Custom change event.
@@ -37,7 +65,7 @@ interface SliderSlideEndEvent extends SliderChangeEvent {}
  * Defines valid properties in Slider component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface SliderProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref'> {
+export interface SliderProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref' | 'pt'> {
     /**
      * Value of the component.
      * @defaultValue 0
@@ -92,6 +120,11 @@ export interface SliderProps extends Omit<React.DetailedHTMLProps<React.InputHTM
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SliderPassThroughOptions}
+     */
+    pt?: SliderPassThroughOptions;
 }
 
 /**
diff --git a/pages/slider/index.js b/pages/slider/index.js
index 77b449ba50..d2fd195fd0 100644
--- a/pages/slider/index.js
+++ b/pages/slider/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/slider/pt/ptdoc';
+import { Wireframe } from '../../components/doc/slider/pt/wireframe';
 import React from 'react';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/slider/accessibilitydoc';
@@ -52,8 +55,25 @@ const SliderDemo = () => {
             component: AccessibilityDoc
         }
     ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.slider.options',
+            label: 'Slider PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.demo',
+            label: 'Example',
+            component: PTDoc
+        }
+    ];
 
-    return <DocComponent title="React Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." componentDocs={docs} apiDocs={['Slider']} />;
+    return <DocComponent title="React Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." componentDocs={docs} apiDocs={['Slider']} ptDocs={ptDocs} />;
 };
 
 export default SliderDemo;

From 77240f391cfc1a38e0507b4a0b117512e9148528 Mon Sep 17 00:00:00 2001
From: legarsjules <legarsjules@gmail.com>
Date: Thu, 25 May 2023 13:28:10 +0200
Subject: [PATCH 30/34] Fix #4449 - Calendar: Navigation broken when defining
 min and max values (#4450)

* Fix #4449 - Calendar: Navigation broken when defining min and max values

* Fix #4449 - fix eslint issues
---
 components/lib/calendar/Calendar.js | 18 +++++++-----------
 pages/slidemenu/index.js            | 20 +-------------------
 2 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 07e75c6f49..141e3f91bd 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -1784,9 +1784,9 @@ export const Calendar = React.memo(
                 if (props.minDate.getFullYear() > year) {
                     validMin = false;
                 } else if (props.minDate.getFullYear() === year) {
-                    if (props.minDate.getMonth() > month) {
+                    if (month > -1 && props.minDate.getMonth() > month) {
                         validMin = false;
-                    } else if (props.minDate.getMonth() === month) {
+                    } else if (month > -1 && props.minDate.getMonth() === month) {
                         if (day > 0 && props.minDate.getDate() > day) {
                             validMin = false;
                         }
@@ -1798,9 +1798,9 @@ export const Calendar = React.memo(
                 if (props.maxDate.getFullYear() < year) {
                     validMax = false;
                 } else if (props.maxDate.getFullYear() === year) {
-                    if (props.maxDate.getMonth() < month) {
+                    if (month > -1 && props.maxDate.getMonth() < month) {
                         validMax = false;
-                    } else if (props.maxDate.getMonth() === month) {
+                    } else if (month > -1 && props.maxDate.getMonth() === month) {
                         if (day > 0 && props.maxDate.getDate() < day) {
                             validMax = false;
                         }
@@ -2864,7 +2864,7 @@ export const Calendar = React.memo(
         };
 
         const createMonthViewMonth = (index) => {
-            const className = classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(index), 'p-disabled': !isSelectable(1, index, currentYear) });
+            const className = classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(index), 'p-disabled': !isSelectable(0, index, currentYear) });
             const monthNamesShort = localeOption('monthNamesShort', props.locale);
             const monthName = monthNamesShort[index];
 
@@ -3248,7 +3248,7 @@ export const Calendar = React.memo(
                     <div className="p-monthpicker">
                         {monthPickerValues().map((m, i) => {
                             return (
-                                <span onClick={(event) => onMonthSelect(event, i)} key={`month${i + 1}`} className={classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(i), 'p-disabled': !isSelectable(1, i, currentYear) })}>
+                                <span onClick={(event) => onMonthSelect(event, i)} key={`month${i + 1}`} className={classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(i), 'p-disabled': !isSelectable(0, i, currentYear) })}>
                                     {m}
                                 </span>
                             );
@@ -3266,11 +3266,7 @@ export const Calendar = React.memo(
                     <div className="p-yearpicker">
                         {yearPickerValues().map((y, i) => {
                             return (
-                                <span
-                                    onClick={(event) => onYearSelect(event, y)}
-                                    key={`year${i + 1}`}
-                                    className={classNames('p-yearpicker-year', { 'p-highlight': isYearSelected(y), 'p-disabled': !(isSelectable(0, 0, y) || isSelectable(30, 11, y)) })}
-                                >
+                                <span onClick={(event) => onYearSelect(event, y)} key={`year${i + 1}`} className={classNames('p-yearpicker-year', { 'p-highlight': isYearSelected(y), 'p-disabled': !isSelectable(0, -1, y) })}>
                                     {y}
                                 </span>
                             );
diff --git a/pages/slidemenu/index.js b/pages/slidemenu/index.js
index 1e61ea756a..5dd5e319c9 100644
--- a/pages/slidemenu/index.js
+++ b/pages/slidemenu/index.js
@@ -57,25 +57,7 @@ const SlideMenuDemo = () => {
         }
     ];
 
-    const ptDocs = [
-        {
-            id: 'pt.wireframe',
-            label: 'Wireframe',
-            component: Wireframe
-        },
-        {
-            id: 'pt.slidemenu.options',
-            label: 'SlideMenu PT Options',
-            component: DocApiTable
-        },
-        {
-            id: 'pt.demo',
-            label: 'Example',
-            component: PTDoc
-        }
-    ];
-
-    return <DocComponent title="React SlideMenu Component" header="SlideMenu" description="SlideMenu displays submenus with a slide animation." componentDocs={docs} apiDocs={['SlideMenu', 'MenuItem']} ptDocs={ptDocs} ptDocs={ptDocs} />;
+    return <DocComponent title="React SlideMenu Component" header="SlideMenu" description="SlideMenu displays submenus with a slide animation." componentDocs={docs} apiDocs={['SlideMenu', 'MenuItem']} ptDocs={ptDocs} />;
 };
 
 export default SlideMenuDemo;

From 3cab1e6a6c85dcb4d8b7ec24c48f898dc4351f6d Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 25 May 2023 14:30:15 +0300
Subject: [PATCH 31/34] Refactor #4431 - for SelectButton

---
 components/doc/common/apidoc/index.json       | 89 +++++++++++++++++++
 components/doc/selectbutton/pt/ptdoc.js       | 83 +++++++++++++++++
 components/doc/selectbutton/pt/wireframe.js   | 13 +++
 components/lib/selectbutton/SelectButton.js   | 36 ++++++--
 .../lib/selectbutton/SelectButtonBase.js      | 10 +--
 .../lib/selectbutton/SelectButtonItem.js      | 36 +++++++-
 components/lib/selectbutton/selectbutton.d.ts | 53 ++++++++++-
 pages/selectbutton/index.js                   | 22 ++++-
 8 files changed, 324 insertions(+), 18 deletions(-)
 create mode 100644 components/doc/selectbutton/pt/ptdoc.js
 create mode 100644 components/doc/selectbutton/pt/wireframe.js

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index c33f13953d..61064202d7 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -30766,6 +30766,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -30836,6 +30844,87 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SelectButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectButtonProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectButtonContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SelectButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SelectButtonContext": {
+                    "description": "Defines current options in SelectButton component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current selected value."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SelectButtonPassThroughType": {
+                    "values": "PassThroughType<T, SelectButtonPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "selectitem": {
diff --git a/components/doc/selectbutton/pt/ptdoc.js b/components/doc/selectbutton/pt/ptdoc.js
new file mode 100644
index 0000000000..b47ab1eda9
--- /dev/null
+++ b/components/doc/selectbutton/pt/ptdoc.js
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { SelectButton } from '../../../lib/selectbutton/SelectButton';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const options = ['Off', 'On'];
+    const [value, setValue] = useState(options[0]);
+
+    const code = {
+        basic: `
+<SelectButton
+    value={value}
+    onChange={(e) => setValue(e.value)}
+    options={options}
+    pt={{
+        button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { SelectButton } from 'primereact/selectbutton';
+
+export default function PTDemo() {
+    const options = ['Off', 'On'];
+    const [value, setValue] = useState(options[0]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton
+                value={value}
+                onChange={(e) => setValue(e.value)}
+                options={options}
+                pt={{
+                    button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
+                }}
+            />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
+
+export default function PTDemo() {
+    const options: string[] = ['Off', 'On'];
+    const [value, setValue] = useState<string>(options[0]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton
+                value={value}
+                onChange={(e) => setValue(e.value)}
+                options={options}
+                pt={{
+                    button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
+                }}
+            />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <SelectButton
+                    value={value}
+                    onChange={(e) => setValue(e.value)}
+                    options={options}
+                    pt={{
+                        button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/pt/wireframe.js b/components/doc/selectbutton/pt/wireframe.js
new file mode 100644
index 0000000000..2b33143d14
--- /dev/null
+++ b/components/doc/selectbutton/pt/wireframe.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="selectbutton" />
+            </div>
+        </>
+    );
+};
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index f4746136db..0bc1087e8d 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils';
 import { SelectButtonBase } from './SelectButtonBase';
 import { SelectButtonItem } from './SelectButtonItem';
 
@@ -10,6 +10,10 @@ export const SelectButton = React.memo(
 
         const elementRef = React.useRef(null);
 
+        const { ptm } = SelectButtonBase.setMetaData({
+            props
+        });
+
         const onOptionClick = (event) => {
             if (props.disabled || isOptionDisabled(event.option)) {
                 return;
@@ -90,7 +94,7 @@ export const SelectButton = React.memo(
                     const selected = isSelected(option);
                     const key = optionLabel + '_' + index;
 
-                    return <SelectButtonItem key={key} label={optionLabel} className={option.className} option={option} onClick={onOptionClick} template={props.itemTemplate} selected={selected} tabIndex={tabIndex} disabled={isDisabled} />;
+                    return <SelectButtonItem key={key} label={optionLabel} className={option.className} option={option} onClick={onOptionClick} template={props.itemTemplate} selected={selected} tabIndex={tabIndex} disabled={isDisabled} ptm={ptm} />;
                 });
             }
 
@@ -104,16 +108,34 @@ export const SelectButton = React.memo(
         }));
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-        const otherProps = SelectButtonBase.getOtherProps(props);
         const className = classNames('p-selectbutton p-buttonset p-component', props.className);
         const items = createItems();
 
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: className,
+                style: props.style,
+                role: 'group'
+            },
+            SelectButtonBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const tooltipProps = mergeProps(
+            {
+                target: elementRef,
+                content: props.tooltip,
+                ...props.tooltipOptions
+            },
+            ptm('tooltip')
+        );
+
         return (
             <>
-                <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} role="group">
-                    {items}
-                </div>
-                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+                <div {...rootProps}>{items}</div>
+                {hasTooltip && <Tooltip {...tooltipProps} />}
             </>
         );
     })
diff --git a/components/lib/selectbutton/SelectButtonBase.js b/components/lib/selectbutton/SelectButtonBase.js
index 9cab454454..95f1f41e23 100644
--- a/components/lib/selectbutton/SelectButtonBase.js
+++ b/components/lib/selectbutton/SelectButtonBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const SelectButtonBase = {
+export const SelectButtonBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'SelectButton',
         id: null,
@@ -21,7 +21,5 @@ export const SelectButtonBase = {
         itemTemplate: null,
         onChange: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, SelectButtonBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, SelectButtonBase.defaultProps)
-};
+    }
+});
diff --git a/components/lib/selectbutton/SelectButtonItem.js b/components/lib/selectbutton/SelectButtonItem.js
index 69fb90e62c..87ef56dc5b 100644
--- a/components/lib/selectbutton/SelectButtonItem.js
+++ b/components/lib/selectbutton/SelectButtonItem.js
@@ -1,10 +1,18 @@
 import * as React from 'react';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, mergeProps, ObjectUtils } from '../utils/Utils';
 
 export const SelectButtonItem = React.memo((props) => {
     const [focusedState, setFocusedState] = React.useState(false);
 
+    const getPTOptions = (item, key) => {
+        return props.ptm(key, {
+            context: {
+                selected: props.selected
+            }
+        });
+    };
+
     const onClick = (event) => {
         if (props.onClick) {
             props.onClick({
@@ -32,7 +40,14 @@ export const SelectButtonItem = React.memo((props) => {
     };
 
     const createContent = () => {
-        return props.template ? ObjectUtils.getJSXElement(props.template, props.option) : <span className="p-button-label p-c">{props.label}</span>;
+        const labelProps = mergeProps(
+            {
+                className: 'p-button-label p-c'
+            },
+            getPTOptions(props.option, 'label')
+        );
+
+        return props.template ? ObjectUtils.getJSXElement(props.template, props.option) : <span {...labelProps}>{props.label}</span>;
     };
 
     const className = classNames(
@@ -46,8 +61,23 @@ export const SelectButtonItem = React.memo((props) => {
     );
     const content = createContent();
 
+    const buttonProps = mergeProps(
+        {
+            className: className,
+            role: 'button',
+            'aria-label': props.label,
+            'aria-pressed': props.selected,
+            onClick: onClick,
+            onKeyDown: onKeyDown,
+            tabIndex: props.tabIndex,
+            onFocus: onFocus,
+            onBlur: onBlur
+        },
+        getPTOptions(props.option, 'button')
+    );
+
     return (
-        <div className={className} role="button" aria-label={props.label} aria-pressed={props.selected} onClick={onClick} onKeyDown={onKeyDown} tabIndex={props.tabIndex} onFocus={onFocus} onBlur={onBlur}>
+        <div {...buttonProps}>
             {content}
             {!props.disabled && <Ripple />}
         </div>
diff --git a/components/lib/selectbutton/selectbutton.d.ts b/components/lib/selectbutton/selectbutton.d.ts
index a83202826d..67bdade01b 100644
--- a/components/lib/selectbutton/selectbutton.d.ts
+++ b/components/lib/selectbutton/selectbutton.d.ts
@@ -9,8 +9,54 @@
  */
 import * as React from 'react';
 import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { FormEvent } from '../ts-helpers';
+import { PassThroughType } from '../utils/utils';
+
+export declare type SelectButtonPassThroughType<T> = PassThroughType<T, SelectButtonPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SelectButtonPassThroughMethodOptions {
+    props: SelectButtonProps;
+    context: SelectButtonContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SelectButtonProps.pt}
+ */
+export interface SelectButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SelectButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: SelectButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: SelectButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+}
+
+/**
+ * Defines current options in SelectButton component.
+ */
+export interface SelectButtonContext {
+    /**
+     * Current selected value.
+     */
+    selected: any;
+}
 
 /**
  * Custom change event.
@@ -24,7 +70,7 @@ interface SelectButtonChangeEvent extends FormEvent {}
  * Defines valid properties in SelectButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'unselectable' | 'onChange' | 'ref'> {
+export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'unselectable' | 'onChange' | 'ref' | 'pt'> {
     /**
      * Value of the component.
      */
@@ -95,6 +141,11 @@ export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.In
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SelectButtonPassThroughOptions}
+     */
+    pt?: SelectButtonPassThroughOptions;
 }
 
 /**
diff --git a/pages/selectbutton/index.js b/pages/selectbutton/index.js
index bb5361fa4f..0a899f75b4 100644
--- a/pages/selectbutton/index.js
+++ b/pages/selectbutton/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/selectbutton/pt/ptdoc';
+import { Wireframe } from '../../components/doc/selectbutton/pt/wireframe';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/selectbutton/accessibilitydoc';
 import { BasicDoc } from '../../components/doc/selectbutton/basicdoc';
@@ -64,8 +67,25 @@ const SelectButtonDemo = () => {
             component: AccessibilityDoc
         }
     ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.selectbutton.options',
+            label: 'SelectButton PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.demo',
+            label: 'Example',
+            component: PTDoc
+        }
+    ];
 
-    return <DocComponent title="React SelectButton Component" header="SelectButton" description="SelectButton is used to choose single or multiple items from a list using buttons." componentDocs={docs} apiDocs={['SelectButton']} />;
+    return <DocComponent title="React SelectButton Component" header="SelectButton" description="SelectButton is used to choose single or multiple items from a list using buttons." componentDocs={docs} apiDocs={['SelectButton']} ptDocs={ptDocs} />;
 };
 
 export default SelectButtonDemo;

From 1031dcb48271fb564e56cad7e7359d40e21bc543 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Thu, 25 May 2023 07:57:50 -0400
Subject: [PATCH 32/34] Datatable typescript filter demos (#4451)

---
 .../doc/datatable/filter/advanceddoc.js       | 89 ++++++++++++-------
 components/doc/datatable/filter/basicdoc.js   | 43 +++++----
 2 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/components/doc/datatable/filter/advanceddoc.js b/components/doc/datatable/filter/advanceddoc.js
index 906ed710b1..98a041bd0c 100644
--- a/components/doc/datatable/filter/advanceddoc.js
+++ b/components/doc/datatable/filter/advanceddoc.js
@@ -504,12 +504,11 @@ export default function AdvancedFilterDemo() {
 import React, { useState, useEffect } from 'react';
 import { classNames } from 'primereact/utils';
 import { FilterMatchMode, FilterOperator } from 'primereact/api';
-import { DataTable, DataTableFilterMeta, ColumnFilterClearTemplateOptions, 
-        ColumnFilterApplyTemplateOptions } from 'primereact/datatable';
+import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
 import { Column, ColumnFilterElementTemplateOptions } from 'primereact/column';
 import { InputText } from 'primereact/inputtext';
 import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
-import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+import { InputNumber, InputNumberChangeEvent } from 'primereact/inputnumber';
 import { Button } from 'primereact/button';
 import { ProgressBar } from 'primereact/progressbar';
 import { Calendar, CalendarChangeEvent } from 'primereact/calendar';
@@ -519,30 +518,62 @@ import { Tag } from 'primereact/tag';
 import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
 import { CustomerService } from './service/CustomerService';
 
-interface RepresentativeOption {
+interface Representative {
+  name: string;
+  image: string;
+}
+
+interface Country {
     name: string;
-    image: string;
+    code: string;
 }
 
 interface Customer {
-    id: number;
-    name: string;
-    country: Country;
-    company: string;
-    date: string;
-    status: string;
-    verified: boolean;
-    activity: number;
-    representative: Representative;
-    balance: number;
+  id: number;
+  name: string;
+  country: Country;
+  company: string;
+  date: string;
+  status: string;
+  verified: boolean;
+  activity: number;
+  representative: Representative;
+  balance: number;
 }
 
+const defaultFilters: DataTableFilterMeta = {
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+  name: {
+    operator: FilterOperator.AND,
+    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
+  },
+  'country.name': {
+    operator: FilterOperator.AND,
+    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
+  },
+  representative: { value: null, matchMode: FilterMatchMode.IN },
+  date: {
+    operator: FilterOperator.AND,
+    constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }],
+  },
+  balance: {
+    operator: FilterOperator.AND,
+    constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
+  },
+  status: {
+    operator: FilterOperator.OR,
+    constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
+  },
+  activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+  verified: { value: null, matchMode: FilterMatchMode.EQUALS },
+};
+
 export default function AdvancedFilterDemo() {
-    const [customers, setCustomers] = useState<Customer[] | null>(null);
-    const [filters, setFilters] = useState<DataTableFilterMeta | null>(null);
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [filters, setFilters] = useState<DataTableFilterMeta>(defaultFilters);
     const [loading, setLoading] = useState<boolean>(false);
     const [globalFilterValue, setGlobalFilterValue] = useState<string>('');
-    const [representatives] = useState<RepresentativeOption[]>([
+    const [representatives] = useState<Representative[]>([
         { name: 'Amy Elsner', image: 'amyelsner.png' },
         { name: 'Anna Fali', image: 'annafali.png' },
         { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
@@ -585,6 +616,7 @@ export default function AdvancedFilterDemo() {
 
     const getCustomers = (data: Customer[]) => {
         return [...(data || [])].map((d) => {
+            // @ts-ignore
             d.date = new Date(d.date);
 
             return d;
@@ -611,6 +643,7 @@ export default function AdvancedFilterDemo() {
         const value = e.target.value;
         let _filters = { ...filters };
 
+        // @ts-ignore
         _filters['global'].value = value;
 
         setFilters(_filters);
@@ -618,17 +651,7 @@ export default function AdvancedFilterDemo() {
     };
 
     const initFilters = () => {
-        setFilters({
-            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-            'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-            representative: { value: null, matchMode: FilterMatchMode.IN },
-            date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-            balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-            activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
-            verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-        });
+        setFilters(defaultFilters);
         setGlobalFilterValue('');
     };
 
@@ -680,7 +703,7 @@ export default function AdvancedFilterDemo() {
         return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e: MultiSelectChangeEvent) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
     };
 
-    const representativesItemTemplate = (option: RepresentativeOption) => {
+    const representativesItemTemplate = (option: Representative) => {
         return (
             <div className="flex align-items-center gap-2">
                 <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
@@ -690,7 +713,7 @@ export default function AdvancedFilterDemo() {
     };
 
     const dateBodyTemplate = (rowData: Customer) => {
-        return formatDate(rowData.date);
+        return formatDate(new Date(rowData.date));
     };
 
     const dateFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
@@ -702,7 +725,7 @@ export default function AdvancedFilterDemo() {
     };
 
     const balanceFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
-        return <InputNumber value={options.value} onChange={(e: InputNumberValueChangeEvent) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
+        return <InputNumber value={options.value} onChange={(e: InputNumberChangeEvent) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
     };
 
     const statusBodyTemplate = (rowData: Customer) => {
@@ -743,7 +766,7 @@ export default function AdvancedFilterDemo() {
                 <label htmlFor="verified-filter" className="font-bold">
                     Verified
                 </label>
-                <TriStateCheckbox inputId="verified-filter" value={options.value} onChange={(e: TriStateCheckboxChangeEvent) => options.filterCallback(e.value)} />
+                <TriStateCheckbox id="verified-filter" value={options.value} onChange={(e: TriStateCheckboxChangeEvent) => options.filterCallback(e.value)} />
             </div>
         );
     };
diff --git a/components/doc/datatable/filter/basicdoc.js b/components/doc/datatable/filter/basicdoc.js
index 19f3cecbc3..34bcb7384d 100644
--- a/components/doc/datatable/filter/basicdoc.js
+++ b/components/doc/datatable/filter/basicdoc.js
@@ -355,9 +355,9 @@ export default function BasicFilterDemo() {
         typescript: `
 import React, { useState, useEffect } from 'react';
 import { classNames } from 'primereact/utils';
-import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { FilterMatchMode } from 'primereact/api';
 import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
-import { Column } from 'primereact/column';
+import { Column, ColumnFilterElementTemplateOptions } from 'primereact/column';
 import { InputText } from 'primereact/inputtext';
 import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
 import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
@@ -365,26 +365,31 @@ import { Tag } from 'primereact/tag';
 import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
 import { CustomerService } from './service/CustomerService';
 
-interface RepresentativeOption {
+interface Representative {
+  name: string;
+  image: string;
+}
+
+interface Country {
     name: string;
-    image: string;
+    code: string;
 }
 
 interface Customer {
-    id: number;
-    name: string;
-    country: Country;
-    company: string;
-    date: string;
-    status: string;
-    verified: boolean;
-    activity: number;
-    representative: Representative;
-    balance: number;
+  id: number;
+  name: string;
+  country: Country;
+  company: string;
+  date: string;
+  status: string;
+  verified: boolean;
+  activity: number;
+  representative: Representative;
+  balance: number;
 }
 
 export default function BasicFilterDemo() {
-    const [customers, setCustomers] = useState<Customer[] | null>(null);
+    const [customers, setCustomers] = useState<Customer[]>([]);
     const [filters, setFilters] = useState<DataTableFilterMeta>({
         global: { value: null, matchMode: FilterMatchMode.CONTAINS },
         name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
@@ -395,7 +400,7 @@ export default function BasicFilterDemo() {
     });
     const [loading, setLoading] = useState<boolean>(true);
     const [globalFilterValue, setGlobalFilterValue] = useState<string>('');
-    const [representatives] = useState<RepresentativeOption[]>([
+    const [representatives] = useState<Representative[]>([
         { name: 'Amy Elsner', image: 'amyelsner.png' },
         { name: 'Anna Fali', image: 'annafali.png' },
         { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
@@ -407,7 +412,7 @@ export default function BasicFilterDemo() {
         { name: 'Stephen Shaw', image: 'stephenshaw.png' },
         { name: 'XuXue Feng', image: 'xuxuefeng.png' }
     ]);
-    const [statuses] = useState<string>(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+    const [statuses] = useState<string[]>(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
 
     const getSeverity = (status: string) => {
         switch (status) {
@@ -437,6 +442,7 @@ export default function BasicFilterDemo() {
 
     const getCustomers = (data: Customer[]) => {
         return [...(data || [])].map((d) => {
+            // @ts-ignore
             d.date = new Date(d.date);
 
             return d;
@@ -447,6 +453,7 @@ export default function BasicFilterDemo() {
         const value = e.target.value;
         let _filters = { ...filters };
 
+        // @ts-ignore
         _filters['global'].value = value;
 
         setFilters(_filters);
@@ -484,7 +491,7 @@ export default function BasicFilterDemo() {
         );
     };
 
-    const representativesItemTemplate = (option: RepresentativeOption) => {
+    const representativesItemTemplate = (option: Representative) => {
         return (
             <div className="flex align-items-center gap-2">
                 <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />

From c8ba93d4735c4aec1e183d0edb941ce1448ad2dd Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 25 May 2023 16:50:50 +0300
Subject: [PATCH 33/34] Refactor #4431 - for Rating

---
 components/doc/common/apidoc/index.json | 110 ++++++++++++++++++++++++
 components/doc/rating/pt/ptdoc.js       |  76 ++++++++++++++++
 components/doc/rating/pt/wireframe.js   |  13 +++
 components/lib/rating/Rating.js         |  95 +++++++++++++++++---
 components/lib/rating/RatingBase.js     |  10 +--
 components/lib/rating/rating.d.ts       |  65 +++++++++++++-
 pages/rating/index.js                   |  22 ++++-
 7 files changed, 369 insertions(+), 22 deletions(-)
 create mode 100644 components/doc/rating/pt/ptdoc.js
 create mode 100644 components/doc/rating/pt/wireframe.js

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 61064202d7..57eb24158b 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -30187,6 +30187,14 @@
                             "type": "HTMLAttributes<HTMLSpanElement>",
                             "default": "",
                             "description": "Properties of the off icon."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -30244,6 +30252,108 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "RatingPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RatingProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RatingContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "RatingPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "cancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the cancel icon's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "cancelItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the cancel item's DOM element."
+                        },
+                        {
+                            "name": "onIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the on icon's DOM element."
+                        },
+                        {
+                            "name": "offIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the off icon's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "RatingContext": {
+                    "description": "Defines current options in Rating component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RatingPassThroughType": {
+                    "values": "PassThroughType<T, RatingPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "ripple": {
diff --git a/components/doc/rating/pt/ptdoc.js b/components/doc/rating/pt/ptdoc.js
new file mode 100644
index 0000000000..ea2b9a8385
--- /dev/null
+++ b/components/doc/rating/pt/ptdoc.js
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { Rating } from '../../../lib/rating/Rating';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<Rating
+    value={value}
+    onChange={(e) => setValue(e.value)}
+    pt={{
+        onIcon: { className: 'text-orange-400' }
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Rating } from "primereact/rating";
+
+export default function PTDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating
+                value={value}
+                onChange={(e) => setValue(e.value)}
+                pt={{
+                    onIcon: { className: 'text-orange-400' }
+                }}
+            />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Rating, RatingChangeEvent } from "primereact/rating";
+
+export default function PTDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating
+                value={value}
+                onChange={(e) => setValue(e.value)}
+                pt={{
+                    onIcon: { className: 'text-orange-400' }
+                }}
+            />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <Rating
+                    value={value}
+                    onChange={(e) => setValue(e.value)}
+                    pt={{
+                        onIcon: { className: 'text-orange-400' }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/rating/pt/wireframe.js b/components/doc/rating/pt/wireframe.js
new file mode 100644
index 0000000000..2ad651dc64
--- /dev/null
+++ b/components/doc/rating/pt/wireframe.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="rating" />
+            </div>
+        </>
+    );
+};
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 3afa480adf..a418bbb6bd 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -3,7 +3,7 @@ import { BanIcon } from '../icons/ban';
 import { StarIcon } from '../icons/star';
 import { StarFillIcon } from '../icons/starfill';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { RatingBase } from './RatingBase';
 
 export const Rating = React.memo(
@@ -11,6 +11,18 @@ export const Rating = React.memo(
         const props = RatingBase.getProps(inProps);
 
         const elementRef = React.useRef(null);
+        const { ptm } = RatingBase.setMetaData({
+            props
+        });
+
+        const getPTOptions = (value, key) => {
+            return ptm(key, {
+                context: {
+                    active: value <= props.value
+                }
+            });
+        };
+
         const enabled = !props.disabled && !props.readOnly;
         const tabIndex = enabled ? 0 : null;
 
@@ -75,11 +87,34 @@ export const Rating = React.memo(
                 const active = value <= props.value;
                 const className = classNames('p-rating-item', { 'p-rating-item-active': active });
                 const iconClassName = 'p-rating-icon';
-                const icon = active ? { type: props.onIcon || <StarFillIcon className={iconClassName} /> } : { type: props.offIcon || <StarIcon className={iconClassName} /> };
-                const content = IconUtils.getJSXIcon(icon.type, { className: iconClassName, ...icon.props }, { props });
+                const onIconProps = mergeProps(
+                    {
+                        className: iconClassName
+                    },
+                    getPTOptions(props.value, 'onIcon')
+                );
+                const offIconProps = mergeProps(
+                    {
+                        className: iconClassName
+                    },
+                    getPTOptions(props.value, 'offIcon')
+                );
+                const icon = active ? { type: props.onIcon || <StarFillIcon {...onIconProps} /> } : { type: props.offIcon || <StarIcon {...offIconProps} /> };
+                const content = IconUtils.getJSXIcon(icon.type, { ...icon.props }, { props });
+
+                const itemProps = mergeProps(
+                    {
+                        key: value,
+                        className: className,
+                        tabIndex: tabIndex,
+                        onClick: (e) => rate(e, value),
+                        onKeyDown: (e) => onStarKeyDown(e, value)
+                    },
+                    getPTOptions(props.value, 'item')
+                );
 
                 return (
-                    <div key={value} className={className} tabIndex={tabIndex} onClick={(e) => rate(e, value)} onKeyDown={(e) => onStarKeyDown(e, value)}>
+                    <div key={value} {...itemProps}>
                         {content}
                     </div>
                 );
@@ -89,14 +124,26 @@ export const Rating = React.memo(
         const createCancelIcon = () => {
             if (props.cancel) {
                 const iconClassName = 'p-rating-icon p-rating-cancel';
-                const icon = props.cancelIcon || <BanIcon className={iconClassName} />;
-                const content = IconUtils.getJSXIcon(icon, { className: { iconClassName }, ...props.cancelIconProps }, { props });
-
-                return (
-                    <div className="p-rating-item p-rating-cancel-item" onClick={clear} tabIndex={tabIndex} onKeyDown={onCancelKeyDown}>
-                        {content}
-                    </div>
+                const cancelIconProps = mergeProps(
+                    {
+                        className: iconClassName
+                    },
+                    ptm('cancelIcon')
+                );
+                const icon = props.cancelIcon || <BanIcon {...cancelIconProps} />;
+                const content = IconUtils.getJSXIcon(icon, { ...cancelIconProps, ...props.cancelIconProps }, { props });
+
+                const cancelItemProps = mergeProps(
+                    {
+                        className: 'p-rating-item p-rating-cancel-item',
+                        onClick: clear,
+                        tabIndex: tabIndex,
+                        onKeyDown: onCancelKeyDown
+                    },
+                    ptm('cancelItem')
                 );
+
+                return <div {...cancelItemProps}>{content}</div>;
             }
 
             return null;
@@ -108,7 +155,6 @@ export const Rating = React.memo(
         }));
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-        const otherProps = RatingBase.getOtherProps(props);
         const className = classNames(
             'p-rating',
             {
@@ -117,16 +163,37 @@ export const Rating = React.memo(
             },
             props.className
         );
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: className,
+                style: props.style
+            },
+            RatingBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const tooltipProps = mergeProps(
+            {
+                target: elementRef,
+                content: props.tooltip,
+                ...props.tooltipOptions
+            },
+            ptm('tooltip')
+        );
+
         const cancelIcon = createCancelIcon();
         const icons = createIcons();
 
         return (
             <>
-                <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
+                <div {...rootProps}>
                     {cancelIcon}
                     {icons}
                 </div>
-                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+                {hasTooltip && <Tooltip {...tooltipProps} />}
             </>
         );
     })
diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js
index f3b64430be..2573f0916d 100644
--- a/components/lib/rating/RatingBase.js
+++ b/components/lib/rating/RatingBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const RatingBase = {
+export const RatingBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Rating',
         id: null,
@@ -21,7 +21,5 @@ export const RatingBase = {
         onIconProps: null,
         offIconProps: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, RatingBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, RatingBase.defaultProps)
-};
+    }
+});
diff --git a/components/lib/rating/rating.d.ts b/components/lib/rating/rating.d.ts
index 122ae5f9c7..1d317c6cd2 100644
--- a/components/lib/rating/rating.d.ts
+++ b/components/lib/rating/rating.d.ts
@@ -8,9 +8,67 @@
  *
  */
 import * as React from 'react';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { FormEvent } from '../ts-helpers';
-import { IconType } from '../utils';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type RatingPassThroughType<T> = PassThroughType<T, RatingPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RatingPassThroughMethodOptions {
+    props: RatingProps;
+    context: RatingContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RatingProps.pt}
+ */
+export interface RatingPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RatingPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the cancel icon's DOM element.
+     */
+    cancelIcon?: RatingPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: RatingPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the cancel item's DOM element.
+     */
+    cancelItem?: RatingPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the on icon's DOM element.
+     */
+    onIcon?: RatingPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the off icon's DOM element.
+     */
+    offIcon?: RatingPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+}
+
+/**
+ * Defines current options in Rating component.
+ */
+export interface RatingContext {
+    /**
+     * Current active state of the item as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
 
 /**
  * Custom change event.
@@ -91,6 +149,11 @@ export interface RatingProps extends Omit<React.DetailedHTMLProps<React.InputHTM
      * Properties of the off icon.
      */
     offIconProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {RatingPassThroughOptions}
+     */
+    pt?: RatingPassThroughOptions;
 }
 
 /**
diff --git a/pages/rating/index.js b/pages/rating/index.js
index ac8346cea6..8a7c03c78b 100644
--- a/pages/rating/index.js
+++ b/pages/rating/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/rating/pt/ptdoc';
+import { Wireframe } from '../../components/doc/rating/pt/wireframe';
 import React from 'react';
 import { DocComponent } from '../../components/doc/common/doccomponent';
 import { AccessibilityDoc } from '../../components/doc/rating/accessibilitydoc';
@@ -58,8 +61,25 @@ const RatingDemo = () => {
             component: AccessibilityDoc
         }
     ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.rating.options',
+            label: 'Rating PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.demo',
+            label: 'Example',
+            component: PTDoc
+        }
+    ];
 
-    return <DocComponent title="React Rating Component" header="Rating" description="Rating component is a star based selection input." componentDocs={docs} apiDocs={['Rating']} />;
+    return <DocComponent title="React Rating Component" header="Rating" description="Rating component is a star based selection input." componentDocs={docs} apiDocs={['Rating']} ptDocs={ptDocs} />;
 };
 
 export default RatingDemo;

From 64903b432210f0ea6a180993b96fba23c4295915 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 25 May 2023 16:55:58 +0300
Subject: [PATCH 34/34] Refactor SelectButton - Basic Doc JS demo

---
 components/doc/selectbutton/basicdoc.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/doc/selectbutton/basicdoc.js b/components/doc/selectbutton/basicdoc.js
index 017279cb16..6271de41f2 100644
--- a/components/doc/selectbutton/basicdoc.js
+++ b/components/doc/selectbutton/basicdoc.js
@@ -19,9 +19,11 @@ export default function BasicDemo() {
     const options = ['Off', 'On'];
     const [value, setValue] = useState(options[0]);
 
-    <div className="card flex justify-content-center">
-        <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} />
-    </div>
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} />
+        </div>
+    );
 }
         `,
         typescript: `