Related #4431, #4602 - For Form

components/lib/checkbox/checkbox.d.ts

@@ -46,6 +46,14 @@ export interface CheckboxPassThroughOptions {
      * @type {TooltipPassThroughOptions}
      */
     tooltip?: TooltipPassThroughOptions;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: CheckboxPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
 }
 
 /**

components/lib/passthrough/tailwind/index.js

@@ -781,9 +781,12 @@ const Tailwind = {
             })
         }),
         cancelitem: ({ context }) => ({
-            className: classNames('inline-flex items-center cursor-pointer', {
-                'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
-            })
+            className: classNames(
+                'inline-flex items-center cursor-pointer'
+                // {
+                //     'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
+                // }
+            )
         }),
         cancelicon: {
             className: classNames('text-red-500', 'w-5 h-5', 'transition duration-200 ease-in')
@@ -819,8 +822,8 @@ const Tailwind = {
                 'first:rounded-l-md first:rounded-tr-none first:rounded-br-none last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 {
-                    'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.active,
-                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600': context.active,
+                    'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.selected,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600': context.selected,
                     'opacity-60 select-none pointer-events-none cursor-default': context.disabled
                 }
             )
@@ -887,13 +890,13 @@ const Tailwind = {
         }),
         panel: 'p-5 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 shadow-md rounded-md',
         meter: 'mb-2 bg-gray-300 dark:bg-gray-700 h-3',
-        meterlabel: ({ instance, props }) => ({
+        meterlabel: ({ state, props }) => ({
             className: classNames(
                 'transition-width duration-1000 ease-in-out h-full',
                 {
-                    'bg-red-500': instance?.meter?.strength == 'weak',
-                    'bg-orange-500': instance?.meter?.strength == 'medium',
-                    'bg-green-500': instance?.meter?.strength == 'strong'
+                    'bg-red-500': state.meter?.strength == 'weak',
+                    'bg-orange-500': state.meter?.strength == 'medium',
+                    'bg-green-500': state.meter?.strength == 'strong'
                 },
                 { 'pr-[2.5rem] ': props.toggleMask }
             )
@@ -979,8 +982,8 @@ const Tailwind = {
                 'flex justify-center items-center',
                 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
                 {
-                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': props.value !== props.modelValue,
-                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': !props.checked,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.checked
                 },
                 {
                     'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
@@ -990,8 +993,8 @@ const Tailwind = {
         }),
         icon: ({ props }) => ({
             className: classNames('transform rounded-full', 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900', {
-                'backface-hidden scale-10 invisible': props.value !== props.modelValue,
-                'transform scale-100 visible': props.value == props.modelValue
+                'backface-hidden scale-10 invisible': !props.checked,
+                'transform scale-100 visible': props.checked
             })
         })
     },

components/lib/password/Password.js

@@ -119,6 +119,7 @@ export const Password = React.memo(
 
         const onOverlayEnter = () => {
             ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
             alignOverlay();
         };
 
@@ -296,7 +297,6 @@ export const Password = React.memo(
             const footer = ObjectUtils.getJSXElement(props.footer, props);
             const panelProps = mergeProps(
                 {
-                    ref: overlayRef,
                     className: cx('panel', { context }),
                     style: props.panelStyle,
                     onClick: onPanelClick
@@ -313,7 +313,7 @@ export const Password = React.memo(
             const meterLabelProps = mergeProps(
                 {
                     className: cx('meterLabel', { strength }),
-                    style: sx('meterLabel', { width })
+                    style: { width }
                 },
                 ptm('meterLabel')
             );
@@ -348,7 +348,7 @@ export const Password = React.memo(
                     onExit={onOverlayExit}
                     onExited={onOverlayExited}
                 >
-                    <div {...panelProps}>
+                    <div ref={overlayRef} {...panelProps}>
                         {header}
                         {content}
                         {footer}

components/lib/password/PasswordBase.js

@@ -60,10 +60,6 @@ const styles = `
 }
 `;
 
-const inlineStyles = {
-    meterLabel: ({ width }) => ({ width })
-};
-
 export const PasswordBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Password',
@@ -101,7 +97,6 @@ export const PasswordBase = ComponentBase.extend({
     },
     css: {
         classes,
-        styles,
-        inlineStyles
+        styles
     }
 });

components/lib/radiobutton/RadioButton.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useMountEffect } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { RadioButtonBase } from './RadioButtonBase';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 
@@ -125,9 +125,7 @@ export const RadioButton = React.memo(
 
         const rootProps = mergeProps(
             {
-                ref: elementRef,
-                id: props.id,
-                className: cx('root', { focusedState }),
+                className: classNames(props.className, cx('root', { focusedState })),
                 style: props.style,
                 onClick: onClick
             },
@@ -137,15 +135,13 @@ export const RadioButton = React.memo(
 
         const hiddenInputWrapperProps = mergeProps(
             {
-                className: cx('hiddenInputWrapper')
+                className: 'p-hidden-accessible'
             },
             ptm('hiddenInputWrapper')
         );
 
         const hiddenInputProps = mergeProps(
             {
-                ref: inputRef,
-                id: props.inputId,
                 type: 'radio',
                 name: props.name,
                 defaultChecked: props.checked,
@@ -176,9 +172,9 @@ export const RadioButton = React.memo(
 
         return (
             <>
-                <div {...rootProps}>
+                <div id={props.id} ref={elementRef} {...rootProps}>
                     <div {...hiddenInputWrapperProps}>
-                        <input {...hiddenInputProps} />
+                        <input id={props.inputId} ref={inputRef} {...hiddenInputProps} />
                     </div>
                     <div {...inputProps}>
                         <div {...iconProps}></div>

components/lib/radiobutton/RadioButtonBase.js

@@ -3,16 +3,11 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, focusedState }) =>
-        classNames(
-            'p-radiobutton p-component',
-            {
-                'p-radiobutton-checked': props.checked,
-                'p-radiobutton-disabled': props.disabled,
-                'p-radiobutton-focused': focusedState
-            },
-            props.className
-        ),
-    hiddenInputWrapper: 'p-hidden-accessible',
+        classNames('p-radiobutton p-component', {
+            'p-radiobutton-checked': props.checked,
+            'p-radiobutton-disabled': props.disabled,
+            'p-radiobutton-focused': focusedState
+        }),
     input: ({ props, focusedState }) =>
         classNames('p-radiobutton-box', {
             'p-highlight': props.checked,

components/lib/selectbutton/SelectButtonBase.js

@@ -4,15 +4,11 @@ import { classNames } from '../utils/Utils';
 const classes = {
     root: ({ props }) => classNames('p-selectbutton p-buttonset p-component', props.className),
     button: ({ itemProps: props, focusedState }) =>
-        classNames(
-            'p-button p-component',
-            {
-                'p-highlight': props.selected,
-                'p-disabled': props.disabled,
-                'p-focus': focusedState
-            },
-            props.className
-        ),
+        classNames('p-button p-component', {
+            'p-highlight': props.selected,
+            'p-disabled': props.disabled,
+            'p-focus': focusedState
+        }),
     label: 'p-button-label p-c'
 };
 

components/lib/selectbutton/SelectButtonItem.js

@@ -6,10 +6,12 @@ export const SelectButtonItem = React.memo((props) => {
     const [focusedState, setFocusedState] = React.useState(false);
     const { ptm, cx } = props;
 
-    const getPTOptions = (item, key) => {
+    const getPTOptions = (key) => {
         return ptm(key, {
             context: {
-                selected: props.selected
+                selected: props.selected,
+                disabled: props.disabled,
+                option: props.option
             }
         });
     };
@@ -45,7 +47,7 @@ export const SelectButtonItem = React.memo((props) => {
             {
                 className: cx('label')
             },
-            getPTOptions(props.option, 'label')
+            getPTOptions('label')
         );
 
         return props.template ? ObjectUtils.getJSXElement(props.template, props.option) : <span {...labelProps}>{props.label}</span>;
@@ -55,7 +57,7 @@ export const SelectButtonItem = React.memo((props) => {
 
     const buttonProps = mergeProps(
         {
-            className: cx('button', { itemProps: props, focusedState }),
+            className: classNames(props.className, cx('button', { itemProps: props, focusedState })),
             role: 'button',
             'aria-label': props.label,
             'aria-pressed': props.selected,
@@ -65,7 +67,7 @@ export const SelectButtonItem = React.memo((props) => {
             onFocus: onFocus,
             onBlur: onBlur
         },
-        getPTOptions(props.option, 'button')
+        getPTOptions('button')
     );
 
     return (

components/lib/selectbutton/selectbutton.d.ts

@@ -53,9 +53,19 @@ export interface SelectButtonPassThroughOptions {
  */
 export interface SelectButtonContext {
     /**
-     * Current selected value.
+     * Current selected value of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current disabled value of option or disabled property as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Available option.
      */
-    selected: any;
+    option: any;
 }
 
 /**

components/lib/slider/Slider.js

@@ -189,12 +189,12 @@ export const Slider = React.memo(
         };
 
         const createHandle = (leftValue, bottomValue, index) => {
-            leftValue = ObjectUtils.isEmpty(leftValue) ? 0 : leftValue;
-            bottomValue = ObjectUtils.isEmpty(bottomValue) ? 0 : bottomValue;
+            leftValue = ObjectUtils.isEmpty(leftValue) ? null : leftValue;
+            bottomValue = ObjectUtils.isEmpty(bottomValue) ? null : bottomValue;
             const style = {
                 transition: dragging.current ? 'none' : null,
-                left: leftValue + '%',
-                bottom: bottomValue + '%'
+                left: leftValue && leftValue + '%',
+                bottom: bottomValue && bottomValue + '%'
             };
 
             const handleProps = mergeProps(
@@ -283,8 +283,6 @@ export const Slider = React.memo(
         const content = props.range ? createRangeSlider() : createSingleSlider();
         const rootProps = mergeProps(
             {
-                ref: elementRef,
-                id: props.id,
                 style: props.style,
                 className: cx('root', { vertical, horizontal }),
                 onClick: onBarClick
@@ -293,7 +291,11 @@ export const Slider = React.memo(
             ptm('root')
         );
 
-        return <div {...rootProps}>{content}</div>;
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                {content}
+            </div>
+        );
     })
 );
 

components/lib/tristatecheckbox/TriStateCheckbox.js

@@ -127,6 +127,14 @@ export const TriStateCheckbox = React.memo(
             ptm('checkbox')
         );
 
+        const srOnlyAriaProps = mergeProps(
+            {
+                className: 'p-sr-only',
+                'aria-live': 'polite'
+            },
+            ptm('srOnlyAria')
+        );
+
         const rootProps = mergeProps(
             {
                 className: classNames(props.className, cx('root')),
@@ -141,11 +149,7 @@ export const TriStateCheckbox = React.memo(
             <>
                 <div id={props.id} ref={elementRef} {...rootProps}>
                     <div {...checkboxProps}>{checkIcon}</div>
-                    {focusedState && (
-                        <span className="p-sr-only" aria-live="polite">
-                            {ariaValueLabel}
-                        </span>
-                    )}
+                    {focusedState && <span {...srOnlyAriaProps}>{ariaValueLabel}</span>}
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} pt={ptm('tooltip')} />}
             </>

components/lib/tristatecheckbox/tristatecheckbox.d.ts

@@ -49,6 +49,10 @@ export interface TriStateCheckboxPassThroughOptions {
      * 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>>;
 }
 
 /**