Change default properties from null to undefined (#662)

src/components/Alert/Alert.jsx

@@ -57,9 +57,9 @@ export const Alert = ({
 
 Alert.defaultProps = {
   color: 'note',
-  icon: null,
+  icon: undefined,
   id: undefined,
-  onClose: null,
+  onClose: undefined,
 };
 
 Alert.propTypes = {

src/components/Button/Button.jsx

@@ -101,18 +101,18 @@ export const Button = React.forwardRef((props, ref) => {
 });
 
 Button.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
+  afterLabel: undefined,
+  beforeLabel: undefined,
   block: false,
   color: 'primary',
   disabled: false,
-  endCorner: null,
-  feedbackIcon: null,
+  endCorner: undefined,
+  feedbackIcon: undefined,
   id: undefined,
   labelVisibility: 'xs',
   priority: 'filled',
   size: 'medium',
-  startCorner: null,
+  startCorner: undefined,
   type: 'button',
 };
 

src/components/ButtonGroup/ButtonGroup.jsx

@@ -48,7 +48,7 @@ export const ButtonGroup = ({
 
 ButtonGroup.defaultProps = {
   block: false,
-  children: null,
+  children: undefined,
   disabled: false,
   priority: 'filled',
   size: 'medium',

src/components/Card/CardFooter.jsx

@@ -24,7 +24,7 @@ export const CardFooter = ({
 };
 
 CardFooter.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 CardFooter.propTypes = {

src/components/CheckboxField/CheckboxField.jsx

@@ -79,14 +79,14 @@ export const CheckboxField = React.forwardRef((props, ref) => {
 
 CheckboxField.defaultProps = {
   disabled: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
   renderAsRequired: false,
   required: false,
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
 };
 
 CheckboxField.propTypes = {

src/components/FileInputField/FileInputField.jsx

@@ -247,14 +247,14 @@ export const FileInputField = React.forwardRef((props, ref) => {
 FileInputField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   multiple: false,
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
 };
 
 FileInputField.propTypes = {

src/components/FormLayout/FormLayout.jsx

@@ -68,7 +68,7 @@ export const FormLayout = ({
 
 FormLayout.defaultProps = {
   autoWidth: false,
-  children: null,
+  children: undefined,
   fieldLayout: 'vertical',
   labelWidth: 'default',
 };

src/components/FormLayout/FormLayoutCustomField.jsx

@@ -80,15 +80,15 @@ export const FormLayoutCustomField = ({
 };
 
 FormLayoutCustomField.defaultProps = {
-  children: null,
+  children: undefined,
   disabled: false,
   fullWidth: false,
   id: undefined,
-  innerFieldSize: null,
-  label: null,
+  innerFieldSize: undefined,
+  label: undefined,
   labelForId: undefined,
   required: false,
-  validationState: null,
+  validationState: undefined,
 };
 
 FormLayoutCustomField.propTypes = {

src/components/Grid/Grid.jsx

@@ -54,7 +54,7 @@ Grid.defaultProps = {
   alignContent: undefined,
   alignItems: undefined,
   autoFlow: undefined,
-  children: null,
+  children: undefined,
   columnGap: 4,
   columns: '1fr',
   justifyContent: undefined,

src/components/Grid/GridSpan.jsx

@@ -35,7 +35,7 @@ export const GridSpan = ({
 /* eslint-disable sort-keys */
 
 GridSpan.defaultProps = {
-  children: null,
+  children: undefined,
   columns: 1,
   rows: 1,
   tag: 'div',

src/components/InputGroup/InputGroup.jsx

@@ -109,14 +109,14 @@ export const InputGroup = ({
 };
 
 InputGroup.defaultProps = {
-  children: null,
+  children: undefined,
   disabled: false,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
-  validationTexts: null,
+  validationTexts: undefined,
 };
 
 InputGroup.propTypes = {

src/components/Modal/Modal.jsx

@@ -121,7 +121,7 @@ export const Modal = ({
     onMouseDown,
   };
 
-  if (portalId === null) {
+  if (portalId === undefined) {
     return preRender(
       children,
       color,
@@ -152,14 +152,14 @@ Modal.defaultProps = {
   allowCloseOnEscapeKey: true,
   allowPrimaryActionOnEnterKey: true,
   autoFocus: true,
-  children: null,
-  closeButtonRef: null,
+  children: undefined,
+  closeButtonRef: undefined,
   color: undefined,
-  dialogRef: null,
-  portalId: null,
+  dialogRef: undefined,
+  portalId: undefined,
   position: 'center',
   preventScrollUnderneath: window.document.body,
-  primaryButtonRef: null,
+  primaryButtonRef: undefined,
   size: 'medium',
 };
 

src/components/Modal/ModalBody.jsx

@@ -30,7 +30,7 @@ export const ModalBody = ({
 };
 
 ModalBody.defaultProps = {
-  children: null,
+  children: undefined,
   scrolling: 'auto',
 };
 

src/components/Modal/ModalContent.jsx

@@ -24,7 +24,7 @@ export const ModalContent = ({
 };
 
 ModalContent.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 ModalContent.propTypes = {

src/components/Popover/Popover.jsx

@@ -43,15 +43,15 @@ export const Popover = React.forwardRef((props, ref) => {
           getRootAlignmentClassName(placement, styles),
         )}
         ref={ref}
-        style={placementStyle ? cleanPlacementStyle(placementStyle) : null}
+        style={placementStyle ? cleanPlacementStyle(placementStyle) : undefined}
       >
         {children}
         <span className={styles.arrow} />
       </div>
     </>
   );
 
-  if (portalId === null) {
+  if (portalId === undefined) {
     return PopoverEl;
   }
 
@@ -60,9 +60,9 @@ export const Popover = React.forwardRef((props, ref) => {
 
 Popover.defaultProps = {
   placement: 'bottom',
-  placementStyle: null,
-  popoverTargetId: null,
-  portalId: null,
+  placementStyle: undefined,
+  popoverTargetId: undefined,
+  portalId: undefined,
 };
 
 Popover.propTypes = {

src/components/Radio/Radio.jsx

@@ -113,14 +113,14 @@ export const Radio = ({
 
 Radio.defaultProps = {
   disabled: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   renderAsRequired: false,
   required: false,
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   value: undefined,
 };
 

src/components/ScrollView/ScrollView.jsx

@@ -297,18 +297,18 @@ ScrollView.defaultProps = {
   arrows: false,
   arrowsScrollStep: 200,
   autoScroll: 'off',
-  children: null,
+  children: undefined,
   debounce: 50,
   direction: 'vertical',
   endShadowBackground: 'linear-gradient(var(--rui-local-end-shadow-direction), rgba(255 255 255 / 1), rgba(255 255 255 / 0))',
   endShadowInitialOffset: '-1rem',
   endShadowSize: '2em',
   id: undefined,
   nextArrowColor: undefined,
-  nextArrowElement: null,
+  nextArrowElement: undefined,
   nextArrowInitialOffset: '-0.5rem',
   prevArrowColor: undefined,
-  prevArrowElement: null,
+  prevArrowElement: undefined,
   prevArrowInitialOffset: '-0.5rem',
   scrollbar: true,
   shadows: true,

src/components/SelectField/SelectField.jsx

@@ -133,15 +133,15 @@ export const SelectField = React.forwardRef((props, ref) => {
 SelectField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   renderAsRequired: false,
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };
 

src/components/Table/Table.jsx

@@ -53,7 +53,7 @@ export const Table = ({
 
 Table.defaultProps = {
   id: undefined,
-  sort: null,
+  sort: undefined,
 };
 
 Table.propTypes = {

src/components/Table/_components/TableBodyCell/TableBodyCell.jsx

@@ -20,7 +20,7 @@ TableBodyCell.defaultProps = {
   format: undefined,
   id: undefined,
   isSortingActive: false,
-  value: null,
+  value: undefined,
 };
 
 TableBodyCell.propTypes = {

src/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx

@@ -42,7 +42,7 @@ export const TableHeaderCell = ({
 
 TableHeaderCell.defaultProps = {
   id: undefined,
-  sort: null,
+  sort: undefined,
 };
 
 TableHeaderCell.propTypes = {

src/components/Tabs/TabsItem.jsx

@@ -45,11 +45,11 @@ export const TabsItem = ({
 );
 
 TabsItem.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
+  afterLabel: undefined,
+  beforeLabel: undefined,
   id: undefined,
   isActive: false,
-  onClick: null,
+  onClick: undefined,
 };
 
 TabsItem.propTypes = {

src/components/Text/Text.jsx

@@ -42,7 +42,7 @@ export const Text = ({
 
 Text.defaultProps = {
   blockLevel: false,
-  children: null,
+  children: undefined,
   hyphens: 'none',
   lines: undefined,
   wordWrapping: 'normal',

src/components/TextArea/TextArea.jsx

@@ -93,14 +93,14 @@ export const TextArea = React.forwardRef((props, ref) => {
 TextArea.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };
 

src/components/TextField/TextField.jsx

@@ -32,7 +32,7 @@ export const TextField = React.forwardRef((props, ref) => {
   } = props;
   const formLayoutContext = useContext(FormLayoutContext);
   const inputGroupContext = useContext(InputGroupContext);
-  const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
+  const hasSmallInput = (inputSize !== undefined) && (inputSize <= SMALL_INPUT_SIZE);
 
   return (
     <label
@@ -108,16 +108,16 @@ export const TextField = React.forwardRef((props, ref) => {
 TextField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
-  inputSize: null,
+  inputSize: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
   type: 'text',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };