Update onIconClick prop in components

This commit fixes the onIconClick prop so it now works as expected. However, it's important to note that this prop will be deprecated in the next major release. Instead, users should transition to using activeIcon onClick and disabledIcon onClick for handling icon click events. This change is part of our ongoing efforts to improve the API and usability of our components.

Author: Hector Arce De Las Heras

src/components/inputPassword/inputPassword.tsx

@@ -48,22 +48,20 @@ const InputPasswordComponent = React.forwardRef(
       ctv
     );
 
-    const icon = inputPasswordType === InputTypeType.PASSWORD ? disabledIcon : activeIcon;
-
-    const setTypeInput: React.MouseEventHandler<HTMLButtonElement> = event => {
+    const handleRightIconClick: React.MouseEventHandler<HTMLButtonElement> = event => {
       const icon = inputPasswordType === InputTypeType.PASSWORD ? disabledIcon : activeIcon;
 
       setInputPasswordType(
         inputPasswordType === InputTypeType.PASSWORD ? InputTypeType.TEXT : InputTypeType.PASSWORD
       );
       onInputTypeChange && onInputTypeChange();
       // deprecated - Remove this icon.onClick when the 'icon' is removed from the component
-      icon.onClick?.(
+      const iconClickValue =
         inputPasswordType === InputTypeType.PASSWORD
           ? OnIconClickValueType.VISIBLE
-          : OnIconClickValueType.HIDE,
-        event
-      );
+          : OnIconClickValueType.HIDE;
+      icon.onClick?.(iconClickValue, event);
+      onIconClick?.(iconClickValue);
     };
 
     const {
@@ -94,14 +92,16 @@ const InputPasswordComponent = React.forwardRef(
       onInternalErrors,
     });
 
+    const icon = inputPasswordType === InputTypeType.PASSWORD ? disabledIcon : activeIcon;
+
     return (
       <InputPasswordStandAlone
         {...props}
         ref={inputRef}
         maxLength={maxLength}
         rightIcon={{
           ...icon,
-          onClick: event => setTypeInput(event),
+          onClick: handleRightIconClick,
         }}
         state={state}
         styles={styles}

src/components/inputPassword/stories/inputPassword.stories.tsx

@@ -40,8 +40,8 @@ const commonArgs: IInputPassword = {
   placeholder: 'Placeholder',
   required: true,
   helpMessage: { content: 'HEEEELP!' },
-  activeIcon: { icon: ICONS.ICON_GHOST, altText: 'Show password' },
-  disabledIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Hide password' },
+  activeIcon: { icon: ICONS.ICON_GHOST, altText: 'Hide password' },
+  disabledIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Show password' },
   errorMessage: { content: 'Error message' },
   errorIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'error' },
   secondaryLabel: labelSecondary(themeSelected),

src/components/inputPassword/types/inputPassword.ts

@@ -45,5 +45,8 @@ export interface IInputPassword<V = undefined extends string ? unknown : string>
   onInputTypeChange?: () => void;
   onInternalErrors?: (errors: string[]) => void;
   onError?: (error: boolean) => void;
+  /**
+   * @deprecated This prop will be deprecated in the next major. Use instead activeIcon onClick and disabledIcon on click
+   */
   onIconClick?: (value: OnIconClickValueType) => void;
 }