@olaboot/esm-form-engine-lib 4.1.0

package/src/hooks/useExternalFormAction.ts

@@ -0,0 +1,94 @@
+import { useEffect } from 'react';
+import { reportError } from '../utils/error-utils';
+import { useTranslation } from 'react-i18next';
+
+interface SubmitEventDetail {
+  formUuid: string;
+  patientUuid: string;
+  action: string;
+}
+
+interface UseExternalFormActionProps {
+  patientUuid: string;
+  formUuid: string;
+  setIsSubmitting: (boolean) => void;
+  setIsValidating: (boolean) => void;
+}
+
+/**
+ * useExternalFormAction
+ *
+ * A custom React hook that listens for a global `CustomEvent` (`ampath-form-action`) and triggers
+ * specific actions (such as form submission or validation) by updating external state via provided handlers.
+ *
+ * This is especially useful in scenarios where the Form Engine is embedded inside another application
+ * or UI shell and form behavior (e.g. validation or submission) needs to be triggered programmatically,
+ * such as from a toolbar button, modal footer, or an iframe parent.
+ *
+ * The hook ensures that the received event matches the current `formUuid` and `patientUuid` before executing any action.
+ *
+ * ### Supported Actions
+ * - `"onSubmit"` — Triggers form submission
+ * - `"validateForm"` — Triggers form validation
+ *
+ * @param patientUuid - The UUID of the current patient, used to verify that the action is intended for this instance.
+ * @param formUuid - The UUID of the current form, used to validate the target of the action.
+ * @param setIsSubmitting - A `setState` handler that initiates form submission when set to `true`.
+ * @param setIsValidating - A `setState` handler that initiates form validation when set to `true`.
+ *
+ * @example
+ *
+ * // Elsewhere in the app, dispatching the event:
+ * window.dispatchEvent(
+ *   new CustomEvent('ampath-form-action', {
+ *     detail: {
+ *       formUuid: '289417aa-31d5-3a06-bae8-a22d870bcf1d',
+ *       patientUuid: '9ee7a509-d639-4d91-979a-cd605b4d0ad1/chart',
+ *       action: 'onSubmit',
+ *     },
+ *   })
+ * );
+ */
+
+export function useExternalFormAction({
+  patientUuid,
+  formUuid,
+  setIsSubmitting,
+  setIsValidating,
+}: UseExternalFormActionProps) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const handleSubmit = (event: Event) => {
+      const customEvent = event as CustomEvent<SubmitEventDetail>;
+      const { formUuid: targetFormUuid, patientUuid: targetPatientUuid, action } = customEvent.detail;
+
+      if (!action || !targetFormUuid || !targetPatientUuid) {
+        reportError(
+          new Error('The form action event is missing required details (formUuid, patientUuid, or action).'),
+          t('formActionFailed', 'Form action failed'),
+        );
+        return;
+      }
+
+      if (targetFormUuid === formUuid && targetPatientUuid === patientUuid) {
+        switch (action) {
+          case 'onSubmit':
+            setIsSubmitting(true);
+            break;
+          case 'validateForm':
+            setIsValidating(true);
+            break;
+          default:
+            reportError(new Error(`Unsupported form action: "${action}"`), t('formActionFailed', 'Form action failed'));
+            break;
+        }
+      }
+    };
+
+    window.addEventListener('ampath-form-action', handleSubmit);
+    return () => {
+      window.removeEventListener('ampath-form-action', handleSubmit);
+    };
+  }, [setIsSubmitting, setIsValidating, formUuid, patientUuid]);
+}

package/src/hooks/useFormCollapse.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { FormExpanded, SessionMode } from '../types';
+
+export function useFormCollapse(sessionMode: SessionMode) {
+  const [isFormExpanded, setIsFormExpanded] = useState<FormExpanded>(undefined);
+
+  const hideFormCollapseToggle = useCallback(() => {
+    const HideFormCollapseToggle = new CustomEvent('openmrs:form-view-embedded', { detail: { value: false } });
+    window.dispatchEvent(HideFormCollapseToggle);
+  }, []);
+
+  const handleFormCollapseToggle = useCallback((event) => {
+    setIsFormExpanded(event.detail.value);
+  }, []);
+
+  useEffect(() => {
+    const FormCollapseToggleVisibleEvent = new CustomEvent('openmrs:form-view-embedded', {
+      detail: { value: sessionMode != 'embedded-view' },
+    });
+
+    window.dispatchEvent(FormCollapseToggleVisibleEvent);
+  }, [sessionMode]);
+
+  useEffect(() => {
+    window.addEventListener('openmrs:form-collapse-toggle', handleFormCollapseToggle);
+
+    return () => {
+      window.removeEventListener('openmrs:form-collapse-toggle', handleFormCollapseToggle);
+    };
+  }, []);
+
+  return {
+    isFormExpanded,
+    hideFormCollapseToggle,
+  };
+}

package/src/hooks/useFormFieldValidators.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { getRegisteredValidator } from '../registry/registry';
+import { type FormField, type FormFieldValidator } from '../types';
+
+export function useFormFieldValidators(fields: FormField[]) {
+  const [validators, setValidators] = useState<Record<string, FormFieldValidator>>();
+
+  useEffect(() => {
+    const supportedTypes = new Set<string>();
+    fields.forEach((field) => {
+      field.validators?.forEach((validator) => supportedTypes.add(validator.type));
+    });
+    const supportedTypesArray = Array.from(supportedTypes);
+    Promise.all(supportedTypesArray.map((type) => getRegisteredValidator(type))).then((validators) => {
+      setValidators(
+        Object.assign({}, ...validators.map((validator, index) => ({ [supportedTypesArray[index]]: validator }))),
+      );
+    });
+  }, [fields]);
+
+  return validators;
+}

package/src/hooks/useFormFieldValueAdapters.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { type FormField, type FormFieldValueAdapter } from '../types';
+import { getRegisteredFieldValueAdapter } from '../registry/registry';
+
+export const useFormFieldValueAdapters = (fields: FormField[]) => {
+  const [adapters, setAdapters] = useState<Record<string, FormFieldValueAdapter>>({});
+
+  useEffect(() => {
+    const supportedTypes = new Set<string>();
+    fields.forEach((field) => {
+      supportedTypes.add(field.type);
+    });
+    const supportedTypesArray = Array.from(supportedTypes);
+    Promise.all(supportedTypesArray.map((type) => getRegisteredFieldValueAdapter(type))).then((adapters) => {
+      const adaptersByType = supportedTypesArray.map((type, index) => ({
+        [type]: adapters[index],
+      }));
+      setAdapters(Object.assign({}, ...adaptersByType));
+    });
+  }, [fields]);
+
+  return adapters;
+};

package/src/hooks/useFormFields.ts

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { type FormField, type FormSchema } from '../types';
+
+export function useFormFields(form: FormSchema): { formFields: FormField[]; conceptReferences: Set<string> } {
+  const [flattenedFields, conceptReferences] = useMemo(() => {
+    const flattenedFieldsTemp: FormField[] = [];
+    const conceptReferencesTemp = new Set<string>();
+
+    const processFlattenedFields = (
+      fields: FormField[],
+    ): {
+      flattenedFields: FormField[];
+      conceptReferences: Set<string>;
+    } => {
+      const flattenedFields: FormField[] = [];
+      const conceptReferences = new Set<string>();
+
+      const processField = (field: FormField, parentGroupId?: string) => {
+        // Add group ID to nested fields if applicable
+        const processedField = parentGroupId ? { ...field, meta: { ...field.meta, groupId: parentGroupId } } : field;
+
+        // Add field to flattened list
+        flattenedFields.push(processedField);
+
+        // Collect concept references
+        if (processedField.questionOptions?.concept) {
+          conceptReferences.add(processedField.questionOptions.concept);
+        }
+
+        // Collect concept references from answers
+        processedField.questionOptions?.answers?.forEach((answer) => {
+          if (answer.concept) {
+            conceptReferences.add(answer.concept);
+          }
+        });
+
+        // Recursively process nested questions for obsGroup
+        if (processedField.type === 'obsGroup' && processedField.questions) {
+          processedField.questions.forEach((nestedField) => {
+            processField(nestedField, processedField.id);
+          });
+        }
+      };
+
+      // Process all input fields
+      fields.forEach((field) => processField(field));
+
+      return { flattenedFields, conceptReferences };
+    };
+
+    form.pages?.forEach((page) =>
+      page.sections?.forEach((section) => {
+        if (section.questions) {
+          const { flattenedFields, conceptReferences } = processFlattenedFields(section.questions);
+          flattenedFieldsTemp.push(...flattenedFields);
+          conceptReferences.forEach((conceptReference) => conceptReferencesTemp.add(conceptReference));
+        }
+      }),
+    );
+
+    return [flattenedFieldsTemp, conceptReferencesTemp];
+  }, [form]);
+
+  return { formFields: flattenedFields, conceptReferences };
+}

package/src/hooks/useFormFieldsMeta.ts

@@ -0,0 +1,48 @@
+import { type FormField } from '../types';
+import { useMemo } from 'react';
+import { codedTypes } from '../constants';
+import { findConceptByReference } from '../utils/form-helper';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
+export function useFormFieldsMeta(rawFormFields: FormField[], concepts: OpenmrsResource[]) {
+  const formFields = useMemo(() => {
+    if (rawFormFields.length && concepts?.length) {
+      return rawFormFields.map((field) => {
+        const matchingConcept = findConceptByReference(field.questionOptions.concept, concepts);
+        field.questionOptions.concept = matchingConcept ? matchingConcept.uuid : field.questionOptions.concept;
+        field.label = field.label ? field.label : matchingConcept?.display;
+        if (
+          codedTypes.includes(field.questionOptions.rendering) &&
+          !field.questionOptions.answers?.length &&
+          matchingConcept?.conceptClass?.display === 'Question' &&
+          matchingConcept?.answers?.length
+        ) {
+          field.questionOptions.answers = matchingConcept.answers.map((answer) => {
+            return {
+              concept: answer?.uuid,
+              label: answer?.display,
+            };
+          });
+        }
+        field.meta = {
+          ...(field.meta || {}),
+          concept: matchingConcept,
+        };
+        if (field.questionOptions.answers) {
+          field.questionOptions.answers = field.questionOptions.answers.map((answer) => {
+            const matchingAnswerConcept = findConceptByReference(answer.concept, concepts);
+            return {
+              ...answer,
+              concept: matchingAnswerConcept ? matchingAnswerConcept.uuid : answer.concept,
+              label: answer.label ? answer.label : matchingAnswerConcept?.display,
+            };
+          });
+        }
+        return field;
+      });
+    }
+    return rawFormFields ?? [];
+  }, [concepts, rawFormFields]);
+
+  return formFields;
+}

package/src/hooks/useFormJson.ts

@@ -0,0 +1,257 @@
+import { useEffect, useState } from 'react';
+import { type FormSchemaTransformer, type FormSchema, type FormSection, type ReferencedForm , type PreFilledQuestions } from '../types';
+import { isTrue } from '../utils/boolean-utils';
+import { applyFormIntent } from '../utils/forms-loader';
+import { fetchOpenMRSForm, fetchClobData } from '../api';
+import { getRegisteredFormSchemaTransformers } from '../registry/registry';
+import { formEngineAppName } from '../globals';
+
+export function useFormJson(
+  formUuid: string,
+  rawFormJson: any,
+  encounterUuid: string,
+  formSessionIntent: string,
+  preFilledQuestions?: PreFilledQuestions,
+) {
+  const [formJson, setFormJson] = useState<FormSchema>(null);
+  const [error, setError] = useState(validateFormsArgs(formUuid, rawFormJson));
+
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    const setFormJsonWithTranslations = (formJson: FormSchema) => {
+      if (formJson?.translations) {
+        const language = window.i18next.language;
+        window.i18next.addResourceBundle(language, formEngineAppName, formJson.translations, true, true);
+      }
+      setFormJson(formJson);
+    };
+
+    loadFormJson(formUuid, rawFormJson, formSessionIntent, preFilledQuestions)
+      .then((formJson) => {
+        setFormJsonWithTranslations({ ...formJson, encounter: encounterUuid });
+      })
+      .catch((error) => {
+        if (error.name !== 'AbortError') {
+          console.error(error);
+          setError(new Error('Error loading form JSON: ' + error.message));
+        }
+      });
+
+    return () => {
+      abortController.abort();
+    };
+  }, [formSessionIntent, formUuid, rawFormJson, encounterUuid]);
+
+  return {
+    formJson,
+    isLoading: !formJson && !error,
+    formError: error,
+  };
+}
+
+/**
+ * Fetches a form JSON schema from OpenMRS and recursively fetches its subForms if they available.
+ *
+ * If `rawFormJson` is provided, it will be used as the raw form JSON object. Otherwise, the form JSON will be fetched from OpenMRS using the `formIdentifier` parameter.
+ *
+ * @param rawFormJson The raw form JSON object to be used if `formIdentifier` is not provided.
+ * @param formIdentifier The UUID or name of the form to be fetched from OpenMRS if `rawFormJson` is not provided.
+ * @param formSessionIntent An optional parameter that represents the current intent.
+ * @param preFilledQuestions An optional parameter that represents the pre-filled questions.
+ * @returns A well-built form object that might include subForms.
+ */
+export async function loadFormJson(
+  formIdentifier: string,
+  rawFormJson?: FormSchema,
+  formSessionIntent?: string,
+  preFilledQuestions?: PreFilledQuestions,
+): Promise<FormSchema> {
+  const openmrsFormResponse = await fetchOpenMRSForm(formIdentifier);
+  const clobDataResponse = await fetchClobData(openmrsFormResponse);
+  const transformers = await getRegisteredFormSchemaTransformers();
+  const formJson: FormSchema = clobDataResponse
+    ? { ...clobDataResponse, uuid: openmrsFormResponse.uuid }
+    : parseFormJson(rawFormJson);
+
+  // Sub forms
+  const subFormRefs = extractSubFormRefs(formJson);
+  const subForms = await loadSubForms(subFormRefs, formSessionIntent);
+  updateFormJsonWithSubForms(formJson, subForms);
+
+  // Form components
+  const formComponentsRefs = getReferencedForms(formJson);
+  const resolvedFormComponents = await loadFormComponents(formComponentsRefs);
+  const formNameToAliasMap = formComponentsRefs.reduce((acc, form) => {
+    acc[form.formName] = form.alias;
+    return acc;
+  }, {});
+
+  const formComponents = mapFormComponents(resolvedFormComponents);
+  updateFormJsonWithComponents(formJson, formComponents, formNameToAliasMap);
+  return refineFormJson(formJson, transformers, formSessionIntent, preFilledQuestions);
+}
+
+function extractSubFormRefs(formJson: FormSchema): string[] {
+  return formJson.pages
+    .filter((page) => page.isSubform && !page.subform.form && page.subform?.name)
+    .map((page) => page.subform?.name);
+}
+
+async function loadSubForms(subFormRefs: string[], formSessionIntent?: string): Promise<FormSchema[]> {
+  return Promise.all(subFormRefs.map((subForm) => loadFormJson(subForm, null, formSessionIntent)));
+}
+
+function updateFormJsonWithSubForms(formJson: FormSchema, subForms: FormSchema[]): void {
+  subForms.forEach((subForm) => {
+    const matchingPage = formJson.pages.find((page) => page.subform?.name === subForm.name);
+    if (matchingPage) {
+      matchingPage.subform.form = subForm;
+    }
+  });
+}
+
+function validateFormsArgs(formUuid: string, rawFormJson: any): Error {
+  if (!formUuid && !rawFormJson) {
+    return new Error('InvalidArgumentsErr: Neither formUuid nor formJson was provided');
+  }
+  if (formUuid && rawFormJson) {
+    return new Error('InvalidArgumentsErr: Both formUuid and formJson cannot be provided at the same time.');
+  }
+}
+
+/**
+ * Refines the input form JSON object by parsing it, removing inline sub forms, applying form schema transformers, setting the encounter type, and applying form intents if provided.
+ * @param {any} formJson - The input form JSON object or string.
+ * @param {string} [formSessionIntent] - The optional form session intent.
+ * @param {PreFilledQuestions} [preFilledQuestions] - The optional pre-filled questions.
+ * @returns {FormSchema} - The refined form JSON object of type FormSchema.
+ */
+function refineFormJson(
+  formJson: any,
+  schemaTransformers: FormSchemaTransformer[] = [],
+  formSessionIntent?: string,
+  preFilledQuestions?: PreFilledQuestions,
+): FormSchema {
+  removeInlineSubForms(formJson, formSessionIntent);
+  // apply form schema transformers
+  schemaTransformers.reduce((draftForm, transformer) => transformer.transform(draftForm, preFilledQuestions), formJson);
+  setEncounterType(formJson);
+  return applyFormIntent(formSessionIntent, formJson);
+}
+
+/**
+ * Parses the input form JSON and returns a deep copy of the object.
+ * @param {any} formJson - The input form JSON object or string.
+ * @returns {FormSchema} - The parsed form JSON object of type FormSchema.
+ */
+function parseFormJson(formJson: any): FormSchema {
+  return typeof formJson === 'string' ? JSON.parse(formJson) : JSON.parse(JSON.stringify(formJson));
+}
+
+/**
+ * Removes inline sub forms from the form JSON and replaces them with their pages if the encounter type matches.
+ * @param {FormSchema} formJson - The input form JSON object of type FormSchema.
+ * @param {string} formSessionIntent - The form session intent.
+ */
+function removeInlineSubForms(formJson: FormSchema, formSessionIntent: string): void {
+  for (let i = formJson.pages.length - 1; i >= 0; i--) {
+    const page = formJson.pages[i];
+    if (
+      isTrue(page.isSubform) &&
+      !isTrue(page.isHidden) &&
+      page.subform?.form?.encounterType === formJson.encounterType
+    ) {
+      const nonSubformPages = page.subform.form.pages.filter((page) => !isTrue(page.isSubform));
+      formJson.pages.splice(i, 1, ...refineFormJson(page.subform.form, [], formSessionIntent).pages);
+    }
+  }
+}
+
+/**
+ * Sets the encounter type for the form JSON if it's provided through the `encounter` attribute.
+ * @param {FormSchema} formJson - The input form JSON object of type FormSchema.
+ */
+function setEncounterType(formJson: FormSchema): void {
+  if (formJson.encounter && typeof formJson.encounter === 'string' && !formJson.encounterType) {
+    formJson.encounterType = formJson.encounter;
+    delete formJson.encounter;
+  }
+}
+
+/**
+ * Functions to support reusable Form Components
+ */
+function getReferencedForms(formJson: FormSchema): Array<ReferencedForm> {
+  const referencedForms: Array<any> = formJson?.referencedForms;
+  if (!referencedForms) {
+    return [];
+  }
+  return referencedForms;
+}
+
+async function loadFormComponents(formComponentRefs: Array<ReferencedForm>): Promise<FormSchema[]> {
+  return Promise.all(formComponentRefs.map((formComponent) => loadFormJson(formComponent.formName, null, null)));
+}
+
+function mapFormComponents(formComponents: Array<FormSchema>): Map<string, FormSchema> {
+  const formComponentsMap: Map<string, FormSchema> = new Map();
+
+  formComponents.forEach((formComponent) => {
+    formComponentsMap.set(formComponent.name, formComponent);
+  });
+
+  return formComponentsMap;
+}
+
+function updateFormJsonWithComponents(
+  formJson: FormSchema,
+  formComponents: Map<string, FormSchema>,
+  formNameToAliasMap: Record<string, string>,
+): void {
+  formComponents.forEach((component, targetFormName) => {
+    //loop through pages and search sections for reference key
+    formJson.pages.forEach((page) => {
+      if (page.sections) {
+        page.sections.forEach((section) => {
+          if (
+            section.reference &&
+            (section.reference.form === targetFormName || section.reference.form === formNameToAliasMap[targetFormName])
+          ) {
+            // resolve referenced component section
+            let resolvedFormSection = getReferencedFormSection(section, component);
+            // add resulting referenced component section to section
+            Object.assign(section, resolvedFormSection);
+          }
+        });
+      }
+    });
+  });
+}
+
+function getReferencedFormSection(formSection: FormSection, formComponent: FormSchema): FormSection {
+  let referencedFormSection: FormSection;
+
+  // search for component page and section reference from component
+  let matchingComponentPage = formComponent.pages.filter((page) => page.label === formSection.reference.page);
+  if (matchingComponentPage.length > 0) {
+    let matchingComponentSection = matchingComponentPage[0].sections.filter(
+      (componentSection) => componentSection.label === formSection.reference.section,
+    );
+    if (matchingComponentSection.length > 0) {
+      referencedFormSection = matchingComponentSection[0];
+    }
+  }
+
+  return filterExcludedQuestions(referencedFormSection, formSection.reference);
+}
+
+function filterExcludedQuestions(formSection: FormSection, reference: any): FormSection {
+  if (reference?.excludeQuestions) {
+    const excludeQuestions = reference.excludeQuestions;
+    formSection.questions = formSection.questions.filter((question) => {
+      return !excludeQuestions.includes(question.id);
+    });
+  }
+  return formSection;
+}

package/src/hooks/useFormStateHelpers.ts

@@ -0,0 +1,72 @@
+import { type Dispatch, useCallback } from 'react';
+import { type FormField, type FormSchema } from '../types';
+import { type Action } from '../components/renderer/form/state';
+import { cloneDeep } from 'lodash-es';
+import { updateFormSectionReferences } from '../utils/common-utils';
+
+export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: FormField[]) {
+  const addFormField = useCallback((field: FormField) => {
+    dispatch({ type: 'ADD_FORM_FIELD', value: field });
+  }, []);
+  const updateFormField = useCallback(
+    (field: FormField) => {
+      if (field.meta.groupId) {
+        const group = formFields.find((f) => f.id === field.meta.groupId);
+        if (group) {
+          group.questions = group.questions.map((child) => {
+            if (child.id === field.id) {
+              return field;
+            }
+            return child;
+          });
+          updateFormField(group);
+        }
+      }
+      dispatch({ type: 'UPDATE_FORM_FIELD', value: cloneDeep(field) });
+    },
+    [formFields],
+  );
+
+  const getFormField = useCallback(
+    (fieldId: string) => {
+      return formFields.find((field) => field.id === fieldId);
+    },
+    [formFields.length],
+  );
+
+  const removeFormField = useCallback((fieldId: string) => {
+    dispatch({ type: 'REMOVE_FORM_FIELD', value: fieldId });
+  }, []);
+
+  const setInvalidFields = useCallback((fields: FormField[]) => {
+    dispatch({ type: 'SET_INVALID_FIELDS', value: fields });
+  }, []);
+
+  const addInvalidField = useCallback((field: FormField) => {
+    dispatch({ type: 'ADD_INVALID_FIELD', value: field });
+  }, []);
+
+  const removeInvalidField = useCallback((fieldId: string) => {
+    dispatch({ type: 'REMOVE_INVALID_FIELD', value: fieldId });
+  }, []);
+
+  const setForm = useCallback((formJson: FormSchema) => {
+    dispatch({ type: 'SET_FORM_JSON', value: updateFormSectionReferences(formJson) });
+  }, []);
+
+  const setDeletedFields = useCallback((fields: FormField[]) => {
+    dispatch({ type: 'SET_DELETED_FIELDS', value: fields });
+  }, []);
+
+  return {
+    addFormField,
+    updateFormField,
+    getFormField,
+    removeFormField,
+    setInvalidFields,
+    addInvalidField,
+    removeInvalidField,
+    setForm,
+    setDeletedFields,
+  };
+}

package/src/hooks/useFormWorkspaceSize.ts

@@ -0,0 +1,52 @@
+import { useLayoutEffect, useMemo, useState } from 'react';
+import { pxToRem } from '../utils/common-utils';
+
+/**
+ * The width of the supported workspace variants in rem
+ */
+const narrowWorkspaceWidth = 26.25;
+const widerWorkspaceWidth = 32.25;
+const extraWideWorkspaceWidth = 48.25;
+
+type WorkspaceSize = 'narrow' | 'wider' | 'extra-wide' | 'ultra-wide';
+
+/**
+ * This hook evaluates the size of the current workspace based on the width of the container element
+ */
+export function useFormWorkspaceSize(rootRef: React.RefObject<HTMLDivElement>): WorkspaceSize {
+  // width in rem
+  const [containerWidth, setContainerWidth] = useState(0);
+  const size = useMemo(() => {
+    if (containerWidth <= narrowWorkspaceWidth) {
+      return 'narrow';
+    } else if (containerWidth <= widerWorkspaceWidth) {
+      return 'wider';
+    } else if (containerWidth <= extraWideWorkspaceWidth) {
+      return 'extra-wide';
+    } else {
+      return 'ultra-wide';
+    }
+  }, [containerWidth]);
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      const containerWidth = rootRef.current?.parentElement?.offsetWidth;
+      const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+      containerWidth && setContainerWidth(pxToRem(containerWidth, rootFontSize));
+    };
+    handleResize();
+    const resizeObserver = new ResizeObserver((entries) => {
+      handleResize();
+    });
+
+    if (rootRef.current?.parentElement) {
+      resizeObserver.observe(rootRef.current?.parentElement);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [rootRef]);
+
+  return size;
+}