Merge pull request #6140 from gucal/master

#6139 - New invalid properties
primefaces · Mar 18, 2024 · 3f916b1 · 3f916b1
2 parents 7d1dfa3 + d5b4652
commit 3f916b1
Show file tree

Hide file tree

Showing 35 changed files with 117 additions and 7 deletions.
diff --git 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
@@ -256,6 +256,11 @@ export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.In
      * @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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -26,6 +26,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
@@ -135,6 +135,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
@@ -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
@@ -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
@@ -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),
@@ -182,6 +183,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
@@ -262,6 +262,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
@@ -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
@@ -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
@@ -23,6 +23,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
@@ -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>;
 
@@ -114,6 +114,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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),
@@ -230,6 +231,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
@@ -620,6 +620,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/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
@@ -98,6 +98,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
@@ -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
@@ -23,6 +23,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/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,