From 9b09cd904c58e7efb2d91049568e09269a260e8b Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 13 Mar 2024 10:38:30 +0300
Subject: [PATCH 1/4] #6139 - New invalid properties

---
 components/lib/autocomplete/AutoCompleteBase.js         | 2 ++
 components/lib/autocomplete/autocomplete.d.ts           | 5 +++++
 components/lib/calendar/CalendarBase.js                 | 2 ++
 components/lib/calendar/calendar.d.ts                   | 5 +++++
 components/lib/cascadeselect/CascadeSelectBase.js       | 2 ++
 components/lib/cascadeselect/cascadeselect.d.ts         | 5 +++++
 components/lib/checkbox/CheckboxBase.js                 | 2 ++
 components/lib/checkbox/checkbox.d.ts                   | 5 +++++
 components/lib/chips/ChipsBase.js                       | 2 ++
 components/lib/chips/chips.d.ts                         | 5 +++++
 components/lib/dropdown/DropdownBase.js                 | 2 ++
 components/lib/dropdown/dropdown.d.ts                   | 5 +++++
 components/lib/inputnumber/InputNumberBase.js           | 4 +++-
 components/lib/inputnumber/inputnumber.d.ts             | 5 +++++
 components/lib/inputswitch/InputSwitchBase.js           | 2 ++
 components/lib/inputswitch/inputswitch.d.ts             | 9 +++++++--
 components/lib/inputtext/InputTextBase.js               | 4 +++-
 components/lib/inputtext/inputtext.d.ts                 | 5 +++++
 components/lib/inputtextarea/InputTextareaBase.js       | 4 +++-
 components/lib/inputtextarea/inputtextarea.d.ts         | 5 +++++
 components/lib/listbox/ListBoxBase.js                   | 4 +++-
 components/lib/listbox/listbox.d.ts                     | 5 +++++
 components/lib/multiselect/MultiSelectBase.js           | 2 ++
 components/lib/multiselect/multiselect.d.ts             | 5 +++++
 components/lib/password/PasswordBase.js                 | 4 +++-
 components/lib/password/password.d.ts                   | 5 +++++
 components/lib/radiobutton/RadioButtonBase.js           | 4 +++-
 components/lib/radiobutton/radiobutton.d.ts             | 5 +++++
 components/lib/selectbutton/SelectButtonBase.js         | 3 ++-
 components/lib/selectbutton/selectbutton.d.ts           | 5 +++++
 components/lib/togglebutton/ToggleButtonBase.js         | 4 +++-
 components/lib/togglebutton/togglebutton.d.ts           | 5 +++++
 components/lib/treeselect/TreeSelectBase.js             | 2 ++
 components/lib/treeselect/treeselect.d.ts               | 5 +++++
 components/lib/tristatecheckbox/TriStateCheckboxBase.js | 2 ++
 components/lib/tristatecheckbox/tristatecheckbox.d.ts   | 5 +++++
 36 files changed, 135 insertions(+), 10 deletions(-)

diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js
index 1a47a9d608..4235241dd4 100644
--- a/components/lib/autocomplete/AutoCompleteBase.js
+++ b/components/lib/autocomplete/AutoCompleteBase.js
@@ -8,6 +8,7 @@ const classes = {
             'p-autocomplete-dd': props.dropdown,
             'p-autocomplete-multiple': props.multiple,
             'p-inputwrapper-filled': props.value,
+            'p-invalid': props.invalid,
             'p-inputwrapper-focus': focusedState
         }),
     container: ({ props }) =>
@@ -165,6 +166,7 @@ export const AutoCompleteBase = ComponentBase.extend({
         inputId: null,
         inputRef: null,
         inputStyle: null,
+        invalid: false,
         itemTemplate: null,
         loadingIcon: null,
         maxLength: null,
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index da565f89f4..921db8271a 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -256,6 +256,11 @@ export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.HT
      * @defaultValue 300
      */
     delay?: number | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
diff --git a/components/lib/calendar/CalendarBase.js b/components/lib/calendar/CalendarBase.js
index 1ca0ea7da3..5ce0dd57e0 100644
--- a/components/lib/calendar/CalendarBase.js
+++ b/components/lib/calendar/CalendarBase.js
@@ -180,6 +180,7 @@ const classes = {
         classNames('p-calendar p-component p-inputwrapper', {
             [`p-calendar-w-btn p-calendar-w-btn-${props.iconPos}`]: props.showIcon,
             'p-calendar-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-calendar-timeonly': props.timeOnly,
             'p-inputwrapper-filled': props.value || isFilled,
             'p-inputwrapper-focus': focusedState,
@@ -261,6 +262,7 @@ export const CalendarBase = ComponentBase.extend({
         inputMode: 'none',
         inputRef: null,
         inputStyle: null,
+        invalid: false,
         keepInvalid: false,
         locale: null,
         mask: null,
diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
index e6be7fbb79..7084a2811b 100644
--- a/components/lib/calendar/calendar.d.ts
+++ b/components/lib/calendar/calendar.d.ts
@@ -565,6 +565,11 @@ interface CalendarBaseProps {
      * Icon to show in each of the decrement buttons.
      */
     decrementIcon?: IconType<CalendarProps> | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When specified, disables the component.
      * @defaultValue false
diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
index c23d22c390..0a90ae7803 100644
--- a/components/lib/cascadeselect/CascadeSelectBase.js
+++ b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -8,6 +8,7 @@ const classes = {
             'p-cascadeselect p-component p-inputwrapper',
             {
                 'p-disabled': props.disabled,
+                'p-invalid': props.invalid,
                 'p-focus': focusedState,
                 'p-inputwrapper-filled': props.value,
                 'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -149,6 +150,7 @@ export const CascadeSelectBase = ComponentBase.extend({
         id: null,
         inputId: null,
         inputRef: null,
+        invalid: false,
         itemTemplate: null,
         name: null,
         onBeforeHide: null,
diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
index 373ea08edb..87187f16e5 100644
--- a/components/lib/cascadeselect/cascadeselect.d.ts
+++ b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -227,6 +227,11 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
      * The template of items.
      */
     itemTemplate?: React.ReactNode | ((option: any) => React.ReactNode) | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js
index 993a0ae489..45b5aacea5 100644
--- a/components/lib/checkbox/CheckboxBase.js
+++ b/components/lib/checkbox/CheckboxBase.js
@@ -7,6 +7,7 @@ const classes = {
         classNames('p-checkbox-box', {
             'p-highlight': checked,
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-focus': focusedState
         }),
     root: ({ props, checked, focusedState }) =>
@@ -49,6 +50,7 @@ export const CheckboxBase = ComponentBase.extend({
         id: null,
         inputId: null,
         inputRef: null,
+        invalid: false,
         name: null,
         onChange: null,
         onClick: null,
diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts
index 80d64edd8d..807039146e 100644
--- a/components/lib/checkbox/checkbox.d.ts
+++ b/components/lib/checkbox/checkbox.d.ts
@@ -159,6 +159,11 @@ export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputH
      * Style class of the element.
      */
     className?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element value cannot be altered.
      * @defaultValue false
diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js
index 0da86e425e..cf06fe1f18 100644
--- a/components/lib/chips/ChipsBase.js
+++ b/components/lib/chips/ChipsBase.js
@@ -88,6 +88,7 @@ const classes = {
             'p-inputwrapper-filled': isFilled,
             'p-inputwrapper-focus': focusedState,
             'p-disabled': disabled,
+            'p-invalid': props.invalid,
             'p-focus': focusedState
         })
 };
@@ -104,6 +105,7 @@ export const ChipsBase = ComponentBase.extend({
         id: null,
         inputId: null,
         inputRef: null,
+        invalid: false,
         itemTemplate: null,
         keyfilter: null,
         max: null,
diff --git a/components/lib/chips/chips.d.ts b/components/lib/chips/chips.d.ts
index 742c41f22b..58f334637c 100755
--- a/components/lib/chips/chips.d.ts
+++ b/components/lib/chips/chips.d.ts
@@ -173,6 +173,11 @@ export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTML
      * Maximum number of entries allowed.
      */
     max?: number | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.
      * @defaultValue false
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index f7ec9c3737..cdacda02ba 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -6,6 +6,7 @@ const classes = {
     root: ({ props, focusedState, overlayVisibleState }) =>
         classNames('p-dropdown p-component p-inputwrapper', {
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-focus': focusedState,
             'p-dropdown-clearable': props.showClear && !props.disabled,
             'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
@@ -176,6 +177,7 @@ export const DropdownBase = ComponentBase.extend({
         id: null,
         inputId: null,
         inputRef: null,
+        invalid: false,
         itemTemplate: null,
         loading: false,
         loadingIcon: null,
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index b15b721823..d0e0ff2ab8 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -246,6 +246,11 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * A property to uniquely match the value in options for better performance.
      */
     dataKey?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js
index b2d50d3b28..b452ee20b5 100644
--- a/components/lib/inputnumber/InputNumberBase.js
+++ b/components/lib/inputnumber/InputNumberBase.js
@@ -8,7 +8,8 @@ const classes = {
             'p-inputwrapper-focus': focusedState,
             'p-inputnumber-buttons-stacked': stacked,
             'p-inputnumber-buttons-horizontal': horizontal,
-            'p-inputnumber-buttons-vertical': vertical
+            'p-inputnumber-buttons-vertical': vertical,
+            'p-invalid': props.invalid
         }),
     buttonGroup: 'p-inputnumber-button-group',
     incrementButton: ({ props }) =>
@@ -151,6 +152,7 @@ export const InputNumberBase = ComponentBase.extend({
         inputMode: null,
         inputRef: null,
         inputStyle: null,
+        invalid: false,
         locale: undefined,
         localeMatcher: undefined,
         max: null,
diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts
index ef19e8b7a8..32d5775cd4 100644
--- a/components/lib/inputnumber/inputnumber.d.ts
+++ b/components/lib/inputnumber/inputnumber.d.ts
@@ -228,6 +228,11 @@ export interface InputNumberProps extends Omit<React.DetailedHTMLProps<React.HTM
      * Maximum value length.
      */
     maxLength?: number | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.
      */
diff --git a/components/lib/inputswitch/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js
index 8227022d8b..ca23288ac1 100644
--- a/components/lib/inputswitch/InputSwitchBase.js
+++ b/components/lib/inputswitch/InputSwitchBase.js
@@ -6,6 +6,7 @@ const classes = {
         classNames('p-inputswitch p-component', {
             'p-inputswitch-checked': checked,
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-focus': focusedState
         }),
     slider: 'p-inputswitch-slider'
@@ -47,6 +48,7 @@ export const InputSwitchBase = ComponentBase.extend({
         id: null,
         inputId: null,
         inputRef: null,
+        invalid: false,
         name: null,
         onBlur: null,
         onChange: null,
diff --git a/components/lib/inputswitch/inputswitch.d.ts b/components/lib/inputswitch/inputswitch.d.ts
index a0d7a0cd44..d1235296cd 100644
--- a/components/lib/inputswitch/inputswitch.d.ts
+++ b/components/lib/inputswitch/inputswitch.d.ts
@@ -8,12 +8,12 @@
  *
  */
 import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
 import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { FormBooleanEvent } from '../ts-helpers';
 import { PassThroughType } from '../utils/utils';
-import { PassThroughOptions } from '../passthrough';
-import { ComponentHooks } from '../componentbase/componentbase';
 
 export declare type InputSwitchPassThroughType<T> = PassThroughType<T, InputSwitchPassThroughMethodOptions>;
 
@@ -130,6 +130,11 @@ export interface InputSwitchProps extends Omit<React.DetailedHTMLProps<React.Inp
      * @defaultValue false
      */
     falseValue?: any;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
index 75f78201c8..d19e30358b 100644
--- a/components/lib/inputtext/InputTextBase.js
+++ b/components/lib/inputtext/InputTextBase.js
@@ -7,7 +7,8 @@ const classes = {
             'p-inputtext p-component',
             {
                 'p-disabled': props.disabled,
-                'p-filled': isFilled
+                'p-filled': isFilled,
+                'p-invalid': props.invalid
             },
             props.className
         )
@@ -19,6 +20,7 @@ export const InputTextBase = ComponentBase.extend({
         __parentMetadata: null,
         children: undefined,
         className: null,
+        invalid: false,
         keyfilter: null,
         onBeforeInput: null,
         onInput: null,
diff --git a/components/lib/inputtext/inputtext.d.ts b/components/lib/inputtext/inputtext.d.ts
index 2ee1a3f403..31cfe8468e 100644
--- a/components/lib/inputtext/inputtext.d.ts
+++ b/components/lib/inputtext/inputtext.d.ts
@@ -75,6 +75,11 @@ export interface InputTextProps extends Omit<React.DetailedHTMLProps<React.Input
      * Size of the input.
      */
     size?: number | string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Content of the tooltip.
      */
diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js
index 069353ec54..a2326fee78 100644
--- a/components/lib/inputtextarea/InputTextareaBase.js
+++ b/components/lib/inputtextarea/InputTextareaBase.js
@@ -8,7 +8,8 @@ const classes = {
             {
                 'p-disabled': props.disabled,
                 'p-filled': isFilled,
-                'p-inputtextarea-resizable': props.autoResize
+                'p-inputtextarea-resizable': props.autoResize,
+                'p-invalid': props.invalid
             },
             props.className
         )
@@ -32,6 +33,7 @@ export const InputTextareaBase = ComponentBase.extend({
         __TYPE: 'InputTextarea',
         __parentMetadata: null,
         autoResize: false,
+        invalid: false,
         keyfilter: null,
         onBlur: null,
         onFocus: null,
diff --git a/components/lib/inputtextarea/inputtextarea.d.ts b/components/lib/inputtextarea/inputtextarea.d.ts
index d7c7e4848c..d18413a854 100644
--- a/components/lib/inputtextarea/inputtextarea.d.ts
+++ b/components/lib/inputtextarea/inputtextarea.d.ts
@@ -67,6 +67,11 @@ export interface InputTextareaProps extends Omit<React.DetailedHTMLProps<React.T
      * @defaultValue false
      */
     autoResize?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Format definition of the keys to block.
      */
diff --git a/components/lib/listbox/ListBoxBase.js b/components/lib/listbox/ListBoxBase.js
index 80d9dbffd7..35f22c5ba3 100644
--- a/components/lib/listbox/ListBoxBase.js
+++ b/components/lib/listbox/ListBoxBase.js
@@ -10,7 +10,8 @@ const classes = {
         classNames(
             'p-listbox p-component',
             {
-                'p-disabled': props.disabled
+                'p-disabled': props.disabled,
+                'p-invalid': props.invalid
             },
             props.className
         ),
@@ -90,6 +91,7 @@ export const ListBoxBase = ComponentBase.extend({
         selectOnFocus: false,
         id: null,
         itemTemplate: null,
+        invalid: false,
         listClassName: null,
         listStyle: null,
         metaKeySelection: false,
diff --git a/components/lib/listbox/listbox.d.ts b/components/lib/listbox/listbox.d.ts
index bdc0e0010c..b2e9a7be6d 100755
--- a/components/lib/listbox/listbox.d.ts
+++ b/components/lib/listbox/listbox.d.ts
@@ -329,6 +329,11 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
      * Inline style of inner list element.
      */
     listStyle?: React.CSSProperties | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
      * @defaultValue true
diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
index 24f640da70..ea9ee91208 100644
--- a/components/lib/multiselect/MultiSelectBase.js
+++ b/components/lib/multiselect/MultiSelectBase.js
@@ -7,6 +7,7 @@ const classes = {
         classNames('p-multiselect p-component p-inputwrapper', {
             'p-multiselect-chip': props.display === 'chip',
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-multiselect-clearable': props.showClear && !props.disabled,
             'p-focus': focusedState,
             'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
@@ -234,6 +235,7 @@ export const MultiSelectBase = ComponentBase.extend({
         inline: false,
         inputId: null,
         inputRef: null,
+        invalid: false,
         itemCheckboxIcon: null,
         itemClassName: null,
         itemTemplate: null,
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index cf27b231fc..042fdc0f5a 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -611,6 +611,11 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * Label to display when there are no selections.
      */
     placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {MultiSelectPassThroughOptions}
diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js
index e6772a15ee..036855868c 100644
--- a/components/lib/password/PasswordBase.js
+++ b/components/lib/password/PasswordBase.js
@@ -9,7 +9,8 @@ const classes = {
             {
                 'p-inputwrapper-filled': isFilled,
                 'p-inputwrapper-focus': focusedState,
-                'p-input-icon-right': props.toggleMask
+                'p-input-icon-right': props.toggleMask,
+                'p-invalid': props.invalid
             },
             props.className
         ),
@@ -98,6 +99,7 @@ export const PasswordBase = ComponentBase.extend({
         className: null,
         inputStyle: null,
         inputClassName: null,
+        invalid: false,
         panelStyle: null,
         panelClassName: null,
         transitionOptions: null,
diff --git a/components/lib/password/password.d.ts b/components/lib/password/password.d.ts
index b9e43f7f34..29be6e21d6 100644
--- a/components/lib/password/password.d.ts
+++ b/components/lib/password/password.d.ts
@@ -50,6 +50,11 @@ export interface PasswordPassThroughOptions {
      * Uses to pass attributes to the show icon's DOM element.
      */
     showIcon?: PasswordPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Uses to pass attributes to the panel's DOM element.
      */
diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js
index 5704c26fc6..0e8bd3fe38 100644
--- a/components/lib/radiobutton/RadioButtonBase.js
+++ b/components/lib/radiobutton/RadioButtonBase.js
@@ -6,7 +6,8 @@ const classes = {
         classNames('p-radiobutton p-component', {
             'p-radiobutton-checked': props.checked,
             'p-radiobutton-disabled': props.disabled,
-            'p-radiobutton-focused': focusedState
+            'p-radiobutton-focused': focusedState,
+            'p-invalid': props.invalid
         }),
     input: ({ props, focusedState }) =>
         classNames('p-radiobutton-box', {
@@ -57,6 +58,7 @@ export const RadioButtonBase = ComponentBase.extend({
         id: null,
         inputId: null,
         inputRef: null,
+        invalid: false,
         name: null,
         onChange: null,
         onClick: null,
diff --git a/components/lib/radiobutton/radiobutton.d.ts b/components/lib/radiobutton/radiobutton.d.ts
index bbb0700b54..adb80a3870 100644
--- a/components/lib/radiobutton/radiobutton.d.ts
+++ b/components/lib/radiobutton/radiobutton.d.ts
@@ -120,6 +120,11 @@ export interface RadioButtonProps extends Omit<React.DetailedHTMLProps<React.Inp
      * @defaultValue false
      */
     checked?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element value cannot be altered.
      * @defaultValue false
diff --git a/components/lib/selectbutton/SelectButtonBase.js b/components/lib/selectbutton/SelectButtonBase.js
index 96f336a298..265573a881 100644
--- a/components/lib/selectbutton/SelectButtonBase.js
+++ b/components/lib/selectbutton/SelectButtonBase.js
@@ -2,7 +2,7 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-selectbutton p-buttonset p-component', props.className),
+    root: ({ props }) => classNames('p-selectbutton p-buttonset p-component', props.className, { 'p-invalid': props.invalid }),
     button: ({ itemProps: props, focusedState }) =>
         classNames('p-button p-component', {
             'p-highlight': props.selected,
@@ -23,6 +23,7 @@ export const SelectButtonBase = ComponentBase.extend({
         optionDisabled: null,
         tabIndex: null,
         multiple: false,
+        invalid: false,
         unselectable: true,
         allowEmpty: true,
         disabled: false,
diff --git a/components/lib/selectbutton/selectbutton.d.ts b/components/lib/selectbutton/selectbutton.d.ts
index 31219be908..b63e1a31ad 100644
--- a/components/lib/selectbutton/selectbutton.d.ts
+++ b/components/lib/selectbutton/selectbutton.d.ts
@@ -117,6 +117,11 @@ export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.In
      * @defaultValue false
      */
     multiple?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Whether selection can be cleared.
      * @deprecated Use 'allowEmpty' property instead.
diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js
index c79492de5c..35f69bd394 100644
--- a/components/lib/togglebutton/ToggleButtonBase.js
+++ b/components/lib/togglebutton/ToggleButtonBase.js
@@ -14,7 +14,8 @@ const classes = {
             {
                 'p-button-icon-only': hasIcon && !hasLabel,
                 'p-highlight': props.checked,
-                'p-disabled': props.disabled
+                'p-disabled': props.disabled,
+                'p-invalid': props.invalid
             },
             props.className
         )
@@ -29,6 +30,7 @@ export const ToggleButtonBase = ComponentBase.extend({
         onLabel: 'Yes',
         offLabel: 'No',
         iconPos: 'left',
+        invalid: false,
         style: null,
         className: null,
         checked: false,
diff --git a/components/lib/togglebutton/togglebutton.d.ts b/components/lib/togglebutton/togglebutton.d.ts
index 319df0e36a..e1ef006fd8 100644
--- a/components/lib/togglebutton/togglebutton.d.ts
+++ b/components/lib/togglebutton/togglebutton.d.ts
@@ -117,6 +117,11 @@ export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.In
      * @defaultValue left
      */
     iconPos?: 'left' | 'right' | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Icon for the off state.
      */
diff --git a/components/lib/treeselect/TreeSelectBase.js b/components/lib/treeselect/TreeSelectBase.js
index 35f4e01ff2..091c4c211a 100644
--- a/components/lib/treeselect/TreeSelectBase.js
+++ b/components/lib/treeselect/TreeSelectBase.js
@@ -10,6 +10,7 @@ const classes = {
                 'p-treeselect-chip': props.display === 'chip',
                 'p-treeselect-clearable': props.showClear && !props.disabled,
                 'p-disabled': props.disabled,
+                'p-invalid': props.invalid,
                 'p-focus': focusedState,
                 'p-inputwrapper-filled': !isValueEmpty,
                 'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -161,6 +162,7 @@ export const TreeSelectBase = ComponentBase.extend({
         filterValue: null,
         inputId: null,
         inputRef: null,
+        invalid: false,
         metaKeySelection: false,
         name: null,
         nodeTemplate: null,
diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts
index 40af859c3b..4549877164 100644
--- a/components/lib/treeselect/treeselect.d.ts
+++ b/components/lib/treeselect/treeselect.d.ts
@@ -504,6 +504,11 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * Hint text for the input field.
      */
     placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Clears the filter value when hiding the dropdown.
      * @defaultValue false
diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
index 6fa33652ad..e9c83cc0f7 100644
--- a/components/lib/tristatecheckbox/TriStateCheckboxBase.js
+++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
@@ -8,6 +8,7 @@ const classes = {
         classNames('p-checkbox-box', {
             'p-highlight': ObjectUtils.isNotEmpty(props.value),
             'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
             'p-focus': focusedState
         })
 };
@@ -20,6 +21,7 @@ export const TriStateCheckboxBase = ComponentBase.extend({
         className: null,
         disabled: false,
         id: null,
+        invalid: false,
         onChange: null,
         readOnly: false,
         style: null,
diff --git a/components/lib/tristatecheckbox/tristatecheckbox.d.ts b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
index f2f23fca01..c5558af79e 100644
--- a/components/lib/tristatecheckbox/tristatecheckbox.d.ts
+++ b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
@@ -94,6 +94,11 @@ export interface TriStateCheckboxProps extends Omit<React.DetailedHTMLProps<Reac
      * Value of the TriStateCheckbox.
      */
     value?: boolean | undefined | null;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element value cannot be altered.
      * @defaultValue false

From 49d6cc61ccffaae13edb1f0be17428ebe0f2a684 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 13 Mar 2024 10:55:31 +0300
Subject: [PATCH 2/4] Remove invalid class from password

---
 components/lib/password/Password.js     | 1 +
 components/lib/password/PasswordBase.js | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index 854a26f20f..630de75b0b 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -431,6 +431,7 @@ export const Password = React.memo(
                 onFocus: onFocus,
                 onInput: onInput,
                 onKeyUp: onKeyup,
+                invalid: props.invalid,
                 style: props.inputStyle,
                 tabIndex: props.tabIndex,
                 tooltip: props.tooltip,
diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js
index 036855868c..18734fd12d 100644
--- a/components/lib/password/PasswordBase.js
+++ b/components/lib/password/PasswordBase.js
@@ -9,8 +9,7 @@ const classes = {
             {
                 'p-inputwrapper-filled': isFilled,
                 'p-inputwrapper-focus': focusedState,
-                'p-input-icon-right': props.toggleMask,
-                'p-invalid': props.invalid
+                'p-input-icon-right': props.toggleMask
             },
             props.className
         ),

From d9cdcbc7df6967c961d59821a23a294b3ddbfe40 Mon Sep 17 00:00:00 2001
From: Tarik1700 <tarik_1700@hotmail.com>
Date: Sat, 16 Mar 2024 14:05:08 +0100
Subject: [PATCH 3/4] bugfix: fixed animations not working correctly on
 TRANSITION.toggleable with tailwind preset

---
 components/lib/passthrough/tailwind/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index c6f1262b3a..798ee70dd7 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -5,9 +5,9 @@ export const TRANSITIONS = {
         timeout: 500,
         classNames: {
             enter: 'max-h-0',
-            enterActive: '!max-h-40 overflow-hidden transition-all duration-500 ease-in-out',
-            exit: 'max-h-40',
-            exitActive: '!max-h-0 overflow-hidden transition-all duration-500 ease-in'
+            enterActive: '!max-h-[1000px] overflow-hidden transition-[max-height] duration-500 ease-in',
+            exit: 'max-h-[1000px]',
+            exitActive: '!max-h-0 overflow-hidden transition-[max-height] duration-500 ease-out'
         }
     },
     overlay: {

From 7c7b8a8b8c9af291ffc3e5585d19658978075271 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Mon, 18 Mar 2024 07:01:18 +0000
Subject: [PATCH 4/4] Update API doc

---
 components/doc/common/apidoc/index.json | 155 ++++++++++++++++++++++--
 1 file changed, 142 insertions(+), 13 deletions(-)

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index daa1de6c7b..435ec2f04d 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -3638,6 +3638,14 @@
                             "default": "",
                             "description": "Inline style of the input field."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "itemTemplate",
                             "optional": true,
@@ -5930,6 +5938,14 @@
                             "default": "",
                             "description": "Inline style of the input field."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "keepInvalid",
                             "optional": true,
@@ -7449,6 +7465,13 @@
                             "type": "IconType<CalendarProps>",
                             "description": "Icon to show in each of the decrement buttons."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "disabled",
                             "optional": true,
@@ -8950,6 +8973,14 @@
                             "default": "",
                             "description": "Reference of the input element."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "itemTemplate",
                             "optional": true,
@@ -9972,6 +10003,14 @@
                             "default": "",
                             "description": "Reference of the input element."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "name",
                             "optional": true,
@@ -10612,6 +10651,14 @@
                             "default": "",
                             "description": "Reference of the input element."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "keyfilter",
                             "optional": true,
@@ -22845,6 +22892,14 @@
                             "default": "",
                             "description": "Reference of the input element."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "itemTemplate",
                             "optional": true,
@@ -29617,6 +29672,14 @@
                             "default": "false",
                             "description": "When present, it specifies that the element value cannot be altered."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "keyfilter",
                             "optional": true,
@@ -30038,6 +30101,14 @@
                             "default": "",
                             "description": "Inline style of the input field."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "locale",
                             "optional": true,
@@ -30319,19 +30390,6 @@
                             "returnType": "void",
                             "description": "Callback to invoke when the key pressed down."
                         },
-                        {
-                            "name": "onKeyUp",
-                            "parameters": [
-                                {
-                                    "name": "event",
-                                    "optional": false,
-                                    "type": "KeyboardEvent<HTMLInputElement>",
-                                    "description": "Browser event"
-                                }
-                            ],
-                            "returnType": "void",
-                            "description": "Callback to invoke when the key released."
-                        },
                         {
                             "name": "onValueChange",
                             "parameters": [
@@ -30613,6 +30671,14 @@
                             "default": "",
                             "description": "Reference of the input element."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "name",
                             "optional": true,
@@ -30856,6 +30922,14 @@
                             "default": "",
                             "description": "Used to get the child elements of the component."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "keyfilter",
                             "optional": true,
@@ -31065,6 +31139,14 @@
                             "default": "",
                             "description": "Used to get the child elements of the component."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "keyfilter",
                             "optional": true,
@@ -31670,6 +31752,14 @@
                             "default": "",
                             "description": "When specified, filter displays with this value."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "itemTemplate",
                             "optional": true,
@@ -35098,6 +35188,14 @@
                             "default": "",
                             "description": "Reference of the input element."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "itemCheckboxIcon",
                             "optional": true,
@@ -40521,6 +40619,13 @@
                             "type": "PasswordPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
                             "description": "Uses to pass attributes to the show icon's DOM element."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "panel",
                             "optional": true,
@@ -43107,6 +43212,14 @@
                             "default": "false",
                             "description": "When present, it specifies that the element should be disabled."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "multiple",
                             "optional": true,
@@ -51806,6 +51919,14 @@
                             "default": "",
                             "description": "Reference of the input element."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "metaKeySelection",
                             "optional": true,
@@ -54420,6 +54541,14 @@
                             "default": "false",
                             "description": "When present, it specifies that the element value cannot be altered."
                         },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
                         {
                             "name": "pt",
                             "optional": true,