@openmrs/esm-appointments-app 5.2.2-pre.2628 → 5.2.2-pre.2638

package/dist/openmrs-esm-appointments-app.js.buildmanifest.json

@@ -80,10 +80,10 @@
       "initial": true,
       "entry": true,
       "recorded": false,
-      "size": 4544764,
+      "size": 4545133,
       "sizes": {
         "consume-shared": 252,
-        "javascript": 4523840,
+        "javascript": 4524209,
         "share-init": 252,
         "runtime": 20420
       },
@@ -100,7 +100,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "2badf0db23be8635",
+      "hash": "8ca36fc7fce574c4",
       "childrenByOrder": {}
     },
     {
@@ -396,9 +396,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 480471,
+      "size": 480840,
       "sizes": {
-        "javascript": 480303,
+        "javascript": 480672,
         "consume-shared": 168
       },
       "names": [],
@@ -412,7 +412,7 @@
       "auxiliaryFiles": [
         "636.js.map"
       ],
-      "hash": "d8eef044874f00d6",
+      "hash": "29e81b62ef741b77",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"check-in-appointment-modal","slot":"todays-appointment-slot","component":"checkInModal"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"early-appointments-panel","component":"earlyAppointments"}],"version":"5.2.2-pre.2628"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"check-in-appointment-modal","slot":"todays-appointment-slot","component":"checkInModal"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"early-appointments-panel","component":"earlyAppointments"}],"version":"5.2.2-pre.2638"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-appointments-app",
-  "version": "5.2.2-pre.2628",
+  "version": "5.2.2-pre.2638",
   "description": "Appointments front-end module for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-appointments-app.js",
   "main": "src/index.ts",

package/src/appointments-header/appointments-header.component.tsx

@@ -1,13 +1,13 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
+import { DatePicker, DatePickerInput, Dropdown, Layer } from '@carbon/react';
 import { Location } from '@carbon/react/icons';
 import { useSession } from '@openmrs/esm-framework';
-import AppointmentsIllustration from './appointments-illustration.component';
-import styles from './appointments-header.scss';
-import { DatePicker, DatePickerInput, Dropdown, Layer } from '@carbon/react';
-import dayjs from 'dayjs';
 import { changeStartDate, useAppointmentDate } from '../helpers';
 import { useAppointmentServices } from '../hooks/useAppointmentService';
+import AppointmentsIllustration from './appointments-illustration.component';
+import styles from './appointments-header.scss';
 
 interface AppointmentHeaderProps {
   title: string;
@@ -43,7 +43,7 @@ const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, onChange
             datePickerType="single">
             <DatePickerInput
               style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
-              id="date-picker-calendar-id"
+              id="appointment-date-picker"
               placeholder="DD-MMM-YYYY"
               labelText=""
               type="text"
@@ -51,24 +51,23 @@ const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, onChange
             />
           </DatePicker>
         </div>
-        {typeof onChange === 'function' && (
-          <div className={styles.dropdownContainer}>
-            <Layer>
-              <Dropdown
-                aria-label="Select service type"
-                id="selectServicesDropDown"
-                items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
-                itemToString={(item) => (item ? item.name : '')}
-                label={t('selectServiceType', 'Select service type')}
-                titleText={t('view', 'View')}
-                type="inline"
-                size="sm"
-                direction="bottom"
-                onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
-              />
-            </Layer>
-          </div>
-        )}
+        <div className={styles.dropdownContainer}>
+          {typeof onChange === 'function' && (
+            <Dropdown
+              className={styles.dropdown}
+              aria-label="Select service type"
+              id="serviceDropdown"
+              items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
+              itemToString={(item) => (item ? item.name : '')}
+              label={t('selectServiceType', 'Select service type')}
+              type="inline"
+              size="sm"
+              direction="bottom"
+              titleText={t('view', 'View')}
+              onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
+            />
+          )}
+        </div>
       </div>
     </div>
   );

package/src/appointments-header/appointments-header.scss

@@ -46,7 +46,9 @@
 
 .dropdownContainer {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  margin-top: 0.25rem;
 }
 
 .value {
@@ -70,6 +72,17 @@
   }
 }
 
+.dropdown {
+  :global(.cds--list-box__field) {
+    width: 14rem;
+    overflow: hidden;
+  }
+
+  :global(.cds--dropdown--inline .cds--list-box__menu) {
+    left: -4rem;
+  }
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .date-and-location {