@openmrs/esm-stock-management-app 3.1.1-pre.1179 → 3.1.1-pre.1186

package/src/core/components/table/table.component.tsx

@@ -74,21 +74,24 @@ const DataList: React.FC<ListProps> = ({ columns, data, children, totalItems, go
       }),
     );
   };
-  const handleExport = (object) => {
+  const handleExportCSV = () => {
     const csvString = convertToCSV(list, columns);
-    if (object.currentTarget.innerText === 'Download As CSV') {
-      const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8' });
-      saveAs(blob, 'data.csv');
-    } else if (object.currentTarget.innerText === 'Download As Json') {
-      const jsonBlob = new Blob([csvString], { type: 'application/json' });
-      saveAs(jsonBlob, 'data.json');
-    }
+    const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8' });
+    saveAs(blob, 'data.csv');
   };
+
+  const handleExportJSON = () => {
+    const jsonString = JSON.stringify(list, null, 2);
+    const jsonBlob = new Blob([jsonString], { type: 'application/json' });
+    saveAs(jsonBlob, 'data.json');
+  };
+
   const convertToCSV = (data, columns) => {
     const header = columns.map((col) => col.header).join(',');
     const rows = data.map((row) => columns.map((col) => JSON.stringify(row[col.key])).join(','));
     return [header, ...rows].join('\n');
   };
+
   return (
     <>
       <DataTable
@@ -119,15 +122,21 @@ const DataList: React.FC<ListProps> = ({ columns, data, children, totalItems, go
                     ) : (
                       <>
                         <OverflowMenu
-                          size="sm"
-                          kind="tertiary"
-                          renderIcon={DocumentDownload}
-                          iconDescription="Download As"
                           focusTrap={false}
+                          iconDescription={t('downloadOptions', 'Download options')}
+                          renderIcon={DocumentDownload}
+                          size="sm"
                         >
-                          <OverflowMenuItem itemText="Download As CSV" onClick={handleExport} />
-                          <OverflowMenuItem itemText="Download As PDF" onClick={handleExport} />
-                          <OverflowMenuItem itemText="Download As Json" onClick={handleExport} />
+                          <OverflowMenuItem
+                            className={styles.menuItem}
+                            itemText={t('downloadAsCSV', 'Download As CSV')}
+                            onClick={handleExportCSV}
+                          />
+                          <OverflowMenuItem
+                            className={styles.menuItem}
+                            itemText={t('downloadAsJson', 'Download As JSON')}
+                            onClick={handleExportJSON}
+                          />
                         </OverflowMenu>
                         <TableToolbarSearch
                           className={styles.itemListSearch}
@@ -172,8 +181,8 @@ const DataList: React.FC<ListProps> = ({ columns, data, children, totalItems, go
                 </div>
               ) : null}
               <Pagination
-                forwardText="Next page"
-                backwardText="Previous page"
+                forwardText={t('nextPage', 'Next page')}
+                backwardText={t('previousPage', 'Previous page')}
                 page={currentPage}
                 pageSize={currentPageSize}
                 pageSizes={pageSizes}

package/src/core/components/table/table.scss

@@ -171,3 +171,7 @@
   @include type.type-style('body-compact-01');
   color: $text-02;
 }
+
+.menuItem {
+  max-width: none;
+}

package/src/core/components/table/types.ts

@@ -3,3 +3,15 @@ import type React from 'react';
 export interface DataTableRenderProps {
   onInputChange: (e: React.ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
 }
+
+export interface CustomTableHeader {
+  key: string;
+  header: string | { content: React.ReactNode };
+  styles?: React.CSSProperties;
+  isSortable?: boolean;
+}
+
+export interface CustomTableRow {
+  id: string;
+  [key: string]: unknown;
+}

package/src/core/components/tabs/vertical-tabs.component.tsx

@@ -20,12 +20,8 @@ const VerticalTabs: React.FC<VerticalTabsProps> = ({ tabs, title, hasContainer,
       `}
     >
       {title && <p className={styles.heading}>{title}</p>}
-      <div className={styles.tab}>
-        <Tabs
-          className={`${styles.verticalTabs}`}
-          selectedIndex={selectedIndex}
-          onChange={({ selectedIndex }) => onChange?.(selectedIndex)}
-        >
+      <div className={`${styles.tab} ${styles.verticalTabs}`}>
+        <Tabs selectedIndex={selectedIndex} onChange={({ selectedIndex }) => onChange?.(selectedIndex)}>
           <TabList aria-label="navigation">
             {tabs.map((tab: TabItem, index: number) => (
               <Tab key={index} disabled={tab.disabled}>

package/src/declarations.d.ts

@@ -1,6 +1,3 @@
-declare module '@carbon/react';
 declare module '*.css';
 declare module '*.scss';
 declare module '*.png';
-
-declare type SideNavProps = object;

package/src/stock-home/stock-home-inventory-card.component.tsx

@@ -55,8 +55,8 @@ const StockHomeInventoryCard = () => {
           <div className={styles.cardText}>
             <p>{t('expiringStock', 'Expiring stock')}</p>
             <p>
-              <strong>{item?.drugName}</strong> {t('batchNo', 'Batch No:')} {item?.batchNo} {t('quantity', 'Quantity:')}{' '}
-              {item?.quantity} {item?.dispensingUnitName}
+              <strong>{item?.drugName}</strong> {t('batchNumberLabel', 'Batch number:')} {item?.batchNo}{' '}
+              {t('quantityLabel', 'Quantity:')} {item?.quantity} {item?.dispensingUnitName}
             </p>
           </div>
         </div>

package/src/stock-items/add-stock-item/add-stock-item.component.tsx

@@ -53,7 +53,7 @@ const AddEditStockItem: React.FC<AddStockItemProps> = ({ stockItem, closeWorkspa
       disabled: !isEditing,
     },
     {
-      name: t('stockRules', 'Rules'),
+      name: t('rules', 'Rules'),
       component: <StockItemRules stockItemUuid={stockItem?.uuid} />,
       disabled: !isEditing,
     },

package/src/stock-items/add-stock-item/batch-information/batch-information-locations/batch-information-locations-filter.component.tsx

@@ -29,9 +29,6 @@ const BatchInformationLocationsFilter = <T,>(props: BatchInformationLocationsFil
       render={({ field: { onChange, value, ref } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={props.name}
           size={'md'}
           items={stockLocations ?? []}

package/src/stock-items/add-stock-item/batch-information/batch-information.component.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
 import { DataTableSkeleton } from '@carbon/react';
-import DataList from '../../../core/components/table/table.component';
+import { type StockItemInventoryFilter } from '../../stock-items.resource';
 import { useStockItemBatchInformationHook } from './batch-information.resource';
 import BatchInformationLocationsFilter from './batch-information-locations/batch-information-locations-filter.component';
-import { useForm } from 'react-hook-form';
-import { type StockItemInventoryFilter } from '../../stock-items.resource';
+import DataList from '../../../core/components/table/table.component';
 
 interface BatchInformationProps {
   onSubmit?: () => void;
@@ -32,7 +32,7 @@ const BatchInformation: React.FC<BatchInformationProps> = ({ stockItemUuid }) =>
       },
       {
         key: 'batch',
-        header: t('batchNumber', 'Batch Number'),
+        header: t('batchNumber', 'Batch number'),
       },
       {
         key: 'quantity',

package/src/stock-items/add-stock-item/dispensing-package-measurement/dispensing-package-measurement.component.tsx

@@ -1,7 +1,7 @@
-import React, { type ReactNode, useMemo, useState } from 'react';
+import React, { type ReactNode, useMemo } from 'react';
+import { ComboBox, SelectSkeleton } from '@carbon/react';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
-import { ComboBox, SelectSkeleton } from '@carbon/react';
 
 interface DispensingPackageMeasurementProps<T> {
   dispensingUnitPackagingUoMUuid?: string;
@@ -40,9 +40,6 @@ const DispensingPackageMeasurement = <T,>(props: DispensingPackageMeasurementPro
         render={({ field: { onChange, ref } }) => (
           <ComboBox
             titleText={props.title}
-            name={props.name}
-            control={props.control}
-            controllerName={props.controllerName}
             id={props.name}
             size={'sm'}
             items={props.packagingUnits ?? []}

package/src/stock-items/add-stock-item/drug-selector/drug-selector.component.tsx

@@ -1,10 +1,10 @@
 import React, { type ReactNode, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { ComboBox, InlineLoading } from '@carbon/react';
-import { type Drug } from '../../../core/api/types/concept/Drug';
+import { useTranslation } from 'react-i18next';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
-import { useDrugsHook } from './drug-selector.resource';
+import { type Drug } from '../../../core/api/types/concept/Drug';
 import { fetchStockItem } from '../../stock-items.resource';
+import { useDrugsHook } from './drug-selector.resource';
 
 interface DrugSelectorProps<T> {
   placeholder?: string;
@@ -47,9 +47,6 @@ const DrugSelector = <T,>(props: DrugSelectorProps<T>) => {
         render={({ field: { onChange, ref } }) => (
           <ComboBox
             titleText={props.title}
-            name={props.name}
-            control={props.control}
-            controllerName={props.controllerName}
             id={props.name}
             size={'md'}
             items={drugList || []}
@@ -64,7 +61,6 @@ const DrugSelector = <T,>(props: DrugSelectorProps<T>) => {
               }
             }}
             onInputChange={(event) => handleInputChange(event)}
-            inputValue={inputValue}
             placeholder={props.placeholder}
             invalid={props.invalid}
             invalidText={props.invalidText}
@@ -73,7 +69,7 @@ const DrugSelector = <T,>(props: DrugSelectorProps<T>) => {
         )}
       />
       {isLoading && <InlineLoading status="active" iconDescription="Searching" description="Searching..." />}
-      {showExistenceError && <div style={{ color: '#da1e28' }}>{t('itemAlreadyExists', 'Item already exits')}</div>}
+      {showExistenceError && <div style={{ color: '#da1e28' }}>{t('itemAlreadyExists', 'Item already exists')}</div>}
     </div>
   );
 };

package/src/stock-items/add-stock-item/packaging-units/packaging-units-delete.modal.tsx

@@ -34,9 +34,9 @@ const DeletePackagingUnitModal: React.FC<DeletePackagingUnitModalProps> = ({ row
         closeModal();
         showSnackbar({
           isLowContrast: true,
-          title: t('deletePackagingUnitTitle', 'Delete packing item'),
+          title: t('deletePackingItem', 'Delete packing item'),
           kind: 'success',
-          subtitle: t('deletePackagingUnitMesaage', 'Stock Item packing unit deleted Successfully'),
+          subtitle: t('deletePackagingUnitMessage', 'Stock item packing unit deleted successfully'),
         });
       },
       (error) => {

package/src/stock-items/add-stock-item/packaging-units/packaging-units.component.tsx

@@ -24,6 +24,7 @@ import { useStockItemPackageUnitsHook } from './packaging-units.resource';
 import ControlledNumberInput from '../../../core/components/carbon/controlled-number-input.component';
 import DeletePackagingUnitActionButton from './delete-packaging-unit-action-button.component';
 import PackagingUnitsConceptSelector from '../packaging-units-concept-selector/packaging-units-concept-selector.component';
+import { type CustomTableHeader, type CustomTableRow } from '../../../core/components/table/types';
 import styles from './packaging-units.scss';
 
 interface PackagingUnitsProps {
@@ -57,7 +58,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
   }, [items]);
 
   const { t } = useTranslation();
-  const tableHeaders = useMemo(
+  const tableHeaders = useMemo<CustomTableHeader[]>(
     () => [
       {
         key: 'packaging',
@@ -189,27 +190,40 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
   return (
     <FormProvider {...packageUnitForm}>
       <DataTable
-        rows={[...items, {}]}
-        headers={tableHeaders}
+        rows={
+          [
+            ...items.map((item, idx) => ({ ...item, id: item.uuid || `item-${idx}` })),
+            { id: 'new-row' },
+          ] as CustomTableRow[]
+        }
+        headers={tableHeaders as any}
         isSortable={false}
-        useZebraStyles={true}
-        render={({ headers, getHeaderProps, getTableProps }) => (
+        useZebraStyles
+      >
+        {({ headers, getHeaderProps, getTableProps }) => (
           <TableContainer className={styles.packagingTableContainer}>
             <Table {...getTableProps()} className={styles.packingTable}>
               <TableHead>
                 <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader
-                      {...getHeaderProps({
-                        header,
-                        isSortable: false,
-                      })}
-                      style={header.styles}
-                      key={header.key}
-                    >
-                      {header.header?.content ?? header.header}
-                    </TableHeader>
-                  ))}
+                  {headers.map((header) => {
+                    const customHeader = header as CustomTableHeader;
+                    return (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          isSortable: false,
+                        })}
+                        style={customHeader.styles}
+                        key={header.key}
+                      >
+                        {typeof customHeader.header === 'object' &&
+                        customHeader.header !== null &&
+                        'content' in customHeader.header
+                          ? (customHeader.header.content as React.ReactNode)
+                          : (customHeader.header as React.ReactNode)}
+                      </TableHeader>
+                    );
+                  })}
                   <TableHeader style={{ width: '70%' }} />
                 </TableRow>
               </TableHead>
@@ -232,7 +246,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid, handleTa
             </Table>
           </TableContainer>
         )}
-      />
+      </DataTable>
       <div className={styles.packageUnitsBtn}>
         <Button kind="secondary" onClick={handleCancelPackagingUnits}>
           {getCoreTranslation('cancel')}

package/src/stock-items/add-stock-item/packaging-units-concept-selector/packaging-units-concept-selector.component.tsx

@@ -1,11 +1,11 @@
 import React, { type ReactNode } from 'react';
+import { ComboBox, TextInputSkeleton } from '@carbon/react';
 import { type Concept } from '../../../core/api/types/concept/Concept';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { useConcept } from '../../../stock-lookups/stock-lookups.resource';
-import { ComboBox, TextInputSkeleton } from '@carbon/react';
+import { type ConfigObject } from '../../../config-schema';
 import { type StockItemPackagingUOMDTO } from '../../../core/api/types/stockItem/StockItemPackagingUOM';
 import { useConfig } from '@openmrs/esm-framework';
-import { type ConfigObject } from '../../../config-schema';
 
 interface PackagingUnitsConceptSelectorProps<T> {
   row?: StockItemPackagingUOMDTO;
@@ -38,9 +38,6 @@ const PackagingUnitsConceptSelector = <T,>(props: PackagingUnitsConceptSelectorP
       render={({ field: { onChange } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={`${props.name}-${props.row.id}-${props.row.uuid}`}
           size="md"
           items={

package/src/stock-items/add-stock-item/preferred-vendor-selector/preferred-vendor-selector.component.tsx

@@ -37,9 +37,6 @@ const PreferredVendorSelector = <T,>(props: PreferredVendorSelectorProps<T>) =>
       render={({ field: { onChange, value, ref } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={props.name}
           size={'md'}
           items={sourcesList || []}

package/src/stock-items/add-stock-item/stock-item-category-selector/stock-item-category-selector.component.tsx

@@ -1,11 +1,11 @@
 import React, { type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { type Concept } from '../../../core/api/types/concept/Concept';
 import { ComboBox, TextInputSkeleton } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
 import { useConcept } from '../../../stock-lookups/stock-lookups.resource';
 import { type ConfigObject } from '../../../config-schema';
-import { useConfig } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 
 interface StockItemCategorySelectorProps<T> {
   categoryUuid?: string;
@@ -42,9 +42,6 @@ const StockItemCategorySelector = <T,>(props: StockItemCategorySelectorProps<T>)
       render={({ field: { onChange, value, ref } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={props.name}
           size={'md'}
           items={filteredCategories || []}

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.component.tsx

@@ -49,11 +49,11 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
         if (response?.data) {
           showSnackbar({
             isLowContrast: true,
-            title: stockItem ? `${t('editStockItem', 'Edit Stock Item')}` : `${t('addStockItem', 'Add Stock Item')}`,
+            title: stockItem ? `${t('editStockItem', 'Edit stock item')}` : `${t('addStockItem', 'Add stock item')}`,
             kind: 'success',
             subtitle: stockItem
-              ? `${t('stockItemEdited', 'Stock Item Edited Successfully')}`
-              : `${t('stockItemAdded', 'Stock Item Added Successfully')}`,
+              ? `${t('stockItemEdited', 'Stock item edited successfully')}`
+              : `${t('stockItemAdded', 'Stock item added successfully')}`,
           });
           if (!stockItem) {
             onCloseWorkspace?.();
@@ -91,8 +91,8 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
           {!stockItem && (
             <FormGroup
               className="clear-margin-bottom"
-              legendText={t('itemType', 'Item Type')}
-              title={t('itemType', 'Item Type')}
+              legendText={t('itemType', 'Item type')}
+              title={t('itemType', 'Item type')}
             >
               <ControlledRadioButtonGroup
                 control={control}
@@ -110,8 +110,8 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
               name="drugUuid"
               controllerName="drugUuid"
               control={control}
-              title={t('pleaseSpecify', 'Please specify:')}
-              placeholder="Choose a drug"
+              title={t('pleaseSpecify', 'Please specify')}
+              placeholder={t('chooseADrug', 'Choose a drug')}
               drugUuid={stockItem?.drugUuid}
               invalid={!!errors.drugUuid}
               invalidText={errors.drugUuid && errors?.drugUuid?.message}
@@ -121,7 +121,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
               name="conceptUuid"
               controllerName="conceptUuid"
               control={control}
-              title={t('pleaseSpecify', 'Please specify') + ':'}
+              title={t('pleaseSpecify', 'Please specify')}
               placeholder={t('chooseAnItem', 'Choose an item')}
               invalid={!!errors.drugUuid}
               invalidText={errors.drugUuid && errors?.drugUuid?.message}
@@ -174,7 +174,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
             </FormGroup>
 
             {observableHasExpiration && (
-              <FormGroup className="clear-margin-bottom" title={t('expirationNotice', 'Expiration Notice (days)')}>
+              <FormGroup className="clear-margin-bottom" legendText={t('expirationNotice', 'Expiration Notice (days)')}>
                 <ControlledNumberInput
                   id="expiryNotice"
                   name="expiryNotice"
@@ -221,7 +221,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
               name="dispensingUnitUuid"
               controllerName="dispensingUnitUuid"
               control={control}
-              title={t('dispensingUnit', 'Dispensing Unit') + ':'}
+              title={t('dispensingUnit', 'Dispensing unit') + ':'}
               placeholder={t('dispensingUnitHolder', 'Choose a dispensing unit')}
               invalid={!!errors.dispensingUnitUuid}
               invalidText={errors.dispensingUnitUuid && errors?.dispensingUnitUuid?.message}

package/src/stock-items/add-stock-item/stock-item-references/stock-item-references.component.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
+  DataTableSkeleton,
   Table,
   TableBody,
   TableCell,
@@ -10,22 +11,22 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  DataTableSkeleton,
 } from '@carbon/react';
-import styles from './stock-item-references.scss';
 import { TrashCan, Save } from '@carbon/react/icons';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
-import StockSourceSelector from './stock-references-selector.component';
 import { useStockItemReferencesHook } from './stock-item-references.resource';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type StockItemReferenceData } from './validation-schema';
 import { stockItemDetailsSchema } from '../../validationSchema';
 import { type StockItemReferenceDTO } from '../../../core/api/types/stockItem/StockItemReference';
-import ControlledTextInput from '../../../core/components/carbon/controlled-text-input.component';
 import { createStockItemReference, deleteStockItemReference } from '../../stock-items.resource';
 import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import { extractErrorMessagesFromResponse } from '../../../constants';
 import { handleMutate } from '../../../utils';
+import ControlledTextInput from '../../../core/components/carbon/controlled-text-input.component';
+import StockSourceSelector from './stock-references-selector.component';
+import { type CustomTableHeader, type CustomTableRow } from '../../../core/components/table/types';
+import styles from './stock-item-references.scss';
 
 interface StockReferencesProps {
   isEditing?: boolean;
@@ -42,7 +43,7 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
     setStockItemUuid(stockItemUuid);
   }, [stockItemUuid, setStockItemUuid]);
 
-  const tableHeaders = useMemo(
+  const tableHeaders = useMemo<CustomTableHeader[]>(
     () => [
       {
         key: 'source',
@@ -84,7 +85,7 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
         handleMutate(`${restBaseUrl}/stockmanagement/stockitemreference`);
 
         showSnackbar({
-          title: t('saveReferenceTitle', 'StockItem Reference'),
+          title: t('saveReferenceTitle', 'Stock Item Reference'),
           subtitle: t('saveStockItemReferenceMessage', 'Stock Item Reference saved successfully'),
           kind: 'success',
         });
@@ -94,7 +95,7 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
 
         const err = extractErrorMessagesFromResponse(error);
         showSnackbar({
-          title: t('saveStockItemReferenceErrorTitle', 'StockItem Reference'),
+          title: t('saveStockItemReferenceErrorTitle', 'Stock Item Reference'),
           subtitle: t('saveStockItemReferenceErrorMessage', 'Error saving stock item reference' + err.join(',')),
           kind: 'error',
         });
@@ -107,27 +108,35 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
   return (
     <FormProvider {...stockReferenceForm}>
       <DataTable
-        rows={items ?? []}
-        headers={tableHeaders}
+        rows={(items ?? []).map((item, idx) => ({ ...item, id: item.uuid || `ref-${idx}` })) as CustomTableRow[]}
+        headers={tableHeaders as any}
         isSortable={false}
-        useZebraStyles={true}
-        render={({ headers, getHeaderProps, getTableProps }) => (
+        useZebraStyles
+      >
+        {({ headers, getHeaderProps, getTableProps }) => (
           <TableContainer className={styles.referencesTableContainer}>
             <Table {...getTableProps()} className={styles.referencesTable}>
               <TableHead>
                 <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader
-                      {...getHeaderProps({
-                        header,
-                        isSortable: false,
-                      })}
-                      style={header.styles}
-                      key={header.key}
-                    >
-                      {header.header?.content ?? header.header}
-                    </TableHeader>
-                  ))}
+                  {headers.map((header) => {
+                    const customHeader = header as CustomTableHeader;
+                    return (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          isSortable: false,
+                        })}
+                        style={customHeader.styles}
+                        key={header.key}
+                      >
+                        {typeof customHeader.header === 'object' &&
+                        customHeader.header !== null &&
+                        'content' in customHeader.header
+                          ? (customHeader.header.content as React.ReactNode)
+                          : (customHeader.header as React.ReactNode)}
+                      </TableHeader>
+                    );
+                  })}
                   <TableHeader style={{ width: '70%' }} />
                 </TableRow>
               </TableHead>
@@ -140,7 +149,7 @@ const StockReferences: React.FC<StockReferencesProps> = ({ stockItemUuid }) => {
             </Table>
           </TableContainer>
         )}
-      />
+      </DataTable>
 
       <Button
         name="save"
@@ -171,9 +180,9 @@ const StockReferencesRow: React.FC<{
     deleteStockItemReference(row.uuid).then(
       () => {
         showSnackbar({
-          title: t('deletePackagingUnitTitle', `Delete StockItem reference`),
+          title: t('deleteStockItemReference', 'Delete stock item reference'),
           kind: 'success',
-          subtitle: t('deleteStockItemReferenceMesaage', `StockItem reference deleted Successfully`),
+          subtitle: t('deleteStockItemReferenceMessage', 'Stock item reference deleted successfully'),
         });
       },
       (error) => {
@@ -217,7 +226,7 @@ const StockReferencesRow: React.FC<{
             type="button"
             size="sm"
             className="submitButton clear-padding-margin"
-            iconDescription={'Delete'}
+            iconDescription={t('delete', 'Delete')}
             kind="ghost"
             renderIcon={TrashCan}
             onClick={(e) => handleDelete(e)}

package/src/stock-items/add-stock-item/stock-item-references/stock-references-selector.component.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { TextInputSkeleton, ComboBox } from '@carbon/react';
+import { ComboBox, TextInputSkeleton } from '@carbon/react';
 import { type Control, Controller, type FieldValues } from 'react-hook-form';
 import { type StockSource } from '../../../core/api/types/stockOperation/StockSource';
-import { ResourceRepresentation } from '../../../core/api/api';
 import { useStockSources } from '../../../stock-sources/stock-sources.resource';
 import { type Concept } from '../../../core/api/types/concept/Concept';
 import { type StockItemReferenceDTO } from '../../../core/api/types/stockItem/StockItemReference';
+import { ResourceRepresentation } from '../../../core/api/api';
 
 interface StockSourceSelectorProps<T> {
   row?: StockItemReferenceDTO;
@@ -36,9 +36,6 @@ const StockSourceSelector = <T,>(props: StockSourceSelectorProps<T>) => {
       render={({ field: { onChange, value, ref } }) => (
         <ComboBox
           titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
           id={props.name}
           size={'md'}
           items={sourcesList || []}