@bytebrand/fe-ui-core 4.2.66 → 4.2.67

package/__tests__/components/_common/MaterialAutocomplete/MaterialAutocomplete.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import MaterialAutocomplete from "../../../../source/components/_common/MaterialAutocomplete/MaterialAutocomplete";
+let value: any = null;
+const setValue = jest.fn();
+const materialAutocompleteProps = {
+  onChange: setValue,
+  label: 'test label',
+  value: value,
+  error: false,
+  required: true,
+  items: [
+    { value: '+49', label: '+49', icon: 'de' },
+    { value: '+43', label: '+43', icon: 'at' }
+  ],
+  listWithImage: 'true'
+}
+describe('MaterialAutocomplete', () => {
+  it('renders component without errors', () => {
+    const { container, getByRole, getByText } = render(<MaterialAutocomplete {...materialAutocompleteProps} />)
+    expect(container).toBeInTheDocument();
+    const input = getByRole('combobox');
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const listItem = getByText('+43');
+    fireEvent.click(listItem);
+    expect(input).toHaveAttribute('value', '+43');
+  })
+
+  it('renders component, open list and choose any option from list', () => {
+    const { getByRole, getByText } = render(<MaterialAutocomplete {...materialAutocompleteProps} />)
+    const input = getByRole('combobox');
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const listItem = getByText('+43');
+    fireEvent.click(listItem);
+    expect(input).toHaveAttribute('value', '+43');
+  })
+
+  it('renders component, open list and check if we have icons in list, when "listWithImage: true"', () => {
+    const { getByRole, container } = render(<MaterialAutocomplete {...materialAutocompleteProps} />)
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const iconDe = container.querySelector('[id="flag-icons-de"]'); 
+    const iconAt = container.querySelector('[id="flag-icons-at"]'); 
+    expect(iconDe).toBeInTheDocument();
+    expect(iconAt).toBeInTheDocument();
+  })
+})

package/package.json

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

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

@@ -114,9 +114,9 @@ export const Theme = createTheme({
     },
     MuiInputLabel: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
+        root: ({ ownerState: { size } }: { ownerState: { size?: string } }) => ({
           maxWidth: 'calc(100% - 28px)',
-          ...(ownerState.size === 'custom' && { // tslint:disable-line
+          ...(size === 'custom' && {
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
@@ -127,8 +127,8 @@ export const Theme = createTheme({
     },
     MuiOutlinedInput: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
-          ...(ownerState.size === 'small' && {
+        root: ({ ownerState: { size, name } }: { ownerState: { size?: string, name?: string } }) => ({
+          ...(size === 'small' && {
             paddingRight: '0 !important',
             flexWrap: 'nowrap !important',
             backgroundColor: '#fff',
@@ -150,11 +150,11 @@ export const Theme = createTheme({
             opacity:'0.38'
           },
           ['& .MuiAutocomplete-input']: {
-            ...(ownerState.name === 'mobileSearch' && {
+            ...(name === 'mobileSearch' && {
               textAlign: isMobileOnly ? 'right !important' : 'left'
             })
           },
-          ...(ownerState.size === 'custom' && {
+          ...(size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box',
             backgroundColor: '#fff',
@@ -164,7 +164,7 @@ export const Theme = createTheme({
               padding: '5.5px 4px 7.5px 6px !important'
             }
           }),
-          ...(ownerState.name === 'mobileSearch' && {
+          ...(name === 'mobileSearch' && {
             color: isMobileOnly ? '#005ccb' : 'rgba(0, 0, 0, 0.87)',
             backgroundColor: isMobileOnly ? 'transparent' : '#fff',
             paddingRight: isMobileOnly ? '33px !important' : '42px !important',
@@ -181,7 +181,7 @@ export const Theme = createTheme({
               borderWidth: isMobileOnly ? 0 : 1
             }
           })
-        })
+        } as any)
       }
     }
   }

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

@@ -11,6 +11,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { Theme, ArrowSelect, CheckboxLabel } from './MaterialAutocomplete.styled';
 import isEqual from 'lodash/isEqual';
 import IconSVG from '../IconSVG/IconSVG';
+import { isMobileOnly } from 'react-device-detect';
 
 export interface IItems {
   value: string | number;
@@ -100,11 +101,8 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
         multiple={multiple}
         handleHomeEndKeys
         value={value}
-        name={name}
-        error={error ? error.toString() : ''}
         readOnly={readOnly}
-        listwithimage={listWithImage}
-        onChange={(e, newValue, reason: string, details?: { option: any }) => {
+        onChange={(e, newValue, _: string, details?: { option: any }) => {
           e.persist();
           if (typeof newValue === 'string') {
             onChange(newValue);
@@ -150,17 +148,16 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
         }}
         options={multiple ? items.map(option => option.label) : items}
         ListboxProps={{
-          sx: {
-            maxHeight: {
-              xs: MOBILE_ITEM_HEIGHT * MENU_ITEMS,
-              sm: ITEM_HEIGHT * MENU_ITEMS
-            }
+          style: {
+            maxHeight: isMobileOnly ?
+              MOBILE_ITEM_HEIGHT * MENU_ITEMS
+              : ITEM_HEIGHT * MENU_ITEMS
           }
         }}
         forcePopupIcon
         popupIcon={disableIcon ? '' : <ArrowSelect name='arrowSelect' customDimensions />}
         isOptionEqualToValue={(option, value) => option.value === value}
-        renderOption={(props, option) => {
+        renderOption={(props: any, option) => {
           if (multiple) {
             return (
               <li {...props}>
@@ -218,8 +215,7 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
             InputProps={{ ...params.InputProps, readOnly }}
           />
         )}
-      >
-      </Autocomplete>
+      />
     </ThemeProvider>
   );
 };

package/tsconfig.json

@@ -58,6 +58,8 @@
   },
   "exclude": [
     "node_modules",
-    "static"
+    "static",
+    "__tests__",
+    "**/*.js"
   ]
 }

package/tslint.json

@@ -20,7 +20,6 @@
     "no-console": [true, "warn", "error"],
     "switch-default": true,
     "no-empty-interface": true,
-    // "no-magic-numbers": [true, 0, -1, 1, 2, 10, 8, 16],
     "no-parameter-reassignment": true,
     "no-duplicate-switch-case": true,
     "no-duplicate-imports": true,