@agility/plenum-ui 2.1.17 → 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.17",
+	"version": "2.1.19-rc2",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

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

@@ -1,38 +1,27 @@
-import React, { useEffect, useState } from "react"
-import InputLabel from "@/stories/molecules/inputs/InputLabel"
-import { useId } from "@/utils/useId"
-import { default as cn } from "classnames"
+import React, { useEffect, useState } from "react";
+import InputLabel from "@/stories/molecules/inputs/InputLabel";
+import { useId } from "@/utils/useId";
+import { default as cn } from "classnames";
 
 export interface ISimpleSelectOptions {
-	label: string
-	value: string
+	label: string;
+	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
+	label?: string;
+	id?: string;
+	name?: string;
+	options: ISimpleSelectOptions[];
+	onChange?(value: string): void;
+	isDisabled?: boolean;
+	isError?: boolean;
+	isRequired?: boolean;
+	value?: string;
+	className?: string;
+	onFocus?: () => void;
+	onBlur?: () => void;
 }
+
 const Select: React.FC<ISelectProps> = ({
 	label,
 	id,
@@ -47,23 +36,32 @@ const Select: React.FC<ISelectProps> = ({
 	onFocus,
 	onBlur
 }) => {
-	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value)
-	const uniqueID = useId()
-	if (!id) id = `select-${uniqueID}`
-	if (!name) name = id
+	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) {
-			setSelectedOption(value)
+		// Explicitly handle falsy values
+		if (value !== undefined) {
+			setSelectedOption(value);
 		}
-	}, [value])
+	}, [value]);
 
 	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-		const targetValue = e.target.value
-		typeof onChange == "function" && onChange(targetValue)
-		setSelectedOption(targetValue)
-	}
-	const wrapperStyle = cn("group", { "opacity-50": isDisabled })
+		const targetValue = e.target.value;
+		if (typeof onChange === "function") {
+			onChange(targetValue);
+		}
+		setSelectedOption(targetValue);
+	};
+
+	const wrapperStyle = cn("group", { "opacity-50": isDisabled });
 	return (
 		<div className={wrapperStyle}>
 			{label && (
@@ -93,16 +91,14 @@ const Select: React.FC<ISelectProps> = ({
 				onFocus={onFocus}
 				onBlur={onBlur}
 			>
-				{options.map(({ value, label }) => {
-					return (
-						<option key={value} value={label}>
-							{label}
-						</option>
-					)
-				})}
+				{options.map(({ value, label }) => (
+					<option key={value} value={value}>
+						{label}
+					</option>
+				))}
 			</select>
 		</div>
-	)
-}
+	);
+};
 
-export default Select
+export default Select;