@openmrs/esm-styleguide 8.0.1-pre.3504 → 8.0.1-pre.3511

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3504",
+  "version": "8.0.1-pre.3511",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -97,17 +97,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3504",
-    "@openmrs/esm-config": "8.0.1-pre.3504",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3504",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3504",
-    "@openmrs/esm-extensions": "8.0.1-pre.3504",
-    "@openmrs/esm-globals": "8.0.1-pre.3504",
-    "@openmrs/esm-navigation": "8.0.1-pre.3504",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3504",
-    "@openmrs/esm-state": "8.0.1-pre.3504",
-    "@openmrs/esm-translations": "8.0.1-pre.3504",
-    "@openmrs/esm-utils": "8.0.1-pre.3504",
+    "@openmrs/esm-api": "8.0.1-pre.3511",
+    "@openmrs/esm-config": "8.0.1-pre.3511",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3511",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3511",
+    "@openmrs/esm-extensions": "8.0.1-pre.3511",
+    "@openmrs/esm-globals": "8.0.1-pre.3511",
+    "@openmrs/esm-navigation": "8.0.1-pre.3511",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3511",
+    "@openmrs/esm-state": "8.0.1-pre.3511",
+    "@openmrs/esm-translations": "8.0.1-pre.3511",
+    "@openmrs/esm-utils": "8.0.1-pre.3511",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/left-nav/index.tsx

@@ -8,6 +8,7 @@ import {
   useAssignedExtensions,
   useLeftNavStore,
 } from '@openmrs/esm-react-utils';
+import { getCoreTranslation } from '@openmrs/esm-translations';
 import styles from './left-nav.module.scss';
 
 /**
@@ -36,7 +37,13 @@ export const LeftNavMenu = React.forwardRef<HTMLElement, LeftNavMenuProps>((prop
 
   if (props.isChildOfHeader && slotName && navMenuItems.length > 0) {
     return (
-      <SideNav ref={ref} expanded aria-label="Left navigation" className={styles.leftNav} {...props}>
+      <SideNav
+        aria-label={getCoreTranslation('leftNavigation', 'Left navigation')}
+        className={styles.leftNav}
+        expanded
+        ref={ref}
+        {...props}
+      >
         <ExtensionSlot name="global-nav-menu-slot" />
         {slotName ? (
           <RenderIfValueIsTruthy

package/src/location-picker/location-picker.component.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
-import { useOnVisible } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
+import React, { useCallback, useMemo, useState } from 'react';
 import { InlineLoading, RadioButton, RadioButtonGroup, RadioButtonSkeleton, Search } from '@carbon/react';
+import { getCoreTranslation } from '@openmrs/esm-translations';
+import { useOnVisible } from '@openmrs/esm-framework';
 import { useLocationByUuid, useLocations } from './location-picker.resource';
 import styles from './location-picker.module.scss';
 
@@ -20,10 +20,9 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
   locationsPerRequest = 50,
   onChange,
 }) => {
-  const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState<string>('');
 
-  let defaultLocation = useLocationByUuid(defaultLocationUuid).location;
+  const { location: defaultLocation } = useLocationByUuid(defaultLocationUuid);
 
   const {
     locations: fetchedLocations,
@@ -34,11 +33,11 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
   } = useLocations(locationTag, locationsPerRequest, searchTerm);
 
   const locations = useMemo(() => {
-    if (defaultLocation && !searchTerm) {
+    if (defaultLocation && !searchTerm && defaultLocationUuid) {
       return [defaultLocation, ...fetchedLocations?.filter(({ resource }) => resource.id !== defaultLocationUuid)];
     }
     return fetchedLocations;
-  }, [defaultLocation, fetchedLocations]);
+  }, [defaultLocation, fetchedLocations, defaultLocationUuid, searchTerm]);
 
   const search = (location: string) => {
     onChange();
@@ -55,14 +54,14 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
 
   const loadingIconRef = useOnVisible(loadMore);
 
-  const reloadIndex = hasMore ? locations.length - locationsPerRequest / 2 : -1;
+  const reloadIndex = hasMore ? Math.max(0, Math.floor(locations.length - locationsPerRequest / 2)) : -1;
 
   return (
     <div>
       <Search
-        labelText={t('searchForLocation', 'Search for a location')}
+        labelText={getCoreTranslation('searchForLocation')}
         id="search-1"
-        placeholder={t('searchForLocation', 'Search for a location')}
+        placeholder={getCoreTranslation('searchForLocation')}
         onChange={(event) => search(event.target.value)}
         size="lg"
       />
@@ -81,8 +80,8 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
               {locations?.length > 0 ? (
                 <RadioButtonGroup
                   name="loginLocations"
-                  onChange={(ev) => {
-                    onChange(ev?.toString());
+                  onChange={(value) => {
+                    onChange(value?.toString());
                   }}
                   orientation="vertical"
                   valueSelected={selectedLocationUuid}
@@ -93,20 +92,20 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
                       key={entry.resource.id}
                       id={entry.resource.id}
                       name={entry.resource.name}
-                      labelText={<span ref={i == reloadIndex ? loadingIconRef : null}>{entry.resource.name}</span>}
+                      labelText={<span ref={i === reloadIndex ? loadingIconRef : null}>{entry.resource.name}</span>}
                       value={entry.resource.id}
                     />
                   ))}
                 </RadioButtonGroup>
               ) : (
                 <div className={styles.emptyState}>
-                  <p className={styles.locationNotFound}>{t('noResultsToDisplay', 'No results to display')}</p>
+                  <p className={styles.locationNotFound}>{getCoreTranslation('noResultsToDisplay')}</p>
                 </div>
               )}
             </div>
             {loadingNewData && (
               <div className={styles.loadingIcon}>
-                <InlineLoading description={t('loading', 'Loading')} />
+                <InlineLoading description={getCoreTranslation('loading')} />
               </div>
             )}
           </>

package/src/notifications/actionable-notification.component.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ActionableNotification } from '@carbon/react';
+import { getCoreTranslation } from '@openmrs/esm-translations';
 /** @module @category UI */
 
 export interface ActionableNotificationProps {
@@ -49,9 +50,9 @@ export const ActionableNotificationComponent: React.FC<ActionableNotificationPro
     <ActionableNotification
       kind={(kind as ActionableNotificationType) || 'info'}
       actionButtonLabel={actionText}
-      ariaLabel="Closes actionable notification"
+      ariaLabel={getCoreTranslation('closesActionableNotification', 'Closes actionable notification')}
       onActionButtonClick={handleActionClick}
-      statusIconDescription="Actionable notification"
+      statusIconDescription={getCoreTranslation('actionableNotification', 'Actionable notification')}
       subtitle={subtitle}
       title={title}
       lowContrast={critical}

package/src/patient-banner/contact-details/patient-banner-contact-details.component.tsx

@@ -165,7 +165,11 @@ const Relationships: React.FC<{ patientId: string }> = ({ patientId }) => {
                   <div>{r.relationshipType}</div>
                   <div>
                     {`${r.relativeAge ? r.relativeAge : '--'} ${
-                      r.relativeAge ? (r.relativeAge === 1 ? 'yr' : 'yrs') : ''
+                      r.relativeAge
+                        ? r.relativeAge === 1
+                          ? getCoreTranslation('yearAbbreviation', 'yr')
+                          : getCoreTranslation('yearsAbbreviation', 'yrs')
+                        : ''
                     }`}
                   </div>
                 </li>

package/src/patient-photo/patient-photo.component.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import Avatar from 'react-avatar';
 import GeoPattern from 'geopattern';
 import { SkeletonIcon } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
+import { getCoreTranslation } from '@openmrs/esm-translations';
 import { usePatientPhoto } from './usePatientPhoto';
 import PlaceholderIcon from './placeholder-icon.component';
 import styles from './patient-photo.module.scss';
@@ -18,7 +18,6 @@ export interface PatientPhotoProps {
  * A component which displays the patient photo https://zeroheight.com/23a080e38/p/6663f3-patient-header. If there is no photo, it will display a generated avatar. The default size is 56px.
  */
 export function PatientPhoto({ patientUuid, patientName, alt }: PatientPhotoProps) {
-  const { t } = useTranslation();
   const { data: photo, isLoading } = usePatientPhoto(patientUuid);
   const [validImageSrc, setValidImageSrc] = useState<string | null>(null);
   const [isValidating, setIsValidating] = useState(false);
@@ -58,9 +57,9 @@ export function PatientPhoto({ patientUuid, patientName, alt }: PatientPhotoProp
     }
 
     return validImageSrc
-      ? t('patientPhotoAlt', 'Profile photo of {{patientName}}', { patientName })
-      : t('patientAvatarAlt', 'Avatar for {{patientName}}', { patientName });
-  }, [alt, validImageSrc, patientName, t]);
+      ? getCoreTranslation('patientPhotoAlt', 'Profile photo of {{patientName}}', { patientName })
+      : getCoreTranslation('patientAvatarAlt', 'Avatar for {{patientName}}', { patientName });
+  }, [alt, validImageSrc, patientName]);
 
   if (isLoading || isValidating) {
     return <SkeletonIcon className={styles.skeleton} data-testid="skeleton-icon" />;
@@ -69,7 +68,9 @@ export function PatientPhoto({ patientUuid, patientName, alt }: PatientPhotoProp
   if (photo?.imageSrc && !validImageSrc) {
     return (
       <PlaceholderIcon
-        aria-label={t('patientPhotoPlaceholder', 'Photo placeholder for {{patientName}}', { patientName })}
+        aria-label={getCoreTranslation('patientPhotoPlaceholder', 'Photo placeholder for {{patientName}}', {
+          patientName,
+        })}
       />
     );
   }

package/src/snackbars/snackbar.component.tsx

@@ -2,6 +2,7 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { ActionableNotification } from '@carbon/react';
+import { getCoreTranslation } from '@openmrs/esm-translations';
 import styles from './snackbar.module.scss';
 
 // Design documentation for Snackbars https://zeroheight.com/23a080e38/p/683580-notifications/t/468baf
@@ -84,7 +85,7 @@ export const Snackbar: React.FC<SnackbarProps> = ({ snackbar, closeSnackbar: rem
   return (
     <ActionableNotification
       actionButtonLabel={actionText}
-      aria-label="Close snackbar"
+      aria-label={getCoreTranslation('closeSnackbar', 'Close snackbar')}
       className={classnames(styles.slideIn, {
         [styles.animated]: applyAnimation,
         [styles.slideOut]: isClosing,
@@ -94,7 +95,7 @@ export const Snackbar: React.FC<SnackbarProps> = ({ snackbar, closeSnackbar: rem
       lowContrast={isLowContrast}
       onActionButtonClick={handleActionClick}
       onClose={closeSnackbar}
-      statusIconDescription="Snackbar notification"
+      statusIconDescription={getCoreTranslation('snackbarNotification', 'Snackbar notification')}
       subtitle={subtitle}
       title={title}
       {...props}

package/src/workspaces2/action-menu2/action-menu-button2.component.tsx

@@ -2,11 +2,11 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { Button, IconButton } from '@carbon/react';
-import { useLayoutType } from '@openmrs/esm-react-utils';
 import { SingleSpaContext } from 'single-spa-react';
+import { useLayoutType } from '@openmrs/esm-react-utils';
 import { type OpenedWindow } from '@openmrs/esm-extensions';
+import { launchWorkspace2, useWorkspace2Store } from '../workspace2';
 import styles from './action-menu-button2.module.scss';
-import { launchWorkspace2, useWorkspace2Store, useWorkspace2Context } from '../workspace2';
 
 interface TagsProps {
   getIcon: (props: object) => JSX.Element;

package/src/workspaces2/action-menu2/action-menu2.component.tsx

@@ -1,15 +1,15 @@
 /** @module @category Workspace */
 import React from 'react';
+import Parcel from 'single-spa-react/parcel';
+import { IconButton } from '@carbon/react';
 import { mountRootParcel } from 'single-spa';
 import { loadLifeCycles } from '@openmrs/esm-routes';
-import Parcel from 'single-spa-react/parcel';
-import { closeWorkspaceGroup2, useWorkspace2Store } from '../workspace2';
-import styles from './action-menu2.module.scss';
-import { type WorkspaceGroupDefinition2 } from '@openmrs/esm-globals';
-import { CloseIcon } from '../../icons';
 import { isDesktop, useLayoutType } from '@openmrs/esm-react-utils';
-import { IconButton } from '@carbon/react';
+import { type WorkspaceGroupDefinition2 } from '@openmrs/esm-globals';
 import { getCoreTranslation } from '@openmrs/esm-translations';
+import { closeWorkspaceGroup2, useWorkspace2Store } from '../workspace2';
+import { CloseIcon } from '../../icons';
+import styles from './action-menu2.module.scss';
 
 export interface ActionMenuProps {
   workspaceGroup: WorkspaceGroupDefinition2;

package/src/workspaces2/active-workspace-window.component.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import Parcel from 'single-spa-react/parcel';
+import { mountRootParcel, type ParcelConfig } from 'single-spa';
 import { InlineLoading } from '@carbon/react';
 import { type OpenedWindow, type OpenedWorkspace, workspace2Store } from '@openmrs/esm-extensions';
 import { loadLifeCycles } from '@openmrs/esm-routes';
 import { getCoreTranslation } from '@openmrs/esm-translations';
-import { mountRootParcel, type ParcelConfig } from 'single-spa';
-import Parcel from 'single-spa-react/parcel';
 import { promptForClosingWorkspaces, useWorkspace2Store } from './workspace2';
 import { type Workspace2DefinitionProps } from './workspace2.component';
 

package/src/workspaces2/workspace-windows-and-menu.component.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import classNames from 'classnames';
 import { createRoot } from 'react-dom/client';
 import { ActionMenu } from './action-menu2/action-menu2.component';
-import ActiveWorkspaceWindow from './active-workspace-window.component';
 import { useWorkspace2Store } from './workspace2';
+import ActiveWorkspaceWindow from './active-workspace-window.component';
 import styles from './workspace-windows-and-menu.module.scss';
-import classNames from 'classnames';
 
 export function renderWorkspaceWindowsAndMenu(target: HTMLElement | null) {
   if (target) {

package/src/workspaces2/workspace2-close-prompt.modal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
 import { getCoreTranslation } from '@openmrs/esm-translations';
 import styles from './workspace2-close-prompt.module.scss';
 
@@ -18,8 +17,6 @@ const Workspace2ClosePromptModal: React.FC<WorkspaceUnsavedChangesModal> = ({
   onCancel,
   affectedWorkspaceTitles,
 }) => {
-  const { t } = useTranslation();
-
   return (
     <>
       <ModalHeader closeModal={onCancel} title={getCoreTranslation('closeWorkspaces2PromptTitle')} />
@@ -33,10 +30,10 @@ const Workspace2ClosePromptModal: React.FC<WorkspaceUnsavedChangesModal> = ({
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={onCancel}>
-          {t('cancel', 'Cancel')}
+          {getCoreTranslation('cancel', 'Cancel')}
         </Button>
         <Button kind="danger" onClick={onConfirm}>
-          {t('discardChanges', 'Discard changes')}
+          {getCoreTranslation('discardChanges', 'Discard changes')}
         </Button>
       </ModalFooter>
     </>

package/src/workspaces2/workspace2.component.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, type ReactNode } from 'react';
+import classNames from 'classnames';
 import { Header, HeaderGlobalAction, HeaderGlobalBar, HeaderName } from '@carbon/react';
 import { DownToBottom, Maximize, Minimize } from '@carbon/react/icons';
 import { isDesktop, useLayoutType } from '@openmrs/esm-react-utils';
-import { getOpenedWindowIndexByWorkspace } from '@openmrs/esm-extensions';
 import { getCoreTranslation } from '@openmrs/esm-translations';
-import classNames from 'classnames';
+import { getOpenedWindowIndexByWorkspace } from '@openmrs/esm-extensions';
 import { ArrowRightIcon, CloseIcon } from '../icons';
-import styles from './workspace2.module.scss';
 import { useWorkspace2Store, useWorkspace2Context } from './workspace2';
+import styles from './workspace2.module.scss';
+
 interface Workspace2Props {
   title: string;
   children: ReactNode;