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

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 1.0.0-next.25 (2025-01-29)
+
+### 🚀 Features
+
+- expose get flow factory ([#333](https://github.com/ory/elements/pull/333))
+
+### 🩹 Fixes
+
+- make OIDC remove button loading state specific ([#339](https://github.com/ory/elements/pull/339))
+- only show loading indicator on clicked button ([#335](https://github.com/ory/elements/pull/335))
+- don't short circuit code method selector ([#336](https://github.com/ory/elements/pull/336))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
 ## 1.0.0-next.24 (2025-01-22)
 
 ### 🩹 Fixes

package/dist/theme/default/index.js

@@ -1854,6 +1854,7 @@ var trash_default = SvgTrash;
 
 // src/theme/default/components/settings/settings-oidc.tsx
 var import_react_hook_form8 = require("react-hook-form");
+var import_react7 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function DefaultSettingsOidc({
   linkButtons,
@@ -1861,9 +1862,6 @@ function DefaultSettingsOidc({
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  const {
-    formState: { isSubmitting }
-  } = (0, import_react_hook_form8.useFormContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-8", children: [
     hasLinkButtons && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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;
@@ -1880,36 +1878,55 @@ function DefaultSettingsOidc({
     }) }),
     hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(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__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Logo, { size: 32 }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          "button",
+      if (button.attributes.node_type !== "input") {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(UnlinkRow, { button }, button.attributes.value);
+    })
+  ] });
+}
+function UnlinkRow({ button }) {
+  var _a, _b;
+  const [clicked, setClicked] = (0, import_react7.useState)(false);
+  const {
+    formState: { isSubmitting }
+  } = (0, import_react_hook_form8.useFormContext)();
+  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();
+  };
+  (0, import_react7.useEffect)(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting]);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Logo, { size: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      "button",
+      {
+        ...attrs,
+        type: "submit",
+        onClick: localOnClick,
+        disabled: isSubmitting,
+        className: "relative",
+        title: `Unlink ${provider}`,
+        children: clicked ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          trash_default,
           {
-            ...attrs,
-            type: "submit",
-            onClick: button.onClick,
-            disabled: isSubmitting,
-            className: "relative",
-            title: `Unlink ${provider}`,
-            children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              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