@ory/elements-react 1.0.0-next.23 → 1.0.0-next.24

package/dist/theme/default/index.mjs

@@ -722,6 +722,7 @@ var provider_logos_default = logos;
 
 // src/theme/default/components/form/social.tsx
 import { useIntl as useIntl3 } from "react-intl";
+import { useEffect, useState } from "react";
 import { useFormContext as useFormContext2 } from "react-hook-form";
 
 // src/theme/default/components/form/spinner.tsx
@@ -789,6 +790,7 @@ function DefaultButtonSocial({
   const {
     flow: { ui }
   } = useOryFlow5();
+  const [clicked, setClicked] = useState(false);
   const intl = useIntl3();
   const {
     formState: { isSubmitting }
@@ -797,19 +799,29 @@ function DefaultButtonSocial({
   const Logo = logos2[attributes.value];
   const showLabel = _showLabel != null ? _showLabel : oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0;
   const provider = (_c = extractProvider((_b = node.meta.label) == null ? void 0 : _b.context)) != null ? _c : "";
+  const localOnClick = () => {
+    setClicked(true);
+    onClick == null ? void 0 : onClick();
+  };
+  useEffect(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting]);
   return /* @__PURE__ */ jsxs19(
     "button",
     {
-      className: "gap-3 border border-button-social-border-default bg-button-social-background-default hover:bg-button-social-background-hover transition-colors rounded flex items-center justify-center px-4 py-[13px] disabled:bg-button-social-background-disabled disabled:border-button-social-border-disabled disabled:text-button-social-foreground-disabled hover:text-button-social-foreground-disabled",
+      className: "gap-3 border border-button-social-border-default bg-button-social-background-default hover:bg-button-social-background-hover transition-colors rounded flex items-center justify-center px-4 py-[13px] loading:bg-button-social-background-disabled loading:border-button-social-border-disabled loading:text-button-social-foreground-disabled hover:text-button-social-foreground-hover",
       value: attributes.value,
       type: "submit",
       name: "provider",
       "data-testid": `ory/form/node/input/${attributes.name}`,
       ...props,
-      onClick,
+      onClick: localOnClick,
+      "data-loading": clicked,
       disabled: isSubmitting,
       children: [
-        /* @__PURE__ */ jsx25("span", { className: "size-5 relative", children: !isSubmitting ? Logo ? /* @__PURE__ */ jsx25(Logo, { size: 20 }) : /* @__PURE__ */ jsx25("span", { className: "flex aspect-square items-center justify-center rounded-full border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ jsx25(Spinner, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx25("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ jsx25(Logo, { size: 20 }) : /* @__PURE__ */ jsx25("span", { className: "flex aspect-square items-center justify-center rounded-full border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ jsx25(Spinner, { className: "size-5" }) }),
         showLabel && node.meta.label ? /* @__PURE__ */ jsx25("span", { className: "grow text-left font-medium leading-none text-button-social-foreground-default", children: uiTextToFormattedMessage(node.meta.label, intl) }) : null
       ]
     }
@@ -977,6 +989,7 @@ import {
 import { cva } from "class-variance-authority";
 import { useFormContext as useFormContext3 } from "react-hook-form";
 import { useIntl as useIntl6 } from "react-intl";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var buttonStyles = cva(
   [
@@ -1027,12 +1040,18 @@ var DefaultButton = ({
     // End of skipped attributes
     ...rest
   } = attributes;
+  const [clicked, setClicked] = useState2(false);
   const intl = useIntl6();
   const label = getNodeLabel(node);
   const {
     formState: { isSubmitting },
     setValue
   } = useFormContext3();
+  useEffect2(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting]);
   const isPrimary = attributes.name === "method" || attributes.name.includes("passkey") || attributes.name.includes("webauthn") || attributes.name.includes("lookup_secret");
   return /* @__PURE__ */ jsxs21(
     "button",
@@ -1043,6 +1062,7 @@ var DefaultButton = ({
       type: type === "button" ? "button" : "submit",
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
+        setClicked(true);
         if (type !== "button") {
           setValue(name, value);
         }
@@ -1050,10 +1070,10 @@ var DefaultButton = ({
       className: buttonStyles({
         intent: isPrimary ? "primary" : "secondary"
       }),
-      disabled: (_a = rest.disabled) != null ? _a : true,
-      "data-loading": isSubmitting,
+      disabled: (_a = rest.disabled) != null ? _a : isSubmitting,
+      "data-loading": clicked,
       children: [
-        isSubmitting ? /* @__PURE__ */ jsx32(Spinner, {}) : null,
+        clicked ? /* @__PURE__ */ jsx32(Spinner, {}) : null,
         label ? /* @__PURE__ */ jsx32("span", { children: uiTextToFormattedMessage3(label, intl) }) : ""
       ]
     }
@@ -1581,7 +1601,7 @@ 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";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
 import { useOryFlow as useOryFlow10 } from "@ory/elements-react";
 
 // src/util/client.ts
@@ -1761,12 +1781,12 @@ import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 var UserMenu = ({ session }) => {
   const { config } = useOryFlow10();
   const initials = getUserInitials(session);
-  const [logoutFlow, setLogoutFlow] = useState();
+  const [logoutFlow, setLogoutFlow] = useState3();
   const fetchLogoutFlow = useCallback(async () => {
     const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow();
     setLogoutFlow(flow);
   }, [config.sdk.url]);
-  useEffect(() => {
+  useEffect3(() => {
     void fetchLogoutFlow();
   }, [fetchLogoutFlow]);
   return /* @__PURE__ */ jsxs28(DropdownMenu, { children: [