@asgardeo/react 0.6.30 → 0.7.0

package/dist/components/primitives/Select/Select.d.ts

@@ -51,6 +51,10 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      * Helper text to display below the select
      */
     helperText?: string;
+    /**
+     * Placeholder text for the default/empty option
+     */
+    placeholder?: string;
     /**
      * The options to display in the select
      */

package/dist/index.js

@@ -3824,6 +3824,7 @@ var Select = ({
   required,
   disabled,
   helperText,
+  placeholder,
   options,
   style = {},
   ...rest
@@ -3846,7 +3847,7 @@ var Select = ({
       style,
       children: [
         label && /* @__PURE__ */ jsx23(InputLabel_default, { required, error: hasError, children: label }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsxs5(
           "select",
           {
             className: selectClassName,
@@ -3854,7 +3855,10 @@ var Select = ({
             "aria-invalid": hasError,
             "aria-required": required,
             ...rest,
-            children: options.map((option) => /* @__PURE__ */ jsx23("option", { value: option.value, className: styles.option, children: option.label }, option.value))
+            children: [
+              placeholder && /* @__PURE__ */ jsx23("option", { value: "", disabled: true, children: placeholder }),
+              options.map((option) => /* @__PURE__ */ jsx23("option", { value: option.value, className: styles.option, children: option.label }, option.value))
+            ]
           }
         )
       ]
@@ -7089,6 +7093,32 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
     case EmbeddedFlowComponentType.Divider: {
       return /* @__PURE__ */ jsx55(Divider_default, { children: component.label || "" }, key);
     }
+    case EmbeddedFlowComponentType.Select: {
+      const identifier = component.ref;
+      const value = formValues[identifier] || "";
+      const isTouched = touchedFields[identifier] || false;
+      const error = isTouched ? formErrors[identifier] : void 0;
+      const selectOptions = (component.options || []).map((opt) => ({
+        value: typeof opt === "string" ? opt : String(opt.value ?? ""),
+        label: typeof opt === "string" ? opt : String(opt.label ?? opt.value ?? "")
+      }));
+      return /* @__PURE__ */ jsx55(
+        Select_default,
+        {
+          name: identifier,
+          label: component.label || "",
+          placeholder: component.placeholder,
+          required: component.required,
+          options: selectOptions,
+          value,
+          error,
+          onChange: (e) => onInputChange(identifier, e.target.value),
+          onBlur: () => options.onInputBlur?.(identifier),
+          className: options.inputClassName
+        },
+        key
+      );
+    }
     case EmbeddedFlowComponentType.Block: {
       if (component.components && component.components.length > 0) {
         const blockComponents = component.components.map(
@@ -7232,12 +7262,25 @@ var createActionRefMapping = (response) => {
   }
   return mapping;
 };
-var applyInputRefMapping = (components, refMapping, actionMapping) => {
+var applyInputRefMapping = (components, refMapping, actionMapping, inputsData = []) => {
   return components.map((component) => {
     const transformedComponent = { ...component };
     if (transformedComponent.ref && refMapping.has(transformedComponent.ref)) {
       transformedComponent.ref = refMapping.get(transformedComponent.ref);
     }
+    if (transformedComponent.type === "SELECT" && component.id) {
+      const inputData = inputsData.find((input) => input.ref === component.id);
+      if (inputData?.options) {
+        transformedComponent.options = inputData.options.map((opt) => {
+          if (typeof opt === "string") {
+            return { value: opt, label: opt };
+          }
+          const value = typeof opt.value === "object" ? JSON.stringify(opt.value) : String(opt.value || "");
+          const label = typeof opt.label === "object" ? JSON.stringify(opt.label) : String(opt.label || value);
+          return { value, label };
+        });
+      }
+    }
     if (transformedComponent.type === "ACTION" && transformedComponent.id && actionMapping.has(transformedComponent.id)) {
       transformedComponent.actionRef = actionMapping.get(transformedComponent.id);
     }
@@ -7245,7 +7288,8 @@ var applyInputRefMapping = (components, refMapping, actionMapping) => {
       transformedComponent.components = applyInputRefMapping(
         transformedComponent.components,
         refMapping,
-        actionMapping
+        actionMapping,
+        inputsData
       );
     }
     return transformedComponent;
@@ -7258,8 +7302,9 @@ var transformComponents = (response, t, resolveTranslations = true) => {
   let components = response.data.meta.components;
   const refMapping = createInputRefMapping(response);
   const actionMapping = createActionRefMapping(response);
-  if (refMapping.size > 0 || actionMapping.size > 0) {
-    components = applyInputRefMapping(components, refMapping, actionMapping);
+  const inputsData = response?.data?.inputs || [];
+  if (refMapping.size > 0 || actionMapping.size > 0 || inputsData.length > 0) {
+    components = applyInputRefMapping(components, refMapping, actionMapping, inputsData);
   }
   return resolveTranslations ? resolveTranslationsInArray_default(components, t) : components;
 };
@@ -9187,7 +9232,7 @@ var BaseSignUpContent2 = ({
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === EmbeddedFlowComponentType4.TextInput || component.type === EmbeddedFlowComponentType4.PasswordInput || component.type === EmbeddedFlowComponentType4.EmailInput) {
+          if (component.type === EmbeddedFlowComponentType4.TextInput || component.type === EmbeddedFlowComponentType4.PasswordInput || component.type === EmbeddedFlowComponentType4.EmailInput || component.type === EmbeddedFlowComponentType4.Select) {
             const fieldName = component.ref || component.id;
             fields.push({
               name: fieldName,