@zesty-io/material 0.1.4 → 0.2.2

package/es/FieldTypeDate/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
-export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
+import { DesktopDatePickerProps } from '@mui/x-date-pickers';
+export interface FieldTypeDateProps extends Omit<DesktopDatePickerProps<Date, Date>, 'renderInput'> {
     helperText?: string;
     error?: boolean;
     required?: boolean;

package/es/FieldTypeDate/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DesktopDatePicker } from '@mui/x-date-pickers';
 import { FormControl, FormLabel, TextField } from '@mui/material';
 ;
 const FieldTypeDate = ({ label, helperText, error, required, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error }), ...props }) })] }));
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DesktopDatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
 };
 export default FieldTypeDate;

package/es/FieldTypeDateTime/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
-export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
+import { DesktopDateTimePickerProps } from '@mui/x-date-pickers';
+export interface FieldTypeDateTimeProps extends Omit<DesktopDateTimePickerProps<Date, Date>, 'renderInput'> {
     helperText?: string;
     error?: boolean;
     required?: boolean;

package/es/FieldTypeDateTime/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DesktopDateTimePicker } from '@mui/x-date-pickers';
 import { TextField, FormControl, FormLabel } from '@mui/material';
 ;
 const FieldTypeDateTime = ({ label, helperText, error, required, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DateTimePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error }), ...props }) })] }));
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DesktopDateTimePicker, { "data-testid": "zds-date-time-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
 };
 export default FieldTypeDateTime;

package/es/FieldTypeSort/index.d.ts

@@ -3,5 +3,5 @@ import { OutlinedTextFieldProps } from '@mui/material/TextField';
 export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'variant'> {
     value: string;
 }
-declare const FieldTypeSort: ({ label, value, InputProps, required, ...props }: FieldTypeSortProps) => JSX.Element;
+declare const FieldTypeSort: ({ label, value, InputProps, required, onChange, ...props }: FieldTypeSortProps) => JSX.Element;
 export default FieldTypeSort;

package/es/FieldTypeSort/index.js

@@ -3,17 +3,29 @@ import MuiTextField from '@mui/material/TextField';
 import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-const FieldTypeSort = ({ label, value, InputProps, required, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, InputProps: {
+const FieldTypeSort = ({ label, value, InputProps, required, onChange, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, onChange: onChange, InputProps: {
                     startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
-                                // References input via event in order to modify its value
+                                e.stopPropagation();
+                                // References input via click event in order to obtain its value
                                 const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
-                                input.value = String(+input.value - 1);
+                                const newValue = String(+input.value - 1);
+                                // Updates internal input value in case component is not controlled
+                                input.value = newValue;
+                                // Mocks an event change
+                                const event = { target: { value: newValue } };
+                                onChange && onChange(event);
                             }, children: _jsx(RemoveIcon, { fontSize: 'small' }) }) })),
                     endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
-                                // References input via event in order to modify its value
+                                e.stopPropagation();
+                                // References input via click event in order to obtain its value
                                 const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
-                                input.value = String(+input.value + 1);
+                                const newValue = String(+input.value + 1);
+                                // Updates internal input value in case component is not controlled
+                                input.value = newValue;
+                                // Mocks an event change
+                                const event = { target: { value: newValue } };
+                                onChange && onChange(event);
                             }, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
                     // Spread props at the end to allow Input prop overrides
                     ...InputProps,

package/es/FieldTypeUrl/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useState } from 'react';
 import MuiTextField from '@mui/material/TextField';
 import { FormControl, FormLabel, Box } from '@mui/material';
 const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
-    const inputRef = useRef(null);
+    // Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
+    const [inputRef, setInputRef] = useState();
     return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsxs(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), _jsx(MuiTextField, { size: "small", type: 'url', variant: 'outlined', value: value, inputProps: {
-                    ref: inputRef,
+                    ref: (inputRef) => setInputRef(inputRef),
                     // Spread props at the end to allow inputProps prop overrides
                     ...inputProps,
-                }, error: (value && !inputRef.current?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
+                }, error: (value && !inputRef?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
 };
 export default FieldTypeUrl;

package/es/VitualizedAutocomplete/VirtualizedAutocomplete.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { VirtualizedAutocompleteProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<VirtualizedAutocompleteProps>;

package/es/VitualizedAutocomplete/VirtualizedAutocomplete.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import VirtualizedAutocomplete from './';
+export default {
+    title: 'VirtualizedAutocomplete',
+    component: VirtualizedAutocomplete,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState({ component: '- None -', value: '0', inputLabel: '- None -' });
+    const [options, setOptions] = useState([]);
+    const handleOnOpen = async () => {
+        const largeArr = new Array(1000).fill(null);
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        const data = largeArr.map((_, idx) => ({ component: _jsx("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
+        setOptions(data);
+    };
+    const handleOnChange = (e, option) => {
+        setValue(option);
+    };
+    return (_jsx(VirtualizedAutocomplete, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    helperText: 'OneToOne helperText',
+    placeholder: 'OneToOne placeholder'
+};

package/es/VitualizedAutocomplete/index.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { AutocompleteProps } from '@mui/material';
+export interface VirtualizedAutocompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'renderInput'> {
+    helperText?: string;
+    placeholder?: string;
+    error?: boolean;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    /**
+     * Structure for option
+     */
+    options: {
+        /**
+         * Component to be rendered in the dropdown
+         */
+        component: ReactNode | string;
+        /**
+         * Value of option
+         */
+        value: string;
+        /**
+         * Label that should display in the input when selected
+         */
+        inputLabel: string;
+    }[];
+}
+declare const VirtualizedAutocomplete: ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }: VirtualizedAutocompleteProps) => JSX.Element;
+export default VirtualizedAutocomplete;

package/es/VitualizedAutocomplete/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popper, styled, TextField, InputAdornment } from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import { ListboxComponent } from '../utils/virtualization';
+const VirtualizedAutocomplete = ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }) => {
+    return (_jsx(Autocomplete, { fullWidth: true, disableListWrap: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder, InputProps: {
+                ...params.InputProps,
+                startAdornment: _jsx(InputAdornment, { position: 'end', children: startAdornment }),
+                endAdornment: _jsxs(_Fragment, { children: [params.InputProps.endAdornment, _jsx(InputAdornment, { sx: { position: 'relative', right: '40px' }, position: 'end', children: endAdornment })] })
+            } })), getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props }));
+};
+export default VirtualizedAutocomplete;
+const StyledPopper = styled(Popper)({
+    [`& .${autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/es/index.d.ts

@@ -6,8 +6,8 @@ export { default as FieldTypeDate } from './FieldTypeDate';
 export { default as FieldTypeDateTime } from './FieldTypeDateTime';
 export { default as FieldTypeColor } from './FieldTypeColor';
 export { default as FieldTypeNumber } from './FieldTypeNumber';
-export { default as FieldTypeDropdown } from './FieldTypeDropdown';
 export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
 export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
 export { default as ConfirmDialog } from './ConfirmDialog';
+export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';

package/es/index.js

@@ -6,8 +6,8 @@ export { default as FieldTypeDate } from './FieldTypeDate';
 export { default as FieldTypeDateTime } from './FieldTypeDateTime';
 export { default as FieldTypeColor } from './FieldTypeColor';
 export { default as FieldTypeNumber } from './FieldTypeNumber';
-export { default as FieldTypeDropdown } from './FieldTypeDropdown';
 export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
 export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
 export { default as ConfirmDialog } from './ConfirmDialog';
+export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';

package/es/theme/index.js

@@ -7,6 +7,13 @@ let theme = createTheme({
 });
 theme = createTheme(theme, {
     components: {
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#e4e9f1',
+                },
+            },
+        },
         MuiButton: {
             styleOverrides: {
                 root: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.1.4",
+  "version": "0.2.2",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",

package/src/FieldTypeDate/index.tsx

@@ -1,9 +1,9 @@
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker, DatePickerProps} from '@mui/x-date-pickers/DatePicker';
+import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers';
 import { FormControl, FormLabel, TextField } from '@mui/material';
 
-export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
+export interface FieldTypeDateProps extends Omit<DesktopDatePickerProps<Date, Date>, 'renderInput'> {
   helperText?: string;
   error?: boolean;
   required?: boolean;
@@ -14,13 +14,14 @@ const FieldTypeDate = ({label, helperText, error, required, ...props}: FieldType
     <FormControl fullWidth required={required}>
       <FormLabel>{label}</FormLabel>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <DatePicker
+        <DesktopDatePicker
           data-testid="zds-date-picker"
           renderInput={(params) => 
             <TextField
               {...params}
               helperText={helperText}
               error={error}
+              size="small"
             />
           }
           // Spread props at the end to allow prop overrides

package/src/FieldTypeDateTime/index.tsx

@@ -1,9 +1,9 @@
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker, DateTimePickerProps} from '@mui/x-date-pickers/DateTimePicker';
+import { DesktopDateTimePicker, DesktopDateTimePickerProps } from '@mui/x-date-pickers';
 import { TextField, FormControl, FormLabel } from '@mui/material';
 
-export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
+export interface FieldTypeDateTimeProps extends Omit<DesktopDateTimePickerProps<Date, Date>, 'renderInput'> {
   helperText?: string;
   error?: boolean;
   required?: boolean;
@@ -14,14 +14,15 @@ const FieldTypeDateTime = ({label, helperText, error, required, ...props}: Field
     <FormControl fullWidth required={required}>
       <FormLabel>{label}</FormLabel>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <DateTimePicker
-          data-testid="zds-date-picker"
+        <DesktopDateTimePicker
+          data-testid="zds-date-time-picker"
           renderInput={(params) => 
             <TextField
               
               {...params}
               helperText={helperText}
               error={error}
+              size="small"
             />
           }
           // Spread props at the end to allow prop overrides

package/src/FieldTypeSort/index.tsx

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
@@ -7,7 +8,7 @@ export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'varian
   value: string;
 }
 
-const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTypeSortProps) => {
+const FieldTypeSort = ({label, value, InputProps, required, onChange, ...props }: FieldTypeSortProps) => {
   return (
     <FormControl fullWidth required={required}>
       <FormLabel>{label}</FormLabel>
@@ -16,6 +17,7 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
         variant='outlined'
         type='number'
         value={value}
+        onChange={onChange}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
@@ -23,9 +25,15 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
                 size="small"
                 variant="contained"
                 onClick={(e) => {
-                  // References input via event in order to modify its value
+                  e.stopPropagation();
+                  // References input via click event in order to obtain its value
                   const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  input.value = String(+input.value - 1)
+                  const newValue = String(+input.value - 1)
+                  // Updates internal input value in case component is not controlled
+                  input.value = newValue
+                  // Mocks an event change
+                  const event = {target: {value: newValue}}
+                  onChange && onChange(event as ChangeEvent<HTMLTextAreaElement | HTMLInputElement>);
                 }}><RemoveIcon fontSize='small' />
               </Button>
             </InputAdornment>
@@ -36,9 +44,15 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
                 size="small"
                 variant="contained"
                 onClick={(e) => {
-                  // References input via event in order to modify its value
+                  e.stopPropagation();
+                  // References input via click event in order to obtain its value
                   const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  input.value = String(+input.value + 1)
+                  const newValue = String(+input.value + 1)
+                  // Updates internal input value in case component is not controlled
+                  input.value = newValue
+                  // Mocks an event change
+                  const event = {target: {value: newValue}}
+                  onChange && onChange(event as ChangeEvent<HTMLTextAreaElement | HTMLInputElement>);
                 }}><AddIcon fontSize='small' />
               </Button>
             </InputAdornment>

package/src/FieldTypeUrl/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useState } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 import { FormControl, FormLabel, Box } from '@mui/material';
 
@@ -12,7 +12,8 @@ export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant
 }
 
 const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+  // Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
+  const [inputRef, setInputRef] = useState<HTMLInputElement>();
 
   return (
     <FormControl fullWidth required={required}>
@@ -27,12 +28,12 @@ const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inp
         variant='outlined'
         value={value}
         inputProps={{
-          ref: inputRef,
+          ref: (inputRef: HTMLInputElement) => setInputRef(inputRef),
           // Spread props at the end to allow inputProps prop overrides
           ...inputProps,
         }}
-        error={(value && !inputRef.current?.validity.valid) || value?.length > maxLength}
-        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText}
+        error={(value && !inputRef?.validity.valid) || value?.length > maxLength}
+        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef?.validity.valid) ? 'Your input is not a valid url' : helperText}
         // Spread props at the end to allow prop overrides
         {...props}
       />

package/src/VitualizedAutocomplete/VirtualizedAutocomplete.stories.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, SyntheticEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import VirtualizedAutocomplete, { VirtualizedAutocompleteProps } from './';
+
+export default {
+  title: 'VirtualizedAutocomplete',
+  component: VirtualizedAutocomplete,
+  argType: {},
+} as Meta;
+
+const Template: Story<VirtualizedAutocompleteProps> = (args) => {
+  const [value, setValue] = useState<{component: string | ReactNode, value: string, inputLabel: string}>({component: '- None -', value: '0', inputLabel: '- None -'});
+
+  const [options, setOptions] = useState<{component: string | ReactNode, value: string, inputLabel: string}[]>([]);
+
+  const handleOnOpen = async () => {
+    const largeArr = new Array(1000).fill(null);
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+    const data = largeArr.map((_, idx) => ({component: <div>{`Test ${idx}`}</div>, value: String(Math.random()), inputLabel: `Test ${idx}`}));
+    setOptions(data);
+  }
+
+  const handleOnChange = (e: SyntheticEvent<Element, Event>, option: {component: string | ReactNode, value: string, inputLabel: string}) => {
+    setValue(option);
+  }
+
+  return (
+    <VirtualizedAutocomplete
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      options={options}
+      onOpen={handleOnOpen}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  helperText: 'OneToOne helperText',
+  placeholder: 'OneToOne placeholder'
+};
+
+
+

package/src/VitualizedAutocomplete/index.tsx

@@ -0,0 +1,69 @@
+import { ReactNode, useState } from 'react';
+import { AutocompleteProps, Popper, styled, TextField, FormLabel, FormControl, InputAdornment } from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import { ListboxComponent } from '../utils/virtualization';
+
+export interface VirtualizedAutocompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'renderInput'> {
+  helperText?: string;
+  placeholder?: string;
+  error?: boolean;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  /**
+   * Structure for option
+   */
+  options: {
+    /**
+     * Component to be rendered in the dropdown
+     */
+    component: ReactNode | string;
+    /**
+     * Value of option
+     */
+    value: string;
+    /**
+     * Label that should display in the input when selected
+     */
+    inputLabel: string;
+  }[]
+}
+
+const VirtualizedAutocomplete = ({helperText, placeholder, error, startAdornment, endAdornment, ...props }: VirtualizedAutocompleteProps) => {
+  return (
+      <Autocomplete
+        fullWidth
+        disableListWrap
+        size='small'
+        PopperComponent={StyledPopper}
+        ListboxComponent={ListboxComponent}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            helperText={helperText}
+            error={error}
+            placeholder={placeholder}
+            InputProps={{
+              ...params.InputProps,
+              startAdornment: <InputAdornment position='end'>{startAdornment}</InputAdornment>,
+              endAdornment: <>{params.InputProps.endAdornment}<InputAdornment sx={{ position: 'relative', right: '40px'}} position='end'>{endAdornment}</InputAdornment></>
+            }}
+          />
+        )}
+        getOptionLabel={(option) => option.inputLabel}
+        renderOption={(props, option) => [props, option.component]}
+        {...props}
+      />
+  );
+};
+
+export default VirtualizedAutocomplete;
+
+const StyledPopper = styled(Popper)({
+  [`& .${autocompleteClasses.listbox}`]: {
+    boxSizing: 'border-box',
+    '& ul': {
+      padding: 0,
+      margin: 0,
+    },
+  },
+});

package/src/index.ts

@@ -6,8 +6,8 @@ export { default as FieldTypeDate } from './FieldTypeDate';
 export { default as FieldTypeDateTime } from './FieldTypeDateTime';
 export { default as FieldTypeColor } from './FieldTypeColor';
 export { default as FieldTypeNumber } from './FieldTypeNumber';
-export { default as FieldTypeDropdown } from './FieldTypeDropdown';
 export { default as FieldTypeOneToOne} from './FieldTypeOneToOne';
 export { default as FieldTypeOneToMany} from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
-export { default as ConfirmDialog } from './ConfirmDialog';
+export { default as ConfirmDialog } from './ConfirmDialog';
+export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';

package/src/theme/index.ts

@@ -9,6 +9,13 @@ let theme: Theme = createTheme({
 
 theme = createTheme(theme, {
   components: {
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#e4e9f1',
+        },
+      },
+    },
     MuiButton: {
       styleOverrides: {
         root: {

package/src/FieldTypeDropdown/FieldTypeDropwdon.stories.tsx

@@ -1,52 +0,0 @@
-import { ChangeEvent, useState } from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import FieldTypeDropdown, { FieldTypeDropdownProps } from './';
-import { MenuItem } from '@mui/material';
-
-export default {
-  title: 'FieldTypeDropdown',
-  component: FieldTypeDropdown,
-  argType: {},
-} as Meta;
-
-const options = [
-  {
-    value: 'option1',
-    label: 'Option 1',
-  },
-  {
-    value: 'option2',
-    label: 'Option 2',
-  },
-  {
-    value: 'option3',
-    label: 'Option 3',
-  },
-];
-
-const Template: Story<FieldTypeDropdownProps> = (args) => {
-  const [value, setValue] = useState('');
-
-  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  }
-
-  return (
-    <FieldTypeDropdown
-      {...args}
-      value={value}
-      onChange={handleOnChange}
-      options={options}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Placeholder Text...',
-  label: 'Dropdown label',
-  helperText: 'Dropdown helper text',
-};
-
-
-

package/src/FieldTypeDropdown/index.tsx

@@ -1,41 +0,0 @@
-import { MenuItem } from '@mui/material';
-import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { FormControl, FormLabel } from '@mui/material';
-
-interface Option {
-  label: string;
-  value: any;
-}
-
-export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'variant'> {
-  options: Option[];
-}
-
-const FieldTypeDropdown = ({label, options, required, ...props }: FieldTypeDropdownProps) => {
-
-  return (
-    <FormControl fullWidth required={required}>
-      <FormLabel>{label}</FormLabel>
-      <MuiTextField
-        size="small"
-        variant='outlined'
-        select
-        SelectProps={{
-          displayEmpty: true,
-        }}
-        {...props}
-      >
-        <MenuItem key={''} value={''}>
-          - None -
-        </MenuItem>
-        {options.map((option) => (
-          <MenuItem key={option.value} value={option.value}>
-            {option.label}
-          </MenuItem>
-      ))}
-      </MuiTextField>
-    </FormControl>
-  );
-};
-
-export default FieldTypeDropdown;