add auto complete component (#788)

* add auto complete

* resolve conflict

src/Components/InputAutocomplete.fixture.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import FixtureContext from '../FixtureContext'
+import InputAutocomplete from './InputAutocomplete'
+
+
+const elements = [
+  {title: 'Surfaces'},
+  {title: 'Case'},
+  {title: 'Gears'},
+  {title: 'Electonics'},
+]
+
+export default (
+  <FixtureContext>
+    <InputAutocomplete elements={elements} placeholder={'IFC property'}/>
+  </FixtureContext>
+)

src/Components/InputAutocomplete.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import Autocomplete from '@mui/material/Autocomplete'
+import TextField from '@mui/material/TextField'
+import Stack from '@mui/material/Stack'
+import {assertDefined} from '../utils/assert'
+
+/**
+ * Input with autocomplete feature.
+ *
+ * @property {Array<object>} elements suggested elements used to autocomple input,the object is in a shape of {title:'suggestion'}
+ * @property {string} placeholder Input placeholder
+ * @property {string} size MUI size of the input component
+ * @return {React.Component}
+ */
+export default function InputAutocomplete({elements, placeholder, size = 'small'}) {
+  assertDefined(elements, placeholder)
+  return (
+    <Stack spacing={3} sx={{minWidth: '280px'}}>
+      <Autocomplete
+        multiple
+        options={elements}
+        getOptionLabel={(option) => option.title}
+        filterSelectedOptions
+        size={size}
+        renderInput={(params) => {
+          return (
+            <TextField
+              {...params}
+              placeholder={placeholder}
+              size={size}
+            />
+          )
+        }
+        }
+      />
+    </Stack>
+  )
+}

src/Components/InputAutocomplete.test.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import {render, fireEvent} from '@testing-library/react'
+import InputAutocomplete from './InputAutocomplete' // Adjust the import path
+
+
+describe('InputAutocomplete', () => {
+  const elements = [
+    {title: 'Option 1'},
+    {title: 'Option 2'},
+    {title: 'Option 3'},
+  ]
+
+  it('renders the input with placeholder', () => {
+    const placeholderText = 'Type something'
+    const {getByPlaceholderText} = render(
+        <InputAutocomplete elements={elements} placeholder={placeholderText}/>,
+    )
+    const inputElement = getByPlaceholderText(placeholderText)
+    expect(inputElement).toBeInTheDocument()
+  })
+
+  it('displays suggestions when typing', () => {
+    const {getByPlaceholderText, getByText} = render(
+        <InputAutocomplete elements={elements} placeholder="Type something"/>,
+    )
+
+    const inputElement = getByPlaceholderText('Type something')
+
+    // Type some text into the input
+    fireEvent.change(inputElement, {target: {value: 'Option'}})
+
+    // Wait for suggestions to appear
+    const suggestion1 = getByText('Option 1')
+    const suggestion2 = getByText('Option 2')
+    const suggestion3 = getByText('Option 3')
+
+    expect(suggestion1).toBeInTheDocument()
+    expect(suggestion2).toBeInTheDocument()
+    expect(suggestion3).toBeInTheDocument()
+  })
+})