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

package/dist/index.mjs

@@ -190,21 +190,29 @@ function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
 function useNodesGroups(nodes, { omit } = {}) {
   const groupSorter = useGroupSorter();
   const groups = useMemo(() => {
-    var _a;
+    var _a, _b;
     const groups2 = {};
+    const groupRetained = {};
     for (const node of nodes) {
+      const groupNodes = (_a = groups2[node.group]) != null ? _a : [];
+      groupNodes.push(node);
+      groups2[node.group] = groupNodes;
       if ((omit == null ? void 0 : omit.includes("script")) && isUiNodeScriptAttributes(node.attributes)) {
         continue;
       }
       if ((omit == null ? void 0 : omit.includes("input_hidden")) && isUiNodeInputAttributes(node.attributes) && node.attributes.type === "hidden") {
         continue;
       }
-      const groupNodes = (_a = groups2[node.group]) != null ? _a : [];
-      groupNodes.push(node);
-      groups2[node.group] = groupNodes;
+      groupRetained[node.group] = ((_b = groupRetained[node.group]) != null ? _b : 0) + 1;
     }
-    return groups2;
-  }, [nodes]);
+    const finalGroups = {};
+    for (const [group, count] of Object.entries(groupRetained)) {
+      if (count > 0) {
+        finalGroups[group] = groups2[group];
+      }
+    }
+    return finalGroups;
+  }, [nodes, omit]);
   const entries = useMemo(
     () => Object.entries(groups).sort(([a], [b]) => groupSorter(a, b)),
     [groups, groupSorter]
@@ -871,7 +879,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 +911,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 +922,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 +1143,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 +1159,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 +1174,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 +1196,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 }
@@ -1198,47 +1221,55 @@ function OryTwoStepCard() {
     (node) => node.group === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml
   );
   const showSso = !(formState.current === "method_active" && !(formState.method === UiNodeGroupEnum.Oidc || formState.method === UiNodeGroupEnum.Saml));
-  const showSsoDivider = hasSso && nonSsoNodes.filter((n) => {
+  const showSsoDivider = hasSso && nonSsoNodes.some((n) => {
     if (isUiNodeInputAttributes(n.attributes)) {
       return n.attributes.type !== UiNodeInputAttributesTypeEnum.Hidden;
     } else if (isUiNodeScriptAttributes(n.attributes)) {
       return false;
     }
     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__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Card.Divider, {}),
+                /* @__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 || n.group === UiNodeGroupEnum.Default || n.group === UiNodeGroupEnum.Profile
+              ).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
+              finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+            ] }),
+            /* @__PURE__ */ jsx(OryCardFooter, {})
+          ]
+        }
+      )
     ] })
   ] });
 }