7758 allow single value in kolselect (#8045)

Author: deleonio

packages/components/src/components/pagination/component.tsx

@@ -174,7 +174,7 @@ export class KolPaginationWc implements PaginationAPI {
 						_on={{
 							onChange: this.onChangePageSize,
 						}}
-						_value={[this.state._pageSize]}
+						_value={this.state._pageSize}
 					></KolSelectTag>
 				)}
 			</Host>
@@ -278,7 +278,7 @@ export class KolPaginationWc implements PaginationAPI {
 	};
 
 	private onChangePageSize = (event: Event, value: unknown) => {
-		value = parseInt((value as string[])[0]);
+		value = parseInt(value as string);
 		if (typeof value === 'number' && value > 0 && this._pageSize !== value) {
 			this._pageSize = value;
 			const timeout = setTimeout(() => {

packages/components/src/components/select/controller.ts

@@ -50,6 +50,10 @@ export class SelectController extends InputIconController implements SelectWatch
 	};
 
 	private readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {
+		const raw = nextState.get('_value');
+		if (raw !== undefined && !Array.isArray(raw)) {
+			nextState.set('_value', [raw]);
+		}
 		const options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;
 		if (Array.isArray(options) && options.length > 0) {
 			this.keyOptionMap.clear();
@@ -83,6 +87,7 @@ export class SelectController extends InputIconController implements SelectWatch
 	}
 
 	public validateMultiple(value?: boolean): void {
+		this.assertComponentValueMatchesMultiplicity(value === true);
 		watchBoolean(this.component, '_multiple', value, {
 			hooks: {
 				afterPatch: this.afterPatchOptions,
@@ -105,8 +110,9 @@ export class SelectController extends InputIconController implements SelectWatch
 		validateRows(this.component, value);
 	}
 
-	public validateValue(value?: Stringified<StencilUnknown[]>): void {
-		watchJsonArrayString(this.component, '_value', () => true, value, undefined, {
+	public validateValue(value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>): void {
+		this.assertValueMatchesMultiplicity(value);
+		watchJsonArrayString(this.component, '_value', () => true, value === undefined ? [] : Array.isArray(value) ? value : [value], undefined, {
 			hooks: {
 				afterPatch: this.afterPatchOptions,
 				beforePatch: this.beforePatchOptions,
@@ -122,4 +128,41 @@ export class SelectController extends InputIconController implements SelectWatch
 		this.validateRows(this.component._rows);
 		this.validateValue(this.component._value);
 	}
+
+	private assertValueMatchesMultiplicity(value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>): void {
+		const isArray = Array.isArray(value);
+		const isMultiple = this.component._multiple === true;
+
+		if (isMultiple) {
+			if (value !== undefined && !isArray) {
+				throw new Error(
+					`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(value)})`,
+				);
+			}
+		} else {
+			if (isArray) {
+				throw new Error(
+					`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(value)})`,
+				);
+			}
+		}
+	}
+
+	private assertComponentValueMatchesMultiplicity(isMultiple: boolean): void {
+		const rawValue = this.component._value;
+
+		if (isMultiple) {
+			if (rawValue !== undefined && !Array.isArray(rawValue)) {
+				throw new Error(
+					`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(rawValue)})`,
+				);
+			}
+		} else {
+			if (Array.isArray(rawValue)) {
+				throw new Error(
+					`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(rawValue)})`,
+				);
+			}
+		}
+	}
 }

packages/components/src/components/select/select.e2e.ts

@@ -6,7 +6,7 @@ import type { Page } from '@playwright/test';
 import { testInputMessage } from '../../e2e/input-msg';
 
 const COMPONENT_NAME = 'kol-select';
-const TEST_VALUE = ['E'];
+const TEST_VALUE = 'E';
 const TEST_LABEL = 'East';
 const OPTIONS = [
 	{ label: 'North', value: 'N' },

packages/components/src/components/select/shadow.tsx

@@ -49,8 +49,12 @@ export class KolSelect implements SelectAPI, FocusableElement {
 
 	@Method()
 	// eslint-disable-next-line @typescript-eslint/require-await
-	public async getValue(): Promise<StencilUnknown[]> {
-		return this.state._value;
+	public async getValue(): Promise<StencilUnknown[] | StencilUnknown> {
+		if (this._multiple) {
+			return this.state._value;
+		} else {
+			return Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;
+		}
 	}
 
 	@Method()
@@ -223,7 +227,7 @@ export class KolSelect implements SelectAPI, FocusableElement {
 	/**
 	 * Defines the value of the input.
 	 */
-	@Prop({ mutable: true, reflect: true }) public _value?: Stringified<StencilUnknown[]>;
+	@Prop({ mutable: true, reflect: true }) public _value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
 
 	@State() public state: SelectStates = {
 		_hasValue: false,
@@ -341,7 +345,7 @@ export class KolSelect implements SelectAPI, FocusableElement {
 	}
 
 	@Watch('_value')
-	public validateValue(value?: Stringified<StencilUnknown[]>): void {
+	public validateValue(value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>): void {
 		this.controller.validateValue(value);
 	}
 
@@ -354,14 +358,25 @@ export class KolSelect implements SelectAPI, FocusableElement {
 	}
 
 	private onInput(event: Event): void {
-		this._value = Array.from(this.selectRef?.options || [])
-			.filter((option) => option.selected === true)
+		const selectedValues = Array.from(this.selectRef?.options || [])
+			.filter((option) => option.selected)
 			.map((option) => this.controller.getOptionByKey(option.value)?.value as string);
 
-		this.controller.onFacade.onInput(event, true, this._value);
+		if (this._multiple) {
+			this._value = selectedValues;
+			this.controller.onFacade.onInput(event, true, selectedValues);
+		} else {
+			const singleValue: StencilUnknown = selectedValues.length > 0 ? selectedValues[0] : undefined;
+			this._value = singleValue;
+			this.controller.onFacade.onInput(event, true, singleValue);
+		}
 	}
 
 	private onChange(event: Event): void {
-		this.controller.onFacade.onChange(event, this._value);
+		if (this._multiple) {
+			this.controller.onFacade.onChange(event, this._value as StencilUnknown[]);
+		} else {
+			this.controller.onFacade.onChange(event, this._value as StencilUnknown);
+		}
 	}
 }