@openmrs/esm-implementer-tools-app 5.3.3-pre.1237 → 5.3.3-pre.1247

package/src/configuration/interactive-editor/display-value.scss

@@ -1,5 +1,5 @@
-@use "@carbon/styles/scss/spacing";
-@import "../../implementer-tools.styles.scss";
+@use '@carbon/styles/scss/spacing';
+@import '../../implementer-tools.styles.scss';
 
 .smallListCell {
   padding: spacing.$spacing-03;

package/src/configuration/interactive-editor/display-value.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { StructuredListCell, StructuredListRow } from "@carbon/react";
-import styles from "./display-value.scss";
+import React from 'react';
+import { StructuredListCell, StructuredListRow } from '@carbon/react';
+import styles from './display-value.scss';
 
 export interface DisplayValueProps {
   value: any;
@@ -11,34 +11,30 @@ export function DisplayValue({ value }: DisplayValueProps) {
   return (
     <div>
       {Array.isArray(value)
-        ? typeof value[0] === "object"
+        ? typeof value[0] === 'object'
           ? value.map((v, i) => (
               <StructuredListRow key={`${v}-${i}`}>
+                <StructuredListCell className={styles.smallListCell}>{i + 1}</StructuredListCell>
                 <StructuredListCell className={styles.smallListCell}>
-                  {i + 1}
+                  <DisplayValue value={v} />
                 </StructuredListCell>
+              </StructuredListRow>
+            ))
+          : `[ ${value.join(', ')} ]`
+        : typeof value === 'object' && value !== null
+          ? Object.entries(value).map(([k, v], i) => (
+              <StructuredListRow key={`${k}-${i}`}>
+                <StructuredListCell className={styles.smallListCell}>{k}</StructuredListCell>
                 <StructuredListCell className={styles.smallListCell}>
                   <DisplayValue value={v} />
                 </StructuredListCell>
               </StructuredListRow>
             ))
-          : `[ ${value.join(", ")} ]`
-        : typeof value === "object" && value !== null
-        ? Object.entries(value).map(([k, v], i) => (
-            <StructuredListRow key={`${k}-${i}`}>
-              <StructuredListCell className={styles.smallListCell}>
-                {k}
-              </StructuredListCell>
-              <StructuredListCell className={styles.smallListCell}>
-                <DisplayValue value={v} />
-              </StructuredListCell>
-            </StructuredListRow>
-          ))
-        : typeof value === "string" || typeof value === "number"
-        ? value
-        : value == null
-        ? "none"
-        : JSON.stringify(value)}
+          : typeof value === 'string' || typeof value === 'number'
+            ? value
+            : value == null
+              ? 'none'
+              : JSON.stringify(value)}
     </div>
   );
 }

package/src/configuration/interactive-editor/editable-value.component.tsx

@@ -1,21 +1,15 @@
-import React, { useState, useEffect, useRef } from "react";
-import isEqual from "lodash-es/isEqual";
-import unset from "lodash-es/unset";
-import cloneDeep from "lodash-es/cloneDeep";
-import styles from "./editable-value.styles.scss";
-import { Button } from "@carbon/react";
-import { Edit, Reset } from "@carbon/react/icons";
-import {
-  ConfigValue,
-  Validator,
-  Type,
-  Config,
-  temporaryConfigStore,
-} from "@openmrs/esm-framework/src/internal";
-import { ValueEditor, CustomValueType } from "./value-editor";
-import { implementerToolsStore, ImplementerToolsStore } from "../../store";
-import { DisplayValue } from "./display-value";
-import { useTranslation } from "react-i18next";
+import React, { useState, useEffect, useRef } from 'react';
+import isEqual from 'lodash-es/isEqual';
+import unset from 'lodash-es/unset';
+import cloneDeep from 'lodash-es/cloneDeep';
+import styles from './editable-value.styles.scss';
+import { Button } from '@carbon/react';
+import { Edit, Reset } from '@carbon/react/icons';
+import { ConfigValue, Validator, Type, Config, temporaryConfigStore } from '@openmrs/esm-framework/src/internal';
+import { ValueEditor, CustomValueType } from './value-editor';
+import { implementerToolsStore, ImplementerToolsStore } from '../../store';
+import { DisplayValue } from './display-value';
+import { useTranslation } from 'react-i18next';
 
 export interface EditableValueProps {
   path: Array<string>;
@@ -33,11 +27,7 @@ export interface ConfigValueDescriptor {
   _type?: Type;
 }
 
-export default function EditableValue({
-  path,
-  element,
-  customType,
-}: EditableValueProps) {
+export default function EditableValue({ path, element, customType }: EditableValueProps) {
   const [valueString, setValueString] = useState<string>();
   const [editing, setEditing] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -58,10 +48,7 @@ export default function EditableValue({
 
   useEffect(() => {
     const update = (state: ImplementerToolsStore) => {
-      if (
-        state.configPathBeingEdited &&
-        isEqual(state.configPathBeingEdited, path)
-      ) {
+      if (state.configPathBeingEdited && isEqual(state.configPathBeingEdited, path)) {
         focusOnConfigPathBeingEdited();
       }
     };
@@ -100,11 +87,7 @@ export default function EditableValue({
               handleSave={(val) => {
                 try {
                   const result = JSON.parse(val);
-                  const tempConfigUpdate = set(
-                    cloneDeep(temporaryConfigStore.getState()),
-                    ["config", ...path],
-                    result
-                  );
+                  const tempConfigUpdate = set(cloneDeep(temporaryConfigStore.getState()), ['config', ...path], result);
                   temporaryConfigStore.setState(tempConfigUpdate);
                   setValueString(val);
                   closeEditor();
@@ -121,29 +104,21 @@ export default function EditableValue({
             <Button
               kind="ghost"
               size="sm"
-              iconDescription={t("editValueButtonText", "Edit")}
+              iconDescription={t('editValueButtonText', 'Edit')}
               onClick={() => setEditing(true)}
               ref={activeConfigRef}
               renderIcon={(props) => <Edit size={16} {...props} />}
               hasIconOnly
             />
-            {element._source == "temporary config" ? (
+            {element._source == 'temporary config' ? (
               <Button
                 renderIcon={(props) => <Reset size={16} {...props} />}
                 size="sm"
                 kind="ghost"
-                iconDescription={t(
-                  "resetToDefaultValueButtonText",
-                  "Reset to default"
-                )}
+                iconDescription={t('resetToDefaultValueButtonText', 'Reset to default')}
                 hasIconOnly
                 onClick={() => {
-                  temporaryConfigStore.setState(
-                    unset(temporaryConfigStore.getState(), [
-                      "config",
-                      ...path,
-                    ]) as any
-                  );
+                  temporaryConfigStore.setState(unset(temporaryConfigStore.getState(), ['config', ...path]) as any);
                 }}
               />
             ) : null}

package/src/configuration/interactive-editor/editable-value.styles.scss

@@ -1,5 +1,5 @@
-@use "@carbon/styles/scss/spacing";
-@import "../../implementer-tools.styles.scss";
+@use '@carbon/styles/scss/spacing';
+@import '../../implementer-tools.styles.scss';
 
 .secretButton {
   background: none;

package/src/configuration/interactive-editor/extension-configure-tree.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import EditableValue from "./editable-value.component";
-import { ExtensionSlotConfigureValueObject } from "@openmrs/esm-framework";
+import React from 'react';
+import EditableValue from './editable-value.component';
+import { ExtensionSlotConfigureValueObject } from '@openmrs/esm-framework';
 
 export interface ExtensionConfigureTreeProps {
   moduleName: string;
@@ -8,18 +8,14 @@ export interface ExtensionConfigureTreeProps {
   config?: ExtensionSlotConfigureValueObject;
 }
 
-export function ExtensionConfigureTree({
-  moduleName,
-  slotName,
-  config,
-}: ExtensionConfigureTreeProps) {
+export function ExtensionConfigureTree({ moduleName, slotName, config }: ExtensionConfigureTreeProps) {
   return (
     <EditableValue
-      path={[moduleName, slotName, "configure"]}
+      path={[moduleName, slotName, 'configure']}
       element={
         config && Object.keys(config).length
-          ? { _value: config, _source: "", _default: {} }
-          : { _value: undefined, _source: "default", _default: {} }
+          ? { _value: config, _source: '', _default: {} }
+          : { _value: undefined, _source: 'default', _default: {} }
       }
       customType="configure"
     />

package/src/configuration/interactive-editor/extension-slots-config-tree.tsx

@@ -1,13 +1,10 @@
-import React from "react";
-import EditableValue from "./editable-value.component";
-import isEqual from "lodash-es/isEqual";
-import {
-  ExtensionSlotConfigureValueObject,
-  useAssignedExtensions,
-} from "@openmrs/esm-framework";
-import { ExtensionConfigureTree } from "./extension-configure-tree";
-import { Subtree } from "./layout/subtree.component";
-import { implementerToolsStore } from "../../store";
+import React from 'react';
+import EditableValue from './editable-value.component';
+import isEqual from 'lodash-es/isEqual';
+import { ExtensionSlotConfigureValueObject, useAssignedExtensions } from '@openmrs/esm-framework';
+import { ExtensionConfigureTree } from './extension-configure-tree';
+import { Subtree } from './layout/subtree.component';
+import { implementerToolsStore } from '../../store';
 
 interface ExtensionSlotsConfigTreeProps {
   extensionsConfig: { [key: string]: any };
@@ -31,17 +28,14 @@ interface ExtensionConfigureDescriptor {
   _source: string;
 }
 
-export function ExtensionSlotsConfigTree({
-  extensionsConfig,
-  moduleName,
-}: ExtensionSlotsConfigTreeProps) {
+export function ExtensionSlotsConfigTree({ extensionsConfig, moduleName }: ExtensionSlotsConfigTreeProps) {
   return extensionsConfig && Object.keys(extensionsConfig).length ? (
     <Subtree label="extension slots" leaf={false}>
       {Object.keys(extensionsConfig).map((slotName) => (
         <ExtensionSlotConfigTree
           key={slotName}
           config={extensionsConfig?.[slotName]}
-          path={[moduleName, "extensionSlots", slotName]}
+          path={[moduleName, 'extensionSlots', slotName]}
         />
       ))}
     </Subtree>
@@ -69,23 +63,17 @@ function ExtensionSlotConfigTree({ config, path }: ExtensionSlotConfigProps) {
     }
   }
 
-  function setActiveItemDescriptionOnMouseEnter(
-    moduleName,
-    slotName,
-    key,
-    value
-  ) {
+  function setActiveItemDescriptionOnMouseEnter(moduleName, slotName, key, value) {
     if (!implementerToolsStore.getState().configPathBeingEdited) {
       implementerToolsStore.setState({
         activeItemDescription: {
           path: [moduleName, slotName, key],
           source: value?._source,
           description: {
-            add: "Add an extension to this slot.",
-            remove: "Remove an extension from this slot.",
-            order: "Reorder the extensions in this slot.",
-            configure:
-              "Pass a configuration object directly to one of the extensions in this slot.",
+            add: 'Add an extension to this slot.',
+            remove: 'Remove an extension from this slot.',
+            order: 'Reorder the extensions in this slot.',
+            configure: 'Pass a configuration object directly to one of the extensions in this slot.',
           }[key],
           value: JSON.stringify(value?._value),
         },
@@ -95,10 +83,7 @@ function ExtensionSlotConfigTree({ config, path }: ExtensionSlotConfigProps) {
 
   function removeActiveItemDescriptionOnMouseLeave(thisPath) {
     const state = implementerToolsStore.getState();
-    if (
-      isEqual(state.activeItemDescription?.path, thisPath) &&
-      !isEqual(state.configPathBeingEdited, thisPath)
-    ) {
+    if (isEqual(state.activeItemDescription?.path, thisPath) && !isEqual(state.configPathBeingEdited, thisPath)) {
       implementerToolsStore.setState({ activeItemDescription: undefined });
     }
   }
@@ -107,43 +92,26 @@ function ExtensionSlotConfigTree({ config, path }: ExtensionSlotConfigProps) {
     <Subtree
       label={slotName}
       leaf={false}
-      onMouseEnter={() =>
-        setActiveExtensionSlotOnMouseEnter(moduleName, slotName)
-      }
-      onMouseLeave={() =>
-        removeActiveItemDescriptionOnMouseLeave([moduleName, slotName])
-      }
+      onMouseEnter={() => setActiveExtensionSlotOnMouseEnter(moduleName, slotName)}
+      onMouseLeave={() => removeActiveItemDescriptionOnMouseLeave([moduleName, slotName])}
     >
-      {(["add", "remove", "order", "configure"] as const).map((key) => (
+      {(['add', 'remove', 'order', 'configure'] as const).map((key) => (
         <Subtree
           label={key}
-          key={path.join(".") + key}
+          key={path.join('.') + key}
           leaf={true}
-          onMouseEnter={() =>
-            setActiveItemDescriptionOnMouseEnter(
-              moduleName,
-              slotName,
-              key,
-              config?.[key]
-            )
-          }
-          onMouseLeave={() =>
-            removeActiveItemDescriptionOnMouseLeave([moduleName, slotName, key])
-          }
+          onMouseEnter={() => setActiveItemDescriptionOnMouseEnter(moduleName, slotName, key, config?.[key])}
+          onMouseLeave={() => removeActiveItemDescriptionOnMouseLeave([moduleName, slotName, key])}
         >
-          {key === "configure" ? (
-            <ExtensionConfigureTree
-              moduleName={moduleName}
-              slotName={slotName}
-              config={config?.configure?._value}
-            />
+          {key === 'configure' ? (
+            <ExtensionConfigureTree moduleName={moduleName} slotName={slotName} config={config?.configure?._value} />
           ) : (
             <EditableValue
               path={path.concat([key])}
               element={
                 config?.[key] ?? {
                   _value: undefined,
-                  _source: "default",
+                  _source: 'default',
                   _default: [],
                 }
               }

package/src/configuration/interactive-editor/layout/subtree.component.tsx

@@ -1,11 +1,6 @@
-import React from "react";
-import {
-  StructuredListBody,
-  StructuredListCell,
-  StructuredListRow,
-  StructuredListWrapper,
-} from "@carbon/react";
-import styles from "./layout.styles.css";
+import React from 'react';
+import { StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper } from '@carbon/react';
+import styles from './layout.styles.css';
 
 export interface SubtreeProps {
   leaf: boolean;
@@ -15,34 +10,16 @@ export interface SubtreeProps {
   onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 
-export function Subtree({
-  leaf,
-  label,
-  children,
-  onMouseEnter,
-  onMouseLeave,
-}: SubtreeProps) {
+export function Subtree({ leaf, label, children, onMouseEnter, onMouseLeave }: SubtreeProps) {
   return leaf ? (
-    <StructuredListRow
-      className={styles.structuredListRow}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      <StructuredListCell className={styles.labelCell}>
-        {label}
-      </StructuredListCell>
+    <StructuredListRow className={styles.structuredListRow} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <StructuredListCell className={styles.labelCell}>{label}</StructuredListCell>
       <StructuredListCell>{children}</StructuredListCell>
     </StructuredListRow>
   ) : (
     <>
-      <StructuredListRow
-        className={styles.structuredListRow}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        <StructuredListCell className={styles.labelCell}>
-          {label}
-        </StructuredListCell>
+      <StructuredListRow className={styles.structuredListRow} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        <StructuredListCell className={styles.labelCell}>{label}</StructuredListCell>
         <StructuredListCell />
       </StructuredListRow>
       <StructuredListRow className={styles.structuredListRow}>

package/src/configuration/interactive-editor/layout/tree-container.component.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from "react";
-import { StructuredListBody, StructuredListWrapper } from "@carbon/react";
-import styles from "./layout.styles.css";
+import React, { ReactNode } from 'react';
+import { StructuredListBody, StructuredListWrapper } from '@carbon/react';
+import styles from './layout.styles.css';
 
 export interface TreeContainerProps {
   children: ReactNode;

package/src/configuration/interactive-editor/value-editor.scss

@@ -1,5 +1,5 @@
-@use "@carbon/styles/scss/spacing";
-@import "../../implementer-tools.styles.scss";
+@use '@carbon/styles/scss/spacing';
+@import '../../implementer-tools.styles.scss';
 
 .valueEditorButtons {
   margin-top: spacing.$spacing-03;

package/src/configuration/interactive-editor/value-editor.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Button } from "@carbon/react";
-import { Close, Save } from "@carbon/react/icons";
-import { Type } from "@openmrs/esm-framework";
-import { ConfigValueDescriptor } from "./editable-value.component";
-import { ValueEditorField } from "./value-editors/value-editor-field";
-import styles from "./value-editor.scss";
+import React, { useEffect, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { Close, Save } from '@carbon/react/icons';
+import { Type } from '@openmrs/esm-framework';
+import { ConfigValueDescriptor } from './editable-value.component';
+import { ValueEditorField } from './value-editors/value-editor-field';
+import styles from './value-editor.scss';
 
-export type CustomValueType = "add" | "remove" | "order" | "configure";
+export type CustomValueType = 'add' | 'remove' | 'order' | 'configure';
 
 export type ValueType = CustomValueType | Type;
 
@@ -19,13 +19,7 @@ interface ValueEditorProps {
   handleClose: () => void;
 }
 
-export function ValueEditor({
-  element,
-  customType,
-  path,
-  handleSave,
-  handleClose,
-}: ValueEditorProps) {
+export function ValueEditor({ element, customType, path, handleSave, handleClose }: ValueEditorProps) {
   const ref = useRef<HTMLDivElement>(null);
   const [tmpValue, setTmpValue] = useState(element._value);
   const { t } = useTranslation();
@@ -34,42 +28,32 @@ export function ValueEditor({
 
   useEffect(() => {
     const keyListener = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
+      if (e.key === 'Escape') {
         handleClose();
-      } else if (e.key === "Enter") {
+      } else if (e.key === 'Enter') {
         handleSave(JSON.stringify(tmpValue));
       }
     };
 
-    document.addEventListener("keyup", keyListener);
+    document.addEventListener('keyup', keyListener);
     return () => {
-      document.removeEventListener("keyup", keyListener);
+      document.removeEventListener('keyup', keyListener);
     };
   }, [handleSave, handleClose, tmpValue]);
 
   return (
-    <div ref={ref} style={{ display: "inherit" }}>
-      <ValueEditorField
-        element={element}
-        path={path}
-        value={tmpValue}
-        onChange={setTmpValue}
-        valueType={valueType}
-      />
+    <div ref={ref} style={{ display: 'inherit' }}>
+      <ValueEditorField element={element} path={path} value={tmpValue} onChange={setTmpValue} valueType={valueType} />
       <div className={styles.valueEditorButtons}>
         <Button
           renderIcon={(props) => <Save {...props} size={16} />}
           kind="primary"
           onClick={() => handleSave(JSON.stringify(tmpValue))}
         >
-          {t("saveValueButtonText", "Save")}
+          {t('saveValueButtonText', 'Save')}
         </Button>
-        <Button
-          renderIcon={(props) => <Close {...props} size={16} />}
-          kind="secondary"
-          onClick={handleClose}
-        >
-          {t("cancelButtonText", "Cancel")}
+        <Button renderIcon={(props) => <Close {...props} size={16} />} kind="secondary" onClick={handleClose}>
+          {t('cancelButtonText', 'Cancel')}
         </Button>
       </div>
     </div>

package/src/configuration/interactive-editor/value-editors/array-editor.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from "react";
-import cloneDeep from "lodash-es/cloneDeep";
-import uniqueId from "lodash-es/uniqueId";
-import { Type } from "@openmrs/esm-framework";
+import React, { useMemo } from 'react';
+import cloneDeep from 'lodash-es/cloneDeep';
+import uniqueId from 'lodash-es/uniqueId';
+import { Type } from '@openmrs/esm-framework';
 import {
   Button,
   Tile,
@@ -9,11 +9,11 @@ import {
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-} from "@carbon/react";
-import { Add, TrashCan } from "@carbon/react/icons";
-import { ValueEditorField } from "./value-editor-field";
-import { ConfigValueDescriptor } from "../editable-value.component";
-import styles from "./array-editor.styles.css";
+} from '@carbon/react';
+import { Add, TrashCan } from '@carbon/react/icons';
+import { ValueEditorField } from './value-editor-field';
+import { ConfigValueDescriptor } from '../editable-value.component';
+import styles from './array-editor.styles.css';
 
 interface ArrayEditorProps {
   element: ConfigValueDescriptor;
@@ -21,12 +21,8 @@ interface ArrayEditorProps {
   setValue: (value: Array<any>) => void;
 }
 
-export function ArrayEditor({
-  element,
-  valueArray,
-  setValue,
-}: ArrayEditorProps) {
-  const arrayKey = useMemo(() => uniqueId("array-editor-"), []);
+export function ArrayEditor({ element, valueArray, setValue }: ArrayEditorProps) {
+  const arrayKey = useMemo(() => uniqueId('array-editor-'), []);
   return (
     <Tile className={styles.arrayEditor}>
       <StructuredListWrapper>
@@ -74,10 +70,7 @@ export function ArrayEditor({
                 hasIconOnly
                 onClick={() => {
                   const newValueArray = cloneDeep(valueArray);
-                  const newValue =
-                    (element._elements?._type ?? Type.Object) == Type.Object
-                      ? {}
-                      : null;
+                  const newValue = (element._elements?._type ?? Type.Object) == Type.Object ? {} : null;
                   newValueArray.push(newValue);
                   setValue(newValueArray);
                 }}

package/src/configuration/interactive-editor/value-editors/concept-search.resource.tsx

@@ -1,5 +1,5 @@
-import useSWR from "swr";
-import { openmrsFetch } from "@openmrs/esm-framework";
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
 
 export type Concept = {
   answers: Array<ConceptAnswer>;
@@ -22,7 +22,7 @@ export function useConceptLookup(query: string) {
 
   const { data, error } = useSWR<{ data: { results: Array<Concept> } }, Error>(
     query ? conceptLookupUrl : null,
-    openmrsFetch
+    openmrsFetch,
   );
 
   return {
@@ -35,10 +35,7 @@ export function useConceptLookup(query: string) {
 export function useGetConceptByUuid(conceptUuid: string) {
   const fetchConceptUrl = `/ws/rest/v1/concept/${conceptUuid}`;
 
-  const { data, error } = useSWR<{ data: Concept }, Error>(
-    conceptUuid ? fetchConceptUrl : null,
-    openmrsFetch
-  );
+  const { data, error } = useSWR<{ data: Concept }, Error>(conceptUuid ? fetchConceptUrl : null, openmrsFetch);
 
   return {
     concept: data?.data ?? null,

package/src/configuration/interactive-editor/value-editors/concept-search.styles.scss

@@ -1,9 +1,9 @@
-@use "@carbon/styles/scss/type";
-@use "@carbon/styles/scss/spacing";
-@import "../../implementer-tools.styles.scss";
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '../../implementer-tools.styles.scss';
 
 .activeConceptUuid {
-  @include type.type-style("body-compact-01");
+  @include type.type-style('body-compact-01');
   color: $ui-05;
   margin-bottom: spacing.$spacing-03;
   padding-bottom: spacing.$spacing-03;
@@ -11,13 +11,13 @@
 }
 
 .autocomplete,
-.autocomplete > [role="combobox"] {
+.autocomplete > [role='combobox'] {
   display: flex;
   position: relative;
   width: 20em;
 }
 
-.autocomplete [role="listbox"] {
+.autocomplete [role='listbox'] {
   margin: 0;
   padding: 0;
   display: flex;
@@ -36,7 +36,7 @@
   color: #000;
 }
 
-.autocomplete [role="option"]:hover {
+.autocomplete [role='option']:hover {
   background-color: #38a169;
   border-color: #38a169;
   color: #f7fafc;