@ory/elements-react 1.0.0-next.44 → 1.0.0-next.45

package/dist/index.mjs

@@ -204,7 +204,7 @@ function useNodesGroups(nodes, { omit } = {}) {
       groups2[node.group] = groupNodes;
     }
     return groups2;
-  }, [nodes]);
+  }, [nodes, omit]);
   const entries = useMemo(
     () => Object.entries(groups).sort(([a], [b]) => groupSorter(a, b)),
     [groups, groupSorter]
@@ -871,7 +871,11 @@ function useOryFormSubmit(onAfterSubmit) {
   };
   return onSubmit;
 }
-function OryForm({ children, onAfterSubmit }) {
+function OryForm({
+  children,
+  onAfterSubmit,
+  "data-testid": dataTestId
+}) {
   const { Form } = useComponents();
   const flowContainer = useOryFlow();
   const methods = useFormContext();
@@ -899,7 +903,7 @@ function OryForm({ children, onAfterSubmit }) {
       }),
       type: "error"
     };
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsxs("div", { className: "grid gap-8", "data-testid": dataTestId, children: [
       /* @__PURE__ */ jsx(Message.Root, { children: /* @__PURE__ */ jsx(Message.Content, { message: m }, m.id) }),
       /* @__PURE__ */ jsx(OryCardFooter, {})
     ] });
@@ -910,6 +914,7 @@ function OryForm({ children, onAfterSubmit }) {
   return /* @__PURE__ */ jsx(
     Form.Root,
     {
+      "data-testid": dataTestId,
       action: flowContainer.flow.ui.action,
       method: flowContainer.flow.ui.method,
       onSubmit: (e) => void methods.handleSubmit(onSubmit)(e),
@@ -1130,7 +1135,7 @@ function OryFormSocialButtonsForm() {
   if (filteredNodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(OryFormProvider, { children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) }) });
+  return /* @__PURE__ */ jsx(OryFormProvider, { children: /* @__PURE__ */ jsx(OryForm, { "data-testid": `ory/form/methods/oidc-saml`, children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) }) });
 }
 function isUINodeGroupEnum(method) {
   return Object.values(UiNodeGroupEnum).includes(method);
@@ -1146,7 +1151,7 @@ function OryTwoStepCard() {
     // We only want to render groups that have visible elements.
     omit: ["script", "input_hidden"]
   });
-  const options = Object.fromEntries(
+  const authMethodBlocks = Object.fromEntries(
     Object.values(UiNodeGroupEnum).filter((group) => {
       var _a2;
       return (_a2 = groupsToShow.groups[group]) == null ? void 0 : _a2.length;
@@ -1161,7 +1166,17 @@ function OryTwoStepCard() {
       ].includes(group)
     ).map((g) => [g, {}])
   );
-  if (UiNodeGroupEnum.Code in options) {
+  const authMethodAdditionalNodes = ui.nodes.filter(
+    ({ group }) => [
+      UiNodeGroupEnum.Oidc,
+      UiNodeGroupEnum.Saml,
+      UiNodeGroupEnum.Default,
+      UiNodeGroupEnum.IdentifierFirst,
+      UiNodeGroupEnum.Profile,
+      UiNodeGroupEnum.Captcha
+    ].includes(group)
+  );
+  if (UiNodeGroupEnum.Code in authMethodBlocks) {
     let identifier = (_b = (_a = findNode(ui.nodes, {
       group: "identifier_first",
       node_type: "input",
@@ -1173,7 +1188,7 @@ function OryTwoStepCard() {
       name: "address"
     })) == null ? void 0 : _c.attributes) == null ? void 0 : _d.value);
     if (identifier) {
-      options[UiNodeGroupEnum.Code] = {
+      authMethodBlocks[UiNodeGroupEnum.Code] = {
         title: {
           id: "identities.messages.1010023",
           values: { address: identifier }
@@ -1206,39 +1221,45 @@ function OryTwoStepCard() {
     }
     return true;
   }).length > 0;
-  const captchaNodes = ui.nodes.filter(
-    (n) => n.group === UiNodeGroupEnum.Captcha
-  );
   return /* @__PURE__ */ jsxs(OryCard, { children: [
     /* @__PURE__ */ jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
       showSso && /* @__PURE__ */ jsx(OryFormSocialButtonsForm, {}),
-      /* @__PURE__ */ jsxs(OryForm, { onAfterSubmit: handleAfterFormSubmit, children: [
-        formState.current === "provide_identifier" && /* @__PURE__ */ jsxs(Form.Group, { children: [
-          showSsoDivider && /* @__PURE__ */ jsx(Card.Divider, {}),
-          nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
-        ] }),
-        formState.current === "select_method" && /* @__PURE__ */ jsxs(Form.Group, { children: [
-          Object.entries(options).length > 0 && /* @__PURE__ */ jsx(Card.Divider, {}),
-          Object.entries(options).length > 0 && /* @__PURE__ */ jsx(
-            AuthMethodList,
-            {
-              options,
-              setSelectedGroup: (group) => dispatchFormState({
-                type: "action_select_method",
-                method: group
-              })
-            }
-          ),
-          captchaNodes.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
-        ] }),
-        formState.current === "method_active" && /* @__PURE__ */ jsxs(Form.Group, { children: [
-          ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
-          finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
-        ] }),
-        /* @__PURE__ */ jsx(OryCardFooter, {})
-      ] })
+      /* @__PURE__ */ jsxs(
+        OryForm,
+        {
+          "data-testid": `ory/form/methods/local`,
+          onAfterSubmit: handleAfterFormSubmit,
+          children: [
+            formState.current === "provide_identifier" && /* @__PURE__ */ jsxs(Form.Group, { children: [
+              showSsoDivider && /* @__PURE__ */ jsx(Card.Divider, {}),
+              nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+            ] }),
+            formState.current === "select_method" && /* @__PURE__ */ jsxs(Form.Group, { children: [
+              Object.entries(authMethodBlocks).length > 0 && /* @__PURE__ */ jsx(Card.Divider, {}),
+              Object.entries(authMethodBlocks).length > 0 && /* @__PURE__ */ jsx(
+                AuthMethodList,
+                {
+                  options: authMethodBlocks,
+                  setSelectedGroup: (group) => dispatchFormState({
+                    type: "action_select_method",
+                    method: group
+                  })
+                }
+              ),
+              authMethodAdditionalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+            ] }),
+            formState.current === "method_active" && /* @__PURE__ */ jsxs(Form.Group, { children: [
+              ui.nodes.filter(
+                (n) => isUiNodeScriptAttributes(n.attributes) || n.group === UiNodeGroupEnum.Captcha
+              ).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
+              finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+            ] }),
+            /* @__PURE__ */ jsx(OryCardFooter, {})
+          ]
+        }
+      )
     ] })
   ] });
 }