refactor: remove defaultProps usage

docs/CODE_GUIDELINES.md

@@ -139,14 +139,6 @@ unclear.
     - `.propTypes = {};` using the PropTypes to specify property types, shapes,
       and required properties, and including DocGen comments to describe the
       properties for a user.
-    - `.defaultProps = {};` providing default values for properties that need
-      them. Required props should NOT be given default values. Any property that
-      is not required but which the component needs to make an assumed value for
-      should be given a suitable default. Properties that can be left unset do
-      NOT need default values if the component simply tests for and copes with
-      the value being `undefined`. This includes any property that will be
-      passed directly to a nested component or HTML element in the JSX, because
-      React treats `undefined` as not setting the property/attribute.
 
 - Ensure all code is neatly formatted (use `yarn format` and/or a prettier
   plugin for an editor to follow the prettier rules set up in the project), and

packages/ibm-products/src/components/AddSelect/AddSelect.tsx

@@ -17,7 +17,7 @@ export interface AddSelectProps {
   clearFiltersText?: string;
   closeIconDescription?: string;
   columnInputPlaceholder?: string;
-  description: string;
+  description?: string;
   filterByLabel?: string;
   globalFilters?: Filter[];
   globalFiltersIconDescription?: string;
@@ -31,42 +31,60 @@ export interface AddSelectProps {
   illustrationTheme?: Theme;
   influencerTitle?: string;
   items: Item;
-  itemsLabel: string;
+  itemsLabel?: string;
   metaIconDescription?: string;
   metaPanelTitle?: string;
-  multi: boolean;
+  multi?: boolean;
   navIconDescription?: string;
   noResultsDescription: string;
   noResultsTitle: string;
   noSelectionDescription?: string;
   noSelectionTitle?: string;
-  onClose: () => void;
-  onCloseButtonText: string;
-  onSubmit: () => void;
-  onSubmitButtonText: string;
+  onClose?: () => void;
+  onCloseButtonText?: string;
+  onSubmit?: () => void;
+  onSubmitButtonText?: string;
   open: boolean;
   /**
    * portal target for the all tags modal
    */
   portalTarget?: ReactNode;
   searchResultsTitle?: string;
   sortByLabel?: string;
-  title: string;
+  title?: string;
 }
 
 export const AddSelect = forwardRef(
   (
-    { items, globalFilters, ...props }: AddSelectProps,
+    {
+      globalFilters,
+      closeIconDescription = '',
+      description = '',
+      itemsLabel = '',
+      items = {
+        entries: [],
+      },
+      multi = false,
+      noResultsDescription = '',
+      noResultsTitle = '',
+      onClose = () => {},
+      onCloseButtonText = '',
+      onSubmit = () => {},
+      onSubmitButtonText = '',
+      open = false,
+      title = '',
+      ...props
+    }: AddSelectProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const useNormalizedItems = !!items.entries.find((item) => item.children);
     const normalizedItems = useNormalizedItems ? normalize(items) : null;
     const globalFilterOpts =
-      props.multi && globalFilters?.length
+      multi && globalFilters?.length
         ? getGlobalFilterValues(globalFilters, normalizedItems)
         : null;
     const defaultModifiers =
-      props.multi && items.modifiers
+      multi && items.modifiers
         ? items.entries.map((item) => {
             const modifierAttribute = items?.modifiers?.id;
             const modifier = {
@@ -85,11 +103,23 @@ export const AddSelect = forwardRef(
       <AddSelectBody
         {...props}
         ref={ref}
+        closeIconDescription={closeIconDescription}
+        description={description}
         items={items}
-        normalizedItems={normalizedItems}
+        itemsLabel={itemsLabel}
         useNormalizedItems={useNormalizedItems}
         globalFilterOpts={globalFilterOpts}
         defaultModifiers={defaultModifiers}
+        multi={multi}
+        normalizedItems={normalizedItems}
+        noResultsDescription={noResultsDescription}
+        noResultsTitle={noResultsTitle}
+        onClose={onClose}
+        onCloseButtonText={onCloseButtonText}
+        onSubmit={onSubmit}
+        onSubmitButtonText={onSubmitButtonText}
+        open={open}
+        title={title}
       />
     );
   }
@@ -98,9 +128,9 @@ export const AddSelect = forwardRef(
 AddSelect.propTypes = {
   className: PropTypes.string,
   clearFiltersText: PropTypes.string,
-  closeIconDescription: PropTypes.string.isRequired,
+  closeIconDescription: PropTypes.string,
   columnInputPlaceholder: PropTypes.string,
-  description: PropTypes.string.isRequired,
+  description: PropTypes.string,
   filterByLabel: PropTypes.string,
   /**@ts-ignore */
   globalFilters: PropTypes.arrayOf(
@@ -154,46 +184,28 @@ AddSelect.propTypes = {
         value: PropTypes.string.isRequired,
       })
     ).isRequired,
-  }).isRequired,
-  itemsLabel: PropTypes.string.isRequired,
+  }),
+  itemsLabel: PropTypes.string,
   metaIconDescription: PropTypes.string,
   metaPanelTitle: PropTypes.string,
-  multi: PropTypes.bool.isRequired,
+  multi: PropTypes.bool,
   navIconDescription: PropTypes.string,
   noResultsDescription: PropTypes.string.isRequired,
   noResultsTitle: PropTypes.string.isRequired,
   noSelectionDescription: PropTypes.string,
   noSelectionTitle: PropTypes.string,
-  onClose: PropTypes.func.isRequired,
-  onCloseButtonText: PropTypes.string.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onSubmitButtonText: PropTypes.string.isRequired,
+  onClose: PropTypes.func,
+  onCloseButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+  onSubmitButtonText: PropTypes.string,
   open: PropTypes.bool.isRequired,
   /**
    * portal target for the all tags modal
    */
   portalTarget: PropTypes.node,
   searchResultsTitle: PropTypes.string,
   sortByLabel: PropTypes.string,
-  title: PropTypes.string.isRequired,
-};
-
-AddSelect.defaultProps = {
-  closeIconDescription: '',
-  description: '',
-  itemsLabel: '',
-  items: {
-    entries: [],
-  },
-  multi: false,
-  noResultsDescription: '',
-  noResultsTitle: '',
-  onClose: () => {},
-  onCloseButtonText: '',
-  onSubmit: () => {},
-  onSubmitButtonText: '',
-  open: false,
-  title: '',
+  title: PropTypes.string,
 };
 
 AddSelect.displayName = componentName;

packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -14,7 +14,7 @@ import { pkg } from '../../../../../settings';
 const blockClass = `${pkg.prefix}--datagrid`;
 
 const ButtonWrapper = ({
-  onClick,
+  onClick = () => {},
   setIsTearsheetOpen,
   isTearsheetOpen,
   iconTooltipLabel = 'Customize columns',
@@ -39,10 +39,6 @@ const ButtonWrapper = ({
   );
 };
 
-ButtonWrapper.defaultProps = {
-  onClick: () => {},
-};
-
 ButtonWrapper.propTypes = {
   iconTooltipLabel: PropTypes.string,
   isTearsheetOpen: PropTypes.bool.isRequired,

packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -16,8 +16,24 @@ const blockClass = `${pkg.prefix}--datagrid__row-size`;
 const RowSizeRadioGroup = forwardRef(
   (
     {
-      rowSizes,
-      selectedOption,
+      rowSizes = [
+        {
+          value: 'xl', // 64
+        },
+        {
+          value: 'lg', // 48
+        },
+        {
+          value: 'md', // 40
+        },
+        {
+          value: 'sm', // 32
+        },
+        {
+          value: 'xs', // 24
+        },
+      ],
+      selectedOption = 'lg',
       onChange,
       legendText,
       rowSizeLabels = {
@@ -76,27 +92,6 @@ const getBackwardCompatibleRowSize = (rowSize) => {
   return rowSizeMap[rowSize] || rowSize;
 };
 
-RowSizeRadioGroup.defaultProps = {
-  rowSizes: [
-    {
-      value: 'xl', // 64
-    },
-    {
-      value: 'lg', // 48
-    },
-    {
-      value: 'md', // 40
-    },
-    {
-      value: 'sm', // 32
-    },
-    {
-      value: 'xs', // 24
-    },
-  ],
-  selectedOption: 'lg',
-};
-
 RowSizeRadioGroup.propTypes = {
   legendText: PropTypes.string,
   onChange: PropTypes.func.isRequired,

packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.test.js

@@ -16,6 +16,7 @@ const defaultProps = {
   noSelectionDescription: 'No selection description',
   noResultsTitle: 'No results title',
   noResultsDescription: 'Try again description',
+  open: true,
 };
 
 describe(componentName, () => {

packages/ibm-products/src/components/Nav/NavItemLink.js

@@ -1,14 +1,18 @@
 /**
- * @file Nav item link.
- * @copyright IBM Security 2019
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const NavItemLink = React.forwardRef(function NavItemLink(props, ref) {
-  const { element, ...rest } = props;
-  return React.createElement(element, { ...rest, ref });
+const NavItemLink = React.forwardRef(function NavItemLink(
+  { element = 'a', ...props },
+  ref
+) {
+  return React.createElement(element, { ...props, ref });
 });
 
 NavItemLink.displayName = 'NavItemLink';
@@ -18,8 +22,4 @@ NavItemLink.propTypes = {
   element: PropTypes.elementType,
 };
 
-NavItemLink.defaultProps = {
-  element: 'a',
-};
-
 export default NavItemLink;

packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.test.js

@@ -16,6 +16,7 @@ const defaultProps = {
   noSelectionDescription: 'No selection description',
   noResultsTitle: 'No results title',
   noResultsDescription: 'Try again description',
+  open: true,
 };
 
 describe(componentName, () => {