Shared:Components:Password-input: add types

packages/shared/components/password-input/PasswordInput.tsx

@@ -54,25 +54,27 @@ import {
   StyledTooltipItem,
 } from "./PasswordInput.styled";
 import {
+  PasswordInputHandle,
   PasswordInputProps,
   TPasswordSettings,
   TPasswordValidation,
+  TState,
 } from "./PasswordInput.types";
 
-const PasswordInput = React.forwardRef(
+const PasswordInput = React.forwardRef<PasswordInputHandle, PasswordInputProps>(
   (
     {
       inputType = InputType.password,
       inputValue,
       clipActionResource,
       emailInputName,
+      passwordSettings,
       onBlur,
       onKeyDown,
       onValidateInput,
       onChange,
       isDisabled,
       simpleView,
-      passwordSettings,
       generatorSpecial,
 
       clipCopiedResource,
@@ -102,10 +104,10 @@ const PasswordInput = React.forwardRef(
       tooltipOffsetLeft,
       tooltipOffsetTop,
       isAutoFocussed,
-    }: PasswordInputProps,
+    },
     ref,
   ) => {
-    const [state, setState] = useState({
+    const [state, setState] = useState<TState>({
       type: inputType,
       value: inputValue,
       copyLabel: clipActionResource,

packages/shared/components/password-input/PasswordInput.types.ts

@@ -24,7 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import React from "react";
+import React, { MouseEvent } from "react";
 import { InputSize, InputType } from "../text-input";
 
 export type TPasswordSettings = {
@@ -46,6 +46,24 @@ export type TPasswordValidation = {
   length: boolean;
 };
 
+export type PasswordInputHandle = {
+  onGeneratePassword: (e: MouseEvent) => void;
+  setState(state: TState): void;
+  value?: string;
+};
+
+export type TState = {
+  type: InputType.text | InputType.password;
+  value?: string;
+  copyLabel?: string;
+  disableCopyAction?: boolean;
+  displayTooltip: boolean;
+  validLength: boolean;
+  validDigits: boolean;
+  validCapital: boolean;
+  validSpecial: boolean;
+};
+
 export interface PasswordInputProps {
   /** Allows setting the component id  */
   id?: string;

packages/shared/components/password-input/index.tsx

@@ -24,4 +24,6 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+export { PasswordInputHandle } from "./PasswordInput.types";
+
 export { PasswordInput } from "./PasswordInput";