@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.100

package/src/routes.json

@@ -2,341 +2,140 @@
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
     "fhir2": ">=1.2",
-   "webservices.rest": ">=2.24.0"
+    "webservices.rest": ">=2.24.0"
   },
   "pages": [
-    {
-      "component": "root",
-      "route": "express-workflow"
-    },
-    {
-      "component": "queuesAdminHome",
-      "route": "queues-admin"
-    },
-    {
-      "component": "appointmentsDashboard",
-      "route": "appointments"
-    }
+    { "component": "root", "route": "express-workflow" },
+    { "component": "queuesAdminHome", "route": "queues-admin" },
+    { "component": "@kenyaemr/esm-appointments-app#appointmentsDashboard", "route": "appointments" }
   ],
   "extensions": [
     {
       "component": "appointmentsDashboardLink",
       "name": "appointments-dashboard-link",
       "slot": "appointments-left-panel-slot",
-      "meta": {
-        "name": "appointments",
-        "slot": "appointments-dashboard-slot",
-        "title": "Appointments"
-      }
+      "meta": { "name": "appointments", "slot": "appointments-dashboard-slot", "title": "Appointments" }
     },
     {
       "component": "admissionsLeftPanelLink",
       "name": "admissions-dashboard-link",
       "slot": "express-workflow-left-panel-slot",
       "order": 9,
-      "meta": {
-        "name": "admissions",
-        "slot": "admissions-dashboard-slot",
-        "title": "Admissions"
-      }
-    },
-    {
-      "component": "admissionsDashboard",
-      "name": "admissions-dashboard",
-      "slot": "admissions-dashboard-slot"
+      "meta": { "name": "admissions", "slot": "admissions-dashboard-slot", "title": "Admissions" }
     },
+    { "component": "admissionsDashboard", "name": "admissions-dashboard", "slot": "admissions-dashboard-slot" },
     {
       "component": "consultationLeftPanelLink",
       "name": "consultation-dashboard-link",
       "slot": "homepage-dashboard-slot",
       "order": 3,
-      "meta": {
-        "name": "consultation",
-        "slot": "consultation-dashboard-slot",
-        "title": "Consultation"
-      }
-    },
-    {
-      "component": "consultationDashboard",
-      "name": "consultation-dashboard",
-      "slot": "consultation-dashboard-slot"
+      "meta": { "name": "consultation", "slot": "consultation-dashboard-slot", "title": "Consultation" }
     },
+    { "component": "consultationDashboard", "name": "consultation-dashboard", "slot": "consultation-dashboard-slot" },
     {
       "component": "facilityLeftPanelLink",
       "name": "facility-dashboard-link",
       "slot": "homepage-dashboard-slot",
       "order": 0,
-      "meta": {
-        "name": "dashboard",
-        "slot": "facility-dashboard-slot",
-        "title": "Dashboard"
-      }
-    },
-    {
-      "component": "facilityDashboard",
-      "name": "facility-dashboard",
-      "slot": "facility-dashboard-slot"
+      "meta": { "name": "dashboard", "slot": "facility-dashboard-slot", "title": "Dashboard" }
     },
+    { "component": "facilityDashboard", "name": "facility-dashboard", "slot": "facility-dashboard-slot" },
     {
       "component": "mchLeftPanelLink",
       "name": "mch-dashboard-link",
       "slot": "homepage-dashboard-slot",
-      "meta": {
-        "name": "mch",
-        "slot": "mch-dashboard-slot",
-        "title": "MCH"
-      }
-    },
-    {
-      "component": "mchDashboard",
-      "name": "mch-dashboard",
-      "slot": "mch-dashboard-slot"
+      "meta": { "name": "mch", "slot": "mch-dashboard-slot", "title": "MCH" }
     },
+    { "component": "mchDashboard", "name": "mch-dashboard", "slot": "mch-dashboard-slot" },
     {
       "component": "registrationLeftPanelLink",
       "name": "registration-dashboard-link",
       "slot": "homepage-dashboard-slot",
-      "meta": {
-        "name": "registration",
-        "slot": "registration-dashboard-slot",
-        "title": "Registration"
-      }
-    },
-    {
-      "component": "registrationDashboard",
-      "name": "registration-dashboard",
-      "slot": "registration-dashboard-slot"
+      "meta": { "name": "registration", "slot": "registration-dashboard-slot", "title": "Registration" }
     },
+    { "component": "registrationDashboard", "name": "registration-dashboard", "slot": "registration-dashboard-slot" },
     {
       "component": "triageLeftPanelLink",
       "name": "triage-dashboard-link",
       "slot": "homepage-dashboard-slot",
-      "meta": {
-        "name": "triage",
-        "slot": "triage-dashboard-slot",
-        "title": "Triage"
-      }
-    },
-    {
-      "component": "triageDashboard",
-      "name": "triage-dashboard",
-      "slot": "triage-dashboard-slot"
-    },
-    {
-      "name": "custom-visit-form-queue-fields",
-      "component": "checkinFormExtraExtension",
-      "slot":"visit-form-bottom-slot",
-      "order": 0
+      "meta": { "name": "triage", "slot": "triage-dashboard-slot", "title": "Triage" }
     },
+    { "component": "triageDashboard", "name": "triage-dashboard", "slot": "triage-dashboard-slot" },
+    { "name": "custom-visit-form-queue-fields", "component": "checkinFormExtraExtension", "slot": "visit-form-bottom-slot", "order": 0 },
     {
       "component": "reportsDashboardLink",
       "name": "reports-homepage-dashboard-link",
       "slot": "homepage-dashboard-slot",
-      "meta": {
-        "name": "reports",
-        "slot": "reports-homepage-dashboard-slot",
-        "title": "Reports"
-      }
-    },
-    {
-      "component": "reportsDashboard",
-      "name": "reports-dashboard",
-      "slot": "reports-homepage-dashboard-slot"
+      "meta": { "name": "reports", "slot": "reports-homepage-dashboard-slot", "title": "Reports" }
     },
+    { "component": "reportsDashboard", "name": "reports-dashboard", "slot": "reports-homepage-dashboard-slot" },
     {
       "name": "pharmacy-homepage-dashboard-link",
       "component": "pharmacyLink",
       "slot": "homepage-dashboard-slot",
-      "meta": {
-        "name": "pharmacy",
-        "title": "Pharmacy",
-        "path": "pharmacy",
-        "slot": "pharmacy-homepage-dashboard-slot"
-      }
-    },
-    {
-      "name": "pharmacy-homepage-dashboard",
-      "component": "pharmacy",
-      "slot": "pharmacy-homepage-dashboard-slot",
-      "online": true,
-      "offline": false
-    },
-    {
-      "name": "ewf-pharmacy-orders-dashboard",
-      "component": "pharmacyOrders",
-      "slot": "ewf-orders-slot",
-      "online": true,
-      "offline": false
-    },
-    {
-      "name": "patient-summary-dashboard",
-      "component": "patientSummaryDashboard",
-      "slot": "patient-chart-summary-dashboard-slot"
+      "meta": { "name": "pharmacy", "title": "Pharmacy", "path": "pharmacy", "slot": "pharmacy-homepage-dashboard-slot" }
     },
+    { "name": "pharmacy-homepage-dashboard", "component": "pharmacy", "slot": "pharmacy-homepage-dashboard-slot", "online": true, "offline": false },
+    { "name": "ewf-pharmacy-orders-dashboard", "component": "pharmacyOrders", "slot": "ewf-orders-slot", "online": true, "offline": false },
+    { "name": "patient-summary-dashboard", "component": "patientSummaryDashboard", "slot": "patient-chart-summary-dashboard-slot" },
     {
       "name": "ewf-clinical-encounter-link",
       "component": "clinicalEncounterLink",
       "slot": "patient-chart-dashboard-slot",
-      "meta": {
-        "name": "ewf-clinical-encounter",
-        "title": "Clinical Encounter",
-        "slot": "ewf-patient-chart-clinical-encounter-slot",
-        "path": "clinical-encounter",
-        "layoutMode": "anchored",
-        "hideDashboardTitle": true
-      }
+      "meta": { "name": "ewf-clinical-encounter", "title": "Clinical Encounter", "slot": "ewf-patient-chart-clinical-encounter-slot", "path": "clinical-encounter", "layoutMode": "anchored", "hideDashboardTitle": true }
     },
+    { "name": "ewf-clinical-encounter-dashboard", "component": "clinicalEncounter", "slot": "ewf-patient-chart-clinical-encounter-slot", "online": true, "offline": false },
     {
-      "name": "ewf-clinical-encounter-dashboard",
-      "component": "clinicalEncounter",
-      "slot": "ewf-patient-chart-clinical-encounter-slot",
-      "online": true,
-      "offline": false
-    },
-     {
       "name": "ewf-laboratory-dashboard-link",
       "component": "laboratoryLeftPanelLink",
       "slot": "patient-chart-dashboard-slot",
-      "meta": {
-        "name": "ewf-laboratory",
-        "title": "Lab Orders",
-        "path": "laboratory",
-        "slot": "ewf-patient-chart-laboratory-dashboard-slot",
-        "layoutMode": "anchored",
-        "hideDashboardTitle": true
-      }
-    },
-    {
-      "name": "ewf-laboratory-dashboard",
-      "component": "laboratoryDashboard",
-      "slot": "ewf-patient-chart-laboratory-dashboard-slot",
-      "online": true,
-      "offline": false
+      "meta": { "name": "ewf-laboratory", "title": "Lab Orders", "path": "laboratory", "slot": "ewf-patient-chart-laboratory-dashboard-slot", "layoutMode": "anchored", "hideDashboardTitle": true }
     },
+    { "name": "ewf-laboratory-dashboard", "component": "laboratoryDashboard", "slot": "ewf-patient-chart-laboratory-dashboard-slot", "online": true, "offline": false },
     {
       "name": "ewf-radiology-and-imaging-dashboard-link",
       "component": "radiologyAndImagingLeftPanelLink",
       "slot": "patient-chart-dashboard-slot",
-      "meta": {
-        "name": "ewf-radiology-and-imaging",
-        "title": "Radiology and Imaging",
-        "path": "radiology-and-imaging",
-        "slot": "ewf-patient-chart-radiology-and-imaging-dashboard-slot",
-        "layoutMode": "anchored",
-        "hideDashboardTitle": true
-      }
-    },
-    {
-      "name": "ewf-radiology-and-imaging-dashboard",
-      "component": "radiologyAndImagingDashboard",
-      "slot": "ewf-patient-chart-radiology-and-imaging-dashboard-slot",
-      "online": true,
-      "offline": false
+      "meta": { "name": "ewf-radiology-and-imaging", "title": "Radiology and Imaging", "path": "radiology-and-imaging", "slot": "ewf-patient-chart-radiology-and-imaging-dashboard-slot", "layoutMode": "anchored", "hideDashboardTitle": true }
     },
+    { "name": "ewf-radiology-and-imaging-dashboard", "component": "radiologyAndImagingDashboard", "slot": "ewf-patient-chart-radiology-and-imaging-dashboard-slot", "online": true, "offline": false },
     {
       "name": "ewf-procedures-dashboard-link",
       "component": "proceduresLeftPanelLink",
       "slot": "patient-chart-dashboard-slot",
-      "meta": {
-        "name": "ewf-procedures",
-        "title": "Procedures",
-        "path": "procedures",
-        "slot": "ewf-patient-chart-procedures-dashboard-slot",
-        "layoutMode": "anchored",
-        "hideDashboardTitle": true
-      }
-    },
-    {
-      "name": "ewf-procedures-dashboard",
-      "component": "proceduresDashboard",
-      "slot": "ewf-patient-chart-procedures-dashboard-slot",
-      "online": true,
-      "offline": false
+      "meta": { "name": "ewf-procedures", "title": "Procedures", "path": "procedures", "slot": "ewf-patient-chart-procedures-dashboard-slot", "layoutMode": "anchored", "hideDashboardTitle": true }
     },
+    { "name": "ewf-procedures-dashboard", "component": "proceduresDashboard", "slot": "ewf-patient-chart-procedures-dashboard-slot", "online": true, "offline": false },
     {
       "name": "ewf-pharmacy-dashboard-link",
       "component": "pharmacyPatientChartDashboardLink",
       "slot": "patient-chart-dashboard-slot",
-      "meta": {
-        "name": "ewf-pharmacy",
-        "title": "Prescription",
-        "path": "pharmacy",
-        "slot": "ewf-patient-chart-pharmacy-dashboard-slot",
-        "layoutMode": "anchored",
-        "hideDashboardTitle": true
-      }
-    },
-
-        {
-      "name": "ewf-pharmacy-dashboard",
-      "component": "pharmacyTabs",
-      "slot": "ewf-patient-chart-pharmacy-dashboard-slot",
-      "online": true,
-      "offline": false
-    },
-    {"name": "ewf-admissions-dashboard-link",
-      "component": "admissionsDashboardLink",
-      "slot": "patient-chart-dashboard-slot",
-      "meta": {
-        "name": "ewf-admissions",
-        "title": "In-patient",
-        "path": "admissions",
-        "slot": "ewf-patient-chart-admissions-dashboard-slot",
-        "layoutMode": "anchored",
-        "hideDashboardTitle": true
-      }
-    },
-    {
-      "name": "ewf-admissions-dashboard",
-      "component": "admissionsDashboard",
-      "slot": "ewf-patient-chart-admissions-dashboard-slot",
-      "online": true,
-      "offline": false
+      "meta": { "name": "ewf-pharmacy", "title": "Prescription", "path": "pharmacy", "slot": "ewf-patient-chart-pharmacy-dashboard-slot", "layoutMode": "anchored", "hideDashboardTitle": true }
     },
+    { "name": "ewf-pharmacy-dashboard", "component": "pharmacyTabs", "slot": "ewf-patient-chart-pharmacy-dashboard-slot", "online": true, "offline": false },
     {
-      "name": "ewf-homepage-dashboard-link",
-      "component": "homepageDashboardLink",
+      "name": "ewf-admissions-dashboard-link",
+      "component": "admissionsDashboardLink",
       "slot": "patient-chart-dashboard-slot",
-      "order": 0
+      "meta": { "name": "ewf-admissions", "title": "In-patient", "path": "admissions", "slot": "ewf-patient-chart-admissions-dashboard-slot", "layoutMode": "anchored", "hideDashboardTitle": true }
     },
-    {
-      "name": "ewf-encounter-details-dashboard",
-      "component": "encounterDetails",
-      "slot": "ewf-clinical-encounter-slot",
-      "online": true,
-      "offline": false
-    }
+    { "name": "ewf-admissions-dashboard", "component": "admissionsDashboard", "slot": "ewf-patient-chart-admissions-dashboard-slot", "online": true, "offline": false },
+    { "name": "ewf-homepage-dashboard-link", "component": "homepageDashboardLink", "slot": "patient-chart-dashboard-slot", "order": 0 },
+    { "name": "ewf-encounter-details-dashboard", "component": "encounterDetails", "slot": "ewf-clinical-encounter-slot", "online": true, "offline": false },
+    { "name": "custom-start-visit-overflow-menu-item", "slot": "patient-actions-slot", "component": "customStartVisitOverflowMenuItem", "online": true, "offline": true }
   ],
-
-  "workspaces": [
-    {
-      "name": "express-workflow-workspace",
-      "component": "expressWorkflowWorkspace",
-      "title": "Express Workflow Workspace",
-      "type": "workspace",
-      "canMaximize": true,
-      "canHide": true
-    }
+  "workspaces2": [
+    { "name": "custom-start-visit-workspace-form", "component": "visitFormWorkspace", "window": "ewf-start-visit" }
   ],
-  "modals": [
-    {
-      "component": "otpVerificationModal",
-      "name": "otp-verification-modal"
-    }, {
-      "component": "facilityDashboardAuthorizationModal",
-      "name": "facility-dashboard-authorization-form-modal"
-    }
+  "workspaceWindows2": [
+    { "name": "ewf-start-visit", "group": "ewf-patient-chart",    "width": "wider"
+ }
   ],
-  "workspaceGroups": [
-    {
-      "name": "express-workflow",
-      "members": [
-        "add-drug-order",
-        "order-basket",
-        "add-lab-order",
-        "express-workflow-workspace",
-        "start-visit-workspace-form"
-      ]
-    }
+  "workspaceGroups2": [
+    { "name": "ewf-patient-chart", "scopePattern": "/patient/([^/]+)/chart" }
+  ],
+  "modals": [
+    { "component": "otpVerificationModal", "name": "otp-verification-modal" },
+    { "component": "facilityDashboardAuthorizationModal", "name": "facility-dashboard-authorization-form-modal" }
   ]
-}
+}

package/src/shared/orders/OrdersTabs.tsx

@@ -13,7 +13,7 @@ type OrdersTabsProps = {
   resultsSlotName: string;
   orderTypeUuid: string;
   filter?: (o: Order) => boolean;
-  Table: React.ComponentType<{ orders: Order[] }>;
+  Table: React.ComponentType<{ orders: Order[]; mutateOrders: () => void }>;
 };
 
 export const OrdersTabs: React.FC<OrdersTabsProps> = ({
@@ -27,7 +27,12 @@ export const OrdersTabs: React.FC<OrdersTabsProps> = ({
 }) => {
   const { t } = useTranslation();
   const state = useMemo(() => ({ patientUuid, patient, basePath }), [patientUuid, patient, basePath]);
-  const { data: orders, isLoading, error } = usePatientOrders(patientUuid, 'any', orderTypeUuid, undefined, undefined);
+  const {
+    data: orders,
+    isLoading,
+    error,
+    mutate: mutateOrders,
+  } = usePatientOrders(patientUuid, 'any', orderTypeUuid, undefined, undefined);
 
   const filteredOrders = useMemo(() => (filter ? orders?.filter(filter) ?? [] : orders ?? []), [filter, orders]);
 
@@ -44,7 +49,7 @@ export const OrdersTabs: React.FC<OrdersTabsProps> = ({
         </TabList>
         <TabPanels>
           <TabPanel>
-            <Table orders={filteredOrders} />
+            <Table orders={filteredOrders} mutateOrders={mutateOrders} />
           </TabPanel>
           <TabPanel>
             <ExtensionSlot state={state} name={resultsSlotName} />

package/src/shared/patient-chart/patient-chart.resources.ts

@@ -3,17 +3,15 @@ import { useTranslation } from 'react-i18next';
 import {
   AssignedExtension,
   FetchResponse,
-  type Location,
   openmrsFetch,
   restBaseUrl,
   useAssignedExtensions,
   useConfig,
   useEmrConfiguration,
-  usePatient,
   useVisit,
 } from '@openmrs/esm-framework';
 import { ExpressWorkflowConfig } from '../../config-schema';
-import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
 
 export const usePatientChartTabs = (navigationPath: string, patientUuid: string, patient?: fhir.Patient) => {
   const { t } = useTranslation();
@@ -99,11 +97,10 @@ export const usePatientChartTabs = (navigationPath: string, patientUuid: string,
  * }
  */
 export const useCurrentPatientAdmissionEncounter = (patientUuid: string) => {
+  // TODO: use visit context store instead of useVisit. This is happening on every mount of the patient chart dashboard. Which is not efficient.
   const { currentVisit, error: visitError, isLoading: isLoadingVisit, mutate: mutateVisit } = useVisit(patientUuid);
   const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
-  const { inPatientVisitTypeUuid } = useConfig<{ inPatientVisitTypeUuid: string }>({
-    externalModuleName: '@kenyaemr/esm-ward-app',
-  });
+  const { inPatientVisitTypeUuid } = useConfig<ExpressWorkflowConfig>();
   // Admission or Tranfer encounter depending on wether patient was transfered or admitted directly
   const latestAdmisionEncounter = useMemo(() => {
     return currentVisit?.encounters?.find(
@@ -138,8 +135,7 @@ export const useCurrentPatientAdmissionEncounter = (patientUuid: string) => {
  * Show partography component when patient is a female patient, admitted to labour ward
  * @param patientUuid string
  */
-export const useShowPatography = (patientUuid: string) => {
-  const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUuid);
+export const useShowPatography = (patient: fhir.Patient) => {
   const isFemale = patient?.gender?.toLowerCase() === 'female';
 
   const {
@@ -147,7 +143,7 @@ export const useShowPatography = (patientUuid: string) => {
     error: admissionError,
     isLoading: isloadingAdmission,
     isPatientAdmitted,
-  } = useCurrentPatientAdmissionEncounter(patientUuid);
+  } = useCurrentPatientAdmissionEncounter(patient?.id);
   const {
     error: tagsError,
     isLoading: isloadingTags,
@@ -160,8 +156,8 @@ export const useShowPatography = (patientUuid: string) => {
   );
 
   return {
-    isLoading: isLoadingPatient || isLoadingPatient || isloadingAdmission || isloadingTags,
-    error: patientError ?? admissionError ?? tagsError,
+    isLoading: isloadingAdmission || isloadingTags,
+    error: admissionError ?? tagsError,
     showPartography: isFemale && isPatientAdmitted && admissionLocationIsLabourWard,
   };
 };
@@ -171,7 +167,7 @@ type Tag = { uuid: string; display: string; name: string; description: string };
 const useAdmissionLocationTags = (locationUuid?: string) => {
   const rep = 'custom:(tags:(uuid,display,name,description))';
   const url = `${restBaseUrl}/location/${locationUuid}?v=${rep}`;
-  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ tags: Array<Tag> }>>(
+  const { data, error, isLoading, mutate } = useSWRImmutable<FetchResponse<{ tags: Array<Tag> }>>(
     locationUuid ? url : null,
     openmrsFetch,
   );

package/src/shared/patient-chart/patient-summary-dashboard/patient-summary-dashboard.component.tsx

@@ -13,7 +13,6 @@ import {
 import { useTranslation } from 'react-i18next';
 import styles from './patient-summary-dashboard.scss';
 import ExtensionTabs, { ExtensionTabItem } from '../../tabs/extension-tabs.component';
-import { useSearchParams } from 'react-router-dom';
 import { useShowPatography } from '../patient-chart.resources';
 
 type PatientSummaryDashboardProps = {
@@ -24,7 +23,7 @@ type PatientSummaryDashboardProps = {
 const PatientSummaryDashboard: React.FC<PatientSummaryDashboardProps> = ({ patientUuid, patient }) => {
   const { t } = useTranslation();
   const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
-  const { showPartography } = useShowPatography(patientUuid);
+  const { showPartography } = useShowPatography(patient);
   const items: Array<ExtensionTabItem> = [
     {
       label: t('patientSummary', 'Patient Summary'),

package/src/shared/pin-put/pinput.component.test.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
 import PinPut from './pinput.component';
 
 describe('PinPut Component', () => {
   const defaultProps = {
     value: '',
-    onChange: jest.fn(),
+    onChange: vi.fn(),
     numInputs: 5,
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders with default props', () => {
@@ -37,7 +38,7 @@ describe('PinPut Component', () => {
   });
 
   it('calls onChange when input value changes', async () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const user = userEvent.setup();
 
     render(<PinPut {...defaultProps} onChange={onChange} />);
@@ -109,7 +110,7 @@ describe('PinPut Component', () => {
   });
 
   it('calls onComplete when all inputs are filled', async () => {
-    const onComplete = jest.fn();
+    const onComplete = vi.fn();
 
     // Test with a pre-filled value that matches the number of inputs
     render(<PinPut {...defaultProps} numInputs={3} onComplete={onComplete} value="123" />);
@@ -119,7 +120,7 @@ describe('PinPut Component', () => {
   });
 
   it('calls onFocus when input gains focus', async () => {
-    const onFocus = jest.fn();
+    const onFocus = vi.fn();
     const user = userEvent.setup();
 
     render(<PinPut {...defaultProps} onFocus={onFocus} />);
@@ -131,7 +132,7 @@ describe('PinPut Component', () => {
   });
 
   it('calls onBlur when input loses focus', async () => {
-    const onBlur = jest.fn();
+    const onBlur = vi.fn();
     const user = userEvent.setup();
 
     render(<PinPut {...defaultProps} onBlur={onBlur} />);