@ory/elements-react 1.0.0-next.15 → 1.0.0-next.16

package/dist/theme/default/index.mjs

@@ -383,26 +383,32 @@ function DefaultCurrentIdentifierButton() {
     "autocomplete",
     "node_type"
   ]);
-  return /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs5(
     "a",
     {
-      className: "cursor-pointer py-[5px] px-3 rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover transition-colors inline-flex gap-1 items-center",
+      className: "cursor-pointer py-[5px] px-3 rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover transition-colors inline-flex gap-1 items-center self-start max-w-full",
       ...attributes,
       href: initFlowUrl,
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.attributes.value}`,
       children: [
-        /* @__PURE__ */ jsx6(arrow_left_default, { size: 16, className: "text-button-identifier-fg-subtle" }),
+        /* @__PURE__ */ jsx6(
+          arrow_left_default,
+          {
+            size: 16,
+            className: "text-button-identifier-fg-subtle shrink-0"
+          }
+        ),
         /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-button-identifier-fg-default text-ellipsis overflow-hidden text-nowrap", children: nodeBackButton == null ? void 0 : nodeBackButton.attributes.value })
       ]
     }
-  ) });
+  );
 }
 function getBackButtonNode(flowType, nodes) {
   let nodeBackButton;
   switch (flowType) {
     case FlowType3.Login:
       nodeBackButton = nodes.find(
-        (node) => "name" in node.attributes && node.attributes.name === "identifier" && node.group === "identifier_first"
+        (node) => "name" in node.attributes && node.attributes.name === "identifier" && ["default", "identifier_first"].includes(node.group)
       );
       break;
     case FlowType3.Registration:
@@ -480,6 +486,7 @@ function cn(...inputs) {
 // src/theme/default/components/form/index.tsx
 import { useIntl as useIntl3 } from "react-intl";
 import {
+  messageTestId,
   uiTextToFormattedMessage,
   useOryFlow as useOryFlow5
 } from "@ory/elements-react";
@@ -523,11 +530,12 @@ function DefaultMessage({ message }) {
   return /* @__PURE__ */ jsx10(
     "span",
     {
-      className: cn("text-sm mt-1 leading-normal", {
+      className: cn("text-sm leading-normal", {
         "text-forms-fg-error": message.type === "error",
         "text-forms-fg-default": message.type === "info",
         "text-forms-fg-success": message.type === "success"
       }),
+      ...messageTestId(message),
       children: uiTextToFormattedMessage(message, intl)
     }
   );
@@ -597,6 +605,9 @@ function DefaultAuthMethodListItem({
       className: "flex text-left py-2 gap-3 cursor-pointer",
       onClick,
       type: isGroupImmediateSubmit(group) ? "submit" : "button",
+      id: `auth-method-list-item-${group}`,
+      "data-testid": "auth-method-list-item",
+      "aria-label": `Authenticate with ${group}`,
       children: [
         /* @__PURE__ */ jsx15("div", { className: "flex-none w-4 h-4 mt-[2px]", children: Icon && /* @__PURE__ */ jsx15(Icon, { size: 20, className: "text-forms-fg-default" }) }),
         /* @__PURE__ */ jsxs8("div", { className: "flex-1 text-sm leading-normal", children: [
@@ -754,7 +765,7 @@ DefaultButton.displayName = "DefaultButton";
 // src/theme/default/components/form/checkbox.tsx
 import { getNodeLabel as getNodeLabel2 } from "@ory/client-fetch";
 import {
-  messageTestId,
+  messageTestId as messageTestId2,
   uiTextToFormattedMessage as uiTextToFormattedMessage4
 } from "@ory/elements-react";
 import { useState } from "react";
@@ -940,7 +951,7 @@ var DefaultCheckbox = ({
             "span",
             {
               className: "text-sm text-red-900 mt-1",
-              ...messageTestId(message),
+              ...messageTestId2(message),
               children: uiTextToFormattedMessage4(message, intl)
             },
             message.id
@@ -1026,12 +1037,19 @@ var DefaultInput = ({
 // src/theme/default/components/form/label.tsx
 import { FlowType as FlowType7, getNodeLabel as getNodeLabel4 } from "@ory/client-fetch";
 import {
-  messageTestId as messageTestId2,
+  messageTestId as messageTestId3,
   uiTextToFormattedMessage as uiTextToFormattedMessage6,
+  useComponents as useComponents2,
   useOryFlow as useOryFlow8
 } from "@ory/elements-react";
+import { useFormContext as useFormContext4 } from "react-hook-form";
 import { useIntl as useIntl9 } from "react-intl";
 import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+function findResendNode(nodes) {
+  return nodes.find(
+    (n) => "name" in n.attributes && (n.attributes.name === "email" && n.attributes.type === "submit" || n.attributes.name === "resend")
+  );
+}
 function DefaultLabel({
   node,
   children,
@@ -1040,17 +1058,22 @@ function DefaultLabel({
 }) {
   const intl = useIntl9();
   const label = getNodeLabel4(node);
+  const { Message } = useComponents2();
   const { config, flowType, flow } = useOryFlow8();
+  const { setValue } = useFormContext4();
   const isPassword = attributes.type === "password";
-  const hasResendNode = flow.ui.nodes.some(
-    (n) => "name" in n.attributes && n.attributes.name === "email" && n.attributes.type === "submit"
-  );
+  const resendNode = findResendNode(flow.ui.nodes);
+  const handleResend = () => {
+    if ((resendNode == null ? void 0 : resendNode.attributes) && "name" in resendNode.attributes) {
+      setValue(resendNode.attributes.name, resendNode.attributes.value);
+    }
+  };
   return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col antialiased gap-1", children: [
     label && /* @__PURE__ */ jsxs12("span", { className: "inline-flex justify-between", children: [
       /* @__PURE__ */ jsx24(
         "label",
         {
-          ...messageTestId2(label),
+          ...messageTestId3(label),
           className: "text-sm font-medium leading-normal",
           htmlFor: attributes.name,
           ...rest,
@@ -1069,31 +1092,20 @@ function DefaultLabel({
           })
         }
       ),
-      hasResendNode && /* @__PURE__ */ jsx24(
+      (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ jsx24(
         "button",
         {
           type: "submit",
-          name: "method",
-          value: "code",
+          name: resendNode.attributes.name,
+          value: resendNode.attributes.value,
+          onClick: handleResend,
           className: "text-links-link-default hover:underline hover:text-link-hover transition-colors text-sm font-medium cursor-pointer",
           children: intl.formatMessage({ id: "identities.messages.1070008" })
         }
       )
     ] }),
     children,
-    node.messages.map((message) => /* @__PURE__ */ jsx24(
-      "span",
-      {
-        className: cn("text-sm leading-normal", {
-          "text-forms-fg-error": message.type === "error",
-          "text-forms-fg-default": message.type === "info",
-          "text-forms-fg-success": message.type === "success"
-        }),
-        ...messageTestId2(message),
-        children: uiTextToFormattedMessage6(message, intl)
-      },
-      message.id
-    ))
+    node.messages.map((message) => /* @__PURE__ */ jsx24(Message.Content, { message }, message.id))
   ] });
 }
 
@@ -1124,7 +1136,7 @@ var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
 DefaultLinkButton.displayName = "DefaultLinkButton";
 
 // src/theme/default/components/form/pin-code-input.tsx
-import { useFormContext as useFormContext4 } from "react-hook-form";
+import { useFormContext as useFormContext5 } from "react-hook-form";
 
 // src/theme/default/components/form/shadcn/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
@@ -1170,7 +1182,7 @@ InputOTPSlot.displayName = "InputOTPSlot";
 // src/theme/default/components/form/pin-code-input.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
 var DefaultPinCodeInput = ({ attributes }) => {
-  const { setValue, watch } = useFormContext4();
+  const { setValue, watch } = useFormContext5();
   const { maxlength, name } = attributes;
   const elements = maxlength != null ? maxlength : 6;
   const handleInputChange = (v) => {
@@ -1491,7 +1503,7 @@ function DefaultText({ node, attributes }) {
 }
 
 // src/theme/default/components/generic/page-header.tsx
-import { useComponents as useComponents2 } from "@ory/elements-react";
+import { useComponents as useComponents3 } from "@ory/elements-react";
 
 // src/theme/default/components/ui/user-menu.tsx
 import { DropdownMenuLabel as DropdownMenuLabel2 } from "@radix-ui/react-dropdown-menu";
@@ -1700,7 +1712,7 @@ var UserMenu = ({ session }) => {
 import { useSession } from "@ory/elements-react/client";
 import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
 var DefaultPageHeader = (_props) => {
-  const { Card } = useComponents2();
+  const { Card } = useComponents3();
   const { session } = useSession();
   return /* @__PURE__ */ jsx50("div", { className: "flex max-w-[896px] flex-col w-full gap-3 mt-16", children: /* @__PURE__ */ jsx50("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 max-h-10 justify-between flex-1", children: [
     /* @__PURE__ */ jsx50("div", { className: "h-10 flex-1 relative", children: /* @__PURE__ */ jsx50(Card.Logo, {}) }),
@@ -1718,7 +1730,7 @@ var SvgTrash = (props) => {
 var trash_default = SvgTrash;
 
 // src/theme/default/components/settings/settings-oidc.tsx
-import { useFormContext as useFormContext5 } from "react-hook-form";
+import { useFormContext as useFormContext6 } from "react-hook-form";
 import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 function DefaultSettingsOidc({
   linkButtons,
@@ -1726,7 +1738,7 @@ function DefaultSettingsOidc({
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  const { setValue } = useFormContext5();
+  const { setValue } = useFormContext6();
   return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
     hasLinkButtons && /* @__PURE__ */ jsx52("div", { className: "flex gap-3 items-start [&>button]:w-[79px]", children: linkButtons.map((button) => {
       const attrs = button.attributes;