@bytebrand/fe-ui-core 4.1.23 → 4.1.24

package/source/components/_common/CheckboxMaterial/CheckboxMaterial.tsx

@@ -32,7 +32,7 @@ export interface ICheckboxProps {
   contentType?: string;
 }
 
-const CheckboxMaterial = ({ 
+const CheckboxMaterial = ({
   checked,
   value,
   disabled,
@@ -51,9 +51,12 @@ const CheckboxMaterial = ({
  }: ICheckboxProps) => {
   const [isChecked, setIsChecked] = useState(!!checked);
 
-  useEffect(() => {
-    setIsChecked(!!checked);
-  }, [checked])
+  useEffect(
+    () => {
+      setIsChecked(!!checked);
+    },
+    [checked]
+  );
 
   const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { checked } = event.target;
@@ -83,9 +86,9 @@ const CheckboxMaterial = ({
           styles.color,
           `auto-de-color-${content}`,
           { [styles.iconError]: error }
-        )}></div>
+        )}></div>;
       case 'icon':
-        return <IconSVG customDimensions name={icon} className={classnames(styles.interiorIcon, { [styles.iconError]: error })} />
+        return <IconSVG customDimensions name={icon} className={classnames(styles.interiorIcon, { [styles.iconError]: error })} />;
       case 'door':
         return (
           <div className={styles.doorsContainer}>
@@ -93,27 +96,27 @@ const CheckboxMaterial = ({
               <span className={styles.content}>{content}</span>
             </div>
           </div>
-        )
+        );
       case 'text':
         return (
           <span className={classnames(styles.stickerTextContent, { [styles.iconError]: error })}>
             <span className={classnames(styles.inner, styles.textContent)}>{contentInner}</span>
           </span>
-        )
+        );
       case 'sticker':
         return (
           <span className={classnames(styles.stickerContent, { [styles.iconError]: error })}>
             <span className={classnames(styles.inner, styles.stickerIcon)}>{contentInner}</span>
           </span>
-        )
+        );
       case 'period':
         return (
           <div className={labelClassName} key={value}>
             <span>{value}</span>
           </div>
-        )
+        );
       default:
-        return
+        return;
     }
   };
 
@@ -129,7 +132,7 @@ const CheckboxMaterial = ({
             <IconSVG className={styles.interiorCheckedIcon} customDimensions name={icon} />
             <IconSVG className={styles.interiorCheckedIconCheck} customDimensions name='common_CheckBlue' />
           </div>
-        )
+        );
       case 'door':
         return (
           <div className={styles.doorsContainer}>
@@ -137,55 +140,55 @@ const CheckboxMaterial = ({
               <span className={classnames(styles.content, styles.selected)}>{content}</span>
             </div>
           </div>
-        )
+        );
       case 'text':
         return (
           <span className={styles.stickerTextContent}>
             {content ? <span className={classnames(styles.inner, styles.textContent)}>{contentInner}</span> : false}
             <IconSVG name='common_CheckBlue' className={classnames(styles.checkBlueIcon)} />
           </span>
-        )
+        );
       case 'sticker':
         return (
           <span className={styles.stickerContent}>
             {content ? <span className={classnames(styles.inner, styles.stickerIcon)}>{contentInner}</span> : false}
             <IconSVG name='common_CheckBlue' className={classnames(styles.checkBlueIconSticker, styles.checkBlueIcon)} />
           </span>
-        )
+        );
 
       case 'period':
         return (
           <div className={labelClassName} key={value}>
             <span>{value}</span>
           </div>
-        )
+        );
       default:
-        return
+        return;
     }
-  }
+  };
 
   const checkboxLabel = <span className={styles.checkboxLabel}>{label} {aggregation}</span>;
 
   const checkboxProps = {
-    checked: isChecked, // fix offerDetailedSection withFinalInstallment checkbox bug
     value,
+    className,
     disabled,
+    error,
     icon: renderIcon(),
     checkedIcon: renderCheckedIcon(),
-    className,
     onChange: onChangeHandler,
-    error
-  }
+    checked: isChecked // fix offerDetailedSection withFinalInstallment checkbox bug
+  };
 
   const radioProps = {
     value,
+    error,
     label,
     disabled,
     className,
     icon: renderIcon(),
-    checkedIcon: renderCheckedIcon(),
-    error
-  }
+    checkedIcon: renderCheckedIcon()
+  };
 
   return (
     <FormControlLabel
@@ -201,7 +204,7 @@ const CheckboxMaterial = ({
       labelPlacement={labelPlacement}
       className={formControlClassName}
     />
-  )
-}
+  );
+};
 
 export default CheckboxMaterial;

package/source/components/_common/Chip/Chip.tsx

@@ -21,7 +21,7 @@ const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, className, onC
   return (
     <div key={key}>
       <Chip
-        variant="outlined"
+        variant='outlined'
         label={value}
         onClick= {onClickHandler}
         onDelete={onDeleteHandler}

package/source/components/_common/DropDown/DropDown.tsx

@@ -1,11 +1,10 @@
-import * as React from 'react';
+import React, { FocusEventHandler } from 'react';
 import classnames from 'classnames';
 import Select from 'react-select';
 import Creatable, { CreatableProps } from 'react-select/creatable';
 // import { Props as SelectProps } from 'react-select/base';
 import { SelectComponentsConfig } from 'react-select/src/components';
 import { ActionMeta, ValueType, OptionsType } from 'react-select/src/types';
-import { FocusEventHandler } from 'react';
 
 import styles from './DropDown.styl';
 import { ClearIndicatorDefault } from './DropDownComponents';

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

@@ -10,13 +10,6 @@ export const Theme = createTheme({
         }
       }
     },
-    // MuiCollapse: {
-    //   styleOverrides: {
-    //     root: {
-          
-    //     }
-    //   }
-    // },
     MuiAccordionSummary: {
       styleOverrides: {
         root: {
@@ -27,9 +20,9 @@ export const Theme = createTheme({
           fontSize: 13,
           margin: 0,
           padding: '12px 0',
-          textTransform: 'uppercase',
+          textTransform: 'uppercase'
         }
       }
     }
   }
-});
+});

package/source/components/_common/IconSVG/IconSVGConfig.tsx

@@ -603,7 +603,7 @@ const components: IComponentsProp = {
   copyIcon: CopyIcon,
   doneIcon: DoneIcon,
 
-  //settings
+  // settings
   accountIcon: AccountIcon,
   securityIcon: SecurityIcon,
   dataUsageIcon: DataUsageIcon,
@@ -624,6 +624,8 @@ const components: IComponentsProp = {
   autocheck: Autocheck,
   shoppingCart: ShoppingCart,
   mobiledeLogo: MobileDeLogo
+
+  // user menu
 };
 
 export default components;

package/source/components/_common/IconSVG/SVG/settings/RemoveEye.tsx

@@ -14,4 +14,4 @@ const SvgRemoveEye = (props: any) => (
 );
 
 export default SvgRemoveEye;
-/* tslint:enable */
+/* tslint:enable */

package/source/components/_common/MaterialAccordion/MaterialAccordion.tsx

@@ -4,7 +4,7 @@ import IconSVG from '../IconSVG/IconSVG';
 import {
   ThemeProvider,
   createTheme,
-  experimental_sx as sx,
+  experimental_sx as sx
 } from '@mui/material/styles';
 
 export interface IItem {
@@ -22,14 +22,14 @@ export interface IAccordionProps {
 }
 
 declare module '@mui/material/AccordionSummary' {
-  interface AccordionSummaryPropsVariantOverrides {
+  interface IAccordionSummaryPropsVariantOverrides {
     searchDetailed: true;
     searchDetailedSmall: true;
   }
 }
 
 declare module '@mui/material/Accordion' {
-  interface AccordionPropsVariantOverrides {
+  interface IAccordionPropsVariantOverrides {
     searchDetailed: true;
     searchDetailedSmall: true;
   }
@@ -40,65 +40,65 @@ const MaterialAccordion = (
     defaultOpened,
     expandedDefault,
     items,
-    variant,
+    variant
   }: IAccordionProps) => {
 
-    const theme = createTheme({
-      components: {
-        MuiAccordion: {
-          variants: [
-            {
-              props: { variant: 'searchDetailed' },
-              style: {
-                margin: 0,
-                '&.Mui-expanded': {
-                  margin: 0
-                },
-                '&.MuiAccordion-root:before': {
-                  opacity: 0
-                }
-              }
-            },
-            {
-              props: { variant: 'searchDetailedSmall' },
-              style: {
-                margin: 0,
-                boxShadow: 'none',
-                '&.Mui-expanded': {
-                  margin: 0
-                },
-                '&.MuiAccordion-root:before': {
-                  opacity: 0
-                }
+  const theme = createTheme({
+    components: {
+      MuiAccordion: {
+        variants: [
+          {
+            props: { variant: 'searchDetailed' },
+            style: {
+              margin: 0,
+              '&.Mui-expanded': {
+                margin: 0
               },
+              '&.MuiAccordion-root:before': {
+                opacity: 0
+              }
             }
-          ]
-        },
-        MuiAccordionSummary: {
-          variants: [
-            {
-              props: { variant: 'searchDetailed' },
-              style: {
-                color: '#005ccb',
-                fontWeight: 'bold',
-                fontSize: 14,
-                '&.Mui-expanded': {
-                  borderBottom: '1px solid #e8e8e8'
-                }
-              },
-            },
-            {
-              props: { variant: 'searchDetailedSmall' },
-              style: {
-                color: '1f1f1f',
-                fontWeight: 'bold',
-                fontSize: 14
+          },
+          {
+            props: { variant: 'searchDetailedSmall' },
+            style: {
+              margin: 0,
+              boxShadow: 'none',
+              '&.Mui-expanded': {
+                margin: 0
               },
+              '&.MuiAccordion-root:before': {
+                opacity: 0
+              }
             }
-          ],
-        },
+          }
+        ]
       },
-    });
+      MuiAccordionSummary: {
+        variants: [
+          {
+            props: { variant: 'searchDetailed' },
+            style: {
+              color: '#005ccb',
+              fontWeight: 'bold',
+              fontSize: 14,
+              '&.Mui-expanded': {
+                borderBottom: '1px solid #e8e8e8'
+              }
+            }
+          },
+          {
+            props: { variant: 'searchDetailedSmall' },
+            style: {
+              color: '1f1f1f',
+              fontWeight: 'bold',
+              fontSize: 14
+            }
+          }
+        ]
+      }
+    }
+  });
 
   const renderItems = (): React.ReactNode => {
     const [expanded, setExpanded] = useState(expandedDefault || false);
@@ -144,6 +144,6 @@ const MaterialAccordion = (
       {renderItems()}
     </div>
   );
-}
+};
 
 export default MaterialAccordion;

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

@@ -11,17 +11,17 @@ export const Theme = createTheme({
           top: 'calc(50% - 12px)'
         },
         popupIndicator: {
-          padding: 4,
+          padding: 4
         },
         root: ({ ownerState }) => ({
-          ['&.Mui-focused + [data-popper-placement*="bottom"] .MuiOutlinedInput-root']: {
+          ['&.Mui-focused + [data-popper-placement*=`bottom`] .MuiOutlinedInput-root']: {
             borderTopRightRadius: 0,
             borderTopLeftRadius: 0
           },
           ['&.Mui-focused + [data-popper-placement*="bottom"] .MuiOutlinedInput-notchedOutline']: {
             ...(ownerState.name === 'mobileSearch' && { // tslint:disable-line
               borderTop: isMobileOnly ? '2px solid #1976d2' : 0
-            }),
+            })
           },
           ['&.Mui-focused .MuiInputLabel-root']: {
             zIndex: 9999
@@ -32,7 +32,7 @@ export const Theme = createTheme({
             borderLeft: '1px solid rgba(0, 0, 0, 0.23)',
             borderRight: '1px solid rgba(0, 0, 0, 0.23)',
             borderTop: '1px solid rgba(0, 0, 0, 0.23)',
-            marginLeft: 0,
+            marginLeft: 0
           },
           ['&.Mui-focused + [data-popper-placement*="top"] > .MuiPaper-root']: {
             borderBottomLeftRadius: 0,
@@ -135,10 +135,10 @@ export const Theme = createTheme({
               backgroundColor: '#e8e8e8'
             },
             ['& > .MuiChip-root > span:after']: {
-              content: "','"
+              content: `','`
             },
             ['& > .MuiChip-root + .MuiChip-root > span:after']: {
-              content: "''"
+              content: `''`
             },
             ['&.Mui-disabled']: {
               pointerEvents: 'none',
@@ -150,36 +150,36 @@ export const Theme = createTheme({
           },
           ['& .MuiAutocomplete-input']: {
             ...(ownerState.name === 'mobileSearch' && {
-              textAlign: isMobileOnly ? 'right !important' : 'left',
+              textAlign: isMobileOnly ? 'right !important' : 'left'
             })
           },
           ...(ownerState.size === 'custom' && {
-              height: isMobileOnly ? 56 : 48,
-              boxSizing: 'border-box',
-              backgroundColor: '#fff',
-              paddingRight: '42px !important',
+            height: isMobileOnly ? 56 : 48,
+            boxSizing: 'border-box',
+            backgroundColor: '#fff',
+            paddingRight: '42px !important',
 
-              ['& .MuiOutlinedInput-input']: {
-                padding: '5.5px 4px 7.5px 6px !important'
-              }
+            ['& .MuiOutlinedInput-input']: {
+              padding: '5.5px 4px 7.5px 6px !important'
+            }
           }),
           ...(ownerState.name === 'mobileSearch' && {
-              color: isMobileOnly ? '#005ccb' : 'rgba(0, 0, 0, 0.87)',
-              backgroundColor: isMobileOnly ? 'transparent' : '#fff',
-              paddingRight: isMobileOnly ? '33px !important' : '42px !important',
-              textAlign: isMobileOnly ? 'right !important' : 'left',
-              ['& .MuiOutlinedInput-notchedOutline']: {
-                borderWidth: isMobileOnly ? 0 : 1
-              },
-              'input': {
-                ['&::placeholder']: {
-                  color: isMobileOnly ? '#005ccb !important' : 'rgba(0, 0, 0, 0.87) !important'
-                },
-              },
-              ['&.Mui-focused .MuiOutlinedInput-notchedOutline']: {
-                borderWidth: isMobileOnly ? 0 : 1
+            color: isMobileOnly ? '#005ccb' : 'rgba(0, 0, 0, 0.87)',
+            backgroundColor: isMobileOnly ? 'transparent' : '#fff',
+            paddingRight: isMobileOnly ? '33px !important' : '42px !important',
+            textAlign: isMobileOnly ? 'right !important' : 'left',
+            ['& .MuiOutlinedInput-notchedOutline']: {
+              borderWidth: isMobileOnly ? 0 : 1
+            },
+            input: {
+              ['&::placeholder']: {
+                color: isMobileOnly ? '#005ccb !important' : 'rgba(0, 0, 0, 0.87) !important'
               }
-        })
+            },
+            ['&.Mui-focused .MuiOutlinedInput-notchedOutline']: {
+              borderWidth: isMobileOnly ? 0 : 1
+            }
+          })
         })
       }
     }
@@ -197,5 +197,5 @@ export const FlexWrap = styled('div')({
 });
 
 export const CheckboxLabel = styled('span')({
-  whiteSpace: 'pre-line' 
-})
+  whiteSpace: 'pre-line'
+});

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

@@ -11,12 +11,12 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { Theme, ArrowSelect, CheckboxLabel } from './MaterialAutocomplete.styled';
 import isEqual from 'lodash/isEqual';
 
-export interface Items {
+export interface IItems {
   value: string | number;
   label: string;
   isDisabled?: boolean;
   isSeries?: boolean;
-};
+}
 
 interface IFilmOptionType {
   inputValue?: string;
@@ -79,7 +79,7 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
   placeholder
 }: IMaterialAutocompleteProps) => {
   const filter = createFilterOptions<IFilmOptionType>();
-  
+
   return (
     <ThemeProvider theme={Theme}>
       <Autocomplete
@@ -101,10 +101,10 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
             onChange(newValue);
           } else if (newValue && newValue.inputValue) {
             onChange(newValue.inputValue);
-          } else { 
+          } else {
             if (multiple) {
               if (_indexOf(value, details.option) !== -1) {
-                onChange(_filter(newValue, (value) => details.option !== value));
+                onChange(_filter(newValue, value => details.option !== value));
               } else {
                 onChange(newValue);
               }
@@ -115,15 +115,15 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
             }
           }
         }}
-        getOptionDisabled={(option) => option.isDisabled || option.label === 'default'}
+        getOptionDisabled={option => option.isDisabled || option.label === 'default'}
         filterOptions={(options, params) => {
 
           const filtered = filter(options, params);
-  
+
           const { inputValue } = params;
           // Suggest the creation of a new value
 
-          const isExisting = options.some((option) => inputValue === option.label);
+          const isExisting = options.some(option => inputValue === option.label);
           if (inputValue !== '' && !isExisting && freeSolo) {
             filtered.push({
               value: inputValue,
@@ -158,26 +158,25 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
                 <Checkbox checked={_indexOf(value, props.key) !== -1} />
                 <CheckboxLabel>{t(`cbd:${option}`)}</CheckboxLabel>
               </li>
-            )
-          } else {
-            const isSeries = (option.isDisabled && option.label !== 'No options') || option.isSeries;
-            const label = isSeries ? option.label.toUpperCase() : option.label;
-            return (
-              <li
-                {...props}
-                key={_uniqueId(option.label)}
-                style={isSeries ? {
-                  backgroundColor: 'rgba(58, 53, 65, 0.08)',
-                  color: 'rgba(76, 78, 100, 0.87)',
-                  fontWeight: 600
-                } : null}
-              >
-                {label}
-              </li>
-            )
+            );
           }
+          const isSeries = (option.isDisabled && option.label !== 'No options') || option.isSeries;
+          const label = isSeries ? option.label.toUpperCase() : option.label;
+          return (
+            <li
+              {...props}
+              key={_uniqueId(option.label)}
+              style={isSeries ? {
+                backgroundColor: 'rgba(58, 53, 65, 0.08)',
+                color: 'rgba(76, 78, 100, 0.87)',
+                fontWeight: 600
+              } : null}
+            >
+              {label}
+            </li>
+          );
         }}
-        renderInput={(params) => (
+        renderInput={params => (
           <TextField
             {...params}
             type={type}
@@ -222,5 +221,5 @@ export default memo(MaterialAutocomplete, (prevProps: any, nextProps: any) => {
          prevProps.error === nextProps.error &&
          prevProps.label === nextProps.label &&
          isEqual(prevProps.items, nextProps.items) &&
-         (!_isEmpty(prevProps.items) ? prevProps.items[0].label === nextProps.items[0].label : false) // condition for radioButtons KW PS
+         (!_isEmpty(prevProps.items) ? prevProps.items[0].label === nextProps.items[0].label : false); // condition for radioButtons KW PS
 });

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

@@ -5,17 +5,17 @@ export const Theme = createTheme({
     MuiOutlinedInput: {
       styleOverrides: {
         input: ({ ownerState }) => ({
-          ...(ownerState.size === "smaller" && {
+          ...(ownerState.size === 'smaller' && {
             // tslint:disable-line
             height: 28,
             boxSizing: 'border-box'
           }),
-          ...(ownerState.size === "custom" && {
+          ...(ownerState.size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box'
-          }),
-        }),
-      },
-    },
-  },
+          })
+        })
+      }
+    }
+  }
 });

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -83,12 +83,12 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
         placeholder={placeholder}
         InputProps={{
           endAdornment: type === 'password' ? (
-            <InputAdornment position="end">
+            <InputAdornment position='end'>
               <IconButton
-                aria-label="toggle password visibility"
+                aria-label='toggle password visibility'
                 onClick={handleClickShowPassword}
                 onMouseDown={handleMouseDownPassword}
-                edge="end"
+                edge='end'
               >
                 {showPassword ? <IconSVG name='removeEyeIcon' customDimensions /> : <IconSVG name='removeEyeIcon' customDimensions />}
               </IconButton>

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

@@ -65,7 +65,7 @@ export const Theme = createTheme({
           },
           ['::-webkit-scrollbar-thumb:hover']: {
             backgroundColor: 'grey'
-          },
+          }
         }
       }
     },
@@ -124,10 +124,10 @@ export const FlexWrap = styled('div')({
 
   ['& > span:after']: {
     position: 'relative',
-    content: "', '"
+    content: `', '`
   },
   ['& > span:last-of-type:after']: {
     position: 'relative',
-    content: "''"
+    content: `''`
   }
 });