Improve all Input components

Author: Kubit

src/components/input/components/inputIcon.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ElementOrIcon } from '../../elementOrIcon/elementOrIcon';
 // styles
-import { InputIconStyled } from '../input.styled';
+import { InputIconContainerStyled, InputIconStyled } from '../input.styled';
 import { IInputIcon } from '../types/input';
 
 const InputIconStandAloneComponent = (
@@ -22,10 +22,12 @@ const InputIconStandAloneComponent = (
   };
 
   return (
-    <InputIconStyled
+    <InputIconContainerStyled
       ref={ref}
       $pointerEvents={hasAction}
-      iconPosition={props.iconPosition}
+      inputIconContainerStyles={
+        props.rightIcon ? props.styles?.inputIconContainerRight : props.styles?.inputIconContainer
+      }
       styles={props.styles}
     >
       <ElementOrIcon
@@ -35,7 +37,7 @@ const InputIconStandAloneComponent = (
         {...props.leftIcon}
         onClick={hasAction ? onClick : undefined}
       />
-    </InputIconStyled>
+    </InputIconContainerStyled>
   );
 };
 

src/components/input/input.styled.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 
+import { CommonStyleType } from '@/types/styles/commonStyle';
 import { getStyles } from '@/utils/getStyles/getStyles';
 
 // mixins
@@ -95,6 +96,16 @@ export const LoaderWrapperStyled = styled.div<LoaderStyledProps>`
   ${({ styles }) => getStyles(styles?.loaderContainer)};
 `;
 
+export const InputIconContainerStyled = styled.div<
+  InputIconStyledProps & { inputIconContainerStyles?: CommonStyleType }
+>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: ${({ $pointerEvents }) => ($pointerEvents ? 'auto' : 'none')};
+  ${({ inputIconContainerStyles }) => getStyles(inputIconContainerStyles)};
+`;
+
 export const InputIconStyled = styled.div<InputIconStyledProps>`
   display: flex;
   align-items: center;

src/components/input/stories/argtypes.ts

@@ -709,6 +709,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.ACCESIBILITY,
       },
     },
+    ['aria-required']: {
+      description: 'Aria required prop',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     overrideStyles: {
       description: 'Styles that need to be overridden on the basic input',
       control: false,

src/components/input/stories/input.stories.tsx

@@ -50,6 +50,7 @@ const commonArgs: IInputUnControlled = {
   rightIcon: { icon: ICONS.ICON_CHECKMARK_THICK, altText: 'icon alt text' },
   secondaryLabel: labelSecondary(themeSelected),
   additionalInfo: additionalInfoAction(themeSelected),
+  ['aria-required']: false,
   loader: {
     variant: Object.values(variantsObject[themeSelected].LoaderVariantType || {})[0] as string,
     altText: 'loaderAltText',

src/components/input/types/input.ts

@@ -303,6 +303,7 @@ type InputAriaAttributes = Pick<
   | 'aria-expanded'
   | 'aria-invalid'
   | 'aria-disabled'
+  | 'aria-required'
 >;
 
 // Input types

src/components/inputDropdown/__tests__/inputDropdown.test.tsx

@@ -192,6 +192,31 @@ describe('New Input Dropdown Component', () => {
     expect(input.getAttribute('value')).toBe('option1');
   });
 
+  it('Should allow select an option with customLabel', async () => {
+    renderProvider(
+      <InputDropdown
+        {...mockProps}
+        optionList={{
+          options: [
+            {
+              label: 'option1',
+              value: 'option1',
+              customLabel: 'option1Custom',
+            },
+          ],
+        }}
+      />
+    );
+
+    const inputOption = screen.getByText('option1');
+    await act(async () => {
+      fireEvent.click(inputOption);
+    });
+
+    const input = screen.getByRole(ROLES.COMBOBOX);
+    expect(input.getAttribute('value')).toBe('option1Custom');
+  });
+
   it('Should focus first option with arrow down', async () => {
     renderProvider(
       <InputDropdown

src/components/inputDropdown/components/optionsList.tsx

@@ -36,7 +36,7 @@ export const OptionsListComponent = (
         <ListOptions
           ref={sendRef}
           charsHighlighted={props.searchText?.toString()}
-          id={props['aria-controls']}
+          id={props.optionListId}
           optionVariant={props.stylesListOption.optionVariant}
           options={props.optionList.options}
           optionsContainerArias={{

src/components/inputDropdown/components/popoverSearchList.tsx

@@ -29,7 +29,7 @@ export const PopoverSearchListComponent = (
   const labelInResultTextWrittenByUser = useActionBottomSheet
     ? props.inputPopoverValue
     : props.searchText;
-  const { refInput, refActionBottomSheet } = ref as unknown as MultipleRef;
+  const { refActionBottomSheet } = ref as unknown as MultipleRef;
 
   const renderIconOrMessage = () => {
     if (!props.loading && props.noResultsText?.content) {
@@ -53,6 +53,7 @@ export const PopoverSearchListComponent = (
 
   const renderSearchList = () => (
     <ListContainerStyled
+      data-input-dropdown-list
       $height={props.optionList.options.length ? props.listOptionsHeight : ''}
       styles={props.styles?.[props.state]}
       useActionBottomSheet={useActionBottomSheet}
@@ -67,11 +68,11 @@ export const PopoverSearchListComponent = (
         ) : (
           <OptionsList
             ref={ref}
-            aria-controls={props['aria-controls']}
             loader={props.loader}
             loading={props.loading}
             loadingText={props.loadingText}
             optionList={props.optionList}
+            optionListId={props.optionListId}
             searchText={labelInResultTextWrittenByUser}
             stylesListOption={props.styles.listOptions}
             stylesState={props.styles?.[props.state]}
@@ -84,7 +85,8 @@ export const PopoverSearchListComponent = (
     </ListContainerStyled>
   );
 
-  const showHeaderInput = props.hasInputInSearchList && props.styles?.[props.state]?.allowSearch;
+  const showHeaderInput =
+    props.hasInputInSearchList && (props.allowSearch ?? props.styles?.[props.state]?.allowSearch);
 
   return (
     <PopoverControlled
@@ -98,7 +100,6 @@ export const PopoverSearchListComponent = (
       variant={props.styles?.[props.state]?.popoverVariant?.[props.device]}
       onCloseInternally={() => {
         props.onOpenOptions(false);
-        refInput?.current?.focus();
       }}
     >
       {useActionBottomSheet ? (
@@ -112,6 +113,7 @@ export const PopoverSearchListComponent = (
               props.closeIcon?.onClick?.(e);
             },
           }}
+          dragIcon={props.dragIcon}
           headerContent={
             showHeaderInput && (
               <Input
@@ -134,7 +136,6 @@ export const PopoverSearchListComponent = (
                 // The variant is the same for all the states
                 variant={props.styles?.[props.state]?.inputVariant as string}
                 onChange={props.onInputPopoverChange}
-                onKeyDown={props.onInputPopoverKeyDown}
               />
             )
           }

src/components/inputDropdown/helpers/filterOptions.ts

@@ -1,9 +1,9 @@
-import { ListOptionsOptionType } from '../../listOptions/types/listOptions';
+import { OptionsInputDropdown } from '../types/inputDropdown';
 
 export const filterOptions = (
   value: string | number | undefined,
-  options: ListOptionsOptionType[]
-): ListOptionsOptionType[] => {
+  options: OptionsInputDropdown[]
+): OptionsInputDropdown[] => {
   if (!value) {
     return options;
   }
@@ -15,14 +15,14 @@ export const filterOptions = (
 
 export const findOptionByLabel = (
   label: string | number | undefined,
-  options: ListOptionsOptionType[]
-): ListOptionsOptionType | undefined => {
+  options: OptionsInputDropdown[]
+): OptionsInputDropdown | undefined => {
   return options.find(opt => String(opt.label) === String(label));
 };
 
 export const findOptionByValue = (
   value: string | number | undefined,
-  options: ListOptionsOptionType[]
-): ListOptionsOptionType | undefined => {
+  options: OptionsInputDropdown[]
+): OptionsInputDropdown | undefined => {
   return options.find(opt => String(opt.value) === String(value));
 };

src/components/inputDropdown/hooks/__tests__/useInputDropdown.test.ts

@@ -245,30 +245,6 @@ test('handleInputPopoverChange function', async () => {
   expect(result.current.inputPopoverText).toBe('newValue');
 });
 
-test('handleInputPopoverKeyDown function', async () => {
-  window.matchMedia = windowMatchMedia('onlyDesktop');
-  jest.spyOn(mediaHooks, 'useMediaDevice').mockImplementation(() => DeviceBreakpointsType.DESKTOP);
-  const mockOnBlur = jest.fn();
-  const { result } = renderHook(() =>
-    useInputDropdown({
-      ...mockProps,
-      onBlur: mockOnBlur,
-      value: 'option1',
-    })
-  );
-
-  const mockPreventDefault = jest.fn();
-  const event = {
-    key: 'ArrowDown',
-    preventDefault: mockPreventDefault,
-  } as unknown as React.KeyboardEvent<HTMLInputElement>;
-  act(() => {
-    result.current.handleInputPopoverKeyDown(event);
-  });
-
-  expect(mockPreventDefault).toHaveBeenCalled();
-});
-
 test('handleInputPopoverIconClick function', async () => {
   window.matchMedia = windowMatchMedia('onlyTablet');
   jest.spyOn(mediaHooks, 'useMediaDevice').mockImplementation(() => DeviceBreakpointsType.TABLET);