@ory/elements-react 1.0.0-next.40 → 1.0.0-next.43

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, FlowType, Configuration, FrontendApi, handleContinueWith, handleFlowError, settingsUrl, isResponseError, loginUrl, instanceOfContinueWithRecoveryUi, recoveryUrl, verificationUrl, registrationUrl, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum } from '@ory/client-fetch';
-import { createContext, useContext, useRef, useEffect, useState, useReducer, useMemo } from 'react';
+import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, FlowType, UiNodeInputAttributesTypeEnum, isUiNodeTextAttributes, handleContinueWith, handleFlowError, settingsUrl, isResponseError, loginUrl, recoveryUrl, verificationUrl, registrationUrl, Configuration, FrontendApi, instanceOfContinueWithRecoveryUi } from '@ory/client-fetch';
+import { createContext, useContext, useState, useMemo, useReducer, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useIntl, IntlProvider as IntlProvider$1 } from 'react-intl';
-import { useForm, FormProvider, useFormContext } from 'react-hook-form';
+import { useFormContext, useForm, FormProvider } from 'react-hook-form';
 
 // src/context/component.tsx
 var ComponentContext = createContext({
@@ -187,13 +187,16 @@ function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
     ].includes(group)
   );
 }
-function useNodesGroups(nodes) {
+function useNodesGroups(nodes, { omit } = {}) {
   const groupSorter = useGroupSorter();
   const groups = useMemo(() => {
     var _a;
     const groups2 = {};
     for (const node of nodes) {
-      if (node.type === "script") {
+      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 : [];
@@ -1139,11 +1142,14 @@ function OryTwoStepCard() {
   const { ui } = flow;
   const nodeSorter = useNodeSorter();
   const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
-  const uniqueGroups = useNodesGroups(ui.nodes);
+  const groupsToShow = useNodesGroups(ui.nodes, {
+    // We only want to render groups that have visible elements.
+    omit: ["script", "input_hidden"]
+  });
   const options = Object.fromEntries(
     Object.values(UiNodeGroupEnum).filter((group) => {
       var _a2;
-      return (_a2 = uniqueGroups.groups[group]) == null ? void 0 : _a2.length;
+      return (_a2 = groupsToShow.groups[group]) == null ? void 0 : _a2.length;
     }).filter(
       (group) => ![
         UiNodeGroupEnum.Oidc,
@@ -1176,7 +1182,7 @@ function OryTwoStepCard() {
     }
   }
   const nonSsoNodes = removeSsoNodes(ui.nodes);
-  const finalNodes = formState.current === "method_active" ? getFinalNodes(uniqueGroups.groups, formState.method) : [];
+  const finalNodes = formState.current === "method_active" ? getFinalNodes(groupsToShow.groups, formState.method) : [];
   const handleAfterFormSubmit = (method) => {
     if (typeof method !== "string" || !isUINodeGroupEnum(method)) {
       return;
@@ -1200,35 +1206,36 @@ 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: [
-        /* @__PURE__ */ jsxs(Form.Group, { children: [
-          formState.current === "provide_identifier" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            showSsoDivider && /* @__PURE__ */ jsx(Card.Divider, {}),
-            nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
-          ] }),
-          formState.current === "select_method" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Card.Divider, {}),
-            /* @__PURE__ */ jsx(
-              AuthMethodList,
-              {
-                options,
-                setSelectedGroup: (group) => dispatchFormState({
-                  type: "action_select_method",
-                  method: group
-                })
-              }
-            ),
-            ui.nodes.filter((n) => n.group === UiNodeGroupEnum.Captcha).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
-          ] }),
-          formState.current === "method_active" && /* @__PURE__ */ jsxs(Fragment, { 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))
-          ] })
+        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, {})
       ] })
@@ -1238,6 +1245,9 @@ function OryTwoStepCard() {
 function AuthMethodList({ options, setSelectedGroup }) {
   const { Card } = useComponents();
   const { setValue, getValues } = useFormContext();
+  if (Object.entries(options).length === 0) {
+    return null;
+  }
   const handleClick = (group, options2) => {
     var _a, _b, _c, _d;
     if (isGroupImmediateSubmit(group)) {
@@ -1663,16 +1673,19 @@ function SettingsSectionContent({ group, nodes }) {
   const { Card } = useComponents();
   const intl = useIntl();
   const { flow } = useOryFlow();
-  const uniqueGroups = useNodesGroups(flow.ui.nodes);
+  const groupedNodes = useNodesGroups(flow.ui.nodes, {
+    // Script nodes are already handled by the parent component.
+    omit: ["script"]
+  });
   if (group === UiNodeGroupEnum.Totp) {
     return /* @__PURE__ */ jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.totp,
+        nodes: groupedNodes.groups.totp,
         "data-testid": "ory/screen/settings/group/totp",
         children: [
-          /* @__PURE__ */ jsx(OrySettingsTotp, { nodes: (_a = uniqueGroups.groups.totp) != null ? _a : [] }),
-          (_b = uniqueGroups.groups.default) == null ? void 0 : _b.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+          /* @__PURE__ */ jsx(OrySettingsTotp, { nodes: (_a = groupedNodes.groups.totp) != null ? _a : [] }),
+          (_b = groupedNodes.groups.default) == null ? void 0 : _b.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
         ]
       }
     );
@@ -1681,16 +1694,16 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.lookup_secret,
+        nodes: groupedNodes.groups.lookup_secret,
         "data-testid": "ory/screen/settings/group/lookup_secret",
         children: [
           /* @__PURE__ */ jsx(
             OrySettingsRecoveryCodes,
             {
-              nodes: (_c = uniqueGroups.groups.lookup_secret) != null ? _c : []
+              nodes: (_c = groupedNodes.groups.lookup_secret) != null ? _c : []
             }
           ),
-          (_d = uniqueGroups.groups.default) == null ? void 0 : _d.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+          (_d = groupedNodes.groups.default) == null ? void 0 : _d.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
         ]
       }
     );
@@ -1699,11 +1712,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.oidc,
+        nodes: groupedNodes.groups.oidc,
         "data-testid": "ory/screen/settings/group/oidc",
         children: [
-          /* @__PURE__ */ jsx(OrySettingsOidc, { nodes: (_e = uniqueGroups.groups.oidc) != null ? _e : [] }),
-          (_f = uniqueGroups.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+          /* @__PURE__ */ jsx(OrySettingsOidc, { nodes: (_e = groupedNodes.groups.oidc) != null ? _e : [] }),
+          (_f = groupedNodes.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
         ]
       }
     );
@@ -1712,11 +1725,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.webauthn,
+        nodes: groupedNodes.groups.webauthn,
         "data-testid": "ory/screen/settings/group/webauthn",
         children: [
-          /* @__PURE__ */ jsx(OrySettingsWebauthn, { nodes: (_g = uniqueGroups.groups.webauthn) != null ? _g : [] }),
-          (_h = uniqueGroups.groups.default) == null ? void 0 : _h.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+          /* @__PURE__ */ jsx(OrySettingsWebauthn, { nodes: (_g = groupedNodes.groups.webauthn) != null ? _g : [] }),
+          (_h = groupedNodes.groups.default) == null ? void 0 : _h.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
         ]
       }
     );
@@ -1725,11 +1738,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.passkey,
+        nodes: groupedNodes.groups.passkey,
         "data-testid": "ory/screen/settings/group/passkey",
         children: [
-          /* @__PURE__ */ jsx(OrySettingsPasskey, { nodes: (_i = uniqueGroups.groups.passkey) != null ? _i : [] }),
-          (_j = uniqueGroups.groups.default) == null ? void 0 : _j.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+          /* @__PURE__ */ jsx(OrySettingsPasskey, { nodes: (_i = groupedNodes.groups.passkey) != null ? _i : [] }),
+          (_j = groupedNodes.groups.default) == null ? void 0 : _j.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
         ]
       }
     );
@@ -1750,7 +1763,7 @@ function SettingsSectionContent({ group, nodes }) {
               id: `settings.${group}.description`
             }),
             children: [
-              (_k = uniqueGroups.groups.default) == null ? void 0 : _k.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
+              (_k = groupedNodes.groups.default) == null ? void 0 : _k.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
               nodes.filter(
                 (node) => "type" in node.attributes && node.attributes.type !== "submit"
               ).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
@@ -1764,16 +1777,16 @@ function SettingsSectionContent({ group, nodes }) {
     }
   );
 }
-var getScriptNode = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
+var onlyScriptNodes = (nodes) => nodes.filter(
+  (node) => isUiNodeScriptAttributes(node.attributes) && node.attributes.id === "webauthn_script"
 );
 function OrySettingsCard() {
   const { flow } = useOryFlow();
-  const uniqueGroups = useNodesGroups(flow.ui.nodes);
-  const scriptNode = getScriptNode(flow.ui.nodes);
+  const uniqueGroups = useNodesGroups(flow.ui.nodes, { omit: ["script"] });
+  const scriptNodes = onlyScriptNodes(flow.ui.nodes);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
-    scriptNode && /* @__PURE__ */ jsx(Node, { node: scriptNode }),
+    scriptNodes.map((n) => /* @__PURE__ */ jsx(Node, { node: n })),
     uniqueGroups.entries.map(([group, nodes]) => {
       if (group === UiNodeGroupEnum.Default) {
         return null;
@@ -2299,7 +2312,7 @@ var de_default = {
   "two-step.code.description": "Ein Best\xE4tigungscode wird an Ihre E-Mail gesendet.",
   "two-step.code.title": "E-Mail-Code",
   "two-step.passkey.description": "Verwenden Sie die Fingerabdruck- oder Gesichtserkennung Ihres Ger\xE4ts",
-  "two-step.passkey.title": "Passwort (empfohlen)",
+  "two-step.passkey.title": "Passkey (empfohlen)",
   "two-step.password.description": "Geben Sie Ihr Passwort ein, das mit Ihrem Konto verkn\xFCpft ist",
   "two-step.password.title": "Passwort",
   "two-step.webauthn.title": "Sicherheitsschl\xFCssel",