Enhance InputSearch and Option components with focus states and updates

This commit enhances the InputSearch and Option components by removing valueSearchSelected from useInputSearch.ts and inputSearch.tsx, adding focus states in option.tsx and optionStandAlone.tsx, and updating the corresponding tests and styles. The InputSearchComponent now uses searchText instead of value. The Option and OptionStandAlone components have been updated to handle focus states, with updates to the IOptionStandAlone interface and OptionStateType enum. Tests and styles have been updated to reflect these changes, improving the user experience and accessibility of these components.

Author: Hector Arce De Las Heras

src/components/inputSearch/hooks/useInputSearch.ts

@@ -84,7 +84,6 @@ type ReturnType = {
   handleChangeInputSearch: ChangeEventHandler<HTMLInputElement>;
   handleInputKeyDown: KeyboardEventHandler<HTMLInputElement>;
   handleInputPopoverKeyDown: KeyboardEventHandler<HTMLInputElement>;
-  valueSearchSelected?: string;
   state: InputState;
   handleBlurInternal: FocusEventHandler<HTMLInputElement>;
   handleFocusInternal: FocusEventHandler<HTMLInputElement>;

src/components/inputSearch/inputSearch.tsx

@@ -56,7 +56,6 @@ const InputSearchComponent = React.forwardRef(
       optionsFiltered,
       searchText,
       inputPopoverText,
-      valueSearchSelected,
       showHighlightedOption,
       handleChangeInputSearch,
       handleClickInputSearch,
@@ -128,7 +127,7 @@ const InputSearchComponent = React.forwardRef(
         state={state}
         styles={styles}
         type={type}
-        value={valueSearchSelected}
+        value={searchText}
         onBlur={handleBlurInternal}
         onChange={handleChangeInputSearch}
         onClick={handleClickInputSearch}

src/components/inputSearch/inputSearchStandAlone.tsx

@@ -9,7 +9,6 @@ import { isKeyTabPressed } from '@/utils';
 import { AUTOCOMPLETE_TYPE } from '../input/types/input';
 import { PopoverSearchList } from './components';
 // helpers
-import { getAriaControls } from './helpers';
 import { MultipleRef } from './hooks/useInputSearch';
 // styles
 import { InputSearchStyled } from './inputSearch.styled';
@@ -26,7 +25,6 @@ export const InputSearchStandAloneComponent = (
   const { refInput, refIcon } = ref as unknown as MultipleRef;
 
   const sendRef = { refInput: refInput, refIcon: refIcon };
-
   return (
     <InputSearchStyled
       data-testid={`${props.dataTestId}InputSearch`}
@@ -40,7 +38,7 @@ export const InputSearchStandAloneComponent = (
         <Input
           {...props}
           ref={sendRef as unknown as ForwardedRef<HTMLInputElement | undefined | null> | undefined}
-          aria-controls={props.open ? getAriaControls(props.optionList, ariaControls) : undefined}
+          aria-controls={props.open ? ariaControls : undefined}
           aria-expanded={props.open}
           aria-haspopup={PopoverComponentType.DIALOG}
           autocomplete={props.autocomplete || AUTOCOMPLETE_TYPE.OFF}
@@ -96,6 +94,7 @@ export const InputSearchStandAloneComponent = (
         noResultsText={props.noResultsText}
         open={props.open}
         optionList={props.optionList}
+        optionsListDefaultArias={props.optionsListDefaultArias}
         preventCloseOnClickElements={[
           (refInput as MutableRefObject<HTMLInputElement | null | undefined>)?.current,
           (refIcon as MutableRefObject<HTMLSpanElement | null | undefined>)?.current,

src/components/option/__tests__/option.test.tsx

@@ -80,19 +80,41 @@ describe('Option component', () => {
     const option = screen.getByText(mockProps.label);
 
     const disabled = undefined;
+    const focused = false;
     const selected = undefined;
     const multiSelected = undefined;
     let hover = false;
     const filling = false;
-    expect(getStateSpy).toHaveBeenCalledWith(disabled, selected, multiSelected, hover, filling);
+    expect(getStateSpy).toHaveBeenCalledWith(
+      disabled,
+      focused,
+      selected,
+      multiSelected,
+      hover,
+      filling
+    );
 
     fireEvent.mouseEnter(option);
     hover = true;
-    expect(getStateSpy).toHaveBeenCalledWith(disabled, selected, multiSelected, hover, filling);
+    expect(getStateSpy).toHaveBeenCalledWith(
+      disabled,
+      focused,
+      selected,
+      multiSelected,
+      hover,
+      filling
+    );
 
     fireEvent.mouseLeave(option);
     hover = false;
-    expect(getStateSpy).toHaveBeenCalledWith(disabled, selected, multiSelected, hover, filling);
+    expect(getStateSpy).toHaveBeenCalledWith(
+      disabled,
+      focused,
+      selected,
+      multiSelected,
+      hover,
+      filling
+    );
   });
 
   it('A checked icon could be shown when its multiselect and its selected', () => {

src/components/option/option.tsx

@@ -6,17 +6,19 @@ import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { useGenericComponents } from '@/provider/genericComponents';
 
 import { OptionStandAlone } from './optionStandAlone';
-import { IOption, IOptionStandAlone, OptionPropsStylesType } from './types';
+import { IOption, IOptionStandAlone, OptionPropsStylesType, OptionStateType } from './types';
 
 export const OptionComponent = React.forwardRef(
   <V extends string | unknown>(
-    { variant, focus, ctv, ...props }: IOption<V>,
+    { variant, focus, onFocus, onBlur, ctv, ...props }: IOption<V>,
     ref: React.ForwardedRef<HTMLElement> | undefined | null
   ): JSX.Element => {
     const styles = useStyles<OptionPropsStylesType, V>(STYLES_NAME.OPTION, variant, ctv);
+    const hasFocusStyles = !!styles?.[OptionStateType.FOCUS];
     const { LINK: genericLinkComponent } = useGenericComponents();
     const innerRef = React.useRef<HTMLElement>();
     const [hover, setHover] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
 
     React.useImperativeHandle(
       ref,
@@ -32,13 +34,25 @@ export const OptionComponent = React.forwardRef(
       }
     }, [focus]);
 
+    const _onFocus = (event: React.FocusEvent<HTMLElement>) => {
+      onFocus?.(event);
+      setFocused(hasFocusStyles);
+    };
+    const _onBlur = (event: React.FocusEvent<HTMLElement>) => {
+      onBlur?.(event);
+      setFocused(false);
+    };
+
     return (
       <OptionStandAlone
         {...props}
         ref={innerRef}
         componentLink={genericLinkComponent}
+        focus={focused}
         hover={hover}
         styles={styles}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
       />

src/components/option/optionStandAlone.tsx

@@ -25,7 +25,14 @@ const OptionStandAlone = React.forwardRef(
   (props: IOptionStandAlone, ref: React.ForwardedRef<HTMLElement | undefined>) => {
     const ariaProps = pickAriaProps(props);
     const filling = !!props.labelCharsHighlighted && props.labelCharsHighlighted?.length > 0;
-    const state = getState(props.disabled, props.selected, props.multiSelect, props.hover, filling);
+    const state = getState(
+      props.disabled,
+      props.focus,
+      props.selected,
+      props.multiSelect,
+      props.hover,
+      filling
+    );
     const stateStyles = props.styles[state];
     const disabled = state === OptionStateType.DISABLED;
 
@@ -59,6 +66,7 @@ const OptionStandAlone = React.forwardRef(
         role={props.role}
         tabIndex={props.tabIndex}
         url={props.url}
+        onBlur={props.onBlur}
         onClick={handleClickOption}
         onFocus={props.onFocus}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {

src/components/option/types/option.ts

@@ -37,6 +37,7 @@ export interface IOptionStandAlone extends OptionAriaAttributes {
   onMouseEnter: React.MouseEventHandler<HTMLElement>;
   onMouseLeave: React.MouseEventHandler<HTMLElement>;
   onFocus?: React.FocusEventHandler<HTMLElement>;
+  onBlur?: React.FocusEventHandler<HTMLElement>;
   role?: ROLES;
   componentLink?: GenericLinkType;
   dataTestId?: string;

src/components/option/types/state.ts

@@ -12,4 +12,5 @@ export enum OptionStateType {
   MULTIPLE_SELECTED = 'MULTIPLE_SELECTED',
   MULTIPLE_SELECTED_HOVER = 'MULTIPLE_SELECTED_HOVER',
   DISABLED = 'DISABLED',
+  FOCUS = 'FOCUS',
 }

src/components/option/utils/__tests__/option.utils.test.ts

@@ -4,86 +4,108 @@ import { getHighlightedIndexes, getState } from '../option.utils';
 describe('OptionUtils - getState', () => {
   it('Should be DISABLED when disabled is true', () => {
     const disabled = true;
+    const focused = false;
     const selected = false;
     const multiSelected = false;
     const hover = false;
     const filling = false;
-    expect(getState(disabled, selected, multiSelected, hover, filling)).toBe(
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
       OptionStateType.DISABLED
     );
   });
 
+  it('Should be FOCUS when focused is true', () => {
+    const disabled = false;
+    const focused = true;
+    const selected = false;
+    const multiSelected = false;
+    const hover = false;
+    const filling = false;
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
+      OptionStateType.FOCUS
+    );
+  });
+
   it('Should be MULTIPLE_SELECTED_HOVER when selected, multiSelected and hover', () => {
     const disabled = false;
+    const focused = false;
     const selected = true;
     const multiSelected = true;
     const hover = true;
     const filling = false;
-    expect(getState(disabled, selected, multiSelected, hover, filling)).toBe(
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
       OptionStateType.MULTIPLE_SELECTED_HOVER
     );
   });
 
   it('Should be MULTIPLE_SELECTED when selected and multiSelected', () => {
     const disabled = false;
+    const focused = false;
     const selected = true;
     const multiSelected = true;
     const hover = false;
     const filling = false;
-    expect(getState(disabled, selected, multiSelected, hover, filling)).toBe(
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
       OptionStateType.MULTIPLE_SELECTED
     );
   });
 
   it('Should be SELECTED_HOVER when selected and hover', () => {
     const disabled = false;
+    const focused = false;
     const selected = true;
     const multiSelected = false;
     const hover = true;
     const filling = false;
-    expect(getState(disabled, selected, multiSelected, hover, filling)).toBe(
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
       OptionStateType.SELECTED_HOVER
     );
   });
 
   it('Should be SELECTED when selected', () => {
     const disabled = false;
+    const focused = false;
     const selected = true;
     const multiSelected = false;
     const hover = false;
     const filling = false;
-    expect(getState(disabled, selected, multiSelected, hover, filling)).toBe(
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
       OptionStateType.SELECTED
     );
   });
 
   it('Should be HOVER when hover', () => {
     const disabled = false;
+    const focused = false;
     const selected = false;
     const multiSelected = false;
     const hover = true;
     const filling = false;
-    expect(getState(disabled, selected, multiSelected, hover, filling)).toBe(OptionStateType.HOVER);
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
+      OptionStateType.HOVER
+    );
   });
 
   it('Should be FILLING when filling', () => {
     const disabled = false;
+    const focused = false;
     const selected = false;
     const multiSelected = false;
     const hover = false;
     const filling = true;
-    expect(getState(disabled, selected, multiSelected, hover, filling)).toBe(
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
       OptionStateType.FILLING
     );
   });
 
   it('Should be DEFAULT in other case', () => {
     const disabled = false;
+    const focused = false;
     const selected = false;
     const multiSelected = false;
     const hover = false;
     const filling = false;
-    expect(getState(disabled, selected, multiSelected, hover, filling)).toBe(
+    expect(getState(disabled, focused, selected, multiSelected, hover, filling)).toBe(
       OptionStateType.DEFAULT
     );
   });

src/components/option/utils/option.utils.ts

@@ -3,6 +3,7 @@ import { OptionStateType } from '../types';
 // eslint-disable-next-line complexity
 const getState = (
   disabled: boolean | undefined,
+  focused: boolean | undefined,
   selected: boolean | undefined,
   multiSelected: boolean | undefined,
   hover: boolean,
@@ -11,6 +12,9 @@ const getState = (
   if (disabled) {
     return OptionStateType.DISABLED;
   }
+  if (focused) {
+    return OptionStateType.FOCUS;
+  }
   if (selected) {
     if (multiSelected) {
       return hover ? OptionStateType.MULTIPLE_SELECTED_HOVER : OptionStateType.MULTIPLE_SELECTED;