Upgrades AutoComplete to better support async fetching of results (#637)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/NOxkRPuhAfT4F7nmdXtG/62d618eb-553e-400d-9da8-c52a7d4c9adc.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/NOxkRPuhAfT4F7nmdXtG/62d618eb-553e-400d-9da8-c52a7d4c9adc.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NOxkRPuhAfT4F7nmdXtG/62d618eb-553e-400d-9da8-c52a7d4c9adc.mov">Screen Recording 2024-09-17 at 12.34.28 PM.mov</video>

Author: tommylau523

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "3.3.4",
+  "version": "3.3.5-rc.0",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

src/components/Autocomplete/Autocomplete.tsx

@@ -14,6 +14,7 @@ export interface Props {
   id?: string;
   label?: string;
   selected?: ValueType;
+  filterOptions?: (options: ValueType[], state: object) => ValueType[];
   freeSolo?: boolean;
   disabled?: boolean;
   className?: string;
@@ -23,6 +24,12 @@ export interface Props {
   errorText?: string;
   tooltipTitle?: TooltipProps['title'];
   required?: boolean;
+  noOptionsText?: string;
+  loading?: boolean;
+  loadingText?: string;
+  open?: boolean;
+  onOpen?: (event: React.SyntheticEvent) => void;
+  onClose?: (event: React.SyntheticEvent) => void;
   sx?: SxProps;
   renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: ValueType) => React.ReactNode;
 }
@@ -35,6 +42,7 @@ export default function Autocomplete({
   options,
   onChange,
   selected,
+  filterOptions,
   freeSolo,
   disabled,
   className,
@@ -44,6 +52,12 @@ export default function Autocomplete({
   errorText,
   tooltipTitle,
   required,
+  noOptionsText,
+  loading,
+  loadingText,
+  open,
+  onOpen,
+  onClose,
   sx,
   renderOption,
 }: Props): JSX.Element {
@@ -111,11 +125,23 @@ export default function Autocomplete({
       onChange={onChangeHandler}
       onInputChange={(event: any, value: any) => freeSolo && onChangeHandler(event, value)}
       value={selected}
+      filterOptions={filterOptions}
       freeSolo={freeSolo}
       forcePopupIcon={true}
       renderInput={renderInput}
       aria-required={required}
-      popupIcon={<Icon name='chevronDown' className='auto-complete--icon-right' size='medium' />}
+      noOptionsText={noOptionsText}
+      loading={loading}
+      loadingText={loadingText}
+      open={open}
+      onOpen={onOpen}
+      onClose={onClose}
+      popupIcon={
+        <Icon
+          name={loading ? 'spinner' : open ? 'chevronUp' : 'chevronDown'}
+          className='auto-complete--icon-right'
+          size='medium'
+        />}
       classes={{
         paper: 'auto-complete select',
         listbox: 'options-container',

src/stories/Autocomplete.stories.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { Story } from '@storybook/react';
 import { Box, useTheme } from '@mui/material';
-import React from 'react';
+import React, { useCallback } from 'react';
 import Autocomplete, { ValueType, Props as AutocompleteProps } from '../components/Autocomplete/Autocomplete';
 
 export default {
@@ -32,10 +32,71 @@ const Template: Story<AutocompleteProps> = (args) => {
   );
 };
 
+const AsyncTemplate: Story<AutocompleteProps> = (args) => {
+  const theme = useTheme();
+
+  const [open, setOpen] = React.useState<boolean>(false);
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<ValueType>();
+  const [options, setOptions] = React.useState<ValueType[]>([]);
+
+  const sleep = (duration: number): Promise<void> => {
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, duration);
+    });
+  };
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    await sleep(1e3);
+    setLoading(false);
+    setOptions([...args.options]);
+  }, [setLoading, setOptions]);
+
+  const handleOpen = useCallback(async () => {
+    setOpen(true);
+    await load();
+  }, [setOpen, load]);
+
+  const handleClose = () => {
+    setOpen(false);
+    setOptions([]);
+  };
+
+  const handleChange = (value: ValueType) => {
+    action('onChange')(value);
+    setSelected(value);
+  };
+
+  return (
+    <Box sx={{ marginTop: '30px' }}>
+      <Autocomplete
+        {...args}
+        open={open}
+        onOpen={() => void handleOpen()}
+        onClose={handleClose}
+        selected={selected}
+        loading={loading}
+        options={options}
+        onChange={handleChange}
+        sx={{
+          backgroundColor: theme.palette.TwClrBaseWhite,
+          width: '300px',
+        }}
+      />
+    </Box>
+  );
+};
+
 export const Default = Template.bind({});
 
 export const Complex = Template.bind({});
 
+export const AsyncDefault = AsyncTemplate.bind({});
+
+
 Default.args = {
   id: '1',
   label: 'Test',
@@ -75,3 +136,11 @@ Complex.args = {
   isEqual: (option: any, value: any) => option.value === value.value,
   tooltipTitle: 'Hello world!',
 };
+
+AsyncDefault.args = {
+  id: '3',
+  label: 'Test',
+  options: ['Test 1', 'Test 2', 'Hello'],
+  freeSolo: true,
+  errorText: '',
+};