@zesty-io/material 0.1.0 → 0.1.3

package/es/FieldTypeText/index.js

@@ -1,15 +1,7 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MuiTextField from '@mui/material/TextField';
-import { InputAdornment } from '@mui/material';
-const FieldTypeText = ({ maxLength = 150, value, helperText, InputProps, InputLabelProps, ...props }) => {
-    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', value: value, InputProps: {
-            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsxs(_Fragment, { children: [value.length, "/", maxLength] }) })),
-            // Spread props at the end to allow Input prop overrides
-            ...InputProps,
-        }, InputLabelProps: {
-            shrink: true,
-            // Spread props at the end to allow InputLabel prop overrides
-            ...InputLabelProps,
-        }, error: value.length > maxLength, helperText: value.length > maxLength ? 'Your input is over the specified limit' : helperText, ...props }));
+import { FormControl, FormLabel, Box } from '@mui/material';
+const FieldTypeText = ({ label, maxLength = 150, value, helperText, required, ...props }) => {
+    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", variant: 'outlined', value: value, error: value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : helperText, ...props })] }));
 };
 export default FieldTypeText;

package/es/FieldTypeUrl/index.d.ts

@@ -8,5 +8,5 @@ export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant
     maxLength?: number;
     value: string;
 }
-declare const FieldTypeUrl: ({ maxLength, value, helperText, InputProps, InputLabelProps, inputProps, ...props }: FieldTypeUrlProps) => JSX.Element;
+declare const FieldTypeUrl: ({ label, maxLength, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => JSX.Element;
 export default FieldTypeUrl;

package/es/FieldTypeUrl/index.js

@@ -1,21 +1,13 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import MuiTextField from '@mui/material/TextField';
-import { InputAdornment } from '@mui/material';
-const FieldTypeUrl = ({ maxLength = 2000, value, helperText, InputProps, InputLabelProps, inputProps, ...props }) => {
+import { FormControl, FormLabel, Box } from '@mui/material';
+const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
     const inputRef = useRef(null);
-    return (_jsx(MuiTextField, { size: "small", type: 'url', variant: 'outlined', value: value, InputProps: {
-            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsxs(_Fragment, { children: [value.length, "/", maxLength] }) })),
-            // Spread props at the end to allow Input prop overrides
-            ...InputProps,
-        }, InputLabelProps: {
-            shrink: true,
-            // Spread props at the end to allow InputLabel prop overrides
-            ...InputLabelProps,
-        }, inputProps: {
-            ref: 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 }));
+    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,
+                    // 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 })] }));
 };
 export default FieldTypeUrl;

package/es/index.d.ts

@@ -7,5 +7,7 @@ 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 ConfirmModal } from './ConfirmModal';
+export { default as ConfirmDialog } from './ConfirmDialog';

package/es/index.js

@@ -7,5 +7,7 @@ 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 ConfirmModal } from './ConfirmModal';
+export { default as ConfirmDialog } from './ConfirmDialog';

package/es/theme/index.js

@@ -39,6 +39,16 @@ theme = createTheme(theme, {
                 root: {
                     color: theme.palette.primary.dark,
                 },
+                asterisk: {
+                    color: theme.palette.error.main,
+                },
+            },
+        },
+        MuiCardHeader: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#e4e9f1',
+                },
             },
         },
         MuiToggleButton: {

package/es/utils/virtualization.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ListboxComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLDivElement>>;

package/es/utils/virtualization.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import ListSubheader from '@mui/material/ListSubheader';
+import { useTheme } from '@mui/material/styles';
+import { VariableSizeList } from 'react-window';
+import Typography from '@mui/material/Typography';
+const LISTBOX_PADDING = 8; // px
+function renderRow(props) {
+    const { data, index, style } = props;
+    const dataSet = data[index];
+    const inlineStyle = {
+        ...style,
+        top: style.top + LISTBOX_PADDING,
+    };
+    if (dataSet.hasOwnProperty('group')) {
+        return (_jsx(ListSubheader, { component: "div", style: inlineStyle, children: dataSet.group }, dataSet.key));
+    }
+    return (_jsx(Typography, { component: "li", ...dataSet[0], noWrap: true, style: inlineStyle, children: dataSet[1] }));
+}
+const OuterElementContext = React.createContext({});
+const OuterElementType = React.forwardRef((props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return _jsx("div", { ref: ref, ...props, ...outerProps });
+});
+function useResetCache(data) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current != null) {
+            ref.current.resetAfterIndex(0, true);
+        }
+    }, [data]);
+    return ref;
+}
+// Adapter for react-window
+export const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
+    const { children, ...other } = props;
+    const itemData = [];
+    children.forEach((item) => {
+        itemData.push(item);
+        itemData.push(...(item.children || []));
+    });
+    const theme = useTheme();
+    const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
+        noSsr: true,
+    });
+    const itemCount = itemData.length;
+    const itemSize = smUp ? 36 : 48;
+    const getChildSize = (child) => {
+        if (child.hasOwnProperty('group')) {
+            return 48;
+        }
+        return itemSize;
+    };
+    const getHeight = () => {
+        if (itemCount > 8) {
+            return 8 * itemSize;
+        }
+        return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+    };
+    const gridRef = useResetCache(itemCount);
+    return (_jsx("div", { ref: ref, children: _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: "100%", ref: gridRef, outerElementType: OuterElementType, innerElementType: "ul", itemSize: (index) => getChildSize(itemData[index]), overscanCount: 5, itemCount: itemCount, children: renderRow }) }) }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -16,7 +16,7 @@
   "module": "es/index.js",
   "types": "es/index.d.ts",
   "scripts": {
-    "build": "tsc",
+    "build": "npm ci && tsc",
     "prerelease": "npm test",
     "release": "npm run build && npm publish --access public",
     "release:alpha": "npm run build && npm publish --access public --tag alpha",
@@ -32,7 +32,8 @@
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.4",
     "@mui/x-date-pickers": "^5.0.0-alpha.5",
-    "date-fns": "^2.28.0"
+    "date-fns": "^2.28.0",
+    "react-window": "^1.8.7"
   },
   "devDependencies": {
     "@babel/core": "^7.17.10",
@@ -42,6 +43,7 @@
     "@storybook/addon-links": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "0.0.11",
+    "@types/react-window": "^1.8.5",
     "babel-loader": "^8.2.5",
     "gh-pages": "^3.2.3",
     "react": "^18.1.0",

package/src/CopyButton/index.tsx

@@ -39,15 +39,15 @@ const CopyButton = ({value, sx, ...props }: CopyButtonProps) => {
           // Spread sx prop at the end to allow sx prop overrides
           ...sx,
         }}
+        startIcon={copied ? (
+          <CheckIcon color='success' fontSize='small' />
+        ) : (
+          <ContentCopyIcon fontSize='small' />
+        )}
         // Spread props at the end to allow prop overrides
         {...props}
       >
-        {copied ? (
-        <CheckIcon color='success' fontSize='small' />
-      ) : (
-        <ContentCopyIcon fontSize='small' />
-      )}
-      {props.children ? props.children : value}
+        {props.children ? props.children : value}
       </Button>
   );
 };

package/src/FieldTypeColor/index.tsx

@@ -1,13 +1,15 @@
 import { useRef } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { Button, InputAdornment } from '@mui/material';
+import { Button, FormControl, FormHelperText, FormLabel, InputAdornment } from '@mui/material';
 import BrushIcon from '@mui/icons-material/Brush';
 
 export interface FieldTypeColorProps extends Omit<OutlinedTextFieldProps, 'variant'> {}
 
-const FieldTypeColor = ({InputProps, InputLabelProps, ...props }: FieldTypeColorProps) => {
+const FieldTypeColor = ({InputProps, label, required, ...props }: FieldTypeColorProps) => {
 
   return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
       <MuiTextField
         size="small"
         variant='outlined'
@@ -31,14 +33,10 @@ const FieldTypeColor = ({InputProps, InputLabelProps, ...props }: FieldTypeColor
           // Spread props at the end to allow Input prop overrides
           ...InputProps,
         }}
-        InputLabelProps={{
-          shrink: true,
-          // Spread props at the end to allow InputLabel prop overrides
-          ...InputLabelProps,
-        }}
         // Spread props at the end to allow prop overrides
         {...props}
       />
+    </FormControl>
   );
 };
 

package/src/FieldTypeDate/FieldTypeDate.stories.tsx

@@ -19,8 +19,5 @@ const Template: Story<FieldTypeDateProps> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   label: 'Date label',
-  textFieldProps: {
-    helperText: 'Date helper text',
-    error: false,
-  }
+  helperText: 'Date helper text',
 };

package/src/FieldTypeDate/index.tsx

@@ -1,36 +1,33 @@
 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 { TextField, TextFieldProps } from '@mui/material';
+import { FormControl, FormLabel, TextField } from '@mui/material';
 
 export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
-  /**
-   * Props passed to TextField component
-   */
-  textFieldProps?: TextFieldProps;
+  helperText?: string;
+  error?: boolean;
+  required?: boolean;
 };
 
-const FieldTypeDate = ({textFieldProps, ...props}: FieldTypeDateProps) => {
+const FieldTypeDate = ({label, helperText, error, required, ...props}: FieldTypeDateProps) => {
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <DatePicker
-        data-testid="zds-date-picker"
-        renderInput={(params) => 
-          <TextField
-            InputLabelProps={{
-              shrink: true,
-               // Spread props at the end to allow InputLabelProps overrides
-              ...textFieldProps?.InputLabelProps,
-            }}
-            {...params}
-             // Spread props at the end to allow textFieldProps overrides
-            {...textFieldProps}
-          />
-        }
-         // Spread props at the end to allow prop overrides
-        {...props}
-      />
-    </LocalizationProvider>
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <DatePicker
+          data-testid="zds-date-picker"
+          renderInput={(params) => 
+            <TextField
+              {...params}
+              helperText={helperText}
+              error={error}
+            />
+          }
+          // Spread props at the end to allow prop overrides
+          {...props}
+        />
+      </LocalizationProvider>
+    </FormControl>
   );
 }
 

package/src/FieldTypeDateTime/FieldTypeDateTime.stories.tsx

@@ -19,8 +19,5 @@ const Template: Story<FieldTypeDateTimeProps> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   label: 'Date label',
-  textFieldProps: {
-    helperText: 'Date helper text',
-    error: false,
-  }
+  helperText: 'Date helper text',
 };

package/src/FieldTypeDateTime/index.tsx

@@ -1,36 +1,34 @@
 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 { TextField, TextFieldProps } from '@mui/material';
+import { TextField, FormControl, FormLabel } from '@mui/material';
 
 export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
-  /**
-   * Props passed to TextField component
-   */
-  textFieldProps?: TextFieldProps;
+  helperText?: string;
+  error?: boolean;
+  required?: boolean;
 };
 
-const FieldTypeDateTime = ({textFieldProps, ...props}: FieldTypeDateTimeProps) => {
+const FieldTypeDateTime = ({label, helperText, error, required, ...props}: FieldTypeDateTimeProps) => {
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <DateTimePicker
-        data-testid="zds-date-picker"
-        renderInput={(params) => 
-          <TextField
-            InputLabelProps={{
-              shrink: true,
-              // Spread props at the end to allow InputLabelProps overrides
-              ...textFieldProps?.InputLabelProps,
-            }}
-            {...params}
-            // Spread props at the end to allow textFieldProps overrides
-            {...textFieldProps}
-          />
-        }
-         // Spread props at the end to allow prop overrides
-        {...props}
-      />
-    </LocalizationProvider>
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <DateTimePicker
+          data-testid="zds-date-picker"
+          renderInput={(params) => 
+            <TextField
+              
+              {...params}
+              helperText={helperText}
+              error={error}
+            />
+          }
+          // Spread props at the end to allow prop overrides
+          {...props}
+        />
+      </LocalizationProvider>
+    </FormControl>
   );
 }
 

package/src/FieldTypeDropdown/FieldTypeDropwdon.stories.tsx

@@ -44,7 +44,8 @@ const Template: Story<FieldTypeDropdownProps> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Placeholder Text...',
-  label: 'Number label',
+  label: 'Dropdown label',
+  helperText: 'Dropdown helper text',
 };
 
 

package/src/FieldTypeDropdown/index.tsx

@@ -1,5 +1,6 @@
 import { MenuItem } from '@mui/material';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { FormControl, FormLabel } from '@mui/material';
 
 interface Option {
   label: string;
@@ -10,19 +11,15 @@ export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'va
   options: Option[];
 }
 
-const FieldTypeDropdown = ({InputLabelProps, options, ...props }: FieldTypeDropdownProps) => {
+const FieldTypeDropdown = ({label, options, required, ...props }: FieldTypeDropdownProps) => {
 
   return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
       <MuiTextField
         size="small"
         variant='outlined'
         select
-        InputLabelProps={{
-          shrink: true,
-          // Spread props at the end to allow InputLabel prop overrides
-          ...InputLabelProps,
-        }}
-        // Spread props at the end to allow prop overrides
         SelectProps={{
           displayEmpty: true,
         }}
@@ -37,6 +34,7 @@ const FieldTypeDropdown = ({InputLabelProps, options, ...props }: FieldTypeDropd
           </MenuItem>
       ))}
       </MuiTextField>
+    </FormControl>
   );
 };
 

package/src/FieldTypeNumber/FieldTypeNumber.stories.tsx

@@ -28,6 +28,7 @@ export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Placeholder Text...',
   label: 'Number label',
+  helperText: 'Number helper text',
 };
 
 

package/src/FieldTypeNumber/index.tsx

@@ -1,22 +1,21 @@
+import { FormControl, FormLabel } from '@mui/material';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 
 export interface FieldTypeNumberProps extends Omit<OutlinedTextFieldProps, 'variant'> {}
 
-const FieldTypeText = ({InputLabelProps, ...props }: FieldTypeNumberProps) => {
+const FieldTypeText = ({label, required, ...props }: FieldTypeNumberProps) => {
 
   return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
       <MuiTextField
         size="small"
         variant='outlined'
         type='number'
-        InputLabelProps={{
-          shrink: true,
-          // Spread props at the end to allow InputLabel prop overrides
-          ...InputLabelProps,
-        }}
         // Spread props at the end to allow prop overrides
         {...props}
       />
+    </FormControl>
   );
 };
 

package/src/FieldTypeOneToMany/FieldTypeOneToMany.stories.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, SyntheticEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeOneToMany, { FieldTypeOneToManyProps } from '.';
+
+export default {
+  title: 'FieldTypeOneToMany',
+  component: FieldTypeOneToMany,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeOneToManyProps> = (args) => {
+  const [value, setValue] = useState<{component: string | ReactNode, value: string, inputLabel: string}[]>([]);
+
+  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>, values: {component: string | ReactNode, value: string, inputLabel: string}[]) => {
+    setValue(values);
+  }
+
+  return (
+    <FieldTypeOneToMany
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      options={options}
+      onOpen={handleOnOpen}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder Text...',
+  label: 'OneToMany label',
+  helperText: 'OneToMany helperText',
+};
+
+
+

package/src/FieldTypeOneToMany/index.tsx

@@ -0,0 +1,90 @@
+import { ReactNode, useState } from 'react';
+import { AutocompleteProps, FormControl, FormLabel, Popper, styled, TextField, TextFieldProps } from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import { ListboxComponent } from '../utils/virtualization';
+
+export interface FieldTypeOneToManyProps extends Omit<AutocompleteProps<any, false, false, false>, 'onOpen' | 'renderInput'> {
+  label?: string;
+  helperText?: string;
+  placeholder?: string;
+  error?: boolean;
+  required?: boolean;
+  /**
+   * Callback to be fired upon opening the dropdown
+   */
+  onOpen: () => Promise<any>;
+  /**
+   * 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 FieldTypeOneToMany = ({label, helperText, placeholder, error, onOpen, options, required, ...props }: FieldTypeOneToManyProps) => {
+  const [loaded, setLoaded] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleOpen = () => {
+    if (!loaded && onOpen) {
+      onOpen().then(() => {
+        setLoading(false);
+      });
+      setLoading(true);
+      setLoaded(true);
+    }
+  };
+
+  return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <Autocomplete
+        onOpen={handleOpen}
+        loading={loading}
+        fullWidth
+        multiple
+        disableListWrap
+        disableClearable
+        disablePortal
+        size='small'
+        PopperComponent={StyledPopper}
+        ListboxComponent={ListboxComponent}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            helperText={helperText}
+            error={error}
+            placeholder={placeholder}
+          />
+        )}
+        options={loading ? [] : options}
+        getOptionLabel={(option) => option.inputLabel}
+        renderOption={(props, option) => [props, option.component]}
+        {...props}
+      />
+    </FormControl>
+  );
+};
+
+export default FieldTypeOneToMany;
+
+const StyledPopper = styled(Popper)({
+  [`& .${autocompleteClasses.listbox}`]: {
+    boxSizing: 'border-box',
+    '& ul': {
+      padding: 0,
+      margin: 0,
+    },
+  },
+});