@bytebrand/fe-ui-core 4.1.152 → 4.1.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.152",
+  "version": "4.1.153",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/MaterialAutocomplete/MaterialAutocomplete.styled.tsx

@@ -115,7 +115,7 @@ export const Theme = createTheme({
     MuiInputLabel: {
       styleOverrides: {
         root: ({ ownerState }) => ({
-          maxWidth: 'calc(100% - 30px)',
+          maxWidth: 'calc(100% - 28px)',
           ...(ownerState.size === 'custom' && { // tslint:disable-line
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {

package/source/components/_common/MaterialAutocomplete/MaterialAutocomplete.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { TextField, Checkbox } from '@mui/material';
+import { TextField, Checkbox, Box, Divider } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import _isEmpty from 'lodash/isEmpty';
 import _indexOf from 'lodash/indexOf';
@@ -10,6 +10,7 @@ import _get from 'lodash/get';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { Theme, ArrowSelect, CheckboxLabel } from './MaterialAutocomplete.styled';
 import isEqual from 'lodash/isEqual';
+import IconSVG from '../IconSVG/IconSVG';
 
 export interface IItems {
   value: string | number;
@@ -50,6 +51,8 @@ export interface IMaterialAutocompleteProps {
   disableIcon?: boolean;
   name?: string;
   placeholder?: string;
+  readOnly?:boolean,
+  listWithImage?:boolean
 }
 
 const ITEM_HEIGHT = 36;
@@ -76,7 +79,10 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
   items,
   disableIcon,
   name,
-  placeholder
+  placeholder,
+  readOnly,
+  listWithImage
+
 }: IMaterialAutocompleteProps) => {
   const filter = createFilterOptions<IFilmOptionType>();
 
@@ -96,6 +102,8 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
         value={value}
         name={name}
         error={error}
+        readOnly={readOnly}
+        listwithimage={listWithImage}
         onChange={(e, newValue, reason: string, details?: { option: any }) => {
           if (typeof newValue === 'string') {
             onChange(newValue);
@@ -160,6 +168,22 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
               </li>
             );
           }
+          if (listWithImage){
+            return(
+            <><Box component='li'
+                sx={{ '& > svg': { mr: 2, flexShrink: 0 } }}
+                {...props}
+                key={_uniqueId(option.label)}>
+                <IconSVG
+                  customDimensions
+                  width='26px'
+                  height='16px'
+                  name={option.icon} />
+                {option.value}
+              </Box>
+              {option.isDivider ? <Divider /> : null}</>
+            );
+          }
           const isSeries = (option.isDisabled && option.label !== 'No options') || option.isSeries;
           const label = isSeries ? option.label.toUpperCase() : option.label;
           return (
@@ -189,6 +213,7 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
             label={label}
             name={name}
             placeholder={placeholder}
+            InputProps={{ ...params.InputProps, readOnly }}
           />
         )}
       >