Fix #7914: TriStateCheckbox 3rd state is NULL not '' (#7916)

Author: melloware

components/lib/tristatecheckbox/TriStateCheckbox.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { PrimeReactContext, ariaLabel } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
@@ -15,7 +15,7 @@ export const TriStateCheckbox = React.memo(
         const context = React.useContext(PrimeReactContext);
         const props = TriStateCheckboxBase.getProps(inProps, context);
 
-        const [checkBoxValue, setCheckBoxValue] = useState('');
+        const [checkBoxValue, setCheckBoxValue] = useState(null);
         const elementRef = React.useRef(null);
 
         const { ptm, cx, isUnstyled } = TriStateCheckboxBase.setMetaData({
@@ -25,10 +25,10 @@ export const TriStateCheckbox = React.memo(
         useHandleStyle(TriStateCheckboxBase.css.styles, isUnstyled, { name: 'tristatecheckbox' });
 
         useEffect(() => {
-            if ([true, false, ''].includes(props.value)) {
+            if ([true, false, null].includes(props.value)) {
                 setCheckBoxValue(props.value);
             } else {
-                setCheckBoxValue('');
+                setCheckBoxValue(null);
             }
         }, [props.value]);
 
@@ -39,12 +39,12 @@ export const TriStateCheckbox = React.memo(
 
             let newValue;
 
-            if (checkBoxValue === '') {
+            if (checkBoxValue === null) {
                 newValue = true;
             } else if (checkBoxValue === true) {
                 newValue = false;
             } else if (checkBoxValue === false) {
-                newValue = '';
+                newValue = null;
             }
 
             if (props.onChange) {

components/lib/tristatecheckbox/TriStateCheckboxBase.js

@@ -31,7 +31,7 @@ export const TriStateCheckboxBase = ComponentBase.extend({
         tooltip: null,
         tooltipOptions: null,
         uncheckIcon: null,
-        value: '',
+        value: null,
         children: undefined
     },
     css: {

components/lib/tristatecheckbox/tristatecheckbox.d.ts

@@ -87,7 +87,7 @@ export interface TriStateCheckboxProps extends Omit<React.DetailedHTMLProps<Reac
     /**
      * Value of the TriStateCheckbox.
      */
-    value?: boolean | string;
+    value?: boolean | undefined | null;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false