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

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 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

@@ -206,7 +206,7 @@ function useNodesGroups(nodes, { omit } = {}) {
       groups2[node.group] = groupNodes;
     }
     return groups2;
-  }, [nodes]);
+  }, [nodes, omit]);
   const entries = react.useMemo(
     () => Object.entries(groups).sort(([a], [b]) => groupSorter(a, b)),
     [groups, groupSorter]
@@ -873,7 +873,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 +905,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 +916,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 +1137,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 +1153,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 +1168,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 +1190,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 }
@@ -1208,39 +1223,45 @@ function OryTwoStepCard() {
     }
     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.jsx(Card.Divider, {}),
+              Object.entries(authMethodBlocks).length > 0 && /* @__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
+              ).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, {})
+          ]
+        }
+      )
     ] })
   ] });
 }