#6139 - New invalid properties

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,

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

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,

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

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,

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

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,

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

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,

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

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,

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

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,

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.
      */

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,

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

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,

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.
      */

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,

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.
      */

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,

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

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,

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}

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,

components/lib/password/PasswordBase.js

@@ -98,6 +98,7 @@ export const PasswordBase = ComponentBase.extend({
         className: null,
         inputStyle: null,
         inputClassName: null,
+        invalid: false,
         panelStyle: null,
         panelClassName: null,
         transitionOptions: null,

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.
      */