feature/IO-3499-React-19: Remove redundant forward refs in favor of React 19 built in ref prop

client/src/components/bill-line-search-select/bill-line-search-select.component.jsx

@@ -1,9 +1,8 @@
 import { Select } from "antd";
-import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 
-const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, ref) => {
+const BillLineSearchSelect = ({ options, disabled, allowRemoved, ref, ...restProps }) => {
   const { t } = useTranslation();
 
   return (
@@ -68,4 +67,4 @@ function generateLineName(item) {
     </div>
   );
 }
-export default forwardRef(BillLineSearchSelect);
+export default BillLineSearchSelect;

client/src/components/contract-status-select/contract-status-select.component.jsx

@@ -1,10 +1,10 @@
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 
 const { Option } = Select;
 
-const ContractStatusComponent = forwardRef(({ value, onChange }, ref) => {
+const ContractStatusComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
 
@@ -21,7 +21,7 @@ const ContractStatusComponent = forwardRef(({ value, onChange }, ref) => {
       <Option value="contracts.status.returned">{t("contracts.status.out")}</Option>
     </Select>
   );
-});
+};
 
 ContractStatusComponent.displayName = "ContractStatusComponent";
 

client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx

@@ -1,8 +1,7 @@
 import { Slider } from "antd";
-import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 
-const CourtesyCarFuelComponent = (props, ref) => {
+const CourtesyCarFuelComponent = ({ ref, ...props }) => {
   const { t } = useTranslation();
 
   const marks = {
@@ -63,4 +62,4 @@ const CourtesyCarFuelComponent = (props, ref) => {
     />
   );
 };
-export default forwardRef(CourtesyCarFuelComponent);
+export default CourtesyCarFuelComponent;

client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx

@@ -1,10 +1,10 @@
 import { Select } from "antd";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 const { Option } = Select;
 
-const CourtesyCarReadinessComponent = ({ value, onChange }, ref) => {
+const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
 
@@ -29,4 +29,4 @@ const CourtesyCarReadinessComponent = ({ value, onChange }, ref) => {
     </Select>
   );
 };
-export default forwardRef(CourtesyCarReadinessComponent);
+export default CourtesyCarReadinessComponent;

client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx

@@ -1,10 +1,10 @@
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 
 const { Option } = Select;
 
-const CourtesyCarStatusComponent = ({ value, onChange }, ref) => {
+const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
 
@@ -32,4 +32,4 @@ const CourtesyCarStatusComponent = ({ value, onChange }, ref) => {
     </Select>
   );
 };
-export default forwardRef(CourtesyCarStatusComponent);
+export default CourtesyCarStatusComponent;

client/src/components/employee-team-search-select/employee-team-search-select.component.jsx

@@ -1,17 +1,17 @@
 import { useQuery } from "@apollo/client/react";
 import { Select } from "antd";
-import { forwardRef } from "react";
 import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
 import AlertComponent from "../alert/alert.component";
 
 //To be used as a form element only.
 
-const EmployeeTeamSearchSelect = ({ ...props }) => {
+const EmployeeTeamSearchSelect = ({ ref, ...props }) => {
   const { loading, error, data } = useQuery(QUERY_TEAMS);
 
   if (error) return <AlertComponent title={JSON.stringify(error)} type="error" />;
   return (
     <Select
+      ref={ref}
       showSearch
       allowClear
       loading={loading}
@@ -30,4 +30,4 @@ const EmployeeTeamSearchSelect = ({ ...props }) => {
     />
   );
 };
-export default forwardRef(EmployeeTeamSearchSelect);
+export default EmployeeTeamSearchSelect;

client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx

@@ -1,5 +1,5 @@
 import { InputNumber, Popover } from "antd";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 const FormInputNUmberCalculator = ({ value: formValue, onChange: formOnChange, ...restProps }) => {
   const [value, setValue] = useState(formValue);
@@ -105,4 +105,4 @@ const FormInputNUmberCalculator = ({ value: formValue, onChange: formOnChange, .
   );
 };
 
-export default forwardRef(FormInputNUmberCalculator);
+export default FormInputNUmberCalculator;

client/src/components/form-items-formatted/currency-form-item.component.jsx

@@ -1,5 +1,4 @@
 import { InputNumber } from "antd";
-import { forwardRef } from "react";
 
 // const locale = "en-us";
 // const currencyFormatter = (value) => {
@@ -41,7 +40,7 @@ import { forwardRef } from "react";
 //   }
 // };
 
-function FormItemCurrency(props, ref) {
+function FormItemCurrency({ ref, ...props }) {
   return (
     <InputNumber
       {...props}
@@ -54,4 +53,4 @@ function FormItemCurrency(props, ref) {
   );
 }
 
-export default forwardRef(FormItemCurrency);
+export default FormItemCurrency;

client/src/components/form-items-formatted/email-form-item.component.jsx

@@ -1,9 +1,7 @@
 import { MailFilled } from "@ant-design/icons";
 import { Button, Input, Space } from "antd";
-import { forwardRef } from "react";
 
-function FormItemEmail(props, ref) {
+function FormItemEmail({ defaultValue, value, ref, ...restProps }) {
-  const { defaultValue, value, ...restProps } = props;
   const emailValue = defaultValue || value;
 
   return (
@@ -18,4 +16,4 @@ function FormItemEmail(props, ref) {
   );
 }
 
-export default forwardRef(FormItemEmail);
+export default FormItemEmail;

client/src/components/form-items-formatted/labor-type-form-item.component.jsx

@@ -1,4 +1,3 @@
-import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 
 const LaborTypeFormItem = ({ value }) => {
@@ -8,4 +7,4 @@ const LaborTypeFormItem = ({ value }) => {
 
   return <div>{t(`joblines.fields.lbr_types.${value}`)}</div>;
 };
-export default forwardRef(LaborTypeFormItem);
+export default LaborTypeFormItem;

client/src/components/form-items-formatted/part-type-form-item.component.jsx

@@ -1,4 +1,3 @@
-import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 
 const PartTypeFormItem = ({ value }) => {
@@ -10,4 +9,4 @@ const PartTypeFormItem = ({ value }) => {
     <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{t(`joblines.fields.part_types.${value}`)}</div>
   );
 };
-export default forwardRef(PartTypeFormItem);
+export default PartTypeFormItem;

client/src/components/form-items-formatted/phone-form-item.component.jsx

@@ -1,14 +1,13 @@
 import { Input } from "antd";
 import i18n from "i18next";
 import parsePhoneNumber from "libphonenumber-js";
-import { forwardRef } from "react";
 import "./phone-form-item.styles.scss";
 
-function FormItemPhone(props, ref) {
+function FormItemPhone({ ref, ...props }) {
   return <Input ref={ref} {...props} />;
 }
 
-export default forwardRef(FormItemPhone);
+export default FormItemPhone;
 
 export const PhoneItemFormatterValidation = () => ({
   async validator(rule, value) {

client/src/components/job-search-select/job-search-select.component.jsx

@@ -2,7 +2,7 @@ import { LoadingOutlined } from "@ant-design/icons";
 import { useLazyQuery } from "@apollo/client/react";
 import { Select, Space, Spin, Tag } from "antd";
 import _ from "lodash";
-import { forwardRef, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
 import AlertComponent from "../alert/alert.component";
@@ -10,10 +10,15 @@ import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-displ
 
 const { Option } = Select;
 
-const JobSearchSelect = (
+const JobSearchSelect = ({
-  { disabled, convertedOnly = false, notInvoiced = false, notExported = true, clm_no = false, ...restProps },
+  disabled,
-  ref
+  convertedOnly = false,
-) => {
+  notInvoiced = false,
+  notExported = true,
+  clm_no = false,
+  ref,
+  ...restProps
+}) => {
   const { t } = useTranslation();
   const [theOptions, setTheOptions] = useState([]);
 
@@ -107,4 +112,4 @@ const JobSearchSelect = (
   );
 };
 
-export default forwardRef(JobSearchSelect);
+export default JobSearchSelect;

client/src/components/notification-center/notification-center.component.jsx

@@ -5,31 +5,27 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import "./notification-center.styles.scss";
 import day from "../../utils/day.js";
-import { forwardRef, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
 
 const { Text, Title } = Typography;
 
 /**
  * Notification Center Component
- * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly visible?: *, readonly onClose?: *, readonly notifications?: *, readonly loading?: *, readonly showUnreadOnly?: *, readonly toggleUnreadOnly?: *, readonly markAllRead?: *, readonly loadMore?: *, readonly onNotificationClick?: *, readonly unreadCount?: *}> & React.RefAttributes<unknown>>}
  */
-const NotificationCenterComponent = forwardRef(
+const NotificationCenterComponent = ({
-  (
+  visible,
-    {
+  notifications,
-      visible,
+  loading,
-      notifications,
+  showUnreadOnly,
-      loading,
+  toggleUnreadOnly,
-      showUnreadOnly,
+  markAllRead,
-      toggleUnreadOnly,
+  loadMore,
-      markAllRead,
+  onNotificationClick,
-      loadMore,
+  unreadCount,
-      onNotificationClick,
+  isEmployee,
-      unreadCount,
+  ref
-      isEmployee
+}) => {
-    },
-    ref
-  ) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const virtuosoRef = useRef(null);
@@ -127,8 +123,7 @@ const NotificationCenterComponent = forwardRef(
         )}
       </div>
     );
-  }
+};
-);
 
 NotificationCenterComponent.displayName = "NotificationCenterComponent";
 

client/src/components/owner-search-select/owner-search-select.component.jsx

@@ -2,14 +2,14 @@ import { LoadingOutlined } from "@ant-design/icons";
 import { useLazyQuery } from "@apollo/client/react";
 import { Empty, Select } from "antd";
 import _ from "lodash";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_OWNERS_FOR_AUTOCOMPLETE } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 
 const { Option } = Select;
 
-const OwnerSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
+const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
   const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_OWNERS_FOR_AUTOCOMPLETE);
 
   const [callIdSearch, { loading: idLoading, error: idError, data: idData }] = useLazyQuery(
@@ -85,4 +85,4 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
     </div>
   );
 };
-export default forwardRef(OwnerSearchSelect);
+export default OwnerSearchSelect;

client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx

@@ -1,10 +1,8 @@
-import { forwardRef } from "react";
+const ListComponent = ({ style, children, ref, ...props }) => (
-
-const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
   <div ref={ref} {...props} style={{ ...style }}>
     {children}
   </div>
-));
+);
 
 ListComponent.displayName = "ListComponent";
 

client/src/components/task-center/task-center.component.jsx

@@ -1,7 +1,7 @@
 import { Virtuoso } from "react-virtuoso";
 import { Badge, Button, Spin } from "antd";
 import { useTranslation } from "react-i18next";
-import { forwardRef, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
 import day from "../../utils/day.js";
 import "./task-center.styles.scss";
 import {
@@ -12,8 +12,18 @@ import {
   QuestionCircleOutlined
 } from "@ant-design/icons";
 
-const TaskCenterComponent = forwardRef(
+const TaskCenterComponent = ({
-  ({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask, incompleteTaskCount }, ref) => {
+  visible,
+  tasks,
+  loading,
+  error,
+  onTaskClick,
+  onLoadMore,
+  hasMore,
+  createNewTask,
+  incompleteTaskCount,
+  ref
+}) => {
     const { t } = useTranslation();
     const virtuosoRef = useRef(null);
 
@@ -149,8 +159,7 @@ const TaskCenterComponent = forwardRef(
         )}
       </div>
     );
-  }
+};
-);
 
 TaskCenterComponent.displayName = "TaskCenterComponent";
 export default TaskCenterComponent;

client/src/components/vehicle-search-select/vehicle-search-select.component.jsx

@@ -2,7 +2,7 @@ import { LoadingOutlined } from "@ant-design/icons";
 import { useLazyQuery } from "@apollo/client/react";
 import { Empty, Select } from "antd";
 import _ from "lodash";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE,
   SEARCH_VEHICLES_FOR_AUTOCOMPLETE
@@ -11,7 +11,7 @@ import AlertComponent from "../alert/alert.component";
 
 const { Option } = Select;
 
-const VehicleSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
+const VehicleSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
   const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_VEHICLES_FOR_AUTOCOMPLETE);
 
   const [callIdSearch, { loading: idLoading, error: idError, data: idData }] = useLazyQuery(
@@ -87,4 +87,4 @@ const VehicleSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
     </div>
   );
 };
-export default forwardRef(VehicleSearchSelect);
+export default VehicleSearchSelect;

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -1,13 +1,13 @@
 import { HeartOutlined } from "@ant-design/icons";
 import { Select, Space, Tag } from "antd";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 const { Option } = Select;
 
 // To be used as a form element only.
 
-const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone }, ref) => {
+const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone, ref }) => {
   const [option, setOption] = useState(value);
 
   useEffect(() => {
@@ -131,4 +131,4 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
     </Select>
   );
 };
-export default forwardRef(VendorSearchSelect);
+export default VendorSearchSelect;