@ampath/esm-patient-registration-app 6.0.1-pre.6

package/src/patient-registration/input/basic-input/select/select-input.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { SelectInput } from './select-input.component';
+
+describe('the select input', () => {
+  const setupSelect = async () => {
+    render(
+      <Formik initialValues={{ select: '' }} onSubmit={null}>
+        <Form>
+          <SelectInput label="Select" name="select" options={['A Option', 'B Option']} required />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('Select') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupSelect();
+    expect(input.type).toEqual('select-one');
+  });
+
+  it('can input data', async () => {
+    const user = userEvent.setup();
+    const input = await setupSelect();
+    const expected = 'A Option';
+
+    await user.selectOptions(input, expected);
+
+    await expect(input.value).toEqual(expected);
+  });
+
+  it('should show optional label if the input is not required', async () => {
+    render(
+      <Formik initialValues={{ select: '' }} onSubmit={null}>
+        <Form>
+          <SelectInput label="Select" name="select" options={['A Option', 'B Option']} />
+        </Form>
+      </Formik>,
+    );
+
+    await expect(screen.findByRole('combobox'));
+
+    const selectInput = screen.getByRole('combobox', { name: 'Select (optional)' }) as HTMLSelectElement;
+    expect(selectInput.labels).toHaveLength(1);
+    expect(selectInput.labels[0]).toHaveTextContent('Select (optional)');
+  });
+});

package/src/patient-registration/input/combo-input/combo-input.component.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { TextInput, Layer } from '@carbon/react';
+import SelectionTick from './selection-tick.component';
+import styles from '../input.scss';
+
+interface ComboInputProps {
+  entries: Array<string>;
+  name: string;
+  fieldProps: {
+    value: string;
+    labelText: string;
+    [x: string]: any;
+  };
+  handleInputChange: (newValue: string) => void;
+  handleSelection: (newSelection) => void;
+}
+
+const ComboInput: React.FC<ComboInputProps> = ({ entries, fieldProps, handleInputChange, handleSelection }) => {
+  const [highlightedEntry, setHighlightedEntry] = useState(-1);
+  const { value = '' } = fieldProps;
+  const [showEntries, setShowEntries] = useState(false);
+  const comboInputRef = useRef(null);
+
+  const handleFocus = useCallback(() => {
+    setShowEntries(true);
+    setHighlightedEntry(-1);
+  }, [setShowEntries, setHighlightedEntry]);
+
+  const filteredEntries = useMemo(() => {
+    if (!entries) {
+      return [];
+    }
+    if (!value) {
+      return entries;
+    }
+    return entries.filter((entry) => entry.toLowerCase().includes(value.toLowerCase()));
+  }, [entries, value]);
+
+  const handleOptionClick = useCallback(
+    (newSelection: string, e: KeyboardEvent = null) => {
+      e?.preventDefault();
+      handleSelection(newSelection);
+      setShowEntries(false);
+    },
+    [handleSelection, setShowEntries],
+  );
+
+  const handleKeyPress = useCallback(
+    (e: KeyboardEvent) => {
+      const totalResults = filteredEntries.length ?? 0;
+
+      if (e.key === 'Tab') {
+        setShowEntries(false);
+        setHighlightedEntry(-1);
+      }
+
+      if (e.key === 'ArrowUp') {
+        setHighlightedEntry((prev) => Math.max(-1, prev - 1));
+      } else if (e.key === 'ArrowDown') {
+        setHighlightedEntry((prev) => Math.min(totalResults - 1, prev + 1));
+      } else if (e.key === 'Enter' && highlightedEntry > -1) {
+        handleOptionClick(filteredEntries[highlightedEntry], e);
+      }
+    },
+    [highlightedEntry, handleOptionClick, filteredEntries, setHighlightedEntry, setShowEntries],
+  );
+
+  useEffect(() => {
+    const listener = (e) => {
+      if (!comboInputRef.current.contains(e.target as Node)) {
+        setShowEntries(false);
+        setHighlightedEntry(-1);
+      }
+    };
+    window.addEventListener('click', listener);
+    return () => {
+      window.removeEventListener('click', listener);
+    };
+  });
+
+  return (
+    <div className={styles.comboInput} ref={comboInputRef}>
+      <Layer>
+        <TextInput
+          {...fieldProps}
+          onChange={(e) => {
+            setHighlightedEntry(-1);
+            handleInputChange(e.target.value);
+          }}
+          onFocus={handleFocus}
+          autoComplete={'off'}
+          onKeyDown={handleKeyPress}
+        />
+      </Layer>
+      <div className={styles.comboInputEntries}>
+        {showEntries && (
+          <div className="cds--combo-box cds--list-box cds--list-box--expanded">
+            <div id="downshift-1-menu" className="cds--list-box__menu" role="listbox">
+              {filteredEntries.map((entry, indx) => (
+                <div
+                  className={classNames('cds--list-box__menu-item', {
+                    'cds--list-box__menu-item--highlighted': indx === highlightedEntry,
+                  })}
+                  key={indx}
+                  id="downshift-1-item-0"
+                  role="option"
+                  tabIndex={-1}
+                  aria-selected="true"
+                  onClick={() => handleOptionClick(entry)}>
+                  <div
+                    className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption, {
+                      'cds--list-box__menu-item--active': entry === value,
+                    })}>
+                    {entry}
+                    {entry === value && <SelectionTick />}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ComboInput;

package/src/patient-registration/input/combo-input/selection-tick.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+function SelectionTick() {
+  return (
+    <svg
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="16"
+      height="16"
+      viewBox="0 0 32 32"
+      aria-hidden="true"
+      className="cds--list-box__menu-item__selected-icon">
+      <path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path>
+    </svg>
+  );
+}
+
+export default SelectionTick;

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx

@@ -0,0 +1,187 @@
+import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { Layer, Search, type SearchProps } from '@carbon/react';
+import classNames from 'classnames';
+import styles from './autosuggest.scss';
+
+// FIXME Temporarily included types from Carbon
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
+interface SearchProps extends InputPropsBase {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete?: string;
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText?: string;
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether or not ExpandableSearch should render expanded or not
+   */
+  isExpanded?: boolean;
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id?: string;
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear?(): void;
+
+  /**
+   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+   */
+  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder?: string;
+
+  /**
+   * Rendered icon for the Search.
+   * Can be a React component class
+   */
+  renderIcon?: React.ComponentType | React.FunctionComponent;
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role?: string;
+
+  /**
+   * Specify the size of the Search
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number;
+}
+
+interface AutosuggestProps extends SearchProps {
+  getDisplayValue: Function;
+  getFieldValue: Function;
+  getSearchResults: (query: string) => Promise<any>;
+  onSuggestionSelected: (field: string, value: string) => void;
+  invalid?: boolean | undefined;
+  invalidText?: string | undefined;
+}
+
+export const Autosuggest: React.FC<AutosuggestProps> = ({
+  getDisplayValue,
+  getFieldValue,
+  getSearchResults,
+  onSuggestionSelected,
+  invalid,
+  invalidText,
+  ...searchProps
+}) => {
+  const [suggestions, setSuggestions] = useState([]);
+  const searchBox = useRef(null);
+  const wrapper = useRef(null);
+  const { id: name, labelText } = searchProps;
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  const handleClickOutsideComponent = (e) => {
+    if (wrapper.current && !wrapper.current.contains(e.target)) {
+      setSuggestions([]);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    onSuggestionSelected(name, undefined);
+
+    if (query) {
+      getSearchResults(query).then((suggestions) => {
+        setSuggestions(suggestions);
+      });
+    } else {
+      setSuggestions([]);
+    }
+  };
+
+  const handleClear = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSuggestionSelected(name, undefined);
+  };
+
+  const handleClick = (index: number) => {
+    const display = getDisplayValue(suggestions[index]);
+    const value = getFieldValue(suggestions[index]);
+    searchBox.current.value = display;
+    onSuggestionSelected(name, value);
+    setSuggestions([]);
+  };
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper}>
+      <label className="cds--label">{labelText}</label>
+      <Layer className={classNames({ [styles.invalid]: invalid })}>
+        <Search
+          id="autosuggest"
+          onChange={handleChange}
+          onClear={handleClear}
+          ref={searchBox}
+          className={styles.autocompleteSearch}
+          {...searchProps}
+        />
+      </Layer>
+      {suggestions.length > 0 && (
+        <ul className={styles.suggestions}>
+          {suggestions.map((suggestion, index) => (
+            <li key={index} onClick={(e) => handleClick(index)}>
+              {getDisplayValue(suggestion)}
+            </li>
+          ))}
+        </ul>
+      )}
+      {invalid ? <label className={classNames(styles.invalidMsg)}>{invalidText}</label> : <></>}
+    </div>
+  );
+};

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.scss

@@ -0,0 +1,62 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.suggestions {
+  position: relative;
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 0;
+  max-height: 143px;
+  overflow-y: auto;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background-color: #fff;
+  margin-bottom: 20px;
+  z-index: 99;
+}
+
+.suggestions li {
+  padding: spacing.$spacing-05;
+  line-height: 1.29;
+  color: #525252;
+  border-bottom: 1px solid #8d8d8d;
+}
+
+.suggestions li:hover {
+  background-color: #e5e5e5;
+  color: #161616;
+  cursor: pointer;
+}
+
+.suggestions li:not(:last-of-type) {
+  border-bottom: 1px solid #999;
+}
+
+.autocomplete {
+  position: relative;
+}
+
+.autocompleteSearch {
+  width: 100%;
+}
+
+.suggestions a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.invalid input {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+}
+
+.invalidMsg {
+  color: var(--cds-text-error, #da1e28);
+}

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.test.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Autosuggest } from './autosuggest.component';
+import { BrowserRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const mockPersons = [
+  {
+    uuid: 'randomuuid1',
+    display: 'John Doe',
+  },
+  {
+    uuid: 'randomuuid2',
+    display: 'John Smith',
+  },
+  {
+    uuid: 'randomuuid3',
+    display: 'James Smith',
+  },
+  {
+    uuid: 'randomuuid4',
+    display: 'Spider Man',
+  },
+];
+
+const mockedGetSearchResults = async (query: string) => {
+  return mockPersons.filter((person) => {
+    return person.display.toUpperCase().includes(query.toUpperCase());
+  });
+};
+
+const mockedHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
+
+describe('Autosuggest', () => {
+  afterEach(() => mockedHandleSuggestionSelected.mockClear());
+
+  it('renders a search box', () => {
+    renderAutosuggest();
+
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+    expect(screen.queryByRole('list')).toBeNull();
+  });
+
+  it('renders matching search results in a list when the user types a query', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    const list = screen.getByRole('list');
+
+    expect(list).toBeInTheDocument();
+    expect(list.children).toHaveLength(2);
+    expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('John Doe');
+    expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('John Smith');
+  });
+
+  it('clears the list of suggestions when a suggestion is selected', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
+    let list = screen.queryByRole('list');
+    expect(list).toBeNull();
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    list = screen.getByRole('list');
+    expect(list).toBeInTheDocument();
+
+    const listitems = screen.getAllByRole('listitem');
+    await user.click(listitems[0]);
+
+    expect(mockedHandleSuggestionSelected).toHaveBeenLastCalledWith('person', 'randomuuid1');
+
+    list = screen.queryByRole('list');
+    expect(list).toBeNull();
+  });
+
+  it('changes suggestions when a search input is changed', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
+    let list = screen.queryByRole('list');
+    expect(list).toBeNull();
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    const suggestion = await screen.findByText('John Doe');
+    expect(suggestion).toBeInTheDocument();
+
+    await user.clear(searchbox);
+
+    list = screen.queryByRole('list');
+    expect(list).toBeNull();
+  });
+
+  it('hides the list of suggestions when the user clicks outside of the component', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
+    const input = screen.getByRole('searchbox');
+
+    await user.type(input, 'john');
+    await screen.findByText('John Doe');
+    await user.click(document.body);
+
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+  });
+});
+
+function renderAutosuggest() {
+  render(
+    <BrowserRouter>
+      <Autosuggest
+        getSearchResults={mockedGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockedHandleSuggestionSelected}
+        placeholder="Find Person"
+      />
+    </BrowserRouter>,
+  );
+}