@agility/plenum-ui 2.1.28 → 2.2.1

package/stories/molecules/inputs/TextInput/TextInput.tsx

@@ -1,44 +1,49 @@
-import React, { forwardRef, useEffect, useId, useRef, useState } from "react"
-import { default as cn } from "classnames"
-import InputLabel from "../InputLabel"
-import InputField, { AcceptedInputTypes } from "../InputField"
-import InputCounter from "../InputCounter"
+import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { default as cn } from "classnames";
+import InputLabel from "../InputLabel";
+import InputField, { AcceptedInputTypes } from "../InputField";
+import InputCounter from "../InputCounter";
 
 export interface ITextInputProps {
 	/** Input type*/
-	type: AcceptedInputTypes
+	type: AcceptedInputTypes;
 	/** Input ID */
-	id?: string
+	id?: string;
 	/** Input Name */
-	name?: string
+	name?: string;
 	/** Label for the input */
-	label?: string
+	label?: string;
 	/** Force the focus state on the input */
-	isFocused?: boolean
+	isFocused?: boolean;
 	/** Error state */
-	isError?: boolean
+	isError?: boolean;
 	/** If field is required */
-	isRequired?: boolean
+	isRequired?: boolean;
 	/** Disabled state */
-	isDisabled?: boolean
+	isDisabled?: boolean;
 	/** Readonly state */
-	isReadonly?: boolean
+	isReadonly?: boolean;
 	/** Set default value */
-	defaultValue?: string
+	defaultValue?: string;
 	/** Message shown under the text field */
-	message?: string
+	message?: string;
 	/** Input character counter */
-	isShowCounter?: boolean
+	isShowCounter?: boolean;
 	/** Max length of input character  */
-	maxLength?: number
+	maxLength?: number;
 	/** Callback on change */
-	handleChange(value: string): void
+	handleChange(value: string): void;
 	/** input value */
-	value: string
+	value: string;
 	/**Placeholder input text*/
-	placeholder?: string
+	placeholder?: string;
 
-	className?: string
+	className?: string;
+
+	/** Callback on focus */
+	onFocus?: React.FocusEventHandler<HTMLInputElement>;
+	/** Callback on blur */
+	onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
 
 const TextInput = (
@@ -60,48 +65,56 @@ const TextInput = (
 		placeholder,
 		value: externalValue,
 		className,
+		onFocus,
+		onBlur,
 		...props
 	}: ITextInputProps,
 	ref: React.Ref<HTMLInputElement>
 ) => {
-	const uniqueID = useId()
-	const [isFocus, setIsFocus] = useState<boolean>(Boolean(isFocused))
+	const uniqueID = useId();
+	const [isFocus, setIsFocus] = useState<boolean>(Boolean(isFocused));
 
-	const [value, setValue] = useState<string>(externalValue || defaultValue || "")
-	const inputRef = useRef<HTMLInputElement>(null)
+	const [value, setValue] = useState<string>(externalValue || defaultValue || "");
+	const inputRef = useRef<HTMLInputElement>(null);
 
 	useEffect(() => {
 		//if the external value is updated by the parent component, reset the value in here...
 		if (externalValue !== undefined && externalValue !== null) {
-			setValue(externalValue)
+			setValue(externalValue);
 		}
-	}, [externalValue])
+	}, [externalValue]);
 
 	// set force focus
 	useEffect(() => {
-		const input = inputRef.current
-		if (!input || isFocus === undefined || isDisabled) return
+		const input = inputRef.current;
+		if (!input || isFocus === undefined || isDisabled) return;
 		if (isFocus) {
-			input.focus()
+			input.focus();
 		} else {
-			input.blur()
+			input.blur();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isFocus])
+	}, [isFocus]);
 
 	// set label as active if default value is set
 	useEffect(() => {
-		const input = inputRef.current
-		if (!input || defaultValue === undefined || defaultValue === "") return
-	}, [defaultValue])
+		const input = inputRef.current;
+		if (!input || defaultValue === undefined || defaultValue === "") return;
+	}, [defaultValue]);
 
-	const handleInputFocus = () => setIsFocus(true)
+	const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+		setIsFocus(true);
+		if (onFocus) onFocus(e);
+	};
 	// add other focus effects here
 
-	const handleInputBlur = () => setIsFocus(false)
+	const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+		setIsFocus(false);
+		if (onBlur) onBlur(e);
+	};
 
-	if (!id) id = `input-${uniqueID}`
-	if (!name) name = id
+	if (!id) id = `input-${uniqueID}`;
+	if (!name) name = id;
 
 	return (
 		<div className="relative group">
@@ -118,8 +131,8 @@ const TextInput = (
 				onFocus={handleInputFocus}
 				onBlur={handleInputBlur}
 				handleChange={(v: string) => {
-					setValue(v)
-					handleChange(v)
+					setValue(v);
+					handleChange(v);
 				}}
 				ref={ref}
 				type={type}
@@ -163,8 +176,8 @@ const TextInput = (
 				)}
 			</div>
 		</div>
-	)
-}
+	);
+};
 
-const _TextInput = forwardRef<HTMLInputElement, ITextInputProps>(TextInput)
-export default _TextInput
+const _TextInput = forwardRef<HTMLInputElement, ITextInputProps>(TextInput);
+export default _TextInput;

package/tailwind.config.js

@@ -218,7 +218,7 @@ module.exports = {
 				"rose-900": "#881337"
 			},
 			fontWeight: {
-				medium: 600
+				medium: 500
 			},
 			fontSize: {
 				xs: ["0.75rem", "1rem"],