fix: center text on OIDC buttons and debounce state update

packages/elements-react/package.json

@@ -49,6 +49,7 @@
     "react-hook-form": "7.53.0",
     "react-intl": "6.7.0",
     "tailwind-merge": "2.5.2",
+    "usehooks-ts": "3.1.1",
     "zustand": "5.0.0"
   },
   "peerDependencies": {

packages/elements-react/src/theme/default/components/form/social.tsx

@@ -7,11 +7,12 @@
   uiTextToFormattedMessage,
   useOryFlow,
 } from "@ory/elements-react"
+import { ElementType, useEffect } from "react"
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+import { useDebounceValue } from "usehooks-ts"
 import defaultLogos from "../../provider-logos"
 import { cn } from "../../utils/cn"
-import { useIntl } from "react-intl"
-import { ElementType, useEffect, useState } from "react"
-import { useFormContext } from "react-hook-form"
 import { Spinner } from "./spinner"
 
 export function extractProvider(
@@ -50,7 +51,9 @@
   const {
     flow: { ui },
   } = useOryFlow()
-  const [clicked, setClicked] = useState(false)
+  // Safari cancels form submission events, if we do a state update in the same tick
+  // so we delay the state update by 100ms
+  const [clicked, setClicked] = useDebounceValue(false, 100)
   const intl = useIntl()
   const {
     formState: { isSubmitting },
@@ -72,15 +75,15 @@
   const provider = extractProvider(node.meta.label?.context) ?? ""
 
   const localOnClick = () => {
-    setClicked(true)
     onClick?.()
+    setClicked(true)
   }
 
   useEffect(() => {
     if (!isSubmitting) {
       setClicked(false)
     }
-  }, [isSubmitting])
+  }, [isSubmitting, setClicked])
 
   return (
     <button
@@ -108,9 +111,12 @@
         )}
       </span>
       {showLabel && node.meta.label ? (
-        <span className="grow text-left font-medium leading-none text-button-social-foreground-default">
-          {uiTextToFormattedMessage(node.meta.label, intl)}
-        </span>
+        <>
+          <span className="grow text-center font-medium leading-none text-button-social-foreground-default">
+            {uiTextToFormattedMessage(node.meta.label, intl)}
+          </span>
+          <span className="size-5 block"></span>
+        </>
       ) : null}
     </button>
   )

packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx

@@ -3,8 +3,9 @@
 
 import { UiNode, UiNodeInputAttributes } from "@ory/client-fetch"
 import { OrySettingsOidcProps } from "@ory/elements-react"
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import { useFormContext } from "react-hook-form"
+import { useDebounceValue } from "usehooks-ts"
 import Trash from "../../assets/icons/trash.svg"
 import logos from "../../provider-logos"
 import { DefaultHorizontalDivider } from "../form/horizontal-divider"
@@ -53,33 +54,31 @@
 }
 
 function UnlinkRow({ button }: UnlinkRowProps) {
-  const [clicked, setClicked] = useState(false)
+  // Safari cancels form submission events, if we do a state update in the same tick
+  // so we delay the state update by 100ms
+  const [clicked, setClicked] = useDebounceValue(false, 100)
   const {
     formState: { isSubmitting },
   } = useFormContext()
   const attrs = button.attributes as UiNodeInputAttributes
   const provider = extractProvider(button.meta.label?.context) ?? ""
-  const Logo = attrs.value in logos ? logos[attrs.value] : logos.generic
+  const Logo = logos[(attrs.value as string).split("-")[0]]
 
   const localOnClick = () => {
     button.onClick()
-    // Safari cancels form submission events, if we do a state update in the same tick
-    // so we delay the state update by 100ms
-    setTimeout(() => {
-      setClicked(true)
-    }, 100)
+    setClicked(true)
   }
 
   useEffect(() => {
     if (!isSubmitting) {
       setClicked(false)
     }
-  }, [isSubmitting])
+  }, [isSubmitting, setClicked])
 
   return (
     <div key={attrs.value} className="flex justify-between">
       <div className="flex items-center gap-6">
-        <Logo size={32} />
+        {Logo ? <Logo size={32} /> : <logos.generic size={32} />}
         <p className="text-sm font-medium text-interface-foreground-default-secondary">
           {provider}
         </p>