diff --git a/.changeset/all-plants-teach.md b/.changeset/all-plants-teach.md new file mode 100644 index 00000000..6a2268b3 --- /dev/null +++ b/.changeset/all-plants-teach.md @@ -0,0 +1,5 @@ +--- +'@asgardeo/react': patch +--- + +Add `Select` support for `DROPDOWN` types diff --git a/packages/react/src/components/adapters/SelectInput.tsx b/packages/react/src/components/adapters/SelectInput.tsx new file mode 100644 index 00000000..f82739be --- /dev/null +++ b/packages/react/src/components/adapters/SelectInput.tsx @@ -0,0 +1,62 @@ +/** + * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import {FieldType} from '@asgardeo/browser'; +import {FC} from 'react'; +import {BaseSignUpOptionProps} from '../presentation/SignUp/SignUpOptionFactory'; +import {createField} from '../factories/FieldFactory'; +import {SelectOption} from '../primitives/Select/Select'; + +/** + * Select input component for sign-up forms. + */ +const SelectInput: FC = ({ + component, + formValues, + touchedFields, + formErrors, + onInputChange, + inputClassName, +}) => { + const config: Record = component.config || {}; + const fieldName: string = (config['identifier'] as string) || (config['name'] as string) || component.id; + const value: string = formValues[fieldName] || ''; + const error: string = touchedFields[fieldName] ? formErrors[fieldName] : undefined; + + // Get options from config and convert to SelectOption format + const rawOptions: string[] = (config['options'] as string[]) || []; + const options: SelectOption[] = rawOptions.map((option: string) => ({ + label: option, + value: option, + })); + + return createField({ + type: FieldType.Select, + name: fieldName, + label: (config['label'] as string) || '', + placeholder: (config['placeholder'] as string) || '', + required: (config['required'] as boolean) || false, + value, + error, + options, + onChange: (newValue: string): void => onInputChange(fieldName, newValue), + className: inputClassName, + }); +}; + +export default SelectInput; diff --git a/packages/react/src/components/presentation/SignUp/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/SignUp/SignUpOptionFactory.tsx index 6614ae94..85643a96 100644 --- a/packages/react/src/components/presentation/SignUp/SignUpOptionFactory.tsx +++ b/packages/react/src/components/presentation/SignUp/SignUpOptionFactory.tsx @@ -29,6 +29,7 @@ import PasswordInput from '../../adapters/PasswordInput'; import ButtonComponent from '../../adapters/SubmitButton'; import TelephoneInput from '../../adapters/TelephoneInput'; import TextInput from '../../adapters/TextInput'; +import SelectInput from '../../adapters/SelectInput'; import Typography from '../../adapters/Typography'; import GoogleButton from '../../adapters/GoogleButton'; import GitHubButton from '../../adapters/GitHubButton'; @@ -201,6 +202,9 @@ export const createSignUpComponent = ({component, onSubmit, ...rest}: BaseSignUp case EmbeddedFlowComponentType.Form: return ; + case EmbeddedFlowComponentType.Select: + return ; + case EmbeddedFlowComponentType.Divider: return ; diff --git a/packages/react/src/components/presentation/SignUp/transformer.ts b/packages/react/src/components/presentation/SignUp/transformer.ts index 544eb25c..1a9a1fcb 100644 --- a/packages/react/src/components/presentation/SignUp/transformer.ts +++ b/packages/react/src/components/presentation/SignUp/transformer.ts @@ -96,6 +96,7 @@ const convertSimpleInputToComponent = ( name: string; type: string; required: boolean; + options?: string[]; }, t: UseTranslation['t'], ): EmbeddedFlowComponent => { @@ -108,6 +109,28 @@ const convertSimpleInputToComponent = ( fieldType = 'password'; } + // Handle dropdown type + if (input.type.toLowerCase() === 'dropdown') { + const label: string = getInputLabel(input.name, fieldType, t); + const placeholder: string = getInputPlaceholder(input.name, fieldType, t); + + return { + id: generateId('select'), + type: EmbeddedFlowComponentType.Select, + variant: 'SELECT', + config: { + type: fieldType, + label, + placeholder, + required: input.required as boolean, + identifier: input.name, + hint: '', + options: input.options || [], + }, + components: [], + }; + } + const variant: 'TEXT' | 'EMAIL' | 'PASSWORD' = getInputVariant(fieldType, input.name); const label: string = getInputLabel(input.name, fieldType, t); const placeholder: string = getInputPlaceholder(input.name, fieldType, t);