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

package/dist/theme/default/index.mjs

@@ -1834,6 +1834,7 @@ var trash_default = SvgTrash;
 
 // src/theme/default/components/settings/settings-oidc.tsx
 import { useFormContext as useFormContext7 } from "react-hook-form";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 function DefaultSettingsOidc({
   linkButtons,
@@ -1841,9 +1842,6 @@ function DefaultSettingsOidc({
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  const {
-    formState: { isSubmitting }
-  } = useFormContext7();
   return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-8", children: [
     hasLinkButtons && /* @__PURE__ */ jsx53("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
       const attrs = button.attributes;
@@ -1860,36 +1858,55 @@ function DefaultSettingsOidc({
     }) }),
     hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ jsx53(DefaultHorizontalDivider, {}) : null,
     unlinkButtons.map((button) => {
-      var _a, _b;
-      const attrs = button.attributes;
-      const provider = (_b = extractProvider((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
-      const Logo = attrs.value in provider_logos_default ? provider_logos_default[attrs.value] : provider_logos_default.generic;
-      return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-6", children: [
-          /* @__PURE__ */ jsx53(Logo, { size: 32 }),
-          /* @__PURE__ */ jsx53("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
-        ] }),
-        /* @__PURE__ */ jsx53(
-          "button",
+      if (button.attributes.node_type !== "input") {
+        return null;
+      }
+      return /* @__PURE__ */ jsx53(UnlinkRow, { button }, button.attributes.value);
+    })
+  ] });
+}
+function UnlinkRow({ button }) {
+  var _a, _b;
+  const [clicked, setClicked] = useState4(false);
+  const {
+    formState: { isSubmitting }
+  } = useFormContext7();
+  const attrs = button.attributes;
+  const provider = (_b = extractProvider((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
+  const Logo = attrs.value in provider_logos_default ? provider_logos_default[attrs.value] : provider_logos_default.generic;
+  const localOnClick = () => {
+    setClicked(true);
+    button.onClick();
+  };
+  useEffect4(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting]);
+  return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx53(Logo, { size: 32 }),
+      /* @__PURE__ */ jsx53("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
+    ] }),
+    /* @__PURE__ */ jsx53(
+      "button",
+      {
+        ...attrs,
+        type: "submit",
+        onClick: localOnClick,
+        disabled: isSubmitting,
+        className: "relative",
+        title: `Unlink ${provider}`,
+        children: clicked ? /* @__PURE__ */ jsx53(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx53(
+          trash_default,
           {
-            ...attrs,
-            type: "submit",
-            onClick: button.onClick,
-            disabled: isSubmitting,
-            className: "relative",
-            title: `Unlink ${provider}`,
-            children: isSubmitting ? /* @__PURE__ */ jsx53(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx53(
-              trash_default,
-              {
-                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
-                size: 24
-              }
-            )
+            className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
+            size: 24
           }
         )
-      ] }, attrs.value);
-    })
-  ] });
+      }
+    )
+  ] }, attrs.value);
 }
 
 // src/theme/default/components/settings/settings-passkey.tsx