UIU-3141 - refactor away from default props for functional components.

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Fix issue with `Proxy borrower` field value. Refs UIU-3290.
 * Remove duplicates from the keyboard shortcut modal. Refs UIU-3026.
 * Add sub permission `manual-block-templates.collection.get` to permission `Users: Can create, edit and remove patron blocks`. Refs UIU-3305.
+* React v19: refactor away from default props for functional components. Refs. UIU-3141.
 
 ## [11.0.9](https://github.com/folio-org/ui-users/tree/v11.0.9) (2024-12-13)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v11.0.8...v11.0.9)

src/components/AffiliationsManager/AffiliationsManager.js

@@ -5,11 +5,11 @@ import { AffiliationsManagerModal } from './AffiliationsManagerModal';
 import AffiliationsManagerTrigger from './AffiliationsManagerTrigger';
 
 const AffiliationsManager = ({
-  disabled,
+  disabled = false,
   onUpdateAffiliations,
-  renderTrigger,
+  renderTrigger = AffiliationsManagerTrigger,
   userId,
-  withTrigger,
+  withTrigger = true,
 }) => {
   const [isModalOpen, toggleModal] = useToggle(!withTrigger);
 
@@ -36,10 +36,4 @@ AffiliationsManager.propTypes = {
   withTrigger: PropTypes.bool,
 };
 
-AffiliationsManager.defaultProps = {
-  disabled: false,
-  renderTrigger: AffiliationsManagerTrigger,
-  withTrigger: true,
-};
-
 export default AffiliationsManager;

src/components/AffiliationsSelect/AffiliationsSelect.js

@@ -13,7 +13,7 @@ import { Selection } from '@folio/stripes/components';
 import { affiliationsShape } from '../../shapes';
 
 const AffiliationsSelect = ({
-  id,
+  id = 'user-assigned',
   affiliations,
   value,
   onChange,
@@ -53,10 +53,6 @@ const AffiliationsSelect = ({
   );
 };
 
-AffiliationsSelect.defaultProps = {
-  id: 'user-assigned',
-};
-
 AffiliationsSelect.propTypes = {
   affiliations: affiliationsShape,
   onChange: PropTypes.func.isRequired,

src/components/AssignedUsers/AssignedUsersContainer.js

@@ -24,7 +24,12 @@ import AssignUsers from './AssignUsers';
 import AssignedUsersList from './AssignedUsersList';
 import { getUpdatedUsersList } from './utils';
 
-const AssignedUsersContainer = ({ permissionSetId, expanded, onToggle, tenantId }) => {
+const AssignedUsersContainer = ({
+  permissionSetId,
+  expanded = true,
+  onToggle,
+  tenantId
+}) => {
   const callout = useCallout();
   const intl = useIntl();
 
@@ -123,8 +128,4 @@ AssignedUsersContainer.propTypes = {
   tenantId: PropTypes.string,
 };
 
-AssignedUsersContainer.defaultProps = {
-  expanded: true,
-};
-
 export default AssignedUsersContainer;

src/components/AssignedUsers/AssignedUsersList.js

@@ -12,7 +12,7 @@ import {
   VISIBLE_COLUMNS,
 } from './constants';
 
-const AssignedUsersList = ({ users, isFetching }) => (
+const AssignedUsersList = ({ users = [], isFetching = false }) => (
   <Row
     start="xs"
     data-test-assigned-users
@@ -34,9 +34,4 @@ AssignedUsersList.propTypes = {
   isFetching: PropTypes.bool,
 };
 
-AssignedUsersList.defaultProps = {
-  users: [],
-  isFetching: false,
-};
-
 export default AssignedUsersList;

src/components/BulkRenewalDialog/BulkRenewedLoansList.js

@@ -24,15 +24,11 @@ const propTypes = {
   errorMessages: PropTypes.object.isRequired,
 };
 
-const defaultProps = {
-  height: 300,
-};
-
 const BulkRenewedLoansList = (props) => {
   const {
     failedRenewals,
     successRenewals,
-    height,
+    height = 300,
     errorMessages,
     requestCounts,
     loanPolicies,
@@ -126,7 +122,6 @@ const BulkRenewedLoansList = (props) => {
   );
 };
 
-BulkRenewedLoansList.defaultProps = defaultProps;
 BulkRenewedLoansList.propTypes = propTypes;
 
 export default BulkRenewedLoansList;

src/components/EditSections/EditUserInfo/components/ChangeUserTypeModal/ChangeUserTypeModal.js

@@ -9,7 +9,7 @@ import {
 
 import { USER_TYPES } from '../../../../../constants';
 
-const ChangeUserTypeModal = ({ onChange, initialUserType, open }) => {
+const ChangeUserTypeModal = ({ onChange, initialUserType, open = false }) => {
   const userTypeModalFooter = (
     <ModalFooter>
       <Button
@@ -47,8 +47,4 @@ ChangeUserTypeModal.propTypes = {
   open: PropTypes.bool,
 };
 
-ChangeUserTypeModal.defaultProps = {
-  open: false,
-};
-
 export default ChangeUserTypeModal;

src/components/EditSections/EditUserRoles/components/CheckboxColumn/CheckboxColumn.js

@@ -9,9 +9,9 @@ import css from './CheckboxColumn.css';
 const CheckboxColumn = memo(props => {
   const {
     value,
-    checked,
+    checked = false,
     roleName,
-    onChange,
+    onChange = noop,
   } = props;
 
   return (
@@ -39,9 +39,4 @@ CheckboxColumn.propTypes = {
   onChange: PropTypes.func,
 };
 
-CheckboxColumn.defaultProps = {
-  checked: false,
-  onChange: noop,
-};
-
 export default CheckboxColumn;

src/components/Loans/components/ActionsBar/ActionsBar.js

@@ -12,11 +12,7 @@ const propTypes = {
   contentEnd: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 };
 
-const defaultProps = {
-  show: true,
-};
-
-const ActionsBar = ({ show, contentStart, contentEnd }) => {
+const ActionsBar = ({ show = true, contentStart, contentEnd }) => {
   if (!show) {
     return null;
   }
@@ -30,6 +26,5 @@ const ActionsBar = ({ show, contentStart, contentEnd }) => {
 };
 
 ActionsBar.propTypes = propTypes;
-ActionsBar.defaultProps = defaultProps;
 
 export default ActionsBar;

src/components/PermissionsAccordion/PermissionsAccordion.js

@@ -33,19 +33,19 @@ const PermissionsAccordion = (props) => {
   const {
     accordionId,
     affiliations,
-    disabled,
+    disabled = false,
     expanded,
-    onChangeAffiliation,
+    onChangeAffiliation = noop,
     onToggle,
     permToModify,
     permToDelete,
     permissionsField,
     filtersConfig,
     visibleColumns,
     headlineContent,
-    excludePermissionSets,
-    initialValues: { personal },
-    isLoading,
+    excludePermissionSets = false,
+    initialValues: { personal } = {},
+    isLoading = false,
     form: { change },
     setButtonRef,
     tenantId,
@@ -310,12 +310,4 @@ PermissionsAccordion.propTypes = {
   setButtonRef: PropTypes.func
 };
 
-PermissionsAccordion.defaultProps = {
-  disabled: false,
-  excludePermissionSets: false,
-  initialValues: {},
-  isLoading: false,
-  onChangeAffiliation: noop,
-};
-
 export default stripesConnect(injectIntl(PermissionsAccordion));

src/components/PermissionsAccordion/components/CheckboxColumn/CheckboxColumn.js

@@ -9,9 +9,9 @@ import css from './CheckboxColumn.css';
 const CheckboxColumn = memo(props => {
   const {
     value,
-    checked,
+    checked = false,
     permissionName,
-    onChange,
+    onChange = noop,
   } = props;
 
   return (
@@ -39,9 +39,4 @@ CheckboxColumn.propTypes = {
   onChange: PropTypes.func,
 };
 
-CheckboxColumn.defaultProps = {
-  checked: false,
-  onChange: noop,
-};
-
 export default CheckboxColumn;

src/views/LostItems/LostItemsListContainer/components/LostItemsList/components/InstanceDetails/components/ShowLongContentInPopover/ShowLongContentInPopover.js

@@ -34,8 +34,8 @@ export const getComponentText = (text, additionalText = defaultAdditionalText, c
 
 const ShowLongContentInPopover = ({
   text,
-  additionalText,
-  contentLength,
+  additionalText = defaultAdditionalText,
+  contentLength = defaultContentLength,
 }) => {
   const {
     contentText,
@@ -61,9 +61,4 @@ ShowLongContentInPopover.propTypes = {
   contentLength: PropTypes.number,
 };
 
-ShowLongContentInPopover.defaultProps = {
-  additionalText: defaultAdditionalText,
-  contentLength: defaultContentLength,
-};
-
 export default ShowLongContentInPopover;