Structure enhancements

components/lib/checkbox/Checkbox.js

@@ -12,32 +12,30 @@ export const Checkbox = React.memo(
         const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = CheckboxBase.getProps(inProps, context);
-        const [focusedState, setFocusedState] = React.useState(false);
         const { ptm, cx, isUnstyled } = CheckboxBase.setMetaData({
             props,
-            state: {
-                focused: focusedState
-            },
             context: {
                 checked: props.checked === props.trueValue,
                 disabled: props.disabled
             }
         });
 
-        useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox', styled: true });
+        useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox' });
+
         const elementRef = React.useRef(null);
         const inputRef = React.useRef(props.inputRef);
 
-        const onClick = (event) => {
-            if (props.disabled || props.readOnly) {
+        const isChecked = () => {
+            return props.checked === props.trueValue;
+        };
+
+        const onChange = (event) => {
+            if (props.disabled || props.readonly) {
                 return;
             }
 
-            if (props.onChange || props.onClick) {
+            if (props.onChange) {
                 const checked = isChecked();
-                const checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement || event.target instanceof Object;
-                const isInputToggled = event.target === inputRef.current;
-                const isCheckboxToggled = checkboxClicked && event.target.checked !== checked;
                 const value = checked ? props.falseValue : props.trueValue;
                 const eventData = {
                     originalEvent: event,
@@ -58,39 +56,23 @@ export const Checkbox = React.memo(
                     }
                 };
 
-                props.onClick && props.onClick(eventData);
+                props.onChange && props.onChange(eventData);
 
                 // do not continue if the user defined click wants to prevent
                 if (event.defaultPrevented) {
                     return;
                 }
 
-                if (isInputToggled || isCheckboxToggled) {
-                    props.onChange && props.onChange(eventData);
-                }
-
                 DomHandler.focus(inputRef.current);
-                event.preventDefault();
             }
         };
 
         const onFocus = () => {
-            setFocusedState(true);
+            props?.onFocus?.();
         };
 
         const onBlur = () => {
-            setFocusedState(false);
-        };
-
-        const onKeyDown = (event) => {
-            if (event.code === 'Space' || event.key === ' ') {
-                // event.key is for Android support
-                onClick(event);
-            }
-        };
-
-        const isChecked = () => {
-            return props.checked === props.trueValue;
+            props?.onBlur?.();
         };
 
         React.useImperativeHandle(ref, () => ({
@@ -117,21 +99,11 @@ export const Checkbox = React.memo(
         const checked = isChecked();
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = CheckboxBase.getOtherProps(props);
-        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
-        const iconProps = mergeProps(
-            {
-                className: cx('icon')
-            },
-            ptm('icon')
-        );
-        const icon = checked ? props.icon || <CheckIcon {...iconProps} /> : null;
-        const checkboxIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, checked });
         const rootProps = mergeProps(
             {
                 id: props.id,
-                className: classNames(props.className, cx('root', { checked, focusedState })),
+                className: classNames(props.className, cx('root', { checked })),
                 style: props.style,
-                onClick: (e) => onClick(e),
                 'data-p-highlight': checked,
                 'data-p-disabled': props.disabled,
                 onContextMenu: props.onContextMenu,
@@ -141,48 +113,59 @@ export const Checkbox = React.memo(
             ptm('root')
         );
 
-        const hiddenInputWrapperProps = mergeProps(
-            {
-                className: 'p-hidden-accessible'
-            },
-            ptm('hiddenInputWrapper')
-        );
-
-        const hiddenInputProps = mergeProps(
-            {
-                id: props.inputId,
-                type: 'checkbox',
-                name: props.name,
-                tabIndex: props.tabIndex,
-                defaultChecked: checked,
-                onFocus: (e) => onFocus(e),
-                onBlur: (e) => onBlur(e),
-                onKeyDown: (e) => onKeyDown(e),
-                disabled: props.disabled,
-                readOnly: props.readOnly,
-                required: props.required,
-                ...ariaProps
-            },
-            ptm('hiddenInput')
-        );
+        const createInputElement = () => {
+            const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+            const inputProps = mergeProps(
+                {
+                    id: props.inputId,
+                    type: 'checkbox',
+                    className: cx('input'),
+                    name: props.name,
+                    tabIndex: props.tabIndex,
+                    defaultChecked: checked,
+                    onFocus: (e) => onFocus(e),
+                    onBlur: (e) => onBlur(e),
+                    onChange: (e) => onChange(e),
+                    disabled: props.disabled,
+                    readOnly: props.readOnly,
+                    required: props.required,
+                    'aria-invalid': props.invalid,
+                    checked: isChecked(),
+                    ...ariaProps
+                },
+                ptm('input')
+            );
+
+            return <input ref={inputRef} {...inputProps} />;
+        };
 
-        const inputProps = mergeProps(
-            {
-                className: cx('input', { checked, focusedState }),
-                'data-p-highlight': checked,
-                'data-p-disabled': props.disabled,
-                'data-p-focus': focusedState
-            },
-            ptm('input')
-        );
+        const createBoxElement = () => {
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                ptm('icon')
+            );
+            const boxProps = mergeProps(
+                {
+                    className: cx('box', { checked }),
+                    'data-p-highlight': checked,
+                    'data-p-disabled': props.disabled
+                },
+                ptm('box')
+            );
+
+            const icon = checked ? props.icon || <CheckIcon {...iconProps} /> : null;
+            const checkboxIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, checked });
+
+            return <div {...boxProps}>{checkboxIcon}</div>;
+        };
 
         return (
             <>
                 <div ref={elementRef} {...rootProps}>
-                    <div {...hiddenInputWrapperProps}>
-                        <input ref={inputRef} {...hiddenInputProps} />
-                    </div>
-                    <div {...inputProps}>{checkboxIcon}</div>
+                    {createInputElement()}
+                    {createBoxElement()}
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
             </>

components/lib/checkbox/CheckboxBase.js

@@ -2,40 +2,18 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    icon: 'p-checkbox-icon p-c',
-    input: ({ props, checked, focusedState }) =>
-        classNames('p-checkbox-box', {
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
+    icon: 'p-checkbox-icon',
+    root: ({ props, checked }) =>
+        classNames('p-checkbox p-component', {
             'p-highlight': checked,
             'p-disabled': props.disabled,
-            'p-focus': focusedState
-        }),
-    root: ({ props, checked, focusedState }) =>
-        classNames('p-checkbox p-component', {
-            'p-checkbox-checked': checked,
-            'p-checkbox-disabled': props.disabled,
-            'p-checkbox-focused': focusedState
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant === 'filled'
         })
 };
 
-const styles = `
-.p-checkbox {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-    position: relative;
-}
-
-.p-checkbox.p-checkbox-disabled {
-    cursor: auto;
-}
-
-.p-checkbox-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}        
-`;
 
 export const CheckboxBase = ComponentBase.extend({
     defaultProps: {
@@ -65,7 +43,6 @@ export const CheckboxBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes,
-        styles
+        classes
     }
 });

components/lib/checkbox/checkbox.d.ts

@@ -39,6 +39,10 @@ export interface CheckboxPassThroughOptions {
      * Uses to pass attributes to the input's DOM element.
      */
     input?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the icon's DOM element.
      */
@@ -48,14 +52,6 @@ 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>>;
     /**
      * Used to manage all lifecycle hooks
      * @see {@link ComponentHooks}
@@ -98,19 +94,11 @@ export interface CheckboxState {
  */
 interface CheckboxChangeEvent extends FormEvent {}
 
-/**
- * Custom click event.
- * @see {@link CheckboxProps.onClick}
- * @extends {FormEvent }
- * @event
- */
-interface CheckboxClickEvent extends FormEvent {}
-
 /**
  * Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'onClick' | 'ref'> {
+export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
     /**
      * Unique identifier of the element.
      */
@@ -197,11 +185,6 @@ export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputH
      * @param {CheckboxChangeEvent} event - Custom change event
      */
     onChange?(event: CheckboxChangeEvent): void;
-    /**
-     * Callback to invoke on value change. Mark the event with preventDefault to prevent the option from changing.
-     * @param {CheckboxClickEvent} event - Custom click event
-     */
-    onClick?(event: CheckboxClickEvent): void;
     /**
      * Callback to invoke to when a mouse button is pressed.
      * @param {React.MouseEvent<HTMLElement>} event - Browser event

components/lib/componentbase/ComponentBase.js

@@ -95,25 +95,6 @@ const buttonStyles = `
     z-index: 1;
 }
 `;
-const checkboxStyles = `
-.p-checkbox {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-    position: relative;
-}
-
-.p-checkbox.p-checkbox-disabled {
-    cursor: auto;
-}
-
-.p-checkbox-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-`;
 const inputTextStyles = `
 .p-inputtext {
     margin: 0;
@@ -221,34 +202,6 @@ const inputTextStyles = `
     display: block;
     width: 100%;
 }
-`;
-const radioButtonStyles = `
-.p-radiobutton {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-}
-
-.p-radiobutton-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-radiobutton-icon {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translateZ(0) scale(.1);
-    border-radius: 50%;
-    visibility: hidden;
-}
-
-.p-radiobutton-box.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1.0, 1.0);
-    visibility: visible;
-}
-
 `;
 const iconStyles = `
 .p-icon {
@@ -456,9 +409,7 @@ const commonStyle = `
     }
 
     ${buttonStyles}
-    ${checkboxStyles}
     ${inputTextStyles}
-    ${radioButtonStyles}
     ${iconStyles}
 }
 `;