@agility/plenum-ui 2.1.18 → 2.1.19-rc2

package/dist/types/stories/molecules/inputs/select/Select.d.ts

@@ -4,21 +4,13 @@ export interface ISimpleSelectOptions {
     value: string;
 }
 export interface ISelectProps {
-    /** Label */
     label?: string;
-    /** Select ID prop */
     id?: string;
-    /** Select name prop */
     name?: string;
-    /** List of options to display in the select menu */
     options: ISimpleSelectOptions[];
-    /** Select name prop */
     onChange?(value: string): void;
-    /** Select disabled state */
     isDisabled?: boolean;
-    /** Select error state */
     isError?: boolean;
-    /** Select required state */
     isRequired?: boolean;
     value?: string;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.1.18",
+	"version": "2.1.19-rc2",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/molecules/inputs/select/Select.tsx

@@ -8,27 +8,20 @@ export interface ISimpleSelectOptions {
 	value: string;
 }
 export interface ISelectProps {
-	/** Label */
 	label?: string;
-	/** Select ID prop */
 	id?: string;
-	/** Select name prop */
 	name?: string;
-	/** List of options to display in the select menu */
 	options: ISimpleSelectOptions[];
-	/** Select name prop */
 	onChange?(value: string): void;
-	/** Select disabled state */
 	isDisabled?: boolean;
-	/** Select error state */
 	isError?: boolean;
-	/** Select required state */
 	isRequired?: boolean;
 	value?: string;
 	className?: string;
 	onFocus?: () => void;
 	onBlur?: () => void;
 }
+
 const Select: React.FC<ISelectProps> = ({
 	label,
 	id,
@@ -43,22 +36,31 @@ const Select: React.FC<ISelectProps> = ({
 	onFocus,
 	onBlur
 }) => {
-	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value);
+	const getValidVal = (val: string | undefined) => {
+		const validValue = val && val !== "" ? val : options[0]?.value ?? "select an option";
+		console.log("valid Val", validValue);
+		return validValue;
+	};
+	const [selectedOption, setSelectedOption] = useState<string>(getValidVal(value));
 	const uniqueID = useId();
 	if (!id) id = `select-${uniqueID}`;
 	if (!name) name = id;
 
 	useEffect(() => {
-		if (value !== undefined && value !== null) {
+		// Explicitly handle falsy values
+		if (value !== undefined) {
 			setSelectedOption(value);
 		}
 	}, [value]);
 
 	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
 		const targetValue = e.target.value;
-		typeof onChange == "function" && onChange(targetValue);
+		if (typeof onChange === "function") {
+			onChange(targetValue);
+		}
 		setSelectedOption(targetValue);
 	};
+
 	const wrapperStyle = cn("group", { "opacity-50": isDisabled });
 	return (
 		<div className={wrapperStyle}>
@@ -89,13 +91,11 @@ const Select: React.FC<ISelectProps> = ({
 				onFocus={onFocus}
 				onBlur={onBlur}
 			>
-				{options.map(({ value, label }) => {
-					return (
-						<option key={value} value={value}>
-							{label}
-						</option>
-					);
-				})}
+				{options.map(({ value, label }) => (
+					<option key={value} value={value}>
+						{label}
+					</option>
+				))}
 			</select>
 		</div>
 	);