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

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## 1.0.0-next.46 (2025-04-16)
+
+### 🩹 Fixes
+
+- missing hidden field regression ([#439](https://github.com/ory/elements/pull/439))
+- use correct testid ([#438](https://github.com/ory/elements/pull/438))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+
+## 1.0.0-next.45 (2025-04-15)
+
+### 🩹 Fixes
+
+- add missing test id to scope checkbox label ([#437](https://github.com/ory/elements/pull/437))
+- add missing captcha group to all methods ([#432](https://github.com/ory/elements/pull/432))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
 ## 1.0.0-next.44 (2025-04-10)
 
 ### 🩹 Fixes

package/dist/index.d.mts

@@ -53,6 +53,7 @@ type OryNodeImageProps = {
 type FormValues = Record<string, string | boolean | number | undefined>;
 type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
     onSubmit: FormEventHandler<HTMLFormElement>;
+    "data-testid"?: string;
 };
 type OryNodeInputProps = {
     attributes: UiNodeInputAttributes;
@@ -374,8 +375,9 @@ type DeepPartialTwoLevels<T> = {
 type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
 type OryFormProps = PropsWithChildren<{
     onAfterSubmit?: (method: string | number | boolean | undefined) => void;
+    "data-testid"?: string;
 }>;
-declare function OryForm({ children, onAfterSubmit }: OryFormProps): react_jsx_runtime.JSX.Element;
+declare function OryForm({ children, onAfterSubmit, "data-testid": dataTestId, }: OryFormProps): react_jsx_runtime.JSX.Element;
 
 declare function useComponents(): OryFlowComponents;
 declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {

package/dist/index.d.ts

@@ -53,6 +53,7 @@ type OryNodeImageProps = {
 type FormValues = Record<string, string | boolean | number | undefined>;
 type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
     onSubmit: FormEventHandler<HTMLFormElement>;
+    "data-testid"?: string;
 };
 type OryNodeInputProps = {
     attributes: UiNodeInputAttributes;
@@ -374,8 +375,9 @@ type DeepPartialTwoLevels<T> = {
 type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
 type OryFormProps = PropsWithChildren<{
     onAfterSubmit?: (method: string | number | boolean | undefined) => void;
+    "data-testid"?: string;
 }>;
-declare function OryForm({ children, onAfterSubmit }: OryFormProps): react_jsx_runtime.JSX.Element;
+declare function OryForm({ children, onAfterSubmit, "data-testid": dataTestId, }: OryFormProps): react_jsx_runtime.JSX.Element;
 
 declare function useComponents(): OryFlowComponents;
 declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {

package/dist/index.js

@@ -192,21 +192,29 @@ function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
 function useNodesGroups(nodes, { omit } = {}) {
   const groupSorter = useGroupSorter();
   const groups = react.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")) && clientFetch.isUiNodeScriptAttributes(node.attributes)) {
         continue;
       }
       if ((omit == null ? void 0 : omit.includes("input_hidden")) && clientFetch.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 = react.useMemo(
     () => Object.entries(groups).sort(([a], [b]) => groupSorter(a, b)),
     [groups, groupSorter]
@@ -873,7 +881,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 = reactHookForm.useFormContext();
@@ -901,7 +913,7 @@ function OryForm({ children, onAfterSubmit }) {
       }),
       type: "error"
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8", "data-testid": dataTestId, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { message: m }, m.id) }),
       /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
     ] });
@@ -912,6 +924,7 @@ function OryForm({ children, onAfterSubmit }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Form.Root,
     {
+      "data-testid": dataTestId,
       action: flowContainer.flow.ui.action,
       method: flowContainer.flow.ui.method,
       onSubmit: (e) => void methods.handleSubmit(onSubmit)(e),
@@ -1132,7 +1145,7 @@ function OryFormSocialButtonsForm() {
   if (filteredNodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { "data-testid": `ory/form/methods/oidc-saml`, children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
 }
 function isUINodeGroupEnum(method) {
   return Object.values(clientFetch.UiNodeGroupEnum).includes(method);
@@ -1148,7 +1161,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(clientFetch.UiNodeGroupEnum).filter((group) => {
       var _a2;
       return (_a2 = groupsToShow.groups[group]) == null ? void 0 : _a2.length;
@@ -1163,7 +1176,17 @@ function OryTwoStepCard() {
       ].includes(group)
     ).map((g) => [g, {}])
   );
-  if (clientFetch.UiNodeGroupEnum.Code in options) {
+  const authMethodAdditionalNodes = ui.nodes.filter(
+    ({ group }) => [
+      clientFetch.UiNodeGroupEnum.Oidc,
+      clientFetch.UiNodeGroupEnum.Saml,
+      clientFetch.UiNodeGroupEnum.Default,
+      clientFetch.UiNodeGroupEnum.IdentifierFirst,
+      clientFetch.UiNodeGroupEnum.Profile,
+      clientFetch.UiNodeGroupEnum.Captcha
+    ].includes(group)
+  );
+  if (clientFetch.UiNodeGroupEnum.Code in authMethodBlocks) {
     let identifier = (_b = (_a = findNode(ui.nodes, {
       group: "identifier_first",
       node_type: "input",
@@ -1175,7 +1198,7 @@ function OryTwoStepCard() {
       name: "address"
     })) == null ? void 0 : _c.attributes) == null ? void 0 : _d.value);
     if (identifier) {
-      options[clientFetch.UiNodeGroupEnum.Code] = {
+      authMethodBlocks[clientFetch.UiNodeGroupEnum.Code] = {
         title: {
           id: "identities.messages.1010023",
           values: { address: identifier }
@@ -1200,47 +1223,55 @@ function OryTwoStepCard() {
     (node) => node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml
   );
   const showSso = !(formState.current === "method_active" && !(formState.method === clientFetch.UiNodeGroupEnum.Oidc || formState.method === clientFetch.UiNodeGroupEnum.Saml));
-  const showSsoDivider = hasSso && nonSsoNodes.filter((n) => {
+  const showSsoDivider = hasSso && nonSsoNodes.some((n) => {
     if (clientFetch.isUiNodeInputAttributes(n.attributes)) {
       return n.attributes.type !== clientFetch.UiNodeInputAttributesTypeEnum.Hidden;
     } else if (clientFetch.isUiNodeScriptAttributes(n.attributes)) {
       return false;
     }
     return true;
-  }).length > 0;
-  const captchaNodes = ui.nodes.filter(
-    (n) => n.group === clientFetch.UiNodeGroupEnum.Captcha
-  );
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
       showSso && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(OryForm, { onAfterSubmit: handleAfterFormSubmit, children: [
-        formState.current === "provide_identifier" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-          showSsoDivider && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-          nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-        ] }),
-        formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-          Object.entries(options).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-          Object.entries(options).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            AuthMethodList,
-            {
-              options,
-              setSelectedGroup: (group) => dispatchFormState({
-                type: "action_select_method",
-                method: group
-              })
-            }
-          ),
-          captchaNodes.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-        ] }),
-        formState.current === "method_active" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-          ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
-          finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        OryForm,
+        {
+          "data-testid": `ory/form/methods/local`,
+          onAfterSubmit: handleAfterFormSubmit,
+          children: [
+            formState.current === "provide_identifier" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+              showSsoDivider && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+              nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+            ] }),
+            formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+              Object.entries(authMethodBlocks).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AuthMethodList,
+                  {
+                    options: authMethodBlocks,
+                    setSelectedGroup: (group) => dispatchFormState({
+                      type: "action_select_method",
+                      method: group
+                    })
+                  }
+                )
+              ] }),
+              authMethodAdditionalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+            ] }),
+            formState.current === "method_active" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+              ui.nodes.filter(
+                (n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Captcha || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
+              ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+              finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+          ]
+        }
+      )
     ] })
   ] });
 }