@agility/plenum-ui 2.1.19-rc2 → 2.1.19-rc3

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

@@ -4,13 +4,21 @@ 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.19-rc2",
+	"version": "2.1.19-rc3",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

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

@@ -8,20 +8,27 @@ 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,
@@ -36,31 +43,28 @@ const Select: React.FC<ISelectProps> = ({
 	onFocus,
 	onBlur
 }) => {
-	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 [selectedOption, setSelectedOption] = useState<string>(value || options[0].value);
 	const uniqueID = useId();
 	if (!id) id = `select-${uniqueID}`;
 	if (!name) name = id;
 
 	useEffect(() => {
-		// Explicitly handle falsy values
-		if (value !== undefined) {
+		// handle the case where value could be "" or false
+		if (value === "") {
+			const matchedOption = options.find((option) => option.value === "");
+			setSelectedOption(matchedOption?.value || options[0].value);
+			return;
+		}
+		if (value !== undefined && value !== null) {
 			setSelectedOption(value);
 		}
-	}, [value]);
+	}, [options, value]);
 
 	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
 		const targetValue = e.target.value;
-		if (typeof onChange === "function") {
-			onChange(targetValue);
-		}
+		typeof onChange == "function" && onChange(targetValue);
 		setSelectedOption(targetValue);
 	};
-
 	const wrapperStyle = cn("group", { "opacity-50": isDisabled });
 	return (
 		<div className={wrapperStyle}>
@@ -91,11 +95,13 @@ const Select: React.FC<ISelectProps> = ({
 				onFocus={onFocus}
 				onBlur={onBlur}
 			>
-				{options.map(({ value, label }) => (
-					<option key={value} value={value}>
-						{label}
-					</option>
-				))}
+				{options.map(({ value, label }) => {
+					return (
+						<option key={value} value={value}>
+							{label}
+						</option>
+					);
+				})}
 			</select>
 		</div>
 	);